i-tech-shared-components 1.1.8 → 1.1.9

package/theme/_mat-selects.scss

@@ -1,248 +1,248 @@
-// Import Material theming
-@use '@angular/material' as mat;
-@import "./color_themes.scss";
-
-
-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-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;
-
-  .new-mat-autocomplete {
-    .mat-mdc-form-field {
-      .mat-mdc-form-field-icon-suffix>.mat-icon {
-        padding-left: 0;
-      }
-    }
-    .select-arrow {
-      &.open {
-        transform: rotate(180deg);
-        padding-left: 12px !important;
-        padding-right: 0 !important;
-      }
-    }
-
-    .mat-mdc-select-arrow {
-      display: none;
-    }
-
-    position: relative;
-    width: 100%;
-    // Search input container
-    .search-input {
-      position: relative;
-      width: 100%;
-
-      input {
-        width: 100%;
-        height: 40px;
-        padding: 8px 40px 8px 36px !important;
-        border: 1px solid #{mat.get-theme-color($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)};
-        background: white;
-
-        &:disabled {
-          border: 1px solid #{mat.get-theme-color($m3-light-theme, tertiary, 99)};
-        }
-
-        &:focus {
-          border-color: #0060DF;
-          border-width: 3px;
-          outline: none;
-        }
-
-        &:hover:not(:focus):not(:disabled) {
-          border-color: #{mat.get-theme-color($m3-light-theme, tertiary, 70)};
-        }
-
-        &::placeholder {
-          color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
-          font-size: 13px;
-          font-weight: 500;
-          line-height: 20px;
-          letter-spacing: 0.2px;
-        }
-      }
-
-      // Search icon
-      .search-icon {
-        position: absolute;
-        left: 50px;
-        top: 57%;
-        transform: translateY(-50%);
-        color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
-
-        mat-icon {
-          font-size: 20px;
-          width: 20px;
-          height: 20px;
-        }
-      }
-
-      // Dropdown arrow
-      app-icon-button {
-        position: absolute;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
-
-        &.rotated {
-          transform: translateY(-50%) rotate(180deg);
-        }
-
-        &.readonly-color {
-          opacity: 0.5;
-        }
-      }
-    }
-
-    //// Placeholder and selected value
-    .custom-placeholder {
-      position: absolute;
-      top: 28px;
-      left: 17px;
-      font-size: 13px;
-      color: #647081;
-      pointer-events: none;
-
-      &.custom-value {
-        color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-      }
-    }
-
-    // Error state
-    .mat-mdc-form-field-error {
-      //color: #{mat.get-theme-color($m3-light-theme, error, 40)};
-      animation: mat-form-field-animation 900ms cubic-bezier(0.0, 0.0, 0.2, 1);
-      position: absolute;
-      left: 16px;
-      font-weight: 500;
-    }
-
-    @keyframes mat-form-field-animation {
-      from {
-        opacity: 0;
-        transform: translateY(-0.5em);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
-  }
-
-  // Hide mat option checkbox when it doesnt have multiple state
-  .mat-mdc-option:not(.mat-mdc-option-multiple) {
-    .mat-pseudo-checkbox {
-      display: none !important;
-    }
-  }
-
-  .mat-select-with-search {
-    // Hidden select element
-    .mat-mdc-form-field {
-      .mat-mdc-select {
-        opacity: 0;
-        position: absolute;
-        width: 100%;
-        height: 0;
-        top: 25px;
-      }
-    }
-
-    .search-input {
-      position: absolute;
-      input {
-        padding-left: 10px;
-      }
-    }
-    .mat-mdc-select {
-      visibility: hidden !important;
-      display: block;
-      height: 0;
-    }
-    .custom-value {
-      color: unset;
-    }
-    .custom_drop_down_icon {
-      position: absolute;
-      height: 10px;
-      width: 10px;
-      right: 10px;
-      top: 45px;
-    }
-    .close_dropdown_icon {
-      transform: rotate(180deg);
-    }
-    & app-error-message {
-      & .text {
-        margin-top: 40px;
-      }
-    }
-  }
-
-  .empty_selection_state {
-    height: 142px !important;
-    justify-content: center !important;
-    padding: 0 56px;
-    background: #F7FDFC;
-    pointer-events: auto !important;
-
-    span {
-      width: 100%;
-      margin: unset !important;
-      opacity: 1 !important;
-    }
-    .mat-pseudo-checkbox {
-      display: none;
-    }
-  }
-  .empty_selection_state.mdc-list-item--disabled {
-    opacity: 1 !important;
-    min-height: 100px !important;
-    span {
-      font-size: unset !important;
-      color: unset !important;
-    }
-    .actions_and_tile > span {
-      display: inline-block;
-      color: #8A8383 !important;
-      width: 100%;
-      text-align: center;
-    }
-  }
-
-  .option_loading {
-    .mat-pseudo-checkbox {
-      display: none;
-    }
-  }
-
-  .mat-mdc-option {
-    min-height: 40px !important;
-    padding: 10px 12px !important;
-  }
-
-  .mat-mdc-option {
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 20px;
-    letter-spacing: 0.2px;
-  }
-}
+// Import Material theming
+@use '@angular/material' as mat;
+@import "./color_themes.scss";
+
+
+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-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;
+
+  .new-mat-autocomplete {
+    .mat-mdc-form-field {
+      .mat-mdc-form-field-icon-suffix>.mat-icon {
+        padding-left: 0;
+      }
+    }
+    .select-arrow {
+      &.open {
+        transform: rotate(180deg);
+        padding-left: 12px !important;
+        padding-right: 0 !important;
+      }
+    }
+
+    .mat-mdc-select-arrow {
+      display: none;
+    }
+
+    position: relative;
+    width: 100%;
+    // Search input container
+    .search-input {
+      position: relative;
+      width: 100%;
+
+      input {
+        width: 100%;
+        height: 40px;
+        padding: 8px 40px 8px 36px !important;
+        border: 1px solid #{mat.get-theme-color($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)};
+        background: white;
+
+        &:disabled {
+          border: 1px solid #{mat.get-theme-color($m3-light-theme, tertiary, 99)};
+        }
+
+        &:focus {
+          border-color: #0060DF;
+          border-width: 3px;
+          outline: none;
+        }
+
+        &:hover:not(:focus):not(:disabled) {
+          border-color: #{mat.get-theme-color($m3-light-theme, tertiary, 70)};
+        }
+
+        &::placeholder {
+          color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
+          font-size: 13px;
+          font-weight: 500;
+          line-height: 20px;
+          letter-spacing: 0.2px;
+        }
+      }
+
+      // Search icon
+      .search-icon {
+        position: absolute;
+        left: 50px;
+        top: 57%;
+        transform: translateY(-50%);
+        color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
+
+        mat-icon {
+          font-size: 20px;
+          width: 20px;
+          height: 20px;
+        }
+      }
+
+      // Dropdown arrow
+      app-icon-button {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
+
+        &.rotated {
+          transform: translateY(-50%) rotate(180deg);
+        }
+
+        &.readonly-color {
+          opacity: 0.5;
+        }
+      }
+    }
+
+    //// Placeholder and selected value
+    .custom-placeholder {
+      position: absolute;
+      top: 28px;
+      left: 17px;
+      font-size: 13px;
+      color: #647081;
+      pointer-events: none;
+
+      &.custom-value {
+        color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
+      }
+    }
+
+    // Error state
+    .mat-mdc-form-field-error {
+      //color: #{mat.get-theme-color($m3-light-theme, error, 40)};
+      animation: mat-form-field-animation 900ms cubic-bezier(0.0, 0.0, 0.2, 1);
+      position: absolute;
+      left: 16px;
+      font-weight: 500;
+    }
+
+    @keyframes mat-form-field-animation {
+      from {
+        opacity: 0;
+        transform: translateY(-0.5em);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+  }
+
+  // Hide mat option checkbox when it doesnt have multiple state
+  .mat-mdc-option:not(.mat-mdc-option-multiple) {
+    .mat-pseudo-checkbox {
+      display: none !important;
+    }
+  }
+
+  .mat-select-with-search {
+    // Hidden select element
+    .mat-mdc-form-field {
+      .mat-mdc-select {
+        opacity: 0;
+        position: absolute;
+        width: 100%;
+        height: 0;
+        top: 25px;
+      }
+    }
+
+    .search-input {
+      position: absolute;
+      input {
+        padding-left: 10px;
+      }
+    }
+    .mat-mdc-select {
+      visibility: hidden !important;
+      display: block;
+      height: 0;
+    }
+    .custom-value {
+      color: unset;
+    }
+    .custom_drop_down_icon {
+      position: absolute;
+      height: 10px;
+      width: 10px;
+      right: 10px;
+      top: 45px;
+    }
+    .close_dropdown_icon {
+      transform: rotate(180deg);
+    }
+    & app-error-message {
+      & .text {
+        margin-top: 40px;
+      }
+    }
+  }
+
+  .empty_selection_state {
+    height: 142px !important;
+    justify-content: center !important;
+    padding: 0 56px;
+    background: #F7FDFC;
+    pointer-events: auto !important;
+
+    span {
+      width: 100%;
+      margin: unset !important;
+      opacity: 1 !important;
+    }
+    .mat-pseudo-checkbox {
+      display: none;
+    }
+  }
+  .empty_selection_state.mdc-list-item--disabled {
+    opacity: 1 !important;
+    min-height: 100px !important;
+    span {
+      font-size: unset !important;
+      color: unset !important;
+    }
+    .actions_and_tile > span {
+      display: inline-block;
+      color: #8A8383 !important;
+      width: 100%;
+      text-align: center;
+    }
+  }
+
+  .option_loading {
+    .mat-pseudo-checkbox {
+      display: none;
+    }
+  }
+
+  .mat-mdc-option {
+    min-height: 40px !important;
+    padding: 10px 12px !important;
+  }
+
+  .mat-mdc-option {
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.2px;
+  }
+}

package/theme/_menu.scss

@@ -1,9 +1,9 @@
-@use '@angular/material' as mat;
-@import "./color_themes.scss";
-
-.mat-mdc-menu-panel {
-  border: 1px solid mat.get-theme-color($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;
-}
-
+@use '@angular/material' as mat;
+@import "./color_themes.scss";
+
+.mat-mdc-menu-panel {
+  border: 1px solid mat.get-theme-color($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;
+}
+

package/theme/_text_input.scss

@@ -1,28 +1,28 @@
-@use '@angular/material' as mat;
-@import "./color_themes.scss";
-
-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-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)};
-  }
-
-  .readonly-color {
-    color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
-    .mat-mdc-icon-button.tonal mat-icon {
-      color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
-    }
-    --mdc-outlined-text-field-input-text-placeholder-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
-  }
-
-  .mat-mdc-form-field-icon-prefix {
-    padding: 0;
-  }
-}
+@use '@angular/material' as mat;
+@import "./color_themes.scss";
+
+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-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)};
+  }
+
+  .readonly-color {
+    color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
+    .mat-mdc-icon-button.tonal mat-icon {
+      color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
+    }
+    --mdc-outlined-text-field-input-text-placeholder-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
+  }
+
+  .mat-mdc-form-field-icon-prefix {
+    padding: 0;
+  }
+}

