@agorapulse/ui-components 22.1.5 → 22.1.7
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-22.1.7.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs +16 -22
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-date-range-picker.mjs +0 -1
- package/fesm2022/agorapulse-ui-components-date-range-picker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-dropdown-panel.mjs +93 -0
- package/fesm2022/agorapulse-ui-components-dropdown-panel.mjs.map +1 -0
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +29 -27
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-floating.mjs +8 -1
- package/fesm2022/agorapulse-ui-components-floating.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs +17 -21
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components.mjs +1 -0
- package/fesm2022/agorapulse-ui-components.mjs.map +1 -1
- package/package.json +5 -1
- package/types/agorapulse-ui-components-action-dropdown.d.ts +2 -4
- package/types/agorapulse-ui-components-date-range-picker.d.ts +0 -1
- package/types/agorapulse-ui-components-dropdown-panel.d.ts +49 -0
- package/types/agorapulse-ui-components-filter-dropdown.d.ts +3 -5
- package/types/agorapulse-ui-components-selection-dropdown.d.ts +2 -3
- package/types/agorapulse-ui-components.d.ts +1 -0
- package/agorapulse-ui-components-22.1.5.tgz +0 -0
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { ActionDropdownComponent } from '@agorapulse/ui-components/action-dropdown';
|
|
2
2
|
import { ButtonComponent } from '@agorapulse/ui-components/button';
|
|
3
3
|
import { ClickDirective } from '@agorapulse/ui-components/directives';
|
|
4
|
-
import {
|
|
4
|
+
import { DropdownTriggerDirective } from '@agorapulse/ui-components/dropdown-base';
|
|
5
|
+
import { DropdownPanelComponent, DropdownContentDirective } from '@agorapulse/ui-components/dropdown-panel';
|
|
5
6
|
import { InfoboxComponent } from '@agorapulse/ui-components/infobox';
|
|
6
7
|
import { provideUiComponentsSymbols } from '@agorapulse/ui-components/providers';
|
|
7
8
|
import { SymbolComponent, apInfo, apFeatureLock, apReset, apChevronDown as apChevronDown$1, apPlus, apRefresh, withSymbols, apFilter, apFilterFill } from '@agorapulse/ui-symbol';
|
|
8
9
|
import * as i0 from '@angular/core';
|
|
9
|
-
import { signal, computed, Injectable, inject, input, output, DestroyRef, ChangeDetectionStrategy, Component, effect, untracked,
|
|
10
|
+
import { signal, computed, Injectable, inject, input, output, DestroyRef, ChangeDetectionStrategy, Component, viewChild, effect, untracked, booleanAttribute } from '@angular/core';
|
|
10
11
|
import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
|
|
11
12
|
import { DatepickerMode, InputDatepickerComponent } from '@agorapulse/ui-components/datepicker';
|
|
12
13
|
import { RadioComponent } from '@agorapulse/ui-components/radio';
|
|
@@ -458,7 +459,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
458
459
|
}], 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 }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }], filterDropdownGroupLockedClicked: [{ type: i0.Output, args: ["filterDropdownGroupLockedClicked"] }] } });
|
|
459
460
|
|
|
460
461
|
class FilterDropdownComponent {
|
|
461
|
-
|
|
462
|
+
panel = viewChild(DropdownPanelComponent, /* @ts-ignore */
|
|
463
|
+
...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
|
|
462
464
|
filterState = inject(FilterState);
|
|
463
465
|
/**
|
|
464
466
|
* Seed the component state from its inputs. This is the ONLY reactive path and it is silent:
|
|
@@ -477,8 +479,6 @@ class FilterDropdownComponent {
|
|
|
477
479
|
});
|
|
478
480
|
}, /* @ts-ignore */
|
|
479
481
|
...(ngDevMode ? [{ debugName: "syncFromInputs" }] : /* istanbul ignore next */ []));
|
|
480
|
-
filterGroupTemplate = viewChild('filterGroupTemplate', /* @ts-ignore */
|
|
481
|
-
...(ngDevMode ? [{ debugName: "filterGroupTemplate" }] : /* istanbul ignore next */ []));
|
|
482
482
|
/** An optional infobox shown at the bottom of the popup content, above the footer (e.g. a link). */
|
|
483
483
|
infobox = input(null, /* @ts-ignore */
|
|
484
484
|
...(ngDevMode ? [{ debugName: "infobox" }] : /* istanbul ignore next */ []));
|
|
@@ -569,7 +569,8 @@ class FilterDropdownComponent {
|
|
|
569
569
|
lockedFeatureClicked = output();
|
|
570
570
|
/** Event emitted when a group with locked feature is clicked */
|
|
571
571
|
filterDropdownGroupLockedClicked = output();
|
|
572
|
-
isOpen = this.
|
|
572
|
+
isOpen = computed(() => this.panel()?.isOpen() ?? false, /* @ts-ignore */
|
|
573
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
573
574
|
/** What the trigger badge counts: the applied value when an Apply step gates it, the live draft otherwise. */
|
|
574
575
|
triggerFilterCount = computed(() => this.needApplyButton() ? this.filterState.appliedFilterCount() : this.filterState.activeFilterCount(), /* @ts-ignore */
|
|
575
576
|
...(ngDevMode ? [{ debugName: "triggerFilterCount" }] : /* istanbul ignore next */ []));
|
|
@@ -597,39 +598,31 @@ class FilterDropdownComponent {
|
|
|
597
598
|
...(ngDevMode ? [{ debugName: "savePresetsDropdownItems" }] : /* istanbul ignore next */ []));
|
|
598
599
|
/** Opens the dropdown menu at the specified trigger element */
|
|
599
600
|
open(triggerElement) {
|
|
600
|
-
const
|
|
601
|
-
if (this.isOpen() || !
|
|
601
|
+
const panel = this.panel();
|
|
602
|
+
if (this.isOpen() || !panel)
|
|
602
603
|
return;
|
|
603
604
|
this.filterState.applyExpandOnOpen(this.expandOnOpen());
|
|
604
|
-
|
|
605
|
-
showBackdrop: this.showBackdrop(),
|
|
606
|
-
placement: this.placement(),
|
|
607
|
-
panelClass: this.panelClass(),
|
|
608
|
-
onClose: () => this.dismiss(),
|
|
609
|
-
});
|
|
605
|
+
panel.open(triggerElement);
|
|
610
606
|
this.trackDismissalGestures();
|
|
611
607
|
this.opened.emit();
|
|
612
608
|
}
|
|
613
609
|
/** A leaf's panel closes on the pointerdown or keydown that dismisses it, so snapshot the flag then: by dismissal it reads false. */
|
|
614
610
|
trackDismissalGestures() {
|
|
615
|
-
const overlayRef = this.
|
|
611
|
+
const overlayRef = this.panel()?.overlayRef;
|
|
616
612
|
const snapshot = () => (this.panelOpenAtGestureStart = this.filterState.nestedPanelOpen());
|
|
617
613
|
overlayRef?.backdropElement?.addEventListener('pointerdown', snapshot, { capture: true });
|
|
618
614
|
overlayRef?.overlayElement?.addEventListener('keydown', snapshot, { capture: true });
|
|
619
615
|
}
|
|
620
616
|
/** Backdrop click / Escape: close, unless the gesture was a leaf panel's own dismissal. */
|
|
621
|
-
|
|
617
|
+
canDismiss = () => {
|
|
622
618
|
const belongsToPanel = this.panelOpenAtGestureStart || this.filterState.nestedPanelOpen();
|
|
623
619
|
this.panelOpenAtGestureStart = false;
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
this.close();
|
|
627
|
-
}
|
|
628
|
-
/** Closes the dropdown menu and cleans up overlay resources */
|
|
620
|
+
return !belongsToPanel;
|
|
621
|
+
};
|
|
629
622
|
close() {
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
623
|
+
this.panel()?.close();
|
|
624
|
+
}
|
|
625
|
+
onPanelClosed() {
|
|
633
626
|
this.closed.emit();
|
|
634
627
|
}
|
|
635
628
|
/** Toggles the dropdown menu open or closed state */
|
|
@@ -695,12 +688,21 @@ class FilterDropdownComponent {
|
|
|
695
688
|
}
|
|
696
689
|
}
|
|
697
690
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
698
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterDropdownComponent, isStandalone: true, selector: "ap-filter-dropdown", inputs: { infobox: { classPropertyName: "infobox", publicName: "infobox", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, savedValue: { classPropertyName: "savedValue", publicName: "savedValue", isSignal: true, isRequired: false, transformFunction: null }, needApplyButton: { classPropertyName: "needApplyButton", publicName: "needApplyButton", isSignal: true, isRequired: false, transformFunction: null }, needClearButton: { classPropertyName: "needClearButton", publicName: "needClearButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, expandOnOpen: { classPropertyName: "expandOnOpen", publicName: "expandOnOpen", 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 }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", 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: { infoboxLinkClick: "infoboxLinkClick", opened: "opened", closed: "closed", presetsLockedClicked: "presetsLockedClicked", saveNewPresets: "saveNewPresets", updatePresets: "updatePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters", lockedFeatureClicked: "lockedFeatureClicked", filterDropdownGroupLockedClicked: "filterDropdownGroupLockedClicked" }, providers: [FilterState, 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 (valueChange)=\"onLeafEdit($event)\"\n (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n }\n </div>\n\n @if (infobox(); as infobox) {\n <div class=\"ap-filter-dropdown__infobox\">\n <ap-infobox\n [type]=\"infobox.type ?? 'info'\"\n [title]=\"infobox.title\">\n @if (infobox.link; as link) {\n @if (link.href) {\n <a [href]=\"link.href\">{{ link.label }}</a>\n } @else {\n <a (apClick)=\"infoboxLinkClick.emit()\">{{ link.label }}</a>\n }\n }\n {{ infobox.text }}\n </ap-infobox>\n </div>\n }\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 @if (needClearButton()) {\n <ap-button\n name=\"filter-dropdown-clear-filters\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\n [disabled]=\"filterState.clearDisabled()\"\n (click)=\"onClearFilters()\">\n {{ clearFilterText() }}\n </ap-button>\n }\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__infobox{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.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: ["valueChange", "lockedFeatureClicked", "filterDropdownGroupLockedClicked"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: ActionDropdownComponent, selector: "ap-action-dropdown", inputs: ["items", "largeModeEnabled", "customWidth", "showBackdrop", "disabled", "placement"], outputs: ["opened", "closed", "itemClick"] }, { kind: "component", type: InfoboxComponent, selector: "ap-infobox", inputs: ["buttonId", "buttonLabel", "buttonDataTrack", "buttonSymbolId", "closable", "title", "type"], outputs: ["buttonClicked", "closed"] }, { kind: "directive", type: ClickDirective, selector: "[apClick]", inputs: ["apClickDisabled", "apClickRole"], outputs: ["apClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
691
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterDropdownComponent, isStandalone: true, selector: "ap-filter-dropdown", inputs: { infobox: { classPropertyName: "infobox", publicName: "infobox", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, savedValue: { classPropertyName: "savedValue", publicName: "savedValue", isSignal: true, isRequired: false, transformFunction: null }, needApplyButton: { classPropertyName: "needApplyButton", publicName: "needApplyButton", isSignal: true, isRequired: false, transformFunction: null }, needClearButton: { classPropertyName: "needClearButton", publicName: "needClearButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, expandOnOpen: { classPropertyName: "expandOnOpen", publicName: "expandOnOpen", 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 }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", 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: { infoboxLinkClick: "infoboxLinkClick", opened: "opened", closed: "closed", presetsLockedClicked: "presetsLockedClicked", saveNewPresets: "saveNewPresets", updatePresets: "updatePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters", lockedFeatureClicked: "lockedFeatureClicked", filterDropdownGroupLockedClicked: "filterDropdownGroupLockedClicked" }, providers: [FilterState, provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh, apFeatureLock)], viewQueries: [{ propertyName: "panel", first: true, predicate: DropdownPanelComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ap-dropdown-panel\n [placement]=\"placement()\"\n [showBackdrop]=\"showBackdrop()\"\n [panelClass]=\"panelClass()\"\n [canDismiss]=\"canDismiss\"\n (closed)=\"onPanelClosed()\">\n <div\n *apDropdownContent\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 (valueChange)=\"onLeafEdit($event)\"\n (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n }\n </div>\n\n @if (infobox(); as infobox) {\n <div class=\"ap-filter-dropdown__infobox\">\n <ap-infobox\n [type]=\"infobox.type ?? 'info'\"\n [title]=\"infobox.title\">\n @if (infobox.link; as link) {\n @if (link.href) {\n <a [href]=\"link.href\">{{ link.label }}</a>\n } @else {\n <a (apClick)=\"infoboxLinkClick.emit()\">{{ link.label }}</a>\n }\n }\n {{ infobox.text }}\n </ap-infobox>\n </div>\n }\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 @if (needClearButton()) {\n <ap-button\n name=\"filter-dropdown-clear-filters\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\n [disabled]=\"filterState.clearDisabled()\"\n (click)=\"onClearFilters()\">\n {{ clearFilterText() }}\n </ap-button>\n }\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</ap-dropdown-panel>\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;outline:none;max-height:min(90vh,750px,var(--ap-floating-available-height, 100vh))}.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__infobox{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.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: ["valueChange", "lockedFeatureClicked", "filterDropdownGroupLockedClicked"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "directive", type: DropdownContentDirective, selector: "ng-template[apDropdownContent]" }, { kind: "component", type: DropdownPanelComponent, selector: "ap-dropdown-panel", inputs: ["placement", "showBackdrop", "panelClass", "canDismiss"], outputs: ["opened", "closed"] }, { kind: "component", type: ActionDropdownComponent, selector: "ap-action-dropdown", inputs: ["items", "largeModeEnabled", "customWidth", "showBackdrop", "disabled", "placement"], outputs: ["opened", "closed", "itemClick"] }, { kind: "component", type: InfoboxComponent, selector: "ap-infobox", inputs: ["buttonId", "buttonLabel", "buttonDataTrack", "buttonSymbolId", "closable", "title", "type"], outputs: ["buttonClicked", "closed"] }, { kind: "directive", type: ClickDirective, selector: "[apClick]", inputs: ["apClickDisabled", "apClickRole"], outputs: ["apClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
699
692
|
}
|
|
700
693
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterDropdownComponent, decorators: [{
|
|
701
694
|
type: Component,
|
|
702
|
-
args: [{ selector: 'ap-filter-dropdown', imports: [
|
|
703
|
-
|
|
695
|
+
args: [{ selector: 'ap-filter-dropdown', imports: [
|
|
696
|
+
ButtonComponent,
|
|
697
|
+
FilterLeafComponent,
|
|
698
|
+
DropdownTriggerDirective,
|
|
699
|
+
DropdownContentDirective,
|
|
700
|
+
DropdownPanelComponent,
|
|
701
|
+
ActionDropdownComponent,
|
|
702
|
+
InfoboxComponent,
|
|
703
|
+
ClickDirective,
|
|
704
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [FilterState, provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh, apFeatureLock)], template: "<ap-dropdown-panel\n [placement]=\"placement()\"\n [showBackdrop]=\"showBackdrop()\"\n [panelClass]=\"panelClass()\"\n [canDismiss]=\"canDismiss\"\n (closed)=\"onPanelClosed()\">\n <div\n *apDropdownContent\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 (valueChange)=\"onLeafEdit($event)\"\n (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n }\n </div>\n\n @if (infobox(); as infobox) {\n <div class=\"ap-filter-dropdown__infobox\">\n <ap-infobox\n [type]=\"infobox.type ?? 'info'\"\n [title]=\"infobox.title\">\n @if (infobox.link; as link) {\n @if (link.href) {\n <a [href]=\"link.href\">{{ link.label }}</a>\n } @else {\n <a (apClick)=\"infoboxLinkClick.emit()\">{{ link.label }}</a>\n }\n }\n {{ infobox.text }}\n </ap-infobox>\n </div>\n }\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 @if (needClearButton()) {\n <ap-button\n name=\"filter-dropdown-clear-filters\"\n [config]=\"{ color: 'blue', style: 'ghost' }\"\n [disabled]=\"filterState.clearDisabled()\"\n (click)=\"onClearFilters()\">\n {{ clearFilterText() }}\n </ap-button>\n }\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</ap-dropdown-panel>\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;outline:none;max-height:min(90vh,750px,var(--ap-floating-available-height, 100vh))}.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__infobox{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.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"] }]
|
|
705
|
+
}], propDecorators: { panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownPanelComponent), { isSignal: true }] }], infobox: [{ type: i0.Input, args: [{ isSignal: true, alias: "infobox", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], savedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "savedValue", required: false }] }], needApplyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needApplyButton", required: false }] }], needClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needClearButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], expandOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnOpen", 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 }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", 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 }] }], infoboxLinkClick: [{ type: i0.Output, args: ["infoboxLinkClick"] }], 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"] }] } });
|
|
704
706
|
|
|
705
707
|
class FilterDropdownButtonComponent {
|
|
706
708
|
// The dropdown decides whether the badge follows the draft or the applied value, so read its counter.
|