fix(tags): default color (#DS-3705) (#690)

Author: lskramarov

packages/components/core/common-behaviors/color.ts

@@ -83,6 +83,7 @@ export function mixinColor<T extends Constructor<HasElementRef>>(
 @Directive({ standalone: true })
 export class KbqColorDirective {
     readonly elementRef = inject(ElementRef);
+    private defaultColor: KbqComponentColors | ThemePalette | string;
 
     get colorClassName(): KbqComponentColors | ThemePalette | string {
         return `kbq-${this._color}`;
@@ -93,7 +94,9 @@ export class KbqColorDirective {
         return this._color;
     }
 
-    set color(color: KbqComponentColors | ThemePalette | string) {
+    set color(value: KbqComponentColors | ThemePalette | string) {
+        const color = value || this.defaultColor;
+
         if (color !== this._color) {
             if (this._color) {
                 this.elementRef.nativeElement.classList.remove(`kbq-${this._color}`);
@@ -112,4 +115,9 @@ export class KbqColorDirective {
     constructor() {
         this.color = KbqComponentColors.Empty;
     }
+
+    /** this color will be used as a default value. For example [color]="'' | false | undefined | null". */
+    setDefaultColor(color: KbqComponentColors | ThemePalette | string) {
+        this.defaultColor = color;
+    }
 }

packages/components/tags/tag.component.ts

@@ -220,6 +220,7 @@ export class KbqTag
         super();
 
         this.color = KbqComponentColors.ContrastFade;
+        this.setDefaultColor(KbqComponentColors.ContrastFade);
 
         this.addHostClassName();
 

tools/public_api_guard/components/core.api.md

@@ -1732,13 +1732,14 @@ export class KbqColorDirective {
     constructor();
     // (undocumented)
     get color(): KbqComponentColors | ThemePalette | string;
-    set color(color: KbqComponentColors | ThemePalette | string);
+    set color(value: KbqComponentColors | ThemePalette | string);
     // (undocumented)
     protected _color: KbqComponentColors | ThemePalette | string;
     // (undocumented)
     get colorClassName(): KbqComponentColors | ThemePalette | string;
     // (undocumented)
     readonly elementRef: ElementRef<any>;
+    setDefaultColor(color: KbqComponentColors | ThemePalette | string): void;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqColorDirective, never, never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
     // (undocumented)