@finastra/skeleton
Version:
Skeleton Web Component
62 lines • 2.05 kB
JavaScript
import { __decorate } from "tslib";
import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './styles.css';
/**
* @cssprop [--fds-skeleton-width=162px] - Height of the skeleton
* @cssprop [--fds-skeleton-height=162px]- Width of the skeleton
* @cssprop [--fds-skeleton-placeholder-color=var(--fds-on-surface-medium)]- Color of placeholder.
* @cssprop [--fds-skeleton-background=var(--fds-surface-selected)] - Background color of the skeleton.
*
* @attr {string} [height] - Height of the skeleton
* @attr {string} [width] - Width of the skeleton
* @attr {circle|text|rectangle} [type=text] - Define the type of skeleton
* @attr {h1|h2|h3|h4|h5|h6|small|p} [size=p] - Define the size of skeleton
*/
let Skeleton = class Skeleton extends LitElement {
constructor() {
super(...arguments);
this.type = 'text';
this.size = 'p';
}
connectedCallback() {
super.connectedCallback();
this.updateWidth();
this.updateHeight();
}
willUpdate(_changedProperties) {
if (_changedProperties.has('width'))
this.updateWidth();
if (_changedProperties.has('height'))
this.updateHeight();
}
updateWidth() {
if (this.width)
this.style.setProperty('width', this.width);
}
updateHeight() {
if (this.height)
this.style.setProperty('height', this.height);
}
render() {
return html ``;
}
};
Skeleton.styles = styles;
__decorate([
property({ type: String, reflect: true })
], Skeleton.prototype, "type", void 0);
__decorate([
property({ type: String, reflect: true })
], Skeleton.prototype, "size", void 0);
__decorate([
property({ type: String })
], Skeleton.prototype, "width", void 0);
__decorate([
property({ type: String })
], Skeleton.prototype, "height", void 0);
Skeleton = __decorate([
customElement('fds-skeleton')
], Skeleton);
export { Skeleton };
//# sourceMappingURL=skeleton.js.map