@elderbyte/ngx-starter 19.1.0-beta.3 → 19.1.0-beta.30

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

@@ -0,0 +1,297 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '@angular/material' as mat;
+@use '../abstracts/elder-scss-variables' as config;
+
+@mixin theme($config-or-theme) {
+  @include mat-chip-fixes();
+  @include chip-colors();
+
+  .elder-chip-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .elder-trailing-icon {
+    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
+    opacity: 0.54;
+  }
+}
+
+@mixin mat-chip-fixes {
+  /******************************
+  Material Chip fix
+  *******************************/
+
+  .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;
+      }
+
+      img {
+        width: 18px;
+        height: 18px;
+        overflow: hidden;
+        border-radius: 9px;
+      }
+    }
+  }
+
+  /******************************
+  Material chip make regular chips clickable when applying this class
+  *******************************/
+
+  .clickable-chip {
+    .mat-mdc-chip-action {
+      cursor: pointer;
+    }
+  }
+
+  /******************************
+  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;
+      }
+    }
+  }
+}
+
+@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 {
+      background-color: $colorStateOpen;
+    }
+
+    &.elder-chip-state-in-progress,
+    &.state-in-progress {
+      background-color: $colorStateInProgress;
+    }
+
+    &.elder-chip-state-completed,
+    &.state-completed {
+      background-color: $colorStateCompleted;
+    }
+
+    &.elder-chip-state-warn,
+    &.state-warn {
+      background-color: $colorStateWarn;
+    }
+
+    &.elder-chip-state-error,
+    &.state-error {
+      background-color: $colorStateError;
+    }
+
+    &.elder-chip-state-other,
+    &.state-other {
+      background-color: $colorStateOther;
+    }
+
+    // ---
+
+    &.elder-chip-level-low,
+    &.level-low {
+      background-color: $level-low;
+    }
+    &.elder-chip-level-medium,
+    &.level-medium {
+      background-color: $level-medium;
+    }
+    &.elder-chip-level-high,
+    &.level-high {
+      background-color: $level-high;
+    }
+    &.elder-chip-level-critical,
+    &.level-critical {
+      background-color: $level-critical;
+    }
+  }
+
+  &.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);
+    }
+  }
+
+  &.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 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,75 @@
+@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-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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+@mixin theme($config-or-theme) {
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    .mat-toolbar {
+      &.mat-primary {
+        --mat-toolbar-container-text-color: var(--md-sys-color-on-primary);
+        --mat-toolbar-container-background-color: var(--md-sys-color-primary);
+        .mat-mdc-icon-button {
+          color: var(--md-sys-color-on-primary);
+        }
+      }
+      &.mat-accent {
+        --mat-toolbar-container-text-color: var(--md-sys-color-on-tertiary);
+        --mat-toolbar-container-background-color: var(--md-sys-color-tertiary);
+        .mat-mdc-icon-button {
+          color: var(--md-sys-color-on-tertiary);
+        }
+      }
+    }
+
+    .mat-toolbar.elder-toolbar-main-nav-button-container {
+      &.mat-primary,
+      &.mat-accent {
+        background-color: var(--elder-toolbar-main-nav-button-container-bg-color);
+
+        .mat-mdc-icon-button {
+          color: var(--elder-toolbar-main-nav-button-color);
+        }
+      }
+    }
+  }
+
+  &.elder-light-theme {
+    .mat-toolbar.mat-primary .mat-mdc-input-element::placeholder {
+      color: var(--md-sys-color-inverse-on-surface) !important; // fix placeholder color
+    }
+  }
+
+  &.elder-dark-theme {
+    .mat-toolbar {
+      * {
+        color: var(--md-sys-color-on-surface) !important;
+      }
+      .elder-toolbar-main-nav-button .mat-icon {
+        color: var(--md-sys-color-primary) !important;
+      }
+    }
+    .mat-toolbar {
+      background-color: var(--elder-dark-gray) !important;
+    }
+    .mat-toolbar.mat-primary {
+      background-color: var(--md-sys-color-secondary-container) !important;
+    }
+    .mat-toolbar.mat-accent {
+      background-color: var(--elder-color-highlight-variant) !important;
+    }
+
+    elder-app-header .elder-panel {
+      color: var(--md-sys-color-on-surface) !important;
+    }
+
+    // .mat-toolbar,
+    // .mat-toolbar.mat-primary,
+    // .mat-toolbar.mat-accent {
+    //   background-color: var(--md-sys-color-secondary-container) !important;
+    // }
+    .elder-main-toolbar {
+      .mat-toolbar,
+      .mat-toolbar.mat-primary,
+      .mat-toolbar.mat-accent {
+        background-color: var(--elder-dark-gray) !important;
+      }
+    }
+  }
+}

package/theming/{utility-classes/_elder-color-helpers.scss → utilities/_elder-color-utils.scss}

@@ -1,4 +1,4 @@
-@mixin elder-color-helpers() {
+@mixin elder-color-utils() {
   $color-variables: (
     'background': var(--md-sys-color-background),
     'error': var(--md-sys-color-error),
@@ -52,13 +52,17 @@
   );
 
   // background colors
+  .elder-pane-bg-color {
+    background-color: var(--elder-pane-bg-color);
+  }
+
   @each $name, $value in $color-variables {
-    .elder-bg-#{$name} {
+    .bg-#{$name} {
       background-color: #{$value};
     }
   }
 
-  .elder-bg-transparent {
+  .bg-transparent {
     background-color: transparent;
   }
 
@@ -68,15 +72,4 @@
       color: #{$value};
     }
   }
-
-  // border colors
-  @each $name, $value in $color-variables {
-    .elder-border-#{$name} {
-      border-color: #{$value};
-    }
-  }
-
-  .elder-pane-bg-color {
-    background-color: var(--elder-pane-bg-color);
-  }
 }