@tekus/design-system 5.21.0 → 5.22.0

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-select.mjs","sources":["../../../projects/design-system/components/select/src/select.component.ts","../../../projects/design-system/components/select/src/select.component.html","../../../projects/design-system/components/select/tekus-design-system-components-select.ts"],"sourcesContent":["import {\n  Component,\n  effect,\n  model,\n\n  input,\n  output,\n  signal,\n  inject\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormsModule,\n  NgControl,\n  FormControl,\n  ReactiveFormsModule\n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { Select } from 'primeng/select';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n  selector: 'tk-select',\n  imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule],\n  templateUrl: './select.component.html',\n  styleUrl: './select.component.scss',\n\n})\nexport class SelectComponent<T = unknown> implements ControlValueAccessor {\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n  /**\n   * @property {string} id\n   * @description\n   * HTML id attribute for the multiselect input.\n   *\n   * @default 'select'\n   */\n  id = input<string>('select');\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the input value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl>();\n\n  /**\n   * @property {T[]} options\n   * @description\n   * Array of available options displayed in the dropdown.\n   */\n  options = input<T[]>([]);\n\n  /**\n   * @property {string} optionLabel\n   * @description\n   * Name of the property used to display the text of each option.\n   *\n   * @default 'label'\n   */\n  optionLabel = input<string>('label');\n\n  /**\n   * @property {string} label\n   * @description\n   * Floating label displayed above the select input.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {boolean} showClear\n   * @description\n   * Enables the clear button to remove the current selection.\n   *\n   * @default true\n   */\n  showClear = input<boolean>(true);\n\n  /**\n   * @property {T | null} value\n   * @description\n   * Internal selected value. Synced with Angular forms and the model signal.\n   *\n   * @internal\n   */\n  value: T | null = null;\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Determines whether the select field is disabled.\n   *\n   * @default false\n   */\n  disabled = input<boolean>(false);\n  internalDisabled = signal(false);\n\n  /**\n   * @property {InputSignal<string>} errorMessage\n   * @description\n   * Message to display when the control is invalid and touched.\n   */\n  errorMessage = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} hint\n   * @description\n   * Hint text to display below the input.\n   */\n  hint = input<string>('');\n\n  /**\n   * @property {Signal<T | null>} model\n   * @description\n   * Two-way binding model using Angular signals.\n   * Allows usage with the syntax: `[(model)]=\"myValue\"`.\n   */\n  model = model<T | null>();\n\n  /**\n   * @event modelChange\n   * @description\n   * Emits whenever the value changes.\n   * Payload: the selected item of type `T` or `null`.\n   *\n   * @example\n   * <tk-select (modelChange)=\"onChange($event)\"></tk-select>\n   */\n  modelChange = output<T | null>();\n\n  // CVA callbacks\n  private onChangeFn: (value: T | null) => void = () => {};\n  private onTouchedFn = () => {};\n\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n    /**\n     * @effect disabled → internalDisabled\n     * @description\n     * Synchronizes the disabled input signal with the internal disabled state.\n     */\n    effect(() => {\n      this.internalDisabled.set(this.disabled());\n    });\n\n    /**\n     * @effect model → internal value\n     * @description\n     * Synchronizes changes coming from the Signal `model()` back into the internal value.\n     * Ensures consistency between Angular Forms, PrimeNG UI events, and Signals.\n     */\n    effect(() => {\n      const v = this.model();\n      if (v !== this.value) {\n        this.value = v ?? null;\n        this.onChangeFn(v ?? null);\n      }\n    });\n  }\n\n  // -----------------------------------\n  // CONTROL VALUE ACCESSOR (Forms API)\n  // -----------------------------------\n\n  /**\n   * @method writeValue\n   * @description\n   * Receives value updates from Angular Forms and writes them into the component.\n   *\n   * @param {T | null} value - New value from the forms API.\n   */\n  writeValue(value: T | null): void {\n    this.model.set(value);\n  }\n\n  /**\n   * @method registerOnChange\n   * @description\n   * Registers a callback that is invoked when the component's value changes.\n   */\n  registerOnChange(fn: (value: T | null) => void): void {\n    this.onChangeFn = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description\n   * Registers a callback invoked when the component is touched.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouchedFn = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description\n   * Updates the disabled state of the select control.\n   *\n   * @param {boolean} isDisabled - Whether the component should be disabled.\n   */\n  setDisabledState(isDisabled: boolean): void {\n    this.internalDisabled.set(isDisabled);\n  }\n\n  // -----------------------------------\n  // UI EVENTS\n  // -----------------------------------\n\n  /**\n   * @method handleChange\n   * @description\n   * Handles the selection event emitted by the PrimeNG Select component.\n   * Updates Angular Forms, Signals, and emits the modelChange event.\n   *\n   * @param event - Event containing the `value` of the selected option.\n   */\n  handleChange(event: { value: T | null }) {\n    const value = event.value ?? null;\n\n    this.value = value;\n\n    this.onChangeFn(value);\n    this.onTouchedFn();\n\n    this.model.set(value);\n\n    this.modelChange.emit(value);\n\n    if (this.effectiveControl) {\n      this.effectiveControl.setValue(value);\n      this.effectiveControl.markAsDirty();\n      this.effectiveControl.markAsTouched();\n    }\n  }\n  get effectiveControl() {\n    return (this.ngControl?.control as FormControl) || null;\n  }\n}\n\n","<p-floatlabel class=\"w-full\">\n  <p-select\n    [id]=\"id()\"\n    class=\"w-full\"\n    [options]=\"options()\"\n    [optionLabel]=\"optionLabel()\"\n    [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\"\n    [ngModel]=\"value\"\n    [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","/**\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-select.mjs","sources":["../../../projects/design-system/components/select/src/select.component.ts","../../../projects/design-system/components/select/src/select.component.html","../../../projects/design-system/components/select/tekus-design-system-components-select.ts"],"sourcesContent":["import {\n  Component,\n  effect,\n  model,\n\n  input,\n  output,\n  signal,\n  inject\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormsModule,\n  NgControl,\n  FormControl,\n  ReactiveFormsModule\n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { Select } from 'primeng/select';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n  selector: 'tk-select',\n  imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule],\n  templateUrl: './select.component.html',\n  styleUrl: './select.component.scss',\n\n})\nexport class SelectComponent<T = unknown> implements ControlValueAccessor {\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n  /**\n   * @property {string} id\n   * @description\n   * HTML id attribute for the multiselect input.\n   *\n   * @default 'select'\n   */\n  id = input<string>('select');\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the input value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl>();\n\n  /**\n   * @property {T[]} options\n   * @description\n   * Array of available options displayed in the dropdown.\n   */\n  options = input<T[]>([]);\n\n  /**\n   * @property {string} optionLabel\n   * @description\n   * Name of the property used to display the text of each option.\n   *\n   * @default 'label'\n   */\n  optionLabel = input<string>('label');\n\n  /**\n   * @property {string} label\n   * @description\n   * Floating label displayed above the select input.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {boolean} showClear\n   * @description\n   * Enables the clear button to remove the current selection.\n   *\n   * @default true\n   */\n  showClear = input<boolean>(true);\n\n  /**\n   * @property {T | null} value\n   * @description\n   * Internal selected value. Synced with Angular forms and the model signal.\n   *\n   * @internal\n   */\n  value: T | null = null;\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Determines whether the select field is disabled.\n   *\n   * @default false\n   */\n  disabled = input<boolean>(false);\n  internalDisabled = signal(false);\n\n  /**\n   * @property {InputSignal<string>} errorMessage\n   * @description\n   * Message to display when the control is invalid and touched.\n   */\n  errorMessage = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} hint\n   * @description\n   * Hint text to display below the input.\n   */\n  hint = input<string>('');\n\n  /**\n   * @property {Signal<T | null>} model\n   * @description\n   * Two-way binding model using Angular signals.\n   * Allows usage with the syntax: `[(model)]=\"myValue\"`.\n   */\n  model = model<T | null>();\n\n  /**\n   * @event modelChange\n   * @description\n   * Emits whenever the value changes.\n   * Payload: the selected item of type `T` or `null`.\n   *\n   * @example\n   * <tk-select (modelChange)=\"onChange($event)\"></tk-select>\n   */\n  modelChange = output<T | null>();\n\n  // CVA callbacks\n  private onChangeFn: (value: T | null) => void = () => {};\n  private onTouchedFn = () => {};\n\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n    /**\n     * @effect disabled → internalDisabled\n     * @description\n     * Synchronizes the disabled input signal with the internal disabled state.\n     */\n    effect(() => {\n      this.internalDisabled.set(this.disabled());\n    });\n\n    /**\n     * @effect model → internal value\n     * @description\n     * Synchronizes changes coming from the Signal `model()` back into the internal value.\n     * Ensures consistency between Angular Forms, PrimeNG UI events, and Signals.\n     */\n    effect(() => {\n      const v = this.model();\n      if (v !== this.value) {\n        this.value = v ?? null;\n        this.onChangeFn(v ?? null);\n      }\n    });\n  }\n\n  // -----------------------------------\n  // CONTROL VALUE ACCESSOR (Forms API)\n  // -----------------------------------\n\n  /**\n   * @method writeValue\n   * @description\n   * Receives value updates from Angular Forms and writes them into the component.\n   *\n   * @param {T | null} value - New value from the forms API.\n   */\n  writeValue(value: T | null): void {\n    this.model.set(value);\n  }\n\n  /**\n   * @method registerOnChange\n   * @description\n   * Registers a callback that is invoked when the component's value changes.\n   */\n  registerOnChange(fn: (value: T | null) => void): void {\n    this.onChangeFn = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description\n   * Registers a callback invoked when the component is touched.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouchedFn = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description\n   * Updates the disabled state of the select control.\n   *\n   * @param {boolean} isDisabled - Whether the component should be disabled.\n   */\n  setDisabledState(isDisabled: boolean): void {\n    this.internalDisabled.set(isDisabled);\n  }\n\n  // -----------------------------------\n  // UI EVENTS\n  // -----------------------------------\n\n  /**\n   * @method handleChange\n   * @description\n   * Handles the selection event emitted by the PrimeNG Select component.\n   * Updates Angular Forms, Signals, and emits the modelChange event.\n   *\n   * @param event - Event containing the `value` of the selected option.\n   */\n  handleChange(event: { value: T | null }) {\n    const value = event.value ?? null;\n\n    this.value = value;\n\n    this.onChangeFn(value);\n    this.onTouchedFn();\n\n    this.model.set(value);\n\n    this.modelChange.emit(value);\n\n    if (this.effectiveControl) {\n      this.effectiveControl.setValue(value);\n      this.effectiveControl.markAsDirty();\n      this.effectiveControl.markAsTouched();\n    }\n  }\n  get effectiveControl(): FormControl | null {\n    return (this.ngControl?.control as FormControl) || null;\n  }\n}\n\n","<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>","/**\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-table.mjs

