@aqua-ds/web-components
Version:
AquaDS Web Components
59 lines (55 loc) • 3.29 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
const aqTransitionCss = ".aq-transition{display:inline-block;width:100%}.aq-transition__fade{-webkit-transition:opacity var(--transition-duration, 0.3s) ease;transition:opacity var(--transition-duration, 0.3s) ease}.aq-transition__slide{overflow:hidden;-webkit-transition:max-height var(--transition-duration, 0.3s) ease, opacity var(--transition-duration, 0.3s) ease;transition:max-height var(--transition-duration, 0.3s) ease, opacity var(--transition-duration, 0.3s) ease}.aq-transition__collapse{-webkit-transition:opacity var(--transition-duration, 0.3s) ease, -webkit-transform var(--transition-duration, 0.3s) ease;transition:opacity var(--transition-duration, 0.3s) ease, -webkit-transform var(--transition-duration, 0.3s) ease;transition:transform var(--transition-duration, 0.3s) ease, opacity var(--transition-duration, 0.3s) ease;transition:transform var(--transition-duration, 0.3s) ease, opacity var(--transition-duration, 0.3s) ease, -webkit-transform var(--transition-duration, 0.3s) ease}.aq-transition__visible{visibility:visible;opacity:1}.aq-transition__visible.aq-transition__slide{max-height:100%}.aq-transition__visible.aq-transition__collapse{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}.aq-transition__hidden{visibility:hidden;opacity:0}.aq-transition__hidden.aq-transition__slide{max-height:0}.aq-transition__hidden.aq-transition__collapse{max-height:0;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:top;transform-origin:top}";
const AqTransition = /*@__PURE__*/ proxyCustomElement(class AqTransition extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.visible = true;
this.transitionType = 'collapse';
this.duration = '0.3s';
}
async show() {
this.visible = true;
}
async hide() {
this.visible = false;
}
get cssClass() {
return {
'aq-transition': true,
[`aq-transition__${this.transitionType}`]: true,
'aq-transition__visible': this.visible,
'aq-transition__hidden': !this.visible,
};
}
render() {
const cssClass = this.cssClass;
const styles = {
'--transition-duration': this.duration
};
return (h("div", { key: '5e5ed2215d6bf13654597234544bf59b20e5cafa', class: cssClass, style: styles }, h("slot", { key: '2c85f23bf444e85af610720fda565405be292653' })));
}
static get style() { return aqTransitionCss; }
}, [260, "aq-transition", {
"visible": [4],
"transitionType": [1, "transition-type"],
"duration": [1],
"show": [64],
"hide": [64]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-transition"];
components.forEach(tagName => { switch (tagName) {
case "aq-transition":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqTransition);
}
break;
} });
}
export { AqTransition as A, defineCustomElement as d };