@agorapulse/ui-components 20.4.15 → 20.4.17

package/fesm2022/agorapulse-ui-components-filter-chips-list.mjs

@@ -0,0 +1,129 @@
+import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
+import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
+import { SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';
+import { CdkListbox, CdkOption } from '@angular/cdk/listbox';
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, ChangeDetectionStrategy, Component, forwardRef, inject, Injector, output, computed, runInInjectionContext } from '@angular/core';
+import { NG_VALIDATORS, Validators } from '@angular/forms';
+import { get } from 'es-toolkit/compat';
+import * as i1 from 'ngxtension/control-value-accessor';
+import { NgxControlValueAccessor } from 'ngxtension/control-value-accessor';
+import { explicitEffect } from 'ngxtension/explicit-effect';
+import { AvatarComponent } from '@agorapulse/ui-components/avatar';
+
+class FilterChipComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    disabledTooltip = input(...(ngDevMode ? [undefined, { debugName: "disabledTooltip" }] : []));
+    symbolId = input(...(ngDevMode ? [undefined, { debugName: "symbolId" }] : []));
+    avatar = input(...(ngDevMode ? [undefined, { debugName: "avatar" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterChipComponent, isStandalone: true, selector: "button[ap-filter-chip]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "disabled": "disabled() || null" }, classAttribute: "filter-chip" }, ngImport: i0, template: "@if (symbolId()) {\n    <span class=\"filter-chip-icon\">\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId()\" />\n    </span>\n}\n@if (avatar(); as avatar) {\n    <ap-avatar\n        class=\"filter-chip-avatar\"\n        [username]=\"avatar.username ?? ''\"\n        [profilePicture]=\"avatar.profilePicture\"\n        [network]=\"avatar.network\"\n        [showInitials]=\"true\"\n        [size]=\"16\" />\n}\n<span\n    class=\"filter-chip-label\"\n    [apTooltip]=\"label()\"\n    [apTooltipTruncatedTextOnly]=\"true\"\n    [apTooltipDisabled]=\"!!disabledTooltip()\">\n    {{ label() }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxxs);height:24px;max-width:200px;padding:0 var(--ref-spacing-xxs);border-radius:24px;border:1px solid var(--ref-color-grey-20);background-color:var(--ref-color-white);cursor:pointer;overflow:hidden;font-family:var(--ref-font-family);font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-regular);color:var(--ref-color-grey-100);line-height:var(--ref-font-line-height-sm);transition:border-color .15s ease}:host:hover:not([disabled]){border-color:var(--ref-color-grey-40)}:host:active:not([disabled]){border-color:var(--ref-color-grey-80)}:host:focus-visible{outline:none;border-color:var(--ref-color-grey-40);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host[disabled]{cursor:default;background-color:var(--ref-color-grey-05);border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}:host[aria-selected=true]{background-color:var(--ref-color-electric-blue-10);border-color:var(--ref-color-electric-blue-100);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold)}:host[aria-selected=true]:hover:not([disabled]){border-color:var(--ref-color-electric-blue-60)}:host[aria-selected=true]:active:not([disabled]){border-color:var(--ref-color-electric-blue-100)}:host[aria-selected=true]:focus-visible{border-color:var(--ref-color-electric-blue-60);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host[aria-selected=true][disabled]{background-color:var(--ref-color-electric-blue-10);border-color:var(--ref-color-electric-blue-40);color:var(--ref-color-electric-blue-40);font-weight:var(--ref-font-weight-regular)}.filter-chip-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px}.filter-chip-avatar{flex-shrink:0}.filter-chip-label{flex:1 0 0;min-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterChipComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'button[ap-filter-chip]', imports: [SymbolComponent, AvatarComponent, TooltipDirective], host: {
+                        type: 'button',
+                        class: 'filter-chip',
+                        '[disabled]': 'disabled() || null',
+                    }, template: "@if (symbolId()) {\n    <span class=\"filter-chip-icon\">\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId()\" />\n    </span>\n}\n@if (avatar(); as avatar) {\n    <ap-avatar\n        class=\"filter-chip-avatar\"\n        [username]=\"avatar.username ?? ''\"\n        [profilePicture]=\"avatar.profilePicture\"\n        [network]=\"avatar.network\"\n        [showInitials]=\"true\"\n        [size]=\"16\" />\n}\n<span\n    class=\"filter-chip-label\"\n    [apTooltip]=\"label()\"\n    [apTooltipTruncatedTextOnly]=\"true\"\n    [apTooltipDisabled]=\"!!disabledTooltip()\">\n    {{ label() }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxxs);height:24px;max-width:200px;padding:0 var(--ref-spacing-xxs);border-radius:24px;border:1px solid var(--ref-color-grey-20);background-color:var(--ref-color-white);cursor:pointer;overflow:hidden;font-family:var(--ref-font-family);font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-regular);color:var(--ref-color-grey-100);line-height:var(--ref-font-line-height-sm);transition:border-color .15s ease}:host:hover:not([disabled]){border-color:var(--ref-color-grey-40)}:host:active:not([disabled]){border-color:var(--ref-color-grey-80)}:host:focus-visible{outline:none;border-color:var(--ref-color-grey-40);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host[disabled]{cursor:default;background-color:var(--ref-color-grey-05);border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}:host[aria-selected=true]{background-color:var(--ref-color-electric-blue-10);border-color:var(--ref-color-electric-blue-100);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold)}:host[aria-selected=true]:hover:not([disabled]){border-color:var(--ref-color-electric-blue-60)}:host[aria-selected=true]:active:not([disabled]){border-color:var(--ref-color-electric-blue-100)}:host[aria-selected=true]:focus-visible{border-color:var(--ref-color-electric-blue-60);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host[aria-selected=true][disabled]{background-color:var(--ref-color-electric-blue-10);border-color:var(--ref-color-electric-blue-40);color:var(--ref-color-electric-blue-40);font-weight:var(--ref-font-weight-regular)}.filter-chip-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px}.filter-chip-avatar{flex-shrink:0}.filter-chip-label{flex:1 0 0;min-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledTooltip", required: false }] }], symbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolId", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }] } });
+
+const AP_FILTER_CHIPS_LIST_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => FilterChipsListComponent),
+    multi: true,
+};
+const requiredArrayValidator = control => {
+    const value = control.value;
+    if (Array.isArray(value))
+        return value.length > 0 ? null : { required: true };
+    return Validators.required(control);
+};
+class FilterChipsListComponent {
+    symbolRegistry = inject(SymbolRegistry);
+    injector = inject(Injector);
+    /**
+     * Resolved in `ngOnInit` (not as a field initializer) to avoid a circular dependency:
+     * `NgModel` injects `NG_VALIDATORS` (multi) → `FilterChipsListComponent` (validator) →
+     * `NgxControlValueAccessor` → `NgControl` (= the same `NgModel` being constructed).
+     */
+    cva;
+    /** Chips to render. Each item exposes a `value` (extracted via `bindValue`) and a label (via `bindLabel`). */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** When true, multiple chips can be selected at once. When false, only one. */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Disable every chip in the list. Combined with the FormControl disabled state. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Mark the control as required. Surfaces `{ required: true }` on empty selection and `aria-required="true"`. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Key on `item.value` to project as the form-model value. When null (default), the whole `item.value` is used. */
+    bindValue = input(null, ...(ngDevMode ? [{ debugName: "bindValue" }] : []));
+    /** Key on `item.value` to display as the chip label. When null (default), the value itself is used when primitive. */
+    bindLabel = input(null, ...(ngDevMode ? [{ debugName: "bindLabel" }] : []));
+    /** Equality used to match selected values against items. Defaults to `Object.is` — pass a custom fn for object values. */
+    compareWith = input(Object.is, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
+    /** Accessible label for the listbox — relayed to the inner `[role="listbox"]` element via `aria-label`. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel", alias: 'aria-label' }] : [{ alias: 'aria-label' }]));
+    /** User-initiated selection change — payload `{ value, item }`. Not emitted on programmatic `writeValue`. */
+    valueChange = output();
+    /** Effective disabled state — `[disabled]` input OR `FormControl.disable()` (mirrored by `cva.disabled$`). */
+    isDisabled = computed(() => this.disabled() || (this.cva?.disabled$() ?? false), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    viewItems = computed(() => {
+        const listDisabled = this.isDisabled();
+        return this.items().map(item => ({
+            source: item,
+            modelValue: this.modelOf(item),
+            label: this.labelOf(item),
+            symbolId: item.symbolId,
+            avatar: item.avatar,
+            disabledTooltip: item.disabledTooltip,
+            disabled: listDisabled || (item.disabled ?? false),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "viewItems" }] : []));
+    _validator = computed(() => (this.required() ? requiredArrayValidator : null), ...(ngDevMode ? [{ debugName: "_validator" }] : []));
+    _onValidatorChange;
+    constructor() {
+        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
+        explicitEffect([this._validator], () => this._onValidatorChange());
+    }
+    ngOnInit() {
+        this.cva = runInInjectionContext(this.injector, () => inject(NgxControlValueAccessor));
+    }
+    onListboxChange(event) {
+        // Setter on `cva.value` updates the signal AND notifies the parent ngControl via the registered `onChange`.
+        this.cva.value = event.value;
+        const cmp = this.compareWith();
+        const item = this.items().find(i => cmp(this.modelOf(i), event.option?.value)) ?? this.items()[0];
+        this.valueChange.emit({ value: event.value, item });
+    }
+    validate(control) {
+        return this._validator()?.(control) ?? null;
+    }
+    registerOnValidatorChange(fn) {
+        this._onValidatorChange = fn;
+    }
+    modelOf(item) {
+        const path = this.bindValue();
+        return path ? get(item.value, path) : item.value;
+    }
+    labelOf(item) {
+        const path = this.bindLabel();
+        if (path)
+            return String(get(item.value, path) ?? '');
+        return typeof item.value === 'object' ? '' : String(item.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterChipsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterChipsListComponent, isStandalone: true, selector: "ap-filter-chips-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [AP_FILTER_CHIPS_LIST_VALIDATOR], hostDirectives: [{ directive: i1.NgxControlValueAccessor }], ngImport: i0, template: "<div class=\"filter-chips-list\"\n     cdkListbox\n     cdkListboxOrientation=\"horizontal\"\n     [cdkListboxValue]=\"cva.value$()\"\n     [cdkListboxMultiple]=\"multiple()\"\n     [cdkListboxDisabled]=\"isDisabled()\"\n     [cdkListboxCompareWith]=\"compareWith()\"\n     [attr.aria-required]=\"required() || null\"\n     [attr.aria-label]=\"ariaLabel()\"\n     (cdkListboxValueChange)=\"onListboxChange($event)\">\n    @for (item of viewItems(); track item.source) {\n        <button\n            ap-filter-chip\n            type=\"button\"\n            [cdkOption]=\"item.modelValue\"\n            [cdkOptionDisabled]=\"item.disabled\"\n            [disabled]=\"item.disabled\"\n            [apTooltip]=\"item.disabledTooltip ?? null\"\n            [apTooltipDisabled]=\"!item.disabled || !item.disabledTooltip\"\n            [label]=\"item.label\"\n            [symbolId]=\"item.symbolId\"\n            [avatar]=\"item.avatar\"\n            [disabledTooltip]=\"item.disabledTooltip\"></button>\n    }\n</div>\n", styles: [":host{display:block}.filter-chips-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ref-spacing-xxs)}\n"], dependencies: [{ kind: "component", type: FilterChipComponent, selector: "button[ap-filter-chip]", inputs: ["label", "disabled", "disabledTooltip", "symbolId", "avatar"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterChipsListComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-filter-chips-list', imports: [FilterChipComponent, TooltipDirective, CdkListbox, CdkOption], hostDirectives: [NgxControlValueAccessor], providers: [AP_FILTER_CHIPS_LIST_VALIDATOR], template: "<div class=\"filter-chips-list\"\n     cdkListbox\n     cdkListboxOrientation=\"horizontal\"\n     [cdkListboxValue]=\"cva.value$()\"\n     [cdkListboxMultiple]=\"multiple()\"\n     [cdkListboxDisabled]=\"isDisabled()\"\n     [cdkListboxCompareWith]=\"compareWith()\"\n     [attr.aria-required]=\"required() || null\"\n     [attr.aria-label]=\"ariaLabel()\"\n     (cdkListboxValueChange)=\"onListboxChange($event)\">\n    @for (item of viewItems(); track item.source) {\n        <button\n            ap-filter-chip\n            type=\"button\"\n            [cdkOption]=\"item.modelValue\"\n            [cdkOptionDisabled]=\"item.disabled\"\n            [disabled]=\"item.disabled\"\n            [apTooltip]=\"item.disabledTooltip ?? null\"\n            [apTooltipDisabled]=\"!item.disabled || !item.disabledTooltip\"\n            [label]=\"item.label\"\n            [symbolId]=\"item.symbolId\"\n            [avatar]=\"item.avatar\"\n            [disabledTooltip]=\"item.disabledTooltip\"></button>\n    }\n</div>\n", styles: [":host{display:block}.filter-chips-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ref-spacing-xxs)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AP_FILTER_CHIPS_LIST_VALIDATOR, FilterChipsListComponent };
+//# sourceMappingURL=agorapulse-ui-components-filter-chips-list.mjs.map

package/fesm2022/agorapulse-ui-components-filter-chips-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-filter-chips-list.mjs","sources":["../../../libs/ui-components/filter-chips-list/src/filter-chip/filter-chip.component.ts","../../../libs/ui-components/filter-chips-list/src/filter-chip/filter-chip.component.html","../../../libs/ui-components/filter-chips-list/src/filter-chips-list.component.ts","../../../libs/ui-components/filter-chips-list/src/filter-chips-list.component.html","../../../libs/ui-components/filter-chips-list/src/agorapulse-ui-components-filter-chips-list.ts"],"sourcesContent":["import { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { agorapulseSymbol, SymbolComponent } from '@agorapulse/ui-symbol';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';\n\nexport interface FilterChipAvatar {\n    profilePicture?: string;\n    username?: string;\n    network?: string;\n}\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'button[ap-filter-chip]',\n    templateUrl: './filter-chip.component.html',\n    styleUrls: ['./filter-chip.component.scss'],\n    imports: [SymbolComponent, AvatarComponent, TooltipDirective],\n    host: {\n        type: 'button',\n        class: 'filter-chip',\n        '[disabled]': 'disabled() || null',\n    },\n})\nexport class FilterChipComponent {\n    label = input('');\n    disabled = input(false, { transform: booleanAttribute });\n    disabledTooltip = input<string>();\n    symbolId = input<agorapulseSymbol>();\n    avatar = input<FilterChipAvatar>();\n}\n","@if (symbolId()) {\n    <span class=\"filter-chip-icon\">\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId()\" />\n    </span>\n}\n@if (avatar(); as avatar) {\n    <ap-avatar\n        class=\"filter-chip-avatar\"\n        [username]=\"avatar.username ?? ''\"\n        [profilePicture]=\"avatar.profilePicture\"\n        [network]=\"avatar.network\"\n        [showInitials]=\"true\"\n        [size]=\"16\" />\n}\n<span\n    class=\"filter-chip-label\"\n    [apTooltip]=\"label()\"\n    [apTooltipTruncatedTextOnly]=\"true\"\n    [apTooltipDisabled]=\"!!disabledTooltip()\">\n    {{ label() }}\n</span>\n","import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { agorapulseSymbol, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { CdkListbox, CdkOption, ListboxValueChangeEvent } from '@angular/cdk/listbox';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    forwardRef,\n    inject,\n    Injector,\n    input,\n    OnInit,\n    output,\n    runInInjectionContext,\n} from '@angular/core';\nimport { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, ValidatorFn, Validators } from '@angular/forms';\nimport { get } from 'es-toolkit/compat';\nimport { NgxControlValueAccessor } from 'ngxtension/control-value-accessor';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { FilterChipAvatar, FilterChipComponent } from './filter-chip/filter-chip.component';\n\nexport interface FilterChipItem {\n    /**\n     * The source object backing the chip — primitive or domain object.\n     * The form-model value is extracted via `bindValue` and the displayed text via `bindLabel`.\n     */\n    value: unknown;\n    disabled?: boolean;\n    disabledTooltip?: string;\n    symbolId?: agorapulseSymbol;\n    avatar?: FilterChipAvatar;\n}\n\nexport type FilterChipsListValue = readonly unknown[];\n\nexport type FilterChipsListCompareFn = (a: unknown, b: unknown) => boolean;\n\n/** Emitted on user-initiated selection changes (not on programmatic `writeValue`). */\nexport interface FilterChipsListChange {\n    /** New selection after the toggle — always an array (length 0 or 1 in single mode). */\n    value: FilterChipsListValue;\n    /** The item that was triggered. */\n    item: FilterChipItem;\n}\n\nexport const AP_FILTER_CHIPS_LIST_VALIDATOR = {\n    provide: NG_VALIDATORS,\n    useExisting: forwardRef(() => FilterChipsListComponent),\n    multi: true,\n};\n\nconst requiredArrayValidator: ValidatorFn = control => {\n    const value = control.value;\n    if (Array.isArray(value)) return value.length > 0 ? null : { required: true };\n    return Validators.required(control);\n};\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-filter-chips-list',\n    templateUrl: './filter-chips-list.component.html',\n    styleUrls: ['./filter-chips-list.component.scss'],\n    imports: [FilterChipComponent, TooltipDirective, CdkListbox, CdkOption],\n    hostDirectives: [NgxControlValueAccessor],\n    providers: [AP_FILTER_CHIPS_LIST_VALIDATOR],\n})\nexport class FilterChipsListComponent implements Validator, OnInit {\n    private readonly symbolRegistry = inject(SymbolRegistry);\n    private readonly injector = inject(Injector);\n\n    /**\n     * Resolved in `ngOnInit` (not as a field initializer) to avoid a circular dependency:\n     * `NgModel` injects `NG_VALIDATORS` (multi) → `FilterChipsListComponent` (validator) →\n     * `NgxControlValueAccessor` → `NgControl` (= the same `NgModel` being constructed).\n     */\n    protected cva!: NgxControlValueAccessor<FilterChipsListValue>;\n\n    /** Chips to render. Each item exposes a `value` (extracted via `bindValue`) and a label (via `bindLabel`). */\n    items = input<FilterChipItem[]>([]);\n    /** When true, multiple chips can be selected at once. When false, only one. */\n    multiple = input(false, { transform: booleanAttribute });\n    /** Disable every chip in the list. Combined with the FormControl disabled state. */\n    disabled = input(false, { transform: booleanAttribute });\n    /** Mark the control as required. Surfaces `{ required: true }` on empty selection and `aria-required=\"true\"`. */\n    required = input(false, { transform: booleanAttribute });\n    /** Key on `item.value` to project as the form-model value. When null (default), the whole `item.value` is used. */\n    bindValue = input<string | null>(null);\n    /** Key on `item.value` to display as the chip label. When null (default), the value itself is used when primitive. */\n    bindLabel = input<string | null>(null);\n    /** Equality used to match selected values against items. Defaults to `Object.is` — pass a custom fn for object values. */\n    compareWith = input<FilterChipsListCompareFn>(Object.is);\n    /** Accessible label for the listbox — relayed to the inner `[role=\"listbox\"]` element via `aria-label`. */\n    ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n\n    /** User-initiated selection change — payload `{ value, item }`. Not emitted on programmatic `writeValue`. */\n    valueChange = output<FilterChipsListChange>();\n\n    /** Effective disabled state — `[disabled]` input OR `FormControl.disable()` (mirrored by `cva.disabled$`). */\n    protected readonly isDisabled = computed(() => this.disabled() || (this.cva?.disabled$() ?? false));\n\n    protected readonly viewItems = computed(() => {\n        const listDisabled = this.isDisabled();\n        return this.items().map(item => ({\n            source: item,\n            modelValue: this.modelOf(item),\n            label: this.labelOf(item),\n            symbolId: item.symbolId,\n            avatar: item.avatar,\n            disabledTooltip: item.disabledTooltip,\n            disabled: listDisabled || (item.disabled ?? false),\n        }));\n    });\n\n    private readonly _validator = computed<ValidatorFn | null>(() => (this.required() ? requiredArrayValidator : null));\n\n    private _onValidatorChange!: () => void;\n\n    constructor() {\n        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n        explicitEffect([this._validator], () => this._onValidatorChange());\n    }\n\n    ngOnInit(): void {\n        this.cva = runInInjectionContext(this.injector, () =>\n            inject<NgxControlValueAccessor<FilterChipsListValue>>(NgxControlValueAccessor)\n        );\n    }\n\n    protected onListboxChange(event: ListboxValueChangeEvent<unknown>): void {\n        // Setter on `cva.value` updates the signal AND notifies the parent ngControl via the registered `onChange`.\n        this.cva.value = event.value;\n        const cmp = this.compareWith();\n        const item = this.items().find(i => cmp(this.modelOf(i), event.option?.value)) ?? this.items()[0];\n        this.valueChange.emit({ value: event.value, item });\n    }\n\n    validate(control: AbstractControl): ValidationErrors | null {\n        return this._validator()?.(control) ?? null;\n    }\n\n    registerOnValidatorChange(fn: () => void): void {\n        this._onValidatorChange = fn;\n    }\n\n    private modelOf(item: FilterChipItem): unknown {\n        const path = this.bindValue();\n        return path ? get(item.value, path) : item.value;\n    }\n\n    private labelOf(item: FilterChipItem): string {\n        const path = this.bindLabel();\n        if (path) return String(get(item.value, path) ?? '');\n        return typeof item.value === 'object' ? '' : String(item.value);\n    }\n}\n","<div class=\"filter-chips-list\"\n     cdkListbox\n     cdkListboxOrientation=\"horizontal\"\n     [cdkListboxValue]=\"cva.value$()\"\n     [cdkListboxMultiple]=\"multiple()\"\n     [cdkListboxDisabled]=\"isDisabled()\"\n     [cdkListboxCompareWith]=\"compareWith()\"\n     [attr.aria-required]=\"required() || null\"\n     [attr.aria-label]=\"ariaLabel()\"\n     (cdkListboxValueChange)=\"onListboxChange($event)\">\n    @for (item of viewItems(); track item.source) {\n        <button\n            ap-filter-chip\n            type=\"button\"\n            [cdkOption]=\"item.modelValue\"\n            [cdkOptionDisabled]=\"item.disabled\"\n            [disabled]=\"item.disabled\"\n            [apTooltip]=\"item.disabledTooltip ?? null\"\n            [apTooltipDisabled]=\"!item.disabled || !item.disabledTooltip\"\n            [label]=\"item.label\"\n            [symbolId]=\"item.symbolId\"\n            [avatar]=\"item.avatar\"\n            [disabledTooltip]=\"item.disabledTooltip\"></button>\n    }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -6,10 +6,10 @@ import { provideUiComponentsSymbols } from '@agorapulse/ui-components/providers'
 import { RadioComponent } from '@agorapulse/ui-components/radio';
 import { ToggleComponent } from '@agorapulse/ui-components/toggle';
 import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
-import { SymbolComponent, apInfo, apReset, apChevronDown as apChevronDown$1, apPlus, apRefresh, withSymbols, apFilter, apFilterFill } from '@agorapulse/ui-symbol';
+import { SymbolComponent, apInfo, apReset, apChevronDown as apChevronDown$1, apPlus, apRefresh, apFeatureLock, withSymbols, apFilter, apFilterFill } from '@agorapulse/ui-symbol';
 import { apChevronDown } from '@agorapulse/ui-symbol/icons';
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, input, Component, effect, untracked, viewChild, output } from '@angular/core';
+import { signal, computed, Injectable, inject, input, Component, ChangeDetectionStrategy, effect, untracked, viewChild, output } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { SelectMultipleDirective, SelectSingleDirective, SelectLabelSingleComponent, SelectLabelMultipleComponent, DropdownItemMultipleTwoLinesComponent, DropdownItemMultipleOneLineComponent, DropdownItemSingleOneLineComponent, DropdownItemSingleTwoLinesComponent } from '@agorapulse/ui-components/select';
@@ -43,7 +43,6 @@ class FilterState {
                     break;
                 case 'select':
                     if (value.selectionType === 'single' && value.selected) {
-                        // TO FIX
                         count += 1;
                     }
                     else if (value.selectionType === 'multiple') {
@@ -142,9 +141,10 @@ class FilterState {
                     selected: group.defaultSelected ?? [],
                 };
             case 'radio':
+                const firstItem = group.items[0].value;
                 return {
                     filterType: 'radio',
-                    selected: group.defaultSelected ?? null,
+                    selected: group.defaultSelected ?? firstItem,
                 };
             case 'toggle':
                 return {
@@ -311,7 +311,7 @@ class FilterLeafComponent {
         this.filterState.setDateRangeValue(this.item().key, dateRange);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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 } }, providers: [provideUiComponentsSymbols(apChevronDown, apInfo)], ngImport: i0, template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n    <div class=\"ap-filter-leaf__header\" [class.ap-filter-leaf__closable]=\"closable()\" (click)=\"onHeaderClick()\">\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 (closable()) {\n            <div class=\"ap-filter-leaf__actions\" [class.ap-filter-leaf__chevron--rotated]=\"!item().expanded\">\n                <ap-symbol symbolId=\"chevron-up\" size=\"sm\" />\n            </div>\n        }\n    </div>\n\n    @if (!closable() || item().expanded) {\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-' + option.name\"\n                                    [checked]=\"checkboxValue()[option.name]\"\n                                    [disabled]=\"!!option.disabled\"\n                                    (change)=\"onCheckboxChange(option.name, $event)\"\n                                >\n                                    <span class=\"ap-filter-leaf__label\">{{ 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\"\n                                    [name]=\"item().key\"\n                                    [ngModel]=\"radioValue()\"\n                                    (ngModelChange)=\"onRadioClick($event)\"\n                                >\n                                    <span class=\"ap-filter-leaf__label\">{{ 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\"\n                                (change)=\"onToggleChange($event)\"\n                            />\n                            <span class=\"ap-filter-leaf__label\">{{ vToggleItem.item.label }}</span>\n                        </div>\n                    }\n                }\n                @case ('select') {\n                    @if (selectItem(); as vSelectItem) {\n                        <ap-filter-leaf-select [item]=\"vSelectItem\" />\n                    }\n                }\n                @case ('date-range') {\n                    @if (dateRangeItem(); as vDateRangeItem) {\n                        <ap-input-datepicker\n                            [label]=\"vDateRangeItem.label\"\n                            [mode]=\"DatepickerMode.Range\"\n                            [placeholder]=\"vDateRangeItem.placeholder ?? 'Select date range'\"\n                            [minDate]=\"vDateRangeItem.minDate\"\n                            [maxDate]=\"vDateRangeItem.maxDate\"\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;gap:var(--ref-spacing-xs);padding:var(--ref-spacing-sm)}.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}.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)}.ap-filter-leaf__option{display:flex;gap:var(--ref-spacing-xxs);align-items:center;justify-content:flex-start}\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"] }, { 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"], outputs: ["periodChanged", "dateSelected"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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 } }, providers: [provideUiComponentsSymbols(apChevronDown, apInfo)], ngImport: i0, template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n    <div (click)=\"onHeaderClick()\" [class.ap-filter-leaf__closable]=\"closable()\"\n         [class.ap-filter-leaf__expanded]=\"(!closable() || item().expanded)\" class=\"ap-filter-leaf__header\">\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 (closable()) {\n            <div class=\"ap-filter-leaf__actions\" [class.ap-filter-leaf__chevron--rotated]=\"!item().expanded\">\n                <ap-symbol symbolId=\"chevron-up\" size=\"sm\" />\n            </div>\n        }\n    </div>\n\n    @if ((!closable() || item().expanded)) {\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-' + option.name\"\n                                    [checked]=\"checkboxValue()[option.name]\"\n                                    [disabled]=\"!!option.disabled\"\n                                    (change)=\"onCheckboxChange(option.name, $event)\"\n                                >\n                                    <span class=\"ap-filter-leaf__label\">{{ 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\"\n                                    [name]=\"item().key\"\n                                    [ngModel]=\"radioValue()\"\n                                    (ngModelChange)=\"onRadioClick($event)\"\n                                >\n                                    <span class=\"ap-filter-leaf__label\">{{ 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\"\n                                (change)=\"onToggleChange($event)\"\n                            />\n                            <span class=\"ap-filter-leaf__label\">{{ vToggleItem.item.label }}</span>\n                        </div>\n                    }\n                }\n                @case ('select') {\n                    @if (selectItem(); as vSelectItem) {\n                        <ap-filter-leaf-select [item]=\"vSelectItem\" />\n                    }\n                }\n                @case ('date-range') {\n                    @if (dateRangeItem(); as vDateRangeItem) {\n                        <ap-input-datepicker\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                            [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}\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"] }, { 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"], outputs: ["periodChanged", "dateSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafComponent, decorators: [{
             type: Component,
@@ -325,7 +325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         FilterLeafSelectComponent,
                         InputDatepickerComponent,
                         SymbolComponent,
-                    ], providers: [provideUiComponentsSymbols(apChevronDown, apInfo)], template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n    <div class=\"ap-filter-leaf__header\" [class.ap-filter-leaf__closable]=\"closable()\" (click)=\"onHeaderClick()\">\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 (closable()) {\n            <div class=\"ap-filter-leaf__actions\" [class.ap-filter-leaf__chevron--rotated]=\"!item().expanded\">\n                <ap-symbol symbolId=\"chevron-up\" size=\"sm\" />\n            </div>\n        }\n    </div>\n\n    @if (!closable() || item().expanded) {\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-' + option.name\"\n                                    [checked]=\"checkboxValue()[option.name]\"\n                                    [disabled]=\"!!option.disabled\"\n                                    (change)=\"onCheckboxChange(option.name, $event)\"\n                                >\n                                    <span class=\"ap-filter-leaf__label\">{{ 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\"\n                                    [name]=\"item().key\"\n                                    [ngModel]=\"radioValue()\"\n                                    (ngModelChange)=\"onRadioClick($event)\"\n                                >\n                                    <span class=\"ap-filter-leaf__label\">{{ 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\"\n                                (change)=\"onToggleChange($event)\"\n                            />\n                            <span class=\"ap-filter-leaf__label\">{{ vToggleItem.item.label }}</span>\n                        </div>\n                    }\n                }\n                @case ('select') {\n                    @if (selectItem(); as vSelectItem) {\n                        <ap-filter-leaf-select [item]=\"vSelectItem\" />\n                    }\n                }\n                @case ('date-range') {\n                    @if (dateRangeItem(); as vDateRangeItem) {\n                        <ap-input-datepicker\n                            [label]=\"vDateRangeItem.label\"\n                            [mode]=\"DatepickerMode.Range\"\n                            [placeholder]=\"vDateRangeItem.placeholder ?? 'Select date range'\"\n                            [minDate]=\"vDateRangeItem.minDate\"\n                            [maxDate]=\"vDateRangeItem.maxDate\"\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;gap:var(--ref-spacing-xs);padding:var(--ref-spacing-sm)}.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}.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)}.ap-filter-leaf__option{display:flex;gap:var(--ref-spacing-xxs);align-items:center;justify-content:flex-start}\n"] }]
+                    ], providers: [provideUiComponentsSymbols(apChevronDown, apInfo)], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n    <div (click)=\"onHeaderClick()\" [class.ap-filter-leaf__closable]=\"closable()\"\n         [class.ap-filter-leaf__expanded]=\"(!closable() || item().expanded)\" class=\"ap-filter-leaf__header\">\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 (closable()) {\n            <div class=\"ap-filter-leaf__actions\" [class.ap-filter-leaf__chevron--rotated]=\"!item().expanded\">\n                <ap-symbol symbolId=\"chevron-up\" size=\"sm\" />\n            </div>\n        }\n    </div>\n\n    @if ((!closable() || item().expanded)) {\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-' + option.name\"\n                                    [checked]=\"checkboxValue()[option.name]\"\n                                    [disabled]=\"!!option.disabled\"\n                                    (change)=\"onCheckboxChange(option.name, $event)\"\n                                >\n                                    <span class=\"ap-filter-leaf__label\">{{ 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\"\n                                    [name]=\"item().key\"\n                                    [ngModel]=\"radioValue()\"\n                                    (ngModelChange)=\"onRadioClick($event)\"\n                                >\n                                    <span class=\"ap-filter-leaf__label\">{{ 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\"\n                                (change)=\"onToggleChange($event)\"\n                            />\n                            <span class=\"ap-filter-leaf__label\">{{ vToggleItem.item.label }}</span>\n                        </div>\n                    }\n                }\n                @case ('select') {\n                    @if (selectItem(); as vSelectItem) {\n                        <ap-filter-leaf-select [item]=\"vSelectItem\" />\n                    }\n                }\n                @case ('date-range') {\n                    @if (dateRangeItem(); as vDateRangeItem) {\n                        <ap-input-datepicker\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                            [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}\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 }] }] } });
 
 class FilterDropdownComponent {
@@ -356,6 +356,8 @@ class FilterDropdownComponent {
     needApplyButton = input(true, ...(ngDevMode ? [{ debugName: "needApplyButton" }] : []));
     /** Whether the filter group can be closed (collapsed) by the user. If false, the group will always be expanded and the user won't see a toggle button. */
     closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
+    /** whether the feature to save presets is locked for the org */
+    presetsFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "presetsFeatureLocked" }] : []));
     /** whether the mode is in preset mode */
     savePresetsMode = input(false, ...(ngDevMode ? [{ debugName: "savePresetsMode" }] : []));
     /** whether the user is currently editing presets. Only necessary if savePresetsMode is at true */
@@ -377,6 +379,8 @@ class FilterDropdownComponent {
     opened = output();
     /** Emits when the dropdown menu is closed */
     closed = output();
+    /** Emits when save presets is clicked but is feature locked */
+    presetsLockedClicked = output();
     /** Emits when save presets is clicked */
     saveNewPresets = output();
     /** Emits when save presets is clicked */
@@ -446,6 +450,10 @@ class FilterDropdownComponent {
         this.resetFilters.emit();
     }
     onSavePresets() {
+        if (this.presetsFeatureLocked()) {
+            this.presetsLockedClicked.emit();
+            return;
+        }
         this.saveNewPresets.emit(this.filterState.getSnapshot());
     }
     onUpdatePresets() {
@@ -462,12 +470,12 @@ class FilterDropdownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterDropdownComponent, isStandalone: true, selector: "ap-filter-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", 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 }, 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", 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", saveNewPresets: "saveNewPresets", updatePresets: "updatePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters" }, providers: [provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh)], 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 [item]=\"item\" [closable]=\"closable()\" [isLastLeaf]=\"last\" />\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()) {\n                        <ap-button\n                            name=\"filter-dropdown-save-preset\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\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.buttonsDisabled()\"\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    (itemClick)=\"onActionDropdownItemClick($event)\"\n    [items]=\"savePresetsDropdownItems()\"\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"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterDropdownComponent, isStandalone: true, selector: "ap-filter-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", 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 }, 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", 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" }, providers: [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 [item]=\"item\" [closable]=\"closable()\" [isLastLeaf]=\"last\" />\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.buttonsDisabled()\"\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    (itemClick)=\"onActionDropdownItemClick($event)\"\n    [items]=\"savePresetsDropdownItems()\"\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"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-filter-dropdown', imports: [ButtonComponent, FilterLeafComponent, DropdownTriggerDirective, ActionDropdownComponent], providers: [provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh)], 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 [item]=\"item\" [closable]=\"closable()\" [isLastLeaf]=\"last\" />\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()) {\n                        <ap-button\n                            name=\"filter-dropdown-save-preset\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\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.buttonsDisabled()\"\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    (itemClick)=\"onActionDropdownItemClick($event)\"\n    [items]=\"savePresetsDropdownItems()\"\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"] }]
-        }], propDecorators: { filterGroupTemplate: [{ type: i0.ViewChild, args: ['filterGroupTemplate', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], needApplyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needApplyButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", 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"] }], 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"] }] } });
+            args: [{ selector: 'ap-filter-dropdown', imports: [ButtonComponent, FilterLeafComponent, DropdownTriggerDirective, ActionDropdownComponent], providers: [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 [item]=\"item\" [closable]=\"closable()\" [isLastLeaf]=\"last\" />\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.buttonsDisabled()\"\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    (itemClick)=\"onActionDropdownItemClick($event)\"\n    [items]=\"savePresetsDropdownItems()\"\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"] }]
+        }], propDecorators: { filterGroupTemplate: [{ type: i0.ViewChild, args: ['filterGroupTemplate', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], needApplyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needApplyButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", 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"] }] } });
 
 class FilterDropdownButtonComponent {
     filterState = inject(FilterState);
@@ -482,6 +490,8 @@ class FilterDropdownButtonComponent {
     needApplyButton = input(true, ...(ngDevMode ? [{ debugName: "needApplyButton" }] : []));
     /** Whether the filter group can be closed (collapsed) by the user. If false, the group will always be expanded and the user won't see a toggle button. */
     closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
+    /** whether the feature to save presets is locked for the org */
+    presetsFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "presetsFeatureLocked" }] : []));
     /** whether the mode is in preset mode */
     savePresetsMode = input(false, ...(ngDevMode ? [{ debugName: "savePresetsMode" }] : []));
     /** whether the user is currently editing presets. Only necessary if savePresetsMode is at true */
