@agorapulse/ui-components 20.4.13 → 20.4.15
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.
- package/agorapulse-ui-components-20.4.15.tgz +0 -0
- package/datepicker/index.d.ts +82 -4
- package/fesm2022/agorapulse-ui-components-datepicker.mjs +185 -6
- package/fesm2022/agorapulse-ui-components-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +208 -20
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components.mjs +1 -1
- package/fesm2022/agorapulse-ui-components.mjs.map +1 -1
- package/filter-dropdown/index.d.ts +79 -7
- package/index.d.ts +1 -1
- package/package.json +1 -1
- package/agorapulse-ui-components-20.4.13.tgz +0 -0
|
@@ -1,24 +1,68 @@
|
|
|
1
1
|
import { ButtonComponent } from '@agorapulse/ui-components/button';
|
|
2
|
-
import { createDropdownOverlay } from '@agorapulse/ui-components/dropdown-base';
|
|
2
|
+
import { createDropdownOverlay, DropdownTriggerDirective } from '@agorapulse/ui-components/dropdown-base';
|
|
3
3
|
import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
|
|
4
|
+
import { DatepickerMode, InputDatepickerComponent } from '@agorapulse/ui-components/datepicker';
|
|
4
5
|
import { provideUiComponentsSymbols } from '@agorapulse/ui-components/providers';
|
|
5
6
|
import { RadioComponent } from '@agorapulse/ui-components/radio';
|
|
6
7
|
import { ToggleComponent } from '@agorapulse/ui-components/toggle';
|
|
7
8
|
import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
|
|
8
|
-
import { SymbolComponent, apReset } from '@agorapulse/ui-symbol';
|
|
9
|
+
import { SymbolComponent, apInfo, apReset, apChevronDown as apChevronDown$1, apPlus, apRefresh, withSymbols, apFilter, apFilterFill } from '@agorapulse/ui-symbol';
|
|
9
10
|
import { apChevronDown } from '@agorapulse/ui-symbol/icons';
|
|
10
11
|
import * as i0 from '@angular/core';
|
|
11
|
-
import { signal, Injectable, inject, input,
|
|
12
|
+
import { signal, computed, Injectable, inject, input, Component, effect, untracked, viewChild, output } from '@angular/core';
|
|
12
13
|
import * as i1 from '@angular/forms';
|
|
13
14
|
import { FormsModule } from '@angular/forms';
|
|
14
15
|
import { SelectMultipleDirective, SelectSingleDirective, SelectLabelSingleComponent, SelectLabelMultipleComponent, DropdownItemMultipleTwoLinesComponent, DropdownItemMultipleOneLineComponent, DropdownItemSingleOneLineComponent, DropdownItemSingleTwoLinesComponent } from '@agorapulse/ui-components/select';
|
|
15
16
|
import { NgSelectComponent, NgOptionTemplateDirective, NgLabelTemplateDirective, NgMultiLabelTemplateDirective } from '@ng-select/ng-select';
|
|
17
|
+
import { FormFieldComponent } from '@agorapulse/ui-components/form-field';
|
|
18
|
+
import { ActionDropdownComponent } from '@agorapulse/ui-components/action-dropdown';
|
|
19
|
+
import { CounterComponent } from '@agorapulse/ui-components/counter';
|
|
16
20
|
|
|
17
21
|
class FilterState {
|
|
18
22
|
_groups = signal([], ...(ngDevMode ? [{ debugName: "_groups" }] : []));
|
|
19
23
|
_draft = signal({}, ...(ngDevMode ? [{ debugName: "_draft" }] : []));
|
|
24
|
+
activeFilterCount = computed(() => {
|
|
25
|
+
let count = 0;
|
|
26
|
+
for (const key in this._draft()) {
|
|
27
|
+
const value = this._draft()[key];
|
|
28
|
+
if (!value)
|
|
29
|
+
continue;
|
|
30
|
+
switch (value.filterType) {
|
|
31
|
+
case 'checkbox':
|
|
32
|
+
if (value.selected.length > 0) {
|
|
33
|
+
count += 1;
|
|
34
|
+
}
|
|
35
|
+
break;
|
|
36
|
+
case 'radio':
|
|
37
|
+
if (value.selected)
|
|
38
|
+
count += 1;
|
|
39
|
+
break;
|
|
40
|
+
case 'toggle':
|
|
41
|
+
if (value.checked)
|
|
42
|
+
count += 1;
|
|
43
|
+
break;
|
|
44
|
+
case 'select':
|
|
45
|
+
if (value.selectionType === 'single' && value.selected) {
|
|
46
|
+
// TO FIX
|
|
47
|
+
count += 1;
|
|
48
|
+
}
|
|
49
|
+
else if (value.selectionType === 'multiple') {
|
|
50
|
+
count += value.selected.length > 0 ? 1 : 0;
|
|
51
|
+
}
|
|
52
|
+
break;
|
|
53
|
+
case 'date-range':
|
|
54
|
+
if (value.selectedPeriod)
|
|
55
|
+
count += 1;
|
|
56
|
+
break;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
return count;
|
|
60
|
+
}, ...(ngDevMode ? [{ debugName: "activeFilterCount" }] : []));
|
|
20
61
|
groups = this._groups.asReadonly();
|
|
21
62
|
draft = this._draft.asReadonly();
|
|
63
|
+
isFilterCountActive = computed(() => this.activeFilterCount() > 0, ...(ngDevMode ? [{ debugName: "isFilterCountActive" }] : []));
|
|
64
|
+
_hasChanges = signal(false, ...(ngDevMode ? [{ debugName: "_hasChanges" }] : []));
|
|
65
|
+
buttonsDisabled = computed(() => !this._hasChanges(), ...(ngDevMode ? [{ debugName: "buttonsDisabled" }] : []));
|
|
22
66
|
/** Initialize groups and seed draft from config defaults */
|
|
23
67
|
initialize(groups) {
|
|
24
68
|
this._groups.set(groups);
|
|
@@ -27,6 +71,7 @@ class FilterState {
|
|
|
27
71
|
initial[group.key] = this.buildInitialValue(group);
|
|
28
72
|
}
|
|
29
73
|
this._draft.set(initial);
|
|
74
|
+
this._hasChanges.set(false);
|
|
30
75
|
}
|
|
31
76
|
collapseHeader(key) {
|
|
32
77
|
const group = this._groups().find(g => g.key === key);
|
|
@@ -42,6 +87,7 @@ class FilterState {
|
|
|
42
87
|
/** Update a single filter's draft value */
|
|
43
88
|
updateValue(key, value) {
|
|
44
89
|
this._draft.update(draft => ({ ...draft, [key]: value }));
|
|
90
|
+
this._hasChanges.set(true);
|
|
45
91
|
}
|
|
46
92
|
/** Toggle a checkbox item in a checkbox filter */
|
|
47
93
|
toggleCheckbox(key, name, checked) {
|
|
@@ -66,6 +112,10 @@ class FilterState {
|
|
|
66
112
|
setMultipleSelectValue(key, selected) {
|
|
67
113
|
this.updateValue(key, { filterType: 'select', selectionType: 'multiple', selected });
|
|
68
114
|
}
|
|
115
|
+
/** Set the selected period for a date range filter */
|
|
116
|
+
setDateRangeValue(key, selectedPeriod) {
|
|
117
|
+
this.updateValue(key, { filterType: 'date-range', selectedPeriod });
|
|
118
|
+
}
|
|
69
119
|
/** Return the current draft snapshot (used on Apply) */
|
|
70
120
|
getSnapshot() {
|
|
71
121
|
return { ...this._draft() };
|
|
@@ -73,6 +123,7 @@ class FilterState {
|
|
|
73
123
|
/** Reset draft to initial values from the current config */
|
|
74
124
|
reset() {
|
|
75
125
|
this.initialize(this._groups());
|
|
126
|
+
this._hasChanges.set(false);
|
|
76
127
|
}
|
|
77
128
|
/** Clear all draft values to empty/default states */
|
|
78
129
|
clear() {
|
|
@@ -81,13 +132,14 @@ class FilterState {
|
|
|
81
132
|
cleared[group.key] = this.buildEmptyValue(group);
|
|
82
133
|
}
|
|
83
134
|
this._draft.set(cleared);
|
|
135
|
+
this._hasChanges.set(false);
|
|
84
136
|
}
|
|
85
137
|
buildInitialValue(group) {
|
|
86
138
|
switch (group.filterType) {
|
|
87
139
|
case 'checkbox':
|
|
88
140
|
return {
|
|
89
141
|
filterType: 'checkbox',
|
|
90
|
-
selected: group.defaultSelected ??
|
|
142
|
+
selected: group.defaultSelected ?? [],
|
|
91
143
|
};
|
|
92
144
|
case 'radio':
|
|
93
145
|
return {
|
|
@@ -97,7 +149,7 @@ class FilterState {
|
|
|
97
149
|
case 'toggle':
|
|
98
150
|
return {
|
|
99
151
|
filterType: 'toggle',
|
|
100
|
-
checked: group.defaultSelected ??
|
|
152
|
+
checked: group.defaultSelected ?? false,
|
|
101
153
|
};
|
|
102
154
|
case 'select':
|
|
103
155
|
if (group.selectionType === 'single') {
|
|
@@ -139,10 +191,13 @@ class FilterState {
|
|
|
139
191
|
}
|
|
140
192
|
}
|
|
141
193
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
142
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterState });
|
|
194
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterState, providedIn: 'root' });
|
|
143
195
|
}
|
|
144
196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterState, decorators: [{
|
|
145
|
-
type: Injectable
|
|
197
|
+
type: Injectable,
|
|
198
|
+
args: [{
|
|
199
|
+
providedIn: 'root',
|
|
200
|
+
}]
|
|
146
201
|
}] });
|
|
147
202
|
|
|
148
203
|
const MULTIPLE_DISPLAY_TYPES = new Set(['tag', 'label']);
|
|
@@ -162,7 +217,7 @@ class FilterLeafSelectComponent {
|
|
|
162
217
|
return value?.filterType === 'select' && value?.selectionType === 'multiple' ? value.selected : [];
|
|
163
218
|
}, ...(ngDevMode ? [{ debugName: "multipleSelectValue" }] : []));
|
|
164
219
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
165
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterLeafSelectComponent, isStandalone: true, selector: "ap-filter-leaf-select", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let selectItem = item();\n<div class=\"ap-filter-leaf__option\">\n @if (selectItem.selectionType === 'single') {\n
|
|
220
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterLeafSelectComponent, isStandalone: true, selector: "ap-filter-leaf-select", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let selectItem = item();\n<div class=\"ap-filter-leaf__option\">\n <ap-form-field>\n @if (selectItem.label) {\n <label for=\"select-{{ selectItem.key }}\">\n {{ selectItem.label }}\n </label>\n }\n @if (selectItem.selectionType === 'single') {\n <ng-select\n id=\"select-{{ selectItem.key }}\"\n apSelectSingle\n bindLabel=\"label\"\n bindValue=\"value\"\n [items]=\"selectItem.items\"\n [placeholder]=\"selectItem.placeholder ?? 'Select an option'\"\n [inlineLabel]=\"selectItem.inlineLabel\"\n [ngModel]=\"singleSelectValue()\"\n (ngModelChange)=\"filterState.setSingleSelectValue(selectItem.key, $event)\"\n >\n <ng-template\n let-item=\"item\"\n ng-label-tmp>\n <ap-select-label-single\n [displayType]=\"selectItem.displayType\"\n [avatarUrl]=\"item.avatarUrl\"\n [network]=\"item.network\"\n [label]=\"item.label\" />\n </ng-template>\n\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n @if (item.caption) {\n <ap-dropdown-item-single-two-lines\n [caption]=\"item$.caption\"\n [selected]=\"item$.selected\"\n [text]=\"item$.label\"\n [avatarUrl]=\"item$.avatarUrl\"\n [network]=\"item$.network\"\n [symbolId]=\"item$.symbolId\"\n />\n } @else {\n <ap-dropdown-item-single-one-line\n [selected]=\"item$.selected\"\n [text]=\"item.label\"\n [avatarUrl]=\"item.avatarUrl\"\n [network]=\"item.network\"\n [symbolId]=\"item.symbolId\"\n />\n }\n\n </ng-template>\n\n </ng-select>\n } @else {\n <ng-select\n id=\"select-{{ selectItem.key }}\"\n apSelectMultiple\n bindLabel=\"label\"\n bindValue=\"value\"\n [items]=\"selectItem.items\"\n [placeholder]=\"selectItem.placeholder ?? 'Select an option'\"\n [inlineLabel]=\"selectItem.inlineLabel\"\n [ngModel]=\"multipleSelectValue()\"\n (ngModelChange)=\"filterState.setMultipleSelectValue(selectItem.key, $event)\">\n <ng-template\n let-items=\"items\"\n let-clear=\"clear\"\n ng-multi-label-tmp>\n <ap-select-label-multiple\n bindValue=\"value\"\n bindLabel=\"label\"\n [displayType]=\"multipleDisplayType()\"\n [selectedItems]=\"items\"\n (removeItem)=\"clear($event)\"\n />\n </ng-template>\n\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n @if (item.caption) {\n <ap-dropdown-item-multiple-two-lines\n [selected]=\"item$.selected\"\n [onlyText]=\"selectItem.onlyText ?? 'Only'\"\n [caption]=\"item.caption\"\n [text]=\"item.label\"\n [htmlId]=\"item$.htmlId\"\n [avatarUrl]=\"item.avatarUrl\"\n [network]=\"item.network\"\n [symbolId]=\"item.symbolId\"\n />\n } @else {\n <ap-dropdown-item-multiple-one-line\n [onlyText]=\"selectItem.onlyText ?? 'Only'\"\n [selected]=\"item$.selected\"\n [htmlId]=\"item$.htmlId\"\n [text]=\"item.label\"\n [avatarUrl]=\"item.avatarUrl\"\n [network]=\"item.network\"\n [symbolId]=\"item.symbolId\"\n />\n }\n </ng-template>\n </ng-select>\n }\n </ap-form-field>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: SelectMultipleDirective, selector: "ng-select[apSelectMultiple]", inputs: ["maxItemsTooltip"] }, { kind: "directive", type: SelectSingleDirective, selector: "ng-select[apSelectSingle]" }, { kind: "component", type: SelectLabelSingleComponent, selector: "ap-select-label-single", inputs: ["displayType", "label", "avatarUrl", "network", "showAvatarInitials", "roundedAvatar"] }, { kind: "component", type: SelectLabelMultipleComponent, selector: "ap-select-label-multiple", inputs: ["displayType", "tagColor", "selectedItems", "bindLabel", "bindValue", "bindAvatarUrl", "bindSymbolId", "roundedAvatar", "bindNetwork"], outputs: ["removeItem"] }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: DropdownItemMultipleTwoLinesComponent, selector: "ap-dropdown-item-multiple-two-lines", inputs: ["text", "caption", "selected", "htmlId", "disabled", "avatarUrl", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "onlyEnabled", "onlyText", "isFeatureLocked", "roundedAvatar", "network", "symbolColor", "symbolTooltipText"], outputs: ["selectOnly", "lockedFeatureClicked"] }, { kind: "component", type: DropdownItemMultipleOneLineComponent, selector: "ap-dropdown-item-multiple-one-line", inputs: ["text", "selected", "htmlId", "disabled", "avatarUrl", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "onlyEnabled", "onlyText", "isFeatureLocked", "roundedAvatar", "network", "symbolColor", "symbolTooltipText"], outputs: ["selectOnly", "selectionChange", "lockedFeatureClicked"] }, { kind: "component", type: DropdownItemSingleOneLineComponent, selector: "ap-dropdown-item-single-one-line", inputs: ["text", "selected", "disabled", "avatarUrl", "showAvatarInitials", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "network", "roundedAvatar", "isFeatureLocked"], outputs: ["lockedFeatureClicked"] }, { kind: "component", type: DropdownItemSingleTwoLinesComponent, selector: "ap-dropdown-item-single-two-lines", inputs: ["text", "caption", "selected", "disabled", "avatarUrl", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "network", "roundedAvatar", "isFeatureLocked"], outputs: ["lockedFeatureClicked"] }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "component", type: FormFieldComponent, selector: "ap-form-field" }] });
|
|
166
221
|
}
|
|
167
222
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafSelectComponent, decorators: [{
|
|
168
223
|
type: Component,
|
|
@@ -180,15 +235,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
180
235
|
DropdownItemSingleTwoLinesComponent,
|
|
181
236
|
NgLabelTemplateDirective,
|
|
182
237
|
NgMultiLabelTemplateDirective,
|
|
183
|
-
|
|
238
|
+
FormFieldComponent,
|
|
239
|
+
], template: "@let selectItem = item();\n<div class=\"ap-filter-leaf__option\">\n <ap-form-field>\n @if (selectItem.label) {\n <label for=\"select-{{ selectItem.key }}\">\n {{ selectItem.label }}\n </label>\n }\n @if (selectItem.selectionType === 'single') {\n <ng-select\n id=\"select-{{ selectItem.key }}\"\n apSelectSingle\n bindLabel=\"label\"\n bindValue=\"value\"\n [items]=\"selectItem.items\"\n [placeholder]=\"selectItem.placeholder ?? 'Select an option'\"\n [inlineLabel]=\"selectItem.inlineLabel\"\n [ngModel]=\"singleSelectValue()\"\n (ngModelChange)=\"filterState.setSingleSelectValue(selectItem.key, $event)\"\n >\n <ng-template\n let-item=\"item\"\n ng-label-tmp>\n <ap-select-label-single\n [displayType]=\"selectItem.displayType\"\n [avatarUrl]=\"item.avatarUrl\"\n [network]=\"item.network\"\n [label]=\"item.label\" />\n </ng-template>\n\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n @if (item.caption) {\n <ap-dropdown-item-single-two-lines\n [caption]=\"item$.caption\"\n [selected]=\"item$.selected\"\n [text]=\"item$.label\"\n [avatarUrl]=\"item$.avatarUrl\"\n [network]=\"item$.network\"\n [symbolId]=\"item$.symbolId\"\n />\n } @else {\n <ap-dropdown-item-single-one-line\n [selected]=\"item$.selected\"\n [text]=\"item.label\"\n [avatarUrl]=\"item.avatarUrl\"\n [network]=\"item.network\"\n [symbolId]=\"item.symbolId\"\n />\n }\n\n </ng-template>\n\n </ng-select>\n } @else {\n <ng-select\n id=\"select-{{ selectItem.key }}\"\n apSelectMultiple\n bindLabel=\"label\"\n bindValue=\"value\"\n [items]=\"selectItem.items\"\n [placeholder]=\"selectItem.placeholder ?? 'Select an option'\"\n [inlineLabel]=\"selectItem.inlineLabel\"\n [ngModel]=\"multipleSelectValue()\"\n (ngModelChange)=\"filterState.setMultipleSelectValue(selectItem.key, $event)\">\n <ng-template\n let-items=\"items\"\n let-clear=\"clear\"\n ng-multi-label-tmp>\n <ap-select-label-multiple\n bindValue=\"value\"\n bindLabel=\"label\"\n [displayType]=\"multipleDisplayType()\"\n [selectedItems]=\"items\"\n (removeItem)=\"clear($event)\"\n />\n </ng-template>\n\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n @if (item.caption) {\n <ap-dropdown-item-multiple-two-lines\n [selected]=\"item$.selected\"\n [onlyText]=\"selectItem.onlyText ?? 'Only'\"\n [caption]=\"item.caption\"\n [text]=\"item.label\"\n [htmlId]=\"item$.htmlId\"\n [avatarUrl]=\"item.avatarUrl\"\n [network]=\"item.network\"\n [symbolId]=\"item.symbolId\"\n />\n } @else {\n <ap-dropdown-item-multiple-one-line\n [onlyText]=\"selectItem.onlyText ?? 'Only'\"\n [selected]=\"item$.selected\"\n [htmlId]=\"item$.htmlId\"\n [text]=\"item.label\"\n [avatarUrl]=\"item.avatarUrl\"\n [network]=\"item.network\"\n [symbolId]=\"item.symbolId\"\n />\n }\n </ng-template>\n </ng-select>\n }\n </ap-form-field>\n</div>\n" }]
|
|
184
240
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
|
|
185
241
|
|
|
186
242
|
class FilterLeafComponent {
|
|
243
|
+
DatepickerMode = DatepickerMode;
|
|
187
244
|
filterState = inject(FilterState);
|
|
188
245
|
/** item propagated from FilterDropdownComponent */
|
|
189
246
|
item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
|
|
190
247
|
/** whether the leaf is closable */
|
|
191
248
|
closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
|
|
249
|
+
isLastLeaf = input(false, ...(ngDevMode ? [{ debugName: "isLastLeaf" }] : []));
|
|
250
|
+
displayLabelInLeaf = computed(() => {
|
|
251
|
+
const item = this.item();
|
|
252
|
+
return item.filterType === 'checkbox' || item.filterType === 'radio' || item.filterType === 'toggle';
|
|
253
|
+
}, ...(ngDevMode ? [{ debugName: "displayLabelInLeaf" }] : []));
|
|
192
254
|
checkboxItem = computed(() => {
|
|
193
255
|
const item = this.item();
|
|
194
256
|
return item.filterType === 'checkbox' ? item : undefined;
|
|
@@ -216,7 +278,7 @@ class FilterLeafComponent {
|
|
|
216
278
|
checkboxValue = computed(() => {
|
|
217
279
|
const checkboxItem = this.checkboxItem();
|
|
218
280
|
const checkboxValueByKey = {};
|
|
219
|
-
checkboxItem?.items.forEach(item => (checkboxValueByKey[item.name] =
|
|
281
|
+
checkboxItem?.items.forEach(item => (checkboxValueByKey[item.name] = false));
|
|
220
282
|
const value = this.filterState.getValue(this.item().key);
|
|
221
283
|
if (value && value.filterType === 'checkbox') {
|
|
222
284
|
value.selected.forEach(item => (checkboxValueByKey[item] = true));
|
|
@@ -227,6 +289,10 @@ class FilterLeafComponent {
|
|
|
227
289
|
const value = this.filterState.getValue(this.item().key);
|
|
228
290
|
return value?.filterType === 'toggle' ? value.checked : false;
|
|
229
291
|
}, ...(ngDevMode ? [{ debugName: "toggleValue" }] : []));
|
|
292
|
+
dateRangeValue = computed(() => {
|
|
293
|
+
const value = this.filterState.getValue(this.item().key);
|
|
294
|
+
return value?.filterType === 'date-range' ? value.selectedPeriod : { startDate: undefined, endDate: undefined };
|
|
295
|
+
}, ...(ngDevMode ? [{ debugName: "dateRangeValue" }] : []));
|
|
230
296
|
onHeaderClick() {
|
|
231
297
|
if (this.closable()) {
|
|
232
298
|
this.filterState.collapseHeader(this.item().key);
|
|
@@ -241,8 +307,11 @@ class FilterLeafComponent {
|
|
|
241
307
|
onToggleChange(checked) {
|
|
242
308
|
this.filterState.setToggleValue(this.item().key, checked);
|
|
243
309
|
}
|
|
310
|
+
onDateRangeChange(dateRange) {
|
|
311
|
+
this.filterState.setDateRangeValue(this.item().key, dateRange);
|
|
312
|
+
}
|
|
244
313
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
245
|
-
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 @
|
|
314
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterLeafComponent, isStandalone: true, selector: "ap-filter-leaf", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, isLastLeaf: { classPropertyName: "isLastLeaf", publicName: "isLastLeaf", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideUiComponentsSymbols(apChevronDown, apInfo)], ngImport: i0, template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n <div class=\"ap-filter-leaf__header\" [class.ap-filter-leaf__closable]=\"closable()\" (click)=\"onHeaderClick()\">\n <div class=\"ap-filter-leaf__title\">\n <span>{{ item().title }}</span>\n @if (item().tooltipText) {\n <ap-symbol color=\"light-grey\" symbolId=\"info\" size=\"sm\" [apTooltip]=\"item().tooltipText\" />\n }\n </div>\n @if (closable()) {\n <div class=\"ap-filter-leaf__actions\" [class.ap-filter-leaf__chevron--rotated]=\"!item().expanded\">\n <ap-symbol symbolId=\"chevron-up\" size=\"sm\" />\n </div>\n }\n </div>\n\n @if (!closable() || item().expanded) {\n <div class=\"ap-filter-leaf__content\">\n @if (item().label && displayLabelInLeaf()) {\n <span class=\"ap-filter-leaf__label\">{{ item().label }}</span>\n }\n @switch(item().filterType) {\n @case ('checkbox') {\n @if (checkboxItem(); as vCheckboxItem) {\n @for (option of vCheckboxItem.items; track option.name) {\n <div class=\"ap-filter-leaf__option\">\n <ap-checkbox\n [name]=\"'checkbox-' + option.name\"\n [checked]=\"checkboxValue()[option.name]\"\n [disabled]=\"!!option.disabled\"\n (change)=\"onCheckboxChange(option.name, $event)\"\n >\n <span class=\"ap-filter-leaf__label\">{{ option.label }}</span>\n </ap-checkbox>\n </div>\n }\n }\n }\n @case ('radio') {\n @if (radioItem(); as vRadioItem) {\n @for (option of vRadioItem.items; track option.radioId) {\n <div class=\"ap-filter-leaf__option\">\n <ap-radio\n [radioId]=\"option.radioId\"\n [value]=\"option.value\"\n [disabled]=\"!!option.disabled\"\n [name]=\"item().key\"\n [ngModel]=\"radioValue()\"\n (ngModelChange)=\"onRadioClick($event)\"\n >\n <span class=\"ap-filter-leaf__label\">{{ option.label }}</span>\n </ap-radio>\n </div>\n }\n }\n }\n @case ('toggle') {\n @if (toggleItem(); as vToggleItem) {\n <div class=\"ap-filter-leaf__option\">\n <ap-toggle\n [name]=\"'toggle-' + vToggleItem.item.name\"\n [checked]=\"toggleValue()\"\n [disabled]=\"vToggleItem.item.disabled\"\n (change)=\"onToggleChange($event)\"\n />\n <span class=\"ap-filter-leaf__label\">{{ vToggleItem.item.label }}</span>\n </div>\n }\n }\n @case ('select') {\n @if (selectItem(); as vSelectItem) {\n <ap-filter-leaf-select [item]=\"vSelectItem\" />\n }\n }\n @case ('date-range') {\n @if (dateRangeItem(); as vDateRangeItem) {\n <ap-input-datepicker\n [label]=\"vDateRangeItem.label\"\n [mode]=\"DatepickerMode.Range\"\n [placeholder]=\"vDateRangeItem.placeholder ?? 'Select date range'\"\n [minDate]=\"vDateRangeItem.minDate\"\n [maxDate]=\"vDateRangeItem.maxDate\"\n [selectedPeriod]=\"dateRangeValue()\"\n (periodChanged)=\"onDateRangeChange($event)\"\n />\n }\n }\n }\n </div>\n }\n\n</div>\n", styles: [".ap-filter-leaf{display:flex;flex-direction:column;gap:var(--ref-spacing-xs);padding:var(--ref-spacing-sm)}.ap-filter-leaf.with-border-bottom{border-bottom:1px solid var(--ref-color-grey-10)}.ap-filter-leaf__header{display:flex;align-items:center;justify-content:space-between}.ap-filter-leaf__closable{cursor:pointer}.ap-filter-leaf__title{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1 0 0;color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__label{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__chevron--rotated{transform:rotate(180deg)}.ap-filter-leaf__content{display:flex;flex-direction:column;gap:var(--ref-spacing-xs)}.ap-filter-leaf__option{display:flex;gap:var(--ref-spacing-xxs);align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: RadioComponent, selector: "ap-radio", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "labelPosition", "radioId", "formControlName", "value", "required", "name"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ToggleComponent, selector: "ap-toggle", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "labelPosition", "disabled", "checked", "required", "confirm", "confirmMessage", "confirmOk", "confirmCancel", "confirmTitle", "name"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FilterLeafSelectComponent, selector: "ap-filter-leaf-select", inputs: ["item"] }, { kind: "component", type: InputDatepickerComponent, selector: "ap-input-datepicker", inputs: ["mode", "label", "placeholder", "firstDayOfWeek", "locale", "dateFormat", "disabled", "minDate", "maxDate", "selectedDate", "selectedDates", "selectedPeriod", "i18n", "showRanges", "showCustomRangeLabel", "rangesConfig", "showBackdrop", "defaultPosition"], outputs: ["periodChanged", "dateSelected"] }] });
|
|
246
315
|
}
|
|
247
316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafComponent, decorators: [{
|
|
248
317
|
type: Component,
|
|
@@ -254,8 +323,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
254
323
|
ToggleComponent,
|
|
255
324
|
FormsModule,
|
|
256
325
|
FilterLeafSelectComponent,
|
|
257
|
-
|
|
258
|
-
|
|
326
|
+
InputDatepickerComponent,
|
|
327
|
+
SymbolComponent,
|
|
328
|
+
], providers: [provideUiComponentsSymbols(apChevronDown, apInfo)], template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n <div class=\"ap-filter-leaf__header\" [class.ap-filter-leaf__closable]=\"closable()\" (click)=\"onHeaderClick()\">\n <div class=\"ap-filter-leaf__title\">\n <span>{{ item().title }}</span>\n @if (item().tooltipText) {\n <ap-symbol color=\"light-grey\" symbolId=\"info\" size=\"sm\" [apTooltip]=\"item().tooltipText\" />\n }\n </div>\n @if (closable()) {\n <div class=\"ap-filter-leaf__actions\" [class.ap-filter-leaf__chevron--rotated]=\"!item().expanded\">\n <ap-symbol symbolId=\"chevron-up\" size=\"sm\" />\n </div>\n }\n </div>\n\n @if (!closable() || item().expanded) {\n <div class=\"ap-filter-leaf__content\">\n @if (item().label && displayLabelInLeaf()) {\n <span class=\"ap-filter-leaf__label\">{{ item().label }}</span>\n }\n @switch(item().filterType) {\n @case ('checkbox') {\n @if (checkboxItem(); as vCheckboxItem) {\n @for (option of vCheckboxItem.items; track option.name) {\n <div class=\"ap-filter-leaf__option\">\n <ap-checkbox\n [name]=\"'checkbox-' + option.name\"\n [checked]=\"checkboxValue()[option.name]\"\n [disabled]=\"!!option.disabled\"\n (change)=\"onCheckboxChange(option.name, $event)\"\n >\n <span class=\"ap-filter-leaf__label\">{{ option.label }}</span>\n </ap-checkbox>\n </div>\n }\n }\n }\n @case ('radio') {\n @if (radioItem(); as vRadioItem) {\n @for (option of vRadioItem.items; track option.radioId) {\n <div class=\"ap-filter-leaf__option\">\n <ap-radio\n [radioId]=\"option.radioId\"\n [value]=\"option.value\"\n [disabled]=\"!!option.disabled\"\n [name]=\"item().key\"\n [ngModel]=\"radioValue()\"\n (ngModelChange)=\"onRadioClick($event)\"\n >\n <span class=\"ap-filter-leaf__label\">{{ option.label }}</span>\n </ap-radio>\n </div>\n }\n }\n }\n @case ('toggle') {\n @if (toggleItem(); as vToggleItem) {\n <div class=\"ap-filter-leaf__option\">\n <ap-toggle\n [name]=\"'toggle-' + vToggleItem.item.name\"\n [checked]=\"toggleValue()\"\n [disabled]=\"vToggleItem.item.disabled\"\n (change)=\"onToggleChange($event)\"\n />\n <span class=\"ap-filter-leaf__label\">{{ vToggleItem.item.label }}</span>\n </div>\n }\n }\n @case ('select') {\n @if (selectItem(); as vSelectItem) {\n <ap-filter-leaf-select [item]=\"vSelectItem\" />\n }\n }\n @case ('date-range') {\n @if (dateRangeItem(); as vDateRangeItem) {\n <ap-input-datepicker\n [label]=\"vDateRangeItem.label\"\n [mode]=\"DatepickerMode.Range\"\n [placeholder]=\"vDateRangeItem.placeholder ?? 'Select date range'\"\n [minDate]=\"vDateRangeItem.minDate\"\n [maxDate]=\"vDateRangeItem.maxDate\"\n [selectedPeriod]=\"dateRangeValue()\"\n (periodChanged)=\"onDateRangeChange($event)\"\n />\n }\n }\n }\n </div>\n }\n\n</div>\n", styles: [".ap-filter-leaf{display:flex;flex-direction:column;gap:var(--ref-spacing-xs);padding:var(--ref-spacing-sm)}.ap-filter-leaf.with-border-bottom{border-bottom:1px solid var(--ref-color-grey-10)}.ap-filter-leaf__header{display:flex;align-items:center;justify-content:space-between}.ap-filter-leaf__closable{cursor:pointer}.ap-filter-leaf__title{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1 0 0;color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__label{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__chevron--rotated{transform:rotate(180deg)}.ap-filter-leaf__content{display:flex;flex-direction:column;gap:var(--ref-spacing-xs)}.ap-filter-leaf__option{display:flex;gap:var(--ref-spacing-xxs);align-items:center;justify-content:flex-start}\n"] }]
|
|
329
|
+
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], isLastLeaf: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLastLeaf", required: false }] }] } });
|
|
259
330
|
|
|
260
331
|
class FilterDropdownComponent {
|
|
261
332
|
overlay = createDropdownOverlay();
|
|
@@ -268,6 +339,16 @@ class FilterDropdownComponent {
|
|
|
268
339
|
}
|
|
269
340
|
});
|
|
270
341
|
}, ...(ngDevMode ? [{ debugName: "initGroups" }] : []));
|
|
342
|
+
emitOnValueChange = effect(() => {
|
|
343
|
+
this.filterState.draft(); // track changes to draft
|
|
344
|
+
const needApply = this.needApplyButton();
|
|
345
|
+
const savePresetsMode = this.savePresetsMode();
|
|
346
|
+
untracked(() => {
|
|
347
|
+
if (!needApply && !savePresetsMode) {
|
|
348
|
+
this.applyFilters.emit(this.filterState.getSnapshot());
|
|
349
|
+
}
|
|
350
|
+
});
|
|
351
|
+
}, ...(ngDevMode ? [{ debugName: "emitOnValueChange" }] : []));
|
|
271
352
|
filterGroupTemplate = viewChild('filterGroupTemplate', ...(ngDevMode ? [{ debugName: "filterGroupTemplate" }] : []));
|
|
272
353
|
/** The filter groups to display in the dropdown */
|
|
273
354
|
items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
|
|
@@ -277,13 +358,18 @@ class FilterDropdownComponent {
|
|
|
277
358
|
closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
|
|
278
359
|
/** whether the mode is in preset mode */
|
|
279
360
|
savePresetsMode = input(false, ...(ngDevMode ? [{ debugName: "savePresetsMode" }] : []));
|
|
361
|
+
/** whether the user is currently editing presets. Only necessary if savePresetsMode is at true */
|
|
362
|
+
editingPresetsMode = input(false, ...(ngDevMode ? [{ debugName: "editingPresetsMode" }] : []));
|
|
280
363
|
/** Whether to show a backdrop that closes the dropdown when clicked */
|
|
281
364
|
showBackdrop = input(true, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
|
|
282
365
|
/** Whether the dropdown is disabled and cannot be opened */
|
|
283
366
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
284
367
|
/** Default position for the dropdown relative to the trigger element */
|
|
285
368
|
defaultPosition = input('right', ...(ngDevMode ? [{ debugName: "defaultPosition" }] : []));
|
|
286
|
-
|
|
369
|
+
saveNewPresetsText = input('Save new presets', ...(ngDevMode ? [{ debugName: "saveNewPresetsText" }] : []));
|
|
370
|
+
saveAsNewPresetText = input('Save as new preset', ...(ngDevMode ? [{ debugName: "saveAsNewPresetText" }] : []));
|
|
371
|
+
savePresetText = input('Save preset', ...(ngDevMode ? [{ debugName: "savePresetText" }] : []));
|
|
372
|
+
updateExistingPresetText = input('Update existing preset', ...(ngDevMode ? [{ debugName: "updateExistingPresetText" }] : []));
|
|
287
373
|
resetFilterText = input('Reset filters', ...(ngDevMode ? [{ debugName: "resetFilterText" }] : []));
|
|
288
374
|
applyFiltersText = input('Apply filters', ...(ngDevMode ? [{ debugName: "applyFiltersText" }] : []));
|
|
289
375
|
clearFilterText = input('Clear filters', ...(ngDevMode ? [{ debugName: "clearFilterText" }] : []));
|
|
@@ -292,7 +378,9 @@ class FilterDropdownComponent {
|
|
|
292
378
|
/** Emits when the dropdown menu is closed */
|
|
293
379
|
closed = output();
|
|
294
380
|
/** Emits when save presets is clicked */
|
|
295
|
-
|
|
381
|
+
saveNewPresets = output();
|
|
382
|
+
/** Emits when save presets is clicked */
|
|
383
|
+
updatePresets = output();
|
|
296
384
|
/** Emits when filters are applied */
|
|
297
385
|
applyFilters = output();
|
|
298
386
|
/** Emits when user clicks on clear filter */
|
|
@@ -300,6 +388,24 @@ class FilterDropdownComponent {
|
|
|
300
388
|
/** Emits when user clicks on reset filter */
|
|
301
389
|
resetFilters = output();
|
|
302
390
|
isOpen = this.overlay.isOpen;
|
|
391
|
+
savePresetsDropdownItems = computed(() => {
|
|
392
|
+
if (!this.savePresetsMode() || !this.editingPresetsMode())
|
|
393
|
+
return [];
|
|
394
|
+
return [
|
|
395
|
+
{
|
|
396
|
+
name: 'saveAsNewPresets',
|
|
397
|
+
startSymbolId: 'plus',
|
|
398
|
+
label: this.saveAsNewPresetText(),
|
|
399
|
+
dataTrack: 'save-new-preset',
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
name: 'updatePresets',
|
|
403
|
+
startSymbolId: 'refresh',
|
|
404
|
+
label: this.updateExistingPresetText(),
|
|
405
|
+
dataTrack: 'update-existing-preset',
|
|
406
|
+
},
|
|
407
|
+
];
|
|
408
|
+
}, ...(ngDevMode ? [{ debugName: "savePresetsDropdownItems" }] : []));
|
|
303
409
|
/** Opens the dropdown menu at the specified trigger element */
|
|
304
410
|
open(triggerElement) {
|
|
305
411
|
const template = this.filterGroupTemplate();
|
|
@@ -340,19 +446,101 @@ class FilterDropdownComponent {
|
|
|
340
446
|
this.resetFilters.emit();
|
|
341
447
|
}
|
|
342
448
|
onSavePresets() {
|
|
343
|
-
this.
|
|
449
|
+
this.saveNewPresets.emit(this.filterState.getSnapshot());
|
|
450
|
+
}
|
|
451
|
+
onUpdatePresets() {
|
|
452
|
+
this.updatePresets.emit(this.filterState.getSnapshot());
|
|
453
|
+
}
|
|
454
|
+
onActionDropdownItemClick(item) {
|
|
455
|
+
switch (item.name) {
|
|
456
|
+
case 'saveAsNewPresets':
|
|
457
|
+
this.onSavePresets();
|
|
458
|
+
break;
|
|
459
|
+
case 'updatePresets':
|
|
460
|
+
this.onUpdatePresets();
|
|
461
|
+
break;
|
|
462
|
+
}
|
|
344
463
|
}
|
|
345
464
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
346
|
-
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 },
|
|
465
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterDropdownComponent, isStandalone: true, selector: "ap-filter-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, needApplyButton: { classPropertyName: "needApplyButton", publicName: "needApplyButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, savePresetsMode: { classPropertyName: "savePresetsMode", publicName: "savePresetsMode", isSignal: true, isRequired: false, transformFunction: null }, editingPresetsMode: { classPropertyName: "editingPresetsMode", publicName: "editingPresetsMode", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null }, saveNewPresetsText: { classPropertyName: "saveNewPresetsText", publicName: "saveNewPresetsText", isSignal: true, isRequired: false, transformFunction: null }, saveAsNewPresetText: { classPropertyName: "saveAsNewPresetText", publicName: "saveAsNewPresetText", isSignal: true, isRequired: false, transformFunction: null }, savePresetText: { classPropertyName: "savePresetText", publicName: "savePresetText", isSignal: true, isRequired: false, transformFunction: null }, updateExistingPresetText: { classPropertyName: "updateExistingPresetText", publicName: "updateExistingPresetText", isSignal: true, isRequired: false, transformFunction: null }, resetFilterText: { classPropertyName: "resetFilterText", publicName: "resetFilterText", isSignal: true, isRequired: false, transformFunction: null }, applyFiltersText: { classPropertyName: "applyFiltersText", publicName: "applyFiltersText", isSignal: true, isRequired: false, transformFunction: null }, clearFilterText: { classPropertyName: "clearFilterText", publicName: "clearFilterText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", saveNewPresets: "saveNewPresets", updatePresets: "updatePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters" }, providers: [provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh)], viewQueries: [{ propertyName: "filterGroupTemplate", first: true, predicate: ["filterGroupTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #filterGroupTemplate>\n <div\n class=\"ap-filter-dropdown\"\n role=\"menu\"\n tabindex=\"-1\"\n aria-label=\"Filter dropdown\">\n\n <div class=\"ap-filter-dropdown__content\">\n @for (item of filterState.groups(); let last = $last; track item.key) {\n <ap-filter-leaf [item]=\"item\" [closable]=\"closable()\" [isLastLeaf]=\"last\" />\n }\n </div>\n\n <div class=\"ap-filter-dropdown__footer\">\n @if (savePresetsMode()) {\n <div class=\"ap-filter-dropdown__footer--presets\">\n @if (!editingPresetsMode()) {\n <ap-button\n name=\"filter-dropdown-save-preset\"\n [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n (click)=\"onSavePresets()\">\n {{ saveNewPresetsText() }}\n </ap-button>\n } @else {\n <ap-button\n name=\"filter-dropdown-edit-presets\"\n symbolId=\"chevron-down\"\n symbolPosition=\"right\"\n [apDropdownTrigger]=\"updatePresetsDropdown\"\n [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n >\n {{ savePresetText() }}\n </ap-button>\n }\n\n <ap-button\n name=\"filter-dropdown-reset-filters\"\n [symbolId]=\"'reset'\"\n [symbolPosition]=\"'left'\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n (click)=\"onResetFilters()\">\n {{ resetFilterText() }}\n </ap-button>\n </div>\n } @else {\n <div class=\"ap-filter-dropdown__footer--apply\">\n <ap-button\n name=\"filter-dropdown-clear-filters\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n (click)=\"onClearFilters()\">\n {{ clearFilterText() }}\n </ap-button>\n\n @if (needApplyButton()) {\n <ap-button\n name=\"filter-dropdown-apply-filters\"\n [config]=\"{ color: 'blue', style: 'primary' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n (click)=\"onApplyFilters()\">\n {{ applyFiltersText() }}\n </ap-button>\n }\n </div>\n }\n </div>\n </div>\n\n</ng-template>\n\n<ap-action-dropdown\n #updatePresetsDropdown\n (itemClick)=\"onActionDropdownItemClick($event)\"\n [items]=\"savePresetsDropdownItems()\"\n/>\n", styles: [":host{display:none}.ap-filter-dropdown{display:flex;flex-direction:column;width:420px;background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);outline:none;max-height:min(90vh,750px)}.ap-filter-dropdown__footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__content{overflow-x:hidden;overflow-y:auto}.ap-filter-dropdown__footer{border-top:1px solid var(--comp-action-dropdown-divider-color)}.ap-filter-dropdown__footer--presets{display:flex;justify-content:space-between}.ap-filter-dropdown__footer--apply{display:flex;justify-content:flex-end;gap:var(--ref-spacing-sm)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: FilterLeafComponent, selector: "ap-filter-leaf", inputs: ["item", "closable", "isLastLeaf"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: ActionDropdownComponent, selector: "ap-action-dropdown", inputs: ["items", "largeModeEnabled", "customWidth", "showBackdrop", "disabled", "defaultPosition"], outputs: ["opened", "closed", "itemClick"] }] });
|
|
347
466
|
}
|
|
348
467
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownComponent, decorators: [{
|
|
349
468
|
type: Component,
|
|
350
|
-
args: [{ selector: 'ap-filter-dropdown', imports: [ButtonComponent, FilterLeafComponent], providers: [
|
|
351
|
-
}], 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 }] }],
|
|
469
|
+
args: [{ selector: 'ap-filter-dropdown', imports: [ButtonComponent, FilterLeafComponent, DropdownTriggerDirective, ActionDropdownComponent], providers: [provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh)], template: "<ng-template #filterGroupTemplate>\n <div\n class=\"ap-filter-dropdown\"\n role=\"menu\"\n tabindex=\"-1\"\n aria-label=\"Filter dropdown\">\n\n <div class=\"ap-filter-dropdown__content\">\n @for (item of filterState.groups(); let last = $last; track item.key) {\n <ap-filter-leaf [item]=\"item\" [closable]=\"closable()\" [isLastLeaf]=\"last\" />\n }\n </div>\n\n <div class=\"ap-filter-dropdown__footer\">\n @if (savePresetsMode()) {\n <div class=\"ap-filter-dropdown__footer--presets\">\n @if (!editingPresetsMode()) {\n <ap-button\n name=\"filter-dropdown-save-preset\"\n [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n (click)=\"onSavePresets()\">\n {{ saveNewPresetsText() }}\n </ap-button>\n } @else {\n <ap-button\n name=\"filter-dropdown-edit-presets\"\n symbolId=\"chevron-down\"\n symbolPosition=\"right\"\n [apDropdownTrigger]=\"updatePresetsDropdown\"\n [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n >\n {{ savePresetText() }}\n </ap-button>\n }\n\n <ap-button\n name=\"filter-dropdown-reset-filters\"\n [symbolId]=\"'reset'\"\n [symbolPosition]=\"'left'\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n (click)=\"onResetFilters()\">\n {{ resetFilterText() }}\n </ap-button>\n </div>\n } @else {\n <div class=\"ap-filter-dropdown__footer--apply\">\n <ap-button\n name=\"filter-dropdown-clear-filters\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n (click)=\"onClearFilters()\">\n {{ clearFilterText() }}\n </ap-button>\n\n @if (needApplyButton()) {\n <ap-button\n name=\"filter-dropdown-apply-filters\"\n [config]=\"{ color: 'blue', style: 'primary' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n (click)=\"onApplyFilters()\">\n {{ applyFiltersText() }}\n </ap-button>\n }\n </div>\n }\n </div>\n </div>\n\n</ng-template>\n\n<ap-action-dropdown\n #updatePresetsDropdown\n (itemClick)=\"onActionDropdownItemClick($event)\"\n [items]=\"savePresetsDropdownItems()\"\n/>\n", styles: [":host{display:none}.ap-filter-dropdown{display:flex;flex-direction:column;width:420px;background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);outline:none;max-height:min(90vh,750px)}.ap-filter-dropdown__footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__content{overflow-x:hidden;overflow-y:auto}.ap-filter-dropdown__footer{border-top:1px solid var(--comp-action-dropdown-divider-color)}.ap-filter-dropdown__footer--presets{display:flex;justify-content:space-between}.ap-filter-dropdown__footer--apply{display:flex;justify-content:flex-end;gap:var(--ref-spacing-sm)}\n"] }]
|
|
470
|
+
}], propDecorators: { filterGroupTemplate: [{ type: i0.ViewChild, args: ['filterGroupTemplate', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], needApplyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needApplyButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], savePresetsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetsMode", required: false }] }], editingPresetsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editingPresetsMode", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", required: false }] }], saveNewPresetsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveNewPresetsText", required: false }] }], saveAsNewPresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveAsNewPresetText", required: false }] }], savePresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetText", required: false }] }], updateExistingPresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateExistingPresetText", required: false }] }], resetFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterText", required: false }] }], applyFiltersText: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyFiltersText", required: false }] }], clearFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearFilterText", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], saveNewPresets: [{ type: i0.Output, args: ["saveNewPresets"] }], updatePresets: [{ type: i0.Output, args: ["updatePresets"] }], applyFilters: [{ type: i0.Output, args: ["applyFilters"] }], clearFilters: [{ type: i0.Output, args: ["clearFilters"] }], resetFilters: [{ type: i0.Output, args: ["resetFilters"] }] } });
|
|
471
|
+
|
|
472
|
+
class FilterDropdownButtonComponent {
|
|
473
|
+
filterState = inject(FilterState);
|
|
474
|
+
isFilterCountActive = this.filterState.isFilterCountActive;
|
|
475
|
+
activeFilterCount = this.filterState.activeFilterCount;
|
|
476
|
+
/** text of the button, input specific to the button */
|
|
477
|
+
buttonFilterText = input('Filters', ...(ngDevMode ? [{ debugName: "buttonFilterText" }] : []));
|
|
478
|
+
/** input specific to the filter-dropdown */
|
|
479
|
+
/** The filter groups to display in the dropdown */
|
|
480
|
+
items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
|
|
481
|
+
/** Whether the filter needs the apply button to be clicked for applyFilters to emit */
|
|
482
|
+
needApplyButton = input(true, ...(ngDevMode ? [{ debugName: "needApplyButton" }] : []));
|
|
483
|
+
/** 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. */
|
|
484
|
+
closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
|
|
485
|
+
/** whether the mode is in preset mode */
|
|
486
|
+
savePresetsMode = input(false, ...(ngDevMode ? [{ debugName: "savePresetsMode" }] : []));
|
|
487
|
+
/** whether the user is currently editing presets. Only necessary if savePresetsMode is at true */
|
|
488
|
+
editingPresetsMode = input(false, ...(ngDevMode ? [{ debugName: "editingPresetsMode" }] : []));
|
|
489
|
+
/** Whether to show a backdrop that closes the dropdown when clicked */
|
|
490
|
+
showBackdrop = input(true, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
|
|
491
|
+
/** Whether the dropdown is disabled and cannot be opened */
|
|
492
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
493
|
+
/** Default position for the dropdown relative to the trigger element */
|
|
494
|
+
defaultPosition = input('right', ...(ngDevMode ? [{ debugName: "defaultPosition" }] : []));
|
|
495
|
+
saveNewPresetsText = input('Save new presets', ...(ngDevMode ? [{ debugName: "saveNewPresetsText" }] : []));
|
|
496
|
+
saveAsNewPresetText = input('Save as new preset', ...(ngDevMode ? [{ debugName: "saveAsNewPresetText" }] : []));
|
|
497
|
+
savePresetText = input('Save preset', ...(ngDevMode ? [{ debugName: "savePresetText" }] : []));
|
|
498
|
+
updateExistingPresetText = input('Update existing preset', ...(ngDevMode ? [{ debugName: "updateExistingPresetText" }] : []));
|
|
499
|
+
resetFilterText = input('Reset filters', ...(ngDevMode ? [{ debugName: "resetFilterText" }] : []));
|
|
500
|
+
applyFiltersText = input('Apply filters', ...(ngDevMode ? [{ debugName: "applyFiltersText" }] : []));
|
|
501
|
+
clearFilterText = input('Clear filters', ...(ngDevMode ? [{ debugName: "clearFilterText" }] : []));
|
|
502
|
+
/** Emits when the dropdown menu is opened */
|
|
503
|
+
opened = output();
|
|
504
|
+
/** Emits when the dropdown menu is closed */
|
|
505
|
+
closed = output();
|
|
506
|
+
/** Emits when save presets is clicked */
|
|
507
|
+
saveNewPresets = output();
|
|
508
|
+
/** Emits when save presets is clicked */
|
|
509
|
+
updatePresets = output();
|
|
510
|
+
/** Emits when filters are applied */
|
|
511
|
+
applyFilters = output();
|
|
512
|
+
/** Emits when user clicks on clear filter */
|
|
513
|
+
clearFilters = output();
|
|
514
|
+
/** Emits when user clicks on reset filter */
|
|
515
|
+
resetFilters = output();
|
|
516
|
+
onApplyFilters() {
|
|
517
|
+
this.applyFilters.emit(this.filterState.getSnapshot());
|
|
518
|
+
}
|
|
519
|
+
onClearFilters() {
|
|
520
|
+
this.filterState.clear();
|
|
521
|
+
this.clearFilters.emit();
|
|
522
|
+
}
|
|
523
|
+
onResetFilters() {
|
|
524
|
+
this.filterState.reset();
|
|
525
|
+
this.resetFilters.emit();
|
|
526
|
+
}
|
|
527
|
+
onSavePresets() {
|
|
528
|
+
this.saveNewPresets.emit(this.filterState.getSnapshot());
|
|
529
|
+
}
|
|
530
|
+
onUpdatePresets() {
|
|
531
|
+
this.updatePresets.emit(this.filterState.getSnapshot());
|
|
532
|
+
}
|
|
533
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
534
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterDropdownButtonComponent, isStandalone: true, selector: "ap-filter-dropdown-button", inputs: { buttonFilterText: { classPropertyName: "buttonFilterText", publicName: "buttonFilterText", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, needApplyButton: { classPropertyName: "needApplyButton", publicName: "needApplyButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, savePresetsMode: { classPropertyName: "savePresetsMode", publicName: "savePresetsMode", isSignal: true, isRequired: false, transformFunction: null }, editingPresetsMode: { classPropertyName: "editingPresetsMode", publicName: "editingPresetsMode", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null }, saveNewPresetsText: { classPropertyName: "saveNewPresetsText", publicName: "saveNewPresetsText", isSignal: true, isRequired: false, transformFunction: null }, saveAsNewPresetText: { classPropertyName: "saveAsNewPresetText", publicName: "saveAsNewPresetText", isSignal: true, isRequired: false, transformFunction: null }, savePresetText: { classPropertyName: "savePresetText", publicName: "savePresetText", isSignal: true, isRequired: false, transformFunction: null }, updateExistingPresetText: { classPropertyName: "updateExistingPresetText", publicName: "updateExistingPresetText", isSignal: true, isRequired: false, transformFunction: null }, resetFilterText: { classPropertyName: "resetFilterText", publicName: "resetFilterText", isSignal: true, isRequired: false, transformFunction: null }, applyFiltersText: { classPropertyName: "applyFiltersText", publicName: "applyFiltersText", isSignal: true, isRequired: false, transformFunction: null }, clearFilterText: { classPropertyName: "clearFilterText", publicName: "clearFilterText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", saveNewPresets: "saveNewPresets", updatePresets: "updatePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters" }, providers: [withSymbols(apFilter, apFilterFill)], ngImport: i0, template: "<ap-button\n [apDropdownTrigger]=\"filterDropdown\"\n [config]=\"{ style: 'stroked', color: isFilterCountActive() ? 'blue' : 'grey' }\"\n ariaLabel=\"Button toggling filters\"\n name=\"toggle-filter\"\n symbolPosition=\"left\">\n <ap-symbol [symbolId]=\"isFilterCountActive() ? 'filter_fill' : 'filter'\" />\n @if (isFilterCountActive()) {\n <ap-counter\n size=\"big\"\n color=\"blue\"\n [background]=\"true\">\n {{ activeFilterCount() }}\n </ap-counter>\n }\n {{ buttonFilterText() }}\n</ap-button>\n\n<ap-filter-dropdown\n #filterDropdown\n (applyFilters)=\"applyFilters.emit($event)\"\n (clearFilters)=\"clearFilters.emit()\"\n (closed)=\"closed.emit()\"\n (opened)=\"opened.emit()\"\n (resetFilters)=\"resetFilters.emit()\"\n (saveNewPresets)=\"saveNewPresets.emit($event)\"\n (updatePresets)=\"updatePresets.emit($event)\"\n [applyFiltersText]=\"applyFiltersText()\"\n [clearFilterText]=\"clearFilterText()\"\n [closable]=\"closable()\"\n [defaultPosition]=\"defaultPosition()\"\n [disabled]=\"disabled()\"\n [editingPresetsMode]=\"editingPresetsMode()\"\n [items]=\"items()\"\n [needApplyButton]=\"needApplyButton()\"\n [resetFilterText]=\"resetFilterText()\"\n [saveAsNewPresetText]=\"saveAsNewPresetText()\"\n [saveNewPresetsText]=\"saveNewPresetsText()\"\n [savePresetText]=\"savePresetText()\"\n [savePresetsMode]=\"savePresetsMode()\"\n [showBackdrop]=\"showBackdrop()\"\n [updateExistingPresetText]=\"updateExistingPresetText()\" />\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: FilterDropdownComponent, selector: "ap-filter-dropdown", inputs: ["items", "needApplyButton", "closable", "savePresetsMode", "editingPresetsMode", "showBackdrop", "disabled", "defaultPosition", "saveNewPresetsText", "saveAsNewPresetText", "savePresetText", "updateExistingPresetText", "resetFilterText", "applyFiltersText", "clearFilterText"], outputs: ["opened", "closed", "saveNewPresets", "updatePresets", "applyFilters", "clearFilters", "resetFilters"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }] });
|
|
535
|
+
}
|
|
536
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownButtonComponent, decorators: [{
|
|
537
|
+
type: Component,
|
|
538
|
+
args: [{ selector: 'ap-filter-dropdown-button', imports: [ButtonComponent, DropdownTriggerDirective, SymbolComponent, FilterDropdownComponent, CounterComponent], providers: [withSymbols(apFilter, apFilterFill)], template: "<ap-button\n [apDropdownTrigger]=\"filterDropdown\"\n [config]=\"{ style: 'stroked', color: isFilterCountActive() ? 'blue' : 'grey' }\"\n ariaLabel=\"Button toggling filters\"\n name=\"toggle-filter\"\n symbolPosition=\"left\">\n <ap-symbol [symbolId]=\"isFilterCountActive() ? 'filter_fill' : 'filter'\" />\n @if (isFilterCountActive()) {\n <ap-counter\n size=\"big\"\n color=\"blue\"\n [background]=\"true\">\n {{ activeFilterCount() }}\n </ap-counter>\n }\n {{ buttonFilterText() }}\n</ap-button>\n\n<ap-filter-dropdown\n #filterDropdown\n (applyFilters)=\"applyFilters.emit($event)\"\n (clearFilters)=\"clearFilters.emit()\"\n (closed)=\"closed.emit()\"\n (opened)=\"opened.emit()\"\n (resetFilters)=\"resetFilters.emit()\"\n (saveNewPresets)=\"saveNewPresets.emit($event)\"\n (updatePresets)=\"updatePresets.emit($event)\"\n [applyFiltersText]=\"applyFiltersText()\"\n [clearFilterText]=\"clearFilterText()\"\n [closable]=\"closable()\"\n [defaultPosition]=\"defaultPosition()\"\n [disabled]=\"disabled()\"\n [editingPresetsMode]=\"editingPresetsMode()\"\n [items]=\"items()\"\n [needApplyButton]=\"needApplyButton()\"\n [resetFilterText]=\"resetFilterText()\"\n [saveAsNewPresetText]=\"saveAsNewPresetText()\"\n [saveNewPresetsText]=\"saveNewPresetsText()\"\n [savePresetText]=\"savePresetText()\"\n [savePresetsMode]=\"savePresetsMode()\"\n [showBackdrop]=\"showBackdrop()\"\n [updateExistingPresetText]=\"updateExistingPresetText()\" />\n" }]
|
|
539
|
+
}], propDecorators: { buttonFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonFilterText", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], needApplyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needApplyButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], savePresetsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetsMode", required: false }] }], editingPresetsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editingPresetsMode", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", required: false }] }], saveNewPresetsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveNewPresetsText", required: false }] }], saveAsNewPresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveAsNewPresetText", required: false }] }], savePresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetText", required: false }] }], updateExistingPresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateExistingPresetText", required: false }] }], resetFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterText", required: false }] }], applyFiltersText: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyFiltersText", required: false }] }], clearFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearFilterText", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], saveNewPresets: [{ type: i0.Output, args: ["saveNewPresets"] }], updatePresets: [{ type: i0.Output, args: ["updatePresets"] }], applyFilters: [{ type: i0.Output, args: ["applyFilters"] }], clearFilters: [{ type: i0.Output, args: ["clearFilters"] }], resetFilters: [{ type: i0.Output, args: ["resetFilters"] }] } });
|
|
352
540
|
|
|
353
541
|
/**
|
|
354
542
|
* Generated bundle index. Do not edit.
|
|
355
543
|
*/
|
|
356
544
|
|
|
357
|
-
export { FilterDropdownComponent };
|
|
545
|
+
export { FilterDropdownButtonComponent, FilterDropdownComponent };
|
|
358
546
|
//# sourceMappingURL=agorapulse-ui-components-filter-dropdown.mjs.map
|