@elderbyte/ngx-starter 15.5.2 → 15.6.0

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

@@ -1,9 +1,11 @@
+import { OnInit } from '@angular/core';
 import { MatChip } from '@angular/material/chips';
 import { ThemePalette } from '@angular/material/core';
 import * as i0 from "@angular/core";
-export declare type ElderStateColor = 'none' | 'open' | 'inProgress' | 'completed' | 'warn' | 'error' | 'other';
+export declare type ElderStateColor = undefined | 'open' | 'inProgress' | 'completed' | 'warn' | 'error' | 'other';
+export declare type ElderLevelColor = undefined | 'low' | 'medium' | 'high' | 'critical';
 export declare type ElderChipAppearance = 'md3' | 'legacy';
-export declare class ElderChipLabelDirective {
+export declare class ElderChipLabelDirective implements OnInit {
     private readonly matChip;
     /***************************************************************************
      *                                                                         *
@@ -11,30 +13,45 @@ export declare class ElderChipLabelDirective {
      *                                                                         *
      **************************************************************************/
     private readonly baseClass;
-    themeColor: ThemePalette;
-    stateColor: ElderStateColor;
-    appearance: ElderChipAppearance;
+    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);
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
+    private refreshClasses;
     private buildClassesString;
-    private getAppearanceClass;
+    private buildClasses;
+    private resolveColorClass;
+    private getLevelColorClass;
     private getStateColorClass;
     private getThemeColorClass;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipLabelDirective, [{ optional: true; host: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderChipLabelDirective, "[elderChipLabel]", never, { "themeColor": "color"; "stateColor": "stateColor"; "appearance": "appearance"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderChipLabelDirective, "[elderChipLabel]", never, { "appearance": "appearance"; "themeColor": "color"; "stateColor": "stateColor"; "levelColor": "levelColor"; }, {}, never, never, false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "15.5.2",
+  "version": "15.6.0",
   "peerDependencies": {
     "@angular/core": "^15.0.0 || ^16.0.0",
     "@angular/common": "^15.0.0 || ^16.0.0",

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

@@ -0,0 +1,124 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '@material/theme/theme-color' as mdc-theme-color;
+
+$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.get-color-from-palette($colorPalette, default);
+    .mat-mdc-chip-action-label,
+    .mat-mdc-chip-avatar {
+      color: mat.get-color-from-palette($colorPalette, default-contrast);
+    }
+  }
+  &.md3 { // label chip
+    background-color: mat.get-color-from-palette($colorPalette, default, 0.2);
+    border-color: mat.get-color-from-palette($colorPalette);
+    .mat-mdc-chip-action-label,
+    .mat-mdc-chip-avatar {
+      color: mat.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.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/theming/_elder-flex-layout.scss

@@ -172,15 +172,15 @@ $media: (
    **************************************************************************/
 
   .layout-col, .layout-row {
-    &.wrap {
+    .wrap {
       flex-wrap: wrap;
     }
 
-    &.wrap-reverse {
+    .wrap-reverse {
       flex-wrap: wrap-reverse;
     }
 
-    &.nowrap {
+    .nowrap {
       flex-wrap: nowrap;
     }
   }

package/theming/_elder-chip-theme.scss

@@ -1,147 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '@material/theme/theme-color' as mdc-theme-color;
-
-$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);
-
-@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.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 {
-      &.legacy {
-        background-color: mat.get-color-from-palette($primary, default);
-        .mat-mdc-chip-action-label,
-        .mat-mdc-chip-avatar {
-          color: mat.get-color-from-palette($primary, default-contrast);
-        }
-      }
-      &.md3 {
-        background-color: mat.get-color-from-palette($primary, default, 0.2);
-        border-color: mat.get-color-from-palette($primary);
-        .mat-mdc-chip-action-label,
-        .mat-mdc-chip-avatar {
-          color: mat.get-color-from-palette($primary);
-        }
-      }
-    }
-
-    &.color-accent {
-      &.legacy {
-        background-color: mat.get-color-from-palette($accent, default);
-        .mat-mdc-chip-action-label,
-        .mat-mdc-chip-avatar {
-          color: mat.get-color-from-palette($accent, default-contrast);
-        }
-      }
-      &.md3 {
-        background-color: mat.get-color-from-palette($accent, default, 0.2);
-        border-color: mat.get-color-from-palette($accent);
-        .mat-mdc-chip-action-label,
-        .mat-mdc-chip-avatar {
-          color: if(
-              $is-dark-theme,
-              mat.get-color-from-palette($accent),
-              mat.get-color-from-palette($accent, 700) // make color a little darker in case of light-mode
-          );
-        }
-      }
-
-    }
-
-    &.color-warn {
-      &.legacy {
-        background-color: mat.get-color-from-palette($warn, default);
-        .mat-mdc-chip-action-label,
-        .mat-mdc-chip-avatar {
-          color: mat.get-color-from-palette($warn, default-contrast);
-        }
-      }
-      &.md3 {
-        background-color: mat.get-color-from-palette($warn, default, 0.2);
-        border-color: mat.get-color-from-palette($warn);
-        .mat-mdc-chip-action-label,
-        .mat-mdc-chip-avatar {
-          color: mat.get-color-from-palette($warn);
-        }
-      }
-    }
-
-    &.state-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 {
-      background-color: rgba($colorStateInProgress, 0.2);
-      border-color: $colorStateInProgress;
-      .mat-mdc-chip-action-label,
-      .mat-mdc-chip-avatar {
-        color: $colorStateInProgress
-      }
-    }
-
-    &.state-completed {
-      background-color: rgba($colorStateCompleted, 0.2);
-      border-color: $colorStateCompleted;
-      .mat-mdc-chip-action-label,
-      .mat-mdc-chip-avatar{
-        color: $colorStateCompleted;
-      }
-    }
-
-    &.state-warn {
-      background-color: rgba($colorStateWarn, 0.2);
-      border-color: $colorStateWarn;
-      .mat-mdc-chip-action-label,
-      .mat-mdc-chip-avatar{
-        color: $colorStateWarn;
-      }
-    }
-
-    &.state-error {
-      background-color: rgba($colorStateError, 0.2);
-      border-color: $colorStateError;
-      .mat-mdc-chip-action-label,
-      .mat-mdc-chip-avatar{
-        color: $colorStateError;
-      }
-    }
-
-    &.state-other {
-      background-color: rgba($colorStateOther, 0.2);
-      border-color: $colorStateOther;
-      .mat-mdc-chip-action-label,
-      .mat-mdc-chip-avatar{
-        color: $colorStateOther;
-      }
-    }
-  }
-
-}