@aquera/ngx-smart-table 0.0.40 → 0.0.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12796,11 +12796,11 @@ class StConditionValueEditorComponent {
12796
12796
  this.dropdownOpen = false;
12797
12797
  }
12798
12798
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionValueEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12799
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StConditionValueEditorComponent, isStandalone: true, selector: "st-condition-value-editor", inputs: { field: "field", operator: "operator", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.is-chip-mode": "this.isChipMode" } }, usesOnChanges: true, ngImport: i0, template: "@if (!hidden && field) {\n @switch (field.valueEditor) {\n @case ('text') {\n <nile-input\n class=\"st-cb-value st-cb-value--text\"\n size=\"small\"\n [value]=\"singleValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n (nile-input)=\"onTextInput($event)\">\n </nile-input>\n }\n @case ('chip') {\n <nile-chip\n class=\"st-cb-value st-cb-value--chip\"\n size=\"small\"\n [acceptUserInput]=\"true\"\n [addOnBlur]=\"true\"\n [noWrap]=\"true\"\n [value]=\"multiValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n (nile-chip-change)=\"onChipChange($event)\">\n </nile-chip>\n }\n @case ('select') {\n <nile-select\n class=\"st-cb-chip st-cb-value st-cb-value--select\"\n size=\"small\"\n [attr.searchEnabled]=\"searchEnabled ? 'true' : null\"\n [disableLocalSearch]=\"serverSearch\"\n [optionsLoading]=\"optionsLoading\"\n [hoist]=\"true\"\n [value]=\"singleValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n aria-label=\"Value\"\n (nile-show)=\"onSelectShow($event)\"\n (nile-hide)=\"onSelectAfterHide($event)\"\n (nile-search)=\"onSelectSearch($event)\"\n (nile-change)=\"onSelectChange($event)\">\n @for (opt of displayOptions; track opt.value) {\n <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n }\n </nile-select>\n }\n @case ('multi-select') {\n <nile-select\n class=\"st-cb-chip st-cb-value st-cb-value--multi\"\n size=\"small\"\n multiple\n [attr.searchEnabled]=\"searchEnabled ? 'true' : null\"\n [disableLocalSearch]=\"serverSearch\"\n [optionsLoading]=\"optionsLoading\"\n [hoist]=\"true\"\n [value]=\"multiValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n aria-label=\"Value\"\n (nile-show)=\"onSelectShow($event)\"\n (nile-hide)=\"onSelectAfterHide($event)\"\n (nile-search)=\"onSelectSearch($event)\"\n (nile-change)=\"onSelectChange($event)\">\n <!--\n Slot=\"custom-select\" REPLACES Nile's default tag display. We bypass\n Nile's calculateTotalWidthOfTags() (which would otherwise reset\n maxOptionsVisible on every value change \u2192 visible flicker) and render\n our own \"first label + N more\" summary statically.\n -->\n <div slot=\"custom-select\"\n class=\"st-cb-value--multi__display\"\n [attr.tabindex]=\"disabled ? null : 0\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"placeholder\">\n @if (multiValue.length === 0) {\n <span class=\"st-cb-value--multi__placeholder\">{{ placeholder }}</span>\n } @else {\n <!--\n Tooltip shows only the first selected value (the one rendered in\n the trigger). Same pattern as the field picker's label tooltip.\n -->\n <nile-tooltip\n class=\"st-cb-value--multi__tooltip\"\n [content]=\"firstSelectedLabel\"\n placement=\"top\"\n [hoist]=\"true\">\n <span class=\"st-cb-value--multi__label\">{{ firstSelectedLabel }}</span>\n </nile-tooltip>\n @if (overflowCount > 0) {\n <span class=\"st-cb-value--multi__overflow\">+{{ overflowCount }} More</span>\n }\n }\n <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-cb-value--multi__chevron\" aria-hidden=\"true\"></nile-icon>\n </div>\n @for (opt of displayOptions; track opt.value) {\n <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n }\n </nile-select>\n }\n }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host:has(nile-chip){display:flex!important;width:100%!important;min-width:0!important}:host ::ng-deep .st-cb-value--text{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--text::part(form-control),:host ::ng-deep .st-cb-value--text::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--text::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000)}:host ::ng-deep .st-cb-value--text::part(input){background:transparent;border:none;box-shadow:none;padding:0;height:auto;min-height:unset;font:inherit;color:inherit;line-height:12px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--text::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--chip{flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important;vertical-align:middle;--nile-height-26px: 20px;--nile-type-scale-3: 12px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar{height:2px;background:transparent}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .st-cb-value--chip::part(base){scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}:host ::ng-deep .st-cb-value--chip::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none!important;box-shadow:none;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px);height:28px;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px}:host ::ng-deep .st-cb-value--chip::part(input){padding:0;height:auto;min-height:unset;font:inherit;font-size:12px;line-height:12px}:host ::ng-deep .st-cb-value--chip::part(tag){height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__base){background:var(--nile-colors-white-base, #fff)!important;border:1px solid var(--nile-colors-neutral-500, #c0c6c9)!important;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px)!important;font-family:Colfax,system-ui,sans-serif!important;font-size:12px!important;line-height:12px!important;letter-spacing:.2px;height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__content){font:inherit}.st-cb-value--multi__display{display:inline-flex;align-items:center;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border-radius:4px!important;padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);height:28px;cursor:pointer;white-space:nowrap;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));overflow:hidden;box-sizing:border-box;outline:none}.st-cb-value--multi__display:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px}.st-cb-value--multi__placeholder{color:var(--nile-colors-dark-500, #636363);overflow:hidden;text-overflow:ellipsis}.st-cb-value--multi__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-cb-value--multi__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-cb-value--multi__overflow{flex:0 0 auto;color:var(--ng-colors-fg-brand-primary-600, #005ea6);font-weight:var(--ng-font-weight-medium)}.st-cb-value--multi__chevron{flex:0 0 auto;color:var(--nile-colors-dark-500, #636363)}:host ::ng-deep .st-cb-value--select,:host ::ng-deep .st-cb-value--multi{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--select::part(form-control),:host ::ng-deep .st-cb-value--select::part(form-control-input),:host ::ng-deep .st-cb-value--multi::part(form-control),:host ::ng-deep .st-cb-value--multi::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--select::part(combobox),:host ::ng-deep .st-cb-value--multi::part(combobox){background:var(--nile-colors-neutral-400, #e6e9eb);border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:100%;overflow:hidden;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);gap:var(--nile-spacing-md, 8px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--select::part(listbox),:host ::ng-deep .st-cb-value--multi::part(listbox){min-width:var(--st-cb-listbox-width, 240px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){color:inherit;font:inherit;letter-spacing:inherit;padding:0;height:auto;min-height:unset;line-height:12px;background:transparent;border:none;width:auto}:host ::ng-deep .st-cb-value--select::part(expand-icon),:host ::ng-deep .st-cb-value--multi::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-value--select::part(form-control-label),:host ::ng-deep .st-cb-value--multi::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--select::part(tags),:host ::ng-deep .st-cb-value--multi::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-value--select::part(tag__base),:host ::ng-deep .st-cb-value--multi::part(tag__base){background:var(--nile-colors-white-base, #fff);border:1px solid var(--nile-colors-neutral-500, #c0c6c9);border-radius:var(--nile-radius-sm, 4px);padding:0 4px;font-size:11px;line-height:14px;min-height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
12799
+ 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 }); }
12800
12800
  }
