@getflip/swirl-components 0.523.1 → 0.525.0

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()}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:"16606b41b0d3d6aa82ed80756c10990d213c50fd","data-sibling-count":e,role:"listitem"},s(i,{key:"b887a0c4c930f639a21814ed6717c4b4c08e84d9",class:d,type:this.interactive?"button":void 0},s("div",{key:"71c23551a37419d2ee701cd693dafd3cc6bd5d26",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:"c2ef4393a6dcc90dc31912cc6c9f614c8a4deaa2",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:"56a000989dc026ac6173fce94ba7c2911e478926",class:"image-grid-item__icon",innerHTML:this.icon}),this.overlay&&s("div",{key:"207ff2b7034e3563cfd8770d41f93982eb275b54",class:"image-grid-item__overlay"},this.overlay),!this.loaded&&s("swirl-skeleton-box",{key:"5d2f8f23d863222252348c15c1dde122d3f23728",class:"image-grid-item__skeleton",height:"100%",width:"100%",borderRadius:"none"}),this.loaded&&this.error&&s("div",{key:"266e858316d049d87215d56e5942d66222630bc4",class:"image-grid-item__error"},s("swirl-icon-error",{key:"68d4522de0faa2a64dd0d881481a05c5db0a97a5",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:-moz-fit-content;width: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:"43d9c77c8f1bf61587b7f63dc327e33a226bf0d9","data-sibling-count":e,role:"listitem"},s(i,{key:"cadf2f3143d8f832df1fd807b3c2e1b1dd05f021",class:d,type:this.interactive?"button":void 0},s("div",{key:"ffae2c93ddd5149e702b5fd49a76aae6eb3b60c8",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:"7e9c81cf1d1f2d5a9f81e523d491db1d0471f1fb",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:"fcc8a0b0ca57974eadb9fe4f8fa156b1aaacd536",class:"image-grid-item__icon",innerHTML:this.icon}),this.overlay&&s("div",{key:"cae6b2a5f9b4bfe904d2f7f3f073b6ebfc0a36e8",class:"image-grid-item__overlay"},this.overlay),!this.loaded&&s("swirl-skeleton-box",{key:"f79c92eab5cda90709b85ab119ab430eaf38b7df",class:"image-grid-item__skeleton",height:"100%",width:"100%",borderRadius:"none"}),this.loaded&&this.error&&s("div",{key:"c09f6360fc831f397daac05bc464718107c02af8",class:"image-grid-item__error"},s("swirl-icon-error",{key:"53d28b3c5fceff9df9a6eb087f0c31e6e1f94a93",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:-moz-fit-content;width: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}

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

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,h as i,Host as s,transformTag as r}from"@stencil/core/internal/client";import{c as a}from"./index2.js";const c=["xs","sm","base","l","xl"],d=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.borderRadius="sm",this.items=[],this.updateItems=()=>{this.items=Array.from(this.el.children),this.items.forEach((t=>{t.overlay=void 0})),this.items.length>4&&(this.items[3].overlay="+"+(this.items.length-3))},this.caculateAspectRatio=()=>{if(this.aspectRatio)return this.aspectRatio;switch(this.items.length){case 1:case 4:default:return"1";case 2:return"2/1";case 3:return"3/2"}}}componentWillLoad(){this.updateItems()}render(){const t=a("image-grid","image-grid--item-count-"+Math.min(4,this.items.length)),e={aspectRatio:this.caculateAspectRatio(),borderRadius:c.includes(this.borderRadius)?`var(--s-border-radius-${this.borderRadius})`:this.borderRadius};return i(s,{key:"6e2d3af7fd3d04e9cfbc64cf0db820c468358740"},i("div",{key:"136a7826703266d7f2c4cdab88f8ea9728796daf","aria-label":this.label,class:t,role:"list",style:e},i("slot",{key:"2c7281dc1298b89e54e6bd7ef2543eaa15de09b9",onSlotchange:this.updateItems})))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.image-grid{display:grid;overflow:hidden;width:100%;min-height:0;border-radius:var(--s-border-radius-sm);gap:var(--s-space-2)}.image-grid--item-count-1{grid-template-columns:100%;grid-template-rows:100%}.image-grid--item-count-2{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2))}.image-grid--item-count-3{grid-template-columns:calc(100% / 3 * 2) calc(       100% / 3 - var(--s-space-2) / 2     );grid-template-rows:calc(50% - var(--s-space-2) / 2)}.image-grid--item-count-3 ::slotted(*:nth-child(1)){grid-column-start:1;grid-row-start:1;grid-row-end:3}.image-grid--item-count-3 ::slotted(*:nth-child(3)){grid-column-start:2}.image-grid--item-count-4{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2));grid-template-rows:repeat(2, calc(50% - var(--s-space-2) / 2))}"}},[257,"swirl-image-grid",{aspectRatio:[1,"aspect-ratio"],borderRadius:[1,"border-radius"],label:[1],items:[32]}]),o=d,l=function(){"undefined"!=typeof customElements&&["swirl-image-grid"].forEach((t=>{"swirl-image-grid"===t&&(customElements.get(r(t))||customElements.define(r(t),d))}))};export{o as SwirlImageGrid,l as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,h as i,Host as s,transformTag as r}from"@stencil/core/internal/client";import{c as a}from"./index2.js";const c=["xs","sm","base","l","xl"],o=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.borderRadius="sm",this.items=[],this.updateItems=()=>{this.items=Array.from(this.el.children),this.items.forEach((t=>{t.overlay=void 0})),this.items.length>4&&(this.items[3].overlay="+"+(this.items.length-3))},this.caculateAspectRatio=()=>{if(this.aspectRatio)return this.aspectRatio;switch(this.items.length){case 1:case 4:default:return"1";case 2:return"2/1";case 3:return"3/2"}}}componentWillLoad(){this.updateItems()}render(){const t=a("image-grid","image-grid--item-count-"+Math.min(4,this.items.length)),e={aspectRatio:this.caculateAspectRatio(),borderRadius:c.includes(this.borderRadius)?`var(--s-border-radius-${this.borderRadius})`:this.borderRadius};return i(s,{key:"7d58919abfecf5f283e7462aacb97a3b7f46f767"},i("div",{key:"3e24666b4248ae45a5ab2854a8ca2b0369367c53","aria-label":this.label,class:t,role:"list",style:e},i("slot",{key:"089c11baacb977169777333182ccb58e0fa19b16",onSlotchange:this.updateItems})))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.image-grid{display:grid;overflow:hidden;width:100%;min-height:0;border-radius:var(--s-border-radius-sm);gap:var(--s-space-2)}.image-grid--item-count-1{grid-template-columns:100%;grid-template-rows:100%}.image-grid--item-count-2{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2))}.image-grid--item-count-3{grid-template-columns:calc(100% / 3 * 2) calc(       100% / 3 - var(--s-space-2) / 2     );grid-template-rows:calc(50% - var(--s-space-2) / 2)}.image-grid--item-count-3 ::slotted(*:nth-child(1)){grid-column-start:1;grid-row-start:1;grid-row-end:3}.image-grid--item-count-3 ::slotted(*:nth-child(3)){grid-column-start:2}.image-grid--item-count-4{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2));grid-template-rows:repeat(2, calc(50% - var(--s-space-2) / 2))}"}},[257,"swirl-image-grid",{aspectRatio:[1,"aspect-ratio"],borderRadius:[1,"border-radius"],label:[1],items:[32]}]),d=o,l=function(){"undefined"!=typeof customElements&&["swirl-image-grid"].forEach((t=>{"swirl-image-grid"===t&&(customElements.get(r(t))||customElements.define(r(t),o))}))};export{d as SwirlImageGrid,l as defineCustomElement}

package/dist/components/swirl-inline-error2.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as i,h as r,Host as n,transformTag as s}from"@stencil/core/internal/client";import{c as t}from"./index2.js";import{D as o}from"./media-query.service.js";import{d as a}from"./swirl-icon-error2.js";const c=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.size="m",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=o.subscribe((e=>{this.forceIconProps(e)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(e){if(!Boolean(this.iconEl))return;const i=this.iconEl.children[0];let r="24";"s"===this.size?r="16":e&&(r="20"),i?.setAttribute("size",r)}render(){const e=t("inline-error",`inline-error--size-${this.size}`);return r(n,{key:"a7c929ec23210b21949b4094da398ca73fa50a8c"},r("span",{key:"db6ae31fb4c23bcf11683e51b9cadf28c5957740",class:e,part:"inline-error"},r("span",{key:"99b38c60ac838a073cc76bc341e32d5a833d121b",class:"inline-error__icon",ref:e=>this.iconEl=e},r("swirl-icon-error",{key:"8aaa4b146b2536ea8af21304ea03252e2ca4dad6"})),r("span",{key:"a4603d001ad50badbe2f556a928bb51c89241162",class:"inline-error__message"},this.message)))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.inline-error{display:inline-flex;color:var(--s-text-critical);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-error{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.inline-error--size-s{font-size:var(--s-font-size-sm)}.inline-error--size-s .inline-error__icon{width:1rem;height:1rem;margin-top:0.125rem}.inline-error--size-s .inline-error__message{padding-top:0}.inline-error__icon{display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-critical);align-self:flex-start}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-error__icon{width:1.25rem;height:1.25rem}}.inline-error__message{width:-moz-fit-content;width:fit-content;margin-left:var(--s-space-4);padding-top:0.0625rem;white-space:pre-line}"}},[1,"swirl-inline-error",{message:[1],size:[1]}]);function l(){"undefined"!=typeof customElements&&["swirl-inline-error","swirl-icon-error"].forEach((e=>{switch(e){case"swirl-inline-error":customElements.get(s(e))||customElements.define(s(e),c);break;case"swirl-icon-error":customElements.get(s(e))||a()}}))}export{c as S,l as d}
+import{proxyCustomElement as e,HTMLElement as i,h as r,Host as n,transformTag as s}from"@stencil/core/internal/client";import{c as t}from"./index2.js";import{D as o}from"./media-query.service.js";import{d as a}from"./swirl-icon-error2.js";const l=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.size="m",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=o.subscribe((e=>{this.forceIconProps(e)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(e){if(!Boolean(this.iconEl))return;const i=this.iconEl.children[0];let r="24";"s"===this.size?r="16":e&&(r="20"),i?.setAttribute("size",r)}render(){const e=t("inline-error",`inline-error--size-${this.size}`);return r(n,{key:"c26b4741e075afe32d1fd0d0f20eb70bd13314fa"},r("span",{key:"b66b9fc8f3446d347cb41bdbaa4efaa4833133fc",class:e,part:"inline-error"},r("span",{key:"fa80f91364acc999b86b2f7dcd022ea449db8cd2",class:"inline-error__icon",ref:e=>this.iconEl=e},r("swirl-icon-error",{key:"18ada427c607905f08e178781952fcc9c23a332b"})),r("span",{key:"0661a115e8333f8e11f168684a33610e24b6a33f",class:"inline-error__message"},this.message)))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.inline-error{display:inline-flex;color:var(--s-text-critical);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-error{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.inline-error--size-s{font-size:var(--s-font-size-sm)}.inline-error--size-s .inline-error__icon{width:1rem;height:1rem;margin-top:0.125rem}.inline-error--size-s .inline-error__message{padding-top:0}.inline-error__icon{display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-critical);align-self:flex-start}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-error__icon{width:1.25rem;height:1.25rem}}.inline-error__message{width:-moz-fit-content;width:fit-content;margin-left:var(--s-space-4);padding-top:0.0625rem;white-space:pre-line}"}},[1,"swirl-inline-error",{message:[1],size:[1]}]);function c(){"undefined"!=typeof customElements&&["swirl-inline-error","swirl-icon-error"].forEach((e=>{switch(e){case"swirl-inline-error":customElements.get(s(e))||customElements.define(s(e),l);break;case"swirl-icon-error":customElements.get(s(e))||a()}}))}export{l as S,c as d}

package/dist/components/swirl-inline-notification.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as n,h as e,Host as s,transformTag as c}from"@stencil/core/internal/client";import{c as o}from"./index2.js";import{d as t}from"./swirl-icon-check-circle2.js";import{d as r}from"./swirl-icon-error2.js";import{d as a}from"./swirl-icon-info2.js";import{d as l}from"./swirl-icon-warning2.js";import{d}from"./swirl-text2.js";import{d as f}from"./swirl-visually-hidden2.js";const b=i(class extends n{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.importance="status",this.intent="info",this.borderRadius="sm"}render(){const i=o("inline-notification","inline-notification--intent-"+this.intent,"inline-notification--border-radius-"+this.borderRadius);return e(s,{key:"169e0afb17f8c7809e5de8e189dc9dbcd89e52ce"},e("div",{key:"0dff58609ec5b1c242dcee97a51702f8ac1714c8","aria-describedby":"content",class:i,role:this.importance,tabIndex:0},e("span",{key:"31047fcc468fa01e1b5a6947813df748159d2cca","aria-hidden":"true",class:"inline-notification__icon"},"critical"===this.intent&&e("swirl-icon-error",{key:"be81c6d0714608228670bf80c12b2a61509d736d",size:20}),"success"===this.intent&&e("swirl-icon-check-circle",{key:"383b32eb9e1bc51af927150be286295ead203f33",size:20}),"warning"===this.intent&&e("swirl-icon-warning",{key:"e843f6234bbee4d458fea5511fb91396faff0769",size:20}),"info"===this.intent&&e("swirl-icon-info",{key:"c1b4fc55602f08512bdfc9b6133dc02fecee19ae",size:20})),e("span",{key:"7a4d52391f895c2e16c68f295394431d79f6c388",class:"inline-notification__content",id:"content"},this.hideHeading&&e("swirl-visually-hidden",{key:"f8d2c13741d5a9e4563c8d91a7cb09564daa4b0d"},this.heading)||e("swirl-text",{key:"599c2f8fe3bde7a922cf4c545c4686c2bb093909",class:"inline-notification__heading",size:"sm",weight:"semibold"},this.heading),e("slot",{key:"bc494bdcf5199e01d9be1cfa8481780ea3e02030"}))))}static get style(){return":host{display:block}:host *{box-sizing:border-box}.inline-notification{display:flex;max-width:100%;padding:var(--s-space-12);gap:var(--s-space-8)}@media (min-width: 768px){.inline-notification{padding:var(--s-space-16)}}.inline-notification--border-radius-xs{border-radius:var(--s-border-radius-xs)}.inline-notification--border-radius-sm{border-radius:var(--s-border-radius-sm)}.inline-notification--intent-info{background-color:var(--s-surface-info-subdued)}.inline-notification--intent-info .inline-notification__icon{color:var(--s-icon-info)}.inline-notification--intent-critical{background-color:var(--s-surface-critical-subdued)}.inline-notification--intent-critical .inline-notification__icon{color:var(--s-icon-critical)}.inline-notification--intent-warning{background-color:var(--s-surface-warning-subdued)}.inline-notification--intent-warning .inline-notification__icon{color:var(--s-icon-warning)}.inline-notification--intent-success{background-color:var(--s-surface-success-subdued)}.inline-notification--intent-success .inline-notification__icon{color:var(--s-icon-success)}.inline-notification__icon{display:inline-flex;flex-shrink:0}.inline-notification__content{position:relative;top:0.0625rem;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}"}},[257,"swirl-inline-notification",{heading:[1],hideHeading:[4,"hide-heading"],importance:[1],intent:[1],borderRadius:[1,"border-radius"]}]),u=b,m=function(){"undefined"!=typeof customElements&&["swirl-inline-notification","swirl-icon-check-circle","swirl-icon-error","swirl-icon-info","swirl-icon-warning","swirl-text","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-inline-notification":customElements.get(c(i))||customElements.define(c(i),b);break;case"swirl-icon-check-circle":customElements.get(c(i))||t();break;case"swirl-icon-error":customElements.get(c(i))||r();break;case"swirl-icon-info":customElements.get(c(i))||a();break;case"swirl-icon-warning":customElements.get(c(i))||l();break;case"swirl-text":customElements.get(c(i))||d();break;case"swirl-visually-hidden":customElements.get(c(i))||f()}}))};export{u as SwirlInlineNotification,m as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as n,h as e,Host as s,transformTag as c}from"@stencil/core/internal/client";import{c as o}from"./index2.js";import{d as t}from"./swirl-icon-check-circle2.js";import{d as r}from"./swirl-icon-error2.js";import{d as a}from"./swirl-icon-info2.js";import{d as l}from"./swirl-icon-warning2.js";import{d}from"./swirl-text2.js";import{d as f}from"./swirl-visually-hidden2.js";const b=i(class extends n{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.importance="status",this.intent="info",this.borderRadius="sm"}render(){const i=o("inline-notification","inline-notification--intent-"+this.intent,"inline-notification--border-radius-"+this.borderRadius);return e(s,{key:"3f5b39c33c6f2b5c97fcdcb31fd6a9b946d1e3e5"},e("div",{key:"8a82ff4ade334aa362b81308f0c9483adde8df97","aria-describedby":"content",class:i,role:this.importance,tabIndex:0},e("span",{key:"98e669da6486893d51525bfd0ccc4b079d4b3276","aria-hidden":"true",class:"inline-notification__icon"},"critical"===this.intent&&e("swirl-icon-error",{key:"9f7bad203ac97efef312de08c3eef8c4fc99c997",size:20}),"success"===this.intent&&e("swirl-icon-check-circle",{key:"8608046dcb0da2610cc694cb514096b1899bca27",size:20}),"warning"===this.intent&&e("swirl-icon-warning",{key:"13e01d1773f9be0b9d1d075e3e24669d719c4859",size:20}),"info"===this.intent&&e("swirl-icon-info",{key:"bd7734a1167c7087b95d9791cc7f6d283c77ba22",size:20})),e("span",{key:"9e9be71d0b8e50399eb467f4bbbed6a639b5a78d",class:"inline-notification__content",id:"content"},this.hideHeading&&e("swirl-visually-hidden",{key:"0434cf683c31378211296f1a1136d39201029a28"},this.heading)||e("swirl-text",{key:"8aaa450396dae1fecf4f148fdb89f261c4cc9a0c",class:"inline-notification__heading",size:"sm",weight:"semibold"},this.heading),e("slot",{key:"baf4dbb5c697bb0a9c06cdc8271242f622a91ed3"}))))}static get style(){return":host{display:block}:host *{box-sizing:border-box}.inline-notification{display:flex;max-width:100%;padding:var(--s-space-12);gap:var(--s-space-8)}@media (min-width: 768px){.inline-notification{padding:var(--s-space-16)}}.inline-notification--border-radius-xs{border-radius:var(--s-border-radius-xs)}.inline-notification--border-radius-sm{border-radius:var(--s-border-radius-sm)}.inline-notification--intent-info{background-color:var(--s-surface-info-subdued)}.inline-notification--intent-info .inline-notification__icon{color:var(--s-icon-info)}.inline-notification--intent-critical{background-color:var(--s-surface-critical-subdued)}.inline-notification--intent-critical .inline-notification__icon{color:var(--s-icon-critical)}.inline-notification--intent-warning{background-color:var(--s-surface-warning-subdued)}.inline-notification--intent-warning .inline-notification__icon{color:var(--s-icon-warning)}.inline-notification--intent-success{background-color:var(--s-surface-success-subdued)}.inline-notification--intent-success .inline-notification__icon{color:var(--s-icon-success)}.inline-notification__icon{display:inline-flex;flex-shrink:0}.inline-notification__content{position:relative;top:0.0625rem;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}"}},[257,"swirl-inline-notification",{heading:[1],hideHeading:[4,"hide-heading"],importance:[1],intent:[1],borderRadius:[1,"border-radius"]}]),u=b,m=function(){"undefined"!=typeof customElements&&["swirl-inline-notification","swirl-icon-check-circle","swirl-icon-error","swirl-icon-info","swirl-icon-warning","swirl-text","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-inline-notification":customElements.get(c(i))||customElements.define(c(i),b);break;case"swirl-icon-check-circle":customElements.get(c(i))||t();break;case"swirl-icon-error":customElements.get(c(i))||r();break;case"swirl-icon-info":customElements.get(c(i))||a();break;case"swirl-icon-warning":customElements.get(c(i))||l();break;case"swirl-text":customElements.get(c(i))||d();break;case"swirl-visually-hidden":customElements.get(c(i))||f()}}))};export{u as SwirlInlineNotification,m as defineCustomElement}

