@sd-angular/core 1.3.220 → 1.3.222

package/assets/scss/core/form.scss

@@ -11,6 +11,22 @@
     }
   }
 
+  
+  // sdSuffixIcon
+  // Directive sdSuffixIcon (truyền icon từ component sử dụng vào Core)
+  .sd-suffix-icon.sd-hover {
+    visibility: hidden;
+  }
+
+  // Chỉ hiển thị khi được hover
+  .mat-form-field-flex {
+    &:hover {
+      .sd-suffix-icon.sd-hover {
+        visibility: visible;
+      }
+    }
+  }
+
   .mat-form-field-prefix,
   .mat-form-field-suffix {
     display: inline-flex;
@@ -23,7 +39,6 @@
     }
 
     .mat-form-field-infix {
-
       mat-select.mat-select,
       mat-date-range-input.mat-date-range-input,
       input.mat-input-element {
@@ -37,6 +52,7 @@
     }
   }
 
+  // Size normal
   &.sd-md {
     &.mat-form-field-appearance-outline {
       .mat-form-field-flex {
@@ -65,6 +81,17 @@
         }
       }
 
+      .sd-suffix-icons {
+        .mat-form-field-suffix {
+          mat-icon {
+            height: 24px;
+            width: 24px;
+            font-size: 20px;
+            text-align: center;
+          }
+        }
+      }
+
       &.mat-form-field-can-float {
         &.mat-form-field-should-float {
           .mat-form-field-label {
@@ -76,7 +103,7 @@
     }
   }
 
-  // Small
+  // Size small
   &.sd-sm {
     &.mat-form-field-appearance-outline {
       .mat-form-field-flex {
@@ -132,4 +159,4 @@ mat-checkbox {
   label.mat-checkbox-layout {
     margin-bottom: 0;
   }
-}
+}

package/bundles/sd-angular-core-common.umd.js

@@ -1294,6 +1294,25 @@
         { type: i0.TemplateRef }
     ]; };
 
+    var SD_SUFIX_ICON = new i0.InjectionToken('SdSuffixIconDirective');
+    var SdSuffixIconDirective = /** @class */ (function () {
+        function SdSuffixIconDirective() {
+        }
+        return SdSuffixIconDirective;
+    }());
+    SdSuffixIconDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[sdSuffixIcon]',
+                    providers: [{ provide: SD_SUFIX_ICON, useExisting: SdSuffixIconDirective }],
+                    host: {
+                        '[class.sd-suffix-icon]': 'true',
+                        '[class.sd-hover]': 'true',
+                        '[class.pointer]': 'true',
+                    },
+                },] }
+    ];
+    SdSuffixIconDirective.ctorParameters = function () { return []; };
+
     var SdLabelDefDirective = /** @class */ (function () {
         // @Input() sdLableDef: string;
         function SdLabelDefDirective(templateRef) {
@@ -1416,6 +1435,7 @@
                         SdLetDirective,
                         SdScrollDirective,
                         SdSuffixDirective,
+                        SdSuffixIconDirective,
                         SdLabelDefDirective
                     ],
                     exports: [
@@ -1424,6 +1444,7 @@
                         SdLetDirective,
                         SdScrollDirective,
                         SdSuffixDirective,
+                        SdSuffixIconDirective,
                         SdLabelDefDirective
                     ],
                     providers: []
@@ -1436,6 +1457,7 @@
 
     exports.FIREBASE_CONFIG = FIREBASE_CONFIG;
     exports.FORM_CONFIG = FORM_CONFIG;
+    exports.SD_SUFIX_ICON = SD_SUFIX_ICON;
     exports.SdBrowserService = SdBrowserService;
     exports.SdCommonModule = SdCommonModule;
     exports.SdFormControl = SdFormControl;
@@ -1443,6 +1465,7 @@
     exports.SdLetDirective = SdLetDirective;
     exports.SdScrollDirective = SdScrollDirective;
     exports.SdSuffixDirective = SdSuffixDirective;
+    exports.SdSuffixIconDirective = SdSuffixIconDirective;
     exports.SdViewDefDirective = SdViewDefDirective;
     exports.ɵa = SdForDirective;