i-tech-shared-components 1.1.6 → 1.1.9

package/theme/_color_themes.scss

@@ -1,136 +1,136 @@
-@use '@angular/material' as mat;
-@use 'sass:map';
-
-$_light-palette: (
-        primary: (
-                0: #000000,
-                10: #003A0C,
-                20: #005B13,
-                25: #006B1E,
-                30: #007A28,
-                35: #00822E,
-                40: #008B33,
-                50: #009D3F,
-                60: #00AC48,
-                70: #42B963,
-                80: #69C57F,
-                90: #96D5A3,
-                95: #C0E5C7,
-                98: #E3F6E7,
-                99: #EFFAF1,
-                100: #FFFFFF,
-        ),
-        secondary: (
-                0: #1A1A1A,
-                10: #0C2B61,
-                20: #183778,
-                25: #1F4085,
-                30: #2C4D91,
-                35: #335497,
-                40: #3A5B9E,
-                50: #4364A6,
-                60: #5777B7,
-                70: #718ECB,
-                80: #97B0E3,
-                90: #C1D2F5,
-                95: #DDE7FC,
-                98: #E1EBFC,
-                99: #EEF4FE,
-                100: #FFFFFF,
-        ),
-        neutral: (
-                0: #1A1A1A,
-                10: #34363B,
-                20: #454950,
-                25: #4D525B,
-                30: #555B65,
-                35: #5C646F,
-                40: #636C79,
-                50: #747E8E,
-                60: #828C9B,
-                70: #A9AFB9,
-                80: #C2C5CD,
-                90: #DBDDE1,
-                95: #F2F2F5,
-                98: #F8F8FA,
-                99: #FAFAFC,
-                100: #ffffff,
-        ),
-        neutral-variant: (
-                0: #000000,
-                10: #131e13,
-                20: #283327,
-                25: #323e32,
-                30: #3e4a3d,
-                35: #495648,
-                40: #556254,
-                50: #6e7b6c,
-                60: #879485,
-                70: #a1af9e,
-                80: #bdcab9,
-                90: #d9e6d4,
-                95: #e7f5e2,
-                98: #F2FCED,
-                99: #f6fff1,
-                100: #ffffff,
-        ),
-        tertiary: (
-                0: #000000,
-                10: #1D2025,
-                20: #30353D,
-                25: #393F49,
-                30: #424954,
-                35: #4A535F,
-                40: #525C6A,
-                50: #647081,
-                60: #747F90,
-                70: #9FA6B1,
-                80: #BBBFC7,
-                90: #D7D9DE,
-                95: #F0F0F4,
-                98: #F5F5F8,
-                99: #F9F9FC,
-                100: #FFFFFF,
-        ),
-        error: (
-                0: #39041A,
-                10: #670923,
-                20: #950E2B,
-                25: #A5102E,
-                30: #B41231,
-                35: #BB1635,
-                40: #C11A39,
-                50: #D2344C,
-                60: #DE4558,
-                70: #E77383,
-                80: #F5A0AA,
-                90: #FACBD5,
-                95: #FBE9EE,
-                98: #FCF1F4,
-                99: #FDF4F7,
-                100: #FFFFFF,
-        ),
-);
-$_main: (
-        secondary: map.get($_light-palette, secondary),
-        neutral: map.get($_light-palette, neutral),
-        neutral-variant: map.get($_light-palette,  neutral-variant),
-        error: map.get($_light-palette, error),
-);
-$_primary: map.merge(map.get($_light-palette, primary), $_main);
-$_tertiary: map.merge(map.get($_light-palette, tertiary), $_main);
-
-$m3-light-theme: mat.define-theme((
-        color: (
-                theme-type: light,
-                primary: $_primary,
-                tertiary: $_tertiary,
-        ),
-        typography: (
-                plain-family: 'Noto Sans',
-                brand-family: 'Noto Sans'
-        ),
-        density: (
-                scale: -4,
-        ),
-));
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+$_light-palette: (
+        primary: (
+                0: #000000,
+                10: #003A0C,
+                20: #005B13,
+                25: #006B1E,
+                30: #007A28,
+                35: #00822E,
+                40: #008B33,
+                50: #009D3F,
+                60: #00AC48,
+                70: #42B963,
+                80: #69C57F,
+                90: #96D5A3,
+                95: #C0E5C7,
+                98: #E3F6E7,
+                99: #EFFAF1,
+                100: #FFFFFF,
+        ),
+        secondary: (
+                0: #1A1A1A,
+                10: #0C2B61,
+                20: #183778,
+                25: #1F4085,
+                30: #2C4D91,
+                35: #335497,
+                40: #3A5B9E,
+                50: #4364A6,
+                60: #5777B7,
+                70: #718ECB,
+                80: #97B0E3,
+                90: #C1D2F5,
+                95: #DDE7FC,
+                98: #E1EBFC,
+                99: #EEF4FE,
+                100: #FFFFFF,
+        ),
+        neutral: (
+                0: #1A1A1A,
+                10: #34363B,
+                20: #454950,
+                25: #4D525B,
+                30: #555B65,
+                35: #5C646F,
+                40: #636C79,
+                50: #747E8E,
+                60: #828C9B,
+                70: #A9AFB9,
+                80: #C2C5CD,
+                90: #DBDDE1,
+                95: #F2F2F5,
+                98: #F8F8FA,
+                99: #FAFAFC,
+                100: #ffffff,
+        ),
+        neutral-variant: (
+                0: #000000,
+                10: #131e13,
+                20: #283327,
+                25: #323e32,
+                30: #3e4a3d,
+                35: #495648,
+                40: #556254,
+                50: #6e7b6c,
+                60: #879485,
+                70: #a1af9e,
+                80: #bdcab9,
+                90: #d9e6d4,
+                95: #e7f5e2,
+                98: #F2FCED,
+                99: #f6fff1,
+                100: #ffffff,
+        ),
+        tertiary: (
+                0: #000000,
+                10: #1D2025,
+                20: #30353D,
+                25: #393F49,
+                30: #424954,
+                35: #4A535F,
+                40: #525C6A,
+                50: #647081,
+                60: #747F90,
+                70: #9FA6B1,
+                80: #BBBFC7,
+                90: #D7D9DE,
+                95: #F0F0F4,
+                98: #F5F5F8,
+                99: #F9F9FC,
+                100: #FFFFFF,
+        ),
+        error: (
+                0: #39041A,
+                10: #670923,
+                20: #950E2B,
+                25: #A5102E,
+                30: #B41231,
+                35: #BB1635,
+                40: #C11A39,
+                50: #D2344C,
+                60: #DE4558,
+                70: #E77383,
+                80: #F5A0AA,
+                90: #FACBD5,
+                95: #FBE9EE,
+                98: #FCF1F4,
+                99: #FDF4F7,
+                100: #FFFFFF,
+        ),
+);
+$_main: (
+        secondary: map.get($_light-palette, secondary),
+        neutral: map.get($_light-palette, neutral),
+        neutral-variant: map.get($_light-palette,  neutral-variant),
+        error: map.get($_light-palette, error),
+);
+$_primary: map.merge(map.get($_light-palette, primary), $_main);
+$_tertiary: map.merge(map.get($_light-palette, tertiary), $_main);
+
+$m3-light-theme: mat.define-theme((
+        color: (
+                theme-type: light,
+                primary: $_primary,
+                tertiary: $_tertiary,
+        ),
+        typography: (
+                plain-family: 'Noto Sans',
+                brand-family: 'Noto Sans'
+        ),
+        density: (
+                scale: -4,
+        ),
+));