package/dist/components/swirl-inline-status.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as t,h as n,Host as s,transformTag as e}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{D as o}from"./media-query.service.js";const r=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.size="m",this.iconSize=20,this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=o.subscribe((i=>{this.forceIconProps(i)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(i){if(!this.iconEl)return;const t=this.iconEl.children[0];if(!t)return;let n="24";"s"===this.size?n="16":i&&(n="20"),t.setAttribute("size",n)}render(){const i=a("inline-status","inline-status--intent-"+this.intent,"inline-status--size-"+this.size);return n(s,{key:"65262b3e3f60821eeaf42e1ed3881de0111e8409"},n("span",{key:"13c43614acd384e7a14ddbdce227387055167160",class:i,part:"inline-status"},this.icon&&n("span",{key:"0b38e47541acf83629409da6b78924c36c6f1a6d",class:"inline-status__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),n("span",{key:"92e78accc5a20eb483f7361e55eec57777d42e40",class:"inline-status__message"},this.message)))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.inline-status{display:inline-flex;color:var(--s-text-default);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.inline-status--size-s{font-size:var(--s-font-size-sm)}.inline-status--size-s .inline-status__icon{width:1rem;height:1rem;margin-top:0.125rem}.inline-status--size-s .inline-status__message{padding-top:0}.inline-status--intent-critical{color:var(--s-text-critical)}.inline-status--intent-critical .inline-status__icon{color:var(--s-icon-critical)}.inline-status--intent-info{color:var(--s-text-info)}.inline-status--intent-info .inline-status__icon{color:var(--s-icon-info)}.inline-status--intent-neutral{color:var(--s-text-subdued)}.inline-status--intent-neutral .inline-status__icon{color:var(--s-icon-default)}.inline-status--intent-success{color:var(--s-text-success)}.inline-status--intent-success .inline-status__icon{color:var(--s-icon-success)}.inline-status--intent-warning{color:var(--s-text-warning)}.inline-status--intent-warning .inline-status__icon{color:var(--s-icon-warning)}.inline-status__icon{display:inline-flex;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);color:var(--s-icon-default);align-self:flex-start}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status__icon{width:1.25rem;height:1.25rem}}.inline-status__message{width:-moz-fit-content;width:fit-content;padding-top:0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status__message{padding-top:0}}"}},[1,"swirl-inline-status",{icon:[1],intent:[1],message:[1],size:[1],iconSize:[32]}]),l=r,c=function(){"undefined"!=typeof customElements&&["swirl-inline-status"].forEach((i=>{"swirl-inline-status"===i&&(customElements.get(e(i))||customElements.define(e(i),r))}))};export{l as SwirlInlineStatus,c as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as t,h as n,Host as s,transformTag as e}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{D as o}from"./media-query.service.js";const r=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.size="m",this.iconSize=20,this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=o.subscribe((i=>{this.forceIconProps(i)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(i){if(!this.iconEl)return;const t=this.iconEl.children[0];if(!t)return;let n="24";"s"===this.size?n="16":i&&(n="20"),t.setAttribute("size",n)}render(){const i=a("inline-status","inline-status--intent-"+this.intent,"inline-status--size-"+this.size);return n(s,{key:"230d41a29a1d3cc88db8537e829d05fd9f0ffc72"},n("span",{key:"3421ea5c8a450ff656fc8e00f1f46a78db9e8bb4",class:i,part:"inline-status"},this.icon&&n("span",{key:"d000359a8d13f184352990ea4746f4f10da542a6",class:"inline-status__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),n("span",{key:"0896dff995aca38f140f8410c964838465eb9bc0",class:"inline-status__message"},this.message)))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.inline-status{display:inline-flex;color:var(--s-text-default);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.inline-status--size-s{font-size:var(--s-font-size-sm)}.inline-status--size-s .inline-status__icon{width:1rem;height:1rem;margin-top:0.125rem}.inline-status--size-s .inline-status__message{padding-top:0}.inline-status--intent-critical{color:var(--s-text-critical)}.inline-status--intent-critical .inline-status__icon{color:var(--s-icon-critical)}.inline-status--intent-info{color:var(--s-text-info)}.inline-status--intent-info .inline-status__icon{color:var(--s-icon-info)}.inline-status--intent-neutral{color:var(--s-text-subdued)}.inline-status--intent-neutral .inline-status__icon{color:var(--s-icon-default)}.inline-status--intent-success{color:var(--s-text-success)}.inline-status--intent-success .inline-status__icon{color:var(--s-icon-success)}.inline-status--intent-warning{color:var(--s-text-warning)}.inline-status--intent-warning .inline-status__icon{color:var(--s-icon-warning)}.inline-status__icon{display:inline-flex;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);color:var(--s-icon-default);align-self:flex-start}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status__icon{width:1.25rem;height:1.25rem}}.inline-status__message{width:-moz-fit-content;width:fit-content;padding-top:0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status__message{padding-top:0}}"}},[1,"swirl-inline-status",{icon:[1],intent:[1],message:[1],size:[1],iconSize:[32]}]),l=r,c=function(){"undefined"!=typeof customElements&&["swirl-inline-status"].forEach((i=>{"swirl-inline-status"===i&&(customElements.get(e(i))||customElements.define(e(i),r))}))};export{l as SwirlInlineStatus,c as defineCustomElement}

package/dist/components/swirl-lightbox.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as o,transformTag as a}from"@stencil/core/internal/client";import{d as n,e as l}from"./body-scroll-lock.js";import{c as h}from"./index2.js";import{t as r}from"./index.esm.js";import{q as d}from"./utils.js";import{d as c}from"./swirl-icon-arrow-left2.js";import{d as b}from"./swirl-icon-arrow-right2.js";import{d as g}from"./swirl-icon-close2.js";import{d as f}from"./swirl-icon-download2.js";const u=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.activeSlideChange=e(this,"activeSlideChange",7),this.lightboxClose=e(this,"lightboxClose",7),this.closeButtonLabel="Close modal",this.downloadButtonEnabled=!0,this.downloadButtonLabel="Download",this.nextSlideButtonLabel="Next slide",this.previousSlideButtonLabel="Previous slide",this.activeSlideIndex=0,this.closing=!1,this.opening=!1,this.componentLoaded=!1,this.dragging=!1,this.onKeyDown=t=>{"Escape"===t.code?(t.stopImmediatePropagation(),t.preventDefault(),this.close()):"ArrowLeft"===t.code?this.onPreviousSlideClick():"ArrowRight"===t.code&&this.onNextSlideClick()},this.preventDragStart=t=>{t.preventDefault()},this.onCloseButtonClick=()=>{this.close()},this.onDownloadButtonClick=()=>{this.slides[this.activeSlideIndex]?.download()},this.onNextSlideClick=()=>{this.activateSlide(Math.min(this.slides.length-1,this.activeSlideIndex+1)),this.activeSlideIndex===this.slides.length-1&&(this.slides.length>1?this.previousSlideButton.focus():r(this.modalEl).at(0)?.focus())},this.onPreviousSlideClick=()=>{this.activateSlide(Math.max(0,this.activeSlideIndex-1)),0===this.activeSlideIndex&&(this.slides.length>1?this.nextSlideButton.focus():r(this.modalEl).at(0)?.focus())},this.registerSlides=()=>{this.removeSlideListeners(),this.slides=Array.from(this.el.children).filter((t=>"SWIRL-FILE-VIEWER"===t.tagName)),this.setSlideAttributes()},this.onPointerDown=t=>{this.slides.length<=1||(this.dragging=!0,this.dragStartPosition=t instanceof MouseEvent?t.clientX:t.touches[0].clientX,this.slides.forEach((t=>{t.style.transition="none"})))},this.onPointerMove=async t=>{if(!this.dragging)return;const i=!(t instanceof MouseEvent)&&t.touches.length>1,e=this.slides[this.activeSlideIndex]?.shadowRoot?.querySelector("swirl-file-viewer-image"),s=!!e&&await e.getZoom()>1;if(i||s)return;t.preventDefault();const o=t instanceof MouseEvent?t.clientX-this.dragStartPosition:t.touches[0].clientX-this.dragStartPosition;this.slides.forEach((t=>{const i=this.activeSlideIndex*t.getBoundingClientRect().width;this.dragDelta=o,t.style.transform=`translate3d(${(-i+this.dragDelta)/16}rem, 0, 0)`}))},this.onPointerUp=()=>{if(!this.dragging)return;this.dragging=!1,this.dragStartPosition=void 0;const t=this.dragDelta/this.slides[this.activeSlideIndex].getBoundingClientRect().width;this.dragDelta=0;const i=t>.2,e=t<-.2;this.slides.forEach((t=>{t.style.transition=""})),i?this.onPreviousSlideClick():e?this.onNextSlideClick():this.resetSlidePositions()},this.onBackdropClick=t=>{t.target===this.slidesContainer&&this.close()},this.onContextMenu=t=>{this.downloadButtonEnabled||t.preventDefault()}}connectedCallback(){this.componentLoaded&&this.registerSlides()}componentWillLoad(){this.registerSlides()}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps(),this.activateSlide(0),this.componentLoaded=!0}disconnectedCallback(){this.unlockBodyScroll(),this.removeSlideListeners(),this.activateSlideTimeout&&clearTimeout(this.activateSlideTimeout),this.closingTimeout&&clearTimeout(this.closingTimeout),this.modalEl?.open&&this.modalEl.close()}watchActiveSlideIndex(){this.activeSlideChange.emit(this.activeSlideIndex)}async open(){this.opening=!0,this.modalEl&&(this.modalEl.showModal(),this.lockBodyScroll(),this.activateSlide(this.activeSlideIndex||0))}async close(){this.closing||(this.closing=!0,this.unlockBodyScroll(),this.closingTimeout&&(clearTimeout(this.closingTimeout),this.closingTimeout=void 0),this.closingTimeout=setTimeout((()=>{this.resetImageZoom(),this.stopAllMediaPlayers(),this.modalEl.close(),this.closing=!1,this.lightboxClose.emit()}),150))}async activateSlide(t){this.dragging=!1,this.activeSlideIndex=t,this.slides.forEach(((t,i)=>{i===this.activeSlideIndex?(t.removeAttribute("aria-hidden"),t.setAttribute("active","true")):i===this.activeSlideIndex-1||i===this.activeSlideIndex+1?(t.setAttribute("aria-hidden","true"),t.setAttribute("active","true")):t.setAttribute("aria-hidden","true"),t.style.transform=`translate3d(-${100*this.activeSlideIndex}%, 0, 0)`})),this.activateSlideTimeout&&(clearTimeout(this.activateSlideTimeout),this.activateSlideTimeout=void 0),this.activateSlideTimeout=setTimeout((()=>{this.slides.forEach(((t,i)=>{i!==this.activeSlideIndex&&i!==this.activeSlideIndex-1&&i!==this.activeSlideIndex+1&&t.setAttribute("active","false")}))}),300),this.stopAllMediaPlayers(),this.resetImageZoom()}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}setSlideAttributes(){this.slides.forEach((t=>{t.setAttribute("active","false"),t.setAttribute("aria-label",t.file),t.setAttribute("aria-roledescription","slide"),t.setAttribute("role","group"),t.addEventListener("dragstart",this.preventDragStart)}))}removeSlideListeners(){this.slides?.forEach((t=>{t.removeEventListener("dragstart",this.preventDragStart)}))}resetSlidePositions(){this.slides.forEach((t=>{t.style.transform=`translate3d(-${100*this.activeSlideIndex}%, 0, 0)`}))}lockBodyScroll(){n(this.el)}unlockBodyScroll(){l(this.el)}getMediaPlayers(){return d(this.el,"video")}stopAllMediaPlayers(){this.getMediaPlayers().forEach((t=>t.pause()))}resetImageZoom(){this.slides.forEach((t=>{const i=t?.shadowRoot?.querySelector("swirl-file-viewer-image");i&&i.resetZoom()}))}render(){const t=this.slides.length>1,i=h("lightbox",{"lightbox--closing":this.closing});return s(o,{key:"0b5531933a7b3a8dbf28808e767cde79baafb8df"},s("dialog",{key:"03da1054ec4836f983be2a7f38f2b5c939dd8289","aria-label":this.label,class:i,id:"lightbox",onKeyDown:this.onKeyDown,onMouseDown:this.onPointerDown,onMouseMove:this.onPointerMove,onMouseOut:this.onPointerUp,onMouseUp:this.onPointerUp,onTouchEnd:this.onPointerUp,onTouchMove:this.onPointerMove,onTouchStart:this.onPointerDown,ref:t=>this.modalEl=t},s("div",{key:"928af2ff709ec92a5ddde6005f724021cd614211",class:"lightbox__body",role:"document"},s("header",{key:"41e168f72da0cde8f58e93f2c8e88051c6a8b2d7",class:"lightbox__header"},s("div",{key:"abc86233d1b4bcf9d50da4d8bdc99527714a0e88",class:"lightbox__toolbar"},s("slot",{key:"19812235f357b614845c36b3262abfc5cc82c667",name:"toolbar"}),this.downloadButtonEnabled&&s("button",{key:"80a383a841fd5f9dbb11dcf4fbe4dbd7eb1daf74","aria-label":this.downloadButtonLabel,class:"lightbox__download-button",onClick:this.onDownloadButtonClick,type:"button"},s("swirl-icon-download",{key:"25cf58586eca48a8e9615123fab167a1ebe0770a"}))),s("button",{key:"5b9947aa5a7a702533a40b3108ae6dd269de77d3","aria-label":this.closeButtonLabel,class:"lightbox__close-button",onClick:this.onCloseButtonClick,type:"button"},s("swirl-icon-close",{key:"92bfa48dff8df6c6dc92b9e306eaa2209364b47c"}))),s("div",{key:"d4cad7735b9a40b058823dbd5381a0f7e5b05c00","aria-roledescription":"carousel",class:"lightbox__content",role:"group"},s("div",{key:"2c05a7007acf89928e1ee6ff9ced2b64549c1ce7","aria-atomic":"false","aria-live":"polite",class:"lightbox__slides",onClick:this.onBackdropClick,onContextMenu:this.onContextMenu,ref:t=>this.slidesContainer=t},s("slot",{key:"465d675b809063fc182b0ba44a7afbc897be74aa",onSlotchange:this.registerSlides}))),s("div",{key:"443837d9a026f7b4316593d7f4cea3d64fa0d2ae",class:"lightbox__controls"},s("button",{key:"ba87714325f7f56aeffe7d2c61d033d8d30448d7","aria-label":this.previousSlideButtonLabel,class:"lightbox__previous-slide-button",disabled:0===this.activeSlideIndex,onClick:this.onPreviousSlideClick,ref:t=>this.previousSlideButton=t},s("swirl-icon-arrow-left",{key:"8c838e4c37bbd5e617d295c550135e0429990531"})),s("button",{key:"01a2ed3ac6edf555c3084810299f43de9b3ee1e9","aria-label":this.nextSlideButtonLabel,class:"lightbox__next-slide-button",disabled:this.activeSlideIndex===this.slides.length-1,onClick:this.onNextSlideClick,ref:t=>this.nextSlideButton=t},s("swirl-icon-arrow-right",{key:"7f4a9e07b76a6e0015f3fa25e59de4b64e687f49"}))),t&&s("span",{key:"563a03bef0ef53c603f0f1e263483ab5bb995776",class:"lightbox__pagination"},s("span",{key:"706ee9e17fb6f738c8cf651b2e479cff01c9109a","aria-current":"page"},this.activeSlideIndex+1)," /"," ",this.slides.length))))}get el(){return this}static get watchers(){return{activeSlideIndex:[{watchActiveSlideIndex:0}]}}static get style(){return":host{display:block}:host *{box-sizing:border-box}.lightbox{--swirl-lightbox-view-height:100vh;position:fixed;z-index:var(--s-z-40);display:block;overflow:visible;width:auto;max-width:none;height:var(--swirl-lightbox-view-height);max-height:none;margin:0;padding:0;border:none;background-color:rgba(0, 0, 0, 1);inset:0}.lightbox::backdrop{display:none}.lightbox:not([open]){display:none}@supports (height: 100dvh){.lightbox{--swirl-lightbox-view-height:100dvh}}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.8)}}.lightbox:not(.lightbox--closing) .lightbox__body{animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{animation:none}}.lightbox--closing{animation:0.15s lightbox-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{animation:none}}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:calc(var(--s-space-12) + env(safe-area-inset-top, 0))     var(--s-space-16) var(--s-space-12);align-items:flex-start;pointer-events:none;gap:var(--s-space-12);justify-content:space-between}.lightbox__header .lightbox__close-button{order:-1}@media (min-width: 768px){.lightbox__header{justify-content:flex-end}.lightbox__header .lightbox__close-button{order:unset}}.lightbox__toolbar{display:flex;align-items:center;pointer-events:auto;gap:var(--s-space-12)}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__download-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{width:2.25rem;height:2.25rem}}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}"}},[257,"swirl-lightbox",{closeButtonLabel:[1,"close-button-label"],downloadButtonEnabled:[4,"download-button-enabled"],downloadButtonLabel:[1,"download-button-label"],label:[1],nextSlideButtonLabel:[1,"next-slide-button-label"],previousSlideButtonLabel:[1,"previous-slide-button-label"],activeSlideIndex:[32],closing:[32],opening:[32],slides:[32],open:[64],close:[64],activateSlide:[64]},void 0,{activeSlideIndex:[{watchActiveSlideIndex:0}]}]),x=u,p=function(){"undefined"!=typeof customElements&&["swirl-lightbox","swirl-icon-arrow-left","swirl-icon-arrow-right","swirl-icon-close","swirl-icon-download"].forEach((t=>{switch(t){case"swirl-lightbox":customElements.get(a(t))||customElements.define(a(t),u);break;case"swirl-icon-arrow-left":customElements.get(a(t))||c();break;case"swirl-icon-arrow-right":customElements.get(a(t))||b();break;case"swirl-icon-close":customElements.get(a(t))||g();break;case"swirl-icon-download":customElements.get(a(t))||f()}}))};export{x as SwirlLightbox,p as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as o,transformTag as a}from"@stencil/core/internal/client";import{d as n,e as l}from"./body-scroll-lock.js";import{c as h}from"./index2.js";import{t as r}from"./index.esm.js";import{q as d}from"./utils.js";import{d as c}from"./swirl-icon-arrow-left2.js";import{d as b}from"./swirl-icon-arrow-right2.js";import{d as g}from"./swirl-icon-close2.js";import{d as f}from"./swirl-icon-download2.js";const u=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.activeSlideChange=e(this,"activeSlideChange",7),this.lightboxClose=e(this,"lightboxClose",7),this.closeButtonLabel="Close modal",this.downloadButtonEnabled=!0,this.downloadButtonLabel="Download",this.nextSlideButtonLabel="Next slide",this.previousSlideButtonLabel="Previous slide",this.activeSlideIndex=0,this.closing=!1,this.opening=!1,this.componentLoaded=!1,this.dragging=!1,this.onKeyDown=t=>{"Escape"===t.code?(t.stopImmediatePropagation(),t.preventDefault(),this.close()):"ArrowLeft"===t.code?this.onPreviousSlideClick():"ArrowRight"===t.code&&this.onNextSlideClick()},this.preventDragStart=t=>{t.preventDefault()},this.onCloseButtonClick=()=>{this.close()},this.onDownloadButtonClick=()=>{this.slides[this.activeSlideIndex]?.download()},this.onNextSlideClick=()=>{this.activateSlide(Math.min(this.slides.length-1,this.activeSlideIndex+1)),this.activeSlideIndex===this.slides.length-1&&(this.slides.length>1?this.previousSlideButton.focus():r(this.modalEl).at(0)?.focus())},this.onPreviousSlideClick=()=>{this.activateSlide(Math.max(0,this.activeSlideIndex-1)),0===this.activeSlideIndex&&(this.slides.length>1?this.nextSlideButton.focus():r(this.modalEl).at(0)?.focus())},this.registerSlides=()=>{this.removeSlideListeners(),this.slides=Array.from(this.el.children).filter((t=>"SWIRL-FILE-VIEWER"===t.tagName)),this.setSlideAttributes()},this.onPointerDown=t=>{this.slides.length<=1||(this.dragging=!0,this.dragStartPosition=t instanceof MouseEvent?t.clientX:t.touches[0].clientX,this.slides.forEach((t=>{t.style.transition="none"})))},this.onPointerMove=async t=>{if(!this.dragging)return;const i=!(t instanceof MouseEvent)&&t.touches.length>1,e=this.slides[this.activeSlideIndex]?.shadowRoot?.querySelector("swirl-file-viewer-image"),s=!!e&&await e.getZoom()>1;if(i||s)return;t.preventDefault();const o=t instanceof MouseEvent?t.clientX-this.dragStartPosition:t.touches[0].clientX-this.dragStartPosition;this.slides.forEach((t=>{const i=this.activeSlideIndex*t.getBoundingClientRect().width;this.dragDelta=o,t.style.transform=`translate3d(${(-i+this.dragDelta)/16}rem, 0, 0)`}))},this.onPointerUp=()=>{if(!this.dragging)return;this.dragging=!1,this.dragStartPosition=void 0;const t=this.dragDelta/this.slides[this.activeSlideIndex].getBoundingClientRect().width;this.dragDelta=0;const i=t>.2,e=t<-.2;this.slides.forEach((t=>{t.style.transition=""})),i?this.onPreviousSlideClick():e?this.onNextSlideClick():this.resetSlidePositions()},this.onBackdropClick=t=>{t.target===this.slidesContainer&&this.close()},this.onContextMenu=t=>{this.downloadButtonEnabled||t.preventDefault()}}connectedCallback(){this.componentLoaded&&this.registerSlides()}componentWillLoad(){this.registerSlides()}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps(),this.activateSlide(0),this.componentLoaded=!0}disconnectedCallback(){this.unlockBodyScroll(),this.removeSlideListeners(),this.activateSlideTimeout&&clearTimeout(this.activateSlideTimeout),this.closingTimeout&&clearTimeout(this.closingTimeout),this.modalEl?.open&&this.modalEl.close()}watchActiveSlideIndex(){this.activeSlideChange.emit(this.activeSlideIndex)}async open(){this.opening=!0,this.modalEl&&(this.modalEl.showModal(),this.lockBodyScroll(),this.activateSlide(this.activeSlideIndex||0))}async close(){this.closing||(this.closing=!0,this.unlockBodyScroll(),this.closingTimeout&&(clearTimeout(this.closingTimeout),this.closingTimeout=void 0),this.closingTimeout=setTimeout((()=>{this.resetImageZoom(),this.stopAllMediaPlayers(),this.modalEl.close(),this.closing=!1,this.lightboxClose.emit()}),150))}async activateSlide(t){this.dragging=!1,this.activeSlideIndex=t,this.slides.forEach(((t,i)=>{i===this.activeSlideIndex?(t.removeAttribute("aria-hidden"),t.setAttribute("active","true")):i===this.activeSlideIndex-1||i===this.activeSlideIndex+1?(t.setAttribute("aria-hidden","true"),t.setAttribute("active","true")):t.setAttribute("aria-hidden","true"),t.style.transform=`translate3d(-${100*this.activeSlideIndex}%, 0, 0)`})),this.activateSlideTimeout&&(clearTimeout(this.activateSlideTimeout),this.activateSlideTimeout=void 0),this.activateSlideTimeout=setTimeout((()=>{this.slides.forEach(((t,i)=>{i!==this.activeSlideIndex&&i!==this.activeSlideIndex-1&&i!==this.activeSlideIndex+1&&t.setAttribute("active","false")}))}),300),this.stopAllMediaPlayers(),this.resetImageZoom()}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}setSlideAttributes(){this.slides.forEach((t=>{t.setAttribute("active","false"),t.setAttribute("aria-label",t.file),t.setAttribute("aria-roledescription","slide"),t.setAttribute("role","group"),t.addEventListener("dragstart",this.preventDragStart)}))}removeSlideListeners(){this.slides?.forEach((t=>{t.removeEventListener("dragstart",this.preventDragStart)}))}resetSlidePositions(){this.slides.forEach((t=>{t.style.transform=`translate3d(-${100*this.activeSlideIndex}%, 0, 0)`}))}lockBodyScroll(){n(this.el)}unlockBodyScroll(){l(this.el)}getMediaPlayers(){return d(this.el,"video")}stopAllMediaPlayers(){this.getMediaPlayers().forEach((t=>t.pause()))}resetImageZoom(){this.slides.forEach((t=>{const i=t?.shadowRoot?.querySelector("swirl-file-viewer-image");i&&i.resetZoom()}))}render(){const t=this.slides.length>1,i=h("lightbox",{"lightbox--closing":this.closing});return s(o,{key:"99ac3a7686f00d0a902564fdb35a4918a3a347c4"},s("dialog",{key:"301057789672d9f03ce8fdc77357a18268249e0d","aria-label":this.label,class:i,id:"lightbox",onKeyDown:this.onKeyDown,onMouseDown:this.onPointerDown,onMouseMove:this.onPointerMove,onMouseOut:this.onPointerUp,onMouseUp:this.onPointerUp,onTouchEnd:this.onPointerUp,onTouchMove:this.onPointerMove,onTouchStart:this.onPointerDown,ref:t=>this.modalEl=t},s("div",{key:"03ce74eda82310cae97310fe4ef88eeadbfd5a8f",class:"lightbox__body",role:"document"},s("header",{key:"d501c5afdf138b60191c0331dfb079315ef446cf",class:"lightbox__header"},s("div",{key:"383f290e2daa54bb3334601314d96416c1c997fd",class:"lightbox__toolbar"},s("slot",{key:"98003519fa0b91355c9f72819e50bb472615f917",name:"toolbar"}),this.downloadButtonEnabled&&s("button",{key:"767ecce8fe2a67cb1e14994c4cbc1048933a67f8","aria-label":this.downloadButtonLabel,class:"lightbox__download-button",onClick:this.onDownloadButtonClick,type:"button"},s("swirl-icon-download",{key:"708a8876e826bbbb1be4e2117e810aca3146d6ca"}))),s("button",{key:"0f1482d64850e0501c302ee22f49d8bc526f4a56","aria-label":this.closeButtonLabel,class:"lightbox__close-button",onClick:this.onCloseButtonClick,type:"button"},s("swirl-icon-close",{key:"52208cfcc003fed16d1e3f03f08a61be4e9dd3c4"}))),s("div",{key:"d49f0b75ed1f597d09ed7dd1bbf6bc36e68b36c7","aria-roledescription":"carousel",class:"lightbox__content",role:"group"},s("div",{key:"a25bc58eaab70a651609423507d7e7d216c9151b","aria-atomic":"false","aria-live":"polite",class:"lightbox__slides",onClick:this.onBackdropClick,onContextMenu:this.onContextMenu,ref:t=>this.slidesContainer=t},s("slot",{key:"0460712a35272e0328ed48bd13274f54fc66f1cf",onSlotchange:this.registerSlides}))),s("div",{key:"08232f261f87f11046c927157305b5bfbc4e7d77",class:"lightbox__controls"},s("button",{key:"6c4c87ce29fb4179055dae3f1b6fc5f2813677e3","aria-label":this.previousSlideButtonLabel,class:"lightbox__previous-slide-button",disabled:0===this.activeSlideIndex,onClick:this.onPreviousSlideClick,ref:t=>this.previousSlideButton=t},s("swirl-icon-arrow-left",{key:"9f6b3e13a5b601b45f36323fcb962c9872c19c85"})),s("button",{key:"7324cc125fc3612647e477619da340d46c6ea197","aria-label":this.nextSlideButtonLabel,class:"lightbox__next-slide-button",disabled:this.activeSlideIndex===this.slides.length-1,onClick:this.onNextSlideClick,ref:t=>this.nextSlideButton=t},s("swirl-icon-arrow-right",{key:"53f7ab2b7979c80b5b8b1be24d4ef183448833f8"}))),t&&s("span",{key:"a46d9e8ad1b38124568fa3957bc050399280eda3",class:"lightbox__pagination"},s("span",{key:"2b3443eb0002cf1fc51e17954e162bd5c7df6e65","aria-current":"page"},this.activeSlideIndex+1)," /"," ",this.slides.length))))}get el(){return this}static get watchers(){return{activeSlideIndex:[{watchActiveSlideIndex:0}]}}static get style(){return":host{display:block}:host *{box-sizing:border-box}.lightbox{--swirl-lightbox-view-height:100vh;position:fixed;z-index:var(--s-z-40);display:block;overflow:visible;width:auto;max-width:none;height:var(--swirl-lightbox-view-height);max-height:none;margin:0;padding:0;border:none;background-color:rgba(0, 0, 0, 1);inset:0}.lightbox::backdrop{display:none}.lightbox:not([open]){display:none}@supports (height: 100dvh){.lightbox{--swirl-lightbox-view-height:100dvh}}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.8)}}.lightbox:not(.lightbox--closing) .lightbox__body{animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{animation:none}}.lightbox--closing{animation:0.15s lightbox-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{animation:none}}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:calc(var(--s-space-12) + env(safe-area-inset-top, 0))     var(--s-space-16) var(--s-space-12);align-items:flex-start;pointer-events:none;gap:var(--s-space-12);justify-content:space-between}.lightbox__header .lightbox__close-button{order:-1}@media (min-width: 768px){.lightbox__header{justify-content:flex-end}.lightbox__header .lightbox__close-button{order:unset}}.lightbox__toolbar{display:flex;align-items:center;pointer-events:auto;gap:var(--s-space-12)}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__download-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{width:2.25rem;height:2.25rem}}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}"}},[257,"swirl-lightbox",{closeButtonLabel:[1,"close-button-label"],downloadButtonEnabled:[4,"download-button-enabled"],downloadButtonLabel:[1,"download-button-label"],label:[1],nextSlideButtonLabel:[1,"next-slide-button-label"],previousSlideButtonLabel:[1,"previous-slide-button-label"],activeSlideIndex:[32],closing:[32],opening:[32],slides:[32],open:[64],close:[64],activateSlide:[64]},void 0,{activeSlideIndex:[{watchActiveSlideIndex:0}]}]),x=u,p=function(){"undefined"!=typeof customElements&&["swirl-lightbox","swirl-icon-arrow-left","swirl-icon-arrow-right","swirl-icon-close","swirl-icon-download"].forEach((t=>{switch(t){case"swirl-lightbox":customElements.get(a(t))||customElements.define(a(t),u);break;case"swirl-icon-arrow-left":customElements.get(a(t))||c();break;case"swirl-icon-arrow-right":customElements.get(a(t))||b();break;case"swirl-icon-close":customElements.get(a(t))||g();break;case"swirl-icon-download":customElements.get(a(t))||f()}}))};export{x as SwirlLightbox,p as defineCustomElement}

