@softheon/armature 17.17.0 → 17.18.0

package/assets/styles/deprecated/_dialog-deprecated.scss

@@ -0,0 +1,33 @@
+
+// @deprecated replace with "sof-modal" component
+
+.mat-mdc-dialog-title {
+  font-style: normal !important;
+  font-weight: 400 !important;
+  font-size: 24px !important;
+  line-height: 36px !important;
+  letter-spacing: normal !important;
+  padding: 0px !important;
+  display: flex !important;
+}
+
+.mat-mdc-dialog-content {
+  display: block !important;
+  max-height: 65vh !important;
+  padding: 0px !important;
+  overflow: auto !important;
+}
+
+.mat-mdc-dialog-container {
+  display: block !important;
+  background: #ffffff !important;
+  border: 1px solid #dfdfdf !important;
+  box-sizing: border-box !important;
+  border-radius: 10px !important;
+  overflow: auto !important;
+  outline: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  min-height: inherit !important;
+  max-height: inherit !important;
+}

package/assets/styles/deprecated/_material-override-deprecated.scss

@@ -0,0 +1,41 @@
+@use "@angular/material" as mat;
+@use "../arm-theme" as theme;
+
+// @deprecated currently no replacement
+
+mat-card {
+  &.mat-mdc-card.item-list {
+    box-shadow: 0px 1px 7px rgba(165, 165, 165, 0.25) !important;
+    border-radius: 10px !important;
+    overflow: overlay !important;
+    max-height: 322px !important;
+    padding: 0px !important;
+  }
+}
+
+.mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option.mdc-list-item--disabled) {
+  color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+}
+
+mat-optgroup label,
+mat-optgroup mat-option {
+  font-family: "Poppins" !important;
+}
+
+.mat-card-mobile-header-override {
+  background: mat.get-color-from-palette(theme.$arm-neutral, 300);
+  padding: 16px;
+  margin: 0 -16px;
+}
+
+.mat-card-mobile-action-buttons-footer-override {
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  padding-top: 16px;
+  margin-top: 36px;
+}
+
+.mat-card-mobile-action-buttons-override {
+  button {
+    transform: scale(0.9);
+  }
+}

package/assets/styles/deprecated/_table-deprecated.scss

@@ -0,0 +1,108 @@
+@use "@angular/material" as mat;
+@use "../arm-theme" as theme;
+@use "../variables" as vars;
+
+// @deprecated replace with ag-grid table component
+
+@mixin mobile-responsive-table {
+  max-height: none !important;
+  overflow-y: auto !important;
+
+  .mat-mdc-table {
+    border: 0;
+    vertical-align: middle;
+
+    .mat-mdc-header-row {
+      min-height: 0;
+      height: 0;
+    }
+
+    .mat-mdc-header-cell {
+      border: 10px solid;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      min-height: 1px;
+      margin: -1px;
+      padding: 0;
+      position: absolute;
+      width: 1px;
+    }
+
+    .mat-mdc-row {
+      padding: 10px 20px 0 20px;
+      border-bottom: 5px solid #ddd;
+      display: block;
+      min-height: 1px;
+      height: auto;
+    }
+
+    td.mat-mdc-cell:first-of-type {
+      height: 48px;
+    }
+
+    .mat-mdc-cell {
+      display: block;
+      font-size: initial;
+      height: auto;
+      padding: 8px 0;
+      border-bottom-color: transparent;
+      text-align: initial;
+
+      &.action-buttons {
+        border-top: 1px solid mat.get-color-from-palette(theme.$arm-neutral, 300);
+        margin-top: 24px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        padding-bottom: 0;
+        margin-bottom: -8px;
+
+        &:before {
+          content: none;
+        }
+      }
+
+      &:before {
+        content: attr(data-label) ": ";
+        float: left;
+        font-weight: 600;
+        padding-right: 5px;
+      }
+
+      &:last-child {
+        border-bottom: 0;
+      }
+
+      &:first-child {
+        margin-top: 4%;
+      }
+
+      &:first-of-type {
+        padding-left: 0;
+        margin: -10px -20px 8px -20px;
+        padding: 16px 20px 16px 20px;
+        background: mat.get-color-from-palette(theme.$arm-neutral, 300);
+        box-sizing: border-box;
+        height: auto;
+      }
+    }
+
+    td.mat-mdc-cell.action-buttons {
+      margin-bottom: 8px;
+    }
+  }
+
+  @content;
+}
+
+@media screen and (max-width: vars.$mat-lt-md) {
+  .mat-responsive-table-override-sm {
+    @include mobile-responsive-table;
+  }
+}
+
+@media screen and (max-width: vars.$mat-lt-lg) {
+  .mat-responsive-table-override-md {
+    @include mobile-responsive-table;
+  }
+}

