@elderbyte/ngx-starter 15.5.2 → 15.6.0

package/fesm2020/elderbyte-ngx-starter.mjs

@@ -21163,7 +21163,10 @@ class ElderChipLabelDirective {
          *                                                                         *
          **************************************************************************/
         this.baseClass = 'elder-chip-label';
-        this.appearance = 'md3';
+        this._appearance = 'md3';
+    }
+    ngOnInit() {
+        this.refreshClasses();
     }
     /***************************************************************************
      *                                                                         *
@@ -21171,44 +21174,89 @@ class ElderChipLabelDirective {
      *                                                                         *
      **************************************************************************/
     get classes() {
-        return this.buildClassesString();
+        return this.cssClasses;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set appearance(appearance) {
+        this._appearance = appearance;
+        this.refreshClasses();
+    }
+    set themeColor(themeColor) {
+        this._themeColor = themeColor;
+        this.refreshClasses();
+    }
+    set stateColor(stateColor) {
+        this._stateColor = stateColor;
+        this.refreshClasses();
+    }
+    set levelColor(levelColor) {
+        this._levelColor = levelColor;
+        this.refreshClasses();
     }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
+    refreshClasses() {
+        this.cssClasses = this.buildClassesString();
+    }
     buildClassesString() {
-        const classes = [this.baseClass];
-        if (this.appearance) {
-            classes.push(this.getAppearanceClass(this.appearance));
+        return this.buildClasses()
+            .filter(cls => !!cls)
+            .join(' ');
+    }
+    buildClasses() {
+        const appearance = this._appearance ?? 'legacy';
+        switch (appearance) {
+            case 'md3':
+                return [this.baseClass, 'md3', this.resolveColorClass() ?? 'none'];
+            case 'legacy':
+                return [this.baseClass, 'legacy', this.resolveColorClass()];
+        }
+    }
+    resolveColorClass() {
+        let colorClass;
+        if (this._themeColor) {
+            colorClass = this.getThemeColorClass(this._themeColor);
         }
-        if (this.themeColor) {
-            classes.push(this.getThemeColorClass(this.themeColor));
+        else if (this._stateColor) {
+            colorClass = this.getStateColorClass(this._stateColor);
         }
-        if (this.stateColor) {
-            classes.push(this.getStateColorClass(this.stateColor));
+        else if (this._levelColor) {
+            colorClass = this.getLevelColorClass(this._levelColor);
         }
-        return classes.join(' ');
+        else {
+            return undefined;
+        }
+        return colorClass;
     }
-    getAppearanceClass(appearance) {
-        if (appearance) {
-            switch (appearance) {
-                case 'md3':
-                    return 'md3';
-                case 'legacy':
-                    return 'legacy';
+    getLevelColorClass(state) {
+        if (state) {
+            switch (state) {
+                case 'low':
+                    return 'level-low';
+                case 'medium':
+                    return 'level-medium';
+                case 'high':
+                    return 'level-high';
+                case 'critical':
+                    return 'level-critical';
+                default:
+                    return 'state-other'; // TODO
             }
         }
         else {
-            return 'legacy';
+            return undefined;
         }
     }
     getStateColorClass(state) {
         if (state) {
             switch (state) {
-                case 'none':
-                    return 'state-none';
                 case 'open':
                     return 'state-open';
                 case 'inProgress':
@@ -21224,7 +21272,7 @@ class ElderChipLabelDirective {
             }
         }
         else {
-            return 'state-none';
+            return undefined;
         }
     }
     getThemeColorClass(color) {
@@ -21244,7 +21292,7 @@ class ElderChipLabelDirective {
     }
 }
 ElderChipLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: ElderChipLabelDirective, deps: [{ token: i6.MatChip, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ElderChipLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.2", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: { themeColor: ["color", "themeColor"], stateColor: "stateColor", appearance: "appearance" }, host: { properties: { "class": "this.classes" } }, ngImport: i0 });
+ElderChipLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.2", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: { appearance: "appearance", themeColor: ["color", "themeColor"], stateColor: "stateColor", levelColor: "levelColor" }, host: { properties: { "class": "this.classes" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: ElderChipLabelDirective, decorators: [{
             type: Directive,
             args: [{
@@ -21254,16 +21302,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
                     type: Optional
                 }, {
                     type: Host
-                }] }]; }, propDecorators: { themeColor: [{
+                }] }]; }, propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['class']
+            }], appearance: [{
+                type: Input
+            }], themeColor: [{
                 type: Input,
                 args: ['color']
             }], stateColor: [{
                 type: Input
-            }], appearance: [{
+            }], levelColor: [{
                 type: Input
-            }], classes: [{
-                type: HostBinding,
-                args: ['class']
             }] } });
 
 class ElderChipsModule {