package/dist/components/swirl-link.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,h as i,Host as r,transformTag as n}from"@stencil/core/internal/client";import{c as s}from"./index2.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.color="default"}render(){const e=s("link","link--color-"+this.color);return i(r,{key:"2931cda530c088095cc0122f285d4b4ef2de0d92"},i("a",{key:"4f7e2ee4aacde2bdaab61c264f5816f2cf6484fa",class:e,href:this.href,part:"link",target:this.target},this.label))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.link{color:var(--s-interactive-primary-default);line-height:var(--s-line-height-base);text-underline-offset:var(--s-space-4)}.link:hover{color:var(--s-interactive-primary-hovered)}.link:active{color:var(--s-interactive-primary-pressed)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.link{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.link--color-subdued{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-medium);text-decoration:none}.link--color-subdued:hover{color:var(--s-interactive-neutral-hovered)}.link--color-subdued:active{color:var(--s-interactive-neutral-pressed)}"}},[1,"swirl-link",{color:[1],href:[1],label:[1],target:[1]}]),a=o,l=function(){"undefined"!=typeof customElements&&["swirl-link"].forEach((e=>{"swirl-link"===e&&(customElements.get(n(e))||customElements.define(n(e),o))}))};export{a as SwirlLink,l as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,h as i,Host as r,transformTag as n}from"@stencil/core/internal/client";import{c as s}from"./index2.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.color="default"}render(){const e=s("link","link--color-"+this.color);return i(r,{key:"9e674d16a1d4fd3b82e16253ceabbfd71fcd5005"},i("a",{key:"6d88882ac01ff796280e098d59564437fdc2cf95",class:e,href:this.href,part:"link",target:this.target},this.label))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.link{color:var(--s-interactive-primary-default);line-height:var(--s-line-height-base);text-underline-offset:var(--s-space-4)}.link:hover{color:var(--s-interactive-primary-hovered)}.link:active{color:var(--s-interactive-primary-pressed)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.link{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.link--color-subdued{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-medium);text-decoration:none}.link--color-subdued:hover{color:var(--s-interactive-neutral-hovered)}.link--color-subdued:active{color:var(--s-interactive-neutral-pressed)}"}},[1,"swirl-link",{color:[1],href:[1],label:[1],target:[1]}]),l=o,a=function(){"undefined"!=typeof customElements&&["swirl-link"].forEach((e=>{"swirl-link"===e&&(customElements.get(n(e))||customElements.define(n(e),o))}))};export{l as SwirlLink,a as defineCustomElement}

package/dist/components/swirl-list.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,h as i,Host as l,transformTag as s}from"@stencil/core/internal/client";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}componentDidRender(){Array.from(this.containerEl.children).some((e=>!["UL","OL"].includes(e.tagName)))&&console.warn("[SwirlList] Only ul and ol elements are allowed as direct children of <swirl-list />.")}render(){return i(l,{key:"12db1c7a2394e2052abf5f5f374c57a4104e802e"},i("div",{key:"30bd812f7db0e9894770c528778b209c1e3e0198",class:"swirl-list",ref:e=>this.containerEl=e},i("slot",{key:"483f55341bc3797f72121bd31f54837269d512c7"})))}static get style(){return':host{display:block}:host *{box-sizing:border-box}.swirl-list{line-height:var(--s-line-height-base)}.swirl-list ul,.swirl-list ol{margin:0;padding:0;list-style-position:outside;list-style-type:none}.swirl-list ul li{padding-left:1.5rem}.swirl-list ul li:before{display:inline-block;width:1.5rem;margin-left:-1.5rem;text-align:center;content:"•"}.swirl-list ol{counter-reset:item}.swirl-list ol ol{counter-reset:letter}.swirl-list ol ol li:before{content:counter(letter, lower-alpha) ".";counter-increment:letter}.swirl-list ol li{padding-left:1.5rem}.swirl-list ol li:before{display:inline-block;min-width:1.5rem;margin-left:-1.5rem;padding-right:var(--s-space-8);text-align:right;content:counter(item) ".";counter-increment:item;font-variant-numeric:tabular-nums}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.swirl-list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}'}},[260,"swirl-list"]),n=r,o=function(){"undefined"!=typeof customElements&&["swirl-list"].forEach((e=>{"swirl-list"===e&&(customElements.get(s(e))||customElements.define(s(e),r))}))};export{n as SwirlList,o as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,h as i,Host as l,transformTag as s}from"@stencil/core/internal/client";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}componentDidRender(){Array.from(this.containerEl.children).some((e=>!["UL","OL"].includes(e.tagName)))&&console.warn("[SwirlList] Only ul and ol elements are allowed as direct children of <swirl-list />.")}render(){return i(l,{key:"cc3a191396e90a18d4900b8bfd5a53fcb4f07be3"},i("div",{key:"b2e1db7ea304aa04dc5fa0776c09207349f13ce6",class:"swirl-list",ref:e=>this.containerEl=e},i("slot",{key:"4195556c050496b2367858f93f8613027f6afd55"})))}static get style(){return':host{display:block}:host *{box-sizing:border-box}.swirl-list{line-height:var(--s-line-height-base)}.swirl-list ul,.swirl-list ol{margin:0;padding:0;list-style-position:outside;list-style-type:none}.swirl-list ul li{padding-left:1.5rem}.swirl-list ul li:before{display:inline-block;width:1.5rem;margin-left:-1.5rem;text-align:center;content:"•"}.swirl-list ol{counter-reset:item}.swirl-list ol ol{counter-reset:letter}.swirl-list ol ol li:before{content:counter(letter, lower-alpha) ".";counter-increment:letter}.swirl-list ol li{padding-left:1.5rem}.swirl-list ol li:before{display:inline-block;min-width:1.5rem;margin-left:-1.5rem;padding-right:var(--s-space-8);text-align:right;content:counter(item) ".";counter-increment:item;font-variant-numeric:tabular-nums}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.swirl-list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}'}},[260,"swirl-list"]),n=r,o=function(){"undefined"!=typeof customElements&&["swirl-list"].forEach((e=>{"swirl-list"===e&&(customElements.get(s(e))||customElements.define(s(e),r))}))};export{n as SwirlList,o as defineCustomElement}

