Merge pull request #82 from squidit/sq-65829-front-padronizar-sq-sele…

…ct-multi-tags-e-sq-select-search-no-ngx-css SQ-65829 [FRONT] padronizar sq-select-multi-tags e sq-select-search no ngx-css
squidit · Aug 29, 2024 · db80fdc · db80fdc
2 parents f9fc5ea + 3ca391e
commit db80fdc
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 5 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
@@ -49,7 +49,8 @@
       <div
         class="input-fake-content"
         [ngClass]="{
-          disabled: disabled
+          disabled: disabled,
+          readonly: readonly
         }"
         (click)="doDropDownAction()"
       >
@@ -63,7 +64,7 @@
           </span>
         </div>
         <span *ngIf="value?.length" class="badge">{{ value!.length }}</span>
-        <i *ngIf="!loading && !readonly" class="icon-down fas fa-chevron-down"></i>
+        <i *ngIf="!loading" class="icon-down fas fa-chevron-down"></i>
       </div>
       <div
         *ngIf="!loading && !disabled && !readonly && !isMaxTags && renderOptionsList"

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
@@ -52,6 +52,12 @@
       position: absolute;
       font-size: 0.86rem;
     }
+    &.readonly {
+      cursor: not-allowed;
+      pointer-events: none;
+      background-color: var(--color_border_input);
+      border-color: var(--color_border_input_disabled);
+    }
   }
 
   .loading-wrapper {

diff --git a/src/components/sq-select-search/sq-select-search.component.html b/src/components/sq-select-search/sq-select-search.component.html
@@ -47,7 +47,8 @@
     <div
       class="input-fake-content"
       [ngClass]="{
-        disabled: disabled
+        disabled: disabled,
+        readonly: readonly
       }"
       (click)="doDropDownAction()"
     >
@@ -63,7 +64,7 @@
       <i *ngIf="!loading" class="icon-down fas fa-chevron-down"></i>
     </div>
     <div
-      *ngIf="!disabled && !loading && renderOptionsList"
+      *ngIf="!disabled && !loading && renderOptionsList && !readonly"
       class="input-window scrollbar"
       id="sq-select-search-scroll"
       [ngClass]="{

diff --git a/src/components/sq-select-search/sq-select-search.component.scss b/src/components/sq-select-search/sq-select-search.component.scss
@@ -38,6 +38,12 @@
       position: absolute;
       font-size: 0.86rem;
     }
+    &.readonly {
+      cursor: not-allowed;
+      pointer-events: none;
+      background-color: var(--color_border_input);
+      border-color: var(--color_border_input_disabled);
+    }
   }
   .loading-wrapper {
     position: absolute;

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