@postnord/web-components/cjs/index-vOySuOUW.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

var index = require('./index-DWu-2oJc.js');
var index$1 = require('./index.cjs.js');

/** Import the State and functions needed to easily animate the height of an element. */
function animateHeightFactory(Base) {
    const AnimateHeightMixin = class extends Base {
        constructor(hostRef) {
            super();
            index.registerInstance(this, hostRef);
        }
        animation;
        animationDurationDefault = 400;
        animationDuration = this.animationDurationDefault;
        isClosing = false;
        isExpanding = false;
        animateDropdown(element, open, startHeight, endHeight) {
            this.cancelAnimations();
            this.setAnimationDuration();
            element.dataset.moving = '';
            this.animation = element.animate({
                height: [startHeight, endHeight],
            }, {
                duration: this.animationDuration,
                easing: 'cubic-bezier(0.6, 0, 0.2, 1)',
            });
            this.animation.onfinish = () => this.animationFinish(element);
            this.animation.oncancel = () => (open ? (this.isExpanding = false) : (this.isClosing = false));
        }
        /** Open the dropdown by assigning the HTML element you want to animate. */
        openDropdown(element, heightOverride) {
            const { clientHeight, scrollHeight } = element;
            const height = this.isClosing ? clientHeight : 0;
            element.style.height = `${scrollHeight}px`;
            this.isExpanding = true;
            this.animateDropdown(element, true, `${height}px`, `${heightOverride || element.scrollHeight}px`);
        }
        /** Close the dropdown by assigning the HTML element you want to animate. */
        closeDropdown(element, heightOverride) {
            const { scrollHeight, clientHeight } = element;
            const height = this.isExpanding ? clientHeight : scrollHeight;
            element.style.height = `0px`;
            this.isClosing = true;
            this.animateDropdown(element, false, `${heightOverride || height}px`, `0px`);
        }
        animationFinish(element) {
            this.cancelAnimations();
            element.style.height = this.isClosing ? '0px' : '';
            delete element.dataset.moving;
            this.isClosing = false;
            this.isExpanding = false;
        }
        cancelAnimations() {
            if (this.animation)
                this.animation.cancel();
        }
        setAnimationDuration() {
            if (index$1.reduceMotion())
                this.animationDuration = 0;
            else
                this.animationDuration = this.animationDurationDefault;
        }
        isMoving() {
            return this.isClosing || this.isExpanding;
        }
    };
    return AnimateHeightMixin;
}

exports.animateHeightFactory = animateHeightFactory;