@elderbyte/ngx-starter 18.13.0-beta.1 → 18.13.0

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-color);
+  $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
   .elder-table-row:hover {
-    background-color: var(--md-sys-color-surface-container);
+    background-color: mat.m2-get-color-from-palette($background, hover);
     cursor: pointer;
   }
 
@@ -17,26 +17,27 @@
     box-shadow: none;
     outline-style: none;
     td {
-      background-color: var(--md-sys-color-primary-container); // 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);
+      // 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);
     }
   }
-  .elder-table-row.elder-table-row-activated {
-    //background-color: var(--md-sys-color-surface-dim);
-    background-color: var(--md-sys-color-primary-container);
+
+  .elder-table-row-activated {
+    background-color: mat.m2-get-color-from-palette($accent, default, 0.2);
   }
 
-  .elder-table-row.elder-table-row-selected {
-    background-color: var(--md-sys-color-primary-container);
+  .elder-table-row-selected {
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.1);
   }
 
   .elder-mat-table-flat {
-    border: 1px solid var(--md-sys-color-outline-variant);
+    border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
   }
 
   .elder-table {
+    // background-color: mat.get-color-from-palette($background, card);
+
     // Fix line height of paginator section
     .mat-mdc-paginator {
       .mat-mdc-form-field,
@@ -132,6 +133,14 @@
   }
 }
 
+.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,4 +1,5 @@
 @use '@angular/material' as mat;
+@import '../../../../../theming/elder-palettes';
 
 @mixin theme($theme) {
   .mat-mdc-form-field.mat-form-field-appearance-outline {
@@ -10,8 +11,14 @@
         white-space: pre;
         overflow-wrap: normal;
         overflow-x: scroll;
-        background-color: var(--md-sys-color-secondary-container);
-        color: var(--md-sys-color-on-secondary-container);
+
+        @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;
+        }
       }
     }
   }

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

@@ -1,8 +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);
+
   .toggle-button:hover {
-    background-color: var(--md-sys-color-ternary-fixed);
+    background-color: mat.m2-get-color-from-palette($accent, default, 0.1);
     cursor: pointer;
   }
 }
@@ -14,5 +20,5 @@
   min-height: 48px;
   border-radius: 4px;
   overflow: hidden;
-  transition: background-color 0.5s;
+  transition: background 0.5s;
 }

package/src/lib/components/files/blob-viewer/elder-blob-viewer.component.scss

@@ -3,8 +3,8 @@
 }
 
 .document-viewer {
-  background-color: var(--md-sys-color-surface-dim);
-  color: var(--md-sys-color-on-surface);
+  background-color: #dedede;
+  color: #1f1e1e;
 }
 
 .video {
@@ -32,14 +32,19 @@
 .document-content {
   font-family: Courier, monospace;
   font-size: 14px;
-  background-color: var(--md-sys-color-inverse-surface);
-  color: var(--md-sys-color-inverse-on-surface);
+  background-color: #575757;
+  color: #cccccc;
   outline: none;
   resize: none;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+
+  -webkit-border-radius: 12px;
   border-radius: 0px;
+  -webkit-box-shadow: 0px 2px 14px #000;
   box-shadow: 0px 2px 14px #000;
   border-top: 1px solid #fff;
   border-bottom: 1px solid #fff;

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

@@ -4,6 +4,10 @@
 $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;
@@ -12,28 +16,27 @@ $colorStateNone: rgb(0, 0, 0);
     cursor: pointer;
 
     .elder-drop-zone-icon {
-      color: var(--md-sys-color-primary);
-      //color: mat.m2-get-color-from-palette($primary, default, 0.75);
+      color: mat.m2-get-color-from-palette($primary, default, 0.75);
       font-size: 28px;
       width: 28px;
       height: 28px;
     }
 
     .elder-drop-zone-prompt {
-      color: var(--md-sys-color-primary);
+      color: mat.m2-get-color-from-palette($primary, default, 0.75);
     }
   }
 
   .elder-drop-zone.is-dragover {
-    border: 4px solid var(--md-sys-color-tertiary-fixed);
-    background-color: var(--md-sys-color-tertiary);
+    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);
 
     .elder-drop-zone-icon {
-      color: var(--md-sys-color-tertiary-fixed);
+      color: mat.m2-get-color-from-palette($accent, default, 0.75);
     }
 
     .elder-drop-zone-prompt {
-      color: var(--md-sys-color-tertiary-fixed);
+      color: mat.m2-get-color-from-palette($accent, default, 0.75);
     }
   }
 }

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

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

package/src/lib/components/navigation/nav/_elder-nav-theme.scss

@@ -6,34 +6,46 @@
 }
 
 @mixin _group-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);
