@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/fesm2015/villedemontreal-angular-ui.mjs CHANGED
@@ -13,12 +13,10 @@ 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 { __awaiter } from 'tslib';
18
18
  import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
19
- import { trigger, state, style, transition, group, animate, query, animateChild } from '@angular/animations';
20
19
  import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
21
- import { ANIMATION_MODULE_TYPE, BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
22
20
 
23
21
  function baoColorToHex(baoColor) {
24
22
  switch (baoColor) {
@@ -2941,34 +2939,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
2941
2939
  * See LICENSE file in the project root for full license information.
2942
2940
  */
2943
2941
 
2944
- /*
2945
- * Copyright (c) 2023 Ville de Montreal. All rights reserved.
2946
- * Licensed under the MIT license.
2947
- * See LICENSE file in the project root for full license information.
2948
- */
2949
- /**
2950
- * Animations used by MatDialog.
2951
- * @docs-private
2952
- */
2953
- const baoModalAnimations = {
2954
- /** Animation that is applied on the modal container by default. */
2955
- modalContainer: trigger('modalContainer', [
2956
- // Note: The `enter` animation transitions to `transform: none`, because for some reason
2957
- // specifying the transform explicitly, causes IE both to blur the modal content and
2958
- // decimate the animation performance. Leaving it as `none` solves both issues.
2959
- state('void, exit', style({ opacity: 0, transform: 'scale(0.7)' })),
2960
- state('enter', style({ transform: 'none' })),
2961
- transition('* => enter', group([
2962
- animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'none', opacity: 1 })),
2963
- query('@*', animateChild(), { optional: true })
2964
- ])),
2965
- transition('* => void, * => exit', group([
2966
- animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 0 })),
2967
- query('@*', animateChild(), { optional: true })
2968
- ]))
2969
- ])
2970
- };
2971
-
2972
2942
  /*
2973
2943
  * Copyright (c) 2023 Ville de Montreal. All rights reserved.
2974
2944
  * Licensed under the MIT license.
@@ -3238,41 +3208,29 @@ class BaoModalContainer extends _BaoModalContainerBase {
3238
3208
  /** State of the modal animation. */
3239
3209
  this._state = 'enter';
3240
3210
  }
3241
- /** Callback, invoked whenever an animation on the host completes. */
3242
- _onAnimationDone({ toState, totalTime }) {
3243
- return __awaiter(this, void 0, void 0, function* () {
3244
- if (toState === 'enter') {
3245
- yield this._trapFocus();
3246
- this._animationStateChanged.next({ state: 'opened', totalTime });
3247
- }
3248
- else if (toState === 'exit') {
3249
- this._restoreFocus();
3250
- this._animationStateChanged.next({ state: 'closed', totalTime });
3251
- }
3252
- });
3253
- }
3254
- /** Callback, invoked when an animation on the host starts. */
3255
- _onAnimationStart({ toState, totalTime }) {
3256
- if (toState === 'enter') {
3257
- this._animationStateChanged.next({ state: 'opening', totalTime });
3258
- }
3259
- else if (toState === 'exit' || toState === 'void') {
3260
- this._animationStateChanged.next({ state: 'closing', totalTime });
3261
- }
3211
+ _startOpenAnimation() {
3212
+ this._animationStateChanged.emit({ state: 'opening', totalTime: 20 });
3213
+ void Promise.resolve().then(() => this._finishDialogOpen());
3262
3214
  }
3263
3215
  /** Starts the modal exit animation. */
3264
3216
  _startExitAnimation() {
3265
- this._state = 'exit';
3266
- // Mark the container for check so it can react if the
3267
- // view container is using OnPush change detection.
3268
- this._changeDetectorRef.markForCheck();
3217
+ this._animationStateChanged.emit({ state: 'closed', totalTime: 20 });
3218
+ }
3219
+ _finishDialogOpen() {
3220
+ this._openAnimationDone(20);
3221
+ }
3222
+ _openAnimationDone(totalTime) {
3223
+ if (this._config.delayFocusTrap) {
3224
+ void this._trapFocus();
3225
+ }
3226
+ this._animationStateChanged.next({ state: 'opened', totalTime });
3269
3227
  }
3270
3228
  }
