ng-hub-ui-paginable 22.1.0 → 22.1.2

package/fesm2022/ng-hub-ui-paginable.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Optional, Inject, Injectable, inject, signal, provideAppInitializer, makeEnvironmentProviders, NgModule, ChangeDetectorRef, ViewContainerRef, ElementRef, input, viewChild, output, HostBinding, ChangeDetectionStrategy, Component, Input, Directive, effect, computed, model, ViewEncapsulation, contentChild, TemplateRef, HostListener, forwardRef, contentChildren, viewChildren, Output } from '@angular/core';
-import { mergeDeep, HUB_TRANSLATION_CONFIG, HubTranslationService, OverlayService, generateUniqueId, TranslatePipe, UcfirstPipe, getValue, UnwrapAsyncPipe, debouncedSignal, IsObservablePipe, GetPipe } from 'ng-hub-ui-utils';
-export { HubTranslationService } from 'ng-hub-ui-utils';
+import { InjectionToken, Optional, Inject, Injectable, inject, signal, provideAppInitializer, makeEnvironmentProviders, NgModule, ChangeDetectorRef, ViewContainerRef, ElementRef, input, viewChild, output, HostBinding, ChangeDetectionStrategy, Component, Input, Directive, effect, computed, model, ViewEncapsulation, DestroyRef, contentChild, TemplateRef, HostListener, forwardRef, contentChildren, viewChildren, Output } from '@angular/core';
+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';
+export { HubDragDropService as HubListDragService, HubTranslationService, TooltipDirective } from 'ng-hub-ui-utils';
 import { NgClass, NgTemplateOutlet, NgComponentOutlet, UpperCasePipe, AsyncPipe, DOCUMENT } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormBuilder, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR, UntypedFormBuilder, FormGroup } from '@angular/forms';
