npm - @lifecorner/angular-ui-kit - Versions diffs - 3.26.0 → 3.27.1 - Mend

@lifecorner/angular-ui-kit 3.26.0 → 3.27.1

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

Files changed (66) hide show

package/fesm2022/lifecorner-angular-ui-kit-select.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lifecorner-angular-ui-kit-select.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/select/select.component.ts","../../../../libs/angular-ui-kit/src/lib/select/select.component.html"],"sourcesContent":["import {\n Component,\n input,\n output,\n signal,\n computed,\n linkedSignal,\n ChangeDetectionStrategy,\n forwardRef,\n ElementRef,\n viewChild,\n inject,\n DOCUMENT,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';\nimport { OverlayModule } from '@angular/cdk/overlay';\n\nexport interface SelectOption {\n value: string \| number;\n label: string;\n disabled?: boolean;\n}\n\nexport interface SelectOptionGroup {\n label: string;\n options: SelectOption[];\n}\n\nexport type SelectValue = string \| number \| string[] \| number[] \| null;\n\n/*\n Select component for dropdown option selection.\n \n Features:\n * - Single and multiple selection modes\n * - Searchable/filterable option list\n * - Option groups with headers\n * - Loading state indicator\n * - Variant styles (outline, filled)\n * - Size presets (xs, sm, md, lg)\n * - Keyboard navigation support\n * - CDK overlay positioning\n * - ControlValueAccessor integration for reactive forms\n \n @example\n * ```html\n * <lc-select [options]=\"options\" placeholder=\"Choose\" [(ngModel)]=\"selected\" />\n * ```\n /\n@Component({\n selector: 'lc-select',\n standalone: true,\n imports: [FormsModule, OverlayModule],\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SelectComponent),\n multi: true,\n },\n ],\n})\nexport class SelectComponent implements ControlValueAccessor {\n private static nextId = 0;\n\n /* Per-instance id base; the listbox and its options derive their ids from it. /\n readonly selectId = `lc-select-${++SelectComponent.nextId}`;\n readonly listboxId = `${this.selectId}-listbox`;\n\n private readonly selectTrigger = viewChild<ElementRef<HTMLElement>>('selectTrigger');\n private readonly dropdownPanel = viewChild<ElementRef<HTMLElement>>('dropdownPanel');\n\n /\n Visual variant of the select\n /\n readonly variant = input<'outline' \| 'filled'>('outline');\n\n /\n Size of the select\n /\n readonly size = input<'xs' \| 'sm' \| 'md' \| 'lg'>('md');\n\n /\n Whether the select is disabled\n /\n readonly disabled = input<boolean>(false);\n\n /\n Whether the select is in error state\n /\n readonly error = input<boolean>(false);\n\n /\n Whether the select is required\n /\n readonly required = input<boolean>(false);\n\n /\n Whether the select is in loading state\n /\n readonly loading = input<boolean>(false);\n\n /\n Whether the select allows searching\n /\n readonly searchable = input<boolean>(false);\n\n /\n Whether multiple options can be selected\n /\n readonly multiple = input<boolean>(false);\n\n /\n Placeholder text when no option is selected\n /\n readonly placeholder = input<string>('Select an option');\n\n /\n Helper text displayed below the select\n /\n readonly helperText = input<string>('');\n\n /\n Error message displayed when error is true\n /\n readonly errorMessage = input<string>('');\n\n /\n ARIA label for accessibility\n /\n readonly ariaLabel = input<string \| undefined>(undefined);\n\n /\n Select options (flat list or groups)\n /\n readonly options = input<SelectOption[] \| SelectOptionGroup[]>([]);\n\n /* Accessible name of the clear button. /\n readonly clearAriaLabel = input('Clear selection');\n\n /* Placeholder of the search field (`searchable`). /\n readonly searchPlaceholder = input('Search...');\n\n /* Accessible name of the search field. Empty: \"Search \" + `ariaLabel`, or \"Search options\". /\n readonly searchAriaLabel = input('');\n\n /* Shown when the search matches no option. /\n readonly noOptionsLabel = input('No options found');\n\n /\n Emitted when selection changes\n /\n readonly selectionChange = output<SelectValue>();\n\n /\n Emitted when dropdown opens\n /\n readonly opened = output<void>();\n\n /\n Emitted when dropdown closes\n /\n readonly closed = output<void>();\n\n // Internal state\n readonly value = signal<SelectValue>(null);\n readonly isOpen = signal<boolean>(false);\n readonly searchQuery = signal<string>('');\n\n /* Disabled state pushed in by the forms API (setDisabledState). /\n private readonly formDisabled = signal<boolean>(false);\n\n /* Effective disabled state: the `disabled` input OR the form control's disabled state. /\n readonly isDisabled = computed(() => this.disabled() \|\| this.formDisabled());\n\n // Computed values\n readonly filteredOptions = computed(() => {\n const query = this.searchQuery().toLowerCase();\n const opts = this.options();\n\n if (!query \|\| !this.searchable()) {\n return this.flattenOptions(opts);\n }\n\n return this.flattenOptions(opts).filter((opt) => opt.label.toLowerCase().includes(query));\n });\n\n /* Keyboard highlight; resets whenever the visible option list changes so it never points at a stale row. /\n readonly highlightedIndex = linkedSignal<SelectOption[], number>({\n source: this.filteredOptions,\n computation: () => -1,\n });\n\n readonly activeDescendantId = computed(() => {\n const index = this.highlightedIndex();\n return this.isOpen() && index >= 0 ? this.optionId(index) : null;\n });\n\n readonly selectedLabel = computed(() => {\n const currentValue = this.value();\n const opts = this.options();\n\n if (currentValue === null) {\n return '';\n }\n\n if (this.multiple()) {\n const values = Array.isArray(currentValue) ? currentValue : [currentValue];\n return values\n .map((val) => this.findOptionByValue(val, opts)?.label)\n .filter(Boolean)\n .join(', ');\n }\n\n const val = Array.isArray(currentValue) ? currentValue[0] : currentValue;\n return this.findOptionByValue(val ?? '', opts)?.label \|\| '';\n });\n\n readonly displayValue = computed(() => {\n const label = this.selectedLabel();\n if (label) {\n const currentValue = this.value();\n if (this.multiple() && Array.isArray(currentValue)) {\n const count = currentValue.length;\n return count > 1 ? `${count} selected` : label;\n }\n return label;\n }\n return this.placeholder();\n });\n\n /* id of the helper/error text the trigger is described by (aria-describedby) /\n readonly describedBy = computed(() => {\n if (this.error() && this.errorMessage()) {\n return `${this.selectId}-error`;\n }\n return this.helperText() ? `${this.selectId}-helper` : null;\n });\n\n /\n Computed classes for the select trigger element\n /\n readonly selectClasses = computed(() => {\n const classes = ['lc-select', `lc-select--${this.variant()}`, `lc-select--${this.size()}`];\n\n if (this.isDisabled()) {\n classes.push('lc-select--disabled');\n }\n\n if (this.error()) {\n classes.push('lc-select--error');\n }\n\n if (this.loading()) {\n classes.push('lc-select--loading');\n }\n\n if (this.isOpen()) {\n classes.push('lc-select--open');\n }\n\n return classes.join(' ');\n });\n\n // Private properties\n private readonly document = inject(DOCUMENT);\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: (value: SelectValue) => void = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouched: () => void = () => {};\n\n // Public methods\n /\n Id of the option at `index` in the filtered list (used for aria-activedescendant)\n /\n optionId(index: number): string {\n return `${this.selectId}-option-${index}`;\n }\n\n /\n Toggle dropdown open/closed\n /\n toggle(): void {\n if (this.isDisabled() \|\| this.loading()) {\n return;\n }\n if (this.isOpen()) {\n this.close();\n } else {\n this.open();\n }\n }\n\n /\n Open dropdown\n /\n open(): void {\n if (this.isDisabled() \|\| this.loading() \|\| this.isOpen()) {\n return;\n }\n this.isOpen.set(true);\n this.opened.emit();\n }\n\n /\n Close dropdown. Idempotent: the overlay's `detach` re-enters here after\n * `isOpen` flips, and that second call must not emit `closed` again.\n /\n close(): void {\n if (!this.isOpen()) {\n return;\n }\n // If focus is inside the panel (search input) it would fall to <body> when the\n // overlay is torn down; hand it back to the trigger first.\n this.restoreFocusFromPanel();\n this.isOpen.set(false);\n this.searchQuery.set('');\n this.highlightedIndex.set(-1);\n this.closed.emit();\n }\n\n /\n Select an option\n /\n selectOption(option: SelectOption): void {\n if (option.disabled) {\n return;\n }\n\n if (this.multiple()) {\n const currentValue = this.value() \|\| [];\n const currentArray = (Array.isArray(currentValue) ? currentValue : []) as (string \| number)[];\n const index = currentArray.indexOf(option.value);\n\n const newValue = (\n index > -1\n ? currentArray.filter((v) => v !== option.value) // Deselect\n : [...currentArray, option.value] // Select\n ) as SelectValue;\n this.value.set(newValue);\n this.onChange(newValue);\n this.selectionChange.emit(newValue);\n } else {\n this.value.set(option.value);\n this.onChange(option.value);\n this.selectionChange.emit(option.value);\n this.close();\n }\n }\n\n /\n Check if an option is selected\n /\n isSelected(option: SelectOption): boolean {\n const currentValue = this.value();\n if (this.multiple()) {\n const values = Array.isArray(currentValue) ? currentValue : [];\n return values.some((v) => v === option.value);\n }\n return currentValue === option.value;\n }\n\n /\n Clear selection\n /\n clear(): void {\n if (this.multiple()) {\n this.value.set([]);\n this.onChange([]);\n } else {\n this.value.set(null);\n this.onChange(null);\n }\n this.selectionChange.emit(this.value());\n }\n\n /\n Handle keyboard navigation (trigger and search input share this handler)\n /\n onKeyDown(event: KeyboardEvent): void {\n if (this.isDisabled() \|\| this.loading()) {\n return;\n }\n\n switch (event.key) {\n case ' ':\n case 'Enter':\n // Space must keep typing into the search box.\n if (event.key === ' ' && this.isSearchInput(event.target)) {\n return;\n }\n if (!this.isOpen()) {\n this.open();\n } else {\n const option = this.filteredOptions()[this.highlightedIndex()];\n if (option) {\n this.selectOption(option);\n }\n }\n event.preventDefault();\n break;\n\n case 'Escape':\n if (this.isOpen()) {\n this.close();\n event.preventDefault();\n // Only this select should react; keep the key from reaching enclosing overlays.\n event.stopPropagation();\n }\n break;\n\n case 'ArrowDown':\n if (!this.isOpen()) {\n this.open();\n } else {\n const count = this.filteredOptions().length;\n if (count > 0) {\n this.highlightedIndex.set((this.highlightedIndex() + 1) % count);\n }\n }\n event.preventDefault();\n break;\n\n case 'ArrowUp':\n if (!this.isOpen()) {\n this.open();\n } else {\n const count = this.filteredOptions().length;\n if (count > 0) {\n const current = this.highlightedIndex();\n this.highlightedIndex.set(current <= 0 ? count - 1 : current - 1);\n }\n }\n event.preventDefault();\n break;\n\n case 'Home':\n if (this.isOpen() && this.filteredOptions().length > 0) {\n this.highlightedIndex.set(0);\n event.preventDefault();\n }\n break;\n\n case 'End':\n if (this.isOpen() && this.filteredOptions().length > 0) {\n this.highlightedIndex.set(this.filteredOptions().length - 1);\n event.preventDefault();\n }\n break;\n }\n }\n\n /\n Handle blur event\n /\n onBlur(): void {\n this.onTouched();\n }\n\n /\n Handle click outside\n */\n onClickOutside(): void {\n this.close();\n }\n\n // ControlValueAccessor implementation\n writeValue(value: SelectValue): void {\n this.value.set(value);\n }\n\n registerOnChange(fn: (value: SelectValue) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.formDisabled.set(isDisabled);\n }\n\n // Private helper methods\n private isSearchInput(target: EventTarget \| null): boolean {\n return target instanceof HTMLInputElement;\n }\n\n private restoreFocusFromPanel(): void {\n const panel = this.dropdownPanel()?.nativeElement;\n const active = this.document.activeElement;\n if (panel && active && panel.contains(active)) {\n this.selectTrigger()?.nativeElement.focus();\n }\n }\n\n private findOptionByValue(\n value: string \| number,\n options: SelectOption[] \| SelectOptionGroup[],\n ): SelectOption \| undefined {\n const flatOptions = this.flattenOptions(options);\n return flatOptions.find((opt) => opt.value === value);\n }\n\n private flattenOptions(options: SelectOption[] \| SelectOptionGroup[]): SelectOption[] {\n if (!options \|\| options.length === 0) {\n return [];\n }\n\n // Check if first item is a group\n const firstItem = options[0];\n if (firstItem && 'options' in firstItem) {\n return (options as SelectOptionGroup[]).flatMap((group) => group.options);\n }\n\n return options as SelectOption[];\n }\n}\n","<div class=\"lc-select-wrapper\">\n <div\n #selectTrigger\n [class]=\"selectClasses()\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-label]=\"ariaLabel() \|\| null\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n (click)=\"toggle()\"\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\"\n >\n <div class=\"lc-select__value\">\n <span [class.lc-select__placeholder]=\"!selectedLabel()\">\n {{ displayValue() }}\n </span>\n </div>\n\n <div class=\"lc-select__icons\">\n @if (loading()) {\n <svg\n class=\"lc-select__spinner\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <circle\n class=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n ></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n } @else if (value() && !isDisabled() && !multiple()) {\n <button\n type=\"button\"\n class=\"lc-select__clear\"\n (click)=\"clear(); $event.stopPropagation()\"\n [attr.aria-label]=\"clearAriaLabel()\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>\n </button>\n }\n\n <svg\n class=\"lc-select__chevron\"\n [class.lc-select__chevron--open]=\"isOpen()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </div>\n </div>\n\n <!-- Dropdown Panel -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectTrigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"onClickOutside()\"\n (detach)=\"close()\"\n >\n <div #dropdownPanel class=\"lc-select__dropdown\" [class.lc-select__dropdown--open]=\"isOpen()\">\n @if (searchable()) {\n <div class=\"lc-select__search\">\n <input\n type=\"text\"\n class=\"lc-select__search-input\"\n [placeholder]=\"searchPlaceholder()\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-label]=\"searchAriaLabel() \|\| (ariaLabel() ? 'Search ' + ariaLabel() : 'Search options')\"\n [(ngModel)]=\"searchQuery\"\n (keydown)=\"onKeyDown($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"lc-select__options\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-label]=\"ariaLabel() \|\| null\"\n [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n >\n @if (filteredOptions().length === 0) {\n <div\n class=\"lc-select__option lc-select__option--no-results\"\n role=\"option\"\n aria-disabled=\"true\"\n aria-selected=\"false\"\n >\n {{ noOptionsLabel() }}\n </div>\n } @else {\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays on the trigger/search, keyboard selection via aria-activedescendant -->\n <div\n class=\"lc-select__option\"\n role=\"option\"\n [id]=\"optionId(i)\"\n [attr.aria-selected]=\"isSelected(option) ? 'true' : 'false'\"\n [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n [class.lc-select__option--selected]=\"isSelected(option)\"\n [class.lc-select__option--highlighted]=\"highlightedIndex() === i\"\n [class.lc-select__option--disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n (mouseenter)=\"highlightedIndex.set(i)\"\n >\n @if (multiple()) {\n <!-- Purely visual: the option itself carries the selected state (role=option\n + aria-selected); the checkbox is inert so clicks land on the option. -->\n <input\n type=\"checkbox\"\n [checked]=\"isSelected(option)\"\n [disabled]=\"option.disabled\"\n class=\"lc-select__checkbox\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n />\n }\n <span class=\"lc-select__option-label\">{{ option.label }}</span>\n @if (isSelected(option) && !multiple()) {\n <svg\n class=\"lc-select__check\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n }\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Helper/Error Text -->\n @if (error() && errorMessage()) {\n <div class=\"lc-select__error\" [id]=\"selectId + '-error'\" role=\"alert\">\n {{ errorMessage() }}\n </div>\n } @else if (helperText()) {\n <div class=\"lc-select__helper\" [id]=\"selectId + '-helper'\">\n {{ helperText() }}\n </div>\n }\n</div>\n"],"mappings":"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"}
1	+ {"version":3,"file":"lifecorner-angular-ui-kit-select.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/select/select.component.ts","../../../../libs/angular-ui-kit/src/lib/select/select.component.html"],"sourcesContent":["import {\n Component,\n input,\n output,\n signal,\n computed,\n linkedSignal,\n ChangeDetectionStrategy,\n forwardRef,\n ElementRef,\n viewChild,\n inject,\n DOCUMENT,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';\nimport { OverlayModule } from '@angular/cdk/overlay';\n\nexport interface SelectOption {\n value: string \| number;\n label: string;\n disabled?: boolean;\n}\n\nexport interface SelectOptionGroup {\n label: string;\n options: SelectOption[];\n}\n\nexport type SelectValue = string \| number \| string[] \| number[] \| null;\n\n/*\n Select component for dropdown option selection.\n \n Features:\n * - Single and multiple selection modes\n * - Searchable/filterable option list\n * - Option groups with headers\n * - Loading state indicator\n * - Variant styles (outline, filled)\n * - Size presets (xs, sm, md, lg)\n * - Keyboard navigation support\n * - CDK overlay positioning\n * - ControlValueAccessor integration for reactive forms\n \n @example\n * ```html\n * <lc-select [options]=\"options\" placeholder=\"Choose\" [(ngModel)]=\"selected\" />\n * ```\n /\n@Component({\n selector: 'lc-select',\n standalone: true,\n imports: [FormsModule, OverlayModule],\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SelectComponent),\n multi: true,\n },\n ],\n})\nexport class SelectComponent implements ControlValueAccessor {\n private static nextId = 0;\n\n /* Per-instance id base; the listbox and its options derive their ids from it. /\n readonly selectId = `lc-select-${++SelectComponent.nextId}`;\n readonly listboxId = `${this.selectId}-listbox`;\n\n private readonly selectTrigger = viewChild<ElementRef<HTMLElement>>('selectTrigger');\n private readonly dropdownPanel = viewChild<ElementRef<HTMLElement>>('dropdownPanel');\n\n /\n Visual variant of the select\n /\n readonly variant = input<'outline' \| 'filled'>('outline');\n\n /\n Size of the select\n /\n readonly size = input<'xs' \| 'sm' \| 'md' \| 'lg'>('md');\n\n /\n Whether the select is disabled\n /\n readonly disabled = input<boolean>(false);\n\n /\n Whether the select is in error state\n /\n readonly error = input<boolean>(false);\n\n /\n Whether the select is required\n /\n readonly required = input<boolean>(false);\n\n /\n Whether the select is in loading state\n /\n readonly loading = input<boolean>(false);\n\n /\n Whether the select allows searching\n /\n readonly searchable = input<boolean>(false);\n\n /\n Whether multiple options can be selected\n /\n readonly multiple = input<boolean>(false);\n\n /\n Placeholder text when no option is selected\n /\n readonly placeholder = input<string>('Select an option');\n\n /\n Helper text displayed below the select\n /\n readonly helperText = input<string>('');\n\n /\n Error message displayed when error is true\n /\n readonly errorMessage = input<string>('');\n\n /\n ARIA label for accessibility\n /\n readonly ariaLabel = input<string \| undefined>(undefined);\n\n /\n Select options (flat list or groups)\n /\n readonly options = input<SelectOption[] \| SelectOptionGroup[]>([]);\n\n /* Accessible name of the clear button. /\n readonly clearAriaLabel = input('Clear selection');\n\n /* Placeholder of the search field (`searchable`). /\n readonly searchPlaceholder = input('Search...');\n\n /* Accessible name of the search field. Empty: \"Search \" + `ariaLabel`, or \"Search options\". /\n readonly searchAriaLabel = input('');\n\n /* Shown when the search matches no option. /\n readonly noOptionsLabel = input('No options found');\n\n /\n Emitted when selection changes\n /\n readonly selectionChange = output<SelectValue>();\n\n /\n Emitted when dropdown opens\n /\n readonly opened = output<void>();\n\n /\n Emitted when dropdown closes\n /\n readonly closed = output<void>();\n\n // Internal state\n readonly value = signal<SelectValue>(null);\n readonly isOpen = signal<boolean>(false);\n readonly searchQuery = signal<string>('');\n\n /* Disabled state pushed in by the forms API (setDisabledState). /\n private readonly formDisabled = signal<boolean>(false);\n\n /* Effective disabled state: the `disabled` input OR the form control's disabled state. /\n readonly isDisabled = computed(() => this.disabled() \|\| this.formDisabled());\n\n // Computed values\n readonly filteredOptions = computed(() => {\n const query = this.searchQuery().toLowerCase();\n const opts = this.options();\n\n if (!query \|\| !this.searchable()) {\n return this.flattenOptions(opts);\n }\n\n return this.flattenOptions(opts).filter((opt) => opt.label.toLowerCase().includes(query));\n });\n\n /* Keyboard highlight; resets whenever the visible option list changes so it never points at a stale row. /\n readonly highlightedIndex = linkedSignal<SelectOption[], number>({\n source: this.filteredOptions,\n computation: () => -1,\n });\n\n readonly activeDescendantId = computed(() => {\n const index = this.highlightedIndex();\n return this.isOpen() && index >= 0 ? this.optionId(index) : null;\n });\n\n readonly selectedLabel = computed(() => {\n const currentValue = this.value();\n const opts = this.options();\n\n if (currentValue === null) {\n return '';\n }\n\n if (this.multiple()) {\n const values = Array.isArray(currentValue) ? currentValue : [currentValue];\n return values\n .map((val) => this.findOptionByValue(val, opts)?.label)\n .filter(Boolean)\n .join(', ');\n }\n\n const val = Array.isArray(currentValue) ? currentValue[0] : currentValue;\n return this.findOptionByValue(val ?? '', opts)?.label \|\| '';\n });\n\n readonly displayValue = computed(() => {\n const label = this.selectedLabel();\n if (label) {\n const currentValue = this.value();\n if (this.multiple() && Array.isArray(currentValue)) {\n const count = currentValue.length;\n return count > 1 ? `${count} selected` : label;\n }\n return label;\n }\n return this.placeholder();\n });\n\n /* id of the helper/error text the trigger is described by (aria-describedby) /\n readonly describedBy = computed(() => {\n if (this.error() && this.errorMessage()) {\n return `${this.selectId}-error`;\n }\n return this.helperText() ? `${this.selectId}-helper` : null;\n });\n\n /\n Computed classes for the select trigger element\n /\n readonly selectClasses = computed(() => {\n const classes = ['lc-select', `lc-select--${this.variant()}`, `lc-select--${this.size()}`];\n\n if (this.isDisabled()) {\n classes.push('lc-select--disabled');\n }\n\n if (this.error()) {\n classes.push('lc-select--error');\n }\n\n if (this.loading()) {\n classes.push('lc-select--loading');\n }\n\n if (this.isOpen()) {\n classes.push('lc-select--open');\n }\n\n return classes.join(' ');\n });\n\n // Private properties\n private readonly document = inject(DOCUMENT);\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: (value: SelectValue) => void = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouched: () => void = () => {};\n\n // Public methods\n /\n Id of the option at `index` in the filtered list (used for aria-activedescendant)\n /\n optionId(index: number): string {\n return `${this.selectId}-option-${index}`;\n }\n\n /\n Toggle dropdown open/closed\n /\n toggle(): void {\n if (this.isDisabled() \|\| this.loading()) {\n return;\n }\n if (this.isOpen()) {\n this.close();\n } else {\n this.open();\n }\n }\n\n /\n Open dropdown\n /\n open(): void {\n if (this.isDisabled() \|\| this.loading() \|\| this.isOpen()) {\n return;\n }\n this.isOpen.set(true);\n this.opened.emit();\n }\n\n /\n Close dropdown. Idempotent: the overlay's `detach` re-enters here after\n * `isOpen` flips, and that second call must not emit `closed` again.\n /\n close(): void {\n if (!this.isOpen()) {\n return;\n }\n // If focus is inside the panel (search input) it would fall to <body> when the\n // overlay is torn down; hand it back to the trigger first.\n this.restoreFocusFromPanel();\n this.isOpen.set(false);\n this.searchQuery.set('');\n this.highlightedIndex.set(-1);\n this.closed.emit();\n }\n\n /\n Select an option\n /\n selectOption(option: SelectOption): void {\n if (option.disabled) {\n return;\n }\n\n if (this.multiple()) {\n const currentValue = this.value() \|\| [];\n const currentArray = (Array.isArray(currentValue) ? currentValue : []) as (string \| number)[];\n const index = currentArray.indexOf(option.value);\n\n const newValue = (\n index > -1\n ? currentArray.filter((v) => v !== option.value) // Deselect\n : [...currentArray, option.value] // Select\n ) as SelectValue;\n this.value.set(newValue);\n this.onChange(newValue);\n this.selectionChange.emit(newValue);\n } else {\n this.value.set(option.value);\n this.onChange(option.value);\n this.selectionChange.emit(option.value);\n this.close();\n }\n }\n\n /\n Check if an option is selected\n /\n isSelected(option: SelectOption): boolean {\n const currentValue = this.value();\n if (this.multiple()) {\n const values = Array.isArray(currentValue) ? currentValue : [];\n return values.some((v) => v === option.value);\n }\n return currentValue === option.value;\n }\n\n /\n Clear selection\n /\n clear(): void {\n if (this.multiple()) {\n this.value.set([]);\n this.onChange([]);\n } else {\n this.value.set(null);\n this.onChange(null);\n }\n this.selectionChange.emit(this.value());\n }\n\n /\n Handle keyboard navigation (trigger and search input share this handler)\n /\n onKeyDown(event: KeyboardEvent): void {\n if (this.isDisabled() \|\| this.loading()) {\n return;\n }\n\n switch (event.key) {\n case ' ':\n case 'Enter':\n // Space must keep typing into the search box.\n if (event.key === ' ' && this.isSearchInput(event.target)) {\n return;\n }\n if (!this.isOpen()) {\n this.open();\n } else {\n const option = this.filteredOptions()[this.highlightedIndex()];\n if (option) {\n this.selectOption(option);\n }\n }\n event.preventDefault();\n break;\n\n case 'Escape':\n if (this.isOpen()) {\n this.close();\n event.preventDefault();\n // Only this select should react; keep the key from reaching enclosing overlays.\n event.stopPropagation();\n }\n break;\n\n case 'ArrowDown':\n if (!this.isOpen()) {\n this.open();\n } else {\n const count = this.filteredOptions().length;\n if (count > 0) {\n this.highlightedIndex.set((this.highlightedIndex() + 1) % count);\n }\n }\n event.preventDefault();\n break;\n\n case 'ArrowUp':\n if (!this.isOpen()) {\n this.open();\n } else {\n const count = this.filteredOptions().length;\n if (count > 0) {\n const current = this.highlightedIndex();\n this.highlightedIndex.set(current <= 0 ? count - 1 : current - 1);\n }\n }\n event.preventDefault();\n break;\n\n case 'Home':\n if (this.isOpen() && this.filteredOptions().length > 0) {\n this.highlightedIndex.set(0);\n event.preventDefault();\n }\n break;\n\n case 'End':\n if (this.isOpen() && this.filteredOptions().length > 0) {\n this.highlightedIndex.set(this.filteredOptions().length - 1);\n event.preventDefault();\n }\n break;\n }\n }\n\n /\n Handle blur event\n /\n onBlur(): void {\n this.onTouched();\n }\n\n /\n Handle click outside\n */\n onClickOutside(): void {\n this.close();\n }\n\n // ControlValueAccessor implementation\n writeValue(value: SelectValue): void {\n this.value.set(value);\n }\n\n registerOnChange(fn: (value: SelectValue) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.formDisabled.set(isDisabled);\n }\n\n // Private helper methods\n private isSearchInput(target: EventTarget \| null): boolean {\n return target instanceof HTMLInputElement;\n }\n\n private restoreFocusFromPanel(): void {\n const panel = this.dropdownPanel()?.nativeElement;\n const active = this.document.activeElement;\n if (panel && active && panel.contains(active)) {\n this.selectTrigger()?.nativeElement.focus();\n }\n }\n\n private findOptionByValue(\n value: string \| number,\n options: SelectOption[] \| SelectOptionGroup[],\n ): SelectOption \| undefined {\n const flatOptions = this.flattenOptions(options);\n return flatOptions.find((opt) => opt.value === value);\n }\n\n private flattenOptions(options: SelectOption[] \| SelectOptionGroup[]): SelectOption[] {\n if (!options \|\| options.length === 0) {\n return [];\n }\n\n // Check if first item is a group\n const firstItem = options[0];\n if (firstItem && 'options' in firstItem) {\n return (options as SelectOptionGroup[]).flatMap((group) => group.options);\n }\n\n return options as SelectOption[];\n }\n}\n","<div class=\"lc-select-wrapper\">\n <div\n #selectTrigger\n [class]=\"selectClasses()\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-label]=\"ariaLabel() \|\| null\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n (click)=\"toggle()\"\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\"\n >\n <div class=\"lc-select__value\">\n <span [class.lc-select__placeholder]=\"!selectedLabel()\">\n {{ displayValue() }}\n </span>\n </div>\n\n <div class=\"lc-select__icons\">\n @if (loading()) {\n <svg\n class=\"lc-select__spinner\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <circle\n class=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n ></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n } @else if (value() && !isDisabled() && !multiple()) {\n <button\n type=\"button\"\n class=\"lc-select__clear\"\n (click)=\"clear(); $event.stopPropagation()\"\n [attr.aria-label]=\"clearAriaLabel()\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>\n </button>\n }\n\n <svg\n class=\"lc-select__chevron\"\n [class.lc-select__chevron--open]=\"isOpen()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </div>\n </div>\n\n <!-- Dropdown Panel -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectTrigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"onClickOutside()\"\n (detach)=\"close()\"\n >\n <div #dropdownPanel class=\"lc-select__dropdown\" [class.lc-select__dropdown--open]=\"isOpen()\">\n @if (searchable()) {\n <div class=\"lc-select__search\">\n <input\n type=\"text\"\n class=\"lc-select__search-input\"\n [placeholder]=\"searchPlaceholder()\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-label]=\"searchAriaLabel() \|\| (ariaLabel() ? 'Search ' + ariaLabel() : 'Search options')\"\n [(ngModel)]=\"searchQuery\"\n (keydown)=\"onKeyDown($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"lc-select__options\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-label]=\"ariaLabel() \|\| null\"\n [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n >\n @if (filteredOptions().length === 0) {\n <div\n class=\"lc-select__option lc-select__option--no-results\"\n role=\"option\"\n aria-disabled=\"true\"\n aria-selected=\"false\"\n >\n {{ noOptionsLabel() }}\n </div>\n } @else {\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays on the trigger/search, keyboard selection via aria-activedescendant -->\n <div\n class=\"lc-select__option\"\n role=\"option\"\n [id]=\"optionId(i)\"\n [attr.aria-selected]=\"isSelected(option) ? 'true' : 'false'\"\n [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n [class.lc-select__option--selected]=\"isSelected(option)\"\n [class.lc-select__option--highlighted]=\"highlightedIndex() === i\"\n [class.lc-select__option--disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n (mouseenter)=\"highlightedIndex.set(i)\"\n >\n @if (multiple()) {\n <!-- Purely visual: the option itself carries the selected state (role=option\n + aria-selected); the checkbox is inert so clicks land on the option. -->\n <input\n type=\"checkbox\"\n [checked]=\"isSelected(option)\"\n [disabled]=\"option.disabled\"\n class=\"lc-select__checkbox\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n />\n }\n <span class=\"lc-select__option-label\">{{ option.label }}</span>\n @if (isSelected(option) && !multiple()) {\n <svg\n class=\"lc-select__check\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n }\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Helper/Error Text -->\n @if (error() && errorMessage()) {\n <div class=\"lc-select__error\" [id]=\"selectId + '-error'\" role=\"alert\">\n {{ errorMessage() }}\n </div>\n } @else if (helperText()) {\n <div class=\"lc-select__helper\" [id]=\"selectId + '-helper'\">\n {{ helperText() }}\n </div>\n }\n</div>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-split-pane.mjs CHANGED Viewed

@@ -210,7 +210,7 @@ var SplitPaneComponent = class SplitPaneComponent {
 		outputs: { sizeChange: "sizeChange" },
 		ngImport: i0,
 		template: "<div class=\"lc-split-pane\" [class.lc-split-pane--stacked]=\"stacked()\">\n  <div\n    class=\"lc-split-pane__pane lc-split-pane__pane--start\"\n    [style.flex-basis.px]=\"stacked() ? null : effectiveSize()\"\n  >\n    <ng-content select=\"[slot=start]\" />\n  </div>\n\n  @if (!stacked()) {\n    <div\n      class=\"lc-split-pane__separator\"\n      role=\"separator\"\n      tabindex=\"0\"\n      aria-orientation=\"vertical\"\n      [attr.aria-label]=\"separatorLabel()\"\n      [attr.aria-valuenow]=\"effectiveSize()\"\n      [attr.aria-valuemin]=\"minSize()\"\n      [attr.aria-valuemax]=\"ariaMax()\"\n      (pointerdown)=\"onPointerDown($event)\"\n      (pointermove)=\"onPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerUp($event)\"\n      (dblclick)=\"reset()\"\n      (keydown)=\"onKeydown($event)\"\n    ></div>\n  }\n\n  <div class=\"lc-split-pane__pane lc-split-pane__pane--end\">\n    <ng-content select=\"[slot=end]\" />\n  </div>\n</div>\n",
-		styles: [":host{display:block;height:100%;min-height:0}.lc-split-pane{display:flex;align-items:stretch;width:100%;height:100%;min-height:0}.lc-split-pane__pane{min-width:0;min-height:0;overflow:hidden}.lc-split-pane__pane--start{flex:0 0 auto}.lc-split-pane__pane--end{flex:1 1 auto}.lc-split-pane__separator{flex:0 0 auto;width:8px;cursor:col-resize;touch-action:none;position:relative;background:transparent;outline:none}.lc-split-pane__separator:before{content:\"\";position:absolute;inset-block:0;left:50%;width:1px;transform:translate(-50%);background:var(--color-border);transition:background-color .15s ease,width .15s ease}.lc-split-pane__separator:hover:before,.lc-split-pane__separator:active:before{width:3px;background:var(--color-primary-500)}.lc-split-pane__separator:focus-visible:before{width:3px;background:var(--color-primary-500)}.lc-split-pane--stacked{flex-direction:column}.lc-split-pane--stacked .lc-split-pane__pane--start{flex:0 0 auto}\n"],
+		styles: [":host{display:block;height:100%;min-height:0}.lc-split-pane{display:flex;align-items:stretch;width:100%;height:100%;min-height:0}.lc-split-pane__pane{min-width:0;min-height:0;overflow:hidden}.lc-split-pane__pane--start{flex:0 0 auto}.lc-split-pane__pane--end{flex:1 1 auto}.lc-split-pane__separator{flex:0 0 auto;width:8px;cursor:col-resize;touch-action:none;position:relative;background:transparent;outline:none}.lc-split-pane__separator:before{content:\"\";position:absolute;inset-block:0;left:50%;width:1px;transform:translate(-50%);background:var(--color-border);transition:background-color .15s ease,width .15s ease}.lc-split-pane__separator:hover:before,.lc-split-pane__separator:active:before{width:3px;background:var(--color-primary-500)}.lc-split-pane__separator:focus-visible:before{width:3px;background:var(--color-primary-500)}.lc-split-pane--stacked{flex-direction:column}.lc-split-pane--stacked .lc-split-pane__pane--start{flex:0 0 auto}@media(forced-colors:active){.lc-split-pane__separator:focus-visible{outline:2px solid Highlight;outline-offset:-2px}}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -226,7 +226,7 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<div class=\"lc-split-pane\" [class.lc-split-pane--stacked]=\"stacked()\">\n  <div\n    class=\"lc-split-pane__pane lc-split-pane__pane--start\"\n    [style.flex-basis.px]=\"stacked() ? null : effectiveSize()\"\n  >\n    <ng-content select=\"[slot=start]\" />\n  </div>\n\n  @if (!stacked()) {\n    <div\n      class=\"lc-split-pane__separator\"\n      role=\"separator\"\n      tabindex=\"0\"\n      aria-orientation=\"vertical\"\n      [attr.aria-label]=\"separatorLabel()\"\n      [attr.aria-valuenow]=\"effectiveSize()\"\n      [attr.aria-valuemin]=\"minSize()\"\n      [attr.aria-valuemax]=\"ariaMax()\"\n      (pointerdown)=\"onPointerDown($event)\"\n      (pointermove)=\"onPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerUp($event)\"\n      (dblclick)=\"reset()\"\n      (keydown)=\"onKeydown($event)\"\n    ></div>\n  }\n\n  <div class=\"lc-split-pane__pane lc-split-pane__pane--end\">\n    <ng-content select=\"[slot=end]\" />\n  </div>\n</div>\n",
-			styles: [":host{display:block;height:100%;min-height:0}.lc-split-pane{display:flex;align-items:stretch;width:100%;height:100%;min-height:0}.lc-split-pane__pane{min-width:0;min-height:0;overflow:hidden}.lc-split-pane__pane--start{flex:0 0 auto}.lc-split-pane__pane--end{flex:1 1 auto}.lc-split-pane__separator{flex:0 0 auto;width:8px;cursor:col-resize;touch-action:none;position:relative;background:transparent;outline:none}.lc-split-pane__separator:before{content:\"\";position:absolute;inset-block:0;left:50%;width:1px;transform:translate(-50%);background:var(--color-border);transition:background-color .15s ease,width .15s ease}.lc-split-pane__separator:hover:before,.lc-split-pane__separator:active:before{width:3px;background:var(--color-primary-500)}.lc-split-pane__separator:focus-visible:before{width:3px;background:var(--color-primary-500)}.lc-split-pane--stacked{flex-direction:column}.lc-split-pane--stacked .lc-split-pane__pane--start{flex:0 0 auto}\n"]
+			styles: [":host{display:block;height:100%;min-height:0}.lc-split-pane{display:flex;align-items:stretch;width:100%;height:100%;min-height:0}.lc-split-pane__pane{min-width:0;min-height:0;overflow:hidden}.lc-split-pane__pane--start{flex:0 0 auto}.lc-split-pane__pane--end{flex:1 1 auto}.lc-split-pane__separator{flex:0 0 auto;width:8px;cursor:col-resize;touch-action:none;position:relative;background:transparent;outline:none}.lc-split-pane__separator:before{content:\"\";position:absolute;inset-block:0;left:50%;width:1px;transform:translate(-50%);background:var(--color-border);transition:background-color .15s ease,width .15s ease}.lc-split-pane__separator:hover:before,.lc-split-pane__separator:active:before{width:3px;background:var(--color-primary-500)}.lc-split-pane__separator:focus-visible:before{width:3px;background:var(--color-primary-500)}.lc-split-pane--stacked{flex-direction:column}.lc-split-pane--stacked .lc-split-pane__pane--start{flex:0 0 auto}@media(forced-colors:active){.lc-split-pane__separator:focus-visible{outline:2px solid Highlight;outline-offset:-2px}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],

package/fesm2022/lifecorner-angular-ui-kit-split-pane.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lifecorner-angular-ui-kit-split-pane.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/split-pane/split-pane.component.ts","../../../../libs/angular-ui-kit/src/lib/split-pane/split-pane.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ElementRef,\n OnInit,\n computed,\n effect,\n inject,\n input,\n output,\n signal,\n} from '@angular/core';\n\n/*\n Resizable two-pane layout container.\n \n Projects two panes (`slot=\"start\"`, `slot=\"end\"`) side by side with a\n * draggable separator in between. The start pane has a fixed, user-adjustable\n * width; the end pane fills the remaining space.\n \n Features:\n * - Drag the separator with mouse / touch (pointer capture), bounded by\n * `minSize` / `maxSize` (px or percentage of the container)\n * - Double-click the separator to restore `initialSize`\n * - Keyboard resizing: focusable separator, ←/→ adjust by `step`,\n * Home/End jump to min/max (`role=\"separator\"`, `aria-valuenow`)\n * - Optional persistence: with `storageKey`, the width survives a reload\n * - Below the `stackBelow` viewport breakpoint the panes stack vertically\n * and the resizer is disabled\n \n @example\n * ```html\n * <lc-split-pane\n * [initialSize]=\"360\"\n * [minSize]=\"280\"\n * [maxSize]=\"'55%'\"\n * storageKey=\"sidebar-width\"\n * (sizeChange)=\"onWidthChange($event)\"\n * >\n * <div slot=\"start\">…</div>\n * <div slot=\"end\">…</div>\n * </lc-split-pane>\n * ```\n /\n@Component({\n selector: 'lc-split-pane',\n standalone: true,\n templateUrl: './split-pane.component.html',\n styleUrl: './split-pane.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SplitPaneComponent implements OnInit {\n /* Initial width of the start pane in px. Restored on separator double-click. /\n readonly initialSize = input<number>(320);\n\n /* Minimum width of the start pane in px. /\n readonly minSize = input<number>(0);\n\n /\n Maximum width of the start pane: a number (px) or a percentage string\n * such as `'55%'` (relative to the container width). `null` = no limit\n * beyond the container itself.\n /\n readonly maxSize = input<number \| string \| null>(null);\n\n /\n When set, the current width is persisted to localStorage under this key\n * and restored on the next init.\n /\n readonly storageKey = input<string>();\n\n /* Step in px for keyboard resizing (←/→ on the focused separator). /\n readonly step = input<number>(16);\n\n /\n Viewport width in px below which the panes stack vertically and the\n * resizer is disabled. `0` disables stacking.\n /\n readonly stackBelow = input<number>(0);\n\n /* Accessible label for the separator. /\n readonly separatorLabel = input('Resize panel');\n\n /* Emitted whenever the start-pane width changes (drag, keyboard, reset). /\n readonly sizeChange = output<number>();\n\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly destroyRef = inject(DestroyRef);\n\n /* Requested start-pane width; clamped to min/max for rendering. /\n private readonly size = signal(0);\n\n /* Container width, tracked so percentage `maxSize` stays responsive. /\n private readonly containerWidth = signal(0);\n\n /* Whether the panes are stacked (viewport below `stackBelow`). /\n protected readonly stacked = signal(false);\n\n private dragPointerId: number \| null = null;\n private dragStartX = 0;\n private dragStartSize = 0;\n\n /* Clamped width actually applied to the start pane. /\n protected readonly effectiveSize = computed(() => this.clamp(this.size()));\n\n /* Resolved max in px for aria-valuemax; null when unbounded. /\n protected readonly ariaMax = computed(() => {\n const max = this.resolveMaxPx();\n return Number.isFinite(max) && max < Number.MAX_SAFE_INTEGER\n ? Math.round(max)\n : null;\n });\n\n constructor() {\n // Track the stacking breakpoint reactively; re-subscribes when the\n // `stackBelow` input changes.\n effect((onCleanup) => {\n const breakpoint = this.stackBelow();\n if (\n !breakpoint \|\|\n typeof window === 'undefined' \|\|\n typeof window.matchMedia !== 'function'\n ) {\n this.stacked.set(false);\n return;\n }\n const query = window.matchMedia(`(max-width: ${breakpoint - 0.02}px)`);\n this.stacked.set(query.matches);\n const onChange = (event: MediaQueryListEvent) =>\n this.stacked.set(event.matches);\n query.addEventListener('change', onChange);\n onCleanup(() => query.removeEventListener('change', onChange));\n });\n }\n\n ngOnInit(): void {\n this.size.set(this.restoreSize() ?? this.initialSize());\n this.observeContainer();\n }\n\n /* Restore the initial width (also wired to separator double-click). /\n reset(): void {\n this.applySize(this.initialSize());\n this.persist();\n }\n\n protected onPointerDown(event: PointerEvent): void {\n const separator = event.currentTarget as HTMLElement;\n try {\n separator.setPointerCapture?.(event.pointerId);\n } catch {\n // Synthetic events carry no active pointer — dragging still works as\n // long as the pointer stays over the separator.\n }\n this.dragPointerId = event.pointerId;\n this.dragStartX = event.clientX;\n this.dragStartSize = this.effectiveSize();\n event.preventDefault();\n }\n\n protected onPointerMove(event: PointerEvent): void {\n if (this.dragPointerId !== event.pointerId) return;\n this.applySize(this.dragStartSize + (event.clientX - this.dragStartX));\n }\n\n protected onPointerUp(event: PointerEvent): void {\n if (this.dragPointerId !== event.pointerId) return;\n this.dragPointerId = null;\n try {\n (event.currentTarget as HTMLElement).releasePointerCapture?.(\n event.pointerId,\n );\n } catch {\n // No capture to release — nothing to do.\n }\n this.persist();\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n let next: number;\n switch (event.key) {\n case 'ArrowLeft':\n next = this.effectiveSize() - this.step();\n break;\n case 'ArrowRight':\n next = this.effectiveSize() + this.step();\n break;\n case 'Home':\n next = this.minSize();\n break;\n case 'End':\n next = this.resolveMaxPx();\n break;\n default:\n return;\n }\n event.preventDefault();\n this.applySize(next);\n this.persist();\n }\n\n // ── internals ──────────────────────────────────────────────────────────────\n\n private applySize(px: number): void {\n const clamped = this.clamp(px);\n const previous = this.effectiveSize();\n // Always store the clamped value so deltas can't accumulate off-limits.\n this.size.set(clamped);\n if (clamped !== previous) {\n this.sizeChange.emit(clamped);\n }\n }\n\n private clamp(px: number): number {\n const min = this.minSize();\n const max = Math.max(min, this.resolveMaxPx());\n return Math.min(Math.max(px, min), max);\n }\n\n private resolveMaxPx(): number {\n const raw = this.maxSize();\n const width = this.containerWidth();\n if (raw == null) {\n return width > 0 ? width : Number.MAX_SAFE_INTEGER;\n }\n if (typeof raw === 'number') return raw;\n const trimmed = raw.trim();\n const value = parseFloat(trimmed);\n if (Number.isNaN(value)) return Number.MAX_SAFE_INTEGER;\n if (trimmed.endsWith('%')) {\n return width > 0 ? (width value) / 100 : Number.MAX_SAFE_INTEGER;\n }\n return value;\n }\n\n private observeContainer(): void {\n const element = this.host.nativeElement;\n this.containerWidth.set(element.clientWidth \|\| 0);\n if (typeof ResizeObserver === 'undefined') return;\n const observer = new ResizeObserver((entries) => {\n const width = entries[0]?.contentRect.width ?? 0;\n this.containerWidth.set(width);\n });\n observer.observe(element);\n this.destroyRef.onDestroy(() => observer.disconnect());\n }\n\n private storageId(): string \| null {\n const key = this.storageKey();\n return key ? `lc-split-pane:${key}` : null;\n }\n\n private restoreSize(): number \| null {\n const id = this.storageId();\n if (!id) return null;\n try {\n const raw = globalThis.localStorage?.getItem(id);\n const parsed = raw == null ? NaN : parseFloat(raw);\n return Number.isFinite(parsed) ? parsed : null;\n } catch {\n return null;\n }\n }\n\n private persist(): void {\n const id = this.storageId();\n if (!id) return;\n try {\n globalThis.localStorage?.setItem(id, String(this.effectiveSize()));\n } catch {\n // Storage unavailable (SSR, private mode) — width simply won't persist.\n }\n }\n}\n","<div class=\"lc-split-pane\" [class.lc-split-pane--stacked]=\"stacked()\">\n <div\n class=\"lc-split-pane__pane lc-split-pane__pane--start\"\n [style.flex-basis.px]=\"stacked() ? null : effectiveSize()\"\n >\n <ng-content select=\"[slot=start]\" />\n </div>\n\n @if (!stacked()) {\n <div\n class=\"lc-split-pane__separator\"\n role=\"separator\"\n tabindex=\"0\"\n aria-orientation=\"vertical\"\n [attr.aria-label]=\"separatorLabel()\"\n [attr.aria-valuenow]=\"effectiveSize()\"\n [attr.aria-valuemin]=\"minSize()\"\n [attr.aria-valuemax]=\"ariaMax()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n (pointercancel)=\"onPointerUp($event)\"\n (dblclick)=\"reset()\"\n (keydown)=\"onKeydown($event)\"\n ></div>\n }\n\n <div class=\"lc-split-pane__pane lc-split-pane__pane--end\">\n <ng-content select=\"[slot=end]\" />\n </div>\n</div>\n"],"mappings":"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"}
1	+ {"version":3,"file":"lifecorner-angular-ui-kit-split-pane.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/split-pane/split-pane.component.ts","../../../../libs/angular-ui-kit/src/lib/split-pane/split-pane.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ElementRef,\n OnInit,\n computed,\n effect,\n inject,\n input,\n output,\n signal,\n} from '@angular/core';\n\n/*\n Resizable two-pane layout container.\n \n Projects two panes (`slot=\"start\"`, `slot=\"end\"`) side by side with a\n * draggable separator in between. The start pane has a fixed, user-adjustable\n * width; the end pane fills the remaining space.\n \n Features:\n * - Drag the separator with mouse / touch (pointer capture), bounded by\n * `minSize` / `maxSize` (px or percentage of the container)\n * - Double-click the separator to restore `initialSize`\n * - Keyboard resizing: focusable separator, ←/→ adjust by `step`,\n * Home/End jump to min/max (`role=\"separator\"`, `aria-valuenow`)\n * - Optional persistence: with `storageKey`, the width survives a reload\n * - Below the `stackBelow` viewport breakpoint the panes stack vertically\n * and the resizer is disabled\n \n @example\n * ```html\n * <lc-split-pane\n * [initialSize]=\"360\"\n * [minSize]=\"280\"\n * [maxSize]=\"'55%'\"\n * storageKey=\"sidebar-width\"\n * (sizeChange)=\"onWidthChange($event)\"\n * >\n * <div slot=\"start\">…</div>\n * <div slot=\"end\">…</div>\n * </lc-split-pane>\n * ```\n /\n@Component({\n selector: 'lc-split-pane',\n standalone: true,\n templateUrl: './split-pane.component.html',\n styleUrl: './split-pane.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SplitPaneComponent implements OnInit {\n /* Initial width of the start pane in px. Restored on separator double-click. /\n readonly initialSize = input<number>(320);\n\n /* Minimum width of the start pane in px. /\n readonly minSize = input<number>(0);\n\n /\n Maximum width of the start pane: a number (px) or a percentage string\n * such as `'55%'` (relative to the container width). `null` = no limit\n * beyond the container itself.\n /\n readonly maxSize = input<number \| string \| null>(null);\n\n /\n When set, the current width is persisted to localStorage under this key\n * and restored on the next init.\n /\n readonly storageKey = input<string>();\n\n /* Step in px for keyboard resizing (←/→ on the focused separator). /\n readonly step = input<number>(16);\n\n /\n Viewport width in px below which the panes stack vertically and the\n * resizer is disabled. `0` disables stacking.\n /\n readonly stackBelow = input<number>(0);\n\n /* Accessible label for the separator. /\n readonly separatorLabel = input('Resize panel');\n\n /* Emitted whenever the start-pane width changes (drag, keyboard, reset). /\n readonly sizeChange = output<number>();\n\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly destroyRef = inject(DestroyRef);\n\n /* Requested start-pane width; clamped to min/max for rendering. /\n private readonly size = signal(0);\n\n /* Container width, tracked so percentage `maxSize` stays responsive. /\n private readonly containerWidth = signal(0);\n\n /* Whether the panes are stacked (viewport below `stackBelow`). /\n protected readonly stacked = signal(false);\n\n private dragPointerId: number \| null = null;\n private dragStartX = 0;\n private dragStartSize = 0;\n\n /* Clamped width actually applied to the start pane. /\n protected readonly effectiveSize = computed(() => this.clamp(this.size()));\n\n /* Resolved max in px for aria-valuemax; null when unbounded. /\n protected readonly ariaMax = computed(() => {\n const max = this.resolveMaxPx();\n return Number.isFinite(max) && max < Number.MAX_SAFE_INTEGER\n ? Math.round(max)\n : null;\n });\n\n constructor() {\n // Track the stacking breakpoint reactively; re-subscribes when the\n // `stackBelow` input changes.\n effect((onCleanup) => {\n const breakpoint = this.stackBelow();\n if (\n !breakpoint \|\|\n typeof window === 'undefined' \|\|\n typeof window.matchMedia !== 'function'\n ) {\n this.stacked.set(false);\n return;\n }\n const query = window.matchMedia(`(max-width: ${breakpoint - 0.02}px)`);\n this.stacked.set(query.matches);\n const onChange = (event: MediaQueryListEvent) =>\n this.stacked.set(event.matches);\n query.addEventListener('change', onChange);\n onCleanup(() => query.removeEventListener('change', onChange));\n });\n }\n\n ngOnInit(): void {\n this.size.set(this.restoreSize() ?? this.initialSize());\n this.observeContainer();\n }\n\n /* Restore the initial width (also wired to separator double-click). /\n reset(): void {\n this.applySize(this.initialSize());\n this.persist();\n }\n\n protected onPointerDown(event: PointerEvent): void {\n const separator = event.currentTarget as HTMLElement;\n try {\n separator.setPointerCapture?.(event.pointerId);\n } catch {\n // Synthetic events carry no active pointer — dragging still works as\n // long as the pointer stays over the separator.\n }\n this.dragPointerId = event.pointerId;\n this.dragStartX = event.clientX;\n this.dragStartSize = this.effectiveSize();\n event.preventDefault();\n }\n\n protected onPointerMove(event: PointerEvent): void {\n if (this.dragPointerId !== event.pointerId) return;\n this.applySize(this.dragStartSize + (event.clientX - this.dragStartX));\n }\n\n protected onPointerUp(event: PointerEvent): void {\n if (this.dragPointerId !== event.pointerId) return;\n this.dragPointerId = null;\n try {\n (event.currentTarget as HTMLElement).releasePointerCapture?.(\n event.pointerId,\n );\n } catch {\n // No capture to release — nothing to do.\n }\n this.persist();\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n let next: number;\n switch (event.key) {\n case 'ArrowLeft':\n next = this.effectiveSize() - this.step();\n break;\n case 'ArrowRight':\n next = this.effectiveSize() + this.step();\n break;\n case 'Home':\n next = this.minSize();\n break;\n case 'End':\n next = this.resolveMaxPx();\n break;\n default:\n return;\n }\n event.preventDefault();\n this.applySize(next);\n this.persist();\n }\n\n // ── internals ──────────────────────────────────────────────────────────────\n\n private applySize(px: number): void {\n const clamped = this.clamp(px);\n const previous = this.effectiveSize();\n // Always store the clamped value so deltas can't accumulate off-limits.\n this.size.set(clamped);\n if (clamped !== previous) {\n this.sizeChange.emit(clamped);\n }\n }\n\n private clamp(px: number): number {\n const min = this.minSize();\n const max = Math.max(min, this.resolveMaxPx());\n return Math.min(Math.max(px, min), max);\n }\n\n private resolveMaxPx(): number {\n const raw = this.maxSize();\n const width = this.containerWidth();\n if (raw == null) {\n return width > 0 ? width : Number.MAX_SAFE_INTEGER;\n }\n if (typeof raw === 'number') return raw;\n const trimmed = raw.trim();\n const value = parseFloat(trimmed);\n if (Number.isNaN(value)) return Number.MAX_SAFE_INTEGER;\n if (trimmed.endsWith('%')) {\n return width > 0 ? (width value) / 100 : Number.MAX_SAFE_INTEGER;\n }\n return value;\n }\n\n private observeContainer(): void {\n const element = this.host.nativeElement;\n this.containerWidth.set(element.clientWidth \|\| 0);\n if (typeof ResizeObserver === 'undefined') return;\n const observer = new ResizeObserver((entries) => {\n const width = entries[0]?.contentRect.width ?? 0;\n this.containerWidth.set(width);\n });\n observer.observe(element);\n this.destroyRef.onDestroy(() => observer.disconnect());\n }\n\n private storageId(): string \| null {\n const key = this.storageKey();\n return key ? `lc-split-pane:${key}` : null;\n }\n\n private restoreSize(): number \| null {\n const id = this.storageId();\n if (!id) return null;\n try {\n const raw = globalThis.localStorage?.getItem(id);\n const parsed = raw == null ? NaN : parseFloat(raw);\n return Number.isFinite(parsed) ? parsed : null;\n } catch {\n return null;\n }\n }\n\n private persist(): void {\n const id = this.storageId();\n if (!id) return;\n try {\n globalThis.localStorage?.setItem(id, String(this.effectiveSize()));\n } catch {\n // Storage unavailable (SSR, private mode) — width simply won't persist.\n }\n }\n}\n","<div class=\"lc-split-pane\" [class.lc-split-pane--stacked]=\"stacked()\">\n <div\n class=\"lc-split-pane__pane lc-split-pane__pane--start\"\n [style.flex-basis.px]=\"stacked() ? null : effectiveSize()\"\n >\n <ng-content select=\"[slot=start]\" />\n </div>\n\n @if (!stacked()) {\n <div\n class=\"lc-split-pane__separator\"\n role=\"separator\"\n tabindex=\"0\"\n aria-orientation=\"vertical\"\n [attr.aria-label]=\"separatorLabel()\"\n [attr.aria-valuenow]=\"effectiveSize()\"\n [attr.aria-valuemin]=\"minSize()\"\n [attr.aria-valuemax]=\"ariaMax()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n (pointercancel)=\"onPointerUp($event)\"\n (dblclick)=\"reset()\"\n (keydown)=\"onKeydown($event)\"\n ></div>\n }\n\n <div class=\"lc-split-pane__pane lc-split-pane__pane--end\">\n <ng-content select=\"[slot=end]\" />\n </div>\n</div>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-table.mjs CHANGED Viewed

@@ -990,8 +990,8 @@ var TableComponent = class TableComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div [class]=\"wrapperClasses()\">\n  <table [class]=\"tableClasses()\" [attr.role]=\"treeMode() ? 'treegrid' : 'table'\">\n    @if (caption()) {\n      <!-- First child of the table, so it names the table (and the treegrid). -->\n      <caption class=\"lc-table__caption\" [class.lc-table__caption--hidden]=\"!showCaption()\">{{ caption() }}</caption>\n    }\n    <thead>\n      <!-- Filter row -->\n      @if (filterable()) {\n        <tr class=\"lc-table__filter-row\">\n          @if (selectable()) {\n            <th class=\"lc-table__select-cell\"></th>\n          }\n          @for (column of columns(); track column.key) {\n            <th>\n              @if (column.filterable !== false) {\n                <lc-input\n                  class=\"lc-table__filter-input\"\n                  size=\"xs\"\n                  [placeholder]=\"filterPlaceholderLabel() + ' ' + column.label\"\n                  [ariaLabel]=\"filterAriaLabel() + ' ' + column.label\"\n                  [ngModel]=\"getFilterValue(column.key)\"\n                  (ngModelChange)=\"onFilterChange(column.key, $event)\"\n                />\n              }\n            </th>\n          }\n          @if (hasActions()) {\n            <th class=\"lc-table__actions-cell\"></th>\n          }\n        </tr>\n      }\n      <!-- Header row -->\n      <tr>\n        @if (selectable()) {\n          <th class=\"lc-table__select-cell\" scope=\"col\">\n            <input\n              type=\"checkbox\"\n              class=\"lc-table__checkbox\"\n              [checked]=\"allSelected()\"\n              [indeterminate]=\"someSelected()\"\n              (change)=\"toggleSelectAll()\"\n              [attr.aria-label]=\"selectAllAriaLabel()\"\n            />\n          </th>\n        }\n        @for (column of columns(); track column.key) {\n          <!-- A sortable header is a keyboard stop too: Enter/Space sort like a click. -->\n          <th\n            scope=\"col\"\n            [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n            [attr.aria-sort]=\"getAriaSort(column.key)\"\n            [attr.tabindex]=\"column.sortable ? 0 : null\"\n            [style.width]=\"column.width\"\n            [title]=\"column.tooltip || ''\"\n            (click)=\"handleSort(column.key)\"\n            (keydown)=\"column.sortable ? onHeaderKeydown($event, column.key) : null\">\n            @if (column.align === 'end') {\n              <!-- 3.17: the arrow is placed before the label (CSS), so the label stays\n                   flush with the figures; in the DOM it still follows the label. No\n                   whitespace between the label and the arrow. -->\n              <span class=\"lc-table__sort-label\">{{ column.label }}@if (column.sortable && getSortState(column.key)) {<span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? sortedAscendingLabel() : sortedDescendingLabel()\">\n                  @if (getSortState(column.key) === 'asc') {\n                    ↑\n                  } @else {\n                    ↓\n                  }\n                </span>}</span>\n            } @else {\n            {{ column.label }}\n            @if (column.sortable && getSortState(column.key)) {\n              <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? sortedAscendingLabel() : sortedDescendingLabel()\">\n                @if (getSortState(column.key) === 'asc') {\n                  ↑\n                } @else {\n                  ↓\n                }\n              </span>\n            }\n            }\n          </th>\n        }\n        @if (hasActions()) {\n          <th\n            scope=\"col\"\n            class=\"lc-table__actions-cell\"\n            [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n            [style.width]=\"actionsWidth()\"\n          >\n            {{ actionsLabel() }}\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (displayRows().length === 0) {\n        <tr>\n          <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\" class=\"lc-table__empty\">\n            {{ emptyText() }}\n          </td>\n        </tr>\n      } @else {\n        @for (dr of displayRows(); track dr.key) {\n          <!-- In tree mode the rows form the treegrid's keyboard model: a roving\n               tab stop plus Arrow/Home/End/Enter/Space handling (see the\n               component). Flat mode keeps plain table rows. -->\n          <tr\n            #dataRow\n            [class.lc-table__row--selected]=\"selectable() && isRowSelected(dr.row)\"\n            [class.lc-table__row--group]=\"dr.hasChildren\"\n            [attr.role]=\"treeMode() ? 'row' : null\"\n            [attr.tabindex]=\"rowTabindex(dr)\"\n            [attr.aria-level]=\"treeMode() ? dr.level : null\"\n            [attr.aria-expanded]=\"treeMode() && dr.hasChildren ? dr.expanded : null\"\n            [attr.aria-posinset]=\"treeMode() ? dr.posInSet : null\"\n            [attr.aria-setsize]=\"treeMode() ? dr.setSize : null\"\n            [attr.aria-selected]=\"treeMode() && selectable() ? isRowSelected(dr.row) : null\"\n            (click)=\"onRowClick(dr.row, $event)\"\n            (focus)=\"onRowFocus(dr)\"\n            (keydown)=\"onRowKeydown($event, dr)\"\n          >\n            @if (selectable()) {\n              <td class=\"lc-table__select-cell\" [attr.role]=\"treeMode() ? 'gridcell' : null\">\n                <input\n                  type=\"checkbox\"\n                  class=\"lc-table__checkbox\"\n                  [checked]=\"isRowSelected(dr.row)\"\n                  (change)=\"toggleRowSelect(dr.row)\"\n                  (click)=\"$event.stopPropagation()\"\n                  [attr.aria-label]=\"selectRowAriaLabel() + ' ' + (dr.absIndex + 1)\"\n                />\n              </td>\n            }\n            @for (column of columns(); track column.key) {\n              <td\n                [class]=\"getCellClasses(dr.row, column, dr.absIndex)\"\n                [ngStyle]=\"getCellStyles(dr.row, column, dr.absIndex)\"\n                [attr.role]=\"treeMode() ? 'gridcell' : null\"\n                (dblclick)=\"editable() ? startEdit(dr.row, column.key, getCellValue(dr.row, column.key)) : null\"\n              >\n                @if (isTreeColumn(column.key)) {\n                  <span class=\"lc-table__tree-cell\">\n                    @for (lvl of indentLevels(dr.depth); track lvl) {\n                      <span class=\"lc-table__tree-indent\" [style.width.px]=\"indentSize()\"></span>\n                    }\n                    <span class=\"lc-table__tree-chevron\" [style.width.px]=\"indentSize()\">\n                      @if (dr.hasChildren) {\n                        <button\n                          type=\"button\"\n                          class=\"lc-table__chevron-btn\"\n                          [class.lc-table__chevron-btn--expanded]=\"dr.expanded\"\n                          [attr.aria-label]=\"(dr.expanded ? collapseRowAriaLabel() : expandRowAriaLabel()) + ' ' + treeCellLabel(dr.row)\"\n                          [attr.aria-expanded]=\"dr.expanded\"\n                          (click)=\"onChevronClick(dr, $event)\"\n                        >\n                          <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n                        </button>\n                      }\n                    </span>\n                    <span class=\"lc-table__tree-content\">\n                      <ng-container\n                        *ngTemplateOutlet=\"cellContent; context: { row: dr.row, column: column, absIndex: dr.absIndex }\"\n                      ></ng-container>\n                    </span>\n                  </span>\n                } @else {\n                  <ng-container\n                    *ngTemplateOutlet=\"cellContent; context: { row: dr.row, column: column, absIndex: dr.absIndex }\"\n                  ></ng-container>\n                }\n              </td>\n            }\n            @if (hasActions()) {\n              <td\n                class=\"lc-table__actions-cell\"\n                [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n                [attr.role]=\"treeMode() ? 'gridcell' : null\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <div class=\"lc-table__actions\">\n                  @for (action of actions(); track action.key) {\n                    @if (!isActionHidden(action, dr.row, dr.absIndex)) {\n                      <lc-button\n                        [variant]=\"action.variant ?? 'ghost'\"\n                        size=\"xs\"\n                        [iconOnly]=\"!action.label\"\n                        [disabled]=\"isActionDisabled(action, dr.row, dr.absIndex)\"\n                        [ariaLabel]=\"action.tooltip ?? action.label ?? action.key\"\n                        (clicked)=\"onActionClick(action, dr.row, dr.absIndex)\"\n                      >\n                        @if (action.icon) {\n                          <lc-icon [name]=\"action.icon\" size=\"sm\" [decorative]=\"true\" />\n                        }\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </lc-button>\n                    }\n                  }\n                </div>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Shared cell content (edit input / custom template / formatted value) -->\n<ng-template #cellContent let-row=\"row\" let-column=\"column\" let-absIndex=\"absIndex\">\n  @if (isEditing(row, column.key)) {\n    <input\n      #editInput\n      type=\"text\"\n      class=\"lc-table__edit-input\"\n      [value]=\"editValue()\"\n      (input)=\"editValue.set(getInputValue($event))\"\n      (blur)=\"commitEdit(row, column.key)\"\n      (keydown)=\"onEditKeydown($event, row, column.key)\"\n    />\n  } @else if (hasCustomTemplate(column.key)) {\n    <ng-container *ngTemplateOutlet=\"getCellTemplate(column.key)!.template; context: { $implicit: row }\"></ng-container>\n  } @else {\n    {{ getFormattedCellValue(row, column, absIndex) }}\n  }\n</ng-template>\n\n<!-- Pagination -->\n@if (paginate()) {\n  <div [class]=\"'lc-table-pagination lc-table-pagination--' + paginationSize()\">\n    <div class=\"lc-table-pagination__info\">\n      {{ paginationStart }}–{{ paginationEnd }} {{ rangeOfLabel() }} {{ totalRows() }}\n    </div>\n    <div class=\"lc-table-pagination__controls\">\n      <lc-select\n        class=\"lc-table-pagination__size\"\n        [size]=\"paginationSize()\"\n        [options]=\"pageSizeSelectOptions()\"\n        [ngModel]=\"internalPageSize()\"\n        [ariaLabel]=\"rowsPerPageAriaLabel()\"\n        (ngModelChange)=\"onPageSizeModelChange($event)\"\n      />\n      <div class=\"lc-table-pagination__pager\">\n        <button\n          type=\"button\"\n          class=\"lc-table-pagination__btn\"\n          [disabled]=\"currentPage() === 0\"\n          (click)=\"goToPage(currentPage() - 1)\"\n          [attr.aria-label]=\"previousPageAriaLabel()\"\n        >‹</button>\n        <span class=\"lc-table-pagination__page\">\n          {{ currentPage() + 1 }} / {{ totalPages() }}\n        </span>\n        <button\n          type=\"button\"\n          class=\"lc-table-pagination__btn\"\n          [disabled]=\"currentPage() >= totalPages() - 1\"\n          (click)=\"goToPage(currentPage() + 1)\"\n          [attr.aria-label]=\"nextPageAriaLabel()\"\n        >›</button>\n      </div>\n    </div>\n  </div>\n}\n",
-		styles: [".lc-table-wrapper{width:100%}.lc-table-wrapper--responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:768px){.lc-table-wrapper--responsive::-webkit-scrollbar{height:8px}.lc-table-wrapper--responsive::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:var(--border-radius-sm)}}.lc-table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface-2);border-bottom:2px solid var(--color-border-strong)}.lc-table thead tr th{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));text-align:left;font-weight:var(--typography-font-weight-semibold);font-size:var(--typography-font-size-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none}.lc-table thead tr th.sortable{cursor:pointer;position:relative;padding-right:var(--spacing-8);transition:background-color .2s ease}.lc-table thead tr th.sortable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-table thead tr th.sortable:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table thead tr th.sortable .sort-indicator{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);font-size:var(--typography-font-size-xs);color:var(--color-primary)}.lc-table thead tr th.sorted-asc,.lc-table thead tr th.sorted-desc{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.lc-table tbody tr:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-table tbody tr:last-child{border-bottom:none}.lc-table tbody tr td{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4))}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-surface-2)}.lc-table--bordered{border:1px solid var(--color-border)}.lc-table--bordered thead tr th,.lc-table--bordered tbody tr td{border-right:1px solid var(--color-divider)}.lc-table--bordered thead tr th:last-child,.lc-table--bordered tbody tr td:last-child{border-right:none}.lc-table--bordered tbody tr{border-bottom:1px solid var(--color-border)}.lc-table--hoverable tbody tr,.lc-table--clickable tbody tr{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover,.lc-table--clickable tbody tr:hover{background-color:var(--color-surface-hover)}.lc-table--sm thead tr th,.lc-table--sm tbody tr td{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3))}.lc-table--sm thead tr th{font-size:var(--typography-font-size-xs)}.lc-table--lg thead tr th,.lc-table--lg tbody tr td{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5)}.lc-table--lg thead tr th{font-size:var(--typography-font-size-base)}:where(.lc-table tbody tr td){font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}:where(.lc-table--sm tbody tr td){font-size:var(--typography-font-size-xs)}:where(.lc-table--lg tbody tr td){font-size:var(--typography-font-size-base)}.lc-table thead tr th.lc-table__cell--end,.lc-table tbody tr td.lc-table__cell--end{text-align:end;font-variant-numeric:tabular-nums}.lc-table thead tr th.sortable.lc-table__cell--end{padding-inline-start:var(--spacing-8);padding-inline-end:var(--lc-density-padding-md, var(--spacing-4))}.lc-table thead tr th.sortable.lc-table__cell--end .sort-indicator{right:auto;inset-inline-end:calc(100% + var(--spacing-2))}.lc-table--sm thead tr th.sortable.lc-table__cell--end{padding-inline-end:var(--lc-density-padding-sm, var(--spacing-3))}.lc-table--lg thead tr th.sortable.lc-table__cell--end{padding-inline-end:var(--spacing-5)}.lc-table__sort-label{position:relative;display:inline-block}.lc-table__cell--end .lc-table__edit-input{text-align:end;font-variant-numeric:tabular-nums}.lc-table__caption{caption-side:top;padding:0 0 var(--spacing-3);text-align:start;font-family:var(--typography-font-family);font-size:var(--typography-font-size-base);font-weight:var(--typography-font-weight-semibold);line-height:var(--typography-line-height-normal);color:var(--color-text-primary)}.lc-table__caption--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(forced-colors:active){.lc-table tbody tr:focus-visible{outline:2px solid Highlight}}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-surface)!important;border-bottom:1px solid var(--color-divider)!important}.lc-table__filter-input{width:100%;display:block}.lc-table__filter-input .input-field{font-size:var(--typography-font-size-xs)}.lc-table__select-cell{width:40px;text-align:center!important;padding:var(--spacing-2)!important}.lc-table__checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary)}.lc-table__row--selected{background-color:var(--color-surface-selected)!important}.lc-table__actions-cell{white-space:nowrap}.lc-table thead tr th.lc-table__actions-cell--start,.lc-table tbody tr td.lc-table__actions-cell--start{text-align:left}.lc-table thead tr th.lc-table__actions-cell--center,.lc-table tbody tr td.lc-table__actions-cell--center{text-align:center}.lc-table thead tr th.lc-table__actions-cell--end,.lc-table tbody tr td.lc-table__actions-cell--end{text-align:right}.lc-table__actions{display:flex;align-items:center;gap:var(--spacing-2);justify-content:flex-start}.lc-table__actions-cell--center .lc-table__actions{justify-content:center}.lc-table__actions-cell--end .lc-table__actions{justify-content:flex-end}.lc-table__tree-cell{display:flex;align-items:center;min-width:0}.lc-table__tree-indent{flex:0 0 auto;align-self:stretch;position:relative}.lc-table__tree-indent:before{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--color-border)}.lc-table__tree-chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}.lc-table__chevron-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;border-radius:var(--border-radius-sm);transition:transform .2s ease,background-color .15s ease,color .15s ease}.lc-table__chevron-btn:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table__chevron-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.lc-table__chevron-btn--expanded{transform:rotate(90deg)}.lc-table__tree-content{flex:1 1 auto;min-width:0}.lc-table__row--group .lc-table__tree-content{font-weight:var(--typography-font-weight-semibold)}.lc-table__edit-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:2px solid var(--color-primary);border-radius:var(--border-radius-sm);font-size:inherit;background-color:var(--color-surface-2);color:var(--color-text-primary);outline:none}.lc-table-pagination{--_lc-table-pagination-btn: var(--size-interactive-md-height);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacing-2) var(--spacing-4);padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination--sm{--_lc-table-pagination-btn: var(--size-interactive-sm-height)}.lc-table-pagination--lg{--_lc-table-pagination-btn: var(--size-interactive-lg-height)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--spacing-2);margin-inline-start:auto}.lc-table-pagination__pager{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{--lc-select-clear-display: none;display:block;min-width:110px}.lc-table-pagination__btn{position:relative;appearance:none;border:1px solid var(--color-field-border);background-color:var(--color-surface-2);color:var(--color-text-primary);width:var(--_lc-table-pagination-btn);height:var(--_lc-table-pagination-btn);display:flex;align-items:center;justify-content:center;padding:0;border-radius:var(--border-radius-md);font-size:var(--typography-font-size-xl);line-height:1;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.lc-table-pagination__btn:before{content:\"\";position:absolute;inset:min(0px,(100% - var(--size-min-touch-height, 2.75rem)) / 2)}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-surface-hover);border-color:var(--color-text-secondary)}.lc-table-pagination__btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-table-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.lc-table-pagination__page{white-space:nowrap;min-width:60px;text-align:center}@media(max-width:640px){.lc-table-wrapper--stack .lc-table thead{display:none}.lc-table-wrapper--stack .lc-table tbody tr{display:block;margin-bottom:var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--border-radius-md)}.lc-table-wrapper--stack .lc-table tbody tr td{display:block;text-align:right;padding:var(--spacing-2) var(--spacing-4);border-bottom:1px solid var(--color-divider)}.lc-table-wrapper--stack .lc-table tbody tr td:last-child{border-bottom:none}.lc-table-wrapper--stack .lc-table tbody tr td:before{content:attr(data-label);float:left;font-weight:var(--typography-font-weight-semibold);color:var(--color-text-secondary)}}\n"],
+		template: "<div [class]=\"wrapperClasses()\">\n  <table [class]=\"tableClasses()\" [attr.role]=\"treeMode() ? 'treegrid' : 'table'\">\n    @if (caption()) {\n      <!-- First child of the table, so it names the table (and the treegrid). -->\n      <caption class=\"lc-table__caption\" [class.lc-table__caption--hidden]=\"!showCaption()\">{{ caption() }}</caption>\n    }\n    <thead>\n      <!-- Filter row -->\n      @if (filterable()) {\n        <tr class=\"lc-table__filter-row\">\n          @if (selectable()) {\n            <th class=\"lc-table__select-cell\"></th>\n          }\n          @for (column of columns(); track column.key) {\n            <th>\n              @if (column.filterable !== false) {\n                <lc-input\n                  class=\"lc-table__filter-input\"\n                  size=\"xs\"\n                  [placeholder]=\"filterPlaceholderLabel() + ' ' + column.label\"\n                  [ariaLabel]=\"filterAriaLabel() + ' ' + column.label\"\n                  [ngModel]=\"getFilterValue(column.key)\"\n                  (ngModelChange)=\"onFilterChange(column.key, $event)\"\n                />\n              }\n            </th>\n          }\n          @if (hasActions()) {\n            <th class=\"lc-table__actions-cell\"></th>\n          }\n        </tr>\n      }\n      <!-- Header row -->\n      <tr>\n        @if (selectable()) {\n          <th class=\"lc-table__select-cell\" scope=\"col\">\n            <!-- The label's ::before covers the cell: a 44 px hit area (request 043). -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the click; the checkbox inside is the keyboard control -->\n            <label class=\"lc-table__select-hit\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                class=\"lc-table__checkbox\"\n                [checked]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\"\n                (change)=\"toggleSelectAll()\"\n                [attr.aria-label]=\"selectAllAriaLabel()\"\n              />\n            </label>\n          </th>\n        }\n        @for (column of columns(); track column.key) {\n          <!-- A sortable header is a keyboard stop too: Enter/Space sort like a click. -->\n          <th\n            scope=\"col\"\n            [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n            [attr.aria-sort]=\"getAriaSort(column.key)\"\n            [attr.tabindex]=\"column.sortable ? 0 : null\"\n            [style.width]=\"column.width\"\n            [title]=\"column.tooltip || ''\"\n            (click)=\"handleSort(column.key)\"\n            (keydown)=\"column.sortable ? onHeaderKeydown($event, column.key) : null\">\n            @if (column.align === 'end') {\n              <!-- 3.17: the arrow is placed before the label (CSS), so the label stays\n                   flush with the figures; in the DOM it still follows the label. No\n                   whitespace between the label and the arrow. -->\n              <span class=\"lc-table__sort-label\">{{ column.label }}@if (column.sortable && getSortState(column.key)) {<span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? sortedAscendingLabel() : sortedDescendingLabel()\">\n                  @if (getSortState(column.key) === 'asc') {\n                    ↑\n                  } @else {\n                    ↓\n                  }\n                </span>}</span>\n            } @else {\n            {{ column.label }}\n            @if (column.sortable && getSortState(column.key)) {\n              <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? sortedAscendingLabel() : sortedDescendingLabel()\">\n                @if (getSortState(column.key) === 'asc') {\n                  ↑\n                } @else {\n                  ↓\n                }\n              </span>\n            }\n            }\n          </th>\n        }\n        @if (hasActions()) {\n          <th\n            scope=\"col\"\n            class=\"lc-table__actions-cell\"\n            [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n            [style.width]=\"actionsWidth()\"\n          >\n            {{ actionsLabel() }}\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (displayRows().length === 0) {\n        <tr>\n          <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\" class=\"lc-table__empty\">\n            {{ emptyText() }}\n          </td>\n        </tr>\n      } @else {\n        @for (dr of displayRows(); track dr.key) {\n          <!-- In tree mode the rows form the treegrid's keyboard model: a roving\n               tab stop plus Arrow/Home/End/Enter/Space handling (see the\n               component). Flat mode keeps plain table rows. -->\n          <tr\n            #dataRow\n            [class.lc-table__row--selected]=\"selectable() && isRowSelected(dr.row)\"\n            [class.lc-table__row--group]=\"dr.hasChildren\"\n            [attr.role]=\"treeMode() ? 'row' : null\"\n            [attr.tabindex]=\"rowTabindex(dr)\"\n            [attr.aria-level]=\"treeMode() ? dr.level : null\"\n            [attr.aria-expanded]=\"treeMode() && dr.hasChildren ? dr.expanded : null\"\n            [attr.aria-posinset]=\"treeMode() ? dr.posInSet : null\"\n            [attr.aria-setsize]=\"treeMode() ? dr.setSize : null\"\n            [attr.aria-selected]=\"treeMode() && selectable() ? isRowSelected(dr.row) : null\"\n            (click)=\"onRowClick(dr.row, $event)\"\n            (focus)=\"onRowFocus(dr)\"\n            (keydown)=\"onRowKeydown($event, dr)\"\n          >\n            @if (selectable()) {\n              <td class=\"lc-table__select-cell\" [attr.role]=\"treeMode() ? 'gridcell' : null\">\n                <!-- A click in the cell toggles the box, never the row (request 043). -->\n                <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the click; the checkbox inside is the keyboard control -->\n                <label class=\"lc-table__select-hit\" (click)=\"$event.stopPropagation()\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"lc-table__checkbox\"\n                    [checked]=\"isRowSelected(dr.row)\"\n                    (change)=\"toggleRowSelect(dr.row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"selectRowAriaLabel() + ' ' + (dr.absIndex + 1)\"\n                  />\n                </label>\n              </td>\n            }\n            @for (column of columns(); track column.key) {\n              <td\n                [class]=\"getCellClasses(dr.row, column, dr.absIndex)\"\n                [ngStyle]=\"getCellStyles(dr.row, column, dr.absIndex)\"\n                [attr.role]=\"treeMode() ? 'gridcell' : null\"\n                (dblclick)=\"editable() ? startEdit(dr.row, column.key, getCellValue(dr.row, column.key)) : null\"\n              >\n                @if (isTreeColumn(column.key)) {\n                  <span class=\"lc-table__tree-cell\">\n                    @for (lvl of indentLevels(dr.depth); track lvl) {\n                      <span class=\"lc-table__tree-indent\" [style.width.px]=\"indentSize()\"></span>\n                    }\n                    <span class=\"lc-table__tree-chevron\" [style.width.px]=\"indentSize()\">\n                      @if (dr.hasChildren) {\n                        <button\n                          type=\"button\"\n                          class=\"lc-table__chevron-btn\"\n                          [class.lc-table__chevron-btn--expanded]=\"dr.expanded\"\n                          [attr.aria-label]=\"(dr.expanded ? collapseRowAriaLabel() : expandRowAriaLabel()) + ' ' + treeCellLabel(dr.row)\"\n                          [attr.aria-expanded]=\"dr.expanded\"\n                          (click)=\"onChevronClick(dr, $event)\"\n                        >\n                          <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n                        </button>\n                      }\n                    </span>\n                    <span class=\"lc-table__tree-content\">\n                      <ng-container\n                        *ngTemplateOutlet=\"cellContent; context: { row: dr.row, column: column, absIndex: dr.absIndex }\"\n                      ></ng-container>\n                    </span>\n                  </span>\n                } @else {\n                  <ng-container\n                    *ngTemplateOutlet=\"cellContent; context: { row: dr.row, column: column, absIndex: dr.absIndex }\"\n                  ></ng-container>\n                }\n              </td>\n            }\n            @if (hasActions()) {\n              <td\n                class=\"lc-table__actions-cell\"\n                [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n                [attr.role]=\"treeMode() ? 'gridcell' : null\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <div class=\"lc-table__actions\">\n                  @for (action of actions(); track action.key) {\n                    @if (!isActionHidden(action, dr.row, dr.absIndex)) {\n                      <lc-button\n                        [variant]=\"action.variant ?? 'ghost'\"\n                        size=\"xs\"\n                        [iconOnly]=\"!action.label\"\n                        [disabled]=\"isActionDisabled(action, dr.row, dr.absIndex)\"\n                        [ariaLabel]=\"action.tooltip ?? action.label ?? action.key\"\n                        (clicked)=\"onActionClick(action, dr.row, dr.absIndex)\"\n                      >\n                        @if (action.icon) {\n                          <lc-icon [name]=\"action.icon\" size=\"sm\" [decorative]=\"true\" />\n                        }\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </lc-button>\n                    }\n                  }\n                </div>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Shared cell content (edit input / custom template / formatted value) -->\n<ng-template #cellContent let-row=\"row\" let-column=\"column\" let-absIndex=\"absIndex\">\n  @if (isEditing(row, column.key)) {\n    <input\n      #editInput\n      type=\"text\"\n      class=\"lc-table__edit-input\"\n      [value]=\"editValue()\"\n      (input)=\"editValue.set(getInputValue($event))\"\n      (blur)=\"commitEdit(row, column.key)\"\n      (keydown)=\"onEditKeydown($event, row, column.key)\"\n    />\n  } @else if (hasCustomTemplate(column.key)) {\n    <ng-container *ngTemplateOutlet=\"getCellTemplate(column.key)!.template; context: { $implicit: row }\"></ng-container>\n  } @else {\n    {{ getFormattedCellValue(row, column, absIndex) }}\n  }\n</ng-template>\n\n<!-- Pagination -->\n@if (paginate()) {\n  <div [class]=\"'lc-table-pagination lc-table-pagination--' + paginationSize()\">\n    <div class=\"lc-table-pagination__info\">\n      {{ paginationStart }}–{{ paginationEnd }} {{ rangeOfLabel() }} {{ totalRows() }}\n    </div>\n    <div class=\"lc-table-pagination__controls\">\n      <lc-select\n        class=\"lc-table-pagination__size\"\n        [size]=\"paginationSize()\"\n        [options]=\"pageSizeSelectOptions()\"\n        [ngModel]=\"internalPageSize()\"\n        [ariaLabel]=\"rowsPerPageAriaLabel()\"\n        (ngModelChange)=\"onPageSizeModelChange($event)\"\n      />\n      <div class=\"lc-table-pagination__pager\">\n        <button\n          type=\"button\"\n          class=\"lc-table-pagination__btn\"\n          [disabled]=\"currentPage() === 0\"\n          (click)=\"goToPage(currentPage() - 1)\"\n          [attr.aria-label]=\"previousPageAriaLabel()\"\n        >‹</button>\n        <span class=\"lc-table-pagination__page\">\n          {{ currentPage() + 1 }} / {{ totalPages() }}\n        </span>\n        <button\n          type=\"button\"\n          class=\"lc-table-pagination__btn\"\n          [disabled]=\"currentPage() >= totalPages() - 1\"\n          (click)=\"goToPage(currentPage() + 1)\"\n          [attr.aria-label]=\"nextPageAriaLabel()\"\n        >›</button>\n      </div>\n    </div>\n  </div>\n}\n",
+		styles: [".lc-table-wrapper{width:100%}.lc-table-wrapper--responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:768px){.lc-table-wrapper--responsive::-webkit-scrollbar{height:8px}.lc-table-wrapper--responsive::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:var(--border-radius-sm)}}.lc-table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface-2);border-bottom:2px solid var(--color-border-strong)}.lc-table thead tr th{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));text-align:left;font-weight:var(--typography-font-weight-semibold);font-size:var(--typography-font-size-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none}.lc-table thead tr th.sortable{cursor:pointer;position:relative;padding-right:var(--spacing-8);transition:background-color .2s ease}.lc-table thead tr th.sortable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-table thead tr th.sortable:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table thead tr th.sortable .sort-indicator{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);font-size:var(--typography-font-size-xs);color:var(--color-primary)}.lc-table thead tr th.sorted-asc,.lc-table thead tr th.sorted-desc{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.lc-table tbody tr:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-table tbody tr:last-child{border-bottom:none}.lc-table tbody tr td{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4))}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-surface-2)}.lc-table--bordered{border:1px solid var(--color-border)}.lc-table--bordered thead tr th,.lc-table--bordered tbody tr td{border-right:1px solid var(--color-divider)}.lc-table--bordered thead tr th:last-child,.lc-table--bordered tbody tr td:last-child{border-right:none}.lc-table--bordered tbody tr{border-bottom:1px solid var(--color-border)}.lc-table--hoverable tbody tr,.lc-table--clickable tbody tr{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover,.lc-table--clickable tbody tr:hover{background-color:var(--color-surface-hover)}.lc-table--sm thead tr th,.lc-table--sm tbody tr td{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3))}.lc-table--sm thead tr th{font-size:var(--typography-font-size-xs)}.lc-table--lg thead tr th,.lc-table--lg tbody tr td{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5)}.lc-table--lg thead tr th{font-size:var(--typography-font-size-base)}:where(.lc-table tbody tr td){font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}:where(.lc-table--sm tbody tr td){font-size:var(--typography-font-size-xs)}:where(.lc-table--lg tbody tr td){font-size:var(--typography-font-size-base)}.lc-table thead tr th.lc-table__cell--end,.lc-table tbody tr td.lc-table__cell--end{text-align:end;font-variant-numeric:tabular-nums}.lc-table thead tr th.sortable.lc-table__cell--end{padding-inline-start:var(--spacing-8);padding-inline-end:var(--lc-density-padding-md, var(--spacing-4))}.lc-table thead tr th.sortable.lc-table__cell--end .sort-indicator{right:auto;inset-inline-end:calc(100% + var(--spacing-2))}.lc-table--sm thead tr th.sortable.lc-table__cell--end{padding-inline-end:var(--lc-density-padding-sm, var(--spacing-3))}.lc-table--lg thead tr th.sortable.lc-table__cell--end{padding-inline-end:var(--spacing-5)}.lc-table__sort-label{position:relative;display:inline-block}.lc-table__cell--end .lc-table__edit-input{text-align:end;font-variant-numeric:tabular-nums}.lc-table__caption{caption-side:top;padding:0 0 var(--spacing-3);text-align:start;font-family:var(--typography-font-family);font-size:var(--typography-font-size-base);font-weight:var(--typography-font-weight-semibold);line-height:var(--typography-line-height-normal);color:var(--color-text-primary)}.lc-table__caption--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(forced-colors:active){.lc-table tbody tr:focus-visible{outline:2px solid Highlight}}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-surface)!important;border-bottom:1px solid var(--color-divider)!important}.lc-table__filter-input{width:100%;display:block}.lc-table__filter-input .input-field{font-size:var(--typography-font-size-xs)}.lc-table__select-cell{position:relative;width:var(--size-min-touch-height, 2.75rem);text-align:center!important;padding:var(--spacing-2) calc((var(--size-min-touch-height, 2.75rem) - 1rem) / 2)!important}.lc-table__select-hit{cursor:pointer}.lc-table__select-hit:before{content:\"\";position:absolute;inset:0}.lc-table__checkbox{position:relative;width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary)}.lc-table__checkbox:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-table__row--selected{background-color:var(--color-surface-selected)!important}.lc-table__actions-cell{white-space:nowrap}.lc-table thead tr th.lc-table__actions-cell--start,.lc-table tbody tr td.lc-table__actions-cell--start{text-align:left}.lc-table thead tr th.lc-table__actions-cell--center,.lc-table tbody tr td.lc-table__actions-cell--center{text-align:center}.lc-table thead tr th.lc-table__actions-cell--end,.lc-table tbody tr td.lc-table__actions-cell--end{text-align:right}.lc-table__actions{display:flex;align-items:center;gap:var(--spacing-2);justify-content:flex-start}.lc-table__actions-cell--center .lc-table__actions{justify-content:center}.lc-table__actions-cell--end .lc-table__actions{justify-content:flex-end}.lc-table__tree-cell{display:flex;align-items:center;min-width:0}.lc-table__tree-indent{flex:0 0 auto;align-self:stretch;position:relative}.lc-table__tree-indent:before{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--color-border)}.lc-table__tree-chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}.lc-table__chevron-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;border-radius:var(--border-radius-sm);transition:transform .2s ease,background-color .15s ease,color .15s ease}.lc-table__chevron-btn:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table__chevron-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.lc-table__chevron-btn--expanded{transform:rotate(90deg)}.lc-table__tree-content{flex:1 1 auto;min-width:0}.lc-table__row--group .lc-table__tree-content{font-weight:var(--typography-font-weight-semibold)}.lc-table__edit-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:2px solid var(--color-primary);border-radius:var(--border-radius-sm);font-size:inherit;background-color:var(--color-surface-2);color:var(--color-text-primary);outline:none}.lc-table-pagination{--_lc-table-pagination-btn: var(--size-interactive-md-height);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacing-2) var(--spacing-4);padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination--sm{--_lc-table-pagination-btn: var(--size-interactive-sm-height)}.lc-table-pagination--lg{--_lc-table-pagination-btn: var(--size-interactive-lg-height)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--spacing-2);margin-inline-start:auto}.lc-table-pagination__pager{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{--lc-select-clear-display: none;display:block;min-width:110px}.lc-table-pagination__btn{position:relative;appearance:none;border:1px solid var(--color-field-border);background-color:var(--color-surface-2);color:var(--color-text-primary);width:var(--_lc-table-pagination-btn);height:var(--_lc-table-pagination-btn);display:flex;align-items:center;justify-content:center;padding:0;border-radius:var(--border-radius-md);font-size:var(--typography-font-size-xl);line-height:1;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.lc-table-pagination__btn:before{content:\"\";position:absolute;inset:min(0px,(100% - var(--size-min-touch-height, 2.75rem)) / 2)}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-surface-hover);border-color:var(--color-text-secondary)}.lc-table-pagination__btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-table-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.lc-table-pagination__page{white-space:nowrap;min-width:60px;text-align:center}@media(max-width:640px){.lc-table-wrapper--stack .lc-table thead{display:none}.lc-table-wrapper--stack .lc-table tbody tr{display:block;margin-bottom:var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--border-radius-md)}.lc-table-wrapper--stack .lc-table tbody tr td{display:block;text-align:right;padding:var(--spacing-2) var(--spacing-4);border-bottom:1px solid var(--color-divider)}.lc-table-wrapper--stack .lc-table tbody tr td:last-child{border-bottom:none}.lc-table-wrapper--stack .lc-table tbody tr td:before{content:attr(data-label);float:left;font-weight:var(--typography-font-weight-semibold);color:var(--color-text-secondary)}}@media(forced-colors:active){.lc-table__checkbox:focus-visible{outline-color:Highlight}}\n"],
 		dependencies: [
 			{
 				kind: "directive",
@@ -1166,8 +1166,8 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			viewProviders: [ɵprovideKitIcons([ICON_CHEVRON_RIGHT])],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<div [class]=\"wrapperClasses()\">\n  <table [class]=\"tableClasses()\" [attr.role]=\"treeMode() ? 'treegrid' : 'table'\">\n    @if (caption()) {\n      <!-- First child of the table, so it names the table (and the treegrid). -->\n      <caption class=\"lc-table__caption\" [class.lc-table__caption--hidden]=\"!showCaption()\">{{ caption() }}</caption>\n    }\n    <thead>\n      <!-- Filter row -->\n      @if (filterable()) {\n        <tr class=\"lc-table__filter-row\">\n          @if (selectable()) {\n            <th class=\"lc-table__select-cell\"></th>\n          }\n          @for (column of columns(); track column.key) {\n            <th>\n              @if (column.filterable !== false) {\n                <lc-input\n                  class=\"lc-table__filter-input\"\n                  size=\"xs\"\n                  [placeholder]=\"filterPlaceholderLabel() + ' ' + column.label\"\n                  [ariaLabel]=\"filterAriaLabel() + ' ' + column.label\"\n                  [ngModel]=\"getFilterValue(column.key)\"\n                  (ngModelChange)=\"onFilterChange(column.key, $event)\"\n                />\n              }\n            </th>\n          }\n          @if (hasActions()) {\n            <th class=\"lc-table__actions-cell\"></th>\n          }\n        </tr>\n      }\n      <!-- Header row -->\n      <tr>\n        @if (selectable()) {\n          <th class=\"lc-table__select-cell\" scope=\"col\">\n            <input\n              type=\"checkbox\"\n              class=\"lc-table__checkbox\"\n              [checked]=\"allSelected()\"\n              [indeterminate]=\"someSelected()\"\n              (change)=\"toggleSelectAll()\"\n              [attr.aria-label]=\"selectAllAriaLabel()\"\n            />\n          </th>\n        }\n        @for (column of columns(); track column.key) {\n          <!-- A sortable header is a keyboard stop too: Enter/Space sort like a click. -->\n          <th\n            scope=\"col\"\n            [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n            [attr.aria-sort]=\"getAriaSort(column.key)\"\n            [attr.tabindex]=\"column.sortable ? 0 : null\"\n            [style.width]=\"column.width\"\n            [title]=\"column.tooltip || ''\"\n            (click)=\"handleSort(column.key)\"\n            (keydown)=\"column.sortable ? onHeaderKeydown($event, column.key) : null\">\n            @if (column.align === 'end') {\n              <!-- 3.17: the arrow is placed before the label (CSS), so the label stays\n                   flush with the figures; in the DOM it still follows the label. No\n                   whitespace between the label and the arrow. -->\n              <span class=\"lc-table__sort-label\">{{ column.label }}@if (column.sortable && getSortState(column.key)) {<span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? sortedAscendingLabel() : sortedDescendingLabel()\">\n                  @if (getSortState(column.key) === 'asc') {\n                    ↑\n                  } @else {\n                    ↓\n                  }\n                </span>}</span>\n            } @else {\n            {{ column.label }}\n            @if (column.sortable && getSortState(column.key)) {\n              <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? sortedAscendingLabel() : sortedDescendingLabel()\">\n                @if (getSortState(column.key) === 'asc') {\n                  ↑\n                } @else {\n                  ↓\n                }\n              </span>\n            }\n            }\n          </th>\n        }\n        @if (hasActions()) {\n          <th\n            scope=\"col\"\n            class=\"lc-table__actions-cell\"\n            [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n            [style.width]=\"actionsWidth()\"\n          >\n            {{ actionsLabel() }}\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (displayRows().length === 0) {\n        <tr>\n          <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\" class=\"lc-table__empty\">\n            {{ emptyText() }}\n          </td>\n        </tr>\n      } @else {\n        @for (dr of displayRows(); track dr.key) {\n          <!-- In tree mode the rows form the treegrid's keyboard model: a roving\n               tab stop plus Arrow/Home/End/Enter/Space handling (see the\n               component). Flat mode keeps plain table rows. -->\n          <tr\n            #dataRow\n            [class.lc-table__row--selected]=\"selectable() && isRowSelected(dr.row)\"\n            [class.lc-table__row--group]=\"dr.hasChildren\"\n            [attr.role]=\"treeMode() ? 'row' : null\"\n            [attr.tabindex]=\"rowTabindex(dr)\"\n            [attr.aria-level]=\"treeMode() ? dr.level : null\"\n            [attr.aria-expanded]=\"treeMode() && dr.hasChildren ? dr.expanded : null\"\n            [attr.aria-posinset]=\"treeMode() ? dr.posInSet : null\"\n            [attr.aria-setsize]=\"treeMode() ? dr.setSize : null\"\n            [attr.aria-selected]=\"treeMode() && selectable() ? isRowSelected(dr.row) : null\"\n            (click)=\"onRowClick(dr.row, $event)\"\n            (focus)=\"onRowFocus(dr)\"\n            (keydown)=\"onRowKeydown($event, dr)\"\n          >\n            @if (selectable()) {\n              <td class=\"lc-table__select-cell\" [attr.role]=\"treeMode() ? 'gridcell' : null\">\n                <input\n                  type=\"checkbox\"\n                  class=\"lc-table__checkbox\"\n                  [checked]=\"isRowSelected(dr.row)\"\n                  (change)=\"toggleRowSelect(dr.row)\"\n                  (click)=\"$event.stopPropagation()\"\n                  [attr.aria-label]=\"selectRowAriaLabel() + ' ' + (dr.absIndex + 1)\"\n                />\n              </td>\n            }\n            @for (column of columns(); track column.key) {\n              <td\n                [class]=\"getCellClasses(dr.row, column, dr.absIndex)\"\n                [ngStyle]=\"getCellStyles(dr.row, column, dr.absIndex)\"\n                [attr.role]=\"treeMode() ? 'gridcell' : null\"\n                (dblclick)=\"editable() ? startEdit(dr.row, column.key, getCellValue(dr.row, column.key)) : null\"\n              >\n                @if (isTreeColumn(column.key)) {\n                  <span class=\"lc-table__tree-cell\">\n                    @for (lvl of indentLevels(dr.depth); track lvl) {\n                      <span class=\"lc-table__tree-indent\" [style.width.px]=\"indentSize()\"></span>\n                    }\n                    <span class=\"lc-table__tree-chevron\" [style.width.px]=\"indentSize()\">\n                      @if (dr.hasChildren) {\n                        <button\n                          type=\"button\"\n                          class=\"lc-table__chevron-btn\"\n                          [class.lc-table__chevron-btn--expanded]=\"dr.expanded\"\n                          [attr.aria-label]=\"(dr.expanded ? collapseRowAriaLabel() : expandRowAriaLabel()) + ' ' + treeCellLabel(dr.row)\"\n                          [attr.aria-expanded]=\"dr.expanded\"\n                          (click)=\"onChevronClick(dr, $event)\"\n                        >\n                          <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n                        </button>\n                      }\n                    </span>\n                    <span class=\"lc-table__tree-content\">\n                      <ng-container\n                        *ngTemplateOutlet=\"cellContent; context: { row: dr.row, column: column, absIndex: dr.absIndex }\"\n                      ></ng-container>\n                    </span>\n                  </span>\n                } @else {\n                  <ng-container\n                    *ngTemplateOutlet=\"cellContent; context: { row: dr.row, column: column, absIndex: dr.absIndex }\"\n                  ></ng-container>\n                }\n              </td>\n            }\n            @if (hasActions()) {\n              <td\n                class=\"lc-table__actions-cell\"\n                [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n                [attr.role]=\"treeMode() ? 'gridcell' : null\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <div class=\"lc-table__actions\">\n                  @for (action of actions(); track action.key) {\n                    @if (!isActionHidden(action, dr.row, dr.absIndex)) {\n                      <lc-button\n                        [variant]=\"action.variant ?? 'ghost'\"\n                        size=\"xs\"\n                        [iconOnly]=\"!action.label\"\n                        [disabled]=\"isActionDisabled(action, dr.row, dr.absIndex)\"\n                        [ariaLabel]=\"action.tooltip ?? action.label ?? action.key\"\n                        (clicked)=\"onActionClick(action, dr.row, dr.absIndex)\"\n                      >\n                        @if (action.icon) {\n                          <lc-icon [name]=\"action.icon\" size=\"sm\" [decorative]=\"true\" />\n                        }\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </lc-button>\n                    }\n                  }\n                </div>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Shared cell content (edit input / custom template / formatted value) -->\n<ng-template #cellContent let-row=\"row\" let-column=\"column\" let-absIndex=\"absIndex\">\n  @if (isEditing(row, column.key)) {\n    <input\n      #editInput\n      type=\"text\"\n      class=\"lc-table__edit-input\"\n      [value]=\"editValue()\"\n      (input)=\"editValue.set(getInputValue($event))\"\n      (blur)=\"commitEdit(row, column.key)\"\n      (keydown)=\"onEditKeydown($event, row, column.key)\"\n    />\n  } @else if (hasCustomTemplate(column.key)) {\n    <ng-container *ngTemplateOutlet=\"getCellTemplate(column.key)!.template; context: { $implicit: row }\"></ng-container>\n  } @else {\n    {{ getFormattedCellValue(row, column, absIndex) }}\n  }\n</ng-template>\n\n<!-- Pagination -->\n@if (paginate()) {\n  <div [class]=\"'lc-table-pagination lc-table-pagination--' + paginationSize()\">\n    <div class=\"lc-table-pagination__info\">\n      {{ paginationStart }}–{{ paginationEnd }} {{ rangeOfLabel() }} {{ totalRows() }}\n    </div>\n    <div class=\"lc-table-pagination__controls\">\n      <lc-select\n        class=\"lc-table-pagination__size\"\n        [size]=\"paginationSize()\"\n        [options]=\"pageSizeSelectOptions()\"\n        [ngModel]=\"internalPageSize()\"\n        [ariaLabel]=\"rowsPerPageAriaLabel()\"\n        (ngModelChange)=\"onPageSizeModelChange($event)\"\n      />\n      <div class=\"lc-table-pagination__pager\">\n        <button\n          type=\"button\"\n          class=\"lc-table-pagination__btn\"\n          [disabled]=\"currentPage() === 0\"\n          (click)=\"goToPage(currentPage() - 1)\"\n          [attr.aria-label]=\"previousPageAriaLabel()\"\n        >‹</button>\n        <span class=\"lc-table-pagination__page\">\n          {{ currentPage() + 1 }} / {{ totalPages() }}\n        </span>\n        <button\n          type=\"button\"\n          class=\"lc-table-pagination__btn\"\n          [disabled]=\"currentPage() >= totalPages() - 1\"\n          (click)=\"goToPage(currentPage() + 1)\"\n          [attr.aria-label]=\"nextPageAriaLabel()\"\n        >›</button>\n      </div>\n    </div>\n  </div>\n}\n",
-			styles: [".lc-table-wrapper{width:100%}.lc-table-wrapper--responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:768px){.lc-table-wrapper--responsive::-webkit-scrollbar{height:8px}.lc-table-wrapper--responsive::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:var(--border-radius-sm)}}.lc-table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface-2);border-bottom:2px solid var(--color-border-strong)}.lc-table thead tr th{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));text-align:left;font-weight:var(--typography-font-weight-semibold);font-size:var(--typography-font-size-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none}.lc-table thead tr th.sortable{cursor:pointer;position:relative;padding-right:var(--spacing-8);transition:background-color .2s ease}.lc-table thead tr th.sortable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-table thead tr th.sortable:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table thead tr th.sortable .sort-indicator{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);font-size:var(--typography-font-size-xs);color:var(--color-primary)}.lc-table thead tr th.sorted-asc,.lc-table thead tr th.sorted-desc{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.lc-table tbody tr:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-table tbody tr:last-child{border-bottom:none}.lc-table tbody tr td{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4))}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-surface-2)}.lc-table--bordered{border:1px solid var(--color-border)}.lc-table--bordered thead tr th,.lc-table--bordered tbody tr td{border-right:1px solid var(--color-divider)}.lc-table--bordered thead tr th:last-child,.lc-table--bordered tbody tr td:last-child{border-right:none}.lc-table--bordered tbody tr{border-bottom:1px solid var(--color-border)}.lc-table--hoverable tbody tr,.lc-table--clickable tbody tr{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover,.lc-table--clickable tbody tr:hover{background-color:var(--color-surface-hover)}.lc-table--sm thead tr th,.lc-table--sm tbody tr td{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3))}.lc-table--sm thead tr th{font-size:var(--typography-font-size-xs)}.lc-table--lg thead tr th,.lc-table--lg tbody tr td{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5)}.lc-table--lg thead tr th{font-size:var(--typography-font-size-base)}:where(.lc-table tbody tr td){font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}:where(.lc-table--sm tbody tr td){font-size:var(--typography-font-size-xs)}:where(.lc-table--lg tbody tr td){font-size:var(--typography-font-size-base)}.lc-table thead tr th.lc-table__cell--end,.lc-table tbody tr td.lc-table__cell--end{text-align:end;font-variant-numeric:tabular-nums}.lc-table thead tr th.sortable.lc-table__cell--end{padding-inline-start:var(--spacing-8);padding-inline-end:var(--lc-density-padding-md, var(--spacing-4))}.lc-table thead tr th.sortable.lc-table__cell--end .sort-indicator{right:auto;inset-inline-end:calc(100% + var(--spacing-2))}.lc-table--sm thead tr th.sortable.lc-table__cell--end{padding-inline-end:var(--lc-density-padding-sm, var(--spacing-3))}.lc-table--lg thead tr th.sortable.lc-table__cell--end{padding-inline-end:var(--spacing-5)}.lc-table__sort-label{position:relative;display:inline-block}.lc-table__cell--end .lc-table__edit-input{text-align:end;font-variant-numeric:tabular-nums}.lc-table__caption{caption-side:top;padding:0 0 var(--spacing-3);text-align:start;font-family:var(--typography-font-family);font-size:var(--typography-font-size-base);font-weight:var(--typography-font-weight-semibold);line-height:var(--typography-line-height-normal);color:var(--color-text-primary)}.lc-table__caption--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(forced-colors:active){.lc-table tbody tr:focus-visible{outline:2px solid Highlight}}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-surface)!important;border-bottom:1px solid var(--color-divider)!important}.lc-table__filter-input{width:100%;display:block}.lc-table__filter-input .input-field{font-size:var(--typography-font-size-xs)}.lc-table__select-cell{width:40px;text-align:center!important;padding:var(--spacing-2)!important}.lc-table__checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary)}.lc-table__row--selected{background-color:var(--color-surface-selected)!important}.lc-table__actions-cell{white-space:nowrap}.lc-table thead tr th.lc-table__actions-cell--start,.lc-table tbody tr td.lc-table__actions-cell--start{text-align:left}.lc-table thead tr th.lc-table__actions-cell--center,.lc-table tbody tr td.lc-table__actions-cell--center{text-align:center}.lc-table thead tr th.lc-table__actions-cell--end,.lc-table tbody tr td.lc-table__actions-cell--end{text-align:right}.lc-table__actions{display:flex;align-items:center;gap:var(--spacing-2);justify-content:flex-start}.lc-table__actions-cell--center .lc-table__actions{justify-content:center}.lc-table__actions-cell--end .lc-table__actions{justify-content:flex-end}.lc-table__tree-cell{display:flex;align-items:center;min-width:0}.lc-table__tree-indent{flex:0 0 auto;align-self:stretch;position:relative}.lc-table__tree-indent:before{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--color-border)}.lc-table__tree-chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}.lc-table__chevron-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;border-radius:var(--border-radius-sm);transition:transform .2s ease,background-color .15s ease,color .15s ease}.lc-table__chevron-btn:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table__chevron-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.lc-table__chevron-btn--expanded{transform:rotate(90deg)}.lc-table__tree-content{flex:1 1 auto;min-width:0}.lc-table__row--group .lc-table__tree-content{font-weight:var(--typography-font-weight-semibold)}.lc-table__edit-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:2px solid var(--color-primary);border-radius:var(--border-radius-sm);font-size:inherit;background-color:var(--color-surface-2);color:var(--color-text-primary);outline:none}.lc-table-pagination{--_lc-table-pagination-btn: var(--size-interactive-md-height);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacing-2) var(--spacing-4);padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination--sm{--_lc-table-pagination-btn: var(--size-interactive-sm-height)}.lc-table-pagination--lg{--_lc-table-pagination-btn: var(--size-interactive-lg-height)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--spacing-2);margin-inline-start:auto}.lc-table-pagination__pager{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{--lc-select-clear-display: none;display:block;min-width:110px}.lc-table-pagination__btn{position:relative;appearance:none;border:1px solid var(--color-field-border);background-color:var(--color-surface-2);color:var(--color-text-primary);width:var(--_lc-table-pagination-btn);height:var(--_lc-table-pagination-btn);display:flex;align-items:center;justify-content:center;padding:0;border-radius:var(--border-radius-md);font-size:var(--typography-font-size-xl);line-height:1;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.lc-table-pagination__btn:before{content:\"\";position:absolute;inset:min(0px,(100% - var(--size-min-touch-height, 2.75rem)) / 2)}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-surface-hover);border-color:var(--color-text-secondary)}.lc-table-pagination__btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-table-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.lc-table-pagination__page{white-space:nowrap;min-width:60px;text-align:center}@media(max-width:640px){.lc-table-wrapper--stack .lc-table thead{display:none}.lc-table-wrapper--stack .lc-table tbody tr{display:block;margin-bottom:var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--border-radius-md)}.lc-table-wrapper--stack .lc-table tbody tr td{display:block;text-align:right;padding:var(--spacing-2) var(--spacing-4);border-bottom:1px solid var(--color-divider)}.lc-table-wrapper--stack .lc-table tbody tr td:last-child{border-bottom:none}.lc-table-wrapper--stack .lc-table tbody tr td:before{content:attr(data-label);float:left;font-weight:var(--typography-font-weight-semibold);color:var(--color-text-secondary)}}\n"]
+			template: "<div [class]=\"wrapperClasses()\">\n  <table [class]=\"tableClasses()\" [attr.role]=\"treeMode() ? 'treegrid' : 'table'\">\n    @if (caption()) {\n      <!-- First child of the table, so it names the table (and the treegrid). -->\n      <caption class=\"lc-table__caption\" [class.lc-table__caption--hidden]=\"!showCaption()\">{{ caption() }}</caption>\n    }\n    <thead>\n      <!-- Filter row -->\n      @if (filterable()) {\n        <tr class=\"lc-table__filter-row\">\n          @if (selectable()) {\n            <th class=\"lc-table__select-cell\"></th>\n          }\n          @for (column of columns(); track column.key) {\n            <th>\n              @if (column.filterable !== false) {\n                <lc-input\n                  class=\"lc-table__filter-input\"\n                  size=\"xs\"\n                  [placeholder]=\"filterPlaceholderLabel() + ' ' + column.label\"\n                  [ariaLabel]=\"filterAriaLabel() + ' ' + column.label\"\n                  [ngModel]=\"getFilterValue(column.key)\"\n                  (ngModelChange)=\"onFilterChange(column.key, $event)\"\n                />\n              }\n            </th>\n          }\n          @if (hasActions()) {\n            <th class=\"lc-table__actions-cell\"></th>\n          }\n        </tr>\n      }\n      <!-- Header row -->\n      <tr>\n        @if (selectable()) {\n          <th class=\"lc-table__select-cell\" scope=\"col\">\n            <!-- The label's ::before covers the cell: a 44 px hit area (request 043). -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the click; the checkbox inside is the keyboard control -->\n            <label class=\"lc-table__select-hit\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                class=\"lc-table__checkbox\"\n                [checked]=\"allSelected()\"\n                [indeterminate]=\"someSelected()\"\n                (change)=\"toggleSelectAll()\"\n                [attr.aria-label]=\"selectAllAriaLabel()\"\n              />\n            </label>\n          </th>\n        }\n        @for (column of columns(); track column.key) {\n          <!-- A sortable header is a keyboard stop too: Enter/Space sort like a click. -->\n          <th\n            scope=\"col\"\n            [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n            [attr.aria-sort]=\"getAriaSort(column.key)\"\n            [attr.tabindex]=\"column.sortable ? 0 : null\"\n            [style.width]=\"column.width\"\n            [title]=\"column.tooltip || ''\"\n            (click)=\"handleSort(column.key)\"\n            (keydown)=\"column.sortable ? onHeaderKeydown($event, column.key) : null\">\n            @if (column.align === 'end') {\n              <!-- 3.17: the arrow is placed before the label (CSS), so the label stays\n                   flush with the figures; in the DOM it still follows the label. No\n                   whitespace between the label and the arrow. -->\n              <span class=\"lc-table__sort-label\">{{ column.label }}@if (column.sortable && getSortState(column.key)) {<span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? sortedAscendingLabel() : sortedDescendingLabel()\">\n                  @if (getSortState(column.key) === 'asc') {\n                    ↑\n                  } @else {\n                    ↓\n                  }\n                </span>}</span>\n            } @else {\n            {{ column.label }}\n            @if (column.sortable && getSortState(column.key)) {\n              <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? sortedAscendingLabel() : sortedDescendingLabel()\">\n                @if (getSortState(column.key) === 'asc') {\n                  ↑\n                } @else {\n                  ↓\n                }\n              </span>\n            }\n            }\n          </th>\n        }\n        @if (hasActions()) {\n          <th\n            scope=\"col\"\n            class=\"lc-table__actions-cell\"\n            [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n            [style.width]=\"actionsWidth()\"\n          >\n            {{ actionsLabel() }}\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (displayRows().length === 0) {\n        <tr>\n          <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\" class=\"lc-table__empty\">\n            {{ emptyText() }}\n          </td>\n        </tr>\n      } @else {\n        @for (dr of displayRows(); track dr.key) {\n          <!-- In tree mode the rows form the treegrid's keyboard model: a roving\n               tab stop plus Arrow/Home/End/Enter/Space handling (see the\n               component). Flat mode keeps plain table rows. -->\n          <tr\n            #dataRow\n            [class.lc-table__row--selected]=\"selectable() && isRowSelected(dr.row)\"\n            [class.lc-table__row--group]=\"dr.hasChildren\"\n            [attr.role]=\"treeMode() ? 'row' : null\"\n            [attr.tabindex]=\"rowTabindex(dr)\"\n            [attr.aria-level]=\"treeMode() ? dr.level : null\"\n            [attr.aria-expanded]=\"treeMode() && dr.hasChildren ? dr.expanded : null\"\n            [attr.aria-posinset]=\"treeMode() ? dr.posInSet : null\"\n            [attr.aria-setsize]=\"treeMode() ? dr.setSize : null\"\n            [attr.aria-selected]=\"treeMode() && selectable() ? isRowSelected(dr.row) : null\"\n            (click)=\"onRowClick(dr.row, $event)\"\n            (focus)=\"onRowFocus(dr)\"\n            (keydown)=\"onRowKeydown($event, dr)\"\n          >\n            @if (selectable()) {\n              <td class=\"lc-table__select-cell\" [attr.role]=\"treeMode() ? 'gridcell' : null\">\n                <!-- A click in the cell toggles the box, never the row (request 043). -->\n                <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the click; the checkbox inside is the keyboard control -->\n                <label class=\"lc-table__select-hit\" (click)=\"$event.stopPropagation()\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"lc-table__checkbox\"\n                    [checked]=\"isRowSelected(dr.row)\"\n                    (change)=\"toggleRowSelect(dr.row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"selectRowAriaLabel() + ' ' + (dr.absIndex + 1)\"\n                  />\n                </label>\n              </td>\n            }\n            @for (column of columns(); track column.key) {\n              <td\n                [class]=\"getCellClasses(dr.row, column, dr.absIndex)\"\n                [ngStyle]=\"getCellStyles(dr.row, column, dr.absIndex)\"\n                [attr.role]=\"treeMode() ? 'gridcell' : null\"\n                (dblclick)=\"editable() ? startEdit(dr.row, column.key, getCellValue(dr.row, column.key)) : null\"\n              >\n                @if (isTreeColumn(column.key)) {\n                  <span class=\"lc-table__tree-cell\">\n                    @for (lvl of indentLevels(dr.depth); track lvl) {\n                      <span class=\"lc-table__tree-indent\" [style.width.px]=\"indentSize()\"></span>\n                    }\n                    <span class=\"lc-table__tree-chevron\" [style.width.px]=\"indentSize()\">\n                      @if (dr.hasChildren) {\n                        <button\n                          type=\"button\"\n                          class=\"lc-table__chevron-btn\"\n                          [class.lc-table__chevron-btn--expanded]=\"dr.expanded\"\n                          [attr.aria-label]=\"(dr.expanded ? collapseRowAriaLabel() : expandRowAriaLabel()) + ' ' + treeCellLabel(dr.row)\"\n                          [attr.aria-expanded]=\"dr.expanded\"\n                          (click)=\"onChevronClick(dr, $event)\"\n                        >\n                          <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n                        </button>\n                      }\n                    </span>\n                    <span class=\"lc-table__tree-content\">\n                      <ng-container\n                        *ngTemplateOutlet=\"cellContent; context: { row: dr.row, column: column, absIndex: dr.absIndex }\"\n                      ></ng-container>\n                    </span>\n                  </span>\n                } @else {\n                  <ng-container\n                    *ngTemplateOutlet=\"cellContent; context: { row: dr.row, column: column, absIndex: dr.absIndex }\"\n                  ></ng-container>\n                }\n              </td>\n            }\n            @if (hasActions()) {\n              <td\n                class=\"lc-table__actions-cell\"\n                [class]=\"'lc-table__actions-cell--' + actionsAlign()\"\n                [attr.role]=\"treeMode() ? 'gridcell' : null\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <div class=\"lc-table__actions\">\n                  @for (action of actions(); track action.key) {\n                    @if (!isActionHidden(action, dr.row, dr.absIndex)) {\n                      <lc-button\n                        [variant]=\"action.variant ?? 'ghost'\"\n                        size=\"xs\"\n                        [iconOnly]=\"!action.label\"\n                        [disabled]=\"isActionDisabled(action, dr.row, dr.absIndex)\"\n                        [ariaLabel]=\"action.tooltip ?? action.label ?? action.key\"\n                        (clicked)=\"onActionClick(action, dr.row, dr.absIndex)\"\n                      >\n                        @if (action.icon) {\n                          <lc-icon [name]=\"action.icon\" size=\"sm\" [decorative]=\"true\" />\n                        }\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </lc-button>\n                    }\n                  }\n                </div>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Shared cell content (edit input / custom template / formatted value) -->\n<ng-template #cellContent let-row=\"row\" let-column=\"column\" let-absIndex=\"absIndex\">\n  @if (isEditing(row, column.key)) {\n    <input\n      #editInput\n      type=\"text\"\n      class=\"lc-table__edit-input\"\n      [value]=\"editValue()\"\n      (input)=\"editValue.set(getInputValue($event))\"\n      (blur)=\"commitEdit(row, column.key)\"\n      (keydown)=\"onEditKeydown($event, row, column.key)\"\n    />\n  } @else if (hasCustomTemplate(column.key)) {\n    <ng-container *ngTemplateOutlet=\"getCellTemplate(column.key)!.template; context: { $implicit: row }\"></ng-container>\n  } @else {\n    {{ getFormattedCellValue(row, column, absIndex) }}\n  }\n</ng-template>\n\n<!-- Pagination -->\n@if (paginate()) {\n  <div [class]=\"'lc-table-pagination lc-table-pagination--' + paginationSize()\">\n    <div class=\"lc-table-pagination__info\">\n      {{ paginationStart }}–{{ paginationEnd }} {{ rangeOfLabel() }} {{ totalRows() }}\n    </div>\n    <div class=\"lc-table-pagination__controls\">\n      <lc-select\n        class=\"lc-table-pagination__size\"\n        [size]=\"paginationSize()\"\n        [options]=\"pageSizeSelectOptions()\"\n        [ngModel]=\"internalPageSize()\"\n        [ariaLabel]=\"rowsPerPageAriaLabel()\"\n        (ngModelChange)=\"onPageSizeModelChange($event)\"\n      />\n      <div class=\"lc-table-pagination__pager\">\n        <button\n          type=\"button\"\n          class=\"lc-table-pagination__btn\"\n          [disabled]=\"currentPage() === 0\"\n          (click)=\"goToPage(currentPage() - 1)\"\n          [attr.aria-label]=\"previousPageAriaLabel()\"\n        >‹</button>\n        <span class=\"lc-table-pagination__page\">\n          {{ currentPage() + 1 }} / {{ totalPages() }}\n        </span>\n        <button\n          type=\"button\"\n          class=\"lc-table-pagination__btn\"\n          [disabled]=\"currentPage() >= totalPages() - 1\"\n          (click)=\"goToPage(currentPage() + 1)\"\n          [attr.aria-label]=\"nextPageAriaLabel()\"\n        >›</button>\n      </div>\n    </div>\n  </div>\n}\n",
+			styles: [".lc-table-wrapper{width:100%}.lc-table-wrapper--responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:768px){.lc-table-wrapper--responsive::-webkit-scrollbar{height:8px}.lc-table-wrapper--responsive::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:var(--border-radius-sm)}}.lc-table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface-2);border-bottom:2px solid var(--color-border-strong)}.lc-table thead tr th{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));text-align:left;font-weight:var(--typography-font-weight-semibold);font-size:var(--typography-font-size-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none}.lc-table thead tr th.sortable{cursor:pointer;position:relative;padding-right:var(--spacing-8);transition:background-color .2s ease}.lc-table thead tr th.sortable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-table thead tr th.sortable:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table thead tr th.sortable .sort-indicator{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);font-size:var(--typography-font-size-xs);color:var(--color-primary)}.lc-table thead tr th.sorted-asc,.lc-table thead tr th.sorted-desc{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.lc-table tbody tr:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-table tbody tr:last-child{border-bottom:none}.lc-table tbody tr td{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4))}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-surface-2)}.lc-table--bordered{border:1px solid var(--color-border)}.lc-table--bordered thead tr th,.lc-table--bordered tbody tr td{border-right:1px solid var(--color-divider)}.lc-table--bordered thead tr th:last-child,.lc-table--bordered tbody tr td:last-child{border-right:none}.lc-table--bordered tbody tr{border-bottom:1px solid var(--color-border)}.lc-table--hoverable tbody tr,.lc-table--clickable tbody tr{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover,.lc-table--clickable tbody tr:hover{background-color:var(--color-surface-hover)}.lc-table--sm thead tr th,.lc-table--sm tbody tr td{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3))}.lc-table--sm thead tr th{font-size:var(--typography-font-size-xs)}.lc-table--lg thead tr th,.lc-table--lg tbody tr td{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5)}.lc-table--lg thead tr th{font-size:var(--typography-font-size-base)}:where(.lc-table tbody tr td){font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}:where(.lc-table--sm tbody tr td){font-size:var(--typography-font-size-xs)}:where(.lc-table--lg tbody tr td){font-size:var(--typography-font-size-base)}.lc-table thead tr th.lc-table__cell--end,.lc-table tbody tr td.lc-table__cell--end{text-align:end;font-variant-numeric:tabular-nums}.lc-table thead tr th.sortable.lc-table__cell--end{padding-inline-start:var(--spacing-8);padding-inline-end:var(--lc-density-padding-md, var(--spacing-4))}.lc-table thead tr th.sortable.lc-table__cell--end .sort-indicator{right:auto;inset-inline-end:calc(100% + var(--spacing-2))}.lc-table--sm thead tr th.sortable.lc-table__cell--end{padding-inline-end:var(--lc-density-padding-sm, var(--spacing-3))}.lc-table--lg thead tr th.sortable.lc-table__cell--end{padding-inline-end:var(--spacing-5)}.lc-table__sort-label{position:relative;display:inline-block}.lc-table__cell--end .lc-table__edit-input{text-align:end;font-variant-numeric:tabular-nums}.lc-table__caption{caption-side:top;padding:0 0 var(--spacing-3);text-align:start;font-family:var(--typography-font-family);font-size:var(--typography-font-size-base);font-weight:var(--typography-font-weight-semibold);line-height:var(--typography-line-height-normal);color:var(--color-text-primary)}.lc-table__caption--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(forced-colors:active){.lc-table tbody tr:focus-visible{outline:2px solid Highlight}}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-surface)!important;border-bottom:1px solid var(--color-divider)!important}.lc-table__filter-input{width:100%;display:block}.lc-table__filter-input .input-field{font-size:var(--typography-font-size-xs)}.lc-table__select-cell{position:relative;width:var(--size-min-touch-height, 2.75rem);text-align:center!important;padding:var(--spacing-2) calc((var(--size-min-touch-height, 2.75rem) - 1rem) / 2)!important}.lc-table__select-hit{cursor:pointer}.lc-table__select-hit:before{content:\"\";position:absolute;inset:0}.lc-table__checkbox{position:relative;width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary)}.lc-table__checkbox:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-table__row--selected{background-color:var(--color-surface-selected)!important}.lc-table__actions-cell{white-space:nowrap}.lc-table thead tr th.lc-table__actions-cell--start,.lc-table tbody tr td.lc-table__actions-cell--start{text-align:left}.lc-table thead tr th.lc-table__actions-cell--center,.lc-table tbody tr td.lc-table__actions-cell--center{text-align:center}.lc-table thead tr th.lc-table__actions-cell--end,.lc-table tbody tr td.lc-table__actions-cell--end{text-align:right}.lc-table__actions{display:flex;align-items:center;gap:var(--spacing-2);justify-content:flex-start}.lc-table__actions-cell--center .lc-table__actions{justify-content:center}.lc-table__actions-cell--end .lc-table__actions{justify-content:flex-end}.lc-table__tree-cell{display:flex;align-items:center;min-width:0}.lc-table__tree-indent{flex:0 0 auto;align-self:stretch;position:relative}.lc-table__tree-indent:before{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--color-border)}.lc-table__tree-chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}.lc-table__chevron-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;border-radius:var(--border-radius-sm);transition:transform .2s ease,background-color .15s ease,color .15s ease}.lc-table__chevron-btn:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-table__chevron-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.lc-table__chevron-btn--expanded{transform:rotate(90deg)}.lc-table__tree-content{flex:1 1 auto;min-width:0}.lc-table__row--group .lc-table__tree-content{font-weight:var(--typography-font-weight-semibold)}.lc-table__edit-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:2px solid var(--color-primary);border-radius:var(--border-radius-sm);font-size:inherit;background-color:var(--color-surface-2);color:var(--color-text-primary);outline:none}.lc-table-pagination{--_lc-table-pagination-btn: var(--size-interactive-md-height);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacing-2) var(--spacing-4);padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination--sm{--_lc-table-pagination-btn: var(--size-interactive-sm-height)}.lc-table-pagination--lg{--_lc-table-pagination-btn: var(--size-interactive-lg-height)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--spacing-2);margin-inline-start:auto}.lc-table-pagination__pager{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{--lc-select-clear-display: none;display:block;min-width:110px}.lc-table-pagination__btn{position:relative;appearance:none;border:1px solid var(--color-field-border);background-color:var(--color-surface-2);color:var(--color-text-primary);width:var(--_lc-table-pagination-btn);height:var(--_lc-table-pagination-btn);display:flex;align-items:center;justify-content:center;padding:0;border-radius:var(--border-radius-md);font-size:var(--typography-font-size-xl);line-height:1;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.lc-table-pagination__btn:before{content:\"\";position:absolute;inset:min(0px,(100% - var(--size-min-touch-height, 2.75rem)) / 2)}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-surface-hover);border-color:var(--color-text-secondary)}.lc-table-pagination__btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-table-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.lc-table-pagination__page{white-space:nowrap;min-width:60px;text-align:center}@media(max-width:640px){.lc-table-wrapper--stack .lc-table thead{display:none}.lc-table-wrapper--stack .lc-table tbody tr{display:block;margin-bottom:var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--border-radius-md)}.lc-table-wrapper--stack .lc-table tbody tr td{display:block;text-align:right;padding:var(--spacing-2) var(--spacing-4);border-bottom:1px solid var(--color-divider)}.lc-table-wrapper--stack .lc-table tbody tr td:last-child{border-bottom:none}.lc-table-wrapper--stack .lc-table tbody tr td:before{content:attr(data-label);float:left;font-weight:var(--typography-font-weight-semibold);color:var(--color-text-secondary)}}@media(forced-colors:active){.lc-table__checkbox:focus-visible{outline-color:Highlight}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],