@elderbyte/ngx-starter 19.1.0-beta.9 → 19.1.0

package/theming/components/_elder-chip-theme.scss

@@ -1,158 +1,297 @@
 @use 'sass:map';
+@use 'sass:color';
 @use '@angular/material' as mat;
 @use '../abstracts/elder-scss-variables' as config;
 
-$colorStateNone: var(--elder-chip-color-state-none);
-$colorStateOpen: var(--elder-chip-color-state-open);
+@mixin theme($config-or-theme) {
+  @include mat-chip-fixes();
+  @include chip-colors();
 
-$colorStateInProgress: var(--elder-chip-color-state-in-progress);
-$colorStateCompleted: var(--elder-chip-color-state-completed);
-$colorStateWarn: var(--elder-chip-color-state-warn);
-$colorStateError: var(--elder-chip-color-state-error);
-$colorStateOther: var(--elder-chip-color-state-other);
+  .elder-chip-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-$level-low: $colorStateCompleted;
-$level-medium: $colorStateInProgress;
-$level-high: $colorStateWarn;
-$level-critical: $colorStateError;
+  .elder-trailing-icon {
+    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
+    opacity: 0.54;
+  }
+}
 
-@mixin theme($config-or-theme) {
-  .mat-mdc-chip.mat-mdc-chip {
-    --mdc-chip-elevated-container-color: rgba(143, 143, 143, 0.2);
-    background-color: var(--mdc-chip-elevated-container-color);
+@mixin mat-chip-fixes {
+  /******************************
+  Material Chip fix
+  *******************************/
 
-    &.elder-chip-color-primary,
-    &.color-primary {
-      background-color: var(--md-sys-color-primary-container);
-    }
+  .mat-mdc-chip {
+    // Fixes default avatar on attribute usage (<mat-chip-avatar> vs matChipAvatar) which is broken in Angular Material 15.0.0
+    mat-chip-avatar {
+      .mat-icon {
+        width: 18px;
+        height: 18px;
+        line-height: 18px;
+        font-size: 18px;
+      }
 
-    &.elder-chip-color-primary,
-    &.color-primary {
-      @include _theme_color_chip(
-        var(--md-sys-color-primary-container),
-        var(--md-sys-color-primary),
-        var(--md-sys-color-on-primary)
-      );
+      img {
+        width: 18px;
+        height: 18px;
+        overflow: hidden;
+        border-radius: 9px;
+      }
     }
+  }
 
-    &.elder-chip-color-accent,
-    &.elder-chip-color-tertiary,
-    &.color-accent {
-      @include _theme_color_chip(
-        var(--md-sys-color-tertiary-container),
-        var(--md-sys-color-tertiary),
-        var(--md-sys-color-on-tertiary)
-      );
+  /******************************
+  Material chip make regular chips clickable when applying this class
+  *******************************/
+
+  .clickable-chip {
+    .mat-mdc-chip-action {
+      cursor: pointer;
     }
+  }
 
-    &.elder-chip-color-warn,
-    &.color-warn {
-      @include _theme_color_chip(
-        var(--md-sys-color-error-container),
-        var(--md-sys-color-error),
-        var(--md-sys-color-on-error)
-      );
+  /******************************
+  chip-avatar-xl
+  *******************************/
+  .mat-mdc-chip .mat-mdc-chip-avatar {
+    // Maximizes the avatar icon / image size in a chip.
+    &.chip-avatar-xl {
+      width: 28px;
+      height: 28px;
+      margin-left: -4px;
+      margin-right: -4px;
+
+      img {
+        width: 28px;
+        height: 28px;
+        overflow: hidden;
+        border-radius: 14px;
+      }
+
+      .mat-icon {
+        width: 28px !important;
+        height: 28px !important;
+        line-height: 28px !important;
+        font-size: 28px !important;
+      }
     }
+  }
+}
 
-    &.elder-chip-state-none,
-    &.none {
-      @include _outlined-label-chip($colorStateNone);
+@mixin standard-chip-content-color-variant($color) {
+  @include mat.chips-overrides(
+    (
+      outline-color: $color,
+      label-text-color: $color,
+      //selected-label-text-color: $color,
+      with-icon-icon-color: $color,
+      //with-icon-selected-icon-color: $color,
+      with-trailing-icon-trailing-icon-color: $color,
+      focus-outline-color: #aaa,
+      //selected-trailing-icon-color: $color,
+      selected-trailing-icon-color: $color,
+    )
+  );
+}
+
+@mixin chip-colors {
+  $colorStateNone: var(--elder-chip-color-state-none);
+  // $colorStateNone: transparent;
+  $colorStateOpen: var(--elder-chip-color-state-open);
+
+  $colorStateInProgress: var(--elder-chip-color-state-in-progress);
+  $colorStateCompleted: var(--elder-chip-color-state-completed);
+  $colorStateWarn: var(--elder-chip-color-state-warn);
+  $colorStateError: var(--elder-chip-color-state-error);
+  $colorStateOther: var(--elder-chip-color-state-other);
+
+  $level-low: $colorStateCompleted;
+  $level-medium: $colorStateInProgress;
+  $level-high: $colorStateWarn;
+  $level-critical: $colorStateError;
+
+  // light theme elder progress chip colors
+  $colorStateNoneLightContent: map.get(config.$chip-colors-dark, state-none);
+  $colorStateOpenLightContent: map.get(config.$chip-colors-dark, state-open);
+  $colorStateInProgressLightContent: map.get(config.$chip-colors-dark, state-in-progress);
+  $colorStateCompletedLightContent: map.get(config.$chip-colors-dark, state-completed);
+  $colorStateWarnLightContent: map.get(config.$chip-colors-dark, state-warn);
+  $colorStateErrorLightContent: map.get(config.$chip-colors-dark, state-error);
+  $colorStateOtherLightContent: map.get(config.$chip-colors-dark, state-other);
+
+  // map to level colors
+  $levelLowLightContent: $colorStateCompletedLightContent;
+  $levelMediumLightContent: $colorStateInProgressLightContent;
+  $levelHighLightContent: $colorStateWarnLightContent;
+  $levelCriticalLightContent: $colorStateErrorLightContent;
+
+  .mat-mdc-chip.mat-mdc-chip {
+    &.elder-chip-state-none {
+      background-color: $colorStateNone;
     }
 
     &.elder-chip-state-open,
     &.state-open {
-      @include _outlined-label-chip($colorStateOpen);
+      background-color: $colorStateOpen;
     }
 
     &.elder-chip-state-in-progress,
     &.state-in-progress {
-      @include _outlined-label-chip($colorStateInProgress);
+      background-color: $colorStateInProgress;
     }
 
     &.elder-chip-state-completed,
     &.state-completed {
-      @include _outlined-label-chip($colorStateCompleted);
+      background-color: $colorStateCompleted;
     }
 
     &.elder-chip-state-warn,
     &.state-warn {
-      @include _outlined-label-chip($colorStateWarn);
+      background-color: $colorStateWarn;
     }
 
     &.elder-chip-state-error,
     &.state-error {
-      @include _outlined-label-chip($colorStateError);
+      background-color: $colorStateError;
     }
 
     &.elder-chip-state-other,
     &.state-other {
-      @include _outlined-label-chip($colorStateOther);
+      background-color: $colorStateOther;
     }
 
     // ---
 
     &.elder-chip-level-low,
     &.level-low {
-      @include _outlined-label-chip($level-low);
+      background-color: $level-low;
     }
     &.elder-chip-level-medium,
     &.level-medium {
-      @include _outlined-label-chip($level-medium);
+      background-color: $level-medium;
     }
     &.elder-chip-level-high,
     &.level-high {
-      @include _outlined-label-chip($level-high);
+      background-color: $level-high;
     }
     &.elder-chip-level-critical,
     &.level-critical {
-      @include _outlined-label-chip($level-critical);
-    }
-
-    // &.elder-chip-state-none,
-    // &.elder-chip-state-open,
-    // &.elder-chip-state-in-progress,
-    // &.elder-chip-state-completed,
-    // &.elder-chip-state-warn,
-    // &.elder-chip-state-error,
-    // &.elder-chip-state-other,
-    // &.elder-chip-level-low,
-    // &.elder-chip-level-medium,
-    // &.elder-chip-level-high,
-    // &.elder-chip-level-critical {
-    //   color: red !important;
-    //   .mat-mdc-chip-action-label,
-    //   .mat-mdc-chip-avatar {
-    //     color: red !important;
-    //   }
-    // }
+      background-color: $level-critical;
+    }
   }
-}
 
-@mixin _theme_color_chip($color1, $color2, $color3) {
-  &.legacy {
-    background-color: $color2;
-    .mat-mdc-chip-action-label,
-    .mat-mdc-chip-avatar,
-    .mdc-evolution-chip__checkmark {
-      color: $color3;
+  &.elder-light-theme .mat-mdc-chip.mat-mdc-chip {
+    &.mat-mdc-chip-highlighted {
+      $col: map.get(config.$palettes, primary, 30);
+      @include standard-chip-content-color-variant($col);
+    }
+    &[color='primary'] {
+      $col: map.get(config.$palettes, primary, 30);
+      @include standard-chip-content-color-variant($col);
+    }
+    &[color='accent'] {
+      $col: map.get(config.$palettes, tertiary, 40);
+      @include standard-chip-content-color-variant($col);
+    }
+    &[color='warn'] {
+      $col: map.get(config.$palettes, error, 40);
+      @include standard-chip-content-color-variant($col);
     }
   }
-  &.md3 {
-    background-color: $color1;
-    border-color: $color2;
-    .mat-mdc-chip-action-label,
-    .mat-mdc-chip-avatar,
-    .mdc-evolution-chip__checkmark {
-      //color: $color2;
+
+  &.elder-dark-theme .mat-mdc-chip.mat-mdc-chip:not(.mat-mdc-chip-highlighted) {
+    // &.mat-mdc-chip-highlighted {
+    //   $col: map.get(config.$palettes, primary, 30);
+    //   @include standard-chip-content-color-variant($col);
+    // }
+    &[color='primary'] {
+      $col: map.get(config.$palettes, primary, 50);
+      @include standard-chip-content-color-variant($col);
+    }
+    &[color='accent'] {
+      $col: map.get(config.$palettes, tertiary, 50);
+      @include standard-chip-content-color-variant($col);
+    }
+    &[color='warn'] {
+      $col: map.get(config.$palettes, error, 50);
+      @include standard-chip-content-color-variant($col);
+    }
+  }
+
+  &.elder-light-theme .mat-mdc-chip.mat-mdc-chip {
+    &.elder-chip-state-none,
+    &.none {
+      @include chip-content-color-variant($colorStateNoneLightContent); // TODO
+      &.mat-mdc-chip-highlighted {
+        background-color: $colorStateNone;
+      }
+    }
+
+    &.elder-chip-state-open,
+    &.state-open {
+      @include chip-content-color-variant($colorStateOpenLightContent);
+    }
+
+    &.elder-chip-state-in-progress,
+    &.state-in-progress {
+      @include chip-content-color-variant($colorStateInProgressLightContent);
+    }
+
+    &.elder-chip-state-completed,
+    &.state-completed {
+      @include chip-content-color-variant($colorStateCompletedLightContent);
+    }
+
+    &.elder-chip-state-warn,
+    &.state-warn {
+      @include chip-content-color-variant($colorStateWarnLightContent);
+    }
+
+    &.elder-chip-state-error,
+    &.state-error {
+      @include chip-content-color-variant($colorStateErrorLightContent);
+    }
+
+    &.elder-chip-state-other,
+    &.state-other {
+      @include chip-content-color-variant($colorStateOtherLightContent);
+    }
+
+    // level -------------
+
+    &.elder-chip-level-low,
+    &.level-low {
+      @include chip-content-color-variant($levelLowLightContent);
+    }
+    &.elder-chip-level-medium,
+    &.level-medium {
+      @include chip-content-color-variant($levelMediumLightContent);
+    }
+    &.elder-chip-level-high,
+    &.level-high {
+      @include chip-content-color-variant($levelHighLightContent);
+    }
+    &.elder-chip-level-critical,
+    &.level-critical {
+      @include chip-content-color-variant($levelCriticalLightContent);
     }
   }
 }
 
-@mixin _outlined-label-chip($color1) {
-  background-color: $color1;
-  // border-color: $color1;
-  // .mat-mdc-chip-action-label,
-  // .mat-mdc-chip-avatar {
-  //   color: $color1;
-  // }
+@mixin chip-content-color-variant($color, $inverse: false) {
+  $color-dark: color.adjust($color, $lightness: -12%);
+  @if $inverse {
+    $color-dark: color.adjust($color, $lightness: 12%);
+  }
+  @include mat.chips-overrides(
+    (
+      outline-color: $color,
+      label-text-color: $color-dark,
+      with-icon-icon-color: $color-dark,
+      with-trailing-icon-trailing-icon-color: $color-dark,
+    )
+  );
 }

package/theming/components/_elder-select-theme.scss

@@ -0,0 +1,79 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+
+@mixin theme($config-or-theme) {
+  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
+  
+  // typography ----------------------------------------------------------
+  $icon-size: 16px;
+  $arrow-icon-size: 24px;
+
+  .elder-input-prefix-icon-container {
+    height: $line-height-em !important;
+    min-width: $line-height-em !important;
+  }
+
+  .elder-select-arrow {
+    width: $arrow-icon-size !important;
+    height: $arrow-icon-size !important;
+    line-height: $arrow-icon-size !important;
+    font-size: $arrow-icon-size !important;
+  }
+
+  .elder-icon-small {
+    width: $icon-size !important;
+    height: $icon-size !important;
+    line-height: $icon-size !important;
+    font-size: $icon-size !important;
+  }
+
+  // select --------------------------------------------------------------
+  .elder-select {
+    font-family: var(--md-sys-typescale-body-medium-font);
+
+    .elder-input-prefix-icon-container {
+      padding-right: 3px;
+    }
+  }
+
+  .elder-round-form-field .elder-select .elder-input-prefix-icon-container {
+    padding-left: 3px;
+  }
+
+  .elder-select-input {
+    height: $line-height-em;
+    font: inherit;
+  }
+
+  .elder-select-arrow {
+    cursor: pointer;
+  }
+
+  // multi-select --------------------------------------------------------------
+  .elder-multi-select {
+    font-family: var(--md-sys-typescale-body-medium-font);
+
+    .elder-select-input {
+      height: var(--md-sys-typescale-body-medium-line-height);
+    }
+
+    .elder-prefix-icon {
+      margin-left: 3px;
+    }
+
+    .elder-chip-input {
+      flex: 1 0 auto;
+      padding-left: 8px;
+    }
+
+    .elder-chip-input-select {
+      flex: 1 0 140px;
+      max-width: 100%;
+    }
+
+    .elder-browse-icon {
+      margin-right: 4px;
+    }
+  }
+}

package/theming/components/_elder-table-theme.scss

@@ -0,0 +1,209 @@
+@mixin theme($config-or-theme) {
+  elder-table {
+    .elder-mat-inner-table {
+      width: 100%;
+    }
+
+    .elder-table-row.dense {
+      height: 42px !important;
+    }
+
+    .elder-mat-table-container {
+      border-radius: var(--elder-border-radius-sm);
+      overflow: hidden;
+    }
+
+    /**
+      * Style for the select column
+      */
+    .mat-column-select {
+      overflow: initial;
+      min-width: 72px;
+      max-width: 5%;
+      width: 72px;
+    }
+
+    .elder-row-removing {
+      text-decoration: line-through;
+    }
+
+    .elder-row-hidden {
+      display: none;
+    }
+
+    /******************************
+      Clickable row
+      *******************************/
+
+    .elder-table-row {
+      cursor: pointer;
+    }
+
+    .elder-table-hint {
+      color: gray;
+    }
+
+    .elder-table-footer {
+      height: var(--elder-data-element-footer-height);
+    }
+
+    .elder-table-checkbox {
+      opacity: 0.25;
+      transition: opacity 0.5s ease-in-out;
+    }
+
+    .elder-table-row:hover .elder-table-checkbox {
+      opacity: 0.9;
+    }
+
+    .elder-table-checkbox-visible {
+      opacity: 1;
+    }
+
+    .elder-table-inner {
+      background-color: var(--md-sys-color-surface-container-lowest);
+    }
+
+    .elder-table-row:focus {
+      // Disable browser focus style
+      box-shadow: none;
+      outline-style: none;
+      td {
+        background-color: var(--elder-color-highlight-strong);
+        border-bottom: var(--md-sys-color-tertiary-fixed);
+      }
+    }
+    .elder-table-row.elder-table-row-activated {
+      background-color: var(--elder-color-highlight-strong);
+    }
+
+    .elder-table-row.elder-table-row-selected {
+      background-color: var(--elder-color-highlight-variant);
+    }
+
+    .elder-table-row:hover {
+      background-color: var(--elder-color-highlight-light);
+      cursor: pointer;
+    }
+
+    .elder-mat-table-flat {
+      border: var(--elder-border-light);
+    }
+
+    .elder-table {
+      background-color: var(--mat-table-background-color);
+
+      // Fix line height of paginator section
+      // Fix line height of paginator section
+      .mat-mdc-paginator {
+        .mat-mdc-form-field,
+        .mat-mdc-floating-label {
+          line-height: unset;
+        }
+
+        .mat-mdc-select {
+          line-height: unset;
+        }
+      }
+
+      $pad: 8px;
+      $pad-right: 12px;
+
+      @include _inner-table($pad, $pad-right);
+    }
+
+    .mat-mdc-row {
+      background-color: var(--md-sys-color-surface-container-lowest);
+    }
+
+    .mat-mdc-header-row {
+      background: var(--md-sys-color-surface-container-lowest) !important;
+    }
+
+    .elder-table-dense-horizontal {
+      $pad: 8px;
+      $pad-right: 4px;
+      @include _inner-table($pad, $pad-right);
+    }
+  }
+}
+
+@mixin _inner-table($pad, $pad-right) {
+  .elder-mat-inner-table.mat-mdc-table {
+    .mat-mdc-header-cell {
+      padding-left: $pad;
+      padding-right: $pad-right;
+
+      // configure automatic wrapping of too long strings
+      overflow-wrap: normal;
+      word-wrap: normal;
+      word-break: normal;
+      white-space: unset;
+      hyphens: auto;
+
+      &:first-of-type {
+        padding-left: $pad + $pad-right;
+      }
+
+      &:last-of-type {
+        padding-right: $pad; // TODO: This can lead to overflows in some cases, is there a better solution?
+
+        &[mat-sort-header]:not([arrowposition='before']) {
+          padding-right: $pad;
+        }
+      }
+
+      &[mat-sort-header] {
+        &[arrowposition='before'] {
+          padding-left: 0px;
+        }
+
+        &:not([arrowposition='before']) {
+          padding-right: $pad-right;
+        }
+      }
+
+      & > .mat-sort-header-container {
+        display: inline-flex;
+      }
+    }
+
+    .mat-mdc-cell {
+      padding-left: $pad;
+      padding-right: $pad-right;
+
+      overflow-wrap: normal;
+      word-wrap: normal;
+      word-break: normal;
+      white-space: unset;
+      hyphens: auto;
+
+      &:first-of-type {
+        padding-left: $pad + $pad-right;
+      }
+
+      &:last-of-type {
+        padding-right: $pad;
+      }
+    }
+
+    .mat-mdc-footer-cell {
+      padding-left: $pad;
+      padding-right: $pad-right;
+      font-weight: bold;
+
+      &:first-of-type {
+        padding-left: $pad + $pad-right;
+      }
+
+      &:last-of-type {
+        padding-right: $pad;
+      }
+
+      .mat-mdc-paginator {
+        margin-left: -$pad;
+        margin-right: -$pad;
+      }
+    }
+  }
+}