@villedemontreal/angular-ui 13.1.0 → 13.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/esm2020/lib/bao.module.mjs +7 -4
  2. package/esm2020/lib/dropdown-menu/dropdown-menu.component.mjs +23 -7
  3. package/esm2020/lib/file/file-input.component.mjs +5 -5
  4. package/esm2020/lib/file/file-preview.component.mjs +2 -2
  5. package/esm2020/lib/modal/modal-container.mjs +17 -31
  6. package/esm2020/lib/modal/modal-ref.mjs +4 -1
  7. package/esm2020/lib/modal/modal.mjs +10 -31
  8. package/esm2020/lib/modal/module.mjs +4 -21
  9. package/fesm2015/villedemontreal-angular-ui.mjs +64 -123
  10. package/fesm2015/villedemontreal-angular-ui.mjs.map +1 -1
  11. package/fesm2020/villedemontreal-angular-ui.mjs +64 -121
  12. package/fesm2020/villedemontreal-angular-ui.mjs.map +1 -1
  13. package/lib/bao.module.d.ts +11 -11
  14. package/lib/dropdown-menu/dropdown-menu.component.d.ts +10 -4
  15. package/lib/modal/modal-container.d.ts +4 -5
  16. package/lib/modal/modal-ref.d.ts +1 -0
  17. package/lib/modal/modal.d.ts +3 -4
  18. package/lib/modal/module.d.ts +1 -2
  19. package/package.json +1 -1
  20. package/esm2020/lib/modal/modal-animations.mjs +0 -29
  21. package/lib/modal/modal-animations.d.ts +0 -8
package/fesm2020/villedemontreal-angular-ui.mjs CHANGED
@@ -13,11 +13,9 @@ import * as i1$4 from '@angular/cdk/overlay';
13
13
  import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
14
14
  import * as i3 from '@angular/cdk/portal';
15
15
  import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule, DomPortal } from '@angular/cdk/portal';
16
- import { Subject, filter, take, defer, startWith, Subscription } from 'rxjs';
16
+ import { Subject, filter, take, defer, startWith } from 'rxjs';
17
17
  import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
18
- import { trigger, state, style, transition, group, animate, query, animateChild } from '@angular/animations';
19
18
  import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
20
- import { ANIMATION_MODULE_TYPE, BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
21
19
 
22
20
  function baoColorToHex(baoColor) {
23
21
  switch (baoColor) {
@@ -2936,34 +2934,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
2936
2934
  * See LICENSE file in the project root for full license information.
2937
2935
  */
2938
2936
 
2939
- /*
2940
- * Copyright (c) 2023 Ville de Montreal. All rights reserved.
2941
- * Licensed under the MIT license.
2942
- * See LICENSE file in the project root for full license information.
2943
- */
2944
- /**
2945
- * Animations used by MatDialog.
2946
- * @docs-private
2947
- */
2948
- const baoModalAnimations = {
2949
- /** Animation that is applied on the modal container by default. */
2950
- modalContainer: trigger('modalContainer', [
2951
- // Note: The `enter` animation transitions to `transform: none`, because for some reason
2952
- // specifying the transform explicitly, causes IE both to blur the modal content and
2953
- // decimate the animation performance. Leaving it as `none` solves both issues.
2954
- state('void, exit', style({ opacity: 0, transform: 'scale(0.7)' })),
2955
- state('enter', style({ transform: 'none' })),
2956
- transition('* => enter', group([
2957
- animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'none', opacity: 1 })),
2958
- query('@*', animateChild(), { optional: true })
2959
- ])),
2960
- transition('* => void, * => exit', group([
2961
- animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 0 })),
2962
- query('@*', animateChild(), { optional: true })
2963
- ]))
2964
- ])
2965
- };
2966
-
2967
2937
  /*
2968
2938
  * Copyright (c) 2023 Ville de Montreal. All rights reserved.
2969
2939
  * Licensed under the MIT license.
@@ -3227,39 +3197,29 @@ class BaoModalContainer extends _BaoModalContainerBase {
3227
3197
  /** State of the modal animation. */
