@nova-ui/bits/esm2022/animations/expand.mjs

SolarWinds Nova Framework

// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to
//  deal in the Software without restriction, including without limitation the
//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
//  sell copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
//  THE SOFTWARE.
import { animate, state, style, transition, trigger, stagger, query, group, } from "@angular/animations";
export const expand = trigger("expandedState", [
    state("expanded", style({ height: "*" })),
    state("collapsed", style({ height: 0 })),
    transition("expanded <=> collapsed", [animate("350ms ease-in-out")]),
]);
/**
 * This v2 version of the expand animation respects the animations of elements nested inside the expander's content template.
 *  It is using the special selectors that ngIf and ngFor use on projected content.
 */
export const expandV2 = trigger("expandContent", [
    transition(":enter", [
        group([
            query(":self", [
                style({ height: 0 }),
                animate("350ms ease-in-out", style({ height: "*" })),
            ], { optional: true }),
            query("@*", [
                style({ height: 0 }),
                stagger(10, [
                    animate("250ms ease-in-out", style({ height: "*" })),
                ]),
            ], { optional: true }),
        ]),
    ]),
    transition(":leave", [
        query(":self", [
            style({ height: "*" }),
            animate("350ms ease-in-out", style({ height: 0 })),
        ]),
    ]),
]);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5kLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2FuaW1hdGlvbnMvZXhwYW5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlEQUF5RDtBQUN6RCxFQUFFO0FBQ0YsK0VBQStFO0FBQy9FLDRFQUE0RTtBQUM1RSw4RUFBOEU7QUFDOUUsK0VBQStFO0FBQy9FLDhFQUE4RTtBQUM5RSw0REFBNEQ7QUFDNUQsRUFBRTtBQUNGLDZFQUE2RTtBQUM3RSx1REFBdUQ7QUFDdkQsRUFBRTtBQUNGLDZFQUE2RTtBQUM3RSw0RUFBNEU7QUFDNUUsK0VBQStFO0FBQy9FLDBFQUEwRTtBQUMxRSxpRkFBaUY7QUFDakYsNkVBQTZFO0FBQzdFLGlCQUFpQjtBQUVqQixPQUFPLEVBQ0gsT0FBTyxFQUNQLEtBQUssRUFDTCxLQUFLLEVBQ0wsVUFBVSxFQUNWLE9BQU8sRUFDUCxPQUFPLEVBQ1AsS0FBSyxFQUNMLEtBQUssR0FDUixNQUFNLHFCQUFxQixDQUFDO0FBRTdCLE1BQU0sQ0FBQyxNQUFNLE1BQU0sR0FBRyxPQUFPLENBQUMsZUFBZSxFQUFFO0lBQzNDLEtBQUssQ0FBQyxVQUFVLEVBQUUsS0FBSyxDQUFDLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUM7SUFDekMsS0FBSyxDQUFDLFdBQVcsRUFBRSxLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUN4QyxVQUFVLENBQUMsd0JBQXdCLEVBQUUsQ0FBQyxPQUFPLENBQUMsbUJBQW1CLENBQUMsQ0FBQyxDQUFDO0NBQ3ZFLENBQUMsQ0FBQztBQUVIOzs7R0FHRztBQUNILE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxPQUFPLENBQUMsZUFBZSxFQUFFO0lBQzdDLFVBQVUsQ0FBQyxRQUFRLEVBQUU7UUFDakIsS0FBSyxDQUFDO1lBQ0YsS0FBSyxDQUNELE9BQU8sRUFDUDtnQkFDSSxLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsQ0FBQyxFQUFFLENBQUM7Z0JBQ3BCLE9BQU8sQ0FBQyxtQkFBbUIsRUFBRSxLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLENBQUMsQ0FBQzthQUN2RCxFQUNELEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxDQUNyQjtZQUNELEtBQUssQ0FDRCxJQUFJLEVBQ0o7Z0JBQ0ksS0FBSyxDQUFDLEVBQUUsTUFBTSxFQUFFLENBQUMsRUFBRSxDQUFDO2dCQUNwQixPQUFPLENBQUMsRUFBRSxFQUFFO29CQUNSLE9BQU8sQ0FBQyxtQkFBbUIsRUFBRSxLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLENBQUMsQ0FBQztpQkFDdkQsQ0FBQzthQUNMLEVBQ0QsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLENBQ3JCO1NBQ0osQ0FBQztLQUNMLENBQUM7SUFDRixVQUFVLENBQUMsUUFBUSxFQUFFO1FBQ2pCLEtBQUssQ0FBQyxPQUFPLEVBQUU7WUFDWCxLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLENBQUM7WUFDdEIsT0FBTyxDQUFDLG1CQUFtQixFQUFFLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1NBQ3JELENBQUM7S0FDTCxDQUFDO0NBQ0wsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLy8gwqkgMjAyMiBTb2xhcldpbmRzIFdvcmxkd2lkZSwgTExDLiBBbGwgcmlnaHRzIHJlc2VydmVkLlxuLy9cbi8vIFBlcm1pc3Npb24gaXMgaGVyZWJ5IGdyYW50ZWQsIGZyZWUgb2YgY2hhcmdlLCB0byBhbnkgcGVyc29uIG9idGFpbmluZyBhIGNvcHlcbi8vICBvZiB0aGlzIHNvZnR3YXJlIGFuZCBhc3NvY2lhdGVkIGRvY3VtZW50YXRpb24gZmlsZXMgKHRoZSBcIlNvZnR3YXJlXCIpLCB0b1xuLy8gIGRlYWwgaW4gdGhlIFNvZnR3YXJlIHdpdGhvdXQgcmVzdHJpY3Rpb24sIGluY2x1ZGluZyB3aXRob3V0IGxpbWl0YXRpb24gdGhlXG4vLyAgcmlnaHRzIHRvIHVzZSwgY29weSwgbW9kaWZ5LCBtZXJnZSwgcHVibGlzaCwgZGlzdHJpYnV0ZSwgc3VibGljZW5zZSwgYW5kL29yXG4vLyAgc2VsbCBjb3BpZXMgb2YgdGhlIFNvZnR3YXJlLCBhbmQgdG8gcGVybWl0IHBlcnNvbnMgdG8gd2hvbSB0aGUgU29mdHdhcmUgaXNcbi8vICBmdXJuaXNoZWQgdG8gZG8gc28sIHN1YmplY3QgdG8gdGhlIGZvbGxvd2luZyBjb25kaXRpb25zOlxuLy9cbi8vIFRoZSBhYm92ZSBjb3B5cmlnaHQgbm90aWNlIGFuZCB0aGlzIHBlcm1pc3Npb24gbm90aWNlIHNoYWxsIGJlIGluY2x1ZGVkIGluXG4vLyAgYWxsIGNvcGllcyBvciBzdWJzdGFudGlhbCBwb3J0aW9ucyBvZiB0aGUgU29mdHdhcmUuXG4vL1xuLy8gVEhFIFNPRlRXQVJFIElTIFBST1ZJREVEIFwiQVMgSVNcIiwgV0lUSE9VVCBXQVJSQU5UWSBPRiBBTlkgS0lORCwgRVhQUkVTUyBPUlxuLy8gIElNUExJRUQsIElOQ0xVRElORyBCVVQgTk9UIExJTUlURUQgVE8gVEhFIFdBUlJBTlRJRVMgT0YgTUVSQ0hBTlRBQklMSVRZLFxuLy8gIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFIEFORCBOT05JTkZSSU5HRU1FTlQuIElOIE5PIEVWRU5UIFNIQUxMIFRIRVxuLy8gIEFVVEhPUlMgT1IgQ09QWVJJR0hUIEhPTERFUlMgQkUgTElBQkxFIEZPUiBBTlkgQ0xBSU0sIERBTUFHRVMgT1IgT1RIRVJcbi8vICBMSUFCSUxJVFksIFdIRVRIRVIgSU4gQU4gQUNUSU9OIE9GIENPTlRSQUNULCBUT1JUIE9SIE9USEVSV0lTRSwgQVJJU0lORyBGUk9NLFxuLy8gIE9VVCBPRiBPUiBJTiBDT05ORUNUSU9OIFdJVEggVEhFIFNPRlRXQVJFIE9SIFRIRSBVU0UgT1IgT1RIRVIgREVBTElOR1MgSU5cbi8vICBUSEUgU09GVFdBUkUuXG5cbmltcG9ydCB7XG4gICAgYW5pbWF0ZSxcbiAgICBzdGF0ZSxcbiAgICBzdHlsZSxcbiAgICB0cmFuc2l0aW9uLFxuICAgIHRyaWdnZXIsXG4gICAgc3RhZ2dlcixcbiAgICBxdWVyeSxcbiAgICBncm91cCxcbn0gZnJvbSBcIkBhbmd1bGFyL2FuaW1hdGlvbnNcIjtcblxuZXhwb3J0IGNvbnN0IGV4cGFuZCA9IHRyaWdnZXIoXCJleHBhbmRlZFN0YXRlXCIsIFtcbiAgICBzdGF0ZShcImV4cGFuZGVkXCIsIHN0eWxlKHsgaGVpZ2h0OiBcIipcIiB9KSksXG4gICAgc3RhdGUoXCJjb2xsYXBzZWRcIiwgc3R5bGUoeyBoZWlnaHQ6IDAgfSkpLFxuICAgIHRyYW5zaXRpb24oXCJleHBhbmRlZCA8PT4gY29sbGFwc2VkXCIsIFthbmltYXRlKFwiMzUwbXMgZWFzZS1pbi1vdXRcIildKSxcbl0pO1xuXG4vKipcbiAqIFRoaXMgdjIgdmVyc2lvbiBvZiB0aGUgZXhwYW5kIGFuaW1hdGlvbiByZXNwZWN0cyB0aGUgYW5pbWF0aW9ucyBvZiBlbGVtZW50cyBuZXN0ZWQgaW5zaWRlIHRoZSBleHBhbmRlcidzIGNvbnRlbnQgdGVtcGxhdGUuXG4gKiAgSXQgaXMgdXNpbmcgdGhlIHNwZWNpYWwgc2VsZWN0b3JzIHRoYXQgbmdJZiBhbmQgbmdGb3IgdXNlIG9uIHByb2plY3RlZCBjb250ZW50LlxuICovXG5leHBvcnQgY29uc3QgZXhwYW5kVjIgPSB0cmlnZ2VyKFwiZXhwYW5kQ29udGVudFwiLCBbXG4gICAgdHJhbnNpdGlvbihcIjplbnRlclwiLCBbXG4gICAgICAgIGdyb3VwKFtcbiAgICAgICAgICAgIHF1ZXJ5KFxuICAgICAgICAgICAgICAgIFwiOnNlbGZcIixcbiAgICAgICAgICAgICAgICBbXG4gICAgICAgICAgICAgICAgICAgIHN0eWxlKHsgaGVpZ2h0OiAwIH0pLFxuICAgICAgICAgICAgICAgICAgICBhbmltYXRlKFwiMzUwbXMgZWFzZS1pbi1vdXRcIiwgc3R5bGUoeyBoZWlnaHQ6IFwiKlwiIH0pKSxcbiAgICAgICAgICAgICAgICBdLFxuICAgICAgICAgICAgICAgIHsgb3B0aW9uYWw6IHRydWUgfVxuICAgICAgICAgICAgKSxcbiAgICAgICAgICAgIHF1ZXJ5KFxuICAgICAgICAgICAgICAgIFwiQCpcIixcbiAgICAgICAgICAgICAgICBbXG4gICAgICAgICAgICAgICAgICAgIHN0eWxlKHsgaGVpZ2h0OiAwIH0pLFxuICAgICAgICAgICAgICAgICAgICBzdGFnZ2VyKDEwLCBbXG4gICAgICAgICAgICAgICAgICAgICAgICBhbmltYXRlKFwiMjUwbXMgZWFzZS1pbi1vdXRcIiwgc3R5bGUoeyBoZWlnaHQ6IFwiKlwiIH0pKSxcbiAgICAgICAgICAgICAgICAgICAgXSksXG4gICAgICAgICAgICAgICAgXSxcbiAgICAgICAgICAgICAgICB7IG9wdGlvbmFsOiB0cnVlIH1cbiAgICAgICAgICAgICksXG4gICAgICAgIF0pLFxuICAgIF0pLFxuICAgIHRyYW5zaXRpb24oXCI6bGVhdmVcIiwgW1xuICAgICAgICBxdWVyeShcIjpzZWxmXCIsIFtcbiAgICAgICAgICAgIHN0eWxlKHsgaGVpZ2h0OiBcIipcIiB9KSxcbiAgICAgICAgICAgIGFuaW1hdGUoXCIzNTBtcyBlYXNlLWluLW91dFwiLCBzdHlsZSh7IGhlaWdodDogMCB9KSksXG4gICAgICAgIF0pLFxuICAgIF0pLFxuXSk7XG4iXX0=