@@ -21,6 +21,11 @@ const locale$a = {
         ROWS_PER_PAGE: 'rows per page',
         SHOWING_X_OF_Y_ROWS: 'Showing {{ amount }} of {{ total }} rows',
         NO_RESULTS_FOUND: 'No results found',
+        DRAG_SORTABLE_ITEM: 'sortable item',
+        DRAG_PICKED_UP: 'Item picked up. Position {{ index }} of {{ total }}',
+        DRAG_MOVED_TO: 'Moved to position {{ index }} of {{ total }}',
+        DRAG_DROPPED_AT: 'Dropped at position {{ index }} of {{ total }}',
+        DRAG_CANCELLED: 'Reorder cancelled',
         BATCH_ACTIONS: 'Batch actions',
         APPLY: 'Apply',
         FIRST: 'first',
@@ -100,6 +105,11 @@ const locale$9 = {
         ROWS_PER_PAGE: 'Filas per pachina',
         SHOWING_X_OF_Y_ROWS: 'Mostrando {{ amount }} de {{ total }} filas',
         NO_RESULTS_FOUND: 'No s\'han trobau resultaus',
+        DRAG_SORTABLE_ITEM: 'elemento ordenable',
+        DRAG_PICKED_UP: 'Elemento agarrau. Posición {{ index }} de {{ total }}',
+        DRAG_MOVED_TO: 'Movíu a la posición {{ index }} de {{ total }}',
+        DRAG_DROPPED_AT: 'Soltau en a posición {{ index }} de {{ total }}',
+        DRAG_CANCELLED: 'Reordenación cancelada',
         BATCH_ACTIONS: 'Accions en lot',
         APPLY: 'Aplicar',
         ERROR_OCURRED: 'Ha ocurriu un error obtenindo os datos.',
@@ -172,6 +182,11 @@ const locale$8 = {
         ROWS_PER_PAGE: 'الصفوف لكل صفحة',
         SHOWING_X_OF_Y_ROWS: 'عرض {{ amount }} من {{ total }} صف',
         NO_RESULTS_FOUND: 'لم يتم العثور على نتائج',
+        DRAG_SORTABLE_ITEM: 'عنصر قابل للترتيب',
+        DRAG_PICKED_UP: 'تم التقاط العنصر. الموضع {{ index }} من {{ total }}',
+        DRAG_MOVED_TO: 'تم النقل إلى الموضع {{ index }} من {{ total }}',
+        DRAG_DROPPED_AT: 'تم الإفلات في الموضع {{ index }} من {{ total }}',
+        DRAG_CANCELLED: 'تم إلغاء إعادة الترتيب',
         BATCH_ACTIONS: 'إجراءات جماعية',
         APPLY: 'تطبيق',
         ERROR_OCURRED: 'حدث خطأ أثناء جلب البيانات.',
@@ -244,6 +259,11 @@ const locale$7 = {
         ROWS_PER_PAGE: 'Fileres por páxina',
         SHOWING_X_OF_Y_ROWS: 'Amosando {{ amount }} de {{ total }} fileres',
         NO_RESULTS_FOUND: 'Nun s\'atoparon resultaos',
+        DRAG_SORTABLE_ITEM: 'elementu ordenable',
+        DRAG_PICKED_UP: 'Elementu coyíu. Posición {{ index }} de {{ total }}',
+        DRAG_MOVED_TO: 'Movíu a la posición {{ index }} de {{ total }}',
+        DRAG_DROPPED_AT: 'Soltáu na posición {{ index }} de {{ total }}',
+        DRAG_CANCELLED: 'Reordenamientu encaboxáu',
         BATCH_ACTIONS: 'Aiciones por lotes',
         APPLY: 'Aplicar',
         ERROR_OCURRED: 'Produciuse un error al obtener los datos.',
@@ -316,6 +336,11 @@ const locale$6 = {
         ROWS_PER_PAGE: 'Files per pàgina',
         SHOWING_X_OF_Y_ROWS: 'Mostrant {{ amount }} de {{ total }} files',
         NO_RESULTS_FOUND: 'No s\'han trobat resultats',
+        DRAG_SORTABLE_ITEM: 'element ordenable',
+        DRAG_PICKED_UP: 'Element agafat. Posició {{ index }} de {{ total }}',
+        DRAG_MOVED_TO: 'Mogut a la posició {{ index }} de {{ total }}',
+        DRAG_DROPPED_AT: 'Deixat a la posició {{ index }} de {{ total }}',
+        DRAG_CANCELLED: 'Reordenació cancel·lada',
         BATCH_ACTIONS: 'Accions en lot',
         APPLY: 'Aplica',
         ERROR_OCURRED: 'S\'ha produït un error obtenint les dades.',
@@ -388,6 +413,11 @@ const locale$5 = {
         ROWS_PER_PAGE: 'Zeilen pro Seite',
         SHOWING_X_OF_Y_ROWS: 'Zeige {{ amount }} von {{ total }} Zeilen',
         NO_RESULTS_FOUND: 'Keine Ergebnisse gefunden',
+        DRAG_SORTABLE_ITEM: 'sortierbares Element',
+        DRAG_PICKED_UP: 'Element aufgenommen. Position {{ index }} von {{ total }}',
+        DRAG_MOVED_TO: 'Verschoben auf Position {{ index }} von {{ total }}',
+        DRAG_DROPPED_AT: 'Abgelegt an Position {{ index }} von {{ total }}',
+        DRAG_CANCELLED: 'Neuanordnung abgebrochen',
         BATCH_ACTIONS: 'Sammelaktionen',
         APPLY: 'Anwenden',
         ERROR_OCURRED: 'Beim Abrufen der Daten ist ein Fehler aufgetreten.',
@@ -460,6 +490,11 @@ const locale$4 = {
         ROWS_PER_PAGE: 'Filas por página',
         SHOWING_X_OF_Y_ROWS: 'Mostrando {{ amount }} de {{ total }} resultados',
         NO_RESULTS_FOUND: 'No se han encontrado resultados',
+        DRAG_SORTABLE_ITEM: 'elemento ordenable',
+        DRAG_PICKED_UP: 'Elemento tomado. Posición {{ index }} de {{ total }}',
+        DRAG_MOVED_TO: 'Movido a la posición {{ index }} de {{ total }}',
+        DRAG_DROPPED_AT: 'Soltado en la posición {{ index }} de {{ total }}',
+        DRAG_CANCELLED: 'Reordenación cancelada',
         BATCH_ACTIONS: 'Acciones en lote',
         APPLY: 'Aplicar',
         FIRST: 'primera',
@@ -539,6 +574,11 @@ const locale$3 = {
         ROWS_PER_PAGE: 'Errenkadak orrialdeko',
         SHOWING_X_OF_Y_ROWS: '{{ total }} errenkadetatik {{ amount }} erakusten',
         NO_RESULTS_FOUND: 'Ez da emaitzarik aurkitu',
+        DRAG_SORTABLE_ITEM: 'elementu ordenagarria',
+        DRAG_PICKED_UP: 'Elementua hartuta. {{ total }}-tik {{ index }}. posizioa',
+        DRAG_MOVED_TO: '{{ total }}-tik {{ index }}. posiziora mugitua',
+        DRAG_DROPPED_AT: '{{ total }}-tik {{ index }}. posizioan utzita',
+        DRAG_CANCELLED: 'Berrantolaketa bertan behera utzita',
         BATCH_ACTIONS: 'Sortako ekintzak',
         APPLY: 'Aplikatu',
         ERROR_OCURRED: 'Errorea gertatu da datuak lortzean.',
@@ -611,6 +651,11 @@ const locale$2 = {
         ROWS_PER_PAGE: 'Filas por páxina',
         SHOWING_X_OF_Y_ROWS: 'Mostrando {{ amount }} de {{ total }} filas',
         NO_RESULTS_FOUND: 'Non se atoparon resultados',
+        DRAG_SORTABLE_ITEM: 'elemento ordenable',
+        DRAG_PICKED_UP: 'Elemento collido. Posición {{ index }} de {{ total }}',
+        DRAG_MOVED_TO: 'Movido á posición {{ index }} de {{ total }}',
+        DRAG_DROPPED_AT: 'Soltado na posición {{ index }} de {{ total }}',
+        DRAG_CANCELLED: 'Reordenación cancelada',
         BATCH_ACTIONS: 'Accións en lote',
         APPLY: 'Aplicar',
         ERROR_OCURRED: 'Produciuse un erro ao obter os datos.',
@@ -683,6 +728,11 @@ const locale$1 = {
         ROWS_PER_PAGE: 'Строк на страницу',
         SHOWING_X_OF_Y_ROWS: 'Показано {{ amount }} из {{ total }} строк',
         NO_RESULTS_FOUND: 'Результаты не найдены',
+        DRAG_SORTABLE_ITEM: 'сортируемый элемент',
+        DRAG_PICKED_UP: 'Элемент взят. Позиция {{ index }} из {{ total }}',
+        DRAG_MOVED_TO: 'Перемещено на позицию {{ index }} из {{ total }}',
+        DRAG_DROPPED_AT: 'Помещено на позицию {{ index }} из {{ total }}',
+        DRAG_CANCELLED: 'Переупорядочивание отменено',
         BATCH_ACTIONS: 'Пакетные действия',
         APPLY: 'Применить',
         ERROR_OCURRED: 'Произошла ошибка при получении данных.',
@@ -755,6 +805,11 @@ const locale = {
         ROWS_PER_PAGE: '每页行数',
         SHOWING_X_OF_Y_ROWS: '显示 {{ amount }} / {{ total }} 行',
         NO_RESULTS_FOUND: '未找到结果',
+        DRAG_SORTABLE_ITEM: '可排序项',
+        DRAG_PICKED_UP: '已拾取项目。第 {{ index }} / {{ total }} 项',
+        DRAG_MOVED_TO: '已移动到第 {{ index }} / {{ total }} 项',
+        DRAG_DROPPED_AT: '已放置到第 {{ index }} / {{ total }} 项',
+        DRAG_CANCELLED: '已取消重新排序',
         BATCH_ACTIONS: '批量操作',
         APPLY: '应用',
         ERROR_OCURRED: '获取数据时出错。',
@@ -1257,13 +1312,13 @@ class DropdownComponent {
         this._overlayRef?.dispose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: DropdownComponent, isStandalone: true, selector: "hub-dropdown, hub-ui-dropdown", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "open", close: "close" }, host: { properties: { "id": "this.id" }, classAttribute: "dropdown" }, viewQueries: [{ propertyName: "dropdownContent", first: true, predicate: ["dropdownContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<button class=\"dropdown__toggle btn\" [class.dropdown__toggle--open]=\"isOpened()\" type=\"button\" [attr.aria-expanded]=\"isOpened()\" (click)=\"toggle()\">\n\t<ng-content select=\".button\"></ng-content>\n</button>\n\n<ng-template #dropdownContent>\n\t<ul class=\"dropdown__menu dropdown-menu show\" [attr.aria-hidden]=\"!isOpened()\">\n\t\t<ng-content select=\".content\"></ng-content>\n\t</ul>\n</ng-template>\n", styles: [":host{display:block;position:relative}::ng-deep .cdk-overlay-pane .dropdown-menu{position:static!important;display:block;min-width:160px;z-index:1000}::ng-deep .cdk-overlay-transparent-backdrop{background:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: DropdownComponent, isStandalone: true, selector: "hub-dropdown, hub-ui-dropdown", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "open", close: "close" }, host: { properties: { "id": "this.id" }, classAttribute: "dropdown" }, viewQueries: [{ propertyName: "dropdownContent", first: true, predicate: ["dropdownContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<button class=\"dropdown__toggle btn\" [class.dropdown__toggle--open]=\"isOpened()\" type=\"button\" [attr.aria-expanded]=\"isOpened()\" (click)=\"toggle()\">\n\t<ng-content select=\".button\"></ng-content>\n</button>\n\n<ng-template #dropdownContent>\n\t<ul class=\"dropdown__menu dropdown-menu show\" [attr.aria-hidden]=\"!isOpened()\">\n\t\t<ng-content select=\".content\"></ng-content>\n\t</ul>\n</ng-template>\n", styles: [":host{display:block;position:relative}::ng-deep .cdk-overlay-pane .dropdown-menu{position:static!important;display:block;min-width:160px;z-index:var(--hub-sys-zindex-dropdown, 1000)}::ng-deep .cdk-overlay-transparent-backdrop{background:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hub-dropdown, hub-ui-dropdown', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'dropdown'
-                    }, template: "<button class=\"dropdown__toggle btn\" [class.dropdown__toggle--open]=\"isOpened()\" type=\"button\" [attr.aria-expanded]=\"isOpened()\" (click)=\"toggle()\">\n\t<ng-content select=\".button\"></ng-content>\n</button>\n\n<ng-template #dropdownContent>\n\t<ul class=\"dropdown__menu dropdown-menu show\" [attr.aria-hidden]=\"!isOpened()\">\n\t\t<ng-content select=\".content\"></ng-content>\n\t</ul>\n</ng-template>\n", styles: [":host{display:block;position:relative}::ng-deep .cdk-overlay-pane .dropdown-menu{position:static!important;display:block;min-width:160px;z-index:1000}::ng-deep .cdk-overlay-transparent-backdrop{background:transparent}\n"] }]
+                    }, template: "<button class=\"dropdown__toggle btn\" [class.dropdown__toggle--open]=\"isOpened()\" type=\"button\" [attr.aria-expanded]=\"isOpened()\" (click)=\"toggle()\">\n\t<ng-content select=\".button\"></ng-content>\n</button>\n\n<ng-template #dropdownContent>\n\t<ul class=\"dropdown__menu dropdown-menu show\" [attr.aria-hidden]=\"!isOpened()\">\n\t\t<ng-content select=\".content\"></ng-content>\n\t</ul>\n</ng-template>\n", styles: [":host{display:block;position:relative}::ng-deep .cdk-overlay-pane .dropdown-menu{position:static!important;display:block;min-width:160px;z-index:var(--hub-sys-zindex-dropdown, 1000)}::ng-deep .cdk-overlay-transparent-backdrop{background:transparent}\n"] }]
         }], propDecorators: { id: [{
                 type: HostBinding
             }], dropdownContent: [{ type: i0.ViewChild, args: ['dropdownContent', { isSignal: true }] }], open: [{ type: i0.Output, args: ["open"] }], close: [{ type: i0.Output, args: ["close"] }] } });
@@ -1416,6 +1471,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 args: [{ required: true }]
             }] } });
 
+/**
+ * Defines a custom placeholder template for `hub-list` drag-and-drop reordering.
+ *
+ * The placeholder is rendered at the prospective drop position while an item is being
+ * dragged. When no placeholder template is provided, the list renders a default dashed
+ * drop slot. The template receives the dragged item via the `item` context property.
+ *
+ * @example
+ * ```html
+ * <ng-template hubListDragPlaceholder let-item="item">
+ *   <div class="my-placeholder">Drop "{{ item?.name }}" here</div>
+ * </ng-template>
+ * ```
+ */
+class HubListDragPlaceholderDirective {
+    template;
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubListDragPlaceholderDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: HubListDragPlaceholderDirective, isStandalone: true, selector: "[hubListDragPlaceholder], [listDragPlaceholder]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubListDragPlaceholderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubListDragPlaceholder], [listDragPlaceholder]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+/**
+ * Defines a custom drag preview (ghost) template for `hub-list` reordering.
+ *
+ * The preview is the visual that follows the pointer while dragging. With native HTML5
+ * drag-and-drop it is rendered off-screen and passed to `dataTransfer.setDragImage`; with
+ * the Pointer Events touch fallback it is cloned into a floating element. When no preview
+ * template is provided, the browser default (native) or a clone of the row (touch) is used.
+ * The template receives the dragged item via the `item` context property.
+ *
+ * @example
+ * ```html
+ * <ng-template hubListDragPreview let-item="item">
+ *   <div class="my-ghost">{{ item?.name }}</div>
+ * </ng-template>
+ * ```
+ */
+class HubListDragPreviewDirective {
+    template;
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubListDragPreviewDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: HubListDragPreviewDirective, isStandalone: true, selector: "[hubListDragPreview], [listDragPreview]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubListDragPreviewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubListDragPreview], [listDragPreview]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
 /**
  * Captures a projected template used to render the error state of paginable
  * components. Shared by both the table and the list so consumers can provide a
@@ -1505,6 +1622,13 @@ var SelectionTypes;
     SelectionTypes["Multiple"] = "multiple";
 })(SelectionTypes || (SelectionTypes = {}));
 
+/**
+ * The list drag-and-drop coordinator is the shared native drag-and-drop service from
+ * `ng-hub-ui-utils`. It is re-exported here (under the historical `HubListDragService` name)
+ * so the list keeps a stable public surface while the implementation lives in the shared
+ * core consumed by every ng-hub-ui library.
+ */
+
 /**
  * Renders a single paginable state (loading / error / no-results) by applying a
  * fixed precedence and picking the right rendering strategy:
@@ -1601,6 +1725,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], instanceDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "instanceDefault", required: false }] }], globalDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalDefault", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: true }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }] } });
 
+/**
+ * Moves a control within a `FormArray` in place, preserving the control instance (and thus
+ * its per-item UI state such as `selected`/`collapsed`).
+ *
+ * @param form `FormArray` to mutate.
+ * @param fromIndex Current index of the control.
+ * @param toIndex Target index of the control.
+ */
+function moveControlInFormArray(form, fromIndex, toIndex) {
+    const from = clamp(fromIndex, form.length - 1);
+    const to = clamp(toIndex, form.length - 1);
+    if (from === to) {
+        return;
+    }
+    const control = form.at(from);
+    form.removeAt(from, { emitEvent: false });
+    form.insert(to, control, { emitEvent: false });
+}
+/**
+ * Transfers a control from one `FormArray` to another in place, preserving the instance.
+ *
+ * @param source Source `FormArray`.
+ * @param target Target `FormArray`.
+ * @param fromIndex Index of the control in the source array.
+ * @param toIndex Insertion index in the target array.
+ */
+function transferControlBetweenFormArrays(source, target, fromIndex, toIndex) {
+    const from = clamp(fromIndex, source.length - 1);
+    const to = clamp(toIndex, target.length);
+    if (!source.length) {
+        return;
+    }
+    const control = source.at(from);
+    source.removeAt(from, { emitEvent: false });
+    target.insert(to, control, { emitEvent: false });
+}
+
+/**
+ * The Pointer Events touch/pen drag fallback now lives in the shared `ng-hub-ui-utils`
+ * drag-and-drop core. Re-exported here so existing list imports keep working.
+ */
+
 /**
  * Component for handling pagination controls in a table or list throughout the library.
  * It provides a user interface for navigating through pages of data.
@@ -1747,6 +1913,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  */
 class ListComponent {
     #fb = inject(FormBuilder);
+    #cdr = inject(ChangeDetectorRef);
+    #host = inject(ElementRef);
+    #destroyRef = inject(DestroyRef);
+    /**
+     * Coordinator backing drag-and-drop reordering and cross-list transfers. Exposed to the
+     * template so it can read the active drag (e.g. for the placeholder context).
+     */
+    dragService = inject(HubDragDropService);
+    /** Stable identifier of this list instance, reflected as `data-hub-drag-owner` on the host. */
+    _listId = generateUniqueId(12);
     /** Resolved application-wide default state components. */
     defaults = inject(PaginableDefaultsService);
     /** Loading state indicator for the list. Consumer-driven. */
@@ -1792,6 +1968,33 @@ class ListComponent {
     ...(ngDevMode ? [{ debugName: "perPageOptions" }] : /* istanbul ignore next */ []));
     totalItems = model(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    /**
+     * Enables drag-and-drop reordering of the list items (native HTML5 drag-and-drop, with a
+     * Pointer Events fallback for touch devices).
+     */
+    sortable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortable" }] : /* istanbul ignore next */ []));
+    /**
+     * Shared drag group. Lists with the same non-null group can exchange items via
+     * cross-list transfers. When `null` (default), only in-list reordering is allowed.
+     */
+    dragGroup = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragGroup" }] : /* istanbul ignore next */ []));
+    /**
+     * Predicate marking an item as non-draggable. Disabled items cannot be picked up.
+     */
+    sortDisabled = input(() => false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Enables keyboard reordering on the focusable row: `Space`/`Enter` to pick up and drop,
+     * arrow keys to move, `Escape` to cancel. Opt-in for accessibility.
+     */
+    keyboardSortable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyboardSortable" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted by the destination list after a drag-and-drop reorder or cross-list transfer.
+     */
+    sorted = output();
     numberOfPages = computed(() => {
         const perPage = this.perPage();
         const totalItems = this.totalItems() || this._items.length;
@@ -1877,12 +2080,53 @@ class ListComponent {
     loadingTpt = contentChild(PaginableLoadingDirective, { ...(ngDevMode ? { debugName: "loadingTpt" } : /* istanbul ignore next */ {}), read: TemplateRef });
     /** Custom template rendered when the list is in an error state. */
     errorTpt = contentChild(PaginableErrorDirective, { ...(ngDevMode ? { debugName: "errorTpt" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    /**
+     * Custom template for the drop placeholder shown while dragging.
+     */
+    placeholderTpt = contentChild(HubListDragPlaceholderDirective, { ...(ngDevMode ? { debugName: "placeholderTpt" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    /**
+     * Custom template for the drag preview (ghost) that follows the pointer.
+     */
+    previewTpt = contentChild(HubListDragPreviewDirective, { ...(ngDevMode ? { debugName: "previewTpt" } : /* istanbul ignore next */ {}), read: TemplateRef });
     // NOTE: Otros
     isDisabled = false;
     onChange = () => { };
     onTouch = () => { };
     // NOTE: Filters
     searchFG = this.#fb.control('');
+    // NOTE: Drag & drop internal state
+    /** Per-container registry keyed by container key, used by Pointer Events hit-testing. */
+    #containers = new Map();
+    /** Active Pointer Events session (touch fallback), or `null`. */
+    #pointerSession = null;
+    /** Cleans up the native custom drag image, or `null`. */
+    #dragImageCleanup = null;
+    /**
+     * The row whose most recent `pointerdown` landed on a valid drag-start zone. Native
+     * `dragstart.target` is the draggable `<li>` (not the pressed descendant), so the handle
+     * gate is resolved on `pointerdown` and consulted here.
+     */
+    #dragStartLi = null;
+    /** Active keyboard reorder state, or `null`. */
+    #keyboardDrag = null;
+    /** Screen-reader announcement (translation key + params) for keyboard reordering. */
+    #announcement = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#announcement" }] : /* istanbul ignore next */ []));
+    /** Read-only announcement signal for the template `aria-live` region. */
+    announcement = this.#announcement.asReadonly();
+    constructor() {
+        this.dragService.register({
+            ownerId: this._listId,
+            group: () => this.dragGroup(),
+            refresh: () => this.#refreshSelf(),
+            commit: () => this.#commitDrop(),
+            resolveTarget: (element, clientX, clientY) => this.resolveTarget(element, clientX, clientY)
+        });
+        this.#destroyRef.onDestroy(() => {
+            this.#pointerSession?.destroy();
+            this.dragService.unregister(this._listId);
+        });
+    }
     // NOTE: Batch actions
     /**
      * Collection of actions for items
@@ -2082,6 +2326,14 @@ class ListComponent {
         const end = start + perPage;
         return { start, end };
     }
+    /**
+     * Returns the absolute index of the first item rendered on the current root page.
+     *
+     * @returns The slice start offset (0 when pagination is disabled).
+     */
+    getRootSliceStart() {
+        return this.paginate() ? this.getSliceRange(this._items.length).start : 0;
+    }
     /**
      * Returns a stable tracking key for list rendering.
      *
@@ -2105,6 +2357,642 @@ class ListComponent {
         }
         return index;
     }
+    // NOTE: Drag & drop
+    /**
+     * Maps a rendered (slice-relative) index to its absolute index in the underlying
+     * collection, accounting for root pagination.
+     *
+     * @param visibleIndex Index within the rendered slice.
+     * @param isRoot Whether the row belongs to the paginated root collection.
+     * @returns The absolute index.
+     */
+    absoluteIndex(visibleIndex, isRoot) {
+        return isRoot ? toAbsoluteIndex(visibleIndex, this.getRootSliceStart()) : visibleIndex;
+    }
+    /**
+     * Builds (and registers, for Pointer Events hit-testing) the drag container reference for
+     * a rendered collection.
+     *
+     * @param controlsForm The full `FormArray` backing the collection.
+     * @param itemsFull The full data array backing the collection.
+     * @param parentItem The parent item owning the collection, or `null` for the root.
+     * @param depth Nesting depth.
+     * @returns The container reference.
+     */
+    makeContainerRef(controlsForm, itemsFull, parentItem, depth) {
+        const key = depth === 0 ? `${this._listId}:root` : `${this._listId}:${depth}:${this.getTrackKey(parentItem, depth)}`;
+        const ref = {
+            key,
+            ownerId: this._listId,
+            group: this.dragGroup(),
+            items: itemsFull ?? [],
+            form: controlsForm,
+            parentItem: parentItem ?? null,
+            depth
+        };
+        this.#containers.set(key, ref);
+        return ref;
+    }
+    /**
+     * Returns whether reordering is enabled for a row.
+     *
+     * @param item The row item.
+     * @returns `true` when the row can be dragged.
+     */
+    isDragEnabled(item) {
+        return this.sortable() && !this.isRowDisabled(item);
+    }
+    /**
+     * Returns whether a row is explicitly non-draggable via `sortDisabled`.
+     *
+     * @param item The row item.
+     * @returns `true` when the row is disabled for dragging.
+     */
+    isRowDisabled(item) {
+        const fn = this.sortDisabled();
+        return typeof fn === 'function' ? !!fn(item) : false;
+    }
+    /**
+     * Returns whether a row is currently being dragged (native/pointer/keyboard).
+     *
+     * @param item The row item.
+     * @returns `true` when the row is the active drag item.
+     */
+    isRowDragging(item) {
+        return this.dragService.active()?.item === item || this.#keyboardDrag?.item === item;
+    }
+    /**
+     * Returns the absolute placeholder gap index for a container, or `null` when no
+     * placeholder should render in it.
+     *
+     * @param controlsForm The collection's `FormArray`.
+     * @returns The gap index, or `null`.
+     */
+    #placeholderGap(controlsForm) {
+        const target = this.dragService.target();
+        if (!target || target.container.form !== controlsForm) {
+            return null;
+        }
+        if (target.atEnd) {
+            return target.container.items.length;
+        }
+        return target.position === 'after' ? target.index + 1 : target.index;
+    }
+    /**
+     * Returns whether the placeholder should render before the row at the given absolute index.
+     *
+     * @param controlsForm The collection's `FormArray`.
+     * @param absoluteIndex Absolute index of the row.
+     * @returns `true` when a placeholder belongs before the row.
+     */
+    showPlaceholderBefore(controlsForm, absoluteIndex) {
+        return this.#placeholderGap(controlsForm) === absoluteIndex;
+    }
+    /**
+     * Returns whether the placeholder should render after the last visible row of a container.
+     *
+     * @param controlsForm The collection's `FormArray`.
+     * @param isRoot Whether the collection is the paginated root.
+     * @param visibleCount Number of rendered rows.
+     * @returns `true` when a placeholder belongs at the end.
+     */
+    showPlaceholderAtEnd(controlsForm, isRoot, visibleCount) {
+        const gap = this.#placeholderGap(controlsForm);
+        if (gap === null) {
+            return false;
+        }
+        const endIndex = isRoot ? this.getRootSliceStart() + visibleCount : visibleCount;
+        return gap === endIndex;
+    }
+    /**
+     * Determines whether a drag may start from the given pointer/drag event, honouring drag
+     * handles declared in the item template.
+     *
+     * @param event The triggering event.
+     * @param li The row element.
+     * @returns `true` when the gesture may start a drag.
+     */
+    #canStartDrag(event, li) {
+        const handles = Array.from(li.querySelectorAll('.hub-list__drag-handle')).filter((handle) => handle.closest('.hub-list__item') === li);
+        if (!handles.length) {
+            return true;
+        }
+        const targetHandle = event.target.closest('.hub-list__drag-handle');
+        return !!targetHandle && targetHandle.closest('.hub-list__item') === li;
+    }
+    /**
+     * Returns whether an event originated on an interactive control (checkbox, button, link…).
+     *
+     * @param event The triggering event.
+     * @returns `true` when the target is interactive.
+     */
+    #isInteractiveTarget(event) {
+        return !!event.target.closest('input, button, a, select, textarea');
+    }
+    /**
+     * Returns whether an event belongs to the given row rather than to one of its descendant
+     * rows in a nested list. Drag/pointer/keyboard events bubble through ancestor `<li>`s, and
+     * each `<li>` carries the same handlers; this keeps only the innermost row acting.
+     *
+     * @param event The triggering event.
+     * @param li The row element the handler is bound to.
+     * @returns `true` when the event's closest item is exactly this row.
+     */
+    #isEventForRow(event, li) {
+        return event.target.closest('.hub-list__item') === li;
+    }
+    /**
+     * Records the start of a drag in the coordinator.
+     *
+     * @param container Source container.
+     * @param index Absolute source index.
+     * @param item The dragged item.
+     * @param mode Transport driving the gesture.
+     */
+    #beginDrag(container, index, item, mode) {
+        this.dragService.begin({
+            sourceId: this._listId,
+            sourceGroup: this.dragGroup(),
+            item,
+            sourceContainer: container,
+            sourceIndex: index,
+            pointerMode: mode
+        });
+    }
+    /**
+     * Returns whether dropping into the given container is forbidden (own subtree cycle or a
+     * group mismatch).
+     *
+     * @param container Candidate destination container.
+     * @returns `true` when the drop must be rejected.
+     */
+    #forbidsDrop(container) {
+        const active = this.dragService.active();
+        if (!active) {
+            return true;
+        }
+        return containsNode(active.item, container.parentItem, this.bindChildren());
+    }
+    /**
+     * Native HTML5 `dragstart` handler.
+     *
+     * @param event Drag event.
+     * @param container Source container.
+     * @param absoluteIndex Absolute source index.
+     * @param item Dragged item.
+     */
+    onDragStart(event, container, absoluteIndex, item) {
+        const li = event.currentTarget;
+        // In nested lists the event bubbles through ancestor items; only the source item acts.
+        if (!this.#isEventForRow(event, li)) {
+            return;
+        }
+        // `dragstart.target` is the draggable `<li>`, never the pressed descendant, so the
+        // handle gate is evaluated on `pointerdown` (see `onPointerDown`) and consulted here.
+        if (!this.sortable() || this.isRowDisabled(item) || this.#dragStartLi !== li) {
+            event.preventDefault();
+            return;
+        }
+        this.#dragStartLi = null;
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('application/x-hub-list', this._listId);
+        }
+        this.#beginDrag(container, absoluteIndex, item, 'native');
+        this.#applyNativeDragImage(event, item);
+        this.#cdr.markForCheck();
+    }
+    /**
+     * Native HTML5 `dragover`/`dragenter` handler. Computes and publishes the drop target.
+     *
+     * @param event Drag event.
+     * @param container Hovered container.
+     * @param absoluteIndex Absolute index of the hovered row.
+     */
+    onDragOver(event, container, absoluteIndex) {
+        if (!this.dragService.isDragging()) {
+            return;
+        }
+        const li = event.currentTarget;
+        // In nested lists the event bubbles through ancestor items; only the innermost hovered
+        // item must compute the target (otherwise an ancestor would clobber it).
+        if (!this.#isEventForRow(event, li)) {
+            return;
+        }
+        if (!this.dragService.canDrop(this._listId) || this.#forbidsDrop(container)) {
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = 'none';
+            }
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+        const rect = li.getBoundingClientRect();
+        const isCards = container.depth === 0 && this.isCardsDisplay();
+        const position = resolveDropPosition(event.clientX, event.clientY, rect, isCards ? 'grid' : 'vertical', this.isRtl());
+        this.dragService.setTarget({ ownerId: this._listId, container, index: absoluteIndex, position, atEnd: false });
+    }
+    /**
+     * Native HTML5 `dragover` handler on the collection element. Handles the empty-collection
+     * case so an empty list (e.g. in a group) is still a valid drop target.
+     *
+     * @param event Drag event.
+     * @param container Hovered container.
+     */
+    onContainerDragOver(event, container) {
+        if (!this.dragService.isDragging()) {
+            return;
+        }
+        if (!this.dragService.canDrop(this._listId) || this.#forbidsDrop(container)) {
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = 'none';
+            }
+            return;
+        }
+        // Allow dropping anywhere over the collection — including the gaps and the placeholder
+        // slot (the placeholder is `pointer-events: none`, so its hovers reach this `<ul>`).
+        // This is what lets a drop "stay" when released on the prospective slot.
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+        if (container.items.length === 0) {
+            // Empty collection: no items to hover, so target the start.
+            this.dragService.setTarget({ ownerId: this._listId, container, index: 0, position: 'before', atEnd: true });
+        }
+        // Non-empty: keep the precise target set by the most recent item-level `dragover`.
+    }
+    /**
+     * Native HTML5 `drop` handler on a row.
+     *
+     * @param event Drag event.
+     */
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.#commitDrop();
+    }
+    /**
+     * Native HTML5 `drop` handler on the collection element (empty-collection case).
+     *
+     * @param event Drag event.
+     */
+    onContainerDrop(event) {
+        event.preventDefault();
+        this.#commitDrop();
+    }
+    /**
+     * Native HTML5 `dragend` handler. Restores state and removes the custom drag image.
+     */
+    onDragEnd() {
+        this.#dragImageCleanup?.();
+        this.#dragImageCleanup = null;
+        this.dragService.end();
+        this.#cdr.markForCheck();
+    }
+    /**
+     * Pointer Events `pointerdown` handler — the touch/pen drag fallback. Mouse pointers are
+     * ignored so native drag-and-drop drives the desktop experience.
+     *
+     * @param event Pointer event.
+     * @param container Source container.
+     * @param absoluteIndex Absolute source index.
+     * @param item Dragged item.
+     */
+    onPointerDown(event, container, absoluteIndex, item) {
+        const li = event.currentTarget;
+        // In nested lists the event bubbles through ancestor items; only the innermost pressed
+        // item arms, so an ancestor never overwrites `#dragStartLi`.
+        if (!this.#isEventForRow(event, li)) {
+            return;
+        }
+        if (!this.sortable() || this.isRowDisabled(item)) {
+            this.#dragStartLi = null;
+            return;
+        }
+        const onHandle = !!event.target.closest('.hub-list__drag-handle');
+        // `pointerdown` sees the real pressed element, so the handle/interactive gate is resolved
+        // here and remembered for the upcoming native `dragstart` (whose target is the `<li>`).
+        const allowed = (!this.#isInteractiveTarget(event) || onHandle) && this.#canStartDrag(event, li);
+        this.#dragStartLi = allowed ? li : null;
+        if (event.pointerType === 'mouse') {
+            // Desktop pointers use the native HTML5 drag-and-drop path.
+            return;
+        }
+        if (!allowed) {
+            return;
+        }
+        this.#pointerSession = createPointerDragSession({
+            startEvent: event,
+            sourceEl: li,
+            ghostFactory: () => this.#buildPointerGhost(li, item),
+            onStart: () => {
+                this.#beginDrag(container, absoluteIndex, item, 'pointer');
+                this.#cdr.markForCheck();
+            },
+            onMove: (x, y) => this.#onPointerMove(x, y),
+            onDrop: (x, y) => this.#onPointerDrop(x, y),
+            onCancel: () => {
+                this.dragService.end();
+                this.#cdr.markForCheck();
+            },
+            onEnd: () => {
+                this.#pointerSession = null;
+                this.#cdr.markForCheck();
+            }
+        });
+    }
+    /**
+     * Updates the drop target while a Pointer Events drag is moving.
+     *
+     * @param clientX Pointer X.
+     * @param clientY Pointer Y.
+     */
+    #onPointerMove(clientX, clientY) {
+        const active = this.dragService.active();
+        if (!active) {
+            return;
+        }
+        const target = this.dragService.resolveTargetAt(clientX, clientY);
+        if (target && !containsNode(active.item, target.container.parentItem, this.bindChildren())) {
+            this.dragService.setTarget(target);
+        }
+        else {
+            this.dragService.setTarget(null);
+        }
+        this.#cdr.markForCheck();
+    }
+    /**
+     * Commits a Pointer Events drop by delegating to the destination list.
+     *
+     * @param clientX Pointer X.
+     * @param clientY Pointer Y.
+     */
+    #onPointerDrop(clientX, clientY) {
+        this.#onPointerMove(clientX, clientY);
+        const target = this.dragService.target();
+        if (target) {
+            this.dragService.requestCommit(target.ownerId);
+        }
+        else {
+            this.dragService.end();
+        }
+        this.#cdr.markForCheck();
+    }
+    /**
+     * Builds the floating ghost element for the Pointer Events fallback.
+     *
+     * @param li The row element.
+     * @param item The dragged item.
+     * @returns The ghost element.
+     */
+    #buildPointerGhost(li, item) {
+        const template = this.previewTpt();
+        let ghost;
+        if (template) {
+            const view = template.createEmbeddedView({ item });
+            view.detectChanges();
+            ghost = document.createElement('div');
+            view.rootNodes.forEach((node) => ghost.appendChild(node));
+        }
+        else {
+            ghost = li.cloneNode(true);
+        }
+        // The ghost is mounted on <body>, outside this component's emulated encapsulation,
+        // so the design tokens are read from the source row and applied inline.
+        const styles = getComputedStyle(li);
+        ghost.style.opacity = styles.getPropertyValue('--hub-list-ghost-opacity').trim() || '0.85';
+        ghost.style.boxShadow = styles.getPropertyValue('--hub-list-ghost-shadow').trim() || '0 0.5rem 1rem rgba(0, 0, 0, 0.15)';
+        return ghost;
+    }
+    /**
+     * Renders the custom drag preview off-screen and assigns it as the native drag image.
+     *
+     * @param event Drag event.
+     * @param item The dragged item.
+     */
+    #applyNativeDragImage(event, item) {
+        const template = this.previewTpt();
+        if (!template || !event.dataTransfer || typeof event.dataTransfer.setDragImage !== 'function') {
+            return;
+        }
+        const view = template.createEmbeddedView({ item });
+        view.detectChanges();
+        const node = view.rootNodes.find((candidate) => candidate.nodeType === Node.ELEMENT_NODE);
+        if (!node) {
+            view.destroy();
+            return;
+        }
+        const holder = document.createElement('div');
+        holder.style.position = 'fixed';
+        holder.style.top = '-9999px';
+        holder.style.left = '-9999px';
+        holder.appendChild(node);
+        document.body.appendChild(holder);
+        event.dataTransfer.setDragImage(node, 0, 0);
+        this.#dragImageCleanup = () => {
+            view.destroy();
+            holder.remove();
+        };
+    }
+    /**
+     * Resolves the drop target inside this list from a DOM element and pointer coordinates
+     * (used by the Pointer Events coordinator, including cross-list hovers).
+     *
+     * @param element Element under the pointer.
+     * @param clientX Pointer X.
+     * @param clientY Pointer Y.
+     * @returns The resolved target, or `null`.
+     */
+    resolveTarget(element, clientX, clientY) {
+        const ul = element.closest('.hub-list__items');
+        const containerKey = ul?.getAttribute('data-hub-container-key');
+        const container = containerKey ? this.#containers.get(containerKey) : null;
+        if (!ul || !container || this.#forbidsDrop(container)) {
+            return null;
+        }
+        const li = element.closest('.hub-list__item');
+        if (!li || li.closest('.hub-list__items') !== ul || li.classList.contains('hub-list__item--empty')) {
+            return { ownerId: this._listId, container, index: container.items.length, position: 'after', atEnd: true };
+        }
+        const indexAttr = li.getAttribute('data-hub-index');
+        const index = indexAttr != null ? Number(indexAttr) : container.items.length;
+        const rect = li.getBoundingClientRect();
+        const isCards = container.depth === 0 && this.isCardsDisplay();
+        const position = resolveDropPosition(clientX, clientY, rect, isCards ? 'grid' : 'vertical', this.isRtl());
+        return { ownerId: this._listId, container, index, position, atEnd: false };
+    }
+    /**
+     * Commits the pending drop as the destination list: mutates the data array and the
+     * `FormArray` (in-list move or cross-list transfer), refreshes the affected views and
+     * emits the `sorted` event. Only the destination list performs the commit and emission.
+     */
+    #commitDrop() {
+        const active = this.dragService.active();
+        const target = this.dragService.target();
+        if (!active || !target || target.ownerId !== this._listId || !this.dragService.canDrop(this._listId)) {
+            this.dragService.end();
+            return;
+        }
+        const source = active.sourceContainer;
+        const dest = target.container;
+        if (this.#forbidsDrop(dest)) {
+            this.dragService.end();
+            return;
+        }
+        const sameContainer = source.form === dest.form;
+        const fromIndex = active.sourceIndex;
+        const item = source.items[fromIndex];
+        if (item === undefined) {
+            this.dragService.end();
+            return;
+        }
+        const toIndex = target.atEnd
+            ? dest.items.length
+            : computeTargetIndex(target.index, target.position === 'after', sameContainer, fromIndex);
+        if (sameContainer) {
+            moveItemInArray(dest.items, fromIndex, toIndex);
+            moveControlInFormArray(dest.form, fromIndex, toIndex);
+        }
+        else {
+            transferArrayItem(source.items, dest.items, fromIndex, toIndex);
+            transferControlBetweenFormArrays(source.form, dest.form, fromIndex, toIndex);
+        }
+        const currentIndex = dest.items.indexOf(item);
+        const event = {
+            previousIndex: fromIndex,
+            currentIndex: currentIndex < 0 ? toIndex : currentIndex,
+            item,
+            items: [...dest.items],
+            isTransfer: !sameContainer,
+            previousGroup: active.sourceGroup,
+            group: this.dragGroup(),
+            previousItems: sameContainer ? undefined : [...source.items],
+            depth: dest.depth,
+            parentItem: dest.parentItem
+        };
+        this.#refreshSelf();
+        if (!sameContainer) {
+            this.dragService.refreshSource(active.sourceId);
+        }
+        this.dragService.end();
+        this.sorted.emit(event);
+    }
+    /**
+     * Keyboard reorder handler bound to the focusable row.
+     *
+     * @param event Keyboard event.
+     * @param container The row's container.
+     * @param absoluteIndex Absolute index of the row.
+     * @param item The row item.
+     */
+    onItemKeydown(event, container, absoluteIndex, item) {
+        if (!this.keyboardSortable() || !this.sortable() || this.isRowDisabled(item)) {
+            return;
+        }
+        // In nested lists the keydown bubbles through ancestor items; only the focused item acts.
+        if (!this.#isEventForRow(event, event.currentTarget)) {
+            return;
+        }
+        const grab = this.#keyboardDrag;
+        const key = event.key;
+        if (key === ' ' || key === 'Spacebar' || key === 'Enter') {
+            event.preventDefault();
+            if (!grab) {
+                this.#keyboardDrag = { container, index: absoluteIndex, originalIndex: absoluteIndex, item };
+                this.#announce('DRAG_PICKED_UP', { index: absoluteIndex + 1, total: container.items.length });
+            }
+            else {
+                this.#announce('DRAG_DROPPED_AT', { index: grab.index + 1, total: grab.container.items.length });
+                this.#emitKeyboardSorted(grab);
+                this.#keyboardDrag = null;
+            }
+            this.#cdr.markForCheck();
+            return;
+        }
+        if (!grab) {
+            return;
+        }
+        if (key === 'Escape') {
+            event.preventDefault();
+            this.#cancelKeyboardDrag(grab);
+            return;
+        }
+        const isCards = container.depth === 0 && this.isCardsDisplay();
+        let delta = 0;
+        if (key === 'ArrowUp' || (isCards && key === 'ArrowLeft')) {
+            delta = -1;
+        }
+        else if (key === 'ArrowDown' || (isCards && key === 'ArrowRight')) {
+            delta = 1;
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        const from = grab.index;
+        const to = Math.max(0, Math.min(grab.container.items.length - 1, from + delta));
+        if (to === from) {
+            return;
+        }
+        moveItemInArray(grab.container.items, from, to);
+        moveControlInFormArray(grab.container.form, from, to);
+        grab.index = to;
+        this.#refreshSelf();
+        this.#announce('DRAG_MOVED_TO', { index: to + 1, total: grab.container.items.length });
+    }
+    /**
+     * Emits the `sorted` event for a completed keyboard reorder.
+     *
+     * @param grab The keyboard drag state.
+     */
+    #emitKeyboardSorted(grab) {
+        const currentIndex = grab.container.items.indexOf(grab.item);
+        this.sorted.emit({
+            previousIndex: grab.originalIndex,
+            currentIndex: currentIndex < 0 ? grab.index : currentIndex,
+            item: grab.item,
+            items: [...grab.container.items],
+            isTransfer: false,
+            previousGroup: this.dragGroup(),
+            group: this.dragGroup(),
+            depth: grab.container.depth,
+            parentItem: grab.container.parentItem
+        });
+    }
+    /**
+     * Cancels an in-progress keyboard reorder, restoring the original position.
+     *
+     * @param grab The keyboard drag state.
+     */
+    #cancelKeyboardDrag(grab) {
+        if (grab.index !== grab.originalIndex) {
+            moveItemInArray(grab.container.items, grab.index, grab.originalIndex);
+            moveControlInFormArray(grab.container.form, grab.index, grab.originalIndex);
+            this.#refreshSelf();
+        }
+        this.#announce('DRAG_CANCELLED');
+        this.#keyboardDrag = null;
+        this.#cdr.markForCheck();
+    }
+    /**
+     * Sets the screen-reader announcement.
+     *
+     * @param key Translation key.
+     * @param params Interpolation params.
+     */
+    #announce(key, params) {
+        this.#announcement.set({ key, params });
+    }
+    /**
+     * Re-renders this list after an in-place mutation of its data/form (drag reorder).
+     */
+    #refreshSelf() {
+        this._items = Array.isArray(this._items) ? [...this._items] : this._items;
+        this.#cdr.markForCheck();
+    }
     collectSelectedValues(controls) {
         const selectedValues = [];
         for (const control of controls) {
@@ -2175,19 +3063,21 @@ class ListComponent {
         return [...new Set(tokens.map((item) => item.trim()).filter(Boolean))];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 }, 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" }, host: { properties: { "class.hub-list--rtl": "isRtl()" }, classAttribute: "hub-list" }, providers: [
+    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 }, 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: ListComponent,
                 multi: true
             }