3228
3198
  this._state = 'enter';
3229
3199
  }
3230
- /** Callback, invoked whenever an animation on the host completes. */
3231
- async _onAnimationDone({ toState, totalTime }) {
3232
- if (toState === 'enter') {
3233
- await this._trapFocus();
3234
- this._animationStateChanged.next({ state: 'opened', totalTime });
3235
- }
3236
- else if (toState === 'exit') {
3237
- this._restoreFocus();
3238
- this._animationStateChanged.next({ state: 'closed', totalTime });
3239
- }
3240
- }
3241
- /** Callback, invoked when an animation on the host starts. */
3242
- _onAnimationStart({ toState, totalTime }) {
3243
- if (toState === 'enter') {
3244
- this._animationStateChanged.next({ state: 'opening', totalTime });
3245
- }
3246
- else if (toState === 'exit' || toState === 'void') {
3247
- this._animationStateChanged.next({ state: 'closing', totalTime });
3248
- }
3200
+ _startOpenAnimation() {
3201
+ this._animationStateChanged.emit({ state: 'opening', totalTime: 20 });
3202
+ void Promise.resolve().then(() => this._finishDialogOpen());
3249
3203
  }
3250
3204
  /** Starts the modal exit animation. */
3251
3205
  _startExitAnimation() {
3252
- this._state = 'exit';
3253
- // Mark the container for check so it can react if the
3254
- // view container is using OnPush change detection.
3255
- this._changeDetectorRef.markForCheck();
3206
+ this._animationStateChanged.emit({ state: 'closed', totalTime: 20 });
3207
+ }
3208
+ _finishDialogOpen() {
3209
+ this._openAnimationDone(20);
3210
+ }
3211
+ _openAnimationDone(totalTime) {
3212
+ if (this._config.delayFocusTrap) {
3213
+ void this._trapFocus();
3214
+ }
3215
+ this._animationStateChanged.next({ state: 'opened', totalTime });
3256
3216
  }
3257
3217
  }
3258
3218
  BaoModalContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalContainer, deps: null, target: i0.ɵɵFactoryTarget.Component });
