Merge pull request #15 from squidit/feature/SQ-27694-mudancas-para-ma…

…tar-autocomplete

feature/SQ-27694-mudancas-para-matar-autocomplete

README.md

@@ -91,6 +91,7 @@ To use the errors handled in form components, you need to follow the steps below
     "seachSelectEmpty": "There are no options to select",
     "fileSize": "File too large",
     "required": "Required field",
+    "minimumRequired": "The minimum number of selected tags must be greater than or equal to {{ minTags }}",
     "email": "Invalid email",
     "url": "Invalid URL. Attention: URL must start with https://",
     "date": "Invalid Date",

application/src/assets/i18n/en.json

@@ -4,6 +4,7 @@
     "seachSelectEmpty": "There are no options to select",
     "fileSize": "File too large",
     "required": "Required field",
+    "minimumRequired": "The minimum number of selected tags must be greater than or equal to {{ minTags }}",
     "email": "Invalid email",
     "url": "Invalid URL. Attention: URL must start with https://",
     "date": "Invalid Date",

application/src/assets/i18n/es.json

@@ -4,6 +4,7 @@
     "seachSelectEmpty": "No hay opciones a seleccionar",
     "fileSize": "Archivo demasiado grande",
     "required": "Campo obligatorio",
+    "minimumRequired": "El número mínimo de etiquetas seleccionadas debe ser mayor o igual a {{ minTags }}",
     "email": "E-mail inválido",
     "url": "URL invalida. Atención: cada URL debe comenzar con https://",
     "date": "Fecha inválida",

application/src/assets/i18n/pt.json

@@ -4,6 +4,7 @@
     "seachSelectEmpty": "Não há opções a serem selecionadas",
     "fileSize": "O arquivo enviado é muito grande, tente diminuir a qualidade ou fazer o upload novamente.",
     "required": "Campo obrigatório",
+    "minimumRequired": "O número mínimo de tags selecionadas tem que ser maior ou igual a {{ minTags }}",
     "email": "E-mail inválido",
     "url": "URL inválida. Atenção: toda URL deve começar com https://",
     "date": "Data inválida",

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

@@ -3,7 +3,7 @@
     class="display-flex"
     *ngIf="label?.length || tooltipMessage"
     [ngClass]="{
-      readonly: readonly
+      readonly: readonly || isMaxTags
     }"
     [for]="id"
   >
@@ -22,7 +22,7 @@
     [ngClass]="{
       error: (externalError && externalError !== '') || (error && error !== ''),
       disabled: disabled,
-      readonly: readonly,
+      readonly: readonly || isMaxTags,
       loading: loading
     }"
   >
@@ -34,7 +34,7 @@
         'no-label': !(label && label.length > 0),
         'has-icon': error || externalError,
         disabled: disabled,
-        readonly: readonly
+        readonly: readonly || isMaxTags
       }"
       [ngStyle]="{
         'background-color': backgroundColor,
@@ -55,19 +55,19 @@
         </div>
         <span *ngIf="!value?.length || !showInside">{{ placeholder }}</span>
         <div class="input-fake-content-text" *ngIf="showInside && value?.length">
-          <span class="tag" *ngFor="let opt of value; let i = index" (click)="removeItem(opt)">
+          <span class="tag" *ngFor="let opt of value; let i = index" (click)="removeItem(opt, $event)">
             {{ opt?.label }} <i class="fas fa-times"></i>
           </span>
         </div>
         <span *ngIf="value?.length" class="badge">{{ value!.length }}</span>
         <i *ngIf="!loading" class="icon-down fas fa-chevron-down"></i>
       </div>
       <div
-        *ngIf="!loading && !disabled && renderOptionsList"
+        *ngIf="!loading && !disabled && !isMaxTags && renderOptionsList"
         id="sq-select-multi-tags-scroll"
         class="input-window scrollbar"
         [ngClass]="{
-          open: !loading && !disabled && renderOptionsList && open
+          open: !loading && !disabled && !isMaxTags && renderOptionsList && open
         }"
       >
         <div class="input-search">

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

@@ -120,6 +120,16 @@ export class SqSelectMultiTagsComponent {
    */
   @Input() options: Array<OptionMulti> = []
 
+  /**
+   * Maximum number of tags that can be chosen.
+   */
+  @Input() maxTags?: number
+
+  /**
+   * Minimum number of tags that can be chosen.
+   */
+  @Input() minTags?: number
+
   /**
    * Indicates whether to show selected tags inside the input.
    */
@@ -155,6 +165,11 @@ export class SqSelectMultiTagsComponent {
    */
   @Output() valueChange: EventEmitter<Array<OptionMulti>> = new EventEmitter()
 
+  /**
+   * Event emitted when the search input value changes.
+   */
+  @Output() searchChange: EventEmitter<string> = new EventEmitter()
+
   /**
    * Event emitted when the multi-tag select dropdown is closed.
    */
@@ -241,6 +256,11 @@ export class SqSelectMultiTagsComponent {
    */
   limit = this.quantity
 
+  /**
+   * Control the readonly on reach the maxTags
+   */
+  isMaxTags = false
+
   /**
    * Constructs a new SqSelectMultiTagsComponent.
    *
@@ -298,7 +318,8 @@ export class SqSelectMultiTagsComponent {
    *
    * @param {OptionMulti} item - The item to remove.
    */
-  removeItem(item: OptionMulti) {
+  removeItem(item: OptionMulti, event: any) {
+    event?.stopPropagation()
     if (item.children?.length) {
       item.children.forEach((child) => {
         this.value = this.value?.filter((value) => value.value !== child.value)
@@ -388,9 +409,9 @@ export class SqSelectMultiTagsComponent {
    *
    * @param {string} key - The translation key for the error message.
    */
-  async setError(key: string) {
+  async setError(key: string, interpolateParams: Object = {}) {
     if (this.useFormErrors && this.translate) {
-      this.error = await this.translate.instant(key)
+      this.error = await this.translate.instant(key, interpolateParams)
     }
   }
 
@@ -403,9 +424,18 @@ export class SqSelectMultiTagsComponent {
     } else if (this.required && !this.value?.length) {
       this.setError('forms.required')
       this.valid.emit(false)
-    } else {
+    } else if (this.minTags && this.value && this.value?.length < 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
+      this.isMaxTags = true
+      this.error = ''
       this.valid.emit(true)
+    } else {
+      this.isMaxTags = false
       this.error = ''
+      this.valid.emit(true)
     }
   }
 
@@ -422,6 +452,7 @@ export class SqSelectMultiTagsComponent {
     this.searchText = await new Promise<string>(resolve => this.timeoutInput = setTimeout(() => {
       resolve(event)
     }, this.timeToChange)) || ''
+    this.searchChange.emit(event)
     this.changeDetector.detectChanges()
   }
 

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squidit/ngx-css",
-  "version": "1.1.23",
+  "version": "1.1.24",
   "peerDependencies": {
     "@angular/common": ">=15.0.0",
     "@angular/core": ">=15.0.0",