@life-cockpit/angular-ui-kit 1.11.7 → 1.11.9
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.
package/README.md
CHANGED
|
@@ -120,7 +120,7 @@ export class MyComponent {}
|
|
|
120
120
|
| Skeleton | `lc-skeleton` | Loading placeholder |
|
|
121
121
|
| Spinner | `lc-spinner` | Loading indicator |
|
|
122
122
|
| Stepper | `lc-stepper` | Step-by-step progress |
|
|
123
|
-
| Table | `lc-table` | Data table with sorting, filtering, pagination, formatter callbacks and custom cell templates |
|
|
123
|
+
| Table | `lc-table` | Data table with sorting, filtering, pagination, formatter callbacks, cell styling hooks and custom cell templates |
|
|
124
124
|
| Toggle Group | `lc-toggle-group` | Segmented toggle |
|
|
125
125
|
|
|
126
126
|
### Feedback
|
|
@@ -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',
|
|
@@ -6941,6 +6942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
6941
6942
|
* - Size presets (sm, md, lg)
|
|
6942
6943
|
* - Hoverable row highlighting
|
|
6943
6944
|
* - Per-column formatter callbacks for display values
|
|
6945
|
+
* - Per-cell class/style callbacks for conditional styling
|
|
6944
6946
|
* - Custom cell templates via content projection
|
|
6945
6947
|
* - Composed cells (e.g. avatar + badge + actions)
|
|
6946
6948
|
* - Responsive horizontal scrolling
|
|
@@ -7083,6 +7085,10 @@ class TableComponent {
|
|
|
7083
7085
|
const selected = this.selectedRows();
|
|
7084
7086
|
return data.every((_, i) => selected.has(this.getAbsoluteIndex(i)));
|
|
7085
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 */ []));
|
|
7086
7092
|
/**
|
|
7087
7093
|
* Computed CSS classes for the table element
|
|
7088
7094
|
*/
|
|
@@ -7148,6 +7154,28 @@ class TableComponent {
|
|
|
7148
7154
|
return value;
|
|
7149
7155
|
return column.formatter(value, row, column, this.getAbsoluteIndex(relativeRowIndex));
|
|
7150
7156
|
}
|
|
7157
|
+
getCellClasses(row, column, relativeRowIndex) {
|
|
7158
|
+
const classes = [];
|
|
7159
|
+
if (column.cssClass)
|
|
7160
|
+
classes.push(column.cssClass);
|
|
7161
|
+
if (typeof column.cellClass === 'string') {
|
|
7162
|
+
classes.push(column.cellClass);
|
|
7163
|
+
}
|
|
7164
|
+
else if (typeof column.cellClass === 'function') {
|
|
7165
|
+
const resolved = column.cellClass(this.getCellValue(row, column.key), row, column, this.getAbsoluteIndex(relativeRowIndex));
|
|
7166
|
+
if (resolved)
|
|
7167
|
+
classes.push(resolved);
|
|
7168
|
+
}
|
|
7169
|
+
return classes.join(' ').trim();
|
|
7170
|
+
}
|
|
7171
|
+
getCellStyles(row, column, relativeRowIndex) {
|
|
7172
|
+
if (!column.cellStyle)
|
|
7173
|
+
return null;
|
|
7174
|
+
if (typeof column.cellStyle === 'function') {
|
|
7175
|
+
return column.cellStyle(this.getCellValue(row, column.key), row, column, this.getAbsoluteIndex(relativeRowIndex));
|
|
7176
|
+
}
|
|
7177
|
+
return column.cellStyle;
|
|
7178
|
+
}
|
|
7151
7179
|
getCellTemplate(columnKey) {
|
|
7152
7180
|
return this.cellTemplates?.find((template) => template.columnKey() === columnKey);
|
|
7153
7181
|
}
|
|
@@ -7168,6 +7196,17 @@ class TableComponent {
|
|
|
7168
7196
|
this.internalPageSize.set(newSize);
|
|
7169
7197
|
this.currentPage.set(0);
|
|
7170
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
|
+
}
|
|
7171
7210
|
get paginationStart() {
|
|
7172
7211
|
return this.currentPage() * this.internalPageSize() + 1;
|
|
7173
7212
|
}
|
|
@@ -7213,8 +7252,7 @@ class TableComponent {
|
|
|
7213
7252
|
this.selectionChange.emit({ selected, allSelected: this.allSelected() });
|
|
7214
7253
|
}
|
|
7215
7254
|
// -- Column Filters --
|
|
7216
|
-
onFilterChange(columnKey,
|
|
7217
|
-
const value = event.target.value;
|
|
7255
|
+
onFilterChange(columnKey, value) {
|
|
7218
7256
|
const filters = { ...this.columnFilters(), [columnKey]: value };
|
|
7219
7257
|
this.columnFilters.set(filters);
|
|
7220
7258
|
this.currentPage.set(0);
|
|
@@ -7263,11 +7301,11 @@ class TableComponent {
|
|
|
7263
7301
|
return event.target.value;
|
|
7264
7302
|
}
|
|
7265
7303
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7266
|
-
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]=\"column.cssClass || ''\"\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"] }], 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 });
|
|
7267
7305
|
}
|
|
7268
7306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TableComponent, decorators: [{
|
|
7269
7307
|
type: Component,
|
|
7270
|
-
args: [{ selector: 'lc-table', standalone: true, imports: [NgTemplateOutlet], 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]=\"column.cssClass || ''\"\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"] }]
|
|
7271
7309
|
}], propDecorators: { cellTemplates: [{
|
|
7272
7310
|
type: ContentChildren,
|
|
7273
7311
|
args: [TableCellDirective]
|
|
@@ -7461,15 +7499,20 @@ class FilterBarComponent {
|
|
|
7461
7499
|
getValue(key) {
|
|
7462
7500
|
return this.values()[key] ?? '';
|
|
7463
7501
|
}
|
|
7502
|
+
getSelectOptions(options) {
|
|
7503
|
+
return options ? options.map((opt) => ({ ...opt })) : [];
|
|
7504
|
+
}
|
|
7464
7505
|
/** Handle select / toggle change */
|
|
7465
7506
|
onFilterChange(key, value) {
|
|
7466
7507
|
const updated = { ...this.values(), [key]: value };
|
|
7467
7508
|
this.valuesChange.emit(updated);
|
|
7468
7509
|
}
|
|
7469
7510
|
/** Handle search input */
|
|
7470
|
-
onSearchInput(key,
|
|
7471
|
-
|
|
7472
|
-
|
|
7511
|
+
onSearchInput(key, value) {
|
|
7512
|
+
this.onFilterChange(key, value);
|
|
7513
|
+
}
|
|
7514
|
+
normalizeSelectValue(value) {
|
|
7515
|
+
return value == null ? '' : String(value);
|
|
7473
7516
|
}
|
|
7474
7517
|
/** Check if a toggle option is active */
|
|
7475
7518
|
isToggleActive(key, optionValue) {
|
|
@@ -7486,15 +7529,12 @@ class FilterBarComponent {
|
|
|
7486
7529
|
}
|
|
7487
7530
|
return classes.join(' ');
|
|
7488
7531
|
}
|
|
7489
|
-
getInputValue(event) {
|
|
7490
|
-
return event.target.value;
|
|
7491
|
-
}
|
|
7492
7532
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7493
|
-
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 });
|
|
7494
7534
|
}
|
|
7495
7535
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FilterBarComponent, decorators: [{
|
|
7496
7536
|
type: Component,
|
|
7497
|
-
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"] }]
|
|
7498
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"] }] } });
|
|
7499
7539
|
|
|
7500
7540
|
/**
|
|
@@ -12943,8 +12983,8 @@ class NotificationCenterComponent {
|
|
|
12943
12983
|
setFilter(filter) {
|
|
12944
12984
|
this.activeFilter.set(filter);
|
|
12945
12985
|
}
|
|
12946
|
-
onSearch(
|
|
12947
|
-
this.searchQuery.set(
|
|
12986
|
+
onSearch(query) {
|
|
12987
|
+
this.searchQuery.set(query);
|
|
12948
12988
|
}
|
|
12949
12989
|
onClick(notification) {
|
|
12950
12990
|
this.notificationClick.emit(notification);
|
|
@@ -12973,11 +13013,11 @@ class NotificationCenterComponent {
|
|
|
12973
13013
|
}
|
|
12974
13014
|
}
|
|
12975
13015
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12976
|
-
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 });
|
|
13016
|
+
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 });
|
|
12977
13017
|
}
|
|
12978
13018
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NotificationCenterComponent, decorators: [{
|
|
12979
13019
|
type: Component,
|
|
12980
|
-
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"] }]
|
|
13020
|
+
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"] }]
|
|
12981
13021
|
}], 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"] }] } });
|
|
12982
13022
|
|
|
12983
13023
|
const DEFAULT_TOOLBAR = {
|