+
   .nav-group-button:hover {
-    background-color: var(--md-sys-color-surface-container-high);
-    transition: background-color 0.5s;
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.1);
+    transition: background 0.5s;
   }
 
   .nav-group-button:not(.nav-group-button-open) {
     .mat-icon {
-      color: var(--md-sys-color-on-surface);
+      color: mat.m2-get-color-from-palette($foreground, secondary-text);
     }
   }
 
   .nav-group-button-active {
-    background-color: var(--md-sys-color-primary-fixed);
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.15);
   }
 
   .nav-group-button-open {
     padding-left: 11px !important; // -5 to counter border-left
     .mat-icon {
-      color: var(--md-sys-color-primary);
+      color: mat.m2-get-color-from-palette($primary);
     }
   }
 }
 
 @mixin _link-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);
+
   .nav-link.nav-link-clickable {
     cursor: pointer;
     &:hover {
-      background-color: var(--md-sys-color-surface-container-high);
+      background-color: mat.m2-get-color-from-palette($primary, default, 0.1);
     }
   }
 
@@ -42,21 +54,21 @@
   }
 
   .nav-link:hover {
-    background-color: var(--md-sys-color-primary-fixed);
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.05);
   }
 
   .nav-link.nav-link-active {
-    background-color: var(--md-sys-color-primary-fixed);
-    color: var(--md-sys-color-on-primary-fixed);
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.15);
+    color: mat.m2-get-color-from-palette($primary);
     .mat-icon {
-      color: var(--md-sys-color-primary);
+      color: mat.m2-get-color-from-palette($primary);
     }
   }
 
   .nav-link.nav-link-inactive {
-    color: var(--md-sys-color-on-surface);
+    color: mat.m2-get-color-from-palette($foreground, text);
     .mat-icon {
-      color: var(--md-sys-color-on-surface);
+      color: mat.m2-get-color-from-palette($foreground, secondary-text);
     }
   }
 }

package/src/lib/components/page/exit-guard/page-exit-lock-indicator/page-exit-lock-indicator.component.scss

@@ -3,5 +3,8 @@
   height: 250px;
   border-radius: 4px;
   overflow: hidden;
-  box-shadow: var(--mat-app-elevation-shadow-level-8);
+  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/panels/card-panel/elder-card-panel.component.scss

