@tekus/design-system 5.21.0 → 5.22.0

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

@@ -17,7 +17,7 @@ class PaginationComponent {
          *
          * @default false
          */
-        this.hidden = input(false);
+        this.hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
         /**
          * @property {number} pageIndex
          * @description
@@ -26,7 +26,7 @@ class PaginationComponent {
          *
          * @default 0
          */
-        this.pageIndex = input(0);
+        this.pageIndex = input(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
         /**
          * @property {number} pageSize
          * @description
@@ -34,7 +34,7 @@ class PaginationComponent {
          *
          * @default 10
          */
-        this.pageSize = input(10);
+        this.pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
         /**
          * @property {number} length
          * @description
@@ -42,7 +42,7 @@ class PaginationComponent {
          *
          * @required
          */
-        this.length = input.required();
+        this.length = input.required(...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
         /**
          * @property {number[]} pageSizeOptions
          * @description
@@ -50,7 +50,7 @@ class PaginationComponent {
          *
          * @default [5, 10, 20, 50]
          */
-        this.pageSizeOptions = input([5, 10, 20, 50]);
+        this.pageSizeOptions = input([5, 10, 20, 50], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
         /**
          * @property {Signal<number>} pageIndexInternal
          * @description
@@ -60,7 +60,7 @@ class PaginationComponent {
          *
          * @internal
          */
-        this.pageIndexInternal = signal(this.pageIndex());
+        this.pageIndexInternal = signal(this.pageIndex(), ...(ngDevMode ? [{ debugName: "pageIndexInternal" }] : /* istanbul ignore next */ []));
         /**
          * @property {Signal<number>} pageSizeInternal
          * @description
@@ -70,7 +70,7 @@ class PaginationComponent {
          *
          * @internal
          */
-        this.pageSizeInternal = signal(this.pageSize());
+        this.pageSizeInternal = signal(this.pageSize(), ...(ngDevMode ? [{ debugName: "pageSizeInternal" }] : /* istanbul ignore next */ []));
         /**
          * @event pageChange
          * @description
@@ -91,7 +91,7 @@ class PaginationComponent {
         this.options = computed(() => this.pageSizeOptions().map(value => ({
             label: value.toString(),
             value: value,
-        })));
+        })), ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         /**
          * @effect pageIndex → pageIndexInternal
          * @description
@@ -146,13 +146,13 @@ class PaginationComponent {
             pageCount: Math.ceil(this.length() / newSize),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: PaginationComponent, isStandalone: true, selector: "tk-pagination", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<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", styles: [".pagination{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:wrap}.pagination__caption{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-current{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-next-icon,:host ::ng-deep .p-paginator-prev-icon{width:18px!important;height:18px!important}:host ::ng-deep .p-select,:host ::ng-deep .p-inputwrapper{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);box-shadow:none}:host ::ng-deep .p-select:focus,:host ::ng-deep .p-inputwrapper:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-dropdown-icon{color:var(--tk-surface-700, #424243)!important}.hidden{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.3", type: PaginationComponent, isStandalone: true, selector: "tk-pagination", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<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", styles: [".pagination{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:wrap}.pagination__caption{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-current{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-next-icon,:host ::ng-deep .p-paginator-prev-icon{width:18px!important;height:18px!important}:host ::ng-deep .p-select,:host ::ng-deep .p-inputwrapper{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);box-shadow:none}:host ::ng-deep .p-select:focus,:host ::ng-deep .p-inputwrapper:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-dropdown-icon{color:var(--tk-surface-700, #424243)!important}.hidden{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tk-pagination', imports: [PaginatorModule, FormsModule, Select], template: "<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", styles: [".pagination{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:wrap}.pagination__caption{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-current{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-next-icon,:host ::ng-deep .p-paginator-prev-icon{width:18px!important;height:18px!important}:host ::ng-deep .p-select,:host ::ng-deep .p-inputwrapper{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);box-shadow:none}:host ::ng-deep .p-select:focus,:host ::ng-deep .p-inputwrapper:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-dropdown-icon{color:var(--tk-surface-700, #424243)!important}.hidden{display:none!important}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: true }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -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  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  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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"}
+{"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  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  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.mjs

@@ -76,10 +76,10 @@ class PanelComponent {
         this.collapsedChange.emit(this.collapsed);
         this.toggled.emit({ collapsed: this.collapsed });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PanelComponent, isStandalone: true, selector: "tk-panel", inputs: { header: "header", toggleable: "toggleable", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange", toggled: "toggled" }, ngImport: i0, template: "<p-panel\n  class=\"tk-panel\"\n  [header]=\"header\"\n  [toggleable]=\"toggleable\"\n  [collapsed]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\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 .p-panel-title{color:var(--tk-color-text-default, #000000)}: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-paddingY-s, .5rem);margin-top:var(--tk-spacing-paddingY-none, 0rem)}: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)}\n"], dependencies: [{ kind: "ngmodule", type: PanelModule }, { kind: "component", type: i1.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], 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"], outputs: ["iconChange", "styleIconChange", "colorChange", "sizeChange", "disabledChange"] }] }); }
+    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: "header", toggleable: "toggleable", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange", toggled: "toggled" }, ngImport: i0, template: "<p-panel\n  class=\"tk-panel\"\n  [header]=\"header\"\n  [toggleable]=\"toggleable\"\n  [collapsed]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\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 .p-panel-title{color:var(--tk-color-text-default, #000000)}: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-paddingY-s, .5rem);margin-top:var(--tk-spacing-paddingY-none, 0rem)}: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)}\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"], outputs: ["iconChange", "styleIconChange", "colorChange", "sizeChange", "disabledChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tk-panel', standalone: true, imports: [PanelModule, IconComponent], template: "<p-panel\n  class=\"tk-panel\"\n  [header]=\"header\"\n  [toggleable]=\"toggleable\"\n  [collapsed]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\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 .p-panel-title{color:var(--tk-color-text-default, #000000)}: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-paddingY-s, .5rem);margin-top:var(--tk-spacing-paddingY-none, 0rem)}: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)}\n"] }]
         }], propDecorators: { header: [{

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

@@ -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 { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { PanelModule } from 'primeng/panel';\nimport { IconComponent } from '@tekus/design-system/components/icon';\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]=\"false\">\n *   <p>Panel content goes here</p>\n * </tk-panel>\n * ```\n */\n@Component({\n  selector: 'tk-panel',\n  standalone: true,\n  imports: [PanelModule, IconComponent],\n  templateUrl: './panel.component.html',\n  styleUrls: ['./panel.component.scss'],\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  @Input() header?: 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  @Input() toggleable = false;\n\n  /**\n   * @property {boolean} collapsed\n   * @description\n   * Defines whether the panel is collapsed or expanded.\n   * Supports two-way binding.\n   * \n   * @default false\n   */\n  @Input() collapsed = false;\n\n  /**\n   * @event collapsedChange\n   * @description\n   * Emits when the collapsed state changes.\n   * Enables two-way binding with [(collapsed)].\n   */\n  @Output() collapsedChange = new EventEmitter<boolean>();\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  @Output() toggled = new EventEmitter<{ 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 | undefined }): void {\n    this.collapsed = event.collapsed ?? false;\n    this.collapsedChange.emit(this.collapsed);\n    this.toggled.emit({ collapsed: this.collapsed });\n  }\n}\n","<p-panel\n  class=\"tk-panel\"\n  [header]=\"header\"\n  [toggleable]=\"toggleable\"\n  [collapsed]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\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":";;;;;;;AAIA;;;;;;;;;;;;;;;;;;AAkBG;MAQU,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;AAiBE;;;;;;AAMG;QACM,IAAU,CAAA,UAAA,GAAG,KAAK;AAE3B;;;;;;;AAOG;QACM,IAAS,CAAA,SAAA,GAAG,KAAK;AAE1B;;;;;AAKG;AACO,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAAW;AAEvD;;;;;;;;;;AAUG;AACO,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,YAAY,EAA0B;AAe/D;AAbC;;;;;;;AAOG;AACH,IAAA,YAAY,CAAC,KAAyC,EAAA;QACpD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,KAAK;QACzC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;AACzC,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;;+GA7DvC,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,EC9B3B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,ghBAqBA,EDKY,MAAA,EAAA,CAAA,giCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,qbAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,YAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAIzB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,cACR,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,ghBAAA,EAAA,MAAA,EAAA,CAAA,giCAAA,CAAA,EAAA;8BAY5B,MAAM,EAAA,CAAA;sBAAd;gBASQ,UAAU,EAAA,CAAA;sBAAlB;gBAUQ,SAAS,EAAA,CAAA;sBAAjB;gBAQS,eAAe,EAAA,CAAA;sBAAxB;gBAaS,OAAO,EAAA,CAAA;sBAAhB;;;AE9EH;;AAEG;;;;"}
+{"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 { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { PanelModule } from 'primeng/panel';\nimport { IconComponent } from '@tekus/design-system/components/icon';\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]=\"false\">\n *   <p>Panel content goes here</p>\n * </tk-panel>\n * ```\n */\n@Component({\n  selector: 'tk-panel',\n  standalone: true,\n  imports: [PanelModule, IconComponent],\n  templateUrl: './panel.component.html',\n  styleUrls: ['./panel.component.scss'],\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  @Input() header?: 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  @Input() toggleable = false;\n\n  /**\n   * @property {boolean} collapsed\n   * @description\n   * Defines whether the panel is collapsed or expanded.\n   * Supports two-way binding.\n   * \n   * @default false\n   */\n  @Input() collapsed = false;\n\n  /**\n   * @event collapsedChange\n   * @description\n   * Emits when the collapsed state changes.\n   * Enables two-way binding with [(collapsed)].\n   */\n  @Output() collapsedChange = new EventEmitter<boolean>();\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  @Output() toggled = new EventEmitter<{ 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 | undefined }): void {\n    this.collapsed = event.collapsed ?? false;\n    this.collapsedChange.emit(this.collapsed);\n    this.toggled.emit({ collapsed: this.collapsed });\n  }\n}\n","<p-panel\n  class=\"tk-panel\"\n  [header]=\"header\"\n  [toggleable]=\"toggleable\"\n  [collapsed]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\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":";;;;;;;AAIA;;;;;;;;;;;;;;;;;;AAkBG;MAQU,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;AAiBE;;;;;;AAMG;QACM,IAAA,CAAA,UAAU,GAAG,KAAK;AAE3B;;;;;;;AAOG;QACM,IAAA,CAAA,SAAS,GAAG,KAAK;AAE1B;;;;;AAKG;AACO,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAAW;AAEvD;;;;;;;;;;AAUG;AACO,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,YAAY,EAA0B;AAe/D,IAAA;AAbC;;;;;;;AAOG;AACH,IAAA,YAAY,CAAC,KAAyC,EAAA;QACpD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,KAAK;QACzC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;AACzC,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;IAClD;8GA9DW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9B3B,ghBAqBA,EAAA,MAAA,EAAA,CAAA,giCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDKY,WAAW,qaAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,YAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIzB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,cACR,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,ghBAAA,EAAA,MAAA,EAAA,CAAA,giCAAA,CAAA,EAAA;;sBAYpC;;sBASA;;sBAUA;;sBAQA;;sBAaA;;;AE9EH;;AAEG;;;;"}

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

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, model, input, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
@@ -21,50 +20,50 @@ class RadioButtonComponent {
          * The value of the radio button model (checked state).
          * Supports two-way binding via signals.
          */
-        this.model = model();
+        this.model = model(...(ngDevMode ? [undefined, { debugName: "model" }] : /* istanbul ignore next */ []));
         /**
          * @property {InputSignal<any>} value
          * @description
          * The value of the radio button itself (used when part of a group).
          */
-        this.value = input();
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
         /**
          * @property {InputSignal<string>} label
          * @description
          * Label displayed next to the radio button.
          */
-        this.label = input('');
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /**
          * @property {InputSignal<string>} name
          * @description
          * Name attribute for the radio button.
          */
-        this.name = input('');
+        this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
         /**
          * @property {InputSignal<string>} inputId
          * @description
          * HTML id attribute for the radio button input.
          */
-        this.inputId = input('');
+        this.inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
         /**
          * @property {InputSignal<FormControl>} control
          * @description
          * External FormControl used to read/set the radio button value.
          * If not provided, an internal FormControl is created.
          */
-        this.control = input(new FormControl());
+        this.control = input(new FormControl(), ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
         /**
          * @property {InputSignal<string>} errorMessage
          * @description
          * Message to display when the control is invalid and touched.
          */
-        this.errorMessage = input('');
+        this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
         /**
          * @property {ModelSignal<boolean>} disabled
          * @description
          * Whether the radio button is disabled.
          */
-        this.disabled = model(false);
+        this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.onChange = () => { };
         this.onTouched = () => { };
         this.subscription = new Subscription();
@@ -152,19 +151,18 @@ class RadioButtonComponent {
         this.onTouched();
         this.effectiveControl.markAsTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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: CommonModule }, { 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", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], 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"], outputs: ["onClose"] }] }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tk-radio-button', imports: [
-                        CommonModule,
                         ReactiveFormsModule,
                         FormsModule,
                         RadioButtonModule,
-                        MessageModule,
+                        MessageModule
                     ], 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"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -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 { CommonModule } from '@angular/common';\nimport {\n  Component,\n  input,\n  model,\n  OnInit,\n  inject,\n  OnDestroy,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  ReactiveFormsModule,\n  NgControl,\n  FormsModule,\n} from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { RadioButtonModule } from 'primeng/radiobutton';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n  selector: 'tk-radio-button',\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    FormsModule,\n    RadioButtonModule,\n    MessageModule,\n  ],\n  templateUrl: './radio-button.component.html',\n  styleUrl: './radio-button.component.scss',\n})\nexport class RadioButtonComponent\n  implements ControlValueAccessor, OnInit, OnDestroy\n{\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\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  private readonly subscription = new Subscription();\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    this.subscription.add(\n      control.statusChanges.subscribe(() => {\n        this.disabled.set(control.disabled);\n      })\n    );\n\n    this.subscription.add(\n      control.valueChanges.subscribe(value => {\n        this.model.set(value);\n      })\n    );\n  }\n\n  /**\n   * Clean up subscriptions.\n   */\n  ngOnDestroy(): void {\n    this.subscription.unsubscribe();\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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"}
