@aqua-ds/web-components
Version:
AquaDS Web Components
44 lines (40 loc) • 2.61 kB
JavaScript
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
const aqCardCss = ".aq-card{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;border:var(--spacing-size-basic) solid var(--color-paper-light);border-radius:var(--spacing-size-minor);background-color:var(--color-white);-webkit-transition:-webkit-filter 200ms;transition:-webkit-filter 200ms;transition:filter 200ms;transition:filter 200ms, -webkit-filter 200ms}.aq-card img{width:100%;border-radius:var(--spacing-size-minor) var(--spacing-size-minor) 0 0}.aq-card:hover{-webkit-filter:drop-shadow(0px var(--spacing-size-small) var(--spacing-size-minor) rgba(19, 19, 22, 0.15));filter:drop-shadow(0px var(--spacing-size-small) var(--spacing-size-minor) rgba(19, 19, 22, 0.15))}.aq-card:active,.aq-card:focus,.aq-card:focus-within{-webkit-box-shadow:var(--shadow-focus);box-shadow:var(--shadow-focus)}";
const AqCard = /*@__PURE__*/ proxyCustomElement(class AqCard extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.img = '';
this.lazyImg = 'https://resources.masivapp.com/img/general/default_image.svg';
this.localImage = '';
this.isLoaded = false;
this.handleImageLoad = () => {
this.isLoaded = true;
};
}
render() {
return (h(Host, { key: 'd998bd70376ca2c89f848ccc17c6bc2cbac5224e' }, h("div", { key: '1fc1265c25fe11723cbb113aa738c71c125d1d74', class: "aq-card", tabindex: "0" }, !!this.img && !this.isLoaded && h("img", { key: '96abc1d3bc8cf99ce7dc2b733607724e6075a1d7', src: this.lazyImg, alt: "image-card" }), !!this.img && h("img", { key: '2600e57bdeff1f3678d4887f8053b44d87b934d6', src: this.img, onLoad: this.handleImageLoad, alt: "image-card", style: { display: this.isLoaded ? 'block' : 'none' } }), h("slot", { key: '049bbca1c644709921f28d67816c05588fd89eb2' }))));
}
static get style() { return aqCardCss; }
}, [260, "aq-card", {
"img": [1],
"lazyImg": [1, "lazy-img"],
"localImage": [32],
"isLoaded": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-card"];
components.forEach(tagName => { switch (tagName) {
case "aq-card":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqCard);
}
break;
} });
}
export { AqCard as A, defineCustomElement as d };