@aquera/ngx-smart-table 0.0.39 → 0.0.40

package/fesm2022/aquera-ngx-smart-table.mjs

@@ -1,5 +1,5 @@
-import { BehaviorSubject, Subject, isObservable, fromEvent, merge } from 'rxjs';
-import { distinctUntilChanged, map, throttleTime } from 'rxjs/operators';
+import { BehaviorSubject, Subject, isObservable, fromEvent, from, of, merge } from 'rxjs';
+import { distinctUntilChanged, map, throttleTime, catchError } from 'rxjs/operators';
 import * as i0 from '@angular/core';
 import { inject, DestroyRef, input, output, ChangeDetectorRef, computed, ElementRef, HostListener, ViewChild, CUSTOM_ELEMENTS_SCHEMA, Component, Injectable, Input, EventEmitter, Output, ChangeDetectionStrategy, Directive, Injector, signal, effect, afterNextRender, HostBinding, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -12328,6 +12328,18 @@ class StConditionValueEditorComponent {
         this.disabled = false;
         this.valueChange = new EventEmitter();
         this.elementRef = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
+        /**
+         * Async-search state (only used when the field declares `loadOptions`).
+         *  - `asyncOptions` holds the latest server-fetched list; null means "not
+         *    loaded yet" and we fall back to the field's static `options`.
+         *  - `optionsLoading` drives nile-select's loading indicator.
+         *  - `loadedForAttribute` guards the one-time open-time load per field.
+         */
+        this.asyncOptions = null;
+        this.optionsLoading = false;
+        this.searchTimer = null;
+        this.inFlight = null;
         /** Open/close + highlighted-option state for the slotted-trigger select. */
         this.dropdownOpen = false;
         this.highlightedIndex = -1;
@@ -12345,6 +12357,26 @@ class StConditionValueEditorComponent {
         // before it reaches any bubble-phase Angular template binding).
         this.installKeyForwarder();
     }
+    /**
+     * Reset the async-search state whenever the bound field switches to a
+     * different attribute. The component instance is reused across rule edits
+     * (Angular rebinds `[field]`), so stale fetched options / loading flags from
+     * the previous field must be cleared, and the next open re-triggers the
+     * initial load.
+     */
+    ngOnChanges(changes) {
+        const change = changes['field'];
+        if (!change)
+            return;
+        const prev = change.previousValue?.attribute;
+        const curr = change.currentValue?.attribute;
+        if (prev !== curr) {
+            this.cancelLoad();
+            this.asyncOptions = null;
+            this.optionsLoading = false;
+            this.loadedForAttribute = undefined;
+        }
+    }
     /**
      * Host class flag — when true, the value editor host stretches to take the
      * remaining flex space in the rule (so the chip can grow up to the row's
@@ -12370,6 +12402,29 @@ class StConditionValueEditorComponent {
             default: return '';
         }
     }
+    /**
+     * Whether the select / multi-select dropdown shows its search box. Defaults
+     * to true (the field opts out with `searchable: false`). Server-side search
+     * always needs the box, so a field that declares `loadOptions` keeps it on
+     * regardless of the flag.
+     */
+    get searchEnabled() {
+        if (this.serverSearch)
+            return true;
+        return this.field?.searchable !== false;
+    }
+    /** True when the field provides an async `loadOptions` callback. */
+    get serverSearch() {
+        return typeof this.field?.loadOptions === 'function';
+    }
+    /**
+     * Options rendered into the dropdown. For server-side search this is the
+     * latest fetched list (falling back to the field's static seed list until
+     * the first load resolves); otherwise it's just the static `options`.
+     */
+    get displayOptions() {
+        return this.asyncOptions ?? this.field?.options ?? [];
+    }
     /** Convenience: first element for single-value editors. */
     get singleValue() {
         return this.value?.[0] ?? '';
@@ -12393,7 +12448,7 @@ class StConditionValueEditorComponent {
         const first = this.multiValue[0];
         if (!first)
             return '';
-        const opt = this.field?.options?.find(o => o.value === first);
+        const opt = this.displayOptions.find(o => o.value === first);
         return opt?.label ?? first;
     }
     /** Count of additional selected values beyond the first — used for "+N More". */
@@ -12490,6 +12545,71 @@ class StConditionValueEditorComponent {
         this.activeSlot = slot ?? host;
         this.dropdownOpen = true;
         this.highlightedIndex = -1;
+        // Server-side search: load the initial (empty-query) page once per field
+        // the first time its dropdown opens. Subsequent opens reuse the last list.
+        if (this.serverSearch && this.loadedForAttribute !== this.field?.attribute) {
+            this.loadedForAttribute = this.field?.attribute;
+            this.fetchOptions('');
+        }
+    }
+    /**
+     * nile-select fires `nile-search` (with `detail.query`) on every keystroke in
+     * its search box. For server-side search we debounce and re-fetch; when the
+     * field has no `loadOptions` callback the dropdown's built-in client-side
+     * filter handles it and this is a no-op.
+     */
+    onSelectSearch(event) {
+        if (!this.serverSearch || this.disabled)
+            return;
+        const detail = event.detail;
+        const query = detail?.query ?? '';
+        if (this.searchTimer)
+            clearTimeout(this.searchTimer);
+        const debounce = this.field?.searchDebounceMs ?? 300;
+        this.searchTimer = setTimeout(() => {
+            this.searchTimer = null;
+            this.fetchOptions(query);
+        }, debounce);
+    }
+    /**
+     * Invoke the field's `loadOptions(query)` and adopt the result. Normalises
+     * the Observable-or-Promise return via `from()`, cancels any in-flight
+     * request (latest-wins), and shows nile-select's loading indicator while the
+     * fetch runs. A failed load leaves the current options untouched.
+     */
+    fetchOptions(query) {
+        const loader = this.field?.loadOptions;
+        if (!loader)
+            return;
+        this.inFlight?.unsubscribe();
+        this.optionsLoading = true;
+        this.cdr.markForCheck();
+        let result;
+        try {
+            result = loader(query);
+        }
+        catch {
+            this.optionsLoading = false;
+            this.cdr.markForCheck();
+            return;
+        }
+        this.inFlight = from(result)
+            .pipe(catchError(() => of(null)))
+            .subscribe(opts => {
+            this.optionsLoading = false;
+            if (Array.isArray(opts))
+                this.asyncOptions = opts;
+            this.cdr.markForCheck();
+        });
+    }
+    /** Cancel any pending debounce timer and in-flight options request. */
+    cancelLoad() {
+        if (this.searchTimer) {
+            clearTimeout(this.searchTimer);
+            this.searchTimer = null;
+        }
+        this.inFlight?.unsubscribe();
+        this.inFlight = null;
     }
     /**
      * Nile emits `nile-hide` when its dropdown closes — for any reason (Esc,
@@ -12670,16 +12790,17 @@ class StConditionValueEditorComponent {
     }
     ngOnDestroy() {
         this.removeKeyForwarder();
+        this.cancelLoad();
         this.activeHost = null;
         this.activeSlot = null;
         this.dropdownOpen = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionValueEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionValueEditorComponent, isStandalone: true, selector: "st-condition-value-editor", inputs: { field: "field", operator: "operator", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.is-chip-mode": "this.isChipMode" } }, ngImport: i0, template: "@if (!hidden && field) {\n  @switch (field.valueEditor) {\n    @case ('text') {\n      <nile-input\n        class=\"st-cb-value st-cb-value--text\"\n        size=\"small\"\n        [value]=\"singleValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        (nile-input)=\"onTextInput($event)\">\n      </nile-input>\n    }\n    @case ('chip') {\n      <nile-chip\n        class=\"st-cb-value st-cb-value--chip\"\n        size=\"small\"\n        [acceptUserInput]=\"true\"\n        [addOnBlur]=\"true\"\n        [noWrap]=\"true\"\n        [value]=\"multiValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        (nile-chip-change)=\"onChipChange($event)\">\n      </nile-chip>\n    }\n    @case ('select') {\n      <nile-select\n        class=\"st-cb-chip st-cb-value st-cb-value--select\"\n        size=\"small\"\n        searchEnabled=\"true\"\n        [hoist]=\"true\"\n        [value]=\"singleValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        aria-label=\"Value\"\n        (nile-show)=\"onSelectShow($event)\"\n        (nile-hide)=\"onSelectAfterHide($event)\"\n        (nile-change)=\"onSelectChange($event)\">\n        @for (opt of field.options; track opt.value) {\n          <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n        }\n      </nile-select>\n    }\n    @case ('multi-select') {\n      <nile-select\n        class=\"st-cb-chip st-cb-value st-cb-value--multi\"\n        size=\"small\"\n        multiple\n        searchEnabled=\"true\"\n        [hoist]=\"true\"\n        [value]=\"multiValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        aria-label=\"Value\"\n        (nile-show)=\"onSelectShow($event)\"\n        (nile-hide)=\"onSelectAfterHide($event)\"\n        (nile-change)=\"onSelectChange($event)\">\n        <!--\n          Slot=\"custom-select\" REPLACES Nile's default tag display. We bypass\n          Nile's calculateTotalWidthOfTags() (which would otherwise reset\n          maxOptionsVisible on every value change \u2192 visible flicker) and render\n          our own \"first label + N more\" summary statically.\n        -->\n        <div slot=\"custom-select\"\n             class=\"st-cb-value--multi__display\"\n             [attr.tabindex]=\"disabled ? null : 0\"\n             role=\"combobox\"\n             aria-haspopup=\"listbox\"\n             [attr.aria-label]=\"placeholder\">\n          @if (multiValue.length === 0) {\n            <span class=\"st-cb-value--multi__placeholder\">{{ placeholder }}</span>\n          } @else {\n            <!--\n              Tooltip shows only the first selected value (the one rendered in\n              the trigger). Same pattern as the field picker's label tooltip.\n            -->\n            <nile-tooltip\n              class=\"st-cb-value--multi__tooltip\"\n              [content]=\"firstSelectedLabel\"\n              placement=\"top\"\n              [hoist]=\"true\">\n              <span class=\"st-cb-value--multi__label\">{{ firstSelectedLabel }}</span>\n            </nile-tooltip>\n            @if (overflowCount > 0) {\n              <span class=\"st-cb-value--multi__overflow\">+{{ overflowCount }} More</span>\n            }\n          }\n          <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-cb-value--multi__chevron\" aria-hidden=\"true\"></nile-icon>\n        </div>\n        @for (opt of field.options; track opt.value) {\n          <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n        }\n      </nile-select>\n    }\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host:has(nile-chip){display:flex!important;width:100%!important;min-width:0!important}:host ::ng-deep .st-cb-value--text{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--text::part(form-control),:host ::ng-deep .st-cb-value--text::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--text::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000)}:host ::ng-deep .st-cb-value--text::part(input){background:transparent;border:none;box-shadow:none;padding:0;height:auto;min-height:unset;font:inherit;color:inherit;line-height:12px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--text::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--chip{flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important;vertical-align:middle;--nile-height-26px: 20px;--nile-type-scale-3: 12px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar{height:2px;background:transparent}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .st-cb-value--chip::part(base){scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}:host ::ng-deep .st-cb-value--chip::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none!important;box-shadow:none;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px);height:28px;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px}:host ::ng-deep .st-cb-value--chip::part(input){padding:0;height:auto;min-height:unset;font:inherit;font-size:12px;line-height:12px}:host ::ng-deep .st-cb-value--chip::part(tag){height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__base){background:var(--nile-colors-white-base, #fff)!important;border:1px solid var(--nile-colors-neutral-500, #c0c6c9)!important;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px)!important;font-family:Colfax,system-ui,sans-serif!important;font-size:12px!important;line-height:12px!important;letter-spacing:.2px;height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__content){font:inherit}.st-cb-value--multi__display{display:inline-flex;align-items:center;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border-radius:4px!important;padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);height:28px;cursor:pointer;white-space:nowrap;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));overflow:hidden;box-sizing:border-box;outline:none}.st-cb-value--multi__display:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px}.st-cb-value--multi__placeholder{color:var(--nile-colors-dark-500, #636363);overflow:hidden;text-overflow:ellipsis}.st-cb-value--multi__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-cb-value--multi__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-cb-value--multi__overflow{flex:0 0 auto;color:var(--ng-colors-fg-brand-primary-600, #005ea6);font-weight:var(--ng-font-weight-medium)}.st-cb-value--multi__chevron{flex:0 0 auto;color:var(--nile-colors-dark-500, #636363)}:host ::ng-deep .st-cb-value--select,:host ::ng-deep .st-cb-value--multi{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--select::part(form-control),:host ::ng-deep .st-cb-value--select::part(form-control-input),:host ::ng-deep .st-cb-value--multi::part(form-control),:host ::ng-deep .st-cb-value--multi::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--select::part(combobox),:host ::ng-deep .st-cb-value--multi::part(combobox){background:var(--nile-colors-neutral-400, #e6e9eb);border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:100%;overflow:hidden;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);gap:var(--nile-spacing-md, 8px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--select::part(listbox),:host ::ng-deep .st-cb-value--multi::part(listbox){min-width:var(--st-cb-listbox-width, 240px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){color:inherit;font:inherit;letter-spacing:inherit;padding:0;height:auto;min-height:unset;line-height:12px;background:transparent;border:none;width:auto}:host ::ng-deep .st-cb-value--select::part(expand-icon),:host ::ng-deep .st-cb-value--multi::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-value--select::part(form-control-label),:host ::ng-deep .st-cb-value--multi::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--select::part(tags),:host ::ng-deep .st-cb-value--multi::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-value--select::part(tag__base),:host ::ng-deep .st-cb-value--multi::part(tag__base){background:var(--nile-colors-white-base, #fff);border:1px solid var(--nile-colors-neutral-500, #c0c6c9);border-radius:var(--nile-radius-sm, 4px);padding:0 4px;font-size:11px;line-height:14px;min-height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionValueEditorComponent, isStandalone: true, selector: "st-condition-value-editor", inputs: { field: "field", operator: "operator", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.is-chip-mode": "this.isChipMode" } }, usesOnChanges: true, ngImport: i0, template: "@if (!hidden && field) {\n  @switch (field.valueEditor) {\n    @case ('text') {\n      <nile-input\n        class=\"st-cb-value st-cb-value--text\"\n        size=\"small\"\n        [value]=\"singleValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        (nile-input)=\"onTextInput($event)\">\n      </nile-input>\n    }\n    @case ('chip') {\n      <nile-chip\n        class=\"st-cb-value st-cb-value--chip\"\n        size=\"small\"\n        [acceptUserInput]=\"true\"\n        [addOnBlur]=\"true\"\n        [noWrap]=\"true\"\n        [value]=\"multiValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        (nile-chip-change)=\"onChipChange($event)\">\n      </nile-chip>\n    }\n    @case ('select') {\n      <nile-select\n        class=\"st-cb-chip st-cb-value st-cb-value--select\"\n        size=\"small\"\n        [attr.searchEnabled]=\"searchEnabled ? 'true' : null\"\n        [disableLocalSearch]=\"serverSearch\"\n        [optionsLoading]=\"optionsLoading\"\n        [hoist]=\"true\"\n        [value]=\"singleValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        aria-label=\"Value\"\n        (nile-show)=\"onSelectShow($event)\"\n        (nile-hide)=\"onSelectAfterHide($event)\"\n        (nile-search)=\"onSelectSearch($event)\"\n        (nile-change)=\"onSelectChange($event)\">\n        @for (opt of displayOptions; track opt.value) {\n          <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n        }\n      </nile-select>\n    }\n    @case ('multi-select') {\n      <nile-select\n        class=\"st-cb-chip st-cb-value st-cb-value--multi\"\n        size=\"small\"\n        multiple\n        [attr.searchEnabled]=\"searchEnabled ? 'true' : null\"\n        [disableLocalSearch]=\"serverSearch\"\n        [optionsLoading]=\"optionsLoading\"\n        [hoist]=\"true\"\n        [value]=\"multiValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        aria-label=\"Value\"\n        (nile-show)=\"onSelectShow($event)\"\n        (nile-hide)=\"onSelectAfterHide($event)\"\n        (nile-search)=\"onSelectSearch($event)\"\n        (nile-change)=\"onSelectChange($event)\">\n        <!--\n          Slot=\"custom-select\" REPLACES Nile's default tag display. We bypass\n          Nile's calculateTotalWidthOfTags() (which would otherwise reset\n          maxOptionsVisible on every value change \u2192 visible flicker) and render\n          our own \"first label + N more\" summary statically.\n        -->\n        <div slot=\"custom-select\"\n             class=\"st-cb-value--multi__display\"\n             [attr.tabindex]=\"disabled ? null : 0\"\n             role=\"combobox\"\n             aria-haspopup=\"listbox\"\n             [attr.aria-label]=\"placeholder\">\n          @if (multiValue.length === 0) {\n            <span class=\"st-cb-value--multi__placeholder\">{{ placeholder }}</span>\n          } @else {\n            <!--\n              Tooltip shows only the first selected value (the one rendered in\n              the trigger). Same pattern as the field picker's label tooltip.\n            -->\n            <nile-tooltip\n              class=\"st-cb-value--multi__tooltip\"\n              [content]=\"firstSelectedLabel\"\n              placement=\"top\"\n              [hoist]=\"true\">\n              <span class=\"st-cb-value--multi__label\">{{ firstSelectedLabel }}</span>\n            </nile-tooltip>\n            @if (overflowCount > 0) {\n              <span class=\"st-cb-value--multi__overflow\">+{{ overflowCount }} More</span>\n            }\n          }\n          <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-cb-value--multi__chevron\" aria-hidden=\"true\"></nile-icon>\n        </div>\n        @for (opt of displayOptions; track opt.value) {\n          <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n        }\n      </nile-select>\n    }\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host:has(nile-chip){display:flex!important;width:100%!important;min-width:0!important}:host ::ng-deep .st-cb-value--text{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--text::part(form-control),:host ::ng-deep .st-cb-value--text::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--text::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000)}:host ::ng-deep .st-cb-value--text::part(input){background:transparent;border:none;box-shadow:none;padding:0;height:auto;min-height:unset;font:inherit;color:inherit;line-height:12px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--text::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--chip{flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important;vertical-align:middle;--nile-height-26px: 20px;--nile-type-scale-3: 12px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar{height:2px;background:transparent}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .st-cb-value--chip::part(base){scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}:host ::ng-deep .st-cb-value--chip::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none!important;box-shadow:none;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px);height:28px;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px}:host ::ng-deep .st-cb-value--chip::part(input){padding:0;height:auto;min-height:unset;font:inherit;font-size:12px;line-height:12px}:host ::ng-deep .st-cb-value--chip::part(tag){height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__base){background:var(--nile-colors-white-base, #fff)!important;border:1px solid var(--nile-colors-neutral-500, #c0c6c9)!important;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px)!important;font-family:Colfax,system-ui,sans-serif!important;font-size:12px!important;line-height:12px!important;letter-spacing:.2px;height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__content){font:inherit}.st-cb-value--multi__display{display:inline-flex;align-items:center;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border-radius:4px!important;padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);height:28px;cursor:pointer;white-space:nowrap;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));overflow:hidden;box-sizing:border-box;outline:none}.st-cb-value--multi__display:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px}.st-cb-value--multi__placeholder{color:var(--nile-colors-dark-500, #636363);overflow:hidden;text-overflow:ellipsis}.st-cb-value--multi__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-cb-value--multi__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-cb-value--multi__overflow{flex:0 0 auto;color:var(--ng-colors-fg-brand-primary-600, #005ea6);font-weight:var(--ng-font-weight-medium)}.st-cb-value--multi__chevron{flex:0 0 auto;color:var(--nile-colors-dark-500, #636363)}:host ::ng-deep .st-cb-value--select,:host ::ng-deep .st-cb-value--multi{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--select::part(form-control),:host ::ng-deep .st-cb-value--select::part(form-control-input),:host ::ng-deep .st-cb-value--multi::part(form-control),:host ::ng-deep .st-cb-value--multi::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--select::part(combobox),:host ::ng-deep .st-cb-value--multi::part(combobox){background:var(--nile-colors-neutral-400, #e6e9eb);border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:100%;overflow:hidden;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);gap:var(--nile-spacing-md, 8px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--select::part(listbox),:host ::ng-deep .st-cb-value--multi::part(listbox){min-width:var(--st-cb-listbox-width, 240px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){color:inherit;font:inherit;letter-spacing:inherit;padding:0;height:auto;min-height:unset;line-height:12px;background:transparent;border:none;width:auto}:host ::ng-deep .st-cb-value--select::part(expand-icon),:host ::ng-deep .st-cb-value--multi::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-value--select::part(form-control-label),:host ::ng-deep .st-cb-value--multi::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--select::part(tags),:host ::ng-deep .st-cb-value--multi::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-value--select::part(tag__base),:host ::ng-deep .st-cb-value--multi::part(tag__base){background:var(--nile-colors-white-base, #fff);border:1px solid var(--nile-colors-neutral-500, #c0c6c9);border-radius:var(--nile-radius-sm, 4px);padding:0 4px;font-size:11px;line-height:14px;min-height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionValueEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-condition-value-editor', standalone: true, imports: [CommonModule, FormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!hidden && field) {\n  @switch (field.valueEditor) {\n    @case ('text') {\n      <nile-input\n        class=\"st-cb-value st-cb-value--text\"\n        size=\"small\"\n        [value]=\"singleValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        (nile-input)=\"onTextInput($event)\">\n      </nile-input>\n    }\n    @case ('chip') {\n      <nile-chip\n        class=\"st-cb-value st-cb-value--chip\"\n        size=\"small\"\n        [acceptUserInput]=\"true\"\n        [addOnBlur]=\"true\"\n        [noWrap]=\"true\"\n        [value]=\"multiValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        (nile-chip-change)=\"onChipChange($event)\">\n      </nile-chip>\n    }\n    @case ('select') {\n      <nile-select\n        class=\"st-cb-chip st-cb-value st-cb-value--select\"\n        size=\"small\"\n        searchEnabled=\"true\"\n        [hoist]=\"true\"\n        [value]=\"singleValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        aria-label=\"Value\"\n        (nile-show)=\"onSelectShow($event)\"\n        (nile-hide)=\"onSelectAfterHide($event)\"\n        (nile-change)=\"onSelectChange($event)\">\n        @for (opt of field.options; track opt.value) {\n          <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n        }\n      </nile-select>\n    }\n    @case ('multi-select') {\n      <nile-select\n        class=\"st-cb-chip st-cb-value st-cb-value--multi\"\n        size=\"small\"\n        multiple\n        searchEnabled=\"true\"\n        [hoist]=\"true\"\n        [value]=\"multiValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        aria-label=\"Value\"\n        (nile-show)=\"onSelectShow($event)\"\n        (nile-hide)=\"onSelectAfterHide($event)\"\n        (nile-change)=\"onSelectChange($event)\">\n        <!--\n          Slot=\"custom-select\" REPLACES Nile's default tag display. We bypass\n          Nile's calculateTotalWidthOfTags() (which would otherwise reset\n          maxOptionsVisible on every value change \u2192 visible flicker) and render\n          our own \"first label + N more\" summary statically.\n        -->\n        <div slot=\"custom-select\"\n             class=\"st-cb-value--multi__display\"\n             [attr.tabindex]=\"disabled ? null : 0\"\n             role=\"combobox\"\n             aria-haspopup=\"listbox\"\n             [attr.aria-label]=\"placeholder\">\n          @if (multiValue.length === 0) {\n            <span class=\"st-cb-value--multi__placeholder\">{{ placeholder }}</span>\n          } @else {\n            <!--\n              Tooltip shows only the first selected value (the one rendered in\n              the trigger). Same pattern as the field picker's label tooltip.\n            -->\n            <nile-tooltip\n              class=\"st-cb-value--multi__tooltip\"\n              [content]=\"firstSelectedLabel\"\n              placement=\"top\"\n              [hoist]=\"true\">\n              <span class=\"st-cb-value--multi__label\">{{ firstSelectedLabel }}</span>\n            </nile-tooltip>\n            @if (overflowCount > 0) {\n              <span class=\"st-cb-value--multi__overflow\">+{{ overflowCount }} More</span>\n            }\n          }\n          <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-cb-value--multi__chevron\" aria-hidden=\"true\"></nile-icon>\n        </div>\n        @for (opt of field.options; track opt.value) {\n          <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n        }\n      </nile-select>\n    }\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host:has(nile-chip){display:flex!important;width:100%!important;min-width:0!important}:host ::ng-deep .st-cb-value--text{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--text::part(form-control),:host ::ng-deep .st-cb-value--text::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--text::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000)}:host ::ng-deep .st-cb-value--text::part(input){background:transparent;border:none;box-shadow:none;padding:0;height:auto;min-height:unset;font:inherit;color:inherit;line-height:12px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--text::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--chip{flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important;vertical-align:middle;--nile-height-26px: 20px;--nile-type-scale-3: 12px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar{height:2px;background:transparent}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .st-cb-value--chip::part(base){scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}:host ::ng-deep .st-cb-value--chip::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none!important;box-shadow:none;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px);height:28px;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px}:host ::ng-deep .st-cb-value--chip::part(input){padding:0;height:auto;min-height:unset;font:inherit;font-size:12px;line-height:12px}:host ::ng-deep .st-cb-value--chip::part(tag){height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__base){background:var(--nile-colors-white-base, #fff)!important;border:1px solid var(--nile-colors-neutral-500, #c0c6c9)!important;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px)!important;font-family:Colfax,system-ui,sans-serif!important;font-size:12px!important;line-height:12px!important;letter-spacing:.2px;height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__content){font:inherit}.st-cb-value--multi__display{display:inline-flex;align-items:center;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border-radius:4px!important;padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);height:28px;cursor:pointer;white-space:nowrap;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));overflow:hidden;box-sizing:border-box;outline:none}.st-cb-value--multi__display:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px}.st-cb-value--multi__placeholder{color:var(--nile-colors-dark-500, #636363);overflow:hidden;text-overflow:ellipsis}.st-cb-value--multi__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-cb-value--multi__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-cb-value--multi__overflow{flex:0 0 auto;color:var(--ng-colors-fg-brand-primary-600, #005ea6);font-weight:var(--ng-font-weight-medium)}.st-cb-value--multi__chevron{flex:0 0 auto;color:var(--nile-colors-dark-500, #636363)}:host ::ng-deep .st-cb-value--select,:host ::ng-deep .st-cb-value--multi{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--select::part(form-control),:host ::ng-deep .st-cb-value--select::part(form-control-input),:host ::ng-deep .st-cb-value--multi::part(form-control),:host ::ng-deep .st-cb-value--multi::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--select::part(combobox),:host ::ng-deep .st-cb-value--multi::part(combobox){background:var(--nile-colors-neutral-400, #e6e9eb);border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:100%;overflow:hidden;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);gap:var(--nile-spacing-md, 8px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--select::part(listbox),:host ::ng-deep .st-cb-value--multi::part(listbox){min-width:var(--st-cb-listbox-width, 240px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){color:inherit;font:inherit;letter-spacing:inherit;padding:0;height:auto;min-height:unset;line-height:12px;background:transparent;border:none;width:auto}:host ::ng-deep .st-cb-value--select::part(expand-icon),:host ::ng-deep .st-cb-value--multi::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-value--select::part(form-control-label),:host ::ng-deep .st-cb-value--multi::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--select::part(tags),:host ::ng-deep .st-cb-value--multi::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-value--select::part(tag__base),:host ::ng-deep .st-cb-value--multi::part(tag__base){background:var(--nile-colors-white-base, #fff);border:1px solid var(--nile-colors-neutral-500, #c0c6c9);border-radius:var(--nile-radius-sm, 4px);padding:0 4px;font-size:11px;line-height:14px;min-height:16px}\n"] }]
+            args: [{ selector: 'st-condition-value-editor', standalone: true, imports: [CommonModule, FormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!hidden && field) {\n  @switch (field.valueEditor) {\n    @case ('text') {\n      <nile-input\n        class=\"st-cb-value st-cb-value--text\"\n        size=\"small\"\n        [value]=\"singleValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        (nile-input)=\"onTextInput($event)\">\n      </nile-input>\n    }\n    @case ('chip') {\n      <nile-chip\n        class=\"st-cb-value st-cb-value--chip\"\n        size=\"small\"\n        [acceptUserInput]=\"true\"\n        [addOnBlur]=\"true\"\n        [noWrap]=\"true\"\n        [value]=\"multiValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        (nile-chip-change)=\"onChipChange($event)\">\n      </nile-chip>\n    }\n    @case ('select') {\n      <nile-select\n        class=\"st-cb-chip st-cb-value st-cb-value--select\"\n        size=\"small\"\n        [attr.searchEnabled]=\"searchEnabled ? 'true' : null\"\n        [disableLocalSearch]=\"serverSearch\"\n        [optionsLoading]=\"optionsLoading\"\n        [hoist]=\"true\"\n        [value]=\"singleValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        aria-label=\"Value\"\n        (nile-show)=\"onSelectShow($event)\"\n        (nile-hide)=\"onSelectAfterHide($event)\"\n        (nile-search)=\"onSelectSearch($event)\"\n        (nile-change)=\"onSelectChange($event)\">\n        @for (opt of displayOptions; track opt.value) {\n          <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n        }\n      </nile-select>\n    }\n    @case ('multi-select') {\n      <nile-select\n        class=\"st-cb-chip st-cb-value st-cb-value--multi\"\n        size=\"small\"\n        multiple\n        [attr.searchEnabled]=\"searchEnabled ? 'true' : null\"\n        [disableLocalSearch]=\"serverSearch\"\n        [optionsLoading]=\"optionsLoading\"\n        [hoist]=\"true\"\n        [value]=\"multiValue\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        [placeholder]=\"placeholder\"\n        aria-label=\"Value\"\n        (nile-show)=\"onSelectShow($event)\"\n        (nile-hide)=\"onSelectAfterHide($event)\"\n        (nile-search)=\"onSelectSearch($event)\"\n        (nile-change)=\"onSelectChange($event)\">\n        <!--\n          Slot=\"custom-select\" REPLACES Nile's default tag display. We bypass\n          Nile's calculateTotalWidthOfTags() (which would otherwise reset\n          maxOptionsVisible on every value change \u2192 visible flicker) and render\n          our own \"first label + N more\" summary statically.\n        -->\n        <div slot=\"custom-select\"\n             class=\"st-cb-value--multi__display\"\n             [attr.tabindex]=\"disabled ? null : 0\"\n             role=\"combobox\"\n             aria-haspopup=\"listbox\"\n             [attr.aria-label]=\"placeholder\">\n          @if (multiValue.length === 0) {\n            <span class=\"st-cb-value--multi__placeholder\">{{ placeholder }}</span>\n          } @else {\n            <!--\n              Tooltip shows only the first selected value (the one rendered in\n              the trigger). Same pattern as the field picker's label tooltip.\n            -->\n            <nile-tooltip\n              class=\"st-cb-value--multi__tooltip\"\n              [content]=\"firstSelectedLabel\"\n              placement=\"top\"\n              [hoist]=\"true\">\n              <span class=\"st-cb-value--multi__label\">{{ firstSelectedLabel }}</span>\n            </nile-tooltip>\n            @if (overflowCount > 0) {\n              <span class=\"st-cb-value--multi__overflow\">+{{ overflowCount }} More</span>\n            }\n          }\n          <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-cb-value--multi__chevron\" aria-hidden=\"true\"></nile-icon>\n        </div>\n        @for (opt of displayOptions; track opt.value) {\n          <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n        }\n      </nile-select>\n    }\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host:has(nile-chip){display:flex!important;width:100%!important;min-width:0!important}:host ::ng-deep .st-cb-value--text{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--text::part(form-control),:host ::ng-deep .st-cb-value--text::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--text::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000)}:host ::ng-deep .st-cb-value--text::part(input){background:transparent;border:none;box-shadow:none;padding:0;height:auto;min-height:unset;font:inherit;color:inherit;line-height:12px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--text::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--chip{flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important;vertical-align:middle;--nile-height-26px: 20px;--nile-type-scale-3: 12px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar{height:2px;background:transparent}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .st-cb-value--chip::part(base){scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}:host ::ng-deep .st-cb-value--chip::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none!important;box-shadow:none;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px);height:28px;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px}:host ::ng-deep .st-cb-value--chip::part(input){padding:0;height:auto;min-height:unset;font:inherit;font-size:12px;line-height:12px}:host ::ng-deep .st-cb-value--chip::part(tag){height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__base){background:var(--nile-colors-white-base, #fff)!important;border:1px solid var(--nile-colors-neutral-500, #c0c6c9)!important;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px)!important;font-family:Colfax,system-ui,sans-serif!important;font-size:12px!important;line-height:12px!important;letter-spacing:.2px;height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__content){font:inherit}.st-cb-value--multi__display{display:inline-flex;align-items:center;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border-radius:4px!important;padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);height:28px;cursor:pointer;white-space:nowrap;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));overflow:hidden;box-sizing:border-box;outline:none}.st-cb-value--multi__display:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px}.st-cb-value--multi__placeholder{color:var(--nile-colors-dark-500, #636363);overflow:hidden;text-overflow:ellipsis}.st-cb-value--multi__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-cb-value--multi__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-cb-value--multi__overflow{flex:0 0 auto;color:var(--ng-colors-fg-brand-primary-600, #005ea6);font-weight:var(--ng-font-weight-medium)}.st-cb-value--multi__chevron{flex:0 0 auto;color:var(--nile-colors-dark-500, #636363)}:host ::ng-deep .st-cb-value--select,:host ::ng-deep .st-cb-value--multi{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--select::part(form-control),:host ::ng-deep .st-cb-value--select::part(form-control-input),:host ::ng-deep .st-cb-value--multi::part(form-control),:host ::ng-deep .st-cb-value--multi::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--select::part(combobox),:host ::ng-deep .st-cb-value--multi::part(combobox){background:var(--nile-colors-neutral-400, #e6e9eb);border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:100%;overflow:hidden;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);gap:var(--nile-spacing-md, 8px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--select::part(listbox),:host ::ng-deep .st-cb-value--multi::part(listbox){min-width:var(--st-cb-listbox-width, 240px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){color:inherit;font:inherit;letter-spacing:inherit;padding:0;height:auto;min-height:unset;line-height:12px;background:transparent;border:none;width:auto}:host ::ng-deep .st-cb-value--select::part(expand-icon),:host ::ng-deep .st-cb-value--multi::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-value--select::part(form-control-label),:host ::ng-deep .st-cb-value--multi::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--select::part(tags),:host ::ng-deep .st-cb-value--multi::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-value--select::part(tag__base),:host ::ng-deep .st-cb-value--multi::part(tag__base){background:var(--nile-colors-white-base, #fff);border:1px solid var(--nile-colors-neutral-500, #c0c6c9);border-radius:var(--nile-radius-sm, 4px);padding:0 4px;font-size:11px;line-height:14px;min-height:16px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{
                 type: Input
             }], operator: [{