@agorapulse/ui-components 20.4.16 → 20.4.18
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.18.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +25 -13
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-labels-selector.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-labels-selector.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-select.mjs +24 -7
- package/fesm2022/agorapulse-ui-components-select.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 +28 -6
- package/index.d.ts +1 -1
- package/package.json +1 -1
- package/select/index.d.ts +5 -1
- package/agorapulse-ui-components-20.4.16.tgz +0 -0
|
Binary file
|
|
@@ -6,10 +6,10 @@ 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, apChevronDown as apChevronDown$1, apPlus, apRefresh, withSymbols, apFilter, apFilterFill } from '@agorapulse/ui-symbol';
|
|
9
|
+
import { SymbolComponent, apInfo, apReset, apChevronDown as apChevronDown$1, apPlus, apRefresh, apFeatureLock, 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, computed, Injectable, inject, input, Component, effect, untracked, viewChild, output } from '@angular/core';
|
|
12
|
+
import { signal, computed, Injectable, inject, input, Component, ChangeDetectionStrategy, 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';
|
|
@@ -43,7 +43,6 @@ class FilterState {
|
|
|
43
43
|
break;
|
|
44
44
|
case 'select':
|
|
45
45
|
if (value.selectionType === 'single' && value.selected) {
|
|
46
|
-
// TO FIX
|
|
47
46
|
count += 1;
|
|
48
47
|
}
|
|
49
48
|
else if (value.selectionType === 'multiple') {
|
|
@@ -142,9 +141,10 @@ class FilterState {
|
|
|
142
141
|
selected: group.defaultSelected ?? [],
|
|
143
142
|
};
|
|
144
143
|
case 'radio':
|
|
144
|
+
const firstItem = group.items[0].value;
|
|
145
145
|
return {
|
|
146
146
|
filterType: 'radio',
|
|
147
|
-
selected: group.defaultSelected ??
|
|
147
|
+
selected: group.defaultSelected ?? firstItem,
|
|
148
148
|
};
|
|
149
149
|
case 'toggle':
|
|
150
150
|
return {
|
|
@@ -217,7 +217,7 @@ class FilterLeafSelectComponent {
|
|
|
217
217
|
return value?.filterType === 'select' && value?.selectionType === 'multiple' ? value.selected : [];
|
|
218
218
|
}, ...(ngDevMode ? [{ debugName: "multipleSelectValue" }] : []));
|
|
219
219
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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" }] });
|
|
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", "pinnedItemsEnabled"] }, { 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" }] });
|
|
221
221
|
}
|
|
222
222
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafSelectComponent, decorators: [{
|
|
223
223
|
type: Component,
|
|
@@ -311,7 +311,7 @@ class FilterLeafComponent {
|
|
|
311
311
|
this.filterState.setDateRangeValue(this.item().key, dateRange);
|
|
312
312
|
}
|
|
313
313
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
|
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 (click)=\"onHeaderClick()\" [class.ap-filter-leaf__closable]=\"closable()\"\n [class.ap-filter-leaf__expanded]=\"(!closable() || item().expanded)\" class=\"ap-filter-leaf__header\">\n <div class=\"ap-filter-leaf__title\">\n <span>{{ item().title }}</span>\n @if (item().tooltipText) {\n <ap-symbol color=\"light-grey\" symbolId=\"info\" size=\"sm\" [apTooltip]=\"item().tooltipText\" />\n }\n </div>\n @if (closable()) {\n <div class=\"ap-filter-leaf__actions\" [class.ap-filter-leaf__chevron--rotated]=\"!item().expanded\">\n <ap-symbol symbolId=\"chevron-up\" size=\"sm\" />\n </div>\n }\n </div>\n\n @if ((!closable() || item().expanded)) {\n <div class=\"ap-filter-leaf__content\">\n @if (item().label && displayLabelInLeaf()) {\n <span class=\"ap-filter-leaf__label\">{{ item().label }}</span>\n }\n @switch(item().filterType) {\n @case ('checkbox') {\n @if (checkboxItem(); as vCheckboxItem) {\n @for (option of vCheckboxItem.items; track option.name) {\n <div class=\"ap-filter-leaf__option\">\n <ap-checkbox\n [name]=\"'checkbox-' + option.name\"\n [checked]=\"checkboxValue()[option.name]\"\n [disabled]=\"!!option.disabled\"\n (change)=\"onCheckboxChange(option.name, $event)\"\n >\n <span class=\"ap-filter-leaf__label\">{{ option.label }}</span>\n </ap-checkbox>\n </div>\n }\n }\n }\n @case ('radio') {\n @if (radioItem(); as vRadioItem) {\n @for (option of vRadioItem.items; track option.radioId) {\n <div class=\"ap-filter-leaf__option\">\n <ap-radio\n [radioId]=\"option.radioId\"\n [value]=\"option.value\"\n [disabled]=\"!!option.disabled\"\n [name]=\"item().key\"\n [ngModel]=\"radioValue()\"\n (ngModelChange)=\"onRadioClick($event)\"\n >\n <span class=\"ap-filter-leaf__label\">{{ option.label }}</span>\n </ap-radio>\n </div>\n }\n }\n }\n @case ('toggle') {\n @if (toggleItem(); as vToggleItem) {\n <div class=\"ap-filter-leaf__option\">\n <ap-toggle\n [name]=\"'toggle-' + vToggleItem.item.name\"\n [checked]=\"toggleValue()\"\n [disabled]=\"vToggleItem.item.disabled\"\n (change)=\"onToggleChange($event)\"\n />\n <span class=\"ap-filter-leaf__label\">{{ vToggleItem.item.label }}</span>\n </div>\n }\n }\n @case ('select') {\n @if (selectItem(); as vSelectItem) {\n <ap-filter-leaf-select [item]=\"vSelectItem\" />\n }\n }\n @case ('date-range') {\n @if (dateRangeItem(); as vDateRangeItem) {\n <ap-input-datepicker\n [label]=\"vDateRangeItem.label\"\n [mode]=\"DatepickerMode.Range\"\n [placeholder]=\"vDateRangeItem.placeholder ?? 'Select date range'\"\n [minDate]=\"vDateRangeItem.minDate\"\n [maxDate]=\"vDateRangeItem.maxDate\"\n [dateFormat]=\"vDateRangeItem.dateFormat ?? 'MMMM DD, YYYY'\"\n [selectedPeriod]=\"dateRangeValue()\"\n (periodChanged)=\"onDateRangeChange($event)\"\n />\n }\n }\n }\n </div>\n }\n\n</div>\n", styles: [".ap-filter-leaf{display:flex;flex-direction:column}.ap-filter-leaf.with-border-bottom{border-bottom:1px solid var(--ref-color-grey-10)}.ap-filter-leaf__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ref-spacing-sm)}.ap-filter-leaf__header.ap-filter-leaf__expanded{padding-bottom:var(--ref-spacing-xs)}.ap-filter-leaf__closable{cursor:pointer}.ap-filter-leaf__title{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1 0 0;color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__label{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__chevron--rotated{transform:rotate(180deg)}.ap-filter-leaf__content{display:flex;flex-direction:column;gap:var(--ref-spacing-xs);padding:0 var(--ref-spacing-sm) var(--ref-spacing-sm)}.ap-filter-leaf__option{display:flex;gap:var(--ref-spacing-xxs);align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: RadioComponent, selector: "ap-radio", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "labelPosition", "radioId", "formControlName", "value", "required", "name"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ToggleComponent, selector: "ap-toggle", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "labelPosition", "disabled", "checked", "required", "confirm", "confirmMessage", "confirmOk", "confirmCancel", "confirmTitle", "name"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FilterLeafSelectComponent, selector: "ap-filter-leaf-select", inputs: ["item"] }, { kind: "component", type: InputDatepickerComponent, selector: "ap-input-datepicker", inputs: ["mode", "label", "placeholder", "firstDayOfWeek", "locale", "dateFormat", "disabled", "minDate", "maxDate", "selectedDate", "selectedDates", "selectedPeriod", "i18n", "showRanges", "showCustomRangeLabel", "rangesConfig", "showBackdrop", "defaultPosition"], outputs: ["periodChanged", "dateSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
315
315
|
}
|
|
316
316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafComponent, decorators: [{
|
|
317
317
|
type: Component,
|
|
@@ -325,7 +325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
325
325
|
FilterLeafSelectComponent,
|
|
326
326
|
InputDatepickerComponent,
|
|
327
327
|
SymbolComponent,
|
|
328
|
-
], providers: [provideUiComponentsSymbols(apChevronDown, apInfo)], template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n <div
|
|
328
|
+
], providers: [provideUiComponentsSymbols(apChevronDown, apInfo)], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n <div (click)=\"onHeaderClick()\" [class.ap-filter-leaf__closable]=\"closable()\"\n [class.ap-filter-leaf__expanded]=\"(!closable() || item().expanded)\" class=\"ap-filter-leaf__header\">\n <div class=\"ap-filter-leaf__title\">\n <span>{{ item().title }}</span>\n @if (item().tooltipText) {\n <ap-symbol color=\"light-grey\" symbolId=\"info\" size=\"sm\" [apTooltip]=\"item().tooltipText\" />\n }\n </div>\n @if (closable()) {\n <div class=\"ap-filter-leaf__actions\" [class.ap-filter-leaf__chevron--rotated]=\"!item().expanded\">\n <ap-symbol symbolId=\"chevron-up\" size=\"sm\" />\n </div>\n }\n </div>\n\n @if ((!closable() || item().expanded)) {\n <div class=\"ap-filter-leaf__content\">\n @if (item().label && displayLabelInLeaf()) {\n <span class=\"ap-filter-leaf__label\">{{ item().label }}</span>\n }\n @switch(item().filterType) {\n @case ('checkbox') {\n @if (checkboxItem(); as vCheckboxItem) {\n @for (option of vCheckboxItem.items; track option.name) {\n <div class=\"ap-filter-leaf__option\">\n <ap-checkbox\n [name]=\"'checkbox-' + option.name\"\n [checked]=\"checkboxValue()[option.name]\"\n [disabled]=\"!!option.disabled\"\n (change)=\"onCheckboxChange(option.name, $event)\"\n >\n <span class=\"ap-filter-leaf__label\">{{ option.label }}</span>\n </ap-checkbox>\n </div>\n }\n }\n }\n @case ('radio') {\n @if (radioItem(); as vRadioItem) {\n @for (option of vRadioItem.items; track option.radioId) {\n <div class=\"ap-filter-leaf__option\">\n <ap-radio\n [radioId]=\"option.radioId\"\n [value]=\"option.value\"\n [disabled]=\"!!option.disabled\"\n [name]=\"item().key\"\n [ngModel]=\"radioValue()\"\n (ngModelChange)=\"onRadioClick($event)\"\n >\n <span class=\"ap-filter-leaf__label\">{{ option.label }}</span>\n </ap-radio>\n </div>\n }\n }\n }\n @case ('toggle') {\n @if (toggleItem(); as vToggleItem) {\n <div class=\"ap-filter-leaf__option\">\n <ap-toggle\n [name]=\"'toggle-' + vToggleItem.item.name\"\n [checked]=\"toggleValue()\"\n [disabled]=\"vToggleItem.item.disabled\"\n (change)=\"onToggleChange($event)\"\n />\n <span class=\"ap-filter-leaf__label\">{{ vToggleItem.item.label }}</span>\n </div>\n }\n }\n @case ('select') {\n @if (selectItem(); as vSelectItem) {\n <ap-filter-leaf-select [item]=\"vSelectItem\" />\n }\n }\n @case ('date-range') {\n @if (dateRangeItem(); as vDateRangeItem) {\n <ap-input-datepicker\n [label]=\"vDateRangeItem.label\"\n [mode]=\"DatepickerMode.Range\"\n [placeholder]=\"vDateRangeItem.placeholder ?? 'Select date range'\"\n [minDate]=\"vDateRangeItem.minDate\"\n [maxDate]=\"vDateRangeItem.maxDate\"\n [dateFormat]=\"vDateRangeItem.dateFormat ?? 'MMMM DD, YYYY'\"\n [selectedPeriod]=\"dateRangeValue()\"\n (periodChanged)=\"onDateRangeChange($event)\"\n />\n }\n }\n }\n </div>\n }\n\n</div>\n", styles: [".ap-filter-leaf{display:flex;flex-direction:column}.ap-filter-leaf.with-border-bottom{border-bottom:1px solid var(--ref-color-grey-10)}.ap-filter-leaf__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ref-spacing-sm)}.ap-filter-leaf__header.ap-filter-leaf__expanded{padding-bottom:var(--ref-spacing-xs)}.ap-filter-leaf__closable{cursor:pointer}.ap-filter-leaf__title{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1 0 0;color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__label{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__chevron--rotated{transform:rotate(180deg)}.ap-filter-leaf__content{display:flex;flex-direction:column;gap:var(--ref-spacing-xs);padding:0 var(--ref-spacing-sm) var(--ref-spacing-sm)}.ap-filter-leaf__option{display:flex;gap:var(--ref-spacing-xxs);align-items:center;justify-content:flex-start}\n"] }]
|
|
329
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 }] }] } });
|
|
330
330
|
|
|
331
331
|
class FilterDropdownComponent {
|
|
@@ -356,6 +356,8 @@ class FilterDropdownComponent {
|
|
|
356
356
|
needApplyButton = input(true, ...(ngDevMode ? [{ debugName: "needApplyButton" }] : []));
|
|
357
357
|
/** 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. */
|
|
358
358
|
closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
|
|
359
|
+
/** whether the feature to save presets is locked for the org */
|
|
360
|
+
presetsFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "presetsFeatureLocked" }] : []));
|
|
359
361
|
/** whether the mode is in preset mode */
|
|
360
362
|
savePresetsMode = input(false, ...(ngDevMode ? [{ debugName: "savePresetsMode" }] : []));
|
|
361
363
|
/** whether the user is currently editing presets. Only necessary if savePresetsMode is at true */
|
|
@@ -377,6 +379,8 @@ class FilterDropdownComponent {
|
|
|
377
379
|
opened = output();
|
|
378
380
|
/** Emits when the dropdown menu is closed */
|
|
379
381
|
closed = output();
|
|
382
|
+
/** Emits when save presets is clicked but is feature locked */
|
|
383
|
+
presetsLockedClicked = output();
|
|
380
384
|
/** Emits when save presets is clicked */
|
|
381
385
|
saveNewPresets = output();
|
|
382
386
|
/** Emits when save presets is clicked */
|
|
@@ -446,6 +450,10 @@ class FilterDropdownComponent {
|
|
|
446
450
|
this.resetFilters.emit();
|
|
447
451
|
}
|
|
448
452
|
onSavePresets() {
|
|
453
|
+
if (this.presetsFeatureLocked()) {
|
|
454
|
+
this.presetsLockedClicked.emit();
|
|
455
|
+
return;
|
|
456
|
+
}
|
|
449
457
|
this.saveNewPresets.emit(this.filterState.getSnapshot());
|
|
450
458
|
}
|
|
451
459
|
onUpdatePresets() {
|
|
@@ -462,12 +470,12 @@ class FilterDropdownComponent {
|
|
|
462
470
|
}
|
|
463
471
|
}
|
|
464
472
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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"] }] });
|
|
473
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterDropdownComponent, isStandalone: true, selector: "ap-filter-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, needApplyButton: { classPropertyName: "needApplyButton", publicName: "needApplyButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, presetsFeatureLocked: { classPropertyName: "presetsFeatureLocked", publicName: "presetsFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, savePresetsMode: { classPropertyName: "savePresetsMode", publicName: "savePresetsMode", isSignal: true, isRequired: false, transformFunction: null }, editingPresetsMode: { classPropertyName: "editingPresetsMode", publicName: "editingPresetsMode", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null }, saveNewPresetsText: { classPropertyName: "saveNewPresetsText", publicName: "saveNewPresetsText", isSignal: true, isRequired: false, transformFunction: null }, saveAsNewPresetText: { classPropertyName: "saveAsNewPresetText", publicName: "saveAsNewPresetText", isSignal: true, isRequired: false, transformFunction: null }, savePresetText: { classPropertyName: "savePresetText", publicName: "savePresetText", isSignal: true, isRequired: false, transformFunction: null }, updateExistingPresetText: { classPropertyName: "updateExistingPresetText", publicName: "updateExistingPresetText", isSignal: true, isRequired: false, transformFunction: null }, resetFilterText: { classPropertyName: "resetFilterText", publicName: "resetFilterText", isSignal: true, isRequired: false, transformFunction: null }, applyFiltersText: { classPropertyName: "applyFiltersText", publicName: "applyFiltersText", isSignal: true, isRequired: false, transformFunction: null }, clearFilterText: { classPropertyName: "clearFilterText", publicName: "clearFilterText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", presetsLockedClicked: "presetsLockedClicked", saveNewPresets: "saveNewPresets", updatePresets: "updatePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters" }, providers: [provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh, apFeatureLock)], viewQueries: [{ propertyName: "filterGroupTemplate", first: true, predicate: ["filterGroupTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #filterGroupTemplate>\n <div\n class=\"ap-filter-dropdown\"\n role=\"menu\"\n tabindex=\"-1\"\n aria-label=\"Filter dropdown\">\n\n <div class=\"ap-filter-dropdown__content\">\n @for (item of filterState.groups(); let last = $last; track item.key) {\n <ap-filter-leaf [item]=\"item\" [closable]=\"closable()\" [isLastLeaf]=\"last\" />\n }\n </div>\n\n <div class=\"ap-filter-dropdown__footer\">\n @if (savePresetsMode()) {\n <div class=\"ap-filter-dropdown__footer--presets\">\n @if (!editingPresetsMode() || presetsFeatureLocked()) {\n <ap-button\n name=\"filter-dropdown-save-preset\"\n [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n [disabled]=\"filterState.buttonsDisabled() && !presetsFeatureLocked()\"\n [locked]=\"presetsFeatureLocked()\"\n (click)=\"onSavePresets()\">\n {{ saveNewPresetsText() }}\n </ap-button>\n } @else {\n <ap-button\n name=\"filter-dropdown-edit-presets\"\n symbolId=\"chevron-down\"\n symbolPosition=\"right\"\n [apDropdownTrigger]=\"updatePresetsDropdown\"\n [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n >\n {{ savePresetText() }}\n </ap-button>\n }\n\n <ap-button\n name=\"filter-dropdown-reset-filters\"\n [symbolId]=\"'reset'\"\n [symbolPosition]=\"'left'\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n (click)=\"onResetFilters()\">\n {{ resetFilterText() }}\n </ap-button>\n </div>\n } @else {\n <div class=\"ap-filter-dropdown__footer--apply\">\n <ap-button\n name=\"filter-dropdown-clear-filters\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n (click)=\"onClearFilters()\">\n {{ clearFilterText() }}\n </ap-button>\n\n @if (needApplyButton()) {\n <ap-button\n name=\"filter-dropdown-apply-filters\"\n [config]=\"{ color: 'blue', style: 'primary' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n (click)=\"onApplyFilters()\">\n {{ applyFiltersText() }}\n </ap-button>\n }\n </div>\n }\n </div>\n </div>\n\n</ng-template>\n\n<ap-action-dropdown\n #updatePresetsDropdown\n (itemClick)=\"onActionDropdownItemClick($event)\"\n [items]=\"savePresetsDropdownItems()\"\n/>\n", styles: [":host{display:none}.ap-filter-dropdown{display:flex;flex-direction:column;width:420px;background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);outline:none;max-height:min(90vh,750px)}.ap-filter-dropdown__footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__content{overflow-x:hidden;overflow-y:auto}.ap-filter-dropdown__footer{border-top:1px solid var(--comp-action-dropdown-divider-color)}.ap-filter-dropdown__footer--presets{display:flex;justify-content:space-between}.ap-filter-dropdown__footer--apply{display:flex;justify-content:flex-end;gap:var(--ref-spacing-sm)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: FilterLeafComponent, selector: "ap-filter-leaf", inputs: ["item", "closable", "isLastLeaf"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: ActionDropdownComponent, selector: "ap-action-dropdown", inputs: ["items", "largeModeEnabled", "customWidth", "showBackdrop", "disabled", "defaultPosition"], outputs: ["opened", "closed", "itemClick"] }] });
|
|
466
474
|
}
|
|
467
475
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownComponent, decorators: [{
|
|
468
476
|
type: Component,
|
|
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"] }] } });
|
|
477
|
+
args: [{ selector: 'ap-filter-dropdown', imports: [ButtonComponent, FilterLeafComponent, DropdownTriggerDirective, ActionDropdownComponent], providers: [provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh, apFeatureLock)], template: "<ng-template #filterGroupTemplate>\n <div\n class=\"ap-filter-dropdown\"\n role=\"menu\"\n tabindex=\"-1\"\n aria-label=\"Filter dropdown\">\n\n <div class=\"ap-filter-dropdown__content\">\n @for (item of filterState.groups(); let last = $last; track item.key) {\n <ap-filter-leaf [item]=\"item\" [closable]=\"closable()\" [isLastLeaf]=\"last\" />\n }\n </div>\n\n <div class=\"ap-filter-dropdown__footer\">\n @if (savePresetsMode()) {\n <div class=\"ap-filter-dropdown__footer--presets\">\n @if (!editingPresetsMode() || presetsFeatureLocked()) {\n <ap-button\n name=\"filter-dropdown-save-preset\"\n [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n [disabled]=\"filterState.buttonsDisabled() && !presetsFeatureLocked()\"\n [locked]=\"presetsFeatureLocked()\"\n (click)=\"onSavePresets()\">\n {{ saveNewPresetsText() }}\n </ap-button>\n } @else {\n <ap-button\n name=\"filter-dropdown-edit-presets\"\n symbolId=\"chevron-down\"\n symbolPosition=\"right\"\n [apDropdownTrigger]=\"updatePresetsDropdown\"\n [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n >\n {{ savePresetText() }}\n </ap-button>\n }\n\n <ap-button\n name=\"filter-dropdown-reset-filters\"\n [symbolId]=\"'reset'\"\n [symbolPosition]=\"'left'\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n (click)=\"onResetFilters()\">\n {{ resetFilterText() }}\n </ap-button>\n </div>\n } @else {\n <div class=\"ap-filter-dropdown__footer--apply\">\n <ap-button\n name=\"filter-dropdown-clear-filters\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n (click)=\"onClearFilters()\">\n {{ clearFilterText() }}\n </ap-button>\n\n @if (needApplyButton()) {\n <ap-button\n name=\"filter-dropdown-apply-filters\"\n [config]=\"{ color: 'blue', style: 'primary' }\"\n [disabled]=\"filterState.buttonsDisabled()\"\n (click)=\"onApplyFilters()\">\n {{ applyFiltersText() }}\n </ap-button>\n }\n </div>\n }\n </div>\n </div>\n\n</ng-template>\n\n<ap-action-dropdown\n #updatePresetsDropdown\n (itemClick)=\"onActionDropdownItemClick($event)\"\n [items]=\"savePresetsDropdownItems()\"\n/>\n", styles: [":host{display:none}.ap-filter-dropdown{display:flex;flex-direction:column;width:420px;background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);outline:none;max-height:min(90vh,750px)}.ap-filter-dropdown__footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__content{overflow-x:hidden;overflow-y:auto}.ap-filter-dropdown__footer{border-top:1px solid var(--comp-action-dropdown-divider-color)}.ap-filter-dropdown__footer--presets{display:flex;justify-content:space-between}.ap-filter-dropdown__footer--apply{display:flex;justify-content:flex-end;gap:var(--ref-spacing-sm)}\n"] }]
|
|
478
|
+
}], propDecorators: { filterGroupTemplate: [{ type: i0.ViewChild, args: ['filterGroupTemplate', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], needApplyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needApplyButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], presetsFeatureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetsFeatureLocked", required: false }] }], savePresetsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetsMode", required: false }] }], editingPresetsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editingPresetsMode", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", required: false }] }], saveNewPresetsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveNewPresetsText", required: false }] }], saveAsNewPresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveAsNewPresetText", required: false }] }], savePresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetText", required: false }] }], updateExistingPresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateExistingPresetText", required: false }] }], resetFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterText", required: false }] }], applyFiltersText: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyFiltersText", required: false }] }], clearFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearFilterText", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], presetsLockedClicked: [{ type: i0.Output, args: ["presetsLockedClicked"] }], saveNewPresets: [{ type: i0.Output, args: ["saveNewPresets"] }], updatePresets: [{ type: i0.Output, args: ["updatePresets"] }], applyFilters: [{ type: i0.Output, args: ["applyFilters"] }], clearFilters: [{ type: i0.Output, args: ["clearFilters"] }], resetFilters: [{ type: i0.Output, args: ["resetFilters"] }] } });
|
|
471
479
|
|
|
472
480
|
class FilterDropdownButtonComponent {
|
|
473
481
|
filterState = inject(FilterState);
|
|
@@ -482,6 +490,8 @@ class FilterDropdownButtonComponent {
|
|
|
482
490
|
needApplyButton = input(true, ...(ngDevMode ? [{ debugName: "needApplyButton" }] : []));
|
|
483
491
|
/** 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
492
|
closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
|
|
493
|
+
/** whether the feature to save presets is locked for the org */
|
|
494
|
+
presetsFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "presetsFeatureLocked" }] : []));
|
|
485
495
|
/** whether the mode is in preset mode */
|
|
486
496
|
savePresetsMode = input(false, ...(ngDevMode ? [{ debugName: "savePresetsMode" }] : []));
|
|
487
497
|
/** whether the user is currently editing presets. Only necessary if savePresetsMode is at true */
|
|
@@ -503,6 +513,8 @@ class FilterDropdownButtonComponent {
|
|
|
503
513
|
opened = output();
|
|
504
514
|
/** Emits when the dropdown menu is closed */
|
|
505
515
|
closed = output();
|
|
516
|
+
/** Emits when save presets is clicked but is feature locked */
|
|
517
|
+
presetsLockedClicked = output();
|
|
506
518
|
/** Emits when save presets is clicked */
|
|
507
519
|
saveNewPresets = output();
|
|
508
520
|
/** Emits when save presets is clicked */
|
|
@@ -531,12 +543,12 @@ class FilterDropdownButtonComponent {
|
|
|
531
543
|
this.updatePresets.emit(this.filterState.getSnapshot());
|
|
532
544
|
}
|
|
533
545
|
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"] }] });
|
|
546
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterDropdownButtonComponent, isStandalone: true, selector: "ap-filter-dropdown-button", inputs: { buttonFilterText: { classPropertyName: "buttonFilterText", publicName: "buttonFilterText", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, needApplyButton: { classPropertyName: "needApplyButton", publicName: "needApplyButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, presetsFeatureLocked: { classPropertyName: "presetsFeatureLocked", publicName: "presetsFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, savePresetsMode: { classPropertyName: "savePresetsMode", publicName: "savePresetsMode", isSignal: true, isRequired: false, transformFunction: null }, editingPresetsMode: { classPropertyName: "editingPresetsMode", publicName: "editingPresetsMode", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null }, saveNewPresetsText: { classPropertyName: "saveNewPresetsText", publicName: "saveNewPresetsText", isSignal: true, isRequired: false, transformFunction: null }, saveAsNewPresetText: { classPropertyName: "saveAsNewPresetText", publicName: "saveAsNewPresetText", isSignal: true, isRequired: false, transformFunction: null }, savePresetText: { classPropertyName: "savePresetText", publicName: "savePresetText", isSignal: true, isRequired: false, transformFunction: null }, updateExistingPresetText: { classPropertyName: "updateExistingPresetText", publicName: "updateExistingPresetText", isSignal: true, isRequired: false, transformFunction: null }, resetFilterText: { classPropertyName: "resetFilterText", publicName: "resetFilterText", isSignal: true, isRequired: false, transformFunction: null }, applyFiltersText: { classPropertyName: "applyFiltersText", publicName: "applyFiltersText", isSignal: true, isRequired: false, transformFunction: null }, clearFilterText: { classPropertyName: "clearFilterText", publicName: "clearFilterText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", presetsLockedClicked: "presetsLockedClicked", saveNewPresets: "saveNewPresets", updatePresets: "updatePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters" }, providers: [withSymbols(apFilter, apFilterFill)], ngImport: i0, template: "<ap-button\n [apDropdownTrigger]=\"filterDropdown\"\n [config]=\"{ style: 'stroked', color: isFilterCountActive() ? 'blue' : 'grey' }\"\n ariaLabel=\"Button toggling filters\"\n name=\"toggle-filter\"\n symbolPosition=\"left\">\n <ap-symbol [symbolId]=\"isFilterCountActive() ? 'filter_fill' : 'filter'\" />\n @if (isFilterCountActive()) {\n <ap-counter\n size=\"big\"\n color=\"blue\"\n [background]=\"true\">\n {{ activeFilterCount() }}\n </ap-counter>\n }\n {{ buttonFilterText() }}\n</ap-button>\n\n<ap-filter-dropdown\n #filterDropdown\n (applyFilters)=\"applyFilters.emit($event)\"\n (clearFilters)=\"clearFilters.emit()\"\n (closed)=\"closed.emit()\"\n (opened)=\"opened.emit()\"\n (resetFilters)=\"resetFilters.emit()\"\n (saveNewPresets)=\"saveNewPresets.emit($event)\"\n (updatePresets)=\"updatePresets.emit($event)\"\n (presetsLockedClicked)=\"presetsLockedClicked.emit()\"\n [presetsFeatureLocked]=\"presetsFeatureLocked()\"\n [applyFiltersText]=\"applyFiltersText()\"\n [clearFilterText]=\"clearFilterText()\"\n [closable]=\"closable()\"\n [defaultPosition]=\"defaultPosition()\"\n [disabled]=\"disabled()\"\n [editingPresetsMode]=\"editingPresetsMode()\"\n [items]=\"items()\"\n [needApplyButton]=\"needApplyButton()\"\n [resetFilterText]=\"resetFilterText()\"\n [saveAsNewPresetText]=\"saveAsNewPresetText()\"\n [saveNewPresetsText]=\"saveNewPresetsText()\"\n [savePresetText]=\"savePresetText()\"\n [savePresetsMode]=\"savePresetsMode()\"\n [showBackdrop]=\"showBackdrop()\"\n [updateExistingPresetText]=\"updateExistingPresetText()\" />\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: FilterDropdownComponent, selector: "ap-filter-dropdown", inputs: ["items", "needApplyButton", "closable", "presetsFeatureLocked", "savePresetsMode", "editingPresetsMode", "showBackdrop", "disabled", "defaultPosition", "saveNewPresetsText", "saveAsNewPresetText", "savePresetText", "updateExistingPresetText", "resetFilterText", "applyFiltersText", "clearFilterText"], outputs: ["opened", "closed", "presetsLockedClicked", "saveNewPresets", "updatePresets", "applyFilters", "clearFilters", "resetFilters"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }] });
|
|
535
547
|
}
|
|
536
548
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownButtonComponent, decorators: [{
|
|
537
549
|
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"] }] } });
|
|
550
|
+
args: [{ selector: 'ap-filter-dropdown-button', imports: [ButtonComponent, DropdownTriggerDirective, SymbolComponent, FilterDropdownComponent, CounterComponent], providers: [withSymbols(apFilter, apFilterFill)], template: "<ap-button\n [apDropdownTrigger]=\"filterDropdown\"\n [config]=\"{ style: 'stroked', color: isFilterCountActive() ? 'blue' : 'grey' }\"\n ariaLabel=\"Button toggling filters\"\n name=\"toggle-filter\"\n symbolPosition=\"left\">\n <ap-symbol [symbolId]=\"isFilterCountActive() ? 'filter_fill' : 'filter'\" />\n @if (isFilterCountActive()) {\n <ap-counter\n size=\"big\"\n color=\"blue\"\n [background]=\"true\">\n {{ activeFilterCount() }}\n </ap-counter>\n }\n {{ buttonFilterText() }}\n</ap-button>\n\n<ap-filter-dropdown\n #filterDropdown\n (applyFilters)=\"applyFilters.emit($event)\"\n (clearFilters)=\"clearFilters.emit()\"\n (closed)=\"closed.emit()\"\n (opened)=\"opened.emit()\"\n (resetFilters)=\"resetFilters.emit()\"\n (saveNewPresets)=\"saveNewPresets.emit($event)\"\n (updatePresets)=\"updatePresets.emit($event)\"\n (presetsLockedClicked)=\"presetsLockedClicked.emit()\"\n [presetsFeatureLocked]=\"presetsFeatureLocked()\"\n [applyFiltersText]=\"applyFiltersText()\"\n [clearFilterText]=\"clearFilterText()\"\n [closable]=\"closable()\"\n [defaultPosition]=\"defaultPosition()\"\n [disabled]=\"disabled()\"\n [editingPresetsMode]=\"editingPresetsMode()\"\n [items]=\"items()\"\n [needApplyButton]=\"needApplyButton()\"\n [resetFilterText]=\"resetFilterText()\"\n [saveAsNewPresetText]=\"saveAsNewPresetText()\"\n [saveNewPresetsText]=\"saveNewPresetsText()\"\n [savePresetText]=\"savePresetText()\"\n [savePresetsMode]=\"savePresetsMode()\"\n [showBackdrop]=\"showBackdrop()\"\n [updateExistingPresetText]=\"updateExistingPresetText()\" />\n" }]
|
|
551
|
+
}], propDecorators: { buttonFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonFilterText", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], needApplyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needApplyButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], presetsFeatureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetsFeatureLocked", required: false }] }], savePresetsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetsMode", required: false }] }], editingPresetsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editingPresetsMode", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", required: false }] }], saveNewPresetsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveNewPresetsText", required: false }] }], saveAsNewPresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveAsNewPresetText", required: false }] }], savePresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetText", required: false }] }], updateExistingPresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateExistingPresetText", required: false }] }], resetFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterText", required: false }] }], applyFiltersText: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyFiltersText", required: false }] }], clearFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearFilterText", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], presetsLockedClicked: [{ type: i0.Output, args: ["presetsLockedClicked"] }], saveNewPresets: [{ type: i0.Output, args: ["saveNewPresets"] }], updatePresets: [{ type: i0.Output, args: ["updatePresets"] }], applyFilters: [{ type: i0.Output, args: ["applyFilters"] }], clearFilters: [{ type: i0.Output, args: ["clearFilters"] }], resetFilters: [{ type: i0.Output, args: ["resetFilters"] }] } });
|
|
540
552
|
|
|
541
553
|
/**
|
|
542
554
|
* Generated bundle index. Do not edit.
|