@agorapulse/ui-components 20.4.10 → 20.4.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/agorapulse-ui-components-20.4.11.tgz +0 -0
  2. package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +219 -6
  3. package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs.map +1 -1
  4. package/fesm2022/agorapulse-ui-components-nav-selector.mjs +2 -2
  5. package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
  6. package/fesm2022/agorapulse-ui-components.mjs.map +1 -1
  7. package/filter-dropdown/index.d.ts +96 -29
  8. package/index.d.ts +1 -1
  9. package/package.json +1 -1
  10. package/select/index.d.ts +2 -0
  11. package/agorapulse-ui-components-20.4.10.tgz +0 -0
package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs CHANGED
@@ -1,12 +1,211 @@
1
- import { createDropdownOverlay } from '@agorapulse/ui-components/dropdown-base';
2
- import * as i0 from '@angular/core';
3
- import { viewChild, input, output, Component } from '@angular/core';
4
1
  import { ButtonComponent } from '@agorapulse/ui-components/button';
2
+ import { createDropdownOverlay } from '@agorapulse/ui-components/dropdown-base';
3
+ import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
5
4
  import { provideUiComponentsSymbols } from '@agorapulse/ui-components/providers';
6
- import { apReset } from '@agorapulse/ui-symbol';
5
+ import { RadioComponent } from '@agorapulse/ui-components/radio';
6
+ import { ToggleComponent } from '@agorapulse/ui-components/toggle';
7
+ import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
8
+ import { SymbolComponent, apReset } from '@agorapulse/ui-symbol';
9
+ import { apChevronDown } from '@agorapulse/ui-symbol/icons';
10
+ import * as i0 from '@angular/core';
11
+ import { signal, Injectable, inject, input, computed, Component, effect, untracked, viewChild, output } from '@angular/core';
12
+ import * as i1 from '@angular/forms';
13
+ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
14
+
15
+ class FilterState {
16
+ _groups = signal([], ...(ngDevMode ? [{ debugName: "_groups" }] : []));
17
+ _draft = signal({}, ...(ngDevMode ? [{ debugName: "_draft" }] : []));
18
+ groups = this._groups.asReadonly();
19
+ draft = this._draft.asReadonly();
20
+ /** Initialize groups and seed draft from config defaults */
21
+ initialize(groups) {
22
+ this._groups.set(groups);
23
+ const initial = {};
24
+ for (const group of groups) {
25
+ initial[group.key] = this.buildInitialValue(group);
26
+ }
27
+ this._draft.set(initial);
28
+ }
29
+ collapseHeader(key) {
30
+ const group = this._groups().find(g => g.key === key);
31
+ if (group) {
32
+ group.expanded = !group.expanded;
33
+ this._groups.update(gs => [...gs]);
34
+ }
35
+ }
36
+ /** Get the draft value for a specific filter key */
37
+ getValue(key) {
38
+ return this._draft()[key];
39
+ }
40
+ /** Update a single filter's draft value */
41
+ updateValue(key, value) {
42
+ this._draft.update(draft => ({ ...draft, [key]: value }));
43
+ }
44
+ /** Toggle a checkbox item in a checkbox filter */
45
+ toggleCheckbox(key, name, checked) {
46
+ const current = this._draft()[key];
47
+ if (current?.filterType !== 'checkbox')
48
+ return;
49
+ const selected = checked
50
+ ? [...current.selected, name]
51
+ : current.selected.filter(n => n !== name);
52
+ this.updateValue(key, { filterType: 'checkbox', selected });
53
+ }
54
+ /** Set the selected radio value */
55
+ setRadioValue(key, value) {
56
+ this.updateValue(key, { filterType: 'radio', selected: value });
57
+ }
58
+ /** Set the toggle checked state */
59
+ setToggleValue(key, checked) {
60
+ this.updateValue(key, { filterType: 'toggle', checked });
61
+ }
62
+ /** Set selected indices for a select filter */
63
+ setSelectValue(key, selected) {
64
+ this.updateValue(key, { filterType: 'select', selected });
65
+ }
66
+ /** Return the current draft snapshot (used on Apply) */
67
+ getSnapshot() {
68
+ return { ...this._draft() };
69
+ }
70
+ /** Reset draft to initial values from the current config */
71
+ reset() {
72
+ this.initialize(this._groups());
73
+ }
74
+ /** Clear all draft values to empty/default states */
75
+ clear() {
76
+ const cleared = {};
77
+ for (const group of this._groups()) {
78
+ cleared[group.key] = this.buildEmptyValue(group);
79
+ }
80
+ this._draft.set(cleared);
81
+ }
82
+ buildInitialValue(group) {
83
+ switch (group.filterType) {
84
+ case 'checkbox':
85
+ return {
86
+ filterType: 'checkbox',
87
+ selected: group.defaultSelected ?? group.items.filter(i => i.checked).map(i => i.name),
88
+ };
89
+ case 'radio':
90
+ return {
91
+ filterType: 'radio',
92
+ selected: group.defaultSelected ?? null,
93
+ };
94
+ case 'toggle':
95
+ return {
96
+ filterType: 'toggle',
97
+ checked: group.defaultSelected ?? group.item.checked ?? false,
98
+ };
99
+ case 'select':
100
+ return {
101
+ filterType: 'select',
102
+ selected: group.defaultSelected ?? [],
103
+ };
104
+ case 'date-range':
105
+ return {
106
+ filterType: 'date-range',
107
+ selectedPeriod: group.selectedPeriod,
108
+ };
109
+ }
110
+ }
111
+ buildEmptyValue(group) {
112
+ switch (group.filterType) {
113
+ case 'checkbox':
114
+ return { filterType: 'checkbox', selected: [] };
115
+ case 'radio':
116
+ return { filterType: 'radio', selected: null };
117
+ case 'toggle':
118
+ return { filterType: 'toggle', checked: false };
119
+ case 'select':
120
+ return { filterType: 'select', selected: [] };
121
+ case 'date-range':
122
+ return { filterType: 'date-range', selectedPeriod: undefined };
123
+ }
124
+ }
125
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
126
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterState });
127
+ }
128
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterState, decorators: [{
129
+ type: Injectable
130
+ }] });
131
+
132
+ class FilterLeafComponent {
133
+ state = inject(FilterState);
134
+ /** item propagated from FilterDropdownComponent */
135
+ item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
136
+ /** whether the leaf is closable */
137
+ closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
138
+ checkboxItem = computed(() => {
139
+ const item = this.item();
140
+ return item.filterType === 'checkbox' ? item : undefined;
141
+ }, ...(ngDevMode ? [{ debugName: "checkboxItem" }] : []));
142
+ radioItem = computed(() => {
143
+ const item = this.item();
144
+ return item.filterType === 'radio' ? item : undefined;
145
+ }, ...(ngDevMode ? [{ debugName: "radioItem" }] : []));
146
+ toggleItem = computed(() => {
147
+ const item = this.item();
148
+ return item.filterType === 'toggle' ? item : undefined;
149
+ }, ...(ngDevMode ? [{ debugName: "toggleItem" }] : []));
150
+ selectItem = computed(() => {
151
+ const item = this.item();
152
+ return item.filterType === 'select' ? item : undefined;
153
+ }, ...(ngDevMode ? [{ debugName: "selectItem" }] : []));
154
+ dateRangeItem = computed(() => {
155
+ const item = this.item();
156
+ return item.filterType === 'date-range' ? item : undefined;
157
+ }, ...(ngDevMode ? [{ debugName: "dateRangeItem" }] : []));
158
+ radioValue = computed(() => {
159
+ const value = this.state.getValue(this.item().key);
160
+ return value?.filterType === 'radio' ? value.selected : null;
161
+ }, ...(ngDevMode ? [{ debugName: "radioValue" }] : []));
162
+ checkboxValue = computed(() => {
163
+ const checkboxItem = this.checkboxItem();
164
+ const checkboxValueByKey = {};
165
+ checkboxItem?.items.forEach(item => (checkboxValueByKey[item.name] = !!item.checked));
166
+ const value = this.state.getValue(this.item().key);
167
+ if (value && value.filterType === 'checkbox') {
168
+ value.selected.forEach(item => (checkboxValueByKey[item] = true));
169
+ }
170
+ return checkboxValueByKey;
171
+ }, ...(ngDevMode ? [{ debugName: "checkboxValue" }] : []));
172
+ toggleValue = computed(() => {
173
+ const value = this.state.getValue(this.item().key);
174
+ return value?.filterType === 'toggle' ? value.checked : false;
175
+ }, ...(ngDevMode ? [{ debugName: "toggleValue" }] : []));
176
+ onHeaderClick() {
177
+ if (this.closable()) {
178
+ this.state.collapseHeader(this.item().key);
179
+ }
180
+ }
181
+ onCheckboxChange(name, checked) {
182
+ this.state.toggleCheckbox(this.item().key, name, checked);
183
+ }
184
+ onRadioClick(value) {
185
+ this.state.setRadioValue(this.item().key, value);
186
+ }
187
+ onToggleChange(checked) {
188
+ this.state.setToggleValue(this.item().key, checked);
189
+ }
190
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
191
+ 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 } }, providers: [provideUiComponentsSymbols(apChevronDown)], ngImport: i0, template: "<div 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 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) {\n <span class=\"ap-filter-leaf__label\">{{ item().label }}</span>\n }\n @switch(item().filterType) {\n @case ('checkbox') {\n @let vCheckboxItem = checkboxItem();\n @if (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 [indeterminate]=\"!!option.indeterminate\"\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 @let vRadioItem = radioItem();\n @if (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 @let vToggleItem = toggleItem();\n @if (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\n }\n @case ('date-range') {\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);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: "ngmodule", type: ReactiveFormsModule }] });
192
+ }
193
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafComponent, decorators: [{
194
+ type: Component,
195
+ args: [{ selector: 'ap-filter-leaf', imports: [TooltipDirective, SymbolComponent, CheckboxComponent, RadioComponent, ToggleComponent, FormsModule, ReactiveFormsModule], providers: [provideUiComponentsSymbols(apChevronDown)], template: "<div 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 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) {\n <span class=\"ap-filter-leaf__label\">{{ item().label }}</span>\n }\n @switch(item().filterType) {\n @case ('checkbox') {\n @let vCheckboxItem = checkboxItem();\n @if (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 [indeterminate]=\"!!option.indeterminate\"\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 @let vRadioItem = radioItem();\n @if (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 @let vToggleItem = toggleItem();\n @if (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\n }\n @case ('date-range') {\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);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"] }]
196
+ }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }] } });
7
197
 
