ngx-t-forms 2.0.29 → 2.0.31

package/fesm2022/ngx-t-forms-paginated-selection-table-AQZSMmhr.mjs

@@ -0,0 +1,555 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, viewChild, ChangeDetectorRef, DestroyRef, effect, ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NgControl, FormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { B as BaseCustomInput, _ as _isEqual, y as fuzzySearch, w as returnMappedPathValue, x as FormatDataPipe, m as getInputErrorMessage, n as TFormInputStatusComponent } from './ngx-t-forms-ngx-t-forms-u_kigDid.mjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { DocumentLitsLabelConfigInterfaceValueType, InputDataTypes } from 'ngx-t-forms-types';
+import * as i5$1 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import * as i11 from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import * as i10 from '@angular/material/sort';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { debounceTime, map, distinctUntilChanged } from 'rxjs';
+import * as i3 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i3$2 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i2$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3$3 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i13 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+
+/** Max rows to sample for type inference - balances accuracy vs performance */
+const TYPE_INFER_SAMPLE_SIZE = 5;
+const customInputConfig = {
+    controlType: 'lib-paginated-selection-table-reactive-input',
+    nextId: 0,
+};
+class PaginatedSelectionTableReactiveInput extends BaseCustomInput {
+    #cdr;
+    #destroyRef;
+    /** Cached inferred column types from data - recomputed only when data changes */
+    #inferredColumnTypes;
+    #lastInferredDataRef;
+    #columnsCacheDirty;
+    #cachedColumns;
+    #cachedDisplayedColumns;
+    #cachedSortActiveColumn;
+    #lastInputConfig;
+    #loadScheduled;
+    #destroyed;
+    #connectTimeoutId;
+    constructor() {
+        super(inject(NgControl, { self: true, optional: true }), inject(ElementRef), customInputConfig);
+        this.formBuilderFunctions = input(undefined, ...(ngDevMode ? [{ debugName: "formBuilderFunctions" }] : /* istanbul ignore next */ []));
+        this.canReload = input(false, ...(ngDevMode ? [{ debugName: "canReload" }] : /* istanbul ignore next */ []));
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.searchPlaceholder = input('Search items…', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+        this.emptyMessage = input('No items found', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        this.inputConfig = input(undefined, ...(ngDevMode ? [{ debugName: "inputConfig" }] : /* istanbul ignore next */ []));
+        this.reloadData = output();
+        this.searchFormControl = new FormControl('');
+        this.dataSource = new MatTableDataSource([]);
+        this.sort = viewChild(MatSort, ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+        this.paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : /* istanbul ignore next */ []));
+        this.#cdr = inject(ChangeDetectorRef);
+        this.#destroyRef = inject(DestroyRef);
+        /** Cached inferred column types from data - recomputed only when data changes */
+        this.#inferredColumnTypes = {};
+        this.#lastInferredDataRef = null;
+        this.#columnsCacheDirty = true;
+        this.#cachedColumns = [];
+        this.#cachedDisplayedColumns = [];
+        this.#cachedSortActiveColumn = '';
+        this.#loadScheduled = false;
+        this.#destroyed = false;
+        this.#connectTimeoutId = null;
+        this.#setupFuzzyFilterPredicate();
+        this.#setupSelectionFirstSort();
+        this.#setupSearchSubscription();
+        // Replaces the previous @Input setter side-effect: react to inputConfig changes.
+        effect(() => {
+            const value = this.inputConfig();
+            if (_isEqual(this.#lastInputConfig, value))
+                return;
+            const prevMatOptions = this.#lastInputConfig?.matOptions?.options;
+            const nextMatOptions = value?.matOptions?.options;
+            const matOptionsChanged = !_isEqual(prevMatOptions, nextMatOptions);
+            this.#lastInputConfig = value;
+            this.#columnsCacheDirty = true;
+            if (matOptionsChanged) {
+                this.#scheduleLoadInputData();
+            }
+        });
+    }
+    get empty() {
+        const n = this.value;
+        if (n === null || n === undefined)
+            return true;
+        if (this.isMultiSelect) {
+            return Array.isArray(n) && n.length === 0;
+        }
+        return n === '';
+    }
+    get shouldLabelFloat() {
+        return true;
+    }
+    get getSelectOptions() {
+        const cfg = this.inputConfig();
+        if (!cfg?.matOptions)
+            return [];
+        if (Array.isArray(cfg.matOptions?.options)) {
+            return cfg.matOptions?.options || [];
+        }
+        return [];
+    }
+    #ensureColumnsCache() {
+        if (!this.#columnsCacheDirty)
+            return;
+        this.#columnsCacheDirty = false;
+        this.#cachedColumns = this.#computeColumns();
+        this.#cachedDisplayedColumns = this.#cachedColumns.map(c => c.key);
+        this.#cachedSortActiveColumn = this.#cachedDisplayedColumns.find(c => c !== 'icons' && c !== 'actions') ?? '';
+    }
+    #computeColumns() {
+        const cfg = this.inputConfig();
+        const configColumns = cfg?.paginationSelectionConfig?.columns;
+        const options = this.getSelectOptions;
+        let dataColumns;
+        if ((!configColumns || !Array.isArray(configColumns) || configColumns.length === 0) && Array.isArray(options)) {
+            const allKeys = options.flatMap((option) => Object.keys((option ?? {})));
+            const uniqueKeys = [...new Set(allKeys)].filter(k => k !== 'icons' && k !== 'actions');
+            dataColumns = uniqueKeys.map(key => ({
+                key,
+                label: key,
+                id: key,
+                type: this.#inferredColumnTypes[key],
+            }));
+        }
+        else {
+            dataColumns = (configColumns || [])
+                .filter((c) => typeof c.key === 'string' && c.key !== 'icons' && c.key !== 'actions')
+                .map((c) => ({
+                key: c.key,
+                label: c.label ?? c.key ?? '',
+                id: c.id ?? c.key,
+                type: c.type ?? this.#inferredColumnTypes[c.key],
+            }));
+        }
+        return [
+            { key: 'icons', label: '', id: 'icons' },
+            ...dataColumns,
+            { key: 'actions', label: '', id: 'actions' },
+        ];
+    }
+    get columns() {
+        this.#ensureColumnsCache();
+        return this.#cachedColumns;
+    }
+    get displayedColumns() {
+        this.#ensureColumnsCache();
+        return this.#cachedDisplayedColumns;
+    }
+    /** First sortable column for initial matSort state (excludes icons/actions) */
+    get sortActiveColumn() {
+        this.#ensureColumnsCache();
+        return this.#cachedSortActiveColumn;
+    }
+    /** Defer data load until after current CD cycle completes (prevents ExpressionChanged errors
+     * in parent FormSectionStepper when sectionFormErrorMessage changes as form validation updates). */
+    #scheduleLoadInputData() {
+        if (this.#loadScheduled)
+            return;
+        this.#loadScheduled = true;
+        Promise.resolve().then(() => {
+            this.#loadScheduled = false;
+            if (!this.#destroyed)
+                this.loadInputData();
+        });
+    }
+    loadInputData() {
+        const options = this.getSelectOptions;
+        if (Array.isArray(options) && options.every(option => typeof option === 'object' && option !== null)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO(phase-4): widen `dataSource` to `Record<string, unknown>` once template column accessors are narrowed.
+            this.dataSource.data = options;
+            this.#inferColumnTypesFromData();
+            this.#attachSortAndPaginatorAfterViewReady();
+            this.#cdr.markForCheck();
+        }
+        else {
+            this.dataSource.data = [];
+            this.#clearInferredCache();
+            this.errorMessage = 'Invalid options format';
+            this.#cdr.markForCheck();
+        }
+    }
+    /** Connects sort and paginator to dataSource. Deferred because table/paginator are inside @if. */
+    #attachSortAndPaginatorAfterViewReady() {
+        if (this.#connectTimeoutId != null)
+            return;
+        this.#connectTimeoutId = setTimeout(() => {
+            this.#connectTimeoutId = null;
+            const sortRef = this.sort();
+            const paginatorRef = this.paginator();
+            if (sortRef && this.dataSource.sort !== sortRef) {
+                this.dataSource.sort = sortRef;
+            }
+            if (paginatorRef && this.dataSource.paginator !== paginatorRef) {
+                this.dataSource.paginator = paginatorRef;
+            }
+            // Avoid markForCheck() here - it triggers full-tree CD that re-evaluates parent's
+            // sectionFormErrorMessage mid-cycle, causing ExpressionChangedAfterItHasBeenCheckedError.
+            // MatTableDataSource propagates sort/paginator changes; view updates on next CD.
+        }, 0);
+    }
+    /** Clear cached references to prevent memory leaks. */
+    #clearInferredCache() {
+        this.#inferredColumnTypes = {};
+        this.#lastInferredDataRef = null;
+        this.#columnsCacheDirty = true;
+    }
+    /**
+     * Overrides MatTableDataSource.sortData so selected rows are always rendered
+     * first, before any sort-ordered unselected rows. This makes selections visible
+     * on page 1 regardless of how the table is sorted.
+     */
+    #setupSelectionFirstSort() {
+        this.dataSource.sortData = (data, sort) => {
+            const selected = [];
+            const unselected = [];
+            for (const row of data) {
+                (this.isRowSelected(row) ? selected : unselected).push(row);
+            }
+            if (!sort.active || !sort.direction) {
+                return [...selected, ...unselected];
+            }
+            const key = sort.active;
+            const dir = sort.direction === 'asc' ? 1 : -1;
+            const colType = this.#inferredColumnTypes[key];
+            unselected.sort((a, b) => {
+                const va = a[key];
+                const vb = b[key];
+                if (va == null && vb == null)
+                    return 0;
+                if (va == null)
+                    return dir;
+                if (vb == null)
+                    return -dir;
+                return dir * this.#compareColValues(va, vb, colType);
+            });
+            return [...selected, ...unselected];
+        };
+    }
+    /** Type-aware value comparator used by sortData. Returns negative/zero/positive like Array.sort. */
+    #compareColValues(va, vb, colType) {
+        // Explicit number columns: parse to float so "9" < "10" (not lexicographic)
+        if (colType === DocumentLitsLabelConfigInterfaceValueType.number) {
+            const na = parseFloat(String(va));
+            const nb = parseFloat(String(vb));
+            if (!Number.isNaN(na) && !Number.isNaN(nb))
+                return na - nb;
+        }
+        // Date columns: compare as timestamps
+        if (colType === DocumentLitsLabelConfigInterfaceValueType.date) {
+            const ta = new Date(va).getTime();
+            const tb = new Date(vb).getTime();
+            if (!Number.isNaN(ta) && !Number.isNaN(tb))
+                return ta - tb;
+        }
+        // Native JS numbers (regardless of inferred type)
+        if (typeof va === 'number' && typeof vb === 'number')
+            return va - vb;
+        // Native JS Date instances
+        if (va instanceof Date && vb instanceof Date)
+            return va.getTime() - vb.getTime();
+        // Everything else: locale-aware string sort with numeric collation ("9" < "10")
+        const sa = typeof va === 'string' ? va : String(va);
+        const sb = typeof vb === 'string' ? vb : String(vb);
+        return sa.localeCompare(sb, undefined, { numeric: true, sensitivity: 'base' });
+    }
+    /** Re-sorts the dataSource pipeline so selected rows bubble to the top, then navigates to page 1. */
+    #bringSelectionToFront() {
+        if (this.dataSource.data.length === 0)
+            return;
+        // Shallow copy triggers MatTableDataSource to re-run filter → sortData → paginator.
+        this.dataSource.data = [...this.dataSource.data];
+        this.dataSource.paginator?.firstPage();
+    }
+    /** Filter predicate using fuzzy search on all stringifiable row values. */
+    #setupFuzzyFilterPredicate() {
+        this.dataSource.filterPredicate = (row, filter) => {
+            const term = filter?.trim();
+            if (!term)
+                return true;
+            if (typeof row !== 'object' || row === null)
+                return false;
+            return Object.values(row).some((value) => {
+                if (value == null)
+                    return false;
+                const text = typeof value === 'string' ? value : String(value);
+                return fuzzySearch(term, text);
+            });
+        };
+    }
+    #setupSearchSubscription() {
+        this.searchFormControl.valueChanges.pipe(debounceTime(300), map((term) => term?.trim() ?? ''), distinctUntilChanged((a, b) => a === b), takeUntilDestroyed(this.#destroyRef)).subscribe((filter) => {
+            this.dataSource.filter = filter;
+            this.dataSource.paginator?.firstPage();
+            this.#cdr.markForCheck();
+        });
+    }
+    clearSearch() {
+        this.searchFormControl.setValue('');
+    }
+    /**
+     * Infers column types from data source by sampling first N rows.
+     * Cached per data reference to avoid recomputation on every change detection.
+     */
+    #inferColumnTypesFromData() {
+        const data = this.dataSource.data;
+        if (data === this.#lastInferredDataRef)
+            return;
+        if (data.length === 0) {
+            this.#clearInferredCache();
+            return;
+        }
+        this.#lastInferredDataRef = data;
+        const sampleSize = Math.min(TYPE_INFER_SAMPLE_SIZE, data.length);
+        const keys = Object.keys(data[0] ?? {});
+        for (const key of keys) {
+            if (key === 'icons' || key === 'actions')
+                continue;
+            let inferred = undefined;
+            for (let i = 0; i < sampleSize; i++) {
+                const v = data[i]?.[key];
+                if (v === null || v === undefined)
+                    continue;
+                inferred = this.#inferValueType(v);
+                break;
+            }
+            this.#inferredColumnTypes[key] = inferred;
+        }
+        this.#columnsCacheDirty = true;
+    }
+    /** Lightweight single-value type inference for formatData pipe compatibility */
+    #inferValueType(v) {
+        if (typeof v === 'boolean')
+            return InputDataTypes.Boolean;
+        if (Array.isArray(v))
+            return InputDataTypes.Array;
+        if (typeof v === 'object' && v !== null) {
+            return v instanceof Date ? DocumentLitsLabelConfigInterfaceValueType.date : InputDataTypes.Object;
+        }
+        if (typeof v === 'number' && !Number.isNaN(v))
+            return DocumentLitsLabelConfigInterfaceValueType.number;
+        if (typeof v === 'string') {
+            const trimmed = v.trim();
+            if (trimmed === '')
+                return undefined;
+            const num = Number(trimmed);
+            if (!Number.isNaN(num))
+                return DocumentLitsLabelConfigInterfaceValueType.number;
+            const d = new Date(v);
+            if (!Number.isNaN(d.getTime()))
+                return DocumentLitsLabelConfigInterfaceValueType.date;
+        }
+        return undefined;
+    }
+    get isMultiSelect() {
+        return this.inputConfig()?.allowMultipleSelection ?? false;
+    }
+    get primaryIdentifierKey() {
+        return this.inputConfig()?.paginationSelectionConfig?.primaryIdentifierKey;
+    }
+    /** Returns the row identifier: uses returnMappedPathValue when primaryIdentifierKey is set, else fallback to _id/id. */
+    getRowId(row) {
+        const pk = this.primaryIdentifierKey;
+        if (pk != null && pk !== '') {
+            return returnMappedPathValue(pk, row);
+        }
+        return row['_id'] ?? row['id'];
+    }
+    /** Builds a minimal row object from an id for fallback when the row is not in dataSource (e.g. from radio value). */
+    #buildFallbackRowFromId(id) {
+        const pk = this.primaryIdentifierKey;
+        if (!pk || !Array.isArray(pk) || pk.length === 0) {
+            return { _id: id, id };
+        }
+        const obj = {};
+        let current = obj;
+        for (let i = 0; i < pk.length; i++) {
+            const node = pk[i];
+            const key = typeof node === 'object' && node != null && node.key != null ? String(node.key) : String(node);
+            const isLast = i === pk.length - 1;
+            if (isLast) {
+                current[key] = id;
+            }
+            else {
+                current[key] = {};
+                current = current[key];
+            }
+        }
+        return obj;
+    }
+    getSelectedIds() {
+        const v = this.value;
+        return Array.isArray(v) ? v : (v ? [v] : []);
+    }
+    /** Returns a primitive ID suitable for `[value]` on mat-radio-group, normalizing away object preset values. */
+    getNormalizedSingleValue() {
+        const v = this.value;
+        if (v == null || Array.isArray(v))
+            return v;
+        if (typeof v === 'object')
+            return this.getRowId(v);
+        return v;
+    }
+    isRowSelected(row) {
+        const rowId = this.getRowId(row);
+        if (rowId == null)
+            return false;
+        return this.getSelectedIds().some(v => {
+            if (v == null)
+                return false;
+            if (v === rowId)
+                return true;
+            // Preset values may arrive as full row objects instead of bare IDs.
+            // Extract the ID from the stored object so the comparison still works.
+            if (typeof v === 'object') {
+                return this.getRowId(v) == rowId;
+            }
+            // Handle string/number type coercion (e.g. "123" vs 123).
+            return String(v) === String(rowId);
+        });
+    }
+    onRadioChange(event) {
+        const id = event?.value;
+        if (id == null)
+            return;
+        const row = this.dataSource.data.find((r) => this.getRowId(r) == id);
+        this.selectRow(row ?? this.#buildFallbackRowFromId(id));
+    }
+    /** Handle click on radio: if already selected, deselect (radios don't fire change when re-clicked). */
+    onRadioClick(row, event) {
+        if (this.isRowSelected(row)) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.selectRow(row);
+        }
+    }
+    selectRow(row) {
+        const id = this.getRowId(row);
+        if (this.isMultiSelect) {
+            const ids = [...this.getSelectedIds()];
+            const idx = ids.indexOf(id);
+            if (idx >= 0) {
+                ids.splice(idx, 1);
+            }
+            else {
+                ids.push(id);
+            }
+            this.value = ids.length ? ids : null;
+            this.onChange(this.value);
+            this.onTouched();
+            this.#bringSelectionToFront();
+            this.#cdr.markForCheck();
+            return;
+        }
+        const isDeselecting = id === this.value;
+        this.value = isDeselecting ? undefined : id;
+        this.onChange(this.value);
+        this.onTouched();
+        this.#bringSelectionToFront();
+        this.#cdr.markForCheck();
+    }
+    writeValue(value) {
+        super.writeValue(value);
+        this.#bringSelectionToFront();
+        this.#cdr.markForCheck();
+    }
+    ngAfterViewInit() {
+        this.#attachSortAndPaginatorAfterViewReady();
+    }
+    ngOnDestroy() {
+        this.#destroyed = true;
+        this.#loadScheduled = false;
+        if (this.#connectTimeoutId != null) {
+            clearTimeout(this.#connectTimeoutId);
+            this.#connectTimeoutId = null;
+        }
+        this.#clearInferredCache();
+        this.dataSource.data = [];
+        super.ngOnDestroy();
+    }
+    reload() {
+        this.reloadData.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: PaginatedSelectionTableReactiveInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: PaginatedSelectionTableReactiveInput, isStandalone: true, selector: "lib-paginated-selection-table-reactive-input", inputs: { formBuilderFunctions: { classPropertyName: "formBuilderFunctions", publicName: "formBuilderFunctions", isSignal: true, isRequired: false, transformFunction: null }, canReload: { classPropertyName: "canReload", publicName: "canReload", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reloadData: "reloadData" }, host: { properties: { "class.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: PaginatedSelectionTableReactiveInput }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "\r\n<mat-card class=\"doc-picker-card\">\r\n  @if (!inputConfig()?.disabled && !inputConfig()?.readonly) {\r\n  <header class=\"doc-picker-header\">\r\n    <div class=\"doc-picker-toolbar\">\r\n      <mat-form-field subscriptSizing=\"dynamic\" class=\"doc-picker-search\">\r\n        <input matInput [placeholder]=\"searchPlaceholder()\" [formControl]=\"searchFormControl\"\r\n          [attr.aria-label]=\"searchPlaceholder()\">\r\n        @if (searchFormControl.value) {\r\n        <button mat-icon-button matSuffix (click)=\"clearSearch()\" type=\"button\"\r\n          aria-label=\"Clear search\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n        } @else {\r\n        <mat-icon matSuffix>search</mat-icon>\r\n        }\r\n      </mat-form-field>\r\n      @if (isMultiSelect && getSelectedIds().length > 0) {\r\n      <span class=\"doc-picker-selection-badge\" role=\"status\" aria-live=\"polite\">\r\n        {{ getSelectedIds().length }} selected\r\n      </span>\r\n      }\r\n    </div>\r\n  </header>\r\n  }\r\n  @if (loading()) {\r\n  <div class=\"doc-picker-loading\">\r\n    <mat-spinner [diameter]=\"40\" aria-label=\"Loading items\"></mat-spinner>\r\n  </div>\r\n  } @else {\r\n  <div class=\"doc-picker-body\">\r\n    @if (!inputConfig()?.disabled && !inputConfig()?.readonly && !value) {\r\n    <div class=\"doc-picker-helper\">\r\n      <mat-icon class=\"doc-picker-helper-icon\" color=\"primary\">info</mat-icon>\r\n      <span><strong>{{ isMultiSelect ? 'Select items' : 'Select an item' }}</strong> \u2014 Sort or use pagination to find {{ isMultiSelect ? 'them' : 'it' }}, then {{ isMultiSelect ? 'check the box' : 'select the radio' }} to select {{ isMultiSelect ? 'them' : 'it' }}.</span>\r\n    </div>\r\n    }\r\n    @if (dataSource.filteredData.length === 0) {\r\n    <div class=\"doc-picker-empty\">\r\n      <mat-icon>folder_open</mat-icon>\r\n      <span>{{ emptyMessage() }}</span>\r\n      @if (canReload()) {\r\n      <button mat-stroked-button color=\"primary\" (click)=\"reload()\" class=\"doc-picker-retry\"\r\n        aria-label=\"Retry loading items\">\r\n        <mat-icon>refresh</mat-icon>\r\n        Retry\r\n      </button>\r\n      }\r\n    </div>\r\n    }\r\n    @if (dataSource.filteredData.length > 0 && columns.length > 0) {\r\n    @if (isMultiSelect) {\r\n    <div class=\"doc-picker-table-wrapper\">\r\n      <table mat-table [dataSource]=\"dataSource\" class=\"doc-picker-table\"\r\n        [matSortActive]=\"sortActiveColumn\" matSortDisableClear matSortDirection=\"asc\"\r\n        matSort role=\"grid\" aria-label=\"Selection list\">\r\n        @for (col of columns; track col.key) {\r\n        <ng-container [matColumnDef]=\"col.key\" [stickyEnd]=\"$last\">\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header\r\n              [disabled]=\"col.key === 'icons' || col.key === 'actions'\"\r\n              [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n              [class.doc-picker-col-icons]=\"col.key === 'icons'\"\r\n              [class.doc-picker-col-actions]=\"col.key === 'actions'\"\r\n              [class.doc-picker-col-text]=\"col.key !== 'icons' && col.key !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n              [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n\r\n            @if(col.key === 'actions' && canReload()){\r\n              <button mat-icon-button\r\n                matTooltip=\"Click to refresh this field.\"\r\n                class=\"doc-picker-refresh doc-picker-refresh-spacing\"\r\n                (click)=\"reload()\"\r\n                aria-label=\"Refresh list\">\r\n                <mat-icon class=\"doc-picker-refresh-icon\">sync</mat-icon>\r\n              </button>\r\n            } @else {\r\n                {{ col.label }}\r\n            }\r\n\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row\"\r\n              [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n              [class.doc-picker-col-icons]=\"col.key === 'icons'\"\r\n              [class.doc-picker-col-actions]=\"col.key === 'actions'\"\r\n              [class.doc-picker-col-text]=\"col.key !== 'icons' && col.key !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n              [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n            @if (col.key === 'icons') {\r\n            <mat-icon class=\"doc-picker-row-icon\">description</mat-icon>\r\n            } @else if (col.key === 'actions') {\r\n            <mat-checkbox\r\n                [checked]=\"isRowSelected(row)\"\r\n                [disabled]=\"!!inputConfig()?.disabled || !!inputConfig()?.readonly\"\r\n                (change)=\"selectRow(row)\"\r\n                [matTooltip]=\"isRowSelected(row) ? 'Clear selection' : 'Select ' + (row['reference'] ?? row['name'] ?? 'item')\"\r\n                matTooltipPosition=\"below\"\r\n                [attr.aria-label]=\"isRowSelected(row) ? 'Clear selection' : 'Select ' + (row['reference'] ?? row['name'] ?? 'item')\">\r\n            </mat-checkbox>\r\n            } @else {\r\n            <span class=\"doc-picker-cell-value doc-picker-cell-text\"\r\n                [class.doc-picker-cell-selected]=\"isRowSelected(row)\"\r\n                [matTooltip]=\"row[col.key] | formatData:col.type\"\r\n                matTooltipPosition=\"above\">\r\n              {{ row[col.key] | formatData:col.type }}\r\n            </span>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n        }\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        <tr mat-row class=\"doc-picker-row\" *matRowDef=\"let row; columns: displayedColumns;\"\r\n            [class.doc-picker-row-selected]=\"isRowSelected(row)\"\r\n            [attr.aria-label]=\"'Row: ' + (row['reference'] ?? row['name'] ?? 'item')\"\r\n            [attr.aria-selected]=\"isRowSelected(row)\"></tr>\r\n      </table>\r\n    </div>\r\n    } @else {\r\n    <mat-radio-group [value]=\"getNormalizedSingleValue()\" (change)=\"onRadioChange($event)\" class=\"doc-picker-radio-group\">\r\n      <div class=\"doc-picker-table-wrapper\">\r\n      <table mat-table [dataSource]=\"dataSource\" class=\"doc-picker-table\"\r\n        [matSortActive]=\"sortActiveColumn\" matSortDisableClear matSortDirection=\"asc\"\r\n        matSort role=\"grid\" aria-label=\"Selection list\">\r\n        @for (col of columns; track col.key) {\r\n        <ng-container [matColumnDef]=\"col.key\" [stickyEnd]=\"$last\">\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header\r\n              [disabled]=\"col.key === 'icons' || col.key === 'actions'\"\r\n              [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n              [class.doc-picker-col-icons]=\"col.key === 'icons'\"\r\n              [class.doc-picker-col-actions]=\"col.key === 'actions'\"\r\n              [class.doc-picker-col-text]=\"col.key !== 'icons' && col.key !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n              [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n            @if (col.key === 'actions' && canReload()) {\r\n              <button mat-icon-button\r\n                matTooltip=\"Click to refresh this field.\"\r\n                class=\"doc-picker-refresh doc-picker-refresh-spacing\"\r\n                (click)=\"reload()\"\r\n                aria-label=\"Refresh list\">\r\n                <mat-icon class=\"doc-picker-refresh-icon\">sync</mat-icon>\r\n              </button>\r\n            } @else {\r\n              {{ col.label }}\r\n            }\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row\"\r\n              [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n              [class.doc-picker-col-icons]=\"col.key === 'icons'\"\r\n              [class.doc-picker-col-actions]=\"col.key === 'actions'\"\r\n              [class.doc-picker-col-text]=\"col.key !== 'icons' && col.key !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n              [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n            @if (col.key === 'icons') {\r\n            <mat-icon class=\"doc-picker-row-icon\">description</mat-icon>\r\n            } @else if (col.key === 'actions') {\r\n            <mat-radio-button\r\n                [value]=\"getRowId(row)\"\r\n                [disabled]=\"!!inputConfig()?.disabled || !!inputConfig()?.readonly\"\r\n                (click)=\"onRadioClick(row, $event)\"\r\n                [matTooltip]=\"isRowSelected(row) ? 'Clear selection' : 'Select ' + (row['reference'] ?? row['name'] ?? 'item')\"\r\n                matTooltipPosition=\"below\"\r\n                [attr.aria-label]=\"isRowSelected(row) ? 'Clear selection' : 'Select ' + (row['reference'] ?? row['name'] ?? 'item')\">\r\n            </mat-radio-button>\r\n            } @else {\r\n            <span class=\"doc-picker-cell-value doc-picker-cell-text\"\r\n                [class.doc-picker-cell-selected]=\"isRowSelected(row)\"\r\n                [matTooltip]=\"row[col.key] | formatData:col.type\"\r\n                matTooltipPosition=\"above\">\r\n              {{ row[col.key] | formatData:col.type }}\r\n            </span>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n        }\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        <tr mat-row class=\"doc-picker-row\" *matRowDef=\"let row; columns: displayedColumns;\"\r\n            [class.doc-picker-row-selected]=\"isRowSelected(row)\"\r\n            [attr.aria-label]=\"'Row: ' + (row['reference'] ?? row['name'] ?? 'item')\"\r\n            [attr.aria-selected]=\"isRowSelected(row)\"></tr>\r\n      </table>\r\n    </div>\r\n    </mat-radio-group>\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n  @if (!inputConfig()?.disabled && !inputConfig()?.readonly && dataSource.filteredData.length > 0 && !loading()) {\r\n  <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n      [pageSize]=\"5\"\r\n      [length]=\"dataSource.filteredData.length\"\r\n      showFirstLastButtons\r\n      aria-label=\"Selection list pagination\" class=\"doc-picker-paginator\"></mat-paginator>\r\n  }\r\n</mat-card>\r\n", styles: [":host{--doc-picker-radius-lg: 12px;--doc-picker-radius-sm: 8px;--doc-picker-radius-pill: 6px;--doc-picker-shadow: 0 2px 8px rgba(0, 0, 0, .08);--doc-picker-primary: var(--mat-sys-primary, #6750a4);--doc-picker-surface: var(--mat-sys-surface, #fef7ff);--doc-picker-surface-container: var(--mat-sys-surface-container, #f3edf7);--doc-picker-on-surface: var(--mat-sys-on-surface, #1c1b1f);--doc-picker-on-surface-variant: var(--mat-sys-on-surface-variant, #49454f);--doc-picker-outline: var(--mat-sys-outline, #79747e)}@media(prefers-color-scheme:dark){:host{--doc-picker-shadow: 0 1px 3px rgba(0, 0, 0, .3)}}.doc-picker-card{border-radius:var(--doc-picker-radius-lg);box-shadow:var(--doc-picker-shadow);border:1px solid color-mix(in srgb,var(--doc-picker-outline) 15%,transparent);overflow:hidden;background:var(--doc-picker-surface)}.doc-picker-header{display:flex;align-items:center;gap:.75rem;padding:0rem;background:color-mix(in srgb,var(--doc-picker-primary) 4%,transparent);border-bottom:1px solid color-mix(in srgb,var(--doc-picker-outline) 10%,transparent)}.doc-picker-toolbar{display:flex;align-items:center;gap:.5rem;flex-shrink:0;width:100%}.doc-picker-selection-badge{flex-shrink:0;font-size:.75rem;font-weight:500;padding:.25rem .5rem;border-radius:var(--doc-picker-radius-pill);background:color-mix(in srgb,var(--doc-picker-primary) 14%,transparent);color:var(--doc-picker-primary);white-space:nowrap}.doc-picker-loading{display:flex;justify-content:center;align-items:center;padding:1.5rem;min-height:6rem}.doc-picker-retry{min-height:2.25rem;font-size:.8125rem;transition:all .15s}.doc-picker-retry mat-icon{margin-right:.25rem;vertical-align:middle;font-size:1rem;width:1rem;height:1rem}.doc-picker-refresh{flex-shrink:0;transition:transform .15s}.doc-picker-refresh:hover{transform:rotate(90deg)}.doc-picker-refresh-spacing{margin-right:.25rem}.doc-picker-refresh-icon{height:1.25rem;width:1.25rem;font-size:1.25rem;color:var(--doc-picker-primary)}.doc-picker-search{width:100%;min-width:8rem}.doc-picker-search .mat-mdc-form-field{--mdc-filled-text-field-container-color: transparent;--mdc-filled-text-field-container-shape: var(--doc-picker-radius-sm)}.doc-picker-search .mat-mdc-form-field-subscript-wrapper{display:none}.doc-picker-search input{font-size:.8125rem}.doc-picker-body{padding:.75rem 1rem;display:flex;flex-direction:column;gap:.75rem}.doc-picker-helper{display:flex;align-items:flex-start;gap:.5rem;padding:.5rem .75rem;background:color-mix(in srgb,var(--doc-picker-primary) 6%,transparent);border-radius:var(--doc-picker-radius-sm);font-size:.8125rem;color:var(--doc-picker-on-surface-variant);line-height:1.4}.doc-picker-helper-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;flex-shrink:0;margin-top:.125rem}.doc-picker-helper strong{color:var(--doc-picker-on-surface)}.doc-picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;font-size:.8125rem;color:var(--doc-picker-on-surface-variant);padding:1rem;background:var(--doc-picker-surface-container);border-radius:var(--doc-picker-radius-sm);text-align:center;margin:0}.doc-picker-empty mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem;opacity:.7}.doc-picker-table-wrapper{overflow:auto;max-height:50vh;border-radius:var(--doc-picker-radius-sm);border:1px solid color-mix(in srgb,var(--doc-picker-outline) 15%,transparent)}.doc-picker-table{width:100%;min-width:fit-content;table-layout:auto;border-collapse:collapse}.doc-picker-table .mat-mdc-header-row{background:color-mix(in srgb,var(--doc-picker-primary) 4%,transparent)}.doc-picker-table .mat-mdc-header-row{position:sticky;top:0;z-index:3;box-shadow:0 2px 4px #0000000f}.doc-picker-table .mat-mdc-header-cell{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--doc-picker-on-surface-variant);background:var(--mat-table-background-color, var(--mat-sys-surface));padding:.35rem .5rem}.doc-picker-table .mat-mdc-cell{font-size:.75rem;padding:.35rem .5rem}.doc-picker-col-icons,.doc-picker-col-actions{width:2.5rem;min-width:2.5rem;max-width:2.5rem;background:var(--mat-table-background-color, var(--mat-sys-surface));text-align:center}.doc-picker-row-icon{font-size:1.125rem!important;width:1.125rem!important;height:1.125rem!important;color:var(--doc-picker-primary)}.doc-picker-col-text{width:fit-content;min-width:4rem;max-width:18rem}.doc-picker-col-numeric{width:min-content;min-width:4rem}.doc-picker-table th.doc-picker-col-actions,.doc-picker-table td.doc-picker-col-actions{background:var(--mat-table-background-color, var(--mat-sys-surface))!important;box-shadow:-4px 0 8px #0000000f}.doc-picker-col-actions .mat-mdc-checkbox,.doc-picker-col-actions .mat-mdc-radio-button{--mdc-checkbox-state-layer-size: 2rem}.doc-picker-radio-group{display:block}.doc-picker-cell-value{transition:color .15s}.doc-picker-cell-text{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.doc-picker-cell-selected{color:var(--doc-picker-primary);font-weight:500}.doc-picker-row{cursor:pointer;transition:background-color .15s}.doc-picker-row:hover{background:color-mix(in srgb,var(--doc-picker-primary) 6%,transparent)}.doc-picker-row-selected{background:color-mix(in srgb,var(--doc-picker-primary) 12%,transparent)}.doc-picker-row-selected:hover{background:color-mix(in srgb,var(--doc-picker-primary) 14%,transparent)}.doc-picker-paginator{background:var(--doc-picker-surface);border-top:1px solid color-mix(in srgb,var(--doc-picker-outline) 10%,transparent)}.doc-picker-paginator .mat-mdc-paginator-container{padding:.5rem 1rem;font-size:.8125rem}.text-right-align{text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i11.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i13.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i13.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: FormatDataPipe, name: "formatData" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: PaginatedSelectionTableReactiveInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-paginated-selection-table-reactive-input', imports: [
+                        ReactiveFormsModule,
+                        FormatDataPipe,
+                        MatCardModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        MatTableModule,
+                        MatSortModule,
+                        MatPaginatorModule,
+                        MatCheckboxModule,
+                        MatRadioModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.floating]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                    }, providers: [{ provide: MatFormFieldControl, useExisting: PaginatedSelectionTableReactiveInput }], template: "\r\n<mat-card class=\"doc-picker-card\">\r\n  @if (!inputConfig()?.disabled && !inputConfig()?.readonly) {\r\n  <header class=\"doc-picker-header\">\r\n    <div class=\"doc-picker-toolbar\">\r\n      <mat-form-field subscriptSizing=\"dynamic\" class=\"doc-picker-search\">\r\n        <input matInput [placeholder]=\"searchPlaceholder()\" [formControl]=\"searchFormControl\"\r\n          [attr.aria-label]=\"searchPlaceholder()\">\r\n        @if (searchFormControl.value) {\r\n        <button mat-icon-button matSuffix (click)=\"clearSearch()\" type=\"button\"\r\n          aria-label=\"Clear search\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n        } @else {\r\n        <mat-icon matSuffix>search</mat-icon>\r\n        }\r\n      </mat-form-field>\r\n      @if (isMultiSelect && getSelectedIds().length > 0) {\r\n      <span class=\"doc-picker-selection-badge\" role=\"status\" aria-live=\"polite\">\r\n        {{ getSelectedIds().length }} selected\r\n      </span>\r\n      }\r\n    </div>\r\n  </header>\r\n  }\r\n  @if (loading()) {\r\n  <div class=\"doc-picker-loading\">\r\n    <mat-spinner [diameter]=\"40\" aria-label=\"Loading items\"></mat-spinner>\r\n  </div>\r\n  } @else {\r\n  <div class=\"doc-picker-body\">\r\n    @if (!inputConfig()?.disabled && !inputConfig()?.readonly && !value) {\r\n    <div class=\"doc-picker-helper\">\r\n      <mat-icon class=\"doc-picker-helper-icon\" color=\"primary\">info</mat-icon>\r\n      <span><strong>{{ isMultiSelect ? 'Select items' : 'Select an item' }}</strong> \u2014 Sort or use pagination to find {{ isMultiSelect ? 'them' : 'it' }}, then {{ isMultiSelect ? 'check the box' : 'select the radio' }} to select {{ isMultiSelect ? 'them' : 'it' }}.</span>\r\n    </div>\r\n    }\r\n    @if (dataSource.filteredData.length === 0) {\r\n    <div class=\"doc-picker-empty\">\r\n      <mat-icon>folder_open</mat-icon>\r\n      <span>{{ emptyMessage() }}</span>\r\n      @if (canReload()) {\r\n      <button mat-stroked-button color=\"primary\" (click)=\"reload()\" class=\"doc-picker-retry\"\r\n        aria-label=\"Retry loading items\">\r\n        <mat-icon>refresh</mat-icon>\r\n        Retry\r\n      </button>\r\n      }\r\n    </div>\r\n    }\r\n    @if (dataSource.filteredData.length > 0 && columns.length > 0) {\r\n    @if (isMultiSelect) {\r\n    <div class=\"doc-picker-table-wrapper\">\r\n      <table mat-table [dataSource]=\"dataSource\" class=\"doc-picker-table\"\r\n        [matSortActive]=\"sortActiveColumn\" matSortDisableClear matSortDirection=\"asc\"\r\n        matSort role=\"grid\" aria-label=\"Selection list\">\r\n        @for (col of columns; track col.key) {\r\n        <ng-container [matColumnDef]=\"col.key\" [stickyEnd]=\"$last\">\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header\r\n              [disabled]=\"col.key === 'icons' || col.key === 'actions'\"\r\n              [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n              [class.doc-picker-col-icons]=\"col.key === 'icons'\"\r\n              [class.doc-picker-col-actions]=\"col.key === 'actions'\"\r\n              [class.doc-picker-col-text]=\"col.key !== 'icons' && col.key !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n              [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n\r\n            @if(col.key === 'actions' && canReload()){\r\n              <button mat-icon-button\r\n                matTooltip=\"Click to refresh this field.\"\r\n                class=\"doc-picker-refresh doc-picker-refresh-spacing\"\r\n                (click)=\"reload()\"\r\n                aria-label=\"Refresh list\">\r\n                <mat-icon class=\"doc-picker-refresh-icon\">sync</mat-icon>\r\n              </button>\r\n            } @else {\r\n                {{ col.label }}\r\n            }\r\n\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row\"\r\n              [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n              [class.doc-picker-col-icons]=\"col.key === 'icons'\"\r\n              [class.doc-picker-col-actions]=\"col.key === 'actions'\"\r\n              [class.doc-picker-col-text]=\"col.key !== 'icons' && col.key !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n              [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n            @if (col.key === 'icons') {\r\n            <mat-icon class=\"doc-picker-row-icon\">description</mat-icon>\r\n            } @else if (col.key === 'actions') {\r\n            <mat-checkbox\r\n                [checked]=\"isRowSelected(row)\"\r\n                [disabled]=\"!!inputConfig()?.disabled || !!inputConfig()?.readonly\"\r\n                (change)=\"selectRow(row)\"\r\n                [matTooltip]=\"isRowSelected(row) ? 'Clear selection' : 'Select ' + (row['reference'] ?? row['name'] ?? 'item')\"\r\n                matTooltipPosition=\"below\"\r\n                [attr.aria-label]=\"isRowSelected(row) ? 'Clear selection' : 'Select ' + (row['reference'] ?? row['name'] ?? 'item')\">\r\n            </mat-checkbox>\r\n            } @else {\r\n            <span class=\"doc-picker-cell-value doc-picker-cell-text\"\r\n                [class.doc-picker-cell-selected]=\"isRowSelected(row)\"\r\n                [matTooltip]=\"row[col.key] | formatData:col.type\"\r\n                matTooltipPosition=\"above\">\r\n              {{ row[col.key] | formatData:col.type }}\r\n            </span>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n        }\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        <tr mat-row class=\"doc-picker-row\" *matRowDef=\"let row; columns: displayedColumns;\"\r\n            [class.doc-picker-row-selected]=\"isRowSelected(row)\"\r\n            [attr.aria-label]=\"'Row: ' + (row['reference'] ?? row['name'] ?? 'item')\"\r\n            [attr.aria-selected]=\"isRowSelected(row)\"></tr>\r\n      </table>\r\n    </div>\r\n    } @else {\r\n    <mat-radio-group [value]=\"getNormalizedSingleValue()\" (change)=\"onRadioChange($event)\" class=\"doc-picker-radio-group\">\r\n      <div class=\"doc-picker-table-wrapper\">\r\n      <table mat-table [dataSource]=\"dataSource\" class=\"doc-picker-table\"\r\n        [matSortActive]=\"sortActiveColumn\" matSortDisableClear matSortDirection=\"asc\"\r\n        matSort role=\"grid\" aria-label=\"Selection list\">\r\n        @for (col of columns; track col.key) {\r\n        <ng-container [matColumnDef]=\"col.key\" [stickyEnd]=\"$last\">\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header\r\n              [disabled]=\"col.key === 'icons' || col.key === 'actions'\"\r\n              [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n              [class.doc-picker-col-icons]=\"col.key === 'icons'\"\r\n              [class.doc-picker-col-actions]=\"col.key === 'actions'\"\r\n              [class.doc-picker-col-text]=\"col.key !== 'icons' && col.key !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n              [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n            @if (col.key === 'actions' && canReload()) {\r\n              <button mat-icon-button\r\n                matTooltip=\"Click to refresh this field.\"\r\n                class=\"doc-picker-refresh doc-picker-refresh-spacing\"\r\n                (click)=\"reload()\"\r\n                aria-label=\"Refresh list\">\r\n                <mat-icon class=\"doc-picker-refresh-icon\">sync</mat-icon>\r\n              </button>\r\n            } @else {\r\n              {{ col.label }}\r\n            }\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row\"\r\n              [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n              [class.doc-picker-col-icons]=\"col.key === 'icons'\"\r\n              [class.doc-picker-col-actions]=\"col.key === 'actions'\"\r\n              [class.doc-picker-col-text]=\"col.key !== 'icons' && col.key !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n              [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n            @if (col.key === 'icons') {\r\n            <mat-icon class=\"doc-picker-row-icon\">description</mat-icon>\r\n            } @else if (col.key === 'actions') {\r\n            <mat-radio-button\r\n                [value]=\"getRowId(row)\"\r\n                [disabled]=\"!!inputConfig()?.disabled || !!inputConfig()?.readonly\"\r\n                (click)=\"onRadioClick(row, $event)\"\r\n                [matTooltip]=\"isRowSelected(row) ? 'Clear selection' : 'Select ' + (row['reference'] ?? row['name'] ?? 'item')\"\r\n                matTooltipPosition=\"below\"\r\n                [attr.aria-label]=\"isRowSelected(row) ? 'Clear selection' : 'Select ' + (row['reference'] ?? row['name'] ?? 'item')\">\r\n            </mat-radio-button>\r\n            } @else {\r\n            <span class=\"doc-picker-cell-value doc-picker-cell-text\"\r\n                [class.doc-picker-cell-selected]=\"isRowSelected(row)\"\r\n                [matTooltip]=\"row[col.key] | formatData:col.type\"\r\n                matTooltipPosition=\"above\">\r\n              {{ row[col.key] | formatData:col.type }}\r\n            </span>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n        }\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        <tr mat-row class=\"doc-picker-row\" *matRowDef=\"let row; columns: displayedColumns;\"\r\n            [class.doc-picker-row-selected]=\"isRowSelected(row)\"\r\n            [attr.aria-label]=\"'Row: ' + (row['reference'] ?? row['name'] ?? 'item')\"\r\n            [attr.aria-selected]=\"isRowSelected(row)\"></tr>\r\n      </table>\r\n    </div>\r\n    </mat-radio-group>\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n  @if (!inputConfig()?.disabled && !inputConfig()?.readonly && dataSource.filteredData.length > 0 && !loading()) {\r\n  <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n      [pageSize]=\"5\"\r\n      [length]=\"dataSource.filteredData.length\"\r\n      showFirstLastButtons\r\n      aria-label=\"Selection list pagination\" class=\"doc-picker-paginator\"></mat-paginator>\r\n  }\r\n</mat-card>\r\n", styles: [":host{--doc-picker-radius-lg: 12px;--doc-picker-radius-sm: 8px;--doc-picker-radius-pill: 6px;--doc-picker-shadow: 0 2px 8px rgba(0, 0, 0, .08);--doc-picker-primary: var(--mat-sys-primary, #6750a4);--doc-picker-surface: var(--mat-sys-surface, #fef7ff);--doc-picker-surface-container: var(--mat-sys-surface-container, #f3edf7);--doc-picker-on-surface: var(--mat-sys-on-surface, #1c1b1f);--doc-picker-on-surface-variant: var(--mat-sys-on-surface-variant, #49454f);--doc-picker-outline: var(--mat-sys-outline, #79747e)}@media(prefers-color-scheme:dark){:host{--doc-picker-shadow: 0 1px 3px rgba(0, 0, 0, .3)}}.doc-picker-card{border-radius:var(--doc-picker-radius-lg);box-shadow:var(--doc-picker-shadow);border:1px solid color-mix(in srgb,var(--doc-picker-outline) 15%,transparent);overflow:hidden;background:var(--doc-picker-surface)}.doc-picker-header{display:flex;align-items:center;gap:.75rem;padding:0rem;background:color-mix(in srgb,var(--doc-picker-primary) 4%,transparent);border-bottom:1px solid color-mix(in srgb,var(--doc-picker-outline) 10%,transparent)}.doc-picker-toolbar{display:flex;align-items:center;gap:.5rem;flex-shrink:0;width:100%}.doc-picker-selection-badge{flex-shrink:0;font-size:.75rem;font-weight:500;padding:.25rem .5rem;border-radius:var(--doc-picker-radius-pill);background:color-mix(in srgb,var(--doc-picker-primary) 14%,transparent);color:var(--doc-picker-primary);white-space:nowrap}.doc-picker-loading{display:flex;justify-content:center;align-items:center;padding:1.5rem;min-height:6rem}.doc-picker-retry{min-height:2.25rem;font-size:.8125rem;transition:all .15s}.doc-picker-retry mat-icon{margin-right:.25rem;vertical-align:middle;font-size:1rem;width:1rem;height:1rem}.doc-picker-refresh{flex-shrink:0;transition:transform .15s}.doc-picker-refresh:hover{transform:rotate(90deg)}.doc-picker-refresh-spacing{margin-right:.25rem}.doc-picker-refresh-icon{height:1.25rem;width:1.25rem;font-size:1.25rem;color:var(--doc-picker-primary)}.doc-picker-search{width:100%;min-width:8rem}.doc-picker-search .mat-mdc-form-field{--mdc-filled-text-field-container-color: transparent;--mdc-filled-text-field-container-shape: var(--doc-picker-radius-sm)}.doc-picker-search .mat-mdc-form-field-subscript-wrapper{display:none}.doc-picker-search input{font-size:.8125rem}.doc-picker-body{padding:.75rem 1rem;display:flex;flex-direction:column;gap:.75rem}.doc-picker-helper{display:flex;align-items:flex-start;gap:.5rem;padding:.5rem .75rem;background:color-mix(in srgb,var(--doc-picker-primary) 6%,transparent);border-radius:var(--doc-picker-radius-sm);font-size:.8125rem;color:var(--doc-picker-on-surface-variant);line-height:1.4}.doc-picker-helper-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;flex-shrink:0;margin-top:.125rem}.doc-picker-helper strong{color:var(--doc-picker-on-surface)}.doc-picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;font-size:.8125rem;color:var(--doc-picker-on-surface-variant);padding:1rem;background:var(--doc-picker-surface-container);border-radius:var(--doc-picker-radius-sm);text-align:center;margin:0}.doc-picker-empty mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem;opacity:.7}.doc-picker-table-wrapper{overflow:auto;max-height:50vh;border-radius:var(--doc-picker-radius-sm);border:1px solid color-mix(in srgb,var(--doc-picker-outline) 15%,transparent)}.doc-picker-table{width:100%;min-width:fit-content;table-layout:auto;border-collapse:collapse}.doc-picker-table .mat-mdc-header-row{background:color-mix(in srgb,var(--doc-picker-primary) 4%,transparent)}.doc-picker-table .mat-mdc-header-row{position:sticky;top:0;z-index:3;box-shadow:0 2px 4px #0000000f}.doc-picker-table .mat-mdc-header-cell{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--doc-picker-on-surface-variant);background:var(--mat-table-background-color, var(--mat-sys-surface));padding:.35rem .5rem}.doc-picker-table .mat-mdc-cell{font-size:.75rem;padding:.35rem .5rem}.doc-picker-col-icons,.doc-picker-col-actions{width:2.5rem;min-width:2.5rem;max-width:2.5rem;background:var(--mat-table-background-color, var(--mat-sys-surface));text-align:center}.doc-picker-row-icon{font-size:1.125rem!important;width:1.125rem!important;height:1.125rem!important;color:var(--doc-picker-primary)}.doc-picker-col-text{width:fit-content;min-width:4rem;max-width:18rem}.doc-picker-col-numeric{width:min-content;min-width:4rem}.doc-picker-table th.doc-picker-col-actions,.doc-picker-table td.doc-picker-col-actions{background:var(--mat-table-background-color, var(--mat-sys-surface))!important;box-shadow:-4px 0 8px #0000000f}.doc-picker-col-actions .mat-mdc-checkbox,.doc-picker-col-actions .mat-mdc-radio-button{--mdc-checkbox-state-layer-size: 2rem}.doc-picker-radio-group{display:block}.doc-picker-cell-value{transition:color .15s}.doc-picker-cell-text{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.doc-picker-cell-selected{color:var(--doc-picker-primary);font-weight:500}.doc-picker-row{cursor:pointer;transition:background-color .15s}.doc-picker-row:hover{background:color-mix(in srgb,var(--doc-picker-primary) 6%,transparent)}.doc-picker-row-selected{background:color-mix(in srgb,var(--doc-picker-primary) 12%,transparent)}.doc-picker-row-selected:hover{background:color-mix(in srgb,var(--doc-picker-primary) 14%,transparent)}.doc-picker-paginator{background:var(--doc-picker-surface);border-top:1px solid color-mix(in srgb,var(--doc-picker-outline) 10%,transparent)}.doc-picker-paginator .mat-mdc-paginator-container{padding:.5rem 1rem;font-size:.8125rem}.text-right-align{text-align:right}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { formBuilderFunctions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formBuilderFunctions", required: false }] }], canReload: [{ type: i0.Input, args: [{ isSignal: true, alias: "canReload", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: false }] }], reloadData: [{ type: i0.Output, args: ["reloadData"] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }] } });
+
+/** Wraps a paginated selection-table control inside a `mat-form-field`. */
+class PaginatedSelectionTable {
+    constructor() {
+        this.inputConfig = input.required(...(ngDevMode ? [{ debugName: "inputConfig" }] : /* istanbul ignore next */ []));
+        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        this.reload = output();
+        this.errorMessage = computed(() => getInputErrorMessage(this.inputConfig(), this.formGroup()), ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+        this.errorStateMatcher = {
+            isErrorState(control, _form) {
+                return !!(control && control.invalid && (control.dirty || control.touched));
+            },
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: PaginatedSelectionTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: PaginatedSelectionTable, isStandalone: true, selector: "lib-paginated-selection-table", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { reload: "reload" }, ngImport: i0, template: "<ng-container [formGroup]=\"formGroup()\">\r\n  @if (inputConfig(); as inputConfig) {\r\n    <mat-form-field [appearance]=\"inputConfig.appearance || 'fill'\" subscriptSizing=\"dynamic\">\r\n      <mat-label>\r\n        {{ inputConfig.label }}\r\n        <lib-t-form-input-status [inputConfig]=\"inputConfig\"></lib-t-form-input-status>\r\n      </mat-label>\r\n\r\n      <lib-paginated-selection-table-reactive-input\r\n        [inputConfig]=\"inputConfig\"\r\n        [disabled]=\"!!inputConfig.disabled\"\r\n        [required]=\"inputConfig.required\"\r\n        [canReload]=\"!!inputConfig.canReload?.canReload || false\"\r\n        (reloadData)=\"inputConfig.canReload.emit()\"\r\n        [formControlName]=\"inputConfig.id\"\r\n      ></lib-paginated-selection-table-reactive-input>\r\n\r\n      @if (inputConfig.hintLabel || inputConfig.temporaryHint) {\r\n        <mat-hint class=\"inputHint\">\r\n          {{ inputConfig.temporaryHint || inputConfig.hintLabel }}\r\n        </mat-hint>\r\n      }\r\n\r\n      <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\r\n\r\n      @if (inputConfig.prefixIcon) {\r\n        <mat-icon matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n      }\r\n\r\n      @if (inputConfig.suffixIcon && inputConfig.id !== 'password') {\r\n        <mat-icon matSuffix>{{ inputConfig.suffixIcon }}</mat-icon>\r\n      }\r\n\r\n      @if (inputConfig.prefixText) {\r\n        <span matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      }\r\n      @if (inputConfig.suffixText) {\r\n        <span matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText }}</span>\r\n      }\r\n\r\n      @if (inputConfig.maxLength && formGroup()) {\r\n        <mat-hint align=\"end\">\r\n          {{ (formGroup().controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength }}\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n  }\r\n</ng-container>\r\n", styles: ["mat-form-field{width:100%}mat-form-field .input-sync-button{display:none}mat-form-field:hover .input-sync-button{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: PaginatedSelectionTableReactiveInput, selector: "lib-paginated-selection-table-reactive-input", inputs: ["formBuilderFunctions", "canReload", "loading", "searchPlaceholder", "emptyMessage", "inputConfig"], outputs: ["reloadData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: PaginatedSelectionTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-paginated-selection-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        TFormInputStatusComponent,
+                        PaginatedSelectionTableReactiveInput,
+                    ], template: "<ng-container [formGroup]=\"formGroup()\">\r\n  @if (inputConfig(); as inputConfig) {\r\n    <mat-form-field [appearance]=\"inputConfig.appearance || 'fill'\" subscriptSizing=\"dynamic\">\r\n      <mat-label>\r\n        {{ inputConfig.label }}\r\n        <lib-t-form-input-status [inputConfig]=\"inputConfig\"></lib-t-form-input-status>\r\n      </mat-label>\r\n\r\n      <lib-paginated-selection-table-reactive-input\r\n        [inputConfig]=\"inputConfig\"\r\n        [disabled]=\"!!inputConfig.disabled\"\r\n        [required]=\"inputConfig.required\"\r\n        [canReload]=\"!!inputConfig.canReload?.canReload || false\"\r\n        (reloadData)=\"inputConfig.canReload.emit()\"\r\n        [formControlName]=\"inputConfig.id\"\r\n      ></lib-paginated-selection-table-reactive-input>\r\n\r\n      @if (inputConfig.hintLabel || inputConfig.temporaryHint) {\r\n        <mat-hint class=\"inputHint\">\r\n          {{ inputConfig.temporaryHint || inputConfig.hintLabel }}\r\n        </mat-hint>\r\n      }\r\n\r\n      <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\r\n\r\n      @if (inputConfig.prefixIcon) {\r\n        <mat-icon matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n      }\r\n\r\n      @if (inputConfig.suffixIcon && inputConfig.id !== 'password') {\r\n        <mat-icon matSuffix>{{ inputConfig.suffixIcon }}</mat-icon>\r\n      }\r\n\r\n      @if (inputConfig.prefixText) {\r\n        <span matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      }\r\n      @if (inputConfig.suffixText) {\r\n        <span matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText }}</span>\r\n      }\r\n\r\n      @if (inputConfig.maxLength && formGroup()) {\r\n        <mat-hint align=\"end\">\r\n          {{ (formGroup().controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength }}\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n  }\r\n</ng-container>\r\n", styles: ["mat-form-field{width:100%}mat-form-field .input-sync-button{display:none}mat-form-field:hover .input-sync-button{display:inline-block}\n"] }]
+        }], propDecorators: { inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], reload: [{ type: i0.Output, args: ["reload"] }] } });
+
+export { PaginatedSelectionTable };
+//# sourceMappingURL=ngx-t-forms-paginated-selection-table-AQZSMmhr.mjs.map