3271
3229
  BaoModalContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalContainer, deps: null, target: i0.ɵɵFactoryTarget.Component });
3272
- 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 });
3230
+ 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 });
3273
3231
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalContainer, decorators: [{
3274
3232
  type: Component,
3275
- args: [{ selector: 'bao-modal-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, animations: [baoModalAnimations.modalContainer], host: {
3233
+ args: [{ selector: 'bao-modal-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, host: {
3276
3234
  class: 'bao-modal-container',
3277
3235
  tabindex: '-1',
3278
3236
  'aria-modal': 'true',
@@ -3280,10 +3238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
3280
3238
  '[attr.role]': '_config.role',
3281
3239
  '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
3282
3240
  '[attr.aria-label]': '_config.ariaLabel',
3283
- '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
3284
- '[@modalContainer]': '_state',
3285
- '(@modalContainer.start)': '_onAnimationStart($event)',
3286
- '(@modalContainer.done)': '_onAnimationDone($event)'
3241
+ '[attr.aria-describedby]': '_config.ariaDescribedBy || null'
3287
3242
  }, 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"] }]
3288
3243
  }] });
3289
3244
 
@@ -3376,6 +3331,9 @@ class BaoModalRef {
3376
3331
  this._state = 1 /* CLOSING */;
3377
3332
  this._containerInstance._startExitAnimation();
3378
3333
  }
3334
+ startOpenAnimation() {
3335
+ this._containerInstance._startOpenAnimation();
3336
+ }
3379
3337
  /**
3380
3338
  * Gets an observable that is notified when the modal is finished opening.
3381
3339
  */
@@ -3488,7 +3446,7 @@ function _closeModalVia(ref, interactionType, result) {
3488
3446
  /** Injection token that can be used to access the data that was passed in to a modal. */
3489
3447
  const BAO_MODAL_DATA = new InjectionToken('BaoModalData');
3490
3448
  class BaoModalBase {
3491
- constructor(_overlay, _injector, _parentModal, _overlayContainer, _modalRefConstructor, _modalContainerType, _modalDataToken, _animationMode) {
3449
+ constructor(_overlay, _injector, _parentModal, _overlayContainer, _modalRefConstructor, _modalContainerType, _modalDataToken) {
3492
3450
  this._overlay = _overlay;
3493
3451
  this._injector = _injector;
3494
3452
  this._parentModal = _parentModal;
@@ -3496,7 +3454,6 @@ class BaoModalBase {
3496
3454
  this._modalRefConstructor = _modalRefConstructor;
3497
3455
  this._modalContainerType = _modalContainerType;
3498
3456
  this._modalDataToken = _modalDataToken;
3499
- this._animationMode = _animationMode;
3500
3457
  this.afterAllClosed = defer(() => this.openModals.length
3501
3458
  ? this.getAfterAllClosed()
3502
3459
  : this.getAfterAllClosed().pipe(startWith(undefined)));
@@ -3536,21 +3493,6 @@ class BaoModalBase {
3536
3493
  }
3537
3494
  const overlayRef = this._createOverlay(conf);
3538
3495
  const modalContainer = this._attachModalContainer(overlayRef, conf);
3539
- if (this._animationMode !== 'NoopAnimations') {
3540
- const animationStateSubscription = modalContainer._animationStateChanged.subscribe(modalAnimationEvent => {
3541
- if (modalAnimationEvent.state === 'opening') {
3542
- this._modalAnimatingOpen = true;
3543
- }
3544
- if (modalAnimationEvent.state === 'opened') {
3545
- this._modalAnimatingOpen = false;
3546
- animationStateSubscription.unsubscribe();
3547
- }
3548
- });
3549
- if (!this._animationStateSubscriptions) {
3550
- this._animationStateSubscriptions = new Subscription();
3551
- }
3552
- this._animationStateSubscriptions.add(animationStateSubscription);
3553
- }
3554
3496
  const modalRef = this._attachModalContent(componentOrTemplateRef, modalContainer, overlayRef, conf);
3555
3497
  this._lastModalRef = modalRef;
3556
3498
  // If this is the first modal that we're opening, hide all the non-overlay content.
@@ -3621,6 +3563,7 @@ class BaoModalBase {
3621
3563
  });
3622
3564
  const containerPortal = new ComponentPortal(this._modalContainerType, config.viewContainerRef, injector);
3623
3565
  const containerRef = overlay.attach(containerPortal);
3566
+ containerRef.instance._startOpenAnimation();
3624
3567
  return containerRef.instance;
3625
3568
  }
3626
3569
  /**
@@ -3735,16 +3678,16 @@ BaoModalBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "1
3735
3678
  BaoModalBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: BaoModalBase, ngImport: i0 });
3736
3679
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalBase, decorators: [{
3737
3680
  type: Directive
3738
- }], 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 }]; } });
3681
+ }], 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 }]; } });
3739
3682
  /**
3740
3683
  * Service to open modal.
3741
3684
  */
3742
3685
  class BaoModal extends BaoModalBase {
3743
- constructor(overlay, injector, parentModal, overlayContainer, animationMode) {
3744
- super(overlay, injector, parentModal, overlayContainer, BaoModalRef, BaoModalContainer, BAO_MODAL_DATA, animationMode);
3686
+ constructor(overlay, injector, parentModal, overlayContainer) {
3687
+ super(overlay, injector, parentModal, overlayContainer, BaoModalRef, BaoModalContainer, BAO_MODAL_DATA);
3745
3688
  }
3746
3689
  }
3747
- 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 });
3690
+ 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 });
3748
3691
  BaoModal.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModal });
