@postnord/web-components
Version:
PostNord Web Components
70 lines (67 loc) • 2.53 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { r as registerInstance } from './index-C247oTEA.js';
import { reduceMotion } from './index.js';
const animateHeightFactory = Base => {
const A = class extends Base {
constructor(hostRef) {
super();
registerInstance(this, hostRef);
}
animation;
animationDurationDefault = 400;
animationDuration = this.animationDurationDefault;
isClosing = false;
isExpanding = false;
animateDropdown(element, open, startHeight, endHeight) {
this.cancelAnimations();
if (reduceMotion())
this.animationDuration = 0;
else
this.animationDuration = this.animationDurationDefault;
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));
}
openDropdown(element) {
const { clientHeight, scrollHeight } = element;
const height = this.isClosing ? clientHeight : 0;
element.style.height = `${scrollHeight}px`;
this.isExpanding = true;
this.animateDropdown(element, true, `${height}px`, `${element.scrollHeight}px`);
}
closeDropdown(element) {
const { scrollHeight, clientHeight } = element;
const height = this.isExpanding ? clientHeight : scrollHeight;
element.style.height = `0px`;
this.isClosing = true;
this.animateDropdown(element, false, `${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();
}
isMoving() {
return this.isClosing || this.isExpanding;
}
};
return A;
};
export { animateHeightFactory as a };
//# sourceMappingURL=index-DAYH3fRH.js.map
//# sourceMappingURL=index-DAYH3fRH.js.map