i-tech-shared-components 1.1.8 → 1.1.10

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;
+  }
+
+}

package/theme/_icon-button.scss

@@ -1,123 +1,123 @@
-@use '@angular/material' as mat;
-@import "./color_themes.scss";
-
-body {
-  $buttonSize: 40;
-  $buttonSizeSmall: 24;
-
-  app-icon-button {
-    display: inline-block;
-    height: #{$buttonSize}px;
-  }
-
-  app-icon-button:has(.small) {
-    height: #{$buttonSizeSmall}px;
-  }
-
-  // ICON BUTTON SIZING
-  .mat-mdc-icon-button,.mat-mdc-fab-base {
-    width: #{$buttonSize}px;
-    height: #{$buttonSize}px;
-    --mdc-icon-button-state-layer-size: #{$buttonSize}px !important;
-    padding: calc(calc(var(--mdc-icon-button-state-layer-size, 40px) - var(--mdc-icon-button-icon-size, 24px)) / 2);
-    font-size: unset !important;
-
-    .mat-mdc-button-touch-target {
-      width: #{$buttonSize - 10 }px;
-      height: #{$buttonSize - 10 }px;
-    }
-
-    mat-icon {
-      svg {
-        vertical-align: super;
-      }
-    }
-
-  }
-
-  .mat-mdc-icon-button.small {
-    $iconSize: 21px;
-    $buttonSize: 24;
-    width: #{$buttonSizeSmall}px;
-    height: #{$buttonSizeSmall}px;
-    --mdc-icon-button-state-layer-size: #{$buttonSizeSmall}px !important;
-    --mdc-icon-button-icon-size: #{$iconSize} !important;
-
-    mat-icon {
-      font-size: $iconSize;
-      width: $iconSize;
-      height: $iconSize;
-    }
-
-    .mat-mdc-button-touch-target {
-      width: #{$buttonSizeSmall}px;
-      height: #{$buttonSizeSmall}px;
-    }
-
-  }
-
-  .mat-mdc-fab-base.small {
-    $iconSize: 21px;
-    $buttonSize: 24;
-    width: #{$buttonSize}px;
-    height: #{$buttonSize}px;
-    --mdc-icon-button-state-layer-size: #{$buttonSize}px !important;
-    --mdc-icon-button-icon-size: #{$iconSize} !important;
-
-    mat-icon {
-      font-size: $iconSize;
-      width: $iconSize;
-      height: $iconSize;
-    }
-
-    .mat-mdc-button-touch-target {
-      width: #{$buttonSize}px;
-      height: #{$buttonSize}px;
-    }
-  }
-
-  // END OF ICON BUTTON SIZING
-
-  // BUTTON ICON TYPES
-
-  .mat-mdc-icon-button.tonal {
-    --mat-icon-button-state-layer-color: #{mat.get-theme-color($m3-light-theme, tertiary, 60)};
-
-    mat-icon {
-      color: mat.get-theme-color($m3-light-theme, tertiary, 30);
-      & svg path {
-        fill: mat.get-theme-color($m3-light-theme, tertiary, 30);
-      }
-    }
-  }
-
-  .mat-mdc-icon-button.standard {
-    --mat-icon-button-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 60)};
-
-    mat-icon {
-      color: mat.get-theme-color($m3-light-theme, primary, 50);
-      & svg path {
-        fill: mat.get-theme-color($m3-light-theme, primary, 50);
-      }
-    }
-  }
-
-  // FILLED
-  .mat-mdc-fab-base.filled {
-    --mdc-fab-container-shape: 50% !important;
-    --mdc-fab-container-elevation-shadow: none !important;
-    --mdc-fab-hover-container-elevation-shadow: none !important;
-    --mdc-fab-pressed-container-elevation-shadow: none !important;
-    --mdc-fab-focus-container-elevation-shadow: none !important;
-    --mdc-fab-container-color: #{mat.get-theme-color($m3-light-theme, primary, 50)};
-    --mat-fab-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 50)};
-    mat-icon {
-      color: white;
-      & svg path {
-        fill: white;
-      }
-    }
-  }
-  // END OF BUTTON ICON TYPES
-
-}
+@use '@angular/material' as mat;
+@import "./color_themes.scss";
+
+body {
+  $buttonSize: 40;
+  $buttonSizeSmall: 24;
+
+  app-icon-button {
+    display: inline-block;
+    height: #{$buttonSize}px;
+  }
+
+  app-icon-button:has(.small) {
+    height: #{$buttonSizeSmall}px;
+  }
+
+  // ICON BUTTON SIZING
+  .mat-mdc-icon-button,.mat-mdc-fab-base {
+    width: #{$buttonSize}px;
+    height: #{$buttonSize}px;
+    --mdc-icon-button-state-layer-size: #{$buttonSize}px !important;
+    padding: calc(calc(var(--mdc-icon-button-state-layer-size, 40px) - var(--mdc-icon-button-icon-size, 24px)) / 2);
+    font-size: unset !important;
+
+    .mat-mdc-button-touch-target {
+      width: #{$buttonSize - 10 }px;
+      height: #{$buttonSize - 10 }px;
+    }
+
+    mat-icon {
+      svg {
+        vertical-align: super;
+      }
+    }
+
+  }
+
+  .mat-mdc-icon-button.small {
+    $iconSize: 21px;
+    $buttonSize: 24;
+    width: #{$buttonSizeSmall}px;
+    height: #{$buttonSizeSmall}px;
+    --mdc-icon-button-state-layer-size: #{$buttonSizeSmall}px !important;
+    --mdc-icon-button-icon-size: #{$iconSize} !important;
+
+    mat-icon {
+      font-size: $iconSize;
+      width: $iconSize;
+      height: $iconSize;
+    }
+
+    .mat-mdc-button-touch-target {
+      width: #{$buttonSizeSmall}px;
+      height: #{$buttonSizeSmall}px;
+    }
+
+  }
+
+  .mat-mdc-fab-base.small {
+    $iconSize: 21px;
+    $buttonSize: 24;
+    width: #{$buttonSize}px;
+    height: #{$buttonSize}px;
+    --mdc-icon-button-state-layer-size: #{$buttonSize}px !important;
+    --mdc-icon-button-icon-size: #{$iconSize} !important;
+
+    mat-icon {
+      font-size: $iconSize;
+      width: $iconSize;
+      height: $iconSize;
+    }
+
+    .mat-mdc-button-touch-target {
+      width: #{$buttonSize}px;
+      height: #{$buttonSize}px;
+    }
+  }
+
+  // END OF ICON BUTTON SIZING
+
+  // BUTTON ICON TYPES
+
+  .mat-mdc-icon-button.tonal {
+    --mat-icon-button-state-layer-color: #{mat.get-theme-color($m3-light-theme, tertiary, 60)};
+
+    mat-icon {
+      color: mat.get-theme-color($m3-light-theme, tertiary, 30);
+      & svg path {
+        fill: mat.get-theme-color($m3-light-theme, tertiary, 30);
+      }
+    }
+  }
+
+  .mat-mdc-icon-button.standard {
+    --mat-icon-button-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 60)};
+
+    mat-icon {
+      color: mat.get-theme-color($m3-light-theme, primary, 50);
+      & svg path {
+        fill: mat.get-theme-color($m3-light-theme, primary, 50);
+      }
+    }
+  }
+
+  // FILLED
+  .mat-mdc-fab-base.filled {
+    --mdc-fab-container-shape: 50% !important;
+    --mdc-fab-container-elevation-shadow: none !important;
+    --mdc-fab-hover-container-elevation-shadow: none !important;
+    --mdc-fab-pressed-container-elevation-shadow: none !important;
+    --mdc-fab-focus-container-elevation-shadow: none !important;
+    --mdc-fab-container-color: #{mat.get-theme-color($m3-light-theme, primary, 50)};
+    --mat-fab-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 50)};
+    mat-icon {
+      color: white;
+      & svg path {
+        fill: white;
+      }
+    }
+  }
+  // END OF BUTTON ICON TYPES
+
+}