8
198
  class FilterDropdownComponent {
9
199
  overlay = createDropdownOverlay();
200
+ state = inject(FilterState);
201
+ initGroups = effect(() => {
202
+ const groups = this.items();
203
+ untracked(() => {
204
+ if (groups) {
205
+ this.state.initialize(groups);
206
+ }
207
+ });
208
+ }, ...(ngDevMode ? [{ debugName: "initGroups" }] : []));
10
209
  filterGroupTemplate = viewChild('filterGroupTemplate', ...(ngDevMode ? [{ debugName: "filterGroupTemplate" }] : []));
11
210
  /** The filter groups to display in the dropdown */
12
211
  items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
@@ -67,12 +266,26 @@ class FilterDropdownComponent {
67
266
  this.open(triggerElement);
68
267
  }
69
268
  }
269
+ onApplyFilters() {
270
+ this.applyFilters.emit(this.state.getSnapshot());
271
+ }
272
+ onClearFilters() {
273
+ this.state.clear();
274
+ this.clearFilters.emit();
275
+ }
276
+ onResetFilters() {
277
+ this.state.reset();
278
+ this.resetFilters.emit();
279
+ }
280
+ onSavePresets() {
281
+ this.savePresets.emit(this.state.getSnapshot());
282
+ }
70
283
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
71
- 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 }, 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 }, savePresetsText: { classPropertyName: "savePresetsText", publicName: "savePresetsText", 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", savePresets: "savePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters" }, providers: [provideUiComponentsSymbols(apReset)], 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 [attr.aria-label]=\"'Filter dropdown'\"\n >\n\n <div class=\"ap-filter-dropdown-content\">\n @for (item of items(); track item.title) {\n\n }\n </div>\n\n <div class=\"ap-filter-dropdown-footer\">\n @if (savePresetsMode()) {\n <div class=\"ap-filter-dropdown-footer-presets\">\n <ap-button\n name=\"filter-dropdown-save-preset\"\n [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n (click)=\"savePresets.emit()\">\n {{ savePresetsText() }}\n </ap-button>\n\n <ap-button\n name=\"filter-dropdown-reset-filters\"\n [symbolId]=\"'reset'\"\n [symbolPosition]=\"'left'\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\n (click)=\"resetFilters.emit()\">\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 (click)=\"clearFilters.emit()\">\n {{ clearFilterText() }}\n </ap-button>\n\n <ap-button\n name=\"filter-dropdown-apply-filters\"\n [config]=\"{ color: 'blue', style: 'primary' }\"\n (click)=\"applyFilters.emit()\">\n {{ applyFiltersText() }}\n </ap-button>\n </div>\n }\n </div>\n </div>\n\n</ng-template>\n", styles: [":host{display:none}.ap-filter-dropdown{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);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-filter-dropdown .ap-filter-dropdown-footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown .ap-filter-dropdown-footer .ap-filter-dropdown-footer-presets{display:flex;justify-content:space-between}.ap-filter-dropdown .ap-filter-dropdown-footer .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"] }] });
284
+ 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 }, 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 }, savePresetsText: { classPropertyName: "savePresetsText", publicName: "savePresetsText", 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", savePresets: "savePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters" }, providers: [FilterState, provideUiComponentsSymbols(apReset)], 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 state.groups(); track item.key) {\n <ap-filter-leaf [item]=\"item\" [closable]=\"closable()\" />\n }\n </div>\n\n <div class=\"ap-filter-dropdown__footer\">\n @if (savePresetsMode()) {\n <div class=\"ap-filter-dropdown__footer--presets\">\n <ap-button\n name=\"filter-dropdown-save-preset\"\n [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n (click)=\"onSavePresets()\">\n {{ savePresetsText() }}\n </ap-button>\n\n <ap-button\n name=\"filter-dropdown-reset-filters\"\n [symbolId]=\"'reset'\"\n [symbolPosition]=\"'left'\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\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 (click)=\"onClearFilters()\">\n {{ clearFilterText() }}\n </ap-button>\n\n <ap-button\n name=\"filter-dropdown-apply-filters\"\n [config]=\"{ color: 'blue', style: 'primary' }\"\n (click)=\"onApplyFilters()\">\n {{ applyFiltersText() }}\n </ap-button>\n </div>\n }\n </div>\n </div>\n\n</ng-template>\n", styles: [":host{display:none}.ap-filter-dropdown{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);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-filter-dropdown__footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.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"] }] });
72
285
  }
