finpro/dist/chunk-Q6PFV6NL.js

Design System

import{a as n}from"./chunk-JA3VZI2D.js";import{a as t,b as i,g as d,h as s,i as o,j as l}from"./chunk-GBPY57YZ.js";import{a as e}from"./chunk-NZ3RGSR6.js";var h=t`:host{display:block}.skeleton{--width:100%;--height:var(--fp-size-2xs);--border-radius:var(--fp-border-radius-m);--background-color:var(--fp-color-skeleton);position:relative;display:flex;width:var(--width);height:var(--height);border-radius:var(--border-radius);background-color:var(--background-color);margin-top:var(--fp-size-3xs)}.skeleton::before{content:'';position:absolute;height:100%;width:var(--width);background-color:var(--background-color);border-radius:var(--border-radius)}:host([circle]) .skeleton{--width:var(--fp-size-xxl);--height:var(--fp-size-xxl);--border-radius:var(--fp-border-radius-circle)}:host([radius='xs']) .skeleton{--border-radius:var(--fp-border-radius-xs)}:host([radius='s']) .skeleton{--border-radius:var(--fp-border-radius-s)}:host([radius='m']) .skeleton{--border-radius:var(--fp-border-radius-m)}:host([radius='l']) .skeleton{--border-radius:var(--fp-border-radius-l)}:host([radius='xl']) .skeleton{--border-radius:var(--fp-border-radius-xl)}:host([radius='2xl']) .skeleton{--border-radius:var(--fp-border-radius-2xl)}:host([radius='3xl']) .skeleton{--border-radius:var(--fp-border-radius-3xl)}:host([radius='4xl']) .skeleton{--border-radius:var(--fp-border-radius-4xl)}:host([radius='5xl']) .skeleton{--border-radius:var(--fp-border-radius-5xl)}:host([radius='6xl']) .skeleton{--border-radius:var(--fp-border-radius-6xl)}:host([radius='xxl']) .skeleton{--border-radius:var(--fp-border-radius-xxl)}:host([radius='2xxl']) .skeleton{--border-radius:var(--fp-border-radius-2xxl)}:host([radius='3xxl']) .skeleton{--border-radius:var(--fp-border-radius-3xxl)}:host([radius='4xxl']) .skeleton{--border-radius:var(--fp-border-radius-4xxl)}:host([variant='primary']) .skeleton{--background-color:var(--fp-color-skeleton)}:host([variant='secondary']) .skeleton{--background-color:var(--fp-color-secondary)}:host([variant='success']) .skeleton{--background-color:var(--fp-color-success)}:host([variant='danger']) .skeleton{--background-color:var(--fp-color-danger)}:host([animation]) .skeleton::after{content:'';position:absolute;height:100%;width:100%;border-radius:var(--border-radius);background-color:var(--background-color);background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) var(--background-color);background-size:200% 100%;background-position-x:180%;animation:1s animation ease-in-out infinite}@keyframes animation{to{background-position-x:-20%}}`,u=h;var r=class extends n{constructor(){super(...arguments);this.variant="primary";this.circle=!1;this.radius="xs";this.animation=!1;this._width="100%";this._height="var(--fp-size-2xs)"}static get styles(){return[u]}get width(){return this._width}set width(a){this._width=a,this.updateCssVariable()}get height(){return this._height}set height(a){this._height=a,this.updateCssVariable()}async updateCssVariable(){await this.updateComplete,this.wrapper.style.setProperty("--width",`${this.width}`),this.wrapper.style.setProperty("--height",`${this.height}`)}render(){return i`<div class='skeleton'>
        </div>`}};e([l(".skeleton")],r.prototype,"wrapper",2),e([s({reflect:!0})],r.prototype,"variant",2),e([s({type:Boolean,reflect:!0})],r.prototype,"circle",2),e([s({type:String})],r.prototype,"radius",2),e([s({type:Boolean,reflect:!0})],r.prototype,"animation",2),e([s()],r.prototype,"width",1),e([s()],r.prototype,"height",1),e([o()],r.prototype,"_width",2),e([o()],r.prototype,"_height",2),r=e([d("fp-skeleton")],r);export{r as a};
//# sourceMappingURL=chunk-Q6PFV6NL.js.map