ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
33 lines (32 loc) • 1.88 kB
JavaScript
import { a as r, n, o as s, r as i, t as o } from "./utils-D1iZnChu.js";
import { i as l } from "./factory-ZNhcQ4tf.js";
import { a as h, n as d } from "./ssr-DSGwPtEd.js";
var u = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}@keyframes skeleton{0%{transform:translate(-37.5%)}to{transform:translate(37.5%)}}.ran-skeleton{position:relative;z-index:0;overflow:hidden;background:0 0;width:100%;height:var(--ran-skeleton-height, 16px);background:var(--ran-skeleton-background, var(--ran-gray-alpha-200, rgba(0, 0, 0, .06)));border-radius:var(--ran-skeleton-border-radius, var(--ran-radius-sm, 6px))}.ran-skeleton:after{position:absolute;top:0;inset-inline-end:-150%;bottom:0;inset-inline-start:-150%;background:var(--ran-skeleton-shimmer, linear-gradient(90deg, var(--ran-gray-alpha-200, rgba(0, 0, 0, .06)) 25%, var(--ran-gray-alpha-500, rgba(0, 0, 0, .15)) 37%, var(--ran-gray-alpha-200, rgba(0, 0, 0, .06)) 63%));animation-name:skeleton;animation-duration:var(--ran-skeleton-animation-duration, 1.4s);animation-timing-function:ease;animation-iteration-count:infinite;content:""}', m = class extends d {
_div;
_shadowDom;
static get observedAttributes() {
return ["sheet"];
}
constructor() {
super(), this._shadowDom = n(this, u), this._div = o(this._shadowDom, ".ran-skeleton", () => l().class("ran-skeleton").build());
}
get sheet() {
return i(this, "sheet");
}
set sheet(t) {
r(this, "sheet", t);
}
handlerExternalCss = () => {
s(this, this._shadowDom, "sheet", null, this.sheet);
};
connectedCallback() {
this.handlerExternalCss();
}
attributeChangedCallback(t, e, a) {
e !== a && t === "sheet" && this.handlerExternalCss();
}
};
h("r-skeleton", m);
export {
m as t
};