73
286
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownComponent, decorators: [{
74
287
  type: Component,
75
- args: [{ selector: 'ap-filter-dropdown', imports: [ButtonComponent], providers: [provideUiComponentsSymbols(apReset)], template: "<ng-template #filterGroupTemplate>\n <div\n class=\"ap-filter-dropdown\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Filter dropdown'\"\n >\n\n <div class=\"ap-filter-dropdown-content\">\n @for (item of items(); track item.title) {\n\n }\n </div>\n\n <div class=\"ap-filter-dropdown-footer\">\n @if (savePresetsMode()) {\n <div class=\"ap-filter-dropdown-footer-presets\">\n <ap-button\n name=\"filter-dropdown-save-preset\"\n [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n (click)=\"savePresets.emit()\">\n {{ savePresetsText() }}\n </ap-button>\n\n <ap-button\n name=\"filter-dropdown-reset-filters\"\n [symbolId]=\"'reset'\"\n [symbolPosition]=\"'left'\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\n (click)=\"resetFilters.emit()\">\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 (click)=\"clearFilters.emit()\">\n {{ clearFilterText() }}\n </ap-button>\n\n <ap-button\n name=\"filter-dropdown-apply-filters\"\n [config]=\"{ color: 'blue', style: 'primary' }\"\n (click)=\"applyFilters.emit()\">\n {{ applyFiltersText() }}\n </ap-button>\n </div>\n }\n </div>\n </div>\n\n</ng-template>\n", styles: [":host{display:none}.ap-filter-dropdown{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);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-filter-dropdown .ap-filter-dropdown-footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown .ap-filter-dropdown-footer .ap-filter-dropdown-footer-presets{display:flex;justify-content:space-between}.ap-filter-dropdown .ap-filter-dropdown-footer .ap-filter-dropdown-footer-apply{display:flex;justify-content:flex-end;gap:var(--ref-spacing-sm)}\n"] }]
288
+ args: [{ selector: 'ap-filter-dropdown', imports: [ButtonComponent, FilterLeafComponent], providers: [FilterState, provideUiComponentsSymbols(apReset)], 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 state.groups(); track item.key) {\n <ap-filter-leaf [item]=\"item\" [closable]=\"closable()\" />\n }\n </div>\n\n <div class=\"ap-filter-dropdown__footer\">\n @if (savePresetsMode()) {\n <div class=\"ap-filter-dropdown__footer--presets\">\n <ap-button\n name=\"filter-dropdown-save-preset\"\n [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n (click)=\"onSavePresets()\">\n {{ savePresetsText() }}\n </ap-button>\n\n <ap-button\n name=\"filter-dropdown-reset-filters\"\n [symbolId]=\"'reset'\"\n [symbolPosition]=\"'left'\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\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 (click)=\"onClearFilters()\">\n {{ clearFilterText() }}\n </ap-button>\n\n <ap-button\n name=\"filter-dropdown-apply-filters\"\n [config]=\"{ color: 'blue', style: 'primary' }\"\n (click)=\"onApplyFilters()\">\n {{ applyFiltersText() }}\n </ap-button>\n </div>\n }\n </div>\n </div>\n\n</ng-template>\n", styles: [":host{display:none}.ap-filter-dropdown{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);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-filter-dropdown__footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.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"] }]
76
289
  }], 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 }] }], 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 }] }], savePresetsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetsText", 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"] }], savePresets: [{ type: i0.Output, args: ["savePresets"] }], applyFilters: [{ type: i0.Output, args: ["applyFilters"] }], clearFilters: [{ type: i0.Output, args: ["clearFilters"] }], resetFilters: [{ type: i0.Output, args: ["resetFilters"] }] } });
77
290
 
