i-tech-shared-components 1.4.41 → 1.4.42

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;
-@use "./_color_themes.scss" as color-themes;
-
-body {
-  --mat-datepicker-calendar-container-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 100)} !important;
-  --mat-datepicker-calendar-period-button-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 35)} !important;
-  --mat-datepicker-calendar-date-hover-state-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)} !important;
-  --mat-datepicker-calendar-date-today-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)} !important;
-  --mat-datepicker-range-input-separator-color: #{mat.get-theme-color(color-themes.$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(color-themes.$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(color-themes.$m3-light-theme, primary, 80)};
-    --mat-datepicker-calendar-period-button-icon-color: #{mat.get-theme-color(color-themes.$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;
+@use "./_color_themes.scss" as color-themes;
+
+body {
+  --mat-datepicker-calendar-container-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 100)} !important;
+  --mat-datepicker-calendar-period-button-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 35)} !important;
+  --mat-datepicker-calendar-date-hover-state-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)} !important;
+  --mat-datepicker-calendar-date-today-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)} !important;
+  --mat-datepicker-range-input-separator-color: #{mat.get-theme-color(color-themes.$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(color-themes.$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(color-themes.$m3-light-theme, primary, 80)};
+    --mat-datepicker-calendar-period-button-icon-color: #{mat.get-theme-color(color-themes.$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/_date_time_picker.scss

@@ -1,87 +1,87 @@
-@use '@angular/material' as mat;
-@use "./color_themes.scss" as color-themes;;
-
-.date_time_picker_container {
-
-  &.readonly_field {
-    .date_time_picker {
-      border-color: #{mat.get-theme-color(color-themes.$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)};
-    }
-
-    mat-label, .required-input {
-      color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
-    }
-  }
-
-  &.invalid_form {
-    .mat-mdc-form-field-error {
-      animation: _mat-form-field-subscript-animation 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
-      position: absolute;
-      left: 16px;
-      font-weight: 500;
-      line-height: var(--mat-form-field-subscript-text-line-height, var(--mat-sys-body-small-line-height));
-    }
-
-    mat-label {
-      color: #C11A39 !important;
-    }
-
-    .date_time_picker {
-      outline: 3px solid #C11A39;
-    }
-
-  }
-
-  .date_time_picker {
-    display: flex;
-    outline: 1px solid #D7D9DE;
-    border-radius: 4px;
-    padding: 8px;
-    background-color: white;
-    width: max-content;
-    &.focused {
-      outline: 3px solid #0060DF;
-    }
-    input {
-      padding: unset;
-      border: unset;
-      background-color: white;
-      outline: unset;
-      line-height: 20px;
-      font-weight: 500;
-      font-size: 13px;
-      letter-spacing: 0.2px;
-
-      &:disabled {
-        color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
-      }
-    }
-
-    input.date {
-      width: 75px;
-    }
-    input.time {
-      width: 73px;
-    }
-
-    &.disabled {
-      border-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
-      opacity: 0.7;
-
-      input {
-        color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
-        &::placeholder {
-          color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
-        }
-      }
-    }
-
-    input[type="time"]::-webkit-calendar-picker-indicator {
-      display: none;
-      pointer-events: none;
-    }
-
-  }
-}
+@use '@angular/material' as mat;
+@use "./color_themes.scss" as color-themes;;
+
+.date_time_picker_container {
+
+  &.readonly_field {
+    .date_time_picker {
+      border-color: #{mat.get-theme-color(color-themes.$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)};
+    }
+
+    mat-label, .required-input {
+      color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
+    }
+  }
+
+  &.invalid_form {
+    .mat-mdc-form-field-error {
+      animation: _mat-form-field-subscript-animation 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
+      position: absolute;
+      left: 16px;
+      font-weight: 500;
+      line-height: var(--mat-form-field-subscript-text-line-height, var(--mat-sys-body-small-line-height));
+    }
+
+    mat-label {
+      color: #C11A39 !important;
+    }
+
+    .date_time_picker {
+      outline: 3px solid #C11A39;
+    }
+
+  }
+
+  .date_time_picker {
+    display: flex;
+    outline: 1px solid #D7D9DE;
+    border-radius: 4px;
+    padding: 8px;
+    background-color: white;
+    width: max-content;
+    &.focused {
+      outline: 3px solid #0060DF;
+    }
+    input {
+      padding: unset;
+      border: unset;
+      background-color: white;
+      outline: unset;
+      line-height: 20px;
+      font-weight: 500;
+      font-size: 13px;
+      letter-spacing: 0.2px;
+
+      &:disabled {
+        color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
+      }
+    }
+
+    input.date {
+      width: 75px;
+    }
+    input.time {
+      width: 73px;
+    }
+
+    &.disabled {
+      border-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
+      opacity: 0.7;
+
+      input {
+        color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
+        &::placeholder {
+          color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
+        }
+      }
+    }
+
+    input[type="time"]::-webkit-calendar-picker-indicator {
+      display: none;
+      pointer-events: none;
+    }
+
+  }
+}