npm - @tekus/design-system - Versions diffs - 5.6.0 → 5.8.0 - Mend

@tekus/design-system 5.6.0 → 5.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

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

@@ -163,7 +163,7 @@ class FallbackViewComponent {
         this.linkAction.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FallbackViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FallbackViewComponent, isStandalone: true, selector: "tk-fallback-view", inputs: { type: "type", imageSrc: "imageSrc", illustrationAlt: "illustrationAlt", title: "title", message: "message", buttonLabel: "buttonLabel", linkLabel: "linkLabel", buttonDisabled: "buttonDisabled" }, outputs: { buttonAction: "buttonAction", linkAction: "linkAction" }, ngImport: i0, template: "<div\n  class=\"tk-fallback-view\"\n  [class.tk-fallback-view--section]=\"type === 'section'\">\n  <ng-content select=\"[image]\"></ng-content>\n  @if (imageSrc) {\n  <img\n    [src]=\"imageSrc\"\n    [alt]=\"illustrationAlt || 'fallback illustration'\"\n    class=\"tk-fallback-view__image\" />\n  }\n\n  <ng-content select=\"[title]\"></ng-content>\n  @if (title && type === 'content') {\n  <h2 class=\"tk-fallback-view__title\">{{ title }}</h2>\n  }\n\n  <ng-content select=\"[message]\"></ng-content>\n  @if (message) {\n  <p class=\"tk-fallback-view__message\" [innerHTML]=\"message\"></p>\n  }\n\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (type === 'content' && (buttonLabel || linkLabel)) {\n  <div class=\"tk-fallback-view__actions\">\n    @if (buttonLabel) {\n    <tk-button\n      [label]=\"buttonLabel\"\n      severity=\"primary\"\n      [disabled]=\"buttonDisabled\"\n      (clicked)=\"onButtonActionClick()\" />\n    } @if (linkLabel) {\n    <tk-button\n      [label]=\"linkLabel\"\n      [link]=\"true\"\n      (clicked)=\"onLinkActionClick()\" />\n    }\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.tk-fallback-view{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--tk-spacing-gap-m, 1rem);padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);margin:0 auto}.tk-fallback-view__image,.tk-fallback-view>[image]{max-width:18.75rem;max-height:18.75rem;width:auto;height:auto;object-fit:contain;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}.tk-fallback-view__title,.tk-fallback-view>[title]{font-size:var(--tk-font-size-base-150, 1.5rem);font-weight:var(--tk-font-weight-bold, 700);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__message,.tk-fallback-view>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__actions,.tk-fallback-view>[actions]{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-75, .75rem)}.tk-fallback-view--section{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:var(--tk-spacing-gap-m, 1rem);width:100%;min-height:3.75rem;padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);background-color:var(--tk-color-base-surface-0, #ffffff);color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view--section .tk-fallback-view__image,.tk-fallback-view--section>[image]{width:3.75rem;height:3.75rem;max-width:3.75rem;max-height:3.75rem;margin-bottom:0;object-fit:contain}.tk-fallback-view--section .tk-fallback-view__message,.tk-fallback-view--section>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon"], outputs: ["clicked"] }, { kind: "ngmodule", type: CardModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FallbackViewComponent, isStandalone: true, selector: "tk-fallback-view", inputs: { type: "type", imageSrc: "imageSrc", illustrationAlt: "illustrationAlt", title: "title", message: "message", buttonLabel: "buttonLabel", linkLabel: "linkLabel", buttonDisabled: "buttonDisabled" }, outputs: { buttonAction: "buttonAction", linkAction: "linkAction" }, ngImport: i0, template: "<div\n  class=\"tk-fallback-view\"\n  [class.tk-fallback-view--section]=\"type === 'section'\">\n  <ng-content select=\"[image]\"></ng-content>\n  @if (imageSrc) {\n  <img\n    [src]=\"imageSrc\"\n    [alt]=\"illustrationAlt || 'fallback illustration'\"\n    class=\"tk-fallback-view__image\" />\n  }\n\n  <ng-content select=\"[title]\"></ng-content>\n  @if (title && type === 'content') {\n  <h2 class=\"tk-fallback-view__title\">{{ title }}</h2>\n  }\n\n  <ng-content select=\"[message]\"></ng-content>\n  @if (message) {\n  <p class=\"tk-fallback-view__message\" [innerHTML]=\"message\"></p>\n  }\n\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (type === 'content' && (buttonLabel || linkLabel)) {\n  <div class=\"tk-fallback-view__actions\">\n    @if (buttonLabel) {\n    <tk-button\n      [label]=\"buttonLabel\"\n      severity=\"primary\"\n      [disabled]=\"buttonDisabled\"\n      (clicked)=\"onButtonActionClick()\" />\n    } @if (linkLabel) {\n    <tk-button\n      [label]=\"linkLabel\"\n      [link]=\"true\"\n      (clicked)=\"onLinkActionClick()\" />\n    }\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.tk-fallback-view{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--tk-spacing-gap-m, 1rem);padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);margin:0 auto}.tk-fallback-view__image,.tk-fallback-view>[image]{max-width:18.75rem;max-height:18.75rem;width:auto;height:auto;object-fit:contain;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}.tk-fallback-view__title,.tk-fallback-view>[title]{font-size:var(--tk-font-size-base-150, 1.5rem);font-weight:var(--tk-font-weight-bold, 700);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__message,.tk-fallback-view>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__actions,.tk-fallback-view>[actions]{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-75, .75rem)}.tk-fallback-view--section{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:var(--tk-spacing-gap-m, 1rem);width:100%;min-height:3.75rem;padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);background-color:var(--tk-color-base-surface-0, #ffffff);color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view--section .tk-fallback-view__image,.tk-fallback-view--section>[image]{width:3.75rem;height:3.75rem;max-width:3.75rem;max-height:3.75rem;margin-bottom:0;object-fit:contain}.tk-fallback-view--section .tk-fallback-view__message,.tk-fallback-view--section>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }, { kind: "ngmodule", type: CardModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FallbackViewComponent, decorators: [{
             type: Component,

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

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

package/fesm2022/tekus-design-system-components-input-text.mjs CHANGED Viewed

@@ -207,11 +207,11 @@ class InputTextComponent {
         this.isWriting = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InputTextComponent, isStandalone: true, selector: "tk-input-text", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", 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 }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    @if (icon()) {\n      <tk-icon [icon]=\"icon()\" class=\"tk-input-icon\"></tk-icon>\n    }\n    <div class=\"tk-input-prefix\">\n      <ng-content select=\"[tk-prefix]\"></ng-content>\n    </div>\n    \n    <input \n      pInputText \n      [id]=\"id()\" \n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [type]=\"type()\" \n      [attr.maxlength]=\"maxLength()\"\n      [class.has-icon]=\"icon()\"\n      [class.has-clear]=\"clearable()\"\n      [disabled]=\"disabled()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"\n    />\n    \n    <label [for]=\"id()\">{{ label() }}</label>\n    \n    @if (clearable() && value()) {\n      <tk-icon \n        icon=\"xmark\" \n        class=\"tk-clear-icon\" \n        (click)=\"clear()\" \n        (keydown.enter)=\"clear()\" \n        (keydown.space)=\"clear()\">\n      </tk-icon>\n    }\n    <div class=\"tk-input-suffix\">\n      <ng-content select=\"[tk-suffix]\"></ng-content>\n    </div>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\" class=\"tk-character-counter\">\n      {{ counterText() }}\n    </p-message>\n  }\n</div>", styles: [":host ::ng-deep .p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-inputtext.ng-invalid.ng-dirty,:host ::ng-deep .p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-inputtext.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .tk-input-wrapper:has(.tk-input-suffix:not(:empty)) .p-inputtext{padding-right:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-input-wrapper:has(.tk-input-prefix:not(:empty)) .p-inputtext{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(input:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(input:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(input.has-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(.tk-input-prefix:not(:empty)) label{left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-input-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--tk-color-base-surface-400, #cecdcd);pointer-events:none;z-index:1}:host ::ng-deep .tk-input-prefix{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-left:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-prefix:empty{display:none}:host ::ng-deep .tk-clear-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--tk-color-base-surface-700, #424243);z-index:1}:host ::ng-deep .tk-input-suffix{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-right:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-suffix:empty{display:none}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;align-self:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"], outputs: ["iconChange", "styleIconChange", "colorChange", "sizeChange", "disabledChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InputTextComponent, isStandalone: true, selector: "tk-input-text", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", 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 }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    @if (icon()) {\n      <tk-icon [icon]=\"icon()\" class=\"tk-input-icon\"></tk-icon>\n    }\n    <div class=\"tk-input-prefix\">\n      <ng-content select=\"[tk-prefix]\"></ng-content>\n    </div>\n    \n    <input \n      pInputText \n      [id]=\"id()\" \n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [type]=\"type()\" \n      [attr.maxlength]=\"maxLength()\"\n      [class.has-icon]=\"icon()\"\n      [class.has-clear]=\"clearable()\"\n      [disabled]=\"disabled()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"\n    />\n    \n    <label [for]=\"id()\">{{ label() }}</label>\n    \n    @if (clearable() && value()) {\n      <tk-icon \n        icon=\"xmark\" \n        class=\"tk-clear-icon\" \n        (click)=\"clear()\" \n        (keydown.enter)=\"clear()\" \n        (keydown.space)=\"clear()\">\n      </tk-icon>\n    }\n    <div class=\"tk-input-suffix\">\n      <ng-content select=\"[tk-suffix]\"></ng-content>\n    </div>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\" class=\"tk-character-counter\">\n      {{ counterText() }}\n    </p-message>\n  }\n</div>", styles: [":host ::ng-deep .p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-inputtext.ng-invalid.ng-dirty,:host ::ng-deep .p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-inputtext.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .tk-input-wrapper:has(.tk-input-suffix:not(:empty)) .p-inputtext{padding-right:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-input-wrapper:has(.tk-input-prefix:not(:empty)) .p-inputtext{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(input:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(input:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(input.has-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(.tk-input-prefix:not(:empty)) label{left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-input-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--tk-color-base-surface-400, #cecdcd);pointer-events:none;z-index:1}:host ::ng-deep .tk-input-prefix{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-left:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-prefix:empty{display:none}:host ::ng-deep .tk-clear-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--tk-color-base-surface-700, #424243);z-index:1}:host ::ng-deep .tk-input-suffix{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-right:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-suffix:empty{display:none}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;align-self:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"], outputs: ["iconChange", "styleIconChange", "colorChange", "sizeChange", "disabledChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-input-text', imports: [CommonModule, ReactiveFormsModule, InputTextModule, FloatLabelModule, MessageModule, IconComponent], template: "<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    @if (icon()) {\n      <tk-icon [icon]=\"icon()\" class=\"tk-input-icon\"></tk-icon>\n    }\n    <div class=\"tk-input-prefix\">\n      <ng-content select=\"[tk-prefix]\"></ng-content>\n    </div>\n    \n    <input \n      pInputText \n      [id]=\"id()\" \n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [type]=\"type()\" \n      [attr.maxlength]=\"maxLength()\"\n      [class.has-icon]=\"icon()\"\n      [class.has-clear]=\"clearable()\"\n      [disabled]=\"disabled()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"\n    />\n    \n    <label [for]=\"id()\">{{ label() }}</label>\n    \n    @if (clearable() && value()) {\n      <tk-icon \n        icon=\"xmark\" \n        class=\"tk-clear-icon\" \n        (click)=\"clear()\" \n        (keydown.enter)=\"clear()\" \n        (keydown.space)=\"clear()\">\n      </tk-icon>\n    }\n    <div class=\"tk-input-suffix\">\n      <ng-content select=\"[tk-suffix]\"></ng-content>\n    </div>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\" class=\"tk-character-counter\">\n      {{ counterText() }}\n    </p-message>\n  }\n</div>", styles: [":host ::ng-deep .p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-inputtext.ng-invalid.ng-dirty,:host ::ng-deep .p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-inputtext.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .tk-input-wrapper:has(.tk-input-suffix:not(:empty)) .p-inputtext{padding-right:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-input-wrapper:has(.tk-input-prefix:not(:empty)) .p-inputtext{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(input:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(input:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(input.has-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(.tk-input-prefix:not(:empty)) label{left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-input-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--tk-color-base-surface-400, #cecdcd);pointer-events:none;z-index:1}:host ::ng-deep .tk-input-prefix{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-left:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-prefix:empty{display:none}:host ::ng-deep .tk-clear-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--tk-color-base-surface-700, #424243);z-index:1}:host ::ng-deep .tk-input-suffix{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-right:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-suffix:empty{display:none}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;align-self:flex-start}\n"] }]
+            args: [{ selector: 'tk-input-text', imports: [CommonModule, ReactiveFormsModule, InputTextModule, FloatLabelModule, MessageModule, IconComponent], template: "<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    @if (icon()) {\n      <tk-icon [icon]=\"icon()\" class=\"tk-input-icon\"></tk-icon>\n    }\n    <div class=\"tk-input-prefix\">\n      <ng-content select=\"[tk-prefix]\"></ng-content>\n    </div>\n    \n    <input \n      pInputText \n      [id]=\"id()\" \n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [type]=\"type()\" \n      [attr.maxlength]=\"maxLength()\"\n      [class.has-icon]=\"icon()\"\n      [class.has-clear]=\"clearable()\"\n      [disabled]=\"disabled()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"\n    />\n    \n    <label [for]=\"id()\">{{ label() }}</label>\n    \n    @if (clearable() && value()) {\n      <tk-icon \n        icon=\"xmark\" \n        class=\"tk-clear-icon\" \n        (click)=\"clear()\" \n        (keydown.enter)=\"clear()\" \n        (keydown.space)=\"clear()\">\n      </tk-icon>\n    }\n    <div class=\"tk-input-suffix\">\n      <ng-content select=\"[tk-suffix]\"></ng-content>\n    </div>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\" class=\"tk-character-counter\">\n      {{ counterText() }}\n    </p-message>\n  }\n</div>", styles: [":host ::ng-deep .p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-inputtext.ng-invalid.ng-dirty,:host ::ng-deep .p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-inputtext.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .tk-input-wrapper:has(.tk-input-suffix:not(:empty)) .p-inputtext{padding-right:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-input-wrapper:has(.tk-input-prefix:not(:empty)) .p-inputtext{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(input:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(input:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(input.has-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(.tk-input-prefix:not(:empty)) label{left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-input-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--tk-color-base-surface-400, #cecdcd);pointer-events:none;z-index:1}:host ::ng-deep .tk-input-prefix{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-left:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-prefix:empty{display:none}:host ::ng-deep .tk-clear-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--tk-color-base-surface-700, #424243);z-index:1}:host ::ng-deep .tk-input-suffix{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-right:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-suffix:empty{display:none}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;align-self:flex-start}\n"] }]
         }], ctorParameters: () => [] });
 /**

package/fesm2022/tekus-design-system-components-input-text.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tekus-design-system-components-input-text.mjs","sources":["../../../projects/design-system/components/input-text/src/input-text.component.ts","../../../projects/design-system/components/input-text/src/input-text.component.html","../../../projects/design-system/components/input-text/tekus-design-system-components-input-text.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, input, model, signal, computed, OnInit, inject, OnDestroy } from '@angular/core';\nimport { ControlValueAccessor, FormControl, ReactiveFormsModule, NgControl } from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { InputTextModule } from 'primeng/inputtext';\nimport { MessageModule } from 'primeng/message';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n@Component({\n selector: 'tk-input-text',\n imports: [CommonModule, ReactiveFormsModule, InputTextModule, FloatLabelModule, MessageModule, IconComponent],\n templateUrl: './input-text.component.html',\n styleUrl: './input-text.component.scss',\n})\nexport class InputTextComponent implements ControlValueAccessor, OnInit, OnDestroy {\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n /*\n @property {ModelSignal<string>} value\n * @description\n * The value of the input. Supports two-way binding via signals.\n /\n value = model<string>('');\n\n /\n @property {InputSignal<FormControl>} control\n * @description\n * External FormControl used to read/set the input value.\n * If not provided, an internal FormControl is created.\n /\n control = input<FormControl>(new FormControl(''));\n\n /\n @property {InputSignal<string>} label\n * @description\n * Label displayed above the input.\n /\n label = input<string>('');\n\n /\n @property {InputSignal<string>} type\n * @description\n * Type of the input (text, password, email, etc.).\n * @default 'text'\n /\n type = input<string>('text');\n\n /\n @property {InputSignal<string>} id\n * @description\n * HTML id attribute for the input.\n * @default 'tk-input-text'\n /\n id = input<string>('tk-input-text');\n\n /\n @property {InputSignal<string>} icon\n * @description\n * Icon to display next to the input (e.g., 'pi pi-search').\n /\n icon = input<string>('');\n\n /\n @property {InputSignal<boolean>} clearable\n * @description\n * Whether to show a clear button when the input has a value.\n * @default false\n /\n clearable = input<boolean>(false);\n\n /\n @property {InputSignal<string>} errorMessage\n * @description\n * Message to display when the control is invalid and touched.\n /\n errorMessage = input<string>('');\n\n /\n @property {InputSignal<string>} hint\n * @description\n * Hint text to display below the input.\n /\n /\n @property {InputSignal<string>} hint\n * @description\n * Hint text to display below the input.\n /\n hint = input<string>('');\n\n /\n @property {InputSignal<number \| null>} maxLength\n * @description\n * Maximum number of characters allowed in the input.\n /\n maxLength = input<number \| null>(null);\n\n /\n @property {boolean} disabled\n * @description\n * Whether the input is disabled.\n /\n disabled = signal<boolean>(false);\n\n get effectiveControl(): FormControl {\n return (this.ngControl?.control as FormControl) \|\| this.control();\n }\n\n counterText = computed(() => {\n const max = this.maxLength();\n return max ? `${this.value().length}/${max}` : '';\n });\n\n\n onChange: (value: string) => void = () => {};\n onTouched: () => void = () => {};\n private isWriting = false;\n private readonly subscription = new Subscription();\n\n ngOnInit(): void {\n const control = this.effectiveControl;\n if (control.value) {\n this.value.set(control.value);\n }\n\n // Sync initial disabled state\n this.disabled.set(control.disabled);\n\n this.subscription.add(\n control.valueChanges.subscribe(val => {\n if (this.isWriting) return;\n if (val !== this.value()) {\n this.value.set(val \|\| '');\n this.onChange(val);\n }\n })\n );\n\n // Sync disabled state on status change\n this.subscription.add(\n control.statusChanges.subscribe(() => {\n this.disabled.set(control.disabled);\n })\n );\n }\n\n ngOnDestroy(): void {\n this.subscription.unsubscribe();\n }\n\n /\n @method writeValue\n * @description\n * Writes a new value to the element.\n * @param value The new value.\n /\n writeValue(value: string): void {\n this.value.set(value \|\| '');\n this.control().setValue(value \|\| '', { emitEvent: false });\n }\n\n /\n @method registerOnChange\n * @description\n * Registers a callback function that is called when the control's value changes in the UI.\n * @param fn The callback function.\n /\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n /\n @method registerOnTouched\n * @description\n * Registers a callback function that is called by the forms API on initialization to update the form model on blur.\n * @param fn The callback function.\n /\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /\n @method setDisabledState\n * @description\n * Function that is called by the forms API when the control status changes to or from 'DISABLED'.\n * @param isDisabled The disabled status to set on the element.\n /\n setDisabledState?(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n if (isDisabled) {\n this.control().disable({ emitEvent: false });\n } else {\n this.control().enable({ emitEvent: false });\n }\n }\n\n /\n @method onInput\n * @description\n * Handles input events to update the model and notify forms.\n * @param event The input event.\n /\n onInput(event: Event): void {\n const input = event.target as HTMLInputElement;\n this.isWriting = true;\n this.value.set(input.value);\n this.onChange(input.value);\n this.effectiveControl.setValue(input.value);\n this.effectiveControl.markAsDirty();\n this.isWriting = false;\n }\n\n /\n @method onBlur\n * @description\n * Handles blur events to mark the control as touched.\n /\n onBlur(): void {\n this.onTouched();\n this.effectiveControl.markAsTouched();\n }\n\n /\n @method clear\n * @description\n * Clears the input value.\n /\n clear(): void {\n this.isWriting = true;\n this.value.set('');\n this.onChange('');\n this.control().setValue('');\n this.isWriting = false;\n }\n}\n","<p-floatlabel>\n <div class=\"tk-input-wrapper\">\n @if (icon()) {\n <tk-icon [icon]=\"icon()\" class=\"tk-input-icon\"></tk-icon>\n }\n <div class=\"tk-input-prefix\">\n <ng-content select=\"[tk-prefix]\"></ng-content>\n </div>\n \n <input \n pInputText \n [id]=\"id()\" \n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [type]=\"type()\" \n [attr.maxlength]=\"maxLength()\"\n [class.has-icon]=\"icon()\"\n [class.has-clear]=\"clearable()\"\n [disabled]=\"disabled()\"\n [class.ng-invalid]=\"effectiveControl.invalid\"\n [class.ng-dirty]=\"effectiveControl.dirty\"\n [class.ng-touched]=\"effectiveControl.touched\"\n />\n \n <label [for]=\"id()\">{{ label() }}</label>\n \n @if (clearable() && value()) {\n <tk-icon \n icon=\"xmark\" \n class=\"tk-clear-icon\" \n (click)=\"clear()\" \n (keydown.enter)=\"clear()\" \n (keydown.space)=\"clear()\">\n </tk-icon>\n }\n <div class=\"tk-input-suffix\">\n <ng-content select=\"[tk-suffix]\"></ng-content>\n </div>\n </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n @if ((effectiveControl.invalid && (effectiveControl.dirty \|\| effectiveControl.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n }\n </div>\n\n @if (maxLength()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\" class=\"tk-character-counter\">\n {{ counterText() }}\n </p-message>\n }\n</div>","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"tekus-design-system-components-input-text.mjs","sources":["../../../projects/design-system/components/input-text/src/input-text.component.ts","../../../projects/design-system/components/input-text/src/input-text.component.html","../../../projects/design-system/components/input-text/tekus-design-system-components-input-text.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, input, model, signal, computed, OnInit, inject, OnDestroy } from '@angular/core';\nimport { ControlValueAccessor, FormControl, ReactiveFormsModule, NgControl } from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { InputTextModule } from 'primeng/inputtext';\nimport { MessageModule } from 'primeng/message';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n@Component({\n selector: 'tk-input-text',\n imports: [CommonModule, ReactiveFormsModule, InputTextModule, FloatLabelModule, MessageModule, IconComponent],\n templateUrl: './input-text.component.html',\n styleUrl: './input-text.component.scss',\n})\nexport class InputTextComponent implements ControlValueAccessor, OnInit, OnDestroy {\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n /*\n @property {ModelSignal<string>} value\n * @description\n * The value of the input. Supports two-way binding via signals.\n /\n value = model<string>('');\n\n /\n @property {InputSignal<FormControl>} control\n * @description\n * External FormControl used to read/set the input value.\n * If not provided, an internal FormControl is created.\n /\n control = input<FormControl>(new FormControl(''));\n\n /\n @property {InputSignal<string>} label\n * @description\n * Label displayed above the input.\n /\n label = input<string>('');\n\n /\n @property {InputSignal<string>} type\n * @description\n * Type of the input (text, password, email, etc.).\n * @default 'text'\n /\n type = input<string>('text');\n\n /\n @property {InputSignal<string>} id\n * @description\n * HTML id attribute for the input.\n * @default 'tk-input-text'\n /\n id = input<string>('tk-input-text');\n\n /\n @property {InputSignal<string>} icon\n * @description\n * Icon to display next to the input (e.g., 'pi pi-search').\n /\n icon = input<string>('');\n\n /\n @property {InputSignal<boolean>} clearable\n * @description\n * Whether to show a clear button when the input has a value.\n * @default false\n /\n clearable = input<boolean>(false);\n\n /\n @property {InputSignal<string>} errorMessage\n * @description\n * Message to display when the control is invalid and touched.\n /\n errorMessage = input<string>('');\n\n /\n @property {InputSignal<string>} hint\n * @description\n * Hint text to display below the input.\n /\n /\n @property {InputSignal<string>} hint\n * @description\n * Hint text to display below the input.\n /\n hint = input<string>('');\n\n /\n @property {InputSignal<number \| null>} maxLength\n * @description\n * Maximum number of characters allowed in the input.\n /\n maxLength = input<number \| null>(null);\n\n /\n @property {boolean} disabled\n * @description\n * Whether the input is disabled.\n /\n disabled = signal<boolean>(false);\n\n get effectiveControl(): FormControl {\n return (this.ngControl?.control as FormControl) \|\| this.control();\n }\n\n counterText = computed(() => {\n const max = this.maxLength();\n return max ? `${this.value().length}/${max}` : '';\n });\n\n\n onChange: (value: string) => void = () => {};\n onTouched: () => void = () => {};\n private isWriting = false;\n private readonly subscription = new Subscription();\n\n ngOnInit(): void {\n const control = this.effectiveControl;\n if (control.value) {\n this.value.set(control.value);\n }\n\n // Sync initial disabled state\n this.disabled.set(control.disabled);\n\n this.subscription.add(\n control.valueChanges.subscribe(val => {\n if (this.isWriting) return;\n if (val !== this.value()) {\n this.value.set(val \|\| '');\n this.onChange(val);\n }\n })\n );\n\n // Sync disabled state on status change\n this.subscription.add(\n control.statusChanges.subscribe(() => {\n this.disabled.set(control.disabled);\n })\n );\n }\n\n ngOnDestroy(): void {\n this.subscription.unsubscribe();\n }\n\n /\n @method writeValue\n * @description\n * Writes a new value to the element.\n * @param value The new value.\n /\n writeValue(value: string): void {\n this.value.set(value \|\| '');\n this.control().setValue(value \|\| '', { emitEvent: false });\n }\n\n /\n @method registerOnChange\n * @description\n * Registers a callback function that is called when the control's value changes in the UI.\n * @param fn The callback function.\n /\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n /\n @method registerOnTouched\n * @description\n * Registers a callback function that is called by the forms API on initialization to update the form model on blur.\n * @param fn The callback function.\n /\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /\n @method setDisabledState\n * @description\n * Function that is called by the forms API when the control status changes to or from 'DISABLED'.\n * @param isDisabled The disabled status to set on the element.\n /\n setDisabledState?(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n if (isDisabled) {\n this.control().disable({ emitEvent: false });\n } else {\n this.control().enable({ emitEvent: false });\n }\n }\n\n /\n @method onInput\n * @description\n * Handles input events to update the model and notify forms.\n * @param event The input event.\n /\n onInput(event: Event): void {\n const input = event.target as HTMLInputElement;\n this.isWriting = true;\n this.value.set(input.value);\n this.onChange(input.value);\n this.effectiveControl.setValue(input.value);\n this.effectiveControl.markAsDirty();\n this.isWriting = false;\n }\n\n /\n @method onBlur\n * @description\n * Handles blur events to mark the control as touched.\n /\n onBlur(): void {\n this.onTouched();\n this.effectiveControl.markAsTouched();\n }\n\n /\n @method clear\n * @description\n * Clears the input value.\n /\n clear(): void {\n this.isWriting = true;\n this.value.set('');\n this.onChange('');\n this.control().setValue('');\n this.isWriting = false;\n }\n}\n","<p-floatlabel>\n <div class=\"tk-input-wrapper\">\n @if (icon()) {\n <tk-icon [icon]=\"icon()\" class=\"tk-input-icon\"></tk-icon>\n }\n <div class=\"tk-input-prefix\">\n <ng-content select=\"[tk-prefix]\"></ng-content>\n </div>\n \n <input \n pInputText \n [id]=\"id()\" \n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [type]=\"type()\" \n [attr.maxlength]=\"maxLength()\"\n [class.has-icon]=\"icon()\"\n [class.has-clear]=\"clearable()\"\n [disabled]=\"disabled()\"\n [class.ng-invalid]=\"effectiveControl.invalid\"\n [class.ng-dirty]=\"effectiveControl.dirty\"\n [class.ng-touched]=\"effectiveControl.touched\"\n />\n \n <label [for]=\"id()\">{{ label() }}</label>\n \n @if (clearable() && value()) {\n <tk-icon \n icon=\"xmark\" \n class=\"tk-clear-icon\" \n (click)=\"clear()\" \n (keydown.enter)=\"clear()\" \n (keydown.space)=\"clear()\">\n </tk-icon>\n }\n <div class=\"tk-input-suffix\">\n <ng-content select=\"[tk-suffix]\"></ng-content>\n </div>\n </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n @if ((effectiveControl.invalid && (effectiveControl.dirty \|\| effectiveControl.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n }\n </div>\n\n @if (maxLength()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\" class=\"tk-character-counter\">\n {{ counterText() }}\n </p-message>\n }\n</div>","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;MAea,kBAAkB,CAAA;AAG7B,IAAA,WAAA,GAAA;AAFS,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAQtE;;;;AAIG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,CAAC;AAEzB;;;;;AAKG;QACH,IAAO,CAAA,OAAA,GAAG,KAAK,CAAc,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;AAEjD;;;;AAIG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,CAAC;AAEzB;;;;;AAKG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,MAAM,CAAC;AAE5B;;;;;AAKG;AACH,QAAA,IAAA,CAAA,EAAE,GAAG,KAAK,CAAS,eAAe,CAAC;AAEnC;;;;AAIG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE,CAAC;AAExB;;;;;AAKG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,KAAK,CAAC;AAEjC;;;;AAIG;AACH,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAS,EAAE,CAAC;AAEhC;;;;AAIG;AACH;;;;AAIG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE,CAAC;AAExB;;;;AAIG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAgB,IAAI,CAAC;AAEtC;;;;AAIG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAU,KAAK,CAAC;AAMjC,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AAC1B,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,EAAE;AAC5B,YAAA,OAAO,GAAG,GAAG,CAAG,EAAA,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,IAAI,GAAG,CAAA,CAAE,GAAG,EAAE;AACnD,SAAC,CAAC;AAGF,QAAA,IAAA,CAAA,QAAQ,GAA4B,MAAK,GAAG;AAC5C,QAAA,IAAA,CAAA,SAAS,GAAe,MAAK,GAAG;QACxB,IAAS,CAAA,SAAA,GAAG,KAAK;AACR,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAE;AAxGhD,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI;;;AA0FvC,IAAA,IAAI,gBAAgB,GAAA;QAClB,OAAQ,IAAI,CAAC,SAAS,EAAE,OAAuB,IAAI,IAAI,CAAC,OAAO,EAAE;;IAcnE,QAAQ,GAAA;AACN,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB;AACrC,QAAA,IAAI,OAAO,CAAC,KAAK,EAAE;YACjB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC;;;QAI/B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC;AAEnC,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CACnB,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,IAAG;YACnC,IAAI,IAAI,CAAC,SAAS;gBAAE;AACpB,YAAA,IAAI,GAAG,KAAK,IAAI,CAAC,KAAK,EAAE,EAAE;gBACxB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC;AACzB,gBAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;;SAErB,CAAC,CACH;;AAGD,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CACnB,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,MAAK;YACnC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC;SACpC,CAAC,CACH;;IAGH,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE;;AAGjC;;;;;AAKG;AACH,IAAA,UAAU,CAAC,KAAa,EAAA;QACtB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;AAC3B,QAAA,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;;AAG5D;;;;;AAKG;AACH,IAAA,gBAAgB,CAAC,EAA2B,EAAA;AAC1C,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;;AAGpB;;;;;AAKG;AACH,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;;AAGrB;;;;;AAKG;AACH,IAAA,gBAAgB,CAAE,UAAmB,EAAA;AACnC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC;QAC7B,IAAI,UAAU,EAAE;AACd,YAAA,IAAI,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;;aACvC;AACL,YAAA,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;;;AAI/C;;;;;AAKG;AACH,IAAA,OAAO,CAAC,KAAY,EAAA;AAClB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;QACrB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC;AAC3B,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;AAC3C,QAAA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE;AACnC,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;;AAGxB;;;;AAIG;IACH,MAAM,GAAA;QACJ,IAAI,CAAC,SAAS,EAAE;AAChB,QAAA,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE;;AAGvC;;;;AAIG;IACH,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;AAClB,QAAA,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QACjB,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC;AAC3B,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;;+GA/Nb,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,ECf/B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,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,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,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,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,EAAA,EAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,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,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,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,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,4wDAwDM,ED7CM,MAAA,EAAA,CAAA,67GAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,mBAAmB,EAAE,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,eAAe,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,gBAAgB,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,aAAa,kSAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,YAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAIjG,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAN9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAChB,OAAA,EAAA,CAAC,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,gBAAgB,EAAE,aAAa,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,4wDAAA,EAAA,MAAA,EAAA,CAAA,67GAAA,CAAA,EAAA;;;AEX/G;;AAEG;;;;"}

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

@@ -115,7 +115,7 @@ class ModalComponent {
         this.isOpened = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ModalComponent, isStandalone: true, selector: "tk-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footerButtons: { classPropertyName: "footerButtons", publicName: "footerButtons", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-dialog\n  [modal]=\"true\"\n  [(visible)]=\"isOpened\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{ width: modalWidth() }\"\n  (onHide)=\"handleClose()\"\n  class=\"tk-modal\"\n>\n  <section>\n    @if (content()) {\n      <p [innerHTML]=\"content()\" class=\"tk-modal__content\"></p>\n    }\n  </section>\n\n  @if (hasFooter()) {\n    <section class=\"tk-modal__footer\">\n      @for (btn of footerButtons()!; track $index) {\n        <tk-button\n          [label]=\"btn.label\"\n          [severity]=\"btn.severity\"\n          [variant]=\"btn.variant\"\n          (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n          (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n          (keydown.space)=\"handleAction(btn.action, btn.returnValue)\"\n        />\n      }\n    </section>\n  }\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog-title{color:var(--tk-color-text-default, #212121)}:host ::ng-deep .p-dialog-close-button{color:var(--tk-surface-500, #8a8a8b)}:host ::ng-deep .p-dialog-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-surface-500, #8a8a8b)}.tk-modal__content{padding-bottom:var(--tk-spacing-paddingY-l, 1.25rem);color:var(--tk-surface-1000, #000000)}.tk-modal__footer{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon"], outputs: ["clicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ModalComponent, isStandalone: true, selector: "tk-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footerButtons: { classPropertyName: "footerButtons", publicName: "footerButtons", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-dialog\n  [modal]=\"true\"\n  [(visible)]=\"isOpened\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{ width: modalWidth() }\"\n  (onHide)=\"handleClose()\"\n  class=\"tk-modal\"\n>\n  <section>\n    @if (content()) {\n      <p [innerHTML]=\"content()\" class=\"tk-modal__content\"></p>\n    }\n  </section>\n\n  @if (hasFooter()) {\n    <section class=\"tk-modal__footer\">\n      @for (btn of footerButtons()!; track $index) {\n        <tk-button\n          [label]=\"btn.label\"\n          [severity]=\"btn.severity\"\n          [variant]=\"btn.variant\"\n          (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n          (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n          (keydown.space)=\"handleAction(btn.action, btn.returnValue)\"\n        />\n      }\n    </section>\n  }\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog-title{color:var(--tk-color-text-default, #212121)}:host ::ng-deep .p-dialog-close-button{color:var(--tk-surface-500, #8a8a8b)}:host ::ng-deep .p-dialog-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-surface-500, #8a8a8b)}.tk-modal__content{padding-bottom:var(--tk-spacing-paddingY-l, 1.25rem);color:var(--tk-surface-1000, #000000)}.tk-modal__footer{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,

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

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

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

@@ -113,11 +113,11 @@ class MultiselectComponent {
         this.selectionChange.emit(event.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MultiselectComponent, isStandalone: true, selector: "tk-multiselect", inputs: { control: "control", options: "options", labelText: "labelText", display: "display", maxSelectedLabels: "maxSelectedLabels", selectedItemsLabel: "selectedItemsLabel", emptyFilterMessage: "emptyFilterMessage", filter: "filter", filterPlaceHolder: "filterPlaceHolder", id: "id", styleClass: "styleClass" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<p-floatlabel>\n  <p-multiselect\n    optionLabel=\"name\"\n    [id]=\"id\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [display]=\"display\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [selectedItemsLabel]=\"selectedItemsLabel\"\n    [emptyFilterMessage]=\"emptyFilterMessage\"\n    [filter]=\"filter\"\n    [filterPlaceHolder]=\"filterPlaceHolder\"\n    [styleClass]=\"styleClass\"\n    (onChange)=\"handleChange($event)\">\n  </p-multiselect>\n  <label [for]=\"id\">{{ labelText }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0}:host ::ng-deep .p-multiselect:focus{border-color:var(--tk-color-accent-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)}:host ::ng-deep .p-multiselect-option span{color:var(--tk-color-accent-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-accent-muted, #b7b0d2)!important}:host ::ng-deep .p-chip-remove-icon{background-color:var(--tk-surface-700, #424243);color:var(--tk-surface-0, #ffffff)}: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}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MultiselectComponent, isStandalone: true, selector: "tk-multiselect", inputs: { control: "control", options: "options", labelText: "labelText", display: "display", maxSelectedLabels: "maxSelectedLabels", selectedItemsLabel: "selectedItemsLabel", emptyFilterMessage: "emptyFilterMessage", filter: "filter", filterPlaceHolder: "filterPlaceHolder", id: "id", styleClass: "styleClass" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<p-floatlabel>\n  <p-multiselect\n    optionLabel=\"name\"\n    [id]=\"id\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [display]=\"display\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [selectedItemsLabel]=\"selectedItemsLabel\"\n    [emptyFilterMessage]=\"emptyFilterMessage\"\n    [filter]=\"filter\"\n    [filterPlaceHolder]=\"filterPlaceHolder\"\n    [styleClass]=\"styleClass\"\n    (onChange)=\"handleChange($event)\">\n  </p-multiselect>\n  <label [for]=\"id\">{{ labelText }}</label>\n</p-floatlabel>\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-accent-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-accent-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-accent-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}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-multiselect', standalone: true, imports: [ReactiveFormsModule, MultiSelectModule, FloatLabelModule], template: "<p-floatlabel>\n  <p-multiselect\n    optionLabel=\"name\"\n    [id]=\"id\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [display]=\"display\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [selectedItemsLabel]=\"selectedItemsLabel\"\n    [emptyFilterMessage]=\"emptyFilterMessage\"\n    [filter]=\"filter\"\n    [filterPlaceHolder]=\"filterPlaceHolder\"\n    [styleClass]=\"styleClass\"\n    (onChange)=\"handleChange($event)\">\n  </p-multiselect>\n  <label [for]=\"id\">{{ labelText }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0}:host ::ng-deep .p-multiselect:focus{border-color:var(--tk-color-accent-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)}:host ::ng-deep .p-multiselect-option span{color:var(--tk-color-accent-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-accent-muted, #b7b0d2)!important}:host ::ng-deep .p-chip-remove-icon{background-color:var(--tk-surface-700, #424243);color:var(--tk-surface-0, #ffffff)}: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}\n"] }]
+            args: [{ selector: 'tk-multiselect', standalone: true, imports: [ReactiveFormsModule, MultiSelectModule, FloatLabelModule], template: "<p-floatlabel>\n  <p-multiselect\n    optionLabel=\"name\"\n    [id]=\"id\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [display]=\"display\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [selectedItemsLabel]=\"selectedItemsLabel\"\n    [emptyFilterMessage]=\"emptyFilterMessage\"\n    [filter]=\"filter\"\n    [filterPlaceHolder]=\"filterPlaceHolder\"\n    [styleClass]=\"styleClass\"\n    (onChange)=\"handleChange($event)\">\n  </p-multiselect>\n  <label [for]=\"id\">{{ labelText }}</label>\n</p-floatlabel>\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-accent-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-accent-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-accent-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}\n"] }]
         }], propDecorators: { control: [{
                 type: Input
             }], options: [{

package/fesm2022/tekus-design-system-components-multiselect.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tekus-design-system-components-multiselect.mjs","sources":["../../../projects/design-system/components/multiselect/src/multiselect.component.ts","../../../projects/design-system/components/multiselect/src/multiselect.component.html","../../../projects/design-system/components/multiselect/tekus-design-system-components-multiselect.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MultiSelectModule } from 'primeng/multiselect';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { MultiSelectOption } from './multiselect.types';\n@Component({\n selector: 'tk-multiselect',\n standalone: true,\n imports: [ReactiveFormsModule, MultiSelectModule, FloatLabelModule],\n templateUrl: './multiselect.component.html',\n styleUrls: ['./multiselect.component.scss'],\n})\nexport class MultiselectComponent {\n /*\n @property {FormControl<MultiSelectOption[] \| null>} control\n * @description\n * External FormControl used to read/set the selected options.\n * If not provided, an internal FormControl is created with an empty array value.\n /\n @Input() control = new FormControl<MultiSelectOption[] \| null>([]);\n\n /\n @property {MultiSelectOption[]} options\n * @description\n * Array of available options shown in the multiselect dropdown.\n /\n @Input() options: MultiSelectOption[] = [];\n\n /\n @property {string} labelText\n * @description\n * Label displayed above the multiselect input.\n \n @default 'Select'\n /\n @Input() labelText: string = 'Select';\n\n /\n @property {string} display\n * @description\n * Display mode for selected items. Examples: 'chip', 'comma'.\n \n @default 'chip'\n /\n @Input() display: string = 'chip';\n\n /\n @property {number} maxSelectedLabels\n * @description\n * Maximum number of labels shown when multiple items are selected.\n \n @default 4\n /\n @Input() maxSelectedLabels: number = 4;\n\n /\n @property {string} selectedItemsLabel\n * @description\n * Label template used when multiple items are selected (supports placeholders).\n \n @default '{0} elementos seleccionados'\n /\n @Input() selectedItemsLabel: string = '{0} elementos seleccionados';\n\n /\n @property {string} emptyFilterMessage\n * @description\n * Message displayed when the filter returns no results.\n \n @default 'No hay resultados'\n /\n @Input() emptyFilterMessage: string = 'No hay resultados';\n\n /\n @property {boolean} filter\n * @description\n * Enables the search/filter input inside the multiselect dropdown.\n \n @default true\n /\n @Input() filter: boolean = true;\n\n /\n @property {string} filterPlaceHolder\n * @description\n * Placeholder text for the filter input.\n /\n @Input() filterPlaceHolder: string = '';\n\n /\n @property {string} id\n * @description\n * HTML id attribute for the multiselect input.\n \n @default 'multiselect'\n /\n @Input() id: string = 'multiselect';\n\n /\n @property {string} styleClass\n * @description\n * Additional CSS class applied to the multiselect container.\n /\n @Input() styleClass: string = '';\n\n /\n @event selectionChange\n * @description\n * Emits when the selected options change.\n * Payload: an array of selected MultiSelectOption or null.\n \n @example\n * <tk-multiselect (selectionChange)=\"onChange($event)\"></tk-multiselect>\n /\n @Output() selectionChange = new EventEmitter<MultiSelectOption[] \| null>();\n\n /\n @method handleChange\n * @description\n * Handler forwarded from the PrimeNG MultiSelect change event.\n * Emits the selectionChange output with the selected values.\n \n @param event - Change event containing the `value` property with selected items.\n /\n handleChange(event: { value: MultiSelectOption[] \| null }): void {\n this.selectionChange.emit(event.value);\n }\n}\n","<p-floatlabel>\n <p-multiselect\n optionLabel=\"name\"\n [id]=\"id\"\n [options]=\"options\"\n [formControl]=\"control\"\n [display]=\"display\"\n [maxSelectedLabels]=\"maxSelectedLabels\"\n [selectedItemsLabel]=\"selectedItemsLabel\"\n [emptyFilterMessage]=\"emptyFilterMessage\"\n [filter]=\"filter\"\n [filterPlaceHolder]=\"filterPlaceHolder\"\n [styleClass]=\"styleClass\"\n (onChange)=\"handleChange($event)\">\n </p-multiselect>\n <label [for]=\"id\">{{ labelText }}</label>\n</p-floatlabel>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;MAYa,oBAAoB,CAAA;AAPjC,IAAA,WAAA,GAAA;AAQE;;;;;AAKG;AACM,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,WAAW,CAA6B,EAAE,CAAC;AAElE;;;;AAIG;QACM,IAAO,CAAA,OAAA,GAAwB,EAAE;AAE1C;;;;;;AAMG;QACM,IAAS,CAAA,SAAA,GAAW,QAAQ;AAErC;;;;;;AAMG;QACM,IAAO,CAAA,OAAA,GAAW,MAAM;AAEjC;;;;;;AAMG;QACM,IAAiB,CAAA,iBAAA,GAAW,CAAC;AAEtC;;;;;;AAMG;QACM,IAAkB,CAAA,kBAAA,GAAW,6BAA6B;AAEnE;;;;;;AAMG;QACM,IAAkB,CAAA,kBAAA,GAAW,mBAAmB;AAEzD;;;;;;AAMG;QACM,IAAM,CAAA,MAAA,GAAY,IAAI;AAE/B;;;;AAIG;QACM,IAAiB,CAAA,iBAAA,GAAW,EAAE;AAEvC;;;;;;AAMG;QACM,IAAE,CAAA,EAAA,GAAW,aAAa;AAEnC;;;;AAIG;QACM,IAAU,CAAA,UAAA,GAAW,EAAE;AAEhC;;;;;;;;AAQG;AACO,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAA8B;AAa3E;AAXC;;;;;;;AAOG;AACH,IAAA,YAAY,CAAC,KAA4C,EAAA;QACvD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;;+GAjH7B,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oBAAoB,qbCZjC,4hBAiBA,EAAA,MAAA,EAAA,CAAA,~~2iDAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDTY,mBAAmB,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAiB,q6CAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAIvD,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAPhC,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EACP,OAAA,EAAA,CAAC,mBAAmB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,4hBAAA,EAAA,MAAA,EAAA,CAAA,~~2iDAAA~~,CAAA,EAAA;8BAW1D,OAAO,EAAA,CAAA;sBAAf;gBAOQ,OAAO,EAAA,CAAA;sBAAf;gBASQ,SAAS,EAAA,CAAA;sBAAjB;gBASQ,OAAO,EAAA,CAAA;sBAAf;gBASQ,iBAAiB,EAAA,CAAA;sBAAzB;gBASQ,kBAAkB,EAAA,CAAA;sBAA1B;gBASQ,kBAAkB,EAAA,CAAA;sBAA1B;gBASQ,MAAM,EAAA,CAAA;sBAAd;gBAOQ,iBAAiB,EAAA,CAAA;sBAAzB;gBASQ,EAAE,EAAA,CAAA;sBAAV;gBAOQ,UAAU,EAAA,CAAA;sBAAlB;gBAWS,eAAe,EAAA,CAAA;sBAAxB;;;AElHH;;AAEG;;;;"}
1	+ {"version":3,"file":"tekus-design-system-components-multiselect.mjs","sources":["../../../projects/design-system/components/multiselect/src/multiselect.component.ts","../../../projects/design-system/components/multiselect/src/multiselect.component.html","../../../projects/design-system/components/multiselect/tekus-design-system-components-multiselect.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MultiSelectModule } from 'primeng/multiselect';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { MultiSelectOption } from './multiselect.types';\n@Component({\n selector: 'tk-multiselect',\n standalone: true,\n imports: [ReactiveFormsModule, MultiSelectModule, FloatLabelModule],\n templateUrl: './multiselect.component.html',\n styleUrls: ['./multiselect.component.scss'],\n})\nexport class MultiselectComponent {\n /*\n @property {FormControl<MultiSelectOption[] \| null>} control\n * @description\n * External FormControl used to read/set the selected options.\n * If not provided, an internal FormControl is created with an empty array value.\n /\n @Input() control = new FormControl<MultiSelectOption[] \| null>([]);\n\n /\n @property {MultiSelectOption[]} options\n * @description\n * Array of available options shown in the multiselect dropdown.\n /\n @Input() options: MultiSelectOption[] = [];\n\n /\n @property {string} labelText\n * @description\n * Label displayed above the multiselect input.\n \n @default 'Select'\n /\n @Input() labelText: string = 'Select';\n\n /\n @property {string} display\n * @description\n * Display mode for selected items. Examples: 'chip', 'comma'.\n \n @default 'chip'\n /\n @Input() display: string = 'chip';\n\n /\n @property {number} maxSelectedLabels\n * @description\n * Maximum number of labels shown when multiple items are selected.\n \n @default 4\n /\n @Input() maxSelectedLabels: number = 4;\n\n /\n @property {string} selectedItemsLabel\n * @description\n * Label template used when multiple items are selected (supports placeholders).\n \n @default '{0} elementos seleccionados'\n /\n @Input() selectedItemsLabel: string = '{0} elementos seleccionados';\n\n /\n @property {string} emptyFilterMessage\n * @description\n * Message displayed when the filter returns no results.\n \n @default 'No hay resultados'\n /\n @Input() emptyFilterMessage: string = 'No hay resultados';\n\n /\n @property {boolean} filter\n * @description\n * Enables the search/filter input inside the multiselect dropdown.\n \n @default true\n /\n @Input() filter: boolean = true;\n\n /\n @property {string} filterPlaceHolder\n * @description\n * Placeholder text for the filter input.\n /\n @Input() filterPlaceHolder: string = '';\n\n /\n @property {string} id\n * @description\n * HTML id attribute for the multiselect input.\n \n @default 'multiselect'\n /\n @Input() id: string = 'multiselect';\n\n /\n @property {string} styleClass\n * @description\n * Additional CSS class applied to the multiselect container.\n /\n @Input() styleClass: string = '';\n\n /\n @event selectionChange\n * @description\n * Emits when the selected options change.\n * Payload: an array of selected MultiSelectOption or null.\n \n @example\n * <tk-multiselect (selectionChange)=\"onChange($event)\"></tk-multiselect>\n /\n @Output() selectionChange = new EventEmitter<MultiSelectOption[] \| null>();\n\n /\n @method handleChange\n * @description\n * Handler forwarded from the PrimeNG MultiSelect change event.\n * Emits the selectionChange output with the selected values.\n \n @param event - Change event containing the `value` property with selected items.\n /\n handleChange(event: { value: MultiSelectOption[] \| null }): void {\n this.selectionChange.emit(event.value);\n }\n}\n","<p-floatlabel>\n <p-multiselect\n optionLabel=\"name\"\n [id]=\"id\"\n [options]=\"options\"\n [formControl]=\"control\"\n [display]=\"display\"\n [maxSelectedLabels]=\"maxSelectedLabels\"\n [selectedItemsLabel]=\"selectedItemsLabel\"\n [emptyFilterMessage]=\"emptyFilterMessage\"\n [filter]=\"filter\"\n [filterPlaceHolder]=\"filterPlaceHolder\"\n [styleClass]=\"styleClass\"\n (onChange)=\"handleChange($event)\">\n </p-multiselect>\n <label [for]=\"id\">{{ labelText }}</label>\n</p-floatlabel>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/tekus-design-system-components-select.mjs CHANGED Viewed

@@ -172,7 +172,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n  <p-select\n    [id]=\"id()\"\n    class=\"w-full\"\n    [options]=\"options()\"\n    [optionLabel]=\"optionLabel()\"\n    [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\"\n    [ngModel]=\"value\"\n    (onChange)=\"handleChange($event)\" />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-label{padding:12px 12px 12px 4px!important}:host ::ng-deep .p-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] }); }
+        ], ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n  <p-select\n    [id]=\"id()\"\n    class=\"w-full\"\n    [options]=\"options()\"\n    [optionLabel]=\"optionLabel()\"\n    [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\"\n    [ngModel]=\"value\"\n    (onChange)=\"handleChange($event)\" />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-label{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 .p-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -182,7 +182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
-                    ], template: "<p-floatlabel class=\"w-full\">\n  <p-select\n    [id]=\"id()\"\n    class=\"w-full\"\n    [options]=\"options()\"\n    [optionLabel]=\"optionLabel()\"\n    [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\"\n    [ngModel]=\"value\"\n    (onChange)=\"handleChange($event)\" />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-label{padding:12px 12px 12px 4px!important}:host ::ng-deep .p-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}\n"] }]
+                    ], template: "<p-floatlabel class=\"w-full\">\n  <p-select\n    [id]=\"id()\"\n    class=\"w-full\"\n    [options]=\"options()\"\n    [optionLabel]=\"optionLabel()\"\n    [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\"\n    [ngModel]=\"value\"\n    (onChange)=\"handleChange($event)\" />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-label{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 .p-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}\n"] }]
         }], ctorParameters: () => [] });
 /**

package/fesm2022/tekus-design-system-components-select.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tekus-design-system-components-select.mjs","sources":["../../../projects/design-system/components/select/src/select.component.ts","../../../projects/design-system/components/select/src/select.component.html","../../../projects/design-system/components/select/tekus-design-system-components-select.ts"],"sourcesContent":["import {\n Component,\n effect,\n model,\n forwardRef,\n input,\n output,\n signal,\n} from '@angular/core';\nimport {\n ControlValueAccessor,\n NG_VALUE_ACCESSOR,\n FormsModule,\n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { Select } from 'primeng/select';\n\n@Component({\n selector: 'tk-select',\n imports: [FormsModule, Select, FloatLabelModule],\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SelectComponent),\n multi: true,\n },\n ],\n})\nexport class SelectComponent<T = unknown> implements ControlValueAccessor {\n /*\n @property {string} id\n * @description\n * HTML id attribute for the multiselect input.\n \n @default 'select'\n /\n id = input<string>('select');\n /\n @property {T[]} options\n * @description\n * Array of available options displayed in the dropdown.\n /\n options = input<T[]>([]);\n\n /\n @property {string} optionLabel\n * @description\n * Name of the property used to display the text of each option.\n \n @default 'label'\n /\n optionLabel = input<string>('label');\n\n /\n @property {string} label\n * @description\n * Floating label displayed above the select input.\n /\n label = input<string>('');\n\n /\n @property {boolean} showClear\n * @description\n * Enables the clear button to remove the current selection.\n \n @default true\n /\n showClear = input<boolean>(true);\n\n /\n @property {T \| null} value\n * @description\n * Internal selected value. Synced with Angular forms and the model signal.\n \n @internal\n /\n value: T \| null = null;\n\n /\n @property {boolean} disabled\n * @description\n * Determines whether the select field is disabled.\n \n @default false\n /\n disabled = input<boolean>(false);\n internalDisabled = signal(false);\n\n /\n @property {Signal<T \| null>} model\n * @description\n * Two-way binding model using Angular signals.\n * Allows usage with the syntax: `[(model)]=\"myValue\"`.\n /\n model = model<T \| null>();\n\n /\n @event modelChange\n * @description\n * Emits whenever the value changes.\n * Payload: the selected item of type `T` or `null`.\n \n @example\n * <tk-select (modelChange)=\"onChange($event)\"></tk-select>\n /\n modelChange = output<T \| null>();\n\n // CVA callbacks\n private onChangeFn: (value: T \| null) => void = () => {};\n private onTouchedFn = () => {};\n\n constructor() {\n /\n @effect disabled → internalDisabled\n * @description\n * Synchronizes the disabled input signal with the internal disabled state.\n /\n effect(() => {\n this.internalDisabled.set(this.disabled());\n });\n\n /\n @effect model → internal value\n * @description\n * Synchronizes changes coming from the Signal `model()` back into the internal value.\n * Ensures consistency between Angular Forms, PrimeNG UI events, and Signals.\n /\n effect(() => {\n const v = this.model();\n if (v !== this.value) {\n this.value = v ?? null;\n this.onChangeFn(v ?? null);\n }\n });\n }\n\n // -----------------------------------\n // CONTROL VALUE ACCESSOR (Forms API)\n // -----------------------------------\n\n /\n @method writeValue\n * @description\n * Receives value updates from Angular Forms and writes them into the component.\n \n @param {T \| null} value - New value from the forms API.\n /\n writeValue(value: T \| null): void {\n this.model.set(value);\n }\n\n /\n @method registerOnChange\n * @description\n * Registers a callback that is invoked when the component's value changes.\n /\n registerOnChange(fn: (value: T \| null) => void): void {\n this.onChangeFn = fn;\n }\n\n /\n @method registerOnTouched\n * @description\n * Registers a callback invoked when the component is touched.\n /\n registerOnTouched(fn: () => void): void {\n this.onTouchedFn = fn;\n }\n\n /\n @method setDisabledState\n * @description\n * Updates the disabled state of the select control.\n \n @param {boolean} isDisabled - Whether the component should be disabled.\n /\n setDisabledState(isDisabled: boolean): void {\n this.internalDisabled.set(isDisabled);\n }\n\n // -----------------------------------\n // UI EVENTS\n // -----------------------------------\n\n /\n @method handleChange\n * @description\n * Handles the selection event emitted by the PrimeNG Select component.\n * Updates Angular Forms, Signals, and emits the modelChange event.\n \n @param event - Event containing the `value` of the selected option.\n /\n handleChange(event: { value: T \| null }) {\n const value = event.value ?? null;\n\n // Update internal state\n this.value = value;\n\n // 1. Update Angular Forms\n this.onChangeFn(value);\n this.onTouchedFn();\n\n // 2. Update signals\n this.model.set(value);\n\n // 3. Notify external listeners\n this.modelChange.emit(value);\n }\n}\n","<p-floatlabel class=\"w-full\">\n <p-select\n [id]=\"id()\"\n class=\"w-full\"\n [options]=\"options()\"\n [optionLabel]=\"optionLabel()\"\n [showClear]=\"showClear()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"value\"\n (onChange)=\"handleChange($event)\" />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;MA8Ba,eAAe,CAAA;AAmF1B,IAAA,WAAA,GAAA;AAlFA;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,EAAE,GAAG,KAAK,CAAS,QAAQ,CAAC;AAC5B;;;;AAIG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAM,EAAE,CAAC;AAExB;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAS,OAAO,CAAC;AAEpC;;;;AAIG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,CAAC;AAEzB;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,IAAI,CAAC;AAEhC;;;;;;AAMG;QACH,IAAK,CAAA,KAAA,GAAa,IAAI;AAEtB;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,CAAC;AAChC,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC;AAEhC;;;;;AAKG;QACH,IAAK,CAAA,KAAA,GAAG,KAAK,EAAY;AAEzB;;;;;;;;AAQG;QACH,IAAW,CAAA,WAAA,GAAG,MAAM,EAAY;;AAGxB,QAAA,IAAA,CAAA,UAAU,GAA8B,MAAK,GAAG;AAChD,QAAA,IAAA,CAAA,WAAW,GAAG,MAAK,GAAG;AAG5B;;;;AAIG;QACH,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC5C,SAAC,CAAC;AAEF;;;;;AAKG;QACH,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE;AACtB,YAAA,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE;AACpB,gBAAA,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI;AACtB,gBAAA,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,IAAI,CAAC;;AAE9B,SAAC,CAAC;;;;;AAOJ;;;;;;AAMG;AACH,IAAA,UAAU,CAAC,KAAe,EAAA;AACxB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;;AAGvB;;;;AAIG;AACH,IAAA,gBAAgB,CAAC,EAA6B,EAAA;AAC5C,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;;AAGtB;;;;AAIG;AACH,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,WAAW,GAAG,EAAE;;AAGvB;;;;;;AAMG;AACH,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,UAAU,CAAC;;;;;AAOvC;;;;;;;AAOG;AACH,IAAA,YAAY,CAAC,KAA0B,EAAA;AACrC,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,IAAI;;AAGjC,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;AAGlB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QACtB,IAAI,CAAC,WAAW,EAAE;;AAGlB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;;AAGrB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;+GAlLnB,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,EARf,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,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,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,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,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,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;AAC9C,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5BH,gWAYA,EDOY,MAAA,EAAA,CAAA,s5CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAM,gpCAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAWpC,eAAe,EAAA,UAAA,EAAA,CAAA;kBAb3B,SAAS;+BACE,WAAW,EAAA,OAAA,EACZ,CAAC,WAAW,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAGrC,SAAA,EAAA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,qBAAqB,CAAC;AAC9C,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,QAAA,EAAA,gWAAA,EAAA,MAAA,EAAA,CAAA,s5CAAA,CAAA,EAAA;;;AE5BH;;AAEG;;;;"}
1	+ {"version":3,"file":"tekus-design-system-components-select.mjs","sources":["../../../projects/design-system/components/select/src/select.component.ts","../../../projects/design-system/components/select/src/select.component.html","../../../projects/design-system/components/select/tekus-design-system-components-select.ts"],"sourcesContent":["import {\n Component,\n effect,\n model,\n forwardRef,\n input,\n output,\n signal,\n} from '@angular/core';\nimport {\n ControlValueAccessor,\n NG_VALUE_ACCESSOR,\n FormsModule,\n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { Select } from 'primeng/select';\n\n@Component({\n selector: 'tk-select',\n imports: [FormsModule, Select, FloatLabelModule],\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SelectComponent),\n multi: true,\n },\n ],\n})\nexport class SelectComponent<T = unknown> implements ControlValueAccessor {\n /*\n @property {string} id\n * @description\n * HTML id attribute for the multiselect input.\n \n @default 'select'\n /\n id = input<string>('select');\n /\n @property {T[]} options\n * @description\n * Array of available options displayed in the dropdown.\n /\n options = input<T[]>([]);\n\n /\n @property {string} optionLabel\n * @description\n * Name of the property used to display the text of each option.\n \n @default 'label'\n /\n optionLabel = input<string>('label');\n\n /\n @property {string} label\n * @description\n * Floating label displayed above the select input.\n /\n label = input<string>('');\n\n /\n @property {boolean} showClear\n * @description\n * Enables the clear button to remove the current selection.\n \n @default true\n /\n showClear = input<boolean>(true);\n\n /\n @property {T \| null} value\n * @description\n * Internal selected value. Synced with Angular forms and the model signal.\n \n @internal\n /\n value: T \| null = null;\n\n /\n @property {boolean} disabled\n * @description\n * Determines whether the select field is disabled.\n \n @default false\n /\n disabled = input<boolean>(false);\n internalDisabled = signal(false);\n\n /\n @property {Signal<T \| null>} model\n * @description\n * Two-way binding model using Angular signals.\n * Allows usage with the syntax: `[(model)]=\"myValue\"`.\n /\n model = model<T \| null>();\n\n /\n @event modelChange\n * @description\n * Emits whenever the value changes.\n * Payload: the selected item of type `T` or `null`.\n \n @example\n * <tk-select (modelChange)=\"onChange($event)\"></tk-select>\n /\n modelChange = output<T \| null>();\n\n // CVA callbacks\n private onChangeFn: (value: T \| null) => void = () => {};\n private onTouchedFn = () => {};\n\n constructor() {\n /\n @effect disabled → internalDisabled\n * @description\n * Synchronizes the disabled input signal with the internal disabled state.\n /\n effect(() => {\n this.internalDisabled.set(this.disabled());\n });\n\n /\n @effect model → internal value\n * @description\n * Synchronizes changes coming from the Signal `model()` back into the internal value.\n * Ensures consistency between Angular Forms, PrimeNG UI events, and Signals.\n /\n effect(() => {\n const v = this.model();\n if (v !== this.value) {\n this.value = v ?? null;\n this.onChangeFn(v ?? null);\n }\n });\n }\n\n // -----------------------------------\n // CONTROL VALUE ACCESSOR (Forms API)\n // -----------------------------------\n\n /\n @method writeValue\n * @description\n * Receives value updates from Angular Forms and writes them into the component.\n \n @param {T \| null} value - New value from the forms API.\n /\n writeValue(value: T \| null): void {\n this.model.set(value);\n }\n\n /\n @method registerOnChange\n * @description\n * Registers a callback that is invoked when the component's value changes.\n /\n registerOnChange(fn: (value: T \| null) => void): void {\n this.onChangeFn = fn;\n }\n\n /\n @method registerOnTouched\n * @description\n * Registers a callback invoked when the component is touched.\n /\n registerOnTouched(fn: () => void): void {\n this.onTouchedFn = fn;\n }\n\n /\n @method setDisabledState\n * @description\n * Updates the disabled state of the select control.\n \n @param {boolean} isDisabled - Whether the component should be disabled.\n /\n setDisabledState(isDisabled: boolean): void {\n this.internalDisabled.set(isDisabled);\n }\n\n // -----------------------------------\n // UI EVENTS\n // -----------------------------------\n\n /\n @method handleChange\n * @description\n * Handles the selection event emitted by the PrimeNG Select component.\n * Updates Angular Forms, Signals, and emits the modelChange event.\n \n @param event - Event containing the `value` of the selected option.\n /\n handleChange(event: { value: T \| null }) {\n const value = event.value ?? null;\n\n // Update internal state\n this.value = value;\n\n // 1. Update Angular Forms\n this.onChangeFn(value);\n this.onTouchedFn();\n\n // 2. Update signals\n this.model.set(value);\n\n // 3. Notify external listeners\n this.modelChange.emit(value);\n }\n}\n","<p-floatlabel class=\"w-full\">\n <p-select\n [id]=\"id()\"\n class=\"w-full\"\n [options]=\"options()\"\n [optionLabel]=\"optionLabel()\"\n [showClear]=\"showClear()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"value\"\n (onChange)=\"handleChange($event)\" />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}