npm - @tekus/design-system - Versions diffs - 5.33.0 → 5.34.0 - Mend

@tekus/design-system 5.33.0 → 5.34.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 (94) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tekus-design-system-components-pagination.mjs","sources":["../../../projects/design-system/components/pagination/src/pagination.component.ts","../../../projects/design-system/components/pagination/src/pagination.component.html","../../../projects/design-system/components/pagination/tekus-design-system-components-pagination.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n output,\n signal,\n effect,\n} from '@angular/core';\nimport { PaginatorModule, PaginatorState } from 'primeng/paginator';\nimport { FormsModule } from '@angular/forms';\nimport { Select } from 'primeng/select';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'tk-pagination',\n imports: [PaginatorModule, FormsModule, Select],\n templateUrl: './pagination.component.html',\n styleUrl: './pagination.component.scss',\n})\nexport class PaginationComponent {\n /*\n @property {boolean} hidden\n * @description\n * When true, hides the entire pagination component from view without affecting internal logic.\n * Useful when you need to keep the component in the DOM (e.g., for @ViewChildren queries)\n * but want to control its visibility externally.\n \n @default false\n /\n hidden = input<boolean>(false);\n\n /\n @property {number} pageIndex\n * @description\n * The index of the first record on the current page.\n * This value is used as the `[first]` input in the PrimeNG Paginator (zero-based).\n \n @default 0\n /\n pageIndex = input<number>(0);\n\n /\n @property {number} pageSize\n * @description\n * The number of items (rows) to display per page.\n \n @default 10\n /\n pageSize = input<number>(10);\n\n /\n @property {number} length\n * @description\n * The total number of records in the collection (`totalRecords`).\n \n @required\n /\n length = input.required<number>();\n\n /\n @property {number[]} pageSizeOptions\n * @description\n * Array of available options for the 'Items per page' selector.\n \n @default [5, 10, 20, 50]\n /\n pageSizeOptions = input<number[]>([5, 10, 20, 50]);\n\n /\n @property {Signal<number>} pageIndexInternal\n * @description\n * Internal, writable signal representing the current `first` index.\n * It is updated based on user interaction (page change).\n * Initialized with the value of `pageIndex()`.\n \n @internal\n /\n pageIndexInternal = signal<number>(this.pageIndex());\n\n /\n @property {Signal<number>} pageSizeInternal\n * @description\n * Internal, writable signal representing the current page size (`rows`).\n * It is updated based on user interaction (select change).\n * Initialized with the value of `pageSize()`.\n \n @internal\n /\n pageSizeInternal = signal<number>(this.pageSize());\n\n /\n @event pageChange\n * @description\n * Emits the complete pagination state (`PaginatorState`) when the user\n * changes the page or the page size.\n \n @payload {PaginatorState}\n * @example\n * <tk-pagination (pageChange)=\"loadData($event)\"></tk-pagination>\n /\n pageChange = output<PaginatorState>();\n\n constructor() {\n /\n @effect pageIndex → pageIndexInternal\n * @description\n * Synchronizes the `pageIndex` Input with the internal signal `pageIndexInternal`.\n * This allows the parent component to update the pagination state externally.\n /\n effect(() => {\n this.pageIndexInternal.set(this.pageIndex());\n });\n\n /\n @effect pageSize → pageSizeInternal\n * @description\n * Synchronizes the `pageSize` Input with the internal signal `pageSizeInternal`.\n * Allows the parent component to control the page size externally.\n /\n effect(() => {\n this.pageSizeInternal.set(this.pageSize());\n });\n }\n\n /\n @property {Signal<{label: string, value: number}[]>} options\n * @description\n * Computed signal that transforms the `pageSizeOptions` number array\n * into the `{label: string, value: number}` format required by the PrimeNG Select component.\n /\n options = computed(() =>\n this.pageSizeOptions().map(value => ({\n label: value.toString(),\n value: value,\n }))\n );\n\n // -----------------------------------\n // EVENT HANDLERS\n // -----------------------------------\n\n /\n @method onPageChange\n * @description\n * Handles the native `(onPageChange)` event emitted by the `p-paginator`.\n * Updates the internal state and notifies the parent component.\n \n @param {PaginatorState} event - The current pagination state.\n /\n onPageChange(event: PaginatorState) {\n this.pageIndexInternal.set(event.first ?? this.pageIndexInternal());\n this.pageSizeInternal.set(event.rows! ?? this.pageSizeInternal());\n this.pageChange.emit(event);\n }\n\n /\n @method onPageSizeChange\n * @description\n * Handles the `(ngModelChange)` event from the `p-select` when changing \"Items per page\".\n * Resets the `pageIndexInternal` to 0 to jump to the first page and emits the new state.\n \n @param {number} newSize - The newly selected page size.\n /\n onPageSizeChange(newSize: number) {\n this.pageSizeInternal.set(newSize);\n this.pageIndexInternal.set(0);\n\n // Emit the new state to the parent component\n this.pageChange.emit({\n first: 0,\n rows: newSize,\n page: 0,\n pageCount: Math.ceil(this.length() / newSize),\n } as PaginatorState);\n }\n}\n","<div class=\"pagination\" [class.hidden]=\"hidden()\">\n <div class=\"flex items-center\">\n <span class=\"mx-1 pagination__caption\">Items per page: </span>\n <p-select\n [options]=\"options()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [ngModel]=\"pageSizeInternal()\"\n (ngModelChange)=\"onPageSizeChange($event)\" />\n </div>\n <p-paginator\n [first]=\"pageIndexInternal()\"\n [rows]=\"pageSizeInternal()\"\n [totalRecords]=\"length()\"\n (onPageChange)=\"onPageChange($event)\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [showPageLinks]=\"false\"\n [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;MAoBa,mBAAmB,CAAA;AAmF9B,IAAA,WAAA,GAAA;AAlFA;;;;;;;;AAQG;AACH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAU,KAAK,6EAAC;AAE9B;;;;;;;AAOG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAS,CAAC,gFAAC;AAE5B;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,EAAE,+EAAC;AAE5B;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,4EAAU;AAEjC;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAW,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,sFAAC;AAElD;;;;;;;;AAQG;QACH,IAAA,CAAA,iBAAiB,GAAG,MAAM,CAAS,IAAI,CAAC,SAAS,EAAE,wFAAC;AAEpD;;;;;;;;AAQG;QACH,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAS,IAAI,CAAC,QAAQ,EAAE,uFAAC;AAElD;;;;;;;;;AASG;QACH,IAAA,CAAA,UAAU,GAAG,MAAM,EAAkB;AAwBrC;;;;;AAKG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,QAAQ,CAAC,MACjB,IAAI,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK;AACnC,YAAA,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;AACvB,YAAA,KAAK,EAAE,KAAK;SACb,CAAC,CAAC,8EACJ;AAhCC;;;;;AAKG;QACH,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;AAC9C,QAAA,CAAC,CAAC;AAEF;;;;;AAKG;QACH,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC5C,QAAA,CAAC,CAAC;IACJ;;;;AAmBA;;;;;;;AAOG;AACH,IAAA,YAAY,CAAC,KAAqB,EAAA;AAChC,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;AACnE,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,IAAK,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;AACjE,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;IAC7B;AAEA;;;;;;;AAOG;AACH,IAAA,gBAAgB,CAAC,OAAe,EAAA;AAC9B,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC;AAClC,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;;AAG7B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,YAAA,KAAK,EAAE,CAAC;AACR,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,IAAI,EAAE,CAAC;YACP,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC;AAC5B,SAAA,CAAC;IACtB~~;8GA3JW~~,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,IAAA,EAAA,mBAAmB,4wBCpBhC,iuBAoBA,EAAA,MAAA,EAAA,CAAA,6jCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDJY,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,YAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,cAAA,EAAA,eAAA,EAAA,sBAAA,EAAA,2BAAA,EAAA,uBAAA,EAAA,mBAAA,EAAA,cAAA,EAAA,MAAA,EAAA,oBAAA,EAAA,wBAAA,EAAA,qBAAA,EAAA,wBAAA,EAAA,eAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,OAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,WAAW,+VAAE,MAAM,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,cAAA,EAAA,QAAA,EAAA,YAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,aAAA,EAAA,aAAA,EAAA,mBAAA,EAAA,cAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,EAAA,cAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,SAAA,EAAA,aAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,cAAA,EAAA,MAAA,EAAA,eAAA,EAAA,uBAAA,EAAA,sBAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,mBAAA,EAAA,cAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,SAAA,EAAA,UAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,SAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FAInC~~,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS;sCACS,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,eAAe,EAAA,OAAA,EAChB,CAAC,eAAe,EAAE,WAAW,EAAE,MAAM,CAAC,EAAA,QAAA,EAAA,iuBAAA,EAAA,MAAA,EAAA,CAAA,6jCAAA,CAAA,EAAA;;;AEhBjD;;AAEG;;;;"}
1	+ {"version":3,"file":"tekus-design-system-components-pagination.mjs","sources":["../../../projects/design-system/components/pagination/src/pagination.component.ts","../../../projects/design-system/components/pagination/src/pagination.component.html","../../../projects/design-system/components/pagination/tekus-design-system-components-pagination.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n output,\n signal,\n effect,\n} from '@angular/core';\nimport { PaginatorModule, PaginatorState } from 'primeng/paginator';\nimport { FormsModule } from '@angular/forms';\nimport { Select } from 'primeng/select';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'tk-pagination',\n imports: [PaginatorModule, FormsModule, Select],\n templateUrl: './pagination.component.html',\n styleUrl: './pagination.component.scss',\n})\nexport class PaginationComponent {\n /*\n @property {boolean} hidden\n * @description\n * When true, hides the entire pagination component from view without affecting internal logic.\n * Useful when you need to keep the component in the DOM (e.g., for @ViewChildren queries)\n * but want to control its visibility externally.\n \n @default false\n /\n hidden = input<boolean>(false);\n\n /\n @property {number} pageIndex\n * @description\n * The index of the first record on the current page.\n * This value is used as the `[first]` input in the PrimeNG Paginator (zero-based).\n \n @default 0\n /\n pageIndex = input<number>(0);\n\n /\n @property {number} pageSize\n * @description\n * The number of items (rows) to display per page.\n \n @default 10\n /\n pageSize = input<number>(10);\n\n /\n @property {number} length\n * @description\n * The total number of records in the collection (`totalRecords`).\n \n @required\n /\n length = input.required<number>();\n\n /\n @property {number[]} pageSizeOptions\n * @description\n * Array of available options for the 'Items per page' selector.\n \n @default [5, 10, 20, 50]\n /\n pageSizeOptions = input<number[]>([5, 10, 20, 50]);\n\n /\n @property {Signal<number>} pageIndexInternal\n * @description\n * Internal, writable signal representing the current `first` index.\n * It is updated based on user interaction (page change).\n * Initialized with the value of `pageIndex()`.\n \n @internal\n /\n pageIndexInternal = signal<number>(this.pageIndex());\n\n /\n @property {Signal<number>} pageSizeInternal\n * @description\n * Internal, writable signal representing the current page size (`rows`).\n * It is updated based on user interaction (select change).\n * Initialized with the value of `pageSize()`.\n \n @internal\n /\n pageSizeInternal = signal<number>(this.pageSize());\n\n /\n @event pageChange\n * @description\n * Emits the complete pagination state (`PaginatorState`) when the user\n * changes the page or the page size.\n \n @payload {PaginatorState}\n * @example\n * <tk-pagination (pageChange)=\"loadData($event)\"></tk-pagination>\n /\n pageChange = output<PaginatorState>();\n\n constructor() {\n /\n @effect pageIndex → pageIndexInternal\n * @description\n * Synchronizes the `pageIndex` Input with the internal signal `pageIndexInternal`.\n * This allows the parent component to update the pagination state externally.\n /\n effect(() => {\n this.pageIndexInternal.set(this.pageIndex());\n });\n\n /\n @effect pageSize → pageSizeInternal\n * @description\n * Synchronizes the `pageSize` Input with the internal signal `pageSizeInternal`.\n * Allows the parent component to control the page size externally.\n /\n effect(() => {\n this.pageSizeInternal.set(this.pageSize());\n });\n }\n\n /\n @property {Signal<{label: string, value: number}[]>} options\n * @description\n * Computed signal that transforms the `pageSizeOptions` number array\n * into the `{label: string, value: number}` format required by the PrimeNG Select component.\n /\n options = computed(() =>\n this.pageSizeOptions().map(value => ({\n label: value.toString(),\n value: value,\n }))\n );\n\n // -----------------------------------\n // EVENT HANDLERS\n // -----------------------------------\n\n /\n @method onPageChange\n * @description\n * Handles the native `(onPageChange)` event emitted by the `p-paginator`.\n * Updates the internal state and notifies the parent component.\n \n @param {PaginatorState} event - The current pagination state.\n /\n onPageChange(event: PaginatorState) {\n this.pageIndexInternal.set(event.first ?? this.pageIndexInternal());\n this.pageSizeInternal.set(event.rows! ?? this.pageSizeInternal());\n this.pageChange.emit(event);\n }\n\n /\n @method onPageSizeChange\n * @description\n * Handles the `(ngModelChange)` event from the `p-select` when changing \"Items per page\".\n * Resets the `pageIndexInternal` to 0 to jump to the first page and emits the new state.\n \n @param {number} newSize - The newly selected page size.\n /\n onPageSizeChange(newSize: number) {\n this.pageSizeInternal.set(newSize);\n this.pageIndexInternal.set(0);\n\n // Emit the new state to the parent component\n this.pageChange.emit({\n first: 0,\n rows: newSize,\n page: 0,\n pageCount: Math.ceil(this.length() / newSize),\n } as PaginatorState);\n }\n}\n","<div class=\"pagination\" [class.hidden]=\"hidden()\">\n <div class=\"flex items-center\">\n <span class=\"mx-1 pagination__caption\">Items per page: </span>\n <p-select\n [options]=\"options()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [ngModel]=\"pageSizeInternal()\"\n (ngModelChange)=\"onPageSizeChange($event)\" />\n </div>\n <p-paginator\n [first]=\"pageIndexInternal()\"\n [rows]=\"pageSizeInternal()\"\n [totalRecords]=\"length()\"\n (onPageChange)=\"onPageChange($event)\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [showPageLinks]=\"false\"\n [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\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-panel-menu.mjs CHANGED Viewed

@@ -39,10 +39,10 @@ class PanelMenuComponent {
         }
         return current === item;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PanelMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: PanelMenuComponent, isStandalone: true, selector: "tk-panel-menu", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div [class]=\"'tk-panel-menu ' + variant() + ' ' + styleClass()\">\n  <p-panelmenu [model]=\"model()\" [multiple]=\"multiple()\">\n    <ng-template pTemplate=\"item\" #item let-item>\n      <button type=\"button\"\n              class=\"tk-pm-item-link\" \n              (click)=\"onItemClick($event, item)\" \n              (keydown.enter)=\"onItemClick($event, item)\"\n              (keydown.space)=\"onItemClick($event, item)\"\n              [class.tk-pm-item-selected]=\"isSelected(item)\">\n        <div class=\"tk-pm-item-content\">\n          @if (item.icon) {\n            <tk-icon [icon]=\"item.icon\" class=\"tk-pm-item-icon\"></tk-icon>\n          }\n          <span class=\"tk-pm-item-label\">{{ item.label }}</span>\n        </div>\n        @if (item.items) {\n          <tk-icon [icon]=\"item.expanded ? 'chevron-up' : 'chevron-down'\" class=\"tk-pm-item-chevron\"></tk-icon>\n        }\n      </button>\n    </ng-template>\n  </p-panelmenu>\n</div>\n", styles: [":host{display:block}:host ::ng-deep .tk-panel-menu{width:100%}:host ::ng-deep .tk-panel-menu .p-panelmenu{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-s, .5rem)}:host ::ng-deep .tk-panel-menu .p-panelmenu-panel,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-header,:host ::ng-deep .tk-panel-menu .p-panelmenu-header:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-header:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-header:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-header.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-content,:host ::ng-deep .tk-panel-menu .p-panelmenu-content:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-content:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-content:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-content:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-content.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-content.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-item,:host ::ng-deep .tk-panel-menu .p-panelmenu-item:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-item:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-item:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-item.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link.p-highlight{background:transparent!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}:host ::ng-deep .tk-panel-menu .p-panelmenu-panel{border:none}:host ::ng-deep .tk-panel-menu .p-panelmenu-header{border:none;background:transparent;border-radius:var(--tk-borderRadius-s, .5rem);outline:none;box-shadow:none;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:0}:host ::ng-deep .tk-panel-menu .p-panelmenu-header:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header:focus-visible{outline:none;box-shadow:none}:host ::ng-deep .tk-panel-menu .p-panelmenu-header[aria-expanded=true] .p-icon{transform:rotate(180deg)}:host ::ng-deep .tk-panel-menu .p-panelmenu-header .p-icon{transition:transform .2s ease;flex-shrink:0}:host ::ng-deep .tk-panel-menu .p-panelmenu-header .p-panelmenu-header-content,:host ::ng-deep .tk-panel-menu .p-panelmenu-header .p-panelmenu-header-label{font-size:var(--tk-font-size-paragraph-m, 1rem);line-height:normal;flex:1}:host ::ng-deep .tk-panel-menu .p-panelmenu-header .p-panelmenu-header-icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex-shrink:0}:host ::ng-deep .tk-panel-menu .p-panelmenu-content{border:none;background:transparent;padding:0}:host ::ng-deep .tk-panel-menu .p-panelmenu-root-list,:host ::ng-deep .tk-panel-menu .p-panelmenu-submenu{padding:var(--tk-spacing-padding-xs, .25rem) 0;list-style:none;display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}:host ::ng-deep .tk-panel-menu .p-panelmenu-item{outline:none}:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content{background:transparent;border-radius:var(--tk-borderRadius-s, .5rem);overflow:hidden}:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content.p-focus{background:transparent;outline:none;box-shadow:none}:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link{outline:none;border-radius:var(--tk-borderRadius-s, .5rem)}:host ::ng-deep .tk-panel-menu .tk-pm-item-link{display:flex;align-items:center;justify-content:space-between;padding:var(--tk-spacing-base-75, .75rem) 0;border-radius:var(--tk-borderRadius-s, .5rem);cursor:pointer;border:none;background:transparent;font-family:inherit;width:100%;text-align:left;transition:background-color .2s}:host ::ng-deep .tk-panel-menu .tk-pm-item-link .tk-pm-item-content{display:flex;align-items:center;gap:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-panel-menu .tk-pm-item-link .tk-pm-item-icon,:host ::ng-deep .tk-panel-menu .tk-pm-item-link .tk-pm-item-chevron{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex-shrink:0}:host ::ng-deep .tk-panel-menu .tk-pm-item-link .tk-pm-item-chevron{transition:transform .2s ease}:host ::ng-deep .tk-panel-menu .tk-pm-item-link .tk-pm-item-label{font-size:var(--tk-font-size-paragraph-m, 1rem);line-height:normal}:host ::ng-deep .tk-panel-menu .p-panelmenu-submenu .tk-pm-item-link{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-panel-menu.default .p-panelmenu-header{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .tk-panel-menu.default .p-panelmenu-header .p-icon{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link:hover,:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link:focus-visible,:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link.tk-pm-item-selected{background-color:var(--tk-color-background-soft, #f2f1f1)}:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link .tk-pm-item-icon,:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link .tk-pm-item-chevron,:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link .tk-pm-item-label{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .tk-panel-menu.inverse{background:var(--tk-color-background-inverse, #191a1b);border-radius:var(--tk-borderRadius-s, .5rem);padding:var(--tk-spacing-padding-s, .5rem)}:host ::ng-deep .tk-panel-menu.inverse .p-panelmenu-panel{background:transparent}:host ::ng-deep .tk-panel-menu.inverse .p-panelmenu-header{color:var(--tk-color-text-inverse, #ffffff)}:host ::ng-deep .tk-panel-menu.inverse .p-panelmenu-header .p-icon{color:var(--tk-color-text-inverse, #ffffff)}:host ::ng-deep .tk-panel-menu.inverse .p-panelmenu-content{background:transparent}:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link{color:var(--tk-color-text-inverse, #ffffff)}:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link:hover,:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link:focus-visible,:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link.tk-pm-item-selected{background-color:var(--tk-color-background-bold, #424243)}:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link .tk-pm-item-icon,:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link .tk-pm-item-chevron,:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link .tk-pm-item-label{color:var(--tk-color-text-inverse, #ffffff)}\n"], dependencies: [{ kind: "ngmodule", type: PanelMenuModule }, { kind: "component", type: i1.PanelMenu, selector: "p-panelMenu, p-panelmenu, p-panel-menu", inputs: ["model", "styleClass", "multiple", "transitionOptions", "motionOptions", "id", "tabindex"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PanelMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PanelMenuComponent, isStandalone: true, selector: "tk-panel-menu", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div [class]=\"'tk-panel-menu ' + variant() + ' ' + styleClass()\">\n  <p-panelmenu [model]=\"model()\" [multiple]=\"multiple()\">\n    <ng-template pTemplate=\"item\" #item let-item>\n      <button type=\"button\"\n              class=\"tk-pm-item-link\" \n              (click)=\"onItemClick($event, item)\" \n              (keydown.enter)=\"onItemClick($event, item)\"\n              (keydown.space)=\"onItemClick($event, item)\"\n              [class.tk-pm-item-selected]=\"isSelected(item)\">\n        <div class=\"tk-pm-item-content\">\n          @if (item.icon) {\n            <tk-icon [icon]=\"item.icon\" class=\"tk-pm-item-icon\"></tk-icon>\n          }\n          <span class=\"tk-pm-item-label\">{{ item.label }}</span>\n        </div>\n        @if (item.items) {\n          <tk-icon [icon]=\"item.expanded ? 'chevron-up' : 'chevron-down'\" class=\"tk-pm-item-chevron\"></tk-icon>\n        }\n      </button>\n    </ng-template>\n  </p-panelmenu>\n</div>\n", styles: [":host{display:block}:host ::ng-deep .tk-panel-menu{width:100%}:host ::ng-deep .tk-panel-menu .p-panelmenu{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-s, .5rem)}:host ::ng-deep .tk-panel-menu .p-panelmenu-panel,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-header,:host ::ng-deep .tk-panel-menu .p-panelmenu-header:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-header:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-header:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-header.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-content,:host ::ng-deep .tk-panel-menu .p-panelmenu-content:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-content:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-content:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-content:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-content.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-content.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-item,:host ::ng-deep .tk-panel-menu .p-panelmenu-item:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-item:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-item:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-item.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link.p-highlight{background:transparent!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}:host ::ng-deep .tk-panel-menu .p-panelmenu-panel{border:none}:host ::ng-deep .tk-panel-menu .p-panelmenu-header{border:none;background:transparent;border-radius:var(--tk-borderRadius-s, .5rem);outline:none;box-shadow:none;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:0}:host ::ng-deep .tk-panel-menu .p-panelmenu-header:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header:focus-visible{outline:none;box-shadow:none}:host ::ng-deep .tk-panel-menu .p-panelmenu-header[aria-expanded=true] .p-icon{transform:rotate(180deg)}:host ::ng-deep .tk-panel-menu .p-panelmenu-header .p-icon{transition:transform .2s ease;flex-shrink:0}:host ::ng-deep .tk-panel-menu .p-panelmenu-header .p-panelmenu-header-content,:host ::ng-deep .tk-panel-menu .p-panelmenu-header .p-panelmenu-header-label{font-size:var(--tk-font-size-paragraph-m, 1rem);line-height:normal;flex:1}:host ::ng-deep .tk-panel-menu .p-panelmenu-header .p-panelmenu-header-icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex-shrink:0}:host ::ng-deep .tk-panel-menu .p-panelmenu-content{border:none;background:transparent;padding:0}:host ::ng-deep .tk-panel-menu .p-panelmenu-root-list,:host ::ng-deep .tk-panel-menu .p-panelmenu-submenu{padding:var(--tk-spacing-padding-xs, .25rem) 0;list-style:none;display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}:host ::ng-deep .tk-panel-menu .p-panelmenu-item{outline:none}:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content{background:transparent;border-radius:var(--tk-borderRadius-s, .5rem);overflow:hidden}:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content.p-focus{background:transparent;outline:none;box-shadow:none}:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link{outline:none;border-radius:var(--tk-borderRadius-s, .5rem)}:host ::ng-deep .tk-panel-menu .tk-pm-item-link{display:flex;align-items:center;justify-content:space-between;padding:var(--tk-spacing-base-75, .75rem) 0;border-radius:var(--tk-borderRadius-s, .5rem);cursor:pointer;border:none;background:transparent;font-family:inherit;width:100%;text-align:left;transition:background-color .2s}:host ::ng-deep .tk-panel-menu .tk-pm-item-link .tk-pm-item-content{display:flex;align-items:center;gap:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-panel-menu .tk-pm-item-link .tk-pm-item-icon,:host ::ng-deep .tk-panel-menu .tk-pm-item-link .tk-pm-item-chevron{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex-shrink:0}:host ::ng-deep .tk-panel-menu .tk-pm-item-link .tk-pm-item-chevron{transition:transform .2s ease}:host ::ng-deep .tk-panel-menu .tk-pm-item-link .tk-pm-item-label{font-size:var(--tk-font-size-paragraph-m, 1rem);line-height:normal}:host ::ng-deep .tk-panel-menu .p-panelmenu-submenu .tk-pm-item-link{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-panel-menu.default .p-panelmenu-header{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .tk-panel-menu.default .p-panelmenu-header .p-icon{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link:hover,:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link:focus-visible,:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link.tk-pm-item-selected{background-color:var(--tk-color-background-soft, #f2f1f1)}:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link .tk-pm-item-icon,:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link .tk-pm-item-chevron,:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link .tk-pm-item-label{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .tk-panel-menu.inverse{background:var(--tk-color-background-inverse, #191a1b);border-radius:var(--tk-borderRadius-s, .5rem);padding:var(--tk-spacing-padding-s, .5rem)}:host ::ng-deep .tk-panel-menu.inverse .p-panelmenu-panel{background:transparent}:host ::ng-deep .tk-panel-menu.inverse .p-panelmenu-header{color:var(--tk-color-text-inverse, #ffffff)}:host ::ng-deep .tk-panel-menu.inverse .p-panelmenu-header .p-icon{color:var(--tk-color-text-inverse, #ffffff)}:host ::ng-deep .tk-panel-menu.inverse .p-panelmenu-content{background:transparent}:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link{color:var(--tk-color-text-inverse, #ffffff)}:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link:hover,:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link:focus-visible,:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link.tk-pm-item-selected{background-color:var(--tk-color-background-bold, #424243)}:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link .tk-pm-item-icon,:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link .tk-pm-item-chevron,:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link .tk-pm-item-label{color:var(--tk-color-text-inverse, #ffffff)}\n"], dependencies: [{ kind: "ngmodule", type: PanelMenuModule }, { kind: "component", type: i1.PanelMenu, selector: "p-panelMenu, p-panelmenu, p-panel-menu", inputs: ["model", "styleClass", "multiple", "transitionOptions", "motionOptions", "id", "tabindex"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PanelMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PanelMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tk-panel-menu', imports: [PanelMenuModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'tk-panel-menu ' + variant() + ' ' + styleClass()\">\n  <p-panelmenu [model]=\"model()\" [multiple]=\"multiple()\">\n    <ng-template pTemplate=\"item\" #item let-item>\n      <button type=\"button\"\n              class=\"tk-pm-item-link\" \n              (click)=\"onItemClick($event, item)\" \n              (keydown.enter)=\"onItemClick($event, item)\"\n              (keydown.space)=\"onItemClick($event, item)\"\n              [class.tk-pm-item-selected]=\"isSelected(item)\">\n        <div class=\"tk-pm-item-content\">\n          @if (item.icon) {\n            <tk-icon [icon]=\"item.icon\" class=\"tk-pm-item-icon\"></tk-icon>\n          }\n          <span class=\"tk-pm-item-label\">{{ item.label }}</span>\n        </div>\n        @if (item.items) {\n          <tk-icon [icon]=\"item.expanded ? 'chevron-up' : 'chevron-down'\" class=\"tk-pm-item-chevron\"></tk-icon>\n        }\n      </button>\n    </ng-template>\n  </p-panelmenu>\n</div>\n", styles: [":host{display:block}:host ::ng-deep .tk-panel-menu{width:100%}:host ::ng-deep .tk-panel-menu .p-panelmenu{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-s, .5rem)}:host ::ng-deep .tk-panel-menu .p-panelmenu-panel,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-panel.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-header,:host ::ng-deep .tk-panel-menu .p-panelmenu-header:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-header:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-header:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-header.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-content.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header-action.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-content,:host ::ng-deep .tk-panel-menu .p-panelmenu-content:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-content:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-content:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-content:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-content.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-content.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-item,:host ::ng-deep .tk-panel-menu .p-panelmenu-item:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-item:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-item:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-item.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link:focus-visible,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link.p-focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link.p-highlight{background:transparent!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}:host ::ng-deep .tk-panel-menu .p-panelmenu-panel{border:none}:host ::ng-deep .tk-panel-menu .p-panelmenu-header{border:none;background:transparent;border-radius:var(--tk-borderRadius-s, .5rem);outline:none;box-shadow:none;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:0}:host ::ng-deep .tk-panel-menu .p-panelmenu-header:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-header:focus-visible{outline:none;box-shadow:none}:host ::ng-deep .tk-panel-menu .p-panelmenu-header[aria-expanded=true] .p-icon{transform:rotate(180deg)}:host ::ng-deep .tk-panel-menu .p-panelmenu-header .p-icon{transition:transform .2s ease;flex-shrink:0}:host ::ng-deep .tk-panel-menu .p-panelmenu-header .p-panelmenu-header-content,:host ::ng-deep .tk-panel-menu .p-panelmenu-header .p-panelmenu-header-label{font-size:var(--tk-font-size-paragraph-m, 1rem);line-height:normal;flex:1}:host ::ng-deep .tk-panel-menu .p-panelmenu-header .p-panelmenu-header-icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex-shrink:0}:host ::ng-deep .tk-panel-menu .p-panelmenu-content{border:none;background:transparent;padding:0}:host ::ng-deep .tk-panel-menu .p-panelmenu-root-list,:host ::ng-deep .tk-panel-menu .p-panelmenu-submenu{padding:var(--tk-spacing-padding-xs, .25rem) 0;list-style:none;display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}:host ::ng-deep .tk-panel-menu .p-panelmenu-item{outline:none}:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content{background:transparent;border-radius:var(--tk-borderRadius-s, .5rem);overflow:hidden}:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:hover,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:focus,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content:focus-within,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content.p-highlight,:host ::ng-deep .tk-panel-menu .p-panelmenu-item-content.p-focus{background:transparent;outline:none;box-shadow:none}:host ::ng-deep .tk-panel-menu .p-panelmenu-item-link{outline:none;border-radius:var(--tk-borderRadius-s, .5rem)}:host ::ng-deep .tk-panel-menu .tk-pm-item-link{display:flex;align-items:center;justify-content:space-between;padding:var(--tk-spacing-base-75, .75rem) 0;border-radius:var(--tk-borderRadius-s, .5rem);cursor:pointer;border:none;background:transparent;font-family:inherit;width:100%;text-align:left;transition:background-color .2s}:host ::ng-deep .tk-panel-menu .tk-pm-item-link .tk-pm-item-content{display:flex;align-items:center;gap:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-panel-menu .tk-pm-item-link .tk-pm-item-icon,:host ::ng-deep .tk-panel-menu .tk-pm-item-link .tk-pm-item-chevron{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex-shrink:0}:host ::ng-deep .tk-panel-menu .tk-pm-item-link .tk-pm-item-chevron{transition:transform .2s ease}:host ::ng-deep .tk-panel-menu .tk-pm-item-link .tk-pm-item-label{font-size:var(--tk-font-size-paragraph-m, 1rem);line-height:normal}:host ::ng-deep .tk-panel-menu .p-panelmenu-submenu .tk-pm-item-link{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-panel-menu.default .p-panelmenu-header{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .tk-panel-menu.default .p-panelmenu-header .p-icon{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link:hover,:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link:focus-visible,:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link.tk-pm-item-selected{background-color:var(--tk-color-background-soft, #f2f1f1)}:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link .tk-pm-item-icon,:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link .tk-pm-item-chevron,:host ::ng-deep .tk-panel-menu.default .tk-pm-item-link .tk-pm-item-label{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .tk-panel-menu.inverse{background:var(--tk-color-background-inverse, #191a1b);border-radius:var(--tk-borderRadius-s, .5rem);padding:var(--tk-spacing-padding-s, .5rem)}:host ::ng-deep .tk-panel-menu.inverse .p-panelmenu-panel{background:transparent}:host ::ng-deep .tk-panel-menu.inverse .p-panelmenu-header{color:var(--tk-color-text-inverse, #ffffff)}:host ::ng-deep .tk-panel-menu.inverse .p-panelmenu-header .p-icon{color:var(--tk-color-text-inverse, #ffffff)}:host ::ng-deep .tk-panel-menu.inverse .p-panelmenu-content{background:transparent}:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link{color:var(--tk-color-text-inverse, #ffffff)}:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link:hover,:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link:focus-visible,:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link.tk-pm-item-selected{background-color:var(--tk-color-background-bold, #424243)}:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link .tk-pm-item-icon,:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link .tk-pm-item-chevron,:host ::ng-deep .tk-panel-menu.inverse .tk-pm-item-link .tk-pm-item-label{color:var(--tk-color-text-inverse, #ffffff)}\n"] }]
         }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tekus-design-system-components-panel-menu.mjs","sources":["../../../projects/design-system/components/panel-menu/src/panel-menu.component.ts","../../../projects/design-system/components/panel-menu/src/panel-menu.component.html","../../../projects/design-system/components/panel-menu/tekus-design-system-components-panel-menu.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output, signal } from '@angular/core';\nimport { PanelMenuModule } from 'primeng/panelmenu';\nimport { MenuItem } from 'primeng/api';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n@Component({\n selector: 'tk-panel-menu',\n imports: [PanelMenuModule, IconComponent],\n templateUrl: './panel-menu.component.html',\n styleUrl: './panel-menu.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PanelMenuComponent {\n model = input<MenuItem[]>([]);\n\n variant = input<'default' \| 'inverse'>('default');\n\n multiple = input<boolean>(false);\n\n styleClass = input<string>('');\n\n itemClick = output<{ event: Event; item: MenuItem }>();\n\n selectedItem = signal<MenuItem \| null>(null);\n\n onItemClick(event: Event, item: MenuItem) {\n if (item.disabled) {\n return;\n }\n\n if (!item.items) {\n this.selectedItem.set(item);\n\n if (item.command) {\n item.command({ originalEvent: event, item });\n }\n\n this.itemClick.emit({ event, item });\n event.stopPropagation();\n }\n }\n\n isSelected(item: MenuItem): boolean {\n if (item.items) return false;\n const current = this.selectedItem();\n if (!current) return false;\n \n // Match by ID if both have it, otherwise fallback to object reference\n if (current.id && item.id) {\n return current.id === item.id;\n }\n return current === item;\n }\n}\n","<div [class]=\"'tk-panel-menu ' + variant() + ' ' + styleClass()\">\n <p-panelmenu [model]=\"model()\" [multiple]=\"multiple()\">\n <ng-template pTemplate=\"item\" #item let-item>\n <button type=\"button\"\n class=\"tk-pm-item-link\" \n (click)=\"onItemClick($event, item)\" \n (keydown.enter)=\"onItemClick($event, item)\"\n (keydown.space)=\"onItemClick($event, item)\"\n [class.tk-pm-item-selected]=\"isSelected(item)\">\n <div class=\"tk-pm-item-content\">\n @if (item.icon) {\n <tk-icon [icon]=\"item.icon\" class=\"tk-pm-item-icon\"></tk-icon>\n }\n <span class=\"tk-pm-item-label\">{{ item.label }}</span>\n </div>\n @if (item.items) {\n <tk-icon [icon]=\"item.expanded ? 'chevron-up' : 'chevron-down'\" class=\"tk-pm-item-chevron\"></tk-icon>\n }\n </button>\n </ng-template>\n </p-panelmenu>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;MAYa,kBAAkB,CAAA;AAP/B,IAAA,WAAA,GAAA;AAQE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAa,EAAE,4EAAC;AAE7B,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAwB,SAAS,8EAAC;AAEjD,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAEhC,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,EAAE,iFAAC;QAE9B,IAAA,CAAA,SAAS,GAAG,MAAM,EAAoC;AAEtD,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAkB,IAAI,mFAAC;AA8B7C,IAAA;IA5BC,WAAW,CAAC,KAAY,EAAE,IAAc,EAAA;AACtC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB;QACF;AAEA,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;AACf,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;AAE3B,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,OAAO,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;YAC9C;YAEA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;YACpC,KAAK,CAAC,eAAe,EAAE;QACzB;IACF;AAEA,IAAA,UAAU,CAAC,IAAc,EAAA;QACvB,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,KAAK;AAC5B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,EAAE;AACnC,QAAA,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,KAAK;;QAG1B,IAAI,OAAO,CAAC,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE;AACzB,YAAA,OAAO,OAAO,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE;QAC/B;QACA,OAAO,OAAO,KAAK,IAAI;IACzB~~;8GAxCW~~,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,~~QAAA~~,EAAA,IAAA,EAAA,kBAAkB,EAAA,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,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZ/B,08BAsBA,EAAA,MAAA,EAAA,CAAA,60RAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDfY,eAAe,0UAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FAK7B~~,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;+BACE,eAAe,EAAA,OAAA,EAChB,CAAC,eAAe,EAAE,aAAa,CAAC,EAAA,eAAA,EAGxB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,08BAAA,EAAA,MAAA,EAAA,CAAA,60RAAA,CAAA,EAAA;;;AEVjD;;AAEG;;;;"}
1	+ {"version":3,"file":"tekus-design-system-components-panel-menu.mjs","sources":["../../../projects/design-system/components/panel-menu/src/panel-menu.component.ts","../../../projects/design-system/components/panel-menu/src/panel-menu.component.html","../../../projects/design-system/components/panel-menu/tekus-design-system-components-panel-menu.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output, signal } from '@angular/core';\nimport { PanelMenuModule } from 'primeng/panelmenu';\nimport { MenuItem } from 'primeng/api';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n@Component({\n selector: 'tk-panel-menu',\n imports: [PanelMenuModule, IconComponent],\n templateUrl: './panel-menu.component.html',\n styleUrl: './panel-menu.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PanelMenuComponent {\n model = input<MenuItem[]>([]);\n\n variant = input<'default' \| 'inverse'>('default');\n\n multiple = input<boolean>(false);\n\n styleClass = input<string>('');\n\n itemClick = output<{ event: Event; item: MenuItem }>();\n\n selectedItem = signal<MenuItem \| null>(null);\n\n onItemClick(event: Event, item: MenuItem) {\n if (item.disabled) {\n return;\n }\n\n if (!item.items) {\n this.selectedItem.set(item);\n\n if (item.command) {\n item.command({ originalEvent: event, item });\n }\n\n this.itemClick.emit({ event, item });\n event.stopPropagation();\n }\n }\n\n isSelected(item: MenuItem): boolean {\n if (item.items) return false;\n const current = this.selectedItem();\n if (!current) return false;\n \n // Match by ID if both have it, otherwise fallback to object reference\n if (current.id && item.id) {\n return current.id === item.id;\n }\n return current === item;\n }\n}\n","<div [class]=\"'tk-panel-menu ' + variant() + ' ' + styleClass()\">\n <p-panelmenu [model]=\"model()\" [multiple]=\"multiple()\">\n <ng-template pTemplate=\"item\" #item let-item>\n <button type=\"button\"\n class=\"tk-pm-item-link\" \n (click)=\"onItemClick($event, item)\" \n (keydown.enter)=\"onItemClick($event, item)\"\n (keydown.space)=\"onItemClick($event, item)\"\n [class.tk-pm-item-selected]=\"isSelected(item)\">\n <div class=\"tk-pm-item-content\">\n @if (item.icon) {\n <tk-icon [icon]=\"item.icon\" class=\"tk-pm-item-icon\"></tk-icon>\n }\n <span class=\"tk-pm-item-label\">{{ item.label }}</span>\n </div>\n @if (item.items) {\n <tk-icon [icon]=\"item.expanded ? 'chevron-up' : 'chevron-down'\" class=\"tk-pm-item-chevron\"></tk-icon>\n }\n </button>\n </ng-template>\n </p-panelmenu>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;MAYa,kBAAkB,CAAA;AAP/B,IAAA,WAAA,GAAA;AAQE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAa,EAAE,4EAAC;AAE7B,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAwB,SAAS,8EAAC;AAEjD,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAEhC,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,EAAE,iFAAC;QAE9B,IAAA,CAAA,SAAS,GAAG,MAAM,EAAoC;AAEtD,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAkB,IAAI,mFAAC;AA8B7C,IAAA;IA5BC,WAAW,CAAC,KAAY,EAAE,IAAc,EAAA;AACtC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB;QACF;AAEA,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;AACf,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;AAE3B,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,OAAO,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;YAC9C;YAEA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;YACpC,KAAK,CAAC,eAAe,EAAE;QACzB;IACF;AAEA,IAAA,UAAU,CAAC,IAAc,EAAA;QACvB,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,KAAK;AAC5B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,EAAE;AACnC,QAAA,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,KAAK;;QAG1B,IAAI,OAAO,CAAC,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE;AACzB,YAAA,OAAO,OAAO,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE;QAC/B;QACA,OAAO,OAAO,KAAK,IAAI;IACzB;+GAxCW,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,EAAA,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,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZ/B,08BAsBA,EAAA,MAAA,EAAA,CAAA,60RAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDfY,eAAe,0UAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAK7B,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;+BACE,eAAe,EAAA,OAAA,EAChB,CAAC,eAAe,EAAE,aAAa,CAAC,EAAA,eAAA,EAGxB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,08BAAA,EAAA,MAAA,EAAA,CAAA,60RAAA,CAAA,EAAA;;;AEVjD;;AAEG;;;;"}

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

@@ -110,10 +110,10 @@ class PanelComponent {
         const newState = event.collapsed ?? this.collapsed();
         this.toggled.emit({ collapsed: newState });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: PanelComponent, isStandalone: true, selector: "tk-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, helpIcon: { classPropertyName: "helpIcon", publicName: "helpIcon", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", toggled: "toggled" }, ngImport: i0, template: "<p-panel\n  class=\"tk-panel\"\n  [toggleable]=\"toggleable()\"\n  [(collapsed)]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-panel-header-container\">\n      @if (header()) {\n        <span class=\"p-panel-title\">{{ header() }}</span>\n      }\n\n      @if (helpText(); as text) {\n        <tk-tooltip [content]=\"text\">\n          <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n        </tk-tooltip>\n      }\n\n      @if (badge() !== undefined) {\n        <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header{background:var(--tk-color-background-soft, #f2f1f1);border:none;padding:var(--tk-spacing-paddingY-m, 1rem) var(--tk-spacing-paddingX-m, 1rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .p-panel-title{color:var(--tk-color-text-default, #000000);font-weight:var(--tk-font-weight-600, 600);margin-right:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tk-color-text-default, #000000);width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon ::ng-deep svg{width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge{display:flex;align-items:center;justify-content:center}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge ::ng-deep .p-badge{width:16px;min-width:16px;height:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:50%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-padding-s, .5rem);margin-top:var(--tk-spacing-padding-none, 0rem);border:none!important}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem);color:var(--tk-color-base-surface-500, #8a8a8b)}\n"], dependencies: [{ kind: "ngmodule", type: PanelModule }, { kind: "component", type: i1.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps", "motionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: BadgeComponent, selector: "tk-badge", inputs: ["value", "severity"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PanelComponent, isStandalone: true, selector: "tk-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, helpIcon: { classPropertyName: "helpIcon", publicName: "helpIcon", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", toggled: "toggled" }, ngImport: i0, template: "<p-panel\n  class=\"tk-panel\"\n  [toggleable]=\"toggleable()\"\n  [(collapsed)]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-panel-header-container\">\n      @if (header()) {\n        <span class=\"p-panel-title\">{{ header() }}</span>\n      }\n\n      @if (helpText(); as text) {\n        <tk-tooltip [content]=\"text\">\n          <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n        </tk-tooltip>\n      }\n\n      @if (badge() !== undefined) {\n        <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header{background:var(--tk-color-background-soft, #f2f1f1);border:none;padding:var(--tk-spacing-paddingY-m, 1rem) var(--tk-spacing-paddingX-m, 1rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .p-panel-title{color:var(--tk-color-text-default, #000000);font-weight:var(--tk-font-weight-600, 600);margin-right:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tk-color-text-default, #000000);width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon ::ng-deep svg{width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge{display:flex;align-items:center;justify-content:center}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge ::ng-deep .p-badge{width:16px;min-width:16px;height:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:50%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-padding-s, .5rem);margin-top:var(--tk-spacing-padding-none, 0rem);border:none!important}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem);color:var(--tk-color-base-surface-500, #8a8a8b)}\n"], dependencies: [{ kind: "ngmodule", type: PanelModule }, { kind: "component", type: i1.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps", "motionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: BadgeComponent, selector: "tk-badge", inputs: ["value", "severity"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tk-panel', imports: [PanelModule, IconComponent, BadgeComponent, TooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-panel\n  class=\"tk-panel\"\n  [toggleable]=\"toggleable()\"\n  [(collapsed)]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-panel-header-container\">\n      @if (header()) {\n        <span class=\"p-panel-title\">{{ header() }}</span>\n      }\n\n      @if (helpText(); as text) {\n        <tk-tooltip [content]=\"text\">\n          <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n        </tk-tooltip>\n      }\n\n      @if (badge() !== undefined) {\n        <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header{background:var(--tk-color-background-soft, #f2f1f1);border:none;padding:var(--tk-spacing-paddingY-m, 1rem) var(--tk-spacing-paddingX-m, 1rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .p-panel-title{color:var(--tk-color-text-default, #000000);font-weight:var(--tk-font-weight-600, 600);margin-right:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tk-color-text-default, #000000);width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon ::ng-deep svg{width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge{display:flex;align-items:center;justify-content:center}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge ::ng-deep .p-badge{width:16px;min-width:16px;height:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:50%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-padding-s, .5rem);margin-top:var(--tk-spacing-padding-none, 0rem);border:none!important}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem);color:var(--tk-color-base-surface-500, #8a8a8b)}\n"] }]
         }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSeverity", required: false }] }], helpIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpIcon", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tekus-design-system-components-panel.mjs","sources":["../../../projects/design-system/components/panel/src/panel.component.ts","../../../projects/design-system/components/panel/src/panel.component.html","../../../projects/design-system/components/panel/tekus-design-system-components-panel.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { PanelModule } from 'primeng/panel';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { BadgeComponent, BadgeSeverity } from '@tekus/design-system/components/badge';\nimport { TooltipComponent } from '@tekus/design-system/components/tooltip';\n\n/*\n @component PanelComponent\n * @description\n * Panel is a container component with an optional content toggle feature.\n * It wraps PrimeNG's Panel component and provides a consistent design across the application.\n \n The panel can be toggled between expanded and collapsed states using the chevron icon\n * in the header. The component uses custom tk-icon for the toggle icons.\n \n @usage\n * ```html\n * <tk-panel\n * header=\"Panel Title\"\n * [toggleable]=\"true\"\n * [(collapsed)]=\"isCollapsed\">\n * <p>Panel content goes here</p>\n * </tk-panel>\n * ```\n /\n@Component({\n selector: 'tk-panel',\n imports: [PanelModule, IconComponent, BadgeComponent, TooltipComponent],\n templateUrl: './panel.component.html',\n styleUrl: './panel.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PanelComponent {\n /\n @property {string} header\n * @description\n * Header text displayed at the top of the panel.\n \n @default undefined\n /\n header = input<string>();\n\n /\n @property {string \| number} badge\n * @description\n * Optional badge value to display in the header.\n \n @default undefined\n /\n badge = input<string \| number>();\n\n /\n @property {BadgeSeverity} badgeSeverity\n * @description\n * Severity of the badge.\n \n @default 'danger'\n /\n badgeSeverity = input<BadgeSeverity>('danger');\n\n /\n @property {string} helpIcon\n * @description\n * The name of the icon to display for information/help.\n \n @default 'circle-question'\n /\n helpIcon = input<string>('circle-question');\n\n /\n @property {string} helpText\n * @description\n * Optional help text to display as a tooltip on a help icon in the header.\n \n @default undefined\n /\n helpText = input<string>();\n\n /\n @property {boolean} toggleable\n * @description\n * When enabled, the panel content can be expanded and collapsed.\n \n @default false\n /\n toggleable = input<boolean>(false);\n\n /\n @property {ModelSignal<boolean>} collapsed\n * @description\n * Defines whether the panel is collapsed or expanded.\n * Supports two-way binding via [(collapsed)].\n \n @default false\n /\n collapsed = model<boolean>(false);\n\n /\n @event toggled\n * @description\n * Callback to invoke when the panel is toggled.\n * Emits an object with the collapsed state.\n \n @example\n * ```html\n * <tk-panel (toggled)=\"handleToggle($event)\"></tk-panel>\n * ```\n /\n toggled = output<{ collapsed: boolean }>();\n\n /\n @method handleToggle\n * @description\n * Handles the toggle event from the PrimeNG panel.\n * Updates the collapsed state and emits the appropriate events.\n \n @param event - The toggle event from PrimeNG panel\n /\n handleToggle(event: { collapsed?: boolean }): void {\n const newState = event.collapsed ?? this.collapsed();\n this.toggled.emit({ collapsed: newState });\n }\n}\n","<p-panel\n class=\"tk-panel\"\n [toggleable]=\"toggleable()\"\n [(collapsed)]=\"collapsed\"\n (onAfterToggle)=\"handleToggle($event)\">\n\n <ng-template pTemplate=\"header\">\n <div class=\"tk-panel-header-container\">\n @if (header()) {\n <span class=\"p-panel-title\">{{ header() }}</span>\n }\n\n @if (helpText(); as text) {\n <tk-tooltip [content]=\"text\">\n <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n </tk-tooltip>\n }\n\n @if (badge() !== undefined) {\n <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n }\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"headericons\">\n @if (toggleable()) {\n <div class=\"tk-panel-toggle-icon\">\n @if (collapsed()) {\n <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n } @else {\n <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n }\n </div>\n }\n </ng-template>\n\n <ng-content></ng-content>\n</p-panel>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;AAkBG;MAQU,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;AAQE;;;;;;AAMG;QACH,IAAA,CAAA,MAAM,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAExB;;;;;;AAMG;QACH,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAmB;AAEhC;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAgB,QAAQ,oFAAC;AAE9C;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,iBAAiB,+EAAC;AAE3C;;;;;;AAMG;QACH,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAE1B;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAU,KAAK,iFAAC;AAElC;;;;;;;AAOG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,KAAK,gFAAC;AAEjC;;;;;;;;;;AAUG;QACH,IAAA,CAAA,OAAO,GAAG,MAAM,EAA0B;AAc3C,IAAA;AAZC;;;;;;;AAOG;AACH,IAAA,YAAY,CAAC,KAA8B,EAAA;QACzC,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EAAE;QACpD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;IAC5C~~;8GAzFW~~,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;~~kGAAd~~,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,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,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,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,SAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChC3B,ojCAsCA,EAAA,MAAA,EAAA,CAAA,mvEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDXY,WAAW,qaAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,cAAc,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FAK3D~~,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAAA,OAAA,EACX,CAAC,WAAW,EAAE,aAAa,EAAE,cAAc,EAAE,gBAAgB,CAAC,EAAA,eAAA,EAGtD,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ojCAAA,EAAA,MAAA,EAAA,CAAA,mvEAAA,CAAA,EAAA;;;AE9BjD;;AAEG;;;;"}
1	+ {"version":3,"file":"tekus-design-system-components-panel.mjs","sources":["../../../projects/design-system/components/panel/src/panel.component.ts","../../../projects/design-system/components/panel/src/panel.component.html","../../../projects/design-system/components/panel/tekus-design-system-components-panel.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { PanelModule } from 'primeng/panel';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { BadgeComponent, BadgeSeverity } from '@tekus/design-system/components/badge';\nimport { TooltipComponent } from '@tekus/design-system/components/tooltip';\n\n/*\n @component PanelComponent\n * @description\n * Panel is a container component with an optional content toggle feature.\n * It wraps PrimeNG's Panel component and provides a consistent design across the application.\n \n The panel can be toggled between expanded and collapsed states using the chevron icon\n * in the header. The component uses custom tk-icon for the toggle icons.\n \n @usage\n * ```html\n * <tk-panel\n * header=\"Panel Title\"\n * [toggleable]=\"true\"\n * [(collapsed)]=\"isCollapsed\">\n * <p>Panel content goes here</p>\n * </tk-panel>\n * ```\n /\n@Component({\n selector: 'tk-panel',\n imports: [PanelModule, IconComponent, BadgeComponent, TooltipComponent],\n templateUrl: './panel.component.html',\n styleUrl: './panel.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PanelComponent {\n /\n @property {string} header\n * @description\n * Header text displayed at the top of the panel.\n \n @default undefined\n /\n header = input<string>();\n\n /\n @property {string \| number} badge\n * @description\n * Optional badge value to display in the header.\n \n @default undefined\n /\n badge = input<string \| number>();\n\n /\n @property {BadgeSeverity} badgeSeverity\n * @description\n * Severity of the badge.\n \n @default 'danger'\n /\n badgeSeverity = input<BadgeSeverity>('danger');\n\n /\n @property {string} helpIcon\n * @description\n * The name of the icon to display for information/help.\n \n @default 'circle-question'\n /\n helpIcon = input<string>('circle-question');\n\n /\n @property {string} helpText\n * @description\n * Optional help text to display as a tooltip on a help icon in the header.\n \n @default undefined\n /\n helpText = input<string>();\n\n /\n @property {boolean} toggleable\n * @description\n * When enabled, the panel content can be expanded and collapsed.\n \n @default false\n /\n toggleable = input<boolean>(false);\n\n /\n @property {ModelSignal<boolean>} collapsed\n * @description\n * Defines whether the panel is collapsed or expanded.\n * Supports two-way binding via [(collapsed)].\n \n @default false\n /\n collapsed = model<boolean>(false);\n\n /\n @event toggled\n * @description\n * Callback to invoke when the panel is toggled.\n * Emits an object with the collapsed state.\n \n @example\n * ```html\n * <tk-panel (toggled)=\"handleToggle($event)\"></tk-panel>\n * ```\n /\n toggled = output<{ collapsed: boolean }>();\n\n /\n @method handleToggle\n * @description\n * Handles the toggle event from the PrimeNG panel.\n * Updates the collapsed state and emits the appropriate events.\n \n @param event - The toggle event from PrimeNG panel\n /\n handleToggle(event: { collapsed?: boolean }): void {\n const newState = event.collapsed ?? this.collapsed();\n this.toggled.emit({ collapsed: newState });\n }\n}\n","<p-panel\n class=\"tk-panel\"\n [toggleable]=\"toggleable()\"\n [(collapsed)]=\"collapsed\"\n (onAfterToggle)=\"handleToggle($event)\">\n\n <ng-template pTemplate=\"header\">\n <div class=\"tk-panel-header-container\">\n @if (header()) {\n <span class=\"p-panel-title\">{{ header() }}</span>\n }\n\n @if (helpText(); as text) {\n <tk-tooltip [content]=\"text\">\n <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n </tk-tooltip>\n }\n\n @if (badge() !== undefined) {\n <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n }\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"headericons\">\n @if (toggleable()) {\n <div class=\"tk-panel-toggle-icon\">\n @if (collapsed()) {\n <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n } @else {\n <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n }\n </div>\n }\n </ng-template>\n\n <ng-content></ng-content>\n</p-panel>\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-progress-bar.mjs CHANGED Viewed

@@ -39,10 +39,10 @@ class ProgressBarComponent {
          */
         this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ProgressBarComponent, isStandalone: true, selector: "tk-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n\n<div class=\"tk-progress-bar-container\" [class]=\"'tk-progress-bar-size-' + size()\">\n  @if (size() !== 'small' && showValue()) {\n    <span class=\"tk-progress-bar-value-text\">{{ value() }}%</span>\n  }\n\n  <p-progressbar\n    [value]=\"value()\"\n    [showValue]=\"false\"\n  >\n  </p-progressbar>\n</div>\n", styles: [":host{display:block;width:100%}.tk-progress-bar-container{display:flex;align-items:center;gap:var(--tk-spacing-base-50)}.tk-progress-bar-container p-progressbar{flex:1}.tk-progress-bar-container .tk-progress-bar-value-text{font-family:var(--tk-font-family);font-size:var(--tk-font-size-paragraph-s);font-weight:var(--tk-font-weight-600);color:var(--tk-color-text-default);min-width:2.8125rem;text-align:right}.tk-progress-bar-container ::ng-deep .p-progressbar{background:var(--tk-color-base-primary-100);border-radius:var(--tk-borderRadius-full);border:none;overflow:hidden}.tk-progress-bar-container ::ng-deep .p-progressbar .p-progressbar-value{border-radius:var(--tk-borderRadius-full);transition:width .5s ease;background:var(--tk-color-base-primary-500)}.tk-progress-bar-container.tk-progress-bar-size-small ::ng-deep .p-progressbar{height:var(--tk-spacing-base-50)}.tk-progress-bar-container.tk-progress-bar-size-medium ::ng-deep .p-progressbar{height:1.125rem}.tk-progress-bar-container.tk-progress-bar-size-large ::ng-deep .p-progressbar{height:var(--tk-size-base-200);border-radius:var(--tk-borderRadius-s)}.tk-progress-bar-container.tk-progress-bar-size-large ::ng-deep .p-progressbar .p-progressbar-value{border-radius:var(--tk-borderRadius-s)}\n"], dependencies: [{ kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ProgressBarComponent, isStandalone: true, selector: "tk-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n\n<div class=\"tk-progress-bar-container\" [class]=\"'tk-progress-bar-size-' + size()\">\n  @if (size() !== 'small' && showValue()) {\n    <span class=\"tk-progress-bar-value-text\">{{ value() }}%</span>\n  }\n\n  <p-progressbar\n    [value]=\"value()\"\n    [showValue]=\"false\"\n  >\n  </p-progressbar>\n</div>\n", styles: [":host{display:block;width:100%}.tk-progress-bar-container{display:flex;align-items:center;gap:var(--tk-spacing-base-50)}.tk-progress-bar-container p-progressbar{flex:1}.tk-progress-bar-container .tk-progress-bar-value-text{font-family:var(--tk-font-family);font-size:var(--tk-font-size-paragraph-s);font-weight:var(--tk-font-weight-600);color:var(--tk-color-text-default);min-width:2.8125rem;text-align:right}.tk-progress-bar-container ::ng-deep .p-progressbar{background:var(--tk-color-base-primary-100);border-radius:var(--tk-borderRadius-full);border:none;overflow:hidden}.tk-progress-bar-container ::ng-deep .p-progressbar .p-progressbar-value{border-radius:var(--tk-borderRadius-full);transition:width .5s ease;background:var(--tk-color-base-primary-500)}.tk-progress-bar-container.tk-progress-bar-size-small ::ng-deep .p-progressbar{height:var(--tk-spacing-base-50)}.tk-progress-bar-container.tk-progress-bar-size-medium ::ng-deep .p-progressbar{height:1.125rem}.tk-progress-bar-container.tk-progress-bar-size-large ::ng-deep .p-progressbar{height:var(--tk-size-base-200);border-radius:var(--tk-borderRadius-s)}.tk-progress-bar-container.tk-progress-bar-size-large ::ng-deep .p-progressbar .p-progressbar-value{border-radius:var(--tk-borderRadius-s)}\n"], dependencies: [{ kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tk-progress-bar', standalone: true, imports: [ProgressBarModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<div class=\"tk-progress-bar-container\" [class]=\"'tk-progress-bar-size-' + size()\">\n  @if (size() !== 'small' && showValue()) {\n    <span class=\"tk-progress-bar-value-text\">{{ value() }}%</span>\n  }\n\n  <p-progressbar\n    [value]=\"value()\"\n    [showValue]=\"false\"\n  >\n  </p-progressbar>\n</div>\n", styles: [":host{display:block;width:100%}.tk-progress-bar-container{display:flex;align-items:center;gap:var(--tk-spacing-base-50)}.tk-progress-bar-container p-progressbar{flex:1}.tk-progress-bar-container .tk-progress-bar-value-text{font-family:var(--tk-font-family);font-size:var(--tk-font-size-paragraph-s);font-weight:var(--tk-font-weight-600);color:var(--tk-color-text-default);min-width:2.8125rem;text-align:right}.tk-progress-bar-container ::ng-deep .p-progressbar{background:var(--tk-color-base-primary-100);border-radius:var(--tk-borderRadius-full);border:none;overflow:hidden}.tk-progress-bar-container ::ng-deep .p-progressbar .p-progressbar-value{border-radius:var(--tk-borderRadius-full);transition:width .5s ease;background:var(--tk-color-base-primary-500)}.tk-progress-bar-container.tk-progress-bar-size-small ::ng-deep .p-progressbar{height:var(--tk-spacing-base-50)}.tk-progress-bar-container.tk-progress-bar-size-medium ::ng-deep .p-progressbar{height:1.125rem}.tk-progress-bar-container.tk-progress-bar-size-large ::ng-deep .p-progressbar{height:var(--tk-size-base-200);border-radius:var(--tk-borderRadius-s)}.tk-progress-bar-container.tk-progress-bar-size-large ::ng-deep .p-progressbar .p-progressbar-value{border-radius:var(--tk-borderRadius-s)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tekus-design-system-components-progress-bar.mjs","sources":["../../../projects/design-system/components/progress-bar/src/progress-bar.component.ts","../../../projects/design-system/components/progress-bar/src/progress-bar.component.html","../../../projects/design-system/components/progress-bar/tekus-design-system-components-progress-bar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { ProgressBarModule } from 'primeng/progressbar';\n\n\n\nexport type ProgressBarSize = 'small' \| 'medium' \| 'large';\n\n/*\n @component ProgressBarComponent\n * @description\n * A component used to display the progress of a task.\n * It wraps PrimeNG's `p-progressbar` component with custom styling and behavior.\n \n This component supports:\n * - `value`: The progress value (0-100)\n * - `showValue`: Whether to display the value text (only for medium/large)\n * - `size`: The size of the progress bar ('small', 'medium', 'large')\n \n @usage\n * ### Basic Usage\n * ```html\n * <tk-progress-bar [value]=\"50\" size=\"medium\"></tk-progress-bar>\n * ```\n /\n@Component({\n selector: 'tk-progress-bar',\n standalone: true,\n imports: [ProgressBarModule],\n templateUrl: './progress-bar.component.html',\n styleUrl: './progress-bar.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressBarComponent {\n /* The progress value (0-100). /\n value = input<number>(0);\n\n /\n Whether to display the progress value percentage.\n * Only applicable for 'medium' or 'large' sizes.\n * @default true\n /\n showValue = input<boolean>(true);\n\n\n\n /\n The size of the progress bar.\n * - 'small': Thin bar, no percentage text.\n * - 'medium': Regular bar, percentage text on left.\n * - 'large': Thick bar, percentage text on left.\n * @default 'medium'\n /\n size = input<ProgressBarSize>('medium');\n\n\n}\n","\n\n<div class=\"tk-progress-bar-container\" [class]=\"'tk-progress-bar-size-' + size()\">\n @if (size() !== 'small' && showValue()) {\n <span class=\"tk-progress-bar-value-text\">{{ value() }}%</span>\n }\n\n <p-progressbar\n [value]=\"value()\"\n [showValue]=\"false\"\n >\n </p-progressbar>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;AAgBG;MASU,oBAAoB,CAAA;AARjC,IAAA,WAAA,GAAA;;AAUE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,CAAC,4EAAC;AAExB;;;;AAIG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,IAAI,gFAAC;AAIhC;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAkB,QAAQ,2EAAC;AAGxC,IAAA~~;8GAvBY~~,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;~~kGAApB~~,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,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,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,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,QAAA,EAAA,EAAA,EAAA,QAAA,EChCjC,+TAaA,EAAA,MAAA,EAAA,CAAA,4uCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDcY,iBAAiB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,8CAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,WAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FAKhB~~,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBARhC,SAAS;+BACE,iBAAiB,EAAA,UAAA,EACf,IAAI,EAAA,OAAA,EACP,CAAC,iBAAiB,CAAC,EAAA,eAAA,EAGX,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+TAAA,EAAA,MAAA,EAAA,CAAA,4uCAAA,CAAA,EAAA;;;AE9BjD;;AAEG;;;;"}
1	+ {"version":3,"file":"tekus-design-system-components-progress-bar.mjs","sources":["../../../projects/design-system/components/progress-bar/src/progress-bar.component.ts","../../../projects/design-system/components/progress-bar/src/progress-bar.component.html","../../../projects/design-system/components/progress-bar/tekus-design-system-components-progress-bar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { ProgressBarModule } from 'primeng/progressbar';\n\n\n\nexport type ProgressBarSize = 'small' \| 'medium' \| 'large';\n\n/*\n @component ProgressBarComponent\n * @description\n * A component used to display the progress of a task.\n * It wraps PrimeNG's `p-progressbar` component with custom styling and behavior.\n \n This component supports:\n * - `value`: The progress value (0-100)\n * - `showValue`: Whether to display the value text (only for medium/large)\n * - `size`: The size of the progress bar ('small', 'medium', 'large')\n \n @usage\n * ### Basic Usage\n * ```html\n * <tk-progress-bar [value]=\"50\" size=\"medium\"></tk-progress-bar>\n * ```\n /\n@Component({\n selector: 'tk-progress-bar',\n standalone: true,\n imports: [ProgressBarModule],\n templateUrl: './progress-bar.component.html',\n styleUrl: './progress-bar.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressBarComponent {\n /* The progress value (0-100). /\n value = input<number>(0);\n\n /\n Whether to display the progress value percentage.\n * Only applicable for 'medium' or 'large' sizes.\n * @default true\n /\n showValue = input<boolean>(true);\n\n\n\n /\n The size of the progress bar.\n * - 'small': Thin bar, no percentage text.\n * - 'medium': Regular bar, percentage text on left.\n * - 'large': Thick bar, percentage text on left.\n * @default 'medium'\n /\n size = input<ProgressBarSize>('medium');\n\n\n}\n","\n\n<div class=\"tk-progress-bar-container\" [class]=\"'tk-progress-bar-size-' + size()\">\n @if (size() !== 'small' && showValue()) {\n <span class=\"tk-progress-bar-value-text\">{{ value() }}%</span>\n }\n\n <p-progressbar\n [value]=\"value()\"\n [showValue]=\"false\"\n >\n </p-progressbar>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;AAgBG;MASU,oBAAoB,CAAA;AARjC,IAAA,WAAA,GAAA;;AAUE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,CAAC,4EAAC;AAExB;;;;AAIG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,IAAI,gFAAC;AAIhC;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAkB,QAAQ,2EAAC;AAGxC,IAAA;+GAvBY,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,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,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,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,QAAA,EAAA,EAAA,EAAA,QAAA,EChCjC,+TAaA,EAAA,MAAA,EAAA,CAAA,4uCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDcY,iBAAiB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,8CAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,WAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAKhB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBARhC,SAAS;+BACE,iBAAiB,EAAA,UAAA,EACf,IAAI,EAAA,OAAA,EACP,CAAC,iBAAiB,CAAC,EAAA,eAAA,EAGX,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+TAAA,EAAA,MAAA,EAAA,CAAA,4uCAAA,CAAA,EAAA;;;AE9BjD;;AAEG;;;;"}

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

@@ -149,10 +149,10 @@ class RadioButtonComponent {
         this.onTouched();
         this.effectiveControl.markAsTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: RadioButtonComponent, isStandalone: true, selector: "tk-radio-button", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", disabled: "disabledChange" }, ngImport: i0, template: "<div class=\"tk-radio-button-wrapper\">\n  <div class=\"tk-radio-button-group\" [class.tk-disabled]=\"disabled()\">\n    <p-radioButton\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\">\n    </p-radioButton>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-radio-button-label\">\n        {{ label() }}\n      </label>\n    }\n  </div>\n\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .tk-radio-button-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-radio-button-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-radio-button-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-radio-button-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-radio-button-label{margin-top:var(--tk-spacing-base-25, .25rem)}: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 .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 .p-radiobutton.p-disabled .p-radiobutton-box{border-color:var(--tk-color-base-surface-300, #d2d2d2);background-color:var(--tk-color-base-surface-100, #fcfcfc)}:host ::ng-deep .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon{background-color:var(--tk-color-base-surface-300, #d2d2d2)}:host ::ng-deep p-radiobutton.ng-invalid.ng-touched .p-radiobutton-box,:host ::ng-deep p-radiobutton.ng-invalid.ng-dirty .p-radiobutton-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i2.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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", "motionOptions"], outputs: ["onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: RadioButtonComponent, isStandalone: true, selector: "tk-radio-button", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", disabled: "disabledChange" }, ngImport: i0, template: "<div class=\"tk-radio-button-wrapper\">\n  <div class=\"tk-radio-button-group\" [class.tk-disabled]=\"disabled()\">\n    <p-radioButton\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\">\n    </p-radioButton>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-radio-button-label\">\n        {{ label() }}\n      </label>\n    }\n  </div>\n\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .tk-radio-button-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-radio-button-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-radio-button-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-radio-button-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-radio-button-label{margin-top:var(--tk-spacing-base-25, .25rem)}: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 .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 .p-radiobutton.p-disabled .p-radiobutton-box{border-color:var(--tk-color-base-surface-300, #d2d2d2);background-color:var(--tk-color-base-surface-100, #fcfcfc)}:host ::ng-deep .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon{background-color:var(--tk-color-base-surface-300, #d2d2d2)}:host ::ng-deep p-radiobutton.ng-invalid.ng-touched .p-radiobutton-box,:host ::ng-deep p-radiobutton.ng-invalid.ng-dirty .p-radiobutton-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i2.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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", "motionOptions"], outputs: ["onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: RadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tk-radio-button', imports: [
                         ReactiveFormsModule,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tekus-design-system-components-radio-button.mjs","sources":["../../../projects/design-system/components/radio-button/src/radio-button.component.ts","../../../projects/design-system/components/radio-button/src/radio-button.component.html","../../../projects/design-system/components/radio-button/tekus-design-system-components-radio-button.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n input,\n model,\n OnInit,\n inject,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n ControlValueAccessor,\n FormControl,\n ReactiveFormsModule,\n NgControl,\n FormsModule,\n} from '@angular/forms';\nimport { RadioButtonModule } from 'primeng/radiobutton';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n selector: 'tk-radio-button',\n imports: [\n ReactiveFormsModule,\n FormsModule,\n RadioButtonModule,\n MessageModule,\n ],\n templateUrl: './radio-button.component.html',\n styleUrl: './radio-button.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RadioButtonComponent\n implements ControlValueAccessor, OnInit\n{\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n private readonly destroyRef = inject(DestroyRef);\n\n /*\n Initialize the component and register it as a ControlValueAccessor.\n /\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n /\n @property {ModelSignal<any>} model\n * @description\n * The value of the radio button model (checked state).\n * Supports two-way binding via signals.\n /\n model = model<unknown>();\n\n /\n @property {InputSignal<any>} value\n * @description\n * The value of the radio button itself (used when part of a group).\n /\n value = input<unknown>();\n\n /\n @property {InputSignal<string>} label\n * @description\n * Label displayed next to the radio button.\n /\n label = input<string>('');\n\n /\n @property {InputSignal<string>} name\n * @description\n * Name attribute for the radio button.\n /\n name = input<string>('');\n\n /\n @property {InputSignal<string>} inputId\n * @description\n * HTML id attribute for the radio button input.\n /\n inputId = input<string>('');\n\n /\n @property {InputSignal<FormControl>} control\n * @description\n * External FormControl used to read/set the radio button value.\n * If not provided, an internal FormControl is created.\n /\n control = input<FormControl>(new FormControl());\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 {ModelSignal<boolean>} disabled\n * @description\n * Whether the radio button is disabled.\n /\n disabled = model<boolean>(false);\n\n /\n Returns the control currently in use, either from NgControl or the standalone Input.\n /\n get effectiveControl(): FormControl {\n return (this.ngControl?.control as FormControl) \|\| this.control();\n }\n\n onChange: (value: unknown) => void = () => {};\n onTouched: () => void = () => {};\n\n /\n Configure synchronization between the form control and component state.\n /\n ngOnInit(): void {\n const control = this.effectiveControl;\n\n if (control.value !== undefined && control.value !== null) {\n this.model.set(control.value);\n }\n\n if (this.control() === control && this.disabled()) {\n control.disable({ emitEvent: false });\n } else {\n this.disabled.set(control.disabled);\n }\n\n control.statusChanges\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n this.disabled.set(control.disabled);\n });\n\n control.valueChanges\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(value => {\n this.model.set(value);\n });\n }\n\n /\n Implementation of ControlValueAccessor: Writes a new value from the form.\n /\n writeValue(value: unknown): void {\n this.model.set(value);\n }\n\n /\n Implementation of ControlValueAccessor: Registers a callback for change events.\n /\n registerOnChange(fn: (value: unknown) => void): void {\n this.onChange = fn;\n }\n\n /\n Implementation of ControlValueAccessor: Registers a callback for touched events.\n /\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /\n Implementation of ControlValueAccessor: Sets the disabled state.\n /\n setDisabledState?(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n if (isDisabled) {\n this.control().disable();\n } else {\n this.control().enable();\n }\n }\n\n /\n Handle model change events from the template.\n /\n onModelChange(value: unknown): void {\n this.model.set(value);\n this.onChange(value);\n this.effectiveControl.setValue(value);\n this.effectiveControl.markAsDirty();\n this.onTouched();\n }\n\n /\n Handle blur events to trigger onTouched.\n /\n onBlur(): void {\n this.onTouched();\n this.effectiveControl.markAsTouched();\n }\n}\n","<div class=\"tk-radio-button-wrapper\">\n <div class=\"tk-radio-button-group\" [class.tk-disabled]=\"disabled()\">\n <p-radioButton\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n [class.ng-invalid]=\"effectiveControl.invalid\"\n [class.ng-dirty]=\"effectiveControl.dirty\"\n [class.ng-touched]=\"effectiveControl.touched\">\n </p-radioButton>\n @if (label()) {\n <label [for]=\"inputId()\" class=\"tk-radio-button-label\">\n {{ label() }}\n </label>\n }\n </div>\n\n @if (\n effectiveControl.invalid &&\n (effectiveControl.dirty \|\| effectiveControl.touched) &&\n errorMessage()\n ) {\n <div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n errorMessage()\n }}</p-message>\n </div>\n </div>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;MAgCa,oBAAoB,CAAA;AAM/B;;AAEG;AACH,IAAA,WAAA,GAAA;AANS,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACrD,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAWhD;;;;;AAKG;QACH,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAW;AAExB;;;;AAIG;QACH,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAW;AAExB;;;;AAIG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AAEzB;;;;AAIG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE,2EAAC;AAExB;;;;AAIG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAS,EAAE,8EAAC;AAE3B;;;;;AAKG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAc,IAAI,WAAW,EAAE,8EAAC;AAE/C;;;;AAIG;AACH,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAS,EAAE,mFAAC;AAEhC;;;;AAIG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAShC,QAAA,IAAA,CAAA,QAAQ,GAA6B,MAAK,EAAE,CAAC;AAC7C,QAAA,IAAA,CAAA,SAAS,GAAe,MAAK,EAAE,CAAC;AAvE9B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI;QACrC;IACF;AA4DA;;AAEG;AACH,IAAA,IAAI,gBAAgB,GAAA;QAClB,OAAQ,IAAI,CAAC,SAAS,EAAE,OAAuB,IAAI,IAAI,CAAC,OAAO,EAAE;IACnE;AAKA;;AAEG;IACH,QAAQ,GAAA;AACN,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB;AAErC,QAAA,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS,IAAI,OAAO,CAAC,KAAK,KAAK,IAAI,EAAE;YACzD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC;QAC/B;AAEA,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,KAAK,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACjD,OAAO,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;QACvC;aAAO;YACL,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC;QACrC;AAEA,QAAA,OAAO,CAAC;AACL,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;aACxC,SAAS,CAAC,MAAK;YACd,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC;AACrC,QAAA,CAAC,CAAC;AAEJ,QAAA,OAAO,CAAC;AACL,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;aACxC,SAAS,CAAC,KAAK,IAAG;AACjB,YAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AACvB,QAAA,CAAC,CAAC;IACN;AAEA;;AAEG;AACH,IAAA,UAAU,CAAC,KAAc,EAAA;AACvB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;IACvB;AAEA;;AAEG;AACH,IAAA,gBAAgB,CAAC,EAA4B,EAAA;AAC3C,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA;;AAEG;AACH,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA;;AAEG;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,EAAE;QAC1B;aAAO;AACL,YAAA,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE;QACzB;IACF;AAEA;;AAEG;AACH,IAAA,aAAa,CAAC,KAAc,EAAA;AAC1B,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACpB,QAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;AACrC,QAAA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE;QACnC,IAAI,CAAC,SAAS,EAAE;IAClB;AAEA;;AAEG;IACH,MAAM,GAAA;QACJ,IAAI,CAAC,SAAS,EAAE;AAChB,QAAA,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE;IACvC;8GAlKW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,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,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,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,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,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,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChCjC,4gCAkCA,EAAA,MAAA,EAAA,CAAA,w2CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDXI,mBAAmB,sIACnB,WAAW,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,UAAA,EAAA,IAAA,EACX,iBAAiB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,8CAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACjB,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,YAAA,EAAA,UAAA,EAAA,MAAA,EAAA,WAAA,EAAA,MAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,SAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAMJ,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAZhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,OAAA,EAClB;wBACP,mBAAmB;wBACnB,WAAW;wBACX,iBAAiB;wBACjB,aAAa;qBACd,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,4gCAAA,EAAA,MAAA,EAAA,CAAA,w2CAAA,CAAA,EAAA;;;AE9BjD;;AAEG;;;;"}
1	+ {"version":3,"file":"tekus-design-system-components-radio-button.mjs","sources":["../../../projects/design-system/components/radio-button/src/radio-button.component.ts","../../../projects/design-system/components/radio-button/src/radio-button.component.html","../../../projects/design-system/components/radio-button/tekus-design-system-components-radio-button.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n input,\n model,\n OnInit,\n inject,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n ControlValueAccessor,\n FormControl,\n ReactiveFormsModule,\n NgControl,\n FormsModule,\n} from '@angular/forms';\nimport { RadioButtonModule } from 'primeng/radiobutton';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n selector: 'tk-radio-button',\n imports: [\n ReactiveFormsModule,\n FormsModule,\n RadioButtonModule,\n MessageModule,\n ],\n templateUrl: './radio-button.component.html',\n styleUrl: './radio-button.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RadioButtonComponent\n implements ControlValueAccessor, OnInit\n{\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n private readonly destroyRef = inject(DestroyRef);\n\n /*\n Initialize the component and register it as a ControlValueAccessor.\n /\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n /\n @property {ModelSignal<any>} model\n * @description\n * The value of the radio button model (checked state).\n * Supports two-way binding via signals.\n /\n model = model<unknown>();\n\n /\n @property {InputSignal<any>} value\n * @description\n * The value of the radio button itself (used when part of a group).\n /\n value = input<unknown>();\n\n /\n @property {InputSignal<string>} label\n * @description\n * Label displayed next to the radio button.\n /\n label = input<string>('');\n\n /\n @property {InputSignal<string>} name\n * @description\n * Name attribute for the radio button.\n /\n name = input<string>('');\n\n /\n @property {InputSignal<string>} inputId\n * @description\n * HTML id attribute for the radio button input.\n /\n inputId = input<string>('');\n\n /\n @property {InputSignal<FormControl>} control\n * @description\n * External FormControl used to read/set the radio button value.\n * If not provided, an internal FormControl is created.\n /\n control = input<FormControl>(new FormControl());\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 {ModelSignal<boolean>} disabled\n * @description\n * Whether the radio button is disabled.\n /\n disabled = model<boolean>(false);\n\n /\n Returns the control currently in use, either from NgControl or the standalone Input.\n /\n get effectiveControl(): FormControl {\n return (this.ngControl?.control as FormControl) \|\| this.control();\n }\n\n onChange: (value: unknown) => void = () => {};\n onTouched: () => void = () => {};\n\n /\n Configure synchronization between the form control and component state.\n /\n ngOnInit(): void {\n const control = this.effectiveControl;\n\n if (control.value !== undefined && control.value !== null) {\n this.model.set(control.value);\n }\n\n if (this.control() === control && this.disabled()) {\n control.disable({ emitEvent: false });\n } else {\n this.disabled.set(control.disabled);\n }\n\n control.statusChanges\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n this.disabled.set(control.disabled);\n });\n\n control.valueChanges\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(value => {\n this.model.set(value);\n });\n }\n\n /\n Implementation of ControlValueAccessor: Writes a new value from the form.\n /\n writeValue(value: unknown): void {\n this.model.set(value);\n }\n\n /\n Implementation of ControlValueAccessor: Registers a callback for change events.\n /\n registerOnChange(fn: (value: unknown) => void): void {\n this.onChange = fn;\n }\n\n /\n Implementation of ControlValueAccessor: Registers a callback for touched events.\n /\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /\n Implementation of ControlValueAccessor: Sets the disabled state.\n /\n setDisabledState?(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n if (isDisabled) {\n this.control().disable();\n } else {\n this.control().enable();\n }\n }\n\n /\n Handle model change events from the template.\n /\n onModelChange(value: unknown): void {\n this.model.set(value);\n this.onChange(value);\n this.effectiveControl.setValue(value);\n this.effectiveControl.markAsDirty();\n this.onTouched();\n }\n\n /\n Handle blur events to trigger onTouched.\n /\n onBlur(): void {\n this.onTouched();\n this.effectiveControl.markAsTouched();\n }\n}\n","<div class=\"tk-radio-button-wrapper\">\n <div class=\"tk-radio-button-group\" [class.tk-disabled]=\"disabled()\">\n <p-radioButton\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n [class.ng-invalid]=\"effectiveControl.invalid\"\n [class.ng-dirty]=\"effectiveControl.dirty\"\n [class.ng-touched]=\"effectiveControl.touched\">\n </p-radioButton>\n @if (label()) {\n <label [for]=\"inputId()\" class=\"tk-radio-button-label\">\n {{ label() }}\n </label>\n }\n </div>\n\n @if (\n effectiveControl.invalid &&\n (effectiveControl.dirty \|\| effectiveControl.touched) &&\n errorMessage()\n ) {\n <div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n errorMessage()\n }}</p-message>\n </div>\n </div>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -116,10 +116,10 @@ class TkSelectManager {
         this.page.set(1);
         this.hasMore.set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TkSelectManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TkSelectManager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TkSelectManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TkSelectManager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TkSelectManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TkSelectManager, decorators: [{
             type: Injectable
         }] });
@@ -385,10 +385,10 @@ class SelectComponent {
             this.manager.loadNextPage();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: SelectComponent, isStandalone: true, selector: "tk-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetchParams: { classPropertyName: "fetchParams", publicName: "fetchParams", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", model: "modelChange", modelChange: "modelChange", filterChange: "filterChange" }, providers: [TkSelectManager], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["pSelect"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n  <p-select\n    #pSelect\n    [id]=\"id()\"\n    class=\"w-full\"\n    [options]=\"items\"\n    [optionLabel]=\"optionLabel()\"\n    [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\"\n    [ngModel]=\"model()\"\n    [filter]=\"filter()\"\n    [loading]=\"manager.loading()\"\n    [emptyMessage]=\"emptyMessage()\"\n    [emptyFilterMessage]=\"emptyFilterMessage()\"\n    [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onChange)=\"handleChange($event)\"\n    (onFilter)=\"handleFilter($event)\"\n    (onShow)=\"onPanelShow()\"\n    (onHide)=\"onPanelHide()\"\n    [resetFilterOnHide]=\"true\">\n    \n    <ng-template pTemplate=\"selectedItem\" let-selectedOption>\n      @if (model()) {\n        <div>{{ $any(model())[optionLabel()] }}</div>\n      } @else if (placeholder()) {\n        <span class=\"text-secondary\">{{ placeholder() }}</span>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"empty\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"info\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyMessage() }}</span>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptyfilter\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"magnifying-glass\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyFilterMessage() }}</span>\n      </div>\n    </ng-template>\n  </p-select>\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched) &&\n      errorMessage()\n    ) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n        errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n        hint()\n      }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-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-primary-default, #16006f)}:host ::ng-deep .p-select.ng-invalid.ng-dirty,:host ::ng-deep .p-select.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}: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);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-select:focus) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065);top:-.75rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}: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}: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-select-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep .tk-select-empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--tk-spacing-base-150, 1.5rem);text-align:center;color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .tk-select-empty-container tk-icon{margin-bottom:var(--tk-spacing-base-50, .5rem)}\n"], dependencies: [{ kind: "ngmodule", type: 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", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], 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"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "tk-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetchParams: { classPropertyName: "fetchParams", publicName: "fetchParams", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", model: "modelChange", modelChange: "modelChange", filterChange: "filterChange" }, providers: [TkSelectManager], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["pSelect"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n  <p-select\n    #pSelect\n    [id]=\"id()\"\n    class=\"w-full\"\n    [options]=\"items\"\n    [optionLabel]=\"optionLabel()\"\n    [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\"\n    [ngModel]=\"model()\"\n    [filter]=\"filter()\"\n    [loading]=\"manager.loading()\"\n    [emptyMessage]=\"emptyMessage()\"\n    [emptyFilterMessage]=\"emptyFilterMessage()\"\n    [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onChange)=\"handleChange($event)\"\n    (onFilter)=\"handleFilter($event)\"\n    (onShow)=\"onPanelShow()\"\n    (onHide)=\"onPanelHide()\"\n    [resetFilterOnHide]=\"true\">\n    \n    <ng-template pTemplate=\"selectedItem\" let-selectedOption>\n      @if (model()) {\n        <div>{{ $any(model())[optionLabel()] }}</div>\n      } @else if (placeholder()) {\n        <span class=\"text-secondary\">{{ placeholder() }}</span>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"empty\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"info\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyMessage() }}</span>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptyfilter\">\n      <div class=\"tk-select-empty-container\">\n        <tk-icon icon=\"magnifying-glass\" size=\"2xl\"></tk-icon>\n        <span>{{ emptyFilterMessage() }}</span>\n      </div>\n    </ng-template>\n  </p-select>\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched) &&\n      errorMessage()\n    ) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n        errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n        hint()\n      }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-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-primary-default, #16006f)}:host ::ng-deep .p-select.ng-invalid.ng-dirty,:host ::ng-deep .p-select.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}: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);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-select:focus) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065);top:-.75rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}: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}: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-select-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep .tk-select-empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--tk-spacing-base-150, 1.5rem);text-align:center;color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .tk-select-empty-container tk-icon{margin-bottom:var(--tk-spacing-base-50, .5rem)}\n"], dependencies: [{ kind: "ngmodule", type: 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", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], 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"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-select', providers: [TkSelectManager], imports: [
                         FormsModule,
@@ -425,10 +425,10 @@ class IntersectionDirective {
     ngOnDestroy() {
         this.observer?.disconnect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: IntersectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.3", type: IntersectionDirective, isStandalone: true, selector: "[tkIntersection]", outputs: { intersect: "intersect" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IntersectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: IntersectionDirective, isStandalone: true, selector: "[tkIntersection]", outputs: { intersect: "intersect" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: IntersectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IntersectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tkIntersection]',