12801
12801
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionValueEditorComponent, decorators: [{
12802
12802
  type: Component,
12803
- args: [{ selector: 'st-condition-value-editor', standalone: true, imports: [CommonModule, FormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!hidden && field) {\n @switch (field.valueEditor) {\n @case ('text') {\n <nile-input\n class=\"st-cb-value st-cb-value--text\"\n size=\"small\"\n [value]=\"singleValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n (nile-input)=\"onTextInput($event)\">\n </nile-input>\n }\n @case ('chip') {\n <nile-chip\n class=\"st-cb-value st-cb-value--chip\"\n size=\"small\"\n [acceptUserInput]=\"true\"\n [addOnBlur]=\"true\"\n [noWrap]=\"true\"\n [value]=\"multiValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n (nile-chip-change)=\"onChipChange($event)\">\n </nile-chip>\n }\n @case ('select') {\n <nile-select\n class=\"st-cb-chip st-cb-value st-cb-value--select\"\n size=\"small\"\n [attr.searchEnabled]=\"searchEnabled ? 'true' : null\"\n [disableLocalSearch]=\"serverSearch\"\n [optionsLoading]=\"optionsLoading\"\n [hoist]=\"true\"\n [value]=\"singleValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n aria-label=\"Value\"\n (nile-show)=\"onSelectShow($event)\"\n (nile-hide)=\"onSelectAfterHide($event)\"\n (nile-search)=\"onSelectSearch($event)\"\n (nile-change)=\"onSelectChange($event)\">\n @for (opt of displayOptions; track opt.value) {\n <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n }\n </nile-select>\n }\n @case ('multi-select') {\n <nile-select\n class=\"st-cb-chip st-cb-value st-cb-value--multi\"\n size=\"small\"\n multiple\n [attr.searchEnabled]=\"searchEnabled ? 'true' : null\"\n [disableLocalSearch]=\"serverSearch\"\n [optionsLoading]=\"optionsLoading\"\n [hoist]=\"true\"\n [value]=\"multiValue\"\n [attr.disabled]=\"disabled ? '' : null\"\n [placeholder]=\"placeholder\"\n aria-label=\"Value\"\n (nile-show)=\"onSelectShow($event)\"\n (nile-hide)=\"onSelectAfterHide($event)\"\n (nile-search)=\"onSelectSearch($event)\"\n (nile-change)=\"onSelectChange($event)\">\n <!--\n Slot=\"custom-select\" REPLACES Nile's default tag display. We bypass\n Nile's calculateTotalWidthOfTags() (which would otherwise reset\n maxOptionsVisible on every value change \u2192 visible flicker) and render\n our own \"first label + N more\" summary statically.\n -->\n <div slot=\"custom-select\"\n class=\"st-cb-value--multi__display\"\n [attr.tabindex]=\"disabled ? null : 0\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"placeholder\">\n @if (multiValue.length === 0) {\n <span class=\"st-cb-value--multi__placeholder\">{{ placeholder }}</span>\n } @else {\n <!--\n Tooltip shows only the first selected value (the one rendered in\n the trigger). Same pattern as the field picker's label tooltip.\n -->\n <nile-tooltip\n class=\"st-cb-value--multi__tooltip\"\n [content]=\"firstSelectedLabel\"\n placement=\"top\"\n [hoist]=\"true\">\n <span class=\"st-cb-value--multi__label\">{{ firstSelectedLabel }}</span>\n </nile-tooltip>\n @if (overflowCount > 0) {\n <span class=\"st-cb-value--multi__overflow\">+{{ overflowCount }} More</span>\n }\n }\n <nile-icon name=\"arrowdown\" size=\"14\" class=\"st-cb-value--multi__chevron\" aria-hidden=\"true\"></nile-icon>\n </div>\n @for (opt of displayOptions; track opt.value) {\n <nile-option [value]=\"opt.value\">{{ opt.label }}</nile-option>\n }\n </nile-select>\n }\n }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host:has(nile-chip){display:flex!important;width:100%!important;min-width:0!important}:host ::ng-deep .st-cb-value--text{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--text::part(form-control),:host ::ng-deep .st-cb-value--text::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--text::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000)}:host ::ng-deep .st-cb-value--text::part(input){background:transparent;border:none;box-shadow:none;padding:0;height:auto;min-height:unset;font:inherit;color:inherit;line-height:12px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--text::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--chip{flex:1 1 0!important;width:0!important;min-width:0!important;max-width:100%!important;vertical-align:middle;--nile-height-26px: 20px;--nile-type-scale-3: 12px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar{height:2px;background:transparent}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-thumb{background:var(--nile-colors-neutral-500, #c0c6c9);border-radius:2px}:host ::ng-deep .st-cb-value--chip::part(base)::-webkit-scrollbar-track{background:transparent}:host ::ng-deep .st-cb-value--chip::part(base){scrollbar-width:thin;scrollbar-color:var(--nile-colors-neutral-500, #c0c6c9) transparent}:host ::ng-deep .st-cb-value--chip::part(base){background:var(--nile-colors-neutral-400, #e6e9eb);border:none!important;box-shadow:none;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px);height:28px;width:100%;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px}:host ::ng-deep .st-cb-value--chip::part(input){padding:0;height:auto;min-height:unset;font:inherit;font-size:12px;line-height:12px}:host ::ng-deep .st-cb-value--chip::part(tag){height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__base){background:var(--nile-colors-white-base, #fff)!important;border:1px solid var(--nile-colors-neutral-500, #c0c6c9)!important;border-radius:4px!important;padding:0 var(--nile-spacing-sm, 6px)!important;font-family:Colfax,system-ui,sans-serif!important;font-size:12px!important;line-height:12px!important;letter-spacing:.2px;height:20px!important;min-height:20px!important}:host ::ng-deep .st-cb-value--chip::part(tag__content){font:inherit}.st-cb-value--multi__display{display:inline-flex;align-items:center;gap:var(--nile-spacing-md, 8px);background:var(--nile-colors-neutral-400, #e6e9eb);border-radius:4px!important;padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);font:400 12px/12px Colfax,system-ui,sans-serif;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);height:28px;cursor:pointer;white-space:nowrap;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));max-width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px));overflow:hidden;box-sizing:border-box;outline:none}.st-cb-value--multi__display:focus-visible{outline:2px solid var(--ng-colors-fg-brand-primary-600, #005ea6);outline-offset:2px}.st-cb-value--multi__placeholder{color:var(--nile-colors-dark-500, #636363);overflow:hidden;text-overflow:ellipsis}.st-cb-value--multi__tooltip{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center}.st-cb-value--multi__label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-cb-value--multi__overflow{flex:0 0 auto;color:var(--ng-colors-fg-brand-primary-600, #005ea6);font-weight:var(--ng-font-weight-medium)}.st-cb-value--multi__chevron{flex:0 0 auto;color:var(--nile-colors-dark-500, #636363)}:host ::ng-deep .st-cb-value--select,:host ::ng-deep .st-cb-value--multi{display:inline-flex!important;width:var(--st-cb-value-width, var(--st-cb-chip-width, 180px))!important;flex:0 0 auto;vertical-align:middle;line-height:12px}:host ::ng-deep .st-cb-value--select::part(form-control),:host ::ng-deep .st-cb-value--select::part(form-control-input),:host ::ng-deep .st-cb-value--multi::part(form-control),:host ::ng-deep .st-cb-value--multi::part(form-control-input){background:transparent;border:none;padding:0;margin:0;min-height:unset;box-shadow:none;width:100%;display:inline-flex}:host ::ng-deep .st-cb-value--select::part(combobox),:host ::ng-deep .st-cb-value--multi::part(combobox){background:var(--nile-colors-neutral-400, #e6e9eb);border:none;box-shadow:none;border-radius:var(--nile-radius-sm, 4px);padding:var(--nile-spacing-xs, 4px) var(--nile-spacing-sm, 6px);min-height:20px;height:auto;width:100%;overflow:hidden;font-family:Colfax,system-ui,sans-serif;font-size:12px;line-height:12px;letter-spacing:.2px;color:var(--nile-colors-dark-900, #000);gap:var(--nile-spacing-md, 8px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host ::ng-deep .st-cb-value--select::part(listbox),:host ::ng-deep .st-cb-value--multi::part(listbox){min-width:var(--st-cb-listbox-width, 240px)}:host ::ng-deep .st-cb-value--select::part(display-input),:host ::ng-deep .st-cb-value--multi::part(display-input){color:inherit;font:inherit;letter-spacing:inherit;padding:0;height:auto;min-height:unset;line-height:12px;background:transparent;border:none;width:auto}:host ::ng-deep .st-cb-value--select::part(expand-icon),:host ::ng-deep .st-cb-value--multi::part(expand-icon){color:var(--nile-colors-dark-500, #636363);font-size:14px;line-height:1;margin:0}:host ::ng-deep .st-cb-value--select::part(form-control-label),:host ::ng-deep .st-cb-value--multi::part(form-control-label){display:none}:host ::ng-deep .st-cb-value--select::part(tags),:host ::ng-deep .st-cb-value--multi::part(tags){margin:0;gap:4px}:host ::ng-deep .st-cb-value--select::part(tag__base),:host ::ng-deep .st-cb-value--multi::part(tag__base){background:var(--nile-colors-white-base, #fff);border:1px solid var(--nile-colors-neutral-500, #c0c6c9);border-radius:var(--nile-radius-sm, 4px);padding:0 4px;font-size:11px;line-height:14px;min-height:16px}\n"] }]
12803
+ 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"] }]
12804
12804
  }], ctorParameters: () => [], propDecorators: { field: [{
12805
12805
  type: Input
12806
12806
  }], operator: [{
@@ -12886,11 +12886,11 @@ class StConditionFieldPickerComponent {
12886
12886
  el?.hide?.();
12887
12887
  }
12888
12888
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionFieldPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12889
- 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 }); }
12889
+ 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 }); }
12890
12890
  }