3259
- BaoModalContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:black}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.bao-modal-container{display:block;overflow:auto;width:100%;height:100%;min-height:inherit;max-height:inherit;background-color:#fff;background-clip:padding-box;border:0 solid rgba(0,0,0,.2);border-radius:.5rem;outline:0}.bao-modal-content{display:flex;flex-direction:column;height:100%}.bao-modal-header{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #ced4da;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.bao-modal-header .bao-modal-title{font-size:1rem;line-height:1.5rem;margin:1rem 0 1rem 1rem}.bao-modal-header button{margin:.5rem}.bao-modal-body{display:block;padding:1rem;overflow:auto;flex-grow:1}@media (min-width: 768px){.bao-modal-body{padding:2rem}}.bao-modal-footer{display:flex;flex-wrap:wrap;padding:1rem;border-top:1px solid #ced4da;border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.bao-modal-footer.bao-modal-footer-order{justify-content:unset;flex-direction:column-reverse}.bao-modal-footer button{text-align:center}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:100%;display:block}.bao-modal-footer .bao-button-secondary{margin-bottom:.5rem}.bao-modal-footer .bao-button-tertiary{display:none}@media (min-width: 768px){.bao-modal-footer{justify-content:flex-end}.bao-modal-footer.bao-modal-footer-order{flex-direction:row-reverse}.bao-modal-footer .bao-button-primary{margin-left:1rem}.bao-modal-footer .bao-button-secondary{margin-bottom:0}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:auto}.bao-modal-footer .bao-button-tertiary{display:block}}\n"], directives: [{ type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [baoModalAnimations.modalContainer], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
3219
+ BaoModalContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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}}@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;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:black}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:.5}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.bao-modal-container{display:block;overflow:auto;width:100%;height:100%;min-height:inherit;max-height:inherit;background-color:#fff;background-clip:padding-box;border:0 solid rgba(0,0,0,.2);border-radius:.5rem;outline:0}.bao-modal-content{display:flex;flex-direction:column;height:100%}.bao-modal-header{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #ced4da;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.bao-modal-header .bao-modal-title{font-size:1rem;line-height:1.5rem;margin:1rem 0 1rem 1rem}.bao-modal-header button{margin:.5rem}.bao-modal-body{display:block;padding:1rem;overflow:auto;flex-grow:1}@media (min-width: 768px){.bao-modal-body{padding:2rem}}.bao-modal-footer{display:flex;flex-wrap:wrap;padding:1rem;border-top:1px solid #ced4da;border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.bao-modal-footer.bao-modal-footer-order{justify-content:unset;flex-direction:column-reverse}.bao-modal-footer button{text-align:center}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:100%;display:block}.bao-modal-footer .bao-button-secondary{margin-bottom:.5rem}.bao-modal-footer .bao-button-tertiary{display:none}@media (min-width: 768px){.bao-modal-footer{justify-content:flex-end}.bao-modal-footer.bao-modal-footer-order{flex-direction:row-reverse}.bao-modal-footer .bao-button-primary{margin-left:1rem}.bao-modal-footer .bao-button-secondary{margin-bottom:0}.bao-modal-footer .bao-button-primary,.bao-modal-footer .bao-button-secondary{width:auto}.bao-modal-footer .bao-button-tertiary{display:block}}\n"], directives: [{ type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
3260
3220
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalContainer, decorators: [{
3261
3221
  type: Component,
3262
- args: [{ selector: 'bao-modal-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, animations: [baoModalAnimations.modalContainer], host: {
3222
+ args: [{ selector: 'bao-modal-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, host: {
3263
3223
  class: 'bao-modal-container',
3264
3224
  tabindex: '-1',
3265
3225
  'aria-modal': 'true',
@@ -3267,10 +3227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
3267
3227
  '[attr.role]': '_config.role',
3268
3228
  '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
3269
3229
  '[attr.aria-label]': '_config.ariaLabel',
3270
- '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
3271
- '[@modalContainer]': '_state',
3272
- '(@modalContainer.start)': '_onAnimationStart($event)',
3273
- '(@modalContainer.done)': '_onAnimationDone($event)'
3230
+ '[attr.aria-describedby]': '_config.ariaDescribedBy || null'
3274
3231
  }, 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;inset: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"] }]
3275
3232
  }] });
3276
3233
 
@@ -3363,6 +3320,9 @@ class BaoModalRef {
3363
3320
  this._state = 1 /* CLOSING */;
3364
3321
  this._containerInstance._startExitAnimation();
3365
3322
  }
3323
+ startOpenAnimation() {
3324
+ this._containerInstance._startOpenAnimation();
3325
+ }
3366
3326
  /**
3367
3327
  * Gets an observable that is notified when the modal is finished opening.
3368
3328
  */
@@ -3475,7 +3435,7 @@ function _closeModalVia(ref, interactionType, result) {
3475
3435
  /** Injection token that can be used to access the data that was passed in to a modal. */
3476
3436
  const BAO_MODAL_DATA = new InjectionToken('BaoModalData');
3477
3437
  class BaoModalBase {
3478
- constructor(_overlay, _injector, _parentModal, _overlayContainer, _modalRefConstructor, _modalContainerType, _modalDataToken, _animationMode) {
3438
+ constructor(_overlay, _injector, _parentModal, _overlayContainer, _modalRefConstructor, _modalContainerType, _modalDataToken) {
3479
3439
  this._overlay = _overlay;
3480
3440
  this._injector = _injector;
3481
3441
  this._parentModal = _parentModal;
@@ -3483,7 +3443,6 @@ class BaoModalBase {
3483
3443
  this._modalRefConstructor = _modalRefConstructor;
3484
3444
  this._modalContainerType = _modalContainerType;
3485
3445
  this._modalDataToken = _modalDataToken;
3486
- this._animationMode = _animationMode;
3487
3446
  this.afterAllClosed = defer(() => this.openModals.length
3488
3447
  ? this.getAfterAllClosed()
3489
3448
  : this.getAfterAllClosed().pipe(startWith(undefined)));
@@ -3523,21 +3482,6 @@ class BaoModalBase {
3523
3482
  }
3524
3483
  const overlayRef = this._createOverlay(conf);
3525
3484
  const modalContainer = this._attachModalContainer(overlayRef, conf);
3526
- if (this._animationMode !== 'NoopAnimations') {
3527
- const animationStateSubscription = modalContainer._animationStateChanged.subscribe(modalAnimationEvent => {
3528
- if (modalAnimationEvent.state === 'opening') {
3529
- this._modalAnimatingOpen = true;
3530
- }
3531
- if (modalAnimationEvent.state === 'opened') {
3532
- this._modalAnimatingOpen = false;
3533
- animationStateSubscription.unsubscribe();
3534
- }
3535
- });
3536
- if (!this._animationStateSubscriptions) {
3537
- this._animationStateSubscriptions = new Subscription();
3538
- }
3539
- this._animationStateSubscriptions.add(animationStateSubscription);
3540
- }
3541
3485
  const modalRef = this._attachModalContent(componentOrTemplateRef, modalContainer, overlayRef, conf);
3542
3486
  this._lastModalRef = modalRef;
3543
3487
  // If this is the first modal that we're opening, hide all the non-overlay content.
@@ -3608,6 +3552,7 @@ class BaoModalBase {
3608
3552
  });
3609
3553
  const containerPortal = new ComponentPortal(this._modalContainerType, config.viewContainerRef, injector);
3610
3554
  const containerRef = overlay.attach(containerPortal);
3555
+ containerRef.instance._startOpenAnimation();
3611
3556
  return containerRef.instance;
3612
3557
  }
3613
3558
  /**
@@ -3725,16 +3670,16 @@ BaoModalBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "1
3725
3670
  BaoModalBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: BaoModalBase, ngImport: i0 });
3726
3671
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalBase, decorators: [{
3727
3672
  type: Directive
3728
- }], 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 }]; } });
3673
+ }], 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 }]; } });
3729
3674
  /**
3730
3675
  * Service to open modal.
3731
3676
  */
3732
3677
  class BaoModal extends BaoModalBase {
3733
- constructor(overlay, injector, parentModal, overlayContainer, animationMode) {
3734
- super(overlay, injector, parentModal, overlayContainer, BaoModalRef, BaoModalContainer, BAO_MODAL_DATA, animationMode);
3678
+ constructor(overlay, injector, parentModal, overlayContainer) {
3679
+ super(overlay, injector, parentModal, overlayContainer, BaoModalRef, BaoModalContainer, BAO_MODAL_DATA);
3735
3680
  }
3736
3681
  }
3737
- BaoModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 });
3682
+ BaoModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 });
3738
3683
  BaoModal.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModal });
