@agorapulse/ui-components 22.1.5 → 22.1.6
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.6.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs +16 -21
- package/fesm2022/agorapulse-ui-components-action-dropdown.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-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 -3
- 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
|
Binary file
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, input, HostListener, Directive, viewChild, contentChild, output, signal, effect, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
+
import { inject, ElementRef, input, HostListener, Directive, viewChild, contentChild, output, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { BadgeComponent } from '@agorapulse/ui-components/badge';
|
|
4
|
-
import {
|
|
4
|
+
import { DropdownPanelComponent, DropdownContentDirective } from '@agorapulse/ui-components/dropdown-panel';
|
|
5
5
|
import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
|
|
6
6
|
import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
|
|
7
7
|
import { SymbolRegistry, SymbolComponent, withSymbols, apInfo, apFeatureLock } from '@agorapulse/ui-symbol';
|
|
@@ -61,9 +61,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
61
61
|
*/
|
|
62
62
|
class ActionDropdownComponent {
|
|
63
63
|
symbolRegistry = inject(SymbolRegistry);
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
...(ngDevMode ? [{ debugName: "actionDropdownTemplate" }] : /* istanbul ignore next */ []));
|
|
64
|
+
panel = viewChild(DropdownPanelComponent, /* @ts-ignore */
|
|
65
|
+
...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
|
|
67
66
|
trigger = contentChild('trigger', /* @ts-ignore */
|
|
68
67
|
...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
|
|
69
68
|
/** Array of items to display in the dropdown menu */
|
|
@@ -93,7 +92,8 @@ class ActionDropdownComponent {
|
|
|
93
92
|
itemClick = output();
|
|
94
93
|
focusedIndex = signal(-1, /* @ts-ignore */
|
|
95
94
|
...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
|
|
96
|
-
isOpen = this.
|
|
95
|
+
isOpen = computed(() => this.panel()?.isOpen() ?? false, /* @ts-ignore */
|
|
96
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
97
97
|
constructor() {
|
|
98
98
|
this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
|
|
99
99
|
// Set up keyboard navigation when dropdown opens
|
|
@@ -105,22 +105,17 @@ class ActionDropdownComponent {
|
|
|
105
105
|
}
|
|
106
106
|
/** Opens the dropdown menu at the specified trigger element */
|
|
107
107
|
open(triggerElement) {
|
|
108
|
-
const
|
|
109
|
-
if (this.disabled() || this.isOpen() || !
|
|
108
|
+
const panel = this.panel();
|
|
109
|
+
if (this.disabled() || this.isOpen() || !panel)
|
|
110
110
|
return;
|
|
111
|
-
|
|
112
|
-
showBackdrop: this.showBackdrop(),
|
|
113
|
-
placement: this.placement(),
|
|
114
|
-
onClose: () => this.close(),
|
|
115
|
-
});
|
|
111
|
+
panel.open(triggerElement);
|
|
116
112
|
this.opened.emit();
|
|
117
113
|
}
|
|
118
|
-
/** Closes the dropdown menu and cleans up overlay resources */
|
|
119
114
|
close() {
|
|
120
|
-
|
|
121
|
-
|
|
115
|
+
this.panel()?.close();
|
|
116
|
+
}
|
|
117
|
+
onPanelClosed() {
|
|
122
118
|
this.focusedIndex.set(-1);
|
|
123
|
-
this.overlay.close();
|
|
124
119
|
this.closed.emit();
|
|
125
120
|
}
|
|
126
121
|
/** Toggles the dropdown menu open or closed state */
|
|
@@ -185,7 +180,7 @@ class ActionDropdownComponent {
|
|
|
185
180
|
}
|
|
186
181
|
/** Sets up keyboard event handling for the opened dropdown */
|
|
187
182
|
setupKeyboardNavigation() {
|
|
188
|
-
const ref = this.
|
|
183
|
+
const ref = this.panel()?.overlayRef;
|
|
189
184
|
if (!ref)
|
|
190
185
|
return;
|
|
191
186
|
ref.keydownEvents().subscribe((event) => {
|
|
@@ -193,12 +188,12 @@ class ActionDropdownComponent {
|
|
|
193
188
|
});
|
|
194
189
|
}
|
|
195
190
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
196
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ActionDropdownComponent, isStandalone: true, selector: "ap-action-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, largeModeEnabled: { classPropertyName: "largeModeEnabled", publicName: "largeModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, customWidth: { classPropertyName: "customWidth", publicName: "customWidth", 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 }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", itemClick: "itemClick" }, providers: [withSymbols(apInfo, apFeatureLock)], queries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "actionDropdownTemplate", first: true, predicate: ["actionDropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #actionDropdownTemplate>\n <!-- Action dropdown -->\n <div\n class=\"ap-action-dropdown__content\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Action dropdown'\"\n [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n (keydown)=\"onKeyDown($event)\">\n <!-- Action dropdown items -->\n @for (item of items(); track item.label) {\n <!-- Divider -->\n @if (item.dividerEnabled) {\n <div\n class=\"ap-action-dropdown__divider\"\n role=\"separator\"></div>\n }\n <!-- Action dropdown item -->\n <div [apTooltip]=\"item.itemTooltipText\">\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\n [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.data-track]=\"item.dataTrack\"\n [attr.id]=\"item.id\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n <!-- Start icon -->\n @if (item.startSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-start-icon\"\n size=\"sm\"\n [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n [symbolId]=\"item.startSymbolId\"\n [apTooltip]=\"item.startSymbolTooltipText\" />\n }\n <!-- Label -->\n <div class=\"ap-action-dropdown__item-text-container\">\n <div class=\"ap-action-dropdown__item-label-container\">\n <div\n class=\"ap-action-dropdown__item-label\"\n [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n {{ item.label }}\n </div>\n <!-- Badge -->\n @if (item.badgeLabel) {\n <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n {{ item.badgeLabel }}\n </ap-badge>\n }\n </div>\n <!-- Description -->\n <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n </div>\n <!-- End icon -->\n @if (item.endSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"#858FA1\"\n [symbolId]=\"item.endSymbolId\"\n [apTooltip]=\"item.endSymbolTooltipText\" />\n }\n <!-- Feature lock icon -->\n @if (item.featureLockEnabled) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"purple\"\n symbolId=\"feature-lock\" />\n }\n </button>\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:none}.ap-action-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-action-dropdown__content.ap-action-dropdown__content--default{width:250px}.ap-action-dropdown__content.ap-action-dropdown__content--large{width:340px}.ap-action-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-action-dropdown__item{display:flex;align-items:center;width:100%;height:40px;padding:var(--comp-action-dropdown-item-padding);border:none;background:transparent;color:var(--comp-action-dropdown-item-text-color);cursor:pointer;font-family:Averta;font-size:var(--comp-action-dropdown-item-text-size);line-height:var(--comp-action-dropdown-item-text-line-height);text-align:left}.ap-action-dropdown__item:hover{background-color:var(--comp-action-dropdown-item-background-color-hover)}.ap-action-dropdown__item:focus{outline:none;background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item:disabled{cursor:not-allowed;opacity:.4}.ap-action-dropdown__item.ap-action-dropdown__item--has-description{height:auto;min-height:50px}.ap-action-dropdown__item.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode{color:var(--comp-action-dropdown-item-text-color-red-mode)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:hover{background-color:var(--comp-action-dropdown-item-background-color-red-mode-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:hover{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled:hover{background-color:transparent}.ap-action-dropdown__item .ap-action-dropdown__item-start-icon{margin-right:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-end-icon{margin-left:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container{display:flex;flex-direction:column;flex:1;min-width:0}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container{display:flex;align-items:center;gap:var(--comp-action-dropdown-item-label-spacing);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label.ap-action-dropdown__item-label--bold{font-weight:var(--ref-font-weight-bold)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-description{color:var(--comp-action-dropdown-item-description-color);font-size:var(--comp-action-dropdown-item-description-size);line-height:var(--comp-action-dropdown-item-description-line-height)}.ap-action-dropdown__divider{height:1px;background-color:var(--comp-action-dropdown-divider-color);margin:var(--comp-action-dropdown-divider-margin)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
191
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ActionDropdownComponent, isStandalone: true, selector: "ap-action-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, largeModeEnabled: { classPropertyName: "largeModeEnabled", publicName: "largeModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, customWidth: { classPropertyName: "customWidth", publicName: "customWidth", 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 }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", itemClick: "itemClick" }, providers: [withSymbols(apInfo, apFeatureLock)], queries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: DropdownPanelComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ap-dropdown-panel\n [placement]=\"placement()\"\n [showBackdrop]=\"showBackdrop()\"\n (closed)=\"onPanelClosed()\">\n <!-- Action dropdown -->\n <div\n *apDropdownContent\n class=\"ap-action-dropdown__content\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Action dropdown'\"\n [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n (keydown)=\"onKeyDown($event)\">\n <!-- Action dropdown items -->\n @for (item of items(); track item.label) {\n <!-- Divider -->\n @if (item.dividerEnabled) {\n <div\n class=\"ap-action-dropdown__divider\"\n role=\"separator\"></div>\n }\n <!-- Action dropdown item -->\n <div [apTooltip]=\"item.itemTooltipText\">\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\n [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.data-track]=\"item.dataTrack\"\n [attr.id]=\"item.id\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n <!-- Start icon -->\n @if (item.startSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-start-icon\"\n size=\"sm\"\n [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n [symbolId]=\"item.startSymbolId\"\n [apTooltip]=\"item.startSymbolTooltipText\" />\n }\n <!-- Label -->\n <div class=\"ap-action-dropdown__item-text-container\">\n <div class=\"ap-action-dropdown__item-label-container\">\n <div\n class=\"ap-action-dropdown__item-label\"\n [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n {{ item.label }}\n </div>\n <!-- Badge -->\n @if (item.badgeLabel) {\n <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n {{ item.badgeLabel }}\n </ap-badge>\n }\n </div>\n <!-- Description -->\n <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n </div>\n <!-- End icon -->\n @if (item.endSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"#858FA1\"\n [symbolId]=\"item.endSymbolId\"\n [apTooltip]=\"item.endSymbolTooltipText\" />\n }\n <!-- Feature lock icon -->\n @if (item.featureLockEnabled) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"purple\"\n symbolId=\"feature-lock\" />\n }\n </button>\n </div>\n }\n </div>\n</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-action-dropdown__content{padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-action-dropdown__content.ap-action-dropdown__content--default{width:250px}.ap-action-dropdown__content.ap-action-dropdown__content--large{width:340px}.ap-action-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-action-dropdown__item{display:flex;align-items:center;width:100%;height:40px;padding:var(--comp-action-dropdown-item-padding);border:none;background:transparent;color:var(--comp-action-dropdown-item-text-color);cursor:pointer;font-family:Averta;font-size:var(--comp-action-dropdown-item-text-size);line-height:var(--comp-action-dropdown-item-text-line-height);text-align:left}.ap-action-dropdown__item:hover{background-color:var(--comp-action-dropdown-item-background-color-hover)}.ap-action-dropdown__item:focus{outline:none;background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item:disabled{cursor:not-allowed;opacity:.4}.ap-action-dropdown__item.ap-action-dropdown__item--has-description{height:auto;min-height:50px}.ap-action-dropdown__item.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode{color:var(--comp-action-dropdown-item-text-color-red-mode)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:hover{background-color:var(--comp-action-dropdown-item-background-color-red-mode-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:hover{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled:hover{background-color:transparent}.ap-action-dropdown__item .ap-action-dropdown__item-start-icon{margin-right:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-end-icon{margin-left:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container{display:flex;flex-direction:column;flex:1;min-width:0}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container{display:flex;align-items:center;gap:var(--comp-action-dropdown-item-label-spacing);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label.ap-action-dropdown__item-label--bold{font-weight:var(--ref-font-weight-bold)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-description{color:var(--comp-action-dropdown-item-description-color);font-size:var(--comp-action-dropdown-item-description-size);line-height:var(--comp-action-dropdown-item-description-line-height)}.ap-action-dropdown__divider{height:1px;background-color:var(--comp-action-dropdown-divider-color);margin:var(--comp-action-dropdown-divider-margin)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { 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: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
197
192
|
}
|
|
198
193
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionDropdownComponent, decorators: [{
|
|
199
194
|
type: Component,
|
|
200
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-action-dropdown', imports: [BadgeComponent, SymbolComponent, TooltipDirective], providers: [withSymbols(apInfo, apFeatureLock)], template: "<
|
|
201
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
195
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-action-dropdown', imports: [BadgeComponent, DropdownContentDirective, DropdownPanelComponent, SymbolComponent, TooltipDirective], providers: [withSymbols(apInfo, apFeatureLock)], template: "<ap-dropdown-panel\n [placement]=\"placement()\"\n [showBackdrop]=\"showBackdrop()\"\n (closed)=\"onPanelClosed()\">\n <!-- Action dropdown -->\n <div\n *apDropdownContent\n class=\"ap-action-dropdown__content\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Action dropdown'\"\n [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n (keydown)=\"onKeyDown($event)\">\n <!-- Action dropdown items -->\n @for (item of items(); track item.label) {\n <!-- Divider -->\n @if (item.dividerEnabled) {\n <div\n class=\"ap-action-dropdown__divider\"\n role=\"separator\"></div>\n }\n <!-- Action dropdown item -->\n <div [apTooltip]=\"item.itemTooltipText\">\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\n [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.data-track]=\"item.dataTrack\"\n [attr.id]=\"item.id\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n <!-- Start icon -->\n @if (item.startSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-start-icon\"\n size=\"sm\"\n [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n [symbolId]=\"item.startSymbolId\"\n [apTooltip]=\"item.startSymbolTooltipText\" />\n }\n <!-- Label -->\n <div class=\"ap-action-dropdown__item-text-container\">\n <div class=\"ap-action-dropdown__item-label-container\">\n <div\n class=\"ap-action-dropdown__item-label\"\n [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n {{ item.label }}\n </div>\n <!-- Badge -->\n @if (item.badgeLabel) {\n <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n {{ item.badgeLabel }}\n </ap-badge>\n }\n </div>\n <!-- Description -->\n <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n </div>\n <!-- End icon -->\n @if (item.endSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"#858FA1\"\n [symbolId]=\"item.endSymbolId\"\n [apTooltip]=\"item.endSymbolTooltipText\" />\n }\n <!-- Feature lock icon -->\n @if (item.featureLockEnabled) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"purple\"\n symbolId=\"feature-lock\" />\n }\n </button>\n </div>\n }\n </div>\n</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-action-dropdown__content{padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-action-dropdown__content.ap-action-dropdown__content--default{width:250px}.ap-action-dropdown__content.ap-action-dropdown__content--large{width:340px}.ap-action-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-action-dropdown__item{display:flex;align-items:center;width:100%;height:40px;padding:var(--comp-action-dropdown-item-padding);border:none;background:transparent;color:var(--comp-action-dropdown-item-text-color);cursor:pointer;font-family:Averta;font-size:var(--comp-action-dropdown-item-text-size);line-height:var(--comp-action-dropdown-item-text-line-height);text-align:left}.ap-action-dropdown__item:hover{background-color:var(--comp-action-dropdown-item-background-color-hover)}.ap-action-dropdown__item:focus{outline:none;background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item:disabled{cursor:not-allowed;opacity:.4}.ap-action-dropdown__item.ap-action-dropdown__item--has-description{height:auto;min-height:50px}.ap-action-dropdown__item.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode{color:var(--comp-action-dropdown-item-text-color-red-mode)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:hover{background-color:var(--comp-action-dropdown-item-background-color-red-mode-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:hover{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled:hover{background-color:transparent}.ap-action-dropdown__item .ap-action-dropdown__item-start-icon{margin-right:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-end-icon{margin-left:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container{display:flex;flex-direction:column;flex:1;min-width:0}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container{display:flex;align-items:center;gap:var(--comp-action-dropdown-item-label-spacing);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label.ap-action-dropdown__item-label--bold{font-weight:var(--ref-font-weight-bold)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-description{color:var(--comp-action-dropdown-item-description-color);font-size:var(--comp-action-dropdown-item-description-size);line-height:var(--comp-action-dropdown-item-description-line-height)}.ap-action-dropdown__divider{height:1px;background-color:var(--comp-action-dropdown-divider-color);margin:var(--comp-action-dropdown-divider-margin)}\n"] }]
|
|
196
|
+
}], ctorParameters: () => [], propDecorators: { panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownPanelComponent), { isSignal: true }] }], trigger: [{ type: i0.ContentChild, args: ['trigger', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], largeModeEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeModeEnabled", required: false }] }], customWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "customWidth", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
202
197
|
|
|
203
198
|
/**
|
|
204
199
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-action-dropdown.mjs","sources":["../../../libs/ui-components/action-dropdown/src/action-dropdown-trigger.directive.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.html","../../../libs/ui-components/action-dropdown/src/agorapulse-ui-components-action-dropdown.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, inject, input } from '@angular/core';\nimport { ActionDropdownComponent } from './action-dropdown.component';\n\n/**\n * Directive that turns any element into a trigger for an ActionDropdown component.\n * Handles click and keyboard interactions to open/close the dropdown.\n */\n@Directive({\n selector: '[apActionDropdownTrigger]',\n})\nexport class ActionDropdownTriggerDirective {\n private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n /** Reference to the ActionDropdown component that this trigger controls */\n apActionDropdownTrigger = input<ActionDropdownComponent>();\n\n /** Handles click events to toggle the dropdown */\n @HostListener('click', ['$event'])\n onClick(event: MouseEvent): void {\n event.preventDefault();\n event.stopPropagation();\n\n this.apActionDropdownTrigger()?.toggle(this.elementRef.nativeElement);\n }\n\n /** Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) */\n @HostListener('keydown', ['$event'])\n onKeyDown(event: KeyboardEvent): void {\n const dropdown = this.apActionDropdownTrigger();\n if (!dropdown) return;\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n event.preventDefault();\n dropdown.open(this.elementRef.nativeElement);\n break;\n\n case 'Escape':\n event.preventDefault();\n dropdown.close();\n break;\n }\n }\n}\n","import { BadgeColor, BadgeComponent } from '@agorapulse/ui-components/badge';\nimport { createDropdownOverlay, DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport { FloatingPlacement } from '@agorapulse/ui-components/floating';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { agorapulseSymbol, apFeatureLock, apInfo, SymbolColor, SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\n\nimport {\n ChangeDetectionStrategy,\n Component,\n contentChild,\n effect,\n inject,\n input,\n output,\n signal,\n TemplateRef,\n viewChild,\n} from '@angular/core';\n\nexport interface ActionDropdownItem {\n /** Unique identifier for the item */\n name?: string;\n /** Display text for the item */\n label?: string;\n /** Secondary text displayed below the label */\n description?: string;\n /** Text displayed in a badge next to the item */\n badgeLabel?: string;\n /** Color of the badge displayed next to the item */\n badgeColor?: BadgeColor;\n /** Whether to show a feature lock icon */\n featureLockEnabled?: boolean;\n /** Whether to apply red styling for destructive actions */\n redModeEnabled?: boolean;\n /** Tooltip text displayed when hovering over the item */\n itemTooltipText?: string;\n /** Icon symbol identifier displayed at the start of the item */\n startSymbolId?: agorapulseSymbol;\n /** Color theme for the start symbol */\n startSymbolColor?: SymbolColor;\n /** Tooltip text for the start symbol */\n startSymbolTooltipText?: string;\n /** Icon symbol identifier displayed at the end of the item */\n endSymbolId?: agorapulseSymbol;\n /** Tooltip text for the end symbol */\n endSymbolTooltipText?: string;\n /** Whether the item is disabled and non-interactive */\n disabled?: boolean;\n /** Whether to add a divider before this item */\n dividerEnabled?: boolean;\n /** Optional ID for the action button item */\n id?: string;\n /** Optional data-track attribute for analytics tracking */\n dataTrack?: string;\n}\n\n/**\n * A dropdown component that displays a list of actionable items with support for icons,\n * badges, tooltips, and keyboard navigation.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-action-dropdown',\n templateUrl: './action-dropdown.component.html',\n styleUrls: ['./action-dropdown.component.scss'],\n imports: [BadgeComponent, SymbolComponent, TooltipDirective],\n providers: [withSymbols(apInfo, apFeatureLock)],\n})\nexport class ActionDropdownComponent implements DropdownOverlay {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly overlay = createDropdownOverlay();\n\n actionDropdownTemplate = viewChild<TemplateRef<unknown>>('actionDropdownTemplate');\n trigger = contentChild<TemplateRef<unknown>>('trigger');\n\n /** Array of items to display in the dropdown menu */\n items = input<ActionDropdownItem[]>([]);\n /** Whether to enable large mode styling for the dropdown */\n largeModeEnabled = input(false);\n /** Custom width for the dropdown menu in pixels */\n customWidth = input<number | null>(null);\n\n /** Whether to show a backdrop that closes the dropdown when clicked */\n showBackdrop = input(true);\n /** Whether the dropdown is disabled and cannot be opened */\n disabled = input(false);\n /** Default position for the dropdown relative to the trigger element */\n /** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */\n readonly placement = input<FloatingPlacement>();\n\n /** Emits when the dropdown menu is opened */\n opened = output<void>();\n /** Emits when the dropdown menu is closed */\n closed = output<void>();\n /** Emits when a dropdown item is clicked */\n itemClick = output<ActionDropdownItem>();\n\n protected readonly focusedIndex = signal(-1);\n\n readonly isOpen = this.overlay.isOpen;\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n // Set up keyboard navigation when dropdown opens\n effect(() => {\n if (this.isOpen()) {\n this.setupKeyboardNavigation();\n }\n });\n }\n\n /** Opens the dropdown menu at the specified trigger element */\n open(triggerElement?: HTMLElement): void {\n const template = this.actionDropdownTemplate();\n if (this.disabled() || this.isOpen() || !template) return;\n\n this.overlay.open(template, triggerElement, {\n showBackdrop: this.showBackdrop(),\n placement: this.placement(),\n onClose: () => this.close(),\n });\n this.opened.emit();\n }\n\n /** Closes the dropdown menu and cleans up overlay resources */\n close(): void {\n if (!this.isOpen()) return;\n this.focusedIndex.set(-1);\n this.overlay.close();\n this.closed.emit();\n }\n\n /** Toggles the dropdown menu open or closed state */\n toggle(triggerElement?: HTMLElement): void {\n if (this.isOpen()) {\n this.close();\n } else {\n this.open(triggerElement);\n }\n }\n\n /** Handles item click events, emitting the selected item and closing the dropdown */\n onItemClick(item: ActionDropdownItem): void {\n if (item.disabled) {\n return;\n }\n\n this.itemClick.emit(item);\n\n this.close();\n }\n\n /** Handles keyboard navigation within the dropdown menu */\n onKeyDown(event: KeyboardEvent): void {\n const items = this.items();\n const currentIndex = this.focusedIndex();\n let nextIndex: number;\n let prevIndex: number;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this.focusedIndex.set(nextIndex);\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this.focusedIndex.set(prevIndex);\n break;\n\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (currentIndex >= 0 && currentIndex < items.length) {\n this.onItemClick(items[currentIndex]);\n }\n break;\n\n case 'Escape':\n event.preventDefault();\n this.close();\n break;\n\n case 'Tab':\n event.preventDefault();\n if (event.shiftKey) {\n // Shift+Tab - move to previous item\n prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this.focusedIndex.set(prevIndex);\n } else {\n // Tab - move to next item\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this.focusedIndex.set(nextIndex);\n }\n break;\n }\n }\n\n /** Sets up keyboard event handling for the opened dropdown */\n private setupKeyboardNavigation(): void {\n const ref = this.overlay.overlayRef;\n if (!ref) return;\n\n ref.keydownEvents().subscribe((event: KeyboardEvent) => {\n this.onKeyDown(event);\n });\n }\n}\n","<ng-template #actionDropdownTemplate>\n <!-- Action dropdown -->\n <div\n class=\"ap-action-dropdown__content\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Action dropdown'\"\n [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n (keydown)=\"onKeyDown($event)\">\n <!-- Action dropdown items -->\n @for (item of items(); track item.label) {\n <!-- Divider -->\n @if (item.dividerEnabled) {\n <div\n class=\"ap-action-dropdown__divider\"\n role=\"separator\"></div>\n }\n <!-- Action dropdown item -->\n <div [apTooltip]=\"item.itemTooltipText\">\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\n [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.data-track]=\"item.dataTrack\"\n [attr.id]=\"item.id\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n <!-- Start icon -->\n @if (item.startSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-start-icon\"\n size=\"sm\"\n [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n [symbolId]=\"item.startSymbolId\"\n [apTooltip]=\"item.startSymbolTooltipText\" />\n }\n <!-- Label -->\n <div class=\"ap-action-dropdown__item-text-container\">\n <div class=\"ap-action-dropdown__item-label-container\">\n <div\n class=\"ap-action-dropdown__item-label\"\n [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n {{ item.label }}\n </div>\n <!-- Badge -->\n @if (item.badgeLabel) {\n <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n {{ item.badgeLabel }}\n </ap-badge>\n }\n </div>\n <!-- Description -->\n <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n </div>\n <!-- End icon -->\n @if (item.endSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"#858FA1\"\n [symbolId]=\"item.endSymbolId\"\n [apTooltip]=\"item.endSymbolTooltipText\" />\n }\n <!-- Feature lock icon -->\n @if (item.featureLockEnabled) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"purple\"\n symbolId=\"feature-lock\" />\n }\n </button>\n </div>\n }\n </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-action-dropdown.mjs","sources":["../../../libs/ui-components/action-dropdown/src/action-dropdown-trigger.directive.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.html","../../../libs/ui-components/action-dropdown/src/agorapulse-ui-components-action-dropdown.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, inject, input } from '@angular/core';\nimport { ActionDropdownComponent } from './action-dropdown.component';\n\n/**\n * Directive that turns any element into a trigger for an ActionDropdown component.\n * Handles click and keyboard interactions to open/close the dropdown.\n */\n@Directive({\n selector: '[apActionDropdownTrigger]',\n})\nexport class ActionDropdownTriggerDirective {\n private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n /** Reference to the ActionDropdown component that this trigger controls */\n apActionDropdownTrigger = input<ActionDropdownComponent>();\n\n /** Handles click events to toggle the dropdown */\n @HostListener('click', ['$event'])\n onClick(event: MouseEvent): void {\n event.preventDefault();\n event.stopPropagation();\n\n this.apActionDropdownTrigger()?.toggle(this.elementRef.nativeElement);\n }\n\n /** Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) */\n @HostListener('keydown', ['$event'])\n onKeyDown(event: KeyboardEvent): void {\n const dropdown = this.apActionDropdownTrigger();\n if (!dropdown) return;\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n event.preventDefault();\n dropdown.open(this.elementRef.nativeElement);\n break;\n\n case 'Escape':\n event.preventDefault();\n dropdown.close();\n break;\n }\n }\n}\n","import { BadgeColor, BadgeComponent } from '@agorapulse/ui-components/badge';\nimport { DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport { DropdownContentDirective, DropdownPanelComponent } from '@agorapulse/ui-components/dropdown-panel';\nimport { FloatingPlacement } from '@agorapulse/ui-components/floating';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { agorapulseSymbol, apFeatureLock, apInfo, SymbolColor, SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\n\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n effect,\n inject,\n input,\n output,\n signal,\n TemplateRef,\n viewChild,\n} from '@angular/core';\n\nexport interface ActionDropdownItem {\n /** Unique identifier for the item */\n name?: string;\n /** Display text for the item */\n label?: string;\n /** Secondary text displayed below the label */\n description?: string;\n /** Text displayed in a badge next to the item */\n badgeLabel?: string;\n /** Color of the badge displayed next to the item */\n badgeColor?: BadgeColor;\n /** Whether to show a feature lock icon */\n featureLockEnabled?: boolean;\n /** Whether to apply red styling for destructive actions */\n redModeEnabled?: boolean;\n /** Tooltip text displayed when hovering over the item */\n itemTooltipText?: string;\n /** Icon symbol identifier displayed at the start of the item */\n startSymbolId?: agorapulseSymbol;\n /** Color theme for the start symbol */\n startSymbolColor?: SymbolColor;\n /** Tooltip text for the start symbol */\n startSymbolTooltipText?: string;\n /** Icon symbol identifier displayed at the end of the item */\n endSymbolId?: agorapulseSymbol;\n /** Tooltip text for the end symbol */\n endSymbolTooltipText?: string;\n /** Whether the item is disabled and non-interactive */\n disabled?: boolean;\n /** Whether to add a divider before this item */\n dividerEnabled?: boolean;\n /** Optional ID for the action button item */\n id?: string;\n /** Optional data-track attribute for analytics tracking */\n dataTrack?: string;\n}\n\n/**\n * A dropdown component that displays a list of actionable items with support for icons,\n * badges, tooltips, and keyboard navigation.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-action-dropdown',\n templateUrl: './action-dropdown.component.html',\n styleUrls: ['./action-dropdown.component.scss'],\n imports: [BadgeComponent, DropdownContentDirective, DropdownPanelComponent, SymbolComponent, TooltipDirective],\n providers: [withSymbols(apInfo, apFeatureLock)],\n})\nexport class ActionDropdownComponent implements DropdownOverlay {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly panel = viewChild(DropdownPanelComponent);\n\n trigger = contentChild<TemplateRef<unknown>>('trigger');\n\n /** Array of items to display in the dropdown menu */\n items = input<ActionDropdownItem[]>([]);\n /** Whether to enable large mode styling for the dropdown */\n largeModeEnabled = input(false);\n /** Custom width for the dropdown menu in pixels */\n customWidth = input<number | null>(null);\n\n /** Whether to show a backdrop that closes the dropdown when clicked */\n showBackdrop = input(true);\n /** Whether the dropdown is disabled and cannot be opened */\n disabled = input(false);\n /** Default position for the dropdown relative to the trigger element */\n /** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */\n readonly placement = input<FloatingPlacement>();\n\n /** Emits when the dropdown menu is opened */\n opened = output<void>();\n /** Emits when the dropdown menu is closed */\n closed = output<void>();\n /** Emits when a dropdown item is clicked */\n itemClick = output<ActionDropdownItem>();\n\n protected readonly focusedIndex = signal(-1);\n\n readonly isOpen = computed(() => this.panel()?.isOpen() ?? false);\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n // Set up keyboard navigation when dropdown opens\n effect(() => {\n if (this.isOpen()) {\n this.setupKeyboardNavigation();\n }\n });\n }\n\n /** Opens the dropdown menu at the specified trigger element */\n open(triggerElement?: HTMLElement): void {\n const panel = this.panel();\n if (this.disabled() || this.isOpen() || !panel) return;\n\n panel.open(triggerElement);\n this.opened.emit();\n }\n\n close(): void {\n this.panel()?.close();\n }\n\n protected onPanelClosed(): void {\n this.focusedIndex.set(-1);\n this.closed.emit();\n }\n\n /** Toggles the dropdown menu open or closed state */\n toggle(triggerElement?: HTMLElement): void {\n if (this.isOpen()) {\n this.close();\n } else {\n this.open(triggerElement);\n }\n }\n\n /** Handles item click events, emitting the selected item and closing the dropdown */\n onItemClick(item: ActionDropdownItem): void {\n if (item.disabled) {\n return;\n }\n\n this.itemClick.emit(item);\n\n this.close();\n }\n\n /** Handles keyboard navigation within the dropdown menu */\n onKeyDown(event: KeyboardEvent): void {\n const items = this.items();\n const currentIndex = this.focusedIndex();\n let nextIndex: number;\n let prevIndex: number;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this.focusedIndex.set(nextIndex);\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this.focusedIndex.set(prevIndex);\n break;\n\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (currentIndex >= 0 && currentIndex < items.length) {\n this.onItemClick(items[currentIndex]);\n }\n break;\n\n case 'Escape':\n event.preventDefault();\n this.close();\n break;\n\n case 'Tab':\n event.preventDefault();\n if (event.shiftKey) {\n // Shift+Tab - move to previous item\n prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this.focusedIndex.set(prevIndex);\n } else {\n // Tab - move to next item\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this.focusedIndex.set(nextIndex);\n }\n break;\n }\n }\n\n /** Sets up keyboard event handling for the opened dropdown */\n private setupKeyboardNavigation(): void {\n const ref = this.panel()?.overlayRef;\n if (!ref) return;\n\n ref.keydownEvents().subscribe((event: KeyboardEvent) => {\n this.onKeyDown(event);\n });\n }\n}\n","<ap-dropdown-panel\n [placement]=\"placement()\"\n [showBackdrop]=\"showBackdrop()\"\n (closed)=\"onPanelClosed()\">\n <!-- Action dropdown -->\n <div\n *apDropdownContent\n class=\"ap-action-dropdown__content\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Action dropdown'\"\n [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n (keydown)=\"onKeyDown($event)\">\n <!-- Action dropdown items -->\n @for (item of items(); track item.label) {\n <!-- Divider -->\n @if (item.dividerEnabled) {\n <div\n class=\"ap-action-dropdown__divider\"\n role=\"separator\"></div>\n }\n <!-- Action dropdown item -->\n <div [apTooltip]=\"item.itemTooltipText\">\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\n [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.data-track]=\"item.dataTrack\"\n [attr.id]=\"item.id\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n <!-- Start icon -->\n @if (item.startSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-start-icon\"\n size=\"sm\"\n [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n [symbolId]=\"item.startSymbolId\"\n [apTooltip]=\"item.startSymbolTooltipText\" />\n }\n <!-- Label -->\n <div class=\"ap-action-dropdown__item-text-container\">\n <div class=\"ap-action-dropdown__item-label-container\">\n <div\n class=\"ap-action-dropdown__item-label\"\n [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n {{ item.label }}\n </div>\n <!-- Badge -->\n @if (item.badgeLabel) {\n <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n {{ item.badgeLabel }}\n </ap-badge>\n }\n </div>\n <!-- Description -->\n <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n </div>\n <!-- End icon -->\n @if (item.endSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"#858FA1\"\n [symbolId]=\"item.endSymbolId\"\n [apTooltip]=\"item.endSymbolTooltipText\" />\n }\n <!-- Feature lock icon -->\n @if (item.featureLockEnabled) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"purple\"\n symbolId=\"feature-lock\" />\n }\n </button>\n </div>\n }\n </div>\n</ap-dropdown-panel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, TemplateRef, Directive, contentChild, viewChild, input, output, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { createFloatingOverlay } from '@agorapulse/ui-components/floating';
|
|
4
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
5
|
+
|
|
6
|
+
/** Marks the panel's content. A template, not `<ng-content>`, so nothing is created until the panel opens. */
|
|
7
|
+
class DropdownContentDirective {
|
|
8
|
+
template = inject(TemplateRef);
|
|
9
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropdownContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
10
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DropdownContentDirective, isStandalone: true, selector: "ng-template[apDropdownContent]", ngImport: i0 });
|
|
11
|
+
}
|
|
12
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropdownContentDirective, decorators: [{
|
|
13
|
+
type: Directive,
|
|
14
|
+
args: [{ selector: 'ng-template[apDropdownContent]' }]
|
|
15
|
+
}] });
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* The surface a dropdown opens: white, rounded, elevated — and nothing more. No role and no focus
|
|
19
|
+
* trap: the content brings its own semantics (`menu`, `listbox`…). A dialog wants the popover.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* <button [apDropdownTrigger]="panel">Columns</button>
|
|
23
|
+
* <ap-dropdown-panel #panel>
|
|
24
|
+
* <ng-template apDropdownContent>…</ng-template>
|
|
25
|
+
* </ap-dropdown-panel>
|
|
26
|
+
*/
|
|
27
|
+
class DropdownPanelComponent {
|
|
28
|
+
floating = createFloatingOverlay();
|
|
29
|
+
content = contentChild.required(DropdownContentDirective);
|
|
30
|
+
surface = viewChild.required('surface');
|
|
31
|
+
/** Unset means derived from the anchor mode, i.e. `bottom-start`. */
|
|
32
|
+
placement = input(/* @ts-ignore */
|
|
33
|
+
...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
34
|
+
/** On by default: a dropdown keeps its click catcher. */
|
|
35
|
+
showBackdrop = input(true, /* @ts-ignore */
|
|
36
|
+
...(ngDevMode ? [{ debugName: "showBackdrop" }] : /* istanbul ignore next */ []));
|
|
37
|
+
panelClass = input('', /* @ts-ignore */
|
|
38
|
+
...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
|
|
39
|
+
/** Consulted before an outside click or Escape closes the panel. Return `false` to keep it open. */
|
|
40
|
+
canDismiss = input(() => true, /* @ts-ignore */
|
|
41
|
+
...(ngDevMode ? [{ debugName: "canDismiss" }] : /* istanbul ignore next */ []));
|
|
42
|
+
opened = output();
|
|
43
|
+
/** Fires for every close, asked for or gestured: a host's teardown belongs here, not in its own `close()`. */
|
|
44
|
+
closed = output();
|
|
45
|
+
isOpen = this.floating.isOpen;
|
|
46
|
+
/** For a host that must hear the gesture before it becomes a dismissal — see the filter dropdown. */
|
|
47
|
+
get overlayRef() {
|
|
48
|
+
return this.floating.overlayRef;
|
|
49
|
+
}
|
|
50
|
+
open(triggerElement) {
|
|
51
|
+
if (this.isOpen())
|
|
52
|
+
return;
|
|
53
|
+
this.floating.open(this.surface(), triggerElement, {
|
|
54
|
+
placement: this.placement(),
|
|
55
|
+
showBackdrop: this.showBackdrop(),
|
|
56
|
+
panelClass: this.panelClass(),
|
|
57
|
+
onClose: () => this.dismiss(),
|
|
58
|
+
});
|
|
59
|
+
this.opened.emit();
|
|
60
|
+
}
|
|
61
|
+
close() {
|
|
62
|
+
if (!this.isOpen())
|
|
63
|
+
return;
|
|
64
|
+
this.floating.close();
|
|
65
|
+
this.closed.emit();
|
|
66
|
+
}
|
|
67
|
+
toggle(triggerElement) {
|
|
68
|
+
if (this.isOpen()) {
|
|
69
|
+
this.close();
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
this.open(triggerElement);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
dismiss() {
|
|
76
|
+
if (this.canDismiss()()) {
|
|
77
|
+
this.close();
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropdownPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
81
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: DropdownPanelComponent, isStandalone: true, selector: "ap-dropdown-panel", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, canDismiss: { classPropertyName: "canDismiss", publicName: "canDismiss", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "content", first: true, predicate: DropdownContentDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #surface>\n <div class=\"ap-dropdown-panel\">\n <ng-container [ngTemplateOutlet]=\"content().template\" />\n </div>\n</ng-template>\n", styles: [":host{display:none}.ap-dropdown-panel{background-color:var(--comp-dropdown-panel-background-color);border-radius:var(--comp-dropdown-panel-border-radius);box-shadow:var(--comp-dropdown-panel-box-shadow)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
82
|
+
}
|
|
83
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropdownPanelComponent, decorators: [{
|
|
84
|
+
type: Component,
|
|
85
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-dropdown-panel', imports: [NgTemplateOutlet], template: "<ng-template #surface>\n <div class=\"ap-dropdown-panel\">\n <ng-container [ngTemplateOutlet]=\"content().template\" />\n </div>\n</ng-template>\n", styles: [":host{display:none}.ap-dropdown-panel{background-color:var(--comp-dropdown-panel-background-color);border-radius:var(--comp-dropdown-panel-border-radius);box-shadow:var(--comp-dropdown-panel-box-shadow)}\n"] }]
|
|
86
|
+
}], propDecorators: { content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownContentDirective), { isSignal: true }] }], surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], canDismiss: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDismiss", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* Generated bundle index. Do not edit.
|
|
90
|
+
*/
|
|
91
|
+
|
|
92
|
+
export { DropdownContentDirective, DropdownPanelComponent };
|
|
93
|
+
//# sourceMappingURL=agorapulse-ui-components-dropdown-panel.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-dropdown-panel.mjs","sources":["../../../libs/ui-components/dropdown-panel/src/dropdown-content.directive.ts","../../../libs/ui-components/dropdown-panel/src/dropdown-panel.component.ts","../../../libs/ui-components/dropdown-panel/src/dropdown-panel.component.html","../../../libs/ui-components/dropdown-panel/src/agorapulse-ui-components-dropdown-panel.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/** Marks the panel's content. A template, not `<ng-content>`, so nothing is created until the panel opens. */\n@Directive({ selector: 'ng-template[apDropdownContent]' })\nexport class DropdownContentDirective {\n readonly template = inject<TemplateRef<unknown>>(TemplateRef);\n}\n","import { createFloatingOverlay, FloatingPlacement } from '@agorapulse/ui-components/floating';\nimport { OverlayRef } from '@angular/cdk/overlay';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, contentChild, input, output, TemplateRef, viewChild } from '@angular/core';\nimport { DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport { DropdownContentDirective } from './dropdown-content.directive';\n\n/**\n * The surface a dropdown opens: white, rounded, elevated — and nothing more. No role and no focus\n * trap: the content brings its own semantics (`menu`, `listbox`…). A dialog wants the popover.\n *\n * @example\n * <button [apDropdownTrigger]=\"panel\">Columns</button>\n * <ap-dropdown-panel #panel>\n * <ng-template apDropdownContent>…</ng-template>\n * </ap-dropdown-panel>\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-dropdown-panel',\n imports: [NgTemplateOutlet],\n templateUrl: 'dropdown-panel.component.html',\n styleUrls: ['dropdown-panel.component.scss'],\n})\nexport class DropdownPanelComponent implements DropdownOverlay {\n private readonly floating = createFloatingOverlay();\n protected readonly content = contentChild.required(DropdownContentDirective);\n private readonly surface = viewChild.required<TemplateRef<unknown>>('surface');\n\n /** Unset means derived from the anchor mode, i.e. `bottom-start`. */\n readonly placement = input<FloatingPlacement>();\n\n /** On by default: a dropdown keeps its click catcher. */\n readonly showBackdrop = input(true);\n\n readonly panelClass = input<string | string[]>('');\n\n /** Consulted before an outside click or Escape closes the panel. Return `false` to keep it open. */\n readonly canDismiss = input<() => boolean>(() => true);\n\n readonly opened = output<void>();\n\n /** Fires for every close, asked for or gestured: a host's teardown belongs here, not in its own `close()`. */\n readonly closed = output<void>();\n\n readonly isOpen = this.floating.isOpen;\n\n /** For a host that must hear the gesture before it becomes a dismissal — see the filter dropdown. */\n get overlayRef(): OverlayRef | null {\n return this.floating.overlayRef;\n }\n\n open(triggerElement?: HTMLElement): void {\n if (this.isOpen()) return;\n\n this.floating.open(this.surface(), triggerElement, {\n placement: this.placement(),\n showBackdrop: this.showBackdrop(),\n panelClass: this.panelClass(),\n onClose: () => this.dismiss(),\n });\n this.opened.emit();\n }\n\n close(): void {\n if (!this.isOpen()) return;\n\n this.floating.close();\n this.closed.emit();\n }\n\n toggle(triggerElement?: HTMLElement): void {\n if (this.isOpen()) {\n this.close();\n } else {\n this.open(triggerElement);\n }\n }\n\n private dismiss(): void {\n if (this.canDismiss()()) {\n this.close();\n }\n }\n}\n","<ng-template #surface>\n <div class=\"ap-dropdown-panel\">\n <ng-container [ngTemplateOutlet]=\"content().template\" />\n </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|