package/dist/components/swirl-menu-item.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as i,forceUpdate as s,h as e,Host as n,transformTag as a}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{l as o,m as h}from"./utils.js";import{d as l}from"./swirl-action-list-item2.js";import{d as c}from"./swirl-icon-check-small2.js";import{d}from"./swirl-icon-check-strong2.js";import{d as m}from"./swirl-icon-drag-handle2.js";import{d as u}from"./swirl-option-list-item2.js";const p=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.intent="default",this.truncateLabel=!0,this.hasAvatar=!1,this.onSlotChange=()=>{this.subMenu=this.el.querySelector("swirl-menu"),this.updateActionListItemProps()},this.onActionListItemClick=()=>{this.actionListItem.disabled||this.rootMenu.activateMenuItem(this.el)},this.onOptionListItemClick=()=>{this.optionListItem.disabled||this.parentMenu.updateSelection(this.optionListItem)},this.onOptionListItemKeyDown=t=>{if("Space"===t.code)t.preventDefault();else if("Enter"===t.code){if(this.optionListItem.disabled)return;t.preventDefault(),this.parentMenu.updateSelection(this.optionListItem)}},this.onOptionListItemKeyUp=t=>{if("Space"===t.code){if(this.optionListItem.disabled)return;t.preventDefault(),this.parentMenu.updateSelection(this.optionListItem)}}}componentWillLoad(){this.parentMenu=o(this.el,"swirl-menu"),this.rootMenu=h(this.el,"swirl-menu").pop(),this.subMenu=this.el.querySelector("swirl-menu"),this.updateAvatarState()}watchExpanded(){this.updateActionListItemProps()}async getSubMenu(){return this.subMenu}async updateValue(){s(this)}async getParentMenu(){return this.parentMenu}updateActionListItemProps(){this.actionListItem&&(this.actionListItem.swirlAriaExpanded=this.expanded?"true":void 0,this.actionListItem.swirlAriaHaspopup=this.subMenu?"true":void 0,this.actionListItem.suffix=this.subMenu?'<swirl-icon-chevron-right size="16"></swirl-icon-chevron-right>':void 0)}updateAvatarState(){const t=!!this.el.querySelector('[slot="avatar"]');t!==this.hasAvatar&&(this.hasAvatar=t)}renderActionListItem(){const t=this.subMenu?.value?Array.from(this.subMenu?.querySelectorAll("swirl-menu-item")||[]).find((t=>t.value===this.subMenu?.value))?.label:void 0;return e("swirl-action-list-item",{badge:t,description:this.description,disabled:this.disabled,icon:this.icon,iconBadge:this.iconBadge,intent:this.intent,label:this.label,truncateLabel:this.truncateLabel,onClick:this.onActionListItemClick,ref:t=>this.actionListItem=t,suffix:this.suffix},this.hasAvatar&&e("slot",{name:"avatar",slot:"avatar"}))}renderOptionListItem(){return e("swirl-option-list-item",{disabled:this.disabled,icon:this.icon,iconBadge:this.iconBadge,label:this.label,truncateLabel:this.truncateLabel,onClick:this.onOptionListItemClick,onKeyDown:this.onOptionListItemKeyDown,onKeyUp:this.onOptionListItemKeyUp,ref:t=>this.optionListItem=t,selected:this.parentMenu?.value===this.value,swirlAriaRole:"menuitemradio",value:this.value},this.hasAvatar&&e("slot",{name:"avatar",slot:"avatar"}))}render(){const t=r("menu-item",{"menu-item--expanded":this.expanded});return e(n,{key:"44d4dc9ce85e8f256090d01478c2776dd8aad272"},e("div",{key:"58aced7a0f4d3229d279524b8ed00d25a14d0fa0",class:t},"selection"===this.parentMenu?.variant?this.renderOptionListItem():this.renderActionListItem(),e("slot",{key:"a90b3b34e520948b0b584c531a952f4ba1d2cfa3",onSlotchange:this.onSlotChange})))}get el(){return this}static get watchers(){return{expanded:[{watchExpanded:0}]}}static get style(){return":host{display:block}:host *{box-sizing:border-box}.menu-item--expanded ::part(action-list-item){background-color:var(--s-state-hovered)}"}},[257,"swirl-menu-item",{description:[1],disabled:[4],expanded:[4],icon:[1],iconBadge:[1,"icon-badge"],intent:[1],label:[1],suffix:[1],value:[1],truncateLabel:[4,"truncate-label"],hasAvatar:[32],parentMenu:[32],subMenu:[32],getSubMenu:[64],updateValue:[64],getParentMenu:[64]},void 0,{expanded:[{watchExpanded:0}]}]),w=p,b=function(){"undefined"!=typeof customElements&&["swirl-menu-item","swirl-action-list-item","swirl-icon-check-small","swirl-icon-check-strong","swirl-icon-drag-handle","swirl-option-list-item"].forEach((t=>{switch(t){case"swirl-menu-item":customElements.get(a(t))||customElements.define(a(t),p);break;case"swirl-action-list-item":customElements.get(a(t))||l();break;case"swirl-icon-check-small":customElements.get(a(t))||c();break;case"swirl-icon-check-strong":customElements.get(a(t))||d();break;case"swirl-icon-drag-handle":customElements.get(a(t))||m();break;case"swirl-option-list-item":customElements.get(a(t))||u()}}))};export{w as SwirlMenuItem,b as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as i,forceUpdate as s,h as e,Host as n,transformTag as r}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{l as o,m as h}from"./utils.js";import{d as c}from"./swirl-action-list-item2.js";import{d as l}from"./swirl-icon-check-small2.js";import{d}from"./swirl-icon-check-strong2.js";import{d as m}from"./swirl-icon-drag-handle2.js";import{d as u}from"./swirl-option-list-item2.js";const p=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.intent="default",this.truncateLabel=!0,this.hasAvatar=!1,this.onSlotChange=()=>{this.subMenu=this.el.querySelector("swirl-menu"),this.updateActionListItemProps()},this.onActionListItemClick=()=>{this.actionListItem.disabled||this.rootMenu.activateMenuItem(this.el)},this.onOptionListItemClick=()=>{this.optionListItem.disabled||this.parentMenu.updateSelection(this.optionListItem)},this.onOptionListItemKeyDown=t=>{if("Space"===t.code)t.preventDefault();else if("Enter"===t.code){if(this.optionListItem.disabled)return;t.preventDefault(),this.parentMenu.updateSelection(this.optionListItem)}},this.onOptionListItemKeyUp=t=>{if("Space"===t.code){if(this.optionListItem.disabled)return;t.preventDefault(),this.parentMenu.updateSelection(this.optionListItem)}}}componentWillLoad(){this.parentMenu=o(this.el,"swirl-menu"),this.rootMenu=h(this.el,"swirl-menu").pop(),this.subMenu=this.el.querySelector("swirl-menu"),this.updateAvatarState()}watchExpanded(){this.updateActionListItemProps()}async getSubMenu(){return this.subMenu}async updateValue(){s(this)}async getParentMenu(){return this.parentMenu}updateActionListItemProps(){this.actionListItem&&(this.actionListItem.swirlAriaExpanded=this.expanded?"true":void 0,this.actionListItem.swirlAriaHaspopup=this.subMenu?"true":void 0,this.actionListItem.suffix=this.subMenu?'<swirl-icon-chevron-right size="16"></swirl-icon-chevron-right>':void 0)}updateAvatarState(){const t=!!this.el.querySelector('[slot="avatar"]');t!==this.hasAvatar&&(this.hasAvatar=t)}renderActionListItem(){const t=this.subMenu?.value?Array.from(this.subMenu?.querySelectorAll("swirl-menu-item")||[]).find((t=>t.value===this.subMenu?.value))?.label:void 0;return e("swirl-action-list-item",{badge:t,description:this.description,disabled:this.disabled,icon:this.icon,iconBadge:this.iconBadge,intent:this.intent,label:this.label,truncateLabel:this.truncateLabel,onClick:this.onActionListItemClick,ref:t=>this.actionListItem=t,suffix:this.suffix},this.hasAvatar&&e("slot",{name:"avatar",slot:"avatar"}))}renderOptionListItem(){return e("swirl-option-list-item",{disabled:this.disabled,icon:this.icon,iconBadge:this.iconBadge,label:this.label,truncateLabel:this.truncateLabel,onClick:this.onOptionListItemClick,onKeyDown:this.onOptionListItemKeyDown,onKeyUp:this.onOptionListItemKeyUp,ref:t=>this.optionListItem=t,selected:this.parentMenu?.value===this.value,swirlAriaRole:"menuitemradio",value:this.value},this.hasAvatar&&e("slot",{name:"avatar",slot:"avatar"}))}render(){const t=a("menu-item",{"menu-item--expanded":this.expanded});return e(n,{key:"2e35fee489e3da5de328e00e79f5b8e89d36ebd4"},e("div",{key:"cf743ce2b074c2c3e30dd369a7cdd840ce4a0683",class:t},"selection"===this.parentMenu?.variant?this.renderOptionListItem():this.renderActionListItem(),e("slot",{key:"78d27122dd1cf3dbb76b007e71f46a96a4bf536d",onSlotchange:this.onSlotChange})))}get el(){return this}static get watchers(){return{expanded:[{watchExpanded:0}]}}static get style(){return":host{display:block}:host *{box-sizing:border-box}.menu-item--expanded ::part(action-list-item){background-color:var(--s-state-hovered)}"}},[257,"swirl-menu-item",{description:[1],disabled:[4],expanded:[4],icon:[1],iconBadge:[1,"icon-badge"],intent:[1],label:[1],suffix:[1],value:[1],truncateLabel:[4,"truncate-label"],hasAvatar:[32],parentMenu:[32],subMenu:[32],getSubMenu:[64],updateValue:[64],getParentMenu:[64]},void 0,{expanded:[{watchExpanded:0}]}]),w=p,b=function(){"undefined"!=typeof customElements&&["swirl-menu-item","swirl-action-list-item","swirl-icon-check-small","swirl-icon-check-strong","swirl-icon-drag-handle","swirl-option-list-item"].forEach((t=>{switch(t){case"swirl-menu-item":customElements.get(r(t))||customElements.define(r(t),p);break;case"swirl-action-list-item":customElements.get(r(t))||c();break;case"swirl-icon-check-small":customElements.get(r(t))||l();break;case"swirl-icon-check-strong":customElements.get(r(t))||d();break;case"swirl-icon-drag-handle":customElements.get(r(t))||m();break;case"swirl-option-list-item":customElements.get(r(t))||u()}}))};export{w as SwirlMenuItem,b as defineCustomElement}

