@elderbyte/ngx-starter 19.6.3 → 19.7.0

package/lib/components/badge/elder-badge/elder-badge.component.d.ts

@@ -48,6 +48,9 @@ export declare class ElderBadgeComponent {
     readonly templates$: Observable<TemplateWrapper>;
     private readonly chipTemplate$;
     private readonly chipAvatarTemplate$;
+    /**
+     * @deprecated No longer supported - has no effect
+     */
     appearance: ElderChipAppearance;
     /***************************************************************************
      *                                                                         *

package/lib/components/chips/elder-chip-label.directive.d.ts

@@ -1,57 +1,36 @@
-import { OnInit } from '@angular/core';
-import { MatChip } from '@angular/material/chips';
 import { ThemePalette } from '@angular/material/core';
 import * as i0 from "@angular/core";
-export type ElderStateColor = undefined | 'open' | 'inProgress' | 'completed' | 'warn' | 'error' | 'other';
-export type ElderLevelColor = undefined | 'low' | 'medium' | 'high' | 'critical';
+export declare const elderChipColorNames: readonly ["white", "grey", "blue", "turquoise", "green", "orange", "yellow", "red", "purple", "pink"];
+export type ElderNamedColor = (typeof elderChipColorNames)[number] | undefined;
+export declare const elderChipColorStates: readonly ["open", "inProgress", "completed", "warn", "error", "other"];
+export type ElderStateColor = (typeof elderChipColorStates)[number] | undefined;
+export declare const elderChipColorLevels: readonly ["low", "medium", "high", "critical"];
+export type ElderLevelColor = (typeof elderChipColorLevels)[number] | undefined;
 export type ElderChipAppearance = 'md3' | 'legacy';
-export declare class ElderChipLabelDirective implements OnInit {
-    private readonly matChip;
+export declare class ElderChipLabelDirective {
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
     private readonly baseClass;
-    private cssClasses;
-    private _appearance;
-    private _stateColor;
-    private _themeColor;
-    private _levelColor;
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor(matChip: MatChip);
-    ngOnInit(): void;
-    /***************************************************************************
-     *                                                                         *
-     * Host Bindings                                                           *
-     *                                                                         *
-     **************************************************************************/
-    get classes(): string;
-    /***************************************************************************
-     *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
-    set appearance(appearance: ElderChipAppearance);
-    set themeColor(themeColor: ThemePalette);
-    set stateColor(stateColor: ElderStateColor);
-    set levelColor(levelColor: ElderLevelColor);
+    readonly stateColor: import("@angular/core").InputSignal<ElderStateColor>;
+    readonly levelColor: import("@angular/core").InputSignal<ElderLevelColor>;
+    readonly namedColor: import("@angular/core").InputSignal<ElderNamedColor>;
+    readonly themeColor: import("@angular/core").InputSignal<ThemePalette>;
+    readonly cssClasses: import("@angular/core").Signal<string>;
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    private refreshClasses;
     private buildClassesString;
     private buildClasses;
     private resolveColorClass;
+    private getNamedColorClass;
     private getLevelColorClass;
     private getStateColorClass;
     private getThemeColorClass;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipLabelDirective, [{ optional: true; host: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderChipLabelDirective, "[elderChipLabel]", never, { "appearance": { "alias": "appearance"; "required": false; }; "themeColor": { "alias": "color"; "required": false; }; "stateColor": { "alias": "stateColor"; "required": false; }; "levelColor": { "alias": "levelColor"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipLabelDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderChipLabelDirective, "[elderChipLabel]", never, { "stateColor": { "alias": "stateColor"; "required": false; "isSignal": true; }; "levelColor": { "alias": "levelColor"; "required": false; "isSignal": true; }; "namedColor": { "alias": "namedColor"; "required": false; "isSignal": true; }; "themeColor": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/components/chips/elder-chips.module.d.ts

@@ -4,7 +4,7 @@ import * as i2 from "@ngx-translate/core";
 import * as i3 from "@angular/material/chips";
 import * as i4 from "@angular/cdk/a11y";
 import * as i5 from "./elder-chip-label.directive";
-export { ElderChipLabelDirective } from './elder-chip-label.directive';
+export { ElderChipLabelDirective, elderChipColorStates, elderChipColorLevels, elderChipColorNames, } from './elder-chip-label.directive';
 export declare class ElderChipsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipsModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<ElderChipsModule, never, [typeof i1.CommonModule, typeof i2.TranslateModule, typeof i3.MatChipsModule, typeof i4.A11yModule, typeof i5.ElderChipLabelDirective], [typeof i5.ElderChipLabelDirective]>;

package/lib/components/select/multi/elder-multi-select-chips/select-chip-spec.d.ts

@@ -1,5 +1,5 @@
 import { ThemePalette } from '@angular/material/core';
-import { ElderLevelColor, ElderStateColor } from '../../../chips/elder-chip-label.directive';
+import { ElderLevelColor, ElderNamedColor, ElderStateColor } from '../../../chips/elder-chip-label.directive';
 export declare class SelectChipSpecUtil {
     static readonly DefaultChipSpec: SelectChipSpec;
 }
@@ -13,6 +13,7 @@ export interface ChipColorSpec {
     themeColor?: ThemePalette;
     stateColor?: ElderStateColor;
     levelColor?: ElderLevelColor;
+    namedColor?: ElderNamedColor;
 }
 export interface ChipAvatarSpec {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "19.6.3",
+  "version": "19.7.0",
   "peerDependencies": {
     "@angular/core": "^18.0.0 || ^19.0.0",
     "@angular/common": "^18.0.0 || ^19.0.0",

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

@@ -1,16 +1,17 @@
 $elder-tile-padding: 8px;
 
 .elder-grid-tile {
-  // margin: 0 $elder-tile-padding;
   width: 100%;
   height: 100%;
   cursor: pointer;
+  overflow: hidden;
 }
 
 .elder-grid-tile-row {
   display: grid;
   align-items: start;
   justify-items: start;
+  overflow: hidden;
 
   padding: $elder-tile-padding ($elder-tile-padding * 2);
 

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

@@ -3,22 +3,16 @@
   background-color: var(--md-sys-color-surface-container-low);
   text-align: left;
   overflow: hidden;
-  transition:
-    box-shadow 200ms cubic-bezier(0, 0, 0.2, 1),
-    border 0.25s linear;
 }
 
 .elder-tile:hover {
-  //border-color: rgba(var(--md-sys-color-primary), 0.75);
-  border-color: var(--md-sys-color-primary);
+  border-color: var(--elder-color-highlight-hover);
 }
 
 .elder-tile-content {
   position: relative;
   width: 100%;
   height: 100%;
-
-  border-radius: var(--elder-pane-border-radius);
 }
 
 .elder-tile-content:hover .elder-selection-overlay {
@@ -26,11 +20,6 @@
   background-color: rgba(white, 0.08);
 }
 
-.elder-tile:active {
-  z-index: 100;
-  box-shadow: var(--elder-box-shadow-default);
-}
-
 .elder-selection-overlay {
   position: absolute;
   left: 0;
@@ -87,7 +76,8 @@
   // Disable browser focus style
   // box-shadow: color-mix(in rgb, 80%, black);
   //background-color: color-mix(in sRGB, var(--elder-color-highlight-strong) 80%, black)
-  outline: 2px solid var(--elder-color-highlight-focus);
+  border: 2px solid var(--elder-color-highlight-focus);
+  outline: none;
 
   // background-color: var(--elder-color-highlight-strong);
 }
@@ -96,13 +86,13 @@
   // Disable browser focus style
   // box-shadow: color-mix(in rgb, 80%, black);
   //background-color: color-mix(in sRGB, var(--elder-color-highlight-strong) 80%, black)
-  outline: 2px solid var(--elder-color-highlight-focus);
+  border: 2px solid var(--elder-color-highlight-focus);
   // background-color: var(--elder-color-highlight-strong);
 }
 
 .elder-tile.activated {
   // background-color: var(--elder-color-highlight-strong);
-  outline: 2px dashed var(--elder-color-highlight-focus);
+  border: 2px dashed var(--elder-color-highlight-focus);
   .elder-tile-overlay {
     // opacity: 1;
     // background-color: color-mix(in sRGB, var(--elder-color-highlight-strong), transparent 70%);

package/theming/abstracts/_elder-design-tokens.scss

@@ -124,11 +124,8 @@
     --elder-color-highlight-light: #ebebeb;
     --elder-color-highlight-variant: var(--md-sys-color-secondary-fixed);
 
-    --elder-color-highlight-focus: color-mix(
-      in sRGB,
-      var(--elder-color-highlight-strong) 80%,
-      black
-    );
+    --elder-color-highlight-focus: var(--md-sys-color-primary);
+    --elder-color-highlight-hover: color-mix(in sRGB, var(--md-sys-color-primary) 60%, white);
 
     // missing md3 color
     --md-sys-color-on-primary-fixed-dim: var(--md-sys-color-on-primary-fixed);
@@ -169,24 +166,23 @@
 
   // chip colors light
   &.elder-light-theme {
-    --elder-chip-color-state-none: #{map.get(config.$chip-colors, state-none)};
-    --elder-chip-color-state-open: #{map.get(config.$chip-colors, state-open)};
-    --elder-chip-color-state-in-progress: #{map.get(config.$chip-colors, state-in-progress)};
-    --elder-chip-color-state-completed: #{map.get(config.$chip-colors, state-completed)};
-    --elder-chip-color-state-warn: #{map.get(config.$chip-colors, state-warn)};
-    --elder-chip-color-state-error: #{map.get(config.$chip-colors, state-error)};
-    --elder-chip-color-state-other: #{map.get(config.$chip-colors, state-other)};
+    // Base colors
+    @each $key, $value in config.$named-colors {
+      --elder-named-color-#{$key}: #{$value};
+    }
+
+    // "on" (darker) variants
+    @each $key, $value in config.$named-colors-darker {
+      --elder-named-color-on-#{$key}: #{$value};
+    }
   }
 
   // chip colors dark
   &.elder-dark-theme {
-    --elder-chip-color-state-none: #{map.get(config.$chip-colors-dark, state-none)};
-    --elder-chip-color-state-open: #{map.get(config.$chip-colors-dark, state-open)};
-    --elder-chip-color-state-in-progress: #{map.get(config.$chip-colors-dark, state-in-progress)};
-    --elder-chip-color-state-completed: #{map.get(config.$chip-colors-dark, state-completed)};
-    --elder-chip-color-state-warn: #{map.get(config.$chip-colors-dark, state-warn)};
-    --elder-chip-color-state-error: #{map.get(config.$chip-colors-dark, state-error)};
-    --elder-chip-color-state-other: #{map.get(config.$chip-colors-dark, state-other)};
+    // Base colors
+    @each $key, $value in config.$named-colors-darker {
+      --elder-named-color-#{$key}: #{$value};
+    }
   }
 
   &.elder-dark-theme {
@@ -196,7 +192,7 @@
 
   &.elder-dark-theme {
     // dark theme blue
-    --md-sys-color-primary: hsl(222, 45%, 74%); // dim primary color
+    --md-sys-color-primary: hsl(222, 50%, 65%); // dim primary color
   }
 
   // dark theme overwrites
@@ -208,12 +204,6 @@
     --elder-color-highlight-strong: var(--elder-gold-semi-dark);
     --elder-color-highlight-variant: var(--elder-gold-dark);
 
-    --elder-color-highlight-focus: color-mix(
-      in sRGB,
-      var(--elder-color-highlight-strong) 70%,
-      white
-    );
-
     --md-sys-color-tertiary-container: var(--elder-gold-semi-dark);
     --md-sys-color-surface-container-highest: #181818;
     --md-sys-color-surface-container: #1e1f20;

package/theming/abstracts/_elder-scss-variables.scss

@@ -34,25 +34,24 @@ $custom-colors: (
   elder-gold-light: #f0e9d8,
 );
 
-$chip-colors: (
-  state-none: #e1e1e1,
-  state-open: #cecbca,
-  state-in-progress: #bdd5e7,
-  state-completed: #b1ddce,
-  state-warn: #f4dab8,
-  state-error: #e6b6b6,
-  state-other: #cdc7e5,
+$named-colors: (
+  'white': #e1e1e1,
+  'grey': #cecbca,
+  'blue': #bddcf3,
+  'turquoise': #b0e6ef,
+  'green': #b1ddce,
+  'orange': #f4dab8,
+  'yellow': #f3e7ad,
+  'red': #e6b6b6,
+  'purple': #cdc7e5,
+  'pink': #eec2ea,
 );
 
-$chip-colors-dark: (
-  state-none: color.adjust(map.get($chip-colors, state-none), $lightness: -45%),
-  state-open: color.adjust(map.get($chip-colors, state-open), $lightness: -45%),
-  state-in-progress: color.adjust(map.get($chip-colors, state-in-progress), $lightness: -45%),
-  state-completed: color.adjust(map.get($chip-colors, state-completed), $lightness: -45%),
-  state-warn: color.adjust(map.get($chip-colors, state-warn), $lightness: -45%),
-  state-error: color.adjust(map.get($chip-colors, state-error), $lightness: -45%),
-  state-other: color.adjust(map.get($chip-colors, state-other), $lightness: -45%),
-);
+$named-colors-darker: ();
+@each $key, $value in $named-colors {
+  $darkened: color.adjust($value, $lightness: -45%);
+  $named-colors-darker: map.set($named-colors-darker, $key, $darkened);
+}
 
 $palettes: (
   primary: (

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

@@ -2,9 +2,11 @@
 @use 'sass:color';
 @use '@angular/material' as mat;
 @use '../abstracts/elder-scss-variables' as config;
+@use 'sass:string';
 
 @mixin theme($config-or-theme) {
   @include mat-chip-fixes();
+  @include chip-theme-palette-colors();
   @include chip-colors();
 
   .elder-chip-text {
@@ -97,107 +99,25 @@
   );
 }
 
-@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;
-    }
-  }
-
+@mixin chip-theme-palette-colors {
   &.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,
     &[color='primary'] {
       $col: map.get(config.$palettes, primary, 30);
       @include standard-chip-content-color-variant($col);
     }
+
     &.color-accent,
     &[color='accent'] {
       $col: map.get(config.$palettes, tertiary, 40);
       @include standard-chip-content-color-variant($col);
     }
+
     &.color-warn,
     &[color='warn'] {
       $col: map.get(config.$palettes, error, 40);
@@ -215,89 +135,107 @@
       $col: map.get(config.$palettes, primary, 50);
       @include standard-chip-content-color-variant($col);
     }
+
     &.color-accent,
     &[color='accent'] {
       $col: map.get(config.$palettes, tertiary, 50);
       @include standard-chip-content-color-variant($col);
     }
+
     &.color-warn,
     &[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;
-      }
-    }
+@mixin chip-colors {
+  $namedColors: ();
+  @each $key, $value in config.$named-colors {
+    $namedColors: map.set($namedColors, $key, $key);
+  }
 
-    &.elder-chip-state-open,
-    &.state-open {
-      @include chip-content-color-variant($colorStateOpenLightContent);
-    }
+  // State colors and light content colors
+  $states: (
+    none: 'white',
+    open: 'grey',
+    inProgress: 'blue',
+    completed: 'green',
+    warn: 'orange',
+    error: 'red',
+    other: 'purple',
+  );
 
-    &.elder-chip-state-in-progress,
-    &.state-in-progress {
-      @include chip-content-color-variant($colorStateInProgressLightContent);
-    }
+  // Level color mapping
+  $levels: (
+    low: 'green',
+    medium: 'blue',
+    high: 'orange',
+    critical: 'red',
+  );
 
-    &.elder-chip-state-completed,
-    &.state-completed {
-      @include chip-content-color-variant($colorStateCompletedLightContent);
+  // Apply background colors for states and levels
+  .mat-mdc-chip.elder-chip-label {
+    @each $state, $color in $states {
+      &.state-#{$state} {
+        background-color: var(--elder-named-color-#{$color});
+      }
     }
 
-    &.elder-chip-state-warn,
-    &.state-warn {
-      @include chip-content-color-variant($colorStateWarnLightContent);
+    @each $level, $color in $levels {
+      &.level-#{$level} {
+        background-color: var(--elder-named-color-#{$color});
+      }
     }
 
-    &.elder-chip-state-error,
-    &.state-error {
-      @include chip-content-color-variant($colorStateErrorLightContent);
+    @each $name, $color in $namedColors {
+      &.named-color-#{$name} {
+        background-color: var(--elder-named-color-#{$name});
+      }
     }
+  }
 
-    &.elder-chip-state-other,
-    &.state-other {
-      @include chip-content-color-variant($colorStateOtherLightContent);
+  // Light theme chip content color handling
+  &.elder-light-theme .mat-mdc-chip.elder-chip-label {
+    @each $state, $color in $states {
+      &.state-#{$state} {
+        $on-color: var(--elder-named-color-on-#{$color});
+        @include chip-content-color-variant($on-color);
+      }
     }
 
-    // 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);
+    @each $level, $color in $levels {
+      &.level-#{$level} {
+        $on-color: var(--elder-named-color-on-#{$color});
+        @include chip-content-color-variant($on-color);
+      }
     }
-    &.elder-chip-level-critical,
-    &.level-critical {
-      @include chip-content-color-variant($levelCriticalLightContent);
+
+    @each $name, $color in $namedColors {
+      &.named-color-#{$name} {
+        $on-color: var(--elder-named-color-on-#{$color});
+        @include chip-content-color-variant($on-color);
+      }
     }
   }
 }
 
-@mixin chip-content-color-variant($color, $inverse: false) {
-  $color-dark: color.adjust($color, $lightness: -12%);
-  @if $inverse {
-    $color-dark: color.adjust($color, $lightness: 12%);
-  }
+@mixin chip-content-color-variant($on-color) {
+  $on-color-disabled: string.unquote('color-mix(in srgb, #FFF 12%, #{$on-color})');
   @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,
+      outline-color: $on-color,
+      label-text-color: $on-color,
+      with-icon-icon-color: $on-color,
+      selected-trailing-icon-color: $on-color,
+      with-trailing-icon-trailing-icon-color: $on-color,
+
+      // disabled-outline-color: $color-disabled,
+      disabled-label-text-color: $on-color-disabled,
+      with-icon-disabled-icon-color: $on-color-disabled,
+      with-trailing-icon-disabled-trailing-icon-color: $on-color-disabled,
+      selected-disabled-trailing-icon-color: $on-color-disabled,
     )
   );
 }