@tekus/design-system 5.1.3 → 5.2.0

package/components/modal/index.d.ts

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

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

@@ -0,0 +1,3 @@
+export * from './src/modal.component';
+export * from './src/services/modal.service';
+export * from './src/modal.types';

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

@@ -0,0 +1,83 @@
+import { EventEmitter } from '@angular/core';
+import { ModalFooterButton, ModalSizeType } from './modal.types';
+import * as i0 from "@angular/core";
+/**
+ * @component ModalComponent
+ * @description
+ * A programmatically controlled modal dialog used for displaying dynamic content, titles, and footer actions.
+ * The modal is not instantiated via template bindings, but rather opened through a service with a configuration object.
+ *
+ * This component supports:
+ * - Configurable title and content.
+ * - Optional footer buttons with callbacks and return values.
+ * - Multiple sizes: `'small' | 'large' | 'full'`.
+ * - Closable modal and outside-click behavior.
+ * - Passing arbitrary data to the modal instance.
+ *
+ * @usage
+ * ### Open a modal from TypeScript using the modal service
+ * ```ts
+ * this.modalService.open({
+ *   title: 'Demo Modal',
+ *   content: 'This modal is opened from TypeScript using the service.',
+ *   footerButtons: [
+ *     {
+ *       label: 'Accept',
+ *       severity: 'secondary',
+ *       action: () => console.log('Accept clicked'),
+ *       returnValue: true,
+ *     },
+ *     {
+ *       label: 'Cancel',
+ *       severity: 'danger',
+ *       action: () => console.log('Cancel clicked'),
+ *       returnValue: false,
+ *     },
+ *   ],
+ *   size: 'small',
+ *   closable: true,
+ *   closeOnOutsideClick: false,
+ * }).subscribe((result) => {
+ *   console.log('Modal closed with value:', result);
+ * });
+ * ```
+ */
+export declare class ModalComponent {
+    /** The title displayed at the top of the modal */
+    title: import("@angular/core").InputSignal<string>;
+    /** The main content of the modal */
+    content: import("@angular/core").InputSignal<string | null>;
+    /** Array of footer buttons with label, callback, and return value */
+    footerButtons: import("@angular/core").InputSignal<ModalFooterButton[]>;
+    /** Modal size: 'small', 'large', or 'full' */
+    size: import("@angular/core").InputSignal<ModalSizeType>;
+    /** Whether the modal can be closed by the user */
+    closable: import("@angular/core").InputSignal<boolean>;
+    /** Whether clicking outside closes the modal */
+    closeOnOutsideClick: import("@angular/core").InputSignal<boolean>;
+    /** Computed: whether the modal has footer buttons */
+    hasFooter: import("@angular/core").Signal<boolean>;
+    /** Computed: calculates modal width based on `size` */
+    modalWidth: import("@angular/core").Signal<"67.5rem" | "98vw" | "25rem">;
+    /** Visibility flag */
+    isOpened: boolean;
+    /** Emits when the modal closes, passing the return value from footer buttons or null */
+    readonly onClose: EventEmitter<unknown>;
+    private alreadyEmitted;
+    private returnValueOnClose;
+    /** Opens the modal */
+    open(): void;
+    /** Closes the modal and emits onClose with null */
+    handleClose(): void;
+    /** Closes the modal without emitting an event */
+    close(): void;
+    /**
+     * Handles footer button actions.
+     * Executes the action callback, emits `onClose` with the provided returnValue, then closes the modal.
+     * @param action Callback to execute when the button is clicked
+     * @param returnValue Value emitted on modal close
+     */
+    handleAction(action: () => void, 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

@@ -0,0 +1,16 @@
+export type ModalSizeType = 'small' | 'large' | 'full';
+export type SeverityType = 'primary' | 'secondary' | 'danger';
+export interface ModalFooterButton {
+    label: string;
+    severity: SeverityType;
+    action: () => void;
+    returnValue?: unknown;
+}
+export interface ModalConfig {
+    title: string;
+    content?: string;
+    footerButtons?: ModalFooterButton[];
+    size?: ModalSizeType;
+    closable?: boolean;
+    closeOnOutsideClick?: boolean;
+}

package/components/modal/src/services/modal.service.d.ts

@@ -0,0 +1,16 @@
+import { ApplicationRef, ComponentRef, Injector } from '@angular/core';
+import { ModalComponent } from '../modal.component';
+import { Observable } from 'rxjs';
+import { ModalConfig } from '../modal.types';
+import * as i0 from "@angular/core";
+export declare class ModalService {
+    private readonly injector;
+    private readonly appRef;
+    private modalRef;
+    constructor(injector: Injector, appRef: ApplicationRef);
+    get _modalRefForTesting(): ComponentRef<ModalComponent> | null;
+    set _modalRefForTesting(ref: ComponentRef<ModalComponent> | null);
+    open(config: ModalConfig): Observable<unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ModalService>;
+}

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

@@ -102,11 +102,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-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-primary-400, #45338c)!important}\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: "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"] }] }); }
 }
 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-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-primary-400, #45338c)!important}\n"] }]
+            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"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], disabled: [{

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,ubAAA,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,ubAAA,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';\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;;;;"}

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

@@ -163,11 +163,11 @@ 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-4, 1rem);padding:var(--tk-spacing-8, 2rem) var(--tk-spacing-4, 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-6, 1.5rem)}.tk-fallback-view__title,.tk-fallback-view>[title]{font-size:var(--tk-font-size-md, 1.5rem);font-weight:var(--tk-font-weight-bold, 700);margin:0;max-width:31.25rem;color:var(--tk-text-default, #191a1b)}.tk-fallback-view__message,.tk-fallback-view>[message]{font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-regular, 400);margin:0;max-width:31.25rem;color:var(--tk-text-default, #191a1b)}.tk-fallback-view__actions,.tk-fallback-view>[actions]{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-3, .75rem)}.tk-fallback-view--section{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:var(--tk-spacing-4, 1rem);width:100%;min-height:3.75rem;padding:var(--tk-spacing-6, 1.5rem) var(--tk-spacing-4, 1rem);background-color:var(--tk-surface-0, #ffffff);color:var(--tk-text-default, #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-2xs);font-weight:var(--tk-font-weight-regular)}\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", "link"], 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,
-            args: [{ selector: 'tk-fallback-view', standalone: true, imports: [CommonModule, 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-4, 1rem);padding:var(--tk-spacing-8, 2rem) var(--tk-spacing-4, 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-6, 1.5rem)}.tk-fallback-view__title,.tk-fallback-view>[title]{font-size:var(--tk-font-size-md, 1.5rem);font-weight:var(--tk-font-weight-bold, 700);margin:0;max-width:31.25rem;color:var(--tk-text-default, #191a1b)}.tk-fallback-view__message,.tk-fallback-view>[message]{font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-regular, 400);margin:0;max-width:31.25rem;color:var(--tk-text-default, #191a1b)}.tk-fallback-view__actions,.tk-fallback-view>[actions]{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-3, .75rem)}.tk-fallback-view--section{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:var(--tk-spacing-4, 1rem);width:100%;min-height:3.75rem;padding:var(--tk-spacing-6, 1.5rem) var(--tk-spacing-4, 1rem);background-color:var(--tk-surface-0, #ffffff);color:var(--tk-text-default, #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-2xs);font-weight:var(--tk-font-weight-regular)}\n"] }]
+            args: [{ selector: 'tk-fallback-view', standalone: true, imports: [CommonModule, 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: [{

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,mlDAAA,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,mlDAAA,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,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;;;;"}

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

@@ -0,0 +1,178 @@
+import * as i0 from '@angular/core';
+import { input, computed, EventEmitter, Component, createComponent, Injectable } from '@angular/core';
+import { ButtonComponent } from '@tekus/design-system/components/button';
+import * as i1 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import { Subject } from 'rxjs';
+
+/**
+ * @component ModalComponent
+ * @description
+ * A programmatically controlled modal dialog used for displaying dynamic content, titles, and footer actions.
+ * The modal is not instantiated via template bindings, but rather opened through a service with a configuration object.
+ *
+ * This component supports:
+ * - Configurable title and content.
+ * - Optional footer buttons with callbacks and return values.
+ * - Multiple sizes: `'small' | 'large' | 'full'`.
+ * - Closable modal and outside-click behavior.
+ * - Passing arbitrary data to the modal instance.
+ *
+ * @usage
+ * ### Open a modal from TypeScript using the modal service
+ * ```ts
+ * this.modalService.open({
+ *   title: 'Demo Modal',
+ *   content: 'This modal is opened from TypeScript using the service.',
+ *   footerButtons: [
+ *     {
+ *       label: 'Accept',
+ *       severity: 'secondary',
+ *       action: () => console.log('Accept clicked'),
+ *       returnValue: true,
+ *     },
+ *     {
+ *       label: 'Cancel',
+ *       severity: 'danger',
+ *       action: () => console.log('Cancel clicked'),
+ *       returnValue: false,
+ *     },
+ *   ],
+ *   size: 'small',
+ *   closable: true,
+ *   closeOnOutsideClick: false,
+ * }).subscribe((result) => {
+ *   console.log('Modal closed with value:', result);
+ * });
+ * ```
+ */
+class ModalComponent {
+    constructor() {
+        /** The title displayed at the top of the modal */
+        this.title = input('');
+        /** The main content of the modal */
+        this.content = input(null);
+        /** Array of footer buttons with label, callback, and return value */
+        this.footerButtons = input([]);
+        /** Modal size: 'small', 'large', or 'full' */
+        this.size = input('small');
+        /** Whether the modal can be closed by the user */
+        this.closable = input(true);
+        /** Whether clicking outside closes the modal */
+        this.closeOnOutsideClick = input(false);
+        /** Computed: whether the modal has footer buttons */
+        this.hasFooter = computed(() => (this.footerButtons() ?? []).length > 0);
+        /** Computed: calculates modal width based on `size` */
+        this.modalWidth = computed(() => {
+            switch (this.size()) {
+                case 'large':
+                    return '67.5rem'; // Large
+                case 'full':
+                    return '98vw'; // Full
+                default:
+                    return '25rem'; // Small
+            }
+        });
+        /** Visibility flag */
+        this.isOpened = false;
+        /** Emits when the modal closes, passing the return value from footer buttons or null */
+        this.onClose = new EventEmitter();
+        this.alreadyEmitted = false;
+        this.returnValueOnClose = null;
+    }
+    /** Opens the modal */
+    open() {
+        this.isOpened = true;
+        this.alreadyEmitted = false;
+        this.returnValueOnClose = null;
+    }
+    /** Closes the modal and emits onClose with null */
+    handleClose() {
+        if (!this.alreadyEmitted) {
+            this.onClose.emit(null);
+        }
+        else {
+            this.onClose.emit(this.returnValueOnClose);
+        }
+        this.alreadyEmitted = false;
+        this.returnValueOnClose = null;
+    }
+    /** Closes the modal without emitting an event */
+    close() {
+        this.isOpened = false;
+    }
+    /**
+     * Handles footer button actions.
+     * Executes the action callback, emits `onClose` with the provided returnValue, then closes the modal.
+     * @param action Callback to execute when the button is clicked
+     * @param returnValue Value emitted on modal close
+     */
+    handleAction(action, returnValue) {
+        if (action)
+            action();
+        this.alreadyEmitted = true;
+        this.returnValueOnClose = returnValue;
+        this.isOpened = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ModalComponent, isStandalone: true, selector: "tk-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footerButtons: { classPropertyName: "footerButtons", publicName: "footerButtons", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-dialog\n  [modal]=\"true\"\n  [(visible)]=\"isOpened\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{ width: modalWidth() }\"\n  (onHide)=\"handleClose()\"\n  class=\"tk-modal\"\n>\n  <section>\n    @if (content()) {\n      <p [innerHTML]=\"content()\" class=\"tk-modal__content\"></p>\n    }\n  </section>\n\n  @if (hasFooter()) {\n    <section class=\"tk-modal__footer\">\n      @for (btn of footerButtons()!; track $index) {\n        <tk-button\n          [label]=\"btn.label\"\n          [severity]=\"btn.severity\"\n          (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n          (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n          (keydown.space)=\"handleAction(btn.action, btn.returnValue)\"\n        />\n      }\n    </section>\n  }\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog-title{color:var(--tk-color-text-default, #212121)}:host ::ng-deep .p-dialog-close-button{color:var(--tk-surface-500, #8a8a8b)}:host ::ng-deep .p-dialog-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-surface-500, #8a8a8b)}.tk-modal__content{padding-bottom:var(--tk-spacing-paddingY-l, 1.25rem);color:var(--tk-surface-1000, #000000)}.tk-modal__footer{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "link"], outputs: ["clicked"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-modal', standalone: true, imports: [DialogModule, ButtonComponent], template: "<p-dialog\n  [modal]=\"true\"\n  [(visible)]=\"isOpened\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{ width: modalWidth() }\"\n  (onHide)=\"handleClose()\"\n  class=\"tk-modal\"\n>\n  <section>\n    @if (content()) {\n      <p [innerHTML]=\"content()\" class=\"tk-modal__content\"></p>\n    }\n  </section>\n\n  @if (hasFooter()) {\n    <section class=\"tk-modal__footer\">\n      @for (btn of footerButtons()!; track $index) {\n        <tk-button\n          [label]=\"btn.label\"\n          [severity]=\"btn.severity\"\n          (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n          (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n          (keydown.space)=\"handleAction(btn.action, btn.returnValue)\"\n        />\n      }\n    </section>\n  }\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog-title{color:var(--tk-color-text-default, #212121)}:host ::ng-deep .p-dialog-close-button{color:var(--tk-surface-500, #8a8a8b)}:host ::ng-deep .p-dialog-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-surface-500, #8a8a8b)}.tk-modal__content{padding-bottom:var(--tk-spacing-paddingY-l, 1.25rem);color:var(--tk-surface-1000, #000000)}.tk-modal__footer{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}\n"] }]
+        }] });
+
+class ModalService {
+    constructor(injector, appRef) {
+        this.injector = injector;
+        this.appRef = appRef;
+        this.modalRef = null;
+    }
+    get _modalRefForTesting() {
+        return this.modalRef;
+    }
+    set _modalRefForTesting(ref) {
+        this.modalRef = ref;
+    }
+    open(config) {
+        if (this.modalRef) {
+            return this.modalRef.instance.onClose.asObservable();
+        }
+        const componentRef = createComponent(ModalComponent, {
+            environmentInjector: this.appRef.injector,
+        });
+        this.appRef.attachView(componentRef.hostView);
+        const domElem = componentRef.hostView.rootNodes[0];
+        document.body.appendChild(domElem);
+        componentRef.setInput('title', config.title);
+        componentRef.setInput('content', config.content ?? null);
+        componentRef.setInput('footerButtons', config.footerButtons ?? []);
+        componentRef.setInput('size', config.size ?? 'small');
+        componentRef.setInput('closable', config.closable ?? true);
+        componentRef.setInput('closeOnOutsideClick', config.closeOnOutsideClick ?? false);
+        const close$ = new Subject();
+        componentRef.instance.onClose.subscribe((value) => {
+            close$.next(value);
+            close$.complete();
+            this.appRef.detachView(componentRef.hostView);
+            componentRef.destroy();
+            this.modalRef = null;
+        });
+        componentRef.instance.open();
+        this.modalRef = componentRef;
+        return close$.asObservable();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalService, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ApplicationRef }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ModalComponent, ModalService };
+//# sourceMappingURL=tekus-design-system-components-modal.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-modal.mjs","sources":["../../../projects/design-system/components/modal/src/modal.component.ts","../../../projects/design-system/components/modal/src/modal.component.html","../../../projects/design-system/components/modal/src/services/modal.service.ts","../../../projects/design-system/components/modal/tekus-design-system-components-modal.ts"],"sourcesContent":["import { Component, computed, input, EventEmitter } from '@angular/core';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { DialogModule } from 'primeng/dialog';\nimport { ModalFooterButton, ModalSizeType } from './modal.types';\n\n/**\n * @component ModalComponent\n * @description\n * A programmatically controlled modal dialog used for displaying dynamic content, titles, and footer actions.\n * The modal is not instantiated via template bindings, but rather opened through a service with a configuration object.\n *\n * This component supports:\n * - Configurable title and content.\n * - Optional footer buttons with callbacks and return values.\n * - Multiple sizes: `'small' | 'large' | 'full'`.\n * - Closable modal and outside-click behavior.\n * - Passing arbitrary data to the modal instance.\n *\n * @usage\n * ### Open a modal from TypeScript using the modal service\n * ```ts\n * this.modalService.open({\n *   title: 'Demo Modal',\n *   content: 'This modal is opened from TypeScript using the service.',\n *   footerButtons: [\n *     {\n *       label: 'Accept',\n *       severity: 'secondary',\n *       action: () => console.log('Accept clicked'),\n *       returnValue: true,\n *     },\n *     {\n *       label: 'Cancel',\n *       severity: 'danger',\n *       action: () => console.log('Cancel clicked'),\n *       returnValue: false,\n *     },\n *   ],\n *   size: 'small',\n *   closable: true,\n *   closeOnOutsideClick: false,\n * }).subscribe((result) => {\n *   console.log('Modal closed with value:', result);\n * });\n * ```\n */\n\n@Component({\n  selector: 'tk-modal',\n  standalone: true,\n  imports: [DialogModule, ButtonComponent],\n  templateUrl: './modal.component.html',\n  styleUrls: ['./modal.component.scss']\n})\nexport class ModalComponent {\n\n   /** The title displayed at the top of the modal */\n  title = input<string>('');\n  /** The main content of the modal */\n  content = input<string | null>(null);\n  /** Array of footer buttons with label, callback, and return value */\n  footerButtons = input<ModalFooterButton[]>([]);\n  /** Modal size: 'small', 'large', or 'full' */\n  size = input<ModalSizeType>('small');\n  /** Whether the modal can be closed by the user */\n  closable = input<boolean>(true);\n   /** Whether clicking outside closes the modal */\n  closeOnOutsideClick = input<boolean>(false);\n  /** Computed: whether the modal has footer buttons */\n  hasFooter = computed(() => (this.footerButtons() ?? []).length > 0);\n  /** Computed: calculates modal width based on `size` */\n  modalWidth = computed(() => {\n  switch (this.size()) {\n    case 'large':\n      return '67.5rem'; // Large\n    case 'full':\n      return '98vw';    // Full\n    default:\n      return '25rem';   // Small\n  }\n});\n\n  /** Visibility flag */\n  isOpened: boolean = false;\n\n  /** Emits when the modal closes, passing the return value from footer buttons or null */\n  readonly onClose = new EventEmitter<unknown>();\n  private alreadyEmitted = false;\n  private returnValueOnClose: unknown = null;\n\n  /** Opens the modal */\n  open() {\n    this.isOpened = true;\n    this.alreadyEmitted = false;\n    this.returnValueOnClose = null;\n  }\n\n  /** Closes the modal and emits onClose with null */\n handleClose() {\n    if (!this.alreadyEmitted) {\n      this.onClose.emit(null);\n    } else {\n      this.onClose.emit(this.returnValueOnClose);\n    }\n    this.alreadyEmitted = false;\n    this.returnValueOnClose = null;\n  }\n\n  /** Closes the modal without emitting an event */\n  close() {\n    this.isOpened = false;\n  }\n\n  /**\n   * Handles footer button actions.\n   * Executes the action callback, emits `onClose` with the provided returnValue, then closes the modal.\n   * @param action Callback to execute when the button is clicked\n   * @param returnValue Value emitted on modal close\n   */\n  handleAction(action: () => void, returnValue: unknown) {\n    if (action) action();\n    this.alreadyEmitted = true;\n    this.returnValueOnClose = returnValue;\n    this.isOpened = false;\n  }\n}\n","<p-dialog\n  [modal]=\"true\"\n  [(visible)]=\"isOpened\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{ width: modalWidth() }\"\n  (onHide)=\"handleClose()\"\n  class=\"tk-modal\"\n>\n  <section>\n    @if (content()) {\n      <p [innerHTML]=\"content()\" class=\"tk-modal__content\"></p>\n    }\n  </section>\n\n  @if (hasFooter()) {\n    <section class=\"tk-modal__footer\">\n      @for (btn of footerButtons()!; track $index) {\n        <tk-button\n          [label]=\"btn.label\"\n          [severity]=\"btn.severity\"\n          (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n          (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n          (keydown.space)=\"handleAction(btn.action, btn.returnValue)\"\n        />\n      }\n    </section>\n  }\n</p-dialog>\n","import {\n  Injectable,\n  ApplicationRef,\n  ComponentRef,\n  Injector,\n  createComponent,\n  EmbeddedViewRef,\n} from '@angular/core';\nimport { ModalComponent } from '../modal.component';\nimport { Observable, Subject } from 'rxjs';\nimport { ModalConfig } from '../modal.types';\n\n@Injectable({ providedIn: 'root' })\nexport class ModalService {\n  private modalRef: ComponentRef<ModalComponent> | null = null;\n\n  constructor(\n    private readonly injector: Injector,\n    private readonly appRef: ApplicationRef\n  ) {}\n\n  get _modalRefForTesting(): ComponentRef<ModalComponent> | null {\n    return this.modalRef;\n  }\n  set _modalRefForTesting(ref: ComponentRef<ModalComponent> | null) {\n    this.modalRef = ref;\n  }\n\n  open(config: ModalConfig): Observable<unknown> {\n  if (this.modalRef) {\n    return this.modalRef.instance.onClose.asObservable();\n  }\n\n    const componentRef = createComponent(ModalComponent, {\n      environmentInjector: this.appRef.injector,\n    });\n\n    this.appRef.attachView(componentRef.hostView);\n\n    const domElem = (componentRef.hostView as EmbeddedViewRef<unknown>).rootNodes[0] as HTMLElement;\n    document.body.appendChild(domElem);\n\n    componentRef.setInput('title', config.title);\n    componentRef.setInput('content', config.content ?? null);\n    componentRef.setInput('footerButtons', config.footerButtons ?? []);\n    componentRef.setInput('size', config.size ?? 'small');\n    componentRef.setInput('closable', config.closable ?? true);\n    componentRef.setInput('closeOnOutsideClick', config.closeOnOutsideClick ?? false);\n\n    const close$ = new Subject<unknown>();\n\n    componentRef.instance.onClose.subscribe((value) => {\n      close$.next(value);\n      close$.complete();\n\n      this.appRef.detachView(componentRef.hostView);\n      componentRef.destroy();\n      this.modalRef = null;\n    });\n\n    componentRef.instance.open();\n    this.modalRef = componentRef;\n\n    return close$.asObservable();\n  }\n}\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-core-types.mjs

@@ -47,34 +47,48 @@ const Breakpoints = {
 const TkPreset = definePreset(Aura, {
     semantic: {
         primary: {
-            500: 'var(--tk-color-base-primary-500)',
-            400: 'var(--tk-color-base-primary-400)',
+            50: 'var(--tk-color-base-primary-50)',
+            100: 'var(--tk-color-base-primary-100)',
+            200: 'var(--tk-color-base-primary-200)',
             300: 'var(--tk-color-base-primary-300)',
+            400: 'var(--tk-color-base-primary-400)',
+            500: 'var(--tk-color-base-primary-500)',
+            600: 'var(--tk-color-base-primary-600)',
+            700: 'var(--tk-color-base-primary-700)',
+            800: 'var(--tk-color-base-primary-800)',
+            900: 'var(--tk-color-base-primary-900)',
+            950: 'var(--tk-color-base-primary-950)'
+        },
+        red: {
+            50: 'var(--tk-color-base-red-50)',
+            100: 'var(--tk-color-base-red-100)',
+            200: 'var(--tk-color-base-red-200)',
+            300: 'var(--tk-color-base-red-300)',
+            400: 'var(--tk-color-base-red-400)',
+            500: 'var(--tk-color-base-red-500)',
+            600: 'var(--tk-color-base-red-600)',
+            700: 'var(--tk-color-base-red-700)',
+            800: 'var(--tk-color-base-red-800)',
+            900: 'var(--tk-color-base-red-900)',
+            950: 'var(--tk-color-base-red-950)'
         },
         surface: {
             0: 'var(--tk-color-base-surface-0)',
-        },
-        text: {
-            default: 'var(--tk-color-text-default)',
+            50: 'var(--tk-color-base-surface-50)',
+            100: 'var(--tk-color-base-surface-100)',
+            200: 'var(--tk-color-base-surface-200)',
+            300: 'var(--tk-color-base-surface-300)',
+            400: 'var(--tk-color-base-surface-400)',
+            500: 'var(--tk-color-base-surface-500)',
+            600: 'var(--tk-color-base-surface-600)',
+            700: 'var(--tk-color-base-surface-700)',
+            800: 'var(--tk-color-base-surface-800)',
+            900: 'var(--tk-color-base-surface-900)',
+            950: 'var(--tk-color-base-surface-950)'
         },
     },
     font: {
-        family: 'var(tk-font-family)',
-        size: {
-            md: 'var(--tk-font-size-base-150)',
-            '2xs': 'var(--tk-font-size-base-100)',
-        },
-        weight: {
-            regular: 'var(--tk-font-weight-400)',
-            medium: '500',
-            bold: 'var(--tk-font-weight-600)',
-        },
-    },
-    spacing: {
-        3: 'var(--tk-spacing-base-75)',
-        4: 'var(--tk-spacing-base-100)',
-        6: 'var(--tk-spacing-base-150)',
-        8: 'var(--tk-spacing-base-200)',
+        family: 'var(--tk-font-family)',
     },
     components: {
         button: {
@@ -89,58 +103,66 @@ const TkPreset = definePreset(Aura, {
             },
             colorScheme: {
                 light: {
-                    primary: {
-                        background: '{primary.500}',
-                        color: '{surface.0}',
-                        hoverBackground: '{primary.400}',
-                        hoverColor: '{surface.0}',
-                        activeBackground: '{primary.400}',
-                        activeColor: '{surface.0}',
-                        borderColor: 'transparent',
-                        hoverBorderColor: 'transparent',
-                        activeBorderColor: 'transparent',
+                    root: {
+                        primary: {
+                            hoverBackground: 'var(--tk-color-base-primary-400)',
+                            activeBackground: 'var(--tk-color-base-primary-400)',
+                            hoverBorderColor: 'transparent',
+                            activeBorderColor: 'transparent',
+                        },
+                        secondary: {
+                            background: 'var(--tk-color-base-surface-0)',
+                            hoverBackground: 'var(--tk-color-base-surface-100)',
+                            borderColor: 'var(--tk-color-base-surface-200)',
+                            hoverBorderColor: 'var(--tk-color-base-surface-200)',
+                            activeBorderColor: 'var(--tk-color-base-surface-200)',
+                        },
                     },
-                    link: {
-                        textDecoration: 'underline',
-                        background: 'none',
-                        boxShadow: 'none',
-                        color: '{primary.500}',
-                        fontSize: '{font.size.2xs}',
-                        fontWeight: '{font.weight.medium}',
-                        hoverColor: '{primary.400}',
-                        hoverBackground: 'none',
-                        activeColor: '{primary.300}',
-                        activeBackground: 'none',
+                    text: {
+                        secondary: {
+                            hoverBackground: 'var(--tk-color-base-surface-200)',
+                            activeBackground: 'var(--tk-color-base-surface-200)',
+                        },
                     },
                 },
                 dark: {
                     primary: {
-                        background: '{primary.500}',
-                        color: '{surface.0}',
-                        hoverBackground: '{primary.400}',
-                        hoverColor: '{surface.0}',
-                        activeBackground: '{primary.400}',
-                        activeColor: '{surface.0}',
+                        background: 'var(--tk-color-base-primary-500)',
+                        hoverBackground: 'var(--tk-color-base-primary-400)',
+                        activeBackground: 'var(--tk-color-base-primary-400)',
                         borderColor: 'transparent',
                         hoverBorderColor: 'transparent',
                         activeBorderColor: 'transparent',
                     },
-                    link: {
-                        textDecoration: 'underline',
-                        background: 'none',
-                        boxShadow: 'none',
-                        color: '{primary.500}',
-                        fontSize: '{font.size.2xs}',
-                        fontWeight: '{font.weight.medium}',
-                        hoverColor: '{primary.400}',
-                        hoverBackground: 'none',
-                        activeColor: '{primary.300}',
-                        activeBackground: 'none',
+                    secondary: {
+                        background: 'var(--tk-color-base-surface-0)',
+                        hoverBackground: 'var(--tk-color-base-surface-200)',
+                        borderColor: 'var(--tk-color-base-surface-200)',
+                        hoverBorderColor: 'var(--tk-color-base-surface-200)',
+                        activeBorderColor: 'var(--tk-color-base-surface-200)',
                     },
+                    danger: {
+                        background: 'var(--tk-color-base-red-500)',
+                        hoverBackground: 'var(--tk-color-base-red-600)',
+                        activeBackground: 'var(--tk-color-base-red-700)',
+                        borderColor: 'var(--tk-color-base-red-500)',
+                        hoverBorderColor: 'var(--tk-color-base-red-600)',
+                        activeBorderColor: 'var(--tk-color-base-red-700)',
+                    }
                 },
             },
         },
-    },
+        dialog: {
+            colorScheme: {
+                dark: {
+                    root: {
+                        background: 'var(--tk-color-base-surface-0)',
+                        borderColor: 'var(--tk-color-base-surface-200)',
+                    },
+                }
+            }
+        }
+    }
 });
 
 function themeFactory(config, document) {

package/fesm2022/tekus-design-system-core-types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-core-types.mjs","sources":["../../../projects/design-system/core/types/src/grids/grid.enum.ts","../../../projects/design-system/core/types/src/breakpoints/breakpoints.ts","../../../projects/design-system/core/types/src/theme/tk-preset.ts","../../../projects/design-system/core/types/src/theme/theme.provider.ts","../../../projects/design-system/core/types/tekus-design-system-core-types.ts"],"sourcesContent":["enum GapGutter {\n    normal = '24px',\n    small = '16px',\n    large = '32px',\n    extraLarge = '40px',\n}\n\nenum PaddingGridContainer {\n    large = '32px',\n    medium = '24px',\n    small = '16px'\n}\n\nenum Gutter {\n    normal = 'normal',\n    small = 'small',\n    large = 'large',\n    extraLarge = 'extraLarge',\n\n}\n\nexport {\n    Gutter,\n    GapGutter,\n    PaddingGridContainer\n}","export const Breakpoints = {\n    // Covers all devices with a width less than or equal to 360px.\n    mobileSmall: '(max-width: 360px)',\n\n    // For small phones (e.g., most modern cell phones)\n    mobile: '(min-width: 361px) and (max-width: 424px)',\n\n    // For large phones (e.g., Google Pixel, iPhone Plus/Max)\n    mobileLarge: '(min-width: 425px) and (max-width: 575px)',\n\n    // Vertical tablets and medium-sized devices\n    tabletVertical: '(min-width: 576px) and (max-width: 767px)',\n\n    // Tablets in landscape mode\n    tabletHorizontal: '(min-width: 768px) and (max-width: 991px)',\n\n    // Laptops and small desktops\n    desktopSmall: '(min-width: 992px) and (max-width: 1199px)',\n\n    // Large desks\n    desktop: '(min-width: 1200px) and (max-width: 1399px)',\n\n     // Ultra-wide screens\n    desktopLarge: '(min-width: 1400px)',\n}","import { definePreset } from '@primeng/themes';\nimport Aura from '@primeng/themes/aura';\n\nexport const TkPreset = definePreset(Aura, {\n  semantic: {\n    primary: {\n      500: 'var(--tk-color-base-primary-500)',\n      400: 'var(--tk-color-base-primary-400)',\n      300: 'var(--tk-color-base-primary-300)',\n    },\n    surface: {\n      0: 'var(--tk-color-base-surface-0)',\n    },\n    text: {\n      default: 'var(--tk-color-text-default)',\n    },\n  },\n  font: {\n    family: 'var(tk-font-family)',\n    size: {\n      md: 'var(--tk-font-size-base-150)',\n      '2xs': 'var(--tk-font-size-base-100)',\n    },\n    weight: {\n      regular: 'var(--tk-font-weight-400)',\n      medium: '500',\n      bold: 'var(--tk-font-weight-600)',\n    },\n  },\n  spacing: {\n    3: 'var(--tk-spacing-base-75)',\n    4: 'var(--tk-spacing-base-100)',\n    6: 'var(--tk-spacing-base-150)',\n    8: 'var(--tk-spacing-base-200)',\n  },\n  components: {\n    button: {\n      root: {\n        outline: 'none',\n        boxShadow: 'none',\n        border: 'none',\n        focusBoxShadow: 'none',\n      },\n      label: {\n        color: 'inherit',\n      },\n      colorScheme: {\n        light: {\n          primary: {\n            background: '{primary.500}',\n            color: '{surface.0}',\n            hoverBackground: '{primary.400}',\n            hoverColor: '{surface.0}',\n            activeBackground: '{primary.400}',\n            activeColor: '{surface.0}',\n            borderColor: 'transparent',\n            hoverBorderColor: 'transparent',\n            activeBorderColor: 'transparent',\n          },\n          link: {\n            textDecoration: 'underline',\n            background: 'none',\n            boxShadow: 'none',\n            color: '{primary.500}',\n            fontSize: '{font.size.2xs}',\n            fontWeight: '{font.weight.medium}',\n            hoverColor: '{primary.400}',\n            hoverBackground: 'none',\n            activeColor: '{primary.300}',\n            activeBackground: 'none',\n          },\n        },\n        dark: {\n          primary: {\n            background: '{primary.500}',\n            color: '{surface.0}',\n            hoverBackground: '{primary.400}',\n            hoverColor: '{surface.0}',\n            activeBackground: '{primary.400}',\n            activeColor: '{surface.0}',\n            borderColor: 'transparent',\n            hoverBorderColor: 'transparent',\n            activeBorderColor: 'transparent',\n          },\n          link: {\n            textDecoration: 'underline',\n            background: 'none',\n            boxShadow: 'none',\n            color: '{primary.500}',\n            fontSize: '{font.size.2xs}',\n            fontWeight: '{font.weight.medium}',\n            hoverColor: '{primary.400}',\n            hoverBackground: 'none',\n            activeColor: '{primary.300}',\n            activeBackground: 'none',\n          },\n        },\n      },\n    },\n  },\n});\n","import { inject, provideAppInitializer } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { PrimeNG } from 'primeng/config';\nimport { TkPreset } from './tk-preset';\n\nfunction themeFactory(config: PrimeNG, document: Document): () => void {\n  return () => {\n    const fontLink = document.createElement('link');\n    fontLink.rel = 'stylesheet';\n    fontLink.href =\n      'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap';\n    document.head.appendChild(fontLink);\n\n    const style = document.createElement('style');\n    style.innerHTML = `\n      body {\n        font-family: 'Poppins', sans-serif;\n      }\n    `;\n    document.head.appendChild(style);\n\n    config.theme.set({\n      preset: TkPreset,\n      options: {\n        prefix: 'tk',\n        darkMode: false\n      },\n    });\n  };\n}\n\nexport function provideTkTheme() {\n  return provideAppInitializer(() => {\n    const config = inject(PrimeNG);\n    const document = inject(DOCUMENT);\n    return themeFactory(config, document)();\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-core-types.mjs","sources":["../../../projects/design-system/core/types/src/grids/grid.enum.ts","../../../projects/design-system/core/types/src/breakpoints/breakpoints.ts","../../../projects/design-system/core/types/src/theme/tk-preset.ts","../../../projects/design-system/core/types/src/theme/theme.provider.ts","../../../projects/design-system/core/types/tekus-design-system-core-types.ts"],"sourcesContent":["enum GapGutter {\n    normal = '24px',\n    small = '16px',\n    large = '32px',\n    extraLarge = '40px',\n}\n\nenum PaddingGridContainer {\n    large = '32px',\n    medium = '24px',\n    small = '16px'\n}\n\nenum Gutter {\n    normal = 'normal',\n    small = 'small',\n    large = 'large',\n    extraLarge = 'extraLarge',\n\n}\n\nexport {\n    Gutter,\n    GapGutter,\n    PaddingGridContainer\n}","export const Breakpoints = {\n    // Covers all devices with a width less than or equal to 360px.\n    mobileSmall: '(max-width: 360px)',\n\n    // For small phones (e.g., most modern cell phones)\n    mobile: '(min-width: 361px) and (max-width: 424px)',\n\n    // For large phones (e.g., Google Pixel, iPhone Plus/Max)\n    mobileLarge: '(min-width: 425px) and (max-width: 575px)',\n\n    // Vertical tablets and medium-sized devices\n    tabletVertical: '(min-width: 576px) and (max-width: 767px)',\n\n    // Tablets in landscape mode\n    tabletHorizontal: '(min-width: 768px) and (max-width: 991px)',\n\n    // Laptops and small desktops\n    desktopSmall: '(min-width: 992px) and (max-width: 1199px)',\n\n    // Large desks\n    desktop: '(min-width: 1200px) and (max-width: 1399px)',\n\n     // Ultra-wide screens\n    desktopLarge: '(min-width: 1400px)',\n}","import { definePreset } from '@primeng/themes';\nimport Aura from '@primeng/themes/aura';\n\nexport const TkPreset = definePreset(Aura, {\n  semantic: {\n    primary: {\n      50: 'var(--tk-color-base-primary-50)',\n      100: 'var(--tk-color-base-primary-100)',\n      200: 'var(--tk-color-base-primary-200)',\n      300: 'var(--tk-color-base-primary-300)',\n      400: 'var(--tk-color-base-primary-400)',\n      500: 'var(--tk-color-base-primary-500)',\n      600: 'var(--tk-color-base-primary-600)',\n      700: 'var(--tk-color-base-primary-700)',\n      800: 'var(--tk-color-base-primary-800)',\n      900: 'var(--tk-color-base-primary-900)',\n      950: 'var(--tk-color-base-primary-950)'\n    },\n    red: {\n      50: 'var(--tk-color-base-red-50)',\n      100: 'var(--tk-color-base-red-100)',\n      200: 'var(--tk-color-base-red-200)',\n      300: 'var(--tk-color-base-red-300)',\n      400: 'var(--tk-color-base-red-400)',\n      500: 'var(--tk-color-base-red-500)',\n      600: 'var(--tk-color-base-red-600)',\n      700: 'var(--tk-color-base-red-700)',\n      800: 'var(--tk-color-base-red-800)',\n      900: 'var(--tk-color-base-red-900)',\n      950: 'var(--tk-color-base-red-950)'\n    },\n    surface: {\n      0: 'var(--tk-color-base-surface-0)',\n      50: 'var(--tk-color-base-surface-50)',\n      100: 'var(--tk-color-base-surface-100)',\n      200: 'var(--tk-color-base-surface-200)',\n      300: 'var(--tk-color-base-surface-300)',\n      400: 'var(--tk-color-base-surface-400)',\n      500: 'var(--tk-color-base-surface-500)',\n      600: 'var(--tk-color-base-surface-600)',\n      700: 'var(--tk-color-base-surface-700)',\n      800: 'var(--tk-color-base-surface-800)',\n      900: 'var(--tk-color-base-surface-900)',\n      950: 'var(--tk-color-base-surface-950)'\n    },\n  },\n  font: {\n    family: 'var(--tk-font-family)',\n  },\n\n  components: {\n    button: {\n      root: {\n        outline: 'none',\n        boxShadow: 'none',\n        border: 'none',\n        focusBoxShadow: 'none',\n      },\n      label: {\n        color: 'inherit',\n      },\n      colorScheme: {\n        light: {\n          root: {\n            primary: {\n              hoverBackground: 'var(--tk-color-base-primary-400)',\n              activeBackground: 'var(--tk-color-base-primary-400)',\n              hoverBorderColor: 'transparent',\n              activeBorderColor: 'transparent',\n            },\n            secondary: {\n              background: 'var(--tk-color-base-surface-0)',\n              hoverBackground: 'var(--tk-color-base-surface-100)',\n              borderColor: 'var(--tk-color-base-surface-200)',\n              hoverBorderColor: 'var(--tk-color-base-surface-200)',\n              activeBorderColor: 'var(--tk-color-base-surface-200)',\n            },\n          },\n          text: {\n            secondary: {\n                hoverBackground: 'var(--tk-color-base-surface-200)',\n                activeBackground: 'var(--tk-color-base-surface-200)',\n            },\n          },\n        },\n        dark: {\n          primary: {\n            background: 'var(--tk-color-base-primary-500)',\n            hoverBackground: 'var(--tk-color-base-primary-400)',\n            activeBackground: 'var(--tk-color-base-primary-400)',\n            borderColor: 'transparent',\n            hoverBorderColor: 'transparent',\n            activeBorderColor: 'transparent',\n          },\n          secondary: {\n            background: 'var(--tk-color-base-surface-0)',\n            hoverBackground: 'var(--tk-color-base-surface-200)',\n            borderColor: 'var(--tk-color-base-surface-200)',\n            hoverBorderColor: 'var(--tk-color-base-surface-200)',\n            activeBorderColor: 'var(--tk-color-base-surface-200)',\n          },\n          danger: {\n            background: 'var(--tk-color-base-red-500)',\n            hoverBackground: 'var(--tk-color-base-red-600)',\n            activeBackground: 'var(--tk-color-base-red-700)',\n            borderColor: 'var(--tk-color-base-red-500)',\n            hoverBorderColor: 'var(--tk-color-base-red-600)',\n            activeBorderColor: 'var(--tk-color-base-red-700)',\n          }\n        },\n      },\n    },\n    dialog: {\n      colorScheme: {\n        dark: {\n          root: {\n            background: 'var(--tk-color-base-surface-0)',\n            borderColor: 'var(--tk-color-base-surface-200)',\n          },\n        }\n      }\n    }\n  }\n});\n","import { inject, provideAppInitializer } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { PrimeNG } from 'primeng/config';\nimport { TkPreset } from './tk-preset';\n\nfunction themeFactory(config: PrimeNG, document: Document): () => void {\n  return () => {\n    const fontLink = document.createElement('link');\n    fontLink.rel = 'stylesheet';\n    fontLink.href =\n      'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap';\n    document.head.appendChild(fontLink);\n\n    const style = document.createElement('style');\n    style.innerHTML = `\n      body {\n        font-family: 'Poppins', sans-serif;\n      }\n    `;\n    document.head.appendChild(style);\n\n    config.theme.set({\n      preset: TkPreset,\n      options: {\n        prefix: 'tk',\n        darkMode: false\n      },\n    });\n  };\n}\n\nexport function provideTkTheme() {\n  return provideAppInitializer(() => {\n    const config = inject(PrimeNG);\n    const document = inject(DOCUMENT);\n    return themeFactory(config, document)();\n  });\n}\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-core.mjs

@@ -47,34 +47,48 @@ const Breakpoints = {
 const TkPreset = definePreset(Aura, {
     semantic: {
         primary: {
-            500: 'var(--tk-color-base-primary-500)',
-            400: 'var(--tk-color-base-primary-400)',
+            50: 'var(--tk-color-base-primary-50)',
+            100: 'var(--tk-color-base-primary-100)',
+            200: 'var(--tk-color-base-primary-200)',
             300: 'var(--tk-color-base-primary-300)',
+            400: 'var(--tk-color-base-primary-400)',
+            500: 'var(--tk-color-base-primary-500)',
+            600: 'var(--tk-color-base-primary-600)',
+            700: 'var(--tk-color-base-primary-700)',
+            800: 'var(--tk-color-base-primary-800)',
+            900: 'var(--tk-color-base-primary-900)',
+            950: 'var(--tk-color-base-primary-950)'
+        },
+        red: {
+            50: 'var(--tk-color-base-red-50)',
+            100: 'var(--tk-color-base-red-100)',
+            200: 'var(--tk-color-base-red-200)',
+            300: 'var(--tk-color-base-red-300)',
+            400: 'var(--tk-color-base-red-400)',
+            500: 'var(--tk-color-base-red-500)',
+            600: 'var(--tk-color-base-red-600)',
+            700: 'var(--tk-color-base-red-700)',
+            800: 'var(--tk-color-base-red-800)',
+            900: 'var(--tk-color-base-red-900)',
+            950: 'var(--tk-color-base-red-950)'
         },
         surface: {
             0: 'var(--tk-color-base-surface-0)',
-        },
-        text: {
-            default: 'var(--tk-color-text-default)',
+            50: 'var(--tk-color-base-surface-50)',
+            100: 'var(--tk-color-base-surface-100)',
+            200: 'var(--tk-color-base-surface-200)',
+            300: 'var(--tk-color-base-surface-300)',
+            400: 'var(--tk-color-base-surface-400)',
+            500: 'var(--tk-color-base-surface-500)',
+            600: 'var(--tk-color-base-surface-600)',
+            700: 'var(--tk-color-base-surface-700)',
+            800: 'var(--tk-color-base-surface-800)',
+            900: 'var(--tk-color-base-surface-900)',
+            950: 'var(--tk-color-base-surface-950)'
         },
     },
     font: {
-        family: 'var(tk-font-family)',
-        size: {
-            md: 'var(--tk-font-size-base-150)',
-            '2xs': 'var(--tk-font-size-base-100)',
-        },
-        weight: {
-            regular: 'var(--tk-font-weight-400)',
-            medium: '500',
-            bold: 'var(--tk-font-weight-600)',
-        },
-    },
-    spacing: {
-        3: 'var(--tk-spacing-base-75)',
-        4: 'var(--tk-spacing-base-100)',
-        6: 'var(--tk-spacing-base-150)',
-        8: 'var(--tk-spacing-base-200)',
+        family: 'var(--tk-font-family)',
     },
     components: {
         button: {
@@ -89,58 +103,66 @@ const TkPreset = definePreset(Aura, {
             },
             colorScheme: {
                 light: {
-                    primary: {
-                        background: '{primary.500}',
-                        color: '{surface.0}',
-                        hoverBackground: '{primary.400}',
-                        hoverColor: '{surface.0}',
-                        activeBackground: '{primary.400}',
-                        activeColor: '{surface.0}',
-                        borderColor: 'transparent',
-                        hoverBorderColor: 'transparent',
-                        activeBorderColor: 'transparent',
+                    root: {
+                        primary: {
+                            hoverBackground: 'var(--tk-color-base-primary-400)',
+                            activeBackground: 'var(--tk-color-base-primary-400)',
+                            hoverBorderColor: 'transparent',
+                            activeBorderColor: 'transparent',
+                        },
+                        secondary: {
+                            background: 'var(--tk-color-base-surface-0)',
+                            hoverBackground: 'var(--tk-color-base-surface-100)',
+                            borderColor: 'var(--tk-color-base-surface-200)',
+                            hoverBorderColor: 'var(--tk-color-base-surface-200)',
+                            activeBorderColor: 'var(--tk-color-base-surface-200)',
+                        },
                     },
-                    link: {
-                        textDecoration: 'underline',
-                        background: 'none',
-                        boxShadow: 'none',
-                        color: '{primary.500}',
-                        fontSize: '{font.size.2xs}',
-                        fontWeight: '{font.weight.medium}',
-                        hoverColor: '{primary.400}',
-                        hoverBackground: 'none',
-                        activeColor: '{primary.300}',
-                        activeBackground: 'none',
+                    text: {
+                        secondary: {
+                            hoverBackground: 'var(--tk-color-base-surface-200)',
+                            activeBackground: 'var(--tk-color-base-surface-200)',
+                        },
                     },
                 },
                 dark: {
                     primary: {
-                        background: '{primary.500}',
-                        color: '{surface.0}',
-                        hoverBackground: '{primary.400}',
-                        hoverColor: '{surface.0}',
-                        activeBackground: '{primary.400}',
-                        activeColor: '{surface.0}',
+                        background: 'var(--tk-color-base-primary-500)',
+                        hoverBackground: 'var(--tk-color-base-primary-400)',
+                        activeBackground: 'var(--tk-color-base-primary-400)',
                         borderColor: 'transparent',
                         hoverBorderColor: 'transparent',
                         activeBorderColor: 'transparent',
                     },
-                    link: {
-                        textDecoration: 'underline',
-                        background: 'none',
-                        boxShadow: 'none',
-                        color: '{primary.500}',
-                        fontSize: '{font.size.2xs}',
-                        fontWeight: '{font.weight.medium}',
-                        hoverColor: '{primary.400}',
-                        hoverBackground: 'none',
-                        activeColor: '{primary.300}',
-                        activeBackground: 'none',
+                    secondary: {
+                        background: 'var(--tk-color-base-surface-0)',
+                        hoverBackground: 'var(--tk-color-base-surface-200)',
+                        borderColor: 'var(--tk-color-base-surface-200)',
+                        hoverBorderColor: 'var(--tk-color-base-surface-200)',
+                        activeBorderColor: 'var(--tk-color-base-surface-200)',
                     },
+                    danger: {
+                        background: 'var(--tk-color-base-red-500)',
+                        hoverBackground: 'var(--tk-color-base-red-600)',
+                        activeBackground: 'var(--tk-color-base-red-700)',
+                        borderColor: 'var(--tk-color-base-red-500)',
+                        hoverBorderColor: 'var(--tk-color-base-red-600)',
+                        activeBorderColor: 'var(--tk-color-base-red-700)',
+                    }
                 },
             },
         },
-    },
+        dialog: {
+            colorScheme: {
+                dark: {
+                    root: {
+                        background: 'var(--tk-color-base-surface-0)',
+                        borderColor: 'var(--tk-color-base-surface-200)',
+                    },
+                }
+            }
+        }
+    }
 });
 
 function themeFactory(config, document) {

package/fesm2022/tekus-design-system-core.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-core.mjs","sources":["../../../projects/design-system/core/types/src/grids/grid.enum.ts","../../../projects/design-system/core/types/src/breakpoints/breakpoints.ts","../../../projects/design-system/core/types/src/theme/tk-preset.ts","../../../projects/design-system/core/types/src/theme/theme.provider.ts","../../../projects/design-system/core/tekus-design-system-core.ts"],"sourcesContent":["enum GapGutter {\n    normal = '24px',\n    small = '16px',\n    large = '32px',\n    extraLarge = '40px',\n}\n\nenum PaddingGridContainer {\n    large = '32px',\n    medium = '24px',\n    small = '16px'\n}\n\nenum Gutter {\n    normal = 'normal',\n    small = 'small',\n    large = 'large',\n    extraLarge = 'extraLarge',\n\n}\n\nexport {\n    Gutter,\n    GapGutter,\n    PaddingGridContainer\n}","export const Breakpoints = {\n    // Covers all devices with a width less than or equal to 360px.\n    mobileSmall: '(max-width: 360px)',\n\n    // For small phones (e.g., most modern cell phones)\n    mobile: '(min-width: 361px) and (max-width: 424px)',\n\n    // For large phones (e.g., Google Pixel, iPhone Plus/Max)\n    mobileLarge: '(min-width: 425px) and (max-width: 575px)',\n\n    // Vertical tablets and medium-sized devices\n    tabletVertical: '(min-width: 576px) and (max-width: 767px)',\n\n    // Tablets in landscape mode\n    tabletHorizontal: '(min-width: 768px) and (max-width: 991px)',\n\n    // Laptops and small desktops\n    desktopSmall: '(min-width: 992px) and (max-width: 1199px)',\n\n    // Large desks\n    desktop: '(min-width: 1200px) and (max-width: 1399px)',\n\n     // Ultra-wide screens\n    desktopLarge: '(min-width: 1400px)',\n}","import { definePreset } from '@primeng/themes';\nimport Aura from '@primeng/themes/aura';\n\nexport const TkPreset = definePreset(Aura, {\n  semantic: {\n    primary: {\n      500: 'var(--tk-color-base-primary-500)',\n      400: 'var(--tk-color-base-primary-400)',\n      300: 'var(--tk-color-base-primary-300)',\n    },\n    surface: {\n      0: 'var(--tk-color-base-surface-0)',\n    },\n    text: {\n      default: 'var(--tk-color-text-default)',\n    },\n  },\n  font: {\n    family: 'var(tk-font-family)',\n    size: {\n      md: 'var(--tk-font-size-base-150)',\n      '2xs': 'var(--tk-font-size-base-100)',\n    },\n    weight: {\n      regular: 'var(--tk-font-weight-400)',\n      medium: '500',\n      bold: 'var(--tk-font-weight-600)',\n    },\n  },\n  spacing: {\n    3: 'var(--tk-spacing-base-75)',\n    4: 'var(--tk-spacing-base-100)',\n    6: 'var(--tk-spacing-base-150)',\n    8: 'var(--tk-spacing-base-200)',\n  },\n  components: {\n    button: {\n      root: {\n        outline: 'none',\n        boxShadow: 'none',\n        border: 'none',\n        focusBoxShadow: 'none',\n      },\n      label: {\n        color: 'inherit',\n      },\n      colorScheme: {\n        light: {\n          primary: {\n            background: '{primary.500}',\n            color: '{surface.0}',\n            hoverBackground: '{primary.400}',\n            hoverColor: '{surface.0}',\n            activeBackground: '{primary.400}',\n            activeColor: '{surface.0}',\n            borderColor: 'transparent',\n            hoverBorderColor: 'transparent',\n            activeBorderColor: 'transparent',\n          },\n          link: {\n            textDecoration: 'underline',\n            background: 'none',\n            boxShadow: 'none',\n            color: '{primary.500}',\n            fontSize: '{font.size.2xs}',\n            fontWeight: '{font.weight.medium}',\n            hoverColor: '{primary.400}',\n            hoverBackground: 'none',\n            activeColor: '{primary.300}',\n            activeBackground: 'none',\n          },\n        },\n        dark: {\n          primary: {\n            background: '{primary.500}',\n            color: '{surface.0}',\n            hoverBackground: '{primary.400}',\n            hoverColor: '{surface.0}',\n            activeBackground: '{primary.400}',\n            activeColor: '{surface.0}',\n            borderColor: 'transparent',\n            hoverBorderColor: 'transparent',\n            activeBorderColor: 'transparent',\n          },\n          link: {\n            textDecoration: 'underline',\n            background: 'none',\n            boxShadow: 'none',\n            color: '{primary.500}',\n            fontSize: '{font.size.2xs}',\n            fontWeight: '{font.weight.medium}',\n            hoverColor: '{primary.400}',\n            hoverBackground: 'none',\n            activeColor: '{primary.300}',\n            activeBackground: 'none',\n          },\n        },\n      },\n    },\n  },\n});\n","import { inject, provideAppInitializer } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { PrimeNG } from 'primeng/config';\nimport { TkPreset } from './tk-preset';\n\nfunction themeFactory(config: PrimeNG, document: Document): () => void {\n  return () => {\n    const fontLink = document.createElement('link');\n    fontLink.rel = 'stylesheet';\n    fontLink.href =\n      'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap';\n    document.head.appendChild(fontLink);\n\n    const style = document.createElement('style');\n    style.innerHTML = `\n      body {\n        font-family: 'Poppins', sans-serif;\n      }\n    `;\n    document.head.appendChild(style);\n\n    config.theme.set({\n      preset: TkPreset,\n      options: {\n        prefix: 'tk',\n        darkMode: false\n      },\n    });\n  };\n}\n\nexport function provideTkTheme() {\n  return provideAppInitializer(() => {\n    const config = inject(PrimeNG);\n    const document = inject(DOCUMENT);\n    return themeFactory(config, document)();\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-core.mjs","sources":["../../../projects/design-system/core/types/src/grids/grid.enum.ts","../../../projects/design-system/core/types/src/breakpoints/breakpoints.ts","../../../projects/design-system/core/types/src/theme/tk-preset.ts","../../../projects/design-system/core/types/src/theme/theme.provider.ts","../../../projects/design-system/core/tekus-design-system-core.ts"],"sourcesContent":["enum GapGutter {\n    normal = '24px',\n    small = '16px',\n    large = '32px',\n    extraLarge = '40px',\n}\n\nenum PaddingGridContainer {\n    large = '32px',\n    medium = '24px',\n    small = '16px'\n}\n\nenum Gutter {\n    normal = 'normal',\n    small = 'small',\n    large = 'large',\n    extraLarge = 'extraLarge',\n\n}\n\nexport {\n    Gutter,\n    GapGutter,\n    PaddingGridContainer\n}","export const Breakpoints = {\n    // Covers all devices with a width less than or equal to 360px.\n    mobileSmall: '(max-width: 360px)',\n\n    // For small phones (e.g., most modern cell phones)\n    mobile: '(min-width: 361px) and (max-width: 424px)',\n\n    // For large phones (e.g., Google Pixel, iPhone Plus/Max)\n    mobileLarge: '(min-width: 425px) and (max-width: 575px)',\n\n    // Vertical tablets and medium-sized devices\n    tabletVertical: '(min-width: 576px) and (max-width: 767px)',\n\n    // Tablets in landscape mode\n    tabletHorizontal: '(min-width: 768px) and (max-width: 991px)',\n\n    // Laptops and small desktops\n    desktopSmall: '(min-width: 992px) and (max-width: 1199px)',\n\n    // Large desks\n    desktop: '(min-width: 1200px) and (max-width: 1399px)',\n\n     // Ultra-wide screens\n    desktopLarge: '(min-width: 1400px)',\n}","import { definePreset } from '@primeng/themes';\nimport Aura from '@primeng/themes/aura';\n\nexport const TkPreset = definePreset(Aura, {\n  semantic: {\n    primary: {\n      50: 'var(--tk-color-base-primary-50)',\n      100: 'var(--tk-color-base-primary-100)',\n      200: 'var(--tk-color-base-primary-200)',\n      300: 'var(--tk-color-base-primary-300)',\n      400: 'var(--tk-color-base-primary-400)',\n      500: 'var(--tk-color-base-primary-500)',\n      600: 'var(--tk-color-base-primary-600)',\n      700: 'var(--tk-color-base-primary-700)',\n      800: 'var(--tk-color-base-primary-800)',\n      900: 'var(--tk-color-base-primary-900)',\n      950: 'var(--tk-color-base-primary-950)'\n    },\n    red: {\n      50: 'var(--tk-color-base-red-50)',\n      100: 'var(--tk-color-base-red-100)',\n      200: 'var(--tk-color-base-red-200)',\n      300: 'var(--tk-color-base-red-300)',\n      400: 'var(--tk-color-base-red-400)',\n      500: 'var(--tk-color-base-red-500)',\n      600: 'var(--tk-color-base-red-600)',\n      700: 'var(--tk-color-base-red-700)',\n      800: 'var(--tk-color-base-red-800)',\n      900: 'var(--tk-color-base-red-900)',\n      950: 'var(--tk-color-base-red-950)'\n    },\n    surface: {\n      0: 'var(--tk-color-base-surface-0)',\n      50: 'var(--tk-color-base-surface-50)',\n      100: 'var(--tk-color-base-surface-100)',\n      200: 'var(--tk-color-base-surface-200)',\n      300: 'var(--tk-color-base-surface-300)',\n      400: 'var(--tk-color-base-surface-400)',\n      500: 'var(--tk-color-base-surface-500)',\n      600: 'var(--tk-color-base-surface-600)',\n      700: 'var(--tk-color-base-surface-700)',\n      800: 'var(--tk-color-base-surface-800)',\n      900: 'var(--tk-color-base-surface-900)',\n      950: 'var(--tk-color-base-surface-950)'\n    },\n  },\n  font: {\n    family: 'var(--tk-font-family)',\n  },\n\n  components: {\n    button: {\n      root: {\n        outline: 'none',\n        boxShadow: 'none',\n        border: 'none',\n        focusBoxShadow: 'none',\n      },\n      label: {\n        color: 'inherit',\n      },\n      colorScheme: {\n        light: {\n          root: {\n            primary: {\n              hoverBackground: 'var(--tk-color-base-primary-400)',\n              activeBackground: 'var(--tk-color-base-primary-400)',\n              hoverBorderColor: 'transparent',\n              activeBorderColor: 'transparent',\n            },\n            secondary: {\n              background: 'var(--tk-color-base-surface-0)',\n              hoverBackground: 'var(--tk-color-base-surface-100)',\n              borderColor: 'var(--tk-color-base-surface-200)',\n              hoverBorderColor: 'var(--tk-color-base-surface-200)',\n              activeBorderColor: 'var(--tk-color-base-surface-200)',\n            },\n          },\n          text: {\n            secondary: {\n                hoverBackground: 'var(--tk-color-base-surface-200)',\n                activeBackground: 'var(--tk-color-base-surface-200)',\n            },\n          },\n        },\n        dark: {\n          primary: {\n            background: 'var(--tk-color-base-primary-500)',\n            hoverBackground: 'var(--tk-color-base-primary-400)',\n            activeBackground: 'var(--tk-color-base-primary-400)',\n            borderColor: 'transparent',\n            hoverBorderColor: 'transparent',\n            activeBorderColor: 'transparent',\n          },\n          secondary: {\n            background: 'var(--tk-color-base-surface-0)',\n            hoverBackground: 'var(--tk-color-base-surface-200)',\n            borderColor: 'var(--tk-color-base-surface-200)',\n            hoverBorderColor: 'var(--tk-color-base-surface-200)',\n            activeBorderColor: 'var(--tk-color-base-surface-200)',\n          },\n          danger: {\n            background: 'var(--tk-color-base-red-500)',\n            hoverBackground: 'var(--tk-color-base-red-600)',\n            activeBackground: 'var(--tk-color-base-red-700)',\n            borderColor: 'var(--tk-color-base-red-500)',\n            hoverBorderColor: 'var(--tk-color-base-red-600)',\n            activeBorderColor: 'var(--tk-color-base-red-700)',\n          }\n        },\n      },\n    },\n    dialog: {\n      colorScheme: {\n        dark: {\n          root: {\n            background: 'var(--tk-color-base-surface-0)',\n            borderColor: 'var(--tk-color-base-surface-200)',\n          },\n        }\n      }\n    }\n  }\n});\n","import { inject, provideAppInitializer } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { PrimeNG } from 'primeng/config';\nimport { TkPreset } from './tk-preset';\n\nfunction themeFactory(config: PrimeNG, document: Document): () => void {\n  return () => {\n    const fontLink = document.createElement('link');\n    fontLink.rel = 'stylesheet';\n    fontLink.href =\n      'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap';\n    document.head.appendChild(fontLink);\n\n    const style = document.createElement('style');\n    style.innerHTML = `\n      body {\n        font-family: 'Poppins', sans-serif;\n      }\n    `;\n    document.head.appendChild(style);\n\n    config.theme.set({\n      preset: TkPreset,\n      options: {\n        prefix: 'tk',\n        darkMode: false\n      },\n    });\n  };\n}\n\nexport function provideTkTheme() {\n  return provideAppInitializer(() => {\n    const config = inject(PrimeNG);\n    const document = inject(DOCUMENT);\n    return themeFactory(config, document)();\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tekus/design-system",
   "description": "Tekus design system library",
-  "version": "5.1.3",
+  "version": "5.2.0",
   "license": "UNLICENSED",
   "peerDependencies": {
     "@angular/core": "^19.2.15",
@@ -47,14 +47,18 @@
       "types": "./components/fallback-view/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-fallback-view.mjs"
     },
-    "./core/types": {
-      "types": "./core/types/index.d.ts",
-      "default": "./fesm2022/tekus-design-system-core-types.mjs"
+    "./components/modal": {
+      "types": "./components/modal/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-modal.mjs"
     },
     "./directives/gird-item": {
       "types": "./directives/gird-item/index.d.ts",
       "default": "./fesm2022/tekus-design-system-directives-gird-item.mjs"
     },
+    "./core/types": {
+      "types": "./core/types/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-core-types.mjs"
+    },
     "./utils/sanitizer-utils": {
       "types": "./utils/sanitizer-utils/index.d.ts",
       "default": "./fesm2022/tekus-design-system-utils-sanitizer-utils.mjs"