@elderbyte/ngx-starter 19.1.0-beta.2 → 19.1.0-beta.20

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

@@ -0,0 +1,79 @@
+// @use 'sass:map';
+// @use '@angular/material' as mat;
+// @use './elder-select-base-mixin' as elder-select-base;
+
+
+// @mixin typography($typography-config) {
+//   $config: $typography-config; // TODO $typography-config
+//   // The unit-less line-height from the font config.
+//   $line-height: mat.line-height($config, body-1);
+//   $font-size: mat.font-size($config, body-1);
+//   $line-height-em: var(--md-sys-typescale-body-medium-line-height);
+
+//   @include elder-select-base.typography($typography-config);
+
+//   .elder-multi-select {
+//     font-family: mat.font-family($config);
+
+//     .elder-select-input {
+//       height: $line-height-em;
+//     }
+
+//     .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;
+//     }
+//   }
+// }
+
+@mixin theme($config-or-theme) {
+  // $color: mat.get-color-config($config-or-theme);
+
+  // $typography: mat.define-typography-config();
+
+  // @if $color != null {
+  //   @include elder-select-base.color($color);
+  // }
+
+  // @if $typography != null {
+  //   @include typography($typography);
+  // }
+
+  .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;
+  }
+
+  .cdk-drag-preview {
+    // border-radius: var(--elder-border-radius-sm);
+    box-shadow: var(--elder-box-shadow-default);
+  }
+
+  .cdk-drag-placeholder {
+    opacity: 0;
+  }
+
+  .cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+}

package/theming/components/_elder-multi-select-chip-options-theme.scss

@@ -0,0 +1,48 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './elder-select-base-mixin' as elder-select-base;
+
+@mixin typography($typography-config) {
+  @include elder-select-base.typography($typography-config);
+
+  .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;
+    }
+  }
+}
+
+@mixin theme($config-or-theme) {
+  @include typography($config-or-theme);
+
+  .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;
+  }
+}

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

@@ -0,0 +1,60 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './elder-select-base-mixin' as elder-select-base;
+
+@mixin typography($typography-config) {
+  @include elder-select-base.typography($typography-config);
+
+  .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;
+    }
+  }
+}
+
+@mixin theme($config-or-theme) {
+  @include typography($config-or-theme);
+
+  .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;
+  }
+
+  .cdk-drag-preview {
+    box-shadow: var(--elder-box-shadow-default);
+  }
+
+  .cdk-drag-placeholder {
+    opacity: 0;
+  }
+
+  .cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+}

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

@@ -0,0 +1,24 @@
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    .nav-link-active {
+      color: var(--md-sys-color-primary) !important;
+    }
+  }
+
+  &.elder-light-theme .elder-main-nav-panel {
+    background-color: var(--md-sys-color-surface); // main nav bg color
+  }
+
+  &.elder-dark-theme {
+    .elder-main-nav-panel {
+      background-color: var(--md-sys-color-surface-container-high); // main nav bg color
+    }
+    .nav-link:hover,
+    .nav-group-button:hover {
+      background-color: var(--md-sys-color-surface-container) !important;
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './elder-select-base-mixin' as elder-select-base;
+
+@mixin typography($config-or-theme) {
+  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
+
+  @include elder-select-base.typography($config-or-theme);
+
+  .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;
+  }
+}
+
+@mixin theme($config-or-theme) {
+  // @debug mat.get-theme-typography($config-or-theme, body-medium, line-height);
+  // @debug mat.get-theme-typography($config-or-theme, body-medium, font-family);
+  @include typography($config-or-theme);
+
+  @keyframes shrink {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0.75);
+    }
+  }
+
+  .loading {
+    animation: shrink 0.3s ease-in-out infinite alternate;
+    -webkit-animation: shrink 0.3s ease-in-out infinite alternate;
+  }
+
+  .clickable-icon {
+    cursor: pointer;
+  }
+
+  .full-width {
+    width: 100%;
+  }
+
+  .elder-select-dropdown-input {
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,213 @@
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  .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;
+  }
+
+  /** https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 **/
+  // firefox-scroll-fix
+  :host {
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .elder-table-hint {
+    color: gray;
+  }
+
+  .elder-table-footer {
+    height: var(--elder-data-element-footer-height);
+  }
+
+  .elder-table-checkbox {
+    opacity: 0.25;
+
+    -webkit-transition: opacity 0.5s ease-in-out;
+    -moz-transition: opacity 0.5s ease-in-out;
+    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
+      ); // OLD: background-color: mat.m2-get-color-from-palette($accent, default, 0.3);
+      border-bottom: var(
+        --md-sys-color-tertiary-fixed
+      ); // OLD: border-bottom: 1px solid mat.m2-get-color-from-palette($accent, default);
+    }
+  }
+  .elder-table-row.elder-table-row-activated {
+    //background-color: var(--md-sys-color-surface-dim);
+    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
+    .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;
+
+    .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;
+        }
+      }
+    }
+  }
+
+  .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;
+  }
+}