+{"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":["\nimport {\n  Component,\n  input,\n  model,\n  OnInit,\n  inject,\n  OnDestroy,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  ReactiveFormsModule,\n  NgControl,\n  FormsModule,\n} from '@angular/forms';\nimport { Subscription } from 'rxjs';\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})\nexport class RadioButtonComponent\n  implements ControlValueAccessor, OnInit, OnDestroy\n{\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\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  private readonly subscription = new Subscription();\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    this.subscription.add(\n      control.statusChanges.subscribe(() => {\n        this.disabled.set(control.disabled);\n      })\n    );\n\n    this.subscription.add(\n      control.valueChanges.subscribe(value => {\n        this.model.set(value);\n      })\n    );\n  }\n\n  /**\n   * Clean up subscriptions.\n   */\n  ngOnDestroy(): void {\n    this.subscription.unsubscribe();\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

@@ -18,20 +18,20 @@ class SelectComponent {
          *
          * @default 'select'
          */
-        this.id = input('select');
+        this.id = input('select', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
          * @property {InputSignal<FormControl>} control
          * @description
          * External FormControl used to read/set the input value.
          * If not provided, an internal FormControl is created.
          */
-        this.control = input();
+        this.control = input(...(ngDevMode ? [undefined, { debugName: "control" }] : /* istanbul ignore next */ []));
         /**
          * @property {T[]} options
          * @description
          * Array of available options displayed in the dropdown.
          */
-        this.options = input([]);
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         /**
          * @property {string} optionLabel
          * @description
@@ -39,13 +39,13 @@ class SelectComponent {
          *
          * @default 'label'
          */
-        this.optionLabel = input('label');
+        this.optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
         /**
          * @property {string} label
          * @description
          * Floating label displayed above the select input.
          */
-        this.label = input('');
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /**
          * @property {boolean} showClear
          * @description
@@ -53,7 +53,7 @@ class SelectComponent {
          *
          * @default true
          */
-        this.showClear = input(true);
+        this.showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
         /**
          * @property {T | null} value
          * @description
@@ -69,27 +69,27 @@ class SelectComponent {
          *
          * @default false
          */
-        this.disabled = input(false);
-        this.internalDisabled = signal(false);
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.internalDisabled = signal(false, ...(ngDevMode ? [{ debugName: "internalDisabled" }] : /* istanbul ignore next */ []));
         /**
          * @property {InputSignal<string>} errorMessage
          * @description
          * Message to display when the control is invalid and touched.
          */
-        this.errorMessage = input('');
+        this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
         /**
          * @property {InputSignal<string>} hint
          * @description
          * Hint text to display below the input.
          */
-        this.hint = input('');
+        this.hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
         /**
          * @property {Signal<T | null>} model
          * @description
          * Two-way binding model using Angular signals.
          * Allows usage with the syntax: `[(model)]="myValue"`.
          */
-        this.model = model();
+        this.model = model(...(ngDevMode ? [undefined, { debugName: "model" }] : /* istanbul ignore next */ []));
         /**
          * @event modelChange
          * @description
@@ -194,13 +194,13 @@ class SelectComponent {
     get effectiveControl() {
         return this.ngControl?.control || null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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 }, 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 }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", modelChange: "modelChange" }, ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n  <p-select\n    [id]=\"id()\"\n    class=\"w-full\"\n    [options]=\"options()\"\n    [optionLabel]=\"optionLabel()\"\n    [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\"\n    [ngModel]=\"value\"\n    [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  <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-accent-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)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    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 }, 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 }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", modelChange: "modelChange" }, ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n  <p-select [id]=\"id()\" class=\"w-full\" [options]=\"options()\" [optionLabel]=\"optionLabel()\" [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\" [ngModel]=\"value\" [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \" [class.ng-dirty]=\"effectiveControl?.dirty\" [class.ng-touched]=\"effectiveControl?.touched\"\n    (onChange)=\"handleChange($event)\" />\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>", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select.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)}\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: "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"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-select', imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule], template: "<p-floatlabel class=\"w-full\">\n  <p-select\n    [id]=\"id()\"\n    class=\"w-full\"\n    [options]=\"options()\"\n    [optionLabel]=\"optionLabel()\"\n    [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\"\n    [ngModel]=\"value\"\n    [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  <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-accent-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)}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'tk-select', imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule], template: "<p-floatlabel class=\"w-full\">\n  <p-select [id]=\"id()\" class=\"w-full\" [options]=\"options()\" [optionLabel]=\"optionLabel()\" [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\" [ngModel]=\"value\" [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \" [class.ng-dirty]=\"effectiveControl?.dirty\" [class.ng-touched]=\"effectiveControl?.touched\"\n    (onChange)=\"handleChange($event)\" />\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>", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select.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)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], modelChange: [{ type: i0.Output, args: ["modelChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.