i-tech-shared-components 1.0.0

package/theme/_mat-selects.scss

@@ -0,0 +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;
+  }
+}

package/theme/_menu.scss

@@ -0,0 +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;
+}
+

package/theme/_text_input.scss

@@ -0,0 +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;
+  }
+}

package/theme.scss

@@ -0,0 +1,36 @@
+@use '@angular/material' as mat;
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+
+@import "./theme/buttons.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;
+
+  button, input, textarea, select, .gm-style {
+    font-family: "Noto Sans" !important;
+  }
+  // END OF BASE CSS PROPERTIES
+  @import "./theme/color_themes.scss";
+
+  @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);
+  };
+}