@tekus/design-system 5.33.1 → 5.34.0

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

@@ -0,0 +1,51 @@
+import * as i0 from '@angular/core';
+import { input, output, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from 'primeng/chip';
+import { ChipModule } from 'primeng/chip';
+import { IconComponent } from '@tekus/design-system/components/icon';
+
+/**
+ * @component ChipComponent
+ * @description
+ * A component used to display compact elements like labels, filters, or attributes.
+ * It wraps PrimeNG's `p-chip` component with custom styling and behavior.
+ *
+ * This component supports:
+ * - `label`: The text to display.
+ * - `icon`: Optional icon before the text.
+ * - `image`: Optional avatar image.
+ * - `removable`: Displays a close button that triggers the `removed` output.
+ *
+ * @usage
+ * ### Basic Usage
+ * ```html
+ * <tk-chip label="Design"></tk-chip>
+ * ```
+ */
+class ChipComponent {
+    constructor() {
+        /** The text label to display on the chip. */
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Icon class to display before the label. */
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Whether the chip is removable. If true, displays a close icon. */
+        this.removable = input(true, ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
+        /** Custom icon class for the close button. */
+        this.removeIcon = input(...(ngDevMode ? [undefined, { debugName: "removeIcon" }] : /* istanbul ignore next */ []));
+        /** Event emitted when the close/remove button is clicked. */
+        this.removed = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChipComponent, isStandalone: true, selector: "tk-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeIcon: { classPropertyName: "removeIcon", publicName: "removeIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<p-chip\n  [removable]=\"removable()\"\n  [removeIcon]=\"removeIcon()\"\n  styleClass=\"tk-chip\"\n  (onRemove)=\"removed.emit($event)\">\n  @if (icon()) {\n    <tk-icon [icon]=\"icon()!\" class=\"p-chip-icon\"></tk-icon>\n  }\n  @if (label()) {\n    <span class=\"p-chip-label\">{{ label() }}</span>\n  }\n  <ng-template #removeicon>\n    <tk-icon icon=\"circle-xmark\" styleIcon=\"solid\" class=\"tk-chip-remove-icon\"></tk-icon>\n  </ng-template>\n</p-chip>\n", styles: [":host ::ng-deep .p-chip.p-component.tk-chip{background:var(--tk-color-background-soft, #f2f1f1);border:none;border-radius:var(--tk-borderRadius-full, 62.4375rem);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);display:inline-flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem);min-height:var(--tk-size-base-200, 2rem);box-sizing:border-box}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-label{font-family:inherit;font-size:var(--tk-font-size-paragraph-m, 1rem);color:var(--tk-color-base-surface-700, #424243);font-weight:var(--tk-font-weight-400, 400);margin:0;padding:var(--tk-spacing-padding-none, 0) var(--tk-spacing-padding-xs, .25rem)}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-icon{color:var(--tk-color-base-surface-700, #424243);font-size:var(--tk-font-size-paragraph-s, .875rem);margin-right:0}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon{position:relative;background-color:transparent;color:var(--tk-color-base-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 50%);width:var(--tk-font-size-base-113, 1.125rem);height:var(--tk-font-size-base-113, 1.125rem);font-size:var(--tk-font-size-base-113, 1.125rem);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s ease,transform .2s ease;margin:0;outline:none;box-shadow:none;border:none}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:before{content:\"\";position:absolute;width:var(--tk-spacing-base-50, .5rem);height:var(--tk-spacing-base-50, .5rem);background-color:#fff;border-radius:var(--tk-borderRadius-full, 50%);z-index:0}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:var(--tk-font-size-base-113, 1.125rem);height:var(--tk-font-size-base-113, 1.125rem);font-size:var(--tk-font-size-base-113, 1.125rem);line-height:1}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon div,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon fa-icon,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon svg,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon div,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon fa-icon,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon svg{display:flex;align-items:center;justify-content:center;width:var(--tk-font-size-base-113, 1.125rem);height:var(--tk-font-size-base-113, 1.125rem)}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:hover{color:var(--tk-color-base-surface-900, #222324);transform:scale(1.05)}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:focus,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:focus-visible,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:active{outline:none;box-shadow:none;border:none}\n"], dependencies: [{ kind: "ngmodule", type: ChipModule }, { kind: "component", type: i1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChipComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-chip', imports: [ChipModule, IconComponent], template: "<p-chip\n  [removable]=\"removable()\"\n  [removeIcon]=\"removeIcon()\"\n  styleClass=\"tk-chip\"\n  (onRemove)=\"removed.emit($event)\">\n  @if (icon()) {\n    <tk-icon [icon]=\"icon()!\" class=\"p-chip-icon\"></tk-icon>\n  }\n  @if (label()) {\n    <span class=\"p-chip-label\">{{ label() }}</span>\n  }\n  <ng-template #removeicon>\n    <tk-icon icon=\"circle-xmark\" styleIcon=\"solid\" class=\"tk-chip-remove-icon\"></tk-icon>\n  </ng-template>\n</p-chip>\n", styles: [":host ::ng-deep .p-chip.p-component.tk-chip{background:var(--tk-color-background-soft, #f2f1f1);border:none;border-radius:var(--tk-borderRadius-full, 62.4375rem);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);display:inline-flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem);min-height:var(--tk-size-base-200, 2rem);box-sizing:border-box}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-label{font-family:inherit;font-size:var(--tk-font-size-paragraph-m, 1rem);color:var(--tk-color-base-surface-700, #424243);font-weight:var(--tk-font-weight-400, 400);margin:0;padding:var(--tk-spacing-padding-none, 0) var(--tk-spacing-padding-xs, .25rem)}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-icon{color:var(--tk-color-base-surface-700, #424243);font-size:var(--tk-font-size-paragraph-s, .875rem);margin-right:0}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon{position:relative;background-color:transparent;color:var(--tk-color-base-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 50%);width:var(--tk-font-size-base-113, 1.125rem);height:var(--tk-font-size-base-113, 1.125rem);font-size:var(--tk-font-size-base-113, 1.125rem);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s ease,transform .2s ease;margin:0;outline:none;box-shadow:none;border:none}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:before{content:\"\";position:absolute;width:var(--tk-spacing-base-50, .5rem);height:var(--tk-spacing-base-50, .5rem);background-color:#fff;border-radius:var(--tk-borderRadius-full, 50%);z-index:0}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:var(--tk-font-size-base-113, 1.125rem);height:var(--tk-font-size-base-113, 1.125rem);font-size:var(--tk-font-size-base-113, 1.125rem);line-height:1}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon div,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon fa-icon,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon tk-icon svg,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon div,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon fa-icon,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon .tk-chip-remove-icon svg{display:flex;align-items:center;justify-content:center;width:var(--tk-font-size-base-113, 1.125rem);height:var(--tk-font-size-base-113, 1.125rem)}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:hover{color:var(--tk-color-base-surface-900, #222324);transform:scale(1.05)}:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:focus,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:focus-visible,:host ::ng-deep .p-chip.p-component.tk-chip .p-chip-remove-icon:active{outline:none;box-shadow:none;border:none}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], removeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeIcon", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChipComponent };
+//# sourceMappingURL=tekus-design-system-components-chip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-chip.mjs","sources":["../../../projects/design-system/components/chip/src/chip.component.ts","../../../projects/design-system/components/chip/src/chip.component.html","../../../projects/design-system/components/chip/tekus-design-system-components-chip.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\nimport { ChipModule } from 'primeng/chip';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n/**\n * @component ChipComponent\n * @description\n * A component used to display compact elements like labels, filters, or attributes.\n * It wraps PrimeNG's `p-chip` component with custom styling and behavior.\n *\n * This component supports:\n * - `label`: The text to display.\n * - `icon`: Optional icon before the text.\n * - `image`: Optional avatar image.\n * - `removable`: Displays a close button that triggers the `removed` output.\n *\n * @usage\n * ### Basic Usage\n * ```html\n * <tk-chip label=\"Design\"></tk-chip>\n * ```\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-chip',\n  imports: [ChipModule, IconComponent],\n  templateUrl: './chip.component.html',\n  styleUrl: './chip.component.scss',\n})\nexport class ChipComponent {\n  /** The text label to display on the chip. */\n  label = input<string | undefined>();\n\n  /** Icon class to display before the label. */\n  icon = input<string | undefined>();\n\n  /** Whether the chip is removable. If true, displays a close icon. */\n  removable = input<boolean>(true);\n\n  /** Custom icon class for the close button. */\n  removeIcon = input<string | undefined>();\n\n  /** Event emitted when the close/remove button is clicked. */\n  removed = output<Event>();\n}\n","<p-chip\n  [removable]=\"removable()\"\n  [removeIcon]=\"removeIcon()\"\n  styleClass=\"tk-chip\"\n  (onRemove)=\"removed.emit($event)\">\n  @if (icon()) {\n    <tk-icon [icon]=\"icon()!\" class=\"p-chip-icon\"></tk-icon>\n  }\n  @if (label()) {\n    <span class=\"p-chip-label\">{{ label() }}</span>\n  }\n  <ng-template #removeicon>\n    <tk-icon icon=\"circle-xmark\" styleIcon=\"solid\" class=\"tk-chip-remove-icon\"></tk-icon>\n  </ng-template>\n</p-chip>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAIA;;;;;;;;;;;;;;;;;AAiBG;MAQU,aAAa,CAAA;AAP1B,IAAA,WAAA,GAAA;;QASE,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAsB;;QAGnC,IAAA,CAAA,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAsB;;AAGlC,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,IAAI,gFAAC;;QAGhC,IAAA,CAAA,UAAU,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAsB;;QAGxC,IAAA,CAAA,OAAO,GAAG,MAAM,EAAS;AAC1B,IAAA;+GAfY,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7B1B,gdAeA,EAAA,MAAA,EAAA,CAAA,mgGAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDUY,UAAU,6OAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAIxB,aAAa,EAAA,UAAA,EAAA,CAAA;kBAPzB,SAAS;sCACS,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,SAAS,WACV,CAAC,UAAU,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,gdAAA,EAAA,MAAA,EAAA,CAAA,mgGAAA,CAAA,EAAA;;;AEzBtC;;AAEG;;;;"}

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

@@ -62,6 +62,8 @@ class DrawerComponent {
         this.hasTabs = input(false, ...(ngDevMode ? [{ debugName: "hasTabs" }] : /* istanbul ignore next */ []));
         /** Drawer size: 'small' (500px), 'large' (1024px) */
         this.size = input('small', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Drawer direction: 'right' (default) or 'bottom' */
+        this.direction = input('right', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
         /** Whether the drawer can be closed by the user via close button */
         this.closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
         /** Whether clicking the mask closes the drawer */
@@ -72,8 +74,15 @@ class DrawerComponent {
         this.interceptor = input(undefined, ...(ngDevMode ? [{ debugName: "interceptor" }] : /* istanbul ignore next */ []));
         this.isContentString = computed(() => typeof this.content() === 'string', ...(ngDevMode ? [{ debugName: "isContentString" }] : /* istanbul ignore next */ []));
         this.hasHeaderAction = computed(() => this.headerAction() != null, ...(ngDevMode ? [{ debugName: "hasHeaderAction" }] : /* istanbul ignore next */ []));
-        /** Computed: drawer width (responsive) and max-width based on `size`. Always right position. */
+        /** Computed: drawer style based on size and direction. */
         this.drawerStyle = computed(() => {
+            if (this.direction() === 'bottom') {
+                return {
+                    width: '100%',
+                    height: 'auto',
+                    maxHeight: '90vh',
+                };
+            }
             const sz = this.size();
             const maxWidth = sz === 'large' ? '1024px' : '500px';
             return {
@@ -235,14 +244,14 @@ class DrawerComponent {
         this.returnValueOnClose = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, subtle: { classPropertyName: "subtle", publicName: "subtle", isSignal: true, isRequired: false, transformFunction: null }, hasTabs: { classPropertyName: "hasTabs", publicName: "hasTabs", 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  [class.tk-drawer--has-tabs]=\"hasTabs()\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <div class=\"tk-drawer__title-container\">\n          <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n          @if (tag() || subtle()) {\n            <div class=\"tk-drawer__subtitle\">\n              @if (tag()) {\n                <tk-tag [value]=\"tag()!\" severity=\"secondary\" />\n              }\n              @if (subtle()) {\n                <span class=\"tk-drawer__subtle\">{{ subtle() }}</span>\n              }\n            </div>\n          }\n        </div>\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-padding-m, 1.5rem)}:host ::ng-deep .tk-drawer--has-tabs .p-drawer-content{padding:var(--tk-spacing-padding-none);overflow-y:hidden}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content{padding:var(--tk-spacing-padding-none);overflow-y:hidden;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content>*{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content>*>*{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs tk-tabs,:host ::ng-deep .tk-drawer--has-tabs p-tabs,:host ::ng-deep .tk-drawer--has-tabs .tk-tabs{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .p-tabpanels{padding:var(--tk-spacing-padding-none);display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .p-tabpanel{padding:var(--tk-spacing-padding-none);overflow-y:auto;flex:1}: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);border-radius:50%}: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-container{display:flex;flex-direction:column;flex:1;min-width:0}.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;width:100%}.tk-drawer__subtitle{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-drawer__subtle{font-size:var(--tk-font-size-body-xs, .75rem);color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400)}.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-padding-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", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, subtle: { classPropertyName: "subtle", publicName: "subtle", isSignal: true, isRequired: false, transformFunction: null }, hasTabs: { classPropertyName: "hasTabs", publicName: "hasTabs", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", 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]=\"direction()\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\"\n  [class.tk-drawer--has-tabs]=\"hasTabs()\"\n  [class.tk-drawer--bottom]=\"direction() === 'bottom'\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <div class=\"tk-drawer__title-container\">\n          <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n          @if (tag() || subtle()) {\n            <div class=\"tk-drawer__subtitle\">\n              @if (tag()) {\n                <tk-tag [value]=\"tag()!\" severity=\"secondary\" />\n              }\n              @if (subtle()) {\n                <span class=\"tk-drawer__subtle\">{{ subtle() }}</span>\n              }\n            </div>\n          }\n        </div>\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    } @else {\n      <ng-content></ng-content>\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-padding-m, 1.5rem)}:host ::ng-deep .tk-drawer--has-tabs .p-drawer-content{padding:var(--tk-spacing-padding-none);overflow-y:hidden}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content{padding:var(--tk-spacing-padding-none);overflow-y:hidden;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content>*{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content>*>*{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs tk-tabs,:host ::ng-deep .tk-drawer--has-tabs p-tabs,:host ::ng-deep .tk-drawer--has-tabs .tk-tabs{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .p-tabpanels{padding:var(--tk-spacing-padding-none);display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .p-tabpanel{padding:var(--tk-spacing-padding-none);overflow-y:auto;flex:1}: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);border-radius:50%}: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)}:host ::ng-deep .tk-drawer--bottom{width:100%;max-width:100%;height:auto;max-height:90vh}:host ::ng-deep .tk-drawer--bottom .p-drawer-content{padding:0}:host ::ng-deep .tk-drawer--bottom .tk-drawer__content{padding-top:var(--tk-spacing-base-25, .25rem)}.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-container{display:flex;flex-direction:column;flex:1;min-width:0}.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;width:100%}.tk-drawer__subtitle{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-drawer__subtle{font-size:var(--tk-font-size-body-xs, .75rem);color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400)}.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-padding-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", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-drawer', imports: [DrawerModule, ButtonComponent, TagComponent], 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  [class.tk-drawer--has-tabs]=\"hasTabs()\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <div class=\"tk-drawer__title-container\">\n          <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n          @if (tag() || subtle()) {\n            <div class=\"tk-drawer__subtitle\">\n              @if (tag()) {\n                <tk-tag [value]=\"tag()!\" severity=\"secondary\" />\n              }\n              @if (subtle()) {\n                <span class=\"tk-drawer__subtle\">{{ subtle() }}</span>\n              }\n            </div>\n          }\n        </div>\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-padding-m, 1.5rem)}:host ::ng-deep .tk-drawer--has-tabs .p-drawer-content{padding:var(--tk-spacing-padding-none);overflow-y:hidden}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content{padding:var(--tk-spacing-padding-none);overflow-y:hidden;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content>*{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content>*>*{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs tk-tabs,:host ::ng-deep .tk-drawer--has-tabs p-tabs,:host ::ng-deep .tk-drawer--has-tabs .tk-tabs{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .p-tabpanels{padding:var(--tk-spacing-padding-none);display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .p-tabpanel{padding:var(--tk-spacing-padding-none);overflow-y:auto;flex:1}: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);border-radius:50%}: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-container{display:flex;flex-direction:column;flex:1;min-width:0}.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;width:100%}.tk-drawer__subtitle{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-drawer__subtle{font-size:var(--tk-font-size-body-xs, .75rem);color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400)}.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-padding-xs, .25rem)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-drawer', imports: [DrawerModule, ButtonComponent, TagComponent], template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  [position]=\"direction()\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\"\n  [class.tk-drawer--has-tabs]=\"hasTabs()\"\n  [class.tk-drawer--bottom]=\"direction() === 'bottom'\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <div class=\"tk-drawer__title-container\">\n          <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n          @if (tag() || subtle()) {\n            <div class=\"tk-drawer__subtitle\">\n              @if (tag()) {\n                <tk-tag [value]=\"tag()!\" severity=\"secondary\" />\n              }\n              @if (subtle()) {\n                <span class=\"tk-drawer__subtle\">{{ subtle() }}</span>\n              }\n            </div>\n          }\n        </div>\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    } @else {\n      <ng-content></ng-content>\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-padding-m, 1.5rem)}:host ::ng-deep .tk-drawer--has-tabs .p-drawer-content{padding:var(--tk-spacing-padding-none);overflow-y:hidden}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content{padding:var(--tk-spacing-padding-none);overflow-y:hidden;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content>*{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .tk-drawer__content>*>*{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs tk-tabs,:host ::ng-deep .tk-drawer--has-tabs p-tabs,:host ::ng-deep .tk-drawer--has-tabs .tk-tabs{display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .p-tabpanels{padding:var(--tk-spacing-padding-none);display:flex;flex-direction:column;flex:1;overflow:hidden}:host ::ng-deep .tk-drawer--has-tabs .p-tabpanel{padding:var(--tk-spacing-padding-none);overflow-y:auto;flex:1}: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);border-radius:50%}: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)}:host ::ng-deep .tk-drawer--bottom{width:100%;max-width:100%;height:auto;max-height:90vh}:host ::ng-deep .tk-drawer--bottom .p-drawer-content{padding:0}:host ::ng-deep .tk-drawer--bottom .tk-drawer__content{padding-top:var(--tk-spacing-base-25, .25rem)}.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-container{display:flex;flex-direction:column;flex:1;min-width:0}.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;width:100%}.tk-drawer__subtitle{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-drawer__subtle{font-size:var(--tk-font-size-body-xs, .75rem);color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400)}.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-padding-xs, .25rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ['contentHost', { ...{
                             read: ViewContainerRef,
-                        }, 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 }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: false }] }], subtle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtle", required: false }] }], hasTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTabs", 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"] }] } });
+                        }, 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 }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: false }] }], subtle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtle", required: false }] }], hasTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTabs", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", 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() {
@@ -276,6 +285,7 @@ class DrawerService {
         componentRef.setInput('content', config.content ?? null);
         componentRef.setInput('headerAction', config.headerAction ?? null);
         componentRef.setInput('size', config.size ?? 'small');
+        componentRef.setInput('direction', config.direction ?? 'right');
         componentRef.setInput('closable', config.closable ?? true);
         componentRef.setInput('dismissible', config.dismissible ?? true);
         componentRef.setInput('data', config.data ?? {});

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 {\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 { TagComponent } from '@tekus/design-system/components/tag';\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, TagComponent],\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  /** Optional tag displayed below the title */\n  tag = input<string | null>(null);\n\n  /** Optional subtle text displayed next to the tag */\n  subtle = input<string | null>(null);\n\n  /** Whether the content includes tabs (affects scroll behavior) */\n  hasTabs = input<boolean>(false);\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      if (this.hasTabs()) {\n        this.hasScroll = false;\n        return;\n      }\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  [class.tk-drawer--has-tabs]=\"hasTabs()\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <div class=\"tk-drawer__title-container\">\n          <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n          @if (tag() || subtle()) {\n            <div class=\"tk-drawer__subtitle\">\n              @if (tag()) {\n                <tk-tag [value]=\"tag()!\" severity=\"secondary\" />\n              }\n              @if (subtle()) {\n                <span class=\"tk-drawer__subtle\">{{ subtle() }}</span>\n              }\n            </div>\n          }\n        </div>\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('tag', config.tag ?? null);\n    componentRef.setInput('subtle', config.subtle ?? null);\n    componentRef.setInput('hasTabs', config.hasTabs ?? false);\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":"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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 { TagComponent } from '@tekus/design-system/components/tag';\nimport { DrawerModule } from 'primeng/drawer';\nimport { DrawerHeaderAction, DrawerSizeType, DrawerDirectionType } from './drawer.types';\nimport {\n  TkCanClose,\n  TkCloseInterceptor,\n  TkDialogRef,\n} from '@tekus/design-system/core/types';\n\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, TagComponent],\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  /** Optional tag displayed below the title */\n  tag = input<string | null>(null);\n\n  /** Optional subtle text displayed next to the tag */\n  subtle = input<string | null>(null);\n\n  /** Whether the content includes tabs (affects scroll behavior) */\n  hasTabs = input<boolean>(false);\n\n  /** Drawer size: 'small' (500px), 'large' (1024px) */\n  size = input<DrawerSizeType>('small');\n\n  /** Drawer direction: 'right' (default) or 'bottom' */\n  direction = input<DrawerDirectionType>('right');\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 style based on size and direction. */\n  drawerStyle = computed(() => {\n    if (this.direction() === 'bottom') {\n      return {\n        width: '100%',\n        height: 'auto',\n        maxHeight: '90vh',\n      };\n    }\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      if (this.hasTabs()) {\n        this.hasScroll = false;\n        return;\n      }\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]=\"direction()\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\"\n  [class.tk-drawer--has-tabs]=\"hasTabs()\"\n  [class.tk-drawer--bottom]=\"direction() === 'bottom'\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <div class=\"tk-drawer__title-container\">\n          <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n          @if (tag() || subtle()) {\n            <div class=\"tk-drawer__subtitle\">\n              @if (tag()) {\n                <tk-tag [value]=\"tag()!\" severity=\"secondary\" />\n              }\n              @if (subtle()) {\n                <span class=\"tk-drawer__subtle\">{{ subtle() }}</span>\n              }\n            </div>\n          }\n        </div>\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    } @else {\n      <ng-content></ng-content>\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('tag', config.tag ?? null);\n    componentRef.setInput('subtle', config.subtle ?? null);\n    componentRef.setInput('hasTabs', config.hasTabs ?? false);\n    componentRef.setInput('content', config.content ?? null);\n    componentRef.setInput('headerAction', config.headerAction ?? null);\n    componentRef.setInput('size', config.size ?? 'small');\n    componentRef.setInput('direction', config.direction ?? 'right');\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":";;;;;;;;;AA8BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCG;MAQU,eAAe,CAAA;AA+E1B,IAAA,WAAA,GAAA;AA9EiB,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,GAAG,GAAG,KAAK,CAAgB,IAAI,0EAAC;;AAGhC,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAgB,IAAI,6EAAC;;AAGnC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAU,KAAK,8EAAC;;AAG/B,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAiB,OAAO,2EAAC;;AAGrC,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAsB,OAAO,gFAAC;;AAG/C,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,IAAI,IAAI,CAAC,SAAS,EAAE,KAAK,QAAQ,EAAE;gBACjC,OAAO;AACL,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,MAAM,EAAE,MAAM;AACd,oBAAA,SAAS,EAAE,MAAM;iBAClB;YACH;AACA,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;QAiFlC,IAAA,CAAA,SAAS,GAAG,KAAK;AA9EvB;;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;AACb,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;AAClB,gBAAA,IAAI,CAAC,SAAS,GAAG,KAAK;gBACtB;YACF;YACA,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;+GAtPW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAKlB,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5E1B,u2DA2DA,00FDQY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,eAAA,EAAA,aAAA,EAAA,OAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,MAAA,EAAA,cAAA,EAAA,aAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,YAAY,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAI1C,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;sCACS,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,WAAW,EAAA,OAAA,EACZ,CAAC,YAAY,EAAE,eAAe,EAAE,YAAY,CAAC,EAAA,QAAA,EAAA,u2DAAA,EAAA,MAAA,EAAA,CAAA,mxFAAA,CAAA,EAAA;AAQb,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,GAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,KAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,QAAA,EAAA,QAAA,EAAA,KAAA,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,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,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,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;;MEhEU,aAAa,CAAA;AAD1B,IAAA,WAAA,GAAA;AAEmB,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,cAAc,CAAC;QAExC,IAAA,CAAA,SAAS,GAAiD,IAAI;AAkEvE,IAAA;AAhEC,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,KAAK,EAAE,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC;QAChD,YAAY,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC;QACtD,YAAY,CAAC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IAAI,KAAK,CAAC;QACzD,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,WAAW,EAAE,MAAM,CAAC,SAAS,IAAI,OAAO,CAAC;QAC/D,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;+GApEW,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,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,cADA,MAAM,EAAA,CAAA,CAAA;;4FACnB,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACZlC;;AAEG;;;;"}

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

@@ -206,6 +206,16 @@ class MultiselectComponent {
          * Placeholder text for the filter input.
          */
         this.filterPlaceHolder = input('', ...(ngDevMode ? [{ debugName: "filterPlaceHolder" }] : /* istanbul ignore next */ []));
+        /**
+         * Target element or selector to append the overlay panel to.
+         * @default undefined
+         */
+        this.appendTo = input(undefined, ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
+        /**
+         * Custom style class to apply to the overlay panel.
+         * @default undefined
+         */
+        this.panelStyleClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelStyleClass" }] : /* istanbul ignore next */ []));
         /**
          * @property {string} id
          * @description
@@ -484,7 +494,7 @@ class MultiselectComponent {
         return this.ngControl?.control || null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "tk-multiselect", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceHolder: { classPropertyName: "filterPlaceHolder", publicName: "filterPlaceHolder", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, fetchParams: { classPropertyName: "fetchParams", publicName: "fetchParams", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", dataSource: "dataSourceChange", selectionChange: "selectionChange", filterChange: "filterChange" }, providers: [TkMultiSelectManager], viewQueries: [{ propertyName: "multiselectComponent", first: true, predicate: ["pMultiselect"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-floatlabel>\n  <p-multiselect\n    #pMultiselect\n    optionLabel=\"name\"\n    [id]=\"id()\"\n    [options]=\"internalOptions()\"\n    [(ngModel)]=\"model\"\n    [display]=\"display()\"\n    [maxSelectedLabels]=\"maxSelectedLabels()\"\n    [selectedItemsLabel]=\"selectedItemsLabel()\"\n    [emptyFilterMessage]=\"emptyFilterMessage()\"\n    [filter]=\"filter()\"\n    [filterPlaceHolder]=\"filterPlaceHolder()\"\n    [styleClass]=\"styleClass()\"\n    [loading]=\"loading() || (dataSource() ? manager.loading() : false)\"\n    [disabled]=\"disabled() || internalDisabled()\"\n    [emptyMessage]=\"emptyMessage()\"\n    [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onFilter)=\"handleFilter($event)\"\n    (onChange)=\"handleChange($event)\"\n    (onPanelShow)=\"onPanelShow()\"\n    (onPanelHide)=\"onPanelHide()\"\n    [resetFilterOnHide]=\"true\">\n\n    <ng-template pTemplate=\"empty\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"info\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyMessage() }}</span>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptyfilter\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"magnifying-glass\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyFilterMessage() }}</span>\n      </div>\n    </ng-template>\n  </p-multiselect>\n  <label [for]=\"id()\">{{ labelText() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched) &&\n      errorMessage()\n    ) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n        errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n        hint()\n      }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-multiselect:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #424243);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-multiselect-option span{color:var(--tk-color-primary-default, #16006f)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-multiselect-option-selected{background-color:var(--tk-color-primary-muted, #b7b0d2)!important}:host ::ng-deep .p-multiselect-chip{background-color:var(--tk-surface-100, #f4f4f5);color:var(--tk-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 999px)!important;padding:4px 8px}:host ::ng-deep .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}:host ::ng-deep .p-overlay{width:-webkit-fill-available}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-multiselect-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .tk-select-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep .tk-select-empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--tk-spacing-base-150, 1.5rem);text-align:center;color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .tk-select-empty-container tk-icon{margin-bottom:var(--tk-spacing-base-50, .5rem)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i4.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i5.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "tk-multiselect", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceHolder: { classPropertyName: "filterPlaceHolder", publicName: "filterPlaceHolder", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, fetchParams: { classPropertyName: "fetchParams", publicName: "fetchParams", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", dataSource: "dataSourceChange", selectionChange: "selectionChange", filterChange: "filterChange" }, providers: [TkMultiSelectManager], viewQueries: [{ propertyName: "multiselectComponent", first: true, predicate: ["pMultiselect"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-floatlabel>\n  <p-multiselect\n    #pMultiselect\n    [appendTo]=\"appendTo()\"\n    [panelStyleClass]=\"panelStyleClass()\"\n    optionLabel=\"name\"\n    [id]=\"id()\"\n    [options]=\"internalOptions()\"\n    [(ngModel)]=\"model\"\n    [display]=\"display()\"\n    [maxSelectedLabels]=\"maxSelectedLabels()\"\n    [selectedItemsLabel]=\"selectedItemsLabel()\"\n    [emptyFilterMessage]=\"emptyFilterMessage()\"\n    [filter]=\"filter()\"\n    [filterPlaceHolder]=\"filterPlaceHolder()\"\n    [styleClass]=\"styleClass()\"\n    [loading]=\"loading() || (dataSource() ? manager.loading() : false)\"\n    [disabled]=\"disabled() || internalDisabled()\"\n    [emptyMessage]=\"emptyMessage()\"\n    [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onFilter)=\"handleFilter($event)\"\n    (onChange)=\"handleChange($event)\"\n    (onPanelShow)=\"onPanelShow()\"\n    (onPanelHide)=\"onPanelHide()\"\n    [resetFilterOnHide]=\"true\">\n\n    <ng-template pTemplate=\"empty\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"info\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyMessage() }}</span>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptyfilter\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"magnifying-glass\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyFilterMessage() }}</span>\n      </div>\n    </ng-template>\n  </p-multiselect>\n  <label [for]=\"id()\">{{ labelText() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched) &&\n      errorMessage()\n    ) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n        errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n        hint()\n      }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-multiselect:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f);top:-.75rem}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #424243);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-multiselect-option span{color:var(--tk-color-primary-default, #16006f)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-multiselect-option-selected{background-color:var(--tk-color-primary-muted, #b7b0d2)!important}:host ::ng-deep .p-multiselect-chip{background-color:var(--tk-surface-100, #f4f4f5);color:var(--tk-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 999px)!important;padding:4px 8px}:host ::ng-deep .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}:host ::ng-deep .p-overlay{width:-webkit-fill-available}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-multiselect-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .tk-select-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep .tk-select-empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--tk-spacing-base-150, 1.5rem);text-align:center;color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .tk-select-empty-container tk-icon{margin-bottom:var(--tk-spacing-base-50, .5rem)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i4.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i5.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
@@ -495,8 +505,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         FloatLabelModule,
                         MessageModule,
                         IconComponent,
-                    ], template: "<p-floatlabel>\n  <p-multiselect\n    #pMultiselect\n    optionLabel=\"name\"\n    [id]=\"id()\"\n    [options]=\"internalOptions()\"\n    [(ngModel)]=\"model\"\n    [display]=\"display()\"\n    [maxSelectedLabels]=\"maxSelectedLabels()\"\n    [selectedItemsLabel]=\"selectedItemsLabel()\"\n    [emptyFilterMessage]=\"emptyFilterMessage()\"\n    [filter]=\"filter()\"\n    [filterPlaceHolder]=\"filterPlaceHolder()\"\n    [styleClass]=\"styleClass()\"\n    [loading]=\"loading() || (dataSource() ? manager.loading() : false)\"\n    [disabled]=\"disabled() || internalDisabled()\"\n    [emptyMessage]=\"emptyMessage()\"\n    [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onFilter)=\"handleFilter($event)\"\n    (onChange)=\"handleChange($event)\"\n    (onPanelShow)=\"onPanelShow()\"\n    (onPanelHide)=\"onPanelHide()\"\n    [resetFilterOnHide]=\"true\">\n\n    <ng-template pTemplate=\"empty\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"info\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyMessage() }}</span>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptyfilter\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"magnifying-glass\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyFilterMessage() }}</span>\n      </div>\n    </ng-template>\n  </p-multiselect>\n  <label [for]=\"id()\">{{ labelText() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched) &&\n      errorMessage()\n    ) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n        errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n        hint()\n      }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-multiselect:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #424243);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-multiselect-option span{color:var(--tk-color-primary-default, #16006f)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-multiselect-option-selected{background-color:var(--tk-color-primary-muted, #b7b0d2)!important}:host ::ng-deep .p-multiselect-chip{background-color:var(--tk-surface-100, #f4f4f5);color:var(--tk-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 999px)!important;padding:4px 8px}:host ::ng-deep .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}:host ::ng-deep .p-overlay{width:-webkit-fill-available}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-multiselect-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .tk-select-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep .tk-select-empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--tk-spacing-base-150, 1.5rem);text-align:center;color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .tk-select-empty-container tk-icon{margin-bottom:var(--tk-spacing-base-50, .5rem)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { multiselectComponent: [{ type: i0.ViewChild, args: ['pMultiselect', { isSignal: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }, { type: i0.Output, args: ["dataSourceChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceHolder", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], fetchParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchParams", required: false }] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }], sortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }] } });
+                    ], template: "<p-floatlabel>\n  <p-multiselect\n    #pMultiselect\n    [appendTo]=\"appendTo()\"\n    [panelStyleClass]=\"panelStyleClass()\"\n    optionLabel=\"name\"\n    [id]=\"id()\"\n    [options]=\"internalOptions()\"\n    [(ngModel)]=\"model\"\n    [display]=\"display()\"\n    [maxSelectedLabels]=\"maxSelectedLabels()\"\n    [selectedItemsLabel]=\"selectedItemsLabel()\"\n    [emptyFilterMessage]=\"emptyFilterMessage()\"\n    [filter]=\"filter()\"\n    [filterPlaceHolder]=\"filterPlaceHolder()\"\n    [styleClass]=\"styleClass()\"\n    [loading]=\"loading() || (dataSource() ? manager.loading() : false)\"\n    [disabled]=\"disabled() || internalDisabled()\"\n    [emptyMessage]=\"emptyMessage()\"\n    [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onFilter)=\"handleFilter($event)\"\n    (onChange)=\"handleChange($event)\"\n    (onPanelShow)=\"onPanelShow()\"\n    (onPanelHide)=\"onPanelHide()\"\n    [resetFilterOnHide]=\"true\">\n\n    <ng-template pTemplate=\"empty\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"info\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyMessage() }}</span>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptyfilter\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"magnifying-glass\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyFilterMessage() }}</span>\n      </div>\n    </ng-template>\n  </p-multiselect>\n  <label [for]=\"id()\">{{ labelText() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched) &&\n      errorMessage()\n    ) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n        errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n        hint()\n      }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-multiselect:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f);top:-.75rem}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #424243);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-multiselect-option span{color:var(--tk-color-primary-default, #16006f)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-multiselect-option-selected{background-color:var(--tk-color-primary-muted, #b7b0d2)!important}:host ::ng-deep .p-multiselect-chip{background-color:var(--tk-surface-100, #f4f4f5);color:var(--tk-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 999px)!important;padding:4px 8px}:host ::ng-deep .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}:host ::ng-deep .p-overlay{width:-webkit-fill-available}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-multiselect-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .tk-select-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep .tk-select-empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--tk-spacing-base-150, 1.5rem);text-align:center;color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .tk-select-empty-container tk-icon{margin-bottom:var(--tk-spacing-base-50, .5rem)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { multiselectComponent: [{ type: i0.ViewChild, args: ['pMultiselect', { isSignal: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }, { type: i0.Output, args: ["dataSourceChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceHolder", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], panelStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyleClass", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], fetchParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchParams", required: false }] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }], sortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.