3739
3684
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModal, decorators: [{
3740
3685
  type: Injectable
@@ -3742,12 +3687,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
3742
3687
  type: Optional
3743
3688
  }, {
3744
3689
  type: SkipSelf
3745
- }] }, { type: i1$4.OverlayContainer }, { type: undefined, decorators: [{
3746
- type: Optional
3747
- }, {
3748
- type: Inject,
3749
- args: [ANIMATION_MODULE_TYPE]
3750
- }] }]; } });
3690
+ }] }, { type: i1$4.OverlayContainer }]; } });
3751
3691
 
3752
3692
  /*
3753
3693
  * Copyright (c) 2023 Ville de Montreal. All rights reserved.
@@ -3837,28 +3777,12 @@ const MODAL_DIRECTIVES = [BaoModalContainer, BaoModalClose];
3837
3777
  class BaoModalModule {
3838
3778
  }
3839
3779
  BaoModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
3840
- BaoModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalModule, declarations: [BaoModalContainer, BaoModalClose], imports: [CommonModule,
3841
- OverlayModule,
3842
- PortalModule,
3843
- BrowserAnimationsModule,
3844
- NoopAnimationsModule], exports: [BaoModalContainer, BaoModalClose] });
3845
- BaoModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalModule, providers: [BaoModal], imports: [[
3846
- CommonModule,
3847
- OverlayModule,
3848
- PortalModule,
3849
- BrowserAnimationsModule,
3850
- NoopAnimationsModule
3851
- ]] });
3780
+ BaoModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalModule, declarations: [BaoModalContainer, BaoModalClose], imports: [CommonModule, OverlayModule, PortalModule], exports: [BaoModalContainer, BaoModalClose] });
3781
+ BaoModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalModule, providers: [BaoModal], imports: [[CommonModule, OverlayModule, PortalModule]] });
3852
3782
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalModule, decorators: [{
3853
3783
  type: NgModule,
3854
3784
  args: [{
3855
- imports: [
3856
- CommonModule,
3857
- OverlayModule,
3858
- PortalModule,
3859
- BrowserAnimationsModule,
3860
- NoopAnimationsModule
3861
- ],
3785
+ imports: [CommonModule, OverlayModule, PortalModule],
3862
3786
  declarations: MODAL_DIRECTIVES,
3863
3787
  exports: MODAL_DIRECTIVES,
3864
3788
  providers: [BaoModal]
@@ -3982,6 +3906,10 @@ class BaoDropdownMenuItem {
3982
3906
  * Is the list item disabled
3983
3907
  */