@@ -1,12 +1,21 @@
 @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-panel {
-    color: var(--md-sys-color-on-surface);
-    background-color: var(--md-sys-color-surface);
+    color: mat.m2-get-color-from-palette($foreground, text);
+    background-color: mat.m2-get-color-from-palette($background, 'card');
 
     padding: 10px;
     border-radius: 4px;
-    box-shadow: var(--mat-app-elevation-shadow-level-8);
+    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/panels/elder-dialog-panel/elder-dialog-panel.component.scss

@@ -1,13 +1,21 @@
 @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-dialog-panel {
-    // Use CSS variables for Material 3
-    background-color: var(--md-sys-color-surface);
-    color: var(--md-sys-color-on-surface);
+    color: mat.m2-get-color-from-palette($foreground, text);
+    background-color: mat.m2-get-color-from-palette($background, dialog);
 
     padding: 10px;
     border-radius: 4px;
-    box-shadow: var(--mat-app-elevation-shadow-level-8);
+    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/panels/flat/_elder-panel-theme.scss

@@ -1,13 +1,8 @@
 @use '@angular/material' as mat;
 
-@mixin _elder-panel-color($palette, $theme) {
-  @if (mat.get-theme-version($theme) == 1) {
-    background: var(--md-sys-color-primary-container);
-    color: var(--md-sys-color-on-primary-container);
-  } @else {
-    $background: mat.m2-get-color-from-palette($palette, app-bar);
-    $foreground: mat.m2-get-color-from-palette($palette, text);
-  }
+@mixin _elder-panel-color($palette) {
+  background: mat.m2-get-color-from-palette($palette);
+  color: mat.m2-get-color-from-palette($palette, default-contrast);
 }
 
 @mixin _elder-panel-form-field-overrides {
@@ -39,29 +34,23 @@
   $foreground: map-get($theme, foreground);
 
   .mat-panel {
-    @if (mat.get-theme-version($theme) == 1) {
-      background: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    } @else {
-      background: mat.m2-get-color-from-palette($background, app-bar);
-      color: mat.m2-get-color-from-palette($foreground, text);
-    }
+    background: mat.m2-get-color-from-palette($background, app-bar);
+    color: mat.m2-get-color-from-palette($foreground, text);
     transition: background 0.5s;
 
     &.mat-primary {
-      @include _elder-panel-color($primary, $theme);
+      @include _elder-panel-color($primary);
     }
 
     &.mat-accent {
-      @include _elder-panel-color($accent, $theme);
+      @include _elder-panel-color($accent);
     }
 
     &.mat-warn {
-      @include _elder-panel-color($warn, $theme);
+      @include _elder-panel-color($warn);
     }
 
     @include _elder-panel-form-field-overrides;
-    @include elder-panel-typography($theme);
   }
 }
 
@@ -73,13 +62,7 @@
   .mat-panel h4,
   .mat-panel h5,
   .mat-panel h6 {
-    // @include mat.m2-typography-level($config, title);
-    // margin: 0;
-
-    // Set typography styles for different heading levels
-    font-family: var(--mdc-typography-font-family); // Use the MDC font family variable
-
-    //@include mat.typography($config, headline-2); // try, debug disabled
+    @include mat.m2-typography-level($config, title);
     margin: 0;
   }
 }

package/src/lib/components/select/_elder-select-base.scss

@@ -1,9 +1,14 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use '../../../../theming/elder-typography-utils' as elder-typography;
+@use '../../../../theming/mat-icon-button-size' as icon-button-size;
 
 @mixin typography($typography-config) {
-  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
+  $config: $typography-config; // TODO $typography-config
+  // The unit-less line-height from the font config.
+  $line-height: mat.m2-line-height($config, body-1);
+  $font-size: mat.m2-font-size($config, body-1);
+  $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
 
   $icon-size: 16px;
   $arrow-icon-size: 24px;
@@ -27,3 +32,6 @@
     font-size: $icon-size !important;
   }
 }
+
+@mixin color($color-config) {
+}

package/src/lib/components/select/filter/elder-filter-chip-template/elder-filter-chip-template.component.scss

@@ -80,7 +80,10 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   // border-radius: 4px;
-  box-shadow: var(--mat-app-elevation-shadow-level-8);
+  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);
 }
 
 .cdk-drag-placeholder {

package/src/lib/components/select/multi/elder-multi-select-chip-options/elder-multi-select-chip-options.component.scss

@@ -4,13 +4,19 @@
 @use '../../elder-select-base' 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.m2-line-height($config, body-1);
+  $font-size: mat.m2-font-size($config, body-1);
+  $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
+
   @include elder-select-base.typography($typography-config);
 
   .elder-multi-select {
-    font-family: var(--md-sys-typescale-body-medium-font);
+    font-family: mat.m2-font-family($config);
 
     .elder-select-input {
-      height: var(--md-sys-typescale-body-medium-line-height);
+      height: $line-height-em;
     }
 
     .elder-prefix-icon {
@@ -34,16 +40,39 @@
 }
 
 @mixin theme($config-or-theme) {
-  @include typography($config-or-theme);
+  $color: mat.m2-get-color-config($config-or-theme);
+  $typography: elder-typography.get-typography-config($config-or-theme);
+
+  // If no actual typography configuration has been specified, create a default one.
+  @if not $typography {
+    $typography: mat.m2-define-typography-config();
+  }
 
-  .elder-chip-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  @if $color != null {
+    @include elder-select-base.color($color);
+    @include _chip_color($config-or-theme);
   }
 
-  .elder-trailing-icon {
-    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
-    opacity: 0.54;
+  @if $typography != null {
+    @include typography($typography);
   }
 }
+
+@mixin _chip_color($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-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/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.scss

@@ -4,13 +4,19 @@
 @use '../../elder-select-base' 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.m2-line-height($config, body-1);
+  $font-size: mat.m2-font-size($config, body-1);
+  $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
+
   @include elder-select-base.typography($typography-config);
 
   .elder-multi-select {
-    font-family: var(--md-sys-typescale-body-medium-font);
+    font-family: mat.m2-font-family($config);
 
     .elder-select-input {
-      height: var(--md-sys-typescale-body-medium-line-height);
+      height: $line-height-em;
     }
 
     .elder-prefix-icon {
@@ -34,29 +40,56 @@
 }
 
 @mixin theme($config-or-theme) {
-  @include typography($config-or-theme);
+  $color: mat.m2-get-color-config($config-or-theme);
+  $typography: elder-typography.get-typography-config($config-or-theme);
 
-  .elder-chip-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  // If no actual typography configuration has been specified, create a default one.
+  @if not $typography {
+    $typography: mat.m2-define-typography-config();
   }
 
-  .elder-trailing-icon {
-    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
-    opacity: 0.54;
+  @if $color != null {
+    @include elder-select-base.color($color);
+    @include _chip_color($config-or-theme);
   }
 
-  .cdk-drag-preview {
-    box-sizing: border-box;
-    box-shadow: var(--mat-app-elevation-shadow-level-8);
+  @if $typography != null {
+    @include typography($typography);
   }
+}
 
-  .cdk-drag-placeholder {
-    opacity: 0;
-  }
+@mixin _chip_color($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);
+}
 
-  .cdk-drag-animating {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-  }
+.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-sizing: border-box;
+  // border-radius: 4px;
+  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);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }