@agorapulse/ui-components 20.4.17 → 20.4.19
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.19.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +34 -18
- 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/filter-dropdown/index.d.ts +16 -5
- package/package.json +1 -1
- package/select/index.d.ts +5 -1
- package/agorapulse-ui-components-20.4.17.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,
|
|
9
|
+
import { SymbolComponent, apInfo, apFeatureLock, 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, computed, Injectable, inject, input, Component, ChangeDetectionStrategy, effect, untracked, viewChild
|
|
12
|
+
import { signal, computed, Injectable, inject, input, output, Component, ChangeDetectionStrategy, effect, untracked, viewChild } 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';
|
|
@@ -204,6 +204,8 @@ const MULTIPLE_DISPLAY_TYPES = new Set(['tag', 'label']);
|
|
|
204
204
|
class FilterLeafSelectComponent {
|
|
205
205
|
filterState = inject(FilterState);
|
|
206
206
|
item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
|
|
207
|
+
/** Event emitted when a select item feature locked is clicked */
|
|
208
|
+
lockedFeatureClicked = output();
|
|
207
209
|
multipleDisplayType = computed(() => {
|
|
208
210
|
const dt = this.item().displayType;
|
|
209
211
|
return MULTIPLE_DISPLAY_TYPES.has(dt) ? dt : 'label';
|
|
@@ -217,7 +219,7 @@ class FilterLeafSelectComponent {
|
|
|
217
219
|
return value?.filterType === 'select' && value?.selectionType === 'multiple' ? value.selected : [];
|
|
218
220
|
}, ...(ngDevMode ? [{ debugName: "multipleSelectValue" }] : []));
|
|
219
221
|
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" }] });
|
|
222
|
+
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 } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, 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 [disabled]=\"!!selectItem.featureLocked\"\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 [isFeatureLocked]=\"item.featureLocked\"\n (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\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 [isFeatureLocked]=\"item.featureLocked\"\n (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\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 [isFeatureLocked]=\"item.featureLocked\"\n (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\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 [isFeatureLocked]=\"item.featureLocked\"\n (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\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
223
|
}
|
|
222
224
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafSelectComponent, decorators: [{
|
|
223
225
|
type: Component,
|
|
@@ -236,8 +238,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
236
238
|
NgLabelTemplateDirective,
|
|
237
239
|
NgMultiLabelTemplateDirective,
|
|
238
240
|
FormFieldComponent,
|
|
239
|
-
], template: "@let selectItem = item();\n<div class=\"ap-filter-leaf__option\">\n <ap-form-field>\n @if (selectItem.label) {\n <label for=\"select-{{ selectItem.key }}\">\n {{ selectItem.label }}\n </label>\n }\n @if (selectItem.selectionType === 'single') {\n <ng-select\n id=\"select-{{ selectItem.key }}\"\n apSelectSingle\n bindLabel=\"label\"\n bindValue=\"value\"\n [items]=\"selectItem.items\"\n [placeholder]=\"selectItem.placeholder ?? 'Select an option'\"\n [inlineLabel]=\"selectItem.inlineLabel\"\n [ngModel]=\"singleSelectValue()\"\n (ngModelChange)=\"filterState.setSingleSelectValue(selectItem.key, $event)\"\n >\n <ng-template\n let-item=\"item\"\n ng-label-tmp>\n <ap-select-label-single\n [displayType]=\"selectItem.displayType\"\n [avatarUrl]=\"item.avatarUrl\"\n [network]=\"item.network\"\n [label]=\"item.label\" />\n </ng-template>\n\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n @if (item.caption) {\n <ap-dropdown-item-single-two-lines\n [caption]=\"item$.caption\"\n [selected]=\"item$.selected\"\n [text]=\"item$.label\"\n [avatarUrl]=\"item$.avatarUrl\"\n [network]=\"item$.network\"\n [symbolId]=\"item$.symbolId\"\n />\n } @else {\n <ap-dropdown-item-single-one-line\n [selected]=\"item$.selected\"\n [text]=\"item.label\"\n [avatarUrl]=\"item.avatarUrl\"\n [network]=\"item.network\"\n [symbolId]=\"item.symbolId\"\n />\n }\n\n </ng-template>\n\n </ng-select>\n } @else {\n <ng-select\n id=\"select-{{ selectItem.key }}\"\n apSelectMultiple\n bindLabel=\"label\"\n bindValue=\"value\"\n [items]=\"selectItem.items\"\n [placeholder]=\"selectItem.placeholder ?? 'Select an option'\"\n [inlineLabel]=\"selectItem.inlineLabel\"\n [ngModel]=\"multipleSelectValue()\"\n (ngModelChange)=\"filterState.setMultipleSelectValue(selectItem.key, $event)\">\n <ng-template\n let-items=\"items\"\n let-clear=\"clear\"\n ng-multi-label-tmp>\n <ap-select-label-multiple\n bindValue=\"value\"\n bindLabel=\"label\"\n [displayType]=\"multipleDisplayType()\"\n [selectedItems]=\"items\"\n (removeItem)=\"clear($event)\"\n />\n </ng-template>\n\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n @if (item.caption) {\n <ap-dropdown-item-multiple-two-lines\n [selected]=\"item$.selected\"\n [onlyText]=\"selectItem.onlyText ?? 'Only'\"\n [caption]=\"item.caption\"\n [text]=\"item.label\"\n [htmlId]=\"item$.htmlId\"\n [avatarUrl]=\"item.avatarUrl\"\n [network]=\"item.network\"\n [symbolId]=\"item.symbolId\"\n />\n } @else {\n <ap-dropdown-item-multiple-one-line\n [onlyText]=\"selectItem.onlyText ?? 'Only'\"\n [selected]=\"item$.selected\"\n [htmlId]=\"item$.htmlId\"\n [text]=\"item.label\"\n [avatarUrl]=\"item.avatarUrl\"\n [network]=\"item.network\"\n [symbolId]=\"item.symbolId\"\n />\n }\n </ng-template>\n </ng-select>\n }\n </ap-form-field>\n</div>\n" }]
|
|
240
|
-
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
|
|
241
|
+
], 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 [disabled]=\"!!selectItem.featureLocked\"\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 [isFeatureLocked]=\"item.featureLocked\"\n (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\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 [isFeatureLocked]=\"item.featureLocked\"\n (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\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 [isFeatureLocked]=\"item.featureLocked\"\n (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\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 [isFeatureLocked]=\"item.featureLocked\"\n (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\n />\n }\n </ng-template>\n </ng-select>\n }\n </ap-form-field>\n</div>\n" }]
|
|
242
|
+
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }] } });
|
|
241
243
|
|
|
242
244
|
class FilterLeafComponent {
|
|
243
245
|
DatepickerMode = DatepickerMode;
|
|
@@ -247,6 +249,10 @@ class FilterLeafComponent {
|
|
|
247
249
|
/** whether the leaf is closable */
|
|
248
250
|
closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
|
|
249
251
|
isLastLeaf = input(false, ...(ngDevMode ? [{ debugName: "isLastLeaf" }] : []));
|
|
252
|
+
/** Event emitted when a select item feature locked is clicked */
|
|
253
|
+
lockedFeatureClicked = output();
|
|
254
|
+
/** Event emitted when a group with locked feature is clicked */
|
|
255
|
+
filterDropdownGroupLockedClicked = output();
|
|
250
256
|
displayLabelInLeaf = computed(() => {
|
|
251
257
|
const item = this.item();
|
|
252
258
|
return item.filterType === 'checkbox' || item.filterType === 'radio' || item.filterType === 'toggle';
|
|
@@ -294,9 +300,12 @@ class FilterLeafComponent {
|
|
|
294
300
|
return value?.filterType === 'date-range' ? value.selectedPeriod : { startDate: undefined, endDate: undefined };
|
|
295
301
|
}, ...(ngDevMode ? [{ debugName: "dateRangeValue" }] : []));
|
|
296
302
|
onHeaderClick() {
|
|
297
|
-
if (this.closable()) {
|
|
303
|
+
if (this.closable() || !this.item().featureLocked) {
|
|
298
304
|
this.filterState.collapseHeader(this.item().key);
|
|
299
305
|
}
|
|
306
|
+
if (this.item().featureLocked) {
|
|
307
|
+
this.filterDropdownGroupLockedClicked.emit(this.item());
|
|
308
|
+
}
|
|
300
309
|
}
|
|
301
310
|
onCheckboxChange(name, checked) {
|
|
302
311
|
this.filterState.toggleCheckbox(this.item().key, name, checked);
|
|
@@ -311,7 +320,7 @@ class FilterLeafComponent {
|
|
|
311
320
|
this.filterState.setDateRangeValue(this.item().key, dateRange);
|
|
312
321
|
}
|
|
313
322
|
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
|
|
323
|
+
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 } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked", filterDropdownGroupLockedClicked: "filterDropdownGroupLockedClicked" }, providers: [provideUiComponentsSymbols(apChevronDown, apInfo, apFeatureLock)], ngImport: i0, template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n <div\n (click)=\"onHeaderClick()\"\n (keyup.enter)=\"onHeaderClick()\"\n [apTooltipDisabled]=\"!item().featureLockTooltipText\"\n [apTooltip]=\"item().featureLockTooltipText\"\n [class.ap-filter-leaf__closable]=\"closable() || item().featureLocked\"\n [class.ap-filter-leaf__expanded]=\"(!closable() || item().expanded) && (!item().featureLocked || !closable())\"\n class=\"ap-filter-leaf__header\" tabindex=\"0\">\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 (item().featureLocked) {\n <div class=\"ap-filter-leaf__actions\">\n <ap-symbol color=\"purple\" symbolId=\"feature-lock\" size=\"sm\" />\n </div>\n } @else 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) && (!item().featureLocked || !closable())) {\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 || item().featureLocked\"\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 || !!item().featureLocked\"\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 || item().featureLocked\"\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 (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n }\n }\n @case ('date-range') {\n @if (dateRangeItem(); as vDateRangeItem) {\n <ap-input-datepicker\n [disabled]=\"!!item().featureLocked\"\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{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"], outputs: ["lockedFeatureClicked"] }, { 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
324
|
}
|
|
316
325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterLeafComponent, decorators: [{
|
|
317
326
|
type: Component,
|
|
@@ -325,8 +334,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
325
334
|
FilterLeafSelectComponent,
|
|
326
335
|
InputDatepickerComponent,
|
|
327
336
|
SymbolComponent,
|
|
328
|
-
|
|
329
|
-
|
|
337
|
+
SymbolComponent,
|
|
338
|
+
], providers: [provideUiComponentsSymbols(apChevronDown, apInfo, apFeatureLock)], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n <div\n (click)=\"onHeaderClick()\"\n (keyup.enter)=\"onHeaderClick()\"\n [apTooltipDisabled]=\"!item().featureLockTooltipText\"\n [apTooltip]=\"item().featureLockTooltipText\"\n [class.ap-filter-leaf__closable]=\"closable() || item().featureLocked\"\n [class.ap-filter-leaf__expanded]=\"(!closable() || item().expanded) && (!item().featureLocked || !closable())\"\n class=\"ap-filter-leaf__header\" tabindex=\"0\">\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 (item().featureLocked) {\n <div class=\"ap-filter-leaf__actions\">\n <ap-symbol color=\"purple\" symbolId=\"feature-lock\" size=\"sm\" />\n </div>\n } @else 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) && (!item().featureLocked || !closable())) {\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 || item().featureLocked\"\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 || !!item().featureLocked\"\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 || item().featureLocked\"\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 (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n }\n }\n @case ('date-range') {\n @if (dateRangeItem(); as vDateRangeItem) {\n <ap-input-datepicker\n [disabled]=\"!!item().featureLocked\"\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{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"] }]
|
|
339
|
+
}], 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 }] }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }], filterDropdownGroupLockedClicked: [{ type: i0.Output, args: ["filterDropdownGroupLockedClicked"] }] } });
|
|
330
340
|
|
|
331
341
|
class FilterDropdownComponent {
|
|
332
342
|
overlay = createDropdownOverlay();
|
|
@@ -364,8 +374,6 @@ class FilterDropdownComponent {
|
|
|
364
374
|
editingPresetsMode = input(false, ...(ngDevMode ? [{ debugName: "editingPresetsMode" }] : []));
|
|
365
375
|
/** Whether to show a backdrop that closes the dropdown when clicked */
|
|
366
376
|
showBackdrop = input(true, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
|
|
367
|
-
/** Whether the dropdown is disabled and cannot be opened */
|
|
368
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
369
377
|
/** Default position for the dropdown relative to the trigger element */
|
|
370
378
|
defaultPosition = input('right', ...(ngDevMode ? [{ debugName: "defaultPosition" }] : []));
|
|
371
379
|
saveNewPresetsText = input('Save new presets', ...(ngDevMode ? [{ debugName: "saveNewPresetsText" }] : []));
|
|
@@ -391,6 +399,10 @@ class FilterDropdownComponent {
|
|
|
391
399
|
clearFilters = output();
|
|
392
400
|
/** Emits when user clicks on reset filter */
|
|
393
401
|
resetFilters = output();
|
|
402
|
+
/** Event emitted when a select item feature locked is clicked */
|
|
403
|
+
lockedFeatureClicked = output();
|
|
404
|
+
/** Event emitted when a group with locked feature is clicked */
|
|
405
|
+
filterDropdownGroupLockedClicked = output();
|
|
394
406
|
isOpen = this.overlay.isOpen;
|
|
395
407
|
savePresetsDropdownItems = computed(() => {
|
|
396
408
|
if (!this.savePresetsMode() || !this.editingPresetsMode())
|
|
@@ -413,7 +425,7 @@ class FilterDropdownComponent {
|
|
|
413
425
|
/** Opens the dropdown menu at the specified trigger element */
|
|
414
426
|
open(triggerElement) {
|
|
415
427
|
const template = this.filterGroupTemplate();
|
|
416
|
-
if (this.
|
|
428
|
+
if (this.isOpen() || !template)
|
|
417
429
|
return;
|
|
418
430
|
this.overlay.open(template, triggerElement, {
|
|
419
431
|
showBackdrop: this.showBackdrop(),
|
|
@@ -470,12 +482,12 @@ class FilterDropdownComponent {
|
|
|
470
482
|
}
|
|
471
483
|
}
|
|
472
484
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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 },
|
|
485
|
+
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 }, 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", lockedFeatureClicked: "lockedFeatureClicked", filterDropdownGroupLockedClicked: "filterDropdownGroupLockedClicked" }, 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\n [item]=\"item\"\n [closable]=\"closable()\"\n [isLastLeaf]=\"last\"\n (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\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 [items]=\"savePresetsDropdownItems()\"\n (itemClick)=\"onActionDropdownItemClick($event)\"\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"], outputs: ["lockedFeatureClicked", "filterDropdownGroupLockedClicked"] }, { 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"] }] });
|
|
474
486
|
}
|
|
475
487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownComponent, decorators: [{
|
|
476
488
|
type: Component,
|
|
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
|
|
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 }] }],
|
|
489
|
+
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\n [item]=\"item\"\n [closable]=\"closable()\"\n [isLastLeaf]=\"last\"\n (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\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 [items]=\"savePresetsDropdownItems()\"\n (itemClick)=\"onActionDropdownItemClick($event)\"\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"] }]
|
|
490
|
+
}], 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 }] }], 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"] }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }], filterDropdownGroupLockedClicked: [{ type: i0.Output, args: ["filterDropdownGroupLockedClicked"] }] } });
|
|
479
491
|
|
|
480
492
|
class FilterDropdownButtonComponent {
|
|
481
493
|
filterState = inject(FilterState);
|
|
@@ -525,6 +537,10 @@ class FilterDropdownButtonComponent {
|
|
|
525
537
|
clearFilters = output();
|
|
526
538
|
/** Emits when user clicks on reset filter */
|
|
527
539
|
resetFilters = output();
|
|
540
|
+
/** Event emitted when a select item feature locked is clicked */
|
|
541
|
+
lockedFeatureClicked = output();
|
|
542
|
+
/** Event emitted when a group with locked feature is clicked */
|
|
543
|
+
filterDropdownGroupLockedClicked = output();
|
|
528
544
|
onApplyFilters() {
|
|
529
545
|
this.applyFilters.emit(this.filterState.getSnapshot());
|
|
530
546
|
}
|
|
@@ -543,12 +559,12 @@ class FilterDropdownButtonComponent {
|
|
|
543
559
|
this.updatePresets.emit(this.filterState.getSnapshot());
|
|
544
560
|
}
|
|
545
561
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
|
562
|
+
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", lockedFeatureClicked: "lockedFeatureClicked", filterDropdownGroupLockedClicked: "filterDropdownGroupLockedClicked" }, 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 [presetsFeatureLocked]=\"presetsFeatureLocked()\"\n [applyFiltersText]=\"applyFiltersText()\"\n [clearFilterText]=\"clearFilterText()\"\n [closable]=\"closable()\"\n [defaultPosition]=\"defaultPosition()\"\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 (applyFilters)=\"applyFilters.emit($event)\"\n (clearFilters)=\"clearFilters.emit()\"\n (closed)=\"closed.emit()\"\n (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\"\n (opened)=\"opened.emit()\"\n (presetsLockedClicked)=\"presetsLockedClicked.emit()\"\n (resetFilters)=\"resetFilters.emit()\"\n (saveNewPresets)=\"saveNewPresets.emit($event)\"\n (updatePresets)=\"updatePresets.emit($event)\"\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", "defaultPosition", "saveNewPresetsText", "saveAsNewPresetText", "savePresetText", "updateExistingPresetText", "resetFilterText", "applyFiltersText", "clearFilterText"], outputs: ["opened", "closed", "presetsLockedClicked", "saveNewPresets", "updatePresets", "applyFilters", "clearFilters", "resetFilters", "lockedFeatureClicked", "filterDropdownGroupLockedClicked"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }] });
|
|
547
563
|
}
|
|
548
564
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterDropdownButtonComponent, decorators: [{
|
|
549
565
|
type: Component,
|
|
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
|
|
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"] }] } });
|
|
566
|
+
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 [presetsFeatureLocked]=\"presetsFeatureLocked()\"\n [applyFiltersText]=\"applyFiltersText()\"\n [clearFilterText]=\"clearFilterText()\"\n [closable]=\"closable()\"\n [defaultPosition]=\"defaultPosition()\"\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 (applyFilters)=\"applyFilters.emit($event)\"\n (clearFilters)=\"clearFilters.emit()\"\n (closed)=\"closed.emit()\"\n (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\"\n (opened)=\"opened.emit()\"\n (presetsLockedClicked)=\"presetsLockedClicked.emit()\"\n (resetFilters)=\"resetFilters.emit()\"\n (saveNewPresets)=\"saveNewPresets.emit($event)\"\n (updatePresets)=\"updatePresets.emit($event)\"\n [updateExistingPresetText]=\"updateExistingPresetText()\" />\n" }]
|
|
567
|
+
}], 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"] }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }], filterDropdownGroupLockedClicked: [{ type: i0.Output, args: ["filterDropdownGroupLockedClicked"] }] } });
|
|
552
568
|
|
|
553
569
|
/**
|
|
554
570
|
* Generated bundle index. Do not edit.
|