@villedemontreal/angular-ui 3.2.0-pre.build.1 → 3.3.0

package/fesm2020/villedemontreal-angular-ui.mjs

@@ -12,12 +12,12 @@ import * as i2 from '@angular/cdk/collections';
 import * as i1$4 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import * as i3 from '@angular/cdk/portal';
-import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
+import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule, DomPortal } from '@angular/cdk/portal';
 import { Subject, filter, take, defer, startWith, Subscription } from 'rxjs';
 import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
 import { trigger, state, style, transition, group, animate, query, animateChild } from '@angular/animations';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
-import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
+import { ANIMATION_MODULE_TYPE, BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 function baoColorToHex(baoColor) {
     switch (baoColor) {
@@ -3827,12 +3827,26 @@ const MODAL_DIRECTIVES = [BaoModalContainer, BaoModalClose];
 class BaoModalModule {
 }
 BaoModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BaoModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoModalModule, declarations: [BaoModalContainer, BaoModalClose], imports: [CommonModule, OverlayModule, PortalModule], exports: [BaoModalContainer, BaoModalClose] });
-BaoModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModalModule, providers: [BaoModal], imports: [CommonModule, OverlayModule, PortalModule] });
+BaoModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoModalModule, declarations: [BaoModalContainer, BaoModalClose], imports: [CommonModule,
+        OverlayModule,
+        PortalModule,
+        BrowserAnimationsModule,
+        NoopAnimationsModule], exports: [BaoModalContainer, BaoModalClose] });
+BaoModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModalModule, providers: [BaoModal], imports: [CommonModule,
+        OverlayModule,
+        PortalModule,
+        BrowserAnimationsModule,
+        NoopAnimationsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModalModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, OverlayModule, PortalModule],
+                    imports: [
+                        CommonModule,
+                        OverlayModule,
+                        PortalModule,
+                        BrowserAnimationsModule,
+                        NoopAnimationsModule
+                    ],
                     declarations: MODAL_DIRECTIVES,
                     exports: MODAL_DIRECTIVES,
                     providers: [BaoModal]
@@ -3938,6 +3952,566 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
  * See LICENSE file in the project root for full license information.
  */
 
