SQ-67513 [FRONT] - Melhoria no componente de multiselect caso tenham …

…muitos itens listados (#99) * feat: add maxHeight input to select-multi-tags values * chore: bump
squidit · Jan 15, 2025 · 614e815 · 614e815
1 parent 82da01a
commit 614e815
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 2 deletions.
diff --git a/src/components/sq-select-multi-tags/sq-select-multi-tags.component.html b/src/components/sq-select-multi-tags/sq-select-multi-tags.component.html
@@ -52,6 +52,7 @@
           disabled: disabled,
           readonly: readonly
         }"
+        [style.maxHeight]="maxHeight"
         (click)="doDropDownAction()"
       >
         <div class="loading-wrapper" *ngIf="loading">

diff --git a/src/components/sq-select-multi-tags/sq-select-multi-tags.component.scss b/src/components/sq-select-multi-tags/sq-select-multi-tags.component.scss
@@ -45,9 +45,10 @@
     transition: var(--transition);
     color: var(--text_color);
     border-radius: 5px;
+    overflow-x: auto;
 
     .icon-down {
-      right: 5px;
+      right: 20px;
       bottom: calc(50% - 6px);
       position: absolute;
       font-size: 0.86rem;

diff --git a/src/components/sq-select-multi-tags/sq-select-multi-tags.component.ts b/src/components/sq-select-multi-tags/sq-select-multi-tags.component.ts
@@ -117,6 +117,11 @@ export class SqSelectMultiTagsComponent implements OnChanges {
    */
   @Input() labelColor = ''
 
+  /**
+   * Maximum height for the multi-tag values.
+   */
+  @Input() maxHeight = '100%'
+
   /**
    * Minimum number of characters to perform the searchChange.
    */

diff --git a/src/package.json b/src/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@squidit/ngx-css",
-  "version": "1.3.67",
+  "version": "1.3.68",
   "peerDependencies": {
     "@angular/common": ">=15.0.0",
     "@angular/cdk": ">=15.0.0",