3749
3692
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModal, decorators: [{
3750
3693
  type: Injectable
@@ -3753,12 +3696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
3753
3696
  type: Optional
3754
3697
  }, {
3755
3698
  type: SkipSelf
3756
- }] }, { type: i1$4.OverlayContainer }, { type: undefined, decorators: [{
3757
- type: Optional
3758
- }, {
3759
- type: Inject,
3760
- args: [ANIMATION_MODULE_TYPE]
3761
- }] }];
3699
+ }] }, { type: i1$4.OverlayContainer }];
3762
3700
  } });
3763
3701
 
3764
3702
  /*
@@ -3851,28 +3789,12 @@ const MODAL_DIRECTIVES = [BaoModalContainer, BaoModalClose];
3851
3789
  class BaoModalModule {
3852
3790
  }
3853
3791
  BaoModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
3854
- BaoModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalModule, declarations: [BaoModalContainer, BaoModalClose], imports: [CommonModule,
3855
- OverlayModule,
3856
- PortalModule,
3857
- BrowserAnimationsModule,
3858
- NoopAnimationsModule], exports: [BaoModalContainer, BaoModalClose] });
3859
- BaoModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalModule, providers: [BaoModal], imports: [[
3860
- CommonModule,
3861
- OverlayModule,
3862
- PortalModule,
3863
- BrowserAnimationsModule,
3864
- NoopAnimationsModule
3865
- ]] });
3792
+ 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] });
3793
+ BaoModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalModule, providers: [BaoModal], imports: [[CommonModule, OverlayModule, PortalModule]] });
3866
3794
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoModalModule, decorators: [{
3867
3795
  type: NgModule,
3868
3796
  args: [{
3869
- imports: [
3870
- CommonModule,
3871
- OverlayModule,
3872
- PortalModule,
3873
- BrowserAnimationsModule,
3874
- NoopAnimationsModule
3875
- ],
3797
+ imports: [CommonModule, OverlayModule, PortalModule],
3876
3798
  declarations: MODAL_DIRECTIVES,
3877
3799
  exports: MODAL_DIRECTIVES,
3878
3800
  providers: [BaoModal]
@@ -3996,6 +3918,10 @@ class BaoDropdownMenuItem {
3996
3918
  * Is the list item disabled
3997
3919
  */
3998
3920
  this.disabled = false;
