@salla.sa/twilight-components
Version:
Salla Web Component
54 lines (50 loc) • 1.67 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
const sallaSkeletonCss = ":host{display:block}";
const SallaSkeleton = /*@__PURE__*/ proxyCustomElement(class SallaSkeleton extends HTMLElement {
constructor() {
super();
this.__registerHost();
/**
* Set the shape type of the skeleton is it circle or normal
*/
this.type = 'normal';
/**
* Set the skeleton width
*/
this.width = '100%';
/**
* Set the skeleton height
*/
this.height = '100%';
}
render() {
const classes = {
's-skeleton-item': true,
's-skeleton-item-circular': this.type == 'circle',
};
return (h(Host, { key: '0d85a5f753c250b1acacb0dea809879a549d8d12', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: '80c3b2555be6c0fef7794bb184c919d4be2bdf24', class: classes }, "\u00A0")));
}
static get style() { return sallaSkeletonCss; }
}, [0, "salla-skeleton", {
"type": [1],
"width": [1],
"height": [1]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-skeleton"];
components.forEach(tagName => { switch (tagName) {
case "salla-skeleton":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaSkeleton);
}
break;
} });
}
defineCustomElement();
export { SallaSkeleton as S, defineCustomElement as d };