-        ], queries: [{ propertyName: "itemTpt", first: true, predicate: PaginableListItemDirective, descendants: true, read: TemplateRef, 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 }], ngImport: i0, template: "@if (batchActions.length || options.searchable) {\n\t<div class=\"hub-list__top-bar\">\n\t\t@if (batchActions.length) {\n\t\t\t<div class=\"hub-list__batch-actions\">\n\t\t\t\t@for (action of batchActions; track $index) {\n\t\t\t\t\t@if (!$any(action).buttons?.length) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"hub-list__batch-action-btn\"\n\t\t\t\t\t\t\t[ngClass]=\"getBatchActionClassList(action)\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"handleBatchAction(action)\"\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 (action.icon) {\n\t\t\t\t\t\t\t\t<i class=\"{{ action.icon }}\"></i>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ action.title }}\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 (options.searchable) {\n\t\t\t<div class=\"hub-list__search\">\n\t\t\t\t@if (isRtl()) {\n\t\t\t\t\t<button class=\"hub-list__search-btn\" type=\"button\" (click)=\"filter()\">\n\t\t\t\t\t\t<i class=\"hub-list__search-icon\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</button>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-list__search-input\"\n\t\t\t\t\t\t[formControl]=\"searchFG\"\n\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t(keyup.enter)=\"filter()\"\n\t\t\t\t\t/>\n\t\t\t\t} @else {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-list__search-input\"\n\t\t\t\t\t\t[formControl]=\"searchFG\"\n\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t(keyup.enter)=\"filter()\"\n\t\t\t\t\t/>\n\t\t\t\t\t<button class=\"hub-list__search-btn\" type=\"button\" (click)=\"filter()\">\n\t\t\t\t\t\t<i class=\"hub-list__search-icon\" 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</div>\n}\n\n@if (loading()) {\n\t<ul class=\"hub-list__items hub-list__items--root\">\n\t\t<li class=\"hub-list__item hub-list__item--state\">\n\t\t\t<hub-state-outlet\n\t\t\t\t[template]=\"loadingTpt()\"\n\t\t\t\t[instanceDefault]=\"loadingComponent()\"\n\t\t\t\t[globalDefault]=\"defaults.loading()\"\n\t\t\t\t[fallback]=\"defaultLoadingTpt\"\n\t\t\t/>\n\t\t</li>\n\t</ul>\n} @else if (error()) {\n\t<ul class=\"hub-list__items hub-list__items--root\">\n\t\t<li class=\"hub-list__item hub-list__item--state\">\n\t\t\t<hub-state-outlet\n\t\t\t\t[template]=\"errorTpt()\"\n\t\t\t\t[instanceDefault]=\"errorComponent()\"\n\t\t\t\t[globalDefault]=\"defaults.error()\"\n\t\t\t\t[fallback]=\"defaultErrorTpt\"\n\t\t\t\t[context]=\"{ error: error() }\"\n\t\t\t/>\n\t\t</li>\n\t</ul>\n} @else if (!getVisibleItems(items, true).length) {\n\t<ul class=\"hub-list__items hub-list__items--root\">\n\t\t<li class=\"hub-list__item hub-list__item--empty\">\n\t\t\t<hub-state-outlet\n\t\t\t\t[template]=\"noResultsTpt()\"\n\t\t\t\t[instanceDefault]=\"noResultsComponent()\"\n\t\t\t\t[globalDefault]=\"defaults.noResults()\"\n\t\t\t\t[fallback]=\"defaultNoResultsTpt\"\n\t\t\t/>\n\t\t</li>\n\t</ul>\n} @else {\n\t<ng-container\n\t\t[ngTemplateOutlet]=\"containerTpt\"\n\t\t[ngTemplateOutletContext]=\"{\n\t\t\tcontrols: getVisibleControls(form.controls, true),\n\t\t\tisRoot: true,\n\t\t\titems: getVisibleItems(items, true),\n\t\t\tdepth: 0\n\t\t}\"\n\t></ng-container>\n}\n\n<ng-template #containerTpt let-controls=\"controls\" let-isRoot=\"isRoot\" let-items=\"items\" let-depth=\"depth\">\n\t<ul\n\t\tclass=\"hub-list__items\"\n\t\t[class.hub-list__items--root]=\"isRoot\"\n\t\t[class.hub-list__items--cards]=\"isRoot && isCardsDisplay()\"\n\t>\n\t\t@for (formGroup of controls; track getTrackKey(formGroup.get('data')?.value, $index); let index = $index) {\n\t\t\t<li\n\t\t\t\tclass=\"hub-list__item\"\n\t\t\t\t[ngClass]=\"_getRowClass(items[index])\"\n\t\t\t\t[class.hub-list__item--clickable]=\"clickFn()\"\n\t\t\t\t[class.hub-list__item--selected]=\"formGroup.get('selected')?.value\"\n\t\t\t\t[formGroup]=\"formGroup\"\n\t\t\t\t(click)=\"onItemClick(formGroup.value, depth, index, $event); $event.preventDefault(); $event.stopPropagation()\"\n\t\t\t>\n\t\t\t\t@if (formGroup.value; as item) {\n\t\t\t\t\t<div class=\"hub-list__item-content\">\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\tclass=\"hub-list__checkbox\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\tformControlName=\"selected\"\n\t\t\t\t\t\t\t\t(change)=\"onSelectionChange()\"\n\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<div class=\"hub-list__label\">\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"itemTpt() || defaultItemtTpt\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\tdata: items[index],\n\t\t\t\t\t\t\t\t\tdepth,\n\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\tcollapsed: !!formGroup.get('collapsed').value,\n\t\t\t\t\t\t\t\t\tselected: formGroup.get('selected').value\n\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t@if (item[bindChildren()]?.length) {\n\t\t\t\t\t\t\t<div class=\"hub-list__actions\">\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclass=\"hub-list__chevron\"\n\t\t\t\t\t\t\t\t\t(click)=\"\n\t\t\t\t\t\t\t\t\t\ttoggleCollapsed(formGroup.get('collapsed'));\n\t\t\t\t\t\t\t\t\t\t$event.preventDefault();\n\t\t\t\t\t\t\t\t\t\t$event.stopPropagation()\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\t<i\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__icon\"\n\t\t\t\t\t\t\t\t\t\t[ngClass]=\"\n\t\t\t\t\t\t\t\t\t\t\titem.collapsed ? 'hub-table__icon--chevron-down' : 'hub-table__icon--chevron-up'\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t@if (item[bindChildren()]?.length && !item.collapsed) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"containerTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\tcontrols: formGroup.get('children')?.controls,\n\t\t\t\t\t\t\t\titems: items[index][bindChildren()],\n\t\t\t\t\t\t\t\tisRoot: false,\n\t\t\t\t\t\t\t\tdepth: depth + 1\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n\n@if (paginate()) {\n\t<div class=\"hub-list__bottom-bar\">\n\t\t<hub-paginator\n\t\t\tclass=\"hub-list__bottom-bar-paginator\"\n\t\t\t[(page)]=\"page\"\n\t\t\t[numberOfPages]=\"numberOfPages()\"\n\t\t\t[rtl]=\"isRtl()\"\n\t\t></hub-paginator>\n\t\t<div class=\"hub-list__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<select\n\t\t\t\tclass=\"hub-paginator__select\"\n\t\t\t\t[ngModel]=\"perPage()\"\n\t\t\t\t(ngModelChange)=\"onPerPageChange($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t>\n\t\t\t\t@for (option of perPageOptions(); track option) {\n\t\t\t\t\t<option [ngValue]=\"option\" class=\"hub-paginator__select-option\">\n\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t</option>\n\t\t\t\t}\n\t\t\t</select>\n\t\t</div>\n\t\t<p class=\"hub-list__bottom-bar-info hub-paginator__info\">\n\t\t\t{{\n\t\t\t\t'SHOWING_X_OF_Y_ROWS'\n\t\t\t\t\t| translate\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tamount: getVisibleItems(items, true).length,\n\t\t\t\t\t\t\t\ttotal: getEffectiveTotalItems()\n\t\t\t\t\t\t  }\n\t\t\t\t\t| ucfirst\n\t\t\t}}\n\t\t</p>\n\t</div>\n}\n\n<ng-template #defaultNoResultsTpt>\n\t<div class=\"hub-list__no-results\" role=\"alert\">\n\t\t<i class=\"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-list__loading\" role=\"status\">\n\t\t<i class=\"hub-table__icon hub-table__icon--info hub-table__icon--2x\" aria-hidden=\"true\"></i>\n\t\t{{ 'LOADING' | translate | ucfirst }}\n\t</div>\n</ng-template>\n\n<ng-template #defaultErrorTpt>\n\t<div class=\"hub-list__error text-danger\" role=\"alert\">\n\t\t<i class=\"hub-table__icon hub-table__icon--info hub-table__icon--2x\" aria-hidden=\"true\"></i>\n\t\t{{ 'ERROR_OCURRED' | translate | ucfirst }}\n\t</div>\n</ng-template>\n\n<ng-template #defaultItemtTpt let-data=\"data\">\n\t{{ data[bindLabel()] }}\n</ng-template>\n", styles: [":root,:host{--hub-list-checkbox-size: 1rem;--hub-list-chevron-size: var(--hub-ref-icon-size, 1em);--hub-list-bg: transparent;--hub-list-border-radius: var(--hub-ref-radius-md, .375rem);--hub-list-padding-x: var(--hub-ref-space-0, 0);--hub-list-padding-y: var(--hub-ref-space-0, 0);--hub-list-gap: var(--hub-ref-space-4, 1.5rem);--hub-list-items-bg: transparent;--hub-list-items-gap: var(--hub-ref-space-2, .5rem);--hub-list-empty-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-list-empty-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-list-empty-color: var(--hub-sys-text-muted, #6c757d);--hub-list-empty-padding-x: var(--hub-ref-space-3, 1rem);--hub-list-empty-padding-y: var(--hub-ref-space-3, 1rem);--hub-list-item-bg: var(--hub-sys-surface-page, #ffffff);--hub-list-item-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-list-item-border-width: 1px;--hub-list-item-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-list-item-color: var(--hub-sys-text-primary, #212529);--hub-list-item-gap: var(--hub-ref-space-2, .5rem);--hub-list-item-hover-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-list-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-list-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-list-children-gap: var(--hub-list-item-padding-y);--hub-list-item-selected-bg: var(--hub-sys-color-primary, #0d6efd);--hub-list-item-selected-color: var(--hub-ref-color-white, #fff);--hub-list-cards-min-column-width: 18rem;--hub-list-cards-gap: var(--hub-list-items-gap);--hub-list-cards-columns: auto-fit;--hub-list-cards-row-gap: var(--hub-list-cards-gap);--hub-list-cards-column-gap: var(--hub-list-cards-gap);--hub-list-cards-bg: var(--hub-list-item-bg, transparent);--hub-list-cards-color: var(--hub-list-item-color);--hub-list-cards-padding-x: var(--hub-list-item-padding-x);--hub-list-cards-padding-y: var(--hub-list-item-padding-y);--hub-list-cards-border-color: var(--hub-list-item-border-color);--hub-list-cards-border-width: var(--hub-list-item-border-width, 1px);--hub-list-cards-border-radius: var(--hub-list-item-border-radius);--hub-list-cards-shadow: none;--hub-list-cards-hover-bg: var(--hub-list-item-hover-bg);--hub-list-cards-hover-shadow: var(--hub-list-cards-shadow);--hub-list-cards-transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;--hub-list-top-bar-gap: var(--hub-ref-space-2, .5rem);--hub-list-top-bar-justify-content: end;--hub-list-top-bar-align-items: center;--hub-list-top-bar-wrap: wrap;--hub-list-batch-actions-gap: var(--hub-ref-space-2, .5rem);--hub-list-bottom-bar-gap: var(--hub-ref-space-3, 1rem);--hub-list-bottom-bar-justify-content: space-around;--hub-list-bottom-bar-align-items: center;--hub-list-bottom-bar-wrap: wrap;--hub-list-bottom-bar-paginator-order: 1;--hub-list-bottom-bar-settings-order: 2;--hub-list-bottom-bar-info-order: 3;--hub-list-bottom-bar-paginator-flex: 0 0 auto;--hub-list-bottom-bar-settings-flex: 0 0 auto;--hub-list-bottom-bar-info-flex: 0 0 auto;--hub-list-search-btn-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-list-search-btn-color: var(--hub-sys-text-primary, #212529);--hub-list-search-button-min-width: 2.75rem;--hub-list-search-input-bg: var(--hub-sys-surface-page, #ffffff);--hub-list-search-input-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-list-search-input-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-list-search-input-color: var(--hub-sys-text-primary, #212529);--hub-list-search-border-color: var(--hub-list-search-input-border-color);--hub-list-search-border-width: 1px;--hub-list-search-border-radius: var(--hub-list-search-input-border-radius);--hub-list-search-input-padding-x: .75rem;--hub-list-search-input-padding-y: .375rem;--hub-list-search-input-font-size: 1rem;--hub-list-action-btn-bg: var(--hub-sys-surface-page, #ffffff);--hub-list-action-btn-color: var(--hub-list-item-color);--hub-list-action-btn-border-color: var(--hub-list-item-border-color);--hub-list-action-btn-border-radius: var(--hub-list-item-border-radius);--hub-list-action-btn-padding-y: .375rem;--hub-list-action-btn-padding-x: .75rem;--hub-list-action-btn-hover-bg: var(--hub-list-item-hover-bg)}:host{display:flex;flex-direction:column;gap:var(--hub-list-gap);padding:var(--hub-list-padding-y) var(--hub-list-padding-x);background-color:var(--hub-list-bg);border-radius:var(--hub-list-border-radius)}:host .hub-list__bottom-bar{display:flex;justify-content:var(--hub-list-bottom-bar-justify-content);align-items:var(--hub-list-bottom-bar-align-items);flex-wrap:var(--hub-list-bottom-bar-wrap);gap:var(--hub-list-bottom-bar-gap)}:host .hub-list__bottom-bar-paginator{order:var(--hub-list-bottom-bar-paginator-order);flex:var(--hub-list-bottom-bar-paginator-flex);overflow:auto;margin:0}:host .hub-list__bottom-bar-settings{order:var(--hub-list-bottom-bar-settings-order);flex:var(--hub-list-bottom-bar-settings-flex);margin:0}:host .hub-list__bottom-bar-info{order:var(--hub-list-bottom-bar-info-order);flex:var(--hub-list-bottom-bar-info-flex);margin:0}:host .hub-list__top-bar{display:flex;align-items:var(--hub-list-top-bar-align-items);justify-content:var(--hub-list-top-bar-justify-content);flex-wrap:var(--hub-list-top-bar-wrap);gap:var(--hub-list-top-bar-gap);direction:ltr}:host .hub-list__batch-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--hub-list-batch-actions-gap)}:host .hub-list__batch-action-btn{display:inline-flex;align-items:center;gap:.35rem}:host .hub-list__batch-action-btn--default{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:var(--hub-list-action-btn-padding-y) var(--hub-list-action-btn-padding-x);color:var(--hub-list-action-btn-color);background-color:var(--hub-list-action-btn-bg);border:1px solid var(--hub-list-action-btn-border-color);border-radius:var(--hub-list-action-btn-border-radius);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,color .15s ease-in-out}:host .hub-list__batch-action-btn--default:hover:not(:disabled){background-color:var(--hub-list-action-btn-hover-bg)}:host .hub-list__search{margin-left:auto}:host.hub-list--rtl{direction:rtl}:host.hub-list--rtl .hub-list__items .hub-list__items{padding-left:0;padding-right:var(--hub-list-item-padding-x)}:host.hub-list--rtl .hub-list__search{direction:ltr;order:1;margin-left:0;margin-right:auto}:host.hub-list--rtl .hub-list__search-input{direction:ltr;text-align:right;border-radius:0 var(--hub-list-search-border-radius) var(--hub-list-search-border-radius) 0!important}:host.hub-list--rtl .hub-list__search-btn{border-radius:var(--hub-list-search-border-radius) 0 0 var(--hub-list-search-border-radius)!important}:host.hub-list--rtl .hub-list__batch-actions{order:2;flex-direction:row-reverse;margin-left:auto;margin-right:0}.hub-list__items{display:flex;flex-direction:column;gap:var(--hub-list-items-gap);background-color:var(--hub-list-items-bg);list-style:none;margin:0;padding:0}.hub-list__items .hub-list__items{margin-top:var(--hub-list-children-gap);padding-left:var(--hub-list-item-padding-x);padding-right:0;padding-top:0;padding-bottom:0;border-radius:0}.hub-list__search{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:end}.hub-list__search-input{position:relative;flex:1 1 auto;width:1%;min-width:0;display:block;width:100%;padding:var(--hub-list-search-input-padding-y) var(--hub-list-search-input-padding-x);font-size:var(--hub-list-search-input-font-size);font-weight:400;line-height:1.5;background-color:var(--hub-list-search-input-bg);border-color:var(--hub-list-search-border-color)!important;color:var(--hub-list-search-input-color);border:var(--hub-list-search-border-width) solid var(--hub-list-search-border-color);border-radius:var(--hub-list-search-border-radius) 0 0 var(--hub-list-search-border-radius)!important}.hub-list__search-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hub-list-search-button-min-width);padding:var(--hub-list-search-input-padding-y) var(--hub-list-search-input-padding-x);background-color:var(--hub-list-search-btn-bg)!important;color:var(--hub-list-search-btn-color)!important;border-color:var(--hub-list-search-border-color)!important;border:var(--hub-list-search-border-width) solid var(--hub-list-search-border-color);border-radius:0 var(--hub-list-search-border-radius) var(--hub-list-search-border-radius) 0!important;cursor:pointer}.hub-list__search-icon{display:inline-block;width:var(--hub-ref-icon-size, 1em);height:var(--hub-ref-icon-size, 1em);background-color:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-image: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\");mask-image: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-list__item{display:flex;flex-direction:column;padding:var(--hub-list-item-padding-y) var(--hub-list-item-padding-x);background-color:var(--hub-list-item-bg);color:var(--hub-list-item-color);border-radius:var(--hub-list-item-border-radius);transition:background-color .15s ease-in-out;position:relative;border:var(--hub-list-item-border-width) solid var(--hub-list-item-border-color)}.hub-list__item--clickable{cursor:pointer}.hub-list__item--clickable:hover{background-color:var(--hub-list-item-hover-bg)}.hub-list__item--selected{background-color:var(--hub-list-item-selected-bg)!important;color:var(--hub-list-item-selected-color);border-color:var(--hub-list-item-selected-bg)}.hub-list__item--selected .hub-list__label,.hub-list__item--selected .hub-list__actions button{color:var(--hub-list-item-selected-color)}.hub-list__item--empty{background-color:var(--hub-list-empty-bg);color:var(--hub-list-empty-color);padding:var(--hub-list-empty-padding-y, var(--hub-ref-space-3, 1rem)) var(--hub-list-empty-padding-x, var(--hub-ref-space-3, 1rem));border-color:var(--hub-list-empty-border-color);text-align:center}.hub-list__items--cards{display:grid;grid-template-columns:repeat(var(--hub-list-cards-columns),minmax(min(100%,var(--hub-list-cards-min-column-width)),1fr));gap:var(--hub-list-cards-row-gap) var(--hub-list-cards-column-gap)}.hub-list__items--cards>.hub-list__item{height:100%;background-color:var(--hub-list-cards-bg);color:var(--hub-list-cards-color);padding:var(--hub-list-cards-padding-y) var(--hub-list-cards-padding-x);border:var(--hub-list-cards-border-width) solid var(--hub-list-cards-border-color);border-radius:var(--hub-list-cards-border-radius);box-shadow:var(--hub-list-cards-shadow);transition:var(--hub-list-cards-transition)}.hub-list__items--cards>.hub-list__item.hub-list__item--clickable:hover{background-color:var(--hub-list-cards-hover-bg);box-shadow:var(--hub-list-cards-hover-shadow)}.hub-list__items--cards .hub-list__item-content{align-items:flex-start}.hub-list__items--cards .hub-list__label{overflow:visible;text-overflow:initial;white-space:normal}.hub-list__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}.hub-list__item-content{display:flex;justify-content:space-between;align-items:center;gap:var(--hub-list-item-gap);width:100%}.hub-list__checkbox{width:var(--hub-list-checkbox-size);height:var(--hub-list-checkbox-size);flex-shrink:0;cursor:pointer}.hub-list__actions{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem)}.hub-list__chevron{padding:0;font-size:var(--hub-list-chevron-size);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer}.hub-list__no-results{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem)}\n"], dependencies: [{ 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: PaginatorComponent, selector: "hub-paginator, paginable-table-paginator", inputs: ["rtl", "page", "numberOfPages"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PaginableStateOutlet, selector: "hub-state-outlet", inputs: ["template", "instanceDefault", "globalDefault", "fallback", "context"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UcfirstPipe, name: "ucfirst" }] });
+        ], queries: [{ propertyName: "itemTpt", first: true, predicate: PaginableListItemDirective, descendants: true, read: TemplateRef, 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: "placeholderTpt", first: true, predicate: HubListDragPlaceholderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "previewTpt", first: true, predicate: HubListDragPreviewDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (batchActions.length || options.searchable) {\n\t<div class=\"hub-list__top-bar\">\n\t\t@if (batchActions.length) {\n\t\t\t<div class=\"hub-list__batch-actions\">\n\t\t\t\t@for (action of batchActions; track $index) {\n\t\t\t\t\t@if (!$any(action).buttons?.length) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"hub-list__batch-action-btn\"\n\t\t\t\t\t\t\t[ngClass]=\"getBatchActionClassList(action)\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"handleBatchAction(action)\"\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 (action.icon) {\n\t\t\t\t\t\t\t\t<i class=\"{{ action.icon }}\"></i>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ action.title }}\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 (options.searchable) {\n\t\t\t<div class=\"hub-list__search\">\n\t\t\t\t@if (isRtl()) {\n\t\t\t\t\t<button class=\"hub-list__search-btn\" type=\"button\" (click)=\"filter()\">\n\t\t\t\t\t\t<i class=\"hub-list__search-icon\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</button>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-list__search-input\"\n\t\t\t\t\t\t[formControl]=\"searchFG\"\n\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t(keyup.enter)=\"filter()\"\n\t\t\t\t\t/>\n\t\t\t\t} @else {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-list__search-input\"\n\t\t\t\t\t\t[formControl]=\"searchFG\"\n\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t(keyup.enter)=\"filter()\"\n\t\t\t\t\t/>\n\t\t\t\t\t<button class=\"hub-list__search-btn\" type=\"button\" (click)=\"filter()\">\n\t\t\t\t\t\t<i class=\"hub-list__search-icon\" 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</div>\n}\n\n@if (loading()) {\n\t<ul class=\"hub-list__items hub-list__items--root\">\n\t\t<li class=\"hub-list__item hub-list__item--state\">\n\t\t\t<hub-state-outlet\n\t\t\t\t[template]=\"loadingTpt()\"\n\t\t\t\t[instanceDefault]=\"loadingComponent()\"\n\t\t\t\t[globalDefault]=\"defaults.loading()\"\n\t\t\t\t[fallback]=\"defaultLoadingTpt\"\n\t\t\t/>\n\t\t</li>\n\t</ul>\n} @else if (error()) {\n\t<ul class=\"hub-list__items hub-list__items--root\">\n\t\t<li class=\"hub-list__item hub-list__item--state\">\n\t\t\t<hub-state-outlet\n\t\t\t\t[template]=\"errorTpt()\"\n\t\t\t\t[instanceDefault]=\"errorComponent()\"\n\t\t\t\t[globalDefault]=\"defaults.error()\"\n\t\t\t\t[fallback]=\"defaultErrorTpt\"\n\t\t\t\t[context]=\"{ error: error() }\"\n\t\t\t/>\n\t\t</li>\n\t</ul>\n} @else if (!getVisibleItems(items, true).length) {\n\t<ul class=\"hub-list__items hub-list__items--root\">\n\t\t<li class=\"hub-list__item hub-list__item--empty\">\n\t\t\t<hub-state-outlet\n\t\t\t\t[template]=\"noResultsTpt()\"\n\t\t\t\t[instanceDefault]=\"noResultsComponent()\"\n\t\t\t\t[globalDefault]=\"defaults.noResults()\"\n\t\t\t\t[fallback]=\"defaultNoResultsTpt\"\n\t\t\t/>\n\t\t</li>\n\t</ul>\n} @else {\n\t<ng-container\n\t\t[ngTemplateOutlet]=\"containerTpt\"\n\t\t[ngTemplateOutletContext]=\"{\n\t\t\tcontrols: getVisibleControls(form.controls, true),\n\t\t\tcontrolsForm: form,\n\t\t\titemsFull: items,\n\t\t\titems: getVisibleItems(items, true),\n\t\t\tparentItem: null,\n\t\t\tisRoot: true,\n\t\t\tdepth: 0\n\t\t}\"\n\t></ng-container>\n}\n\n<ng-template\n\t#containerTpt\n\tlet-controls=\"controls\"\n\tlet-controlsForm=\"controlsForm\"\n\tlet-itemsFull=\"itemsFull\"\n\tlet-isRoot=\"isRoot\"\n\tlet-items=\"items\"\n\tlet-parentItem=\"parentItem\"\n\tlet-depth=\"depth\"\n>\n\t@let containerRef = makeContainerRef(controlsForm, itemsFull, parentItem, depth);\n\t<ul\n\t\tclass=\"hub-list__items\"\n\t\t[class.hub-list__items--root]=\"isRoot\"\n\t\t[class.hub-list__items--cards]=\"isRoot && isCardsDisplay()\"\n\t\t[attr.data-hub-container-key]=\"containerRef.key\"\n\t\t(dragover)=\"onContainerDragOver($event, containerRef)\"\n\t\t(drop)=\"onContainerDrop($event)\"\n\t>\n\t\t@for (formGroup of controls; track getTrackKey(formGroup.get('data')?.value, $index); let index = $index) {\n\t\t\t@let absIndex = absoluteIndex(index, isRoot);\n\t\t\t@if (sortable() && showPlaceholderBefore(controlsForm, absIndex)) {\n\t\t\t\t<li class=\"hub-list__placeholder\" aria-hidden=\"true\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"placeholderTpt() || defaultPlaceholderTpt\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: dragService.active()?.item }\"\n\t\t\t\t\t></ng-container>\n\t\t\t\t</li>\n\t\t\t}\n\t\t\t<li\n\t\t\t\tclass=\"hub-list__item\"\n\t\t\t\t[ngClass]=\"_getRowClass(items[index])\"\n\t\t\t\t[class.hub-list__item--clickable]=\"clickFn()\"\n\t\t\t\t[class.hub-list__item--selected]=\"formGroup.get('selected')?.value\"\n\t\t\t\t[class.hub-list__item--dragging]=\"isRowDragging(items[index])\"\n\t\t\t\t[class.hub-list__item--drag-disabled]=\"sortable() && isRowDisabled(items[index])\"\n\t\t\t\t[attr.draggable]=\"isDragEnabled(items[index]) ? true : null\"\n\t\t\t\t[attr.data-hub-index]=\"absIndex\"\n\t\t\t\t[attr.tabindex]=\"keyboardSortable() && isDragEnabled(items[index]) ? 0 : null\"\n\t\t\t\t[attr.aria-roledescription]=\"sortable() ? ('DRAG_SORTABLE_ITEM' | translate) : null\"\n\t\t\t\t[attr.aria-grabbed]=\"sortable() ? isRowDragging(items[index]) : null\"\n\t\t\t\t[formGroup]=\"formGroup\"\n\t\t\t\t(click)=\"onItemClick(formGroup.value, depth, index, $event); $event.preventDefault(); $event.stopPropagation()\"\n\t\t\t\t(dragstart)=\"onDragStart($event, containerRef, absIndex, items[index])\"\n\t\t\t\t(dragenter)=\"onDragOver($event, containerRef, absIndex)\"\n\t\t\t\t(dragover)=\"onDragOver($event, containerRef, absIndex)\"\n\t\t\t\t(drop)=\"onDrop($event)\"\n\t\t\t\t(dragend)=\"onDragEnd()\"\n\t\t\t\t(pointerdown)=\"onPointerDown($event, containerRef, absIndex, items[index])\"\n\t\t\t\t(keydown)=\"onItemKeydown($event, containerRef, absIndex, items[index])\"\n\t\t\t>\n\t\t\t\t@if (formGroup.value; as item) {\n\t\t\t\t\t<div class=\"hub-list__item-content\">\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\tclass=\"hub-list__checkbox\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\tdraggable=\"false\"\n\t\t\t\t\t\t\t\tformControlName=\"selected\"\n\t\t\t\t\t\t\t\t(change)=\"onSelectionChange()\"\n\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<div class=\"hub-list__label\">\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"itemTpt() || defaultItemtTpt\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\tdata: items[index],\n\t\t\t\t\t\t\t\t\tdepth,\n\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\tcollapsed: !!formGroup.get('collapsed').value,\n\t\t\t\t\t\t\t\t\tselected: formGroup.get('selected').value\n\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t@if (item[bindChildren()]?.length) {\n\t\t\t\t\t\t\t<div class=\"hub-list__actions\">\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclass=\"hub-list__chevron\"\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tdraggable=\"false\"\n\t\t\t\t\t\t\t\t\t(click)=\"\n\t\t\t\t\t\t\t\t\t\ttoggleCollapsed(formGroup.get('collapsed'));\n\t\t\t\t\t\t\t\t\t\t$event.preventDefault();\n\t\t\t\t\t\t\t\t\t\t$event.stopPropagation()\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\t<i\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__icon\"\n\t\t\t\t\t\t\t\t\t\t[ngClass]=\"\n\t\t\t\t\t\t\t\t\t\t\titem.collapsed ? 'hub-table__icon--chevron-down' : 'hub-table__icon--chevron-up'\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t@if (item[bindChildren()]?.length && !item.collapsed) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"containerTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\tcontrols: formGroup.get('children')?.controls,\n\t\t\t\t\t\t\t\tcontrolsForm: formGroup.get('children'),\n\t\t\t\t\t\t\t\titemsFull: items[index][bindChildren()],\n\t\t\t\t\t\t\t\titems: items[index][bindChildren()],\n\t\t\t\t\t\t\t\tparentItem: items[index],\n\t\t\t\t\t\t\t\tisRoot: false,\n\t\t\t\t\t\t\t\tdepth: depth + 1\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t\t@if (sortable() && showPlaceholderAtEnd(controlsForm, isRoot, controls.length)) {\n\t\t\t<li class=\"hub-list__placeholder\" aria-hidden=\"true\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"placeholderTpt() || defaultPlaceholderTpt\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: dragService.active()?.item }\"\n\t\t\t\t></ng-container>\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n\n@if (sortable() && keyboardSortable()) {\n\t<div class=\"hub-list__sr-only\" role=\"status\" aria-live=\"polite\">\n\t\t@if (announcement(); as message) {\n\t\t\t{{ message.key | translate: message.params }}\n\t\t}\n\t</div>\n}\n\n@if (paginate()) {\n\t<div class=\"hub-list__bottom-bar\">\n\t\t<hub-paginator\n\t\t\tclass=\"hub-list__bottom-bar-paginator\"\n\t\t\t[(page)]=\"page\"\n\t\t\t[numberOfPages]=\"numberOfPages()\"\n\t\t\t[rtl]=\"isRtl()\"\n\t\t></hub-paginator>\n\t\t<div class=\"hub-list__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<select\n\t\t\t\tclass=\"hub-paginator__select\"\n\t\t\t\t[ngModel]=\"perPage()\"\n\t\t\t\t(ngModelChange)=\"onPerPageChange($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t>\n\t\t\t\t@for (option of perPageOptions(); track option) {\n\t\t\t\t\t<option [ngValue]=\"option\" class=\"hub-paginator__select-option\">\n\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t</option>\n\t\t\t\t}\n\t\t\t</select>\n\t\t</div>\n\t\t<p class=\"hub-list__bottom-bar-info hub-paginator__info\">\n\t\t\t{{\n\t\t\t\t'SHOWING_X_OF_Y_ROWS'\n\t\t\t\t\t| translate\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tamount: getVisibleItems(items, true).length,\n\t\t\t\t\t\t\t\ttotal: getEffectiveTotalItems()\n\t\t\t\t\t\t  }\n\t\t\t\t\t| ucfirst\n\t\t\t}}\n\t\t</p>\n\t</div>\n}\n\n<ng-template #defaultNoResultsTpt>\n\t<div class=\"hub-list__no-results\" role=\"alert\">\n\t\t<i class=\"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-list__loading\" role=\"status\">\n\t\t<i class=\"hub-table__icon hub-table__icon--info hub-table__icon--2x\" aria-hidden=\"true\"></i>\n\t\t{{ 'LOADING' | translate | ucfirst }}\n\t</div>\n</ng-template>\n\n<ng-template #defaultErrorTpt>\n\t<div class=\"hub-list__error text-danger\" role=\"alert\">\n\t\t<i class=\"hub-table__icon hub-table__icon--info hub-table__icon--2x\" aria-hidden=\"true\"></i>\n\t\t{{ 'ERROR_OCURRED' | translate | ucfirst }}\n\t</div>\n</ng-template>\n\n<ng-template #defaultPlaceholderTpt>\n\t<div class=\"hub-list__placeholder-inner\" aria-hidden=\"true\"></div>\n</ng-template>\n\n<ng-template #defaultItemtTpt let-data=\"data\">\n\t{{ data[bindLabel()] }}\n</ng-template>\n", styles: [":root,:host{--hub-list-checkbox-size: 1rem;--hub-list-chevron-size: var(--hub-ref-icon-size, 1em);--hub-list-bg: transparent;--hub-list-border-radius: var(--hub-ref-radius-md, .375rem);--hub-list-padding-x: var(--hub-ref-space-0, 0);--hub-list-padding-y: var(--hub-ref-space-0, 0);--hub-list-gap: var(--hub-ref-space-4, 1.5rem);--hub-list-items-bg: transparent;--hub-list-items-gap: var(--hub-ref-space-2, .5rem);--hub-list-empty-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-list-empty-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-list-empty-color: var(--hub-sys-text-muted, #6c757d);--hub-list-empty-padding-x: var(--hub-ref-space-3, 1rem);--hub-list-empty-padding-y: var(--hub-ref-space-3, 1rem);--hub-list-item-bg: var(--hub-sys-surface-page, #ffffff);--hub-list-item-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-list-item-border-width: 1px;--hub-list-item-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-list-item-color: var(--hub-sys-text-primary, #212529);--hub-list-item-gap: var(--hub-ref-space-2, .5rem);--hub-list-item-hover-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-list-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-list-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-list-children-gap: var(--hub-list-item-padding-y);--hub-list-accent: var(--hub-sys-color-primary, #0d6efd);--hub-list-item-selected-bg: var(--hub-list-accent);--hub-list-item-selected-color: var(--hub-ref-color-white, #fff);--hub-list-cards-min-column-width: 18rem;--hub-list-cards-gap: var(--hub-list-items-gap);--hub-list-cards-columns: auto-fit;--hub-list-cards-row-gap: var(--hub-list-cards-gap);--hub-list-cards-column-gap: var(--hub-list-cards-gap);--hub-list-cards-bg: var(--hub-list-item-bg, transparent);--hub-list-cards-color: var(--hub-list-item-color);--hub-list-cards-padding-x: var(--hub-list-item-padding-x);--hub-list-cards-padding-y: var(--hub-list-item-padding-y);--hub-list-cards-border-color: var(--hub-list-item-border-color);--hub-list-cards-border-width: var(--hub-list-item-border-width, 1px);--hub-list-cards-border-radius: var(--hub-list-item-border-radius);--hub-list-cards-shadow: none;--hub-list-cards-hover-bg: var(--hub-list-item-hover-bg);--hub-list-cards-hover-shadow: var(--hub-list-cards-shadow);--hub-list-cards-transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;--hub-list-top-bar-gap: var(--hub-ref-space-2, .5rem);--hub-list-top-bar-justify-content: end;--hub-list-top-bar-align-items: center;--hub-list-top-bar-wrap: wrap;--hub-list-batch-actions-gap: var(--hub-ref-space-2, .5rem);--hub-list-bottom-bar-gap: var(--hub-ref-space-3, 1rem);--hub-list-bottom-bar-justify-content: space-around;--hub-list-bottom-bar-align-items: center;--hub-list-bottom-bar-wrap: wrap;--hub-list-bottom-bar-paginator-order: 1;--hub-list-bottom-bar-settings-order: 2;--hub-list-bottom-bar-info-order: 3;--hub-list-bottom-bar-paginator-flex: 0 0 auto;--hub-list-bottom-bar-settings-flex: 0 0 auto;--hub-list-bottom-bar-info-flex: 0 0 auto;--hub-list-search-btn-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-list-search-btn-color: var(--hub-sys-text-primary, #212529);--hub-list-search-button-min-width: 2.75rem;--hub-list-search-input-bg: var(--hub-sys-surface-page, #ffffff);--hub-list-search-input-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-list-search-input-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-list-search-input-color: var(--hub-sys-text-primary, #212529);--hub-list-search-border-color: var(--hub-list-search-input-border-color);--hub-list-search-border-width: 1px;--hub-list-search-border-radius: var(--hub-list-search-input-border-radius);--hub-list-search-input-padding-x: .75rem;--hub-list-search-input-padding-y: .375rem;--hub-list-search-input-font-size: 1rem;--hub-list-action-btn-bg: var(--hub-sys-surface-page, #ffffff);--hub-list-action-btn-color: var(--hub-list-item-color);--hub-list-action-btn-border-color: var(--hub-list-item-border-color);--hub-list-action-btn-border-radius: var(--hub-list-item-border-radius);--hub-list-action-btn-padding-y: .375rem;--hub-list-action-btn-padding-x: .75rem;--hub-list-action-btn-hover-bg: var(--hub-list-item-hover-bg);--hub-list-drag-handle-color: var(--hub-sys-text-muted, #6c757d);--hub-list-drag-handle-cursor: grab;--hub-list-drag-handle-size: var(--hub-ref-icon-size, 1em);--hub-list-item-dragging-opacity: .5;--hub-list-item-dragging-cursor: grabbing;--hub-list-drop-target-outline-color: var(--hub-list-accent);--hub-list-drop-target-outline-width: 2px;--hub-list-placeholder-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-list-placeholder-border-color: var(--hub-list-accent);--hub-list-placeholder-border-width: 2px;--hub-list-placeholder-border-style: dashed;--hub-list-placeholder-border-radius: var(--hub-list-item-border-radius);--hub-list-placeholder-min-height: 2.5rem;--hub-list-ghost-opacity: .85;--hub-list-ghost-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)}:host{display:flex;flex-direction:column;gap:var(--hub-list-gap);padding:var(--hub-list-padding-y) var(--hub-list-padding-x);background-color:var(--hub-list-bg);border-radius:var(--hub-list-border-radius)}:host .hub-list__bottom-bar{display:flex;justify-content:var(--hub-list-bottom-bar-justify-content);align-items:var(--hub-list-bottom-bar-align-items);flex-wrap:var(--hub-list-bottom-bar-wrap);gap:var(--hub-list-bottom-bar-gap)}:host .hub-list__bottom-bar-paginator{order:var(--hub-list-bottom-bar-paginator-order);flex:var(--hub-list-bottom-bar-paginator-flex);overflow:auto;margin:0}:host .hub-list__bottom-bar-settings{order:var(--hub-list-bottom-bar-settings-order);flex:var(--hub-list-bottom-bar-settings-flex);margin:0}:host .hub-list__bottom-bar-info{order:var(--hub-list-bottom-bar-info-order);flex:var(--hub-list-bottom-bar-info-flex);margin:0}:host .hub-list__top-bar{display:flex;align-items:var(--hub-list-top-bar-align-items);justify-content:var(--hub-list-top-bar-justify-content);flex-wrap:var(--hub-list-top-bar-wrap);gap:var(--hub-list-top-bar-gap);direction:ltr}:host .hub-list__batch-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--hub-list-batch-actions-gap)}:host .hub-list__batch-action-btn{display:inline-flex;align-items:center;gap:.35rem}:host .hub-list__batch-action-btn--default{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:var(--hub-list-action-btn-padding-y) var(--hub-list-action-btn-padding-x);color:var(--hub-list-action-btn-color);background-color:var(--hub-list-action-btn-bg);border:1px solid var(--hub-list-action-btn-border-color);border-radius:var(--hub-list-action-btn-border-radius);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,color .15s ease-in-out}:host .hub-list__batch-action-btn--default:hover:not(:disabled){background-color:var(--hub-list-action-btn-hover-bg)}:host .hub-list__search{margin-left:auto}:host.hub-list--rtl{direction:rtl}:host.hub-list--rtl .hub-list__items .hub-list__items{padding-left:0;padding-right:var(--hub-list-item-padding-x)}:host.hub-list--rtl .hub-list__search{direction:ltr;order:1;margin-left:0;margin-right:auto}:host.hub-list--rtl .hub-list__search-input{direction:ltr;text-align:right;border-radius:0 var(--hub-list-search-border-radius) var(--hub-list-search-border-radius) 0!important}:host.hub-list--rtl .hub-list__search-btn{border-radius:var(--hub-list-search-border-radius) 0 0 var(--hub-list-search-border-radius)!important}:host.hub-list--rtl .hub-list__batch-actions{order:2;flex-direction:row-reverse;margin-left:auto;margin-right:0}.hub-list__items{display:flex;flex-direction:column;gap:var(--hub-list-items-gap);background-color:var(--hub-list-items-bg);list-style:none;margin:0;padding:0}.hub-list__items .hub-list__items{margin-top:var(--hub-list-children-gap);padding-left:var(--hub-list-item-padding-x);padding-right:0;padding-top:0;padding-bottom:0;border-radius:0}.hub-list__search{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:end}.hub-list__search-input{position:relative;flex:1 1 auto;width:1%;min-width:0;display:block;width:100%;padding:var(--hub-list-search-input-padding-y) var(--hub-list-search-input-padding-x);font-size:var(--hub-list-search-input-font-size);font-weight:var(--hub-ref-font-weight-base, 400);line-height:var(--hub-ref-line-height-base, 1.5);background-color:var(--hub-list-search-input-bg);border-color:var(--hub-list-search-border-color)!important;color:var(--hub-list-search-input-color);border:var(--hub-list-search-border-width) solid var(--hub-list-search-border-color);border-radius:var(--hub-list-search-border-radius) 0 0 var(--hub-list-search-border-radius)!important}.hub-list__search-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hub-list-search-button-min-width);padding:var(--hub-list-search-input-padding-y) var(--hub-list-search-input-padding-x);background-color:var(--hub-list-search-btn-bg)!important;color:var(--hub-list-search-btn-color)!important;border-color:var(--hub-list-search-border-color)!important;border:var(--hub-list-search-border-width) solid var(--hub-list-search-border-color);border-radius:0 var(--hub-list-search-border-radius) var(--hub-list-search-border-radius) 0!important;cursor:pointer}.hub-list__search-icon{display:inline-block;width:var(--hub-ref-icon-size, 1em);height:var(--hub-ref-icon-size, 1em);background-color:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-image: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\");mask-image: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-list__item{display:flex;flex-direction:column;padding:var(--hub-list-item-padding-y) var(--hub-list-item-padding-x);background-color:var(--hub-list-item-bg);color:var(--hub-list-item-color);border-radius:var(--hub-list-item-border-radius);transition:background-color .15s ease-in-out;position:relative;border:var(--hub-list-item-border-width) solid var(--hub-list-item-border-color)}.hub-list__item--clickable{cursor:pointer}.hub-list__item--clickable:hover{background-color:var(--hub-list-item-hover-bg)}.hub-list__item--selected{background-color:var(--hub-list-item-selected-bg)!important;color:var(--hub-list-item-selected-color);border-color:var(--hub-list-item-selected-bg)}.hub-list__item--selected .hub-list__label,.hub-list__item--selected .hub-list__actions button{color:var(--hub-list-item-selected-color)}.hub-list__item--empty{background-color:var(--hub-list-empty-bg);color:var(--hub-list-empty-color);padding:var(--hub-list-empty-padding-y, var(--hub-ref-space-3, 1rem)) var(--hub-list-empty-padding-x, var(--hub-ref-space-3, 1rem));border-color:var(--hub-list-empty-border-color);text-align:center}.hub-list__items--cards{display:grid;grid-template-columns:repeat(var(--hub-list-cards-columns),minmax(min(100%,var(--hub-list-cards-min-column-width)),1fr));gap:var(--hub-list-cards-row-gap) var(--hub-list-cards-column-gap)}.hub-list__items--cards>.hub-list__item{height:100%;background-color:var(--hub-list-cards-bg);color:var(--hub-list-cards-color);padding:var(--hub-list-cards-padding-y) var(--hub-list-cards-padding-x);border:var(--hub-list-cards-border-width) solid var(--hub-list-cards-border-color);border-radius:var(--hub-list-cards-border-radius);box-shadow:var(--hub-list-cards-shadow);transition:var(--hub-list-cards-transition)}.hub-list__items--cards>.hub-list__item.hub-list__item--clickable:hover{background-color:var(--hub-list-cards-hover-bg);box-shadow:var(--hub-list-cards-hover-shadow)}.hub-list__items--cards .hub-list__item-content{align-items:flex-start}.hub-list__items--cards .hub-list__label{overflow:visible;text-overflow:initial;white-space:normal}.hub-list__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}.hub-list__item-content{display:flex;justify-content:space-between;align-items:center;gap:var(--hub-list-item-gap);width:100%}.hub-list__checkbox{width:var(--hub-list-checkbox-size);height:var(--hub-list-checkbox-size);flex-shrink:0;cursor:pointer}.hub-list__actions{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem)}.hub-list__chevron{padding:0;font-size:var(--hub-list-chevron-size);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer}.hub-list__no-results{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem)}.hub-list__drag-handle{display:inline-flex;align-items:center;justify-content:center;font-size:var(--hub-list-drag-handle-size);color:var(--hub-list-drag-handle-color);cursor:var(--hub-list-drag-handle-cursor);touch-action:none;-webkit-user-select:none;user-select:none}.hub-list__item--dragging{opacity:var(--hub-list-item-dragging-opacity);cursor:var(--hub-list-item-dragging-cursor)}.hub-list__item--drag-disabled .hub-list__drag-handle{cursor:not-allowed;opacity:.4}.hub-list__placeholder{list-style:none;pointer-events:none;min-height:var(--hub-list-placeholder-min-height);background-color:var(--hub-list-placeholder-bg);border:var(--hub-list-placeholder-border-width) var(--hub-list-placeholder-border-style) var(--hub-list-placeholder-border-color);border-radius:var(--hub-list-placeholder-border-radius)}.hub-list__items--cards>.hub-list__placeholder{height:100%}.hub-list__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host([data-variant=primary]),.hub-list[data-variant=primary]{--hub-list-accent: var(--hub-sys-color-primary)}:host([data-variant=success]),.hub-list[data-variant=success]{--hub-list-accent: var(--hub-sys-color-success)}:host([data-variant=danger]),.hub-list[data-variant=danger]{--hub-list-accent: var(--hub-sys-color-danger)}:host([data-variant=warning]),.hub-list[data-variant=warning]{--hub-list-accent: var(--hub-sys-color-warning)}:host([data-variant=info]),.hub-list[data-variant=info]{--hub-list-accent: var(--hub-sys-color-info)}\n"], dependencies: [{ 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: PaginatorComponent, selector: "hub-paginator, paginable-table-paginator", inputs: ["rtl", "page", "numberOfPages"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PaginableStateOutlet, selector: "hub-state-outlet", inputs: ["template", "instanceDefault", "globalDefault", "fallback", "context"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UcfirstPipe, name: "ucfirst" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hub-list, hub-ui-list, hub-paginable-list', host: {
                         class: 'hub-list',
-                        '[class.hub-list--rtl]': 'isRtl()'
+                        '[class.hub-list--rtl]': 'isRtl()',
+                        '[attr.data-variant]': 'options.variant ?? null',
+                        '[attr.data-hub-drag-owner]': '_listId'
                     }, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -2203,12 +3093,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         NgTemplateOutlet,
                         NgClass,
                         PaginableStateOutlet
-                    ], standalone: true, template: "@if (batchActions.length || options.searchable) {\n\t<div class=\"hub-list__top-bar\">\n\t\t@if (batchActions.length) {\n\t\t\t<div class=\"hub-list__batch-actions\">\n\t\t\t\t@for (action of batchActions; track $index) {\n\t\t\t\t\t@if (!$any(action).buttons?.length) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"hub-list__batch-action-btn\"\n\t\t\t\t\t\t\t[ngClass]=\"getBatchActionClassList(action)\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"handleBatchAction(action)\"\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 (action.icon) {\n\t\t\t\t\t\t\t\t<i class=\"{{ action.icon }}\"></i>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ action.title }}\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 (options.searchable) {\n\t\t\t<div class=\"hub-list__search\">\n\t\t\t\t@if (isRtl()) {\n\t\t\t\t\t<button class=\"hub-list__search-btn\" type=\"button\" (click)=\"filter()\">\n\t\t\t\t\t\t<i class=\"hub-list__search-icon\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</button>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-list__search-input\"\n\t\t\t\t\t\t[formControl]=\"searchFG\"\n\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t(keyup.enter)=\"filter()\"\n\t\t\t\t\t/>\n\t\t\t\t} @else {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-list__search-input\"\n\t\t\t\t\t\t[formControl]=\"searchFG\"\n\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t(keyup.enter)=\"filter()\"\n\t\t\t\t\t/>\n\t\t\t\t\t<button class=\"hub-list__search-btn\" type=\"button\" (click)=\"filter()\">\n\t\t\t\t\t\t<i class=\"hub-list__search-icon\" 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</div>\n}\n\n@if (loading()) {\n\t<ul class=\"hub-list__items hub-list__items--root\">\n\t\t<li class=\"hub-list__item hub-list__item--state\">\n\t\t\t<hub-state-outlet\n\t\t\t\t[template]=\"loadingTpt()\"\n\t\t\t\t[instanceDefault]=\"loadingComponent()\"\n\t\t\t\t[globalDefault]=\"defaults.loading()\"\n\t\t\t\t[fallback]=\"defaultLoadingTpt\"\n\t\t\t/>\n\t\t</li>\n\t</ul>\n} @else if (error()) {\n\t<ul class=\"hub-list__items hub-list__items--root\">\n\t\t<li class=\"hub-list__item hub-list__item--state\">\n\t\t\t<hub-state-outlet\n\t\t\t\t[template]=\"errorTpt()\"\n\t\t\t\t[instanceDefault]=\"errorComponent()\"\n\t\t\t\t[globalDefault]=\"defaults.error()\"\n\t\t\t\t[fallback]=\"defaultErrorTpt\"\n\t\t\t\t[context]=\"{ error: error() }\"\n\t\t\t/>\n\t\t</li>\n\t</ul>\n} @else if (!getVisibleItems(items, true).length) {\n\t<ul class=\"hub-list__items hub-list__items--root\">\n\t\t<li class=\"hub-list__item hub-list__item--empty\">\n\t\t\t<hub-state-outlet\n\t\t\t\t[template]=\"noResultsTpt()\"\n\t\t\t\t[instanceDefault]=\"noResultsComponent()\"\n\t\t\t\t[globalDefault]=\"defaults.noResults()\"\n\t\t\t\t[fallback]=\"defaultNoResultsTpt\"\n\t\t\t/>\n\t\t</li>\n\t</ul>\n} @else {\n\t<ng-container\n\t\t[ngTemplateOutlet]=\"containerTpt\"\n\t\t[ngTemplateOutletContext]=\"{\n\t\t\tcontrols: getVisibleControls(form.controls, true),\n\t\t\tisRoot: true,\n\t\t\titems: getVisibleItems(items, true),\n\t\t\tdepth: 0\n\t\t}\"\n\t></ng-container>\n}\n\n<ng-template #containerTpt let-controls=\"controls\" let-isRoot=\"isRoot\" let-items=\"items\" let-depth=\"depth\">\n\t<ul\n\t\tclass=\"hub-list__items\"\n\t\t[class.hub-list__items--root]=\"isRoot\"\n\t\t[class.hub-list__items--cards]=\"isRoot && isCardsDisplay()\"\n\t>\n\t\t@for (formGroup of controls; track getTrackKey(formGroup.get('data')?.value, $index); let index = $index) {\n\t\t\t<li\n\t\t\t\tclass=\"hub-list__item\"\n\t\t\t\t[ngClass]=\"_getRowClass(items[index])\"\n\t\t\t\t[class.hub-list__item--clickable]=\"clickFn()\"\n\t\t\t\t[class.hub-list__item--selected]=\"formGroup.get('selected')?.value\"\n\t\t\t\t[formGroup]=\"formGroup\"\n\t\t\t\t(click)=\"onItemClick(formGroup.value, depth, index, $event); $event.preventDefault(); $event.stopPropagation()\"\n\t\t\t>\n\t\t\t\t@if (formGroup.value; as item) {\n\t\t\t\t\t<div class=\"hub-list__item-content\">\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\tclass=\"hub-list__checkbox\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\tformControlName=\"selected\"\n\t\t\t\t\t\t\t\t(change)=\"onSelectionChange()\"\n\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<div class=\"hub-list__label\">\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"itemTpt() || defaultItemtTpt\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\tdata: items[index],\n\t\t\t\t\t\t\t\t\tdepth,\n\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\tcollapsed: !!formGroup.get('collapsed').value,\n\t\t\t\t\t\t\t\t\tselected: formGroup.get('selected').value\n\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t@if (item[bindChildren()]?.length) {\n\t\t\t\t\t\t\t<div class=\"hub-list__actions\">\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclass=\"hub-list__chevron\"\n\t\t\t\t\t\t\t\t\t(click)=\"\n\t\t\t\t\t\t\t\t\t\ttoggleCollapsed(formGroup.get('collapsed'));\n\t\t\t\t\t\t\t\t\t\t$event.preventDefault();\n\t\t\t\t\t\t\t\t\t\t$event.stopPropagation()\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\t<i\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__icon\"\n\t\t\t\t\t\t\t\t\t\t[ngClass]=\"\n\t\t\t\t\t\t\t\t\t\t\titem.collapsed ? 'hub-table__icon--chevron-down' : 'hub-table__icon--chevron-up'\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t@if (item[bindChildren()]?.length && !item.collapsed) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"containerTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\tcontrols: formGroup.get('children')?.controls,\n\t\t\t\t\t\t\t\titems: items[index][bindChildren()],\n\t\t\t\t\t\t\t\tisRoot: false,\n\t\t\t\t\t\t\t\tdepth: depth + 1\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n\n@if (paginate()) {\n\t<div class=\"hub-list__bottom-bar\">\n\t\t<hub-paginator\n\t\t\tclass=\"hub-list__bottom-bar-paginator\"\n\t\t\t[(page)]=\"page\"\n\t\t\t[numberOfPages]=\"numberOfPages()\"\n\t\t\t[rtl]=\"isRtl()\"\n\t\t></hub-paginator>\n\t\t<div class=\"hub-list__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<select\n\t\t\t\tclass=\"hub-paginator__select\"\n\t\t\t\t[ngModel]=\"perPage()\"\n\t\t\t\t(ngModelChange)=\"onPerPageChange($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t>\n\t\t\t\t@for (option of perPageOptions(); track option) {\n\t\t\t\t\t<option [ngValue]=\"option\" class=\"hub-paginator__select-option\">\n\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t</option>\n\t\t\t\t}\n\t\t\t</select>\n\t\t</div>\n\t\t<p class=\"hub-list__bottom-bar-info hub-paginator__info\">\n\t\t\t{{\n\t\t\t\t'SHOWING_X_OF_Y_ROWS'\n\t\t\t\t\t| translate\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tamount: getVisibleItems(items, true).length,\n\t\t\t\t\t\t\t\ttotal: getEffectiveTotalItems()\n\t\t\t\t\t\t  }\n\t\t\t\t\t| ucfirst\n\t\t\t}}\n\t\t</p>\n\t</div>\n}\n\n<ng-template #defaultNoResultsTpt>\n\t<div class=\"hub-list__no-results\" role=\"alert\">\n\t\t<i class=\"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-list__loading\" role=\"status\">\n\t\t<i class=\"hub-table__icon hub-table__icon--info hub-table__icon--2x\" aria-hidden=\"true\"></i>\n\t\t{{ 'LOADING' | translate | ucfirst }}\n\t</div>\n</ng-template>\n\n<ng-template #defaultErrorTpt>\n\t<div class=\"hub-list__error text-danger\" role=\"alert\">\n\t\t<i class=\"hub-table__icon hub-table__icon--info hub-table__icon--2x\" aria-hidden=\"true\"></i>\n\t\t{{ 'ERROR_OCURRED' | translate | ucfirst }}\n\t</div>\n</ng-template>\n\n<ng-template #defaultItemtTpt let-data=\"data\">\n\t{{ data[bindLabel()] }}\n</ng-template>\n", styles: [":root,:host{--hub-list-checkbox-size: 1rem;--hub-list-chevron-size: var(--hub-ref-icon-size, 1em);--hub-list-bg: transparent;--hub-list-border-radius: var(--hub-ref-radius-md, .375rem);--hub-list-padding-x: var(--hub-ref-space-0, 0);--hub-list-padding-y: var(--hub-ref-space-0, 0);--hub-list-gap: var(--hub-ref-space-4, 1.5rem);--hub-list-items-bg: transparent;--hub-list-items-gap: var(--hub-ref-space-2, .5rem);--hub-list-empty-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-list-empty-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-list-empty-color: var(--hub-sys-text-muted, #6c757d);--hub-list-empty-padding-x: var(--hub-ref-space-3, 1rem);--hub-list-empty-padding-y: var(--hub-ref-space-3, 1rem);--hub-list-item-bg: var(--hub-sys-surface-page, #ffffff);--hub-list-item-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-list-item-border-width: 1px;--hub-list-item-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-list-item-color: var(--hub-sys-text-primary, #212529);--hub-list-item-gap: var(--hub-ref-space-2, .5rem);--hub-list-item-hover-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-list-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-list-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-list-children-gap: var(--hub-list-item-padding-y);--hub-list-item-selected-bg: var(--hub-sys-color-primary, #0d6efd);--hub-list-item-selected-color: var(--hub-ref-color-white, #fff);--hub-list-cards-min-column-width: 18rem;--hub-list-cards-gap: var(--hub-list-items-gap);--hub-list-cards-columns: auto-fit;--hub-list-cards-row-gap: var(--hub-list-cards-gap);--hub-list-cards-column-gap: var(--hub-list-cards-gap);--hub-list-cards-bg: var(--hub-list-item-bg, transparent);--hub-list-cards-color: var(--hub-list-item-color);--hub-list-cards-padding-x: var(--hub-list-item-padding-x);--hub-list-cards-padding-y: var(--hub-list-item-padding-y);--hub-list-cards-border-color: var(--hub-list-item-border-color);--hub-list-cards-border-width: var(--hub-list-item-border-width, 1px);--hub-list-cards-border-radius: var(--hub-list-item-border-radius);--hub-list-cards-shadow: none;--hub-list-cards-hover-bg: var(--hub-list-item-hover-bg);--hub-list-cards-hover-shadow: var(--hub-list-cards-shadow);--hub-list-cards-transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;--hub-list-top-bar-gap: var(--hub-ref-space-2, .5rem);--hub-list-top-bar-justify-content: end;--hub-list-top-bar-align-items: center;--hub-list-top-bar-wrap: wrap;--hub-list-batch-actions-gap: var(--hub-ref-space-2, .5rem);--hub-list-bottom-bar-gap: var(--hub-ref-space-3, 1rem);--hub-list-bottom-bar-justify-content: space-around;--hub-list-bottom-bar-align-items: center;--hub-list-bottom-bar-wrap: wrap;--hub-list-bottom-bar-paginator-order: 1;--hub-list-bottom-bar-settings-order: 2;--hub-list-bottom-bar-info-order: 3;--hub-list-bottom-bar-paginator-flex: 0 0 auto;--hub-list-bottom-bar-settings-flex: 0 0 auto;--hub-list-bottom-bar-info-flex: 0 0 auto;--hub-list-search-btn-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-list-search-btn-color: var(--hub-sys-text-primary, #212529);--hub-list-search-button-min-width: 2.75rem;--hub-list-search-input-bg: var(--hub-sys-surface-page, #ffffff);--hub-list-search-input-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-list-search-input-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-list-search-input-color: var(--hub-sys-text-primary, #212529);--hub-list-search-border-color: var(--hub-list-search-input-border-color);--hub-list-search-border-width: 1px;--hub-list-search-border-radius: var(--hub-list-search-input-border-radius);--hub-list-search-input-padding-x: .75rem;--hub-list-search-input-padding-y: .375rem;--hub-list-search-input-font-size: 1rem;--hub-list-action-btn-bg: var(--hub-sys-surface-page, #ffffff);--hub-list-action-btn-color: var(--hub-list-item-color);--hub-list-action-btn-border-color: var(--hub-list-item-border-color);--hub-list-action-btn-border-radius: var(--hub-list-item-border-radius);--hub-list-action-btn-padding-y: .375rem;--hub-list-action-btn-padding-x: .75rem;--hub-list-action-btn-hover-bg: var(--hub-list-item-hover-bg)}:host{display:flex;flex-direction:column;gap:var(--hub-list-gap);padding:var(--hub-list-padding-y) var(--hub-list-padding-x);background-color:var(--hub-list-bg);border-radius:var(--hub-list-border-radius)}:host .hub-list__bottom-bar{display:flex;justify-content:var(--hub-list-bottom-bar-justify-content);align-items:var(--hub-list-bottom-bar-align-items);flex-wrap:var(--hub-list-bottom-bar-wrap);gap:var(--hub-list-bottom-bar-gap)}:host .hub-list__bottom-bar-paginator{order:var(--hub-list-bottom-bar-paginator-order);flex:var(--hub-list-bottom-bar-paginator-flex);overflow:auto;margin:0}:host .hub-list__bottom-bar-settings{order:var(--hub-list-bottom-bar-settings-order);flex:var(--hub-list-bottom-bar-settings-flex);margin:0}:host .hub-list__bottom-bar-info{order:var(--hub-list-bottom-bar-info-order);flex:var(--hub-list-bottom-bar-info-flex);margin:0}:host .hub-list__top-bar{display:flex;align-items:var(--hub-list-top-bar-align-items);justify-content:var(--hub-list-top-bar-justify-content);flex-wrap:var(--hub-list-top-bar-wrap);gap:var(--hub-list-top-bar-gap);direction:ltr}:host .hub-list__batch-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--hub-list-batch-actions-gap)}:host .hub-list__batch-action-btn{display:inline-flex;align-items:center;gap:.35rem}:host .hub-list__batch-action-btn--default{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:var(--hub-list-action-btn-padding-y) var(--hub-list-action-btn-padding-x);color:var(--hub-list-action-btn-color);background-color:var(--hub-list-action-btn-bg);border:1px solid var(--hub-list-action-btn-border-color);border-radius:var(--hub-list-action-btn-border-radius);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,color .15s ease-in-out}:host .hub-list__batch-action-btn--default:hover:not(:disabled){background-color:var(--hub-list-action-btn-hover-bg)}:host .hub-list__search{margin-left:auto}:host.hub-list--rtl{direction:rtl}:host.hub-list--rtl .hub-list__items .hub-list__items{padding-left:0;padding-right:var(--hub-list-item-padding-x)}:host.hub-list--rtl .hub-list__search{direction:ltr;order:1;margin-left:0;margin-right:auto}:host.hub-list--rtl .hub-list__search-input{direction:ltr;text-align:right;border-radius:0 var(--hub-list-search-border-radius) var(--hub-list-search-border-radius) 0!important}:host.hub-list--rtl .hub-list__search-btn{border-radius:var(--hub-list-search-border-radius) 0 0 var(--hub-list-search-border-radius)!important}:host.hub-list--rtl .hub-list__batch-actions{order:2;flex-direction:row-reverse;margin-left:auto;margin-right:0}.hub-list__items{display:flex;flex-direction:column;gap:var(--hub-list-items-gap);background-color:var(--hub-list-items-bg);list-style:none;margin:0;padding:0}.hub-list__items .hub-list__items{margin-top:var(--hub-list-children-gap);padding-left:var(--hub-list-item-padding-x);padding-right:0;padding-top:0;padding-bottom:0;border-radius:0}.hub-list__search{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:end}.hub-list__search-input{position:relative;flex:1 1 auto;width:1%;min-width:0;display:block;width:100%;padding:var(--hub-list-search-input-padding-y) var(--hub-list-search-input-padding-x);font-size:var(--hub-list-search-input-font-size);font-weight:400;line-height:1.5;background-color:var(--hub-list-search-input-bg);border-color:var(--hub-list-search-border-color)!important;color:var(--hub-list-search-input-color);border:var(--hub-list-search-border-width) solid var(--hub-list-search-border-color);border-radius:var(--hub-list-search-border-radius) 0 0 var(--hub-list-search-border-radius)!important}.hub-list__search-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hub-list-search-button-min-width);padding:var(--hub-list-search-input-padding-y) var(--hub-list-search-input-padding-x);background-color:var(--hub-list-search-btn-bg)!important;color:var(--hub-list-search-btn-color)!important;border-color:var(--hub-list-search-border-color)!important;border:var(--hub-list-search-border-width) solid var(--hub-list-search-border-color);border-radius:0 var(--hub-list-search-border-radius) var(--hub-list-search-border-radius) 0!important;cursor:pointer}.hub-list__search-icon{display:inline-block;width:var(--hub-ref-icon-size, 1em);height:var(--hub-ref-icon-size, 1em);background-color:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-image: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\");mask-image: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-list__item{display:flex;flex-direction:column;padding:var(--hub-list-item-padding-y) var(--hub-list-item-padding-x);background-color:var(--hub-list-item-bg);color:var(--hub-list-item-color);border-radius:var(--hub-list-item-border-radius);transition:background-color .15s ease-in-out;position:relative;border:var(--hub-list-item-border-width) solid var(--hub-list-item-border-color)}.hub-list__item--clickable{cursor:pointer}.hub-list__item--clickable:hover{background-color:var(--hub-list-item-hover-bg)}.hub-list__item--selected{background-color:var(--hub-list-item-selected-bg)!important;color:var(--hub-list-item-selected-color);border-color:var(--hub-list-item-selected-bg)}.hub-list__item--selected .hub-list__label,.hub-list__item--selected .hub-list__actions button{color:var(--hub-list-item-selected-color)}.hub-list__item--empty{background-color:var(--hub-list-empty-bg);color:var(--hub-list-empty-color);padding:var(--hub-list-empty-padding-y, var(--hub-ref-space-3, 1rem)) var(--hub-list-empty-padding-x, var(--hub-ref-space-3, 1rem));border-color:var(--hub-list-empty-border-color);text-align:center}.hub-list__items--cards{display:grid;grid-template-columns:repeat(var(--hub-list-cards-columns),minmax(min(100%,var(--hub-list-cards-min-column-width)),1fr));gap:var(--hub-list-cards-row-gap) var(--hub-list-cards-column-gap)}.hub-list__items--cards>.hub-list__item{height:100%;background-color:var(--hub-list-cards-bg);color:var(--hub-list-cards-color);padding:var(--hub-list-cards-padding-y) var(--hub-list-cards-padding-x);border:var(--hub-list-cards-border-width) solid var(--hub-list-cards-border-color);border-radius:var(--hub-list-cards-border-radius);box-shadow:var(--hub-list-cards-shadow);transition:var(--hub-list-cards-transition)}.hub-list__items--cards>.hub-list__item.hub-list__item--clickable:hover{background-color:var(--hub-list-cards-hover-bg);box-shadow:var(--hub-list-cards-hover-shadow)}.hub-list__items--cards .hub-list__item-content{align-items:flex-start}.hub-list__items--cards .hub-list__label{overflow:visible;text-overflow:initial;white-space:normal}.hub-list__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}.hub-list__item-content{display:flex;justify-content:space-between;align-items:center;gap:var(--hub-list-item-gap);width:100%}.hub-list__checkbox{width:var(--hub-list-checkbox-size);height:var(--hub-list-checkbox-size);flex-shrink:0;cursor:pointer}.hub-list__actions{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem)}.hub-list__chevron{padding:0;font-size:var(--hub-list-chevron-size);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer}.hub-list__no-results{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem)}\n"] }]
-        }], propDecorators: { 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 }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindChildren", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], paginate: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginate", 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"] }], perPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "perPageOptions", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }, { type: i0.Output, args: ["totalItemsChange"] }], options: [{
+                    ], standalone: true, template: "@if (batchActions.length || options.searchable) {\n\t<div class=\"hub-list__top-bar\">\n\t\t@if (batchActions.length) {\n\t\t\t<div class=\"hub-list__batch-actions\">\n\t\t\t\t@for (action of batchActions; track $index) {\n\t\t\t\t\t@if (!$any(action).buttons?.length) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"hub-list__batch-action-btn\"\n\t\t\t\t\t\t\t[ngClass]=\"getBatchActionClassList(action)\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"handleBatchAction(action)\"\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 (action.icon) {\n\t\t\t\t\t\t\t\t<i class=\"{{ action.icon }}\"></i>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ action.title }}\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 (options.searchable) {\n\t\t\t<div class=\"hub-list__search\">\n\t\t\t\t@if (isRtl()) {\n\t\t\t\t\t<button class=\"hub-list__search-btn\" type=\"button\" (click)=\"filter()\">\n\t\t\t\t\t\t<i class=\"hub-list__search-icon\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</button>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-list__search-input\"\n\t\t\t\t\t\t[formControl]=\"searchFG\"\n\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t(keyup.enter)=\"filter()\"\n\t\t\t\t\t/>\n\t\t\t\t} @else {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-list__search-input\"\n\t\t\t\t\t\t[formControl]=\"searchFG\"\n\t\t\t\t\t\t[placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t(keyup.enter)=\"filter()\"\n\t\t\t\t\t/>\n\t\t\t\t\t<button class=\"hub-list__search-btn\" type=\"button\" (click)=\"filter()\">\n\t\t\t\t\t\t<i class=\"hub-list__search-icon\" 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</div>\n}\n\n@if (loading()) {\n\t<ul class=\"hub-list__items hub-list__items--root\">\n\t\t<li class=\"hub-list__item hub-list__item--state\">\n\t\t\t<hub-state-outlet\n\t\t\t\t[template]=\"loadingTpt()\"\n\t\t\t\t[instanceDefault]=\"loadingComponent()\"\n\t\t\t\t[globalDefault]=\"defaults.loading()\"\n\t\t\t\t[fallback]=\"defaultLoadingTpt\"\n\t\t\t/>\n\t\t</li>\n\t</ul>\n} @else if (error()) {\n\t<ul class=\"hub-list__items hub-list__items--root\">\n\t\t<li class=\"hub-list__item hub-list__item--state\">\n\t\t\t<hub-state-outlet\n\t\t\t\t[template]=\"errorTpt()\"\n\t\t\t\t[instanceDefault]=\"errorComponent()\"\n\t\t\t\t[globalDefault]=\"defaults.error()\"\n\t\t\t\t[fallback]=\"defaultErrorTpt\"\n\t\t\t\t[context]=\"{ error: error() }\"\n\t\t\t/>\n\t\t</li>\n\t</ul>\n} @else if (!getVisibleItems(items, true).length) {\n\t<ul class=\"hub-list__items hub-list__items--root\">\n\t\t<li class=\"hub-list__item hub-list__item--empty\">\n\t\t\t<hub-state-outlet\n\t\t\t\t[template]=\"noResultsTpt()\"\n\t\t\t\t[instanceDefault]=\"noResultsComponent()\"\n\t\t\t\t[globalDefault]=\"defaults.noResults()\"\n\t\t\t\t[fallback]=\"defaultNoResultsTpt\"\n\t\t\t/>\n\t\t</li>\n\t</ul>\n} @else {\n\t<ng-container\n\t\t[ngTemplateOutlet]=\"containerTpt\"\n\t\t[ngTemplateOutletContext]=\"{\n\t\t\tcontrols: getVisibleControls(form.controls, true),\n\t\t\tcontrolsForm: form,\n\t\t\titemsFull: items,\n\t\t\titems: getVisibleItems(items, true),\n\t\t\tparentItem: null,\n\t\t\tisRoot: true,\n\t\t\tdepth: 0\n\t\t}\"\n\t></ng-container>\n}\n\n<ng-template\n\t#containerTpt\n\tlet-controls=\"controls\"\n\tlet-controlsForm=\"controlsForm\"\n\tlet-itemsFull=\"itemsFull\"\n\tlet-isRoot=\"isRoot\"\n\tlet-items=\"items\"\n\tlet-parentItem=\"parentItem\"\n\tlet-depth=\"depth\"\n>\n\t@let containerRef = makeContainerRef(controlsForm, itemsFull, parentItem, depth);\n\t<ul\n\t\tclass=\"hub-list__items\"\n\t\t[class.hub-list__items--root]=\"isRoot\"\n\t\t[class.hub-list__items--cards]=\"isRoot && isCardsDisplay()\"\n\t\t[attr.data-hub-container-key]=\"containerRef.key\"\n\t\t(dragover)=\"onContainerDragOver($event, containerRef)\"\n\t\t(drop)=\"onContainerDrop($event)\"\n\t>\n\t\t@for (formGroup of controls; track getTrackKey(formGroup.get('data')?.value, $index); let index = $index) {\n\t\t\t@let absIndex = absoluteIndex(index, isRoot);\n\t\t\t@if (sortable() && showPlaceholderBefore(controlsForm, absIndex)) {\n\t\t\t\t<li class=\"hub-list__placeholder\" aria-hidden=\"true\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"placeholderTpt() || defaultPlaceholderTpt\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: dragService.active()?.item }\"\n\t\t\t\t\t></ng-container>\n\t\t\t\t</li>\n\t\t\t}\n\t\t\t<li\n\t\t\t\tclass=\"hub-list__item\"\n\t\t\t\t[ngClass]=\"_getRowClass(items[index])\"\n\t\t\t\t[class.hub-list__item--clickable]=\"clickFn()\"\n\t\t\t\t[class.hub-list__item--selected]=\"formGroup.get('selected')?.value\"\n\t\t\t\t[class.hub-list__item--dragging]=\"isRowDragging(items[index])\"\n\t\t\t\t[class.hub-list__item--drag-disabled]=\"sortable() && isRowDisabled(items[index])\"\n\t\t\t\t[attr.draggable]=\"isDragEnabled(items[index]) ? true : null\"\n\t\t\t\t[attr.data-hub-index]=\"absIndex\"\n\t\t\t\t[attr.tabindex]=\"keyboardSortable() && isDragEnabled(items[index]) ? 0 : null\"\n\t\t\t\t[attr.aria-roledescription]=\"sortable() ? ('DRAG_SORTABLE_ITEM' | translate) : null\"\n\t\t\t\t[attr.aria-grabbed]=\"sortable() ? isRowDragging(items[index]) : null\"\n\t\t\t\t[formGroup]=\"formGroup\"\n\t\t\t\t(click)=\"onItemClick(formGroup.value, depth, index, $event); $event.preventDefault(); $event.stopPropagation()\"\n\t\t\t\t(dragstart)=\"onDragStart($event, containerRef, absIndex, items[index])\"\n\t\t\t\t(dragenter)=\"onDragOver($event, containerRef, absIndex)\"\n\t\t\t\t(dragover)=\"onDragOver($event, containerRef, absIndex)\"\n\t\t\t\t(drop)=\"onDrop($event)\"\n\t\t\t\t(dragend)=\"onDragEnd()\"\n\t\t\t\t(pointerdown)=\"onPointerDown($event, containerRef, absIndex, items[index])\"\n\t\t\t\t(keydown)=\"onItemKeydown($event, containerRef, absIndex, items[index])\"\n\t\t\t>\n\t\t\t\t@if (formGroup.value; as item) {\n\t\t\t\t\t<div class=\"hub-list__item-content\">\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\tclass=\"hub-list__checkbox\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\tdraggable=\"false\"\n\t\t\t\t\t\t\t\tformControlName=\"selected\"\n\t\t\t\t\t\t\t\t(change)=\"onSelectionChange()\"\n\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<div class=\"hub-list__label\">\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"itemTpt() || defaultItemtTpt\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\tdata: items[index],\n\t\t\t\t\t\t\t\t\tdepth,\n\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\tcollapsed: !!formGroup.get('collapsed').value,\n\t\t\t\t\t\t\t\t\tselected: formGroup.get('selected').value\n\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t@if (item[bindChildren()]?.length) {\n\t\t\t\t\t\t\t<div class=\"hub-list__actions\">\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclass=\"hub-list__chevron\"\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tdraggable=\"false\"\n\t\t\t\t\t\t\t\t\t(click)=\"\n\t\t\t\t\t\t\t\t\t\ttoggleCollapsed(formGroup.get('collapsed'));\n\t\t\t\t\t\t\t\t\t\t$event.preventDefault();\n\t\t\t\t\t\t\t\t\t\t$event.stopPropagation()\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\t<i\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-table__icon\"\n\t\t\t\t\t\t\t\t\t\t[ngClass]=\"\n\t\t\t\t\t\t\t\t\t\t\titem.collapsed ? 'hub-table__icon--chevron-down' : 'hub-table__icon--chevron-up'\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t@if (item[bindChildren()]?.length && !item.collapsed) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"containerTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\tcontrols: formGroup.get('children')?.controls,\n\t\t\t\t\t\t\t\tcontrolsForm: formGroup.get('children'),\n\t\t\t\t\t\t\t\titemsFull: items[index][bindChildren()],\n\t\t\t\t\t\t\t\titems: items[index][bindChildren()],\n\t\t\t\t\t\t\t\tparentItem: items[index],\n\t\t\t\t\t\t\t\tisRoot: false,\n\t\t\t\t\t\t\t\tdepth: depth + 1\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t\t@if (sortable() && showPlaceholderAtEnd(controlsForm, isRoot, controls.length)) {\n\t\t\t<li class=\"hub-list__placeholder\" aria-hidden=\"true\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"placeholderTpt() || defaultPlaceholderTpt\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: dragService.active()?.item }\"\n\t\t\t\t></ng-container>\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n\n@if (sortable() && keyboardSortable()) {\n\t<div class=\"hub-list__sr-only\" role=\"status\" aria-live=\"polite\">\n\t\t@if (announcement(); as message) {\n\t\t\t{{ message.key | translate: message.params }}\n\t\t}\n\t</div>\n}\n\n@if (paginate()) {\n\t<div class=\"hub-list__bottom-bar\">\n\t\t<hub-paginator\n\t\t\tclass=\"hub-list__bottom-bar-paginator\"\n\t\t\t[(page)]=\"page\"\n\t\t\t[numberOfPages]=\"numberOfPages()\"\n\t\t\t[rtl]=\"isRtl()\"\n\t\t></hub-paginator>\n\t\t<div class=\"hub-list__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<select\n\t\t\t\tclass=\"hub-paginator__select\"\n\t\t\t\t[ngModel]=\"perPage()\"\n\t\t\t\t(ngModelChange)=\"onPerPageChange($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t>\n\t\t\t\t@for (option of perPageOptions(); track option) {\n\t\t\t\t\t<option [ngValue]=\"option\" class=\"hub-paginator__select-option\">\n\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t</option>\n\t\t\t\t}\n\t\t\t</select>\n\t\t</div>\n\t\t<p class=\"hub-list__bottom-bar-info hub-paginator__info\">\n\t\t\t{{\n\t\t\t\t'SHOWING_X_OF_Y_ROWS'\n\t\t\t\t\t| translate\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tamount: getVisibleItems(items, true).length,\n\t\t\t\t\t\t\t\ttotal: getEffectiveTotalItems()\n\t\t\t\t\t\t  }\n\t\t\t\t\t| ucfirst\n\t\t\t}}\n\t\t</p>\n\t</div>\n}\n\n<ng-template #defaultNoResultsTpt>\n\t<div class=\"hub-list__no-results\" role=\"alert\">\n\t\t<i class=\"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-list__loading\" role=\"status\">\n\t\t<i class=\"hub-table__icon hub-table__icon--info hub-table__icon--2x\" aria-hidden=\"true\"></i>\n\t\t{{ 'LOADING' | translate | ucfirst }}\n\t</div>\n</ng-template>\n\n<ng-template #defaultErrorTpt>\n\t<div class=\"hub-list__error text-danger\" role=\"alert\">\n\t\t<i class=\"hub-table__icon hub-table__icon--info hub-table__icon--2x\" aria-hidden=\"true\"></i>\n\t\t{{ 'ERROR_OCURRED' | translate | ucfirst }}\n\t</div>\n</ng-template>\n\n<ng-template #defaultPlaceholderTpt>\n\t<div class=\"hub-list__placeholder-inner\" aria-hidden=\"true\"></div>\n</ng-template>\n\n<ng-template #defaultItemtTpt let-data=\"data\">\n\t{{ data[bindLabel()] }}\n</ng-template>\n", styles: [":root,:host{--hub-list-checkbox-size: 1rem;--hub-list-chevron-size: var(--hub-ref-icon-size, 1em);--hub-list-bg: transparent;--hub-list-border-radius: var(--hub-ref-radius-md, .375rem);--hub-list-padding-x: var(--hub-ref-space-0, 0);--hub-list-padding-y: var(--hub-ref-space-0, 0);--hub-list-gap: var(--hub-ref-space-4, 1.5rem);--hub-list-items-bg: transparent;--hub-list-items-gap: var(--hub-ref-space-2, .5rem);--hub-list-empty-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-list-empty-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-list-empty-color: var(--hub-sys-text-muted, #6c757d);--hub-list-empty-padding-x: var(--hub-ref-space-3, 1rem);--hub-list-empty-padding-y: var(--hub-ref-space-3, 1rem);--hub-list-item-bg: var(--hub-sys-surface-page, #ffffff);--hub-list-item-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-list-item-border-width: 1px;--hub-list-item-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-list-item-color: var(--hub-sys-text-primary, #212529);--hub-list-item-gap: var(--hub-ref-space-2, .5rem);--hub-list-item-hover-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-list-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-list-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-list-children-gap: var(--hub-list-item-padding-y);--hub-list-accent: var(--hub-sys-color-primary, #0d6efd);--hub-list-item-selected-bg: var(--hub-list-accent);--hub-list-item-selected-color: var(--hub-ref-color-white, #fff);--hub-list-cards-min-column-width: 18rem;--hub-list-cards-gap: var(--hub-list-items-gap);--hub-list-cards-columns: auto-fit;--hub-list-cards-row-gap: var(--hub-list-cards-gap);--hub-list-cards-column-gap: var(--hub-list-cards-gap);--hub-list-cards-bg: var(--hub-list-item-bg, transparent);--hub-list-cards-color: var(--hub-list-item-color);--hub-list-cards-padding-x: var(--hub-list-item-padding-x);--hub-list-cards-padding-y: var(--hub-list-item-padding-y);--hub-list-cards-border-color: var(--hub-list-item-border-color);--hub-list-cards-border-width: var(--hub-list-item-border-width, 1px);--hub-list-cards-border-radius: var(--hub-list-item-border-radius);--hub-list-cards-shadow: none;--hub-list-cards-hover-bg: var(--hub-list-item-hover-bg);--hub-list-cards-hover-shadow: var(--hub-list-cards-shadow);--hub-list-cards-transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;--hub-list-top-bar-gap: var(--hub-ref-space-2, .5rem);--hub-list-top-bar-justify-content: end;--hub-list-top-bar-align-items: center;--hub-list-top-bar-wrap: wrap;--hub-list-batch-actions-gap: var(--hub-ref-space-2, .5rem);--hub-list-bottom-bar-gap: var(--hub-ref-space-3, 1rem);--hub-list-bottom-bar-justify-content: space-around;--hub-list-bottom-bar-align-items: center;--hub-list-bottom-bar-wrap: wrap;--hub-list-bottom-bar-paginator-order: 1;--hub-list-bottom-bar-settings-order: 2;--hub-list-bottom-bar-info-order: 3;--hub-list-bottom-bar-paginator-flex: 0 0 auto;--hub-list-bottom-bar-settings-flex: 0 0 auto;--hub-list-bottom-bar-info-flex: 0 0 auto;--hub-list-search-btn-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-list-search-btn-color: var(--hub-sys-text-primary, #212529);--hub-list-search-button-min-width: 2.75rem;--hub-list-search-input-bg: var(--hub-sys-surface-page, #ffffff);--hub-list-search-input-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-list-search-input-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-list-search-input-color: var(--hub-sys-text-primary, #212529);--hub-list-search-border-color: var(--hub-list-search-input-border-color);--hub-list-search-border-width: 1px;--hub-list-search-border-radius: var(--hub-list-search-input-border-radius);--hub-list-search-input-padding-x: .75rem;--hub-list-search-input-padding-y: .375rem;--hub-list-search-input-font-size: 1rem;--hub-list-action-btn-bg: var(--hub-sys-surface-page, #ffffff);--hub-list-action-btn-color: var(--hub-list-item-color);--hub-list-action-btn-border-color: var(--hub-list-item-border-color);--hub-list-action-btn-border-radius: var(--hub-list-item-border-radius);--hub-list-action-btn-padding-y: .375rem;--hub-list-action-btn-padding-x: .75rem;--hub-list-action-btn-hover-bg: var(--hub-list-item-hover-bg);--hub-list-drag-handle-color: var(--hub-sys-text-muted, #6c757d);--hub-list-drag-handle-cursor: grab;--hub-list-drag-handle-size: var(--hub-ref-icon-size, 1em);--hub-list-item-dragging-opacity: .5;--hub-list-item-dragging-cursor: grabbing;--hub-list-drop-target-outline-color: var(--hub-list-accent);--hub-list-drop-target-outline-width: 2px;--hub-list-placeholder-bg: var(--hub-ref-surface-2, #f8f9fa);--hub-list-placeholder-border-color: var(--hub-list-accent);--hub-list-placeholder-border-width: 2px;--hub-list-placeholder-border-style: dashed;--hub-list-placeholder-border-radius: var(--hub-list-item-border-radius);--hub-list-placeholder-min-height: 2.5rem;--hub-list-ghost-opacity: .85;--hub-list-ghost-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)}:host{display:flex;flex-direction:column;gap:var(--hub-list-gap);padding:var(--hub-list-padding-y) var(--hub-list-padding-x);background-color:var(--hub-list-bg);border-radius:var(--hub-list-border-radius)}:host .hub-list__bottom-bar{display:flex;justify-content:var(--hub-list-bottom-bar-justify-content);align-items:var(--hub-list-bottom-bar-align-items);flex-wrap:var(--hub-list-bottom-bar-wrap);gap:var(--hub-list-bottom-bar-gap)}:host .hub-list__bottom-bar-paginator{order:var(--hub-list-bottom-bar-paginator-order);flex:var(--hub-list-bottom-bar-paginator-flex);overflow:auto;margin:0}:host .hub-list__bottom-bar-settings{order:var(--hub-list-bottom-bar-settings-order);flex:var(--hub-list-bottom-bar-settings-flex);margin:0}:host .hub-list__bottom-bar-info{order:var(--hub-list-bottom-bar-info-order);flex:var(--hub-list-bottom-bar-info-flex);margin:0}:host .hub-list__top-bar{display:flex;align-items:var(--hub-list-top-bar-align-items);justify-content:var(--hub-list-top-bar-justify-content);flex-wrap:var(--hub-list-top-bar-wrap);gap:var(--hub-list-top-bar-gap);direction:ltr}:host .hub-list__batch-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--hub-list-batch-actions-gap)}:host .hub-list__batch-action-btn{display:inline-flex;align-items:center;gap:.35rem}:host .hub-list__batch-action-btn--default{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:var(--hub-list-action-btn-padding-y) var(--hub-list-action-btn-padding-x);color:var(--hub-list-action-btn-color);background-color:var(--hub-list-action-btn-bg);border:1px solid var(--hub-list-action-btn-border-color);border-radius:var(--hub-list-action-btn-border-radius);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,color .15s ease-in-out}:host .hub-list__batch-action-btn--default:hover:not(:disabled){background-color:var(--hub-list-action-btn-hover-bg)}:host .hub-list__search{margin-left:auto}:host.hub-list--rtl{direction:rtl}:host.hub-list--rtl .hub-list__items .hub-list__items{padding-left:0;padding-right:var(--hub-list-item-padding-x)}:host.hub-list--rtl .hub-list__search{direction:ltr;order:1;margin-left:0;margin-right:auto}:host.hub-list--rtl .hub-list__search-input{direction:ltr;text-align:right;border-radius:0 var(--hub-list-search-border-radius) var(--hub-list-search-border-radius) 0!important}:host.hub-list--rtl .hub-list__search-btn{border-radius:var(--hub-list-search-border-radius) 0 0 var(--hub-list-search-border-radius)!important}:host.hub-list--rtl .hub-list__batch-actions{order:2;flex-direction:row-reverse;margin-left:auto;margin-right:0}.hub-list__items{display:flex;flex-direction:column;gap:var(--hub-list-items-gap);background-color:var(--hub-list-items-bg);list-style:none;margin:0;padding:0}.hub-list__items .hub-list__items{margin-top:var(--hub-list-children-gap);padding-left:var(--hub-list-item-padding-x);padding-right:0;padding-top:0;padding-bottom:0;border-radius:0}.hub-list__search{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:end}.hub-list__search-input{position:relative;flex:1 1 auto;width:1%;min-width:0;display:block;width:100%;padding:var(--hub-list-search-input-padding-y) var(--hub-list-search-input-padding-x);font-size:var(--hub-list-search-input-font-size);font-weight:var(--hub-ref-font-weight-base, 400);line-height:var(--hub-ref-line-height-base, 1.5);background-color:var(--hub-list-search-input-bg);border-color:var(--hub-list-search-border-color)!important;color:var(--hub-list-search-input-color);border:var(--hub-list-search-border-width) solid var(--hub-list-search-border-color);border-radius:var(--hub-list-search-border-radius) 0 0 var(--hub-list-search-border-radius)!important}.hub-list__search-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hub-list-search-button-min-width);padding:var(--hub-list-search-input-padding-y) var(--hub-list-search-input-padding-x);background-color:var(--hub-list-search-btn-bg)!important;color:var(--hub-list-search-btn-color)!important;border-color:var(--hub-list-search-border-color)!important;border:var(--hub-list-search-border-width) solid var(--hub-list-search-border-color);border-radius:0 var(--hub-list-search-border-radius) var(--hub-list-search-border-radius) 0!important;cursor:pointer}.hub-list__search-icon{display:inline-block;width:var(--hub-ref-icon-size, 1em);height:var(--hub-ref-icon-size, 1em);background-color:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-image: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\");mask-image: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-list__item{display:flex;flex-direction:column;padding:var(--hub-list-item-padding-y) var(--hub-list-item-padding-x);background-color:var(--hub-list-item-bg);color:var(--hub-list-item-color);border-radius:var(--hub-list-item-border-radius);transition:background-color .15s ease-in-out;position:relative;border:var(--hub-list-item-border-width) solid var(--hub-list-item-border-color)}.hub-list__item--clickable{cursor:pointer}.hub-list__item--clickable:hover{background-color:var(--hub-list-item-hover-bg)}.hub-list__item--selected{background-color:var(--hub-list-item-selected-bg)!important;color:var(--hub-list-item-selected-color);border-color:var(--hub-list-item-selected-bg)}.hub-list__item--selected .hub-list__label,.hub-list__item--selected .hub-list__actions button{color:var(--hub-list-item-selected-color)}.hub-list__item--empty{background-color:var(--hub-list-empty-bg);color:var(--hub-list-empty-color);padding:var(--hub-list-empty-padding-y, var(--hub-ref-space-3, 1rem)) var(--hub-list-empty-padding-x, var(--hub-ref-space-3, 1rem));border-color:var(--hub-list-empty-border-color);text-align:center}.hub-list__items--cards{display:grid;grid-template-columns:repeat(var(--hub-list-cards-columns),minmax(min(100%,var(--hub-list-cards-min-column-width)),1fr));gap:var(--hub-list-cards-row-gap) var(--hub-list-cards-column-gap)}.hub-list__items--cards>.hub-list__item{height:100%;background-color:var(--hub-list-cards-bg);color:var(--hub-list-cards-color);padding:var(--hub-list-cards-padding-y) var(--hub-list-cards-padding-x);border:var(--hub-list-cards-border-width) solid var(--hub-list-cards-border-color);border-radius:var(--hub-list-cards-border-radius);box-shadow:var(--hub-list-cards-shadow);transition:var(--hub-list-cards-transition)}.hub-list__items--cards>.hub-list__item.hub-list__item--clickable:hover{background-color:var(--hub-list-cards-hover-bg);box-shadow:var(--hub-list-cards-hover-shadow)}.hub-list__items--cards .hub-list__item-content{align-items:flex-start}.hub-list__items--cards .hub-list__label{overflow:visible;text-overflow:initial;white-space:normal}.hub-list__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}.hub-list__item-content{display:flex;justify-content:space-between;align-items:center;gap:var(--hub-list-item-gap);width:100%}.hub-list__checkbox{width:var(--hub-list-checkbox-size);height:var(--hub-list-checkbox-size);flex-shrink:0;cursor:pointer}.hub-list__actions{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem)}.hub-list__chevron{padding:0;font-size:var(--hub-list-chevron-size);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer}.hub-list__no-results{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem)}.hub-list__drag-handle{display:inline-flex;align-items:center;justify-content:center;font-size:var(--hub-list-drag-handle-size);color:var(--hub-list-drag-handle-color);cursor:var(--hub-list-drag-handle-cursor);touch-action:none;-webkit-user-select:none;user-select:none}.hub-list__item--dragging{opacity:var(--hub-list-item-dragging-opacity);cursor:var(--hub-list-item-dragging-cursor)}.hub-list__item--drag-disabled .hub-list__drag-handle{cursor:not-allowed;opacity:.4}.hub-list__placeholder{list-style:none;pointer-events:none;min-height:var(--hub-list-placeholder-min-height);background-color:var(--hub-list-placeholder-bg);border:var(--hub-list-placeholder-border-width) var(--hub-list-placeholder-border-style) var(--hub-list-placeholder-border-color);border-radius:var(--hub-list-placeholder-border-radius)}.hub-list__items--cards>.hub-list__placeholder{height:100%}.hub-list__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host([data-variant=primary]),.hub-list[data-variant=primary]{--hub-list-accent: var(--hub-sys-color-primary)}:host([data-variant=success]),.hub-list[data-variant=success]{--hub-list-accent: var(--hub-sys-color-success)}:host([data-variant=danger]),.hub-list[data-variant=danger]{--hub-list-accent: var(--hub-sys-color-danger)}:host([data-variant=warning]),.hub-list[data-variant=warning]{--hub-list-accent: var(--hub-sys-color-warning)}:host([data-variant=info]),.hub-list[data-variant=info]{--hub-list-accent: var(--hub-sys-color-info)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { 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 }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindChildren", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], paginate: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginate", 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"] }], perPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "perPageOptions", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }, { type: i0.Output, args: ["totalItemsChange"] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], dragGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragGroup", required: false }] }], sortDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDisabled", required: false }] }], keyboardSortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardSortable", required: false }] }], sorted: [{ type: i0.Output, args: ["sorted"] }], options: [{
                 type: Input
             }], items: [{
                 type: Input
-            }], clickFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickFn", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], itemTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PaginableListItemDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noResultsTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PaginableNoResultsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], loadingTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PaginableLoadingDirective), { ...{ read: TemplateRef }, isSignal: true }] }], errorTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PaginableErrorDirective), { ...{ read: TemplateRef }, isSignal: true }] }], batchActions: [{
+            }], clickFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickFn", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], itemTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PaginableListItemDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noResultsTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PaginableNoResultsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], loadingTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PaginableLoadingDirective), { ...{ read: TemplateRef }, isSignal: true }] }], errorTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PaginableErrorDirective), { ...{ read: TemplateRef }, isSignal: true }] }], placeholderTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubListDragPlaceholderDirective), { ...{ read: TemplateRef }, isSignal: true }] }], previewTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubListDragPreviewDirective), { ...{ read: TemplateRef }, isSignal: true }] }], batchActions: [{
                 type: Input
             }] } });
 
