i-tech-shared-components 1.4.41 → 1.4.43

package/theme/_mat-selects.scss

@@ -1,281 +1,281 @@
-// Import Material theming
-@use '@angular/material' as mat;
-@use "./color_themes.scss" as color-themes;
-
-
-body {
-  --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(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 {
-      .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(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(color-themes.$m3-light-theme, tertiary, 30)};
-        background: white;
-
-        &:disabled {
-          border: 1px solid #{mat.get-theme-color(color-themes.$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(color-themes.$m3-light-theme, tertiary, 70)};
-        }
-
-        &::placeholder {
-          color: #{mat.get-theme-color(color-themes.$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(color-themes.$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(color-themes.$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;
-      z-index: 1; // Ensure it's above the form field background
-
-      &.custom-value:not(.readonly-color) {
-        font-weight: 500;
-        color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)} !important;
-        width: 80%;
-        z-index: 2; // Higher z-index to ensure visibility above other elements
-      }
-    }
-
-    // Error state
-    .mat-mdc-form-field-error {
-      //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;
-      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-right: max(16px, var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small))) !important;
-        padding-left: max(16px, var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small)) + 4px) !important;
-      }
-    }
-    .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;
-
-    .sub_value {
-      font-size: 11px;
-      font-weight:400;
-      line-height: 16px;
-    }
-  }
-
-  .filter_dropdown {
-    .search-input {
-      input {
-        &, &::placeholder {
-          font-size: 13px !important;
-          font-weight: 500 !important;
-        }
-      }
-    }
-    .custom-placeholder {
-      color: var(--neutral50) !important;
-      font-size: 13px !important;
-      font-weight: 500 !important;
-    }
-  }
-}
-
-.hide_input_placeholder {
-  input::placeholder {
-    color: transparent !important;
-  }
-}
+// Import Material theming
+@use '@angular/material' as mat;
+@use "./color_themes.scss" as color-themes;
+
+
+body {
+  --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(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 {
+      .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(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(color-themes.$m3-light-theme, tertiary, 30)};
+        background: white;
+
+        &:disabled {
+          border: 1px solid #{mat.get-theme-color(color-themes.$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(color-themes.$m3-light-theme, tertiary, 70)};
+        }
+
+        &::placeholder {
+          color: #{mat.get-theme-color(color-themes.$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(color-themes.$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(color-themes.$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;
+      z-index: 1; // Ensure it's above the form field background
+
+      &.custom-value:not(.readonly-color) {
+        font-weight: 500;
+        color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)} !important;
+        width: 80%;
+        z-index: 2; // Higher z-index to ensure visibility above other elements
+      }
+    }
+
+    // Error state
+    .mat-mdc-form-field-error {
+      //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;
+      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-right: max(16px, var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small))) !important;
+        padding-left: max(16px, var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small)) + 4px) !important;
+      }
+    }
+    .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;
+
+    .sub_value {
+      font-size: 11px;
+      font-weight:400;
+      line-height: 16px;
+    }
+  }
+
+  .filter_dropdown {
+    .search-input {
+      input {
+        &, &::placeholder {
+          font-size: 13px !important;
+          font-weight: 500 !important;
+        }
+      }
+    }
+    .custom-placeholder {
+      color: var(--neutral50) !important;
+      font-size: 13px !important;
+      font-weight: 500 !important;
+    }
+  }
+}
+
+.hide_input_placeholder {
+  input::placeholder {
+    color: transparent !important;
+  }
+}

package/theme/_menu.scss

@@ -1,13 +1,13 @@
-@use '@angular/material' as mat;
-@use "./color_themes.scss" as color-themes;
-
-.mt-4 {
-  margin-top: 4px;
-}
-
-.mat-mdc-menu-panel {
-  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(color-themes.$m3-light-theme, primary, 98)} !important;
-}
-
+@use '@angular/material' as mat;
+@use "./color_themes.scss" as color-themes;
+
+.mt-4 {
+  margin-top: 4px;
+}
+
+.mat-mdc-menu-panel {
+  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(color-themes.$m3-light-theme, primary, 98)} !important;
+}
+

package/theme/_text_input.scss

@@ -1,29 +1,29 @@
-@use '@angular/material' as mat;
-@use "./_color_themes.scss" as color-themes;
-
-body {
-  .readonly-field {
-    --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(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 {
-    pointer-events: none;
-    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(color-themes.$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 {
-    padding: 0;
-  }
-}
+@use '@angular/material' as mat;
+@use "./_color_themes.scss" as color-themes;
+
+body {
+  .readonly-field {
+    --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(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 {
+    pointer-events: none;
+    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(color-themes.$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 {
+    padding: 0;
+  }
+}