3921
+ /**
3922
+ * Emits when menu item is clicked
3923
+ */
3924
+ this.itemClicked = new EventEmitter();
3999
3925
  }
4000
3926
  get nativeElement() {
4001
3927
  return this.elementRef.nativeElement;
@@ -4076,19 +4002,25 @@ class BaoDropdownMenuItem {
4076
4002
  }
4077
4003
  }
4078
4004
  /**
4079
- * This method propagates a click event to menu item children with inputs (checkbox, radio button)
4005
+ * This method propagates a click event to menu item children with inputs (checkbox, radio button).
4006
+ * It emits event to close menu if item does not contain an input.
4080
4007
  */
4081
4008
  propagateClick() {
4009
+ let closeMenu = true;
4082
4010
  for (let i = 0; i < this.nativeElement.children.length; i++) {
4083
4011
  if (this.nativeElement.children.item(i).firstElementChild.localName ==
4084
4012
  'input') {
4085
4013
  this.nativeElement.children.item(i).firstElementChild.click();
4014
+ closeMenu = false;
4086
4015
  }
4087
4016
  }
4017
+ if (closeMenu) {
4018
+ this.itemClicked.emit();
4019
+ }
4088
4020
  }
4089
4021
  }
4090
4022
  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 });
4091
- 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 });
4023
+ 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 });
4092
4024
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoDropdownMenuItem, decorators: [{
4093
4025
  type: Directive,
4094
4026
  args: [{
@@ -4100,6 +4032,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4100
4032
  }]
4101
4033
  }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: BaoDropdownMenuComponent }]; }, propDecorators: { disabled: [{
4102
4034
  type: Input
4035
+ }], itemClicked: [{
4036
+ type: Output
4103
4037
  }], spaceKeyEvent: [{
4104
4038
  type: HostListener,
4105
4039
  args: ['window:keyup.space']
@@ -4108,7 +4042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4108
4042
  args: ['click', ['$event.target']]
4109
4043
  }], enterKeyEvent: [{
4110
4044
  type: HostListener,
4111
- args: ['window:keydown.enter']
4045
+ args: ['window:keyup.enter']
4112
4046
  }] } });
