@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,35 @@ 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 { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
|
|
18
|
+
import { trigger, state, style, transition, group, animate, query, animateChild } from '@angular/animations';
|
|
19
|
+
import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
|
|
20
|
+
import { ANIMATION_MODULE_TYPE, BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
|
|
12
21
|
|
|
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
22
|
function baoColorToHex(baoColor) {
|
|
31
23
|
switch (baoColor) {
|
|
32
|
-
case
|
|
24
|
+
case "action" /* ACTION */:
|
|
33
25
|
return '#097D6C';
|
|
34
|
-
case
|
|
26
|
+
case "primary" /* PRIMARY */:
|
|
35
27
|
return '#000000';
|
|
36
|
-
case
|
|
28
|
+
case "primary-reversed" /* PRIMARY_REVERSED */:
|
|
37
29
|
return '#FFFFFF';
|
|
38
|
-
case
|
|
30
|
+
case "secondary" /* SECONDARY */:
|
|
39
31
|
return '#637381';
|
|
40
|
-
case
|
|
32
|
+
case "tertiary" /* TERTIARY */:
|
|
41
33
|
return '#ADB5BD';
|
|
42
|
-
case
|
|
34
|
+
case "informative" /* INFORMATIVE */:
|
|
43
35
|
return '#0079C4';
|
|
44
|
-
case
|
|
36
|
+
case "negative" /* NEGATIVE */:
|
|
45
37
|
return '#D3310A';
|
|
46
|
-
case
|
|
38
|
+
case "positive" /* POSITIVE */:
|
|
47
39
|
return '#0DA566';
|
|
48
|
-
case
|
|
40
|
+
case "warning" /* WARNING */:
|
|
49
41
|
return '#FFB833';
|
|
50
42
|
default:
|
|
51
43
|
return '#097D6C';
|
|
@@ -172,7 +164,8 @@ const ICONS_DCT = {
|
|
|
172
164
|
'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
165
|
'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
166
|
'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'/>"
|
|
167
|
+
'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-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
169
|
};
|
|
177
170
|
|
|
178
171
|
/*
|
|
@@ -219,7 +212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
219
212
|
* Licensed under the MIT license.
|
|
220
213
|
* See LICENSE file in the project root for full license information.
|
|
221
214
|
*/
|
|
222
|
-
const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
|
|
215
|
+
const SVG_NAMESPACE$1 = 'http://www.w3.org/2000/svg';
|
|
223
216
|
const TITLE = 'title';
|
|
224
217
|
/**
|
|
225
218
|
* Component to display an icon. It can be used in the following ways:
|
|
@@ -229,7 +222,7 @@ const TITLE = 'title';
|
|
|
229
222
|
* `<bao-icon svgIcon="heart"></bao-icon>`
|
|
230
223
|
*/
|
|
231
224
|
class BaoIconComponent {
|
|
232
|
-
constructor(elementRef, iconRegistry, renderer
|
|
225
|
+
constructor(elementRef, iconRegistry, renderer) {
|
|
233
226
|
this.elementRef = elementRef;
|
|
234
227
|
this.iconRegistry = iconRegistry;
|
|
235
228
|
this.renderer = renderer;
|
|
@@ -237,11 +230,6 @@ class BaoIconComponent {
|
|
|
237
230
|
* The size of the icon
|
|
238
231
|
*/
|
|
239
232
|
this.size = 'x-small';
|
|
240
|
-
// If the user has not explicitly set aria-hidden, mark the icon as hidden, as this is
|
|
241
|
-
// the right thing to do for the majority of icon use-cases.
|
|
242
|
-
if (!ariaHidden) {
|
|
243
|
-
this.elementRef.nativeElement.setAttribute('aria-hidden', 'true');
|
|
244
|
-
}
|
|
245
233
|
this._titleId = '';
|
|
246
234
|
this._title = '';
|
|
247
235
|
this._svgIcon = '';
|
|
@@ -250,6 +238,18 @@ class BaoIconComponent {
|
|
|
250
238
|
get svgIcon() {
|
|
251
239
|
return this._svgIcon;
|
|
252
240
|
}
|
|
241
|
+
/** Title that will be used as an aria-label for the icon */
|
|
242
|
+
get title() {
|
|
243
|
+
return this._title;
|
|
244
|
+
}
|
|
245
|
+
get hexColor() {
|
|
246
|
+
if (this.color) {
|
|
247
|
+
return baoColorToHex(this.color);
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
get titleId() {
|
|
251
|
+
return this._titleId;
|
|
252
|
+
}
|
|
253
253
|
set svgIcon(value) {
|
|
254
254
|
if (value !== this._svgIcon) {
|
|
255
255
|
if (value) {
|
|
@@ -262,15 +262,6 @@ class BaoIconComponent {
|
|
|
262
262
|
this.renderer.addClass(this.elementRef.nativeElement, `bao-${this._svgIcon}`);
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
|
-
get hexColor() {
|
|
266
|
-
if (this.color) {
|
|
267
|
-
return baoColorToHex(this.color);
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
/** Title that will be used as an aria-label for the icon */
|
|
271
|
-
get title() {
|
|
272
|
-
return this._title;
|
|
273
|
-
}
|
|
274
265
|
set title(value) {
|
|
275
266
|
if (value !== this._title) {
|
|
276
267
|
this._title = value;
|
|
@@ -278,9 +269,6 @@ class BaoIconComponent {
|
|
|
278
269
|
this.updateSvgIcon(this.svgIcon, value);
|
|
279
270
|
}
|
|
280
271
|
}
|
|
281
|
-
get titleId() {
|
|
282
|
-
return this._titleId;
|
|
283
|
-
}
|
|
284
272
|
ngOnDestroy() {
|
|
285
273
|
if (this._elementsWithExternalReferences) {
|
|
286
274
|
this._elementsWithExternalReferences.clear();
|
|
@@ -322,25 +310,31 @@ class BaoIconComponent {
|
|
|
322
310
|
if (title) {
|
|
323
311
|
svg = this.addTitleToSVG(svg, title);
|
|
324
312
|
}
|
|
313
|
+
if (!title) {
|
|
314
|
+
svg.setAttribute('aria-hidden', 'true');
|
|
315
|
+
}
|
|
325
316
|
this.setSvgElement(svg);
|
|
326
317
|
}
|
|
327
318
|
}
|
|
328
319
|
addTitleToSVG(svg, title) {
|
|
329
|
-
const titleNode = this.renderer.createElement(TITLE, SVG_NAMESPACE);
|
|
320
|
+
const titleNode = this.renderer.createElement(TITLE, SVG_NAMESPACE$1);
|
|
330
321
|
titleNode.id = this._titleId;
|
|
331
322
|
const titleText = this.renderer.createText(title);
|
|
332
323
|
this.renderer.appendChild(titleNode, titleText);
|
|
333
324
|
this.renderer.appendChild(svg, titleNode);
|
|
325
|
+
svg.setAttribute('aria-labelledby', this._titleId);
|
|
334
326
|
return svg;
|
|
335
327
|
}
|
|
336
328
|
generateUniqueTitleId() {
|
|
337
329
|
return this.title
|
|
338
|
-
? `${this.title
|
|
330
|
+
? `${this.title
|
|
331
|
+
.replace(/[^A-Z0-9]+/gi, '')
|
|
332
|
+
.toLocaleLowerCase()}-${Math.floor(Math.random() * 10000000000000000)}`
|
|
339
333
|
: '';
|
|
340
334
|
}
|
|
341
335
|
}
|
|
342
|
-
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 }
|
|
343
|
-
BaoIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoIconComponent, selector: "bao-icon", inputs: {
|
|
336
|
+
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 });
|
|
337
|
+
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 });
|
|
344
338
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoIconComponent, decorators: [{
|
|
345
339
|
type: Component,
|
|
346
340
|
args: [{ template: '<ng-content></ng-content>', selector: 'bao-icon', exportAs: 'baoIcon', host: {
|
|
@@ -353,20 +347,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
353
347
|
'[class.bao-icon-x-small]': 'size === "x-small"',
|
|
354
348
|
'[class.bao-icon-xx-small]': 'size === "xx-small"',
|
|
355
349
|
'[attr.data-bao-icon-type]': '"svg"',
|
|
356
|
-
'[attr.aria-labelledby]': 'titleId',
|
|
357
|
-
'[attr.aria-hidden]': '!title',
|
|
358
350
|
'[style.color]': 'hexColor'
|
|
359
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["bao-icon{background-repeat:no-repeat;display:inline-
|
|
360
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: BaoIconDictionary }, { type: i0.Renderer2 },
|
|
361
|
-
type: Attribute,
|
|
362
|
-
args: ['aria-hidden']
|
|
363
|
-
}] }]; }, propDecorators: { svgIcon: [{
|
|
351
|
+
}, 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"] }]
|
|
352
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: BaoIconDictionary }, { type: i0.Renderer2 }]; }, propDecorators: { color: [{
|
|
364
353
|
type: Input
|
|
365
|
-
}],
|
|
354
|
+
}], size: [{
|
|
366
355
|
type: Input
|
|
367
|
-
}],
|
|
356
|
+
}], svgIcon: [{
|
|
368
357
|
type: Input
|
|
369
|
-
}],
|
|
358
|
+
}], title: [{
|
|
370
359
|
type: Input
|
|
371
360
|
}] } });
|
|
372
361
|
|
|
@@ -452,7 +441,7 @@ class BaoButtonComponent {
|
|
|
452
441
|
}
|
|
453
442
|
}
|
|
454
443
|
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 });
|
|
455
|
-
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]=\"
|
|
444
|
+
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 });
|
|
456
445
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoButtonComponent, decorators: [{
|
|
457
446
|
type: Component,
|
|
458
447
|
args: [{ selector: 'button[bao-button]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
@@ -469,7 +458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
469
458
|
'[class.bao-button-loading]': 'loading === true',
|
|
470
459
|
'[class.bao-button-no-text]': 'noText === true',
|
|
471
460
|
'[class.bao-button-full-width]': 'fullWidth === true'
|
|
472
|
-
}, template: "<bao-icon\n *ngIf=\"loading && !rightIcon\"\n class=\"loading-spinner\"\n svgIcon=\"icon-spinner\"\n [title]=\"
|
|
461
|
+
}, 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"] }]
|
|
473
462
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { displayType: [{
|
|
474
463
|
type: Input
|
|
475
464
|
}], level: [{
|
|
@@ -608,12 +597,9 @@ class BaoAlertComponent {
|
|
|
608
597
|
/**
|
|
609
598
|
* Alert type
|
|
610
599
|
*/
|
|
611
|
-
this.type = '';
|
|
600
|
+
this.type = 'info';
|
|
612
601
|
this.dismissible = false;
|
|
613
|
-
this.showIcon = true;
|
|
614
602
|
this.dismiss = new EventEmitter();
|
|
615
|
-
this.iconType = 'icon-info';
|
|
616
|
-
this.iconTitle = 'Information';
|
|
617
603
|
}
|
|
618
604
|
ngOnChanges(changes) {
|
|
619
605
|
if (changes['type']) {
|
|
@@ -626,6 +612,7 @@ class BaoAlertComponent {
|
|
|
626
612
|
success: 'icon-check-circle',
|
|
627
613
|
danger: 'icon-error',
|
|
628
614
|
warning: 'icon-warning',
|
|
615
|
+
emergency: 'icon-emergency',
|
|
629
616
|
default: 'icon-info'
|
|
630
617
|
};
|
|
631
618
|
return typesAlertIcon[value] || typesAlertIcon.default;
|
|
@@ -635,6 +622,7 @@ class BaoAlertComponent {
|
|
|
635
622
|
success: 'Succès',
|
|
636
623
|
danger: 'Erreur',
|
|
637
624
|
warning: 'Attention',
|
|
625
|
+
emergency: 'Urgence',
|
|
638
626
|
default: 'Information'
|
|
639
627
|
};
|
|
640
628
|
return titleIcon[value] || titleIcon.default;
|
|
@@ -644,7 +632,7 @@ class BaoAlertComponent {
|
|
|
644
632
|
}
|
|
645
633
|
}
|
|
646
634
|
BaoAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
647
|
-
BaoAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoAlertComponent, selector: "bao-alert", inputs: { type: "type", dismissible: "dismissible"
|
|
635
|
+
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 });
|
|
648
636
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAlertComponent, decorators: [{
|
|
649
637
|
type: Component,
|
|
650
638
|
args: [{ selector: 'bao-alert', encapsulation: ViewEncapsulation.None, host: {
|
|
@@ -653,14 +641,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
653
641
|
'[class.bao-alert-danger]': 'type === "danger"',
|
|
654
642
|
'[class.bao-alert-warning]': 'type === "warning"',
|
|
655
643
|
'[class.bao-alert-info]': 'type === "info"',
|
|
644
|
+
'[class.bao-alert-emergency]': 'type === "emergency"',
|
|
656
645
|
role: 'alert'
|
|
657
|
-
}, template: "<
|
|
646
|
+
}, 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"] }]
|
|
658
647
|
}], propDecorators: { type: [{
|
|
659
648
|
type: Input
|
|
660
649
|
}], dismissible: [{
|
|
661
650
|
type: Input
|
|
662
|
-
}], showIcon: [{
|
|
663
|
-
type: Input
|
|
664
651
|
}], dismiss: [{
|
|
665
652
|
type: Output
|
|
666
653
|
}] } });
|
|
@@ -716,16 +703,16 @@ class BaoBreadcrumbComponent {
|
|
|
716
703
|
constructor(renderer) {
|
|
717
704
|
this.renderer = renderer;
|
|
718
705
|
}
|
|
719
|
-
setLastLinkAttribute() {
|
|
720
|
-
const children = Array.from(this.staticContainer.nativeElement.children);
|
|
721
|
-
this.renderer.setAttribute(children[children.length - 1], Object.keys(LAST_NODE_ATTRIBUTE)[0], Object.values(LAST_NODE_ATTRIBUTE)[0]);
|
|
722
|
-
}
|
|
723
706
|
ngAfterViewInit() {
|
|
724
707
|
this.setLastLinkAttribute();
|
|
725
708
|
}
|
|
726
709
|
onContentChange() {
|
|
727
710
|
this.setLastLinkAttribute();
|
|
728
711
|
}
|
|
712
|
+
setLastLinkAttribute() {
|
|
713
|
+
const children = Array.from(this.staticContainer.nativeElement.children);
|
|
714
|
+
this.renderer.setAttribute(children[children.length - 1], Object.keys(LAST_NODE_ATTRIBUTE)[0], Object.values(LAST_NODE_ATTRIBUTE)[0]);
|
|
715
|
+
}
|
|
729
716
|
}
|
|
730
717
|
BaoBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoBreadcrumbComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
731
718
|
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 });
|
|
@@ -1013,15 +1000,14 @@ let checkboxGroupNextUniqueId = 0;
|
|
|
1013
1000
|
class BaoCheckboxGroupComponent {
|
|
1014
1001
|
constructor(cdr) {
|
|
1015
1002
|
this.cdr = cdr;
|
|
1016
|
-
this._uniqueId = `bao-checkbox-group-${++checkboxGroupNextUniqueId}`;
|
|
1017
|
-
/**
|
|
1018
|
-
* The checkbox group ID. It is set dynamically with an unique ID by default
|
|
1019
|
-
*/
|
|
1020
|
-
this.id = this._uniqueId;
|
|
1021
1003
|
/**
|
|
1022
1004
|
* The aria-describedby id for web accessibilty
|
|
1023
1005
|
*/
|
|
1024
1006
|
this.ariaDescribedby = undefined;
|
|
1007
|
+
this._uniqueId = `bao-checkbox-group-${++checkboxGroupNextUniqueId}`;
|
|
1008
|
+
if (!this.id) {
|
|
1009
|
+
this.id = this._uniqueId;
|
|
1010
|
+
}
|
|
1025
1011
|
}
|
|
1026
1012
|
ngAfterViewInit() {
|
|
1027
1013
|
this.setAriaDescribedByToDescription();
|
|
@@ -1066,14 +1052,6 @@ class BaoCheckboxComponent {
|
|
|
1066
1052
|
this.elementRef = elementRef;
|
|
1067
1053
|
this.cdr = cdr;
|
|
1068
1054
|
this.focusMonitor = focusMonitor;
|
|
1069
|
-
this._disabled = false;
|
|
1070
|
-
this._checked = false;
|
|
1071
|
-
this._indeterminate = false;
|
|
1072
|
-
this._uniqueId = `bao-checkbox-${++checkboxNextUniqueId}`;
|
|
1073
|
-
/**
|
|
1074
|
-
* The checkbox ID. It is set dynamically with an unique ID by default
|
|
1075
|
-
*/
|
|
1076
|
-
this.id = this._uniqueId;
|
|
1077
1055
|
/**
|
|
1078
1056
|
* Whether the checkbox has a border and is considered as a card.
|
|
1079
1057
|
*/
|
|
@@ -1094,8 +1072,15 @@ class BaoCheckboxComponent {
|
|
|
1094
1072
|
* Inderminate value of the checkbox whenever
|
|
1095
1073
|
*/
|
|
1096
1074
|
this.indeterminateChange = new EventEmitter();
|
|
1075
|
+
this._disabled = false;
|
|
1076
|
+
this._checked = false;
|
|
1077
|
+
this._indeterminate = false;
|
|
1078
|
+
this._uniqueId = `bao-checkbox-${++checkboxNextUniqueId}`;
|
|
1097
1079
|
this.onModelChange = () => undefined;
|
|
1098
1080
|
this.onTouch = () => undefined;
|
|
1081
|
+
if (!this.id) {
|
|
1082
|
+
this.id = this._uniqueId;
|
|
1083
|
+
}
|
|
1099
1084
|
}
|
|
1100
1085
|
/**
|
|
1101
1086
|
* Whether the checkbox is checked. Default value : false
|
|
@@ -1103,41 +1088,44 @@ class BaoCheckboxComponent {
|
|
|
1103
1088
|
get checked() {
|
|
1104
1089
|
return this._checked;
|
|
1105
1090
|
}
|
|
1106
|
-
set checked(value) {
|
|
1107
|
-
if (value !== this.checked) {
|
|
1108
|
-
this._checked = value;
|
|
1109
|
-
this.cdr.markForCheck();
|
|
1110
|
-
}
|
|
1111
|
-
}
|
|
1112
1091
|
/**
|
|
1113
1092
|
* Whether the checkbox is disabled. Default value : false
|
|
1114
1093
|
*/
|
|
1115
1094
|
get disabled() {
|
|
1116
1095
|
return this._disabled;
|
|
1117
1096
|
}
|
|
1118
|
-
set disabled(value) {
|
|
1119
|
-
// In the case the value is string or boolean
|
|
1120
|
-
const newValue = value;
|
|
1121
|
-
if (newValue !== this.disabled) {
|
|
1122
|
-
this._disabled = newValue;
|
|
1123
|
-
this.cdr.markForCheck();
|
|
1124
|
-
}
|
|
1125
|
-
}
|
|
1126
1097
|
/**
|
|
1127
1098
|
* Whether the checkbox is required. Default value : false
|
|
1128
1099
|
*/
|
|
1129
1100
|
get required() {
|
|
1130
1101
|
return this._required;
|
|
1131
1102
|
}
|
|
1132
|
-
set required(value) {
|
|
1133
|
-
this._required = value;
|
|
1134
|
-
}
|
|
1135
1103
|
/**
|
|
1136
1104
|
* Whether the checkbox is indeterminate. Default value : false
|
|
1137
1105
|
*/
|
|
1138
1106
|
get indeterminate() {
|
|
1139
1107
|
return this._indeterminate;
|
|
1140
1108
|
}
|
|
1109
|
+
get nativeElement() {
|
|
1110
|
+
return this.elementRef.nativeElement;
|
|
1111
|
+
}
|
|
1112
|
+
set checked(value) {
|
|
1113
|
+
if (value !== this.checked) {
|
|
1114
|
+
this._checked = value;
|
|
1115
|
+
this.cdr.markForCheck();
|
|
1116
|
+
}
|
|
1117
|
+
}
|
|
1118
|
+
set disabled(value) {
|
|
1119
|
+
// In the case the value is string or boolean
|
|
1120
|
+
const newValue = value;
|
|
1121
|
+
if (newValue !== this.disabled) {
|
|
1122
|
+
this._disabled = newValue;
|
|
1123
|
+
this.cdr.markForCheck();
|
|
1124
|
+
}
|
|
1125
|
+
}
|
|
1126
|
+
set required(value) {
|
|
1127
|
+
this._required = value;
|
|
1128
|
+
}
|
|
1141
1129
|
set indeterminate(value) {
|
|
1142
1130
|
const newValue = value;
|
|
1143
1131
|
if (newValue !== this._indeterminate) {
|
|
@@ -1147,9 +1135,6 @@ class BaoCheckboxComponent {
|
|
|
1147
1135
|
// Update the inderteminate value of the html element object
|
|
1148
1136
|
this.syncIndeterminate(this._indeterminate);
|
|
1149
1137
|
}
|
|
1150
|
-
get nativeElement() {
|
|
1151
|
-
return this.elementRef.nativeElement;
|
|
1152
|
-
}
|
|
1153
1138
|
ngOnInit() {
|
|
1154
1139
|
// Set all unique ids for the html elements
|
|
1155
1140
|
this.inputID = `${this.id}-input`;
|
|
@@ -1292,7 +1277,7 @@ class BaoCheckboxComponent {
|
|
|
1292
1277
|
}
|
|
1293
1278
|
}
|
|
1294
1279
|
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 });
|
|
1295
|
-
BaoCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoCheckboxComponent, selector: "bao-checkbox, [bao-checkbox]", inputs: {
|
|
1280
|
+
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: [
|
|
1296
1281
|
{
|
|
1297
1282
|
provide: NG_VALUE_ACCESSOR,
|
|
1298
1283
|
useExisting: forwardRef(() => BaoCheckboxComponent),
|
|
@@ -1317,15 +1302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1317
1302
|
'[class.bao-checkbox-required]': 'required',
|
|
1318
1303
|
'[class.bao-checkbox-hidden-label]': 'hiddenLabel'
|
|
1319
1304
|
}, 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"] }]
|
|
1320
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.FocusMonitor }]; }, propDecorators: {
|
|
1321
|
-
type: Input
|
|
1322
|
-
}], disabled: [{
|
|
1323
|
-
type: Input
|
|
1324
|
-
}], required: [{
|
|
1325
|
-
type: Input
|
|
1326
|
-
}], indeterminate: [{
|
|
1327
|
-
type: Input
|
|
1328
|
-
}], id: [{
|
|
1305
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.FocusMonitor }]; }, propDecorators: { id: [{
|
|
1329
1306
|
type: Input
|
|
1330
1307
|
}], ariaLabel: [{
|
|
1331
1308
|
type: Input,
|
|
@@ -1345,6 +1322,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1345
1322
|
}], inputElement: [{
|
|
1346
1323
|
type: ViewChild,
|
|
1347
1324
|
args: ['input', { static: false }]
|
|
1325
|
+
}], checked: [{
|
|
1326
|
+
type: Input
|
|
1327
|
+
}], disabled: [{
|
|
1328
|
+
type: Input
|
|
1329
|
+
}], required: [{
|
|
1330
|
+
type: Input
|
|
1331
|
+
}], indeterminate: [{
|
|
1332
|
+
type: Input
|
|
1348
1333
|
}] } });
|
|
1349
1334
|
class BaoCheckBoxDescription {
|
|
1350
1335
|
}
|
|
@@ -1669,17 +1654,6 @@ let radioGroupNextUniqueId = 0;
|
|
|
1669
1654
|
class BaoRadioButtonGroupComponent {
|
|
1670
1655
|
constructor(cdr) {
|
|
1671
1656
|
this.cdr = cdr;
|
|
1672
|
-
this._value = null;
|
|
1673
|
-
this._name = null;
|
|
1674
|
-
this._selected = null;
|
|
1675
|
-
this._isInitialized = false;
|
|
1676
|
-
this._disabled = false;
|
|
1677
|
-
this._required = false;
|
|
1678
|
-
this._uniqueId = `bao-checkbox-group-${++radioGroupNextUniqueId}`;
|
|
1679
|
-
/**
|
|
1680
|
-
* The checkbox group ID. It is set dynamically with an unique ID by default
|
|
1681
|
-
*/
|
|
1682
|
-
this.id = this._uniqueId;
|
|
1683
1657
|
/**
|
|
1684
1658
|
* Emit the value of the selected radio button
|
|
1685
1659
|
*/
|
|
@@ -1688,8 +1662,18 @@ class BaoRadioButtonGroupComponent {
|
|
|
1688
1662
|
* The aria-describedby for web accessibilty
|
|
1689
1663
|
*/
|
|
1690
1664
|
this.ariaDescribedby = null;
|
|
1665
|
+
this._value = null;
|
|
1666
|
+
this._name = null;
|
|
1667
|
+
this._selected = null;
|
|
1668
|
+
this._isInitialized = false;
|
|
1669
|
+
this._disabled = false;
|
|
1670
|
+
this._required = false;
|
|
1671
|
+
this._uniqueId = `bao-checkbox-group-${++radioGroupNextUniqueId}`;
|
|
1691
1672
|
this.onModelChange = () => undefined;
|
|
1692
1673
|
this.onTouch = () => undefined;
|
|
1674
|
+
if (!this.id) {
|
|
1675
|
+
this.id = this._uniqueId;
|
|
1676
|
+
}
|
|
1693
1677
|
}
|
|
1694
1678
|
/**
|
|
1695
1679
|
* Define the name property of all radio buttons. Default : null
|
|
@@ -1697,50 +1681,50 @@ class BaoRadioButtonGroupComponent {
|
|
|
1697
1681
|
get name() {
|
|
1698
1682
|
return this._name;
|
|
1699
1683
|
}
|
|
1700
|
-
set name(value) {
|
|
1701
|
-
this._name = value;
|
|
1702
|
-
this.updateRadioButtonNames();
|
|
1703
|
-
}
|
|
1704
1684
|
/**
|
|
1705
1685
|
* Define the value of the selected radio button. Default : null
|
|
1706
1686
|
*/
|
|
1707
1687
|
get value() {
|
|
1708
1688
|
return this._value;
|
|
1709
1689
|
}
|
|
1710
|
-
set value(newValue) {
|
|
1711
|
-
if (this._value !== newValue) {
|
|
1712
|
-
this._value = newValue;
|
|
1713
|
-
this.updateSelectedRadioFromValue();
|
|
1714
|
-
this.checkSelectedRadioButton();
|
|
1715
|
-
}
|
|
1716
|
-
}
|
|
1717
1690
|
/**
|
|
1718
1691
|
* Define which radio button is selected. Default : null
|
|
1719
1692
|
*/
|
|
1720
1693
|
get selected() {
|
|
1721
1694
|
return this._selected;
|
|
1722
1695
|
}
|
|
1723
|
-
set selected(selected) {
|
|
1724
|
-
this._selected = selected;
|
|
1725
|
-
this.value = selected ? selected.value : null;
|
|
1726
|
-
this.checkSelectedRadioButton();
|
|
1727
|
-
}
|
|
1728
1696
|
/**
|
|
1729
1697
|
* Whether the radio button groupd is disabled. Default : false
|
|
1730
1698
|
*/
|
|
1731
1699
|
get disabled() {
|
|
1732
1700
|
return this._disabled;
|
|
1733
1701
|
}
|
|
1734
|
-
set disabled(value) {
|
|
1735
|
-
this._disabled = coerceBooleanProperty(value);
|
|
1736
|
-
this.markRadiosForCheck();
|
|
1737
|
-
}
|
|
1738
1702
|
/**
|
|
1739
1703
|
* Whether the radio button groupd is required. Default : false
|
|
1740
1704
|
*/
|
|
1741
1705
|
get required() {
|
|
1742
1706
|
return this._required;
|
|
1743
1707
|
}
|
|
1708
|
+
set name(value) {
|
|
1709
|
+
this._name = value;
|
|
1710
|
+
this.updateRadioButtonNames();
|
|
1711
|
+
}
|
|
1712
|
+
set value(newValue) {
|
|
1713
|
+
if (this._value !== newValue) {
|
|
1714
|
+
this._value = newValue;
|
|
1715
|
+
this.updateSelectedRadioFromValue();
|
|
1716
|
+
this.checkSelectedRadioButton();
|
|
1717
|
+
}
|
|
1718
|
+
}
|
|
1719
|
+
set selected(selected) {
|
|
1720
|
+
this._selected = selected;
|
|
1721
|
+
this.value = selected ? selected.value : null;
|
|
1722
|
+
this.checkSelectedRadioButton();
|
|
1723
|
+
}
|
|
1724
|
+
set disabled(value) {
|
|
1725
|
+
this._disabled = coerceBooleanProperty(value);
|
|
1726
|
+
this.markRadiosForCheck();
|
|
1727
|
+
}
|
|
1744
1728
|
set required(value) {
|
|
1745
1729
|
this._required = coerceBooleanProperty(value);
|
|
1746
1730
|
this.markRadiosForCheck();
|
|
@@ -1862,7 +1846,7 @@ BaoRadioButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
|
|
|
1862
1846
|
multi: true
|
|
1863
1847
|
},
|
|
1864
1848
|
{ provide: BAO_RADIO_GROUP, useExisting: BaoRadioButtonGroupComponent }
|
|
1865
|
-
], queries: [{ propertyName: "
|
|
1849
|
+
], 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 });
|
|
1866
1850
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoRadioButtonGroupComponent, decorators: [{
|
|
1867
1851
|
type: Component,
|
|
1868
1852
|
args: [{ selector: 'bao-radio-button-group, [bao-radio-button-group], [baoRadioButtonGroup]', exportAs: 'baoRadioGroup', encapsulation: ViewEncapsulation.None, providers: [
|
|
@@ -1873,13 +1857,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1873
1857
|
},
|
|
1874
1858
|
{ provide: BAO_RADIO_GROUP, useExisting: BaoRadioButtonGroupComponent }
|
|
1875
1859
|
], 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"] }]
|
|
1876
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: {
|
|
1860
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
|
|
1861
|
+
type: Input
|
|
1862
|
+
}], change: [{
|
|
1863
|
+
type: Output
|
|
1864
|
+
}], staticContainer: [{
|
|
1877
1865
|
type: ContentChildren,
|
|
1878
1866
|
args: [forwardRef(() => BaoRadioButtonComponent), {
|
|
1879
1867
|
descendants: true
|
|
1880
1868
|
}]
|
|
1881
|
-
}
|
|
1882
|
-
type:
|
|
1869
|
+
}, {
|
|
1870
|
+
type: ViewChild,
|
|
1871
|
+
args: ['container', { static: false }]
|
|
1883
1872
|
}], name: [{
|
|
1884
1873
|
type: Input
|
|
1885
1874
|
}], value: [{
|
|
@@ -1890,11 +1879,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1890
1879
|
type: Input
|
|
1891
1880
|
}], required: [{
|
|
1892
1881
|
type: Input
|
|
1893
|
-
}], change: [{
|
|
1894
|
-
type: Output
|
|
1895
|
-
}], staticContainer: [{
|
|
1896
|
-
type: ViewChild,
|
|
1897
|
-
args: ['container', { static: false }]
|
|
1898
1882
|
}] } });
|
|
1899
1883
|
|
|
1900
1884
|
/**
|
|
@@ -1907,15 +1891,6 @@ class BaoRadioButtonComponent {
|
|
|
1907
1891
|
this.cdr = cdr;
|
|
1908
1892
|
this.focusMonitor = focusMonitor;
|
|
1909
1893
|
this.radioDispatcher = radioDispatcher;
|
|
1910
|
-
this._checked = false;
|
|
1911
|
-
this._disabled = false;
|
|
1912
|
-
this._required = false;
|
|
1913
|
-
this._value = null;
|
|
1914
|
-
this._uniqueId = `bao-radio-button-${++radioNextUniqueId}`;
|
|
1915
|
-
/**
|
|
1916
|
-
* The radio button ID. It is set dynamically with an unique ID by default
|
|
1917
|
-
*/
|
|
1918
|
-
this.id = this._uniqueId;
|
|
1919
1894
|
/**
|
|
1920
1895
|
* The aria-label for web accessibility
|
|
1921
1896
|
*/
|
|
@@ -1948,6 +1923,11 @@ class BaoRadioButtonComponent {
|
|
|
1948
1923
|
* The aria-labeledby id for web accessibilty
|
|
1949
1924
|
*/
|
|
1950
1925
|
this.ariaLabelledby = null;
|
|
1926
|
+
this._checked = false;
|
|
1927
|
+
this._disabled = false;
|
|
1928
|
+
this._required = false;
|
|
1929
|
+
this._value = null;
|
|
1930
|
+
this._uniqueId = `bao-radio-button-${++radioNextUniqueId}`;
|
|
1951
1931
|
/** Unregister function for radioDispatcher */
|
|
1952
1932
|
this._removeUniqueSelectionListener = () => undefined;
|
|
1953
1933
|
this.radioGroup = radioGroup;
|
|
@@ -1956,6 +1936,9 @@ class BaoRadioButtonComponent {
|
|
|
1956
1936
|
this.checked = false;
|
|
1957
1937
|
}
|
|
1958
1938
|
});
|
|
1939
|
+
if (!this.id) {
|
|
1940
|
+
this.id = this._uniqueId;
|
|
1941
|
+
}
|
|
1959
1942
|
}
|
|
1960
1943
|
/**
|
|
1961
1944
|
* Whether the radio button is checked. Default : false
|
|
@@ -1963,6 +1946,27 @@ class BaoRadioButtonComponent {
|
|
|
1963
1946
|
get checked() {
|
|
1964
1947
|
return this._checked;
|
|
1965
1948
|
}
|
|
1949
|
+
/**
|
|
1950
|
+
* Define the radio button value. Default : null
|
|
1951
|
+
*/
|
|
1952
|
+
get value() {
|
|
1953
|
+
return this._value;
|
|
1954
|
+
}
|
|
1955
|
+
/**
|
|
1956
|
+
* Whether the radio button is disabled. Default : false
|
|
1957
|
+
*/
|
|
1958
|
+
get disabled() {
|
|
1959
|
+
return this._disabled || (this.radioGroup && this.radioGroup.disabled);
|
|
1960
|
+
}
|
|
1961
|
+
/**
|
|
1962
|
+
* Whether the radio button is required. Default : false
|
|
1963
|
+
*/
|
|
1964
|
+
get required() {
|
|
1965
|
+
return this._required || (this.radioGroup && this.radioGroup.required);
|
|
1966
|
+
}
|
|
1967
|
+
get nativeElement() {
|
|
1968
|
+
return this.elementRef.nativeElement;
|
|
1969
|
+
}
|
|
1966
1970
|
set checked(value) {
|
|
1967
1971
|
const newCheckedState = coerceBooleanProperty(value);
|
|
1968
1972
|
if (this._checked !== newCheckedState) {
|
|
@@ -1983,12 +1987,6 @@ class BaoRadioButtonComponent {
|
|
|
1983
1987
|
this.cdr.markForCheck();
|
|
1984
1988
|
}
|
|
1985
1989
|
}
|
|
1986
|
-
/**
|
|
1987
|
-
* Define the radio button value. Default : null
|
|
1988
|
-
*/
|
|
1989
|
-
get value() {
|
|
1990
|
-
return this._value;
|
|
1991
|
-
}
|
|
1992
1990
|
set value(value) {
|
|
1993
1991
|
if (value !== this._value) {
|
|
1994
1992
|
this._value = value;
|
|
@@ -2002,27 +2000,12 @@ class BaoRadioButtonComponent {
|
|
|
2002
2000
|
}
|
|
2003
2001
|
}
|
|
2004
2002
|
}
|
|
2005
|
-
/**
|
|
2006
|
-
* Whether the radio button is disabled. Default : false
|
|
2007
|
-
*/
|
|
2008
|
-
get disabled() {
|
|
2009
|
-
return this._disabled || (this.radioGroup && this.radioGroup.disabled);
|
|
2010
|
-
}
|
|
2011
2003
|
set disabled(value) {
|
|
2012
2004
|
this.setDisabled(coerceBooleanProperty(value));
|
|
2013
2005
|
}
|
|
2014
|
-
/**
|
|
2015
|
-
* Whether the radio button is required. Default : false
|
|
2016
|
-
*/
|
|
2017
|
-
get required() {
|
|
2018
|
-
return this._required || (this.radioGroup && this.radioGroup.required);
|
|
2019
|
-
}
|
|
2020
2006
|
set required(value) {
|
|
2021
2007
|
this._required = coerceBooleanProperty(value);
|
|
2022
2008
|
}
|
|
2023
|
-
get nativeElement() {
|
|
2024
|
-
return this.elementRef.nativeElement;
|
|
2025
|
-
}
|
|
2026
2009
|
focus(options, origin) {
|
|
2027
2010
|
if (origin) {
|
|
2028
2011
|
this.focusMonitor.focusVia(this.inputElement, origin, options);
|
|
@@ -2114,7 +2097,7 @@ class BaoRadioButtonComponent {
|
|
|
2114
2097
|
}
|
|
2115
2098
|
}
|
|
2116
2099
|
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 });
|
|
2117
|
-
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"
|
|
2100
|
+
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: [
|
|
2118
2101
|
{
|
|
2119
2102
|
provide: NG_VALUE_ACCESSOR,
|
|
2120
2103
|
useExisting: forwardRef(() => BaoRadioButtonComponent),
|
|
@@ -2153,6 +2136,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2153
2136
|
type: Input
|
|
2154
2137
|
}], name: [{
|
|
2155
2138
|
type: Input
|
|
2139
|
+
}], hiddenLabel: [{
|
|
2140
|
+
type: Input
|
|
2141
|
+
}], change: [{
|
|
2142
|
+
type: Output
|
|
2143
|
+
}], inputElement: [{
|
|
2144
|
+
type: ViewChild,
|
|
2145
|
+
args: ['input', { static: false }]
|
|
2156
2146
|
}], checked: [{
|
|
2157
2147
|
type: Input
|
|
2158
2148
|
}], value: [{
|
|
@@ -2161,13 +2151,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2161
2151
|
type: Input
|
|
2162
2152
|
}], required: [{
|
|
2163
2153
|
type: Input
|
|
2164
|
-
}], hiddenLabel: [{
|
|
2165
|
-
type: Input
|
|
2166
|
-
}], change: [{
|
|
2167
|
-
type: Output
|
|
2168
|
-
}], inputElement: [{
|
|
2169
|
-
type: ViewChild,
|
|
2170
|
-
args: ['input', { static: false }]
|
|
2171
2154
|
}] } });
|
|
2172
2155
|
class BaoRadioDescription {
|
|
2173
2156
|
}
|
|
@@ -2240,8 +2223,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2240
2223
|
* See LICENSE file in the project root for full license information.
|
|
2241
2224
|
*/
|
|
2242
2225
|
const SPAN = 'span';
|
|
2243
|
-
const SPAN_TEXT_PROPERTY = 'textContent';
|
|
2244
|
-
const SCREEN_READER_CLASS_NAME = 'sr-only';
|
|
2226
|
+
const SPAN_TEXT_PROPERTY$1 = 'textContent';
|
|
2227
|
+
const SCREEN_READER_CLASS_NAME$1 = 'sr-only';
|
|
2245
2228
|
const BAO_ICON = 'bao-icon';
|
|
2246
2229
|
const HAS_ICON = 'has-icon';
|
|
2247
2230
|
class BaoTagComponent {
|
|
@@ -2270,8 +2253,8 @@ class BaoTagComponent {
|
|
|
2270
2253
|
}
|
|
2271
2254
|
addHiddenText() {
|
|
2272
2255
|
const screenReaderSpan = this.renderer.createElement(SPAN);
|
|
2273
|
-
this.renderer.setProperty(screenReaderSpan, SPAN_TEXT_PROPERTY, this.hiddenText);
|
|
2274
|
-
this.renderer.addClass(screenReaderSpan, SCREEN_READER_CLASS_NAME);
|
|
2256
|
+
this.renderer.setProperty(screenReaderSpan, SPAN_TEXT_PROPERTY$1, this.hiddenText);
|
|
2257
|
+
this.renderer.addClass(screenReaderSpan, SCREEN_READER_CLASS_NAME$1);
|
|
2275
2258
|
const labelChild = Array.from(this.nativeElement.children).find(c => c.localName === SPAN);
|
|
2276
2259
|
this.renderer.insertBefore(this.nativeElement, screenReaderSpan, labelChild);
|
|
2277
2260
|
}
|
|
@@ -2283,7 +2266,7 @@ class BaoTagComponent {
|
|
|
2283
2266
|
}
|
|
2284
2267
|
}
|
|
2285
2268
|
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 });
|
|
2286
|
-
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;
|
|
2269
|
+
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 });
|
|
2287
2270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTagComponent, decorators: [{
|
|
2288
2271
|
type: Component,
|
|
2289
2272
|
args: [{ selector: 'bao-tag, [bao-tag], [baoTag]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
@@ -2298,7 +2281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2298
2281
|
'[class.bao-tag-alert-strong]': 'type === "alert" && variant === "strong"',
|
|
2299
2282
|
'[class.bao-tag-negative-light]': 'type === "negative" && variant === "light"',
|
|
2300
2283
|
'[class.bao-tag-negative-strong]': 'type === "negative" && variant === "strong"'
|
|
2301
|
-
}, 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;
|
|
2284
|
+
}, 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"] }]
|
|
2302
2285
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { type: [{
|
|
2303
2286
|
type: Input
|
|
2304
2287
|
}], variant: [{
|
|
@@ -2327,23 +2310,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2327
2310
|
}]
|
|
2328
2311
|
}] });
|
|
2329
2312
|
|
|
2330
|
-
/*
|
|
2331
|
-
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2332
|
-
* Licensed under the MIT license.
|
|
2333
|
-
* See LICENSE file in the project root for full license information.
|
|
2334
|
-
*/
|
|
2335
|
-
|
|
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
|
-
var EDisplayMode;
|
|
2342
|
-
(function (EDisplayMode) {
|
|
2343
|
-
EDisplayMode["COMPACT"] = "compact";
|
|
2344
|
-
EDisplayMode["RESPONSIVE"] = "responsive";
|
|
2345
|
-
})(EDisplayMode || (EDisplayMode = {}));
|
|
2346
|
-
|
|
2347
2313
|
/*
|
|
2348
2314
|
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2349
2315
|
* Licensed under the MIT license.
|
|
@@ -2364,15 +2330,14 @@ class BaoSummaryComponent {
|
|
|
2364
2330
|
* RESPONSIVE (viewport width <=> is 576px)
|
|
2365
2331
|
* COMPACT (viewport width < 576px)
|
|
2366
2332
|
*/
|
|
2367
|
-
this.displayMode =
|
|
2333
|
+
this.displayMode = "responsive" /* RESPONSIVE */;
|
|
2368
2334
|
/**
|
|
2369
2335
|
* Initialize the ID for summary
|
|
2370
2336
|
*/
|
|
2371
2337
|
this._uniqueId = `bao-summary-${++summaryUniqueId}`;
|
|
2372
|
-
|
|
2373
|
-
|
|
2374
|
-
|
|
2375
|
-
this.id = this._uniqueId;
|
|
2338
|
+
if (!this.id) {
|
|
2339
|
+
this.id = this._uniqueId;
|
|
2340
|
+
}
|
|
2376
2341
|
}
|
|
2377
2342
|
get nativeElement() {
|
|
2378
2343
|
return this.elementRef.nativeElement;
|
|
@@ -2514,6 +2479,1389 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2514
2479
|
* See LICENSE file in the project root for full license information.
|
|
2515
2480
|
*/
|
|
2516
2481
|
|
|
2482
|
+
/*
|
|
2483
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2484
|
+
* Licensed under the MIT license.
|
|
2485
|
+
* See LICENSE file in the project root for full license information.
|
|
2486
|
+
*/
|
|
2487
|
+
class BaoAvatarContent {
|
|
2488
|
+
}
|
|
2489
|
+
BaoAvatarContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2490
|
+
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 });
|
|
2491
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarContent, decorators: [{
|
|
2492
|
+
type: Directive,
|
|
2493
|
+
args: [{
|
|
2494
|
+
selector: 'bao-avatar-content, [bao-avatar-content]',
|
|
2495
|
+
exportAs: 'baoAvatarContent',
|
|
2496
|
+
host: {
|
|
2497
|
+
class: 'bao-avatar-content'
|
|
2498
|
+
}
|
|
2499
|
+
}]
|
|
2500
|
+
}] });
|
|
2501
|
+
const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
|
|
2502
|
+
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>";
|
|
2503
|
+
const SCREEN_READER_CLASS_NAME = 'sr-only';
|
|
2504
|
+
const SPAN_TEXT_PROPERTY = 'textContent';
|
|
2505
|
+
class BaoAvatarComponent {
|
|
2506
|
+
constructor(renderer, elementRef) {
|
|
2507
|
+
this.renderer = renderer;
|
|
2508
|
+
this.elementRef = elementRef;
|
|
2509
|
+
/**
|
|
2510
|
+
* Name of the profile to be used as title of the avatar.
|
|
2511
|
+
*/
|
|
2512
|
+
this.profileName = 'Avatar du profil';
|
|
2513
|
+
/**
|
|
2514
|
+
* ID of the background color to be used if avatar's content is text.
|
|
2515
|
+
*/
|
|
2516
|
+
this.color = 'background-color-1';
|
|
2517
|
+
}
|
|
2518
|
+
get nativeElement() {
|
|
2519
|
+
return this.elementRef.nativeElement;
|
|
2520
|
+
}
|
|
2521
|
+
ngAfterViewInit() {
|
|
2522
|
+
if (!this.nativeElement.childNodes.length) {
|
|
2523
|
+
this.addIcon();
|
|
2524
|
+
}
|
|
2525
|
+
if (this.nativeElement.firstChild.nodeName === 'SPAN') {
|
|
2526
|
+
this.formatInitials(this.nativeElement.firstChild);
|
|
2527
|
+
}
|
|
2528
|
+
this.setProfileName(this.profileName, this.nativeElement.firstChild);
|
|
2529
|
+
}
|
|
2530
|
+
addIcon() {
|
|
2531
|
+
const div = this.renderer.createElement('DIV');
|
|
2532
|
+
div.innerHTML = SVG_PROFILE_ICON;
|
|
2533
|
+
const svg = div.querySelector('svg');
|
|
2534
|
+
const titleNode = this.renderer.createElement('title', SVG_NAMESPACE);
|
|
2535
|
+
const titleText = this.renderer.createText(this.profileName);
|
|
2536
|
+
this.renderer.appendChild(titleNode, titleText);
|
|
2537
|
+
this.renderer.insertBefore(svg, titleNode, svg.firstChild);
|
|
2538
|
+
this.renderer.appendChild(this.nativeElement, svg);
|
|
2539
|
+
}
|
|
2540
|
+
setProfileName(name, content) {
|
|
2541
|
+
switch (content.nodeName) {
|
|
2542
|
+
case 'IMG':
|
|
2543
|
+
this.renderer.setAttribute(content, 'alt', name);
|
|
2544
|
+
break;
|
|
2545
|
+
case 'SPAN':
|
|
2546
|
+
this.renderer.setAttribute(content, 'aria-hidden', 'true');
|
|
2547
|
+
const screenReaderSpan = this.renderer.createElement('span');
|
|
2548
|
+
this.renderer.setProperty(screenReaderSpan, SPAN_TEXT_PROPERTY, name);
|
|
2549
|
+
this.renderer.addClass(screenReaderSpan, SCREEN_READER_CLASS_NAME);
|
|
2550
|
+
this.renderer.insertBefore(this.nativeElement, screenReaderSpan, content);
|
|
2551
|
+
break;
|
|
2552
|
+
}
|
|
2553
|
+
}
|
|
2554
|
+
formatInitials(content) {
|
|
2555
|
+
this.renderer.setValue(content.firstChild, content.firstChild.nodeValue.slice(0, 2));
|
|
2556
|
+
this.renderer.addClass(this.nativeElement, 'display-color');
|
|
2557
|
+
}
|
|
2558
|
+
}
|
|
2559
|
+
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 });
|
|
2560
|
+
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 });
|
|
2561
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarComponent, decorators: [{
|
|
2562
|
+
type: Component,
|
|
2563
|
+
args: [{ selector: 'bao-avatar', encapsulation: ViewEncapsulation.None, host: {
|
|
2564
|
+
class: 'bao-avatar',
|
|
2565
|
+
'[class.bao-avatar-color-1]': 'color === "background-color-1"',
|
|
2566
|
+
'[class.bao-avatar-color-2]': 'color === "background-color-2"',
|
|
2567
|
+
'[class.bao-avatar-color-3]': 'color === "background-color-3"',
|
|
2568
|
+
'[class.bao-avatar-color-4]': 'color === "background-color-4"',
|
|
2569
|
+
'[class.bao-avatar-color-5]': 'color === "background-color-5"',
|
|
2570
|
+
'[class.bao-avatar-color-6]': 'color === "background-color-6"',
|
|
2571
|
+
'[class.bao-avatar-color-7]': 'color === "background-color-7"',
|
|
2572
|
+
'[class.bao-avatar-color-8]': 'color === "background-color-8"',
|
|
2573
|
+
'[class.bao-avatar-color-9]': 'color === "background-color-9"',
|
|
2574
|
+
'[class.bao-avatar-color-10]': 'color === "background-color-10"'
|
|
2575
|
+
}, 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"] }]
|
|
2576
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { profileName: [{
|
|
2577
|
+
type: Input
|
|
2578
|
+
}], color: [{
|
|
2579
|
+
type: Input
|
|
2580
|
+
}] } });
|
|
2581
|
+
|
|
2582
|
+
/*
|
|
2583
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2584
|
+
* Licensed under the MIT license.
|
|
2585
|
+
* See LICENSE file in the project root for full license information.
|
|
2586
|
+
*/
|
|
2587
|
+
const AVATAR_DIRECTIVES = [BaoAvatarComponent, BaoAvatarContent];
|
|
2588
|
+
class BaoAvatarModule {
|
|
2589
|
+
}
|
|
2590
|
+
BaoAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2591
|
+
BaoAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarModule, declarations: [BaoAvatarComponent, BaoAvatarContent], imports: [CommonModule], exports: [BaoAvatarComponent, BaoAvatarContent] });
|
|
2592
|
+
BaoAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarModule, imports: [[CommonModule]] });
|
|
2593
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarModule, decorators: [{
|
|
2594
|
+
type: NgModule,
|
|
2595
|
+
args: [{
|
|
2596
|
+
imports: [CommonModule],
|
|
2597
|
+
declarations: [AVATAR_DIRECTIVES],
|
|
2598
|
+
exports: [AVATAR_DIRECTIVES]
|
|
2599
|
+
}]
|
|
2600
|
+
}] });
|
|
2601
|
+
|
|
2602
|
+
/*
|
|
2603
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2604
|
+
* Licensed under the MIT license.
|
|
2605
|
+
* See LICENSE file in the project root for full license information.
|
|
2606
|
+
*/
|
|
2607
|
+
|
|
2608
|
+
/*
|
|
2609
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2610
|
+
* Licensed under the MIT license.
|
|
2611
|
+
* See LICENSE file in the project root for full license information.
|
|
2612
|
+
*/
|
|
2613
|
+
/**
|
|
2614
|
+
* Unique number to generate a unique ID
|
|
2615
|
+
*/
|
|
2616
|
+
let tabsNextUniqueId = 0;
|
|
2617
|
+
class BaoTabHeader {
|
|
2618
|
+
constructor(renderer, elementRef) {
|
|
2619
|
+
this.renderer = renderer;
|
|
2620
|
+
this.elementRef = elementRef;
|
|
2621
|
+
/**
|
|
2622
|
+
* Emits its index when tab is clicked
|
|
2623
|
+
*/
|
|
2624
|
+
this.onTabClick = new EventEmitter();
|
|
2625
|
+
}
|
|
2626
|
+
get nativeElement() {
|
|
2627
|
+
return this.elementRef.nativeElement;
|
|
2628
|
+
}
|
|
2629
|
+
onClick(el) {
|
|
2630
|
+
const tabIndex = el.id.split('-')[el.id.split('-').length - 1];
|
|
2631
|
+
this.onTabClick.emit(tabIndex);
|
|
2632
|
+
}
|
|
2633
|
+
ngAfterViewInit() {
|
|
2634
|
+
this.renderer.setAttribute(this.nativeElement, 'role', 'tab');
|
|
2635
|
+
this.renderer.setAttribute(this.nativeElement, 'aria-selected', 'false');
|
|
2636
|
+
this.renderer.setAttribute(this.nativeElement, 'tabindex', '-1');
|
|
2637
|
+
}
|
|
2638
|
+
}
|
|
2639
|
+
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 });
|
|
2640
|
+
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 });
|
|
2641
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabHeader, decorators: [{
|
|
2642
|
+
type: Directive,
|
|
2643
|
+
args: [{
|
|
2644
|
+
selector: 'bao-tab-header, [bao-tab-header]',
|
|
2645
|
+
exportAs: 'baoTabHeader',
|
|
2646
|
+
host: {
|
|
2647
|
+
class: 'bao-tab-header'
|
|
2648
|
+
}
|
|
2649
|
+
}]
|
|
2650
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { onTabClick: [{
|
|
2651
|
+
type: Output
|
|
2652
|
+
}], onClick: [{
|
|
2653
|
+
type: HostListener,
|
|
2654
|
+
args: ['click', ['$event.target']]
|
|
2655
|
+
}] } });
|
|
2656
|
+
class BaoTabPanel {
|
|
2657
|
+
constructor(renderer, elementRef) {
|
|
2658
|
+
this.renderer = renderer;
|
|
2659
|
+
this.elementRef = elementRef;
|
|
2660
|
+
}
|
|
2661
|
+
get nativeElement() {
|
|
2662
|
+
return this.elementRef.nativeElement;
|
|
2663
|
+
}
|
|
2664
|
+
ngAfterViewInit() {
|
|
2665
|
+
this.renderer.setAttribute(this.nativeElement, 'role', 'tabpanel');
|
|
2666
|
+
this.renderer.setAttribute(this.nativeElement, 'hidden', 'true');
|
|
2667
|
+
this.renderer.setAttribute(this.nativeElement, 'tabindex', '0');
|
|
2668
|
+
this.renderer.setAttribute(this.nativeElement, 'aria-expanded', 'false');
|
|
2669
|
+
}
|
|
2670
|
+
}
|
|
2671
|
+
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 });
|
|
2672
|
+
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 });
|
|
2673
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabPanel, decorators: [{
|
|
2674
|
+
type: Directive,
|
|
2675
|
+
args: [{
|
|
2676
|
+
selector: 'bao-panel, [bao-panel]',
|
|
2677
|
+
exportAs: 'baoPanel',
|
|
2678
|
+
host: {
|
|
2679
|
+
class: 'bao-panel'
|
|
2680
|
+
}
|
|
2681
|
+
}]
|
|
2682
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; } });
|
|
2683
|
+
class BaoTablistComponent {
|
|
2684
|
+
constructor(renderer, elementRef) {
|
|
2685
|
+
this.renderer = renderer;
|
|
2686
|
+
this.elementRef = elementRef;
|
|
2687
|
+
/**
|
|
2688
|
+
* Size of the tabs displayed
|
|
2689
|
+
*/
|
|
2690
|
+
this.size = 'large';
|
|
2691
|
+
/**
|
|
2692
|
+
* Optionnal value to be used as aria-label property on tablist component
|
|
2693
|
+
*/
|
|
2694
|
+
this.ariaLabel = 'onglets';
|
|
2695
|
+
/**
|
|
2696
|
+
* Emits the index of the new active tab
|
|
2697
|
+
*/
|
|
2698
|
+
this.activeTabChange = new EventEmitter();
|
|
2699
|
+
this.uniqueId = `bao-tablist-${tabsNextUniqueId++}`;
|
|
2700
|
+
}
|
|
2701
|
+
get nativeElement() {
|
|
2702
|
+
return this.elementRef.nativeElement;
|
|
2703
|
+
}
|
|
2704
|
+
get tabs() {
|
|
2705
|
+
return this.elementRef.nativeElement.children;
|
|
2706
|
+
}
|
|
2707
|
+
leftKeyEvent() {
|
|
2708
|
+
if (document.activeElement.parentElement.id === this.uniqueId) {
|
|
2709
|
+
this.activeTabIndex = this.getNextActivableTabIndex(parseInt(this.activeTabIndex), false);
|
|
2710
|
+
this.changeActiveTab(this.activeTabIndex, true);
|
|
2711
|
+
this.activeTabChange.emit(this.activeTabIndex);
|
|
2712
|
+
}
|
|
2713
|
+
}
|
|
2714
|
+
rightKeyEvent() {
|
|
2715
|
+
if (document.activeElement.parentElement.id === this.uniqueId) {
|
|
2716
|
+
this.activeTabIndex = this.getNextActivableTabIndex(parseInt(this.activeTabIndex), true);
|
|
2717
|
+
this.changeActiveTab(this.activeTabIndex, true);
|
|
2718
|
+
this.activeTabChange.emit(this.activeTabIndex);
|
|
2719
|
+
}
|
|
2720
|
+
}
|
|
2721
|
+
/**
|
|
2722
|
+
* Makes the focus visible on tab header when changing from mouse to keyboard navigation
|
|
2723
|
+
*/
|
|
2724
|
+
tabKeyEvent() {
|
|
2725
|
+
if (document.activeElement.parentElement.id === this.uniqueId) {
|
|
2726
|
+
this.renderer.addClass(this.tabs[this.activeTabIndex], 'focus-visible');
|
|
2727
|
+
}
|
|
2728
|
+
}
|
|
2729
|
+
/**
|
|
2730
|
+
* Makes the focus visible on tab header when changing from mouse to keyboard navigation
|
|
2731
|
+
*/
|
|
2732
|
+
tabShiftKeyEvent() {
|
|
2733
|
+
if (document.activeElement.parentElement.id === this.uniqueId) {
|
|
2734
|
+
this.renderer.addClass(this.tabs[this.activeTabIndex], 'focus-visible');
|
|
2735
|
+
}
|
|
2736
|
+
}
|
|
2737
|
+
ngAfterViewInit() {
|
|
2738
|
+
this.setTablistAttributes();
|
|
2739
|
+
if (this.nativeElement.childElementCount) {
|
|
2740
|
+
this.setInitialActiveTab();
|
|
2741
|
+
}
|
|
2742
|
+
}
|
|
2743
|
+
ngAfterContentInit() {
|
|
2744
|
+
this.tabHeaders.forEach((tab) => {
|
|
2745
|
+
tab.onTabClick.subscribe((index) => {
|
|
2746
|
+
this.renderer.removeClass(this.tabs[index], 'focus-visible');
|
|
2747
|
+
this.activeTabIndex = index;
|
|
2748
|
+
this.changeActiveTab(index, false);
|
|
2749
|
+
this.activeTabChange.emit(index);
|
|
2750
|
+
});
|
|
2751
|
+
});
|
|
2752
|
+
}
|
|
2753
|
+
ngOnDestroy() {
|
|
2754
|
+
this.tabHeaders.forEach((tab) => {
|
|
2755
|
+
tab.onTabClick.unsubscribe();
|
|
2756
|
+
});
|
|
2757
|
+
}
|
|
2758
|
+
setTablistAttributes() {
|
|
2759
|
+
this.renderer.setAttribute(this.nativeElement, 'role', 'tablist');
|
|
2760
|
+
this.renderer.setAttribute(this.nativeElement, 'aria-label', this.ariaLabel);
|
|
2761
|
+
this.renderer.setProperty(this.nativeElement, 'id', this.uniqueId);
|
|
2762
|
+
}
|
|
2763
|
+
setInitialActiveTab() {
|
|
2764
|
+
const firstTabIndex = Array.from(this.tabs).findIndex((tab) => !tab.attributes['disabled']);
|
|
2765
|
+
this.activeTabIndex = firstTabIndex.toString();
|
|
2766
|
+
this.renderer.setAttribute(this.tabs[firstTabIndex], 'aria-selected', 'true');
|
|
2767
|
+
this.renderer.addClass(this.tabs[firstTabIndex], 'active');
|
|
2768
|
+
this.renderer.addClass(this.tabs[firstTabIndex], 'focus-visible');
|
|
2769
|
+
this.renderer.removeAttribute(this.tabs[firstTabIndex], 'tabindex');
|
|
2770
|
+
}
|
|
2771
|
+
changeActiveTab(newActiveTabIndex, isFocusVisible) {
|
|
2772
|
+
Array.from(this.tabs).forEach((tab) => {
|
|
2773
|
+
if (tab.id === `bao-tab-${newActiveTabIndex}`) {
|
|
2774
|
+
if (isFocusVisible) {
|
|
2775
|
+
this.renderer.addClass(tab, 'focus-visible');
|
|
2776
|
+
}
|
|
2777
|
+
this.renderer.setAttribute(tab, 'aria-selected', 'true');
|
|
2778
|
+
this.renderer.addClass(tab, 'active');
|
|
2779
|
+
this.renderer.removeAttribute(tab, 'tabindex');
|
|
2780
|
+
tab.focus();
|
|
2781
|
+
}
|
|
2782
|
+
else {
|
|
2783
|
+
this.renderer.setAttribute(tab, 'aria-selected', 'false');
|
|
2784
|
+
this.renderer.removeClass(tab, 'active');
|
|
2785
|
+
this.renderer.setAttribute(tab, 'tabindex', '-1');
|
|
2786
|
+
this.renderer.removeClass(tab, 'focus-visible');
|
|
2787
|
+
}
|
|
2788
|
+
});
|
|
2789
|
+
}
|
|
2790
|
+
/**
|
|
2791
|
+
* Finds the next activable tab index when navigating with left and right arrow keys
|
|
2792
|
+
* @param currentIndex Tab index which currently has focus
|
|
2793
|
+
* @param isRight Whether the tab navigation is going in the right direction or not
|
|
2794
|
+
* @returns Index of the new tab that will receive focus
|
|
2795
|
+
*/
|
|
2796
|
+
getNextActivableTabIndex(currentIndex, isRight) {
|
|
2797
|
+
const nextIndex = isRight ? currentIndex + 1 : currentIndex - 1;
|
|
2798
|
+
const nextIndexInTablist = ((nextIndex % this.tabs.length) + this.tabs.length) % this.tabs.length;
|
|
2799
|
+
if (this.tabs[nextIndexInTablist].attributes['disabled']) {
|
|
2800
|
+
return this.getNextActivableTabIndex(nextIndexInTablist, isRight);
|
|
2801
|
+
}
|
|
2802
|
+
return nextIndexInTablist.toString();
|
|
2803
|
+
}
|
|
2804
|
+
}
|
|
2805
|
+
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 });
|
|
2806
|
+
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 });
|
|
2807
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTablistComponent, decorators: [{
|
|
2808
|
+
type: Component,
|
|
2809
|
+
args: [{ selector: 'bao-tablist, [bao-tablist]', encapsulation: ViewEncapsulation.None, host: {
|
|
2810
|
+
class: 'bao-tablist',
|
|
2811
|
+
'[class.bao-tablist-small]': 'size === "small"',
|
|
2812
|
+
'[class.bao-tablist-medium]': 'size === "medium"',
|
|
2813
|
+
'[class.bao-tablist-large]': 'size === "large"'
|
|
2814
|
+
}, 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"] }]
|
|
2815
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { tabHeaders: [{
|
|
2816
|
+
type: ContentChildren,
|
|
2817
|
+
args: [BaoTabHeader]
|
|
2818
|
+
}], size: [{
|
|
2819
|
+
type: Input
|
|
2820
|
+
}], ariaLabel: [{
|
|
2821
|
+
type: Input
|
|
2822
|
+
}], activeTabChange: [{
|
|
2823
|
+
type: Output
|
|
2824
|
+
}], leftKeyEvent: [{
|
|
2825
|
+
type: HostListener,
|
|
2826
|
+
args: ['window:keydown.arrowleft']
|
|
2827
|
+
}], rightKeyEvent: [{
|
|
2828
|
+
type: HostListener,
|
|
2829
|
+
args: ['window:keydown.arrowright']
|
|
2830
|
+
}], tabKeyEvent: [{
|
|
2831
|
+
type: HostListener,
|
|
2832
|
+
args: ['window:keydown.tab']
|
|
2833
|
+
}], tabShiftKeyEvent: [{
|
|
2834
|
+
type: HostListener,
|
|
2835
|
+
args: ['window:keydown.shift.tab']
|
|
2836
|
+
}] } });
|
|
2837
|
+
class BaoTabsContainer {
|
|
2838
|
+
constructor(renderer, elementRef) {
|
|
2839
|
+
this.renderer = renderer;
|
|
2840
|
+
this.elementRef = elementRef;
|
|
2841
|
+
this.panelIdPrefix = 'bao-panel-';
|
|
2842
|
+
this.tabIdPrefix = 'bao-tab-';
|
|
2843
|
+
}
|
|
2844
|
+
get tabs() {
|
|
2845
|
+
return this.elementRef.nativeElement.querySelector('.bao-tablist').children;
|
|
2846
|
+
}
|
|
2847
|
+
get panels() {
|
|
2848
|
+
return this.elementRef.nativeElement.querySelectorAll('.bao-panel');
|
|
2849
|
+
}
|
|
2850
|
+
ngAfterViewInit() {
|
|
2851
|
+
this.setInitialActivePanel();
|
|
2852
|
+
Array.from(this.tabs).forEach((tab, idx) => {
|
|
2853
|
+
const tabId = `${this.tabIdPrefix}${idx}`;
|
|
2854
|
+
const panelId = `${this.panelIdPrefix}${idx}`;
|
|
2855
|
+
this.renderer.setProperty(tab, 'id', tabId);
|
|
2856
|
+
this.renderer.setProperty(this.panels[idx], 'id', panelId);
|
|
2857
|
+
this.renderer.setAttribute(tab, 'aria-controls', panelId);
|
|
2858
|
+
this.renderer.setAttribute(this.panels[idx], 'aria-labelledby', tabId);
|
|
2859
|
+
});
|
|
2860
|
+
}
|
|
2861
|
+
ngAfterContentInit() {
|
|
2862
|
+
this.tablist.activeTabChange.subscribe((index) => this.changeActivePanel(index));
|
|
2863
|
+
}
|
|
2864
|
+
ngOnDestroy() {
|
|
2865
|
+
this.tablist.activeTabChange.unsubscribe();
|
|
2866
|
+
}
|
|
2867
|
+
setInitialActivePanel() {
|
|
2868
|
+
const firstTabIndex = Array.from(this.tabs).findIndex((tab) => !tab.attributes['disabled']);
|
|
2869
|
+
this.renderer.removeAttribute(this.panels[firstTabIndex], 'hidden');
|
|
2870
|
+
this.renderer.setAttribute(this.panels[firstTabIndex], 'aria-expanded', 'true');
|
|
2871
|
+
}
|
|
2872
|
+
changeActivePanel(newActiveId) {
|
|
2873
|
+
this.panels.forEach((panel) => {
|
|
2874
|
+
if (panel.id === `${this.panelIdPrefix}${newActiveId}`) {
|
|
2875
|
+
this.renderer.removeAttribute(panel, 'hidden');
|
|
2876
|
+
this.renderer.setAttribute(panel, 'aria-expanded', 'true');
|
|
2877
|
+
}
|
|
2878
|
+
else {
|
|
2879
|
+
this.renderer.setAttribute(panel, 'hidden', 'true');
|
|
2880
|
+
this.renderer.setAttribute(panel, 'aria-expanded', 'false');
|
|
2881
|
+
}
|
|
2882
|
+
});
|
|
2883
|
+
}
|
|
2884
|
+
}
|
|
2885
|
+
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 });
|
|
2886
|
+
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 });
|
|
2887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsContainer, decorators: [{
|
|
2888
|
+
type: Directive,
|
|
2889
|
+
args: [{
|
|
2890
|
+
selector: 'bao-tabs, [bao-tabs]',
|
|
2891
|
+
exportAs: 'baoTabs',
|
|
2892
|
+
host: {
|
|
2893
|
+
class: 'bao-tabs'
|
|
2894
|
+
}
|
|
2895
|
+
}]
|
|
2896
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { tablist: [{
|
|
2897
|
+
type: ContentChild,
|
|
2898
|
+
args: [BaoTablistComponent]
|
|
2899
|
+
}] } });
|
|
2900
|
+
|
|
2901
|
+
/*
|
|
2902
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2903
|
+
* Licensed under the MIT license.
|
|
2904
|
+
* See LICENSE file in the project root for full license information.
|
|
2905
|
+
*/
|
|
2906
|
+
const TABS_DIRECTIVES = [
|
|
2907
|
+
BaoTabsContainer,
|
|
2908
|
+
BaoTablistComponent,
|
|
2909
|
+
BaoTabHeader,
|
|
2910
|
+
BaoTabPanel
|
|
2911
|
+
];
|
|
2912
|
+
class BaoTabsModule {
|
|
2913
|
+
}
|
|
2914
|
+
BaoTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2915
|
+
BaoTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsModule, declarations: [BaoTabsContainer,
|
|
2916
|
+
BaoTablistComponent,
|
|
2917
|
+
BaoTabHeader,
|
|
2918
|
+
BaoTabPanel], imports: [CommonModule], exports: [BaoTabsContainer,
|
|
2919
|
+
BaoTablistComponent,
|
|
2920
|
+
BaoTabHeader,
|
|
2921
|
+
BaoTabPanel] });
|
|
2922
|
+
BaoTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsModule, imports: [[CommonModule]] });
|
|
2923
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsModule, decorators: [{
|
|
2924
|
+
type: NgModule,
|
|
2925
|
+
args: [{
|
|
2926
|
+
imports: [CommonModule],
|
|
2927
|
+
declarations: [TABS_DIRECTIVES],
|
|
2928
|
+
exports: [TABS_DIRECTIVES]
|
|
2929
|
+
}]
|
|
2930
|
+
}] });
|
|
2931
|
+
|
|
2932
|
+
/*
|
|
2933
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2934
|
+
* Licensed under the MIT license.
|
|
2935
|
+
* See LICENSE file in the project root for full license information.
|
|
2936
|
+
*/
|
|
2937
|
+
|
|
2938
|
+
/*
|
|
2939
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2940
|
+
* Licensed under the MIT license.
|
|
2941
|
+
* See LICENSE file in the project root for full license information.
|
|
2942
|
+
*/
|
|
2943
|
+
/**
|
|
2944
|
+
* Animations used by MatDialog.
|
|
2945
|
+
* @docs-private
|
|
2946
|
+
*/
|
|
2947
|
+
const baoModalAnimations = {
|
|
2948
|
+
/** Animation that is applied on the modal container by default. */
|
|
2949
|
+
modalContainer: trigger('modalContainer', [
|
|
2950
|
+
// Note: The `enter` animation transitions to `transform: none`, because for some reason
|
|
2951
|
+
// specifying the transform explicitly, causes IE both to blur the modal content and
|
|
2952
|
+
// decimate the animation performance. Leaving it as `none` solves both issues.
|
|
2953
|
+
state('void, exit', style({ opacity: 0, transform: 'scale(0.7)' })),
|
|
2954
|
+
state('enter', style({ transform: 'none' })),
|
|
2955
|
+
transition('* => enter', group([
|
|
2956
|
+
animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'none', opacity: 1 })),
|
|
2957
|
+
query('@*', animateChild(), { optional: true })
|
|
2958
|
+
])),
|
|
2959
|
+
transition('* => void, * => exit', group([
|
|
2960
|
+
animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 0 })),
|
|
2961
|
+
query('@*', animateChild(), { optional: true })
|
|
2962
|
+
]))
|
|
2963
|
+
])
|
|
2964
|
+
};
|
|
2965
|
+
|
|
2966
|
+
/*
|
|
2967
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2968
|
+
* Licensed under the MIT license.
|
|
2969
|
+
* See LICENSE file in the project root for full license information.
|
|
2970
|
+
*/
|
|
2971
|
+
var eModalDesktopWidthSize;
|
|
2972
|
+
(function (eModalDesktopWidthSize) {
|
|
2973
|
+
eModalDesktopWidthSize["SMALL"] = "bao-modal-sm";
|
|
2974
|
+
eModalDesktopWidthSize["MEDIUM"] = "bao-modal-md";
|
|
2975
|
+
eModalDesktopWidthSize["LARGE"] = "bao-modal-lg"; // Full width minus 32px (global margin : left and rigth)
|
|
2976
|
+
})(eModalDesktopWidthSize || (eModalDesktopWidthSize = {}));
|
|
2977
|
+
var eModalMobileWidthSize;
|
|
2978
|
+
(function (eModalMobileWidthSize) {
|
|
2979
|
+
eModalMobileWidthSize["FULL"] = "bao-modal-mobil-full";
|
|
2980
|
+
eModalMobileWidthSize["COMPACT"] = "bao-modal-mobil-compact"; // 300px
|
|
2981
|
+
})(eModalMobileWidthSize || (eModalMobileWidthSize = {}));
|
|
2982
|
+
/**
|
|
2983
|
+
* Configuration for opening a modal dialog with the BaoModal service.
|
|
2984
|
+
*/
|
|
2985
|
+
class BaoModalInitialConfig {
|
|
2986
|
+
constructor() {
|
|
2987
|
+
/** The ARIA role of the dialog element. */
|
|
2988
|
+
this.role = 'dialog';
|
|
2989
|
+
/** Custom class for the overlay pane. */
|
|
2990
|
+
this.panelClass = '';
|
|
2991
|
+
/** Whether the dialog has a backdrop. */
|
|
2992
|
+
this.hasBackdrop = true;
|
|
2993
|
+
/** Custom class for the backdrop. */
|
|
2994
|
+
this.backdropClass = '';
|
|
2995
|
+
/** Whether the user can use escape or clicking on the backdrop to close the modal. */
|
|
2996
|
+
this.disableClose = false;
|
|
2997
|
+
/** Width of the dialog. */
|
|
2998
|
+
this.width = '';
|
|
2999
|
+
/** Height of the dialog. */
|
|
3000
|
+
this.height = '';
|
|
3001
|
+
/** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */
|
|
3002
|
+
this.maxWidth = '80vw';
|
|
3003
|
+
/** Data being injected into the child component. */
|
|
3004
|
+
this.data = null;
|
|
3005
|
+
/** ID of the element that describes the dialog. */
|
|
3006
|
+
this.ariaDescribedBy = null;
|
|
3007
|
+
/** ID of the element that labels the dialog. */
|
|
3008
|
+
this.ariaLabelledBy = null;
|
|
3009
|
+
/** Aria label to assign to the dialog element. */
|
|
3010
|
+
this.ariaLabel = null;
|
|
3011
|
+
/**
|
|
3012
|
+
* Where the dialog should focus on open.
|
|
3013
|
+
*/
|
|
3014
|
+
this.autoFocus = 'first-tabbable';
|
|
3015
|
+
/**
|
|
3016
|
+
* Whether the dialog should restore focus to the
|
|
3017
|
+
* previously-focused element, after it's closed.
|
|
3018
|
+
*/
|
|
3019
|
+
this.restoreFocus = true;
|
|
3020
|
+
/** Whether to wait for the opening animation to finish before trapping focus. */
|
|
3021
|
+
this.delayFocusTrap = true;
|
|
3022
|
+
/**
|
|
3023
|
+
* Whether the dialog should close when the user goes backwards/forwards in history.
|
|
3024
|
+
* Note that this usually doesn't include clicking on links (unless the user is using
|
|
3025
|
+
* the `HashLocationStrategy`).
|
|
3026
|
+
*/
|
|
3027
|
+
this.closeOnNavigation = true;
|
|
3028
|
+
}
|
|
3029
|
+
}
|
|
3030
|
+
|
|
3031
|
+
/**
|
|
3032
|
+
* Throws an exception for the case when a ComponentPortal is
|
|
3033
|
+
* attached to a DomPortalOutlet without an origin.
|
|
3034
|
+
* @docs-private
|
|
3035
|
+
*/
|
|
3036
|
+
function throwBaoModalContentAlreadyAttachedError() {
|
|
3037
|
+
throw Error('Attempting to attach modal content after content is already attached');
|
|
3038
|
+
}
|
|
3039
|
+
/**
|
|
3040
|
+
* Base class for the `BaoModalContainer`. The base class does not implement
|
|
3041
|
+
* animations as these are left to implementers of the modal container.
|
|
3042
|
+
*/
|
|
3043
|
+
class _BaoModalContainerBase extends BasePortalOutlet {
|
|
3044
|
+
constructor(_elementRef, _focusTrapFactory, _changeDetectorRef, _document,
|
|
3045
|
+
/** The modal configuration. */
|
|
3046
|
+
_config, _interactivityChecker, _ngZone, _focusMonitor) {
|
|
3047
|
+
super();
|
|
3048
|
+
this._elementRef = _elementRef;
|
|
3049
|
+
this._focusTrapFactory = _focusTrapFactory;
|
|
3050
|
+
this._changeDetectorRef = _changeDetectorRef;
|
|
3051
|
+
this._config = _config;
|
|
3052
|
+
this._interactivityChecker = _interactivityChecker;
|
|
3053
|
+
this._ngZone = _ngZone;
|
|
3054
|
+
this._focusMonitor = _focusMonitor;
|
|
3055
|
+
/** Emits when an animation state changes. */
|
|
3056
|
+
this._animationStateChanged = new EventEmitter();
|
|
3057
|
+
/**
|
|
3058
|
+
* Type of interaction that led to the modal being closed. This is used to determine
|
|
3059
|
+
* whether the focus style will be applied when returning focus to its original location
|
|
3060
|
+
* after the modal is closed.
|
|
3061
|
+
*/
|
|
3062
|
+
this._closeInteractionType = null;
|
|
3063
|
+
/** Element that was focused before the modal was opened. Save this to restore upon close. */
|
|
3064
|
+
this._elementFocusedBeforeDialogWasOpened = null;
|
|
3065
|
+
this._ariaLabelledBy = _config.ariaLabelledBy || null;
|
|
3066
|
+
this._document = _document;
|
|
3067
|
+
}
|
|
3068
|
+
/** Initializes the modal container with the attached content. */
|
|
3069
|
+
_initializeWithAttachedContent() {
|
|
3070
|
+
this._setupFocusTrap();
|
|
3071
|
+
// Save the previously focused element. This element will be re-focused
|
|
3072
|
+
// when the modal closes.
|
|
3073
|
+
this._capturePreviouslyFocusedElement();
|
|
3074
|
+
}
|
|
3075
|
+
/**
|
|
3076
|
+
* Attach a ComponentPortal as content to this modal container.
|
|
3077
|
+
*/
|
|
3078
|
+
attachComponentPortal(portal) {
|
|
3079
|
+
return this._portalOutlet.attachComponentPortal(portal);
|
|
3080
|
+
}
|
|
3081
|
+
/**
|
|
3082
|
+
* Attach a TemplatePortal as content to this modal container.
|
|
3083
|
+
*/
|
|
3084
|
+
attachTemplatePortal(portal) {
|
|
3085
|
+
return this._portalOutlet.attachTemplatePortal(portal);
|
|
3086
|
+
}
|
|
3087
|
+
/** Moves focus back into the modal if it was moved out. */
|
|
3088
|
+
async _recaptureFocus() {
|
|
3089
|
+
if (!this._containsFocus()) {
|
|
3090
|
+
await this._trapFocus();
|
|
3091
|
+
}
|
|
3092
|
+
}
|
|
3093
|
+
/**
|
|
3094
|
+
* Moves the focus inside the focus trap. When autoFocus is not set to 'modal', if focus
|
|
3095
|
+
* cannot be moved then focus will go to the modal container.
|
|
3096
|
+
*/
|
|
3097
|
+
async _trapFocus() {
|
|
3098
|
+
const element = this._elementRef.nativeElement;
|
|
3099
|
+
// If were to attempt to focus immediately, then the content of the modal would not yet be
|
|
3100
|
+
// ready in instances where change detection has to run first. To deal with this, we simply
|
|
3101
|
+
// wait for the microtask queue to be empty when setting focus when autoFocus isn't set to
|
|
3102
|
+
// modal. If the element inside the modal can't be focused, then the container is focused
|
|
3103
|
+
// so the user can't tab into other elements behind it.
|
|
3104
|
+
switch (this._config.autoFocus) {
|
|
3105
|
+
case 'modal':
|
|
3106
|
+
// Ensure that focus is on the modal container. It's possible that a different
|
|
3107
|
+
// component tried to move focus while the open animation was running. See:
|
|
3108
|
+
// https://github.com/angular/components/issues/16215. Note that we only want to do this
|
|
3109
|
+
// if the focus isn't inside the modal already, because it's possible that the consumer
|
|
3110
|
+
// turned off `autoFocus` in order to move focus themselves.
|
|
3111
|
+
if (!this._containsFocus()) {
|
|
3112
|
+
element.focus();
|
|
3113
|
+
}
|
|
3114
|
+
break;
|
|
3115
|
+
case 'first-tabbable':
|
|
3116
|
+
// If we weren't able to find a focusable element in the modal, then focus the modal
|
|
3117
|
+
// container instead.
|
|
3118
|
+
const focusedSuccessfully = await this._focusTrap.focusInitialElementWhenReady();
|
|
3119
|
+
if (!focusedSuccessfully) {
|
|
3120
|
+
this._focusDialogContainer();
|
|
3121
|
+
}
|
|
3122
|
+
break;
|
|
3123
|
+
case 'first-heading':
|
|
3124
|
+
this._focusByCssSelector('h1, h2, h3, h4, h5, h6, [role="heading"]');
|
|
3125
|
+
break;
|
|
3126
|
+
default:
|
|
3127
|
+
this._focusByCssSelector(this._config.autoFocus);
|
|
3128
|
+
break;
|
|
3129
|
+
}
|
|
3130
|
+
}
|
|
3131
|
+
/** Restores focus to the element that was focused before the modal opened. */
|
|
3132
|
+
_restoreFocus() {
|
|
3133
|
+
const previousElement = this._elementFocusedBeforeDialogWasOpened;
|
|
3134
|
+
// We need the extra check, because IE can set the `activeElement` to null in some cases.
|
|
3135
|
+
if (this._config.restoreFocus &&
|
|
3136
|
+
previousElement &&
|
|
3137
|
+
typeof previousElement.focus === 'function') {
|
|
3138
|
+
const activeElement = _getFocusedElementPierceShadowDom();
|
|
3139
|
+
const element = this._elementRef.nativeElement;
|
|
3140
|
+
// Make sure that focus is still inside the modal or is on the body (usually because a
|
|
3141
|
+
// non-focusable element like the backdrop was clicked) before moving it. It's possible that
|
|
3142
|
+
// the consumer moved it themselves before the animation was done, in which case we shouldn't
|
|
3143
|
+
// do anything.
|
|
3144
|
+
if (!activeElement ||
|
|
3145
|
+
activeElement === this._document.body ||
|
|
3146
|
+
activeElement === element ||
|
|
3147
|
+
element.contains(activeElement)) {
|
|
3148
|
+
if (this._focusMonitor) {
|
|
3149
|
+
this._focusMonitor.focusVia(previousElement, this._closeInteractionType);
|
|
3150
|
+
this._closeInteractionType = null;
|
|
3151
|
+
}
|
|
3152
|
+
else {
|
|
3153
|
+
previousElement.focus();
|
|
3154
|
+
}
|
|
3155
|
+
}
|
|
3156
|
+
}
|
|
3157
|
+
if (this._focusTrap) {
|
|
3158
|
+
this._focusTrap.destroy();
|
|
3159
|
+
}
|
|
3160
|
+
}
|
|
3161
|
+
/**
|
|
3162
|
+
* Focuses the provided element. If the element is not focusable, it will add a tabIndex
|
|
3163
|
+
* attribute to forcefully focus it. The attribute is removed after focus is moved.
|
|
3164
|
+
*/
|
|
3165
|
+
_forceFocus(element, options) {
|
|
3166
|
+
if (!this._interactivityChecker.isFocusable(element)) {
|
|
3167
|
+
element.tabIndex = -1;
|
|
3168
|
+
// The tabindex attribute should be removed to avoid navigating to that element again
|
|
3169
|
+
this._ngZone.runOutsideAngular(() => {
|
|
3170
|
+
element.addEventListener('blur', () => element.removeAttribute('tabindex'));
|
|
3171
|
+
element.addEventListener('mousedown', () => element.removeAttribute('tabindex'));
|
|
3172
|
+
});
|
|
3173
|
+
}
|
|
3174
|
+
element.focus(options);
|
|
3175
|
+
}
|
|
3176
|
+
/**
|
|
3177
|
+
* Focuses the first element that matches the given selector within the focus trap.
|
|
3178
|
+
*/
|
|
3179
|
+
_focusByCssSelector(selector, options) {
|
|
3180
|
+
const elementToFocus = this._elementRef.nativeElement.querySelector(selector);
|
|
3181
|
+
if (elementToFocus) {
|
|
3182
|
+
this._forceFocus(elementToFocus, options);
|
|
3183
|
+
}
|
|
3184
|
+
}
|
|
3185
|
+
/** Sets up the focus trap. */
|
|
3186
|
+
_setupFocusTrap() {
|
|
3187
|
+
this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
|
|
3188
|
+
}
|
|
3189
|
+
/** Captures the element that was focused before the modal was opened. */
|
|
3190
|
+
_capturePreviouslyFocusedElement() {
|
|
3191
|
+
if (this._document) {
|
|
3192
|
+
this._elementFocusedBeforeDialogWasOpened =
|
|
3193
|
+
_getFocusedElementPierceShadowDom();
|
|
3194
|
+
}
|
|
3195
|
+
}
|
|
3196
|
+
/** Focuses the modal container. */
|
|
3197
|
+
_focusDialogContainer() {
|
|
3198
|
+
// Note that there is no focus method when rendering on the server.
|
|
3199
|
+
if (this._elementRef.nativeElement.focus) {
|
|
3200
|
+
this._elementRef.nativeElement.focus();
|
|
3201
|
+
}
|
|
3202
|
+
}
|
|
3203
|
+
/** Returns whether focus is inside the modal. */
|
|
3204
|
+
_containsFocus() {
|
|
3205
|
+
const element = this._elementRef.nativeElement;
|
|
3206
|
+
const activeElement = _getFocusedElementPierceShadowDom();
|
|
3207
|
+
return element === activeElement || element.contains(activeElement);
|
|
3208
|
+
}
|
|
3209
|
+
}
|
|
3210
|
+
_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 });
|
|
3211
|
+
_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 });
|
|
3212
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: _BaoModalContainerBase, decorators: [{
|
|
3213
|
+
type: Directive
|
|
3214
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.ConfigurableFocusTrapFactory }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
3215
|
+
type: Optional
|
|
3216
|
+
}, {
|
|
3217
|
+
type: Inject,
|
|
3218
|
+
args: [DOCUMENT]
|
|
3219
|
+
}] }, { type: BaoModalInitialConfig }, { type: i1$3.InteractivityChecker }, { type: i0.NgZone }, { type: i1$3.FocusMonitor }]; }, propDecorators: { _portalOutlet: [{
|
|
3220
|
+
type: ViewChild,
|
|
3221
|
+
args: [CdkPortalOutlet, { static: true }]
|
|
3222
|
+
}] } });
|
|
3223
|
+
class BaoModalContainer extends _BaoModalContainerBase {
|
|
3224
|
+
constructor() {
|
|
3225
|
+
super(...arguments);
|
|
3226
|
+
/** State of the modal animation. */
|
|
3227
|
+
this._state = 'enter';
|
|
3228
|
+
}
|
|
3229
|
+
/** Callback, invoked whenever an animation on the host completes. */
|
|
3230
|
+
async _onAnimationDone({ toState, totalTime }) {
|
|
3231
|
+
if (toState === 'enter') {
|
|
3232
|
+
await this._trapFocus();
|
|
3233
|
+
this._animationStateChanged.next({ state: 'opened', totalTime });
|
|
3234
|
+
}
|
|
3235
|
+
else if (toState === 'exit') {
|
|
3236
|
+
this._restoreFocus();
|
|
3237
|
+
this._animationStateChanged.next({ state: 'closed', totalTime });
|
|
3238
|
+
}
|
|
3239
|
+
}
|
|
3240
|
+
/** Callback, invoked when an animation on the host starts. */
|
|
3241
|
+
_onAnimationStart({ toState, totalTime }) {
|
|
3242
|
+
if (toState === 'enter') {
|
|
3243
|
+
this._animationStateChanged.next({ state: 'opening', totalTime });
|
|
3244
|
+
}
|
|
3245
|
+
else if (toState === 'exit' || toState === 'void') {
|
|
3246
|
+
this._animationStateChanged.next({ state: 'closing', totalTime });
|
|
3247
|
+
}
|
|
3248
|
+
}
|
|
3249
|
+
/** Starts the modal exit animation. */
|
|
3250
|
+
_startExitAnimation() {
|
|
3251
|
+
this._state = 'exit';
|
|
3252
|
+
// Mark the container for check so it can react if the
|
|
3253
|
+
// view container is using OnPush change detection.
|
|
3254
|
+
this._changeDetectorRef.markForCheck();
|
|
3255
|
+
}
|
|
3256
|
+
}
|
|
3257
|
+
BaoModalContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalContainer, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3258
|
+
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 });
|
|
3259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalContainer, decorators: [{
|
|
3260
|
+
type: Component,
|
|
3261
|
+
args: [{ selector: 'bao-modal-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, animations: [baoModalAnimations.modalContainer], host: {
|
|
3262
|
+
class: 'bao-modal-container',
|
|
3263
|
+
tabindex: '-1',
|
|
3264
|
+
'aria-modal': 'true',
|
|
3265
|
+
'[id]': '_id',
|
|
3266
|
+
'[attr.role]': '_config.role',
|
|
3267
|
+
'[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
|
|
3268
|
+
'[attr.aria-label]': '_config.ariaLabel',
|
|
3269
|
+
'[attr.aria-describedby]': '_config.ariaDescribedBy || null',
|
|
3270
|
+
'[@modalContainer]': '_state',
|
|
3271
|
+
'(@modalContainer.start)': '_onAnimationStart($event)',
|
|
3272
|
+
'(@modalContainer.done)': '_onAnimationDone($event)'
|
|
3273
|
+
}, 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"] }]
|
|
3274
|
+
}] });
|
|
3275
|
+
|
|
3276
|
+
// Counter for unique modal ids.
|
|
3277
|
+
let uniqueId = 0;
|
|
3278
|
+
/**
|
|
3279
|
+
* Reference to a modal opened via the BaoModalService.
|
|
3280
|
+
*/
|
|
3281
|
+
class BaoModalRef {
|
|
3282
|
+
constructor(_overlayRef, _containerInstance,
|
|
3283
|
+
/** Id of the modal. */
|
|
3284
|
+
id = `bao-modal-${uniqueId++}`) {
|
|
3285
|
+
this._overlayRef = _overlayRef;
|
|
3286
|
+
this._containerInstance = _containerInstance;
|
|
3287
|
+
this.id = id;
|
|
3288
|
+
/** Whether the user is allowed to close the modal. */
|
|
3289
|
+
this.disableClose = this._containerInstance._config.disableClose;
|
|
3290
|
+
/** Subject for notifying the user that the modal has finished opening. */
|
|
3291
|
+
this._afterOpened = new Subject();
|
|
3292
|
+
/** Subject for notifying the user that the modal has finished closing. */
|
|
3293
|
+
this._afterClosed = new Subject();
|
|
3294
|
+
/** Subject for notifying the user that the modal has started closing. */
|
|
3295
|
+
this._beforeClosed = new Subject();
|
|
3296
|
+
/** Current state of the modal. */
|
|
3297
|
+
this._state = 0 /* OPEN */;
|
|
3298
|
+
// Pass the id along to the container.
|
|
3299
|
+
_containerInstance._id = id;
|
|
3300
|
+
// Emit when opening animation completes
|
|
3301
|
+
_containerInstance._animationStateChanged
|
|
3302
|
+
.pipe(filter(event => event.state === 'opened'), take(1))
|
|
3303
|
+
.subscribe(() => {
|
|
3304
|
+
this._afterOpened.next();
|
|
3305
|
+
this._afterOpened.complete();
|
|
3306
|
+
});
|
|
3307
|
+
// Dispose overlay when closing animation is complete
|
|
3308
|
+
_containerInstance._animationStateChanged
|
|
3309
|
+
.pipe(filter(event => event.state === 'closed'), take(1))
|
|
3310
|
+
.subscribe(() => {
|
|
3311
|
+
clearTimeout(this._closeFallbackTimeout);
|
|
3312
|
+
this._finishModalClose();
|
|
3313
|
+
});
|
|
3314
|
+
_overlayRef.detachments().subscribe(() => {
|
|
3315
|
+
this._beforeClosed.next(this._result);
|
|
3316
|
+
this._beforeClosed.complete();
|
|
3317
|
+
this._afterClosed.next(this._result);
|
|
3318
|
+
this._afterClosed.complete();
|
|
3319
|
+
this.componentInstance = null;
|
|
3320
|
+
this._overlayRef.dispose();
|
|
3321
|
+
});
|
|
3322
|
+
_overlayRef
|
|
3323
|
+
.keydownEvents()
|
|
3324
|
+
.pipe(filter(event => {
|
|
3325
|
+
return (event.keyCode === ESCAPE &&
|
|
3326
|
+
!this.disableClose &&
|
|
3327
|
+
!hasModifierKey(event));
|
|
3328
|
+
}))
|
|
3329
|
+
.subscribe(event => {
|
|
3330
|
+
event.preventDefault();
|
|
3331
|
+
_closeModalVia(this, 'keyboard');
|
|
3332
|
+
});
|
|
3333
|
+
_overlayRef.backdropClick().subscribe(async () => {
|
|
3334
|
+
if (this.disableClose) {
|
|
3335
|
+
await this._containerInstance._recaptureFocus();
|
|
3336
|
+
}
|
|
3337
|
+
else {
|
|
3338
|
+
_closeModalVia(this, 'mouse');
|
|
3339
|
+
}
|
|
3340
|
+
});
|
|
3341
|
+
}
|
|
3342
|
+
/**
|
|
3343
|
+
* Close the modal.
|
|
3344
|
+
* @param modalResult Optional result to return to the modal opener.
|
|
3345
|
+
*/
|
|
3346
|
+
close(modalResult) {
|
|
3347
|
+
this._result = modalResult;
|
|
3348
|
+
// Transition the backdrop in parallel to the modal.
|
|
3349
|
+
this._containerInstance._animationStateChanged
|
|
3350
|
+
.pipe(filter(event => event.state === 'closing'), take(1))
|
|
3351
|
+
.subscribe(event => {
|
|
3352
|
+
this._beforeClosed.next(modalResult);
|
|
3353
|
+
this._beforeClosed.complete();
|
|
3354
|
+
this._overlayRef.detachBackdrop();
|
|
3355
|
+
// The logic that disposes of the overlay depends on the exit animation completing, however
|
|
3356
|
+
// it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback
|
|
3357
|
+
// timeout which will clean everything up if the animation hasn't fired within the specified
|
|
3358
|
+
// amount of time plus 100ms. We don't need to run this outside the NgZone, because for the
|
|
3359
|
+
// vast majority of cases the timeout will have been cleared before it has the chance to fire.
|
|
3360
|
+
this._closeFallbackTimeout = setTimeout(() => this._finishModalClose(), event.totalTime + 100);
|
|
3361
|
+
});
|
|
3362
|
+
this._state = 1 /* CLOSING */;
|
|
3363
|
+
this._containerInstance._startExitAnimation();
|
|
3364
|
+
}
|
|
3365
|
+
/**
|
|
3366
|
+
* Gets an observable that is notified when the modal is finished opening.
|
|
3367
|
+
*/
|
|
3368
|
+
afterOpened() {
|
|
3369
|
+
return this._afterOpened;
|
|
3370
|
+
}
|
|
3371
|
+
/**
|
|
3372
|
+
* Gets an observable that is notified when the modal is finished closing.
|
|
3373
|
+
*/
|
|
3374
|
+
afterClosed() {
|
|
3375
|
+
return this._afterClosed;
|
|
3376
|
+
}
|
|
3377
|
+
/**
|
|
3378
|
+
* Gets an observable that is notified when the modal has started closing.
|
|
3379
|
+
*/
|
|
3380
|
+
beforeClosed() {
|
|
3381
|
+
return this._beforeClosed;
|
|
3382
|
+
}
|
|
3383
|
+
/**
|
|
3384
|
+
* Gets an observable that emits when the overlay's backdrop has been clicked.
|
|
3385
|
+
*/
|
|
3386
|
+
backdropClick() {
|
|
3387
|
+
return this._overlayRef.backdropClick();
|
|
3388
|
+
}
|
|
3389
|
+
/**
|
|
3390
|
+
* Gets an observable that emits when keydown events are targeted on the overlay.
|
|
3391
|
+
*/
|
|
3392
|
+
keydownEvents() {
|
|
3393
|
+
return this._overlayRef.keydownEvents();
|
|
3394
|
+
}
|
|
3395
|
+
/**
|
|
3396
|
+
* Updates the dialog's position.
|
|
3397
|
+
*/
|
|
3398
|
+
updatePosition(position) {
|
|
3399
|
+
const strategy = this._getPositionStrategy();
|
|
3400
|
+
if (position && (position.left || position.right)) {
|
|
3401
|
+
position.left
|
|
3402
|
+
? strategy.left(position.left)
|
|
3403
|
+
: strategy.right(position.right);
|
|
3404
|
+
}
|
|
3405
|
+
else {
|
|
3406
|
+
strategy.centerHorizontally();
|
|
3407
|
+
}
|
|
3408
|
+
if (position && (position.top || position.bottom)) {
|
|
3409
|
+
position.top
|
|
3410
|
+
? strategy.top(position.top)
|
|
3411
|
+
: strategy.bottom(position.bottom);
|
|
3412
|
+
}
|
|
3413
|
+
else {
|
|
3414
|
+
strategy.centerVertically();
|
|
3415
|
+
}
|
|
3416
|
+
this._overlayRef.updatePosition();
|
|
3417
|
+
return this;
|
|
3418
|
+
}
|
|
3419
|
+
/**
|
|
3420
|
+
* Updates the modal's width and height.
|
|
3421
|
+
*/
|
|
3422
|
+
updateSize(width = '', height = '') {
|
|
3423
|
+
this._overlayRef.updateSize({ width, height });
|
|
3424
|
+
this._overlayRef.updatePosition();
|
|
3425
|
+
return this;
|
|
3426
|
+
}
|
|
3427
|
+
/** Add a CSS class or an array of classes to the overlay pane. */
|
|
3428
|
+
addPanelClass(classes) {
|
|
3429
|
+
this._overlayRef.addPanelClass(classes);
|
|
3430
|
+
return this;
|
|
3431
|
+
}
|
|
3432
|
+
/** Remove a CSS class or an array of classes from the overlay pane. */
|
|
3433
|
+
removePanelClass(classes) {
|
|
3434
|
+
this._overlayRef.removePanelClass(classes);
|
|
3435
|
+
return this;
|
|
3436
|
+
}
|
|
3437
|
+
/** Gets the current state of the modal's lifecycle. */
|
|
3438
|
+
getState() {
|
|
3439
|
+
return this._state;
|
|
3440
|
+
}
|
|
3441
|
+
/**
|
|
3442
|
+
* Finishes the modal close by updating the state of the modal
|
|
3443
|
+
* and disposing the overlay.
|
|
3444
|
+
*/
|
|
3445
|
+
_finishModalClose() {
|
|
3446
|
+
this._state = 2 /* CLOSED */;
|
|
3447
|
+
this._overlayRef.dispose();
|
|
3448
|
+
}
|
|
3449
|
+
/** Fetches the position strategy object from the overlay ref. */
|
|
3450
|
+
_getPositionStrategy() {
|
|
3451
|
+
return this._overlayRef.getConfig()
|
|
3452
|
+
.positionStrategy;
|
|
3453
|
+
}
|
|
3454
|
+
}
|
|
3455
|
+
/**
|
|
3456
|
+
* Closes the modal with the specified interaction type. This is currently not part of
|
|
3457
|
+
* `BaoModalRef` as that would conflict with custom modal ref mocks provided in tests.
|
|
3458
|
+
* More details. See: https://github.com/angular/components/pull/9257#issuecomment-651342226.
|
|
3459
|
+
*/
|
|
3460
|
+
function _closeModalVia(ref, interactionType, result) {
|
|
3461
|
+
// Some mock modal ref instances in tests do not have the `_containerInstance` property.
|
|
3462
|
+
// For those, we keep the behavior as is and do not deal with the interaction type.
|
|
3463
|
+
if (ref._containerInstance !== undefined) {
|
|
3464
|
+
ref._containerInstance._closeInteractionType = interactionType;
|
|
3465
|
+
}
|
|
3466
|
+
return ref.close(result);
|
|
3467
|
+
}
|
|
3468
|
+
|
|
3469
|
+
/*
|
|
3470
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
3471
|
+
* Licensed under the MIT license.
|
|
3472
|
+
* See LICENSE file in the project root for full license information.
|
|
3473
|
+
*/
|
|
3474
|
+
/** Injection token that can be used to access the data that was passed in to a modal. */
|
|
3475
|
+
const BAO_MODAL_DATA = new InjectionToken('BaoModalData');
|
|
3476
|
+
class BaoModalBase {
|
|
3477
|
+
constructor(_overlay, _injector, _parentModal, _overlayContainer, _modalRefConstructor, _modalContainerType, _modalDataToken, _animationMode) {
|
|
3478
|
+
this._overlay = _overlay;
|
|
3479
|
+
this._injector = _injector;
|
|
3480
|
+
this._parentModal = _parentModal;
|
|
3481
|
+
this._overlayContainer = _overlayContainer;
|
|
3482
|
+
this._modalRefConstructor = _modalRefConstructor;
|
|
3483
|
+
this._modalContainerType = _modalContainerType;
|
|
3484
|
+
this._modalDataToken = _modalDataToken;
|
|
3485
|
+
this._animationMode = _animationMode;
|
|
3486
|
+
this.afterAllClosed = defer(() => this.openModals.length
|
|
3487
|
+
? this.getAfterAllClosed()
|
|
3488
|
+
: this.getAfterAllClosed().pipe(startWith(undefined)));
|
|
3489
|
+
this._openModalsAtThisLevel = [];
|
|
3490
|
+
this._afterAllClosedAtThisLevel = new Subject();
|
|
3491
|
+
this._afterOpenedAtThisLevel = new Subject();
|
|
3492
|
+
this._ariaHiddenElements = new Map();
|
|
3493
|
+
this._modalAnimatingOpen = false;
|
|
3494
|
+
}
|
|
3495
|
+
/** Keeps track of the currently-open modals. */
|
|
3496
|
+
get openModals() {
|
|
3497
|
+
return this._parentModal
|
|
3498
|
+
? this._parentModal.openModals
|
|
3499
|
+
: this._openModalsAtThisLevel;
|
|
3500
|
+
}
|
|
3501
|
+
/** Stream that emits when a modal has been opened. */
|
|
3502
|
+
get afterOpened() {
|
|
3503
|
+
// Maybe typescript version difference
|
|
3504
|
+
return this._parentModal
|
|
3505
|
+
? this._parentModal.afterOpened
|
|
3506
|
+
: this._afterOpenedAtThisLevel;
|
|
3507
|
+
}
|
|
3508
|
+
getAfterAllClosed() {
|
|
3509
|
+
const parent = this._parentModal;
|
|
3510
|
+
return (parent ? parent.getAfterAllClosed() : this._afterAllClosedAtThisLevel);
|
|
3511
|
+
}
|
|
3512
|
+
/**
|
|
3513
|
+
* Opens a modal modal containing the given template.
|
|
3514
|
+
*/
|
|
3515
|
+
open(componentOrTemplateRef, config) {
|
|
3516
|
+
const conf = this._applyConfigDefaults(config, new BaoModalInitialConfig());
|
|
3517
|
+
// If there is a modal that is currently animating open, return the MatmodalRef of that modal
|
|
3518
|
+
if (this._modalAnimatingOpen) {
|
|
3519
|
+
return this._lastModalRef;
|
|
3520
|
+
}
|
|
3521
|
+
const overlayRef = this._createOverlay(conf);
|
|
3522
|
+
const modalContainer = this._attachModalContainer(overlayRef, conf);
|
|
3523
|
+
if (this._animationMode !== 'NoopAnimations') {
|
|
3524
|
+
const animationStateSubscription = modalContainer._animationStateChanged.subscribe(modalAnimationEvent => {
|
|
3525
|
+
if (modalAnimationEvent.state === 'opening') {
|
|
3526
|
+
this._modalAnimatingOpen = true;
|
|
3527
|
+
}
|
|
3528
|
+
if (modalAnimationEvent.state === 'opened') {
|
|
3529
|
+
this._modalAnimatingOpen = false;
|
|
3530
|
+
animationStateSubscription.unsubscribe();
|
|
3531
|
+
}
|
|
3532
|
+
});
|
|
3533
|
+
if (!this._animationStateSubscriptions) {
|
|
3534
|
+
this._animationStateSubscriptions = new Subscription();
|
|
3535
|
+
}
|
|
3536
|
+
this._animationStateSubscriptions.add(animationStateSubscription);
|
|
3537
|
+
}
|
|
3538
|
+
const modalRef = this._attachModalContent(componentOrTemplateRef, modalContainer, overlayRef, conf);
|
|
3539
|
+
this._lastModalRef = modalRef;
|
|
3540
|
+
// If this is the first modal that we're opening, hide all the non-overlay content.
|
|
3541
|
+
if (!this.openModals.length) {
|
|
3542
|
+
this._hideNonModalContentFromAssistiveTechnology();
|
|
3543
|
+
}
|
|
3544
|
+
this.openModals.push(modalRef);
|
|
3545
|
+
modalRef.afterClosed().subscribe(() => this._removeOpenModal(modalRef));
|
|
3546
|
+
this.afterOpened.next(modalRef);
|
|
3547
|
+
// Notify the modal container that the content has been attached.
|
|
3548
|
+
modalContainer._initializeWithAttachedContent();
|
|
3549
|
+
return modalRef;
|
|
3550
|
+
}
|
|
3551
|
+
/**
|
|
3552
|
+
* Closes all of the currently-open modals.
|
|
3553
|
+
*/
|
|
3554
|
+
closeAll() {
|
|
3555
|
+
this._closeModals(this.openModals);
|
|
3556
|
+
}
|
|
3557
|
+
/**
|
|
3558
|
+
* Finds an open modal by its id.
|
|
3559
|
+
*/
|
|
3560
|
+
getModalById(id) {
|
|
3561
|
+
return this.openModals.find(modal => modal.id === id);
|
|
3562
|
+
}
|
|
3563
|
+
ngOnDestroy() {
|
|
3564
|
+
// Only close the modals at this level on destroy
|
|
3565
|
+
// since the parent service may still be active.
|
|
3566
|
+
this._closeModals(this._openModalsAtThisLevel);
|
|
3567
|
+
this._afterAllClosedAtThisLevel.complete();
|
|
3568
|
+
this._afterOpenedAtThisLevel.complete();
|
|
3569
|
+
// Clean up any subscriptions to modals that never finished opening.
|
|
3570
|
+
if (this._animationStateSubscriptions) {
|
|
3571
|
+
this._animationStateSubscriptions.unsubscribe();
|
|
3572
|
+
}
|
|
3573
|
+
}
|
|
3574
|
+
/**
|
|
3575
|
+
* Creates the overlay into which the modal will be loaded.
|
|
3576
|
+
*/
|
|
3577
|
+
_createOverlay(config) {
|
|
3578
|
+
const overlayConfig = this._getOverlayConfig(config);
|
|
3579
|
+
return this._overlay.create(overlayConfig);
|
|
3580
|
+
}
|
|
3581
|
+
/**
|
|
3582
|
+
* Creates an overlay config from a modal config.
|
|
3583
|
+
*/
|
|
3584
|
+
_getOverlayConfig(config) {
|
|
3585
|
+
const state = new OverlayConfig({
|
|
3586
|
+
positionStrategy: this._overlay.position().global(),
|
|
3587
|
+
scrollStrategy: this._overlay.scrollStrategies.block(),
|
|
3588
|
+
panelClass: config.panelClass,
|
|
3589
|
+
hasBackdrop: config.hasBackdrop,
|
|
3590
|
+
disposeOnNavigation: config.closeOnNavigation
|
|
3591
|
+
});
|
|
3592
|
+
if (config.backdropClass) {
|
|
3593
|
+
state.backdropClass = config.backdropClass;
|
|
3594
|
+
}
|
|
3595
|
+
return state;
|
|
3596
|
+
}
|
|
3597
|
+
/**
|
|
3598
|
+
* Attaches a modal container to a modal's already-created overlay.
|
|
3599
|
+
*/
|
|
3600
|
+
_attachModalContainer(overlay, config) {
|
|
3601
|
+
const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
|
|
3602
|
+
const injector = Injector.create({
|
|
3603
|
+
parent: userInjector || this._injector,
|
|
3604
|
+
providers: [{ provide: BaoModalInitialConfig, useValue: config }]
|
|
3605
|
+
});
|
|
3606
|
+
const containerPortal = new ComponentPortal(this._modalContainerType, config.viewContainerRef, injector);
|
|
3607
|
+
const containerRef = overlay.attach(containerPortal);
|
|
3608
|
+
return containerRef.instance;
|
|
3609
|
+
}
|
|
3610
|
+
/**
|
|
3611
|
+
* Attaches the user-provided component to the already-created modal container.
|
|
3612
|
+
*/
|
|
3613
|
+
_attachModalContent(componentOrTemplateRef, modalContainer, overlayRef, config) {
|
|
3614
|
+
// Create a reference to the modal we're creating in order to give the user a handle
|
|
3615
|
+
// to modify and close it.
|
|
3616
|
+
const modalRef = new this._modalRefConstructor(overlayRef, modalContainer, config.id);
|
|
3617
|
+
if (componentOrTemplateRef instanceof TemplateRef) {
|
|
3618
|
+
modalContainer.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, {
|
|
3619
|
+
$implicit: config.data,
|
|
3620
|
+
modalRef
|
|
3621
|
+
}));
|
|
3622
|
+
}
|
|
3623
|
+
else {
|
|
3624
|
+
const injector = this._createInjector(config, modalRef, modalContainer);
|
|
3625
|
+
const contentRef = modalContainer.attachComponentPortal(new ComponentPortal(componentOrTemplateRef, config.viewContainerRef, injector));
|
|
3626
|
+
modalRef.componentInstance = contentRef.instance;
|
|
3627
|
+
}
|
|
3628
|
+
modalRef
|
|
3629
|
+
.updateSize(config.width, config.height)
|
|
3630
|
+
.updatePosition(config.position);
|
|
3631
|
+
return modalRef;
|
|
3632
|
+
}
|
|
3633
|
+
/**
|
|
3634
|
+
* Creates a custom injector to be used inside the modal. This allows a component loaded inside
|
|
3635
|
+
* of a modal to close itself and, optionally, to return a value.
|
|
3636
|
+
*/
|
|
3637
|
+
_createInjector(config, modalRef, modalContainer) {
|
|
3638
|
+
const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
|
|
3639
|
+
// The modal container should be provided as the modal container and the modal's
|
|
3640
|
+
// content are created out of the same `ViewContainerRef` and as such, are siblings
|
|
3641
|
+
// for injector purposes. To allow the hierarchy that is expected, the modal
|
|
3642
|
+
// container is explicitly provided in the injector.
|
|
3643
|
+
const providers = [
|
|
3644
|
+
{ provide: this._modalContainerType, useValue: modalContainer },
|
|
3645
|
+
{ provide: this._modalDataToken, useValue: config.data },
|
|
3646
|
+
{ provide: this._modalRefConstructor, useValue: modalRef }
|
|
3647
|
+
];
|
|
3648
|
+
return Injector.create({
|
|
3649
|
+
parent: userInjector || this._injector,
|
|
3650
|
+
providers
|
|
3651
|
+
});
|
|
3652
|
+
}
|
|
3653
|
+
/**
|
|
3654
|
+
* Removes a modal from the array of open modals.
|
|
3655
|
+
*/
|
|
3656
|
+
_removeOpenModal(modalRef) {
|
|
3657
|
+
const index = this.openModals.indexOf(modalRef);
|
|
3658
|
+
if (index > -1) {
|
|
3659
|
+
this.openModals.splice(index, 1);
|
|
3660
|
+
// If all the modals were closed, remove/restore the `aria-hidden`
|
|
3661
|
+
// to a the siblings and emit to the `afterAllClosed` stream.
|
|
3662
|
+
if (!this.openModals.length) {
|
|
3663
|
+
this._ariaHiddenElements.forEach((previousValue, element) => {
|
|
3664
|
+
if (previousValue) {
|
|
3665
|
+
element.setAttribute('aria-hidden', previousValue);
|
|
3666
|
+
}
|
|
3667
|
+
else {
|
|
3668
|
+
element.removeAttribute('aria-hidden');
|
|
3669
|
+
}
|
|
3670
|
+
});
|
|
3671
|
+
this._ariaHiddenElements.clear();
|
|
3672
|
+
this.getAfterAllClosed().next();
|
|
3673
|
+
}
|
|
3674
|
+
}
|
|
3675
|
+
}
|
|
3676
|
+
/**
|
|
3677
|
+
* Hides all of the content that isn't an overlay from assistive technology.
|
|
3678
|
+
*/
|
|
3679
|
+
_hideNonModalContentFromAssistiveTechnology() {
|
|
3680
|
+
const overlayContainer = this._overlayContainer.getContainerElement();
|
|
3681
|
+
// Ensure that the overlay container is attached to the DOM.
|
|
3682
|
+
if (overlayContainer.parentElement) {
|
|
3683
|
+
const siblings = overlayContainer.parentElement.children;
|
|
3684
|
+
for (let i = siblings.length - 1; i > -1; i--) {
|
|
3685
|
+
const sibling = siblings[i];
|
|
3686
|
+
if (sibling !== overlayContainer &&
|
|
3687
|
+
sibling.nodeName !== 'SCRIPT' &&
|
|
3688
|
+
sibling.nodeName !== 'STYLE' &&
|
|
3689
|
+
!sibling.hasAttribute('aria-live')) {
|
|
3690
|
+
this._ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));
|
|
3691
|
+
sibling.setAttribute('aria-hidden', 'true');
|
|
3692
|
+
}
|
|
3693
|
+
}
|
|
3694
|
+
}
|
|
3695
|
+
}
|
|
3696
|
+
/** Closes all of the modals in an array. */
|
|
3697
|
+
_closeModals(modals) {
|
|
3698
|
+
let i = modals.length;
|
|
3699
|
+
while (i--) {
|
|
3700
|
+
modals[i].close();
|
|
3701
|
+
}
|
|
3702
|
+
}
|
|
3703
|
+
/**
|
|
3704
|
+
* Applies default options to the modal config.
|
|
3705
|
+
*/
|
|
3706
|
+
_applyConfigDefaults(config, defaultOptions) {
|
|
3707
|
+
const desktopClass = config?.size || eModalDesktopWidthSize.SMALL;
|
|
3708
|
+
const mobilClass = config?.mobileSize || eModalMobileWidthSize.FULL;
|
|
3709
|
+
const data = config?.data || null;
|
|
3710
|
+
const ariaLabelledBy = config?.ariaLabelledBy || null;
|
|
3711
|
+
return {
|
|
3712
|
+
...defaultOptions,
|
|
3713
|
+
...{
|
|
3714
|
+
panelClass: [desktopClass, mobilClass],
|
|
3715
|
+
ariaLabelledBy,
|
|
3716
|
+
data
|
|
3717
|
+
}
|
|
3718
|
+
};
|
|
3719
|
+
}
|
|
3720
|
+
}
|
|
3721
|
+
BaoModalBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
|
|
3722
|
+
BaoModalBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaoModalBase, ngImport: i0 });
|
|
3723
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalBase, decorators: [{
|
|
3724
|
+
type: Directive
|
|
3725
|
+
}], 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 }]; } });
|
|
3726
|
+
/**
|
|
3727
|
+
* Service to open modal.
|
|
3728
|
+
*/
|
|
3729
|
+
class BaoModal extends BaoModalBase {
|
|
3730
|
+
constructor(overlay, injector, parentModal, overlayContainer, animationMode) {
|
|
3731
|
+
super(overlay, injector, parentModal, overlayContainer, BaoModalRef, BaoModalContainer, BAO_MODAL_DATA, animationMode);
|
|
3732
|
+
}
|
|
3733
|
+
}
|
|
3734
|
+
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 });
|
|
3735
|
+
BaoModal.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModal });
|
|
3736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModal, decorators: [{
|
|
3737
|
+
type: Injectable
|
|
3738
|
+
}], ctorParameters: function () { return [{ type: i1$4.Overlay }, { type: i0.Injector }, { type: BaoModal, decorators: [{
|
|
3739
|
+
type: Optional
|
|
3740
|
+
}, {
|
|
3741
|
+
type: SkipSelf
|
|
3742
|
+
}] }, { type: i1$4.OverlayContainer }, { type: undefined, decorators: [{
|
|
3743
|
+
type: Optional
|
|
3744
|
+
}, {
|
|
3745
|
+
type: Inject,
|
|
3746
|
+
args: [ANIMATION_MODULE_TYPE]
|
|
3747
|
+
}] }]; } });
|
|
3748
|
+
|
|
3749
|
+
/*
|
|
3750
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
3751
|
+
* Licensed under the MIT license.
|
|
3752
|
+
* See LICENSE file in the project root for full license information.
|
|
3753
|
+
*/
|
|
3754
|
+
/**
|
|
3755
|
+
* Button that will close the current dialog.
|
|
3756
|
+
*/
|
|
3757
|
+
class BaoModalClose {
|
|
3758
|
+
constructor(modalRef, _elementRef, _dialog) {
|
|
3759
|
+
this.modalRef = modalRef;
|
|
3760
|
+
this._elementRef = _elementRef;
|
|
3761
|
+
this._dialog = _dialog;
|
|
3762
|
+
/** Default to "button" to prevents accidental form submits. */
|
|
3763
|
+
this.type = 'button';
|
|
3764
|
+
}
|
|
3765
|
+
ngOnInit() {
|
|
3766
|
+
if (!this.modalRef) {
|
|
3767
|
+
// When this directive is included in a dialog via TemplateRef (rather than being
|
|
3768
|
+
// in a Component), the modalRef isn't available via injection because embedded
|
|
3769
|
+
// views cannot be given a custom injector. Instead, we look up the modalRef by
|
|
3770
|
+
// ID. This must occur in `onInit`, as the ID binding for the dialog container won't
|
|
3771
|
+
// be resolved at constructor time.
|
|
3772
|
+
this.modalRef =
|
|
3773
|
+
getClosestDialog(this._elementRef, this._dialog.openModals) || null;
|
|
3774
|
+
}
|
|
3775
|
+
}
|
|
3776
|
+
ngOnChanges(changes) {
|
|
3777
|
+
const proxiedChange = changes['_baoModalClose'] || changes['_baoModalCloseResult'];
|
|
3778
|
+
if (proxiedChange) {
|
|
3779
|
+
this.dialogResult = proxiedChange.currentValue;
|
|
3780
|
+
}
|
|
3781
|
+
}
|
|
3782
|
+
_onButtonClick(event) {
|
|
3783
|
+
// Determinate the focus origin using the click event, because using the FocusMonitor will
|
|
3784
|
+
// result in incorrect origins. Most of the time, close buttons will be auto focused in the
|
|
3785
|
+
// dialog, and therefore clicking the button won't result in a focus change. This means that
|
|
3786
|
+
// the FocusMonitor won't detect any origin change, and will always output `program`.
|
|
3787
|
+
_closeModalVia(this.modalRef, event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);
|
|
3788
|
+
}
|
|
3789
|
+
}
|
|
3790
|
+
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 });
|
|
3791
|
+
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 });
|
|
3792
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalClose, decorators: [{
|
|
3793
|
+
type: Directive,
|
|
3794
|
+
args: [{
|
|
3795
|
+
selector: '[bao-modal-close], [baoModalClose]',
|
|
3796
|
+
exportAs: 'BaoModalClose',
|
|
3797
|
+
host: {
|
|
3798
|
+
'(click)': '_onButtonClick($event)',
|
|
3799
|
+
'[attr.aria-label]': 'ariaLabel || null',
|
|
3800
|
+
'[attr.type]': 'type'
|
|
3801
|
+
}
|
|
3802
|
+
}]
|
|
3803
|
+
}], ctorParameters: function () { return [{ type: BaoModalRef, decorators: [{
|
|
3804
|
+
type: Optional
|
|
3805
|
+
}] }, { type: i0.ElementRef }, { type: BaoModal }]; }, propDecorators: { ariaLabel: [{
|
|
3806
|
+
type: Input,
|
|
3807
|
+
args: ['aria-label']
|
|
3808
|
+
}], type: [{
|
|
3809
|
+
type: Input
|
|
3810
|
+
}], dialogResult: [{
|
|
3811
|
+
type: Input,
|
|
3812
|
+
args: ['bao-modal-close']
|
|
3813
|
+
}], _baoModalClose: [{
|
|
3814
|
+
type: Input,
|
|
3815
|
+
args: ['baoModalClose']
|
|
3816
|
+
}] } });
|
|
3817
|
+
/**
|
|
3818
|
+
* Finds the closest BaoModalRef to an element by looking at the DOM.
|
|
3819
|
+
*/
|
|
3820
|
+
function getClosestDialog(element, openDialogs) {
|
|
3821
|
+
let parent = element.nativeElement.parentElement;
|
|
3822
|
+
while (parent && !parent.classList.contains('bao-modal-container')) {
|
|
3823
|
+
parent = parent.parentElement;
|
|
3824
|
+
}
|
|
3825
|
+
return parent ? openDialogs.find(dialog => dialog.id === parent.id) : null;
|
|
3826
|
+
}
|
|
3827
|
+
|
|
3828
|
+
/*
|
|
3829
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
3830
|
+
* Licensed under the MIT license.
|
|
3831
|
+
* See LICENSE file in the project root for full license information.
|
|
3832
|
+
*/
|
|
3833
|
+
const MODAL_DIRECTIVES = [BaoModalContainer, BaoModalClose];
|
|
3834
|
+
class BaoModalModule {
|
|
3835
|
+
}
|
|
3836
|
+
BaoModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3837
|
+
BaoModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalModule, declarations: [BaoModalContainer, BaoModalClose], imports: [CommonModule,
|
|
3838
|
+
OverlayModule,
|
|
3839
|
+
PortalModule,
|
|
3840
|
+
BrowserAnimationsModule,
|
|
3841
|
+
NoopAnimationsModule], exports: [BaoModalContainer, BaoModalClose] });
|
|
3842
|
+
BaoModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalModule, providers: [BaoModal], imports: [[
|
|
3843
|
+
CommonModule,
|
|
3844
|
+
OverlayModule,
|
|
3845
|
+
PortalModule,
|
|
3846
|
+
BrowserAnimationsModule,
|
|
3847
|
+
NoopAnimationsModule
|
|
3848
|
+
]] });
|
|
3849
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoModalModule, decorators: [{
|
|
3850
|
+
type: NgModule,
|
|
3851
|
+
args: [{
|
|
3852
|
+
imports: [
|
|
3853
|
+
CommonModule,
|
|
3854
|
+
OverlayModule,
|
|
3855
|
+
PortalModule,
|
|
3856
|
+
BrowserAnimationsModule,
|
|
3857
|
+
NoopAnimationsModule
|
|
3858
|
+
],
|
|
3859
|
+
declarations: MODAL_DIRECTIVES,
|
|
3860
|
+
exports: MODAL_DIRECTIVES,
|
|
3861
|
+
providers: [BaoModal]
|
|
3862
|
+
}]
|
|
3863
|
+
}] });
|
|
3864
|
+
|
|
2517
3865
|
/*
|
|
2518
3866
|
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2519
3867
|
* Licensed under the MIT license.
|
|
@@ -2537,7 +3885,10 @@ BaoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.
|
|
|
2537
3885
|
BaoCommonComponentsModule,
|
|
2538
3886
|
BaoCheckboxModule,
|
|
2539
3887
|
BaoRadioModule,
|
|
2540
|
-
BaoSummaryModule
|
|
3888
|
+
BaoSummaryModule,
|
|
3889
|
+
BaoAvatarModule,
|
|
3890
|
+
BaoTabsModule,
|
|
3891
|
+
BaoModalModule
|
|
2541
3892
|
// TODO: reactivate once component does not depend on global css BaoBadgeModule,
|
|
2542
3893
|
// TODO: reactivate once component does not depend on global css BaoSnackBarModule,
|
|
2543
3894
|
] });
|
|
@@ -2558,7 +3909,10 @@ BaoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.
|
|
|
2558
3909
|
BaoCommonComponentsModule,
|
|
2559
3910
|
BaoCheckboxModule,
|
|
2560
3911
|
BaoRadioModule,
|
|
2561
|
-
BaoSummaryModule
|
|
3912
|
+
BaoSummaryModule,
|
|
3913
|
+
BaoAvatarModule,
|
|
3914
|
+
BaoTabsModule,
|
|
3915
|
+
BaoModalModule
|
|
2562
3916
|
// TODO: reactivate once component does not depend on global css BaoBadgeModule,
|
|
2563
3917
|
// TODO: reactivate once component does not depend on global css BaoSnackBarModule,
|
|
2564
3918
|
] });
|
|
@@ -2584,7 +3938,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2584
3938
|
BaoCommonComponentsModule,
|
|
2585
3939
|
BaoCheckboxModule,
|
|
2586
3940
|
BaoRadioModule,
|
|
2587
|
-
BaoSummaryModule
|
|
3941
|
+
BaoSummaryModule,
|
|
3942
|
+
BaoAvatarModule,
|
|
3943
|
+
BaoTabsModule,
|
|
3944
|
+
BaoModalModule
|
|
2588
3945
|
// TODO: reactivate once component does not depend on global css BaoBadgeModule,
|
|
2589
3946
|
// TODO: reactivate once component does not depend on global css BaoSnackBarModule,
|
|
2590
3947
|
]
|
|
@@ -2648,9 +4005,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2648
4005
|
* See LICENSE file in the project root for full license information.
|
|
2649
4006
|
*/
|
|
2650
4007
|
|
|
4008
|
+
/*
|
|
4009
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
4010
|
+
* Licensed under the MIT license.
|
|
4011
|
+
* See LICENSE file in the project root for full license information.
|
|
4012
|
+
*/
|
|
4013
|
+
|
|
4014
|
+
/*
|
|
4015
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
4016
|
+
* Licensed under the MIT license.
|
|
4017
|
+
* See LICENSE file in the project root for full license information.
|
|
4018
|
+
*/
|
|
4019
|
+
|
|
2651
4020
|
/**
|
|
2652
4021
|
* Generated bundle index. Do not edit.
|
|
2653
4022
|
*/
|
|
2654
4023
|
|
|
2655
|
-
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 };
|
|
4024
|
+
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 };
|
|
2656
4025
|
//# sourceMappingURL=villedemontreal-angular-ui.mjs.map
|