3984
3908
  this.disabled = false;
3909
+ /**
3910
+ * Emits when menu item is clicked
3911
+ */
3912
+ this.itemClicked = new EventEmitter();
3985
3913
  }
3986
3914
  get nativeElement() {
3987
3915
  return this.elementRef.nativeElement;
@@ -4062,19 +3990,25 @@ class BaoDropdownMenuItem {
4062
3990
  }
4063
3991
  }
4064
3992
  /**
4065
- * This method propagates a click event to menu item children with inputs (checkbox, radio button)
3993
+ * This method propagates a click event to menu item children with inputs (checkbox, radio button).
3994
+ * It emits event to close menu if item does not contain an input.
4066
3995
  */
4067
3996
  propagateClick() {
3997
+ let closeMenu = true;
4068
3998
  for (let i = 0; i < this.nativeElement.children.length; i++) {
4069
3999
  if (this.nativeElement.children.item(i).firstElementChild.localName ==
4070
4000
  'input') {
4071
4001
  this.nativeElement.children.item(i).firstElementChild.click();
4002
+ closeMenu = false;
4072
4003
  }
4073
4004
  }
4005
+ if (closeMenu) {
4006
+ this.itemClicked.emit();
4007
+ }
4074
4008
  }
4075
4009
  }
4076
4010
  BaoDropdownMenuItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoDropdownMenuItem, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: BaoDropdownMenuComponent }], target: i0.ɵɵFactoryTarget.Directive });
4077
- BaoDropdownMenuItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", 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 });
4011
+ BaoDropdownMenuItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", 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 });
4078
4012
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoDropdownMenuItem, decorators: [{
4079
4013
  type: Directive,
4080
4014
  args: [{
@@ -4086,6 +4020,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4086
4020
  }]
4087
4021
  }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: BaoDropdownMenuComponent }]; }, propDecorators: { disabled: [{
4088
4022
  type: Input
4023
+ }], itemClicked: [{
4024
+ type: Output
4089
4025
  }], spaceKeyEvent: [{
4090
4026
  type: HostListener,
4091
4027
  args: ['window:keyup.space']
@@ -4094,7 +4030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4094
4030
  args: ['click', ['$event.target']]
4095
4031
  }], enterKeyEvent: [{
4096
4032
  type: HostListener,
4097
- args: ['window:keydown.enter']
4033
+ args: ['window:keyup.enter']
4098
4034
  }] } });
