ngx-t-forms 2.0.29 → 2.0.31

package/fesm2022/ngx-t-forms-rest-api-call-setup.component-C_aFtdvW.mjs

@@ -0,0 +1,398 @@
+import * as i0 from '@angular/core';
+import { input, output, inject, DestroyRef, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { JsDataTypes, DataSources } from 'ngx-t-forms-types';
+import { h as TreeComponent, i as convertPostmanFolderItemsToTree, _ as _isEqual, E as EmptyStateComponent, j as ErrorListComponent } from './ngx-t-forms-ngx-t-forms-u_kigDid.mjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { take, tap, catchError, throwError } from 'rxjs';
+import * as i1 from '@angular/material/tree';
+import { MatTreeModule } from '@angular/material/tree';
+import * as i3 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 i3$1 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i5 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { S as SearchFieldComponent } from './ngx-t-forms-search-field.component-B2ZO7lqO.mjs';
+
+/** True when an item's own name or description contains the (already-lowercased) search text. */
+function itemMatches(item, searchText) {
+    return ((item.name?.toLowerCase().includes(searchText) ?? false) ||
+        (item.description?.toLowerCase().includes(searchText) ?? false));
+}
+/**
+ * Recursively prunes a folder tree to the items relevant to `searchText`.
+ *
+ * An item is kept when it matches directly (its whole subtree is then
+ * preserved) OR when one of its descendants matches — in which case the
+ * ancestor folder is preserved but its children are pruned to only the
+ * matching branches. This fixes the legacy defect where ancestor folders of a
+ * deep match were dropped (or whole sibling subtrees were retained).
+ */
+function pruneItems(items, searchText) {
+    if (!items) {
+        return [];
+    }
+    return items.reduce((kept, item) => {
+        if (itemMatches(item, searchText)) {
+            // Direct hit: keep the item and its full subtree intact.
+            kept.push(item);
+            return kept;
+        }
+        const matchingChildren = pruneItems(item.item, searchText);
+        if (matchingChildren.length > 0) {
+            // Ancestor of a match: keep the folder but only the matching branches.
+            kept.push({ ...item, item: matchingChildren });
+        }
+        return kept;
+    }, []);
+}
+/**
+ * Filters a fetched Postman collection by a free-text search key, preserving
+ * the ancestor folders of every match. An empty/whitespace key returns the
+ * full set of top-level items unchanged.
+ */
+function filterCollectionItems(collections, searchKey) {
+    const items = collections.collection.item;
+    const searchText = searchKey.trim().toLowerCase();
+    if (!searchText) {
+        return items;
+    }
+    return pruneItems(items, searchText);
+}
+
+/**
+ * Maps an HTTP method to its design-token CSS colour value.
+ *
+ * Returns a `var(--lib-forms-method-*)` reference (dark-mode safe, no hex /
+ * named colours) so the tree can colour-code endpoints. Unknown methods fall
+ * back to `currentColor`. Matching is case-insensitive.
+ */
+function methodColor(method) {
+    switch (method.toUpperCase()) {
+        case 'GET':
+            return 'var(--lib-forms-method-get)';
+        case 'POST':
+            return 'var(--lib-forms-method-post)';
+        case 'PUT':
+            return 'var(--lib-forms-method-put)';
+        case 'PATCH':
+            return 'var(--lib-forms-method-patch)';
+        case 'DELETE':
+            return 'var(--lib-forms-method-delete)';
+        default:
+            return 'currentColor';
+    }
+}
+
+/**
+ * Internal Postman-collection picker used by `rest-api-call-setup`.
+ *
+ * Fetches a Postman collection over HTTP and renders it as a searchable tree of
+ * endpoints, emitting the selected folder item to the parent. Embedded
+ * component — owns only its tree content; the parent renders any field
+ * label / hint / errors.
+ */
+class PostmanCollectionsComponent {
+    constructor() {
+        /** Postman API config (collection URL + key). When invalid the component shows an error. */
+        this.postmanCollectionConfig = input(undefined, ...(ngDevMode ? [{ debugName: "postmanCollectionConfig" }] : /* istanbul ignore next */ []));
+        /** Endpoint IDs currently in a loading state (rendered with a spinner in the tree). */
+        this.loadingEndPoints = input([], ...(ngDevMode ? [{ debugName: "loadingEndPoints" }] : /* istanbul ignore next */ []));
+        /** Emits when the user picks an endpoint node from the tree. */
+        this.nodeSelectionChanged = output();
+        this.#httpClient = inject(HttpClient);
+        this.#destroyRef = inject(DestroyRef);
+        /** Imperative mat-tree backing store reused from the access-rules tree. */
+        this.treeComponent = new TreeComponent();
+        /** Raw fetched collection; `undefined` until the request resolves. */
+        this.#collection = signal(undefined, ...(ngDevMode ? [{ debugName: "#collection" }] : /* istanbul ignore next */ []));
+        /** Current search text, two-way bound to the search field. */
+        this.searchKey = signal('', ...(ngDevMode ? [{ debugName: "searchKey" }] : /* istanbul ignore next */ []));
+        /** Request-in-flight flag. */
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /** Last error (invalid config or HTTP failure); `undefined` when healthy. */
+        this.error = signal(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        /** Folder items after applying the current search, ancestor-folders preserved. */
+        this.filteredItems = computed(() => {
+            const collection = this.#collection();
+            if (!collection) {
+                return [];
+            }
+            return filterCollectionItems(collection, this.searchKey());
+        }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+        /** Tree nodes derived from {@link filteredItems}. */
+        this.#treeData = computed(() => convertPostmanFolderItemsToTree(this.filteredItems()), ...(ngDevMode ? [{ debugName: "#treeData" }] : /* istanbul ignore next */ []));
+        /** True once a collection is loaded but the current search yields nothing. */
+        this.isEmpty = computed(() => Boolean(this.#collection()) && this.#treeData().length === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+        /** Cache for {@link getNodeLines} so identical levels reuse one array. */
+        this.#nodeLinesCache = new Map();
+        /** Push derived tree data into the imperative mat-tree data source. */
+        this.syncTree = effect(() => {
+            this.treeComponent.assignDataSourceData(this.#treeData());
+        }, ...(ngDevMode ? [{ debugName: "syncTree" }] : /* istanbul ignore next */ []));
+        this.#hasLoadedOnce = false;
+        /** Fetch (or re-fetch) the collection only when the config input's content actually changes. */
+        this.loadOnConfigChange = effect(() => {
+            const config = this.postmanCollectionConfig();
+            if (this.#hasLoadedOnce && _isEqual(this.#loadedConfig, config)) {
+                return;
+            }
+            this.#hasLoadedOnce = true;
+            this.#loadedConfig = config;
+            this.#loadCollection(config);
+        }, ...(ngDevMode ? [{ debugName: "loadOnConfigChange" }] : /* istanbul ignore next */ []));
+        this.hasChild = (_, node) => this.treeComponent.hasChild(_, node);
+    }
+    #httpClient;
+    #destroyRef;
+    /** Raw fetched collection; `undefined` until the request resolves. */
+    #collection;
+    /** Tree nodes derived from {@link filteredItems}. */
+    #treeData;
+    /** Cache for {@link getNodeLines} so identical levels reuse one array. */
+    #nodeLinesCache;
+    /** Last config the effect acted on; guards against re-fetching when an unstable parent binding hands us a new-but-equal reference. */
+    #loadedConfig;
+    #hasLoadedOnce;
+    #isValidConfig(config) {
+        return Boolean(config?.collectionUrl) && Boolean(config?.collectionKey);
+    }
+    #loadCollection(config) {
+        if (!this.#isValidConfig(config)) {
+            this.#collection.set(undefined);
+            this.loading.set(false);
+            this.error.set(new HttpErrorResponse({ error: 'Invalid Postman Collection Config' }));
+            return;
+        }
+        const requestOptions = {
+            params: { apikey: config.collectionKey, clearSystemHeaders: true },
+            headers: { 'Content-Type': 'application/json' },
+        };
+        this.loading.set(true);
+        this.#httpClient
+            .get(config.collectionUrl, requestOptions)
+            .pipe(take(1), tap(data => {
+            this.#collection.set(data);
+            this.error.set(undefined);
+            this.loading.set(false);
+        }), catchError((err) => {
+            this.loading.set(false);
+            this.error.set(err);
+            return throwError(() => err);
+        }), takeUntilDestroyed(this.#destroyRef))
+            .subscribe();
+    }
+    selectNode(node) {
+        this.nodeSelectionChanged.emit(node);
+    }
+    methodColor(method) {
+        return methodColor(method);
+    }
+    isEndpointLoading(id) {
+        return this.loadingEndPoints().includes(id);
+    }
+    /** Memoised 1..level vertical guide-line indices for tree indentation. */
+    getNodeLines(level) {
+        const cached = this.#nodeLinesCache.get(level);
+        if (cached) {
+            return cached;
+        }
+        const lines = Array.from({ length: level }, (_, i) => i + 1);
+        this.#nodeLinesCache.set(level, lines);
+        return lines;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: PostmanCollectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: PostmanCollectionsComponent, isStandalone: true, selector: "lib-postman-collections", inputs: { postmanCollectionConfig: { classPropertyName: "postmanCollectionConfig", publicName: "postmanCollectionConfig", isSignal: true, isRequired: false, transformFunction: null }, loadingEndPoints: { classPropertyName: "loadingEndPoints", publicName: "loadingEndPoints", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeSelectionChanged: "nodeSelectionChanged" }, host: { classAttribute: "lib-postman-collections" }, ngImport: i0, template: "@if (loading()) {\n  <div class=\"loading-container\">\n    <mat-spinner diameter=\"36\"></mat-spinner>\n  </div>\n} @else {\n  <lib-search-field\n    class=\"search\"\n    placeholder=\"Search api\"\n    [(value)]=\"searchKey\" />\n\n  @if (error(); as err) {\n    <lib-empty-state icon=\"error_outline\" [message]=\"err.message\" />\n  } @else if (isEmpty()) {\n    <lib-empty-state\n      icon=\"search_off\"\n      [message]=\"searchKey() ? 'No endpoints match your search' : 'No endpoints in this collection'\" />\n  } @else {\n    <mat-tree\n      [dataSource]=\"treeComponent.dataSource\"\n      [treeControl]=\"treeComponent.treeControl\">\n      <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\n        @if (isEndpointLoading(node.value.id)) {\n          <mat-spinner diameter=\"22\" class=\"loading-spinner\"></mat-spinner>\n        }\n        @for (line of getNodeLines(node.level); track line) {\n          <div class=\"line\" [style.left.px]=\"line * 40 + 8\"></div>\n        }\n        @if (node.value?.request; as request) {\n          <button\n            mat-button\n            class=\"item\"\n            [disabled]=\"(!request.body?.raw && request.method === 'POST') || !request.url?.raw\"\n            [matTooltip]=\"request.url?.raw || 'Invalid Postman config, missing Endpoint URL'\"\n            (click)=\"selectNode(node.value)\">\n            <span class=\"node-key method\" [style.color]=\"methodColor(request.method)\">\n              {{ request.method }}\n            </span>\n            <span>{{ node.key }}</span>\n          </button>\n        }\n      </mat-tree-node>\n\n      <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\n        <button\n          mat-icon-button\n          matTreeNodeToggle\n          class=\"toggle\"\n          [attr.aria-label]=\"'Toggle ' + node.key\">\n          <mat-icon>\n            {{ treeComponent.treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n          </mat-icon>\n        </button>\n        <mat-icon class=\"folder-icon\">\n          {{ treeComponent.treeControl.isExpanded(node) ? 'folder_open' : 'folder' }}\n        </mat-icon>\n        <span class=\"folder-label\">{{ node.key }}</span>\n      </mat-tree-node>\n    </mat-tree>\n  }\n}\n", styles: [":host{display:block}.search{margin-bottom:1rem}mat-tree{background:none}:host mat-tree-node{min-height:28px;height:32px}.toggle{padding:0}.folder-icon{color:var(--lib-forms-on-surface-variant)}.folder-label{margin-left:.5rem;font-weight:500}.item{display:flex;width:100%;justify-content:left;text-align:left;font-size:small;font-weight:400;white-space:nowrap;overflow:hidden}.method{display:inline-block;width:38px;text-align:right}.line{position:absolute;height:32px;left:48px;width:1px;background:color-mix(in srgb,var(--lib-forms-outline) 40%,transparent)}.loading-container{display:flex;align-items:center;justify-content:center;height:100%;padding:2rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatProgressSpinnerModule }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: SearchFieldComponent, selector: "lib-search-field", inputs: ["value", "placeholder", "resultCount"], outputs: ["valueChange"] }, { kind: "component", type: EmptyStateComponent, selector: "lib-empty-state", inputs: ["icon", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: PostmanCollectionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-postman-collections', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { 'class': 'lib-postman-collections' }, imports: [
+                        MatTreeModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatProgressSpinnerModule,
+                        MatTooltipModule,
+                        SearchFieldComponent,
+                        EmptyStateComponent,
+                    ], template: "@if (loading()) {\n  <div class=\"loading-container\">\n    <mat-spinner diameter=\"36\"></mat-spinner>\n  </div>\n} @else {\n  <lib-search-field\n    class=\"search\"\n    placeholder=\"Search api\"\n    [(value)]=\"searchKey\" />\n\n  @if (error(); as err) {\n    <lib-empty-state icon=\"error_outline\" [message]=\"err.message\" />\n  } @else if (isEmpty()) {\n    <lib-empty-state\n      icon=\"search_off\"\n      [message]=\"searchKey() ? 'No endpoints match your search' : 'No endpoints in this collection'\" />\n  } @else {\n    <mat-tree\n      [dataSource]=\"treeComponent.dataSource\"\n      [treeControl]=\"treeComponent.treeControl\">\n      <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\n        @if (isEndpointLoading(node.value.id)) {\n          <mat-spinner diameter=\"22\" class=\"loading-spinner\"></mat-spinner>\n        }\n        @for (line of getNodeLines(node.level); track line) {\n          <div class=\"line\" [style.left.px]=\"line * 40 + 8\"></div>\n        }\n        @if (node.value?.request; as request) {\n          <button\n            mat-button\n            class=\"item\"\n            [disabled]=\"(!request.body?.raw && request.method === 'POST') || !request.url?.raw\"\n            [matTooltip]=\"request.url?.raw || 'Invalid Postman config, missing Endpoint URL'\"\n            (click)=\"selectNode(node.value)\">\n            <span class=\"node-key method\" [style.color]=\"methodColor(request.method)\">\n              {{ request.method }}\n            </span>\n            <span>{{ node.key }}</span>\n          </button>\n        }\n      </mat-tree-node>\n\n      <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\n        <button\n          mat-icon-button\n          matTreeNodeToggle\n          class=\"toggle\"\n          [attr.aria-label]=\"'Toggle ' + node.key\">\n          <mat-icon>\n            {{ treeComponent.treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n          </mat-icon>\n        </button>\n        <mat-icon class=\"folder-icon\">\n          {{ treeComponent.treeControl.isExpanded(node) ? 'folder_open' : 'folder' }}\n        </mat-icon>\n        <span class=\"folder-label\">{{ node.key }}</span>\n      </mat-tree-node>\n    </mat-tree>\n  }\n}\n", styles: [":host{display:block}.search{margin-bottom:1rem}mat-tree{background:none}:host mat-tree-node{min-height:28px;height:32px}.toggle{padding:0}.folder-icon{color:var(--lib-forms-on-surface-variant)}.folder-label{margin-left:.5rem;font-weight:500}.item{display:flex;width:100%;justify-content:left;text-align:left;font-size:small;font-weight:400;white-space:nowrap;overflow:hidden}.method{display:inline-block;width:38px;text-align:right}.line{position:absolute;height:32px;left:48px;width:1px;background:color-mix(in srgb,var(--lib-forms-outline) 40%,transparent)}.loading-container{display:flex;align-items:center;justify-content:center;height:100%;padding:2rem}\n"] }]
+        }], propDecorators: { postmanCollectionConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "postmanCollectionConfig", required: false }] }], loadingEndPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingEndPoints", required: false }] }], nodeSelectionChanged: [{ type: i0.Output, args: ["nodeSelectionChanged"] }] } });
+
+let nextId = 0;
+/** CSS-variable colour per HTTP method (dark-mode-safe; never a hex literal). */
+const METHOD_COLOR = {
+    GET: 'var(--lib-forms-method-get)',
+    POST: 'var(--lib-forms-method-post)',
+    PUT: 'var(--lib-forms-method-put)',
+    DELETE: 'var(--lib-forms-method-delete)',
+};
+/** Maps a JS `typeof` string to the shared {@link JsDataTypes} enum member. */
+function toJsDataType(value) {
+    switch (typeof value) {
+        case 'string':
+            return JsDataTypes.String;
+        case 'number':
+            return JsDataTypes.Number;
+        case 'bigint':
+            return JsDataTypes.BigInt;
+        case 'boolean':
+            return JsDataTypes.Boolean;
+        case 'symbol':
+            return JsDataTypes.Symbol;
+        case 'function':
+            return JsDataTypes.Function;
+        case 'object':
+            return JsDataTypes.Object;
+        default:
+            return JsDataTypes.Undefined;
+    }
+}
+/**
+ * Lets the user pick an API endpoint from a Postman collection and exposes the
+ * resulting {@link APIDataFetchingConfigurationInterface}. Renders one of three
+ * states — no collection configured, the endpoint picker, or the selected
+ * endpoint card — and embeds {@link PostmanCollectionsComponent} for the tree.
+ *
+ * Internal editor consumed by `t-dynamic-data-edit` and `data-source-picker`;
+ * the parent owns the field label, hint and validation chrome.
+ *
+ * @example
+ *   <lib-rest-api-call-setup
+ *     [postmanCollectionConfig]="config()"
+ *     [value]="value()"
+ *     [disabled]="disabled()"
+ *     (valueChanged)="onApiConfig($event)" />
+ */
+class RestApiCallSetupComponent {
+    constructor() {
+        this.#fallbackId = `lib-rest-api-call-setup-${nextId++}`;
+        /** Optional consumer-provided host id. */
+        this.id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** Postman collection that backs the picker. */
+        this.postmanCollectionConfig = input(undefined, ...(ngDevMode ? [{ debugName: "postmanCollectionConfig" }] : /* istanbul ignore next */ []));
+        /**
+         * Optional HTTP GET function for fetching sample responses. Retained on the
+         * contract for parity; this editor does not invoke it (selection is resolved
+         * from the Postman collection the parent already loads).
+         */
+        this.httpGetDataFunction = input(undefined, ...(ngDevMode ? [{ debugName: "httpGetDataFunction" }] : /* istanbul ignore next */ []));
+        /** Disables the picker and shows a lock affordance. */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Current configuration value. */
+        this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Validation errors surfaced from the parent editor. */
+        this.errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+        /** Emits whenever the user selects a new endpoint or clears the value. */
+        this.valueChanged = output();
+        /** Endpoint IDs currently loading sample data (forwarded to the picker). */
+        this.loadingEndPoints = signal([], ...(ngDevMode ? [{ debugName: "loadingEndPoints" }] : /* istanbul ignore next */ []));
+        /** Local snapshot of the value, bridged from the `value` input. */
+        this.#localValue = signal(undefined, ...(ngDevMode ? [{ debugName: "#localValue" }] : /* istanbul ignore next */ []));
+        /** Read-only view of the active configuration for the template. */
+        this.currentValue = this.#localValue.asReadonly();
+        /** Host id: consumer-provided or a stable per-instance fallback. */
+        this.hostId = computed(() => this.id() ?? this.#fallbackId, ...(ngDevMode ? [{ debugName: "hostId" }] : /* istanbul ignore next */ []));
+        /** True once the snapshot carries a usable endpoint + method. */
+        this.hasValidValue = computed(() => {
+            const v = this.#localValue();
+            return Boolean(v?.httpEndPoint) && Boolean(v?.httpMethod);
+        }, ...(ngDevMode ? [{ debugName: "hasValidValue" }] : /* istanbul ignore next */ []));
+        /** Discrete UI mode driving the template's `@switch`. */
+        this.mode = computed(() => {
+            if (!this.postmanCollectionConfig())
+                return 'no-collection';
+            return this.hasValidValue() ? 'selected' : 'picker';
+        }, ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** Token-based colour for the selected endpoint's HTTP method badge. */
+        this.methodColor = computed(() => {
+            const method = this.#localValue()?.httpMethod;
+            return method && method in METHOD_COLOR ? METHOD_COLOR[method] : 'currentColor';
+        }, ...(ngDevMode ? [{ debugName: "methodColor" }] : /* istanbul ignore next */ []));
+        /**
+         * Bridge the `value` input into the local mutable snapshot, de-duping with a
+         * deep structural compare (replaces the legacy `JSON.stringify` equality so
+         * key order and `undefined` no longer cause spurious resets).
+         */
+        this.valueBridge = effect(() => {
+            const next = this.value();
+            if (!_isEqual(next, this.#localValue())) {
+                this.#localValue.set(next);
+            }
+        }, ...(ngDevMode ? [{ debugName: "valueBridge" }] : /* istanbul ignore next */ []));
+    }
+    #fallbackId;
+    /** Local snapshot of the value, bridged from the `value` input. */
+    #localValue;
+    /** Maps the selected tree node into the API config and emits it. */
+    nodeSelectionChanged(node) {
+        const { id, name, request, response } = node;
+        if (!request || !response)
+            return;
+        let requestBody;
+        try {
+            requestBody = JSON.parse(request.body?.raw || '{}');
+        }
+        catch {
+            requestBody = {};
+        }
+        const isPost = request.method === 'POST';
+        const minimumInputRequired = isPost
+            ? this.#extractRequiredInputs(requestBody)
+            : [];
+        const config = {
+            _id: id,
+            name,
+            httpEndPoint: request.url.raw,
+            httpMethod: request.method,
+            source: DataSources.Api,
+            postFormData: isPost,
+            backEndConfig: { minimumInputRequired },
+        };
+        this.#localValue.set(config);
+        this.valueChanged.emit(config);
+    }
+    /**
+     * Clears the selection and emits a single `undefined` (the legacy double-emit
+     * — `undefined` then a stub `{ source }` — was removed; see FLAG).
+     */
+    clearValue() {
+        this.#localValue.set(undefined);
+        this.valueChanged.emit(undefined);
+    }
+    /**
+     * Derives the POST endpoint's required inputs from the request body. Top-level
+     * keys are primary; entries under `data` are secondary (non-primary).
+     */
+    #extractRequiredInputs(requestBody) {
+        const { data, ...rest } = requestBody;
+        const dataEntries = data && typeof data === 'object' ? { ...data } : {};
+        const primaryKeys = Object.entries(rest).map(([key, val]) => this.#toRequiredInput(key, val, true));
+        const secondaryKeys = Object.entries(dataEntries).map(([key, val]) => this.#toRequiredInput(key, val, false));
+        return [...primaryKeys, ...secondaryKeys];
+    }
+    #toRequiredInput(name, value, primaryKey) {
+        return { name, type: toJsDataType(value), primaryKey };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: RestApiCallSetupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: RestApiCallSetupComponent, isStandalone: true, selector: "lib-rest-api-call-setup", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, postmanCollectionConfig: { classPropertyName: "postmanCollectionConfig", publicName: "postmanCollectionConfig", isSignal: true, isRequired: false, transformFunction: null }, httpGetDataFunction: { classPropertyName: "httpGetDataFunction", publicName: "httpGetDataFunction", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, host: { properties: { "id": "hostId()", "attr.data-mode": "mode()" }, classAttribute: "lib-rest-api-call-setup" }, ngImport: i0, template: "@switch (mode()) {\n  @case ('no-collection') {\n    <lib-empty-state\n      icon=\"link_off\"\n      message=\"No Postman collection configured. Add a collection id and API key to pick an endpoint.\" />\n  }\n\n  @case ('selected') {\n    <div class=\"lib-rest-api-call-setup__card\">\n      <button\n        type=\"button\"\n        class=\"lib-rest-api-call-setup__endpoint\"\n        mat-button\n        [disabled]=\"disabled()\"\n        [matTooltip]=\"currentValue()?.httpEndPoint ?? ''\"\n        (click)=\"clearValue()\">\n        <span class=\"lib-rest-api-call-setup__method\" [style.color]=\"methodColor()\">\n          {{ currentValue()?.httpMethod }}\n        </span>\n        <span class=\"lib-rest-api-call-setup__name\">\n          {{ currentValue()?.name }}\n        </span>\n        <mat-icon class=\"lib-rest-api-call-setup__clear\" aria-hidden=\"true\">close</mat-icon>\n      </button>\n    </div>\n  }\n\n  @case ('picker') {\n    <lib-postman-collections\n      class=\"lib-rest-api-call-setup__picker\"\n      [class.lib-rest-api-call-setup__picker--disabled]=\"disabled()\"\n      [postmanCollectionConfig]=\"postmanCollectionConfig()!\"\n      [loadingEndPoints]=\"loadingEndPoints()\"\n      (nodeSelectionChanged)=\"nodeSelectionChanged($event)\" />\n  }\n}\n\n@if (disabled()) {\n  <p class=\"lib-rest-api-call-setup__lock\">\n    <mat-icon aria-hidden=\"true\">lock</mat-icon>\n    <span>This endpoint is locked and cannot be changed.</span>\n  </p>\n}\n\n<lib-error-list [errors]=\"errors()\" />\n", styles: [":host{display:flex;flex-direction:column;gap:1.5rem}.lib-rest-api-call-setup__card{background:var(--lib-forms-surface);border:1px solid color-mix(in srgb,var(--lib-forms-outline) 15%,transparent);border-radius:var(--lib-forms-radius-lg, 12px);box-shadow:var(--lib-forms-shadow-resting);padding:.5rem}.lib-rest-api-call-setup__endpoint{display:flex;align-items:center;gap:.75rem;width:100%;justify-content:flex-start;padding:.5rem .75rem;font-weight:400;text-align:left;color:var(--lib-forms-on-surface);overflow:hidden}.lib-rest-api-call-setup__method{flex:0 0 auto;font-size:.625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.lib-rest-api-call-setup__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--lib-forms-on-surface)}.lib-rest-api-call-setup__clear{flex:0 0 auto;color:var(--lib-forms-on-surface-variant)}.lib-rest-api-call-setup__picker--disabled{opacity:.55;pointer-events:none}.lib-rest-api-call-setup__lock{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.8125rem;line-height:1.4;color:var(--lib-forms-on-surface-variant)}\n"], dependencies: [{ kind: "component", type: PostmanCollectionsComponent, selector: "lib-postman-collections", inputs: ["postmanCollectionConfig", "loadingEndPoints"], outputs: ["nodeSelectionChanged"] }, { kind: "component", type: EmptyStateComponent, selector: "lib-empty-state", inputs: ["icon", "message"] }, { kind: "component", type: ErrorListComponent, selector: "lib-error-list", inputs: ["errors"] }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: RestApiCallSetupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-rest-api-call-setup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [
+                        PostmanCollectionsComponent,
+                        EmptyStateComponent,
+                        ErrorListComponent,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                    ], host: {
+                        'class': 'lib-rest-api-call-setup',
+                        '[id]': 'hostId()',
+                        '[attr.data-mode]': 'mode()',
+                    }, template: "@switch (mode()) {\n  @case ('no-collection') {\n    <lib-empty-state\n      icon=\"link_off\"\n      message=\"No Postman collection configured. Add a collection id and API key to pick an endpoint.\" />\n  }\n\n  @case ('selected') {\n    <div class=\"lib-rest-api-call-setup__card\">\n      <button\n        type=\"button\"\n        class=\"lib-rest-api-call-setup__endpoint\"\n        mat-button\n        [disabled]=\"disabled()\"\n        [matTooltip]=\"currentValue()?.httpEndPoint ?? ''\"\n        (click)=\"clearValue()\">\n        <span class=\"lib-rest-api-call-setup__method\" [style.color]=\"methodColor()\">\n          {{ currentValue()?.httpMethod }}\n        </span>\n        <span class=\"lib-rest-api-call-setup__name\">\n          {{ currentValue()?.name }}\n        </span>\n        <mat-icon class=\"lib-rest-api-call-setup__clear\" aria-hidden=\"true\">close</mat-icon>\n      </button>\n    </div>\n  }\n\n  @case ('picker') {\n    <lib-postman-collections\n      class=\"lib-rest-api-call-setup__picker\"\n      [class.lib-rest-api-call-setup__picker--disabled]=\"disabled()\"\n      [postmanCollectionConfig]=\"postmanCollectionConfig()!\"\n      [loadingEndPoints]=\"loadingEndPoints()\"\n      (nodeSelectionChanged)=\"nodeSelectionChanged($event)\" />\n  }\n}\n\n@if (disabled()) {\n  <p class=\"lib-rest-api-call-setup__lock\">\n    <mat-icon aria-hidden=\"true\">lock</mat-icon>\n    <span>This endpoint is locked and cannot be changed.</span>\n  </p>\n}\n\n<lib-error-list [errors]=\"errors()\" />\n", styles: [":host{display:flex;flex-direction:column;gap:1.5rem}.lib-rest-api-call-setup__card{background:var(--lib-forms-surface);border:1px solid color-mix(in srgb,var(--lib-forms-outline) 15%,transparent);border-radius:var(--lib-forms-radius-lg, 12px);box-shadow:var(--lib-forms-shadow-resting);padding:.5rem}.lib-rest-api-call-setup__endpoint{display:flex;align-items:center;gap:.75rem;width:100%;justify-content:flex-start;padding:.5rem .75rem;font-weight:400;text-align:left;color:var(--lib-forms-on-surface);overflow:hidden}.lib-rest-api-call-setup__method{flex:0 0 auto;font-size:.625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.lib-rest-api-call-setup__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--lib-forms-on-surface)}.lib-rest-api-call-setup__clear{flex:0 0 auto;color:var(--lib-forms-on-surface-variant)}.lib-rest-api-call-setup__picker--disabled{opacity:.55;pointer-events:none}.lib-rest-api-call-setup__lock{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.8125rem;line-height:1.4;color:var(--lib-forms-on-surface-variant)}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], postmanCollectionConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "postmanCollectionConfig", required: false }] }], httpGetDataFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "httpGetDataFunction", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
+
+export { RestApiCallSetupComponent };
+//# sourceMappingURL=ngx-t-forms-rest-api-call-setup.component-C_aFtdvW.mjs.map

package/fesm2022/ngx-t-forms-rest-api-call-setup.component-C_aFtdvW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-rest-api-call-setup.component-C_aFtdvW.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/postman-collections/functions/filterCollectionItems.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/postman-collections/functions/methodColors.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/postman-collections/postman-collections.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/postman-collections/postman-collections.component.html","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/rest-api-call-setup/rest-api-call-setup.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/rest-api-call-setup/rest-api-call-setup.component.html"],"sourcesContent":["import type { IFolderItem, IGetPostmanCollections } from 'ngx-t-forms-types';\n\n/** True when an item's own name or description contains the (already-lowercased) search text. */\nfunction itemMatches(item: IFolderItem, searchText: string): boolean {\n  return (\n    (item.name?.toLowerCase().includes(searchText) ?? false) ||\n    (item.description?.toLowerCase().includes(searchText) ?? false)\n  );\n}\n\n/**\n * Recursively prunes a folder tree to the items relevant to `searchText`.\n *\n * An item is kept when it matches directly (its whole subtree is then\n * preserved) OR when one of its descendants matches — in which case the\n * ancestor folder is preserved but its children are pruned to only the\n * matching branches. This fixes the legacy defect where ancestor folders of a\n * deep match were dropped (or whole sibling subtrees were retained).\n */\nfunction pruneItems(items: IFolderItem[] | undefined, searchText: string): IFolderItem[] {\n  if (!items) {\n    return [];\n  }\n  return items.reduce<IFolderItem[]>((kept, item) => {\n    if (itemMatches(item, searchText)) {\n      // Direct hit: keep the item and its full subtree intact.\n      kept.push(item);\n      return kept;\n    }\n    const matchingChildren = pruneItems(item.item, searchText);\n    if (matchingChildren.length > 0) {\n      // Ancestor of a match: keep the folder but only the matching branches.\n      kept.push({ ...item, item: matchingChildren });\n    }\n    return kept;\n  }, []);\n}\n\n/**\n * Filters a fetched Postman collection by a free-text search key, preserving\n * the ancestor folders of every match. An empty/whitespace key returns the\n * full set of top-level items unchanged.\n */\nexport function filterCollectionItems(\n  collections: IGetPostmanCollections,\n  searchKey: string,\n): IFolderItem[] {\n  const items = collections.collection.item;\n  const searchText = searchKey.trim().toLowerCase();\n  if (!searchText) {\n    return items;\n  }\n  return pruneItems(items, searchText);\n}\n","/**\n * Maps an HTTP method to its design-token CSS colour value.\n *\n * Returns a `var(--lib-forms-method-*)` reference (dark-mode safe, no hex /\n * named colours) so the tree can colour-code endpoints. Unknown methods fall\n * back to `currentColor`. Matching is case-insensitive.\n */\nexport function methodColor(method: string): string {\n  switch (method.toUpperCase()) {\n    case 'GET':\n      return 'var(--lib-forms-method-get)';\n    case 'POST':\n      return 'var(--lib-forms-method-post)';\n    case 'PUT':\n      return 'var(--lib-forms-method-put)';\n    case 'PATCH':\n      return 'var(--lib-forms-method-patch)';\n    case 'DELETE':\n      return 'var(--lib-forms-method-delete)';\n    default:\n      return 'currentColor';\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { HttpClient, HttpErrorResponse } from '@angular/common/http';\nimport { catchError, take, tap, throwError } from 'rxjs';\n\nimport { MatTreeModule } from '@angular/material/tree';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport type {\n  FlatNode,\n  IFolderItem,\n  IGetPostmanCollections,\n  IPostmanCollectionConfig,\n  TreeNode,\n} from 'ngx-t-forms-types';\n\nimport { TreeComponent } from '../api-value-access-rules/functions/convertDataToTree';\nimport { convertPostmanFolderItemsToTree } from './functions/convertPostmanCollectionToTree';\nimport { filterCollectionItems } from './functions/filterCollectionItems';\nimport { methodColor } from './functions/methodColors';\nimport { SearchFieldComponent } from '../_shared/search-field/search-field.component';\nimport { EmptyStateComponent } from '../_shared/empty-state/empty-state.component';\nimport { _isEqual } from '../../../../shared/functions/isEqual';\n\n/**\n * Internal Postman-collection picker used by `rest-api-call-setup`.\n *\n * Fetches a Postman collection over HTTP and renders it as a searchable tree of\n * endpoints, emitting the selected folder item to the parent. Embedded\n * component — owns only its tree content; the parent renders any field\n * label / hint / errors.\n */\n@Component({\n  selector: 'lib-postman-collections',\n  templateUrl: './postman-collections.component.html',\n  styleUrls: ['./postman-collections.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: { 'class': 'lib-postman-collections' },\n  imports: [\n    MatTreeModule,\n    MatIconModule,\n    MatButtonModule,\n    MatProgressSpinnerModule,\n    MatTooltipModule,\n    SearchFieldComponent,\n    EmptyStateComponent,\n  ],\n})\nexport class PostmanCollectionsComponent {\n  /** Postman API config (collection URL + key). When invalid the component shows an error. */\n  readonly postmanCollectionConfig = input<IPostmanCollectionConfig | undefined>(undefined);\n\n  /** Endpoint IDs currently in a loading state (rendered with a spinner in the tree). */\n  readonly loadingEndPoints = input<string[]>([]);\n\n  /** Emits when the user picks an endpoint node from the tree. */\n  readonly nodeSelectionChanged = output<IFolderItem>();\n\n  readonly #httpClient = inject(HttpClient);\n  readonly #destroyRef = inject(DestroyRef);\n\n  /** Imperative mat-tree backing store reused from the access-rules tree. */\n  protected readonly treeComponent = new TreeComponent();\n\n  /** Raw fetched collection; `undefined` until the request resolves. */\n  readonly #collection = signal<IGetPostmanCollections | undefined>(undefined);\n\n  /** Current search text, two-way bound to the search field. */\n  protected readonly searchKey = signal<string>('');\n\n  /** Request-in-flight flag. */\n  protected readonly loading = signal<boolean>(false);\n\n  /** Last error (invalid config or HTTP failure); `undefined` when healthy. */\n  protected readonly error = signal<HttpErrorResponse | undefined>(undefined);\n\n  /** Folder items after applying the current search, ancestor-folders preserved. */\n  protected readonly filteredItems = computed<IFolderItem[]>(() => {\n    const collection = this.#collection();\n    if (!collection) {\n      return [];\n    }\n    return filterCollectionItems(collection, this.searchKey());\n  });\n\n  /** Tree nodes derived from {@link filteredItems}. */\n  readonly #treeData = computed<TreeNode[]>(() =>\n    convertPostmanFolderItemsToTree(this.filteredItems()),\n  );\n\n  /** True once a collection is loaded but the current search yields nothing. */\n  protected readonly isEmpty = computed<boolean>(\n    () => Boolean(this.#collection()) && this.#treeData().length === 0,\n  );\n\n  /** Cache for {@link getNodeLines} so identical levels reuse one array. */\n  readonly #nodeLinesCache = new Map<number, readonly number[]>();\n\n  /** Push derived tree data into the imperative mat-tree data source. */\n  protected readonly syncTree = effect(() => {\n    this.treeComponent.assignDataSourceData(this.#treeData());\n  });\n\n  /** Last config the effect acted on; guards against re-fetching when an unstable parent binding hands us a new-but-equal reference. */\n  #loadedConfig: IPostmanCollectionConfig | undefined;\n  #hasLoadedOnce = false;\n\n  /** Fetch (or re-fetch) the collection only when the config input's content actually changes. */\n  protected readonly loadOnConfigChange = effect(() => {\n    const config = this.postmanCollectionConfig();\n    if (this.#hasLoadedOnce && _isEqual(this.#loadedConfig, config)) {\n      return;\n    }\n    this.#hasLoadedOnce = true;\n    this.#loadedConfig = config;\n    this.#loadCollection(config);\n  });\n\n  #isValidConfig(config: IPostmanCollectionConfig | undefined): config is IPostmanCollectionConfig {\n    return Boolean(config?.collectionUrl) && Boolean(config?.collectionKey);\n  }\n\n  #loadCollection(config: IPostmanCollectionConfig | undefined): void {\n    if (!this.#isValidConfig(config)) {\n      this.#collection.set(undefined);\n      this.loading.set(false);\n      this.error.set(new HttpErrorResponse({ error: 'Invalid Postman Collection Config' }));\n      return;\n    }\n\n    const requestOptions = {\n      params: { apikey: config.collectionKey, clearSystemHeaders: true },\n      headers: { 'Content-Type': 'application/json' },\n    };\n\n    this.loading.set(true);\n    this.#httpClient\n      .get<IGetPostmanCollections>(config.collectionUrl, requestOptions)\n      .pipe(\n        take(1),\n        tap(data => {\n          this.#collection.set(data);\n          this.error.set(undefined);\n          this.loading.set(false);\n        }),\n        catchError((err: HttpErrorResponse) => {\n          this.loading.set(false);\n          this.error.set(err);\n          return throwError(() => err);\n        }),\n        takeUntilDestroyed(this.#destroyRef),\n      )\n      .subscribe();\n  }\n\n  protected selectNode(node: IFolderItem): void {\n    this.nodeSelectionChanged.emit(node);\n  }\n\n  protected methodColor(method: string): string {\n    return methodColor(method);\n  }\n\n  protected isEndpointLoading(id: string): boolean {\n    return this.loadingEndPoints().includes(id);\n  }\n\n  protected hasChild = (_: number, node: FlatNode): boolean =>\n    this.treeComponent.hasChild(_, node);\n\n  /** Memoised 1..level vertical guide-line indices for tree indentation. */\n  protected getNodeLines(level: number): readonly number[] {\n    const cached = this.#nodeLinesCache.get(level);\n    if (cached) {\n      return cached;\n    }\n    const lines = Array.from({ length: level }, (_, i) => i + 1);\n    this.#nodeLinesCache.set(level, lines);\n    return lines;\n  }\n}\n","@if (loading()) {\n  <div class=\"loading-container\">\n    <mat-spinner diameter=\"36\"></mat-spinner>\n  </div>\n} @else {\n  <lib-search-field\n    class=\"search\"\n    placeholder=\"Search api\"\n    [(value)]=\"searchKey\" />\n\n  @if (error(); as err) {\n    <lib-empty-state icon=\"error_outline\" [message]=\"err.message\" />\n  } @else if (isEmpty()) {\n    <lib-empty-state\n      icon=\"search_off\"\n      [message]=\"searchKey() ? 'No endpoints match your search' : 'No endpoints in this collection'\" />\n  } @else {\n    <mat-tree\n      [dataSource]=\"treeComponent.dataSource\"\n      [treeControl]=\"treeComponent.treeControl\">\n      <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\n        @if (isEndpointLoading(node.value.id)) {\n          <mat-spinner diameter=\"22\" class=\"loading-spinner\"></mat-spinner>\n        }\n        @for (line of getNodeLines(node.level); track line) {\n          <div class=\"line\" [style.left.px]=\"line * 40 + 8\"></div>\n        }\n        @if (node.value?.request; as request) {\n          <button\n            mat-button\n            class=\"item\"\n            [disabled]=\"(!request.body?.raw && request.method === 'POST') || !request.url?.raw\"\n            [matTooltip]=\"request.url?.raw || 'Invalid Postman config, missing Endpoint URL'\"\n            (click)=\"selectNode(node.value)\">\n            <span class=\"node-key method\" [style.color]=\"methodColor(request.method)\">\n              {{ request.method }}\n            </span>\n            <span>{{ node.key }}</span>\n          </button>\n        }\n      </mat-tree-node>\n\n      <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\n        <button\n          mat-icon-button\n          matTreeNodeToggle\n          class=\"toggle\"\n          [attr.aria-label]=\"'Toggle ' + node.key\">\n          <mat-icon>\n            {{ treeComponent.treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n          </mat-icon>\n        </button>\n        <mat-icon class=\"folder-icon\">\n          {{ treeComponent.treeControl.isExpanded(node) ? 'folder_open' : 'folder' }}\n        </mat-icon>\n        <span class=\"folder-label\">{{ node.key }}</span>\n      </mat-tree-node>\n    </mat-tree>\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  effect,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport type { Observable } from 'rxjs';\n\nimport {\n  APIDataFetchingConfigurationInterface,\n  DataSources,\n  IFolderItem,\n  IPostmanCollectionConfig,\n  JsDataTypes,\n  MinimumInputRequiredInterface,\n} from 'ngx-t-forms-types';\n\nimport type { IConfigElementError } from '../../t-dynamic-data-edit.component';\nimport { _isEqual } from '../../../../shared/functions/isEqual';\nimport { EmptyStateComponent } from '../_shared/empty-state/empty-state.component';\nimport { ErrorListComponent } from '../_shared/error-list/error-list.component';\nimport { PostmanCollectionsComponent } from '../postman-collections/postman-collections.component';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nlet nextId = 0;\n\n/** Discrete UI mode this editor is in, derived from its inputs and value. */\ntype SetupMode = 'no-collection' | 'picker' | 'selected';\n\n/** HTTP method understood by the method-colour map; falls back to neutral. */\ntype HttpMethod = APIDataFetchingConfigurationInterface['httpMethod'];\n\n/** CSS-variable colour per HTTP method (dark-mode-safe; never a hex literal). */\nconst METHOD_COLOR: Readonly<Record<HttpMethod, string>> = {\n  GET: 'var(--lib-forms-method-get)',\n  POST: 'var(--lib-forms-method-post)',\n  PUT: 'var(--lib-forms-method-put)',\n  DELETE: 'var(--lib-forms-method-delete)',\n};\n\n/** Maps a JS `typeof` string to the shared {@link JsDataTypes} enum member. */\nfunction toJsDataType(value: unknown): JsDataTypes {\n  switch (typeof value) {\n    case 'string':\n      return JsDataTypes.String;\n    case 'number':\n      return JsDataTypes.Number;\n    case 'bigint':\n      return JsDataTypes.BigInt;\n    case 'boolean':\n      return JsDataTypes.Boolean;\n    case 'symbol':\n      return JsDataTypes.Symbol;\n    case 'function':\n      return JsDataTypes.Function;\n    case 'object':\n      return JsDataTypes.Object;\n    default:\n      return JsDataTypes.Undefined;\n  }\n}\n\n/**\n * Lets the user pick an API endpoint from a Postman collection and exposes the\n * resulting {@link APIDataFetchingConfigurationInterface}. Renders one of three\n * states — no collection configured, the endpoint picker, or the selected\n * endpoint card — and embeds {@link PostmanCollectionsComponent} for the tree.\n *\n * Internal editor consumed by `t-dynamic-data-edit` and `data-source-picker`;\n * the parent owns the field label, hint and validation chrome.\n *\n * @example\n *   <lib-rest-api-call-setup\n *     [postmanCollectionConfig]=\"config()\"\n *     [value]=\"value()\"\n *     [disabled]=\"disabled()\"\n *     (valueChanged)=\"onApiConfig($event)\" />\n */\n@Component({\n  selector: 'lib-rest-api-call-setup',\n  templateUrl: './rest-api-call-setup.component.html',\n  styleUrl: './rest-api-call-setup.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  imports: [\n    PostmanCollectionsComponent,\n    EmptyStateComponent,\n    ErrorListComponent,\n    MatButtonModule,\n    MatIconModule,\n    MatTooltipModule,\n  ],\n  host: {\n    'class': 'lib-rest-api-call-setup',\n    '[id]': 'hostId()',\n    '[attr.data-mode]': 'mode()',\n  },\n})\nexport class RestApiCallSetupComponent {\n  readonly #fallbackId = `lib-rest-api-call-setup-${nextId++}`;\n\n  /** Optional consumer-provided host id. */\n  readonly id = input<string | undefined>(undefined);\n\n  /** Postman collection that backs the picker. */\n  readonly postmanCollectionConfig = input<IPostmanCollectionConfig | undefined>(undefined);\n\n  /**\n   * Optional HTTP GET function for fetching sample responses. Retained on the\n   * contract for parity; this editor does not invoke it (selection is resolved\n   * from the Postman collection the parent already loads).\n   */\n  readonly httpGetDataFunction = input<\n    ((url: string, options: Record<string, unknown>) => Observable<unknown>) | undefined\n  >(undefined);\n\n  /** Disables the picker and shows a lock affordance. */\n  readonly disabled = input<boolean>(false);\n\n  /** Current configuration value. */\n  readonly value = input<APIDataFetchingConfigurationInterface | undefined>(undefined);\n\n  /** Validation errors surfaced from the parent editor. */\n  readonly errors = input<IConfigElementError[] | undefined>([]);\n\n  /** Emits whenever the user selects a new endpoint or clears the value. */\n  readonly valueChanged = output<APIDataFetchingConfigurationInterface | undefined>();\n\n  /** Endpoint IDs currently loading sample data (forwarded to the picker). */\n  protected readonly loadingEndPoints = signal<string[]>([]);\n\n  /** Local snapshot of the value, bridged from the `value` input. */\n  readonly #localValue = signal<APIDataFetchingConfigurationInterface | undefined>(undefined);\n\n  /** Read-only view of the active configuration for the template. */\n  protected readonly currentValue = this.#localValue.asReadonly();\n\n  /** Host id: consumer-provided or a stable per-instance fallback. */\n  protected readonly hostId = computed<string>(() => this.id() ?? this.#fallbackId);\n\n  /** True once the snapshot carries a usable endpoint + method. */\n  protected readonly hasValidValue = computed<boolean>(() => {\n    const v = this.#localValue();\n    return Boolean(v?.httpEndPoint) && Boolean(v?.httpMethod);\n  });\n\n  /** Discrete UI mode driving the template's `@switch`. */\n  protected readonly mode = computed<SetupMode>(() => {\n    if (!this.postmanCollectionConfig()) return 'no-collection';\n    return this.hasValidValue() ? 'selected' : 'picker';\n  });\n\n  /** Token-based colour for the selected endpoint's HTTP method badge. */\n  protected readonly methodColor = computed<string>(() => {\n    const method = this.#localValue()?.httpMethod;\n    return method && method in METHOD_COLOR ? METHOD_COLOR[method] : 'currentColor';\n  });\n\n  /**\n   * Bridge the `value` input into the local mutable snapshot, de-duping with a\n   * deep structural compare (replaces the legacy `JSON.stringify` equality so\n   * key order and `undefined` no longer cause spurious resets).\n   */\n  protected readonly valueBridge = effect(() => {\n    const next = this.value();\n    if (!_isEqual(next, this.#localValue())) {\n      this.#localValue.set(next);\n    }\n  });\n\n  /** Maps the selected tree node into the API config and emits it. */\n  protected nodeSelectionChanged(node: IFolderItem): void {\n    const { id, name, request, response } = node;\n    if (!request || !response) return;\n\n    let requestBody: Record<string, unknown>;\n    try {\n      requestBody = JSON.parse(request.body?.raw || '{}') as Record<string, unknown>;\n    } catch {\n      requestBody = {};\n    }\n\n    const isPost = request.method === 'POST';\n    const minimumInputRequired: MinimumInputRequiredInterface[] = isPost\n      ? this.#extractRequiredInputs(requestBody)\n      : [];\n\n    const config: APIDataFetchingConfigurationInterface = {\n      _id: id,\n      name,\n      httpEndPoint: request.url.raw,\n      httpMethod: request.method,\n      source: DataSources.Api,\n      postFormData: isPost,\n      backEndConfig: { minimumInputRequired },\n    };\n\n    this.#localValue.set(config);\n    this.valueChanged.emit(config);\n  }\n\n  /**\n   * Clears the selection and emits a single `undefined` (the legacy double-emit\n   * — `undefined` then a stub `{ source }` — was removed; see FLAG).\n   */\n  protected clearValue(): void {\n    this.#localValue.set(undefined);\n    this.valueChanged.emit(undefined);\n  }\n\n  /**\n   * Derives the POST endpoint's required inputs from the request body. Top-level\n   * keys are primary; entries under `data` are secondary (non-primary).\n   */\n  #extractRequiredInputs(requestBody: Record<string, unknown>): MinimumInputRequiredInterface[] {\n    const { data, ...rest } = requestBody;\n    const dataEntries: Record<string, unknown> =\n      data && typeof data === 'object' ? { ...data } : {};\n\n    const primaryKeys = Object.entries(rest).map(([key, val]) =>\n      this.#toRequiredInput(key, val, true),\n    );\n    const secondaryKeys = Object.entries(dataEntries).map(([key, val]) =>\n      this.#toRequiredInput(key, val, false),\n    );\n\n    return [...primaryKeys, ...secondaryKeys];\n  }\n\n  #toRequiredInput(\n    name: string,\n    value: unknown,\n    primaryKey: boolean,\n  ): MinimumInputRequiredInterface {\n    return { name, type: toJsDataType(value), primaryKey };\n  }\n}\n","@switch (mode()) {\n  @case ('no-collection') {\n    <lib-empty-state\n      icon=\"link_off\"\n      message=\"No Postman collection configured. Add a collection id and API key to pick an endpoint.\" />\n  }\n\n  @case ('selected') {\n    <div class=\"lib-rest-api-call-setup__card\">\n      <button\n        type=\"button\"\n        class=\"lib-rest-api-call-setup__endpoint\"\n        mat-button\n        [disabled]=\"disabled()\"\n        [matTooltip]=\"currentValue()?.httpEndPoint ?? ''\"\n        (click)=\"clearValue()\">\n        <span class=\"lib-rest-api-call-setup__method\" [style.color]=\"methodColor()\">\n          {{ currentValue()?.httpMethod }}\n        </span>\n        <span class=\"lib-rest-api-call-setup__name\">\n          {{ currentValue()?.name }}\n        </span>\n        <mat-icon class=\"lib-rest-api-call-setup__clear\" aria-hidden=\"true\">close</mat-icon>\n      </button>\n    </div>\n  }\n\n  @case ('picker') {\n    <lib-postman-collections\n      class=\"lib-rest-api-call-setup__picker\"\n      [class.lib-rest-api-call-setup__picker--disabled]=\"disabled()\"\n      [postmanCollectionConfig]=\"postmanCollectionConfig()!\"\n      [loadingEndPoints]=\"loadingEndPoints()\"\n      (nodeSelectionChanged)=\"nodeSelectionChanged($event)\" />\n  }\n}\n\n@if (disabled()) {\n  <p class=\"lib-rest-api-call-setup__lock\">\n    <mat-icon aria-hidden=\"true\">lock</mat-icon>\n    <span>This endpoint is locked and cannot be changed.</span>\n  </p>\n}\n\n<lib-error-list [errors]=\"errors()\" />\n"],"names":["i2","i3","i4","i1"],"mappings":"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"}

package/fesm2022/ngx-t-forms-search-field.component-B2ZO7lqO.mjs

@@ -0,0 +1,38 @@
+import * as i0 from '@angular/core';
+import { model, input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+
+/**
+ * Internal search field: a tokenised input with a leading icon, an optional
+ * result-count badge, and a clear button. Two-way bound via `value`.
+ *
+ * @example
+ *   <lib-search-field [(value)]="query" [resultCount]="matches().length"
+ *     placeholder="Search options" />
+ */
+class SearchFieldComponent {
+    constructor() {
+        /** Two-way search text. */
+        this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Placeholder shown when empty. */
+        this.placeholder = input('Search', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** Optional result-count badge; `undefined` hides it. */
+        this.resultCount = input(undefined, ...(ngDevMode ? [{ debugName: "resultCount" }] : /* istanbul ignore next */ []));
+    }
+    onInput(event) {
+        this.value.set(event.target.value);
+    }
+    clear() {
+        this.value.set('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SearchFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: SearchFieldComponent, isStandalone: true, selector: "lib-search-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, resultCount: { classPropertyName: "resultCount", publicName: "resultCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "lib-search-field" }, ngImport: i0, template: "<mat-icon class=\"lib-search-field__icon\">search</mat-icon>\n<input\n  class=\"lib-search-field__input\"\n  type=\"text\"\n  [placeholder]=\"placeholder()\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  aria-label=\"Search\" />\n@if (resultCount() !== undefined) {\n<span class=\"lib-search-field__count\">{{ resultCount() }}</span>\n}\n@if (value()) {\n<button type=\"button\" class=\"lib-search-field__clear\" (click)=\"clear()\" aria-label=\"Clear search\">\n  <mat-icon>close</mat-icon>\n</button>\n}\n", styles: [":host{display:flex;align-items:center;gap:.5rem;min-height:2.25rem;padding:.5rem .75rem;border:1px solid var(--lib-forms-outline);border-radius:var(--lib-forms-radius-sm, 8px);background:var(--lib-forms-surface);transition:border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}:host:focus-within{outline:none;border-color:var(--lib-forms-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--lib-forms-primary) 25%,transparent)}.lib-search-field__icon{flex:none;width:1.125rem;height:1.125rem;font-size:1.125rem;color:var(--lib-forms-on-surface-variant)}.lib-search-field__input{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;font-size:.875rem;color:var(--lib-forms-on-surface)}.lib-search-field__input::placeholder{color:color-mix(in srgb,var(--lib-forms-on-surface-variant) 60%,transparent)}.lib-search-field__count{flex:none;font-size:.75rem;color:var(--lib-forms-on-surface-variant)}.lib-search-field__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:var(--lib-forms-radius-sm, 8px);background:transparent;color:var(--lib-forms-on-surface-variant);cursor:pointer;transition:color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),background var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}.lib-search-field__clear:hover{color:var(--lib-forms-error);background:var(--sem-error-surface)}.lib-search-field__clear mat-icon{width:1rem;height:1rem;font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SearchFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-search-field', imports: [MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: { 'class': 'lib-search-field' }, template: "<mat-icon class=\"lib-search-field__icon\">search</mat-icon>\n<input\n  class=\"lib-search-field__input\"\n  type=\"text\"\n  [placeholder]=\"placeholder()\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  aria-label=\"Search\" />\n@if (resultCount() !== undefined) {\n<span class=\"lib-search-field__count\">{{ resultCount() }}</span>\n}\n@if (value()) {\n<button type=\"button\" class=\"lib-search-field__clear\" (click)=\"clear()\" aria-label=\"Clear search\">\n  <mat-icon>close</mat-icon>\n</button>\n}\n", styles: [":host{display:flex;align-items:center;gap:.5rem;min-height:2.25rem;padding:.5rem .75rem;border:1px solid var(--lib-forms-outline);border-radius:var(--lib-forms-radius-sm, 8px);background:var(--lib-forms-surface);transition:border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}:host:focus-within{outline:none;border-color:var(--lib-forms-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--lib-forms-primary) 25%,transparent)}.lib-search-field__icon{flex:none;width:1.125rem;height:1.125rem;font-size:1.125rem;color:var(--lib-forms-on-surface-variant)}.lib-search-field__input{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;font-size:.875rem;color:var(--lib-forms-on-surface)}.lib-search-field__input::placeholder{color:color-mix(in srgb,var(--lib-forms-on-surface-variant) 60%,transparent)}.lib-search-field__count{flex:none;font-size:.75rem;color:var(--lib-forms-on-surface-variant)}.lib-search-field__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:var(--lib-forms-radius-sm, 8px);background:transparent;color:var(--lib-forms-on-surface-variant);cursor:pointer;transition:color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),background var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}.lib-search-field__clear:hover{color:var(--lib-forms-error);background:var(--sem-error-surface)}.lib-search-field__clear mat-icon{width:1rem;height:1rem;font-size:1rem}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], resultCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "resultCount", required: false }] }] } });
+
+export { SearchFieldComponent as S };
+//# sourceMappingURL=ngx-t-forms-search-field.component-B2ZO7lqO.mjs.map

package/fesm2022/ngx-t-forms-search-field.component-B2ZO7lqO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-search-field.component-B2ZO7lqO.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/_shared/search-field/search-field.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/_shared/search-field/search-field.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, input, model } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\n\n/**\n * Internal search field: a tokenised input with a leading icon, an optional\n * result-count badge, and a clear button. Two-way bound via `value`.\n *\n * @example\n *   <lib-search-field [(value)]=\"query\" [resultCount]=\"matches().length\"\n *     placeholder=\"Search options\" />\n */\n@Component({\n  selector: 'lib-search-field',\n  imports: [MatIconModule],\n  templateUrl: './search-field.component.html',\n  styleUrl: './search-field.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: { 'class': 'lib-search-field' },\n})\nexport class SearchFieldComponent {\n  /** Two-way search text. */\n  readonly value = model<string>('');\n  /** Placeholder shown when empty. */\n  readonly placeholder = input<string>('Search');\n  /** Optional result-count badge; `undefined` hides it. */\n  readonly resultCount = input<number | undefined>(undefined);\n\n  protected onInput(event: Event): void {\n    this.value.set((event.target as HTMLInputElement).value);\n  }\n\n  protected clear(): void {\n    this.value.set('');\n  }\n}\n","<mat-icon class=\"lib-search-field__icon\">search</mat-icon>\n<input\n  class=\"lib-search-field__input\"\n  type=\"text\"\n  [placeholder]=\"placeholder()\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  aria-label=\"Search\" />\n@if (resultCount() !== undefined) {\n<span class=\"lib-search-field__count\">{{ resultCount() }}</span>\n}\n@if (value()) {\n<button type=\"button\" class=\"lib-search-field__clear\" (click)=\"clear()\" aria-label=\"Clear search\">\n  <mat-icon>close</mat-icon>\n</button>\n}\n"],"names":["i1"],"mappings":";;;;;AAGA;;;;;;;AAOG;MAUU,oBAAoB,CAAA;AATjC,IAAA,WAAA,GAAA;;AAWW,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;;AAEzB,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAS,QAAQ,kFAAC;;AAErC,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAqB,SAAS,kFAAC;AAS5D,IAAA;AAPW,IAAA,OAAO,CAAC,KAAY,EAAA;QAC5B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;IAC1D;IAEU,KAAK,GAAA;AACb,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;IACpB;+GAdW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpBjC,wgBAgBA,EAAA,MAAA,EAAA,CAAA,kkDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDHY,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAOZ,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAThC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,WACnB,CAAC,aAAa,CAAC,EAAA,eAAA,EAGP,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC,EAAE,OAAO,EAAE,kBAAkB,EAAE,EAAA,QAAA,EAAA,wgBAAA,EAAA,MAAA,EAAA,CAAA,kkDAAA,CAAA,EAAA;;;;;"}