12891
12891
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionFieldPickerComponent, decorators: [{
12892
12892
  type: Component,
12893
- 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"] }]
12893
+ 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"] }]
12894
12894
  }], propDecorators: { value: [{
12895
12895
  type: Input
12896
12896
  }], fields: [{
@@ -12928,6 +12928,12 @@ class StConditionRuleComponent {
12928
12928
  * sub-rules inside a group — v1's 1-level nesting forbids groups-in-groups).
12929
12929
  */
12930
12930
  this.canInsertGroup = false;
12931
+ /**
12932
+ * True when this rule is a sub-condition inside a group. Only then does the
12933
+ * first row reserve the connector column (via a spacer) so the sub-conditions
12934
+ * align. Top-level rows are left flush — parent-level layout is unchanged.
12935
+ */
12936
+ this.inGroup = false;
12931
12937
  this.ruleChange = new EventEmitter();
12932
12938
  this.remove = new EventEmitter();
12933
12939
  /** User asked to insert a fresh peer Condition directly below this row. */
@@ -13007,13 +13013,20 @@ class StConditionRuleComponent {
13007
13013
  this.remove.emit();
13008
13014
  }
13009
13015
  }
13010
- onInsertBelowClick() {
13016
+ onInsertBelowClick(event) {
13011
13017
  if (this.disabled)
13012
13018
  return;
13013
13019
  // When the menu is enabled, the click opens the dropdown — the actual
13014
13020
  // emit happens from onAddMenuSelect. When disabled, fire directly.
13015
13021
  if (!this.canInsertGroup) {
13016
13022
  this.insertBelow.emit();
13023
+ // A mouse click leaves the focus ring on the just-clicked "+", which keeps
13024
+ // the row's hover actions visible. Drop focus so they hide until the next
13025
+ // hover. `detail > 0` = pointer activation; keyboard (Enter/Space, detail 0)
13026
+ // keeps focus for accessibility.
13027
+ if (event && event.detail > 0) {
13028
+ event.currentTarget?.blur();
13029
+ }
13017
13030
  }
13018
13031
  }
13019
13032
  onAddMenuSelect(event) {
@@ -13038,11 +13051,11 @@ class StConditionRuleComponent {
13038
13051
  this.ruleChange.emit(next);
13039
13052
  }
13040
13053
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
13041
- 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 }); }
13054
+ 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 }); }
13042
13055
  }