@@ -503,6 +513,8 @@ class FilterDropdownButtonComponent {
     opened = output();
     /** Emits when the dropdown menu is closed */
     closed = output();
+    /** Emits when save presets is clicked but is feature locked */
+    presetsLockedClicked = output();
     /** Emits when save presets is clicked */
     saveNewPresets = output();
     /** Emits when save presets is clicked */
@@ -531,12 +543,12 @@ class FilterDropdownButtonComponent {
         this.updatePresets.emit(this.filterState.getSnapshot());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterDropdownButtonComponent, isStandalone: true, selector: "ap-filter-dropdown-button", inputs: { buttonFilterText: { classPropertyName: "buttonFilterText", publicName: "buttonFilterText", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", 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 }, 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", 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", saveNewPresets: "saveNewPresets", updatePresets: "updatePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters" }, providers: [withSymbols(apFilter, apFilterFill)], ngImport: i0, template: "<ap-button\n    [apDropdownTrigger]=\"filterDropdown\"\n    [config]=\"{ style: 'stroked', color: isFilterCountActive() ? 'blue' : 'grey' }\"\n    ariaLabel=\"Button toggling filters\"\n    name=\"toggle-filter\"\n    symbolPosition=\"left\">\n    <ap-symbol [symbolId]=\"isFilterCountActive() ? 'filter_fill' : 'filter'\" />\n    @if (isFilterCountActive()) {\n        <ap-counter\n            size=\"big\"\n            color=\"blue\"\n            [background]=\"true\">\n            {{ activeFilterCount() }}\n        </ap-counter>\n    }\n    {{ buttonFilterText() }}\n</ap-button>\n\n<ap-filter-dropdown\n    #filterDropdown\n    (applyFilters)=\"applyFilters.emit($event)\"\n    (clearFilters)=\"clearFilters.emit()\"\n    (closed)=\"closed.emit()\"\n    (opened)=\"opened.emit()\"\n    (resetFilters)=\"resetFilters.emit()\"\n    (saveNewPresets)=\"saveNewPresets.emit($event)\"\n    (updatePresets)=\"updatePresets.emit($event)\"\n    [applyFiltersText]=\"applyFiltersText()\"\n    [clearFilterText]=\"clearFilterText()\"\n    [closable]=\"closable()\"\n    [defaultPosition]=\"defaultPosition()\"\n    [disabled]=\"disabled()\"\n    [editingPresetsMode]=\"editingPresetsMode()\"\n    [items]=\"items()\"\n    [needApplyButton]=\"needApplyButton()\"\n    [resetFilterText]=\"resetFilterText()\"\n    [saveAsNewPresetText]=\"saveAsNewPresetText()\"\n    [saveNewPresetsText]=\"saveNewPresetsText()\"\n    [savePresetText]=\"savePresetText()\"\n    [savePresetsMode]=\"savePresetsMode()\"\n    [showBackdrop]=\"showBackdrop()\"\n    [updateExistingPresetText]=\"updateExistingPresetText()\" />\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: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: FilterDropdownComponent, selector: "ap-filter-dropdown", inputs: ["items", "needApplyButton", "closable", "savePresetsMode", "editingPresetsMode", "showBackdrop", "disabled", "defaultPosition", "saveNewPresetsText", "saveAsNewPresetText", "savePresetText", "updateExistingPresetText", "resetFilterText", "applyFiltersText", "clearFilterText"], outputs: ["opened", "closed", "saveNewPresets", "updatePresets", "applyFilters", "clearFilters", "resetFilters"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterDropdownButtonComponent, isStandalone: true, selector: "ap-filter-dropdown-button", inputs: { buttonFilterText: { classPropertyName: "buttonFilterText", publicName: "buttonFilterText", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", 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 }, 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", 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" }, providers: [withSymbols(apFilter, apFilterFill)], ngImport: i0, template: "<ap-button\n    [apDropdownTrigger]=\"filterDropdown\"\n    [config]=\"{ style: 'stroked', color: isFilterCountActive() ? 'blue' : 'grey' }\"\n    ariaLabel=\"Button toggling filters\"\n    name=\"toggle-filter\"\n    symbolPosition=\"left\">\n    <ap-symbol [symbolId]=\"isFilterCountActive() ? 'filter_fill' : 'filter'\" />\n    @if (isFilterCountActive()) {\n        <ap-counter\n            size=\"big\"\n            color=\"blue\"\n            [background]=\"true\">\n            {{ activeFilterCount() }}\n        </ap-counter>\n    }\n    {{ buttonFilterText() }}\n</ap-button>\n\n<ap-filter-dropdown\n    #filterDropdown\n    (applyFilters)=\"applyFilters.emit($event)\"\n    (clearFilters)=\"clearFilters.emit()\"\n    (closed)=\"closed.emit()\"\n    (opened)=\"opened.emit()\"\n    (resetFilters)=\"resetFilters.emit()\"\n    (saveNewPresets)=\"saveNewPresets.emit($event)\"\n    (updatePresets)=\"updatePresets.emit($event)\"\n    (presetsLockedClicked)=\"presetsLockedClicked.emit()\"\n    [presetsFeatureLocked]=\"presetsFeatureLocked()\"\n    [applyFiltersText]=\"applyFiltersText()\"\n    [clearFilterText]=\"clearFilterText()\"\n    [closable]=\"closable()\"\n    [defaultPosition]=\"defaultPosition()\"\n    [disabled]=\"disabled()\"\n    [editingPresetsMode]=\"editingPresetsMode()\"\n    [items]=\"items()\"\n    [needApplyButton]=\"needApplyButton()\"\n    [resetFilterText]=\"resetFilterText()\"\n    [saveAsNewPresetText]=\"saveAsNewPresetText()\"\n    [saveNewPresetsText]=\"saveNewPresetsText()\"\n    [savePresetText]=\"savePresetText()\"\n    [savePresetsMode]=\"savePresetsMode()\"\n    [showBackdrop]=\"showBackdrop()\"\n    [updateExistingPresetText]=\"updateExistingPresetText()\" />\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: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: FilterDropdownComponent, selector: "ap-filter-dropdown", inputs: ["items", "needApplyButton", "closable", "presetsFeatureLocked", "savePresetsMode", "editingPresetsMode", "showBackdrop", "disabled", "defaultPosition", "saveNewPresetsText", "saveAsNewPresetText", "savePresetText", "updateExistingPresetText", "resetFilterText", "applyFiltersText", "clearFilterText"], outputs: ["opened", "closed", "presetsLockedClicked", "saveNewPresets", "updatePresets", "applyFilters", "clearFilters", "resetFilters"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-filter-dropdown-button', imports: [ButtonComponent, DropdownTriggerDirective, SymbolComponent, FilterDropdownComponent, CounterComponent], providers: [withSymbols(apFilter, apFilterFill)], template: "<ap-button\n    [apDropdownTrigger]=\"filterDropdown\"\n    [config]=\"{ style: 'stroked', color: isFilterCountActive() ? 'blue' : 'grey' }\"\n    ariaLabel=\"Button toggling filters\"\n    name=\"toggle-filter\"\n    symbolPosition=\"left\">\n    <ap-symbol [symbolId]=\"isFilterCountActive() ? 'filter_fill' : 'filter'\" />\n    @if (isFilterCountActive()) {\n        <ap-counter\n            size=\"big\"\n            color=\"blue\"\n            [background]=\"true\">\n            {{ activeFilterCount() }}\n        </ap-counter>\n    }\n    {{ buttonFilterText() }}\n</ap-button>\n\n<ap-filter-dropdown\n    #filterDropdown\n    (applyFilters)=\"applyFilters.emit($event)\"\n    (clearFilters)=\"clearFilters.emit()\"\n    (closed)=\"closed.emit()\"\n    (opened)=\"opened.emit()\"\n    (resetFilters)=\"resetFilters.emit()\"\n    (saveNewPresets)=\"saveNewPresets.emit($event)\"\n    (updatePresets)=\"updatePresets.emit($event)\"\n    [applyFiltersText]=\"applyFiltersText()\"\n    [clearFilterText]=\"clearFilterText()\"\n    [closable]=\"closable()\"\n    [defaultPosition]=\"defaultPosition()\"\n    [disabled]=\"disabled()\"\n    [editingPresetsMode]=\"editingPresetsMode()\"\n    [items]=\"items()\"\n    [needApplyButton]=\"needApplyButton()\"\n    [resetFilterText]=\"resetFilterText()\"\n    [saveAsNewPresetText]=\"saveAsNewPresetText()\"\n    [saveNewPresetsText]=\"saveNewPresetsText()\"\n    [savePresetText]=\"savePresetText()\"\n    [savePresetsMode]=\"savePresetsMode()\"\n    [showBackdrop]=\"showBackdrop()\"\n    [updateExistingPresetText]=\"updateExistingPresetText()\" />\n" }]
