@microsoft/windows-admin-center-sdk/core/data/animation.d.ts.map

Microsoft - Windows Admin Center Shell

{"version":3,"sources":["../../../packages/core/data/animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAY,MAAM,MAAM,CAAC;AAG5C;;GAEG;AACH,oBAAY,QAAQ;IAChB,EAAE,MAAM;IACR,EAAE,MAAM;IACR,EAAE,MAAM;IACR,EAAE,MAAM;IACR,EAAE,MAAM;CACX;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC7B;;OAEG;IACH,cAAc,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAElC;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHtB,CAAC;AAEF;;GAEG;AACH,qBAAa,QAAQ;IACjB;;;;;;OAMG;WACW,OAAO,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,OAAO,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC;IAiC7F;;;;;;;OAOG;WACW,aAAa,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,GAAE,OAAe,GAAG,UAAU,CAAC,IAAI,CAAC;IAerH;;;;;;;OAOG;WACW,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,GAAE,OAAe,GAAG,UAAU,CAAC,IAAI,CAAC;IAetH;;;;;;;OAOG;WACW,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,GAAE,OAAe,GAAG,UAAU,CAAC,IAAI,CAAC;IAetH;;;;;;;OAOG;WACW,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,GAAE,OAAe,GAAG,UAAU,CAAC,IAAI,CAAC;CAc1H","file":"animation.d.ts","sourcesContent":["import { Observable, Observer } from 'rxjs';\r\nimport { mergeMap } from 'rxjs/operators';\r\n\r\n/**\r\n * The duration in milliseconds (ms) of an animation.\r\n */\r\nexport enum Duration {\r\n    Xs = 100,\r\n    Sm = 167,\r\n    Md = 267,\r\n    Lg = 367,\r\n    Xl = 467\r\n}\r\n\r\n/**\r\n * The options for animating an element.\r\n */\r\nexport interface AnimationOptions {\r\n    /**\r\n     * The animation CSS class(es) for animating an element.\r\n     */\r\n    animationClass: string | string[];\r\n\r\n    /**\r\n     * The duration of an animation in milliseconds (ms).\r\n     */\r\n    duration: Duration;\r\n\r\n    /**\r\n     * Whether to remove the animation CSS class(es) after the animation has completed.\r\n     */\r\n    removeClass?: boolean;\r\n}\r\n\r\n/**\r\n * The available animation CSS classes and associated durations in milliseconds (MS).\r\n */\r\nexport const animations = {\r\n    slide: {\r\n        in: {\r\n            right: {\r\n                xs: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-right-xs', duration: Duration.Xs },\r\n                sm: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-right-sm', duration: Duration.Sm },\r\n                md: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-right-md', duration: Duration.Md },\r\n                xl: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-right-xl', duration: Duration.Xl }\r\n            },\r\n            left: {\r\n                xs: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-left-xs', duration: Duration.Xs },\r\n                sm: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-left-sm', duration: Duration.Sm },\r\n                md: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-left-md', duration: Duration.Md },\r\n                xl: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-left-xl', duration: Duration.Xl }\r\n            },\r\n            up: {\r\n                xs: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-up-xs', duration: Duration.Xs },\r\n                sm: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-up-sm', duration: Duration.Sm },\r\n                md: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-up-md', duration: Duration.Md },\r\n                xl: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-up-xl', duration: Duration.Xl }\r\n            },\r\n            down: {\r\n                xs: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-down-xs', duration: Duration.Xs },\r\n                sm: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-down-sm', duration: Duration.Sm },\r\n                md: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-down-md', duration: Duration.Md },\r\n                xl: <AnimationOptions>{ animationClass: 'sme-animation-slide-in-down-xl', duration: Duration.Xl }\r\n            }\r\n        },\r\n        out: {\r\n            right: {\r\n                xs: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-right-xs', duration: Duration.Xs },\r\n                sm: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-right-sm', duration: Duration.Sm },\r\n                md: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-right-md', duration: Duration.Md },\r\n                xl: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-right-xl', duration: Duration.Xl }\r\n            },\r\n            left: {\r\n                xs: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-left-xs', duration: Duration.Xs },\r\n                sm: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-left-sm', duration: Duration.Sm },\r\n                md: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-left-md', duration: Duration.Md },\r\n                xl: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-left-xl', duration: Duration.Xl }\r\n            },\r\n            up: {\r\n                xs: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-up-xs', duration: Duration.Xs },\r\n                sm: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-up-sm', duration: Duration.Sm },\r\n                md: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-up-md', duration: Duration.Md },\r\n                xl: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-up-xl', duration: Duration.Xl }\r\n            },\r\n            down: {\r\n                xs: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-down-xs', duration: Duration.Xs },\r\n                sm: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-down-sm', duration: Duration.Sm },\r\n                md: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-down-md', duration: Duration.Md },\r\n                xl: <AnimationOptions>{ animationClass: 'sme-animation-slide-out-down-xl', duration: Duration.Xl }\r\n            }\r\n        }\r\n    },\r\n    fade: {\r\n        in: {\r\n            xs: <AnimationOptions>{ animationClass: 'sme-animation-fade-in-xs', duration: Duration.Xs },\r\n            sm: <AnimationOptions>{ animationClass: 'sme-animation-fade-in-sm', duration: Duration.Sm },\r\n            md: <AnimationOptions>{ animationClass: 'sme-animation-fade-in-md', duration: Duration.Md },\r\n            lg: <AnimationOptions>{ animationClass: 'sme-animation-fade-in-lg', duration: Duration.Lg },\r\n            xl: <AnimationOptions>{ animationClass: 'sme-animation-fade-in-xl', duration: Duration.Xl }\r\n        },\r\n        out: {\r\n            xs: <AnimationOptions>{ animationClass: 'sme-animation-fade-out-xs', duration: Duration.Xs },\r\n            sm: <AnimationOptions>{ animationClass: 'sme-animation-fade-out-sm', duration: Duration.Sm },\r\n            md: <AnimationOptions>{ animationClass: 'sme-animation-fade-out-md', duration: Duration.Md },\r\n            lg: <AnimationOptions>{ animationClass: 'sme-animation-fade-out-lg', duration: Duration.Lg },\r\n            xl: <AnimationOptions>{ animationClass: 'sme-animation-fade-out-xl', duration: Duration.Xl }\r\n        }\r\n    },\r\n    scale: {\r\n        in: {\r\n            up: {\r\n                sm: <AnimationOptions>{ animationClass: 'sme-animation-scale-in-up-sm', duration: Duration.Sm },\r\n                neutral: <AnimationOptions>{ animationClass: 'sme-animation-scale-in-up-neutral', duration: Duration.Sm },\r\n                lg: <AnimationOptions>{ animationClass: 'sme-animation-scale-in-up-lg', duration: Duration.Sm }\r\n            },\r\n            down: {\r\n                sm: <AnimationOptions>{ animationClass: 'sme-animation-scale-in-down-sm' },\r\n                neutral: <AnimationOptions>{ animationClass: 'sme-animation-scale-in-down-neutral' },\r\n                lg: <AnimationOptions>{ animationClass: 'sme-animation-scale-in-down-lg' }\r\n            }\r\n        },\r\n        out: {\r\n            up: {\r\n                sm: <AnimationOptions>{ animationClass: 'sme-animation-scale-out-up-sm' },\r\n                neutral: <AnimationOptions>{ animationClass: 'sme-animation-scale-out-up-neutral' },\r\n                lg: <AnimationOptions>{ animationClass: 'sme-animation-scale-out-up-lg' }\r\n            },\r\n            down: {\r\n                sm: <AnimationOptions>{ animationClass: 'sme-animation-scale-out-down-sm' },\r\n                neutral: <AnimationOptions>{ animationClass: 'sme-animation-scale-out-down-neutral' },\r\n                lg: <AnimationOptions>{ animationClass: 'sme-animation-scale-out-down-lg' }\r\n            }\r\n        }\r\n    },\r\n    transition: {\r\n        height: {\r\n            xs: <AnimationOptions>{ animationClass: 'sme-animation-transition-height-xs', duration: Duration.Xs },\r\n            sm: <AnimationOptions>{ animationClass: 'sme-animation-transition-height-sm', duration: Duration.Sm },\r\n            md: <AnimationOptions>{ animationClass: 'sme-animation-transition-height-md', duration: Duration.Md },\r\n            lg: <AnimationOptions>{ animationClass: 'sme-animation-transition-height-lg', duration: Duration.Lg },\r\n            xl: <AnimationOptions>{ animationClass: 'sme-animation-transition-height-xl', duration: Duration.Xl }\r\n        },\r\n        width: {\r\n            xs: <AnimationOptions>{ animationClass: 'sme-animation-transition-width-xs', duration: Duration.Xs },\r\n            sm: <AnimationOptions>{ animationClass: 'sme-animation-transition-width-sm', duration: Duration.Sm },\r\n            md: <AnimationOptions>{ animationClass: 'sme-animation-transition-width-md', duration: Duration.Md },\r\n            lg: <AnimationOptions>{ animationClass: 'sme-animation-transition-width-lg', duration: Duration.Lg },\r\n            xl: <AnimationOptions>{ animationClass: 'sme-animation-transition-width-xl', duration: Duration.Xl }\r\n        }\r\n    },\r\n    rotate: {\r\n        left: {\r\n            md: <AnimationOptions>{ animationClass: 'sme-animation-rotate-left-md', duration: Duration.Md }\r\n        },\r\n        right: {\r\n            md: <AnimationOptions>{ animationClass: 'sme-animation-rotate-right-md', duration: Duration.Md }\r\n        }\r\n    }\r\n};\r\n\r\n/**\r\n * A utility class for animating HTML elements.\r\n */\r\nexport class Animator {\r\n    /**\r\n     * Animates a HTML element.\r\n     *\r\n     * @param element The HTML element to animate.\r\n     * @param options The options to animate the element with.\r\n     * @returns A void observable for the animation event.\r\n     */\r\n    public static animate(element: HTMLElement, ...options: AnimationOptions[]): Observable<void> {\r\n        if (MsftSme.isNullOrUndefined(options) || options.length === 0) {\r\n            throw new Error(`animate(...) called without an 'options' parameter.`);\r\n        }\r\n\r\n        const currentOptions = options.splice(0)[0];\r\n        const classes = Array.isArray(currentOptions.animationClass) ? currentOptions.animationClass : [currentOptions.animationClass];\r\n        element.classList.add(...classes);\r\n\r\n        const currentObservable = new Observable(\r\n            (observer: Observer<void>) => {\r\n                const timeout = setTimeout(\r\n                    () => {\r\n                        if (currentOptions.removeClass) {\r\n                            element.classList.remove(...classes);\r\n                        }\r\n\r\n                        observer.next(null);\r\n                        observer.complete();\r\n                    },\r\n                    currentOptions.duration);\r\n\r\n                return () => clearTimeout(timeout);\r\n            }\r\n        );\r\n\r\n        if (options.length > 0) {\r\n            return currentObservable.pipe(mergeMap(() => this.animate(element, ...options)));\r\n        }\r\n\r\n        return currentObservable;\r\n    }\r\n\r\n    /**\r\n     * Animates a HTML element to slide in to the left.\r\n     *\r\n     * @param element The HTML element to animate.\r\n     * @param duration The duration of the animation.\r\n     * @param removeClass Whether to remove the animation CSS class from the element once the animation completes.\r\n     * @returns A void observable for the animation event.\r\n     */\r\n    public static slideInToLeft(element: HTMLElement, duration: Duration, removeClass: boolean = false): Observable<void> {\r\n        switch (duration) {\r\n            case Duration.Xs:\r\n                return this.animate(element, { ...animations.slide.in.left.xs, removeClass: removeClass });\r\n            case Duration.Sm:\r\n                return this.animate(element, { ...animations.slide.in.left.sm, removeClass: removeClass });\r\n            case Duration.Md:\r\n                return this.animate(element, { ...animations.slide.in.left.md, removeClass: removeClass });\r\n            case Duration.Xl:\r\n                return this.animate(element, { ...animations.slide.in.left.xl, removeClass: removeClass });\r\n            default:\r\n                return this.animate(element, { ...animations.slide.in.left.md, removeClass: removeClass });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Animates a HTML element to slide in to the right.\r\n     *\r\n     * @param element The HTML element to animate.\r\n     * @param duration The duration of the animation.\r\n     * @param removeClass Whether to remove the animation CSS class from the element once the animation completes.\r\n     * @returns A void observable for the animation event.\r\n     */\r\n    public static slideInToRight(element: HTMLElement, duration: Duration, removeClass: boolean = false): Observable<void> {\r\n        switch (duration) {\r\n            case Duration.Xs:\r\n                return this.animate(element, { ...animations.slide.in.right.xs, removeClass: removeClass });\r\n            case Duration.Sm:\r\n                return this.animate(element, { ...animations.slide.in.right.sm, removeClass: removeClass });\r\n            case Duration.Md:\r\n                return this.animate(element, { ...animations.slide.in.right.md, removeClass: removeClass });\r\n            case Duration.Xl:\r\n                return this.animate(element, { ...animations.slide.in.right.xl, removeClass: removeClass });\r\n            default:\r\n                return this.animate(element, { ...animations.slide.in.right.md, removeClass: removeClass });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Animates a HTML element to slide out to the left.\r\n     *\r\n     * @param element The HTML element to animate.\r\n     * @param duration The duration of the animation.\r\n     * @param removeClass Whether to remove the animation CSS class from the element once the animation completes.\r\n     * @returns A void observable for the animation event.\r\n     */\r\n    public static slideOutToLeft(element: HTMLElement, duration: Duration, removeClass: boolean = false): Observable<void> {\r\n        switch (duration) {\r\n            case Duration.Xs:\r\n                return this.animate(element, { ...animations.slide.out.left.xs, removeClass: removeClass });\r\n            case Duration.Sm:\r\n                return this.animate(element, { ...animations.slide.out.left.sm, removeClass: removeClass });\r\n            case Duration.Md:\r\n                return this.animate(element, { ...animations.slide.out.left.md, removeClass: removeClass });\r\n            case Duration.Xl:\r\n                return this.animate(element, { ...animations.slide.out.left.xl, removeClass: removeClass });\r\n            default:\r\n                return this.animate(element, { ...animations.slide.out.left.md, removeClass: removeClass });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Animates a HTML element to slide out to the right.\r\n     *\r\n     * @param element The HTML element to animate.\r\n     * @param duration The duration of the animation.\r\n     * @param removeClass Whether to remove the animation CSS class from the element once the animation completes.\r\n     * @returns A void observable for the animation event.\r\n     */\r\n    public static slideOutToRight(element: HTMLElement, duration: Duration, removeClass: boolean = false): Observable<void> {\r\n        switch (duration) {\r\n            case Duration.Xs:\r\n                return this.animate(element, { ...animations.slide.out.right.xs, removeClass: removeClass });\r\n            case Duration.Sm:\r\n                return this.animate(element, { ...animations.slide.out.right.sm, removeClass: removeClass });\r\n            case Duration.Md:\r\n                return this.animate(element, { ...animations.slide.out.right.md, removeClass: removeClass });\r\n            case Duration.Xl:\r\n                return this.animate(element, { ...animations.slide.out.right.xl, removeClass: removeClass });\r\n            default:\r\n                return this.animate(element, { ...animations.slide.out.right.md, removeClass: removeClass });\r\n        }\r\n    }\r\n}\r\n"]}