@villedemontreal/angular-ui 2.2.1 → 3.0.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 +12 -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/icon/icon.component.mjs +19 -19
- package/esm2020/lib/icon/icons-dictionary.mjs +3 -2
- package/esm2020/lib/radio/radio-group.component.mjs +40 -41
- package/esm2020/lib/radio/radio.component.mjs +38 -39
- package/esm2020/lib/summary/summary.component.mjs +4 -5
- 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 +3 -1
- package/fesm2015/villedemontreal-angular-ui.mjs +627 -171
- package/fesm2015/villedemontreal-angular-ui.mjs.map +1 -1
- package/fesm2020/villedemontreal-angular-ui.mjs +627 -171
- 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 +3 -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/icon/icon.component.d.ts +9 -9
- package/lib/radio/radio-group.component.d.ts +19 -19
- package/lib/radio/radio.component.d.ts +27 -27
- 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 +2 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { SecurityContext, Injectable, Inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Attribute, Input, NgModule, Directive, EventEmitter, Output, CUSTOM_ELEMENTS_SCHEMA, ViewChild, forwardRef, InjectionToken, ContentChildren, Optional } from '@angular/core';
|
|
2
|
+
import { SecurityContext, Injectable, Inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Attribute, Input, NgModule, Directive, EventEmitter, Output, CUSTOM_ELEMENTS_SCHEMA, ViewChild, forwardRef, InjectionToken, ContentChildren, Optional, HostListener, ContentChild } 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';
|
|
@@ -155,7 +155,8 @@ const ICONS_DCT = {
|
|
|
155
155
|
'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'/>",
|
|
156
156
|
'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'/>",
|
|
157
157
|
'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'/>",
|
|
158
|
-
'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'/>"
|
|
158
|
+
'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'/>",
|
|
159
|
+
'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'/>"
|
|
159
160
|
};
|
|
160
161
|
|
|
161
162
|
/*
|
|
@@ -204,7 +205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
204
205
|
* Licensed under the MIT license.
|
|
205
206
|
* See LICENSE file in the project root for full license information.
|
|
206
207
|
*/
|
|
207
|
-
const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
|
|
208
|
+
const SVG_NAMESPACE$1 = 'http://www.w3.org/2000/svg';
|
|
208
209
|
const TITLE = 'title';
|
|
209
210
|
/**
|
|
210
211
|
* Component to display an icon. It can be used in the following ways:
|
|
@@ -235,6 +236,18 @@ class BaoIconComponent {
|
|
|
235
236
|
get svgIcon() {
|
|
236
237
|
return this._svgIcon;
|
|
237
238
|
}
|
|
239
|
+
/** Title that will be used as an aria-label for the icon */
|
|
240
|
+
get title() {
|
|
241
|
+
return this._title;
|
|
242
|
+
}
|
|
243
|
+
get hexColor() {
|
|
244
|
+
if (this.color) {
|
|
245
|
+
return baoColorToHex(this.color);
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
get titleId() {
|
|
249
|
+
return this._titleId;
|
|
250
|
+
}
|
|
238
251
|
set svgIcon(value) {
|
|
239
252
|
if (value !== this._svgIcon) {
|
|
240
253
|
if (value) {
|
|
@@ -247,15 +260,6 @@ class BaoIconComponent {
|
|
|
247
260
|
this.renderer.addClass(this.elementRef.nativeElement, `bao-${this._svgIcon}`);
|
|
248
261
|
}
|
|
249
262
|
}
|
|
250
|
-
get hexColor() {
|
|
251
|
-
if (this.color) {
|
|
252
|
-
return baoColorToHex(this.color);
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
/** Title that will be used as an aria-label for the icon */
|
|
256
|
-
get title() {
|
|
257
|
-
return this._title;
|
|
258
|
-
}
|
|
259
263
|
set title(value) {
|
|
260
264
|
if (value !== this._title) {
|
|
261
265
|
this._title = value;
|
|
@@ -263,9 +267,6 @@ class BaoIconComponent {
|
|
|
263
267
|
this.updateSvgIcon(this.svgIcon, value);
|
|
264
268
|
}
|
|
265
269
|
}
|
|
266
|
-
get titleId() {
|
|
267
|
-
return this._titleId;
|
|
268
|
-
}
|
|
269
270
|
ngOnDestroy() {
|
|
270
271
|
if (this._elementsWithExternalReferences) {
|
|
271
272
|
this._elementsWithExternalReferences.clear();
|
|
@@ -311,7 +312,7 @@ class BaoIconComponent {
|
|
|
311
312
|
}
|
|
312
313
|
}
|
|
313
314
|
addTitleToSVG(svg, title) {
|
|
314
|
-
const titleNode = this.renderer.createElement(TITLE, SVG_NAMESPACE);
|
|
315
|
+
const titleNode = this.renderer.createElement(TITLE, SVG_NAMESPACE$1);
|
|
315
316
|
titleNode.id = this._titleId;
|
|
316
317
|
const titleText = this.renderer.createText(title);
|
|
317
318
|
this.renderer.appendChild(titleNode, titleText);
|
|
@@ -325,7 +326,7 @@ class BaoIconComponent {
|
|
|
325
326
|
}
|
|
326
327
|
}
|
|
327
328
|
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 }, { token: 'aria-hidden', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
328
|
-
BaoIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoIconComponent, selector: "bao-icon", inputs: {
|
|
329
|
+
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\"", "attr.aria-labelledby": "titleId", "attr.aria-hidden": "!title", "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.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 });
|
|
329
330
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoIconComponent, decorators: [{
|
|
330
331
|
type: Component,
|
|
331
332
|
args: [{ template: '<ng-content></ng-content>', selector: 'bao-icon', exportAs: 'baoIcon', host: {
|
|
@@ -341,19 +342,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
341
342
|
'[attr.aria-labelledby]': 'titleId',
|
|
342
343
|
'[attr.aria-hidden]': '!title',
|
|
343
344
|
'[style.color]': 'hexColor'
|
|
344
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["bao-icon{background-repeat:no-repeat;display:inline-
|
|
345
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["bao-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;line-height:normal}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"] }]
|
|
345
346
|
}], ctorParameters: function () {
|
|
346
347
|
return [{ type: i0.ElementRef }, { type: BaoIconDictionary }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
|
|
347
348
|
type: Attribute,
|
|
348
349
|
args: ['aria-hidden']
|
|
349
350
|
}] }];
|
|
350
|
-
}, propDecorators: {
|
|
351
|
+
}, propDecorators: { color: [{
|
|
351
352
|
type: Input
|
|
352
|
-
}],
|
|
353
|
+
}], size: [{
|
|
353
354
|
type: Input
|
|
354
|
-
}],
|
|
355
|
+
}], svgIcon: [{
|
|
355
356
|
type: Input
|
|
356
|
-
}],
|
|
357
|
+
}], title: [{
|
|
357
358
|
type: Input
|
|
358
359
|
}] } });
|
|
359
360
|
|
|
@@ -439,7 +440,7 @@ class BaoButtonComponent {
|
|
|
439
440
|
}
|
|
440
441
|
}
|
|
441
442
|
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 });
|
|
442
|
-
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]=\"
|
|
443
|
+
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 });
|
|
443
444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoButtonComponent, decorators: [{
|
|
444
445
|
type: Component,
|
|
445
446
|
args: [{ selector: 'button[bao-button]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
@@ -456,7 +457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
456
457
|
'[class.bao-button-loading]': 'loading === true',
|
|
457
458
|
'[class.bao-button-no-text]': 'noText === true',
|
|
458
459
|
'[class.bao-button-full-width]': 'fullWidth === true'
|
|
459
|
-
}, template: "<bao-icon\n *ngIf=\"loading && !rightIcon\"\n class=\"loading-spinner\"\n svgIcon=\"icon-spinner\"\n [title]=\"
|
|
460
|
+
}, 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"] }]
|
|
460
461
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { displayType: [{
|
|
461
462
|
type: Input
|
|
462
463
|
}], level: [{
|
|
@@ -595,12 +596,9 @@ class BaoAlertComponent {
|
|
|
595
596
|
/**
|
|
596
597
|
* Alert type
|
|
597
598
|
*/
|
|
598
|
-
this.type = '';
|
|
599
|
+
this.type = 'info';
|
|
599
600
|
this.dismissible = false;
|
|
600
|
-
this.showIcon = true;
|
|
601
601
|
this.dismiss = new EventEmitter();
|
|
602
|
-
this.iconType = 'icon-info';
|
|
603
|
-
this.iconTitle = 'Information';
|
|
604
602
|
}
|
|
605
603
|
ngOnChanges(changes) {
|
|
606
604
|
if (changes['type']) {
|
|
@@ -613,6 +611,7 @@ class BaoAlertComponent {
|
|
|
613
611
|
success: 'icon-check-circle',
|
|
614
612
|
danger: 'icon-error',
|
|
615
613
|
warning: 'icon-warning',
|
|
614
|
+
emergency: 'icon-emergency',
|
|
616
615
|
default: 'icon-info'
|
|
617
616
|
};
|
|
618
617
|
return typesAlertIcon[value] || typesAlertIcon.default;
|
|
@@ -622,6 +621,7 @@ class BaoAlertComponent {
|
|
|
622
621
|
success: 'Succès',
|
|
623
622
|
danger: 'Erreur',
|
|
624
623
|
warning: 'Attention',
|
|
624
|
+
emergency: 'Urgence',
|
|
625
625
|
default: 'Information'
|
|
626
626
|
};
|
|
627
627
|
return titleIcon[value] || titleIcon.default;
|
|
@@ -631,7 +631,7 @@ class BaoAlertComponent {
|
|
|
631
631
|
}
|
|
632
632
|
}
|
|
633
633
|
BaoAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
634
|
-
BaoAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoAlertComponent, selector: "bao-alert", inputs: { type: "type", dismissible: "dismissible"
|
|
634
|
+
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 });
|
|
635
635
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAlertComponent, decorators: [{
|
|
636
636
|
type: Component,
|
|
637
637
|
args: [{ selector: 'bao-alert', encapsulation: ViewEncapsulation.None, host: {
|
|
@@ -640,14 +640,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
640
640
|
'[class.bao-alert-danger]': 'type === "danger"',
|
|
641
641
|
'[class.bao-alert-warning]': 'type === "warning"',
|
|
642
642
|
'[class.bao-alert-info]': 'type === "info"',
|
|
643
|
+
'[class.bao-alert-emergency]': 'type === "emergency"',
|
|
643
644
|
role: 'alert'
|
|
644
|
-
}, template: "<
|
|
645
|
+
}, 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"] }]
|
|
645
646
|
}], propDecorators: { type: [{
|
|
646
647
|
type: Input
|
|
647
648
|
}], dismissible: [{
|
|
648
649
|
type: Input
|
|
649
|
-
}], showIcon: [{
|
|
650
|
-
type: Input
|
|
651
650
|
}], dismiss: [{
|
|
652
651
|
type: Output
|
|
653
652
|
}] } });
|
|
@@ -703,16 +702,16 @@ class BaoBreadcrumbComponent {
|
|
|
703
702
|
constructor(renderer) {
|
|
704
703
|
this.renderer = renderer;
|
|
705
704
|
}
|
|
706
|
-
setLastLinkAttribute() {
|
|
707
|
-
const children = Array.from(this.staticContainer.nativeElement.children);
|
|
708
|
-
this.renderer.setAttribute(children[children.length - 1], Object.keys(LAST_NODE_ATTRIBUTE)[0], Object.values(LAST_NODE_ATTRIBUTE)[0]);
|
|
709
|
-
}
|
|
710
705
|
ngAfterViewInit() {
|
|
711
706
|
this.setLastLinkAttribute();
|
|
712
707
|
}
|
|
713
708
|
onContentChange() {
|
|
714
709
|
this.setLastLinkAttribute();
|
|
715
710
|
}
|
|
711
|
+
setLastLinkAttribute() {
|
|
712
|
+
const children = Array.from(this.staticContainer.nativeElement.children);
|
|
713
|
+
this.renderer.setAttribute(children[children.length - 1], Object.keys(LAST_NODE_ATTRIBUTE)[0], Object.values(LAST_NODE_ATTRIBUTE)[0]);
|
|
714
|
+
}
|
|
716
715
|
}
|
|
717
716
|
BaoBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoBreadcrumbComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
718
717
|
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 });
|
|
@@ -1000,15 +999,14 @@ let checkboxGroupNextUniqueId = 0;
|
|
|
1000
999
|
class BaoCheckboxGroupComponent {
|
|
1001
1000
|
constructor(cdr) {
|
|
1002
1001
|
this.cdr = cdr;
|
|
1003
|
-
this._uniqueId = `bao-checkbox-group-${++checkboxGroupNextUniqueId}`;
|
|
1004
|
-
/**
|
|
1005
|
-
* The checkbox group ID. It is set dynamically with an unique ID by default
|
|
1006
|
-
*/
|
|
1007
|
-
this.id = this._uniqueId;
|
|
1008
1002
|
/**
|
|
1009
1003
|
* The aria-describedby id for web accessibilty
|
|
1010
1004
|
*/
|
|
1011
1005
|
this.ariaDescribedby = undefined;
|
|
1006
|
+
this._uniqueId = `bao-checkbox-group-${++checkboxGroupNextUniqueId}`;
|
|
1007
|
+
if (!this.id) {
|
|
1008
|
+
this.id = this._uniqueId;
|
|
1009
|
+
}
|
|
1012
1010
|
}
|
|
1013
1011
|
ngAfterViewInit() {
|
|
1014
1012
|
this.setAriaDescribedByToDescription();
|
|
@@ -1053,14 +1051,6 @@ class BaoCheckboxComponent {
|
|
|
1053
1051
|
this.elementRef = elementRef;
|
|
1054
1052
|
this.cdr = cdr;
|
|
1055
1053
|
this.focusMonitor = focusMonitor;
|
|
1056
|
-
this._disabled = false;
|
|
1057
|
-
this._checked = false;
|
|
1058
|
-
this._indeterminate = false;
|
|
1059
|
-
this._uniqueId = `bao-checkbox-${++checkboxNextUniqueId}`;
|
|
1060
|
-
/**
|
|
1061
|
-
* The checkbox ID. It is set dynamically with an unique ID by default
|
|
1062
|
-
*/
|
|
1063
|
-
this.id = this._uniqueId;
|
|
1064
1054
|
/**
|
|
1065
1055
|
* Whether the checkbox has a border and is considered as a card.
|
|
1066
1056
|
*/
|
|
@@ -1081,8 +1071,15 @@ class BaoCheckboxComponent {
|
|
|
1081
1071
|
* Inderminate value of the checkbox whenever
|
|
1082
1072
|
*/
|
|
1083
1073
|
this.indeterminateChange = new EventEmitter();
|
|
1074
|
+
this._disabled = false;
|
|
1075
|
+
this._checked = false;
|
|
1076
|
+
this._indeterminate = false;
|
|
1077
|
+
this._uniqueId = `bao-checkbox-${++checkboxNextUniqueId}`;
|
|
1084
1078
|
this.onModelChange = () => undefined;
|
|
1085
1079
|
this.onTouch = () => undefined;
|
|
1080
|
+
if (!this.id) {
|
|
1081
|
+
this.id = this._uniqueId;
|
|
1082
|
+
}
|
|
1086
1083
|
}
|
|
1087
1084
|
/**
|
|
1088
1085
|
* Whether the checkbox is checked. Default value : false
|
|
@@ -1090,41 +1087,44 @@ class BaoCheckboxComponent {
|
|
|
1090
1087
|
get checked() {
|
|
1091
1088
|
return this._checked;
|
|
1092
1089
|
}
|
|
1093
|
-
set checked(value) {
|
|
1094
|
-
if (value !== this.checked) {
|
|
1095
|
-
this._checked = value;
|
|
1096
|
-
this.cdr.markForCheck();
|
|
1097
|
-
}
|
|
1098
|
-
}
|
|
1099
1090
|
/**
|
|
1100
1091
|
* Whether the checkbox is disabled. Default value : false
|
|
1101
1092
|
*/
|
|
1102
1093
|
get disabled() {
|
|
1103
1094
|
return this._disabled;
|
|
1104
1095
|
}
|
|
1105
|
-
set disabled(value) {
|
|
1106
|
-
// In the case the value is string or boolean
|
|
1107
|
-
const newValue = value;
|
|
1108
|
-
if (newValue !== this.disabled) {
|
|
1109
|
-
this._disabled = newValue;
|
|
1110
|
-
this.cdr.markForCheck();
|
|
1111
|
-
}
|
|
1112
|
-
}
|
|
1113
1096
|
/**
|
|
1114
1097
|
* Whether the checkbox is required. Default value : false
|
|
1115
1098
|
*/
|
|
1116
1099
|
get required() {
|
|
1117
1100
|
return this._required;
|
|
1118
1101
|
}
|
|
1119
|
-
set required(value) {
|
|
1120
|
-
this._required = value;
|
|
1121
|
-
}
|
|
1122
1102
|
/**
|
|
1123
1103
|
* Whether the checkbox is indeterminate. Default value : false
|
|
1124
1104
|
*/
|
|
1125
1105
|
get indeterminate() {
|
|
1126
1106
|
return this._indeterminate;
|
|
1127
1107
|
}
|
|
1108
|
+
get nativeElement() {
|
|
1109
|
+
return this.elementRef.nativeElement;
|
|
1110
|
+
}
|
|
1111
|
+
set checked(value) {
|
|
1112
|
+
if (value !== this.checked) {
|
|
1113
|
+
this._checked = value;
|
|
1114
|
+
this.cdr.markForCheck();
|
|
1115
|
+
}
|
|
1116
|
+
}
|
|
1117
|
+
set disabled(value) {
|
|
1118
|
+
// In the case the value is string or boolean
|
|
1119
|
+
const newValue = value;
|
|
1120
|
+
if (newValue !== this.disabled) {
|
|
1121
|
+
this._disabled = newValue;
|
|
1122
|
+
this.cdr.markForCheck();
|
|
1123
|
+
}
|
|
1124
|
+
}
|
|
1125
|
+
set required(value) {
|
|
1126
|
+
this._required = value;
|
|
1127
|
+
}
|
|
1128
1128
|
set indeterminate(value) {
|
|
1129
1129
|
const newValue = value;
|
|
1130
1130
|
if (newValue !== this._indeterminate) {
|
|
@@ -1134,9 +1134,6 @@ class BaoCheckboxComponent {
|
|
|
1134
1134
|
// Update the inderteminate value of the html element object
|
|
1135
1135
|
this.syncIndeterminate(this._indeterminate);
|
|
1136
1136
|
}
|
|
1137
|
-
get nativeElement() {
|
|
1138
|
-
return this.elementRef.nativeElement;
|
|
1139
|
-
}
|
|
1140
1137
|
ngOnInit() {
|
|
1141
1138
|
// Set all unique ids for the html elements
|
|
1142
1139
|
this.inputID = `${this.id}-input`;
|
|
@@ -1279,7 +1276,7 @@ class BaoCheckboxComponent {
|
|
|
1279
1276
|
}
|
|
1280
1277
|
}
|
|
1281
1278
|
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 });
|
|
1282
|
-
BaoCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BaoCheckboxComponent, selector: "bao-checkbox, [bao-checkbox]", inputs: {
|
|
1279
|
+
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: [
|
|
1283
1280
|
{
|
|
1284
1281
|
provide: NG_VALUE_ACCESSOR,
|
|
1285
1282
|
useExisting: forwardRef(() => BaoCheckboxComponent),
|
|
@@ -1304,15 +1301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1304
1301
|
'[class.bao-checkbox-required]': 'required',
|
|
1305
1302
|
'[class.bao-checkbox-hidden-label]': 'hiddenLabel'
|
|
1306
1303
|
}, 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"] }]
|
|
1307
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.FocusMonitor }]; }, propDecorators: {
|
|
1308
|
-
type: Input
|
|
1309
|
-
}], disabled: [{
|
|
1310
|
-
type: Input
|
|
1311
|
-
}], required: [{
|
|
1312
|
-
type: Input
|
|
1313
|
-
}], indeterminate: [{
|
|
1314
|
-
type: Input
|
|
1315
|
-
}], id: [{
|
|
1304
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.FocusMonitor }]; }, propDecorators: { id: [{
|
|
1316
1305
|
type: Input
|
|
1317
1306
|
}], ariaLabel: [{
|
|
1318
1307
|
type: Input,
|
|
@@ -1332,6 +1321,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1332
1321
|
}], inputElement: [{
|
|
1333
1322
|
type: ViewChild,
|
|
1334
1323
|
args: ['input', { static: false }]
|
|
1324
|
+
}], checked: [{
|
|
1325
|
+
type: Input
|
|
1326
|
+
}], disabled: [{
|
|
1327
|
+
type: Input
|
|
1328
|
+
}], required: [{
|
|
1329
|
+
type: Input
|
|
1330
|
+
}], indeterminate: [{
|
|
1331
|
+
type: Input
|
|
1335
1332
|
}] } });
|
|
1336
1333
|
class BaoCheckBoxDescription {
|
|
1337
1334
|
}
|
|
@@ -1656,17 +1653,6 @@ let radioGroupNextUniqueId = 0;
|
|
|
1656
1653
|
class BaoRadioButtonGroupComponent {
|
|
1657
1654
|
constructor(cdr) {
|
|
1658
1655
|
this.cdr = cdr;
|
|
1659
|
-
this._value = null;
|
|
1660
|
-
this._name = null;
|
|
1661
|
-
this._selected = null;
|
|
1662
|
-
this._isInitialized = false;
|
|
1663
|
-
this._disabled = false;
|
|
1664
|
-
this._required = false;
|
|
1665
|
-
this._uniqueId = `bao-checkbox-group-${++radioGroupNextUniqueId}`;
|
|
1666
|
-
/**
|
|
1667
|
-
* The checkbox group ID. It is set dynamically with an unique ID by default
|
|
1668
|
-
*/
|
|
1669
|
-
this.id = this._uniqueId;
|
|
1670
1656
|
/**
|
|
1671
1657
|
* Emit the value of the selected radio button
|
|
1672
1658
|
*/
|
|
@@ -1675,8 +1661,18 @@ class BaoRadioButtonGroupComponent {
|
|
|
1675
1661
|
* The aria-describedby for web accessibilty
|
|
1676
1662
|
*/
|
|
1677
1663
|
this.ariaDescribedby = null;
|
|
1664
|
+
this._value = null;
|
|
1665
|
+
this._name = null;
|
|
1666
|
+
this._selected = null;
|
|
1667
|
+
this._isInitialized = false;
|
|
1668
|
+
this._disabled = false;
|
|
1669
|
+
this._required = false;
|
|
1670
|
+
this._uniqueId = `bao-checkbox-group-${++radioGroupNextUniqueId}`;
|
|
1678
1671
|
this.onModelChange = () => undefined;
|
|
1679
1672
|
this.onTouch = () => undefined;
|
|
1673
|
+
if (!this.id) {
|
|
1674
|
+
this.id = this._uniqueId;
|
|
1675
|
+
}
|
|
1680
1676
|
}
|
|
1681
1677
|
/**
|
|
1682
1678
|
* Define the name property of all radio buttons. Default : null
|
|
@@ -1684,50 +1680,50 @@ class BaoRadioButtonGroupComponent {
|
|
|
1684
1680
|
get name() {
|
|
1685
1681
|
return this._name;
|
|
1686
1682
|
}
|
|
1687
|
-
set name(value) {
|
|
1688
|
-
this._name = value;
|
|
1689
|
-
this.updateRadioButtonNames();
|
|
1690
|
-
}
|
|
1691
1683
|
/**
|
|
1692
1684
|
* Define the value of the selected radio button. Default : null
|
|
1693
1685
|
*/
|
|
1694
1686
|
get value() {
|
|
1695
1687
|
return this._value;
|
|
1696
1688
|
}
|
|
1697
|
-
set value(newValue) {
|
|
1698
|
-
if (this._value !== newValue) {
|
|
1699
|
-
this._value = newValue;
|
|
1700
|
-
this.updateSelectedRadioFromValue();
|
|
1701
|
-
this.checkSelectedRadioButton();
|
|
1702
|
-
}
|
|
1703
|
-
}
|
|
1704
1689
|
/**
|
|
1705
1690
|
* Define which radio button is selected. Default : null
|
|
1706
1691
|
*/
|
|
1707
1692
|
get selected() {
|
|
1708
1693
|
return this._selected;
|
|
1709
1694
|
}
|
|
1710
|
-
set selected(selected) {
|
|
1711
|
-
this._selected = selected;
|
|
1712
|
-
this.value = selected ? selected.value : null;
|
|
1713
|
-
this.checkSelectedRadioButton();
|
|
1714
|
-
}
|
|
1715
1695
|
/**
|
|
1716
1696
|
* Whether the radio button groupd is disabled. Default : false
|
|
1717
1697
|
*/
|
|
1718
1698
|
get disabled() {
|
|
1719
1699
|
return this._disabled;
|
|
1720
1700
|
}
|
|
1721
|
-
set disabled(value) {
|
|
1722
|
-
this._disabled = coerceBooleanProperty(value);
|
|
1723
|
-
this.markRadiosForCheck();
|
|
1724
|
-
}
|
|
1725
1701
|
/**
|
|
1726
1702
|
* Whether the radio button groupd is required. Default : false
|
|
1727
1703
|
*/
|
|
1728
1704
|
get required() {
|
|
1729
1705
|
return this._required;
|
|
1730
1706
|
}
|
|
1707
|
+
set name(value) {
|
|
1708
|
+
this._name = value;
|
|
1709
|
+
this.updateRadioButtonNames();
|
|
1710
|
+
}
|
|
1711
|
+
set value(newValue) {
|
|
1712
|
+
if (this._value !== newValue) {
|
|
1713
|
+
this._value = newValue;
|
|
1714
|
+
this.updateSelectedRadioFromValue();
|
|
1715
|
+
this.checkSelectedRadioButton();
|
|
1716
|
+
}
|
|
1717
|
+
}
|
|
1718
|
+
set selected(selected) {
|
|
1719
|
+
this._selected = selected;
|
|
1720
|
+
this.value = selected ? selected.value : null;
|
|
1721
|
+
this.checkSelectedRadioButton();
|
|
1722
|
+
}
|
|
1723
|
+
set disabled(value) {
|
|
1724
|
+
this._disabled = coerceBooleanProperty(value);
|
|
1725
|
+
this.markRadiosForCheck();
|
|
1726
|
+
}
|
|
1731
1727
|
set required(value) {
|
|
1732
1728
|
this._required = coerceBooleanProperty(value);
|
|
1733
1729
|
this.markRadiosForCheck();
|
|
@@ -1849,7 +1845,7 @@ BaoRadioButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
|
|
|
1849
1845
|
multi: true
|
|
1850
1846
|
},
|
|
1851
1847
|
{ provide: BAO_RADIO_GROUP, useExisting: BaoRadioButtonGroupComponent }
|
|
1852
|
-
], queries: [{ propertyName: "
|
|
1848
|
+
], 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 });
|
|
1853
1849
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoRadioButtonGroupComponent, decorators: [{
|
|
1854
1850
|
type: Component,
|
|
1855
1851
|
args: [{ selector: 'bao-radio-button-group, [bao-radio-button-group], [baoRadioButtonGroup]', exportAs: 'baoRadioGroup', encapsulation: ViewEncapsulation.None, providers: [
|
|
@@ -1860,13 +1856,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1860
1856
|
},
|
|
1861
1857
|
{ provide: BAO_RADIO_GROUP, useExisting: BaoRadioButtonGroupComponent }
|
|
1862
1858
|
], 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"] }]
|
|
1863
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: {
|
|
1859
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
|
|
1860
|
+
type: Input
|
|
1861
|
+
}], change: [{
|
|
1862
|
+
type: Output
|
|
1863
|
+
}], staticContainer: [{
|
|
1864
1864
|
type: ContentChildren,
|
|
1865
1865
|
args: [forwardRef(() => BaoRadioButtonComponent), {
|
|
1866
1866
|
descendants: true
|
|
1867
1867
|
}]
|
|
1868
|
-
}
|
|
1869
|
-
type:
|
|
1868
|
+
}, {
|
|
1869
|
+
type: ViewChild,
|
|
1870
|
+
args: ['container', { static: false }]
|
|
1870
1871
|
}], name: [{
|
|
1871
1872
|
type: Input
|
|
1872
1873
|
}], value: [{
|
|
@@ -1877,11 +1878,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1877
1878
|
type: Input
|
|
1878
1879
|
}], required: [{
|
|
1879
1880
|
type: Input
|
|
1880
|
-
}], change: [{
|
|
1881
|
-
type: Output
|
|
1882
|
-
}], staticContainer: [{
|
|
1883
|
-
type: ViewChild,
|
|
1884
|
-
args: ['container', { static: false }]
|
|
1885
1881
|
}] } });
|
|
1886
1882
|
|
|
1887
1883
|
/**
|
|
@@ -1894,15 +1890,6 @@ class BaoRadioButtonComponent {
|
|
|
1894
1890
|
this.cdr = cdr;
|
|
1895
1891
|
this.focusMonitor = focusMonitor;
|
|
1896
1892
|
this.radioDispatcher = radioDispatcher;
|
|
1897
|
-
this._checked = false;
|
|
1898
|
-
this._disabled = false;
|
|
1899
|
-
this._required = false;
|
|
1900
|
-
this._value = null;
|
|
1901
|
-
this._uniqueId = `bao-radio-button-${++radioNextUniqueId}`;
|
|
1902
|
-
/**
|
|
1903
|
-
* The radio button ID. It is set dynamically with an unique ID by default
|
|
1904
|
-
*/
|
|
1905
|
-
this.id = this._uniqueId;
|
|
1906
1893
|
/**
|
|
1907
1894
|
* The aria-label for web accessibility
|
|
1908
1895
|
*/
|
|
@@ -1935,6 +1922,11 @@ class BaoRadioButtonComponent {
|
|
|
1935
1922
|
* The aria-labeledby id for web accessibilty
|
|
1936
1923
|
*/
|
|
1937
1924
|
this.ariaLabelledby = null;
|
|
1925
|
+
this._checked = false;
|
|
1926
|
+
this._disabled = false;
|
|
1927
|
+
this._required = false;
|
|
1928
|
+
this._value = null;
|
|
1929
|
+
this._uniqueId = `bao-radio-button-${++radioNextUniqueId}`;
|
|
1938
1930
|
/** Unregister function for radioDispatcher */
|
|
1939
1931
|
this._removeUniqueSelectionListener = () => undefined;
|
|
1940
1932
|
this.radioGroup = radioGroup;
|
|
@@ -1943,6 +1935,9 @@ class BaoRadioButtonComponent {
|
|
|
1943
1935
|
this.checked = false;
|
|
1944
1936
|
}
|
|
1945
1937
|
});
|
|
1938
|
+
if (!this.id) {
|
|
1939
|
+
this.id = this._uniqueId;
|
|
1940
|
+
}
|
|
1946
1941
|
}
|
|
1947
1942
|
/**
|
|
1948
1943
|
* Whether the radio button is checked. Default : false
|
|
@@ -1950,6 +1945,27 @@ class BaoRadioButtonComponent {
|
|
|
1950
1945
|
get checked() {
|
|
1951
1946
|
return this._checked;
|
|
1952
1947
|
}
|
|
1948
|
+
/**
|
|
1949
|
+
* Define the radio button value. Default : null
|
|
1950
|
+
*/
|
|
1951
|
+
get value() {
|
|
1952
|
+
return this._value;
|
|
1953
|
+
}
|
|
1954
|
+
/**
|
|
1955
|
+
* Whether the radio button is disabled. Default : false
|
|
1956
|
+
*/
|
|
1957
|
+
get disabled() {
|
|
1958
|
+
return this._disabled || (this.radioGroup && this.radioGroup.disabled);
|
|
1959
|
+
}
|
|
1960
|
+
/**
|
|
1961
|
+
* Whether the radio button is required. Default : false
|
|
1962
|
+
*/
|
|
1963
|
+
get required() {
|
|
1964
|
+
return this._required || (this.radioGroup && this.radioGroup.required);
|
|
1965
|
+
}
|
|
1966
|
+
get nativeElement() {
|
|
1967
|
+
return this.elementRef.nativeElement;
|
|
1968
|
+
}
|
|
1953
1969
|
set checked(value) {
|
|
1954
1970
|
const newCheckedState = coerceBooleanProperty(value);
|
|
1955
1971
|
if (this._checked !== newCheckedState) {
|
|
@@ -1970,12 +1986,6 @@ class BaoRadioButtonComponent {
|
|
|
1970
1986
|
this.cdr.markForCheck();
|
|
1971
1987
|
}
|
|
1972
1988
|
}
|
|
1973
|
-
/**
|
|
1974
|
-
* Define the radio button value. Default : null
|
|
1975
|
-
*/
|
|
1976
|
-
get value() {
|
|
1977
|
-
return this._value;
|
|
1978
|
-
}
|
|
1979
1989
|
set value(value) {
|
|
1980
1990
|
if (value !== this._value) {
|
|
1981
1991
|
this._value = value;
|
|
@@ -1989,27 +1999,12 @@ class BaoRadioButtonComponent {
|
|
|
1989
1999
|
}
|
|
1990
2000
|
}
|
|
1991
2001
|
}
|
|
1992
|
-
/**
|
|
1993
|
-
* Whether the radio button is disabled. Default : false
|
|
1994
|
-
*/
|
|
1995
|
-
get disabled() {
|
|
1996
|
-
return this._disabled || (this.radioGroup && this.radioGroup.disabled);
|
|
1997
|
-
}
|
|
1998
2002
|
set disabled(value) {
|
|
1999
2003
|
this.setDisabled(coerceBooleanProperty(value));
|
|
2000
2004
|
}
|
|
2001
|
-
/**
|
|
2002
|
-
* Whether the radio button is required. Default : false
|
|
2003
|
-
*/
|
|
2004
|
-
get required() {
|
|
2005
|
-
return this._required || (this.radioGroup && this.radioGroup.required);
|
|
2006
|
-
}
|
|
2007
2005
|
set required(value) {
|
|
2008
2006
|
this._required = coerceBooleanProperty(value);
|
|
2009
2007
|
}
|
|
2010
|
-
get nativeElement() {
|
|
2011
|
-
return this.elementRef.nativeElement;
|
|
2012
|
-
}
|
|
2013
2008
|
focus(options, origin) {
|
|
2014
2009
|
if (origin) {
|
|
2015
2010
|
this.focusMonitor.focusVia(this.inputElement, origin, options);
|
|
@@ -2101,7 +2096,7 @@ class BaoRadioButtonComponent {
|
|
|
2101
2096
|
}
|
|
2102
2097
|
}
|
|
2103
2098
|
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 });
|
|
2104
|
-
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"
|
|
2099
|
+
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: [
|
|
2105
2100
|
{
|
|
2106
2101
|
provide: NG_VALUE_ACCESSOR,
|
|
2107
2102
|
useExisting: forwardRef(() => BaoRadioButtonComponent),
|
|
@@ -2142,6 +2137,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2142
2137
|
type: Input
|
|
2143
2138
|
}], name: [{
|
|
2144
2139
|
type: Input
|
|
2140
|
+
}], hiddenLabel: [{
|
|
2141
|
+
type: Input
|
|
2142
|
+
}], change: [{
|
|
2143
|
+
type: Output
|
|
2144
|
+
}], inputElement: [{
|
|
2145
|
+
type: ViewChild,
|
|
2146
|
+
args: ['input', { static: false }]
|
|
2145
2147
|
}], checked: [{
|
|
2146
2148
|
type: Input
|
|
2147
2149
|
}], value: [{
|
|
@@ -2150,13 +2152,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2150
2152
|
type: Input
|
|
2151
2153
|
}], required: [{
|
|
2152
2154
|
type: Input
|
|
2153
|
-
}], hiddenLabel: [{
|
|
2154
|
-
type: Input
|
|
2155
|
-
}], change: [{
|
|
2156
|
-
type: Output
|
|
2157
|
-
}], inputElement: [{
|
|
2158
|
-
type: ViewChild,
|
|
2159
|
-
args: ['input', { static: false }]
|
|
2160
2155
|
}] } });
|
|
2161
2156
|
class BaoRadioDescription {
|
|
2162
2157
|
}
|
|
@@ -2229,8 +2224,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2229
2224
|
* See LICENSE file in the project root for full license information.
|
|
2230
2225
|
*/
|
|
2231
2226
|
const SPAN = 'span';
|
|
2232
|
-
const SPAN_TEXT_PROPERTY = 'textContent';
|
|
2233
|
-
const SCREEN_READER_CLASS_NAME = 'sr-only';
|
|
2227
|
+
const SPAN_TEXT_PROPERTY$1 = 'textContent';
|
|
2228
|
+
const SCREEN_READER_CLASS_NAME$1 = 'sr-only';
|
|
2234
2229
|
const BAO_ICON = 'bao-icon';
|
|
2235
2230
|
const HAS_ICON = 'has-icon';
|
|
2236
2231
|
class BaoTagComponent {
|
|
@@ -2259,8 +2254,8 @@ class BaoTagComponent {
|
|
|
2259
2254
|
}
|
|
2260
2255
|
addHiddenText() {
|
|
2261
2256
|
const screenReaderSpan = this.renderer.createElement(SPAN);
|
|
2262
|
-
this.renderer.setProperty(screenReaderSpan, SPAN_TEXT_PROPERTY, this.hiddenText);
|
|
2263
|
-
this.renderer.addClass(screenReaderSpan, SCREEN_READER_CLASS_NAME);
|
|
2257
|
+
this.renderer.setProperty(screenReaderSpan, SPAN_TEXT_PROPERTY$1, this.hiddenText);
|
|
2258
|
+
this.renderer.addClass(screenReaderSpan, SCREEN_READER_CLASS_NAME$1);
|
|
2264
2259
|
const labelChild = Array.from(this.nativeElement.children).find(c => c.localName === SPAN);
|
|
2265
2260
|
this.renderer.insertBefore(this.nativeElement, screenReaderSpan, labelChild);
|
|
2266
2261
|
}
|
|
@@ -2272,7 +2267,7 @@ class BaoTagComponent {
|
|
|
2272
2267
|
}
|
|
2273
2268
|
}
|
|
2274
2269
|
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 });
|
|
2275
|
-
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;
|
|
2270
|
+
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 });
|
|
2276
2271
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTagComponent, decorators: [{
|
|
2277
2272
|
type: Component,
|
|
2278
2273
|
args: [{ selector: 'bao-tag, [bao-tag], [baoTag]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
@@ -2287,7 +2282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2287
2282
|
'[class.bao-tag-alert-strong]': 'type === "alert" && variant === "strong"',
|
|
2288
2283
|
'[class.bao-tag-negative-light]': 'type === "negative" && variant === "light"',
|
|
2289
2284
|
'[class.bao-tag-negative-strong]': 'type === "negative" && variant === "strong"'
|
|
2290
|
-
}, 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;
|
|
2285
|
+
}, 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"] }]
|
|
2291
2286
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { type: [{
|
|
2292
2287
|
type: Input
|
|
2293
2288
|
}], variant: [{
|
|
@@ -2341,10 +2336,9 @@ class BaoSummaryComponent {
|
|
|
2341
2336
|
* Initialize the ID for summary
|
|
2342
2337
|
*/
|
|
2343
2338
|
this._uniqueId = `bao-summary-${++summaryUniqueId}`;
|
|
2344
|
-
|
|
2345
|
-
|
|
2346
|
-
|
|
2347
|
-
this.id = this._uniqueId;
|
|
2339
|
+
if (!this.id) {
|
|
2340
|
+
this.id = this._uniqueId;
|
|
2341
|
+
}
|
|
2348
2342
|
}
|
|
2349
2343
|
get nativeElement() {
|
|
2350
2344
|
return this.elementRef.nativeElement;
|
|
@@ -2486,6 +2480,462 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2486
2480
|
* See LICENSE file in the project root for full license information.
|
|
2487
2481
|
*/
|
|
2488
2482
|
|
|
2483
|
+
/*
|
|
2484
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2485
|
+
* Licensed under the MIT license.
|
|
2486
|
+
* See LICENSE file in the project root for full license information.
|
|
2487
|
+
*/
|
|
2488
|
+
class BaoAvatarContent {
|
|
2489
|
+
}
|
|
2490
|
+
BaoAvatarContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2491
|
+
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 });
|
|
2492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarContent, decorators: [{
|
|
2493
|
+
type: Directive,
|
|
2494
|
+
args: [{
|
|
2495
|
+
selector: 'bao-avatar-content, [bao-avatar-content]',
|
|
2496
|
+
exportAs: 'baoAvatarContent',
|
|
2497
|
+
host: {
|
|
2498
|
+
class: 'bao-avatar-content'
|
|
2499
|
+
}
|
|
2500
|
+
}]
|
|
2501
|
+
}] });
|
|
2502
|
+
const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
|
|
2503
|
+
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>";
|
|
2504
|
+
const SCREEN_READER_CLASS_NAME = 'sr-only';
|
|
2505
|
+
const SPAN_TEXT_PROPERTY = 'textContent';
|
|
2506
|
+
class BaoAvatarComponent {
|
|
2507
|
+
constructor(renderer, elementRef) {
|
|
2508
|
+
this.renderer = renderer;
|
|
2509
|
+
this.elementRef = elementRef;
|
|
2510
|
+
/**
|
|
2511
|
+
* Name of the profile to be used as title of the avatar.
|
|
2512
|
+
*/
|
|
2513
|
+
this.profileName = 'Avatar du profil';
|
|
2514
|
+
/**
|
|
2515
|
+
* ID of the background color to be used if avatar's content is text.
|
|
2516
|
+
*/
|
|
2517
|
+
this.color = 'background-color-1';
|
|
2518
|
+
}
|
|
2519
|
+
get nativeElement() {
|
|
2520
|
+
return this.elementRef.nativeElement;
|
|
2521
|
+
}
|
|
2522
|
+
ngAfterViewInit() {
|
|
2523
|
+
if (!this.nativeElement.childNodes.length) {
|
|
2524
|
+
this.addIcon();
|
|
2525
|
+
}
|
|
2526
|
+
if (this.nativeElement.firstChild.nodeName === 'SPAN') {
|
|
2527
|
+
this.formatInitials(this.nativeElement.firstChild);
|
|
2528
|
+
}
|
|
2529
|
+
this.setProfileName(this.profileName, this.nativeElement.firstChild);
|
|
2530
|
+
}
|
|
2531
|
+
addIcon() {
|
|
2532
|
+
const div = this.renderer.createElement('DIV');
|
|
2533
|
+
div.innerHTML = SVG_PROFILE_ICON;
|
|
2534
|
+
const svg = div.querySelector('svg');
|
|
2535
|
+
const titleNode = this.renderer.createElement('title', SVG_NAMESPACE);
|
|
2536
|
+
const titleText = this.renderer.createText(this.profileName);
|
|
2537
|
+
this.renderer.appendChild(titleNode, titleText);
|
|
2538
|
+
this.renderer.insertBefore(svg, titleNode, svg.firstChild);
|
|
2539
|
+
this.renderer.appendChild(this.nativeElement, svg);
|
|
2540
|
+
}
|
|
2541
|
+
setProfileName(name, content) {
|
|
2542
|
+
switch (content.nodeName) {
|
|
2543
|
+
case 'IMG':
|
|
2544
|
+
this.renderer.setAttribute(content, 'alt', name);
|
|
2545
|
+
break;
|
|
2546
|
+
case 'SPAN':
|
|
2547
|
+
this.renderer.setAttribute(content, 'aria-hidden', 'true');
|
|
2548
|
+
const screenReaderSpan = this.renderer.createElement('span');
|
|
2549
|
+
this.renderer.setProperty(screenReaderSpan, SPAN_TEXT_PROPERTY, name);
|
|
2550
|
+
this.renderer.addClass(screenReaderSpan, SCREEN_READER_CLASS_NAME);
|
|
2551
|
+
this.renderer.insertBefore(this.nativeElement, screenReaderSpan, content);
|
|
2552
|
+
break;
|
|
2553
|
+
}
|
|
2554
|
+
}
|
|
2555
|
+
formatInitials(content) {
|
|
2556
|
+
this.renderer.setValue(content.firstChild, content.firstChild.nodeValue.slice(0, 2));
|
|
2557
|
+
this.renderer.addClass(this.nativeElement, 'display-color');
|
|
2558
|
+
}
|
|
2559
|
+
}
|
|
2560
|
+
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 });
|
|
2561
|
+
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 });
|
|
2562
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarComponent, decorators: [{
|
|
2563
|
+
type: Component,
|
|
2564
|
+
args: [{ selector: 'bao-avatar', encapsulation: ViewEncapsulation.None, host: {
|
|
2565
|
+
class: 'bao-avatar',
|
|
2566
|
+
'[class.bao-avatar-color-1]': 'color === "background-color-1"',
|
|
2567
|
+
'[class.bao-avatar-color-2]': 'color === "background-color-2"',
|
|
2568
|
+
'[class.bao-avatar-color-3]': 'color === "background-color-3"',
|
|
2569
|
+
'[class.bao-avatar-color-4]': 'color === "background-color-4"',
|
|
2570
|
+
'[class.bao-avatar-color-5]': 'color === "background-color-5"',
|
|
2571
|
+
'[class.bao-avatar-color-6]': 'color === "background-color-6"',
|
|
2572
|
+
'[class.bao-avatar-color-7]': 'color === "background-color-7"',
|
|
2573
|
+
'[class.bao-avatar-color-8]': 'color === "background-color-8"',
|
|
2574
|
+
'[class.bao-avatar-color-9]': 'color === "background-color-9"',
|
|
2575
|
+
'[class.bao-avatar-color-10]': 'color === "background-color-10"'
|
|
2576
|
+
}, 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"] }]
|
|
2577
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { profileName: [{
|
|
2578
|
+
type: Input
|
|
2579
|
+
}], color: [{
|
|
2580
|
+
type: Input
|
|
2581
|
+
}] } });
|
|
2582
|
+
|
|
2583
|
+
/*
|
|
2584
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2585
|
+
* Licensed under the MIT license.
|
|
2586
|
+
* See LICENSE file in the project root for full license information.
|
|
2587
|
+
*/
|
|
2588
|
+
const AVATAR_DIRECTIVES = [BaoAvatarComponent, BaoAvatarContent];
|
|
2589
|
+
class BaoAvatarModule {
|
|
2590
|
+
}
|
|
2591
|
+
BaoAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2592
|
+
BaoAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarModule, declarations: [BaoAvatarComponent, BaoAvatarContent], imports: [CommonModule], exports: [BaoAvatarComponent, BaoAvatarContent] });
|
|
2593
|
+
BaoAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarModule, imports: [[CommonModule]] });
|
|
2594
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoAvatarModule, decorators: [{
|
|
2595
|
+
type: NgModule,
|
|
2596
|
+
args: [{
|
|
2597
|
+
imports: [CommonModule],
|
|
2598
|
+
declarations: [AVATAR_DIRECTIVES],
|
|
2599
|
+
exports: [AVATAR_DIRECTIVES]
|
|
2600
|
+
}]
|
|
2601
|
+
}] });
|
|
2602
|
+
|
|
2603
|
+
/*
|
|
2604
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2605
|
+
* Licensed under the MIT license.
|
|
2606
|
+
* See LICENSE file in the project root for full license information.
|
|
2607
|
+
*/
|
|
2608
|
+
|
|
2609
|
+
/*
|
|
2610
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2611
|
+
* Licensed under the MIT license.
|
|
2612
|
+
* See LICENSE file in the project root for full license information.
|
|
2613
|
+
*/
|
|
2614
|
+
/**
|
|
2615
|
+
* Unique number to generate a unique ID
|
|
2616
|
+
*/
|
|
2617
|
+
let tabsNextUniqueId = 0;
|
|
2618
|
+
class BaoTabHeader {
|
|
2619
|
+
constructor(renderer, elementRef) {
|
|
2620
|
+
this.renderer = renderer;
|
|
2621
|
+
this.elementRef = elementRef;
|
|
2622
|
+
/**
|
|
2623
|
+
* Emits its index when tab is clicked
|
|
2624
|
+
*/
|
|
2625
|
+
this.onTabClick = new EventEmitter();
|
|
2626
|
+
}
|
|
2627
|
+
get nativeElement() {
|
|
2628
|
+
return this.elementRef.nativeElement;
|
|
2629
|
+
}
|
|
2630
|
+
onClick(el) {
|
|
2631
|
+
const tabIndex = el.id.split('-')[el.id.split('-').length - 1];
|
|
2632
|
+
this.onTabClick.emit(tabIndex);
|
|
2633
|
+
}
|
|
2634
|
+
ngAfterViewInit() {
|
|
2635
|
+
this.renderer.setAttribute(this.nativeElement, 'role', 'tab');
|
|
2636
|
+
this.renderer.setAttribute(this.nativeElement, 'aria-selected', 'false');
|
|
2637
|
+
this.renderer.setAttribute(this.nativeElement, 'tabindex', '-1');
|
|
2638
|
+
}
|
|
2639
|
+
}
|
|
2640
|
+
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 });
|
|
2641
|
+
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 });
|
|
2642
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabHeader, decorators: [{
|
|
2643
|
+
type: Directive,
|
|
2644
|
+
args: [{
|
|
2645
|
+
selector: 'bao-tab-header, [bao-tab-header]',
|
|
2646
|
+
exportAs: 'baoTabHeader',
|
|
2647
|
+
host: {
|
|
2648
|
+
class: 'bao-tab-header'
|
|
2649
|
+
}
|
|
2650
|
+
}]
|
|
2651
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { onTabClick: [{
|
|
2652
|
+
type: Output
|
|
2653
|
+
}], onClick: [{
|
|
2654
|
+
type: HostListener,
|
|
2655
|
+
args: ['click', ['$event.target']]
|
|
2656
|
+
}] } });
|
|
2657
|
+
class BaoTabPanel {
|
|
2658
|
+
constructor(renderer, elementRef) {
|
|
2659
|
+
this.renderer = renderer;
|
|
2660
|
+
this.elementRef = elementRef;
|
|
2661
|
+
}
|
|
2662
|
+
get nativeElement() {
|
|
2663
|
+
return this.elementRef.nativeElement;
|
|
2664
|
+
}
|
|
2665
|
+
ngAfterViewInit() {
|
|
2666
|
+
this.renderer.setAttribute(this.nativeElement, 'role', 'tabpanel');
|
|
2667
|
+
this.renderer.setAttribute(this.nativeElement, 'hidden', 'true');
|
|
2668
|
+
this.renderer.setAttribute(this.nativeElement, 'tabindex', '0');
|
|
2669
|
+
this.renderer.setAttribute(this.nativeElement, 'aria-expanded', 'false');
|
|
2670
|
+
}
|
|
2671
|
+
}
|
|
2672
|
+
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 });
|
|
2673
|
+
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 });
|
|
2674
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabPanel, decorators: [{
|
|
2675
|
+
type: Directive,
|
|
2676
|
+
args: [{
|
|
2677
|
+
selector: 'bao-panel, [bao-panel]',
|
|
2678
|
+
exportAs: 'baoPanel',
|
|
2679
|
+
host: {
|
|
2680
|
+
class: 'bao-panel'
|
|
2681
|
+
}
|
|
2682
|
+
}]
|
|
2683
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; } });
|
|
2684
|
+
class BaoTablistComponent {
|
|
2685
|
+
constructor(renderer, elementRef) {
|
|
2686
|
+
this.renderer = renderer;
|
|
2687
|
+
this.elementRef = elementRef;
|
|
2688
|
+
/**
|
|
2689
|
+
* Size of the tabs displayed
|
|
2690
|
+
*/
|
|
2691
|
+
this.size = 'large';
|
|
2692
|
+
/**
|
|
2693
|
+
* Optionnal value to be used as aria-label property on tablist component
|
|
2694
|
+
*/
|
|
2695
|
+
this.ariaLabel = 'onglets';
|
|
2696
|
+
/**
|
|
2697
|
+
* Emits the index of the new active tab
|
|
2698
|
+
*/
|
|
2699
|
+
this.activeTabChange = new EventEmitter();
|
|
2700
|
+
this.uniqueId = `bao-tablist-${tabsNextUniqueId++}`;
|
|
2701
|
+
}
|
|
2702
|
+
get nativeElement() {
|
|
2703
|
+
return this.elementRef.nativeElement;
|
|
2704
|
+
}
|
|
2705
|
+
get tabs() {
|
|
2706
|
+
return this.elementRef.nativeElement.children;
|
|
2707
|
+
}
|
|
2708
|
+
leftKeyEvent() {
|
|
2709
|
+
if (document.activeElement.parentElement.id === this.uniqueId) {
|
|
2710
|
+
this.activeTabIndex = this.getNextActivableTabIndex(parseInt(this.activeTabIndex), false);
|
|
2711
|
+
this.changeActiveTab(this.activeTabIndex, true);
|
|
2712
|
+
this.activeTabChange.emit(this.activeTabIndex);
|
|
2713
|
+
}
|
|
2714
|
+
}
|
|
2715
|
+
rightKeyEvent() {
|
|
2716
|
+
if (document.activeElement.parentElement.id === this.uniqueId) {
|
|
2717
|
+
this.activeTabIndex = this.getNextActivableTabIndex(parseInt(this.activeTabIndex), true);
|
|
2718
|
+
this.changeActiveTab(this.activeTabIndex, true);
|
|
2719
|
+
this.activeTabChange.emit(this.activeTabIndex);
|
|
2720
|
+
}
|
|
2721
|
+
}
|
|
2722
|
+
/**
|
|
2723
|
+
* Makes the focus visible on tab header when changing from mouse to keyboard navigation
|
|
2724
|
+
*/
|
|
2725
|
+
tabKeyEvent() {
|
|
2726
|
+
if (document.activeElement.parentElement.id === this.uniqueId) {
|
|
2727
|
+
this.renderer.addClass(this.tabs[this.activeTabIndex], 'focus-visible');
|
|
2728
|
+
}
|
|
2729
|
+
}
|
|
2730
|
+
/**
|
|
2731
|
+
* Makes the focus visible on tab header when changing from mouse to keyboard navigation
|
|
2732
|
+
*/
|
|
2733
|
+
tabShiftKeyEvent() {
|
|
2734
|
+
if (document.activeElement.parentElement.id === this.uniqueId) {
|
|
2735
|
+
this.renderer.addClass(this.tabs[this.activeTabIndex], 'focus-visible');
|
|
2736
|
+
}
|
|
2737
|
+
}
|
|
2738
|
+
ngAfterViewInit() {
|
|
2739
|
+
this.setTablistAttributes();
|
|
2740
|
+
if (this.nativeElement.childElementCount) {
|
|
2741
|
+
this.setInitialActiveTab();
|
|
2742
|
+
}
|
|
2743
|
+
}
|
|
2744
|
+
ngAfterContentInit() {
|
|
2745
|
+
this.tabHeaders.forEach((tab) => {
|
|
2746
|
+
tab.onTabClick.subscribe((index) => {
|
|
2747
|
+
this.renderer.removeClass(this.tabs[index], 'focus-visible');
|
|
2748
|
+
this.activeTabIndex = index;
|
|
2749
|
+
this.changeActiveTab(index, false);
|
|
2750
|
+
this.activeTabChange.emit(index);
|
|
2751
|
+
});
|
|
2752
|
+
});
|
|
2753
|
+
}
|
|
2754
|
+
ngOnDestroy() {
|
|
2755
|
+
this.tabHeaders.forEach((tab) => {
|
|
2756
|
+
tab.onTabClick.unsubscribe();
|
|
2757
|
+
});
|
|
2758
|
+
}
|
|
2759
|
+
setTablistAttributes() {
|
|
2760
|
+
this.renderer.setAttribute(this.nativeElement, 'role', 'tablist');
|
|
2761
|
+
this.renderer.setAttribute(this.nativeElement, 'aria-label', this.ariaLabel);
|
|
2762
|
+
this.renderer.setProperty(this.nativeElement, 'id', this.uniqueId);
|
|
2763
|
+
}
|
|
2764
|
+
setInitialActiveTab() {
|
|
2765
|
+
const firstTabIndex = Array.from(this.tabs).findIndex((tab) => !tab.attributes['disabled']);
|
|
2766
|
+
this.activeTabIndex = firstTabIndex.toString();
|
|
2767
|
+
this.renderer.setAttribute(this.tabs[firstTabIndex], 'aria-selected', 'true');
|
|
2768
|
+
this.renderer.addClass(this.tabs[firstTabIndex], 'active');
|
|
2769
|
+
this.renderer.addClass(this.tabs[firstTabIndex], 'focus-visible');
|
|
2770
|
+
this.renderer.removeAttribute(this.tabs[firstTabIndex], 'tabindex');
|
|
2771
|
+
}
|
|
2772
|
+
changeActiveTab(newActiveTabIndex, isFocusVisible) {
|
|
2773
|
+
Array.from(this.tabs).forEach((tab) => {
|
|
2774
|
+
if (tab.id === `bao-tab-${newActiveTabIndex}`) {
|
|
2775
|
+
if (isFocusVisible) {
|
|
2776
|
+
this.renderer.addClass(tab, 'focus-visible');
|
|
2777
|
+
}
|
|
2778
|
+
this.renderer.setAttribute(tab, 'aria-selected', 'true');
|
|
2779
|
+
this.renderer.addClass(tab, 'active');
|
|
2780
|
+
this.renderer.removeAttribute(tab, 'tabindex');
|
|
2781
|
+
tab.focus();
|
|
2782
|
+
}
|
|
2783
|
+
else {
|
|
2784
|
+
this.renderer.setAttribute(tab, 'aria-selected', 'false');
|
|
2785
|
+
this.renderer.removeClass(tab, 'active');
|
|
2786
|
+
this.renderer.setAttribute(tab, 'tabindex', '-1');
|
|
2787
|
+
this.renderer.removeClass(tab, 'focus-visible');
|
|
2788
|
+
}
|
|
2789
|
+
});
|
|
2790
|
+
}
|
|
2791
|
+
/**
|
|
2792
|
+
* Finds the next activable tab index when navigating with left and right arrow keys
|
|
2793
|
+
* @param currentIndex Tab index which currently has focus
|
|
2794
|
+
* @param isRight Whether the tab navigation is going in the right direction or not
|
|
2795
|
+
* @returns Index of the new tab that will receive focus
|
|
2796
|
+
*/
|
|
2797
|
+
getNextActivableTabIndex(currentIndex, isRight) {
|
|
2798
|
+
const nextIndex = isRight ? currentIndex + 1 : currentIndex - 1;
|
|
2799
|
+
const nextIndexInTablist = ((nextIndex % this.tabs.length) + this.tabs.length) % this.tabs.length;
|
|
2800
|
+
if (this.tabs[nextIndexInTablist].attributes['disabled']) {
|
|
2801
|
+
return this.getNextActivableTabIndex(nextIndexInTablist, isRight);
|
|
2802
|
+
}
|
|
2803
|
+
return nextIndexInTablist.toString();
|
|
2804
|
+
}
|
|
2805
|
+
}
|
|
2806
|
+
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 });
|
|
2807
|
+
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 });
|
|
2808
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTablistComponent, decorators: [{
|
|
2809
|
+
type: Component,
|
|
2810
|
+
args: [{ selector: 'bao-tablist, [bao-tablist]', encapsulation: ViewEncapsulation.None, host: {
|
|
2811
|
+
class: 'bao-tablist',
|
|
2812
|
+
'[class.bao-tablist-small]': 'size === "small"',
|
|
2813
|
+
'[class.bao-tablist-medium]': 'size === "medium"',
|
|
2814
|
+
'[class.bao-tablist-large]': 'size === "large"'
|
|
2815
|
+
}, 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"] }]
|
|
2816
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { tabHeaders: [{
|
|
2817
|
+
type: ContentChildren,
|
|
2818
|
+
args: [BaoTabHeader]
|
|
2819
|
+
}], size: [{
|
|
2820
|
+
type: Input
|
|
2821
|
+
}], ariaLabel: [{
|
|
2822
|
+
type: Input
|
|
2823
|
+
}], activeTabChange: [{
|
|
2824
|
+
type: Output
|
|
2825
|
+
}], leftKeyEvent: [{
|
|
2826
|
+
type: HostListener,
|
|
2827
|
+
args: ['window:keydown.arrowleft']
|
|
2828
|
+
}], rightKeyEvent: [{
|
|
2829
|
+
type: HostListener,
|
|
2830
|
+
args: ['window:keydown.arrowright']
|
|
2831
|
+
}], tabKeyEvent: [{
|
|
2832
|
+
type: HostListener,
|
|
2833
|
+
args: ['window:keydown.tab']
|
|
2834
|
+
}], tabShiftKeyEvent: [{
|
|
2835
|
+
type: HostListener,
|
|
2836
|
+
args: ['window:keydown.shift.tab']
|
|
2837
|
+
}] } });
|
|
2838
|
+
class BaoTabsContainer {
|
|
2839
|
+
constructor(renderer, elementRef) {
|
|
2840
|
+
this.renderer = renderer;
|
|
2841
|
+
this.elementRef = elementRef;
|
|
2842
|
+
this.panelIdPrefix = 'bao-panel-';
|
|
2843
|
+
this.tabIdPrefix = 'bao-tab-';
|
|
2844
|
+
}
|
|
2845
|
+
get tabs() {
|
|
2846
|
+
return this.elementRef.nativeElement.querySelector('.bao-tablist').children;
|
|
2847
|
+
}
|
|
2848
|
+
get panels() {
|
|
2849
|
+
return this.elementRef.nativeElement.querySelectorAll('.bao-panel');
|
|
2850
|
+
}
|
|
2851
|
+
ngAfterViewInit() {
|
|
2852
|
+
this.setInitialActivePanel();
|
|
2853
|
+
Array.from(this.tabs).forEach((tab, idx) => {
|
|
2854
|
+
const tabId = `${this.tabIdPrefix}${idx}`;
|
|
2855
|
+
const panelId = `${this.panelIdPrefix}${idx}`;
|
|
2856
|
+
this.renderer.setProperty(tab, 'id', tabId);
|
|
2857
|
+
this.renderer.setProperty(this.panels[idx], 'id', panelId);
|
|
2858
|
+
this.renderer.setAttribute(tab, 'aria-controls', panelId);
|
|
2859
|
+
this.renderer.setAttribute(this.panels[idx], 'aria-labelledby', tabId);
|
|
2860
|
+
});
|
|
2861
|
+
}
|
|
2862
|
+
ngAfterContentInit() {
|
|
2863
|
+
this.tablist.activeTabChange.subscribe((index) => this.changeActivePanel(index));
|
|
2864
|
+
}
|
|
2865
|
+
ngOnDestroy() {
|
|
2866
|
+
this.tablist.activeTabChange.unsubscribe();
|
|
2867
|
+
}
|
|
2868
|
+
setInitialActivePanel() {
|
|
2869
|
+
const firstTabIndex = Array.from(this.tabs).findIndex((tab) => !tab.attributes['disabled']);
|
|
2870
|
+
this.renderer.removeAttribute(this.panels[firstTabIndex], 'hidden');
|
|
2871
|
+
this.renderer.setAttribute(this.panels[firstTabIndex], 'aria-expanded', 'true');
|
|
2872
|
+
}
|
|
2873
|
+
changeActivePanel(newActiveId) {
|
|
2874
|
+
this.panels.forEach((panel) => {
|
|
2875
|
+
if (panel.id === `${this.panelIdPrefix}${newActiveId}`) {
|
|
2876
|
+
this.renderer.removeAttribute(panel, 'hidden');
|
|
2877
|
+
this.renderer.setAttribute(panel, 'aria-expanded', 'true');
|
|
2878
|
+
}
|
|
2879
|
+
else {
|
|
2880
|
+
this.renderer.setAttribute(panel, 'hidden', 'true');
|
|
2881
|
+
this.renderer.setAttribute(panel, 'aria-expanded', 'false');
|
|
2882
|
+
}
|
|
2883
|
+
});
|
|
2884
|
+
}
|
|
2885
|
+
}
|
|
2886
|
+
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 });
|
|
2887
|
+
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 });
|
|
2888
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsContainer, decorators: [{
|
|
2889
|
+
type: Directive,
|
|
2890
|
+
args: [{
|
|
2891
|
+
selector: 'bao-tabs, [bao-tabs]',
|
|
2892
|
+
exportAs: 'baoTabs',
|
|
2893
|
+
host: {
|
|
2894
|
+
class: 'bao-tabs'
|
|
2895
|
+
}
|
|
2896
|
+
}]
|
|
2897
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { tablist: [{
|
|
2898
|
+
type: ContentChild,
|
|
2899
|
+
args: [BaoTablistComponent]
|
|
2900
|
+
}] } });
|
|
2901
|
+
|
|
2902
|
+
/*
|
|
2903
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2904
|
+
* Licensed under the MIT license.
|
|
2905
|
+
* See LICENSE file in the project root for full license information.
|
|
2906
|
+
*/
|
|
2907
|
+
const TABS_DIRECTIVES = [
|
|
2908
|
+
BaoTabsContainer,
|
|
2909
|
+
BaoTablistComponent,
|
|
2910
|
+
BaoTabHeader,
|
|
2911
|
+
BaoTabPanel
|
|
2912
|
+
];
|
|
2913
|
+
class BaoTabsModule {
|
|
2914
|
+
}
|
|
2915
|
+
BaoTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2916
|
+
BaoTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsModule, declarations: [BaoTabsContainer,
|
|
2917
|
+
BaoTablistComponent,
|
|
2918
|
+
BaoTabHeader,
|
|
2919
|
+
BaoTabPanel], imports: [CommonModule], exports: [BaoTabsContainer,
|
|
2920
|
+
BaoTablistComponent,
|
|
2921
|
+
BaoTabHeader,
|
|
2922
|
+
BaoTabPanel] });
|
|
2923
|
+
BaoTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsModule, imports: [[CommonModule]] });
|
|
2924
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaoTabsModule, decorators: [{
|
|
2925
|
+
type: NgModule,
|
|
2926
|
+
args: [{
|
|
2927
|
+
imports: [CommonModule],
|
|
2928
|
+
declarations: [TABS_DIRECTIVES],
|
|
2929
|
+
exports: [TABS_DIRECTIVES]
|
|
2930
|
+
}]
|
|
2931
|
+
}] });
|
|
2932
|
+
|
|
2933
|
+
/*
|
|
2934
|
+
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2935
|
+
* Licensed under the MIT license.
|
|
2936
|
+
* See LICENSE file in the project root for full license information.
|
|
2937
|
+
*/
|
|
2938
|
+
|
|
2489
2939
|
/*
|
|
2490
2940
|
* Copyright (c) 2022 Ville de Montreal. All rights reserved.
|
|
2491
2941
|
* Licensed under the MIT license.
|
|
@@ -2509,7 +2959,9 @@ BaoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.
|
|
|
2509
2959
|
BaoCommonComponentsModule,
|
|
2510
2960
|
BaoCheckboxModule,
|
|
2511
2961
|
BaoRadioModule,
|
|
2512
|
-
BaoSummaryModule
|
|
2962
|
+
BaoSummaryModule,
|
|
2963
|
+
BaoAvatarModule,
|
|
2964
|
+
BaoTabsModule
|
|
2513
2965
|
// TODO: reactivate once component does not depend on global css BaoBadgeModule,
|
|
2514
2966
|
// TODO: reactivate once component does not depend on global css BaoSnackBarModule,
|
|
2515
2967
|
] });
|
|
@@ -2530,7 +2982,9 @@ BaoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.
|
|
|
2530
2982
|
BaoCommonComponentsModule,
|
|
2531
2983
|
BaoCheckboxModule,
|
|
2532
2984
|
BaoRadioModule,
|
|
2533
|
-
BaoSummaryModule
|
|
2985
|
+
BaoSummaryModule,
|
|
2986
|
+
BaoAvatarModule,
|
|
2987
|
+
BaoTabsModule
|
|
2534
2988
|
// TODO: reactivate once component does not depend on global css BaoBadgeModule,
|
|
2535
2989
|
// TODO: reactivate once component does not depend on global css BaoSnackBarModule,
|
|
2536
2990
|
] });
|
|
@@ -2556,7 +3010,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2556
3010
|
BaoCommonComponentsModule,
|
|
2557
3011
|
BaoCheckboxModule,
|
|
2558
3012
|
BaoRadioModule,
|
|
2559
|
-
BaoSummaryModule
|
|
3013
|
+
BaoSummaryModule,
|
|
3014
|
+
BaoAvatarModule,
|
|
3015
|
+
BaoTabsModule
|
|
2560
3016
|
// TODO: reactivate once component does not depend on global css BaoBadgeModule,
|
|
2561
3017
|
// TODO: reactivate once component does not depend on global css BaoSnackBarModule,
|
|
2562
3018
|
]
|
|
@@ -2630,5 +3086,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2630
3086
|
* Generated bundle index. Do not edit.
|
|
2631
3087
|
*/
|
|
2632
3088
|
|
|
2633
|
-
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 };
|
|
3089
|
+
export { 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, BaoModule, BaoNavList, BaoRadioButtonComponent, BaoRadioButtonGroupComponent, BaoRadioDescription, BaoRadioModule, BaoSummaryComponent, BaoSummaryDescription, BaoSummaryModule, BaoTabHeader, BaoTabPanel, BaoTablistComponent, BaoTabsContainer, BaoTabsModule, BaoTagComponent, BaoTagModule, BaoTitleTextComponent };
|
|
2634
3090
|
//# sourceMappingURL=villedemontreal-angular-ui.mjs.map
|