@agorapulse/ui-components 22.0.7 → 22.0.9-beta.1

package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs

@@ -386,7 +386,7 @@ class FilterLeafComponent {
         this.valueChange.emit({ key: this.item().key, value: { filterType: 'date-range', selectedPeriod } });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterLeafComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterLeafComponent, isStandalone: true, selector: "ap-filter-leaf", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, isLastLeaf: { classPropertyName: "isLastLeaf", publicName: "isLastLeaf", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", lockedFeatureClicked: "lockedFeatureClicked", filterDropdownGroupLockedClicked: "filterDropdownGroupLockedClicked" }, providers: [provideUiComponentsSymbols(apChevronDown, apInfo, apFeatureLock)], ngImport: i0, template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n    <div\n        (click)=\"onHeaderClick()\"\n        (keyup.enter)=\"onHeaderClick()\"\n        [class.ap-filter-leaf__closable]=\"closable() || item().featureLocked\"\n        [class.ap-filter-leaf__expanded]=\"(!closable() || expanded()) && (!item().featureLocked || !closable())\"\n        class=\"ap-filter-leaf__header\" tabindex=\"0\">\n        <div class=\"ap-filter-leaf__title\">\n            <span>{{ item().title }}</span>\n            @if (item().tooltipText) {\n                <ap-symbol color=\"light-grey\" symbolId=\"info\" size=\"sm\" [apTooltip]=\"item().tooltipText\" />\n            }\n        </div>\n        @if (item().featureLocked) {\n            <div class=\"ap-filter-leaf__actions\">\n                <ap-symbol color=\"purple\" symbolId=\"feature-lock\" size=\"sm\"\n                           [apTooltip]=\"item().featureLockTooltipText\" />\n            </div>\n        } @else if (closable()) {\n            <div class=\"ap-filter-leaf__actions\" [class.ap-filter-leaf__chevron--rotated]=\"!expanded()\">\n                <ap-symbol symbolId=\"chevron-up\" size=\"sm\" />\n            </div>\n        }\n    </div>\n\n    @if ((!closable() || expanded()) && (!item().featureLocked || !closable())) {\n        <div class=\"ap-filter-leaf__content\">\n            @if (item().label && displayLabelInLeaf()) {\n                <span class=\"ap-filter-leaf__label\">{{ item().label }}</span>\n            }\n            @switch (item().filterType) {\n                @case ('checkbox') {\n                    @if (checkboxItem(); as vCheckboxItem) {\n                        @for (option of vCheckboxItem.items; track option.name) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-checkbox\n                                    [name]=\"'checkbox-' + item().key + '-' + option.name\"\n                                    [checked]=\"checkboxValue()[option.name]\"\n                                    [disabled]=\"!!option.disabled || item().featureLocked\"\n                                    (change)=\"onCheckboxChange(option.name, $event)\"\n                                >\n                                    <span>{{ option.label }}</span>\n                                </ap-checkbox>\n                            </div>\n                        }\n                    }\n                }\n                @case ('radio') {\n                    @if (radioItem(); as vRadioItem) {\n                        @for (option of vRadioItem.items; track option.radioId) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-radio\n                                    [radioId]=\"option.radioId\"\n                                    [value]=\"option.value\"\n                                    [disabled]=\"!!option.disabled || !!item().featureLocked\"\n                                    [name]=\"item().key\"\n                                    [ngModel]=\"radioValue()\"\n                                    (ngModelChange)=\"onRadioClick($event)\"\n                                >\n                                    <span>{{ option.label }}</span>\n                                </ap-radio>\n                            </div>\n                        }\n                    }\n                }\n                @case ('toggle') {\n                    @if (toggleItem(); as vToggleItem) {\n                        <div class=\"ap-filter-leaf__option\">\n                            <ap-toggle\n                                [name]=\"'toggle-' + vToggleItem.item.name\"\n                                [checked]=\"toggleValue()\"\n                                [disabled]=\"vToggleItem.item.disabled || item().featureLocked\"\n                                (change)=\"onToggleChange($event)\"\n                            />\n                            <span class=\"toggle\"\n                                  [class.disabled]=\"vToggleItem.item.disabled || item().featureLocked\">{{ vToggleItem.item.label }}</span>\n                        </div>\n                    }\n                }\n                @case ('select') {\n                    @if (selectItem(); as vSelectItem) {\n                        <ap-filter-leaf-select [item]=\"vSelectItem\"\n                                               (valueChange)=\"valueChange.emit($event)\"\n                                               (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n                    }\n                }\n                @case ('date-range') {\n                    @if (dateRangeItem(); as vDateRangeItem) {\n                        <ap-input-datepicker\n                            [disabled]=\"!!item().featureLocked\"\n                            [label]=\"vDateRangeItem.label\"\n                            [mode]=\"DatepickerMode.Range\"\n                            [placeholder]=\"vDateRangeItem.placeholder ?? 'Select date range'\"\n                            [minDate]=\"vDateRangeItem.minDate\"\n                            [maxDate]=\"vDateRangeItem.maxDate\"\n                            [dateFormat]=\"vDateRangeItem.dateFormat ?? 'MMMM DD, YYYY'\"\n                            [clearable]=\"true\"\n                            [selectedPeriod]=\"dateRangeValue()\"\n                            (periodChanged)=\"onDateRangeChange($event)\"\n                        />\n                    }\n                }\n            }\n        </div>\n    }\n\n</div>\n", styles: [".ap-filter-leaf{display:flex;flex-direction:column}.ap-filter-leaf.with-border-bottom{border-bottom:1px solid var(--ref-color-grey-10)}.ap-filter-leaf__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ref-spacing-sm)}.ap-filter-leaf__header.ap-filter-leaf__expanded{padding-bottom:var(--ref-spacing-xs)}.ap-filter-leaf__closable{cursor:pointer}.ap-filter-leaf__title{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1 0 0;color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__label{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__chevron--rotated{transform:rotate(180deg)}.ap-filter-leaf__content{display:flex;flex-direction:column;gap:var(--ref-spacing-xs);padding:0 var(--ref-spacing-sm) var(--ref-spacing-sm)}.ap-filter-leaf__option{display:flex;gap:var(--ref-spacing-xxs);align-items:center;justify-content:flex-start}.ap-filter-leaf__option .toggle{font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}.ap-filter-leaf__option span.disabled{color:var(--ref-color-grey-60)}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: RadioComponent, selector: "ap-radio", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "labelPosition", "radioId", "formControlName", "value", "required", "name"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ToggleComponent, selector: "ap-toggle", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "labelPosition", "disabled", "checked", "required", "confirm", "confirmMessage", "confirmOk", "confirmCancel", "confirmTitle", "name"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FilterLeafSelectComponent, selector: "ap-filter-leaf-select", inputs: ["item"], outputs: ["valueChange", "lockedFeatureClicked"] }, { kind: "component", type: InputDatepickerComponent, selector: "ap-input-datepicker", inputs: ["mode", "label", "placeholder", "firstDayOfWeek", "locale", "dateFormat", "disabled", "minDate", "maxDate", "selectedDate", "selectedDates", "selectedPeriod", "i18n", "showRanges", "showCustomRangeLabel", "rangesConfig", "showBackdrop", "defaultPosition", "clearable"], outputs: ["periodChanged", "dateSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterLeafComponent, isStandalone: true, selector: "ap-filter-leaf", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, isLastLeaf: { classPropertyName: "isLastLeaf", publicName: "isLastLeaf", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", lockedFeatureClicked: "lockedFeatureClicked", filterDropdownGroupLockedClicked: "filterDropdownGroupLockedClicked" }, providers: [provideUiComponentsSymbols(apChevronDown, apInfo, apFeatureLock)], ngImport: i0, template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n    <div\n        (click)=\"onHeaderClick()\"\n        (keyup.enter)=\"onHeaderClick()\"\n        [class.ap-filter-leaf__closable]=\"closable() || item().featureLocked\"\n        [class.ap-filter-leaf__expanded]=\"(!closable() || expanded()) && (!item().featureLocked || !closable())\"\n        class=\"ap-filter-leaf__header\" tabindex=\"0\">\n        <div class=\"ap-filter-leaf__title\">\n            <span>{{ item().title }}</span>\n            @if (item().tooltipText) {\n                <ap-symbol color=\"light-grey\" symbolId=\"info\" size=\"sm\" [apTooltip]=\"item().tooltipText\" />\n            }\n        </div>\n        @if (item().featureLocked) {\n            <div class=\"ap-filter-leaf__actions\">\n                <ap-symbol color=\"purple\" symbolId=\"feature-lock\" size=\"sm\"\n                           [apTooltip]=\"item().featureLockTooltipText\" />\n            </div>\n        } @else if (closable()) {\n            <div class=\"ap-filter-leaf__actions\" [class.ap-filter-leaf__chevron--rotated]=\"!expanded()\">\n                <ap-symbol symbolId=\"chevron-up\" size=\"sm\" />\n            </div>\n        }\n    </div>\n\n    @if ((!closable() || expanded()) && (!item().featureLocked || !closable())) {\n        <div class=\"ap-filter-leaf__content\">\n            @if (item().label && displayLabelInLeaf()) {\n                <span class=\"ap-filter-leaf__label\">{{ item().label }}</span>\n            }\n            @switch (item().filterType) {\n                @case ('checkbox') {\n                    @if (checkboxItem(); as vCheckboxItem) {\n                        @for (option of vCheckboxItem.items; track option.name) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-checkbox\n                                    [name]=\"'checkbox-' + item().key + '-' + option.name\"\n                                    [checked]=\"checkboxValue()[option.name]\"\n                                    [disabled]=\"!!option.disabled || item().featureLocked\"\n                                    (change)=\"onCheckboxChange(option.name, $event)\"\n                                >\n                                    <span>{{ option.label }}</span>\n                                </ap-checkbox>\n                            </div>\n                        }\n                    }\n                }\n                @case ('radio') {\n                    @if (radioItem(); as vRadioItem) {\n                        @for (option of vRadioItem.items; track option.radioId) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-radio\n                                    [radioId]=\"option.radioId\"\n                                    [value]=\"option.value\"\n                                    [disabled]=\"!!option.disabled || !!item().featureLocked\"\n                                    [name]=\"item().key\"\n                                    [ngModel]=\"radioValue()\"\n                                    (ngModelChange)=\"onRadioClick($event)\"\n                                >\n                                    <span>{{ option.label }}</span>\n                                </ap-radio>\n                            </div>\n                        }\n                    }\n                }\n                @case ('toggle') {\n                    @if (toggleItem(); as vToggleItem) {\n                        <div class=\"ap-filter-leaf__option\">\n                            <ap-toggle\n                                [name]=\"'toggle-' + vToggleItem.item.name\"\n                                [checked]=\"toggleValue()\"\n                                [disabled]=\"vToggleItem.item.disabled || item().featureLocked\"\n                                (change)=\"onToggleChange($event)\"\n                            />\n                            <span class=\"toggle\"\n                                  [class.disabled]=\"vToggleItem.item.disabled || item().featureLocked\">{{ vToggleItem.item.label }}</span>\n                        </div>\n                    }\n                }\n                @case ('select') {\n                    @if (selectItem(); as vSelectItem) {\n                        <ap-filter-leaf-select [item]=\"vSelectItem\"\n                                               (valueChange)=\"valueChange.emit($event)\"\n                                               (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n                    }\n                }\n                @case ('date-range') {\n                    @if (dateRangeItem(); as vDateRangeItem) {\n                        <ap-input-datepicker\n                            [disabled]=\"!!item().featureLocked\"\n                            [label]=\"vDateRangeItem.label\"\n                            [mode]=\"DatepickerMode.Range\"\n                            [placeholder]=\"vDateRangeItem.placeholder ?? 'Select date range'\"\n                            [minDate]=\"vDateRangeItem.minDate\"\n                            [maxDate]=\"vDateRangeItem.maxDate\"\n                            [dateFormat]=\"vDateRangeItem.dateFormat ?? 'MMMM DD, YYYY'\"\n                            [clearable]=\"true\"\n                            [selectedPeriod]=\"dateRangeValue()\"\n                            (periodChanged)=\"onDateRangeChange($event)\"\n                        />\n                    }\n                }\n            }\n        </div>\n    }\n\n</div>\n", styles: [".ap-filter-leaf{display:flex;flex-direction:column}.ap-filter-leaf.with-border-bottom{border-bottom:1px solid var(--sys-color-border-default)}.ap-filter-leaf__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ref-spacing-sm)}.ap-filter-leaf__header.ap-filter-leaf__expanded{padding-bottom:var(--ref-spacing-xs)}.ap-filter-leaf__closable{cursor:pointer}.ap-filter-leaf__title{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1 0 0;color:var(--sys-color-text-interactive-default);font-family:var(--sys-text-style-body-bold-font-family);font-size:var(--sys-text-style-body-bold-size);font-style:normal;font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height)}.ap-filter-leaf__label{color:var(--sys-color-text-interactive-default);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-style:normal;font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height)}.ap-filter-leaf__chevron--rotated{transform:rotate(180deg)}.ap-filter-leaf__content{display:flex;flex-direction:column;gap:var(--ref-spacing-xs);padding:0 var(--ref-spacing-sm) var(--ref-spacing-sm)}.ap-filter-leaf__option{display:flex;gap:var(--ref-spacing-xxs);align-items:center;justify-content:flex-start}.ap-filter-leaf__option .toggle{font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--sys-color-text-interactive-default)}.ap-filter-leaf__option span.disabled{color:var(--sys-color-text-interactive-disabled)}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: RadioComponent, selector: "ap-radio", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "labelPosition", "radioId", "formControlName", "value", "required", "name"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ToggleComponent, selector: "ap-toggle", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "labelPosition", "disabled", "checked", "required", "confirm", "confirmMessage", "confirmOk", "confirmCancel", "confirmTitle", "name"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FilterLeafSelectComponent, selector: "ap-filter-leaf-select", inputs: ["item"], outputs: ["valueChange", "lockedFeatureClicked"] }, { kind: "component", type: InputDatepickerComponent, selector: "ap-input-datepicker", inputs: ["mode", "label", "placeholder", "firstDayOfWeek", "locale", "dateFormat", "disabled", "minDate", "maxDate", "selectedDate", "selectedDates", "selectedPeriod", "i18n", "showRanges", "showCustomRangeLabel", "rangesConfig", "showBackdrop", "defaultPosition", "clearable"], outputs: ["periodChanged", "dateSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterLeafComponent, decorators: [{
             type: Component,
@@ -401,7 +401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         InputDatepickerComponent,
                         SymbolComponent,
                         SymbolComponent,
-                    ], providers: [provideUiComponentsSymbols(apChevronDown, apInfo, apFeatureLock)], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n    <div\n        (click)=\"onHeaderClick()\"\n        (keyup.enter)=\"onHeaderClick()\"\n        [class.ap-filter-leaf__closable]=\"closable() || item().featureLocked\"\n        [class.ap-filter-leaf__expanded]=\"(!closable() || expanded()) && (!item().featureLocked || !closable())\"\n        class=\"ap-filter-leaf__header\" tabindex=\"0\">\n        <div class=\"ap-filter-leaf__title\">\n            <span>{{ item().title }}</span>\n            @if (item().tooltipText) {\n                <ap-symbol color=\"light-grey\" symbolId=\"info\" size=\"sm\" [apTooltip]=\"item().tooltipText\" />\n            }\n        </div>\n        @if (item().featureLocked) {\n            <div class=\"ap-filter-leaf__actions\">\n                <ap-symbol color=\"purple\" symbolId=\"feature-lock\" size=\"sm\"\n                           [apTooltip]=\"item().featureLockTooltipText\" />\n            </div>\n        } @else if (closable()) {\n            <div class=\"ap-filter-leaf__actions\" [class.ap-filter-leaf__chevron--rotated]=\"!expanded()\">\n                <ap-symbol symbolId=\"chevron-up\" size=\"sm\" />\n            </div>\n        }\n    </div>\n\n    @if ((!closable() || expanded()) && (!item().featureLocked || !closable())) {\n        <div class=\"ap-filter-leaf__content\">\n            @if (item().label && displayLabelInLeaf()) {\n                <span class=\"ap-filter-leaf__label\">{{ item().label }}</span>\n            }\n            @switch (item().filterType) {\n                @case ('checkbox') {\n                    @if (checkboxItem(); as vCheckboxItem) {\n                        @for (option of vCheckboxItem.items; track option.name) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-checkbox\n                                    [name]=\"'checkbox-' + item().key + '-' + option.name\"\n                                    [checked]=\"checkboxValue()[option.name]\"\n                                    [disabled]=\"!!option.disabled || item().featureLocked\"\n                                    (change)=\"onCheckboxChange(option.name, $event)\"\n                                >\n                                    <span>{{ option.label }}</span>\n                                </ap-checkbox>\n                            </div>\n                        }\n                    }\n                }\n                @case ('radio') {\n                    @if (radioItem(); as vRadioItem) {\n                        @for (option of vRadioItem.items; track option.radioId) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-radio\n                                    [radioId]=\"option.radioId\"\n                                    [value]=\"option.value\"\n                                    [disabled]=\"!!option.disabled || !!item().featureLocked\"\n                                    [name]=\"item().key\"\n                                    [ngModel]=\"radioValue()\"\n                                    (ngModelChange)=\"onRadioClick($event)\"\n                                >\n                                    <span>{{ option.label }}</span>\n                                </ap-radio>\n                            </div>\n                        }\n                    }\n                }\n                @case ('toggle') {\n                    @if (toggleItem(); as vToggleItem) {\n                        <div class=\"ap-filter-leaf__option\">\n                            <ap-toggle\n                                [name]=\"'toggle-' + vToggleItem.item.name\"\n                                [checked]=\"toggleValue()\"\n                                [disabled]=\"vToggleItem.item.disabled || item().featureLocked\"\n                                (change)=\"onToggleChange($event)\"\n                            />\n                            <span class=\"toggle\"\n                                  [class.disabled]=\"vToggleItem.item.disabled || item().featureLocked\">{{ vToggleItem.item.label }}</span>\n                        </div>\n                    }\n                }\n                @case ('select') {\n                    @if (selectItem(); as vSelectItem) {\n                        <ap-filter-leaf-select [item]=\"vSelectItem\"\n                                               (valueChange)=\"valueChange.emit($event)\"\n                                               (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n                    }\n                }\n                @case ('date-range') {\n                    @if (dateRangeItem(); as vDateRangeItem) {\n                        <ap-input-datepicker\n                            [disabled]=\"!!item().featureLocked\"\n                            [label]=\"vDateRangeItem.label\"\n                            [mode]=\"DatepickerMode.Range\"\n                            [placeholder]=\"vDateRangeItem.placeholder ?? 'Select date range'\"\n                            [minDate]=\"vDateRangeItem.minDate\"\n                            [maxDate]=\"vDateRangeItem.maxDate\"\n                            [dateFormat]=\"vDateRangeItem.dateFormat ?? 'MMMM DD, YYYY'\"\n                            [clearable]=\"true\"\n                            [selectedPeriod]=\"dateRangeValue()\"\n                            (periodChanged)=\"onDateRangeChange($event)\"\n                        />\n                    }\n                }\n            }\n        </div>\n    }\n\n</div>\n", styles: [".ap-filter-leaf{display:flex;flex-direction:column}.ap-filter-leaf.with-border-bottom{border-bottom:1px solid var(--ref-color-grey-10)}.ap-filter-leaf__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ref-spacing-sm)}.ap-filter-leaf__header.ap-filter-leaf__expanded{padding-bottom:var(--ref-spacing-xs)}.ap-filter-leaf__closable{cursor:pointer}.ap-filter-leaf__title{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1 0 0;color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__label{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__chevron--rotated{transform:rotate(180deg)}.ap-filter-leaf__content{display:flex;flex-direction:column;gap:var(--ref-spacing-xs);padding:0 var(--ref-spacing-sm) var(--ref-spacing-sm)}.ap-filter-leaf__option{display:flex;gap:var(--ref-spacing-xxs);align-items:center;justify-content:flex-start}.ap-filter-leaf__option .toggle{font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}.ap-filter-leaf__option span.disabled{color:var(--ref-color-grey-60)}\n"] }]
+                    ], providers: [provideUiComponentsSymbols(apChevronDown, apInfo, apFeatureLock)], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n    <div\n        (click)=\"onHeaderClick()\"\n        (keyup.enter)=\"onHeaderClick()\"\n        [class.ap-filter-leaf__closable]=\"closable() || item().featureLocked\"\n        [class.ap-filter-leaf__expanded]=\"(!closable() || expanded()) && (!item().featureLocked || !closable())\"\n        class=\"ap-filter-leaf__header\" tabindex=\"0\">\n        <div class=\"ap-filter-leaf__title\">\n            <span>{{ item().title }}</span>\n            @if (item().tooltipText) {\n                <ap-symbol color=\"light-grey\" symbolId=\"info\" size=\"sm\" [apTooltip]=\"item().tooltipText\" />\n            }\n        </div>\n        @if (item().featureLocked) {\n            <div class=\"ap-filter-leaf__actions\">\n                <ap-symbol color=\"purple\" symbolId=\"feature-lock\" size=\"sm\"\n                           [apTooltip]=\"item().featureLockTooltipText\" />\n            </div>\n        } @else if (closable()) {\n            <div class=\"ap-filter-leaf__actions\" [class.ap-filter-leaf__chevron--rotated]=\"!expanded()\">\n                <ap-symbol symbolId=\"chevron-up\" size=\"sm\" />\n            </div>\n        }\n    </div>\n\n    @if ((!closable() || expanded()) && (!item().featureLocked || !closable())) {\n        <div class=\"ap-filter-leaf__content\">\n            @if (item().label && displayLabelInLeaf()) {\n                <span class=\"ap-filter-leaf__label\">{{ item().label }}</span>\n            }\n            @switch (item().filterType) {\n                @case ('checkbox') {\n                    @if (checkboxItem(); as vCheckboxItem) {\n                        @for (option of vCheckboxItem.items; track option.name) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-checkbox\n                                    [name]=\"'checkbox-' + item().key + '-' + option.name\"\n                                    [checked]=\"checkboxValue()[option.name]\"\n                                    [disabled]=\"!!option.disabled || item().featureLocked\"\n                                    (change)=\"onCheckboxChange(option.name, $event)\"\n                                >\n                                    <span>{{ option.label }}</span>\n                                </ap-checkbox>\n                            </div>\n                        }\n                    }\n                }\n                @case ('radio') {\n                    @if (radioItem(); as vRadioItem) {\n                        @for (option of vRadioItem.items; track option.radioId) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-radio\n                                    [radioId]=\"option.radioId\"\n                                    [value]=\"option.value\"\n                                    [disabled]=\"!!option.disabled || !!item().featureLocked\"\n                                    [name]=\"item().key\"\n                                    [ngModel]=\"radioValue()\"\n                                    (ngModelChange)=\"onRadioClick($event)\"\n                                >\n                                    <span>{{ option.label }}</span>\n                                </ap-radio>\n                            </div>\n                        }\n                    }\n                }\n                @case ('toggle') {\n                    @if (toggleItem(); as vToggleItem) {\n                        <div class=\"ap-filter-leaf__option\">\n                            <ap-toggle\n                                [name]=\"'toggle-' + vToggleItem.item.name\"\n                                [checked]=\"toggleValue()\"\n                                [disabled]=\"vToggleItem.item.disabled || item().featureLocked\"\n                                (change)=\"onToggleChange($event)\"\n                            />\n                            <span class=\"toggle\"\n                                  [class.disabled]=\"vToggleItem.item.disabled || item().featureLocked\">{{ vToggleItem.item.label }}</span>\n                        </div>\n                    }\n                }\n                @case ('select') {\n                    @if (selectItem(); as vSelectItem) {\n                        <ap-filter-leaf-select [item]=\"vSelectItem\"\n                                               (valueChange)=\"valueChange.emit($event)\"\n                                               (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n                    }\n                }\n                @case ('date-range') {\n                    @if (dateRangeItem(); as vDateRangeItem) {\n                        <ap-input-datepicker\n                            [disabled]=\"!!item().featureLocked\"\n                            [label]=\"vDateRangeItem.label\"\n                            [mode]=\"DatepickerMode.Range\"\n                            [placeholder]=\"vDateRangeItem.placeholder ?? 'Select date range'\"\n                            [minDate]=\"vDateRangeItem.minDate\"\n                            [maxDate]=\"vDateRangeItem.maxDate\"\n                            [dateFormat]=\"vDateRangeItem.dateFormat ?? 'MMMM DD, YYYY'\"\n                            [clearable]=\"true\"\n                            [selectedPeriod]=\"dateRangeValue()\"\n                            (periodChanged)=\"onDateRangeChange($event)\"\n                        />\n                    }\n                }\n            }\n        </div>\n    }\n\n</div>\n", styles: [".ap-filter-leaf{display:flex;flex-direction:column}.ap-filter-leaf.with-border-bottom{border-bottom:1px solid var(--sys-color-border-default)}.ap-filter-leaf__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ref-spacing-sm)}.ap-filter-leaf__header.ap-filter-leaf__expanded{padding-bottom:var(--ref-spacing-xs)}.ap-filter-leaf__closable{cursor:pointer}.ap-filter-leaf__title{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1 0 0;color:var(--sys-color-text-interactive-default);font-family:var(--sys-text-style-body-bold-font-family);font-size:var(--sys-text-style-body-bold-size);font-style:normal;font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height)}.ap-filter-leaf__label{color:var(--sys-color-text-interactive-default);font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-style:normal;font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height)}.ap-filter-leaf__chevron--rotated{transform:rotate(180deg)}.ap-filter-leaf__content{display:flex;flex-direction:column;gap:var(--ref-spacing-xs);padding:0 var(--ref-spacing-sm) var(--ref-spacing-sm)}.ap-filter-leaf__option{display:flex;gap:var(--ref-spacing-xxs);align-items:center;justify-content:flex-start}.ap-filter-leaf__option .toggle{font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--sys-color-text-interactive-default)}.ap-filter-leaf__option span.disabled{color:var(--sys-color-text-interactive-disabled)}\n"] }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], isLastLeaf: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLastLeaf", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }], filterDropdownGroupLockedClicked: [{ type: i0.Output, args: ["filterDropdownGroupLockedClicked"] }] } });
 
 class FilterDropdownComponent {
@@ -610,11 +610,11 @@ class FilterDropdownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterDropdownComponent, isStandalone: true, selector: "ap-filter-dropdown", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, savedValue: { classPropertyName: "savedValue", publicName: "savedValue", isSignal: true, isRequired: false, transformFunction: null }, needApplyButton: { classPropertyName: "needApplyButton", publicName: "needApplyButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, expandOnOpen: { classPropertyName: "expandOnOpen", publicName: "expandOnOpen", isSignal: true, isRequired: false, transformFunction: null }, presetsFeatureLocked: { classPropertyName: "presetsFeatureLocked", publicName: "presetsFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, savePresetsMode: { classPropertyName: "savePresetsMode", publicName: "savePresetsMode", isSignal: true, isRequired: false, transformFunction: null }, editingPresetsMode: { classPropertyName: "editingPresetsMode", publicName: "editingPresetsMode", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, saveNewPresetsText: { classPropertyName: "saveNewPresetsText", publicName: "saveNewPresetsText", isSignal: true, isRequired: false, transformFunction: null }, saveAsNewPresetText: { classPropertyName: "saveAsNewPresetText", publicName: "saveAsNewPresetText", isSignal: true, isRequired: false, transformFunction: null }, savePresetText: { classPropertyName: "savePresetText", publicName: "savePresetText", isSignal: true, isRequired: false, transformFunction: null }, updateExistingPresetText: { classPropertyName: "updateExistingPresetText", publicName: "updateExistingPresetText", isSignal: true, isRequired: false, transformFunction: null }, resetFilterText: { classPropertyName: "resetFilterText", publicName: "resetFilterText", isSignal: true, isRequired: false, transformFunction: null }, applyFiltersText: { classPropertyName: "applyFiltersText", publicName: "applyFiltersText", isSignal: true, isRequired: false, transformFunction: null }, clearFilterText: { classPropertyName: "clearFilterText", publicName: "clearFilterText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", presetsLockedClicked: "presetsLockedClicked", saveNewPresets: "saveNewPresets", updatePresets: "updatePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters", lockedFeatureClicked: "lockedFeatureClicked", filterDropdownGroupLockedClicked: "filterDropdownGroupLockedClicked" }, providers: [FilterState, provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh, apFeatureLock)], viewQueries: [{ propertyName: "filterGroupTemplate", first: true, predicate: ["filterGroupTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #filterGroupTemplate>\n    <div\n        class=\"ap-filter-dropdown\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        aria-label=\"Filter dropdown\">\n\n        <div class=\"ap-filter-dropdown__content\">\n            @for (item of filterState.groups(); let last = $last; track item.key) {\n                <ap-filter-leaf\n                    [item]=\"item\"\n                    [closable]=\"closable()\"\n                    [isLastLeaf]=\"last\"\n                    (valueChange)=\"onLeafEdit($event)\"\n                    (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n                    (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n            }\n        </div>\n\n        <div class=\"ap-filter-dropdown__footer\">\n            @if (savePresetsMode()) {\n                <div class=\"ap-filter-dropdown__footer--presets\">\n                    @if (!editingPresetsMode() || presetsFeatureLocked()) {\n                        <ap-button\n                            name=\"filter-dropdown-save-preset\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled() && !presetsFeatureLocked()\"\n                            [locked]=\"presetsFeatureLocked()\"\n                            (click)=\"onSavePresets()\">\n                            {{ saveNewPresetsText() }}\n                        </ap-button>\n                    } @else {\n                        <ap-button\n                            name=\"filter-dropdown-edit-presets\"\n                            symbolId=\"chevron-down\"\n                            symbolPosition=\"right\"\n                            [apDropdownTrigger]=\"updatePresetsDropdown\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                        >\n                            {{ savePresetText() }}\n                        </ap-button>\n                    }\n\n                    <ap-button\n                        name=\"filter-dropdown-reset-filters\"\n                        [symbolId]=\"'reset'\"\n                        [symbolPosition]=\"'left'\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        [disabled]=\"filterState.buttonsDisabled()\"\n                        (click)=\"onResetFilters()\">\n                        {{ resetFilterText() }}\n                    </ap-button>\n                </div>\n            } @else {\n                <div class=\"ap-filter-dropdown__footer--apply\">\n                    <ap-button\n                        name=\"filter-dropdown-clear-filters\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        [disabled]=\"filterState.clearDisabled()\"\n                        (click)=\"onClearFilters()\">\n                        {{ clearFilterText() }}\n                    </ap-button>\n\n                    @if (needApplyButton()) {\n                        <ap-button\n                            name=\"filter-dropdown-apply-filters\"\n                            [config]=\"{ color: 'blue', style: 'primary' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                            (click)=\"onApplyFilters()\">\n                            {{ applyFiltersText() }}\n                        </ap-button>\n                    }\n                </div>\n            }\n        </div>\n    </div>\n\n</ng-template>\n\n<ap-action-dropdown\n    #updatePresetsDropdown\n    [items]=\"savePresetsDropdownItems()\"\n    (itemClick)=\"onActionDropdownItemClick($event)\"\n/>\n", styles: [":host{display:none}.ap-filter-dropdown{display:flex;flex-direction:column;width:420px;background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);outline:none;max-height:min(90vh,750px)}.ap-filter-dropdown__footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__content{overflow-x:hidden;overflow-y:auto}.ap-filter-dropdown__footer{border-top:1px solid var(--comp-action-dropdown-divider-color)}.ap-filter-dropdown__footer--presets{display:flex;justify-content:space-between}.ap-filter-dropdown__footer--apply{display:flex;justify-content:flex-end;gap:var(--ref-spacing-sm)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: FilterLeafComponent, selector: "ap-filter-leaf", inputs: ["item", "closable", "isLastLeaf"], outputs: ["valueChange", "lockedFeatureClicked", "filterDropdownGroupLockedClicked"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: ActionDropdownComponent, selector: "ap-action-dropdown", inputs: ["items", "largeModeEnabled", "customWidth", "showBackdrop", "disabled", "defaultPosition"], outputs: ["opened", "closed", "itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterDropdownComponent, isStandalone: true, selector: "ap-filter-dropdown", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, savedValue: { classPropertyName: "savedValue", publicName: "savedValue", isSignal: true, isRequired: false, transformFunction: null }, needApplyButton: { classPropertyName: "needApplyButton", publicName: "needApplyButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, expandOnOpen: { classPropertyName: "expandOnOpen", publicName: "expandOnOpen", isSignal: true, isRequired: false, transformFunction: null }, presetsFeatureLocked: { classPropertyName: "presetsFeatureLocked", publicName: "presetsFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, savePresetsMode: { classPropertyName: "savePresetsMode", publicName: "savePresetsMode", isSignal: true, isRequired: false, transformFunction: null }, editingPresetsMode: { classPropertyName: "editingPresetsMode", publicName: "editingPresetsMode", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, saveNewPresetsText: { classPropertyName: "saveNewPresetsText", publicName: "saveNewPresetsText", isSignal: true, isRequired: false, transformFunction: null }, saveAsNewPresetText: { classPropertyName: "saveAsNewPresetText", publicName: "saveAsNewPresetText", isSignal: true, isRequired: false, transformFunction: null }, savePresetText: { classPropertyName: "savePresetText", publicName: "savePresetText", isSignal: true, isRequired: false, transformFunction: null }, updateExistingPresetText: { classPropertyName: "updateExistingPresetText", publicName: "updateExistingPresetText", isSignal: true, isRequired: false, transformFunction: null }, resetFilterText: { classPropertyName: "resetFilterText", publicName: "resetFilterText", isSignal: true, isRequired: false, transformFunction: null }, applyFiltersText: { classPropertyName: "applyFiltersText", publicName: "applyFiltersText", isSignal: true, isRequired: false, transformFunction: null }, clearFilterText: { classPropertyName: "clearFilterText", publicName: "clearFilterText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", presetsLockedClicked: "presetsLockedClicked", saveNewPresets: "saveNewPresets", updatePresets: "updatePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters", lockedFeatureClicked: "lockedFeatureClicked", filterDropdownGroupLockedClicked: "filterDropdownGroupLockedClicked" }, providers: [FilterState, provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh, apFeatureLock)], viewQueries: [{ propertyName: "filterGroupTemplate", first: true, predicate: ["filterGroupTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #filterGroupTemplate>\n    <div\n        class=\"ap-filter-dropdown\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        aria-label=\"Filter dropdown\">\n\n        <div class=\"ap-filter-dropdown__content\">\n            @for (item of filterState.groups(); let last = $last; track item.key) {\n                <ap-filter-leaf\n                    [item]=\"item\"\n                    [closable]=\"closable()\"\n                    [isLastLeaf]=\"last\"\n                    (valueChange)=\"onLeafEdit($event)\"\n                    (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n                    (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n            }\n        </div>\n\n        <div class=\"ap-filter-dropdown__footer\">\n            @if (savePresetsMode()) {\n                <div class=\"ap-filter-dropdown__footer--presets\">\n                    @if (!editingPresetsMode() || presetsFeatureLocked()) {\n                        <ap-button\n                            name=\"filter-dropdown-save-preset\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled() && !presetsFeatureLocked()\"\n                            [locked]=\"presetsFeatureLocked()\"\n                            (click)=\"onSavePresets()\">\n                            {{ saveNewPresetsText() }}\n                        </ap-button>\n                    } @else {\n                        <ap-button\n                            name=\"filter-dropdown-edit-presets\"\n                            symbolId=\"chevron-down\"\n                            symbolPosition=\"right\"\n                            [apDropdownTrigger]=\"updatePresetsDropdown\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                        >\n                            {{ savePresetText() }}\n                        </ap-button>\n                    }\n\n                    <ap-button\n                        name=\"filter-dropdown-reset-filters\"\n                        [symbolId]=\"'reset'\"\n                        [symbolPosition]=\"'left'\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        [disabled]=\"filterState.buttonsDisabled()\"\n                        (click)=\"onResetFilters()\">\n                        {{ resetFilterText() }}\n                    </ap-button>\n                </div>\n            } @else {\n                <div class=\"ap-filter-dropdown__footer--apply\">\n                    <ap-button\n                        name=\"filter-dropdown-clear-filters\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        [disabled]=\"filterState.clearDisabled()\"\n                        (click)=\"onClearFilters()\">\n                        {{ clearFilterText() }}\n                    </ap-button>\n\n                    @if (needApplyButton()) {\n                        <ap-button\n                            name=\"filter-dropdown-apply-filters\"\n                            [config]=\"{ color: 'blue', style: 'primary' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                            (click)=\"onApplyFilters()\">\n                            {{ applyFiltersText() }}\n                        </ap-button>\n                    }\n                </div>\n            }\n        </div>\n    </div>\n\n</ng-template>\n\n<ap-action-dropdown\n    #updatePresetsDropdown\n    [items]=\"savePresetsDropdownItems()\"\n    (itemClick)=\"onActionDropdownItemClick($event)\"\n/>\n", styles: [":host{display:none}.ap-filter-dropdown{display:flex;flex-direction:column;width:420px;background-color:var(--sys-color-surface-default);border-radius:var(--sys-radius-inner);box-shadow:0 4px 25px -2px #34456326,0 4px 6px -2px #34456326;outline:none;max-height:min(90vh,750px)}.ap-filter-dropdown__footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__content{overflow-x:hidden;overflow-y:auto}.ap-filter-dropdown__footer{border-top:1px solid var(--sys-color-border-default)}.ap-filter-dropdown__footer--presets{display:flex;justify-content:space-between}.ap-filter-dropdown__footer--apply{display:flex;justify-content:flex-end;gap:var(--ref-spacing-sm)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: FilterLeafComponent, selector: "ap-filter-leaf", inputs: ["item", "closable", "isLastLeaf"], outputs: ["valueChange", "lockedFeatureClicked", "filterDropdownGroupLockedClicked"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: ActionDropdownComponent, selector: "ap-action-dropdown", inputs: ["items", "largeModeEnabled", "customWidth", "showBackdrop", "disabled", "defaultPosition"], outputs: ["opened", "closed", "itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-filter-dropdown', imports: [ButtonComponent, FilterLeafComponent, DropdownTriggerDirective, ActionDropdownComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [FilterState, provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh, apFeatureLock)], template: "<ng-template #filterGroupTemplate>\n    <div\n        class=\"ap-filter-dropdown\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        aria-label=\"Filter dropdown\">\n\n        <div class=\"ap-filter-dropdown__content\">\n            @for (item of filterState.groups(); let last = $last; track item.key) {\n                <ap-filter-leaf\n                    [item]=\"item\"\n                    [closable]=\"closable()\"\n                    [isLastLeaf]=\"last\"\n                    (valueChange)=\"onLeafEdit($event)\"\n                    (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n                    (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n            }\n        </div>\n\n        <div class=\"ap-filter-dropdown__footer\">\n            @if (savePresetsMode()) {\n                <div class=\"ap-filter-dropdown__footer--presets\">\n                    @if (!editingPresetsMode() || presetsFeatureLocked()) {\n                        <ap-button\n                            name=\"filter-dropdown-save-preset\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled() && !presetsFeatureLocked()\"\n                            [locked]=\"presetsFeatureLocked()\"\n                            (click)=\"onSavePresets()\">\n                            {{ saveNewPresetsText() }}\n                        </ap-button>\n                    } @else {\n                        <ap-button\n                            name=\"filter-dropdown-edit-presets\"\n                            symbolId=\"chevron-down\"\n                            symbolPosition=\"right\"\n                            [apDropdownTrigger]=\"updatePresetsDropdown\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                        >\n                            {{ savePresetText() }}\n                        </ap-button>\n                    }\n\n                    <ap-button\n                        name=\"filter-dropdown-reset-filters\"\n                        [symbolId]=\"'reset'\"\n                        [symbolPosition]=\"'left'\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        [disabled]=\"filterState.buttonsDisabled()\"\n                        (click)=\"onResetFilters()\">\n                        {{ resetFilterText() }}\n                    </ap-button>\n                </div>\n            } @else {\n                <div class=\"ap-filter-dropdown__footer--apply\">\n                    <ap-button\n                        name=\"filter-dropdown-clear-filters\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        [disabled]=\"filterState.clearDisabled()\"\n                        (click)=\"onClearFilters()\">\n                        {{ clearFilterText() }}\n                    </ap-button>\n\n                    @if (needApplyButton()) {\n                        <ap-button\n                            name=\"filter-dropdown-apply-filters\"\n                            [config]=\"{ color: 'blue', style: 'primary' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                            (click)=\"onApplyFilters()\">\n                            {{ applyFiltersText() }}\n                        </ap-button>\n                    }\n                </div>\n            }\n        </div>\n    </div>\n\n</ng-template>\n\n<ap-action-dropdown\n    #updatePresetsDropdown\n    [items]=\"savePresetsDropdownItems()\"\n    (itemClick)=\"onActionDropdownItemClick($event)\"\n/>\n", styles: [":host{display:none}.ap-filter-dropdown{display:flex;flex-direction:column;width:420px;background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);outline:none;max-height:min(90vh,750px)}.ap-filter-dropdown__footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__content{overflow-x:hidden;overflow-y:auto}.ap-filter-dropdown__footer{border-top:1px solid var(--comp-action-dropdown-divider-color)}.ap-filter-dropdown__footer--presets{display:flex;justify-content:space-between}.ap-filter-dropdown__footer--apply{display:flex;justify-content:flex-end;gap:var(--ref-spacing-sm)}\n"] }]
+            args: [{ selector: 'ap-filter-dropdown', imports: [ButtonComponent, FilterLeafComponent, DropdownTriggerDirective, ActionDropdownComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [FilterState, provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh, apFeatureLock)], template: "<ng-template #filterGroupTemplate>\n    <div\n        class=\"ap-filter-dropdown\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        aria-label=\"Filter dropdown\">\n\n        <div class=\"ap-filter-dropdown__content\">\n            @for (item of filterState.groups(); let last = $last; track item.key) {\n                <ap-filter-leaf\n                    [item]=\"item\"\n                    [closable]=\"closable()\"\n                    [isLastLeaf]=\"last\"\n                    (valueChange)=\"onLeafEdit($event)\"\n                    (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n                    (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n            }\n        </div>\n\n        <div class=\"ap-filter-dropdown__footer\">\n            @if (savePresetsMode()) {\n                <div class=\"ap-filter-dropdown__footer--presets\">\n                    @if (!editingPresetsMode() || presetsFeatureLocked()) {\n                        <ap-button\n                            name=\"filter-dropdown-save-preset\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled() && !presetsFeatureLocked()\"\n                            [locked]=\"presetsFeatureLocked()\"\n                            (click)=\"onSavePresets()\">\n                            {{ saveNewPresetsText() }}\n                        </ap-button>\n                    } @else {\n                        <ap-button\n                            name=\"filter-dropdown-edit-presets\"\n                            symbolId=\"chevron-down\"\n                            symbolPosition=\"right\"\n                            [apDropdownTrigger]=\"updatePresetsDropdown\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                        >\n                            {{ savePresetText() }}\n                        </ap-button>\n                    }\n\n                    <ap-button\n                        name=\"filter-dropdown-reset-filters\"\n                        [symbolId]=\"'reset'\"\n                        [symbolPosition]=\"'left'\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        [disabled]=\"filterState.buttonsDisabled()\"\n                        (click)=\"onResetFilters()\">\n                        {{ resetFilterText() }}\n                    </ap-button>\n                </div>\n            } @else {\n                <div class=\"ap-filter-dropdown__footer--apply\">\n                    <ap-button\n                        name=\"filter-dropdown-clear-filters\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        [disabled]=\"filterState.clearDisabled()\"\n                        (click)=\"onClearFilters()\">\n                        {{ clearFilterText() }}\n                    </ap-button>\n\n                    @if (needApplyButton()) {\n                        <ap-button\n                            name=\"filter-dropdown-apply-filters\"\n                            [config]=\"{ color: 'blue', style: 'primary' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                            (click)=\"onApplyFilters()\">\n                            {{ applyFiltersText() }}\n                        </ap-button>\n                    }\n                </div>\n            }\n        </div>\n    </div>\n\n</ng-template>\n\n<ap-action-dropdown\n    #updatePresetsDropdown\n    [items]=\"savePresetsDropdownItems()\"\n    (itemClick)=\"onActionDropdownItemClick($event)\"\n/>\n", styles: [":host{display:none}.ap-filter-dropdown{display:flex;flex-direction:column;width:420px;background-color:var(--sys-color-surface-default);border-radius:var(--sys-radius-inner);box-shadow:0 4px 25px -2px #34456326,0 4px 6px -2px #34456326;outline:none;max-height:min(90vh,750px)}.ap-filter-dropdown__footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__content{overflow-x:hidden;overflow-y:auto}.ap-filter-dropdown__footer{border-top:1px solid var(--sys-color-border-default)}.ap-filter-dropdown__footer--presets{display:flex;justify-content:space-between}.ap-filter-dropdown__footer--apply{display:flex;justify-content:flex-end;gap:var(--ref-spacing-sm)}\n"] }]
         }], propDecorators: { filterGroupTemplate: [{ type: i0.ViewChild, args: ['filterGroupTemplate', { isSignal: true }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], savedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "savedValue", required: false }] }], needApplyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needApplyButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], expandOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnOpen", required: false }] }], presetsFeatureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetsFeatureLocked", required: false }] }], savePresetsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetsMode", required: false }] }], editingPresetsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editingPresetsMode", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], saveNewPresetsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveNewPresetsText", required: false }] }], saveAsNewPresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveAsNewPresetText", required: false }] }], savePresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetText", required: false }] }], updateExistingPresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateExistingPresetText", required: false }] }], resetFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterText", required: false }] }], applyFiltersText: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyFiltersText", required: false }] }], clearFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearFilterText", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], presetsLockedClicked: [{ type: i0.Output, args: ["presetsLockedClicked"] }], saveNewPresets: [{ type: i0.Output, args: ["saveNewPresets"] }], updatePresets: [{ type: i0.Output, args: ["updatePresets"] }], applyFilters: [{ type: i0.Output, args: ["applyFilters"] }], clearFilters: [{ type: i0.Output, args: ["clearFilters"] }], resetFilters: [{ type: i0.Output, args: ["resetFilters"] }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }], filterDropdownGroupLockedClicked: [{ type: i0.Output, args: ["filterDropdownGroupLockedClicked"] }] } });
 
 class FilterDropdownButtonComponent {