4099
4035
  class BaoDropdownMenuComponent {
4100
4036
  constructor(cdr, renderer, elementRef) {
@@ -4172,6 +4108,9 @@ class BaoDropdownMenuComponent {
4172
4108
  this.renderer.setAttribute(this.nativeElement, 'id', this.menuId);
4173
4109
  this._menuPortal = new DomPortal(this._menuContent);
4174
4110
  }
4111
+ ngAfterContentInit() {
4112
+ this._listItems.forEach((item) => item.itemClicked.subscribe(() => this.isClosedByKeyEvent.emit()));
4113
+ }
4175
4114
  focusFirstItem() {
4176
4115
  this._activeItemIndex = 0;
4177
4116
  this._listItems.first.nativeElement.focus();
@@ -4292,8 +4231,9 @@ class BaoDropdownMenuTrigger {
4292
4231
  }
4293
4232
  /** Enter key event triggers click event which opens menu,
4294
4233
  * then focus is put on first item in the menu */
4295
- enterKeyEvent() {
4234
+ enterKeyEvent(event) {
4296
4235
  if (this._isMenuOpen && document.activeElement === this.nativeElement) {
4236
+ event.stopImmediatePropagation();
4297
4237
  this.menu.focusFirstItem();
4298
4238
  }
4299
4239
  }
@@ -4379,7 +4319,7 @@ class BaoDropdownMenuTrigger {
4379
4319
  }
4380
4320
  }
4381
4321
  BaoDropdownMenuTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoDropdownMenuTrigger, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Directive });
4382
- BaoDropdownMenuTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", 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 });
4322
+ BaoDropdownMenuTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", 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 });
4383
4323
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoDropdownMenuTrigger, decorators: [{
4384
4324
  type: Directive,
4385
4325
  args: [{
@@ -4394,7 +4334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4394
4334
  args: ['window:keyup.escape']
4395
4335
  }], enterKeyEvent: [{
4396
4336
  type: HostListener,
4397
- args: ['window:keyup.enter']
4337
+ args: ['window:keyup.enter', ['$event']]
4398
4338
  }], onClick: [{
4399
4339
  type: HostListener,
4400
4340
  args: ['click']
@@ -4604,12 +4544,12 @@ class BaoFilePreviewComponent {
4604
4544
  }
4605
4545
  }
4606
4546
  BaoFilePreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoFilePreviewComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
4607
- BaoFilePreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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:first-child{margin-top:1rem}.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"], components: [{ type: BaoIconComponent, selector: "bao-icon", inputs: ["color", "size", "svgIcon", "title"], exportAs: ["baoIcon"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
4547
+ BaoFilePreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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"], components: [{ type: BaoIconComponent, selector: "bao-icon", inputs: ["color", "size", "svgIcon", "title"], exportAs: ["baoIcon"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
4608
4548
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoFilePreviewComponent, decorators: [{
4609
4549
  type: Component,
4610
4550
  args: [{ selector: 'bao-file-preview, [bao-file-preview]', encapsulation: ViewEncapsulation.None, host: {
4611
4551
  class: 'bao-file-preview'
4612
- }, 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:first-child{margin-top:1rem}.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"] }]
4552
+ }, 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"] }]
4613
4553
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { file: [{
4614
4554
  type: Input
4615
4555
  }], isLoading: [{
@@ -4820,10 +4760,10 @@ class BaoFileInputComponent {
4820
4760
  this.propagateTouched();
4821
4761
  }
4822
4762
  setDescribedByAttribute() {
4823
- const helperText = Array.from(this.nativeElement.children).find((el) => el.localName === 'bao-guiding-text').firstElementChild;
4763
+ const helperText = Array.from(this.nativeElement.children).find((el) => el.localName === 'bao-guiding-text');
4824
4764
  if (helperText) {
4825
4765
  this._helperTextId = `bao-guiding-text-${fileTextUniqueId++}`;
4826
- this.renderer.setAttribute(helperText, 'id', this._helperTextId);
4766
+ this.renderer.setAttribute(helperText.firstElementChild, 'id', this._helperTextId);
4827
4767
  const inputElement = Array.from(this.nativeElement.children)
4828
4768
  .find((el) => el.className == 'file-drop-zone')
4829
4769
  .children.item(1);
@@ -4855,7 +4795,7 @@ BaoFileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
4855
4795
  useExisting: forwardRef(() => BaoFileInputComponent),
4856
4796
  multi: true
4857
4797
  }
4858
- ], 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-error{margin-top:.5rem}\n"], components: [{ type: i0.forwardRef(function () { return BaoLabelTextComponent; }), selector: "bao-label, [bao-label]", inputs: ["required"] }, { type: i0.forwardRef(function () { return BaoButtonComponent; }), selector: "button[bao-button]", inputs: ["displayType", "level", "size", "loading", "reversed", "loadingSpinnerAriaLabel", "fullWidth"] }, { type: i0.forwardRef(function () { return BaoErrorTextComponent; }), selector: "bao-error, [bao-error]" }], directives: [{ type: i0.forwardRef(function () { return BaoFileDropDirective; }), selector: "[baoFileDrop]", outputs: ["fileDrop"] }, { type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return BaoFileDropzoneIntructions; }), selector: "bao-file-dropzone-instructions, [bao-file-dropzone-instructions]" }], encapsulation: i0.ViewEncapsulation.None });
4798
+ ], 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"], components: [{ type: i0.forwardRef(function () { return BaoLabelTextComponent; }), selector: "bao-label, [bao-label]", inputs: ["required"] }, { type: i0.forwardRef(function () { return BaoButtonComponent; }), selector: "button[bao-button]", inputs: ["displayType", "level", "size", "loading", "reversed", "loadingSpinnerAriaLabel", "fullWidth"] }, { type: i0.forwardRef(function () { return BaoErrorTextComponent; }), selector: "bao-error, [bao-error]" }], directives: [{ type: i0.forwardRef(function () { return BaoFileDropDirective; }), selector: "[baoFileDrop]", outputs: ["fileDrop"] }, { type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return BaoFileDropzoneIntructions; }), selector: "bao-file-dropzone-instructions, [bao-file-dropzone-instructions]" }], encapsulation: i0.ViewEncapsulation.None });
4859
4799
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoFileInputComponent, decorators: [{
4860
4800
  type: Component,
4861
4801
  args: [{ selector: 'bao-file-input, [bao-file-input]', providers: [
@@ -4870,7 +4810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4870
4810
  '[class.bao-file-label-small]': 'size === "small"',
4871
4811
  '[class.bao-file-label-medium]': 'size === "medium"',
4872
4812
  '[class.bao-file-input-disabled]': 'disabled'
4873
- }, 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-error{margin-top:.5rem}\n"] }]
4813
+ }, 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"] }]
4874
4814
  }], ctorParameters: function () { return [{ type: BaoFileIntl }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { inputId: [{
4875
4815
  type: Input,
4876
4816
  args: ['id']
@@ -5047,7 +4987,8 @@ BaoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.
5047
4987
  BaoButtonModule,
5048
4988
  BaoAlertModule,
5049
4989
  BaoCardModule,
5050
- BaoBreadcrumbModule], exports: [BaoIconModule,
4990
+ BaoBreadcrumbModule,
4991
+ BaoModalModule], exports: [BaoIconModule,
5051
4992
  BaoButtonModule,
5052
4993
  BaoAlertModule,
5053
4994
  BaoBreadcrumbModule,
@@ -5073,7 +5014,8 @@ BaoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.
5073
5014
  BaoButtonModule,
5074
5015
  BaoAlertModule,
5075
5016
  BaoCardModule,
5076
- BaoBreadcrumbModule
5017
+ BaoBreadcrumbModule,
5018
+ BaoModalModule
5077
5019
  ], BaoIconModule,
5078
5020
  BaoButtonModule,
5079
5021
  BaoAlertModule,
@@ -5103,7 +5045,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
5103
5045
  BaoButtonModule,
5104
5046
  BaoAlertModule,
5105
5047
  BaoCardModule,
5106
- BaoBreadcrumbModule
5048
+ BaoBreadcrumbModule,
5049
+ BaoModalModule
5107
5050
  ],
5108
5051
  exports: [
5109
5052
  BaoIconModule,