v4web-components
Version:
Stencil Component Starter
39 lines (35 loc) • 2.47 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
const labDsSkeletonCss = ".v4-skeleton-square{min-height:var(--lab-ds-semantic-placeholder-size-l);max-height:var(--lab-ds-semantic-placeholder-size-l);background-color:var(--lab-ds-semantic-color-bg-cloudy);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);position:relative;overflow:hidden}.v4-skeleton-circle{position:relative;overflow:hidden;display:flex;aspect-ratio:1/1;min-height:var(--lab-ds-semantic-placeholder-size-xxs);max-height:var(--lab-ds-semantic-placeholder-size-xxl);min-width:var(--lab-ds-semantic-placeholder-size-xxs);max-width:var(--lab-ds-semantic-placeholder-size-xxl);background-color:var(--lab-ds-semantic-color-bg-cloudy);border-radius:var(--lab-ds-semantic-selectable-border-radius-pill)}.v4-skeleton-circle::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #ffffffb1 50%, rgba(0, 0, 0, 0) 100%);animation:shimmer 3s infinite;animation-timing-function:linear;content:''}.v4-skeleton-square::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #ffffffdd 50%, rgba(0, 0, 0, 0) 100%);animation:shimmer 3s infinite;animation-timing-function:linear;content:''}@keyframes shimmer{100%{transform:translateX(100%)}}";
const LabDsSkeleton = /*@__PURE__*/ proxyCustomElement(class LabDsSkeleton extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.type = 'square';
this.width = '100%';
this.height = '100%';
}
render() {
return (h("div", null, h("div", { style: { width: this.width, height: this.height }, class: `${this.type === 'square' ? 'v4-skeleton-square' : 'v4-skeleton-circle'}` })));
}
static get style() { return labDsSkeletonCss; }
}, [1, "lab-ds-skeleton", {
"type": [1],
"width": [1],
"height": [1]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lab-ds-skeleton"];
components.forEach(tagName => { switch (tagName) {
case "lab-ds-skeleton":
if (!customElements.get(tagName)) {
customElements.define(tagName, LabDsSkeleton);
}
break;
} });
}
export { LabDsSkeleton as L, defineCustomElement as d };
//# sourceMappingURL=lab-ds-skeleton2.js.map