13043
13056
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionRuleComponent, decorators: [{
13044
13057
  type: Component,
13045
- 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"] }]
13058
+ 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"] }]
13046
13059
  }], propDecorators: { rule: [{
13047
13060
  type: Input,
13048
13061
  args: [{ required: true }]
@@ -13057,6 +13070,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
13057
13070
  type: Input
13058
13071
  }], canInsertGroup: [{
13059
13072
  type: Input
13073
+ }], inGroup: [{
13074
+ type: Input
13075
+ }, {
13076
+ type: HostBinding,
13077
+ args: ['class.in-group']
13060
13078
  }], ruleChange: [{
13061
13079
  type: Output
13062
13080
  }], remove: [{
@@ -13172,11 +13190,11 @@ class StConditionGroupComponent {
13172
13190
  this.groupChange.emit(next);
13173
13191
  }
13174
13192
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
13175
- 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 }); }
13193
+ 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 }); }
13176
13194
  }
13177
13195
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionGroupComponent, decorators: [{
13178
13196
  type: Component,
13179
- 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"] }]
13197
+ 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"] }]
13180
13198
  }], propDecorators: { group: [{
13181
13199
  type: Input,
13182
13200
  args: [{ required: true }]
@@ -13556,11 +13574,11 @@ class StConditionBuilderComponent {
13556
13574
  };
13557
13575
  }
13558
13576
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
13559
- 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 }); }
13577
+ 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 }); }
13560
13578
  }
13561
13579
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StConditionBuilderComponent, decorators: [{
13562
13580
  type: Component,
13563
- 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"] }]
13581
+ 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"] }]
13564
13582
  }], propDecorators: { config: [{
13565
13583
  type: Input,
13566
13584
  args: [{ required: true }]