i-tech-shared-components 1.3.0 → 1.3.2

package/theme/_mat-selects.scss

@@ -1,21 +1,21 @@
 // Import Material theming
 @use '@angular/material' as mat;
-@import "./color_themes.scss";
+@use "./color_themes.scss" as color-themes;
 
 
 body {
-  --mat-option-hover-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
-  --mat-option-selected-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
-  --mat-option-focus-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
+  --mat-option-hover-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)} !important;
+  --mat-option-selected-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)} !important;
+  --mat-option-focus-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)} !important;
   --mat-select-trigger-text-line-height: 20px !important;
   --mat-select-trigger-text-size: 13px !important;
   --mat-select-trigger-text-weight: 500 !important;
   --mat-select-trigger-text-tracking: 0.2px !important;
-  --mat-select-enabled-trigger-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
-  --mat-full-pseudo-checkbox-unselected-icon-color: #{mat.get-theme-color($m3-light-theme, primary, 80)} !important;
-  --mat-select-placeholder-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
-  --mat-option-selected-state-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)} !important;
-  --mat-option-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)} !important;
+  --mat-select-enabled-trigger-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)} !important;
+  --mat-full-pseudo-checkbox-unselected-icon-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 80)} !important;
+  --mat-select-placeholder-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)} !important;
+  --mat-option-selected-state-label-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)} !important;
+  --mat-option-label-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)} !important;
 
   .new-mat-autocomplete {
     .mat-mdc-form-field {
@@ -46,16 +46,16 @@ body {
         width: 100%;
         height: 40px;
         padding: 8px 40px 8px 36px !important;
-        border: 1px solid #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
+        border: 1px solid #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
         border-radius: 4px;
         font-size: 13px;
         line-height: 24px;
         letter-spacing: 0.5px;
-        color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
+        color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
         background: white;
 
         &:disabled {
-          border: 1px solid #{mat.get-theme-color($m3-light-theme, tertiary, 99)};
+          border: 1px solid #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 99)};
         }
 
         &:focus {
@@ -65,11 +65,11 @@ body {
         }
 
         &:hover:not(:focus):not(:disabled) {
-          border-color: #{mat.get-theme-color($m3-light-theme, tertiary, 70)};
+          border-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 70)};
         }
 
         &::placeholder {
-          color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
+          color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)};
           font-size: 13px;
           font-weight: 500;
           line-height: 20px;
@@ -83,7 +83,7 @@ body {
         left: 50px;
         top: 57%;
         transform: translateY(-50%);
-        color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
+        color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)};
 
         mat-icon {
           font-size: 20px;
@@ -98,7 +98,7 @@ body {
         right: 0;
         top: 50%;
         transform: translateY(-50%);
-        color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
+        color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)};
 
         &.rotated {
           transform: translateY(-50%) rotate(180deg);
@@ -121,14 +121,14 @@ body {
 
       &.custom-value {
         font-weight: 500;
-        color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)} !important;
+        color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)} !important;
         width: 80%;
       }
     }
 
     // Error state
     .mat-mdc-form-field-error {
-      //color: #{mat.get-theme-color($m3-light-theme, error, 40)};
+      //color: #{mat.get-theme-color(color-themes.$m3-light-theme, error, 40)};
       animation: mat-form-field-animation 900ms cubic-bezier(0.0, 0.0, 0.2, 1);
       position: absolute;
       left: 16px;

package/theme/_menu.scss

@@ -1,13 +1,13 @@
 @use '@angular/material' as mat;
-@import "./color_themes.scss";
+@use "./color_themes.scss" as color-themes;
 
 .mt-4 {
   margin-top: 4px;
 }
 
 .mat-mdc-menu-panel {
-  border: 1px solid mat.get-theme-color($m3-light-theme, tertiary, 90) !important;
+  border: 1px solid mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90) !important;
   --mat-app-elevation-shadow-level-2: 0px !important;
-  --mat-menu-item-hover-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 98)} !important;
+  --mat-menu-item-hover-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 98)} !important;
 }
 

package/theme/_text_input.scss

@@ -1,25 +1,25 @@
 @use '@angular/material' as mat;
-@import "./color_themes.scss";
+@use "./_color_themes.scss" as color-themes;
 
 body {
   .readonly-field {
-    --mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
-    --mdc-outlined-text-field-focus-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
+    --mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
+    --mdc-outlined-text-field-focus-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
     --mdc-outlined-text-field-focus-outline-width: 1px;
-    --mdc-outlined-text-field-error-focus-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
-    --mdc-outlined-text-field-error-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
-    --mdc-outlined-text-field-error-hover-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
-    --mat-select-disabled-trigger-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
-    --mat-select-placeholder-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
-    --mdc-outlined-text-field-disabled-input-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
+    --mdc-outlined-text-field-error-focus-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
+    --mdc-outlined-text-field-error-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
+    --mdc-outlined-text-field-error-hover-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
+    --mat-select-disabled-trigger-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
+    --mat-select-placeholder-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
+    --mdc-outlined-text-field-disabled-input-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
   }
 
   .readonly-color {
-    color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
+    color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
     .mat-mdc-icon-button.tonal mat-icon {
-      color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
+      color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
     }
-    --mdc-outlined-text-field-input-text-placeholder-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
+    --mdc-outlined-text-field-input-text-placeholder-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
   }
 
   .mat-mdc-form-field-icon-prefix {

package/theme.scss

@@ -1,18 +1,18 @@
 @use '@angular/material' as mat;
-@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+@use "./theme/buttons.scss";
+@use "./theme/variables/colors.scss";
+@use "./theme/label.scss";
+@use "./theme/icon-button.scss";
+@use "./theme/_color_themes.scss" as color-themes;
+@use "./theme/date_picker.scss";
+@use "./theme/text_input.scss";
+@use "./theme/form_fields.scss";
+@use "./theme/mat-selects.scss";
+@use "./theme/menu.scss";
+@use "./theme/ag-grid.scss";
+@use "./theme/date_time_picker.scss";
 
-@import "./theme/buttons.scss";
-@import "./theme/variables/colors.scss";
-@import "./theme/label.scss";
-@import "./theme/icon-button.scss";
-@import "./theme/color_themes.scss";
-@import "./theme/date_picker.scss";
-@import "./theme/text_input.scss";
-@import "./theme/form_fields.scss";
-@import "./theme/mat-selects.scss";
-@import "./theme/menu.scss";
-@import "./theme/ag-grid.scss";
-@import "./theme/date_time_picker.scss";
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
 
 @include mat.core();
 
@@ -23,10 +23,9 @@ body {
   font-style: normal;
   font-size: 12px;
 
-  @include mat.core-theme($m3-light-theme);
-  @include mat.all-component-themes($m3-light-theme);
-  @include mat.color-variants-backwards-compatibility($m3-light-theme);
-  @include mat.form-field-theme($m3-light-theme, $color-variant: secondary);
+  @include mat.core-theme(color-themes.$m3-light-theme);
+  @include mat.all-component-themes(color-themes.$m3-light-theme);
+  @include mat.color-variants-backwards-compatibility(color-themes.$m3-light-theme);
   .new-mat-autocomplete {
     @include mat.button-density(-3);
   };