@@ -3744,7 +4634,7 @@ class TableComponent {
                 useExisting: forwardRef(() => TableComponent),
                 multi: true
             }
-        ], 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<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t/>\n\t\t\t\t} @else {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\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<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\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\">\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[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\"></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\"></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[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]=\"headersCount()\">\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: headersCount() }\"\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]=\"headersCount()\">\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: headersCount() }\"\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 (rows().length) {\n\t\t\t\t@for (item of rows(); 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]=\"headersCount()\">\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: headersCount(), 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<select\n\t\t\t\tclass=\"hub-paginator__select\"\n\t\t\t\t[ngModel]=\"perPage()\"\n\t\t\t\t(ngModelChange)=\"perPage.set($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t>\n\t\t\t\t@for (option of perPageOptions(); track option) {\n\t\t\t\t\t<option [ngValue]=\"option\" class=\"hub-paginator__select-option\">\n\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t</option>\n\t\t\t\t}\n\t\t\t</select>\n\t\t</div>\n\t\t@if (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: rows().length,\n\t\t\t\t\t\t\t\t\ttotal: 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\">\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[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\" [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 }\"> </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-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-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-bg: var(--hub-ref-color-white, #fff);--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: rgba(25, 135, 84, .1);--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: 700;--hub-table-filter-count-border-radius: 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:400;line-height: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:1.5rem}:host .hub-table__header-icon{margin-right:.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: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\");mask-image: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\")}:host .hub-table__icon--filter{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--eraser{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--info{-webkit-mask-image: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\");mask-image: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\");margin-right: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: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\");mask-image: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\")}:host .hub-table__icon--caret-down{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-up{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-down{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-left{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-right{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-left{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-right{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-double-left{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-double-right{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--ellipsis-v{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--trash{-webkit-mask-image: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\");mask-image: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\");margin-right:.5rem}:host .hub-table__icon--plus{-webkit-mask-image: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\");mask-image: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\");margin-right:.5rem}:host .hub-table__container{overflow:auto;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-border-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__scrollable thead{position: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__responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}: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:1.5rem}:host.hub-table--rtl .hub-table__header-icon{margin-right:0;margin-left:.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: "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: [
+        ], 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<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t/>\n\t\t\t\t} @else {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\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<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\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\">\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[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\"></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\"></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[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]=\"headersCount()\">\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: headersCount() }\"\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]=\"headersCount()\">\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: headersCount() }\"\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 (rows().length) {\n\t\t\t\t@for (item of rows(); 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]=\"headersCount()\">\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: headersCount(), 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<select\n\t\t\t\tclass=\"hub-paginator__select\"\n\t\t\t\t[ngModel]=\"perPage()\"\n\t\t\t\t(ngModelChange)=\"perPage.set($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t>\n\t\t\t\t@for (option of perPageOptions(); track option) {\n\t\t\t\t\t<option [ngValue]=\"option\" class=\"hub-paginator__select-option\">\n\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t</option>\n\t\t\t\t}\n\t\t\t</select>\n\t\t</div>\n\t\t@if (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: rows().length,\n\t\t\t\t\t\t\t\t\ttotal: 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\">\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[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\" [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 }\"> </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-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-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-subtle: color-mix(in srgb, var(--hub-table-accent) 12%, var(--hub-sys-surface-page, #ffffff));--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-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 srgb, 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:1.5rem}:host .hub-table__header-icon{margin-right:.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: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\");mask-image: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\")}:host .hub-table__icon--filter{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--eraser{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--info{-webkit-mask-image: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\");mask-image: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\");margin-right: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: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\");mask-image: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\")}:host .hub-table__icon--caret-down{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-up{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-down{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-left{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-right{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-left{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-right{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-double-left{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-double-right{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--ellipsis-v{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--trash{-webkit-mask-image: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\");mask-image: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\");margin-right:.5rem}:host .hub-table__icon--plus{-webkit-mask-image: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\");mask-image: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\");margin-right:.5rem}:host .hub-table__container{overflow:auto;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-border-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__scrollable thead{position: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__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__responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.hub-table__primary{--hub-table-accent: var(--hub-sys-color-primary)}.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)}: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:1.5rem}:host.hub-table--rtl .hub-table__header-icon{margin-right:0;margin-left:.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: "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: [
             trigger('fadeInOut', [
                 transition(':enter', [style({ opacity: 0 }), animate('256ms 256ms', style({ opacity: 1, height: 'auto' }))]),
                 transition(':leave', [animate('256ms ease-out', style({ opacity: 0, height: '0' }))])
@@ -3787,7 +4677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     ], host: {
                         class: 'hub-table',
                         '[class.hub-table--rtl]': 'isRtl()'
-                    }, 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<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t/>\n\t\t\t\t} @else {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\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<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\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\">\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[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\"></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\"></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[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]=\"headersCount()\">\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: headersCount() }\"\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]=\"headersCount()\">\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: headersCount() }\"\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 (rows().length) {\n\t\t\t\t@for (item of rows(); 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]=\"headersCount()\">\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: headersCount(), 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<select\n\t\t\t\tclass=\"hub-paginator__select\"\n\t\t\t\t[ngModel]=\"perPage()\"\n\t\t\t\t(ngModelChange)=\"perPage.set($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t>\n\t\t\t\t@for (option of perPageOptions(); track option) {\n\t\t\t\t\t<option [ngValue]=\"option\" class=\"hub-paginator__select-option\">\n\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t</option>\n\t\t\t\t}\n\t\t\t</select>\n\t\t</div>\n\t\t@if (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: rows().length,\n\t\t\t\t\t\t\t\t\ttotal: 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\">\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[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\" [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 }\"> </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-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-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-bg: var(--hub-ref-color-white, #fff);--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: rgba(25, 135, 84, .1);--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: 700;--hub-table-filter-count-border-radius: 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:400;line-height: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:1.5rem}:host .hub-table__header-icon{margin-right:.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: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\");mask-image: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\")}:host .hub-table__icon--filter{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--eraser{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--info{-webkit-mask-image: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\");mask-image: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\");margin-right: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: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\");mask-image: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\")}:host .hub-table__icon--caret-down{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-up{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-down{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-left{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-right{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-left{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-right{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-double-left{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-double-right{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--ellipsis-v{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--trash{-webkit-mask-image: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\");mask-image: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\");margin-right:.5rem}:host .hub-table__icon--plus{-webkit-mask-image: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\");mask-image: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\");margin-right:.5rem}:host .hub-table__container{overflow:auto;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-border-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__scrollable thead{position: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__responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}: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:1.5rem}:host.hub-table--rtl .hub-table__header-icon{margin-right:0;margin-left:.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"] }]
+                    }, 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<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t\t[attr.aria-label]=\"'SEARCH' | translate | ucfirst\"\n\t\t\t\t\t/>\n\t\t\t\t} @else {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"hub-table__search-input\"\n\t\t\t\t\t\t(input)=\"searchProxy$.next($any($event.target).value)\"\n\t\t\t\t\t\t[value]=\"searchTerm()\"\n\t\t\t\t\t\t[attr.placeholder]=\"'SEARCH' | translate | ucfirst\"\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<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\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\">\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[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\"></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\"></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[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]=\"headersCount()\">\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: headersCount() }\"\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]=\"headersCount()\">\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: headersCount() }\"\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 (rows().length) {\n\t\t\t\t@for (item of rows(); 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]=\"headersCount()\">\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: headersCount(), 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<select\n\t\t\t\tclass=\"hub-paginator__select\"\n\t\t\t\t[ngModel]=\"perPage()\"\n\t\t\t\t(ngModelChange)=\"perPage.set($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t>\n\t\t\t\t@for (option of perPageOptions(); track option) {\n\t\t\t\t\t<option [ngValue]=\"option\" class=\"hub-paginator__select-option\">\n\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t</option>\n\t\t\t\t}\n\t\t\t</select>\n\t\t</div>\n\t\t@if (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: rows().length,\n\t\t\t\t\t\t\t\t\ttotal: 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\">\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[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\" [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 }\"> </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-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-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-subtle: color-mix(in srgb, var(--hub-table-accent) 12%, var(--hub-sys-surface-page, #ffffff));--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-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 srgb, 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:1.5rem}:host .hub-table__header-icon{margin-right:.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: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\");mask-image: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\")}:host .hub-table__icon--filter{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--eraser{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--info{-webkit-mask-image: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\");mask-image: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\");margin-right: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: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\");mask-image: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\")}:host .hub-table__icon--caret-down{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-up{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-down{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-left{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--chevron-right{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-left{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-right{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-double-left{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--angle-double-right{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--ellipsis-v{-webkit-mask-image: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\");mask-image: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\")}:host .hub-table__icon--trash{-webkit-mask-image: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\");mask-image: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\");margin-right:.5rem}:host .hub-table__icon--plus{-webkit-mask-image: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\");mask-image: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\");margin-right:.5rem}:host .hub-table__container{overflow:auto;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-border-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__scrollable thead{position: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__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__responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.hub-table__primary{--hub-table-accent: var(--hub-sys-color-primary)}.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)}: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:1.5rem}:host.hub-table--rtl .hub-table__header-icon{margin-right:0;margin-left:.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"] }]
         }], 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 }] }], 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), { ...{
                             read: TemplateRef
                         }, 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), { ...{
@@ -3798,6 +4688,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                             read: TemplateRef
                         }, isSignal: true }] }], templateExpandingRows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PaginableTableExpandingRowDirective), { isSignal: true }] }], filterTpts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PaginableTableFilterDirective), { isSignal: true }] }], dropdownComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => DropdownComponent), { isSignal: true }] }] } });
 
