ngx-t-forms 2.0.30 → 2.0.32

package/fesm2022/ngx-t-forms-document-picker.component-BThdRFec.mjs

@@ -0,0 +1,704 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, ElementRef, input, viewChild, ChangeDetectorRef, DestroyRef, effect, ChangeDetectionStrategy, Component, output, 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 { N as NGX_T_FORMS_CONFIG_TOKEN, B as BaseCustomInput, _ as _isEqual, C as returnMappedPathValue, G as FormatDataPipe, q as getInputErrorMessage, u as TFormInputStatusComponent } from './ngx-t-forms-ngx-t-forms-C2G8_WQk.mjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { of, throwError, debounceTime, map as map$1, distinctUntilChanged, tap, take as take$1, catchError as catchError$1, finalize } from 'rxjs';
+import { take, map, catchError } from 'rxjs/operators';
+import { DataSources, DocumentLitsLabelConfigInterfaceValueType } from 'ngx-t-forms-types';
+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 * as i5$1 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+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 { MatDividerModule } from '@angular/material/divider';
+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';
+
+/** Default sort when none provided: updatedAt descending. */
+const DEFAULT_SORT = { updatedAt: -1 };
+/**
+ * Abstracts document fetching from different data sources (API, MongoDB, default).
+ * For default source with getWorkflowDocuments, supports server-side pagination, sort, and search
+ * (aligned with getTransactionsWithSchema / getWorkflowDocuments).
+ */
+class DocumentLoaderService {
+    constructor() {
+        this.formsConfig = inject(NGX_T_FORMS_CONFIG_TOKEN, { optional: true });
+    }
+    loadDocuments(params) {
+        const { sourceType, documentsSource, workflowId } = params;
+        if (sourceType === DataSources.Api && documentsSource) {
+            return this.loadFromApi(params);
+        }
+        if (sourceType === DataSources.MongoDb && documentsSource) {
+            return this.loadFromMongoDb(params);
+        }
+        if (sourceType === 'default') {
+            return this.loadFromDefault(workflowId, params);
+        }
+        return of({ documents: [] });
+    }
+    /**
+     * Normalizes API/MongoDB/default responses to LoadDocumentsResult.
+     * Extracts documents from formValues, documents, results, or raw array.
+     * Validates footerConfig. Returns empty documents + error on malformed response.
+     */
+    normalizeToLoadDocumentsResult(response) {
+        if (response == null) {
+            return { documents: [] };
+        }
+        const res = response;
+        const rawDocs = res['formValues'] ?? res['documents'] ?? res['results'] ?? (Array.isArray(response) ? response : undefined);
+        if (!Array.isArray(rawDocs)) {
+            return {
+                documents: [],
+                error: 'Invalid response format: expected formValues, documents, or results array',
+            };
+        }
+        const documents = this.flattenListDocuments(rawDocs);
+        const footerConfig = this.validateFooterConfig(res['footerConfig']);
+        return { documents, footerConfig };
+    }
+    validateFooterConfig(fc) {
+        if (!fc || typeof fc !== 'object')
+            return undefined;
+        const o = fc;
+        const totalPages = o['totalPages'];
+        const totalItems = o['totalItems'];
+        const itemsPerPage = o['itemsPerPage'];
+        if (typeof totalPages !== 'number' || typeof totalItems !== 'number' || typeof itemsPerPage !== 'number') {
+            return undefined;
+        }
+        return {
+            totalPages,
+            totalItems,
+            itemsPerPage,
+            currentPage: typeof o['currentPage'] === 'number' ? o['currentPage'] : undefined,
+            sortBy: (o['sortBy'] && typeof o['sortBy'] === 'object')
+                ? o['sortBy']
+                : undefined,
+        };
+    }
+    loadFromApi(params) {
+        const { documentsSource, workflowId, parentFormValue, formBuilder } = params;
+        const config = documentsSource;
+        const missingInputs = [];
+        const postData = (config.backEndConfig?.minimumInputRequired ?? []).reduce((acc, curr) => {
+            if (curr.type === 'default') {
+                acc[curr.name] = curr.defaultValue;
+                return acc;
+            }
+            if (curr.type === 'mapto' && parentFormValue[curr.name] !== undefined) {
+                acc[curr.name] = parentFormValue[curr.name];
+                return acc;
+            }
+            missingInputs.push(curr.name);
+            return acc;
+        }, {});
+        postData['workflowId'] = workflowId;
+        postData['page'] = params.page ?? 1;
+        postData['itemsPerPage'] = params.itemsPerPage ?? 10;
+        postData['sort'] = (params.sort && Object.keys(params.sort).length > 0) ? params.sort : DEFAULT_SORT;
+        postData['searchKey'] = params.searchKey;
+        if (params.filter && Object.keys(params.filter).length > 0) {
+            postData['filter'] = params.filter;
+        }
+        if (missingInputs.length > 0) {
+            return throwError(() => new Error(`Missing inputs: ${missingInputs.join(', ')}`));
+        }
+        return formBuilder.httpPostDataFunction(config.httpEndPoint, postData).pipe(take(1), map((response) => this.normalizeToLoadDocumentsResult(response)), catchError((err) => {
+            const msg = err?.error?.message ?? (err instanceof Error ? err.message : 'Unknown error');
+            return of({ documents: [], error: msg });
+        }));
+    }
+    loadFromMongoDb(params) {
+        const { documentsSource, formBuilder } = params;
+        const config = documentsSource;
+        if (!config.pipeline || config.pipeline.length === 0) {
+            return throwError(() => new Error('No pipeline found'));
+        }
+        if (!config.workflowId) {
+            return throwError(() => new Error('No workflow id found'));
+        }
+        const paginationParams = {
+            page: params.page ?? 1,
+            itemsPerPage: params.itemsPerPage ?? 10,
+            sort: (params.sort && Object.keys(params.sort).length > 0) ? params.sort : DEFAULT_SORT,
+            searchKey: params.searchKey,
+            ...(params.filter && Object.keys(params.filter).length > 0 ? { filter: params.filter } : {}),
+        };
+        const runPipeline = formBuilder.runMongoDbPipeLine;
+        return runPipeline(config.pipeline, config.workflowId, paginationParams).pipe(take(1), map((data) => this.normalizeToLoadDocumentsResult(data)), catchError((err) => {
+            const msg = err?.error?.message ?? (err instanceof Error ? err.message : 'Unknown error');
+            return of({ documents: [], error: msg });
+        }));
+    }
+    loadFromDefault(workflowId, params) {
+        // Prefer formBuilder from params; fallback to injected config when params.formBuilder
+        // lacks getWorkflowDocuments (e.g. form builder preview, test-app, or partial config)
+        const getWorkflowDocuments = this.formsConfig?.formBuilder?.getWorkflowDocuments;
+        if (typeof getWorkflowDocuments !== 'function') {
+            return of({ documents: [] });
+        }
+        const page = params.page ?? 1;
+        const itemsPerPage = params.itemsPerPage ?? 10;
+        const sort = (params.sort && Object.keys(params.sort).length > 0) ? params.sort : DEFAULT_SORT;
+        const searchKey = params.searchKey;
+        const filter = params.filter;
+        return getWorkflowDocuments(workflowId, page, itemsPerPage, sort, searchKey, filter).pipe(take(1), map((res) => this.normalizeToLoadDocumentsResult(res)));
+    }
+    /**
+     * Flatten WorkFlowDocumentInterface list rows so form fields are at top level.
+     * Matches getSelectedDocument structure so row[col.formControlName] works for all columns.
+     * Attaches _originalDoc so primaryIdentifierKey can resolve against the original nested structure
+     * (e.g. { _id, reference, form: { customId } }) when the flattened row has form keys at top level.
+     */
+    flattenListDocuments(docs) {
+        return docs.map((doc) => {
+            const form = doc['form'];
+            if (!form || typeof form !== 'object')
+                return { ...doc, _originalDoc: doc };
+            const { form: _f, ...rest } = doc;
+            return { ...rest, ...form, _originalDoc: doc };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DocumentLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DocumentLoaderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DocumentLoaderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const customInputConfig = {
+    controlType: 'lib-document-picker-reactive-input',
+    nextId: 0,
+};
+/**
+ * Document Picker: Link workflow transactions via search, sort, and selection.
+ *
+ * User Story: As a Process Coordinator, I want to search, sort, and select specific workflow
+ * transactions from a paginated list, so that I can accurately link related records.
+ *
+ * AC1 Dynamic loading: Reloads when workflowId/inputConfig changes.
+ * AC2 Search: Refreshes list and resets to page 1 on keyword change; restores full list when cleared.
+ * AC3 Sort/Pagination: Sort resets to page 1; pagination fetches subset while preserving search/sort.
+ * AC4 Selection: Selected transaction shown clearly; deselect restores paginated view.
+ * AC5 Empty/Error: "No transactions found" when empty; error state with retry option.
+ */
+class DocumentPickerReactiveInputComponent extends BaseCustomInput {
+    #formsConfig;
+    #documentLoader;
+    #cdr;
+    #destroyRef;
+    #pickerConfig;
+    #lastInputConfig;
+    /** Documents loaded in memory. For client-side: full list; for server-side: current page only. */
+    #documentOptions;
+    /** Last loaded workflowId/sourceType - only reload when these change. */
+    #lastLoadedWorkflowId;
+    #lastLoadedSourceType;
+    constructor() {
+        super(inject(NgControl, { self: true, optional: true }), inject(ElementRef), customInputConfig);
+        this.formBuilderFunctions = input(undefined, ...(ngDevMode ? [{ debugName: "formBuilderFunctions" }] : /* istanbul ignore next */ []));
+        this.searchPlaceholder = input('Search transactions…', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+        this.emptyMessage = input('No transactions found', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        this.inputConfig = input(undefined, ...(ngDevMode ? [{ debugName: "inputConfig" }] : /* istanbul ignore next */ []));
+        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.#formsConfig = inject(NGX_T_FORMS_CONFIG_TOKEN);
+        this.#documentLoader = inject(DocumentLoaderService);
+        this.#cdr = inject(ChangeDetectorRef);
+        this.#destroyRef = inject(DestroyRef);
+        this._cols = [];
+        this._loadingCols = false;
+        /** Documents loaded in memory. For client-side: full list; for server-side: current page only. */
+        this.#documentOptions = [];
+        this.serverPage = 1;
+        this.serverPageSize = 5;
+        this.serverSort = { ...DEFAULT_SORT };
+        this.loadingData = false;
+        this.selectedDocument = undefined;
+        this.#listenToStateChanges();
+        this.#setupFilterPredicate();
+        this.#setupSearchSubscription();
+        // Replaces the previous @Input setter side-effect: react to inputConfig changes.
+        effect(() => {
+            const value = this.inputConfig();
+            if (_isEqual(this.#lastInputConfig, value))
+                return;
+            this.#lastInputConfig = value;
+            this.loadCols();
+        });
+    }
+    get isMultiSelect() {
+        return this.inputConfig()?.allowMultipleSelection === true;
+    }
+    get primaryIdentifierKey() {
+        return this.inputConfig()?.workflowPickerConfig?.primaryIdentifierKey;
+    }
+    /**
+     * Returns the row identifier. Uses returnMappedPathValue when primaryIdentifierKey is set,
+     * resolving against the original document (row._originalDoc) for nested paths like form.customId,
+     * since the table row is flattened. Fallback: _id or id.
+     */
+    getRowId(row) {
+        const pk = this.primaryIdentifierKey;
+        if (pk != null && pk !== '') {
+            const doc = row['_originalDoc'] ?? row;
+            return returnMappedPathValue(pk, doc);
+        }
+        return row['_id'] ?? row['id'];
+    }
+    /**
+     * Builds a filter object for the selected value.
+     * Key: dot-joined path from primaryIdentifierKey (e.g. form.customId) or '_id' when not set.
+     * Value: the current value.
+     */
+    #buildFilterForValue() {
+        const val = this.value;
+        if (val == null || val === '')
+            return undefined;
+        const pk = this.primaryIdentifierKey;
+        let filterKey = '_id';
+        if (pk != null && pk !== '') {
+            if (typeof pk === 'string') {
+                filterKey = pk;
+            }
+            else if (Array.isArray(pk) && pk.length > 0) {
+                filterKey = pk
+                    .map((n) => (typeof n === 'object' && n != null && (n).key != null ? String((n).key) : String(n)))
+                    .join('.');
+            }
+        }
+        return { [filterKey]: val };
+    }
+    /** Builds a minimal row from an id for fallback when the row is not in documentOptions/dataSource. */
+    #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;
+    }
+    /** Returns selected id(s) as strings. Handles value from form/API (string, number, ObjectId, etc.). */
+    getSelectedIds() {
+        const v = this.value;
+        if (v == null || v === '')
+            return [];
+        if (Array.isArray(v))
+            return v.map((x) => (x != null ? String(x) : '')).filter(Boolean);
+        return [String(v)];
+    }
+    isRowSelected(row) {
+        const id = this.getRowId(row);
+        return this.getSelectedIds().some((sid) => sid == id || String(id) === sid);
+    }
+    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;
+    }
+    ngAfterViewInit() {
+        const sortRef = this.sort();
+        if (sortRef) {
+            this.dataSource.sort = sortRef;
+            sortRef.sortChange.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((s) => {
+                if (this.footerConfig && s.active && s.direction) {
+                    this.onSortChange(s.active, s.direction);
+                }
+            });
+        }
+        this.#attachPaginatorIfNeeded();
+    }
+    /** Attach paginator when client-side (not server-side). Server-side uses length from footerConfig. */
+    #attachPaginatorIfNeeded() {
+        if (this.footerConfig)
+            return; // Server-side: paginator length handled by template
+        const paginatorRef = this.paginator();
+        if (paginatorRef && this.dataSource.paginator !== paginatorRef) {
+            this.dataSource.paginator = paginatorRef;
+            this.#cdr.markForCheck();
+        }
+    }
+    #setupFilterPredicate() {
+        this.dataSource.filterPredicate = (doc, filter) => {
+            const term = filter?.trim();
+            if (!term)
+                return true;
+            if (typeof doc !== 'object' || doc === null)
+                return false;
+            const regex = new RegExp(term.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'i');
+            return Object.values(doc).some(value => typeof value === 'string' && regex.test(value));
+        };
+    }
+    #setupSearchSubscription() {
+        this.searchFormControl.valueChanges.pipe(debounceTime(400), map$1((term) => term?.trim() ?? ''), distinctUntilChanged((a, b) => a === b), takeUntilDestroyed(this.#destroyRef)).subscribe((filter) => {
+            if (this.footerConfig) {
+                this.serverPage = 1;
+                this.loadDocumentOptions(true);
+            }
+            else {
+                this.dataSource.filter = filter;
+                this.dataSource.paginator?.firstPage();
+            }
+        });
+    }
+    get parentFormGroup() {
+        return this.ngControl?.control?.parent;
+    }
+    get displayedColumns() {
+        return this._cols.map((col) => col.formControlName);
+    }
+    /** Page index for paginator: server-side uses serverPage; client-side uses paginator's current page. */
+    get pageIndexForDisplay() {
+        return this.footerConfig ? this.serverPage - 1 : (this.paginator()?.pageIndex ?? 0);
+    }
+    /** Page size for paginator: server-side uses serverPageSize; client-side uses paginator's current size. */
+    get pageSizeForDisplay() {
+        return this.footerConfig ? this.serverPageSize : (this.paginator()?.pageSize ?? 5);
+    }
+    /** True when server echoes sort in footerConfig; false when sortBy is empty → use local sort. */
+    get serverMaintainsSort() {
+        const sb = this.footerConfig?.sortBy;
+        return !!(sb && typeof sb === 'object' && Object.keys(sb).length > 0);
+    }
+    /**
+     * Documents load only when workflowId or documentSourceType changes.
+     * Search, pagination, sorting operate client-side on already-loaded data.
+     */
+    #shouldLoadDocuments(forceRefresh) {
+        if (forceRefresh)
+            return true;
+        const pickerConfig = this.inputConfig()?.workflowPickerConfig;
+        const workflowId = pickerConfig?.workflowId ?? '';
+        const sourceType = pickerConfig?.documentSourceType ?? 'default';
+        if (!workflowId || !sourceType)
+            return false;
+        return (this.#lastLoadedWorkflowId !== workflowId || this.#lastLoadedSourceType !== sourceType);
+    }
+    #listenToStateChanges() {
+        this.stateChanges.pipe(takeUntilDestroyed(this.#destroyRef), tap(() => {
+            if (this.isMultiSelect) {
+                this.dataSource.data = [...this.#documentOptions];
+                this.#cdr.markForCheck();
+                return;
+            }
+            const hasValue = !!this.value;
+            const docIdMatches = this.selectedDocument != null && this.getRowId(this.selectedDocument) == this.value;
+            if (!docIdMatches && hasValue) {
+                // Use filter so the selected document appears on the first page
+                this.serverPage = 1;
+                this.loadDocumentOptions(true);
+            }
+            else if (!docIdMatches && !hasValue) {
+                this.restoreDocumentList();
+            }
+        })).subscribe();
+    }
+    /** Restore list view from memory (no API call). Use when value is cleared or user deselects. */
+    restoreDocumentList() {
+        this.selectedDocument = undefined;
+        this.dataSource.data = [...this.#documentOptions];
+        this.loadingData = false;
+        this.dataLoadingError = undefined;
+        setTimeout(() => this.#attachPaginatorIfNeeded(), 0);
+        this.#cdr.markForCheck();
+    }
+    loadCols() {
+        const newConfig = this.#lastInputConfig?.workflowPickerConfig;
+        if (_isEqual(this.#pickerConfig, newConfig))
+            return;
+        if (!newConfig?.workflowId) {
+            this.#pickerConfig = newConfig;
+            this._cols = [];
+            this.#documentOptions = [];
+            this.dataSource.data = [];
+            this.#lastLoadedWorkflowId = undefined;
+            this.#lastLoadedSourceType = undefined;
+            this.footerConfig = undefined;
+            this.serverPage = 1;
+            this.serverPageSize = 10;
+            this.serverSort = { ...DEFAULT_SORT };
+            this.selectedDocument = undefined;
+            this.dataLoadingError = undefined;
+            this.#cdr.markForCheck();
+            return;
+        }
+        this.#pickerConfig = newConfig;
+        this.#lastLoadedWorkflowId = undefined;
+        this.#lastLoadedSourceType = undefined;
+        this.footerConfig = undefined;
+        this.serverPage = 1;
+        this._loadingCols = true;
+        this.#cdr.markForCheck();
+        this.#formsConfig.formBuilder.getWorkflowCols(newConfig.workflowId).pipe(take$1(1), tap((cols) => {
+            this._cols = [
+                { label: '', formControlName: 'icons' },
+                { label: 'reference', formControlName: 'reference' },
+                { label: 'Updated', formControlName: 'updatedAt', type: DocumentLitsLabelConfigInterfaceValueType.date },
+                ...cols,
+                { label: '', formControlName: 'actions' },
+            ];
+            this.loadDocumentOptions();
+        }), catchError$1(() => {
+            this._cols = [];
+            return of([]);
+        }), finalize(() => {
+            this._loadingCols = false;
+            this.#cdr.markForCheck();
+        }), takeUntilDestroyed(this.#destroyRef)).subscribe();
+    }
+    /**
+     * Load documents only when workflowId or documentSourceType changes.
+     * Called from: loadCols (config change), refreshDocuments (user refresh).
+     */
+    loadDocumentOptions(forceRefresh = false) {
+        const pickerConfig = this.inputConfig()?.workflowPickerConfig;
+        const workflowId = pickerConfig?.workflowId ?? '';
+        const sourceType = pickerConfig?.documentSourceType ?? 'default';
+        const newSource = pickerConfig?.documentsSource;
+        if (!sourceType)
+            return;
+        if (!forceRefresh && !this.#shouldLoadDocuments(false))
+            return;
+        this.#lastLoadedWorkflowId = workflowId;
+        this.#lastLoadedSourceType = sourceType;
+        this.loadingData = true;
+        this.dataLoadingError = undefined;
+        this.#cdr.markForCheck();
+        const effectiveSort = (this.serverSort && Object.keys(this.serverSort).length > 0) ? this.serverSort : DEFAULT_SORT;
+        const filter = !this.isMultiSelect && this.value ? this.#buildFilterForValue() : undefined;
+        const parentFormValue = {
+            ...(this.parentFormGroup?.value ?? {}),
+            page: this.serverPage,
+            itemsPerPage: this.serverPageSize,
+            sort: effectiveSort,
+            searchKey: this.searchFormControl.value?.trim() || undefined,
+            ...(filter ? { filter } : {}),
+        };
+        const params = {
+            sourceType,
+            documentsSource: newSource,
+            workflowId,
+            parentFormValue,
+            formBuilder: this.#formsConfig.formBuilder,
+            page: this.serverPage,
+            itemsPerPage: this.serverPageSize,
+            sort: effectiveSort,
+            searchKey: this.searchFormControl.value?.trim() || undefined,
+            filter,
+        };
+        this.#documentLoader.loadDocuments(params).pipe(take$1(1), tap((result) => {
+            const documents = result.documents;
+            this.#documentOptions = documents;
+            this.footerConfig = result.footerConfig;
+            this.dataLoadingError = result.error;
+            if (this.isMultiSelect) {
+                this.dataSource.data = [...this.#documentOptions];
+                setTimeout(() => this.#attachPaginatorIfNeeded(), 0);
+            }
+            else if (this.value) {
+                const matchingDoc = documents.find((d) => this.getRowId(d) == this.value);
+                const rowFromCurrent = !matchingDoc && this.dataSource.data?.length
+                    ? this.dataSource.data.find((d) => this.getRowId(d) == this.value)
+                    : null;
+                const displayDoc = matchingDoc ?? rowFromCurrent ?? this.#buildFallbackRowFromId(this.value);
+                this.selectedDocument = matchingDoc ?? rowFromCurrent ?? undefined;
+                this.dataSource.data = [displayDoc];
+                setTimeout(() => this.#attachPaginatorIfNeeded(), 0);
+            }
+            else {
+                this.selectedDocument = undefined;
+                this.dataSource.data = [...this.#documentOptions];
+                setTimeout(() => this.#attachPaginatorIfNeeded(), 0);
+            }
+        }), catchError$1((error) => {
+            this.dataLoadingError =
+                error?.error?.message ?? (error instanceof Error ? error.message : 'Unknown error');
+            this.#documentOptions = [];
+            this.footerConfig = undefined;
+            this.dataSource.data = [];
+            return of({ documents: [] });
+        }), finalize(() => {
+            this.loadingData = false;
+            this.#cdr.markForCheck();
+        }), takeUntilDestroyed(this.#destroyRef)).subscribe();
+    }
+    refreshDocuments() {
+        this.#lastLoadedWorkflowId = undefined;
+        this.#lastLoadedSourceType = undefined;
+        this.loadDocumentOptions(true);
+    }
+    /** Server-side: handle paginator page/pageSize change. */
+    onPageChange(event) {
+        if (!this.footerConfig)
+            return;
+        this.serverPage = event.pageIndex + 1;
+        this.serverPageSize = event.pageSize;
+        this.loadDocumentOptions(true);
+    }
+    /** Server-side: handle sort change. */
+    onSortChange(active, direction) {
+        if (!this.footerConfig || !active)
+            return;
+        this.serverSort = { [active]: direction === 'asc' ? 1 : -1 };
+        this.serverPage = 1;
+        this.loadDocumentOptions(true);
+    }
+    clearSearch() {
+        this.searchFormControl.setValue('');
+    }
+    onRadioChange(event) {
+        const id = event?.value;
+        if (id == null)
+            return;
+        const row = this.#documentOptions.find((r) => this.getRowId(r) == id) ??
+            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);
+        }
+    }
+    /** Handle click on row: toggle selection (select or deselect). Ignores clicks on buttons/controls. */
+    onRowClick(row, event) {
+        const cfg = this.inputConfig();
+        if (!!cfg?.disabled || !!cfg?.readonly)
+            return;
+        const target = event.target;
+        if (target.closest('button, [mat-icon-button], .mat-mdc-radio-button'))
+            return;
+        this.selectRow(row);
+    }
+    // Row parameter mirrors `getRowId` / `isRowSelected` which use `Record<string, any>` to match
+    // the upstream `MatTableDataSource<Record<string, any>>` declaration.
+    selectRow(row) {
+        const id = this.getRowId(row);
+        const idStr = id != null ? String(id) : undefined;
+        if (this.isMultiSelect) {
+            const ids = [...this.getSelectedIds()];
+            const idx = ids.indexOf(idStr ?? '');
+            if (idx >= 0) {
+                ids.splice(idx, 1);
+            }
+            else if (idStr != null) {
+                ids.push(idStr);
+            }
+            this.value = ids.length ? ids : null;
+            this.onChange(this.value);
+            this.onTouched();
+            this.#cdr.markForCheck();
+            return;
+        }
+        const isDeselecting = this.isRowSelected(row);
+        this.selectedDocument = undefined;
+        this.value = isDeselecting ? null : (idStr ?? null);
+        this.onChange(this.value);
+        this.onTouched();
+        if (isDeselecting) {
+            this.serverPage = 1;
+            this.loadDocumentOptions(true);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DocumentPickerReactiveInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DocumentPickerReactiveInputComponent, isStandalone: true, selector: "lib-document-picker-reactive-input", inputs: { formBuilderFunctions: { classPropertyName: "formBuilderFunctions", publicName: "formBuilderFunctions", 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 } }, host: { properties: { "class.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: DocumentPickerReactiveInputComponent }], 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: "<mat-card class=\"doc-picker-card\">\r\n    <header class=\"doc-picker-header\">\r\n        @if (!inputConfig()?.disabled && !inputConfig()?.readonly && !selectedDocument && !dataLoadingError) {\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        }\r\n    </header>\r\n\r\n    @if (dataLoadingError) {\r\n    <div class=\"doc-picker-error\">\r\n        <mat-icon color=\"warn\">error</mat-icon>\r\n        <span class=\"doc-picker-error-text\">{{ dataLoadingError }}</span>\r\n        @if (!inputConfig()?.disabled && !inputConfig()?.readonly) {\r\n        <button mat-stroked-button color=\"warn\" (click)=\"refreshDocuments()\" class=\"doc-picker-retry\"\r\n            aria-label=\"Retry loading documents\">\r\n            <mat-icon>refresh</mat-icon>\r\n            Retry\r\n        </button>\r\n        }\r\n    </div>\r\n    } @else {\r\n    <div class=\"doc-picker-body\">\r\n        @if (!inputConfig()?.disabled && !inputConfig()?.readonly && !selectedDocument) {\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 ? 'Link transactions' : 'Link a transaction' }}</strong> \u2014 Search or sort to find {{ isMultiSelect ? 'them' : 'one' }}, then {{ isMultiSelect ? 'check the box' : 'select the radio' }} to select {{ isMultiSelect ? 'them' : 'it' }}.</span>\r\n        </div>\r\n        }\r\n        <div class=\"doc-picker-content-area\">\r\n            @if (_loadingCols || loadingData) {\r\n            <div class=\"doc-picker-loading doc-picker-loading-overlay\">\r\n                <mat-spinner [diameter]=\"40\" aria-label=\"Loading documents\"></mat-spinner>\r\n            </div>\r\n            }\r\n            @if (dataSource.filteredData.length === 0 && !loadingData && !_loadingCols) {\r\n            <div class=\"doc-picker-empty\">\r\n            <mat-icon>folder_open</mat-icon>\r\n            <span>{{ emptyMessage() }}</span>\r\n            <button mat-stroked-button color=\"warn\" (click)=\"refreshDocuments()\" class=\"doc-picker-retry\"\r\n            aria-label=\"Retry loading documents\">\r\n            <mat-icon>refresh</mat-icon>\r\n            Retry\r\n        </button>\r\n        </div>\r\n        }\r\n            @if (dataSource.filteredData.length > 0 && _cols.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\" matSort matSortActive=\"updatedAt\"\r\n                matSortDisableClear matSortDirection=\"desc\" role=\"grid\" aria-label=\"Transaction list\">\r\n                @for (col of _cols; track col.formControlName) {\r\n                <ng-container [matColumnDef]=\"col.formControlName\" [stickyEnd]=\"$last\">\r\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header\r\n                        [disabled]=\"col.formControlName === 'icons' || col.formControlName === 'actions'\"\r\n                        [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n                        [class.doc-picker-col-icons]=\"col.formControlName === 'icons'\"\r\n                        [class.doc-picker-col-actions]=\"col.formControlName === 'actions'\"\r\n                        [class.doc-picker-col-text]=\"col.formControlName !== 'icons' && col.formControlName !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n                        [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n                        @if (col.formControlName === 'actions') {\r\n                            <button mat-icon-button (click)=\"refreshDocuments()\" class=\"doc-picker-refresh\"\r\n                            matTooltip=\"Refresh list\" matTooltipPosition=\"below\" aria-label=\"Refresh document list\">\r\n                                <mat-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.formControlName === 'icons'\"\r\n                        [class.doc-picker-col-actions]=\"col.formControlName === 'actions'\"\r\n                        [class.doc-picker-col-text]=\"col.formControlName !== 'icons' && col.formControlName !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n                        [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n                        @if (col.formControlName === 'icons') {\r\n                        <mat-icon class=\"doc-picker-row-icon\">description</mat-icon>\r\n                        } @else if (col.formControlName === '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'] ?? 'document')\"\r\n                            matTooltipPosition=\"below\"\r\n                            [attr.aria-label]=\"isRowSelected(row) ? 'Clear selection' : 'Select ' + (row['reference'] ?? 'document')\">\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.formControlName] | formatData:col.type\"\r\n                            matTooltipPosition=\"above\">\r\n                            {{ row[col.formControlName] | 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'] ?? 'document')\"\r\n                    [attr.aria-selected]=\"isRowSelected(row)\"></tr>\r\n            </table>\r\n        </div>\r\n        } @else {\r\n        <mat-radio-group [value]=\"value\" (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\" matSort matSortActive=\"updatedAt\"\r\n                matSortDisableClear matSortDirection=\"desc\" role=\"grid\" aria-label=\"Transaction list\">\r\n                @for (col of _cols; track col.formControlName) {\r\n                <ng-container [matColumnDef]=\"col.formControlName\" [stickyEnd]=\"$last\">\r\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header\r\n                        [disabled]=\"col.formControlName === 'icons' || col.formControlName === 'actions'\"\r\n                        [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n                        [class.doc-picker-col-icons]=\"col.formControlName === 'icons'\"\r\n                        [class.doc-picker-col-actions]=\"col.formControlName === 'actions'\"\r\n                        [class.doc-picker-col-text]=\"col.formControlName !== 'icons' && col.formControlName !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n                        [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n                       \r\n\r\n                        @if (col.formControlName === 'actions') {\r\n                            <button mat-icon-button (click)=\"refreshDocuments()\" class=\"doc-picker-refresh\"\r\n                            matTooltip=\"Refresh list\" matTooltipPosition=\"below\" aria-label=\"Refresh document list\">\r\n                                <mat-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.formControlName === 'icons'\"\r\n                        [class.doc-picker-col-actions]=\"col.formControlName === 'actions'\"\r\n                        [class.doc-picker-col-text]=\"col.formControlName !== 'icons' && col.formControlName !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n                        [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n                        @if (col.formControlName === 'icons') {\r\n                        <mat-icon class=\"doc-picker-row-icon\">description</mat-icon>\r\n                        } @else if (col.formControlName === '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'] ?? 'document')\"\r\n                            matTooltipPosition=\"below\"\r\n                            [attr.aria-label]=\"isRowSelected(row) ? 'Clear selection' : 'Select ' + (row['reference'] ?? 'document')\">\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.formControlName] | formatData:col.type\"\r\n                            matTooltipPosition=\"above\">\r\n                            {{ row[col.formControlName] | 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'] ?? 'document')\"\r\n                    [attr.aria-selected]=\"isRowSelected(row)\"\r\n                    (click)=\"onRowClick(row, $event)\"></tr>\r\n            </table>\r\n        </div>\r\n        </mat-radio-group>\r\n        }\r\n        }\r\n        </div>\r\n    </div>\r\n    @if (!inputConfig()?.disabled && !inputConfig()?.readonly && !selectedDocument) {\r\n    <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n        [pageSize]=\"pageSizeForDisplay\"\r\n        [length]=\"footerConfig ? footerConfig.totalItems : dataSource.filteredData.length\"\r\n        [pageIndex]=\"pageIndexForDisplay\"\r\n        (page)=\"onPageChange($event)\"\r\n        showFirstLastButtons\r\n        aria-label=\"Transaction list pagination\" class=\"doc-picker-paginator\"></mat-paginator>\r\n    }\r\n    }\r\n</mat-card>\r\n\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-header-icon{width:2.25rem;height:2.25rem;min-width:2.25rem;border-radius:var(--doc-picker-radius-sm);background:color-mix(in srgb,var(--doc-picker-primary) 12%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0}.doc-picker-header-icon mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem;color:var(--doc-picker-primary)}.doc-picker-header-content{flex:1;min-width:0}.doc-picker-title{font-size:.9375rem;font-weight:600;letter-spacing:-.01em;color:var(--doc-picker-on-surface);margin:0;line-height:1.3}.doc-picker-subtitle{font-size:.8125rem;color:var(--doc-picker-on-surface-variant);line-height:1.35;margin:.25rem 0 0}.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-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-refresh{flex-shrink:0;min-width:fit-content;min-height:fit-content;transition:transform .15s}.doc-picker-refresh mat-icon{height:1.5rem;width:1.5rem;font-size:1.5rem;color:var(--doc-picker-primary);margin:0;padding:0;vertical-align:middle;display:inline-block;line-height:1}.doc-picker-refresh:hover{transform:rotate(90deg)}.doc-picker-loading{display:flex;justify-content:center;align-items:center;padding:1.5rem;min-height:6rem}.doc-picker-content-area{position:relative;min-height:6rem}.doc-picker-loading-overlay{position:absolute;inset:0;z-index:2;background:color-mix(in srgb,var(--doc-picker-surface) 95%,transparent);border-radius:var(--doc-picker-radius-sm)}.doc-picker-error{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.75rem 1rem;margin:.75rem 1rem;background:color-mix(in srgb,var(--mat-sys-error, #b3261e) 8%,transparent);border-radius:var(--doc-picker-radius-sm)}.doc-picker-error mat-icon{flex-shrink:0;font-size:1.25rem;width:1.25rem;height:1.25rem}.doc-picker-error-text{flex:1;font-size:.8125rem;color:var(--doc-picker-on-surface)}.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-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))}.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-col-icons,.doc-picker-col-actions{text-align:center}.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-row-icon{font-size:1.125rem!important;width:1.125rem!important;height:1.125rem!important;color:var(--doc-picker-primary)}.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: MatDividerModule }, { 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: DocumentPickerReactiveInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-document-picker-reactive-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ReactiveFormsModule,
+                        MatCardModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        MatTableModule,
+                        MatSortModule,
+                        MatPaginatorModule,
+                        MatDividerModule,
+                        MatCheckboxModule,
+                        MatRadioModule,
+                        FormatDataPipe,
+                    ], host: {
+                        '[class.floating]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                    }, providers: [{ provide: MatFormFieldControl, useExisting: DocumentPickerReactiveInputComponent }], template: "<mat-card class=\"doc-picker-card\">\r\n    <header class=\"doc-picker-header\">\r\n        @if (!inputConfig()?.disabled && !inputConfig()?.readonly && !selectedDocument && !dataLoadingError) {\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        }\r\n    </header>\r\n\r\n    @if (dataLoadingError) {\r\n    <div class=\"doc-picker-error\">\r\n        <mat-icon color=\"warn\">error</mat-icon>\r\n        <span class=\"doc-picker-error-text\">{{ dataLoadingError }}</span>\r\n        @if (!inputConfig()?.disabled && !inputConfig()?.readonly) {\r\n        <button mat-stroked-button color=\"warn\" (click)=\"refreshDocuments()\" class=\"doc-picker-retry\"\r\n            aria-label=\"Retry loading documents\">\r\n            <mat-icon>refresh</mat-icon>\r\n            Retry\r\n        </button>\r\n        }\r\n    </div>\r\n    } @else {\r\n    <div class=\"doc-picker-body\">\r\n        @if (!inputConfig()?.disabled && !inputConfig()?.readonly && !selectedDocument) {\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 ? 'Link transactions' : 'Link a transaction' }}</strong> \u2014 Search or sort to find {{ isMultiSelect ? 'them' : 'one' }}, then {{ isMultiSelect ? 'check the box' : 'select the radio' }} to select {{ isMultiSelect ? 'them' : 'it' }}.</span>\r\n        </div>\r\n        }\r\n        <div class=\"doc-picker-content-area\">\r\n            @if (_loadingCols || loadingData) {\r\n            <div class=\"doc-picker-loading doc-picker-loading-overlay\">\r\n                <mat-spinner [diameter]=\"40\" aria-label=\"Loading documents\"></mat-spinner>\r\n            </div>\r\n            }\r\n            @if (dataSource.filteredData.length === 0 && !loadingData && !_loadingCols) {\r\n            <div class=\"doc-picker-empty\">\r\n            <mat-icon>folder_open</mat-icon>\r\n            <span>{{ emptyMessage() }}</span>\r\n            <button mat-stroked-button color=\"warn\" (click)=\"refreshDocuments()\" class=\"doc-picker-retry\"\r\n            aria-label=\"Retry loading documents\">\r\n            <mat-icon>refresh</mat-icon>\r\n            Retry\r\n        </button>\r\n        </div>\r\n        }\r\n            @if (dataSource.filteredData.length > 0 && _cols.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\" matSort matSortActive=\"updatedAt\"\r\n                matSortDisableClear matSortDirection=\"desc\" role=\"grid\" aria-label=\"Transaction list\">\r\n                @for (col of _cols; track col.formControlName) {\r\n                <ng-container [matColumnDef]=\"col.formControlName\" [stickyEnd]=\"$last\">\r\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header\r\n                        [disabled]=\"col.formControlName === 'icons' || col.formControlName === 'actions'\"\r\n                        [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n                        [class.doc-picker-col-icons]=\"col.formControlName === 'icons'\"\r\n                        [class.doc-picker-col-actions]=\"col.formControlName === 'actions'\"\r\n                        [class.doc-picker-col-text]=\"col.formControlName !== 'icons' && col.formControlName !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n                        [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n                        @if (col.formControlName === 'actions') {\r\n                            <button mat-icon-button (click)=\"refreshDocuments()\" class=\"doc-picker-refresh\"\r\n                            matTooltip=\"Refresh list\" matTooltipPosition=\"below\" aria-label=\"Refresh document list\">\r\n                                <mat-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.formControlName === 'icons'\"\r\n                        [class.doc-picker-col-actions]=\"col.formControlName === 'actions'\"\r\n                        [class.doc-picker-col-text]=\"col.formControlName !== 'icons' && col.formControlName !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n                        [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n                        @if (col.formControlName === 'icons') {\r\n                        <mat-icon class=\"doc-picker-row-icon\">description</mat-icon>\r\n                        } @else if (col.formControlName === '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'] ?? 'document')\"\r\n                            matTooltipPosition=\"below\"\r\n                            [attr.aria-label]=\"isRowSelected(row) ? 'Clear selection' : 'Select ' + (row['reference'] ?? 'document')\">\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.formControlName] | formatData:col.type\"\r\n                            matTooltipPosition=\"above\">\r\n                            {{ row[col.formControlName] | 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'] ?? 'document')\"\r\n                    [attr.aria-selected]=\"isRowSelected(row)\"></tr>\r\n            </table>\r\n        </div>\r\n        } @else {\r\n        <mat-radio-group [value]=\"value\" (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\" matSort matSortActive=\"updatedAt\"\r\n                matSortDisableClear matSortDirection=\"desc\" role=\"grid\" aria-label=\"Transaction list\">\r\n                @for (col of _cols; track col.formControlName) {\r\n                <ng-container [matColumnDef]=\"col.formControlName\" [stickyEnd]=\"$last\">\r\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header\r\n                        [disabled]=\"col.formControlName === 'icons' || col.formControlName === 'actions'\"\r\n                        [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n                        [class.doc-picker-col-icons]=\"col.formControlName === 'icons'\"\r\n                        [class.doc-picker-col-actions]=\"col.formControlName === 'actions'\"\r\n                        [class.doc-picker-col-text]=\"col.formControlName !== 'icons' && col.formControlName !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n                        [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n                       \r\n\r\n                        @if (col.formControlName === 'actions') {\r\n                            <button mat-icon-button (click)=\"refreshDocuments()\" class=\"doc-picker-refresh\"\r\n                            matTooltip=\"Refresh list\" matTooltipPosition=\"below\" aria-label=\"Refresh document list\">\r\n                                <mat-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.formControlName === 'icons'\"\r\n                        [class.doc-picker-col-actions]=\"col.formControlName === 'actions'\"\r\n                        [class.doc-picker-col-text]=\"col.formControlName !== 'icons' && col.formControlName !== 'actions' && col.type !== 'currency' && col.type !== 'number'\"\r\n                        [class.doc-picker-col-numeric]=\"col.type === 'currency' || col.type === 'number'\">\r\n                        @if (col.formControlName === 'icons') {\r\n                        <mat-icon class=\"doc-picker-row-icon\">description</mat-icon>\r\n                        } @else if (col.formControlName === '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'] ?? 'document')\"\r\n                            matTooltipPosition=\"below\"\r\n                            [attr.aria-label]=\"isRowSelected(row) ? 'Clear selection' : 'Select ' + (row['reference'] ?? 'document')\">\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.formControlName] | formatData:col.type\"\r\n                            matTooltipPosition=\"above\">\r\n                            {{ row[col.formControlName] | 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'] ?? 'document')\"\r\n                    [attr.aria-selected]=\"isRowSelected(row)\"\r\n                    (click)=\"onRowClick(row, $event)\"></tr>\r\n            </table>\r\n        </div>\r\n        </mat-radio-group>\r\n        }\r\n        }\r\n        </div>\r\n    </div>\r\n    @if (!inputConfig()?.disabled && !inputConfig()?.readonly && !selectedDocument) {\r\n    <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n        [pageSize]=\"pageSizeForDisplay\"\r\n        [length]=\"footerConfig ? footerConfig.totalItems : dataSource.filteredData.length\"\r\n        [pageIndex]=\"pageIndexForDisplay\"\r\n        (page)=\"onPageChange($event)\"\r\n        showFirstLastButtons\r\n        aria-label=\"Transaction list pagination\" class=\"doc-picker-paginator\"></mat-paginator>\r\n    }\r\n    }\r\n</mat-card>\r\n\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-header-icon{width:2.25rem;height:2.25rem;min-width:2.25rem;border-radius:var(--doc-picker-radius-sm);background:color-mix(in srgb,var(--doc-picker-primary) 12%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0}.doc-picker-header-icon mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem;color:var(--doc-picker-primary)}.doc-picker-header-content{flex:1;min-width:0}.doc-picker-title{font-size:.9375rem;font-weight:600;letter-spacing:-.01em;color:var(--doc-picker-on-surface);margin:0;line-height:1.3}.doc-picker-subtitle{font-size:.8125rem;color:var(--doc-picker-on-surface-variant);line-height:1.35;margin:.25rem 0 0}.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-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-refresh{flex-shrink:0;min-width:fit-content;min-height:fit-content;transition:transform .15s}.doc-picker-refresh mat-icon{height:1.5rem;width:1.5rem;font-size:1.5rem;color:var(--doc-picker-primary);margin:0;padding:0;vertical-align:middle;display:inline-block;line-height:1}.doc-picker-refresh:hover{transform:rotate(90deg)}.doc-picker-loading{display:flex;justify-content:center;align-items:center;padding:1.5rem;min-height:6rem}.doc-picker-content-area{position:relative;min-height:6rem}.doc-picker-loading-overlay{position:absolute;inset:0;z-index:2;background:color-mix(in srgb,var(--doc-picker-surface) 95%,transparent);border-radius:var(--doc-picker-radius-sm)}.doc-picker-error{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.75rem 1rem;margin:.75rem 1rem;background:color-mix(in srgb,var(--mat-sys-error, #b3261e) 8%,transparent);border-radius:var(--doc-picker-radius-sm)}.doc-picker-error mat-icon{flex-shrink:0;font-size:1.25rem;width:1.25rem;height:1.25rem}.doc-picker-error-text{flex:1;font-size:.8125rem;color:var(--doc-picker-on-surface)}.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-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))}.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-col-icons,.doc-picker-col-actions{text-align:center}.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-row-icon{font-size:1.125rem!important;width:1.125rem!important;height:1.125rem!important;color:var(--doc-picker-primary)}.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 }] }], 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 }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }] } });
+
+/** Wraps a reactive document-picker control inside a `mat-form-field`. */
+class DocumentPickerComponent {
+    constructor() {
+        this.inputConfig = input.required(...(ngDevMode ? [{ debugName: "inputConfig" }] : /* istanbul ignore next */ []));
+        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        this.editorMode = input(false, ...(ngDevMode ? [{ debugName: "editorMode" }] : /* istanbul ignore next */ []));
+        this.formBuilderFunctions = input(undefined, ...(ngDevMode ? [{ debugName: "formBuilderFunctions" }] : /* istanbul ignore next */ []));
+        this.reload = output();
+        this.errorMessage = computed(() => getInputErrorMessage(this.inputConfig(), this.formGroup()), ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DocumentPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DocumentPickerComponent, isStandalone: true, selector: "lib-document-picker", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, editorMode: { classPropertyName: "editorMode", publicName: "editorMode", isSignal: true, isRequired: false, transformFunction: null }, formBuilderFunctions: { classPropertyName: "formBuilderFunctions", publicName: "formBuilderFunctions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reload: "reload" }, ngImport: i0, template: "<form [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-document-picker-reactive-input\r\n        [disabled]=\"!!inputConfig.disabled\"\r\n        [inputConfig]=\"inputConfig\"\r\n        [formBuilderFunctions]=\"formBuilderFunctions()\"\r\n        [required]=\"inputConfig.required\"\r\n        [formControlName]=\"inputConfig.id\"\r\n      ></lib-document-picker-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      @if (!!errorMessage()) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\r\n      }\r\n\r\n      @if (inputConfig.prefixIcon) {\r\n        <mat-icon matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n      }\r\n\r\n      @if (inputConfig.canReload?.canReload) {\r\n        <button\r\n          mat-icon-button\r\n          style=\"margin-right: 4px;\"\r\n          matTooltip=\"Click to refresh this field.\"\r\n          class=\"input-sync-button\"\r\n          (click)=\"inputConfig.canReload.emit()\"\r\n          matSuffix\r\n        >\r\n          <mat-icon style=\"color: var(--mat-sys-primary)\">sync</mat-icon>\r\n        </button>\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</form>\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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "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: "component", type: DocumentPickerReactiveInputComponent, selector: "lib-document-picker-reactive-input", inputs: ["formBuilderFunctions", "searchPlaceholder", "emptyMessage", "inputConfig"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DocumentPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-document-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        DocumentPickerReactiveInputComponent,
+                        TFormInputStatusComponent,
+                    ], template: "<form [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-document-picker-reactive-input\r\n        [disabled]=\"!!inputConfig.disabled\"\r\n        [inputConfig]=\"inputConfig\"\r\n        [formBuilderFunctions]=\"formBuilderFunctions()\"\r\n        [required]=\"inputConfig.required\"\r\n        [formControlName]=\"inputConfig.id\"\r\n      ></lib-document-picker-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      @if (!!errorMessage()) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\r\n      }\r\n\r\n      @if (inputConfig.prefixIcon) {\r\n        <mat-icon matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n      }\r\n\r\n      @if (inputConfig.canReload?.canReload) {\r\n        <button\r\n          mat-icon-button\r\n          style=\"margin-right: 4px;\"\r\n          matTooltip=\"Click to refresh this field.\"\r\n          class=\"input-sync-button\"\r\n          (click)=\"inputConfig.canReload.emit()\"\r\n          matSuffix\r\n        >\r\n          <mat-icon style=\"color: var(--mat-sys-primary)\">sync</mat-icon>\r\n        </button>\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</form>\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 }] }], editorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorMode", required: false }] }], formBuilderFunctions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formBuilderFunctions", required: false }] }], reload: [{ type: i0.Output, args: ["reload"] }] } });
+
+export { DocumentPickerComponent };
+//# sourceMappingURL=ngx-t-forms-document-picker.component-BThdRFec.mjs.map