i-tech-shared-components 1.0.0

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "i-tech-shared-components",
+  "version": "1.0.0",
+  "peerDependencies": {
+    "@angular/cdk": "^18.2.14",
+    "@angular/material": "^18.2.14",
+    "@angular/animations": "^18.0.0",
+    "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
+    "ngx-mask": "^16.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "files": [
+    "**/*"
+  ],
+  "module": "fesm2022/i-tech-shared-components.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/i-tech-shared-components.mjs",
+      "esm": "./esm2022/i-tech-shared-components.mjs",
+      "default": "./fesm2022/i-tech-shared-components.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,7 @@
+export * from './lib/pipes/generate-error-messages.pipe';
+export * from './lib/services/input.service';
+export * from './lib/interfaces/app-input.interface';
+export * from './lib/directives/input-mask.directive';
+export * from './lib/components/icon-button/icon-button.component';
+export * from './lib/components/text/text-input.component';
+export * from './lib/components/button/button.component';

package/theme/_buttons.scss

@@ -0,0 +1,63 @@
+
+@use '@angular/material' as mat;
+@import "./color_themes.scss";
+
+body {
+  $borderRadius: 5px;
+  $fontSize: 13px;
+  $letterSpacing: 0.5px;
+  // BUTTONS
+  --mdc-filled-button-container-shape: #{$borderRadius} !important;
+  --mdc-outlined-button-container-shape: #{$borderRadius} !important;
+  --mdc-text-button-container-shape: #{$borderRadius} !important;
+  // Font Size
+  --mdc-filled-button-label-text-size: #{$fontSize} !important;
+  --mdc-outlined-button-label-text-size: #{$fontSize} !important;
+  --mdc-text-button-label-text-size: #{$fontSize} !important;
+  // Letter Spacing
+  --mdc-filled-button-label-text-tracking: #{$letterSpacing} !important;
+  --mdc-outlined-button-label-text-tracking: #{$letterSpacing} !important;
+  --mdc-text-button-label-text-tracking: #{$letterSpacing} !important;
+  // Unset Outline default border color
+  --mdc-outlined-button-outline-color: 0 !important;
+
+  .mdc-button:not(.mat-autocomplete-select-button) {
+    height: 40px;
+  }
+
+  .mdc-button {
+    .spinner-overlay {
+      position: absolute;
+      left: -20px;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    svg path {
+      fill: var(--mdc-text-button-label-text-color);
+    }
+
+    .spinner-overlay mat-spinner {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .relative {
+    position: relative;
+  }
+
+  .activated {
+    background-color: mat.get-theme-color($m3-light-theme, primary, 95) !important;
+  }
+
+  // DEFINE TERTIARY BUTTON
+  .mdc-button.tertiary {
+    @include mat.button-color($m3-light-theme, $color-variant: tertiary);
+    --mdc-text-button-label-text-color: mat.get-theme-color($m3-light-theme, 'tertiary', 30) !important;
+  }
+  // END OF DEFINE TERTIARY BUTTON
+}

package/theme/_color_themes.scss

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

package/theme/_date_picker.scss

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

@@ -0,0 +1,106 @@
+@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: #424954 !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, #424954);
+    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;
+  }
+}

package/theme/_icon-button.scss

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

package/theme/_label.scss

@@ -0,0 +1,119 @@
+@use "sass:map";
+@use '@angular/material' as mat;
+@import "./color_themes.scss";
+
+body {
+  $types: (
+          purple: (
+                  main: #DBD4F3,
+                  hover: #E5E0F6,
+                  border: #6F5BBF,
+                  text: #140063
+          ),
+          teal: (
+                  main: #D2F3F2,
+                  hover: #DFF6F6,
+                  border: #00CAC3,
+                  text: #006B67
+          ),
+          olive: (
+                  main: #EFF2D4,
+                  hover: #F3F6E0,
+                  border: #CDD968,
+                  text: #606C00
+          ),
+          orange: (
+                  main: #FFE4DB,
+                  hover: #FFECE5,
+                  border: #FC8156,
+                  text: #A42B00
+          ),
+          blue: (
+                  main: #D1E9FF,
+                  hover: #DEEFFF,
+                  border: #42A5FF,
+                  text: #003E77
+          ),
+          cyan: (
+                  main: #DBF8FF,
+                  hover: #E5FAFF,
+                  border: #42D8FF,
+                  text: #006681
+          ),
+          raspberry: (
+                  main: #EBD6DB,
+                  hover: #F1E1E5,
+                  border: #711A2E,
+                  text: #4B0011
+          ),
+          yellow: (
+                  main: #FFFCCB,
+                  hover: #FFFDDA,
+                  border: #FFF000,
+                  text: #847700
+          ),
+          wine: (
+                  main: #EDD3E5,
+                  hover: #F2DFEC,
+                  border: #9D4280,
+                  text: #680047
+          ),
+          green: (
+                  main: #CFF1DD,
+                  hover: #DCF5E7,
+                  border: #2EB265,
+                  text: #005D27
+          ),
+          primary: (
+                  main: #C0E5C7,
+                  hover: #EFFAF1,
+                  border: #42B963,
+                  text: #003A0C
+          ),
+          red: (
+                  main: #FFE5E5,
+                  hover: #FFD9D9,
+                  border: #FF4D4D,
+                  text: #8B0000
+          ),
+  );
+
+  --mdc-chip-container-shape-radius: 8px !important;
+  --mdc-chip-label-text-line-height: 16px !important;
+  --mdc-chip-label-text-size: 11px !important;
+  --mdc-chip-label-text-weight: 700 !important;
+  --mdc-chip-label-text-tracking: 0.3 !important;
+  --mdc-chip-outline-width: 0 !important;
+  --mdc-chip-container-height: 32px !important;
+
+  @each $type, $value in $types {
+    .label_#{$type} {
+      --mdc-chip-elevated-container-color: #{map.get($value, "main")};
+      --mdc-chip-outline-color: #{map.get($value, "border")};
+      --mdc-chip-label-text-color: #{map.get($value, "text")};
+
+      mat-icon {
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+      }
+    }
+  }
+
+  .mat-mdc-chip.small {
+    // TODO need to review
+    --mdc-chip-container-height: 28px !important;
+  }
+
+  .trailing-icon {
+    .mat-mdc-standard-chip .mdc-evolution-chip__action--primary {
+      // Chips with trailing icon have -4 right padding per Figma
+      padding-right: 8px;
+    }
+  }
+
+  .mat-mdc-chip.bordered {
+    --mdc-chip-outline-width: 2.5px !important;
+  }
+
+}