Merge branch 'master' into sq-65829-front-padronizar-sq-select-multi-…

…tags-e-sq-select-search-no-ngx-css

.github/CODEOWNERS

@@ -1 +1 @@
-* @vinimarcili @squidit-master
+* @JonasPeres @squidit-master

application/src/app/app.component.ts

@@ -11,21 +11,21 @@ export class AppComponent implements OnInit {
   isServer = isPlatformServer(this.platformId)
 
   constructor(@Inject(PLATFORM_ID) private platformId: InjectionToken<Object>,
-  @Inject(DOCUMENT) private document: Document,
-  public getWindow: GetWindow
-) {}
+    @Inject(DOCUMENT) private document: Document,
+    public getWindow: GetWindow
+  ) { }
 
-theme = this.getWindow.window()?.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light'
+  theme = this.getWindow.window()?.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light'
 
-ngOnInit() {
+  ngOnInit() {
     this.theme = localStorage?.getItem('theme') || this.theme
     const html = this.document.getElementsByTagName('html')[0]
     html.classList.value = `${this.theme}`
   }
 
   toggleTheme() {
     this.theme = this.theme === 'dark' ? 'light' : 'dark'
-    if(!this.isServer) {
+    if (!this.isServer) {
       const html = this.document.getElementsByTagName('html')[0]
       html.classList.value = `${this.theme}`
       localStorage.setItem('theme', this.theme)

application/src/app/components/header/header.component.scss

@@ -31,7 +31,7 @@ header {
       width: 35px;
     }
     &:hover {    
-      color: var(--pink);
+      color: var(--primary_color);
     }
   }
   nav {
@@ -44,7 +44,7 @@ header {
       text-decoration: none;
       color: inherit;
       &:hover {
-        color: var(--pink);
+        color: var(--primary_color);
       }
     }
     button {
@@ -54,7 +54,7 @@ header {
       color: inherit;
       cursor: pointer;
       &:hover {
-        color: var(--pink);
+        color: var(--primary_color);
       }
     }
   }

src/components/sq-button/sq-button.component.ts

@@ -10,10 +10,10 @@ import { useMemo } from '../../helpers/memo.helper'
  * @see {@link https://css.squidit.com.br/components/button}
  * 
  * <br>
- * <button type="button" class='button button-pink mb-3'>Click Me</button>
+ * <button type="button" class='button button-primary mb-3'>Click Me</button>
  * 
  * @example
- * <sq-button type="button" color="pink" [loading]="false" (emitClick)="onClick($event)">
+ * <sq-button type="button" color="primary" [loading]="false" (emitClick)="onClick($event)">
  *   Click Me
  * </sq-button>
  */
@@ -31,7 +31,7 @@ export class SqButtonComponent {
   /**
    * The background color of the button.
    */
-  @Input() color = 'pink'
+  @Input() color = 'primary'
 
   /**
    * The text color of the button.

src/components/sq-input-date/sq-input-date.component.html

@@ -55,6 +55,7 @@
       (change)="change($event)"
       (keydown)="keyDown($event)"
       (keyup)="keyUp($event)"
+      (focus)="emitFocus.emit()"
     />
     <span class="input-group-text m-0" *ngIf="rightLabel">
       <ng-container *ngTemplateOutlet="rightLabel"></ng-container>

src/components/sq-input-file/sq-input-file.component.ts

@@ -25,12 +25,12 @@ export class SqInputFileComponent extends SqInputComponent {
   /**
    * Border color for the file input.
    */
-  @Input() override borderColor = 'var(--pink)'
+  @Input() override borderColor = 'var(--primary_color)'
 
   /**
    * Color for the file input.
    */
-  @Input() color = 'var(--pink)'
+  @Input() color = 'var(--primary_color)'
 
   /**
    * Font size for the file input.
@@ -99,6 +99,7 @@ export class SqInputFileComponent extends SqInputComponent {
    * @param isBlur - Indicates if the input has lost focus.
    */
   override async validate(isBlur = false) {
+    this.emitFocus.emit()
     if (this.externalError) {
       this.error = false
     } else if (!!this.required && (!this.value || this.value.length < 1) && this.value !== 0) {

src/components/sq-input-mask/sq-input-mask.component.html

@@ -65,6 +65,7 @@
       [decimalMarker]="decimalMarker"
       [placeHolderCharacter]="placeHolderCharacter"
       [leadZero]="leadZero"
+      (focus)="emitFocus.emit($event)"
       ngDefaultControl
     />
     <span class="input-group-text m-0" *ngIf="rightLabel">

src/components/sq-input-money/sq-input-money.component.html

@@ -35,6 +35,7 @@
   (inFocus)="inFocus.emit($event)"
   (keyPressUp)="keyPressUp.emit($event)"
   (keyPressDown)="keyPressDown.emit($event)"
+  (onFocus)="emitFocus.emit($event)"
 >
   <ng-container *ngIf="labelTemplateOverwrite">
     <ng-template #labelTemplate>

src/components/sq-input-number/sq-input-number.component.html

@@ -36,6 +36,7 @@
   (inFocus)="inFocus.emit($event)"
   (keyPressUp)="keyPressUp.emit($event)"
   (keyPressDown)="keyPressDown.emit($event)"
+  (onFocus)="emitFocus.emit()"
 >
 <ng-container *ngIf="labelTemplateOverwrite">
   <ng-template #labelTemplate>

src/components/sq-input-range/sq-input-range.component.html

@@ -36,6 +36,7 @@
       (blur)="validate(true)"
       [ngModel]="value"
       (ngModelChange)="change($event)"
+      (focus)="emitFocus.emit()"
       ngDefaultControl
       #input
     />

src/components/sq-input-range/sq-input-range.component.ts

@@ -71,7 +71,7 @@ export class SqInputRangeComponent implements AfterContentInit, OnChanges {
   /**
    * The color of the input component.
    */
-  @Input() color = 'var(--pink)'
+  @Input() color = 'var(--primary_color)'
 
   /**
    * The color of the input label.
@@ -123,6 +123,11 @@ export class SqInputRangeComponent implements AfterContentInit, OnChanges {
    */
   @Output() valid: EventEmitter<boolean> = new EventEmitter()
 
+  /**
+   * Event emitter for focus input changes.
+   */
+  @Output() emitFocus: EventEmitter<Event> = new EventEmitter<Event>()
+
   /**
    * A reference to the 'valueFloating' element in the component template.
    */

src/components/sq-input/sq-input.component.html

@@ -56,6 +56,7 @@
       (keyup)="keyUp($event)"
       [pattern]="pattern"
       [attr.inputmode]="inputMode"
+      (focus)="emitFocus.emit()"
       ngDefaultControl
     />
     <span class="input-group-text m-0" *ngIf="rightLabel">

src/components/sq-input/sq-input.component.ts

@@ -195,6 +195,11 @@ export class SqInputComponent {
    */
   @Output() valueChange: EventEmitter<any> = new EventEmitter()
 
+  /**
+   * Event emitter for focus input changes.
+   */
+  @Output() emitFocus: EventEmitter<Event> = new EventEmitter<Event>()
+
   /**
    * Reference to a left-aligned label template.
    */

src/components/sq-select-multi-tags/sq-select-multi-tags.component.html

@@ -93,7 +93,7 @@
         <sq-infinity-scroll
           class="list"
           elementToScrollId="sq-select-multi-tags-scroll"
-          loaderColor="var(--pink)"
+          loaderColor="var(--primary_color)"
           [length]="_options.length || 0"
           [hasMore]="hasMoreOptions"
           [loading]="loadingScroll"

src/components/sq-select-multi-tags/sq-select-multi-tags.component.ts

@@ -347,14 +347,14 @@ export class SqSelectMultiTagsComponent implements OnChanges {
    */
   removeItem(item: OptionMulti, event: any) {
     event?.stopPropagation()
-    if(!this.readonly && !this.disabled) {
+    if (!this.readonly && !this.disabled) {
       if (item.children?.length) {
         item.children.forEach((child) => {
           this.value = this.value?.filter((value) => value.value !== child.value)
         })
       }
       this.value = this.value?.filter((value) => value.value !== item.value)
-      
+
       this.valueChange.emit(this.value)
       this.removeTag.emit(item)
       this.validate()
@@ -454,7 +454,7 @@ export class SqSelectMultiTagsComponent implements OnChanges {
       this.setError('forms.required')
       this.valid.emit(false)
     } else if (this.minTags && this.value && this.value?.length < this.minTags) {
-      this.setError('forms.minimumRequired', {minTags: this.minTags})
+      this.setError('forms.minimumRequired', { minTags: this.minTags })
       this.valid.emit(false)
     } else if (this.maxTags && this.value && this.value?.length === this.maxTags) {
       this.renderOptionsList = false

src/components/sq-select-search/sq-select-search.component.html

@@ -89,7 +89,7 @@
     <sq-infinity-scroll
       class="list"
       elementToScrollId="sq-select-search-scroll"
-      loaderColor="var(--pink)"
+      loaderColor="var(--primary_color)"
       [length]="_options.length || 0"
       [hasMore]="hasMoreOptions"
       [loading]="loadingScroll"

src/components/sq-select/sq-select.component.html

@@ -48,6 +48,7 @@
       (blur)="validate(true)"
       [value]="value"
       (change)="change(select?.value)"
+      (focus)="emitFocus.emit()"
       #select
     >
       <option *ngIf="placeholder" value="" [selected]="!value" disabled>{{ placeholder }}</option>

src/components/sq-select/sq-select.component.ts

@@ -173,6 +173,11 @@ export class SqSelectComponent {
    */
   @Output() valueChange: EventEmitter<any> = new EventEmitter()
 
+  /**
+   * Event emitter for focus input changes.
+   */
+  @Output() emitFocus: EventEmitter<Event> = new EventEmitter<Event>()
+
   /**
    * Reference to a left-aligned label template.
    */

src/components/sq-steps/sq-steps.component.ts

@@ -35,7 +35,7 @@ export class SqStepsComponent {
   /**
    * The color theme for the steps component.
    */
-  @Input() color = 'var(--pink)'
+  @Input() color = 'var(--primary_color)'
 
   /**
    * Flag to enable or disable clicking on steps.

src/main.module.ts

@@ -30,6 +30,7 @@ import { SqSelectSearchComponent } from './components/sq-select-search/sq-select
 import { SqClickOutsideDirective } from './directives/sq-click-outside/sq-click-outside.directive'
 import { SearchPipe } from './pipes/search/search.pipe'
 import { BirthdatePipe } from './pipes/birthdate/birthdate.pipe'
+import { RemoveHtmlTagsPipe } from './pipes/remove-html-tags/remove-html-tags.pipe'
 import { SearchFromAlternativeArrayPipe } from './pipes/search-from-alternative-array/search-from-alternative-array.pipe'
 import { SearchValidValuesPipe } from './pipes/search-valid-values/search-valid-values.pipe'
 import { SqSelectMultiTagsComponent } from './components/sq-select-multi-tags/sq-select-multi-tags.component'
@@ -82,7 +83,8 @@ const components: (Type<any> | any)[] = [
   SqInputMaskComponent,
   SqInputMoneyComponent,
   SqInputNumberComponent,
-  TranslateInternalPipe
+  TranslateInternalPipe,
+  RemoveHtmlTagsPipe
 ]
 
 /**
@@ -108,4 +110,4 @@ const components: (Type<any> | any)[] = [
     NgxMaskPipe
   ]
 })
-export class SquidCSSModule {}
+export class SquidCSSModule { }

src/pipes/remove-html-tags/remove-html-tags.pipe.ts

@@ -0,0 +1,30 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+/**
+ * A custom Angular pipe for removing HTML tags from a given string.
+ *
+ * @example
+ * // In your component template:
+ * // Assuming 'htmlString' is a string containing HTML tags.
+ * <p>{{ htmlString | removeHtmlTags }}</p>
+ *
+ * @param {string | null | undefined} value - The input string from which to remove HTML tags.
+ * @returns {string} - The string with HTML tags removed.
+ */
+
+@Pipe({ name: 'removeHtmlTags' })
+export class RemoveHtmlTagsPipe implements PipeTransform {
+  /**
+   * Transforms a string by removing any HTML tags.
+   *
+   * @param {string | null | undefined} value - The input string to transform.
+   * @returns {string} - The transformed string with HTML tags removed.
+   */
+  transform(value: string | null | undefined): string {
+    if (value == null) {
+      return ''
+    }
+    const regex = /<\/?[^>]+(>|$)/g
+    return value.replace(regex, '')
+  }
+}

src/public-api.ts

@@ -42,6 +42,7 @@ export * from './pipes/search/search.pipe'
 export * from './pipes/thousands/thousands.pipe'
 export * from './pipes/translate-internal/translate-internal.pipe'
 export * from './pipes/universal-safe/universal-safe.pipe'
+export * from './pipes/remove-html-tags/remove-html-tags.pipe'
 
 export * from './helpers/colors.helper'
 export * from './helpers/date.helper'