+/**
+ * Marks an element inside a `hub-list` item template as the drag handle.
+ *
+ * When at least one handle is present in an item, a drag (native or pointer-based) only
+ * starts when the gesture begins on the handle; dragging the rest of the row is ignored.
+ * When no handle is declared, the whole row is draggable.
+ *
+ * Detection is DOM-based: the directive simply tags its host with the
+ * `hub-list__drag-handle` class. The list checks `event.target.closest('.hub-list__drag-handle')`
+ * on drag/pointer start, which works even though the template is content-projected.
+ *
+ * The host is intentionally **not** marked `draggable="false"`: with the native HTML5
+ * drag-and-drop API, a `draggable="false"` descendant prevents the browser from starting a
+ * drag from that area, which would make the handle — the one place a drag should start —
+ * unusable. The draggable element is the list item ancestor; the handle just participates.
+ *
+ * @example
+ * ```html
+ * <ng-template listItemTpt let-item="data">
+ *   <span hubListDragHandle>::</span>
+ *   {{ item.name }}
+ * </ng-template>
+ * ```
+ */
+class HubListDragHandleDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubListDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: HubListDragHandleDirective, isStandalone: true, selector: "[hubListDragHandle], [listDragHandle]", host: { classAttribute: "hub-list__drag-handle" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubListDragHandleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubListDragHandle], [listDragHandle]',
+                    standalone: true,
+                    host: {
+                        class: 'hub-list__drag-handle'
+                    }
+                }]
+        }] });
+
 class ResizableDirective {
     documentRef;
     elementRef;
@@ -3830,166 +4759,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 type: Output
             }] } });
 