4113
4047
  class BaoDropdownMenuComponent {
4114
4048
  constructor(cdr, renderer, elementRef) {
@@ -4186,6 +4120,9 @@ class BaoDropdownMenuComponent {
4186
4120
  this.renderer.setAttribute(this.nativeElement, 'id', this.menuId);
4187
4121
  this._menuPortal = new DomPortal(this._menuContent);
4188
4122
  }
4123
+ ngAfterContentInit() {
4124
+ this._listItems.forEach((item) => item.itemClicked.subscribe(() => this.isClosedByKeyEvent.emit()));
4125
+ }
4189
4126
  focusFirstItem() {
4190
4127
  this._activeItemIndex = 0;
4191
4128
  this._listItems.first.nativeElement.focus();
@@ -4306,8 +4243,9 @@ class BaoDropdownMenuTrigger {
4306
4243
  }
4307
4244
  /** Enter key event triggers click event which opens menu,
4308
4245
  * then focus is put on first item in the menu */
4309
- enterKeyEvent() {
4246
+ enterKeyEvent(event) {
4310
4247
  if (this._isMenuOpen && document.activeElement === this.nativeElement) {
4248
+ event.stopImmediatePropagation();
4311
4249
  this.menu.focusFirstItem();
4312
4250
  }
4313
4251
  }
@@ -4393,7 +4331,7 @@ class BaoDropdownMenuTrigger {
4393
4331
  }
4394
4332
  }
4395
4333
  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 });
4396
- 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 });
4334
+ 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 });
4397
4335
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoDropdownMenuTrigger, decorators: [{
4398
4336
  type: Directive,
4399
4337
  args: [{
@@ -4408,7 +4346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4408
4346
  args: ['window:keyup.escape']
4409
4347
  }], enterKeyEvent: [{
4410
4348
  type: HostListener,
4411
- args: ['window:keyup.enter']
4349
+ args: ['window:keyup.enter', ['$event']]
4412
4350
  }], onClick: [{
4413
4351
  type: HostListener,
4414
4352
  args: ['click']
@@ -4618,12 +4556,12 @@ class BaoFilePreviewComponent {
4618
4556
  }
4619
4557
  }
4620
4558
  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 });
4621
- 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 });
4559
+ 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 });
4622
4560
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoFilePreviewComponent, decorators: [{
4623
4561
  type: Component,
4624
4562
  args: [{ selector: 'bao-file-preview, [bao-file-preview]', encapsulation: ViewEncapsulation.None, host: {
4625
4563
  class: 'bao-file-preview'
4626
- }, 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"] }]
4564
+ }, 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"] }]
4627
4565
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { file: [{
4628
4566
  type: Input
4629
4567
  }], isLoading: [{
@@ -4834,10 +4772,10 @@ class BaoFileInputComponent {
4834
4772
  this.propagateTouched();
4835
4773
  }
4836
4774
  setDescribedByAttribute() {
4837
- const helperText = Array.from(this.nativeElement.children).find((el) => el.localName === 'bao-guiding-text').firstElementChild;
4775
+ const helperText = Array.from(this.nativeElement.children).find((el) => el.localName === 'bao-guiding-text');
4838
4776
  if (helperText) {
4839
4777
  this._helperTextId = `bao-guiding-text-${fileTextUniqueId++}`;
4840
- this.renderer.setAttribute(helperText, 'id', this._helperTextId);
4778
+ this.renderer.setAttribute(helperText.firstElementChild, 'id', this._helperTextId);
4841
4779
  const inputElement = Array.from(this.nativeElement.children)
4842
4780
  .find((el) => el.className == 'file-drop-zone')
4843
4781
  .children.item(1);
@@ -4869,7 +4807,7 @@ BaoFileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
4869
4807
  useExisting: forwardRef(() => BaoFileInputComponent),
4870
4808
  multi: true
4871
4809
  }
4872
- ], 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 });
4810
+ ], 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 });
4873
4811
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaoFileInputComponent, decorators: [{
4874
4812
  type: Component,
4875
4813
  args: [{ selector: 'bao-file-input, [bao-file-input]', providers: [
@@ -4884,7 +4822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4884
4822
  '[class.bao-file-label-small]': 'size === "small"',
4885
4823
  '[class.bao-file-label-medium]': 'size === "medium"',
4886
4824
  '[class.bao-file-input-disabled]': 'disabled'
4887
- }, 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"] }]
4825
+ }, 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"] }]
4888
4826
  }], ctorParameters: function () { return [{ type: BaoFileIntl }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { inputId: [{
4889
4827
  type: Input,
4890
4828
  args: ['id']
@@ -5061,7 +4999,8 @@ BaoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.
5061
4999
  BaoButtonModule,
5062
5000
  BaoAlertModule,
5063
5001
  BaoCardModule,
5064
- BaoBreadcrumbModule], exports: [BaoIconModule,
5002
+ BaoBreadcrumbModule,
5003
+ BaoModalModule], exports: [BaoIconModule,
5065
5004
  BaoButtonModule,
5066
5005
  BaoAlertModule,
5067
5006
  BaoBreadcrumbModule,
@@ -5087,7 +5026,8 @@ BaoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.
5087
5026
  BaoButtonModule,
5088
5027
  BaoAlertModule,
5089
5028
  BaoCardModule,
5090
- BaoBreadcrumbModule
5029
+ BaoBreadcrumbModule,
5030
+ BaoModalModule
5091
5031
  ], BaoIconModule,
5092
5032
  BaoButtonModule,
5093
5033
  BaoAlertModule,
@@ -5117,7 +5057,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
5117
5057
  BaoButtonModule,
5118
5058
  BaoAlertModule,
5119
5059
  BaoCardModule,
5120
- BaoBreadcrumbModule
5060
+ BaoBreadcrumbModule,
5061
+ BaoModalModule
5121
5062
  ],
5122
5063
  exports: [
5123
5064
  BaoIconModule,