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