@villedemontreal/angular-ui 2.2.0 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/alert/alert.component.mjs +7 -9
- package/esm2020/lib/avatar/avatar.component.mjs +102 -0
- package/esm2020/lib/avatar/index.mjs +8 -0
- package/esm2020/lib/avatar/module.mjs +24 -0
- package/esm2020/lib/bao.module.mjs +16 -4
- package/esm2020/lib/breadcrumb/breadcrumb.component.mjs +5 -5
- package/esm2020/lib/button/button.component.mjs +3 -3
- package/esm2020/lib/checkbox/checkbox-group.component.mjs +5 -6
- package/esm2020/lib/checkbox/checkbox.component.mjs +38 -39
- package/esm2020/lib/core/colors.mjs +10 -27
- package/esm2020/lib/icon/icon.component.mjs +29 -33
- package/esm2020/lib/icon/icons-dictionary.mjs +3 -2
- package/esm2020/lib/modal/index.mjs +12 -0
- package/esm2020/lib/modal/modal-animations.mjs +29 -0
- package/esm2020/lib/modal/modal-config.mjs +65 -0
- package/esm2020/lib/modal/modal-container.mjs +254 -0
- package/esm2020/lib/modal/modal-directives.mjs +84 -0
- package/esm2020/lib/modal/modal-ref.mjs +195 -0
- package/esm2020/lib/modal/modal.mjs +291 -0
- package/esm2020/lib/modal/module.mjs +46 -0
- package/esm2020/lib/radio/radio-group.component.mjs +40 -41
- package/esm2020/lib/radio/radio.component.mjs +38 -39
- package/esm2020/lib/shared/enum/display-mode.mjs +2 -11
- package/esm2020/lib/summary/summary.component.mjs +5 -7
- package/esm2020/lib/tabs/index.mjs +8 -0
- package/esm2020/lib/tabs/module.mjs +35 -0
- package/esm2020/lib/tabs/tabs.component.mjs +295 -0
- package/esm2020/lib/tag/tag.component.mjs +3 -3
- package/esm2020/public-api.mjs +5 -1
- package/fesm2015/villedemontreal-angular-ui.mjs +1607 -230
- package/fesm2015/villedemontreal-angular-ui.mjs.map +1 -1
- package/fesm2020/villedemontreal-angular-ui.mjs +1597 -228
- package/fesm2020/villedemontreal-angular-ui.mjs.map +1 -1
- package/lib/alert/alert.component.d.ts +2 -3
- package/lib/avatar/avatar.component.d.ts +26 -0
- package/lib/avatar/index.d.ts +2 -0
- package/lib/avatar/module.d.ts +8 -0
- package/lib/bao.module.d.ts +4 -1
- package/lib/breadcrumb/breadcrumb.component.d.ts +1 -1
- package/lib/button/button.component.d.ts +1 -1
- package/lib/checkbox/checkbox-group.component.d.ts +2 -2
- package/lib/checkbox/checkbox.component.d.ts +27 -27
- package/lib/core/colors.d.ts +1 -1
- package/lib/icon/icon.component.d.ts +11 -11
- package/lib/modal/index.d.ts +6 -0
- package/lib/modal/modal-animations.d.ts +8 -0
- package/lib/modal/modal-config.d.ts +105 -0
- package/lib/modal/modal-container.d.ts +106 -0
- package/lib/modal/modal-directives.d.ts +25 -0
- package/lib/modal/modal-ref.d.ts +91 -0
- package/lib/modal/modal.d.ts +91 -0
- package/lib/modal/module.d.ts +12 -0
- package/lib/radio/radio-group.component.d.ts +19 -19
- package/lib/radio/radio.component.d.ts +27 -27
- package/lib/shared/enum/display-mode.d.ts +1 -1
- package/lib/summary/summary.component.d.ts +5 -5
- package/lib/tabs/index.d.ts +2 -0
- package/lib/tabs/module.d.ts +8 -0
- package/lib/tabs/tabs.component.d.ts +95 -0
- package/lib/tag/tag.component.d.ts +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +4 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { SecurityContext, Injectable, Inject, Component, ViewEncapsulation, ChangeDetectionStrategy,
|
|
2
|
+
import { SecurityContext, Injectable, Inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, NgModule, Directive, EventEmitter, Output, CUSTOM_ELEMENTS_SCHEMA, ViewChild, forwardRef, InjectionToken, ContentChildren, Optional, HostListener, ContentChild, Injector, TemplateRef, SkipSelf } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
@@ -9,43 +9,36 @@ import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/fo
|
|
|
9
9
|
import * as i1$3 from '@angular/cdk/a11y';
|
|
10
10
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
11
11
|
import * as i2 from '@angular/cdk/collections';
|
|
12
|
+
import * as i1$4 from '@angular/cdk/overlay';
|
|
13
|
+
import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
14
|
+
import * as i3 from '@angular/cdk/portal';
|
|
15
|
+
import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
|
|
16
|
+
import { Subject, filter, take, defer, startWith, Subscription } from 'rxjs';
|
|
17
|
+
import { __awaiter } from 'tslib';
|
|
18
|
+
import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
|
|
19
|
+
import { trigger, state, style, transition, group, animate, query, animateChild } from '@angular/animations';
|
|
20
|
+
import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
|
|
21
|
+
import { ANIMATION_MODULE_TYPE, BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
|
|
12
22
|
|
|
13
|
-
/*
|
|
14
|
-
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
15
|
-
* Licensed under the MIT license.
|
|
16
|
-
* See LICENSE file in the project root for full license information.
|
|
17
|
-
*/
|
|
18
|
-
var BaoColors;
|
|
19
|
-
(function (BaoColors) {
|
|
20
|
-
BaoColors["ACTION"] = "action";
|
|
21
|
-
BaoColors["PRIMARY"] = "primary";
|
|
22
|
-
BaoColors["PRIMARY_REVERSED"] = "primary-reversed";
|
|
23
|
-
BaoColors["SECONDARY"] = "secondary";
|
|
24
|
-
BaoColors["TERTIARY"] = "tertiary";
|
|
25
|
-
BaoColors["INFORMATIVE"] = "informative";
|
|
26
|
-
BaoColors["NEGATIVE"] = "negative";
|
|
27
|
-
BaoColors["POSITIVE"] = "positive";
|
|
28
|
-
BaoColors["WARNING"] = "warning";
|
|
29
|
-
})(BaoColors || (BaoColors = {}));
|
|
30
23
|
function baoColorToHex(baoColor) {
|
|
31
24
|
switch (baoColor) {
|
|
32
|
-
case
|
|
25
|
+
case "action" /* ACTION */:
|
|
33
26
|
return '#097D6C';
|
|
34
|
-
case
|
|
27
|
+
case "primary" /* PRIMARY */:
|
|
35
28
|
return '#000000';
|
|
36
|
-
case
|
|
29
|
+
case "primary-reversed" /* PRIMARY_REVERSED */:
|
|
37
30
|
return '#FFFFFF';
|
|
38
|
-
case
|
|
31
|
+
case "secondary" /* SECONDARY */:
|
|
39
32
|
return '#637381';
|
|
40
|
-
case
|
|
33
|
+
case "tertiary" /* TERTIARY */:
|
|
41
34
|
return '#ADB5BD';
|
|
42
|
-
case
|
|
35
|
+
case "informative" /* INFORMATIVE */:
|
|
43
36
|
return '#0079C4';
|
|
44
|
-
case
|
|
37
|
+
case "negative" /* NEGATIVE */:
|
|
45
38
|
return '#D3310A';
|
|
46
|
-
case
|
|
39
|
+
case "positive" /* POSITIVE */:
|
|
47
40
|
return '#0DA566';
|
|
48
|
-
case
|
|
41
|
+
case "warning" /* WARNING */:
|
|
49
42
|
return '#FFB833';
|
|
50
43
|
default:
|
|
51
44
|
return '#097D6C';
|
|
@@ -172,7 +165,8 @@ const ICONS_DCT = {
|
|
|
172
165
|
'icon-x-circle-full': "<path fill-rule='evenodd' d='M10.586 12l-2.829 2.828a1 1 0 001.415 1.415L12 13.414l2.828 2.829a1 1 0 001.415-1.415L13.414 12l2.829-2.828a1 1 0 10-1.415-1.415L12 10.586 9.172 7.757a1 1 0 00-1.415 1.415L10.586 12zM12 23C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11z'/>",
|
|
173
166
|
'icon-x-circle': "<path fill-rule='evenodd' d='M10.586 12L7.757 9.172a1 1 0 011.415-1.415L12 10.586l2.828-2.829a1 1 0 011.415 1.415L13.414 12l2.829 2.828a1 1 0 01-1.415 1.415L12 13.414l-2.828 2.829a1 1 0 11-1.415-1.415L10.586 12zm10.956 5.477a1 1 0 01-1.734-.997A8.953 8.953 0 0021 12a9 9 0 10-9 9 8.953 8.953 0 004.484-1.195 1 1 0 01.998 1.733A10.953 10.953 0 0112 23C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11c0 1.948-.508 3.824-1.458 5.477z'/>",
|
|
174
167
|
'icon-x': "<path fill-rule='evenodd' d='M12 13.414l-5.293 5.293a1 1 0 11-1.414-1.414L10.586 12 5.293 6.707a1 1 0 011.414-1.414l12 12a1 1 0 01-1.414 1.414L12 13.414zm5.293-8.121a1 1 0 011.414 1.414l-3 3a1 1 0 11-1.414-1.414l3-3z'/>",
|
|
175
|
-
'icon-spinner': "<path d='M24 12C24 14.3734 23.2962 16.6935 21.9776 18.6668C20.6591 20.6402 18.7849 22.1783 16.5922 23.0866C14.3995 23.9948 11.9867 24.2324 9.65892 23.7694C7.33114 23.3064 5.19295 22.1635 3.51472 20.4853C1.83649 18.8071 0.693599 16.6689 0.230577 14.3411C-0.232446 12.0133 0.00519403 9.60051 0.913446 7.4078C1.8217 5.21509 3.35977 3.34094 5.33316 2.02236C7.30655 0.703788 9.62662 -2.83022e-08 12 0L12 3C10.22 3 8.47991 3.52784 6.99987 4.51677C5.51983 5.50571 4.36627 6.91131 3.68508 8.55585C3.0039 10.2004 2.82567 12.01 3.17293 13.7558C3.5202 15.5016 4.37737 17.1053 5.63604 18.364C6.89471 19.6226 8.49836 20.4798 10.2442 20.8271C11.99 21.1743 13.7996 20.9961 15.4442 20.3149C17.0887 19.6337 18.4943 18.4802 19.4832 17.0001C20.4722 15.5201 21 13.78 21 12H24Z'/>"
|
|
168
|
+
'icon-spinner': "<path d='M24 12C24 14.3734 23.2962 16.6935 21.9776 18.6668C20.6591 20.6402 18.7849 22.1783 16.5922 23.0866C14.3995 23.9948 11.9867 24.2324 9.65892 23.7694C7.33114 23.3064 5.19295 22.1635 3.51472 20.4853C1.83649 18.8071 0.693599 16.6689 0.230577 14.3411C-0.232446 12.0133 0.00519403 9.60051 0.913446 7.4078C1.8217 5.21509 3.35977 3.34094 5.33316 2.02236C7.30655 0.703788 9.62662 -2.83022e-08 12 0L12 3C10.22 3 8.47991 3.52784 6.99987 4.51677C5.51983 5.50571 4.36627 6.91131 3.68508 8.55585C3.0039 10.2004 2.82567 12.01 3.17293 13.7558C3.5202 15.5016 4.37737 17.1053 5.63604 18.364C6.89471 19.6226 8.49836 20.4798 10.2442 20.8271C11.99 21.1743 13.7996 20.9961 15.4442 20.3149C17.0887 19.6337 18.4943 18.4802 19.4832 17.0001C20.4722 15.5201 21 13.78 21 12H24Z'/>",
|
|
169
|
+
'icon-emergency': "<path fill-rule='evenodd' clip-rule='evenodd' d='M11.067 7.87a.957.957 0 011.914 0v4.786a.957.957 0 11-1.914 0V7.87zM12.024 15.527a.958.958 0 10.001 1.916.958.958 0 00-.001-1.916z M9.878 1.879a3 3 0 014.243 0l8 7.999a3 3 0 010 4.242l-7.999 8.001a3 3 0 01-4.242 0l-8.001-7.999a3 3 0 010-4.242l7.999-8.001zm2.829 1.414a1 1 0 00-1.415 0l-8 8a1 1 0 00.001 1.415l8 8a1 1 0 001.415 0l8-8.002a1 1 0 000-1.414l-8.001-8z'/>"
|
|
176
170
|
};
|
|
177
171
|
|
|
178
172
|
/*
|
|
@@ -221,7 +215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
221
215
|
* Licensed under the MIT license.
|
|
222
216
|
* See LICENSE file in the project root for full license information.
|
|
223
217
|
*/
|
|
224
|
-
const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
|
|
218
|
+
const SVG_NAMESPACE$1 = 'http://www.w3.org/2000/svg';
|
|
225
219
|
const TITLE = 'title';
|
|
226
220
|
/**
|
|
227
221
|
* Component to display an icon. It can be used in the following ways:
|
|
@@ -231,7 +225,7 @@ const TITLE = 'title';
|
|
|
231
225
|
* `<bao-icon svgIcon="heart"></bao-icon>`
|
|
232
226
|
*/
|
|
233
227
|
class BaoIconComponent {
|
|
234
|
-
constructor(elementRef, iconRegistry, renderer
|
|
228
|
+
constructor(elementRef, iconRegistry, renderer) {
|
|
235
229
|
this.elementRef = elementRef;
|
|
236
230
|
this.iconRegistry = iconRegistry;
|
|
237
231
|
this.renderer = renderer;
|
|
@@ -239,11 +233,6 @@ class BaoIconComponent {
|
|
|
239
233
|
* The size of the icon
|
|
240
234
|
*/
|
|
241
235
|
this.size = 'x-small';
|
|
242
|
-
// If the user has not explicitly set aria-hidden, mark the icon as hidden, as this is
|
|
243
|
-
// the right thing to do for the majority of icon use-cases.
|
|
244
|
-
if (!ariaHidden) {
|
|
245
|
-
this.elementRef.nativeElement.setAttribute('aria-hidden', 'true');
|
|
246
|
-
}
|
|
247
236
|
this._titleId = '';
|
|
248
237
|
this._title = '';
|
|
249
238
|
this._svgIcon = '';
|
|
@@ -252,6 +241,18 @@ class BaoIconComponent {
|
|
|
252
241
|
get svgIcon() {
|
|
253
242
|
return this._svgIcon;
|
|
254
243
|
}
|
|
244
|
+
/** Title that will be used as an aria-label for the icon */
|
|
245
|
+
get title() {
|
|
246
|
+
return this._title;
|
|
247
|
+
}
|
|
248
|
+
get hexColor() {
|
|
249
|
+
if (this.color) {
|
|
250
|
+
return baoColorToHex(this.color);
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
get titleId() {
|
|
254
|
+
return this._titleId;
|
|
255
|
+
}
|
|
255
256
|
set svgIcon(value) {
|
|
256
257
|
if (value !== this._svgIcon) {
|
|
257
258
|
if (value) {
|
|
@@ -264,15 +265,6 @@ class BaoIconComponent {
|
|
|
264
265
|
this.renderer.addClass(this.elementRef.nativeElement, `bao-${this._svgIcon}`);
|
|
265
266
|
}
|
|
266
267
|
}
|
|
267
|
-
get hexColor() {
|
|
268
|
-
if (this.color) {
|
|
269
|
-
return baoColorToHex(this.color);
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
/** Title that will be used as an aria-label for the icon */
|
|
273
|
-
get title() {
|
|
274
|
-
return this._title;
|
|
275
|
-
}
|
|
276
268
|
set title(value) {
|
|
277
269
|
if (value !== this._title) {
|
|
278
270
|
this._title = value;
|
|
@@ -280,9 +272,6 @@ class BaoIconComponent {
|
|
|
280
272
|
this.updateSvgIcon(this.svgIcon, value);
|
|
281
273
|
}
|
|
282
274
|
}
|
|
283
|
-
get titleId() {
|
|
284
|
-
return this._titleId;
|
|
285
|
-
}
|
|
286
275
|
ngOnDestroy() {
|
|
287
276
|
if (this._elementsWithExternalReferences) {
|
|
288
277
|
this._elementsWithExternalReferences.clear();
|
|
@@ -324,25 +313,31 @@ class BaoIconComponent {
|
|
|
324
313
|
if (title) {
|
|
325
314
|
svg = this.addTitleToSVG(svg, title);
|
|
326
315
|
}
|
|
316
|
+
if (!title) {
|
|
317
|
+
svg.setAttribute('aria-hidden', 'true');
|
|
318
|
+
}
|
|
327
319
|
this.setSvgElement(svg);
|
|
328
320
|
}
|
|
329
321
|
}
|
|
330
322
|
addTitleToSVG(svg, title) {
|
|
331
|
-
const titleNode = this.renderer.createElement(TITLE, SVG_NAMESPACE);
|
|
323
|
+
const titleNode = this.renderer.createElement(TITLE, SVG_NAMESPACE$1);
|
|
332
324
|
titleNode.id = this._titleId;
|
|
333
325
|
const titleText = this.renderer.createText(title);
|
|
334
326
|
this.renderer.appendChild(titleNode, titleText);
|
|
335
327
|
this.renderer.appendChild(svg, titleNode);
|
|
328
|
+
svg.setAttribute('aria-labelledby', this._titleId);
|
|
336
329
|
return svg;
|
|
337
330
|
}
|
|
338
331
|
generateUniqueTitleId() {
|
|
339
332
|
return this.title
|
|
340
|
-
? `${this.title
|
|
333
|
+
? `${this.title
|
|
334
|
+
.replace(/[^A-Z0-9]+/gi, '')
|
|
335
|
+
.toLocaleLowerCase()}-${Math.floor(Math.random() * 10000000000000000)}`
|
|
341
336
|
: '';
|
|
342
337
|
}
|
|
343
338
|
}
|
|
344
|
-
BaoIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoIconComponent, deps: [{ token: i0.ElementRef }, { token: BaoIconDictionary }, { token: i0.Renderer2 }
|
|
345
|
-
BaoIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoIconComponent, selector: "bao-icon", inputs: {
|
|
339
|
+
BaoIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoIconComponent, deps: [{ token: i0.ElementRef }, { token: BaoIconDictionary }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
340
|
+
BaoIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoIconComponent, selector: "bao-icon", inputs: { color: "color", size: "size", svgIcon: "svgIcon", title: "title" }, host: { attributes: { "role": "img" }, properties: { "class.bao-icon": "true", "class.notranslate": "true", "class.bao-icon-medium": "size === \"medium\"", "class.bao-icon-small": "size === \"small\"", "class.bao-icon-x-small": "size === \"x-small\"", "class.bao-icon-xx-small": "size === \"xx-small\"", "attr.data-bao-icon-type": "\"svg\"", "style.color": "hexColor" } }, exportAs: ["baoIcon"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["bao-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;line-height:normal}bao-icon svg{height:100%;width:100%}bao-icon.bao-icon-medium{height:2.5rem;width:2.5rem}bao-icon.bao-icon-small{height:2rem;width:2rem;line-height:1.75rem}bao-icon.bao-icon-x-small{height:1.5rem;width:1.5rem;line-height:.5rem}bao-icon.bao-icon-xx-small{height:1rem;width:1rem;line-height:.85rem}bao-icon.bao-icon-spinner{animation:spin .75s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
346
341
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoIconComponent, decorators: [{
|
|
347
342
|
type: Component,
|
|
348
343
|
args: [{ template: '<ng-content></ng-content>', selector: 'bao-icon', exportAs: 'baoIcon', host: {
|
|
@@ -355,22 +350,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
355
350
|
'[class.bao-icon-x-small]': 'size === "x-small"',
|
|
356
351
|
'[class.bao-icon-xx-small]': 'size === "xx-small"',
|
|
357
352
|
'[attr.data-bao-icon-type]': '"svg"',
|
|
358
|
-
'[attr.aria-labelledby]': 'titleId',
|
|
359
|
-
'[attr.aria-hidden]': '!title',
|
|
360
353
|
'[style.color]': 'hexColor'
|
|
361
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["bao-icon{background-repeat:no-repeat;display:inline-
|
|
362
|
-
}], ctorParameters: function () {
|
|
363
|
-
return [{ type: i0.ElementRef }, { type: BaoIconDictionary }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
|
|
364
|
-
type: Attribute,
|
|
365
|
-
args: ['aria-hidden']
|
|
366
|
-
}] }];
|
|
367
|
-
}, propDecorators: { svgIcon: [{
|
|
354
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["bao-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;line-height:normal}bao-icon svg{height:100%;width:100%}bao-icon.bao-icon-medium{height:2.5rem;width:2.5rem}bao-icon.bao-icon-small{height:2rem;width:2rem;line-height:1.75rem}bao-icon.bao-icon-x-small{height:1.5rem;width:1.5rem;line-height:.5rem}bao-icon.bao-icon-xx-small{height:1rem;width:1rem;line-height:.85rem}bao-icon.bao-icon-spinner{animation:spin .75s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
355
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: BaoIconDictionary }, { type: i0.Renderer2 }]; }, propDecorators: { color: [{
|
|
368
356
|
type: Input
|
|
369
|
-
}],
|
|
357
|
+
}], size: [{
|
|
370
358
|
type: Input
|
|
371
|
-
}],
|
|
359
|
+
}], svgIcon: [{
|
|
372
360
|
type: Input
|
|
373
|
-
}],
|
|
361
|
+
}], title: [{
|
|
374
362
|
type: Input
|
|
375
363
|
}] } });
|
|
376
364
|
|
|
@@ -456,7 +444,7 @@ class BaoButtonComponent {
|
|
|
456
444
|
}
|
|
457
445
|
}
|
|
458
446
|
BaoButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
459
|
-
BaoButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoButtonComponent, selector: "button[bao-button]", inputs: { displayType: "displayType", level: "level", size: "size", loading: "loading", reversed: "reversed", loadingSpinnerAriaLabel: "loadingSpinnerAriaLabel", fullWidth: "fullWidth" }, host: { properties: { "class.bao-button-utility": "displayType === \"utility\"", "class.bao-button-editorial": "displayType === \"editorial\"", "class.bao-button-primary": "level === \"primary\"", "class.bao-button-secondary": "level === \"secondary\"", "class.bao-button-tertiary": "level === \"tertiary\"", "class.bao-button-large": "size === \"large\"", "class.bao-button-medium": "size === \"medium\"", "class.bao-button-small": "size === \"small\"", "class.bao-button-reversed": "reversed === true", "class.bao-button-loading": "loading === true", "class.bao-button-no-text": "noText === true", "class.bao-button-full-width": "fullWidth === true" }, classAttribute: "bao-button" }, ngImport: i0, template: "<bao-icon\n *ngIf=\"loading && !rightIcon\"\n class=\"loading-spinner\"\n svgIcon=\"icon-spinner\"\n [title]=\"
|
|
447
|
+
BaoButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoButtonComponent, selector: "button[bao-button]", inputs: { displayType: "displayType", level: "level", size: "size", loading: "loading", reversed: "reversed", loadingSpinnerAriaLabel: "loadingSpinnerAriaLabel", fullWidth: "fullWidth" }, host: { properties: { "class.bao-button-utility": "displayType === \"utility\"", "class.bao-button-editorial": "displayType === \"editorial\"", "class.bao-button-primary": "level === \"primary\"", "class.bao-button-secondary": "level === \"secondary\"", "class.bao-button-tertiary": "level === \"tertiary\"", "class.bao-button-large": "size === \"large\"", "class.bao-button-medium": "size === \"medium\"", "class.bao-button-small": "size === \"small\"", "class.bao-button-reversed": "reversed === true", "class.bao-button-loading": "loading === true", "class.bao-button-no-text": "noText === true", "class.bao-button-full-width": "fullWidth === true" }, classAttribute: "bao-button" }, ngImport: i0, template: "<bao-icon\n *ngIf=\"loading && !rightIcon\"\n class=\"loading-spinner\"\n svgIcon=\"icon-spinner\"\n [title]=\"loadingSpinnerAriaLabel\"\n></bao-icon>\n<ng-content></ng-content>\n<bao-icon\n *ngIf=\"loading && rightIcon\"\n class=\"loading-spinner loading-spinner-right\"\n svgIcon=\"icon-spinner\"\n [title]=\"loadingSpinnerAriaLabel\"\n></bao-icon>\n", styles: [".bao-button{font-weight:700;font-size:.875rem;line-height:1.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;display:inline-flex;align-items:center}.bao-button.bao-button-full-width{width:100%;display:block}.bao-button span{font-weight:700;font-size:.875rem;line-height:1.25rem}.bao-button:focus{outline:none;box-shadow:0 0 0 .1875rem #98bcde}.bao-button:focus.bao-button-reversed{outline:none;box-shadow:0 0 0 .1875rem #98bcde;box-shadow:0 0 0 .1875rem #ffffff4d}.bao-button:disabled,.bao-button.bao-button-loading{cursor:not-allowed}.bao-button.bao-button-utility{border-radius:.25rem;padding:.5625rem 1rem}.bao-button.bao-button-utility:disabled.bao-button-secondary,.bao-button.bao-button-utility:disabled.bao-button-tertiary{color:#adb2bd}.bao-button.bao-button-primary{background-color:#097d6c;border:solid .0625rem #097d6c;color:#fff}.bao-button.bao-button-primary.bao-button-reversed{background-color:#fff;border:solid .0625rem #ffffff;color:#000}.bao-button.bao-button-primary:hover{background-color:#075b4f}.bao-button.bao-button-primary:hover.bao-button-reversed{background-color:#eefaf8;color:#097d6c}.bao-button.bao-button-primary:focus.bao-button-reversed{background-color:#eefaf8;color:#097d6c}.bao-button.bao-button-primary:disabled,.bao-button.bao-button-primary.bao-button-loading{color:#637381;background-color:#dee2e6;border:solid .0625rem #dee2e6}.bao-button.bao-button-primary:disabled.bao-button-reversed,.bao-button.bao-button-primary.bao-button-loading.bao-button-reversed{background-color:#ffffff4d;border:solid .0625rem gba(#ffffff,.3);color:#ffffff80}.bao-button.bao-button-secondary{background-color:#fff0;color:#097d6c;border:solid .0625rem #ced4da}.bao-button.bao-button-secondary.bao-button-reversed{background-color:#fff0;color:#fff;border:solid .0625rem rgba(206,212,218,.5)}.bao-button.bao-button-secondary:hover{border:solid .0625rem #097d6c;background-color:#eefaf8}.bao-button.bao-button-secondary:hover.bao-button-reversed{background-color:#fff0;color:#fff;border:solid .0625rem #ced4da}.bao-button.bao-button-secondary:focus{border:solid .0625rem #097d6c;background-color:#eefaf8}.bao-button.bao-button-secondary:focus.bao-button-reversed{background-color:#ffffff4d;color:#fff;border:solid .0625rem #ced4da}.bao-button.bao-button-secondary:disabled,.bao-button.bao-button-secondary.bao-button-loading{color:#637381}.bao-button.bao-button-secondary:disabled:hover,.bao-button.bao-button-secondary.bao-button-loading:hover{border-color:#ced4da;background-color:#fff}.bao-button.bao-button-secondary:disabled:hover.bao-button-reversed,.bao-button.bao-button-secondary.bao-button-loading:hover.bao-button-reversed{border:solid .0625rem rgba(206,212,218,.5);background-color:#fff0;color:#637381}.bao-button.bao-button-secondary:disabled:focus,.bao-button.bao-button-secondary.bao-button-loading:focus{border-color:#ced4da;background-color:#fff}.bao-button.bao-button-secondary:disabled:focus.bao-button-reversed,.bao-button.bao-button-secondary.bao-button-loading:focus.bao-button-reversed{background-color:#fff0}.bao-button.bao-button-tertiary{border:solid .0625rem rgba(255,255,255,.0001);background-color:#fff0;color:#097d6c}.bao-button.bao-button-tertiary.bao-button-reversed{color:#fff}.bao-button.bao-button-tertiary:hover{background-color:#eefaf8}.bao-button.bao-button-tertiary:hover.bao-button-reversed{background-color:#ffffff4d;color:#fff}.bao-button.bao-button-tertiary:focus{background-color:#eefaf8}.bao-button.bao-button-tertiary:focus.bao-button-reversed{background-color:#ffffff4d;color:#fff}.bao-button.bao-button-tertiary:disabled,.bao-button.bao-button-tertiary.bao-button-loading{color:#637381}.bao-button.bao-button-tertiary:disabled:hover,.bao-button.bao-button-tertiary.bao-button-loading:hover{background-color:#fff0}.bao-button.bao-button-tertiary:disabled:hover.bao-button-reversed,.bao-button.bao-button-tertiary.bao-button-loading:hover.bao-button-reversed{color:#637381}.bao-button.bao-button-tertiary:disabled:focus,.bao-button.bao-button-tertiary.bao-button-loading:focus{background-color:#fff0}.bao-button.bao-button-tertiary:disabled:focus.bao-button-reversed,.bao-button.bao-button-tertiary.bao-button-loading:focus.bao-button-reversed{color:#637381}.bao-button.bao-button-editorial{border-radius:1.25rem;padding:.625rem 2rem}.bao-button.bao-button-editorial.bao-button-small{padding:.4375rem 1rem}.bao-button.bao-button-editorial.bao-button-large{border-radius:4rem;font-weight:700;font-size:1rem;line-height:1.5rem;padding:.9375rem 2rem}.bao-button.bao-button-editorial.bao-button-medium{padding:.5625rem 2rem}.bao-button.bao-button-editorial:disabled.bao-button-secondary,.bao-button.bao-button-editorial:disabled.bao-button-tertiary{color:#adb2bd}.bao-button.bao-button-small{font-weight:700;font-size:.75rem;line-height:1rem;padding:.4375rem}.bao-button.bao-button-small span{font-weight:700;font-size:.75rem;line-height:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.bao-button .loading-spinner{margin-right:.5rem;margin-left:-.5rem}.bao-button .loading-spinner-right{margin-right:-.5rem;margin-left:.5rem}.bao-button.bao-button-no-text .loading-spinner-right{margin:-.125rem -.5625rem}.bao-button.bao-button-small .loading-spinner{width:1rem;height:1rem;margin-right:.25rem;margin-left:0}.bao-button.bao-button-small .loading-spinner-right{margin-right:0;margin-left:.25rem}.bao-button.bao-button-loading>bao-icon:not(.loading-spinner){display:none}.bao-button>.bao-button-no-text.bao-button-loading>.loading-spinner{margin:-.125rem -.5625rem}.bao-button>bao-icon{margin:-.125rem 0rem}.bao-button>bao-icon:first-child:not(.loading-spinner){margin-right:.5rem;margin-left:-.5rem}.bao-button>bao-icon:last-child:not(.loading-spinner){margin-left:.5rem;margin-right:-.5rem}.bao-button>bao-icon:first-child:last-child:not(.loading-spinner){margin:-.125rem -.5625rem}.bao-button.bao-button-small>bao-icon{height:1rem;width:1rem;margin:-.125rem 0rem}.bao-button.bao-button-small>bao-icon:first-child:not(.loading-spinner){margin-left:0rem;margin-right:.25rem}.bao-button.bao-button-small>bao-icon:last-child:not(.loading-spinner){margin-left:.25rem;margin-right:0rem}\n"], components: [{ type: BaoIconComponent, selector: "bao-icon", inputs: ["color", "size", "svgIcon", "title"], exportAs: ["baoIcon"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
460
448
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoButtonComponent, decorators: [{
|
|
461
449
|
type: Component,
|
|
462
450
|
args: [{ selector: 'button[bao-button]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
@@ -473,7 +461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
473
461
|
'[class.bao-button-loading]': 'loading === true',
|
|
474
462
|
'[class.bao-button-no-text]': 'noText === true',
|
|
475
463
|
'[class.bao-button-full-width]': 'fullWidth === true'
|
|
476
|
-
}, template: "<bao-icon\n *ngIf=\"loading && !rightIcon\"\n class=\"loading-spinner\"\n svgIcon=\"icon-spinner\"\n [title]=\"
|
|
464
|
+
}, template: "<bao-icon\n *ngIf=\"loading && !rightIcon\"\n class=\"loading-spinner\"\n svgIcon=\"icon-spinner\"\n [title]=\"loadingSpinnerAriaLabel\"\n></bao-icon>\n<ng-content></ng-content>\n<bao-icon\n *ngIf=\"loading && rightIcon\"\n class=\"loading-spinner loading-spinner-right\"\n svgIcon=\"icon-spinner\"\n [title]=\"loadingSpinnerAriaLabel\"\n></bao-icon>\n", styles: [".bao-button{font-weight:700;font-size:.875rem;line-height:1.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;display:inline-flex;align-items:center}.bao-button.bao-button-full-width{width:100%;display:block}.bao-button span{font-weight:700;font-size:.875rem;line-height:1.25rem}.bao-button:focus{outline:none;box-shadow:0 0 0 .1875rem #98bcde}.bao-button:focus.bao-button-reversed{outline:none;box-shadow:0 0 0 .1875rem #98bcde;box-shadow:0 0 0 .1875rem #ffffff4d}.bao-button:disabled,.bao-button.bao-button-loading{cursor:not-allowed}.bao-button.bao-button-utility{border-radius:.25rem;padding:.5625rem 1rem}.bao-button.bao-button-utility:disabled.bao-button-secondary,.bao-button.bao-button-utility:disabled.bao-button-tertiary{color:#adb2bd}.bao-button.bao-button-primary{background-color:#097d6c;border:solid .0625rem #097d6c;color:#fff}.bao-button.bao-button-primary.bao-button-reversed{background-color:#fff;border:solid .0625rem #ffffff;color:#000}.bao-button.bao-button-primary:hover{background-color:#075b4f}.bao-button.bao-button-primary:hover.bao-button-reversed{background-color:#eefaf8;color:#097d6c}.bao-button.bao-button-primary:focus.bao-button-reversed{background-color:#eefaf8;color:#097d6c}.bao-button.bao-button-primary:disabled,.bao-button.bao-button-primary.bao-button-loading{color:#637381;background-color:#dee2e6;border:solid .0625rem #dee2e6}.bao-button.bao-button-primary:disabled.bao-button-reversed,.bao-button.bao-button-primary.bao-button-loading.bao-button-reversed{background-color:#ffffff4d;border:solid .0625rem gba(#ffffff,.3);color:#ffffff80}.bao-button.bao-button-secondary{background-color:#fff0;color:#097d6c;border:solid .0625rem #ced4da}.bao-button.bao-button-secondary.bao-button-reversed{background-color:#fff0;color:#fff;border:solid .0625rem rgba(206,212,218,.5)}.bao-button.bao-button-secondary:hover{border:solid .0625rem #097d6c;background-color:#eefaf8}.bao-button.bao-button-secondary:hover.bao-button-reversed{background-color:#fff0;color:#fff;border:solid .0625rem #ced4da}.bao-button.bao-button-secondary:focus{border:solid .0625rem #097d6c;background-color:#eefaf8}.bao-button.bao-button-secondary:focus.bao-button-reversed{background-color:#ffffff4d;color:#fff;border:solid .0625rem #ced4da}.bao-button.bao-button-secondary:disabled,.bao-button.bao-button-secondary.bao-button-loading{color:#637381}.bao-button.bao-button-secondary:disabled:hover,.bao-button.bao-button-secondary.bao-button-loading:hover{border-color:#ced4da;background-color:#fff}.bao-button.bao-button-secondary:disabled:hover.bao-button-reversed,.bao-button.bao-button-secondary.bao-button-loading:hover.bao-button-reversed{border:solid .0625rem rgba(206,212,218,.5);background-color:#fff0;color:#637381}.bao-button.bao-button-secondary:disabled:focus,.bao-button.bao-button-secondary.bao-button-loading:focus{border-color:#ced4da;background-color:#fff}.bao-button.bao-button-secondary:disabled:focus.bao-button-reversed,.bao-button.bao-button-secondary.bao-button-loading:focus.bao-button-reversed{background-color:#fff0}.bao-button.bao-button-tertiary{border:solid .0625rem rgba(255,255,255,.0001);background-color:#fff0;color:#097d6c}.bao-button.bao-button-tertiary.bao-button-reversed{color:#fff}.bao-button.bao-button-tertiary:hover{background-color:#eefaf8}.bao-button.bao-button-tertiary:hover.bao-button-reversed{background-color:#ffffff4d;color:#fff}.bao-button.bao-button-tertiary:focus{background-color:#eefaf8}.bao-button.bao-button-tertiary:focus.bao-button-reversed{background-color:#ffffff4d;color:#fff}.bao-button.bao-button-tertiary:disabled,.bao-button.bao-button-tertiary.bao-button-loading{color:#637381}.bao-button.bao-button-tertiary:disabled:hover,.bao-button.bao-button-tertiary.bao-button-loading:hover{background-color:#fff0}.bao-button.bao-button-tertiary:disabled:hover.bao-button-reversed,.bao-button.bao-button-tertiary.bao-button-loading:hover.bao-button-reversed{color:#637381}.bao-button.bao-button-tertiary:disabled:focus,.bao-button.bao-button-tertiary.bao-button-loading:focus{background-color:#fff0}.bao-button.bao-button-tertiary:disabled:focus.bao-button-reversed,.bao-button.bao-button-tertiary.bao-button-loading:focus.bao-button-reversed{color:#637381}.bao-button.bao-button-editorial{border-radius:1.25rem;padding:.625rem 2rem}.bao-button.bao-button-editorial.bao-button-small{padding:.4375rem 1rem}.bao-button.bao-button-editorial.bao-button-large{border-radius:4rem;font-weight:700;font-size:1rem;line-height:1.5rem;padding:.9375rem 2rem}.bao-button.bao-button-editorial.bao-button-medium{padding:.5625rem 2rem}.bao-button.bao-button-editorial:disabled.bao-button-secondary,.bao-button.bao-button-editorial:disabled.bao-button-tertiary{color:#adb2bd}.bao-button.bao-button-small{font-weight:700;font-size:.75rem;line-height:1rem;padding:.4375rem}.bao-button.bao-button-small span{font-weight:700;font-size:.75rem;line-height:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.bao-button .loading-spinner{margin-right:.5rem;margin-left:-.5rem}.bao-button .loading-spinner-right{margin-right:-.5rem;margin-left:.5rem}.bao-button.bao-button-no-text .loading-spinner-right{margin:-.125rem -.5625rem}.bao-button.bao-button-small .loading-spinner{width:1rem;height:1rem;margin-right:.25rem;margin-left:0}.bao-button.bao-button-small .loading-spinner-right{margin-right:0;margin-left:.25rem}.bao-button.bao-button-loading>bao-icon:not(.loading-spinner){display:none}.bao-button>.bao-button-no-text.bao-button-loading>.loading-spinner{margin:-.125rem -.5625rem}.bao-button>bao-icon{margin:-.125rem 0rem}.bao-button>bao-icon:first-child:not(.loading-spinner){margin-right:.5rem;margin-left:-.5rem}.bao-button>bao-icon:last-child:not(.loading-spinner){margin-left:.5rem;margin-right:-.5rem}.bao-button>bao-icon:first-child:last-child:not(.loading-spinner){margin:-.125rem -.5625rem}.bao-button.bao-button-small>bao-icon{height:1rem;width:1rem;margin:-.125rem 0rem}.bao-button.bao-button-small>bao-icon:first-child:not(.loading-spinner){margin-left:0rem;margin-right:.25rem}.bao-button.bao-button-small>bao-icon:last-child:not(.loading-spinner){margin-left:.25rem;margin-right:0rem}\n"] }]
|
|
477
465
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { displayType: [{
|
|
478
466
|
type: Input
|
|
479
467
|
}], level: [{
|
|
@@ -612,12 +600,9 @@ class BaoAlertComponent {
|
|
|
612
600
|
/**
|
|
613
601
|
* Alert type
|
|
614
602
|
*/
|
|
615
|
-
this.type = '';
|
|
603
|
+
this.type = 'info';
|
|
616
604
|
this.dismissible = false;
|
|
617
|
-
this.showIcon = true;
|
|
618
605
|
this.dismiss = new EventEmitter();
|
|
619
|
-
this.iconType = 'icon-info';
|
|
620
|
-
this.iconTitle = 'Information';
|
|
621
606
|
}
|
|
622
607
|
ngOnChanges(changes) {
|
|
623
608
|
if (changes['type']) {
|
|
@@ -630,6 +615,7 @@ class BaoAlertComponent {
|
|
|
630
615
|
success: 'icon-check-circle',
|
|
631
616
|
danger: 'icon-error',
|
|
632
617
|
warning: 'icon-warning',
|
|
618
|
+
emergency: 'icon-emergency',
|
|
633
619
|
default: 'icon-info'
|
|
634
620
|
};
|
|
635
621
|
return typesAlertIcon[value] || typesAlertIcon.default;
|
|
@@ -639,6 +625,7 @@ class BaoAlertComponent {
|
|
|
639
625
|
success: 'Succès',
|
|
640
626
|
danger: 'Erreur',
|
|
641
627
|
warning: 'Attention',
|
|
628
|
+
emergency: 'Urgence',
|
|
642
629
|
default: 'Information'
|
|
643
630
|
};
|
|
644
631
|
return titleIcon[value] || titleIcon.default;
|
|
@@ -648,7 +635,7 @@ class BaoAlertComponent {
|
|
|
648
635
|
}
|
|
649
636
|
}
|
|
650
637
|
BaoAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
651
|
-
BaoAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoAlertComponent, selector: "bao-alert", inputs: { type: "type", dismissible: "dismissible"
|
|
638
|
+
BaoAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoAlertComponent, selector: "bao-alert", inputs: { type: "type", dismissible: "dismissible" }, outputs: { dismiss: "dismiss" }, host: { attributes: { "role": "alert" }, properties: { "class.bao-alert-success": "type === \"success\"", "class.bao-alert-danger": "type === \"danger\"", "class.bao-alert-warning": "type === \"warning\"", "class.bao-alert-info": "type === \"info\"", "class.bao-alert-emergency": "type === \"emergency\"" }, classAttribute: "bao-alert bao-alert-with-icon bao-alert-dismissible fade show" }, usesOnChanges: true, ngImport: i0, template: "<bao-icon [svgIcon]=\"iconType\" [title]=\"iconTitle\"></bao-icon>\n<div class=\"bao-alert-content-container\">\n <ng-content></ng-content>\n</div>\n<button\n bao-button\n *ngIf=\"dismissible\"\n type=\"utility\"\n level=\"tertiary\"\n data-dismiss=\"alert\"\n role=\"button\"\n aria-label=\"Cacher le message\"\n (click)=\"onDismissClicked()\"\n>\n <bao-icon svgIcon=\"icon-x\"></bao-icon>\n</button>\n", styles: [".bao-alert{font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;padding:1rem;margin-bottom:1rem;border-radius:0rem}.bao-alert .bao-alert-content-container{margin:0 .5rem 0 1rem;display:flex;flex-direction:column}.bao-alert .bao-alert-title{font-weight:700;padding-bottom:.5rem}.bao-alert a{font-weight:700}.bao-alert.bao-alert-dismissible .bao-button[data-dismiss=alert]{background-color:#fff0;border-radius:0rem;height:2.5rem;width:2.5rem;margin-left:auto;margin-right:-.5rem;margin-top:-.5rem}.bao-alert.bao-alert-dismissible .bao-button[data-dismiss=alert]:hover,.bao-alert.bao-alert-dismissible .bao-button[data-dismiss=alert]:focus{opacity:.75}.bao-alert .bao-alert-actions .bao-button{margin:1rem 1rem 0 0}.bao-alert-info{background-color:#e6f5f9;border-left:.125rem solid #0079c4;border-top:none;border-right:none;border-bottom:none;color:#004b7b}.bao-alert-info .bao-alert-title,.bao-alert-info a{color:#004b7b}.bao-alert-info a:hover,.bao-alert-info a:focus{background-color:#f2fafc}.bao-alert-info .bao-icon svg{fill:#004b7b}.bao-alert-info .bao-button.bao-button-primary{background-color:#004b7b;border-color:#004b7b}.bao-alert-info .bao-button.bao-button-primary:hover,.bao-alert-info .bao-button.bao-button-primary:focus{background-color:#002c48;border-color:#002c48}.bao-alert-info .bao-button.bao-button-primary:focus{box-shadow:0 0 0 .1875rem #004b7b4d}.bao-alert-info .bao-button.bao-button-secondary{background-color:#e6f5f9;color:#004b7b}.bao-alert-info .bao-button.bao-button-secondary:hover,.bao-alert-info .bao-button.bao-button-secondary:focus{background-color:#e6f5f9;border-color:#004b7b}.bao-alert-info .bao-button.bao-button-secondary:focus{box-shadow:0 0 0 .1875rem #004b7b4d}.bao-alert-info .bao-button.bao-button-tertiary{background-color:#e6f5f9;color:#004b7b}.bao-alert-info .bao-button.bao-button-tertiary:hover,.bao-alert-info .bao-button.bao-button-tertiary:focus{background-color:#e6f5f9}.bao-alert-info .bao-button.bao-button-tertiary:focus{box-shadow:0 0 0 .1875rem #004b7b4d}.bao-alert-success{background-color:#e7f6f0;border-left:.125rem solid #0da566;border-top:none;border-right:none;border-bottom:none;color:#025d29}.bao-alert-success .bao-alert-title,.bao-alert-success a{color:#025d29}.bao-alert-success a:hover,.bao-alert-success a:focus{background-color:#f2faf7}.bao-alert-success .bao-icon svg{fill:#025d29}.bao-alert-success .bao-button.bao-button-primary{background-color:#025d29;border-color:#025d29}.bao-alert-success .bao-button.bao-button-primary:hover,.bao-alert-success .bao-button.bao-button-primary:focus{background-color:#012b13;border-color:#012b13}.bao-alert-success .bao-button.bao-button-primary:focus{box-shadow:0 0 0 .1875rem #025d294d}.bao-alert-success .bao-button.bao-button-secondary{background-color:#e7f6f0;color:#025d29}.bao-alert-success .bao-button.bao-button-secondary:hover,.bao-alert-success .bao-button.bao-button-secondary:focus{background-color:#e7f6f0;border-color:#025d29}.bao-alert-success .bao-button.bao-button-secondary:focus{box-shadow:0 0 0 .1875rem #025d294d}.bao-alert-success .bao-button.bao-button-tertiary{background-color:#e7f6f0;color:#025d29}.bao-alert-success .bao-button.bao-button-tertiary:hover,.bao-alert-success .bao-button.bao-button-tertiary:focus{background-color:#e7f6f0}.bao-alert-success .bao-button.bao-button-tertiary:focus{box-shadow:0 0 0 .1875rem #025d294d}.bao-alert-warning{background-color:#fefae6;border-left:.125rem solid #ffb833;border-top:none;border-right:none;border-bottom:none;color:#6c4600}.bao-alert-warning .bao-alert-title,.bao-alert-warning a{color:#6c4600}.bao-alert-warning a:hover,.bao-alert-warning a:focus{background-color:#fffdf5}.bao-alert-warning .bao-icon svg{fill:#6c4600}.bao-alert-warning .bao-button.bao-button-primary{background-color:#6c4600;border-color:#6c4600}.bao-alert-warning .bao-button.bao-button-primary:hover,.bao-alert-warning .bao-button.bao-button-primary:focus{background-color:#392500;border-color:#392500}.bao-alert-warning .bao-button.bao-button-primary:focus{box-shadow:0 0 0 .1875rem #6c46004d}.bao-alert-warning .bao-button.bao-button-secondary{background-color:#fefae6;color:#6c4600}.bao-alert-warning .bao-button.bao-button-secondary:hover,.bao-alert-warning .bao-button.bao-button-secondary:focus{background-color:#fefae6;border-color:#6c4600}.bao-alert-warning .bao-button.bao-button-secondary:focus{box-shadow:0 0 0 .1875rem #6c46004d}.bao-alert-warning .bao-button.bao-button-tertiary{background-color:#fefae6;color:#6c4600}.bao-alert-warning .bao-button.bao-button-tertiary:hover,.bao-alert-warning .bao-button.bao-button-tertiary:focus{background-color:#fefae6}.bao-alert-warning .bao-button.bao-button-tertiary:focus{box-shadow:0 0 0 .1875rem #6c46004d}.bao-alert-danger{background-color:#ffebe6;border-left:.125rem solid #d3310a;border-top:none;border-right:none;border-bottom:none;color:#851a00}.bao-alert-danger .bao-alert-title,.bao-alert-danger a{color:#851a00}.bao-alert-danger a:hover,.bao-alert-danger a:focus{background-color:#fff7f5}.bao-alert-danger .bao-icon svg{fill:#851a00}.bao-alert-danger .bao-button.bao-button-primary{background-color:#851a00;border-color:#851a00}.bao-alert-danger .bao-button.bao-button-primary:hover,.bao-alert-danger .bao-button.bao-button-primary:focus{background-color:#521000;border-color:#521000}.bao-alert-danger .bao-button.bao-button-primary:focus{box-shadow:0 0 0 .1875rem #851a004d}.bao-alert-danger .bao-button.bao-button-secondary{background-color:#ffebe6;color:#851a00}.bao-alert-danger .bao-button.bao-button-secondary:hover,.bao-alert-danger .bao-button.bao-button-secondary:focus{background-color:#ffebe6;border-color:#851a00}.bao-alert-danger .bao-button.bao-button-secondary:focus{box-shadow:0 0 0 .1875rem #851a004d}.bao-alert-danger .bao-button.bao-button-tertiary{background-color:#ffebe6;color:#851a00}.bao-alert-danger .bao-button.bao-button-tertiary:hover,.bao-alert-danger .bao-button.bao-button-tertiary:focus{background-color:#ffebe6}.bao-alert-danger .bao-button.bao-button-tertiary:focus{box-shadow:0 0 0 .1875rem #851a004d}.bao-alert-emergency{background-color:#ffebe6;border-left:.125rem solid #d3310a;border-top:none;border-right:none;border-bottom:none;color:#851a00}.bao-alert-emergency .bao-alert-title,.bao-alert-emergency a{color:#851a00}.bao-alert-emergency a:hover,.bao-alert-emergency a:focus{background-color:#fff7f5}.bao-alert-emergency .bao-icon svg{fill:#851a00}.bao-alert-emergency .bao-button.bao-button-primary{background-color:#851a00;border-color:#851a00}.bao-alert-emergency .bao-button.bao-button-primary:hover,.bao-alert-emergency .bao-button.bao-button-primary:focus{background-color:#521000;border-color:#521000}.bao-alert-emergency .bao-button.bao-button-primary:focus{box-shadow:0 0 0 .1875rem #851a004d}.bao-alert-emergency .bao-button.bao-button-secondary{background-color:#ffebe6;color:#851a00}.bao-alert-emergency .bao-button.bao-button-secondary:hover,.bao-alert-emergency .bao-button.bao-button-secondary:focus{background-color:#ffebe6;border-color:#851a00}.bao-alert-emergency .bao-button.bao-button-secondary:focus{box-shadow:0 0 0 .1875rem #851a004d}.bao-alert-emergency .bao-button.bao-button-tertiary{background-color:#ffebe6;color:#851a00}.bao-alert-emergency .bao-button.bao-button-tertiary:hover,.bao-alert-emergency .bao-button.bao-button-tertiary:focus{background-color:#ffebe6}.bao-alert-emergency .bao-button.bao-button-tertiary:focus{box-shadow:0 0 0 .1875rem #851a004d}\n"], components: [{ type: BaoIconComponent, selector: "bao-icon", inputs: ["color", "size", "svgIcon", "title"], exportAs: ["baoIcon"] }, { type: BaoButtonComponent, selector: "button[bao-button]", inputs: ["displayType", "level", "size", "loading", "reversed", "loadingSpinnerAriaLabel", "fullWidth"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
652
639
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAlertComponent, decorators: [{
|
|
653
640
|
type: Component,
|
|
654
641
|
args: [{ selector: 'bao-alert', encapsulation: ViewEncapsulation.None, host: {
|
|
@@ -657,14 +644,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
657
644
|
'[class.bao-alert-danger]': 'type === "danger"',
|
|
658
645
|
'[class.bao-alert-warning]': 'type === "warning"',
|
|
659
646
|
'[class.bao-alert-info]': 'type === "info"',
|
|
647
|
+
'[class.bao-alert-emergency]': 'type === "emergency"',
|
|
660
648
|
role: 'alert'
|
|
661
|
-
}, template: "<
|
|
649
|
+
}, template: "<bao-icon [svgIcon]=\"iconType\" [title]=\"iconTitle\"></bao-icon>\n<div class=\"bao-alert-content-container\">\n <ng-content></ng-content>\n</div>\n<button\n bao-button\n *ngIf=\"dismissible\"\n type=\"utility\"\n level=\"tertiary\"\n data-dismiss=\"alert\"\n role=\"button\"\n aria-label=\"Cacher le message\"\n (click)=\"onDismissClicked()\"\n>\n <bao-icon svgIcon=\"icon-x\"></bao-icon>\n</button>\n", styles: [".bao-alert{font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;padding:1rem;margin-bottom:1rem;border-radius:0rem}.bao-alert .bao-alert-content-container{margin:0 .5rem 0 1rem;display:flex;flex-direction:column}.bao-alert .bao-alert-title{font-weight:700;padding-bottom:.5rem}.bao-alert a{font-weight:700}.bao-alert.bao-alert-dismissible .bao-button[data-dismiss=alert]{background-color:#fff0;border-radius:0rem;height:2.5rem;width:2.5rem;margin-left:auto;margin-right:-.5rem;margin-top:-.5rem}.bao-alert.bao-alert-dismissible .bao-button[data-dismiss=alert]:hover,.bao-alert.bao-alert-dismissible .bao-button[data-dismiss=alert]:focus{opacity:.75}.bao-alert .bao-alert-actions .bao-button{margin:1rem 1rem 0 0}.bao-alert-info{background-color:#e6f5f9;border-left:.125rem solid #0079c4;border-top:none;border-right:none;border-bottom:none;color:#004b7b}.bao-alert-info .bao-alert-title,.bao-alert-info a{color:#004b7b}.bao-alert-info a:hover,.bao-alert-info a:focus{background-color:#f2fafc}.bao-alert-info .bao-icon svg{fill:#004b7b}.bao-alert-info .bao-button.bao-button-primary{background-color:#004b7b;border-color:#004b7b}.bao-alert-info .bao-button.bao-button-primary:hover,.bao-alert-info .bao-button.bao-button-primary:focus{background-color:#002c48;border-color:#002c48}.bao-alert-info .bao-button.bao-button-primary:focus{box-shadow:0 0 0 .1875rem #004b7b4d}.bao-alert-info .bao-button.bao-button-secondary{background-color:#e6f5f9;color:#004b7b}.bao-alert-info .bao-button.bao-button-secondary:hover,.bao-alert-info .bao-button.bao-button-secondary:focus{background-color:#e6f5f9;border-color:#004b7b}.bao-alert-info .bao-button.bao-button-secondary:focus{box-shadow:0 0 0 .1875rem #004b7b4d}.bao-alert-info .bao-button.bao-button-tertiary{background-color:#e6f5f9;color:#004b7b}.bao-alert-info .bao-button.bao-button-tertiary:hover,.bao-alert-info .bao-button.bao-button-tertiary:focus{background-color:#e6f5f9}.bao-alert-info .bao-button.bao-button-tertiary:focus{box-shadow:0 0 0 .1875rem #004b7b4d}.bao-alert-success{background-color:#e7f6f0;border-left:.125rem solid #0da566;border-top:none;border-right:none;border-bottom:none;color:#025d29}.bao-alert-success .bao-alert-title,.bao-alert-success a{color:#025d29}.bao-alert-success a:hover,.bao-alert-success a:focus{background-color:#f2faf7}.bao-alert-success .bao-icon svg{fill:#025d29}.bao-alert-success .bao-button.bao-button-primary{background-color:#025d29;border-color:#025d29}.bao-alert-success .bao-button.bao-button-primary:hover,.bao-alert-success .bao-button.bao-button-primary:focus{background-color:#012b13;border-color:#012b13}.bao-alert-success .bao-button.bao-button-primary:focus{box-shadow:0 0 0 .1875rem #025d294d}.bao-alert-success .bao-button.bao-button-secondary{background-color:#e7f6f0;color:#025d29}.bao-alert-success .bao-button.bao-button-secondary:hover,.bao-alert-success .bao-button.bao-button-secondary:focus{background-color:#e7f6f0;border-color:#025d29}.bao-alert-success .bao-button.bao-button-secondary:focus{box-shadow:0 0 0 .1875rem #025d294d}.bao-alert-success .bao-button.bao-button-tertiary{background-color:#e7f6f0;color:#025d29}.bao-alert-success .bao-button.bao-button-tertiary:hover,.bao-alert-success .bao-button.bao-button-tertiary:focus{background-color:#e7f6f0}.bao-alert-success .bao-button.bao-button-tertiary:focus{box-shadow:0 0 0 .1875rem #025d294d}.bao-alert-warning{background-color:#fefae6;border-left:.125rem solid #ffb833;border-top:none;border-right:none;border-bottom:none;color:#6c4600}.bao-alert-warning .bao-alert-title,.bao-alert-warning a{color:#6c4600}.bao-alert-warning a:hover,.bao-alert-warning a:focus{background-color:#fffdf5}.bao-alert-warning .bao-icon svg{fill:#6c4600}.bao-alert-warning .bao-button.bao-button-primary{background-color:#6c4600;border-color:#6c4600}.bao-alert-warning .bao-button.bao-button-primary:hover,.bao-alert-warning .bao-button.bao-button-primary:focus{background-color:#392500;border-color:#392500}.bao-alert-warning .bao-button.bao-button-primary:focus{box-shadow:0 0 0 .1875rem #6c46004d}.bao-alert-warning .bao-button.bao-button-secondary{background-color:#fefae6;color:#6c4600}.bao-alert-warning .bao-button.bao-button-secondary:hover,.bao-alert-warning .bao-button.bao-button-secondary:focus{background-color:#fefae6;border-color:#6c4600}.bao-alert-warning .bao-button.bao-button-secondary:focus{box-shadow:0 0 0 .1875rem #6c46004d}.bao-alert-warning .bao-button.bao-button-tertiary{background-color:#fefae6;color:#6c4600}.bao-alert-warning .bao-button.bao-button-tertiary:hover,.bao-alert-warning .bao-button.bao-button-tertiary:focus{background-color:#fefae6}.bao-alert-warning .bao-button.bao-button-tertiary:focus{box-shadow:0 0 0 .1875rem #6c46004d}.bao-alert-danger{background-color:#ffebe6;border-left:.125rem solid #d3310a;border-top:none;border-right:none;border-bottom:none;color:#851a00}.bao-alert-danger .bao-alert-title,.bao-alert-danger a{color:#851a00}.bao-alert-danger a:hover,.bao-alert-danger a:focus{background-color:#fff7f5}.bao-alert-danger .bao-icon svg{fill:#851a00}.bao-alert-danger .bao-button.bao-button-primary{background-color:#851a00;border-color:#851a00}.bao-alert-danger .bao-button.bao-button-primary:hover,.bao-alert-danger .bao-button.bao-button-primary:focus{background-color:#521000;border-color:#521000}.bao-alert-danger .bao-button.bao-button-primary:focus{box-shadow:0 0 0 .1875rem #851a004d}.bao-alert-danger .bao-button.bao-button-secondary{background-color:#ffebe6;color:#851a00}.bao-alert-danger .bao-button.bao-button-secondary:hover,.bao-alert-danger .bao-button.bao-button-secondary:focus{background-color:#ffebe6;border-color:#851a00}.bao-alert-danger .bao-button.bao-button-secondary:focus{box-shadow:0 0 0 .1875rem #851a004d}.bao-alert-danger .bao-button.bao-button-tertiary{background-color:#ffebe6;color:#851a00}.bao-alert-danger .bao-button.bao-button-tertiary:hover,.bao-alert-danger .bao-button.bao-button-tertiary:focus{background-color:#ffebe6}.bao-alert-danger .bao-button.bao-button-tertiary:focus{box-shadow:0 0 0 .1875rem #851a004d}.bao-alert-emergency{background-color:#ffebe6;border-left:.125rem solid #d3310a;border-top:none;border-right:none;border-bottom:none;color:#851a00}.bao-alert-emergency .bao-alert-title,.bao-alert-emergency a{color:#851a00}.bao-alert-emergency a:hover,.bao-alert-emergency a:focus{background-color:#fff7f5}.bao-alert-emergency .bao-icon svg{fill:#851a00}.bao-alert-emergency .bao-button.bao-button-primary{background-color:#851a00;border-color:#851a00}.bao-alert-emergency .bao-button.bao-button-primary:hover,.bao-alert-emergency .bao-button.bao-button-primary:focus{background-color:#521000;border-color:#521000}.bao-alert-emergency .bao-button.bao-button-primary:focus{box-shadow:0 0 0 .1875rem #851a004d}.bao-alert-emergency .bao-button.bao-button-secondary{background-color:#ffebe6;color:#851a00}.bao-alert-emergency .bao-button.bao-button-secondary:hover,.bao-alert-emergency .bao-button.bao-button-secondary:focus{background-color:#ffebe6;border-color:#851a00}.bao-alert-emergency .bao-button.bao-button-secondary:focus{box-shadow:0 0 0 .1875rem #851a004d}.bao-alert-emergency .bao-button.bao-button-tertiary{background-color:#ffebe6;color:#851a00}.bao-alert-emergency .bao-button.bao-button-tertiary:hover,.bao-alert-emergency .bao-button.bao-button-tertiary:focus{background-color:#ffebe6}.bao-alert-emergency .bao-button.bao-button-tertiary:focus{box-shadow:0 0 0 .1875rem #851a004d}\n"] }]
|
|
662
650
|
}], propDecorators: { type: [{
|
|
663
651
|
type: Input
|
|
664
652
|
}], dismissible: [{
|
|
665
653
|
type: Input
|
|
666
|
-
}], showIcon: [{
|
|
667
|
-
type: Input
|
|
668
654
|
}], dismiss: [{
|
|
669
655
|
type: Output
|
|
670
656
|
}] } });
|
|
@@ -720,16 +706,16 @@ class BaoBreadcrumbComponent {
|
|
|
720
706
|
constructor(renderer) {
|
|
721
707
|
this.renderer = renderer;
|
|
722
708
|
}
|
|
723
|
-
setLastLinkAttribute() {
|
|
724
|
-
const children = Array.from(this.staticContainer.nativeElement.children);
|
|
725
|
-
this.renderer.setAttribute(children[children.length - 1], Object.keys(LAST_NODE_ATTRIBUTE)[0], Object.values(LAST_NODE_ATTRIBUTE)[0]);
|
|
726
|
-
}
|
|
727
709
|
ngAfterViewInit() {
|
|
728
710
|
this.setLastLinkAttribute();
|
|
729
711
|
}
|
|
730
712
|
onContentChange() {
|
|
731
713
|
this.setLastLinkAttribute();
|
|
732
714
|
}
|
|
715
|
+
setLastLinkAttribute() {
|
|
716
|
+
const children = Array.from(this.staticContainer.nativeElement.children);
|
|
717
|
+
this.renderer.setAttribute(children[children.length - 1], Object.keys(LAST_NODE_ATTRIBUTE)[0], Object.values(LAST_NODE_ATTRIBUTE)[0]);
|
|
718
|
+
}
|
|
733
719
|
}
|
|
734
720
|
BaoBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoBreadcrumbComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
735
721
|
BaoBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoBreadcrumbComponent, selector: "bao-breadcrumb", host: { classAttribute: "bao-breadcrumb" }, viewQueries: [{ propertyName: "staticContainer", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<nav\n #container\n class=\"bao-breadcrumb-nav\"\n aria-label=\"Breadcrumb\"\n (cdkObserveContent)=\"onContentChange()\"\n>\n <ng-content></ng-content>\n</nav>\n", styles: [".bao-breadcrumb-nav{display:inline-flex;flex-direction:row;flex-wrap:wrap}.bao-breadcrumb-nav>a{font-weight:700;font-size:.75rem;line-height:1rem;display:inline-flex;align-items:end;text-decoration:none;text-transform:uppercase;color:#637381;margin-bottom:.5rem;margin-right:.25rem;border-bottom:none;background-color:#fff0}.bao-breadcrumb-nav>a:hover{color:#097d6c}.bao-breadcrumb-nav>a:last-child{margin-right:0}.bao-breadcrumb-nav>a:last-child:after{content:none}.bao-breadcrumb-nav>a:after{display:inline-block;content:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ADB5BD' fill-rule='evenodd'><path d='M12.586 12L9.293 8.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 12z'/></svg>\");height:1rem;width:1rem;margin-left:.25rem;color:#637381;background-color:#fff0;cursor:default;flex-shrink:0}\n"], directives: [{ type: i1$2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
@@ -1017,15 +1003,14 @@ let checkboxGroupNextUniqueId = 0;
|
|
|
1017
1003
|
class BaoCheckboxGroupComponent {
|
|
1018
1004
|
constructor(cdr) {
|
|
1019
1005
|
this.cdr = cdr;
|
|
1020
|
-
this._uniqueId = `bao-checkbox-group-${++checkboxGroupNextUniqueId}`;
|
|
1021
|
-
/**
|
|
1022
|
-
* The checkbox group ID. It is set dynamically with an unique ID by default
|
|
1023
|
-
*/
|
|
1024
|
-
this.id = this._uniqueId;
|
|
1025
1006
|
/**
|
|
1026
1007
|
* The aria-describedby id for web accessibilty
|
|
1027
1008
|
*/
|
|
1028
1009
|
this.ariaDescribedby = undefined;
|
|
1010
|
+
this._uniqueId = `bao-checkbox-group-${++checkboxGroupNextUniqueId}`;
|
|
1011
|
+
if (!this.id) {
|
|
1012
|
+
this.id = this._uniqueId;
|
|
1013
|
+
}
|
|
1029
1014
|
}
|
|
1030
1015
|
ngAfterViewInit() {
|
|
1031
1016
|
this.setAriaDescribedByToDescription();
|
|
@@ -1070,14 +1055,6 @@ class BaoCheckboxComponent {
|
|
|
1070
1055
|
this.elementRef = elementRef;
|
|
1071
1056
|
this.cdr = cdr;
|
|
1072
1057
|
this.focusMonitor = focusMonitor;
|
|
1073
|
-
this._disabled = false;
|
|
1074
|
-
this._checked = false;
|
|
1075
|
-
this._indeterminate = false;
|
|
1076
|
-
this._uniqueId = `bao-checkbox-${++checkboxNextUniqueId}`;
|
|
1077
|
-
/**
|
|
1078
|
-
* The checkbox ID. It is set dynamically with an unique ID by default
|
|
1079
|
-
*/
|
|
1080
|
-
this.id = this._uniqueId;
|
|
1081
1058
|
/**
|
|
1082
1059
|
* Whether the checkbox has a border and is considered as a card.
|
|
1083
1060
|
*/
|
|
@@ -1098,8 +1075,15 @@ class BaoCheckboxComponent {
|
|
|
1098
1075
|
* Inderminate value of the checkbox whenever
|
|
1099
1076
|
*/
|
|
1100
1077
|
this.indeterminateChange = new EventEmitter();
|
|
1078
|
+
this._disabled = false;
|
|
1079
|
+
this._checked = false;
|
|
1080
|
+
this._indeterminate = false;
|
|
1081
|
+
this._uniqueId = `bao-checkbox-${++checkboxNextUniqueId}`;
|
|
1101
1082
|
this.onModelChange = () => undefined;
|
|
1102
1083
|
this.onTouch = () => undefined;
|
|
1084
|
+
if (!this.id) {
|
|
1085
|
+
this.id = this._uniqueId;
|
|
1086
|
+
}
|
|
1103
1087
|
}
|
|
1104
1088
|
/**
|
|
1105
1089
|
* Whether the checkbox is checked. Default value : false
|
|
@@ -1107,41 +1091,44 @@ class BaoCheckboxComponent {
|
|
|
1107
1091
|
get checked() {
|
|
1108
1092
|
return this._checked;
|
|
1109
1093
|
}
|
|
1110
|
-
set checked(value) {
|
|
1111
|
-
if (value !== this.checked) {
|
|
1112
|
-
this._checked = value;
|
|
1113
|
-
this.cdr.markForCheck();
|
|
1114
|
-
}
|
|
1115
|
-
}
|
|
1116
1094
|
/**
|
|
1117
1095
|
* Whether the checkbox is disabled. Default value : false
|
|
1118
1096
|
*/
|
|
1119
1097
|
get disabled() {
|
|
1120
1098
|
return this._disabled;
|
|
1121
1099
|
}
|
|
1122
|
-
set disabled(value) {
|
|
1123
|
-
// In the case the value is string or boolean
|
|
1124
|
-
const newValue = value;
|
|
1125
|
-
if (newValue !== this.disabled) {
|
|
1126
|
-
this._disabled = newValue;
|
|
1127
|
-
this.cdr.markForCheck();
|
|
1128
|
-
}
|
|
1129
|
-
}
|
|
1130
1100
|
/**
|
|
1131
1101
|
* Whether the checkbox is required. Default value : false
|
|
1132
1102
|
*/
|
|
1133
1103
|
get required() {
|
|
1134
1104
|
return this._required;
|
|
1135
1105
|
}
|
|
1136
|
-
set required(value) {
|
|
1137
|
-
this._required = value;
|
|
1138
|
-
}
|
|
1139
1106
|
/**
|
|
1140
1107
|
* Whether the checkbox is indeterminate. Default value : false
|
|
1141
1108
|
*/
|
|
1142
1109
|
get indeterminate() {
|
|
1143
1110
|
return this._indeterminate;
|
|
1144
1111
|
}
|
|
1112
|
+
get nativeElement() {
|
|
1113
|
+
return this.elementRef.nativeElement;
|
|
1114
|
+
}
|
|
1115
|
+
set checked(value) {
|
|
1116
|
+
if (value !== this.checked) {
|
|
1117
|
+
this._checked = value;
|
|
1118
|
+
this.cdr.markForCheck();
|
|
1119
|
+
}
|
|
1120
|
+
}
|
|
1121
|
+
set disabled(value) {
|
|
1122
|
+
// In the case the value is string or boolean
|
|
1123
|
+
const newValue = value;
|
|
1124
|
+
if (newValue !== this.disabled) {
|
|
1125
|
+
this._disabled = newValue;
|
|
1126
|
+
this.cdr.markForCheck();
|
|
1127
|
+
}
|
|
1128
|
+
}
|
|
1129
|
+
set required(value) {
|
|
1130
|
+
this._required = value;
|
|
1131
|
+
}
|
|
1145
1132
|
set indeterminate(value) {
|
|
1146
1133
|
const newValue = value;
|
|
1147
1134
|
if (newValue !== this._indeterminate) {
|
|
@@ -1151,9 +1138,6 @@ class BaoCheckboxComponent {
|
|
|
1151
1138
|
// Update the inderteminate value of the html element object
|
|
1152
1139
|
this.syncIndeterminate(this._indeterminate);
|
|
1153
1140
|
}
|
|
1154
|
-
get nativeElement() {
|
|
1155
|
-
return this.elementRef.nativeElement;
|
|
1156
|
-
}
|
|
1157
1141
|
ngOnInit() {
|
|
1158
1142
|
// Set all unique ids for the html elements
|
|
1159
1143
|
this.inputID = `${this.id}-input`;
|
|
@@ -1296,7 +1280,7 @@ class BaoCheckboxComponent {
|
|
|
1296
1280
|
}
|
|
1297
1281
|
}
|
|
1298
1282
|
BaoCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoCheckboxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
|
|
1299
|
-
BaoCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoCheckboxComponent, selector: "bao-checkbox, [bao-checkbox]", inputs: {
|
|
1283
|
+
BaoCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoCheckboxComponent, selector: "bao-checkbox, [bao-checkbox]", inputs: { id: "id", ariaLabel: ["aria-label", "ariaLabel"], brandBorder: "brandBorder", inline: "inline", name: "name", hiddenLabel: "hiddenLabel", checked: "checked", disabled: "disabled", required: "required", indeterminate: "indeterminate" }, outputs: { change: "change", indeterminateChange: "indeterminateChange" }, host: { properties: { "class.bao-checkbox-inline": "inline", "class.bao-checkbox-checked": "checked", "class.bao-checkbox-indeterminate": "indeterminate", "class.bao-checkbox-disabled": "disabled", "class.bao-checkbox-card": "brandBorder", "class.bao-checkbox-required": "required", "class.bao-checkbox-hidden-label": "hiddenLabel" }, classAttribute: "bao-checkbox" }, providers: [
|
|
1300
1284
|
{
|
|
1301
1285
|
provide: NG_VALUE_ACCESSOR,
|
|
1302
1286
|
useExisting: forwardRef(() => BaoCheckboxComponent),
|
|
@@ -1321,15 +1305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1321
1305
|
'[class.bao-checkbox-required]': 'required',
|
|
1322
1306
|
'[class.bao-checkbox-hidden-label]': 'hiddenLabel'
|
|
1323
1307
|
}, template: "<input\n #input\n type=\"checkbox\"\n [id]=\"inputID\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [attr.name]=\"name\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-checked]=\"getAriaState()\"\n (change)=\"onInteractionEvent($event)\"\n (click)=\"onInputClick($event)\"\n role=\"checkbox\"\n/>\n<label class=\"bao-checkbox-content-container\" [attr.for]=\"inputID\">\n <div class=\"bao-checkbox-label\" [id]=\"ariaLabelledby\">\n <ng-content></ng-content>\n </div>\n <ng-content\n select=\"bao-checkbox-description, [bao-checkbox-description], [baoCheckboxDescription]\"\n ></ng-content>\n</label>\n", styles: [".bao-checkbox{display:block;font-size:1rem;line-height:1.5rem;min-height:1.5rem;padding-top:.5rem;padding-bottom:.5rem;padding-left:2rem;position:relative;z-index:1}.bao-checkbox input{box-sizing:border-box;left:0;opacity:0;overflow:visible;padding:0;position:absolute;z-index:-1}.bao-checkbox input:focus~.bao-checkbox-content-container:before{box-shadow:0 0 0 .1875rem #0079c480}.bao-checkbox label.bao-checkbox-content-container{color:#212529;font-weight:400;font-size:1rem;line-height:1.5rem;margin-bottom:0;position:relative;vertical-align:top}.bao-checkbox label.bao-checkbox-content-container:before{border-radius:.125rem;box-sizing:border-box;position:absolute;top:0;left:-2rem;display:block;margin:.125rem;width:1.25rem;height:1.25rem;pointer-events:none;content:\"\";background-color:#fff;border:#ced4da solid 1px;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.bao-checkbox label.bao-checkbox-content-container:after{box-sizing:border-box;background:no-repeat 50%/1.5rem;content:\"\";display:block;height:1.5rem;left:-2rem;margin:0;position:absolute;top:0;width:1.5rem}.bao-checkbox label.bao-checkbox-content-container .bao-checkbox-label{color:#212529;display:block}.bao-checkbox label.bao-checkbox-content-container .bao-checkbox-description{color:#637381;display:block;margin-top:.5rem}.bao-checkbox.bao-checkbox-inline{display:inline-flex;margin-right:1rem}.bao-checkbox.bao-checkbox-card{padding:0;margin-bottom:1rem}.bao-checkbox.bao-checkbox-card:last-of-type{margin-bottom:0}.bao-checkbox.bao-checkbox-card label.bao-checkbox-content-container{display:flex;flex-direction:column;flex:1;justify-content:center;padding:1rem 1rem 1rem 3.5rem;position:relative;border:1px solid #ced4da;border-radius:.25rem;color:#637381;min-height:3.5rem}.bao-checkbox.bao-checkbox-card label.bao-checkbox-content-container:before{top:1rem;left:0;margin-left:1.125rem}.bao-checkbox.bao-checkbox-card label.bao-checkbox-content-container:after{top:1rem;left:0;margin-left:1rem}.bao-checkbox.bao-checkbox-indeterminate .bao-checkbox-content-container:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23097d6c' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\")}.bao-checkbox input:checked~.bao-checkbox-content-container:before{border-color:#097d6c;background-color:#097d6c}.bao-checkbox input:checked~.bao-checkbox-content-container:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23ffffff' d='M16.7 8.3C17.1 8.7 17.1 9.3 16.7 9.7L10.7 15.7 10.7 15.7C10.6 15.9 10.4 15.9 10.2 16L10.1 16 10.1 16 9.9 16C9.7 16 9.5 15.9 9.3 15.7L7.3 13.7C6.9 13.3 6.9 12.7 7.3 12.3 7.7 11.9 8.3 11.9 8.7 12.3L10 13.6 15.3 8.3C15.7 7.9 16.3 7.9 16.7 8.3Z'/%3e%3c/svg%3e\")}.bao-checkbox input:disabled~.bao-checkbox-content-container{color:#adb2bd;border-color:#dee2e6}.bao-checkbox input:disabled~.bao-checkbox-content-container:before{border-color:#ced4da;background-color:#ced4da}.bao-checkbox input:disabled~.bao-checkbox-content-container .bao-checkbox-label,.bao-checkbox input:disabled~.bao-checkbox-content-container .bao-checkbox-description{color:#adb2bd}.bao-checkbox.bao-checkbox-hidden-label .bao-checkbox-label{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.bao-checkbox.bao-checkbox-hidden-label label.bao-checkbox-content-container .bao-checkbox-description{margin-top:0}\n"] }]
|
|
1324
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.FocusMonitor }]; }, propDecorators: {
|
|
1325
|
-
type: Input
|
|
1326
|
-
}], disabled: [{
|
|
1327
|
-
type: Input
|
|
1328
|
-
}], required: [{
|
|
1329
|
-
type: Input
|
|
1330
|
-
}], indeterminate: [{
|
|
1331
|
-
type: Input
|
|
1332
|
-
}], id: [{
|
|
1308
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.FocusMonitor }]; }, propDecorators: { id: [{
|
|
1333
1309
|
type: Input
|
|
1334
1310
|
}], ariaLabel: [{
|
|
1335
1311
|
type: Input,
|
|
@@ -1349,6 +1325,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1349
1325
|
}], inputElement: [{
|
|
1350
1326
|
type: ViewChild,
|
|
1351
1327
|
args: ['input', { static: false }]
|
|
1328
|
+
}], checked: [{
|
|
1329
|
+
type: Input
|
|
1330
|
+
}], disabled: [{
|
|
1331
|
+
type: Input
|
|
1332
|
+
}], required: [{
|
|
1333
|
+
type: Input
|
|
1334
|
+
}], indeterminate: [{
|
|
1335
|
+
type: Input
|
|
1352
1336
|
}] } });
|
|
1353
1337
|
class BaoCheckBoxDescription {
|
|
1354
1338
|
}
|
|
@@ -1673,17 +1657,6 @@ let radioGroupNextUniqueId = 0;
|
|
|
1673
1657
|
class BaoRadioButtonGroupComponent {
|
|
1674
1658
|
constructor(cdr) {
|
|
1675
1659
|
this.cdr = cdr;
|
|
1676
|
-
this._value = null;
|
|
1677
|
-
this._name = null;
|
|
1678
|
-
this._selected = null;
|
|
1679
|
-
this._isInitialized = false;
|
|
1680
|
-
this._disabled = false;
|
|
1681
|
-
this._required = false;
|
|
1682
|
-
this._uniqueId = `bao-checkbox-group-${++radioGroupNextUniqueId}`;
|
|
1683
|
-
/**
|
|
1684
|
-
* The checkbox group ID. It is set dynamically with an unique ID by default
|
|
1685
|
-
*/
|
|
1686
|
-
this.id = this._uniqueId;
|
|
1687
1660
|
/**
|
|
1688
1661
|
* Emit the value of the selected radio button
|
|
1689
1662
|
*/
|
|
@@ -1692,8 +1665,18 @@ class BaoRadioButtonGroupComponent {
|
|
|
1692
1665
|
* The aria-describedby for web accessibilty
|
|
1693
1666
|
*/
|
|
1694
1667
|
this.ariaDescribedby = null;
|
|
1668
|
+
this._value = null;
|
|
1669
|
+
this._name = null;
|
|
1670
|
+
this._selected = null;
|
|
1671
|
+
this._isInitialized = false;
|
|
1672
|
+
this._disabled = false;
|
|
1673
|
+
this._required = false;
|
|
1674
|
+
this._uniqueId = `bao-checkbox-group-${++radioGroupNextUniqueId}`;
|
|
1695
1675
|
this.onModelChange = () => undefined;
|
|
1696
1676
|
this.onTouch = () => undefined;
|
|
1677
|
+
if (!this.id) {
|
|
1678
|
+
this.id = this._uniqueId;
|
|
1679
|
+
}
|
|
1697
1680
|
}
|
|
1698
1681
|
/**
|
|
1699
1682
|
* Define the name property of all radio buttons. Default : null
|
|
@@ -1701,50 +1684,50 @@ class BaoRadioButtonGroupComponent {
|
|
|
1701
1684
|
get name() {
|
|
1702
1685
|
return this._name;
|
|
1703
1686
|
}
|
|
1704
|
-
set name(value) {
|
|
1705
|
-
this._name = value;
|
|
1706
|
-
this.updateRadioButtonNames();
|
|
1707
|
-
}
|
|
1708
1687
|
/**
|
|
1709
1688
|
* Define the value of the selected radio button. Default : null
|
|
1710
1689
|
*/
|
|
1711
1690
|
get value() {
|
|
1712
1691
|
return this._value;
|
|
1713
1692
|
}
|
|
1714
|
-
set value(newValue) {
|
|
1715
|
-
if (this._value !== newValue) {
|
|
1716
|
-
this._value = newValue;
|
|
1717
|
-
this.updateSelectedRadioFromValue();
|
|
1718
|
-
this.checkSelectedRadioButton();
|
|
1719
|
-
}
|
|
1720
|
-
}
|
|
1721
1693
|
/**
|
|
1722
1694
|
* Define which radio button is selected. Default : null
|
|
1723
1695
|
*/
|
|
1724
1696
|
get selected() {
|
|
1725
1697
|
return this._selected;
|
|
1726
1698
|
}
|
|
1727
|
-
set selected(selected) {
|
|
1728
|
-
this._selected = selected;
|
|
1729
|
-
this.value = selected ? selected.value : null;
|
|
1730
|
-
this.checkSelectedRadioButton();
|
|
1731
|
-
}
|
|
1732
1699
|
/**
|
|
1733
1700
|
* Whether the radio button groupd is disabled. Default : false
|
|
1734
1701
|
*/
|
|
1735
1702
|
get disabled() {
|
|
1736
1703
|
return this._disabled;
|
|
1737
1704
|
}
|
|
1738
|
-
set disabled(value) {
|
|
1739
|
-
this._disabled = coerceBooleanProperty(value);
|
|
1740
|
-
this.markRadiosForCheck();
|
|
1741
|
-
}
|
|
1742
1705
|
/**
|
|
1743
1706
|
* Whether the radio button groupd is required. Default : false
|
|
1744
1707
|
*/
|
|
1745
1708
|
get required() {
|
|
1746
1709
|
return this._required;
|
|
1747
1710
|
}
|
|
1711
|
+
set name(value) {
|
|
1712
|
+
this._name = value;
|
|
1713
|
+
this.updateRadioButtonNames();
|
|
1714
|
+
}
|
|
1715
|
+
set value(newValue) {
|
|
1716
|
+
if (this._value !== newValue) {
|
|
1717
|
+
this._value = newValue;
|
|
1718
|
+
this.updateSelectedRadioFromValue();
|
|
1719
|
+
this.checkSelectedRadioButton();
|
|
1720
|
+
}
|
|
1721
|
+
}
|
|
1722
|
+
set selected(selected) {
|
|
1723
|
+
this._selected = selected;
|
|
1724
|
+
this.value = selected ? selected.value : null;
|
|
1725
|
+
this.checkSelectedRadioButton();
|
|
1726
|
+
}
|
|
1727
|
+
set disabled(value) {
|
|
1728
|
+
this._disabled = coerceBooleanProperty(value);
|
|
1729
|
+
this.markRadiosForCheck();
|
|
1730
|
+
}
|
|
1748
1731
|
set required(value) {
|
|
1749
1732
|
this._required = coerceBooleanProperty(value);
|
|
1750
1733
|
this.markRadiosForCheck();
|
|
@@ -1866,7 +1849,7 @@ BaoRadioButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
|
|
|
1866
1849
|
multi: true
|
|
1867
1850
|
},
|
|
1868
1851
|
{ provide: BAO_RADIO_GROUP, useExisting: BaoRadioButtonGroupComponent }
|
|
1869
|
-
], queries: [{ propertyName: "
|
|
1852
|
+
], queries: [{ propertyName: "staticContainer", predicate: i0.forwardRef(function () { return BaoRadioButtonComponent; }), descendants: true }], viewQueries: [{ propertyName: "staticContainer", first: true, predicate: ["container"], descendants: true }], exportAs: ["baoRadioGroup"], ngImport: i0, template: "<fieldset\n role=\"radiogroup\"\n class=\"bao-radio-button-group\"\n [id]=\"id\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n>\n <ng-content></ng-content>\n <div\n class=\"bao-radio-button-group-description\"\n [attr.id]=\"ariaDescribedby\"\n #container\n (cdkObserveContent)=\"onContentChange()\"\n >\n <ng-content\n select=\"bao-error, [bao-error], bao-guiding-text, [bao-guiding-text]\"\n ></ng-content>\n </div>\n</fieldset>\n", styles: [".bao-radio-button-group .bao-legend{margin-bottom:.5rem}.bao-radio-button-group .bao-error,.bao-radio-button-group .bao-guiding-text{margin-top:.5rem}\n"], directives: [{ type: i1$2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1870
1853
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoRadioButtonGroupComponent, decorators: [{
|
|
1871
1854
|
type: Component,
|
|
1872
1855
|
args: [{ selector: 'bao-radio-button-group, [bao-radio-button-group], [baoRadioButtonGroup]', exportAs: 'baoRadioGroup', encapsulation: ViewEncapsulation.None, providers: [
|
|
@@ -1877,13 +1860,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1877
1860
|
},
|
|
1878
1861
|
{ provide: BAO_RADIO_GROUP, useExisting: BaoRadioButtonGroupComponent }
|
|
1879
1862
|
], template: "<fieldset\n role=\"radiogroup\"\n class=\"bao-radio-button-group\"\n [id]=\"id\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n>\n <ng-content></ng-content>\n <div\n class=\"bao-radio-button-group-description\"\n [attr.id]=\"ariaDescribedby\"\n #container\n (cdkObserveContent)=\"onContentChange()\"\n >\n <ng-content\n select=\"bao-error, [bao-error], bao-guiding-text, [bao-guiding-text]\"\n ></ng-content>\n </div>\n</fieldset>\n", styles: [".bao-radio-button-group .bao-legend{margin-bottom:.5rem}.bao-radio-button-group .bao-error,.bao-radio-button-group .bao-guiding-text{margin-top:.5rem}\n"] }]
|
|
1880
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: {
|
|
1863
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
|
|
1864
|
+
type: Input
|
|
1865
|
+
}], change: [{
|
|
1866
|
+
type: Output
|
|
1867
|
+
}], staticContainer: [{
|
|
1881
1868
|
type: ContentChildren,
|
|
1882
1869
|
args: [forwardRef(() => BaoRadioButtonComponent), {
|
|
1883
1870
|
descendants: true
|
|
1884
1871
|
}]
|
|
1885
|
-
}
|
|
1886
|
-
type:
|
|
1872
|
+
}, {
|
|
1873
|
+
type: ViewChild,
|
|
1874
|
+
args: ['container', { static: false }]
|
|
1887
1875
|
}], name: [{
|
|
1888
1876
|
type: Input
|
|
1889
1877
|
}], value: [{
|
|
@@ -1894,11 +1882,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1894
1882
|
type: Input
|
|
1895
1883
|
}], required: [{
|
|
1896
1884
|
type: Input
|
|
1897
|
-
}], change: [{
|
|
1898
|
-
type: Output
|
|
1899
|
-
}], staticContainer: [{
|
|
1900
|
-
type: ViewChild,
|
|
1901
|
-
args: ['container', { static: false }]
|
|
1902
1885
|
}] } });
|
|
1903
1886
|
|
|
1904
1887
|
/**
|
|
@@ -1911,15 +1894,6 @@ class BaoRadioButtonComponent {
|
|
|
1911
1894
|
this.cdr = cdr;
|
|
1912
1895
|
this.focusMonitor = focusMonitor;
|
|
1913
1896
|
this.radioDispatcher = radioDispatcher;
|
|
1914
|
-
this._checked = false;
|
|
1915
|
-
this._disabled = false;
|
|
1916
|
-
this._required = false;
|
|
1917
|
-
this._value = null;
|
|
1918
|
-
this._uniqueId = `bao-radio-button-${++radioNextUniqueId}`;
|
|
1919
|
-
/**
|
|
1920
|
-
* The radio button ID. It is set dynamically with an unique ID by default
|
|
1921
|
-
*/
|
|
1922
|
-
this.id = this._uniqueId;
|
|
1923
1897
|
/**
|
|
1924
1898
|
* The aria-label for web accessibility
|
|
1925
1899
|
*/
|
|
@@ -1952,6 +1926,11 @@ class BaoRadioButtonComponent {
|
|
|
1952
1926
|
* The aria-labeledby id for web accessibilty
|
|
1953
1927
|
*/
|
|
1954
1928
|
this.ariaLabelledby = null;
|
|
1929
|
+
this._checked = false;
|
|
1930
|
+
this._disabled = false;
|
|
1931
|
+
this._required = false;
|
|
1932
|
+
this._value = null;
|
|
1933
|
+
this._uniqueId = `bao-radio-button-${++radioNextUniqueId}`;
|
|
1955
1934
|
/** Unregister function for radioDispatcher */
|
|
1956
1935
|
this._removeUniqueSelectionListener = () => undefined;
|
|
1957
1936
|
this.radioGroup = radioGroup;
|
|
@@ -1960,6 +1939,9 @@ class BaoRadioButtonComponent {
|
|
|
1960
1939
|
this.checked = false;
|
|
1961
1940
|
}
|
|
1962
1941
|
});
|
|
1942
|
+
if (!this.id) {
|
|
1943
|
+
this.id = this._uniqueId;
|
|
1944
|
+
}
|
|
1963
1945
|
}
|
|
1964
1946
|
/**
|
|
1965
1947
|
* Whether the radio button is checked. Default : false
|
|
@@ -1967,6 +1949,27 @@ class BaoRadioButtonComponent {
|
|
|
1967
1949
|
get checked() {
|
|
1968
1950
|
return this._checked;
|
|
1969
1951
|
}
|
|
1952
|
+
/**
|
|
1953
|
+
* Define the radio button value. Default : null
|
|
1954
|
+
*/
|
|
1955
|
+
get value() {
|
|
1956
|
+
return this._value;
|
|
1957
|
+
}
|
|
1958
|
+
/**
|
|
1959
|
+
* Whether the radio button is disabled. Default : false
|
|
1960
|
+
*/
|
|
1961
|
+
get disabled() {
|
|
1962
|
+
return this._disabled || (this.radioGroup && this.radioGroup.disabled);
|
|
1963
|
+
}
|
|
1964
|
+
/**
|
|
1965
|
+
* Whether the radio button is required. Default : false
|
|
1966
|
+
*/
|
|
1967
|
+
get required() {
|
|
1968
|
+
return this._required || (this.radioGroup && this.radioGroup.required);
|
|
1969
|
+
}
|
|
1970
|
+
get nativeElement() {
|
|
1971
|
+
return this.elementRef.nativeElement;
|
|
1972
|
+
}
|
|
1970
1973
|
set checked(value) {
|
|
1971
1974
|
const newCheckedState = coerceBooleanProperty(value);
|
|
1972
1975
|
if (this._checked !== newCheckedState) {
|
|
@@ -1987,12 +1990,6 @@ class BaoRadioButtonComponent {
|
|
|
1987
1990
|
this.cdr.markForCheck();
|
|
1988
1991
|
}
|
|
1989
1992
|
}
|
|
1990
|
-
/**
|
|
1991
|
-
* Define the radio button value. Default : null
|
|
1992
|
-
*/
|
|
1993
|
-
get value() {
|
|
1994
|
-
return this._value;
|
|
1995
|
-
}
|
|
1996
1993
|
set value(value) {
|
|
1997
1994
|
if (value !== this._value) {
|
|
1998
1995
|
this._value = value;
|
|
@@ -2006,27 +2003,12 @@ class BaoRadioButtonComponent {
|
|
|
2006
2003
|
}
|
|
2007
2004
|
}
|
|
2008
2005
|
}
|
|
2009
|
-
/**
|
|
2010
|
-
* Whether the radio button is disabled. Default : false
|
|
2011
|
-
*/
|
|
2012
|
-
get disabled() {
|
|
2013
|
-
return this._disabled || (this.radioGroup && this.radioGroup.disabled);
|
|
2014
|
-
}
|
|
2015
2006
|
set disabled(value) {
|
|
2016
2007
|
this.setDisabled(coerceBooleanProperty(value));
|
|
2017
2008
|
}
|
|
2018
|
-
/**
|
|
2019
|
-
* Whether the radio button is required. Default : false
|
|
2020
|
-
*/
|
|
2021
|
-
get required() {
|
|
2022
|
-
return this._required || (this.radioGroup && this.radioGroup.required);
|
|
2023
|
-
}
|
|
2024
2009
|
set required(value) {
|
|
2025
2010
|
this._required = coerceBooleanProperty(value);
|
|
2026
2011
|
}
|
|
2027
|
-
get nativeElement() {
|
|
2028
|
-
return this.elementRef.nativeElement;
|
|
2029
|
-
}
|
|
2030
2012
|
focus(options, origin) {
|
|
2031
2013
|
if (origin) {
|
|
2032
2014
|
this.focusMonitor.focusVia(this.inputElement, origin, options);
|
|
@@ -2118,7 +2100,7 @@ class BaoRadioButtonComponent {
|
|
|
2118
2100
|
}
|
|
2119
2101
|
}
|
|
2120
2102
|
BaoRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoRadioButtonComponent, deps: [{ token: BAO_RADIO_GROUP, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.FocusMonitor }, { token: i2.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Component });
|
|
2121
|
-
BaoRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoRadioButtonComponent, selector: "bao-radio-button, [bao-radio-button]", inputs: { id: "id", ariaLabel: ["aria-label", "ariaLabel"], brandBorder: "brandBorder", inline: "inline", name: "name", checked: "checked", value: "value", disabled: "disabled", required: "required"
|
|
2103
|
+
BaoRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoRadioButtonComponent, selector: "bao-radio-button, [bao-radio-button]", inputs: { id: "id", ariaLabel: ["aria-label", "ariaLabel"], brandBorder: "brandBorder", inline: "inline", name: "name", hiddenLabel: "hiddenLabel", checked: "checked", value: "value", disabled: "disabled", required: "required" }, outputs: { change: "change" }, host: { properties: { "class.bao-radio-button-inline": "inline", "class.bao-radio-button-checked": "checked", "class.bao-radio-button-disabled": "disabled", "class.bao-radio-button-card": "brandBorder", "class.bao-radio-button-hidden-label": "hiddenLabel" }, classAttribute: "bao-radio-button" }, providers: [
|
|
2122
2104
|
{
|
|
2123
2105
|
provide: NG_VALUE_ACCESSOR,
|
|
2124
2106
|
useExisting: forwardRef(() => BaoRadioButtonComponent),
|
|
@@ -2159,6 +2141,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2159
2141
|
type: Input
|
|
2160
2142
|
}], name: [{
|
|
2161
2143
|
type: Input
|
|
2144
|
+
}], hiddenLabel: [{
|
|
2145
|
+
type: Input
|
|
2146
|
+
}], change: [{
|
|
2147
|
+
type: Output
|
|
2148
|
+
}], inputElement: [{
|
|
2149
|
+
type: ViewChild,
|
|
2150
|
+
args: ['input', { static: false }]
|
|
2162
2151
|
}], checked: [{
|
|
2163
2152
|
type: Input
|
|
2164
2153
|
}], value: [{
|
|
@@ -2167,13 +2156,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2167
2156
|
type: Input
|
|
2168
2157
|
}], required: [{
|
|
2169
2158
|
type: Input
|
|
2170
|
-
}], hiddenLabel: [{
|
|
2171
|
-
type: Input
|
|
2172
|
-
}], change: [{
|
|
2173
|
-
type: Output
|
|
2174
|
-
}], inputElement: [{
|
|
2175
|
-
type: ViewChild,
|
|
2176
|
-
args: ['input', { static: false }]
|
|
2177
2159
|
}] } });
|
|
2178
2160
|
class BaoRadioDescription {
|
|
2179
2161
|
}
|
|
@@ -2246,8 +2228,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2246
2228
|
* See LICENSE file in the project root for full license information.
|
|
2247
2229
|
*/
|
|
2248
2230
|
const SPAN = 'span';
|
|
2249
|
-
const SPAN_TEXT_PROPERTY = 'textContent';
|
|
2250
|
-
const SCREEN_READER_CLASS_NAME = 'sr-only';
|
|
2231
|
+
const SPAN_TEXT_PROPERTY$1 = 'textContent';
|
|
2232
|
+
const SCREEN_READER_CLASS_NAME$1 = 'sr-only';
|
|
2251
2233
|
const BAO_ICON = 'bao-icon';
|
|
2252
2234
|
const HAS_ICON = 'has-icon';
|
|
2253
2235
|
class BaoTagComponent {
|
|
@@ -2276,8 +2258,8 @@ class BaoTagComponent {
|
|
|
2276
2258
|
}
|
|
2277
2259
|
addHiddenText() {
|
|
2278
2260
|
const screenReaderSpan = this.renderer.createElement(SPAN);
|
|
2279
|
-
this.renderer.setProperty(screenReaderSpan, SPAN_TEXT_PROPERTY, this.hiddenText);
|
|
2280
|
-
this.renderer.addClass(screenReaderSpan, SCREEN_READER_CLASS_NAME);
|
|
2261
|
+
this.renderer.setProperty(screenReaderSpan, SPAN_TEXT_PROPERTY$1, this.hiddenText);
|
|
2262
|
+
this.renderer.addClass(screenReaderSpan, SCREEN_READER_CLASS_NAME$1);
|
|
2281
2263
|
const labelChild = Array.from(this.nativeElement.children).find(c => c.localName === SPAN);
|
|
2282
2264
|
this.renderer.insertBefore(this.nativeElement, screenReaderSpan, labelChild);
|
|
2283
2265
|
}
|
|
@@ -2289,7 +2271,7 @@ class BaoTagComponent {
|
|
|
2289
2271
|
}
|
|
2290
2272
|
}
|
|
2291
2273
|
BaoTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTagComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2292
|
-
BaoTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoTagComponent, selector: "bao-tag, [bao-tag], [baoTag]", inputs: { type: "type", variant: "variant", hiddenText: "hiddenText" }, host: { properties: { "class.bao-tag-neutral-light": "type === \"neutral\" && variant === \"light\"", "class.bao-tag-neutral-strong": "type === \"neutral\" && variant === \"strong\"", "class.bao-tag-info-light": "type === \"info\" && variant === \"light\"", "class.bao-tag-info-strong": "type === \"info\" && variant === \"strong\"", "class.bao-tag-positive-light": "type === \"positive\" && variant === \"light\"", "class.bao-tag-positive-strong": "type === \"positive\" && variant === \"strong\"", "class.bao-tag-alert-light": "type === \"alert\" && variant === \"light\"", "class.bao-tag-alert-strong": "type === \"alert\" && variant === \"strong\"", "class.bao-tag-negative-light": "type === \"negative\" && variant === \"light\"", "class.bao-tag-negative-strong": "type === \"negative\" && variant === \"strong\"" }, classAttribute: "bao-tag" }, ngImport: i0, template: "<ng-content select=\"bao-icon\"></ng-content>\n<ng-content></ng-content>\n", styles: [".bao-tag{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:.125rem;line-height:1.5rem}.bao-tag.has-icon{padding-left:.25rem}.bao-tag.bao-tag-info-light{background-color:#e6f5f9;color:#004b7b}.bao-tag.bao-tag-info-strong{background-color:#0079c4;color:#fff}.bao-tag.bao-tag-positive-light{background-color:#e7f6f0;color:#025d29}.bao-tag.bao-tag-positive-strong{background-color:#0da566;color:#fff}.bao-tag.bao-tag-negative-light{background-color:#ffebe6;color:#851a00}.bao-tag.bao-tag-negative-strong{background-color:#d3310a;color:#fff}.bao-tag.bao-tag-alert-light{background-color:#fefae6;color:#6c4600}.bao-tag.bao-tag-alert-strong{background-color:#ffb833;color:#212529}.bao-tag.bao-tag-neutral-light{background-color:#dee2e6;color:#212529}.bao-tag.bao-tag-neutral-strong{background-color:#212529;color:#fff}.bao-tag>span{font-weight:700;font-size:.875rem;line-height:1.25rem}.bao-tag>.bao-icon{height:1rem;width:1rem;
|
|
2274
|
+
BaoTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoTagComponent, selector: "bao-tag, [bao-tag], [baoTag]", inputs: { type: "type", variant: "variant", hiddenText: "hiddenText" }, host: { properties: { "class.bao-tag-neutral-light": "type === \"neutral\" && variant === \"light\"", "class.bao-tag-neutral-strong": "type === \"neutral\" && variant === \"strong\"", "class.bao-tag-info-light": "type === \"info\" && variant === \"light\"", "class.bao-tag-info-strong": "type === \"info\" && variant === \"strong\"", "class.bao-tag-positive-light": "type === \"positive\" && variant === \"light\"", "class.bao-tag-positive-strong": "type === \"positive\" && variant === \"strong\"", "class.bao-tag-alert-light": "type === \"alert\" && variant === \"light\"", "class.bao-tag-alert-strong": "type === \"alert\" && variant === \"strong\"", "class.bao-tag-negative-light": "type === \"negative\" && variant === \"light\"", "class.bao-tag-negative-strong": "type === \"negative\" && variant === \"strong\"" }, classAttribute: "bao-tag" }, ngImport: i0, template: "<ng-content select=\"bao-icon\"></ng-content>\n<ng-content></ng-content>\n", styles: [".bao-tag{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:.125rem;line-height:1.5rem}.bao-tag.has-icon{padding-left:.25rem}.bao-tag.bao-tag-info-light{background-color:#e6f5f9;color:#004b7b}.bao-tag.bao-tag-info-strong{background-color:#0079c4;color:#fff}.bao-tag.bao-tag-positive-light{background-color:#e7f6f0;color:#025d29}.bao-tag.bao-tag-positive-strong{background-color:#0da566;color:#fff}.bao-tag.bao-tag-negative-light{background-color:#ffebe6;color:#851a00}.bao-tag.bao-tag-negative-strong{background-color:#d3310a;color:#fff}.bao-tag.bao-tag-alert-light{background-color:#fefae6;color:#6c4600}.bao-tag.bao-tag-alert-strong{background-color:#ffb833;color:#212529}.bao-tag.bao-tag-neutral-light{background-color:#dee2e6;color:#212529}.bao-tag.bao-tag-neutral-strong{background-color:#212529;color:#fff}.bao-tag>span{font-weight:700;font-size:.875rem;line-height:1.25rem}.bao-tag>.bao-icon{height:1rem;width:1rem;margin-right:.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2293
2275
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTagComponent, decorators: [{
|
|
2294
2276
|
type: Component,
|
|
2295
2277
|
args: [{ selector: 'bao-tag, [bao-tag], [baoTag]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
@@ -2304,7 +2286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2304
2286
|
'[class.bao-tag-alert-strong]': 'type === "alert" && variant === "strong"',
|
|
2305
2287
|
'[class.bao-tag-negative-light]': 'type === "negative" && variant === "light"',
|
|
2306
2288
|
'[class.bao-tag-negative-strong]': 'type === "negative" && variant === "strong"'
|
|
2307
|
-
}, template: "<ng-content select=\"bao-icon\"></ng-content>\n<ng-content></ng-content>\n", styles: [".bao-tag{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:.125rem;line-height:1.5rem}.bao-tag.has-icon{padding-left:.25rem}.bao-tag.bao-tag-info-light{background-color:#e6f5f9;color:#004b7b}.bao-tag.bao-tag-info-strong{background-color:#0079c4;color:#fff}.bao-tag.bao-tag-positive-light{background-color:#e7f6f0;color:#025d29}.bao-tag.bao-tag-positive-strong{background-color:#0da566;color:#fff}.bao-tag.bao-tag-negative-light{background-color:#ffebe6;color:#851a00}.bao-tag.bao-tag-negative-strong{background-color:#d3310a;color:#fff}.bao-tag.bao-tag-alert-light{background-color:#fefae6;color:#6c4600}.bao-tag.bao-tag-alert-strong{background-color:#ffb833;color:#212529}.bao-tag.bao-tag-neutral-light{background-color:#dee2e6;color:#212529}.bao-tag.bao-tag-neutral-strong{background-color:#212529;color:#fff}.bao-tag>span{font-weight:700;font-size:.875rem;line-height:1.25rem}.bao-tag>.bao-icon{height:1rem;width:1rem;
|
|
2289
|
+
}, template: "<ng-content select=\"bao-icon\"></ng-content>\n<ng-content></ng-content>\n", styles: [".bao-tag{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:.125rem;line-height:1.5rem}.bao-tag.has-icon{padding-left:.25rem}.bao-tag.bao-tag-info-light{background-color:#e6f5f9;color:#004b7b}.bao-tag.bao-tag-info-strong{background-color:#0079c4;color:#fff}.bao-tag.bao-tag-positive-light{background-color:#e7f6f0;color:#025d29}.bao-tag.bao-tag-positive-strong{background-color:#0da566;color:#fff}.bao-tag.bao-tag-negative-light{background-color:#ffebe6;color:#851a00}.bao-tag.bao-tag-negative-strong{background-color:#d3310a;color:#fff}.bao-tag.bao-tag-alert-light{background-color:#fefae6;color:#6c4600}.bao-tag.bao-tag-alert-strong{background-color:#ffb833;color:#212529}.bao-tag.bao-tag-neutral-light{background-color:#dee2e6;color:#212529}.bao-tag.bao-tag-neutral-strong{background-color:#212529;color:#fff}.bao-tag>span{font-weight:700;font-size:.875rem;line-height:1.25rem}.bao-tag>.bao-icon{height:1rem;width:1rem;margin-right:.25rem}\n"] }]
|
|
2308
2290
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { type: [{
|
|
2309
2291
|
type: Input
|
|
2310
2292
|
}], variant: [{
|
|
@@ -2333,23 +2315,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2333
2315
|
}]
|
|
2334
2316
|
}] });
|
|
2335
2317
|
|
|
2336
|
-
/*
|
|
2337
|
-
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2338
|
-
* Licensed under the MIT license.
|
|
2339
|
-
* See LICENSE file in the project root for full license information.
|
|
2340
|
-
*/
|
|
2341
|
-
|
|
2342
|
-
/*
|
|
2343
|
-
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2344
|
-
* Licensed under the MIT license.
|
|
2345
|
-
* See LICENSE file in the project root for full license information.
|
|
2346
|
-
*/
|
|
2347
|
-
var EDisplayMode;
|
|
2348
|
-
(function (EDisplayMode) {
|
|
2349
|
-
EDisplayMode["COMPACT"] = "compact";
|
|
2350
|
-
EDisplayMode["RESPONSIVE"] = "responsive";
|
|
2351
|
-
})(EDisplayMode || (EDisplayMode = {}));
|
|
2352
|
-
|
|
2353
2318
|
/*
|
|
2354
2319
|
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2355
2320
|
* Licensed under the MIT license.
|
|
@@ -2370,15 +2335,14 @@ class BaoSummaryComponent {
|
|
|
2370
2335
|
* RESPONSIVE (viewport width <=> is 576px)
|
|
2371
2336
|
* COMPACT (viewport width < 576px)
|
|
2372
2337
|
*/
|
|
2373
|
-
this.displayMode =
|
|
2338
|
+
this.displayMode = "responsive" /* RESPONSIVE */;
|
|
2374
2339
|
/**
|
|
2375
2340
|
* Initialize the ID for summary
|
|
2376
2341
|
*/
|
|
2377
2342
|
this._uniqueId = `bao-summary-${++summaryUniqueId}`;
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
|
|
2381
|
-
this.id = this._uniqueId;
|
|
2343
|
+
if (!this.id) {
|
|
2344
|
+
this.id = this._uniqueId;
|
|
2345
|
+
}
|
|
2382
2346
|
}
|
|
2383
2347
|
get nativeElement() {
|
|
2384
2348
|
return this.elementRef.nativeElement;
|
|
@@ -2520,6 +2484,1398 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2520
2484
|
* See LICENSE file in the project root for full license information.
|
|
2521
2485
|
*/
|
|
2522
2486
|
|
|
2487
|
+
/*
|
|
2488
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2489
|
+
* Licensed under the MIT license.
|
|
2490
|
+
* See LICENSE file in the project root for full license information.
|
|
2491
|
+
*/
|
|
2492
|
+
class BaoAvatarContent {
|
|
2493
|
+
}
|
|
2494
|
+
BaoAvatarContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2495
|
+
BaoAvatarContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaoAvatarContent, selector: "bao-avatar-content, [bao-avatar-content]", host: { classAttribute: "bao-avatar-content" }, exportAs: ["baoAvatarContent"], ngImport: i0 });
|
|
2496
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarContent, decorators: [{
|
|
2497
|
+
type: Directive,
|
|
2498
|
+
args: [{
|
|
2499
|
+
selector: 'bao-avatar-content, [bao-avatar-content]',
|
|
2500
|
+
exportAs: 'baoAvatarContent',
|
|
2501
|
+
host: {
|
|
2502
|
+
class: 'bao-avatar-content'
|
|
2503
|
+
}
|
|
2504
|
+
}]
|
|
2505
|
+
}] });
|
|
2506
|
+
const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
|
|
2507
|
+
const SVG_PROFILE_ICON = "<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='12' fill='#DEE2E6'/><path fill-rule='evenodd' clip-rule='evenodd' d='M20.6328 20.3314C18.4504 22.5932 15.3877 24 11.9964 24C8.60514 24 5.54243 22.5932 3.36 20.3314C3.99242 18.9554 5.38284 18 6.99642 18H16.9964C18.61 18 20.0004 18.9554 20.6328 20.3314ZM17.9964 10C17.9964 13.3137 15.3101 16 11.9964 16C8.68272 16 5.99642 13.3137 5.99642 10C5.99642 6.68629 8.68272 4 11.9964 4C15.3101 4 17.9964 6.68629 17.9964 10Z' fill='#ADB2BD'/></svg>";
|
|
2508
|
+
const SCREEN_READER_CLASS_NAME = 'sr-only';
|
|
2509
|
+
const SPAN_TEXT_PROPERTY = 'textContent';
|
|
2510
|
+
class BaoAvatarComponent {
|
|
2511
|
+
constructor(renderer, elementRef) {
|
|
2512
|
+
this.renderer = renderer;
|
|
2513
|
+
this.elementRef = elementRef;
|
|
2514
|
+
/**
|
|
2515
|
+
* Name of the profile to be used as title of the avatar.
|
|
2516
|
+
*/
|
|
2517
|
+
this.profileName = 'Avatar du profil';
|
|
2518
|
+
/**
|
|
2519
|
+
* ID of the background color to be used if avatar's content is text.
|
|
2520
|
+
*/
|
|
2521
|
+
this.color = 'background-color-1';
|
|
2522
|
+
}
|
|
2523
|
+
get nativeElement() {
|
|
2524
|
+
return this.elementRef.nativeElement;
|
|
2525
|
+
}
|
|
2526
|
+
ngAfterViewInit() {
|
|
2527
|
+
if (!this.nativeElement.childNodes.length) {
|
|
2528
|
+
this.addIcon();
|
|
2529
|
+
}
|
|
2530
|
+
if (this.nativeElement.firstChild.nodeName === 'SPAN') {
|
|
2531
|
+
this.formatInitials(this.nativeElement.firstChild);
|
|
2532
|
+
}
|
|
2533
|
+
this.setProfileName(this.profileName, this.nativeElement.firstChild);
|
|
2534
|
+
}
|
|
2535
|
+
addIcon() {
|
|
2536
|
+
const div = this.renderer.createElement('DIV');
|
|
2537
|
+
div.innerHTML = SVG_PROFILE_ICON;
|
|
2538
|
+
const svg = div.querySelector('svg');
|
|
2539
|
+
const titleNode = this.renderer.createElement('title', SVG_NAMESPACE);
|
|
2540
|
+
const titleText = this.renderer.createText(this.profileName);
|
|
2541
|
+
this.renderer.appendChild(titleNode, titleText);
|
|
2542
|
+
this.renderer.insertBefore(svg, titleNode, svg.firstChild);
|
|
2543
|
+
this.renderer.appendChild(this.nativeElement, svg);
|
|
2544
|
+
}
|
|
2545
|
+
setProfileName(name, content) {
|
|
2546
|
+
switch (content.nodeName) {
|
|
2547
|
+
case 'IMG':
|
|
2548
|
+
this.renderer.setAttribute(content, 'alt', name);
|
|
2549
|
+
break;
|
|
2550
|
+
case 'SPAN':
|
|
2551
|
+
this.renderer.setAttribute(content, 'aria-hidden', 'true');
|
|
2552
|
+
const screenReaderSpan = this.renderer.createElement('span');
|
|
2553
|
+
this.renderer.setProperty(screenReaderSpan, SPAN_TEXT_PROPERTY, name);
|
|
2554
|
+
this.renderer.addClass(screenReaderSpan, SCREEN_READER_CLASS_NAME);
|
|
2555
|
+
this.renderer.insertBefore(this.nativeElement, screenReaderSpan, content);
|
|
2556
|
+
break;
|
|
2557
|
+
}
|
|
2558
|
+
}
|
|
2559
|
+
formatInitials(content) {
|
|
2560
|
+
this.renderer.setValue(content.firstChild, content.firstChild.nodeValue.slice(0, 2));
|
|
2561
|
+
this.renderer.addClass(this.nativeElement, 'display-color');
|
|
2562
|
+
}
|
|
2563
|
+
}
|
|
2564
|
+
BaoAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2565
|
+
BaoAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoAvatarComponent, selector: "bao-avatar", inputs: { profileName: "profileName", color: "color" }, host: { properties: { "class.bao-avatar-color-1": "color === \"background-color-1\"", "class.bao-avatar-color-2": "color === \"background-color-2\"", "class.bao-avatar-color-3": "color === \"background-color-3\"", "class.bao-avatar-color-4": "color === \"background-color-4\"", "class.bao-avatar-color-5": "color === \"background-color-5\"", "class.bao-avatar-color-6": "color === \"background-color-6\"", "class.bao-avatar-color-7": "color === \"background-color-7\"", "class.bao-avatar-color-8": "color === \"background-color-8\"", "class.bao-avatar-color-9": "color === \"background-color-9\"", "class.bao-avatar-color-10": "color === \"background-color-10\"" }, classAttribute: "bao-avatar" }, ngImport: i0, template: "<ng-content select=\"bao-avatar-content, [bao-avatar-content]\"></ng-content>\n", styles: [".bao-avatar-color-1.display-color{background-color:#0380a9}.bao-avatar-color-2.display-color{background-color:#bd4f00}.bao-avatar-color-3.display-color{background-color:#448600}.bao-avatar-color-4.display-color{background-color:#dc00ac}.bao-avatar-color-5.display-color{background-color:#01866e}.bao-avatar-color-6.display-color{background-color:#e00}.bao-avatar-color-7.display-color{background-color:#980bad}.bao-avatar-color-8.display-color{background-color:#0057ff}.bao-avatar-color-9.display-color{background-color:#a36b00}.bao-avatar-color-10.display-color{background-color:#e0007c}.bao-avatar{display:inline-flex;justify-content:center;align-items:center;border:.0625rem solid transparent;width:1.5rem;height:1.5rem;border-radius:2rem}.bao-avatar>span.bao-avatar-content{font-weight:700;font-size:.875rem;line-height:1.25rem;text-transform:uppercase;color:#fff}.bao-avatar>img.bao-avatar-content{border-radius:2rem;max-width:100%}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
2566
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarComponent, decorators: [{
|
|
2567
|
+
type: Component,
|
|
2568
|
+
args: [{ selector: 'bao-avatar', encapsulation: ViewEncapsulation.None, host: {
|
|
2569
|
+
class: 'bao-avatar',
|
|
2570
|
+
'[class.bao-avatar-color-1]': 'color === "background-color-1"',
|
|
2571
|
+
'[class.bao-avatar-color-2]': 'color === "background-color-2"',
|
|
2572
|
+
'[class.bao-avatar-color-3]': 'color === "background-color-3"',
|
|
2573
|
+
'[class.bao-avatar-color-4]': 'color === "background-color-4"',
|
|
2574
|
+
'[class.bao-avatar-color-5]': 'color === "background-color-5"',
|
|
2575
|
+
'[class.bao-avatar-color-6]': 'color === "background-color-6"',
|
|
2576
|
+
'[class.bao-avatar-color-7]': 'color === "background-color-7"',
|
|
2577
|
+
'[class.bao-avatar-color-8]': 'color === "background-color-8"',
|
|
2578
|
+
'[class.bao-avatar-color-9]': 'color === "background-color-9"',
|
|
2579
|
+
'[class.bao-avatar-color-10]': 'color === "background-color-10"'
|
|
2580
|
+
}, template: "<ng-content select=\"bao-avatar-content, [bao-avatar-content]\"></ng-content>\n", styles: [".bao-avatar-color-1.display-color{background-color:#0380a9}.bao-avatar-color-2.display-color{background-color:#bd4f00}.bao-avatar-color-3.display-color{background-color:#448600}.bao-avatar-color-4.display-color{background-color:#dc00ac}.bao-avatar-color-5.display-color{background-color:#01866e}.bao-avatar-color-6.display-color{background-color:#e00}.bao-avatar-color-7.display-color{background-color:#980bad}.bao-avatar-color-8.display-color{background-color:#0057ff}.bao-avatar-color-9.display-color{background-color:#a36b00}.bao-avatar-color-10.display-color{background-color:#e0007c}.bao-avatar{display:inline-flex;justify-content:center;align-items:center;border:.0625rem solid transparent;width:1.5rem;height:1.5rem;border-radius:2rem}.bao-avatar>span.bao-avatar-content{font-weight:700;font-size:.875rem;line-height:1.25rem;text-transform:uppercase;color:#fff}.bao-avatar>img.bao-avatar-content{border-radius:2rem;max-width:100%}\n"] }]
|
|
2581
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { profileName: [{
|
|
2582
|
+
type: Input
|
|
2583
|
+
}], color: [{
|
|
2584
|
+
type: Input
|
|
2585
|
+
}] } });
|
|
2586
|
+
|
|
2587
|
+
/*
|
|
2588
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2589
|
+
* Licensed under the MIT license.
|
|
2590
|
+
* See LICENSE file in the project root for full license information.
|
|
2591
|
+
*/
|
|
2592
|
+
const AVATAR_DIRECTIVES = [BaoAvatarComponent, BaoAvatarContent];
|
|
2593
|
+
class BaoAvatarModule {
|
|
2594
|
+
}
|
|
2595
|
+
BaoAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2596
|
+
BaoAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarModule, declarations: [BaoAvatarComponent, BaoAvatarContent], imports: [CommonModule], exports: [BaoAvatarComponent, BaoAvatarContent] });
|
|
2597
|
+
BaoAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarModule, imports: [[CommonModule]] });
|
|
2598
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarModule, decorators: [{
|
|
2599
|
+
type: NgModule,
|
|
2600
|
+
args: [{
|
|
2601
|
+
imports: [CommonModule],
|
|
2602
|
+
declarations: [AVATAR_DIRECTIVES],
|
|
2603
|
+
exports: [AVATAR_DIRECTIVES]
|
|
2604
|
+
}]
|
|
2605
|
+
}] });
|
|
2606
|
+
|
|
2607
|
+
/*
|
|
2608
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2609
|
+
* Licensed under the MIT license.
|
|
2610
|
+
* See LICENSE file in the project root for full license information.
|
|
2611
|
+
*/
|
|
2612
|
+
|
|
2613
|
+
/*
|
|
2614
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2615
|
+
* Licensed under the MIT license.
|
|
2616
|
+
* See LICENSE file in the project root for full license information.
|
|
2617
|
+
*/
|
|
2618
|
+
/**
|
|
2619
|
+
* Unique number to generate a unique ID
|
|
2620
|
+
*/
|
|
2621
|
+
let tabsNextUniqueId = 0;
|
|
2622
|
+
class BaoTabHeader {
|
|
2623
|
+
constructor(renderer, elementRef) {
|
|
2624
|
+
this.renderer = renderer;
|
|
2625
|
+
this.elementRef = elementRef;
|
|
2626
|
+
/**
|
|
2627
|
+
* Emits its index when tab is clicked
|
|
2628
|
+
*/
|
|
2629
|
+
this.onTabClick = new EventEmitter();
|
|
2630
|
+
}
|
|
2631
|
+
get nativeElement() {
|
|
2632
|
+
return this.elementRef.nativeElement;
|
|
2633
|
+
}
|
|
2634
|
+
onClick(el) {
|
|
2635
|
+
const tabIndex = el.id.split('-')[el.id.split('-').length - 1];
|
|
2636
|
+
this.onTabClick.emit(tabIndex);
|
|
2637
|
+
}
|
|
2638
|
+
ngAfterViewInit() {
|
|
2639
|
+
this.renderer.setAttribute(this.nativeElement, 'role', 'tab');
|
|
2640
|
+
this.renderer.setAttribute(this.nativeElement, 'aria-selected', 'false');
|
|
2641
|
+
this.renderer.setAttribute(this.nativeElement, 'tabindex', '-1');
|
|
2642
|
+
}
|
|
2643
|
+
}
|
|
2644
|
+
BaoTabHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabHeader, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2645
|
+
BaoTabHeader.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaoTabHeader, selector: "bao-tab-header, [bao-tab-header]", outputs: { onTabClick: "onTabClick" }, host: { listeners: { "click": "onClick($event.target)" }, classAttribute: "bao-tab-header" }, exportAs: ["baoTabHeader"], ngImport: i0 });
|
|
2646
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabHeader, decorators: [{
|
|
2647
|
+
type: Directive,
|
|
2648
|
+
args: [{
|
|
2649
|
+
selector: 'bao-tab-header, [bao-tab-header]',
|
|
2650
|
+
exportAs: 'baoTabHeader',
|
|
2651
|
+
host: {
|
|
2652
|
+
class: 'bao-tab-header'
|
|
2653
|
+
}
|
|
2654
|
+
}]
|
|
2655
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { onTabClick: [{
|
|
2656
|
+
type: Output
|
|
2657
|
+
}], onClick: [{
|
|
2658
|
+
type: HostListener,
|
|
2659
|
+
args: ['click', ['$event.target']]
|
|
2660
|
+
}] } });
|
|
2661
|
+
class BaoTabPanel {
|
|
2662
|
+
constructor(renderer, elementRef) {
|
|
2663
|
+
this.renderer = renderer;
|
|
2664
|
+
this.elementRef = elementRef;
|
|
2665
|
+
}
|
|
2666
|
+
get nativeElement() {
|
|
2667
|
+
return this.elementRef.nativeElement;
|
|
2668
|
+
}
|
|
2669
|
+
ngAfterViewInit() {
|
|
2670
|
+
this.renderer.setAttribute(this.nativeElement, 'role', 'tabpanel');
|
|
2671
|
+
this.renderer.setAttribute(this.nativeElement, 'hidden', 'true');
|
|
2672
|
+
this.renderer.setAttribute(this.nativeElement, 'tabindex', '0');
|
|
2673
|
+
this.renderer.setAttribute(this.nativeElement, 'aria-expanded', 'false');
|
|
2674
|
+
}
|
|
2675
|
+
}
|
|
2676
|
+
BaoTabPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabPanel, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2677
|
+
BaoTabPanel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaoTabPanel, selector: "bao-panel, [bao-panel]", host: { classAttribute: "bao-panel" }, exportAs: ["baoPanel"], ngImport: i0 });
|
|
2678
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabPanel, decorators: [{
|
|
2679
|
+
type: Directive,
|
|
2680
|
+
args: [{
|
|
2681
|
+
selector: 'bao-panel, [bao-panel]',
|
|
2682
|
+
exportAs: 'baoPanel',
|
|
2683
|
+
host: {
|
|
2684
|
+
class: 'bao-panel'
|
|
2685
|
+
}
|
|
2686
|
+
}]
|
|
2687
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; } });
|
|
2688
|
+
class BaoTablistComponent {
|
|
2689
|
+
constructor(renderer, elementRef) {
|
|
2690
|
+
this.renderer = renderer;
|
|
2691
|
+
this.elementRef = elementRef;
|
|
2692
|
+
/**
|
|
2693
|
+
* Size of the tabs displayed
|
|
2694
|
+
*/
|
|
2695
|
+
this.size = 'large';
|
|
2696
|
+
/**
|
|
2697
|
+
* Optionnal value to be used as aria-label property on tablist component
|
|
2698
|
+
*/
|
|
2699
|
+
this.ariaLabel = 'onglets';
|
|
2700
|
+
/**
|
|
2701
|
+
* Emits the index of the new active tab
|
|
2702
|
+
*/
|
|
2703
|
+
this.activeTabChange = new EventEmitter();
|
|
2704
|
+
this.uniqueId = `bao-tablist-${tabsNextUniqueId++}`;
|
|
2705
|
+
}
|
|
2706
|
+
get nativeElement() {
|
|
2707
|
+
return this.elementRef.nativeElement;
|
|
2708
|
+
}
|
|
2709
|
+
get tabs() {
|
|
2710
|
+
return this.elementRef.nativeElement.children;
|
|
2711
|
+
}
|
|
2712
|
+
leftKeyEvent() {
|
|
2713
|
+
if (document.activeElement.parentElement.id === this.uniqueId) {
|
|
2714
|
+
this.activeTabIndex = this.getNextActivableTabIndex(parseInt(this.activeTabIndex), false);
|
|
2715
|
+
this.changeActiveTab(this.activeTabIndex, true);
|
|
2716
|
+
this.activeTabChange.emit(this.activeTabIndex);
|
|
2717
|
+
}
|
|
2718
|
+
}
|
|
2719
|
+
rightKeyEvent() {
|
|
2720
|
+
if (document.activeElement.parentElement.id === this.uniqueId) {
|
|
2721
|
+
this.activeTabIndex = this.getNextActivableTabIndex(parseInt(this.activeTabIndex), true);
|
|
2722
|
+
this.changeActiveTab(this.activeTabIndex, true);
|
|
2723
|
+
this.activeTabChange.emit(this.activeTabIndex);
|
|
2724
|
+
}
|
|
2725
|
+
}
|
|
2726
|
+
/**
|
|
2727
|
+
* Makes the focus visible on tab header when changing from mouse to keyboard navigation
|
|
2728
|
+
*/
|
|
2729
|
+
tabKeyEvent() {
|
|
2730
|
+
if (document.activeElement.parentElement.id === this.uniqueId) {
|
|
2731
|
+
this.renderer.addClass(this.tabs[this.activeTabIndex], 'focus-visible');
|
|
2732
|
+
}
|
|
2733
|
+
}
|
|
2734
|
+
/**
|
|
2735
|
+
* Makes the focus visible on tab header when changing from mouse to keyboard navigation
|
|
2736
|
+
*/
|
|
2737
|
+
tabShiftKeyEvent() {
|
|
2738
|
+
if (document.activeElement.parentElement.id === this.uniqueId) {
|
|
2739
|
+
this.renderer.addClass(this.tabs[this.activeTabIndex], 'focus-visible');
|
|
2740
|
+
}
|
|
2741
|
+
}
|
|
2742
|
+
ngAfterViewInit() {
|
|
2743
|
+
this.setTablistAttributes();
|
|
2744
|
+
if (this.nativeElement.childElementCount) {
|
|
2745
|
+
this.setInitialActiveTab();
|
|
2746
|
+
}
|
|
2747
|
+
}
|
|
2748
|
+
ngAfterContentInit() {
|
|
2749
|
+
this.tabHeaders.forEach((tab) => {
|
|
2750
|
+
tab.onTabClick.subscribe((index) => {
|
|
2751
|
+
this.renderer.removeClass(this.tabs[index], 'focus-visible');
|
|
2752
|
+
this.activeTabIndex = index;
|
|
2753
|
+
this.changeActiveTab(index, false);
|
|
2754
|
+
this.activeTabChange.emit(index);
|
|
2755
|
+
});
|
|
2756
|
+
});
|
|
2757
|
+
}
|
|
2758
|
+
ngOnDestroy() {
|
|
2759
|
+
this.tabHeaders.forEach((tab) => {
|
|
2760
|
+
tab.onTabClick.unsubscribe();
|
|
2761
|
+
});
|
|
2762
|
+
}
|
|
2763
|
+
setTablistAttributes() {
|
|
2764
|
+
this.renderer.setAttribute(this.nativeElement, 'role', 'tablist');
|
|
2765
|
+
this.renderer.setAttribute(this.nativeElement, 'aria-label', this.ariaLabel);
|
|
2766
|
+
this.renderer.setProperty(this.nativeElement, 'id', this.uniqueId);
|
|
2767
|
+
}
|
|
2768
|
+
setInitialActiveTab() {
|
|
2769
|
+
const firstTabIndex = Array.from(this.tabs).findIndex((tab) => !tab.attributes['disabled']);
|
|
2770
|
+
this.activeTabIndex = firstTabIndex.toString();
|
|
2771
|
+
this.renderer.setAttribute(this.tabs[firstTabIndex], 'aria-selected', 'true');
|
|
2772
|
+
this.renderer.addClass(this.tabs[firstTabIndex], 'active');
|
|
2773
|
+
this.renderer.addClass(this.tabs[firstTabIndex], 'focus-visible');
|
|
2774
|
+
this.renderer.removeAttribute(this.tabs[firstTabIndex], 'tabindex');
|
|
2775
|
+
}
|
|
2776
|
+
changeActiveTab(newActiveTabIndex, isFocusVisible) {
|
|
2777
|
+
Array.from(this.tabs).forEach((tab) => {
|
|
2778
|
+
if (tab.id === `bao-tab-${newActiveTabIndex}`) {
|
|
2779
|
+
if (isFocusVisible) {
|
|
2780
|
+
this.renderer.addClass(tab, 'focus-visible');
|
|
2781
|
+
}
|
|
2782
|
+
this.renderer.setAttribute(tab, 'aria-selected', 'true');
|
|
2783
|
+
this.renderer.addClass(tab, 'active');
|
|
2784
|
+
this.renderer.removeAttribute(tab, 'tabindex');
|
|
2785
|
+
tab.focus();
|
|
2786
|
+
}
|
|
2787
|
+
else {
|
|
2788
|
+
this.renderer.setAttribute(tab, 'aria-selected', 'false');
|
|
2789
|
+
this.renderer.removeClass(tab, 'active');
|
|
2790
|
+
this.renderer.setAttribute(tab, 'tabindex', '-1');
|
|
2791
|
+
this.renderer.removeClass(tab, 'focus-visible');
|
|
2792
|
+
}
|
|
2793
|
+
});
|
|
2794
|
+
}
|
|
2795
|
+
/**
|
|
2796
|
+
* Finds the next activable tab index when navigating with left and right arrow keys
|
|
2797
|
+
* @param currentIndex Tab index which currently has focus
|
|
2798
|
+
* @param isRight Whether the tab navigation is going in the right direction or not
|
|
2799
|
+
* @returns Index of the new tab that will receive focus
|
|
2800
|
+
*/
|
|
2801
|
+
getNextActivableTabIndex(currentIndex, isRight) {
|
|
2802
|
+
const nextIndex = isRight ? currentIndex + 1 : currentIndex - 1;
|
|
2803
|
+
const nextIndexInTablist = ((nextIndex % this.tabs.length) + this.tabs.length) % this.tabs.length;
|
|
2804
|
+
if (this.tabs[nextIndexInTablist].attributes['disabled']) {
|
|
2805
|
+
return this.getNextActivableTabIndex(nextIndexInTablist, isRight);
|
|
2806
|
+
}
|
|
2807
|
+
return nextIndexInTablist.toString();
|
|
2808
|
+
}
|
|
2809
|
+
}
|
|
2810
|
+
BaoTablistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTablistComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2811
|
+
BaoTablistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoTablistComponent, selector: "bao-tablist, [bao-tablist]", inputs: { size: "size", ariaLabel: "ariaLabel" }, outputs: { activeTabChange: "activeTabChange" }, host: { listeners: { "window:keydown.arrowleft": "leftKeyEvent()", "window:keydown.arrowright": "rightKeyEvent()", "window:keydown.tab": "tabKeyEvent()", "window:keydown.shift.tab": "tabShiftKeyEvent()" }, properties: { "class.bao-tablist-small": "size === \"small\"", "class.bao-tablist-medium": "size === \"medium\"", "class.bao-tablist-large": "size === \"large\"" }, classAttribute: "bao-tablist" }, queries: [{ propertyName: "tabHeaders", predicate: BaoTabHeader }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".bao-tablist{color:#637381;display:block;overflow:auto;white-space:nowrap;box-shadow:inset 0 -.125rem #ced4da}.bao-tablist.bao-tablist-small{font-weight:700;font-size:.75rem;line-height:1rem}.bao-tablist.bao-tablist-small>.bao-tab-header{padding:.5rem}.bao-tablist.bao-tablist-medium{font-weight:700;font-size:.875rem;line-height:1.25rem}.bao-tablist.bao-tablist-medium>.bao-tab-header{padding:.625rem 1rem}.bao-tablist.bao-tablist-large{font-weight:700;font-size:1rem;line-height:1.5rem}.bao-tablist.bao-tablist-large>.bao-tab-header{padding:1rem}.bao-tablist button{all:unset}.bao-tablist>.bao-tab-header:hover:not(:disabled){color:#097d6c;cursor:pointer;box-shadow:inset 0 -.125rem #097d6c}.bao-tablist>.bao-tab-header.active{color:#097d6c;box-shadow:inset 0 -.125rem #097d6c}.bao-tablist>.bao-tab-header:focus.focus-visible{box-shadow:inset 0 0 0 .1875rem #98bcde;color:#637381}.bao-tablist>.bao-tab-header:disabled{color:#adb2bd}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
2812
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTablistComponent, decorators: [{
|
|
2813
|
+
type: Component,
|
|
2814
|
+
args: [{ selector: 'bao-tablist, [bao-tablist]', encapsulation: ViewEncapsulation.None, host: {
|
|
2815
|
+
class: 'bao-tablist',
|
|
2816
|
+
'[class.bao-tablist-small]': 'size === "small"',
|
|
2817
|
+
'[class.bao-tablist-medium]': 'size === "medium"',
|
|
2818
|
+
'[class.bao-tablist-large]': 'size === "large"'
|
|
2819
|
+
}, template: "<ng-content></ng-content>\n", styles: [".bao-tablist{color:#637381;display:block;overflow:auto;white-space:nowrap;box-shadow:inset 0 -.125rem #ced4da}.bao-tablist.bao-tablist-small{font-weight:700;font-size:.75rem;line-height:1rem}.bao-tablist.bao-tablist-small>.bao-tab-header{padding:.5rem}.bao-tablist.bao-tablist-medium{font-weight:700;font-size:.875rem;line-height:1.25rem}.bao-tablist.bao-tablist-medium>.bao-tab-header{padding:.625rem 1rem}.bao-tablist.bao-tablist-large{font-weight:700;font-size:1rem;line-height:1.5rem}.bao-tablist.bao-tablist-large>.bao-tab-header{padding:1rem}.bao-tablist button{all:unset}.bao-tablist>.bao-tab-header:hover:not(:disabled){color:#097d6c;cursor:pointer;box-shadow:inset 0 -.125rem #097d6c}.bao-tablist>.bao-tab-header.active{color:#097d6c;box-shadow:inset 0 -.125rem #097d6c}.bao-tablist>.bao-tab-header:focus.focus-visible{box-shadow:inset 0 0 0 .1875rem #98bcde;color:#637381}.bao-tablist>.bao-tab-header:disabled{color:#adb2bd}\n"] }]
|
|
2820
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { tabHeaders: [{
|
|
2821
|
+
type: ContentChildren,
|
|
2822
|
+
args: [BaoTabHeader]
|
|
2823
|
+
}], size: [{
|
|
2824
|
+
type: Input
|
|
2825
|
+
}], ariaLabel: [{
|
|
2826
|
+
type: Input
|
|
2827
|
+
}], activeTabChange: [{
|
|
2828
|
+
type: Output
|
|
2829
|
+
}], leftKeyEvent: [{
|
|
2830
|
+
type: HostListener,
|
|
2831
|
+
args: ['window:keydown.arrowleft']
|
|
2832
|
+
}], rightKeyEvent: [{
|
|
2833
|
+
type: HostListener,
|
|
2834
|
+
args: ['window:keydown.arrowright']
|
|
2835
|
+
}], tabKeyEvent: [{
|
|
2836
|
+
type: HostListener,
|
|
2837
|
+
args: ['window:keydown.tab']
|
|
2838
|
+
}], tabShiftKeyEvent: [{
|
|
2839
|
+
type: HostListener,
|
|
2840
|
+
args: ['window:keydown.shift.tab']
|
|
2841
|
+
}] } });
|
|
2842
|
+
class BaoTabsContainer {
|
|
2843
|
+
constructor(renderer, elementRef) {
|
|
2844
|
+
this.renderer = renderer;
|
|
2845
|
+
this.elementRef = elementRef;
|
|
2846
|
+
this.panelIdPrefix = 'bao-panel-';
|
|
2847
|
+
this.tabIdPrefix = 'bao-tab-';
|
|
2848
|
+
}
|
|
2849
|
+
get tabs() {
|
|
2850
|
+
return this.elementRef.nativeElement.querySelector('.bao-tablist').children;
|
|
2851
|
+
}
|
|
2852
|
+
get panels() {
|
|
2853
|
+
return this.elementRef.nativeElement.querySelectorAll('.bao-panel');
|
|
2854
|
+
}
|
|
2855
|
+
ngAfterViewInit() {
|
|
2856
|
+
this.setInitialActivePanel();
|
|
2857
|
+
Array.from(this.tabs).forEach((tab, idx) => {
|
|
2858
|
+
const tabId = `${this.tabIdPrefix}${idx}`;
|
|
2859
|
+
const panelId = `${this.panelIdPrefix}${idx}`;
|
|
2860
|
+
this.renderer.setProperty(tab, 'id', tabId);
|
|
2861
|
+
this.renderer.setProperty(this.panels[idx], 'id', panelId);
|
|
2862
|
+
this.renderer.setAttribute(tab, 'aria-controls', panelId);
|
|
2863
|
+
this.renderer.setAttribute(this.panels[idx], 'aria-labelledby', tabId);
|
|
2864
|
+
});
|
|
2865
|
+
}
|
|
2866
|
+
ngAfterContentInit() {
|
|
2867
|
+
this.tablist.activeTabChange.subscribe((index) => this.changeActivePanel(index));
|
|
2868
|
+
}
|
|
2869
|
+
ngOnDestroy() {
|
|
2870
|
+
this.tablist.activeTabChange.unsubscribe();
|
|
2871
|
+
}
|
|
2872
|
+
setInitialActivePanel() {
|
|
2873
|
+
const firstTabIndex = Array.from(this.tabs).findIndex((tab) => !tab.attributes['disabled']);
|
|
2874
|
+
this.renderer.removeAttribute(this.panels[firstTabIndex], 'hidden');
|
|
2875
|
+
this.renderer.setAttribute(this.panels[firstTabIndex], 'aria-expanded', 'true');
|
|
2876
|
+
}
|
|
2877
|
+
changeActivePanel(newActiveId) {
|
|
2878
|
+
this.panels.forEach((panel) => {
|
|
2879
|
+
if (panel.id === `${this.panelIdPrefix}${newActiveId}`) {
|
|
2880
|
+
this.renderer.removeAttribute(panel, 'hidden');
|
|
2881
|
+
this.renderer.setAttribute(panel, 'aria-expanded', 'true');
|
|
2882
|
+
}
|
|
2883
|
+
else {
|
|
2884
|
+
this.renderer.setAttribute(panel, 'hidden', 'true');
|
|
2885
|
+
this.renderer.setAttribute(panel, 'aria-expanded', 'false');
|
|
2886
|
+
}
|
|
2887
|
+
});
|
|
2888
|
+
}
|
|
2889
|
+
}
|
|
2890
|
+
BaoTabsContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsContainer, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2891
|
+
BaoTabsContainer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaoTabsContainer, selector: "bao-tabs, [bao-tabs]", host: { classAttribute: "bao-tabs" }, queries: [{ propertyName: "tablist", first: true, predicate: BaoTablistComponent, descendants: true }], exportAs: ["baoTabs"], ngImport: i0 });
|
|
2892
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsContainer, decorators: [{
|
|
2893
|
+
type: Directive,
|
|
2894
|
+
args: [{
|
|
2895
|
+
selector: 'bao-tabs, [bao-tabs]',
|
|
2896
|
+
exportAs: 'baoTabs',
|
|
2897
|
+
host: {
|
|
2898
|
+
class: 'bao-tabs'
|
|
2899
|
+
}
|
|
2900
|
+
}]
|
|
2901
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { tablist: [{
|
|
2902
|
+
type: ContentChild,
|
|
2903
|
+
args: [BaoTablistComponent]
|
|
2904
|
+
}] } });
|
|
2905
|
+
|
|
2906
|
+
/*
|
|
2907
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2908
|
+
* Licensed under the MIT license.
|
|
2909
|
+
* See LICENSE file in the project root for full license information.
|
|
2910
|
+
*/
|
|
2911
|
+
const TABS_DIRECTIVES = [
|
|
2912
|
+
BaoTabsContainer,
|
|
2913
|
+
BaoTablistComponent,
|
|
2914
|
+
BaoTabHeader,
|
|
2915
|
+
BaoTabPanel
|
|
2916
|
+
];
|
|
2917
|
+
class BaoTabsModule {
|
|
2918
|
+
}
|
|
2919
|
+
BaoTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2920
|
+
BaoTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsModule, declarations: [BaoTabsContainer,
|
|
2921
|
+
BaoTablistComponent,
|
|
2922
|
+
BaoTabHeader,
|
|
2923
|
+
BaoTabPanel], imports: [CommonModule], exports: [BaoTabsContainer,
|
|
2924
|
+
BaoTablistComponent,
|
|
2925
|
+
BaoTabHeader,
|
|
2926
|
+
BaoTabPanel] });
|
|
2927
|
+
BaoTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsModule, imports: [[CommonModule]] });
|
|
2928
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsModule, decorators: [{
|
|
2929
|
+
type: NgModule,
|
|
2930
|
+
args: [{
|
|
2931
|
+
imports: [CommonModule],
|
|
2932
|
+
declarations: [TABS_DIRECTIVES],
|
|
2933
|
+
exports: [TABS_DIRECTIVES]
|
|
2934
|
+
}]
|
|
2935
|
+
}] });
|
|
2936
|
+
|
|
2937
|
+
/*
|
|
2938
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2939
|
+
* Licensed under the MIT license.
|
|
2940
|
+
* See LICENSE file in the project root for full license information.
|
|
2941
|
+
*/
|
|
2942
|
+
|
|
2943
|
+
/*
|
|
2944
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2945
|
+
* Licensed under the MIT license.
|
|
2946
|
+
* See LICENSE file in the project root for full license information.
|
|
2947
|
+
*/
|
|
2948
|
+
/**
|
|
2949
|
+
* Animations used by MatDialog.
|
|
2950
|
+
* @docs-private
|
|
2951
|
+
*/
|
|
2952
|
+
const baoModalAnimations = {
|
|
2953
|
+
/** Animation that is applied on the modal container by default. */
|
|
2954
|
+
modalContainer: trigger('modalContainer', [
|
|
2955
|
+
// Note: The `enter` animation transitions to `transform: none`, because for some reason
|
|
2956
|
+
// specifying the transform explicitly, causes IE both to blur the modal content and
|
|
2957
|
+
// decimate the animation performance. Leaving it as `none` solves both issues.
|
|
2958
|
+
state('void, exit', style({ opacity: 0, transform: 'scale(0.7)' })),
|
|
2959
|
+
state('enter', style({ transform: 'none' })),
|
|
2960
|
+
transition('* => enter', group([
|
|
2961
|
+
animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'none', opacity: 1 })),
|
|
2962
|
+
query('@*', animateChild(), { optional: true })
|
|
2963
|
+
])),
|
|
2964
|
+
transition('* => void, * => exit', group([
|
|
2965
|
+
animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 0 })),
|
|
2966
|
+
query('@*', animateChild(), { optional: true })
|
|
2967
|
+
]))
|
|
2968
|
+
])
|
|
2969
|
+
};
|
|
2970
|
+
|
|
2971
|
+
/*
|
|
2972
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2973
|
+
* Licensed under the MIT license.
|
|
2974
|
+
* See LICENSE file in the project root for full license information.
|
|
2975
|
+
*/
|
|
2976
|
+
var eModalDesktopWidthSize;
|
|
2977
|
+
(function (eModalDesktopWidthSize) {
|
|
2978
|
+
eModalDesktopWidthSize["SMALL"] = "bao-modal-sm";
|
|
2979
|
+
eModalDesktopWidthSize["MEDIUM"] = "bao-modal-md";
|
|
2980
|
+
eModalDesktopWidthSize["LARGE"] = "bao-modal-lg"; // Full width minus 32px (global margin : left and rigth)
|
|
2981
|
+
})(eModalDesktopWidthSize || (eModalDesktopWidthSize = {}));
|
|
2982
|
+
var eModalMobileWidthSize;
|
|
2983
|
+
(function (eModalMobileWidthSize) {
|
|
2984
|
+
eModalMobileWidthSize["FULL"] = "bao-modal-mobil-full";
|
|
2985
|
+
eModalMobileWidthSize["COMPACT"] = "bao-modal-mobil-compact"; // 300px
|
|
2986
|
+
})(eModalMobileWidthSize || (eModalMobileWidthSize = {}));
|
|
2987
|
+
/**
|
|
2988
|
+
* Configuration for opening a modal dialog with the BaoModal service.
|
|
2989
|
+
*/
|
|
2990
|
+
class BaoModalInitialConfig {
|
|
2991
|
+
constructor() {
|
|
2992
|
+
/** The ARIA role of the dialog element. */
|
|
2993
|
+
this.role = 'dialog';
|
|
2994
|
+
/** Custom class for the overlay pane. */
|
|
2995
|
+
this.panelClass = '';
|
|
2996
|
+
/** Whether the dialog has a backdrop. */
|
|
2997
|
+
this.hasBackdrop = true;
|
|
2998
|
+
/** Custom class for the backdrop. */
|
|
2999
|
+
this.backdropClass = '';
|
|
3000
|
+
/** Whether the user can use escape or clicking on the backdrop to close the modal. */
|
|
3001
|
+
this.disableClose = false;
|
|
3002
|
+
/** Width of the dialog. */
|
|
3003
|
+
this.width = '';
|
|
3004
|
+
/** Height of the dialog. */
|
|
3005
|
+
this.height = '';
|
|
3006
|
+
/** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */
|
|
3007
|
+
this.maxWidth = '80vw';
|
|
3008
|
+
/** Data being injected into the child component. */
|
|
3009
|
+
this.data = null;
|
|
3010
|
+
/** ID of the element that describes the dialog. */
|
|
3011
|
+
this.ariaDescribedBy = null;
|
|
3012
|
+
/** ID of the element that labels the dialog. */
|
|
3013
|
+
this.ariaLabelledBy = null;
|
|
3014
|
+
/** Aria label to assign to the dialog element. */
|
|
3015
|
+
this.ariaLabel = null;
|
|
3016
|
+
/**
|
|
3017
|
+
* Where the dialog should focus on open.
|
|
3018
|
+
*/
|
|
3019
|
+
this.autoFocus = 'first-tabbable';
|
|
3020
|
+
/**
|
|
3021
|
+
* Whether the dialog should restore focus to the
|
|
3022
|
+
* previously-focused element, after it's closed.
|
|
3023
|
+
*/
|
|
3024
|
+
this.restoreFocus = true;
|
|
3025
|
+
/** Whether to wait for the opening animation to finish before trapping focus. */
|
|
3026
|
+
this.delayFocusTrap = true;
|
|
3027
|
+
/**
|
|
3028
|
+
* Whether the dialog should close when the user goes backwards/forwards in history.
|
|
3029
|
+
* Note that this usually doesn't include clicking on links (unless the user is using
|
|
3030
|
+
* the `HashLocationStrategy`).
|
|
3031
|
+
*/
|
|
3032
|
+
this.closeOnNavigation = true;
|
|
3033
|
+
}
|
|
3034
|
+
}
|
|
3035
|
+
|
|
3036
|
+
/**
|
|
3037
|
+
* Throws an exception for the case when a ComponentPortal is
|
|
3038
|
+
* attached to a DomPortalOutlet without an origin.
|
|
3039
|
+
* @docs-private
|
|
3040
|
+
*/
|
|
3041
|
+
function throwBaoModalContentAlreadyAttachedError() {
|
|
3042
|
+
throw Error('Attempting to attach modal content after content is already attached');
|
|
3043
|
+
}
|
|
3044
|
+
/**
|
|
3045
|
+
* Base class for the `BaoModalContainer`. The base class does not implement
|
|
3046
|
+
* animations as these are left to implementers of the modal container.
|
|
3047
|
+
*/
|
|
3048
|
+
class _BaoModalContainerBase extends BasePortalOutlet {
|
|
3049
|
+
constructor(_elementRef, _focusTrapFactory, _changeDetectorRef, _document,
|
|
3050
|
+
/** The modal configuration. */
|
|
3051
|
+
_config, _interactivityChecker, _ngZone, _focusMonitor) {
|
|
3052
|
+
super();
|
|
3053
|
+
this._elementRef = _elementRef;
|
|
3054
|
+
this._focusTrapFactory = _focusTrapFactory;
|
|
3055
|
+
this._changeDetectorRef = _changeDetectorRef;
|
|
3056
|
+
this._config = _config;
|
|
3057
|
+
this._interactivityChecker = _interactivityChecker;
|
|
3058
|
+
this._ngZone = _ngZone;
|
|
3059
|
+
this._focusMonitor = _focusMonitor;
|
|
3060
|
+
/** Emits when an animation state changes. */
|
|
3061
|
+
this._animationStateChanged = new EventEmitter();
|
|
3062
|
+
/**
|
|
3063
|
+
* Type of interaction that led to the modal being closed. This is used to determine
|
|
3064
|
+
* whether the focus style will be applied when returning focus to its original location
|
|
3065
|
+
* after the modal is closed.
|
|
3066
|
+
*/
|
|
3067
|
+
this._closeInteractionType = null;
|
|
3068
|
+
/** Element that was focused before the modal was opened. Save this to restore upon close. */
|
|
3069
|
+
this._elementFocusedBeforeDialogWasOpened = null;
|
|
3070
|
+
this._ariaLabelledBy = _config.ariaLabelledBy || null;
|
|
3071
|
+
this._document = _document;
|
|
3072
|
+
}
|
|
3073
|
+
/** Initializes the modal container with the attached content. */
|
|
3074
|
+
_initializeWithAttachedContent() {
|
|
3075
|
+
this._setupFocusTrap();
|
|
3076
|
+
// Save the previously focused element. This element will be re-focused
|
|
3077
|
+
// when the modal closes.
|
|
3078
|
+
this._capturePreviouslyFocusedElement();
|
|
3079
|
+
}
|
|
3080
|
+
/**
|
|
3081
|
+
* Attach a ComponentPortal as content to this modal container.
|
|
3082
|
+
*/
|
|
3083
|
+
attachComponentPortal(portal) {
|
|
3084
|
+
return this._portalOutlet.attachComponentPortal(portal);
|
|
3085
|
+
}
|
|
3086
|
+
/**
|
|
3087
|
+
* Attach a TemplatePortal as content to this modal container.
|
|
3088
|
+
*/
|
|
3089
|
+
attachTemplatePortal(portal) {
|
|
3090
|
+
return this._portalOutlet.attachTemplatePortal(portal);
|
|
3091
|
+
}
|
|
3092
|
+
/** Moves focus back into the modal if it was moved out. */
|
|
3093
|
+
_recaptureFocus() {
|
|
3094
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
3095
|
+
if (!this._containsFocus()) {
|
|
3096
|
+
yield this._trapFocus();
|
|
3097
|
+
}
|
|
3098
|
+
});
|
|
3099
|
+
}
|
|
3100
|
+
/**
|
|
3101
|
+
* Moves the focus inside the focus trap. When autoFocus is not set to 'modal', if focus
|
|
3102
|
+
* cannot be moved then focus will go to the modal container.
|
|
3103
|
+
*/
|
|
3104
|
+
_trapFocus() {
|
|
3105
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
3106
|
+
const element = this._elementRef.nativeElement;
|
|
3107
|
+
// If were to attempt to focus immediately, then the content of the modal would not yet be
|
|
3108
|
+
// ready in instances where change detection has to run first. To deal with this, we simply
|
|
3109
|
+
// wait for the microtask queue to be empty when setting focus when autoFocus isn't set to
|
|
3110
|
+
// modal. If the element inside the modal can't be focused, then the container is focused
|
|
3111
|
+
// so the user can't tab into other elements behind it.
|
|
3112
|
+
switch (this._config.autoFocus) {
|
|
3113
|
+
case 'modal':
|
|
3114
|
+
// Ensure that focus is on the modal container. It's possible that a different
|
|
3115
|
+
// component tried to move focus while the open animation was running. See:
|
|
3116
|
+
// https://github.com/angular/components/issues/16215. Note that we only want to do this
|
|
3117
|
+
// if the focus isn't inside the modal already, because it's possible that the consumer
|
|
3118
|
+
// turned off `autoFocus` in order to move focus themselves.
|
|
3119
|
+
if (!this._containsFocus()) {
|
|
3120
|
+
element.focus();
|
|
3121
|
+
}
|
|
3122
|
+
break;
|
|
3123
|
+
case 'first-tabbable':
|
|
3124
|
+
// If we weren't able to find a focusable element in the modal, then focus the modal
|
|
3125
|
+
// container instead.
|
|
3126
|
+
const focusedSuccessfully = yield this._focusTrap.focusInitialElementWhenReady();
|
|
3127
|
+
if (!focusedSuccessfully) {
|
|
3128
|
+
this._focusDialogContainer();
|
|
3129
|
+
}
|
|
3130
|
+
break;
|
|
3131
|
+
case 'first-heading':
|
|
3132
|
+
this._focusByCssSelector('h1, h2, h3, h4, h5, h6, [role="heading"]');
|
|
3133
|
+
break;
|
|
3134
|
+
default:
|
|
3135
|
+
this._focusByCssSelector(this._config.autoFocus);
|
|
3136
|
+
break;
|
|
3137
|
+
}
|
|
3138
|
+
});
|
|
3139
|
+
}
|
|
3140
|
+
/** Restores focus to the element that was focused before the modal opened. */
|
|
3141
|
+
_restoreFocus() {
|
|
3142
|
+
const previousElement = this._elementFocusedBeforeDialogWasOpened;
|
|
3143
|
+
// We need the extra check, because IE can set the `activeElement` to null in some cases.
|
|
3144
|
+
if (this._config.restoreFocus &&
|
|
3145
|
+
previousElement &&
|
|
3146
|
+
typeof previousElement.focus === 'function') {
|
|
3147
|
+
const activeElement = _getFocusedElementPierceShadowDom();
|
|
3148
|
+
const element = this._elementRef.nativeElement;
|
|
3149
|
+
// Make sure that focus is still inside the modal or is on the body (usually because a
|
|
3150
|
+
// non-focusable element like the backdrop was clicked) before moving it. It's possible that
|
|
3151
|
+
// the consumer moved it themselves before the animation was done, in which case we shouldn't
|
|
3152
|
+
// do anything.
|
|
3153
|
+
if (!activeElement ||
|
|
3154
|
+
activeElement === this._document.body ||
|
|
3155
|
+
activeElement === element ||
|
|
3156
|
+
element.contains(activeElement)) {
|
|
3157
|
+
if (this._focusMonitor) {
|
|
3158
|
+
this._focusMonitor.focusVia(previousElement, this._closeInteractionType);
|
|
3159
|
+
this._closeInteractionType = null;
|
|
3160
|
+
}
|
|
3161
|
+
else {
|
|
3162
|
+
previousElement.focus();
|
|
3163
|
+
}
|
|
3164
|
+
}
|
|
3165
|
+
}
|
|
3166
|
+
if (this._focusTrap) {
|
|
3167
|
+
this._focusTrap.destroy();
|
|
3168
|
+
}
|
|
3169
|
+
}
|
|
3170
|
+
/**
|
|
3171
|
+
* Focuses the provided element. If the element is not focusable, it will add a tabIndex
|
|
3172
|
+
* attribute to forcefully focus it. The attribute is removed after focus is moved.
|
|
3173
|
+
*/
|
|
3174
|
+
_forceFocus(element, options) {
|
|
3175
|
+
if (!this._interactivityChecker.isFocusable(element)) {
|
|
3176
|
+
element.tabIndex = -1;
|
|
3177
|
+
// The tabindex attribute should be removed to avoid navigating to that element again
|
|
3178
|
+
this._ngZone.runOutsideAngular(() => {
|
|
3179
|
+
element.addEventListener('blur', () => element.removeAttribute('tabindex'));
|
|
3180
|
+
element.addEventListener('mousedown', () => element.removeAttribute('tabindex'));
|
|
3181
|
+
});
|
|
3182
|
+
}
|
|
3183
|
+
element.focus(options);
|
|
3184
|
+
}
|
|
3185
|
+
/**
|
|
3186
|
+
* Focuses the first element that matches the given selector within the focus trap.
|
|
3187
|
+
*/
|
|
3188
|
+
_focusByCssSelector(selector, options) {
|
|
3189
|
+
const elementToFocus = this._elementRef.nativeElement.querySelector(selector);
|
|
3190
|
+
if (elementToFocus) {
|
|
3191
|
+
this._forceFocus(elementToFocus, options);
|
|
3192
|
+
}
|
|
3193
|
+
}
|
|
3194
|
+
/** Sets up the focus trap. */
|
|
3195
|
+
_setupFocusTrap() {
|
|
3196
|
+
this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
|
|
3197
|
+
}
|
|
3198
|
+
/** Captures the element that was focused before the modal was opened. */
|
|
3199
|
+
_capturePreviouslyFocusedElement() {
|
|
3200
|
+
if (this._document) {
|
|
3201
|
+
this._elementFocusedBeforeDialogWasOpened =
|
|
3202
|
+
_getFocusedElementPierceShadowDom();
|
|
3203
|
+
}
|
|
3204
|
+
}
|
|
3205
|
+
/** Focuses the modal container. */
|
|
3206
|
+
_focusDialogContainer() {
|
|
3207
|
+
// Note that there is no focus method when rendering on the server.
|
|
3208
|
+
if (this._elementRef.nativeElement.focus) {
|
|
3209
|
+
this._elementRef.nativeElement.focus();
|
|
3210
|
+
}
|
|
3211
|
+
}
|
|
3212
|
+
/** Returns whether focus is inside the modal. */
|
|
3213
|
+
_containsFocus() {
|
|
3214
|
+
const element = this._elementRef.nativeElement;
|
|
3215
|
+
const activeElement = _getFocusedElementPierceShadowDom();
|
|
3216
|
+
return element === activeElement || element.contains(activeElement);
|
|
3217
|
+
}
|
|
3218
|
+
}
|
|
3219
|
+
_BaoModalContainerBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: _BaoModalContainerBase, deps: [{ token: i0.ElementRef }, { token: i1$3.ConfigurableFocusTrapFactory }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT, optional: true }, { token: BaoModalInitialConfig }, { token: i1$3.InteractivityChecker }, { token: i0.NgZone }, { token: i1$3.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3220
|
+
_BaoModalContainerBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: _BaoModalContainerBase, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
|
|
3221
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: _BaoModalContainerBase, decorators: [{
|
|
3222
|
+
type: Directive
|
|
3223
|
+
}], ctorParameters: function () {
|
|
3224
|
+
return [{ type: i0.ElementRef }, { type: i1$3.ConfigurableFocusTrapFactory }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
3225
|
+
type: Optional
|
|
3226
|
+
}, {
|
|
3227
|
+
type: Inject,
|
|
3228
|
+
args: [DOCUMENT]
|
|
3229
|
+
}] }, { type: BaoModalInitialConfig }, { type: i1$3.InteractivityChecker }, { type: i0.NgZone }, { type: i1$3.FocusMonitor }];
|
|
3230
|
+
}, propDecorators: { _portalOutlet: [{
|
|
3231
|
+
type: ViewChild,
|
|
3232
|
+
args: [CdkPortalOutlet, { static: true }]
|
|
3233
|
+
}] } });
|
|
3234
|
+
class BaoModalContainer extends _BaoModalContainerBase {
|
|
3235
|
+
constructor() {
|
|
3236
|
+
super(...arguments);
|
|
3237
|
+
/** State of the modal animation. */
|
|
3238
|
+
this._state = 'enter';
|
|
3239
|
+
}
|
|
3240
|
+
/** Callback, invoked whenever an animation on the host completes. */
|
|
3241
|
+
_onAnimationDone({ toState, totalTime }) {
|
|
3242
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
3243
|
+
if (toState === 'enter') {
|
|
3244
|
+
yield this._trapFocus();
|
|
3245
|
+
this._animationStateChanged.next({ state: 'opened', totalTime });
|
|
3246
|
+
}
|
|
3247
|
+
else if (toState === 'exit') {
|
|
3248
|
+
this._restoreFocus();
|
|
3249
|
+
this._animationStateChanged.next({ state: 'closed', totalTime });
|
|
3250
|
+
}
|
|
3251
|
+
});
|
|
3252
|
+
}
|
|
3253
|
+
/** Callback, invoked when an animation on the host starts. */
|
|
3254
|
+
_onAnimationStart({ toState, totalTime }) {
|
|
3255
|
+
if (toState === 'enter') {
|
|
3256
|
+
this._animationStateChanged.next({ state: 'opening', totalTime });
|
|
3257
|
+
}
|
|
3258
|
+
else if (toState === 'exit' || toState === 'void') {
|
|
3259
|
+
this._animationStateChanged.next({ state: 'closing', totalTime });
|
|
3260
|
+
}
|
|
3261
|
+
}
|
|
3262
|
+
/** Starts the modal exit animation. */
|
|
3263
|
+
_startExitAnimation() {
|
|
3264
|
+
this._state = 'exit';
|
|
3265
|
+
// Mark the container for check so it can react if the
|
|
3266
|
+
// view container is using OnPush change detection.
|
|
3267
|
+
this._changeDetectorRef.markForCheck();
|
|
3268
|
+
}
|
|
3269
|
+
}
|
|
3270
|
+
BaoModalContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalContainer, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3271
|
+
BaoModalContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoModalContainer, selector: "bao-modal-container", host: { attributes: { "tabindex": "-1", "aria-modal": "true" }, listeners: { "@modalContainer.start": "_onAnimationStart($event)", "@modalContainer.done": "_onAnimationDone($event)" }, properties: { "id": "_id", "attr.role": "_config.role", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledBy", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null", "@modalContainer": "_state" }, classAttribute: "bao-modal-container" }, usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: [".bao-container{padding-right:16px;padding-left:16px;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.bao-container{max-width:576px}}@media (min-width: 768px){.bao-container{max-width:768px}}@media (min-width: 992px){.bao-container{max-width:992px}}@media (min-width: 1200px){.bao-container{max-width:1200px}}.bao-row{display:flex;flex-wrap:wrap;margin-right:-16px;margin-left:-16px}.bao-col-12,.bao-col-lg-7{position:relative;width:100%;padding-right:1rem;padding-left:1rem}@media (min-width: 992px){.bao-col-lg-7{flex:0 0 58.33333%;max-width:58.33333%}}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex}.cdk-overlay-pane.bao-modal-mobil-full{width:100%;height:100%}.cdk-overlay-pane.bao-modal-mobil-compact{width:300px;height:100%}@media (min-width: 768px){.cdk-overlay-pane{width:500px;height:auto}.cdk-overlay-pane.bao-modal-lg{width:calc(100% - 4rem);height:calc(100% - 4rem)}.cdk-overlay-pane.bao-modal-md,.cdk-overlay-pane.bao-modal-sm{width:500px;height:auto}}@media (min-width: 992px){.cdk-overlay-pane{width:500px;height:auto}.cdk-overlay-pane.bao-modal-lg{width:calc(100% - 4rem);height:calc(100% - 4rem)}.cdk-overlay-pane.bao-modal-md{width:800px;height:auto}.cdk-overlay-pane.bao-modal-sm{width:500px;height:auto}}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:black}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.bao-modal-container{display:block;overflow:auto;width:100%;height:100%;min-height:inherit;max-height:inherit;background-color:#fff;background-clip:padding-box;border:0 solid rgba(0,0,0,.2);border-radius:.5rem;outline:0}.bao-modal-content{display:flex;flex-direction:column;height:100%}.bao-modal-header{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #ced4da;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.bao-modal-header .bao-modal-title{font-size:1rem;line-height:1.5rem;margin:1rem 0 1rem 1rem}.bao-modal-header button{margin:.5rem}.bao-modal-body{display:block;padding:1rem;overflow:auto;flex-grow:1}@media (min-width: 768px){.bao-modal-body{padding:2rem}}.bao-modal-footer{display:flex;flex-wrap:wrap;padding:1rem;border-top:1px solid #ced4da;border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.bao-modal-footer.bao-modal-footer-order{justify-content:unset;flex-direction:column-reverse}.bao-modal-footer button{text-align:center}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:100%;display:block}.bao-modal-footer .bao-button-secondary{margin-bottom:.5rem}.bao-modal-footer .bao-button-tertiary{display:none}@media (min-width: 768px){.bao-modal-footer{justify-content:flex-end}.bao-modal-footer.bao-modal-footer-order{flex-direction:row-reverse}.bao-modal-footer .bao-button-primary{margin-left:1rem}.bao-modal-footer .bao-button-secondary{margin-bottom:0}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:auto}.bao-modal-footer .bao-button-tertiary{display:block}}\n"], directives: [{ type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [baoModalAnimations.modalContainer], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
3272
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalContainer, decorators: [{
|
|
3273
|
+
type: Component,
|
|
3274
|
+
args: [{ selector: 'bao-modal-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, animations: [baoModalAnimations.modalContainer], host: {
|
|
3275
|
+
class: 'bao-modal-container',
|
|
3276
|
+
tabindex: '-1',
|
|
3277
|
+
'aria-modal': 'true',
|
|
3278
|
+
'[id]': '_id',
|
|
3279
|
+
'[attr.role]': '_config.role',
|
|
3280
|
+
'[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
|
|
3281
|
+
'[attr.aria-label]': '_config.ariaLabel',
|
|
3282
|
+
'[attr.aria-describedby]': '_config.ariaDescribedBy || null',
|
|
3283
|
+
'[@modalContainer]': '_state',
|
|
3284
|
+
'(@modalContainer.start)': '_onAnimationStart($event)',
|
|
3285
|
+
'(@modalContainer.done)': '_onAnimationDone($event)'
|
|
3286
|
+
}, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: [".bao-container{padding-right:16px;padding-left:16px;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.bao-container{max-width:576px}}@media (min-width: 768px){.bao-container{max-width:768px}}@media (min-width: 992px){.bao-container{max-width:992px}}@media (min-width: 1200px){.bao-container{max-width:1200px}}.bao-row{display:flex;flex-wrap:wrap;margin-right:-16px;margin-left:-16px}.bao-col-12,.bao-col-lg-7{position:relative;width:100%;padding-right:1rem;padding-left:1rem}@media (min-width: 992px){.bao-col-lg-7{flex:0 0 58.33333%;max-width:58.33333%}}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex}.cdk-overlay-pane.bao-modal-mobil-full{width:100%;height:100%}.cdk-overlay-pane.bao-modal-mobil-compact{width:300px;height:100%}@media (min-width: 768px){.cdk-overlay-pane{width:500px;height:auto}.cdk-overlay-pane.bao-modal-lg{width:calc(100% - 4rem);height:calc(100% - 4rem)}.cdk-overlay-pane.bao-modal-md,.cdk-overlay-pane.bao-modal-sm{width:500px;height:auto}}@media (min-width: 992px){.cdk-overlay-pane{width:500px;height:auto}.cdk-overlay-pane.bao-modal-lg{width:calc(100% - 4rem);height:calc(100% - 4rem)}.cdk-overlay-pane.bao-modal-md{width:800px;height:auto}.cdk-overlay-pane.bao-modal-sm{width:500px;height:auto}}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:black}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.bao-modal-container{display:block;overflow:auto;width:100%;height:100%;min-height:inherit;max-height:inherit;background-color:#fff;background-clip:padding-box;border:0 solid rgba(0,0,0,.2);border-radius:.5rem;outline:0}.bao-modal-content{display:flex;flex-direction:column;height:100%}.bao-modal-header{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #ced4da;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.bao-modal-header .bao-modal-title{font-size:1rem;line-height:1.5rem;margin:1rem 0 1rem 1rem}.bao-modal-header button{margin:.5rem}.bao-modal-body{display:block;padding:1rem;overflow:auto;flex-grow:1}@media (min-width: 768px){.bao-modal-body{padding:2rem}}.bao-modal-footer{display:flex;flex-wrap:wrap;padding:1rem;border-top:1px solid #ced4da;border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.bao-modal-footer.bao-modal-footer-order{justify-content:unset;flex-direction:column-reverse}.bao-modal-footer button{text-align:center}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:100%;display:block}.bao-modal-footer .bao-button-secondary{margin-bottom:.5rem}.bao-modal-footer .bao-button-tertiary{display:none}@media (min-width: 768px){.bao-modal-footer{justify-content:flex-end}.bao-modal-footer.bao-modal-footer-order{flex-direction:row-reverse}.bao-modal-footer .bao-button-primary{margin-left:1rem}.bao-modal-footer .bao-button-secondary{margin-bottom:0}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:auto}.bao-modal-footer .bao-button-tertiary{display:block}}\n"] }]
|
|
3287
|
+
}] });
|
|
3288
|
+
|
|
3289
|
+
// Counter for unique modal ids.
|
|
3290
|
+
let uniqueId = 0;
|
|
3291
|
+
/**
|
|
3292
|
+
* Reference to a modal opened via the BaoModalService.
|
|
3293
|
+
*/
|
|
3294
|
+
class BaoModalRef {
|
|
3295
|
+
constructor(_overlayRef, _containerInstance,
|
|
3296
|
+
/** Id of the modal. */
|
|
3297
|
+
id = `bao-modal-${uniqueId++}`) {
|
|
3298
|
+
this._overlayRef = _overlayRef;
|
|
3299
|
+
this._containerInstance = _containerInstance;
|
|
3300
|
+
this.id = id;
|
|
3301
|
+
/** Whether the user is allowed to close the modal. */
|
|
3302
|
+
this.disableClose = this._containerInstance._config.disableClose;
|
|
3303
|
+
/** Subject for notifying the user that the modal has finished opening. */
|
|
3304
|
+
this._afterOpened = new Subject();
|
|
3305
|
+
/** Subject for notifying the user that the modal has finished closing. */
|
|
3306
|
+
this._afterClosed = new Subject();
|
|
3307
|
+
/** Subject for notifying the user that the modal has started closing. */
|
|
3308
|
+
this._beforeClosed = new Subject();
|
|
3309
|
+
/** Current state of the modal. */
|
|
3310
|
+
this._state = 0 /* OPEN */;
|
|
3311
|
+
// Pass the id along to the container.
|
|
3312
|
+
_containerInstance._id = id;
|
|
3313
|
+
// Emit when opening animation completes
|
|
3314
|
+
_containerInstance._animationStateChanged
|
|
3315
|
+
.pipe(filter(event => event.state === 'opened'), take(1))
|
|
3316
|
+
.subscribe(() => {
|
|
3317
|
+
this._afterOpened.next();
|
|
3318
|
+
this._afterOpened.complete();
|
|
3319
|
+
});
|
|
3320
|
+
// Dispose overlay when closing animation is complete
|
|
3321
|
+
_containerInstance._animationStateChanged
|
|
3322
|
+
.pipe(filter(event => event.state === 'closed'), take(1))
|
|
3323
|
+
.subscribe(() => {
|
|
3324
|
+
clearTimeout(this._closeFallbackTimeout);
|
|
3325
|
+
this._finishModalClose();
|
|
3326
|
+
});
|
|
3327
|
+
_overlayRef.detachments().subscribe(() => {
|
|
3328
|
+
this._beforeClosed.next(this._result);
|
|
3329
|
+
this._beforeClosed.complete();
|
|
3330
|
+
this._afterClosed.next(this._result);
|
|
3331
|
+
this._afterClosed.complete();
|
|
3332
|
+
this.componentInstance = null;
|
|
3333
|
+
this._overlayRef.dispose();
|
|
3334
|
+
});
|
|
3335
|
+
_overlayRef
|
|
3336
|
+
.keydownEvents()
|
|
3337
|
+
.pipe(filter(event => {
|
|
3338
|
+
return (event.keyCode === ESCAPE &&
|
|
3339
|
+
!this.disableClose &&
|
|
3340
|
+
!hasModifierKey(event));
|
|
3341
|
+
}))
|
|
3342
|
+
.subscribe(event => {
|
|
3343
|
+
event.preventDefault();
|
|
3344
|
+
_closeModalVia(this, 'keyboard');
|
|
3345
|
+
});
|
|
3346
|
+
_overlayRef.backdropClick().subscribe(() => __awaiter(this, void 0, void 0, function* () {
|
|
3347
|
+
if (this.disableClose) {
|
|
3348
|
+
yield this._containerInstance._recaptureFocus();
|
|
3349
|
+
}
|
|
3350
|
+
else {
|
|
3351
|
+
_closeModalVia(this, 'mouse');
|
|
3352
|
+
}
|
|
3353
|
+
}));
|
|
3354
|
+
}
|
|
3355
|
+
/**
|
|
3356
|
+
* Close the modal.
|
|
3357
|
+
* @param modalResult Optional result to return to the modal opener.
|
|
3358
|
+
*/
|
|
3359
|
+
close(modalResult) {
|
|
3360
|
+
this._result = modalResult;
|
|
3361
|
+
// Transition the backdrop in parallel to the modal.
|
|
3362
|
+
this._containerInstance._animationStateChanged
|
|
3363
|
+
.pipe(filter(event => event.state === 'closing'), take(1))
|
|
3364
|
+
.subscribe(event => {
|
|
3365
|
+
this._beforeClosed.next(modalResult);
|
|
3366
|
+
this._beforeClosed.complete();
|
|
3367
|
+
this._overlayRef.detachBackdrop();
|
|
3368
|
+
// The logic that disposes of the overlay depends on the exit animation completing, however
|
|
3369
|
+
// it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback
|
|
3370
|
+
// timeout which will clean everything up if the animation hasn't fired within the specified
|
|
3371
|
+
// amount of time plus 100ms. We don't need to run this outside the NgZone, because for the
|
|
3372
|
+
// vast majority of cases the timeout will have been cleared before it has the chance to fire.
|
|
3373
|
+
this._closeFallbackTimeout = setTimeout(() => this._finishModalClose(), event.totalTime + 100);
|
|
3374
|
+
});
|
|
3375
|
+
this._state = 1 /* CLOSING */;
|
|
3376
|
+
this._containerInstance._startExitAnimation();
|
|
3377
|
+
}
|
|
3378
|
+
/**
|
|
3379
|
+
* Gets an observable that is notified when the modal is finished opening.
|
|
3380
|
+
*/
|
|
3381
|
+
afterOpened() {
|
|
3382
|
+
return this._afterOpened;
|
|
3383
|
+
}
|
|
3384
|
+
/**
|
|
3385
|
+
* Gets an observable that is notified when the modal is finished closing.
|
|
3386
|
+
*/
|
|
3387
|
+
afterClosed() {
|
|
3388
|
+
return this._afterClosed;
|
|
3389
|
+
}
|
|
3390
|
+
/**
|
|
3391
|
+
* Gets an observable that is notified when the modal has started closing.
|
|
3392
|
+
*/
|
|
3393
|
+
beforeClosed() {
|
|
3394
|
+
return this._beforeClosed;
|
|
3395
|
+
}
|
|
3396
|
+
/**
|
|
3397
|
+
* Gets an observable that emits when the overlay's backdrop has been clicked.
|
|
3398
|
+
*/
|
|
3399
|
+
backdropClick() {
|
|
3400
|
+
return this._overlayRef.backdropClick();
|
|
3401
|
+
}
|
|
3402
|
+
/**
|
|
3403
|
+
* Gets an observable that emits when keydown events are targeted on the overlay.
|
|
3404
|
+
*/
|
|
3405
|
+
keydownEvents() {
|
|
3406
|
+
return this._overlayRef.keydownEvents();
|
|
3407
|
+
}
|
|
3408
|
+
/**
|
|
3409
|
+
* Updates the dialog's position.
|
|
3410
|
+
*/
|
|
3411
|
+
updatePosition(position) {
|
|
3412
|
+
const strategy = this._getPositionStrategy();
|
|
3413
|
+
if (position && (position.left || position.right)) {
|
|
3414
|
+
position.left
|
|
3415
|
+
? strategy.left(position.left)
|
|
3416
|
+
: strategy.right(position.right);
|
|
3417
|
+
}
|
|
3418
|
+
else {
|
|
3419
|
+
strategy.centerHorizontally();
|
|
3420
|
+
}
|
|
3421
|
+
if (position && (position.top || position.bottom)) {
|
|
3422
|
+
position.top
|
|
3423
|
+
? strategy.top(position.top)
|
|
3424
|
+
: strategy.bottom(position.bottom);
|
|
3425
|
+
}
|
|
3426
|
+
else {
|
|
3427
|
+
strategy.centerVertically();
|
|
3428
|
+
}
|
|
3429
|
+
this._overlayRef.updatePosition();
|
|
3430
|
+
return this;
|
|
3431
|
+
}
|
|
3432
|
+
/**
|
|
3433
|
+
* Updates the modal's width and height.
|
|
3434
|
+
*/
|
|
3435
|
+
updateSize(width = '', height = '') {
|
|
3436
|
+
this._overlayRef.updateSize({ width, height });
|
|
3437
|
+
this._overlayRef.updatePosition();
|
|
3438
|
+
return this;
|
|
3439
|
+
}
|
|
3440
|
+
/** Add a CSS class or an array of classes to the overlay pane. */
|
|
3441
|
+
addPanelClass(classes) {
|
|
3442
|
+
this._overlayRef.addPanelClass(classes);
|
|
3443
|
+
return this;
|
|
3444
|
+
}
|
|
3445
|
+
/** Remove a CSS class or an array of classes from the overlay pane. */
|
|
3446
|
+
removePanelClass(classes) {
|
|
3447
|
+
this._overlayRef.removePanelClass(classes);
|
|
3448
|
+
return this;
|
|
3449
|
+
}
|
|
3450
|
+
/** Gets the current state of the modal's lifecycle. */
|
|
3451
|
+
getState() {
|
|
3452
|
+
return this._state;
|
|
3453
|
+
}
|
|
3454
|
+
/**
|
|
3455
|
+
* Finishes the modal close by updating the state of the modal
|
|
3456
|
+
* and disposing the overlay.
|
|
3457
|
+
*/
|
|
3458
|
+
_finishModalClose() {
|
|
3459
|
+
this._state = 2 /* CLOSED */;
|
|
3460
|
+
this._overlayRef.dispose();
|
|
3461
|
+
}
|
|
3462
|
+
/** Fetches the position strategy object from the overlay ref. */
|
|
3463
|
+
_getPositionStrategy() {
|
|
3464
|
+
return this._overlayRef.getConfig()
|
|
3465
|
+
.positionStrategy;
|
|
3466
|
+
}
|
|
3467
|
+
}
|
|
3468
|
+
/**
|
|
3469
|
+
* Closes the modal with the specified interaction type. This is currently not part of
|
|
3470
|
+
* `BaoModalRef` as that would conflict with custom modal ref mocks provided in tests.
|
|
3471
|
+
* More details. See: https://github.com/angular/components/pull/9257#issuecomment-651342226.
|
|
3472
|
+
*/
|
|
3473
|
+
function _closeModalVia(ref, interactionType, result) {
|
|
3474
|
+
// Some mock modal ref instances in tests do not have the `_containerInstance` property.
|
|
3475
|
+
// For those, we keep the behavior as is and do not deal with the interaction type.
|
|
3476
|
+
if (ref._containerInstance !== undefined) {
|
|
3477
|
+
ref._containerInstance._closeInteractionType = interactionType;
|
|
3478
|
+
}
|
|
3479
|
+
return ref.close(result);
|
|
3480
|
+
}
|
|
3481
|
+
|
|
3482
|
+
/*
|
|
3483
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
3484
|
+
* Licensed under the MIT license.
|
|
3485
|
+
* See LICENSE file in the project root for full license information.
|
|
3486
|
+
*/
|
|
3487
|
+
/** Injection token that can be used to access the data that was passed in to a modal. */
|
|
3488
|
+
const BAO_MODAL_DATA = new InjectionToken('BaoModalData');
|
|
3489
|
+
class BaoModalBase {
|
|
3490
|
+
constructor(_overlay, _injector, _parentModal, _overlayContainer, _modalRefConstructor, _modalContainerType, _modalDataToken, _animationMode) {
|
|
3491
|
+
this._overlay = _overlay;
|
|
3492
|
+
this._injector = _injector;
|
|
3493
|
+
this._parentModal = _parentModal;
|
|
3494
|
+
this._overlayContainer = _overlayContainer;
|
|
3495
|
+
this._modalRefConstructor = _modalRefConstructor;
|
|
3496
|
+
this._modalContainerType = _modalContainerType;
|
|
3497
|
+
this._modalDataToken = _modalDataToken;
|
|
3498
|
+
this._animationMode = _animationMode;
|
|
3499
|
+
this.afterAllClosed = defer(() => this.openModals.length
|
|
3500
|
+
? this.getAfterAllClosed()
|
|
3501
|
+
: this.getAfterAllClosed().pipe(startWith(undefined)));
|
|
3502
|
+
this._openModalsAtThisLevel = [];
|
|
3503
|
+
this._afterAllClosedAtThisLevel = new Subject();
|
|
3504
|
+
this._afterOpenedAtThisLevel = new Subject();
|
|
3505
|
+
this._ariaHiddenElements = new Map();
|
|
3506
|
+
this._modalAnimatingOpen = false;
|
|
3507
|
+
}
|
|
3508
|
+
/** Keeps track of the currently-open modals. */
|
|
3509
|
+
get openModals() {
|
|
3510
|
+
return this._parentModal
|
|
3511
|
+
? this._parentModal.openModals
|
|
3512
|
+
: this._openModalsAtThisLevel;
|
|
3513
|
+
}
|
|
3514
|
+
/** Stream that emits when a modal has been opened. */
|
|
3515
|
+
get afterOpened() {
|
|
3516
|
+
// Maybe typescript version difference
|
|
3517
|
+
return this._parentModal
|
|
3518
|
+
? this._parentModal.afterOpened
|
|
3519
|
+
: this._afterOpenedAtThisLevel;
|
|
3520
|
+
}
|
|
3521
|
+
getAfterAllClosed() {
|
|
3522
|
+
const parent = this._parentModal;
|
|
3523
|
+
return (parent ? parent.getAfterAllClosed() : this._afterAllClosedAtThisLevel);
|
|
3524
|
+
}
|
|
3525
|
+
/**
|
|
3526
|
+
* Opens a modal modal containing the given template.
|
|
3527
|
+
*/
|
|
3528
|
+
open(componentOrTemplateRef, config) {
|
|
3529
|
+
const conf = this._applyConfigDefaults(config, new BaoModalInitialConfig());
|
|
3530
|
+
// If there is a modal that is currently animating open, return the MatmodalRef of that modal
|
|
3531
|
+
if (this._modalAnimatingOpen) {
|
|
3532
|
+
return this._lastModalRef;
|
|
3533
|
+
}
|
|
3534
|
+
const overlayRef = this._createOverlay(conf);
|
|
3535
|
+
const modalContainer = this._attachModalContainer(overlayRef, conf);
|
|
3536
|
+
if (this._animationMode !== 'NoopAnimations') {
|
|
3537
|
+
const animationStateSubscription = modalContainer._animationStateChanged.subscribe(modalAnimationEvent => {
|
|
3538
|
+
if (modalAnimationEvent.state === 'opening') {
|
|
3539
|
+
this._modalAnimatingOpen = true;
|
|
3540
|
+
}
|
|
3541
|
+
if (modalAnimationEvent.state === 'opened') {
|
|
3542
|
+
this._modalAnimatingOpen = false;
|
|
3543
|
+
animationStateSubscription.unsubscribe();
|
|
3544
|
+
}
|
|
3545
|
+
});
|
|
3546
|
+
if (!this._animationStateSubscriptions) {
|
|
3547
|
+
this._animationStateSubscriptions = new Subscription();
|
|
3548
|
+
}
|
|
3549
|
+
this._animationStateSubscriptions.add(animationStateSubscription);
|
|
3550
|
+
}
|
|
3551
|
+
const modalRef = this._attachModalContent(componentOrTemplateRef, modalContainer, overlayRef, conf);
|
|
3552
|
+
this._lastModalRef = modalRef;
|
|
3553
|
+
// If this is the first modal that we're opening, hide all the non-overlay content.
|
|
3554
|
+
if (!this.openModals.length) {
|
|
3555
|
+
this._hideNonModalContentFromAssistiveTechnology();
|
|
3556
|
+
}
|
|
3557
|
+
this.openModals.push(modalRef);
|
|
3558
|
+
modalRef.afterClosed().subscribe(() => this._removeOpenModal(modalRef));
|
|
3559
|
+
this.afterOpened.next(modalRef);
|
|
3560
|
+
// Notify the modal container that the content has been attached.
|
|
3561
|
+
modalContainer._initializeWithAttachedContent();
|
|
3562
|
+
return modalRef;
|
|
3563
|
+
}
|
|
3564
|
+
/**
|
|
3565
|
+
* Closes all of the currently-open modals.
|
|
3566
|
+
*/
|
|
3567
|
+
closeAll() {
|
|
3568
|
+
this._closeModals(this.openModals);
|
|
3569
|
+
}
|
|
3570
|
+
/**
|
|
3571
|
+
* Finds an open modal by its id.
|
|
3572
|
+
*/
|
|
3573
|
+
getModalById(id) {
|
|
3574
|
+
return this.openModals.find(modal => modal.id === id);
|
|
3575
|
+
}
|
|
3576
|
+
ngOnDestroy() {
|
|
3577
|
+
// Only close the modals at this level on destroy
|
|
3578
|
+
// since the parent service may still be active.
|
|
3579
|
+
this._closeModals(this._openModalsAtThisLevel);
|
|
3580
|
+
this._afterAllClosedAtThisLevel.complete();
|
|
3581
|
+
this._afterOpenedAtThisLevel.complete();
|
|
3582
|
+
// Clean up any subscriptions to modals that never finished opening.
|
|
3583
|
+
if (this._animationStateSubscriptions) {
|
|
3584
|
+
this._animationStateSubscriptions.unsubscribe();
|
|
3585
|
+
}
|
|
3586
|
+
}
|
|
3587
|
+
/**
|
|
3588
|
+
* Creates the overlay into which the modal will be loaded.
|
|
3589
|
+
*/
|
|
3590
|
+
_createOverlay(config) {
|
|
3591
|
+
const overlayConfig = this._getOverlayConfig(config);
|
|
3592
|
+
return this._overlay.create(overlayConfig);
|
|
3593
|
+
}
|
|
3594
|
+
/**
|
|
3595
|
+
* Creates an overlay config from a modal config.
|
|
3596
|
+
*/
|
|
3597
|
+
_getOverlayConfig(config) {
|
|
3598
|
+
const state = new OverlayConfig({
|
|
3599
|
+
positionStrategy: this._overlay.position().global(),
|
|
3600
|
+
scrollStrategy: this._overlay.scrollStrategies.block(),
|
|
3601
|
+
panelClass: config.panelClass,
|
|
3602
|
+
hasBackdrop: config.hasBackdrop,
|
|
3603
|
+
disposeOnNavigation: config.closeOnNavigation
|
|
3604
|
+
});
|
|
3605
|
+
if (config.backdropClass) {
|
|
3606
|
+
state.backdropClass = config.backdropClass;
|
|
3607
|
+
}
|
|
3608
|
+
return state;
|
|
3609
|
+
}
|
|
3610
|
+
/**
|
|
3611
|
+
* Attaches a modal container to a modal's already-created overlay.
|
|
3612
|
+
*/
|
|
3613
|
+
_attachModalContainer(overlay, config) {
|
|
3614
|
+
const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
|
|
3615
|
+
const injector = Injector.create({
|
|
3616
|
+
parent: userInjector || this._injector,
|
|
3617
|
+
providers: [{ provide: BaoModalInitialConfig, useValue: config }]
|
|
3618
|
+
});
|
|
3619
|
+
const containerPortal = new ComponentPortal(this._modalContainerType, config.viewContainerRef, injector);
|
|
3620
|
+
const containerRef = overlay.attach(containerPortal);
|
|
3621
|
+
return containerRef.instance;
|
|
3622
|
+
}
|
|
3623
|
+
/**
|
|
3624
|
+
* Attaches the user-provided component to the already-created modal container.
|
|
3625
|
+
*/
|
|
3626
|
+
_attachModalContent(componentOrTemplateRef, modalContainer, overlayRef, config) {
|
|
3627
|
+
// Create a reference to the modal we're creating in order to give the user a handle
|
|
3628
|
+
// to modify and close it.
|
|
3629
|
+
const modalRef = new this._modalRefConstructor(overlayRef, modalContainer, config.id);
|
|
3630
|
+
if (componentOrTemplateRef instanceof TemplateRef) {
|
|
3631
|
+
modalContainer.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, {
|
|
3632
|
+
$implicit: config.data,
|
|
3633
|
+
modalRef
|
|
3634
|
+
}));
|
|
3635
|
+
}
|
|
3636
|
+
else {
|
|
3637
|
+
const injector = this._createInjector(config, modalRef, modalContainer);
|
|
3638
|
+
const contentRef = modalContainer.attachComponentPortal(new ComponentPortal(componentOrTemplateRef, config.viewContainerRef, injector));
|
|
3639
|
+
modalRef.componentInstance = contentRef.instance;
|
|
3640
|
+
}
|
|
3641
|
+
modalRef
|
|
3642
|
+
.updateSize(config.width, config.height)
|
|
3643
|
+
.updatePosition(config.position);
|
|
3644
|
+
return modalRef;
|
|
3645
|
+
}
|
|
3646
|
+
/**
|
|
3647
|
+
* Creates a custom injector to be used inside the modal. This allows a component loaded inside
|
|
3648
|
+
* of a modal to close itself and, optionally, to return a value.
|
|
3649
|
+
*/
|
|
3650
|
+
_createInjector(config, modalRef, modalContainer) {
|
|
3651
|
+
const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
|
|
3652
|
+
// The modal container should be provided as the modal container and the modal's
|
|
3653
|
+
// content are created out of the same `ViewContainerRef` and as such, are siblings
|
|
3654
|
+
// for injector purposes. To allow the hierarchy that is expected, the modal
|
|
3655
|
+
// container is explicitly provided in the injector.
|
|
3656
|
+
const providers = [
|
|
3657
|
+
{ provide: this._modalContainerType, useValue: modalContainer },
|
|
3658
|
+
{ provide: this._modalDataToken, useValue: config.data },
|
|
3659
|
+
{ provide: this._modalRefConstructor, useValue: modalRef }
|
|
3660
|
+
];
|
|
3661
|
+
return Injector.create({
|
|
3662
|
+
parent: userInjector || this._injector,
|
|
3663
|
+
providers
|
|
3664
|
+
});
|
|
3665
|
+
}
|
|
3666
|
+
/**
|
|
3667
|
+
* Removes a modal from the array of open modals.
|
|
3668
|
+
*/
|
|
3669
|
+
_removeOpenModal(modalRef) {
|
|
3670
|
+
const index = this.openModals.indexOf(modalRef);
|
|
3671
|
+
if (index > -1) {
|
|
3672
|
+
this.openModals.splice(index, 1);
|
|
3673
|
+
// If all the modals were closed, remove/restore the `aria-hidden`
|
|
3674
|
+
// to a the siblings and emit to the `afterAllClosed` stream.
|
|
3675
|
+
if (!this.openModals.length) {
|
|
3676
|
+
this._ariaHiddenElements.forEach((previousValue, element) => {
|
|
3677
|
+
if (previousValue) {
|
|
3678
|
+
element.setAttribute('aria-hidden', previousValue);
|
|
3679
|
+
}
|
|
3680
|
+
else {
|
|
3681
|
+
element.removeAttribute('aria-hidden');
|
|
3682
|
+
}
|
|
3683
|
+
});
|
|
3684
|
+
this._ariaHiddenElements.clear();
|
|
3685
|
+
this.getAfterAllClosed().next();
|
|
3686
|
+
}
|
|
3687
|
+
}
|
|
3688
|
+
}
|
|
3689
|
+
/**
|
|
3690
|
+
* Hides all of the content that isn't an overlay from assistive technology.
|
|
3691
|
+
*/
|
|
3692
|
+
_hideNonModalContentFromAssistiveTechnology() {
|
|
3693
|
+
const overlayContainer = this._overlayContainer.getContainerElement();
|
|
3694
|
+
// Ensure that the overlay container is attached to the DOM.
|
|
3695
|
+
if (overlayContainer.parentElement) {
|
|
3696
|
+
const siblings = overlayContainer.parentElement.children;
|
|
3697
|
+
for (let i = siblings.length - 1; i > -1; i--) {
|
|
3698
|
+
const sibling = siblings[i];
|
|
3699
|
+
if (sibling !== overlayContainer &&
|
|
3700
|
+
sibling.nodeName !== 'SCRIPT' &&
|
|
3701
|
+
sibling.nodeName !== 'STYLE' &&
|
|
3702
|
+
!sibling.hasAttribute('aria-live')) {
|
|
3703
|
+
this._ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));
|
|
3704
|
+
sibling.setAttribute('aria-hidden', 'true');
|
|
3705
|
+
}
|
|
3706
|
+
}
|
|
3707
|
+
}
|
|
3708
|
+
}
|
|
3709
|
+
/** Closes all of the modals in an array. */
|
|
3710
|
+
_closeModals(modals) {
|
|
3711
|
+
let i = modals.length;
|
|
3712
|
+
while (i--) {
|
|
3713
|
+
modals[i].close();
|
|
3714
|
+
}
|
|
3715
|
+
}
|
|
3716
|
+
/**
|
|
3717
|
+
* Applies default options to the modal config.
|
|
3718
|
+
*/
|
|
3719
|
+
_applyConfigDefaults(config, defaultOptions) {
|
|
3720
|
+
const desktopClass = (config === null || config === void 0 ? void 0 : config.size) || eModalDesktopWidthSize.SMALL;
|
|
3721
|
+
const mobilClass = (config === null || config === void 0 ? void 0 : config.mobileSize) || eModalMobileWidthSize.FULL;
|
|
3722
|
+
const data = (config === null || config === void 0 ? void 0 : config.data) || null;
|
|
3723
|
+
const ariaLabelledBy = (config === null || config === void 0 ? void 0 : config.ariaLabelledBy) || null;
|
|
3724
|
+
return Object.assign(Object.assign({}, defaultOptions), {
|
|
3725
|
+
panelClass: [desktopClass, mobilClass],
|
|
3726
|
+
ariaLabelledBy,
|
|
3727
|
+
data
|
|
3728
|
+
});
|
|
3729
|
+
}
|
|
3730
|
+
}
|
|
3731
|
+
BaoModalBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
|
|
3732
|
+
BaoModalBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaoModalBase, ngImport: i0 });
|
|
3733
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalBase, decorators: [{
|
|
3734
|
+
type: Directive
|
|
3735
|
+
}], ctorParameters: function () { return [{ type: i1$4.Overlay }, { type: i0.Injector }, { type: undefined }, { type: i1$4.OverlayContainer }, { type: i0.Type }, { type: i0.Type }, { type: i0.InjectionToken }, { type: undefined }]; } });
|
|
3736
|
+
/**
|
|
3737
|
+
* Service to open modal.
|
|
3738
|
+
*/
|
|
3739
|
+
class BaoModal extends BaoModalBase {
|
|
3740
|
+
constructor(overlay, injector, parentModal, overlayContainer, animationMode) {
|
|
3741
|
+
super(overlay, injector, parentModal, overlayContainer, BaoModalRef, BaoModalContainer, BAO_MODAL_DATA, animationMode);
|
|
3742
|
+
}
|
|
3743
|
+
}
|
|
3744
|
+
BaoModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModal, deps: [{ token: i1$4.Overlay }, { token: i0.Injector }, { token: BaoModal, optional: true, skipSelf: true }, { token: i1$4.OverlayContainer }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3745
|
+
BaoModal.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModal });
|
|
3746
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModal, decorators: [{
|
|
3747
|
+
type: Injectable
|
|
3748
|
+
}], ctorParameters: function () {
|
|
3749
|
+
return [{ type: i1$4.Overlay }, { type: i0.Injector }, { type: BaoModal, decorators: [{
|
|
3750
|
+
type: Optional
|
|
3751
|
+
}, {
|
|
3752
|
+
type: SkipSelf
|
|
3753
|
+
}] }, { type: i1$4.OverlayContainer }, { type: undefined, decorators: [{
|
|
3754
|
+
type: Optional
|
|
3755
|
+
}, {
|
|
3756
|
+
type: Inject,
|
|
3757
|
+
args: [ANIMATION_MODULE_TYPE]
|
|
3758
|
+
}] }];
|
|
3759
|
+
} });
|
|
3760
|
+
|
|
3761
|
+
/*
|
|
3762
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
3763
|
+
* Licensed under the MIT license.
|
|
3764
|
+
* See LICENSE file in the project root for full license information.
|
|
3765
|
+
*/
|
|
3766
|
+
/**
|
|
3767
|
+
* Button that will close the current dialog.
|
|
3768
|
+
*/
|
|
3769
|
+
class BaoModalClose {
|
|
3770
|
+
constructor(modalRef, _elementRef, _dialog) {
|
|
3771
|
+
this.modalRef = modalRef;
|
|
3772
|
+
this._elementRef = _elementRef;
|
|
3773
|
+
this._dialog = _dialog;
|
|
3774
|
+
/** Default to "button" to prevents accidental form submits. */
|
|
3775
|
+
this.type = 'button';
|
|
3776
|
+
}
|
|
3777
|
+
ngOnInit() {
|
|
3778
|
+
if (!this.modalRef) {
|
|
3779
|
+
// When this directive is included in a dialog via TemplateRef (rather than being
|
|
3780
|
+
// in a Component), the modalRef isn't available via injection because embedded
|
|
3781
|
+
// views cannot be given a custom injector. Instead, we look up the modalRef by
|
|
3782
|
+
// ID. This must occur in `onInit`, as the ID binding for the dialog container won't
|
|
3783
|
+
// be resolved at constructor time.
|
|
3784
|
+
this.modalRef =
|
|
3785
|
+
getClosestDialog(this._elementRef, this._dialog.openModals) || null;
|
|
3786
|
+
}
|
|
3787
|
+
}
|
|
3788
|
+
ngOnChanges(changes) {
|
|
3789
|
+
const proxiedChange = changes['_baoModalClose'] || changes['_baoModalCloseResult'];
|
|
3790
|
+
if (proxiedChange) {
|
|
3791
|
+
this.dialogResult = proxiedChange.currentValue;
|
|
3792
|
+
}
|
|
3793
|
+
}
|
|
3794
|
+
_onButtonClick(event) {
|
|
3795
|
+
// Determinate the focus origin using the click event, because using the FocusMonitor will
|
|
3796
|
+
// result in incorrect origins. Most of the time, close buttons will be auto focused in the
|
|
3797
|
+
// dialog, and therefore clicking the button won't result in a focus change. This means that
|
|
3798
|
+
// the FocusMonitor won't detect any origin change, and will always output `program`.
|
|
3799
|
+
_closeModalVia(this.modalRef, event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);
|
|
3800
|
+
}
|
|
3801
|
+
}
|
|
3802
|
+
BaoModalClose.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalClose, deps: [{ token: BaoModalRef, optional: true }, { token: i0.ElementRef }, { token: BaoModal }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3803
|
+
BaoModalClose.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaoModalClose, selector: "[bao-modal-close], [baoModalClose]", inputs: { ariaLabel: ["aria-label", "ariaLabel"], type: "type", dialogResult: ["bao-modal-close", "dialogResult"], _baoModalClose: ["baoModalClose", "_baoModalClose"] }, host: { listeners: { "click": "_onButtonClick($event)" }, properties: { "attr.aria-label": "ariaLabel || null", "attr.type": "type" } }, exportAs: ["BaoModalClose"], usesOnChanges: true, ngImport: i0 });
|
|
3804
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalClose, decorators: [{
|
|
3805
|
+
type: Directive,
|
|
3806
|
+
args: [{
|
|
3807
|
+
selector: '[bao-modal-close], [baoModalClose]',
|
|
3808
|
+
exportAs: 'BaoModalClose',
|
|
3809
|
+
host: {
|
|
3810
|
+
'(click)': '_onButtonClick($event)',
|
|
3811
|
+
'[attr.aria-label]': 'ariaLabel || null',
|
|
3812
|
+
'[attr.type]': 'type'
|
|
3813
|
+
}
|
|
3814
|
+
}]
|
|
3815
|
+
}], ctorParameters: function () {
|
|
3816
|
+
return [{ type: BaoModalRef, decorators: [{
|
|
3817
|
+
type: Optional
|
|
3818
|
+
}] }, { type: i0.ElementRef }, { type: BaoModal }];
|
|
3819
|
+
}, propDecorators: { ariaLabel: [{
|
|
3820
|
+
type: Input,
|
|
3821
|
+
args: ['aria-label']
|
|
3822
|
+
}], type: [{
|
|
3823
|
+
type: Input
|
|
3824
|
+
}], dialogResult: [{
|
|
3825
|
+
type: Input,
|
|
3826
|
+
args: ['bao-modal-close']
|
|
3827
|
+
}], _baoModalClose: [{
|
|
3828
|
+
type: Input,
|
|
3829
|
+
args: ['baoModalClose']
|
|
3830
|
+
}] } });
|
|
3831
|
+
/**
|
|
3832
|
+
* Finds the closest BaoModalRef to an element by looking at the DOM.
|
|
3833
|
+
*/
|
|
3834
|
+
function getClosestDialog(element, openDialogs) {
|
|
3835
|
+
let parent = element.nativeElement.parentElement;
|
|
3836
|
+
while (parent && !parent.classList.contains('bao-modal-container')) {
|
|
3837
|
+
parent = parent.parentElement;
|
|
3838
|
+
}
|
|
3839
|
+
return parent ? openDialogs.find(dialog => dialog.id === parent.id) : null;
|
|
3840
|
+
}
|
|
3841
|
+
|
|
3842
|
+
/*
|
|
3843
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
3844
|
+
* Licensed under the MIT license.
|
|
3845
|
+
* See LICENSE file in the project root for full license information.
|
|
3846
|
+
*/
|
|
3847
|
+
const MODAL_DIRECTIVES = [BaoModalContainer, BaoModalClose];
|
|
3848
|
+
class BaoModalModule {
|
|
3849
|
+
}
|
|
3850
|
+
BaoModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3851
|
+
BaoModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalModule, declarations: [BaoModalContainer, BaoModalClose], imports: [CommonModule,
|
|
3852
|
+
OverlayModule,
|
|
3853
|
+
PortalModule,
|
|
3854
|
+
BrowserAnimationsModule,
|
|
3855
|
+
NoopAnimationsModule], exports: [BaoModalContainer, BaoModalClose] });
|
|
3856
|
+
BaoModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalModule, providers: [BaoModal], imports: [[
|
|
3857
|
+
CommonModule,
|
|
3858
|
+
OverlayModule,
|
|
3859
|
+
PortalModule,
|
|
3860
|
+
BrowserAnimationsModule,
|
|
3861
|
+
NoopAnimationsModule
|
|
3862
|
+
]] });
|
|
3863
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalModule, decorators: [{
|
|
3864
|
+
type: NgModule,
|
|
3865
|
+
args: [{
|
|
3866
|
+
imports: [
|
|
3867
|
+
CommonModule,
|
|
3868
|
+
OverlayModule,
|
|
3869
|
+
PortalModule,
|
|
3870
|
+
BrowserAnimationsModule,
|
|
3871
|
+
NoopAnimationsModule
|
|
3872
|
+
],
|
|
3873
|
+
declarations: MODAL_DIRECTIVES,
|
|
3874
|
+
exports: MODAL_DIRECTIVES,
|
|
3875
|
+
providers: [BaoModal]
|
|
3876
|
+
}]
|
|
3877
|
+
}] });
|
|
3878
|
+
|
|
2523
3879
|
/*
|
|
2524
3880
|
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2525
3881
|
* Licensed under the MIT license.
|
|
@@ -2543,7 +3899,10 @@ BaoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.
|
|
|
2543
3899
|
BaoCommonComponentsModule,
|
|
2544
3900
|
BaoCheckboxModule,
|
|
2545
3901
|
BaoRadioModule,
|
|
2546
|
-
BaoSummaryModule
|
|
3902
|
+
BaoSummaryModule,
|
|
3903
|
+
BaoAvatarModule,
|
|
3904
|
+
BaoTabsModule,
|
|
3905
|
+
BaoModalModule
|
|
2547
3906
|
// TODO: reactivate once component does not depend on global css BaoBadgeModule,
|
|
2548
3907
|
// TODO: reactivate once component does not depend on global css BaoSnackBarModule,
|
|
2549
3908
|
] });
|
|
@@ -2564,7 +3923,10 @@ BaoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.
|
|
|
2564
3923
|
BaoCommonComponentsModule,
|
|
2565
3924
|
BaoCheckboxModule,
|
|
2566
3925
|
BaoRadioModule,
|
|
2567
|
-
BaoSummaryModule
|
|
3926
|
+
BaoSummaryModule,
|
|
3927
|
+
BaoAvatarModule,
|
|
3928
|
+
BaoTabsModule,
|
|
3929
|
+
BaoModalModule
|
|
2568
3930
|
// TODO: reactivate once component does not depend on global css BaoBadgeModule,
|
|
2569
3931
|
// TODO: reactivate once component does not depend on global css BaoSnackBarModule,
|
|
2570
3932
|
] });
|
|
@@ -2590,7 +3952,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2590
3952
|
BaoCommonComponentsModule,
|
|
2591
3953
|
BaoCheckboxModule,
|
|
2592
3954
|
BaoRadioModule,
|
|
2593
|
-
BaoSummaryModule
|
|
3955
|
+
BaoSummaryModule,
|
|
3956
|
+
BaoAvatarModule,
|
|
3957
|
+
BaoTabsModule,
|
|
3958
|
+
BaoModalModule
|
|
2594
3959
|
// TODO: reactivate once component does not depend on global css BaoBadgeModule,
|
|
2595
3960
|
// TODO: reactivate once component does not depend on global css BaoSnackBarModule,
|
|
2596
3961
|
]
|
|
@@ -2654,9 +4019,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2654
4019
|
* See LICENSE file in the project root for full license information.
|
|
2655
4020
|
*/
|
|
2656
4021
|
|
|
4022
|
+
/*
|
|
4023
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
4024
|
+
* Licensed under the MIT license.
|
|
4025
|
+
* See LICENSE file in the project root for full license information.
|
|
4026
|
+
*/
|
|
4027
|
+
|
|
4028
|
+
/*
|
|
4029
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
4030
|
+
* Licensed under the MIT license.
|
|
4031
|
+
* See LICENSE file in the project root for full license information.
|
|
4032
|
+
*/
|
|
4033
|
+
|
|
2657
4034
|
/**
|
|
2658
4035
|
* Generated bundle index. Do not edit.
|
|
2659
4036
|
*/
|
|
2660
4037
|
|
|
2661
|
-
export { BAO_RADIO_GROUP, BaoAlertActions, BaoAlertComponent, BaoAlertContent, BaoAlertLink, BaoAlertModule, BaoAlertTitle, 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, BaoModule, BaoNavList, BaoRadioButtonComponent, BaoRadioButtonGroupComponent, BaoRadioDescription, BaoRadioModule, BaoSummaryComponent, BaoSummaryDescription, BaoSummaryModule, BaoTagComponent, BaoTagModule, BaoTitleTextComponent };
|
|
4038
|
+
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 };
|
|
2662
4039
|
//# sourceMappingURL=villedemontreal-angular-ui.mjs.map
|