@tekus/design-system 5.23.0 → 5.25.0

package/fesm2022/tekus-design-system-components-icon.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { model, signal, inject, computed, effect, Component } from '@angular/core';
+import { input, signal, inject, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -1092,25 +1092,25 @@ class IconComponent {
          * This is a required field.
          * It should match one of the icons in the *IconCatalog*.
          */
-        this.icon = model('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         /**
          * The style of the icon to display.
          * This is an optional field.
          * It defaults to 'regular'.
          */
-        this.styleIcon = model('regular', ...(ngDevMode ? [{ debugName: "styleIcon" }] : /* istanbul ignore next */ []));
+        this.styleIcon = input('regular', ...(ngDevMode ? [{ debugName: "styleIcon" }] : /* istanbul ignore next */ []));
         /**
          * The color of the icon to display.
          */
-        this.color = model(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+        this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
         /**
          * The size of the icon to display.
          */
-        this.size = model(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
         /**
          * Whether the icon is disabled.
          */
-        this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         /**
          * The definition of the icon to display for Font Awesome.
          */
@@ -1132,19 +1132,13 @@ class IconComponent {
                 return null;
             return size;
         }, ...(ngDevMode ? [{ debugName: "sizeProp" }] : /* istanbul ignore next */ []));
-        this.iconEffect = effect(() => {
+        effect(() => {
             const icon = this.icon();
             this.styleIcon();
             if (icon) {
                 this.getIcon();
             }
-        }, ...(ngDevMode ? [{ debugName: "iconEffect" }] : /* istanbul ignore next */ []));
-    }
-    /**
-     * Destroy icon effect
-     */
-    ngOnDestroy() {
-        this.iconEffect?.destroy();
+        });
     }
     /**
      * Gets the icon to display.
@@ -1215,14 +1209,14 @@ class IconComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: IconComponent, isStandalone: true, selector: "tk-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, styleIcon: { classPropertyName: "styleIcon", publicName: "styleIcon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { icon: "iconChange", styleIcon: "styleIconChange", color: "colorChange", size: "sizeChange", disabled: "disabledChange" }, ngImport: i0, template: "<div>\n  @if(iconDefinition()){\n\n  <fa-icon\n    class=\"svg-icon svg-icon__fa\"\n    [icon]=\"iconDefinition() ?? ''\"\n    [attr.color]=\"color()\"\n    [size]=\"sizeProp() ?? '1x'\"\n    [attr.disabled]=\"disabled()\"\n    ></fa-icon>\n\n  } @else if(svgContent()){\n\n  <div\n    class=\"svg-icon svg-icon__cu\"\n    [innerHTML]=\"svgContent()\"\n    [style]=\"{\n      '--color': color(),\n      '--size': size()\n    }\"\n    [attr.disabled]=\"disabled()\"\n    [attr.size]=\"size()\"\n    [attr.color]=\"color()\"></div>\n\n  }\n</div>\n", styles: [".svg-icon{display:inline-block;width:fit-content}.svg-icon[color=primary]{color:var(--tk-color-primary-500)}.svg-icon[color=secondary]{color:var(--tk-color-secondary-500)}.svg-icon[color=danger]{color:var(--tk-color-danger-500)}.svg-icon[color=warning]{color:var(--tk-color-warning-700)}.svg-icon[color=info]{color:var(--tk-color-info-500)}.svg-icon[color=light]{color:var(--tk-color-full-white)}.svg-icon[disabled=true],.svg-icon[data-disabled=true]{color:var(--tk-color-neutral-500)!important}.svg-icon__cu[size=\"2xs\"],.svg-icon__cu[data-size=\"2xs\"]{font-size:.625em}.svg-icon__cu[size=xs],.svg-icon__cu[data-size=xs]{font-size:.75em}.svg-icon__cu[size=sm],.svg-icon__cu[data-size=sm]{font-size:.875em}.svg-icon__cu[size=lg],.svg-icon__cu[data-size=lg]{font-size:1.25em}.svg-icon__cu[size=xl],.svg-icon__cu[data-size=xl]{font-size:1.5em}.svg-icon__cu[size=\"2xl\"],.svg-icon__cu[data-size=\"2xl\"]{font-size:2em}.svg-icon__cu[size=\"1x\"],.svg-icon__cu[data-size=\"1x\"]{font-size:1em}.svg-icon__cu[size=\"2x\"],.svg-icon__cu[data-size=\"2x\"]{font-size:2em}.svg-icon__cu[size=\"3x\"],.svg-icon__cu[data-size=\"3x\"]{font-size:3em}.svg-icon__cu[size=\"4x\"],.svg-icon__cu[data-size=\"4x\"]{font-size:4em}.svg-icon__cu[size=\"5x\"],.svg-icon__cu[data-size=\"5x\"]{font-size:5em}svg{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: IconComponent, isStandalone: true, selector: "tk-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, styleIcon: { classPropertyName: "styleIcon", publicName: "styleIcon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\n  @if(iconDefinition()){\n\n  <fa-icon\n    class=\"svg-icon svg-icon__fa\"\n    [icon]=\"iconDefinition() ?? ''\"\n    [attr.color]=\"color()\"\n    [size]=\"sizeProp() ?? '1x'\"\n    [attr.disabled]=\"disabled()\"\n    ></fa-icon>\n\n  } @else if(svgContent()){\n\n  <div\n    class=\"svg-icon svg-icon__cu\"\n    [innerHTML]=\"svgContent()\"\n    [style]=\"{\n      '--color': color(),\n      '--size': size()\n    }\"\n    [attr.disabled]=\"disabled()\"\n    [attr.size]=\"size()\"\n    [attr.color]=\"color()\"></div>\n\n  }\n</div>\n", styles: [".svg-icon{display:inline-block;width:fit-content}.svg-icon[color=primary]{color:var(--tk-color-primary-500)}.svg-icon[color=secondary]{color:var(--tk-color-secondary-500)}.svg-icon[color=danger]{color:var(--tk-color-danger-500)}.svg-icon[color=warning]{color:var(--tk-color-warning-700)}.svg-icon[color=info]{color:var(--tk-color-info-500)}.svg-icon[color=light]{color:var(--tk-color-full-white)}.svg-icon[disabled=true],.svg-icon[data-disabled=true]{color:var(--tk-color-neutral-500)!important}.svg-icon__cu[size=\"2xs\"],.svg-icon__cu[data-size=\"2xs\"]{font-size:.625em}.svg-icon__cu[size=xs],.svg-icon__cu[data-size=xs]{font-size:.75em}.svg-icon__cu[size=sm],.svg-icon__cu[data-size=sm]{font-size:.875em}.svg-icon__cu[size=lg],.svg-icon__cu[data-size=lg]{font-size:1.25em}.svg-icon__cu[size=xl],.svg-icon__cu[data-size=xl]{font-size:1.5em}.svg-icon__cu[size=\"2xl\"],.svg-icon__cu[data-size=\"2xl\"]{font-size:2em}.svg-icon__cu[size=\"1x\"],.svg-icon__cu[data-size=\"1x\"]{font-size:1em}.svg-icon__cu[size=\"2x\"],.svg-icon__cu[data-size=\"2x\"]{font-size:2em}.svg-icon__cu[size=\"3x\"],.svg-icon__cu[data-size=\"3x\"]{font-size:3em}.svg-icon__cu[size=\"4x\"],.svg-icon__cu[data-size=\"4x\"]{font-size:4em}.svg-icon__cu[size=\"5x\"],.svg-icon__cu[data-size=\"5x\"]{font-size:5em}svg{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-icon', standalone: true, imports: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-icon', imports: [
                         FontAwesomeModule
                     ], template: "<div>\n  @if(iconDefinition()){\n\n  <fa-icon\n    class=\"svg-icon svg-icon__fa\"\n    [icon]=\"iconDefinition() ?? ''\"\n    [attr.color]=\"color()\"\n    [size]=\"sizeProp() ?? '1x'\"\n    [attr.disabled]=\"disabled()\"\n    ></fa-icon>\n\n  } @else if(svgContent()){\n\n  <div\n    class=\"svg-icon svg-icon__cu\"\n    [innerHTML]=\"svgContent()\"\n    [style]=\"{\n      '--color': color(),\n      '--size': size()\n    }\"\n    [attr.disabled]=\"disabled()\"\n    [attr.size]=\"size()\"\n    [attr.color]=\"color()\"></div>\n\n  }\n</div>\n", styles: [".svg-icon{display:inline-block;width:fit-content}.svg-icon[color=primary]{color:var(--tk-color-primary-500)}.svg-icon[color=secondary]{color:var(--tk-color-secondary-500)}.svg-icon[color=danger]{color:var(--tk-color-danger-500)}.svg-icon[color=warning]{color:var(--tk-color-warning-700)}.svg-icon[color=info]{color:var(--tk-color-info-500)}.svg-icon[color=light]{color:var(--tk-color-full-white)}.svg-icon[disabled=true],.svg-icon[data-disabled=true]{color:var(--tk-color-neutral-500)!important}.svg-icon__cu[size=\"2xs\"],.svg-icon__cu[data-size=\"2xs\"]{font-size:.625em}.svg-icon__cu[size=xs],.svg-icon__cu[data-size=xs]{font-size:.75em}.svg-icon__cu[size=sm],.svg-icon__cu[data-size=sm]{font-size:.875em}.svg-icon__cu[size=lg],.svg-icon__cu[data-size=lg]{font-size:1.25em}.svg-icon__cu[size=xl],.svg-icon__cu[data-size=xl]{font-size:1.5em}.svg-icon__cu[size=\"2xl\"],.svg-icon__cu[data-size=\"2xl\"]{font-size:2em}.svg-icon__cu[size=\"1x\"],.svg-icon__cu[data-size=\"1x\"]{font-size:1em}.svg-icon__cu[size=\"2x\"],.svg-icon__cu[data-size=\"2x\"]{font-size:2em}.svg-icon__cu[size=\"3x\"],.svg-icon__cu[data-size=\"3x\"]{font-size:3em}.svg-icon__cu[size=\"4x\"],.svg-icon__cu[data-size=\"4x\"]{font-size:4em}.svg-icon__cu[size=\"5x\"],.svg-icon__cu[data-size=\"5x\"]{font-size:5em}svg{width:100%;height:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }, { type: i0.Output, args: ["iconChange"] }], styleIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleIcon", required: false }] }, { type: i0.Output, args: ["styleIconChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }, { type: i0.Output, args: ["colorChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], styleIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleIcon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 const tkAdsIcon = `<svg
    width="1em"