@villedemontreal/angular-ui 14.0.1 → 14.2.0

package/fesm2020/villedemontreal-angular-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { SecurityContext, Injectable, Inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, NgModule, Directive, EventEmitter, Output, CUSTOM_ELEMENTS_SCHEMA, ViewChild, forwardRef, InjectionToken, ContentChildren, Optional, HostListener, ContentChild, Injector, TemplateRef, SkipSelf } from '@angular/core';
+import { SecurityContext, Injectable, Inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Directive, EventEmitter, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA, ViewChild, forwardRef, InjectionToken, ContentChildren, Optional, HostListener, ContentChild, Injector, TemplateRef, SkipSelf, ViewChildren, inject } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
@@ -12,12 +12,14 @@ import * as i2 from '@angular/cdk/collections';
 import * as i1$4 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import * as i3 from '@angular/cdk/portal';
-import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule, DomPortal } from '@angular/cdk/portal';
-import { Subject, filter, take, defer, startWith, Subscription } from 'rxjs';
+import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule, DomPortal, PortalInjector } from '@angular/cdk/portal';
+import { Subject, filter, take, defer, startWith } from 'rxjs';
+import * as i1$5 from '@angular/cdk/platform';
 import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
-import { trigger, state, style, transition, group, animate, query, animateChild } from '@angular/animations';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
-import { ANIMATION_MODULE_TYPE, BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { take as take$1 } from 'rxjs/operators';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i2$1 from '@angular/cdk/layout';
 
 function baoColorToHex(baoColor) {
     switch (baoColor) {
@@ -45,7 +47,7 @@ function baoColorToHex(baoColor) {
 }
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -62,6 +64,7 @@ const ICONS_DCT = {
     'icon-book': "<path fill-rule='evenodd' d='M11 7.5l-.4-.3A11 11 0 005 5.046v10.993a13 13 0 016 2.007V7.5zm2 0v10.546a13 13 0 016-2.007V5.046A11 11 0 0013.4 7.2l-.4.3zM3 7V4a1 1 0 011-1 13 13 0 017.8 2.6l.2.15.2-.15A13 13 0 0120 3a1 1 0 011 1v3h2a1 1 0 011 1v2a1 1 0 01-2 0V9h-1v8a1 1 0 01-1 1 11 11 0 00-4.583 1H22v-5a1 1 0 012 0v6a1 1 0 01-1 1H1a1 1 0 01-1-1V8a1 1 0 011-1h2zm0 2H2v10h6.583A11 11 0 004 18a1 1 0 01-1-1V9z'/>",
     'icon-briefcase': "<path fill-rule='evenodd' clip-rule='evenodd' d='M14 2h-4a3 3 0 00-3 3v1H4a3 3 0 00-3 3v2.977a1 1 0 000 .046V19a3 3 0 003 3h16a3 3 0 003-3v-3a1 1 0 10-2 0v3a1 1 0 01-1 1H4a1 1 0 01-1-1v-5.523l8.629 3.451a1 1 0 00.742 0l9.979-3.99a1.002 1.002 0 00.65-.961V9a3 3 0 00-3-3h-3V5a3 3 0 00-3-3zm7 9.323V9a1 1 0 00-1-1H4a1 1 0 00-1 1v2.323l9 3.6 9-3.6zM15 6H9V5a1 1 0 011-1h4a1 1 0 011 1v1z'/>",
     'icon-calendar': "<path fill-rule='evenodd' d='M20 10H4v9a1 1 0 001 1h14a1 1 0 001-1v-2a1 1 0 012 0v2a3 3 0 01-3 3H5a3 3 0 01-3-3V5a3 3 0 013-3h2V1a1 1 0 112 0v1h6V1a1 1 0 012 0v1h2a3 3 0 013 3v8a1 1 0 01-2 0v-3zm0-2V5a1 1 0 00-1-1h-2v1a1 1 0 01-2 0V4H9v1a1 1 0 11-2 0V4H5a1 1 0 00-1 1v3h16z'/>",
+    'icon-cell-phone': "<path fill-rule='evenodd' clip-rule='evenodd' d='M4 4C4 2.34315 5.34315 1 7 1H17C18.6569 1 20 2.34315 20 4V20C20 21.6569 18.6569 23 17 23H7C5.34315 23 4 21.6569 4 20V4ZM6 4C6 3.44772 6.44772 3 7 3H17C17.5523 3 18 3.44772 18 4V20C18 20.5523 17.5523 21 17 21H7C6.44771 21 6 20.5523 6 20V4ZM12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17C11.4477 17 11 17.4477 11 18C11 18.5523 11.4477 19 12 19Z' />",
     'icon-check-circle-full': "<path fill-rule='evenodd' d='M12 23C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11zm3.293-13.707L11 13.586l-1.293-1.293a1 1 0 10-1.414 1.414l2 2a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/>",
     'icon-check-circle': "<path fill-rule='evenodd' d='M21.542 17.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.477zm-6.25-8.184a1 1 0 011.415 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L11 13.586l4.293-4.293z'/>",
     'icon-check': "<path fill-rule='evenodd' d='M19.293 6.293a1 1 0 011.414 1.414l-7.947 7.948a1 1 0 01-1.415-1.415l7.948-7.947zm-9.586 11a1 1 0 11-1.414 1.414l-5-5a1 1 0 011.414-1.414l5 5z'/>",
@@ -169,7 +172,7 @@ const ICONS_DCT = {
 };
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -208,7 +211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                 }] }, { type: i1.DomSanitizer }]; } });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -360,27 +363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
             }] } });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
- * Licensed under the MIT license.
- * See LICENSE file in the project root for full license information.
- */
-const ICON_DIRECTIVES = [BaoIconComponent];
-class BaoIconModule {
-}
-BaoIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BaoIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoIconModule, declarations: [BaoIconComponent], imports: [CommonModule], exports: [BaoIconComponent] });
-BaoIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoIconModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoIconModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: ICON_DIRECTIVES,
-                    exports: ICON_DIRECTIVES
-                }]
-        }] });
-
-/*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -430,7 +413,7 @@ class BaoButtonComponent {
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
-    ngAfterViewInit() {
+    ngAfterContentInit() {
         const childNodes = Array.from(this.nativeElement.childNodes);
         const textIndex = childNodes.findIndex(c => c.nodeType === Node.TEXT_NODE);
         this.noText = textIndex === -1;
@@ -476,27 +459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
             }] } });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
- * Licensed under the MIT license.
- * See LICENSE file in the project root for full license information.
- */
-const BUTTON_DIRECTIVES = [BaoButtonComponent];
-class BaoButtonModule {
-}
-BaoButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BaoButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoButtonModule, declarations: [BaoButtonComponent], imports: [CommonModule, BaoIconModule], exports: [BaoButtonComponent, BaoIconModule] });
-BaoButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoButtonModule, imports: [CommonModule, BaoIconModule, BaoIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, BaoIconModule],
-                    declarations: BUTTON_DIRECTIVES,
-                    exports: [...BUTTON_DIRECTIVES, BaoIconModule]
-                }]
-        }] });
-
-/*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -653,7 +616,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
             }] } });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+const ICON_DIRECTIVES = [BaoIconComponent];
+class BaoIconModule {
+}
+BaoIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BaoIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoIconModule, declarations: [BaoIconComponent], imports: [CommonModule], exports: [BaoIconComponent] });
+BaoIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoIconModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoIconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: ICON_DIRECTIVES,
+                    exports: ICON_DIRECTIVES
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+const BUTTON_DIRECTIVES = [BaoButtonComponent];
+class BaoButtonModule {
+}
+BaoButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BaoButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoButtonModule, declarations: [BaoButtonComponent], imports: [CommonModule, BaoIconModule], exports: [BaoButtonComponent, BaoIconModule] });
+BaoButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoButtonModule, imports: [CommonModule, BaoIconModule, BaoIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, BaoIconModule],
+                    declarations: BUTTON_DIRECTIVES,
+                    exports: [...BUTTON_DIRECTIVES, BaoIconModule]
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -688,13 +691,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -727,7 +730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
             }] } });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -747,19 +750,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -851,7 +854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -885,13 +888,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -905,7 +908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -919,7 +922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -929,16 +932,16 @@ class BaoLabelTextComponent {
     }
 }
 BaoLabelTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoLabelTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BaoLabelTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BaoLabelTextComponent, selector: "bao-label, [bao-label]", inputs: { required: "required" }, host: { classAttribute: "bao-label" }, ngImport: i0, template: '<div class="bao-label"><ng-content></ng-content><span *ngIf="required">&nbsp;*</span></div>', isInline: true, styles: [".bao-label{color:#212529!important;font-weight:700;line-height:1.5em;font-size:1rem;margin-bottom:0}.bao-label span{color:#d3310a}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+BaoLabelTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BaoLabelTextComponent, selector: "bao-label, [bao-label]", inputs: { required: "required" }, host: { classAttribute: "bao-label" }, ngImport: i0, template: '<ng-content></ng-content><span *ngIf="required">&nbsp;*</span>', isInline: true, styles: [".bao-label{color:#212529!important;font-weight:700;line-height:1.5em;font-size:1rem;margin-bottom:.5rem}.bao-label span{color:#d3310a;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoLabelTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bao-label, [bao-label]', encapsulation: ViewEncapsulation.None, template: '<div class="bao-label"><ng-content></ng-content><span *ngIf="required">&nbsp;*</span></div>', host: { class: 'bao-label' }, styles: [".bao-label{color:#212529!important;font-weight:700;line-height:1.5em;font-size:1rem;margin-bottom:0}.bao-label span{color:#d3310a}\n"] }]
+            args: [{ selector: 'bao-label, [bao-label]', encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content><span *ngIf="required">&nbsp;*</span>', host: { class: 'bao-label' }, styles: [".bao-label{color:#212529!important;font-weight:700;line-height:1.5em;font-size:1rem;margin-bottom:.5rem}.bao-label span{color:#d3310a;margin:0}\n"] }]
         }], propDecorators: { required: [{
                 type: Input
             }] } });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -952,13 +955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
- * Licensed under the MIT license.
- * See LICENSE file in the project root for full license information.
- */
-
-/*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -989,7 +986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -1344,7 +1341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -1372,13 +1369,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -1479,7 +1482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -1516,19 +1519,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -1599,7 +1602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -1633,13 +1636,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -2165,7 +2168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -2210,13 +2213,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -2289,7 +2292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
             }] } });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -2309,13 +2312,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -2406,7 +2409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -2434,7 +2437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -2465,13 +2468,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -2571,7 +2574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
             }] } });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -2591,13 +2594,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -2890,7 +2893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
             }] } });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -2921,41 +2924,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
- * Licensed under the MIT license.
- * See LICENSE file in the project root for full license information.
- */
-/**
- * Animations used by MatDialog.
- * @docs-private
- */
-const baoModalAnimations = {
-    /** Animation that is applied on the modal container by default. */
-    modalContainer: trigger('modalContainer', [
-        // Note: The `enter` animation transitions to `transform: none`, because for some reason
-        // specifying the transform explicitly, causes IE both to blur the modal content and
-        // decimate the animation performance. Leaving it as `none` solves both issues.
-        state('void, exit', style({ opacity: 0, transform: 'scale(0.7)' })),
-        state('enter', style({ transform: 'none' })),
-        transition('* => enter', group([
-            animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'none', opacity: 1 })),
-            query('@*', animateChild(), { optional: true })
-        ])),
-        transition('* => void, * => exit', group([
-            animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 0 })),
-            query('@*', animateChild(), { optional: true })
-        ]))
-    ])
-};
-
-/*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -3217,39 +3192,29 @@ class BaoModalContainer extends _BaoModalContainerBase {
         /** State of the modal animation. */
         this._state = 'enter';
     }
