@indigina/ui-kit 1.1.508 → 1.1.509

package/fesm2022/indigina-ui-kit.mjs

@@ -5454,9 +5454,9 @@ class KitBreadcrumbsService {
     collectBreadcrumbs(route) {
         const breadcrumbData = route.data['breadcrumb'] ?? [];
         const breadcrumbs = breadcrumbData.map(crumb => ({
-            text: this.isDynamicBreadcrumb(crumb.text)
-                && this.getDynamicBreadcrumbText(crumb.text, route.params)
-                || this.translateService.instant(crumb.text),
+            text: this.isDynamicBreadcrumb(crumb.text) &&
+                this.getDynamicBreadcrumbText(crumb.text, route.params) ||
+                this.translateService.instant(crumb.text),
             url: this.replaceRouteParams(crumb.url, route.params),
         }));
         return route.firstChild && [
@@ -5849,8 +5849,8 @@ class KitGridComponent {
         const currentIndicator = this.dropIndicator();
         const dropTargetMidpoint = this.getDropTargetMidpoint(event);
         const distanceToMidpoint = Math.abs(event.dragEvent.clientY - dropTargetMidpoint);
-        if (currentIndicator?.targetRowIndex === event.dropTargetIndex
-            && distanceToMidpoint <= this.rowDropSwitchThresholdPx) {
+        if (currentIndicator?.targetRowIndex === event.dropTargetIndex &&
+            distanceToMidpoint <= this.rowDropSwitchThresholdPx) {
             return;
         }
         this.dropIndicator.set({
@@ -6352,9 +6352,9 @@ class KitCollapsedListComponent {
         requestAnimationFrame(() => this.initResizeObserver());
     }
     ngOnChanges({ itemList, gap, dropdownDefaultValueText }) {
-        if ((itemList && !itemList.isFirstChange())
-            || (gap && !gap.isFirstChange())
-            || (dropdownDefaultValueText && !dropdownDefaultValueText.isFirstChange())) {
+        if ((itemList && !itemList.isFirstChange()) ||
+            (gap && !gap.isFirstChange()) ||
+            (dropdownDefaultValueText && !dropdownDefaultValueText.isFirstChange())) {
             requestAnimationFrame(() => this.resize());
         }
     }
@@ -7492,8 +7492,8 @@ class KitGlobalSearchComponent {
         if (!this.popup()?.isPopupOpen) {
             return;
         }
-        if (!this.textbox().hostElement.nativeElement.contains(event.target)
-            && !this.popup()?.popupHTMLElement?.contains(event.target)) {
+        if (!this.textbox().hostElement.nativeElement.contains(event.target) &&
+            !this.popup()?.popupHTMLElement?.contains(event.target)) {
             this.clearSearch();
         }
     }
@@ -7687,9 +7687,9 @@ const findMatches = (obj, translatePrefix, excludedKeys = [], search, translateV
     const handleObject = (obj, path) => {
         for (const [key, value,] of Object.entries(obj)) {
             const currentPath = path ? `${path}.${key}` : key;
-            const isMatch = typeof value === 'string'
-                && value.toLowerCase().includes(search.toLowerCase())
-                && !excludedKeys.includes(currentPath);
+            const isMatch = typeof value === 'string' &&
+                value.toLowerCase().includes(search.toLowerCase()) &&
+                !excludedKeys.includes(currentPath);
             if (isMatch) {
                 matches.push({
                     path: currentPath,
@@ -9085,8 +9085,8 @@ class KitUsersSettingsEntitlementsFormComponent {
         effect(() => this.updateDisabledState());
     }
     get showPartnersControl() {
-        return this.form.get(KitUsersSettingsEntitlementsField.IDENTITY_TYPE)?.value === KitUsersSettingsEntitlementType.USER
-            && this.showIdentityType();
+        return this.form.get(KitUsersSettingsEntitlementsField.IDENTITY_TYPE)?.value === KitUsersSettingsEntitlementType.USER &&
+            this.showIdentityType();
     }
     submit() {
         const userId = this.userId();
@@ -9323,9 +9323,9 @@ class KitUsersSettingsPasswordDialogComponent {
         const control = this.form.get(field);
         const isTouchedAndDirty = !!control?.touched && !!control.dirty;
         const hasFieldError = isTouchedAndDirty && !!control?.invalid;
-        const hasMatchError = field === KitUsersSettingsPasswordDialogField.REPEAT_PASSWORD
-            && !!this.form.errors?.['passwordsMismatch']
-            && isTouchedAndDirty;
+        const hasMatchError = field === KitUsersSettingsPasswordDialogField.REPEAT_PASSWORD &&
+            !!this.form.errors?.['passwordsMismatch'] &&
+            isTouchedAndDirty;
         return hasFieldError || hasMatchError ? KitTextboxState.ERROR : KitTextboxState.DEFAULT;
     }
     getTextboxMessageText(field) {
@@ -11331,8 +11331,8 @@ class KitFilterCheckboxComponent {
             this.selectedValues.set([]);
             return;
         }
-        const isNotNullOnly = filterValue.filters.length === 1
-            && filterValue.filters[0].operator === KitFilterOperator.IS_NOT_NULL;
+        const isNotNullOnly = filterValue.filters.length === 1 &&
+            filterValue.filters[0].operator === KitFilterOperator.IS_NOT_NULL;
         const hasNeq = filterValue.filters.some(f => f.operator === KitFilterOperator.NEQ);
         if (isNotNullOnly) {
             this.selectedValues.set(this.allItemsAsSelected());
@@ -11599,6 +11599,8 @@ class KitFilterInputComponent {
         this.filterRemoved = output();
         this.filterChanged = output();
         this.anchor = viewChild.required('toggleButton', { read: ElementRef });
+        this.textboxComponents = viewChildren(KitTextboxComponent, ...(ngDevMode ? [{ debugName: "textboxComponents" }] : /* istanbul ignore next */ []));
+        this.numericTextboxComponents = viewChildren(KitNumericTextboxComponent, ...(ngDevMode ? [{ debugName: "numericTextboxComponents" }] : /* istanbul ignore next */ []));
         this.popup = viewChild('popup', { ...(ngDevMode ? { debugName: "popup" } : /* istanbul ignore next */ {}), read: KitPopupComponent });
         this.kitDropdownSize = KitDropdownSize;
         this.kitTextboxSize = KitTextboxSize;
@@ -11616,20 +11618,19 @@ class KitFilterInputComponent {
         this.kitPillTheme = KitPillTheme;
         this.kitNumericTextboxSize = KitNumericTextboxSize;
         this.kitFilterType = KitFilterType;
-        this.rafId = null;
+        this.popupToggleRafId = null;
+        this.focusRafId = null;
     }
     ngOnInit() {
         this.initializeSelectedValues();
         this.showPopupOnInit();
     }
     ngOnDestroy() {
-        if (this.rafId) {
-            cancelAnimationFrame(this.rafId);
-            this.rafId = null;
-        }
+        this.cancelPendingAnimationFrame('popupToggleRafId');
+        this.cancelPendingAnimationFrame('focusRafId');
     }
     get applyButtonDisabled() {
-        return !this.hasActiveFilters();
+        return !this.filterItems().filters.length;
     }
     onLogicChange(event) {
         this.filterItems.update(items => ({
@@ -11650,10 +11651,16 @@ class KitFilterInputComponent {
     onPopupToggle() {
         this.popup()?.toggle();
     }
+    onPopupOpened() {
+        this.scheduleFocusFirstInput();
+    }
     close() {
-        if (!this.hasActiveFilters() || !this.selectedValues()) {
-            this.removeFilter();
+        const selectedValues = this.selectedValues();
+        if (selectedValues) {
+            this.filterItems.set(selectedValues);
+            return;
         }
+        this.resetFiltersItems();
     }
     clearAllFilters() {
         this.resetFiltersItems();
@@ -11687,8 +11694,8 @@ class KitFilterInputComponent {
         return null;
     }
     getFilterOperatorDropdownItems() {
-        return this.filterInputType() === KitFilterType.NUMERIC
-            && this.numericFilterOperatorDropdownItems || this.textFilterOperatorDropdownItems;
+        return this.filterInputType() === KitFilterType.NUMERIC &&
+            this.numericFilterOperatorDropdownItems || this.textFilterOperatorDropdownItems;
     }
     hasNoValueRequiredOperator(operator) {
         return noValueRequiredFilterOperators.includes(operator);
@@ -11714,12 +11721,20 @@ class KitFilterInputComponent {
         }));
     }
     showPopupOnInit() {
-        if (!this.hasActiveFilters()) {
-            this.rafId = requestAnimationFrame(() => {
+        if (!this.selectedValues()) {
+            this.popupToggleRafId = requestAnimationFrame(() => {
+                this.popupToggleRafId = null;
                 this.onPopupToggle();
             });
         }
     }
+    scheduleFocusFirstInput() {
+        this.cancelPendingAnimationFrame('focusRafId');
+        this.focusRafId = requestAnimationFrame(() => {
+            this.focusRafId = null;
+            this.focusFirstInput();
+        });
+    }
     createFilterItem(field) {
         return {
             field,
@@ -11733,8 +11748,12 @@ class KitFilterInputComponent {
             filters: items.filters.map((item, i) => (i === index && { ...item, ...update } || item)),
         }));
     }
-    hasActiveFilters() {
-        return this.filterItems().filters.some(filter => this.hasSelectedFilter(filter));
+    focusFirstInput() {
+        if (this.filterInputType() === KitFilterType.NUMERIC) {
+            this.numericTextboxComponents()[0]?.focus();
+            return;
+        }
+        this.textboxComponents()[0]?.focus();
     }
     hasSelectedFilter(filter) {
         return this.hasNoValueRequiredOperator(filter.operator) || !!filter.value || filter.value === 0;
@@ -11745,8 +11764,22 @@ class KitFilterInputComponent {
             value: item,
         }));
     }
+    cancelPendingAnimationFrame(idKey) {
+        const id = idKey === 'popupToggleRafId'
+            ? this.popupToggleRafId
+            : this.focusRafId;
+        if (id === null) {
+            return;
+        }
+        cancelAnimationFrame(id);
+        if (idKey === 'popupToggleRafId') {
+            this.popupToggleRafId = null;
+            return;
+        }
+        this.focusRafId = null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterInputComponent, isStandalone: true, selector: "kit-filter-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, filterInputType: { classPropertyName: "filterInputType", publicName: "filterInputType", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  @if (selectedValues()?.filters; as selectedFilters) {\n    @for (filter of selectedFilters; track $index) {\n      {{ getSelectedFilterText(filter) }}\n\n      @if ($index === 0) {\n        {{ getSelectedLogicText(selectedValues()) }}\n      }\n    }\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          @switch (filterInputType()) {\n            @case (kitFilterType.TEXT) {\n              <kit-textbox class=\"filter-item-value\"\n                           [size]=\"kitTextboxSize.SMALL\"\n                           [defaultValue]=\"item.value\"\n                           [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                           (changed)=\"onValueChange($event, $index)\"\n                           (keydown.enter)=\"onEnterKey()\"\n              ></kit-textbox>\n            }\n            @case (kitFilterType.NUMERIC) {\n              <kit-numeric-textbox class=\"filter-item-value\"\n                                   format=\"#.###\"\n                                   [size]=\"kitNumericTextboxSize.SMALL\"\n                                   [defaultValue]=\"item.value\"\n                                   [min]=\"0\"\n                                   [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                                   (changed)=\"onValueChange($event, $index)\"\n                                   (keydown.enter)=\"onEnterKey()\"\n              ></kit-numeric-textbox>\n            }\n          }\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n", styles: ["::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size", "showStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterInputComponent, isStandalone: true, selector: "kit-filter-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, filterInputType: { classPropertyName: "filterInputType", publicName: "filterInputType", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "textboxComponents", predicate: KitTextboxComponent, descendants: true, isSignal: true }, { propertyName: "numericTextboxComponents", predicate: KitNumericTextboxComponent, descendants: true, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  @if (selectedValues()?.filters; as selectedFilters) {\n    @for (filter of selectedFilters; track $index) {\n      {{ getSelectedFilterText(filter) }}\n\n      @if ($index === 0) {\n        {{ getSelectedLogicText(selectedValues()) }}\n      }\n    }\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n           (opened)=\"onPopupOpened()\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          @switch (filterInputType()) {\n            @case (kitFilterType.TEXT) {\n              <kit-textbox class=\"filter-item-value\"\n                           [size]=\"kitTextboxSize.SMALL\"\n                           [defaultValue]=\"item.value\"\n                           [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                           (changed)=\"onValueChange($event, $index)\"\n                           (keydown.enter)=\"onEnterKey()\"\n              ></kit-textbox>\n            }\n            @case (kitFilterType.NUMERIC) {\n              <kit-numeric-textbox class=\"filter-item-value\"\n                                   format=\"#.###\"\n                                   [size]=\"kitNumericTextboxSize.SMALL\"\n                                   [defaultValue]=\"item.value\"\n                                   [min]=\"0\"\n                                   [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                                   (changed)=\"onValueChange($event, $index)\"\n                                   (keydown.enter)=\"onEnterKey()\"\n              ></kit-numeric-textbox>\n            }\n          }\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n", styles: ["::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size", "showStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterInputComponent, decorators: [{
             type: Component,
@@ -11757,8 +11790,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         KitTextboxComponent,
                         TranslateModule,
                         KitNumericTextboxComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  @if (selectedValues()?.filters; as selectedFilters) {\n    @for (filter of selectedFilters; track $index) {\n      {{ getSelectedFilterText(filter) }}\n\n      @if ($index === 0) {\n        {{ getSelectedLogicText(selectedValues()) }}\n      }\n    }\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          @switch (filterInputType()) {\n            @case (kitFilterType.TEXT) {\n              <kit-textbox class=\"filter-item-value\"\n                           [size]=\"kitTextboxSize.SMALL\"\n                           [defaultValue]=\"item.value\"\n                           [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                           (changed)=\"onValueChange($event, $index)\"\n                           (keydown.enter)=\"onEnterKey()\"\n              ></kit-textbox>\n            }\n            @case (kitFilterType.NUMERIC) {\n              <kit-numeric-textbox class=\"filter-item-value\"\n                                   format=\"#.###\"\n                                   [size]=\"kitNumericTextboxSize.SMALL\"\n                                   [defaultValue]=\"item.value\"\n                                   [min]=\"0\"\n                                   [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                                   (changed)=\"onValueChange($event, $index)\"\n                                   (keydown.enter)=\"onEnterKey()\"\n              ></kit-numeric-textbox>\n            }\n          }\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n", styles: ["::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"] }]
-        }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], filterInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterInputType", required: true }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  @if (selectedValues()?.filters; as selectedFilters) {\n    @for (filter of selectedFilters; track $index) {\n      {{ getSelectedFilterText(filter) }}\n\n      @if ($index === 0) {\n        {{ getSelectedLogicText(selectedValues()) }}\n      }\n    }\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n           (opened)=\"onPopupOpened()\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          @switch (filterInputType()) {\n            @case (kitFilterType.TEXT) {\n              <kit-textbox class=\"filter-item-value\"\n                           [size]=\"kitTextboxSize.SMALL\"\n                           [defaultValue]=\"item.value\"\n                           [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                           (changed)=\"onValueChange($event, $index)\"\n                           (keydown.enter)=\"onEnterKey()\"\n              ></kit-textbox>\n            }\n            @case (kitFilterType.NUMERIC) {\n              <kit-numeric-textbox class=\"filter-item-value\"\n                                   format=\"#.###\"\n                                   [size]=\"kitNumericTextboxSize.SMALL\"\n                                   [defaultValue]=\"item.value\"\n                                   [min]=\"0\"\n                                   [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                                   (changed)=\"onValueChange($event, $index)\"\n                                   (keydown.enter)=\"onEnterKey()\"\n              ></kit-numeric-textbox>\n            }\n          }\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n", styles: ["::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"] }]
+        }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], filterInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterInputType", required: true }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], textboxComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KitTextboxComponent), { isSignal: true }] }], numericTextboxComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KitNumericTextboxComponent), { isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
 
 class KitFilterNullCheckComponent {
     constructor() {
@@ -14663,10 +14696,10 @@ const prettifyXml = (document) => {
             indentLevel = Math.max(indentLevel - 1, 0);
         }
         const line = `${'  '.repeat(indentLevel)}${token}`;
-        const isOpeningTag = token.startsWith('<')
-            && !token.startsWith('</')
-            && !token.endsWith('/>')
-            && !token.includes('</');
+        const isOpeningTag = token.startsWith('<') &&
+            !token.startsWith('</') &&
+            !token.endsWith('/>') &&
+            !token.includes('</');
         if (isOpeningTag) {
             indentLevel += 1;
         }