@tekus/design-system 5.3.2 → 5.5.0

package/components/icon/src/icon.component.d.ts

@@ -0,0 +1,79 @@
+import { EffectRef, OnDestroy } from "@angular/core";
+import { IconColors, IconStylesGeneral } from "../core/icon-catalog";
+import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import { IconProp, SizeProp } from "@fortawesome/fontawesome-svg-core";
+import * as i0 from "@angular/core";
+export type SizeMap = SizeProp | 'md';
+export declare class IconComponent implements OnDestroy {
+    /**
+     * The name of the icon to display.
+     * This is a required field.
+     * It should match one of the icons in the *IconCatalog*.
+     */
+    icon: import("@angular/core").ModelSignal<string>;
+    /**
+     * The style of the icon to display.
+     * This is an optional field.
+     * It defaults to 'regular'.
+     */
+    styleIcon: import("@angular/core").ModelSignal<IconStylesGeneral>;
+    /**
+     * The color of the icon to display.
+     */
+    color: import("@angular/core").ModelSignal<IconColors | undefined>;
+    /**
+     * The size of the icon to display.
+     */
+    size: import("@angular/core").ModelSignal<SizeMap | undefined>;
+    /**
+     * Whether the icon is disabled.
+     */
+    disabled: import("@angular/core").ModelSignal<boolean>;
+    /**
+     * The definition of the icon to display for Font Awesome.
+     */
+    iconDefinition: import("@angular/core").WritableSignal<IconProp | null>;
+    /**
+     * The SVG content of the icon to display for custom icons.
+     */
+    svgContent: import("@angular/core").WritableSignal<SafeHtml | null>;
+    /**
+     * The sanitizer service to use for sanitizing SVG content.
+     */
+    sanitizer: DomSanitizer;
+    /**
+     * The size property to use for the icon.
+     */
+    sizeProp: import("@angular/core").Signal<SizeProp | null>;
+    /**
+     * The effect reference for the icon.
+     */
+    iconEffect: EffectRef;
+    constructor();
+    /**
+     * Destroy icon effect
+     */
+    ngOnDestroy(): void;
+    /**
+     * Gets the icon to display.
+     */
+    getIcon(): void;
+    /**
+     * Loads the icon from Font Awesome.
+     */
+    loadIconFa(): Promise<void>;
+    /**
+     * Gets the key style for the icon based on the current styleIcon model.
+     *
+    * @returns 'light' | 'regular' | 'solid' | null
+     */
+    getKeyStyle(): 'light' | 'regular' | 'solid' | null;
+    /**
+     * Loads a custom icon from the IconCatalog.
+     * Sanitize the SVG content and apply the appropriate color.
+     * @returns void
+     */
+    loadIconCustom(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "tk-icon", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "styleIcon": { "alias": "styleIcon"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "icon": "iconChange"; "styleIcon": "styleIconChange"; "color": "colorChange"; "size": "sizeChange"; "disabled": "disabledChange"; }, never, never, true, never>;
+}

package/components/input-text/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@tekus/design-system/components/input-text" />
+export * from './public-api';

package/components/input-text/public-api.d.ts

@@ -0,0 +1 @@
+export * from './src/input-text.component';

package/components/input-text/src/input-text.component.d.ts

@@ -0,0 +1,139 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { ControlValueAccessor, FormControl, NgControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class InputTextComponent implements ControlValueAccessor, OnInit, OnDestroy {
+    readonly ngControl: NgControl | null;
+    constructor();
+    /**
+     * @property {ModelSignal<string>} value
+     * @description
+     * The value of the input. Supports two-way binding via signals.
+     */
+    value: import("@angular/core").ModelSignal<string>;
+    /**
+     * @property {InputSignal<FormControl>} control
+     * @description
+     * External FormControl used to read/set the input value.
+     * If not provided, an internal FormControl is created.
+     */
+    control: import("@angular/core").InputSignal<FormControl<any>>;
+    /**
+     * @property {InputSignal<string>} label
+     * @description
+     * Label displayed above the input.
+     */
+    label: import("@angular/core").InputSignal<string>;
+    /**
+     * @property {InputSignal<string>} type
+     * @description
+     * Type of the input (text, password, email, etc.).
+     * @default 'text'
+     */
+    type: import("@angular/core").InputSignal<string>;
+    /**
+     * @property {InputSignal<string>} id
+     * @description
+     * HTML id attribute for the input.
+     * @default 'tk-input-text'
+     */
+    id: import("@angular/core").InputSignal<string>;
+    /**
+     * @property {InputSignal<string>} icon
+     * @description
+     * Icon to display next to the input (e.g., 'pi pi-search').
+     */
+    icon: import("@angular/core").InputSignal<string>;
+    /**
+     * @property {InputSignal<boolean>} clearable
+     * @description
+     * Whether to show a clear button when the input has a value.
+     * @default false
+     */
+    clearable: import("@angular/core").InputSignal<boolean>;
+    /**
+     * @property {InputSignal<string>} errorMessage
+     * @description
+     * Message to display when the control is invalid and touched.
+     */
+    errorMessage: import("@angular/core").InputSignal<string>;
+    /**
+     * @property {InputSignal<string>} hint
+     * @description
+     * Hint text to display below the input.
+     */
+    /**
+     * @property {InputSignal<string>} hint
+     * @description
+     * Hint text to display below the input.
+     */
+    hint: import("@angular/core").InputSignal<string>;
+    /**
+     * @property {InputSignal<number | null>} maxLength
+     * @description
+     * Maximum number of characters allowed in the input.
+     */
+    maxLength: import("@angular/core").InputSignal<number | null>;
+    /**
+     * @property {boolean} disabled
+     * @description
+     * Whether the input is disabled.
+     */
+    disabled: import("@angular/core").WritableSignal<boolean>;
+    get effectiveControl(): FormControl;
+    counterText: import("@angular/core").Signal<string>;
+    onChange: (value: string) => void;
+    onTouched: () => void;
+    private isWriting;
+    private readonly subscription;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * @method writeValue
+     * @description
+     * Writes a new value to the element.
+     * @param value The new value.
+     */
+    writeValue(value: string): void;
+    /**
+     * @method registerOnChange
+     * @description
+     * Registers a callback function that is called when the control's value changes in the UI.
+     * @param fn The callback function.
+     */
+    registerOnChange(fn: (value: string) => void): void;
+    /**
+     * @method registerOnTouched
+     * @description
+     * Registers a callback function that is called by the forms API on initialization to update the form model on blur.
+     * @param fn The callback function.
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * @method setDisabledState
+     * @description
+     * Function that is called by the forms API when the control status changes to or from 'DISABLED'.
+     * @param isDisabled The disabled status to set on the element.
+     */
+    setDisabledState?(isDisabled: boolean): void;
+    /**
+     * @method onInput
+     * @description
+     * Handles input events to update the model and notify forms.
+     * @param event The input event.
+     */
+    onInput(event: Event): void;
+    /**
+     * @method onBlur
+     * @description
+     * Handles blur events to mark the control as touched.
+     */
+    onBlur(): void;
+    /**
+     * @method clear
+     * @description
+     * Clears the input value.
+     */
+    clear(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputTextComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputTextComponent, "tk-input-text", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["[tk-prefix]", "[tk-suffix]"], true, never>;
+}

package/components/modal/src/modal.component.d.ts

@@ -77,7 +77,7 @@ export declare class ModalComponent {
      * @param action Callback to execute when the button is clicked
      * @param returnValue Value emitted on modal close
      */
-    handleAction(action: () => void, returnValue: unknown): void;
+    handleAction(action: (() => void) | undefined, returnValue: unknown): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "tk-modal", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "footerButtons": { "alias": "footerButtons"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/components/modal/src/modal.types.d.ts

@@ -1,10 +1,12 @@
+import { Variant } from '@tekus/design-system/components/button';
 export type ModalSizeType = 'small' | 'large' | 'full';
 export type SeverityType = 'primary' | 'secondary' | 'danger';
 export interface ModalFooterButton {
     label: string;
     severity: SeverityType;
-    action: () => void;
+    action?: () => void;
     returnValue?: unknown;
+    variant?: Variant;
 }
 export interface ModalConfig {
     title: string;

package/components/tag/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@tekus/design-system/components/tag" />
+export * from './public-api';

package/components/tag/public-api.d.ts

@@ -0,0 +1 @@
+export * from './src/tag.component';

package/components/tag/src/tag.component.d.ts

@@ -0,0 +1,44 @@
+import * as i0 from "@angular/core";
+export type TagSeverity = 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast';
+/**
+ * @component TagComponent
+ * @description
+ * A component used to categorize or label content using keywords.
+ * It wraps PrimeNG's `p-tag` component with custom styling and behavior.
+ *
+ * This component supports:
+ * - `value`: The text to display. Truncates automatically if it exceeds 15 characters.
+ * - `severity`: The color scheme of the tag. Options: `'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast'`.
+ * - Rounded corners by default.
+ *
+ * @usage
+ * ### Basic Usage
+ * ```html
+ * <tk-tag value="New" severity="success"></tk-tag>
+ * ```
+ */
+export declare class TagComponent {
+    /** The text content to be displayed in the tag. */
+    value: import("@angular/core").InputSignal<string>;
+    /**
+     * The severity level of the tag, which determines its color and styling.
+     * @default 'secondary'
+     */
+    severity: import("@angular/core").InputSignal<TagSeverity>;
+    /**
+     * Maximum number of characters to display before truncation.
+     */
+    private readonly TRUNCATION_LIMIT;
+    /**
+     * Computed property that maps the custom `TagSeverity` to the underlying PrimeNG `severity`.
+     * Returns `undefined` for 'primary' as it uses the default style, and maps others accordingly.
+     */
+    primeSeverity: import("@angular/core").Signal<string | undefined>;
+    /**
+     * Computed property that processes the `value` for display.
+     * Truncates the text with an ellipsis if it exceeds the defined limit.
+     */
+    displayValue: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagComponent, "tk-tag", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

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

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Output, Input, Component } from '@angular/core';
 import * as i1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
+import { IconComponent } from '@tekus/design-system/components/icon';
 
 /**
  * @component ButtonComponent
@@ -32,14 +33,6 @@ import { ButtonModule } from 'primeng/button';
  */
 class ButtonComponent {
     constructor() {
-        /**
-         * @property {string} label
-         * @description
-         * Text displayed inside the button.
-         *
-         * @default `'Label'`
-         */
-        this.label = 'Label';
         /**
          * @property {boolean} disabled
          * @description
@@ -102,11 +95,11 @@ class ButtonComponent {
             this.clicked.emit('mouse');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ButtonComponent, isStandalone: true, selector: "tk-button", inputs: { label: "label", disabled: "disabled", type: "type", severity: "severity", link: "link" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<p-button\n  class=\"tk-button\"\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [type]=\"type\"\n  [severity]=\"link ? null : severity\"\n  [link]=\"link\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n</p-button>\n", styles: [":host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ButtonComponent, isStandalone: true, selector: "tk-button", inputs: { label: "label", disabled: "disabled", type: "type", severity: "severity", variant: "variant", link: "link", icon: "icon" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<p-button\n  class=\"tk-button\"\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [type]=\"type\"\n  [severity]=\"link ? null : severity\"\n  [variant]=\"variant\"\n  [link]=\"link\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n\n  @if (icon) {\n   <tk-icon [icon]=\"icon\"></tk-icon>\n  }\n</p-button>\n", styles: [":host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"], outputs: ["iconChange", "styleIconChange", "colorChange", "sizeChange", "disabledChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-button', standalone: true, imports: [ButtonModule], template: "<p-button\n  class=\"tk-button\"\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [type]=\"type\"\n  [severity]=\"link ? null : severity\"\n  [link]=\"link\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n</p-button>\n", styles: [":host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}\n"] }]
+            args: [{ selector: 'tk-button', standalone: true, imports: [ButtonModule, IconComponent], template: "<p-button\n  class=\"tk-button\"\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [type]=\"type\"\n  [severity]=\"link ? null : severity\"\n  [variant]=\"variant\"\n  [link]=\"link\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n\n  @if (icon) {\n   <tk-icon [icon]=\"icon\"></tk-icon>\n  }\n</p-button>\n", styles: [":host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], disabled: [{
@@ -115,8 +108,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }], severity: [{
                 type: Input
+            }], variant: [{
+                type: Input
             }], link: [{
                 type: Input
+            }], icon: [{
+                type: Input
             }], clicked: [{
                 type: Output
             }] } });

package/fesm2022/tekus-design-system-components-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-button.mjs","sources":["../../../projects/design-system/components/button/src/button.component.ts","../../../projects/design-system/components/button/src/button.component.html","../../../projects/design-system/components/button/tekus-design-system-components-button.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { ButtonModule } from 'primeng/button';\n\nexport type ButtonSeverity = 'primary' | 'secondary' | 'danger';\n\n/**\n * @component ButtonComponent\n * @description\n * Atomic button component that provides a reusable and customizable button element\n * across the application.\n * It uses PrimeNG’s `ButtonModule` under the hood and allows setting different visual\n * variants (severity), button types, and disabled states.\n *\n * This component ensures consistent design and behavior in all button interactions.\n * It is accessible via both mouse clicks and keyboard actions (Enter/Space).\n *\n * @usage\n * ```html\n * <tk-button\n * label=\"Save\"\n * [severity]=\"'primary'\"\n * [type]=\"'submit'\"\n * (clicked)=\"handleSave()\">\n * </tk-button>\n *\n * <tk-button\n * label=\"Cancel\"\n * [severity]=\"'secondary'\"\n * [disabled]=\"true\">\n * </tk-button>\n * ```\n */\n@Component({\n  selector: 'tk-button',\n  standalone: true,\n  imports: [ButtonModule],\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.scss'],\n})\nexport class ButtonComponent {\n  /**\n   * @property {string} label\n   * @description\n   * Text displayed inside the button.\n   *\n   * @default `'Label'`\n   */\n  @Input() label = 'Label';\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Disables the button, preventing user interaction and applying a visual style\n   * that indicates the inactive state.\n   *\n   * @default `false`\n   */\n  @Input() disabled = false;\n\n  /**\n   * @property {'button' | 'submit'} type\n   * @description\n   * Defines the button’s HTML type attribute.\n   * - `'button'`: Standard clickable button (default).\n   * - `'submit'`: Used to submit forms.\n   *\n   * @default `'button'`\n   */\n  @Input() type: 'button' | 'submit' = 'button';\n\n  /**\n   * @property {ButtonSeverity} severity\n   * @description\n   * Defines the visual importance or style of the button.\n   * - `'primary'`:  Default, neutral action.\n   * - `'secondary'`: Secondary option.\n   * - `'danger'`: Destructive or warning actions.\n   *\n   * @default `'secondary'`\n   */\n  @Input() severity: ButtonSeverity = 'primary';\n\n  /**\n   * @property {boolean} link\n   * @description\n   * When true, the button will be styled as a link (text only with underline).\n   *\n   * @default false\n   */\n  @Input() link = false;\n\n  /**\n   * @event clicked\n   * @description\n   * Emits when the button is activated via click or keyboard (Enter/Space),\n   * unless the button is disabled.\n   *\n   * @example\n   * ```html\n   * <tk-button label=\"Click me\" (clicked)=\"handleClick()\"></tk-button>\n   * ```\n   */\n  @Output() clicked = new EventEmitter<'mouse' | 'keyboard'>();\n\n  /**\n   * @method onButtonClick\n   * @description\n   * Handles the native click event. Emits the `clicked` event if the button\n   * is not disabled.\n   */\n  onButtonClick(): void {\n    if (!this.disabled) this.clicked.emit('mouse');\n  }\n}\n","<p-button\n  class=\"tk-button\"\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [type]=\"type\"\n  [severity]=\"link ? null : severity\"\n  [link]=\"link\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n</p-button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BG;MAQU,eAAe,CAAA;AAP5B,IAAA,WAAA,GAAA;AAQE;;;;;;AAMG;QACM,IAAK,CAAA,KAAA,GAAG,OAAO;AAExB;;;;;;;AAOG;QACM,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEzB;;;;;;;;AAQG;QACM,IAAI,CAAA,IAAA,GAAwB,QAAQ;AAE7C;;;;;;;;;AASG;QACM,IAAQ,CAAA,QAAA,GAAmB,SAAS;AAE7C;;;;;;AAMG;QACM,IAAI,CAAA,IAAA,GAAG,KAAK;AAErB;;;;;;;;;;AAUG;AACO,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,YAAY,EAAwB;AAW7D;AATC;;;;;AAKG;IACH,aAAa,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;;+GAxErC,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvC5B,8RAWA,EAAA,MAAA,EAAA,CAAA,orBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDwBY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,OAAA,EAAA,UAAA,EAAA,SAAA,EAAA,aAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,SAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,eAAA,EAAA,WAAA,EAAA,WAAA,EAAA,OAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAIX,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EACT,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,8RAAA,EAAA,MAAA,EAAA,CAAA,orBAAA,CAAA,EAAA;8BAYd,KAAK,EAAA,CAAA;sBAAb;gBAUQ,QAAQ,EAAA,CAAA;sBAAhB;gBAWQ,IAAI,EAAA,CAAA;sBAAZ;gBAYQ,QAAQ,EAAA,CAAA;sBAAhB;gBASQ,IAAI,EAAA,CAAA;sBAAZ;gBAaS,OAAO,EAAA,CAAA;sBAAhB;;;AEtGH;;AAEG;;;;"}
+{"version":3,"file":"tekus-design-system-components-button.mjs","sources":["../../../projects/design-system/components/button/src/button.component.ts","../../../projects/design-system/components/button/src/button.component.html","../../../projects/design-system/components/button/tekus-design-system-components-button.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { ButtonModule } from 'primeng/button';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n\nexport type ButtonSeverity = 'primary' | 'secondary' | 'danger';\nexport type Variant = 'text' | 'outlined';\n/**\n * @component ButtonComponent\n * @description\n * Atomic button component that provides a reusable and customizable button element\n * across the application.\n * It uses PrimeNG’s `ButtonModule` under the hood and allows setting different visual\n * variants (severity), button types, and disabled states.\n *\n * This component ensures consistent design and behavior in all button interactions.\n * It is accessible via both mouse clicks and keyboard actions (Enter/Space).\n *\n * @usage\n * ```html\n * <tk-button\n * label=\"Save\"\n * [severity]=\"'primary'\"\n * [type]=\"'submit'\"\n * (clicked)=\"handleSave()\">\n * </tk-button>\n *\n * <tk-button\n * label=\"Cancel\"\n * [severity]=\"'secondary'\"\n * [disabled]=\"true\">\n * </tk-button>\n * ```\n */\n@Component({\n  selector: 'tk-button',\n  standalone: true,\n  imports: [ButtonModule, IconComponent],\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.scss'],\n})\nexport class ButtonComponent {\n  /**\n   * @property {string} label\n   * @description\n   * Text displayed inside the button.\n   *\n   * @description\n   * Text displayed inside the button.\n   *\n   * @default `undefined`\n   */\n  @Input() label?: string;\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Disables the button, preventing user interaction and applying a visual style\n   * that indicates the inactive state.\n   *\n   * @default `false`\n   */\n  @Input() disabled = false;\n\n  /**\n   * @property {'button' | 'submit'} type\n   * @description\n   * Defines the button’s HTML type attribute.\n   * - `'button'`: Standard clickable button (default).\n   * - `'submit'`: Used to submit forms.\n   *\n   * @default `'button'`\n   */\n  @Input() type: 'button' | 'submit' = 'button';\n\n  /**\n   * @property {ButtonSeverity} severity\n   * @description\n   * Defines the visual importance or style of the button.\n   * - `'primary'`:  Default, neutral action.\n   * - `'secondary'`: Secondary option.\n   * - `'danger'`: Destructive or warning actions.\n   *\n   * @default `'secondary'`\n   */\n  @Input() severity: ButtonSeverity = 'primary';\n\n  /**\n   * @property {'text' | 'outlined'} variant\n   * @description\n   * Defines the variant of the button.\n   * - `'text'`: Text-only button.\n   * - `'outlined'`: Outlined button.\n   *\n   * @default `undefined`\n   */\n  @Input() variant?: Variant;\n\n  /**\n   * @property {boolean} link\n   * @description\n   * When true, the button will be styled as a link (text only with underline).\n   *\n   * @default false\n   */\n  @Input() link = false;\n\n  /**\n   * @property {string} icon\n   * @description\n   * - If `label` is provided, the icon is displayed to the left.\n   * - If `label` is empty, the button is rendered as an icon-only button.\n   *\n   * @default `undefined`\n   */\n  @Input() icon?: string;\n\n  /**\n   * @event clicked\n   * @description\n   * Emits when the button is activated via click or keyboard (Enter/Space),\n   * unless the button is disabled.\n   *\n   * @example\n   * ```html\n   * <tk-button label=\"Click me\" (clicked)=\"handleClick()\"></tk-button>\n   * ```\n   */\n  @Output() clicked = new EventEmitter<'mouse' | 'keyboard'>();\n\n  /**\n   * @method onButtonClick\n   * @description\n   * Handles the native click event. Emits the `clicked` event if the button\n   * is not disabled.\n   */\n  onButtonClick(): void {\n    if (!this.disabled) this.clicked.emit('mouse');\n  }\n}\n","<p-button\n  class=\"tk-button\"\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [type]=\"type\"\n  [severity]=\"link ? null : severity\"\n  [variant]=\"variant\"\n  [link]=\"link\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n\n  @if (icon) {\n   <tk-icon [icon]=\"icon\"></tk-icon>\n  }\n</p-button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BG;MAQU,eAAe,CAAA;AAP5B,IAAA,WAAA,GAAA;AAoBE;;;;;;;AAOG;QACM,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEzB;;;;;;;;AAQG;QACM,IAAI,CAAA,IAAA,GAAwB,QAAQ;AAE7C;;;;;;;;;AASG;QACM,IAAQ,CAAA,QAAA,GAAmB,SAAS;AAa7C;;;;;;AAMG;QACM,IAAI,CAAA,IAAA,GAAG,KAAK;AAYrB;;;;;;;;;;AAUG;AACO,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,YAAY,EAAwB;AAW7D;AATC;;;;;AAKG;IACH,aAAa,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;;+GAhGrC,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,ECzC5B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,sXAgBA,EDqBY,MAAA,EAAA,CAAA,6zBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,kbAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,YAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAI1B,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,cACT,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,sXAAA,EAAA,MAAA,EAAA,CAAA,6zBAAA,CAAA,EAAA;8BAe7B,KAAK,EAAA,CAAA;sBAAb;gBAUQ,QAAQ,EAAA,CAAA;sBAAhB;gBAWQ,IAAI,EAAA,CAAA;sBAAZ;gBAYQ,QAAQ,EAAA,CAAA;sBAAhB;gBAWQ,OAAO,EAAA,CAAA;sBAAf;gBASQ,IAAI,EAAA,CAAA;sBAAZ;gBAUQ,IAAI,EAAA,CAAA;sBAAZ;gBAaS,OAAO,EAAA,CAAA;sBAAhB;;;AEhIH;;AAEG;;;;"}

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

@@ -163,7 +163,7 @@ class FallbackViewComponent {
         this.linkAction.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FallbackViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "link"], outputs: ["clicked"] }, { kind: "ngmodule", type: CardModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon"], outputs: ["clicked"] }, { kind: "ngmodule", type: CardModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FallbackViewComponent, decorators: [{
             type: Component,

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';\nimport { CommonModule } from '@angular/common';\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: [CommonModule, 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,IAAI,CAAA,IAAA,GAAqB,SAAS;AAE3C;;;;;;AAMG;QACM,IAAQ,CAAA,QAAA,GAAG,EAAE;AAEtB;;;AAGG;QACM,IAAe,CAAA,eAAA,GAAG,EAAE;AAE7B;;;;;;AAMG;QACM,IAAK,CAAA,KAAA,GAAG,EAAE;AAEnB;;;;;;AAMG;QACM,IAAO,CAAA,OAAA,GAAG,EAAE;AAErB;;;;;;AAMG;QACM,IAAW,CAAA,WAAA,GAAG,EAAE;AAEzB;;;;;;;AAOG;QACM,IAAS,CAAA,SAAA,GAAG,EAAE;AAEvB;;;;;;;AAOG;QACM,IAAc,CAAA,cAAA,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;AAnBC;;;;;AAKG;IACH,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;;AAG1B;;;;;AAKG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;;+GA3Gb,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,SAAA,EAAA,IAAA,EAAA,qBAAqB,+VChFlC,slCAuCA,EAAA,MAAA,EAAA,CAAA,+sDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDoCY,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,eAAe,sIAAE,UAAU,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAKxC,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBARjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAChB,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,YAAY,EAAE,eAAe,EAAE,UAAU,CAAC,EAGrC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,slCAAA,EAAA,MAAA,EAAA,CAAA,+sDAAA,CAAA,EAAA;8BAY5B,IAAI,EAAA,CAAA;sBAAZ;gBASQ,QAAQ,EAAA,CAAA;sBAAhB;gBAMQ,eAAe,EAAA,CAAA;sBAAvB;gBASQ,KAAK,EAAA,CAAA;sBAAb;gBASQ,OAAO,EAAA,CAAA;sBAAf;gBASQ,WAAW,EAAA,CAAA;sBAAnB;gBAUQ,SAAS,EAAA,CAAA;sBAAjB;gBAUQ,cAAc,EAAA,CAAA;sBAAtB;gBAQS,YAAY,EAAA,CAAA;sBAArB;gBAQS,UAAU,EAAA,CAAA;sBAAnB;;;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  Component,\n  EventEmitter,\n  Input,\n  Output,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\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: [CommonModule, 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,IAAI,CAAA,IAAA,GAAqB,SAAS;AAE3C;;;;;;AAMG;QACM,IAAQ,CAAA,QAAA,GAAG,EAAE;AAEtB;;;AAGG;QACM,IAAe,CAAA,eAAA,GAAG,EAAE;AAE7B;;;;;;AAMG;QACM,IAAK,CAAA,KAAA,GAAG,EAAE;AAEnB;;;;;;AAMG;QACM,IAAO,CAAA,OAAA,GAAG,EAAE;AAErB;;;;;;AAMG;QACM,IAAW,CAAA,WAAA,GAAG,EAAE;AAEzB;;;;;;;AAOG;QACM,IAAS,CAAA,SAAA,GAAG,EAAE;AAEvB;;;;;;;AAOG;QACM,IAAc,CAAA,cAAA,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;AAnBC;;;;;AAKG;IACH,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;;AAG1B;;;;;AAKG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;;+GA3Gb,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,SAAA,EAAA,IAAA,EAAA,qBAAqB,+VChFlC,slCAuCA,EAAA,MAAA,EAAA,CAAA,+sDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDoCY,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,eAAe,yJAAE,UAAU,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAKxC,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBARjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAChB,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,YAAY,EAAE,eAAe,EAAE,UAAU,CAAC,EAGrC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,slCAAA,EAAA,MAAA,EAAA,CAAA,+sDAAA,CAAA,EAAA;8BAY5B,IAAI,EAAA,CAAA;sBAAZ;gBASQ,QAAQ,EAAA,CAAA;sBAAhB;gBAMQ,eAAe,EAAA,CAAA;sBAAvB;gBASQ,KAAK,EAAA,CAAA;sBAAb;gBASQ,OAAO,EAAA,CAAA;sBAAf;gBASQ,WAAW,EAAA,CAAA;sBAAnB;gBAUQ,SAAS,EAAA,CAAA;sBAAjB;gBAUQ,cAAc,EAAA,CAAA;sBAAtB;gBAQS,YAAY,EAAA,CAAA;sBAArB;gBAQS,UAAU,EAAA,CAAA;sBAAnB;;;AExKH;;AAEG;;;;"}