package/dist/components/swirl-menu.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,Host as n,transformTag as o}from"@stencil/core/internal/client";import{c as a,a as h,o as l,s as r,f as m}from"./floating-ui.dom.js";import{c as u}from"./index2.js";import{q as c,l as d,m as b,i as f,k as p}from"./utils.js";import{d as w}from"./swirl-button2.js";import{d as v}from"./swirl-heading2.js";const y=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.done=i(this,"done",7),this.valueChange=i(this,"valueChange",7),this.active=!0,this.level=0,this.mobileBackButtonLabel="Back",this.mobileCloseMenuButtonLabel="Close menu",this.placement="right-start",this.mobileDoneButtonLabel="Done",this.variant="action",this.activeLevel=0,this.mobileMediaQuery=window.matchMedia("(min-width: 768px)"),this.mediaQueryHandler=()=>{this.updateMobileState()},this.resetMenu=()=>{this.items.forEach((t=>{t.tabIndex=-1})),this.level>0||setTimeout((()=>{this.activeLevel=0,c(this.el,"swirl-menu").forEach((t=>{t.active=!1,t.parentElement.expanded=!1}))}),this.mobile?200:60)},this.closeMenu=()=>{this.disableAutoUpdate&&this.disableAutoUpdate(),this.swirlPopover.close(),this.resetMenu()},this.reposition=async()=>{if(this.mobile||0===this.level)return void(this.position=void 0);const t=this.el.parentElement;t&&this.menuContainer&&requestAnimationFrame((async()=>{this.position=await a(t,this.menuContainer,{placement:this.placement,strategy:"fixed",middleware:[l({mainAxis:-10,crossAxis:0}),r(),m()]})}))},this.onKeyDown=t=>{if("ArrowDown"===t.code)t.preventDefault(),t.stopPropagation(),this.focusNextItem();else if("ArrowUp"===t.code)t.preventDefault(),t.stopPropagation(),this.focusPreviousItem();else if("ArrowLeft"===t.code)t.preventDefault(),t.stopPropagation(),this.rootMenu.goBack();else if("ArrowRight"===t.code){t.preventDefault();const e=d(this.items[this.getActiveItemIndex()],"swirl-menu-item");if(!e)return;this.rootMenu.activateMenuItem(e)}},this.onClose=()=>{this.closeMenu()},this.onDone=()=>{this.closeMenu(),this.done.emit()},this.onGoBack=()=>{this.rootMenu.goBack()}}componentWillLoad(){this.updateMobileState(),this.updateLevel(),this.observeSlotChanges()}componentDidLoad(){this.mobileMediaQuery.addEventListener("change",this.mediaQueryHandler),this.parentMenu=d(this.el.parentElement,"swirl-menu"),this.swirlPopover=d(this.el,"swirl-popover"),this.rootMenu=b(this.el,"swirl-menu").pop(),this.parentMenu&&queueMicrotask((()=>{this.active=!1})),this.swirlPopover.addEventListener("popoverClose",this.resetMenu),this.updateItems()}disconnectedCallback(){this.swirlPopover?.removeEventListener("popoverClose",this.resetMenu),this.mobileMediaQuery.removeEventListener?.("change",this.mediaQueryHandler),this.observer?.disconnect()}watchActive(){this.position=void 0,this.reposition(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=h(this.el.parentElement,this.menuContainer,this.reposition)}watchValue(){this.updateActiveItem()}async activateMenuItem(t){if(this.parentMenu)return;const e=await t.getParentMenu(),i=c(this.el,"swirl-menu").filter((t=>t.level>=e.level&&t!==e));i.forEach((t=>{t.active=!1,t.parentElement.expanded=!1}));const s=await t.getSubMenu();s&&(t.expanded=!0,s.active=!0,this.activeLevel=s.level,setTimeout((()=>{s.focusFirstItem()}),this.mobile?200:60))}async close(){this.closeMenu()}async goBack(){if(this.parentMenu||0===this.activeLevel)return;const t=(c(this.el,"swirl-menu").find((t=>t.level===this.activeLevel&&t.active))||this.rootMenu).parentElement;t.expanded=!1,this.activeLevel=Math.max(this.activeLevel-1,0),c(this.el,"swirl-menu").filter((t=>t.level>this.activeLevel)).forEach((t=>{t.active=!1})),(c(this.el,"swirl-menu").find((t=>t.level===this.activeLevel&&t.active))||this.rootMenu).focusItemAtIndex(Array.from(t.parentElement.children).indexOf(t))}async focusFirstItem(){this.focusItem(this.items[0])}async focusItemAtIndex(t){this.focusItem(this.items[t])}async updateSelection(t){this.valueChange.emit(t.value)}async updateActiveItem(){c(this.el,"swirl-menu-item").filter((t=>d(t,"swirl-menu")===this.el)).forEach((t=>{t.updateValue()})),this.parentMenu&&"action"===this.parentMenu.variant&&this.parentMenu.updateActiveItem()}observeSlotChanges(){this.observer=new MutationObserver((()=>{requestAnimationFrame((()=>{this.updateItems()}))})),this.observer.observe(this.el,{childList:!0})}updateMobileState(){const t=f();t!==this.mobile&&(this.mobile=t)}updateItems(){this.items=[...c(this.el,'[role="menuitem"]'),...c(this.el,'[role="menuitemradio"]')].filter((t=>d(t,"swirl-menu")===this.el))}updateLevel(){const t=b(this.el.parentNode,"swirl-menu");this.level=t.length}focusItem(t){[...c(this.rootMenu,'[role="menuitem"]'),...c(this.rootMenu,'[role="menuitemradio"]')].forEach((t=>{t.tabIndex=-1})),t&&(t.tabIndex=0,t.focus())}focusNextItem(){const t=this.getActiveItemIndex();this.focusItem(this.items[(t+1)%this.items.length])}focusPreviousItem(){const t=this.getActiveItemIndex();this.focusItem(this.items[0===t?this.items.length-1:t-1])}getActiveItemIndex(){const t=p();return this.items.findIndex((e=>e===t||e===t?.querySelector('[role="menuitem"]')||e===t?.querySelector('[role="menuitemradio"]')))}render(){const t=!this.parentMenu,e=t&&this.mobile?void 0:this.label,i=t&&this.mobile?"menu-title":void 0,o=t?"menubar":"menu",a=u("menu","menu--level-"+this.level,{"menu--active":this.active,"menu--mobile":this.mobile,"menu--root":t});return s(n,{key:"b5ad819aaff829f9e4fe39e3d3e9b113c9f68b7d"},s("div",{key:"45fff2f64a8e8e51e45a316e2ab5efa067192de9",class:a},this.mobile&&t&&s("div",{key:"aa0a02960914766af8c4e8bba1b9fba6cc514616",class:"menu__mobile-header"},0===this.activeLevel&&s("swirl-button",{key:"ad2090c90a617711d9f77a619c3aeecddf824243",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.mobileCloseMenuButtonLabel,onClick:this.onClose,variant:"plain"}),this.activeLevel>0&&s("swirl-button",{key:"592db26025c43f6760199b68ebc4decb93b5ae96",hideLabel:!0,icon:"<swirl-icon-chevron-left></swirl-icon-chevron-left>",label:this.mobileBackButtonLabel,onClick:this.onGoBack,variant:"plain"}),s("span",{key:"ec2daf54a9467190c282e6f54d5fe0b22d8771a8",class:"menu__title",id:"menu-title"},s("swirl-heading",{key:"d475c57779832125f08a39cc69753d83029d4772",align:"center",as:"span",level:4,text:this.label,truncate:!0})),s("swirl-button",{key:"32093ff3129acb64e8f65ae870cabcf1f9cab602",class:"menu__done-button",intent:"primary",label:this.mobileDoneButtonLabel,onClick:this.onDone})),s("div",{key:"97c93ba8c70b726c1e3122f5b3ad4f70d2566d6d","aria-label":e,"aria-labelledby":i,"aria-orientation":"vertical",class:"menu__menu",onKeyDown:this.onKeyDown,ref:t=>this.menuContainer=t,role:o,style:!this.mobile&&this.level>0?{top:this.position?this.position?.y+"px":"",left:this.position?this.position?.x+"px":"",opacity:this.position?void 0:"0"}:this.mobile?{left:t?`calc(-100% * ${this.activeLevel})`:"100%"}:void 0},s("slot",{key:"b634b69c59778562eafca8a7ded1dd2f5ec66bd8"}))))}get el(){return this}static get watchers(){return{active:[{watchActive:0}],value:[{watchValue:0}]}}static get style(){return':host{display:block}:host *{box-sizing:border-box}.menu{width:100%}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile):not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-2);padding:var(--s-space-4);outline:var(--s-border-width-default) solid var(--s-border-translucent-outline)}:not(.menu--mobile):not(.menu--root) .menu__menu:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l))}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}'}},[257,"swirl-menu",{active:[1028],label:[1],level:[1026],mobileBackButtonLabel:[1,"mobile-back-button-label"],mobileCloseMenuButtonLabel:[1,"mobile-close-menu-button-label"],placement:[1],mobileDoneButtonLabel:[1,"mobile-done-button-label"],value:[1],variant:[1],activeLevel:[32],mobile:[32],position:[32],activateMenuItem:[64],close:[64],goBack:[64],focusFirstItem:[64],focusItemAtIndex:[64],updateSelection:[64],updateActiveItem:[64]},void 0,{active:[{watchActive:0}],value:[{watchValue:0}]}]),g=y,_=function(){"undefined"!=typeof customElements&&["swirl-menu","swirl-button","swirl-heading"].forEach((t=>{switch(t){case"swirl-menu":customElements.get(o(t))||customElements.define(o(t),y);break;case"swirl-button":customElements.get(o(t))||w();break;case"swirl-heading":customElements.get(o(t))||v()}}))};export{g as SwirlMenu,_ as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,Host as n,transformTag as o}from"@stencil/core/internal/client";import{c as a,a as h,o as l,s as r,f as c}from"./floating-ui.dom.js";import{c as m}from"./index2.js";import{q as u,l as d,m as b,i as f,k as p}from"./utils.js";import{d as w}from"./swirl-button2.js";import{d as v}from"./swirl-heading2.js";const y=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.done=i(this,"done",7),this.valueChange=i(this,"valueChange",7),this.active=!0,this.level=0,this.mobileBackButtonLabel="Back",this.mobileCloseMenuButtonLabel="Close menu",this.placement="right-start",this.mobileDoneButtonLabel="Done",this.variant="action",this.activeLevel=0,this.mobileMediaQuery=window.matchMedia("(min-width: 768px)"),this.mediaQueryHandler=()=>{this.updateMobileState()},this.resetMenu=()=>{this.items.forEach((t=>{t.tabIndex=-1})),this.level>0||setTimeout((()=>{this.activeLevel=0,u(this.el,"swirl-menu").forEach((t=>{t.active=!1,t.parentElement.expanded=!1}))}),this.mobile?200:60)},this.closeMenu=()=>{this.disableAutoUpdate&&this.disableAutoUpdate(),this.swirlPopover.close(),this.resetMenu()},this.reposition=async()=>{if(this.mobile||0===this.level)return void(this.position=void 0);const t=this.el.parentElement;t&&this.menuContainer&&requestAnimationFrame((async()=>{this.position=await a(t,this.menuContainer,{placement:this.placement,strategy:"fixed",middleware:[l({mainAxis:-10,crossAxis:0}),r(),c()]})}))},this.onKeyDown=t=>{if("ArrowDown"===t.code)t.preventDefault(),t.stopPropagation(),this.focusNextItem();else if("ArrowUp"===t.code)t.preventDefault(),t.stopPropagation(),this.focusPreviousItem();else if("ArrowLeft"===t.code)t.preventDefault(),t.stopPropagation(),this.rootMenu.goBack();else if("ArrowRight"===t.code){t.preventDefault();const e=d(this.items[this.getActiveItemIndex()],"swirl-menu-item");if(!e)return;this.rootMenu.activateMenuItem(e)}},this.onClose=()=>{this.closeMenu()},this.onDone=()=>{this.closeMenu(),this.done.emit()},this.onGoBack=()=>{this.rootMenu.goBack()}}componentWillLoad(){this.updateMobileState(),this.updateLevel(),this.observeSlotChanges()}componentDidLoad(){this.mobileMediaQuery.addEventListener("change",this.mediaQueryHandler),this.parentMenu=d(this.el.parentElement,"swirl-menu"),this.swirlPopover=d(this.el,"swirl-popover"),this.rootMenu=b(this.el,"swirl-menu").pop(),this.parentMenu&&queueMicrotask((()=>{this.active=!1})),this.swirlPopover.addEventListener("popoverClose",this.resetMenu),this.updateItems()}disconnectedCallback(){this.swirlPopover?.removeEventListener("popoverClose",this.resetMenu),this.mobileMediaQuery.removeEventListener?.("change",this.mediaQueryHandler),this.observer?.disconnect()}watchActive(){this.position=void 0,this.reposition(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=h(this.el.parentElement,this.menuContainer,this.reposition)}watchValue(){this.updateActiveItem()}async activateMenuItem(t){if(this.parentMenu)return;const e=await t.getParentMenu(),i=u(this.el,"swirl-menu").filter((t=>t.level>=e.level&&t!==e));i.forEach((t=>{t.active=!1,t.parentElement.expanded=!1}));const s=await t.getSubMenu();s&&(t.expanded=!0,s.active=!0,this.activeLevel=s.level,setTimeout((()=>{s.focusFirstItem()}),this.mobile?200:60))}async close(){this.closeMenu()}async goBack(){if(this.parentMenu||0===this.activeLevel)return;const t=(u(this.el,"swirl-menu").find((t=>t.level===this.activeLevel&&t.active))||this.rootMenu).parentElement;t.expanded=!1,this.activeLevel=Math.max(this.activeLevel-1,0),u(this.el,"swirl-menu").filter((t=>t.level>this.activeLevel)).forEach((t=>{t.active=!1})),(u(this.el,"swirl-menu").find((t=>t.level===this.activeLevel&&t.active))||this.rootMenu).focusItemAtIndex(Array.from(t.parentElement.children).indexOf(t))}async focusFirstItem(){this.focusItem(this.items[0])}async focusItemAtIndex(t){this.focusItem(this.items[t])}async updateSelection(t){this.valueChange.emit(t.value)}async updateActiveItem(){u(this.el,"swirl-menu-item").filter((t=>d(t,"swirl-menu")===this.el)).forEach((t=>{t.updateValue()})),this.parentMenu&&"action"===this.parentMenu.variant&&this.parentMenu.updateActiveItem()}observeSlotChanges(){this.observer=new MutationObserver((()=>{requestAnimationFrame((()=>{this.updateItems()}))})),this.observer.observe(this.el,{childList:!0})}updateMobileState(){const t=f();t!==this.mobile&&(this.mobile=t)}updateItems(){this.items=[...u(this.el,'[role="menuitem"]'),...u(this.el,'[role="menuitemradio"]')].filter((t=>d(t,"swirl-menu")===this.el))}updateLevel(){const t=b(this.el.parentNode,"swirl-menu");this.level=t.length}focusItem(t){[...u(this.rootMenu,'[role="menuitem"]'),...u(this.rootMenu,'[role="menuitemradio"]')].forEach((t=>{t.tabIndex=-1})),t&&(t.tabIndex=0,t.focus())}focusNextItem(){const t=this.getActiveItemIndex();this.focusItem(this.items[(t+1)%this.items.length])}focusPreviousItem(){const t=this.getActiveItemIndex();this.focusItem(this.items[0===t?this.items.length-1:t-1])}getActiveItemIndex(){const t=p();return this.items.findIndex((e=>e===t||e===t?.querySelector('[role="menuitem"]')||e===t?.querySelector('[role="menuitemradio"]')))}render(){const t=!this.parentMenu,e=t&&this.mobile?void 0:this.label,i=t&&this.mobile?"menu-title":void 0,o=t?"menubar":"menu",a=m("menu","menu--level-"+this.level,{"menu--active":this.active,"menu--mobile":this.mobile,"menu--root":t});return s(n,{key:"d4f95b5e7909c159d8ca5c9a02f36accc6694764"},s("div",{key:"da2779ac100cd9b71ffbbf3ba315defa7a7260b3",class:a},this.mobile&&t&&s("div",{key:"f5a5c1774ac9b15a423cc79884cab91184a454a2",class:"menu__mobile-header"},0===this.activeLevel&&s("swirl-button",{key:"0727a7204c41bdeeb780ecd2944ae9af10e471e0",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.mobileCloseMenuButtonLabel,onClick:this.onClose,variant:"plain"}),this.activeLevel>0&&s("swirl-button",{key:"bfdf9e0f7b5f998e00033e8f29e406c06190adfc",hideLabel:!0,icon:"<swirl-icon-chevron-left></swirl-icon-chevron-left>",label:this.mobileBackButtonLabel,onClick:this.onGoBack,variant:"plain"}),s("span",{key:"55a328265717055e37d328bd3a5397827af00081",class:"menu__title",id:"menu-title"},s("swirl-heading",{key:"eb7e9c991ba8dfe2a09a904575bf7528e07cadbe",align:"center",as:"span",level:4,text:this.label,truncate:!0})),s("swirl-button",{key:"43511203658cd8869fea5df48061ded990aa81ce",class:"menu__done-button",intent:"primary",label:this.mobileDoneButtonLabel,onClick:this.onDone})),s("div",{key:"32cdc268dc2c4f0a249bf7966c3094bf841f57f5","aria-label":e,"aria-labelledby":i,"aria-orientation":"vertical",class:"menu__menu",onKeyDown:this.onKeyDown,ref:t=>this.menuContainer=t,role:o,style:!this.mobile&&this.level>0?{top:this.position?this.position?.y+"px":"",left:this.position?this.position?.x+"px":"",opacity:this.position?void 0:"0"}:this.mobile?{left:t?`calc(-100% * ${this.activeLevel})`:"100%"}:void 0},s("slot",{key:"ba834e3cc69de93c056ccd153ebdfd9f6057901d"}))))}get el(){return this}static get watchers(){return{active:[{watchActive:0}],value:[{watchValue:0}]}}static get style(){return':host{display:block}:host *{box-sizing:border-box}.menu{width:100%}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile):not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-2);padding:var(--s-space-4);outline:var(--s-border-width-default) solid var(--s-border-translucent-outline)}:not(.menu--mobile):not(.menu--root) .menu__menu:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l))}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}'}},[257,"swirl-menu",{active:[1028],label:[1],level:[1026],mobileBackButtonLabel:[1,"mobile-back-button-label"],mobileCloseMenuButtonLabel:[1,"mobile-close-menu-button-label"],placement:[1],mobileDoneButtonLabel:[1,"mobile-done-button-label"],value:[1],variant:[1],activeLevel:[32],mobile:[32],position:[32],activateMenuItem:[64],close:[64],goBack:[64],focusFirstItem:[64],focusItemAtIndex:[64],updateSelection:[64],updateActiveItem:[64]},void 0,{active:[{watchActive:0}],value:[{watchValue:0}]}]),g=y,_=function(){"undefined"!=typeof customElements&&["swirl-menu","swirl-button","swirl-heading"].forEach((t=>{switch(t){case"swirl-menu":customElements.get(o(t))||customElements.define(o(t),y);break;case"swirl-button":customElements.get(o(t))||w();break;case"swirl-heading":customElements.get(o(t))||v()}}))};export{g as SwirlMenu,_ as defineCustomElement}

package/dist/components/swirl-modal-shell.js

@@ -1 +1 @@
-import{proxyCustomElement as s,HTMLElement as l,createEvent as e,h as o,Host as t,transformTag as i}from"@stencil/core/internal/client";import{d as a,e as c}from"./body-scroll-lock.js";import{c as r}from"./index2.js";import{d as n}from"./swirl-button2.js";const d=s(class extends l{constructor(s){super(),!1!==s&&this.__registerHost(),this.closeModal=e(this,"closeModal",7),this.isClosing=!0,this.onDialogClose=()=>{this.closeModal.emit()},this.onKeyDown=s=>{"Escape"===s.code&&(s.stopImmediatePropagation(),s.preventDefault(),this.close())},this.onContentClick=s=>{s.stopPropagation()},this.onClose=()=>{this.close()}}componentDidLoad(){this.setDialogCustomProps(),requestAnimationFrame((()=>{this.modalEl.showModal(),a(this.scrollContainerEl),this.isClosing=!1}))}disconnectedCallback(){this.modalEl?.open&&this.modalEl.close(),c(this.scrollContainerEl)}async close(){this.isClosing=!0,setTimeout((()=>{this.modalEl.close()}),300)}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}render(){const s=r("modal-shell",{"modal-shell--closing":this.isClosing});return o(t,{key:"3583015bd4729ffb458290ccf7fecd5e1dc01d8c"},o("dialog",{key:"0427430e074962fea3690f4c8877a7f3f75e8102","aria-label":this.label,class:s,onClose:this.onDialogClose,onKeyDown:this.onKeyDown,ref:s=>this.modalEl=s},o("div",{key:"472475a61d276b948f7b594a96e0b344d402bc0f",class:"modal-shell__backdrop"}),o("div",{key:"302f68e1febd201356dacd6a83b09c6c7f2e26cf",class:"modal-shell__scroll-container",onClick:this.onClose,ref:s=>this.scrollContainerEl=s},o("div",{key:"005e6fedbdf169d4c48498b6cc068e3fa643a6a8",class:"modal-shell__scroll-container__content",onClick:this.onContentClick},o("slot",{key:"7de0f52c3062ad2ba0c242dd1124a63e69c6a0e3"}))),o("swirl-button",{key:"fa5c28de57dcb9693ecf7f3eb1c6f875f6ced258",class:"modal-shell__close-button",icon:"<swirl-icon-close color='strong'></swirl-icon-close>",label:this.closeButtonLabel,hideLabel:!0,variant:"translucent",onClick:this.onClose})))}static get style(){return".sc-swirl-modal-shell-h{display:block}.sc-swirl-modal-shell-h *.sc-swirl-modal-shell{box-sizing:border-box}.modal-shell.sc-swirl-modal-shell{position:fixed;inset:0;z-index:var(--s-z-40);border:none;padding:0;width:100%;height:100%;max-width:none;max-height:none;overflow:visible;background:transparent}.modal-shell.sc-swirl-modal-shell::backdrop{display:none}.modal-shell__backdrop.sc-swirl-modal-shell{position:fixed;inset:0;z-index:1;background-color:var(--s-translucent-medium-default);opacity:1;-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));transition:opacity 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out}.modal-shell__scroll-container.sc-swirl-modal-shell{overflow-y:auto;position:fixed;inset:0;z-index:2;display:grid;padding:calc(var(--s-space-24) + env(safe-area-inset-top, 0))     var(--s-space-24) var(--s-space-24);justify-content:center;align-items:center}.modal-shell__scroll-container__content.sc-swirl-modal-shell{opacity:1;transform:scale(1);transition:opacity 0.2s ease-out,     transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell__close-button.sc-swirl-modal-shell{position:fixed;top:calc(var(--s-space-16) + env(safe-area-inset-top, 0));right:var(--s-space-16);z-index:3;opacity:1;transform:scale(1);transition:opacity 0.2s ease-out,     transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell--closing.sc-swirl-modal-shell .modal-shell__backdrop.sc-swirl-modal-shell{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}.modal-shell--closing.sc-swirl-modal-shell .modal-shell__scroll-container__content.sc-swirl-modal-shell,.modal-shell--closing.sc-swirl-modal-shell .modal-shell__close-button.sc-swirl-modal-shell{opacity:0;transform:scale(1.1)}"}},[262,"swirl-modal-shell",{label:[1],closeButtonLabel:[1,"close-button-label"],isClosing:[32],close:[64]}]),h=d,m=function(){"undefined"!=typeof customElements&&["swirl-modal-shell","swirl-button"].forEach((s=>{switch(s){case"swirl-modal-shell":customElements.get(i(s))||customElements.define(i(s),d);break;case"swirl-button":customElements.get(i(s))||n()}}))};export{h as SwirlModalShell,m as defineCustomElement}
+import{proxyCustomElement as s,HTMLElement as l,createEvent as e,h as o,Host as a,transformTag as t}from"@stencil/core/internal/client";import{d as i,e as c}from"./body-scroll-lock.js";import{c as r}from"./index2.js";import{d as n}from"./swirl-button2.js";const d=s(class extends l{constructor(s){super(),!1!==s&&this.__registerHost(),this.closeModal=e(this,"closeModal",7),this.isClosing=!0,this.onDialogClose=()=>{this.closeModal.emit()},this.onKeyDown=s=>{"Escape"===s.code&&(s.stopImmediatePropagation(),s.preventDefault(),this.close())},this.onContentClick=s=>{s.stopPropagation()},this.onClose=()=>{this.close()}}componentDidLoad(){this.setDialogCustomProps(),requestAnimationFrame((()=>{this.modalEl.showModal(),i(this.scrollContainerEl),this.isClosing=!1}))}disconnectedCallback(){this.modalEl?.open&&this.modalEl.close(),c(this.scrollContainerEl)}async close(){this.isClosing=!0,setTimeout((()=>{this.modalEl.close()}),300)}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}render(){const s=r("modal-shell",{"modal-shell--closing":this.isClosing});return o(a,{key:"1aea0ca363d193685f3f1ac066063c08d3a7f0e6"},o("dialog",{key:"666f287cab68ef5e4a96bf8bd310b470fd709f38","aria-label":this.label,class:s,onClose:this.onDialogClose,onKeyDown:this.onKeyDown,ref:s=>this.modalEl=s},o("div",{key:"956e7a78ab63d146201d6ce628b1393ea7ca44e5",class:"modal-shell__backdrop"}),o("div",{key:"c34ccc5b1a81515b41838629f3dc88cb41312e6d",class:"modal-shell__scroll-container",onClick:this.onClose,ref:s=>this.scrollContainerEl=s},o("div",{key:"a3d7f773c252ca91827b573f8c76756a2d041d81",class:"modal-shell__scroll-container__content",onClick:this.onContentClick},o("slot",{key:"e5cf54d06123545ea26366ab09e19c3fcca29cb4"}))),o("swirl-button",{key:"a7a9a32b66fb759b2c265a607d774eb87374e742",class:"modal-shell__close-button",icon:"<swirl-icon-close color='strong'></swirl-icon-close>",label:this.closeButtonLabel,hideLabel:!0,variant:"translucent",onClick:this.onClose})))}static get style(){return".sc-swirl-modal-shell-h{display:block}.sc-swirl-modal-shell-h *.sc-swirl-modal-shell{box-sizing:border-box}.modal-shell.sc-swirl-modal-shell{position:fixed;inset:0;z-index:var(--s-z-40);border:none;padding:0;width:100%;height:100%;max-width:none;max-height:none;overflow:visible;background:transparent}.modal-shell.sc-swirl-modal-shell::backdrop{display:none}.modal-shell__backdrop.sc-swirl-modal-shell{position:fixed;inset:0;z-index:1;background-color:var(--s-translucent-medium-default);opacity:1;-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));transition:opacity 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out}.modal-shell__scroll-container.sc-swirl-modal-shell{overflow-y:auto;position:fixed;inset:0;z-index:2;display:grid;padding:calc(var(--s-space-24) + env(safe-area-inset-top, 0))     var(--s-space-24) var(--s-space-24);justify-content:center;align-items:center}.modal-shell__scroll-container__content.sc-swirl-modal-shell{opacity:1;transform:scale(1);transition:opacity 0.2s ease-out,     transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell__close-button.sc-swirl-modal-shell{position:fixed;top:calc(var(--s-space-16) + env(safe-area-inset-top, 0));right:var(--s-space-16);z-index:3;opacity:1;transform:scale(1);transition:opacity 0.2s ease-out,     transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell--closing.sc-swirl-modal-shell .modal-shell__backdrop.sc-swirl-modal-shell{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}.modal-shell--closing.sc-swirl-modal-shell .modal-shell__scroll-container__content.sc-swirl-modal-shell,.modal-shell--closing.sc-swirl-modal-shell .modal-shell__close-button.sc-swirl-modal-shell{opacity:0;transform:scale(1.1)}"}},[262,"swirl-modal-shell",{label:[1],closeButtonLabel:[1,"close-button-label"],isClosing:[32],close:[64]}]),h=d,b=function(){"undefined"!=typeof customElements&&["swirl-modal-shell","swirl-button"].forEach((s=>{switch(s){case"swirl-modal-shell":customElements.get(t(s))||customElements.define(t(s),d);break;case"swirl-button":customElements.get(t(s))||n()}}))};export{h as SwirlModalShell,b as defineCustomElement}