-        }], propDecorators: { buttonFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonFilterText", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], needApplyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needApplyButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", 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"] }], 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"] }] } });
+            args: [{ selector: 'ap-filter-dropdown-button', imports: [ButtonComponent, DropdownTriggerDirective, SymbolComponent, FilterDropdownComponent, CounterComponent], providers: [withSymbols(apFilter, apFilterFill)], template: "<ap-button\n    [apDropdownTrigger]=\"filterDropdown\"\n    [config]=\"{ style: 'stroked', color: isFilterCountActive() ? 'blue' : 'grey' }\"\n    ariaLabel=\"Button toggling filters\"\n    name=\"toggle-filter\"\n    symbolPosition=\"left\">\n    <ap-symbol [symbolId]=\"isFilterCountActive() ? 'filter_fill' : 'filter'\" />\n    @if (isFilterCountActive()) {\n        <ap-counter\n            size=\"big\"\n            color=\"blue\"\n            [background]=\"true\">\n            {{ activeFilterCount() }}\n        </ap-counter>\n    }\n    {{ buttonFilterText() }}\n</ap-button>\n\n<ap-filter-dropdown\n    #filterDropdown\n    (applyFilters)=\"applyFilters.emit($event)\"\n    (clearFilters)=\"clearFilters.emit()\"\n    (closed)=\"closed.emit()\"\n    (opened)=\"opened.emit()\"\n    (resetFilters)=\"resetFilters.emit()\"\n    (saveNewPresets)=\"saveNewPresets.emit($event)\"\n    (updatePresets)=\"updatePresets.emit($event)\"\n    (presetsLockedClicked)=\"presetsLockedClicked.emit()\"\n    [presetsFeatureLocked]=\"presetsFeatureLocked()\"\n    [applyFiltersText]=\"applyFiltersText()\"\n    [clearFilterText]=\"clearFilterText()\"\n    [closable]=\"closable()\"\n    [defaultPosition]=\"defaultPosition()\"\n    [disabled]=\"disabled()\"\n    [editingPresetsMode]=\"editingPresetsMode()\"\n    [items]=\"items()\"\n    [needApplyButton]=\"needApplyButton()\"\n    [resetFilterText]=\"resetFilterText()\"\n    [saveAsNewPresetText]=\"saveAsNewPresetText()\"\n    [saveNewPresetsText]=\"saveNewPresetsText()\"\n    [savePresetText]=\"savePresetText()\"\n    [savePresetsMode]=\"savePresetsMode()\"\n    [showBackdrop]=\"showBackdrop()\"\n    [updateExistingPresetText]=\"updateExistingPresetText()\" />\n" }]
+        }], propDecorators: { buttonFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonFilterText", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], needApplyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needApplyButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", 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"] }] } });
 
 /**
  * Generated bundle index. Do not edit.