+/*
+ * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+/**
+ * Unique ID for each dropdown menu
+ */
+let dropdownMenuUniqueId = 0;
+class BaoDropdownMenuItem {
+    constructor(renderer, elementRef, _parent) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this._parent = _parent;
+        /**
+         * Is the list item disabled
+         */
+        this.disabled = false;
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    spaceKeyEvent() {
+        if (document.activeElement == this.nativeElement) {
+            this.nativeElement.click();
+        }
+    }
+    onClick() {
+        if (this.nativeElement.attributes['href']) {
+            this._parent.setNavigationAttribute(this.nativeElement);
+        }
+        this.propagateClick();
+    }
+    enterKeyEvent() {
+        if (document.activeElement == this.nativeElement) {
+            if (this.nativeElement.attributes['href']) {
+                this._parent.setNavigationAttribute(this.nativeElement);
+            }
+            this.propagateClick();
+        }
+    }
+    ngAfterViewInit() {
+        this.addContentDiv();
+        if (!this.disabled) {
+            this.renderer.setAttribute(this.nativeElement, 'tabIndex', '0');
+        }
+        this.addPaddingClass();
+        // Remove input element inside item from keyboard navigation sequence
+        if (this.nativeElement.classList.contains('has-element-left')) {
+            this.renderer.setAttribute(this.nativeElement.children.item(0).firstElementChild, 'tabIndex', '-1');
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['disabled'] && changes['disabled'].currentValue == true) {
+            this.disableItem();
+        }
+    }
+    /** Regroups label and description in a new div to help with layout */
+    addContentDiv() {
+        const children = Array.from(this.nativeElement.children);
+        const labelIndex = children.findIndex(c => c.localName === 'bao-dropdown-menu-item-label');
+        const labelElement = children[labelIndex];
+        this.renderer.removeChild(this.nativeElement, children[labelIndex]);
+        const contentDiv = this.renderer.createElement('div');
+        this.renderer.addClass(contentDiv, 'bao-dropdown-menu-item-content');
+        this.renderer.appendChild(this.nativeElement, contentDiv);
+        this.renderer.appendChild(contentDiv, labelElement);
+        const descriptionIndex = children.findIndex(c => c.localName === 'bao-dropdown-menu-item-description');
+        if (descriptionIndex > 0) {
+            const descriptionElement = children[descriptionIndex];
+            this.renderer.removeChild(this.nativeElement, children[descriptionIndex]);
+            this.renderer.appendChild(contentDiv, descriptionElement);
+        }
+    }
+    addPaddingClass() {
+        const children = Array.from(this.nativeElement.children);
+        // Menu item has extra element next to label
+        if (children.length > 1) {
+            // Only toggle element can be on the right
+            if (children.findIndex(c => c.localName === 'bao-toggle') > 0) {
+                this.renderer.addClass(this.nativeElement, 'has-element-right');
+            }
+            // Icon, checkbox, radio button or avatar must be on the left
+            else {
+                this.renderer.addClass(this.nativeElement, 'has-element-left');
+            }
+        }
+    }
+    disableItem() {
+        if (this.disabled) {
+            this.renderer.setAttribute(this.nativeElement, 'aria-disabled', 'true');
+            this.renderer.setAttribute(this.nativeElement, 'tabIndex', '-1');
+        }
+    }
+    /**
+     * This method propagates a click event to menu item children with inputs (checkbox, radio button)
+     */
+    propagateClick() {
+        for (let i = 0; i < this.nativeElement.children.length; i++) {
+            if (this.nativeElement.children.item(i).firstElementChild.localName ==
+                'input') {
+                this.nativeElement.children.item(i).firstElementChild.click();
+            }
+        }
+    }
+}
+BaoDropdownMenuItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuItem, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: BaoDropdownMenuComponent }], target: i0.ɵɵFactoryTarget.Directive });
+BaoDropdownMenuItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: BaoDropdownMenuItem, selector: "bao-dropdown-menu-item, [bao-dropdown-menu-item]", inputs: { disabled: "disabled" }, host: { listeners: { "window:keyup.space": "spaceKeyEvent()", "click": "onClick()", "window:keydown.enter": "enterKeyEvent()" }, properties: { "class.bao-dropdown-menu-item-disabled": "disabled===true" }, classAttribute: "bao-dropdown-menu-item" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'bao-dropdown-menu-item, [bao-dropdown-menu-item]',
+                    host: {
+                        class: 'bao-dropdown-menu-item',
+                        '[class.bao-dropdown-menu-item-disabled]': 'disabled===true'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: BaoDropdownMenuComponent }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], spaceKeyEvent: [{
+                type: HostListener,
+                args: ['window:keyup.space']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], enterKeyEvent: [{
+                type: HostListener,
+                args: ['window:keydown.enter']
+            }] } });
+class BaoDropdownMenuComponent {
+    constructor(cdr, renderer, elementRef) {
+        this.cdr = cdr;
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        /**
+         * Fired when the dropdown-menu changes its 'isOpen' value
+         */
+        this.isOpenChange = new EventEmitter();
+        /**
+         * Fired when menu is closed by key event triggered from menu item
+         */
+        this.isClosedByKeyEvent = new EventEmitter();
+        /**
+         * Unique identifier of the dropdown menu
+         */
+        this.menuId = `bao-dropdown-menu-${++dropdownMenuUniqueId}`;
+        /**
+         * Is the dropwdown menu currently open
+         */
+        this._isOpen = false;
+    }
+    get isOpen() {
+        return this._isOpen;
+    }
+    get activeItemIndex() {
+        return this._activeItemIndex;
+    }
+    get menuPortal() {
+        return this._menuPortal;
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    set isOpen(isOpen) {
+        this._isOpen = isOpen;
+        this.cdr.detectChanges();
+        this.isOpenChange.emit(isOpen);
+    }
+    set activeItemIndex(index) {
+        this._activeItemIndex = index;
+    }
+    upKeyEvent() {
+        if (this.isOpen) {
+            const index = isNaN(this._activeItemIndex) ? 0 : this._activeItemIndex;
+            const nextIndex = this.getNextActivableItemIndex(index, false);
+            this.focusNextItem(nextIndex);
+        }
+    }
+    downKeyEvent() {
+        if (this.isOpen) {
+            const index = isNaN(this._activeItemIndex) ? 0 : this._activeItemIndex;
+            const nextIndex = this.getNextActivableItemIndex(index, true);
+            this.focusNextItem(nextIndex);
+        }
+    }
+    /** Prevents focus to be lost when TAB has reached end of menu  */
+    tabKeyEvent() {
+        if (this.isOpen) {
+            if (document.activeElement === this._listItems.last.nativeElement) {
+                this.isClosedByKeyEvent.emit();
+            }
+        }
+    }
+    /** Prevents focus to be lost when SHIFT + TAB has reached beginning of menu  */
+    shiftTabKeyEvent() {
+        if (this.isOpen) {
+            if (document.activeElement === this._listItems.first.nativeElement) {
+                this.isClosedByKeyEvent.emit();
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.renderer.setAttribute(this.nativeElement, 'id', this.menuId);
+        this._menuPortal = new DomPortal(this._menuContent);
+    }
+    focusFirstItem() {
+        this._activeItemIndex = 0;
+        this._listItems.first.nativeElement.focus();
+    }
+    open() {
+        this.isOpen = true;
+    }
+    close() {
+        this.isOpen = false;
+    }
+    /** Move the aria-current attribute to new active page */
+    setNavigationAttribute(activePageElement) {
+        const previousActivePage = this._listItems.find((item) => {
+            return item.nativeElement.attributes['aria-current'] === 'page';
+        });
+        if (previousActivePage) {
+            this.renderer.removeAttribute(previousActivePage.nativeElement, 'aria-current');
+            this.renderer.removeClass(previousActivePage.nativeElement, 'active-link');
+        }
+        this.renderer.setAttribute(activePageElement, 'aria-current', 'page');
+        this.renderer.addClass(activePageElement, 'active-link');
+    }
+    focusNextItem(nextIndex) {
+        this._activeItemIndex = nextIndex;
+        this._listItems.get(nextIndex).nativeElement.focus();
+    }
+    /**
+     * Finds the next activable tab index when navigating with up and down arrow or TAB keys
+     * @param currentIndex List item index which currently has focus
+     * @param isDown Whether the navigation is going in the down direction or not
+     * @param isBackward If recursive function is going backward looking for last activable item in list
+     * @returns Index of the next item that will receive focus
+     */
+    getNextActivableItemIndex(currentIndex, isDown, isBackward = false) {
+        if (!this._listItems.get(currentIndex).disabled) {
+            if (!this.canMove(currentIndex, isDown)) {
+                return currentIndex;
+            }
+        }
+        else {
+            if (!this.canMove(currentIndex, isDown)) {
+                const previousIndex = isDown ? currentIndex - 1 : currentIndex + 1;
+                return this.getNextActivableItemIndex(previousIndex, isDown, true);
+            }
+        }
+        const nextIndex = isDown ? currentIndex + 1 : currentIndex - 1;
+        if (this._listItems.get(nextIndex).disabled) {
+            if (isBackward) {
+                return currentIndex;
+            }
+            return this.getNextActivableItemIndex(nextIndex, isDown);
+        }
+        return nextIndex;
+    }
+    /**
+     * Finds if focus has reached end or beginning of list
+     * @param currentIndex List item index which currently has focus
+     * @param isDown Whether the navigation is going in the down direction or not
+     * @returns Can focus move to next item or not
+     */
+    canMove(currentIndex, isDown) {
+        return !((currentIndex == 0 && !isDown) ||
+            (currentIndex == this._listItems.length - 1 && isDown));
+    }
+}
+BaoDropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BaoDropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BaoDropdownMenuComponent, selector: "bao-dropdown-menu", outputs: { isOpenChange: "isOpenChange", isClosedByKeyEvent: "isClosedByKeyEvent" }, host: { listeners: { "window:keyup.arrowup": "upKeyEvent()", "window:keyup.arrowdown": "downKeyEvent()", "window:keydown.tab": "tabKeyEvent()", "window:keydown.shift.tab": "shiftTabKeyEvent()" }, properties: { "class.bao-overlay-transparent-backdrop": "isOpen===false", "class.bao-dropdown-menu-closed": "isOpen===false", "attr.aria-expanded": "isOpen" }, classAttribute: "bao-dropdown-menu" }, queries: [{ propertyName: "_listItems", predicate: BaoDropdownMenuItem, descendants: true }], viewQueries: [{ propertyName: "_menuContent", first: true, predicate: ["menuContent"], descendants: true }], ngImport: i0, template: "<div #menuContent class=\"bao-dropdown-menu\" tabindex=\"-1\">\n  <ng-content></ng-content>\n</div>\n", styles: [".bao-dropdown-menu{min-width:16rem;max-width:32rem;overflow-y:auto;background:#ffffff;box-shadow:0 .5rem 2rem #0000001a;border-radius:.25rem;padding-top:.5rem;padding-bottom:.5rem}.bao-dropdown-menu.bao-dropdown-menu-closed{display:none}.bao-dropdown-menu .bao-overlay-transparent-backdrop{background-color:#fff0;display:none}.bao-dropdown-menu ul{list-style-type:none;padding:0;margin:0}.bao-dropdown-menu h5{padding:.5rem 0 .5rem 1rem;margin:0}.bao-dropdown-menu .bao-dropdown-menu-item{display:flex;align-items:center;text-decoration:none;border-bottom:none;cursor:default}.bao-dropdown-menu .bao-dropdown-menu-item:hover{background-color:#f8f9fa}.bao-dropdown-menu .bao-dropdown-menu-item:active{background-color:#eefaf8}.bao-dropdown-menu .bao-dropdown-menu-item:focus{box-shadow:inset 0 0 0 .25rem #98bcde}.bao-dropdown-menu .bao-dropdown-menu-item.active-link{background-color:#eefaf8}.bao-dropdown-menu .bao-dropdown-menu-item.has-element-right{padding-right:1.5rem}.bao-dropdown-menu .bao-dropdown-menu-item.has-element-left{padding-left:1rem}.bao-dropdown-menu .bao-dropdown-menu-item.bao-dropdown-menu-item-disabled{cursor:not-allowed;pointer-events:none}.bao-dropdown-menu .bao-dropdown-menu-item.bao-dropdown-menu-item-disabled:hover,.bao-dropdown-menu .bao-dropdown-menu-item.bao-dropdown-menu-item-disabled:active{background:#ffffff}.bao-dropdown-menu .bao-dropdown-menu-item.bao-dropdown-menu-item-disabled .bao-dropdown-menu-item-content .bao-dropdown-menu-item-label,.bao-dropdown-menu .bao-dropdown-menu-item.bao-dropdown-menu-item-disabled .bao-dropdown-menu-item-content .bao-dropdown-menu-item-description{color:#adb2bd}.bao-dropdown-menu .bao-dropdown-menu-item>.bao-dropdown-menu-item-content{display:flex;flex-direction:column;margin:.5rem 1rem;background-color:inherit}.bao-dropdown-menu .bao-dropdown-menu-item>.bao-dropdown-menu-item-content .bao-dropdown-menu-item-label{font-weight:400;font-size:1rem;line-height:1.5rem;color:#212529}.bao-dropdown-menu .bao-dropdown-menu-item>.bao-dropdown-menu-item-content .bao-dropdown-menu-item-description{font-weight:400;font-size:.875rem;line-height:1.25rem;color:#637381}.bao-dropdown-menu .bao-dropdown-menu-item>.bao-icon{color:#adb2bd;flex-shrink:0}.bao-dropdown-menu .bao-dropdown-menu-divider hr{margin-top:.5rem;margin-bottom:.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bao-dropdown-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'bao-dropdown-menu',
+                        '[class.bao-overlay-transparent-backdrop]': 'isOpen===false',
+                        '[class.bao-dropdown-menu-closed]': 'isOpen===false',
+                        '[attr.aria-expanded]': 'isOpen'
+                    }, template: "<div #menuContent class=\"bao-dropdown-menu\" tabindex=\"-1\">\n  <ng-content></ng-content>\n</div>\n", styles: [".bao-dropdown-menu{min-width:16rem;max-width:32rem;overflow-y:auto;background:#ffffff;box-shadow:0 .5rem 2rem #0000001a;border-radius:.25rem;padding-top:.5rem;padding-bottom:.5rem}.bao-dropdown-menu.bao-dropdown-menu-closed{display:none}.bao-dropdown-menu .bao-overlay-transparent-backdrop{background-color:#fff0;display:none}.bao-dropdown-menu ul{list-style-type:none;padding:0;margin:0}.bao-dropdown-menu h5{padding:.5rem 0 .5rem 1rem;margin:0}.bao-dropdown-menu .bao-dropdown-menu-item{display:flex;align-items:center;text-decoration:none;border-bottom:none;cursor:default}.bao-dropdown-menu .bao-dropdown-menu-item:hover{background-color:#f8f9fa}.bao-dropdown-menu .bao-dropdown-menu-item:active{background-color:#eefaf8}.bao-dropdown-menu .bao-dropdown-menu-item:focus{box-shadow:inset 0 0 0 .25rem #98bcde}.bao-dropdown-menu .bao-dropdown-menu-item.active-link{background-color:#eefaf8}.bao-dropdown-menu .bao-dropdown-menu-item.has-element-right{padding-right:1.5rem}.bao-dropdown-menu .bao-dropdown-menu-item.has-element-left{padding-left:1rem}.bao-dropdown-menu .bao-dropdown-menu-item.bao-dropdown-menu-item-disabled{cursor:not-allowed;pointer-events:none}.bao-dropdown-menu .bao-dropdown-menu-item.bao-dropdown-menu-item-disabled:hover,.bao-dropdown-menu .bao-dropdown-menu-item.bao-dropdown-menu-item-disabled:active{background:#ffffff}.bao-dropdown-menu .bao-dropdown-menu-item.bao-dropdown-menu-item-disabled .bao-dropdown-menu-item-content .bao-dropdown-menu-item-label,.bao-dropdown-menu .bao-dropdown-menu-item.bao-dropdown-menu-item-disabled .bao-dropdown-menu-item-content .bao-dropdown-menu-item-description{color:#adb2bd}.bao-dropdown-menu .bao-dropdown-menu-item>.bao-dropdown-menu-item-content{display:flex;flex-direction:column;margin:.5rem 1rem;background-color:inherit}.bao-dropdown-menu .bao-dropdown-menu-item>.bao-dropdown-menu-item-content .bao-dropdown-menu-item-label{font-weight:400;font-size:1rem;line-height:1.5rem;color:#212529}.bao-dropdown-menu .bao-dropdown-menu-item>.bao-dropdown-menu-item-content .bao-dropdown-menu-item-description{font-weight:400;font-size:.875rem;line-height:1.25rem;color:#637381}.bao-dropdown-menu .bao-dropdown-menu-item>.bao-icon{color:#adb2bd;flex-shrink:0}.bao-dropdown-menu .bao-dropdown-menu-divider hr{margin-top:.5rem;margin-bottom:.5rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { isOpenChange: [{
+                type: Output
+            }], isClosedByKeyEvent: [{
+                type: Output
+            }], _menuContent: [{
+                type: ViewChild,
+                args: ['menuContent']
+            }], _listItems: [{
+                type: ContentChildren,
+                args: [BaoDropdownMenuItem, { descendants: true }]
+            }], upKeyEvent: [{
+                type: HostListener,
+                args: ['window:keyup.arrowup']
+            }], downKeyEvent: [{
+                type: HostListener,
+                args: ['window:keyup.arrowdown']
+            }], tabKeyEvent: [{
+                type: HostListener,
+                args: ['window:keydown.tab']
+            }], shiftTabKeyEvent: [{
+                type: HostListener,
+                args: ['window:keydown.shift.tab']
+            }] } });
+/**
+ * Directive to be applied on element that will trigger the opening and closing of menu.
+ */
+class BaoDropdownMenuTrigger {
+    constructor(renderer, elementRef, overlay) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.overlay = overlay;
+        this._overlayRef = null;
+        this._isMenuOpen = false;
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    escapeKeyEvent() {
+        if (this._isMenuOpen) {
+            this.closeMenu();
+            this.nativeElement.focus();
+        }
+    }
+    /** Enter key event triggers click event which opens menu,
+     *  then focus is put on first item in the menu */
+    enterKeyEvent() {
+        if (this._isMenuOpen && document.activeElement === this.nativeElement) {
+            this.menu.focusFirstItem();
+        }
+    }
+    onClick() {
+        this.toggleMenu();
+    }
+    ngAfterViewInit() {
+        this.renderer.setAttribute(this.nativeElement, 'role', 'button');
+        this.renderer.setAttribute(this.nativeElement, 'aria-controls', `bao-dropdown-menu-${dropdownMenuUniqueId}`);
+        this.menu.isClosedByKeyEvent.subscribe(() => {
+            this.closeMenu();
+            this.nativeElement.focus();
+        });
+    }
+    ngOnDestroy() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+        }
+    }
+    toggleMenu() {
+        return this._isMenuOpen ? this.closeMenu() : this.openMenu();
+    }
+    closeMenu() {
+        this._isMenuOpen = false;
+        this.menu.close();
+        if (this._overlayRef) {
+            this._overlayRef.detach();
+        }
+    }
+    openMenu() {
+        if (!this.menu) {
+            return;
+        }
+        const overlayRef = this.createOverlay();
+        overlayRef.attach(this.menu.menuPortal);
+        this._isMenuOpen = true;
+        this.menu.open();
+    }
+    createOverlay() {
+        if (!this._overlayRef) {
+            const config = this.getOverlayConfig();
+            this._overlayRef = this.overlay.create(config);
+        }
+        this._overlayRef.backdropClick().subscribe(() => {
+            this.closeMenu();
+        });
+        return this._overlayRef;
+    }
+    getOverlayConfig() {
+        return new OverlayConfig({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(this.elementRef)
+                .withLockedPosition()
+                .withGrowAfterOpen()
+                .withPositions([
+                {
+                    // top-left of the overlay is connected to bottom-left of the origin;
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'top'
+                },
+                {
+                    // bottom-left of the overlay is connected to top-left of the origin;
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'bottom'
+                }
+            ]),
+            backdropClass: 'bao-overlay-transparent-backdrop',
+            hasBackdrop: true,
+            scrollStrategy: this.overlay.scrollStrategies.block()
+        });
+    }
+}
+BaoDropdownMenuTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuTrigger, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Directive });
+BaoDropdownMenuTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: BaoDropdownMenuTrigger, selector: "bao-dropdown-menu-trigger, [bao-dropdown-menu-trigger], [baoDropdownMenuTriggerFor]", inputs: { menu: ["baoDropdownMenuTriggerFor", "menu"] }, host: { listeners: { "window:keyup.escape": "escapeKeyEvent()", "window:keyup.enter": "enterKeyEvent()", "click": "onClick()" }, classAttribute: "bao-dropdown-menu-trigger" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'bao-dropdown-menu-trigger, [bao-dropdown-menu-trigger], [baoDropdownMenuTriggerFor]',
+                    host: { class: 'bao-dropdown-menu-trigger' }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1$4.Overlay }]; }, propDecorators: { menu: [{
+                type: Input,
+                args: ['baoDropdownMenuTriggerFor']
+            }], escapeKeyEvent: [{
+                type: HostListener,
+                args: ['window:keyup.escape']
+            }], enterKeyEvent: [{
+                type: HostListener,
+                args: ['window:keyup.enter']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+/**
+ * Sections of list items in menu. Apply proper styling to section's title if there is one.
+ */
+class BaoDropdownMenuSection {
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const children = Array.from(this.nativeElement.childNodes);
+        const textIndex = children.findIndex((c) => c.nodeName === '#text');
+        if (textIndex > -1) {
+            this.insertTitle(children, textIndex);
+        }
+    }
+    insertTitle(children, txtIdx) {
+        const titleElement = this.renderer.createElement('h5');
+        this.renderer.setProperty(titleElement, 'textContent', children[txtIdx].nodeValue);
+        this.renderer.removeChild(this.nativeElement, children[txtIdx]);
+        const listIndex = children.findIndex((c) => c.nodeName === 'UL');
+        this.renderer.insertBefore(this.nativeElement, titleElement, children[listIndex]);
+    }
+}
+BaoDropdownMenuSection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuSection, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+BaoDropdownMenuSection.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: BaoDropdownMenuSection, selector: "bao-dropdown-menu-section, [bao-dropdown-menu-section]", host: { classAttribute: "bao-dropdown-menu-section" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuSection, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'bao-dropdown-menu-section, [bao-dropdown-menu-section]',
+                    host: { class: 'bao-dropdown-menu-section' }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+/**
+ * Label of a list item, add css class to apply proper styling.
+ */
+class BaoDropdownMenuItemLabel {
+}
+BaoDropdownMenuItemLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuItemLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BaoDropdownMenuItemLabel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: BaoDropdownMenuItemLabel, selector: "bao-dropdown-menu-item-label, [bao-dropdown-menu-item-label]", host: { classAttribute: "bao-dropdown-menu-item-label" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuItemLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'bao-dropdown-menu-item-label, [bao-dropdown-menu-item-label]',
+                    host: { class: 'bao-dropdown-menu-item-label' }
+                }]
+        }] });
+/**
+ * Description of a list item, add css class to apply proper styling.
+ */
+class BaoDropdownMenuItemDescription {
+}
+BaoDropdownMenuItemDescription.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuItemDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BaoDropdownMenuItemDescription.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: BaoDropdownMenuItemDescription, selector: "bao-dropdown-menu-item-description, [bao-dropdown-menu-item-description]", host: { classAttribute: "bao-dropdown-menu-item-description" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuItemDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'bao-dropdown-menu-item-description, [bao-dropdown-menu-item-description]',
+                    host: { class: 'bao-dropdown-menu-item-description' }
+                }]
+        }] });
+/**
+ * Divider to separate sections.
+ */
+class BaoDropdownMenuDivider {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterContentInit() {
+        this.renderer.setAttribute(this.nativeElement, 'role', 'separator');
+    }
+}
+BaoDropdownMenuDivider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuDivider, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BaoDropdownMenuDivider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BaoDropdownMenuDivider, selector: "bao-dropdown-menu-divider, [bao-dropdown-menu-divider]", host: { classAttribute: "bao-dropdown-menu-divider" }, ngImport: i0, template: `<hr />`, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuDivider, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<hr />`,
+                    selector: 'bao-dropdown-menu-divider, [bao-dropdown-menu-divider]',
+                    host: { class: 'bao-dropdown-menu-divider' }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; } });
+
+/*
+ * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+const DROPDOWN_MENU_DIRECTIVES = [
+    BaoDropdownMenuComponent,
+    BaoDropdownMenuTrigger,
+    BaoDropdownMenuItem,
+    BaoDropdownMenuSection,
+    BaoDropdownMenuItemLabel,
+    BaoDropdownMenuItemDescription,
+    BaoDropdownMenuDivider
+];
+class BaoDropdownMenuModule {
+}
+BaoDropdownMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BaoDropdownMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuModule, declarations: [BaoDropdownMenuComponent,
+        BaoDropdownMenuTrigger,
+        BaoDropdownMenuItem,
+        BaoDropdownMenuSection,
+        BaoDropdownMenuItemLabel,
+        BaoDropdownMenuItemDescription,
+        BaoDropdownMenuDivider], imports: [CommonModule, ObserversModule, OverlayModule, PortalModule], exports: [BaoDropdownMenuComponent,
+        BaoDropdownMenuTrigger,
+        BaoDropdownMenuItem,
+        BaoDropdownMenuSection,
+        BaoDropdownMenuItemLabel,
+        BaoDropdownMenuItemDescription,
+        BaoDropdownMenuDivider] });
+BaoDropdownMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuModule, imports: [CommonModule, ObserversModule, OverlayModule, PortalModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ObserversModule, OverlayModule, PortalModule],
+                    declarations: [DROPDOWN_MENU_DIRECTIVES],
+                    exports: [...DROPDOWN_MENU_DIRECTIVES]
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+
 /*
  * Copyright (c) 2022 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
@@ -3950,8 +4524,7 @@ BaoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         BaoButtonModule,
         BaoAlertModule,
         BaoCardModule,
-        BaoBreadcrumbModule,
-        BaoModalModule], exports: [BaoIconModule,
+        BaoBreadcrumbModule], exports: [BaoIconModule,
         BaoButtonModule,
         BaoAlertModule,
         BaoBreadcrumbModule,
@@ -3966,7 +4539,8 @@ BaoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         BaoAvatarModule,
         BaoTabsModule,
         BaoModalModule,
-        BaoHyperlinkModule
+        BaoHyperlinkModule,
+        BaoDropdownMenuModule
         // TODO: reactivate once component does not depend on global css BaoBadgeModule,
         // TODO: reactivate once component does not depend on global css BaoSnackBarModule,
     ] });
@@ -3974,8 +4548,7 @@ BaoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
         BaoButtonModule,
         BaoAlertModule,
         BaoCardModule,
-        BaoBreadcrumbModule,
-        BaoModalModule, BaoIconModule,
+        BaoBreadcrumbModule, BaoIconModule,
         BaoButtonModule,
         BaoAlertModule,
         BaoBreadcrumbModule,
@@ -3990,7 +4563,8 @@ BaoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
         BaoAvatarModule,
         BaoTabsModule,
         BaoModalModule,
-        BaoHyperlinkModule
+        BaoHyperlinkModule,
+        BaoDropdownMenuModule
         // TODO: reactivate once component does not depend on global css BaoBadgeModule,
         // TODO: reactivate once component does not depend on global css BaoSnackBarModule,
     ] });
@@ -4002,8 +4576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                         BaoButtonModule,
                         BaoAlertModule,
                         BaoCardModule,
-                        BaoBreadcrumbModule,
-                        BaoModalModule
+                        BaoBreadcrumbModule
                     ],
                     exports: [
                         BaoIconModule,
@@ -4021,7 +4594,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                         BaoAvatarModule,
                         BaoTabsModule,
                         BaoModalModule,
-                        BaoHyperlinkModule
+                        BaoHyperlinkModule,
+                        BaoDropdownMenuModule
                         // TODO: reactivate once component does not depend on global css BaoBadgeModule,
                         // TODO: reactivate once component does not depend on global css BaoSnackBarModule,
                     ]
@@ -4101,5 +4675,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BAO_MODAL_DATA, BAO_RADIO_GROUP, BaoAlertActions, BaoAlertComponent, BaoAlertContent, BaoAlertLink, BaoAlertModule, BaoAlertTitle, BaoAvatarComponent, BaoAvatarContent, BaoAvatarModule, BaoBadgeComponent, BaoBadgeModule, BaoBreadcrumbComponent, BaoBreadcrumbModule, BaoButtonComponent, BaoButtonModule, BaoCardComponent, BaoCardContent, BaoCardHeader, BaoCardModule, BaoCardTextInterface, BaoCardTitle, BaoCheckBoxDescription, BaoCheckboxComponent, BaoCheckboxGroupComponent, BaoCheckboxModule, BaoCommonComponentsModule, BaoErrorTextComponent, BaoGuidingTextComponent, BaoHeaderInfoComponent, BaoHeaderInfoContent, BaoHeaderInfoModule, BaoHeaderInfoSubtitle, BaoHeaderInfoSurtitle, BaoHeaderInfoTitle, BaoHeaderInfoTitleGroupComponent, BaoHyperlinkComponent, BaoHyperlinkModule, BaoIconComponent, BaoIconModule, BaoLabelTextComponent, BaoList, BaoListItem, BaoListItemDescription, BaoListItemTitle, BaoListModule, BaoListSummary, BaoListSummaryItem, BaoModal, BaoModalBase, BaoModalClose, BaoModalContainer, BaoModalInitialConfig, BaoModalModule, BaoModalRef, BaoModule, BaoNavList, BaoRadioButtonComponent, BaoRadioButtonGroupComponent, BaoRadioDescription, BaoRadioModule, BaoSummaryComponent, BaoSummaryDescription, BaoSummaryModule, BaoTabHeader, BaoTabPanel, BaoTablistComponent, BaoTabsContainer, BaoTabsModule, BaoTagComponent, BaoTagModule, BaoTitleTextComponent, _BaoModalContainerBase, _closeModalVia, eModalDesktopWidthSize, eModalMobileWidthSize, throwBaoModalContentAlreadyAttachedError };
+export { BAO_MODAL_DATA, BAO_RADIO_GROUP, BaoAlertActions, BaoAlertComponent, BaoAlertContent, BaoAlertLink, BaoAlertModule, BaoAlertTitle, BaoAvatarComponent, BaoAvatarContent, BaoAvatarModule, BaoBadgeComponent, BaoBadgeModule, BaoBreadcrumbComponent, BaoBreadcrumbModule, BaoButtonComponent, BaoButtonModule, BaoCardComponent, BaoCardContent, BaoCardHeader, BaoCardModule, BaoCardTextInterface, BaoCardTitle, BaoCheckBoxDescription, BaoCheckboxComponent, BaoCheckboxGroupComponent, BaoCheckboxModule, BaoCommonComponentsModule, BaoDropdownMenuComponent, BaoDropdownMenuDivider, BaoDropdownMenuItem, BaoDropdownMenuItemDescription, BaoDropdownMenuItemLabel, BaoDropdownMenuModule, BaoDropdownMenuSection, BaoDropdownMenuTrigger, BaoErrorTextComponent, BaoGuidingTextComponent, BaoHeaderInfoComponent, BaoHeaderInfoContent, BaoHeaderInfoModule, BaoHeaderInfoSubtitle, BaoHeaderInfoSurtitle, BaoHeaderInfoTitle, BaoHeaderInfoTitleGroupComponent, BaoHyperlinkComponent, BaoHyperlinkModule, BaoIconComponent, BaoIconModule, BaoLabelTextComponent, BaoList, BaoListItem, BaoListItemDescription, BaoListItemTitle, BaoListModule, BaoListSummary, BaoListSummaryItem, BaoModal, BaoModalBase, BaoModalClose, BaoModalContainer, BaoModalInitialConfig, BaoModalModule, BaoModalRef, BaoModule, BaoNavList, BaoRadioButtonComponent, BaoRadioButtonGroupComponent, BaoRadioDescription, BaoRadioModule, BaoSummaryComponent, BaoSummaryDescription, BaoSummaryModule, BaoTabHeader, BaoTabPanel, BaoTablistComponent, BaoTabsContainer, BaoTabsModule, BaoTagComponent, BaoTagModule, BaoTitleTextComponent, _BaoModalContainerBase, _closeModalVia, eModalDesktopWidthSize, eModalMobileWidthSize, throwBaoModalContentAlreadyAttachedError };
 //# sourceMappingURL=villedemontreal-angular-ui.mjs.map