@tekus/design-system 5.23.0 → 5.25.0

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

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, viewChild, ViewContainerRef, input, computed, model, EventEmitter, effect, untracked, afterEveryRender, Component, ApplicationRef, createComponent, Injectable } from '@angular/core';
+import { inject, ElementRef, Injector, viewChild, ViewContainerRef, input, computed, model, output, effect, untracked, afterEveryRender, ChangeDetectionStrategy, Component, ApplicationRef, createComponent, Injectable } from '@angular/core';
 import { ButtonComponent } from '@tekus/design-system/components/button';
 import * as i1 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
+import { TkDialogRef } from '@tekus/design-system/core/types';
 import * as i2 from 'primeng/api';
-import { Subject } from 'rxjs';
 
 /**
  * @component DrawerComponent
@@ -43,7 +43,10 @@ import { Subject } from 'rxjs';
 class DrawerComponent {
     constructor() {
         this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
         this.contentHost = viewChild('contentHost', { ...(ngDevMode ? { debugName: "contentHost" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+        /** The dialog ref associated with this drawer */
+        this.dialogRef = input(null, ...(ngDevMode ? [{ debugName: "dialogRef" }] : /* istanbul ignore next */ []));
         /** The required title displayed at the top left of the drawer header */
         this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         /** The main content of the drawer. Can be a string or a Component Type. */