package/assets/styles/deprecated/_tooltip-deprecated.scss

@@ -0,0 +1,93 @@
+@use "../variables" as vars;
+
+// @deprecated replace with "/material-override/tooltip"
+
+.mdc-tooltip__surface {
+  color: vars.$surface-color-default-light !important;
+  font-size: 14px !important;
+  font-style: normal !important;
+  font-weight: 100 !important;
+  font-family: Poppins !important;
+  line-height: normal !important;
+  background-color: vars.$surface-color-inverse-light !important;
+  border-radius: 4px !important;
+  text-align: center !important;
+  position: relative;
+  padding-left: 4px !important;
+  padding-right: 4px !important;
+  padding-bottom: 0px !important;
+  padding-top: 1px !important;
+
+  &::after {
+    width: 0;
+    height: 0;
+    content: '';
+    position: absolute;
+  }
+
+  &.below {
+    overflow: initial;
+
+    &:after {
+      top: -0.5rem;
+      right: calc(50% - 0.3rem);
+      transform: rotate(0);
+      border-left: 0.25rem solid transparent;
+      border-right: 0.25rem solid transparent;
+      border-bottom: 0.5rem solid vars.$surface-color-inverse-light !important;
+
+    }
+  }
+
+  &.above {
+    overflow: initial;
+    margin-bottom: 1.25rem;
+
+    &:after {
+      bottom: -0.5rem;
+      right: calc(50% - 0.3rem);
+      transform: rotate(180deg);
+      border-left: 0.25rem solid transparent;
+      border-right: 0.25rem solid transparent;
+      border-bottom: 0.5rem solid vars.$surface-color-inverse-light !important;
+
+    }
+  }
+
+  &.right {
+    overflow: initial;
+    margin-left: 0.75rem;
+
+    &:after {
+      left: -0.40rem;
+      top: calc(50% - 0.50rem);
+      transform: rotate(270deg);
+      border-left: 0.3rem solid transparent;
+      border-right: 0.3rem solid transparent;
+      border-bottom: 1rem solid vars.$surface-color-inverse-light !important;
+
+    }
+  }
+
+  &.left {
+    overflow: initial;
+    margin-right: 0.75rem;
+
+    &:after {
+      right: -0.40rem;
+      top: calc(50% - 0.50rem);
+      transform: rotate(90deg);
+      border-left: 0.3rem solid transparent;
+      border-right: 0.3rem solid transparent;
+      border-top: 0.3rem solid transparent;
+      border-bottom: 1rem solid vars.$surface-color-inverse-light !important;
+
+    }
+  }
+}
+
+::ng-deep .cdk-overlay-container .cdk-overlay-pane {
+  &.mat-mdc-tooltip-panel {
+    transform: none !important;
+  }
+}

package/assets/styles/material-override/_button-toggle-group.scss

@@ -0,0 +1,122 @@
+@use "@angular/material" as mat;
+@use "../arm-theme" as theme;
+@use "../variables" as vars;
+
+mat-button-toggle-group {
+  &.sof-toggle-group {
+    height: 48px !important;
+
+    &.mat-button-toggle-group.mat-button-toggle-group-appearance-standard {
+      border: none !important;
+      border-radius: 0px !important;
+    }
+
+    &.full-width {
+      .toggle-left {
+        width: 100% !important;
+      }
+
+      .toggle-middle {
+        width: 100% !important;
+      }
+
+      .toggle-right {
+        width: 100% !important;
+      }
+    }
+
+    .mat-button-toggle-label-content {
+      text-transform: uppercase !important;
+      font-family: "Poppins" !important;
+      font-style: normal !important;
+      font-weight: 600 !important;
+      font-size: 16px !important;
+      line-height: 24px !important;
+      letter-spacing: 0.05em !important;
+      text-align: center !important;
+      color: vars.$text-high-emphasis !important;
+
+      // remove selected check indicator 
+      .mat-pseudo-checkbox {
+        display: none !important;
+      }
+    }
+
+    .mat-button-toggle-button {
+      height: 100% !important;
+    }
+
+    .mat-button-toggle-checked {
+      background-color: mat.get-color-from-palette(theme.$arm-primary, 100) !important;
+    }
+
+    .toggle-left {
+      border-top: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      border-bottom: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      border-left: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      border-right: 1px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      border-radius: 6px 0px 0px 6px !important;
+      width: 120px !important;
+    }
+
+    .toggle-middle {
+      border-top: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      border-bottom: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      border-left: 1px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      border-right: 1px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      border-radius: 0px 0px 0px 0px !important;
+      width: 120px !important;
+    }
+
+    .toggle-right {
+      border-top: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      border-bottom: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      border-left: 1px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      border-right: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      border-radius: 0px 6px 6px 0px !important;
+      width: 120px !important;
+    }
+
+    .mat-button-toggle-disabled {
+      &.mat-button-toggle-checked {
+        background-color: mat.get-color-from-palette(theme.$arm-neutral, 200) !important;
+      }
+
+      &.toggle-left {
+        border-top: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
+        border-bottom: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
+        border-left: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
+        border-right: 1px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
+        border-radius: 6px 0px 0px 6px !important;
+      }
+
+      &.toggle-middle {
+        border-top: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
+        border-bottom: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
+        border-left: 1px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
+        border-right: 1px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
+        border-radius: 0px 0px 0px 0px !important;
+      }
+
+      &.toggle-right {
+        border-top: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
+        border-bottom: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
+        border-left: 1px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
+        border-right: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 400) !important;
+        border-radius: 0px 6px 6px 0px !important;
+      }
+    }
+  }
+
+  &.sof-toggle-group[size="small"] {
+    height: 36px !important;
+  }
+
+  &.sof-toggle-group[size="medium"] {
+    height: 48px !important;
+  }
+
+  &.sof-toggle-group[size="large"] {
+    height: 56px !important;
+  }
+}