package/theming/components/_legacy-elder-chip-theme.scss

@@ -0,0 +1,119 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../abstracts/elder-scss-variables' as config;
+
+$colorStateNone: var(--md-sys-color-surface-variant);
+$colorStateOpen: var(--md-sys-color-surface-variant);
+
+$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;
+
+@mixin theme($config-or-theme) {
+  .mat-mdc-chip.mat-mdc-chip {
+    --mdc-chip-elevated-container-color: $colorStateNone;
+    background-color: $colorStateNone;
+
+    &.elder-chip-color-primary,
+    &.color-primary {
+      background-color: var(--md-sys-color-primary-container);
+    }
+
+    &.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)
+      );
+    }
+
+    &.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)
+      );
+    }
+
+    &.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)
+      );
+    }
+
+    &.elder-chip-state-none,
+    &.none {
+      @include _outlined-label-chip($colorStateNone);
+    }
+
+    &.elder-chip-state-open,
+    &.state-open {
+      @include _outlined-label-chip($colorStateOpen);
+    }
+
+    &.elder-chip-state-in-progress,
+    &.state-in-progress {
+      @include _outlined-label-chip($colorStateInProgress);
+    }
+
+    &.elder-chip-state-completed,
+    &.state-completed {
+      @include _outlined-label-chip($colorStateCompleted);
+    }
+
+    &.elder-chip-state-warn,
+    &.state-warn {
+      @include _outlined-label-chip($colorStateWarn);
+    }
+
+    &.elder-chip-state-error,
+    &.state-error {
+      @include _outlined-label-chip($colorStateError);
+    }
+
+    &.elder-chip-state-other,
+    &.state-other {
+      @include _outlined-label-chip($colorStateOther);
+    }
+
+    // ---
+
+    &.elder-chip-level-low,
+    &.level-low {
+      @include _outlined-label-chip($level-low);
+    }
+    &.elder-chip-level-medium,
+    &.level-medium {
+      @include _outlined-label-chip($level-medium);
+    }
+    &.elder-chip-level-high,
+    &.level-high {
+      @include _outlined-label-chip($level-high);
+    }
+    &.elder-chip-level-critical,
+    &.level-critical {
+      @include _outlined-label-chip($level-critical);
+    }
+  }
+  &.elder-light-theme .mat-warn.mat-mdc-standard-chip {
+    --mdc-chip-label-text-color: var(--md-sys-color-error);
+    --mdc-chip-with-icon-icon-color: var(--mdc-chip-label-text-color);
+  }
+}
+
+@mixin _outlined-label-chip($color1) {
+  background-color: $color1;
+}

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),
@@ -53,12 +53,12 @@
 
   // background colors
   @each $name, $value in $color-variables {
-    .elder-bg-#{$name} {
+    .bg-#{$name} {
       background-color: #{$value};
     }
   }
 
-  .elder-bg-transparent {
+  .bg-transparent {
     background-color: transparent;
   }
 
@@ -69,13 +69,6 @@
     }
   }
 
-  // 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);
   }

package/theming/utilities/_elder-common-utils.scss

@@ -0,0 +1,17 @@
+@mixin elder-common-utils() {
+    .border-none {
+        border: none;
+    }
+    .display-none {
+        display: none;
+    }
+    .text-center {
+        text-align: center;
+    }
+    .overflow-hidden {
+        overflow: hidden;
+    }
+    .overflow-auto {
+        overflow: auto;
+    }
+}