@ecodev/natural 63.5.0 → 63.5.1

package/fesm2022/ecodev-natural.mjs

@@ -21,7 +21,6 @@ import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import * as i1$1 from '@angular/cdk/portal';
 import { BasePortalOutlet, CdkPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/portal';
 import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
-import { trigger, state, transition, style, animate, sequence, query, group } from '@angular/animations';
 import * as i6 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i5 from '@angular/material/datepicker';
@@ -2807,53 +2806,14 @@ function replaceToday(selection) {
     return selection;
 }
 
-/**
- * Animations used by the mat-menu component.
- * Animation duration and timing values are based on:
- * https://material.io/guidelines/components/menus.html#menus-usage
- */
-const naturalDropdownAnimations = {
-    /**
-     * This animation controls the menu panel's entry and exit from the page.
-     *
-     * When the menu panel is added to the DOM, it scales in and fades in its border.
-     *
-     * When the menu panel is removed from the DOM, it simply fades out after a brief
-     * delay to display the ripple.
-     */
-    transformMenu: trigger('transformMenu', [
-        state('void', style({
-            opacity: 0,
-            // This starts off from 0.01, instead of 0, because there's an issue in the Angular animations
-            // as of 4.2, which causes the animation to be skipped if it starts from 0.
-            transform: 'scale(0.01, 0.01)',
-        })),
-        transition('void => enter', sequence([
-            query('.natural-dropdown-container-content', style({ opacity: 0 })),
-            animate('100ms linear', style({ opacity: 1, transform: 'scale(1, 0.5)' })),
-            group([
-                query('.natural-dropdown-container-content', animate('400ms cubic-bezier(0.55, 0, 0.55, 0.2)', style({ opacity: 1 }))),
-                animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ transform: 'scale(1, 1)' })),
-            ]),
-        ])),
-        transition('* => void', animate('150ms 50ms linear', style({ opacity: 0 }))),
-    ]),
-    /**
-     * This animation fades in the background color and content of the menu panel
-     * after its containing element is scaled in.
-     */
-    fadeInItems: trigger('fadeInItems', [
-        // TODO(crisbeto): this is inside the `transformMenu`
-        // now. Remove next time we do breaking changes.
-        state('showing', style({ opacity: 1 })),
-        transition('void => *', [style({ opacity: 0 }), animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')]),
-    ]),
-};
-
 function throwMatDialogContentAlreadyAttachedError() {
     throw Error('Attempting to attach dialog content after content is already attached');
 }
 const NATURAL_DROPDOWN_CONTAINER_DATA = new InjectionToken('NaturalDropdownContainerData');
+/** Name of the enter animation `@keyframes`. */
+const ENTER_ANIMATION = '_mat-menu-enter';
+/** Name of the exit animation `@keyframes`. */
+const EXIT_ANIMATION = '_mat-menu-exit';
 class NaturalDropdownContainerComponent extends BasePortalOutlet {
     elementRef = inject(ElementRef);
     focusTrapFactory = inject(ConfigurableFocusTrapFactory);
@@ -2861,19 +2821,16 @@ class NaturalDropdownContainerComponent extends BasePortalOutlet {
     portalOutlet = viewChild.required(CdkPortalOutlet);
     closed = new Subject();
     /** Current state of the panel animation. */
-    panelAnimationState = 'void';
+    panelAnimationState = 'enter';
     /** Emits whenever an animation on the menu completes. */
     animationDone = new Subject();
     focusTrap = null;
     elementFocusedBeforeDialogWasOpened = null;
-    constructor() {
-        super();
-    }
     ngOnDestroy() {
         this.closed.complete();
     }
     close() {
-        this.closed.next();
+        this.panelAnimationState = 'void';
     }
     attachTemplatePortal(portal) {
         return this.portalOutlet().attachTemplatePortal(portal);
@@ -2885,17 +2842,19 @@ class NaturalDropdownContainerComponent extends BasePortalOutlet {
         }
         return portalOutlet.attachComponentPortal(portal);
     }
-    startAnimation() {
-        this.panelAnimationState = 'enter';
-    }
-    onAnimationDone(event) {
-        if (event.toState === 'enter') {
-            this.trapFocus();
-        }
-        else if (event.toState === 'exit') {
-            this.restoreFocus();
+    /** Callback that is invoked when the panel animation completes. */
+    onAnimationDone(state) {
+        const isExit = state === EXIT_ANIMATION;
+        if (isExit || state === ENTER_ANIMATION) {
+            if (isExit) {
+                this.restoreFocus();
+                this.closed.next();
+            }
+            else {
+                this.trapFocus();
+            }
+            this.animationDone.next(isExit ? 'void' : 'enter');
         }
-        this.animationDone.next();
     }
     trapFocus() {
         if (!this.focusTrap) {
@@ -2914,13 +2873,13 @@ class NaturalDropdownContainerComponent extends BasePortalOutlet {
             this.focusTrap.destroy();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDropdownContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalDropdownContainerComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n    [@transformMenu]=\"panelAnimationState\"\n    (@transformMenu.done)=\"onAnimationDone($event)\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet />\n    </div>\n\n    @if (data.showValidateButton) {\n        <div class=\"natural-dropdown-validate-button\">\n            <button color=\"primary\" mat-raised-button i18n (click)=\"close()\">Valider</button>\n        </div>\n    }\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDropdownContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalDropdownContainerComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n    [class.mat-menu-panel-exit-animation]=\"panelAnimationState === 'void'\"\n    (animationend)=\"onAnimationDone($event.animationName)\"\n    (animationcancel)=\"onAnimationDone($event.animationName)\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet />\n    </div>\n\n    @if (data.showValidateButton) {\n        <div class=\"natural-dropdown-validate-button\">\n            <button color=\"primary\" mat-raised-button i18n (click)=\"close()\">Valider</button>\n        </div>\n    }\n</div>\n", styles: ["@keyframes _mat-menu-enter{0%{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}@keyframes _mat-menu-exit{0%{opacity:1}to{opacity:0}}.natural-dropdown-container{display:flex;flex-direction:column;animation:_mat-menu-enter .12s cubic-bezier(0,0,.2,1);border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}.natural-dropdown-container.mat-menu-panel-exit-animation{animation:_mat-menu-exit .1s 25ms linear forwards}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDropdownContainerComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], imports: [PortalModule, MatButtonModule], template: "<div\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n    [@transformMenu]=\"panelAnimationState\"\n    (@transformMenu.done)=\"onAnimationDone($event)\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet />\n    </div>\n\n    @if (data.showValidateButton) {\n        <div class=\"natural-dropdown-validate-button\">\n            <button color=\"primary\" mat-raised-button i18n (click)=\"close()\">Valider</button>\n        </div>\n    }\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, imports: [PortalModule, MatButtonModule], template: "<div\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n    [class.mat-menu-panel-exit-animation]=\"panelAnimationState === 'void'\"\n    (animationend)=\"onAnimationDone($event.animationName)\"\n    (animationcancel)=\"onAnimationDone($event.animationName)\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet />\n    </div>\n\n    @if (data.showValidateButton) {\n        <div class=\"natural-dropdown-validate-button\">\n            <button color=\"primary\" mat-raised-button i18n (click)=\"close()\">Valider</button>\n        </div>\n    }\n</div>\n", styles: ["@keyframes _mat-menu-enter{0%{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}@keyframes _mat-menu-exit{0%{opacity:1}to{opacity:0}}.natural-dropdown-container{display:flex;flex-direction:column;animation:_mat-menu-enter .12s cubic-bezier(0,0,.2,1);border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}.natural-dropdown-container.mat-menu-panel-exit-animation{animation:_mat-menu-exit .1s 25ms linear forwards}\n"] }]
+        }] });
 
 class NaturalDropdownRef {
     dropdownContainer;
@@ -2965,8 +2924,6 @@ class NaturalDropdownService {
         const containerRef = overlayRef.attach(containerPortal);
         const dropdownContainer = containerRef.instance;
         const dropdownRef = new NaturalDropdownRef(dropdownContainer, component, customProviders, this.injector, containerRef);
-        // Start animation that shows menu
-        dropdownContainer.startAnimation();
         const close = () => {
             if (dropdownRef.componentInstance.isValid() && dropdownRef.componentInstance.isDirty()) {
                 dropdownRef.close({