package/dist/components/swirl-modal.js

@@ -1 +1 @@
-import{proxyCustomElement as a,HTMLElement as o,createEvent as e,h as d,Host as t,transformTag as s}from"@stencil/core/internal/client";import{c as i}from"./index2.js";import{t as r}from"./index.esm.js";import{d as l,e as n}from"./body-scroll-lock.js";import{d as m}from"./swirl-button2.js";import{d as h}from"./swirl-button-group2.js";import{d as c}from"./swirl-heading2.js";import{d as b}from"./swirl-stack2.js";const f=a(class extends o{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.toggleFullscreen=e(this,"toggleFullscreen",3),this.modalClose=e(this,"modalClose",3),this.modalOpen=e(this,"modalOpen",3),this.primaryAction=e(this,"primaryAction",3),this.requestModalClose=e(this,"requestModalClose",3),this.secondaryAction=e(this,"secondaryAction",3),this.sidebarClose=e(this,"sidebarClose",3),this.toggleDialog=e(this,"toggleDialog",7),this.closable=!0,this.closeButtonLabel="Close modal",this.fullscreenEnableButtonLabel="Full screen",this.fullscreenDisableButtonLabel="Exit full screen",this.padded=!0,this.variant="default",this.sidebarPadded=!0,this.sidebarFooterPadded=!0,this.sidebarCloseButtonLabel="Close sidebar",this.opening=!1,this.isFullscreen=!1,this.isFullscreenTransitioning=!1,this.closing=!1,this.scrollable=!1,this.scrolled=!1,this.scrolledDown=!1,this.sidebarScrolled=!1,this.sidebarScrolledDown=!1,this.sidebarScrollable=!1,this.onKeyDown=a=>{"Escape"===a.code&&(a.stopImmediatePropagation(),a.preventDefault(),this.close())},this.onClose=()=>{this.closing=!1,this.unlockBodyScroll(),this.modalClose.emit()},this.onToggle=a=>{const o={newState:a.newState,dialog:this.modalEl};this.el.isConnected?this.toggleDialog.emit(o):document.dispatchEvent(new CustomEvent("toggleDialog",{bubbles:!0,composed:!0,detail:o}))},this.onBackdropClick=()=>{this.close()},this.onCloseButtonClick=()=>{this.close()},this.onFullscreenButtonClick=()=>{this.setFullscreen(!this.isFullscreen)},this.onSidebarCloseButtonClick=()=>{this.hideSidebarContent=!0,this.sidebarClose.emit()},this.onPrimaryAction=a=>{this.primaryAction.emit(a)},this.onSecondaryAction=a=>{this.secondaryAction.emit(a)},this.updateCustomFooterStatus=()=>{this.hasCustomFooter=!!this.el.querySelector(':scope > [slot="custom-footer"]')},this.updateCustomHeaderStatus=()=>{this.hasCustomHeader=!!this.el.querySelector(':scope > [slot="custom-header"]')},this.updateHeaderToolsStatus=()=>{this.hasHeaderTools=!!this.el.querySelector(':scope > [slot="header-tools"]')},this.updateSecondaryContentStatus=()=>{this.hasSecondaryContent=!!this.el.querySelector(':scope > [slot="secondary-content"]')},this.updateSidebarContentStatus=()=>{this.hasSidebarContent=!!this.el.querySelector(':scope > [slot="sidebar-content"]')},this.updateSidebarFooterStatus=()=>{this.hasSidebarFooter=!!this.el.querySelector(':scope > [slot="sidebar-footer"]')},this.determineScrollStatus=()=>{this.determineMainScrollStatus(),this.determineSidebarScrollStatus()},this.determineMainScrollStatus=()=>{const a=this.scrollContainer?.scrollTop>0,o=Math.ceil(this.scrollContainer?.scrollTop+this.scrollContainer?.offsetHeight)>=this.scrollContainer?.scrollHeight,e=this.scrollContainer?.scrollHeight>this.scrollContainer?.offsetHeight;a!==this.scrolled&&(this.scrolled=a),o!==this.scrolledDown&&(this.scrolledDown=o),e!==this.scrollable&&(this.scrollable=e)},this.determineSidebarScrollStatus=()=>{const a=this.sidebarScrollContainer?.scrollTop>0,o=Math.ceil(this.sidebarScrollContainer?.scrollTop+this.sidebarScrollContainer?.offsetHeight)>=this.sidebarScrollContainer?.scrollHeight,e=this.sidebarScrollContainer?.scrollHeight>this.sidebarScrollContainer?.offsetHeight;a!==this.sidebarScrolled&&(this.sidebarScrolled=a),o!==this.sidebarScrolledDown&&(this.sidebarScrolledDown=o),e!==this.sidebarScrollable&&(this.sidebarScrollable=e)}}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps(),this.determineScrollStatus(),this.updateCustomFooterStatus(),this.updateCustomHeaderStatus(),this.updateHeaderToolsStatus(),this.updateSecondaryContentStatus(),this.updateSidebarContentStatus(),this.updateSidebarFooterStatus()}disconnectedCallback(){this.mutationObserver?.disconnect(),this.modalEl?.open&&this.modalEl.close(),this.unlockBodyScroll()}onWindowResize(){this.determineScrollStatus()}async open(a){this.opening=!0,this.temporaryReturnFocusTo=a,this.modalEl&&(this.setupMutationObserver(),this.modalEl.showModal(),this.modalOpen.emit(),this.mutationObserver.observe(this.modalEl,{subtree:!0,childList:!0}),this.lockBodyScroll(),this.determineScrollStatus(),setTimeout((()=>{this.handleAutoFocus()}),200))}async close(a){this.closing||(a||this.requestModalClose.emit(),(this.closable||a)&&(this.closing=!0,this.unlockBodyScroll(),setTimeout((()=>{this.mutationObserver?.disconnect(),this.modalEl.close(),this.customFocusReturn()}),150)))}async setFullscreen(a){this.isFullscreen!==a&&(this.isFullscreenTransitioning=!0,this.isFullscreen=a,this.toggleFullscreen.emit(this.isFullscreen),setTimeout((()=>this.isFullscreenTransitioning=!1),150))}async getScrollContainer(){return this.scrollContainer}handleAutoFocus(){this.el.querySelector("input[autofocus]")?.focus()}lockBodyScroll(){l(this.scrollContainer),l(this.sidebarScrollContainer)}setupMutationObserver(){this.mutationObserver=new MutationObserver((()=>{this.modalEl?.open&&document.activeElement===document.body&&r(this.modalEl).at(0)?.focus()}))}unlockBodyScroll(){this.scrollContainer&&n(this.scrollContainer),this.sidebarScrollContainer&&n(this.sidebarScrollContainer)}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}customFocusReturn(){const a=this.temporaryReturnFocusTo??this.returnFocusTo;if(!a)return;const o="string"==typeof a?document.querySelector(a):a,e=r(o,{includeContainer:!0,getShadowRoot:!0});e.length>0&&e[0].focus(),this.temporaryReturnFocusTo=void 0}render(){const a=!!this.primaryActionLabel||!!this.secondaryActionLabel,o=i("modal","modal--variant-"+this.variant,{"modal--closing":this.closing,"modal--fullscreen":this.isFullscreen,"modal--fullscreen-transitioning":this.isFullscreenTransitioning,"modal--has-custom-footer":this.hasCustomFooter,"modal--has-custom-header":this.hasCustomHeader,"modal--has-header-tools":this.hasHeaderTools,"modal--has-secondary-content":this.hasSecondaryContent&&!this.hideSecondaryContent,"modal--hide-label":this.hideLabel,"modal--padded":this.padded,"modal--scrollable":this.scrollable,"modal--scrolled":this.scrolled,"modal--hide-scrolled-header-border":this.hideScrolledHeaderBorder,"modal--scrolled-down":this.scrolledDown,"modal--hide-secondary-content-borders":this.hideSecondaryContentBorders,"modal--has-sidebar-content":this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-padded":this.sidebarPadded,"modal--has-sidebar-footer":this.hasSidebarFooter&&this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-footer-padded":this.sidebarFooterPadded,"modal--sidebar-scrolled":this.sidebarScrolled,"modal--sidebar-scrolled-down":this.sidebarScrolledDown,"modal--sidebar-scrollable":this.sidebarScrollable,"modal--show-backdrop":!0===this.showBackdrop,"modal--hide-backdrop":!1===this.showBackdrop});return d(t,{key:"db93bc7fe2c406f943b0731828d8647578942a6b"},d("dialog",{key:"1916e288632a9f25cdc9ecd87ff33a88490e96af","aria-label":this.label,class:o,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,ref:a=>this.modalEl=a},d("div",{key:"938fa085a47ada2dba27f77c1b1dcb8d9e5e0bcd",class:"modal__backdrop",onClick:this.onBackdropClick}),d("div",{key:"14fe8af1cf993ca87d509caea0b98159ed431c2f",class:"modal__body",part:"modal__body",style:this.isFullscreen?{}:{"--swirl-modal-max-height":this.maxHeight,"--swirl-modal-height":this.height,minHeight:this.minHeight,maxWidth:this.maxWidth}},d("aside",{key:"1e211526820a3b7fb97d065f88a0d649441341a6",class:"modal__sidebar"},this.sidebarLabel&&d("header",{key:"378f7540889a596cc9aa05f81ce8087040991b14",class:i("modal__sidebar-header",{"modal__sidebar-header--has-close-button":this.hasSidebarCloseButton})},this.hasSidebarCloseButton&&d("swirl-button",{key:"706dd4e080a47c00fc26032de430e57c7c068e70",hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),d("swirl-heading",{key:"8258cac2b0b4829e82848d73ab2fe0b51620c541",as:"h3",class:"modal__sidebar-heading",level:5,text:this.sidebarLabel})),d("div",{key:"55863a4d8a236f5958aaf3acc352d85298ed97b4",class:"modal__sidebar-content",onScroll:this.determineSidebarScrollStatus,ref:a=>this.sidebarScrollContainer=a},d("slot",{key:"be70a8e55d75c22a826f8cd498cd09ca0503dfd0",name:"sidebar-content",onSlotchange:this.updateSidebarContentStatus})),d("div",{key:"886360fa58715ebd8814640b3b3388708ab5db6e",class:"modal__sidebar-footer",part:"modal__sidebar-footer"},d("slot",{key:"5770a8bebc9e1ba65aad153a6ae4c23eec395778",name:"sidebar-footer",onSlotchange:this.updateSidebarFooterStatus}))),d("div",{key:"0e3a7bdf39166436ee80871361d69eb8cb09f6d2",class:"modal__main-content"},d("header",{key:"2290f40c2ad45e3cd7589f2401f2f66d2555fc6d",class:"modal__custom-header",part:"modal__custom-header"},d("slot",{key:"fac4d8703347a34c9aa7f95381eb595388151634",name:"custom-header",onSlotchange:this.updateCustomHeaderStatus})),(!this.hideLabel||!this.hideCloseButton)&&d("header",{key:"e5795847f3586110f739efa5af6715780dae6bc8",class:"modal__header"},d("div",{key:"ad93618321b8bdd7810dd0858acf1331d464ad1b",class:"modal__header-bar"},!this.hideCloseButton&&d("swirl-button",{key:"8dc97a362af5128aed1b2cd3c002cf71f57cd022",class:"modal__close-button",hideLabel:!0,icon:"default"===this.variant?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),this.showFullscreenButton&&d("swirl-button",{key:"adadac65fe49ff1671ae99063cf0456427ed2d1f",class:"modal__fullscreen-button",hideLabel:!0,icon:this.isFullscreen?"<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>":"<swirl-icon-open-in-full></swirl-icon-open-in-full>",label:this.isFullscreen?this.fullscreenDisableButtonLabel:this.fullscreenEnableButtonLabel,onClick:this.onFullscreenButtonClick}),!this.hideLabel&&d("swirl-heading",{key:"1befbe9f41ba38a1038a7e61e53f9504241dee3b",as:"h2",class:"modal__heading",level:3,text:this.label}))),d("div",{key:"de12e0b450899d6df59d751eb226a94e47db5e84",class:"modal__content-container",style:{gap:this.contentGap?`var(--s-space-${this.contentGap})`:void 0}},d("div",{key:"fef5887f029fbae5e648251daacea0b098628588",class:"modal__primary-content",style:{maxWidth:this.primaryContentMaxWidth,flex:this.primaryContentFlex}},d("div",{key:"ec44074d40a109fb37d3d357f0a0d793ea41d91e",class:"modal__header-tools",part:"modal__header-tools"},d("slot",{key:"a89823cebe465d573521e664b0580fb3dec49696",name:"header-tools",onSlotchange:this.updateHeaderToolsStatus})),d("div",{key:"4660442cbbe3145362b2fb69edc20a6230479d7e",class:"modal__content",onScroll:this.determineMainScrollStatus,part:"modal__content",ref:a=>this.scrollContainer=a},d("slot",{key:"82f38ed11d37b4b1184308a799b598cd283dff01"}))),d("div",{key:"e92d0134f2a88f83fd1a9d48efbb71c253617bf0",class:"modal__secondary-content",style:{maxWidth:this.secondaryContentMaxWidth,flex:this.secondaryContentFlex,padding:this.secondaryContentPadding?`var(--s-space-${this.secondaryContentPadding})`:void 0,paddingBlockEnd:this.secondaryContentPaddingBlockEnd?`var(--s-space-${this.secondaryContentPaddingBlockEnd})`:void 0,paddingBlockStart:this.secondaryContentPaddingBlockStart?`var(--s-space-${this.secondaryContentPaddingBlockStart})`:void 0,paddingInlineEnd:this.secondaryContentPaddingInlineEnd?`var(--s-space-${this.secondaryContentPaddingInlineEnd})`:void 0,paddingInlineStart:this.secondaryContentPaddingInlineStart?`var(--s-space-${this.secondaryContentPaddingInlineStart})`:void 0}},d("slot",{key:"a84788fa88b09050b8135cfc2500226aae5c4915",name:"secondary-content",onSlotchange:this.updateSecondaryContentStatus}))),d("div",{key:"be9d8230818a1d86d9c5a81e828cdec8bf77e291",class:"modal__custom-footer"},d("slot",{key:"d8278ceb626e31f6d95f122f82961a75636a52c5",name:"custom-footer",onSlotchange:this.updateCustomFooterStatus})),a&&d("footer",{key:"8e6d71b43bc970f78991570cface58efeeb99d3d",class:"modal__controls"},d("swirl-button-group",{key:"614f94586a29fa0b2d8fc91b08273c9aa82b7ae5",wrap:!0},this.secondaryActionLabel&&d("swirl-button",{key:"171b13d14ec899286c9eb5e9f9195b7665385ac7",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&d("swirl-button",{key:"3f0e57bf165bfc5e0f261a1d887339ddeea4566c",intent:"primary",label:this.primaryActionLabel,onClick:this.onPrimaryAction,variant:"flat"})))))))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)     max(env(safe-area-inset-bottom), var(--s-space-12)) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)     max(env(safe-area-inset-bottom), var(--s-space-16)) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing .modal__body{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing .modal__body{animation:none}}.modal--variant-drawer.modal--closing .modal__backdrop{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing .modal__backdrop{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) +         var(--swirl-modal-max-secondary-content-width)     )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)     )}@media (min-width: 768px){.modal.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal.modal--show-backdrop .modal__backdrop{background-color:rgba(0, 0, 0, 0.2)}.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:none}}.modal.modal--hide-backdrop .modal__backdrop{background-color:transparent;animation:none}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);padding-top:env(safe-area-inset-top, 0);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out,     max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;min-width:0;flex-basis:100%;flex-grow:1;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;min-width:0;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +         var(--swirl-modal-max-secondary-content-width)     )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}"}},[257,"swirl-modal",{closable:[4],closeButtonLabel:[1,"close-button-label"],fullscreenEnableButtonLabel:[1,"fullscreen-enable-button-label"],fullscreenDisableButtonLabel:[1,"fullscreen-disable-button-label"],height:[1],hideCloseButton:[4,"hide-close-button"],hideLabel:[4,"hide-label"],label:[1],maxHeight:[1,"max-height"],minHeight:[1,"min-height"],maxWidth:[1,"max-width"],padded:[4],primaryActionLabel:[1,"primary-action-label"],secondaryActionLabel:[1,"secondary-action-label"],showBackdrop:[4,"show-backdrop"],variant:[1],contentGap:[1,"content-gap"],hideSecondaryContent:[4,"hide-secondary-content"],primaryContentMaxWidth:[1,"primary-content-max-width"],secondaryContentMaxWidth:[1,"secondary-content-max-width"],primaryContentFlex:[1,"primary-content-flex"],secondaryContentFlex:[1,"secondary-content-flex"],hideSecondaryContentBorders:[4,"hide-secondary-content-borders"],returnFocusTo:[1,"return-focus-to"],secondaryContentPadding:[1,"secondary-content-padding"],secondaryContentPaddingBlockEnd:[1,"secondary-content-padding-block-end"],secondaryContentPaddingBlockStart:[1,"secondary-content-padding-block-start"],secondaryContentPaddingInlineEnd:[1,"secondary-content-padding-inline-end"],secondaryContentPaddingInlineStart:[1,"secondary-content-padding-inline-start"],showFullscreenButton:[4,"show-fullscreen-button"],sidebarLabel:[1,"sidebar-label"],sidebarPadded:[4,"sidebar-padded"],sidebarFooterPadded:[4,"sidebar-footer-padded"],hideSidebarContent:[1028,"hide-sidebar-content"],hasSidebarCloseButton:[4,"has-sidebar-close-button"],sidebarCloseButtonLabel:[1,"sidebar-close-button-label"],hideScrolledHeaderBorder:[4,"hide-scrolled-header-border"],opening:[32],isFullscreen:[32],isFullscreenTransitioning:[32],closing:[32],hasCustomHeader:[32],hasCustomFooter:[32],hasHeaderTools:[32],hasSecondaryContent:[32],scrollable:[32],scrolled:[32],scrolledDown:[32],hasSidebarContent:[32],hasSidebarFooter:[32],sidebarScrolled:[32],sidebarScrolledDown:[32],sidebarScrollable:[32],open:[64],close:[64],setFullscreen:[64],getScrollContainer:[64]},[[9,"resize","onWindowResize"]]]),p=f,_=function(){"undefined"!=typeof customElements&&["swirl-modal","swirl-button","swirl-button-group","swirl-heading","swirl-stack"].forEach((a=>{switch(a){case"swirl-modal":customElements.get(s(a))||customElements.define(s(a),f);break;case"swirl-button":customElements.get(s(a))||m();break;case"swirl-button-group":customElements.get(s(a))||h();break;case"swirl-heading":customElements.get(s(a))||c();break;case"swirl-stack":customElements.get(s(a))||b()}}))};export{p as SwirlModal,_ as defineCustomElement}
+import{proxyCustomElement as a,HTMLElement as e,createEvent as o,h as d,Host as t,transformTag as s}from"@stencil/core/internal/client";import{c as i}from"./index2.js";import{t as r}from"./index.esm.js";import{d as l,e as n}from"./body-scroll-lock.js";import{d as m}from"./swirl-button2.js";import{d as h}from"./swirl-button-group2.js";import{d as c}from"./swirl-heading2.js";import{d as b}from"./swirl-stack2.js";const f=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.toggleFullscreen=o(this,"toggleFullscreen",3),this.modalClose=o(this,"modalClose",3),this.modalOpen=o(this,"modalOpen",3),this.primaryAction=o(this,"primaryAction",3),this.requestModalClose=o(this,"requestModalClose",3),this.secondaryAction=o(this,"secondaryAction",3),this.sidebarClose=o(this,"sidebarClose",3),this.toggleDialog=o(this,"toggleDialog",7),this.closable=!0,this.closeButtonLabel="Close modal",this.fullscreenEnableButtonLabel="Full screen",this.fullscreenDisableButtonLabel="Exit full screen",this.padded=!0,this.variant="default",this.sidebarPadded=!0,this.sidebarFooterPadded=!0,this.sidebarCloseButtonLabel="Close sidebar",this.opening=!1,this.isFullscreen=!1,this.isFullscreenTransitioning=!1,this.closing=!1,this.scrollable=!1,this.scrolled=!1,this.scrolledDown=!1,this.sidebarScrolled=!1,this.sidebarScrolledDown=!1,this.sidebarScrollable=!1,this.onKeyDown=a=>{"Escape"===a.code&&(a.stopImmediatePropagation(),a.preventDefault(),this.close())},this.onClose=()=>{this.closing=!1,this.unlockBodyScroll(),this.modalClose.emit()},this.onToggle=a=>{const e={newState:a.newState,dialog:this.modalEl};this.el.isConnected?this.toggleDialog.emit(e):document.dispatchEvent(new CustomEvent("toggleDialog",{bubbles:!0,composed:!0,detail:e}))},this.onBackdropClick=()=>{this.close()},this.onCloseButtonClick=()=>{this.close()},this.onFullscreenButtonClick=()=>{this.setFullscreen(!this.isFullscreen)},this.onSidebarCloseButtonClick=()=>{this.hideSidebarContent=!0,this.sidebarClose.emit()},this.onPrimaryAction=a=>{this.primaryAction.emit(a)},this.onSecondaryAction=a=>{this.secondaryAction.emit(a)},this.updateCustomFooterStatus=()=>{this.hasCustomFooter=!!this.el.querySelector(':scope > [slot="custom-footer"]')},this.updateCustomHeaderStatus=()=>{this.hasCustomHeader=!!this.el.querySelector(':scope > [slot="custom-header"]')},this.updateHeaderToolsStatus=()=>{this.hasHeaderTools=!!this.el.querySelector(':scope > [slot="header-tools"]')},this.updateSecondaryContentStatus=()=>{this.hasSecondaryContent=!!this.el.querySelector(':scope > [slot="secondary-content"]')},this.updateSidebarContentStatus=()=>{this.hasSidebarContent=!!this.el.querySelector(':scope > [slot="sidebar-content"]')},this.updateSidebarFooterStatus=()=>{this.hasSidebarFooter=!!this.el.querySelector(':scope > [slot="sidebar-footer"]')},this.determineScrollStatus=()=>{this.determineMainScrollStatus(),this.determineSidebarScrollStatus()},this.determineMainScrollStatus=()=>{const a=this.scrollContainer?.scrollTop>0,e=Math.ceil(this.scrollContainer?.scrollTop+this.scrollContainer?.offsetHeight)>=this.scrollContainer?.scrollHeight,o=this.scrollContainer?.scrollHeight>this.scrollContainer?.offsetHeight;a!==this.scrolled&&(this.scrolled=a),e!==this.scrolledDown&&(this.scrolledDown=e),o!==this.scrollable&&(this.scrollable=o)},this.determineSidebarScrollStatus=()=>{const a=this.sidebarScrollContainer?.scrollTop>0,e=Math.ceil(this.sidebarScrollContainer?.scrollTop+this.sidebarScrollContainer?.offsetHeight)>=this.sidebarScrollContainer?.scrollHeight,o=this.sidebarScrollContainer?.scrollHeight>this.sidebarScrollContainer?.offsetHeight;a!==this.sidebarScrolled&&(this.sidebarScrolled=a),e!==this.sidebarScrolledDown&&(this.sidebarScrolledDown=e),o!==this.sidebarScrollable&&(this.sidebarScrollable=o)}}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps(),this.determineScrollStatus(),this.updateCustomFooterStatus(),this.updateCustomHeaderStatus(),this.updateHeaderToolsStatus(),this.updateSecondaryContentStatus(),this.updateSidebarContentStatus(),this.updateSidebarFooterStatus()}disconnectedCallback(){this.mutationObserver?.disconnect(),this.modalEl?.open&&this.modalEl.close(),this.unlockBodyScroll()}onWindowResize(){this.determineScrollStatus()}async open(a){this.opening=!0,this.temporaryReturnFocusTo=a,this.modalEl&&(this.setupMutationObserver(),this.modalEl.showModal(),this.modalOpen.emit(),this.mutationObserver.observe(this.modalEl,{subtree:!0,childList:!0}),this.lockBodyScroll(),this.determineScrollStatus(),setTimeout((()=>{this.handleAutoFocus()}),200))}async close(a){this.closing||(a||this.requestModalClose.emit(),(this.closable||a)&&(this.closing=!0,this.unlockBodyScroll(),setTimeout((()=>{this.mutationObserver?.disconnect(),this.modalEl.close(),this.customFocusReturn()}),150)))}async setFullscreen(a){this.isFullscreen!==a&&(this.isFullscreenTransitioning=!0,this.isFullscreen=a,this.toggleFullscreen.emit(this.isFullscreen),setTimeout((()=>this.isFullscreenTransitioning=!1),150))}async getScrollContainer(){return this.scrollContainer}handleAutoFocus(){this.el.querySelector("input[autofocus]")?.focus()}lockBodyScroll(){l(this.scrollContainer),l(this.sidebarScrollContainer)}setupMutationObserver(){this.mutationObserver=new MutationObserver((()=>{this.modalEl?.open&&document.activeElement===document.body&&r(this.modalEl).at(0)?.focus()}))}unlockBodyScroll(){this.scrollContainer&&n(this.scrollContainer),this.sidebarScrollContainer&&n(this.sidebarScrollContainer)}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}customFocusReturn(){const a=this.temporaryReturnFocusTo??this.returnFocusTo;if(!a)return;const e="string"==typeof a?document.querySelector(a):a,o=r(e,{includeContainer:!0,getShadowRoot:!0});o.length>0&&o[0].focus(),this.temporaryReturnFocusTo=void 0}render(){const a=!!this.primaryActionLabel||!!this.secondaryActionLabel,e=i("modal","modal--variant-"+this.variant,{"modal--closing":this.closing,"modal--fullscreen":this.isFullscreen,"modal--fullscreen-transitioning":this.isFullscreenTransitioning,"modal--has-custom-footer":this.hasCustomFooter,"modal--has-custom-header":this.hasCustomHeader,"modal--has-header-tools":this.hasHeaderTools,"modal--has-secondary-content":this.hasSecondaryContent&&!this.hideSecondaryContent,"modal--hide-label":this.hideLabel,"modal--padded":this.padded,"modal--scrollable":this.scrollable,"modal--scrolled":this.scrolled,"modal--hide-scrolled-header-border":this.hideScrolledHeaderBorder,"modal--scrolled-down":this.scrolledDown,"modal--hide-secondary-content-borders":this.hideSecondaryContentBorders,"modal--has-sidebar-content":this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-padded":this.sidebarPadded,"modal--has-sidebar-footer":this.hasSidebarFooter&&this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-footer-padded":this.sidebarFooterPadded,"modal--sidebar-scrolled":this.sidebarScrolled,"modal--sidebar-scrolled-down":this.sidebarScrolledDown,"modal--sidebar-scrollable":this.sidebarScrollable,"modal--show-backdrop":!0===this.showBackdrop,"modal--hide-backdrop":!1===this.showBackdrop});return d(t,{key:"4e7d148841ef6a533400bbede74b50cb71f3ad95"},d("dialog",{key:"117d80bda8001b13e3a35fe4b0fc4aca44032c26","aria-label":this.label,class:e,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,ref:a=>this.modalEl=a},d("div",{key:"e80adc0ff71799033240a098096229fa5f2cd37b",class:"modal__backdrop",onClick:this.onBackdropClick}),d("div",{key:"3c7527fae9645d1c8c0a49eebce3b0ea33211614",class:"modal__body",part:"modal__body",style:this.isFullscreen?{}:{"--swirl-modal-max-height":this.maxHeight,"--swirl-modal-height":this.height,minHeight:this.minHeight,maxWidth:this.maxWidth}},d("aside",{key:"d9923d714020bed94e559ed4b68ee6bcff00e5cb",class:"modal__sidebar"},this.sidebarLabel&&d("header",{key:"76440a2b5e964f40ab0eb5afa6edd18e208dd679",class:i("modal__sidebar-header",{"modal__sidebar-header--has-close-button":this.hasSidebarCloseButton})},this.hasSidebarCloseButton&&d("swirl-button",{key:"e27400cdbb0315cb2d0ba510025ed914572986b1",hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),d("swirl-heading",{key:"db4c6bf78e90bddbc592c48c924e2ad6bea770f7",as:"h3",class:"modal__sidebar-heading",level:5,text:this.sidebarLabel})),d("div",{key:"2b63ca9c7708ffbe33349ac086551c2bcec2d04b",class:"modal__sidebar-content",onScroll:this.determineSidebarScrollStatus,ref:a=>this.sidebarScrollContainer=a},d("slot",{key:"8747fb0b5aa6e5d17c076132d2d507d2afef8483",name:"sidebar-content",onSlotchange:this.updateSidebarContentStatus})),d("div",{key:"164bdc171bbb160aeb3762718107898eec7b4777",class:"modal__sidebar-footer",part:"modal__sidebar-footer"},d("slot",{key:"aca17fa682d3ca52fa4024186ad5fc679a576c9b",name:"sidebar-footer",onSlotchange:this.updateSidebarFooterStatus}))),d("div",{key:"78e294b5db70eb997700c05eb20132e490ec7882",class:"modal__main-content"},d("header",{key:"5ebbee3cdc7f4376031388a103111e7922283bd5",class:"modal__custom-header",part:"modal__custom-header"},d("slot",{key:"27af848ae5c3d8cefe16e503b0a006c8c45b5e0b",name:"custom-header",onSlotchange:this.updateCustomHeaderStatus})),(!this.hideLabel||!this.hideCloseButton)&&d("header",{key:"9bdc985e51b557a3aac74b28008411a902ded6d9",class:"modal__header"},d("div",{key:"39f297feadbe3e0c41dc54b7531a0229d31988d5",class:"modal__header-bar"},!this.hideCloseButton&&d("swirl-button",{key:"f9a0c0c7aa2586bdd86606f3051ee92a800ff41a",class:"modal__close-button",hideLabel:!0,icon:"default"===this.variant?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),this.showFullscreenButton&&d("swirl-button",{key:"a117081f4d8cf882f6ee95b9afbb8b700bcd6406",class:"modal__fullscreen-button",hideLabel:!0,icon:this.isFullscreen?"<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>":"<swirl-icon-open-in-full></swirl-icon-open-in-full>",label:this.isFullscreen?this.fullscreenDisableButtonLabel:this.fullscreenEnableButtonLabel,onClick:this.onFullscreenButtonClick}),!this.hideLabel&&d("swirl-heading",{key:"0c438ba220ace21998b87eff745c913a07e01d51",as:"h2",class:"modal__heading",level:3,text:this.label}))),d("div",{key:"3786ea1e0ae43a58d76b68b408559628c7eb5ab0",class:"modal__content-container",style:{gap:this.contentGap?`var(--s-space-${this.contentGap})`:void 0}},d("div",{key:"9e5365c39d9a99e0711068e05da3686dbed3b38e",class:"modal__primary-content",style:{maxWidth:this.primaryContentMaxWidth,flex:this.primaryContentFlex}},d("div",{key:"04f6735c47d4c302db8b8669f7528db2f44042bd",class:"modal__header-tools",part:"modal__header-tools"},d("slot",{key:"4e5d113031801f529d1e27cdde88adcb110ecf14",name:"header-tools",onSlotchange:this.updateHeaderToolsStatus})),d("div",{key:"79792a34197b1f47aa94e39e2152f6565cee5630",class:"modal__content",onScroll:this.determineMainScrollStatus,part:"modal__content",ref:a=>this.scrollContainer=a},d("slot",{key:"f0a0e5cc2cfae741d02d7dc081ec499acb94e11f"}))),d("div",{key:"ccbdd483db514d93c74a70a64747b697f7f0e32d",class:"modal__secondary-content",style:{maxWidth:this.secondaryContentMaxWidth,flex:this.secondaryContentFlex,padding:this.secondaryContentPadding?`var(--s-space-${this.secondaryContentPadding})`:void 0,paddingBlockEnd:this.secondaryContentPaddingBlockEnd?`var(--s-space-${this.secondaryContentPaddingBlockEnd})`:void 0,paddingBlockStart:this.secondaryContentPaddingBlockStart?`var(--s-space-${this.secondaryContentPaddingBlockStart})`:void 0,paddingInlineEnd:this.secondaryContentPaddingInlineEnd?`var(--s-space-${this.secondaryContentPaddingInlineEnd})`:void 0,paddingInlineStart:this.secondaryContentPaddingInlineStart?`var(--s-space-${this.secondaryContentPaddingInlineStart})`:void 0}},d("slot",{key:"7fa5754d3fd68ee34d452016b7afa090ef1904fc",name:"secondary-content",onSlotchange:this.updateSecondaryContentStatus}))),d("div",{key:"b33405ae01b437498d738b9312a27debb8adb8f1",class:"modal__custom-footer"},d("slot",{key:"bdfcc495ab4d4dd7beb5df3c06822eb3a46d449e",name:"custom-footer",onSlotchange:this.updateCustomFooterStatus})),a&&d("footer",{key:"afb432d444d64beaf85bfadae7169687e173f4cc",class:"modal__controls"},d("swirl-button-group",{key:"19bcf388f329faddd7ae4fd9d5c2b0851231a1a9",wrap:!0},this.secondaryActionLabel&&d("swirl-button",{key:"92787acfda759009792de450e51e60829c2bd6c5",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&d("swirl-button",{key:"69a0e33d545983354e4004a46ea8ac5c643dad74",intent:"primary",label:this.primaryActionLabel,onClick:this.onPrimaryAction,variant:"flat"})))))))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)     max(env(safe-area-inset-bottom), var(--s-space-12)) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)     max(env(safe-area-inset-bottom), var(--s-space-16)) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing .modal__body{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing .modal__body{animation:none}}.modal--variant-drawer.modal--closing .modal__backdrop{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing .modal__backdrop{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) +         var(--swirl-modal-max-secondary-content-width)     )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)     )}@media (min-width: 768px){.modal.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal.modal--show-backdrop .modal__backdrop{background-color:rgba(0, 0, 0, 0.2)}.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:none}}.modal.modal--hide-backdrop .modal__backdrop{background-color:transparent;animation:none}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);padding-top:env(safe-area-inset-top, 0);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out,     max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;min-width:0;flex-basis:100%;flex-grow:1;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;min-width:0;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +         var(--swirl-modal-max-secondary-content-width)     )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}"}},[257,"swirl-modal",{closable:[4],closeButtonLabel:[1,"close-button-label"],fullscreenEnableButtonLabel:[1,"fullscreen-enable-button-label"],fullscreenDisableButtonLabel:[1,"fullscreen-disable-button-label"],height:[1],hideCloseButton:[4,"hide-close-button"],hideLabel:[4,"hide-label"],label:[1],maxHeight:[1,"max-height"],minHeight:[1,"min-height"],maxWidth:[1,"max-width"],padded:[4],primaryActionLabel:[1,"primary-action-label"],secondaryActionLabel:[1,"secondary-action-label"],showBackdrop:[4,"show-backdrop"],variant:[1],contentGap:[1,"content-gap"],hideSecondaryContent:[4,"hide-secondary-content"],primaryContentMaxWidth:[1,"primary-content-max-width"],secondaryContentMaxWidth:[1,"secondary-content-max-width"],primaryContentFlex:[1,"primary-content-flex"],secondaryContentFlex:[1,"secondary-content-flex"],hideSecondaryContentBorders:[4,"hide-secondary-content-borders"],returnFocusTo:[1,"return-focus-to"],secondaryContentPadding:[1,"secondary-content-padding"],secondaryContentPaddingBlockEnd:[1,"secondary-content-padding-block-end"],secondaryContentPaddingBlockStart:[1,"secondary-content-padding-block-start"],secondaryContentPaddingInlineEnd:[1,"secondary-content-padding-inline-end"],secondaryContentPaddingInlineStart:[1,"secondary-content-padding-inline-start"],showFullscreenButton:[4,"show-fullscreen-button"],sidebarLabel:[1,"sidebar-label"],sidebarPadded:[4,"sidebar-padded"],sidebarFooterPadded:[4,"sidebar-footer-padded"],hideSidebarContent:[1028,"hide-sidebar-content"],hasSidebarCloseButton:[4,"has-sidebar-close-button"],sidebarCloseButtonLabel:[1,"sidebar-close-button-label"],hideScrolledHeaderBorder:[4,"hide-scrolled-header-border"],opening:[32],isFullscreen:[32],isFullscreenTransitioning:[32],closing:[32],hasCustomHeader:[32],hasCustomFooter:[32],hasHeaderTools:[32],hasSecondaryContent:[32],scrollable:[32],scrolled:[32],scrolledDown:[32],hasSidebarContent:[32],hasSidebarFooter:[32],sidebarScrolled:[32],sidebarScrolledDown:[32],sidebarScrollable:[32],open:[64],close:[64],setFullscreen:[64],getScrollContainer:[64]},[[9,"resize","onWindowResize"]]]),p=f,_=function(){"undefined"!=typeof customElements&&["swirl-modal","swirl-button","swirl-button-group","swirl-heading","swirl-stack"].forEach((a=>{switch(a){case"swirl-modal":customElements.get(s(a))||customElements.define(s(a),f);break;case"swirl-button":customElements.get(s(a))||m();break;case"swirl-button-group":customElements.get(s(a))||h();break;case"swirl-heading":customElements.get(s(a))||c();break;case"swirl-stack":customElements.get(s(a))||b()}}))};export{p as SwirlModal,_ as defineCustomElement}