78
291
  /**
package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"agorapulse-ui-components-filter-dropdown.mjs","sources":["../../../libs/ui-components/filter-dropdown/src/filter-dropdown/filter-dropdown.component.ts","../../../libs/ui-components/filter-dropdown/src/filter-dropdown/filter-dropdown.component.html","../../../libs/ui-components/filter-dropdown/src/agorapulse-ui-components-filter-dropdown.ts"],"sourcesContent":["import { createDropdownOverlay, DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport {\n Component,\n input,\n output,\n TemplateRef,\n viewChild,\n} from '@angular/core';\nimport { FilterGroup } from '../filter.model';\nimport { ButtonComponent } from '@agorapulse/ui-components/button';\nimport { provideUiComponentsSymbols } from '@agorapulse/ui-components/providers';\nimport { apReset } from '@agorapulse/ui-symbol';\n\n@Component({\n selector: 'ap-filter-dropdown',\n templateUrl: './filter-dropdown.component.html',\n styleUrl: './filter-dropdown.component.scss',\n imports: [ButtonComponent],\n providers: [provideUiComponentsSymbols(apReset)]\n})\nexport class FilterDropdownComponent implements DropdownOverlay {\n private readonly overlay = createDropdownOverlay();\n\n filterGroupTemplate = viewChild<TemplateRef<unknown>>('filterGroupTemplate');\n\n /** The filter groups to display in the dropdown */\n items = input<FilterGroup[]>();\n /** Whether the filter needs the apply button to be clicked for applyFilters to emit */\n needApplyButton = input(true);\n /** 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. */\n closable = input(true);\n /** whether the mode is in preset mode */\n savePresetsMode = input(false);\n\n /** Whether to show a backdrop that closes the dropdown when clicked */\n showBackdrop = input(true);\n /** Whether the dropdown is disabled and cannot be opened */\n disabled = input(false);\n /** Default position for the dropdown relative to the trigger element */\n defaultPosition = input<'right' | 'left'>('right');\n\n savePresetsText = input('Save new presets');\n resetFilterText = input('Reset filters');\n\n applyFiltersText = input('Apply filters');\n clearFilterText = input('Clear filters');\n\n /** Emits when the dropdown menu is opened */\n opened = output<void>();\n /** Emits when the dropdown menu is closed */\n closed = output<void>();\n\n /** Emits when save presets is clicked */\n savePresets = output<void>();\n /** Emits when filters are applied */\n applyFilters = output<void>();\n /** Emits when user clicks on clear filter */\n clearFilters = output<void>();\n /** Emits when user clicks on reset filter */\n resetFilters = output<void>();\n\n readonly isOpen = this.overlay.isOpen;\n\n /** Opens the dropdown menu at the specified trigger element */\n open(triggerElement?: HTMLElement): void {\n const template = this.filterGroupTemplate();\n if (this.disabled() || this.isOpen() || !template) return;\n\n this.overlay.open(template, triggerElement, {\n showBackdrop: this.showBackdrop(),\n defaultPosition: this.defaultPosition(),\n onClose: () => this.close(),\n });\n this.opened.emit();\n }\n\n /** Closes the dropdown menu and cleans up overlay resources */\n close(): void {\n if (!this.isOpen()) return;\n this.overlay.close();\n this.closed.emit();\n }\n\n /** Toggles the dropdown menu open or closed state */\n toggle(triggerElement?: HTMLElement): void {\n if (this.isOpen()) {\n this.close();\n } else {\n this.open(triggerElement);\n }\n }\n}\n","<ng-template #filterGroupTemplate>\n <div\n class=\"ap-filter-dropdown\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Filter dropdown'\"\n >\n\n <div class=\"ap-filter-dropdown-content\">\n @for (item of items(); track item.title) {\n\n }\n </div>\n\n <div class=\"ap-filter-dropdown-footer\">\n @if (savePresetsMode()) {\n <div class=\"ap-filter-dropdown-footer-presets\">\n <ap-button\n name=\"filter-dropdown-save-preset\"\n [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n (click)=\"savePresets.emit()\">\n {{ savePresetsText() }}\n </ap-button>\n\n <ap-button\n name=\"filter-dropdown-reset-filters\"\n [symbolId]=\"'reset'\"\n [symbolPosition]=\"'left'\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\n (click)=\"resetFilters.emit()\">\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 (click)=\"clearFilters.emit()\">\n {{ clearFilterText() }}\n </ap-button>\n\n <ap-button\n name=\"filter-dropdown-apply-filters\"\n [config]=\"{ color: 'blue', style: 'primary' }\"\n (click)=\"applyFilters.emit()\">\n {{ applyFiltersText() }}\n </ap-button>\n </div>\n }\n </div>\n </div>\n\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;MAoBa,uBAAuB,CAAA;IACf,OAAO,GAAG,qBAAqB,EAAE;AAElD,IAAA,mBAAmB,GAAG,SAAS,CAAuB,qBAAqB,+DAAC;;IAG5E,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAiB;;AAE9B,IAAA,eAAe,GAAG,KAAK,CAAC,IAAI,2DAAC;;AAE7B,IAAA,QAAQ,GAAG,KAAK,CAAC,IAAI,oDAAC;;AAEtB,IAAA,eAAe,GAAG,KAAK,CAAC,KAAK,2DAAC;;AAG9B,IAAA,YAAY,GAAG,KAAK,CAAC,IAAI,wDAAC;;AAE1B,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC;;AAEvB,IAAA,eAAe,GAAG,KAAK,CAAmB,OAAO,2DAAC;AAElD,IAAA,eAAe,GAAG,KAAK,CAAC,kBAAkB,2DAAC;AAC3C,IAAA,eAAe,GAAG,KAAK,CAAC,eAAe,2DAAC;AAExC,IAAA,gBAAgB,GAAG,KAAK,CAAC,eAAe,4DAAC;AACzC,IAAA,eAAe,GAAG,KAAK,CAAC,eAAe,2DAAC;;IAGxC,MAAM,GAAG,MAAM,EAAQ;;IAEvB,MAAM,GAAG,MAAM,EAAQ;;IAGvB,WAAW,GAAG,MAAM,EAAQ;;IAE5B,YAAY,GAAG,MAAM,EAAQ;;IAE7B,YAAY,GAAG,MAAM,EAAQ;;IAE7B,YAAY,GAAG,MAAM,EAAQ;AAEpB,IAAA,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM;;AAGrC,IAAA,IAAI,CAAC,cAA4B,EAAA;AAC7B,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,mBAAmB,EAAE;QAC3C,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ;YAAE;QAEnD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,cAAc,EAAE;AACxC,YAAA,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE;AACjC,YAAA,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE;AACvC,YAAA,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE;AAC9B,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;IACtB;;IAGA,KAAK,GAAA;AACD,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAAE;AACpB,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;AACpB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;IACtB;;AAGA,IAAA,MAAM,CAAC,cAA4B,EAAA;AAC/B,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;YACf,IAAI,CAAC,KAAK,EAAE;QAChB;aAAO;AACH,YAAA,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;QAC7B;IACJ;wGAtES,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,QAAA,EAAA,WAAA,EAAA,aAAA,EAAA,YAAA,EAAA,cAAA,EAAA,YAAA,EAAA,cAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,SAAA,EAFrB,CAAC,0BAA0B,CAAC,OAAO,CAAC,CAAC,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,qBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClBpD,ggEAsDA,EAAA,MAAA,EAAA,CAAA,sqBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDrCc,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAAA,OAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAGhB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;+BACI,oBAAoB,EAAA,OAAA,EAGrB,CAAC,eAAe,CAAC,EAAA,SAAA,EACf,CAAC,0BAA0B,CAAC,OAAO,CAAC,CAAC,EAAA,QAAA,EAAA,ggEAAA,EAAA,MAAA,EAAA,CAAA,sqBAAA,CAAA,EAAA;iFAKM,qBAAqB,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,cAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,gBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,aAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEvB/E;;AAEG;;;;"}
1
+ {"version":3,"file":"agorapulse-ui-components-filter-dropdown.mjs","sources":["../../../libs/ui-components/filter-dropdown/src/filter.state.ts","../../../libs/ui-components/filter-dropdown/src/filter-leaf/filter-leaf.component.ts","../../../libs/ui-components/filter-dropdown/src/filter-leaf/filter-leaf.component.html","../../../libs/ui-components/filter-dropdown/src/filter-dropdown/filter-dropdown.component.ts","../../../libs/ui-components/filter-dropdown/src/filter-dropdown/filter-dropdown.component.html","../../../libs/ui-components/filter-dropdown/src/agorapulse-ui-components-filter-dropdown.ts"],"sourcesContent":["import { Injectable, signal } from '@angular/core';\nimport {\n FilterDropdownOutput,\n FilterDropdownGroup,\n FilterDropdownValue,\n FilterDropdownValueCheckbox,\n FilterDropdownValueDateRange,\n FilterDropdownValueRadio,\n FilterDropdownValueSelect,\n FilterDropdownValueToggle,\n} from './filter.model';\n\n@Injectable()\nexport class FilterState {\n private readonly _groups = signal<FilterDropdownGroup[]>([]);\n private readonly _draft = signal<FilterDropdownOutput>({});\n\n readonly groups = this._groups.asReadonly();\n readonly draft = this._draft.asReadonly();\n\n /** Initialize groups and seed draft from config defaults */\n initialize(groups: FilterDropdownGroup[]): void {\n this._groups.set(groups);\n const initial: FilterDropdownOutput = {};\n for (const group of groups) {\n initial[group.key] = this.buildInitialValue(group);\n }\n this._draft.set(initial);\n }\n\n collapseHeader(key: string): void {\n const group = this._groups().find(g => g.key === key);\n if (group) {\n group.expanded = !group.expanded;\n this._groups.update(gs => [...gs]);\n }\n }\n\n /** Get the draft value for a specific filter key */\n getValue(key: string): FilterDropdownValue | undefined {\n return this._draft()[key];\n }\n\n /** Update a single filter's draft value */\n updateValue(key: string, value: FilterDropdownValue): void {\n this._draft.update(draft => ({ ...draft, [key]: value }));\n }\n\n /** Toggle a checkbox item in a checkbox filter */\n toggleCheckbox(key: string, name: string, checked: boolean): void {\n const current = this._draft()[key];\n if (current?.filterType !== 'checkbox') return;\n\n const selected = checked\n ? [...current.selected, name]\n : current.selected.filter(n => n !== name);\n\n this.updateValue(key, { filterType: 'checkbox', selected });\n }\n\n /** Set the selected radio value */\n setRadioValue(key: string, value: unknown): void {\n this.updateValue(key, { filterType: 'radio', selected: value });\n }\n\n /** Set the toggle checked state */\n setToggleValue(key: string, checked: boolean): void {\n this.updateValue(key, { filterType: 'toggle', checked });\n }\n\n /** Set selected indices for a select filter */\n setSelectValue(key: string, selected: number[]): void {\n this.updateValue(key, { filterType: 'select', selected });\n }\n\n /** Return the current draft snapshot (used on Apply) */\n getSnapshot(): FilterDropdownOutput {\n return { ...this._draft() };\n }\n\n /** Reset draft to initial values from the current config */\n reset(): void {\n this.initialize(this._groups());\n }\n\n /** Clear all draft values to empty/default states */\n clear(): void {\n const cleared: FilterDropdownOutput = {};\n for (const group of this._groups()) {\n cleared[group.key] = this.buildEmptyValue(group);\n }\n this._draft.set(cleared);\n }\n\n private buildInitialValue(group: FilterDropdownGroup): FilterDropdownValue {\n switch (group.filterType) {\n case 'checkbox':\n return {\n filterType: 'checkbox',\n selected: group.defaultSelected ?? group.items.filter(i => i.checked).map(i => i.name),\n } satisfies FilterDropdownValueCheckbox;\n case 'radio':\n return {\n filterType: 'radio',\n selected: group.defaultSelected ?? null,\n } satisfies FilterDropdownValueRadio;\n case 'toggle':\n return {\n filterType: 'toggle',\n checked: group.defaultSelected ?? group.item.checked ?? false,\n } satisfies FilterDropdownValueToggle;\n case 'select':\n return {\n filterType: 'select',\n selected: group.defaultSelected ?? [],\n } satisfies FilterDropdownValueSelect;\n case 'date-range':\n return {\n filterType: 'date-range',\n selectedPeriod: group.selectedPeriod,\n } satisfies FilterDropdownValueDateRange;\n }\n }\n\n private buildEmptyValue(group: FilterDropdownGroup): FilterDropdownValue {\n switch (group.filterType) {\n case 'checkbox':\n return { filterType: 'checkbox', selected: [] };\n case 'radio':\n return { filterType: 'radio', selected: null };\n case 'toggle':\n return { filterType: 'toggle', checked: false };\n case 'select':\n return { filterType: 'select', selected: [] };\n case 'date-range':\n return { filterType: 'date-range', selectedPeriod: undefined };\n }\n }\n}\n","import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';\nimport { provideUiComponentsSymbols } from '@agorapulse/ui-components/providers';\nimport { RadioComponent } from '@agorapulse/ui-components/radio';\nimport { ToggleComponent } from '@agorapulse/ui-components/toggle';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { SymbolComponent } from '@agorapulse/ui-symbol';\nimport { apChevronDown } from '@agorapulse/ui-symbol/icons';\nimport { Component, computed, inject, input } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { FilterDropdownGroup } from '../filter.model';\nimport { FilterState } from '../filter.state';\n\n@Component({\n selector: 'ap-filter-leaf',\n templateUrl: './filter-leaf.component.html',\n styleUrl: './filter-leaf.component.scss',\n imports: [TooltipDirective, SymbolComponent, CheckboxComponent, RadioComponent, ToggleComponent, FormsModule, ReactiveFormsModule],\n providers: [provideUiComponentsSymbols(apChevronDown)],\n})\nexport class FilterLeafComponent {\n public readonly state = inject(FilterState);\n\n /** item propagated from FilterDropdownComponent */\n item = input.required<FilterDropdownGroup>();\n /** whether the leaf is closable */\n closable = input(true);\n\n checkboxItem = computed(() => {\n const item = this.item();\n return item.filterType === 'checkbox' ? item : undefined;\n });\n\n radioItem = computed(() => {\n const item = this.item();\n return item.filterType === 'radio' ? item : undefined;\n });\n\n toggleItem = computed(() => {\n const item = this.item();\n return item.filterType === 'toggle' ? item : undefined;\n });\n\n selectItem = computed(() => {\n const item = this.item();\n return item.filterType === 'select' ? item : undefined;\n });\n\n dateRangeItem = computed(() => {\n const item = this.item();\n return item.filterType === 'date-range' ? item : undefined;\n });\n\n radioValue = computed<unknown | null>(() => {\n const value = this.state.getValue(this.item().key);\n return value?.filterType === 'radio' ? value.selected : null;\n });\n\n checkboxValue = computed<Record<string, boolean>>(() => {\n const checkboxItem = this.checkboxItem();\n const checkboxValueByKey: Record<string, boolean> = {};\n checkboxItem?.items.forEach(item => (checkboxValueByKey[item.name] = !!item.checked));\n\n const value = this.state.getValue(this.item().key);\n if (value && value.filterType === 'checkbox') {\n value.selected.forEach(item => (checkboxValueByKey[item] = true));\n }\n return checkboxValueByKey;\n });\n\n toggleValue = computed(() => {\n const value = this.state.getValue(this.item().key);\n return value?.filterType === 'toggle' ? value.checked : false;\n });\n\n onHeaderClick(): void {\n if (this.closable()) {\n this.state.collapseHeader(this.item().key);\n }\n }\n\n onCheckboxChange(name: string, checked: boolean): void {\n this.state.toggleCheckbox(this.item().key, name, checked);\n }\n\n onRadioClick(value: unknown): void {\n this.state.setRadioValue(this.item().key, value);\n }\n\n onToggleChange(checked: boolean): void {\n this.state.setToggleValue(this.item().key, checked);\n }\n}\n","<div 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 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) {\n <span class=\"ap-filter-leaf__label\">{{ item().label }}</span>\n }\n @switch(item().filterType) {\n @case ('checkbox') {\n @let vCheckboxItem = checkboxItem();\n @if (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 [indeterminate]=\"!!option.indeterminate\"\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 @let vRadioItem = radioItem();\n @if (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 @let vToggleItem = toggleItem();\n @if (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\n }\n @case ('date-range') {\n\n }\n }\n </div>\n }\n\n</div>\n","import { ButtonComponent } from '@agorapulse/ui-components/button';\nimport { createDropdownOverlay, DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport { FilterLeafComponent } from '../filter-leaf/filter-leaf.component';\nimport { provideUiComponentsSymbols } from '@agorapulse/ui-components/providers';\nimport { apReset } from '@agorapulse/ui-symbol';\nimport { Component, effect, inject, input, output, TemplateRef, untracked, viewChild } from '@angular/core';\nimport { FilterDropdownGroup, FilterDropdownOutput } from '../filter.model';\nimport { FilterState } from '../filter.state';\n\n@Component({\n selector: 'ap-filter-dropdown',\n templateUrl: './filter-dropdown.component.html',\n styleUrl: './filter-dropdown.component.scss',\n imports: [ButtonComponent, FilterLeafComponent],\n providers: [FilterState, provideUiComponentsSymbols(apReset)],\n})\nexport class FilterDropdownComponent implements DropdownOverlay {\n private readonly overlay = createDropdownOverlay();\n readonly state = inject(FilterState);\n\n initGroups = effect(() => {\n const groups = this.items();\n untracked(() => {\n if (groups) {\n this.state.initialize(groups);\n }\n });\n });\n\n filterGroupTemplate = viewChild<TemplateRef<unknown>>('filterGroupTemplate');\n\n /** The filter groups to display in the dropdown */\n items = input<FilterDropdownGroup[]>();\n /** Whether the filter needs the apply button to be clicked for applyFilters to emit */\n needApplyButton = input(true);\n /** 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. */\n closable = input(true);\n /** whether the mode is in preset mode */\n savePresetsMode = input(false);\n\n /** Whether to show a backdrop that closes the dropdown when clicked */\n showBackdrop = input(true);\n /** Whether the dropdown is disabled and cannot be opened */\n disabled = input(false);\n /** Default position for the dropdown relative to the trigger element */\n defaultPosition = input<'right' | 'left'>('right');\n\n savePresetsText = input('Save new presets');\n resetFilterText = input('Reset filters');\n\n applyFiltersText = input('Apply filters');\n clearFilterText = input('Clear filters');\n\n /** Emits when the dropdown menu is opened */\n opened = output<void>();\n /** Emits when the dropdown menu is closed */\n closed = output<void>();\n\n /** Emits when save presets is clicked */\n savePresets = output<FilterDropdownOutput>();\n /** Emits when filters are applied */\n applyFilters = output<FilterDropdownOutput>();\n /** Emits when user clicks on clear filter */\n clearFilters = output<void>();\n /** Emits when user clicks on reset filter */\n resetFilters = output<void>();\n\n readonly isOpen = this.overlay.isOpen;\n\n /** Opens the dropdown menu at the specified trigger element */\n open(triggerElement?: HTMLElement): void {\n const template = this.filterGroupTemplate();\n if (this.disabled() || this.isOpen() || !template) return;\n\n this.overlay.open(template, triggerElement, {\n showBackdrop: this.showBackdrop(),\n defaultPosition: this.defaultPosition(),\n onClose: () => this.close(),\n });\n this.opened.emit();\n }\n\n /** Closes the dropdown menu and cleans up overlay resources */\n close(): void {\n if (!this.isOpen()) return;\n this.overlay.close();\n this.closed.emit();\n }\n\n /** Toggles the dropdown menu open or closed state */\n toggle(triggerElement?: HTMLElement): void {\n if (this.isOpen()) {\n this.close();\n } else {\n this.open(triggerElement);\n }\n }\n\n onApplyFilters(): void {\n this.applyFilters.emit(this.state.getSnapshot());\n }\n\n onClearFilters(): void {\n this.state.clear();\n this.clearFilters.emit();\n }\n\n onResetFilters(): void {\n this.state.reset();\n this.resetFilters.emit();\n }\n\n onSavePresets(): void {\n this.savePresets.emit(this.state.getSnapshot());\n }\n}\n","<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 state.groups(); track item.key) {\n <ap-filter-leaf [item]=\"item\" [closable]=\"closable()\" />\n }\n </div>\n\n <div class=\"ap-filter-dropdown__footer\">\n @if (savePresetsMode()) {\n <div class=\"ap-filter-dropdown__footer--presets\">\n <ap-button\n name=\"filter-dropdown-save-preset\"\n [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n (click)=\"onSavePresets()\">\n {{ savePresetsText() }}\n </ap-button>\n\n <ap-button\n name=\"filter-dropdown-reset-filters\"\n [symbolId]=\"'reset'\"\n [symbolPosition]=\"'left'\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\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 (click)=\"onClearFilters()\">\n {{ clearFilterText() }}\n </ap-button>\n\n <ap-button\n name=\"filter-dropdown-apply-filters\"\n [config]=\"{ color: 'blue', style: 'primary' }\"\n (click)=\"onApplyFilters()\">\n {{ applyFiltersText() }}\n </ap-button>\n </div>\n }\n </div>\n </div>\n\n</ng-template>\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-nav-selector.mjs CHANGED
@@ -3153,7 +3153,7 @@ class NavSelectorComponent {
3153
3153
  }
3154
3154
  }
3155
3155
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NavSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3156
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: NavSelectorComponent, isStandalone: true, selector: "ap-nav-selector", inputs: { navSelectorEntries: { classPropertyName: "navSelectorEntries", publicName: "navSelectorEntries", isSignal: true, isRequired: true, transformFunction: null }, translatedTexts: { classPropertyName: "translatedTexts", publicName: "translatedTexts", isSignal: true, isRequired: true, transformFunction: null }, multipleModeEnabled: { classPropertyName: "multipleModeEnabled", publicName: "multipleModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, detailsDisplayedLimit: { classPropertyName: "detailsDisplayedLimit", publicName: "detailsDisplayedLimit", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, forceExpanded: { classPropertyName: "forceExpanded", publicName: "forceExpanded", isSignal: true, isRequired: false, transformFunction: null }, expandedStateLocalStorageKey: { classPropertyName: "expandedStateLocalStorageKey", publicName: "expandedStateLocalStorageKey", isSignal: true, isRequired: false, transformFunction: null }, selectedEntryUids: { classPropertyName: "selectedEntryUids", publicName: "selectedEntryUids", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedEntryUids: "selectedEntryUidsChange", actionClicked: "actionClicked", emptyStateActionClicked: "emptyStateActionClicked", onExpansionStateChange: "onExpansionStateChange", visibleAccountsChange: "visibleAccountsChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown.arrowDown": "onArrowDown($event)", "keydown.arrowUp": "onArrowUp($event)", "window:resize": "onWindowResize()" }, properties: { "class.minified": "!navSelectorState.expanded()", "class.embedded": "embedded()", "@expand": "expansionState()" } }, providers: [NavSelectorState, withSymbols(apArrowExpand, apArrowReduce, apSearch)], queries: [{ propertyName: "headerProjection", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "contentHeaderProjection", first: true, predicate: ["contentHeader"], descendants: true, isSignal: true }, { propertyName: "footerProjection", first: true, predicate: ["footer"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav [class.embedded]=\"embedded()\">\n @let headerProjectionNotNull = headerProjection();\n @let contentHeaderProjectionNotNull = contentHeaderProjection();\n @let footerProjectionNotNull = footerProjection();\n\n <div class=\"nav-selector__header\">\n @if (!embedded()) {\n @if (navSelectorState.expanded()) {\n <span class=\"h3\">{{ translatedTexts().title }}</span>\n }\n\n <button\n type=\"button\"\n class=\"expand-button\"\n [class.expanded]=\"navSelectorState.expanded()\"\n (click)=\"clickExpandButton()\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"navSelectorState.expanded() ? 'arrow-reduce' : 'arrow-expand'\" />\n </button>\n }\n\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n\n @if (navSelectorState.expanded()) {\n <ap-input-search\n [id]=\"componentUid + '_search'\"\n [placeholder]=\"translatedTexts().searchPlaceholder\"\n [ngModel]=\"navSelectorState.search()\"\n (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n } @else {\n <ap-icon-button\n type=\"stroked\"\n role=\"search\"\n (onClick)=\"onMinifiedSearchClicked()\">\n <ap-symbol symbolId=\"search\" />\n </ap-icon-button>\n }\n\n @if (contentHeaderProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"contentHeaderProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n </div>\n\n <div\n class=\"nav-selector__content\"\n role=\"tree\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div\n class=\"entry\"\n [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf\n [leaf]=\"entry\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group\n [group]=\"entry\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category\n [category]=\"$any(entry)\"\n (actionClicked)=\"actionClicked.emit($event)\"\n (emptyStateActionClicked)=\"emptyStateActionClicked.emit($event)\"/>\n }\n </div>\n }\n }\n @if (navSelectorState.expanded() && navSelectorState.noResults()) {\n <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n </div>\n }\n</nav>\n", styles: [":host,nav{width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded),nav:not(.embedded){width:250px}:host:not(.embedded) .nav-selector__content,nav:not(.embedded) .nav-selector__content{width:250px}}:host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;flex-grow:1;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white);transition:width .25s cubic-bezier(.4,0,.3,1)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;white-space:nowrap;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header ap-input-search{width:100%}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button{display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus-visible.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:focus-visible{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;width:224px;overflow-y:scroll;overflow-x:hidden;transition:width .25s cubic-bezier(.4,0,.3,1)}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;padding:var(--ref-spacing-xs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified{width:64px}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content{width:64px}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorCategoryComponent, selector: "ap-nav-selector-category", inputs: ["category"], outputs: ["emptyStateActionClicked", "actionClicked"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
3156
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: NavSelectorComponent, isStandalone: true, selector: "ap-nav-selector", inputs: { navSelectorEntries: { classPropertyName: "navSelectorEntries", publicName: "navSelectorEntries", isSignal: true, isRequired: true, transformFunction: null }, translatedTexts: { classPropertyName: "translatedTexts", publicName: "translatedTexts", isSignal: true, isRequired: true, transformFunction: null }, multipleModeEnabled: { classPropertyName: "multipleModeEnabled", publicName: "multipleModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, detailsDisplayedLimit: { classPropertyName: "detailsDisplayedLimit", publicName: "detailsDisplayedLimit", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, forceExpanded: { classPropertyName: "forceExpanded", publicName: "forceExpanded", isSignal: true, isRequired: false, transformFunction: null }, expandedStateLocalStorageKey: { classPropertyName: "expandedStateLocalStorageKey", publicName: "expandedStateLocalStorageKey", isSignal: true, isRequired: false, transformFunction: null }, selectedEntryUids: { classPropertyName: "selectedEntryUids", publicName: "selectedEntryUids", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedEntryUids: "selectedEntryUidsChange", actionClicked: "actionClicked", emptyStateActionClicked: "emptyStateActionClicked", onExpansionStateChange: "onExpansionStateChange", visibleAccountsChange: "visibleAccountsChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown.arrowDown": "onArrowDown($event)", "keydown.arrowUp": "onArrowUp($event)", "window:resize": "onWindowResize()" }, properties: { "class.minified": "!navSelectorState.expanded()", "class.embedded": "embedded()", "@expand": "expansionState()" } }, providers: [NavSelectorState, withSymbols(apArrowExpand, apArrowReduce, apSearch)], queries: [{ propertyName: "headerProjection", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "contentHeaderProjection", first: true, predicate: ["contentHeader"], descendants: true, isSignal: true }, { propertyName: "footerProjection", first: true, predicate: ["footer"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav [class.embedded]=\"embedded()\">\n @let headerProjectionNotNull = headerProjection();\n @let contentHeaderProjectionNotNull = contentHeaderProjection();\n @let footerProjectionNotNull = footerProjection();\n\n <div class=\"nav-selector__header\">\n @if (!embedded()) {\n @if (navSelectorState.expanded()) {\n <span class=\"h3\">{{ translatedTexts().title }}</span>\n }\n\n <button\n type=\"button\"\n class=\"expand-button\"\n [class.expanded]=\"navSelectorState.expanded()\"\n (click)=\"clickExpandButton()\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"navSelectorState.expanded() ? 'arrow-reduce' : 'arrow-expand'\" />\n </button>\n }\n\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n\n @if (navSelectorState.expanded()) {\n <ap-input-search\n [id]=\"componentUid + '_search'\"\n [placeholder]=\"translatedTexts().searchPlaceholder\"\n [ngModel]=\"navSelectorState.search()\"\n (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n } @else {\n <ap-icon-button\n type=\"stroked\"\n role=\"search\"\n (onClick)=\"onMinifiedSearchClicked()\">\n <ap-symbol symbolId=\"search\" />\n </ap-icon-button>\n }\n\n @if (contentHeaderProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"contentHeaderProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n </div>\n\n <div\n class=\"nav-selector__content\"\n role=\"tree\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div\n class=\"entry\"\n [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf\n [leaf]=\"entry\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group\n [group]=\"entry\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category\n [category]=\"$any(entry)\"\n (actionClicked)=\"actionClicked.emit($event)\"\n (emptyStateActionClicked)=\"emptyStateActionClicked.emit($event)\"/>\n }\n </div>\n }\n }\n @if (navSelectorState.expanded() && navSelectorState.noResults()) {\n <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n </div>\n }\n</nav>\n", styles: [":host,nav{width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded),nav:not(.embedded){width:250px}:host:not(.embedded) .nav-selector__content,nav:not(.embedded) .nav-selector__content{width:250px}}:host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;flex-grow:1;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white);transition:width .25s cubic-bezier(.4,0,.3,1)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;white-space:nowrap;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header ap-input-search{width:100%}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button{display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus-visible.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:focus-visible{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;width:224px;overflow-y:auto;overflow-x:hidden;transition:width .25s cubic-bezier(.4,0,.3,1)}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified{width:64px}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content{width:64px}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorCategoryComponent, selector: "ap-nav-selector-category", inputs: ["category"], outputs: ["emptyStateActionClicked", "actionClicked"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
3157
3157
  trigger('expand', [
3158
3158
  transition('expanded => minified', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: EXPANDED_STATE_WIDTH }), style({ width: '100px' }), style({ width: MINIFIED_STATE_WIDTH })]))),
3159
3159
  transition('minified => expanded', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: MINIFIED_STATE_WIDTH }), style({ width: '50%' }), style({ width: '100%' })]))),
