@tekus/design-system 5.23.0 → 5.24.0

package/fesm2022/tekus-design-system-components-fallback-view.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ViewEncapsulation, Component } from '@angular/core';
+import { input, output, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { ButtonComponent } from '@tekus/design-system/components/button';
 import { CardModule } from 'primeng/card';
 
@@ -7,7 +7,7 @@ import { CardModule } from 'primeng/card';
  * @component FallbackViewComponent
  * @description
  * A reusable component for displaying fallback or empty states such as
- * “no results found”, “error loading data”, or “content not available”.
+ * "no results found", "error loading data", or "content not available".
  * It provides a consistent structure with support for an image, title,
  * message, and optional action buttons.
  *
@@ -70,9 +70,9 @@ class FallbackViewComponent {
          * - `'content'`: Standard size.
          * - `'section'`: A more compact version.
          *
-         * @default `'default'`
+         * @default `'content'`
          */
-        this.type = 'content';
+        this.type = input('content', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         /**
          * @property {string} imageSrc
          * @description
@@ -80,12 +80,12 @@ class FallbackViewComponent {
          *
          * @default `''`
          */
-        this.imageSrc = '';
+        this.imageSrc = input('', ...(ngDevMode ? [{ debugName: "imageSrc" }] : /* istanbul ignore next */ []));
         /**
          * @property {string} illustrationAlt
          * Descriptive alternative text for the image. Improves accessibility.
          */
-        this.illustrationAlt = '';
+        this.illustrationAlt = input('', ...(ngDevMode ? [{ debugName: "illustrationAlt" }] : /* istanbul ignore next */ []));
         /**
          * @property {string} title
          * @description
@@ -93,7 +93,7 @@ class FallbackViewComponent {
          *
          * @default `''`
          */
-        this.title = '';
+        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         /**
          * @property {string} message
          * @description
@@ -101,7 +101,7 @@ class FallbackViewComponent {
          *
          * @default `''`
          */
-        this.message = '';
+        this.message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
         /**
          * @property {string} buttonLabel
          * @description
@@ -109,7 +109,7 @@ class FallbackViewComponent {
          *
          * @default `''`
          */
-        this.buttonLabel = '';
+        this.buttonLabel = input('', ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
         /**
          * @property {string} linkLabel
          * @description
@@ -118,7 +118,7 @@ class FallbackViewComponent {
          *
          * @default `''`
          */
-        this.linkLabel = '';
+        this.linkLabel = input('', ...(ngDevMode ? [{ debugName: "linkLabel" }] : /* istanbul ignore next */ []));
         /**
          * @property {boolean} buttonDisabled
          * @description
@@ -127,26 +127,26 @@ class FallbackViewComponent {
          *
          * @default false
          */
-        this.buttonDisabled = false;
+        this.buttonDisabled = input(false, ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : /* istanbul ignore next */ []));
         /**
          * @event buttonAction
          * @description
          * Emits when the main action button is clicked. Listen to this event
          * to handle the primary call-to-action.
          */
-        this.buttonAction = new EventEmitter();
+        this.buttonAction = output();
         /**
          * @event linkAction
          * @description
          * Emits when the link-styled button is clicked. Use for secondary
          * or alternative actions.
          */
-        this.linkAction = new EventEmitter();
+        this.linkAction = output();
     }
     /**
-     * @method  onButtonActionClick
+     * @method onButtonActionClick
      * @description
-     * Internal handler that emits the `primaryAction` event when the
+     * Internal handler that emits the `buttonAction` event when the
      * main button is clicked.
      */
     onButtonActionClick() {
@@ -162,32 +162,12 @@ class FallbackViewComponent {
         this.linkAction.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: FallbackViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: FallbackViewComponent, isStandalone: true, selector: "tk-fallback-view", inputs: { type: "type", imageSrc: "imageSrc", illustrationAlt: "illustrationAlt", title: "title", message: "message", buttonLabel: "buttonLabel", linkLabel: "linkLabel", buttonDisabled: "buttonDisabled" }, outputs: { buttonAction: "buttonAction", linkAction: "linkAction" }, ngImport: i0, template: "<div\n  class=\"tk-fallback-view\"\n  [class.tk-fallback-view--section]=\"type === 'section'\">\n  <ng-content select=\"[image]\"></ng-content>\n  @if (imageSrc) {\n  <img\n    [src]=\"imageSrc\"\n    [alt]=\"illustrationAlt || 'fallback illustration'\"\n    class=\"tk-fallback-view__image\" />\n  }\n\n  <ng-content select=\"[title]\"></ng-content>\n  @if (title && type === 'content') {\n  <h2 class=\"tk-fallback-view__title\">{{ title }}</h2>\n  }\n\n  <ng-content select=\"[message]\"></ng-content>\n  @if (message) {\n  <p class=\"tk-fallback-view__message\" [innerHTML]=\"message\"></p>\n  }\n\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (type === 'content' && (buttonLabel || linkLabel)) {\n  <div class=\"tk-fallback-view__actions\">\n    @if (buttonLabel) {\n    <tk-button\n      [label]=\"buttonLabel\"\n      severity=\"primary\"\n      [disabled]=\"buttonDisabled\"\n      (clicked)=\"onButtonActionClick()\" />\n    } @if (linkLabel) {\n    <tk-button\n      [label]=\"linkLabel\"\n      [link]=\"true\"\n      (clicked)=\"onLinkActionClick()\" />\n    }\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.tk-fallback-view{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--tk-spacing-gap-m, 1rem);padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);margin:0 auto}.tk-fallback-view__image,.tk-fallback-view>[image]{max-width:18.75rem;max-height:18.75rem;width:auto;height:auto;object-fit:contain;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}.tk-fallback-view__title,.tk-fallback-view>[title]{font-size:var(--tk-font-size-base-150, 1.5rem);font-weight:var(--tk-font-weight-bold, 700);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__message,.tk-fallback-view>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__actions,.tk-fallback-view>[actions]{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-75, .75rem)}.tk-fallback-view--section{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:var(--tk-spacing-gap-m, 1rem);width:100%;min-height:3.75rem;padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);background-color:var(--tk-color-base-surface-0, #ffffff);color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view--section .tk-fallback-view__image,.tk-fallback-view--section>[image]{width:3.75rem;height:3.75rem;max-width:3.75rem;max-height:3.75rem;margin-bottom:0;object-fit:contain}.tk-fallback-view--section .tk-fallback-view__message,.tk-fallback-view--section>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }, { kind: "ngmodule", type: CardModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: FallbackViewComponent, isStandalone: true, selector: "tk-fallback-view", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, illustrationAlt: { classPropertyName: "illustrationAlt", publicName: "illustrationAlt", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, linkLabel: { classPropertyName: "linkLabel", publicName: "linkLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "buttonDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonAction: "buttonAction", linkAction: "linkAction" }, ngImport: i0, template: "<div\n  class=\"tk-fallback-view\"\n  [class.tk-fallback-view--section]=\"type() === 'section'\">\n  <ng-content select=\"[image]\"></ng-content>\n  @if (imageSrc()) {\n  <img\n    [src]=\"imageSrc()\"\n    [alt]=\"illustrationAlt() || 'fallback illustration'\"\n    class=\"tk-fallback-view__image\" />\n  }\n\n  <ng-content select=\"[title]\"></ng-content>\n  @if (title() && type() === 'content') {\n  <h2 class=\"tk-fallback-view__title\">{{ title() }}</h2>\n  }\n\n  <ng-content select=\"[message]\"></ng-content>\n  @if (message()) {\n  <p class=\"tk-fallback-view__message\" [innerHTML]=\"message()\"></p>\n  }\n\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (type() === 'content' && (buttonLabel() || linkLabel())) {\n  <div class=\"tk-fallback-view__actions\">\n    @if (buttonLabel()) {\n    <tk-button\n      [label]=\"buttonLabel()\"\n      severity=\"primary\"\n      [disabled]=\"buttonDisabled()\"\n      (clicked)=\"onButtonActionClick()\" />\n    } @if (linkLabel()) {\n    <tk-button\n      [label]=\"linkLabel()\"\n      [link]=\"true\"\n      (clicked)=\"onLinkActionClick()\" />\n    }\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.tk-fallback-view{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--tk-spacing-gap-m, 1rem);padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);margin:0 auto}.tk-fallback-view__image,.tk-fallback-view>[image]{max-width:18.75rem;max-height:18.75rem;width:auto;height:auto;object-fit:contain;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}.tk-fallback-view__title,.tk-fallback-view>[title]{font-size:var(--tk-font-size-base-150, 1.5rem);font-weight:var(--tk-font-weight-bold, 700);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__message,.tk-fallback-view>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__actions,.tk-fallback-view>[actions]{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-75, .75rem)}.tk-fallback-view--section{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:var(--tk-spacing-gap-m, 1rem);width:100%;min-height:3.75rem;padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);background-color:var(--tk-color-base-surface-0, #ffffff);color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view--section .tk-fallback-view__image,.tk-fallback-view--section>[image]{width:3.75rem;height:3.75rem;max-width:3.75rem;max-height:3.75rem;margin-bottom:0;object-fit:contain}.tk-fallback-view--section .tk-fallback-view__message,.tk-fallback-view--section>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }, { kind: "ngmodule", type: CardModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: FallbackViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-fallback-view', standalone: true, imports: [ButtonComponent, CardModule], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"tk-fallback-view\"\n  [class.tk-fallback-view--section]=\"type === 'section'\">\n  <ng-content select=\"[image]\"></ng-content>\n  @if (imageSrc) {\n  <img\n    [src]=\"imageSrc\"\n    [alt]=\"illustrationAlt || 'fallback illustration'\"\n    class=\"tk-fallback-view__image\" />\n  }\n\n  <ng-content select=\"[title]\"></ng-content>\n  @if (title && type === 'content') {\n  <h2 class=\"tk-fallback-view__title\">{{ title }}</h2>\n  }\n\n  <ng-content select=\"[message]\"></ng-content>\n  @if (message) {\n  <p class=\"tk-fallback-view__message\" [innerHTML]=\"message\"></p>\n  }\n\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (type === 'content' && (buttonLabel || linkLabel)) {\n  <div class=\"tk-fallback-view__actions\">\n    @if (buttonLabel) {\n    <tk-button\n      [label]=\"buttonLabel\"\n      severity=\"primary\"\n      [disabled]=\"buttonDisabled\"\n      (clicked)=\"onButtonActionClick()\" />\n    } @if (linkLabel) {\n    <tk-button\n      [label]=\"linkLabel\"\n      [link]=\"true\"\n      (clicked)=\"onLinkActionClick()\" />\n    }\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.tk-fallback-view{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--tk-spacing-gap-m, 1rem);padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);margin:0 auto}.tk-fallback-view__image,.tk-fallback-view>[image]{max-width:18.75rem;max-height:18.75rem;width:auto;height:auto;object-fit:contain;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}.tk-fallback-view__title,.tk-fallback-view>[title]{font-size:var(--tk-font-size-base-150, 1.5rem);font-weight:var(--tk-font-weight-bold, 700);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__message,.tk-fallback-view>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__actions,.tk-fallback-view>[actions]{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-75, .75rem)}.tk-fallback-view--section{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:var(--tk-spacing-gap-m, 1rem);width:100%;min-height:3.75rem;padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);background-color:var(--tk-color-base-surface-0, #ffffff);color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view--section .tk-fallback-view__image,.tk-fallback-view--section>[image]{width:3.75rem;height:3.75rem;max-width:3.75rem;max-height:3.75rem;margin-bottom:0;object-fit:contain}.tk-fallback-view--section .tk-fallback-view__message,.tk-fallback-view--section>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400)}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], imageSrc: [{
-                type: Input
-            }], illustrationAlt: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], message: [{
-                type: Input
-            }], buttonLabel: [{
-                type: Input
-            }], linkLabel: [{
-                type: Input
-            }], buttonDisabled: [{
-                type: Input
-            }], buttonAction: [{
-                type: Output
-            }], linkAction: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'tk-fallback-view', imports: [ButtonComponent, CardModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"tk-fallback-view\"\n  [class.tk-fallback-view--section]=\"type() === 'section'\">\n  <ng-content select=\"[image]\"></ng-content>\n  @if (imageSrc()) {\n  <img\n    [src]=\"imageSrc()\"\n    [alt]=\"illustrationAlt() || 'fallback illustration'\"\n    class=\"tk-fallback-view__image\" />\n  }\n\n  <ng-content select=\"[title]\"></ng-content>\n  @if (title() && type() === 'content') {\n  <h2 class=\"tk-fallback-view__title\">{{ title() }}</h2>\n  }\n\n  <ng-content select=\"[message]\"></ng-content>\n  @if (message()) {\n  <p class=\"tk-fallback-view__message\" [innerHTML]=\"message()\"></p>\n  }\n\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (type() === 'content' && (buttonLabel() || linkLabel())) {\n  <div class=\"tk-fallback-view__actions\">\n    @if (buttonLabel()) {\n    <tk-button\n      [label]=\"buttonLabel()\"\n      severity=\"primary\"\n      [disabled]=\"buttonDisabled()\"\n      (clicked)=\"onButtonActionClick()\" />\n    } @if (linkLabel()) {\n    <tk-button\n      [label]=\"linkLabel()\"\n      [link]=\"true\"\n      (clicked)=\"onLinkActionClick()\" />\n    }\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.tk-fallback-view{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--tk-spacing-gap-m, 1rem);padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);margin:0 auto}.tk-fallback-view__image,.tk-fallback-view>[image]{max-width:18.75rem;max-height:18.75rem;width:auto;height:auto;object-fit:contain;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}.tk-fallback-view__title,.tk-fallback-view>[title]{font-size:var(--tk-font-size-base-150, 1.5rem);font-weight:var(--tk-font-weight-bold, 700);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__message,.tk-fallback-view>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__actions,.tk-fallback-view>[actions]{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-75, .75rem)}.tk-fallback-view--section{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:var(--tk-spacing-gap-m, 1rem);width:100%;min-height:3.75rem;padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);background-color:var(--tk-color-base-surface-0, #ffffff);color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view--section .tk-fallback-view__image,.tk-fallback-view--section>[image]{width:3.75rem;height:3.75rem;max-width:3.75rem;max-height:3.75rem;margin-bottom:0;object-fit:contain}.tk-fallback-view--section .tk-fallback-view__message,.tk-fallback-view--section>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400)}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], imageSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageSrc", required: false }] }], illustrationAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "illustrationAlt", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], linkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkLabel", required: false }] }], buttonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonDisabled", required: false }] }], buttonAction: [{ type: i0.Output, args: ["buttonAction"] }], linkAction: [{ type: i0.Output, args: ["linkAction"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/tekus-design-system-components-fallback-view.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-fallback-view.mjs","sources":["../../../projects/design-system/components/fallback-view/src/fallback-view.component.ts","../../../projects/design-system/components/fallback-view/src/fallback-view.component.html","../../../projects/design-system/components/fallback-view/tekus-design-system-components-fallback-view.ts"],"sourcesContent":["import {\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CardModule } from 'primeng/card';\n\nexport type FallbackViewType = 'content' | 'section';\n\n/**\n * @component FallbackViewComponent\n * @description\n * A reusable component for displaying fallback or empty states such as\n * “no results found”, “error loading data”, or “content not available”.\n * It provides a consistent structure with support for an image, title,\n * message, and optional action buttons.\n *\n * The component can be used in two ways:\n * 1. **Via Inputs:** Pass data directly through component inputs (`imageSrc`, `title`, `message`, etc.).\n * 2. **Via Content Projection (`ng-content`):** Use your own HTML structure for full customization.\n *\n * @usage\n * ### Basic Usage (via Inputs)\n * ```html\n * <tk-fallback-view\n *   imageSrc=\"assets/img/empty-state.svg\"\n *   title=\"No Items Found\"\n *   message=\"There are currently no items to display. Try adding one.\"\n *   buttonLabel=\"Add New Item\"\n *   linkLabel=\"Learn More\"\n *   (buttonAction)=\"handleAddNewItem()\"\n *   (linkAction)=\"handleLearnMore()\">\n * </tk-fallback-view>\n * ```\n *\n * ### Compact Variant (Section type)\n * ```html\n * <tk-fallback-view\n *   [type]=\"'section'\"\n *   imageSrc=\"assets/img/check.svg\"\n *   message=\"Saved successfully\">\n * </tk-fallback-view>\n * ```\n *\n * ### Advanced Usage (via ng-content)\n * ```html\n * <tk-fallback-view [type]=\"'content'\">\n *   <img image src=\"assets/img/empty-state.svg\" alt=\"Tekus logo\">\n *   <h2 title>Custom Title</h2>\n *   <p message>\n *     This is a <b>custom message</b> with <strong>HTML content</strong>.\n *   </p>\n *   <div actions>\n *     <tk-button\n *       label=\"Primary Action\"\n *       severity=\"primary\"\n *       (click)=\"onPrimaryAction()\">\n *     </tk-button>\n *     <tk-button\n *       label=\"Secondary Action\"\n *       [link]=\"true\"\n *       (click)=\"onSecondaryAction()\">\n *     </tk-button>\n *   </div>\n * </tk-fallback-view>\n * ```\n */\n\n@Component({\n  selector: 'tk-fallback-view',\n  standalone: true,\n  imports: [ButtonComponent, CardModule],\n  templateUrl: './fallback-view.component.html',\n  styleUrl: './fallback-view.component.scss',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class FallbackViewComponent {\n  /**\n   * @property {FallbackViewType} type\n   * @description\n   * Controls the overall type and spacing of the component.\n   * - `'content'`: Standard size.\n   * - `'section'`: A more compact version.\n   *\n   * @default `'default'`\n   */\n  @Input() type: FallbackViewType = 'content';\n\n  /**\n   * @property {string} imageSrc\n   * @description\n   * The URL for the illustrative image to be displayed at the top.\n   *\n   * @default `''`\n   */\n  @Input() imageSrc = '';\n\n  /**\n   * @property {string} illustrationAlt\n   * Descriptive alternative text for the image. Improves accessibility.\n   */\n  @Input() illustrationAlt = '';\n\n  /**\n   * @property {string} title\n   * @description\n   * The main title or heading of the fallback view.\n   *\n   * @default `''`\n   */\n  @Input() title = '';\n\n  /**\n   * @property {string} message\n   * @description\n   * The descriptive text or message displayed below the title.\n   *\n   * @default `''`\n   */\n  @Input() message = '';\n\n  /**\n   * @property {string} buttonLabel\n   * @description\n   * Text for the primary action button. If left empty, the button is not rendered.\n   *\n   * @default `''`\n   */\n  @Input() buttonLabel = '';\n\n  /**\n   * @property {string} linkLabel\n   * @description\n   * Text for the secondary action, which is styled as a link.\n   * If left empty, the link is not rendered.\n   *\n   * @default `''`\n   */\n  @Input() linkLabel = '';\n\n  /**\n   * @property {boolean} buttonDisabled\n   * @description\n   * Controls whether the primary action button is disabled.\n   * When true, the button is visually disabled and cannot be clicked.\n   *\n   * @default false\n   */\n  @Input() buttonDisabled = false;\n\n  /**\n   * @event buttonAction\n   * @description\n   * Emits when the main action button is clicked. Listen to this event\n   * to handle the primary call-to-action.\n   */\n  @Output() buttonAction = new EventEmitter<void>();\n\n  /**\n   * @event linkAction\n   * @description\n   * Emits when the link-styled button is clicked. Use for secondary\n   * or alternative actions.\n   */\n  @Output() linkAction = new EventEmitter<void>();\n\n  /**\n   * @method  onButtonActionClick\n   * @description\n   * Internal handler that emits the `primaryAction` event when the\n   * main button is clicked.\n   */\n  onButtonActionClick(): void {\n    this.buttonAction.emit();\n  }\n\n  /**\n   * @method onLinkActionClick\n   * @description\n   * Internal handler that emits the `linkAction` event when the\n   * link button is clicked.\n   */\n  onLinkActionClick(): void {\n    this.linkAction.emit();\n  }\n}\n","<div\n  class=\"tk-fallback-view\"\n  [class.tk-fallback-view--section]=\"type === 'section'\">\n  <ng-content select=\"[image]\"></ng-content>\n  @if (imageSrc) {\n  <img\n    [src]=\"imageSrc\"\n    [alt]=\"illustrationAlt || 'fallback illustration'\"\n    class=\"tk-fallback-view__image\" />\n  }\n\n  <ng-content select=\"[title]\"></ng-content>\n  @if (title && type === 'content') {\n  <h2 class=\"tk-fallback-view__title\">{{ title }}</h2>\n  }\n\n  <ng-content select=\"[message]\"></ng-content>\n  @if (message) {\n  <p class=\"tk-fallback-view__message\" [innerHTML]=\"message\"></p>\n  }\n\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (type === 'content' && (buttonLabel || linkLabel)) {\n  <div class=\"tk-fallback-view__actions\">\n    @if (buttonLabel) {\n    <tk-button\n      [label]=\"buttonLabel\"\n      severity=\"primary\"\n      [disabled]=\"buttonDisabled\"\n      (clicked)=\"onButtonActionClick()\" />\n    } @if (linkLabel) {\n    <tk-button\n      [label]=\"linkLabel\"\n      [link]=\"true\"\n      (clicked)=\"onLinkActionClick()\" />\n    }\n  </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAaA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDG;MAUU,qBAAqB,CAAA;AARlC,IAAA,WAAA,GAAA;AASE;;;;;;;;AAQG;QACM,IAAA,CAAA,IAAI,GAAqB,SAAS;AAE3C;;;;;;AAMG;QACM,IAAA,CAAA,QAAQ,GAAG,EAAE;AAEtB;;;AAGG;QACM,IAAA,CAAA,eAAe,GAAG,EAAE;AAE7B;;;;;;AAMG;QACM,IAAA,CAAA,KAAK,GAAG,EAAE;AAEnB;;;;;;AAMG;QACM,IAAA,CAAA,OAAO,GAAG,EAAE;AAErB;;;;;;AAMG;QACM,IAAA,CAAA,WAAW,GAAG,EAAE;AAEzB;;;;;;;AAOG;QACM,IAAA,CAAA,SAAS,GAAG,EAAE;AAEvB;;;;;;;AAOG;QACM,IAAA,CAAA,cAAc,GAAG,KAAK;AAE/B;;;;;AAKG;AACO,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAQ;AAEjD;;;;;AAKG;AACO,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAQ;AAqBhD,IAAA;AAnBC;;;;;AAKG;IACH,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;IAC1B;AAEA;;;;;AAKG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;IACxB;8GA5GW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,SAAA,EAAA,WAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChFlC,slCAuCA,EAAA,MAAA,EAAA,CAAA,+sDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDoCY,eAAe,wKAAE,UAAU,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAK1B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBARjC,SAAS;+BACE,kBAAkB,EAAA,UAAA,EAChB,IAAI,EAAA,OAAA,EACP,CAAC,eAAe,EAAE,UAAU,CAAC,EAAA,aAAA,EAGvB,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,slCAAA,EAAA,MAAA,EAAA,CAAA,+sDAAA,CAAA,EAAA;;sBAYpC;;sBASA;;sBAMA;;sBASA;;sBASA;;sBASA;;sBAUA;;sBAUA;;sBAQA;;sBAQA;;;AExKH;;AAEG;;;;"}
+{"version":3,"file":"tekus-design-system-components-fallback-view.mjs","sources":["../../../projects/design-system/components/fallback-view/src/fallback-view.component.ts","../../../projects/design-system/components/fallback-view/src/fallback-view.component.html","../../../projects/design-system/components/fallback-view/tekus-design-system-components-fallback-view.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  input,\n  output,\n} from '@angular/core';\n\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CardModule } from 'primeng/card';\n\nexport type FallbackViewType = 'content' | 'section';\n\n/**\n * @component FallbackViewComponent\n * @description\n * A reusable component for displaying fallback or empty states such as\n * \"no results found\", \"error loading data\", or \"content not available\".\n * It provides a consistent structure with support for an image, title,\n * message, and optional action buttons.\n *\n * The component can be used in two ways:\n * 1. **Via Inputs:** Pass data directly through component inputs (`imageSrc`, `title`, `message`, etc.).\n * 2. **Via Content Projection (`ng-content`):** Use your own HTML structure for full customization.\n *\n * @usage\n * ### Basic Usage (via Inputs)\n * ```html\n * <tk-fallback-view\n *   imageSrc=\"assets/img/empty-state.svg\"\n *   title=\"No Items Found\"\n *   message=\"There are currently no items to display. Try adding one.\"\n *   buttonLabel=\"Add New Item\"\n *   linkLabel=\"Learn More\"\n *   (buttonAction)=\"handleAddNewItem()\"\n *   (linkAction)=\"handleLearnMore()\">\n * </tk-fallback-view>\n * ```\n *\n * ### Compact Variant (Section type)\n * ```html\n * <tk-fallback-view\n *   [type]=\"'section'\"\n *   imageSrc=\"assets/img/check.svg\"\n *   message=\"Saved successfully\">\n * </tk-fallback-view>\n * ```\n *\n * ### Advanced Usage (via ng-content)\n * ```html\n * <tk-fallback-view [type]=\"'content'\">\n *   <img image src=\"assets/img/empty-state.svg\" alt=\"Tekus logo\">\n *   <h2 title>Custom Title</h2>\n *   <p message>\n *     This is a <b>custom message</b> with <strong>HTML content</strong>.\n *   </p>\n *   <div actions>\n *     <tk-button\n *       label=\"Primary Action\"\n *       severity=\"primary\"\n *       (click)=\"onPrimaryAction()\">\n *     </tk-button>\n *     <tk-button\n *       label=\"Secondary Action\"\n *       [link]=\"true\"\n *       (click)=\"onSecondaryAction()\">\n *     </tk-button>\n *   </div>\n * </tk-fallback-view>\n * ```\n */\n\n@Component({\n  selector: 'tk-fallback-view',\n  imports: [ButtonComponent, CardModule],\n  templateUrl: './fallback-view.component.html',\n  styleUrl: './fallback-view.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FallbackViewComponent {\n  /**\n   * @property {FallbackViewType} type\n   * @description\n   * Controls the overall type and spacing of the component.\n   * - `'content'`: Standard size.\n   * - `'section'`: A more compact version.\n   *\n   * @default `'content'`\n   */\n  type = input<FallbackViewType>('content');\n\n  /**\n   * @property {string} imageSrc\n   * @description\n   * The URL for the illustrative image to be displayed at the top.\n   *\n   * @default `''`\n   */\n  imageSrc = input<string>('');\n\n  /**\n   * @property {string} illustrationAlt\n   * Descriptive alternative text for the image. Improves accessibility.\n   */\n  illustrationAlt = input<string>('');\n\n  /**\n   * @property {string} title\n   * @description\n   * The main title or heading of the fallback view.\n   *\n   * @default `''`\n   */\n  title = input<string>('');\n\n  /**\n   * @property {string} message\n   * @description\n   * The descriptive text or message displayed below the title.\n   *\n   * @default `''`\n   */\n  message = input<string>('');\n\n  /**\n   * @property {string} buttonLabel\n   * @description\n   * Text for the primary action button. If left empty, the button is not rendered.\n   *\n   * @default `''`\n   */\n  buttonLabel = input<string>('');\n\n  /**\n   * @property {string} linkLabel\n   * @description\n   * Text for the secondary action, which is styled as a link.\n   * If left empty, the link is not rendered.\n   *\n   * @default `''`\n   */\n  linkLabel = input<string>('');\n\n  /**\n   * @property {boolean} buttonDisabled\n   * @description\n   * Controls whether the primary action button is disabled.\n   * When true, the button is visually disabled and cannot be clicked.\n   *\n   * @default false\n   */\n  buttonDisabled = input<boolean>(false);\n\n  /**\n   * @event buttonAction\n   * @description\n   * Emits when the main action button is clicked. Listen to this event\n   * to handle the primary call-to-action.\n   */\n  buttonAction = output<void>();\n\n  /**\n   * @event linkAction\n   * @description\n   * Emits when the link-styled button is clicked. Use for secondary\n   * or alternative actions.\n   */\n  linkAction = output<void>();\n\n  /**\n   * @method onButtonActionClick\n   * @description\n   * Internal handler that emits the `buttonAction` event when the\n   * main button is clicked.\n   */\n  onButtonActionClick(): void {\n    this.buttonAction.emit();\n  }\n\n  /**\n   * @method onLinkActionClick\n   * @description\n   * Internal handler that emits the `linkAction` event when the\n   * link button is clicked.\n   */\n  onLinkActionClick(): void {\n    this.linkAction.emit();\n  }\n}\n","<div\n  class=\"tk-fallback-view\"\n  [class.tk-fallback-view--section]=\"type() === 'section'\">\n  <ng-content select=\"[image]\"></ng-content>\n  @if (imageSrc()) {\n  <img\n    [src]=\"imageSrc()\"\n    [alt]=\"illustrationAlt() || 'fallback illustration'\"\n    class=\"tk-fallback-view__image\" />\n  }\n\n  <ng-content select=\"[title]\"></ng-content>\n  @if (title() && type() === 'content') {\n  <h2 class=\"tk-fallback-view__title\">{{ title() }}</h2>\n  }\n\n  <ng-content select=\"[message]\"></ng-content>\n  @if (message()) {\n  <p class=\"tk-fallback-view__message\" [innerHTML]=\"message()\"></p>\n  }\n\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (type() === 'content' && (buttonLabel() || linkLabel())) {\n  <div class=\"tk-fallback-view__actions\">\n    @if (buttonLabel()) {\n    <tk-button\n      [label]=\"buttonLabel()\"\n      severity=\"primary\"\n      [disabled]=\"buttonDisabled()\"\n      (clicked)=\"onButtonActionClick()\" />\n    } @if (linkLabel()) {\n    <tk-button\n      [label]=\"linkLabel()\"\n      [link]=\"true\"\n      (clicked)=\"onLinkActionClick()\" />\n    }\n  </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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"