-    /** Callback, invoked whenever an animation on the host completes. */
-    async _onAnimationDone({ toState, totalTime }) {
-        if (toState === 'enter') {
-            await this._trapFocus();
-            this._animationStateChanged.next({ state: 'opened', totalTime });
-        }
-        else if (toState === 'exit') {
-            this._restoreFocus();
-            this._animationStateChanged.next({ state: 'closed', totalTime });
-        }
-    }
-    /** Callback, invoked when an animation on the host starts. */
-    _onAnimationStart({ toState, totalTime }) {
-        if (toState === 'enter') {
-            this._animationStateChanged.next({ state: 'opening', totalTime });
-        }
-        else if (toState === 'exit' || toState === 'void') {
-            this._animationStateChanged.next({ state: 'closing', totalTime });
-        }
+    _startOpenAnimation() {
+        this._animationStateChanged.emit({ state: 'opening', totalTime: 20 });
+        void Promise.resolve().then(() => this._finishDialogOpen());
     }
     /** Starts the modal exit animation. */
     _startExitAnimation() {
-        this._state = 'exit';
-        // Mark the container for check so it can react if the
-        // view container is using OnPush change detection.
-        this._changeDetectorRef.markForCheck();
+        this._animationStateChanged.emit({ state: 'closed', totalTime: 20 });
+    }
+    _finishDialogOpen() {
+        this._openAnimationDone(20);
+    }
+    _openAnimationDone(totalTime) {
+        if (this._config.delayFocusTrap) {
+            void this._trapFocus();
+        }
+        this._animationStateChanged.next({ state: 'opened', totalTime });
     }
 }
 BaoModalContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModalContainer, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BaoModalContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BaoModalContainer, selector: "bao-modal-container", host: { attributes: { "tabindex": "-1", "aria-modal": "true" }, listeners: { "@modalContainer.start": "_onAnimationStart($event)", "@modalContainer.done": "_onAnimationDone($event)" }, properties: { "id": "_id", "attr.role": "_config.role", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledBy", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null", "@modalContainer": "_state" }, classAttribute: "bao-modal-container" }, usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: [".bao-container{padding-right:16px;padding-left:16px;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.bao-container{max-width:576px}}@media (min-width: 768px){.bao-container{max-width:768px}}@media (min-width: 992px){.bao-container{max-width:992px}}@media (min-width: 1200px){.bao-container{max-width:1200px}}.bao-row{display:flex;flex-wrap:wrap;margin-right:-16px;margin-left:-16px}.bao-col-12,.bao-col-lg-7{position:relative;width:100%;padding-right:1rem;padding-left:1rem}@media (min-width: 992px){.bao-col-lg-7{flex:0 0 58.33333%;max-width:58.33333%}}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex}.cdk-overlay-pane.bao-modal-mobil-full{width:100%;height:100%}.cdk-overlay-pane.bao-modal-mobil-compact{width:300px;height:100%}@media (min-width: 768px){.cdk-overlay-pane{width:500px;height:auto}.cdk-overlay-pane.bao-modal-lg{width:calc(100% - 4rem);height:calc(100% - 4rem)}.cdk-overlay-pane.bao-modal-md,.cdk-overlay-pane.bao-modal-sm{width:500px;height:auto}}@media (min-width: 992px){.cdk-overlay-pane{width:500px;height:auto}.cdk-overlay-pane.bao-modal-lg{width:calc(100% - 4rem);height:calc(100% - 4rem)}.cdk-overlay-pane.bao-modal-md{width:800px;height:auto}.cdk-overlay-pane.bao-modal-sm{width:500px;height:auto}}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:black}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.bao-modal-container{display:block;overflow:auto;width:100%;height:100%;min-height:inherit;max-height:inherit;background-color:#fff;background-clip:padding-box;border:0 solid rgba(0,0,0,.2);border-radius:.5rem;outline:0}.bao-modal-content{display:flex;flex-direction:column;height:100%}.bao-modal-header{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #ced4da;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.bao-modal-header .bao-modal-title{font-size:1rem;line-height:1.5rem;margin:1rem 0 1rem 1rem}.bao-modal-header button{margin:.5rem}.bao-modal-body{display:block;padding:1rem;overflow:auto;flex-grow:1}@media (min-width: 768px){.bao-modal-body{padding:2rem}}.bao-modal-footer{display:flex;flex-wrap:wrap;padding:1rem;border-top:1px solid #ced4da;border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.bao-modal-footer.bao-modal-footer-order{justify-content:unset;flex-direction:column-reverse}.bao-modal-footer button{text-align:center}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:100%;display:block}.bao-modal-footer .bao-button-secondary{margin-bottom:.5rem}.bao-modal-footer .bao-button-tertiary{display:none}@media (min-width: 768px){.bao-modal-footer{justify-content:flex-end}.bao-modal-footer.bao-modal-footer-order{flex-direction:row-reverse}.bao-modal-footer .bao-button-primary{margin-left:1rem}.bao-modal-footer .bao-button-secondary{margin-bottom:0}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:auto}.bao-modal-footer .bao-button-tertiary{display:block}}\n"], dependencies: [{ kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [baoModalAnimations.modalContainer], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+BaoModalContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BaoModalContainer, selector: "bao-modal-container", host: { attributes: { "tabindex": "-1", "aria-modal": "true" }, properties: { "id": "_id", "attr.role": "_config.role", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledBy", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null" }, classAttribute: "bao-modal-container" }, usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: [".bao-container{padding-right:16px;padding-left:16px;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.bao-container{max-width:576px}}@media (min-width: 768px){.bao-container{max-width:768px}}@media (min-width: 992px){.bao-container{max-width:992px}}@media (min-width: 1200px){.bao-container{max-width:1200px}}.bao-row{display:flex;flex-wrap:wrap;margin-right:-16px;margin-left:-16px}.bao-col-12,.bao-col-lg-7{position:relative;width:100%;padding-right:1rem;padding-left:1rem}@media (min-width: 992px){.bao-col-lg-7{flex:0 0 58.33333%;max-width:58.33333%}}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex}.cdk-overlay-pane.bao-modal-mobil-full{width:100%;height:100%}.cdk-overlay-pane.bao-modal-mobil-compact{width:300px;height:100%}@media (min-width: 768px){.cdk-overlay-pane{width:500px;height:auto}.cdk-overlay-pane.bao-modal-lg{width:calc(100% - 4rem);height:calc(100% - 4rem)}.cdk-overlay-pane.bao-modal-md,.cdk-overlay-pane.bao-modal-sm{width:500px;height:auto;max-height:calc(100% - 4rem)}}@media (min-width: 992px){.cdk-overlay-pane{width:500px;height:auto}.cdk-overlay-pane.bao-modal-lg{width:calc(100% - 4rem);height:calc(100% - 4rem)}.cdk-overlay-pane.bao-modal-md{width:800px;height:auto;max-height:calc(100% - 4rem)}.cdk-overlay-pane.bao-modal-sm{width:500px;height:auto;max-height:calc(100% - 4rem)}}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:black}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.bao-modal-container{display:block;overflow:auto;min-height:inherit;max-height:inherit;background-color:#fff;background-clip:padding-box;border:0 solid rgba(0,0,0,.2);border-radius:.5rem;outline:0}.bao-modal-content{display:flex;flex-direction:column;height:100%}.bao-modal-header{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #ced4da;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.bao-modal-header .bao-modal-title{font-size:1rem;line-height:1.5rem;margin:1rem 0 1rem 1rem}.bao-modal-header button{margin:.5rem}.bao-modal-body{display:block;padding:1rem;overflow:auto;flex-grow:1}@media (min-width: 768px){.bao-modal-body{padding:2rem}}.bao-modal-footer{display:flex;flex-wrap:wrap;padding:1rem;border-top:1px solid #ced4da;border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.bao-modal-footer.bao-modal-footer-order{justify-content:unset;flex-direction:column-reverse}.bao-modal-footer button{text-align:center}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:100%;display:block}.bao-modal-footer .bao-button-secondary{margin-bottom:.5rem}.bao-modal-footer .bao-button-tertiary{display:none}@media (min-width: 768px){.bao-modal-footer{justify-content:flex-end}.bao-modal-footer.bao-modal-footer-order{flex-direction:row-reverse}.bao-modal-footer .bao-button-primary{margin-left:1rem}.bao-modal-footer .bao-button-secondary{margin-bottom:0}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:auto}.bao-modal-footer .bao-button-tertiary{display:block}}\n"], dependencies: [{ kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModalContainer, decorators: [{
             type: Component,
-            args: [{ selector: 'bao-modal-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, animations: [baoModalAnimations.modalContainer], host: {
+            args: [{ selector: 'bao-modal-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, host: {
                         class: 'bao-modal-container',
                         tabindex: '-1',
                         'aria-modal': 'true',
@@ -3257,22 +3222,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                         '[attr.role]': '_config.role',
                         '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
                         '[attr.aria-label]': '_config.ariaLabel',
-                        '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
-                        '[@modalContainer]': '_state',
-                        '(@modalContainer.start)': '_onAnimationStart($event)',
-                        '(@modalContainer.done)': '_onAnimationDone($event)'
-                    }, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: [".bao-container{padding-right:16px;padding-left:16px;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.bao-container{max-width:576px}}@media (min-width: 768px){.bao-container{max-width:768px}}@media (min-width: 992px){.bao-container{max-width:992px}}@media (min-width: 1200px){.bao-container{max-width:1200px}}.bao-row{display:flex;flex-wrap:wrap;margin-right:-16px;margin-left:-16px}.bao-col-12,.bao-col-lg-7{position:relative;width:100%;padding-right:1rem;padding-left:1rem}@media (min-width: 992px){.bao-col-lg-7{flex:0 0 58.33333%;max-width:58.33333%}}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex}.cdk-overlay-pane.bao-modal-mobil-full{width:100%;height:100%}.cdk-overlay-pane.bao-modal-mobil-compact{width:300px;height:100%}@media (min-width: 768px){.cdk-overlay-pane{width:500px;height:auto}.cdk-overlay-pane.bao-modal-lg{width:calc(100% - 4rem);height:calc(100% - 4rem)}.cdk-overlay-pane.bao-modal-md,.cdk-overlay-pane.bao-modal-sm{width:500px;height:auto}}@media (min-width: 992px){.cdk-overlay-pane{width:500px;height:auto}.cdk-overlay-pane.bao-modal-lg{width:calc(100% - 4rem);height:calc(100% - 4rem)}.cdk-overlay-pane.bao-modal-md{width:800px;height:auto}.cdk-overlay-pane.bao-modal-sm{width:500px;height:auto}}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:black}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.bao-modal-container{display:block;overflow:auto;width:100%;height:100%;min-height:inherit;max-height:inherit;background-color:#fff;background-clip:padding-box;border:0 solid rgba(0,0,0,.2);border-radius:.5rem;outline:0}.bao-modal-content{display:flex;flex-direction:column;height:100%}.bao-modal-header{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #ced4da;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.bao-modal-header .bao-modal-title{font-size:1rem;line-height:1.5rem;margin:1rem 0 1rem 1rem}.bao-modal-header button{margin:.5rem}.bao-modal-body{display:block;padding:1rem;overflow:auto;flex-grow:1}@media (min-width: 768px){.bao-modal-body{padding:2rem}}.bao-modal-footer{display:flex;flex-wrap:wrap;padding:1rem;border-top:1px solid #ced4da;border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.bao-modal-footer.bao-modal-footer-order{justify-content:unset;flex-direction:column-reverse}.bao-modal-footer button{text-align:center}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:100%;display:block}.bao-modal-footer .bao-button-secondary{margin-bottom:.5rem}.bao-modal-footer .bao-button-tertiary{display:none}@media (min-width: 768px){.bao-modal-footer{justify-content:flex-end}.bao-modal-footer.bao-modal-footer-order{flex-direction:row-reverse}.bao-modal-footer .bao-button-primary{margin-left:1rem}.bao-modal-footer .bao-button-secondary{margin-bottom:0}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:auto}.bao-modal-footer .bao-button-tertiary{display:block}}\n"] }]
+                        '[attr.aria-describedby]': '_config.ariaDescribedBy || null'
+                    }, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: [".bao-container{padding-right:16px;padding-left:16px;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.bao-container{max-width:576px}}@media (min-width: 768px){.bao-container{max-width:768px}}@media (min-width: 992px){.bao-container{max-width:992px}}@media (min-width: 1200px){.bao-container{max-width:1200px}}.bao-row{display:flex;flex-wrap:wrap;margin-right:-16px;margin-left:-16px}.bao-col-12,.bao-col-lg-7{position:relative;width:100%;padding-right:1rem;padding-left:1rem}@media (min-width: 992px){.bao-col-lg-7{flex:0 0 58.33333%;max-width:58.33333%}}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex}.cdk-overlay-pane.bao-modal-mobil-full{width:100%;height:100%}.cdk-overlay-pane.bao-modal-mobil-compact{width:300px;height:100%}@media (min-width: 768px){.cdk-overlay-pane{width:500px;height:auto}.cdk-overlay-pane.bao-modal-lg{width:calc(100% - 4rem);height:calc(100% - 4rem)}.cdk-overlay-pane.bao-modal-md,.cdk-overlay-pane.bao-modal-sm{width:500px;height:auto;max-height:calc(100% - 4rem)}}@media (min-width: 992px){.cdk-overlay-pane{width:500px;height:auto}.cdk-overlay-pane.bao-modal-lg{width:calc(100% - 4rem);height:calc(100% - 4rem)}.cdk-overlay-pane.bao-modal-md{width:800px;height:auto;max-height:calc(100% - 4rem)}.cdk-overlay-pane.bao-modal-sm{width:500px;height:auto;max-height:calc(100% - 4rem)}}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:black}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.bao-modal-container{display:block;overflow:auto;min-height:inherit;max-height:inherit;background-color:#fff;background-clip:padding-box;border:0 solid rgba(0,0,0,.2);border-radius:.5rem;outline:0}.bao-modal-content{display:flex;flex-direction:column;height:100%}.bao-modal-header{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #ced4da;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.bao-modal-header .bao-modal-title{font-size:1rem;line-height:1.5rem;margin:1rem 0 1rem 1rem}.bao-modal-header button{margin:.5rem}.bao-modal-body{display:block;padding:1rem;overflow:auto;flex-grow:1}@media (min-width: 768px){.bao-modal-body{padding:2rem}}.bao-modal-footer{display:flex;flex-wrap:wrap;padding:1rem;border-top:1px solid #ced4da;border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.bao-modal-footer.bao-modal-footer-order{justify-content:unset;flex-direction:column-reverse}.bao-modal-footer button{text-align:center}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:100%;display:block}.bao-modal-footer .bao-button-secondary{margin-bottom:.5rem}.bao-modal-footer .bao-button-tertiary{display:none}@media (min-width: 768px){.bao-modal-footer{justify-content:flex-end}.bao-modal-footer.bao-modal-footer-order{flex-direction:row-reverse}.bao-modal-footer .bao-button-primary{margin-left:1rem}.bao-modal-footer .bao-button-secondary{margin-bottom:0}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:auto}.bao-modal-footer .bao-button-tertiary{display:block}}\n"] }]
         }] });
 
 // Counter for unique modal ids.
-let uniqueId = 0;
+let uniqueId$1 = 0;
 /**
  * Reference to a modal opened via the BaoModalService.
  */
 class BaoModalRef {
     constructor(_overlayRef, _containerInstance, 
     /** Id of the modal. */
-    id = `bao-modal-${uniqueId++}`) {
+    id = `bao-modal-${uniqueId$1++}`) {
         this._overlayRef = _overlayRef;
         this._containerInstance = _containerInstance;
         this.id = id;
@@ -3353,6 +3315,9 @@ class BaoModalRef {
         this._state = 1 /* CLOSING */;
         this._containerInstance._startExitAnimation();
     }
+    startOpenAnimation() {
+        this._containerInstance._startOpenAnimation();
+    }
     /**
      * Gets an observable that is notified when the modal is finished opening.
      */
@@ -3458,14 +3423,14 @@ function _closeModalVia(ref, interactionType, result) {
 }
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 /** Injection token that can be used to access the data that was passed in to a modal. */
 const BAO_MODAL_DATA = new InjectionToken('BaoModalData');
 class BaoModalBase {
-    constructor(_overlay, _injector, _parentModal, _overlayContainer, _modalRefConstructor, _modalContainerType, _modalDataToken, _animationMode) {
+    constructor(_overlay, _injector, _parentModal, _overlayContainer, _modalRefConstructor, _modalContainerType, _modalDataToken) {
         this._overlay = _overlay;
         this._injector = _injector;
         this._parentModal = _parentModal;
@@ -3473,7 +3438,6 @@ class BaoModalBase {
         this._modalRefConstructor = _modalRefConstructor;
         this._modalContainerType = _modalContainerType;
         this._modalDataToken = _modalDataToken;
-        this._animationMode = _animationMode;
         this.afterAllClosed = defer(() => this.openModals.length
             ? this.getAfterAllClosed()
             : this.getAfterAllClosed().pipe(startWith(undefined)));
@@ -3513,21 +3477,6 @@ class BaoModalBase {
         }
         const overlayRef = this._createOverlay(conf);
         const modalContainer = this._attachModalContainer(overlayRef, conf);
-        if (this._animationMode !== 'NoopAnimations') {
-            const animationStateSubscription = modalContainer._animationStateChanged.subscribe(modalAnimationEvent => {
-                if (modalAnimationEvent.state === 'opening') {
-                    this._modalAnimatingOpen = true;
-                }
-                if (modalAnimationEvent.state === 'opened') {
-                    this._modalAnimatingOpen = false;
-                    animationStateSubscription.unsubscribe();
-                }
-            });
-            if (!this._animationStateSubscriptions) {
-                this._animationStateSubscriptions = new Subscription();
-            }
-            this._animationStateSubscriptions.add(animationStateSubscription);
-        }
         const modalRef = this._attachModalContent(componentOrTemplateRef, modalContainer, overlayRef, conf);
         this._lastModalRef = modalRef;
         // If this is the first modal that we're opening, hide all the non-overlay content.
@@ -3598,6 +3547,7 @@ class BaoModalBase {
         });
         const containerPortal = new ComponentPortal(this._modalContainerType, config.viewContainerRef, injector);
         const containerRef = overlay.attach(containerPortal);
+        containerRef.instance._startOpenAnimation();
         return containerRef.instance;
     }
     /**
@@ -3715,16 +3665,16 @@ BaoModalBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "1
 BaoModalBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: BaoModalBase, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModalBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i1$4.Overlay }, { type: i0.Injector }, { type: undefined }, { type: i1$4.OverlayContainer }, { type: i0.Type }, { type: i0.Type }, { type: i0.InjectionToken }, { type: undefined }]; } });
+        }], ctorParameters: function () { return [{ type: i1$4.Overlay }, { type: i0.Injector }, { type: undefined }, { type: i1$4.OverlayContainer }, { type: i0.Type }, { type: i0.Type }, { type: i0.InjectionToken }]; } });
 /**
  * Service to open modal.
  */
 class BaoModal extends BaoModalBase {
-    constructor(overlay, injector, parentModal, overlayContainer, animationMode) {
-        super(overlay, injector, parentModal, overlayContainer, BaoModalRef, BaoModalContainer, BAO_MODAL_DATA, animationMode);
+    constructor(overlay, injector, parentModal, overlayContainer) {
+        super(overlay, injector, parentModal, overlayContainer, BaoModalRef, BaoModalContainer, BAO_MODAL_DATA);
     }
 }
-BaoModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModal, deps: [{ token: i1$4.Overlay }, { token: i0.Injector }, { token: BaoModal, optional: true, skipSelf: true }, { token: i1$4.OverlayContainer }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+BaoModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModal, deps: [{ token: i1$4.Overlay }, { token: i0.Injector }, { token: BaoModal, optional: true, skipSelf: true }, { token: i1$4.OverlayContainer }], target: i0.ɵɵFactoryTarget.Injectable });
 BaoModal.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModal });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModal, decorators: [{
             type: Injectable
@@ -3732,15 +3682,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                     type: Optional
                 }, {
                     type: SkipSelf
-                }] }, { type: i1$4.OverlayContainer }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [ANIMATION_MODULE_TYPE]
-                }] }]; } });
+                }] }, { type: i1$4.OverlayContainer }]; } });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -3819,7 +3764,7 @@ function getClosestDialog(element, openDialogs) {
 }
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -3827,26 +3772,12 @@ const MODAL_DIRECTIVES = [BaoModalContainer, BaoModalClose];
 class BaoModalModule {
 }
 BaoModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BaoModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoModalModule, declarations: [BaoModalContainer, BaoModalClose], imports: [CommonModule,
-        OverlayModule,
-        PortalModule,
-        BrowserAnimationsModule,
-        NoopAnimationsModule], exports: [BaoModalContainer, BaoModalClose] });
-BaoModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModalModule, providers: [BaoModal], imports: [CommonModule,
-        OverlayModule,
-        PortalModule,
-        BrowserAnimationsModule,
-        NoopAnimationsModule] });
+BaoModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoModalModule, declarations: [BaoModalContainer, BaoModalClose], imports: [CommonModule, OverlayModule, PortalModule], exports: [BaoModalContainer, BaoModalClose] });
+BaoModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModalModule, providers: [BaoModal], imports: [CommonModule, OverlayModule, PortalModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModalModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        OverlayModule,
-                        PortalModule,
-                        BrowserAnimationsModule,
-                        NoopAnimationsModule
-                    ],
+                    imports: [CommonModule, OverlayModule, PortalModule],
                     declarations: MODAL_DIRECTIVES,
                     exports: MODAL_DIRECTIVES,
                     providers: [BaoModal]