@@ -36,7 +36,7 @@ class TableComponent {
          *   { id: 2, name: 'Jane', status: 'inactive' }
          * ]"
          */
-        this.data = input([]);
+        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         /**
          * @property {InputSignal<TableColumn<T>[]>} columns
          * @description
@@ -52,25 +52,25 @@ class TableComponent {
          *   { field: 'status', header: 'Status', renderAs: 'tag' }
          * ]"
          */
-        this.columns = input([]);
+        this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
         /**
          * @property {InputSignal<'single' | 'multiple' | undefined>} selectionMode
          * @description
          * Selection mode of the table.
          */
-        this.selectionMode = input(undefined);
+        this.selectionMode = input(undefined, ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
         /**
          * @property {ModelSignal<any[]>} selection
          * @description
          * Selected row(s) in the table.
          */
-        this.selection = model([]);
+        this.selection = model([], ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
         /**
          * @property {InputSignal<string | undefined>} dataKey
          * @description
          * Property name to uniquely identify a row.
          */
-        this.dataKey = input(undefined);
+        this.dataKey = input(undefined, ...(ngDevMode ? [{ debugName: "dataKey" }] : /* istanbul ignore next */ []));
         this.initialData = [...this.data()];
         this.internalData = [];
         this.isSorted = null;
@@ -86,7 +86,7 @@ class TableComponent {
                 return false;
             // We strictly use full objects for selection now.
             return data.every(row => selected.includes(row));
-        });
+        }, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : /* istanbul ignore next */ []));
         /**
          * @computed isPartiallySelected
          * @description
@@ -99,7 +99,7 @@ class TableComponent {
                 return false;
             const allSelected = this.isAllSelected();
             return !allSelected && selected.length > 0;
-        });
+        }, ...(ngDevMode ? [{ debugName: "isPartiallySelected" }] : /* istanbul ignore next */ []));
         /**
          * @effect data → initialData sync
          * @description
@@ -175,10 +175,10 @@ class TableComponent {
             return (event.order ?? 1) * result;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TableComponent, isStandalone: true, selector: "tk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true }], ngImport: i0, template: "<p-table\n  #tableRef\n  [selection]=\"selection()\"\n  (selectionChange)=\"updateSelection($any($event))\"\n  [selectionMode]=\"selectionMode()\"\n  [dataKey]=\"dataKey()\"\n  [value]=\"internalData\"\n  [customSort]=\"true\"\n  (sortFunction)=\"customSort($event)\"\n  [tableStyle]=\"{ 'min-width': '60rem' }\"\n  responsiveLayout=\"scroll\">\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <tr>\n      @for (col of columns(); track col.header) {\n        <th\n          [id]=\"col.field\"\n          [style.width]=\"col.width\"\n          [pSortableColumn]=\"col.sortable ? col.field : undefined\">\n          <div class=\"tk-table__header-content\">\n            @if (col.type === 'selection' && selectionMode() === 'multiple') {\n              <div class=\"tk-table__actions hide-validation-messages\" >\n                <tk-checkbox\n                  [binary]=\"true\"\n                  [model]=\"isAllSelected()\"\n                  [indeterminate]=\"isPartiallySelected()\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keypress)=\"$event.stopPropagation()\"\n                  (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n              </div>\n            } @else if (col.type !== 'selection') {\n              {{ col.header }}\n              @if (col.sortable) {\n                <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n              }\n            }\n          </div>\n        </th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- BODY -->\n  <ng-template pTemplate=\"body\" let-row>\n    <tr [pSelectableRow]=\"row\">\n      @for (col of columns(); track col.header) {\n        <!-- SELECTION -->\n        @if (col.type === 'selection') {\n          <td>\n            @if (selectionMode() === 'multiple') {\n              <tk-checkbox\n                [model]=\"selection()\"\n                [value]=\"row\"\n                (click)=\"$event.stopPropagation()\"\n                (keypress)=\"$event.stopPropagation()\"\n                (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n            }\n          </td>\n        }\n\n        <!-- CHECKBOX (Boolean field) -->\n        @if (col.type === 'checkbox') {\n          <td>\n            <tk-checkbox\n              [binary]=\"true\"\n              [(model)]=\"row[col.field!]\"\n              (click)=\"$event.stopPropagation()\"\n              (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n          </td>\n        }\n\n        <!-- TEXT (default) -->\n        @if (!col.type || col.type === 'text') {\n          <td>{{ row[col.field!] }}</td>\n        }\n\n        <!-- TAG -->\n        @if (col.type === 'tag') {\n          <td>\n            <tk-tag\n              [value]=\"row[col.field!]\"\n              [severity]=\"col.tagSeverity!(row)\" />\n          </td>\n        }\n\n        <!-- ACTIONS -->\n        @if (col.type === 'actions') {\n          <td>\n            <div class=\"tk-table__actions\">\n              @for (action of col.actions!; track action.icon) {\n                <tk-button\n                  [icon]=\"action.icon\"\n                  severity=\"secondary\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keypress)=\"$event.stopPropagation()\"\n                  (clicked)=\"action?.action(row)\"></tk-button>\n              }\n            </div>\n          </td>\n        }\n      }\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-s, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: TableComponent, isStandalone: true, selector: "tk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true }], ngImport: i0, template: "<p-table #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n  [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData\" [customSort]=\"true\"\n  (sortFunction)=\"customSort($event)\" [tableStyle]=\"{ 'min-width': '60rem' }\" responsiveLayout=\"scroll\">\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <tr>\n      @for (col of columns(); track col.header) {\n      <th [id]=\"col.field\" [style.width]=\"col.width\" [pSortableColumn]=\"col.sortable ? col.field : undefined\">\n        <div class=\"tk-table__header-content\">\n          @if (col.type === 'selection' && selectionMode() === 'multiple') {\n          <div class=\"tk-table__actions hide-validation-messages\">\n            <tk-checkbox [binary]=\"true\" [model]=\"isAllSelected()\" [indeterminate]=\"isPartiallySelected()\"\n              (click)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\"\n              (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n          </div>\n          } @else if (col.type !== 'selection') {\n          {{ col.header }}\n          @if (col.sortable) {\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n          }\n          }\n        </div>\n      </th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- BODY -->\n  <ng-template pTemplate=\"body\" let-row>\n    <tr [pSelectableRow]=\"row\">\n      @for (col of columns(); track col.header) {\n      <!-- SELECTION -->\n      @if (col.type === 'selection') {\n      <td>\n        @if (selectionMode() === 'multiple') {\n        <tk-checkbox [model]=\"selection()\" [value]=\"row\" (click)=\"$event.stopPropagation()\"\n          (keypress)=\"$event.stopPropagation()\" (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n        }\n      </td>\n      }\n\n      <!-- CHECKBOX (Boolean field) -->\n      @if (col.type === 'checkbox') {\n      <td>\n        <tk-checkbox [binary]=\"true\" [(model)]=\"row[col.field!]\" (click)=\"$event.stopPropagation()\"\n          (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n      </td>\n      }\n\n      <!-- TEXT (default) -->\n      @if (!col.type || col.type === 'text') {\n      <td>{{ row[col.field!] }}</td>\n      }\n\n      <!-- TAG -->\n      @if (col.type === 'tag') {\n      <td>\n        <tk-tag [value]=\"row[col.field!]\" [severity]=\"col.tagSeverity!(row)\" />\n      </td>\n      }\n\n      <!-- ACTIONS -->\n      @if (col.type === 'actions') {\n      <td>\n        <div class=\"tk-table__actions\">\n          @for (action of col.actions!; track action.icon) {\n          <tk-button [icon]=\"action.icon\" severity=\"secondary\" (click)=\"$event.stopPropagation()\"\n            (keypress)=\"$event.stopPropagation()\" (clicked)=\"action?.action(row)\"></tk-button>\n          }\n        </div>\n      </td>\n      }\n      }\n    </tr>\n  </ng-template>\n</p-table>", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-s, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tk-table', standalone: true, imports: [
                         TableModule,
@@ -187,11 +187,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         TagComponent,
                         ButtonComponent,
                         CheckboxComponent,
-                    ], template: "<p-table\n  #tableRef\n  [selection]=\"selection()\"\n  (selectionChange)=\"updateSelection($any($event))\"\n  [selectionMode]=\"selectionMode()\"\n  [dataKey]=\"dataKey()\"\n  [value]=\"internalData\"\n  [customSort]=\"true\"\n  (sortFunction)=\"customSort($event)\"\n  [tableStyle]=\"{ 'min-width': '60rem' }\"\n  responsiveLayout=\"scroll\">\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <tr>\n      @for (col of columns(); track col.header) {\n        <th\n          [id]=\"col.field\"\n          [style.width]=\"col.width\"\n          [pSortableColumn]=\"col.sortable ? col.field : undefined\">\n          <div class=\"tk-table__header-content\">\n            @if (col.type === 'selection' && selectionMode() === 'multiple') {\n              <div class=\"tk-table__actions hide-validation-messages\" >\n                <tk-checkbox\n                  [binary]=\"true\"\n                  [model]=\"isAllSelected()\"\n                  [indeterminate]=\"isPartiallySelected()\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keypress)=\"$event.stopPropagation()\"\n                  (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n              </div>\n            } @else if (col.type !== 'selection') {\n              {{ col.header }}\n              @if (col.sortable) {\n                <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n              }\n            }\n          </div>\n        </th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- BODY -->\n  <ng-template pTemplate=\"body\" let-row>\n    <tr [pSelectableRow]=\"row\">\n      @for (col of columns(); track col.header) {\n        <!-- SELECTION -->\n        @if (col.type === 'selection') {\n          <td>\n            @if (selectionMode() === 'multiple') {\n              <tk-checkbox\n                [model]=\"selection()\"\n                [value]=\"row\"\n                (click)=\"$event.stopPropagation()\"\n                (keypress)=\"$event.stopPropagation()\"\n                (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n            }\n          </td>\n        }\n\n        <!-- CHECKBOX (Boolean field) -->\n        @if (col.type === 'checkbox') {\n          <td>\n            <tk-checkbox\n              [binary]=\"true\"\n              [(model)]=\"row[col.field!]\"\n              (click)=\"$event.stopPropagation()\"\n              (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n          </td>\n        }\n\n        <!-- TEXT (default) -->\n        @if (!col.type || col.type === 'text') {\n          <td>{{ row[col.field!] }}</td>\n        }\n\n        <!-- TAG -->\n        @if (col.type === 'tag') {\n          <td>\n            <tk-tag\n              [value]=\"row[col.field!]\"\n              [severity]=\"col.tagSeverity!(row)\" />\n          </td>\n        }\n\n        <!-- ACTIONS -->\n        @if (col.type === 'actions') {\n          <td>\n            <div class=\"tk-table__actions\">\n              @for (action of col.actions!; track action.icon) {\n                <tk-button\n                  [icon]=\"action.icon\"\n                  severity=\"secondary\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keypress)=\"$event.stopPropagation()\"\n                  (clicked)=\"action?.action(row)\"></tk-button>\n              }\n            </div>\n          </td>\n        }\n      }\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-s, .25rem)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { tableRef: [{
+                    ], template: "<p-table #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n  [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData\" [customSort]=\"true\"\n  (sortFunction)=\"customSort($event)\" [tableStyle]=\"{ 'min-width': '60rem' }\" responsiveLayout=\"scroll\">\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <tr>\n      @for (col of columns(); track col.header) {\n      <th [id]=\"col.field\" [style.width]=\"col.width\" [pSortableColumn]=\"col.sortable ? col.field : undefined\">\n        <div class=\"tk-table__header-content\">\n          @if (col.type === 'selection' && selectionMode() === 'multiple') {\n          <div class=\"tk-table__actions hide-validation-messages\">\n            <tk-checkbox [binary]=\"true\" [model]=\"isAllSelected()\" [indeterminate]=\"isPartiallySelected()\"\n              (click)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\"\n              (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n          </div>\n          } @else if (col.type !== 'selection') {\n          {{ col.header }}\n          @if (col.sortable) {\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n          }\n          }\n        </div>\n      </th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- BODY -->\n  <ng-template pTemplate=\"body\" let-row>\n    <tr [pSelectableRow]=\"row\">\n      @for (col of columns(); track col.header) {\n      <!-- SELECTION -->\n      @if (col.type === 'selection') {\n      <td>\n        @if (selectionMode() === 'multiple') {\n        <tk-checkbox [model]=\"selection()\" [value]=\"row\" (click)=\"$event.stopPropagation()\"\n          (keypress)=\"$event.stopPropagation()\" (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n        }\n      </td>\n      }\n\n      <!-- CHECKBOX (Boolean field) -->\n      @if (col.type === 'checkbox') {\n      <td>\n        <tk-checkbox [binary]=\"true\" [(model)]=\"row[col.field!]\" (click)=\"$event.stopPropagation()\"\n          (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n      </td>\n      }\n\n      <!-- TEXT (default) -->\n      @if (!col.type || col.type === 'text') {\n      <td>{{ row[col.field!] }}</td>\n      }\n\n      <!-- TAG -->\n      @if (col.type === 'tag') {\n      <td>\n        <tk-tag [value]=\"row[col.field!]\" [severity]=\"col.tagSeverity!(row)\" />\n      </td>\n      }\n\n      <!-- ACTIONS -->\n      @if (col.type === 'actions') {\n      <td>\n        <div class=\"tk-table__actions\">\n          @for (action of col.actions!; track action.icon) {\n          <tk-button [icon]=\"action.icon\" severity=\"secondary\" (click)=\"$event.stopPropagation()\"\n            (keypress)=\"$event.stopPropagation()\" (clicked)=\"action?.action(row)\"></tk-button>\n          }\n        </div>\n      </td>\n      }\n      }\n    </tr>\n  </ng-template>\n</p-table>", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-s, .25rem)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], tableRef: [{
                 type: ViewChild,
                 args: ['tableRef']
-            }] } });
+            }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-table.mjs","sources":["../../../projects/design-system/components/table/src/table.component.ts","../../../projects/design-system/components/table/src/table.component.html","../../../projects/design-system/components/table/tekus-design-system-components-table.ts"],"sourcesContent":["import { Component, computed, effect, input, model, ViewChild } from '@angular/core';\nimport { Table, TableModule } from 'primeng/table';\nimport { TagModule } from 'primeng/tag';\nimport { ButtonModule } from 'primeng/button';\nimport { TableColumn } from './table.interface';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { SortEvent } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CheckboxComponent } from '@tekus/design-system/components/checkbox';\n\n@Component({\n  selector: 'tk-table',\n  standalone: true,\n  imports: [\n    TableModule,\n    TagModule,\n    ButtonModule,\n    TagComponent,\n    ButtonComponent,\n    CheckboxComponent,\n  ],\n  templateUrl: './table.component.html',\n  styleUrl: './table.component.scss',\n})\n/**\n * @component TableComponent\n * @description\n * Generic table wrapper around PrimeNG Table component.\n * Displays tabular data with configurable columns and support for custom rendering via template.\n *\n * @usage\n * ```html\n * <tk-table [data]=\"items\" [columns]=\"columnConfig\"></tk-table>\n * ```\n */\nexport class TableComponent<T = unknown> {\n  /**\n   * @property {InputSignal<T[]>} data\n   * @description\n   * Array of data objects to display in the table rows.\n   * Each object corresponds to one row; properties are mapped to columns via the `columns` input.\n   *\n   * @default []\n   *\n   * @example\n   * [data]=\"[\n   *   { id: 1, name: 'John', status: 'active' },\n   *   { id: 2, name: 'Jane', status: 'inactive' }\n   * ]\"\n   */\n  data = input<T[]>([]);\n\n  /**\n   * @property {ViewChild} tableRef\n   * @description\n   * Reference to the PrimeNG Table component instance.\n   * Used to access table methods and properties directly.\n   */\n  @ViewChild('tableRef')\n  tableRef!: Table;\n\n  /**\n   * @property {InputSignal<TableColumn<T>[]>} columns\n   * @description\n   * Array of column definitions that describe how to render each column.\n   * Each column object specifies the field name, header label, and optional rendering behavior.\n   *\n   * @default []\n   *\n   * @example\n   * [columns]=\"[\n   *   { field: 'id', header: 'ID' },\n   *   { field: 'name', header: 'Name' },\n   *   { field: 'status', header: 'Status', renderAs: 'tag' }\n   * ]\"\n   */\n  columns = input<TableColumn<T>[]>([]);\n\n  /**\n   * @property {InputSignal<'single' | 'multiple' | undefined>} selectionMode\n   * @description\n   * Selection mode of the table.\n   */\n  selectionMode = input<'single' | 'multiple' | undefined>(undefined);\n\n  /**\n   * @property {ModelSignal<any[]>} selection\n   * @description\n   * Selected row(s) in the table.\n   */\n  selection = model<T[]>([]);\n\n  /**\n   * @property {InputSignal<string | undefined>} dataKey\n   * @description\n   * Property name to uniquely identify a row.\n   */\n  dataKey = input<string | undefined>(undefined);\n\n  initialData: T[] = [...this.data()];\n  internalData: T[] = [];\n  isSorted: boolean | null = null;\n\n  /**\n   * @computed isAllSelected\n   * @description\n   * Returns true if all visible rows are selected.\n   */\n  isAllSelected = computed(() => {\n    const data = this.internalData;\n    const selected = this.selection();\n    if (data.length === 0 || selected.length === 0) return false;\n    \n    // We strictly use full objects for selection now.\n    return data.every(row => selected.includes(row));\n  });\n\n  /**\n   * @computed isPartiallySelected\n   * @description\n   * Returns true if some but not all rows are selected.\n   */\n  isPartiallySelected = computed(() => {\n    const data = this.internalData;\n    const selected = this.selection();\n    if (data.length === 0 || selected.length === 0) return false;\n    \n    const allSelected = this.isAllSelected();\n    return !allSelected && selected.length > 0;\n  });\n\n  constructor() {\n    /**\n     * @effect data → initialData sync\n     * @description\n     * Whenever the data input changes, update initialData and reset sort state.\n     */\n    effect(() => {\n      this.internalData = [...this.data()];\n      this.initialData = [...this.data()];\n    });\n  }\n\n  /**\n   * @method toggleAll\n   * @description\n   * Toggles selection of all visible rows using full objects.\n   * @param checked {unknown}\n   */\n  toggleAll(checked: unknown) {\n    if (checked) {\n      this.selection.set([...this.internalData]);\n    } else {\n      this.selection.set([]);\n    }\n  }\n\n  /**\n   * @method updateSelection\n   * @description\n   * Updates row selection state from checkbox interaction.\n   * @param value {any[]}\n   */\n  updateSelection(value: T[]) {\n    this.selection.set([...value]);\n  }\n\n  customSort(event: SortEvent) {\n    if (this.isSorted === null || this.isSorted === undefined) {\n      this.isSorted = true;\n      this.sortTableData(event);\n    } else if (this.isSorted) {\n      this.isSorted = false;\n      this.sortTableData(event);\n    } else {\n      this.isSorted = null;\n      this.internalData = [...this.initialData];\n      this.tableRef.reset();\n    }\n  }\n\n  sortTableData(event: SortEvent) {\n    if (!event.data || !event.field) return;\n\n    event.data.sort((data1, data2) => {\n      const value1 = data1[event.field!];\n      const value2 = data2[event.field!];\n      let result = null;\n      if (value1 == null && value2 != null) result = -1;\n      else if (value1 != null && value2 == null) result = 1;\n      else if (value1 == null && value2 == null) result = 0;\n      else if (typeof value1 === 'string' && typeof value2 === 'string')\n        result = value1.localeCompare(value2);\n      else if (value1 < value2) {\n        result = -1;\n      } else if (value1 > value2) {\n        result = 1;\n      } else {\n        result = 0;\n      }\n\n      return (event.order ?? 1) * result;\n    });\n  }\n}\n","<p-table\n  #tableRef\n  [selection]=\"selection()\"\n  (selectionChange)=\"updateSelection($any($event))\"\n  [selectionMode]=\"selectionMode()\"\n  [dataKey]=\"dataKey()\"\n  [value]=\"internalData\"\n  [customSort]=\"true\"\n  (sortFunction)=\"customSort($event)\"\n  [tableStyle]=\"{ 'min-width': '60rem' }\"\n  responsiveLayout=\"scroll\">\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <tr>\n      @for (col of columns(); track col.header) {\n        <th\n          [id]=\"col.field\"\n          [style.width]=\"col.width\"\n          [pSortableColumn]=\"col.sortable ? col.field : undefined\">\n          <div class=\"tk-table__header-content\">\n            @if (col.type === 'selection' && selectionMode() === 'multiple') {\n              <div class=\"tk-table__actions hide-validation-messages\" >\n                <tk-checkbox\n                  [binary]=\"true\"\n                  [model]=\"isAllSelected()\"\n                  [indeterminate]=\"isPartiallySelected()\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keypress)=\"$event.stopPropagation()\"\n                  (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n              </div>\n            } @else if (col.type !== 'selection') {\n              {{ col.header }}\n              @if (col.sortable) {\n                <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n              }\n            }\n          </div>\n        </th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- BODY -->\n  <ng-template pTemplate=\"body\" let-row>\n    <tr [pSelectableRow]=\"row\">\n      @for (col of columns(); track col.header) {\n        <!-- SELECTION -->\n        @if (col.type === 'selection') {\n          <td>\n            @if (selectionMode() === 'multiple') {\n              <tk-checkbox\n                [model]=\"selection()\"\n                [value]=\"row\"\n                (click)=\"$event.stopPropagation()\"\n                (keypress)=\"$event.stopPropagation()\"\n                (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n            }\n          </td>\n        }\n\n        <!-- CHECKBOX (Boolean field) -->\n        @if (col.type === 'checkbox') {\n          <td>\n            <tk-checkbox\n              [binary]=\"true\"\n              [(model)]=\"row[col.field!]\"\n              (click)=\"$event.stopPropagation()\"\n              (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n          </td>\n        }\n\n        <!-- TEXT (default) -->\n        @if (!col.type || col.type === 'text') {\n          <td>{{ row[col.field!] }}</td>\n        }\n\n        <!-- TAG -->\n        @if (col.type === 'tag') {\n          <td>\n            <tk-tag\n              [value]=\"row[col.field!]\"\n              [severity]=\"col.tagSeverity!(row)\" />\n          </td>\n        }\n\n        <!-- ACTIONS -->\n        @if (col.type === 'actions') {\n          <td>\n            <div class=\"tk-table__actions\">\n              @for (action of col.actions!; track action.icon) {\n                <tk-button\n                  [icon]=\"action.icon\"\n                  severity=\"secondary\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keypress)=\"$event.stopPropagation()\"\n                  (clicked)=\"action?.action(row)\"></tk-button>\n              }\n            </div>\n          </td>\n        }\n      }\n    </tr>\n  </ng-template>\n</p-table>\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-table.mjs","sources":["../../../projects/design-system/components/table/src/table.component.ts","../../../projects/design-system/components/table/src/table.component.html","../../../projects/design-system/components/table/tekus-design-system-components-table.ts"],"sourcesContent":["import { Component, computed, effect, input, model, ViewChild } from '@angular/core';\nimport { Table, TableModule } from 'primeng/table';\nimport { TagModule } from 'primeng/tag';\nimport { ButtonModule } from 'primeng/button';\nimport { TableColumn } from './table.interface';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { SortEvent } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CheckboxComponent } from '@tekus/design-system/components/checkbox';\n\n@Component({\n  selector: 'tk-table',\n  standalone: true,\n  imports: [\n    TableModule,\n    TagModule,\n    ButtonModule,\n    TagComponent,\n    ButtonComponent,\n    CheckboxComponent,\n  ],\n  templateUrl: './table.component.html',\n  styleUrl: './table.component.scss',\n})\n/**\n * @component TableComponent\n * @description\n * Generic table wrapper around PrimeNG Table component.\n * Displays tabular data with configurable columns and support for custom rendering via template.\n *\n * @usage\n * ```html\n * <tk-table [data]=\"items\" [columns]=\"columnConfig\"></tk-table>\n * ```\n */\nexport class TableComponent<T = unknown> {\n  /**\n   * @property {InputSignal<T[]>} data\n   * @description\n   * Array of data objects to display in the table rows.\n   * Each object corresponds to one row; properties are mapped to columns via the `columns` input.\n   *\n   * @default []\n   *\n   * @example\n   * [data]=\"[\n   *   { id: 1, name: 'John', status: 'active' },\n   *   { id: 2, name: 'Jane', status: 'inactive' }\n   * ]\"\n   */\n  data = input<T[]>([]);\n\n  /**\n   * @property {ViewChild} tableRef\n   * @description\n   * Reference to the PrimeNG Table component instance.\n   * Used to access table methods and properties directly.\n   */\n  @ViewChild('tableRef')\n  tableRef!: Table;\n\n  /**\n   * @property {InputSignal<TableColumn<T>[]>} columns\n   * @description\n   * Array of column definitions that describe how to render each column.\n   * Each column object specifies the field name, header label, and optional rendering behavior.\n   *\n   * @default []\n   *\n   * @example\n   * [columns]=\"[\n   *   { field: 'id', header: 'ID' },\n   *   { field: 'name', header: 'Name' },\n   *   { field: 'status', header: 'Status', renderAs: 'tag' }\n   * ]\"\n   */\n  columns = input<TableColumn<T>[]>([]);\n\n  /**\n   * @property {InputSignal<'single' | 'multiple' | undefined>} selectionMode\n   * @description\n   * Selection mode of the table.\n   */\n  selectionMode = input<'single' | 'multiple' | undefined>(undefined);\n\n  /**\n   * @property {ModelSignal<any[]>} selection\n   * @description\n   * Selected row(s) in the table.\n   */\n  selection = model<T[]>([]);\n\n  /**\n   * @property {InputSignal<string | undefined>} dataKey\n   * @description\n   * Property name to uniquely identify a row.\n   */\n  dataKey = input<string | undefined>(undefined);\n\n  initialData: T[] = [...this.data()];\n  internalData: T[] = [];\n  isSorted: boolean | null = null;\n\n  /**\n   * @computed isAllSelected\n   * @description\n   * Returns true if all visible rows are selected.\n   */\n  isAllSelected = computed(() => {\n    const data = this.internalData;\n    const selected = this.selection();\n    if (data.length === 0 || selected.length === 0) return false;\n\n    // We strictly use full objects for selection now.\n    return data.every(row => selected.includes(row));\n  });\n\n  /**\n   * @computed isPartiallySelected\n   * @description\n   * Returns true if some but not all rows are selected.\n   */\n  isPartiallySelected = computed(() => {\n    const data = this.internalData;\n    const selected = this.selection();\n    if (data.length === 0 || selected.length === 0) return false;\n\n    const allSelected = this.isAllSelected();\n    return !allSelected && selected.length > 0;\n  });\n\n  constructor() {\n    /**\n     * @effect data → initialData sync\n     * @description\n     * Whenever the data input changes, update initialData and reset sort state.\n     */\n    effect(() => {\n      this.internalData = [...this.data()];\n      this.initialData = [...this.data()];\n    });\n  }\n\n  /**\n   * @method toggleAll\n   * @description\n   * Toggles selection of all visible rows using full objects.\n   * @param checked {unknown}\n   */\n  toggleAll(checked: unknown) {\n    if (checked) {\n      this.selection.set([...this.internalData]);\n    } else {\n      this.selection.set([]);\n    }\n  }\n\n  /**\n   * @method updateSelection\n   * @description\n   * Updates row selection state from checkbox interaction.\n   * @param value {any[]}\n   */\n  updateSelection(value: T[]) {\n    this.selection.set([...value]);\n  }\n\n  customSort(event: SortEvent) {\n    if (this.isSorted === null || this.isSorted === undefined) {\n      this.isSorted = true;\n      this.sortTableData(event);\n    } else if (this.isSorted) {\n      this.isSorted = false;\n      this.sortTableData(event);\n    } else {\n      this.isSorted = null;\n      this.internalData = [...this.initialData];\n      this.tableRef.reset();\n    }\n  }\n\n  sortTableData(event: SortEvent) {\n    if (!event.data || !event.field) return;\n\n    event.data.sort((data1, data2) => {\n      const value1 = data1[event.field!];\n      const value2 = data2[event.field!];\n      let result = null;\n      if (value1 == null && value2 != null) result = -1;\n      else if (value1 != null && value2 == null) result = 1;\n      else if (value1 == null && value2 == null) result = 0;\n      else if (typeof value1 === 'string' && typeof value2 === 'string')\n        result = value1.localeCompare(value2);\n      else if (value1 < value2) {\n        result = -1;\n      } else if (value1 > value2) {\n        result = 1;\n      } else {\n        result = 0;\n      }\n\n      return (event.order ?? 1) * result;\n    });\n  }\n}\n","<p-table #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n  [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData\" [customSort]=\"true\"\n  (sortFunction)=\"customSort($event)\" [tableStyle]=\"{ 'min-width': '60rem' }\" responsiveLayout=\"scroll\">\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <tr>\n      @for (col of columns(); track col.header) {\n      <th [id]=\"col.field\" [style.width]=\"col.width\" [pSortableColumn]=\"col.sortable ? col.field : undefined\">\n        <div class=\"tk-table__header-content\">\n          @if (col.type === 'selection' && selectionMode() === 'multiple') {\n          <div class=\"tk-table__actions hide-validation-messages\">\n            <tk-checkbox [binary]=\"true\" [model]=\"isAllSelected()\" [indeterminate]=\"isPartiallySelected()\"\n              (click)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\"\n              (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n          </div>\n          } @else if (col.type !== 'selection') {\n          {{ col.header }}\n          @if (col.sortable) {\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n          }\n          }\n        </div>\n      </th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- BODY -->\n  <ng-template pTemplate=\"body\" let-row>\n    <tr [pSelectableRow]=\"row\">\n      @for (col of columns(); track col.header) {\n      <!-- SELECTION -->\n      @if (col.type === 'selection') {\n      <td>\n        @if (selectionMode() === 'multiple') {\n        <tk-checkbox [model]=\"selection()\" [value]=\"row\" (click)=\"$event.stopPropagation()\"\n          (keypress)=\"$event.stopPropagation()\" (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n        }\n      </td>\n      }\n\n      <!-- CHECKBOX (Boolean field) -->\n      @if (col.type === 'checkbox') {\n      <td>\n        <tk-checkbox [binary]=\"true\" [(model)]=\"row[col.field!]\" (click)=\"$event.stopPropagation()\"\n          (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n      </td>\n      }\n\n      <!-- TEXT (default) -->\n      @if (!col.type || col.type === 'text') {\n      <td>{{ row[col.field!] }}</td>\n      }\n\n      <!-- TAG -->\n      @if (col.type === 'tag') {\n      <td>\n        <tk-tag [value]=\"row[col.field!]\" [severity]=\"col.tagSeverity!(row)\" />\n      </td>\n      }\n\n      <!-- ACTIONS -->\n      @if (col.type === 'actions') {\n      <td>\n        <div class=\"tk-table__actions\">\n          @for (action of col.actions!; track action.icon) {\n          <tk-button [icon]=\"action.icon\" severity=\"secondary\" (click)=\"$event.stopPropagation()\"\n            (keypress)=\"$event.stopPropagation()\" (clicked)=\"action?.action(row)\"></tk-button>\n          }\n        </div>\n      </td>\n      }\n      }\n    </tr>\n  </ng-template>\n</p-table>","/**\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-tabs.mjs

@@ -1,8 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, model, output, viewChild, Component } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from 'primeng/tabs';
+import { input, model, output, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i1 from 'primeng/tabs';
 import { TabsModule } from 'primeng/tabs';
 import { TooltipComponent } from '@tekus/design-system/components/tooltip';
 import { BadgeComponent } from '@tekus/design-system/components/badge';
@@ -14,14 +13,14 @@ class TabsComponent {
          * @description
          * Array of tab configurations to display.
          */
-        this.tabs = input([]);
+        this.tabs = input([], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
         /**
          * @property {ModelSignal<number>} activeIndex
          * @description
          * The index of the currently active tab. Supports two-way binding via signals.
          * @default 0
          */
-        this.activeIndex = model(0);
+        this.activeIndex = model(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
         /**
          * @event tabChange
          * @description
@@ -32,12 +31,6 @@ class TabsComponent {
          * <tk-tabs (tabChange)="onTabChange($event)"></tk-tabs>
          */
         this.tabChange = output();
-        /**
-         * @property {ViewChild<TabsComponent>} tkTabs
-         * @description
-         * Reference to the tabs component for programmatic access.
-         */
-        this.tkTabs = viewChild('tkTabs');
     }
     /**
      * @method visibleTabs
@@ -55,19 +48,23 @@ class TabsComponent {
      * @param {number} index - The index of the newly selected tab.
      */
     onTabChange(index) {
+        if (this.activeIndex() === index)
+            return;
         this.activeIndex.set(index);
-        this.tabChange.emit({
-            index,
-            tab: this.visibleTabs[index],
-        });
+        if (this.visibleTabs[index]) {
+            this.tabChange.emit({
+                index,
+                tab: this.visibleTabs[index],
+            });
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TabsComponent, isStandalone: true, selector: "tk-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tkTabs", first: true, predicate: ["tkTabs"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-tabs\n  #tkTabs\n  [value]=\"activeIndex()\"\n  scrollable\n  (valueChange)=\"onTabChange(+$event)\"\n  class=\"tk-tabs\">\n  <p-tablist>\n    <p-tab\n      *ngFor=\"let tab of visibleTabs; let i = index\"\n      [value]=\"i\"\n      [disabled]=\"tab.disabled\"\n      tooltipPosition=\"top\">\n      <tk-tooltip [content]=\"tab.tooltip ?? ''\" position=\"top\">\n        <span\n          class=\"tk-tab-label\"\n          [style.max-width]=\"tab.badge ? '6rem' : '9rem'\">\n          {{ tab.label }}\n        </span>\n      </tk-tooltip>\n      @if(tab.badge){\n      <tk-badge [value]=\"tab.badge\"></tk-badge>\n      }\n    </p-tab>\n  </p-tablist>\n\n  <p-tabpanels>\n    @for (tab of visibleTabs; track $index) {\n    <p-tabpanel [value]=\"$index\">\n      @if (!tab.lazy || activeIndex() === $index) {\n      <ng-container *ngTemplateOutlet=\"tab.content || null\"></ng-container>\n      }\n    </p-tabpanel>\n    }\n  </p-tabpanels>\n</p-tabs>\n", styles: [".tk-tabs{width:100%}.tk-tabs .p-tablist{display:flex;width:100%}.tk-tabs .tk-tab-label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);font-weight:var(--tk-font-weight-regular, 400)}:host ::ng-deep .p-tab{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-100, 1rem);max-width:var(--tk-size-base-1000, 10rem)}:host ::ng-deep .p-tab-active{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .tk-tooltip-wrapper{display:flex!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabList, selector: "p-tablist" }, { kind: "component", type: i2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }, { kind: "component", type: BadgeComponent, selector: "tk-badge", inputs: ["value", "severity"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: TabsComponent, isStandalone: true, selector: "tk-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", tabChange: "tabChange" }, ngImport: i0, template: "<p-tabs [value]=\"activeIndex()\" (valueChange)=\"onTabChange($event !== undefined ? +$event : activeIndex())\"\n  class=\"tk-tabs\">\n  <p-tablist>\n    @for (tab of visibleTabs; track $index) {\n    <p-tab [value]=\"$index\" [disabled]=\"tab.disabled\">\n      <tk-tooltip [content]=\"tab.tooltip ?? ''\" position=\"top\">\n        <span class=\"tk-tab-label\" [style.max-width]=\"tab.badge ? '6rem' : '9rem'\">\n          {{ tab.label }}\n        </span>\n      </tk-tooltip>\n      @if(tab.badge){\n      <tk-badge [value]=\"tab.badge\"></tk-badge>\n      }\n    </p-tab>\n    }\n  </p-tablist>\n\n  <p-tabpanels>\n    @for (tab of visibleTabs; track $index) {\n    <p-tabpanel [value]=\"$index\">\n      @if (!tab.lazy || activeIndex() === $index) {\n      <ng-container *ngTemplateOutlet=\"tab.content || null\"></ng-container>\n      }\n    </p-tabpanel>\n    }\n  </p-tabpanels>\n</p-tabs>", styles: [".tk-tabs{width:100%}.tk-tabs .p-tablist{display:flex;width:100%}.tk-tabs .tk-tab-label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);font-weight:var(--tk-font-weight-regular, 400)}:host ::ng-deep .p-tab{display:flex;align-items:center;gap:.5rem;padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-100, 1rem);max-width:var(--tk-size-base-1000, 10rem)}:host ::ng-deep .p-tab-active{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .tk-tooltip-wrapper{display:flex!important}\n"], dependencies: [{ kind: "ngmodule", type: TabsModule }, { kind: "component", type: i1.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i1.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i1.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i1.TabList, selector: "p-tablist" }, { kind: "component", type: i1.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }, { kind: "component", type: BadgeComponent, selector: "tk-badge", inputs: ["value", "severity"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-tabs', imports: [CommonModule, TabsModule, TooltipComponent, BadgeComponent], template: "<p-tabs\n  #tkTabs\n  [value]=\"activeIndex()\"\n  scrollable\n  (valueChange)=\"onTabChange(+$event)\"\n  class=\"tk-tabs\">\n  <p-tablist>\n    <p-tab\n      *ngFor=\"let tab of visibleTabs; let i = index\"\n      [value]=\"i\"\n      [disabled]=\"tab.disabled\"\n      tooltipPosition=\"top\">\n      <tk-tooltip [content]=\"tab.tooltip ?? ''\" position=\"top\">\n        <span\n          class=\"tk-tab-label\"\n          [style.max-width]=\"tab.badge ? '6rem' : '9rem'\">\n          {{ tab.label }}\n        </span>\n      </tk-tooltip>\n      @if(tab.badge){\n      <tk-badge [value]=\"tab.badge\"></tk-badge>\n      }\n    </p-tab>\n  </p-tablist>\n\n  <p-tabpanels>\n    @for (tab of visibleTabs; track $index) {\n    <p-tabpanel [value]=\"$index\">\n      @if (!tab.lazy || activeIndex() === $index) {\n      <ng-container *ngTemplateOutlet=\"tab.content || null\"></ng-container>\n      }\n    </p-tabpanel>\n    }\n  </p-tabpanels>\n</p-tabs>\n", styles: [".tk-tabs{width:100%}.tk-tabs .p-tablist{display:flex;width:100%}.tk-tabs .tk-tab-label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);font-weight:var(--tk-font-weight-regular, 400)}:host ::ng-deep .p-tab{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-100, 1rem);max-width:var(--tk-size-base-1000, 10rem)}:host ::ng-deep .p-tab-active{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .tk-tooltip-wrapper{display:flex!important}\n"] }]
-        }] });
+            args: [{ selector: 'tk-tabs', standalone: true, imports: [TabsModule, TooltipComponent, BadgeComponent, NgTemplateOutlet], template: "<p-tabs [value]=\"activeIndex()\" (valueChange)=\"onTabChange($event !== undefined ? +$event : activeIndex())\"\n  class=\"tk-tabs\">\n  <p-tablist>\n    @for (tab of visibleTabs; track $index) {\n    <p-tab [value]=\"$index\" [disabled]=\"tab.disabled\">\n      <tk-tooltip [content]=\"tab.tooltip ?? ''\" position=\"top\">\n        <span class=\"tk-tab-label\" [style.max-width]=\"tab.badge ? '6rem' : '9rem'\">\n          {{ tab.label }}\n        </span>\n      </tk-tooltip>\n      @if(tab.badge){\n      <tk-badge [value]=\"tab.badge\"></tk-badge>\n      }\n    </p-tab>\n    }\n  </p-tablist>\n\n  <p-tabpanels>\n    @for (tab of visibleTabs; track $index) {\n    <p-tabpanel [value]=\"$index\">\n      @if (!tab.lazy || activeIndex() === $index) {\n      <ng-container *ngTemplateOutlet=\"tab.content || null\"></ng-container>\n      }\n    </p-tabpanel>\n    }\n  </p-tabpanels>\n</p-tabs>", styles: [".tk-tabs{width:100%}.tk-tabs .p-tablist{display:flex;width:100%}.tk-tabs .tk-tab-label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);font-weight:var(--tk-font-weight-regular, 400)}:host ::ng-deep .p-tab{display:flex;align-items:center;gap:.5rem;padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-100, 1rem);max-width:var(--tk-size-base-1000, 10rem)}:host ::ng-deep .p-tab-active{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .tk-tooltip-wrapper{display:flex!important}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-tabs.mjs","sources":["../../../projects/design-system/components/tabs/src/tabs.component.ts","../../../projects/design-system/components/tabs/src/tabs.component.html","../../../projects/design-system/components/tabs/tekus-design-system-components-tabs.ts"],"sourcesContent":["import { Component, input, output, model, viewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TabsModule } from 'primeng/tabs';\nimport { TabData } from './tabs.interface';\nimport { TooltipComponent } from '@tekus/design-system/components/tooltip';\nimport { BadgeComponent } from '@tekus/design-system/components/badge';\n\n@Component({\n  selector: 'tk-tabs',\n  imports: [CommonModule, TabsModule, TooltipComponent, BadgeComponent],\n  templateUrl: './tabs.component.html',\n  styleUrl: './tabs.component.scss',\n})\nexport class TabsComponent {\n  /**\n   * @property {InputSignal<TabData[]>} tabs\n   * @description\n   * Array of tab configurations to display.\n   */\n  tabs = input<TabData[]>([]);\n\n  /**\n   * @property {ModelSignal<number>} activeIndex\n   * @description\n   * The index of the currently active tab. Supports two-way binding via signals.\n   * @default 0\n   */\n  activeIndex = model<number>(0);\n\n  /**\n   * @event tabChange\n   * @description\n   * Emitted when the active tab changes.\n   * Payload: object containing the tab index and tab data.\n   *\n   * @example\n   * <tk-tabs (tabChange)=\"onTabChange($event)\"></tk-tabs>\n   */\n  tabChange = output<{\n    index: number;\n    tab: TabData;\n  }>();\n\n  /**\n   * @property {ViewChild<TabsComponent>} tkTabs\n   * @description\n   * Reference to the tabs component for programmatic access.\n   */\n  tkTabs = viewChild('tkTabs');\n\n  /**\n   * @method visibleTabs\n   * @description\n   * Returns only the tabs that are marked as visible.\n   * @returns {TabData[]} Array of visible tabs.\n   */\n  get visibleTabs(): TabData[] {\n    return this.tabs().filter(t => t.visible !== false);\n  }\n\n  /**\n   * @method onTabChange\n   * @description\n   * Handles tab change events and emits the tabChange output.\n   * @param {number} index - The index of the newly selected tab.\n   */\n  onTabChange(index: number) {\n    this.activeIndex.set(index);\n\n    this.tabChange.emit({\n      index,\n      tab: this.visibleTabs[index],\n    });\n  }\n}\n","<p-tabs\n  #tkTabs\n  [value]=\"activeIndex()\"\n  scrollable\n  (valueChange)=\"onTabChange(+$event)\"\n  class=\"tk-tabs\">\n  <p-tablist>\n    <p-tab\n      *ngFor=\"let tab of visibleTabs; let i = index\"\n      [value]=\"i\"\n      [disabled]=\"tab.disabled\"\n      tooltipPosition=\"top\">\n      <tk-tooltip [content]=\"tab.tooltip ?? ''\" position=\"top\">\n        <span\n          class=\"tk-tab-label\"\n          [style.max-width]=\"tab.badge ? '6rem' : '9rem'\">\n          {{ tab.label }}\n        </span>\n      </tk-tooltip>\n      @if(tab.badge){\n      <tk-badge [value]=\"tab.badge\"></tk-badge>\n      }\n    </p-tab>\n  </p-tablist>\n\n  <p-tabpanels>\n    @for (tab of visibleTabs; track $index) {\n    <p-tabpanel [value]=\"$index\">\n      @if (!tab.lazy || activeIndex() === $index) {\n      <ng-container *ngTemplateOutlet=\"tab.content || null\"></ng-container>\n      }\n    </p-tabpanel>\n    }\n  </p-tabpanels>\n</p-tabs>\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-tabs.mjs","sources":["../../../projects/design-system/components/tabs/src/tabs.component.ts","../../../projects/design-system/components/tabs/src/tabs.component.html","../../../projects/design-system/components/tabs/tekus-design-system-components-tabs.ts"],"sourcesContent":["import { Component, input, output, model } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { TabsModule } from 'primeng/tabs';\nimport { TabData } from './tabs.interface';\nimport { TooltipComponent } from '@tekus/design-system/components/tooltip';\nimport { BadgeComponent } from '@tekus/design-system/components/badge';\n\n@Component({\n  selector: 'tk-tabs',\n  standalone: true,\n  imports: [TabsModule, TooltipComponent, BadgeComponent, NgTemplateOutlet],\n  templateUrl: './tabs.component.html',\n  styleUrl: './tabs.component.scss',\n})\nexport class TabsComponent {\n  /**\n   * @property {InputSignal<TabData[]>} tabs\n   * @description\n   * Array of tab configurations to display.\n   */\n  tabs = input<TabData[]>([]);\n\n  /**\n   * @property {ModelSignal<number>} activeIndex\n   * @description\n   * The index of the currently active tab. Supports two-way binding via signals.\n   * @default 0\n   */\n  activeIndex = model<number>(0);\n\n  /**\n   * @event tabChange\n   * @description\n   * Emitted when the active tab changes.\n   * Payload: object containing the tab index and tab data.\n   *\n   * @example\n   * <tk-tabs (tabChange)=\"onTabChange($event)\"></tk-tabs>\n   */\n  tabChange = output<{\n    index: number;\n    tab: TabData;\n  }>();\n\n  /**\n   * @method visibleTabs\n   * @description\n   * Returns only the tabs that are marked as visible.\n   * @returns {TabData[]} Array of visible tabs.\n   */\n  get visibleTabs(): TabData[] {\n    return this.tabs().filter(t => t.visible !== false);\n  }\n\n  /**\n   * @method onTabChange\n   * @description\n   * Handles tab change events and emits the tabChange output.\n   * @param {number} index - The index of the newly selected tab.\n   */\n  onTabChange(index: number) {\n    if (this.activeIndex() === index) return;\n\n    this.activeIndex.set(index);\n\n    if (this.visibleTabs[index]) {\n      this.tabChange.emit({\n        index,\n        tab: this.visibleTabs[index],\n      });\n    }\n  }\n}\n","<p-tabs [value]=\"activeIndex()\" (valueChange)=\"onTabChange($event !== undefined ? +$event : activeIndex())\"\n  class=\"tk-tabs\">\n  <p-tablist>\n    @for (tab of visibleTabs; track $index) {\n    <p-tab [value]=\"$index\" [disabled]=\"tab.disabled\">\n      <tk-tooltip [content]=\"tab.tooltip ?? ''\" position=\"top\">\n        <span class=\"tk-tab-label\" [style.max-width]=\"tab.badge ? '6rem' : '9rem'\">\n          {{ tab.label }}\n        </span>\n      </tk-tooltip>\n      @if(tab.badge){\n      <tk-badge [value]=\"tab.badge\"></tk-badge>\n      }\n    </p-tab>\n    }\n  </p-tablist>\n\n  <p-tabpanels>\n    @for (tab of visibleTabs; track $index) {\n    <p-tabpanel [value]=\"$index\">\n      @if (!tab.lazy || activeIndex() === $index) {\n      <ng-container *ngTemplateOutlet=\"tab.content || null\"></ng-container>\n      }\n    </p-tabpanel>\n    }\n  </p-tabpanels>\n</p-tabs>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;MAca,aAAa,CAAA;AAP1B,IAAA,WAAA,GAAA;AAQE;;;;AAIG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAY,EAAE,2EAAC;AAE3B;;;;;AAKG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAS,CAAC,kFAAC;AAE9B;;;;;;;;AAQG;QACH,IAAA,CAAA,SAAS,GAAG,MAAM,EAGd;AA8BL,IAAA;AA5BC;;;;;AAKG;AACH,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,KAAK,CAAC;IACrD;AAEA;;;;;AAKG;AACH,IAAA,WAAW,CAAC,KAAa,EAAA;AACvB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,KAAK;YAAE;AAElC,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;AAE3B,QAAA,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE;AAC3B,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,KAAK;AACL,gBAAA,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,aAAA,CAAC;QACJ;IACF;8GAzDW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECd1B,m4BA0BS,EAAA,MAAA,EAAA,CAAA,ooBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDhBG,UAAU,ujBAAE,gBAAgB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,cAAc,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAI7D,aAAa,EAAA,UAAA,EAAA,CAAA;kBAPzB,SAAS;+BACE,SAAS,EAAA,UAAA,EACP,IAAI,EAAA,OAAA,EACP,CAAC,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,m4BAAA,EAAA,MAAA,EAAA,CAAA,ooBAAA,CAAA,EAAA;;;AEV3E;;AAEG;;;;"}

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

@@ -23,32 +23,24 @@ import { TagModule } from 'primeng/tag';
 class TagComponent {
     constructor() {
         /** The text content to be displayed in the tag. */
-        this.value = input.required();
+        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /**
          * The severity level of the tag, which determines its color and styling.
          * @default 'secondary'
          */
-        this.severity = input('secondary');
+        this.severity = input('secondary', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
         /**
          * Maximum number of characters to display before truncation.
          */
-        this.truncationLimit = input();
+        this.truncationLimit = input(...(ngDevMode ? [undefined, { debugName: "truncationLimit" }] : /* istanbul ignore next */ []));
         /**
          * Computed property that maps the custom `TagSeverity` to the underlying PrimeNG `severity`.
          * Returns `undefined` for 'primary' as it uses the default style, and maps others accordingly.
          */
         this.primeSeverity = computed(() => {
-            const map = {
-                primary: undefined,
-                secondary: 'secondary',
-                success: 'success',
-                info: 'info',
-                warn: 'warn',
-                danger: 'danger',
-                contrast: 'contrast',
-            };
-            return map[this.severity()];
-        });
+            const severity = this.severity();
+            return severity === 'primary' ? undefined : severity;
+        }, ...(ngDevMode ? [{ debugName: "primeSeverity" }] : /* istanbul ignore next */ []));
         /**
          * Computed property that processes the `value` for display.
          * Truncates the text with an ellipsis if it exceeds the defined limit and truncate is enabled.
@@ -61,15 +53,15 @@ class TagComponent {
                 return val.substring(0, effectiveLimit) + '...';
             }
             return val;
-        });
+        }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TagComponent, isStandalone: true, selector: "tk-tag", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, truncationLimit: { classPropertyName: "truncationLimit", publicName: "truncationLimit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-tag \n    [value]=\"displayValue()\" \n    [severity]=\"primeSeverity()\" \n    [styleClass]=\"'tk-tag-' + severity()\"\n></p-tag>", styles: [":host ::ng-deep .tk-tag-primary .p-tag-label{color:var(--tk-color-base-primary-700)!important}:host ::ng-deep .tk-tag-secondary .p-tag-label{color:var(--tk-color-base-surface-950)!important}:host ::ng-deep .tk-tag-success .p-tag-label{color:var(--tk-color-base-green-700)!important}:host ::ng-deep .tk-tag-info .p-tag-label{color:var(--tk-color-base-sky-700)!important}:host ::ng-deep .tk-tag-warn .p-tag-label{color:var(--tk-color-base-yellow-700)!important}:host ::ng-deep .tk-tag-danger .p-tag-label{color:var(--tk-color-base-red-700)!important}:host ::ng-deep .tk-tag-contrast .p-tag-label{color:var(--tk-color-base-surface-0)!important}:host ::ng-deep .tk-tag-contrast{background-color:var(--tk-color-base-surface-950)!important}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.3", type: TagComponent, isStandalone: true, selector: "tk-tag", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, truncationLimit: { classPropertyName: "truncationLimit", publicName: "truncationLimit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-tag \n    [value]=\"displayValue()\" \n    [severity]=\"primeSeverity()\" \n    [styleClass]=\"'tk-tag-' + severity()\"\n></p-tag>", styles: [":host ::ng-deep .tk-tag-primary .p-tag-label{color:var(--tk-color-base-primary-700)!important}:host ::ng-deep .tk-tag-secondary .p-tag-label{color:var(--tk-color-base-surface-950)!important}:host ::ng-deep .tk-tag-success .p-tag-label{color:var(--tk-color-base-green-700)!important}:host ::ng-deep .tk-tag-info .p-tag-label{color:var(--tk-color-base-sky-700)!important}:host ::ng-deep .tk-tag-warn .p-tag-label{color:var(--tk-color-base-yellow-700)!important}:host ::ng-deep .tk-tag-danger .p-tag-label{color:var(--tk-color-base-red-700)!important}:host ::ng-deep .tk-tag-contrast .p-tag-label{color:var(--tk-color-base-surface-0)!important}:host ::ng-deep .tk-tag-contrast{background-color:var(--tk-color-base-surface-950)!important}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tk-tag', imports: [TagModule], template: "<p-tag \n    [value]=\"displayValue()\" \n    [severity]=\"primeSeverity()\" \n    [styleClass]=\"'tk-tag-' + severity()\"\n></p-tag>", styles: [":host ::ng-deep .tk-tag-primary .p-tag-label{color:var(--tk-color-base-primary-700)!important}:host ::ng-deep .tk-tag-secondary .p-tag-label{color:var(--tk-color-base-surface-950)!important}:host ::ng-deep .tk-tag-success .p-tag-label{color:var(--tk-color-base-green-700)!important}:host ::ng-deep .tk-tag-info .p-tag-label{color:var(--tk-color-base-sky-700)!important}:host ::ng-deep .tk-tag-warn .p-tag-label{color:var(--tk-color-base-yellow-700)!important}:host ::ng-deep .tk-tag-danger .p-tag-label{color:var(--tk-color-base-red-700)!important}:host ::ng-deep .tk-tag-contrast .p-tag-label{color:var(--tk-color-base-surface-0)!important}:host ::ng-deep .tk-tag-contrast{background-color:var(--tk-color-base-surface-950)!important}\n"] }]
-        }] });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], truncationLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncationLimit", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-tag.mjs","sources":["../../../projects/design-system/components/tag/src/tag.component.ts","../../../projects/design-system/components/tag/src/tag.component.html","../../../projects/design-system/components/tag/tekus-design-system-components-tag.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\nimport { TagModule } from 'primeng/tag';\n\nexport type TagSeverity =\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warn'\n  | 'danger'\n  | 'contrast';\n\n/**\n * @component TagComponent\n * @description\n * A component used to categorize or label content using keywords.\n * It wraps PrimeNG's `p-tag` component with custom styling and behavior.\n *\n * This component supports:\n * - `value`: The text to display. Truncates automatically if it exceeds 15 characters.\n * - `severity`: The color scheme of the tag. Options: `'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast'`.\n * - Rounded corners by default.\n *\n * @usage\n * ### Basic Usage\n * ```html\n * <tk-tag value=\"New\" severity=\"success\"></tk-tag>\n * ```\n */\n@Component({\n  selector: 'tk-tag',\n  imports: [TagModule],\n  templateUrl: './tag.component.html',\n  styleUrl: './tag.component.scss',\n})\nexport class TagComponent {\n  /** The text content to be displayed in the tag. */\n  value = input.required<string>();\n\n  /**\n   * The severity level of the tag, which determines its color and styling.\n   * @default 'secondary'\n   */\n  severity = input<TagSeverity>('secondary');\n\n  /**\n   * Maximum number of characters to display before truncation.\n   */\n  truncationLimit = input<number>();\n\n  /**\n   * Computed property that maps the custom `TagSeverity` to the underlying PrimeNG `severity`.\n   * Returns `undefined` for 'primary' as it uses the default style, and maps others accordingly.\n   */\n  primeSeverity = computed(() => {\n    const map: Record<string, string | undefined> = {\n      primary: undefined,\n      secondary: 'secondary',\n      success: 'success',\n      info: 'info',\n      warn: 'warn',\n      danger: 'danger',\n      contrast: 'contrast',\n    };\n    return map[this.severity()];\n  });\n\n  /**\n   * Computed property that processes the `value` for display.\n   * Truncates the text with an ellipsis if it exceeds the defined limit and truncate is enabled.\n   */\n  displayValue = computed(() => {\n    const val = this.value();\n    const limit = this.truncationLimit();\n    if (limit && val && val.length > limit) {\n      const effectiveLimit = Math.max(0, limit);\n      return val.substring(0, effectiveLimit) + '...';\n    }\n    return val;\n  });\n}\n","<p-tag \n    [value]=\"displayValue()\" \n    [severity]=\"primeSeverity()\" \n    [styleClass]=\"'tk-tag-' + severity()\"\n></p-tag>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAYA;;;;;;;;;;;;;;;;AAgBG;MAOU,YAAY,CAAA;AANzB,IAAA,WAAA,GAAA;;AAQE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAU;AAEhC;;;AAGG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAc,WAAW,CAAC;AAE1C;;AAEG;QACH,IAAe,CAAA,eAAA,GAAG,KAAK,EAAU;AAEjC;;;AAGG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC5B,YAAA,MAAM,GAAG,GAAuC;AAC9C,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,SAAS,EAAE,WAAW;AACtB,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,MAAM,EAAE,QAAQ;AAChB,gBAAA,QAAQ,EAAE,UAAU;aACrB;AACD,YAAA,OAAO,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC7B,SAAC,CAAC;AAEF;;;AAGG;AACH,QAAA,IAAA,CAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AAC3B,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE;AACxB,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE;YACpC,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,CAAC,MAAM,GAAG,KAAK,EAAE;gBACtC,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC;gBACzC,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,cAAc,CAAC,GAAG,KAAK;;AAEjD,YAAA,OAAO,GAAG;AACZ,SAAC,CAAC;AACH;+GA7CY,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnCzB,uIAIS,EAAA,MAAA,EAAA,CAAA,kuBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED2BG,SAAS,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,GAAA,EAAA,QAAA,EAAA,OAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,YAAA,EAAA,UAAA,EAAA,OAAA,EAAA,MAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAIR,YAAY,EAAA,UAAA,EAAA,CAAA;kBANxB,SAAS;+BACE,QAAQ,EAAA,OAAA,EACT,CAAC,SAAS,CAAC,EAAA,QAAA,EAAA,uIAAA,EAAA,MAAA,EAAA,CAAA,kuBAAA,CAAA,EAAA;;;AE/BtB;;AAEG;;;;"}
+{"version":3,"file":"tekus-design-system-components-tag.mjs","sources":["../../../projects/design-system/components/tag/src/tag.component.ts","../../../projects/design-system/components/tag/src/tag.component.html","../../../projects/design-system/components/tag/tekus-design-system-components-tag.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\nimport { TagModule } from 'primeng/tag';\n\nexport type TagSeverity =\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'info'\n  | 'warn'\n  | 'danger'\n  | 'contrast';\n\n/**\n * @component TagComponent\n * @description\n * A component used to categorize or label content using keywords.\n * It wraps PrimeNG's `p-tag` component with custom styling and behavior.\n *\n * This component supports:\n * - `value`: The text to display. Truncates automatically if it exceeds 15 characters.\n * - `severity`: The color scheme of the tag. Options: `'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast'`.\n * - Rounded corners by default.\n *\n * @usage\n * ### Basic Usage\n * ```html\n * <tk-tag value=\"New\" severity=\"success\"></tk-tag>\n * ```\n */\n@Component({\n  selector: 'tk-tag',\n  imports: [TagModule],\n  templateUrl: './tag.component.html',\n  styleUrl: './tag.component.scss',\n})\nexport class TagComponent {\n  /** The text content to be displayed in the tag. */\n  value = input.required<string>();\n\n  /**\n   * The severity level of the tag, which determines its color and styling.\n   * @default 'secondary'\n   */\n  severity = input<TagSeverity>('secondary');\n\n  /**\n   * Maximum number of characters to display before truncation.\n   */\n  truncationLimit = input<number>();\n\n  /**\n   * Computed property that maps the custom `TagSeverity` to the underlying PrimeNG `severity`.\n   * Returns `undefined` for 'primary' as it uses the default style, and maps others accordingly.\n   */\n  primeSeverity = computed<Exclude<TagSeverity, 'primary'> | undefined>(() => {\n    const severity = this.severity();\n    return severity === 'primary' ? undefined : severity;\n  });\n\n  /**\n   * Computed property that processes the `value` for display.\n   * Truncates the text with an ellipsis if it exceeds the defined limit and truncate is enabled.\n   */\n  displayValue = computed(() => {\n    const val = this.value();\n    const limit = this.truncationLimit();\n    if (limit && val && val.length > limit) {\n      const effectiveLimit = Math.max(0, limit);\n      return val.substring(0, effectiveLimit) + '...';\n    }\n    return val;\n  });\n}\n","<p-tag \n    [value]=\"displayValue()\" \n    [severity]=\"primeSeverity()\" \n    [styleClass]=\"'tk-tag-' + severity()\"\n></p-tag>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAYA;;;;;;;;;;;;;;;;AAgBG;MAOU,YAAY,CAAA;AANzB,IAAA,WAAA,GAAA;;AAQE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAEhC;;;AAGG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAc,WAAW,+EAAC;AAE1C;;AAEG;QACH,IAAA,CAAA,eAAe,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAEjC;;;AAGG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAA8C,MAAK;AACzE,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE;YAChC,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,GAAG,QAAQ;AACtD,QAAA,CAAC,oFAAC;AAEF;;;AAGG;AACH,QAAA,IAAA,CAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AAC3B,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE;AACxB,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE;YACpC,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,CAAC,MAAM,GAAG,KAAK,EAAE;gBACtC,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC;gBACzC,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,cAAc,CAAC,GAAG,KAAK;YACjD;AACA,YAAA,OAAO,GAAG;AACZ,QAAA,CAAC,mFAAC;AACH,IAAA;8GArCY,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnCzB,uIAIS,EAAA,MAAA,EAAA,CAAA,kuBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED2BG,SAAS,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,GAAA,EAAA,QAAA,EAAA,OAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,UAAA,EAAA,OAAA,EAAA,MAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIR,YAAY,EAAA,UAAA,EAAA,CAAA;kBANxB,SAAS;+BACE,QAAQ,EAAA,OAAA,EACT,CAAC,SAAS,CAAC,EAAA,QAAA,EAAA,uIAAA,EAAA,MAAA,EAAA,CAAA,kuBAAA,CAAA,EAAA;;;AE/BtB;;AAEG;;;;"}