finpro
Version:
6 lines (5 loc) • 7.11 kB
JavaScript
import{a as l}from"./chunk-NJQW4VOP.js";import{a as r,b as a,f as s,g as n,h as i}from"./chunk-GBPY57YZ.js";import{a as t}from"./chunk-NZ3RGSR6.js";var p=r`:host{display:inline-block}.spinner{--width:var(--fp-size-2xl);--height:var(--fp-size-2xl);--stroke:var(--fp-color-primary);--fill:var(--fp-color-primary);width:var(--width);height:var(--height);stroke:var(--stroke);fill:var(--fill)}:host([size='5xs']) .spinner{--width:var(--fp-size-5xs);--height:var(--fp-size-5xs)}:host([size='4xs']) .spinner{--width:var(--fp-size-4xs);--height:var(--fp-size-4xs)}:host([size='3xs']) .spinner{--width:var(--fp-size-3xs);--height:var(--fp-size-3xs)}:host([size='2xs']) .spinner{--width:var(--fp-size-2xs);--height:var(--fp-size-2xs)}:host([size='xs']) .spinner{--width:var(--fp-size-xs);--height:var(--fp-size-xs)}:host([size='s']) .spinner{--width:var(--fp-size-s);--height:var(--fp-size-s)}:host([size='m']) .spinner{--width:var(--fp-size-m);--height:var(--fp-size-m)}:host([size='l']) .spinner{--width:var(--fp-size-l);--height:var(--fp-size-l)}:host([size='xl']) .spinner{--width:var(--fp-size-xl);--height:var(--fp-size-xl)}:host([size='2xl']) .spinner{--width:var(--fp-size-2xl);--height:var(--fp-size-2xl)}:host([size='3xl']) .spinner{--width:var(--fp-size-3xl);--height:var(--fp-size-3xl)}:host([size='4xl']) .spinner{--width:var(--fp-size-4xl);--height:var(--fp-size-4xl)}:host([size='5xl']) .spinner{--width:var(--fp-size-5xl);--height:var(--fp-size-5xl)}:host([size='6xl']) .spinner{--width:var(--fp-size-6xl);--height:var(--fp-size-6xl)}:host([size='xxl']) .spinner{--width:var(--fp-size-xxl);--height:var(--fp-size-xxl)}:host([size='2xxl']) .spinner{--width:var(--fp-size-2xxl);--height:var(--fp-size-2xxl)}:host([size='3xxl']) .spinner{--width:var(--fp-size-3xxl);--height:var(--fp-size-3xxl)}:host([size='4xxl']) .spinner{--width:var(--fp-size-4xxl);--height:var(--fp-size-4xxl)}:host([variant='primary']) .spinner{--stroke:var(--fp-color-primary)}:host([variant='secondary']) .spinner{--stroke:var(--fp-color-secondary)}:host([variant='success']) .spinner{--stroke:var(--fp-color-success)}:host([variant='danger']) .spinner{--stroke:var(--fp-color-danger)}:host([variant='primary']) .spinner{--fill:var(--fp-color-primary)}:host([variant='secondary']) .spinner{--fill:var(--fp-color-secondary)}:host([variant='success']) .spinner{--fill:var(--fp-color-success)}:host([variant='danger']) .spinner{--fill:var(--fp-color-danger)}`,o=p;var e=class extends s{constructor(){super(...arguments);this.type="oval";this.size="5xl";this.variant="primary"}static get styles(){return[o]}_handleSvg(){switch(this.type){case"oval":return'<svg width="1.375rem" height="1.375rem" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="var(--fp-color-primary)" class="spinner" role="presentation"><g fill="none" fill-rule="evenodd"><g transform="translate(2.5 2.5)" stroke-width="5"><circle stroke-opacity=".5" cx="16" cy="16" r="16"></circle><path d="M32 16c0-9.94-8.06-16-16-16"><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="1s" repeatCount="indefinite"></animateTransform></path></g></g></svg>';case"bars":return'<svg viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="var(--fp-color-primary)" width="1.375rem" class="spinner" role="presentation"><rect y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="30" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="60" width="15" height="140" rx="6"><animate attributeName="height" begin="0s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="90" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="120" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect></svg>';case"dots":return'<svg width="2.25rem" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="var(--fp-color-primary)" class="spinner" role="presentation"><circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="60" cy="15" r="9" fill-opacity="0.3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate></circle></svg>';default:return'<svg width="1.375rem" height="1.375rem" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="var(--fp-color-primary)" class="spinner" role="presentation"><g fill="none" fill-rule="evenodd"><g transform="translate(2.5 2.5)" stroke-width="5"><circle stroke-opacity=".5" cx="16" cy="16" r="16"></circle><path d="M32 16c0-9.94-8.06-16-16-16"><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="1s" repeatCount="indefinite"></animateTransform></path></g></g></svg>'}}render(){return a`<span class='spinner'>
${l(this._handleSvg())}
</span>
`}};t([i({type:String,reflect:!0})],e.prototype,"type",2),t([i({type:String,reflect:!0})],e.prototype,"size",2),t([i({reflect:!0})],e.prototype,"variant",2),e=t([n("fp-spinner")],e);export{e as a};
//# sourceMappingURL=chunk-WFPQ5NQX.js.map