package/theme/_date_picker.scss

@@ -1,77 +1,77 @@
-@use '@angular/material' as mat;
-@import "./color_themes.scss";
-
-body {
-  --mat-datepicker-calendar-container-background-color: #{mat.get-theme-color($m3-light-theme, primary, 100)} !important;
-  --mat-datepicker-calendar-period-button-text-color: #{mat.get-theme-color($m3-light-theme, primary, 35)} !important;
-  --mat-datepicker-calendar-date-hover-state-background-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
-  --mat-datepicker-calendar-date-today-background-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
-  --mat-datepicker-range-input-separator-color: #{mat.get-theme-color($m3-light-theme, neutral, 50)} !important;
-  --mat-datepicker-calendar-body-label-text-size: 16px;
-  --mat-datepicker-calendar-body-label-text-weight: 400;
-  --mat-datepicker-calendar-period-button-text-size: 16px;
-  --mat-datepicker-calendar-period-button-text-weight: 400;
-  --mat-datepicker-calendar-header-text-color: #1D1B20 !important;
-  --mat-datepicker-calendar-header-text-size: 16px !important;
-  --mat-datepicker-calendar-header-text-weight: 700 !important;
-
-  .mat-calendar-body-cell-content {
-    font-size: 16px;
-  }
-
-  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-    background-color: var(--mat-datepicker-calendar-date-hover-state-background-color);
-  }
-
-  .mat-date-range-input {
-    .mat-mdc-form-field-flex {
-      height: 40px;
-    }
-
-    .mat-date-range-input-inner::placeholder {
-      color:  #{mat.get-theme-color($m3-light-theme, neutral, 50)};
-    }
-
-    .mat-mdc-input-element::placeholder {
-      font-weight: 500;
-      overflow: hidden;
-      color: var(--Text, #424954);
-      text-overflow: ellipsis;
-      font-size: 13px;
-      font-style: normal;
-      line-height: 24px;
-      letter-spacing: 0.5px;
-    }
-    width: 100%;
-  }
-
-  .opened_calendar {
-    --mdc-outlined-text-field-outline-width: 3px !important;
-    --mdc-outlined-text-field-outline-color: #0060DF !important;
-    --mdc-outlined-text-field-error-outline-color: #0060DF !important;
-  }
-
-  .mat-datepicker-content {
-    background-color: var(--white-color) !important;
-    --mat-datepicker-calendar-navigation-button-icon-color: #{mat.get-theme-color($m3-light-theme, primary, 80)};
-    --mat-datepicker-calendar-period-button-icon-color: #{mat.get-theme-color($m3-light-theme, primary, 80)};
-    box-shadow: 0 2px 6px 2px rgba(48, 70, 102, 0.10);
-    border: 1px solid var(--Outline, #D7D9DE);
-
-    .mat-calendar-body-selected {
-      background-color: var(--mat-datepicker-calendar-date-selected-state-background-color) !important;
-      color: var(--mat-datepicker-calendar-date-selected-state-text-color) !important;
-    }
-
-    .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-      border: 1px solid var(--mat-datepicker-calendar-date-today-outline-color) !important;
-    }
-
-    .mat-calendar-body-cell-content {
-      border: unset !important;
-      font-size: 13px !important;
-      font-weight: 400 !important;
-    }
-  }
-}
-
+@use '@angular/material' as mat;
+@import "./color_themes.scss";
+
+body {
+  --mat-datepicker-calendar-container-background-color: #{mat.get-theme-color($m3-light-theme, primary, 100)} !important;
+  --mat-datepicker-calendar-period-button-text-color: #{mat.get-theme-color($m3-light-theme, primary, 35)} !important;
+  --mat-datepicker-calendar-date-hover-state-background-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
+  --mat-datepicker-calendar-date-today-background-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
+  --mat-datepicker-range-input-separator-color: #{mat.get-theme-color($m3-light-theme, neutral, 50)} !important;
+  --mat-datepicker-calendar-body-label-text-size: 16px;
+  --mat-datepicker-calendar-body-label-text-weight: 400;
+  --mat-datepicker-calendar-period-button-text-size: 16px;
+  --mat-datepicker-calendar-period-button-text-weight: 400;
+  --mat-datepicker-calendar-header-text-color: #1D1B20 !important;
+  --mat-datepicker-calendar-header-text-size: 16px !important;
+  --mat-datepicker-calendar-header-text-weight: 700 !important;
+
+  .mat-calendar-body-cell-content {
+    font-size: 16px;
+  }
+
+  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+    background-color: var(--mat-datepicker-calendar-date-hover-state-background-color);
+  }
+
+  .mat-date-range-input {
+    .mat-mdc-form-field-flex {
+      height: 40px;
+    }
+
+    .mat-date-range-input-inner::placeholder {
+      color:  #{mat.get-theme-color($m3-light-theme, neutral, 50)};
+    }
+
+    .mat-mdc-input-element::placeholder {
+      font-weight: 500;
+      overflow: hidden;
+      color: var(--Text, #424954);
+      text-overflow: ellipsis;
+      font-size: 13px;
+      font-style: normal;
+      line-height: 24px;
+      letter-spacing: 0.5px;
+    }
+    width: 100%;
+  }
+
+  .opened_calendar {
+    --mdc-outlined-text-field-outline-width: 3px !important;
+    --mdc-outlined-text-field-outline-color: #0060DF !important;
+    --mdc-outlined-text-field-error-outline-color: #0060DF !important;
+  }
+
+  .mat-datepicker-content {
+    background-color: var(--white-color) !important;
+    --mat-datepicker-calendar-navigation-button-icon-color: #{mat.get-theme-color($m3-light-theme, primary, 80)};
+    --mat-datepicker-calendar-period-button-icon-color: #{mat.get-theme-color($m3-light-theme, primary, 80)};
+    box-shadow: 0 2px 6px 2px rgba(48, 70, 102, 0.10);
+    border: 1px solid var(--Outline, #D7D9DE);
+
+    .mat-calendar-body-selected {
+      background-color: var(--mat-datepicker-calendar-date-selected-state-background-color) !important;
+      color: var(--mat-datepicker-calendar-date-selected-state-text-color) !important;
+    }
+
+    .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+      border: 1px solid var(--mat-datepicker-calendar-date-today-outline-color) !important;
+    }
+
+    .mat-calendar-body-cell-content {
+      border: unset !important;
+      font-size: 13px !important;
+      font-weight: 400 !important;
+    }
+  }
+}
+

