ng-hub-ui-paginable 22.4.0 → 22.6.0
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, Optional, Inject, Injectable, inject, signal, provideAppInitializer, makeEnvironmentProviders, NgModule, input, output, ViewContainerRef, afterNextRender, effect, Directive, ChangeDetectorRef, ElementRef, viewChild, HostBinding, ChangeDetectionStrategy, Component, Input, computed, model, ViewEncapsulation, DestroyRef, contentChild, TemplateRef, HostListener, forwardRef, PLATFORM_ID, contentChildren, viewChildren, Output } from '@angular/core';
|
|
3
|
-
import { mergeDeep, HUB_TRANSLATION_CONFIG, HubTranslationService, OverlayService, generateUniqueId, clamp, TranslatePipe, UcfirstPipe, HubDragDropService, getValue, toAbsoluteIndex, containsNode, resolveDropPosition, createPointerDragSession, computeTargetIndex, moveItemInArray, transferArrayItem, UnwrapAsyncPipe, debouncedSignal, IsObservablePipe, GetPipe } from 'ng-hub-ui-utils';
|
|
2
|
+
import { InjectionToken, Optional, Inject, Injectable, inject, signal, provideAppInitializer, makeEnvironmentProviders, NgModule, input, output, ViewContainerRef, afterNextRender, effect, Directive, ChangeDetectorRef, ElementRef, viewChild, HostBinding, ChangeDetectionStrategy, Component, Input, computed, model, ViewEncapsulation, DestroyRef, contentChild, TemplateRef, HostListener, forwardRef, PLATFORM_ID, booleanAttribute, contentChildren, viewChildren, Output } from '@angular/core';
|
|
3
|
+
import { mergeDeep, HUB_TRANSLATION_CONFIG, HubTranslationService, OverlayService, generateUniqueId, clamp, TranslatePipe, UcfirstPipe, HubDragDropService, resolveHubAccent, getValue, toAbsoluteIndex, containsNode, resolveDropPosition, createPointerDragSession, computeTargetIndex, moveItemInArray, transferArrayItem, UnwrapAsyncPipe, debouncedSignal, IsObservablePipe, GetPipe } from 'ng-hub-ui-utils';
|
|
4
4
|
export { HubDragDropService as HubListDragService, HubTranslationService, TooltipDirective } from 'ng-hub-ui-utils';
|
|
5
5
|
import { NgClass, NgTemplateOutlet, NgComponentOutlet, isPlatformBrowser, UpperCasePipe, AsyncPipe, DOCUMENT } from '@angular/common';
|
|
6
6
|
import * as i1 from '@angular/forms';
|
|
@@ -2162,6 +2162,21 @@ class ListComponent {
|
|
|
2162
2162
|
isRtl() {
|
|
2163
2163
|
return this.options.rtl === true;
|
|
2164
2164
|
}
|
|
2165
|
+
/**
|
|
2166
|
+
* Resolves the list's accent slot from `options.variant`, accepting ANY colour.
|
|
2167
|
+
*
|
|
2168
|
+
* A bareword (semantic name, registered accent or CSS named colour) resolves to
|
|
2169
|
+
* the matching `--hub-sys-color-*` ds token with the raw word as fallback, while a
|
|
2170
|
+
* literal `#hex` / `rgb()` / `oklch()` / `var()` is passed through unchanged. The
|
|
2171
|
+
* value is bound to the single `--hub-list-accent` slot (the SCSS derives the
|
|
2172
|
+
* `-emphasis` / `-subtle` / `-on` family from it); `null` (no variant) defers to
|
|
2173
|
+
* the SCSS default and the built-in `[data-variant]` class rules.
|
|
2174
|
+
*
|
|
2175
|
+
* @returns The `--hub-list-accent` value, or `null` when no variant is set.
|
|
2176
|
+
*/
|
|
2177
|
+
accentVar() {
|
|
2178
|
+
return resolveHubAccent(this.options.variant);
|
|
2179
|
+
}
|
|
2165
2180
|
/**
|
|
2166
2181
|
* Returns whether the root list should render using card layout.
|
|
2167
2182
|
*
|
|
@@ -3191,7 +3206,7 @@ class ListComponent {
|
|
|
3191
3206
|
return [...new Set(tokens.map((item) => item.trim()).filter(Boolean))];
|
|
3192
3207
|
}
|
|
3193
3208
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3194
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ListComponent, isStandalone: true, selector: "hub-list, hub-ui-list, hub-paginable-list", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, loadingComponent: { classPropertyName: "loadingComponent", publicName: "loadingComponent", isSignal: true, isRequired: false, transformFunction: null }, errorComponent: { classPropertyName: "errorComponent", publicName: "errorComponent", isSignal: true, isRequired: false, transformFunction: null }, noResultsComponent: { classPropertyName: "noResultsComponent", publicName: "noResultsComponent", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindChildren: { classPropertyName: "bindChildren", publicName: "bindChildren", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, paginate: { classPropertyName: "paginate", publicName: "paginate", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, perPage: { classPropertyName: "perPage", publicName: "perPage", isSignal: true, isRequired: false, transformFunction: null }, perPageOptions: { classPropertyName: "perPageOptions", publicName: "perPageOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, dragGroup: { classPropertyName: "dragGroup", publicName: "dragGroup", isSignal: true, isRequired: false, transformFunction: null }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: true, isRequired: false, transformFunction: null }, keyboardSortable: { classPropertyName: "keyboardSortable", publicName: "keyboardSortable", isSignal: true, isRequired: false, transformFunction: null }, connected: { classPropertyName: "connected", publicName: "connected", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, clickFn: { classPropertyName: "clickFn", publicName: "clickFn", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, batchActions: { classPropertyName: "batchActions", publicName: "batchActions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", error: "errorChange", page: "pageChange", perPage: "perPageChange", totalItems: "totalItemsChange", sorted: "sorted" }, host: { properties: { "class.hub-list--rtl": "isRtl()", "attr.data-variant": "options.variant ?? null", "attr.data-hub-drag-owner": "_listId" }, classAttribute: "hub-list" }, providers: [
|
|
3209
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ListComponent, isStandalone: true, selector: "hub-list, hub-ui-list, hub-paginable-list", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, loadingComponent: { classPropertyName: "loadingComponent", publicName: "loadingComponent", isSignal: true, isRequired: false, transformFunction: null }, errorComponent: { classPropertyName: "errorComponent", publicName: "errorComponent", isSignal: true, isRequired: false, transformFunction: null }, noResultsComponent: { classPropertyName: "noResultsComponent", publicName: "noResultsComponent", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindChildren: { classPropertyName: "bindChildren", publicName: "bindChildren", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, paginate: { classPropertyName: "paginate", publicName: "paginate", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, perPage: { classPropertyName: "perPage", publicName: "perPage", isSignal: true, isRequired: false, transformFunction: null }, perPageOptions: { classPropertyName: "perPageOptions", publicName: "perPageOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, dragGroup: { classPropertyName: "dragGroup", publicName: "dragGroup", isSignal: true, isRequired: false, transformFunction: null }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: true, isRequired: false, transformFunction: null }, keyboardSortable: { classPropertyName: "keyboardSortable", publicName: "keyboardSortable", isSignal: true, isRequired: false, transformFunction: null }, connected: { classPropertyName: "connected", publicName: "connected", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, clickFn: { classPropertyName: "clickFn", publicName: "clickFn", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, batchActions: { classPropertyName: "batchActions", publicName: "batchActions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", error: "errorChange", page: "pageChange", perPage: "perPageChange", totalItems: "totalItemsChange", sorted: "sorted" }, host: { properties: { "class.hub-list--rtl": "isRtl()", "attr.data-variant": "options.variant ?? null", "style.--hub-list-accent": "accentVar()", "attr.data-hub-drag-owner": "_listId" }, classAttribute: "hub-list" }, providers: [
|
|
3195
3210
|
{
|
|
3196
3211
|
provide: NG_VALUE_ACCESSOR,
|
|
3197
3212
|
useExisting: ListComponent,
|
|
@@ -3205,6 +3220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
3205
3220
|
class: 'hub-list',
|
|
3206
3221
|
'[class.hub-list--rtl]': 'isRtl()',
|
|
3207
3222
|
'[attr.data-variant]': 'options.variant ?? null',
|
|
3223
|
+
'[style.--hub-list-accent]': 'accentVar()',
|
|
3208
3224
|
'[attr.data-hub-drag-owner]': '_listId'
|
|
3209
3225
|
}, providers: [
|
|
3210
3226
|
{
|
|
@@ -4443,6 +4459,20 @@ class TableComponent {
|
|
|
4443
4459
|
isRtl() {
|
|
4444
4460
|
return this.options()?.rtl === true;
|
|
4445
4461
|
}
|
|
4462
|
+
/**
|
|
4463
|
+
* Resolves the table's accent slot from `options.variant`, accepting ANY colour.
|
|
4464
|
+
*
|
|
4465
|
+
* A bareword (semantic name, registered accent or CSS named colour) resolves to
|
|
4466
|
+
* the matching `--hub-sys-color-*` ds token with the raw word as fallback, while a
|
|
4467
|
+
* literal `#hex` / `rgb()` / `oklch()` / `var()` is passed through unchanged. The
|
|
4468
|
+
* value is bound to the single `--hub-table-accent` slot (the SCSS derives the
|
|
4469
|
+
* `-emphasis` / `-subtle` / `-on` family from it); `null` (no variant) defers to
|
|
4470
|
+
* the SCSS default and the built-in `.hub-table__<variant>` class rules.
|
|
4471
|
+
*
|
|
4472
|
+
* @returns The `--hub-table-accent` value, or `null` when no variant is set.
|
|
4473
|
+
*/
|
|
4474
|
+
accentVar = computed(() => resolveHubAccent(this.options()?.variant), /* @ts-ignore */
|
|
4475
|
+
...(ngDevMode ? [{ debugName: "accentVar" }] : /* istanbul ignore next */ []));
|
|
4446
4476
|
/**
|
|
4447
4477
|
* Collection of selected rows
|
|
4448
4478
|
*
|
|
@@ -4774,6 +4804,17 @@ class TableComponent {
|
|
|
4774
4804
|
/** Whether action buttons should stick to viewport during scrolling */
|
|
4775
4805
|
stickyActions = input(false, /* @ts-ignore */
|
|
4776
4806
|
...(ngDevMode ? [{ debugName: "stickyActions" }] : /* istanbul ignore next */ []));
|
|
4807
|
+
/**
|
|
4808
|
+
* Pins the table header to the top while the body scrolls.
|
|
4809
|
+
*
|
|
4810
|
+
* When enabled the `thead` becomes `position: sticky; top: 0`, so the header stays
|
|
4811
|
+
* visible when the table lives inside a fixed-height scroll container
|
|
4812
|
+
* (`max-height` + `overflow: auto`). Unlike the `options.scrollable` path this does
|
|
4813
|
+
* not require the built-in scroll frame — it works with any consumer-provided
|
|
4814
|
+
* scroll parent. The sticky position itself is overridable via
|
|
4815
|
+
* `--hub-table-head-position` and the offset via `--hub-table-head-sticky-top`.
|
|
4816
|
+
*/
|
|
4817
|
+
stickyHeader = input(false, { ...(ngDevMode ? { debugName: "stickyHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4777
4818
|
/** Actions that can be performed on multiple selected rows */
|
|
4778
4819
|
batchActions = input([], { ...(ngDevMode ? { debugName: "batchActions" } : /* istanbul ignore next */ {}), transform: (value) => {
|
|
4779
4820
|
return value.map((item) => {
|
|
@@ -5431,13 +5472,13 @@ class TableComponent {
|
|
|
5431
5472
|
return [...new Set(tokens.map((item) => item.trim()).filter(Boolean))];
|
|
5432
5473
|
}
|
|
5433
5474
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5434
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: TableComponent, isStandalone: true, selector: "hub-table, hub-ui-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, perPageOptions: { classPropertyName: "perPageOptions", publicName: "perPageOptions", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, perPage: { classPropertyName: "perPage", publicName: "perPage", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, ordination: { classPropertyName: "ordination", publicName: "ordination", isSignal: true, isRequired: false, transformFunction: null }, paginate: { classPropertyName: "paginate", publicName: "paginate", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, loadingComponent: { classPropertyName: "loadingComponent", publicName: "loadingComponent", isSignal: true, isRequired: false, transformFunction: null }, errorComponent: { classPropertyName: "errorComponent", publicName: "errorComponent", isSignal: true, isRequired: false, transformFunction: null }, noResultsComponent: { classPropertyName: "noResultsComponent", publicName: "noResultsComponent", isSignal: true, isRequired: false, transformFunction: null }, paginationPosition: { classPropertyName: "paginationPosition", publicName: "paginationPosition", isSignal: true, isRequired: false, transformFunction: null }, paginationInfo: { classPropertyName: "paginationInfo", publicName: "paginationInfo", isSignal: true, isRequired: false, transformFunction: null }, stickyActions: { classPropertyName: "stickyActions", publicName: "stickyActions", isSignal: true, isRequired: false, transformFunction: null }, batchActions: { classPropertyName: "batchActions", publicName: "batchActions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, compareFn: { classPropertyName: "compareFn", publicName: "compareFn", isSignal: true, isRequired: false, transformFunction: null }, clickFn: { classPropertyName: "clickFn", publicName: "clickFn", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headers: "headersChange", filters: "filtersChange", page: "pageChange", perPage: "perPageChange", totalItems: "totalItemsChange", ordination: "ordinationChange", loading: "loadingChange", error: "errorChange", searchTerm: "searchTermChange" }, host: { properties: { "class.hub-table--rtl": "isRtl()" }, classAttribute: "hub-table" }, providers: [
|
|
5475
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: TableComponent, isStandalone: true, selector: "hub-table, hub-ui-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, perPageOptions: { classPropertyName: "perPageOptions", publicName: "perPageOptions", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, perPage: { classPropertyName: "perPage", publicName: "perPage", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, ordination: { classPropertyName: "ordination", publicName: "ordination", isSignal: true, isRequired: false, transformFunction: null }, paginate: { classPropertyName: "paginate", publicName: "paginate", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, loadingComponent: { classPropertyName: "loadingComponent", publicName: "loadingComponent", isSignal: true, isRequired: false, transformFunction: null }, errorComponent: { classPropertyName: "errorComponent", publicName: "errorComponent", isSignal: true, isRequired: false, transformFunction: null }, noResultsComponent: { classPropertyName: "noResultsComponent", publicName: "noResultsComponent", isSignal: true, isRequired: false, transformFunction: null }, paginationPosition: { classPropertyName: "paginationPosition", publicName: "paginationPosition", isSignal: true, isRequired: false, transformFunction: null }, paginationInfo: { classPropertyName: "paginationInfo", publicName: "paginationInfo", isSignal: true, isRequired: false, transformFunction: null }, stickyActions: { classPropertyName: "stickyActions", publicName: "stickyActions", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, batchActions: { classPropertyName: "batchActions", publicName: "batchActions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, compareFn: { classPropertyName: "compareFn", publicName: "compareFn", isSignal: true, isRequired: false, transformFunction: null }, clickFn: { classPropertyName: "clickFn", publicName: "clickFn", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headers: "headersChange", filters: "filtersChange", page: "pageChange", perPage: "perPageChange", totalItems: "totalItemsChange", ordination: "ordinationChange", loading: "loadingChange", error: "errorChange", searchTerm: "searchTermChange" }, host: { properties: { "class.hub-table--rtl": "isRtl()", "class.hub-table--sticky-header": "stickyHeader()", "style.--hub-table-accent": "accentVar()" }, classAttribute: "hub-table" }, providers: [
|
|
5435
5476
|
{
|
|
5436
5477
|
provide: NG_VALUE_ACCESSOR,
|
|
5437
5478
|
useExisting: forwardRef(() => TableComponent),
|
|
5438
5479
|
multi: true
|
|
5439
5480
|
}
|
|
5440
|
-
], queries: [{ propertyName: "templateRow", first: true, predicate: PaginableTableRowDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTpts", predicate: PaginableTableHeaderDirective, isSignal: true }, { propertyName: "templateCells", predicate: PaginableTableCellDirective, isSignal: true }, { propertyName: "noResultsTpt", first: true, predicate: PaginableNoResultsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "loadingTpt", first: true, predicate: PaginableLoadingDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "errorTpt", first: true, predicate: PaginableErrorDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "templateExpandingRows", predicate: PaginableTableExpandingRowDirective, isSignal: true }, { propertyName: "filterTpts", predicate: PaginableTableFilterDirective, isSignal: true }], viewQueries: [{ propertyName: "dropdownComponents", predicate: DropdownComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (batchActions().length || searchable() || headerFilters().length) {\n\t<div class=\"hub-table__top-bar\">\n\t\t@if (batchActions().length) {\n\t\t\t<div class=\"hub-table__batch-actions\">\n\t\t\t\t@for (button of batchActions(); track $index) {\n\t\t\t\t\t@if ($any(button).buttons?.length) {\n\t\t\t\t\t\t<hub-table-dropdown\n\t\t\t\t\t\t\tclass=\"hub-table__batch-actions-dropdown\"\n\t\t\t\t\t\t\t[options]=\"$any(button)\"\n\t\t\t\t\t\t\t[disabled]=\"!value.length\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t</hub-table-dropdown>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"hub-table__batch-actions-btn\"\n\t\t\t\t\t\t\t[ngClass]=\"getBatchActionClassList(button)\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t(click)=\"handleBatchAction(button)\"\n\t\t\t\t\t\t\t[disabled]=\"!value.length\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@if (button.icon) {\n\t\t\t\t\t\t\t\t<i class=\"hub-table__batch-actions-btn-icon {{ button.icon }}\"></i>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t@if (button.title) {\n\t\t\t\t\t\t\t\t<span class=\"hub-table__batch-actions-btn-title\">{{ button.title | unwrapAsync }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@if (searchable()) {\n\t\t\t<div class=\"hub-table__search\">\n\t\t\t\t@if (isRtl()) {\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"hub-table__search-button btn btn-outline-dark\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<i class=\"hub-table__search-icon hub-table__icon hub-table__icon--search\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</button>\n\t\t\t\t\t@if (formControlsAdapter) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\thubPaginableControl=\"input\"\n\t\t\t\t\t\t\tcontrolType=\"text\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[ariaLabel]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\tcssClass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(valueChange)=\"searchProxy$.next($any($event))\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t@if (formControlsAdapter) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\thubPaginableControl=\"input\"\n\t\t\t\t\t\t\tcontrolType=\"text\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[ariaLabel]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\tcssClass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(valueChange)=\"searchProxy$.next($any($event))\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"hub-table__search-button btn btn-outline-dark\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<i class=\"hub-table__search-icon hub-table__icon hub-table__icon--search\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@if (headerFilters().length) {\n\t\t\t<div class=\"hub-table__delete-filters\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-table__delete-filters-btn btn btn-outline-danger\"\n\t\t\t\t\t(click)=\"clearFilters()\"\n\t\t\t\t\t[disabled]=\"filterLoading\"\n\t\t\t\t>\n\t\t\t\t\t<i class=\"hub-table__delete-filters-icon hub-table__icon hub-table__icon--eraser\"></i>\n\t\t\t\t\t{{ 'CLEAN_FILTERS' | translate | ucfirst }}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t}\n\t</div>\n}\n\n<div class=\"hub-table__container {{ responsiveCSSClass() }}\" [class.hub-table__responsive]=\"responsiveCSSClass()\">\n\t@let striped = options().striped;\n\t<table\n\t\tclass=\"hub-table__element\"\n\t\thubStickyColumns\n\t\t[class.hub-table__hover]=\"(options().hoverableRows || selectable()) && !loading()\"\n\t\t[class.hub-table__striped-odd]=\"striped === 'rows-odd'\"\n\t\t[class.hub-table__striped-even]=\"striped === 'rows-even'\"\n\t\t[class.hub-table__striped-columns-odd]=\"striped === 'columns-odd'\"\n\t\t[class.hub-table__striped-columns-even]=\"striped === 'columns-even'\"\n\t\t[class.hub-table__selectable]=\"selectable()\"\n\t\t[class.hub-table__scrollable]=\"options().scrollable\"\n\t\t[ngClass]=\"options().variant ? 'hub-table__' + options().variant : null\"\n\t>\n\t\t<thead class=\"hub-table__head\" [formGroup]=\"filtersFG\">\n\t\t\t<tr class=\"hub-table__head-row\">\n\t\t\t\t@if (selectable()) {\n\t\t\t\t\t<th class=\"hub-table__header-cell hub-table__header-cell--actions sticky-start\" data-col=\"__hub_select\">\n\t\t\t\t\t\t@if (multipleSelectable()) {\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t[(ngModel)]=\"allRowsSelected\"\n\t\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t\t(click)=\"toggleAll()\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t</th>\n\t\t\t\t}\n\t\t\t\t@for (header of fixedHeaders(); track header.property) {\n\t\t\t\t\t@if (!(isColumnHidden(header) | async)) {\n\t\t\t\t\t\t<th\n\t\t\t\t\t\t\tclass=\"hub-table__header-cell\"\n\t\t\t\t\t\t\tresizable\n\t\t\t\t\t\t\t[attr.data-col]=\"header.property\"\n\t\t\t\t\t\t\t[class.sticky-start]=\"header.sticky === 'start'\"\n\t\t\t\t\t\t\t[class.sticky-end]=\"header.sticky === 'end'\"\n\t\t\t\t\t\t\t[class.text-start]=\"header.align === 'start'\"\n\t\t\t\t\t\t\t[class.text-end]=\"header.align === 'end'\"\n\t\t\t\t\t\t\t[class.text-center]=\"header.align === 'center'\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"hub-table__header-cell-content d-flex flex-nowrap align-items-center justify-content-between gap-2\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"getHeaderTemplate(header) || defaultHeaderTpt\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\t\theader,\n\t\t\t\t\t\t\t\t\t\tproperty: header | get: header.property\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t@if (header.sortable || header.filter?.mode === 'menu') {\n\t\t\t\t\t\t\t\t\t<div class=\"hub-table__header-cell-actions d-flex gap-2 ms-auto align-items-center\">\n\t\t\t\t\t\t\t\t\t\t<button class=\"hub-table__sort-btn btn\" (click)=\"sort(header)\">\n\t\t\t\t\t\t\t\t\t\t\t@if (header.sortable) {\n\t\t\t\t\t\t\t\t\t\t\t\t<i\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__sort-icon hub-table__icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[ngClass]=\"getOrdenationClass(header)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t@if (header.filter?.mode === 'menu') {\n\t\t\t\t\t\t\t\t\t\t\t<hub-dropdown\n\t\t\t\t\t\t\t\t\t\t\t\t#dropdown\n\t\t\t\t\t\t\t\t\t\t\t\t(open)=\"onDropdownFilterOpened($event)\"\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-dropdown\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-button button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[class.hub-table__filter-button--active]=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfiltersFG.get(header.filter.key || header.property)?.value?.rules\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.length\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<i\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-button-icon hub-table__icon hub-table__icon--filter\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t\t\t\t\t\t\t\t@if (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfiltersFG.get(header.filter.key || header.property)?.value?.rules;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tas rules\n\t\t\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (rules.length) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"hub-table__filter-count\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ rules.length }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t@if (dropdown.isOpened()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<menu-filter\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-dropdown-content content\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[header]=\"header\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[formControlName]=\"header.filter.key || header.property\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</menu-filter>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</hub-dropdown>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</th>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@if (templateExpandingRows().length) {\n\t\t\t\t\t<th class=\"hub-table__header-cell hub-table__header-cell--expander sticky-end\" data-col=\"__hub_expander\"></th>\n\t\t\t\t}\n\t\t\t</tr>\n\n\t\t\t<!-- Filtering -->\n\t\t\t@if (hasColumnFilters()) {\n\t\t\t\t<tr class=\"hub-table__filter-row\">\n\t\t\t\t\t@if (selectable() || batchActions.length) {\n\t\t\t\t\t\t<th class=\"hub-table__filter-cell sticky-start\" data-col=\"__hub_select\"></th>\n\t\t\t\t\t}\n\t\t\t\t\t@for (header of fixedHeaders(); track $index; let last = $last) {\n\t\t\t\t\t\t@if (!(isColumnHidden(header) | async)) {\n\t\t\t\t\t\t\t@let formControlName = header.filter?.key || header.property;\n\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\tclass=\"hub-table__filter-cell\"\n\t\t\t\t\t\t\t\t[attr.data-col]=\"header.property\"\n\t\t\t\t\t\t\t\t[class.sticky-start]=\"header.sticky === 'start'\"\n\t\t\t\t\t\t\t\t[class.sticky-end]=\"header.sticky === 'end'\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (header.filter && header.filter.mode !== 'menu' && filtersFG.get(formControlName)) {\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"getFilterTemplate(header) || defaultFilterTpt\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\t\t\theader: header,\n\t\t\t\t\t\t\t\t\t\t\tformControl: filtersFG.get(formControlName)\n\t\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</tr>\n\t\t\t}\n\t\t</thead>\n\t\t<tbody class=\"hub-table__body\">\n\t\t\t@if (loading()) {\n\t\t\t\t<tr class=\"hub-table__body-row\">\n\t\t\t\t\t<td class=\"hub-table__cell\" [attr.colspan]=\"fullColspan\">\n\t\t\t\t\t\t<hub-state-outlet\n\t\t\t\t\t\t\t[template]=\"loadingTpt()\"\n\t\t\t\t\t\t\t[instanceDefault]=\"loadingComponent()\"\n\t\t\t\t\t\t\t[globalDefault]=\"defaults.loading()\"\n\t\t\t\t\t\t\t[fallback]=\"defaultLoadingTpt\"\n\t\t\t\t\t\t\t[context]=\"{ colspan: fullColspan }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t} @else if (error()) {\n\t\t\t\t<tr class=\"hub-table__body-row\">\n\t\t\t\t\t<td class=\"hub-table__cell\" [attr.colspan]=\"fullColspan\">\n\t\t\t\t\t\t<hub-state-outlet\n\t\t\t\t\t\t\t[template]=\"errorTpt()\"\n\t\t\t\t\t\t\t[instanceDefault]=\"errorComponent()\"\n\t\t\t\t\t\t\t[globalDefault]=\"defaults.error()\"\n\t\t\t\t\t\t\t[fallback]=\"defaultErrorTpt\"\n\t\t\t\t\t\t\t[context]=\"{ error: error(), colspan: fullColspan }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t} @else if (displayedRows().length) {\n\t\t\t\t@for (item of displayedRows(); track $index) {\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"templateRow() || defaultRowTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item }\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-container>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t<tr>\n\t\t\t\t\t<td [attr.colspan]=\"fullColspan\">\n\t\t\t\t\t\t<hub-state-outlet\n\t\t\t\t\t\t\t[template]=\"noResultsTpt()\"\n\t\t\t\t\t\t\t[instanceDefault]=\"noResultsComponent()\"\n\t\t\t\t\t\t\t[globalDefault]=\"defaults.noResults()\"\n\t\t\t\t\t\t\t[fallback]=\"defaultNoResultsTpt\"\n\t\t\t\t\t\t\t[context]=\"{ colspan: fullColspan, filters: filters() ?? undefined }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t}\n\t\t</tbody>\n\t</table>\n</div>\n\n<!-- Pagination -->\n@if (page() !== undefined && page() !== null) {\n\t<div class=\"hub-table__bottom-bar\">\n\t\t@if (paginationPosition() == 'bottom' || paginationPosition() === 'both') {\n\t\t\t<hub-paginator\n\t\t\t\tclass=\"hub-table__paginator hub-table__bottom-bar-paginator\"\n\t\t\t\t[(page)]=\"$any(page)\"\n\t\t\t\t[numberOfPages]=\"numberOfPages()\"\n\t\t\t\t[rtl]=\"isRtl()\"\n\t\t\t>\n\t\t\t</hub-paginator>\n\t\t}\n\t\t<div class=\"hub-table__bottom-bar-settings hub-paginator__settings\">\n\t\t\t<label class=\"hub-paginator__label\"> {{ 'ROWS_PER_PAGE' | translate | ucfirst }}: </label>\n\t\t\t@if (formControlsAdapter) {\n\t\t\t\t<ng-container\n\t\t\t\t\thubPaginableControl=\"select\"\n\t\t\t\t\t[value]=\"perPage()\"\n\t\t\t\t\t[options]=\"perPageControlOptions()\"\n\t\t\t\t\t[ariaLabel]=\"'ROWS_PER_PAGE' | translate | ucfirst\"\n\t\t\t\t\tcssClass=\"hub-paginator__select\"\n\t\t\t\t\t(valueChange)=\"perPage.set($any($event))\"\n\t\t\t\t></ng-container>\n\t\t\t} @else {\n\t\t\t\t<select\n\t\t\t\t\tclass=\"hub-paginator__select\"\n\t\t\t\t\t[ngModel]=\"perPage()\"\n\t\t\t\t\t(ngModelChange)=\"perPage.set($event)\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t>\n\t\t\t\t\t@for (option of perPageOptions(); track option) {\n\t\t\t\t\t\t<option [ngValue]=\"option\" class=\"hub-paginator__select-option\">\n\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t}\n\t\t\t\t</select>\n\t\t\t}\n\t\t</div>\n\t\t@if (clientMode() || (totalItems() !== null && totalItems() !== undefined)) {\n\t\t\t<p class=\"hub-table__bottom-bar-info hub-paginator__info\">\n\t\t\t\t{{\n\t\t\t\t\t'SHOWING_X_OF_Y_ROWS'\n\t\t\t\t\t\t| translate\n\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\tamount: displayedRows().length,\n\t\t\t\t\t\t\t\t\ttotal: clientMode() ? clientFilteredRows().length : totalItems()\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t| ucfirst\n\t\t\t\t}}\n\t\t\t</p>\n\t\t}\n\t</div>\n}\n<ng-template #defaultRowTemplate let-item>\n\t<tr\n\t\tclass=\"hub-table__body-row\"\n\t\t(click)=\"onItemClick($event, item)\"\n\t\t[class.hub-table__body-row--selected]=\"selectable() && item.selected\"\n\t\t[class.hub-table__body-row--clickable]=\"clickFn()\"\n\t\t[ngClass]=\"_getRowClass(item)\"\n\t>\n\t\t@if (selectable() || batchActions.length) {\n\t\t\t<td class=\"hub-table__cell hub-table__cell--select sticky-start\" data-col=\"__hub_select\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t[(ngModel)]=\"item.selected\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t(click)=\"$event.stopPropagation(); toggle(item)\"\n\t\t\t\t/>\n\t\t\t</td>\n\t\t}\n\t\t@for (header of fixedHeaders(); track $index) {\n\t\t\t@if (!(isColumnHidden(header) | async)) {\n\t\t\t\t<td\n\t\t\t\t\tclass=\"hub-table__cell\"\n\t\t\t\t\t[attr.data-col]=\"header.property\"\n\t\t\t\t\t[class.sticky-start]=\"header.sticky === 'start'\"\n\t\t\t\t\t[class.sticky-end]=\"header.sticky === 'end'\"\n\t\t\t\t\t[class.text-start]=\"header.align === 'start'\"\n\t\t\t\t\t[class.text-end]=\"header.align === 'end'\"\n\t\t\t\t\t[class.text-center]=\"header.align === 'center'\"\n\t\t\t\t\t[style.width]=\"header.buttons?.length ? '0' : 'auto'\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getCellTemplate(header) || defaultCellTpt\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\theader: header,\n\t\t\t\t\t\t\titem: item.data,\n\t\t\t\t\t\t\trow: item,\n\t\t\t\t\t\t\tproperty: item.data | get: header.property\n\t\t\t\t\t\t}\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</td>\n\t\t\t}\n\t\t}\n\t\t@if (templateExpandingRows().length) {\n\t\t\t<td class=\"hub-table__cell hub-table__cell--expander sticky-end\" data-col=\"__hub_expander\" [class.sticky-end]=\"stickyActions()\">\n\t\t\t\t@if (templateExpandingRows().length) {\n\t\t\t\t\t<button (click)=\"toggleExpandedRow(item)\" type=\"button\" class=\"hub-table__expander-btn btn btn-link px-2\">\n\t\t\t\t\t\t<i\n\t\t\t\t\t\t\tclass=\"hub-table__expander-icon hub-table__icon\"\n\t\t\t\t\t\t\t[class.hub-table__icon--caret-up]=\"!item.collapsed\"\n\t\t\t\t\t\t\t[class.hub-table__icon--caret-down]=\"item.collapsed\"\n\t\t\t\t\t\t></i>\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</td>\n\t\t}\n\t\t<!-- <td *ngIf=\"!lastColumnOnlyHasButtons && filterHeaders?.length\"></td> -->\n\t</tr>\n\t@if (!item.collapsed) {\n\t\t@for (template of templateExpandingRows(); track template) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"template.templateRef\" [ngTemplateOutletContext]=\"{ item: item, colspan: fullColspan }\"> </ng-container>\n\t\t}\n\t}\n</ng-template>\n\n<ng-template #defaultNoResultsTpt>\n\t<div class=\"hub-table__no-data alert alert-info d-flex align-items-center m-4\" role=\"alert\">\n\t\t<i class=\"hub-table__no-data-icon hub-table__icon hub-table__icon--info hub-table__icon--2x\" aria-hidden=\"true\"></i>\n\t\t{{ 'NO_RESULTS_FOUND' | translate | ucfirst }}\n\t</div>\n</ng-template>\n\n<ng-template #defaultLoadingTpt>\n\t<div class=\"hub-table__loading\">\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\txmlns:xlink=\"http://www.w3.org/1999/xlink\"\n\t\t\tstyle=\"margin: auto; background: #fff; display: block\"\n\t\t\twidth=\"200px\"\n\t\t\theight=\"200px\"\n\t\t\tviewBox=\"0 0 100 100\"\n\t\t\tpreserveAspectRatio=\"xMidYMid\"\n\t\t>\n\t\t\t<circle cx=\"50\" cy=\"50\" r=\"0\" fill=\"none\" stroke=\"#cccccc\" stroke-width=\"1\">\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"r\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"0;40\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0 0.2 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"0s\"\n\t\t\t\t></animate>\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"opacity\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"1;0\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0.2 0 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"0s\"\n\t\t\t\t></animate>\n\t\t\t</circle>\n\t\t\t<circle cx=\"50\" cy=\"50\" r=\"0\" fill=\"none\" stroke=\"#333333\" stroke-width=\"1\">\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"r\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"0;40\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0 0.2 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"-0.8333333333333334s\"\n\t\t\t\t></animate>\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"opacity\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"1;0\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0.2 0 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"-0.8333333333333334s\"\n\t\t\t\t></animate>\n\t\t\t</circle>\n\t\t</svg>\n\t</div>\n</ng-template>\n\n<ng-template #defaultErrorTpt>\n\t<div class=\"hub-table__error m-4 p-4 text-center text-danger\">\n\t\t<svg\n\t\t\taria-hidden=\"true\"\n\t\t\tfocusable=\"false\"\n\t\t\tdata-prefix=\"fal\"\n\t\t\tdata-icon=\"sad-tear\"\n\t\t\trole=\"img\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox=\"0 0 496 512\"\n\t\t\tstyle=\"height: 64px\"\n\t\t>\n\t\t\t<path\n\t\t\t\tfill=\"#dc3545\"\n\t\t\t\td=\"M168 240c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zM248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-152c-11.2 0-22 1.7-32.7 4.1-7.2-12.6-16.1-26.5-28.1-42.4-9-12.1-29.4-12-38.4 0-29.7 39.6-44.8 69-44.8 87.3 0 34.7 28.7 63 64 63s64-28.3 64-63c0-4.4-1-9.5-2.7-15.1 6.1-1.2 12.3-1.9 18.7-1.9 34.9 0 67.8 15.4 90.2 42.2 5.3 6.4 15.4 8 22.5 2 6.8-5.7 7.7-15.8 2-22.5C334.2 339.6 292.4 320 248 320zm-80 80c-17.7 0-32-13.9-32-31 0-7.7 10-28.8 32-59.5 22 30.7 32 51.8 32 59.5 0 17.1-14.3 31-32 31z\"\n\t\t\t\tclass=\"\"\n\t\t\t></path>\n\t\t</svg>\n\t\t<p>{{ 'ERROR_OCURRED' | translate }}</p>\n\t</div>\n</ng-template>\n\n<ng-template #defaultHeaderTpt let-header=\"header\" let-property=\"property\">\n\t@if (header.icon) {\n\t\t<i class=\"hub-table__header-icon {{ header.icon }}\" aria-hidden=\"true\"></i>\n\t}\n\t<div\n\t\tclass=\"hub-table__header-title\"\n\t\t[class.me-auto]=\"header.align === 'start'\"\n\t\t[class.ms-auto]=\"header.align === 'end'\"\n\t\t[class.mx-auto]=\"header.align === 'center'\"\n\t>\n\t\t@if (header.title) {\n\t\t\t<span class=\"hub-table__header-title-text text-wrap\">{{ header.title ?? header.property | unwrapAsync }}</span>\n\t\t}\n\t</div>\n</ng-template>\n\n<ng-template #defaultFilterTpt let-header=\"header\" let-formControl=\"formControl\">\n\t@switch (header.filter.type) {\n\t\t@case ('dropdown') {\n\t\t\t<select [formControl]=\"formControl\" class=\"form-select form-control\">\n\t\t\t\t@if (header.filter.placeholder) {\n\t\t\t\t\t<option [ngValue]=\"null\">\n\t\t\t\t\t\t{{ header.filter.placeholder }}\n\t\t\t\t\t</option>\n\t\t\t\t}\n\t\t\t\t@if (header.filter.options | isObservable) {\n\t\t\t\t\t@let options = header.filter.options | async;\n\t\t\t\t\t@for (option of $any(options); track option) {\n\t\t\t\t\t\t<option [value]=\"option[header.filter.bindValue || 'id']\">\n\t\t\t\t\t\t\t{{ option[header.filter.bindLabel || 'name'] }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t@for (option of header.filter.options; track option) {\n\t\t\t\t\t\t<option [value]=\"option[header.filter.bindValue || 'id']\">\n\t\t\t\t\t\t\t{{ option[header.filter.bindLabel || 'name'] }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</select>\n\t\t}\n\t\t@case ('number-range') {\n\t\t\t<hub-table-range-input type=\"number\" [formControl]=\"formControl\"> </hub-table-range-input>\n\t\t}\n\t\t@case ('date-range') {\n\t\t\t<hub-table-range-input type=\"date\" [formControl]=\"formControl\"> </hub-table-range-input>\n\t\t}\n\t\t@case ('boolean') {\n\t\t\t<select [formControl]=\"formControl\" class=\"form-select form-control\">\n\t\t\t\t<option [ngValue]=\"null\">\n\t\t\t\t\t{{ header.filter.placeholder ?? 'SELECT_ONE' | translate | ucfirst }}\n\t\t\t\t</option>\n\t\t\t\t<option [ngValue]=\"true\">\n\t\t\t\t\t{{ header.filter.trueLabel ?? ('TRUE' | translate | ucfirst) }}\n\t\t\t\t</option>\n\t\t\t\t<option [ngValue]=\"false\">\n\t\t\t\t\t{{ header.filter.falseLabel ?? ('FALSE' | translate | ucfirst) }}\n\t\t\t\t</option>\n\t\t\t</select>\n\t\t}\n\t\t@default {\n\t\t\t<input\n\t\t\t\t[type]=\"header.filter.type\"\n\t\t\t\t[formControl]=\"formControl\"\n\t\t\t\tclass=\"form-control\"\n\t\t\t\t[placeholder]=\"header.filter.placeholder || ''\"\n\t\t\t/>\n\t\t}\n\t}\n</ng-template>\n\n<ng-template #defaultCellTpt let-property=\"property\" let-item=\"item\" let-row=\"row\" let-header=\"header\">\n\t@if (header.buttons) {\n\t\t<div class=\"hub-table__cell-buttons d-flex flex-nowrap gap-2 justify-content-end align-items-center\">\n\t\t\t@for (button of header.buttons; track button) {\n\t\t\t\t@if (button.buttons) {\n\t\t\t\t\t<hub-table-dropdown [options]=\"button\" [row]=\"row\" class=\"hub-table__cell-dropdown d-inline-block\">\n\t\t\t\t\t</hub-table-dropdown>\n\t\t\t\t} @else {\n\t\t\t\t\t@if (!(isHidden(button, row) | async)) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-table__cell-btn\"\n\t\t\t\t\t\t\t[attr.title]=\"button.tooltip | unwrapAsync\"\n\t\t\t\t\t\t\t(click)=\"handleAction($event, button, row)\"\n\t\t\t\t\t\t\t[ngClass]=\"getRowActionClassList(button)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div class=\"hub-table__cell-btn-content d-flex flex-nowrap align-items-center gap-1\">\n\t\t\t\t\t\t\t\t<ng-hub-ui-icon [config]=\"button.icon\"></ng-hub-ui-icon>\n\t\t\t\t\t\t\t\t@if (button.label) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-table__cell-btn-label\">{{ button.label | unwrapAsync }}</span>\n\t\t\t\t\t\t\t\t} @else if (button.title) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-table__cell-btn-label\">{{ button.title | unwrapAsync }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t} @else {\n\t\t<span class=\"hub-table__cell-value\">{{ property }}</span>\n\t}\n</ng-template>\n", styles: [":root,:host{--hub-table-container-bg: var(--hub-ref-color-white, #fff);--hub-table-container-color: var(--hub-sys-text-primary, #212529);--hub-table-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-table-border-radius: var(--hub-ref-radius-md, .375rem);--hub-table-border-width: var(--hub-ref-border-width, 1px);--hub-table-row-divider-color: var(--hub-table-border-color);--hub-table-container-max-block-size: none;--hub-table-head-sticky-top: 0;--hub-table-container-gap: var(--hub-ref-space-3, 1rem);--hub-table-top-bar-gap: var(--hub-ref-space-3, 1rem);--hub-table-top-bar-justify-content: end;--hub-table-top-bar-align-items: center;--hub-table-top-bar-wrap: wrap;--hub-table-batch-actions-gap: var(--hub-ref-space-2, .5rem);--hub-table-batch-actions-margin-inline-end: auto;--hub-table-bottom-bar-gap: var(--hub-ref-space-3, 1rem);--hub-table-bottom-bar-justify-content: space-around;--hub-table-bottom-bar-align-items: center;--hub-table-bottom-bar-wrap: wrap;--hub-table-bottom-bar-paginator-order: 1;--hub-table-bottom-bar-settings-order: 2;--hub-table-bottom-bar-info-order: 3;--hub-table-bottom-bar-paginator-flex: 0 0 auto;--hub-table-bottom-bar-settings-flex: 0 0 auto;--hub-table-bottom-bar-info-flex: 0 0 auto;--hub-table-icon-color: currentColor;--hub-table-icon-size: 1em;--hub-table-icon-sort: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l128 128c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l128-128zm0 429.3l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128c-12.5 12.5-32.8 12.5-45.3 0z'/%3E%3C/svg%3E\");--hub-table-icon-sort-up: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3C/svg%3E\");--hub-table-icon-sort-down: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H32c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E\");--hub-table-icon-caret-up: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3C/svg%3E\");--hub-table-icon-caret-down: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H32c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E\");--hub-table-icon-search: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E\");--hub-table-icon-filter: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z'/%3E%3C/svg%3E\");--hub-table-icon-eraser: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M290.7 57.4L57.4 290.7c-25 25-25 65.5 0 90.5l80 80c12 12 28.3 18.7 45.3 18.7H288h9.4H512c17.7 0 32-14.3 32-32s-14.3-32-32-32H387.9L518.6 285.3c25-25 25-65.5 0-90.5L381.3 57.4c-25-25-65.5-25-90.5 0zM297.4 416H288l-105.4 0-80-80L227.3 211.3 364.7 348.7 297.4 416z'/%3E%3C/svg%3E\");--hub-table-icon-info: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-up: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-down: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5 12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-left: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-right: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 105.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E\");--hub-table-icon-angle-left: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E\");--hub-table-icon-angle-right: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E\");--hub-table-icon-angle-double-left: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z'/%3E%3C/svg%3E\");--hub-table-icon-angle-double-right: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0z'/%3E%3C/svg%3E\");--hub-table-icon-ellipsis-v: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 512'%3E%3Cpath d='M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z'/%3E%3C/svg%3E\");--hub-table-icon-trash: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z'/%3E%3C/svg%3E\");--hub-table-icon-plus: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E\");--hub-table-accent-bg: transparent;--hub-table-active-bg: var(--hub-sys-state-active-bg, rgba(0, 0, 0, .1));--hub-table-active-color: var(--hub-sys-text-primary, #212529);--hub-table-accent: var(--hub-sys-color-primary, #0d6efd);--hub-table-accent-emphasis: color-mix(in oklch, var(--hub-table-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-table-accent-subtle: color-mix(in oklch, var(--hub-table-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-table-accent-on: oklch(from var(--hub-table-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-table-selected-bg: var(--hub-table-accent-subtle);--hub-table-selected-color: var(--hub-sys-text-primary, #212529);--hub-table-bg: var(--hub-ref-color-white, #fff);--hub-table-head-bg: var(--hub-table-bg);--hub-table-head-color: var(--hub-table-color);--hub-table-bg-state: initial;--hub-table-bg-type: initial;--hub-table-cell-padding-x: var(--hub-ref-space-3, 1rem);--hub-table-cell-padding-x-sm: var(--hub-ref-space-2, .5rem);--hub-table-cell-padding-y: var(--hub-ref-space-2, .5rem);--hub-table-cell-padding-y-sm: var(--hub-ref-space-1, .25rem);--hub-table-cell-vertical-align: middle;--hub-table-color: var(--hub-sys-text-primary, #212529);--hub-table-color-state: initial;--hub-table-color-type: initial;--hub-table-group-separator-color: var(--hub-sys-border-color-default, #dee2e6);--hub-table-search-button-bg: var(--hub-table-container-bg);--hub-table-search-button-border-color: var(--hub-table-border-color);--hub-table-search-button-color: var(--hub-table-container-color);--hub-table-search-button-min-width: 2.75rem;--hub-table-search-input-bg: var(--hub-table-container-bg);--hub-table-search-input-border-color: var(--hub-table-border-color);--hub-table-search-input-color: var(--hub-table-container-color);--hub-table-search-border-width: var(--hub-table-border-width);--hub-table-search-border-radius: var(--hub-table-border-radius);--hub-table-search-input-padding-x: .75rem;--hub-table-search-input-padding-y: .375rem;--hub-table-search-input-font-size: 1rem;--hub-table-filter-button-active-bg: color-mix(in oklch, var(--hub-sys-color-success, #198754) 10%, transparent);--hub-table-filter-button-active-border-color: var(--hub-sys-color-success, #198754);--hub-table-filter-button-hover-bg: rgba(0, 0, 0, .05);--hub-table-filter-button-icon-active-color: var(--hub-sys-color-success, #198754);--hub-table-filter-button-icon-color: var(--hub-sys-text-muted, #6c757d);--hub-table-filter-button-gap: var(--hub-ref-space-2, .5rem);--hub-table-filter-button-padding-x: .75rem;--hub-table-filter-button-padding-y: .375rem;--hub-table-filter-button-border-width: 1px;--hub-table-filter-button-border-color: transparent;--hub-table-filter-button-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-table-filter-button-transition: all .2s ease;--hub-table-filter-count-bg: var(--hub-sys-color-success, #198754);--hub-table-filter-count-color: var(--hub-ref-color-white, #fff);--hub-table-filter-count-size: 1.25rem;--hub-table-filter-count-padding-x: .4em;--hub-table-filter-count-font-size: .7rem;--hub-table-filter-count-font-weight: var(--hub-ref-font-weight-bold, 700);--hub-table-filter-count-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-table-batch-actions-btn-icon-gap: var(--hub-ref-space-1, .25rem);--hub-table-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-table-hover-color: var(--hub-sys-text-primary, #212529);--hub-table-striped-bg: var(--hub-sys-state-striped-bg, rgba(0, 0, 0, .05));--hub-table-striped-color: var(--hub-sys-text-primary, #212529)}:host{display:flex;flex-direction:column;gap:var(--hub-table-container-gap);min-width:0;color:var(--hub-table-container-color)}:host .hub-table__top-bar{display:flex;justify-content:var(--hub-table-top-bar-justify-content);align-items:var(--hub-table-top-bar-align-items);flex-wrap:var(--hub-table-top-bar-wrap);gap:var(--hub-table-top-bar-gap)}:host .hub-table__batch-actions{display:flex;align-items:center;gap:var(--hub-table-batch-actions-gap);margin-inline-end:var(--hub-table-batch-actions-margin-inline-end)}:host .hub-table__batch-actions-btn-icon{margin-right:var(--hub-table-batch-actions-btn-icon-gap)}:host .hub-table__batch-actions-btn--default,:host .hub-table__cell-btn--default{border:var(--hub-table-border-width) solid var(--hub-table-border-color);border-radius:var(--hub-table-border-radius)}:host .hub-table__search{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:end}:host .hub-table__search-input{position:relative;flex:1 1 auto;width:1%;min-width:0;display:block;width:100%;padding:var(--hub-table-search-input-padding-y) var(--hub-table-search-input-padding-x);font-size:var(--hub-table-search-input-font-size);font-weight:var(--hub-ref-font-weight-base, 400);line-height:var(--hub-ref-line-height-base, 1.5);color:var(--hub-table-search-input-color);appearance:none;background-color:var(--hub-table-search-input-bg);background-clip:padding-box;border:var(--hub-table-search-border-width) solid var(--hub-table-search-input-border-color);border-radius:var(--hub-table-search-border-radius) 0 0 var(--hub-table-search-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}:host .hub-table__search-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hub-table-search-button-min-width);color:var(--hub-table-search-button-color);background-color:var(--hub-table-search-button-bg);border-color:var(--hub-table-search-button-border-color);border-radius:0 var(--hub-table-search-border-radius) var(--hub-table-search-border-radius) 0}:host .hub-table__bottom-bar{display:flex;justify-content:var(--hub-table-bottom-bar-justify-content);align-items:var(--hub-table-bottom-bar-align-items);flex-wrap:var(--hub-table-bottom-bar-wrap);gap:var(--hub-table-bottom-bar-gap)}:host .hub-table__bottom-bar-paginator{order:var(--hub-table-bottom-bar-paginator-order);flex:var(--hub-table-bottom-bar-paginator-flex)}:host .hub-table__bottom-bar-settings{order:var(--hub-table-bottom-bar-settings-order);flex:var(--hub-table-bottom-bar-settings-flex);margin:0}:host .hub-table__bottom-bar-info{order:var(--hub-table-bottom-bar-info-order);flex:var(--hub-table-bottom-bar-info-flex);margin:0}:host .hub-table__paginator{overflow:auto;margin:0}:host .hub-table__filter-button{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--hub-table-filter-button-gap);padding:var(--hub-table-filter-button-padding-y) var(--hub-table-filter-button-padding-x);cursor:pointer;border:var(--hub-table-filter-button-border-width) solid var(--hub-table-filter-button-border-color);border-radius:var(--hub-table-filter-button-border-radius);transition:var(--hub-table-filter-button-transition)}:host .hub-table__filter-button:hover{background-color:var(--hub-table-filter-button-hover-bg)}:host .hub-table__filter-button--active{background-color:var(--hub-table-filter-button-active-bg);border-color:var(--hub-table-filter-button-active-border-color)}:host .hub-table__filter-button--active .hub-table__filter-button-icon{color:var(--hub-table-filter-button-icon-active-color)}:host .hub-table__filter-button-icon{transition:color .2s ease;color:var(--hub-table-filter-button-icon-color)}:host .hub-table__filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hub-table-filter-count-size);height:var(--hub-table-filter-count-size);padding:0 var(--hub-table-filter-count-padding-x);font-size:var(--hub-table-filter-count-font-size);font-weight:var(--hub-table-filter-count-font-weight);line-height:1;color:var(--hub-table-filter-count-color);text-align:center;white-space:nowrap;background-color:var(--hub-table-filter-count-bg);border-radius:var(--hub-table-filter-count-border-radius);animation:badge-appear .2s ease}:host .hub-table__no-data-icon{margin-right:var(--hub-ref-space-4, 1.5rem)}:host .hub-table__header-icon{margin-right:var(--hub-ref-space-2, .5rem)}:host .hub-table__icon{display:inline-block;width:var(--hub-table-icon-size);height:var(--hub-table-icon-size);background-color:var(--hub-table-icon-color);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;vertical-align:middle}:host .hub-table__icon--xs{--hub-table-icon-size: .75em}:host .hub-table__icon--sm{--hub-table-icon-size: .875em}:host .hub-table__icon--lg{--hub-table-icon-size: 1.33em}:host .hub-table__icon--2x{--hub-table-icon-size: 2em}:host .hub-table__icon--3x{--hub-table-icon-size: 3em}:host .hub-table__icon--4x{--hub-table-icon-size: 4em}:host .hub-table__icon--5x{--hub-table-icon-size: 5em}:host .hub-table__icon--search{-webkit-mask-image:var(--hub-table-icon-search);mask-image:var(--hub-table-icon-search)}:host .hub-table__icon--filter{-webkit-mask-image:var(--hub-table-icon-filter);mask-image:var(--hub-table-icon-filter)}:host .hub-table__icon--eraser{-webkit-mask-image:var(--hub-table-icon-eraser);mask-image:var(--hub-table-icon-eraser)}:host .hub-table__icon--info{-webkit-mask-image:var(--hub-table-icon-info);mask-image:var(--hub-table-icon-info);margin-right:var(--hub-ref-space-4, 1.5rem)}:host .hub-table__icon--sort{-webkit-mask-image:var(--hub-table-icon-sort);mask-image:var(--hub-table-icon-sort)}:host .hub-table__icon--sort-up{-webkit-mask-image:var(--hub-table-icon-sort-up);mask-image:var(--hub-table-icon-sort-up)}:host .hub-table__icon--sort-down{-webkit-mask-image:var(--hub-table-icon-sort-down);mask-image:var(--hub-table-icon-sort-down)}:host .hub-table__icon--caret-up{-webkit-mask-image:var(--hub-table-icon-caret-up);mask-image:var(--hub-table-icon-caret-up)}:host .hub-table__icon--caret-down{-webkit-mask-image:var(--hub-table-icon-caret-down);mask-image:var(--hub-table-icon-caret-down)}:host .hub-table__icon--chevron-up{-webkit-mask-image:var(--hub-table-icon-chevron-up);mask-image:var(--hub-table-icon-chevron-up)}:host .hub-table__icon--chevron-down{-webkit-mask-image:var(--hub-table-icon-chevron-down);mask-image:var(--hub-table-icon-chevron-down)}:host .hub-table__icon--chevron-left{-webkit-mask-image:var(--hub-table-icon-chevron-left);mask-image:var(--hub-table-icon-chevron-left)}:host .hub-table__icon--chevron-right{-webkit-mask-image:var(--hub-table-icon-chevron-right);mask-image:var(--hub-table-icon-chevron-right)}:host .hub-table__icon--angle-left{-webkit-mask-image:var(--hub-table-icon-angle-left);mask-image:var(--hub-table-icon-angle-left)}:host .hub-table__icon--angle-right{-webkit-mask-image:var(--hub-table-icon-angle-right);mask-image:var(--hub-table-icon-angle-right)}:host .hub-table__icon--angle-double-left{-webkit-mask-image:var(--hub-table-icon-angle-double-left);mask-image:var(--hub-table-icon-angle-double-left)}:host .hub-table__icon--angle-double-right{-webkit-mask-image:var(--hub-table-icon-angle-double-right);mask-image:var(--hub-table-icon-angle-double-right)}:host .hub-table__icon--ellipsis-v{-webkit-mask-image:var(--hub-table-icon-ellipsis-v);mask-image:var(--hub-table-icon-ellipsis-v)}:host .hub-table__icon--trash{-webkit-mask-image:var(--hub-table-icon-trash);mask-image:var(--hub-table-icon-trash);margin-right:var(--hub-ref-space-2, .5rem)}:host .hub-table__icon--plus{-webkit-mask-image:var(--hub-table-icon-plus);mask-image:var(--hub-table-icon-plus);margin-right:var(--hub-ref-space-2, .5rem)}:host .hub-table__container{overflow:auto;max-block-size:var(--hub-table-container-max-block-size);background-color:var(--hub-table-container-bg);border:var(--hub-table-border-width) solid var(--hub-table-border-color);border-radius:var(--hub-table-border-radius);color:var(--hub-table-container-color)}:host .hub-table__element{position:relative;width:100%;border-collapse:collapse;border-spacing:0;vertical-align:var(--hub-table-cell-vertical-align);border-color:var(--hub-table-border-color);background-color:var(--hub-table-bg);color:var(--hub-table-color)}:host .hub-table__element .sticky-start{background-color:var(--hub-table-bg);left:0;position:sticky;z-index:9}:host .hub-table__element .sticky-end{background-color:var(--hub-table-bg);right:0;position:sticky;z-index:9}:host .hub-table__element .clickable-item{cursor:pointer}:host .hub-table__element>:not(caption)>*>*{padding:var(--hub-table-cell-padding-y) var(--hub-table-cell-padding-x);vertical-align:var(--hub-table-cell-vertical-align);color:var(--hub-table-color-state, var(--hub-table-color-type, var(--hub-table-color)));background-color:var(--hub-table-bg);border-bottom-style:solid;border-bottom-color:var(--hub-table-row-divider-color);border-bottom-width:var(--hub-table-border-width);box-shadow:inset 0 0 0 9999px var(--hub-table-bg-state, var(--hub-table-bg-type, var(--hub-table-accent-bg)))}:host .hub-table__element>tbody{vertical-align:inherit}:host .hub-table__element>thead{vertical-align:bottom}:host .hub-table__element>thead>tr>*{background-color:var(--hub-table-head-bg);color:var(--hub-table-head-color)}:host .hub-table__scrollable thead{position:sticky;top:var(--hub-table-head-sticky-top);z-index:10}:host .hub-table__group-divider{border-top:calc(var(--hub-table-border-width) * 2) solid var(--hub-table-group-separator-color)}:host .hub-table__sm>:not(caption)>*>*{padding:var(--hub-table-cell-padding-y-sm) var(--hub-table-cell-padding-x-sm)}:host .hub-table__bordered>:not(caption)>*{border-style:solid;border-width:var(--hub-table-border-width) 0}:host .hub-table__bordered>:not(caption)>*>*{border-style:solid;border-width:0 var(--hub-table-border-width)}:host .hub-table__borderless>:not(caption)>*>*{border-bottom-width:0}:host .hub-table__borderless>:not(:first-child){border-top-width:0}:host .hub-table__striped-odd>tbody>tr:nth-of-type(odd)>*{color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__striped-even>tbody>tr:nth-of-type(2n)>*{color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__striped-columns-odd>:not(caption)>tr>:nth-child(odd){color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__striped-columns-even>:not(caption)>tr>:nth-child(2n){color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__active{--hub-table-color-state: var(--hub-table-active-color);--hub-table-bg-state: var(--hub-table-active-bg)}:host .hub-table__hover>tbody>tr:hover>*{--hub-table-color-state: var(--hub-table-hover-color);--hub-table-bg-state: var(--hub-table-hover-bg)}:host .hub-table__body-row--selected>*,:host .hub-table__hover>tbody>tr.hub-table__body-row--selected:hover>*{--hub-table-color-state: var(--hub-table-selected-color);--hub-table-bg-state: var(--hub-table-selected-bg)}:host .hub-table__selectable>tbody>tr.hub-table__body-row{cursor:pointer}:host .hub-table__responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.hub-table__primary{--hub-table-accent: var(--hub-sys-color-primary)}.hub-table__secondary{--hub-table-accent: var(--hub-sys-color-secondary)}.hub-table__success{--hub-table-accent: var(--hub-sys-color-success)}.hub-table__danger{--hub-table-accent: var(--hub-sys-color-danger)}.hub-table__warning{--hub-table-accent: var(--hub-sys-color-warning)}.hub-table__info{--hub-table-accent: var(--hub-sys-color-info)}.hub-table__neutral{--hub-table-accent: var(--hub-sys-color-neutral)}.hub-table__light{--hub-table-accent: var(--hub-sys-color-light)}.hub-table__dark{--hub-table-accent: var(--hub-sys-color-dark)}:host.hub-table--rtl{direction:rtl}:host.hub-table--rtl .hub-table__top-bar{direction:ltr}:host.hub-table--rtl .hub-table__batch-actions{order:2;flex-direction:row-reverse;margin-inline-end:0;margin-inline-start:auto}:host.hub-table--rtl .hub-table__batch-actions-btn-icon{margin-right:0;margin-left:var(--hub-table-batch-actions-btn-icon-gap)}:host.hub-table--rtl .hub-table__search{order:1;margin-inline-end:auto;margin-inline-start:0;direction:ltr}:host.hub-table--rtl .hub-table__search-input{direction:ltr;text-align:right;border-radius:0 var(--hub-table-search-border-radius) var(--hub-table-search-border-radius) 0}:host.hub-table--rtl .hub-table__search-button{border-radius:var(--hub-table-search-border-radius) 0 0 var(--hub-table-search-border-radius)}:host.hub-table--rtl .hub-table__no-data-icon{margin-right:0;margin-left:var(--hub-ref-space-4, 1.5rem)}:host.hub-table--rtl .hub-table__header-icon{margin-right:0;margin-left:var(--hub-ref-space-2, .5rem)}.caption-top{caption-side:top}@media(max-width:576px){.hub-table__responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:768px){.hub-table__responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:992px){.hub-table__responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:1200px){.hub-table__responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:1400px){.hub-table__responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@keyframes badge-appear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PaginableTableDropdownComponent, selector: "hub-table-dropdown, paginable-table-dropdown", inputs: ["row", "options", "appendTo", "disabled"] }, { kind: "component", type: PaginatorComponent, selector: "hub-paginator, paginable-table-paginator", inputs: ["rtl", "page", "numberOfPages"], outputs: ["pageChange"] }, { kind: "component", type: DropdownComponent, selector: "hub-dropdown, hub-ui-dropdown", inputs: ["id"], outputs: ["open", "close"] }, { kind: "component", type: MenuFilterComponent, selector: "menu-filter", inputs: ["header"] }, { kind: "component", type: HubIconComponent, selector: "hub-icon, ng-hub-ui-icon", inputs: ["config"] }, { kind: "component", type: PaginableTableRangeInputComponent, selector: "hub-table-range-input, paginable-table-range-input", inputs: ["type"] }, { kind: "component", type: PaginableStateOutlet, selector: "hub-state-outlet", inputs: ["template", "instanceDefault", "globalDefault", "fallback", "context"] }, { kind: "directive", type: HubPaginableControlDirective, selector: "[hubPaginableControl]", inputs: ["hubPaginableControl", "value", "controlType", "placeholder", "ariaLabel", "cssClass", "options"], outputs: ["valueChange"] }, { kind: "directive", type: HubStickyColumnsDirective, selector: "[hubStickyColumns]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UcfirstPipe, name: "ucfirst" }, { kind: "pipe", type: UnwrapAsyncPipe, name: "unwrapAsync" }, { kind: "pipe", type: IsObservablePipe, name: "isObservable" }, { kind: "pipe", type: GetPipe, name: "get" }], animations: [
|
|
5481
|
+
], queries: [{ propertyName: "templateRow", first: true, predicate: PaginableTableRowDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTpts", predicate: PaginableTableHeaderDirective, isSignal: true }, { propertyName: "templateCells", predicate: PaginableTableCellDirective, isSignal: true }, { propertyName: "noResultsTpt", first: true, predicate: PaginableNoResultsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "loadingTpt", first: true, predicate: PaginableLoadingDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "errorTpt", first: true, predicate: PaginableErrorDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "templateExpandingRows", predicate: PaginableTableExpandingRowDirective, isSignal: true }, { propertyName: "filterTpts", predicate: PaginableTableFilterDirective, isSignal: true }], viewQueries: [{ propertyName: "dropdownComponents", predicate: DropdownComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (batchActions().length || searchable() || headerFilters().length) {\n\t<div class=\"hub-table__top-bar\">\n\t\t@if (batchActions().length) {\n\t\t\t<div class=\"hub-table__batch-actions\">\n\t\t\t\t@for (button of batchActions(); track $index) {\n\t\t\t\t\t@if ($any(button).buttons?.length) {\n\t\t\t\t\t\t<hub-table-dropdown\n\t\t\t\t\t\t\tclass=\"hub-table__batch-actions-dropdown\"\n\t\t\t\t\t\t\t[options]=\"$any(button)\"\n\t\t\t\t\t\t\t[disabled]=\"!value.length\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t</hub-table-dropdown>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"hub-table__batch-actions-btn\"\n\t\t\t\t\t\t\t[ngClass]=\"getBatchActionClassList(button)\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t(click)=\"handleBatchAction(button)\"\n\t\t\t\t\t\t\t[disabled]=\"!value.length\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@if (button.icon) {\n\t\t\t\t\t\t\t\t<i class=\"hub-table__batch-actions-btn-icon {{ button.icon }}\"></i>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t@if (button.title) {\n\t\t\t\t\t\t\t\t<span class=\"hub-table__batch-actions-btn-title\">{{ button.title | unwrapAsync }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@if (searchable()) {\n\t\t\t<div class=\"hub-table__search\">\n\t\t\t\t@if (isRtl()) {\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"hub-table__search-button btn btn-outline-dark\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<i class=\"hub-table__search-icon hub-table__icon hub-table__icon--search\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</button>\n\t\t\t\t\t@if (formControlsAdapter) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\thubPaginableControl=\"input\"\n\t\t\t\t\t\t\tcontrolType=\"text\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[ariaLabel]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\tcssClass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(valueChange)=\"searchProxy$.next($any($event))\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t@if (formControlsAdapter) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\thubPaginableControl=\"input\"\n\t\t\t\t\t\t\tcontrolType=\"text\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[ariaLabel]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\tcssClass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(valueChange)=\"searchProxy$.next($any($event))\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"hub-table__search-button btn btn-outline-dark\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<i class=\"hub-table__search-icon hub-table__icon hub-table__icon--search\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@if (headerFilters().length) {\n\t\t\t<div class=\"hub-table__delete-filters\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-table__delete-filters-btn btn btn-outline-danger\"\n\t\t\t\t\t(click)=\"clearFilters()\"\n\t\t\t\t\t[disabled]=\"filterLoading\"\n\t\t\t\t>\n\t\t\t\t\t<i class=\"hub-table__delete-filters-icon hub-table__icon hub-table__icon--eraser\"></i>\n\t\t\t\t\t{{ 'CLEAN_FILTERS' | translate | ucfirst }}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t}\n\t</div>\n}\n\n<div class=\"hub-table__container {{ responsiveCSSClass() }}\" [class.hub-table__responsive]=\"responsiveCSSClass()\">\n\t@let striped = options().striped;\n\t<table\n\t\tclass=\"hub-table__element\"\n\t\thubStickyColumns\n\t\t[class.hub-table__hover]=\"(options().hoverableRows || selectable()) && !loading()\"\n\t\t[class.hub-table__striped-odd]=\"striped === 'rows-odd'\"\n\t\t[class.hub-table__striped-even]=\"striped === 'rows-even'\"\n\t\t[class.hub-table__striped-columns-odd]=\"striped === 'columns-odd'\"\n\t\t[class.hub-table__striped-columns-even]=\"striped === 'columns-even'\"\n\t\t[class.hub-table__selectable]=\"selectable()\"\n\t\t[class.hub-table__scrollable]=\"options().scrollable\"\n\t\t[ngClass]=\"options().variant ? 'hub-table__' + options().variant : null\"\n\t>\n\t\t<thead class=\"hub-table__head\" [formGroup]=\"filtersFG\">\n\t\t\t<tr class=\"hub-table__head-row\">\n\t\t\t\t@if (selectable()) {\n\t\t\t\t\t<th class=\"hub-table__header-cell hub-table__header-cell--actions sticky-start\" data-col=\"__hub_select\">\n\t\t\t\t\t\t@if (multipleSelectable()) {\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t[(ngModel)]=\"allRowsSelected\"\n\t\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t\t(click)=\"toggleAll()\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t</th>\n\t\t\t\t}\n\t\t\t\t@for (header of fixedHeaders(); track header.property) {\n\t\t\t\t\t@if (!(isColumnHidden(header) | async)) {\n\t\t\t\t\t\t<th\n\t\t\t\t\t\t\tclass=\"hub-table__header-cell\"\n\t\t\t\t\t\t\tresizable\n\t\t\t\t\t\t\t[attr.data-col]=\"header.property\"\n\t\t\t\t\t\t\t[class.sticky-start]=\"header.sticky === 'start'\"\n\t\t\t\t\t\t\t[class.sticky-end]=\"header.sticky === 'end'\"\n\t\t\t\t\t\t\t[class.text-start]=\"header.align === 'start'\"\n\t\t\t\t\t\t\t[class.text-end]=\"header.align === 'end'\"\n\t\t\t\t\t\t\t[class.text-center]=\"header.align === 'center'\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"hub-table__header-cell-content d-flex flex-nowrap align-items-center justify-content-between gap-2\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"getHeaderTemplate(header) || defaultHeaderTpt\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\t\theader,\n\t\t\t\t\t\t\t\t\t\tproperty: header | get: header.property\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t@if (header.sortable || header.filter?.mode === 'menu') {\n\t\t\t\t\t\t\t\t\t<div class=\"hub-table__header-cell-actions d-flex gap-2 ms-auto align-items-center\">\n\t\t\t\t\t\t\t\t\t\t<button class=\"hub-table__sort-btn btn\" (click)=\"sort(header)\">\n\t\t\t\t\t\t\t\t\t\t\t@if (header.sortable) {\n\t\t\t\t\t\t\t\t\t\t\t\t<i\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__sort-icon hub-table__icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[ngClass]=\"getOrdenationClass(header)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t@if (header.filter?.mode === 'menu') {\n\t\t\t\t\t\t\t\t\t\t\t<hub-dropdown\n\t\t\t\t\t\t\t\t\t\t\t\t#dropdown\n\t\t\t\t\t\t\t\t\t\t\t\t(open)=\"onDropdownFilterOpened($event)\"\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-dropdown\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-button button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[class.hub-table__filter-button--active]=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfiltersFG.get(header.filter.key || header.property)?.value?.rules\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.length\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<i\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-button-icon hub-table__icon hub-table__icon--filter\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t\t\t\t\t\t\t\t@if (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfiltersFG.get(header.filter.key || header.property)?.value?.rules;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tas rules\n\t\t\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (rules.length) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"hub-table__filter-count\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ rules.length }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t@if (dropdown.isOpened()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<menu-filter\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-dropdown-content content\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[header]=\"header\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[formControlName]=\"header.filter.key || header.property\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</menu-filter>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</hub-dropdown>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</th>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@if (templateExpandingRows().length) {\n\t\t\t\t\t<th class=\"hub-table__header-cell hub-table__header-cell--expander sticky-end\" data-col=\"__hub_expander\"></th>\n\t\t\t\t}\n\t\t\t</tr>\n\n\t\t\t<!-- Filtering -->\n\t\t\t@if (hasColumnFilters()) {\n\t\t\t\t<tr class=\"hub-table__filter-row\">\n\t\t\t\t\t@if (selectable() || batchActions.length) {\n\t\t\t\t\t\t<th class=\"hub-table__filter-cell sticky-start\" data-col=\"__hub_select\"></th>\n\t\t\t\t\t}\n\t\t\t\t\t@for (header of fixedHeaders(); track $index; let last = $last) {\n\t\t\t\t\t\t@if (!(isColumnHidden(header) | async)) {\n\t\t\t\t\t\t\t@let formControlName = header.filter?.key || header.property;\n\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\tclass=\"hub-table__filter-cell\"\n\t\t\t\t\t\t\t\t[attr.data-col]=\"header.property\"\n\t\t\t\t\t\t\t\t[class.sticky-start]=\"header.sticky === 'start'\"\n\t\t\t\t\t\t\t\t[class.sticky-end]=\"header.sticky === 'end'\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (header.filter && header.filter.mode !== 'menu' && filtersFG.get(formControlName)) {\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"getFilterTemplate(header) || defaultFilterTpt\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\t\t\theader: header,\n\t\t\t\t\t\t\t\t\t\t\tformControl: filtersFG.get(formControlName)\n\t\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</tr>\n\t\t\t}\n\t\t</thead>\n\t\t<tbody class=\"hub-table__body\">\n\t\t\t@if (loading()) {\n\t\t\t\t<tr class=\"hub-table__body-row\">\n\t\t\t\t\t<td class=\"hub-table__cell\" [attr.colspan]=\"fullColspan\">\n\t\t\t\t\t\t<hub-state-outlet\n\t\t\t\t\t\t\t[template]=\"loadingTpt()\"\n\t\t\t\t\t\t\t[instanceDefault]=\"loadingComponent()\"\n\t\t\t\t\t\t\t[globalDefault]=\"defaults.loading()\"\n\t\t\t\t\t\t\t[fallback]=\"defaultLoadingTpt\"\n\t\t\t\t\t\t\t[context]=\"{ colspan: fullColspan }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t} @else if (error()) {\n\t\t\t\t<tr class=\"hub-table__body-row\">\n\t\t\t\t\t<td class=\"hub-table__cell\" [attr.colspan]=\"fullColspan\">\n\t\t\t\t\t\t<hub-state-outlet\n\t\t\t\t\t\t\t[template]=\"errorTpt()\"\n\t\t\t\t\t\t\t[instanceDefault]=\"errorComponent()\"\n\t\t\t\t\t\t\t[globalDefault]=\"defaults.error()\"\n\t\t\t\t\t\t\t[fallback]=\"defaultErrorTpt\"\n\t\t\t\t\t\t\t[context]=\"{ error: error(), colspan: fullColspan }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t} @else if (displayedRows().length) {\n\t\t\t\t@for (item of displayedRows(); track $index) {\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"templateRow() || defaultRowTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item }\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-container>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t<tr>\n\t\t\t\t\t<td [attr.colspan]=\"fullColspan\">\n\t\t\t\t\t\t<hub-state-outlet\n\t\t\t\t\t\t\t[template]=\"noResultsTpt()\"\n\t\t\t\t\t\t\t[instanceDefault]=\"noResultsComponent()\"\n\t\t\t\t\t\t\t[globalDefault]=\"defaults.noResults()\"\n\t\t\t\t\t\t\t[fallback]=\"defaultNoResultsTpt\"\n\t\t\t\t\t\t\t[context]=\"{ colspan: fullColspan, filters: filters() ?? undefined }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t}\n\t\t</tbody>\n\t</table>\n</div>\n\n<!-- Pagination -->\n@if (page() !== undefined && page() !== null) {\n\t<div class=\"hub-table__bottom-bar\">\n\t\t@if (paginationPosition() == 'bottom' || paginationPosition() === 'both') {\n\t\t\t<hub-paginator\n\t\t\t\tclass=\"hub-table__paginator hub-table__bottom-bar-paginator\"\n\t\t\t\t[(page)]=\"$any(page)\"\n\t\t\t\t[numberOfPages]=\"numberOfPages()\"\n\t\t\t\t[rtl]=\"isRtl()\"\n\t\t\t>\n\t\t\t</hub-paginator>\n\t\t}\n\t\t<div class=\"hub-table__bottom-bar-settings hub-paginator__settings\">\n\t\t\t<label class=\"hub-paginator__label\"> {{ 'ROWS_PER_PAGE' | translate | ucfirst }}: </label>\n\t\t\t@if (formControlsAdapter) {\n\t\t\t\t<ng-container\n\t\t\t\t\thubPaginableControl=\"select\"\n\t\t\t\t\t[value]=\"perPage()\"\n\t\t\t\t\t[options]=\"perPageControlOptions()\"\n\t\t\t\t\t[ariaLabel]=\"'ROWS_PER_PAGE' | translate | ucfirst\"\n\t\t\t\t\tcssClass=\"hub-paginator__select\"\n\t\t\t\t\t(valueChange)=\"perPage.set($any($event))\"\n\t\t\t\t></ng-container>\n\t\t\t} @else {\n\t\t\t\t<select\n\t\t\t\t\tclass=\"hub-paginator__select\"\n\t\t\t\t\t[ngModel]=\"perPage()\"\n\t\t\t\t\t(ngModelChange)=\"perPage.set($event)\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t>\n\t\t\t\t\t@for (option of perPageOptions(); track option) {\n\t\t\t\t\t\t<option [ngValue]=\"option\" class=\"hub-paginator__select-option\">\n\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t}\n\t\t\t\t</select>\n\t\t\t}\n\t\t</div>\n\t\t@if (clientMode() || (totalItems() !== null && totalItems() !== undefined)) {\n\t\t\t<p class=\"hub-table__bottom-bar-info hub-paginator__info\">\n\t\t\t\t{{\n\t\t\t\t\t'SHOWING_X_OF_Y_ROWS'\n\t\t\t\t\t\t| translate\n\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\tamount: displayedRows().length,\n\t\t\t\t\t\t\t\t\ttotal: clientMode() ? clientFilteredRows().length : totalItems()\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t| ucfirst\n\t\t\t\t}}\n\t\t\t</p>\n\t\t}\n\t</div>\n}\n<ng-template #defaultRowTemplate let-item>\n\t<tr\n\t\tclass=\"hub-table__body-row\"\n\t\t(click)=\"onItemClick($event, item)\"\n\t\t[class.hub-table__body-row--selected]=\"selectable() && item.selected\"\n\t\t[class.hub-table__body-row--clickable]=\"clickFn()\"\n\t\t[ngClass]=\"_getRowClass(item)\"\n\t>\n\t\t@if (selectable() || batchActions.length) {\n\t\t\t<td class=\"hub-table__cell hub-table__cell--select sticky-start\" data-col=\"__hub_select\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t[(ngModel)]=\"item.selected\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t(click)=\"$event.stopPropagation(); toggle(item)\"\n\t\t\t\t/>\n\t\t\t</td>\n\t\t}\n\t\t@for (header of fixedHeaders(); track $index) {\n\t\t\t@if (!(isColumnHidden(header) | async)) {\n\t\t\t\t<td\n\t\t\t\t\tclass=\"hub-table__cell\"\n\t\t\t\t\t[attr.data-col]=\"header.property\"\n\t\t\t\t\t[class.sticky-start]=\"header.sticky === 'start'\"\n\t\t\t\t\t[class.sticky-end]=\"header.sticky === 'end'\"\n\t\t\t\t\t[class.text-start]=\"header.align === 'start'\"\n\t\t\t\t\t[class.text-end]=\"header.align === 'end'\"\n\t\t\t\t\t[class.text-center]=\"header.align === 'center'\"\n\t\t\t\t\t[style.width]=\"header.buttons?.length ? '0' : 'auto'\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getCellTemplate(header) || defaultCellTpt\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\theader: header,\n\t\t\t\t\t\t\titem: item.data,\n\t\t\t\t\t\t\trow: item,\n\t\t\t\t\t\t\tproperty: item.data | get: header.property\n\t\t\t\t\t\t}\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</td>\n\t\t\t}\n\t\t}\n\t\t@if (templateExpandingRows().length) {\n\t\t\t<td class=\"hub-table__cell hub-table__cell--expander sticky-end\" data-col=\"__hub_expander\" [class.sticky-end]=\"stickyActions()\">\n\t\t\t\t@if (templateExpandingRows().length) {\n\t\t\t\t\t<button (click)=\"toggleExpandedRow(item)\" type=\"button\" class=\"hub-table__expander-btn btn btn-link px-2\">\n\t\t\t\t\t\t<i\n\t\t\t\t\t\t\tclass=\"hub-table__expander-icon hub-table__icon\"\n\t\t\t\t\t\t\t[class.hub-table__icon--caret-up]=\"!item.collapsed\"\n\t\t\t\t\t\t\t[class.hub-table__icon--caret-down]=\"item.collapsed\"\n\t\t\t\t\t\t></i>\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</td>\n\t\t}\n\t\t<!-- <td *ngIf=\"!lastColumnOnlyHasButtons && filterHeaders?.length\"></td> -->\n\t</tr>\n\t@if (!item.collapsed) {\n\t\t@for (template of templateExpandingRows(); track template) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"template.templateRef\" [ngTemplateOutletContext]=\"{ item: item, colspan: fullColspan }\"> </ng-container>\n\t\t}\n\t}\n</ng-template>\n\n<ng-template #defaultNoResultsTpt>\n\t<div class=\"hub-table__no-data alert alert-info d-flex align-items-center m-4\" role=\"alert\">\n\t\t<i class=\"hub-table__no-data-icon hub-table__icon hub-table__icon--info hub-table__icon--2x\" aria-hidden=\"true\"></i>\n\t\t{{ 'NO_RESULTS_FOUND' | translate | ucfirst }}\n\t</div>\n</ng-template>\n\n<ng-template #defaultLoadingTpt>\n\t<div class=\"hub-table__loading\">\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\txmlns:xlink=\"http://www.w3.org/1999/xlink\"\n\t\t\tstyle=\"margin: auto; background: #fff; display: block\"\n\t\t\twidth=\"200px\"\n\t\t\theight=\"200px\"\n\t\t\tviewBox=\"0 0 100 100\"\n\t\t\tpreserveAspectRatio=\"xMidYMid\"\n\t\t>\n\t\t\t<circle cx=\"50\" cy=\"50\" r=\"0\" fill=\"none\" stroke=\"#cccccc\" stroke-width=\"1\">\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"r\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"0;40\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0 0.2 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"0s\"\n\t\t\t\t></animate>\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"opacity\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"1;0\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0.2 0 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"0s\"\n\t\t\t\t></animate>\n\t\t\t</circle>\n\t\t\t<circle cx=\"50\" cy=\"50\" r=\"0\" fill=\"none\" stroke=\"#333333\" stroke-width=\"1\">\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"r\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"0;40\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0 0.2 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"-0.8333333333333334s\"\n\t\t\t\t></animate>\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"opacity\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"1;0\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0.2 0 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"-0.8333333333333334s\"\n\t\t\t\t></animate>\n\t\t\t</circle>\n\t\t</svg>\n\t</div>\n</ng-template>\n\n<ng-template #defaultErrorTpt>\n\t<div class=\"hub-table__error m-4 p-4 text-center text-danger\">\n\t\t<svg\n\t\t\taria-hidden=\"true\"\n\t\t\tfocusable=\"false\"\n\t\t\tdata-prefix=\"fal\"\n\t\t\tdata-icon=\"sad-tear\"\n\t\t\trole=\"img\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox=\"0 0 496 512\"\n\t\t\tstyle=\"height: 64px\"\n\t\t>\n\t\t\t<path\n\t\t\t\tfill=\"#dc3545\"\n\t\t\t\td=\"M168 240c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zM248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-152c-11.2 0-22 1.7-32.7 4.1-7.2-12.6-16.1-26.5-28.1-42.4-9-12.1-29.4-12-38.4 0-29.7 39.6-44.8 69-44.8 87.3 0 34.7 28.7 63 64 63s64-28.3 64-63c0-4.4-1-9.5-2.7-15.1 6.1-1.2 12.3-1.9 18.7-1.9 34.9 0 67.8 15.4 90.2 42.2 5.3 6.4 15.4 8 22.5 2 6.8-5.7 7.7-15.8 2-22.5C334.2 339.6 292.4 320 248 320zm-80 80c-17.7 0-32-13.9-32-31 0-7.7 10-28.8 32-59.5 22 30.7 32 51.8 32 59.5 0 17.1-14.3 31-32 31z\"\n\t\t\t\tclass=\"\"\n\t\t\t></path>\n\t\t</svg>\n\t\t<p>{{ 'ERROR_OCURRED' | translate }}</p>\n\t</div>\n</ng-template>\n\n<ng-template #defaultHeaderTpt let-header=\"header\" let-property=\"property\">\n\t@if (header.icon) {\n\t\t<i class=\"hub-table__header-icon {{ header.icon }}\" aria-hidden=\"true\"></i>\n\t}\n\t<div\n\t\tclass=\"hub-table__header-title\"\n\t\t[class.me-auto]=\"header.align === 'start'\"\n\t\t[class.ms-auto]=\"header.align === 'end'\"\n\t\t[class.mx-auto]=\"header.align === 'center'\"\n\t>\n\t\t@if (header.title) {\n\t\t\t<span class=\"hub-table__header-title-text text-wrap\">{{ header.title ?? header.property | unwrapAsync }}</span>\n\t\t}\n\t</div>\n</ng-template>\n\n<ng-template #defaultFilterTpt let-header=\"header\" let-formControl=\"formControl\">\n\t@switch (header.filter.type) {\n\t\t@case ('dropdown') {\n\t\t\t<select [formControl]=\"formControl\" class=\"form-select form-control\">\n\t\t\t\t@if (header.filter.placeholder) {\n\t\t\t\t\t<option [ngValue]=\"null\">\n\t\t\t\t\t\t{{ header.filter.placeholder }}\n\t\t\t\t\t</option>\n\t\t\t\t}\n\t\t\t\t@if (header.filter.options | isObservable) {\n\t\t\t\t\t@let options = header.filter.options | async;\n\t\t\t\t\t@for (option of $any(options); track option) {\n\t\t\t\t\t\t<option [value]=\"option[header.filter.bindValue || 'id']\">\n\t\t\t\t\t\t\t{{ option[header.filter.bindLabel || 'name'] }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t@for (option of header.filter.options; track option) {\n\t\t\t\t\t\t<option [value]=\"option[header.filter.bindValue || 'id']\">\n\t\t\t\t\t\t\t{{ option[header.filter.bindLabel || 'name'] }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</select>\n\t\t}\n\t\t@case ('number-range') {\n\t\t\t<hub-table-range-input type=\"number\" [formControl]=\"formControl\"> </hub-table-range-input>\n\t\t}\n\t\t@case ('date-range') {\n\t\t\t<hub-table-range-input type=\"date\" [formControl]=\"formControl\"> </hub-table-range-input>\n\t\t}\n\t\t@case ('boolean') {\n\t\t\t<select [formControl]=\"formControl\" class=\"form-select form-control\">\n\t\t\t\t<option [ngValue]=\"null\">\n\t\t\t\t\t{{ header.filter.placeholder ?? 'SELECT_ONE' | translate | ucfirst }}\n\t\t\t\t</option>\n\t\t\t\t<option [ngValue]=\"true\">\n\t\t\t\t\t{{ header.filter.trueLabel ?? ('TRUE' | translate | ucfirst) }}\n\t\t\t\t</option>\n\t\t\t\t<option [ngValue]=\"false\">\n\t\t\t\t\t{{ header.filter.falseLabel ?? ('FALSE' | translate | ucfirst) }}\n\t\t\t\t</option>\n\t\t\t</select>\n\t\t}\n\t\t@default {\n\t\t\t<input\n\t\t\t\t[type]=\"header.filter.type\"\n\t\t\t\t[formControl]=\"formControl\"\n\t\t\t\tclass=\"form-control\"\n\t\t\t\t[placeholder]=\"header.filter.placeholder || ''\"\n\t\t\t/>\n\t\t}\n\t}\n</ng-template>\n\n<ng-template #defaultCellTpt let-property=\"property\" let-item=\"item\" let-row=\"row\" let-header=\"header\">\n\t@if (header.buttons) {\n\t\t<div class=\"hub-table__cell-buttons d-flex flex-nowrap gap-2 justify-content-end align-items-center\">\n\t\t\t@for (button of header.buttons; track button) {\n\t\t\t\t@if (button.buttons) {\n\t\t\t\t\t<hub-table-dropdown [options]=\"button\" [row]=\"row\" class=\"hub-table__cell-dropdown d-inline-block\">\n\t\t\t\t\t</hub-table-dropdown>\n\t\t\t\t} @else {\n\t\t\t\t\t@if (!(isHidden(button, row) | async)) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-table__cell-btn\"\n\t\t\t\t\t\t\t[attr.title]=\"button.tooltip | unwrapAsync\"\n\t\t\t\t\t\t\t(click)=\"handleAction($event, button, row)\"\n\t\t\t\t\t\t\t[ngClass]=\"getRowActionClassList(button)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div class=\"hub-table__cell-btn-content d-flex flex-nowrap align-items-center gap-1\">\n\t\t\t\t\t\t\t\t<ng-hub-ui-icon [config]=\"button.icon\"></ng-hub-ui-icon>\n\t\t\t\t\t\t\t\t@if (button.label) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-table__cell-btn-label\">{{ button.label | unwrapAsync }}</span>\n\t\t\t\t\t\t\t\t} @else if (button.title) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-table__cell-btn-label\">{{ button.title | unwrapAsync }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t} @else {\n\t\t<span class=\"hub-table__cell-value\">{{ property }}</span>\n\t}\n</ng-template>\n", styles: [":root,:host{--hub-table-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-table-border-radius: var(--hub-ref-radius-md, .375rem);--hub-table-border-width: var(--hub-ref-border-width, 1px);--hub-table-row-divider-color: var(--hub-table-border-color);--hub-table-container-max-block-size: none;--hub-table-container-overflow: auto;--hub-table-head-sticky-top: 0;--hub-table-container-gap: var(--hub-ref-space-3, 1rem);--hub-table-top-bar-gap: var(--hub-ref-space-3, 1rem);--hub-table-top-bar-justify-content: end;--hub-table-top-bar-align-items: center;--hub-table-top-bar-wrap: wrap;--hub-table-batch-actions-gap: var(--hub-ref-space-2, .5rem);--hub-table-batch-actions-margin-inline-end: auto;--hub-table-bottom-bar-gap: var(--hub-ref-space-3, 1rem);--hub-table-bottom-bar-justify-content: space-around;--hub-table-bottom-bar-align-items: center;--hub-table-bottom-bar-wrap: wrap;--hub-table-bottom-bar-paginator-order: 1;--hub-table-bottom-bar-settings-order: 2;--hub-table-bottom-bar-info-order: 3;--hub-table-bottom-bar-paginator-flex: 0 0 auto;--hub-table-bottom-bar-settings-flex: 0 0 auto;--hub-table-bottom-bar-info-flex: 0 0 auto;--hub-table-icon-color: currentColor;--hub-table-icon-size: 1em;--hub-table-icon-sort: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l128 128c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l128-128zm0 429.3l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128c-12.5 12.5-32.8 12.5-45.3 0z'/%3E%3C/svg%3E\");--hub-table-icon-sort-up: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3C/svg%3E\");--hub-table-icon-sort-down: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H32c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E\");--hub-table-icon-caret-up: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3C/svg%3E\");--hub-table-icon-caret-down: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H32c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E\");--hub-table-icon-search: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E\");--hub-table-icon-filter: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z'/%3E%3C/svg%3E\");--hub-table-icon-eraser: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M290.7 57.4L57.4 290.7c-25 25-25 65.5 0 90.5l80 80c12 12 28.3 18.7 45.3 18.7H288h9.4H512c17.7 0 32-14.3 32-32s-14.3-32-32-32H387.9L518.6 285.3c25-25 25-65.5 0-90.5L381.3 57.4c-25-25-65.5-25-90.5 0zM297.4 416H288l-105.4 0-80-80L227.3 211.3 364.7 348.7 297.4 416z'/%3E%3C/svg%3E\");--hub-table-icon-info: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-up: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-down: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5 12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-left: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-right: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 105.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E\");--hub-table-icon-angle-left: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E\");--hub-table-icon-angle-right: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E\");--hub-table-icon-angle-double-left: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z'/%3E%3C/svg%3E\");--hub-table-icon-angle-double-right: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0z'/%3E%3C/svg%3E\");--hub-table-icon-ellipsis-v: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 512'%3E%3Cpath d='M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z'/%3E%3C/svg%3E\");--hub-table-icon-trash: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z'/%3E%3C/svg%3E\");--hub-table-icon-plus: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E\");--hub-table-accent-bg: transparent;--hub-table-active-bg: var(--hub-sys-state-active-bg, rgba(0, 0, 0, .1));--hub-table-active-color: var(--hub-sys-text-primary, #212529);--hub-table-accent: var(--hub-sys-color-primary, #0d6efd);--hub-table-accent-emphasis: color-mix(in oklch, var(--hub-table-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-table-accent-subtle: color-mix(in oklch, var(--hub-table-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-table-accent-on: oklch(from var(--hub-table-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-table-selected-bg: var(--hub-table-accent-subtle);--hub-table-selected-color: var(--hub-sys-text-primary, #212529);--hub-table-selected-bar-width: 0;--hub-table-selected-bar-color: var(--hub-table-accent);--hub-table-head-bg: var(--hub-table-bg, var(--hub-ref-color-white, #fff));--hub-table-head-color: var(--hub-table-color, var(--hub-sys-text-primary, #212529));--hub-table-head-font-size: inherit;--hub-table-head-font-weight: bold;--hub-table-head-padding-x: var(--hub-table-cell-padding-x);--hub-table-head-padding-y: var(--hub-table-cell-padding-y);--hub-table-head-position: sticky;--hub-table-bg-state: initial;--hub-table-bg-type: initial;--hub-table-cell-padding-x: var(--hub-ref-space-3, 1rem);--hub-table-cell-padding-x-sm: var(--hub-ref-space-2, .5rem);--hub-table-cell-padding-y: var(--hub-ref-space-2, .5rem);--hub-table-cell-padding-y-sm: var(--hub-ref-space-1, .25rem);--hub-table-cell-vertical-align: middle;--hub-table-color-state: initial;--hub-table-color-type: initial;--hub-table-group-separator-color: var(--hub-sys-border-color-default, #dee2e6);--hub-table-search-button-bg: var(--hub-table-container-bg, var(--hub-ref-color-white, #fff));--hub-table-search-button-border-color: var(--hub-table-border-color);--hub-table-search-button-color: var(--hub-table-container-color, var(--hub-sys-text-primary, #212529));--hub-table-search-button-min-width: 2.75rem;--hub-table-search-input-bg: var(--hub-table-container-bg, var(--hub-ref-color-white, #fff));--hub-table-search-input-border-color: var(--hub-table-border-color);--hub-table-search-input-color: var(--hub-table-container-color, var(--hub-sys-text-primary, #212529));--hub-table-search-border-width: var(--hub-table-border-width);--hub-table-search-border-radius: var(--hub-table-border-radius);--hub-table-search-input-padding-x: .75rem;--hub-table-search-input-padding-y: .375rem;--hub-table-search-input-font-size: 1rem;--hub-table-filter-button-active-bg: color-mix(in oklch, var(--hub-sys-color-success, #198754) 10%, transparent);--hub-table-filter-button-active-border-color: var(--hub-sys-color-success, #198754);--hub-table-filter-button-hover-bg: rgba(0, 0, 0, .05);--hub-table-filter-button-icon-active-color: var(--hub-sys-color-success, #198754);--hub-table-filter-button-icon-color: var(--hub-sys-text-muted, #6c757d);--hub-table-filter-button-gap: var(--hub-ref-space-2, .5rem);--hub-table-filter-button-padding-x: .75rem;--hub-table-filter-button-padding-y: .375rem;--hub-table-filter-button-border-width: 1px;--hub-table-filter-button-border-color: transparent;--hub-table-filter-button-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-table-filter-button-transition: all .2s ease;--hub-table-filter-count-bg: var(--hub-sys-color-success, #198754);--hub-table-filter-count-color: var(--hub-ref-color-white, #fff);--hub-table-filter-count-size: 1.25rem;--hub-table-filter-count-padding-x: .4em;--hub-table-filter-count-font-size: .7rem;--hub-table-filter-count-font-weight: var(--hub-ref-font-weight-bold, 700);--hub-table-filter-count-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-table-batch-actions-btn-icon-gap: var(--hub-ref-space-1, .25rem);--hub-table-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-table-hover-color: var(--hub-sys-text-primary, #212529);--hub-table-striped-bg: var(--hub-sys-state-striped-bg, rgba(0, 0, 0, .05));--hub-table-striped-color: var(--hub-sys-text-primary, #212529)}:host{display:flex;flex-direction:column;gap:var(--hub-table-container-gap);min-width:0;color:var(--hub-table-container-color, var(--hub-sys-text-primary, #212529))}:host .hub-table__top-bar{display:flex;justify-content:var(--hub-table-top-bar-justify-content);align-items:var(--hub-table-top-bar-align-items);flex-wrap:var(--hub-table-top-bar-wrap);gap:var(--hub-table-top-bar-gap)}:host .hub-table__batch-actions{display:flex;align-items:center;gap:var(--hub-table-batch-actions-gap);margin-inline-end:var(--hub-table-batch-actions-margin-inline-end)}:host .hub-table__batch-actions-btn-icon{margin-right:var(--hub-table-batch-actions-btn-icon-gap)}:host .hub-table__batch-actions-btn--default,:host .hub-table__cell-btn--default{border:var(--hub-table-border-width) solid var(--hub-table-border-color);border-radius:var(--hub-table-border-radius)}:host .hub-table__search{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:end}:host .hub-table__search-input{position:relative;flex:1 1 auto;width:1%;min-width:0;display:block;width:100%;padding:var(--hub-table-search-input-padding-y) var(--hub-table-search-input-padding-x);font-size:var(--hub-table-search-input-font-size);font-weight:var(--hub-ref-font-weight-base, 400);line-height:var(--hub-ref-line-height-base, 1.5);color:var(--hub-table-search-input-color);appearance:none;background-color:var(--hub-table-search-input-bg);background-clip:padding-box;border:var(--hub-table-search-border-width) solid var(--hub-table-search-input-border-color);border-radius:var(--hub-table-search-border-radius) 0 0 var(--hub-table-search-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}:host .hub-table__search-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hub-table-search-button-min-width);color:var(--hub-table-search-button-color);background-color:var(--hub-table-search-button-bg);border-color:var(--hub-table-search-button-border-color);border-radius:0 var(--hub-table-search-border-radius) var(--hub-table-search-border-radius) 0}:host .hub-table__bottom-bar{display:flex;justify-content:var(--hub-table-bottom-bar-justify-content);align-items:var(--hub-table-bottom-bar-align-items);flex-wrap:var(--hub-table-bottom-bar-wrap);gap:var(--hub-table-bottom-bar-gap)}:host .hub-table__bottom-bar-paginator{order:var(--hub-table-bottom-bar-paginator-order);flex:var(--hub-table-bottom-bar-paginator-flex)}:host .hub-table__bottom-bar-settings{order:var(--hub-table-bottom-bar-settings-order);flex:var(--hub-table-bottom-bar-settings-flex);margin:0}:host .hub-table__bottom-bar-info{order:var(--hub-table-bottom-bar-info-order);flex:var(--hub-table-bottom-bar-info-flex);margin:0}:host .hub-table__paginator{overflow:auto;margin:0}:host .hub-table__filter-button{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--hub-table-filter-button-gap);padding:var(--hub-table-filter-button-padding-y) var(--hub-table-filter-button-padding-x);cursor:pointer;border:var(--hub-table-filter-button-border-width) solid var(--hub-table-filter-button-border-color);border-radius:var(--hub-table-filter-button-border-radius);transition:var(--hub-table-filter-button-transition)}:host .hub-table__filter-button:hover{background-color:var(--hub-table-filter-button-hover-bg)}:host .hub-table__filter-button--active{background-color:var(--hub-table-filter-button-active-bg);border-color:var(--hub-table-filter-button-active-border-color)}:host .hub-table__filter-button--active .hub-table__filter-button-icon{color:var(--hub-table-filter-button-icon-active-color)}:host .hub-table__filter-button-icon{transition:color .2s ease;color:var(--hub-table-filter-button-icon-color)}:host .hub-table__filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hub-table-filter-count-size);height:var(--hub-table-filter-count-size);padding:0 var(--hub-table-filter-count-padding-x);font-size:var(--hub-table-filter-count-font-size);font-weight:var(--hub-table-filter-count-font-weight);line-height:1;color:var(--hub-table-filter-count-color);text-align:center;white-space:nowrap;background-color:var(--hub-table-filter-count-bg);border-radius:var(--hub-table-filter-count-border-radius);animation:badge-appear .2s ease}:host .hub-table__no-data-icon{margin-right:var(--hub-ref-space-4, 1.5rem)}:host .hub-table__header-icon{margin-right:var(--hub-ref-space-2, .5rem)}:host .hub-table__icon{display:inline-block;width:var(--hub-table-icon-size);height:var(--hub-table-icon-size);background-color:var(--hub-table-icon-color);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;vertical-align:middle}:host .hub-table__icon--xs{--hub-table-icon-size: .75em}:host .hub-table__icon--sm{--hub-table-icon-size: .875em}:host .hub-table__icon--lg{--hub-table-icon-size: 1.33em}:host .hub-table__icon--2x{--hub-table-icon-size: 2em}:host .hub-table__icon--3x{--hub-table-icon-size: 3em}:host .hub-table__icon--4x{--hub-table-icon-size: 4em}:host .hub-table__icon--5x{--hub-table-icon-size: 5em}:host .hub-table__icon--search{-webkit-mask-image:var(--hub-table-icon-search);mask-image:var(--hub-table-icon-search)}:host .hub-table__icon--filter{-webkit-mask-image:var(--hub-table-icon-filter);mask-image:var(--hub-table-icon-filter)}:host .hub-table__icon--eraser{-webkit-mask-image:var(--hub-table-icon-eraser);mask-image:var(--hub-table-icon-eraser)}:host .hub-table__icon--info{-webkit-mask-image:var(--hub-table-icon-info);mask-image:var(--hub-table-icon-info);margin-right:var(--hub-ref-space-4, 1.5rem)}:host .hub-table__icon--sort{-webkit-mask-image:var(--hub-table-icon-sort);mask-image:var(--hub-table-icon-sort)}:host .hub-table__icon--sort-up{-webkit-mask-image:var(--hub-table-icon-sort-up);mask-image:var(--hub-table-icon-sort-up)}:host .hub-table__icon--sort-down{-webkit-mask-image:var(--hub-table-icon-sort-down);mask-image:var(--hub-table-icon-sort-down)}:host .hub-table__icon--caret-up{-webkit-mask-image:var(--hub-table-icon-caret-up);mask-image:var(--hub-table-icon-caret-up)}:host .hub-table__icon--caret-down{-webkit-mask-image:var(--hub-table-icon-caret-down);mask-image:var(--hub-table-icon-caret-down)}:host .hub-table__icon--chevron-up{-webkit-mask-image:var(--hub-table-icon-chevron-up);mask-image:var(--hub-table-icon-chevron-up)}:host .hub-table__icon--chevron-down{-webkit-mask-image:var(--hub-table-icon-chevron-down);mask-image:var(--hub-table-icon-chevron-down)}:host .hub-table__icon--chevron-left{-webkit-mask-image:var(--hub-table-icon-chevron-left);mask-image:var(--hub-table-icon-chevron-left)}:host .hub-table__icon--chevron-right{-webkit-mask-image:var(--hub-table-icon-chevron-right);mask-image:var(--hub-table-icon-chevron-right)}:host .hub-table__icon--angle-left{-webkit-mask-image:var(--hub-table-icon-angle-left);mask-image:var(--hub-table-icon-angle-left)}:host .hub-table__icon--angle-right{-webkit-mask-image:var(--hub-table-icon-angle-right);mask-image:var(--hub-table-icon-angle-right)}:host .hub-table__icon--angle-double-left{-webkit-mask-image:var(--hub-table-icon-angle-double-left);mask-image:var(--hub-table-icon-angle-double-left)}:host .hub-table__icon--angle-double-right{-webkit-mask-image:var(--hub-table-icon-angle-double-right);mask-image:var(--hub-table-icon-angle-double-right)}:host .hub-table__icon--ellipsis-v{-webkit-mask-image:var(--hub-table-icon-ellipsis-v);mask-image:var(--hub-table-icon-ellipsis-v)}:host .hub-table__icon--trash{-webkit-mask-image:var(--hub-table-icon-trash);mask-image:var(--hub-table-icon-trash);margin-right:var(--hub-ref-space-2, .5rem)}:host .hub-table__icon--plus{-webkit-mask-image:var(--hub-table-icon-plus);mask-image:var(--hub-table-icon-plus);margin-right:var(--hub-ref-space-2, .5rem)}:host .hub-table__container{overflow:var(--hub-table-container-overflow, auto);max-block-size:var(--hub-table-container-max-block-size);background-color:var(--hub-table-container-bg, var(--hub-ref-color-white, #fff));border:var(--hub-table-border-width) solid var(--hub-table-border-color);border-radius:var(--hub-table-border-radius);color:var(--hub-table-container-color, var(--hub-sys-text-primary, #212529))}:host .hub-table__element{position:relative;width:100%;border-collapse:collapse;border-spacing:0;vertical-align:var(--hub-table-cell-vertical-align);border-color:var(--hub-table-border-color);background-color:var(--hub-table-bg, var(--hub-ref-color-white, #fff));color:var(--hub-table-color, var(--hub-sys-text-primary, #212529))}:host .hub-table__element .sticky-start{background-color:var(--hub-table-bg, var(--hub-ref-color-white, #fff));left:0;position:sticky;z-index:9}:host .hub-table__element .sticky-end{background-color:var(--hub-table-bg, var(--hub-ref-color-white, #fff));right:0;position:sticky;z-index:9}:host .hub-table__element .clickable-item{cursor:pointer}:host .hub-table__element>:not(caption)>*>*{padding:var(--hub-table-cell-padding-y) var(--hub-table-cell-padding-x);vertical-align:var(--hub-table-cell-vertical-align);color:var(--hub-table-color-state, var(--hub-table-color-type, var(--hub-table-color, var(--hub-sys-text-primary, #212529))));background-color:var(--hub-table-bg, var(--hub-ref-color-white, #fff));border-bottom-style:solid;border-bottom-color:var(--hub-table-row-divider-color);border-bottom-width:var(--hub-table-border-width);box-shadow:inset var(--hub-table-cell-bar-width, 0) 0 0 0 var(--hub-table-cell-bar-color, transparent),inset 0 0 0 9999px var(--hub-table-bg-state, var(--hub-table-bg-type, var(--hub-table-accent-bg)))}:host .hub-table__element>tbody{vertical-align:inherit}:host .hub-table__element>thead{vertical-align:bottom}:host .hub-table__element>thead>tr>*{background-color:var(--hub-table-head-bg);color:var(--hub-table-head-color)}:host .hub-table__element>thead .hub-table__header-cell{padding:var(--hub-table-head-padding-y) var(--hub-table-head-padding-x)}:host .hub-table__element>thead .hub-table__header-title-text{font-size:var(--hub-table-head-font-size);font-weight:var(--hub-table-head-font-weight)}:host .hub-table__scrollable thead{position:sticky;top:var(--hub-table-head-sticky-top);z-index:10}:host.hub-table--sticky-header{--hub-table-container-overflow: visible}:host.hub-table--sticky-header .hub-table__element>thead{position:var(--hub-table-head-position, sticky);top:var(--hub-table-head-sticky-top, 0);z-index:10}:host .hub-table__group-divider{border-top:calc(var(--hub-table-border-width) * 2) solid var(--hub-table-group-separator-color)}:host .hub-table__sm>:not(caption)>*>*{padding:var(--hub-table-cell-padding-y-sm) var(--hub-table-cell-padding-x-sm)}:host .hub-table__bordered>:not(caption)>*{border-style:solid;border-width:var(--hub-table-border-width) 0}:host .hub-table__bordered>:not(caption)>*>*{border-style:solid;border-width:0 var(--hub-table-border-width)}:host .hub-table__borderless>:not(caption)>*>*{border-bottom-width:0}:host .hub-table__borderless>:not(:first-child){border-top-width:0}:host .hub-table__striped-odd>tbody>tr:nth-of-type(odd)>*{color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__striped-even>tbody>tr:nth-of-type(2n)>*{color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__striped-columns-odd>:not(caption)>tr>:nth-child(odd){color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__striped-columns-even>:not(caption)>tr>:nth-child(2n){color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__active{--hub-table-color-state: var(--hub-table-active-color);--hub-table-bg-state: var(--hub-table-active-bg)}:host .hub-table__hover>tbody>tr:hover>*{--hub-table-color-state: var(--hub-table-hover-color);--hub-table-bg-state: var(--hub-table-hover-bg)}:host .hub-table__body-row--selected>*,:host .hub-table__row--selected>*,:host .hub-table__hover>tbody>tr.hub-table__body-row--selected:hover>*,:host .hub-table__hover>tbody>tr.hub-table__row--selected:hover>*{--hub-table-color-state: var(--hub-table-selected-color);--hub-table-bg-state: var(--hub-table-selected-bg)}:host .hub-table__body-row--selected>*:first-child,:host .hub-table__row--selected>*:first-child{--hub-table-cell-bar-width: var(--hub-table-selected-bar-width);--hub-table-cell-bar-color: var(--hub-table-selected-bar-color, var(--hub-table-accent))}:host .hub-table__selectable>tbody>tr.hub-table__body-row{cursor:pointer}:host .hub-table__responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.hub-table__primary{--hub-table-accent: var(--hub-sys-color-primary)}.hub-table__secondary{--hub-table-accent: var(--hub-sys-color-secondary)}.hub-table__success{--hub-table-accent: var(--hub-sys-color-success)}.hub-table__danger{--hub-table-accent: var(--hub-sys-color-danger)}.hub-table__warning{--hub-table-accent: var(--hub-sys-color-warning)}.hub-table__info{--hub-table-accent: var(--hub-sys-color-info)}.hub-table__neutral{--hub-table-accent: var(--hub-sys-color-neutral)}.hub-table__light{--hub-table-accent: var(--hub-sys-color-light)}.hub-table__dark{--hub-table-accent: var(--hub-sys-color-dark)}:host.hub-table--rtl{direction:rtl}:host.hub-table--rtl .hub-table__top-bar{direction:ltr}:host.hub-table--rtl .hub-table__batch-actions{order:2;flex-direction:row-reverse;margin-inline-end:0;margin-inline-start:auto}:host.hub-table--rtl .hub-table__batch-actions-btn-icon{margin-right:0;margin-left:var(--hub-table-batch-actions-btn-icon-gap)}:host.hub-table--rtl .hub-table__search{order:1;margin-inline-end:auto;margin-inline-start:0;direction:ltr}:host.hub-table--rtl .hub-table__search-input{direction:ltr;text-align:right;border-radius:0 var(--hub-table-search-border-radius) var(--hub-table-search-border-radius) 0}:host.hub-table--rtl .hub-table__search-button{border-radius:var(--hub-table-search-border-radius) 0 0 var(--hub-table-search-border-radius)}:host.hub-table--rtl .hub-table__no-data-icon{margin-right:0;margin-left:var(--hub-ref-space-4, 1.5rem)}:host.hub-table--rtl .hub-table__header-icon{margin-right:0;margin-left:var(--hub-ref-space-2, .5rem)}:host.hub-table--rtl .hub-table__body-row--selected>*:first-child,:host.hub-table--rtl .hub-table__row--selected>*:first-child{--hub-table-cell-bar-width: calc(-1 * var(--hub-table-selected-bar-width));--hub-table-cell-bar-color: var(--hub-table-selected-bar-color, var(--hub-table-accent))}.caption-top{caption-side:top}@media(max-width:576px){.hub-table__responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:768px){.hub-table__responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:992px){.hub-table__responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:1200px){.hub-table__responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:1400px){.hub-table__responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@keyframes badge-appear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PaginableTableDropdownComponent, selector: "hub-table-dropdown, paginable-table-dropdown", inputs: ["row", "options", "appendTo", "disabled"] }, { kind: "component", type: PaginatorComponent, selector: "hub-paginator, paginable-table-paginator", inputs: ["rtl", "page", "numberOfPages"], outputs: ["pageChange"] }, { kind: "component", type: DropdownComponent, selector: "hub-dropdown, hub-ui-dropdown", inputs: ["id"], outputs: ["open", "close"] }, { kind: "component", type: MenuFilterComponent, selector: "menu-filter", inputs: ["header"] }, { kind: "component", type: HubIconComponent, selector: "hub-icon, ng-hub-ui-icon", inputs: ["config"] }, { kind: "component", type: PaginableTableRangeInputComponent, selector: "hub-table-range-input, paginable-table-range-input", inputs: ["type"] }, { kind: "component", type: PaginableStateOutlet, selector: "hub-state-outlet", inputs: ["template", "instanceDefault", "globalDefault", "fallback", "context"] }, { kind: "directive", type: HubPaginableControlDirective, selector: "[hubPaginableControl]", inputs: ["hubPaginableControl", "value", "controlType", "placeholder", "ariaLabel", "cssClass", "options"], outputs: ["valueChange"] }, { kind: "directive", type: HubStickyColumnsDirective, selector: "[hubStickyColumns]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UcfirstPipe, name: "ucfirst" }, { kind: "pipe", type: UnwrapAsyncPipe, name: "unwrapAsync" }, { kind: "pipe", type: IsObservablePipe, name: "isObservable" }, { kind: "pipe", type: GetPipe, name: "get" }], animations: [
|
|
5441
5482
|
trigger('fadeInOut', [
|
|
5442
5483
|
transition(':enter', [style({ opacity: 0 }), animate('256ms 256ms', style({ opacity: 1, height: 'auto' }))]),
|
|
5443
5484
|
transition(':leave', [animate('256ms ease-out', style({ opacity: 0, height: '0' }))])
|
|
@@ -5481,9 +5522,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
5481
5522
|
}
|
|
5482
5523
|
], host: {
|
|
5483
5524
|
class: 'hub-table',
|
|
5484
|
-
'[class.hub-table--rtl]': 'isRtl()'
|
|
5485
|
-
}, template: "@if (batchActions().length || searchable() || headerFilters().length) {\n\t<div class=\"hub-table__top-bar\">\n\t\t@if (batchActions().length) {\n\t\t\t<div class=\"hub-table__batch-actions\">\n\t\t\t\t@for (button of batchActions(); track $index) {\n\t\t\t\t\t@if ($any(button).buttons?.length) {\n\t\t\t\t\t\t<hub-table-dropdown\n\t\t\t\t\t\t\tclass=\"hub-table__batch-actions-dropdown\"\n\t\t\t\t\t\t\t[options]=\"$any(button)\"\n\t\t\t\t\t\t\t[disabled]=\"!value.length\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t</hub-table-dropdown>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"hub-table__batch-actions-btn\"\n\t\t\t\t\t\t\t[ngClass]=\"getBatchActionClassList(button)\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t(click)=\"handleBatchAction(button)\"\n\t\t\t\t\t\t\t[disabled]=\"!value.length\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@if (button.icon) {\n\t\t\t\t\t\t\t\t<i class=\"hub-table__batch-actions-btn-icon {{ button.icon }}\"></i>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t@if (button.title) {\n\t\t\t\t\t\t\t\t<span class=\"hub-table__batch-actions-btn-title\">{{ button.title | unwrapAsync }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@if (searchable()) {\n\t\t\t<div class=\"hub-table__search\">\n\t\t\t\t@if (isRtl()) {\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"hub-table__search-button btn btn-outline-dark\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<i class=\"hub-table__search-icon hub-table__icon hub-table__icon--search\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</button>\n\t\t\t\t\t@if (formControlsAdapter) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\thubPaginableControl=\"input\"\n\t\t\t\t\t\t\tcontrolType=\"text\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[ariaLabel]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\tcssClass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(valueChange)=\"searchProxy$.next($any($event))\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t@if (formControlsAdapter) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\thubPaginableControl=\"input\"\n\t\t\t\t\t\t\tcontrolType=\"text\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[ariaLabel]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\tcssClass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(valueChange)=\"searchProxy$.next($any($event))\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"hub-table__search-button btn btn-outline-dark\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<i class=\"hub-table__search-icon hub-table__icon hub-table__icon--search\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@if (headerFilters().length) {\n\t\t\t<div class=\"hub-table__delete-filters\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-table__delete-filters-btn btn btn-outline-danger\"\n\t\t\t\t\t(click)=\"clearFilters()\"\n\t\t\t\t\t[disabled]=\"filterLoading\"\n\t\t\t\t>\n\t\t\t\t\t<i class=\"hub-table__delete-filters-icon hub-table__icon hub-table__icon--eraser\"></i>\n\t\t\t\t\t{{ 'CLEAN_FILTERS' | translate | ucfirst }}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t}\n\t</div>\n}\n\n<div class=\"hub-table__container {{ responsiveCSSClass() }}\" [class.hub-table__responsive]=\"responsiveCSSClass()\">\n\t@let striped = options().striped;\n\t<table\n\t\tclass=\"hub-table__element\"\n\t\thubStickyColumns\n\t\t[class.hub-table__hover]=\"(options().hoverableRows || selectable()) && !loading()\"\n\t\t[class.hub-table__striped-odd]=\"striped === 'rows-odd'\"\n\t\t[class.hub-table__striped-even]=\"striped === 'rows-even'\"\n\t\t[class.hub-table__striped-columns-odd]=\"striped === 'columns-odd'\"\n\t\t[class.hub-table__striped-columns-even]=\"striped === 'columns-even'\"\n\t\t[class.hub-table__selectable]=\"selectable()\"\n\t\t[class.hub-table__scrollable]=\"options().scrollable\"\n\t\t[ngClass]=\"options().variant ? 'hub-table__' + options().variant : null\"\n\t>\n\t\t<thead class=\"hub-table__head\" [formGroup]=\"filtersFG\">\n\t\t\t<tr class=\"hub-table__head-row\">\n\t\t\t\t@if (selectable()) {\n\t\t\t\t\t<th class=\"hub-table__header-cell hub-table__header-cell--actions sticky-start\" data-col=\"__hub_select\">\n\t\t\t\t\t\t@if (multipleSelectable()) {\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t[(ngModel)]=\"allRowsSelected\"\n\t\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t\t(click)=\"toggleAll()\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t</th>\n\t\t\t\t}\n\t\t\t\t@for (header of fixedHeaders(); track header.property) {\n\t\t\t\t\t@if (!(isColumnHidden(header) | async)) {\n\t\t\t\t\t\t<th\n\t\t\t\t\t\t\tclass=\"hub-table__header-cell\"\n\t\t\t\t\t\t\tresizable\n\t\t\t\t\t\t\t[attr.data-col]=\"header.property\"\n\t\t\t\t\t\t\t[class.sticky-start]=\"header.sticky === 'start'\"\n\t\t\t\t\t\t\t[class.sticky-end]=\"header.sticky === 'end'\"\n\t\t\t\t\t\t\t[class.text-start]=\"header.align === 'start'\"\n\t\t\t\t\t\t\t[class.text-end]=\"header.align === 'end'\"\n\t\t\t\t\t\t\t[class.text-center]=\"header.align === 'center'\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"hub-table__header-cell-content d-flex flex-nowrap align-items-center justify-content-between gap-2\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"getHeaderTemplate(header) || defaultHeaderTpt\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\t\theader,\n\t\t\t\t\t\t\t\t\t\tproperty: header | get: header.property\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t@if (header.sortable || header.filter?.mode === 'menu') {\n\t\t\t\t\t\t\t\t\t<div class=\"hub-table__header-cell-actions d-flex gap-2 ms-auto align-items-center\">\n\t\t\t\t\t\t\t\t\t\t<button class=\"hub-table__sort-btn btn\" (click)=\"sort(header)\">\n\t\t\t\t\t\t\t\t\t\t\t@if (header.sortable) {\n\t\t\t\t\t\t\t\t\t\t\t\t<i\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__sort-icon hub-table__icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[ngClass]=\"getOrdenationClass(header)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t@if (header.filter?.mode === 'menu') {\n\t\t\t\t\t\t\t\t\t\t\t<hub-dropdown\n\t\t\t\t\t\t\t\t\t\t\t\t#dropdown\n\t\t\t\t\t\t\t\t\t\t\t\t(open)=\"onDropdownFilterOpened($event)\"\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-dropdown\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-button button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[class.hub-table__filter-button--active]=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfiltersFG.get(header.filter.key || header.property)?.value?.rules\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.length\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<i\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-button-icon hub-table__icon hub-table__icon--filter\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t\t\t\t\t\t\t\t@if (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfiltersFG.get(header.filter.key || header.property)?.value?.rules;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tas rules\n\t\t\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (rules.length) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"hub-table__filter-count\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ rules.length }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t@if (dropdown.isOpened()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<menu-filter\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-dropdown-content content\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[header]=\"header\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[formControlName]=\"header.filter.key || header.property\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</menu-filter>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</hub-dropdown>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</th>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@if (templateExpandingRows().length) {\n\t\t\t\t\t<th class=\"hub-table__header-cell hub-table__header-cell--expander sticky-end\" data-col=\"__hub_expander\"></th>\n\t\t\t\t}\n\t\t\t</tr>\n\n\t\t\t<!-- Filtering -->\n\t\t\t@if (hasColumnFilters()) {\n\t\t\t\t<tr class=\"hub-table__filter-row\">\n\t\t\t\t\t@if (selectable() || batchActions.length) {\n\t\t\t\t\t\t<th class=\"hub-table__filter-cell sticky-start\" data-col=\"__hub_select\"></th>\n\t\t\t\t\t}\n\t\t\t\t\t@for (header of fixedHeaders(); track $index; let last = $last) {\n\t\t\t\t\t\t@if (!(isColumnHidden(header) | async)) {\n\t\t\t\t\t\t\t@let formControlName = header.filter?.key || header.property;\n\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\tclass=\"hub-table__filter-cell\"\n\t\t\t\t\t\t\t\t[attr.data-col]=\"header.property\"\n\t\t\t\t\t\t\t\t[class.sticky-start]=\"header.sticky === 'start'\"\n\t\t\t\t\t\t\t\t[class.sticky-end]=\"header.sticky === 'end'\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (header.filter && header.filter.mode !== 'menu' && filtersFG.get(formControlName)) {\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"getFilterTemplate(header) || defaultFilterTpt\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\t\t\theader: header,\n\t\t\t\t\t\t\t\t\t\t\tformControl: filtersFG.get(formControlName)\n\t\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</tr>\n\t\t\t}\n\t\t</thead>\n\t\t<tbody class=\"hub-table__body\">\n\t\t\t@if (loading()) {\n\t\t\t\t<tr class=\"hub-table__body-row\">\n\t\t\t\t\t<td class=\"hub-table__cell\" [attr.colspan]=\"fullColspan\">\n\t\t\t\t\t\t<hub-state-outlet\n\t\t\t\t\t\t\t[template]=\"loadingTpt()\"\n\t\t\t\t\t\t\t[instanceDefault]=\"loadingComponent()\"\n\t\t\t\t\t\t\t[globalDefault]=\"defaults.loading()\"\n\t\t\t\t\t\t\t[fallback]=\"defaultLoadingTpt\"\n\t\t\t\t\t\t\t[context]=\"{ colspan: fullColspan }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t} @else if (error()) {\n\t\t\t\t<tr class=\"hub-table__body-row\">\n\t\t\t\t\t<td class=\"hub-table__cell\" [attr.colspan]=\"fullColspan\">\n\t\t\t\t\t\t<hub-state-outlet\n\t\t\t\t\t\t\t[template]=\"errorTpt()\"\n\t\t\t\t\t\t\t[instanceDefault]=\"errorComponent()\"\n\t\t\t\t\t\t\t[globalDefault]=\"defaults.error()\"\n\t\t\t\t\t\t\t[fallback]=\"defaultErrorTpt\"\n\t\t\t\t\t\t\t[context]=\"{ error: error(), colspan: fullColspan }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t} @else if (displayedRows().length) {\n\t\t\t\t@for (item of displayedRows(); track $index) {\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"templateRow() || defaultRowTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item }\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-container>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t<tr>\n\t\t\t\t\t<td [attr.colspan]=\"fullColspan\">\n\t\t\t\t\t\t<hub-state-outlet\n\t\t\t\t\t\t\t[template]=\"noResultsTpt()\"\n\t\t\t\t\t\t\t[instanceDefault]=\"noResultsComponent()\"\n\t\t\t\t\t\t\t[globalDefault]=\"defaults.noResults()\"\n\t\t\t\t\t\t\t[fallback]=\"defaultNoResultsTpt\"\n\t\t\t\t\t\t\t[context]=\"{ colspan: fullColspan, filters: filters() ?? undefined }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t}\n\t\t</tbody>\n\t</table>\n</div>\n\n<!-- Pagination -->\n@if (page() !== undefined && page() !== null) {\n\t<div class=\"hub-table__bottom-bar\">\n\t\t@if (paginationPosition() == 'bottom' || paginationPosition() === 'both') {\n\t\t\t<hub-paginator\n\t\t\t\tclass=\"hub-table__paginator hub-table__bottom-bar-paginator\"\n\t\t\t\t[(page)]=\"$any(page)\"\n\t\t\t\t[numberOfPages]=\"numberOfPages()\"\n\t\t\t\t[rtl]=\"isRtl()\"\n\t\t\t>\n\t\t\t</hub-paginator>\n\t\t}\n\t\t<div class=\"hub-table__bottom-bar-settings hub-paginator__settings\">\n\t\t\t<label class=\"hub-paginator__label\"> {{ 'ROWS_PER_PAGE' | translate | ucfirst }}: </label>\n\t\t\t@if (formControlsAdapter) {\n\t\t\t\t<ng-container\n\t\t\t\t\thubPaginableControl=\"select\"\n\t\t\t\t\t[value]=\"perPage()\"\n\t\t\t\t\t[options]=\"perPageControlOptions()\"\n\t\t\t\t\t[ariaLabel]=\"'ROWS_PER_PAGE' | translate | ucfirst\"\n\t\t\t\t\tcssClass=\"hub-paginator__select\"\n\t\t\t\t\t(valueChange)=\"perPage.set($any($event))\"\n\t\t\t\t></ng-container>\n\t\t\t} @else {\n\t\t\t\t<select\n\t\t\t\t\tclass=\"hub-paginator__select\"\n\t\t\t\t\t[ngModel]=\"perPage()\"\n\t\t\t\t\t(ngModelChange)=\"perPage.set($event)\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t>\n\t\t\t\t\t@for (option of perPageOptions(); track option) {\n\t\t\t\t\t\t<option [ngValue]=\"option\" class=\"hub-paginator__select-option\">\n\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t}\n\t\t\t\t</select>\n\t\t\t}\n\t\t</div>\n\t\t@if (clientMode() || (totalItems() !== null && totalItems() !== undefined)) {\n\t\t\t<p class=\"hub-table__bottom-bar-info hub-paginator__info\">\n\t\t\t\t{{\n\t\t\t\t\t'SHOWING_X_OF_Y_ROWS'\n\t\t\t\t\t\t| translate\n\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\tamount: displayedRows().length,\n\t\t\t\t\t\t\t\t\ttotal: clientMode() ? clientFilteredRows().length : totalItems()\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t| ucfirst\n\t\t\t\t}}\n\t\t\t</p>\n\t\t}\n\t</div>\n}\n<ng-template #defaultRowTemplate let-item>\n\t<tr\n\t\tclass=\"hub-table__body-row\"\n\t\t(click)=\"onItemClick($event, item)\"\n\t\t[class.hub-table__body-row--selected]=\"selectable() && item.selected\"\n\t\t[class.hub-table__body-row--clickable]=\"clickFn()\"\n\t\t[ngClass]=\"_getRowClass(item)\"\n\t>\n\t\t@if (selectable() || batchActions.length) {\n\t\t\t<td class=\"hub-table__cell hub-table__cell--select sticky-start\" data-col=\"__hub_select\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t[(ngModel)]=\"item.selected\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t(click)=\"$event.stopPropagation(); toggle(item)\"\n\t\t\t\t/>\n\t\t\t</td>\n\t\t}\n\t\t@for (header of fixedHeaders(); track $index) {\n\t\t\t@if (!(isColumnHidden(header) | async)) {\n\t\t\t\t<td\n\t\t\t\t\tclass=\"hub-table__cell\"\n\t\t\t\t\t[attr.data-col]=\"header.property\"\n\t\t\t\t\t[class.sticky-start]=\"header.sticky === 'start'\"\n\t\t\t\t\t[class.sticky-end]=\"header.sticky === 'end'\"\n\t\t\t\t\t[class.text-start]=\"header.align === 'start'\"\n\t\t\t\t\t[class.text-end]=\"header.align === 'end'\"\n\t\t\t\t\t[class.text-center]=\"header.align === 'center'\"\n\t\t\t\t\t[style.width]=\"header.buttons?.length ? '0' : 'auto'\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getCellTemplate(header) || defaultCellTpt\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\theader: header,\n\t\t\t\t\t\t\titem: item.data,\n\t\t\t\t\t\t\trow: item,\n\t\t\t\t\t\t\tproperty: item.data | get: header.property\n\t\t\t\t\t\t}\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</td>\n\t\t\t}\n\t\t}\n\t\t@if (templateExpandingRows().length) {\n\t\t\t<td class=\"hub-table__cell hub-table__cell--expander sticky-end\" data-col=\"__hub_expander\" [class.sticky-end]=\"stickyActions()\">\n\t\t\t\t@if (templateExpandingRows().length) {\n\t\t\t\t\t<button (click)=\"toggleExpandedRow(item)\" type=\"button\" class=\"hub-table__expander-btn btn btn-link px-2\">\n\t\t\t\t\t\t<i\n\t\t\t\t\t\t\tclass=\"hub-table__expander-icon hub-table__icon\"\n\t\t\t\t\t\t\t[class.hub-table__icon--caret-up]=\"!item.collapsed\"\n\t\t\t\t\t\t\t[class.hub-table__icon--caret-down]=\"item.collapsed\"\n\t\t\t\t\t\t></i>\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</td>\n\t\t}\n\t\t<!-- <td *ngIf=\"!lastColumnOnlyHasButtons && filterHeaders?.length\"></td> -->\n\t</tr>\n\t@if (!item.collapsed) {\n\t\t@for (template of templateExpandingRows(); track template) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"template.templateRef\" [ngTemplateOutletContext]=\"{ item: item, colspan: fullColspan }\"> </ng-container>\n\t\t}\n\t}\n</ng-template>\n\n<ng-template #defaultNoResultsTpt>\n\t<div class=\"hub-table__no-data alert alert-info d-flex align-items-center m-4\" role=\"alert\">\n\t\t<i class=\"hub-table__no-data-icon hub-table__icon hub-table__icon--info hub-table__icon--2x\" aria-hidden=\"true\"></i>\n\t\t{{ 'NO_RESULTS_FOUND' | translate | ucfirst }}\n\t</div>\n</ng-template>\n\n<ng-template #defaultLoadingTpt>\n\t<div class=\"hub-table__loading\">\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\txmlns:xlink=\"http://www.w3.org/1999/xlink\"\n\t\t\tstyle=\"margin: auto; background: #fff; display: block\"\n\t\t\twidth=\"200px\"\n\t\t\theight=\"200px\"\n\t\t\tviewBox=\"0 0 100 100\"\n\t\t\tpreserveAspectRatio=\"xMidYMid\"\n\t\t>\n\t\t\t<circle cx=\"50\" cy=\"50\" r=\"0\" fill=\"none\" stroke=\"#cccccc\" stroke-width=\"1\">\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"r\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"0;40\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0 0.2 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"0s\"\n\t\t\t\t></animate>\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"opacity\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"1;0\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0.2 0 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"0s\"\n\t\t\t\t></animate>\n\t\t\t</circle>\n\t\t\t<circle cx=\"50\" cy=\"50\" r=\"0\" fill=\"none\" stroke=\"#333333\" stroke-width=\"1\">\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"r\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"0;40\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0 0.2 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"-0.8333333333333334s\"\n\t\t\t\t></animate>\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"opacity\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"1;0\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0.2 0 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"-0.8333333333333334s\"\n\t\t\t\t></animate>\n\t\t\t</circle>\n\t\t</svg>\n\t</div>\n</ng-template>\n\n<ng-template #defaultErrorTpt>\n\t<div class=\"hub-table__error m-4 p-4 text-center text-danger\">\n\t\t<svg\n\t\t\taria-hidden=\"true\"\n\t\t\tfocusable=\"false\"\n\t\t\tdata-prefix=\"fal\"\n\t\t\tdata-icon=\"sad-tear\"\n\t\t\trole=\"img\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox=\"0 0 496 512\"\n\t\t\tstyle=\"height: 64px\"\n\t\t>\n\t\t\t<path\n\t\t\t\tfill=\"#dc3545\"\n\t\t\t\td=\"M168 240c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zM248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-152c-11.2 0-22 1.7-32.7 4.1-7.2-12.6-16.1-26.5-28.1-42.4-9-12.1-29.4-12-38.4 0-29.7 39.6-44.8 69-44.8 87.3 0 34.7 28.7 63 64 63s64-28.3 64-63c0-4.4-1-9.5-2.7-15.1 6.1-1.2 12.3-1.9 18.7-1.9 34.9 0 67.8 15.4 90.2 42.2 5.3 6.4 15.4 8 22.5 2 6.8-5.7 7.7-15.8 2-22.5C334.2 339.6 292.4 320 248 320zm-80 80c-17.7 0-32-13.9-32-31 0-7.7 10-28.8 32-59.5 22 30.7 32 51.8 32 59.5 0 17.1-14.3 31-32 31z\"\n\t\t\t\tclass=\"\"\n\t\t\t></path>\n\t\t</svg>\n\t\t<p>{{ 'ERROR_OCURRED' | translate }}</p>\n\t</div>\n</ng-template>\n\n<ng-template #defaultHeaderTpt let-header=\"header\" let-property=\"property\">\n\t@if (header.icon) {\n\t\t<i class=\"hub-table__header-icon {{ header.icon }}\" aria-hidden=\"true\"></i>\n\t}\n\t<div\n\t\tclass=\"hub-table__header-title\"\n\t\t[class.me-auto]=\"header.align === 'start'\"\n\t\t[class.ms-auto]=\"header.align === 'end'\"\n\t\t[class.mx-auto]=\"header.align === 'center'\"\n\t>\n\t\t@if (header.title) {\n\t\t\t<span class=\"hub-table__header-title-text text-wrap\">{{ header.title ?? header.property | unwrapAsync }}</span>\n\t\t}\n\t</div>\n</ng-template>\n\n<ng-template #defaultFilterTpt let-header=\"header\" let-formControl=\"formControl\">\n\t@switch (header.filter.type) {\n\t\t@case ('dropdown') {\n\t\t\t<select [formControl]=\"formControl\" class=\"form-select form-control\">\n\t\t\t\t@if (header.filter.placeholder) {\n\t\t\t\t\t<option [ngValue]=\"null\">\n\t\t\t\t\t\t{{ header.filter.placeholder }}\n\t\t\t\t\t</option>\n\t\t\t\t}\n\t\t\t\t@if (header.filter.options | isObservable) {\n\t\t\t\t\t@let options = header.filter.options | async;\n\t\t\t\t\t@for (option of $any(options); track option) {\n\t\t\t\t\t\t<option [value]=\"option[header.filter.bindValue || 'id']\">\n\t\t\t\t\t\t\t{{ option[header.filter.bindLabel || 'name'] }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t@for (option of header.filter.options; track option) {\n\t\t\t\t\t\t<option [value]=\"option[header.filter.bindValue || 'id']\">\n\t\t\t\t\t\t\t{{ option[header.filter.bindLabel || 'name'] }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</select>\n\t\t}\n\t\t@case ('number-range') {\n\t\t\t<hub-table-range-input type=\"number\" [formControl]=\"formControl\"> </hub-table-range-input>\n\t\t}\n\t\t@case ('date-range') {\n\t\t\t<hub-table-range-input type=\"date\" [formControl]=\"formControl\"> </hub-table-range-input>\n\t\t}\n\t\t@case ('boolean') {\n\t\t\t<select [formControl]=\"formControl\" class=\"form-select form-control\">\n\t\t\t\t<option [ngValue]=\"null\">\n\t\t\t\t\t{{ header.filter.placeholder ?? 'SELECT_ONE' | translate | ucfirst }}\n\t\t\t\t</option>\n\t\t\t\t<option [ngValue]=\"true\">\n\t\t\t\t\t{{ header.filter.trueLabel ?? ('TRUE' | translate | ucfirst) }}\n\t\t\t\t</option>\n\t\t\t\t<option [ngValue]=\"false\">\n\t\t\t\t\t{{ header.filter.falseLabel ?? ('FALSE' | translate | ucfirst) }}\n\t\t\t\t</option>\n\t\t\t</select>\n\t\t}\n\t\t@default {\n\t\t\t<input\n\t\t\t\t[type]=\"header.filter.type\"\n\t\t\t\t[formControl]=\"formControl\"\n\t\t\t\tclass=\"form-control\"\n\t\t\t\t[placeholder]=\"header.filter.placeholder || ''\"\n\t\t\t/>\n\t\t}\n\t}\n</ng-template>\n\n<ng-template #defaultCellTpt let-property=\"property\" let-item=\"item\" let-row=\"row\" let-header=\"header\">\n\t@if (header.buttons) {\n\t\t<div class=\"hub-table__cell-buttons d-flex flex-nowrap gap-2 justify-content-end align-items-center\">\n\t\t\t@for (button of header.buttons; track button) {\n\t\t\t\t@if (button.buttons) {\n\t\t\t\t\t<hub-table-dropdown [options]=\"button\" [row]=\"row\" class=\"hub-table__cell-dropdown d-inline-block\">\n\t\t\t\t\t</hub-table-dropdown>\n\t\t\t\t} @else {\n\t\t\t\t\t@if (!(isHidden(button, row) | async)) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-table__cell-btn\"\n\t\t\t\t\t\t\t[attr.title]=\"button.tooltip | unwrapAsync\"\n\t\t\t\t\t\t\t(click)=\"handleAction($event, button, row)\"\n\t\t\t\t\t\t\t[ngClass]=\"getRowActionClassList(button)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div class=\"hub-table__cell-btn-content d-flex flex-nowrap align-items-center gap-1\">\n\t\t\t\t\t\t\t\t<ng-hub-ui-icon [config]=\"button.icon\"></ng-hub-ui-icon>\n\t\t\t\t\t\t\t\t@if (button.label) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-table__cell-btn-label\">{{ button.label | unwrapAsync }}</span>\n\t\t\t\t\t\t\t\t} @else if (button.title) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-table__cell-btn-label\">{{ button.title | unwrapAsync }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t} @else {\n\t\t<span class=\"hub-table__cell-value\">{{ property }}</span>\n\t}\n</ng-template>\n", styles: [":root,:host{--hub-table-container-bg: var(--hub-ref-color-white, #fff);--hub-table-container-color: var(--hub-sys-text-primary, #212529);--hub-table-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-table-border-radius: var(--hub-ref-radius-md, .375rem);--hub-table-border-width: var(--hub-ref-border-width, 1px);--hub-table-row-divider-color: var(--hub-table-border-color);--hub-table-container-max-block-size: none;--hub-table-head-sticky-top: 0;--hub-table-container-gap: var(--hub-ref-space-3, 1rem);--hub-table-top-bar-gap: var(--hub-ref-space-3, 1rem);--hub-table-top-bar-justify-content: end;--hub-table-top-bar-align-items: center;--hub-table-top-bar-wrap: wrap;--hub-table-batch-actions-gap: var(--hub-ref-space-2, .5rem);--hub-table-batch-actions-margin-inline-end: auto;--hub-table-bottom-bar-gap: var(--hub-ref-space-3, 1rem);--hub-table-bottom-bar-justify-content: space-around;--hub-table-bottom-bar-align-items: center;--hub-table-bottom-bar-wrap: wrap;--hub-table-bottom-bar-paginator-order: 1;--hub-table-bottom-bar-settings-order: 2;--hub-table-bottom-bar-info-order: 3;--hub-table-bottom-bar-paginator-flex: 0 0 auto;--hub-table-bottom-bar-settings-flex: 0 0 auto;--hub-table-bottom-bar-info-flex: 0 0 auto;--hub-table-icon-color: currentColor;--hub-table-icon-size: 1em;--hub-table-icon-sort: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l128 128c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l128-128zm0 429.3l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128c-12.5 12.5-32.8 12.5-45.3 0z'/%3E%3C/svg%3E\");--hub-table-icon-sort-up: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3C/svg%3E\");--hub-table-icon-sort-down: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H32c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E\");--hub-table-icon-caret-up: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3C/svg%3E\");--hub-table-icon-caret-down: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H32c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E\");--hub-table-icon-search: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E\");--hub-table-icon-filter: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z'/%3E%3C/svg%3E\");--hub-table-icon-eraser: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M290.7 57.4L57.4 290.7c-25 25-25 65.5 0 90.5l80 80c12 12 28.3 18.7 45.3 18.7H288h9.4H512c17.7 0 32-14.3 32-32s-14.3-32-32-32H387.9L518.6 285.3c25-25 25-65.5 0-90.5L381.3 57.4c-25-25-65.5-25-90.5 0zM297.4 416H288l-105.4 0-80-80L227.3 211.3 364.7 348.7 297.4 416z'/%3E%3C/svg%3E\");--hub-table-icon-info: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-up: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-down: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5 12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-left: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-right: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 105.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E\");--hub-table-icon-angle-left: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E\");--hub-table-icon-angle-right: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E\");--hub-table-icon-angle-double-left: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z'/%3E%3C/svg%3E\");--hub-table-icon-angle-double-right: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0z'/%3E%3C/svg%3E\");--hub-table-icon-ellipsis-v: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 512'%3E%3Cpath d='M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z'/%3E%3C/svg%3E\");--hub-table-icon-trash: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z'/%3E%3C/svg%3E\");--hub-table-icon-plus: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E\");--hub-table-accent-bg: transparent;--hub-table-active-bg: var(--hub-sys-state-active-bg, rgba(0, 0, 0, .1));--hub-table-active-color: var(--hub-sys-text-primary, #212529);--hub-table-accent: var(--hub-sys-color-primary, #0d6efd);--hub-table-accent-emphasis: color-mix(in oklch, var(--hub-table-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-table-accent-subtle: color-mix(in oklch, var(--hub-table-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-table-accent-on: oklch(from var(--hub-table-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-table-selected-bg: var(--hub-table-accent-subtle);--hub-table-selected-color: var(--hub-sys-text-primary, #212529);--hub-table-bg: var(--hub-ref-color-white, #fff);--hub-table-head-bg: var(--hub-table-bg);--hub-table-head-color: var(--hub-table-color);--hub-table-bg-state: initial;--hub-table-bg-type: initial;--hub-table-cell-padding-x: var(--hub-ref-space-3, 1rem);--hub-table-cell-padding-x-sm: var(--hub-ref-space-2, .5rem);--hub-table-cell-padding-y: var(--hub-ref-space-2, .5rem);--hub-table-cell-padding-y-sm: var(--hub-ref-space-1, .25rem);--hub-table-cell-vertical-align: middle;--hub-table-color: var(--hub-sys-text-primary, #212529);--hub-table-color-state: initial;--hub-table-color-type: initial;--hub-table-group-separator-color: var(--hub-sys-border-color-default, #dee2e6);--hub-table-search-button-bg: var(--hub-table-container-bg);--hub-table-search-button-border-color: var(--hub-table-border-color);--hub-table-search-button-color: var(--hub-table-container-color);--hub-table-search-button-min-width: 2.75rem;--hub-table-search-input-bg: var(--hub-table-container-bg);--hub-table-search-input-border-color: var(--hub-table-border-color);--hub-table-search-input-color: var(--hub-table-container-color);--hub-table-search-border-width: var(--hub-table-border-width);--hub-table-search-border-radius: var(--hub-table-border-radius);--hub-table-search-input-padding-x: .75rem;--hub-table-search-input-padding-y: .375rem;--hub-table-search-input-font-size: 1rem;--hub-table-filter-button-active-bg: color-mix(in oklch, var(--hub-sys-color-success, #198754) 10%, transparent);--hub-table-filter-button-active-border-color: var(--hub-sys-color-success, #198754);--hub-table-filter-button-hover-bg: rgba(0, 0, 0, .05);--hub-table-filter-button-icon-active-color: var(--hub-sys-color-success, #198754);--hub-table-filter-button-icon-color: var(--hub-sys-text-muted, #6c757d);--hub-table-filter-button-gap: var(--hub-ref-space-2, .5rem);--hub-table-filter-button-padding-x: .75rem;--hub-table-filter-button-padding-y: .375rem;--hub-table-filter-button-border-width: 1px;--hub-table-filter-button-border-color: transparent;--hub-table-filter-button-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-table-filter-button-transition: all .2s ease;--hub-table-filter-count-bg: var(--hub-sys-color-success, #198754);--hub-table-filter-count-color: var(--hub-ref-color-white, #fff);--hub-table-filter-count-size: 1.25rem;--hub-table-filter-count-padding-x: .4em;--hub-table-filter-count-font-size: .7rem;--hub-table-filter-count-font-weight: var(--hub-ref-font-weight-bold, 700);--hub-table-filter-count-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-table-batch-actions-btn-icon-gap: var(--hub-ref-space-1, .25rem);--hub-table-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-table-hover-color: var(--hub-sys-text-primary, #212529);--hub-table-striped-bg: var(--hub-sys-state-striped-bg, rgba(0, 0, 0, .05));--hub-table-striped-color: var(--hub-sys-text-primary, #212529)}:host{display:flex;flex-direction:column;gap:var(--hub-table-container-gap);min-width:0;color:var(--hub-table-container-color)}:host .hub-table__top-bar{display:flex;justify-content:var(--hub-table-top-bar-justify-content);align-items:var(--hub-table-top-bar-align-items);flex-wrap:var(--hub-table-top-bar-wrap);gap:var(--hub-table-top-bar-gap)}:host .hub-table__batch-actions{display:flex;align-items:center;gap:var(--hub-table-batch-actions-gap);margin-inline-end:var(--hub-table-batch-actions-margin-inline-end)}:host .hub-table__batch-actions-btn-icon{margin-right:var(--hub-table-batch-actions-btn-icon-gap)}:host .hub-table__batch-actions-btn--default,:host .hub-table__cell-btn--default{border:var(--hub-table-border-width) solid var(--hub-table-border-color);border-radius:var(--hub-table-border-radius)}:host .hub-table__search{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:end}:host .hub-table__search-input{position:relative;flex:1 1 auto;width:1%;min-width:0;display:block;width:100%;padding:var(--hub-table-search-input-padding-y) var(--hub-table-search-input-padding-x);font-size:var(--hub-table-search-input-font-size);font-weight:var(--hub-ref-font-weight-base, 400);line-height:var(--hub-ref-line-height-base, 1.5);color:var(--hub-table-search-input-color);appearance:none;background-color:var(--hub-table-search-input-bg);background-clip:padding-box;border:var(--hub-table-search-border-width) solid var(--hub-table-search-input-border-color);border-radius:var(--hub-table-search-border-radius) 0 0 var(--hub-table-search-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}:host .hub-table__search-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hub-table-search-button-min-width);color:var(--hub-table-search-button-color);background-color:var(--hub-table-search-button-bg);border-color:var(--hub-table-search-button-border-color);border-radius:0 var(--hub-table-search-border-radius) var(--hub-table-search-border-radius) 0}:host .hub-table__bottom-bar{display:flex;justify-content:var(--hub-table-bottom-bar-justify-content);align-items:var(--hub-table-bottom-bar-align-items);flex-wrap:var(--hub-table-bottom-bar-wrap);gap:var(--hub-table-bottom-bar-gap)}:host .hub-table__bottom-bar-paginator{order:var(--hub-table-bottom-bar-paginator-order);flex:var(--hub-table-bottom-bar-paginator-flex)}:host .hub-table__bottom-bar-settings{order:var(--hub-table-bottom-bar-settings-order);flex:var(--hub-table-bottom-bar-settings-flex);margin:0}:host .hub-table__bottom-bar-info{order:var(--hub-table-bottom-bar-info-order);flex:var(--hub-table-bottom-bar-info-flex);margin:0}:host .hub-table__paginator{overflow:auto;margin:0}:host .hub-table__filter-button{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--hub-table-filter-button-gap);padding:var(--hub-table-filter-button-padding-y) var(--hub-table-filter-button-padding-x);cursor:pointer;border:var(--hub-table-filter-button-border-width) solid var(--hub-table-filter-button-border-color);border-radius:var(--hub-table-filter-button-border-radius);transition:var(--hub-table-filter-button-transition)}:host .hub-table__filter-button:hover{background-color:var(--hub-table-filter-button-hover-bg)}:host .hub-table__filter-button--active{background-color:var(--hub-table-filter-button-active-bg);border-color:var(--hub-table-filter-button-active-border-color)}:host .hub-table__filter-button--active .hub-table__filter-button-icon{color:var(--hub-table-filter-button-icon-active-color)}:host .hub-table__filter-button-icon{transition:color .2s ease;color:var(--hub-table-filter-button-icon-color)}:host .hub-table__filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hub-table-filter-count-size);height:var(--hub-table-filter-count-size);padding:0 var(--hub-table-filter-count-padding-x);font-size:var(--hub-table-filter-count-font-size);font-weight:var(--hub-table-filter-count-font-weight);line-height:1;color:var(--hub-table-filter-count-color);text-align:center;white-space:nowrap;background-color:var(--hub-table-filter-count-bg);border-radius:var(--hub-table-filter-count-border-radius);animation:badge-appear .2s ease}:host .hub-table__no-data-icon{margin-right:var(--hub-ref-space-4, 1.5rem)}:host .hub-table__header-icon{margin-right:var(--hub-ref-space-2, .5rem)}:host .hub-table__icon{display:inline-block;width:var(--hub-table-icon-size);height:var(--hub-table-icon-size);background-color:var(--hub-table-icon-color);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;vertical-align:middle}:host .hub-table__icon--xs{--hub-table-icon-size: .75em}:host .hub-table__icon--sm{--hub-table-icon-size: .875em}:host .hub-table__icon--lg{--hub-table-icon-size: 1.33em}:host .hub-table__icon--2x{--hub-table-icon-size: 2em}:host .hub-table__icon--3x{--hub-table-icon-size: 3em}:host .hub-table__icon--4x{--hub-table-icon-size: 4em}:host .hub-table__icon--5x{--hub-table-icon-size: 5em}:host .hub-table__icon--search{-webkit-mask-image:var(--hub-table-icon-search);mask-image:var(--hub-table-icon-search)}:host .hub-table__icon--filter{-webkit-mask-image:var(--hub-table-icon-filter);mask-image:var(--hub-table-icon-filter)}:host .hub-table__icon--eraser{-webkit-mask-image:var(--hub-table-icon-eraser);mask-image:var(--hub-table-icon-eraser)}:host .hub-table__icon--info{-webkit-mask-image:var(--hub-table-icon-info);mask-image:var(--hub-table-icon-info);margin-right:var(--hub-ref-space-4, 1.5rem)}:host .hub-table__icon--sort{-webkit-mask-image:var(--hub-table-icon-sort);mask-image:var(--hub-table-icon-sort)}:host .hub-table__icon--sort-up{-webkit-mask-image:var(--hub-table-icon-sort-up);mask-image:var(--hub-table-icon-sort-up)}:host .hub-table__icon--sort-down{-webkit-mask-image:var(--hub-table-icon-sort-down);mask-image:var(--hub-table-icon-sort-down)}:host .hub-table__icon--caret-up{-webkit-mask-image:var(--hub-table-icon-caret-up);mask-image:var(--hub-table-icon-caret-up)}:host .hub-table__icon--caret-down{-webkit-mask-image:var(--hub-table-icon-caret-down);mask-image:var(--hub-table-icon-caret-down)}:host .hub-table__icon--chevron-up{-webkit-mask-image:var(--hub-table-icon-chevron-up);mask-image:var(--hub-table-icon-chevron-up)}:host .hub-table__icon--chevron-down{-webkit-mask-image:var(--hub-table-icon-chevron-down);mask-image:var(--hub-table-icon-chevron-down)}:host .hub-table__icon--chevron-left{-webkit-mask-image:var(--hub-table-icon-chevron-left);mask-image:var(--hub-table-icon-chevron-left)}:host .hub-table__icon--chevron-right{-webkit-mask-image:var(--hub-table-icon-chevron-right);mask-image:var(--hub-table-icon-chevron-right)}:host .hub-table__icon--angle-left{-webkit-mask-image:var(--hub-table-icon-angle-left);mask-image:var(--hub-table-icon-angle-left)}:host .hub-table__icon--angle-right{-webkit-mask-image:var(--hub-table-icon-angle-right);mask-image:var(--hub-table-icon-angle-right)}:host .hub-table__icon--angle-double-left{-webkit-mask-image:var(--hub-table-icon-angle-double-left);mask-image:var(--hub-table-icon-angle-double-left)}:host .hub-table__icon--angle-double-right{-webkit-mask-image:var(--hub-table-icon-angle-double-right);mask-image:var(--hub-table-icon-angle-double-right)}:host .hub-table__icon--ellipsis-v{-webkit-mask-image:var(--hub-table-icon-ellipsis-v);mask-image:var(--hub-table-icon-ellipsis-v)}:host .hub-table__icon--trash{-webkit-mask-image:var(--hub-table-icon-trash);mask-image:var(--hub-table-icon-trash);margin-right:var(--hub-ref-space-2, .5rem)}:host .hub-table__icon--plus{-webkit-mask-image:var(--hub-table-icon-plus);mask-image:var(--hub-table-icon-plus);margin-right:var(--hub-ref-space-2, .5rem)}:host .hub-table__container{overflow:auto;max-block-size:var(--hub-table-container-max-block-size);background-color:var(--hub-table-container-bg);border:var(--hub-table-border-width) solid var(--hub-table-border-color);border-radius:var(--hub-table-border-radius);color:var(--hub-table-container-color)}:host .hub-table__element{position:relative;width:100%;border-collapse:collapse;border-spacing:0;vertical-align:var(--hub-table-cell-vertical-align);border-color:var(--hub-table-border-color);background-color:var(--hub-table-bg);color:var(--hub-table-color)}:host .hub-table__element .sticky-start{background-color:var(--hub-table-bg);left:0;position:sticky;z-index:9}:host .hub-table__element .sticky-end{background-color:var(--hub-table-bg);right:0;position:sticky;z-index:9}:host .hub-table__element .clickable-item{cursor:pointer}:host .hub-table__element>:not(caption)>*>*{padding:var(--hub-table-cell-padding-y) var(--hub-table-cell-padding-x);vertical-align:var(--hub-table-cell-vertical-align);color:var(--hub-table-color-state, var(--hub-table-color-type, var(--hub-table-color)));background-color:var(--hub-table-bg);border-bottom-style:solid;border-bottom-color:var(--hub-table-row-divider-color);border-bottom-width:var(--hub-table-border-width);box-shadow:inset 0 0 0 9999px var(--hub-table-bg-state, var(--hub-table-bg-type, var(--hub-table-accent-bg)))}:host .hub-table__element>tbody{vertical-align:inherit}:host .hub-table__element>thead{vertical-align:bottom}:host .hub-table__element>thead>tr>*{background-color:var(--hub-table-head-bg);color:var(--hub-table-head-color)}:host .hub-table__scrollable thead{position:sticky;top:var(--hub-table-head-sticky-top);z-index:10}:host .hub-table__group-divider{border-top:calc(var(--hub-table-border-width) * 2) solid var(--hub-table-group-separator-color)}:host .hub-table__sm>:not(caption)>*>*{padding:var(--hub-table-cell-padding-y-sm) var(--hub-table-cell-padding-x-sm)}:host .hub-table__bordered>:not(caption)>*{border-style:solid;border-width:var(--hub-table-border-width) 0}:host .hub-table__bordered>:not(caption)>*>*{border-style:solid;border-width:0 var(--hub-table-border-width)}:host .hub-table__borderless>:not(caption)>*>*{border-bottom-width:0}:host .hub-table__borderless>:not(:first-child){border-top-width:0}:host .hub-table__striped-odd>tbody>tr:nth-of-type(odd)>*{color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__striped-even>tbody>tr:nth-of-type(2n)>*{color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__striped-columns-odd>:not(caption)>tr>:nth-child(odd){color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__striped-columns-even>:not(caption)>tr>:nth-child(2n){color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__active{--hub-table-color-state: var(--hub-table-active-color);--hub-table-bg-state: var(--hub-table-active-bg)}:host .hub-table__hover>tbody>tr:hover>*{--hub-table-color-state: var(--hub-table-hover-color);--hub-table-bg-state: var(--hub-table-hover-bg)}:host .hub-table__body-row--selected>*,:host .hub-table__hover>tbody>tr.hub-table__body-row--selected:hover>*{--hub-table-color-state: var(--hub-table-selected-color);--hub-table-bg-state: var(--hub-table-selected-bg)}:host .hub-table__selectable>tbody>tr.hub-table__body-row{cursor:pointer}:host .hub-table__responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.hub-table__primary{--hub-table-accent: var(--hub-sys-color-primary)}.hub-table__secondary{--hub-table-accent: var(--hub-sys-color-secondary)}.hub-table__success{--hub-table-accent: var(--hub-sys-color-success)}.hub-table__danger{--hub-table-accent: var(--hub-sys-color-danger)}.hub-table__warning{--hub-table-accent: var(--hub-sys-color-warning)}.hub-table__info{--hub-table-accent: var(--hub-sys-color-info)}.hub-table__neutral{--hub-table-accent: var(--hub-sys-color-neutral)}.hub-table__light{--hub-table-accent: var(--hub-sys-color-light)}.hub-table__dark{--hub-table-accent: var(--hub-sys-color-dark)}:host.hub-table--rtl{direction:rtl}:host.hub-table--rtl .hub-table__top-bar{direction:ltr}:host.hub-table--rtl .hub-table__batch-actions{order:2;flex-direction:row-reverse;margin-inline-end:0;margin-inline-start:auto}:host.hub-table--rtl .hub-table__batch-actions-btn-icon{margin-right:0;margin-left:var(--hub-table-batch-actions-btn-icon-gap)}:host.hub-table--rtl .hub-table__search{order:1;margin-inline-end:auto;margin-inline-start:0;direction:ltr}:host.hub-table--rtl .hub-table__search-input{direction:ltr;text-align:right;border-radius:0 var(--hub-table-search-border-radius) var(--hub-table-search-border-radius) 0}:host.hub-table--rtl .hub-table__search-button{border-radius:var(--hub-table-search-border-radius) 0 0 var(--hub-table-search-border-radius)}:host.hub-table--rtl .hub-table__no-data-icon{margin-right:0;margin-left:var(--hub-ref-space-4, 1.5rem)}:host.hub-table--rtl .hub-table__header-icon{margin-right:0;margin-left:var(--hub-ref-space-2, .5rem)}.caption-top{caption-side:top}@media(max-width:576px){.hub-table__responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:768px){.hub-table__responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:992px){.hub-table__responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:1200px){.hub-table__responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:1400px){.hub-table__responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@keyframes badge-appear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n"] }]
|
|
5486
|
-
|
|
5525
|
+
'[class.hub-table--rtl]': 'isRtl()',
|
|
5526
|
+
'[class.hub-table--sticky-header]': 'stickyHeader()',
|
|
5527
|
+
'[style.--hub-table-accent]': 'accentVar()'
|
|
5528
|
+
}, template: "@if (batchActions().length || searchable() || headerFilters().length) {\n\t<div class=\"hub-table__top-bar\">\n\t\t@if (batchActions().length) {\n\t\t\t<div class=\"hub-table__batch-actions\">\n\t\t\t\t@for (button of batchActions(); track $index) {\n\t\t\t\t\t@if ($any(button).buttons?.length) {\n\t\t\t\t\t\t<hub-table-dropdown\n\t\t\t\t\t\t\tclass=\"hub-table__batch-actions-dropdown\"\n\t\t\t\t\t\t\t[options]=\"$any(button)\"\n\t\t\t\t\t\t\t[disabled]=\"!value.length\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t</hub-table-dropdown>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"hub-table__batch-actions-btn\"\n\t\t\t\t\t\t\t[ngClass]=\"getBatchActionClassList(button)\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t(click)=\"handleBatchAction(button)\"\n\t\t\t\t\t\t\t[disabled]=\"!value.length\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@if (button.icon) {\n\t\t\t\t\t\t\t\t<i class=\"hub-table__batch-actions-btn-icon {{ button.icon }}\"></i>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t@if (button.title) {\n\t\t\t\t\t\t\t\t<span class=\"hub-table__batch-actions-btn-title\">{{ button.title | unwrapAsync }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@if (searchable()) {\n\t\t\t<div class=\"hub-table__search\">\n\t\t\t\t@if (isRtl()) {\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"hub-table__search-button btn btn-outline-dark\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<i class=\"hub-table__search-icon hub-table__icon hub-table__icon--search\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</button>\n\t\t\t\t\t@if (formControlsAdapter) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\thubPaginableControl=\"input\"\n\t\t\t\t\t\t\tcontrolType=\"text\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[ariaLabel]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\tcssClass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(valueChange)=\"searchProxy$.next($any($event))\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t@if (formControlsAdapter) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\thubPaginableControl=\"input\"\n\t\t\t\t\t\t\tcontrolType=\"text\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[ariaLabel]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\tcssClass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(valueChange)=\"searchProxy$.next($any($event))\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"hub-table__search-button btn btn-outline-dark\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<i class=\"hub-table__search-icon hub-table__icon hub-table__icon--search\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@if (headerFilters().length) {\n\t\t\t<div class=\"hub-table__delete-filters\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-table__delete-filters-btn btn btn-outline-danger\"\n\t\t\t\t\t(click)=\"clearFilters()\"\n\t\t\t\t\t[disabled]=\"filterLoading\"\n\t\t\t\t>\n\t\t\t\t\t<i class=\"hub-table__delete-filters-icon hub-table__icon hub-table__icon--eraser\"></i>\n\t\t\t\t\t{{ 'CLEAN_FILTERS' | translate | ucfirst }}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t}\n\t</div>\n}\n\n<div class=\"hub-table__container {{ responsiveCSSClass() }}\" [class.hub-table__responsive]=\"responsiveCSSClass()\">\n\t@let striped = options().striped;\n\t<table\n\t\tclass=\"hub-table__element\"\n\t\thubStickyColumns\n\t\t[class.hub-table__hover]=\"(options().hoverableRows || selectable()) && !loading()\"\n\t\t[class.hub-table__striped-odd]=\"striped === 'rows-odd'\"\n\t\t[class.hub-table__striped-even]=\"striped === 'rows-even'\"\n\t\t[class.hub-table__striped-columns-odd]=\"striped === 'columns-odd'\"\n\t\t[class.hub-table__striped-columns-even]=\"striped === 'columns-even'\"\n\t\t[class.hub-table__selectable]=\"selectable()\"\n\t\t[class.hub-table__scrollable]=\"options().scrollable\"\n\t\t[ngClass]=\"options().variant ? 'hub-table__' + options().variant : null\"\n\t>\n\t\t<thead class=\"hub-table__head\" [formGroup]=\"filtersFG\">\n\t\t\t<tr class=\"hub-table__head-row\">\n\t\t\t\t@if (selectable()) {\n\t\t\t\t\t<th class=\"hub-table__header-cell hub-table__header-cell--actions sticky-start\" data-col=\"__hub_select\">\n\t\t\t\t\t\t@if (multipleSelectable()) {\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t[(ngModel)]=\"allRowsSelected\"\n\t\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t\t(click)=\"toggleAll()\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t</th>\n\t\t\t\t}\n\t\t\t\t@for (header of fixedHeaders(); track header.property) {\n\t\t\t\t\t@if (!(isColumnHidden(header) | async)) {\n\t\t\t\t\t\t<th\n\t\t\t\t\t\t\tclass=\"hub-table__header-cell\"\n\t\t\t\t\t\t\tresizable\n\t\t\t\t\t\t\t[attr.data-col]=\"header.property\"\n\t\t\t\t\t\t\t[class.sticky-start]=\"header.sticky === 'start'\"\n\t\t\t\t\t\t\t[class.sticky-end]=\"header.sticky === 'end'\"\n\t\t\t\t\t\t\t[class.text-start]=\"header.align === 'start'\"\n\t\t\t\t\t\t\t[class.text-end]=\"header.align === 'end'\"\n\t\t\t\t\t\t\t[class.text-center]=\"header.align === 'center'\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"hub-table__header-cell-content d-flex flex-nowrap align-items-center justify-content-between gap-2\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"getHeaderTemplate(header) || defaultHeaderTpt\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\t\theader,\n\t\t\t\t\t\t\t\t\t\tproperty: header | get: header.property\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t@if (header.sortable || header.filter?.mode === 'menu') {\n\t\t\t\t\t\t\t\t\t<div class=\"hub-table__header-cell-actions d-flex gap-2 ms-auto align-items-center\">\n\t\t\t\t\t\t\t\t\t\t<button class=\"hub-table__sort-btn btn\" (click)=\"sort(header)\">\n\t\t\t\t\t\t\t\t\t\t\t@if (header.sortable) {\n\t\t\t\t\t\t\t\t\t\t\t\t<i\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__sort-icon hub-table__icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[ngClass]=\"getOrdenationClass(header)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t@if (header.filter?.mode === 'menu') {\n\t\t\t\t\t\t\t\t\t\t\t<hub-dropdown\n\t\t\t\t\t\t\t\t\t\t\t\t#dropdown\n\t\t\t\t\t\t\t\t\t\t\t\t(open)=\"onDropdownFilterOpened($event)\"\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-dropdown\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-button button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[class.hub-table__filter-button--active]=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfiltersFG.get(header.filter.key || header.property)?.value?.rules\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.length\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<i\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-button-icon hub-table__icon hub-table__icon--filter\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t\t\t\t\t\t\t\t@if (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfiltersFG.get(header.filter.key || header.property)?.value?.rules;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tas rules\n\t\t\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (rules.length) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"hub-table__filter-count\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ rules.length }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t@if (dropdown.isOpened()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<menu-filter\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__filter-dropdown-content content\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[header]=\"header\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[formControlName]=\"header.filter.key || header.property\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</menu-filter>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</hub-dropdown>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</th>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@if (templateExpandingRows().length) {\n\t\t\t\t\t<th class=\"hub-table__header-cell hub-table__header-cell--expander sticky-end\" data-col=\"__hub_expander\"></th>\n\t\t\t\t}\n\t\t\t</tr>\n\n\t\t\t<!-- Filtering -->\n\t\t\t@if (hasColumnFilters()) {\n\t\t\t\t<tr class=\"hub-table__filter-row\">\n\t\t\t\t\t@if (selectable() || batchActions.length) {\n\t\t\t\t\t\t<th class=\"hub-table__filter-cell sticky-start\" data-col=\"__hub_select\"></th>\n\t\t\t\t\t}\n\t\t\t\t\t@for (header of fixedHeaders(); track $index; let last = $last) {\n\t\t\t\t\t\t@if (!(isColumnHidden(header) | async)) {\n\t\t\t\t\t\t\t@let formControlName = header.filter?.key || header.property;\n\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\tclass=\"hub-table__filter-cell\"\n\t\t\t\t\t\t\t\t[attr.data-col]=\"header.property\"\n\t\t\t\t\t\t\t\t[class.sticky-start]=\"header.sticky === 'start'\"\n\t\t\t\t\t\t\t\t[class.sticky-end]=\"header.sticky === 'end'\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (header.filter && header.filter.mode !== 'menu' && filtersFG.get(formControlName)) {\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"getFilterTemplate(header) || defaultFilterTpt\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\t\t\theader: header,\n\t\t\t\t\t\t\t\t\t\t\tformControl: filtersFG.get(formControlName)\n\t\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</tr>\n\t\t\t}\n\t\t</thead>\n\t\t<tbody class=\"hub-table__body\">\n\t\t\t@if (loading()) {\n\t\t\t\t<tr class=\"hub-table__body-row\">\n\t\t\t\t\t<td class=\"hub-table__cell\" [attr.colspan]=\"fullColspan\">\n\t\t\t\t\t\t<hub-state-outlet\n\t\t\t\t\t\t\t[template]=\"loadingTpt()\"\n\t\t\t\t\t\t\t[instanceDefault]=\"loadingComponent()\"\n\t\t\t\t\t\t\t[globalDefault]=\"defaults.loading()\"\n\t\t\t\t\t\t\t[fallback]=\"defaultLoadingTpt\"\n\t\t\t\t\t\t\t[context]=\"{ colspan: fullColspan }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t} @else if (error()) {\n\t\t\t\t<tr class=\"hub-table__body-row\">\n\t\t\t\t\t<td class=\"hub-table__cell\" [attr.colspan]=\"fullColspan\">\n\t\t\t\t\t\t<hub-state-outlet\n\t\t\t\t\t\t\t[template]=\"errorTpt()\"\n\t\t\t\t\t\t\t[instanceDefault]=\"errorComponent()\"\n\t\t\t\t\t\t\t[globalDefault]=\"defaults.error()\"\n\t\t\t\t\t\t\t[fallback]=\"defaultErrorTpt\"\n\t\t\t\t\t\t\t[context]=\"{ error: error(), colspan: fullColspan }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t} @else if (displayedRows().length) {\n\t\t\t\t@for (item of displayedRows(); track $index) {\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"templateRow() || defaultRowTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item }\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-container>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t<tr>\n\t\t\t\t\t<td [attr.colspan]=\"fullColspan\">\n\t\t\t\t\t\t<hub-state-outlet\n\t\t\t\t\t\t\t[template]=\"noResultsTpt()\"\n\t\t\t\t\t\t\t[instanceDefault]=\"noResultsComponent()\"\n\t\t\t\t\t\t\t[globalDefault]=\"defaults.noResults()\"\n\t\t\t\t\t\t\t[fallback]=\"defaultNoResultsTpt\"\n\t\t\t\t\t\t\t[context]=\"{ colspan: fullColspan, filters: filters() ?? undefined }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t}\n\t\t</tbody>\n\t</table>\n</div>\n\n<!-- Pagination -->\n@if (page() !== undefined && page() !== null) {\n\t<div class=\"hub-table__bottom-bar\">\n\t\t@if (paginationPosition() == 'bottom' || paginationPosition() === 'both') {\n\t\t\t<hub-paginator\n\t\t\t\tclass=\"hub-table__paginator hub-table__bottom-bar-paginator\"\n\t\t\t\t[(page)]=\"$any(page)\"\n\t\t\t\t[numberOfPages]=\"numberOfPages()\"\n\t\t\t\t[rtl]=\"isRtl()\"\n\t\t\t>\n\t\t\t</hub-paginator>\n\t\t}\n\t\t<div class=\"hub-table__bottom-bar-settings hub-paginator__settings\">\n\t\t\t<label class=\"hub-paginator__label\"> {{ 'ROWS_PER_PAGE' | translate | ucfirst }}: </label>\n\t\t\t@if (formControlsAdapter) {\n\t\t\t\t<ng-container\n\t\t\t\t\thubPaginableControl=\"select\"\n\t\t\t\t\t[value]=\"perPage()\"\n\t\t\t\t\t[options]=\"perPageControlOptions()\"\n\t\t\t\t\t[ariaLabel]=\"'ROWS_PER_PAGE' | translate | ucfirst\"\n\t\t\t\t\tcssClass=\"hub-paginator__select\"\n\t\t\t\t\t(valueChange)=\"perPage.set($any($event))\"\n\t\t\t\t></ng-container>\n\t\t\t} @else {\n\t\t\t\t<select\n\t\t\t\t\tclass=\"hub-paginator__select\"\n\t\t\t\t\t[ngModel]=\"perPage()\"\n\t\t\t\t\t(ngModelChange)=\"perPage.set($event)\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t>\n\t\t\t\t\t@for (option of perPageOptions(); track option) {\n\t\t\t\t\t\t<option [ngValue]=\"option\" class=\"hub-paginator__select-option\">\n\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t}\n\t\t\t\t</select>\n\t\t\t}\n\t\t</div>\n\t\t@if (clientMode() || (totalItems() !== null && totalItems() !== undefined)) {\n\t\t\t<p class=\"hub-table__bottom-bar-info hub-paginator__info\">\n\t\t\t\t{{\n\t\t\t\t\t'SHOWING_X_OF_Y_ROWS'\n\t\t\t\t\t\t| translate\n\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\tamount: displayedRows().length,\n\t\t\t\t\t\t\t\t\ttotal: clientMode() ? clientFilteredRows().length : totalItems()\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t| ucfirst\n\t\t\t\t}}\n\t\t\t</p>\n\t\t}\n\t</div>\n}\n<ng-template #defaultRowTemplate let-item>\n\t<tr\n\t\tclass=\"hub-table__body-row\"\n\t\t(click)=\"onItemClick($event, item)\"\n\t\t[class.hub-table__body-row--selected]=\"selectable() && item.selected\"\n\t\t[class.hub-table__body-row--clickable]=\"clickFn()\"\n\t\t[ngClass]=\"_getRowClass(item)\"\n\t>\n\t\t@if (selectable() || batchActions.length) {\n\t\t\t<td class=\"hub-table__cell hub-table__cell--select sticky-start\" data-col=\"__hub_select\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t[(ngModel)]=\"item.selected\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t(click)=\"$event.stopPropagation(); toggle(item)\"\n\t\t\t\t/>\n\t\t\t</td>\n\t\t}\n\t\t@for (header of fixedHeaders(); track $index) {\n\t\t\t@if (!(isColumnHidden(header) | async)) {\n\t\t\t\t<td\n\t\t\t\t\tclass=\"hub-table__cell\"\n\t\t\t\t\t[attr.data-col]=\"header.property\"\n\t\t\t\t\t[class.sticky-start]=\"header.sticky === 'start'\"\n\t\t\t\t\t[class.sticky-end]=\"header.sticky === 'end'\"\n\t\t\t\t\t[class.text-start]=\"header.align === 'start'\"\n\t\t\t\t\t[class.text-end]=\"header.align === 'end'\"\n\t\t\t\t\t[class.text-center]=\"header.align === 'center'\"\n\t\t\t\t\t[style.width]=\"header.buttons?.length ? '0' : 'auto'\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getCellTemplate(header) || defaultCellTpt\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\theader: header,\n\t\t\t\t\t\t\titem: item.data,\n\t\t\t\t\t\t\trow: item,\n\t\t\t\t\t\t\tproperty: item.data | get: header.property\n\t\t\t\t\t\t}\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</td>\n\t\t\t}\n\t\t}\n\t\t@if (templateExpandingRows().length) {\n\t\t\t<td class=\"hub-table__cell hub-table__cell--expander sticky-end\" data-col=\"__hub_expander\" [class.sticky-end]=\"stickyActions()\">\n\t\t\t\t@if (templateExpandingRows().length) {\n\t\t\t\t\t<button (click)=\"toggleExpandedRow(item)\" type=\"button\" class=\"hub-table__expander-btn btn btn-link px-2\">\n\t\t\t\t\t\t<i\n\t\t\t\t\t\t\tclass=\"hub-table__expander-icon hub-table__icon\"\n\t\t\t\t\t\t\t[class.hub-table__icon--caret-up]=\"!item.collapsed\"\n\t\t\t\t\t\t\t[class.hub-table__icon--caret-down]=\"item.collapsed\"\n\t\t\t\t\t\t></i>\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</td>\n\t\t}\n\t\t<!-- <td *ngIf=\"!lastColumnOnlyHasButtons && filterHeaders?.length\"></td> -->\n\t</tr>\n\t@if (!item.collapsed) {\n\t\t@for (template of templateExpandingRows(); track template) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"template.templateRef\" [ngTemplateOutletContext]=\"{ item: item, colspan: fullColspan }\"> </ng-container>\n\t\t}\n\t}\n</ng-template>\n\n<ng-template #defaultNoResultsTpt>\n\t<div class=\"hub-table__no-data alert alert-info d-flex align-items-center m-4\" role=\"alert\">\n\t\t<i class=\"hub-table__no-data-icon hub-table__icon hub-table__icon--info hub-table__icon--2x\" aria-hidden=\"true\"></i>\n\t\t{{ 'NO_RESULTS_FOUND' | translate | ucfirst }}\n\t</div>\n</ng-template>\n\n<ng-template #defaultLoadingTpt>\n\t<div class=\"hub-table__loading\">\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\txmlns:xlink=\"http://www.w3.org/1999/xlink\"\n\t\t\tstyle=\"margin: auto; background: #fff; display: block\"\n\t\t\twidth=\"200px\"\n\t\t\theight=\"200px\"\n\t\t\tviewBox=\"0 0 100 100\"\n\t\t\tpreserveAspectRatio=\"xMidYMid\"\n\t\t>\n\t\t\t<circle cx=\"50\" cy=\"50\" r=\"0\" fill=\"none\" stroke=\"#cccccc\" stroke-width=\"1\">\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"r\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"0;40\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0 0.2 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"0s\"\n\t\t\t\t></animate>\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"opacity\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"1;0\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0.2 0 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"0s\"\n\t\t\t\t></animate>\n\t\t\t</circle>\n\t\t\t<circle cx=\"50\" cy=\"50\" r=\"0\" fill=\"none\" stroke=\"#333333\" stroke-width=\"1\">\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"r\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"0;40\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0 0.2 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"-0.8333333333333334s\"\n\t\t\t\t></animate>\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"opacity\"\n\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\tdur=\"1.6666666666666667s\"\n\t\t\t\t\tvalues=\"1;0\"\n\t\t\t\t\tkeyTimes=\"0;1\"\n\t\t\t\t\tkeySplines=\"0.2 0 0.8 1\"\n\t\t\t\t\tcalcMode=\"spline\"\n\t\t\t\t\tbegin=\"-0.8333333333333334s\"\n\t\t\t\t></animate>\n\t\t\t</circle>\n\t\t</svg>\n\t</div>\n</ng-template>\n\n<ng-template #defaultErrorTpt>\n\t<div class=\"hub-table__error m-4 p-4 text-center text-danger\">\n\t\t<svg\n\t\t\taria-hidden=\"true\"\n\t\t\tfocusable=\"false\"\n\t\t\tdata-prefix=\"fal\"\n\t\t\tdata-icon=\"sad-tear\"\n\t\t\trole=\"img\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox=\"0 0 496 512\"\n\t\t\tstyle=\"height: 64px\"\n\t\t>\n\t\t\t<path\n\t\t\t\tfill=\"#dc3545\"\n\t\t\t\td=\"M168 240c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zM248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-152c-11.2 0-22 1.7-32.7 4.1-7.2-12.6-16.1-26.5-28.1-42.4-9-12.1-29.4-12-38.4 0-29.7 39.6-44.8 69-44.8 87.3 0 34.7 28.7 63 64 63s64-28.3 64-63c0-4.4-1-9.5-2.7-15.1 6.1-1.2 12.3-1.9 18.7-1.9 34.9 0 67.8 15.4 90.2 42.2 5.3 6.4 15.4 8 22.5 2 6.8-5.7 7.7-15.8 2-22.5C334.2 339.6 292.4 320 248 320zm-80 80c-17.7 0-32-13.9-32-31 0-7.7 10-28.8 32-59.5 22 30.7 32 51.8 32 59.5 0 17.1-14.3 31-32 31z\"\n\t\t\t\tclass=\"\"\n\t\t\t></path>\n\t\t</svg>\n\t\t<p>{{ 'ERROR_OCURRED' | translate }}</p>\n\t</div>\n</ng-template>\n\n<ng-template #defaultHeaderTpt let-header=\"header\" let-property=\"property\">\n\t@if (header.icon) {\n\t\t<i class=\"hub-table__header-icon {{ header.icon }}\" aria-hidden=\"true\"></i>\n\t}\n\t<div\n\t\tclass=\"hub-table__header-title\"\n\t\t[class.me-auto]=\"header.align === 'start'\"\n\t\t[class.ms-auto]=\"header.align === 'end'\"\n\t\t[class.mx-auto]=\"header.align === 'center'\"\n\t>\n\t\t@if (header.title) {\n\t\t\t<span class=\"hub-table__header-title-text text-wrap\">{{ header.title ?? header.property | unwrapAsync }}</span>\n\t\t}\n\t</div>\n</ng-template>\n\n<ng-template #defaultFilterTpt let-header=\"header\" let-formControl=\"formControl\">\n\t@switch (header.filter.type) {\n\t\t@case ('dropdown') {\n\t\t\t<select [formControl]=\"formControl\" class=\"form-select form-control\">\n\t\t\t\t@if (header.filter.placeholder) {\n\t\t\t\t\t<option [ngValue]=\"null\">\n\t\t\t\t\t\t{{ header.filter.placeholder }}\n\t\t\t\t\t</option>\n\t\t\t\t}\n\t\t\t\t@if (header.filter.options | isObservable) {\n\t\t\t\t\t@let options = header.filter.options | async;\n\t\t\t\t\t@for (option of $any(options); track option) {\n\t\t\t\t\t\t<option [value]=\"option[header.filter.bindValue || 'id']\">\n\t\t\t\t\t\t\t{{ option[header.filter.bindLabel || 'name'] }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t@for (option of header.filter.options; track option) {\n\t\t\t\t\t\t<option [value]=\"option[header.filter.bindValue || 'id']\">\n\t\t\t\t\t\t\t{{ option[header.filter.bindLabel || 'name'] }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</select>\n\t\t}\n\t\t@case ('number-range') {\n\t\t\t<hub-table-range-input type=\"number\" [formControl]=\"formControl\"> </hub-table-range-input>\n\t\t}\n\t\t@case ('date-range') {\n\t\t\t<hub-table-range-input type=\"date\" [formControl]=\"formControl\"> </hub-table-range-input>\n\t\t}\n\t\t@case ('boolean') {\n\t\t\t<select [formControl]=\"formControl\" class=\"form-select form-control\">\n\t\t\t\t<option [ngValue]=\"null\">\n\t\t\t\t\t{{ header.filter.placeholder ?? 'SELECT_ONE' | translate | ucfirst }}\n\t\t\t\t</option>\n\t\t\t\t<option [ngValue]=\"true\">\n\t\t\t\t\t{{ header.filter.trueLabel ?? ('TRUE' | translate | ucfirst) }}\n\t\t\t\t</option>\n\t\t\t\t<option [ngValue]=\"false\">\n\t\t\t\t\t{{ header.filter.falseLabel ?? ('FALSE' | translate | ucfirst) }}\n\t\t\t\t</option>\n\t\t\t</select>\n\t\t}\n\t\t@default {\n\t\t\t<input\n\t\t\t\t[type]=\"header.filter.type\"\n\t\t\t\t[formControl]=\"formControl\"\n\t\t\t\tclass=\"form-control\"\n\t\t\t\t[placeholder]=\"header.filter.placeholder || ''\"\n\t\t\t/>\n\t\t}\n\t}\n</ng-template>\n\n<ng-template #defaultCellTpt let-property=\"property\" let-item=\"item\" let-row=\"row\" let-header=\"header\">\n\t@if (header.buttons) {\n\t\t<div class=\"hub-table__cell-buttons d-flex flex-nowrap gap-2 justify-content-end align-items-center\">\n\t\t\t@for (button of header.buttons; track button) {\n\t\t\t\t@if (button.buttons) {\n\t\t\t\t\t<hub-table-dropdown [options]=\"button\" [row]=\"row\" class=\"hub-table__cell-dropdown d-inline-block\">\n\t\t\t\t\t</hub-table-dropdown>\n\t\t\t\t} @else {\n\t\t\t\t\t@if (!(isHidden(button, row) | async)) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-table__cell-btn\"\n\t\t\t\t\t\t\t[attr.title]=\"button.tooltip | unwrapAsync\"\n\t\t\t\t\t\t\t(click)=\"handleAction($event, button, row)\"\n\t\t\t\t\t\t\t[ngClass]=\"getRowActionClassList(button)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div class=\"hub-table__cell-btn-content d-flex flex-nowrap align-items-center gap-1\">\n\t\t\t\t\t\t\t\t<ng-hub-ui-icon [config]=\"button.icon\"></ng-hub-ui-icon>\n\t\t\t\t\t\t\t\t@if (button.label) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-table__cell-btn-label\">{{ button.label | unwrapAsync }}</span>\n\t\t\t\t\t\t\t\t} @else if (button.title) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-table__cell-btn-label\">{{ button.title | unwrapAsync }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t} @else {\n\t\t<span class=\"hub-table__cell-value\">{{ property }}</span>\n\t}\n</ng-template>\n", styles: [":root,:host{--hub-table-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-table-border-radius: var(--hub-ref-radius-md, .375rem);--hub-table-border-width: var(--hub-ref-border-width, 1px);--hub-table-row-divider-color: var(--hub-table-border-color);--hub-table-container-max-block-size: none;--hub-table-container-overflow: auto;--hub-table-head-sticky-top: 0;--hub-table-container-gap: var(--hub-ref-space-3, 1rem);--hub-table-top-bar-gap: var(--hub-ref-space-3, 1rem);--hub-table-top-bar-justify-content: end;--hub-table-top-bar-align-items: center;--hub-table-top-bar-wrap: wrap;--hub-table-batch-actions-gap: var(--hub-ref-space-2, .5rem);--hub-table-batch-actions-margin-inline-end: auto;--hub-table-bottom-bar-gap: var(--hub-ref-space-3, 1rem);--hub-table-bottom-bar-justify-content: space-around;--hub-table-bottom-bar-align-items: center;--hub-table-bottom-bar-wrap: wrap;--hub-table-bottom-bar-paginator-order: 1;--hub-table-bottom-bar-settings-order: 2;--hub-table-bottom-bar-info-order: 3;--hub-table-bottom-bar-paginator-flex: 0 0 auto;--hub-table-bottom-bar-settings-flex: 0 0 auto;--hub-table-bottom-bar-info-flex: 0 0 auto;--hub-table-icon-color: currentColor;--hub-table-icon-size: 1em;--hub-table-icon-sort: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l128 128c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l128-128zm0 429.3l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128c-12.5 12.5-32.8 12.5-45.3 0z'/%3E%3C/svg%3E\");--hub-table-icon-sort-up: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3C/svg%3E\");--hub-table-icon-sort-down: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H32c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E\");--hub-table-icon-caret-up: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3C/svg%3E\");--hub-table-icon-caret-down: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H32c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E\");--hub-table-icon-search: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E\");--hub-table-icon-filter: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z'/%3E%3C/svg%3E\");--hub-table-icon-eraser: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M290.7 57.4L57.4 290.7c-25 25-25 65.5 0 90.5l80 80c12 12 28.3 18.7 45.3 18.7H288h9.4H512c17.7 0 32-14.3 32-32s-14.3-32-32-32H387.9L518.6 285.3c25-25 25-65.5 0-90.5L381.3 57.4c-25-25-65.5-25-90.5 0zM297.4 416H288l-105.4 0-80-80L227.3 211.3 364.7 348.7 297.4 416z'/%3E%3C/svg%3E\");--hub-table-icon-info: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-up: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-down: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5 12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-left: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E\");--hub-table-icon-chevron-right: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 105.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E\");--hub-table-icon-angle-left: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E\");--hub-table-icon-angle-right: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E\");--hub-table-icon-angle-double-left: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z'/%3E%3C/svg%3E\");--hub-table-icon-angle-double-right: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0z'/%3E%3C/svg%3E\");--hub-table-icon-ellipsis-v: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 512'%3E%3Cpath d='M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z'/%3E%3C/svg%3E\");--hub-table-icon-trash: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z'/%3E%3C/svg%3E\");--hub-table-icon-plus: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E\");--hub-table-accent-bg: transparent;--hub-table-active-bg: var(--hub-sys-state-active-bg, rgba(0, 0, 0, .1));--hub-table-active-color: var(--hub-sys-text-primary, #212529);--hub-table-accent: var(--hub-sys-color-primary, #0d6efd);--hub-table-accent-emphasis: color-mix(in oklch, var(--hub-table-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-table-accent-subtle: color-mix(in oklch, var(--hub-table-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-table-accent-on: oklch(from var(--hub-table-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-table-selected-bg: var(--hub-table-accent-subtle);--hub-table-selected-color: var(--hub-sys-text-primary, #212529);--hub-table-selected-bar-width: 0;--hub-table-selected-bar-color: var(--hub-table-accent);--hub-table-head-bg: var(--hub-table-bg, var(--hub-ref-color-white, #fff));--hub-table-head-color: var(--hub-table-color, var(--hub-sys-text-primary, #212529));--hub-table-head-font-size: inherit;--hub-table-head-font-weight: bold;--hub-table-head-padding-x: var(--hub-table-cell-padding-x);--hub-table-head-padding-y: var(--hub-table-cell-padding-y);--hub-table-head-position: sticky;--hub-table-bg-state: initial;--hub-table-bg-type: initial;--hub-table-cell-padding-x: var(--hub-ref-space-3, 1rem);--hub-table-cell-padding-x-sm: var(--hub-ref-space-2, .5rem);--hub-table-cell-padding-y: var(--hub-ref-space-2, .5rem);--hub-table-cell-padding-y-sm: var(--hub-ref-space-1, .25rem);--hub-table-cell-vertical-align: middle;--hub-table-color-state: initial;--hub-table-color-type: initial;--hub-table-group-separator-color: var(--hub-sys-border-color-default, #dee2e6);--hub-table-search-button-bg: var(--hub-table-container-bg, var(--hub-ref-color-white, #fff));--hub-table-search-button-border-color: var(--hub-table-border-color);--hub-table-search-button-color: var(--hub-table-container-color, var(--hub-sys-text-primary, #212529));--hub-table-search-button-min-width: 2.75rem;--hub-table-search-input-bg: var(--hub-table-container-bg, var(--hub-ref-color-white, #fff));--hub-table-search-input-border-color: var(--hub-table-border-color);--hub-table-search-input-color: var(--hub-table-container-color, var(--hub-sys-text-primary, #212529));--hub-table-search-border-width: var(--hub-table-border-width);--hub-table-search-border-radius: var(--hub-table-border-radius);--hub-table-search-input-padding-x: .75rem;--hub-table-search-input-padding-y: .375rem;--hub-table-search-input-font-size: 1rem;--hub-table-filter-button-active-bg: color-mix(in oklch, var(--hub-sys-color-success, #198754) 10%, transparent);--hub-table-filter-button-active-border-color: var(--hub-sys-color-success, #198754);--hub-table-filter-button-hover-bg: rgba(0, 0, 0, .05);--hub-table-filter-button-icon-active-color: var(--hub-sys-color-success, #198754);--hub-table-filter-button-icon-color: var(--hub-sys-text-muted, #6c757d);--hub-table-filter-button-gap: var(--hub-ref-space-2, .5rem);--hub-table-filter-button-padding-x: .75rem;--hub-table-filter-button-padding-y: .375rem;--hub-table-filter-button-border-width: 1px;--hub-table-filter-button-border-color: transparent;--hub-table-filter-button-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-table-filter-button-transition: all .2s ease;--hub-table-filter-count-bg: var(--hub-sys-color-success, #198754);--hub-table-filter-count-color: var(--hub-ref-color-white, #fff);--hub-table-filter-count-size: 1.25rem;--hub-table-filter-count-padding-x: .4em;--hub-table-filter-count-font-size: .7rem;--hub-table-filter-count-font-weight: var(--hub-ref-font-weight-bold, 700);--hub-table-filter-count-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-table-batch-actions-btn-icon-gap: var(--hub-ref-space-1, .25rem);--hub-table-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-table-hover-color: var(--hub-sys-text-primary, #212529);--hub-table-striped-bg: var(--hub-sys-state-striped-bg, rgba(0, 0, 0, .05));--hub-table-striped-color: var(--hub-sys-text-primary, #212529)}:host{display:flex;flex-direction:column;gap:var(--hub-table-container-gap);min-width:0;color:var(--hub-table-container-color, var(--hub-sys-text-primary, #212529))}:host .hub-table__top-bar{display:flex;justify-content:var(--hub-table-top-bar-justify-content);align-items:var(--hub-table-top-bar-align-items);flex-wrap:var(--hub-table-top-bar-wrap);gap:var(--hub-table-top-bar-gap)}:host .hub-table__batch-actions{display:flex;align-items:center;gap:var(--hub-table-batch-actions-gap);margin-inline-end:var(--hub-table-batch-actions-margin-inline-end)}:host .hub-table__batch-actions-btn-icon{margin-right:var(--hub-table-batch-actions-btn-icon-gap)}:host .hub-table__batch-actions-btn--default,:host .hub-table__cell-btn--default{border:var(--hub-table-border-width) solid var(--hub-table-border-color);border-radius:var(--hub-table-border-radius)}:host .hub-table__search{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:end}:host .hub-table__search-input{position:relative;flex:1 1 auto;width:1%;min-width:0;display:block;width:100%;padding:var(--hub-table-search-input-padding-y) var(--hub-table-search-input-padding-x);font-size:var(--hub-table-search-input-font-size);font-weight:var(--hub-ref-font-weight-base, 400);line-height:var(--hub-ref-line-height-base, 1.5);color:var(--hub-table-search-input-color);appearance:none;background-color:var(--hub-table-search-input-bg);background-clip:padding-box;border:var(--hub-table-search-border-width) solid var(--hub-table-search-input-border-color);border-radius:var(--hub-table-search-border-radius) 0 0 var(--hub-table-search-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}:host .hub-table__search-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hub-table-search-button-min-width);color:var(--hub-table-search-button-color);background-color:var(--hub-table-search-button-bg);border-color:var(--hub-table-search-button-border-color);border-radius:0 var(--hub-table-search-border-radius) var(--hub-table-search-border-radius) 0}:host .hub-table__bottom-bar{display:flex;justify-content:var(--hub-table-bottom-bar-justify-content);align-items:var(--hub-table-bottom-bar-align-items);flex-wrap:var(--hub-table-bottom-bar-wrap);gap:var(--hub-table-bottom-bar-gap)}:host .hub-table__bottom-bar-paginator{order:var(--hub-table-bottom-bar-paginator-order);flex:var(--hub-table-bottom-bar-paginator-flex)}:host .hub-table__bottom-bar-settings{order:var(--hub-table-bottom-bar-settings-order);flex:var(--hub-table-bottom-bar-settings-flex);margin:0}:host .hub-table__bottom-bar-info{order:var(--hub-table-bottom-bar-info-order);flex:var(--hub-table-bottom-bar-info-flex);margin:0}:host .hub-table__paginator{overflow:auto;margin:0}:host .hub-table__filter-button{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--hub-table-filter-button-gap);padding:var(--hub-table-filter-button-padding-y) var(--hub-table-filter-button-padding-x);cursor:pointer;border:var(--hub-table-filter-button-border-width) solid var(--hub-table-filter-button-border-color);border-radius:var(--hub-table-filter-button-border-radius);transition:var(--hub-table-filter-button-transition)}:host .hub-table__filter-button:hover{background-color:var(--hub-table-filter-button-hover-bg)}:host .hub-table__filter-button--active{background-color:var(--hub-table-filter-button-active-bg);border-color:var(--hub-table-filter-button-active-border-color)}:host .hub-table__filter-button--active .hub-table__filter-button-icon{color:var(--hub-table-filter-button-icon-active-color)}:host .hub-table__filter-button-icon{transition:color .2s ease;color:var(--hub-table-filter-button-icon-color)}:host .hub-table__filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hub-table-filter-count-size);height:var(--hub-table-filter-count-size);padding:0 var(--hub-table-filter-count-padding-x);font-size:var(--hub-table-filter-count-font-size);font-weight:var(--hub-table-filter-count-font-weight);line-height:1;color:var(--hub-table-filter-count-color);text-align:center;white-space:nowrap;background-color:var(--hub-table-filter-count-bg);border-radius:var(--hub-table-filter-count-border-radius);animation:badge-appear .2s ease}:host .hub-table__no-data-icon{margin-right:var(--hub-ref-space-4, 1.5rem)}:host .hub-table__header-icon{margin-right:var(--hub-ref-space-2, .5rem)}:host .hub-table__icon{display:inline-block;width:var(--hub-table-icon-size);height:var(--hub-table-icon-size);background-color:var(--hub-table-icon-color);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;vertical-align:middle}:host .hub-table__icon--xs{--hub-table-icon-size: .75em}:host .hub-table__icon--sm{--hub-table-icon-size: .875em}:host .hub-table__icon--lg{--hub-table-icon-size: 1.33em}:host .hub-table__icon--2x{--hub-table-icon-size: 2em}:host .hub-table__icon--3x{--hub-table-icon-size: 3em}:host .hub-table__icon--4x{--hub-table-icon-size: 4em}:host .hub-table__icon--5x{--hub-table-icon-size: 5em}:host .hub-table__icon--search{-webkit-mask-image:var(--hub-table-icon-search);mask-image:var(--hub-table-icon-search)}:host .hub-table__icon--filter{-webkit-mask-image:var(--hub-table-icon-filter);mask-image:var(--hub-table-icon-filter)}:host .hub-table__icon--eraser{-webkit-mask-image:var(--hub-table-icon-eraser);mask-image:var(--hub-table-icon-eraser)}:host .hub-table__icon--info{-webkit-mask-image:var(--hub-table-icon-info);mask-image:var(--hub-table-icon-info);margin-right:var(--hub-ref-space-4, 1.5rem)}:host .hub-table__icon--sort{-webkit-mask-image:var(--hub-table-icon-sort);mask-image:var(--hub-table-icon-sort)}:host .hub-table__icon--sort-up{-webkit-mask-image:var(--hub-table-icon-sort-up);mask-image:var(--hub-table-icon-sort-up)}:host .hub-table__icon--sort-down{-webkit-mask-image:var(--hub-table-icon-sort-down);mask-image:var(--hub-table-icon-sort-down)}:host .hub-table__icon--caret-up{-webkit-mask-image:var(--hub-table-icon-caret-up);mask-image:var(--hub-table-icon-caret-up)}:host .hub-table__icon--caret-down{-webkit-mask-image:var(--hub-table-icon-caret-down);mask-image:var(--hub-table-icon-caret-down)}:host .hub-table__icon--chevron-up{-webkit-mask-image:var(--hub-table-icon-chevron-up);mask-image:var(--hub-table-icon-chevron-up)}:host .hub-table__icon--chevron-down{-webkit-mask-image:var(--hub-table-icon-chevron-down);mask-image:var(--hub-table-icon-chevron-down)}:host .hub-table__icon--chevron-left{-webkit-mask-image:var(--hub-table-icon-chevron-left);mask-image:var(--hub-table-icon-chevron-left)}:host .hub-table__icon--chevron-right{-webkit-mask-image:var(--hub-table-icon-chevron-right);mask-image:var(--hub-table-icon-chevron-right)}:host .hub-table__icon--angle-left{-webkit-mask-image:var(--hub-table-icon-angle-left);mask-image:var(--hub-table-icon-angle-left)}:host .hub-table__icon--angle-right{-webkit-mask-image:var(--hub-table-icon-angle-right);mask-image:var(--hub-table-icon-angle-right)}:host .hub-table__icon--angle-double-left{-webkit-mask-image:var(--hub-table-icon-angle-double-left);mask-image:var(--hub-table-icon-angle-double-left)}:host .hub-table__icon--angle-double-right{-webkit-mask-image:var(--hub-table-icon-angle-double-right);mask-image:var(--hub-table-icon-angle-double-right)}:host .hub-table__icon--ellipsis-v{-webkit-mask-image:var(--hub-table-icon-ellipsis-v);mask-image:var(--hub-table-icon-ellipsis-v)}:host .hub-table__icon--trash{-webkit-mask-image:var(--hub-table-icon-trash);mask-image:var(--hub-table-icon-trash);margin-right:var(--hub-ref-space-2, .5rem)}:host .hub-table__icon--plus{-webkit-mask-image:var(--hub-table-icon-plus);mask-image:var(--hub-table-icon-plus);margin-right:var(--hub-ref-space-2, .5rem)}:host .hub-table__container{overflow:var(--hub-table-container-overflow, auto);max-block-size:var(--hub-table-container-max-block-size);background-color:var(--hub-table-container-bg, var(--hub-ref-color-white, #fff));border:var(--hub-table-border-width) solid var(--hub-table-border-color);border-radius:var(--hub-table-border-radius);color:var(--hub-table-container-color, var(--hub-sys-text-primary, #212529))}:host .hub-table__element{position:relative;width:100%;border-collapse:collapse;border-spacing:0;vertical-align:var(--hub-table-cell-vertical-align);border-color:var(--hub-table-border-color);background-color:var(--hub-table-bg, var(--hub-ref-color-white, #fff));color:var(--hub-table-color, var(--hub-sys-text-primary, #212529))}:host .hub-table__element .sticky-start{background-color:var(--hub-table-bg, var(--hub-ref-color-white, #fff));left:0;position:sticky;z-index:9}:host .hub-table__element .sticky-end{background-color:var(--hub-table-bg, var(--hub-ref-color-white, #fff));right:0;position:sticky;z-index:9}:host .hub-table__element .clickable-item{cursor:pointer}:host .hub-table__element>:not(caption)>*>*{padding:var(--hub-table-cell-padding-y) var(--hub-table-cell-padding-x);vertical-align:var(--hub-table-cell-vertical-align);color:var(--hub-table-color-state, var(--hub-table-color-type, var(--hub-table-color, var(--hub-sys-text-primary, #212529))));background-color:var(--hub-table-bg, var(--hub-ref-color-white, #fff));border-bottom-style:solid;border-bottom-color:var(--hub-table-row-divider-color);border-bottom-width:var(--hub-table-border-width);box-shadow:inset var(--hub-table-cell-bar-width, 0) 0 0 0 var(--hub-table-cell-bar-color, transparent),inset 0 0 0 9999px var(--hub-table-bg-state, var(--hub-table-bg-type, var(--hub-table-accent-bg)))}:host .hub-table__element>tbody{vertical-align:inherit}:host .hub-table__element>thead{vertical-align:bottom}:host .hub-table__element>thead>tr>*{background-color:var(--hub-table-head-bg);color:var(--hub-table-head-color)}:host .hub-table__element>thead .hub-table__header-cell{padding:var(--hub-table-head-padding-y) var(--hub-table-head-padding-x)}:host .hub-table__element>thead .hub-table__header-title-text{font-size:var(--hub-table-head-font-size);font-weight:var(--hub-table-head-font-weight)}:host .hub-table__scrollable thead{position:sticky;top:var(--hub-table-head-sticky-top);z-index:10}:host.hub-table--sticky-header{--hub-table-container-overflow: visible}:host.hub-table--sticky-header .hub-table__element>thead{position:var(--hub-table-head-position, sticky);top:var(--hub-table-head-sticky-top, 0);z-index:10}:host .hub-table__group-divider{border-top:calc(var(--hub-table-border-width) * 2) solid var(--hub-table-group-separator-color)}:host .hub-table__sm>:not(caption)>*>*{padding:var(--hub-table-cell-padding-y-sm) var(--hub-table-cell-padding-x-sm)}:host .hub-table__bordered>:not(caption)>*{border-style:solid;border-width:var(--hub-table-border-width) 0}:host .hub-table__bordered>:not(caption)>*>*{border-style:solid;border-width:0 var(--hub-table-border-width)}:host .hub-table__borderless>:not(caption)>*>*{border-bottom-width:0}:host .hub-table__borderless>:not(:first-child){border-top-width:0}:host .hub-table__striped-odd>tbody>tr:nth-of-type(odd)>*{color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__striped-even>tbody>tr:nth-of-type(2n)>*{color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__striped-columns-odd>:not(caption)>tr>:nth-child(odd){color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__striped-columns-even>:not(caption)>tr>:nth-child(2n){color:var(--hub-table-striped-color);background-color:var(--hub-table-striped-bg)}:host .hub-table__active{--hub-table-color-state: var(--hub-table-active-color);--hub-table-bg-state: var(--hub-table-active-bg)}:host .hub-table__hover>tbody>tr:hover>*{--hub-table-color-state: var(--hub-table-hover-color);--hub-table-bg-state: var(--hub-table-hover-bg)}:host .hub-table__body-row--selected>*,:host .hub-table__row--selected>*,:host .hub-table__hover>tbody>tr.hub-table__body-row--selected:hover>*,:host .hub-table__hover>tbody>tr.hub-table__row--selected:hover>*{--hub-table-color-state: var(--hub-table-selected-color);--hub-table-bg-state: var(--hub-table-selected-bg)}:host .hub-table__body-row--selected>*:first-child,:host .hub-table__row--selected>*:first-child{--hub-table-cell-bar-width: var(--hub-table-selected-bar-width);--hub-table-cell-bar-color: var(--hub-table-selected-bar-color, var(--hub-table-accent))}:host .hub-table__selectable>tbody>tr.hub-table__body-row{cursor:pointer}:host .hub-table__responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.hub-table__primary{--hub-table-accent: var(--hub-sys-color-primary)}.hub-table__secondary{--hub-table-accent: var(--hub-sys-color-secondary)}.hub-table__success{--hub-table-accent: var(--hub-sys-color-success)}.hub-table__danger{--hub-table-accent: var(--hub-sys-color-danger)}.hub-table__warning{--hub-table-accent: var(--hub-sys-color-warning)}.hub-table__info{--hub-table-accent: var(--hub-sys-color-info)}.hub-table__neutral{--hub-table-accent: var(--hub-sys-color-neutral)}.hub-table__light{--hub-table-accent: var(--hub-sys-color-light)}.hub-table__dark{--hub-table-accent: var(--hub-sys-color-dark)}:host.hub-table--rtl{direction:rtl}:host.hub-table--rtl .hub-table__top-bar{direction:ltr}:host.hub-table--rtl .hub-table__batch-actions{order:2;flex-direction:row-reverse;margin-inline-end:0;margin-inline-start:auto}:host.hub-table--rtl .hub-table__batch-actions-btn-icon{margin-right:0;margin-left:var(--hub-table-batch-actions-btn-icon-gap)}:host.hub-table--rtl .hub-table__search{order:1;margin-inline-end:auto;margin-inline-start:0;direction:ltr}:host.hub-table--rtl .hub-table__search-input{direction:ltr;text-align:right;border-radius:0 var(--hub-table-search-border-radius) var(--hub-table-search-border-radius) 0}:host.hub-table--rtl .hub-table__search-button{border-radius:var(--hub-table-search-border-radius) 0 0 var(--hub-table-search-border-radius)}:host.hub-table--rtl .hub-table__no-data-icon{margin-right:0;margin-left:var(--hub-ref-space-4, 1.5rem)}:host.hub-table--rtl .hub-table__header-icon{margin-right:0;margin-left:var(--hub-ref-space-2, .5rem)}:host.hub-table--rtl .hub-table__body-row--selected>*:first-child,:host.hub-table--rtl .hub-table__row--selected>*:first-child{--hub-table-cell-bar-width: calc(-1 * var(--hub-table-selected-bar-width));--hub-table-cell-bar-color: var(--hub-table-selected-bar-color, var(--hub-table-accent))}.caption-top{caption-side:top}@media(max-width:576px){.hub-table__responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:768px){.hub-table__responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:992px){.hub-table__responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:1200px){.hub-table__responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width:1400px){.hub-table__responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@keyframes badge-appear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n"] }]
|
|
5529
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headers", required: false }] }, { type: i0.Output, args: ["headersChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], perPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "perPageOptions", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], perPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "perPage", required: false }] }, { type: i0.Output, args: ["perPageChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }, { type: i0.Output, args: ["totalItemsChange"] }], ordination: [{ type: i0.Input, args: [{ isSignal: true, alias: "ordination", required: false }] }, { type: i0.Output, args: ["ordinationChange"] }], paginate: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginate", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }, { type: i0.Output, args: ["errorChange"] }], loadingComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingComponent", required: false }] }], errorComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorComponent", required: false }] }], noResultsComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsComponent", required: false }] }], paginationPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationPosition", required: false }] }], paginationInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationInfo", required: false }] }], stickyActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyActions", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], batchActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "batchActions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }, { type: i0.Output, args: ["searchTermChange"] }], searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], compareFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareFn", required: false }] }], clickFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickFn", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], templateRow: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PaginableTableRowDirective), { ...{
|
|
5487
5530
|
read: TemplateRef
|
|
5488
5531
|
}, isSignal: true }] }], headerTpts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PaginableTableHeaderDirective), { isSignal: true }] }], templateCells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PaginableTableCellDirective), { isSignal: true }] }], noResultsTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PaginableNoResultsDirective), { ...{
|
|
5489
5532
|
read: TemplateRef
|