@getflip/swirl-components 0.484.0 → 0.485.1

package/dist/components/swirl-image-grid-item.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Host as o,Fragment as r,transformTag as a}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{d}from"./utils.js";import{d as l}from"./swirl-button2.js";import{d as c}from"./swirl-icon-error2.js";import{d as h}from"./swirl-skeleton-box2.js";import{d as g}from"./swirl-visually-hidden2.js";const m=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.gifStarted=e(this,"gifStarted",7),this.gifStopped=e(this,"gifStopped",7),this.imageError=e(this,"imageError",7),this.imageLoad=e(this,"imageLoad",7),this.gifPauseLabel="Pause GIF playback",this.gifPlayLabel="Continue GIF playback",this.error=!1,this.loaded=!1,this.inViewport=!1,this.gifPaused=!1,this.handleIntersectionEntries=d((i=>{const t=[...i].sort(((i,t)=>i.time-t.time));this.inViewport=t.at(-1).isIntersecting,this.inViewport||(this.loaded=!1)}),250),this.onLoad=()=>{this.error=!1,this.loaded=!0,this.imageLoad.emit()},this.onError=()=>{this.loaded=!0,this.error=!0,this.imageError.emit()},this.playGif=()=>{this.gifPaused=!1,this.computedSrc=this.src,this.gifStarted.emit()},this.handleControlClick=i=>{i.stopImmediatePropagation(),this.gifPaused?this.playGif():this.pauseGif()},this.onImageElementUpdate=i=>{this.img?.removeEventListener("load",this.onLoad),this.img?.removeEventListener("error",this.onError),this.img=i,this.img&&(this.img.addEventListener("load",this.onLoad),this.img.addEventListener("error",this.onError))}}async play(){this.playGif()}async pause(){this.pauseGif()}watchSrcProp(){this.computedSrc=this.src,this.gifPaused=!1}componentWillLoad(){this.computedSrc=this.src}componentDidLoad(){this.setupIntersectionObserver(),this.img?.complete&&(this.loaded=!0)}componentDidRender(){this.img?.complete&&!this.loaded&&(this.loaded=!0)}connectedCallback(){this.computedSrc=this.src}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.computedSrc="",this.img?.removeEventListener("load",this.onLoad),this.img?.removeEventListener("error",this.onError)}setupIntersectionObserver(){"intersecting"===this.loading&&(this.intersectionObserver=new IntersectionObserver((i=>{this.handleIntersectionEntries(i)})),this.intersectionObserver.observe(this.el))}async pauseGif(){const i=this.img,t=await this.readImageFromCanvas(i.src);this.gifPaused=!0,this.computedSrc=t,this.gifStopped.emit()}readImageFromCanvas(i){return new Promise(((t,e)=>{const s=new Image;s.src=i,s.onload=i=>{const e=i.target,s=document.createElement("canvas"),o=s.getContext("2d");s.width=e.width,s.height=e.height,o.drawImage(e,0,0,e.width,e.height),t(s.toDataURL("image/jpeg"))},s.onerror=()=>e()}))}render(){const i=this.interactive?"button":"div",t=this.gifPaused||"intersecting"!==this.loading||this.inViewport,e=Math.min(this.el.parentElement?.children.length,4)??1,a=!!this.el.querySelector('[slot="watermark"]'),d=n("image-grid-item",{"image-grid-item--has-error":this.error,"image-grid-item--has-overlay":this.overlay,"image-grid-item--has-watermark":a,"image-grid-item--loaded":this.loaded,"image-grid-item--gif-paused":this.gifPaused});return s(o,{key:"9bcb38a18f3515fd9716110abdfda5ac2f379e70","data-sibling-count":e,role:"listitem"},s(i,{key:"eaf4bca5b4578cf4e2dcd585a8b98c8487226cb9",class:d,type:this.interactive?"button":void 0},s("div",{key:"edd0daf930ebb9a9c428be89e511bf7ecbe9228d",class:"image-grid-item__background",style:{backgroundImage:t?`url(${this.computedSrc})`:void 0}}),t?s(r,null,s("img",{alt:this.alt,class:"image-grid-item__image",loading:"intersecting"!==this.loading?this.loading:void 0,ref:this.onImageElementUpdate,src:this.computedSrc}),s("span",{class:"image-grid-item__watermark"},s("slot",{name:"watermark"}))):s("div",{class:"image-grid-item__loading-placeholder"},s("swirl-visually-hidden",null,this.alt)),this.showGifControls&&s("swirl-button",{key:"14c75cd6aebd02864b35ebcd6aa1b2672cd2cf07",class:"image-grid-item__gif-control-button",label:this.gifPaused?this.gifPlayLabel:this.gifPauseLabel,icon:"<swirl-icon-gif></swirl-icon-gif>",variant:"on-image",pill:!0,hideLabel:!0,swirlAriaLabel:this.gifPaused?this.gifPlayLabel:this.gifPauseLabel,onClick:this.handleControlClick}),this.loaded&&!this.error&&this.icon&&!this.overlay&&s("div",{key:"cbd38b8334c9b9a501cbbc92cccebf98c56d0eeb",class:"image-grid-item__icon",innerHTML:this.icon}),this.overlay&&s("div",{key:"a53d2d4d814187780cfa6ee8e8bc9f8def99090a",class:"image-grid-item__overlay"},this.overlay),!this.loaded&&s("swirl-skeleton-box",{key:"0e1af762a1dd05a58d798a6330d9f3e06dc28fb6",class:"image-grid-item__skeleton",height:"100%",width:"100%",borderRadius:"none"}),this.loaded&&this.error&&s("div",{key:"f65acbb1b3a17a21d5a5134436cda839977e9c6e",class:"image-grid-item__error"},s("swirl-icon-error",{key:"9bba7ee7bb44ada8e09276a14daa916389846eb4",color:"critical"}))))}get el(){return this}static get watchers(){return{src:[{watchSrcProp:0}]}}static get style(){return':host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:only-child) button.image-grid-item:focus-visible:before,:host(:only-child) button.image-grid-item:focus-visible:after{border-radius:var(--s-border-radius-sm)}:host([data-sibling-count="2"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="2"]:nth-child(1)) button.image-grid-item:focus-visible:after,:host([data-sibling-count="3"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="2"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="2"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm);border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="3"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="3"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(4)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(4)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus{outline:none}button.image-grid-item:focus-visible:before{position:absolute;z-index:3;border:0.125rem solid var(--s-focus-default);content:"";inset:0}button.image-grid-item:focus-visible:after{position:absolute;z-index:2;border:0.1875rem solid var(--s-background-default);content:"";inset:0}.image-grid-item--has-error .image-grid-item__image{display:none}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item--has-watermark .image-grid-item__watermark{display:inline-flex}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px)}.image-grid-item__image{z-index:1;display:inline-flex;width:100%;height:100%;transition:opacity 0.3s ease-in;opacity:0;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__watermark{position:absolute;z-index:1;top:var(--s-space-8);right:var(--s-space-8);display:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;pointer-events:none}.image-grid-item__watermark ::slotted(img){width:3rem;height:auto;pointer-events:none}.image-grid-item--loaded .image-grid-item__image{opacity:1}.image-grid-item__loading-placeholder{display:inline-flex;width:100%;height:100%}.image-grid-item__icon{position:absolute;z-index:1;top:50%;left:50%;display:flex;width:3rem;height:3rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);transform:translate3d(-50%, -50%, 0)}.image-grid-item__icon ::part(icon){width:2rem;height:2rem}.image-grid-item__gif-control-button{position:absolute;z-index:2;top:50%;left:50%;transition:opacity 0.2s;transform:translate3d(-50%, -50%, 0);opacity:0}.image-grid-item:hover>.image-grid-item__gif-control-button,.image-grid-item:focus-within>.image-grid-item__gif-control-button,.image-grid-item--gif-paused>.image-grid-item__gif-control-button{opacity:1}.image-grid-item__overlay{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.4);font-size:var(--s-font-size-2xl);inset:0}.image-grid-item__skeleton{position:absolute;z-index:3;inset:0}.image-grid-item__error{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.1);inset:0}'}},[257,"swirl-image-grid-item",{alt:[1],gifPauseLabel:[1,"gif-pause-label"],gifPlayLabel:[1,"gif-play-label"],icon:[1],interactive:[4],loading:[1],overlay:[1],showGifControls:[4,"show-gif-controls"],src:[1],error:[32],loaded:[32],inViewport:[32],gifPaused:[32],computedSrc:[32],play:[64],pause:[64]},void 0,{src:[{watchSrcProp:0}]}]),b=m,u=function(){"undefined"!=typeof customElements&&["swirl-image-grid-item","swirl-button","swirl-icon-error","swirl-skeleton-box","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-image-grid-item":customElements.get(a(i))||customElements.define(a(i),m);break;case"swirl-button":customElements.get(a(i))||l();break;case"swirl-icon-error":customElements.get(a(i))||c();break;case"swirl-skeleton-box":customElements.get(a(i))||h();break;case"swirl-visually-hidden":customElements.get(a(i))||g()}}))};export{b as SwirlImageGridItem,u as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Host as o,Fragment as r,transformTag as a}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{d}from"./utils.js";import{d as l}from"./swirl-button2.js";import{d as c}from"./swirl-icon-error2.js";import{d as h}from"./swirl-skeleton-box2.js";import{d as g}from"./swirl-visually-hidden2.js";const m=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.gifStarted=e(this,"gifStarted",7),this.gifStopped=e(this,"gifStopped",7),this.imageError=e(this,"imageError",7),this.imageLoad=e(this,"imageLoad",7),this.gifPauseLabel="Pause GIF playback",this.gifPlayLabel="Continue GIF playback",this.error=!1,this.loaded=!1,this.inViewport=!1,this.gifPaused=!1,this.handleIntersectionEntries=d((i=>{const t=[...i].sort(((i,t)=>i.time-t.time));this.inViewport=t.at(-1).isIntersecting,this.inViewport||(this.loaded=!1)}),250),this.onLoad=()=>{this.error=!1,this.loaded=!0,this.imageLoad.emit()},this.onError=()=>{this.loaded=!0,this.error=!0,this.imageError.emit()},this.playGif=()=>{this.gifPaused=!1,this.computedSrc=this.src,this.gifStarted.emit()},this.handleControlClick=i=>{i.stopImmediatePropagation(),this.gifPaused?this.playGif():this.pauseGif()},this.onImageElementUpdate=i=>{this.img?.removeEventListener("load",this.onLoad),this.img?.removeEventListener("error",this.onError),this.img=i,this.img&&(this.img.addEventListener("load",this.onLoad),this.img.addEventListener("error",this.onError))}}async play(){this.playGif()}async pause(){this.pauseGif()}watchSrcProp(){this.computedSrc=this.src,this.gifPaused=!1}componentWillLoad(){this.computedSrc=this.src}componentDidLoad(){this.setupIntersectionObserver()}componentDidRender(){this.img?.complete&&!this.loaded&&(this.loaded=!0)}connectedCallback(){this.computedSrc=this.src,this.setupIntersectionObserver()}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.intersectionObserver=void 0,this.img?.removeEventListener("load",this.onLoad),this.img?.removeEventListener("error",this.onError)}setupIntersectionObserver(){"intersecting"!==this.loading||this.intersectionObserver||(this.intersectionObserver=new IntersectionObserver((i=>{this.handleIntersectionEntries(i)})),this.intersectionObserver.observe(this.el))}async pauseGif(){const i=this.img,t=await this.readImageFromCanvas(i.src);this.gifPaused=!0,this.computedSrc=t,this.gifStopped.emit()}readImageFromCanvas(i){return new Promise(((t,e)=>{const s=new Image;s.src=i,s.onload=i=>{const e=i.target,s=document.createElement("canvas"),o=s.getContext("2d");s.width=e.width,s.height=e.height,o.drawImage(e,0,0,e.width,e.height),t(s.toDataURL("image/jpeg"))},s.onerror=()=>e()}))}render(){const i=this.interactive?"button":"div",t=this.gifPaused||"intersecting"!==this.loading||this.inViewport,e=Math.min(this.el.parentElement?.children.length,4)??1,a=!!this.el.querySelector('[slot="watermark"]'),d=n("image-grid-item",{"image-grid-item--has-error":this.error,"image-grid-item--has-overlay":this.overlay,"image-grid-item--has-watermark":a,"image-grid-item--loaded":this.loaded,"image-grid-item--gif-paused":this.gifPaused});return s(o,{key:"088137e51d7c411a6dbecd6259a115c3ed1c2ff5","data-sibling-count":e,role:"listitem"},s(i,{key:"aa66e041f505acfbcd89f74c21555688d723ee40",class:d,type:this.interactive?"button":void 0},s("div",{key:"8fc375294963ffeb466f1d8485ebccd10d3a15fa",class:"image-grid-item__background",style:{backgroundImage:t?`url(${this.computedSrc})`:void 0}}),t?s(r,null,s("img",{alt:this.alt,class:"image-grid-item__image",loading:"intersecting"!==this.loading?this.loading:void 0,ref:this.onImageElementUpdate,src:this.computedSrc}),s("span",{class:"image-grid-item__watermark"},s("slot",{name:"watermark"}))):s("div",{class:"image-grid-item__loading-placeholder"},s("swirl-visually-hidden",null,this.alt)),this.showGifControls&&s("swirl-button",{key:"07c4aaa67bf33c5d6b874804ca1708c2e3e37a9a",class:"image-grid-item__gif-control-button",label:this.gifPaused?this.gifPlayLabel:this.gifPauseLabel,icon:"<swirl-icon-gif></swirl-icon-gif>",variant:"on-image",pill:!0,hideLabel:!0,swirlAriaLabel:this.gifPaused?this.gifPlayLabel:this.gifPauseLabel,onClick:this.handleControlClick}),this.loaded&&!this.error&&this.icon&&!this.overlay&&s("div",{key:"0aaab58efc6d00b1ed5c0eb925b11ceb8f0dfb78",class:"image-grid-item__icon",innerHTML:this.icon}),this.overlay&&s("div",{key:"c4d226159ef8d6cfeb0f206819d0487426b5c43b",class:"image-grid-item__overlay"},this.overlay),!this.loaded&&s("swirl-skeleton-box",{key:"3009b11dc3621d7d8ed668e94121c93753d98d56",class:"image-grid-item__skeleton",height:"100%",width:"100%",borderRadius:"none"}),this.loaded&&this.error&&s("div",{key:"35fdfff11c524e48718f6001a9e22dd73afae96c",class:"image-grid-item__error"},s("swirl-icon-error",{key:"170285aef92f53427a467f408ba69945e892737c",color:"critical"}))))}get el(){return this}static get watchers(){return{src:[{watchSrcProp:0}]}}static get style(){return':host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:only-child) button.image-grid-item:focus-visible:before,:host(:only-child) button.image-grid-item:focus-visible:after{border-radius:var(--s-border-radius-sm)}:host([data-sibling-count="2"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="2"]:nth-child(1)) button.image-grid-item:focus-visible:after,:host([data-sibling-count="3"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="2"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="2"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm);border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="3"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="3"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="3"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count="4"]:nth-child(4)) button.image-grid-item:focus-visible:before,:host([data-sibling-count="4"]:nth-child(4)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus{outline:none}button.image-grid-item:focus-visible:before{position:absolute;z-index:3;border:0.125rem solid var(--s-focus-default);content:"";inset:0}button.image-grid-item:focus-visible:after{position:absolute;z-index:2;border:0.1875rem solid var(--s-background-default);content:"";inset:0}.image-grid-item--has-error .image-grid-item__image{display:none}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item--has-watermark .image-grid-item__watermark{display:inline-flex}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px)}.image-grid-item__image{z-index:1;display:inline-flex;width:100%;height:100%;transition:opacity 0.3s ease-in;opacity:0;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__watermark{position:absolute;z-index:1;top:var(--s-space-8);right:var(--s-space-8);display:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;pointer-events:none}.image-grid-item__watermark ::slotted(img){width:3rem;height:auto;pointer-events:none}.image-grid-item--loaded .image-grid-item__image{opacity:1}.image-grid-item__loading-placeholder{display:inline-flex;width:100%;height:100%}.image-grid-item__icon{position:absolute;z-index:1;top:50%;left:50%;display:flex;width:3rem;height:3rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);transform:translate3d(-50%, -50%, 0)}.image-grid-item__icon ::part(icon){width:2rem;height:2rem}.image-grid-item__gif-control-button{position:absolute;z-index:2;top:50%;left:50%;transition:opacity 0.2s;transform:translate3d(-50%, -50%, 0);opacity:0}.image-grid-item:hover>.image-grid-item__gif-control-button,.image-grid-item:focus-within>.image-grid-item__gif-control-button,.image-grid-item--gif-paused>.image-grid-item__gif-control-button{opacity:1}.image-grid-item__overlay{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.4);font-size:var(--s-font-size-2xl);inset:0}.image-grid-item__skeleton{position:absolute;z-index:3;inset:0}.image-grid-item__error{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.1);inset:0}'}},[257,"swirl-image-grid-item",{alt:[1],gifPauseLabel:[1,"gif-pause-label"],gifPlayLabel:[1,"gif-play-label"],icon:[1],interactive:[4],loading:[1],overlay:[1],showGifControls:[4,"show-gif-controls"],src:[1],error:[32],loaded:[32],inViewport:[32],gifPaused:[32],computedSrc:[32],play:[64],pause:[64]},void 0,{src:[{watchSrcProp:0}]}]),b=m,u=function(){"undefined"!=typeof customElements&&["swirl-image-grid-item","swirl-button","swirl-icon-error","swirl-skeleton-box","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-image-grid-item":customElements.get(a(i))||customElements.define(a(i),m);break;case"swirl-button":customElements.get(a(i))||l();break;case"swirl-icon-error":customElements.get(a(i))||c();break;case"swirl-skeleton-box":customElements.get(a(i))||h();break;case"swirl-visually-hidden":customElements.get(a(i))||g()}}))};export{b as SwirlImageGridItem,u as defineCustomElement}