package/theme/variables/_colors.scss

@@ -1,20 +1,20 @@
-:root{
-  --Error-Background: #950E2B;
-  --error30: #B41231;
-  --error60: #DE4558;
-  --neutral20: #30353D;
-  --neutral30: #424954;
-  --neutral50: #647081;
-  --neutral80: #BBBFC7;
-  --neutral90: #D7D9DE;
-  --neutral99: #F9F9FC;
-  --primary40: #008B33;
-  --primary99: #EFFAF1;
-  --secondary25: #1F4085;
-  --secondary50: #4364A6;
-  --secondary70: #718ECB;
-  --secondary80: #97B0E3;
-  --secondary90: #C1D2F5;
-  --secondary95: #DDE7FC;
-  --secondary99: #EEF4FE;
-}
+:root{
+  --Error-Background: #950E2B;
+  --error30: #B41231;
+  --error60: #DE4558;
+  --neutral20: #30353D;
+  --neutral30: #424954;
+  --neutral50: #647081;
+  --neutral80: #BBBFC7;
+  --neutral90: #D7D9DE;
+  --neutral99: #F9F9FC;
+  --primary40: #008B33;
+  --primary99: #EFFAF1;
+  --secondary25: #1F4085;
+  --secondary50: #4364A6;
+  --secondary70: #718ECB;
+  --secondary80: #97B0E3;
+  --secondary90: #C1D2F5;
+  --secondary95: #DDE7FC;
+  --secondary99: #EEF4FE;
+}

package/theme.scss

@@ -1,31 +1,31 @@
-@use '@angular/material' as mat;
-@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
-
-@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";
-
-@include mat.core();
-
-body {
-  // BASE CSS PROPERTIES
-  margin: 0;
-  font-family: "Noto Sans";
-  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);
-  .new-mat-autocomplete {
-    @include mat.button-density(-3);
-  };
-}
+@use '@angular/material' as mat;
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+
+@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";
+
+@include mat.core();
+
+body {
+  // BASE CSS PROPERTIES
+  margin: 0;
+  font-family: "Noto Sans";
+  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);
+  .new-mat-autocomplete {
+    @include mat.button-density(-3);
+  };
+}