@@ -3854,7 +3785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -3927,7 +3858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
             }] } });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -3947,13 +3878,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -3970,6 +3901,10 @@ class BaoDropdownMenuItem {
          * Is the list item disabled
          */
         this.disabled = false;
+        /**
+         * Emits when menu item is clicked
+         */
+        this.itemClicked = new EventEmitter();
     }
     get nativeElement() {
         return this.elementRef.nativeElement;
@@ -4050,19 +3985,25 @@ class BaoDropdownMenuItem {
         }
     }
     /**
-     * This method propagates a click event to menu item children with inputs (checkbox, radio button)
+     * This method propagates a click event to menu item children with inputs (checkbox, radio button).
+     * It emits event to close menu if item does not contain an input.
      */
     propagateClick() {
+        let closeMenu = true;
         for (let i = 0; i < this.nativeElement.children.length; i++) {
             if (this.nativeElement.children.item(i).firstElementChild.localName ==
                 'input') {
                 this.nativeElement.children.item(i).firstElementChild.click();
+                closeMenu = false;
             }
         }
+        if (closeMenu) {
+            this.itemClicked.emit();
+        }
     }
 }
 BaoDropdownMenuItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuItem, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: BaoDropdownMenuComponent }], target: i0.ɵɵFactoryTarget.Directive });
-BaoDropdownMenuItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: BaoDropdownMenuItem, selector: "bao-dropdown-menu-item, [bao-dropdown-menu-item]", inputs: { disabled: "disabled" }, host: { listeners: { "window:keyup.space": "spaceKeyEvent()", "click": "onClick($event.target)", "window:keydown.enter": "enterKeyEvent()" }, properties: { "class.bao-dropdown-menu-item-disabled": "disabled===true" }, classAttribute: "bao-dropdown-menu-item" }, usesOnChanges: true, ngImport: i0 });
+BaoDropdownMenuItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: BaoDropdownMenuItem, selector: "bao-dropdown-menu-item, [bao-dropdown-menu-item]", inputs: { disabled: "disabled" }, outputs: { itemClicked: "itemClicked" }, host: { listeners: { "window:keyup.space": "spaceKeyEvent()", "click": "onClick($event.target)", "window:keyup.enter": "enterKeyEvent()" }, properties: { "class.bao-dropdown-menu-item-disabled": "disabled===true" }, classAttribute: "bao-dropdown-menu-item" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuItem, decorators: [{
             type: Directive,
             args: [{
@@ -4074,6 +4015,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: BaoDropdownMenuComponent }]; }, propDecorators: { disabled: [{
                 type: Input
+            }], itemClicked: [{
+                type: Output
             }], spaceKeyEvent: [{
                 type: HostListener,
                 args: ['window:keyup.space']
@@ -4082,7 +4025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                 args: ['click', ['$event.target']]
             }], enterKeyEvent: [{
                 type: HostListener,
-                args: ['window:keydown.enter']
+                args: ['window:keyup.enter']
             }] } });
 class BaoDropdownMenuComponent {
     constructor(cdr, renderer, elementRef) {
@@ -4160,6 +4103,9 @@ class BaoDropdownMenuComponent {
         this.renderer.setAttribute(this.nativeElement, 'id', this.menuId);
         this._menuPortal = new DomPortal(this._menuContent);
     }
+    ngAfterContentInit() {
+        this._listItems.forEach((item) => item.itemClicked.subscribe(() => this.isClosedByKeyEvent.emit()));
+    }
     focusFirstItem() {
         this._activeItemIndex = 0;
         this._listItems.first.nativeElement.focus();
@@ -4280,8 +4226,9 @@ class BaoDropdownMenuTrigger {
     }
     /** Enter key event triggers click event which opens menu,
      *  then focus is put on first item in the menu */
-    enterKeyEvent() {
+    enterKeyEvent(event) {
         if (this._isMenuOpen && document.activeElement === this.nativeElement) {
+            event.stopImmediatePropagation();
             this.menu.focusFirstItem();
         }
     }
@@ -4351,6 +4298,20 @@ class BaoDropdownMenuTrigger {
                     originY: 'top',
                     overlayX: 'start',
                     overlayY: 'bottom'
+                },
+                {
+                    // top-right of the overlay is connected to bottom-right of the origin;
+                    originX: 'end',
+                    originY: 'bottom',
+                    overlayX: 'end',
+                    overlayY: 'top'
+                },
+                {
+                    // bottom-right of the overlay is connected to top-right of the origin;
+                    originX: 'end',
+                    originY: 'top',
+                    overlayX: 'end',
+                    overlayY: 'bottom'
                 }
             ]),
             backdropClass: 'bao-overlay-transparent-backdrop',
@@ -4360,7 +4321,7 @@ class BaoDropdownMenuTrigger {
     }
 }
 BaoDropdownMenuTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuTrigger, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Directive });
-BaoDropdownMenuTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: BaoDropdownMenuTrigger, selector: "bao-dropdown-menu-trigger, [bao-dropdown-menu-trigger], [baoDropdownMenuTriggerFor]", inputs: { menu: ["baoDropdownMenuTriggerFor", "menu"] }, host: { listeners: { "window:keyup.escape": "escapeKeyEvent()", "window:keyup.enter": "enterKeyEvent()", "click": "onClick()" }, classAttribute: "bao-dropdown-menu-trigger" }, ngImport: i0 });
+BaoDropdownMenuTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: BaoDropdownMenuTrigger, selector: "bao-dropdown-menu-trigger, [bao-dropdown-menu-trigger], [baoDropdownMenuTriggerFor]", inputs: { menu: ["baoDropdownMenuTriggerFor", "menu"] }, host: { listeners: { "window:keyup.escape": "escapeKeyEvent()", "window:keyup.enter": "enterKeyEvent($event)", "click": "onClick()" }, classAttribute: "bao-dropdown-menu-trigger" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoDropdownMenuTrigger, decorators: [{
             type: Directive,
             args: [{
@@ -4375,7 +4336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                 args: ['window:keyup.escape']
             }], enterKeyEvent: [{
                 type: HostListener,
-                args: ['window:keyup.enter']
+                args: ['window:keyup.enter', ['$event']]
             }], onClick: [{
                 type: HostListener,
                 args: ['click']
@@ -4470,7 +4431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; } });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -4510,113 +4471,1569 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
-class BaoModule {
+const KILO_THRESHOLD = 1000;
+const MEGA_THRESHOLD = 1000000;
+class BaoFilePreviewComponent {
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        /**
+         * Is file loading
+         */
+        this.isLoading = false;
+        /**
+         * True if projected content has no icon and file does not have a thumbnail.
+         */
+        this.insertGenericIcon = false;
+        this.thumbnailURL = '';
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    get fileSize() {
+        return this.formatSize(this.file.size);
+    }
+    ngAfterContentInit() {
+        this.getThumbnail();
+        this.setIcon();
+    }
+    setIcon() {
+        // If no icon is in the projected content, generic icon is added
+        const contentIcon = Array.from(this.nativeElement.children.item(0).children).find((el) => el.localName === 'bao-icon');
+        if (!contentIcon) {
+            this.insertGenericIcon = true;
+        }
+        else {
+            this.renderer.addClass(contentIcon, 'bao-file-media');
+        }
+    }
+    getThumbnail() {
+        if (this.file &&
+            (this.file.type === 'image/png' || this.file.type === 'image/jpeg')) {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                this.thumbnailURL = event.target.result;
+            };
+            reader.onerror = () => {
+                this.thumbnailURL = '';
+            };
+            reader.readAsDataURL(this.file);
+        }
+    }
+    formatSize(size) {
+        if (size >= KILO_THRESHOLD && size / KILO_THRESHOLD < KILO_THRESHOLD) {
+            return this.getSizeAndUnit(size, KILO_THRESHOLD, 'Ko');
+        }
+        const sizeDividedByKoMultiplicator = size / KILO_THRESHOLD;
+        if (sizeDividedByKoMultiplicator >= KILO_THRESHOLD) {
+            const toFixed = sizeDividedByKoMultiplicator > 10 ? 0 : 1;
+            return this.getSizeAndUnit(size, MEGA_THRESHOLD, 'Mo', toFixed);
+        }
+        return `${size} octets`;
+    }
+    getSizeAndUnit(size, multiplicator, unit, toFixed = 0) {
+        return `${(size / multiplicator).toFixed(toFixed)} ${unit}`;
+    }
 }
-BaoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BaoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoModule, imports: [BaoIconModule,
-        BaoButtonModule,
-        BaoAlertModule,
-        BaoCardModule,
-        BaoBreadcrumbModule], exports: [BaoIconModule,
-        BaoButtonModule,
-        BaoAlertModule,
-        BaoBreadcrumbModule,
-        BaoCardModule,
-        BaoTagModule,
-        BaoHeaderInfoModule,
-        BaoListModule,
-        BaoCommonComponentsModule,
-        BaoCheckboxModule,
-        BaoRadioModule,
-        BaoSummaryModule,
-        BaoAvatarModule,
-        BaoTabsModule,
-        BaoModalModule,
-        BaoHyperlinkModule,
-        BaoDropdownMenuModule
-        // TODO: reactivate once component does not depend on global css BaoBadgeModule,
-        // TODO: reactivate once component does not depend on global css BaoSnackBarModule,
-    ] });
-BaoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModule, imports: [BaoIconModule,
-        BaoButtonModule,
-        BaoAlertModule,
-        BaoCardModule,
-        BaoBreadcrumbModule, BaoIconModule,
-        BaoButtonModule,
-        BaoAlertModule,
-        BaoBreadcrumbModule,
-        BaoCardModule,
-        BaoTagModule,
-        BaoHeaderInfoModule,
-        BaoListModule,
-        BaoCommonComponentsModule,
-        BaoCheckboxModule,
-        BaoRadioModule,
-        BaoSummaryModule,
-        BaoAvatarModule,
-        BaoTabsModule,
-        BaoModalModule,
-        BaoHyperlinkModule,
-        BaoDropdownMenuModule
-        // TODO: reactivate once component does not depend on global css BaoBadgeModule,
-        // TODO: reactivate once component does not depend on global css BaoSnackBarModule,
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        BaoIconModule,
-                        BaoButtonModule,
-                        BaoAlertModule,
-                        BaoCardModule,
-                        BaoBreadcrumbModule
-                    ],
-                    exports: [
-                        BaoIconModule,
-                        BaoButtonModule,
-                        BaoAlertModule,
-                        BaoBreadcrumbModule,
-                        BaoCardModule,
-                        BaoTagModule,
-                        BaoHeaderInfoModule,
-                        BaoListModule,
-                        BaoCommonComponentsModule,
-                        BaoCheckboxModule,
-                        BaoRadioModule,
-                        BaoSummaryModule,
-                        BaoAvatarModule,
-                        BaoTabsModule,
-                        BaoModalModule,
-                        BaoHyperlinkModule,
-                        BaoDropdownMenuModule
-                        // TODO: reactivate once component does not depend on global css BaoBadgeModule,
-                        // TODO: reactivate once component does not depend on global css BaoSnackBarModule,
-                    ]
-                }]
-        }] });
+BaoFilePreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFilePreviewComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+BaoFilePreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BaoFilePreviewComponent, selector: "bao-file-preview, [bao-file-preview]", inputs: { file: "file", isLoading: "isLoading" }, host: { classAttribute: "bao-file-preview" }, ngImport: i0, template: "<div class=\"bao-file-info\">\n  <ng-content select=\"bao-icon\"></ng-content>\n  <bao-icon\n    *ngIf=\"insertGenericIcon && !thumbnailURL\"\n    class=\"bao-file-media\"\n    svgIcon=\"icon-file\"\n  >\n  </bao-icon>\n  <ng-container *ngIf=\"thumbnailURL && !isLoading\">\n    <img\n      class=\"bao-file-media\"\n      [src]=\"thumbnailURL\"\n      width=\"40px\"\n      height=\"40px\"\n    />\n  </ng-container>\n  <div class=\"bao-file-text\">\n    <div class=\"bao-file-name\">{{ file.name }}</div>\n    <div class=\"bao-file-size\">{{ fileSize }}</div>\n  </div>\n</div>\n<ng-container *ngIf=\"!isLoading\">\n  <ng-content select=\"button[bao-button]\"></ng-content>\n  <ng-content select=\"baoDropdownTriggerFor\"></ng-content>\n</ng-container>\n<bao-icon\n  *ngIf=\"isLoading\"\n  class=\"loading-spinner\"\n  svgIcon=\"icon-spinner\"\n  title=\"chargement\"\n></bao-icon>\n", styles: [".bao-file-preview{display:flex;align-items:center;justify-content:space-between;padding-top:.625rem;padding-bottom:.625rem;list-style-type:none}.bao-file-preview>.bao-file-info{display:flex;align-items:center}.bao-file-preview>.bao-file-info>.bao-icon{color:#adb2bd;flex-shrink:0}.bao-file-preview>.bao-file-info>.bao-file-media{margin-right:1rem}.bao-file-preview>.bao-file-info>.bao-file-text{display:inline-flex;flex-direction:column;margin-right:1rem}.bao-file-preview>.bao-file-info>.bao-file-text>.bao-file-name{overflow:hidden;font-weight:700;font-size:.875rem;line-height:1.25rem;color:#212529}.bao-file-preview>.bao-file-info>.bao-file-text>.bao-file-size{font-weight:400;font-size:.75rem;line-height:1rem;color:#637381}.bao-file-preview .loading-spinner{color:#097d6c}.bao-file-preview .bao-dropdown-menu-container{position:absolute;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BaoIconComponent, selector: "bao-icon", inputs: ["color", "size", "svgIcon", "title"], exportAs: ["baoIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFilePreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bao-file-preview, [bao-file-preview]', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'bao-file-preview'
+                    }, template: "<div class=\"bao-file-info\">\n  <ng-content select=\"bao-icon\"></ng-content>\n  <bao-icon\n    *ngIf=\"insertGenericIcon && !thumbnailURL\"\n    class=\"bao-file-media\"\n    svgIcon=\"icon-file\"\n  >\n  </bao-icon>\n  <ng-container *ngIf=\"thumbnailURL && !isLoading\">\n    <img\n      class=\"bao-file-media\"\n      [src]=\"thumbnailURL\"\n      width=\"40px\"\n      height=\"40px\"\n    />\n  </ng-container>\n  <div class=\"bao-file-text\">\n    <div class=\"bao-file-name\">{{ file.name }}</div>\n    <div class=\"bao-file-size\">{{ fileSize }}</div>\n  </div>\n</div>\n<ng-container *ngIf=\"!isLoading\">\n  <ng-content select=\"button[bao-button]\"></ng-content>\n  <ng-content select=\"baoDropdownTriggerFor\"></ng-content>\n</ng-container>\n<bao-icon\n  *ngIf=\"isLoading\"\n  class=\"loading-spinner\"\n  svgIcon=\"icon-spinner\"\n  title=\"chargement\"\n></bao-icon>\n", styles: [".bao-file-preview{display:flex;align-items:center;justify-content:space-between;padding-top:.625rem;padding-bottom:.625rem;list-style-type:none}.bao-file-preview>.bao-file-info{display:flex;align-items:center}.bao-file-preview>.bao-file-info>.bao-icon{color:#adb2bd;flex-shrink:0}.bao-file-preview>.bao-file-info>.bao-file-media{margin-right:1rem}.bao-file-preview>.bao-file-info>.bao-file-text{display:inline-flex;flex-direction:column;margin-right:1rem}.bao-file-preview>.bao-file-info>.bao-file-text>.bao-file-name{overflow:hidden;font-weight:700;font-size:.875rem;line-height:1.25rem;color:#212529}.bao-file-preview>.bao-file-info>.bao-file-text>.bao-file-size{font-weight:400;font-size:.75rem;line-height:1rem;color:#637381}.bao-file-preview .loading-spinner{color:#097d6c}.bao-file-preview .bao-dropdown-menu-container{position:absolute;margin-left:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { file: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }] } });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
-class BaoBadgeComponent {
+/**
+ * To modify the labels and text displayed, create a new instance of BaoFileIntl and
+ * include it in a custom provider
+ */
+class BaoFileIntl {
     constructor() {
-        this.type = '';
+        /**
+         * Stream to emit from when labels are changed. Use this to notify components when the labels have
+         * changed after initialization.
+         */
+        this.changes = new Subject();
+        /** The label for button in dropzone */
+        this.dropzoneButtonLabel = 'Parcourir';
+        /** The default dropzone instructions */
+        this.defaultDropzoneInstructions = 'ou déposer votre fichier ici';
+        /** Error message displayed when uploaded file is too large */
+        this.fileTooBigErrorMessage = 'La taille de ce fichier est trop grande';
+        /** Error message displayed when uploaded file has an invalid type */
+        this.invalidFileTypeErrorMessage = "Ce format de fichier n'est pas autorisé";
     }
 }
-BaoBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BaoBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BaoBadgeComponent, selector: "bao-badge", inputs: { type: "type" }, host: { properties: { "class.positive": "type === \"success\"", "class.negative": "type === \"danger\"", "class.warning": "type === \"warning\"", "class.informative": "type === \"info\"" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block;border:.0625rem solid transparent;color:#fff;padding:0 .4375rem;border-radius:10rem;min-width:1.5rem;font-size:.875rem;font-weight:700;line-height:1.25rem;text-align:center;white-space:nowrap;overflow:hidden;vertical-align:baseline}:host.informative{background-color:#0079c4}:host.positive{background-color:#0da566}:host.warning{background-color:#ffb833;color:#000}:host.negative{background-color:#d3310a}\n"] });
+BaoFileIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFileIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+BaoFileIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFileIntl, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFileIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class BaoFileIntlEnglish extends BaoFileIntl {
+    constructor() {
+        super(...arguments);
+        /** The label for button in dropzone */
+        this.dropzoneButtonLabel = 'Browse';
+        /** The default dropzone instructions */
+        this.defaultDropzoneInstructions = 'or drop your file here';
+        /** Error message displayed when uploaded file is too large */
+        this.fileTooBigErrorMessage = 'The size of this file is too large';
+        /** Error message displayed when uploaded file has an invalid type */
+        this.invalidFileTypeErrorMessage = 'The format of this file is unauthorized';
+    }
+}
+BaoFileIntlEnglish.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFileIntlEnglish, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+BaoFileIntlEnglish.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFileIntlEnglish });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFileIntlEnglish, decorators: [{
+            type: Injectable
+        }] });
+/** @docs-private */
+function BAO_FILE_INTL_PROVIDER_FACTORY(parentIntl) {
+    return parentIntl || new BaoFileIntl();
+}
+/** @docs-private */
+const BAO_FILE_INTL_PROVIDER = {
+    // If there is already an BaoFileIntl available, use that. Otherwise, provide a new one.
+    provide: BaoFileIntl,
+    deps: [[new Optional(), new SkipSelf(), BaoFileIntl]],
+    useFactory: BAO_FILE_INTL_PROVIDER_FACTORY
+};
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+/**
+ * Unique number to generate a unique ID
+ */
+let fileInputUniqueId = 0;
+let fileTextUniqueId = 0;
+class BaoFileInputComponent {
+    constructor(intl, elementRef, renderer, cdr) {
+        this.intl = intl;
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        /**
+         * Size of the file input label
+         */
+        this.size = 'medium';
+        /**
+         * Maximum size accepted for uploaded files
+         */
+        this.maximalFileSize = -1;
+        /**
+         * Accepted types of files
+         */
+        this.acceptedMIMETypes = [];
+        /**
+         * Is field required
+         */
+        this.required = false;
+        /**
+         * Is field disabled
+         */
+        this.disabled = false;
+        /**
+         * File selected to be uploaded
+         */
+        this.uploadedFile = new EventEmitter();
+        this.insertDefaultInstructions = false;
+        this.isFileTooBig = false;
+        this.isFileTypeInvalid = false;
+        /**
+         * Saves the registerOnChange function so the component can call it whenever it wants.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+        this.propagateChange = (_) => { };
+        /**
+         * Saves the registerOnTouched function so the component can call it whenever it wants.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateTouched = () => { };
+        this._intlChanges = intl.changes.subscribe(() => this.cdr.markForCheck());
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    enterKeyEvent() {
+        if (document.activeElement.id === this.inputId) {
+            document.getElementById(this.inputId).click();
+        }
+    }
+    tabKeyEvent() {
+        if (document.activeElement.id === this.inputId) {
+            this.renderer.addClass(this.dropzoneElement.nativeElement, 'dropzone-focus');
+        }
+    }
+    shiftTabKeyEvent() {
+        if (document.activeElement.id === this.inputId) {
+            this.renderer.addClass(this.dropzoneElement.nativeElement, 'dropzone-focus');
+        }
+    }
+    ngAfterContentInit() {
+        this._errorForm.changes.subscribe(() => this.setErrorTextsAttribute());
+        if (!this.inputId) {
+            this.inputId = `file-input-${fileInputUniqueId++}`;
+        }
+        // If no content was added for dropzone instructions, add default text.
+        const dropzoneElement = Array.from(this.nativeElement.children).find((el) => el.className === 'file-drop-zone');
+        if (!Array.from(dropzoneElement.children).find(el => el.localName === 'bao-file-dropzone-instructions')) {
+            this.insertDefaultInstructions = true;
+        }
+        this.setDescribedByAttribute();
+        this._files.changes.subscribe((files) => {
+            const filesList = files.map((el) => el.file);
+            this.setValue(filesList);
+        });
+    }
+    ngAfterViewInit() {
+        this._errorTexts.changes.subscribe(() => this.setErrorTextsAttribute());
+    }
+    ngOnDestroy() {
+        this._intlChanges.unsubscribe();
+    }
+    /**
+     * Implements ControlValueAccessor interface
+     */
+    writeValue(obj) {
+        this._value = obj;
+    }
+    /**
+     * Implements ControlValueAccessor interface
+     */
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    /**
+     * Implements ControlValueAccessor interface
+     */
+    registerOnTouched(fn) {
+        this.propagateTouched = fn;
+    }
+    /**
+     * Implements ControlValueAccessor interface
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    uploadFile(file) {
+        if (!this.disabled) {
+            this.isFileTypeInvalid = false;
+            this.isFileTooBig = false;
+            this.uploader.nativeElement.value = '';
+            if (this.maximalFileSize > 0 && file.size > this.maximalFileSize) {
+                this.isFileTooBig = true;
+            }
+            if (this.acceptedMIMETypes.length > 0 &&
+                this.acceptedMIMETypes.indexOf(file.type) < 0) {
+                this.isFileTypeInvalid = true;
+            }
+            if (!this.isFileTooBig && !this.isFileTypeInvalid) {
+                this.uploadedFile.emit(file);
+            }
+        }
+    }
+    setValue(value) {
+        this._value = value;
+        this.propagateChange(this._value);
+        this.propagateTouched();
+    }
+    setDescribedByAttribute() {
+        const helperText = Array.from(this.nativeElement.children).find((el) => el.localName === 'bao-guiding-text');
+        if (helperText) {
+            this._helperTextId = `bao-guiding-text-${fileTextUniqueId++}`;
+            this.renderer.setAttribute(helperText.firstElementChild, 'id', this._helperTextId);
+            const inputElement = Array.from(this.nativeElement.children)
+                .find((el) => el.className == 'file-drop-zone')
+                .children.item(1);
+            this.renderer.setAttribute(inputElement, 'aria-describedby', this._helperTextId);
+        }
+    }
+    setErrorTextsAttribute() {
+        const textsIds = [];
+        const errors = Array.from(this.nativeElement.children).filter((el) => el.localName == 'bao-error');
+        errors.forEach((errorText) => {
+            const errorTextId = `bao-error-${fileTextUniqueId++}`;
+            this.renderer.setAttribute(errorText.firstElementChild, 'id', errorTextId);
+            textsIds.push(errorTextId);
+        });
+        const inputElement = Array.from(this.nativeElement.children)
+            .find((el) => el.classList.contains('file-drop-zone'))
+            .children.item(1);
+        if (this._helperTextId) {
+            textsIds.unshift(this._helperTextId);
+        }
+        this.renderer.setAttribute(inputElement, 'aria-describedby', textsIds.join(' '));
+    }
+}
+BaoFileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFileInputComponent, deps: [{ token: BaoFileIntl }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BaoFileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BaoFileInputComponent, selector: "bao-file-input, [bao-file-input]", inputs: { inputId: ["id", "inputId"], label: "label", size: "size", maximalFileSize: "maximalFileSize", acceptedMIMETypes: "acceptedMIMETypes", required: "required", disabled: "disabled" }, outputs: { uploadedFile: "uploadedFile" }, host: { listeners: { "window:keyup.enter": "enterKeyEvent()", "window:keyup.tab": "tabKeyEvent()", "window:keyup.shift.tab": "shiftTabKeyEvent()" }, properties: { "class.bao-file-label-small": "size === \"small\"", "class.bao-file-label-medium": "size === \"medium\"", "class.bao-file-input-disabled": "disabled" }, classAttribute: "bao-file-input" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            // tslint:disable-next-line:no-forward-ref
+            useExisting: forwardRef(() => BaoFileInputComponent),
+            multi: true
+        }
+    ], queries: [{ propertyName: "_files", predicate: BaoFilePreviewComponent, descendants: true }, { propertyName: "_errorForm", predicate: BaoErrorTextComponent, descendants: true }], viewQueries: [{ propertyName: "uploader", first: true, predicate: ["uploader"], descendants: true }, { propertyName: "dropzoneElement", first: true, predicate: ["dropzone"], descendants: true }, { propertyName: "_errorTexts", predicate: BaoErrorTextComponent, descendants: true }], ngImport: i0, template: "<label bao-label [required]=\"required\" [for]=\"inputId\">{{ label }}</label>\n<ng-content select=\"bao-guiding-text\"></ng-content>\n<div\n  baoFileDrop\n  class=\"file-drop-zone\"\n  (fileDrop)=\"uploadFile($event)\"\n  #dropzone\n>\n  <button\n    bao-button\n    type=\"button\"\n    displayType=\"utility\"\n    level=\"secondary\"\n    [disabled]=\"disabled\"\n    (click)=\"uploader.click()\"\n    aria-hidden=\"true\"\n    tabIndex=\"-1\"\n  >\n    {{ intl.dropzoneButtonLabel }}\n  </button>\n  <input\n    [id]=\"inputId\"\n    type=\"file\"\n    class=\"sr-only\"\n    [disabled]=\"disabled\"\n    (change)=\"uploadFile($event.target.files[0])\"\n    #uploader\n  />\n  <ng-container\n    ><div #ref>\n      <ng-content select=\"bao-file-dropzone-instructions\"></ng-content></div\n  ></ng-container>\n  <ng-container *ngIf=\"ref.childNodes.length === 0\"\n    ><bao-file-dropzone-instructions>{{\n      intl.defaultDropzoneInstructions\n    }}</bao-file-dropzone-instructions></ng-container\n  >\n</div>\n<bao-error *ngIf=\"isFileTooBig\">\n  {{ intl.fileTooBigErrorMessage }}\n</bao-error>\n<bao-error *ngIf=\"isFileTypeInvalid\">\n  {{ intl.invalidFileTypeErrorMessage }}\n</bao-error>\n<ng-content select=\"bao-error\"></ng-content>\n<ng-content></ng-content>\n", styles: ["bao-file-input{width:100%;display:inline-flex;flex-direction:column}bao-file-input>ul{padding:0;margin:0}bao-file-input .bao-label>span{font-size:inherit;font-weight:inherit}bao-file-input.bao-file-label-small label{font-weight:700;font-size:.875rem;line-height:1.25rem}bao-file-input.bao-file-label-medium label{font-weight:700;font-size:1rem;line-height:1.5rem}bao-file-input .bao-guiding-text{margin-bottom:.5rem}bao-file-input .file-drop-zone{padding:.5rem;background-color:#fff;border-radius:.25rem;border-style:dashed;border-color:#ced4da;border-width:1px;display:inline-flex;align-items:center}bao-file-input .file-drop-zone:focus-within.dropzone-focus{box-shadow:0 0 0 .1875rem #98bcde;background-color:#eefaf8}bao-file-input .file-drop-zone>.bao-button{margin-right:.5rem}bao-file-input .file-drop-zone.drag-over{background-color:#eefaf8;border-color:#097d6c;cursor:drag}bao-file-input .file-drop-zone.drag-over>.bao-button{background-color:#eefaf8}bao-file-input.bao-file-input-disabled .file-drop-zone{background-color:#f8f9fa;border-color:#ced4da}bao-file-input.bao-file-input-disabled .file-drop-zone .bao-button{background-color:#f8f9fa}bao-file-input.bao-file-input-disabled .file-drop-zone .bao-button:hover{background-color:#f8f9fa}bao-file-input .bao-file-preview:first-child{margin-top:1rem}bao-file-input .bao-error{margin-top:.5rem}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return BaoErrorTextComponent; }), selector: "bao-error, [bao-error]" }, { kind: "component", type: i0.forwardRef(function () { return BaoLabelTextComponent; }), selector: "bao-label, [bao-label]", inputs: ["required"] }, { kind: "component", type: i0.forwardRef(function () { return BaoButtonComponent; }), selector: "button[bao-button]", inputs: ["displayType", "level", "size", "loading", "reversed", "loadingSpinnerAriaLabel", "fullWidth"] }, { kind: "directive", type: i0.forwardRef(function () { return BaoFileDropzoneIntructions; }), selector: "bao-file-dropzone-instructions, [bao-file-dropzone-instructions]" }, { kind: "directive", type: i0.forwardRef(function () { return BaoFileDropDirective; }), selector: "[baoFileDrop]", outputs: ["fileDrop"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFileInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bao-file-input, [bao-file-input]', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            // tslint:disable-next-line:no-forward-ref
+                            useExisting: forwardRef(() => BaoFileInputComponent),
+                            multi: true
+                        }
+                    ], encapsulation: ViewEncapsulation.None, host: {
+                        class: 'bao-file-input',
+                        '[class.bao-file-label-small]': 'size === "small"',
+                        '[class.bao-file-label-medium]': 'size === "medium"',
+                        '[class.bao-file-input-disabled]': 'disabled'
+                    }, template: "<label bao-label [required]=\"required\" [for]=\"inputId\">{{ label }}</label>\n<ng-content select=\"bao-guiding-text\"></ng-content>\n<div\n  baoFileDrop\n  class=\"file-drop-zone\"\n  (fileDrop)=\"uploadFile($event)\"\n  #dropzone\n>\n  <button\n    bao-button\n    type=\"button\"\n    displayType=\"utility\"\n    level=\"secondary\"\n    [disabled]=\"disabled\"\n    (click)=\"uploader.click()\"\n    aria-hidden=\"true\"\n    tabIndex=\"-1\"\n  >\n    {{ intl.dropzoneButtonLabel }}\n  </button>\n  <input\n    [id]=\"inputId\"\n    type=\"file\"\n    class=\"sr-only\"\n    [disabled]=\"disabled\"\n    (change)=\"uploadFile($event.target.files[0])\"\n    #uploader\n  />\n  <ng-container\n    ><div #ref>\n      <ng-content select=\"bao-file-dropzone-instructions\"></ng-content></div\n  ></ng-container>\n  <ng-container *ngIf=\"ref.childNodes.length === 0\"\n    ><bao-file-dropzone-instructions>{{\n      intl.defaultDropzoneInstructions\n    }}</bao-file-dropzone-instructions></ng-container\n  >\n</div>\n<bao-error *ngIf=\"isFileTooBig\">\n  {{ intl.fileTooBigErrorMessage }}\n</bao-error>\n<bao-error *ngIf=\"isFileTypeInvalid\">\n  {{ intl.invalidFileTypeErrorMessage }}\n</bao-error>\n<ng-content select=\"bao-error\"></ng-content>\n<ng-content></ng-content>\n", styles: ["bao-file-input{width:100%;display:inline-flex;flex-direction:column}bao-file-input>ul{padding:0;margin:0}bao-file-input .bao-label>span{font-size:inherit;font-weight:inherit}bao-file-input.bao-file-label-small label{font-weight:700;font-size:.875rem;line-height:1.25rem}bao-file-input.bao-file-label-medium label{font-weight:700;font-size:1rem;line-height:1.5rem}bao-file-input .bao-guiding-text{margin-bottom:.5rem}bao-file-input .file-drop-zone{padding:.5rem;background-color:#fff;border-radius:.25rem;border-style:dashed;border-color:#ced4da;border-width:1px;display:inline-flex;align-items:center}bao-file-input .file-drop-zone:focus-within.dropzone-focus{box-shadow:0 0 0 .1875rem #98bcde;background-color:#eefaf8}bao-file-input .file-drop-zone>.bao-button{margin-right:.5rem}bao-file-input .file-drop-zone.drag-over{background-color:#eefaf8;border-color:#097d6c;cursor:drag}bao-file-input .file-drop-zone.drag-over>.bao-button{background-color:#eefaf8}bao-file-input.bao-file-input-disabled .file-drop-zone{background-color:#f8f9fa;border-color:#ced4da}bao-file-input.bao-file-input-disabled .file-drop-zone .bao-button{background-color:#f8f9fa}bao-file-input.bao-file-input-disabled .file-drop-zone .bao-button:hover{background-color:#f8f9fa}bao-file-input .bao-file-preview:first-child{margin-top:1rem}bao-file-input .bao-error{margin-top:.5rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: BaoFileIntl }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { inputId: [{
+                type: Input,
+                args: ['id']
+            }], label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], maximalFileSize: [{
+                type: Input
+            }], acceptedMIMETypes: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], uploadedFile: [{
+                type: Output
+            }], _files: [{
+                type: ContentChildren,
+                args: [BaoFilePreviewComponent, { descendants: true }]
+            }], _errorForm: [{
+                type: ContentChildren,
+                args: [BaoErrorTextComponent, { descendants: true }]
+            }], _errorTexts: [{
+                type: ViewChildren,
+                args: [BaoErrorTextComponent]
+            }], uploader: [{
+                type: ViewChild,
+                args: ['uploader', { static: false }]
+            }], dropzoneElement: [{
+                type: ViewChild,
+                args: ['dropzone', { static: false }]
+            }], enterKeyEvent: [{
+                type: HostListener,
+                args: ['window:keyup.enter']
+            }], tabKeyEvent: [{
+                type: HostListener,
+                args: ['window:keyup.tab']
+            }], shiftTabKeyEvent: [{
+                type: HostListener,
+                args: ['window:keyup.shift.tab']
+            }] } });
+class BaoFileDropDirective {
+    constructor() {
+        this.fileDrop = new EventEmitter();
+        this._isDragOver = false;
+    }
+    onDragOver(event) {
+        this.preventAndStop(event);
+        this._isDragOver = true;
+    }
+    onDragLeave(event) {
+        this.preventAndStop(event);
+        this._isDragOver = false;
+    }
+    onDrop(event) {
+        this.preventAndStop(event);
+        this._isDragOver = false;
+        const transfer = this.getDataTransfer(event);
+        this.fileDrop.emit(transfer.files[0]);
+    }
+    preventAndStop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    getDataTransfer(event) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return event.dataTransfer
+            ? event.dataTransfer
+            : event.originalEvent.dataTransfer;
+    }
+}
+BaoFileDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFileDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BaoFileDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: BaoFileDropDirective, selector: "[baoFileDrop]", outputs: { fileDrop: "fileDrop" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.drag-over": "_isDragOver == true" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFileDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[baoFileDrop]',
+                    host: { '[class.drag-over]': '_isDragOver == true' }
+                }]
+        }], propDecorators: { fileDrop: [{
+                type: Output
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+class BaoFileDropzoneIntructions {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterContentInit() {
+        this.renderer.setAttribute(this.nativeElement, 'aria-hidden', 'true');
+    }
+}
+BaoFileDropzoneIntructions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFileDropzoneIntructions, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+BaoFileDropzoneIntructions.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: BaoFileDropzoneIntructions, selector: "bao-file-dropzone-instructions, [bao-file-dropzone-instructions]", host: { classAttribute: "bao-file-dropzone-instructions" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFileDropzoneIntructions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'bao-file-dropzone-instructions, [bao-file-dropzone-instructions]',
+                    host: {
+                        class: 'bao-file-dropzone-instructions'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; } });
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+const FILE_DIRECTIVES = [
+    BaoFileInputComponent,
+    BaoFileDropzoneIntructions,
+    BaoFileDropDirective,
+    BaoFilePreviewComponent
+];
+class BaoFileModule {
+}
+BaoFileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BaoFileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoFileModule, declarations: [BaoFileInputComponent,
+        BaoFileDropzoneIntructions,
+        BaoFileDropDirective,
+        BaoFilePreviewComponent], imports: [CommonModule,
+        BaoDropdownMenuModule,
+        BaoCommonComponentsModule,
+        BaoIconModule,
+        BaoButtonModule], exports: [BaoFileInputComponent,
+        BaoFileDropzoneIntructions,
+        BaoFileDropDirective,
+        BaoFilePreviewComponent] });
+BaoFileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFileModule, providers: [BAO_FILE_INTL_PROVIDER], imports: [CommonModule,
+        BaoDropdownMenuModule,
+        BaoCommonComponentsModule,
+        BaoIconModule,
+        BaoButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoFileModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        BaoDropdownMenuModule,
+                        BaoCommonComponentsModule,
+                        BaoIconModule,
+                        BaoButtonModule
+                    ],
+                    declarations: [FILE_DIRECTIVES],
+                    exports: [FILE_DIRECTIVES],
+                    providers: [BAO_FILE_INTL_PROVIDER]
+                }]
+        }] });
+
+/** Injection token that can be used to access the data that was passed in to a snack bar. */
+const BAO_SNACK_BAR_DATA = new InjectionToken('BaoSnackBarData');
+/** Possible types of toast to display the snack bar */
+var BaoSnackBarToastTypeEnum;
+(function (BaoSnackBarToastTypeEnum) {
+    BaoSnackBarToastTypeEnum["Info"] = "info";
+    BaoSnackBarToastTypeEnum["Success"] = "success";
+    BaoSnackBarToastTypeEnum["Danger"] = "danger";
+})(BaoSnackBarToastTypeEnum || (BaoSnackBarToastTypeEnum = {}));
+/**
+ * Configuration used when opening a snack-bar.
+ */
+class BaoSnackBarConfig {
+    constructor() {
+        /** The message to display in the snackbar. */
+        this.message = 'No message';
+        /** The type of snackbar template to display. */
+        this.toastType = BaoSnackBarToastTypeEnum.Info;
+        /**
+         * The attached action to the snack bar. If the name of the action matches an icon provided as part of
+         * angular-ui icon dictionnary an icon will be displayed instead of text.
+         * */
+        this.actionLabelOrIcon = '';
+        /** Displays the close button when set to true */
+        this.showClose = false;
+        /** The length of time in milliseconds to wait before automatically dismissing the snack bar. */
+        this.duration = 5000;
+        /** The politeness level for the MatAriaLiveAnnouncer announcement. */
+        this.politeness = 'assertive';
+        /**
+         * Message to be announced by the LiveAnnouncer. When opening a snackbar without a custom
+         * component or template, the announcement message will default to the specified message.
+         */
+        this.announcementMessage = '';
+        /** Data being injected into the child component. */
+        this.data = null;
+        /** The horizontal position to place the snack bar. */
+        this.horizontalPosition = 'left';
+        /** The vertical position to place the snack bar. */
+        this.verticalPosition = 'bottom';
+    }
+}
+
+/** Maximum amount of milliseconds that can be passed into setTimeout. */
+const MAX_TIMEOUT = Math.pow(2, 31) - 1;
+/**
+ * Reference to a snack bar dispatched from the snack bar service.
+ */
+class BaoSnackBarRef {
+    constructor(containerInstance, _overlayRef) {
+        this._overlayRef = _overlayRef;
+        /** Subject for notifying the user that the snack bar has been dismissed. */
+        this._afterDismissed = new Subject();
+        /** Subject for notifying the user that the snack bar has opened and appeared. */
+        this._afterOpened = new Subject();
+        /** Subject for notifying the user that the snack bar action was called. */
+        this._onAction = new Subject();
+        /** Whether the snack bar was dismissed using the action button. */
+        this._dismissedByAction = false;
+        this.containerInstance = containerInstance;
+        // Dismiss snackbar on action.
+        this.onAction().subscribe(() => this.dismiss());
+        containerInstance._onExit.subscribe(() => this.finishDismiss());
+    }
+    /** Dismisses the snack bar. */
+    dismiss() {
+        if (!this._afterDismissed.closed) {
+            this.containerInstance.exit();
+        }
+        clearTimeout(this._durationTimeoutId);
+    }
+    /** Marks the snackbar action clicked. */
+    dismissWithAction() {
+        if (!this._onAction.closed) {
+            this._dismissedByAction = true;
+            this._onAction.next();
+            this._onAction.complete();
+        }
+    }
+    /** Dismisses the snack bar after some duration */
+    dismissAfter(duration) {
+        // Note that we need to cap the duration to the maximum value for setTimeout, because
+        // it'll revert to 1 if somebody passes in something greater (e.g. `Infinity`). See #17234.
+        // @TODO: window.setTimeout() ?
+        this._durationTimeoutId = window.setTimeout(() => this.dismiss(), Math.min(duration, MAX_TIMEOUT));
+    }
+    /** Marks the snackbar as opened */
+    open() {
+        if (!this._afterOpened.closed) {
+            this._afterOpened.next();
+            this._afterOpened.complete();
+        }
+    }
+    /** Gets an observable that is notified when the snack bar is finished closing. */
+    afterDismissed() {
+        return this._afterDismissed;
+    }
+    /** Gets an observable that is notified when the snack bar has opened and appeared. */
+    afterOpened() {
+        return this.containerInstance._onEnter;
+    }
+    /** Gets an observable that is notified when the snack bar action is called. */
+    onAction() {
+        return this._onAction;
+    }
+    /** Cleans up the DOM after closing. */
+    finishDismiss() {
+        this._overlayRef.dispose();
+        if (!this._onAction.closed) {
+            this._onAction.complete();
+        }
+        this._afterDismissed.next({ dismissedByAction: this._dismissedByAction });
+        this._afterDismissed.complete();
+        this._dismissedByAction = false;
+    }
+}
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+const toastTypeToAttributes = {
+    info: {
+        toast: 'snackbar-info',
+        icon: 'icon-info',
+        iconTitle: 'Information',
+        politeness: 'assertive'
+    },
+    success: {
+        toast: 'snackbar-success',
+        icon: 'icon-check-circle',
+        iconTitle: 'Succès',
+        politeness: 'polite'
+    },
+    danger: {
+        toast: 'snackbar-danger',
+        icon: 'icon-error',
+        iconTitle: 'Erreur',
+        politeness: 'assertive'
+    }
+};
+/**
+ * A component used to open as the default snack bar, matching material spec.
+ * This should only be used internally by the snack bar service.
+ */
+class BaoSimpleSnackBarComponent {
+    constructor(snackBarRef, data) {
+        this.snackBarRef = snackBarRef;
+        this.showCloseTitle = 'Fermer le message';
+        this.data = data;
+    }
+    /** Returns the politeness */
+    get politeness() {
+        return (toastTypeToAttributes[this.data.toastType]?.politeness ||
+            toastTypeToAttributes['info'].politeness);
+    }
+    /** Returns the toast class */
+    get toastType() {
+        return (toastTypeToAttributes[this.data.toastType]?.toast ||
+            toastTypeToAttributes['info'].toast);
+    }
+    /** Returns the toast icon */
+    get toastIcon() {
+        return (toastTypeToAttributes[this.data.toastType]?.icon ||
+            toastTypeToAttributes['info'].icon);
+    }
+    /** Returns the toast icon title */
+    get toastIconTitle() {
+        return (toastTypeToAttributes[this.data.toastType]?.iconTitle ||
+            toastTypeToAttributes['info'].iconTitle);
+    }
+    /** If the action button should be shown. */
+    get hasAction() {
+        return !!this.data.actionLabelOrIcon;
+    }
+    /** If the action is an icon */
+    get isActionIcon() {
+        return !!ICONS_DCT[this.data.actionLabelOrIcon];
+    }
+    /** Performs the action on the snack bar. */
+    action() {
+        this.snackBarRef.dismissWithAction();
+    }
+    /** Closes the snack bar. */
+    close() {
+        this.snackBarRef.dismiss();
+    }
+}
+BaoSimpleSnackBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoSimpleSnackBarComponent, deps: [{ token: BaoSnackBarRef }, { token: BAO_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component });
+BaoSimpleSnackBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BaoSimpleSnackBarComponent, selector: "bao-simple-snack-bar", host: { classAttribute: "mat-simple-snackbar" }, ngImport: i0, template: "<div\n  class=\"snackbar show\"\n  [ngClass]=\"toastType\"\n  [attr.aria-live]=\"politeness\"\n  aria-atomic=\"true\"\n>\n  <div class=\"snackbar-icon\">\n    <bao-icon [svgIcon]=\"toastIcon\" [title]=\"toastIconTitle\"></bao-icon>\n  </div>\n  <div class=\"snackbar-body\">\n    {{ data.message }}\n  </div>\n  <div class=\"snackbar-action\">\n    <div *ngIf=\"hasAction\">\n      <button\n        bao-button\n        role=\"button\"\n        type=\"utility\"\n        level=\"tertiary\"\n        [reversed]=\"true\"\n        [title]=\"data.actionLabelOrIcon\"\n        (click)=\"action()\"\n      >\n        <bao-icon\n          *ngIf=\"isActionIcon; else isActionText\"\n          [svgIcon]=\"data.actionLabelOrIcon\"\n          [title]=\"data.actionLabelOrIcon\"\n        ></bao-icon>\n        <ng-template #isActionText\n          ><span>{{ data.actionLabelOrIcon }}</span></ng-template\n        >\n      </button>\n    </div>\n    <div *ngIf=\"data.showClose\">\n      <button\n        bao-button\n        role=\"button\"\n        type=\"utility\"\n        level=\"tertiary\"\n        [reversed]=\"true\"\n        title=\"{{ showCloseTitle }}\"\n        (click)=\"close()\"\n      >\n        <bao-icon svgIcon=\"icon-x\" title=\"{{ showCloseTitle }}\"></bao-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".bao-container{padding-right:16px;padding-left:16px;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.bao-container{max-width:576px}}@media (min-width: 768px){.bao-container{max-width:768px}}@media (min-width: 992px){.bao-container{max-width:992px}}@media (min-width: 1200px){.bao-container{max-width:1200px}}.bao-row{display:flex;flex-wrap:wrap;margin-right:-16px;margin-left:-16px}.bao-col-12,.bao-col-lg-7{position:relative;width:100%;padding-right:1rem;padding-left:1rem}@media (min-width: 992px){.bao-col-lg-7{flex:0 0 58.33333%;max-width:58.33333%}}.snackbar{overflow:hidden;font-size:.875rem;line-height:1.25rem;color:#fff;background-color:#004b7b;background-clip:padding-box;box-shadow:0 2px 8px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;border-radius:.25rem;width:100%}.snackbar:not(:last-child){margin-bottom:1rem}.snackbar.showing{opacity:1}.snackbar.show{display:inline-flex;opacity:1}.snackbar.hide{display:none}@media (min-width: 768px){.snackbar{margin:1rem;width:auto}}.snackbar-icon{display:inline-flex;align-items:center;flex-grow:0;margin:1rem 0 1rem 1rem}.snackbar-body{display:flex;align-items:center;padding:1rem;margin:0}.snackbar-action{display:flex;align-items:center;margin-left:auto}.snackbar-action:last-child{margin-right:.5rem}.snackbar-info{color:#fff;background-color:#004b7b}.snackbar-success{color:#fff;background-color:#025d29}.snackbar-danger{color:#fff;background-color:#851a00}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BaoButtonComponent, selector: "button[bao-button]", inputs: ["displayType", "level", "size", "loading", "reversed", "loadingSpinnerAriaLabel", "fullWidth"] }, { kind: "component", type: BaoIconComponent, selector: "bao-icon", inputs: ["color", "size", "svgIcon", "title"], exportAs: ["baoIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoSimpleSnackBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bao-simple-snack-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mat-simple-snackbar'
+                    }, template: "<div\n  class=\"snackbar show\"\n  [ngClass]=\"toastType\"\n  [attr.aria-live]=\"politeness\"\n  aria-atomic=\"true\"\n>\n  <div class=\"snackbar-icon\">\n    <bao-icon [svgIcon]=\"toastIcon\" [title]=\"toastIconTitle\"></bao-icon>\n  </div>\n  <div class=\"snackbar-body\">\n    {{ data.message }}\n  </div>\n  <div class=\"snackbar-action\">\n    <div *ngIf=\"hasAction\">\n      <button\n        bao-button\n        role=\"button\"\n        type=\"utility\"\n        level=\"tertiary\"\n        [reversed]=\"true\"\n        [title]=\"data.actionLabelOrIcon\"\n        (click)=\"action()\"\n      >\n        <bao-icon\n          *ngIf=\"isActionIcon; else isActionText\"\n          [svgIcon]=\"data.actionLabelOrIcon\"\n          [title]=\"data.actionLabelOrIcon\"\n        ></bao-icon>\n        <ng-template #isActionText\n          ><span>{{ data.actionLabelOrIcon }}</span></ng-template\n        >\n      </button>\n    </div>\n    <div *ngIf=\"data.showClose\">\n      <button\n        bao-button\n        role=\"button\"\n        type=\"utility\"\n        level=\"tertiary\"\n        [reversed]=\"true\"\n        title=\"{{ showCloseTitle }}\"\n        (click)=\"close()\"\n      >\n        <bao-icon svgIcon=\"icon-x\" title=\"{{ showCloseTitle }}\"></bao-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".bao-container{padding-right:16px;padding-left:16px;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.bao-container{max-width:576px}}@media (min-width: 768px){.bao-container{max-width:768px}}@media (min-width: 992px){.bao-container{max-width:992px}}@media (min-width: 1200px){.bao-container{max-width:1200px}}.bao-row{display:flex;flex-wrap:wrap;margin-right:-16px;margin-left:-16px}.bao-col-12,.bao-col-lg-7{position:relative;width:100%;padding-right:1rem;padding-left:1rem}@media (min-width: 992px){.bao-col-lg-7{flex:0 0 58.33333%;max-width:58.33333%}}.snackbar{overflow:hidden;font-size:.875rem;line-height:1.25rem;color:#fff;background-color:#004b7b;background-clip:padding-box;box-shadow:0 2px 8px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;border-radius:.25rem;width:100%}.snackbar:not(:last-child){margin-bottom:1rem}.snackbar.showing{opacity:1}.snackbar.show{display:inline-flex;opacity:1}.snackbar.hide{display:none}@media (min-width: 768px){.snackbar{margin:1rem;width:auto}}.snackbar-icon{display:inline-flex;align-items:center;flex-grow:0;margin:1rem 0 1rem 1rem}.snackbar-body{display:flex;align-items:center;padding:1rem;margin:0}.snackbar-action{display:flex;align-items:center;margin-left:auto}.snackbar-action:last-child{margin-right:.5rem}.snackbar-info{color:#fff;background-color:#004b7b}.snackbar-success{color:#fff;background-color:#025d29}.snackbar-danger{color:#fff;background-color:#851a00}\n"] }]
+        }], ctorParameters: function () { return [{ type: BaoSnackBarRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [BAO_SNACK_BAR_DATA]
+                }] }]; } });
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+/**
+ * Animations used by the Material snack bar.
+ * @docs-private
+ */
+const matSnackBarAnimations = {
+    /** Animation that shows and hides a snack bar. */
+    snackBarState: trigger('state', [
+        state('void, hidden', style({
+            transform: 'scale(0.8)',
+            opacity: 0
+        })),
+        state('visible', style({
+            transform: 'scale(1)',
+            opacity: 1
+        })),
+        transition('* => visible', animate('150ms cubic-bezier(0, 0, 0.2, 1)')),
+        transition('* => void, * => hidden', animate('75ms cubic-bezier(0.4, 0.0, 1, 1)', style({
+            opacity: 0
+        })))
+    ])
+};
+
+let uniqueId = 0;
+/**
+ * Internal component that wraps user-provided snack bar content.
+ * @docs-private
+ */
+class BaoSnackBarContainerComponent extends BasePortalOutlet {
+    constructor(_ngZone, _elementRef, _changeDetectorRef, _platform, 
+    /** The snack bar configuration. */
+    snackBarConfig) {
+        super();
+        this._ngZone = _ngZone;
+        this._elementRef = _elementRef;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._platform = _platform;
+        this.snackBarConfig = snackBarConfig;
+        this._document = inject(DOCUMENT);
+        this._trackedModals = new Set();
+        /** Subject for notifying that the snack bar has announced to screen readers. */
+        this._onAnnounce = new Subject();
+        /** Subject for notifying that the snack bar has exited from view. */
+        this._onExit = new Subject();
+        /** Subject for notifying that the snack bar has finished entering the view. */
+        this._onEnter = new Subject();
+        /** The state of the snack bar animations. */
+        this._animationState = 'void';
+        /** The number of milliseconds to wait before announcing the snack bar's content. */
+        this._announceDelay = 150;
+        /** Whether the component has been destroyed. */
+        this._destroyed = false;
+        /** Unique ID of the aria-live element. */
+        this._liveElementId = `bao-snack-bar-container-live-${uniqueId++}`;
+        /**
+         * Attaches a DOM portal to the snack bar container.
+         * @deprecated To be turned into a method.
+         * @breaking-change 10.0.0
+         */
+        this.attachDomPortal = (portal) => {
+            this.assertNotAttached();
+            const result = this._portalOutlet.attachDomPortal(portal);
+            this._afterPortalAttached();
+            return result;
+        };
+        // Use aria-live rather than a live role like 'alert' or 'status'
+        // because NVDA and JAWS have show inconsistent behavior with live roles.
+        if (snackBarConfig.politeness === 'assertive' &&
+            !snackBarConfig.announcementMessage) {
+            this._live = 'assertive';
+        }
+        else if (snackBarConfig.politeness === 'off') {
+            this._live = 'off';
+        }
+        else {
+            this._live = 'polite';
+        }
+        // Only set role for Firefox. Set role based on aria-live because setting role="alert" implies
+        // aria-live="assertive" which may cause issues if aria-live is set to "polite" above.
+        if (this._platform.FIREFOX) {
+            if (this._live === 'polite') {
+                this._role = 'status';
+            }
+            if (this._live === 'assertive') {
+                this._role = 'alert';
+            }
+        }
+    }
+    /** Attach a component portal as content to this snack bar container. */
+    attachComponentPortal(portal) {
+        this.assertNotAttached();
+        this.applySnackBarClasses();
+        const result = this._portalOutlet.attachComponentPortal(portal);
+        this._afterPortalAttached();
+        return result;
+    }
+    /** Attach a template portal as content to this snack bar container. */
+    attachTemplatePortal(portal) {
+        this.assertNotAttached();
+        this.applySnackBarClasses();
+        const result = this._portalOutlet.attachTemplatePortal(portal);
+        this._afterPortalAttached();
+        return result;
+    }
+    /** Handle end of animations, updating the state of the snackbar. */
+    onAnimationEnd(event) {
+        const { fromState, toState } = event;
+        if ((toState === 'void' && fromState !== 'void') || toState === 'hidden') {
+            this.completeExit();
+        }
+        if (toState === 'visible') {
+            // Note: we shouldn't use `this` inside the zone callback,
+            // because it can cause a memory leak.
+            const onEnter = this._onEnter;
+            this._ngZone.run(() => {
+                onEnter.next();
+                onEnter.complete();
+            });
+        }
+    }
+    /** Begin animation of snack bar entrance into view. */
+    enter() {
+        if (!this._destroyed) {
+            this._animationState = 'visible';
+            this._changeDetectorRef.detectChanges();
+            this.screenReaderAnnounce();
+        }
+    }
+    /** Begin animation of the snack bar exiting from view. */
+    exit() {
+        // Note: this one transitions to `hidden`, rather than `void`, in order to handle the case
+        // where multiple snack bars are opened in quick succession (e.g. two consecutive calls to
+        // `MatSnackBar.open`).
+        this._animationState = 'hidden';
+        // Mark this element with an 'exit' attribute to indicate that the snackbar has
+        // been dismissed and will soon be removed from the DOM. This is used by the snackbar
+        // test harness.
+        this._elementRef.nativeElement.setAttribute('mat-exit', '');
+        // If the snack bar hasn't been announced by the time it exits it wouldn't have been open
+        // long enough to visually read it either, so clear the timeout for announcing.
+        clearTimeout(this._announceTimeoutId);
+        return this._onExit;
+    }
+    /** Makes sure the exit callbacks have been invoked when the element is destroyed. */
+    ngOnDestroy() {
+        this._destroyed = true;
+        this.completeExit();
+    }
+    /**
+     * Waits for the zone to settle before removing the element. Helps prevent
+     * errors where we end up removing an element which is in the middle of an animation.
+     */
+    completeExit() {
+        this._ngZone.onMicrotaskEmpty.pipe(take$1(1)).subscribe(() => {
+            this._onExit.next();
+            this._onExit.complete();
+        });
+    }
+    /** Applies the various positioning and user-configured CSS classes to the snack bar. */
+    applySnackBarClasses() {
+        const element = this._elementRef.nativeElement;
+        const panelClasses = this.snackBarConfig.panelClass;
+        if (panelClasses) {
+            if (Array.isArray(panelClasses)) {
+                // Note that we can't use a spread here, because IE doesn't support multiple arguments.
+                panelClasses.forEach(cssClass => element.classList.add(cssClass));
+            }
+            else {
+                element.classList.add(panelClasses);
+            }
+        }
+        if (this.snackBarConfig.horizontalPosition === 'center') {
+            element.classList.add('bao-snack-bar-center');
+        }
+        if (this.snackBarConfig.verticalPosition === 'top') {
+            element.classList.add('bao-snack-bar-top');
+        }
+    }
+    /**
+     * Called after the portal contents have been attached. Can be
+     * used to modify the DOM once it's guaranteed to be in place.
+     */
+    _afterPortalAttached() {
+        const element = this._elementRef.nativeElement;
+        const panelClasses = this.snackBarConfig.panelClass;
+        if (panelClasses) {
+            if (Array.isArray(panelClasses)) {
+                // Note that we can't use a spread here, because IE doesn't support multiple arguments.
+                panelClasses.forEach(cssClass => element.classList.add(cssClass));
+            }
+            else {
+                element.classList.add(panelClasses);
+            }
+        }
+        this._exposeToModals();
+    }
+    /**
+     * Some browsers won't expose the accessibility node of the live element if there is an
+     * `aria-modal` and the live element is outside of it. This method works around the issue by
+     * pointing the `aria-owns` of all modals to the live element.
+     */
+    _exposeToModals() {
+        // TODO(crisbeto): consider de-duplicating this with the `LiveAnnouncer`.
+        // Note that the selector here is limited to CDK overlays at the moment in order to reduce the
+        // section of the DOM we need to look through. This should cover all the cases we support, but
+        // the selector can be expanded if it turns out to be too narrow.
+        const id = this._liveElementId;
+        const modals = this._document.querySelectorAll('body > .cdk-overlay-container [aria-modal="true"]');
+        for (let i = 0; i < modals.length; i++) {
+            const modal = modals[i];
+            const ariaOwns = modal.getAttribute('aria-owns');
+            this._trackedModals.add(modal);
+            if (!ariaOwns) {
+                modal.setAttribute('aria-owns', id);
+            }
+            else if (ariaOwns.indexOf(id) === -1) {
+                modal.setAttribute('aria-owns', ariaOwns + ' ' + id);
+            }
+        }
+    }
+    /** Clears the references to the live element from any modals it was added to. */
+    _clearFromModals() {
+        this._trackedModals.forEach(modal => {
+            const ariaOwns = modal.getAttribute('aria-owns');
+            if (ariaOwns) {
+                const newValue = ariaOwns.replace(this._liveElementId, '').trim();
+                if (newValue.length > 0) {
+                    modal.setAttribute('aria-owns', newValue);
+                }
+                else {
+                    modal.removeAttribute('aria-owns');
+                }
+            }
+        });
+        this._trackedModals.clear();
+    }
+    /** Asserts that no content is already attached to the container. */
+    assertNotAttached() {
+        if (this._portalOutlet.hasAttached()) {
+            throw Error('Attempting to attach snack bar content after content is already attached');
+        }
+    }
+    /**
+     * Starts a timeout to move the snack bar content to the live region so screen readers will
+     * announce it.
+     */
+    screenReaderAnnounce() {
+        if (!this._announceTimeoutId) {
+            this._ngZone.runOutsideAngular(() => {
+                this._announceTimeoutId = window.setTimeout(() => {
+                    const inertElement = this._elementRef.nativeElement.querySelector('[aria-hidden]');
+                    const liveElement = this._elementRef.nativeElement.querySelector('[aria-live]');
+                    if (inertElement && liveElement) {
+                        // If an element in the snack bar content is focused before being moved
+                        // track it and restore focus after moving to the live region.
+                        let focusedElement = null;
+                        if (this._platform.isBrowser &&
+                            document.activeElement instanceof HTMLElement &&
+                            inertElement.contains(document.activeElement)) {
+                            focusedElement = document.activeElement;
+                        }
+                        inertElement.removeAttribute('aria-hidden');
+                        liveElement.appendChild(inertElement);
+                        focusedElement?.focus();
+                        this._onAnnounce.next();
+                        this._onAnnounce.complete();
+                    }
+                }, this._announceDelay);
+            });
+        }
+    }
+}
+BaoSnackBarContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoSnackBarContainerComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$5.Platform }, { token: BaoSnackBarConfig }], target: i0.ɵɵFactoryTarget.Component });
+BaoSnackBarContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BaoSnackBarContainerComponent, selector: "bao-snack-bar-container", host: { listeners: { "@state.done": "onAnimationEnd($event)" }, properties: { "@state": "_animationState" }, classAttribute: "bao-snack-bar-container" }, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- Initialy holds the snack bar content, will be empty after announcing to screen readers. -->\n<div aria-hidden=\"true\">\n  <ng-template cdkPortalOutlet></ng-template>\n</div>\n\n<!-- Will receive the snack bar content from the non-live div, move will happen a short delay after opening -->\n<div\n  [attr.aria-live]=\"_live\"\n  [attr.role]=\"_role\"\n  [attr.id]=\"_liveElementId\"\n></div>\n", styles: [".bao-container{padding-right:16px;padding-left:16px;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.bao-container{max-width:576px}}@media (min-width: 768px){.bao-container{max-width:768px}}@media (min-width: 992px){.bao-container{max-width:992px}}@media (min-width: 1200px){.bao-container{max-width:1200px}}.bao-row{display:flex;flex-wrap:wrap;margin-right:-16px;margin-left:-16px}.bao-col-12,.bao-col-lg-7{position:relative;width:100%;padding-right:1rem;padding-left:1rem}@media (min-width: 992px){.bao-col-lg-7{flex:0 0 58.33333%;max-width:58.33333%}}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;width:100%}@media (min-width: 768px){.cdk-overlay-pane{margin:0;width:auto}}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .25s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:black}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.bao-snack-bar-container{border-radius:.25rem;box-sizing:border-box;display:block;margin:1rem;max-width:100vw;min-width:15rem;min-height:3rem;transform-origin:center;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [matSnackBarAnimations.snackBarState], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoSnackBarContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bao-snack-bar-container', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, animations: [matSnackBarAnimations.snackBarState], host: {
+                        class: 'bao-snack-bar-container',
+                        '[@state]': '_animationState',
+                        '(@state.done)': 'onAnimationEnd($event)'
+                    }, template: "<!-- Initialy holds the snack bar content, will be empty after announcing to screen readers. -->\n<div aria-hidden=\"true\">\n  <ng-template cdkPortalOutlet></ng-template>\n</div>\n\n<!-- Will receive the snack bar content from the non-live div, move will happen a short delay after opening -->\n<div\n  [attr.aria-live]=\"_live\"\n  [attr.role]=\"_role\"\n  [attr.id]=\"_liveElementId\"\n></div>\n", styles: [".bao-container{padding-right:16px;padding-left:16px;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.bao-container{max-width:576px}}@media (min-width: 768px){.bao-container{max-width:768px}}@media (min-width: 992px){.bao-container{max-width:992px}}@media (min-width: 1200px){.bao-container{max-width:1200px}}.bao-row{display:flex;flex-wrap:wrap;margin-right:-16px;margin-left:-16px}.bao-col-12,.bao-col-lg-7{position:relative;width:100%;padding-right:1rem;padding-left:1rem}@media (min-width: 992px){.bao-col-lg-7{flex:0 0 58.33333%;max-width:58.33333%}}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;width:100%}@media (min-width: 768px){.cdk-overlay-pane{margin:0;width:auto}}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .25s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:black}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.bao-snack-bar-container{border-radius:.25rem;box-sizing:border-box;display:block;margin:1rem;max-width:100vw;min-width:15rem;min-height:3rem;transform-origin:center;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$5.Platform }, { type: BaoSnackBarConfig }]; }, propDecorators: { _portalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: true }]
+            }] } });
+
+function baoFactory() {
+    return new BaoSnackBarConfig();
+}
+/** Injection token that can be used to specify default snack bar. */
+const BAO_SNACK_BAR_DEFAULT_OPTIONS = new InjectionToken('bao-snack-bar-default-options', {
+    providedIn: 'root',
+    factory: baoFactory
+});
+/**
+ * Service to dispatch Material Design snack bar messages.
+ */
+class BaoSnackBarService {
+    constructor(_overlay, _live, _injector, _parentSnackBar, _defaultConfig) {
+        this._overlay = _overlay;
+        this._live = _live;
+        this._injector = _injector;
+        this._parentSnackBar = _parentSnackBar;
+        this._defaultConfig = _defaultConfig;
+        /** The component that should be rendered as the snack bar's simple component. */
+        this.simpleSnackBarComponent = BaoSimpleSnackBarComponent;
+        /** The container component that attaches the provided template or component. */
+        this.snackBarContainerComponent = BaoSnackBarContainerComponent;
+        /**
+         * Reference to the current snack bar in the view *at this level* (in the Angular injector tree).
+         * If there is a parent snack-bar service, all operations should delegate to that parent
+         * via `_openedSnackBarRef`.
+         */
+        this._snackBarRefAtThisLevel = null;
+    }
+    /** Reference to the currently opened snackbar at *any* level. */
+    get _openedSnackBarRef() {
+        const parent = this._parentSnackBar;
+        return parent ? parent._openedSnackBarRef : this._snackBarRefAtThisLevel;
+    }
+    set _openedSnackBarRef(value) {
+        if (this._parentSnackBar) {
+            this._parentSnackBar._openedSnackBarRef = value;
+        }
+        else {
+            this._snackBarRefAtThisLevel = value;
+        }
+    }
+    /**
+     * Creates and dispatches a snack bar with a custom component for the content, removing any
+     * currently opened snack bars.
+     *
+     * @param component Component to be instantiated.
+     * @param config Extra configuration for the snack bar.
+     */
+    openFromComponent(component, config) {
+        return this.attach(component, config);
+    }
+    /**
+     * Creates and dispatches a snack bar with a custom template for the content, removing any
+     * currently opened snack bars.
+     *
+     * @param template Template to be instantiated.
+     * @param config Extra configuration for the snack bar.
+     */
+    openFromTemplate(template, config) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return this.attach(template, config);
+    }
+    /**
+     * Opens a snackbar with a message and an optional action.
+     * @param message The message to show in the snackbar.
+     * @param toastType The type of of toast to display the snackbar.
+     * @param actionLabelOrIcon The label or icon for the snackbar action.
+     * @param showClose If true, the snackbar will require user interaction to close.
+     * @param config Additional configuration options for the snackbar.
+     */
+    open(config) {
+        const _config = { ...this._defaultConfig, ...config };
+        // Since the user doesn't have access to the component, we can
+        // override the data to pass in our own message, action and type.
+        _config.data = {
+            message: _config.message,
+            toastType: _config.toastType,
+            actionLabelOrIcon: _config.actionLabelOrIcon,
+            showClose: _config.showClose
+        };
+        if (_config.showClose)
+            _config.duration = 0;
+        if (!_config.announcementMessage) {
+            _config.announcementMessage = _config.message;
+        }
+        return this.openFromComponent(this.simpleSnackBarComponent, _config);
+    }
+    /**
+     * Dismisses the currently-visible snack bar.
+     */
+    dismiss() {
+        if (this._openedSnackBarRef) {
+            this._openedSnackBarRef.dismiss();
+        }
+    }
+    ngOnDestroy() {
+        // Only dismiss the snack bar at the current level on destroy.
+        if (this._snackBarRefAtThisLevel) {
+            this._snackBarRefAtThisLevel.dismiss();
+        }
+    }
+    /**
+     * Attaches the snack bar container component to the overlay.
+     */
+    attachSnackBarContainer(overlayRef, config) {
+        const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
+        const injector = new PortalInjector(userInjector || this._injector, new WeakMap([[BaoSnackBarConfig, config]]));
+        const containerPortal = new ComponentPortal(this.snackBarContainerComponent, config.viewContainerRef, injector);
+        const containerRef = overlayRef.attach(containerPortal);
+        containerRef.instance.snackBarConfig = config;
+        return containerRef.instance;
+    }
+    /**
+     * Places a new component or a template as the content of the snack bar container.
+     */
+    attach(content, userConfig) {
+        const config = {
+            ...new BaoSnackBarConfig(),
+            ...this._defaultConfig,
+            ...userConfig
+        };
+        const overlayRef = this.createOverlay(config);
+        const container = this.attachSnackBarContainer(overlayRef, config);
+        const snackBarRef = new BaoSnackBarRef(container, overlayRef);
+        if (content instanceof TemplateRef) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const portal = new TemplatePortal(content, null, {
+                $implicit: config.data,
+                snackBarRef
+            });
+            snackBarRef.instance = container.attachTemplatePortal(portal);
+        }
+        else {
+            const injector = this.createInjector(config, snackBarRef);
+            const portal = new ComponentPortal(content, undefined, injector);
+            const contentRef = container.attachComponentPortal(portal);
+            // We can't pass this via the injector, because the injector is created earlier.
+            snackBarRef.instance = contentRef.instance;
+        }
+        this.animateSnackBar(snackBarRef, config);
+        this._openedSnackBarRef = snackBarRef;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return this._openedSnackBarRef;
+    }
+    /** Animates the old snack bar out and the new one in. */
+    animateSnackBar(snackBarRef, config) {
+        // When the snackbar is dismissed, clear the reference to it.
+        snackBarRef.afterDismissed().subscribe(() => {
+            // Clear the snackbar ref if it hasn't already been replaced by a newer snackbar.
+            // eslint-disable-next-line eqeqeq
+            if (this._openedSnackBarRef == snackBarRef) {
+                this._openedSnackBarRef = null;
+            }
+            if (config.announcementMessage) {
+                this._live.clear();
+            }
+        });
+        if (this._openedSnackBarRef) {
+            // If a snack bar is already in view, dismiss it and enter the
+            // new snack bar after exit animation is complete.
+            this._openedSnackBarRef.afterDismissed().subscribe(() => {
+                snackBarRef.containerInstance.enter();
+            });
+            this._openedSnackBarRef.dismiss();
+        }
+        else {
+            // If no snack bar is in view, enter the new snack bar.
+            snackBarRef.containerInstance.enter();
+        }
+        // If a dismiss timeout is provided, set up dismiss based on after the snackbar is opened.
+        if (config.duration && config.duration > 0) {
+            snackBarRef
+                .afterOpened()
+                .subscribe(() => snackBarRef.dismissAfter(config.duration));
+        }
+        if (config.announcementMessage) {
+            void this._live.announce(config.announcementMessage, config.politeness);
+        }
+    }
+    /**
+     * Creates a new overlay and places it in the correct location.
+     * @param config The user-specified snack bar config.
+     */
+    createOverlay(config) {
+        const overlayConfig = new OverlayConfig();
+        overlayConfig.direction = config.direction;
+        const positionStrategy = this._overlay.position().global();
+        // Set horizontal position.
+        const isRtl = config.direction === 'rtl';
+        const isLeft = config.horizontalPosition === 'left' ||
+            (config.horizontalPosition === 'start' && !isRtl) ||
+            (config.horizontalPosition === 'end' && isRtl);
+        const isRight = !isLeft && config.horizontalPosition !== 'center';
+        if (isLeft) {
+            positionStrategy.left('0');
+        }
+        else if (isRight) {
+            positionStrategy.right('0');
+        }
+        else {
+            positionStrategy.centerHorizontally();
+        }
+        // Set horizontal position.
+        if (config.verticalPosition === 'top') {
+            positionStrategy.top('0');
+        }
+        else {
+            positionStrategy.bottom('0');
+        }
+        overlayConfig.positionStrategy = positionStrategy;
+        return this._overlay.create(overlayConfig);
+    }
+    /**
+     * Creates an injector to be used inside of a snack bar component.
+     * @param config Config that was used to create the snack bar.
+     * @param snackBarRef Reference to the snack bar.
+     */
+    createInjector(config, snackBarRef) {
+        const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
+        return new PortalInjector(userInjector || this._injector, new WeakMap([
+            [BaoSnackBarRef, snackBarRef],
+            [BAO_SNACK_BAR_DATA, config.data]
+        ]));
+    }
+}
+BaoSnackBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoSnackBarService, deps: [{ token: i1$4.Overlay }, { token: i1$3.LiveAnnouncer }, { token: i0.Injector }, { token: BaoSnackBarService, optional: true, skipSelf: true }, { token: BAO_SNACK_BAR_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Injectable });
+BaoSnackBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoSnackBarService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoSnackBarService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1$4.Overlay }, { type: i1$3.LiveAnnouncer }, { type: i0.Injector }, { type: BaoSnackBarService, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: BaoSnackBarConfig, decorators: [{
+                    type: Inject,
+                    args: [BAO_SNACK_BAR_DEFAULT_OPTIONS]
+                }] }]; } });
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+const SNACKBAR_DIRECTIVES = [
+    BaoSimpleSnackBarComponent,
+    BaoSnackBarContainerComponent
+];
+class BaoSnackBarModule {
+}
+BaoSnackBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoSnackBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BaoSnackBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoSnackBarModule, declarations: [BaoSimpleSnackBarComponent,
+        BaoSnackBarContainerComponent], imports: [CommonModule,
+        OverlayModule,
+        PortalModule,
+        BaoButtonModule,
+        BaoIconModule], exports: [BaoSimpleSnackBarComponent,
+        BaoSnackBarContainerComponent] });
+BaoSnackBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoSnackBarModule, providers: [BaoSnackBarService], imports: [CommonModule,
+        OverlayModule,
+        PortalModule,
+        BaoButtonModule,
+        BaoIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoSnackBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        OverlayModule,
+                        PortalModule,
+                        BaoButtonModule,
+                        BaoIconModule
+                    ],
+                    providers: [BaoSnackBarService],
+                    declarations: SNACKBAR_DIRECTIVES,
+                    exports: SNACKBAR_DIRECTIVES,
+                    entryComponents: [SNACKBAR_DIRECTIVES]
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+const Breakpoints = {
+    XSmall: '(max-width: 575.98px)',
+    Small: '(min-width: 576px) and (max-width: 767.98px)',
+    Medium: '(min-width: 768px) and (max-width: 991.98px)',
+    Large: '(min-width: 992px) and (max-width: 1199.98px)',
+    XLarge: '(min-width: 1200px)'
+};
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+
+/**
+ * This component is dynamically added to replace breadcrumb when System Header is viewed on tablet or mobile screens.
+ * Used internally by BaoSystemHeaderComponent only, not to be used by host application.
+ */
+class BaoBackNavigationComponent {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+    }
+    ngOnChanges(changes) {
+        if (changes['link'] && changes['link'].currentValue) {
+            this.renderer.setAttribute(this.elementRef.nativeElement.children[0], 'href', changes['link'].currentValue);
+        }
+    }
+}
+BaoBackNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoBackNavigationComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BaoBackNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BaoBackNavigationComponent, selector: "bao-back-navigation-component", inputs: { link: "link" }, host: { classAttribute: "bao-system-header-back-button" }, usesOnChanges: true, ngImport: i0, template: ` <a>
+    <bao-icon
+      color="action"
+      title="arrow-left"
+      svgIcon="icon-arrow-left"
+      size="x-small"
+    ></bao-icon>
+  </a>`, isInline: true, dependencies: [{ kind: "component", type: BaoIconComponent, selector: "bao-icon", inputs: ["color", "size", "svgIcon", "title"], exportAs: ["baoIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoBackNavigationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bao-back-navigation-component',
+                    template: ` <a>
+    <bao-icon
+      color="action"
+      title="arrow-left"
+      svgIcon="icon-arrow-left"
+      size="x-small"
+    ></bao-icon>
+  </a>`,
+                    host: {
+                        class: 'bao-system-header-back-button'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { link: [{
+                type: Input
+            }] } });
+/**
+ * This directive is to mark the template where the BaoBackNavigationComponent should be dynamically inserted,
+ * when a Breadcrumb component needs to be replaced
+ */
+class BaoBackNavigationInsert {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+}
+BaoBackNavigationInsert.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoBackNavigationInsert, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+BaoBackNavigationInsert.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: BaoBackNavigationInsert, selector: "[backNavigationInsert]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoBackNavigationInsert, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[backNavigationInsert]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+class BaoSystemHeaderComponent {
+    constructor(breakpointObserver, renderer) {
+        this.breakpointObserver = breakpointObserver;
+        this.renderer = renderer;
+        this.screenType = 'desktop';
+    }
+    get textContainerChildren() {
+        return Array.from(this.textContainer.nativeElement.children);
+    }
+    ngOnInit() {
+        if ([Breakpoints.XSmall, Breakpoints.Small].some(size => this.breakpointObserver.isMatched(size))) {
+            this.screenType = 'mobile';
+        }
+        else if (this.breakpointObserver.isMatched(Breakpoints.Medium)) {
+            this.screenType = 'tablet';
+        }
+        else if ([Breakpoints.Large, Breakpoints.XLarge].some(size => this.breakpointObserver.isMatched(size))) {
+            this.screenType = 'desktop';
+        }
+    }
+    ngAfterViewInit() {
+        this.formatNavigation();
+        this.applySizeClass();
+    }
+    formatNavigation() {
+        // If view is rendered on a mobile/tablet screen
+        if (this.screenType == 'mobile' || this.screenType == 'tablet') {
+            if (this.textContainerChildren[0].className == 'bao-breadcrumb') {
+                // Retrieve link of parent page
+                const breadcrumbElementsList = this.textContainerChildren[0].children[0];
+                const breadcrumbLength = breadcrumbElementsList.children.length;
+                const parentLink = breadcrumbElementsList.children[breadcrumbLength - 2].attributes['href'].value;
+                // Remove Breadcrumb component and replace it with back button
+                this.renderer.removeChild(this.textContainer.nativeElement, this.textContainerChildren[0]);
+                const viewContainerRef = this.backButtonInsert.viewContainerRef;
+                viewContainerRef.clear();
+                const componentRef = viewContainerRef.createComponent(BaoBackNavigationComponent);
+                componentRef.instance.link = parentLink;
+            }
+        }
+    }
+    applySizeClass() {
+        const tagInfoContainer = this.textContainer.nativeElement.childNodes[this.textContainerChildren.length - 1];
+        if (this.screenType === 'mobile') {
+            this.renderer.addClass(tagInfoContainer, 'mobile');
+        }
+    }
+}
+BaoSystemHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoSystemHeaderComponent, deps: [{ token: i2$1.BreakpointObserver }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+BaoSystemHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BaoSystemHeaderComponent, selector: "bao-system-header", host: { classAttribute: "bao-system-header" }, viewQueries: [{ propertyName: "textContainer", first: true, predicate: ["textContainer"], descendants: true }, { propertyName: "backButtonInsert", first: true, predicate: BaoBackNavigationInsert, descendants: true, static: true }], ngImport: i0, template: "<div class=\"left-side-content\">\n  <div class=\"back-navigation-container\">\n    <ng-content select=\"a\"></ng-content>\n    <ng-template backNavigationInsert></ng-template>\n  </div>\n  <div #textContainer class=\"text-content\">\n    <ng-content select=\"bao-breadcrumb\"></ng-content>\n    <ng-content select=\"h1\"></ng-content>\n    <div class=\"tag-info-container\">\n      <ng-content select=\"bao-tag\"></ng-content>\n      <span class=\"additional-info\">\n        <ng-content select=\"span\"></ng-content>\n      </span>\n    </div>\n  </div>\n</div>\n<div class=\"button-container\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.bao-container{padding-right:16px;padding-left:16px;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.bao-container{max-width:576px}}@media (min-width: 768px){.bao-container{max-width:768px}}@media (min-width: 992px){.bao-container{max-width:992px}}@media (min-width: 1200px){.bao-container{max-width:1200px}}.bao-row{display:flex;flex-wrap:wrap;margin-right:-16px;margin-left:-16px}.bao-col-12,.bao-col-lg-7{position:relative;width:100%;padding-right:1rem;padding-left:1rem}@media (min-width: 992px){.bao-col-lg-7{flex:0 0 58.33333%;max-width:58.33333%}}.bao-system-header{display:flex;justify-content:flex-start}.bao-system-header .left-side-content{display:inline-flex;width:75%}.bao-system-header .left-side-content .back-navigation-container a{margin-right:1.25rem;border-bottom:none}.bao-system-header .left-side-content .back-navigation-container a:hover{cursor:pointer}.bao-system-header .left-side-content .text-content{width:100%}.bao-system-header .left-side-content .text-content h1{font-weight:700;color:#212529;font-size:1.5rem;line-height:2rem;margin-bottom:.5rem}.bao-system-header .left-side-content .text-content .tag-info-container{width:100%;display:block}.bao-system-header .left-side-content .text-content .tag-info-container>span:nth-child(2):before{content:\"\\b7\";margin:0 .5rem}.bao-system-header .left-side-content .text-content .tag-info-container .additional-info>*{font-weight:400;font-size:.875rem;line-height:1.25rem}.bao-system-header .left-side-content .text-content .tag-info-container.mobile .bao-tag{margin-bottom:.25rem}.bao-system-header .left-side-content .text-content .tag-info-container.mobile .additional-info{display:block}.bao-system-header .left-side-content .text-content .tag-info-container.mobile .additional-info:before{content:none}.bao-system-header .left-side-content .text-content .tag-info-container>.bao-tag{max-width:100%}.bao-system-header .left-side-content .text-content .tag-info-container>.bao-tag>span{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bao-system-header .button-container{flex-shrink:0;margin-left:auto}.bao-system-header .button-container .bao-button{margin-left:1rem}\n"], dependencies: [{ kind: "directive", type: BaoBackNavigationInsert, selector: "[backNavigationInsert]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoSystemHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bao-system-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'bao-system-header'
+                    }, template: "<div class=\"left-side-content\">\n  <div class=\"back-navigation-container\">\n    <ng-content select=\"a\"></ng-content>\n    <ng-template backNavigationInsert></ng-template>\n  </div>\n  <div #textContainer class=\"text-content\">\n    <ng-content select=\"bao-breadcrumb\"></ng-content>\n    <ng-content select=\"h1\"></ng-content>\n    <div class=\"tag-info-container\">\n      <ng-content select=\"bao-tag\"></ng-content>\n      <span class=\"additional-info\">\n        <ng-content select=\"span\"></ng-content>\n      </span>\n    </div>\n  </div>\n</div>\n<div class=\"button-container\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.bao-container{padding-right:16px;padding-left:16px;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.bao-container{max-width:576px}}@media (min-width: 768px){.bao-container{max-width:768px}}@media (min-width: 992px){.bao-container{max-width:992px}}@media (min-width: 1200px){.bao-container{max-width:1200px}}.bao-row{display:flex;flex-wrap:wrap;margin-right:-16px;margin-left:-16px}.bao-col-12,.bao-col-lg-7{position:relative;width:100%;padding-right:1rem;padding-left:1rem}@media (min-width: 992px){.bao-col-lg-7{flex:0 0 58.33333%;max-width:58.33333%}}.bao-system-header{display:flex;justify-content:flex-start}.bao-system-header .left-side-content{display:inline-flex;width:75%}.bao-system-header .left-side-content .back-navigation-container a{margin-right:1.25rem;border-bottom:none}.bao-system-header .left-side-content .back-navigation-container a:hover{cursor:pointer}.bao-system-header .left-side-content .text-content{width:100%}.bao-system-header .left-side-content .text-content h1{font-weight:700;color:#212529;font-size:1.5rem;line-height:2rem;margin-bottom:.5rem}.bao-system-header .left-side-content .text-content .tag-info-container{width:100%;display:block}.bao-system-header .left-side-content .text-content .tag-info-container>span:nth-child(2):before{content:\"\\b7\";margin:0 .5rem}.bao-system-header .left-side-content .text-content .tag-info-container .additional-info>*{font-weight:400;font-size:.875rem;line-height:1.25rem}.bao-system-header .left-side-content .text-content .tag-info-container.mobile .bao-tag{margin-bottom:.25rem}.bao-system-header .left-side-content .text-content .tag-info-container.mobile .additional-info{display:block}.bao-system-header .left-side-content .text-content .tag-info-container.mobile .additional-info:before{content:none}.bao-system-header .left-side-content .text-content .tag-info-container>.bao-tag{max-width:100%}.bao-system-header .left-side-content .text-content .tag-info-container>.bao-tag>span{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bao-system-header .button-container{flex-shrink:0;margin-left:auto}.bao-system-header .button-container .bao-button{margin-left:1rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$1.BreakpointObserver }, { type: i0.Renderer2 }]; }, propDecorators: { textContainer: [{
+                type: ViewChild,
+                args: ['textContainer', { static: false }]
+            }], backButtonInsert: [{
+                type: ViewChild,
+                args: [BaoBackNavigationInsert, { static: true }]
+            }] } });
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+const SYSTEM_HEADER_DIRECTIVES = [
+    BaoSystemHeaderComponent,
+    BaoBackNavigationInsert,
+    BaoBackNavigationComponent
+];
+class BaoSystemHeaderModule {
+}
+BaoSystemHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoSystemHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BaoSystemHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoSystemHeaderModule, declarations: [BaoSystemHeaderComponent,
+        BaoBackNavigationInsert,
+        BaoBackNavigationComponent], imports: [CommonModule, BaoIconModule], exports: [BaoSystemHeaderComponent,
+        BaoBackNavigationInsert,
+        BaoBackNavigationComponent] });
+BaoSystemHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoSystemHeaderModule, imports: [CommonModule, BaoIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoSystemHeaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, BaoIconModule],
+                    declarations: [SYSTEM_HEADER_DIRECTIVES],
+                    exports: [SYSTEM_HEADER_DIRECTIVES]
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+class BaoModule {
+}
+BaoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BaoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaoModule, imports: [BaoIconModule,
+        BaoButtonModule,
+        BaoAlertModule,
+        BaoCardModule,
+        BaoBreadcrumbModule,
+        BaoModalModule], exports: [BaoIconModule,
+        BaoButtonModule,
+        BaoAlertModule,
+        BaoBreadcrumbModule,
+        BaoCardModule,
+        BaoTagModule,
+        BaoHeaderInfoModule,
+        BaoListModule,
+        BaoCommonComponentsModule,
+        BaoCheckboxModule,
+        BaoRadioModule,
+        BaoSummaryModule,
+        BaoAvatarModule,
+        BaoTabsModule,
+        BaoModalModule,
+        BaoHyperlinkModule,
+        BaoDropdownMenuModule,
+        BaoFileModule,
+        BaoSnackBarModule,
+        BaoSystemHeaderModule
+        // TODO: reactivate once component does not depend on global css BaoBadgeModule,
+    ] });
+BaoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModule, imports: [BaoIconModule,
+        BaoButtonModule,
+        BaoAlertModule,
+        BaoCardModule,
+        BaoBreadcrumbModule,
+        BaoModalModule, BaoIconModule,
+        BaoButtonModule,
+        BaoAlertModule,
+        BaoBreadcrumbModule,
+        BaoCardModule,
+        BaoTagModule,
+        BaoHeaderInfoModule,
+        BaoListModule,
+        BaoCommonComponentsModule,
+        BaoCheckboxModule,
+        BaoRadioModule,
+        BaoSummaryModule,
+        BaoAvatarModule,
+        BaoTabsModule,
+        BaoModalModule,
+        BaoHyperlinkModule,
+        BaoDropdownMenuModule,
+        BaoFileModule,
+        BaoSnackBarModule,
+        BaoSystemHeaderModule
+        // TODO: reactivate once component does not depend on global css BaoBadgeModule,
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        BaoIconModule,
+                        BaoButtonModule,
+                        BaoAlertModule,
+                        BaoCardModule,
+                        BaoBreadcrumbModule,
+                        BaoModalModule
+                    ],
+                    exports: [
+                        BaoIconModule,
+                        BaoButtonModule,
+                        BaoAlertModule,
+                        BaoBreadcrumbModule,
+                        BaoCardModule,
+                        BaoTagModule,
+                        BaoHeaderInfoModule,
+                        BaoListModule,
+                        BaoCommonComponentsModule,
+                        BaoCheckboxModule,
+                        BaoRadioModule,
+                        BaoSummaryModule,
+                        BaoAvatarModule,
+                        BaoTabsModule,
+                        BaoModalModule,
+                        BaoHyperlinkModule,
+                        BaoDropdownMenuModule,
+                        BaoFileModule,
+                        BaoSnackBarModule,
+                        BaoSystemHeaderModule
+                        // TODO: reactivate once component does not depend on global css BaoBadgeModule,
+                    ]
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+class BaoBadgeComponent {
+    constructor() {
+        this.type = '';
+    }
+}
+BaoBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BaoBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BaoBadgeComponent, selector: "bao-badge", inputs: { type: "type" }, host: { properties: { "class.positive": "type === \"success\"", "class.negative": "type === \"danger\"", "class.warning": "type === \"warning\"", "class.informative": "type === \"info\"" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block;border:.0625rem solid transparent;color:#fff;padding:0 .4375rem;border-radius:10rem;min-width:1.5rem;font-size:.875rem;font-weight:700;line-height:1.25rem;text-align:center;white-space:nowrap;overflow:hidden;vertical-align:baseline}:host.informative{background-color:#0079c4}:host.positive{background-color:#0da566}:host.warning{background-color:#ffb833;color:#000}:host.negative{background-color:#d3310a}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaoBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bao-badge', host: {
@@ -4631,7 +6048,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
             }] } });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -4651,25 +6068,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+