package/assets/styles/material-override/_button.scss

@@ -0,0 +1,266 @@
+@use "@angular/material" as mat;
+@use "../arm-theme" as theme;
+@use "../variables" as vars;
+
+// ⚠️ this file needs to be audited, missing several button styles, at least from documentation 
+// [figma buttons] https://www.figma.com/design/W5HVNCcN9HafDRvc5N7Z28/Softheon-Unified-Design-System?node-id=6370-64249&node-type=canvas&t=JXuu3NWd5Lq1lE4a-0
+
+/** 
+  Button styles should have -
+
+  3 color themes: ( 'brand-theme', 'neutral', 'destroy' )
+
+  Each color has 4 types ( 'primary-solid', 'secondary', 'floating', 'contained' )
+
+  Each type has 4 interactive states ( 'enabled', 'hover', 'pressed', 'disabled' )
+*/
+
+// @todo: update the use of 'var()' to use 'mat.get-color-from-palette()'
+
+button.mat-mdc-button .mat-mdc-button-ripple,
+.mat-mdc-button .mat-mdc-button-persistent-ripple,
+.mat-mdc-button .mat-mdc-button-persistent-ripple::before,
+.mat-mdc-unelevated-button .mat-mdc-button-ripple,
+.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple,
+.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before,
+.mat-mdc-raised-button .mat-mdc-button-ripple,
+.mat-mdc-raised-button .mat-mdc-button-persistent-ripple,
+.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before,
+.mat-mdc-outlined-button .mat-mdc-button-ripple,
+.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple,
+.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before {
+  background: none !important;
+}
+
+button.sof-button-v2 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px !important;
+  height: 40px !important;
+  border-radius: 8px !important;
+  font-family: Poppins !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  font-size: 16px !important;
+  line-height: normal !important;
+  letter-spacing: 0px !important;
+  text-transform: capitalize !important;
+
+  &.fixed-width {
+    width: 200px !important; // Use this is to match specific sizing
+  }
+
+  &.full-width {
+    width: 100% !important; // Use this is button width will take size of flex percentage
+  }
+
+  &.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+
+    i {
+      font-size: 20px;
+    }
+  }
+
+  &.mat-mdc-unelevated-button span.mdc-button__label {
+    display: flex;
+    align-items: center;
+    justify-content: center !important;
+    width: 100% !important;
+
+    i {
+      margin-right: 8px !important;
+    }
+  }
+
+  &:enabled {
+    &.mat-primary {
+      background: mat.get-color-from-palette(theme.$arm-primary, 500);
+      color: map-get(theme.$arm-primary, contrast, 900);
+
+      &:hover {
+        background-color: var(--primary-color-500-parts);
+      }
+
+      &:focus {
+        outline: 3px solid mat.get-color-from-palette(theme.$arm-primary, 300);
+        outline-offset: 2px !important;
+      }
+    }
+
+    &.mat-secondary {
+      background: vars.$surface-color-level-one-light !important;
+      color: var(--primary-color-contrast-50-parts);
+
+      &:hover {
+        background-color: vars.$surface-color-level-one-light !important;
+      }
+
+      &:focus {
+        outline: 3px solid mat.get-color-from-palette(theme.$arm-primary, 300);
+        outline-offset: 2px !important;
+      }
+    }
+
+    &.mat-tertiary {
+      color: var(--primary-color-contrast-50-parts);
+      background: none !important;
+
+      &:hover {
+        background-color: transparent !important;
+      }
+
+      &:focus {
+        outline: 3px solid mat.get-color-from-palette(theme.$arm-primary, 300);
+        outline-offset: 2px !important;
+      }
+    }
+
+    &.mat-error {
+      background: mat.get-color-from-palette(theme.$arm-error, 900);
+      color: map-get(theme.$arm-error, contrast, 900);
+
+      &:hover {
+        background-color: mat.get-color-from-palette(theme.$arm-error, 700);
+        color: map-get(theme.$arm-error, contrast, 700);
+      }
+
+      &:focus {
+        outline: 3px solid mat.get-color-from-palette(theme.$arm-primary, 300);
+        outline-offset: 2px !important;
+      }
+    }
+  }
+
+  &:disabled {
+    background: vars.$surface-color-level-one-light !important;
+    color: rgba(0, 0, 0, 0.6) !important;
+    opacity: 1 !important;
+
+    &:hover {
+      background-color: mat.get-color-from-palette(theme.$arm-primary, 500);
+    }
+
+    &:focus {
+      outline: 3px solid mat.get-color-from-palette(theme.$arm-primary, 300);
+      outline-offset: 2px !important;
+    }
+  }
+
+  // have not seen this (.no-hover-effect) class? remove if not needed,
+  // also need to disable ripple effects globally
+  &.no-hover-effect.mat-button.mat-primary .mat-button-focus-overlay,
+  .no-hover-effect.mat-button.mat-secondary .mat-button-focus-overlay,
+  .no-hover-effect.mat-button.mat-tertiary .mat-button-focus-overlay,
+  .no-hover-effect.mat-button.mat-error .mat-button-focus-overlay,
+  .no-hover-effect.mat-button.mat-accent .mat-button-focus-overlay,
+  .no-hover-effect.mat-button.mat-warn .mat-button-focus-overlay {
+    background-color: transparent;
+  }
+}
+
+button.sof-button-icon-v2 {
+  display: flex !important;
+  padding: 8px !important;
+  border-radius: 8px !important;
+  height: 40px !important;
+  justify-content: center !important;
+  align-items: center !important;
+  gap: 8px !important;
+  max-width: 36px !important;
+
+  &.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label {
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+
+  }
+
+  &.mdc-button {
+    min-width: 40px;
+  }
+
+  &.full-width {
+    width: 100% !important; // Use this is button width will take size of flex percentage
+  }
+
+  &:enabled {
+    &.mat-primary {
+      background: mat.get-color-from-palette(theme.$arm-primary, 500);
+      color: map-get(theme.$arm-error, contrast, 900);
+
+      &:hover {
+        background-color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+        color: map-get(theme.$arm-error, contrast, 700);
+      }
+
+      &:focus {
+        outline: 3px solid mat.get-color-from-palette(theme.$arm-primary, 300);
+        outline-offset: 2px !important;
+      }
+    }
+
+    &.mat-secondary {
+      background-color: vars.$surface-color-level-one-light !important;
+      color: var(--primary-color-contrast-50-parts);
+
+      &:hover {
+        background-color: vars.$surface-color-level-one-light !important;
+        color: var(--primary-color-contrast-50-parts) !important;
+      }
+
+      &:focus {
+        outline: 3px solid mat.get-color-from-palette(theme.$arm-primary, 300);
+        outline-offset: 2px !important;
+      }
+    }
+
+    &.mat-tertiary {
+      color: var(--primary-color-contrast-50-parts);
+      background: transparent !important;
+
+      &:focus {
+        outline: 3px solid mat.get-color-from-palette(theme.$arm-primary, 300);
+        outline-offset: 2px !important;
+      }
+    }
+
+    &.mat-error {
+      background: mat.get-color-from-palette(theme.$arm-error, 900);
+      color: map-get(theme.$arm-error, contrast, 900);
+
+      &:hover {
+        background-color: mat.get-color-from-palette(theme.$arm-error, 700);
+        color: map-get(theme.$arm-error, contrast, 700);
+      }
+
+      &:focus {
+        outline: 3px solid mat.get-color-from-palette(theme.$arm-primary, 300);
+        outline-offset: 2px !important;
+      }
+    }
+  }
+
+  &:disabled {
+    background: vars.$surface-color-level-one-light !important;
+    color: vars.$text-medium-emphasis !important;
+    opacity: 1 !important;
+
+    &:hover {
+      background-color: mat.get-color-from-palette(theme.$arm-primary, 500);
+    }
+
+    &:focus {
+      outline: 3px solid mat.get-color-from-palette(theme.$arm-primary, 300);
+      outline-offset: 2px !important;
+    }
+  }
+}
+
+// notification badge styles ...
+button .mat-badge-content {
+  background-color: #333333 !important;
+}