-/** Unique ID for the injected tooltip stylesheet. */
-const TOOLTIP_STYLE_ID = 'hub-tooltip-styles';
-/** Base styles for the tooltip element, injected once into <head>. */
-const TOOLTIP_STYLES = `
-.ng-tooltip {
-  position: absolute;
-  z-index: 1070;
-  display: block;
-  margin: 0;
-  font-family: var(--hub-ref-font-family, inherit);
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.5;
-  text-align: center;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  letter-spacing: normal;
-  word-break: normal;
-  word-spacing: normal;
-  white-space: normal;
-  line-break: auto;
-  font-size: 0.875rem;
-  word-wrap: break-word;
-  opacity: 0;
-  background-color: #000;
-  color: #fff;
-  border-radius: 0.375rem;
-  padding: 0.25rem 0.5rem;
-  pointer-events: none;
-}
-.ng-tooltip-show { opacity: 0.9; }
-`;
-class TooltipDirective {
-    el;
-    renderer;
-    tooltipTitle = input.required({ ...(ngDevMode ? { debugName: "tooltipTitle" } : /* istanbul ignore next */ {}), alias: "tooltip" });
-    placement = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
-    delay = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "delay" }] : /* istanbul ignore next */ []));
-    tooltip;
-    offset = 8;
-    document = inject(DOCUMENT);
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-        this.ensureStyles();
-    }
-    /**
-     * Injects the tooltip stylesheet into <head> once per document.
-     * Subsequent instances reuse the same <style> tag.
-     */
-    ensureStyles() {
-        if (this.document.getElementById(TOOLTIP_STYLE_ID)) {
-            return;
-        }
-        const style = this.renderer.createElement('style');
-        style.id = TOOLTIP_STYLE_ID;
-        style.textContent = TOOLTIP_STYLES;
-        this.renderer.appendChild(this.document.head, style);
-    }
-    onMouseEnter() {
-        if (!this.tooltip) {
-            this.show();
-        }
-    }
-    onClick() {
-        if (this.tooltip) {
-            this.hide();
-        }
-    }
-    onMouseLeave() {
-        if (this.tooltip) {
-            this.hide();
-        }
-    }
-    show() {
-        this.create();
-        this.setPosition();
-        this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
-    }
-    hide() {
-        this.renderer.removeClass(this.tooltip, 'ng-tooltip-show');
-        window.setTimeout(() => {
-            this.renderer.removeChild(document.body, this.tooltip);
-            this.tooltip = null;
-        }, this.delay());
-    }
-    create() {
-        this.tooltip = this.renderer.createElement('span');
-        this.renderer.appendChild(this.tooltip, this.renderer.createText(this.tooltipTitle()) // textNode
-        );
-        this.renderer.appendChild(document.body, this.tooltip);
-        // this.renderer.appendChild(this.el.nativeElement, this.tooltip);
-        this.renderer.addClass(this.tooltip, 'ng-tooltip');
-        this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement()}`);
-        // delay 설정
-        const delay = this.delay();
-        this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${delay}ms`);
-        this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${delay}ms`);
-        this.renderer.setStyle(this.tooltip, '-o-transition', `opacity ${delay}ms`);
-        this.renderer.setStyle(this.tooltip, 'transition', `opacity ${delay}ms`);
-    }
-    setPosition() {
-        if (!this.tooltip) {
-            return;
-        }
-        // 호스트 요소의 사이즈와 위치 정보
-        const hostPos = this.el.nativeElement.getBoundingClientRect();
-        // tooltip 요소의 사이즈와 위치 정보
-        const tooltipPos = this.tooltip.getBoundingClientRect();
-        // window의 scroll top
-        // getBoundingClientRect 메소드는 viewport에서의 상대적인 위치를 반환한다.
-        // 스크롤이 발생한 경우, tooltip 요소의 top에 세로 스크롤 좌표값을 반영하여야 한다.
-        const scrollPos = window.pageYOffset ||
-            document.documentElement.scrollTop ||
-            document.body.scrollTop ||
-            0;
-        let top, left;
-        const placement = this.placement();
-        if (placement === 'top') {
-            top = hostPos.top - tooltipPos.height - this.offset;
-            left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
-        }
-        if (placement === 'bottom') {
-            top = hostPos.bottom + this.offset;
-            left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
-        }
-        if (placement === 'left') {
-            top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
-            left = hostPos.left - tooltipPos.width - this.offset;
-        }
-        if (placement === 'right') {
-            top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
-            left = hostPos.right + this.offset;
-        }
-        // 스크롤이 발생한 경우, tooltip 요소의 top에 세로 스크롤 좌표값을 반영하여야 한다.
-        this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
-        this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: TooltipDirective, isStandalone: true, selector: "[tooltip]", inputs: { tooltipTitle: { classPropertyName: "tooltipTitle", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "click": "onClick()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TooltipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tooltip]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tooltipTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
-
 /**
  * Enum representing the available input types for menu filters.
  * These types define how the user can input data for filtering.
@@ -4151,5 +4920,5 @@ var RowClass;
  * Generated bundle index. Do not edit.
  */
 
-export { BooleanMatchModes, DateMatchModes, DropdownComponent, HubIconComponent, HubUITableModule, ListComponent, MenuFilterInputType, MenuFilterOperators, NullMatchModes, NumberMatchModes, PaginableDefaultsService, PaginableNoResultsDirective as PaginableEmptyStateDirective, PaginableErrorDirective, ListComponent as PaginableListComponent, PaginableListItemDirective, PaginableLoadingDirective, PaginableNoResultsDirective, PaginableService, PaginableStateOutlet, PaginableTableCellDirective, PaginableTableDropdownComponent, PaginableErrorDirective as PaginableTableErrorDirective, PaginableTableExpandingRowDirective, PaginableTableFilterDirective, PaginableTableHeaderDirective, PaginableLoadingDirective as PaginableTableLoadingDirective, PaginableNoResultsDirective as PaginableTableNotFoundDirective, PaginableTableRangeInputComponent, PaginableTableRowDirective, PaginationService, PaginatorComponent, ResizableComponent, ResizableDirective, RowClass, SelectionTypes, StringMatchModes, TableBreakpoint, TableComponent, HubUITableModule as TableModule, TooltipDirective, locale$9 as anLocale, locale$8 as arLocale, locale$7 as astLocale, locale$6 as caLocale, locale$5 as deLocale, locale$a as enLocale, locale$4 as esLocale, locale$3 as euLocale, locale$2 as glLocale, paginableCoreProviders, providePaginable, locale$1 as ruLocale, locale as zhLocale };
+export { BooleanMatchModes, DateMatchModes, DropdownComponent, HubIconComponent, HubListDragHandleDirective, HubListDragPlaceholderDirective, HubListDragPreviewDirective, HubUITableModule, ListComponent, MenuFilterInputType, MenuFilterOperators, NullMatchModes, NumberMatchModes, PaginableDefaultsService, PaginableNoResultsDirective as PaginableEmptyStateDirective, PaginableErrorDirective, ListComponent as PaginableListComponent, PaginableListItemDirective, PaginableLoadingDirective, PaginableNoResultsDirective, PaginableService, PaginableStateOutlet, PaginableTableCellDirective, PaginableTableDropdownComponent, PaginableErrorDirective as PaginableTableErrorDirective, PaginableTableExpandingRowDirective, PaginableTableFilterDirective, PaginableTableHeaderDirective, PaginableLoadingDirective as PaginableTableLoadingDirective, PaginableNoResultsDirective as PaginableTableNotFoundDirective, PaginableTableRangeInputComponent, PaginableTableRowDirective, PaginationService, PaginatorComponent, ResizableComponent, ResizableDirective, RowClass, SelectionTypes, StringMatchModes, TableBreakpoint, TableComponent, HubUITableModule as TableModule, locale$9 as anLocale, locale$8 as arLocale, locale$7 as astLocale, locale$6 as caLocale, locale$5 as deLocale, locale$a as enLocale, locale$4 as esLocale, locale$3 as euLocale, locale$2 as glLocale, paginableCoreProviders, providePaginable, locale$1 as ruLocale, locale as zhLocale };
 //# sourceMappingURL=ng-hub-ui-paginable.mjs.map