@life-cockpit/angular-ui-kit 1.11.8 → 1.11.10
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.
|
@@ -297,6 +297,7 @@ class IconComponent {
|
|
|
297
297
|
iconAliasMap = {
|
|
298
298
|
account_balance: 'building-library',
|
|
299
299
|
analytics: 'presentation-chart-line',
|
|
300
|
+
'magnifying-glass': 'search',
|
|
300
301
|
notifications_active: 'bell-alert',
|
|
301
302
|
trending_up: 'arrow-trending-up',
|
|
302
303
|
'trending-up': 'arrow-trending-up',
|
|
@@ -7084,6 +7085,10 @@ class TableComponent {
|
|
|
7084
7085
|
const selected = this.selectedRows();
|
|
7085
7086
|
return data.every((_, i) => selected.has(this.getAbsoluteIndex(i)));
|
|
7086
7087
|
}, ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
|
|
7088
|
+
pageSizeSelectOptions = computed(() => this.pageSizeOptions().map((opt) => ({
|
|
7089
|
+
value: opt,
|
|
7090
|
+
label: `${opt} / page`,
|
|
7091
|
+
})), ...(ngDevMode ? [{ debugName: "pageSizeSelectOptions" }] : /* istanbul ignore next */ []));
|
|
7087
7092
|
/**
|
|
7088
7093
|
* Computed CSS classes for the table element
|
|
7089
7094
|
*/
|
|
@@ -7191,6 +7196,17 @@ class TableComponent {
|
|
|
7191
7196
|
this.internalPageSize.set(newSize);
|
|
7192
7197
|
this.currentPage.set(0);
|
|
7193
7198
|
}
|
|
7199
|
+
onPageSizeModelChange(value) {
|
|
7200
|
+
if (value == null) {
|
|
7201
|
+
return;
|
|
7202
|
+
}
|
|
7203
|
+
const parsed = typeof value === 'number' ? value : Number(value);
|
|
7204
|
+
if (!Number.isFinite(parsed)) {
|
|
7205
|
+
return;
|
|
7206
|
+
}
|
|
7207
|
+
this.internalPageSize.set(parsed);
|
|
7208
|
+
this.currentPage.set(0);
|
|
7209
|
+
}
|
|
7194
7210
|
get paginationStart() {
|
|
7195
7211
|
return this.currentPage() * this.internalPageSize() + 1;
|
|
7196
7212
|
}
|
|
@@ -7236,8 +7252,7 @@ class TableComponent {
|
|
|
7236
7252
|
this.selectionChange.emit({ selected, allSelected: this.allSelected() });
|
|
7237
7253
|
}
|
|
7238
7254
|
// -- Column Filters --
|
|
7239
|
-
onFilterChange(columnKey,
|
|
7240
|
-
const value = event.target.value;
|
|
7255
|
+
onFilterChange(columnKey, value) {
|
|
7241
7256
|
const filters = { ...this.columnFilters(), [columnKey]: value };
|
|
7242
7257
|
this.columnFilters.set(filters);
|
|
7243
7258
|
this.currentPage.set(0);
|
|
@@ -7286,11 +7301,11 @@ class TableComponent {
|
|
|
7286
7301
|
return event.target.value;
|
|
7287
7302
|
}
|
|
7288
7303
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7289
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TableComponent, isStandalone: true, selector: "lc-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, paginate: { classPropertyName: "paginate", publicName: "paginate", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sort", rowClick: "rowClick", cellEdit: "cellEdit", selectionChange: "selectionChange" }, queries: [{ propertyName: "cellTemplates", predicate: TableCellDirective }], ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\n <table [class]=\"tableClasses()\" role=\"table\">\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 <input\n type=\"text\"\n class=\"lc-table__filter-input\"\n [placeholder]=\"'Filter ' + column.label\"\n [value]=\"getFilterValue(column.key)\"\n (input)=\"onFilterChange(column.key, $event)\"\n [attr.aria-label]=\"'Filter by ' + column.label\"\n />\n }\n </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 (change)=\"toggleSelectAll()\"\n aria-label=\"Select all rows\"\n />\n </th>\n }\n @for (column of columns(); track column.key) {\n <th\n scope=\"col\"\n [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n [attr.aria-sort]=\"getAriaSort(column.key)\"\n [style.width]=\"column.width\"\n [title]=\"column.tooltip || ''\"\n (click)=\"handleSort(column.key)\">\n {{ column.label }}\n @if (column.sortable && getSortState(column.key)) {\n <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? 'sorted ascending' : 'sorted descending'\">\n @if (getSortState(column.key) === 'asc') {\n \u2191\n } @else {\n \u2193\n }\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (displayData().length === 0) {\n <tr>\n <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\" class=\"lc-table__empty\">\n {{ emptyText() }}\n </td>\n </tr>\n } @else {\n @for (row of displayData(); track $index; let i = $index) {\n <tr\n [class.lc-table__row--selected]=\"selectable() && isRowSelected(i)\"\n (click)=\"onRowClick(row)\"\n >\n @if (selectable()) {\n <td class=\"lc-table__select-cell\">\n <input\n type=\"checkbox\"\n class=\"lc-table__checkbox\"\n [checked]=\"isRowSelected($index)\"\n (change)=\"toggleRowSelect($index)\"\n (click)=\"$event.stopPropagation()\"\n [attr.aria-label]=\"'Select row ' + ($index + 1)\"\n />\n </td>\n }\n @for (column of columns(); track column.key) {\n <td\n [class]=\"getCellClasses(row, column, i)\"\n [ngStyle]=\"getCellStyles(row, column, i)\"\n (dblclick)=\"editable() ? startEdit($index, column.key, getCellValue(row, column.key)) : null\"\n >\n @if (isEditing($index, column.key)) {\n <input\n type=\"text\"\n class=\"lc-table__edit-input\"\n [value]=\"editValue()\"\n (input)=\"editValue.set(getInputValue($event))\"\n (blur)=\"commitEdit($index, column.key)\"\n (keydown)=\"onEditKeydown($event, $index, column.key)\"\n autofocus\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, i) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Pagination -->\n@if (paginate()) {\n <div class=\"lc-table-pagination\">\n <div class=\"lc-table-pagination__info\">\n {{ paginationStart }}\u2013{{ paginationEnd }} of {{ totalRows() }}\n </div>\n <div class=\"lc-table-pagination__controls\">\n <select\n class=\"lc-table-pagination__size\"\n [value]=\"internalPageSize()\"\n (change)=\"onPageSizeChange($event)\"\n aria-label=\"Rows per page\"\n >\n @for (opt of pageSizeOptions(); track opt) {\n <option [value]=\"opt\">{{ opt }} / page</option>\n }\n </select>\n <button\n type=\"button\"\n class=\"lc-table-pagination__btn\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n aria-label=\"Previous page\"\n >\u2039</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 aria-label=\"Next page\"\n >\u203A</button>\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-background);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface);border-bottom:2px solid var(--color-border)}.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);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:hover{background-color:var(--color-neutral-100);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-neutral-100);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.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));font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;color:var(--color-text-secondary);font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-50)}.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{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-100)}.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));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);font-size:var(--typography-font-size-base)}[data-theme=dark] .lc-table,:root[data-theme=dark] .lc-table{background-color:var(--color-neutral-900)}[data-theme=dark] .lc-table thead,:root[data-theme=dark] .lc-table thead{background-color:var(--color-neutral-800);border-bottom-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th,:root[data-theme=dark] .lc-table thead tr th{color:var(--color-text-primary);background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table thead tr th.sortable:hover,:root[data-theme=dark] .lc-table thead tr th.sortable:hover{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th.sorted-asc,[data-theme=dark] .lc-table thead tr th.sorted-desc,:root[data-theme=dark] .lc-table thead tr th.sorted-asc,:root[data-theme=dark] .lc-table thead tr th.sorted-desc{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n),:root[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover,:root[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-700)}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-background)!important;border-bottom:1px solid var(--color-divider)!important}.lc-table__filter-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-xs);background-color:var(--color-background);color:var(--color-text-primary);transition:border-color .15s ease}.lc-table__filter-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.lc-table__filter-input::placeholder{color:var(--color-text-secondary);opacity:.6}.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-primary-50, rgba(59, 130, 246, .08))!important}.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-background);color:var(--color-text-primary);outline:none}.lc-table-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{appearance:none;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);background-color:var(--color-background);color:var(--color-text-primary);font-size:var(--typography-font-size-xs);cursor:pointer}.lc-table-pagination__btn{appearance:none;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-primary);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-base);cursor:pointer;transition:background-color .15s ease}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-100)}.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)}}[data-theme=dark] .lc-table__filter-input,:root[data-theme=dark] .lc-table__filter-input{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table__edit-input,:root[data-theme=dark] .lc-table__edit-input{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table__row--selected,:root[data-theme=dark] .lc-table__row--selected{background-color:#3b82f61f!important}[data-theme=dark] .lc-table-pagination__size,[data-theme=dark] .lc-table-pagination__btn,:root[data-theme=dark] .lc-table-pagination__size,:root[data-theme=dark] .lc-table-pagination__btn{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table-pagination__size:hover:not(:disabled),[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled),:root[data-theme=dark] .lc-table-pagination__size:hover:not(:disabled),:root[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-700)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7304
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TableComponent, isStandalone: true, selector: "lc-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, paginate: { classPropertyName: "paginate", publicName: "paginate", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sort", rowClick: "rowClick", cellEdit: "cellEdit", selectionChange: "selectionChange" }, queries: [{ propertyName: "cellTemplates", predicate: TableCellDirective }], ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\n <table [class]=\"tableClasses()\" role=\"table\">\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]=\"'Filter ' + column.label\"\n [ariaLabel]=\"'Filter by ' + column.label\"\n [ngModel]=\"getFilterValue(column.key)\"\n (ngModelChange)=\"onFilterChange(column.key, $event)\"\n />\n }\n </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 (change)=\"toggleSelectAll()\"\n aria-label=\"Select all rows\"\n />\n </th>\n }\n @for (column of columns(); track column.key) {\n <th\n scope=\"col\"\n [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n [attr.aria-sort]=\"getAriaSort(column.key)\"\n [style.width]=\"column.width\"\n [title]=\"column.tooltip || ''\"\n (click)=\"handleSort(column.key)\">\n {{ column.label }}\n @if (column.sortable && getSortState(column.key)) {\n <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? 'sorted ascending' : 'sorted descending'\">\n @if (getSortState(column.key) === 'asc') {\n \u2191\n } @else {\n \u2193\n }\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (displayData().length === 0) {\n <tr>\n <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\" class=\"lc-table__empty\">\n {{ emptyText() }}\n </td>\n </tr>\n } @else {\n @for (row of displayData(); track $index; let i = $index) {\n <tr\n [class.lc-table__row--selected]=\"selectable() && isRowSelected(i)\"\n (click)=\"onRowClick(row)\"\n >\n @if (selectable()) {\n <td class=\"lc-table__select-cell\">\n <input\n type=\"checkbox\"\n class=\"lc-table__checkbox\"\n [checked]=\"isRowSelected($index)\"\n (change)=\"toggleRowSelect($index)\"\n (click)=\"$event.stopPropagation()\"\n [attr.aria-label]=\"'Select row ' + ($index + 1)\"\n />\n </td>\n }\n @for (column of columns(); track column.key) {\n <td\n [class]=\"getCellClasses(row, column, i)\"\n [ngStyle]=\"getCellStyles(row, column, i)\"\n (dblclick)=\"editable() ? startEdit($index, column.key, getCellValue(row, column.key)) : null\"\n >\n @if (isEditing($index, column.key)) {\n <input\n type=\"text\"\n class=\"lc-table__edit-input\"\n [value]=\"editValue()\"\n (input)=\"editValue.set(getInputValue($event))\"\n (blur)=\"commitEdit($index, column.key)\"\n (keydown)=\"onEditKeydown($event, $index, column.key)\"\n autofocus\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, i) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Pagination -->\n@if (paginate()) {\n <div class=\"lc-table-pagination\">\n <div class=\"lc-table-pagination__info\">\n {{ paginationStart }}\u2013{{ paginationEnd }} of {{ totalRows() }}\n </div>\n <div class=\"lc-table-pagination__controls\">\n <lc-select\n class=\"lc-table-pagination__size\"\n [size]=\"size() === 'sm' ? 'sm' : size() === 'lg' ? 'lg' : 'md'\"\n [options]=\"pageSizeSelectOptions()\"\n [ngModel]=\"internalPageSize()\"\n [ariaLabel]=\"'Rows per page'\"\n (ngModelChange)=\"onPageSizeModelChange($event)\"\n />\n <button\n type=\"button\"\n class=\"lc-table-pagination__btn\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n aria-label=\"Previous page\"\n >\u2039</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 aria-label=\"Next page\"\n >\u203A</button>\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-background);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface);border-bottom:2px solid var(--color-border)}.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);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:hover{background-color:var(--color-neutral-100);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-neutral-100);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.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));font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;color:var(--color-text-secondary);font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-50)}.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{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-100)}.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));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);font-size:var(--typography-font-size-base)}[data-theme=dark] .lc-table,:root[data-theme=dark] .lc-table{background-color:var(--color-neutral-900)}[data-theme=dark] .lc-table thead,:root[data-theme=dark] .lc-table thead{background-color:var(--color-neutral-800);border-bottom-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th,:root[data-theme=dark] .lc-table thead tr th{color:var(--color-text-primary);background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table thead tr th.sortable:hover,:root[data-theme=dark] .lc-table thead tr th.sortable:hover{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th.sorted-asc,[data-theme=dark] .lc-table thead tr th.sorted-desc,:root[data-theme=dark] .lc-table thead tr th.sorted-asc,:root[data-theme=dark] .lc-table thead tr th.sorted-desc{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n),:root[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover,:root[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-700)}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-background)!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-primary-50, rgba(59, 130, 246, .08))!important}.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-background);color:var(--color-text-primary);outline:none}.lc-table-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{display:block;min-width:110px}.lc-table-pagination__btn{appearance:none;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-primary);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-base);cursor:pointer;transition:background-color .15s ease}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-100)}.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)}}[data-theme=dark] .lc-table__filter-input,:root[data-theme=dark] .lc-table__filter-input{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table__edit-input,:root[data-theme=dark] .lc-table__edit-input{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table__row--selected,:root[data-theme=dark] .lc-table__row--selected{background-color:#3b82f61f!important}[data-theme=dark] .lc-table-pagination__btn,:root[data-theme=dark] .lc-table-pagination__btn{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled),:root[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-700)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "lc-select", inputs: ["variant", "size", "disabled", "error", "required", "loading", "searchable", "multiple", "placeholder", "helperText", "errorMessage", "ariaLabel", "options"], outputs: ["selectionChange", "opened", "closed"] }, { kind: "component", type: InputComponent, selector: "lc-input", inputs: ["label", "placeholder", "type", "size", "disabled", "readonly", "required", "error", "helperText", "iconBefore", "iconAfter", "maxLength", "showCharCount", "ariaLabel"], outputs: ["valueChange", "focused", "blurred", "enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7290
7305
|
}
|
|
7291
7306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TableComponent, decorators: [{
|
|
7292
7307
|
type: Component,
|
|
7293
|
-
args: [{ selector: 'lc-table', standalone: true, imports: [NgTemplateOutlet, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClasses()\">\n <table [class]=\"tableClasses()\" role=\"table\">\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 <input\n type=\"text\"\n class=\"lc-table__filter-input\"\n [placeholder]=\"'Filter ' + column.label\"\n [value]=\"getFilterValue(column.key)\"\n (input)=\"onFilterChange(column.key, $event)\"\n [attr.aria-label]=\"'Filter by ' + column.label\"\n />\n }\n </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 (change)=\"toggleSelectAll()\"\n aria-label=\"Select all rows\"\n />\n </th>\n }\n @for (column of columns(); track column.key) {\n <th\n scope=\"col\"\n [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n [attr.aria-sort]=\"getAriaSort(column.key)\"\n [style.width]=\"column.width\"\n [title]=\"column.tooltip || ''\"\n (click)=\"handleSort(column.key)\">\n {{ column.label }}\n @if (column.sortable && getSortState(column.key)) {\n <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? 'sorted ascending' : 'sorted descending'\">\n @if (getSortState(column.key) === 'asc') {\n \u2191\n } @else {\n \u2193\n }\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (displayData().length === 0) {\n <tr>\n <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\" class=\"lc-table__empty\">\n {{ emptyText() }}\n </td>\n </tr>\n } @else {\n @for (row of displayData(); track $index; let i = $index) {\n <tr\n [class.lc-table__row--selected]=\"selectable() && isRowSelected(i)\"\n (click)=\"onRowClick(row)\"\n >\n @if (selectable()) {\n <td class=\"lc-table__select-cell\">\n <input\n type=\"checkbox\"\n class=\"lc-table__checkbox\"\n [checked]=\"isRowSelected($index)\"\n (change)=\"toggleRowSelect($index)\"\n (click)=\"$event.stopPropagation()\"\n [attr.aria-label]=\"'Select row ' + ($index + 1)\"\n />\n </td>\n }\n @for (column of columns(); track column.key) {\n <td\n [class]=\"getCellClasses(row, column, i)\"\n [ngStyle]=\"getCellStyles(row, column, i)\"\n (dblclick)=\"editable() ? startEdit($index, column.key, getCellValue(row, column.key)) : null\"\n >\n @if (isEditing($index, column.key)) {\n <input\n type=\"text\"\n class=\"lc-table__edit-input\"\n [value]=\"editValue()\"\n (input)=\"editValue.set(getInputValue($event))\"\n (blur)=\"commitEdit($index, column.key)\"\n (keydown)=\"onEditKeydown($event, $index, column.key)\"\n autofocus\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, i) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Pagination -->\n@if (paginate()) {\n <div class=\"lc-table-pagination\">\n <div class=\"lc-table-pagination__info\">\n {{ paginationStart }}\u2013{{ paginationEnd }} of {{ totalRows() }}\n </div>\n <div class=\"lc-table-pagination__controls\">\n <select\n class=\"lc-table-pagination__size\"\n [value]=\"internalPageSize()\"\n (change)=\"onPageSizeChange($event)\"\n aria-label=\"Rows per page\"\n >\n @for (opt of pageSizeOptions(); track opt) {\n <option [value]=\"opt\">{{ opt }} / page</option>\n }\n </select>\n <button\n type=\"button\"\n class=\"lc-table-pagination__btn\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n aria-label=\"Previous page\"\n >\u2039</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 aria-label=\"Next page\"\n >\u203A</button>\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-background);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface);border-bottom:2px solid var(--color-border)}.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);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:hover{background-color:var(--color-neutral-100);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-neutral-100);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.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));font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;color:var(--color-text-secondary);font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-50)}.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{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-100)}.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));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);font-size:var(--typography-font-size-base)}[data-theme=dark] .lc-table,:root[data-theme=dark] .lc-table{background-color:var(--color-neutral-900)}[data-theme=dark] .lc-table thead,:root[data-theme=dark] .lc-table thead{background-color:var(--color-neutral-800);border-bottom-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th,:root[data-theme=dark] .lc-table thead tr th{color:var(--color-text-primary);background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table thead tr th.sortable:hover,:root[data-theme=dark] .lc-table thead tr th.sortable:hover{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th.sorted-asc,[data-theme=dark] .lc-table thead tr th.sorted-desc,:root[data-theme=dark] .lc-table thead tr th.sorted-asc,:root[data-theme=dark] .lc-table thead tr th.sorted-desc{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n),:root[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover,:root[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-700)}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-background)!important;border-bottom:1px solid var(--color-divider)!important}.lc-table__filter-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-xs);background-color:var(--color-background);color:var(--color-text-primary);transition:border-color .15s ease}.lc-table__filter-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.lc-table__filter-input::placeholder{color:var(--color-text-secondary);opacity:.6}.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-primary-50, rgba(59, 130, 246, .08))!important}.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-background);color:var(--color-text-primary);outline:none}.lc-table-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{appearance:none;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);background-color:var(--color-background);color:var(--color-text-primary);font-size:var(--typography-font-size-xs);cursor:pointer}.lc-table-pagination__btn{appearance:none;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-primary);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-base);cursor:pointer;transition:background-color .15s ease}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-100)}.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)}}[data-theme=dark] .lc-table__filter-input,:root[data-theme=dark] .lc-table__filter-input{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table__edit-input,:root[data-theme=dark] .lc-table__edit-input{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table__row--selected,:root[data-theme=dark] .lc-table__row--selected{background-color:#3b82f61f!important}[data-theme=dark] .lc-table-pagination__size,[data-theme=dark] .lc-table-pagination__btn,:root[data-theme=dark] .lc-table-pagination__size,:root[data-theme=dark] .lc-table-pagination__btn{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table-pagination__size:hover:not(:disabled),[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled),:root[data-theme=dark] .lc-table-pagination__size:hover:not(:disabled),:root[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-700)}\n"] }]
|
|
7308
|
+
args: [{ selector: 'lc-table', standalone: true, imports: [NgTemplateOutlet, NgStyle, FormsModule, SelectComponent, InputComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClasses()\">\n <table [class]=\"tableClasses()\" role=\"table\">\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]=\"'Filter ' + column.label\"\n [ariaLabel]=\"'Filter by ' + column.label\"\n [ngModel]=\"getFilterValue(column.key)\"\n (ngModelChange)=\"onFilterChange(column.key, $event)\"\n />\n }\n </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 (change)=\"toggleSelectAll()\"\n aria-label=\"Select all rows\"\n />\n </th>\n }\n @for (column of columns(); track column.key) {\n <th\n scope=\"col\"\n [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n [attr.aria-sort]=\"getAriaSort(column.key)\"\n [style.width]=\"column.width\"\n [title]=\"column.tooltip || ''\"\n (click)=\"handleSort(column.key)\">\n {{ column.label }}\n @if (column.sortable && getSortState(column.key)) {\n <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? 'sorted ascending' : 'sorted descending'\">\n @if (getSortState(column.key) === 'asc') {\n \u2191\n } @else {\n \u2193\n }\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (displayData().length === 0) {\n <tr>\n <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\" class=\"lc-table__empty\">\n {{ emptyText() }}\n </td>\n </tr>\n } @else {\n @for (row of displayData(); track $index; let i = $index) {\n <tr\n [class.lc-table__row--selected]=\"selectable() && isRowSelected(i)\"\n (click)=\"onRowClick(row)\"\n >\n @if (selectable()) {\n <td class=\"lc-table__select-cell\">\n <input\n type=\"checkbox\"\n class=\"lc-table__checkbox\"\n [checked]=\"isRowSelected($index)\"\n (change)=\"toggleRowSelect($index)\"\n (click)=\"$event.stopPropagation()\"\n [attr.aria-label]=\"'Select row ' + ($index + 1)\"\n />\n </td>\n }\n @for (column of columns(); track column.key) {\n <td\n [class]=\"getCellClasses(row, column, i)\"\n [ngStyle]=\"getCellStyles(row, column, i)\"\n (dblclick)=\"editable() ? startEdit($index, column.key, getCellValue(row, column.key)) : null\"\n >\n @if (isEditing($index, column.key)) {\n <input\n type=\"text\"\n class=\"lc-table__edit-input\"\n [value]=\"editValue()\"\n (input)=\"editValue.set(getInputValue($event))\"\n (blur)=\"commitEdit($index, column.key)\"\n (keydown)=\"onEditKeydown($event, $index, column.key)\"\n autofocus\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, i) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Pagination -->\n@if (paginate()) {\n <div class=\"lc-table-pagination\">\n <div class=\"lc-table-pagination__info\">\n {{ paginationStart }}\u2013{{ paginationEnd }} of {{ totalRows() }}\n </div>\n <div class=\"lc-table-pagination__controls\">\n <lc-select\n class=\"lc-table-pagination__size\"\n [size]=\"size() === 'sm' ? 'sm' : size() === 'lg' ? 'lg' : 'md'\"\n [options]=\"pageSizeSelectOptions()\"\n [ngModel]=\"internalPageSize()\"\n [ariaLabel]=\"'Rows per page'\"\n (ngModelChange)=\"onPageSizeModelChange($event)\"\n />\n <button\n type=\"button\"\n class=\"lc-table-pagination__btn\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n aria-label=\"Previous page\"\n >\u2039</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 aria-label=\"Next page\"\n >\u203A</button>\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-background);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface);border-bottom:2px solid var(--color-border)}.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);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:hover{background-color:var(--color-neutral-100);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-neutral-100);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.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));font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;color:var(--color-text-secondary);font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-50)}.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{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-100)}.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));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);font-size:var(--typography-font-size-base)}[data-theme=dark] .lc-table,:root[data-theme=dark] .lc-table{background-color:var(--color-neutral-900)}[data-theme=dark] .lc-table thead,:root[data-theme=dark] .lc-table thead{background-color:var(--color-neutral-800);border-bottom-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th,:root[data-theme=dark] .lc-table thead tr th{color:var(--color-text-primary);background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table thead tr th.sortable:hover,:root[data-theme=dark] .lc-table thead tr th.sortable:hover{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th.sorted-asc,[data-theme=dark] .lc-table thead tr th.sorted-desc,:root[data-theme=dark] .lc-table thead tr th.sorted-asc,:root[data-theme=dark] .lc-table thead tr th.sorted-desc{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n),:root[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover,:root[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-700)}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-background)!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-primary-50, rgba(59, 130, 246, .08))!important}.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-background);color:var(--color-text-primary);outline:none}.lc-table-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{display:block;min-width:110px}.lc-table-pagination__btn{appearance:none;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-primary);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-base);cursor:pointer;transition:background-color .15s ease}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-100)}.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)}}[data-theme=dark] .lc-table__filter-input,:root[data-theme=dark] .lc-table__filter-input{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table__edit-input,:root[data-theme=dark] .lc-table__edit-input{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table__row--selected,:root[data-theme=dark] .lc-table__row--selected{background-color:#3b82f61f!important}[data-theme=dark] .lc-table-pagination__btn,:root[data-theme=dark] .lc-table-pagination__btn{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled),:root[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-700)}\n"] }]
|
|
7294
7309
|
}], propDecorators: { cellTemplates: [{
|
|
7295
7310
|
type: ContentChildren,
|
|
7296
7311
|
args: [TableCellDirective]
|
|
@@ -7484,15 +7499,20 @@ class FilterBarComponent {
|
|
|
7484
7499
|
getValue(key) {
|
|
7485
7500
|
return this.values()[key] ?? '';
|
|
7486
7501
|
}
|
|
7502
|
+
getSelectOptions(options) {
|
|
7503
|
+
return options ? options.map((opt) => ({ ...opt })) : [];
|
|
7504
|
+
}
|
|
7487
7505
|
/** Handle select / toggle change */
|
|
7488
7506
|
onFilterChange(key, value) {
|
|
7489
7507
|
const updated = { ...this.values(), [key]: value };
|
|
7490
7508
|
this.valuesChange.emit(updated);
|
|
7491
7509
|
}
|
|
7492
7510
|
/** Handle search input */
|
|
7493
|
-
onSearchInput(key,
|
|
7494
|
-
|
|
7495
|
-
|
|
7511
|
+
onSearchInput(key, value) {
|
|
7512
|
+
this.onFilterChange(key, value);
|
|
7513
|
+
}
|
|
7514
|
+
normalizeSelectValue(value) {
|
|
7515
|
+
return value == null ? '' : String(value);
|
|
7496
7516
|
}
|
|
7497
7517
|
/** Check if a toggle option is active */
|
|
7498
7518
|
isToggleActive(key, optionValue) {
|
|
@@ -7509,15 +7529,12 @@ class FilterBarComponent {
|
|
|
7509
7529
|
}
|
|
7510
7530
|
return classes.join(' ');
|
|
7511
7531
|
}
|
|
7512
|
-
getInputValue(event) {
|
|
7513
|
-
return event.target.value;
|
|
7514
|
-
}
|
|
7515
7532
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7516
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FilterBarComponent, isStandalone: true, selector: "lc-filter-bar", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: true, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valuesChange: "valuesChange" }, ngImport: i0, template: "<div class=\"lc-filter-bar\" [class]=\"sizeClass()\">\n @for (filter of filters(); track filter.key) {\n <div class=\"lc-filter-bar__item\">\n @if (filter.label) {\n <label class=\"lc-filter-bar__label\">{{ filter.label }}</label>\n }\n\n @switch (filter.type) {\n @case ('select') {\n <
|
|
7533
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FilterBarComponent, isStandalone: true, selector: "lc-filter-bar", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: true, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valuesChange: "valuesChange" }, ngImport: i0, template: "<div class=\"lc-filter-bar\" [class]=\"sizeClass()\">\n @for (filter of filters(); track filter.key) {\n <div class=\"lc-filter-bar__item\">\n @if (filter.label) {\n <label class=\"lc-filter-bar__label\">{{ filter.label }}</label>\n }\n\n @switch (filter.type) {\n @case ('select') {\n <lc-select\n class=\"lc-filter-bar__select\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [placeholder]=\"filter.placeholder ?? 'Select an option'\"\n [options]=\"getSelectOptions(filter.options)\"\n [ariaLabel]=\"filter.label || filter.placeholder || filter.key\"\n [ngModel]=\"getValue(filter.key)\"\n (ngModelChange)=\"onFilterChange(filter.key, normalizeSelectValue($event))\"\n />\n }\n\n @case ('toggle') {\n <div class=\"lc-filter-bar__toggle-group\">\n @for (opt of filter.options; track opt.value) {\n <button\n type=\"button\"\n [class]=\"getToggleClasses(filter.key, opt)\"\n [disabled]=\"opt.disabled ?? false\"\n (click)=\"onFilterChange(filter.key, opt.value)\"\n >\n {{ opt.label }}\n </button>\n }\n </div>\n }\n\n @case ('search') {\n <lc-search-input\n class=\"lc-filter-bar__search\"\n [placeholder]=\"filter.placeholder ?? 'Search...'\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [debounceMs]=\"0\"\n (searchChange)=\"onSearchInput(filter.key, $event)\"\n />\n }\n }\n </div>\n }\n</div>\n", styles: [".lc-filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem}.lc-filter-bar__item{display:flex;flex-direction:column;gap:.25rem}.lc-filter-bar__label{font-size:var(--font-size-xs, .75rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-500, #6b7280);text-transform:uppercase;letter-spacing:.05em}[data-theme=dark] .lc-filter-bar__label,:root[data-theme=dark] .lc-filter-bar__label{color:var(--color-neutral-400, #9ca3af)}.lc-filter-bar__select{display:block;min-width:140px}.lc-filter-bar__toggle-group{display:inline-flex;border-radius:.5rem;border:1px solid var(--color-neutral-300, #d1d5db);background-color:var(--color-neutral-100, #f3f4f6);overflow:hidden}[data-theme=dark] .lc-filter-bar__toggle-group,:root[data-theme=dark] .lc-filter-bar__toggle-group{border-color:var(--color-neutral-600, #4b5563);background-color:var(--color-surface-dark, #1f2937)}.lc-filter-bar__toggle-btn{padding:.5rem .75rem;font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-600, #4b5563);transition:color .15s ease,background-color .15s ease;border:none;background:transparent;cursor:pointer}.lc-filter-bar__toggle-btn:hover{color:var(--color-neutral-900, #111827);background-color:var(--color-neutral-200, #e5e7eb)}[data-theme=dark] .lc-filter-bar__toggle-btn,:root[data-theme=dark] .lc-filter-bar__toggle-btn{color:var(--color-neutral-400, #9ca3af)}[data-theme=dark] .lc-filter-bar__toggle-btn:hover,:root[data-theme=dark] .lc-filter-bar__toggle-btn:hover{color:var(--color-neutral-100, #f3f4f6);background-color:var(--color-neutral-700, #374151)}.lc-filter-bar__toggle-btn--active{background-color:var(--color-surface, #ffffff);color:var(--color-neutral-900, #111827);box-shadow:0 1px 2px #0000000d}[data-theme=dark] .lc-filter-bar__toggle-btn--active,:root[data-theme=dark] .lc-filter-bar__toggle-btn--active{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-100, #f3f4f6)}.lc-filter-bar__toggle-btn--disabled{cursor:not-allowed;opacity:.5}.lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn{border-left:1px solid var(--color-neutral-300, #d1d5db)}[data-theme=dark] .lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn,:root[data-theme=dark] .lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn{border-left-color:var(--color-neutral-600, #4b5563)}.lc-filter-bar__search{display:block;min-width:200px}.lc-filter-bar--sm .lc-filter-bar__select,.lc-filter-bar--sm .lc-filter-bar__toggle-btn{padding-top:.375rem;padding-bottom:.375rem;font-size:var(--font-size-xs, .75rem)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "lc-select", inputs: ["variant", "size", "disabled", "error", "required", "loading", "searchable", "multiple", "placeholder", "helperText", "errorMessage", "ariaLabel", "options"], outputs: ["selectionChange", "opened", "closed"] }, { kind: "component", type: SearchInputComponent, selector: "lc-search-input", inputs: ["placeholder", "size", "debounceMs", "disabled"], outputs: ["searchChange", "searchSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7517
7534
|
}
|
|
7518
7535
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FilterBarComponent, decorators: [{
|
|
7519
7536
|
type: Component,
|
|
7520
|
-
args: [{ selector: 'lc-filter-bar', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-filter-bar\" [class]=\"sizeClass()\">\n @for (filter of filters(); track filter.key) {\n <div class=\"lc-filter-bar__item\">\n @if (filter.label) {\n <label class=\"lc-filter-bar__label\">{{ filter.label }}</label>\n }\n\n @switch (filter.type) {\n @case ('select') {\n <
|
|
7537
|
+
args: [{ selector: 'lc-filter-bar', standalone: true, imports: [FormsModule, SelectComponent, SearchInputComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-filter-bar\" [class]=\"sizeClass()\">\n @for (filter of filters(); track filter.key) {\n <div class=\"lc-filter-bar__item\">\n @if (filter.label) {\n <label class=\"lc-filter-bar__label\">{{ filter.label }}</label>\n }\n\n @switch (filter.type) {\n @case ('select') {\n <lc-select\n class=\"lc-filter-bar__select\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [placeholder]=\"filter.placeholder ?? 'Select an option'\"\n [options]=\"getSelectOptions(filter.options)\"\n [ariaLabel]=\"filter.label || filter.placeholder || filter.key\"\n [ngModel]=\"getValue(filter.key)\"\n (ngModelChange)=\"onFilterChange(filter.key, normalizeSelectValue($event))\"\n />\n }\n\n @case ('toggle') {\n <div class=\"lc-filter-bar__toggle-group\">\n @for (opt of filter.options; track opt.value) {\n <button\n type=\"button\"\n [class]=\"getToggleClasses(filter.key, opt)\"\n [disabled]=\"opt.disabled ?? false\"\n (click)=\"onFilterChange(filter.key, opt.value)\"\n >\n {{ opt.label }}\n </button>\n }\n </div>\n }\n\n @case ('search') {\n <lc-search-input\n class=\"lc-filter-bar__search\"\n [placeholder]=\"filter.placeholder ?? 'Search...'\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [debounceMs]=\"0\"\n (searchChange)=\"onSearchInput(filter.key, $event)\"\n />\n }\n }\n </div>\n }\n</div>\n", styles: [".lc-filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem}.lc-filter-bar__item{display:flex;flex-direction:column;gap:.25rem}.lc-filter-bar__label{font-size:var(--font-size-xs, .75rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-500, #6b7280);text-transform:uppercase;letter-spacing:.05em}[data-theme=dark] .lc-filter-bar__label,:root[data-theme=dark] .lc-filter-bar__label{color:var(--color-neutral-400, #9ca3af)}.lc-filter-bar__select{display:block;min-width:140px}.lc-filter-bar__toggle-group{display:inline-flex;border-radius:.5rem;border:1px solid var(--color-neutral-300, #d1d5db);background-color:var(--color-neutral-100, #f3f4f6);overflow:hidden}[data-theme=dark] .lc-filter-bar__toggle-group,:root[data-theme=dark] .lc-filter-bar__toggle-group{border-color:var(--color-neutral-600, #4b5563);background-color:var(--color-surface-dark, #1f2937)}.lc-filter-bar__toggle-btn{padding:.5rem .75rem;font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-600, #4b5563);transition:color .15s ease,background-color .15s ease;border:none;background:transparent;cursor:pointer}.lc-filter-bar__toggle-btn:hover{color:var(--color-neutral-900, #111827);background-color:var(--color-neutral-200, #e5e7eb)}[data-theme=dark] .lc-filter-bar__toggle-btn,:root[data-theme=dark] .lc-filter-bar__toggle-btn{color:var(--color-neutral-400, #9ca3af)}[data-theme=dark] .lc-filter-bar__toggle-btn:hover,:root[data-theme=dark] .lc-filter-bar__toggle-btn:hover{color:var(--color-neutral-100, #f3f4f6);background-color:var(--color-neutral-700, #374151)}.lc-filter-bar__toggle-btn--active{background-color:var(--color-surface, #ffffff);color:var(--color-neutral-900, #111827);box-shadow:0 1px 2px #0000000d}[data-theme=dark] .lc-filter-bar__toggle-btn--active,:root[data-theme=dark] .lc-filter-bar__toggle-btn--active{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-100, #f3f4f6)}.lc-filter-bar__toggle-btn--disabled{cursor:not-allowed;opacity:.5}.lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn{border-left:1px solid var(--color-neutral-300, #d1d5db)}[data-theme=dark] .lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn,:root[data-theme=dark] .lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn{border-left-color:var(--color-neutral-600, #4b5563)}.lc-filter-bar__search{display:block;min-width:200px}.lc-filter-bar--sm .lc-filter-bar__select,.lc-filter-bar--sm .lc-filter-bar__toggle-btn{padding-top:.375rem;padding-bottom:.375rem;font-size:var(--font-size-xs, .75rem)}\n"] }]
|
|
7521
7538
|
}], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: true }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], valuesChange: [{ type: i0.Output, args: ["valuesChange"] }] } });
|
|
7522
7539
|
|
|
7523
7540
|
/**
|
|
@@ -12162,6 +12179,328 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
12162
12179
|
args: ['document:mouseup']
|
|
12163
12180
|
}] } });
|
|
12164
12181
|
|
|
12182
|
+
/**
|
|
12183
|
+
* File-type → icon mapping for the TreeView component.
|
|
12184
|
+
*
|
|
12185
|
+
* Icon names refer to Tabler Icons (the design system's icon source).
|
|
12186
|
+
* Resolution order for a file node:
|
|
12187
|
+
* 1. explicit `node.icon`
|
|
12188
|
+
* 2. exact file name match (e.g. `package.json`, `Dockerfile`)
|
|
12189
|
+
* 3. file extension match (e.g. `.ts`, `.png`)
|
|
12190
|
+
* 4. generic file fallback
|
|
12191
|
+
*/
|
|
12192
|
+
/** Icon used for collapsed folders. */
|
|
12193
|
+
const FOLDER_ICON = 'folder';
|
|
12194
|
+
/** Icon used for expanded (open) folders. */
|
|
12195
|
+
const FOLDER_OPEN_ICON = 'folder-open';
|
|
12196
|
+
/** Generic fallback icon for files with no specific match. */
|
|
12197
|
+
const FILE_FALLBACK_ICON = 'file';
|
|
12198
|
+
/** Map of well-known file names (lower-cased) to icons. */
|
|
12199
|
+
const FILE_NAME_ICONS = {
|
|
12200
|
+
'package.json': 'brand-npm',
|
|
12201
|
+
'package-lock.json': 'brand-npm',
|
|
12202
|
+
'yarn.lock': 'brand-yarn',
|
|
12203
|
+
'pnpm-lock.yaml': 'brand-pnpm',
|
|
12204
|
+
'dockerfile': 'brand-docker',
|
|
12205
|
+
'docker-compose.yml': 'brand-docker',
|
|
12206
|
+
'docker-compose.yaml': 'brand-docker',
|
|
12207
|
+
'.gitignore': 'brand-git',
|
|
12208
|
+
'.gitattributes': 'brand-git',
|
|
12209
|
+
'.gitmodules': 'brand-git',
|
|
12210
|
+
'readme.md': 'book',
|
|
12211
|
+
'license': 'license',
|
|
12212
|
+
'license.md': 'license',
|
|
12213
|
+
'.env': 'key',
|
|
12214
|
+
'.env.local': 'key',
|
|
12215
|
+
'.editorconfig': 'settings',
|
|
12216
|
+
'.prettierrc': 'settings',
|
|
12217
|
+
'.eslintrc': 'settings',
|
|
12218
|
+
'tsconfig.json': 'brand-typescript',
|
|
12219
|
+
'angular.json': 'brand-angular',
|
|
12220
|
+
'nx.json': 'settings',
|
|
12221
|
+
'makefile': 'terminal',
|
|
12222
|
+
};
|
|
12223
|
+
/** Map of file extensions (without dot, lower-cased) to icons. */
|
|
12224
|
+
const FILE_EXT_ICONS = {
|
|
12225
|
+
// Languages
|
|
12226
|
+
ts: 'brand-typescript',
|
|
12227
|
+
tsx: 'brand-typescript',
|
|
12228
|
+
js: 'brand-javascript',
|
|
12229
|
+
jsx: 'brand-javascript',
|
|
12230
|
+
mjs: 'brand-javascript',
|
|
12231
|
+
cjs: 'brand-javascript',
|
|
12232
|
+
html: 'brand-html5',
|
|
12233
|
+
htm: 'brand-html5',
|
|
12234
|
+
css: 'brand-css3',
|
|
12235
|
+
scss: 'brand-sass',
|
|
12236
|
+
sass: 'brand-sass',
|
|
12237
|
+
less: 'brand-css3',
|
|
12238
|
+
py: 'brand-python',
|
|
12239
|
+
rb: 'diamond',
|
|
12240
|
+
go: 'brand-golang',
|
|
12241
|
+
rs: 'brand-rust',
|
|
12242
|
+
java: 'coffee',
|
|
12243
|
+
kt: 'brand-kotlin',
|
|
12244
|
+
swift: 'brand-swift',
|
|
12245
|
+
c: 'file-code',
|
|
12246
|
+
h: 'file-code',
|
|
12247
|
+
cpp: 'brand-cpp',
|
|
12248
|
+
cs: 'brand-c-sharp',
|
|
12249
|
+
php: 'brand-php',
|
|
12250
|
+
dart: 'brand-flutter',
|
|
12251
|
+
sh: 'terminal-2',
|
|
12252
|
+
bash: 'terminal-2',
|
|
12253
|
+
zsh: 'terminal-2',
|
|
12254
|
+
sql: 'database',
|
|
12255
|
+
// Data / config
|
|
12256
|
+
json: 'braces',
|
|
12257
|
+
jsonc: 'braces',
|
|
12258
|
+
yml: 'file-code',
|
|
12259
|
+
yaml: 'file-code',
|
|
12260
|
+
toml: 'file-code',
|
|
12261
|
+
xml: 'file-code',
|
|
12262
|
+
ini: 'settings',
|
|
12263
|
+
env: 'key',
|
|
12264
|
+
// Docs
|
|
12265
|
+
md: 'markdown',
|
|
12266
|
+
mdx: 'markdown',
|
|
12267
|
+
txt: 'file-text',
|
|
12268
|
+
pdf: 'file-type-pdf',
|
|
12269
|
+
doc: 'file-text',
|
|
12270
|
+
docx: 'file-text',
|
|
12271
|
+
csv: 'file-spreadsheet',
|
|
12272
|
+
xls: 'file-spreadsheet',
|
|
12273
|
+
xlsx: 'file-spreadsheet',
|
|
12274
|
+
// Images
|
|
12275
|
+
png: 'photo',
|
|
12276
|
+
jpg: 'photo',
|
|
12277
|
+
jpeg: 'photo',
|
|
12278
|
+
gif: 'photo',
|
|
12279
|
+
webp: 'photo',
|
|
12280
|
+
svg: 'file-vector',
|
|
12281
|
+
ico: 'photo',
|
|
12282
|
+
bmp: 'photo',
|
|
12283
|
+
// Media
|
|
12284
|
+
mp3: 'music',
|
|
12285
|
+
wav: 'music',
|
|
12286
|
+
mp4: 'video',
|
|
12287
|
+
mov: 'video',
|
|
12288
|
+
webm: 'video',
|
|
12289
|
+
// Archives
|
|
12290
|
+
zip: 'file-zip',
|
|
12291
|
+
tar: 'file-zip',
|
|
12292
|
+
gz: 'file-zip',
|
|
12293
|
+
rar: 'file-zip',
|
|
12294
|
+
'7z': 'file-zip',
|
|
12295
|
+
// Fonts
|
|
12296
|
+
woff: 'typography',
|
|
12297
|
+
woff2: 'typography',
|
|
12298
|
+
ttf: 'typography',
|
|
12299
|
+
otf: 'typography',
|
|
12300
|
+
// Misc
|
|
12301
|
+
lock: 'lock',
|
|
12302
|
+
};
|
|
12303
|
+
/**
|
|
12304
|
+
* Resolve the icon name for a file based on its name.
|
|
12305
|
+
* Performs exact-name then extension lookup, falling back to a generic file icon.
|
|
12306
|
+
*/
|
|
12307
|
+
function resolveFileIcon(fileName) {
|
|
12308
|
+
const lower = fileName.toLowerCase();
|
|
12309
|
+
const byName = FILE_NAME_ICONS[lower];
|
|
12310
|
+
if (byName)
|
|
12311
|
+
return byName;
|
|
12312
|
+
const dotIndex = lower.lastIndexOf('.');
|
|
12313
|
+
if (dotIndex > 0 && dotIndex < lower.length - 1) {
|
|
12314
|
+
const ext = lower.slice(dotIndex + 1);
|
|
12315
|
+
const byExt = FILE_EXT_ICONS[ext];
|
|
12316
|
+
if (byExt)
|
|
12317
|
+
return byExt;
|
|
12318
|
+
}
|
|
12319
|
+
return FILE_FALLBACK_ICON;
|
|
12320
|
+
}
|
|
12321
|
+
|
|
12322
|
+
const BADGE_STATUS_COLOR = {
|
|
12323
|
+
default: 'var(--color-neutral-400)',
|
|
12324
|
+
added: 'var(--color-success-default, #16a34a)',
|
|
12325
|
+
modified: 'var(--color-warning-default, #d97706)',
|
|
12326
|
+
removed: 'var(--color-error-default, #dc2626)',
|
|
12327
|
+
muted: 'var(--color-neutral-300)',
|
|
12328
|
+
};
|
|
12329
|
+
function nodeType(node) {
|
|
12330
|
+
return node.type ?? (node.children ? 'folder' : 'file');
|
|
12331
|
+
}
|
|
12332
|
+
/**
|
|
12333
|
+
* Tree view component for visualizing file / folder hierarchies such as a
|
|
12334
|
+
* complete GitHub project.
|
|
12335
|
+
*
|
|
12336
|
+
* Features:
|
|
12337
|
+
* - Recursive folder / file rendering from a single `nodes` input
|
|
12338
|
+
* - Automatic file-type icons by extension and well-known file name,
|
|
12339
|
+
* with open / closed folder icons
|
|
12340
|
+
* - Expand / collapse folders, with expand-all / collapse-all helpers
|
|
12341
|
+
* - Two-way bound selection and a `nodeClick` event
|
|
12342
|
+
* - Indentation guide lines for readability
|
|
12343
|
+
* - Optional per-node status badges (added / modified / removed)
|
|
12344
|
+
* - Keyboard accessible (Enter / Space to toggle or select)
|
|
12345
|
+
* - Dark / light theme support via design tokens
|
|
12346
|
+
*
|
|
12347
|
+
* @example
|
|
12348
|
+
* ```html
|
|
12349
|
+
* <lc-tree-view [nodes]="projectTree" [(selectedId)]="selected" />
|
|
12350
|
+
* ```
|
|
12351
|
+
*/
|
|
12352
|
+
class TreeViewComponent {
|
|
12353
|
+
/** The root-level nodes of the tree. */
|
|
12354
|
+
nodes = input.required(...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
|
|
12355
|
+
/** Id (or path) of the currently selected node (two-way bindable). */
|
|
12356
|
+
selectedId = model(null, ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
|
|
12357
|
+
/** Show indentation guide lines. */
|
|
12358
|
+
showGuides = input(true, ...(ngDevMode ? [{ debugName: "showGuides" }] : /* istanbul ignore next */ []));
|
|
12359
|
+
/** Show the expand-all / collapse-all toolbar. */
|
|
12360
|
+
showToolbar = input(true, ...(ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []));
|
|
12361
|
+
/** Icon size for node icons. */
|
|
12362
|
+
iconSize = input('sm', ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
12363
|
+
/** Emitted when a node is clicked / activated. */
|
|
12364
|
+
nodeClick = output();
|
|
12365
|
+
/** Set of node ids the user has explicitly expanded / collapsed. */
|
|
12366
|
+
expandOverrides = signal(new Map(), ...(ngDevMode ? [{ debugName: "expandOverrides" }] : /* istanbul ignore next */ []));
|
|
12367
|
+
/** Flattened, render-ready list of visible nodes. */
|
|
12368
|
+
visibleNodes = computed(() => {
|
|
12369
|
+
const out = [];
|
|
12370
|
+
const overrides = this.expandOverrides();
|
|
12371
|
+
this.flatten(this.nodes(), 0, '', [], overrides, out);
|
|
12372
|
+
return out;
|
|
12373
|
+
}, ...(ngDevMode ? [{ debugName: "visibleNodes" }] : /* istanbul ignore next */ []));
|
|
12374
|
+
badgeColor(status) {
|
|
12375
|
+
return BADGE_STATUS_COLOR[status];
|
|
12376
|
+
}
|
|
12377
|
+
onNodeClick(flat) {
|
|
12378
|
+
if (flat.disabled)
|
|
12379
|
+
return;
|
|
12380
|
+
if (flat.hasChildren) {
|
|
12381
|
+
this.toggle(flat);
|
|
12382
|
+
}
|
|
12383
|
+
this.selectedId.set(flat.id);
|
|
12384
|
+
const original = this.findNode(this.nodes(), '', flat.id);
|
|
12385
|
+
if (original)
|
|
12386
|
+
this.nodeClick.emit(original);
|
|
12387
|
+
}
|
|
12388
|
+
onToggleClick(flat, event) {
|
|
12389
|
+
event.stopPropagation();
|
|
12390
|
+
if (!flat.disabled)
|
|
12391
|
+
this.toggle(flat);
|
|
12392
|
+
}
|
|
12393
|
+
onKeydown(flat, event) {
|
|
12394
|
+
if (flat.disabled)
|
|
12395
|
+
return;
|
|
12396
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
12397
|
+
event.preventDefault();
|
|
12398
|
+
this.onNodeClick(flat);
|
|
12399
|
+
}
|
|
12400
|
+
else if (event.key === 'ArrowRight' && flat.hasChildren && !flat.expanded) {
|
|
12401
|
+
event.preventDefault();
|
|
12402
|
+
this.setExpanded(flat.id, true);
|
|
12403
|
+
}
|
|
12404
|
+
else if (event.key === 'ArrowLeft' && flat.hasChildren && flat.expanded) {
|
|
12405
|
+
event.preventDefault();
|
|
12406
|
+
this.setExpanded(flat.id, false);
|
|
12407
|
+
}
|
|
12408
|
+
}
|
|
12409
|
+
/** Expand every folder in the tree. */
|
|
12410
|
+
expandAll() {
|
|
12411
|
+
this.setAll(true);
|
|
12412
|
+
}
|
|
12413
|
+
/** Collapse every folder in the tree. */
|
|
12414
|
+
collapseAll() {
|
|
12415
|
+
this.setAll(false);
|
|
12416
|
+
}
|
|
12417
|
+
trackById = (_, n) => n.id;
|
|
12418
|
+
// ── internals ──────────────────────────────────────────────────────────────
|
|
12419
|
+
toggle(flat) {
|
|
12420
|
+
this.setExpanded(flat.id, !flat.expanded);
|
|
12421
|
+
}
|
|
12422
|
+
setExpanded(id, value) {
|
|
12423
|
+
this.expandOverrides.update((map) => {
|
|
12424
|
+
const next = new Map(map);
|
|
12425
|
+
next.set(id, value);
|
|
12426
|
+
return next;
|
|
12427
|
+
});
|
|
12428
|
+
}
|
|
12429
|
+
setAll(value) {
|
|
12430
|
+
const next = new Map();
|
|
12431
|
+
const walk = (nodes, parentPath) => {
|
|
12432
|
+
for (const node of nodes) {
|
|
12433
|
+
const id = node.id ?? `${parentPath}/${node.name}`;
|
|
12434
|
+
if (nodeType(node) === 'folder') {
|
|
12435
|
+
next.set(id, value);
|
|
12436
|
+
if (node.children)
|
|
12437
|
+
walk(node.children, id);
|
|
12438
|
+
}
|
|
12439
|
+
}
|
|
12440
|
+
};
|
|
12441
|
+
walk(this.nodes(), '');
|
|
12442
|
+
this.expandOverrides.set(next);
|
|
12443
|
+
}
|
|
12444
|
+
isExpanded(id, node, overrides) {
|
|
12445
|
+
const override = overrides.get(id);
|
|
12446
|
+
if (override !== undefined)
|
|
12447
|
+
return override;
|
|
12448
|
+
return node.expanded ?? false;
|
|
12449
|
+
}
|
|
12450
|
+
flatten(nodes, depth, parentPath, ancestorHasSibling, overrides, out) {
|
|
12451
|
+
nodes.forEach((node, index) => {
|
|
12452
|
+
const id = node.id ?? `${parentPath}/${node.name}`;
|
|
12453
|
+
const type = nodeType(node);
|
|
12454
|
+
const hasChildren = type === 'folder' && !!node.children?.length;
|
|
12455
|
+
const expanded = hasChildren && this.isExpanded(id, node, overrides);
|
|
12456
|
+
const isLast = index === nodes.length - 1;
|
|
12457
|
+
out.push({
|
|
12458
|
+
id,
|
|
12459
|
+
name: node.name,
|
|
12460
|
+
type,
|
|
12461
|
+
depth,
|
|
12462
|
+
hasChildren,
|
|
12463
|
+
expanded,
|
|
12464
|
+
icon: this.resolveIcon(node, type, expanded),
|
|
12465
|
+
badge: node.badge,
|
|
12466
|
+
status: node.status ?? 'default',
|
|
12467
|
+
disabled: node.disabled ?? false,
|
|
12468
|
+
ancestorHasSibling,
|
|
12469
|
+
isLast,
|
|
12470
|
+
});
|
|
12471
|
+
if (expanded && node.children) {
|
|
12472
|
+
this.flatten(node.children, depth + 1, id, [...ancestorHasSibling, !isLast], overrides, out);
|
|
12473
|
+
}
|
|
12474
|
+
});
|
|
12475
|
+
}
|
|
12476
|
+
resolveIcon(node, type, expanded) {
|
|
12477
|
+
if (node.icon)
|
|
12478
|
+
return node.icon;
|
|
12479
|
+
if (type === 'folder')
|
|
12480
|
+
return expanded ? FOLDER_OPEN_ICON : FOLDER_ICON;
|
|
12481
|
+
return node.name ? resolveFileIcon(node.name) : FILE_FALLBACK_ICON;
|
|
12482
|
+
}
|
|
12483
|
+
findNode(nodes, parentPath, targetId) {
|
|
12484
|
+
for (const node of nodes) {
|
|
12485
|
+
const id = node.id ?? `${parentPath}/${node.name}`;
|
|
12486
|
+
if (id === targetId)
|
|
12487
|
+
return node;
|
|
12488
|
+
if (node.children) {
|
|
12489
|
+
const found = this.findNode(node.children, id, targetId);
|
|
12490
|
+
if (found)
|
|
12491
|
+
return found;
|
|
12492
|
+
}
|
|
12493
|
+
}
|
|
12494
|
+
return null;
|
|
12495
|
+
}
|
|
12496
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12497
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TreeViewComponent, isStandalone: true, selector: "lc-tree-view", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, showGuides: { classPropertyName: "showGuides", publicName: "showGuides", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", nodeClick: "nodeClick" }, host: { classAttribute: "lc-tree-view" }, ngImport: i0, template: "@if (showToolbar()) {\n <div class=\"lc-tree-view__toolbar\">\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"expandAll()\" title=\"Expand all\">\n <lc-icon name=\"fold-down\" size=\"xs\" [decorative]=\"true\" />\n <span>Expand all</span>\n </button>\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"collapseAll()\" title=\"Collapse all\">\n <lc-icon name=\"fold-up\" size=\"xs\" [decorative]=\"true\" />\n <span>Collapse all</span>\n </button>\n </div>\n}\n\n<ul class=\"lc-tree-view__list\" role=\"tree\">\n @for (node of visibleNodes(); track trackById($index, node)) {\n <li\n class=\"lc-tree-view__item\"\n [class.lc-tree-view__item--selected]=\"node.id === selectedId()\"\n [class.lc-tree-view__item--disabled]=\"node.disabled\"\n [class.lc-tree-view__item--folder]=\"node.type === 'folder'\"\n role=\"treeitem\"\n [attr.aria-level]=\"node.depth + 1\"\n [attr.aria-expanded]=\"node.hasChildren ? node.expanded : null\"\n [attr.aria-selected]=\"node.id === selectedId()\"\n [attr.aria-disabled]=\"node.disabled ? true : null\"\n [tabindex]=\"node.disabled ? -1 : 0\"\n (click)=\"onNodeClick(node)\"\n (keydown)=\"onKeydown(node, $event)\"\n >\n <!-- indentation + guide lines -->\n @for (hasSibling of node.ancestorHasSibling; track $index) {\n <span\n class=\"lc-tree-view__indent\"\n [class.lc-tree-view__indent--guide]=\"showGuides() && hasSibling\"\n ></span>\n }\n\n <!-- expand / collapse chevron -->\n <span class=\"lc-tree-view__chevron\">\n @if (node.hasChildren) {\n <button\n type=\"button\"\n class=\"lc-tree-view__chevron-btn\"\n [class.lc-tree-view__chevron-btn--expanded]=\"node.expanded\"\n (click)=\"onToggleClick(node, $event)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </span>\n\n <!-- type / file icon -->\n <span\n class=\"lc-tree-view__icon\"\n [style.color]=\"\n node.status === 'default' ? null : badgeColor(node.status)\n \"\n >\n <lc-icon [name]=\"node.icon\" [size]=\"iconSize()\" [decorative]=\"true\" />\n </span>\n\n <!-- label -->\n <span class=\"lc-tree-view__label\">{{ node.name }}</span>\n\n <!-- badge -->\n @if (node.badge) {\n <span\n class=\"lc-tree-view__badge\"\n [style.color]=\"badgeColor(node.status)\"\n [style.border-color]=\"badgeColor(node.status)\"\n >{{ node.badge }}</span\n >\n }\n </li>\n }\n</ul>\n", styles: [":host{display:block;border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-neutral-0, #fff);overflow:hidden;font-size:13px;color:var(--color-neutral-900)}.lc-tree-view__toolbar{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50);-webkit-user-select:none;user-select:none}.lc-tree-view__tool-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--color-neutral-600);font-size:12px;cursor:pointer;line-height:1}.lc-tree-view__tool-btn:hover{background:var(--color-neutral-100);color:var(--color-neutral-900)}.lc-tree-view__list{list-style:none;margin:0;padding:4px 0}.lc-tree-view__item{display:flex;align-items:center;height:26px;padding-right:8px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;outline:none}.lc-tree-view__item:hover{background:var(--color-neutral-100)}.lc-tree-view__item:focus-visible{box-shadow:inset 0 0 0 2px var(--color-primary-400)}.lc-tree-view__item--selected{background:var(--color-primary-50)}.lc-tree-view__item--selected:hover{background:var(--color-primary-100, var(--color-primary-50))}.lc-tree-view__item--selected .lc-tree-view__label{color:var(--color-primary-700);font-weight:500}.lc-tree-view__item--disabled{opacity:.5;cursor:not-allowed}.lc-tree-view__item--disabled:hover{background:transparent}.lc-tree-view__indent{flex:0 0 18px;width:18px;height:100%;position:relative}.lc-tree-view__indent--guide:before{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--color-neutral-200)}.lc-tree-view__chevron{flex:0 0 18px;width:18px;display:flex;align-items:center;justify-content:center;color:var(--color-neutral-500)}.lc-tree-view__chevron-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;border-radius:3px;transition:transform .12s ease}.lc-tree-view__chevron-btn:hover{background:var(--color-neutral-200)}.lc-tree-view__chevron-btn--expanded{transform:rotate(90deg)}.lc-tree-view__icon{display:flex;align-items:center;margin-right:6px;color:var(--color-neutral-500)}.lc-tree-view__item--folder .lc-tree-view__icon{color:var(--color-primary-500, #6366f1)}.lc-tree-view__label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-neutral-800)}.lc-tree-view__badge{flex:0 0 auto;margin-left:8px;padding:1px 6px;border:1px solid;border-radius:10px;font-size:10px;line-height:1.4;font-weight:600;text-transform:uppercase;letter-spacing:.02em}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12498
|
+
}
|
|
12499
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TreeViewComponent, decorators: [{
|
|
12500
|
+
type: Component,
|
|
12501
|
+
args: [{ selector: 'lc-tree-view', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'lc-tree-view' }, template: "@if (showToolbar()) {\n <div class=\"lc-tree-view__toolbar\">\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"expandAll()\" title=\"Expand all\">\n <lc-icon name=\"fold-down\" size=\"xs\" [decorative]=\"true\" />\n <span>Expand all</span>\n </button>\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"collapseAll()\" title=\"Collapse all\">\n <lc-icon name=\"fold-up\" size=\"xs\" [decorative]=\"true\" />\n <span>Collapse all</span>\n </button>\n </div>\n}\n\n<ul class=\"lc-tree-view__list\" role=\"tree\">\n @for (node of visibleNodes(); track trackById($index, node)) {\n <li\n class=\"lc-tree-view__item\"\n [class.lc-tree-view__item--selected]=\"node.id === selectedId()\"\n [class.lc-tree-view__item--disabled]=\"node.disabled\"\n [class.lc-tree-view__item--folder]=\"node.type === 'folder'\"\n role=\"treeitem\"\n [attr.aria-level]=\"node.depth + 1\"\n [attr.aria-expanded]=\"node.hasChildren ? node.expanded : null\"\n [attr.aria-selected]=\"node.id === selectedId()\"\n [attr.aria-disabled]=\"node.disabled ? true : null\"\n [tabindex]=\"node.disabled ? -1 : 0\"\n (click)=\"onNodeClick(node)\"\n (keydown)=\"onKeydown(node, $event)\"\n >\n <!-- indentation + guide lines -->\n @for (hasSibling of node.ancestorHasSibling; track $index) {\n <span\n class=\"lc-tree-view__indent\"\n [class.lc-tree-view__indent--guide]=\"showGuides() && hasSibling\"\n ></span>\n }\n\n <!-- expand / collapse chevron -->\n <span class=\"lc-tree-view__chevron\">\n @if (node.hasChildren) {\n <button\n type=\"button\"\n class=\"lc-tree-view__chevron-btn\"\n [class.lc-tree-view__chevron-btn--expanded]=\"node.expanded\"\n (click)=\"onToggleClick(node, $event)\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n tabindex=\"-1\"\n >\n <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </span>\n\n <!-- type / file icon -->\n <span\n class=\"lc-tree-view__icon\"\n [style.color]=\"\n node.status === 'default' ? null : badgeColor(node.status)\n \"\n >\n <lc-icon [name]=\"node.icon\" [size]=\"iconSize()\" [decorative]=\"true\" />\n </span>\n\n <!-- label -->\n <span class=\"lc-tree-view__label\">{{ node.name }}</span>\n\n <!-- badge -->\n @if (node.badge) {\n <span\n class=\"lc-tree-view__badge\"\n [style.color]=\"badgeColor(node.status)\"\n [style.border-color]=\"badgeColor(node.status)\"\n >{{ node.badge }}</span\n >\n }\n </li>\n }\n</ul>\n", styles: [":host{display:block;border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-neutral-0, #fff);overflow:hidden;font-size:13px;color:var(--color-neutral-900)}.lc-tree-view__toolbar{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50);-webkit-user-select:none;user-select:none}.lc-tree-view__tool-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--color-neutral-600);font-size:12px;cursor:pointer;line-height:1}.lc-tree-view__tool-btn:hover{background:var(--color-neutral-100);color:var(--color-neutral-900)}.lc-tree-view__list{list-style:none;margin:0;padding:4px 0}.lc-tree-view__item{display:flex;align-items:center;height:26px;padding-right:8px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;outline:none}.lc-tree-view__item:hover{background:var(--color-neutral-100)}.lc-tree-view__item:focus-visible{box-shadow:inset 0 0 0 2px var(--color-primary-400)}.lc-tree-view__item--selected{background:var(--color-primary-50)}.lc-tree-view__item--selected:hover{background:var(--color-primary-100, var(--color-primary-50))}.lc-tree-view__item--selected .lc-tree-view__label{color:var(--color-primary-700);font-weight:500}.lc-tree-view__item--disabled{opacity:.5;cursor:not-allowed}.lc-tree-view__item--disabled:hover{background:transparent}.lc-tree-view__indent{flex:0 0 18px;width:18px;height:100%;position:relative}.lc-tree-view__indent--guide:before{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--color-neutral-200)}.lc-tree-view__chevron{flex:0 0 18px;width:18px;display:flex;align-items:center;justify-content:center;color:var(--color-neutral-500)}.lc-tree-view__chevron-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;border-radius:3px;transition:transform .12s ease}.lc-tree-view__chevron-btn:hover{background:var(--color-neutral-200)}.lc-tree-view__chevron-btn--expanded{transform:rotate(90deg)}.lc-tree-view__icon{display:flex;align-items:center;margin-right:6px;color:var(--color-neutral-500)}.lc-tree-view__item--folder .lc-tree-view__icon{color:var(--color-primary-500, #6366f1)}.lc-tree-view__label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-neutral-800)}.lc-tree-view__badge{flex:0 0 auto;margin-left:8px;padding:1px 6px;border:1px solid;border-radius:10px;font-size:10px;line-height:1.4;font-weight:600;text-transform:uppercase;letter-spacing:.02em}\n"] }]
|
|
12502
|
+
}], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }, { type: i0.Output, args: ["selectedIdChange"] }], showGuides: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGuides", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }] } });
|
|
12503
|
+
|
|
12165
12504
|
const DEFAULT_COLORS$1 = [
|
|
12166
12505
|
'var(--color-primary-500)',
|
|
12167
12506
|
'var(--color-secondary-500)',
|
|
@@ -12966,8 +13305,8 @@ class NotificationCenterComponent {
|
|
|
12966
13305
|
setFilter(filter) {
|
|
12967
13306
|
this.activeFilter.set(filter);
|
|
12968
13307
|
}
|
|
12969
|
-
onSearch(
|
|
12970
|
-
this.searchQuery.set(
|
|
13308
|
+
onSearch(query) {
|
|
13309
|
+
this.searchQuery.set(query);
|
|
12971
13310
|
}
|
|
12972
13311
|
onClick(notification) {
|
|
12973
13312
|
this.notificationClick.emit(notification);
|
|
@@ -12996,11 +13335,11 @@ class NotificationCenterComponent {
|
|
|
12996
13335
|
}
|
|
12997
13336
|
}
|
|
12998
13337
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12999
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: NotificationCenterComponent, isStandalone: true, selector: "lc-notification-center", inputs: { notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, showPriority: { classPropertyName: "showPriority", publicName: "showPriority", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, groupByCategory: { classPropertyName: "groupByCategory", publicName: "groupByCategory", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notificationClick: "notificationClick", notificationDismiss: "notificationDismiss", notificationAction: "notificationAction", markAllRead: "markAllRead", clearAll: "clearAll" }, ngImport: i0, template: "<div class=\"lc-nc\">\n <!-- Header -->\n <div class=\"lc-nc__header\">\n <div class=\"lc-nc__header-left\">\n <h3 class=\"lc-nc__title\">{{ title() }}</h3>\n @if (unreadCount() > 0) {\n <span class=\"lc-nc__badge\">{{ unreadCount() }}</span>\n }\n </div>\n <div class=\"lc-nc__header-actions\">\n @if (unreadCount() > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn\" (click)=\"onMarkAllRead()\">Mark all read</button>\n }\n @if (notifications().length > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn lc-nc__action-btn--danger\" (click)=\"onClearAll()\">Clear all</button>\n }\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"lc-nc__search\">\n <input\n type=\"text\"\n class=\"lc-nc__search-input\"\n placeholder=\"Search notifications\u2026\"\n [value]=\"searchQuery()\"\n (input)=\"onSearch($event)\"\n />\n </div>\n\n <!-- Filters -->\n @if (showFilter()) {\n <div class=\"lc-nc__filters\">\n <button\n type=\"button\"\n class=\"lc-nc__filter\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'all'\"\n (click)=\"setFilter('all')\"\n >All ({{ filterCounts().all }})</button>\n @if (filterCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--error\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'error'\"\n (click)=\"setFilter('error')\"\n >Error ({{ filterCounts().error }})</button>\n }\n @if (filterCounts().warning > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--warning\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'warning'\"\n (click)=\"setFilter('warning')\"\n >Warning ({{ filterCounts().warning }})</button>\n }\n @if (filterCounts().success > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--success\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'success'\"\n (click)=\"setFilter('success')\"\n >Success ({{ filterCounts().success }})</button>\n }\n @if (filterCounts().info > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--info\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'info'\"\n (click)=\"setFilter('info')\"\n >Info ({{ filterCounts().info }})</button>\n }\n </div>\n }\n\n <!-- Notification list -->\n <div class=\"lc-nc__list\" [style.max-height]=\"maxHeight()\">\n @if (!hasNotifications()) {\n <div class=\"lc-nc__empty\">\n <lc-icon name=\"bell\" size=\"lg\" class=\"lc-nc__empty-icon\"></lc-icon>\n <span class=\"lc-nc__empty-text\">{{ emptyMessage() }}</span>\n </div>\n } @else if (groupedNotifications(); as groups) {\n @for (group of groups; track group.category) {\n <div class=\"lc-nc__group\">\n <div class=\"lc-nc__group-header\">{{ group.category }}</div>\n @for (n of group.items; track n.id) {\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <span class=\"lc-nc__item-title\">{{ n.title }}</span>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n aria-label=\"Dismiss notification\"\n >\u00D7</button>\n </div>\n }\n </div>\n }\n } @else {\n @for (n of filteredNotifications(); track n.id) {\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <span class=\"lc-nc__item-title\">{{ n.title }}</span>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n aria-label=\"Dismiss notification\"\n >\u00D7</button>\n </div>\n }\n }\n </div>\n</div>\n", styles: [":host{display:block}.lc-nc{border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-neutral-0, #fff);overflow:hidden}[data-theme=dark] .lc-nc,:root[data-theme=dark] .lc-nc{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-nc__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-neutral-200)}[data-theme=dark] .lc-nc__header,:root[data-theme=dark] .lc-nc__header{border-color:var(--color-neutral-600)}.lc-nc__header-left{display:flex;align-items:center;gap:8px}.lc-nc__title{margin:0;font-size:var(--typography-font-size-base, 1rem);font-weight:600;color:var(--color-neutral-900)}[data-theme=dark] .lc-nc__title,:root[data-theme=dark] .lc-nc__title{color:var(--color-neutral-100)}.lc-nc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--color-error-default);color:#fff;font-size:.6875rem;font-weight:600}.lc-nc__header-actions{display:flex;gap:8px}.lc-nc__action-btn{border:none;background:none;padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:500;cursor:pointer;color:var(--color-primary-600);transition:background .15s}.lc-nc__action-btn:hover{background:var(--color-primary-50)}.lc-nc__action-btn--danger{color:var(--color-error-default)}.lc-nc__action-btn--danger:hover{background:var(--color-error-50, #fef2f2)}.lc-nc__search{padding:8px 16px;border-bottom:1px solid var(--color-neutral-100)}[data-theme=dark] .lc-nc__search,:root[data-theme=dark] .lc-nc__search{border-color:var(--color-neutral-700)}.lc-nc__search-input{width:100%;padding:6px 10px;border:1px solid var(--color-neutral-200);border-radius:6px;font-size:var(--typography-font-size-sm, .875rem);background:var(--color-neutral-50);color:var(--color-neutral-900);outline:none;transition:border-color .15s}.lc-nc__search-input:focus{border-color:var(--color-primary-400)}.lc-nc__search-input::placeholder{color:var(--color-neutral-400)}[data-theme=dark] .lc-nc__search-input,:root[data-theme=dark] .lc-nc__search-input{background:var(--color-neutral-700);border-color:var(--color-neutral-600);color:var(--color-neutral-100)}.lc-nc__filters{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--color-neutral-100);overflow-x:auto}[data-theme=dark] .lc-nc__filters,:root[data-theme=dark] .lc-nc__filters{border-color:var(--color-neutral-700)}.lc-nc__filter{border:1px solid var(--color-neutral-200);background:transparent;padding:4px 10px;border-radius:12px;font-size:.6875rem;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--color-neutral-600);transition:all .15s}.lc-nc__filter:hover{background:var(--color-neutral-50)}.lc-nc__filter--active{background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500)}.lc-nc__filter--error.lc-nc__filter--active{background:var(--color-error-default);border-color:var(--color-error-default)}.lc-nc__filter--warning.lc-nc__filter--active{background:var(--color-warning-default);border-color:var(--color-warning-default)}.lc-nc__filter--success.lc-nc__filter--active{background:var(--color-success-default);border-color:var(--color-success-default)}.lc-nc__filter--info.lc-nc__filter--active{background:var(--color-info-default, #3b82f6);border-color:var(--color-info-default, #3b82f6)}.lc-nc__list{overflow-y:auto}.lc-nc__group-header{padding:6px 16px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-neutral-400);background:var(--color-neutral-50);border-bottom:1px solid var(--color-neutral-100)}[data-theme=dark] .lc-nc__group-header,:root[data-theme=dark] .lc-nc__group-header{background:var(--color-neutral-800);border-color:var(--color-neutral-700)}.lc-nc__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border-bottom:1px solid var(--color-neutral-100);cursor:pointer;transition:background .15s}.lc-nc__item:hover{background:var(--color-neutral-50)}.lc-nc__item:last-child{border-bottom:none}.lc-nc__item--unread{background:var(--color-primary-50)}.lc-nc__item--unread:hover{background:var(--color-primary-100)}.lc-nc__item--urgent{border-left:3px solid var(--color-error-default)}[data-theme=dark] .lc-nc__item,:root[data-theme=dark] .lc-nc__item{border-color:var(--color-neutral-700)}[data-theme=dark] .lc-nc__item:hover,:root[data-theme=dark] .lc-nc__item:hover{background:var(--color-neutral-700)}[data-theme=dark] .lc-nc__item--unread,:root[data-theme=dark] .lc-nc__item--unread{background:#3b82f614}[data-theme=dark] .lc-nc__item--unread:hover,:root[data-theme=dark] .lc-nc__item--unread:hover{background:#3b82f624}.lc-nc__item-icon{flex-shrink:0;margin-top:2px}.lc-nc__item-icon--info{color:var(--color-info-default, #3b82f6)}.lc-nc__item-icon--success{color:var(--color-success-default, #22c55e)}.lc-nc__item-icon--warning{color:var(--color-warning-default, #f59e0b)}.lc-nc__item-icon--error{color:var(--color-error-default, #ef4444)}.lc-nc__item-body{flex:1;min-width:0}.lc-nc__item-header{display:flex;align-items:center;gap:6px}.lc-nc__item-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-nc__item--unread .lc-nc__item-title{font-weight:600}[data-theme=dark] .lc-nc__item-title,:root[data-theme=dark] .lc-nc__item-title{color:var(--color-neutral-100)}.lc-nc__item-priority{font-size:.625rem;font-weight:600;padding:1px 5px;border-radius:3px;flex-shrink:0;text-transform:uppercase}.lc-nc__item-priority--high{background:var(--color-warning-50, #fffbeb);color:var(--color-warning-700, #a16207)}.lc-nc__item-priority--urgent{background:var(--color-error-50, #fef2f2);color:var(--color-error-700, #b91c1c)}.lc-nc__item-priority--low{background:var(--color-neutral-100);color:var(--color-neutral-500)}.lc-nc__item-message{margin:2px 0 0;font-size:.75rem;color:var(--color-neutral-500);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-nc__item-footer{display:flex;align-items:center;gap:8px;margin-top:4px}.lc-nc__item-time{font-size:.6875rem;color:var(--color-neutral-400)}.lc-nc__item-category{font-size:.625rem;padding:1px 5px;border-radius:3px;background:var(--color-neutral-100);color:var(--color-neutral-500)}.lc-nc__item-action{border:none;background:none;padding:0;font-size:.6875rem;font-weight:600;color:var(--color-primary-600);cursor:pointer}.lc-nc__item-action:hover{text-decoration:underline}.lc-nc__item-dismiss{flex-shrink:0;width:24px;height:24px;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:16px;color:var(--color-neutral-400);display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s;opacity:0}.lc-nc__item:hover .lc-nc__item-dismiss{opacity:1}.lc-nc__item-dismiss:hover{background:var(--color-neutral-100);color:var(--color-neutral-600)}.lc-nc__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 16px;color:var(--color-neutral-400)}.lc-nc__empty-icon{font-size:32px;opacity:.5}.lc-nc__empty-text{font-size:var(--typography-font-size-sm, .875rem)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13338
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: NotificationCenterComponent, isStandalone: true, selector: "lc-notification-center", inputs: { notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, showPriority: { classPropertyName: "showPriority", publicName: "showPriority", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, groupByCategory: { classPropertyName: "groupByCategory", publicName: "groupByCategory", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notificationClick: "notificationClick", notificationDismiss: "notificationDismiss", notificationAction: "notificationAction", markAllRead: "markAllRead", clearAll: "clearAll" }, ngImport: i0, template: "<div class=\"lc-nc\">\n <!-- Header -->\n <div class=\"lc-nc__header\">\n <div class=\"lc-nc__header-left\">\n <h3 class=\"lc-nc__title\">{{ title() }}</h3>\n @if (unreadCount() > 0) {\n <span class=\"lc-nc__badge\">{{ unreadCount() }}</span>\n }\n </div>\n <div class=\"lc-nc__header-actions\">\n @if (unreadCount() > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn\" (click)=\"onMarkAllRead()\">Mark all read</button>\n }\n @if (notifications().length > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn lc-nc__action-btn--danger\" (click)=\"onClearAll()\">Clear all</button>\n }\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"lc-nc__search\">\n <lc-search-input\n class=\"lc-nc__search-field\"\n placeholder=\"Search notifications\u2026\"\n [debounceMs]=\"0\"\n (searchChange)=\"onSearch($event)\"\n />\n </div>\n\n <!-- Filters -->\n @if (showFilter()) {\n <div class=\"lc-nc__filters\">\n <button\n type=\"button\"\n class=\"lc-nc__filter\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'all'\"\n (click)=\"setFilter('all')\"\n >All ({{ filterCounts().all }})</button>\n @if (filterCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--error\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'error'\"\n (click)=\"setFilter('error')\"\n >Error ({{ filterCounts().error }})</button>\n }\n @if (filterCounts().warning > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--warning\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'warning'\"\n (click)=\"setFilter('warning')\"\n >Warning ({{ filterCounts().warning }})</button>\n }\n @if (filterCounts().success > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--success\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'success'\"\n (click)=\"setFilter('success')\"\n >Success ({{ filterCounts().success }})</button>\n }\n @if (filterCounts().info > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--info\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'info'\"\n (click)=\"setFilter('info')\"\n >Info ({{ filterCounts().info }})</button>\n }\n </div>\n }\n\n <!-- Notification list -->\n <div class=\"lc-nc__list\" [style.max-height]=\"maxHeight()\">\n @if (!hasNotifications()) {\n <div class=\"lc-nc__empty\">\n <lc-icon name=\"bell\" size=\"lg\" class=\"lc-nc__empty-icon\"></lc-icon>\n <span class=\"lc-nc__empty-text\">{{ emptyMessage() }}</span>\n </div>\n } @else if (groupedNotifications(); as groups) {\n @for (group of groups; track group.category) {\n <div class=\"lc-nc__group\">\n <div class=\"lc-nc__group-header\">{{ group.category }}</div>\n @for (n of group.items; track n.id) {\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <span class=\"lc-nc__item-title\">{{ n.title }}</span>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n aria-label=\"Dismiss notification\"\n >\u00D7</button>\n </div>\n }\n </div>\n }\n } @else {\n @for (n of filteredNotifications(); track n.id) {\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <span class=\"lc-nc__item-title\">{{ n.title }}</span>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n aria-label=\"Dismiss notification\"\n >\u00D7</button>\n </div>\n }\n }\n </div>\n</div>\n", styles: [":host{display:block}.lc-nc{border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-neutral-0, #fff);overflow:hidden}[data-theme=dark] .lc-nc,:root[data-theme=dark] .lc-nc{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-nc__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-neutral-200)}[data-theme=dark] .lc-nc__header,:root[data-theme=dark] .lc-nc__header{border-color:var(--color-neutral-600)}.lc-nc__header-left{display:flex;align-items:center;gap:8px}.lc-nc__title{margin:0;font-size:var(--typography-font-size-base, 1rem);font-weight:600;color:var(--color-neutral-900)}[data-theme=dark] .lc-nc__title,:root[data-theme=dark] .lc-nc__title{color:var(--color-neutral-100)}.lc-nc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--color-error-default);color:#fff;font-size:.6875rem;font-weight:600}.lc-nc__header-actions{display:flex;gap:8px}.lc-nc__action-btn{border:none;background:none;padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:500;cursor:pointer;color:var(--color-primary-600);transition:background .15s}.lc-nc__action-btn:hover{background:var(--color-primary-50)}.lc-nc__action-btn--danger{color:var(--color-error-default)}.lc-nc__action-btn--danger:hover{background:var(--color-error-50, #fef2f2)}.lc-nc__search{padding:8px 16px;border-bottom:1px solid var(--color-neutral-100)}[data-theme=dark] .lc-nc__search,:root[data-theme=dark] .lc-nc__search{border-color:var(--color-neutral-700)}.lc-nc__search-field{width:100%;display:block}.lc-nc__filters{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--color-neutral-100);overflow-x:auto}[data-theme=dark] .lc-nc__filters,:root[data-theme=dark] .lc-nc__filters{border-color:var(--color-neutral-700)}.lc-nc__filter{border:1px solid var(--color-neutral-200);background:transparent;padding:4px 10px;border-radius:12px;font-size:.6875rem;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--color-neutral-600);transition:all .15s}.lc-nc__filter:hover{background:var(--color-neutral-50)}.lc-nc__filter--active{background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500)}.lc-nc__filter--error.lc-nc__filter--active{background:var(--color-error-default);border-color:var(--color-error-default)}.lc-nc__filter--warning.lc-nc__filter--active{background:var(--color-warning-default);border-color:var(--color-warning-default)}.lc-nc__filter--success.lc-nc__filter--active{background:var(--color-success-default);border-color:var(--color-success-default)}.lc-nc__filter--info.lc-nc__filter--active{background:var(--color-info-default, #3b82f6);border-color:var(--color-info-default, #3b82f6)}.lc-nc__list{overflow-y:auto}.lc-nc__group-header{padding:6px 16px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-neutral-400);background:var(--color-neutral-50);border-bottom:1px solid var(--color-neutral-100)}[data-theme=dark] .lc-nc__group-header,:root[data-theme=dark] .lc-nc__group-header{background:var(--color-neutral-800);border-color:var(--color-neutral-700)}.lc-nc__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border-bottom:1px solid var(--color-neutral-100);cursor:pointer;transition:background .15s}.lc-nc__item:hover{background:var(--color-neutral-50)}.lc-nc__item:last-child{border-bottom:none}.lc-nc__item--unread{background:var(--color-primary-50)}.lc-nc__item--unread:hover{background:var(--color-primary-100)}.lc-nc__item--urgent{border-left:3px solid var(--color-error-default)}[data-theme=dark] .lc-nc__item,:root[data-theme=dark] .lc-nc__item{border-color:var(--color-neutral-700)}[data-theme=dark] .lc-nc__item:hover,:root[data-theme=dark] .lc-nc__item:hover{background:var(--color-neutral-700)}[data-theme=dark] .lc-nc__item--unread,:root[data-theme=dark] .lc-nc__item--unread{background:#3b82f614}[data-theme=dark] .lc-nc__item--unread:hover,:root[data-theme=dark] .lc-nc__item--unread:hover{background:#3b82f624}.lc-nc__item-icon{flex-shrink:0;margin-top:2px}.lc-nc__item-icon--info{color:var(--color-info-default, #3b82f6)}.lc-nc__item-icon--success{color:var(--color-success-default, #22c55e)}.lc-nc__item-icon--warning{color:var(--color-warning-default, #f59e0b)}.lc-nc__item-icon--error{color:var(--color-error-default, #ef4444)}.lc-nc__item-body{flex:1;min-width:0}.lc-nc__item-header{display:flex;align-items:center;gap:6px}.lc-nc__item-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-nc__item--unread .lc-nc__item-title{font-weight:600}[data-theme=dark] .lc-nc__item-title,:root[data-theme=dark] .lc-nc__item-title{color:var(--color-neutral-100)}.lc-nc__item-priority{font-size:.625rem;font-weight:600;padding:1px 5px;border-radius:3px;flex-shrink:0;text-transform:uppercase}.lc-nc__item-priority--high{background:var(--color-warning-50, #fffbeb);color:var(--color-warning-700, #a16207)}.lc-nc__item-priority--urgent{background:var(--color-error-50, #fef2f2);color:var(--color-error-700, #b91c1c)}.lc-nc__item-priority--low{background:var(--color-neutral-100);color:var(--color-neutral-500)}.lc-nc__item-message{margin:2px 0 0;font-size:.75rem;color:var(--color-neutral-500);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-nc__item-footer{display:flex;align-items:center;gap:8px;margin-top:4px}.lc-nc__item-time{font-size:.6875rem;color:var(--color-neutral-400)}.lc-nc__item-category{font-size:.625rem;padding:1px 5px;border-radius:3px;background:var(--color-neutral-100);color:var(--color-neutral-500)}.lc-nc__item-action{border:none;background:none;padding:0;font-size:.6875rem;font-weight:600;color:var(--color-primary-600);cursor:pointer}.lc-nc__item-action:hover{text-decoration:underline}.lc-nc__item-dismiss{flex-shrink:0;width:24px;height:24px;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:16px;color:var(--color-neutral-400);display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s;opacity:0}.lc-nc__item:hover .lc-nc__item-dismiss{opacity:1}.lc-nc__item-dismiss:hover{background:var(--color-neutral-100);color:var(--color-neutral-600)}.lc-nc__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 16px;color:var(--color-neutral-400)}.lc-nc__empty-icon{font-size:32px;opacity:.5}.lc-nc__empty-text{font-size:var(--typography-font-size-sm, .875rem)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: SearchInputComponent, selector: "lc-search-input", inputs: ["placeholder", "size", "debounceMs", "disabled"], outputs: ["searchChange", "searchSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13000
13339
|
}
|
|
13001
13340
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NotificationCenterComponent, decorators: [{
|
|
13002
13341
|
type: Component,
|
|
13003
|
-
args: [{ selector: 'lc-notification-center', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-nc\">\n <!-- Header -->\n <div class=\"lc-nc__header\">\n <div class=\"lc-nc__header-left\">\n <h3 class=\"lc-nc__title\">{{ title() }}</h3>\n @if (unreadCount() > 0) {\n <span class=\"lc-nc__badge\">{{ unreadCount() }}</span>\n }\n </div>\n <div class=\"lc-nc__header-actions\">\n @if (unreadCount() > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn\" (click)=\"onMarkAllRead()\">Mark all read</button>\n }\n @if (notifications().length > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn lc-nc__action-btn--danger\" (click)=\"onClearAll()\">Clear all</button>\n }\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"lc-nc__search\">\n <input\n type=\"text\"\n class=\"lc-nc__search-input\"\n placeholder=\"Search notifications\u2026\"\n [value]=\"searchQuery()\"\n (input)=\"onSearch($event)\"\n />\n </div>\n\n <!-- Filters -->\n @if (showFilter()) {\n <div class=\"lc-nc__filters\">\n <button\n type=\"button\"\n class=\"lc-nc__filter\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'all'\"\n (click)=\"setFilter('all')\"\n >All ({{ filterCounts().all }})</button>\n @if (filterCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--error\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'error'\"\n (click)=\"setFilter('error')\"\n >Error ({{ filterCounts().error }})</button>\n }\n @if (filterCounts().warning > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--warning\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'warning'\"\n (click)=\"setFilter('warning')\"\n >Warning ({{ filterCounts().warning }})</button>\n }\n @if (filterCounts().success > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--success\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'success'\"\n (click)=\"setFilter('success')\"\n >Success ({{ filterCounts().success }})</button>\n }\n @if (filterCounts().info > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--info\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'info'\"\n (click)=\"setFilter('info')\"\n >Info ({{ filterCounts().info }})</button>\n }\n </div>\n }\n\n <!-- Notification list -->\n <div class=\"lc-nc__list\" [style.max-height]=\"maxHeight()\">\n @if (!hasNotifications()) {\n <div class=\"lc-nc__empty\">\n <lc-icon name=\"bell\" size=\"lg\" class=\"lc-nc__empty-icon\"></lc-icon>\n <span class=\"lc-nc__empty-text\">{{ emptyMessage() }}</span>\n </div>\n } @else if (groupedNotifications(); as groups) {\n @for (group of groups; track group.category) {\n <div class=\"lc-nc__group\">\n <div class=\"lc-nc__group-header\">{{ group.category }}</div>\n @for (n of group.items; track n.id) {\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <span class=\"lc-nc__item-title\">{{ n.title }}</span>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n aria-label=\"Dismiss notification\"\n >\u00D7</button>\n </div>\n }\n </div>\n }\n } @else {\n @for (n of filteredNotifications(); track n.id) {\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <span class=\"lc-nc__item-title\">{{ n.title }}</span>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n aria-label=\"Dismiss notification\"\n >\u00D7</button>\n </div>\n }\n }\n </div>\n</div>\n", styles: [":host{display:block}.lc-nc{border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-neutral-0, #fff);overflow:hidden}[data-theme=dark] .lc-nc,:root[data-theme=dark] .lc-nc{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-nc__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-neutral-200)}[data-theme=dark] .lc-nc__header,:root[data-theme=dark] .lc-nc__header{border-color:var(--color-neutral-600)}.lc-nc__header-left{display:flex;align-items:center;gap:8px}.lc-nc__title{margin:0;font-size:var(--typography-font-size-base, 1rem);font-weight:600;color:var(--color-neutral-900)}[data-theme=dark] .lc-nc__title,:root[data-theme=dark] .lc-nc__title{color:var(--color-neutral-100)}.lc-nc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--color-error-default);color:#fff;font-size:.6875rem;font-weight:600}.lc-nc__header-actions{display:flex;gap:8px}.lc-nc__action-btn{border:none;background:none;padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:500;cursor:pointer;color:var(--color-primary-600);transition:background .15s}.lc-nc__action-btn:hover{background:var(--color-primary-50)}.lc-nc__action-btn--danger{color:var(--color-error-default)}.lc-nc__action-btn--danger:hover{background:var(--color-error-50, #fef2f2)}.lc-nc__search{padding:8px 16px;border-bottom:1px solid var(--color-neutral-100)}[data-theme=dark] .lc-nc__search,:root[data-theme=dark] .lc-nc__search{border-color:var(--color-neutral-700)}.lc-nc__search-input{width:100%;padding:6px 10px;border:1px solid var(--color-neutral-200);border-radius:6px;font-size:var(--typography-font-size-sm, .875rem);background:var(--color-neutral-50);color:var(--color-neutral-900);outline:none;transition:border-color .15s}.lc-nc__search-input:focus{border-color:var(--color-primary-400)}.lc-nc__search-input::placeholder{color:var(--color-neutral-400)}[data-theme=dark] .lc-nc__search-input,:root[data-theme=dark] .lc-nc__search-input{background:var(--color-neutral-700);border-color:var(--color-neutral-600);color:var(--color-neutral-100)}.lc-nc__filters{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--color-neutral-100);overflow-x:auto}[data-theme=dark] .lc-nc__filters,:root[data-theme=dark] .lc-nc__filters{border-color:var(--color-neutral-700)}.lc-nc__filter{border:1px solid var(--color-neutral-200);background:transparent;padding:4px 10px;border-radius:12px;font-size:.6875rem;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--color-neutral-600);transition:all .15s}.lc-nc__filter:hover{background:var(--color-neutral-50)}.lc-nc__filter--active{background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500)}.lc-nc__filter--error.lc-nc__filter--active{background:var(--color-error-default);border-color:var(--color-error-default)}.lc-nc__filter--warning.lc-nc__filter--active{background:var(--color-warning-default);border-color:var(--color-warning-default)}.lc-nc__filter--success.lc-nc__filter--active{background:var(--color-success-default);border-color:var(--color-success-default)}.lc-nc__filter--info.lc-nc__filter--active{background:var(--color-info-default, #3b82f6);border-color:var(--color-info-default, #3b82f6)}.lc-nc__list{overflow-y:auto}.lc-nc__group-header{padding:6px 16px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-neutral-400);background:var(--color-neutral-50);border-bottom:1px solid var(--color-neutral-100)}[data-theme=dark] .lc-nc__group-header,:root[data-theme=dark] .lc-nc__group-header{background:var(--color-neutral-800);border-color:var(--color-neutral-700)}.lc-nc__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border-bottom:1px solid var(--color-neutral-100);cursor:pointer;transition:background .15s}.lc-nc__item:hover{background:var(--color-neutral-50)}.lc-nc__item:last-child{border-bottom:none}.lc-nc__item--unread{background:var(--color-primary-50)}.lc-nc__item--unread:hover{background:var(--color-primary-100)}.lc-nc__item--urgent{border-left:3px solid var(--color-error-default)}[data-theme=dark] .lc-nc__item,:root[data-theme=dark] .lc-nc__item{border-color:var(--color-neutral-700)}[data-theme=dark] .lc-nc__item:hover,:root[data-theme=dark] .lc-nc__item:hover{background:var(--color-neutral-700)}[data-theme=dark] .lc-nc__item--unread,:root[data-theme=dark] .lc-nc__item--unread{background:#3b82f614}[data-theme=dark] .lc-nc__item--unread:hover,:root[data-theme=dark] .lc-nc__item--unread:hover{background:#3b82f624}.lc-nc__item-icon{flex-shrink:0;margin-top:2px}.lc-nc__item-icon--info{color:var(--color-info-default, #3b82f6)}.lc-nc__item-icon--success{color:var(--color-success-default, #22c55e)}.lc-nc__item-icon--warning{color:var(--color-warning-default, #f59e0b)}.lc-nc__item-icon--error{color:var(--color-error-default, #ef4444)}.lc-nc__item-body{flex:1;min-width:0}.lc-nc__item-header{display:flex;align-items:center;gap:6px}.lc-nc__item-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-nc__item--unread .lc-nc__item-title{font-weight:600}[data-theme=dark] .lc-nc__item-title,:root[data-theme=dark] .lc-nc__item-title{color:var(--color-neutral-100)}.lc-nc__item-priority{font-size:.625rem;font-weight:600;padding:1px 5px;border-radius:3px;flex-shrink:0;text-transform:uppercase}.lc-nc__item-priority--high{background:var(--color-warning-50, #fffbeb);color:var(--color-warning-700, #a16207)}.lc-nc__item-priority--urgent{background:var(--color-error-50, #fef2f2);color:var(--color-error-700, #b91c1c)}.lc-nc__item-priority--low{background:var(--color-neutral-100);color:var(--color-neutral-500)}.lc-nc__item-message{margin:2px 0 0;font-size:.75rem;color:var(--color-neutral-500);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-nc__item-footer{display:flex;align-items:center;gap:8px;margin-top:4px}.lc-nc__item-time{font-size:.6875rem;color:var(--color-neutral-400)}.lc-nc__item-category{font-size:.625rem;padding:1px 5px;border-radius:3px;background:var(--color-neutral-100);color:var(--color-neutral-500)}.lc-nc__item-action{border:none;background:none;padding:0;font-size:.6875rem;font-weight:600;color:var(--color-primary-600);cursor:pointer}.lc-nc__item-action:hover{text-decoration:underline}.lc-nc__item-dismiss{flex-shrink:0;width:24px;height:24px;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:16px;color:var(--color-neutral-400);display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s;opacity:0}.lc-nc__item:hover .lc-nc__item-dismiss{opacity:1}.lc-nc__item-dismiss:hover{background:var(--color-neutral-100);color:var(--color-neutral-600)}.lc-nc__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 16px;color:var(--color-neutral-400)}.lc-nc__empty-icon{font-size:32px;opacity:.5}.lc-nc__empty-text{font-size:var(--typography-font-size-sm, .875rem)}\n"] }]
|
|
13342
|
+
args: [{ selector: 'lc-notification-center', standalone: true, imports: [IconComponent, SearchInputComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-nc\">\n <!-- Header -->\n <div class=\"lc-nc__header\">\n <div class=\"lc-nc__header-left\">\n <h3 class=\"lc-nc__title\">{{ title() }}</h3>\n @if (unreadCount() > 0) {\n <span class=\"lc-nc__badge\">{{ unreadCount() }}</span>\n }\n </div>\n <div class=\"lc-nc__header-actions\">\n @if (unreadCount() > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn\" (click)=\"onMarkAllRead()\">Mark all read</button>\n }\n @if (notifications().length > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn lc-nc__action-btn--danger\" (click)=\"onClearAll()\">Clear all</button>\n }\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"lc-nc__search\">\n <lc-search-input\n class=\"lc-nc__search-field\"\n placeholder=\"Search notifications\u2026\"\n [debounceMs]=\"0\"\n (searchChange)=\"onSearch($event)\"\n />\n </div>\n\n <!-- Filters -->\n @if (showFilter()) {\n <div class=\"lc-nc__filters\">\n <button\n type=\"button\"\n class=\"lc-nc__filter\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'all'\"\n (click)=\"setFilter('all')\"\n >All ({{ filterCounts().all }})</button>\n @if (filterCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--error\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'error'\"\n (click)=\"setFilter('error')\"\n >Error ({{ filterCounts().error }})</button>\n }\n @if (filterCounts().warning > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--warning\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'warning'\"\n (click)=\"setFilter('warning')\"\n >Warning ({{ filterCounts().warning }})</button>\n }\n @if (filterCounts().success > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--success\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'success'\"\n (click)=\"setFilter('success')\"\n >Success ({{ filterCounts().success }})</button>\n }\n @if (filterCounts().info > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--info\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'info'\"\n (click)=\"setFilter('info')\"\n >Info ({{ filterCounts().info }})</button>\n }\n </div>\n }\n\n <!-- Notification list -->\n <div class=\"lc-nc__list\" [style.max-height]=\"maxHeight()\">\n @if (!hasNotifications()) {\n <div class=\"lc-nc__empty\">\n <lc-icon name=\"bell\" size=\"lg\" class=\"lc-nc__empty-icon\"></lc-icon>\n <span class=\"lc-nc__empty-text\">{{ emptyMessage() }}</span>\n </div>\n } @else if (groupedNotifications(); as groups) {\n @for (group of groups; track group.category) {\n <div class=\"lc-nc__group\">\n <div class=\"lc-nc__group-header\">{{ group.category }}</div>\n @for (n of group.items; track n.id) {\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <span class=\"lc-nc__item-title\">{{ n.title }}</span>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n aria-label=\"Dismiss notification\"\n >\u00D7</button>\n </div>\n }\n </div>\n }\n } @else {\n @for (n of filteredNotifications(); track n.id) {\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <span class=\"lc-nc__item-title\">{{ n.title }}</span>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n aria-label=\"Dismiss notification\"\n >\u00D7</button>\n </div>\n }\n }\n </div>\n</div>\n", styles: [":host{display:block}.lc-nc{border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-neutral-0, #fff);overflow:hidden}[data-theme=dark] .lc-nc,:root[data-theme=dark] .lc-nc{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-nc__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-neutral-200)}[data-theme=dark] .lc-nc__header,:root[data-theme=dark] .lc-nc__header{border-color:var(--color-neutral-600)}.lc-nc__header-left{display:flex;align-items:center;gap:8px}.lc-nc__title{margin:0;font-size:var(--typography-font-size-base, 1rem);font-weight:600;color:var(--color-neutral-900)}[data-theme=dark] .lc-nc__title,:root[data-theme=dark] .lc-nc__title{color:var(--color-neutral-100)}.lc-nc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--color-error-default);color:#fff;font-size:.6875rem;font-weight:600}.lc-nc__header-actions{display:flex;gap:8px}.lc-nc__action-btn{border:none;background:none;padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:500;cursor:pointer;color:var(--color-primary-600);transition:background .15s}.lc-nc__action-btn:hover{background:var(--color-primary-50)}.lc-nc__action-btn--danger{color:var(--color-error-default)}.lc-nc__action-btn--danger:hover{background:var(--color-error-50, #fef2f2)}.lc-nc__search{padding:8px 16px;border-bottom:1px solid var(--color-neutral-100)}[data-theme=dark] .lc-nc__search,:root[data-theme=dark] .lc-nc__search{border-color:var(--color-neutral-700)}.lc-nc__search-field{width:100%;display:block}.lc-nc__filters{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--color-neutral-100);overflow-x:auto}[data-theme=dark] .lc-nc__filters,:root[data-theme=dark] .lc-nc__filters{border-color:var(--color-neutral-700)}.lc-nc__filter{border:1px solid var(--color-neutral-200);background:transparent;padding:4px 10px;border-radius:12px;font-size:.6875rem;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--color-neutral-600);transition:all .15s}.lc-nc__filter:hover{background:var(--color-neutral-50)}.lc-nc__filter--active{background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500)}.lc-nc__filter--error.lc-nc__filter--active{background:var(--color-error-default);border-color:var(--color-error-default)}.lc-nc__filter--warning.lc-nc__filter--active{background:var(--color-warning-default);border-color:var(--color-warning-default)}.lc-nc__filter--success.lc-nc__filter--active{background:var(--color-success-default);border-color:var(--color-success-default)}.lc-nc__filter--info.lc-nc__filter--active{background:var(--color-info-default, #3b82f6);border-color:var(--color-info-default, #3b82f6)}.lc-nc__list{overflow-y:auto}.lc-nc__group-header{padding:6px 16px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-neutral-400);background:var(--color-neutral-50);border-bottom:1px solid var(--color-neutral-100)}[data-theme=dark] .lc-nc__group-header,:root[data-theme=dark] .lc-nc__group-header{background:var(--color-neutral-800);border-color:var(--color-neutral-700)}.lc-nc__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border-bottom:1px solid var(--color-neutral-100);cursor:pointer;transition:background .15s}.lc-nc__item:hover{background:var(--color-neutral-50)}.lc-nc__item:last-child{border-bottom:none}.lc-nc__item--unread{background:var(--color-primary-50)}.lc-nc__item--unread:hover{background:var(--color-primary-100)}.lc-nc__item--urgent{border-left:3px solid var(--color-error-default)}[data-theme=dark] .lc-nc__item,:root[data-theme=dark] .lc-nc__item{border-color:var(--color-neutral-700)}[data-theme=dark] .lc-nc__item:hover,:root[data-theme=dark] .lc-nc__item:hover{background:var(--color-neutral-700)}[data-theme=dark] .lc-nc__item--unread,:root[data-theme=dark] .lc-nc__item--unread{background:#3b82f614}[data-theme=dark] .lc-nc__item--unread:hover,:root[data-theme=dark] .lc-nc__item--unread:hover{background:#3b82f624}.lc-nc__item-icon{flex-shrink:0;margin-top:2px}.lc-nc__item-icon--info{color:var(--color-info-default, #3b82f6)}.lc-nc__item-icon--success{color:var(--color-success-default, #22c55e)}.lc-nc__item-icon--warning{color:var(--color-warning-default, #f59e0b)}.lc-nc__item-icon--error{color:var(--color-error-default, #ef4444)}.lc-nc__item-body{flex:1;min-width:0}.lc-nc__item-header{display:flex;align-items:center;gap:6px}.lc-nc__item-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-nc__item--unread .lc-nc__item-title{font-weight:600}[data-theme=dark] .lc-nc__item-title,:root[data-theme=dark] .lc-nc__item-title{color:var(--color-neutral-100)}.lc-nc__item-priority{font-size:.625rem;font-weight:600;padding:1px 5px;border-radius:3px;flex-shrink:0;text-transform:uppercase}.lc-nc__item-priority--high{background:var(--color-warning-50, #fffbeb);color:var(--color-warning-700, #a16207)}.lc-nc__item-priority--urgent{background:var(--color-error-50, #fef2f2);color:var(--color-error-700, #b91c1c)}.lc-nc__item-priority--low{background:var(--color-neutral-100);color:var(--color-neutral-500)}.lc-nc__item-message{margin:2px 0 0;font-size:.75rem;color:var(--color-neutral-500);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-nc__item-footer{display:flex;align-items:center;gap:8px;margin-top:4px}.lc-nc__item-time{font-size:.6875rem;color:var(--color-neutral-400)}.lc-nc__item-category{font-size:.625rem;padding:1px 5px;border-radius:3px;background:var(--color-neutral-100);color:var(--color-neutral-500)}.lc-nc__item-action{border:none;background:none;padding:0;font-size:.6875rem;font-weight:600;color:var(--color-primary-600);cursor:pointer}.lc-nc__item-action:hover{text-decoration:underline}.lc-nc__item-dismiss{flex-shrink:0;width:24px;height:24px;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:16px;color:var(--color-neutral-400);display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s;opacity:0}.lc-nc__item:hover .lc-nc__item-dismiss{opacity:1}.lc-nc__item-dismiss:hover{background:var(--color-neutral-100);color:var(--color-neutral-600)}.lc-nc__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 16px;color:var(--color-neutral-400)}.lc-nc__empty-icon{font-size:32px;opacity:.5}.lc-nc__empty-text{font-size:var(--typography-font-size-sm, .875rem)}\n"] }]
|
|
13004
13343
|
}], propDecorators: { notifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "notifications", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], showTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamp", required: false }] }], showPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPriority", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], groupByCategory: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupByCategory", required: false }] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }], notificationDismiss: [{ type: i0.Output, args: ["notificationDismiss"] }], notificationAction: [{ type: i0.Output, args: ["notificationAction"] }], markAllRead: [{ type: i0.Output, args: ["markAllRead"] }], clearAll: [{ type: i0.Output, args: ["clearAll"] }] } });
|
|
13005
13344
|
|
|
13006
13345
|
const DEFAULT_TOOLBAR = {
|
|
@@ -14249,5 +14588,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
14249
14588
|
* Generated bundle index. Do not edit.
|
|
14250
14589
|
*/
|
|
14251
14590
|
|
|
14252
|
-
export { AccordionComponent, AccordionGroupComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent };
|
|
14591
|
+
export { AccordionComponent, AccordionGroupComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, resolveFileIcon };
|
|
14253
14592
|
//# sourceMappingURL=life-cockpit-angular-ui-kit.mjs.map
|