@ascentgl/ads-ui 22.0.3 → 22.1.0
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.
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, ChangeDetectionStrategy, Component, input, output, computed, inject, model, signal, viewChild, effect, HostListener, ElementRef, ViewChild, Directive, EventEmitter, Output, InjectionToken, DestroyRef, HostBinding, Pipe, contentChild, TemplateRef, Inject, Optional, Injectable, ChangeDetectorRef, Renderer2, ViewChildren } from '@angular/core';
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component, input, output, computed, inject, model, signal, viewChild, effect, HostListener, ElementRef, ViewChild, Directive, EventEmitter, Output, InjectionToken, DestroyRef, HostBinding, Pipe, contentChild, TemplateRef, Inject, Optional, Injectable, ChangeDetectorRef, Renderer2, viewChildren, booleanAttribute, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgTemplateOutlet, NgStyle, DOCUMENT, NgClass } from '@angular/common';
|
|
5
5
|
import * as i1 from '@ascentgl/ads-icons';
|
|
6
6
|
import { AdsIconComponent, AdsIconRegistry } from '@ascentgl/ads-icons';
|
|
7
|
-
import { adsIconUserCircle, adsIconBell, adsIconMenuMoreInfo, adsIconChevronRight, adsIconCross, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconStarFull, adsIconUsers, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker, adsIconCheck, adsIconDropdownArrow, adsIconChevronUp, adsIconDrag, adsIconSortDownToUp, adsIconSortUpToDown, adsIconMenuFilters, adsIconSortingArrowUp, adsIconSortingArrowDown, adsIconTableFilter, adsIconFilter, adsIconArrowUpAndDown, adsIconListView, adsIconGridView, adsIconHamburgerMenu, adsIconChevronLeft, adsIconStatusNew, adsIconPencil, adsIconFileAdd, adsIconCanceledShipment } from '@ascentgl/ads-icons/icons';
|
|
7
|
+
import { adsIconUserCircle, adsIconBell, adsIconMenuMoreInfo, adsIconChevronRight, adsIconCross, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconStarFull, adsIconUsers, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker, adsIconCheck, adsIconDropdownArrow, adsIconDuplicate, adsIconBookmarkAlt, adsIconRedo, adsIconCrossCircleOutline, adsIconChevronUp, adsIconDrag, adsIconSortDownToUp, adsIconSortUpToDown, adsIconMenuFilters, adsIconSortingArrowUp, adsIconSortingArrowDown, adsIconTableFilter, adsIconFilter, adsIconArrowUpAndDown, adsIconListView, adsIconGridView, adsIconHamburgerMenu, adsIconChevronLeft, adsIconStatusNew, adsIconPencil, adsIconFileAdd, adsIconCanceledShipment } from '@ascentgl/ads-icons/icons';
|
|
8
8
|
import { MatBadge } from '@angular/material/badge';
|
|
9
9
|
import * as i1$2 from '@angular/router';
|
|
10
10
|
import { RouterModule, RouterLinkActive, RouterLink, NavigationStart, RouterOutlet } from '@angular/router';
|
|
@@ -50,6 +50,8 @@ import * as i1$4 from '@angular/cdk/layout';
|
|
|
50
50
|
import { Breakpoints } from '@angular/cdk/layout';
|
|
51
51
|
import * as i1$5 from '@angular/material/dialog';
|
|
52
52
|
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
53
|
+
import { ComponentPortal } from '@angular/cdk/portal';
|
|
54
|
+
import { ESCAPE } from '@angular/cdk/keycodes';
|
|
53
55
|
import { MatExpansionPanel, MatExpansionPanelTitle, MatExpansionPanelHeader, MatExpansionPanelDescription, MatAccordion } from '@angular/material/expansion';
|
|
54
56
|
import { ModuleRegistry, AllCommunityModule, themeQuartz } from 'ag-grid-community';
|
|
55
57
|
import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
@@ -6565,6 +6567,282 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
6565
6567
|
args: ['document:click', ['$event']]
|
|
6566
6568
|
}] } });
|
|
6567
6569
|
|
|
6570
|
+
class AdsMenuDropDownComponent {
|
|
6571
|
+
constructor(registry) {
|
|
6572
|
+
this.registry = registry;
|
|
6573
|
+
/** The list of menu items to display */
|
|
6574
|
+
this.items = input([], /* @ts-ignore */
|
|
6575
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
6576
|
+
/** Accessible label describing the menu, exposed via `aria-label` */
|
|
6577
|
+
this.ariaLabel = input('Menu', /* @ts-ignore */
|
|
6578
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
6579
|
+
/** Move keyboard focus to the first item once the menu is rendered */
|
|
6580
|
+
this.autoFocus = input(true, /* @ts-ignore */
|
|
6581
|
+
...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
|
|
6582
|
+
/** Emitted when an enabled item is selected (via click, Enter or Space) */
|
|
6583
|
+
this.itemSelect = output();
|
|
6584
|
+
/** Emitted when the menu requests to close (Escape key or Tab out) */
|
|
6585
|
+
this.closed = output();
|
|
6586
|
+
/** @ignore Index of the item that currently owns the roving tabindex */
|
|
6587
|
+
this.activeIndex = signal(0, /* @ts-ignore */
|
|
6588
|
+
...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
|
|
6589
|
+
/** @ignore References to the rendered menu item buttons */
|
|
6590
|
+
this.itemButtons = viewChildren('menuItemRef', /* @ts-ignore */
|
|
6591
|
+
...(ngDevMode ? [{ debugName: "itemButtons" }] : /* istanbul ignore next */ []));
|
|
6592
|
+
// Register the icons used by the Figma design so the component renders out of
|
|
6593
|
+
// the box. Any additional icons referenced by `items` must be registered by
|
|
6594
|
+
// the host application via AdsIconRegistry.
|
|
6595
|
+
this.registry.register([
|
|
6596
|
+
adsIconVisibilityEye,
|
|
6597
|
+
adsIconDuplicate,
|
|
6598
|
+
adsIconBookmarkAlt,
|
|
6599
|
+
adsIconRedo,
|
|
6600
|
+
adsIconCrossCircleOutline,
|
|
6601
|
+
]);
|
|
6602
|
+
// Keep the active item in sync when the list of items changes.
|
|
6603
|
+
effect(() => {
|
|
6604
|
+
this.items();
|
|
6605
|
+
this.activeIndex.set(this.firstEnabledIndex());
|
|
6606
|
+
});
|
|
6607
|
+
}
|
|
6608
|
+
/** @ignore */
|
|
6609
|
+
ngAfterViewInit() {
|
|
6610
|
+
if (this.autoFocus()) {
|
|
6611
|
+
this.focusIndex(this.firstEnabledIndex());
|
|
6612
|
+
}
|
|
6613
|
+
}
|
|
6614
|
+
/** @ignore Handles all keyboard interaction for the menu */
|
|
6615
|
+
onKeydown(event) {
|
|
6616
|
+
switch (event.key) {
|
|
6617
|
+
case 'ArrowDown':
|
|
6618
|
+
event.preventDefault();
|
|
6619
|
+
this.moveFocus(1);
|
|
6620
|
+
break;
|
|
6621
|
+
case 'ArrowUp':
|
|
6622
|
+
event.preventDefault();
|
|
6623
|
+
this.moveFocus(-1);
|
|
6624
|
+
break;
|
|
6625
|
+
case 'Home':
|
|
6626
|
+
event.preventDefault();
|
|
6627
|
+
this.focusIndex(this.firstEnabledIndex());
|
|
6628
|
+
break;
|
|
6629
|
+
case 'End':
|
|
6630
|
+
event.preventDefault();
|
|
6631
|
+
this.focusIndex(this.lastEnabledIndex());
|
|
6632
|
+
break;
|
|
6633
|
+
case 'Enter':
|
|
6634
|
+
case ' ':
|
|
6635
|
+
case 'Spacebar':
|
|
6636
|
+
event.preventDefault();
|
|
6637
|
+
this.selectActive();
|
|
6638
|
+
break;
|
|
6639
|
+
case 'Escape':
|
|
6640
|
+
event.preventDefault();
|
|
6641
|
+
this.closed.emit();
|
|
6642
|
+
break;
|
|
6643
|
+
case 'Tab':
|
|
6644
|
+
this.closed.emit();
|
|
6645
|
+
break;
|
|
6646
|
+
}
|
|
6647
|
+
}
|
|
6648
|
+
/** @ignore */
|
|
6649
|
+
selectItem(item) {
|
|
6650
|
+
if (item.disabled) {
|
|
6651
|
+
return;
|
|
6652
|
+
}
|
|
6653
|
+
this.itemSelect.emit(item);
|
|
6654
|
+
}
|
|
6655
|
+
/** @ignore */
|
|
6656
|
+
selectActive() {
|
|
6657
|
+
const item = this.items()[this.activeIndex()];
|
|
6658
|
+
if (item) {
|
|
6659
|
+
this.selectItem(item);
|
|
6660
|
+
}
|
|
6661
|
+
}
|
|
6662
|
+
/** @ignore Moves focus to the next enabled item in the given direction, wrapping around */
|
|
6663
|
+
moveFocus(direction) {
|
|
6664
|
+
const items = this.items();
|
|
6665
|
+
const count = items.length;
|
|
6666
|
+
if (!count) {
|
|
6667
|
+
return;
|
|
6668
|
+
}
|
|
6669
|
+
let index = this.activeIndex();
|
|
6670
|
+
for (let step = 0; step < count; step++) {
|
|
6671
|
+
index = (index + direction + count) % count;
|
|
6672
|
+
if (!items[index].disabled) {
|
|
6673
|
+
this.focusIndex(index);
|
|
6674
|
+
return;
|
|
6675
|
+
}
|
|
6676
|
+
}
|
|
6677
|
+
}
|
|
6678
|
+
/** @ignore */
|
|
6679
|
+
focusIndex(index) {
|
|
6680
|
+
if (index < 0) {
|
|
6681
|
+
return;
|
|
6682
|
+
}
|
|
6683
|
+
this.activeIndex.set(index);
|
|
6684
|
+
this.itemButtons()[index]?.nativeElement.focus();
|
|
6685
|
+
}
|
|
6686
|
+
/** @ignore */
|
|
6687
|
+
firstEnabledIndex() {
|
|
6688
|
+
return this.items().findIndex((item) => !item.disabled);
|
|
6689
|
+
}
|
|
6690
|
+
/** @ignore */
|
|
6691
|
+
lastEnabledIndex() {
|
|
6692
|
+
const items = this.items();
|
|
6693
|
+
for (let index = items.length - 1; index >= 0; index--) {
|
|
6694
|
+
if (!items[index].disabled) {
|
|
6695
|
+
return index;
|
|
6696
|
+
}
|
|
6697
|
+
}
|
|
6698
|
+
return -1;
|
|
6699
|
+
}
|
|
6700
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsMenuDropDownComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6701
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsMenuDropDownComponent, isStandalone: true, selector: "ads-menu-drop-down", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", closed: "closed" }, viewQueries: [{ propertyName: "itemButtons", predicate: ["menuItemRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ads-menu-drop-down\" role=\"menu\" [attr.aria-label]=\"ariaLabel()\" (keydown)=\"onKeydown($event)\">\n @for (item of items(); track item.id; let i = $index) {\n <button\n #menuItemRef\n type=\"button\"\n role=\"menuitem\"\n class=\"ads-menu-drop-down__item\"\n [id]=\"item.id\"\n [disabled]=\"item.disabled\"\n [attr.aria-disabled]=\"item.disabled || null\"\n [attr.tabindex]=\"activeIndex() === i ? 0 : -1\"\n (click)=\"selectItem(item)\"\n (focus)=\"activeIndex.set(i)\"\n >\n @if (item.icon) {\n <ads-icon class=\"ads-menu-drop-down__icon\" [name]=\"item.icon\" size=\"xxs_16\" />\n }\n <span class=\"ads-menu-drop-down__label\">{{ item.label }}</span>\n </button>\n }\n</div>\n", styles: [":host{display:inline-block}.ads-menu-drop-down{display:flex;flex-direction:column;align-items:stretch;min-width:184px;background-color:var(--color-white);border-radius:5px;box-shadow:0 8px 12px var(--color-medium-opacity-50);overflow:hidden}.ads-menu-drop-down__item{display:flex;align-items:center;gap:8px;width:100%;min-height:45px;padding:12px;border:none;background:transparent;font-family:Roboto,Helvetica Neue,sans-serif;font-size:16px;line-height:21px;font-weight:400;color:var(--color-dark);text-align:left;cursor:pointer}.ads-menu-drop-down__item .ads-menu-drop-down__icon{flex-shrink:0;width:16px!important;height:16px!important;color:var(--color-secondary);stroke:currentColor}.ads-menu-drop-down__item:not(:disabled):hover,.ads-menu-drop-down__item:not(:disabled):focus-visible{background-color:var(--color-secondary);color:var(--color-white);outline:none}.ads-menu-drop-down__item:not(:disabled):hover .ads-menu-drop-down__icon,.ads-menu-drop-down__item:not(:disabled):focus-visible .ads-menu-drop-down__icon{color:var(--color-white)}.ads-menu-drop-down__item:not(:disabled):active{background-color:var(--color-secondary-pressed);color:var(--color-white)}.ads-menu-drop-down__item:not(:disabled):active .ads-menu-drop-down__icon{color:var(--color-white)}.ads-menu-drop-down__item:disabled{color:var(--color-medium-50);cursor:default}.ads-menu-drop-down__item:disabled .ads-menu-drop-down__icon{color:var(--color-medium-50)}\n"], dependencies: [{ kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6702
|
+
}
|
|
6703
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsMenuDropDownComponent, decorators: [{
|
|
6704
|
+
type: Component,
|
|
6705
|
+
args: [{ selector: 'ads-menu-drop-down', imports: [AdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ads-menu-drop-down\" role=\"menu\" [attr.aria-label]=\"ariaLabel()\" (keydown)=\"onKeydown($event)\">\n @for (item of items(); track item.id; let i = $index) {\n <button\n #menuItemRef\n type=\"button\"\n role=\"menuitem\"\n class=\"ads-menu-drop-down__item\"\n [id]=\"item.id\"\n [disabled]=\"item.disabled\"\n [attr.aria-disabled]=\"item.disabled || null\"\n [attr.tabindex]=\"activeIndex() === i ? 0 : -1\"\n (click)=\"selectItem(item)\"\n (focus)=\"activeIndex.set(i)\"\n >\n @if (item.icon) {\n <ads-icon class=\"ads-menu-drop-down__icon\" [name]=\"item.icon\" size=\"xxs_16\" />\n }\n <span class=\"ads-menu-drop-down__label\">{{ item.label }}</span>\n </button>\n }\n</div>\n", styles: [":host{display:inline-block}.ads-menu-drop-down{display:flex;flex-direction:column;align-items:stretch;min-width:184px;background-color:var(--color-white);border-radius:5px;box-shadow:0 8px 12px var(--color-medium-opacity-50);overflow:hidden}.ads-menu-drop-down__item{display:flex;align-items:center;gap:8px;width:100%;min-height:45px;padding:12px;border:none;background:transparent;font-family:Roboto,Helvetica Neue,sans-serif;font-size:16px;line-height:21px;font-weight:400;color:var(--color-dark);text-align:left;cursor:pointer}.ads-menu-drop-down__item .ads-menu-drop-down__icon{flex-shrink:0;width:16px!important;height:16px!important;color:var(--color-secondary);stroke:currentColor}.ads-menu-drop-down__item:not(:disabled):hover,.ads-menu-drop-down__item:not(:disabled):focus-visible{background-color:var(--color-secondary);color:var(--color-white);outline:none}.ads-menu-drop-down__item:not(:disabled):hover .ads-menu-drop-down__icon,.ads-menu-drop-down__item:not(:disabled):focus-visible .ads-menu-drop-down__icon{color:var(--color-white)}.ads-menu-drop-down__item:not(:disabled):active{background-color:var(--color-secondary-pressed);color:var(--color-white)}.ads-menu-drop-down__item:not(:disabled):active .ads-menu-drop-down__icon{color:var(--color-white)}.ads-menu-drop-down__item:disabled{color:var(--color-medium-50);cursor:default}.ads-menu-drop-down__item:disabled .ads-menu-drop-down__icon{color:var(--color-medium-50)}\n"] }]
|
|
6706
|
+
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], closed: [{ type: i0.Output, args: ["closed"] }], itemButtons: [{ type: i0.ViewChildren, args: ['menuItemRef', { isSignal: true }] }] } });
|
|
6707
|
+
|
|
6708
|
+
const POSITIONS = {
|
|
6709
|
+
'below-start': { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
|
|
6710
|
+
'below-end': { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
|
|
6711
|
+
'above-start': { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
|
|
6712
|
+
'above-end': { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
|
|
6713
|
+
};
|
|
6714
|
+
/** Fallback order: try the preferred position first, then flip vertically, then horizontally. */
|
|
6715
|
+
const FALLBACK_ORDER = {
|
|
6716
|
+
'below-start': ['below-start', 'above-start', 'below-end', 'above-end'],
|
|
6717
|
+
'below-end': ['below-end', 'above-end', 'below-start', 'above-start'],
|
|
6718
|
+
'above-start': ['above-start', 'below-start', 'above-end', 'below-end'],
|
|
6719
|
+
'above-end': ['above-end', 'below-end', 'above-start', 'below-start'],
|
|
6720
|
+
};
|
|
6721
|
+
/**
|
|
6722
|
+
* Opens an {@link AdsMenuDropDownComponent} in a CDK overlay anchored to the host element.
|
|
6723
|
+
*
|
|
6724
|
+
* The overlay is rendered at the document root (so it is never clipped by an ag-grid cell or
|
|
6725
|
+
* any `overflow: hidden` ancestor) and auto-positions itself: it opens towards `menuPosition`
|
|
6726
|
+
* when there is room, otherwise it flips to whichever side fits, and is pushed fully into the
|
|
6727
|
+
* viewport as a last resort so it is always visible.
|
|
6728
|
+
*
|
|
6729
|
+
* @example
|
|
6730
|
+
* ```html
|
|
6731
|
+
* <ads-icon-button
|
|
6732
|
+
* [adsMenuDropDownTriggerFor]="actionItems"
|
|
6733
|
+
* menuPosition="below-start"
|
|
6734
|
+
* (itemSelect)="onAction($event, row)">
|
|
6735
|
+
* <ads-icon name="more_vertical" />
|
|
6736
|
+
* </ads-icon-button>
|
|
6737
|
+
* ```
|
|
6738
|
+
*/
|
|
6739
|
+
class AdsMenuDropDownTriggerDirective {
|
|
6740
|
+
constructor() {
|
|
6741
|
+
this.overlay = inject(Overlay);
|
|
6742
|
+
this.elementRef = inject((ElementRef));
|
|
6743
|
+
/** The items to render inside the menu */
|
|
6744
|
+
this.items = input.required({ ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), alias: 'adsMenuDropDownTriggerFor' });
|
|
6745
|
+
/** Preferred side/alignment the menu opens towards before auto-flipping */
|
|
6746
|
+
this.menuPosition = input('below-start', /* @ts-ignore */
|
|
6747
|
+
...(ngDevMode ? [{ debugName: "menuPosition" }] : /* istanbul ignore next */ []));
|
|
6748
|
+
/** Accessible label applied to the menu panel */
|
|
6749
|
+
this.menuAriaLabel = input('Menu', /* @ts-ignore */
|
|
6750
|
+
...(ngDevMode ? [{ debugName: "menuAriaLabel" }] : /* istanbul ignore next */ []));
|
|
6751
|
+
/** Disable the trigger so the menu cannot be opened */
|
|
6752
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6753
|
+
/** Emitted when an enabled item is selected */
|
|
6754
|
+
this.itemSelect = output();
|
|
6755
|
+
/** Emitted when the menu opens */
|
|
6756
|
+
this.menuOpened = output();
|
|
6757
|
+
/** Emitted when the menu closes */
|
|
6758
|
+
this.menuClosed = output();
|
|
6759
|
+
/** @ignore Whether the menu is currently open */
|
|
6760
|
+
this.isOpen = signal(false, /* @ts-ignore */
|
|
6761
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
6762
|
+
/** @ignore */
|
|
6763
|
+
this.overlayRef = null;
|
|
6764
|
+
/** @ignore */
|
|
6765
|
+
this.menuRef = null;
|
|
6766
|
+
}
|
|
6767
|
+
/** @ignore */
|
|
6768
|
+
toggle() {
|
|
6769
|
+
if (this.isOpen()) {
|
|
6770
|
+
this.close();
|
|
6771
|
+
}
|
|
6772
|
+
else {
|
|
6773
|
+
this.open();
|
|
6774
|
+
}
|
|
6775
|
+
}
|
|
6776
|
+
/** Open the menu (no-op if disabled or already open). */
|
|
6777
|
+
open() {
|
|
6778
|
+
if (this.disabled() || this.isOpen()) {
|
|
6779
|
+
return;
|
|
6780
|
+
}
|
|
6781
|
+
const positionStrategy = this.overlay
|
|
6782
|
+
.position()
|
|
6783
|
+
.flexibleConnectedTo(this.elementRef)
|
|
6784
|
+
.withPositions(FALLBACK_ORDER[this.menuPosition()].map((key) => POSITIONS[key]))
|
|
6785
|
+
.withPush(true)
|
|
6786
|
+
.withFlexibleDimensions(false)
|
|
6787
|
+
.withViewportMargin(8);
|
|
6788
|
+
this.overlayRef = this.overlay.create({
|
|
6789
|
+
positionStrategy,
|
|
6790
|
+
// Dismiss the menu when the user scrolls (e.g. scrolling the ag-grid body),
|
|
6791
|
+
// matching standard menu behaviour.
|
|
6792
|
+
scrollStrategy: this.overlay.scrollStrategies.close(),
|
|
6793
|
+
hasBackdrop: true,
|
|
6794
|
+
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
6795
|
+
});
|
|
6796
|
+
this.menuRef = this.overlayRef.attach(new ComponentPortal(AdsMenuDropDownComponent));
|
|
6797
|
+
this.menuRef.setInput('items', this.items());
|
|
6798
|
+
this.menuRef.setInput('ariaLabel', this.menuAriaLabel());
|
|
6799
|
+
this.menuRef.setInput('autoFocus', true);
|
|
6800
|
+
this.menuRef.instance.itemSelect.subscribe((item) => {
|
|
6801
|
+
this.itemSelect.emit(item);
|
|
6802
|
+
this.close();
|
|
6803
|
+
});
|
|
6804
|
+
this.menuRef.instance.closed.subscribe(() => this.close());
|
|
6805
|
+
this.overlayRef.backdropClick().subscribe(() => this.close());
|
|
6806
|
+
this.overlayRef.detachments().subscribe(() => this.close());
|
|
6807
|
+
this.overlayRef.keydownEvents().subscribe((event) => {
|
|
6808
|
+
if (event.keyCode === ESCAPE) {
|
|
6809
|
+
this.close();
|
|
6810
|
+
}
|
|
6811
|
+
});
|
|
6812
|
+
this.isOpen.set(true);
|
|
6813
|
+
this.menuOpened.emit();
|
|
6814
|
+
}
|
|
6815
|
+
/** Close the menu and restore focus to the trigger. */
|
|
6816
|
+
close() {
|
|
6817
|
+
if (!this.isOpen()) {
|
|
6818
|
+
return;
|
|
6819
|
+
}
|
|
6820
|
+
this.overlayRef?.dispose();
|
|
6821
|
+
this.overlayRef = null;
|
|
6822
|
+
this.menuRef = null;
|
|
6823
|
+
this.isOpen.set(false);
|
|
6824
|
+
this.elementRef.nativeElement.focus();
|
|
6825
|
+
this.menuClosed.emit();
|
|
6826
|
+
}
|
|
6827
|
+
/** @ignore */
|
|
6828
|
+
ngOnDestroy() {
|
|
6829
|
+
this.overlayRef?.dispose();
|
|
6830
|
+
}
|
|
6831
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsMenuDropDownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6832
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: AdsMenuDropDownTriggerDirective, isStandalone: true, selector: "[adsMenuDropDownTriggerFor]", inputs: { items: { classPropertyName: "items", publicName: "adsMenuDropDownTriggerFor", isSignal: true, isRequired: true, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null }, menuAriaLabel: { classPropertyName: "menuAriaLabel", publicName: "menuAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { listeners: { "click": "toggle()" }, properties: { "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "isOpen()" } }, ngImport: i0 }); }
|
|
6833
|
+
}
|
|
6834
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsMenuDropDownTriggerDirective, decorators: [{
|
|
6835
|
+
type: Directive,
|
|
6836
|
+
args: [{
|
|
6837
|
+
selector: '[adsMenuDropDownTriggerFor]',
|
|
6838
|
+
host: {
|
|
6839
|
+
'[attr.aria-haspopup]': '"menu"',
|
|
6840
|
+
'[attr.aria-expanded]': 'isOpen()',
|
|
6841
|
+
'(click)': 'toggle()',
|
|
6842
|
+
},
|
|
6843
|
+
}]
|
|
6844
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "adsMenuDropDownTriggerFor", required: true }] }], menuPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuPosition", required: false }] }], menuAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuAriaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }] } });
|
|
6845
|
+
|
|
6568
6846
|
class AdsExpansionPanelComponent {
|
|
6569
6847
|
constructor(registry, elementRef) {
|
|
6570
6848
|
this.registry = registry;
|
|
@@ -11075,5 +11353,5 @@ function provideAdsUi(config) {
|
|
|
11075
11353
|
* Generated bundle index. Do not edit.
|
|
11076
11354
|
*/
|
|
11077
11355
|
|
|
11078
|
-
export { AdsArchitectureLogoComponent, AdsAscentLogoComponent, AdsAvatarComponent, AdsBaselineWidgetComponent, AdsBreadcrumbComponent, AdsBubbleComponent, AdsButtonComponent, AdsButtonContainerComponent, AdsCardComponent, AdsCheckboxComponent, AdsChipComponent, AdsColumnSortFilterMenuComponent, AdsCreateTagComponent, AdsCurrencyFieldComponent, AdsCustomHeaderComponent, AdsCustomerPortalLogoComponent, AdsCxaLogoComponent, AdsDatepickerComponent, AdsDatetimepickerComponent, AdsDragAndDropListComponent, AdsDropdownComponent, AdsErrorPageCodeComponent, AdsErrorPageComponent, AdsExpansionPanelComponent, AdsFilterMenuComponent, AdsFooterComponent, AdsFooterContainerComponent, AdsGenericLogoComponent, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHistoryStepperComponent, AdsHorizontalNavBarComponent, AdsHorizontalStepperComponent, AdsIconButtonComponent, AdsIconHoverComponent, AdsInputComponent, AdsInputDropdownComponent, AdsInternationalPhoneFieldComponent, AdsLinkButtonComponent, AdsMainMenuComponent, AdsModalComponent, AdsMultiSelectDropdownComponent, AdsNavMenuComponent, AdsNavigationCollapseHandleComponent, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationItemComponent, AdsNavigationItemsContainerComponent, AdsNumericBadgeComponent, AdsNumericStepperComponent, AdsOrgDisplayTextComponent, AdsPeakEssentialsLogoComponent, AdsPeakMarketplaceLogoComponent, AdsPeakOrderManagementLogoComponent, AdsPhoneFieldComponent, AdsPilotPayLogoComponent, AdsPrimaryLogoComponent, AdsProgressBarComponent, AdsProgressIndicatorSpinnerComponent, AdsProgressSpinnerComponent, AdsProgressStepperComponent, AdsRadioButtonComponent, AdsScmsLogoComponent, AdsScmsSideNavBarComponent, AdsSearchDropdownComponent, AdsSearchInputComponent, AdsShipmentHorizontalStepperComponent, AdsSideNavBarComponent, AdsSideNavBarV2Component, AdsSlideToggleComponent, AdsSliderComponent, AdsSnackbarComponent, AdsSortMenuComponent, AdsSplashPageComponent, AdsStepperComponent, AdsSubNavigationButtonComponent, AdsTableComponent, AdsTabsComponent, AdsTagComponent, AdsTagContainerComponent, AdsTextareaComponent, AdsTimeFieldComponent, AdsTimepickerComponent, AdsVerticalSideNavigationStepperComponent, AdsWizardStepperComponent, AscentCardComponent, BadgeColor, Colors, CountryCode, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, HistoryAction, HorizontalStepStatus, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus, provideAdsUi };
|
|
11356
|
+
export { AdsArchitectureLogoComponent, AdsAscentLogoComponent, AdsAvatarComponent, AdsBaselineWidgetComponent, AdsBreadcrumbComponent, AdsBubbleComponent, AdsButtonComponent, AdsButtonContainerComponent, AdsCardComponent, AdsCheckboxComponent, AdsChipComponent, AdsColumnSortFilterMenuComponent, AdsCreateTagComponent, AdsCurrencyFieldComponent, AdsCustomHeaderComponent, AdsCustomerPortalLogoComponent, AdsCxaLogoComponent, AdsDatepickerComponent, AdsDatetimepickerComponent, AdsDragAndDropListComponent, AdsDropdownComponent, AdsErrorPageCodeComponent, AdsErrorPageComponent, AdsExpansionPanelComponent, AdsFilterMenuComponent, AdsFooterComponent, AdsFooterContainerComponent, AdsGenericLogoComponent, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHistoryStepperComponent, AdsHorizontalNavBarComponent, AdsHorizontalStepperComponent, AdsIconButtonComponent, AdsIconHoverComponent, AdsInputComponent, AdsInputDropdownComponent, AdsInternationalPhoneFieldComponent, AdsLinkButtonComponent, AdsMainMenuComponent, AdsMenuDropDownComponent, AdsMenuDropDownTriggerDirective, AdsModalComponent, AdsMultiSelectDropdownComponent, AdsNavMenuComponent, AdsNavigationCollapseHandleComponent, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationItemComponent, AdsNavigationItemsContainerComponent, AdsNumericBadgeComponent, AdsNumericStepperComponent, AdsOrgDisplayTextComponent, AdsPeakEssentialsLogoComponent, AdsPeakMarketplaceLogoComponent, AdsPeakOrderManagementLogoComponent, AdsPhoneFieldComponent, AdsPilotPayLogoComponent, AdsPrimaryLogoComponent, AdsProgressBarComponent, AdsProgressIndicatorSpinnerComponent, AdsProgressSpinnerComponent, AdsProgressStepperComponent, AdsRadioButtonComponent, AdsScmsLogoComponent, AdsScmsSideNavBarComponent, AdsSearchDropdownComponent, AdsSearchInputComponent, AdsShipmentHorizontalStepperComponent, AdsSideNavBarComponent, AdsSideNavBarV2Component, AdsSlideToggleComponent, AdsSliderComponent, AdsSnackbarComponent, AdsSortMenuComponent, AdsSplashPageComponent, AdsStepperComponent, AdsSubNavigationButtonComponent, AdsTableComponent, AdsTabsComponent, AdsTagComponent, AdsTagContainerComponent, AdsTextareaComponent, AdsTimeFieldComponent, AdsTimepickerComponent, AdsVerticalSideNavigationStepperComponent, AdsWizardStepperComponent, AscentCardComponent, BadgeColor, Colors, CountryCode, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, HistoryAction, HorizontalStepStatus, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus, provideAdsUi };
|
|
11079
11357
|
//# sourceMappingURL=ascentgl-ads-ui.mjs.map
|