package/dist/components/swirl-option-list-item2.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Host as o,transformTag as l}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{D as r}from"./media-query.service.js";import{d as a}from"./swirl-icon-check-small2.js";import{d as c}from"./swirl-icon-check-strong2.js";import{d}from"./swirl-icon-drag-handle2.js";const p=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.toggleDrag=e(this,"toggleDrag",7),this.context="single-select",this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move option",this.minWidth="15rem",this.selected=!1,this.indeterminate=!1,this.swirlAriaRole="option",this.truncateLabel=!0,this.iconSize=24,this.elementId=crypto.randomUUID(),this.mediaQueryUnsubscribe=()=>{},this.onDragHandleKeyDown=i=>{"Space"!==i.code&&"Enter"!==i.code||(i.preventDefault(),this.toggleDrag.emit(this.el))},this.onBlur=()=>{this.focused=!1},this.onFocus=()=>{this.focused=!0}}componentDidLoad(){this.mediaQueryUnsubscribe=r.subscribe((i=>{this.forceIconProps(i),this.updateIconSize(i)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(i){const t=this.iconEl?.children[0];t?.setAttribute("size",i?"20":"24")}updateIconSize(i){this.iconSize=i?20:24}render(){const i=this.disabled?"true":void 0,t=this.indeterminate?void 0:String(this.selected),e="multi-select"===this.context,l=Boolean(this.icon)&&"single-select"===this.context,r=Boolean(this.iconBadge),a=this.el.querySelector('[slot="avatar"]'),c=this.selected&&"single-select"===this.context,d=n("option-list-item",`option-list-item--context-${this.context}`,{"option-list-item--disabled":this.disabled,"option-list-item--draggable":this.allowDrag,"option-list-item--dragging":this.dragging,"option-list-item--selected":this.selected,"option-list-item--indeterminate":this.indeterminate&&!this.selected,"option-list-item--show-avatar":a});return s(o,{key:"cccb6749ea85e65e8183231c48bbdaa1f3b0f2a2"},s("div",{key:"e4b7ea18ee26e5524fbd093f6e4a2fa69e8036ba","aria-checked":"menuitemradio"===this.swirlAriaRole?t:void 0,"aria-describedby":Boolean(this.description)?`option-list-item-${this.elementId}-description`:void 0,"aria-disabled":i,"aria-labelledby":`option-list-item-${this.elementId}-label`,"aria-selected":"option"===this.swirlAriaRole?t:void 0,class:d,id:`option-list-item-${this.elementId}`,onBlur:this.onBlur,onFocus:this.onFocus,part:"option-list-item",role:this.swirlAriaRole,style:{minWidth:this.minWidth}},l&&s("span",{key:"453333c145f43037e3e0815ebe2d3931c05094e5",class:"option-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i},r&&s("span",{key:"2ba8fc3509d2b2ea4f030b6e67949c8ea5e7a3ad",class:"option-list-item__icon-badge",innerHTML:this.iconBadge})),e&&s("span",{key:"e714ed98be96232458b0c1ef108220950b695de7",class:"option-list-item__checkbox"},s("span",{key:"65a7eb86c977093c4bc5c93fa93b86030e5b89d5",class:"option-list-item__checkbox-box"},this.selected&&s("swirl-icon-check-strong",{key:"f0f4cccc422de4f2780feae1eac59773802af06f",class:"option-list-item__checkbox-icon",size:16}),!this.selected&&this.indeterminate&&s("span",{key:"55b33fc64abfa7a40a013eef8d237d8c3b659649",class:"option-list-item__checkbox-indeterminate-icon"}))),s("span",{key:"3c6067b77e5f0fc52565a3a49734b707a43e3342",class:"option-list-item__avatar"},s("slot",{key:"037c37b7ea1c2c997fcd121c8d1f9c5ccc722c91",name:"avatar"})),s("span",{key:"f45dc0634b5a0f917abe57dcf536277046a3101c",class:"option-list-item__label-container"},s("span",{key:"4db060cb40fc35b18ec57cd5e1dc4ccc1e6a9ae4",class:"option-list-item__label",style:{whiteSpace:this.truncateLabel?"nowrap":"normal"},id:`option-list-item-${this.elementId}-label`,part:"option-list-item__label"},this.label),this.description&&s("span",{key:"4e8a88462a2989c6c33c20534353ba3492c68fe9",class:"option-list-item__description",id:`option-list-item-${this.elementId}-description`},this.description)),c&&s("span",{key:"bd3a98766a9ffaf5d5d0cf0f7fe5e1114acd4215",class:"option-list-item__selection-icon"},s("swirl-icon-check-small",{key:"94b14358463443277a6eff9d6900031c88ae0e46",size:this.iconSize}))),this.allowDrag&&s("button",{key:"edd5f5b7477385b3c0db1669698406737e0bc436","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"option-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,tabIndex:this.focused?0:-1,type:"button"},s("swirl-icon-drag-handle",{key:"6dd5bd12e3777f952db5308eb3083f1ad8fc113d",size:this.iconSize})))}get el(){return this}static get style(){return'.sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item--drag.sc-swirl-option-list-item-h{border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-medium-pressed)}.option-list-item.sc-swirl-option-list-item{display:inline-flex;position:relative;width:100%;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--s-border-radius-sm);align-items:center;background-color:transparent;cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-state-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-state-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-low-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),     0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item,.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);color:var(--s-text-on-status);background-color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column;overflow:hidden}.option-list-item__label-container.sc-swirl-option-list-item>*.sc-swirl-option-list-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__icon-badge.sc-swirl-option-list-item{position:absolute;display:grid;bottom:0;right:0}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item{position:relative;width:100%;height:100%}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}'}},[262,"swirl-option-list-item",{allowDrag:[4,"allow-drag"],context:[1025],description:[1],disabled:[4],dragging:[4],dragHandleDescription:[1,"drag-handle-description"],dragHandleLabel:[1,"drag-handle-label"],icon:[1],iconBadge:[1,"icon-badge"],label:[1],minWidth:[1,"min-width"],selected:[1028],indeterminate:[4],swirlAriaRole:[1,"swirl-aria-role"],truncateLabel:[4,"truncate-label"],value:[1],iconSize:[32],focused:[32]}]);function m(){"undefined"!=typeof customElements&&["swirl-option-list-item","swirl-icon-check-small","swirl-icon-check-strong","swirl-icon-drag-handle"].forEach((i=>{switch(i){case"swirl-option-list-item":customElements.get(l(i))||customElements.define(l(i),p);break;case"swirl-icon-check-small":customElements.get(l(i))||a();break;case"swirl-icon-check-strong":customElements.get(l(i))||c();break;case"swirl-icon-drag-handle":customElements.get(l(i))||d()}}))}export{p as S,m as d}
+import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Host as o,transformTag as l}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{D as r}from"./media-query.service.js";import{d as a}from"./swirl-icon-check-small2.js";import{d as c}from"./swirl-icon-check-strong2.js";import{d}from"./swirl-icon-drag-handle2.js";const p=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.toggleDrag=e(this,"toggleDrag",7),this.context="single-select",this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move option",this.minWidth="15rem",this.selected=!1,this.indeterminate=!1,this.swirlAriaRole="option",this.truncateLabel=!0,this.iconSize=24,this.elementId=crypto.randomUUID(),this.mediaQueryUnsubscribe=()=>{},this.onDragHandleKeyDown=i=>{"Space"!==i.code&&"Enter"!==i.code||(i.preventDefault(),this.toggleDrag.emit(this.el))},this.onBlur=()=>{this.focused=!1},this.onFocus=()=>{this.focused=!0}}componentDidLoad(){this.mediaQueryUnsubscribe=r.subscribe((i=>{this.forceIconProps(i),this.updateIconSize(i)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(i){const t=this.iconEl?.children[0];t?.setAttribute("size",i?"20":"24")}updateIconSize(i){this.iconSize=i?20:24}render(){const i=this.disabled?"true":void 0,t=this.indeterminate?void 0:String(this.selected),e="multi-select"===this.context,l=Boolean(this.icon)&&"single-select"===this.context,r=Boolean(this.iconBadge),a=this.el.querySelector('[slot="avatar"]'),c=this.selected&&"single-select"===this.context,d=n("option-list-item",`option-list-item--context-${this.context}`,{"option-list-item--disabled":this.disabled,"option-list-item--draggable":this.allowDrag,"option-list-item--dragging":this.dragging,"option-list-item--selected":this.selected,"option-list-item--indeterminate":this.indeterminate&&!this.selected,"option-list-item--show-avatar":a});return s(o,{key:"65b596f344240e20c4ec0017e1d6392e1558c22d"},s("div",{key:"884fe9a8aee2ded06e8de7b18a3600ca36b50210","aria-checked":"menuitemradio"===this.swirlAriaRole?t:void 0,"aria-describedby":Boolean(this.description)?`option-list-item-${this.elementId}-description`:void 0,"aria-disabled":i,"aria-labelledby":`option-list-item-${this.elementId}-label`,"aria-selected":"option"===this.swirlAriaRole?t:void 0,class:d,id:`option-list-item-${this.elementId}`,onBlur:this.onBlur,onFocus:this.onFocus,part:"option-list-item",role:this.swirlAriaRole,style:{minWidth:this.minWidth}},l&&s("span",{key:"415dff8918dcdef48e1d4259944c12f2632609f0",class:"option-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i},r&&s("span",{key:"9e53d370663d88367986c0b1c6de480c1adca67e",class:"option-list-item__icon-badge",innerHTML:this.iconBadge})),e&&s("span",{key:"7a05cb4c797f9437ca7c4423f84cc40de3e84c62",class:"option-list-item__checkbox"},s("span",{key:"5a4bc05692c7145f46e15b73e0b19954eb2bae5c",class:"option-list-item__checkbox-box"},this.selected&&s("swirl-icon-check-strong",{key:"d055acf67a67ad0c9132f7275be2f35d8809e53f",class:"option-list-item__checkbox-icon",size:16}),!this.selected&&this.indeterminate&&s("span",{key:"4ea96bd0f579a56092862d52d66ef2cd18ec2a55",class:"option-list-item__checkbox-indeterminate-icon"}))),s("span",{key:"da85e5088d4bd6906e1d82a40d57def8ec01b540",class:"option-list-item__avatar"},s("slot",{key:"f1e5deca07de4decfb78f6321c4c07d32bd773bd",name:"avatar"})),s("span",{key:"ecd5755a7a32093b0d8a31eb1db44ea4a1f4610e",class:"option-list-item__label-container"},s("span",{key:"a55b7aafdeae686ef48d94cbaf1b2a31f95ad429",class:"option-list-item__label",style:{whiteSpace:this.truncateLabel?"nowrap":"normal"},id:`option-list-item-${this.elementId}-label`,part:"option-list-item__label"},this.label),this.description&&s("span",{key:"15413719b08d094a7ea78a976e37a3a2e2232a41",class:"option-list-item__description",id:`option-list-item-${this.elementId}-description`},this.description)),c&&s("span",{key:"452c6597248118a1209dfcddcca54e880b976508",class:"option-list-item__selection-icon"},s("swirl-icon-check-small",{key:"f7f15b3492d9ddf5d54b46487c4d0f58fc494ef3",size:this.iconSize}))),this.allowDrag&&s("button",{key:"6e826e283b12385c03f8cfc46bb264bbcc47f4f8","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"option-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,tabIndex:this.focused?0:-1,type:"button"},s("swirl-icon-drag-handle",{key:"d470bde1b9ee0a8ee3829eec92342dfed45e813c",size:this.iconSize})))}get el(){return this}static get style(){return'.sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item--drag.sc-swirl-option-list-item-h{border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-medium-pressed)}.option-list-item.sc-swirl-option-list-item{display:inline-flex;position:relative;width:100%;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--s-border-radius-sm);align-items:center;background-color:transparent;cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-state-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-state-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-low-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),     0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item,.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);color:var(--s-text-on-status);background-color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column;overflow:hidden}.option-list-item__label-container.sc-swirl-option-list-item>*.sc-swirl-option-list-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__icon-badge.sc-swirl-option-list-item{position:absolute;display:grid;bottom:0;right:0}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item{position:relative;width:100%;height:100%}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}'}},[262,"swirl-option-list-item",{allowDrag:[4,"allow-drag"],context:[1025],description:[1],disabled:[4],dragging:[4],dragHandleDescription:[1,"drag-handle-description"],dragHandleLabel:[1,"drag-handle-label"],icon:[1],iconBadge:[1,"icon-badge"],label:[1],minWidth:[1,"min-width"],selected:[1028],indeterminate:[4],swirlAriaRole:[1,"swirl-aria-role"],truncateLabel:[4,"truncate-label"],value:[1],iconSize:[32],focused:[32]}]);function m(){"undefined"!=typeof customElements&&["swirl-option-list-item","swirl-icon-check-small","swirl-icon-check-strong","swirl-icon-drag-handle"].forEach((i=>{switch(i){case"swirl-option-list-item":customElements.get(l(i))||customElements.define(l(i),p);break;case"swirl-icon-check-small":customElements.get(l(i))||a();break;case"swirl-icon-check-strong":customElements.get(l(i))||c();break;case"swirl-icon-drag-handle":customElements.get(l(i))||d()}}))}export{p as S,m as d}