package/theme/_form_fields.scss

@@ -1,112 +1,112 @@
-@use '@angular/material' as mat;
-@import "./color_themes.scss";
-
-body {
-  .mat-mdc-form-field {
-    width: 100%;
-    --mdc-outlined-text-field-input-text-placeholder-color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
-    // Custom outline color intentionally outside of color palette
-    --mdc-outlined-text-field-focus-outline-color: #0060DF;
-    --mdc-outlined-text-field-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
-    --mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 70)};
-    // Set/focused values should be a slightly darker tertiary30
-    --mat-select-focused-arrow-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mat-select-enabled-trigger-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mdc-filled-text-field-caret-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mdc-filled-text-field-focus-active-indicator-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mdc-filled-text-field-focus-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mdc-outlined-text-field-caret-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mdc-outlined-text-field-focus-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mat-form-field-focus-select-arrow-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mdc-outlined-text-field-input-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mdc-outlined-text-field-focus-outline-width: 3px !important;
-    --mat-form-field-subscript-text-weight: 500;
-    --mat-form-field-container-text-size: 13px;
-    --mat-form-field-container-text-weight: 500;
-  }
-
-
-  mat-hint {
-    color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
-    font-size: 11px;
-    font-weight: 500;
-    letter-spacing: 0.022px;
-  }
-
-  mat-label:not(.meu_item_label) {
-    color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
-    position: relative;
-    bottom: 5px;
-    padding-left: 16px;
-    font-size: 11px;
-    font-weight: 500;
-  }
-
-  .invalid-label-color {
-    color: #{mat.get-theme-color($m3-light-theme, error, 40)} !important;
-  }
-
-  .mat-mdc-menu-item {
-    --mat-menu-item-label-text-size: 13px !important;
-    --mat-menu-item-label-text-weight: 500 !important;
-    --mat-menu-item-label-text-line-height: 20px !important;
-    --mat-menu-item-label-text-tracking: 0.2px !important;
-    --mat-menu-item-label-text-color: #{mat.get-theme-color($m3-light-theme,tertiary, 30)} !important;
-    .meu_item_label {
-      text-align: left;
-      text-underline-position: from-font;
-      text-decoration-skip-ink: none;
-    }
-  }
-
-  .required-input {
-    color: #{mat.get-theme-color($m3-light-theme, error, 40)};
-    position: relative;
-    bottom: 5px;
-    font-size: 11px;
-    font-weight: 500;
-  }
-
-  .mat-form-field-invalid {
-    --mdc-outlined-text-field-outline-width: 3px !important;
-    // See if we can remove this after updating date-picker scss
-    --mdc-outlined-text-field-error-outline-color: #{mat.get-theme-color($m3-light-theme,error,40)} !important;
-  }
-
-  .default-form-icon-color {
-    color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
-    .mat-mdc-icon-button.tonal mat-icon {
-      color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
-      & svg path {
-        fill: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
-      }
-    }
-  }
-
-  mat-form-field input::placeholder {
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 20px;
-    letter-spacing: 0.2px;
-  }
-
-  .mat-mdc-input-element {
-    overflow: hidden;
-    color: var(--Text, #{mat.get-theme-color($m3-light-theme,tertiary, 30)});
-    text-overflow: ellipsis;
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 24px;
-    letter-spacing: 0.5px;
-  }
-
-  .mat-mdc-form-field-icon-suffix {
-    display: flex;
-  }
-  .mat-mdc-form-field-icon-prefix>.mat-icon {
-    padding: 0 8px !important;
-  }
-
-}
+@use '@angular/material' as mat;
+@import "./color_themes.scss";
+
+body {
+  .mat-mdc-form-field {
+    width: 100%;
+    --mdc-outlined-text-field-input-text-placeholder-color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
+    // Custom outline color intentionally outside of color palette
+    --mdc-outlined-text-field-focus-outline-color: #0060DF;
+    --mdc-outlined-text-field-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
+    --mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 70)};
+    // Set/focused values should be a slightly darker tertiary30
+    --mat-select-focused-arrow-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
+    --mat-select-enabled-trigger-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
+    --mdc-filled-text-field-caret-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
+    --mdc-filled-text-field-focus-active-indicator-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
+    --mdc-filled-text-field-focus-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
+    --mdc-outlined-text-field-caret-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
+    --mdc-outlined-text-field-focus-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
+    --mat-form-field-focus-select-arrow-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
+    --mdc-outlined-text-field-input-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
+    --mdc-outlined-text-field-focus-outline-width: 3px !important;
+    --mat-form-field-subscript-text-weight: 500;
+    --mat-form-field-container-text-size: 13px;
+    --mat-form-field-container-text-weight: 500;
+  }
+
+
+  mat-hint {
+    color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.022px;
+  }
+
+  mat-label:not(.meu_item_label) {
+    color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
+    position: relative;
+    bottom: 5px;
+    padding-left: 16px;
+    font-size: 11px;
+    font-weight: 500;
+  }
+
+  .mat-mdc-menu-item {
+    --mat-menu-item-label-text-size: 13px !important;
+    --mat-menu-item-label-text-weight: 500 !important;
+    --mat-menu-item-label-text-line-height: 20px !important;
+    --mat-menu-item-label-text-tracking: 0.2px !important;
+    --mat-menu-item-label-text-color: #{mat.get-theme-color($m3-light-theme,tertiary, 30)} !important;
+    .meu_item_label {
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+    }
+  }
+
+  .required-input {
+    color: #{mat.get-theme-color($m3-light-theme, error, 40)};
+    position: relative;
+    bottom: 5px;
+    font-size: 11px;
+    font-weight: 500;
+  }
+
+  .mat-form-field-invalid {
+    --mdc-outlined-text-field-outline-width: 3px !important;
+    // See if we can remove this after updating date-picker scss
+    --mdc-outlined-text-field-error-outline-color: #{mat.get-theme-color($m3-light-theme,error,40)} !important;
+  }
+
+  .default-form-icon-color {
+    color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
+    .mat-mdc-icon-button.tonal mat-icon {
+      color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
+      & svg path {
+        fill: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
+      }
+    }
+  }
+
+  mat-form-field input::placeholder {
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.2px;
+  }
+
+  .mat-mdc-input-element {
+    overflow: hidden;
+    color: var(--Text, #{mat.get-theme-color($m3-light-theme,tertiary, 30)});
+    text-overflow: ellipsis;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0.5px;
+  }
+
+  .mat-mdc-form-field-icon-suffix {
+    display: flex;
+  }
+  .mat-mdc-form-field-icon-prefix>.mat-icon {
+    padding: 0 8px !important;
+  }
+
+  .invalid-label-color {
+    color: #{mat.get-theme-color($m3-light-theme, error, 40)} !important;
+  }
+
+}