+/*
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
 
 /*
- * Copyright (c) 2022 Ville de Montreal. All rights reserved.
+ * Copyright (c) 2024 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
  * See LICENSE file in the project root for full license information.
  */
@@ -4678,5 +6107,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BAO_MODAL_DATA, BAO_RADIO_GROUP, BaoAlertActions, BaoAlertComponent, BaoAlertContent, BaoAlertLink, BaoAlertModule, BaoAlertTitle, BaoAvatarComponent, BaoAvatarContent, BaoAvatarModule, BaoBadgeComponent, BaoBadgeModule, BaoBreadcrumbComponent, BaoBreadcrumbModule, BaoButtonComponent, BaoButtonModule, BaoCardComponent, BaoCardContent, BaoCardHeader, BaoCardModule, BaoCardTextInterface, BaoCardTitle, BaoCheckBoxDescription, BaoCheckboxComponent, BaoCheckboxGroupComponent, BaoCheckboxModule, BaoCommonComponentsModule, BaoDropdownMenuComponent, BaoDropdownMenuDivider, BaoDropdownMenuItem, BaoDropdownMenuItemDescription, BaoDropdownMenuItemLabel, BaoDropdownMenuModule, BaoDropdownMenuSection, BaoDropdownMenuTrigger, BaoErrorTextComponent, BaoGuidingTextComponent, BaoHeaderInfoComponent, BaoHeaderInfoContent, BaoHeaderInfoModule, BaoHeaderInfoSubtitle, BaoHeaderInfoSurtitle, BaoHeaderInfoTitle, BaoHeaderInfoTitleGroupComponent, BaoHyperlinkComponent, BaoHyperlinkModule, BaoIconComponent, BaoIconModule, BaoLabelTextComponent, BaoList, BaoListItem, BaoListItemDescription, BaoListItemTitle, BaoListModule, BaoListSummary, BaoListSummaryItem, BaoModal, BaoModalBase, BaoModalClose, BaoModalContainer, BaoModalInitialConfig, BaoModalModule, BaoModalRef, BaoModule, BaoNavList, BaoRadioButtonComponent, BaoRadioButtonGroupComponent, BaoRadioDescription, BaoRadioModule, BaoSummaryComponent, BaoSummaryDescription, BaoSummaryModule, BaoTabHeader, BaoTabPanel, BaoTablistComponent, BaoTabsContainer, BaoTabsModule, BaoTagComponent, BaoTagModule, BaoTitleTextComponent, _BaoModalContainerBase, _closeModalVia, eModalDesktopWidthSize, eModalMobileWidthSize, throwBaoModalContentAlreadyAttachedError };
+export { BAO_FILE_INTL_PROVIDER, BAO_FILE_INTL_PROVIDER_FACTORY, BAO_MODAL_DATA, BAO_RADIO_GROUP, BAO_SNACK_BAR_DATA, BAO_SNACK_BAR_DEFAULT_OPTIONS, BaoAlertActions, BaoAlertComponent, BaoAlertContent, BaoAlertLink, BaoAlertModule, BaoAlertTitle, BaoAvatarComponent, BaoAvatarContent, BaoAvatarModule, BaoBackNavigationComponent, BaoBackNavigationInsert, BaoBadgeComponent, BaoBadgeModule, BaoBreadcrumbComponent, BaoBreadcrumbModule, BaoButtonComponent, BaoButtonModule, BaoCardComponent, BaoCardContent, BaoCardHeader, BaoCardModule, BaoCardTextInterface, BaoCardTitle, BaoCheckBoxDescription, BaoCheckboxComponent, BaoCheckboxGroupComponent, BaoCheckboxModule, BaoCommonComponentsModule, BaoDropdownMenuComponent, BaoDropdownMenuDivider, BaoDropdownMenuItem, BaoDropdownMenuItemDescription, BaoDropdownMenuItemLabel, BaoDropdownMenuModule, BaoDropdownMenuSection, BaoDropdownMenuTrigger, BaoErrorTextComponent, BaoFileDropDirective, BaoFileDropzoneIntructions, BaoFileInputComponent, BaoFileIntl, BaoFileIntlEnglish, BaoFileModule, BaoFilePreviewComponent, BaoGuidingTextComponent, BaoHeaderInfoComponent, BaoHeaderInfoContent, BaoHeaderInfoModule, BaoHeaderInfoSubtitle, BaoHeaderInfoSurtitle, BaoHeaderInfoTitle, BaoHeaderInfoTitleGroupComponent, BaoHyperlinkComponent, BaoHyperlinkModule, BaoIconComponent, BaoIconModule, BaoLabelTextComponent, BaoList, BaoListItem, BaoListItemDescription, BaoListItemTitle, BaoListModule, BaoListSummary, BaoListSummaryItem, BaoModal, BaoModalBase, BaoModalClose, BaoModalContainer, BaoModalInitialConfig, BaoModalModule, BaoModalRef, BaoModule, BaoNavList, BaoRadioButtonComponent, BaoRadioButtonGroupComponent, BaoRadioDescription, BaoRadioModule, BaoSimpleSnackBarComponent, BaoSnackBarConfig, BaoSnackBarContainerComponent, BaoSnackBarModule, BaoSnackBarRef, BaoSnackBarService, BaoSnackBarToastTypeEnum, BaoSummaryComponent, BaoSummaryDescription, BaoSummaryModule, BaoSystemHeaderComponent, BaoSystemHeaderModule, BaoTabHeader, BaoTabPanel, BaoTablistComponent, BaoTabsContainer, BaoTabsModule, BaoTagComponent, BaoTagModule, BaoTitleTextComponent, _BaoModalContainerBase, _closeModalVia, baoFactory, eModalDesktopWidthSize, eModalMobileWidthSize, throwBaoModalContentAlreadyAttachedError };
 //# sourceMappingURL=villedemontreal-angular-ui.mjs.map