@@ -3184,7 +3184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
3184
3184
  transition('expanded => minified', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: EXPANDED_STATE_WIDTH }), style({ width: '100px' }), style({ width: MINIFIED_STATE_WIDTH })]))),
3185
3185
  transition('minified => expanded', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: MINIFIED_STATE_WIDTH }), style({ width: '50%' }), style({ width: '100%' })]))),
3186
3186
  ]),
3187
- ], template: "<nav [class.embedded]=\"embedded()\">\n @let headerProjectionNotNull = headerProjection();\n @let contentHeaderProjectionNotNull = contentHeaderProjection();\n @let footerProjectionNotNull = footerProjection();\n\n <div class=\"nav-selector__header\">\n @if (!embedded()) {\n @if (navSelectorState.expanded()) {\n <span class=\"h3\">{{ translatedTexts().title }}</span>\n }\n\n <button\n type=\"button\"\n class=\"expand-button\"\n [class.expanded]=\"navSelectorState.expanded()\"\n (click)=\"clickExpandButton()\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"navSelectorState.expanded() ? 'arrow-reduce' : 'arrow-expand'\" />\n </button>\n }\n\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n\n @if (navSelectorState.expanded()) {\n <ap-input-search\n [id]=\"componentUid + '_search'\"\n [placeholder]=\"translatedTexts().searchPlaceholder\"\n [ngModel]=\"navSelectorState.search()\"\n (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n } @else {\n <ap-icon-button\n type=\"stroked\"\n role=\"search\"\n (onClick)=\"onMinifiedSearchClicked()\">\n <ap-symbol symbolId=\"search\" />\n </ap-icon-button>\n }\n\n @if (contentHeaderProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"contentHeaderProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n </div>\n\n <div\n class=\"nav-selector__content\"\n role=\"tree\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div\n class=\"entry\"\n [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf\n [leaf]=\"entry\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group\n [group]=\"entry\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category\n [category]=\"$any(entry)\"\n (actionClicked)=\"actionClicked.emit($event)\"\n (emptyStateActionClicked)=\"emptyStateActionClicked.emit($event)\"/>\n }\n </div>\n }\n }\n @if (navSelectorState.expanded() && navSelectorState.noResults()) {\n <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n </div>\n }\n</nav>\n", styles: [":host,nav{width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded),nav:not(.embedded){width:250px}:host:not(.embedded) .nav-selector__content,nav:not(.embedded) .nav-selector__content{width:250px}}:host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;flex-grow:1;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white);transition:width .25s cubic-bezier(.4,0,.3,1)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;white-space:nowrap;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header ap-input-search{width:100%}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button{display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus-visible.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:focus-visible{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;width:224px;overflow-y:scroll;overflow-x:hidden;transition:width .25s cubic-bezier(.4,0,.3,1)}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;padding:var(--ref-spacing-xs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified{width:64px}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content{width:64px}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"] }]
3187
+ ], template: "<nav [class.embedded]=\"embedded()\">\n @let headerProjectionNotNull = headerProjection();\n @let contentHeaderProjectionNotNull = contentHeaderProjection();\n @let footerProjectionNotNull = footerProjection();\n\n <div class=\"nav-selector__header\">\n @if (!embedded()) {\n @if (navSelectorState.expanded()) {\n <span class=\"h3\">{{ translatedTexts().title }}</span>\n }\n\n <button\n type=\"button\"\n class=\"expand-button\"\n [class.expanded]=\"navSelectorState.expanded()\"\n (click)=\"clickExpandButton()\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"navSelectorState.expanded() ? 'arrow-reduce' : 'arrow-expand'\" />\n </button>\n }\n\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n\n @if (navSelectorState.expanded()) {\n <ap-input-search\n [id]=\"componentUid + '_search'\"\n [placeholder]=\"translatedTexts().searchPlaceholder\"\n [ngModel]=\"navSelectorState.search()\"\n (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n } @else {\n <ap-icon-button\n type=\"stroked\"\n role=\"search\"\n (onClick)=\"onMinifiedSearchClicked()\">\n <ap-symbol symbolId=\"search\" />\n </ap-icon-button>\n }\n\n @if (contentHeaderProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"contentHeaderProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n </div>\n\n <div\n class=\"nav-selector__content\"\n role=\"tree\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div\n class=\"entry\"\n [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf\n [leaf]=\"entry\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group\n [group]=\"entry\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category\n [category]=\"$any(entry)\"\n (actionClicked)=\"actionClicked.emit($event)\"\n (emptyStateActionClicked)=\"emptyStateActionClicked.emit($event)\"/>\n }\n </div>\n }\n }\n @if (navSelectorState.expanded() && navSelectorState.noResults()) {\n <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n </div>\n }\n</nav>\n", styles: [":host,nav{width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded),nav:not(.embedded){width:250px}:host:not(.embedded) .nav-selector__content,nav:not(.embedded) .nav-selector__content{width:250px}}:host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;flex-grow:1;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white);transition:width .25s cubic-bezier(.4,0,.3,1)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;white-space:nowrap;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header ap-input-search{width:100%}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button{display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus-visible.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:focus-visible{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;width:224px;overflow-y:auto;overflow-x:hidden;transition:width .25s cubic-bezier(.4,0,.3,1)}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified{width:64px}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content{width:64px}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"] }]
3188
3188
  }], ctorParameters: () => [], propDecorators: { navSelectorEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "navSelectorEntries", required: true }] }], translatedTexts: [{ type: i0.Input, args: [{ isSignal: true, alias: "translatedTexts", required: true }] }], multipleModeEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "multipleModeEnabled", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], detailsDisplayedLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsDisplayedLimit", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], forceExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceExpanded", required: false }] }], expandedStateLocalStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedStateLocalStorageKey", required: false }] }], selectedEntryUids: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedEntryUids", required: true }] }, { type: i0.Output, args: ["selectedEntryUidsChange"] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }], emptyStateActionClicked: [{ type: i0.Output, args: ["emptyStateActionClicked"] }], headerProjection: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], contentHeaderProjection: [{ type: i0.ContentChild, args: ['contentHeader', { isSignal: true }] }], footerProjection: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], onExpansionStateChange: [{ type: i0.Output, args: ["onExpansionStateChange"] }], visibleAccountsChange: [{ type: i0.Output, args: ["visibleAccountsChange"] }] } });
3189
3189
 
3190
3190
  /**