@elderbyte/ngx-starter 18.12.7 → 18.13.0-beta.0

package/lib/components/shell/header/elder-app-header/elder-app-header.component.d.ts

@@ -11,6 +11,7 @@ export declare class ElderAppHeaderComponent implements OnInit, OnDestroy {
      *                                                                         *
      **************************************************************************/
     icon: string;
+    svgIcon: string;
     title: string;
     subTitle: string;
     subTitleLink: string;
@@ -39,5 +40,5 @@ export declare class ElderAppHeaderComponent implements OnInit, OnDestroy {
     set color(c: ThemePalette);
     set iconColor(c: ThemePalette);
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderAppHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderAppHeaderComponent, "elder-app-header", never, { "icon": { "alias": "icon"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subTitle": { "alias": "subTitle"; "required": false; }; "subTitleLink": { "alias": "subTitleLink"; "required": false; }; "version": { "alias": "version"; "required": false; }; "color": { "alias": "color"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderAppHeaderComponent, "elder-app-header", never, { "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subTitle": { "alias": "subTitle"; "required": false; }; "subTitleLink": { "alias": "subTitleLink"; "required": false; }; "version": { "alias": "version"; "required": false; }; "color": { "alias": "color"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "18.12.7",
+  "version": "18.13.0-beta.0",
   "peerDependencies": {
     "@angular/core": "^17.0.0 || ^18.0.0",
     "@angular/common": "^17.0.0 || ^18.0.0",

package/src/lib/components/button-group/elder-button-group/elder-button-group.component.scss

@@ -1,16 +1,10 @@
 @use '@angular/material' as mat;
 
 @mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
   .elder-button-group {
     button {
       padding: 0 8px 0 8px;
-      border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
+      border: 1px solid var(--md-sys-color-outline-variant);
     }
 
     button:not(:first-child):not(:last-child) {

package/src/lib/components/card-organizer/card-stack/elder-card-stack.component.scss

@@ -1,20 +1,14 @@
 @use '@angular/material' as mat;
 
 @mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
   .card-stack {
-    background-color: mat.m2-get-color-from-palette($background, background);
+    background-color: var(--md-sys-color-surface-container);
     border-radius: 4px;
-    border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
+    border: 1px solid var(--md-sys-color-on-surface);
   }
 
   .card-list.cdk-drop-list-dragging {
-    border: 2px dashed mat.m2-get-color-from-palette($primary, default, 0.5);
+    border: 2px dashed var(--md-sys-color-primary-fixed);
   }
 }
 
@@ -89,11 +83,6 @@
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-/*
-.example-box:last-child {
-  border: none;
-}*/
-
 .card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }

package/src/lib/components/cards/elder-card/elder-card.component.scss

@@ -1,19 +1,13 @@
 @use '@angular/material' as mat;
 
 @mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
   .elder-card-title {
-    color: mat.m2-get-color-from-palette($accent, default, 1);
+    color: var(--md-sys-color-tertiary);
     font-weight: 500 !important;
   }
 
   .elder-card-subtitle {
-    color: mat.m2-get-color-from-palette($primary, default, 1);
+    color: var(--md-sys-color-primary);
   }
 }
 

package/src/lib/components/chips/_elder-chip-theme-old.scss

@@ -0,0 +1,122 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+$colorStateNone: rgb(143, 143, 143);
+$colorStateOpen: rgb(199, 199, 199);
+
+$colorStateInProgress: rgb(33, 150, 243);
+$colorStateCompleted: rgb(4, 170, 109);
+$colorStateWarn: rgb(255, 145, 0);
+$colorStateError: rgb(255, 0, 0);
+$colorStateOther: rgb(121, 73, 252);
+
+$level-low: rgb(4, 170, 109);
+$level-medium: rgb(33, 150, 243);
+$level-high: rgb(255, 145, 0);
+$level-critical: rgb(255, 0, 0);
+
+@mixin _outlined-label-chip($color) {
+  background-color: rgba($color, 0.2);
+  border-color: $color;
+  .mat-mdc-chip-action-label,
+  .mat-mdc-chip-avatar {
+    color: $color;
+  }
+}
+
+@mixin _theme_color_chip($colorPalette) {
+  &.legacy {
+    background-color: mat.m2-get-color-from-palette($colorPalette, default);
+    .mat-mdc-chip-action-label,
+    .mat-mdc-chip-avatar,
+    .mdc-evolution-chip__checkmark {
+      color: mat.m2-get-color-from-palette($colorPalette, default-contrast);
+    }
+  }
+  &.md3 {
+    // label chip
+    background-color: mat.m2-get-color-from-palette($colorPalette, default, 0.2);
+    border-color: mat.m2-get-color-from-palette($colorPalette);
+    .mat-mdc-chip-action-label,
+    .mat-mdc-chip-avatar,
+    .mdc-evolution-chip__checkmark {
+      color: mat.m2-get-color-from-palette($colorPalette);
+    }
+  }
+}
+
+@mixin theme($config-or-theme) {
+  $primary: map-get($config-or-theme, primary);
+  $accent: map-get($config-or-theme, accent);
+  $warn: map-get($config-or-theme, warn);
+
+  $color-config: mat.m2-get-color-config($config-or-theme);
+  $is-dark-theme: map.get($color-config, is-dark);
+
+  .mat-mdc-chip.elder-chip-label {
+    &.md3 {
+      border-style: solid;
+      border-width: 1px;
+    }
+
+    &.color-primary {
+      @include _theme_color_chip($primary);
+    }
+
+    &.color-accent {
+      @include _theme_color_chip($accent);
+    }
+
+    &.color-warn {
+      @include _theme_color_chip($warn);
+    }
+
+    &.none {
+      background-color: rgba($colorStateNone, 0.2);
+      border-color: $colorStateNone;
+    }
+
+    &.state-open {
+      background-color: rgba($colorStateOpen, 0.2);
+      border-color: $colorStateOpen;
+      .mat-mdc-chip-avatar {
+        color: $colorStateOpen;
+      }
+    }
+
+    &.state-in-progress {
+      @include _outlined-label-chip($colorStateInProgress);
+    }
+
+    &.state-completed {
+      @include _outlined-label-chip($colorStateCompleted);
+    }
+
+    &.state-warn {
+      @include _outlined-label-chip($colorStateWarn);
+    }
+
+    &.state-error {
+      @include _outlined-label-chip($colorStateError);
+    }
+
+    &.state-other {
+      @include _outlined-label-chip($colorStateOther);
+    }
+
+    // ---
+
+    &.level-low {
+      @include _outlined-label-chip($level-low);
+    }
+    &.level-medium {
+      @include _outlined-label-chip($level-medium);
+    }
+    &.level-high {
+      @include _outlined-label-chip($level-high);
+    }
+    &.level-critical {
+      @include _outlined-label-chip($level-critical);
+    }
+  }
+}

package/src/lib/components/chips/_elder-chip-theme.scss

@@ -15,36 +15,124 @@ $level-medium: rgb(33, 150, 243);
 $level-high: rgb(255, 145, 0);
 $level-critical: rgb(255, 0, 0);
 
-@mixin _outlined-label-chip($color) {
-  background-color: rgba($color, 0.2);
-  border-color: $color;
-  .mat-mdc-chip-action-label,
-  .mat-mdc-chip-avatar {
-    color: $color;
+@mixin theme($config-or-theme) {
+  .mat-mdc-chip.elder-chip-label {
+    --mdc-chip-elevated-container-color: rgba(143, 143, 143, 0.2);
+    background-color: var(--mdc-chip-elevated-container-color);
+
+    &.color-primary {
+      background-color: var(--md-sys-color-primary-container);
+    }
+
+    &.color-primary {
+      @include _theme_color_chip(
+        var(--md-sys-color-primary-container),
+        var(--md-sys-color-primary),
+        var(--md-sys-color-on-primary)
+      );
+    }
+
+    &.color-accent {
+      @include _theme_color_chip(
+        var(--md-sys-color-tertiary-container),
+        var(--md-sys-color-tertiary),
+        var(--md-sys-color-on-tertiary)
+      );
+    }
+
+    &.color-warn {
+      @include _theme_color_chip(
+        var(--md-sys-color-error-container),
+        var(--md-sys-color-error),
+        var(--md-sys-color-on-error)
+      );
+    }
+
+    &.none {
+      background-color: rgba($colorStateNone, 0.2);
+      border-color: $colorStateNone;
+      background-color: var(--md-sys-color-surface-variant);
+    }
+
+    &.state-open {
+      background-color: rgba($colorStateOpen, 0.2);
+      border-color: var(--md-sys-color-surface-variant);
+      .mat-mdc-chip-avatar {
+        color: var(--md-sys-color-surface-variant);
+      }
+      background-color: var(--md-sys-color-surface-container);
+    }
+
+    &.state-in-progress {
+      --mdc-chip-elevated-container-color: var(--md-sys-color-primary-container);
+      --mdc-chip-label-text-color: var(--md-sys-color-on-primary-container);
+    }
+    &.state-completed {
+      --mdc-chip-elevated-container-color: var(--mdc-chip-elevated-selected-container-color);
+      --mdc-chip-label-text-color: var(--mdc-chip-elevated-on-container-color);
+    }
+    &.state-warn {
+      --mdc-chip-elevated-container-color: var(--md-sys-color-tertiary-container);
+      --mdc-chip-label-text-color: var(--md-sys-color-tertiary-on-container);
+    }
+    &.state-error {
+      --mdc-chip-elevated-container-color: var(--md-sys-color-error-container);
+      --mdc-chip-label-text-color: var(--md-sys-color-error-on-container);
+    }
+    &.state-other {
+      --mdc-chip-elevated-container-color: var(--md-sys-color-primary-fixed-dim);
+      --mdc-chip-label-text-color: var(--md-sys-color-on-primary-fixed);
+    }
+
+    // ---
+
+    &.level-low {
+      @include _outlined-label-chip($level-low);
+    }
+    &.level-medium {
+      @include _outlined-label-chip($level-medium);
+    }
+    &.level-high {
+      @include _outlined-label-chip($level-high);
+    }
+    &.level-critical {
+      @include _outlined-label-chip($level-critical);
+    }
   }
 }
 
-@mixin _theme_color_chip($colorPalette) {
+@mixin _theme_color_chip($color1, $color2, $color3) {
   &.legacy {
-    background-color: mat.m2-get-color-from-palette($colorPalette, default);
+    background-color: $color2;
     .mat-mdc-chip-action-label,
     .mat-mdc-chip-avatar,
     .mdc-evolution-chip__checkmark {
-      color: mat.m2-get-color-from-palette($colorPalette, default-contrast);
+      color: $color3;
     }
   }
   &.md3 {
     // label chip
-    background-color: mat.m2-get-color-from-palette($colorPalette, default, 0.2);
-    border-color: mat.m2-get-color-from-palette($colorPalette);
+    //$color2: rgba($color1, 0.2);
+    background-color: $color1;
+    border-color: $color2;
     .mat-mdc-chip-action-label,
     .mat-mdc-chip-avatar,
     .mdc-evolution-chip__checkmark {
-      color: mat.m2-get-color-from-palette($colorPalette);
+      color: $color2;
     }
   }
 }
 
+@mixin _outlined-label-chip($color1) {
+  background-color: rgba($color1, 0.2);
+  border-color: $color1;
+  .mat-mdc-chip-action-label,
+  .mat-mdc-chip-avatar {
+    color: $color1;
+  }
+}
+
+/*
 @mixin theme($config-or-theme) {
   $primary: map-get($config-or-theme, primary);
   $accent: map-get($config-or-theme, accent);
@@ -120,3 +208,4 @@ $level-critical: rgb(255, 0, 0);
     }
   }
 }
+*/

package/src/lib/components/data-transfer/http-data-transfer-indicator/http-data-transfer-indicator.component.scss

@@ -1,11 +1,5 @@
 .panel {
   width: 380px;
   height: 350px;
-  // background-color: white;
   border-radius: 4px;
-  overflow: hidden;
-  box-shadow:
-    0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }

package/src/lib/components/data-transfer/http-data-transfer-overview/http-data-transfer-overview.component.scss

@@ -13,3 +13,14 @@
   min-width: 0;
   min-height: 0;
 }
+
+.elevated-card {
+  margin-top: 4px; // fix for position
+  box-shadow: var(--mat-app-elevation-shadow-level-5, none) !important;
+  background-color: var(--md-sys-color-surface-container-low) !important;
+}
+
+.toolbar-dark-bg {
+  background-color: var(--md-sys-color-surface-container);
+  border-radius: 10px;
+}

package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss

@@ -3,22 +3,16 @@
 $elder-tile-padding: 8px;
 
 @mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
   .elder-grid-container {
     border-radius: 4px;
-    background-color: mat.m2-get-color-from-palette($background, card);
   }
 
-  .elder-grid-browser {
+  mat-card:has(> .elder-grid-container) {
+    background-color: var(--md-sys-color-surface-container-lowest);
   }
 
   .elder-grid-flat {
-    border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
+    border: 1px solid var(--md-sys-color-outline-variant);
   }
 
   .elder-grid-toolbar {
@@ -37,10 +31,11 @@ $elder-tile-padding: 8px;
     width: 100%;
     height: 100%;
     cursor: pointer;
-    background-color: rgba(
-      mat.m2-get-color-from-palette($background, unselected-chip),
-      0.34
-    ); // default background
+    // background-color: rgba(
+    //   mat.get-theme-color($theme, neutral, 80),
+    //   0.34
+    // ); // default background
+    background-color: var(--md-sys-color-surface-container-low);
     text-align: left;
     transition:
       box-shadow 200ms cubic-bezier(0, 0, 0.2, 1),
@@ -48,7 +43,8 @@ $elder-tile-padding: 8px;
   }
 
   .elder-grid-tile:hover {
-    border-color: rgba(mat.m2-get-color-from-palette($primary), 0.75);
+    //border-color: rgba(var(--md-sys-color-primary), 0.75);
+    border-color: var(--md-sys-color-primary);
   }
 
   .elder-grid-tile-content:hover .elder-grid-tile-overlay {
@@ -58,28 +54,25 @@ $elder-tile-padding: 8px;
 
   .elder-grid-tile:active {
     z-index: 100;
-    box-shadow:
-      0 5px 5px -3px rgba(0, 0, 0, 0.2),
-      0 8px 10px 1px rgba(0, 0, 0, 0.14),
-      0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--mat-app-elevation-shadow-level-8);
   }
 
   .elder-grid-tile-check {
     pointer-events: auto;
     mat-icon {
-      color: mat.m2-get-color-from-palette($foreground, divider);
-      background-color: mat.m2-get-color-from-palette($background, card);
+      color: var(--md-sys-color-outline-variant);
+      background-color: var(--md-sys-color-surface);
       border-radius: 12px;
     }
 
     mat-icon.elder-selected {
-      color: mat.m2-get-color-from-palette($accent);
+      color: var(--md-sys-color-tertiary);
     }
   }
 
   .elder-grid-tile-check:hover {
     mat-icon {
-      color: mat.m2-get-color-from-palette($primary);
+      color: var(--md-sys-color-primary);
     }
   }
 }

package/src/lib/components/data-view/table/elder-table/elder-table.component.scss

@@ -4,11 +4,11 @@
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
+  $background: map-get($theme, background-color);
   $foreground: map-get($theme, foreground);
 
   .elder-table-row:hover {
-    background-color: mat.m2-get-color-from-palette($background, hover);
+    background-color: var(--md-sys-color-surface-variant);
     cursor: pointer;
   }
 
@@ -17,27 +17,28 @@
     box-shadow: none;
     outline-style: none;
     td {
-      // border-top: 1px solid mat.get-color-from-palette($accent, default);
-      background-color: mat.m2-get-color-from-palette($accent, default, 0.3);
-      border-bottom: 1px solid mat.m2-get-color-from-palette($accent, default);
+      background-color: var(
+        --md-sys-color-tertiary-fixed-dim
+      ); // 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-activated {
-    background-color: mat.m2-get-color-from-palette($accent, default, 0.2);
+    background-color: var(--md-sys-color-tertiary-fixed-dim); 
   }
 
   .elder-table-row-selected {
-    background-color: mat.m2-get-color-from-palette($primary, default, 0.1);
+    background-color: var(--md-sys-color-primary-container);
   }
 
   .elder-mat-table-flat {
-    border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
+    border: 1px solid var(--md-sys-color-outline-variant);
   }
 
   .elder-table {
-    // background-color: mat.get-color-from-palette($background, card);
-
     // Fix line height of paginator section
     .mat-mdc-paginator {
       .mat-mdc-form-field,
@@ -133,14 +134,6 @@
   }
 }
 
-.elder-table-scroll {
-  /*
-  scroll-snap-type: y mandatory;
-  scroll-padding-top: 56px;
- */
-  //height: 100%;
-}
-
 .elder-mat-inner-table {
   width: 100%;
 }

package/src/lib/components/errors/exception-detail/elder-exception-detail.component.scss

@@ -1,5 +1,4 @@
 @use '@angular/material' as mat;
-@import '../../../../../theming/elder-palettes';
 
 @mixin theme($theme) {
   .mat-mdc-form-field.mat-form-field-appearance-outline {
@@ -11,14 +10,8 @@
         white-space: pre;
         overflow-wrap: normal;
         overflow-x: scroll;
-
-        @if (map-get($theme, is-dark)) {
-          background-color: mat.m2-get-color-from-palette($elder-gold, 700);
-          color: $dark-primary-text;
-        } @else {
-          background-color: #575757;
-          color: #d0b795;
-        }
+        background-color: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
       }
     }
   }

package/src/lib/components/expand-toggle-button/elder-expand-toggle-button.component.scss

@@ -1,14 +1,8 @@
 @use '@angular/material' as mat;
 
 @mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
   .toggle-button:hover {
-    background-color: mat.m2-get-color-from-palette($accent, default, 0.1);
+    background-color: var(--md-sys-color-ternary-fixed);
     cursor: pointer;
   }
 }
@@ -20,5 +14,5 @@
   min-height: 48px;
   border-radius: 4px;
   overflow: hidden;
-  transition: background 0.5s;
+  transition: background-color 0.5s;
 }

package/src/lib/components/files/drag-n-drop/elder-drop-zone/elder-drop-zone.component.scss

@@ -4,10 +4,6 @@
 $colorStateNone: rgb(0, 0, 0);
 
 @mixin theme($config-or-theme) {
-  $primary: map-get($config-or-theme, primary);
-  $accent: map-get($config-or-theme, accent);
-  $warn: map-get($config-or-theme, warn);
-
   .elder-drop-zone {
     border: 4px dashed rgba($colorStateNone, 0.4);
     -webkit-border-radius: 8px;
@@ -16,27 +12,28 @@ $colorStateNone: rgb(0, 0, 0);
     cursor: pointer;
 
     .elder-drop-zone-icon {
-      color: mat.m2-get-color-from-palette($primary, default, 0.75);
+      color: var(--md-sys-color-primary);
+      //color: mat.m2-get-color-from-palette($primary, default, 0.75);
       font-size: 28px;
       width: 28px;
       height: 28px;
     }
 
     .elder-drop-zone-prompt {
-      color: mat.m2-get-color-from-palette($primary, default, 0.75);
+      color: var(--md-sys-color-primary);
     }
   }
 
   .elder-drop-zone.is-dragover {
-    border: 4px solid mat.m2-get-color-from-palette($accent, default, 0.4);
-    background-color: mat.m2-get-color-from-palette($accent, default, 0.25);
+    border: 4px solid var(--md-sys-color-tertiary-fixed);
+    background-color: var(--md-sys-color-tertiary);
 
     .elder-drop-zone-icon {
-      color: mat.m2-get-color-from-palette($accent, default, 0.75);
+      color: var(--md-sys-color-tertiary-fixed);
     }
 
     .elder-drop-zone-prompt {
-      color: mat.m2-get-color-from-palette($accent, default, 0.75);
+      color: var(--md-sys-color-tertiary-fixed);
     }
   }
 }

package/src/lib/components/iframes/iframe-host/iframe-host.component.scss

@@ -1,9 +1,5 @@
 @use '@angular/material' as mat;
 
-@mixin theme($theme) {
-  $primary: map-get($theme, primary);
-}
-
 .iframe {
   margin: 0;
   border: 0;