@agorapulse/ui-components 20.4.14 → 20.4.16
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.16.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-filter-chips-list.mjs +129 -0
- package/fesm2022/agorapulse-ui-components-filter-chips-list.mjs.map +1 -0
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +186 -18
- 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-chips-list/index.d.ts +92 -0
- package/filter-dropdown/index.d.ts +73 -6
- package/index.d.ts +1 -1
- package/package.json +5 -1
- package/agorapulse-ui-components-20.4.14.tgz +0 -0
|
@@ -1,26 +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
4
|
import { DatepickerMode, InputDatepickerComponent } from '@agorapulse/ui-components/datepicker';
|
|
5
5
|
import { provideUiComponentsSymbols } from '@agorapulse/ui-components/providers';
|
|
6
6
|
import { RadioComponent } from '@agorapulse/ui-components/radio';
|
|
7
7
|
import { ToggleComponent } from '@agorapulse/ui-components/toggle';
|
|
8
8
|
import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
|
|
9
|
-
import { SymbolComponent, apInfo, apReset } from '@agorapulse/ui-symbol';
|
|
9
|
+
import { SymbolComponent, apInfo, apReset, apChevronDown as apChevronDown$1, apPlus, apRefresh, withSymbols, apFilter, apFilterFill } from '@agorapulse/ui-symbol';
|
|
10
10
|
import { apChevronDown } from '@agorapulse/ui-symbol/icons';
|
|
11
11
|
import * as i0 from '@angular/core';
|
|
12
|
-
import { signal, Injectable, inject, input,
|
|
12
|
+
import { signal, computed, Injectable, inject, input, Component, effect, untracked, viewChild, output } from '@angular/core';
|
|
13
13
|
import * as i1 from '@angular/forms';
|
|
14
14
|
import { FormsModule } from '@angular/forms';
|
|
15
15
|
import { SelectMultipleDirective, SelectSingleDirective, SelectLabelSingleComponent, SelectLabelMultipleComponent, DropdownItemMultipleTwoLinesComponent, DropdownItemMultipleOneLineComponent, DropdownItemSingleOneLineComponent, DropdownItemSingleTwoLinesComponent } from '@agorapulse/ui-components/select';
|
|
16
16
|
import { NgSelectComponent, NgOptionTemplateDirective, NgLabelTemplateDirective, NgMultiLabelTemplateDirective } from '@ng-select/ng-select';
|
|
17
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';
|
|
18
20
|
|
|
19
21
|
class FilterState {
|
|
20
22
|
_groups = signal([], ...(ngDevMode ? [{ debugName: "_groups" }] : []));
|
|
21
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" }] : []));
|
|
22
61
|
groups = this._groups.asReadonly();
|
|
23
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" }] : []));
|
|
24
66
|
/** Initialize groups and seed draft from config defaults */
|
|
25
67
|
initialize(groups) {
|
|
26
68
|
this._groups.set(groups);
|
|
@@ -29,6 +71,7 @@ class FilterState {
|
|
|
29
71
|
initial[group.key] = this.buildInitialValue(group);
|
|
30
72
|
}
|
|
31
73
|
this._draft.set(initial);
|
|
74
|
+
this._hasChanges.set(false);
|
|
32
75
|
}
|
|
33
76
|
collapseHeader(key) {
|
|
34
77
|
const group = this._groups().find(g => g.key === key);
|
|
@@ -44,6 +87,7 @@ class FilterState {
|
|
|
44
87
|
/** Update a single filter's draft value */
|
|
45
88
|
updateValue(key, value) {
|
|
46
89
|
this._draft.update(draft => ({ ...draft, [key]: value }));
|
|
90
|
+
this._hasChanges.set(true);
|
|
47
91
|
}
|
|
48
92
|
/** Toggle a checkbox item in a checkbox filter */
|
|
49
93
|
toggleCheckbox(key, name, checked) {
|
|
@@ -79,6 +123,7 @@ class FilterState {
|
|
|
79
123
|
/** Reset draft to initial values from the current config */
|
|
80
124
|
reset() {
|
|
81
125
|
this.initialize(this._groups());
|
|
126
|
+
this._hasChanges.set(false);
|
|
82
127
|
}
|
|
83
128
|
/** Clear all draft values to empty/default states */
|
|
84
129
|
clear() {
|
|
@@ -87,13 +132,14 @@ class FilterState {
|
|
|
87
132
|
cleared[group.key] = this.buildEmptyValue(group);
|
|
88
133
|
}
|
|
89
134
|
this._draft.set(cleared);
|
|
135
|
+
this._hasChanges.set(false);
|
|
90
136
|
}
|
|
91
137
|
buildInitialValue(group) {
|
|
92
138
|
switch (group.filterType) {
|
|
93
139
|
case 'checkbox':
|
|
94
140
|
return {
|
|
95
141
|
filterType: 'checkbox',
|
|
96
|
-
selected: group.defaultSelected ??
|
|
142
|
+
selected: group.defaultSelected ?? [],
|
|
97
143
|
};
|
|
98
144
|
case 'radio':
|
|
99
145
|
return {
|
|
@@ -103,7 +149,7 @@ class FilterState {
|
|
|
103
149
|
case 'toggle':
|
|
104
150
|
return {
|
|
105
151
|
filterType: 'toggle',
|
|
106
|
-
checked: group.defaultSelected ??
|
|
152
|
+
checked: group.defaultSelected ?? false,
|
|
107
153
|
};
|
|
108
154
|
case 'select':
|
|
109
155
|
if (group.selectionType === 'single') {
|
|
@@ -145,10 +191,13 @@ class FilterState {
|
|
|
145
191
|
}
|
|
146
192
|
}
|
|
147
193
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
148
|
-
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' });
|
|
149
195
|
}
|
|
150
196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterState, decorators: [{
|
|
151
|
-
type: Injectable
|
|
197
|
+
type: Injectable,
|
|
198
|
+
args: [{
|
|
199
|
+
providedIn: 'root',
|
|
200
|
+
}]
|
|
152
201
|
}] });
|
|
153
202
|
|
|
154
203
|
const MULTIPLE_DISPLAY_TYPES = new Set(['tag', 'label']);
|
|
@@ -197,6 +246,7 @@ class FilterLeafComponent {
|
|
|
197
246
|
item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
|
|
198
247
|
/** whether the leaf is closable */
|
|
199
248
|
closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
|
|
249
|
+
isLastLeaf = input(false, ...(ngDevMode ? [{ debugName: "isLastLeaf" }] : []));
|
|
200
250
|
displayLabelInLeaf = computed(() => {
|
|
201
251
|
const item = this.item();
|
|
202
252
|
return item.filterType === 'checkbox' || item.filterType === 'radio' || item.filterType === 'toggle';
|
|
@@ -228,7 +278,7 @@ class FilterLeafComponent {
|
|
|
228
278
|
checkboxValue = computed(() => {
|
|
229
279
|
const checkboxItem = this.checkboxItem();
|
|
230
280
|
const checkboxValueByKey = {};
|
|
231
|
-
checkboxItem?.items.forEach(item => (checkboxValueByKey[item.name] =
|
|
281
|
+
checkboxItem?.items.forEach(item => (checkboxValueByKey[item.name] = false));
|
|
232
282
|
const value = this.filterState.getValue(this.item().key);
|
|
233
283
|
if (value && value.filterType === 'checkbox') {
|
|
234
284
|
value.selected.forEach(item => (checkboxValueByKey[item] = true));
|
|
@@ -261,7 +311,7 @@ class FilterLeafComponent {
|
|
|
261
311
|
this.filterState.setDateRangeValue(this.item().key, dateRange);
|
|
262
312
|
}
|
|
263
313
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
264
|
-
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, apInfo)], 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 color=\"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
|
|
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"] }] });
|
|
265
315
|
}
|
|
266
316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafComponent, decorators: [{
|
|
267
317
|
type: Component,
|
|
@@ -274,8 +324,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
274
324
|
FormsModule,
|
|
275
325
|
FilterLeafSelectComponent,
|
|
276
326
|
InputDatepickerComponent,
|
|
277
|
-
|
|
278
|
-
|
|
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 }] }] } });
|
|
279
330
|
|
|
280
331
|
class FilterDropdownComponent {
|
|
281
332
|
overlay = createDropdownOverlay();
|
|
@@ -288,6 +339,16 @@ class FilterDropdownComponent {
|
|
|
288
339
|
}
|
|
289
340
|
});
|
|
290
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" }] : []));
|
|
291
352
|
filterGroupTemplate = viewChild('filterGroupTemplate', ...(ngDevMode ? [{ debugName: "filterGroupTemplate" }] : []));
|
|
292
353
|
/** The filter groups to display in the dropdown */
|
|
293
354
|
items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
|
|
@@ -297,13 +358,18 @@ class FilterDropdownComponent {
|
|
|
297
358
|
closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
|
|
298
359
|
/** whether the mode is in preset mode */
|
|
299
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" }] : []));
|
|
300
363
|
/** Whether to show a backdrop that closes the dropdown when clicked */
|
|
301
364
|
showBackdrop = input(true, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
|
|
302
365
|
/** Whether the dropdown is disabled and cannot be opened */
|
|
303
366
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
304
367
|
/** Default position for the dropdown relative to the trigger element */
|
|
305
368
|
defaultPosition = input('right', ...(ngDevMode ? [{ debugName: "defaultPosition" }] : []));
|
|
306
|
-
|
|
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" }] : []));
|
|
307
373
|
resetFilterText = input('Reset filters', ...(ngDevMode ? [{ debugName: "resetFilterText" }] : []));
|
|
308
374
|
applyFiltersText = input('Apply filters', ...(ngDevMode ? [{ debugName: "applyFiltersText" }] : []));
|
|
309
375
|
clearFilterText = input('Clear filters', ...(ngDevMode ? [{ debugName: "clearFilterText" }] : []));
|
|
@@ -312,7 +378,9 @@ class FilterDropdownComponent {
|
|
|
312
378
|
/** Emits when the dropdown menu is closed */
|
|
313
379
|
closed = output();
|
|
314
380
|
/** Emits when save presets is clicked */
|
|
315
|
-
|
|
381
|
+
saveNewPresets = output();
|
|
382
|
+
/** Emits when save presets is clicked */
|
|
383
|
+
updatePresets = output();
|
|
316
384
|
/** Emits when filters are applied */
|
|
317
385
|
applyFilters = output();
|
|
318
386
|
/** Emits when user clicks on clear filter */
|
|
@@ -320,6 +388,24 @@ class FilterDropdownComponent {
|
|
|
320
388
|
/** Emits when user clicks on reset filter */
|
|
321
389
|
resetFilters = output();
|
|
322
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" }] : []));
|
|
323
409
|
/** Opens the dropdown menu at the specified trigger element */
|
|
324
410
|
open(triggerElement) {
|
|
325
411
|
const template = this.filterGroupTemplate();
|
|
@@ -360,19 +446,101 @@ class FilterDropdownComponent {
|
|
|
360
446
|
this.resetFilters.emit();
|
|
361
447
|
}
|
|
362
448
|
onSavePresets() {
|
|
363
|
-
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
|
+
}
|
|
364
463
|
}
|
|
365
464
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
366
|
-
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"] }] });
|
|
367
466
|
}
|
|
368
467
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownComponent, decorators: [{
|
|
369
468
|
type: Component,
|
|
370
|
-
args: [{ selector: 'ap-filter-dropdown', imports: [ButtonComponent, FilterLeafComponent], providers: [
|
|
371
|
-
}], 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"] }] } });
|
|
372
540
|
|
|
373
541
|
/**
|
|
374
542
|
* Generated bundle index. Do not edit.
|
|
375
543
|
*/
|
|
376
544
|
|
|
377
|
-
export { FilterDropdownComponent };
|
|
545
|
+
export { FilterDropdownButtonComponent, FilterDropdownComponent };
|
|
378
546
|
//# sourceMappingURL=agorapulse-ui-components-filter-dropdown.mjs.map
|