@zywave/zui-bundle
Version:
ZUI, out of the box, provides ES modules with bare path modifiers (e.g. `import '@zywave/zui-foo-bar'`). This is great as that's the way browsers are _going_, but they aren't there quite yet. Tooling exists to help solve this problem like webpack or rollu
2 lines (1 loc) • 4.57 kB
JavaScript
import{n as e,f as t,i as r,Z as i,k as o}from"./_9c1b2703.js";function n(t){return e({...t,state:!0,attribute:!1})}function a(e){return(r,i)=>{const{slot:o}=e??{},n="slot"+(o?`[name=${o}]`:":not([name])");return t(r,i,{get(){const t=this.renderRoot?.querySelector(n);return t?.assignedNodes(e)??[]}})}}const s={xxsmall:"30em",xsmall:"45em",small:"60em",medium:"64em",large:"80em",xlarge:"120em"},l=r`:host .container{position:relative;display:inline-block;width:var(--zui-spinner-size,1.75rem);height:var(--zui-spinner-size,1.75rem);animation:container-rotate 1568ms linear infinite;direction:ltr}@keyframes container-rotate{100%{transform:rotate(360deg)}}:host .spinner-layer{position:absolute;width:100%;height:100%;white-space:nowrap;color:var(--zui-spinner-color,var(--zui-blue));animation:fill-unfill-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite}@keyframes fill-unfill-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}:host .spinner-layer::after{position:absolute;top:0;left:45%;content:"";width:10%;border-width:var(--zui-spinner-stroke-width,.1875rem);border-radius:50%;border-top-style:solid}:host .circle-clipper{position:relative;display:inline-block;width:50%;height:100%;overflow:hidden}:host .circle-clipper .circle{position:absolute;top:0;bottom:0;width:200%;border-width:var(--zui-spinner-stroke-width,.1875rem);border-style:solid;border-radius:50%;animation:left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite;border-bottom-color:transparent!important;box-sizing:border-box}:host .circle-clipper.left .circle{left:0;transform:rotate(129deg);border-right-color:transparent!important}@keyframes left-spin{0%{transform:rotate(130deg)}50%{transform:rotate(-5deg)}100%{transform:rotate(130deg)}}:host .circle-clipper.right .circle{left:-100%;animation-name:right-spin;transform:rotate(-129deg);border-left-color:transparent!important}@keyframes right-spin{0%{transform:rotate(-130deg)}50%{transform:rotate(5deg)}100%{transform:rotate(-130deg)}}:host(:not([active])) .container{display:none}`;var c=function(e,t,r,i){var o,n=arguments.length,a=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(n<3?o(a):n>3?o(t,r,a):o(t,r))||a);return n>3&&a&&Object.defineProperty(t,r,a),a};class p extends i{constructor(){super(...arguments),this.active=!1,this.alt="active"}static get styles(){return[super.styles,l]}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-label",this.alt)}render(){return o`<div class="container"><div class="spinner-layer"><div class="circle-clipper left"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div>`}}c([e({type:Boolean,reflect:!0})],p.prototype,"active",void 0),c([e({type:String,reflect:!0})],p.prototype,"alt",void 0),customElements.define("zui-spinner",p);const d=r`:host{position:absolute;top:0;left:0;width:100%;height:100%}:host .spinner-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:none;opacity:0;opacity:var(--zui-spinner-overlay-opacity,1);z-index:var(--zui-spinner-z-index,8000);flex-direction:column;justify-content:center;align-items:center;overflow-x:hidden;background-color:var(--zui-spinner-overlay-color,#fff);transition:opacity var(--zui-spinner-overlay-transition,.5s);pointer-events:auto}:host([active]) .spinner-overlay{display:flex;opacity:var(--zui-spinner-overlay-opacity,1);transition:opacity var(--zui-spinner-overlay-transition,.5s)}`;var f=function(e,t,r,i){var o,n=arguments.length,a=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(n<3?o(a):n>3?o(t,r,a):o(t,r))||a);return n>3&&a&&Object.defineProperty(t,r,a),a};class u extends i{constructor(){super(...arguments),this.active=!1,this.alt="active"}static get styles(){return[super.styles,d]}render(){return o`<div class="spinner-overlay"><zui-spinner class="spinner" ?active="${this.active}" alt="${this.alt}"></zui-spinner><slot name="loading-text"></slot></div>`}}f([e({type:Boolean,reflect:!0})],u.prototype,"active",void 0),f([e({type:String,reflect:!0})],u.prototype,"alt",void 0),customElements.define("zui-spinner-overlay",u);export{a as n,n as r,s};