@villedemontreal/angular-ui 3.1.1 → 3.3.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.
- package/esm2020/lib/bao.module.mjs +12 -4
- package/esm2020/lib/dropdown-menu/dropdown-menu.component.mjs +519 -0
- package/esm2020/lib/dropdown-menu/index.mjs +8 -0
- package/esm2020/lib/dropdown-menu/module.mjs +47 -0
- package/esm2020/lib/hyperlink/hyperlink.component.mjs +75 -0
- package/esm2020/lib/hyperlink/index.mjs +8 -0
- package/esm2020/lib/hyperlink/module.mjs +24 -0
- package/esm2020/public-api.mjs +3 -1
- package/fesm2015/villedemontreal-angular-ui.mjs +672 -7
- package/fesm2015/villedemontreal-angular-ui.mjs.map +1 -1
- package/fesm2020/villedemontreal-angular-ui.mjs +672 -7
- package/fesm2020/villedemontreal-angular-ui.mjs.map +1 -1
- package/global.scss +2 -0
- package/lib/bao.module.d.ts +3 -1
- package/lib/dropdown-menu/dropdown-menu.component.d.ts +170 -0
- package/lib/dropdown-menu/index.d.ts +2 -0
- package/lib/dropdown-menu/module.d.ts +11 -0
- package/lib/hyperlink/hyperlink.component.d.ts +17 -0
- package/lib/hyperlink/index.d.ts +2 -0
- package/lib/hyperlink/module.d.ts +8 -0
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
|
@@ -12,7 +12,7 @@ import * as i2 from '@angular/cdk/collections';
|
|
|
12
12
|
import * as i1$4 from '@angular/cdk/overlay';
|
|
13
13
|
import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
14
14
|
import * as i3 from '@angular/cdk/portal';
|
|
15
|
-
import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
|
|
15
|
+
import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule, DomPortal } from '@angular/cdk/portal';
|
|
16
16
|
import { Subject, filter, take, defer, startWith, Subscription } from 'rxjs';
|
|
17
17
|
import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
|
|
18
18
|
import { trigger, state, style, transition, group, animate, query, animateChild } from '@angular/animations';
|
|
@@ -2223,7 +2223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
|
|
|
2223
2223
|
const SPAN = 'span';
|
|
2224
2224
|
const SPAN_TEXT_PROPERTY$1 = 'textContent';
|
|
2225
2225
|
const SCREEN_READER_CLASS_NAME$1 = 'sr-only';
|
|
2226
|
-
const BAO_ICON = 'bao-icon';
|
|
2226
|
+
const BAO_ICON$1 = 'bao-icon';
|
|
2227
2227
|
const HAS_ICON = 'has-icon';
|
|
2228
2228
|
class BaoTagComponent {
|
|
2229
2229
|
constructor(renderer, elementRef) {
|
|
@@ -2258,7 +2258,7 @@ class BaoTagComponent {
|
|
|
2258
2258
|
}
|
|
2259
2259
|
addIconClass() {
|
|
2260
2260
|
const children = Array.from(this.nativeElement.children);
|
|
2261
|
-
if (children.some(c => c.localName === BAO_ICON)) {
|
|
2261
|
+
if (children.some(c => c.localName === BAO_ICON$1)) {
|
|
2262
2262
|
this.renderer.addClass(this.nativeElement, HAS_ICON);
|
|
2263
2263
|
}
|
|
2264
2264
|
}
|
|
@@ -3853,6 +3853,665 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
|
|
|
3853
3853
|
}]
|
|
3854
3854
|
}] });
|
|
3855
3855
|
|
|
3856
|
+
/*
|
|
3857
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
3858
|
+
* Licensed under the MIT license.
|
|
3859
|
+
* See LICENSE file in the project root for full license information.
|
|
3860
|
+
*/
|
|
3861
|
+
const BAO_ICON = 'bao-icon';
|
|
3862
|
+
const LINK_ELEMENT = 'a';
|
|
3863
|
+
const HAS_LEFT_ICON = 'has-left-icon';
|
|
3864
|
+
const HAS_RIGHT_ICON = 'has-right-icon';
|
|
3865
|
+
const LIST_PARENT = 'bao-hyperlink-list-parent';
|
|
3866
|
+
class BaoHyperlinkComponent {
|
|
3867
|
+
constructor(renderer, elementRef) {
|
|
3868
|
+
this.renderer = renderer;
|
|
3869
|
+
this.elementRef = elementRef;
|
|
3870
|
+
/**
|
|
3871
|
+
* Size of the link when it's in a list.
|
|
3872
|
+
*/
|
|
3873
|
+
this.size = 'medium';
|
|
3874
|
+
}
|
|
3875
|
+
get nativeElement() {
|
|
3876
|
+
return this.elementRef.nativeElement;
|
|
3877
|
+
}
|
|
3878
|
+
ngAfterViewInit() {
|
|
3879
|
+
this.setIcon();
|
|
3880
|
+
this.addIconClass();
|
|
3881
|
+
}
|
|
3882
|
+
setIcon() {
|
|
3883
|
+
const parentName = this.nativeElement.parentElement.localName;
|
|
3884
|
+
if (parentName === 'ul') {
|
|
3885
|
+
this.renderer.addClass(this.nativeElement.parentElement, LIST_PARENT);
|
|
3886
|
+
}
|
|
3887
|
+
else {
|
|
3888
|
+
// Icon in inline hyperlink must always be positioned after label.
|
|
3889
|
+
const children = Array.from(this.nativeElement.children);
|
|
3890
|
+
const iconIndex = children.findIndex(c => c.localName === BAO_ICON);
|
|
3891
|
+
if (iconIndex > -1) {
|
|
3892
|
+
const labelIndex = children.findIndex(c => c.localName === LINK_ELEMENT);
|
|
3893
|
+
// Set icon's size to match text's lineHeight.
|
|
3894
|
+
const lineHeight = getComputedStyle(children[labelIndex])['lineHeight'];
|
|
3895
|
+
this.renderer.setStyle(children[iconIndex], 'height', lineHeight);
|
|
3896
|
+
this.renderer.setStyle(children[iconIndex], 'width', lineHeight);
|
|
3897
|
+
if (iconIndex < labelIndex) {
|
|
3898
|
+
const iconElement = children[iconIndex];
|
|
3899
|
+
this.renderer.removeChild(this.nativeElement, children[iconIndex]);
|
|
3900
|
+
this.renderer.appendChild(this.nativeElement, iconElement);
|
|
3901
|
+
}
|
|
3902
|
+
}
|
|
3903
|
+
}
|
|
3904
|
+
}
|
|
3905
|
+
addIconClass() {
|
|
3906
|
+
const children = Array.from(this.nativeElement.children);
|
|
3907
|
+
const iconIndex = children.findIndex(c => c.localName === BAO_ICON);
|
|
3908
|
+
if (iconIndex > -1) {
|
|
3909
|
+
const labelIndex = children.findIndex(c => c.localName === LINK_ELEMENT);
|
|
3910
|
+
const iconClass = iconIndex < labelIndex ? HAS_LEFT_ICON : HAS_RIGHT_ICON;
|
|
3911
|
+
this.renderer.addClass(this.nativeElement, iconClass);
|
|
3912
|
+
}
|
|
3913
|
+
}
|
|
3914
|
+
}
|
|
3915
|
+
BaoHyperlinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoHyperlinkComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3916
|
+
BaoHyperlinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BaoHyperlinkComponent, selector: "bao-hyperlink, [bao-hyperlink]", inputs: { size: "size" }, host: { properties: { "class.bao-hyperlink-medium": "size === \"medium\"", "class.bao-hyperlink-small": "size === \"small\"", "class.bao-hyperlink-extra-small": "size === \"extra-small\"" }, classAttribute: "bao-hyperlink" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".bao-hyperlink:not(li){display:inline-flex;font-size:inherit;line-height:inherit}.bao-hyperlink:not(li)>a{box-shadow:inset 0 -1px #097d6c;text-decoration:none;border-bottom:none;font-size:inherit}li.bao-hyperlink{display:flex}li.bao-hyperlink>a{text-decoration:none;border-bottom:none}li.bao-hyperlink>a:hover{box-shadow:inset 0 -1px #097d6c}li.bao-hyperlink.bao-hyperlink-extra-small a{font-weight:700;font-size:.75rem;line-height:1rem}li.bao-hyperlink.bao-hyperlink-extra-small .bao-icon{height:1rem;width:1rem}li.bao-hyperlink.bao-hyperlink-small a{font-weight:700;font-size:.875rem;line-height:1.25rem}li.bao-hyperlink.bao-hyperlink-small .bao-icon{height:1.25rem;width:1.25rem}li.bao-hyperlink.bao-hyperlink-medium a{font-weight:700;font-size:1rem;line-height:1.5rem}li.bao-hyperlink.bao-hyperlink-medium .bao-icon{height:1.5rem;width:1.5rem}.bao-hyperlink{align-items:center}.bao-hyperlink>.bao-icon{color:#097d6c;flex-shrink:0}.bao-hyperlink.has-right-icon>.bao-icon{margin-left:.25rem}.bao-hyperlink.has-left-icon>.bao-icon{margin-right:.5rem}ul.bao-hyperlink-list-parent{list-style-type:none}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
3917
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoHyperlinkComponent, decorators: [{
|
|
3918
|
+
type: Component,
|
|
3919
|
+
args: [{ selector: 'bao-hyperlink, [bao-hyperlink]', encapsulation: ViewEncapsulation.None, host: {
|
|
3920
|
+
class: 'bao-hyperlink',
|
|
3921
|
+
'[class.bao-hyperlink-medium]': 'size === "medium"',
|
|
3922
|
+
'[class.bao-hyperlink-small]': 'size === "small"',
|
|
3923
|
+
'[class.bao-hyperlink-extra-small]': 'size === "extra-small"'
|
|
3924
|
+
}, template: "<ng-content></ng-content>\n", styles: [".bao-hyperlink:not(li){display:inline-flex;font-size:inherit;line-height:inherit}.bao-hyperlink:not(li)>a{box-shadow:inset 0 -1px #097d6c;text-decoration:none;border-bottom:none;font-size:inherit}li.bao-hyperlink{display:flex}li.bao-hyperlink>a{text-decoration:none;border-bottom:none}li.bao-hyperlink>a:hover{box-shadow:inset 0 -1px #097d6c}li.bao-hyperlink.bao-hyperlink-extra-small a{font-weight:700;font-size:.75rem;line-height:1rem}li.bao-hyperlink.bao-hyperlink-extra-small .bao-icon{height:1rem;width:1rem}li.bao-hyperlink.bao-hyperlink-small a{font-weight:700;font-size:.875rem;line-height:1.25rem}li.bao-hyperlink.bao-hyperlink-small .bao-icon{height:1.25rem;width:1.25rem}li.bao-hyperlink.bao-hyperlink-medium a{font-weight:700;font-size:1rem;line-height:1.5rem}li.bao-hyperlink.bao-hyperlink-medium .bao-icon{height:1.5rem;width:1.5rem}.bao-hyperlink{align-items:center}.bao-hyperlink>.bao-icon{color:#097d6c;flex-shrink:0}.bao-hyperlink.has-right-icon>.bao-icon{margin-left:.25rem}.bao-hyperlink.has-left-icon>.bao-icon{margin-right:.5rem}ul.bao-hyperlink-list-parent{list-style-type:none}\n"] }]
|
|
3925
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { size: [{
|
|
3926
|
+
type: Input
|
|
3927
|
+
}] } });
|
|
3928
|
+
|
|
3929
|
+
/*
|
|
3930
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
3931
|
+
* Licensed under the MIT license.
|
|
3932
|
+
* See LICENSE file in the project root for full license information.
|
|
3933
|
+
*/
|
|
3934
|
+
const HYPERLINK_DIRECTIVES = [BaoHyperlinkComponent];
|
|
3935
|
+
class BaoHyperlinkModule {
|
|
3936
|
+
}
|
|
3937
|
+
BaoHyperlinkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoHyperlinkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3938
|
+
BaoHyperlinkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoHyperlinkModule, declarations: [BaoHyperlinkComponent], imports: [CommonModule], exports: [BaoHyperlinkComponent] });
|
|
3939
|
+
BaoHyperlinkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoHyperlinkModule, imports: [CommonModule] });
|
|
3940
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoHyperlinkModule, decorators: [{
|
|
3941
|
+
type: NgModule,
|
|
3942
|
+
args: [{
|
|
3943
|
+
imports: [CommonModule],
|
|
3944
|
+
declarations: [HYPERLINK_DIRECTIVES],
|
|
3945
|
+
exports: [HYPERLINK_DIRECTIVES]
|
|
3946
|
+
}]
|
|
3947
|
+
}] });
|
|
3948
|
+
|
|
3949
|
+
/*
|
|
3950
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
3951
|
+
* Licensed under the MIT license.
|
|
3952
|
+
* See LICENSE file in the project root for full license information.
|
|
3953
|
+
*/
|
|
3954
|
+
|
|
3955
|
+
/*
|
|
3956
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
3957
|
+
* Licensed under the MIT license.
|
|
3958
|
+
* See LICENSE file in the project root for full license information.
|
|
3959
|
+
*/
|
|
3960
|
+
/**
|
|
3961
|
+
* Unique ID for each dropdown menu
|
|
3962
|
+
*/
|
|
3963
|
+
let dropdownMenuUniqueId = 0;
|
|
3964
|
+
class BaoDropdownMenuItem {
|
|
3965
|
+
constructor(renderer, elementRef, _parent) {
|
|
3966
|
+
this.renderer = renderer;
|
|
3967
|
+
this.elementRef = elementRef;
|
|
3968
|
+
this._parent = _parent;
|
|
3969
|
+
/**
|
|
3970
|
+
* Is the list item disabled
|
|
3971
|
+
*/
|
|
3972
|
+
this.disabled = false;
|
|
3973
|
+
}
|
|
3974
|
+
get nativeElement() {
|
|
3975
|
+
return this.elementRef.nativeElement;
|
|
3976
|
+
}
|
|
3977
|
+
spaceKeyEvent() {
|
|
3978
|
+
if (document.activeElement == this.nativeElement) {
|
|
3979
|
+
this.nativeElement.click();
|
|
3980
|
+
}
|
|
3981
|
+
}
|
|
3982
|
+
onClick() {
|
|
3983
|
+
if (this.nativeElement.attributes['href']) {
|
|
3984
|
+
this._parent.setNavigationAttribute(this.nativeElement);
|
|
3985
|
+
}
|
|
3986
|
+
this.propagateClick();
|
|
3987
|
+
}
|
|
3988
|
+
enterKeyEvent() {
|
|
3989
|
+
if (document.activeElement == this.nativeElement) {
|
|
3990
|
+
if (this.nativeElement.attributes['href']) {
|
|
3991
|
+
this._parent.setNavigationAttribute(this.nativeElement);
|
|
3992
|
+
}
|
|
3993
|
+
this.propagateClick();
|
|
3994
|
+
}
|
|
3995
|
+
}
|
|
3996
|
+
ngAfterViewInit() {
|
|
3997
|
+
this.addContentDiv();
|
|
3998
|
+
if (!this.disabled) {
|
|
3999
|
+
this.renderer.setAttribute(this.nativeElement, 'tabIndex', '0');
|
|
4000
|
+
}
|
|
4001
|
+
this.addPaddingClass();
|
|
4002
|
+
// Remove input element inside item from keyboard navigation sequence
|
|
4003
|
+
if (this.nativeElement.classList.contains('has-element-left')) {
|
|
4004
|
+
this.renderer.setAttribute(this.nativeElement.children.item(0).firstElementChild, 'tabIndex', '-1');
|
|
4005
|
+
}
|
|
4006
|
+
}
|
|
4007
|
+
ngOnChanges(changes) {
|
|
4008
|
+
if (changes['disabled'] && changes['disabled'].currentValue == true) {
|
|
4009
|
+
this.disableItem();
|
|
4010
|
+
}
|
|
4011
|
+
}
|
|
4012
|
+
/** Regroups label and description in a new div to help with layout */
|
|
4013
|
+
addContentDiv() {
|
|
4014
|
+
const children = Array.from(this.nativeElement.children);
|
|
4015
|
+
const labelIndex = children.findIndex(c => c.localName === 'bao-dropdown-menu-item-label');
|
|
4016
|
+
const labelElement = children[labelIndex];
|
|
4017
|
+
this.renderer.removeChild(this.nativeElement, children[labelIndex]);
|
|
4018
|
+
const contentDiv = this.renderer.createElement('div');
|
|
4019
|
+
this.renderer.addClass(contentDiv, 'bao-dropdown-menu-item-content');
|
|
4020
|
+
this.renderer.appendChild(this.nativeElement, contentDiv);
|
|
4021
|
+
this.renderer.appendChild(contentDiv, labelElement);
|
|
4022
|
+
const descriptionIndex = children.findIndex(c => c.localName === 'bao-dropdown-menu-item-description');
|
|
4023
|
+
if (descriptionIndex > 0) {
|
|
4024
|
+
const descriptionElement = children[descriptionIndex];
|
|
4025
|
+
this.renderer.removeChild(this.nativeElement, children[descriptionIndex]);
|
|
4026
|
+
this.renderer.appendChild(contentDiv, descriptionElement);
|
|
4027
|
+
}
|
|
4028
|
+
}
|
|
4029
|
+
addPaddingClass() {
|
|
4030
|
+
const children = Array.from(this.nativeElement.children);
|
|
4031
|
+
// Menu item has extra element next to label
|
|
4032
|
+
if (children.length > 1) {
|
|
4033
|
+
// Only toggle element can be on the right
|
|
4034
|
+
if (children.findIndex(c => c.localName === 'bao-toggle') > 0) {
|
|
4035
|
+
this.renderer.addClass(this.nativeElement, 'has-element-right');
|
|
4036
|
+
}
|
|
4037
|
+
// Icon, checkbox, radio button or avatar must be on the left
|
|
4038
|
+
else {
|
|
4039
|
+
this.renderer.addClass(this.nativeElement, 'has-element-left');
|
|
4040
|
+
}
|
|
4041
|
+
}
|
|
4042
|
+
}
|
|
4043
|
+
disableItem() {
|
|
4044
|
+
if (this.disabled) {
|
|
4045
|
+
this.renderer.setAttribute(this.nativeElement, 'aria-disabled', 'true');
|
|
4046
|
+
this.renderer.setAttribute(this.nativeElement, 'tabIndex', '-1');
|
|
4047
|
+
}
|
|
4048
|
+
}
|
|
4049
|
+
/**
|
|
4050
|
+
* This method propagates a click event to menu item children with inputs (checkbox, radio button)
|
|
4051
|
+
*/
|
|
4052
|
+
propagateClick() {
|
|
4053
|
+
for (let i = 0; i < this.nativeElement.children.length; i++) {
|
|
4054
|
+
if (this.nativeElement.children.item(i).firstElementChild.localName ==
|
|
4055
|
+
'input') {
|
|
4056
|
+
this.nativeElement.children.item(i).firstElementChild.click();
|
|
4057
|
+
}
|
|
4058
|
+
}
|
|
4059
|
+
}
|
|
4060
|
+
}
|
|
4061
|
+
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 });
|
|
4062
|
+
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 });
|
|
4063
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuItem, decorators: [{
|
|
4064
|
+
type: Directive,
|
|
4065
|
+
args: [{
|
|
4066
|
+
selector: 'bao-dropdown-menu-item, [bao-dropdown-menu-item]',
|
|
4067
|
+
host: {
|
|
4068
|
+
class: 'bao-dropdown-menu-item',
|
|
4069
|
+
'[class.bao-dropdown-menu-item-disabled]': 'disabled===true'
|
|
4070
|
+
}
|
|
4071
|
+
}]
|
|
4072
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: BaoDropdownMenuComponent }]; }, propDecorators: { disabled: [{
|
|
4073
|
+
type: Input
|
|
4074
|
+
}], spaceKeyEvent: [{
|
|
4075
|
+
type: HostListener,
|
|
4076
|
+
args: ['window:keyup.space']
|
|
4077
|
+
}], onClick: [{
|
|
4078
|
+
type: HostListener,
|
|
4079
|
+
args: ['click']
|
|
4080
|
+
}], enterKeyEvent: [{
|
|
4081
|
+
type: HostListener,
|
|
4082
|
+
args: ['window:keydown.enter']
|
|
4083
|
+
}] } });
|
|
4084
|
+
class BaoDropdownMenuComponent {
|
|
4085
|
+
constructor(cdr, renderer, elementRef) {
|
|
4086
|
+
this.cdr = cdr;
|
|
4087
|
+
this.renderer = renderer;
|
|
4088
|
+
this.elementRef = elementRef;
|
|
4089
|
+
/**
|
|
4090
|
+
* Fired when the dropdown-menu changes its 'isOpen' value
|
|
4091
|
+
*/
|
|
4092
|
+
this.isOpenChange = new EventEmitter();
|
|
4093
|
+
/**
|
|
4094
|
+
* Fired when menu is closed by key event triggered from menu item
|
|
4095
|
+
*/
|
|
4096
|
+
this.isClosedByKeyEvent = new EventEmitter();
|
|
4097
|
+
/**
|
|
4098
|
+
* Unique identifier of the dropdown menu
|
|
4099
|
+
*/
|
|
4100
|
+
this.menuId = `bao-dropdown-menu-${++dropdownMenuUniqueId}`;
|
|
4101
|
+
/**
|
|
4102
|
+
* Is the dropwdown menu currently open
|
|
4103
|
+
*/
|
|
4104
|
+
this._isOpen = false;
|
|
4105
|
+
}
|
|
4106
|
+
get isOpen() {
|
|
4107
|
+
return this._isOpen;
|
|
4108
|
+
}
|
|
4109
|
+
get activeItemIndex() {
|
|
4110
|
+
return this._activeItemIndex;
|
|
4111
|
+
}
|
|
4112
|
+
get menuPortal() {
|
|
4113
|
+
return this._menuPortal;
|
|
4114
|
+
}
|
|
4115
|
+
get nativeElement() {
|
|
4116
|
+
return this.elementRef.nativeElement;
|
|
4117
|
+
}
|
|
4118
|
+
set isOpen(isOpen) {
|
|
4119
|
+
this._isOpen = isOpen;
|
|
4120
|
+
this.cdr.detectChanges();
|
|
4121
|
+
this.isOpenChange.emit(isOpen);
|
|
4122
|
+
}
|
|
4123
|
+
set activeItemIndex(index) {
|
|
4124
|
+
this._activeItemIndex = index;
|
|
4125
|
+
}
|
|
4126
|
+
upKeyEvent() {
|
|
4127
|
+
if (this.isOpen) {
|
|
4128
|
+
const index = isNaN(this._activeItemIndex) ? 0 : this._activeItemIndex;
|
|
4129
|
+
const nextIndex = this.getNextActivableItemIndex(index, false);
|
|
4130
|
+
this.focusNextItem(nextIndex);
|
|
4131
|
+
}
|
|
4132
|
+
}
|
|
4133
|
+
downKeyEvent() {
|
|
4134
|
+
if (this.isOpen) {
|
|
4135
|
+
const index = isNaN(this._activeItemIndex) ? 0 : this._activeItemIndex;
|
|
4136
|
+
const nextIndex = this.getNextActivableItemIndex(index, true);
|
|
4137
|
+
this.focusNextItem(nextIndex);
|
|
4138
|
+
}
|
|
4139
|
+
}
|
|
4140
|
+
/** Prevents focus to be lost when TAB has reached end of menu */
|
|
4141
|
+
tabKeyEvent() {
|
|
4142
|
+
if (this.isOpen) {
|
|
4143
|
+
if (document.activeElement === this._listItems.last.nativeElement) {
|
|
4144
|
+
this.isClosedByKeyEvent.emit();
|
|
4145
|
+
}
|
|
4146
|
+
}
|
|
4147
|
+
}
|
|
4148
|
+
/** Prevents focus to be lost when SHIFT + TAB has reached beginning of menu */
|
|
4149
|
+
shiftTabKeyEvent() {
|
|
4150
|
+
if (this.isOpen) {
|
|
4151
|
+
if (document.activeElement === this._listItems.first.nativeElement) {
|
|
4152
|
+
this.isClosedByKeyEvent.emit();
|
|
4153
|
+
}
|
|
4154
|
+
}
|
|
4155
|
+
}
|
|
4156
|
+
ngAfterViewInit() {
|
|
4157
|
+
this.renderer.setAttribute(this.nativeElement, 'id', this.menuId);
|
|
4158
|
+
this._menuPortal = new DomPortal(this._menuContent);
|
|
4159
|
+
}
|
|
4160
|
+
focusFirstItem() {
|
|
4161
|
+
this._activeItemIndex = 0;
|
|
4162
|
+
this._listItems.first.nativeElement.focus();
|
|
4163
|
+
}
|
|
4164
|
+
open() {
|
|
4165
|
+
this.isOpen = true;
|
|
4166
|
+
}
|
|
4167
|
+
close() {
|
|
4168
|
+
this.isOpen = false;
|
|
4169
|
+
}
|
|
4170
|
+
/** Move the aria-current attribute to new active page */
|
|
4171
|
+
setNavigationAttribute(activePageElement) {
|
|
4172
|
+
const previousActivePage = this._listItems.find((item) => {
|
|
4173
|
+
return item.nativeElement.attributes['aria-current'] === 'page';
|
|
4174
|
+
});
|
|
4175
|
+
if (previousActivePage) {
|
|
4176
|
+
this.renderer.removeAttribute(previousActivePage.nativeElement, 'aria-current');
|
|
4177
|
+
this.renderer.removeClass(previousActivePage.nativeElement, 'active-link');
|
|
4178
|
+
}
|
|
4179
|
+
this.renderer.setAttribute(activePageElement, 'aria-current', 'page');
|
|
4180
|
+
this.renderer.addClass(activePageElement, 'active-link');
|
|
4181
|
+
}
|
|
4182
|
+
focusNextItem(nextIndex) {
|
|
4183
|
+
this._activeItemIndex = nextIndex;
|
|
4184
|
+
this._listItems.get(nextIndex).nativeElement.focus();
|
|
4185
|
+
}
|
|
4186
|
+
/**
|
|
4187
|
+
* Finds the next activable tab index when navigating with up and down arrow or TAB keys
|
|
4188
|
+
* @param currentIndex List item index which currently has focus
|
|
4189
|
+
* @param isDown Whether the navigation is going in the down direction or not
|
|
4190
|
+
* @param isBackward If recursive function is going backward looking for last activable item in list
|
|
4191
|
+
* @returns Index of the next item that will receive focus
|
|
4192
|
+
*/
|
|
4193
|
+
getNextActivableItemIndex(currentIndex, isDown, isBackward = false) {
|
|
4194
|
+
if (!this._listItems.get(currentIndex).disabled) {
|
|
4195
|
+
if (!this.canMove(currentIndex, isDown)) {
|
|
4196
|
+
return currentIndex;
|
|
4197
|
+
}
|
|
4198
|
+
}
|
|
4199
|
+
else {
|
|
4200
|
+
if (!this.canMove(currentIndex, isDown)) {
|
|
4201
|
+
const previousIndex = isDown ? currentIndex - 1 : currentIndex + 1;
|
|
4202
|
+
return this.getNextActivableItemIndex(previousIndex, isDown, true);
|
|
4203
|
+
}
|
|
4204
|
+
}
|
|
4205
|
+
const nextIndex = isDown ? currentIndex + 1 : currentIndex - 1;
|
|
4206
|
+
if (this._listItems.get(nextIndex).disabled) {
|
|
4207
|
+
if (isBackward) {
|
|
4208
|
+
return currentIndex;
|
|
4209
|
+
}
|
|
4210
|
+
return this.getNextActivableItemIndex(nextIndex, isDown);
|
|
4211
|
+
}
|
|
4212
|
+
return nextIndex;
|
|
4213
|
+
}
|
|
4214
|
+
/**
|
|
4215
|
+
* Finds if focus has reached end or beginning of list
|
|
4216
|
+
* @param currentIndex List item index which currently has focus
|
|
4217
|
+
* @param isDown Whether the navigation is going in the down direction or not
|
|
4218
|
+
* @returns Can focus move to next item or not
|
|
4219
|
+
*/
|
|
4220
|
+
canMove(currentIndex, isDown) {
|
|
4221
|
+
return !((currentIndex == 0 && !isDown) ||
|
|
4222
|
+
(currentIndex == this._listItems.length - 1 && isDown));
|
|
4223
|
+
}
|
|
4224
|
+
}
|
|
4225
|
+
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 });
|
|
4226
|
+
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 });
|
|
4227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuComponent, decorators: [{
|
|
4228
|
+
type: Component,
|
|
4229
|
+
args: [{ selector: 'bao-dropdown-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4230
|
+
class: 'bao-dropdown-menu',
|
|
4231
|
+
'[class.bao-overlay-transparent-backdrop]': 'isOpen===false',
|
|
4232
|
+
'[class.bao-dropdown-menu-closed]': 'isOpen===false',
|
|
4233
|
+
'[attr.aria-expanded]': 'isOpen'
|
|
4234
|
+
}, 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"] }]
|
|
4235
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { isOpenChange: [{
|
|
4236
|
+
type: Output
|
|
4237
|
+
}], isClosedByKeyEvent: [{
|
|
4238
|
+
type: Output
|
|
4239
|
+
}], _menuContent: [{
|
|
4240
|
+
type: ViewChild,
|
|
4241
|
+
args: ['menuContent']
|
|
4242
|
+
}], _listItems: [{
|
|
4243
|
+
type: ContentChildren,
|
|
4244
|
+
args: [BaoDropdownMenuItem, { descendants: true }]
|
|
4245
|
+
}], upKeyEvent: [{
|
|
4246
|
+
type: HostListener,
|
|
4247
|
+
args: ['window:keyup.arrowup']
|
|
4248
|
+
}], downKeyEvent: [{
|
|
4249
|
+
type: HostListener,
|
|
4250
|
+
args: ['window:keyup.arrowdown']
|
|
4251
|
+
}], tabKeyEvent: [{
|
|
4252
|
+
type: HostListener,
|
|
4253
|
+
args: ['window:keydown.tab']
|
|
4254
|
+
}], shiftTabKeyEvent: [{
|
|
4255
|
+
type: HostListener,
|
|
4256
|
+
args: ['window:keydown.shift.tab']
|
|
4257
|
+
}] } });
|
|
4258
|
+
/**
|
|
4259
|
+
* Directive to be applied on element that will trigger the opening and closing of menu.
|
|
4260
|
+
*/
|
|
4261
|
+
class BaoDropdownMenuTrigger {
|
|
4262
|
+
constructor(renderer, elementRef, overlay) {
|
|
4263
|
+
this.renderer = renderer;
|
|
4264
|
+
this.elementRef = elementRef;
|
|
4265
|
+
this.overlay = overlay;
|
|
4266
|
+
this._overlayRef = null;
|
|
4267
|
+
this._isMenuOpen = false;
|
|
4268
|
+
}
|
|
4269
|
+
get nativeElement() {
|
|
4270
|
+
return this.elementRef.nativeElement;
|
|
4271
|
+
}
|
|
4272
|
+
escapeKeyEvent() {
|
|
4273
|
+
if (this._isMenuOpen) {
|
|
4274
|
+
this.closeMenu();
|
|
4275
|
+
this.nativeElement.focus();
|
|
4276
|
+
}
|
|
4277
|
+
}
|
|
4278
|
+
/** Enter key event triggers click event which opens menu,
|
|
4279
|
+
* then focus is put on first item in the menu */
|
|
4280
|
+
enterKeyEvent() {
|
|
4281
|
+
if (this._isMenuOpen && document.activeElement === this.nativeElement) {
|
|
4282
|
+
this.menu.focusFirstItem();
|
|
4283
|
+
}
|
|
4284
|
+
}
|
|
4285
|
+
onClick() {
|
|
4286
|
+
this.toggleMenu();
|
|
4287
|
+
}
|
|
4288
|
+
ngAfterViewInit() {
|
|
4289
|
+
this.renderer.setAttribute(this.nativeElement, 'role', 'button');
|
|
4290
|
+
this.renderer.setAttribute(this.nativeElement, 'aria-controls', `bao-dropdown-menu-${dropdownMenuUniqueId}`);
|
|
4291
|
+
this.menu.isClosedByKeyEvent.subscribe(() => {
|
|
4292
|
+
this.closeMenu();
|
|
4293
|
+
this.nativeElement.focus();
|
|
4294
|
+
});
|
|
4295
|
+
}
|
|
4296
|
+
ngOnDestroy() {
|
|
4297
|
+
if (this._overlayRef) {
|
|
4298
|
+
this._overlayRef.dispose();
|
|
4299
|
+
}
|
|
4300
|
+
}
|
|
4301
|
+
toggleMenu() {
|
|
4302
|
+
return this._isMenuOpen ? this.closeMenu() : this.openMenu();
|
|
4303
|
+
}
|
|
4304
|
+
closeMenu() {
|
|
4305
|
+
this._isMenuOpen = false;
|
|
4306
|
+
this.menu.close();
|
|
4307
|
+
if (this._overlayRef) {
|
|
4308
|
+
this._overlayRef.detach();
|
|
4309
|
+
}
|
|
4310
|
+
}
|
|
4311
|
+
openMenu() {
|
|
4312
|
+
if (!this.menu) {
|
|
4313
|
+
return;
|
|
4314
|
+
}
|
|
4315
|
+
const overlayRef = this.createOverlay();
|
|
4316
|
+
overlayRef.attach(this.menu.menuPortal);
|
|
4317
|
+
this._isMenuOpen = true;
|
|
4318
|
+
this.menu.open();
|
|
4319
|
+
}
|
|
4320
|
+
createOverlay() {
|
|
4321
|
+
if (!this._overlayRef) {
|
|
4322
|
+
const config = this.getOverlayConfig();
|
|
4323
|
+
this._overlayRef = this.overlay.create(config);
|
|
4324
|
+
}
|
|
4325
|
+
this._overlayRef.backdropClick().subscribe(() => {
|
|
4326
|
+
this.closeMenu();
|
|
4327
|
+
});
|
|
4328
|
+
return this._overlayRef;
|
|
4329
|
+
}
|
|
4330
|
+
getOverlayConfig() {
|
|
4331
|
+
return new OverlayConfig({
|
|
4332
|
+
positionStrategy: this.overlay
|
|
4333
|
+
.position()
|
|
4334
|
+
.flexibleConnectedTo(this.elementRef)
|
|
4335
|
+
.withLockedPosition()
|
|
4336
|
+
.withGrowAfterOpen()
|
|
4337
|
+
.withPositions([
|
|
4338
|
+
{
|
|
4339
|
+
// top-left of the overlay is connected to bottom-left of the origin;
|
|
4340
|
+
originX: 'start',
|
|
4341
|
+
originY: 'bottom',
|
|
4342
|
+
overlayX: 'start',
|
|
4343
|
+
overlayY: 'top'
|
|
4344
|
+
},
|
|
4345
|
+
{
|
|
4346
|
+
// bottom-left of the overlay is connected to top-left of the origin;
|
|
4347
|
+
originX: 'start',
|
|
4348
|
+
originY: 'top',
|
|
4349
|
+
overlayX: 'start',
|
|
4350
|
+
overlayY: 'bottom'
|
|
4351
|
+
}
|
|
4352
|
+
]),
|
|
4353
|
+
backdropClass: 'bao-overlay-transparent-backdrop',
|
|
4354
|
+
hasBackdrop: true,
|
|
4355
|
+
scrollStrategy: this.overlay.scrollStrategies.block()
|
|
4356
|
+
});
|
|
4357
|
+
}
|
|
4358
|
+
}
|
|
4359
|
+
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 });
|
|
4360
|
+
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 });
|
|
4361
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuTrigger, decorators: [{
|
|
4362
|
+
type: Directive,
|
|
4363
|
+
args: [{
|
|
4364
|
+
selector: 'bao-dropdown-menu-trigger, [bao-dropdown-menu-trigger], [baoDropdownMenuTriggerFor]',
|
|
4365
|
+
host: { class: 'bao-dropdown-menu-trigger' }
|
|
4366
|
+
}]
|
|
4367
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1$4.Overlay }]; }, propDecorators: { menu: [{
|
|
4368
|
+
type: Input,
|
|
4369
|
+
args: ['baoDropdownMenuTriggerFor']
|
|
4370
|
+
}], escapeKeyEvent: [{
|
|
4371
|
+
type: HostListener,
|
|
4372
|
+
args: ['window:keyup.escape']
|
|
4373
|
+
}], enterKeyEvent: [{
|
|
4374
|
+
type: HostListener,
|
|
4375
|
+
args: ['window:keyup.enter']
|
|
4376
|
+
}], onClick: [{
|
|
4377
|
+
type: HostListener,
|
|
4378
|
+
args: ['click']
|
|
4379
|
+
}] } });
|
|
4380
|
+
/**
|
|
4381
|
+
* Sections of list items in menu. Apply proper styling to section's title if there is one.
|
|
4382
|
+
*/
|
|
4383
|
+
class BaoDropdownMenuSection {
|
|
4384
|
+
constructor(elementRef, renderer) {
|
|
4385
|
+
this.elementRef = elementRef;
|
|
4386
|
+
this.renderer = renderer;
|
|
4387
|
+
}
|
|
4388
|
+
get nativeElement() {
|
|
4389
|
+
return this.elementRef.nativeElement;
|
|
4390
|
+
}
|
|
4391
|
+
ngAfterViewInit() {
|
|
4392
|
+
const children = Array.from(this.nativeElement.childNodes);
|
|
4393
|
+
const textIndex = children.findIndex((c) => c.nodeName === '#text');
|
|
4394
|
+
if (textIndex > -1) {
|
|
4395
|
+
this.insertTitle(children, textIndex);
|
|
4396
|
+
}
|
|
4397
|
+
}
|
|
4398
|
+
insertTitle(children, txtIdx) {
|
|
4399
|
+
const titleElement = this.renderer.createElement('h5');
|
|
4400
|
+
this.renderer.setProperty(titleElement, 'textContent', children[txtIdx].nodeValue);
|
|
4401
|
+
this.renderer.removeChild(this.nativeElement, children[txtIdx]);
|
|
4402
|
+
const listIndex = children.findIndex((c) => c.nodeName === 'UL');
|
|
4403
|
+
this.renderer.insertBefore(this.nativeElement, titleElement, children[listIndex]);
|
|
4404
|
+
}
|
|
4405
|
+
}
|
|
4406
|
+
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 });
|
|
4407
|
+
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 });
|
|
4408
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuSection, decorators: [{
|
|
4409
|
+
type: Directive,
|
|
4410
|
+
args: [{
|
|
4411
|
+
selector: 'bao-dropdown-menu-section, [bao-dropdown-menu-section]',
|
|
4412
|
+
host: { class: 'bao-dropdown-menu-section' }
|
|
4413
|
+
}]
|
|
4414
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
|
|
4415
|
+
/**
|
|
4416
|
+
* Label of a list item, add css class to apply proper styling.
|
|
4417
|
+
*/
|
|
4418
|
+
class BaoDropdownMenuItemLabel {
|
|
4419
|
+
}
|
|
4420
|
+
BaoDropdownMenuItemLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuItemLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4421
|
+
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 });
|
|
4422
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuItemLabel, decorators: [{
|
|
4423
|
+
type: Directive,
|
|
4424
|
+
args: [{
|
|
4425
|
+
selector: 'bao-dropdown-menu-item-label, [bao-dropdown-menu-item-label]',
|
|
4426
|
+
host: { class: 'bao-dropdown-menu-item-label' }
|
|
4427
|
+
}]
|
|
4428
|
+
}] });
|
|
4429
|
+
/**
|
|
4430
|
+
* Description of a list item, add css class to apply proper styling.
|
|
4431
|
+
*/
|
|
4432
|
+
class BaoDropdownMenuItemDescription {
|
|
4433
|
+
}
|
|
4434
|
+
BaoDropdownMenuItemDescription.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuItemDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4435
|
+
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 });
|
|
4436
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuItemDescription, decorators: [{
|
|
4437
|
+
type: Directive,
|
|
4438
|
+
args: [{
|
|
4439
|
+
selector: 'bao-dropdown-menu-item-description, [bao-dropdown-menu-item-description]',
|
|
4440
|
+
host: { class: 'bao-dropdown-menu-item-description' }
|
|
4441
|
+
}]
|
|
4442
|
+
}] });
|
|
4443
|
+
/**
|
|
4444
|
+
* Divider to separate sections.
|
|
4445
|
+
*/
|
|
4446
|
+
class BaoDropdownMenuDivider {
|
|
4447
|
+
constructor(renderer, elementRef) {
|
|
4448
|
+
this.renderer = renderer;
|
|
4449
|
+
this.elementRef = elementRef;
|
|
4450
|
+
}
|
|
4451
|
+
get nativeElement() {
|
|
4452
|
+
return this.elementRef.nativeElement;
|
|
4453
|
+
}
|
|
4454
|
+
ngAfterContentInit() {
|
|
4455
|
+
this.renderer.setAttribute(this.nativeElement, 'role', 'separator');
|
|
4456
|
+
}
|
|
4457
|
+
}
|
|
4458
|
+
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 });
|
|
4459
|
+
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 });
|
|
4460
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuDivider, decorators: [{
|
|
4461
|
+
type: Component,
|
|
4462
|
+
args: [{
|
|
4463
|
+
template: `<hr />`,
|
|
4464
|
+
selector: 'bao-dropdown-menu-divider, [bao-dropdown-menu-divider]',
|
|
4465
|
+
host: { class: 'bao-dropdown-menu-divider' }
|
|
4466
|
+
}]
|
|
4467
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; } });
|
|
4468
|
+
|
|
4469
|
+
/*
|
|
4470
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
4471
|
+
* Licensed under the MIT license.
|
|
4472
|
+
* See LICENSE file in the project root for full license information.
|
|
4473
|
+
*/
|
|
4474
|
+
const DROPDOWN_MENU_DIRECTIVES = [
|
|
4475
|
+
BaoDropdownMenuComponent,
|
|
4476
|
+
BaoDropdownMenuTrigger,
|
|
4477
|
+
BaoDropdownMenuItem,
|
|
4478
|
+
BaoDropdownMenuSection,
|
|
4479
|
+
BaoDropdownMenuItemLabel,
|
|
4480
|
+
BaoDropdownMenuItemDescription,
|
|
4481
|
+
BaoDropdownMenuDivider
|
|
4482
|
+
];
|
|
4483
|
+
class BaoDropdownMenuModule {
|
|
4484
|
+
}
|
|
4485
|
+
BaoDropdownMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4486
|
+
BaoDropdownMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuModule, declarations: [BaoDropdownMenuComponent,
|
|
4487
|
+
BaoDropdownMenuTrigger,
|
|
4488
|
+
BaoDropdownMenuItem,
|
|
4489
|
+
BaoDropdownMenuSection,
|
|
4490
|
+
BaoDropdownMenuItemLabel,
|
|
4491
|
+
BaoDropdownMenuItemDescription,
|
|
4492
|
+
BaoDropdownMenuDivider], imports: [CommonModule, ObserversModule, OverlayModule, PortalModule], exports: [BaoDropdownMenuComponent,
|
|
4493
|
+
BaoDropdownMenuTrigger,
|
|
4494
|
+
BaoDropdownMenuItem,
|
|
4495
|
+
BaoDropdownMenuSection,
|
|
4496
|
+
BaoDropdownMenuItemLabel,
|
|
4497
|
+
BaoDropdownMenuItemDescription,
|
|
4498
|
+
BaoDropdownMenuDivider] });
|
|
4499
|
+
BaoDropdownMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuModule, imports: [CommonModule, ObserversModule, OverlayModule, PortalModule] });
|
|
4500
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuModule, decorators: [{
|
|
4501
|
+
type: NgModule,
|
|
4502
|
+
args: [{
|
|
4503
|
+
imports: [CommonModule, ObserversModule, OverlayModule, PortalModule],
|
|
4504
|
+
declarations: [DROPDOWN_MENU_DIRECTIVES],
|
|
4505
|
+
exports: [...DROPDOWN_MENU_DIRECTIVES]
|
|
4506
|
+
}]
|
|
4507
|
+
}] });
|
|
4508
|
+
|
|
4509
|
+
/*
|
|
4510
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
4511
|
+
* Licensed under the MIT license.
|
|
4512
|
+
* See LICENSE file in the project root for full license information.
|
|
4513
|
+
*/
|
|
4514
|
+
|
|
3856
4515
|
/*
|
|
3857
4516
|
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
3858
4517
|
* Licensed under the MIT license.
|
|
@@ -3879,7 +4538,9 @@ BaoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
|
3879
4538
|
BaoSummaryModule,
|
|
3880
4539
|
BaoAvatarModule,
|
|
3881
4540
|
BaoTabsModule,
|
|
3882
|
-
BaoModalModule
|
|
4541
|
+
BaoModalModule,
|
|
4542
|
+
BaoHyperlinkModule,
|
|
4543
|
+
BaoDropdownMenuModule
|
|
3883
4544
|
// TODO: reactivate once component does not depend on global css BaoBadgeModule,
|
|
3884
4545
|
// TODO: reactivate once component does not depend on global css BaoSnackBarModule,
|
|
3885
4546
|
] });
|
|
@@ -3901,7 +4562,9 @@ BaoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.
|
|
|
3901
4562
|
BaoSummaryModule,
|
|
3902
4563
|
BaoAvatarModule,
|
|
3903
4564
|
BaoTabsModule,
|
|
3904
|
-
BaoModalModule
|
|
4565
|
+
BaoModalModule,
|
|
4566
|
+
BaoHyperlinkModule,
|
|
4567
|
+
BaoDropdownMenuModule
|
|
3905
4568
|
// TODO: reactivate once component does not depend on global css BaoBadgeModule,
|
|
3906
4569
|
// TODO: reactivate once component does not depend on global css BaoSnackBarModule,
|
|
3907
4570
|
] });
|
|
@@ -3930,7 +4593,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
|
|
|
3930
4593
|
BaoSummaryModule,
|
|
3931
4594
|
BaoAvatarModule,
|
|
3932
4595
|
BaoTabsModule,
|
|
3933
|
-
BaoModalModule
|
|
4596
|
+
BaoModalModule,
|
|
4597
|
+
BaoHyperlinkModule,
|
|
4598
|
+
BaoDropdownMenuModule
|
|
3934
4599
|
// TODO: reactivate once component does not depend on global css BaoBadgeModule,
|
|
3935
4600
|
// TODO: reactivate once component does not depend on global css BaoSnackBarModule,
|
|
3936
4601
|
]
|
|
@@ -4010,5 +4675,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
|
|
|
4010
4675
|
* Generated bundle index. Do not edit.
|
|
4011
4676
|
*/
|
|
4012
4677
|
|
|
4013
|
-
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, 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 };
|
|
4678
|
+
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 };
|
|
4014
4679
|
//# sourceMappingURL=villedemontreal-angular-ui.mjs.map
|