@aquera/ngx-smart-table 0.0.39 → 0.0.41

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:#f1f1f1;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:#f1f1f1;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:#f1f1f1;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;margin-left: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:#f1f1f1;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:#f1f1f1;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:#f1f1f1;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:#f1f1f1;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;margin-left: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:#f1f1f1;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: [{
@@ -12765,11 +12886,11 @@ class StConditionFieldPickerComponent {
         el?.hide?.();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionFieldPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionFieldPickerComponent, isStandalone: true, selector: "st-condition-field-picker", inputs: { value: "value", fields: "fields", categories: "categories", disabled: "disabled", placeholder: "placeholder" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }], ngImport: i0, template: "<nile-dropdown #dropdownRef placement=\"bottom-start\" distance=\"4\" [hoist]=\"true\">\n\n  <button slot=\"trigger\"\n          type=\"button\"\n          class=\"st-condition-field-picker__trigger\"\n          [class.is-placeholder]=\"!value\"\n          [attr.disabled]=\"disabled ? '' : null\"\n          aria-haspopup=\"menu\">\n    <nile-tooltip\n      class=\"st-condition-field-picker__tooltip\"\n      [content]=\"displayLabel\"\n      placement=\"top\"\n      [hoist]=\"true\">\n      <span class=\"st-condition-field-picker__label\">{{ displayLabel }}</span>\n    </nile-tooltip>\n    <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-condition-field-picker__chevron\" aria-hidden=\"true\"></nile-icon>\n  </button>\n\n  <nile-menu>\n\n    @for (f of fields; track trackByAttribute($index, f)) {\n      <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n        {{ f.screenName }}\n      </nile-menu-item>\n    }\n\n    @for (cat of categories; track trackByCategoryId($index, cat)) {\n      <nile-menu-item (click)=\"onCategoryItemClick($event)\"\n                      aria-haspopup=\"menu\"\n                      [attr.aria-label]=\"cat.label + ', opens submenu'\">\n        <nile-dropdown placement=\"right-end\" [hoist]=\"true\">\n          <span slot=\"trigger\" class=\"st-condition-field-picker__category-trigger\" role=\"button\">\n            {{ cat.label }}\n            <nile-icon name=\"arrowright\"\n                       size=\"14\"\n                       class=\"st-condition-field-picker__category-chevron\"\n                       aria-hidden=\"true\">\n            </nile-icon>\n          </span>\n          <nile-menu [attr.searchEnabled]=\"cat.searchable !== false ? 'true' : null\">\n            @for (f of cat.fields; track trackByAttribute($index, f)) {\n              <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n                {{ f.screenName }}\n              </nile-menu-item>\n            }\n          </nile-menu>\n        </nile-dropdown>\n      </nile-menu-item>\n    }\n\n  </nile-menu>\n\n</nile-dropdown>\n", styles: [":host{display:inline-block;width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px))}:host ::ng-deep nile-dropdown{display:block;width:100%}.st-condition-field-picker__trigger{display:inline-flex;align-items:center;justify-content:flex-start;text-align:left;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border:none;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:100%!important;box-sizing:border-box;overflow:hidden}.st-condition-field-picker__trigger.is-placeholder{color:var(--nile-colors-dark-500, #636363)}.st-condition-field-picker__trigger:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px}.st-condition-field-picker__trigger[disabled]{cursor:not-allowed;opacity:.5}.st-condition-field-picker__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-condition-field-picker__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-condition-field-picker__chevron{flex:0 0 14px}.st-condition-field-picker__chevron{color:var(--nile-colors-dark-500, #636363)}.st-condition-field-picker__category-trigger{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer}.st-condition-field-picker__category-chevron{color:var(--nile-colors-dark-500, #636363)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionFieldPickerComponent, isStandalone: true, selector: "st-condition-field-picker", inputs: { value: "value", fields: "fields", categories: "categories", disabled: "disabled", placeholder: "placeholder" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }], ngImport: i0, template: "<nile-dropdown #dropdownRef placement=\"bottom-start\" distance=\"4\" [hoist]=\"true\">\n\n  <button slot=\"trigger\"\n          type=\"button\"\n          class=\"st-condition-field-picker__trigger\"\n          [class.is-placeholder]=\"!value\"\n          [attr.disabled]=\"disabled ? '' : null\"\n          aria-haspopup=\"menu\">\n    <nile-tooltip\n      class=\"st-condition-field-picker__tooltip\"\n      [content]=\"displayLabel\"\n      placement=\"top\"\n      [hoist]=\"true\">\n      <span class=\"st-condition-field-picker__label\">{{ displayLabel }}</span>\n    </nile-tooltip>\n    <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-condition-field-picker__chevron\" aria-hidden=\"true\"></nile-icon>\n  </button>\n\n  <nile-menu>\n\n    @for (f of fields; track trackByAttribute($index, f)) {\n      <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n        {{ f.screenName }}\n      </nile-menu-item>\n    }\n\n    @for (cat of categories; track trackByCategoryId($index, cat)) {\n      <nile-menu-item (click)=\"onCategoryItemClick($event)\"\n                      aria-haspopup=\"menu\"\n                      [attr.aria-label]=\"cat.label + ', opens submenu'\">\n        <nile-dropdown placement=\"right-end\" [hoist]=\"true\">\n          <span slot=\"trigger\" class=\"st-condition-field-picker__category-trigger\" role=\"button\">\n            {{ cat.label }}\n            <nile-icon name=\"arrowright\"\n                       size=\"14\"\n                       class=\"st-condition-field-picker__category-chevron\"\n                       aria-hidden=\"true\">\n            </nile-icon>\n          </span>\n          <nile-menu [attr.searchEnabled]=\"cat.searchable !== false ? 'true' : null\">\n            @for (f of cat.fields; track trackByAttribute($index, f)) {\n              <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n                {{ f.screenName }}\n              </nile-menu-item>\n            }\n          </nile-menu>\n        </nile-dropdown>\n      </nile-menu-item>\n    }\n\n  </nile-menu>\n\n</nile-dropdown>\n", styles: [":host{display:inline-block;width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px))}:host ::ng-deep nile-dropdown{display:block;width:100%}.st-condition-field-picker__trigger{display:inline-flex;align-items:center;justify-content:flex-start;text-align:left;gap:var(--nile-spacing-md, 8px);background:#f1f1f1;border:none;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:100%!important;box-sizing:border-box;overflow:hidden}.st-condition-field-picker__trigger.is-placeholder{color:var(--nile-colors-dark-500, #636363)}.st-condition-field-picker__trigger:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px}.st-condition-field-picker__trigger[disabled]{cursor:not-allowed;opacity:.5}.st-condition-field-picker__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-condition-field-picker__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-condition-field-picker__chevron{flex:0 0 14px}.st-condition-field-picker__chevron{color:var(--nile-colors-dark-500, #636363)}.st-condition-field-picker__category-trigger{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer}.st-condition-field-picker__category-chevron{color:var(--nile-colors-dark-500, #636363)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionFieldPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-condition-field-picker', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nile-dropdown #dropdownRef placement=\"bottom-start\" distance=\"4\" [hoist]=\"true\">\n\n  <button slot=\"trigger\"\n          type=\"button\"\n          class=\"st-condition-field-picker__trigger\"\n          [class.is-placeholder]=\"!value\"\n          [attr.disabled]=\"disabled ? '' : null\"\n          aria-haspopup=\"menu\">\n    <nile-tooltip\n      class=\"st-condition-field-picker__tooltip\"\n      [content]=\"displayLabel\"\n      placement=\"top\"\n      [hoist]=\"true\">\n      <span class=\"st-condition-field-picker__label\">{{ displayLabel }}</span>\n    </nile-tooltip>\n    <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-condition-field-picker__chevron\" aria-hidden=\"true\"></nile-icon>\n  </button>\n\n  <nile-menu>\n\n    @for (f of fields; track trackByAttribute($index, f)) {\n      <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n        {{ f.screenName }}\n      </nile-menu-item>\n    }\n\n    @for (cat of categories; track trackByCategoryId($index, cat)) {\n      <nile-menu-item (click)=\"onCategoryItemClick($event)\"\n                      aria-haspopup=\"menu\"\n                      [attr.aria-label]=\"cat.label + ', opens submenu'\">\n        <nile-dropdown placement=\"right-end\" [hoist]=\"true\">\n          <span slot=\"trigger\" class=\"st-condition-field-picker__category-trigger\" role=\"button\">\n            {{ cat.label }}\n            <nile-icon name=\"arrowright\"\n                       size=\"14\"\n                       class=\"st-condition-field-picker__category-chevron\"\n                       aria-hidden=\"true\">\n            </nile-icon>\n          </span>\n          <nile-menu [attr.searchEnabled]=\"cat.searchable !== false ? 'true' : null\">\n            @for (f of cat.fields; track trackByAttribute($index, f)) {\n              <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n                {{ f.screenName }}\n              </nile-menu-item>\n            }\n          </nile-menu>\n        </nile-dropdown>\n      </nile-menu-item>\n    }\n\n  </nile-menu>\n\n</nile-dropdown>\n", styles: [":host{display:inline-block;width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px))}:host ::ng-deep nile-dropdown{display:block;width:100%}.st-condition-field-picker__trigger{display:inline-flex;align-items:center;justify-content:flex-start;text-align:left;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border:none;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:100%!important;box-sizing:border-box;overflow:hidden}.st-condition-field-picker__trigger.is-placeholder{color:var(--nile-colors-dark-500, #636363)}.st-condition-field-picker__trigger:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px}.st-condition-field-picker__trigger[disabled]{cursor:not-allowed;opacity:.5}.st-condition-field-picker__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-condition-field-picker__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-condition-field-picker__chevron{flex:0 0 14px}.st-condition-field-picker__chevron{color:var(--nile-colors-dark-500, #636363)}.st-condition-field-picker__category-trigger{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer}.st-condition-field-picker__category-chevron{color:var(--nile-colors-dark-500, #636363)}\n"] }]
+            args: [{ selector: 'st-condition-field-picker', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nile-dropdown #dropdownRef placement=\"bottom-start\" distance=\"4\" [hoist]=\"true\">\n\n  <button slot=\"trigger\"\n          type=\"button\"\n          class=\"st-condition-field-picker__trigger\"\n          [class.is-placeholder]=\"!value\"\n          [attr.disabled]=\"disabled ? '' : null\"\n          aria-haspopup=\"menu\">\n    <nile-tooltip\n      class=\"st-condition-field-picker__tooltip\"\n      [content]=\"displayLabel\"\n      placement=\"top\"\n      [hoist]=\"true\">\n      <span class=\"st-condition-field-picker__label\">{{ displayLabel }}</span>\n    </nile-tooltip>\n    <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-condition-field-picker__chevron\" aria-hidden=\"true\"></nile-icon>\n  </button>\n\n  <nile-menu>\n\n    @for (f of fields; track trackByAttribute($index, f)) {\n      <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n        {{ f.screenName }}\n      </nile-menu-item>\n    }\n\n    @for (cat of categories; track trackByCategoryId($index, cat)) {\n      <nile-menu-item (click)=\"onCategoryItemClick($event)\"\n                      aria-haspopup=\"menu\"\n                      [attr.aria-label]=\"cat.label + ', opens submenu'\">\n        <nile-dropdown placement=\"right-end\" [hoist]=\"true\">\n          <span slot=\"trigger\" class=\"st-condition-field-picker__category-trigger\" role=\"button\">\n            {{ cat.label }}\n            <nile-icon name=\"arrowright\"\n                       size=\"14\"\n                       class=\"st-condition-field-picker__category-chevron\"\n                       aria-hidden=\"true\">\n            </nile-icon>\n          </span>\n          <nile-menu [attr.searchEnabled]=\"cat.searchable !== false ? 'true' : null\">\n            @for (f of cat.fields; track trackByAttribute($index, f)) {\n              <nile-menu-item [value]=\"f.attribute\" (click)=\"onFieldSelect(f.attribute, $event)\">\n                {{ f.screenName }}\n              </nile-menu-item>\n            }\n          </nile-menu>\n        </nile-dropdown>\n      </nile-menu-item>\n    }\n\n  </nile-menu>\n\n</nile-dropdown>\n", styles: [":host{display:inline-block;width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-field-width, var(--st-cb-chip-width, 180px))}:host ::ng-deep nile-dropdown{display:block;width:100%}.st-condition-field-picker__trigger{display:inline-flex;align-items:center;justify-content:flex-start;text-align:left;gap:var(--nile-spacing-md, 8px);background:#f1f1f1;border:none;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:100%!important;box-sizing:border-box;overflow:hidden}.st-condition-field-picker__trigger.is-placeholder{color:var(--nile-colors-dark-500, #636363)}.st-condition-field-picker__trigger:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px}.st-condition-field-picker__trigger[disabled]{cursor:not-allowed;opacity:.5}.st-condition-field-picker__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-condition-field-picker__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-condition-field-picker__chevron{flex:0 0 14px}.st-condition-field-picker__chevron{color:var(--nile-colors-dark-500, #636363)}.st-condition-field-picker__category-trigger{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer}.st-condition-field-picker__category-chevron{color:var(--nile-colors-dark-500, #636363)}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], fields: [{
@@ -12807,6 +12928,12 @@ class StConditionRuleComponent {
          * sub-rules inside a group — v1's 1-level nesting forbids groups-in-groups).
          */
         this.canInsertGroup = false;
+        /**
+         * True when this rule is a sub-condition inside a group. Only then does the
+         * first row reserve the connector column (via a spacer) so the sub-conditions
+         * align. Top-level rows are left flush — parent-level layout is unchanged.
+         */
+        this.inGroup = false;
         this.ruleChange = new EventEmitter();
         this.remove = new EventEmitter();
         /** User asked to insert a fresh peer Condition directly below this row. */
@@ -12886,13 +13013,20 @@ class StConditionRuleComponent {
             this.remove.emit();
         }
     }
-    onInsertBelowClick() {
+    onInsertBelowClick(event) {
         if (this.disabled)
             return;
         // When the menu is enabled, the click opens the dropdown — the actual
         // emit happens from onAddMenuSelect. When disabled, fire directly.
         if (!this.canInsertGroup) {
             this.insertBelow.emit();
+            // A mouse click leaves the focus ring on the just-clicked "+", which keeps
+            // the row's hover actions visible. Drop focus so they hide until the next
+            // hover. `detail > 0` = pointer activation; keyboard (Enter/Space, detail 0)
+            // keeps focus for accessibility.
+            if (event && event.detail > 0) {
+                event.currentTarget?.blur();
+            }
         }
     }
     onAddMenuSelect(event) {
@@ -12917,11 +13051,11 @@ class StConditionRuleComponent {
         this.ruleChange.emit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionRuleComponent, isStandalone: true, selector: "st-condition-rule", inputs: { rule: "rule", config: "config", isFirst: "isFirst", canRemove: "canRemove", disabled: "disabled", canInsertGroup: "canInsertGroup" }, outputs: { ruleChange: "ruleChange", remove: "remove", insertBelow: "insertBelow", insertGroupBelow: "insertGroupBelow" }, ngImport: i0, template: "<div class=\"st-condition-rule\"\n     role=\"group\"\n     aria-label=\"Condition row\"\n     [class.is-first]=\"isFirst\">\n\n  <div class=\"st-condition-rule__main\">\n\n    @if (!isFirst) {\n      <nile-select\n        class=\"st-cb-chip st-cb-chip--connector\"\n        size=\"small\"\n        [hoist]=\"true\"\n        [value]=\"rule.connector\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        aria-label=\"Logical connector\"\n        (nile-change)=\"onConnectorChange($event)\">\n        @for (c of connectorOptions; track c) {\n          <nile-option [value]=\"c\">{{ c }}</nile-option>\n        }\n      </nile-select>\n    }\n\n    <st-condition-field-picker\n      [value]=\"rule.attribute\"\n      [fields]=\"config.fields\"\n      [categories]=\"config.categories ?? []\"\n      [disabled]=\"disabled\"\n      placeholder=\"Select criteria\"\n      (valueChange)=\"onAttributeChange($event)\">\n    </st-condition-field-picker>\n\n    <nile-select\n      class=\"st-cb-chip st-cb-chip--operator\"\n      size=\"small\"\n      [hoist]=\"true\"\n      [value]=\"rule.operator\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      placeholder=\"Equals to\"\n      aria-label=\"Operator\"\n      (nile-change)=\"onOperatorChange($event)\">\n      @for (op of availableOperators; track op.key) {\n        <nile-option [value]=\"op.key\">{{ op.label }}</nile-option>\n      }\n    </nile-select>\n\n    <st-condition-value-editor\n      class=\"st-condition-rule__value\"\n      [field]=\"field\"\n      [operator]=\"operator\"\n      [value]=\"rule.value\"\n      [disabled]=\"disabled\"\n      (valueChange)=\"onValueChange($event)\">\n    </st-condition-value-editor>\n\n  </div>\n\n  <div class=\"st-condition-rule__hover-actions\">\n    @if (canInsertGroup) {\n      <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n        <button slot=\"trigger\"\n                type=\"button\"\n                class=\"st-condition-rule__icon-button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                aria-label=\"Insert condition or group below\"\n                aria-haspopup=\"menu\">\n          <nile-icon name=\"plus\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n        </button>\n        <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n          <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n          <nile-menu-item value=\"group\">Group</nile-menu-item>\n        </nile-menu>\n      </nile-dropdown>\n    } @else {\n      <button type=\"button\"\n              class=\"st-condition-rule__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Insert condition below\"\n              (click)=\"onInsertBelowClick()\">\n        <nile-icon name=\"plus\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n    }\n    @if (canRemove) {\n      <button type=\"button\"\n              class=\"st-condition-rule__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Remove condition\"\n              (click)=\"onRemoveClick()\">\n        <nile-icon name=\"delete\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n    }\n  </div>\n\n</div>\n", styles: [":host{display:block}.st-condition-rule{display:flex;align-items:center;justify-content:space-between;gap:var(--nile-spacing-md, 8px);min-height:24px}.st-condition-rule__main{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--nile-spacing-lg, 12px);min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}.st-condition-rule__main::-webkit-scrollbar{height:2px;background:transparent}.st-condition-rule__main::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}.st-condition-rule__main::-webkit-scrollbar-track{background:transparent}.st-condition-rule__value{display:inline-flex;align-items:center;min-width:0}.st-condition-rule__value:has(nile-chip){display:flex!important;flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important}.st-condition-rule__hover-actions{display:inline-flex;align-items:center;gap:var(--nile-spacing-sm, 6px);flex:0 0 auto;opacity:0;transition:opacity 80ms ease-in}.st-condition-rule:hover .st-condition-rule__hover-actions,.st-condition-rule:focus-within .st-condition-rule__hover-actions{opacity:1}.st-condition-rule__icon-button{background:transparent;border:none;cursor:pointer;padding:var(--nile-spacing-xs, 4px);border-radius:var(--nile-radius-sm, 4px);color:var(--ng-colors-fg-brand-primary-600, #005ea6);display:inline-flex;align-items:center;justify-content:center;transition:background-color 80ms ease-in}.st-condition-rule__icon-button:hover:not([disabled]){background:var(--nile-colors-neutral-100, #fafafa)}.st-condition-rule__icon-button:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:-2px}.st-condition-rule__icon-button[disabled]{cursor:not-allowed;opacity:.4}:host ::ng-deep .st-cb-chip{display:inline-flex!important;width:auto!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-chip::part(form-control),:host ::ng-deep .st-cb-chip::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:auto;min-width:0;display:inline-flex}:host ::ng-deep .st-cb-chip::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:auto;min-width:0;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-chip::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-chip::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-chip::part(form-control-label){display:none}:host ::ng-deep .st-cb-chip::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-chip::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}:host ::ng-deep .st-cb-chip--connector::part(combobox){min-width:0;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:32px;min-width:0;text-align:left}:host ::ng-deep .st-cb-chip--operator{width:var(--st-cb-operator-width, var(--st-cb-chip-width, 180px))!important;max-width:var(--st-cb-operator-width, var(--st-cb-chip-width, 180px))}:host ::ng-deep .st-cb-chip--operator::part(combobox){width:100%;min-width:0;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--operator::part(display-input){width:100%;min-width:0;text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StConditionValueEditorComponent, selector: "st-condition-value-editor", inputs: ["field", "operator", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: StConditionFieldPickerComponent, selector: "st-condition-field-picker", inputs: ["value", "fields", "categories", "disabled", "placeholder"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionRuleComponent, isStandalone: true, selector: "st-condition-rule", inputs: { rule: "rule", config: "config", isFirst: "isFirst", canRemove: "canRemove", disabled: "disabled", canInsertGroup: "canInsertGroup", inGroup: "inGroup" }, outputs: { ruleChange: "ruleChange", remove: "remove", insertBelow: "insertBelow", insertGroupBelow: "insertGroupBelow" }, host: { properties: { "class.in-group": "this.inGroup" } }, ngImport: i0, template: "<div class=\"st-condition-rule\"\n     role=\"group\"\n     aria-label=\"Condition row\"\n     [class.is-first]=\"isFirst\">\n\n  <div class=\"st-condition-rule__main\">\n\n    @if (!isFirst) {\n      <nile-select\n        class=\"st-cb-chip st-cb-chip--connector\"\n        size=\"small\"\n        [hoist]=\"true\"\n        [value]=\"rule.connector\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        aria-label=\"Logical connector\"\n        (nile-change)=\"onConnectorChange($event)\">\n        @for (c of connectorOptions; track c) {\n          <nile-option [value]=\"c\">{{ c }}</nile-option>\n        }\n      </nile-select>\n    } @else if (inGroup) {\n      <!-- First sub-condition inside a group has no AND/OR connector. Reserve its\n           column width with a spacer so the field / operator / value columns stay\n           aligned with the connector-preceded sub-conditions below it. Top-level\n           first rows get no spacer \u2014 parent-level layout is left unchanged. -->\n      <span class=\"st-cb-connector-spacer\" aria-hidden=\"true\"></span>\n    }\n\n    <st-condition-field-picker\n      [value]=\"rule.attribute\"\n      [fields]=\"config.fields\"\n      [categories]=\"config.categories ?? []\"\n      [disabled]=\"disabled\"\n      placeholder=\"Select criteria\"\n      (valueChange)=\"onAttributeChange($event)\">\n    </st-condition-field-picker>\n\n    <nile-select\n      class=\"st-cb-chip st-cb-chip--operator\"\n      size=\"small\"\n      [hoist]=\"true\"\n      [value]=\"rule.operator\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      placeholder=\"Equals to\"\n      aria-label=\"Operator\"\n      (nile-change)=\"onOperatorChange($event)\">\n      @for (op of availableOperators; track op.key) {\n        <nile-option [value]=\"op.key\">{{ op.label }}</nile-option>\n      }\n    </nile-select>\n\n    <st-condition-value-editor\n      class=\"st-condition-rule__value\"\n      [field]=\"field\"\n      [operator]=\"operator\"\n      [value]=\"rule.value\"\n      [disabled]=\"disabled\"\n      (valueChange)=\"onValueChange($event)\">\n    </st-condition-value-editor>\n\n  </div>\n\n  <div class=\"st-condition-rule__hover-actions\">\n    @if (canInsertGroup) {\n      <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n        <button slot=\"trigger\"\n                type=\"button\"\n                class=\"st-condition-rule__icon-button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                aria-label=\"Insert condition or group below\"\n                aria-haspopup=\"menu\">\n          <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n        </button>\n        <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n          <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n          <nile-menu-item value=\"group\">Group</nile-menu-item>\n        </nile-menu>\n      </nile-dropdown>\n    } @else {\n      <button type=\"button\"\n              class=\"st-condition-rule__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Insert condition below\"\n              (click)=\"onInsertBelowClick($event)\">\n        <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n    }\n    @if (canRemove) {\n      <button type=\"button\"\n              class=\"st-condition-rule__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Remove condition\"\n              (click)=\"onRemoveClick()\">\n        <nile-icon name=\"delete\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n    }\n  </div>\n\n</div>\n", styles: [":host{display:block}:host(.in-group){--st-cb-connector-width: 60px}.st-condition-rule{display:flex;align-items:center;justify-content:space-between;gap:var(--nile-spacing-md, 8px);min-height:24px}.st-condition-rule__main{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--nile-spacing-lg, 12px);min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}.st-condition-rule__main::-webkit-scrollbar{height:2px;background:transparent}.st-condition-rule__main::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}.st-condition-rule__main::-webkit-scrollbar-track{background:transparent}.st-condition-rule .st-cb-connector-spacer{flex:0 0 auto;width:var(--st-cb-connector-width, 64px)}.st-condition-rule__value{display:inline-flex;align-items:center;min-width:0}.st-condition-rule__value:has(nile-chip){display:flex!important;flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important}.st-condition-rule__hover-actions{display:inline-flex;align-items:center;gap:var(--nile-spacing-sm, 6px);flex:0 0 auto;opacity:0;transition:opacity 80ms ease-in}.st-condition-rule:hover .st-condition-rule__hover-actions,.st-condition-rule__hover-actions:has(:focus-visible){opacity:1}.st-condition-rule__icon-button{background:transparent;border:none;cursor:pointer;padding:var(--nile-spacing-xs, 4px);border-radius:var(--nile-radius-sm, 4px);color:var(--ng-colors-fg-brand-primary-600, #005ea6);display:inline-flex;align-items:center;justify-content:center;transition:background-color 80ms ease-in}.st-condition-rule__icon-button:hover:not([disabled]){background:var(--nile-colors-neutral-100, #fafafa)}.st-condition-rule__icon-button:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:-2px}.st-condition-rule__icon-button[disabled]{cursor:not-allowed;opacity:.4}.st-condition-rule__icon-button:has(nile-icon[name=plus]){background:#e6eff6}.st-condition-rule__icon-button:has(nile-icon[name=plus]):hover:not([disabled]){background:#e6eff6}:host ::ng-deep .st-cb-chip{display:inline-flex!important;width:auto!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-chip::part(form-control),:host ::ng-deep .st-cb-chip::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:auto;min-width:0;display:inline-flex}:host ::ng-deep .st-cb-chip::part(combobox){background:#f1f1f1;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:auto;min-width:0;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-chip::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-chip::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-chip::part(form-control-label){display:none}:host ::ng-deep .st-cb-chip::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-chip::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}:host ::ng-deep .st-cb-chip--connector::part(combobox){min-width:0;gap:2px;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:30px;min-width:0;text-align:left}:host(.in-group) ::ng-deep .st-cb-chip--connector{width:var(--st-cb-connector-width)!important;max-width:var(--st-cb-connector-width)}:host(.in-group) ::ng-deep .st-cb-chip--connector::part(combobox){width:100%;gap:2px}:host(.in-group) ::ng-deep .st-cb-chip--connector::part(display-input){width:30px}:host ::ng-deep .st-cb-chip--operator{width:var(--st-cb-operator-width, var(--st-cb-chip-width, 180px))!important;max-width:var(--st-cb-operator-width, var(--st-cb-chip-width, 180px))}:host ::ng-deep .st-cb-chip--operator::part(combobox){width:100%;min-width:0;gap:2px;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--operator::part(display-input){width:100%;min-width:0;text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StConditionValueEditorComponent, selector: "st-condition-value-editor", inputs: ["field", "operator", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: StConditionFieldPickerComponent, selector: "st-condition-field-picker", inputs: ["value", "fields", "categories", "disabled", "placeholder"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionRuleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-condition-rule', standalone: true, imports: [CommonModule, StConditionValueEditorComponent, StConditionFieldPickerComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-condition-rule\"\n     role=\"group\"\n     aria-label=\"Condition row\"\n     [class.is-first]=\"isFirst\">\n\n  <div class=\"st-condition-rule__main\">\n\n    @if (!isFirst) {\n      <nile-select\n        class=\"st-cb-chip st-cb-chip--connector\"\n        size=\"small\"\n        [hoist]=\"true\"\n        [value]=\"rule.connector\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        aria-label=\"Logical connector\"\n        (nile-change)=\"onConnectorChange($event)\">\n        @for (c of connectorOptions; track c) {\n          <nile-option [value]=\"c\">{{ c }}</nile-option>\n        }\n      </nile-select>\n    }\n\n    <st-condition-field-picker\n      [value]=\"rule.attribute\"\n      [fields]=\"config.fields\"\n      [categories]=\"config.categories ?? []\"\n      [disabled]=\"disabled\"\n      placeholder=\"Select criteria\"\n      (valueChange)=\"onAttributeChange($event)\">\n    </st-condition-field-picker>\n\n    <nile-select\n      class=\"st-cb-chip st-cb-chip--operator\"\n      size=\"small\"\n      [hoist]=\"true\"\n      [value]=\"rule.operator\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      placeholder=\"Equals to\"\n      aria-label=\"Operator\"\n      (nile-change)=\"onOperatorChange($event)\">\n      @for (op of availableOperators; track op.key) {\n        <nile-option [value]=\"op.key\">{{ op.label }}</nile-option>\n      }\n    </nile-select>\n\n    <st-condition-value-editor\n      class=\"st-condition-rule__value\"\n      [field]=\"field\"\n      [operator]=\"operator\"\n      [value]=\"rule.value\"\n      [disabled]=\"disabled\"\n      (valueChange)=\"onValueChange($event)\">\n    </st-condition-value-editor>\n\n  </div>\n\n  <div class=\"st-condition-rule__hover-actions\">\n    @if (canInsertGroup) {\n      <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n        <button slot=\"trigger\"\n                type=\"button\"\n                class=\"st-condition-rule__icon-button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                aria-label=\"Insert condition or group below\"\n                aria-haspopup=\"menu\">\n          <nile-icon name=\"plus\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n        </button>\n        <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n          <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n          <nile-menu-item value=\"group\">Group</nile-menu-item>\n        </nile-menu>\n      </nile-dropdown>\n    } @else {\n      <button type=\"button\"\n              class=\"st-condition-rule__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Insert condition below\"\n              (click)=\"onInsertBelowClick()\">\n        <nile-icon name=\"plus\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n    }\n    @if (canRemove) {\n      <button type=\"button\"\n              class=\"st-condition-rule__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Remove condition\"\n              (click)=\"onRemoveClick()\">\n        <nile-icon name=\"delete\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n    }\n  </div>\n\n</div>\n", styles: [":host{display:block}.st-condition-rule{display:flex;align-items:center;justify-content:space-between;gap:var(--nile-spacing-md, 8px);min-height:24px}.st-condition-rule__main{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--nile-spacing-lg, 12px);min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}.st-condition-rule__main::-webkit-scrollbar{height:2px;background:transparent}.st-condition-rule__main::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}.st-condition-rule__main::-webkit-scrollbar-track{background:transparent}.st-condition-rule__value{display:inline-flex;align-items:center;min-width:0}.st-condition-rule__value:has(nile-chip){display:flex!important;flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important}.st-condition-rule__hover-actions{display:inline-flex;align-items:center;gap:var(--nile-spacing-sm, 6px);flex:0 0 auto;opacity:0;transition:opacity 80ms ease-in}.st-condition-rule:hover .st-condition-rule__hover-actions,.st-condition-rule:focus-within .st-condition-rule__hover-actions{opacity:1}.st-condition-rule__icon-button{background:transparent;border:none;cursor:pointer;padding:var(--nile-spacing-xs, 4px);border-radius:var(--nile-radius-sm, 4px);color:var(--ng-colors-fg-brand-primary-600, #005ea6);display:inline-flex;align-items:center;justify-content:center;transition:background-color 80ms ease-in}.st-condition-rule__icon-button:hover:not([disabled]){background:var(--nile-colors-neutral-100, #fafafa)}.st-condition-rule__icon-button:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:-2px}.st-condition-rule__icon-button[disabled]{cursor:not-allowed;opacity:.4}:host ::ng-deep .st-cb-chip{display:inline-flex!important;width:auto!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-chip::part(form-control),:host ::ng-deep .st-cb-chip::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:auto;min-width:0;display:inline-flex}:host ::ng-deep .st-cb-chip::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:auto;min-width:0;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-chip::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-chip::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-chip::part(form-control-label){display:none}:host ::ng-deep .st-cb-chip::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-chip::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}:host ::ng-deep .st-cb-chip--connector::part(combobox){min-width:0;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:32px;min-width:0;text-align:left}:host ::ng-deep .st-cb-chip--operator{width:var(--st-cb-operator-width, var(--st-cb-chip-width, 180px))!important;max-width:var(--st-cb-operator-width, var(--st-cb-chip-width, 180px))}:host ::ng-deep .st-cb-chip--operator::part(combobox){width:100%;min-width:0;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--operator::part(display-input){width:100%;min-width:0;text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"] }]
+            args: [{ selector: 'st-condition-rule', standalone: true, imports: [CommonModule, StConditionValueEditorComponent, StConditionFieldPickerComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-condition-rule\"\n     role=\"group\"\n     aria-label=\"Condition row\"\n     [class.is-first]=\"isFirst\">\n\n  <div class=\"st-condition-rule__main\">\n\n    @if (!isFirst) {\n      <nile-select\n        class=\"st-cb-chip st-cb-chip--connector\"\n        size=\"small\"\n        [hoist]=\"true\"\n        [value]=\"rule.connector\"\n        [attr.disabled]=\"disabled ? '' : null\"\n        aria-label=\"Logical connector\"\n        (nile-change)=\"onConnectorChange($event)\">\n        @for (c of connectorOptions; track c) {\n          <nile-option [value]=\"c\">{{ c }}</nile-option>\n        }\n      </nile-select>\n    } @else if (inGroup) {\n      <!-- First sub-condition inside a group has no AND/OR connector. Reserve its\n           column width with a spacer so the field / operator / value columns stay\n           aligned with the connector-preceded sub-conditions below it. Top-level\n           first rows get no spacer \u2014 parent-level layout is left unchanged. -->\n      <span class=\"st-cb-connector-spacer\" aria-hidden=\"true\"></span>\n    }\n\n    <st-condition-field-picker\n      [value]=\"rule.attribute\"\n      [fields]=\"config.fields\"\n      [categories]=\"config.categories ?? []\"\n      [disabled]=\"disabled\"\n      placeholder=\"Select criteria\"\n      (valueChange)=\"onAttributeChange($event)\">\n    </st-condition-field-picker>\n\n    <nile-select\n      class=\"st-cb-chip st-cb-chip--operator\"\n      size=\"small\"\n      [hoist]=\"true\"\n      [value]=\"rule.operator\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      placeholder=\"Equals to\"\n      aria-label=\"Operator\"\n      (nile-change)=\"onOperatorChange($event)\">\n      @for (op of availableOperators; track op.key) {\n        <nile-option [value]=\"op.key\">{{ op.label }}</nile-option>\n      }\n    </nile-select>\n\n    <st-condition-value-editor\n      class=\"st-condition-rule__value\"\n      [field]=\"field\"\n      [operator]=\"operator\"\n      [value]=\"rule.value\"\n      [disabled]=\"disabled\"\n      (valueChange)=\"onValueChange($event)\">\n    </st-condition-value-editor>\n\n  </div>\n\n  <div class=\"st-condition-rule__hover-actions\">\n    @if (canInsertGroup) {\n      <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n        <button slot=\"trigger\"\n                type=\"button\"\n                class=\"st-condition-rule__icon-button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                aria-label=\"Insert condition or group below\"\n                aria-haspopup=\"menu\">\n          <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n        </button>\n        <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n          <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n          <nile-menu-item value=\"group\">Group</nile-menu-item>\n        </nile-menu>\n      </nile-dropdown>\n    } @else {\n      <button type=\"button\"\n              class=\"st-condition-rule__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Insert condition below\"\n              (click)=\"onInsertBelowClick($event)\">\n        <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n    }\n    @if (canRemove) {\n      <button type=\"button\"\n              class=\"st-condition-rule__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Remove condition\"\n              (click)=\"onRemoveClick()\">\n        <nile-icon name=\"delete\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n    }\n  </div>\n\n</div>\n", styles: [":host{display:block}:host(.in-group){--st-cb-connector-width: 60px}.st-condition-rule{display:flex;align-items:center;justify-content:space-between;gap:var(--nile-spacing-md, 8px);min-height:24px}.st-condition-rule__main{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--nile-spacing-lg, 12px);min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}.st-condition-rule__main::-webkit-scrollbar{height:2px;background:transparent}.st-condition-rule__main::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}.st-condition-rule__main::-webkit-scrollbar-track{background:transparent}.st-condition-rule .st-cb-connector-spacer{flex:0 0 auto;width:var(--st-cb-connector-width, 64px)}.st-condition-rule__value{display:inline-flex;align-items:center;min-width:0}.st-condition-rule__value:has(nile-chip){display:flex!important;flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important}.st-condition-rule__hover-actions{display:inline-flex;align-items:center;gap:var(--nile-spacing-sm, 6px);flex:0 0 auto;opacity:0;transition:opacity 80ms ease-in}.st-condition-rule:hover .st-condition-rule__hover-actions,.st-condition-rule__hover-actions:has(:focus-visible){opacity:1}.st-condition-rule__icon-button{background:transparent;border:none;cursor:pointer;padding:var(--nile-spacing-xs, 4px);border-radius:var(--nile-radius-sm, 4px);color:var(--ng-colors-fg-brand-primary-600, #005ea6);display:inline-flex;align-items:center;justify-content:center;transition:background-color 80ms ease-in}.st-condition-rule__icon-button:hover:not([disabled]){background:var(--nile-colors-neutral-100, #fafafa)}.st-condition-rule__icon-button:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:-2px}.st-condition-rule__icon-button[disabled]{cursor:not-allowed;opacity:.4}.st-condition-rule__icon-button:has(nile-icon[name=plus]){background:#e6eff6}.st-condition-rule__icon-button:has(nile-icon[name=plus]):hover:not([disabled]){background:#e6eff6}:host ::ng-deep .st-cb-chip{display:inline-flex!important;width:auto!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-chip::part(form-control),:host ::ng-deep .st-cb-chip::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:auto;min-width:0;display:inline-flex}:host ::ng-deep .st-cb-chip::part(combobox){background:#f1f1f1;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:auto;min-width:0;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-chip::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-chip::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-chip::part(form-control-label){display:none}:host ::ng-deep .st-cb-chip::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-chip::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}:host ::ng-deep .st-cb-chip--connector::part(combobox){min-width:0;gap:2px;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:30px;min-width:0;text-align:left}:host(.in-group) ::ng-deep .st-cb-chip--connector{width:var(--st-cb-connector-width)!important;max-width:var(--st-cb-connector-width)}:host(.in-group) ::ng-deep .st-cb-chip--connector::part(combobox){width:100%;gap:2px}:host(.in-group) ::ng-deep .st-cb-chip--connector::part(display-input){width:30px}:host ::ng-deep .st-cb-chip--operator{width:var(--st-cb-operator-width, var(--st-cb-chip-width, 180px))!important;max-width:var(--st-cb-operator-width, var(--st-cb-chip-width, 180px))}:host ::ng-deep .st-cb-chip--operator::part(combobox){width:100%;min-width:0;gap:2px;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--operator::part(display-input){width:100%;min-width:0;text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"] }]
         }], propDecorators: { rule: [{
                 type: Input,
                 args: [{ required: true }]
@@ -12936,6 +13070,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], canInsertGroup: [{
                 type: Input
+            }], inGroup: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.in-group']
             }], ruleChange: [{
                 type: Output
             }], remove: [{
@@ -13051,11 +13190,11 @@ class StConditionGroupComponent {
         this.groupChange.emit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionGroupComponent, isStandalone: true, selector: "st-condition-group", inputs: { group: "group", config: "config", isFirst: "isFirst", canRemove: "canRemove", disabled: "disabled" }, outputs: { groupChange: "groupChange", remove: "remove", insertBelow: "insertBelow", insertGroupBelow: "insertGroupBelow" }, ngImport: i0, template: "<div class=\"st-condition-group-row\"\n     role=\"group\"\n     aria-label=\"Condition group\"\n     [class.is-first]=\"isFirst\">\n\n  @if (!isFirst) {\n    <nile-select\n      class=\"st-cb-chip st-cb-chip--connector st-condition-group-row__connector\"\n      size=\"small\"\n      [hoist]=\"true\"\n      [value]=\"group.connector\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      aria-label=\"Group connector\"\n      (nile-change)=\"onConnectorChange($event)\">\n      @for (c of connectorOptions; track c) {\n        <nile-option [value]=\"c\">{{ c }}</nile-option>\n      }\n    </nile-select>\n  }\n\n  <div class=\"st-condition-group\"\n       role=\"list\"\n       aria-label=\"Group conditions\">\n    @for (sub of group.subConditions; track trackBySubIndex($index); let i = $index) {\n      <st-condition-rule\n        [rule]=\"sub\"\n        [config]=\"config\"\n        [isFirst]=\"i === 0\"\n        [canRemove]=\"group.subConditions.length > 1\"\n        [canInsertGroup]=\"false\"\n        [disabled]=\"disabled\"\n        (ruleChange)=\"onSubConditionChange(i, $event)\"\n        (remove)=\"onSubConditionRemove(i)\"\n        (insertBelow)=\"onSubConditionInsertBelow(i)\">\n      </st-condition-rule>\n    }\n  </div>\n\n  <div class=\"st-condition-group-row__hover-actions\">\n    <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n      <button slot=\"trigger\"\n              type=\"button\"\n              class=\"st-condition-group-row__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Insert condition or group below\"\n              aria-haspopup=\"menu\">\n        <nile-icon name=\"plus\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n      <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n        <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n        <nile-menu-item value=\"group\">Group</nile-menu-item>\n      </nile-menu>\n    </nile-dropdown>\n    @if (canRemove) {\n      <button type=\"button\"\n              class=\"st-condition-group-row__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Remove group\"\n              (click)=\"onRemoveGroup()\">\n        <nile-icon name=\"delete\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n    }\n  </div>\n\n</div>\n", styles: [":host{display:block}.st-condition-group-row{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--nile-spacing-md, 8px);row-gap:var(--nile-spacing-md, 8px);min-height:24px;position:relative}.st-condition-group-row__connector{margin-top:4px}.st-condition-group-row__hover-actions{display:inline-flex;align-items:center;gap:var(--nile-spacing-sm, 6px);flex:0 0 auto;margin-left:auto;margin-top:4px;opacity:0;transition:opacity 80ms ease-in}.st-condition-group-row:hover .st-condition-group-row__hover-actions,.st-condition-group-row:focus-within .st-condition-group-row__hover-actions{opacity:1}.st-condition-group-row__icon-button{background:transparent;border:none;cursor:pointer;padding:var(--nile-spacing-xs, 4px);border-radius:var(--nile-radius-sm, 4px);color:var(--ng-colors-fg-brand-primary-600, #005ea6);display:inline-flex;align-items:center;justify-content:center;transition:background-color 80ms ease-in}.st-condition-group-row__icon-button:hover:not([disabled]){background:var(--nile-colors-neutral-100, #fafafa)}.st-condition-group-row__icon-button:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:-2px}.st-condition-group-row__icon-button[disabled]{cursor:not-allowed;opacity:.4}.st-condition-group{flex:1 1 240px;display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-100, #fafafa);border:1px solid var(--nile-colors-dark-100, #e6e6e6);border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-md, 8px);min-width:0;--st-cb-chip-width: var(--st-cb-chip-width-group, 140px)}:host ::ng-deep .st-cb-chip{display:inline-flex!important;width:auto!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-chip::part(form-control),:host ::ng-deep .st-cb-chip::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:auto;min-width:0;display:inline-flex}:host ::ng-deep .st-cb-chip::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:auto;min-width:0;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-chip::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-chip::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-chip::part(form-control-label){display:none}:host ::ng-deep .st-cb-chip--connector::part(combobox){min-width:0;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:32px;min-width:0;text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StConditionRuleComponent, selector: "st-condition-rule", inputs: ["rule", "config", "isFirst", "canRemove", "disabled", "canInsertGroup"], outputs: ["ruleChange", "remove", "insertBelow", "insertGroupBelow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionGroupComponent, isStandalone: true, selector: "st-condition-group", inputs: { group: "group", config: "config", isFirst: "isFirst", canRemove: "canRemove", disabled: "disabled" }, outputs: { groupChange: "groupChange", remove: "remove", insertBelow: "insertBelow", insertGroupBelow: "insertGroupBelow" }, ngImport: i0, template: "<div class=\"st-condition-group-row\"\n     role=\"group\"\n     aria-label=\"Condition group\"\n     [class.is-first]=\"isFirst\">\n\n  @if (!isFirst) {\n    <nile-select\n      class=\"st-cb-chip st-cb-chip--connector st-condition-group-row__connector\"\n      size=\"small\"\n      [hoist]=\"true\"\n      [value]=\"group.connector\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      aria-label=\"Group connector\"\n      (nile-change)=\"onConnectorChange($event)\">\n      @for (c of connectorOptions; track c) {\n        <nile-option [value]=\"c\">{{ c }}</nile-option>\n      }\n    </nile-select>\n  }\n\n  <div class=\"st-condition-group\"\n       role=\"list\"\n       aria-label=\"Group conditions\">\n    @for (sub of group.subConditions; track trackBySubIndex($index); let i = $index) {\n      <st-condition-rule\n        [rule]=\"sub\"\n        [config]=\"config\"\n        [isFirst]=\"i === 0\"\n        [inGroup]=\"true\"\n        [canRemove]=\"group.subConditions.length > 1\"\n        [canInsertGroup]=\"false\"\n        [disabled]=\"disabled\"\n        (ruleChange)=\"onSubConditionChange(i, $event)\"\n        (remove)=\"onSubConditionRemove(i)\"\n        (insertBelow)=\"onSubConditionInsertBelow(i)\">\n      </st-condition-rule>\n    }\n  </div>\n\n  <div class=\"st-condition-group-row__hover-actions\">\n    <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n      <button slot=\"trigger\"\n              type=\"button\"\n              class=\"st-condition-group-row__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Insert condition or group below\"\n              aria-haspopup=\"menu\">\n        <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n      <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n        <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n        <nile-menu-item value=\"group\">Group</nile-menu-item>\n      </nile-menu>\n    </nile-dropdown>\n    @if (canRemove) {\n      <button type=\"button\"\n              class=\"st-condition-group-row__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Remove group\"\n              (click)=\"onRemoveGroup()\">\n        <nile-icon name=\"delete\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n    }\n  </div>\n\n</div>\n", styles: [":host{display:block}.st-condition-group-row{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--nile-spacing-md, 8px);row-gap:var(--nile-spacing-md, 8px);min-height:24px;position:relative}.st-condition-group-row__connector{margin-top:4px}.st-condition-group-row__hover-actions{display:inline-flex;align-items:center;gap:var(--nile-spacing-sm, 6px);flex:0 0 auto;margin-left:auto;align-self:flex-end;margin-bottom:4px;opacity:0;transition:opacity 80ms ease-in}.st-condition-group-row:hover .st-condition-group-row__hover-actions,.st-condition-group-row__hover-actions:has(:focus-visible){opacity:1}.st-condition-group-row__icon-button{background:transparent;border:none;cursor:pointer;padding:var(--nile-spacing-xs, 4px);border-radius:var(--nile-radius-sm, 4px);color:var(--ng-colors-fg-brand-primary-600, #005ea6);display:inline-flex;align-items:center;justify-content:center;transition:background-color 80ms ease-in}.st-condition-group-row__icon-button:hover:not([disabled]){background:var(--nile-colors-neutral-100, #fafafa)}.st-condition-group-row__icon-button:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:-2px}.st-condition-group-row__icon-button[disabled]{cursor:not-allowed;opacity:.4}.st-condition-group-row__icon-button:has(nile-icon[name=plus]){background:#e6eff6}.st-condition-group-row__icon-button:has(nile-icon[name=plus]):hover:not([disabled]){background:#e6eff6}.st-condition-group{flex:1 1 240px;display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-100, #fafafa);border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-md, 8px);min-width:0;--st-cb-chip-width: var(--st-cb-chip-width-group, 140px)}:host ::ng-deep .st-cb-chip{display:inline-flex!important;width:auto!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-chip::part(form-control),:host ::ng-deep .st-cb-chip::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:auto;min-width:0;display:inline-flex}:host ::ng-deep .st-cb-chip::part(combobox){background:#f1f1f1;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:auto;min-width:0;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-chip::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-chip::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-chip::part(form-control-label){display:none}:host ::ng-deep .st-cb-chip--connector::part(combobox){min-width:0;gap:2px;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:30px;min-width:0;text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StConditionRuleComponent, selector: "st-condition-rule", inputs: ["rule", "config", "isFirst", "canRemove", "disabled", "canInsertGroup", "inGroup"], outputs: ["ruleChange", "remove", "insertBelow", "insertGroupBelow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-condition-group', standalone: true, imports: [CommonModule, StConditionRuleComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-condition-group-row\"\n     role=\"group\"\n     aria-label=\"Condition group\"\n     [class.is-first]=\"isFirst\">\n\n  @if (!isFirst) {\n    <nile-select\n      class=\"st-cb-chip st-cb-chip--connector st-condition-group-row__connector\"\n      size=\"small\"\n      [hoist]=\"true\"\n      [value]=\"group.connector\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      aria-label=\"Group connector\"\n      (nile-change)=\"onConnectorChange($event)\">\n      @for (c of connectorOptions; track c) {\n        <nile-option [value]=\"c\">{{ c }}</nile-option>\n      }\n    </nile-select>\n  }\n\n  <div class=\"st-condition-group\"\n       role=\"list\"\n       aria-label=\"Group conditions\">\n    @for (sub of group.subConditions; track trackBySubIndex($index); let i = $index) {\n      <st-condition-rule\n        [rule]=\"sub\"\n        [config]=\"config\"\n        [isFirst]=\"i === 0\"\n        [canRemove]=\"group.subConditions.length > 1\"\n        [canInsertGroup]=\"false\"\n        [disabled]=\"disabled\"\n        (ruleChange)=\"onSubConditionChange(i, $event)\"\n        (remove)=\"onSubConditionRemove(i)\"\n        (insertBelow)=\"onSubConditionInsertBelow(i)\">\n      </st-condition-rule>\n    }\n  </div>\n\n  <div class=\"st-condition-group-row__hover-actions\">\n    <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n      <button slot=\"trigger\"\n              type=\"button\"\n              class=\"st-condition-group-row__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Insert condition or group below\"\n              aria-haspopup=\"menu\">\n        <nile-icon name=\"plus\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n      <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n        <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n        <nile-menu-item value=\"group\">Group</nile-menu-item>\n      </nile-menu>\n    </nile-dropdown>\n    @if (canRemove) {\n      <button type=\"button\"\n              class=\"st-condition-group-row__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Remove group\"\n              (click)=\"onRemoveGroup()\">\n        <nile-icon name=\"delete\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n    }\n  </div>\n\n</div>\n", styles: [":host{display:block}.st-condition-group-row{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--nile-spacing-md, 8px);row-gap:var(--nile-spacing-md, 8px);min-height:24px;position:relative}.st-condition-group-row__connector{margin-top:4px}.st-condition-group-row__hover-actions{display:inline-flex;align-items:center;gap:var(--nile-spacing-sm, 6px);flex:0 0 auto;margin-left:auto;margin-top:4px;opacity:0;transition:opacity 80ms ease-in}.st-condition-group-row:hover .st-condition-group-row__hover-actions,.st-condition-group-row:focus-within .st-condition-group-row__hover-actions{opacity:1}.st-condition-group-row__icon-button{background:transparent;border:none;cursor:pointer;padding:var(--nile-spacing-xs, 4px);border-radius:var(--nile-radius-sm, 4px);color:var(--ng-colors-fg-brand-primary-600, #005ea6);display:inline-flex;align-items:center;justify-content:center;transition:background-color 80ms ease-in}.st-condition-group-row__icon-button:hover:not([disabled]){background:var(--nile-colors-neutral-100, #fafafa)}.st-condition-group-row__icon-button:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:-2px}.st-condition-group-row__icon-button[disabled]{cursor:not-allowed;opacity:.4}.st-condition-group{flex:1 1 240px;display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-100, #fafafa);border:1px solid var(--nile-colors-dark-100, #e6e6e6);border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-md, 8px);min-width:0;--st-cb-chip-width: var(--st-cb-chip-width-group, 140px)}:host ::ng-deep .st-cb-chip{display:inline-flex!important;width:auto!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-chip::part(form-control),:host ::ng-deep .st-cb-chip::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:auto;min-width:0;display:inline-flex}:host ::ng-deep .st-cb-chip::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:auto;min-width:0;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-chip::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-chip::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-chip::part(form-control-label){display:none}:host ::ng-deep .st-cb-chip--connector::part(combobox){min-width:0;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:32px;min-width:0;text-align:left}\n"] }]
+            args: [{ selector: 'st-condition-group', standalone: true, imports: [CommonModule, StConditionRuleComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-condition-group-row\"\n     role=\"group\"\n     aria-label=\"Condition group\"\n     [class.is-first]=\"isFirst\">\n\n  @if (!isFirst) {\n    <nile-select\n      class=\"st-cb-chip st-cb-chip--connector st-condition-group-row__connector\"\n      size=\"small\"\n      [hoist]=\"true\"\n      [value]=\"group.connector\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      aria-label=\"Group connector\"\n      (nile-change)=\"onConnectorChange($event)\">\n      @for (c of connectorOptions; track c) {\n        <nile-option [value]=\"c\">{{ c }}</nile-option>\n      }\n    </nile-select>\n  }\n\n  <div class=\"st-condition-group\"\n       role=\"list\"\n       aria-label=\"Group conditions\">\n    @for (sub of group.subConditions; track trackBySubIndex($index); let i = $index) {\n      <st-condition-rule\n        [rule]=\"sub\"\n        [config]=\"config\"\n        [isFirst]=\"i === 0\"\n        [inGroup]=\"true\"\n        [canRemove]=\"group.subConditions.length > 1\"\n        [canInsertGroup]=\"false\"\n        [disabled]=\"disabled\"\n        (ruleChange)=\"onSubConditionChange(i, $event)\"\n        (remove)=\"onSubConditionRemove(i)\"\n        (insertBelow)=\"onSubConditionInsertBelow(i)\">\n      </st-condition-rule>\n    }\n  </div>\n\n  <div class=\"st-condition-group-row__hover-actions\">\n    <nile-dropdown placement=\"bottom-end\" distance=\"4\">\n      <button slot=\"trigger\"\n              type=\"button\"\n              class=\"st-condition-group-row__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Insert condition or group below\"\n              aria-haspopup=\"menu\">\n        <nile-icon name=\"plus\" color=\"#005EA6\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n      <nile-menu (nile-select)=\"onAddMenuSelect($event)\">\n        <nile-menu-item value=\"condition\">Condition</nile-menu-item>\n        <nile-menu-item value=\"group\">Group</nile-menu-item>\n      </nile-menu>\n    </nile-dropdown>\n    @if (canRemove) {\n      <button type=\"button\"\n              class=\"st-condition-group-row__icon-button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              aria-label=\"Remove group\"\n              (click)=\"onRemoveGroup()\">\n        <nile-icon name=\"delete\" size=\"14\" aria-hidden=\"true\"></nile-icon>\n      </button>\n    }\n  </div>\n\n</div>\n", styles: [":host{display:block}.st-condition-group-row{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--nile-spacing-md, 8px);row-gap:var(--nile-spacing-md, 8px);min-height:24px;position:relative}.st-condition-group-row__connector{margin-top:4px}.st-condition-group-row__hover-actions{display:inline-flex;align-items:center;gap:var(--nile-spacing-sm, 6px);flex:0 0 auto;margin-left:auto;align-self:flex-end;margin-bottom:4px;opacity:0;transition:opacity 80ms ease-in}.st-condition-group-row:hover .st-condition-group-row__hover-actions,.st-condition-group-row__hover-actions:has(:focus-visible){opacity:1}.st-condition-group-row__icon-button{background:transparent;border:none;cursor:pointer;padding:var(--nile-spacing-xs, 4px);border-radius:var(--nile-radius-sm, 4px);color:var(--ng-colors-fg-brand-primary-600, #005ea6);display:inline-flex;align-items:center;justify-content:center;transition:background-color 80ms ease-in}.st-condition-group-row__icon-button:hover:not([disabled]){background:var(--nile-colors-neutral-100, #fafafa)}.st-condition-group-row__icon-button:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:-2px}.st-condition-group-row__icon-button[disabled]{cursor:not-allowed;opacity:.4}.st-condition-group-row__icon-button:has(nile-icon[name=plus]){background:#e6eff6}.st-condition-group-row__icon-button:has(nile-icon[name=plus]):hover:not([disabled]){background:#e6eff6}.st-condition-group{flex:1 1 240px;display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-100, #fafafa);border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-md, 8px);min-width:0;--st-cb-chip-width: var(--st-cb-chip-width-group, 140px)}:host ::ng-deep .st-cb-chip{display:inline-flex!important;width:auto!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-chip::part(form-control),:host ::ng-deep .st-cb-chip::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:auto;min-width:0;display:inline-flex}:host ::ng-deep .st-cb-chip::part(combobox){background:#f1f1f1;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:auto;min-width:0;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-chip::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-chip::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-chip::part(form-control-label){display:none}:host ::ng-deep .st-cb-chip--connector::part(combobox){min-width:0;gap:2px;padding-right:var(--nile-spacing-xs, 4px)}:host ::ng-deep .st-cb-chip--connector::part(display-input){width:30px;min-width:0;text-align:left}\n"] }]
         }], propDecorators: { group: [{
                 type: Input,
                 args: [{ required: true }]
@@ -13435,11 +13574,11 @@ class StConditionBuilderComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionBuilderComponent, isStandalone: true, selector: "st-condition-builder", inputs: { config: "config", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", validityChange: "validityChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"st-condition-builder\" role=\"region\" aria-label=\"Condition builder\">\n\n  @if (internalValue.mode === 'builder') {\n\n    <div class=\"st-condition-builder__list\"\n         role=\"list\"\n         aria-label=\"Conditions\">\n      @for (node of internalValue.conditions; track trackByIndex($index); let i = $index; let last = $last) {\n        <div class=\"st-condition-builder__row\"\n             role=\"listitem\"\n             [class.is-last]=\"last\"\n             [attr.aria-label]=\"ariaLabelForNode(node, i)\">\n          @if (isSingle(node)) {\n            <st-condition-rule\n              [rule]=\"node\"\n              [config]=\"config\"\n              [isFirst]=\"i === 0\"\n              [canRemove]=\"internalValue.conditions.length > 1\"\n              [canInsertGroup]=\"allowGroups\"\n              [disabled]=\"disabled\"\n              (ruleChange)=\"onSingleChange(i, $event)\"\n              (remove)=\"onRemoveCondition(i)\"\n              (insertBelow)=\"onInsertBelow(i)\"\n              (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n            </st-condition-rule>\n          } @else if (isGroup(node)) {\n            <st-condition-group\n              [group]=\"node\"\n              [config]=\"config\"\n              [isFirst]=\"i === 0\"\n              [canRemove]=\"true\"\n              [disabled]=\"disabled\"\n              (groupChange)=\"onGroupChange(i, $event)\"\n              (remove)=\"onRemoveCondition(i)\"\n              (insertBelow)=\"onInsertBelow(i)\"\n              (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n            </st-condition-group>\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"st-condition-builder__footer\">\n      <div class=\"st-condition-builder__footer-left\">\n        <button type=\"button\"\n                class=\"st-condition-builder__link\"\n                [attr.disabled]=\"canAddCondition ? null : ''\"\n                [attr.aria-disabled]=\"!canAddCondition\"\n                (click)=\"onAddCondition()\">\n          Add condition\n        </button>\n        @if (allowGroups) {\n          <button type=\"button\"\n                  class=\"st-condition-builder__link\"\n                  [attr.disabled]=\"canAddCondition ? null : ''\"\n                  [attr.aria-disabled]=\"!canAddCondition\"\n                  (click)=\"onAddGroup()\">\n            Add condition group\n          </button>\n        }\n      </div>\n      @if (allowExpressionMode) {\n        <button type=\"button\"\n                class=\"st-condition-builder__link st-condition-builder__link--right\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.aria-pressed]=\"false\"\n                (click)=\"onToggleMode()\">\n          {{ expressionToggleLabel }}\n        </button>\n      }\n    </div>\n\n  } @else {\n\n    <div class=\"st-condition-builder__expression\">\n      <label class=\"sr-only\" for=\"st-condition-builder-expression-input\">\n        Expression\n      </label>\n      <nile-code-editor\n        id=\"st-condition-builder-expression-input\"\n        class=\"st-condition-builder__expression-input\"\n        aria-label=\"Rule expression\"\n        placeholder=\"Enter expression\"\n        [language]=\"expressionLanguage\"\n        [multiline]=\"true\"\n        [lineNumbers]=\"true\"\n        [lineNumbersMultiline]=\"true\"\n        [expandable]=\"false\"\n        [disabled]=\"disabled\"\n        [value]=\"internalValue.expression\"\n        [customAutoCompletions]=\"expressionAutoCompletions\"\n        [customCompletionsPaths]=\"expressionAutoCompletionPaths\"\n        (nile-change)=\"onExpressionInput($event)\">\n      </nile-code-editor>\n      @if (allowExpressionMode) {\n        <div class=\"st-condition-builder__footer\">\n          <div class=\"st-condition-builder__footer-left\"></div>\n          <button type=\"button\"\n                  class=\"st-condition-builder__link st-condition-builder__link--right\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.aria-pressed]=\"true\"\n                  (click)=\"onToggleMode()\">\n            {{ expressionToggleLabel }}\n          </button>\n        </div>\n      }\n    </div>\n\n  }\n\n  <!-- Screen-reader announcements for validation state. Visually hidden;\n       aria-live=\"polite\" so it doesn't interrupt other speech. -->\n  <div class=\"sr-only\"\n       role=\"status\"\n       aria-live=\"polite\"\n       aria-atomic=\"true\">\n    {{ validityAnnouncement }}\n  </div>\n\n</div>\n", styles: [":host{display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.st-condition-builder{display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);padding-top:var(--nile-spacing-xl, 16px);padding-bottom:var(--nile-spacing-md, 8px);border:1px solid var(--nile-colors-dark-100, #e6e6e6);border-top:0;border-bottom-left-radius:var(--nile-radius-sm, 4px);border-bottom-right-radius:var(--nile-radius-sm, 4px);background:var(--nile-colors-white-base, #fff);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__header{padding:0 var(--nile-spacing-xl, 16px);color:var(--nile-colors-dark-500, #636363);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__list{display:flex;flex-direction:column}.st-condition-builder__row{padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px);border-bottom:1px solid var(--nile-colors-dark-100, #e6e6e6)}.st-condition-builder__row.is-last{border-bottom:none}.st-condition-builder__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--nile-spacing-md, 8px);padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px) 0;border-top:1px solid var(--nile-colors-dark-100, #e6e6e6);font:400 14px/14px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__footer-left{display:flex;align-items:center;gap:10px}.st-condition-builder__link{background:transparent;border:none;padding:2px 4px;cursor:pointer;color:var(--ng-colors-fg-brand-primary-600, #005ea6);font:inherit;text-align:right;border-radius:var(--nile-radius-sm, 4px)}.st-condition-builder__link:hover:not([disabled]){text-decoration:underline}.st-condition-builder__link:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px;text-decoration:underline}.st-condition-builder__link[disabled]{cursor:not-allowed;opacity:.5}.st-condition-builder__link--right{margin-left:auto}.st-condition-builder__expression{display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);padding:0 var(--nile-spacing-xl, 16px)}.st-condition-builder__expression-input{display:block;width:100%;min-height:160px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: StConditionRuleComponent, selector: "st-condition-rule", inputs: ["rule", "config", "isFirst", "canRemove", "disabled", "canInsertGroup"], outputs: ["ruleChange", "remove", "insertBelow", "insertGroupBelow"] }, { kind: "component", type: StConditionGroupComponent, selector: "st-condition-group", inputs: ["group", "config", "isFirst", "canRemove", "disabled"], outputs: ["groupChange", "remove", "insertBelow", "insertGroupBelow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionBuilderComponent, isStandalone: true, selector: "st-condition-builder", inputs: { config: "config", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", validityChange: "validityChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"st-condition-builder\" role=\"region\" aria-label=\"Condition builder\">\n\n  @if (internalValue.mode === 'builder') {\n\n    <div class=\"st-condition-builder__list\"\n         role=\"list\"\n         aria-label=\"Conditions\">\n      @for (node of internalValue.conditions; track trackByIndex($index); let i = $index; let last = $last) {\n        <div class=\"st-condition-builder__row\"\n             role=\"listitem\"\n             [class.is-last]=\"last\"\n             [attr.aria-label]=\"ariaLabelForNode(node, i)\">\n          @if (isSingle(node)) {\n            <st-condition-rule\n              [rule]=\"node\"\n              [config]=\"config\"\n              [isFirst]=\"i === 0\"\n              [canRemove]=\"internalValue.conditions.length > 1\"\n              [canInsertGroup]=\"allowGroups\"\n              [disabled]=\"disabled\"\n              (ruleChange)=\"onSingleChange(i, $event)\"\n              (remove)=\"onRemoveCondition(i)\"\n              (insertBelow)=\"onInsertBelow(i)\"\n              (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n            </st-condition-rule>\n          } @else if (isGroup(node)) {\n            <st-condition-group\n              [group]=\"node\"\n              [config]=\"config\"\n              [isFirst]=\"i === 0\"\n              [canRemove]=\"true\"\n              [disabled]=\"disabled\"\n              (groupChange)=\"onGroupChange(i, $event)\"\n              (remove)=\"onRemoveCondition(i)\"\n              (insertBelow)=\"onInsertBelow(i)\"\n              (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n            </st-condition-group>\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"st-condition-builder__footer\">\n      <div class=\"st-condition-builder__footer-left\">\n        <button type=\"button\"\n                class=\"st-condition-builder__link\"\n                [attr.disabled]=\"canAddCondition ? null : ''\"\n                [attr.aria-disabled]=\"!canAddCondition\"\n                (click)=\"onAddCondition()\">\n          Add condition\n        </button>\n        @if (allowGroups) {\n          <button type=\"button\"\n                  class=\"st-condition-builder__link\"\n                  [attr.disabled]=\"canAddCondition ? null : ''\"\n                  [attr.aria-disabled]=\"!canAddCondition\"\n                  (click)=\"onAddGroup()\">\n            Add condition group\n          </button>\n        }\n      </div>\n      @if (allowExpressionMode) {\n        <button type=\"button\"\n                class=\"st-condition-builder__link st-condition-builder__link--right\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.aria-pressed]=\"false\"\n                (click)=\"onToggleMode()\">\n          {{ expressionToggleLabel }}\n        </button>\n      }\n    </div>\n\n  } @else {\n\n    <div class=\"st-condition-builder__expression\">\n      <label class=\"sr-only\" for=\"st-condition-builder-expression-input\">\n        Expression\n      </label>\n      <nile-code-editor\n        id=\"st-condition-builder-expression-input\"\n        class=\"st-condition-builder__expression-input\"\n        aria-label=\"Rule expression\"\n        placeholder=\"Enter expression\"\n        [language]=\"expressionLanguage\"\n        [multiline]=\"true\"\n        [lineNumbers]=\"true\"\n        [lineNumbersMultiline]=\"true\"\n        [expandable]=\"false\"\n        [disabled]=\"disabled\"\n        [value]=\"internalValue.expression\"\n        [customAutoCompletions]=\"expressionAutoCompletions\"\n        [customCompletionsPaths]=\"expressionAutoCompletionPaths\"\n        (nile-change)=\"onExpressionInput($event)\">\n      </nile-code-editor>\n      @if (allowExpressionMode) {\n        <div class=\"st-condition-builder__footer\">\n          <div class=\"st-condition-builder__footer-left\"></div>\n          <button type=\"button\"\n                  class=\"st-condition-builder__link st-condition-builder__link--right\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.aria-pressed]=\"true\"\n                  (click)=\"onToggleMode()\">\n            {{ expressionToggleLabel }}\n          </button>\n        </div>\n      }\n    </div>\n\n  }\n\n  <!-- Screen-reader announcements for validation state. Visually hidden;\n       aria-live=\"polite\" so it doesn't interrupt other speech. -->\n  <div class=\"sr-only\"\n       role=\"status\"\n       aria-live=\"polite\"\n       aria-atomic=\"true\">\n    {{ validityAnnouncement }}\n  </div>\n\n</div>\n", styles: [":host{display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.st-condition-builder{display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);padding-top:var(--nile-spacing-xl, 16px);padding-bottom:var(--nile-spacing-md, 8px);border:1px solid var(--nile-colors-dark-100, #e6e6e6);border-top:0;border-bottom-left-radius:var(--nile-radius-sm, 4px);border-bottom-right-radius:var(--nile-radius-sm, 4px);background:var(--nile-colors-white-base, #fff);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__header{padding:0 var(--nile-spacing-xl, 16px);color:var(--nile-colors-dark-500, #636363);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__list{display:flex;flex-direction:column}.st-condition-builder__row{padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px);border-bottom:1px solid #f5f7f7}.st-condition-builder__row.is-last{border-bottom:none}.st-condition-builder__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--nile-spacing-md, 8px);padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px) 0;border-top:1px solid var(--nile-colors-dark-100, #e6e6e6);font:400 14px/14px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__footer-left{display:flex;align-items:center;gap:10px}.st-condition-builder__link{background:transparent;border:none;padding:2px 4px;cursor:pointer;color:var(--ng-colors-fg-brand-primary-600, #005ea6);font:inherit;text-align:right;border-radius:var(--nile-radius-sm, 4px)}.st-condition-builder__link:hover:not([disabled]){text-decoration:underline}.st-condition-builder__link:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px;text-decoration:underline}.st-condition-builder__link[disabled]{cursor:not-allowed;opacity:.5}.st-condition-builder__link--right{margin-left:auto}.st-condition-builder__expression{display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);padding:0 var(--nile-spacing-xl, 16px)}.st-condition-builder__expression-input{display:flex;flex-direction:column;width:100%;min-height:160px}::ng-deep .st-condition-builder__expression-input::part(code-editor-base){flex:1;min-height:160px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: StConditionRuleComponent, selector: "st-condition-rule", inputs: ["rule", "config", "isFirst", "canRemove", "disabled", "canInsertGroup", "inGroup"], outputs: ["ruleChange", "remove", "insertBelow", "insertGroupBelow"] }, { kind: "component", type: StConditionGroupComponent, selector: "st-condition-group", inputs: ["group", "config", "isFirst", "canRemove", "disabled"], outputs: ["groupChange", "remove", "insertBelow", "insertGroupBelow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-condition-builder', standalone: true, imports: [CommonModule, FormsModule, StConditionRuleComponent, StConditionGroupComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-condition-builder\" role=\"region\" aria-label=\"Condition builder\">\n\n  @if (internalValue.mode === 'builder') {\n\n    <div class=\"st-condition-builder__list\"\n         role=\"list\"\n         aria-label=\"Conditions\">\n      @for (node of internalValue.conditions; track trackByIndex($index); let i = $index; let last = $last) {\n        <div class=\"st-condition-builder__row\"\n             role=\"listitem\"\n             [class.is-last]=\"last\"\n             [attr.aria-label]=\"ariaLabelForNode(node, i)\">\n          @if (isSingle(node)) {\n            <st-condition-rule\n              [rule]=\"node\"\n              [config]=\"config\"\n              [isFirst]=\"i === 0\"\n              [canRemove]=\"internalValue.conditions.length > 1\"\n              [canInsertGroup]=\"allowGroups\"\n              [disabled]=\"disabled\"\n              (ruleChange)=\"onSingleChange(i, $event)\"\n              (remove)=\"onRemoveCondition(i)\"\n              (insertBelow)=\"onInsertBelow(i)\"\n              (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n            </st-condition-rule>\n          } @else if (isGroup(node)) {\n            <st-condition-group\n              [group]=\"node\"\n              [config]=\"config\"\n              [isFirst]=\"i === 0\"\n              [canRemove]=\"true\"\n              [disabled]=\"disabled\"\n              (groupChange)=\"onGroupChange(i, $event)\"\n              (remove)=\"onRemoveCondition(i)\"\n              (insertBelow)=\"onInsertBelow(i)\"\n              (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n            </st-condition-group>\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"st-condition-builder__footer\">\n      <div class=\"st-condition-builder__footer-left\">\n        <button type=\"button\"\n                class=\"st-condition-builder__link\"\n                [attr.disabled]=\"canAddCondition ? null : ''\"\n                [attr.aria-disabled]=\"!canAddCondition\"\n                (click)=\"onAddCondition()\">\n          Add condition\n        </button>\n        @if (allowGroups) {\n          <button type=\"button\"\n                  class=\"st-condition-builder__link\"\n                  [attr.disabled]=\"canAddCondition ? null : ''\"\n                  [attr.aria-disabled]=\"!canAddCondition\"\n                  (click)=\"onAddGroup()\">\n            Add condition group\n          </button>\n        }\n      </div>\n      @if (allowExpressionMode) {\n        <button type=\"button\"\n                class=\"st-condition-builder__link st-condition-builder__link--right\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.aria-pressed]=\"false\"\n                (click)=\"onToggleMode()\">\n          {{ expressionToggleLabel }}\n        </button>\n      }\n    </div>\n\n  } @else {\n\n    <div class=\"st-condition-builder__expression\">\n      <label class=\"sr-only\" for=\"st-condition-builder-expression-input\">\n        Expression\n      </label>\n      <nile-code-editor\n        id=\"st-condition-builder-expression-input\"\n        class=\"st-condition-builder__expression-input\"\n        aria-label=\"Rule expression\"\n        placeholder=\"Enter expression\"\n        [language]=\"expressionLanguage\"\n        [multiline]=\"true\"\n        [lineNumbers]=\"true\"\n        [lineNumbersMultiline]=\"true\"\n        [expandable]=\"false\"\n        [disabled]=\"disabled\"\n        [value]=\"internalValue.expression\"\n        [customAutoCompletions]=\"expressionAutoCompletions\"\n        [customCompletionsPaths]=\"expressionAutoCompletionPaths\"\n        (nile-change)=\"onExpressionInput($event)\">\n      </nile-code-editor>\n      @if (allowExpressionMode) {\n        <div class=\"st-condition-builder__footer\">\n          <div class=\"st-condition-builder__footer-left\"></div>\n          <button type=\"button\"\n                  class=\"st-condition-builder__link st-condition-builder__link--right\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.aria-pressed]=\"true\"\n                  (click)=\"onToggleMode()\">\n            {{ expressionToggleLabel }}\n          </button>\n        </div>\n      }\n    </div>\n\n  }\n\n  <!-- Screen-reader announcements for validation state. Visually hidden;\n       aria-live=\"polite\" so it doesn't interrupt other speech. -->\n  <div class=\"sr-only\"\n       role=\"status\"\n       aria-live=\"polite\"\n       aria-atomic=\"true\">\n    {{ validityAnnouncement }}\n  </div>\n\n</div>\n", styles: [":host{display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.st-condition-builder{display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);padding-top:var(--nile-spacing-xl, 16px);padding-bottom:var(--nile-spacing-md, 8px);border:1px solid var(--nile-colors-dark-100, #e6e6e6);border-top:0;border-bottom-left-radius:var(--nile-radius-sm, 4px);border-bottom-right-radius:var(--nile-radius-sm, 4px);background:var(--nile-colors-white-base, #fff);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__header{padding:0 var(--nile-spacing-xl, 16px);color:var(--nile-colors-dark-500, #636363);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__list{display:flex;flex-direction:column}.st-condition-builder__row{padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px);border-bottom:1px solid var(--nile-colors-dark-100, #e6e6e6)}.st-condition-builder__row.is-last{border-bottom:none}.st-condition-builder__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--nile-spacing-md, 8px);padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px) 0;border-top:1px solid var(--nile-colors-dark-100, #e6e6e6);font:400 14px/14px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__footer-left{display:flex;align-items:center;gap:10px}.st-condition-builder__link{background:transparent;border:none;padding:2px 4px;cursor:pointer;color:var(--ng-colors-fg-brand-primary-600, #005ea6);font:inherit;text-align:right;border-radius:var(--nile-radius-sm, 4px)}.st-condition-builder__link:hover:not([disabled]){text-decoration:underline}.st-condition-builder__link:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px;text-decoration:underline}.st-condition-builder__link[disabled]{cursor:not-allowed;opacity:.5}.st-condition-builder__link--right{margin-left:auto}.st-condition-builder__expression{display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);padding:0 var(--nile-spacing-xl, 16px)}.st-condition-builder__expression-input{display:block;width:100%;min-height:160px}\n"] }]
+            args: [{ selector: 'st-condition-builder', standalone: true, imports: [CommonModule, FormsModule, StConditionRuleComponent, StConditionGroupComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-condition-builder\" role=\"region\" aria-label=\"Condition builder\">\n\n  @if (internalValue.mode === 'builder') {\n\n    <div class=\"st-condition-builder__list\"\n         role=\"list\"\n         aria-label=\"Conditions\">\n      @for (node of internalValue.conditions; track trackByIndex($index); let i = $index; let last = $last) {\n        <div class=\"st-condition-builder__row\"\n             role=\"listitem\"\n             [class.is-last]=\"last\"\n             [attr.aria-label]=\"ariaLabelForNode(node, i)\">\n          @if (isSingle(node)) {\n            <st-condition-rule\n              [rule]=\"node\"\n              [config]=\"config\"\n              [isFirst]=\"i === 0\"\n              [canRemove]=\"internalValue.conditions.length > 1\"\n              [canInsertGroup]=\"allowGroups\"\n              [disabled]=\"disabled\"\n              (ruleChange)=\"onSingleChange(i, $event)\"\n              (remove)=\"onRemoveCondition(i)\"\n              (insertBelow)=\"onInsertBelow(i)\"\n              (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n            </st-condition-rule>\n          } @else if (isGroup(node)) {\n            <st-condition-group\n              [group]=\"node\"\n              [config]=\"config\"\n              [isFirst]=\"i === 0\"\n              [canRemove]=\"true\"\n              [disabled]=\"disabled\"\n              (groupChange)=\"onGroupChange(i, $event)\"\n              (remove)=\"onRemoveCondition(i)\"\n              (insertBelow)=\"onInsertBelow(i)\"\n              (insertGroupBelow)=\"onInsertGroupBelow(i)\">\n            </st-condition-group>\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"st-condition-builder__footer\">\n      <div class=\"st-condition-builder__footer-left\">\n        <button type=\"button\"\n                class=\"st-condition-builder__link\"\n                [attr.disabled]=\"canAddCondition ? null : ''\"\n                [attr.aria-disabled]=\"!canAddCondition\"\n                (click)=\"onAddCondition()\">\n          Add condition\n        </button>\n        @if (allowGroups) {\n          <button type=\"button\"\n                  class=\"st-condition-builder__link\"\n                  [attr.disabled]=\"canAddCondition ? null : ''\"\n                  [attr.aria-disabled]=\"!canAddCondition\"\n                  (click)=\"onAddGroup()\">\n            Add condition group\n          </button>\n        }\n      </div>\n      @if (allowExpressionMode) {\n        <button type=\"button\"\n                class=\"st-condition-builder__link st-condition-builder__link--right\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.aria-pressed]=\"false\"\n                (click)=\"onToggleMode()\">\n          {{ expressionToggleLabel }}\n        </button>\n      }\n    </div>\n\n  } @else {\n\n    <div class=\"st-condition-builder__expression\">\n      <label class=\"sr-only\" for=\"st-condition-builder-expression-input\">\n        Expression\n      </label>\n      <nile-code-editor\n        id=\"st-condition-builder-expression-input\"\n        class=\"st-condition-builder__expression-input\"\n        aria-label=\"Rule expression\"\n        placeholder=\"Enter expression\"\n        [language]=\"expressionLanguage\"\n        [multiline]=\"true\"\n        [lineNumbers]=\"true\"\n        [lineNumbersMultiline]=\"true\"\n        [expandable]=\"false\"\n        [disabled]=\"disabled\"\n        [value]=\"internalValue.expression\"\n        [customAutoCompletions]=\"expressionAutoCompletions\"\n        [customCompletionsPaths]=\"expressionAutoCompletionPaths\"\n        (nile-change)=\"onExpressionInput($event)\">\n      </nile-code-editor>\n      @if (allowExpressionMode) {\n        <div class=\"st-condition-builder__footer\">\n          <div class=\"st-condition-builder__footer-left\"></div>\n          <button type=\"button\"\n                  class=\"st-condition-builder__link st-condition-builder__link--right\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.aria-pressed]=\"true\"\n                  (click)=\"onToggleMode()\">\n            {{ expressionToggleLabel }}\n          </button>\n        </div>\n      }\n    </div>\n\n  }\n\n  <!-- Screen-reader announcements for validation state. Visually hidden;\n       aria-live=\"polite\" so it doesn't interrupt other speech. -->\n  <div class=\"sr-only\"\n       role=\"status\"\n       aria-live=\"polite\"\n       aria-atomic=\"true\">\n    {{ validityAnnouncement }}\n  </div>\n\n</div>\n", styles: [":host{display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.st-condition-builder{display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);padding-top:var(--nile-spacing-xl, 16px);padding-bottom:var(--nile-spacing-md, 8px);border:1px solid var(--nile-colors-dark-100, #e6e6e6);border-top:0;border-bottom-left-radius:var(--nile-radius-sm, 4px);border-bottom-right-radius:var(--nile-radius-sm, 4px);background:var(--nile-colors-white-base, #fff);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__header{padding:0 var(--nile-spacing-xl, 16px);color:var(--nile-colors-dark-500, #636363);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__list{display:flex;flex-direction:column}.st-condition-builder__row{padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px);border-bottom:1px solid #f5f7f7}.st-condition-builder__row.is-last{border-bottom:none}.st-condition-builder__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--nile-spacing-md, 8px);padding:var(--nile-spacing-md, 8px) var(--nile-spacing-xl, 16px) 0;border-top:1px solid var(--nile-colors-dark-100, #e6e6e6);font:400 14px/14px Colfax,system-ui,sans-serif;letter-spacing:.2px}.st-condition-builder__footer-left{display:flex;align-items:center;gap:10px}.st-condition-builder__link{background:transparent;border:none;padding:2px 4px;cursor:pointer;color:var(--ng-colors-fg-brand-primary-600, #005ea6);font:inherit;text-align:right;border-radius:var(--nile-radius-sm, 4px)}.st-condition-builder__link:hover:not([disabled]){text-decoration:underline}.st-condition-builder__link:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px;text-decoration:underline}.st-condition-builder__link[disabled]{cursor:not-allowed;opacity:.5}.st-condition-builder__link--right{margin-left:auto}.st-condition-builder__expression{display:flex;flex-direction:column;gap:var(--nile-spacing-md, 8px);padding:0 var(--nile-spacing-xl, 16px)}.st-condition-builder__expression-input{display:flex;flex-direction:column;width:100%;min-height:160px}::ng-deep .st-condition-builder__expression-input::part(code-editor-base){flex:1;min-height:160px}\n"] }]
         }], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]