@@ -76,15 +79,17 @@ class DrawerComponent {
         /** Whether the drawer content has a scrollbar */
         this.hasScroll = false;
         /** Emits when the drawer closes, passing the return value from header action or null */
-        this.onClose = new EventEmitter();
+        this.closed = output();
         this.alreadyEmitted = false;
         this.returnValueOnClose = null;
+        this.wasOpened = false;
         /**
          * @summary Orchestrates the reactive dynamic lifecycle.
          */
         effect(() => {
             const opened = this.isOpened();
             const host = this.contentHost();
+            this.dialogRef();
             untracked(() => {
                 if (opened && host) {
                     this.attachDynamicContent();
@@ -111,7 +116,13 @@ class DrawerComponent {
         if (!type || typeof type === 'string' || !host)
             return;
         this.detachDynamicContent();
-        this.componentRef = host.createComponent(type);
+        const customInjector = Injector.create({
+            providers: [{ provide: TkDialogRef, useValue: this.dialogRef() }],
+            parent: this.injector,
+        });
+        this.componentRef = host.createComponent(type, {
+            injector: customInjector,
+        });
         this.syncDynamicInputs(this.data());
     }
     syncDynamicInputs(data) {
@@ -141,6 +152,10 @@ class DrawerComponent {
         this.isOpened.set(true);
         this.resetClosureState();
     }
+    /** Marks the drawer as shown to enable closure emission guards */
+    handleShow() {
+        this.wasOpened = true;
+    }
     /**
      * @summary Main entry point for closure requests.
      * @returns true if closure was executed.
@@ -172,6 +187,7 @@ class DrawerComponent {
             this.returnValueOnClose = returnValue;
         }
         this.isOpened.set(false);
+        this.handleClose();
     }
     /** Handles external visibility changes (from p-drawer close button or mask) */
     onVisibleChange(visible) {
@@ -188,7 +204,7 @@ class DrawerComponent {
             return;
         }
         const valueToEmit = this.alreadyEmitted ? this.returnValueOnClose : null;
-        this.onClose.emit(valueToEmit);
+        this.closed.emit(valueToEmit);
         this.resetClosureState();
     }
     /** Forcefully closes the drawer without checks */
@@ -208,32 +224,32 @@ class DrawerComponent {
         this.returnValueOnClose = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DrawerComponent, isStandalone: true, selector: "tk-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, headerAction: { classPropertyName: "headerAction", publicName: "headerAction", 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 }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, interceptor: { classPropertyName: "interceptor", publicName: "interceptor", isSignal: true, isRequired: false, transformFunction: null }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpened: "isOpenedChange" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\"\n  (onHide)=\"handleClose()\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-drawer__header\">\n      <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n      @if (hasHeaderAction()) {\n        <div class=\"tk-drawer__actions\">\n          <tk-button\n            [label]=\"headerAction()!.label\"\n            [severity]=\"headerAction()!.severity\"\n            [variant]=\"headerAction()!.variant\"\n            (clicked)=\"\n              handleHeaderAction(\n                headerAction()!.action,\n                headerAction()!.returnValue\n              )\n            \" />\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-paddingX-m, 1.5rem)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-paddingX-xs, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DrawerComponent, isStandalone: true, selector: "tk-drawer", inputs: { dialogRef: { classPropertyName: "dialogRef", publicName: "dialogRef", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, headerAction: { classPropertyName: "headerAction", publicName: "headerAction", 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 }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, interceptor: { classPropertyName: "interceptor", publicName: "interceptor", isSignal: true, isRequired: false, transformFunction: null }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpened: "isOpenedChange", closed: "closed" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n        @if (hasHeaderAction()) {\n          <div class=\"tk-drawer__actions\">\n            <tk-button\n              [label]=\"headerAction()!.label\"\n              [severity]=\"headerAction()!.severity\"\n              [variant]=\"headerAction()!.variant\"\n              (clicked)=\"\n                handleHeaderAction(\n                  headerAction()!.action,\n                  headerAction()!.returnValue\n                )\n              \" />\n          </div>\n        }\n      </div>\n    </ng-template>\n  }\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-paddingX-m, 1.5rem)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-paddingX-xs, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-drawer', standalone: true, imports: [DrawerModule, ButtonComponent], template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\"\n  (onHide)=\"handleClose()\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-drawer__header\">\n      <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n      @if (hasHeaderAction()) {\n        <div class=\"tk-drawer__actions\">\n          <tk-button\n            [label]=\"headerAction()!.label\"\n            [severity]=\"headerAction()!.severity\"\n            [variant]=\"headerAction()!.variant\"\n            (clicked)=\"\n              handleHeaderAction(\n                headerAction()!.action,\n                headerAction()!.returnValue\n              )\n            \" />\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-paddingX-m, 1.5rem)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-paddingX-xs, .25rem)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-drawer', imports: [DrawerModule, ButtonComponent], template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n        @if (hasHeaderAction()) {\n          <div class=\"tk-drawer__actions\">\n            <tk-button\n              [label]=\"headerAction()!.label\"\n              [severity]=\"headerAction()!.severity\"\n              [variant]=\"headerAction()!.variant\"\n              (clicked)=\"\n                handleHeaderAction(\n                  headerAction()!.action,\n                  headerAction()!.returnValue\n                )\n              \" />\n          </div>\n        }\n      </div>\n    </ng-template>\n  }\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-paddingX-m, 1.5rem)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-paddingX-xs, .25rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ['contentHost', { ...{
                             read: ViewContainerRef,
-                        }, isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], headerAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], interceptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "interceptor", required: false }] }], isOpened: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpened", required: false }] }, { type: i0.Output, args: ["isOpenedChange"] }] } });
+                        }, isSignal: true }] }], dialogRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogRef", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], headerAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], interceptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "interceptor", required: false }] }], isOpened: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpened", required: false }] }, { type: i0.Output, args: ["isOpenedChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 class DrawerService {
     constructor() {
         this.appRef = inject(ApplicationRef);
-        this.drawerRef = null;
+        this.dialogRef = null;
     }
-    get _drawerRefForTesting() {
-        return this.drawerRef;
+    get drawerRefForTesting() {
+        return (this.dialogRef?.componentRef || null);
     }
-    set _drawerRefForTesting(ref) {
-        this.drawerRef = ref;
+    set drawerRefForTesting(ref) {
+        this.dialogRef = ref ? new TkDialogRef(ref) : null;
     }
     open(config) {
-        if (this.drawerRef) {
-            this.drawerRef.instance.close();
-            this.appRef.detachView(this.drawerRef.hostView);
-            this.drawerRef.destroy();
-            this.drawerRef = null;
+        if (this.dialogRef) {
+            // Clear the previous one without triggering a real "null" result
+            this.dialogRef.emitClose();
+            this.dialogRef.componentRef.destroy();
+            this.dialogRef = null;
         }
         const componentRef = createComponent(DrawerComponent, {
             environmentInjector: this.appRef.injector,
@@ -250,19 +266,19 @@ class DrawerService {
         componentRef.setInput('dismissible', config.dismissible ?? true);
         componentRef.setInput('data', config.data ?? {});
         componentRef.setInput('interceptor', config.interceptor ?? undefined);
-        const close$ = new Subject();
-        componentRef.instance.onClose.subscribe(value => {
-            close$.next(value);
-            close$.complete();
+        const dialogRef = new TkDialogRef(componentRef);
+        componentRef.setInput('dialogRef', dialogRef);
+        this.dialogRef = dialogRef;
+        componentRef.instance.closed.subscribe((value) => {
+            dialogRef.emitClose(value);
             this.appRef.detachView(componentRef.hostView);
             componentRef.destroy();
-            if (this.drawerRef === componentRef) {
-                this.drawerRef = null;
+            if (this.dialogRef === dialogRef) {
+                this.dialogRef = null;
             }
         });
         componentRef.instance.open();
-        this.drawerRef = componentRef;
-        return close$.asObservable();
+        return dialogRef;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DrawerService, providedIn: 'root' }); }

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-drawer.mjs","sources":["../../../projects/design-system/components/drawer/src/drawer.component.ts","../../../projects/design-system/components/drawer/src/drawer.component.html","../../../projects/design-system/components/drawer/src/services/drawer.service.ts","../../../projects/design-system/components/drawer/tekus-design-system-components-drawer.ts"],"sourcesContent":["import { Component, computed, input, model, EventEmitter, Type, ElementRef, ViewContainerRef, viewChild, ComponentRef, effect, untracked, OnDestroy, afterEveryRender, inject } from '@angular/core';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { DrawerModule } from 'primeng/drawer';\nimport { DrawerHeaderAction, DrawerSizeType } from './drawer.types';\nimport {\n  TkCanClose,\n  TkCloseInterceptor,\n} from '@tekus/design-system/core/types';\n\n/**\n * @component DrawerComponent\n * @description\n * A programmatically controlled drawer overlay used for displaying dynamic content,\n * titles, and header actions. The drawer is opened through a service with a configuration object,\n * similar to tk-modal.\n *\n * This component supports:\n * - Required title with ellipsis for long text.\n * - Optional header action button + close button.\n * - Content as string or component.\n * - Position: always right.\n * - Sizes: small (500px), large (1024px).\n * - Closable and dismissible mask behavior.\n *\n * @usage\n * ### Open a drawer from TypeScript using the drawer service\n * ```ts\n * this.drawerService.open({\n *   title: 'Drawer name',\n *   content: 'Content text drawer example',\n *   headerAction: {\n *     label: 'Action',\n *     severity: 'primary',\n *     action: () => console.log('Action clicked'),\n *     returnValue: true,\n *   },\n *   size: 'small',\n * }).subscribe((result) => {\n *   console.log('Drawer closed with value:', result);\n * });\n * ```\n * Modernized for Angular 19 with 100% synchronous Signal-based closing interception.\n */\n@Component({\n  selector: 'tk-drawer',\n  standalone: true,\n  imports: [DrawerModule, ButtonComponent],\n  templateUrl: './drawer.component.html',\n  styleUrls: ['./drawer.component.scss'],\n})\nexport class DrawerComponent<T = unknown> implements OnDestroy {\n  private readonly elementRef = inject(ElementRef);\n\n  private readonly contentHost = viewChild('contentHost', {\n    read: ViewContainerRef,\n  });\n  private componentRef?: ComponentRef<T>;\n\n  /** The required title displayed at the top left of the drawer header */\n  title = input.required<string>();\n\n  /** The main content of the drawer. Can be a string or a Component Type. */\n  content = input<string | Type<T> | null>(null);\n\n  /** Optional header action button (displayed before close button) */\n  headerAction = input<DrawerHeaderAction | null>(null);\n\n  /** Drawer size: 'small' (500px), 'large' (1024px) */\n  size = input<DrawerSizeType>('small');\n\n  /** Whether the drawer can be closed by the user via close button */\n  closable = input<boolean>(true);\n\n  /** Whether clicking the mask closes the drawer */\n  dismissible = input<boolean>(true);\n\n  /** Optional data to be passed as inputs to the dynamic component. */\n  data = input<Partial<T>>({});\n\n  /** Optional interceptor called before the drawer closes. */\n  interceptor = input<TkCloseInterceptor | undefined>(undefined);\n\n  isContentString = computed(() => typeof this.content() === 'string');\n  hasHeaderAction = computed(() => this.headerAction() != null);\n\n  /** Computed: drawer width (responsive) and max-width based on `size`. Always right position. */\n  drawerStyle = computed(() => {\n    const sz = this.size();\n    const maxWidth = sz === 'large' ? '1024px' : '500px';\n    return {\n      width: 'calc(100vw - 1rem)',\n      maxWidth,\n    };\n  });\n\n  /** Visibility flag. Use model for two-way binding when using drawer in template. */\n  isOpened = model<boolean>(false);\n\n  /** Whether the drawer content has a scrollbar */\n  hasScroll = false;\n\n  /** Emits when the drawer closes, passing the return value from header action or null */\n  readonly onClose = new EventEmitter<unknown>();\n  private alreadyEmitted = false;\n  private returnValueOnClose: unknown = null;\n\n  constructor() {\n    /**\n     * @summary Orchestrates the reactive dynamic lifecycle.\n     */\n    effect(() => {\n      const opened = this.isOpened();\n      const host = this.contentHost();\n\n      untracked(() => {\n        if (opened && host) {\n          this.attachDynamicContent();\n        } else if (!opened) {\n          this.detachDynamicContent();\n        }\n      });\n    });\n\n    effect(() => {\n      const currentData = this.data();\n      untracked(() => this.syncDynamicInputs(currentData));\n    });\n\n    afterEveryRender(() => {\n      this.checkScroll();\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.detachDynamicContent();\n  }\n\n  private attachDynamicContent(): void {\n    const type = this.content();\n    const host = this.contentHost();\n\n    if (!type || typeof type === 'string' || !host) return;\n    this.detachDynamicContent();\n    this.componentRef = host.createComponent(type);\n    this.syncDynamicInputs(this.data());\n  }\n\n  private syncDynamicInputs(data: Partial<T>): void {\n    if (!this.componentRef) return;\n    Object.entries(data).forEach(([key, value]) => {\n      this.componentRef?.setInput(key, value);\n    });\n  }\n\n  private detachDynamicContent(): void {\n    if (this.componentRef) {\n      this.componentRef.destroy();\n      this.componentRef = undefined;\n    }\n  }\n\n  /**\n   * Checks if the drawer content has a scrollbar and updates `hasScroll` state.\n   */\n  checkScroll(): void {\n    const contentEl =\n      this.elementRef.nativeElement.querySelector('.p-drawer-content');\n    if (contentEl) {\n      this.hasScroll = contentEl.scrollHeight > contentEl.clientHeight;\n    }\n  }\n\n  /** Opens the drawer */\n  open(): void {\n    this.isOpened.set(true);\n    this.resetClosureState();\n  }\n\n  /**\n   * @summary Main entry point for closure requests.\n   * @returns true if closure was executed.\n   */\n  tryClose(returnValue: unknown = null): boolean {\n    if (this.canExecuteClosure()) {\n      this.executeClosure(returnValue, arguments.length > 0);\n      return true;\n    } else {\n      const instance = this.componentRef?.instance as TkCanClose | undefined;\n      instance?.onBlockedClose?.();\n      return false;\n    }\n  }\n\n  private canExecuteClosure(): boolean {\n    const instance = this.componentRef?.instance as TkCanClose | undefined;\n    const canClose = instance?.canClose ? instance.canClose() : true;\n    if (!canClose) return false;\n\n    const configInterceptor = this.interceptor();\n    if (configInterceptor && !configInterceptor()) return false;\n\n    return true;\n  }\n\n  private executeClosure(returnValue: unknown, hasReturnValue: boolean): void {\n    if (hasReturnValue) {\n      this.alreadyEmitted = true;\n      this.returnValueOnClose = returnValue;\n    }\n    this.isOpened.set(false);\n  }\n\n  /** Handles external visibility changes (from p-drawer close button or mask) */\n  onVisibleChange(visible: boolean): void {\n    if (!visible) {\n      const closed = this.tryClose();\n\n      if (!closed) {\n        this.isOpened.set(true);\n      }\n    }\n  }\n\n  /** Closes the drawer and emits onClose */\n  handleClose(): void {\n    if (this.isOpened()) {\n      return;\n    }\n    const valueToEmit = this.alreadyEmitted ? this.returnValueOnClose : null;\n    this.onClose.emit(valueToEmit);\n    this.resetClosureState();\n  }\n\n  /** Forcefully closes the drawer without checks */\n  close(): void {\n    this.tryClose();\n  }\n\n  /**\n   * Handles header action button click.\n   */\n  handleHeaderAction(\n    action: (() => void) | undefined,\n    returnValue: unknown\n  ): void {\n    if (action) action();\n    this.tryClose(returnValue);\n  }\n\n  private resetClosureState(): void {\n    this.alreadyEmitted = false;\n    this.returnValueOnClose = null;\n  }\n}\n","<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\"\n  (onHide)=\"handleClose()\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-drawer__header\">\n      <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n      @if (hasHeaderAction()) {\n        <div class=\"tk-drawer__actions\">\n          <tk-button\n            [label]=\"headerAction()!.label\"\n            [severity]=\"headerAction()!.severity\"\n            [variant]=\"headerAction()!.variant\"\n            (clicked)=\"\n              handleHeaderAction(\n                headerAction()!.action,\n                headerAction()!.returnValue\n              )\n            \" />\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n","import { Injectable, ApplicationRef, ComponentRef, createComponent, EmbeddedViewRef, inject } from '@angular/core';\nimport { DrawerComponent } from '../drawer.component';\nimport { Observable, Subject } from 'rxjs';\nimport { DrawerConfig } from '../drawer.types';\n\n@Injectable({ providedIn: 'root' })\nexport class DrawerService {\n  private readonly appRef = inject(ApplicationRef);\n\n  private drawerRef: ComponentRef<DrawerComponent<unknown>> | null = null;\n\n  get _drawerRefForTesting(): ComponentRef<DrawerComponent<unknown>> | null {\n    return this.drawerRef;\n  }\n  set _drawerRefForTesting(ref: ComponentRef<DrawerComponent<unknown>> | null) {\n    this.drawerRef = ref;\n  }\n\n  open(config: DrawerConfig): Observable<unknown> {\n    if (this.drawerRef) {\n      this.drawerRef.instance.close();\n      this.appRef.detachView(this.drawerRef.hostView);\n      this.drawerRef.destroy();\n      this.drawerRef = null;\n    }\n\n    const componentRef = createComponent(DrawerComponent, {\n      environmentInjector: this.appRef.injector,\n    });\n\n    this.appRef.attachView(componentRef.hostView);\n\n    const domElem = (componentRef.hostView as EmbeddedViewRef<unknown>)\n      .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('headerAction', config.headerAction ?? null);\n    componentRef.setInput('size', config.size ?? 'small');\n    componentRef.setInput('closable', config.closable ?? true);\n    componentRef.setInput('dismissible', config.dismissible ?? true);\n    componentRef.setInput('data', config.data ?? {});\n    componentRef.setInput('interceptor', config.interceptor ?? undefined);\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      if (this.drawerRef === (componentRef as unknown)) {\n        this.drawerRef = null;\n      }\n    });\n\n    componentRef.instance.open();\n    this.drawerRef = componentRef as unknown as ComponentRef<\n      DrawerComponent<unknown>\n    >;\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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"}
+{"version":3,"file":"tekus-design-system-components-drawer.mjs","sources":["../../../projects/design-system/components/drawer/src/drawer.component.ts","../../../projects/design-system/components/drawer/src/drawer.component.html","../../../projects/design-system/components/drawer/src/services/drawer.service.ts","../../../projects/design-system/components/drawer/tekus-design-system-components-drawer.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  model,\n  output,\n  Type,\n  ElementRef,\n  ViewContainerRef,\n  viewChild,\n  ComponentRef,\n  effect,\n  untracked,\n  OnDestroy,\n  afterEveryRender,\n  inject,\n  Injector,\n} from '@angular/core';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { DrawerModule } from 'primeng/drawer';\nimport { DrawerHeaderAction, DrawerSizeType } from './drawer.types';\nimport {\n  TkCanClose,\n  TkCloseInterceptor,\n  TkDialogRef,\n} from '@tekus/design-system/core/types';\n\n/**\n * @component DrawerComponent\n * @description\n * A programmatically controlled drawer overlay used for displaying dynamic content,\n * titles, and header actions. The drawer is opened through a service with a configuration object,\n * similar to tk-modal.\n *\n * This component supports:\n * - Required title with ellipsis for long text.\n * - Optional header action button + close button.\n * - Content as string or component.\n * - Position: always right.\n * - Sizes: small (500px), large (1024px).\n * - Closable and dismissible mask behavior.\n *\n * @usage\n * ### Open a drawer from TypeScript using the drawer service\n * ```ts\n * this.drawerService.open({\n *   title: 'Drawer name',\n *   content: 'Content text drawer example',\n *   headerAction: {\n *     label: 'Action',\n *     severity: 'primary',\n *     action: () => console.log('Action clicked'),\n *     returnValue: true,\n *   },\n *   size: 'small',\n * }).subscribe((result) => {\n *   console.log('Drawer closed with value:', result);\n * });\n * ```\n * Modernized for Angular 19 with 100% synchronous Signal-based closing interception.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-drawer',\n  imports: [DrawerModule, ButtonComponent],\n  templateUrl: './drawer.component.html',\n  styleUrl: './drawer.component.scss',\n})\nexport class DrawerComponent<T = unknown> implements OnDestroy {\n  private readonly elementRef = inject(ElementRef);\n  private readonly injector = inject(Injector);\n\n  private readonly contentHost = viewChild('contentHost', {\n    read: ViewContainerRef,\n  });\n  private componentRef?: ComponentRef<T>;\n\n  /** The dialog ref associated with this drawer */\n  dialogRef = input<TkDialogRef<DrawerComponent<T>, unknown> | null>(null);\n\n  /** The required title displayed at the top left of the drawer header */\n  title = input.required<string>();\n\n  /** The main content of the drawer. Can be a string or a Component Type. */\n  content = input<string | Type<T> | null>(null);\n\n  /** Optional header action button (displayed before close button) */\n  headerAction = input<DrawerHeaderAction | null>(null);\n\n  /** Drawer size: 'small' (500px), 'large' (1024px) */\n  size = input<DrawerSizeType>('small');\n\n  /** Whether the drawer can be closed by the user via close button */\n  closable = input<boolean>(true);\n\n  /** Whether clicking the mask closes the drawer */\n  dismissible = input<boolean>(true);\n\n  /** Optional data to be passed as inputs to the dynamic component. */\n  data = input<Partial<T>>({});\n\n  /** Optional interceptor called before the drawer closes. */\n  interceptor = input<TkCloseInterceptor | undefined>(undefined);\n\n  isContentString = computed(() => typeof this.content() === 'string');\n  hasHeaderAction = computed(() => this.headerAction() != null);\n\n  /** Computed: drawer width (responsive) and max-width based on `size`. Always right position. */\n  drawerStyle = computed(() => {\n    const sz = this.size();\n    const maxWidth = sz === 'large' ? '1024px' : '500px';\n    return {\n      width: 'calc(100vw - 1rem)',\n      maxWidth,\n    };\n  });\n\n  /** Visibility flag. Use model for two-way binding when using drawer in template. */\n  isOpened = model<boolean>(false);\n\n  /** Whether the drawer content has a scrollbar */\n  hasScroll = false;\n\n  /** Emits when the drawer closes, passing the return value from header action or null */\n  readonly closed = output<unknown>();\n  private alreadyEmitted = false;\n  private returnValueOnClose: unknown = null;\n\n  constructor() {\n    /**\n     * @summary Orchestrates the reactive dynamic lifecycle.\n     */\n    effect(() => {\n      const opened = this.isOpened();\n      const host = this.contentHost();\n      this.dialogRef();\n\n      untracked(() => {\n        if (opened && host) {\n          this.attachDynamicContent();\n        } else if (!opened) {\n          this.detachDynamicContent();\n        }\n      });\n    });\n\n    effect(() => {\n      const currentData = this.data();\n      untracked(() => this.syncDynamicInputs(currentData));\n    });\n\n    afterEveryRender(() => {\n      this.checkScroll();\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.detachDynamicContent();\n  }\n\n  private attachDynamicContent(): void {\n    const type = this.content();\n    const host = this.contentHost();\n\n    if (!type || typeof type === 'string' || !host) return;\n    this.detachDynamicContent();\n\n    const customInjector = Injector.create({\n      providers: [{ provide: TkDialogRef, useValue: this.dialogRef() }],\n      parent: this.injector,\n    });\n\n    this.componentRef = host.createComponent(type, {\n      injector: customInjector,\n    });\n    this.syncDynamicInputs(this.data());\n  }\n\n  private syncDynamicInputs(data: Partial<T>): void {\n    if (!this.componentRef) return;\n    Object.entries(data).forEach(([key, value]) => {\n      this.componentRef?.setInput(key, value);\n    });\n  }\n\n  private detachDynamicContent(): void {\n    if (this.componentRef) {\n      this.componentRef.destroy();\n      this.componentRef = undefined;\n    }\n  }\n\n  /**\n   * Checks if the drawer content has a scrollbar and updates `hasScroll` state.\n   */\n  checkScroll(): void {\n    const contentEl =\n      this.elementRef.nativeElement.querySelector('.p-drawer-content');\n    if (contentEl) {\n      this.hasScroll = contentEl.scrollHeight > contentEl.clientHeight;\n    }\n  }\n\n  private wasOpened = false;\n \n  /** Opens the drawer */\n  open(): void {\n    this.isOpened.set(true);\n    this.resetClosureState();\n  }\n\n  /** Marks the drawer as shown to enable closure emission guards */\n  handleShow(): void {\n    this.wasOpened = true;\n  }\n\n  /**\n   * @summary Main entry point for closure requests.\n   * @returns true if closure was executed.\n   */\n  tryClose(returnValue: unknown = null): boolean {\n    if (this.canExecuteClosure()) {\n      this.executeClosure(returnValue, arguments.length > 0);\n      return true;\n    } else {\n      const instance = this.componentRef?.instance as TkCanClose | undefined;\n      instance?.onBlockedClose?.();\n      return false;\n    }\n  }\n\n  private canExecuteClosure(): boolean {\n    const instance = this.componentRef?.instance as TkCanClose | undefined;\n    const canClose = instance?.canClose ? instance.canClose() : true;\n    if (!canClose) return false;\n\n    const configInterceptor = this.interceptor();\n    if (configInterceptor && !configInterceptor()) return false;\n\n    return true;\n  }\n\n  private executeClosure(returnValue: unknown, hasReturnValue: boolean): void {\n    if (hasReturnValue) {\n      this.alreadyEmitted = true;\n      this.returnValueOnClose = returnValue;\n    }\n    this.isOpened.set(false);\n    this.handleClose();\n  }\n\n  /** Handles external visibility changes (from p-drawer close button or mask) */\n  onVisibleChange(visible: boolean): void {\n    if (!visible) {\n      const closed = this.tryClose();\n\n      if (!closed) {\n        this.isOpened.set(true);\n      }\n    }\n  }\n\n  /** Closes the drawer and emits onClose */\n  handleClose(): void {\n    if (this.isOpened()) {\n      return;\n    }\n    const valueToEmit = this.alreadyEmitted ? this.returnValueOnClose : null;\n    this.closed.emit(valueToEmit);\n    this.resetClosureState();\n  }\n\n  /** Forcefully closes the drawer without checks */\n  close(): void {\n    this.tryClose();\n  }\n\n  /**\n   * Handles header action button click.\n   */\n  handleHeaderAction(\n    action: (() => void) | undefined,\n    returnValue: unknown\n  ): void {\n    if (action) action();\n    this.tryClose(returnValue);\n  }\n\n  private resetClosureState(): void {\n    this.alreadyEmitted = false;\n    this.returnValueOnClose = null;\n  }\n}\n","<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n        @if (hasHeaderAction()) {\n          <div class=\"tk-drawer__actions\">\n            <tk-button\n              [label]=\"headerAction()!.label\"\n              [severity]=\"headerAction()!.severity\"\n              [variant]=\"headerAction()!.variant\"\n              (clicked)=\"\n                handleHeaderAction(\n                  headerAction()!.action,\n                  headerAction()!.returnValue\n                )\n              \" />\n          </div>\n        }\n      </div>\n    </ng-template>\n  }\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n","import {\n  Injectable,\n  ApplicationRef,\n  ComponentRef,\n  createComponent,\n  EmbeddedViewRef,\n  inject,\n} from '@angular/core';\nimport { DrawerComponent } from '../drawer.component';\nimport { DrawerConfig } from '../drawer.types';\nimport { TkDialogRef } from '@tekus/design-system/core/types';\n\n@Injectable({ providedIn: 'root' })\nexport class DrawerService {\n  private readonly appRef = inject(ApplicationRef);\n\n  private dialogRef: TkDialogRef<DrawerComponent<unknown>> | null = null;\n\n  get drawerRefForTesting(): ComponentRef<DrawerComponent<unknown>> | null {\n    return (\n      (this.dialogRef?.componentRef as ComponentRef<\n        DrawerComponent<unknown>\n      >) || null\n    );\n  }\n  set drawerRefForTesting(ref: ComponentRef<DrawerComponent<unknown>> | null) {\n    this.dialogRef = ref ? new TkDialogRef(ref) : null;\n  }\n\n  open<T = unknown, R = unknown>(\n    config: DrawerConfig\n  ): TkDialogRef<DrawerComponent<T>, R> {\n    if (this.dialogRef) {\n      // Clear the previous one without triggering a real \"null\" result\n      this.dialogRef.emitClose();\n      this.dialogRef.componentRef.destroy();\n      this.dialogRef = null;\n    }\n\n    const componentRef = createComponent(DrawerComponent, {\n      environmentInjector: this.appRef.injector,\n    }) as ComponentRef<DrawerComponent<T>>;\n\n    this.appRef.attachView(componentRef.hostView);\n\n    const domElem = (componentRef.hostView as EmbeddedViewRef<unknown>)\n      .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('headerAction', config.headerAction ?? null);\n    componentRef.setInput('size', config.size ?? 'small');\n    componentRef.setInput('closable', config.closable ?? true);\n    componentRef.setInput('dismissible', config.dismissible ?? true);\n    componentRef.setInput('data', config.data ?? {});\n    componentRef.setInput('interceptor', config.interceptor ?? undefined);\n\n    const dialogRef = new TkDialogRef<DrawerComponent<T>, R>(componentRef);\n    componentRef.setInput('dialogRef', dialogRef);\n    this.dialogRef = dialogRef as unknown as TkDialogRef<\n      DrawerComponent<unknown>\n    >;\n\n    componentRef.instance.closed.subscribe((value: unknown) => {\n      dialogRef.emitClose(value as R);\n\n      this.appRef.detachView(componentRef.hostView);\n      componentRef.destroy();\n      if (this.dialogRef === (dialogRef as unknown)) {\n        this.dialogRef = null;\n      }\n    });\n\n    componentRef.instance.open();\n\n    return dialogRef;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCG;MAQU,eAAe,CAAA;AA4D1B,IAAA,WAAA,GAAA;AA3DiB,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAC/B,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;QAE3B,IAAA,CAAA,WAAW,GAAG,SAAS,CAAC,aAAa,mFACpD,IAAI,EAAE,gBAAgB,EAAA,CACtB;;AAIF,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAkD,IAAI,gFAAC;;AAGxE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;;AAGhC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAA0B,IAAI,8EAAC;;AAG9C,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAA4B,IAAI,mFAAC;;AAGrD,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAiB,OAAO,2EAAC;;AAGrC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,IAAI,+EAAC;;AAG/B,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAU,IAAI,kFAAC;;AAGlC,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAa,EAAE,2EAAC;;AAG5B,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAiC,SAAS,kFAAC;AAE9D,QAAA,IAAA,CAAA,eAAe,GAAG,QAAQ,CAAC,MAAM,OAAO,IAAI,CAAC,OAAO,EAAE,KAAK,QAAQ,sFAAC;AACpE,QAAA,IAAA,CAAA,eAAe,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,sFAAC;;AAG7D,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AAC1B,YAAA,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE;AACtB,YAAA,MAAM,QAAQ,GAAG,EAAE,KAAK,OAAO,GAAG,QAAQ,GAAG,OAAO;YACpD,OAAO;AACL,gBAAA,KAAK,EAAE,oBAAoB;gBAC3B,QAAQ;aACT;AACH,QAAA,CAAC,kFAAC;;AAGF,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;;QAGhC,IAAA,CAAA,SAAS,GAAG,KAAK;;QAGR,IAAA,CAAA,MAAM,GAAG,MAAM,EAAW;QAC3B,IAAA,CAAA,cAAc,GAAG,KAAK;QACtB,IAAA,CAAA,kBAAkB,GAAY,IAAI;QA6ElC,IAAA,CAAA,SAAS,GAAG,KAAK;AA1EvB;;AAEG;QACH,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC9B,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE;YAC/B,IAAI,CAAC,SAAS,EAAE;YAEhB,SAAS,CAAC,MAAK;AACb,gBAAA,IAAI,MAAM,IAAI,IAAI,EAAE;oBAClB,IAAI,CAAC,oBAAoB,EAAE;gBAC7B;qBAAO,IAAI,CAAC,MAAM,EAAE;oBAClB,IAAI,CAAC,oBAAoB,EAAE;gBAC7B;AACF,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;QAEF,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,EAAE;YAC/B,SAAS,CAAC,MAAM,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;AACtD,QAAA,CAAC,CAAC;QAEF,gBAAgB,CAAC,MAAK;YACpB,IAAI,CAAC,WAAW,EAAE;AACpB,QAAA,CAAC,CAAC;IACJ;IAEA,WAAW,GAAA;QACT,IAAI,CAAC,oBAAoB,EAAE;IAC7B;IAEQ,oBAAoB,GAAA;AAC1B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;AAC3B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE;QAE/B,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI;YAAE;QAChD,IAAI,CAAC,oBAAoB,EAAE;AAE3B,QAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC;AACrC,YAAA,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC;YACjE,MAAM,EAAE,IAAI,CAAC,QAAQ;AACtB,SAAA,CAAC;QAEF,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;AAC7C,YAAA,QAAQ,EAAE,cAAc;AACzB,SAAA,CAAC;QACF,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACrC;AAEQ,IAAA,iBAAiB,CAAC,IAAgB,EAAA;QACxC,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE;AACxB,QAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAI;YAC5C,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC;AACzC,QAAA,CAAC,CAAC;IACJ;IAEQ,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;AAC3B,YAAA,IAAI,CAAC,YAAY,GAAG,SAAS;QAC/B;IACF;AAEA;;AAEG;IACH,WAAW,GAAA;AACT,QAAA,MAAM,SAAS,GACb,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,mBAAmB,CAAC;QAClE,IAAI,SAAS,EAAE;YACb,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY,GAAG,SAAS,CAAC,YAAY;QAClE;IACF;;IAKA,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,iBAAiB,EAAE;IAC1B;;IAGA,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;IACvB;AAEA;;;AAGG;IACH,QAAQ,CAAC,cAAuB,IAAI,EAAA;AAClC,QAAA,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAAE;YAC5B,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;AACtD,YAAA,OAAO,IAAI;QACb;aAAO;AACL,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,QAAkC;AACtE,YAAA,QAAQ,EAAE,cAAc,IAAI;AAC5B,YAAA,OAAO,KAAK;QACd;IACF;IAEQ,iBAAiB,GAAA;AACvB,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,QAAkC;AACtE,QAAA,MAAM,QAAQ,GAAG,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAAC,QAAQ,EAAE,GAAG,IAAI;AAChE,QAAA,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,KAAK;AAE3B,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE;AAC5C,QAAA,IAAI,iBAAiB,IAAI,CAAC,iBAAiB,EAAE;AAAE,YAAA,OAAO,KAAK;AAE3D,QAAA,OAAO,IAAI;IACb;IAEQ,cAAc,CAAC,WAAoB,EAAE,cAAuB,EAAA;QAClE,IAAI,cAAc,EAAE;AAClB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAC1B,YAAA,IAAI,CAAC,kBAAkB,GAAG,WAAW;QACvC;AACA,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;QACxB,IAAI,CAAC,WAAW,EAAE;IACpB;;AAGA,IAAA,eAAe,CAAC,OAAgB,EAAA;QAC9B,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE;YAE9B,IAAI,CAAC,MAAM,EAAE;AACX,gBAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;YACzB;QACF;IACF;;IAGA,WAAW,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACnB;QACF;AACA,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI;AACxE,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;QAC7B,IAAI,CAAC,iBAAiB,EAAE;IAC1B;;IAGA,KAAK,GAAA;QACH,IAAI,CAAC,QAAQ,EAAE;IACjB;AAEA;;AAEG;IACH,kBAAkB,CAChB,MAAgC,EAChC,WAAoB,EAAA;AAEpB,QAAA,IAAI,MAAM;AAAE,YAAA,MAAM,EAAE;AACpB,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;IAC5B;IAEQ,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAC3B,QAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI;IAChC;8GA/NW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,y+CAKlB,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1E1B,6xCA2CA,EAAA,MAAA,EAAA,CAAA,+vCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDsBY,YAAY,0hBAAE,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,MAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAI5B,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;sCACS,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,WAAW,WACZ,CAAC,YAAY,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,6xCAAA,EAAA,MAAA,EAAA,CAAA,+vCAAA,CAAA,EAAA;AAQC,SAAA,CAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAAA,aAAa,EAAA,EAAA,GAAE;AACtD,4BAAA,IAAI,EAAE,gBAAgB;AACvB,yBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,cAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;ME9DU,aAAa,CAAA;AAD1B,IAAA,WAAA,GAAA;AAEmB,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,cAAc,CAAC;QAExC,IAAA,CAAA,SAAS,GAAiD,IAAI;AA8DvE,IAAA;AA5DC,IAAA,IAAI,mBAAmB,GAAA;QACrB,QACG,IAAI,CAAC,SAAS,EAAE,YAEf,IAAI,IAAI;IAEd;IACA,IAAI,mBAAmB,CAAC,GAAkD,EAAA;AACxE,QAAA,IAAI,CAAC,SAAS,GAAG,GAAG,GAAG,IAAI,WAAW,CAAC,GAAG,CAAC,GAAG,IAAI;IACpD;AAEA,IAAA,IAAI,CACF,MAAoB,EAAA;AAEpB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;;AAElB,YAAA,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE;AAC1B,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE;AACrC,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;QACvB;AAEA,QAAA,MAAM,YAAY,GAAG,eAAe,CAAC,eAAe,EAAE;AACpD,YAAA,mBAAmB,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;AAC1C,SAAA,CAAqC;QAEtC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,CAAC;AAE7C,QAAA,MAAM,OAAO,GAAI,YAAY,CAAC;aAC3B,SAAS,CAAC,CAAC,CAAgB;AAC9B,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;QAElC,YAAY,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC;QAC5C,YAAY,CAAC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IAAI,IAAI,CAAC;QACxD,YAAY,CAAC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC,YAAY,IAAI,IAAI,CAAC;QAClE,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,IAAI,OAAO,CAAC;QACrD,YAAY,CAAC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC;QAC1D,YAAY,CAAC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC;QAChE,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;QAChD,YAAY,CAAC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC,WAAW,IAAI,SAAS,CAAC;AAErE,QAAA,MAAM,SAAS,GAAG,IAAI,WAAW,CAAwB,YAAY,CAAC;AACtE,QAAA,YAAY,CAAC,QAAQ,CAAC,WAAW,EAAE,SAAS,CAAC;AAC7C,QAAA,IAAI,CAAC,SAAS,GAAG,SAEhB;QAED,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAc,KAAI;AACxD,YAAA,SAAS,CAAC,SAAS,CAAC,KAAU,CAAC;YAE/B,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,CAAC;YAC7C,YAAY,CAAC,OAAO,EAAE;AACtB,YAAA,IAAI,IAAI,CAAC,SAAS,KAAM,SAAqB,EAAE;AAC7C,gBAAA,IAAI,CAAC,SAAS,GAAG,IAAI;YACvB;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE;AAE5B,QAAA,OAAO,SAAS;IAClB;8GAhEW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAb,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,cADA,MAAM,EAAA,CAAA,CAAA;;2FACnB,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACZlC;;AAEG;;;;"}

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

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

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

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