package/dist/components/swirl-option-list-section.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as s,h as t,Host as a,transformTag as i}from"@stencil/core/internal/client";import{d as o}from"./swirl-separator2.js";import{d as r}from"./swirl-stack2.js";const c=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){return t(a,{key:"68d2ae95981de87c60b177c58d2ededbaa58b2fb"},this.hasSeparator&&t("swirl-separator",{key:"cda15bfc2f45e37c689713c9288c086e485c2a24",spacing:this.separatorSpacing}),t("div",{key:"7f751e3226b15592528162ece0e511fe2450e25b","aria-labelledby":"label",class:"option-list-section",role:"group"},t("span",{key:"282b798edc1c38b5ff4cfb455ae619ea2c4a001d",class:"option-list-section__label",id:"label",part:"option-list-section__label"},this.label),t("swirl-stack",{key:"0669f82a6306e36bda371ca1e21afca60f443067",spacing:this.spacing,align:"stretch"},t("slot",{key:"6f3aaeb924cc47c3e6ba3051f1ea847a6ffea6e9"}))))}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.option-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-section__label{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}"}},[257,"swirl-option-list-section",{label:[1],separatorSpacing:[1,"separator-spacing"],spacing:[1],hasSeparator:[4,"has-separator"]}]),l=c,n=function(){"undefined"!=typeof customElements&&["swirl-option-list-section","swirl-separator","swirl-stack"].forEach((e=>{switch(e){case"swirl-option-list-section":customElements.get(i(e))||customElements.define(i(e),c);break;case"swirl-separator":customElements.get(i(e))||o();break;case"swirl-stack":customElements.get(i(e))||r()}}))};export{l as SwirlOptionListSection,n as defineCustomElement}
+import{proxyCustomElement as s,HTMLElement as e,h as t,Host as a,transformTag as i}from"@stencil/core/internal/client";import{d as o}from"./swirl-separator2.js";import{d as r}from"./swirl-stack2.js";const l=s(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){return t(a,{key:"93b08d09e7d8135b99cdadac3af873bffbceb93d"},this.hasSeparator&&t("swirl-separator",{key:"dd25bb005b9c7ee1e97ba178853380eb4c2a08c3",spacing:this.separatorSpacing}),t("div",{key:"73e2af0a69dcaab7fa5aa06f6974878543466e09","aria-labelledby":"label",class:"option-list-section",role:"group"},t("span",{key:"90a68d498e28585bf10583135275292b5eab41a2",class:"option-list-section__label",id:"label",part:"option-list-section__label"},this.label),t("swirl-stack",{key:"4c42eaf209ecd5af756cc336641e3ff1a1d5050d",spacing:this.spacing,align:"stretch"},t("slot",{key:"a8385c3180f0cef63be182e6809161e9b6fcb09d"}))))}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.option-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-section__label{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}"}},[257,"swirl-option-list-section",{label:[1],separatorSpacing:[1,"separator-spacing"],spacing:[1],hasSeparator:[4,"has-separator"]}]),c=l,n=function(){"undefined"!=typeof customElements&&["swirl-option-list-section","swirl-separator","swirl-stack"].forEach((s=>{switch(s){case"swirl-option-list-section":customElements.get(i(s))||customElements.define(i(s),l);break;case"swirl-separator":customElements.get(i(s))||o();break;case"swirl-stack":customElements.get(i(s))||r()}}))};export{c as SwirlOptionListSection,n as defineCustomElement}