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