@ngstarter-ui/components 1.0.22 → 1.0.24

package/fesm2022/ngstarter-ui-components-filter-builder.mjs

@@ -85,6 +85,7 @@ class FilterBuilder {
     _value = [];
     _operations = [];
     editItem;
+    _tempMultipleValue = [];
     ngOnInit() {
         if (this.value().length) {
             if (!this._isGroup(this.value()[0])) {
@@ -136,14 +137,14 @@ class FilterBuilder {
         return this.groupOperations().find(groupOperator => groupOperator.id === groupLogicalOperatorId)?.name || '';
     }
     selectConditionField(item, field) {
-        this.editItem = undefined;
         let allowedTypes = this._operationAllowedTypesMap.get(field.dataType);
+        item['value'][0] = field.dataField;
         item['value'][1] = allowedTypes[0];
         this._resetValue(field, item);
+        this.editItem = undefined;
         this._emitChangeEvent();
     }
     operationChanged(item, operation) {
-        this.editItem = undefined;
         const oldOperation = item['value'][1];
         if (oldOperation === 'equals' && operation === 'isAnyOf') {
             item['value'][2] = [];
@@ -161,6 +162,7 @@ class FilterBuilder {
             item['value'][2] = null;
         }
         item['value'][1] = operation;
+        this.editItem = undefined;
         this._emitChangeEvent();
     }
     removeCondition(index, items) {
@@ -177,6 +179,9 @@ class FilterBuilder {
     }
     modifyValue(item) {
         this.editItem = item;
+        if (this.getFieldType(item) === 'array' && item['value'][1] === 'isAnyOf') {
+            this._tempMultipleValue = [...(item['value'][2] || [])];
+        }
     }
     getFieldType(item) {
         return this.fieldDefs().find(f => f.dataField === item['value'][0]).dataType;
@@ -210,6 +215,9 @@ class FilterBuilder {
         return (fieldDef.lookup?.dataSource).find(item => item.id === dataSourceItemId)?.name || '';
     }
     selectBlur(event) {
+        if (this.editItem && this.getFieldType(this.editItem) === 'array' && this.editItem['value'][1] === 'isAnyOf') {
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
         const select = event.target;
@@ -221,8 +229,13 @@ class FilterBuilder {
         }, 200);
     }
     selectClosed() {
+        if (this.editItem && this.getFieldType(this.editItem) === 'array' && this.editItem['value'][1] === 'isAnyOf') {
+            this.editItem['value'][2] = [...this._tempMultipleValue];
+        }
         this.cancelEdit();
-        this._emitChangeEvent();
+        setTimeout(() => {
+            this._emitChangeEvent();
+        });
     }
     operationIconTemplateRef(operation) {
         return operation.operationIcon()?.templateRef;
@@ -299,7 +312,7 @@ class FilterBuilder {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FilterBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FilterBuilder, isStandalone: true, selector: "ngs-filter-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fieldDefs: { classPropertyName: "fieldDefs", publicName: "fieldDefs", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, groupOperations: { classPropertyName: "groupOperations", publicName: "groupOperations", isSignal: true, isRequired: false, transformFunction: null }, customOperations: { classPropertyName: "customOperations", publicName: "customOperations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, host: { classAttribute: "ngs-filter-builder" }, queries: [{ propertyName: "_customOperationDefs", predicate: FilterBuilderOperationDefDirective, isSignal: true }], viewQueries: [{ propertyName: "_prebuiltOperationDefs", predicate: FilterBuilderOperationDefDirective, descendants: true, isSignal: true }], exportAs: ["ngsFilterBuilder"], ngImport: i0, template: "@if (_isServer) {\n  <ng-content/>\n}\n\n<ng-template #itemsTpl let-items>\n  <div class=\"group\">\n    @for (item of items; track item; let index = $index) {\n      @if (_isGroup(item)) {\n        <div class=\"flex items-center group-operations\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button [ngsMenuTriggerFor]=\"nestedGroupOperationsMenu\" class=\"group-operation\">\n            {{ getSelectedGroupOperationName(item) }}\n          </button>\n          <div [ngsMenuTriggerFor]=\"addGroupMenu\" class=\"add\">\n            <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n          </div>\n          <ngs-menu #nestedGroupOperationsMenu=\"ngsMenu\">\n            <div ngsMenuOptionGroup [(ngModel)]=\"item['logicalOperator']\">\n              @for (groupOperation of groupOperations(); track groupOperation.id) {\n                <ngs-option [value]=\"groupOperation.id\">{{ groupOperation.name }}</ngs-option>\n              }\n            </div>\n          </ngs-menu>\n          <ngs-menu #addGroupMenu=\"ngsMenu\">\n            <button ngs-menu-item (click)=\"addCondition(item)\">Add Condition</button>\n            <button ngs-menu-item (click)=\"addGroup(item)\">Add Group</button>\n          </ngs-menu>\n        </div>\n        @if (item['value'].length > 0) {\n          <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: item['value'] }\" />\n        }\n      } @else if (_isCondition(item)) {\n        <div class=\"condition\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button class=\"condition-field\"\n                  [ngsMenuTriggerFor]=\"fieldsMenu\">{{ getConditionField(item['value'][0])?.name }}</button>\n          <button class=\"condition-operation\"\n                  [ngsMenuTriggerFor]=\"operationsMenu\">\n            <ng-template [ngTemplateOutlet]=\"getConditionOperation(item['value'][1])?.name\" />\n          </button>\n          <div class=\"relative\">\n            @if (editItem && editItem === item) {\n              <div class=\"absolute start-0 top-0 -translate-y-1/2\">\n                @switch (getFieldType(editItem)) {\n                  @case ('array') {\n                    @switch (editItem['value'][1]) {\n                      @case ('equals') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\"\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (ngModelChange)=\"_emitChangeEvent()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n\n                      @case ('isAnyOf') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\" multiple\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (closed)=\"selectClosed()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n\n                  @case ('number') {\n                    @switch (editItem['value'][1]) {\n                      @case ('isBetween') {\n                        <div class=\"flex gap-2 items-center\"\n                             ngsFocusElement (elementBlurred)=\"cancelEdit()\">\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput ngsAutoFocus\n                                   [(ngModel)]=\"item['value'][2][0]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                          <div class=\"text-neutral-500\">&ndash;</div>\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput\n                                   [(ngModel)]=\"item['value'][2][1]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                        </div>\n                      }\n                      @default {\n                        <ngs-form-field class=\"form-field-number\">\n                          <input type=\"number\" ngsInput ngsAutoFocus\n                                 (blur)=\"cancelEdit()\"\n                                 [(ngModel)]=\"item['value'][2]\"\n                                 (ngModelChange)=\"_emitChangeEvent()\">\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n\n                  @default {\n                    <ngs-form-field class=\"form-field\">\n                      <input type=\"text\" ngsInput ngsAutoFocus\n                             (blur)=\"cancelEdit()\"\n                             [(ngModel)]=\"item['value'][2]\"\n                             (ngModelChange)=\"_emitChangeEvent()\">\n                    </ngs-form-field>\n                  }\n                }\n              </div>\n            } @else {\n              @if (item['value'][1] !== 'isBlank' && item['value'][1] !== 'isNotBlank') {\n                @if (isValueNotEmpty(item)) {\n                  @if (getFieldType(item) === 'array') {\n                    @if (item['value'][1] === 'equals') {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        {{ getDataSourceItemNameById(item, item['value'][2]) }}\n                      </button>\n                    } @else {\n                    <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                      @for (dataSourceItemId of item['value'][2]; track dataSourceItemId; let last = $last) {\n                        <span>{{ getDataSourceItemNameById(item, dataSourceItemId) }}</span>\n                        @if (!last) {\n                          <span class=\"text-neutral-500\">|</span>\n                        }\n                      }\n                    </button>\n                    }\n                  } @else {\n                    @if (item['value'][1] === 'isBetween') {\n                      <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2][0] }}</span>\n                        <span class=\"text-neutral-500\">&ndash;</span>\n                        <span>{{ item['value'][2][1] }}</span>\n                      </button>\n                    } @else {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2] }}</span>\n                      </button>\n                    }\n                  }\n                } @else {\n                  <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                    <span i18n>&lt;enter a value&gt;</span>\n                  </button>\n                }\n              }\n            }\n          </div>\n        </div>\n        <ngs-menu #fieldsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [(ngModel)]=\"item['value'][0]\">\n              @for (fieldDef of fieldDefs(); track fieldDef) {\n                <ngs-option [value]=\"fieldDef.dataField\"\n                            (click)=\"selectConditionField(item, fieldDef)\">{{ fieldDef.name }}</ngs-option>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n        <ngs-menu #operationsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][1]\">\n              @for (operation of _operationDefs; track operation.id()) {\n                <div [hidden]=\"!isOperationAllowedForCondition(item['value'][0], operation.id())\">\n                  <ngs-option [value]=\"operation.id()\" (click)=\"operationChanged(item, operation.id())\">\n                    <div class=\"flex items-center gap-3\">\n                      @if (operation.operationIcon()) {\n                        <ng-template [ngTemplateOutlet]=\"operationIconTemplateRef(operation)\" />\n                      }\n                      <div>\n                        <ng-template [ngTemplateOutlet]=\"operationNameTemplateRef(operation)\" />\n                      </div>\n                    </div>\n                  </ngs-option>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n      }\n    }\n  </div>\n</ng-template>\n\n<div class=\"group\">\n  <div class=\"flex items-center group-operations\">\n    <button [ngsMenuTriggerFor]=\"groupOperationsMenu\" class=\"group-operation\">\n      {{ getSelectedGroupOperationName() }}\n    </button>\n    <div [ngsMenuTriggerFor]=\"addMenu\" class=\"add\">\n      <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: _value }\" />\n</div>\n\n<ngs-menu #groupOperationsMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <div ngsMenuOptionGroup [(ngModel)]=\"_logicalOperator\" (ngModelChange)=\"_emitChangeEvent()\">\n      @for (operation of groupOperations(); track operation.id) {\n        <ngs-option [value]=\"operation.id\">{{ operation.name }}</ngs-option>\n      }\n    </div>\n  </ng-template>\n</ngs-menu>\n<ngs-menu #addMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <button ngs-menu-item (click)=\"addCondition()\">Add Condition</button>\n    <button ngs-menu-item (click)=\"addGroup()\">Add Group</button>\n  </ng-template>\n</ngs-menu>\n\n<ng-container ngsFilterBuilderOperationDef=\"contains\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Contains</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"doesNotContain\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Does not contain</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"startsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Starts with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"endsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Ends with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"equals\" [allowedDataTypes]=\"['string', 'number', 'array', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"notEquals\" [allowedDataTypes]=\"['string', 'number', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Not equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isNotBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is not blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBetween\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is between</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isAnyOf\" [allowedDataTypes]=\"['array']\">\n  <ng-template ngsFilterBuilderOperationName>Is any of</ng-template>\n</ng-container>\n", styles: [":host{--ngs-filter-builder-group-operations-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-font-size: var(--text-tiny);--ngs-filter-builder-group-operation-color: var(--color-on-surface);--ngs-filter-builder-group-operation-bg: var(--color-surface-container);--ngs-filter-builder-group-operation-font-weight: 400;--ngs-filter-builder-group-operation-border-radius: .5rem;--ngs-filter-builder-group-operation-bpadding: 0 calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-group-operation-hover-color: var(--color-on-surface);--ngs-filter-builder-group-operation-hover-bg: var(--color-surface-container-high);--ngs-filter-builder-group-operation-active-color: var(--color-on-surface);--ngs-filter-builder-group-operation-active-bg: var(--color-surface-container-highest);--ngs-filter-builder-group-operation-border: 1px solid var(--color-outline-variant);--ngs-filter-builder-group-add-color: var(--color-primary);--ngs-filter-builder-group-add-hover-color: var(--color-primary);--ngs-filter-builder-group-margin: 0;--ngs-filter-builder-group-padding: 0;--ngs-filter-builder-group-gap: calc(var(--spacing, .25rem) * 4);--ngs-filter-builder-condition-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-field-font-size: var(--text-tiny);--ngs-filter-builder-condition-field-color: var(--color-on-primary-container);--ngs-filter-builder-condition-field-bg: var(--color-primary-container);--ngs-filter-builder-condition-field-font-weight: 400;--ngs-filter-builder-condition-field-border-radius: .5rem;--ngs-filter-builder-condition-field-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-hover-color: var(--color-on-primary-container);--ngs-filter-builder-condition-field-hover-bg: var(--color-primary-400);--ngs-filter-builder-condition-field-active-color: var(--color-on-primary);--ngs-filter-builder-condition-field-active-bg: var(--color-primary);--ngs-filter-builder-condition-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-operation-font-size: var(--text-tiny);--ngs-filter-builder-condition-operation-color: var(--color-on-secondary-container);--ngs-filter-builder-condition-operation-bg: var(--color-secondary-container);--ngs-filter-builder-condition-operation-font-weight: 400;--ngs-filter-builder-condition-operation-border-radius: .5rem;--ngs-filter-builder-condition-operation-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-operation-hover-color: var(--color-on-secondary-container);--ngs-filter-builder-condition-operation-hover-bg: var(--color-secondary-400);--ngs-filter-builder-condition-operation-active-color: var(--color-on-secondary);--ngs-filter-builder-condition-operation-active-bg: var(--color-secondary);--ngs-filter-builder-condition-value-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-value-font-size: var(--text-tiny);--ngs-filter-builder-condition-value-color: var(--color-on-surface);--ngs-filter-builder-condition-value-bg: var(--color-surface-container-high);--ngs-filter-builder-condition-value-font-weight: 400;--ngs-filter-builder-condition-value-border-radius: .5rem;--ngs-filter-builder-condition-value-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-value-hover-color: var(--color-on-surface);--ngs-filter-builder-condition-value-hover-bg: var(--color-surface-container-highest);--ngs-filter-builder-condition-remove-color: var(--color-error);--ngs-filter-builder-condition-remove-hover-color: var(--color-error);display:block}:host ::ng-deep .ngs-form-field-infix{--ngs-form-field-container-height: 46px !important;--ngs-form-field-container-vertical-padding: 12px !important}:host ::ng-deep .subscript-wrapper{display:none}:host .form-field{width:200px}:host .form-field-number{width:140px}:host .group-operations{gap:var(--ngs-filter-builder-group-operations-gap)}:host .group{margin:var(--ngs-filter-builder-group-margin);padding:var(--ngs-filter-builder-group-padding);display:flex;flex-direction:column;gap:var(--ngs-filter-builder-group-gap)}:host .group .group{margin-left:calc(var(--spacing, .25rem) * 4)}:host .icon:empty{display:none}:host .group-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-group-operation-height);font-size:var(--ngs-filter-builder-group-operation-font-size);font-weight:var(--ngs-filter-builder-group-operation-font-weight);color:var(--ngs-filter-builder-group-operation-color);background:var(--ngs-filter-builder-group-operation-bg);border:var(--ngs-filter-builder-group-operation-border);border-radius:var(--ngs-filter-builder-group-operation-border-radius);padding:var(--ngs-filter-builder-group-operation-bpadding)}:host .group-operation:hover{color:var(--ngs-filter-builder-group-operation-hover-color);background:var(--ngs-filter-builder-group-operation-hover-bg)}:host .group-operation:active,:host .group-operation.active{color:var(--ngs-filter-builder-group-operation-active-color);background:var(--ngs-filter-builder-group-operation-active-bg)}:host .condition{display:flex;align-items:center;gap:var(--ngs-filter-builder-condition-gap)}:host .condition-field{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-condition-field-height);font-size:var(--ngs-filter-builder-condition-field-font-size);font-weight:var(--ngs-filter-builder-condition-field-font-weight);color:var(--ngs-filter-builder-condition-field-color);background:var(--ngs-filter-builder-condition-field-bg);border-radius:var(--ngs-filter-builder-condition-field-border-radius);padding:var(--ngs-filter-builder-condition-field-bpadding)}:host .condition-field:hover{color:var(--ngs-filter-builder-condition-field-hover-color);background:var(--ngs-filter-builder-condition-field-hover-bg)}:host .add{line-height:0;color:var(--ngs-filter-builder-group-add-color);cursor:pointer}:host .add:hover{color:var(--ngs-filter-builder-group-add-hover-color)}:host .remove{line-height:0;color:var(--ngs-filter-builder-condition-remove-color);cursor:pointer}:host .remove:hover{color:var(--ngs-filter-builder-condition-remove-hover-color)}:host .condition-field:active,:host .condition-field.active{color:var(--ngs-filter-builder-condition-field-active-color);background:var(--ngs-filter-builder-condition-field-active-bg)}:host .condition-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-condition-operation-height);font-size:var(--ngs-filter-builder-condition-operation-font-size);font-weight:var(--ngs-filter-builder-condition-operation-font-weight);color:var(--ngs-filter-builder-condition-operation-color);background:var(--ngs-filter-builder-condition-operation-bg);border-radius:var(--ngs-filter-builder-condition-operation-border-radius);padding:var(--ngs-filter-builder-condition-operation-bpadding)}:host .condition-operation:hover{color:var(--ngs-filter-builder-condition-operation-hover-color);background:var(--ngs-filter-builder-condition-operation-hover-bg)}:host .condition-operation:active,:host .condition-operation.active{color:var(--ngs-filter-builder-condition-operation-active-color);background:var(--ngs-filter-builder-condition-operation-active-bg)}:host .condition-value{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-condition-value-height);font-size:var(--ngs-filter-builder-condition-value-font-size);font-weight:var(--ngs-filter-builder-condition-value-font-weight);color:var(--ngs-filter-builder-condition-value-color);background:var(--ngs-filter-builder-condition-value-bg);border-radius:var(--ngs-filter-builder-condition-value-border-radius);padding:var(--ngs-filter-builder-condition-value-bpadding)}:host .condition-value:hover{color:var(--ngs-filter-builder-condition-value-hover-color);background:var(--ngs-filter-builder-condition-value-hover-bg)}:host-context(html.dark){--ngs-filter-builder-group-operation-color: var(--color-neutral-200);--ngs-filter-builder-group-operation-hover-bg: var(--color-neutral-600);--ngs-filter-builder-group-operation-active-bg: var(--color-neutral-650);--ngs-filter-builder-group-operation-hover-color: var(--color-neutral-100);--ngs-filter-builder-group-operation-active-color: var(--color-neutral-50)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "directive", type: MenuContent, selector: "[ngsMenuContent]" }, { kind: "directive", type: MenuOptionGroupDirective, selector: "[ngsMenuOptionGroup]", inputs: ["multiple"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty"], exportAs: ["ngsFormField"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "ariaLabel", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "directive", type: AutoFocusDirective, selector: "[ngsAutoFocus]", inputs: ["ngsAutoFocus"], exportAs: ["ngsAutoFocus"] }, { kind: "directive", type: FocusElementDirective, selector: "[ngsFocusElement]", inputs: ["checkChildren"], outputs: ["elementFocused", "elementBlurred"], exportAs: ["ngsFocusElement"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "directive", type: FilterBuilderOperationDefDirective, selector: "[ngsFilterBuilderOperationDef]", inputs: ["ngsFilterBuilderOperationDef", "allowedDataTypes"] }, { kind: "directive", type: FilterBuilderOperationNameDirective, selector: "[ngsFilterBuilderOperationName]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FilterBuilder, isStandalone: true, selector: "ngs-filter-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fieldDefs: { classPropertyName: "fieldDefs", publicName: "fieldDefs", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, groupOperations: { classPropertyName: "groupOperations", publicName: "groupOperations", isSignal: true, isRequired: false, transformFunction: null }, customOperations: { classPropertyName: "customOperations", publicName: "customOperations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, host: { classAttribute: "ngs-filter-builder" }, queries: [{ propertyName: "_customOperationDefs", predicate: FilterBuilderOperationDefDirective, isSignal: true }], viewQueries: [{ propertyName: "_prebuiltOperationDefs", predicate: FilterBuilderOperationDefDirective, descendants: true, isSignal: true }], exportAs: ["ngsFilterBuilder"], ngImport: i0, template: "@if (_isServer) {\n  <ng-content/>\n}\n\n<ng-template #itemsTpl let-items>\n  <div class=\"group\">\n    @for (item of items; track item; let index = $index) {\n      @if (_isGroup(item)) {\n        <div class=\"flex items-center group-operations\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button [ngsMenuTriggerFor]=\"nestedGroupOperationsMenu\"\n                  #nestedGroupOperationsMenuTrigger=\"ngsMenuTrigger\"\n                  class=\"group-operation\">\n            {{ getSelectedGroupOperationName(item) }}\n          </button>\n          <div [ngsMenuTriggerFor]=\"addGroupMenu\" class=\"add\">\n            <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n          </div>\n          <ngs-menu #nestedGroupOperationsMenu=\"ngsMenu\">\n            <div ngsMenuOptionGroup [(ngModel)]=\"item['logicalOperator']\">\n              @for (groupOperation of groupOperations(); track groupOperation.id) {\n                <ngs-option [value]=\"groupOperation.id\"\n                            (click)=\"nestedGroupOperationsMenuTrigger.closeMenu('click')\">{{ groupOperation.name }}\n                </ngs-option>\n              }\n            </div>\n          </ngs-menu>\n          <ngs-menu #addGroupMenu=\"ngsMenu\">\n            <button ngs-menu-item (click)=\"addCondition(item)\">Add Condition</button>\n            <button ngs-menu-item (click)=\"addGroup(item)\">Add Group</button>\n          </ngs-menu>\n        </div>\n        @if (item['value'].length > 0) {\n          <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: item['value'] }\"/>\n        }\n      } @else if (_isCondition(item)) {\n        <div class=\"condition\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button class=\"condition-field\"\n                  #fieldsMenuTrigger=\"ngsMenuTrigger\"\n                  [ngsMenuTriggerFor]=\"fieldsMenu\">{{ getConditionField(item['value'][0])?.name }}\n          </button>\n          <button class=\"condition-operation\"\n                  #operationsMenuTrigger=\"ngsMenuTrigger\"\n                  [ngsMenuTriggerFor]=\"operationsMenu\">\n            <ng-template [ngTemplateOutlet]=\"getConditionOperation(item['value'][1])?.name\"/>\n          </button>\n          <div class=\"relative\">\n            @if (editItem && editItem === item) {\n              <div class=\"absolute start-0 top-0 -translate-y-1/2\">\n                @switch (getFieldType(editItem)) {\n                  @case ('array') {\n                    @switch (editItem['value'][1]) {\n                      @case ('equals') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\"\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (ngModelChange)=\"_emitChangeEvent()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                      @case ('isAnyOf') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\" multiple\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"_tempMultipleValue\"\n                                      (closed)=\"selectClosed()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n                  @case ('number') {\n                    @switch (editItem['value'][1]) {\n                      @case ('isBetween') {\n                        <div class=\"flex gap-2 items-center\"\n                             ngsFocusElement (elementBlurred)=\"cancelEdit()\">\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput ngsAutoFocus\n                                   [(ngModel)]=\"item['value'][2][0]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                          <div class=\"text-neutral-500\">&ndash;</div>\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput\n                                   [(ngModel)]=\"item['value'][2][1]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                        </div>\n                      }\n                      @default {\n                        <ngs-form-field class=\"form-field-number\">\n                          <input type=\"number\" ngsInput ngsAutoFocus\n                                 (blur)=\"cancelEdit()\"\n                                 [(ngModel)]=\"item['value'][2]\"\n                                 (ngModelChange)=\"_emitChangeEvent()\">\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n                  @default {\n                    <ngs-form-field class=\"form-field\">\n                      <input type=\"text\" ngsInput ngsAutoFocus\n                             (blur)=\"cancelEdit()\"\n                             [(ngModel)]=\"item['value'][2]\"\n                             (ngModelChange)=\"_emitChangeEvent()\">\n                    </ngs-form-field>\n                  }\n                }\n              </div>\n            } @else {\n              @if (item['value'][1] !== 'isBlank' && item['value'][1] !== 'isNotBlank') {\n                @if (isValueNotEmpty(item)) {\n                  @if (getFieldType(item) === 'array') {\n                    @if (item['value'][1] === 'equals') {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        {{ getDataSourceItemNameById(item, item['value'][2]) }}\n                      </button>\n                    } @else {\n                      <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                        @for (dataSourceItemId of item['value'][2]; track dataSourceItemId; let last = $last) {\n                          <span>{{ getDataSourceItemNameById(item, dataSourceItemId) }}</span>\n                          @if (!last) {\n                            <span class=\"text-neutral-500\">|</span>\n                          }\n                        }\n                      </button>\n                    }\n                  } @else {\n                    @if (item['value'][1] === 'isBetween') {\n                      <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2][0] }}</span>\n                        <span class=\"text-neutral-500\">&ndash;</span>\n                        <span>{{ item['value'][2][1] }}</span>\n                      </button>\n                    } @else {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2] }}</span>\n                      </button>\n                    }\n                  }\n                } @else {\n                  <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                    <span i18n>&lt;enter a value&gt;</span>\n                  </button>\n                }\n              }\n            }\n          </div>\n        </div>\n        <ngs-menu #fieldsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][0]\">\n              @for (fieldDef of fieldDefs(); track fieldDef) {\n                <ngs-option [value]=\"fieldDef.dataField\"\n                            (click)=\"selectConditionField(item, fieldDef); fieldsMenuTrigger.closeMenu('click')\">{{ fieldDef.name }}\n                </ngs-option>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n        <ngs-menu #operationsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][1]\">\n              @for (operation of _operationDefs; track operation.id()) {\n                <div [hidden]=\"!isOperationAllowedForCondition(item['value'][0], operation.id())\">\n                  <ngs-option [value]=\"operation.id()\"\n                              (click)=\"operationChanged(item, operation.id()); operationsMenuTrigger.closeMenu('click')\">\n                    <div class=\"flex items-center gap-3\">\n                      @if (operation.operationIcon()) {\n                        <ng-template [ngTemplateOutlet]=\"operationIconTemplateRef(operation)\"/>\n                      }\n                      <div>\n                        <ng-template [ngTemplateOutlet]=\"operationNameTemplateRef(operation)\"/>\n                      </div>\n                    </div>\n                  </ngs-option>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n      }\n    }\n  </div>\n</ng-template>\n\n<div class=\"group\">\n  <div class=\"flex items-center group-operations\">\n    <button [ngsMenuTriggerFor]=\"groupOperationsMenu\"\n            #groupOperationsMenuTrigger=\"ngsMenuTrigger\"\n            class=\"group-operation\">\n      {{ getSelectedGroupOperationName() }}\n    </button>\n    <div [ngsMenuTriggerFor]=\"addMenu\" class=\"add\">\n      <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: _value }\"/>\n</div>\n\n<ngs-menu #groupOperationsMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <div ngsMenuOptionGroup [(ngModel)]=\"_logicalOperator\" (ngModelChange)=\"_emitChangeEvent()\">\n      @for (operation of groupOperations(); track operation.id) {\n        <ngs-option [value]=\"operation.id\"\n                    (click)=\"groupOperationsMenuTrigger.closeMenu('click')\">{{ operation.name }}\n        </ngs-option>\n      }\n    </div>\n  </ng-template>\n</ngs-menu>\n<ngs-menu #addMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <button ngs-menu-item (click)=\"addCondition()\">Add Condition</button>\n    <button ngs-menu-item (click)=\"addGroup()\">Add Group</button>\n  </ng-template>\n</ngs-menu>\n\n<ng-container ngsFilterBuilderOperationDef=\"contains\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Contains</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"doesNotContain\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Does not contain</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"startsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Starts with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"endsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Ends with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"equals\" [allowedDataTypes]=\"['string', 'number', 'array', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"notEquals\" [allowedDataTypes]=\"['string', 'number', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Not equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isNotBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is not blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBetween\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is between</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isAnyOf\" [allowedDataTypes]=\"['array']\">\n  <ng-template ngsFilterBuilderOperationName>Is any of</ng-template>\n</ng-container>\n", styles: [":host{--ngs-filter-builder-group-operations-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-font-size: var(--text-tiny);--ngs-filter-builder-group-operation-color: var(--color-on-surface);--ngs-filter-builder-group-operation-bg: var(--color-surface-container);--ngs-filter-builder-group-operation-font-weight: 400;--ngs-filter-builder-group-operation-border-radius: .5rem;--ngs-filter-builder-group-operation-bpadding: 0 calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-group-operation-hover-color: var(--color-on-surface);--ngs-filter-builder-group-operation-hover-bg: var(--color-surface-container-high);--ngs-filter-builder-group-operation-active-color: var(--color-on-surface);--ngs-filter-builder-group-operation-active-bg: var(--color-surface-container-highest);--ngs-filter-builder-group-operation-border: 1px solid var(--color-border);--ngs-filter-builder-group-add-color: var(--color-primary);--ngs-filter-builder-group-add-hover-color: var(--color-primary);--ngs-filter-builder-group-margin: 0;--ngs-filter-builder-group-padding: 0;--ngs-filter-builder-group-gap: calc(var(--spacing, .25rem) * 4);--ngs-filter-builder-condition-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-field-font-size: var(--text-tiny);--ngs-filter-builder-condition-field-color: var(--color-on-primary-container);--ngs-filter-builder-condition-field-bg: var(--color-primary-container);--ngs-filter-builder-condition-field-font-weight: 400;--ngs-filter-builder-condition-field-border-radius: .5rem;--ngs-filter-builder-condition-field-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-hover-color: var(--color-on-primary-container);--ngs-filter-builder-condition-field-hover-bg: var(--color-primary-400);--ngs-filter-builder-condition-field-active-color: var(--color-on-primary);--ngs-filter-builder-condition-field-active-bg: var(--color-primary);--ngs-filter-builder-condition-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-operation-font-size: var(--text-tiny);--ngs-filter-builder-condition-operation-color: var(--color-on-secondary-container);--ngs-filter-builder-condition-operation-bg: var(--color-secondary-container);--ngs-filter-builder-condition-operation-font-weight: 400;--ngs-filter-builder-condition-operation-border-radius: .5rem;--ngs-filter-builder-condition-operation-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-operation-hover-color: var(--color-on-secondary-container);--ngs-filter-builder-condition-operation-hover-bg: var(--color-secondary-400);--ngs-filter-builder-condition-operation-active-color: var(--color-on-secondary);--ngs-filter-builder-condition-operation-active-bg: var(--color-secondary);--ngs-filter-builder-condition-value-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-value-font-size: var(--text-tiny);--ngs-filter-builder-condition-value-color: var(--color-on-surface);--ngs-filter-builder-condition-value-bg: var(--color-surface-container-high);--ngs-filter-builder-condition-value-font-weight: 400;--ngs-filter-builder-condition-value-border-radius: .5rem;--ngs-filter-builder-condition-value-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-value-hover-color: var(--color-on-surface);--ngs-filter-builder-condition-value-hover-bg: var(--color-surface-container-highest);--ngs-filter-builder-condition-remove-color: var(--color-error);--ngs-filter-builder-condition-remove-hover-color: var(--color-error);display:block}:host ::ng-deep .ngs-form-field-infix{--ngs-form-field-container-height: 46px !important;--ngs-form-field-container-vertical-padding: 12px !important}:host ::ng-deep .subscript-wrapper{display:none}:host .form-field{width:200px}:host .form-field-number{width:140px}:host .group-operations{gap:var(--ngs-filter-builder-group-operations-gap)}:host .group{margin:var(--ngs-filter-builder-group-margin);padding:var(--ngs-filter-builder-group-padding);display:flex;flex-direction:column;gap:var(--ngs-filter-builder-group-gap)}:host .group .group{margin-left:calc(var(--spacing, .25rem) * 4)}:host .icon:empty{display:none}:host .group-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-group-operation-height);font-size:var(--ngs-filter-builder-group-operation-font-size);font-weight:var(--ngs-filter-builder-group-operation-font-weight);color:var(--ngs-filter-builder-group-operation-color);background:var(--ngs-filter-builder-group-operation-bg);border:var(--ngs-filter-builder-group-operation-border);border-radius:var(--ngs-filter-builder-group-operation-border-radius);padding:var(--ngs-filter-builder-group-operation-bpadding)}:host .group-operation:hover{color:var(--ngs-filter-builder-group-operation-hover-color);background:var(--ngs-filter-builder-group-operation-hover-bg)}:host .group-operation:active,:host .group-operation.active{color:var(--ngs-filter-builder-group-operation-active-color);background:var(--ngs-filter-builder-group-operation-active-bg)}:host .condition{display:flex;align-items:center;gap:var(--ngs-filter-builder-condition-gap)}:host .condition-field{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-condition-field-height);font-size:var(--ngs-filter-builder-condition-field-font-size);font-weight:var(--ngs-filter-builder-condition-field-font-weight);color:var(--ngs-filter-builder-condition-field-color);background:var(--ngs-filter-builder-condition-field-bg);border-radius:var(--ngs-filter-builder-condition-field-border-radius);padding:var(--ngs-filter-builder-condition-field-bpadding)}:host .condition-field:hover{color:var(--ngs-filter-builder-condition-field-hover-color);background:var(--ngs-filter-builder-condition-field-hover-bg)}:host .add{line-height:0;color:var(--ngs-filter-builder-group-add-color);cursor:pointer}:host .add:hover{color:var(--ngs-filter-builder-group-add-hover-color)}:host .remove{line-height:0;color:var(--ngs-filter-builder-condition-remove-color);cursor:pointer}:host .remove:hover{color:var(--ngs-filter-builder-condition-remove-hover-color)}:host .condition-field:active,:host .condition-field.active{color:var(--ngs-filter-builder-condition-field-active-color);background:var(--ngs-filter-builder-condition-field-active-bg)}:host .condition-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-condition-operation-height);font-size:var(--ngs-filter-builder-condition-operation-font-size);font-weight:var(--ngs-filter-builder-condition-operation-font-weight);color:var(--ngs-filter-builder-condition-operation-color);background:var(--ngs-filter-builder-condition-operation-bg);border-radius:var(--ngs-filter-builder-condition-operation-border-radius);padding:var(--ngs-filter-builder-condition-operation-bpadding)}:host .condition-operation:hover{color:var(--ngs-filter-builder-condition-operation-hover-color);background:var(--ngs-filter-builder-condition-operation-hover-bg)}:host .condition-operation:active,:host .condition-operation.active{color:var(--ngs-filter-builder-condition-operation-active-color);background:var(--ngs-filter-builder-condition-operation-active-bg)}:host .condition-value{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-condition-value-height);font-size:var(--ngs-filter-builder-condition-value-font-size);font-weight:var(--ngs-filter-builder-condition-value-font-weight);color:var(--ngs-filter-builder-condition-value-color);background:var(--ngs-filter-builder-condition-value-bg);border-radius:var(--ngs-filter-builder-condition-value-border-radius);padding:var(--ngs-filter-builder-condition-value-bpadding)}:host .condition-value:hover{color:var(--ngs-filter-builder-condition-value-hover-color);background:var(--ngs-filter-builder-condition-value-hover-bg)}:host-context(html.dark){--ngs-filter-builder-group-operation-color: var(--color-neutral-200);--ngs-filter-builder-group-operation-hover-bg: var(--color-neutral-600);--ngs-filter-builder-group-operation-active-bg: var(--color-neutral-650);--ngs-filter-builder-group-operation-hover-color: var(--color-neutral-100);--ngs-filter-builder-group-operation-active-color: var(--color-neutral-50)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "directive", type: MenuContent, selector: "[ngsMenuContent]" }, { kind: "directive", type: MenuOptionGroupDirective, selector: "[ngsMenuOptionGroup]", inputs: ["multiple"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty"], exportAs: ["ngsFormField"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "ariaLabel", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "directive", type: AutoFocusDirective, selector: "[ngsAutoFocus]", inputs: ["ngsAutoFocus"], exportAs: ["ngsAutoFocus"] }, { kind: "directive", type: FocusElementDirective, selector: "[ngsFocusElement]", inputs: ["checkChildren"], outputs: ["elementFocused", "elementBlurred"], exportAs: ["ngsFocusElement"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "directive", type: FilterBuilderOperationDefDirective, selector: "[ngsFilterBuilderOperationDef]", inputs: ["ngsFilterBuilderOperationDef", "allowedDataTypes"] }, { kind: "directive", type: FilterBuilderOperationNameDirective, selector: "[ngsFilterBuilderOperationName]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FilterBuilder, decorators: [{
             type: Component,
@@ -322,7 +335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         FilterBuilderOperationNameDirective
                     ], host: {
                         'class': 'ngs-filter-builder'
-                    }, template: "@if (_isServer) {\n  <ng-content/>\n}\n\n<ng-template #itemsTpl let-items>\n  <div class=\"group\">\n    @for (item of items; track item; let index = $index) {\n      @if (_isGroup(item)) {\n        <div class=\"flex items-center group-operations\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button [ngsMenuTriggerFor]=\"nestedGroupOperationsMenu\" class=\"group-operation\">\n            {{ getSelectedGroupOperationName(item) }}\n          </button>\n          <div [ngsMenuTriggerFor]=\"addGroupMenu\" class=\"add\">\n            <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n          </div>\n          <ngs-menu #nestedGroupOperationsMenu=\"ngsMenu\">\n            <div ngsMenuOptionGroup [(ngModel)]=\"item['logicalOperator']\">\n              @for (groupOperation of groupOperations(); track groupOperation.id) {\n                <ngs-option [value]=\"groupOperation.id\">{{ groupOperation.name }}</ngs-option>\n              }\n            </div>\n          </ngs-menu>\n          <ngs-menu #addGroupMenu=\"ngsMenu\">\n            <button ngs-menu-item (click)=\"addCondition(item)\">Add Condition</button>\n            <button ngs-menu-item (click)=\"addGroup(item)\">Add Group</button>\n          </ngs-menu>\n        </div>\n        @if (item['value'].length > 0) {\n          <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: item['value'] }\" />\n        }\n      } @else if (_isCondition(item)) {\n        <div class=\"condition\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button class=\"condition-field\"\n                  [ngsMenuTriggerFor]=\"fieldsMenu\">{{ getConditionField(item['value'][0])?.name }}</button>\n          <button class=\"condition-operation\"\n                  [ngsMenuTriggerFor]=\"operationsMenu\">\n            <ng-template [ngTemplateOutlet]=\"getConditionOperation(item['value'][1])?.name\" />\n          </button>\n          <div class=\"relative\">\n            @if (editItem && editItem === item) {\n              <div class=\"absolute start-0 top-0 -translate-y-1/2\">\n                @switch (getFieldType(editItem)) {\n                  @case ('array') {\n                    @switch (editItem['value'][1]) {\n                      @case ('equals') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\"\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (ngModelChange)=\"_emitChangeEvent()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n\n                      @case ('isAnyOf') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\" multiple\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (closed)=\"selectClosed()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n\n                  @case ('number') {\n                    @switch (editItem['value'][1]) {\n                      @case ('isBetween') {\n                        <div class=\"flex gap-2 items-center\"\n                             ngsFocusElement (elementBlurred)=\"cancelEdit()\">\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput ngsAutoFocus\n                                   [(ngModel)]=\"item['value'][2][0]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                          <div class=\"text-neutral-500\">&ndash;</div>\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput\n                                   [(ngModel)]=\"item['value'][2][1]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                        </div>\n                      }\n                      @default {\n                        <ngs-form-field class=\"form-field-number\">\n                          <input type=\"number\" ngsInput ngsAutoFocus\n                                 (blur)=\"cancelEdit()\"\n                                 [(ngModel)]=\"item['value'][2]\"\n                                 (ngModelChange)=\"_emitChangeEvent()\">\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n\n                  @default {\n                    <ngs-form-field class=\"form-field\">\n                      <input type=\"text\" ngsInput ngsAutoFocus\n                             (blur)=\"cancelEdit()\"\n                             [(ngModel)]=\"item['value'][2]\"\n                             (ngModelChange)=\"_emitChangeEvent()\">\n                    </ngs-form-field>\n                  }\n                }\n              </div>\n            } @else {\n              @if (item['value'][1] !== 'isBlank' && item['value'][1] !== 'isNotBlank') {\n                @if (isValueNotEmpty(item)) {\n                  @if (getFieldType(item) === 'array') {\n                    @if (item['value'][1] === 'equals') {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        {{ getDataSourceItemNameById(item, item['value'][2]) }}\n                      </button>\n                    } @else {\n                    <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                      @for (dataSourceItemId of item['value'][2]; track dataSourceItemId; let last = $last) {\n                        <span>{{ getDataSourceItemNameById(item, dataSourceItemId) }}</span>\n                        @if (!last) {\n                          <span class=\"text-neutral-500\">|</span>\n                        }\n                      }\n                    </button>\n                    }\n                  } @else {\n                    @if (item['value'][1] === 'isBetween') {\n                      <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2][0] }}</span>\n                        <span class=\"text-neutral-500\">&ndash;</span>\n                        <span>{{ item['value'][2][1] }}</span>\n                      </button>\n                    } @else {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2] }}</span>\n                      </button>\n                    }\n                  }\n                } @else {\n                  <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                    <span i18n>&lt;enter a value&gt;</span>\n                  </button>\n                }\n              }\n            }\n          </div>\n        </div>\n        <ngs-menu #fieldsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [(ngModel)]=\"item['value'][0]\">\n              @for (fieldDef of fieldDefs(); track fieldDef) {\n                <ngs-option [value]=\"fieldDef.dataField\"\n                            (click)=\"selectConditionField(item, fieldDef)\">{{ fieldDef.name }}</ngs-option>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n        <ngs-menu #operationsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][1]\">\n              @for (operation of _operationDefs; track operation.id()) {\n                <div [hidden]=\"!isOperationAllowedForCondition(item['value'][0], operation.id())\">\n                  <ngs-option [value]=\"operation.id()\" (click)=\"operationChanged(item, operation.id())\">\n                    <div class=\"flex items-center gap-3\">\n                      @if (operation.operationIcon()) {\n                        <ng-template [ngTemplateOutlet]=\"operationIconTemplateRef(operation)\" />\n                      }\n                      <div>\n                        <ng-template [ngTemplateOutlet]=\"operationNameTemplateRef(operation)\" />\n                      </div>\n                    </div>\n                  </ngs-option>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n      }\n    }\n  </div>\n</ng-template>\n\n<div class=\"group\">\n  <div class=\"flex items-center group-operations\">\n    <button [ngsMenuTriggerFor]=\"groupOperationsMenu\" class=\"group-operation\">\n      {{ getSelectedGroupOperationName() }}\n    </button>\n    <div [ngsMenuTriggerFor]=\"addMenu\" class=\"add\">\n      <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: _value }\" />\n</div>\n\n<ngs-menu #groupOperationsMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <div ngsMenuOptionGroup [(ngModel)]=\"_logicalOperator\" (ngModelChange)=\"_emitChangeEvent()\">\n      @for (operation of groupOperations(); track operation.id) {\n        <ngs-option [value]=\"operation.id\">{{ operation.name }}</ngs-option>\n      }\n    </div>\n  </ng-template>\n</ngs-menu>\n<ngs-menu #addMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <button ngs-menu-item (click)=\"addCondition()\">Add Condition</button>\n    <button ngs-menu-item (click)=\"addGroup()\">Add Group</button>\n  </ng-template>\n</ngs-menu>\n\n<ng-container ngsFilterBuilderOperationDef=\"contains\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Contains</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"doesNotContain\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Does not contain</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"startsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Starts with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"endsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Ends with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"equals\" [allowedDataTypes]=\"['string', 'number', 'array', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"notEquals\" [allowedDataTypes]=\"['string', 'number', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Not equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isNotBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is not blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBetween\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is between</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isAnyOf\" [allowedDataTypes]=\"['array']\">\n  <ng-template ngsFilterBuilderOperationName>Is any of</ng-template>\n</ng-container>\n", styles: [":host{--ngs-filter-builder-group-operations-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-font-size: var(--text-tiny);--ngs-filter-builder-group-operation-color: var(--color-on-surface);--ngs-filter-builder-group-operation-bg: var(--color-surface-container);--ngs-filter-builder-group-operation-font-weight: 400;--ngs-filter-builder-group-operation-border-radius: .5rem;--ngs-filter-builder-group-operation-bpadding: 0 calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-group-operation-hover-color: var(--color-on-surface);--ngs-filter-builder-group-operation-hover-bg: var(--color-surface-container-high);--ngs-filter-builder-group-operation-active-color: var(--color-on-surface);--ngs-filter-builder-group-operation-active-bg: var(--color-surface-container-highest);--ngs-filter-builder-group-operation-border: 1px solid var(--color-outline-variant);--ngs-filter-builder-group-add-color: var(--color-primary);--ngs-filter-builder-group-add-hover-color: var(--color-primary);--ngs-filter-builder-group-margin: 0;--ngs-filter-builder-group-padding: 0;--ngs-filter-builder-group-gap: calc(var(--spacing, .25rem) * 4);--ngs-filter-builder-condition-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-field-font-size: var(--text-tiny);--ngs-filter-builder-condition-field-color: var(--color-on-primary-container);--ngs-filter-builder-condition-field-bg: var(--color-primary-container);--ngs-filter-builder-condition-field-font-weight: 400;--ngs-filter-builder-condition-field-border-radius: .5rem;--ngs-filter-builder-condition-field-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-hover-color: var(--color-on-primary-container);--ngs-filter-builder-condition-field-hover-bg: var(--color-primary-400);--ngs-filter-builder-condition-field-active-color: var(--color-on-primary);--ngs-filter-builder-condition-field-active-bg: var(--color-primary);--ngs-filter-builder-condition-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-operation-font-size: var(--text-tiny);--ngs-filter-builder-condition-operation-color: var(--color-on-secondary-container);--ngs-filter-builder-condition-operation-bg: var(--color-secondary-container);--ngs-filter-builder-condition-operation-font-weight: 400;--ngs-filter-builder-condition-operation-border-radius: .5rem;--ngs-filter-builder-condition-operation-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-operation-hover-color: var(--color-on-secondary-container);--ngs-filter-builder-condition-operation-hover-bg: var(--color-secondary-400);--ngs-filter-builder-condition-operation-active-color: var(--color-on-secondary);--ngs-filter-builder-condition-operation-active-bg: var(--color-secondary);--ngs-filter-builder-condition-value-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-value-font-size: var(--text-tiny);--ngs-filter-builder-condition-value-color: var(--color-on-surface);--ngs-filter-builder-condition-value-bg: var(--color-surface-container-high);--ngs-filter-builder-condition-value-font-weight: 400;--ngs-filter-builder-condition-value-border-radius: .5rem;--ngs-filter-builder-condition-value-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-value-hover-color: var(--color-on-surface);--ngs-filter-builder-condition-value-hover-bg: var(--color-surface-container-highest);--ngs-filter-builder-condition-remove-color: var(--color-error);--ngs-filter-builder-condition-remove-hover-color: var(--color-error);display:block}:host ::ng-deep .ngs-form-field-infix{--ngs-form-field-container-height: 46px !important;--ngs-form-field-container-vertical-padding: 12px !important}:host ::ng-deep .subscript-wrapper{display:none}:host .form-field{width:200px}:host .form-field-number{width:140px}:host .group-operations{gap:var(--ngs-filter-builder-group-operations-gap)}:host .group{margin:var(--ngs-filter-builder-group-margin);padding:var(--ngs-filter-builder-group-padding);display:flex;flex-direction:column;gap:var(--ngs-filter-builder-group-gap)}:host .group .group{margin-left:calc(var(--spacing, .25rem) * 4)}:host .icon:empty{display:none}:host .group-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-group-operation-height);font-size:var(--ngs-filter-builder-group-operation-font-size);font-weight:var(--ngs-filter-builder-group-operation-font-weight);color:var(--ngs-filter-builder-group-operation-color);background:var(--ngs-filter-builder-group-operation-bg);border:var(--ngs-filter-builder-group-operation-border);border-radius:var(--ngs-filter-builder-group-operation-border-radius);padding:var(--ngs-filter-builder-group-operation-bpadding)}:host .group-operation:hover{color:var(--ngs-filter-builder-group-operation-hover-color);background:var(--ngs-filter-builder-group-operation-hover-bg)}:host .group-operation:active,:host .group-operation.active{color:var(--ngs-filter-builder-group-operation-active-color);background:var(--ngs-filter-builder-group-operation-active-bg)}:host .condition{display:flex;align-items:center;gap:var(--ngs-filter-builder-condition-gap)}:host .condition-field{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-condition-field-height);font-size:var(--ngs-filter-builder-condition-field-font-size);font-weight:var(--ngs-filter-builder-condition-field-font-weight);color:var(--ngs-filter-builder-condition-field-color);background:var(--ngs-filter-builder-condition-field-bg);border-radius:var(--ngs-filter-builder-condition-field-border-radius);padding:var(--ngs-filter-builder-condition-field-bpadding)}:host .condition-field:hover{color:var(--ngs-filter-builder-condition-field-hover-color);background:var(--ngs-filter-builder-condition-field-hover-bg)}:host .add{line-height:0;color:var(--ngs-filter-builder-group-add-color);cursor:pointer}:host .add:hover{color:var(--ngs-filter-builder-group-add-hover-color)}:host .remove{line-height:0;color:var(--ngs-filter-builder-condition-remove-color);cursor:pointer}:host .remove:hover{color:var(--ngs-filter-builder-condition-remove-hover-color)}:host .condition-field:active,:host .condition-field.active{color:var(--ngs-filter-builder-condition-field-active-color);background:var(--ngs-filter-builder-condition-field-active-bg)}:host .condition-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-condition-operation-height);font-size:var(--ngs-filter-builder-condition-operation-font-size);font-weight:var(--ngs-filter-builder-condition-operation-font-weight);color:var(--ngs-filter-builder-condition-operation-color);background:var(--ngs-filter-builder-condition-operation-bg);border-radius:var(--ngs-filter-builder-condition-operation-border-radius);padding:var(--ngs-filter-builder-condition-operation-bpadding)}:host .condition-operation:hover{color:var(--ngs-filter-builder-condition-operation-hover-color);background:var(--ngs-filter-builder-condition-operation-hover-bg)}:host .condition-operation:active,:host .condition-operation.active{color:var(--ngs-filter-builder-condition-operation-active-color);background:var(--ngs-filter-builder-condition-operation-active-bg)}:host .condition-value{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-condition-value-height);font-size:var(--ngs-filter-builder-condition-value-font-size);font-weight:var(--ngs-filter-builder-condition-value-font-weight);color:var(--ngs-filter-builder-condition-value-color);background:var(--ngs-filter-builder-condition-value-bg);border-radius:var(--ngs-filter-builder-condition-value-border-radius);padding:var(--ngs-filter-builder-condition-value-bpadding)}:host .condition-value:hover{color:var(--ngs-filter-builder-condition-value-hover-color);background:var(--ngs-filter-builder-condition-value-hover-bg)}:host-context(html.dark){--ngs-filter-builder-group-operation-color: var(--color-neutral-200);--ngs-filter-builder-group-operation-hover-bg: var(--color-neutral-600);--ngs-filter-builder-group-operation-active-bg: var(--color-neutral-650);--ngs-filter-builder-group-operation-hover-color: var(--color-neutral-100);--ngs-filter-builder-group-operation-active-color: var(--color-neutral-50)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "@if (_isServer) {\n  <ng-content/>\n}\n\n<ng-template #itemsTpl let-items>\n  <div class=\"group\">\n    @for (item of items; track item; let index = $index) {\n      @if (_isGroup(item)) {\n        <div class=\"flex items-center group-operations\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button [ngsMenuTriggerFor]=\"nestedGroupOperationsMenu\"\n                  #nestedGroupOperationsMenuTrigger=\"ngsMenuTrigger\"\n                  class=\"group-operation\">\n            {{ getSelectedGroupOperationName(item) }}\n          </button>\n          <div [ngsMenuTriggerFor]=\"addGroupMenu\" class=\"add\">\n            <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n          </div>\n          <ngs-menu #nestedGroupOperationsMenu=\"ngsMenu\">\n            <div ngsMenuOptionGroup [(ngModel)]=\"item['logicalOperator']\">\n              @for (groupOperation of groupOperations(); track groupOperation.id) {\n                <ngs-option [value]=\"groupOperation.id\"\n                            (click)=\"nestedGroupOperationsMenuTrigger.closeMenu('click')\">{{ groupOperation.name }}\n                </ngs-option>\n              }\n            </div>\n          </ngs-menu>\n          <ngs-menu #addGroupMenu=\"ngsMenu\">\n            <button ngs-menu-item (click)=\"addCondition(item)\">Add Condition</button>\n            <button ngs-menu-item (click)=\"addGroup(item)\">Add Group</button>\n          </ngs-menu>\n        </div>\n        @if (item['value'].length > 0) {\n          <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: item['value'] }\"/>\n        }\n      } @else if (_isCondition(item)) {\n        <div class=\"condition\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button class=\"condition-field\"\n                  #fieldsMenuTrigger=\"ngsMenuTrigger\"\n                  [ngsMenuTriggerFor]=\"fieldsMenu\">{{ getConditionField(item['value'][0])?.name }}\n          </button>\n          <button class=\"condition-operation\"\n                  #operationsMenuTrigger=\"ngsMenuTrigger\"\n                  [ngsMenuTriggerFor]=\"operationsMenu\">\n            <ng-template [ngTemplateOutlet]=\"getConditionOperation(item['value'][1])?.name\"/>\n          </button>\n          <div class=\"relative\">\n            @if (editItem && editItem === item) {\n              <div class=\"absolute start-0 top-0 -translate-y-1/2\">\n                @switch (getFieldType(editItem)) {\n                  @case ('array') {\n                    @switch (editItem['value'][1]) {\n                      @case ('equals') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\"\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (ngModelChange)=\"_emitChangeEvent()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                      @case ('isAnyOf') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\" multiple\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"_tempMultipleValue\"\n                                      (closed)=\"selectClosed()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n                  @case ('number') {\n                    @switch (editItem['value'][1]) {\n                      @case ('isBetween') {\n                        <div class=\"flex gap-2 items-center\"\n                             ngsFocusElement (elementBlurred)=\"cancelEdit()\">\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput ngsAutoFocus\n                                   [(ngModel)]=\"item['value'][2][0]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                          <div class=\"text-neutral-500\">&ndash;</div>\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput\n                                   [(ngModel)]=\"item['value'][2][1]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                        </div>\n                      }\n                      @default {\n                        <ngs-form-field class=\"form-field-number\">\n                          <input type=\"number\" ngsInput ngsAutoFocus\n                                 (blur)=\"cancelEdit()\"\n                                 [(ngModel)]=\"item['value'][2]\"\n                                 (ngModelChange)=\"_emitChangeEvent()\">\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n                  @default {\n                    <ngs-form-field class=\"form-field\">\n                      <input type=\"text\" ngsInput ngsAutoFocus\n                             (blur)=\"cancelEdit()\"\n                             [(ngModel)]=\"item['value'][2]\"\n                             (ngModelChange)=\"_emitChangeEvent()\">\n                    </ngs-form-field>\n                  }\n                }\n              </div>\n            } @else {\n              @if (item['value'][1] !== 'isBlank' && item['value'][1] !== 'isNotBlank') {\n                @if (isValueNotEmpty(item)) {\n                  @if (getFieldType(item) === 'array') {\n                    @if (item['value'][1] === 'equals') {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        {{ getDataSourceItemNameById(item, item['value'][2]) }}\n                      </button>\n                    } @else {\n                      <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                        @for (dataSourceItemId of item['value'][2]; track dataSourceItemId; let last = $last) {\n                          <span>{{ getDataSourceItemNameById(item, dataSourceItemId) }}</span>\n                          @if (!last) {\n                            <span class=\"text-neutral-500\">|</span>\n                          }\n                        }\n                      </button>\n                    }\n                  } @else {\n                    @if (item['value'][1] === 'isBetween') {\n                      <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2][0] }}</span>\n                        <span class=\"text-neutral-500\">&ndash;</span>\n                        <span>{{ item['value'][2][1] }}</span>\n                      </button>\n                    } @else {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2] }}</span>\n                      </button>\n                    }\n                  }\n                } @else {\n                  <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                    <span i18n>&lt;enter a value&gt;</span>\n                  </button>\n                }\n              }\n            }\n          </div>\n        </div>\n        <ngs-menu #fieldsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][0]\">\n              @for (fieldDef of fieldDefs(); track fieldDef) {\n                <ngs-option [value]=\"fieldDef.dataField\"\n                            (click)=\"selectConditionField(item, fieldDef); fieldsMenuTrigger.closeMenu('click')\">{{ fieldDef.name }}\n                </ngs-option>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n        <ngs-menu #operationsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][1]\">\n              @for (operation of _operationDefs; track operation.id()) {\n                <div [hidden]=\"!isOperationAllowedForCondition(item['value'][0], operation.id())\">\n                  <ngs-option [value]=\"operation.id()\"\n                              (click)=\"operationChanged(item, operation.id()); operationsMenuTrigger.closeMenu('click')\">\n                    <div class=\"flex items-center gap-3\">\n                      @if (operation.operationIcon()) {\n                        <ng-template [ngTemplateOutlet]=\"operationIconTemplateRef(operation)\"/>\n                      }\n                      <div>\n                        <ng-template [ngTemplateOutlet]=\"operationNameTemplateRef(operation)\"/>\n                      </div>\n                    </div>\n                  </ngs-option>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n      }\n    }\n  </div>\n</ng-template>\n\n<div class=\"group\">\n  <div class=\"flex items-center group-operations\">\n    <button [ngsMenuTriggerFor]=\"groupOperationsMenu\"\n            #groupOperationsMenuTrigger=\"ngsMenuTrigger\"\n            class=\"group-operation\">\n      {{ getSelectedGroupOperationName() }}\n    </button>\n    <div [ngsMenuTriggerFor]=\"addMenu\" class=\"add\">\n      <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: _value }\"/>\n</div>\n\n<ngs-menu #groupOperationsMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <div ngsMenuOptionGroup [(ngModel)]=\"_logicalOperator\" (ngModelChange)=\"_emitChangeEvent()\">\n      @for (operation of groupOperations(); track operation.id) {\n        <ngs-option [value]=\"operation.id\"\n                    (click)=\"groupOperationsMenuTrigger.closeMenu('click')\">{{ operation.name }}\n        </ngs-option>\n      }\n    </div>\n  </ng-template>\n</ngs-menu>\n<ngs-menu #addMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <button ngs-menu-item (click)=\"addCondition()\">Add Condition</button>\n    <button ngs-menu-item (click)=\"addGroup()\">Add Group</button>\n  </ng-template>\n</ngs-menu>\n\n<ng-container ngsFilterBuilderOperationDef=\"contains\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Contains</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"doesNotContain\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Does not contain</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"startsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Starts with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"endsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Ends with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"equals\" [allowedDataTypes]=\"['string', 'number', 'array', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"notEquals\" [allowedDataTypes]=\"['string', 'number', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Not equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isNotBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is not blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBetween\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is between</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isAnyOf\" [allowedDataTypes]=\"['array']\">\n  <ng-template ngsFilterBuilderOperationName>Is any of</ng-template>\n</ng-container>\n", styles: [":host{--ngs-filter-builder-group-operations-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-font-size: var(--text-tiny);--ngs-filter-builder-group-operation-color: var(--color-on-surface);--ngs-filter-builder-group-operation-bg: var(--color-surface-container);--ngs-filter-builder-group-operation-font-weight: 400;--ngs-filter-builder-group-operation-border-radius: .5rem;--ngs-filter-builder-group-operation-bpadding: 0 calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-group-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-group-operation-hover-color: var(--color-on-surface);--ngs-filter-builder-group-operation-hover-bg: var(--color-surface-container-high);--ngs-filter-builder-group-operation-active-color: var(--color-on-surface);--ngs-filter-builder-group-operation-active-bg: var(--color-surface-container-highest);--ngs-filter-builder-group-operation-border: 1px solid var(--color-border);--ngs-filter-builder-group-add-color: var(--color-primary);--ngs-filter-builder-group-add-hover-color: var(--color-primary);--ngs-filter-builder-group-margin: 0;--ngs-filter-builder-group-padding: 0;--ngs-filter-builder-group-gap: calc(var(--spacing, .25rem) * 4);--ngs-filter-builder-condition-gap: calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-field-font-size: var(--text-tiny);--ngs-filter-builder-condition-field-color: var(--color-on-primary-container);--ngs-filter-builder-condition-field-bg: var(--color-primary-container);--ngs-filter-builder-condition-field-font-weight: 400;--ngs-filter-builder-condition-field-border-radius: .5rem;--ngs-filter-builder-condition-field-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-field-hover-color: var(--color-on-primary-container);--ngs-filter-builder-condition-field-hover-bg: var(--color-primary-400);--ngs-filter-builder-condition-field-active-color: var(--color-on-primary);--ngs-filter-builder-condition-field-active-bg: var(--color-primary);--ngs-filter-builder-condition-operation-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-operation-font-size: var(--text-tiny);--ngs-filter-builder-condition-operation-color: var(--color-on-secondary-container);--ngs-filter-builder-condition-operation-bg: var(--color-secondary-container);--ngs-filter-builder-condition-operation-font-weight: 400;--ngs-filter-builder-condition-operation-border-radius: .5rem;--ngs-filter-builder-condition-operation-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-operation-hover-color: var(--color-on-secondary-container);--ngs-filter-builder-condition-operation-hover-bg: var(--color-secondary-400);--ngs-filter-builder-condition-operation-active-color: var(--color-on-secondary);--ngs-filter-builder-condition-operation-active-bg: var(--color-secondary);--ngs-filter-builder-condition-value-height: calc(var(--spacing, .25rem) * 7);--ngs-filter-builder-condition-value-font-size: var(--text-tiny);--ngs-filter-builder-condition-value-color: var(--color-on-surface);--ngs-filter-builder-condition-value-bg: var(--color-surface-container-high);--ngs-filter-builder-condition-value-font-weight: 400;--ngs-filter-builder-condition-value-border-radius: .5rem;--ngs-filter-builder-condition-value-bpadding: calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);--ngs-filter-builder-condition-value-hover-color: var(--color-on-surface);--ngs-filter-builder-condition-value-hover-bg: var(--color-surface-container-highest);--ngs-filter-builder-condition-remove-color: var(--color-error);--ngs-filter-builder-condition-remove-hover-color: var(--color-error);display:block}:host ::ng-deep .ngs-form-field-infix{--ngs-form-field-container-height: 46px !important;--ngs-form-field-container-vertical-padding: 12px !important}:host ::ng-deep .subscript-wrapper{display:none}:host .form-field{width:200px}:host .form-field-number{width:140px}:host .group-operations{gap:var(--ngs-filter-builder-group-operations-gap)}:host .group{margin:var(--ngs-filter-builder-group-margin);padding:var(--ngs-filter-builder-group-padding);display:flex;flex-direction:column;gap:var(--ngs-filter-builder-group-gap)}:host .group .group{margin-left:calc(var(--spacing, .25rem) * 4)}:host .icon:empty{display:none}:host .group-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-group-operation-height);font-size:var(--ngs-filter-builder-group-operation-font-size);font-weight:var(--ngs-filter-builder-group-operation-font-weight);color:var(--ngs-filter-builder-group-operation-color);background:var(--ngs-filter-builder-group-operation-bg);border:var(--ngs-filter-builder-group-operation-border);border-radius:var(--ngs-filter-builder-group-operation-border-radius);padding:var(--ngs-filter-builder-group-operation-bpadding)}:host .group-operation:hover{color:var(--ngs-filter-builder-group-operation-hover-color);background:var(--ngs-filter-builder-group-operation-hover-bg)}:host .group-operation:active,:host .group-operation.active{color:var(--ngs-filter-builder-group-operation-active-color);background:var(--ngs-filter-builder-group-operation-active-bg)}:host .condition{display:flex;align-items:center;gap:var(--ngs-filter-builder-condition-gap)}:host .condition-field{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-condition-field-height);font-size:var(--ngs-filter-builder-condition-field-font-size);font-weight:var(--ngs-filter-builder-condition-field-font-weight);color:var(--ngs-filter-builder-condition-field-color);background:var(--ngs-filter-builder-condition-field-bg);border-radius:var(--ngs-filter-builder-condition-field-border-radius);padding:var(--ngs-filter-builder-condition-field-bpadding)}:host .condition-field:hover{color:var(--ngs-filter-builder-condition-field-hover-color);background:var(--ngs-filter-builder-condition-field-hover-bg)}:host .add{line-height:0;color:var(--ngs-filter-builder-group-add-color);cursor:pointer}:host .add:hover{color:var(--ngs-filter-builder-group-add-hover-color)}:host .remove{line-height:0;color:var(--ngs-filter-builder-condition-remove-color);cursor:pointer}:host .remove:hover{color:var(--ngs-filter-builder-condition-remove-hover-color)}:host .condition-field:active,:host .condition-field.active{color:var(--ngs-filter-builder-condition-field-active-color);background:var(--ngs-filter-builder-condition-field-active-bg)}:host .condition-operation{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-condition-operation-height);font-size:var(--ngs-filter-builder-condition-operation-font-size);font-weight:var(--ngs-filter-builder-condition-operation-font-weight);color:var(--ngs-filter-builder-condition-operation-color);background:var(--ngs-filter-builder-condition-operation-bg);border-radius:var(--ngs-filter-builder-condition-operation-border-radius);padding:var(--ngs-filter-builder-condition-operation-bpadding)}:host .condition-operation:hover{color:var(--ngs-filter-builder-condition-operation-hover-color);background:var(--ngs-filter-builder-condition-operation-hover-bg)}:host .condition-operation:active,:host .condition-operation.active{color:var(--ngs-filter-builder-condition-operation-active-color);background:var(--ngs-filter-builder-condition-operation-active-bg)}:host .condition-value{display:flex;align-items:center;width:max-content;-webkit-user-select:none;user-select:none;cursor:pointer;height:var(--ngs-filter-builder-condition-value-height);font-size:var(--ngs-filter-builder-condition-value-font-size);font-weight:var(--ngs-filter-builder-condition-value-font-weight);color:var(--ngs-filter-builder-condition-value-color);background:var(--ngs-filter-builder-condition-value-bg);border-radius:var(--ngs-filter-builder-condition-value-border-radius);padding:var(--ngs-filter-builder-condition-value-bpadding)}:host .condition-value:hover{color:var(--ngs-filter-builder-condition-value-hover-color);background:var(--ngs-filter-builder-condition-value-hover-bg)}:host-context(html.dark){--ngs-filter-builder-group-operation-color: var(--color-neutral-200);--ngs-filter-builder-group-operation-hover-bg: var(--color-neutral-600);--ngs-filter-builder-group-operation-active-bg: var(--color-neutral-650);--ngs-filter-builder-group-operation-hover-color: var(--color-neutral-100);--ngs-filter-builder-group-operation-active-color: var(--color-neutral-50)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], fieldDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldDefs", required: false }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], groupOperations: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupOperations", required: false }] }], customOperations: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOperations", required: false }] }], _prebuiltOperationDefs: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FilterBuilderOperationDefDirective), { isSignal: true }] }], _customOperationDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FilterBuilderOperationDefDirective), { isSignal: true }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
 
 /**

package/fesm2022/ngstarter-ui-components-filter-builder.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngstarter-ui-components-filter-builder.mjs","sources":["../../../projects/components/filter-builder/src/filter-builder-operation-name.directive.ts","../../../projects/components/filter-builder/src/filter-builder-operation-icon.directive.ts","../../../projects/components/filter-builder/src/filter-builder-operation-def.directive.ts","../../../projects/components/filter-builder/src/filter-builder/filter-builder.ts","../../../projects/components/filter-builder/src/filter-builder/filter-builder.html","../../../projects/components/filter-builder/ngstarter-ui-components-filter-builder.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[ngsFilterBuilderOperationName]',\n  standalone: true\n})\nexport class FilterBuilderOperationNameDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[ngsFilterBuilderOperationIcon]',\n  standalone: true\n})\nexport class FilterBuilderOperationIconDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, contentChild, input } from '@angular/core';\nimport { FilterBuilderOperationNameDirective } from './filter-builder-operation-name.directive';\nimport { FilterBuilderOperationIconDirective } from './filter-builder-operation-icon.directive';\n\n@Directive({\n  selector: '[ngsFilterBuilderOperationDef]',\n  standalone: true\n})\nexport class FilterBuilderOperationDefDirective {\n  id = input('', {\n    alias: 'ngsFilterBuilderOperationDef'\n  });\n  allowedDataTypes = input<string[]>([]);\n  readonly operationName = contentChild(FilterBuilderOperationNameDirective);\n  readonly operationIcon = contentChild(FilterBuilderOperationIconDirective);\n}\n","import {\n  AfterViewInit,\n  ChangeDetectorRef,\n  Component,\n  inject,\n  OnInit,\n  output,\n  PLATFORM_ID,\n  viewChildren,\n  contentChildren, TemplateRef, input\n} from '@angular/core';\nimport { CommonModule, isPlatformServer, NgTemplateOutlet } from '@angular/common';\nimport { FilterBuilderOperationDefDirective } from '../filter-builder-operation-def.directive';\nimport {\n  FilterBuilderCondition,\n  FilterBuilderFieldDataSourceItem,\n  FilterBuilderFieldDef,\n  FilterBuilderGroup,\n  FilterBuilderItemType\n} from '../types';\nimport { Icon } from '@ngstarter-ui/components/icon';\nimport { MenuTrigger, Menu, MenuItem, MenuContent, MenuOptionGroupDirective } from '@ngstarter-ui/components/menu';\nimport { FormsModule } from '@angular/forms';\nimport { Select, Option } from '@ngstarter-ui/components/select';\nimport { FilterBuilderOperationNameDirective } from '../filter-builder-operation-name.directive';\nimport { AutoFocusDirective, FocusElementDirective } from '@ngstarter-ui/components/core';\nimport { Input } from '@ngstarter-ui/components/input';\nimport { FormField } from '@ngstarter-ui/components/form-field';\n\n@Component({\n  selector: 'ngs-filter-builder',\n  exportAs: 'ngsFilterBuilder',\n  imports: [\n    CommonModule,\n    Icon,\n    MenuTrigger,\n    Menu,\n    MenuContent,\n    MenuOptionGroupDirective,\n    FormsModule,\n    MenuItem,\n    FormField,\n    Select,\n    Option,\n    AutoFocusDirective,\n    FocusElementDirective,\n    Input,\n    FilterBuilderOperationDefDirective,\n    FilterBuilderOperationNameDirective\n  ],\n  templateUrl: './filter-builder.html',\n  styleUrl: './filter-builder.scss',\n  host: {\n    'class': 'ngs-filter-builder'\n  },\n})\nexport class FilterBuilder implements OnInit, AfterViewInit {\n  protected _cdr = inject(ChangeDetectorRef);\n  protected _isServer = isPlatformServer(inject(PLATFORM_ID));\n  protected _operationAllowedTypesMap: Map<string, string[]> = new Map();\n  private _resetMethodMap: { [prop: string]: (condition: FilterBuilderCondition) => void } = {\n    '_resetStringValue': this._resetStringValue,\n    '_resetBooleanValue': this._resetBooleanValue,\n    '_resetArrayValue': this._resetArrayValue,\n    '_resetNumberValue': this._resetNumberValue,\n  };\n\n  value = input<FilterBuilderGroup[]>([]);\n  fieldDefs = input<FilterBuilderFieldDef[]>([]);\n  categories = input([]);\n  groupOperations = input([\n    {\n      id: 'and',\n      name: 'And'\n    },\n    {\n      id: 'or',\n      name: 'Or'\n    }\n  ]);\n  customOperations = input([]);\n\n  protected _logicalOperator = this.groupOperations()[0].id;\n  readonly _prebuiltOperationDefs = viewChildren(FilterBuilderOperationDefDirective);\n  readonly _customOperationDefs = contentChildren(FilterBuilderOperationDefDirective);\n  protected _operationDefs: FilterBuilderOperationDefDirective[] = [];\n\n  readonly valueChanged = output<FilterBuilderGroup[]>();\n\n  protected _value: FilterBuilderGroup[] = [];\n  protected _operations: any[] = [];\n  protected editItem: FilterBuilderCondition | undefined;\n\n  ngOnInit() {\n    if (this.value().length) {\n      if (!this._isGroup(this.value()[0])) {\n        throw new Error('Invalid filter value, first element should be a filter group');\n      }\n\n      this._logicalOperator = this.value()[0]['logicalOperator'] as string;\n      this._value = JSON.parse(JSON.stringify(this.value()[0]['value']));\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this._operationDefs = [...this._prebuiltOperationDefs(), ...this._customOperationDefs()];\n    this._operationDefs.forEach(operationDef => {\n      this._operations.push({\n        id: operationDef.id(),\n        name: operationDef.operationName()?.templateRef\n      });\n      operationDef.allowedDataTypes().forEach((allowedType: string) => {\n        if (!this._operationAllowedTypesMap.has(allowedType)) {\n          this._operationAllowedTypesMap.set(allowedType, []);\n        }\n\n        const allowedTypeValue = this._operationAllowedTypesMap.get(allowedType) as string[];\n        allowedTypeValue.push(operationDef.id());\n        this._operationAllowedTypesMap.set(allowedType, allowedTypeValue);\n      });\n    });\n    this._cdr.detectChanges();\n  }\n\n  addCondition(targetGroup?: FilterBuilderGroup) {\n    const value = !targetGroup ? this._value : targetGroup.value;\n    value.push(\n      {\n        value: [this.fieldDefs()[0].dataField, this._operations[0].id, '']\n      }\n    );\n  }\n\n  addGroup(targetGroup?: FilterBuilderGroup) {\n    const value = !targetGroup ? this._value : targetGroup.value;\n    value.push(\n      {\n        logicalOperator: this.groupOperations()[0].id,\n        value: []\n      }\n    );\n  }\n\n  getConditionField(dataField: string): FilterBuilderFieldDef | undefined {\n    return this.fieldDefs().find(field => field.dataField === dataField);\n  }\n\n  getConditionOperation(id: string) {\n    return this._operations.find(operation => operation.id === id);\n  }\n\n  getSelectedGroupOperationName(targetGroup?: FilterBuilderGroup): string {\n    const groupLogicalOperatorId = targetGroup ? targetGroup.logicalOperator : this._logicalOperator\n    return this.groupOperations().find(groupOperator => groupOperator.id === groupLogicalOperatorId)?.name || '';\n  }\n\n  selectConditionField(item: FilterBuilderCondition, field: FilterBuilderFieldDef): void {\n    this.editItem = undefined;\n    let allowedTypes = this._operationAllowedTypesMap.get(field.dataType) as string[];\n    item['value'][1] = allowedTypes[0];\n    this._resetValue(field, item);\n    this._emitChangeEvent();\n  }\n\n  operationChanged(item: FilterBuilderCondition, operation: string): void {\n    this.editItem = undefined;\n    const oldOperation = item['value'][1];\n\n    if (oldOperation === 'equals' && operation === 'isAnyOf') {\n      item['value'][2] = [];\n    } else if (oldOperation === 'isAnyOf' && operation === 'equals') {\n      item['value'][2] = null;\n    }\n\n    if (oldOperation === 'isBetween' && operation !== 'isBetween') {\n      item['value'][2] = null;\n    } else if (oldOperation !== 'isBetween' && operation === 'isBetween') {\n      item['value'][2] = [];\n    }\n\n    if (['isNotBlank', 'isBlank'].includes(operation)) {\n      item['value'][2] = null;\n    }\n\n    item['value'][1] = operation;\n    this._emitChangeEvent();\n  }\n\n  removeCondition(index: number, items: FilterBuilderItemType[]): void {\n    items.splice(index, 1);\n    this._emitChangeEvent();\n  }\n\n  isOperationAllowedForCondition(dataField: string, operationId: string): boolean {\n    const fieldDef = this.fieldDefs().find(f =>\n      f.dataField === dataField\n    ) as FilterBuilderFieldDef;\n\n    let allowedTypes = this._operationAllowedTypesMap.get(fieldDef.dataType);\n\n    if (!allowedTypes) {\n      throw new Error('There are not operations for the datatype: ' + fieldDef.dataType);\n    }\n\n    return allowedTypes.includes(operationId);\n  }\n\n  modifyValue(item: FilterBuilderCondition): void {\n    this.editItem = item;\n  }\n\n  getFieldType(item: FilterBuilderCondition): string {\n    return (this.fieldDefs().find(f =>\n      f.dataField === item['value'][0]\n    ) as FilterBuilderFieldDef).dataType;\n  }\n\n  isValueNotEmpty(item: FilterBuilderCondition): boolean {\n    if (this.getFieldType(item) === 'array') {\n      if (item['value'][1] === 'equals') {\n        return item['value'][2] !== null && item['value'][2] !== '';\n      } else {\n        return item['value'][2].length > 0;\n      }\n    }\n\n    if (item['value'][1] === 'isBetween') {\n      return item['value'][2].length === 2 && item['value'][2][0] !== null && item['value'][2][1] !== null;\n    }\n\n    return item['value'][2] !== null && item['value'][2] !== '';\n  }\n\n  cancelEdit(delay = 0): void {\n    setTimeout(() => {\n      this.editItem = undefined;\n      this._cdr.detectChanges();\n    }, delay);\n  }\n\n  getOptions(item: FilterBuilderCondition): FilterBuilderFieldDataSourceItem[] {\n    const fieldDef = this._getFieldDef(item);\n    return fieldDef.lookup?.dataSource as FilterBuilderFieldDataSourceItem[];\n  }\n\n  getDataSourceItemNameById(item: FilterBuilderCondition, dataSourceItemId: string): string {\n    const fieldDef = this._getFieldDef(item);\n    return (fieldDef.lookup?.dataSource as FilterBuilderFieldDataSourceItem[]).find(\n      item => item.id === dataSourceItemId\n    )?.name || '';\n  }\n\n  selectBlur(event: FocusEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    const select = event.target as HTMLElement;\n\n    setTimeout(() => {\n      const formField = select.closest('.ngs-form-field');\n\n      if (formField) {\n        this.cancelEdit();\n      }\n    }, 200);\n  }\n\n  selectClosed(): void {\n    this.cancelEdit();\n    this._emitChangeEvent();\n  }\n\n  protected operationIconTemplateRef(operation: FilterBuilderOperationDefDirective): TemplateRef<any> {\n    return operation.operationIcon()?.templateRef as TemplateRef<any>;\n  }\n\n  protected operationNameTemplateRef(operation: FilterBuilderOperationDefDirective): TemplateRef<any> {\n    return operation.operationName()?.templateRef as TemplateRef<any>;\n  }\n\n  protected _isGroup(item: FilterBuilderItemType): item is FilterBuilderGroup {\n    return 'logicalOperator' in item;\n  }\n\n  protected _isCondition(item: FilterBuilderItemType): item is FilterBuilderCondition {\n    return !('logicalOperator' in item);\n  }\n\n  protected _emitChangeEvent(): void {\n    const value = this._normalizeValue(this._value);\n\n    if (value.length > 0) {\n      this.valueChanged.emit([\n        {\n          logicalOperator: this._logicalOperator,\n          value: value\n        }\n      ]);\n    } else {\n      this.valueChanged.emit([]);\n    }\n  }\n\n  private _getFieldDef(condition: FilterBuilderCondition): FilterBuilderFieldDef {\n    return  this.fieldDefs().find(f =>\n      f.dataField === condition['value'][0]\n    ) as FilterBuilderFieldDef;\n  }\n\n  private _resetValue(field: FilterBuilderFieldDef, condition: FilterBuilderCondition): void {\n    const fieldDef = this.fieldDefs().find(f =>\n      f.dataField === field.dataField\n    ) as FilterBuilderFieldDef;\n    const resetMethod = '_reset' + this._capitalizeFirstLetter(fieldDef.dataType) + 'Value';\n    this._resetMethodMap[resetMethod](condition);\n  }\n\n  private _resetStringValue(condition: FilterBuilderCondition): void {\n    condition['value'][2] = '';\n  }\n\n  private _resetNumberValue(condition: FilterBuilderCondition): void {\n    condition['value'][2] = null;\n  }\n\n  private _resetArrayValue(condition: FilterBuilderCondition): void {\n    if (condition['value'][1] === 'equals') {\n      condition['value'][2] = null;\n    } else {\n      condition['value'][2] = [];\n    }\n  }\n\n  private _resetBooleanValue(condition: FilterBuilderCondition): void {\n    condition['value'][2] = false;\n  }\n\n  private _capitalizeFirstLetter(value: string) {\n    return value.charAt(0).toUpperCase() + value.slice(1);\n  }\n\n  private _normalizeValue(value: FilterBuilderItemType[]): FilterBuilderItemType[] {\n    let result: FilterBuilderItemType[] = [];\n    value.forEach(item => {\n      if (this._isGroup(item)) {\n        const groupValue = this._normalizeValue(item.value);\n\n        if (groupValue.length > 0) {\n          result = [...result, {\n            logicalOperator: item.logicalOperator,\n            value: groupValue\n          }];\n        }\n      } else {\n        if (this.isValueNotEmpty(item)) {\n          result.push(item);\n        }\n      }\n    });\n    return result;\n  }\n}\n","@if (_isServer) {\n  <ng-content/>\n}\n\n<ng-template #itemsTpl let-items>\n  <div class=\"group\">\n    @for (item of items; track item; let index = $index) {\n      @if (_isGroup(item)) {\n        <div class=\"flex items-center group-operations\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button [ngsMenuTriggerFor]=\"nestedGroupOperationsMenu\" class=\"group-operation\">\n            {{ getSelectedGroupOperationName(item) }}\n          </button>\n          <div [ngsMenuTriggerFor]=\"addGroupMenu\" class=\"add\">\n            <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n          </div>\n          <ngs-menu #nestedGroupOperationsMenu=\"ngsMenu\">\n            <div ngsMenuOptionGroup [(ngModel)]=\"item['logicalOperator']\">\n              @for (groupOperation of groupOperations(); track groupOperation.id) {\n                <ngs-option [value]=\"groupOperation.id\">{{ groupOperation.name }}</ngs-option>\n              }\n            </div>\n          </ngs-menu>\n          <ngs-menu #addGroupMenu=\"ngsMenu\">\n            <button ngs-menu-item (click)=\"addCondition(item)\">Add Condition</button>\n            <button ngs-menu-item (click)=\"addGroup(item)\">Add Group</button>\n          </ngs-menu>\n        </div>\n        @if (item['value'].length > 0) {\n          <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: item['value'] }\" />\n        }\n      } @else if (_isCondition(item)) {\n        <div class=\"condition\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button class=\"condition-field\"\n                  [ngsMenuTriggerFor]=\"fieldsMenu\">{{ getConditionField(item['value'][0])?.name }}</button>\n          <button class=\"condition-operation\"\n                  [ngsMenuTriggerFor]=\"operationsMenu\">\n            <ng-template [ngTemplateOutlet]=\"getConditionOperation(item['value'][1])?.name\" />\n          </button>\n          <div class=\"relative\">\n            @if (editItem && editItem === item) {\n              <div class=\"absolute start-0 top-0 -translate-y-1/2\">\n                @switch (getFieldType(editItem)) {\n                  @case ('array') {\n                    @switch (editItem['value'][1]) {\n                      @case ('equals') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\"\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (ngModelChange)=\"_emitChangeEvent()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n\n                      @case ('isAnyOf') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\" multiple\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (closed)=\"selectClosed()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n\n                  @case ('number') {\n                    @switch (editItem['value'][1]) {\n                      @case ('isBetween') {\n                        <div class=\"flex gap-2 items-center\"\n                             ngsFocusElement (elementBlurred)=\"cancelEdit()\">\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput ngsAutoFocus\n                                   [(ngModel)]=\"item['value'][2][0]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                          <div class=\"text-neutral-500\">&ndash;</div>\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput\n                                   [(ngModel)]=\"item['value'][2][1]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                        </div>\n                      }\n                      @default {\n                        <ngs-form-field class=\"form-field-number\">\n                          <input type=\"number\" ngsInput ngsAutoFocus\n                                 (blur)=\"cancelEdit()\"\n                                 [(ngModel)]=\"item['value'][2]\"\n                                 (ngModelChange)=\"_emitChangeEvent()\">\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n\n                  @default {\n                    <ngs-form-field class=\"form-field\">\n                      <input type=\"text\" ngsInput ngsAutoFocus\n                             (blur)=\"cancelEdit()\"\n                             [(ngModel)]=\"item['value'][2]\"\n                             (ngModelChange)=\"_emitChangeEvent()\">\n                    </ngs-form-field>\n                  }\n                }\n              </div>\n            } @else {\n              @if (item['value'][1] !== 'isBlank' && item['value'][1] !== 'isNotBlank') {\n                @if (isValueNotEmpty(item)) {\n                  @if (getFieldType(item) === 'array') {\n                    @if (item['value'][1] === 'equals') {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        {{ getDataSourceItemNameById(item, item['value'][2]) }}\n                      </button>\n                    } @else {\n                    <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                      @for (dataSourceItemId of item['value'][2]; track dataSourceItemId; let last = $last) {\n                        <span>{{ getDataSourceItemNameById(item, dataSourceItemId) }}</span>\n                        @if (!last) {\n                          <span class=\"text-neutral-500\">|</span>\n                        }\n                      }\n                    </button>\n                    }\n                  } @else {\n                    @if (item['value'][1] === 'isBetween') {\n                      <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2][0] }}</span>\n                        <span class=\"text-neutral-500\">&ndash;</span>\n                        <span>{{ item['value'][2][1] }}</span>\n                      </button>\n                    } @else {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2] }}</span>\n                      </button>\n                    }\n                  }\n                } @else {\n                  <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                    <span i18n>&lt;enter a value&gt;</span>\n                  </button>\n                }\n              }\n            }\n          </div>\n        </div>\n        <ngs-menu #fieldsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [(ngModel)]=\"item['value'][0]\">\n              @for (fieldDef of fieldDefs(); track fieldDef) {\n                <ngs-option [value]=\"fieldDef.dataField\"\n                            (click)=\"selectConditionField(item, fieldDef)\">{{ fieldDef.name }}</ngs-option>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n        <ngs-menu #operationsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][1]\">\n              @for (operation of _operationDefs; track operation.id()) {\n                <div [hidden]=\"!isOperationAllowedForCondition(item['value'][0], operation.id())\">\n                  <ngs-option [value]=\"operation.id()\" (click)=\"operationChanged(item, operation.id())\">\n                    <div class=\"flex items-center gap-3\">\n                      @if (operation.operationIcon()) {\n                        <ng-template [ngTemplateOutlet]=\"operationIconTemplateRef(operation)\" />\n                      }\n                      <div>\n                        <ng-template [ngTemplateOutlet]=\"operationNameTemplateRef(operation)\" />\n                      </div>\n                    </div>\n                  </ngs-option>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n      }\n    }\n  </div>\n</ng-template>\n\n<div class=\"group\">\n  <div class=\"flex items-center group-operations\">\n    <button [ngsMenuTriggerFor]=\"groupOperationsMenu\" class=\"group-operation\">\n      {{ getSelectedGroupOperationName() }}\n    </button>\n    <div [ngsMenuTriggerFor]=\"addMenu\" class=\"add\">\n      <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: _value }\" />\n</div>\n\n<ngs-menu #groupOperationsMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <div ngsMenuOptionGroup [(ngModel)]=\"_logicalOperator\" (ngModelChange)=\"_emitChangeEvent()\">\n      @for (operation of groupOperations(); track operation.id) {\n        <ngs-option [value]=\"operation.id\">{{ operation.name }}</ngs-option>\n      }\n    </div>\n  </ng-template>\n</ngs-menu>\n<ngs-menu #addMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <button ngs-menu-item (click)=\"addCondition()\">Add Condition</button>\n    <button ngs-menu-item (click)=\"addGroup()\">Add Group</button>\n  </ng-template>\n</ngs-menu>\n\n<ng-container ngsFilterBuilderOperationDef=\"contains\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Contains</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"doesNotContain\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Does not contain</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"startsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Starts with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"endsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Ends with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"equals\" [allowedDataTypes]=\"['string', 'number', 'array', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"notEquals\" [allowedDataTypes]=\"['string', 'number', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Not equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isNotBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is not blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBetween\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is between</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isAnyOf\" [allowedDataTypes]=\"['array']\">\n  <ng-template ngsFilterBuilderOperationName>Is any of</ng-template>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngstarter-ui-components-filter-builder.mjs","sources":["../../../projects/components/filter-builder/src/filter-builder-operation-name.directive.ts","../../../projects/components/filter-builder/src/filter-builder-operation-icon.directive.ts","../../../projects/components/filter-builder/src/filter-builder-operation-def.directive.ts","../../../projects/components/filter-builder/src/filter-builder/filter-builder.ts","../../../projects/components/filter-builder/src/filter-builder/filter-builder.html","../../../projects/components/filter-builder/ngstarter-ui-components-filter-builder.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[ngsFilterBuilderOperationName]',\n  standalone: true\n})\nexport class FilterBuilderOperationNameDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[ngsFilterBuilderOperationIcon]',\n  standalone: true\n})\nexport class FilterBuilderOperationIconDirective {\n  readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, contentChild, input } from '@angular/core';\nimport { FilterBuilderOperationNameDirective } from './filter-builder-operation-name.directive';\nimport { FilterBuilderOperationIconDirective } from './filter-builder-operation-icon.directive';\n\n@Directive({\n  selector: '[ngsFilterBuilderOperationDef]',\n  standalone: true\n})\nexport class FilterBuilderOperationDefDirective {\n  id = input('', {\n    alias: 'ngsFilterBuilderOperationDef'\n  });\n  allowedDataTypes = input<string[]>([]);\n  readonly operationName = contentChild(FilterBuilderOperationNameDirective);\n  readonly operationIcon = contentChild(FilterBuilderOperationIconDirective);\n}\n","import {\n  AfterViewInit,\n  ChangeDetectorRef,\n  Component,\n  inject,\n  OnInit,\n  output,\n  PLATFORM_ID,\n  viewChildren,\n  contentChildren, TemplateRef, input\n} from '@angular/core';\nimport { CommonModule, isPlatformServer, NgTemplateOutlet } from '@angular/common';\nimport { FilterBuilderOperationDefDirective } from '../filter-builder-operation-def.directive';\nimport {\n  FilterBuilderCondition,\n  FilterBuilderFieldDataSourceItem,\n  FilterBuilderFieldDef,\n  FilterBuilderGroup,\n  FilterBuilderItemType\n} from '../types';\nimport { Icon } from '@ngstarter-ui/components/icon';\nimport { MenuTrigger, Menu, MenuItem, MenuContent, MenuOptionGroupDirective } from '@ngstarter-ui/components/menu';\nimport { FormsModule } from '@angular/forms';\nimport { Select, Option } from '@ngstarter-ui/components/select';\nimport { FilterBuilderOperationNameDirective } from '../filter-builder-operation-name.directive';\nimport { AutoFocusDirective, FocusElementDirective } from '@ngstarter-ui/components/core';\nimport { Input } from '@ngstarter-ui/components/input';\nimport { FormField } from '@ngstarter-ui/components/form-field';\n\n@Component({\n  selector: 'ngs-filter-builder',\n  exportAs: 'ngsFilterBuilder',\n  imports: [\n    CommonModule,\n    Icon,\n    MenuTrigger,\n    Menu,\n    MenuContent,\n    MenuOptionGroupDirective,\n    FormsModule,\n    MenuItem,\n    FormField,\n    Select,\n    Option,\n    AutoFocusDirective,\n    FocusElementDirective,\n    Input,\n    FilterBuilderOperationDefDirective,\n    FilterBuilderOperationNameDirective\n  ],\n  templateUrl: './filter-builder.html',\n  styleUrl: './filter-builder.scss',\n  host: {\n    'class': 'ngs-filter-builder'\n  },\n})\nexport class FilterBuilder implements OnInit, AfterViewInit {\n  protected _cdr = inject(ChangeDetectorRef);\n  protected _isServer = isPlatformServer(inject(PLATFORM_ID));\n  protected _operationAllowedTypesMap: Map<string, string[]> = new Map();\n  private _resetMethodMap: { [prop: string]: (condition: FilterBuilderCondition) => void } = {\n    '_resetStringValue': this._resetStringValue,\n    '_resetBooleanValue': this._resetBooleanValue,\n    '_resetArrayValue': this._resetArrayValue,\n    '_resetNumberValue': this._resetNumberValue,\n  };\n\n  value = input<FilterBuilderGroup[]>([]);\n  fieldDefs = input<FilterBuilderFieldDef[]>([]);\n  categories = input([]);\n  groupOperations = input([\n    {\n      id: 'and',\n      name: 'And'\n    },\n    {\n      id: 'or',\n      name: 'Or'\n    }\n  ]);\n  customOperations = input([]);\n\n  protected _logicalOperator = this.groupOperations()[0].id;\n  readonly _prebuiltOperationDefs = viewChildren(FilterBuilderOperationDefDirective);\n  readonly _customOperationDefs = contentChildren(FilterBuilderOperationDefDirective);\n  protected _operationDefs: FilterBuilderOperationDefDirective[] = [];\n\n  readonly valueChanged = output<FilterBuilderGroup[]>();\n\n  protected _value: FilterBuilderGroup[] = [];\n  protected _operations: any[] = [];\n  protected editItem: FilterBuilderCondition | undefined;\n  protected _tempMultipleValue: any[] = [];\n\n  ngOnInit() {\n    if (this.value().length) {\n      if (!this._isGroup(this.value()[0])) {\n        throw new Error('Invalid filter value, first element should be a filter group');\n      }\n\n      this._logicalOperator = this.value()[0]['logicalOperator'] as string;\n      this._value = JSON.parse(JSON.stringify(this.value()[0]['value']));\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this._operationDefs = [...this._prebuiltOperationDefs(), ...this._customOperationDefs()];\n    this._operationDefs.forEach(operationDef => {\n      this._operations.push({\n        id: operationDef.id(),\n        name: operationDef.operationName()?.templateRef\n      });\n      operationDef.allowedDataTypes().forEach((allowedType: string) => {\n        if (!this._operationAllowedTypesMap.has(allowedType)) {\n          this._operationAllowedTypesMap.set(allowedType, []);\n        }\n\n        const allowedTypeValue = this._operationAllowedTypesMap.get(allowedType) as string[];\n        allowedTypeValue.push(operationDef.id());\n        this._operationAllowedTypesMap.set(allowedType, allowedTypeValue);\n      });\n    });\n    this._cdr.detectChanges();\n  }\n\n  addCondition(targetGroup?: FilterBuilderGroup) {\n    const value = !targetGroup ? this._value : targetGroup.value;\n    value.push(\n      {\n        value: [this.fieldDefs()[0].dataField, this._operations[0].id, '']\n      }\n    );\n  }\n\n  addGroup(targetGroup?: FilterBuilderGroup) {\n    const value = !targetGroup ? this._value : targetGroup.value;\n    value.push(\n      {\n        logicalOperator: this.groupOperations()[0].id,\n        value: []\n      }\n    );\n  }\n\n  getConditionField(dataField: string): FilterBuilderFieldDef | undefined {\n    return this.fieldDefs().find(field => field.dataField === dataField);\n  }\n\n  getConditionOperation(id: string) {\n    return this._operations.find(operation => operation.id === id);\n  }\n\n  getSelectedGroupOperationName(targetGroup?: FilterBuilderGroup): string {\n    const groupLogicalOperatorId = targetGroup ? targetGroup.logicalOperator : this._logicalOperator\n    return this.groupOperations().find(groupOperator => groupOperator.id === groupLogicalOperatorId)?.name || '';\n  }\n\n  selectConditionField(item: FilterBuilderCondition, field: FilterBuilderFieldDef): void {\n    let allowedTypes = this._operationAllowedTypesMap.get(field.dataType) as string[];\n    item['value'][0] = field.dataField;\n    item['value'][1] = allowedTypes[0];\n    this._resetValue(field, item);\n    this.editItem = undefined;\n    this._emitChangeEvent();\n  }\n\n  operationChanged(item: FilterBuilderCondition, operation: string): void {\n    const oldOperation = item['value'][1];\n\n    if (oldOperation === 'equals' && operation === 'isAnyOf') {\n      item['value'][2] = [];\n    } else if (oldOperation === 'isAnyOf' && operation === 'equals') {\n      item['value'][2] = null;\n    }\n\n    if (oldOperation === 'isBetween' && operation !== 'isBetween') {\n      item['value'][2] = null;\n    } else if (oldOperation !== 'isBetween' && operation === 'isBetween') {\n      item['value'][2] = [];\n    }\n\n    if (['isNotBlank', 'isBlank'].includes(operation)) {\n      item['value'][2] = null;\n    }\n\n    item['value'][1] = operation;\n    this.editItem = undefined;\n    this._emitChangeEvent();\n  }\n\n  removeCondition(index: number, items: FilterBuilderItemType[]): void {\n    items.splice(index, 1);\n    this._emitChangeEvent();\n  }\n\n  isOperationAllowedForCondition(dataField: string, operationId: string): boolean {\n    const fieldDef = this.fieldDefs().find(f =>\n      f.dataField === dataField\n    ) as FilterBuilderFieldDef;\n\n    let allowedTypes = this._operationAllowedTypesMap.get(fieldDef.dataType);\n\n    if (!allowedTypes) {\n      throw new Error('There are not operations for the datatype: ' + fieldDef.dataType);\n    }\n\n    return allowedTypes.includes(operationId);\n  }\n\n  modifyValue(item: FilterBuilderCondition): void {\n    this.editItem = item;\n    if (this.getFieldType(item) === 'array' && item['value'][1] === 'isAnyOf') {\n      this._tempMultipleValue = [...(item['value'][2] || [])];\n    }\n  }\n\n  getFieldType(item: FilterBuilderCondition): string {\n    return (this.fieldDefs().find(f =>\n      f.dataField === item['value'][0]\n    ) as FilterBuilderFieldDef).dataType;\n  }\n\n  isValueNotEmpty(item: FilterBuilderCondition): boolean {\n    if (this.getFieldType(item) === 'array') {\n      if (item['value'][1] === 'equals') {\n        return item['value'][2] !== null && item['value'][2] !== '';\n      } else {\n        return item['value'][2].length > 0;\n      }\n    }\n\n    if (item['value'][1] === 'isBetween') {\n      return item['value'][2].length === 2 && item['value'][2][0] !== null && item['value'][2][1] !== null;\n    }\n\n    return item['value'][2] !== null && item['value'][2] !== '';\n  }\n\n  cancelEdit(delay = 0): void {\n    setTimeout(() => {\n      this.editItem = undefined;\n      this._cdr.detectChanges();\n    }, delay);\n  }\n\n  getOptions(item: FilterBuilderCondition): FilterBuilderFieldDataSourceItem[] {\n    const fieldDef = this._getFieldDef(item);\n    return fieldDef.lookup?.dataSource as FilterBuilderFieldDataSourceItem[];\n  }\n\n  getDataSourceItemNameById(item: FilterBuilderCondition, dataSourceItemId: string): string {\n    const fieldDef = this._getFieldDef(item);\n    return (fieldDef.lookup?.dataSource as FilterBuilderFieldDataSourceItem[]).find(\n      item => item.id === dataSourceItemId\n    )?.name || '';\n  }\n\n  selectBlur(event: FocusEvent): void {\n    if (this.editItem && this.getFieldType(this.editItem) === 'array' && this.editItem['value'][1] === 'isAnyOf') {\n      return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n    const select = event.target as HTMLElement;\n\n    setTimeout(() => {\n      const formField = select.closest('.ngs-form-field');\n\n      if (formField) {\n        this.cancelEdit();\n      }\n    }, 200);\n  }\n\n  selectClosed(): void {\n    if (this.editItem && this.getFieldType(this.editItem) === 'array' && this.editItem['value'][1] === 'isAnyOf') {\n      this.editItem['value'][2] = [...this._tempMultipleValue];\n    }\n    this.cancelEdit();\n    setTimeout(() => {\n      this._emitChangeEvent();\n    });\n  }\n\n  protected operationIconTemplateRef(operation: FilterBuilderOperationDefDirective): TemplateRef<any> {\n    return operation.operationIcon()?.templateRef as TemplateRef<any>;\n  }\n\n  protected operationNameTemplateRef(operation: FilterBuilderOperationDefDirective): TemplateRef<any> {\n    return operation.operationName()?.templateRef as TemplateRef<any>;\n  }\n\n  protected _isGroup(item: FilterBuilderItemType): item is FilterBuilderGroup {\n    return 'logicalOperator' in item;\n  }\n\n  protected _isCondition(item: FilterBuilderItemType): item is FilterBuilderCondition {\n    return !('logicalOperator' in item);\n  }\n\n  protected _emitChangeEvent(): void {\n    const value = this._normalizeValue(this._value);\n\n    if (value.length > 0) {\n      this.valueChanged.emit([\n        {\n          logicalOperator: this._logicalOperator,\n          value: value\n        }\n      ]);\n    } else {\n      this.valueChanged.emit([]);\n    }\n  }\n\n  private _getFieldDef(condition: FilterBuilderCondition): FilterBuilderFieldDef {\n    return  this.fieldDefs().find(f =>\n      f.dataField === condition['value'][0]\n    ) as FilterBuilderFieldDef;\n  }\n\n  private _resetValue(field: FilterBuilderFieldDef, condition: FilterBuilderCondition): void {\n    const fieldDef = this.fieldDefs().find(f =>\n      f.dataField === field.dataField\n    ) as FilterBuilderFieldDef;\n    const resetMethod = '_reset' + this._capitalizeFirstLetter(fieldDef.dataType) + 'Value';\n    this._resetMethodMap[resetMethod](condition);\n  }\n\n  private _resetStringValue(condition: FilterBuilderCondition): void {\n    condition['value'][2] = '';\n  }\n\n  private _resetNumberValue(condition: FilterBuilderCondition): void {\n    condition['value'][2] = null;\n  }\n\n  private _resetArrayValue(condition: FilterBuilderCondition): void {\n    if (condition['value'][1] === 'equals') {\n      condition['value'][2] = null;\n    } else {\n      condition['value'][2] = [];\n    }\n  }\n\n  private _resetBooleanValue(condition: FilterBuilderCondition): void {\n    condition['value'][2] = false;\n  }\n\n  private _capitalizeFirstLetter(value: string) {\n    return value.charAt(0).toUpperCase() + value.slice(1);\n  }\n\n  private _normalizeValue(value: FilterBuilderItemType[]): FilterBuilderItemType[] {\n    let result: FilterBuilderItemType[] = [];\n    value.forEach(item => {\n      if (this._isGroup(item)) {\n        const groupValue = this._normalizeValue(item.value);\n\n        if (groupValue.length > 0) {\n          result = [...result, {\n            logicalOperator: item.logicalOperator,\n            value: groupValue\n          }];\n        }\n      } else {\n        if (this.isValueNotEmpty(item)) {\n          result.push(item);\n        }\n      }\n    });\n    return result;\n  }\n}\n","@if (_isServer) {\n  <ng-content/>\n}\n\n<ng-template #itemsTpl let-items>\n  <div class=\"group\">\n    @for (item of items; track item; let index = $index) {\n      @if (_isGroup(item)) {\n        <div class=\"flex items-center group-operations\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button [ngsMenuTriggerFor]=\"nestedGroupOperationsMenu\"\n                  #nestedGroupOperationsMenuTrigger=\"ngsMenuTrigger\"\n                  class=\"group-operation\">\n            {{ getSelectedGroupOperationName(item) }}\n          </button>\n          <div [ngsMenuTriggerFor]=\"addGroupMenu\" class=\"add\">\n            <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n          </div>\n          <ngs-menu #nestedGroupOperationsMenu=\"ngsMenu\">\n            <div ngsMenuOptionGroup [(ngModel)]=\"item['logicalOperator']\">\n              @for (groupOperation of groupOperations(); track groupOperation.id) {\n                <ngs-option [value]=\"groupOperation.id\"\n                            (click)=\"nestedGroupOperationsMenuTrigger.closeMenu('click')\">{{ groupOperation.name }}\n                </ngs-option>\n              }\n            </div>\n          </ngs-menu>\n          <ngs-menu #addGroupMenu=\"ngsMenu\">\n            <button ngs-menu-item (click)=\"addCondition(item)\">Add Condition</button>\n            <button ngs-menu-item (click)=\"addGroup(item)\">Add Group</button>\n          </ngs-menu>\n        </div>\n        @if (item['value'].length > 0) {\n          <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: item['value'] }\"/>\n        }\n      } @else if (_isCondition(item)) {\n        <div class=\"condition\">\n          <div class=\"remove\" (click)=\"removeCondition(index, items)\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\" class=\"font-icon\"/>\n          </div>\n          <button class=\"condition-field\"\n                  #fieldsMenuTrigger=\"ngsMenuTrigger\"\n                  [ngsMenuTriggerFor]=\"fieldsMenu\">{{ getConditionField(item['value'][0])?.name }}\n          </button>\n          <button class=\"condition-operation\"\n                  #operationsMenuTrigger=\"ngsMenuTrigger\"\n                  [ngsMenuTriggerFor]=\"operationsMenu\">\n            <ng-template [ngTemplateOutlet]=\"getConditionOperation(item['value'][1])?.name\"/>\n          </button>\n          <div class=\"relative\">\n            @if (editItem && editItem === item) {\n              <div class=\"absolute start-0 top-0 -translate-y-1/2\">\n                @switch (getFieldType(editItem)) {\n                  @case ('array') {\n                    @switch (editItem['value'][1]) {\n                      @case ('equals') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\"\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"item['value'][2]\"\n                                      (ngModelChange)=\"_emitChangeEvent()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                      @case ('isAnyOf') {\n                        <ngs-form-field class=\"form-field\">\n                          <ngs-select placeholder=\"Select...\" multiple\n                                      ngsAutoFocus\n                                      (blur)=\"selectBlur($event)\"\n                                      [(ngModel)]=\"_tempMultipleValue\"\n                                      (closed)=\"selectClosed()\">\n                            @for (option of getOptions(editItem); track option.id) {\n                              <ngs-option [value]=\"option.id\">{{ option.name }}</ngs-option>\n                            }\n                          </ngs-select>\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n                  @case ('number') {\n                    @switch (editItem['value'][1]) {\n                      @case ('isBetween') {\n                        <div class=\"flex gap-2 items-center\"\n                             ngsFocusElement (elementBlurred)=\"cancelEdit()\">\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput ngsAutoFocus\n                                   [(ngModel)]=\"item['value'][2][0]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                          <div class=\"text-neutral-500\">&ndash;</div>\n                          <ngs-form-field class=\"form-field-number\">\n                            <input type=\"number\" ngsInput\n                                   [(ngModel)]=\"item['value'][2][1]\"\n                                   (ngModelChange)=\"_emitChangeEvent()\">\n                          </ngs-form-field>\n                        </div>\n                      }\n                      @default {\n                        <ngs-form-field class=\"form-field-number\">\n                          <input type=\"number\" ngsInput ngsAutoFocus\n                                 (blur)=\"cancelEdit()\"\n                                 [(ngModel)]=\"item['value'][2]\"\n                                 (ngModelChange)=\"_emitChangeEvent()\">\n                        </ngs-form-field>\n                      }\n                    }\n                  }\n                  @default {\n                    <ngs-form-field class=\"form-field\">\n                      <input type=\"text\" ngsInput ngsAutoFocus\n                             (blur)=\"cancelEdit()\"\n                             [(ngModel)]=\"item['value'][2]\"\n                             (ngModelChange)=\"_emitChangeEvent()\">\n                    </ngs-form-field>\n                  }\n                }\n              </div>\n            } @else {\n              @if (item['value'][1] !== 'isBlank' && item['value'][1] !== 'isNotBlank') {\n                @if (isValueNotEmpty(item)) {\n                  @if (getFieldType(item) === 'array') {\n                    @if (item['value'][1] === 'equals') {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        {{ getDataSourceItemNameById(item, item['value'][2]) }}\n                      </button>\n                    } @else {\n                      <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                        @for (dataSourceItemId of item['value'][2]; track dataSourceItemId; let last = $last) {\n                          <span>{{ getDataSourceItemNameById(item, dataSourceItemId) }}</span>\n                          @if (!last) {\n                            <span class=\"text-neutral-500\">|</span>\n                          }\n                        }\n                      </button>\n                    }\n                  } @else {\n                    @if (item['value'][1] === 'isBetween') {\n                      <button class=\"condition-value flex items-center gap-2\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2][0] }}</span>\n                        <span class=\"text-neutral-500\">&ndash;</span>\n                        <span>{{ item['value'][2][1] }}</span>\n                      </button>\n                    } @else {\n                      <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                        <span>{{ item['value'][2] }}</span>\n                      </button>\n                    }\n                  }\n                } @else {\n                  <button class=\"condition-value\" (click)=\"modifyValue(item)\">\n                    <span i18n>&lt;enter a value&gt;</span>\n                  </button>\n                }\n              }\n            }\n          </div>\n        </div>\n        <ngs-menu #fieldsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][0]\">\n              @for (fieldDef of fieldDefs(); track fieldDef) {\n                <ngs-option [value]=\"fieldDef.dataField\"\n                            (click)=\"selectConditionField(item, fieldDef); fieldsMenuTrigger.closeMenu('click')\">{{ fieldDef.name }}\n                </ngs-option>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n        <ngs-menu #operationsMenu=\"ngsMenu\">\n          <ng-template ngsMenuContent>\n            <div ngsMenuOptionGroup [ngModel]=\"item['value'][1]\">\n              @for (operation of _operationDefs; track operation.id()) {\n                <div [hidden]=\"!isOperationAllowedForCondition(item['value'][0], operation.id())\">\n                  <ngs-option [value]=\"operation.id()\"\n                              (click)=\"operationChanged(item, operation.id()); operationsMenuTrigger.closeMenu('click')\">\n                    <div class=\"flex items-center gap-3\">\n                      @if (operation.operationIcon()) {\n                        <ng-template [ngTemplateOutlet]=\"operationIconTemplateRef(operation)\"/>\n                      }\n                      <div>\n                        <ng-template [ngTemplateOutlet]=\"operationNameTemplateRef(operation)\"/>\n                      </div>\n                    </div>\n                  </ngs-option>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </ngs-menu>\n      }\n    }\n  </div>\n</ng-template>\n\n<div class=\"group\">\n  <div class=\"flex items-center group-operations\">\n    <button [ngsMenuTriggerFor]=\"groupOperationsMenu\"\n            #groupOperationsMenuTrigger=\"ngsMenuTrigger\"\n            class=\"group-operation\">\n      {{ getSelectedGroupOperationName() }}\n    </button>\n    <div [ngsMenuTriggerFor]=\"addMenu\" class=\"add\">\n      <ngs-icon name=\"fluent:add-24-regular\" class=\"font-icon\"/>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"itemsTpl\" [ngTemplateOutletContext]=\"{ $implicit: _value }\"/>\n</div>\n\n<ngs-menu #groupOperationsMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <div ngsMenuOptionGroup [(ngModel)]=\"_logicalOperator\" (ngModelChange)=\"_emitChangeEvent()\">\n      @for (operation of groupOperations(); track operation.id) {\n        <ngs-option [value]=\"operation.id\"\n                    (click)=\"groupOperationsMenuTrigger.closeMenu('click')\">{{ operation.name }}\n        </ngs-option>\n      }\n    </div>\n  </ng-template>\n</ngs-menu>\n<ngs-menu #addMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent>\n    <button ngs-menu-item (click)=\"addCondition()\">Add Condition</button>\n    <button ngs-menu-item (click)=\"addGroup()\">Add Group</button>\n  </ng-template>\n</ngs-menu>\n\n<ng-container ngsFilterBuilderOperationDef=\"contains\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Contains</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"doesNotContain\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Does not contain</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"startsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Starts with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"endsWith\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Ends with</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"equals\" [allowedDataTypes]=\"['string', 'number', 'array', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"notEquals\" [allowedDataTypes]=\"['string', 'number', 'boolean']\">\n  <ng-template ngsFilterBuilderOperationName>Not equals</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isLessThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is less then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThen\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isGreaterThenOrEqual\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is greater then or equal to</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isNotBlank\" [allowedDataTypes]=\"['string']\">\n  <ng-template ngsFilterBuilderOperationName>Is not blank</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isBetween\" [allowedDataTypes]=\"['number']\">\n  <ng-template ngsFilterBuilderOperationName>Is between</ng-template>\n</ng-container>\n<ng-container ngsFilterBuilderOperationDef=\"isAnyOf\" [allowedDataTypes]=\"['array']\">\n  <ng-template ngsFilterBuilderOperationName>Is any of</ng-template>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-password-strength.mjs

@@ -290,7 +290,7 @@ class PassToggleVisibility {
         return this._visible ? 'text' : 'password';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PassToggleVisibility, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PassToggleVisibility, isStandalone: true, selector: "ngs-pass-toggle-visibility", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-pass-toggle-visibility" }, exportAs: ["ngsPassToggleVisibility"], ngImport: i0, template: "<button (click)=\"_visible = !_visible\" ngsIconButton\n        [attr.tabindex]=\"tabindex() ? tabindex() : null\" type=\"button\">\n  @if (_visible) {\n    <ngs-icon name=\"fluent:eye-24-regular\"/>\n  } @else {\n    <ngs-icon name=\"fluent:visibility_off-24-regular\"/>\n  }\n</button>\n", styles: ["/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PassToggleVisibility, isStandalone: true, selector: "ngs-pass-toggle-visibility", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-pass-toggle-visibility" }, exportAs: ["ngsPassToggleVisibility"], ngImport: i0, template: "<button (click)=\"_visible = !_visible\" ngsIconButton\n        [attr.tabindex]=\"tabindex() ? tabindex() : null\" type=\"button\">\n  @if (_visible) {\n    <ngs-icon name=\"fluent:eye-24-regular\"/>\n  } @else {\n    <ngs-icon name=\"fluent:eye-off-24-regular\"/>\n  }\n</button>\n", styles: ["/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PassToggleVisibility, decorators: [{
             type: Component,
@@ -299,7 +299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         Button
                     ], host: {
                         'class': 'ngs-pass-toggle-visibility',
-                    }, template: "<button (click)=\"_visible = !_visible\" ngsIconButton\n        [attr.tabindex]=\"tabindex() ? tabindex() : null\" type=\"button\">\n  @if (_visible) {\n    <ngs-icon name=\"fluent:eye-24-regular\"/>\n  } @else {\n    <ngs-icon name=\"fluent:visibility_off-24-regular\"/>\n  }\n</button>\n", styles: ["/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<button (click)=\"_visible = !_visible\" ngsIconButton\n        [attr.tabindex]=\"tabindex() ? tabindex() : null\" type=\"button\">\n  @if (_visible) {\n    <ngs-icon name=\"fluent:eye-24-regular\"/>\n  } @else {\n    <ngs-icon name=\"fluent:eye-off-24-regular\"/>\n  }\n</button>\n", styles: ["/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }] } });
 
 class PasswordStrengthInfo {