@getflip/swirl-components 0.527.0 → 0.529.0

package/dist/components/swirl-thumbnail.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Host as a,transformTag as o}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{d as n}from"./swirl-action-list2.js";import{d as l}from"./swirl-action-list-item2.js";import{d as c}from"./swirl-button2.js";import{d as b}from"./swirl-button-group2.js";import{d as m}from"./swirl-icon-error2.js";import{d as h}from"./swirl-icon-more-horizontal2.js";import{d as u}from"./swirl-popover2.js";import{d}from"./swirl-popover-trigger2.js";import{d as p}from"./swirl-progress-indicator2.js";import{d as f}from"./swirl-stack2.js";const w=["s","m","l"],v=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.edit=e(this,"edit",7),this.removeThumbnail=e(this,"remove",7),this.thumbnailClick=e(this,"thumbnailClick",7),this.cursor="pointer",this.editButtonIcon="<swirl-icon-crop></swirl-icon-crop>",this.editButtonLabel="Edit",this.format="landscape",this.menuButtonLabel="More actions",this.openButtonIcon="<swirl-icon-visibility></swirl-icon-visibility>",this.openButtonLabel="Open",this.progressLabel="Loading progress",this.removeButtonIcon="<swirl-icon-delete></swirl-icon-delete>",this.removeButtonLabel="Remove",this.size="m",this.hasHover=!0,this.onEditClick=i=>{this.edit.emit(i),this.popoverEl?.close()},this.onOpenClick=i=>{this.thumbnailClick.emit(i),this.popoverEl?.close()},this.onRemoveClick=i=>{this.removeThumbnail.emit(i),this.popoverEl?.close()},this.onHoverChange=i=>{this.hasHover=i.matches}}connectedCallback(){"undefined"!=typeof window&&window.matchMedia&&(this.hoverMediaQuery=window.matchMedia("(hover: hover)"),this.hasHover=this.hoverMediaQuery.matches,this.hoverMediaQuery.addEventListener?.("change",this.onHoverChange))}disconnectedCallback(){this.hoverMediaQuery?.removeEventListener?.("change",this.onHoverChange),this.hoverMediaQuery=void 0}componentDidRender(){this.popoverTriggerEl&&this.popoverEl&&(this.popoverTriggerEl.swirlPopover=this.popoverEl)}render(){const i=w.includes(this.size),t=void 0!==this.progress,e=!!this.error,o=t&&!e,n=!!this.showEditButton,l=!!this.showRemoveButton,c=n||l,b=!this.hasHover&&c,m=i&&this.hasHover&&n&&l,h=i&&this.hasHover&&n&&!l,u=i&&this.hasHover&&l&&!n,d=!i&&this.hasHover&&c,p=m||b,f=b&&this.interactive,v=!!this.timestamp&&"s"!==this.size,g=t&&i,_=this.interactive||b,k=_?"button":"span",y=r("thumbnail","thumbnail--format-"+this.format,"thumbnail--size-"+this.size,{"thumbnail--interactive":this.interactive,"thumbnail--uploading-bar":t&&!i}),z=s(k,{key:"d50b4e0b417c12a91785081aa4f1bc352a7fbdbb",class:"thumbnail__image-wrapper",onClick:b?void 0:this.thumbnailClick.emit,style:_&&"pointer"!==this.cursor?{cursor:this.cursor}:void 0,type:_?"button":void 0},s("img",{key:"d350d5d2d8cfe9b5f1ab6278841729442a87c243",alt:this.alt,class:"thumbnail__image",loading:"lazy",src:this.src}));return s(a,{key:"54f03d81a80c38e07c937b9b40785e28cb71dbf4"},s("span",{key:"32dfe5c663c42aa077640ef489aa817e234b4dc9",class:y,role:"group"},b?s("swirl-popover-trigger",{ref:i=>this.popoverTriggerEl=i,swirlPopover:this.popoverEl},z):z,o&&s("span",{key:"0586adab6fc12da2602934d75b4c4d23415a76b5",class:i?"thumbnail__uploading-overlay":"thumbnail__progress-indicator"},s("swirl-progress-indicator",{key:"7b1835785ff99555249f39d15871b64579ed6e89",label:this.progressLabel,size:i?"s":void 0,value:this.progress,variant:i?"circle":void 0})),e&&s("span",{key:"8ca48915a313d0df60dcba89f01ea4d6af22f21b",class:"thumbnail__error"},s("swirl-icon-error",{key:"09fc738d4235cbb592944d6af402aee514d44a6d",color:"critical"})),d&&s("swirl-button-group",{key:"9d445d293dcda14f627afc905120849487400008",class:"thumbnail__buttons",segmented:n&&l},n&&s("span",{key:"38bca3e45a6236e8e9dbb9e4a4b1d3d1a627e2ca"},s("swirl-button",{key:"a2de3116c2521ce02957a93eecb7f0551ead16ac",hideLabel:!0,icon:this.editButtonIcon,label:this.editButtonLabel,onClick:this.edit.emit,variant:"on-image"})),l&&s("span",{key:"9f8ecc729770e0adf0d83280a1548b01a15bef02"},s("swirl-button",{key:"eee5fcf95f6c8e26c70dc320d44287fc44d6d45f",hideLabel:!0,icon:this.removeButtonIcon,label:this.removeButtonLabel,onClick:this.removeThumbnail.emit,variant:"on-image"}))),(h||u)&&s("span",{key:"1d4d9b1e99af884fdf526da7431f546c9aa827f8",class:"thumbnail__compact-action"},s("button",{key:"66c6a07bef62f0c4cd3e865b364f768328e22f28","aria-label":h?this.editButtonLabel:this.removeButtonLabel,class:"thumbnail__compact-button",onClick:h?this.edit.emit:this.removeThumbnail.emit,type:"button"},s("span",{key:"2e838262052add7aabb11362818cd66a4f8bd535",innerHTML:h?this.editButtonIcon:this.removeButtonIcon,ref:i=>i?.children[0]?.setAttribute("size","20")}))),m&&s("span",{key:"b7e45d53381fe810725277da63bcb647551cb40c",class:"thumbnail__compact-action"},s("swirl-popover-trigger",{key:"23cd2ab225e6fe94d803b700740727ea120274eb",ref:i=>this.popoverTriggerEl=i,swirlPopover:this.popoverEl},s("button",{key:"f8a3ce47abf0a45d07cfc7303b015524f4512ed4","aria-label":this.menuButtonLabel,class:"thumbnail__compact-button",type:"button"},s("swirl-icon-more-horizontal",{key:"44a5108bc4afaec1c8e7e16271962d38e2cfbd4e",size:20})))),p&&s("swirl-popover",{key:"3b788c0311598d6c1c12fba4337917f547b69e96",label:this.menuButtonLabel,placement:"bottom-end",padded:!1,ref:i=>this.popoverEl=i},s("swirl-action-list",{key:"dd4943d4efd8e4fc4ed8b78317660958e2d83429"},f&&s("swirl-action-list-item",{key:"6f57197aa0f150bda2991874d59988a6778cb900",icon:this.openButtonIcon,label:this.openButtonLabel,onClick:this.onOpenClick}),n&&s("swirl-action-list-item",{key:"528938dd6f5f652aa41cc1f8390dcc00c36f0df6",icon:this.editButtonIcon,label:this.editButtonLabel,onClick:this.onEditClick}),l&&s("swirl-action-list-item",{key:"6f09fc77ec6b9f5a16e67c829c637db3369621c6",icon:this.removeButtonIcon,intent:"critical",label:this.removeButtonLabel,onClick:this.onRemoveClick}))),v&&!g&&s("span",{key:"8197352041a662f49fa290cbe3455d6ab13769fa",class:"thumbnail__timestamp"},this.timestamp)))}static get style(){return':host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;border-radius:var(--s-border-radius-s)}.thumbnail--size-s{--swirl-thumbnail-size:2.5rem;--swirl-thumbnail-compact-button-size:1.5rem}.thumbnail--size-m{--swirl-thumbnail-size:3rem;--swirl-thumbnail-compact-button-size:1.5rem}.thumbnail--size-l{--swirl-thumbnail-size:4rem;--swirl-thumbnail-compact-button-size:1.5rem}.thumbnail--size-xl{--swirl-thumbnail-size:5.5rem;--swirl-thumbnail-compact-button-size:1.75rem;border-radius:var(--s-border-radius-sm)}.thumbnail--size-2xl{--swirl-thumbnail-size:7.5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--format-landscape{width:var(--swirl-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-portrait{height:var(--swirl-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-square{width:var(--swirl-thumbnail-size);height:var(--swirl-thumbnail-size)}.thumbnail--uploading-bar .thumbnail__timestamp{bottom:var(--s-space-8)}.thumbnail__image-wrapper{position:relative;overflow:hidden;width:100%;height:100%;padding:0;border:none;border-radius:inherit;background-color:transparent;box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail__image-wrapper:focus:not(:focus-visible){outline:none}.thumbnail__image-wrapper:focus-visible{outline:0.125rem solid var(--s-focus-default);outline-offset:calc(-1 * 0.125rem)}.thumbnail--interactive .thumbnail__image-wrapper{cursor:pointer}.thumbnail--interactive .thumbnail__image-wrapper:hover:after{position:absolute;background-color:rgba(0, 0, 0, 0.15);content:"";inset:0}.thumbnail--interactive .thumbnail__image-wrapper:active:after{position:absolute;background-color:rgba(0, 0, 0, 0.3);content:"";inset:0}.thumbnail__image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.thumbnail__progress-indicator,.thumbnail__uploading-overlay{position:absolute;z-index:1;right:0;bottom:0;left:0}.thumbnail__uploading-overlay{inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--s-surface-on-image-default)}.thumbnail__error{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--s-surface-on-image-default)}.thumbnail__buttons{position:absolute;z-index:1;top:var(--s-space-4);right:var(--s-space-4)}.thumbnail__compact-action{position:absolute;z-index:2;top:0;right:0}.thumbnail__compact-button{width:var(--swirl-thumbnail-compact-button-size, 1.5rem);height:var(--swirl-thumbnail-compact-button-size, 1.5rem);padding:0;border:none;border-bottom-left-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default);cursor:pointer}.thumbnail__compact-button:focus:not(:focus-visible){outline:none}.thumbnail__compact-button:focus-visible{outline:0.125rem solid var(--s-focus-default);outline-offset:calc(-1 * 0.125rem)}.thumbnail__buttons,.thumbnail__compact-action{opacity:0}.thumbnail:hover .thumbnail__buttons,.thumbnail:hover .thumbnail__compact-action,.thumbnail:focus-within .thumbnail__buttons,.thumbnail:focus-within .thumbnail__compact-action{opacity:1}.thumbnail__timestamp{position:absolute;z-index:1;bottom:0;left:0;display:block;overflow:hidden;max-width:calc(100% - 2 * var(--s-space-4));height:1.25rem;padding-right:var(--s-space-4);padding-left:var(--s-space-4);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default);font-size:var(--s-font-size-sm);line-height:1.25rem;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}'}},[1,"swirl-thumbnail",{alt:[1],cursor:[1],editButtonIcon:[1,"edit-button-icon"],editButtonLabel:[1,"edit-button-label"],error:[4],format:[1],interactive:[4],menuButtonLabel:[1,"menu-button-label"],openButtonIcon:[1,"open-button-icon"],openButtonLabel:[1,"open-button-label"],progress:[2],progressLabel:[1,"progress-label"],removeButtonIcon:[1,"remove-button-icon"],removeButtonLabel:[1,"remove-button-label"],showEditButton:[4,"show-edit-button"],showRemoveButton:[4,"show-remove-button"],size:[1],src:[1],timestamp:[1],hasHover:[32]}]),g=v,_=function(){"undefined"!=typeof customElements&&["swirl-thumbnail","swirl-action-list","swirl-action-list-item","swirl-button","swirl-button-group","swirl-icon-error","swirl-icon-more-horizontal","swirl-popover","swirl-popover-trigger","swirl-progress-indicator","swirl-stack"].forEach((i=>{switch(i){case"swirl-thumbnail":customElements.get(o(i))||customElements.define(o(i),v);break;case"swirl-action-list":customElements.get(o(i))||n();break;case"swirl-action-list-item":customElements.get(o(i))||l();break;case"swirl-button":customElements.get(o(i))||c();break;case"swirl-button-group":customElements.get(o(i))||b();break;case"swirl-icon-error":customElements.get(o(i))||m();break;case"swirl-icon-more-horizontal":customElements.get(o(i))||h();break;case"swirl-popover":customElements.get(o(i))||u();break;case"swirl-popover-trigger":customElements.get(o(i))||d();break;case"swirl-progress-indicator":customElements.get(o(i))||p();break;case"swirl-stack":customElements.get(o(i))||f()}}))};export{g as SwirlThumbnail,_ as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Host as a,transformTag as o}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{d as n}from"./swirl-action-list2.js";import{d as l}from"./swirl-action-list-item2.js";import{d as c}from"./swirl-button2.js";import{d as b}from"./swirl-button-group2.js";import{d as m}from"./swirl-icon-error2.js";import{d as h}from"./swirl-icon-more-horizontal2.js";import{d as u}from"./swirl-popover2.js";import{d}from"./swirl-popover-trigger2.js";import{d as p}from"./swirl-progress-indicator2.js";import{d as f}from"./swirl-stack2.js";const w=["s","m","l"],v=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.edit=e(this,"edit",7),this.removeThumbnail=e(this,"remove",7),this.thumbnailClick=e(this,"thumbnailClick",7),this.cursor="pointer",this.editButtonIcon="<swirl-icon-crop></swirl-icon-crop>",this.editButtonLabel="Edit",this.format="landscape",this.menuButtonLabel="More actions",this.openButtonIcon="<swirl-icon-visibility></swirl-icon-visibility>",this.openButtonLabel="Open",this.progressLabel="Loading progress",this.removeButtonIcon="<swirl-icon-delete></swirl-icon-delete>",this.removeButtonLabel="Remove",this.size="m",this.hasHover=!0,this.onEditClick=i=>{this.edit.emit(i),this.popoverEl?.close()},this.onOpenClick=i=>{this.thumbnailClick.emit(i),this.popoverEl?.close()},this.onRemoveClick=i=>{this.removeThumbnail.emit(i),this.popoverEl?.close()},this.onHoverChange=i=>{this.hasHover=i.matches}}connectedCallback(){"undefined"!=typeof window&&window.matchMedia&&(this.hoverMediaQuery=window.matchMedia("(hover: hover)"),this.hasHover=this.hoverMediaQuery.matches,this.hoverMediaQuery.addEventListener?.("change",this.onHoverChange))}disconnectedCallback(){this.hoverMediaQuery?.removeEventListener?.("change",this.onHoverChange),this.hoverMediaQuery=void 0}componentDidRender(){this.popoverTriggerEl&&this.popoverEl&&(this.popoverTriggerEl.swirlPopover=this.popoverEl)}render(){const i=w.includes(this.size),t=void 0!==this.progress,e=!!this.error,o=t&&!e,n=!!this.showEditButton,l=!!this.showRemoveButton,c=n||l,b=!this.hasHover&&c,m=i&&this.hasHover&&n&&l,h=i&&this.hasHover&&n&&!l,u=i&&this.hasHover&&l&&!n,d=!i&&this.hasHover&&c,p=m||b,f=b&&this.interactive,v=!!this.timestamp&&"s"!==this.size,g=t&&i,_=this.interactive||b,k=_?"button":"span",y=r("thumbnail","thumbnail--format-"+this.format,"thumbnail--size-"+this.size,{"thumbnail--interactive":this.interactive,"thumbnail--uploading-bar":t&&!i}),z=s(k,{key:"ea3f0c67da5935a39ab476559594d7604303746e",class:"thumbnail__image-wrapper",onClick:b?void 0:this.thumbnailClick.emit,style:_&&"pointer"!==this.cursor?{cursor:this.cursor}:void 0,type:_?"button":void 0},s("img",{key:"d140c9450394aeb51ba1f2e13a1bb73e7de0d6cc",alt:this.alt,class:"thumbnail__image",loading:"lazy",src:this.src}));return s(a,{key:"c120e25611076bc68c6e26f92ec3a7ba9f3c33b9"},s("span",{key:"09e46d5cca60f68a26443c7ded24d2db291f444a",class:y,role:"group"},b?s("swirl-popover-trigger",{ref:i=>this.popoverTriggerEl=i,swirlPopover:this.popoverEl},z):z,o&&s("span",{key:"ba91ae07e4c98811f65ecf89d6d0cdbd436a5a0d",class:i?"thumbnail__uploading-overlay":"thumbnail__progress-indicator"},s("swirl-progress-indicator",{key:"1388cb3399939b1fe9029c5fb26f898d894f61f8",label:this.progressLabel,size:i?"s":void 0,value:this.progress,variant:i?"circle":void 0})),e&&s("span",{key:"9e8c53138b170c7d06f51bf79f8e66bab468ab59",class:"thumbnail__error"},s("swirl-icon-error",{key:"88d70f137ed892f81eb367ec708b5ca5ccdba8ad",color:"critical"})),d&&s("swirl-button-group",{key:"3948b9f02f14a92674334cf193ff42c3a5161f3c",class:"thumbnail__buttons",segmented:n&&l},n&&s("span",{key:"1a12677f382b5b5e08210750ad3708db6be661fa"},s("swirl-button",{key:"518c80493af5aa711307b4307dbea0136db56b3d",hideLabel:!0,icon:this.editButtonIcon,label:this.editButtonLabel,onClick:this.edit.emit,variant:"on-image"})),l&&s("span",{key:"8c06c3dc5cb9f2898c4cc525ce4caa8a9e2286da"},s("swirl-button",{key:"341ec503f6844d056658fe3e1ca55fb15e65f7f3",hideLabel:!0,icon:this.removeButtonIcon,label:this.removeButtonLabel,onClick:this.removeThumbnail.emit,variant:"on-image"}))),(h||u)&&s("span",{key:"e748fb32c09ed85fe897d8408f43d075d23cd1ea",class:"thumbnail__compact-action"},s("button",{key:"8d995e22627953e71cf7161d19d2625e87602c5d","aria-label":h?this.editButtonLabel:this.removeButtonLabel,class:"thumbnail__compact-button",onClick:h?this.edit.emit:this.removeThumbnail.emit,type:"button"},s("span",{key:"e6f8cfea63ed922e8fc4d38f0e4b22d7e79ab9b3",innerHTML:h?this.editButtonIcon:this.removeButtonIcon,ref:i=>i?.children[0]?.setAttribute("size","20")}))),m&&s("span",{key:"fd299281ea1712b3e2115c95d6d7eaf469e60074",class:"thumbnail__compact-action"},s("swirl-popover-trigger",{key:"2bd27ee0e23bfe766646f2d0b1cffce9cb773c04",ref:i=>this.popoverTriggerEl=i,swirlPopover:this.popoverEl},s("button",{key:"fee1b3be46212144f0ae707fc49a2ee1307a9b51","aria-label":this.menuButtonLabel,class:"thumbnail__compact-button",type:"button"},s("swirl-icon-more-horizontal",{key:"4a5bb72248b527fd87c84eedcf2a5f07d372aec6",size:20})))),p&&s("swirl-popover",{key:"67eb40b06977471d708abde705a62f9908de6e5d",label:this.menuButtonLabel,placement:"bottom-end",padded:!1,ref:i=>this.popoverEl=i},s("swirl-action-list",{key:"68739c8265a07020bee47b07d75626fc3ea4002c"},f&&s("swirl-action-list-item",{key:"d05c24d87a7c868eb9982ae46ddf168d261b54c5",icon:this.openButtonIcon,label:this.openButtonLabel,onClick:this.onOpenClick}),n&&s("swirl-action-list-item",{key:"8d30a6b23750f91b24bb6901b267586486e1d9ab",icon:this.editButtonIcon,label:this.editButtonLabel,onClick:this.onEditClick}),l&&s("swirl-action-list-item",{key:"c3ea0265ccdcf808a18f5dd3f70ba59a20d600e0",icon:this.removeButtonIcon,intent:"critical",label:this.removeButtonLabel,onClick:this.onRemoveClick}))),v&&!g&&s("span",{key:"09656507322fe691fde8edbe7b91844417094118",class:"thumbnail__timestamp"},this.timestamp)))}static get style(){return':host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;border-radius:var(--s-border-radius-s)}.thumbnail--size-s{--swirl-thumbnail-size:2.5rem;--swirl-thumbnail-compact-button-size:1.5rem}.thumbnail--size-m{--swirl-thumbnail-size:3rem;--swirl-thumbnail-compact-button-size:1.5rem}.thumbnail--size-l{--swirl-thumbnail-size:4rem;--swirl-thumbnail-compact-button-size:1.5rem}.thumbnail--size-xl{--swirl-thumbnail-size:5.5rem;--swirl-thumbnail-compact-button-size:1.75rem;border-radius:var(--s-border-radius-sm)}.thumbnail--size-2xl{--swirl-thumbnail-size:7.5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--format-landscape{width:var(--swirl-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-portrait{height:var(--swirl-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-square{width:var(--swirl-thumbnail-size);height:var(--swirl-thumbnail-size)}.thumbnail--uploading-bar .thumbnail__timestamp{bottom:var(--s-space-8)}.thumbnail__image-wrapper{position:relative;overflow:hidden;width:100%;height:100%;padding:0;border:none;border-radius:inherit;background-color:transparent;box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail__image-wrapper:focus:not(:focus-visible){outline:none}.thumbnail__image-wrapper:focus-visible{outline:0.125rem solid var(--s-focus-default);outline-offset:calc(-1 * 0.125rem)}.thumbnail--interactive .thumbnail__image-wrapper{cursor:pointer}.thumbnail--interactive .thumbnail__image-wrapper:hover:after{position:absolute;background-color:rgba(0, 0, 0, 0.15);content:"";inset:0}.thumbnail--interactive .thumbnail__image-wrapper:active:after{position:absolute;background-color:rgba(0, 0, 0, 0.3);content:"";inset:0}.thumbnail__image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.thumbnail__progress-indicator,.thumbnail__uploading-overlay{position:absolute;z-index:1;right:0;bottom:0;left:0}.thumbnail__uploading-overlay{inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--s-surface-on-image-default)}.thumbnail__error{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--s-surface-on-image-default)}.thumbnail__buttons{position:absolute;z-index:1;top:var(--s-space-4);right:var(--s-space-4)}.thumbnail__compact-action{position:absolute;z-index:2;top:0;right:0}.thumbnail__compact-button{width:var(--swirl-thumbnail-compact-button-size, 1.5rem);height:var(--swirl-thumbnail-compact-button-size, 1.5rem);padding:0;border:none;border-bottom-left-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default);cursor:pointer}.thumbnail__compact-button:focus:not(:focus-visible){outline:none}.thumbnail__compact-button:focus-visible{outline:0.125rem solid var(--s-focus-default);outline-offset:calc(-1 * 0.125rem)}.thumbnail__buttons,.thumbnail__compact-action{opacity:0}.thumbnail:hover .thumbnail__buttons,.thumbnail:hover .thumbnail__compact-action,.thumbnail:focus-within .thumbnail__buttons,.thumbnail:focus-within .thumbnail__compact-action{opacity:1}.thumbnail__timestamp{position:absolute;z-index:1;bottom:0;left:0;display:block;overflow:hidden;max-width:calc(100% - 2 * var(--s-space-4));height:1.25rem;padding-right:var(--s-space-4);padding-left:var(--s-space-4);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default);font-size:var(--s-font-size-sm);line-height:1.25rem;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}'}},[1,"swirl-thumbnail",{alt:[1],cursor:[1],editButtonIcon:[1,"edit-button-icon"],editButtonLabel:[1,"edit-button-label"],error:[4],format:[1],interactive:[4],menuButtonLabel:[1,"menu-button-label"],openButtonIcon:[1,"open-button-icon"],openButtonLabel:[1,"open-button-label"],progress:[2],progressLabel:[1,"progress-label"],removeButtonIcon:[1,"remove-button-icon"],removeButtonLabel:[1,"remove-button-label"],showEditButton:[4,"show-edit-button"],showRemoveButton:[4,"show-remove-button"],size:[1],src:[1],timestamp:[1],hasHover:[32]}]),g=v,_=function(){"undefined"!=typeof customElements&&["swirl-thumbnail","swirl-action-list","swirl-action-list-item","swirl-button","swirl-button-group","swirl-icon-error","swirl-icon-more-horizontal","swirl-popover","swirl-popover-trigger","swirl-progress-indicator","swirl-stack"].forEach((i=>{switch(i){case"swirl-thumbnail":customElements.get(o(i))||customElements.define(o(i),v);break;case"swirl-action-list":customElements.get(o(i))||n();break;case"swirl-action-list-item":customElements.get(o(i))||l();break;case"swirl-button":customElements.get(o(i))||c();break;case"swirl-button-group":customElements.get(o(i))||b();break;case"swirl-icon-error":customElements.get(o(i))||m();break;case"swirl-icon-more-horizontal":customElements.get(o(i))||h();break;case"swirl-popover":customElements.get(o(i))||u();break;case"swirl-popover-trigger":customElements.get(o(i))||d();break;case"swirl-progress-indicator":customElements.get(o(i))||p();break;case"swirl-stack":customElements.get(o(i))||f()}}))};export{g as SwirlThumbnail,_ as defineCustomElement}

package/dist/components/swirl-time-input.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Host as a,transformTag as n}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{p as o,i as h,f as m,I as c}from"./index3.js";import{D as l}from"./media-query.service.js";const u="HH:mm:ss",d=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.inputBlur=e(this,"inputBlur",7),this.inputFocus=e(this,"inputFocus",7),this.valueChange=e(this,"valueChange",7),this.format="HH:mm",this.placeholder="hh:mm",this.iconSize=24,this.mediaQueryUnsubscribe=()=>{},this.onBlur=i=>{this.inputBlur.emit(i)},this.onClick=i=>{i.preventDefault()},this.onFocus=i=>{this.inputFocus.emit(i),this.handleAutoSelect(i)}}componentWillLoad(){const i=Array.from(document.querySelectorAll("swirl-time-input")).indexOf(this.el);this.id="swirl-time-input-"+i}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=l.subscribe((i=>{this.updateIconSize(i)})),this.autoFocus&&setTimeout((()=>{this.inputEl.focus()}))}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(i,t){if(i!==t)if(this.valueChange.emit(i),this.mask&&i){const t=this.getPattern();let e=o(i,u,new Date);if(h(e)||(e=o(i,t,new Date)),h(e)){const i=m(e,t);this.mask.value=i}}else this.mask&&!i&&(this.mask.value="")}updateIconSize(i){this.iconSize=i?20:24}getPattern(){return this.format.replace(/(?<!H)H(?!H)/g,"HH").replace(/(?<!h)h(?!h)/g,"hh").replace(/(?<!m)m(?!m)/g,"mm").replace(/(?<!s)s(?!s)/g,"ss").replace(/(?<!a)a(?!a)/g,"aa")}handleAutoSelect(i){this.autoSelect?i.target&&i.target instanceof HTMLInputElement&&i.target.select():setTimeout((()=>{i.target&&i.target instanceof HTMLInputElement&&i.target.setSelectionRange&&i.target.setSelectionRange(0,0)}))}setupMask(){this.mask?.destroy();const i=this.getPattern();if(this.mask=c(this.inputEl,{mask:Date,pattern:i.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",prepareChar:i=>i.toUpperCase(),blocks:{HH:{mask:c.MaskedRange,from:0,to:23,maxLength:2},hh:{mask:c.MaskedRange,from:1,to:12,maxLength:2},mm:{mask:c.MaskedRange,from:0,to:59,maxLength:2},ss:{mask:c.MaskedRange,from:0,to:59,maxLength:2},aa:{mask:c.MaskedEnum,enum:["AM","PM"],maxLength:2}},format:t=>h(t)?(this.value=m(t,u),m(t,i)):"",parse:t=>o(t,i,new Date)}),this.value){const t=o(this.value,u,new Date);if(h(t)){const e=m(t,i);this.mask.value=e}}}render(){const i=!0===this.invalid||!1===this.invalid?this.invalid+"":void 0,t=r("time-input",{"time-input--inline":this.inline});return s(a,{key:"d1cc36a177a7d1a13d568e33399f6cdb7cc18ab6"},s("div",{key:"af03135976e9447b1124d96bbfd77e39a89ba5f4",class:t},s("input",{key:"ea008e9cec090d08a1903ba83e7a1a2a4bc79859","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":i,autoFocus:this.autoFocus,class:"time-input__input",disabled:this.disabled,id:this.id,inputmode:"numeric",onBlur:this.onBlur,onClick:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder,ref:i=>this.inputEl=i,required:this.required,type:"text",readonly:this.readonly}),s("span",{key:"0f7a80e78293b62ccf7ab832eba62503f26661ff",class:"time-input__icon"},s("swirl-icon-time-outlined",{key:"b60097a2a20cf5aa045994529f13afb06263da2b",size:this.iconSize}))))}get el(){return this}static get watchers(){return{format:[{watchFormat:0}],value:[{watchValue:0}]}}static get style(){return".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h *.sc-swirl-time-input{box-sizing:border-box}.time-input.sc-swirl-time-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:0}}.time-input__input.sc-swirl-time-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.time-input__input.sc-swirl-time-input:focus{outline:none}.time-input__input.sc-swirl-time-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__input.sc-swirl-time-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.time-input__icon.sc-swirl-time-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__icon.sc-swirl-time-input{top:-0.625rem}}"}},[2,"swirl-time-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],disabled:[4],format:[1],inline:[4],invalid:[4],placeholder:[1],required:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1537],readonly:[4],iconSize:[32]},void 0,{format:[{watchFormat:0}],value:[{watchValue:0}]}]),p=d,f=function(){"undefined"!=typeof customElements&&["swirl-time-input"].forEach((i=>{"swirl-time-input"===i&&(customElements.get(n(i))||customElements.define(n(i),d))}))};export{p as SwirlTimeInput,f as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Host as n,transformTag as a}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{p as o,i as l,f as c,I as h}from"./index3.js";import{D as m}from"./media-query.service.js";const p="HH:mm:ss",u=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.inputBlur=e(this,"inputBlur",7),this.inputFocus=e(this,"inputFocus",7),this.valueChange=e(this,"valueChange",7),this.format="HH:mm",this.placeholder="hh:mm",this.iconSize=24,this.mediaQueryUnsubscribe=()=>{},this.onBlur=i=>{this.inputBlur.emit(i)},this.onClick=i=>{i.preventDefault()},this.onFocus=i=>{this.inputFocus.emit(i),this.handleAutoSelect(i)}}componentWillLoad(){const i=Array.from(document.querySelectorAll("swirl-time-input")).indexOf(this.el);this.id="swirl-time-input-"+i}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=m.subscribe((i=>{this.updateIconSize(i)})),this.autoFocus&&setTimeout((()=>{this.inputEl.focus()}))}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(i,t){if(i!==t)if(this.valueChange.emit(i),this.mask&&i){const t=this.getPattern();let e=o(i,p,new Date);if(l(e)||(e=o(i,t,new Date)),l(e)){const i=c(e,t);this.mask.value=i}}else this.mask&&!i&&(this.mask.value="")}updateIconSize(i){this.iconSize=i?20:24}getPattern(){return this.format.replace(/(?<!H)H(?!H)/g,"HH").replace(/(?<!h)h(?!h)/g,"hh").replace(/(?<!m)m(?!m)/g,"mm").replace(/(?<!s)s(?!s)/g,"ss").replace(/(?<!a)a(?!a)/g,"aa")}handleAutoSelect(i){this.autoSelect?i.target&&i.target instanceof HTMLInputElement&&i.target.select():setTimeout((()=>{i.target&&i.target instanceof HTMLInputElement&&i.target.setSelectionRange&&i.target.setSelectionRange(0,0)}))}setupMask(){this.mask?.destroy();const i=this.getPattern();if(this.mask=h(this.inputEl,{mask:Date,pattern:i.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",prepareChar:i=>i.toUpperCase(),blocks:{HH:{mask:h.MaskedRange,from:0,to:23,maxLength:2},hh:{mask:h.MaskedRange,from:1,to:12,maxLength:2},mm:{mask:h.MaskedRange,from:0,to:59,maxLength:2},ss:{mask:h.MaskedRange,from:0,to:59,maxLength:2},aa:{mask:h.MaskedEnum,enum:["AM","PM"],maxLength:2}},format:t=>l(t)?(this.value=c(t,p),c(t,i)):"",parse:t=>o(t,i,new Date)}),this.value){const t=o(this.value,p,new Date);if(l(t)){const e=c(t,i);this.mask.value=e}}}render(){const i=!0===this.invalid||!1===this.invalid?this.invalid+"":void 0,t=r("time-input",{"time-input--inline":this.inline});return s(n,{key:"03269e02cc3844ce5fdff0f241d7e2909ba872d1"},s("div",{key:"9ad986344a8dba125c90a097691f8994cfeef83a",class:t},s("input",{key:"0be66d3884528f751f52c6d6139262c8c7d0e210","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":i,autoFocus:this.autoFocus,class:"time-input__input",disabled:this.disabled,id:this.id,inputmode:"numeric",onBlur:this.onBlur,onClick:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder,ref:i=>this.inputEl=i,required:this.required,type:"text",readonly:this.readonly}),s("span",{key:"ef2448fe0d8113cc8f1842b014708f5f09963848",class:"time-input__icon"},s("swirl-icon-time-outlined",{key:"1acd26fc236a5c4343621660b4422eb925e37acd",size:this.iconSize}))))}get el(){return this}static get watchers(){return{format:[{watchFormat:0}],value:[{watchValue:0}]}}static get style(){return".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h *.sc-swirl-time-input{box-sizing:border-box}.time-input.sc-swirl-time-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:0}}.time-input--inline.sc-swirl-time-input .time-input__input.sc-swirl-time-input::-moz-placeholder{color:transparent}.time-input--inline.sc-swirl-time-input .time-input__input.sc-swirl-time-input::placeholder{color:transparent}.time-input__input.sc-swirl-time-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.time-input__input.sc-swirl-time-input:focus{outline:none}.time-input__input.sc-swirl-time-input:disabled{color:var(--s-text-disabled);background-color:transparent}.time-input__input.sc-swirl-time-input::-moz-placeholder{color:var(--swirl-input-placeholder-color)}.time-input__input.sc-swirl-time-input::placeholder{color:var(--swirl-input-placeholder-color)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__input.sc-swirl-time-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.time-input__icon.sc-swirl-time-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__icon.sc-swirl-time-input{top:-0.625rem}}"}},[2,"swirl-time-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],disabled:[4],format:[1],inline:[4],invalid:[4],placeholder:[1],required:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1537],readonly:[4],iconSize:[32]},void 0,{format:[{watchFormat:0}],value:[{watchValue:0}]}]),d=u,f=function(){"undefined"!=typeof customElements&&["swirl-time-input"].forEach((i=>{"swirl-time-input"===i&&(customElements.get(a(i))||customElements.define(a(i),u))}))};export{d as SwirlTimeInput,f as defineCustomElement}

package/dist/components/swirl-toast-provider.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as s,h as i,Host as o,transformTag as e}from"@stencil/core/internal/client";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-close2.js";import{d as r}from"./swirl-stack2.js";import{d as c}from"./swirl-toast2.js";const l=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.toasts=[],this.activeDialogStack=[],this.originalParent=null,this.onAction=t=>{const s=this.toasts.find((({toastId:s})=>s===t.detail));s&&(s.onAction?.(s.toastId),s.dismissOnAction&&this.dismiss(t.detail))},this.onDismiss=t=>{this.dismiss(t.detail)}}async clearAll(){this.toasts=[]}async dismiss(t){const s=this.toasts.find((s=>t===s.toastId));s&&(s.onDismiss?.(s.toastId),this.toasts=[...this.toasts].filter((s=>s.toastId!==t)))}async toast(t){if(this.toasts.some((s=>s.toastId===t.toastId)))return;const s={...t,createdAt:new Date,duration:t.duration||this.globalDuration||void 0,toastId:t.toastId||Math.round(1e4*Math.random())+""};return this.toasts=[...this.toasts,s],s}componentWillLoad(){this.originalParent=this.el.parentElement}disconnectedCallback(){this.el.isConnected||(this.activeDialogStack=this.activeDialogStack.filter((t=>t.isConnected)),this.ensureCorrectPosition())}handleDialogToggle(t){const{newState:s,dialog:i}=t.detail;"open"===s?this.onDialogOpen(i):this.onDialogClose(i)}onToastsChange(){this.toasts.length>0?this.ensureCorrectPosition():this.popoverEl.hidePopover()}onDialogOpen(t){this.activeDialogStack.includes(t)||this.activeDialogStack.push(t),this.toasts.length>0&&this.ensureCorrectPosition()}onDialogClose(t){this.activeDialogStack=this.activeDialogStack.filter((s=>s!=t)),this.toasts.length>0&&this.ensureCorrectPosition()}ensureCorrectPosition(){this.activeDialogStack=this.activeDialogStack.filter((t=>t.isConnected));const t=this.activeDialogStack[this.activeDialogStack.length-1]||this.originalParent;this.el.parentElement!==t&&t.appendChild(this.el),this.popoverEl.hidePopover(),this.popoverEl.showPopover()}render(){return i(o,{key:"3b3254340783d824a13f6fce1bed7c784376d5f4",role:"status"},i("swirl-stack",{key:"e27363486128cfde2ecf5d20277bfe5974d1df4d",class:"toast-provider__stack",part:"toast-provider__stack",popover:"manual",spacing:"12",align:"center",ref:t=>this.popoverEl=t},this.toasts.map((t=>{const s={...t,content:void 0,onDismiss:void 0,onAction:void 0};return i("swirl-toast",{key:t.toastId,...s,onDismiss:this.onDismiss,onAction:this.onAction},t.content)}))))}get el(){return this}static get watchers(){return{toasts:[{onToastsChange:0}]}}static get style(){return".toast-provider__stack{position:fixed;inset:unset;bottom:var(--s-space-16);left:0;right:0;pointer-events:none;margin:0 var(--s-space-24);border:none;padding:0;background:none;width:auto;overflow:unset}.toast-provider__stack::backdrop{display:none}.toast-provider__stack>*{width:auto;pointer-events:auto}"}},[1,"swirl-toast-provider",{globalDuration:[2,"global-duration"],toasts:[32],clearAll:[64],dismiss:[64],toast:[64]},[[4,"toggleDialog","handleDialogToggle"]],{toasts:[{onToastsChange:0}]}]),h=l,d=function(){"undefined"!=typeof customElements&&["swirl-toast-provider","swirl-button","swirl-icon-close","swirl-stack","swirl-toast"].forEach((t=>{switch(t){case"swirl-toast-provider":customElements.get(e(t))||customElements.define(e(t),l);break;case"swirl-button":customElements.get(e(t))||a();break;case"swirl-icon-close":customElements.get(e(t))||n();break;case"swirl-stack":customElements.get(e(t))||r();break;case"swirl-toast":customElements.get(e(t))||c()}}))};export{h as SwirlToastProvider,d as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as s,h as i,Host as o,transformTag as e}from"@stencil/core/internal/client";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-close2.js";import{d as r}from"./swirl-stack2.js";import{d as c}from"./swirl-toast2.js";const l=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.toasts=[],this.activeDialogStack=[],this.originalParent=null,this.onAction=t=>{const s=this.toasts.find((({toastId:s})=>s===t.detail));s&&(s.onAction?.(s.toastId),s.dismissOnAction&&this.dismiss(t.detail))},this.onDismiss=t=>{this.dismiss(t.detail)}}async clearAll(){this.toasts=[]}async dismiss(t){const s=this.toasts.find((s=>t===s.toastId));s&&(s.onDismiss?.(s.toastId),this.toasts=[...this.toasts].filter((s=>s.toastId!==t)))}async toast(t){if(this.toasts.some((s=>s.toastId===t.toastId)))return;const s={...t,createdAt:new Date,duration:t.duration||this.globalDuration||void 0,toastId:t.toastId||Math.round(1e4*Math.random())+""};return this.toasts=[...this.toasts,s],s}componentWillLoad(){this.originalParent=this.el.parentElement}disconnectedCallback(){this.el.isConnected||(this.activeDialogStack=this.activeDialogStack.filter((t=>t.isConnected)),this.ensureCorrectPosition())}handleDialogToggle(t){const{newState:s,dialog:i}=t.detail;"open"===s?this.onDialogOpen(i):this.onDialogClose(i)}onToastsChange(){this.toasts.length>0?this.ensureCorrectPosition():this.popoverEl.hidePopover()}onDialogOpen(t){this.activeDialogStack.includes(t)||this.activeDialogStack.push(t),this.toasts.length>0&&this.ensureCorrectPosition()}onDialogClose(t){this.activeDialogStack=this.activeDialogStack.filter((s=>s!=t)),this.toasts.length>0&&this.ensureCorrectPosition()}ensureCorrectPosition(){this.activeDialogStack=this.activeDialogStack.filter((t=>t.isConnected));const t=this.activeDialogStack[this.activeDialogStack.length-1]||this.originalParent;this.el.parentElement!==t&&t.appendChild(this.el),this.popoverEl.hidePopover(),this.popoverEl.showPopover()}render(){return i(o,{key:"beae26cc9bad4bf02620821d99e96e30699c2374",role:"status"},i("swirl-stack",{key:"9a97642ff7a29441893a66e0dcbbd0e84c27d738",class:"toast-provider__stack",part:"toast-provider__stack",popover:"manual",spacing:"12",align:"center",ref:t=>this.popoverEl=t},this.toasts.map((t=>{const s={...t,content:void 0,onDismiss:void 0,onAction:void 0};return i("swirl-toast",{key:t.toastId,...s,onDismiss:this.onDismiss,onAction:this.onAction},t.content)}))))}get el(){return this}static get watchers(){return{toasts:[{onToastsChange:0}]}}static get style(){return".toast-provider__stack{position:fixed;inset:unset;bottom:var(--s-space-16);left:0;right:0;pointer-events:none;margin:0 var(--s-space-24);border:none;padding:0;background:none;width:auto;overflow:unset}.toast-provider__stack::backdrop{display:none}.toast-provider__stack>*{width:auto;pointer-events:auto}"}},[1,"swirl-toast-provider",{globalDuration:[2,"global-duration"],toasts:[32],clearAll:[64],dismiss:[64],toast:[64]},[[4,"toggleDialog","handleDialogToggle"]],{toasts:[{onToastsChange:0}]}]),h=l,d=function(){"undefined"!=typeof customElements&&["swirl-toast-provider","swirl-button","swirl-icon-close","swirl-stack","swirl-toast"].forEach((t=>{switch(t){case"swirl-toast-provider":customElements.get(e(t))||customElements.define(e(t),l);break;case"swirl-button":customElements.get(e(t))||a();break;case"swirl-icon-close":customElements.get(e(t))||n();break;case"swirl-stack":customElements.get(e(t))||r();break;case"swirl-toast":customElements.get(e(t))||c()}}))};export{h as SwirlToastProvider,d as defineCustomElement}

package/dist/components/swirl-toast2.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as a,Host as e,transformTag as o}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{D as r}from"./media-query.service.js";import{d as c}from"./swirl-button2.js";import{d as l}from"./swirl-icon-close2.js";const d=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.action=i(this,"action",7),this.dismiss=i(this,"dismiss",7),this.accessibleDismissLabel="Dismiss",this.actionPosition="inline",this.intent="default",this.mediaQueryUnsubscribe=()=>{},this.onAction=()=>{this.action.emit(this.toastId)},this.onDismiss=()=>{this.dismiss.emit(this.toastId)}}watchDuration(){this.startTimer()}componentDidLoad(){this.startTimer(),this.mediaQueryUnsubscribe=r.subscribe((t=>{this.forceIconProps(t)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(t){const s=this.iconEl?.children[0],i=this.dismissIconEl;s?.setAttribute("size",t?"20":"24"),i?.setAttribute("size",t?"20":"24")}startTimer(){this.clearTimer(),void 0!==this.duration&&this.duration!==1/0&&(this.timeout=setTimeout((()=>{this.dismiss.emit(this.toastId)}),this.duration))}clearTimer(){Boolean(this.timeout)&&(clearTimeout(this.timeout),this.timeout=void 0)}render(){const t=n("toast",`toast--intent-${this.intent}`,`toast--action-position-${this.actionPosition}`);return a(e,{key:"3bbeac633acfcf8ea9b34e6c5f382a2d5d167028"},a("div",{key:"0d226caf4d8480b5e18a7a68909978038eb1599b",class:t},this.icon&&a("span",{key:"c023f0441a86a60f96e3246cff2f975c2d66341f",class:"toast__icon",innerHTML:this.icon,part:"toast__icon",ref:t=>this.iconEl=t}),a("span",{key:"b37440cbb7031cdb39c5ab7ae70b3cc12f25cfef",class:"toast__content-container"},a("span",{key:"65b785499a57274ac73205a88dcae45d0d30e89c",class:"toast__content",innerHTML:this.content,part:"toast__content"},a("slot",{key:"ccdef3c6f38cb2bd88bd9876710594b5e009b8f8"})),this.actionLabel&&a("swirl-button",{key:"05ea1a525aafdd29bc8174ef9f590e48ce92ef2a",class:"toast__action-button",label:this.actionLabel,onClick:this.onAction,variant:"plain"})),a("button",{key:"71ff41b6b3715cf7b0c1bb3947120414094f8a87","aria-label":this.dismissLabel||this.accessibleDismissLabel,class:"toast__dismiss-button",onClick:this.onDismiss,type:"button"},this.dismissLabel,!Boolean(this.dismissLabel)&&a("swirl-icon-close",{key:"67e4c3b781bd29ccc031a9019de8d4774713a0de",ref:t=>this.dismissIconEl=t}))))}static get watchers(){return{duration:[{watchDuration:0}]}}static get style(){return":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);box-shadow:var(--s-shadow-level-2)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast--action-position-bottom .toast__content-container{flex-direction:column}.toast--action-position-bottom .toast__action-button{margin-top:var(--s-space-8);margin-left:0;align-self:flex-start}.toast__icon{display:inline-flex;width:1.5rem;height:1.5rem;margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__icon{width:1.25rem;height:1.25rem}}.toast__content-container{display:flex;flex-grow:1;min-width:0}.toast__content{flex-basis:min-content;flex-grow:1;line-height:var(--s-line-height-base);text-align:left;align-self:flex-start}.toast__content ::part(link){color:var(--text-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.toast__action-button{--swirl-plain-button-text-color-default:var(--s-text-on-status);--swirl-plain-button-text-color-hovered:var(--s-text-on-status);--swirl-plain-button-text-color-pressed:var(--s-text-on-status);margin-left:var(--s-space-16);min-width:0;flex-shrink:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__action-button{margin-top:-1px}}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__dismiss-button{margin-top:calc(-1 * var(--s-space-2))}}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}"}},[257,"swirl-toast",{accessibleDismissLabel:[1,"accessible-dismiss-label"],actionLabel:[1,"action-label"],actionPosition:[1,"action-position"],content:[1],dismissLabel:[1,"dismiss-label"],duration:[2],icon:[1],intent:[1],toastId:[1,"toast-id"]},void 0,{duration:[{watchDuration:0}]}]);function h(){"undefined"!=typeof customElements&&["swirl-toast","swirl-button","swirl-icon-close"].forEach((t=>{switch(t){case"swirl-toast":customElements.get(o(t))||customElements.define(o(t),d);break;case"swirl-button":customElements.get(o(t))||c();break;case"swirl-icon-close":customElements.get(o(t))||l()}}))}export{d as S,h as d}
+import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as a,transformTag as o}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{D as r}from"./media-query.service.js";import{d as c}from"./swirl-button2.js";import{d as l}from"./swirl-icon-close2.js";const d=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.action=i(this,"action",7),this.dismiss=i(this,"dismiss",7),this.accessibleDismissLabel="Dismiss",this.actionPosition="inline",this.intent="default",this.mediaQueryUnsubscribe=()=>{},this.onAction=()=>{this.action.emit(this.toastId)},this.onDismiss=()=>{this.dismiss.emit(this.toastId)}}watchDuration(){this.startTimer()}componentDidLoad(){this.startTimer(),this.mediaQueryUnsubscribe=r.subscribe((t=>{this.forceIconProps(t)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(t){const s=this.iconEl?.children[0],i=this.dismissIconEl;s?.setAttribute("size",t?"20":"24"),i?.setAttribute("size",t?"20":"24")}startTimer(){this.clearTimer(),void 0!==this.duration&&this.duration!==1/0&&(this.timeout=setTimeout((()=>{this.dismiss.emit(this.toastId)}),this.duration))}clearTimer(){Boolean(this.timeout)&&(clearTimeout(this.timeout),this.timeout=void 0)}render(){const t=n("toast",`toast--intent-${this.intent}`,`toast--action-position-${this.actionPosition}`);return e(a,{key:"a0dbc188ced5c5d3eb2e00d21de97143376db128"},e("div",{key:"da67352733995b8a1465ea6e25b9aef8b75a17ae",class:t},this.icon&&e("span",{key:"d1bc5730cf21bbaaf6009fb046f79cb5e3f51c0d",class:"toast__icon",innerHTML:this.icon,part:"toast__icon",ref:t=>this.iconEl=t}),e("span",{key:"dfe6ece5012fe401682e8b5e8577c93136079a7f",class:"toast__content-container"},e("span",{key:"7dc75ae7db7f0b7c45008fec3cd5cc09edd2d556",class:"toast__content",innerHTML:this.content,part:"toast__content"},e("slot",{key:"e5e916620ba3eef875e59d80016b5dba96de4a8f"})),this.actionLabel&&e("swirl-button",{key:"3c59c9fa99cb7e95693a7d221e74222ae51bb0c6",class:"toast__action-button",label:this.actionLabel,onClick:this.onAction,variant:"plain"})),e("button",{key:"2e201c2e26339b1cec7f0c700d1269a24e577459","aria-label":this.dismissLabel||this.accessibleDismissLabel,class:"toast__dismiss-button",onClick:this.onDismiss,type:"button"},this.dismissLabel,!Boolean(this.dismissLabel)&&e("swirl-icon-close",{key:"34291adb75cc028bc19c1a1f4a2eae09bb4bc211",ref:t=>this.dismissIconEl=t}))))}static get watchers(){return{duration:[{watchDuration:0}]}}static get style(){return":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);box-shadow:var(--s-shadow-level-2)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast--action-position-bottom .toast__content-container{flex-direction:column}.toast--action-position-bottom .toast__action-button{margin-top:var(--s-space-8);margin-left:0;align-self:flex-start}.toast__icon{display:inline-flex;width:1.5rem;height:1.5rem;margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__icon{width:1.25rem;height:1.25rem}}.toast__content-container{display:flex;flex-grow:1;min-width:0}.toast__content{flex-basis:min-content;flex-grow:1;line-height:var(--s-line-height-base);text-align:left;align-self:flex-start}.toast__content ::part(link){color:var(--text-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.toast__action-button{--swirl-plain-button-text-color-default:var(--s-text-on-status);--swirl-plain-button-text-color-hovered:var(--s-text-on-status);--swirl-plain-button-text-color-pressed:var(--s-text-on-status);margin-left:var(--s-space-16);min-width:0;flex-shrink:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__action-button{margin-top:-1px}}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__dismiss-button{margin-top:calc(-1 * var(--s-space-2))}}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}"}},[257,"swirl-toast",{accessibleDismissLabel:[1,"accessible-dismiss-label"],actionLabel:[1,"action-label"],actionPosition:[1,"action-position"],content:[1],dismissLabel:[1,"dismiss-label"],duration:[2],icon:[1],intent:[1],toastId:[1,"toast-id"]},void 0,{duration:[{watchDuration:0}]}]);function h(){"undefined"!=typeof customElements&&["swirl-toast","swirl-button","swirl-icon-close"].forEach((t=>{switch(t){case"swirl-toast":customElements.get(o(t))||customElements.define(o(t),d);break;case"swirl-button":customElements.get(o(t))||c();break;case"swirl-icon-close":customElements.get(o(t))||l()}}))}export{d as S,h as d}

package/dist/components/swirl-toggle-button.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,h as o,transformTag as s}from"@stencil/core/internal/client";import{c as i}from"./index2.js";import{d as n}from"./swirl-icon2.js";const r=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isPressed=!1,this.hideLabel=!1,this.onClick=()=>{this.isPressed=!0}}render(){const t=i("button",{"button--pressed":this.isPressed});return o("button",{key:"1d7f06fe533453dbfe319075fdecab44b961af74",class:t,type:"button","aria-pressed":this.isPressed?"true":"false","aria-label":this.hideLabel?this.label:void 0,onClick:this.onClick},this.icon&&o("swirl-icon",{key:"fc44847f482647f3597269143ae83da2fbc5c2db",class:"button__icon",glyph:this.icon}),!this.hideLabel&&o("span",{key:"ffa330ac2bb7d048e8a8c69ffd098b7856f548d8",class:"button__label"},this.label))}static get style(){return":host{display:inline-block}:host *{box-sizing:border-box}.button{display:inline-flex;gap:var(--s-space-8);width:100%;padding:0.375rem var(--s-space-8);justify-content:center;align-items:center;border:none;border-radius:0.375rem;color:var(--s-text-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer}.button:hover{background-color:var(--s-state-hovered)}.button:active{background-color:var(--s-state-pressed)}.button:focus:not(:focus-visible){outline:none}.button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button.button--pressed{background-color:var(--s-surface-default);color:var(--s-text-highlight);box-shadow:var(--s-shadow-level-1)}.button.button--pressed .button__icon{color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button__label{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}.button__icon{width:1.5rem;height:1.5rem;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon{width:1.25rem;height:1.25rem}}"}},[1,"swirl-toggle-button",{identifier:[1],label:[1],icon:[1],isPressed:[1028,"is-pressed"],hideLabel:[4,"hide-label"]}]),a=r,l=function(){"undefined"!=typeof customElements&&["swirl-toggle-button","swirl-icon"].forEach((t=>{switch(t){case"swirl-toggle-button":customElements.get(s(t))||customElements.define(s(t),r);break;case"swirl-icon":customElements.get(s(t))||n()}}))};export{a as SwirlToggleButton,l as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,h as o,transformTag as s}from"@stencil/core/internal/client";import{c as i}from"./index2.js";import{d as n}from"./swirl-icon2.js";const r=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isPressed=!1,this.hideLabel=!1,this.onClick=()=>{this.isPressed=!0}}render(){const t=i("button",{"button--pressed":this.isPressed});return o("button",{key:"d042a67631b4cdb38c05d56475fbe02d0eb3f8b9",class:t,type:"button","aria-pressed":this.isPressed?"true":"false","aria-label":this.hideLabel?this.label:void 0,onClick:this.onClick},this.icon&&o("swirl-icon",{key:"db69dbaec3eb165113ec213ea0395cdc75b4ec78",class:"button__icon",glyph:this.icon}),!this.hideLabel&&o("span",{key:"e23c7ebbb93f2b215fda4553d7c56e1112e086a6",class:"button__label"},this.label))}static get style(){return":host{display:inline-block}:host *{box-sizing:border-box}.button{display:inline-flex;gap:var(--s-space-8);width:100%;padding:0.375rem var(--s-space-8);justify-content:center;align-items:center;border:none;border-radius:0.375rem;color:var(--s-text-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer}.button:hover{background-color:var(--s-state-hovered)}.button:active{background-color:var(--s-state-pressed)}.button:focus:not(:focus-visible){outline:none}.button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button.button--pressed{background-color:var(--s-surface-default);color:var(--s-text-highlight);box-shadow:var(--s-shadow-level-1)}.button.button--pressed .button__icon{color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button__label{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}.button__icon{width:1.5rem;height:1.5rem;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon{width:1.25rem;height:1.25rem}}"}},[1,"swirl-toggle-button",{identifier:[1],label:[1],icon:[1],isPressed:[1028,"is-pressed"],hideLabel:[4,"hide-label"]}]),a=r,l=function(){"undefined"!=typeof customElements&&["swirl-toggle-button","swirl-icon"].forEach((t=>{switch(t){case"swirl-toggle-button":customElements.get(s(t))||customElements.define(s(t),r);break;case"swirl-icon":customElements.get(s(t))||n()}}))};export{a as SwirlToggleButton,l as defineCustomElement}

package/dist/components/swirl-toggle-group.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as o,transformTag as r}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{d as i}from"./swirl-stack2.js";const a=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.selectedToggleChange=s(this,"selectedToggleChange",7),this.variant="flat",this.toggleButtons=[],this.onSlotChange=()=>{this.toggleButtons=Array.from(this.el.querySelectorAll("swirl-toggle-button")),this.setTogglePressedStates()}}watchSelectedToggleId(t,e){t!==e&&(this.selectedToggleChange.emit(t),this.setTogglePressedStates())}onClick(t){const e=t.target;"SWIRL-TOGGLE-BUTTON"===e?.tagName&&(t.stopPropagation(),this.selectedToggleId=e.identifier)}setTogglePressedStates(){this.toggleButtons?.length&&(this.selectedToggleId&&this.toggleButtons.some((t=>t.identifier===this.selectedToggleId))?this.toggleButtonWithId(this.selectedToggleId):this.toggleButtonWithId(this.toggleButtons[0].identifier))}toggleButtonWithId(t){this.toggleButtons?.length&&this.toggleButtons.forEach((e=>{e.isPressed=e.identifier===t}))}render(){const t=l("toggle-group","toggle-group--variant-"+this.variant,{"toggle-group--elevated":this.elevated});return o("swirl-stack",{key:"4fa4b23584713d39e50d9ca826f04a65a33662b8",class:t,"aria-label":this.swirlAriaLabel,spacing:"4",orientation:"horizontal",align:"center",role:"group"},o("slot",{key:"f23d802cb7e3a45edc5a422ea1c7b8f0336755dd",onSlotchange:this.onSlotChange}))}get el(){return this}static get watchers(){return{selectedToggleId:[{watchSelectedToggleId:0}]}}static get style(){return":host{display:inline-block}:host *{box-sizing:border-box}.toggle-group{padding:var(--s-space-2);background-color:var(--s-surface-sunken-default);border-radius:var(--s-space-8);transition:box-shadow 0.3s}.toggle-group--elevated{box-shadow:var(--s-shadow-level-2)}.toggle-group--variant-outline{outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}.toggle-group--variant-translucent{background-color:var(--s-surface-raised-default)}"}},[257,"swirl-toggle-group",{elevated:[4],variant:[1],swirlAriaLabel:[1,"swirl-aria-label"],selectedToggleId:[1025,"selected-toggle-id"]},[[0,"click","onClick"]],{selectedToggleId:[{watchSelectedToggleId:0}]}]),g=a,c=function(){"undefined"!=typeof customElements&&["swirl-toggle-group","swirl-stack"].forEach((t=>{switch(t){case"swirl-toggle-group":customElements.get(r(t))||customElements.define(r(t),a);break;case"swirl-stack":customElements.get(r(t))||i()}}))};export{g as SwirlToggleGroup,c as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as o,transformTag as r}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{d as i}from"./swirl-stack2.js";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.selectedToggleChange=s(this,"selectedToggleChange",7),this.variant="flat",this.toggleButtons=[],this.onSlotChange=()=>{this.toggleButtons=Array.from(this.el.querySelectorAll("swirl-toggle-button")),this.setTogglePressedStates()}}watchSelectedToggleId(e,t){e!==t&&(this.selectedToggleChange.emit(e),this.setTogglePressedStates())}onClick(e){const t=e.target;"SWIRL-TOGGLE-BUTTON"===t?.tagName&&(e.stopPropagation(),this.selectedToggleId=t.identifier)}setTogglePressedStates(){this.toggleButtons?.length&&(this.selectedToggleId&&this.toggleButtons.some((e=>e.identifier===this.selectedToggleId))?this.toggleButtonWithId(this.selectedToggleId):this.toggleButtonWithId(this.toggleButtons[0].identifier))}toggleButtonWithId(e){this.toggleButtons?.length&&this.toggleButtons.forEach((t=>{t.isPressed=t.identifier===e}))}render(){const e=l("toggle-group","toggle-group--variant-"+this.variant,{"toggle-group--elevated":this.elevated});return o("swirl-stack",{key:"dd9c485230f0bda3bdf4e109c1f3a5527db46511",class:e,"aria-label":this.swirlAriaLabel,spacing:"4",orientation:"horizontal",align:"center",role:"group"},o("slot",{key:"3390e52462e88e3de01868f493bd9c9a3f770fed",onSlotchange:this.onSlotChange}))}get el(){return this}static get watchers(){return{selectedToggleId:[{watchSelectedToggleId:0}]}}static get style(){return":host{display:inline-block}:host *{box-sizing:border-box}.toggle-group{padding:var(--s-space-2);background-color:var(--s-surface-sunken-default);border-radius:var(--s-space-8);transition:box-shadow 0.3s}.toggle-group--elevated{box-shadow:var(--s-shadow-level-2)}.toggle-group--variant-outline{outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}.toggle-group--variant-translucent{background-color:var(--s-surface-raised-default)}"}},[257,"swirl-toggle-group",{elevated:[4],variant:[1],swirlAriaLabel:[1,"swirl-aria-label"],selectedToggleId:[1025,"selected-toggle-id"]},[[0,"click","onClick"]],{selectedToggleId:[{watchSelectedToggleId:0}]}]),g=a,c=function(){"undefined"!=typeof customElements&&["swirl-toggle-group","swirl-stack"].forEach((e=>{switch(e){case"swirl-toggle-group":customElements.get(r(e))||customElements.define(r(e),a);break;case"swirl-stack":customElements.get(r(e))||i()}}))};export{g as SwirlToggleGroup,c as defineCustomElement}

package/dist/components/swirl-toolbar.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as s,h as e,Host as i,transformTag as o}from"@stencil/core/internal/client";import{k as r}from"./utils.js";import{d as n}from"./swirl-stack2.js";const a=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.orientation="horizontal",this.spacing="8",this.onKeyDown=t=>{"ArrowDown"===t.code||"ArrowRight"===t.code?(t.preventDefault(),this.focusNextItem()):"ArrowUp"!==t.code&&"ArrowLeft"!==t.code||(t.preventDefault(),this.focusPreviousItem())}}componentDidLoad(){const t=this.getItems();this.deactivateTabIndexes(t);const s=t[0]?.querySelector("button");s&&(s.tabIndex=0)}getItems(){return Array.from(this.el.querySelectorAll("swirl-button, swirl-chip"))}focusNextItem(){const t=this.getItems(),s=this.getActiveItemIndex(t);this.focusItem(t[(s+1)%t.length])}focusPreviousItem(){const t=this.getItems(),s=this.getActiveItemIndex(t);this.focusItem(t[0===s?t.length-1:s-1])}getActiveItemIndex(t){const s=r();return t.findIndex((t=>t===s?.closest("swirl-button, swirl-chip")))}focusItem(t){const s=this.getItems();if(this.deactivateTabIndexes(s),!t)return;const e=t.querySelector("button");e&&(e.tabIndex=0,e.focus())}deactivateTabIndexes(t){t.forEach((t=>{const s=t.querySelector("button");s&&(s.tabIndex=-1)}))}render(){return e(i,{key:"4976e353b8df6e70c241293dbba084b376677257"},e("swirl-stack",{key:"d145282f484e033a68dbaa4a78aa5fa0133334ee",align:"center","aria-label":this.label,"aria-orientation":this.orientation,role:"toolbar",onKeyDown:this.onKeyDown,orientation:this.orientation,spacing:this.spacing,wrap:!0},e("slot",{key:"a1511560b214686ed229c09e54d0a79393e6f230"})))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}"}},[257,"swirl-toolbar",{label:[1],orientation:[1],spacing:[1]}]),c=a,l=function(){"undefined"!=typeof customElements&&["swirl-toolbar","swirl-stack"].forEach((t=>{switch(t){case"swirl-toolbar":customElements.get(o(t))||customElements.define(o(t),a);break;case"swirl-stack":customElements.get(o(t))||n()}}))};export{c as SwirlToolbar,l as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as s,h as e,Host as i,transformTag as o}from"@stencil/core/internal/client";import{k as r}from"./utils.js";import{d as n}from"./swirl-stack2.js";const c=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.orientation="horizontal",this.spacing="8",this.onKeyDown=t=>{"ArrowDown"===t.code||"ArrowRight"===t.code?(t.preventDefault(),this.focusNextItem()):"ArrowUp"!==t.code&&"ArrowLeft"!==t.code||(t.preventDefault(),this.focusPreviousItem())}}componentDidLoad(){const t=this.getItems();this.deactivateTabIndexes(t);const s=t[0]?.querySelector("button");s&&(s.tabIndex=0)}getItems(){return Array.from(this.el.querySelectorAll("swirl-button, swirl-chip"))}focusNextItem(){const t=this.getItems(),s=this.getActiveItemIndex(t);this.focusItem(t[(s+1)%t.length])}focusPreviousItem(){const t=this.getItems(),s=this.getActiveItemIndex(t);this.focusItem(t[0===s?t.length-1:s-1])}getActiveItemIndex(t){const s=r();return t.findIndex((t=>t===s?.closest("swirl-button, swirl-chip")))}focusItem(t){const s=this.getItems();if(this.deactivateTabIndexes(s),!t)return;const e=t.querySelector("button");e&&(e.tabIndex=0,e.focus())}deactivateTabIndexes(t){t.forEach((t=>{const s=t.querySelector("button");s&&(s.tabIndex=-1)}))}render(){return e(i,{key:"73b1af3aced583df7489fed5d8fd87269b71958f"},e("swirl-stack",{key:"53acf3a4c4dcdb67004ce0c685fbce11709a36ad",align:"center","aria-label":this.label,"aria-orientation":this.orientation,role:"toolbar",onKeyDown:this.onKeyDown,orientation:this.orientation,spacing:this.spacing,wrap:!0},e("slot",{key:"602437b7f5529bae90be0203362223527b56644c"})))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}"}},[257,"swirl-toolbar",{label:[1],orientation:[1],spacing:[1]}]),a=c,l=function(){"undefined"!=typeof customElements&&["swirl-toolbar","swirl-stack"].forEach((t=>{switch(t){case"swirl-toolbar":customElements.get(o(t))||customElements.define(o(t),c);break;case"swirl-stack":customElements.get(o(t))||n()}}))};export{a as SwirlToolbar,l as defineCustomElement}

package/dist/components/swirl-tooltip2.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as o,h as i,Host as e,transformTag as s}from"@stencil/core/internal/client";import{b as a,c as n,o as l,s as r,f as p,a as h}from"./floating-ui.dom.js";import{c}from"./index2.js";import{t as d}from"./utils.js";const b=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.active=!0,this.delay=200,this.enableFlip=!0,this.intent="default",this.maxWidth="17.5rem",this.position="top",this.trigger=["focus","hover"],this.visible=!1,this.onKeydown=t=>{"Escape"===t.code&&this.hide()},this.onFocusIn=()=>{this.trigger.includes("focus")&&this.show()},this.onFocusOut=()=>{this.trigger.includes("focus")&&this.hide()},this.reposition=async()=>{const t=this.el.children[0];if(!Boolean(t)||!Boolean(this.popperEl))return;const o=[...this.options.middleware.filter((t=>t&&"arrow"!==t.name)),a({element:this.arrowElement,padding:12})];this.actualPosition=await n(t,this.popperEl,{...this.options,middleware:o});const i=this.actualPosition.middlewareData.arrow?.x,e=this.actualPosition.middlewareData.arrow?.y;this.arrowStyles={left:Boolean(i)?i+"px":void 0,top:Boolean(e)?e+"px":void 0}},this.showWithDelay=()=>{this.active&&(Boolean(this.showTimeout)&&(clearTimeout(this.showTimeout),this.showTimeout=void 0),this.showTimeout=setTimeout((()=>{this.show()}),this.delay))},this.updatePositioning=()=>{this.updateOptions(),this.active&&this.visible&&this.reposition()},this.updateOptions=()=>{const t=d("--s-space-12"),o=d("--s-space-8"),i=d("--s-space-16"),e=r({padding:{top:o,bottom:o,left:i,right:i}});this.options={middleware:this.enableFlip?[l(t),e,p()]:[l(t),e],placement:this.position,strategy:"fixed"}}}watchPosition(){this.updatePositioning()}watchEnableFlip(){this.updatePositioning()}onMouseEnter(){this.trigger.includes("hover")&&this.showWithDelay()}onMouseLeave(){this.trigger.includes("hover")&&this.hide()}onWindowResize(){this.active&&this.reposition()}onWindowScroll(){this.active&&this.visible&&this.reposition()}componentWillLoad(){this.reposition()}componentDidLoad(){void 0!==this.positioning&&console.warn('[Swirl] The "positioning" prop of swirl-tooltip is deprecated and will be removed with the next major release. "fixed" is now the default positioning strategy.'),this.updateOptions()}async show(){this.active&&(this.updateOptions(),this.visible=!0,requestAnimationFrame((()=>{const t=this.el.children[0];Boolean(t)&&(this.popperEl?.showPopover(),this.reposition(),this.disableAutoUpdate=h(t,this.popperEl,this.reposition.bind(this)))})))}async hide(){Boolean(this.showTimeout)&&(clearTimeout(this.showTimeout),this.showTimeout=void 0),this.visible=!1,this.popperEl?.hidePopover(),this.disableAutoUpdate?.()}render(){const t=c("tooltip",`tooltip--actual-placement-${this.actualPosition?.placement}`,`tooltip--intent-${this.intent}`,{"tooltip--visible":this.visible});return i(e,{key:"f72d398e8b0ffe35e6736a98e0c93322df8cc321",onKeydown:this.onKeydown},i("span",{key:"823d22387edc37f4d9f62ca80171d425984fcbd8",class:t},i("span",{key:"73ff0e71b320b369abd810083917cc810aa12bb3",class:"tooltip__reference","aria-describedby":"tooltip",onFocusout:this.onFocusOut,onClick:this.hide,onFocusin:this.onFocusIn},i("slot",{key:"360acfdbee9418dffc4928e8f51d4a1a16f636f2"})),i("span",{key:"da84c0c6a7837f53009bfcdef577319ba4980d50",class:"tooltip__popper",popover:"manual",ref:t=>this.popperEl=t,style:{top:Boolean(this.actualPosition)?`${this.actualPosition?.y}px`:"",left:Boolean(this.actualPosition)?`${this.actualPosition?.x}px`:"",maxWidth:this.maxWidth}},this.visible&&i("span",{key:"dea2834878343f30975c8f57b3d4359b6384931b",class:"tooltip__bubble",id:"tooltip",part:"tooltip__bubble",role:"tooltip"},i("span",{key:"85aae2745219a97e1dd1b130b9b4ffbbd8493e4d",class:"tooltip__content",innerHTML:this.content})),i("span",{key:"ed1aefbd28a10881c5b4a057b65b5e47eebda92b",class:"tooltip__arrow",ref:t=>this.arrowElement=t,style:{...this.arrowStyles,visibility:this.visible?"visible":"hidden"}}))))}get el(){return this}static get watchers(){return{position:[{watchPosition:0}],enableFlip:[{watchEnableFlip:0}]}}static get style(){return":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--visible .tooltip__popper{display:block;animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:fixed;display:none;opacity:0;border:none;padding:0;margin:0;background:transparent;overflow:visible}.tooltip__popper::backdrop{display:none}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);text-align:start;box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--intent-info .tooltip__bubble,.tooltip--intent-info .tooltip__arrow{background-color:var(--s-surface-info-default)}.tooltip--intent-primary .tooltip__bubble,.tooltip--intent-primary .tooltip__arrow{background-color:var(--s-action-primary-default);color:var(--s-text-on-action-primary)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}"}},[257,"swirl-tooltip",{active:[4],content:[1],delay:[2],enableFlip:[4,"enable-flip"],intent:[1],maxWidth:[1,"max-width"],position:[1],positioning:[1],trigger:[16],actualPosition:[32],arrowStyles:[32],visible:[32],show:[64],hide:[64]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"],[9,"resize","onWindowResize"],[9,"scroll","onWindowScroll"]],{position:[{watchPosition:0}],enableFlip:[{watchEnableFlip:0}]}]);function f(){"undefined"!=typeof customElements&&["swirl-tooltip"].forEach((t=>{"swirl-tooltip"===t&&(customElements.get(s(t))||customElements.define(s(t),b))}))}export{b as S,f as d}
+import{proxyCustomElement as t,HTMLElement as o,h as i,Host as e,transformTag as s}from"@stencil/core/internal/client";import{b as a,c as n,o as l,s as r,f as p,a as h}from"./floating-ui.dom.js";import{c}from"./index2.js";import{t as d}from"./utils.js";const b=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.active=!0,this.delay=200,this.enableFlip=!0,this.intent="default",this.maxWidth="17.5rem",this.position="top",this.trigger=["focus","hover"],this.visible=!1,this.onKeydown=t=>{"Escape"===t.code&&this.hide()},this.onFocusIn=()=>{this.trigger.includes("focus")&&this.show()},this.onFocusOut=()=>{this.trigger.includes("focus")&&this.hide()},this.reposition=async()=>{const t=this.el.children[0];if(!Boolean(t)||!Boolean(this.popperEl))return;const o=[...this.options.middleware.filter((t=>t&&"arrow"!==t.name)),a({element:this.arrowElement,padding:12})];this.actualPosition=await n(t,this.popperEl,{...this.options,middleware:o});const i=this.actualPosition.middlewareData.arrow?.x,e=this.actualPosition.middlewareData.arrow?.y;this.arrowStyles={left:Boolean(i)?i+"px":void 0,top:Boolean(e)?e+"px":void 0}},this.showWithDelay=()=>{this.active&&(Boolean(this.showTimeout)&&(clearTimeout(this.showTimeout),this.showTimeout=void 0),this.showTimeout=setTimeout((()=>{this.show()}),this.delay))},this.updatePositioning=()=>{this.updateOptions(),this.active&&this.visible&&this.reposition()},this.updateOptions=()=>{const t=d("--s-space-12"),o=d("--s-space-8"),i=d("--s-space-16"),e=r({padding:{top:o,bottom:o,left:i,right:i}});this.options={middleware:this.enableFlip?[l(t),e,p()]:[l(t),e],placement:this.position,strategy:"fixed"}}}watchPosition(){this.updatePositioning()}watchEnableFlip(){this.updatePositioning()}onMouseEnter(){this.trigger.includes("hover")&&this.showWithDelay()}onMouseLeave(){this.trigger.includes("hover")&&this.hide()}onWindowResize(){this.active&&this.reposition()}onWindowScroll(){this.active&&this.visible&&this.reposition()}componentWillLoad(){this.reposition()}componentDidLoad(){void 0!==this.positioning&&console.warn('[Swirl] The "positioning" prop of swirl-tooltip is deprecated and will be removed with the next major release. "fixed" is now the default positioning strategy.'),this.updateOptions()}async show(){this.active&&(this.updateOptions(),this.visible=!0,requestAnimationFrame((()=>{const t=this.el.children[0];Boolean(t)&&(this.popperEl?.showPopover(),this.reposition(),this.disableAutoUpdate=h(t,this.popperEl,this.reposition.bind(this)))})))}async hide(){Boolean(this.showTimeout)&&(clearTimeout(this.showTimeout),this.showTimeout=void 0),this.visible=!1,this.popperEl?.hidePopover(),this.disableAutoUpdate?.()}render(){const t=c("tooltip",`tooltip--actual-placement-${this.actualPosition?.placement}`,`tooltip--intent-${this.intent}`,{"tooltip--visible":this.visible});return i(e,{key:"1b5bb2034b315b49c7e1caf68fc73f21b3968b0e",onKeydown:this.onKeydown},i("span",{key:"7f7a5ee5634cac2d8652f826f0614be1dc994e7a",class:t},i("span",{key:"c4ac19e50a3ca991f4e5a814eb2a71bb828a9e32",class:"tooltip__reference","aria-describedby":"tooltip",onFocusout:this.onFocusOut,onClick:this.hide,onFocusin:this.onFocusIn},i("slot",{key:"4069069595ed74c9613b7bf0c449f33c13c847ea"})),i("span",{key:"76557a31870e9dddad8ca80d9a2010fd3b294f45",class:"tooltip__popper",popover:"manual",ref:t=>this.popperEl=t,style:{top:Boolean(this.actualPosition)?`${this.actualPosition?.y}px`:"",left:Boolean(this.actualPosition)?`${this.actualPosition?.x}px`:"",maxWidth:this.maxWidth}},this.visible&&i("span",{key:"16d4d3661053aaa6c315d66cbabf3074c24c43d8",class:"tooltip__bubble",id:"tooltip",part:"tooltip__bubble",role:"tooltip"},i("span",{key:"52e85ff11eca8e56a135991ed20d0815e9520681",class:"tooltip__content",innerHTML:this.content})),i("span",{key:"3a21f9cd678bedeb8fc4abbba91b1f0b94dfa9cd",class:"tooltip__arrow",ref:t=>this.arrowElement=t,style:{...this.arrowStyles,visibility:this.visible?"visible":"hidden"}}))))}get el(){return this}static get watchers(){return{position:[{watchPosition:0}],enableFlip:[{watchEnableFlip:0}]}}static get style(){return":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--visible .tooltip__popper{display:block;animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:fixed;display:none;opacity:0;border:none;padding:0;margin:0;background:transparent;overflow:visible}.tooltip__popper::backdrop{display:none}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);text-align:start;box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--intent-info .tooltip__bubble,.tooltip--intent-info .tooltip__arrow{background-color:var(--s-surface-info-default)}.tooltip--intent-primary .tooltip__bubble,.tooltip--intent-primary .tooltip__arrow{background-color:var(--s-action-primary-default);color:var(--s-text-on-action-primary)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}"}},[257,"swirl-tooltip",{active:[4],content:[1],delay:[2],enableFlip:[4,"enable-flip"],intent:[1],maxWidth:[1,"max-width"],position:[1],positioning:[1],trigger:[16],actualPosition:[32],arrowStyles:[32],visible:[32],show:[64],hide:[64]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"],[9,"resize","onWindowResize"],[9,"scroll","onWindowScroll"]],{position:[{watchPosition:0}],enableFlip:[{watchEnableFlip:0}]}]);function m(){"undefined"!=typeof customElements&&["swirl-tooltip"].forEach((t=>{"swirl-tooltip"===t&&(customElements.get(s(t))||customElements.define(s(t),b))}))}export{b as S,m as d}

package/dist/components/swirl-tree-navigation-item.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as i,createEvent as t,h as a,Host as n,transformTag as s}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{d as o}from"./swirl-icon2.js";import{d as l}from"./swirl-icon-chevron-right2.js";import{d as c}from"./swirl-icon-close2.js";import{d as h}from"./swirl-icon-open-in-new2.js";import{d}from"./swirl-tag2.js";import{d as m}from"./swirl-visually-hidden2.js";const g=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.expansionChange=t(this,"expansionChange",7),this.markAsNewLabel="New",this.level=1,this.expandable=!0,this.external=!1,this.expanded=!1,this.hasChildren=!1,this.hasCustomIcon=!1,this.childrenHeight="0",this.buttonId=this.navigationItemId+"-button",this.childrenId=this.navigationItemId+"-children",this.onKeyDown=e=>{switch(e.key){case" ":e.preventDefault(),this.toggleExpanded(e);break;case"ArrowRight":e.preventDefault(),!this.expanded&&this.hasChildren&&this.expand();break;case"ArrowLeft":e.preventDefault(),this.expanded&&this.collapse()}},this.toggleExpanded=e=>{this.expandable&&this.hasChildren&&!this.href&&(e.preventDefault(),e.stopPropagation(),this.expanded?this.collapse():this.expand())}}componentWillLoad(){this.hasCustomIcon=!!this.el.querySelector("[slot='custom-icon']"),this.checkForChildren()}componentDidLoad(){this.hasChildren&&this.expanded&&this.updateChildrenHeight()}updateChildrenHeight(){this.childrenRef&&(this.childrenHeight=this.expanded?this.childrenRef.scrollHeight+"px":"0")}handleExpandedChange(){this.expansionChange.emit(this.expanded),this.updateChildrenHeight()}checkForChildren(){this.hasChildren=!!this.el.querySelector("swirl-tree-navigation-item")}async expand(){!this.expanded&&this.expandable&&this.hasChildren&&(this.expanded=!0)}async collapse(){this.expanded&&this.expandable&&this.hasChildren&&(this.expanded=!1)}render(){const e=!!this.href,i=e?"a":"button",t=r("tree-navigation-item__link",{"tree-navigation-item__link--active":this.active,"tree-navigation-item__link--has-icon":this.hasCustomIcon||!!this.icon});return a(n,{key:"f734a6d8fe9ee94e4e1f4146ec15fff3d571fc80",role:"none"},a("li",{key:"95959e6031174ba1708c13d8daa585ddae85faca",class:{"tree-navigation-item":!0,"tree-navigation-item--expanded":this.expanded},role:"treeitem","aria-expanded":this.hasChildren?this.expanded:void 0,"aria-level":this.level},a(i,{key:"26c194ad12d296f72033324c5084c29196866733",onClick:this.toggleExpanded,onKeyDown:this.onKeyDown,class:t,href:this.href,target:this.target,type:e?void 0:"button",id:this.buttonId,"aria-current":this.active?"page":void 0,"aria-controls":this.hasChildren?this.childrenId:void 0,"aria-expanded":this.hasChildren?this.expanded:void 0},a("span",{key:"1403b580945410fd0affc7b934e8168394f57fae",class:"tree-navigation-item__content"},this.hasCustomIcon&&a("span",{key:"65c9dd7c6f2f8fa60dbe17387fa95c670f418c10",class:"tree-navigation-item__icon","aria-hidden":"true",role:"img","aria-label":this.label+" icon"},a("slot",{key:"0f204a6b8e6ce299151fc6dbded82972c99756a8",name:"custom-icon"})),!this.hasCustomIcon&&this.icon&&a("swirl-icon",{key:"d862a978877c752e6b70b23471a66d2e4615eb27",class:"tree-navigation-item__icon",glyph:this.icon,size:20,"aria-hidden":"true",role:"img","aria-label":this.label+" icon"}),a("span",{key:"40fc819ae4404bf7d51a74464dfb650ccf770c38",class:"tree-navigation-item__label"},a("span",{key:"4b25ab30a63b363fbd4042a7684e9e8f743aee00",class:"tree-navigation-item__label-text"},this.label),this.expandable&&this.hasChildren&&!this.external&&a("span",{key:"7aac93ca23021514007d56d986c40eb62423f285",class:"tree-navigation-item__toggle-icon","aria-hidden":"true"},a("swirl-icon-chevron-right",{key:"d947b119831e6047e9c286d0df27e3e14c063393",size:16,role:"img","aria-label":"Expand"})),this.external&&a("span",{key:"a66a2b326845d1e6b89288fa879d4f7a852a5257",class:"tree-navigation-item__external-icon","aria-hidden":"true"},a("swirl-icon-open-in-new",{key:"e48dc82646e567b650a22551307931d337fb7dd2",size:16,role:"img","aria-label":"External link"}))),this.markAsNew&&a("swirl-tag",{key:"168d31b91c9ba9d63ab5fe9f4ac591bd11ae0e23",class:"tree-navigation-item__is-new-tag",intent:"default",label:this.markAsNewLabel,size:"s",variant:"strong"}))),this.hasChildren&&a("ul",{key:"ee9b538b189b730ef5182ccf7e17bce10218c7f4",class:"tree-navigation-item__children",id:this.childrenId,role:"group","aria-label":this.label+" submenu",ref:e=>this.childrenRef=e,style:{height:this.childrenHeight}},a("slot",{key:"5ae1f92bb4043a69905d5145e1f0c1060b709839"}))))}get el(){return this}static get watchers(){return{expanded:[{handleExpandedChange:0}]}}static get style(){return":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-state-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-state-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-state-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8);max-height:var(--s-line-height-sm)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4);opacity:0;transition:opacity 0.3s ease}.tree-navigation-item__link:hover .tree-navigation-item__external-icon,.tree-navigation-item__link:focus-visible .tree-navigation-item__external-icon{opacity:1}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}.tree-navigation-item__is-new-tag{flex-shrink:0}"}},[257,"swirl-tree-navigation-item",{active:[4],href:[1],icon:[1],label:[1],target:[1],markAsNew:[4,"mark-as-new"],markAsNewLabel:[1,"mark-as-new-label"],navigationItemId:[1,"navigation-item-id"],level:[2],expandable:[4],external:[4],expanded:[32],hasChildren:[32],hasCustomIcon:[32],childrenHeight:[32],expand:[64],collapse:[64]},void 0,{expanded:[{handleExpandedChange:0}]}]),v=g,f=function(){"undefined"!=typeof customElements&&["swirl-tree-navigation-item","swirl-icon","swirl-icon-chevron-right","swirl-icon-close","swirl-icon-open-in-new","swirl-tag","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-tree-navigation-item":customElements.get(s(e))||customElements.define(s(e),g);break;case"swirl-icon":customElements.get(s(e))||o();break;case"swirl-icon-chevron-right":customElements.get(s(e))||l();break;case"swirl-icon-close":customElements.get(s(e))||c();break;case"swirl-icon-open-in-new":customElements.get(s(e))||h();break;case"swirl-tag":customElements.get(s(e))||d();break;case"swirl-visually-hidden":customElements.get(s(e))||m()}}))};export{v as SwirlTreeNavigationItem,f as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as i,createEvent as t,h as a,Host as n,transformTag as s}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{d as o}from"./swirl-icon2.js";import{d as l}from"./swirl-icon-chevron-right2.js";import{d as c}from"./swirl-icon-close2.js";import{d as h}from"./swirl-icon-open-in-new2.js";import{d}from"./swirl-tag2.js";import{d as m}from"./swirl-visually-hidden2.js";const g=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.expansionChange=t(this,"expansionChange",7),this.markAsNewLabel="New",this.level=1,this.expandable=!0,this.external=!1,this.expanded=!1,this.hasChildren=!1,this.hasCustomIcon=!1,this.childrenHeight="0",this.buttonId=this.navigationItemId+"-button",this.childrenId=this.navigationItemId+"-children",this.onKeyDown=e=>{switch(e.key){case" ":e.preventDefault(),this.toggleExpanded(e);break;case"ArrowRight":e.preventDefault(),!this.expanded&&this.hasChildren&&this.expand();break;case"ArrowLeft":e.preventDefault(),this.expanded&&this.collapse()}},this.toggleExpanded=e=>{this.expandable&&this.hasChildren&&!this.href&&(e.preventDefault(),e.stopPropagation(),this.expanded?this.collapse():this.expand())}}componentWillLoad(){this.hasCustomIcon=!!this.el.querySelector("[slot='custom-icon']"),this.checkForChildren()}componentDidLoad(){this.hasChildren&&this.expanded&&this.updateChildrenHeight()}updateChildrenHeight(){this.childrenRef&&(this.childrenHeight=this.expanded?this.childrenRef.scrollHeight+"px":"0")}handleExpandedChange(){this.expansionChange.emit(this.expanded),this.updateChildrenHeight()}checkForChildren(){this.hasChildren=!!this.el.querySelector("swirl-tree-navigation-item")}async expand(){!this.expanded&&this.expandable&&this.hasChildren&&(this.expanded=!0)}async collapse(){this.expanded&&this.expandable&&this.hasChildren&&(this.expanded=!1)}render(){const e=!!this.href,i=e?"a":"button",t=r("tree-navigation-item__link",{"tree-navigation-item__link--active":this.active,"tree-navigation-item__link--has-icon":this.hasCustomIcon||!!this.icon});return a(n,{key:"6d04d1fc0e6819e60b244d1a97cf59645f6dfc4c",role:"none"},a("li",{key:"37643532d0a7c47b697d76f56563442bab3d4221",class:{"tree-navigation-item":!0,"tree-navigation-item--expanded":this.expanded},role:"treeitem","aria-expanded":this.hasChildren?this.expanded:void 0,"aria-level":this.level},a(i,{key:"adbe093a15b901129308a06fa0ccfedf3674ba8e",onClick:this.toggleExpanded,onKeyDown:this.onKeyDown,class:t,href:this.href,target:this.target,type:e?void 0:"button",id:this.buttonId,"aria-current":this.active?"page":void 0,"aria-controls":this.hasChildren?this.childrenId:void 0,"aria-expanded":this.hasChildren?this.expanded:void 0},a("span",{key:"6ddb2a23bc8dc9637f8dccb10128c7a0870df063",class:"tree-navigation-item__content"},this.hasCustomIcon&&a("span",{key:"1e65d7b714bd820c65cafc084a27b8866638e5a5",class:"tree-navigation-item__icon","aria-hidden":"true",role:"img","aria-label":this.label+" icon"},a("slot",{key:"2de72cec64618eebd76bb875e7ec47437c914451",name:"custom-icon"})),!this.hasCustomIcon&&this.icon&&a("swirl-icon",{key:"d289b9f071225c9b4497705cb17073abc5d96016",class:"tree-navigation-item__icon",glyph:this.icon,size:20,"aria-hidden":"true",role:"img","aria-label":this.label+" icon"}),a("span",{key:"c96eecc41c80e738e198a4527b58b9f3a58493f8",class:"tree-navigation-item__label"},a("span",{key:"4c4cb13be4c983c596bff3b6ea9a76a5ca92f381",class:"tree-navigation-item__label-text"},this.label),this.expandable&&this.hasChildren&&!this.external&&a("span",{key:"9c1c732ac8a47957ad8ec9928a2f1f9b5a4ccb53",class:"tree-navigation-item__toggle-icon","aria-hidden":"true"},a("swirl-icon-chevron-right",{key:"5671db4c4058ea7de2ef38a7a98120e76945c45a",size:16,role:"img","aria-label":"Expand"})),this.external&&a("span",{key:"cf70881946cbe2e9461a3f8658531fa8da38b29d",class:"tree-navigation-item__external-icon","aria-hidden":"true"},a("swirl-icon-open-in-new",{key:"48a2f2feaadae653b73fc75d48e555dc6562ee89",size:16,role:"img","aria-label":"External link"}))),this.markAsNew&&a("swirl-tag",{key:"23f80de14a664a0e5b843d500facc91c98fe5979",class:"tree-navigation-item__is-new-tag",intent:"default",label:this.markAsNewLabel,size:"s",variant:"strong"}))),this.hasChildren&&a("ul",{key:"b7092ab4bf21bc671f50613046e2c85dd5738560",class:"tree-navigation-item__children",id:this.childrenId,role:"group","aria-label":this.label+" submenu",ref:e=>this.childrenRef=e,style:{height:this.childrenHeight}},a("slot",{key:"79b8086a9af0f89eab06d3785492564afeab2396"}))))}get el(){return this}static get watchers(){return{expanded:[{handleExpandedChange:0}]}}static get style(){return":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-state-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-state-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-state-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8);max-height:var(--s-line-height-sm)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4);opacity:0;transition:opacity 0.3s ease}.tree-navigation-item__link:hover .tree-navigation-item__external-icon,.tree-navigation-item__link:focus-visible .tree-navigation-item__external-icon{opacity:1}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}.tree-navigation-item__is-new-tag{flex-shrink:0}"}},[257,"swirl-tree-navigation-item",{active:[4],href:[1],icon:[1],label:[1],target:[1],markAsNew:[4,"mark-as-new"],markAsNewLabel:[1,"mark-as-new-label"],navigationItemId:[1,"navigation-item-id"],level:[2],expandable:[4],external:[4],expanded:[32],hasChildren:[32],hasCustomIcon:[32],childrenHeight:[32],expand:[64],collapse:[64]},void 0,{expanded:[{handleExpandedChange:0}]}]),v=g,b=function(){"undefined"!=typeof customElements&&["swirl-tree-navigation-item","swirl-icon","swirl-icon-chevron-right","swirl-icon-close","swirl-icon-open-in-new","swirl-tag","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-tree-navigation-item":customElements.get(s(e))||customElements.define(s(e),g);break;case"swirl-icon":customElements.get(s(e))||o();break;case"swirl-icon-chevron-right":customElements.get(s(e))||l();break;case"swirl-icon-close":customElements.get(s(e))||c();break;case"swirl-icon-open-in-new":customElements.get(s(e))||h();break;case"swirl-tag":customElements.get(s(e))||d();break;case"swirl-visually-hidden":customElements.get(s(e))||m()}}))};export{v as SwirlTreeNavigationItem,b as defineCustomElement}

package/dist/components/swirl-tree-navigation.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,h as n,Host as a,transformTag as i}from"@stencil/core/internal/client";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return n(a,{key:"69456adefd23bf636a3df9437087211cba63f71d"},n("ul",{key:"482166a957596e7dd69840a284eb3868b173a342","aria-label":this.label,class:"tree-navigation",role:"tree"},n("slot",{key:"2203db0c03dadac8d16995ee98e2706b06b3697f"})))}static get style(){return":host{display:block}:host *{box-sizing:border-box}.tree-navigation{margin:0;padding:0}"}},[257,"swirl-tree-navigation",{label:[1]}]),s=r,o=function(){"undefined"!=typeof customElements&&["swirl-tree-navigation"].forEach((e=>{"swirl-tree-navigation"===e&&(customElements.get(i(e))||customElements.define(i(e),r))}))};export{s as SwirlTreeNavigation,o as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,h as n,Host as a,transformTag as i}from"@stencil/core/internal/client";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return n(a,{key:"1756239bfc5fab4f3def49144ec30439694d4a5d"},n("ul",{key:"fe78ce76b508d531aa2e5797ac845e0b7dd1b81b","aria-label":this.label,class:"tree-navigation",role:"tree"},n("slot",{key:"0a375b7c1c28d8f57708e1afb777eab6595c8180"})))}static get style(){return":host{display:block}:host *{box-sizing:border-box}.tree-navigation{margin:0;padding:0}"}},[257,"swirl-tree-navigation",{label:[1]}]),s=r,o=function(){"undefined"!=typeof customElements&&["swirl-tree-navigation"].forEach((e=>{"swirl-tree-navigation"===e&&(customElements.get(i(e))||customElements.define(i(e),r))}))};export{s as SwirlTreeNavigation,o as defineCustomElement}

package/dist/components/swirl-tree-view-item.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as i,createEvent as t,forceUpdate as s,h as r,Host as o,Fragment as n,transformTag as a}from"@stencil/core/internal/client";import{c as d}from"./index2.js";import{S as h}from"./sortable.esm.js";import{t as l}from"./swirl-tree-view.config.js";import{d as c}from"./swirl-icon2.js";const v=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.dropTreeViewItem=t(this,"dropTreeViewItem",7),this.expandedChange=t(this,"expandedChange",7),this.itemSelected=t(this,"itemSelected",7),this.startKeyboardMoveEvent=t(this,"startKeyboardMove",7),this.endKeyboardMoveEvent=t(this,"endKeyboardMove",7),this.keyboardMoveEvent=t(this,"keyboardMove",7),this.expandable=!0,this.cannotKeyboardDropInCurrentPosition=!1,this.dragDropItemSelector="swirl-tree-view-item",this.enableDragDrop=!1,this.expanded=!1,this.level=0,this.movingViaKeyboard=!1,this.selected=!1,this.onFocus=()=>{this.selected||"tree"!==this.getSemantics()||this.select()},this.onKeyDown=e=>{if("Space"===e.code)return e.preventDefault(),void this.toggleKeyboardMove();this.movingViaKeyboard&&("ArrowDown"===e.code?(e.preventDefault(),e.stopPropagation(),this.moveItem("down")):"ArrowUp"===e.code&&(e.preventDefault(),e.stopPropagation(),this.moveItem("up")))},this.onClickCollapse=e=>{e.preventDefault(),e.stopPropagation(),this.collapse()},this.onClickExpand=e=>{e.preventDefault(),e.stopPropagation(),this.expand()}}componentWillLoad(){this.updateLevel();const e=this.el.closest("swirl-tree-view");this.enableDragDrop=e?.enableDragDrop,this.canDrop=e?.canDrop,this.dragDropItemSelector=e?.dragDropItemSelector,this.treeCollapsedIcon=e?.collapsedIcon??e?.getAttribute("collapsed-icon")??void 0,this.treeExpandedIcon=e?.expandedIcon??e?.getAttribute("expanded-icon")??void 0}componentDidLoad(){this.setUpDragDrop()}async expand(){!this.expanded&&this.expandable&&"tree"===this.getSemantics()&&(this.expanded=!0,this.expandedChange.emit(this.expanded))}async collapse(){this.expanded&&this.expandable&&"tree"===this.getSemantics()&&(this.expanded=!1,this.expandedChange.emit(this.expanded))}async select(e){"tree"===this.getSemantics()&&(this.selected=!0,e&&this.link?.focus(),this.itemSelected.emit(this.el))}async unselect(){"tree"===this.getSemantics()&&(this.selected=!1)}setUpDragDrop(){this.sortable&&(this.sortable.destroy(),this.sortable=void 0),this.enableDragDrop&&this.childList&&(this.sortable=new h(this.childList,{...l,draggable:this.dragDropItemSelector,onMove:e=>"function"!=typeof this.canDrop||this.canDrop({parentId:e.to.closest("swirl-tree-view-item")?.itemId,position:Math.max(Array.from(e.to.children).indexOf(e.related),0)}),onStart:e=>{l.onStart?.(e)},onEnd:e=>{e.stopPropagation(),l.onEnd?.(e);const{from:i,to:t,newIndex:s,oldIndex:r,item:o}=e,n=i.closest("swirl-tree-view-item")?.itemId,a=t.closest("swirl-tree-view-item")?.itemId;this.dropTreeViewItem.emit({newIndex:s,oldIndex:r,item:o,itemId:o.id??o.querySelector(":scope > swirl-tree-view-item").id,newNextSiblingItemId:s<t.children.length-1?t.children[s+1].id:void 0,newPrevSiblingItemId:s>0?t.children[s-1].id:void 0,sourceParentItemId:n,targetParentItemId:a})}}))}updateLevel(){let e=this.el.parentElement?.closest("swirl-tree-view-item");for(;e;)this.level+=1,e=e.parentElement?.closest("swirl-tree-view-item")}getItemContext(){const e=this.getParentTreeViewItem()??this.el.closest("swirl-tree-view"),i=Array.from(e.querySelectorAll(`\n        :scope > .tree-view-item > .tree-view-item__children > ${this.dragDropItemSelector},\n        :scope > .tree-view > ${this.dragDropItemSelector}\n      `));return{canDrop:!this.cannotKeyboardDropInCurrentPosition,parent:e,position:i.indexOf(this.el),siblingCount:i.length}}getParentItem(){return this.getElementToMove().parentElement.closest(this.dragDropItemSelector)}getParentTreeViewItem(){return this.el.parentElement.closest("swirl-tree-view-item")}getElementToMove(){return this.dragDropItemSelector?this.el.closest(this.dragDropItemSelector):this.el}getKeyboardMoveEventData(){const{canDrop:e,parent:i,position:t,siblingCount:s}=this.getItemContext();if(i)return{canDrop:e,parentLabel:i.label,childrenCount:s,itemLabel:this.label,position:t}}toggleKeyboardMove(){this.movingViaKeyboard?this.endKeyboardMove():this.startKeyboardMove()}endKeyboardMove(){const{parent:e,position:i}=this.getItemContext();if("function"==typeof this.canDrop&&!this.canDrop({parentId:e.id,position:i}))return;this.movingViaKeyboard=!1;const t=this.getKeyboardMoveEventData();t&&(this.endKeyboardMoveEvent.emit(t),this.dropTreeViewItem.emit({item:this.getElementToMove(),itemId:this.itemId,newIndex:i,oldIndex:this.positionBeforeKeyboardMove.position,newNextSiblingItemId:t.position<t.childrenCount-1?this.getElementToMove().nextElementSibling?.id:void 0,newPrevSiblingItemId:t.position>0?this.getElementToMove().previousElementSibling?.id:void 0,sourceParentItemId:this.positionBeforeKeyboardMove.parent.id??void 0,targetParentItemId:this.getParentItem()?.id}))}startKeyboardMove(){if(this.disableDrag)return;const{parent:e,position:i}=this.getItemContext();this.positionBeforeKeyboardMove={parent:e,position:i},this.movingViaKeyboard=!0;const t=this.getKeyboardMoveEventData();t&&this.startKeyboardMoveEvent.emit(t)}moveItem(e){const i=this.getElementToMove(),t=this.getParentItem(),r=this.getParentTreeViewItem();if("down"===e){const e=i.nextElementSibling;if(e){e.querySelector(".tree-view-item__children").prepend(i),r&&s(r);const t="SWIRL-TREE-VIEW-ITEM"===e.tagName?e:e.querySelector("swirl-tree-view-item");s(t),t.expand()}else t&&(t.parentElement.insertBefore(i,t.nextElementSibling),r&&s(r))}else if("up"===e){const e=i.previousElementSibling;if(e){e.querySelector(".tree-view-item__children").appendChild(i),r&&s(r);const t="SWIRL-TREE-VIEW-ITEM"===e.tagName?e:e.querySelector("swirl-tree-view-item");s(t),t.expand()}else t&&(t.parentElement.insertBefore(i,t),r&&s(r))}requestAnimationFrame((()=>{this.link.focus()})),this.checkKeyboardDropStatus();const o=this.getKeyboardMoveEventData();o&&this.keyboardMoveEvent.emit(o)}checkKeyboardDropStatus(){const{parent:e,position:i}=this.getItemContext();if("function"!=typeof this.canDrop)this.cannotKeyboardDropInCurrentPosition=!1;else{const t=this.canDrop({parentId:e.id,position:i});this.cannotKeyboardDropInCurrentPosition=!t}}getSemantics(){return this.el.closest('[role="tree"]')?"tree":"list"}render(){const e=!!this.el.querySelector("swirl-tree-view-item"),i=!!this.el.querySelector('[slot="tags"]'),t=!!this.icon&&/\p{Extended_Pictographic}/u.test(this.icon),s=this.enableDragDrop&&!e,a=this.expandedIcon??this.treeExpandedIcon??"expand-more",h=this.collapsedIcon??this.treeCollapsedIcon??"chevron-right",l=this.getSemantics(),c=this.expanded||"tree"!==l,v="tree"===l?this.selected?0:-1:void 0,m="tree"===l?"li":"div",w=d("tree-view-item",{"tree-view-item--active":this.active,"tree-view-item--cannot-keyboard-drop":this.cannotKeyboardDropInCurrentPosition,"tree-view-item--moving-via-keyboard":this.movingViaKeyboard,"tree-view-item--disable-drag":this.disableDrag,"tree-view-item--has-tags":i});return r(o,{key:"799801188a287a9840062e11839a8110d0277867",id:this.itemId,role:"tree"===l?"none":"listitem"},r(m,{key:"a9d7dc43950f0a5669bebe1e987b53ff7c5bfbe9",class:w,role:"tree"===l?"none":void 0},r("a",{key:"c3c306c46d1d0e72bc15aa3d4c269bd991ed8685","aria-current":this.active?"page":void 0,"aria-expanded":e&&"tree"===l?c+"":void 0,"aria-level":"tree"===l?this.level+1:void 0,"aria-owns":e&&"tree"===l?this.itemId+"-children":void 0,"aria-selected":"tree"===l?this.selected+"":void 0,class:"tree-view-item__link",href:this.href,onFocus:this.onFocus,onKeyDown:this.onKeyDown,ref:e=>this.link=e,role:"tree"===l?"treeitem":void 0,tabIndex:v},this.expandable&&"tree"===l&&r("span",{key:"128894c54b9787b2f68f696573007dd76ed9ed81",class:"tree-view-item__toggle-icon"},e&&r(n,{key:"6b478f02e5f99cf10a160d1dad12b229f9b9acd6"},r("swirl-icon",c?{glyph:a,onClick:this.onClickCollapse,size:24}:{glyph:h,onClick:this.onClickExpand,size:24}))),!!this.icon&&r(n,{key:"cf47f80489f16b33adcaf8ddcbd240a95f282cc8"},r("span",{key:"59dca8b68dedf4989335060594556ee9eb153478",class:"tree-view-item__icon"},t?this.icon:r("swirl-icon",{glyph:this.icon,size:24,color:this.iconColor}))),r("span",{key:"a72f38444e3c9eed91004452a87f6371309b2f87",class:"tree-view-item__label"},this.label),r("span",{key:"c9129679a11ebc44e1cad10b05d68eff7a41e076",class:"tree-view-item__tags"},r("slot",{key:"98b912755ab5b46f46cc1417cf15205ab23539b1",name:"tags"}))),r("ul",{key:"ac38c0a6fb60eebc8ff41546e1da4384b223d0a0","aria-label":this.label,class:"tree-view-item__children "+(s?"tree-view-item__children--drop-zone":""),id:this.itemId+"-children",ref:e=>this.childList=e,role:"tree"===l?"group":void 0,style:{display:c&&e||s?void 0:"none"}},r("slot",{key:"2fe60b3526dc2dcab583e326b02235e1e0b1bac6"}))))}get el(){return this}static get style(){return'swirl-tree-view-item{display:block;flex-grow:1}swirl-tree-view-item *{box-sizing:border-box}.tree-view-item{--tree-view-item-toggle-icon-size:1.5rem;list-style:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item{--tree-view-item-toggle-icon-size:1.25rem}}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost){border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link{background-color:var(--s-translucent-low-pressed)}.tree-view-item--ghost{border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm)}.tree-view-item--moving-via-keyboard{position:relative;z-index:1;border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--moving-via-keyboard .tree-view-item__link{background-color:var(--s-translucent-low-pressed)}.tree-view-item--moving-via-keyboard .tree-view-item__link:focus-visible{outline:none}.tree-view-item--cannot-keyboard-drop{opacity:0.5}.tree-view-item--active>.tree-view-item__link{background-color:var(--s-state-hovered)}.tree-view-item--has-tags .tree-view-item__tags{display:flex}.tree-view-item__children{position:relative;display:flex;margin:0;padding:var(--s-space-2) 0 0     calc(var(--tree-view-item-toggle-icon-size) + var(--s-space-4));flex-direction:column;gap:var(--s-space-2)}.tree-view-item__children--drop-zone{min-height:0.5rem;margin-top:-0.5rem}li.tree-view-item>.tree-view-item__children::before{content:"";position:absolute;top:var(--s-space-2);bottom:0;left:calc(var(--s-space-8) + var(--tree-view-item-toggle-icon-size) / 2);width:var(--s-border-width-default);height:calc(100% - var(--s-space-2));background-color:var(--s-border-default)}li.tree-view-item>.tree-view-item__children--drop-zone::before{content:none}.tree-view-item__link{display:flex;height:2.25rem;padding:var(--s-space-4) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);text-decoration:none;gap:var(--s-space-4)}.tree-view-item__link:hover{background-color:var(--s-state-hovered)}.tree-view-item__link:active{background-color:var(--s-state-pressed)}.tree-view-item__link:focus:not(:focus-visible){outline:none}.tree-view-item__link:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__link{font-size:var(--s-font-size-sm)}}.tree-view-item__icon{display:block;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);flex-grow:0;flex-shrink:0;color:var(--s-icon-default);font-size:var(--s-font-size-lg)}.tree-view-item__icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__icon{width:1.25rem;height:1.25rem;font-size:var(--s-font-size-base)}}.tree-view-item__toggle-icon{display:block;width:var(--tree-view-item-toggle-icon-size);height:var(--tree-view-item-toggle-icon-size);flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon ::part(icon){width:100%;height:100%}.tree-view-item__label{overflow:hidden;min-width:5rem;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.tree-view-item__tags{display:none;padding-left:var(--s-space-4);align-items:center;gap:var(--s-space-4)}'}},[260,"swirl-tree-view-item",{active:[4],collapsedIcon:[1,"collapsed-icon"],disableDrag:[4,"disable-drag"],expandable:[4],expandedIcon:[1,"expanded-icon"],href:[1],icon:[1],iconColor:[1,"icon-color"],itemId:[1,"item-id"],label:[1],canDrop:[32],cannotKeyboardDropInCurrentPosition:[32],dragDropItemSelector:[32],enableDragDrop:[32],expanded:[32],level:[32],movingViaKeyboard:[32],selected:[32],treeCollapsedIcon:[32],treeExpandedIcon:[32],expand:[64],collapse:[64],select:[64],unselect:[64]}]),m=v,w=function(){"undefined"!=typeof customElements&&["swirl-tree-view-item","swirl-icon"].forEach((e=>{switch(e){case"swirl-tree-view-item":customElements.get(a(e))||customElements.define(a(e),v);break;case"swirl-icon":customElements.get(a(e))||c()}}))};export{m as SwirlTreeViewItem,w as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as i,createEvent as t,forceUpdate as s,h as r,Host as o,Fragment as a,transformTag as n}from"@stencil/core/internal/client";import{c as d}from"./index2.js";import{S as h}from"./sortable.esm.js";import{t as l}from"./swirl-tree-view.config.js";import{d as c}from"./swirl-icon2.js";const v=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.dropTreeViewItem=t(this,"dropTreeViewItem",7),this.expandedChange=t(this,"expandedChange",7),this.itemSelected=t(this,"itemSelected",7),this.startKeyboardMoveEvent=t(this,"startKeyboardMove",7),this.endKeyboardMoveEvent=t(this,"endKeyboardMove",7),this.keyboardMoveEvent=t(this,"keyboardMove",7),this.expandable=!0,this.cannotKeyboardDropInCurrentPosition=!1,this.dragDropItemSelector="swirl-tree-view-item",this.enableDragDrop=!1,this.expanded=!1,this.level=0,this.movingViaKeyboard=!1,this.selected=!1,this.onFocus=()=>{this.selected||"tree"!==this.getSemantics()||this.select()},this.onKeyDown=e=>{if("Space"===e.code)return e.preventDefault(),void this.toggleKeyboardMove();this.movingViaKeyboard&&("ArrowDown"===e.code?(e.preventDefault(),e.stopPropagation(),this.moveItem("down")):"ArrowUp"===e.code&&(e.preventDefault(),e.stopPropagation(),this.moveItem("up")))},this.onClickCollapse=e=>{e.preventDefault(),e.stopPropagation(),this.collapse()},this.onClickExpand=e=>{e.preventDefault(),e.stopPropagation(),this.expand()}}componentWillLoad(){this.updateLevel();const e=this.el.closest("swirl-tree-view");this.enableDragDrop=e?.enableDragDrop,this.canDrop=e?.canDrop,this.dragDropItemSelector=e?.dragDropItemSelector,this.treeCollapsedIcon=e?.collapsedIcon??e?.getAttribute("collapsed-icon")??void 0,this.treeExpandedIcon=e?.expandedIcon??e?.getAttribute("expanded-icon")??void 0}componentDidLoad(){this.setUpDragDrop()}async expand(){!this.expanded&&this.expandable&&"tree"===this.getSemantics()&&(this.expanded=!0,this.expandedChange.emit(this.expanded))}async collapse(){this.expanded&&this.expandable&&"tree"===this.getSemantics()&&(this.expanded=!1,this.expandedChange.emit(this.expanded))}async select(e){"tree"===this.getSemantics()&&(this.selected=!0,e&&this.link?.focus(),this.itemSelected.emit(this.el))}async unselect(){"tree"===this.getSemantics()&&(this.selected=!1)}setUpDragDrop(){this.sortable&&(this.sortable.destroy(),this.sortable=void 0),this.enableDragDrop&&this.childList&&(this.sortable=new h(this.childList,{...l,draggable:this.dragDropItemSelector,onMove:e=>"function"!=typeof this.canDrop||this.canDrop({parentId:e.to.closest("swirl-tree-view-item")?.itemId,position:Math.max(Array.from(e.to.children).indexOf(e.related),0)}),onStart:e=>{l.onStart?.(e)},onEnd:e=>{e.stopPropagation(),l.onEnd?.(e);const{from:i,to:t,newIndex:s,oldIndex:r,item:o}=e,a=i.closest("swirl-tree-view-item")?.itemId,n=t.closest("swirl-tree-view-item")?.itemId;this.dropTreeViewItem.emit({newIndex:s,oldIndex:r,item:o,itemId:o.id??o.querySelector(":scope > swirl-tree-view-item").id,newNextSiblingItemId:s<t.children.length-1?t.children[s+1].id:void 0,newPrevSiblingItemId:s>0?t.children[s-1].id:void 0,sourceParentItemId:a,targetParentItemId:n})}}))}updateLevel(){let e=this.el.parentElement?.closest("swirl-tree-view-item");for(;e;)this.level+=1,e=e.parentElement?.closest("swirl-tree-view-item")}getItemContext(){const e=this.getParentTreeViewItem()??this.el.closest("swirl-tree-view"),i=Array.from(e.querySelectorAll(`\n        :scope > .tree-view-item > .tree-view-item__children > ${this.dragDropItemSelector},\n        :scope > .tree-view > ${this.dragDropItemSelector}\n      `));return{canDrop:!this.cannotKeyboardDropInCurrentPosition,parent:e,position:i.indexOf(this.el),siblingCount:i.length}}getParentItem(){return this.getElementToMove().parentElement.closest(this.dragDropItemSelector)}getParentTreeViewItem(){return this.el.parentElement.closest("swirl-tree-view-item")}getElementToMove(){return this.dragDropItemSelector?this.el.closest(this.dragDropItemSelector):this.el}getKeyboardMoveEventData(){const{canDrop:e,parent:i,position:t,siblingCount:s}=this.getItemContext();if(i)return{canDrop:e,parentLabel:i.label,childrenCount:s,itemLabel:this.label,position:t}}toggleKeyboardMove(){this.movingViaKeyboard?this.endKeyboardMove():this.startKeyboardMove()}endKeyboardMove(){const{parent:e,position:i}=this.getItemContext();if("function"==typeof this.canDrop&&!this.canDrop({parentId:e.id,position:i}))return;this.movingViaKeyboard=!1;const t=this.getKeyboardMoveEventData();t&&(this.endKeyboardMoveEvent.emit(t),this.dropTreeViewItem.emit({item:this.getElementToMove(),itemId:this.itemId,newIndex:i,oldIndex:this.positionBeforeKeyboardMove.position,newNextSiblingItemId:t.position<t.childrenCount-1?this.getElementToMove().nextElementSibling?.id:void 0,newPrevSiblingItemId:t.position>0?this.getElementToMove().previousElementSibling?.id:void 0,sourceParentItemId:this.positionBeforeKeyboardMove.parent.id??void 0,targetParentItemId:this.getParentItem()?.id}))}startKeyboardMove(){if(this.disableDrag)return;const{parent:e,position:i}=this.getItemContext();this.positionBeforeKeyboardMove={parent:e,position:i},this.movingViaKeyboard=!0;const t=this.getKeyboardMoveEventData();t&&this.startKeyboardMoveEvent.emit(t)}moveItem(e){const i=this.getElementToMove(),t=this.getParentItem(),r=this.getParentTreeViewItem();if("down"===e){const e=i.nextElementSibling;if(e){e.querySelector(".tree-view-item__children").prepend(i),r&&s(r);const t="SWIRL-TREE-VIEW-ITEM"===e.tagName?e:e.querySelector("swirl-tree-view-item");s(t),t.expand()}else t&&(t.parentElement.insertBefore(i,t.nextElementSibling),r&&s(r))}else if("up"===e){const e=i.previousElementSibling;if(e){e.querySelector(".tree-view-item__children").appendChild(i),r&&s(r);const t="SWIRL-TREE-VIEW-ITEM"===e.tagName?e:e.querySelector("swirl-tree-view-item");s(t),t.expand()}else t&&(t.parentElement.insertBefore(i,t),r&&s(r))}requestAnimationFrame((()=>{this.link.focus()})),this.checkKeyboardDropStatus();const o=this.getKeyboardMoveEventData();o&&this.keyboardMoveEvent.emit(o)}checkKeyboardDropStatus(){const{parent:e,position:i}=this.getItemContext();if("function"!=typeof this.canDrop)this.cannotKeyboardDropInCurrentPosition=!1;else{const t=this.canDrop({parentId:e.id,position:i});this.cannotKeyboardDropInCurrentPosition=!t}}getSemantics(){return this.el.closest('[role="tree"]')?"tree":"list"}render(){const e=!!this.el.querySelector("swirl-tree-view-item"),i=!!this.el.querySelector('[slot="tags"]'),t=!!this.icon&&/\p{Extended_Pictographic}/u.test(this.icon),s=this.enableDragDrop&&!e,n=this.expandedIcon??this.treeExpandedIcon??"expand-more",h=this.collapsedIcon??this.treeCollapsedIcon??"chevron-right",l=this.getSemantics(),c=this.expanded||"tree"!==l,v="tree"===l?this.selected?0:-1:void 0,m="tree"===l?"li":"div",w=d("tree-view-item",{"tree-view-item--active":this.active,"tree-view-item--cannot-keyboard-drop":this.cannotKeyboardDropInCurrentPosition,"tree-view-item--moving-via-keyboard":this.movingViaKeyboard,"tree-view-item--disable-drag":this.disableDrag,"tree-view-item--has-tags":i});return r(o,{key:"9e57ca8623777df2e68db5e4f124368a54832608",id:this.itemId,role:"tree"===l?"none":"listitem"},r(m,{key:"79b39acfba6751039df7ebc3f3990fbb3fb390a2",class:w,role:"tree"===l?"none":void 0},r("a",{key:"fc013a6e3954aaa59b656cd8104e43a08942cdf4","aria-current":this.active?"page":void 0,"aria-expanded":e&&"tree"===l?c+"":void 0,"aria-level":"tree"===l?this.level+1:void 0,"aria-owns":e&&"tree"===l?this.itemId+"-children":void 0,"aria-selected":"tree"===l?this.selected+"":void 0,class:"tree-view-item__link",href:this.href,onFocus:this.onFocus,onKeyDown:this.onKeyDown,ref:e=>this.link=e,role:"tree"===l?"treeitem":void 0,tabIndex:v},this.expandable&&"tree"===l&&r("span",{key:"ca705b472ae4456b5421401d016ff4596dcf50b5",class:"tree-view-item__toggle-icon"},e&&r(a,{key:"e09b8eb77f06ffbb3456e7dc0ca38d22aaa3dd90"},r("swirl-icon",c?{glyph:n,onClick:this.onClickCollapse,size:24}:{glyph:h,onClick:this.onClickExpand,size:24}))),!!this.icon&&r(a,{key:"b026d8f8d6322cf651da6b9522f6f9d84aec6da7"},r("span",{key:"96163824f4dc898a03b2903e547dbb388ad60fbb",class:"tree-view-item__icon"},t?this.icon:r("swirl-icon",{glyph:this.icon,size:24,color:this.iconColor}))),r("span",{key:"e64e31989a236550a135dea4d4d35576c5116a21",class:"tree-view-item__label"},this.label),r("span",{key:"e1743f64d0f5179fbe4b1cc2ca53844e0a3219a9",class:"tree-view-item__tags"},r("slot",{key:"fe73b932340858a097d35c6a4aa43a14c859b6e0",name:"tags"}))),r("ul",{key:"44953abc396948b111671a6e7a18aecd44ba8da5","aria-label":this.label,class:"tree-view-item__children "+(s?"tree-view-item__children--drop-zone":""),id:this.itemId+"-children",ref:e=>this.childList=e,role:"tree"===l?"group":void 0,style:{display:c&&e||s?void 0:"none"}},r("slot",{key:"601a5749bbada2f74550cd132908be74a0b14b58"}))))}get el(){return this}static get style(){return'swirl-tree-view-item{display:block;flex-grow:1}swirl-tree-view-item *{box-sizing:border-box}.tree-view-item{--tree-view-item-toggle-icon-size:1.5rem;list-style:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item{--tree-view-item-toggle-icon-size:1.25rem}}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost){border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link{background-color:var(--s-translucent-low-pressed)}.tree-view-item--ghost{border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm)}.tree-view-item--moving-via-keyboard{position:relative;z-index:1;border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--moving-via-keyboard .tree-view-item__link{background-color:var(--s-translucent-low-pressed)}.tree-view-item--moving-via-keyboard .tree-view-item__link:focus-visible{outline:none}.tree-view-item--cannot-keyboard-drop{opacity:0.5}.tree-view-item--active>.tree-view-item__link{background-color:var(--s-state-hovered)}.tree-view-item--has-tags .tree-view-item__tags{display:flex}.tree-view-item__children{position:relative;display:flex;margin:0;padding:var(--s-space-2) 0 0     calc(var(--tree-view-item-toggle-icon-size) + var(--s-space-4));flex-direction:column;gap:var(--s-space-2)}.tree-view-item__children--drop-zone{min-height:0.5rem;margin-top:-0.5rem}li.tree-view-item>.tree-view-item__children::before{content:"";position:absolute;top:var(--s-space-2);bottom:0;left:calc(var(--s-space-8) + var(--tree-view-item-toggle-icon-size) / 2);width:var(--s-border-width-default);height:calc(100% - var(--s-space-2));background-color:var(--s-border-default)}li.tree-view-item>.tree-view-item__children--drop-zone::before{content:none}.tree-view-item__link{display:flex;height:2.25rem;padding:var(--s-space-4) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);text-decoration:none;gap:var(--s-space-4)}.tree-view-item__link:hover{background-color:var(--s-state-hovered)}.tree-view-item__link:active{background-color:var(--s-state-pressed)}.tree-view-item__link:focus:not(:focus-visible){outline:none}.tree-view-item__link:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__link{font-size:var(--s-font-size-sm)}}.tree-view-item__icon{display:block;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);flex-grow:0;flex-shrink:0;color:var(--s-icon-default);font-size:var(--s-font-size-lg)}.tree-view-item__icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__icon{width:1.25rem;height:1.25rem;font-size:var(--s-font-size-base)}}.tree-view-item__toggle-icon{display:block;width:var(--tree-view-item-toggle-icon-size);height:var(--tree-view-item-toggle-icon-size);flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon ::part(icon){width:100%;height:100%}.tree-view-item__label{overflow:hidden;min-width:5rem;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.tree-view-item__tags{display:none;padding-left:var(--s-space-4);align-items:center;gap:var(--s-space-4)}'}},[260,"swirl-tree-view-item",{active:[4],collapsedIcon:[1,"collapsed-icon"],disableDrag:[4,"disable-drag"],expandable:[4],expandedIcon:[1,"expanded-icon"],href:[1],icon:[1],iconColor:[1,"icon-color"],itemId:[1,"item-id"],label:[1],canDrop:[32],cannotKeyboardDropInCurrentPosition:[32],dragDropItemSelector:[32],enableDragDrop:[32],expanded:[32],level:[32],movingViaKeyboard:[32],selected:[32],treeCollapsedIcon:[32],treeExpandedIcon:[32],expand:[64],collapse:[64],select:[64],unselect:[64]}]),m=v,w=function(){"undefined"!=typeof customElements&&["swirl-tree-view-item","swirl-icon"].forEach((e=>{switch(e){case"swirl-tree-view-item":customElements.get(n(e))||customElements.define(n(e),v);break;case"swirl-icon":customElements.get(n(e))||c()}}))};export{m as SwirlTreeViewItem,w as defineCustomElement}

package/dist/components/swirl-tree-view.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as i,forceUpdate as s,h as r,Host as n,transformTag as o}from"@stencil/core/internal/client";import{S as a}from"./sortable.esm.js";import{t as l}from"./swirl-tree-view.config.js";import{d}from"./swirl-visually-hidden2.js";const h={cannotBeDropped:"Cannot drop here.",end:"{itemLabel}, dropped. Parent item: {parentLabel}. Final position in list: {position} of {childrenCount}.",initial:"Press space to move items.",moved:"{itemLabel}. Parent item: {parentLabel}. Current position in list: {position} of {childrenCount}.",start:"{itemLabel}, grabbed. Parent item: {parentLabel}. Current position in list: {position} of {childrenCount}. Press up and down arrow keys to change position, Space to drop."},c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.dropItem=i(this,"dropItem",7),this.itemExpansionChanged=i(this,"itemExpansionChanged",7),this.dragDropInstructions=h,this.dragDropItemSelector="swirl-tree-view-item",this.semantics="tree",this.liveRegionText="",this.onSlotChange=()=>{this.init()},this.onFocus=()=>{""===this.liveRegionText&&this.updateLiveRegionText("initial")},this.onBlur=e=>{this.el.contains(e.relatedTarget)||""!==this.liveRegionText&&this.updateLiveRegionText()}}componentDidLoad(){this.initiallyExpandedItemIds&&this.expandItems(this.initiallyExpandedItemIds),this.init(),this.setUpDragDrop()}disconnectedCallback(){this.sortable?.destroy()}handleEnableDragDropChange(){this.setUpDragDrop()}async expandItems(e){"tree"===this.semantics&&this.getItems().filter((t=>e.includes(t.itemId))).forEach((e=>e.expand()))}onItemDrop(e){if(e.stopPropagation(),this.dropItem.emit(e.detail),e.detail.targetParentItemId){const t=this.el.querySelector(`\n        swirl-tree-view-item#${e.detail.targetParentItemId},\n        #${e.detail.targetParentItemId} > swirl-tree-view-item\n      `);t&&(s(t),t.expand())}if(e.detail.sourceParentItemId){const t=this.el.querySelector(`\n        swirl-tree-view-item#${e.detail.sourceParentItemId},\n        #${e.detail.sourceParentItemId} > swirl-tree-view-item\n      `);t&&(s(t),t.expand())}}onKeyDown(e){"tree"===this.semantics&&("ArrowDown"===e.key?(e.preventDefault(),this.selectNextItem()):"ArrowUp"===e.key?(e.preventDefault(),this.selectPreviousItem()):"ArrowRight"===e.key?(e.preventDefault(),this.expandSelectedItem()):"ArrowLeft"===e.key?(e.preventDefault(),this.collapseSelectedItem()):"Home"===e.key?(e.preventDefault(),this.selectFirstItem()):"End"===e.key&&(e.preventDefault(),this.selectLastItem()))}onItemSelected(e){this.getItems().forEach((t=>{t!==e.target&&t.unselect()}))}onExpandedChange(e){const t=e.target;"SWIRL-TREE-VIEW-ITEM"===t?.tagName&&this.itemExpansionChanged.emit({itemId:t.itemId,expanded:e.detail})}onEndKeyboardMove(e){this.updateLiveRegionText("end",e.detail)}onStartKeyboardMove(e){this.updateLiveRegionText("start",e.detail)}onKeyboardMove(e){this.updateLiveRegionText("moved",e.detail)}init(){if("tree"!==this.semantics)return;const e=this.getSelectedItem(),t=this.getItems();t.forEach((e=>e.unselect())),e?e.select():t[0]?.select()}setUpDragDrop(){this.sortable&&(this.sortable.destroy(),this.sortable=void 0),this.enableDragDrop&&(this.sortable=new a(this.listElement,{...l,draggable:this.dragDropItemSelector,onMove:e=>"function"!=typeof this.canDrop||this.canDrop({parentId:e.to.closest("swirl-tree-view-item")?.itemId,position:Math.max(Array.from(e.to.children).indexOf(e.related),0)+1}),onStart:e=>{l.onStart?.(e)},onEnd:e=>{e.stopPropagation(),l.onEnd?.(e);const{to:t,newIndex:i,oldIndex:r,item:n}=e,o=t.closest("swirl-tree-view-item");o&&(s(o),o.expand()),this.dropItem.emit({newIndex:i,oldIndex:r,item:n,itemId:n.id??n.querySelector(":scope > swirl-tree-view-item").id,newNextSiblingItemId:i<t.children.length-1?t.children[i+1].id:void 0,newPrevSiblingItemId:i>0?t.children[i-1].id:void 0,sourceParentItemId:void 0,targetParentItemId:o?.itemId})}}))}selectFirstItem(){this.unselectAllItems(),this.getItems()[0]?.select(!0)}selectLastItem(){const e=this.getItems().filter((e=>e.parentElement.closest("swirl-tree-view-item")?.querySelector(':scope > li > [aria-expanded="true"]')||!e.parentElement.closest("swirl-tree-view-item"))).pop();this.unselectAllItems(),e?.select(!0)}expandSelectedItem(){const e=this.getSelectedItem();e&&(this.isItemExpanded(e)?this.selectNextItem():e.expand())}collapseSelectedItem(){const e=this.getSelectedItem();if(e)if(this.isItemExpanded(e))e.collapse();else{const t=e.parentElement.closest("swirl-tree-view-item");if(!t)return;this.unselectAllItems(),t.select(!0)}}selectNextItem(){const e=this.getSelectedItem(),t=this.isItemExpanded(e),i=this.getNextSibling(e);let s=e.parentElement.closest("swirl-tree-view-item"),r=this.getNextSibling(s);for(;s&&!r;)s=s?.parentElement.closest("swirl-tree-view-item, swirl-tree-view"),r=this.getNextSibling(s);const n=e.querySelector("swirl-tree-view-item"),o=t?n:i||r;o&&(this.unselectAllItems(),o.select?.(!0))}selectPreviousItem(){const e=this.getItems(),t=this.getSelectedItem(),i=this.getPreviousSibling(t);if(i?.querySelector(':scope > li > [aria-expanded="true"]')){let t=i?.querySelector(":scope > li > ul > swirl-tree-view-item:last-child, :scope > li > ul > *:last-child > swirl-tree-view-item"),s=!!t?.querySelector(':scope > li > [aria-expanded="true"]');for(;s;)t=t?.querySelector(":scope > li > ul > swirl-tree-view-item:last-child, :scope > li > ul > *:last-child > swirl-tree-view-item"),s=!!t?.querySelector('[aria-expanded="true"]');return e.forEach((e=>e.unselect())),void t.select?.(!0)}const s=t.parentElement.closest("swirl-tree-view-item"),r=i||s;r&&(e.forEach((e=>e.unselect())),r.select?.(!0))}unselectAllItems(){this.getItems().forEach((e=>e.unselect()))}getItems(){return Array.from(this.el.querySelectorAll("swirl-tree-view-item"))}getSelectedItem(){return this.getItems().find((e=>"true"===e.querySelector("a")?.getAttribute("aria-selected")))}isItemExpanded(e){return!!e.querySelector(':scope > li > [aria-expanded="true"]')}getNextSibling(e){if("SWIRL-TREE-VIEW-ITEM"===e?.nextElementSibling?.tagName)return e.nextElementSibling;const t=e?.parentElement?.nextElementSibling?.querySelector("swirl-tree-view-item");return t??void 0}getPreviousSibling(e){if("SWIRL-TREE-VIEW-ITEM"===e?.previousElementSibling?.tagName)return e.previousElementSibling;const t=e?.parentElement?.previousElementSibling?.querySelector("swirl-tree-view-item");return t??void 0}updateLiveRegionText(e,t){let i=e?this.dragDropInstructions[e]:"";t?.canDrop||(i+=" "+this.dragDropInstructions.cannotBeDropped);for(const[e,s]of Object.entries(t??{}))i=i.replaceAll(`{${e}}`,s+"");i!==this.liveRegionText&&(this.liveRegionText=i)}render(){return r(n,{key:"1d51b6b1613a1fa0b3baaa440df453cc04704a51"},this.enableDragDrop&&r("swirl-visually-hidden",{key:"76f99e5f1150e434597f15742efc73b3ccf7da3c"},r("span",{key:"198d943911f2b18286ba27770004f24686a8f547","aria-live":"assertive"},this.liveRegionText)),r("ul",{key:"9448e6968f5efa9161290b1f28e1653735b4036c","aria-label":this.label,class:"tree-view",onFocusin:this.onFocus,onFocusout:this.onBlur,role:"tree"===this.semantics?"tree":void 0,ref:e=>this.listElement=e,tabIndex:-1},r("slot",{key:"f186329a04387c0b3c2985d71af88d0ed5127473",onSlotchange:this.onSlotChange})))}get el(){return this}static get watchers(){return{enableDragDrop:[{handleEnableDragDropChange:0}]}}static get style(){return"swirl-tree-view{display:block}swirl-tree-view *{box-sizing:border-box}.tree-view{display:flex;margin:0;padding:0 0 var(--s-space-4);flex-direction:column;gap:var(--s-space-2)}.tree-view--dragging{cursor:grabbing}.tree-view--dragging .tree-view-item__link:hover,.tree-view--dragging .tree-view-item__link:active{background-color:var(--s-background-default) !important}"}},[260,"swirl-tree-view",{canDrop:[16],collapsedIcon:[1,"collapsed-icon"],dragDropInstructions:[16],dragDropItemSelector:[1,"drag-drop-item-selector"],enableDragDrop:[4,"enable-drag-drop"],expandedIcon:[1,"expanded-icon"],initiallyExpandedItemIds:[16],label:[1],semantics:[1],liveRegionText:[32],expandItems:[64]},[[0,"dropTreeViewItem","onItemDrop"],[0,"keydown","onKeyDown"],[0,"itemSelected","onItemSelected"],[0,"expandedChange","onExpandedChange"],[0,"endKeyboardMove","onEndKeyboardMove"],[0,"startKeyboardMove","onStartKeyboardMove"],[0,"keyboardMove","onKeyboardMove"]],{enableDragDrop:[{handleEnableDragDropChange:0}]}]),m=c,w=function(){"undefined"!=typeof customElements&&["swirl-tree-view","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-tree-view":customElements.get(o(e))||customElements.define(o(e),c);break;case"swirl-visually-hidden":customElements.get(o(e))||d()}}))};export{m as SwirlTreeView,w as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,forceUpdate as s,h as r,Host as n,transformTag as o}from"@stencil/core/internal/client";import{S as a}from"./sortable.esm.js";import{t as l}from"./swirl-tree-view.config.js";import{d}from"./swirl-visually-hidden2.js";const h={cannotBeDropped:"Cannot drop here.",end:"{itemLabel}, dropped. Parent item: {parentLabel}. Final position in list: {position} of {childrenCount}.",initial:"Press space to move items.",moved:"{itemLabel}. Parent item: {parentLabel}. Current position in list: {position} of {childrenCount}.",start:"{itemLabel}, grabbed. Parent item: {parentLabel}. Current position in list: {position} of {childrenCount}. Press up and down arrow keys to change position, Space to drop."},c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.dropItem=i(this,"dropItem",7),this.itemExpansionChanged=i(this,"itemExpansionChanged",7),this.dragDropInstructions=h,this.dragDropItemSelector="swirl-tree-view-item",this.semantics="tree",this.liveRegionText="",this.onSlotChange=()=>{this.init()},this.onFocus=()=>{""===this.liveRegionText&&this.updateLiveRegionText("initial")},this.onBlur=e=>{this.el.contains(e.relatedTarget)||""!==this.liveRegionText&&this.updateLiveRegionText()}}componentDidLoad(){this.initiallyExpandedItemIds&&this.expandItems(this.initiallyExpandedItemIds),this.init(),this.setUpDragDrop()}disconnectedCallback(){this.sortable?.destroy()}handleEnableDragDropChange(){this.setUpDragDrop()}async expandItems(e){"tree"===this.semantics&&this.getItems().filter((t=>e.includes(t.itemId))).forEach((e=>e.expand()))}onItemDrop(e){if(e.stopPropagation(),this.dropItem.emit(e.detail),e.detail.targetParentItemId){const t=this.el.querySelector(`\n        swirl-tree-view-item#${e.detail.targetParentItemId},\n        #${e.detail.targetParentItemId} > swirl-tree-view-item\n      `);t&&(s(t),t.expand())}if(e.detail.sourceParentItemId){const t=this.el.querySelector(`\n        swirl-tree-view-item#${e.detail.sourceParentItemId},\n        #${e.detail.sourceParentItemId} > swirl-tree-view-item\n      `);t&&(s(t),t.expand())}}onKeyDown(e){"tree"===this.semantics&&("ArrowDown"===e.key?(e.preventDefault(),this.selectNextItem()):"ArrowUp"===e.key?(e.preventDefault(),this.selectPreviousItem()):"ArrowRight"===e.key?(e.preventDefault(),this.expandSelectedItem()):"ArrowLeft"===e.key?(e.preventDefault(),this.collapseSelectedItem()):"Home"===e.key?(e.preventDefault(),this.selectFirstItem()):"End"===e.key&&(e.preventDefault(),this.selectLastItem()))}onItemSelected(e){this.getItems().forEach((t=>{t!==e.target&&t.unselect()}))}onExpandedChange(e){const t=e.target;"SWIRL-TREE-VIEW-ITEM"===t?.tagName&&this.itemExpansionChanged.emit({itemId:t.itemId,expanded:e.detail})}onEndKeyboardMove(e){this.updateLiveRegionText("end",e.detail)}onStartKeyboardMove(e){this.updateLiveRegionText("start",e.detail)}onKeyboardMove(e){this.updateLiveRegionText("moved",e.detail)}init(){if("tree"!==this.semantics)return;const e=this.getSelectedItem(),t=this.getItems();t.forEach((e=>e.unselect())),e?e.select():t[0]?.select()}setUpDragDrop(){this.sortable&&(this.sortable.destroy(),this.sortable=void 0),this.enableDragDrop&&(this.sortable=new a(this.listElement,{...l,draggable:this.dragDropItemSelector,onMove:e=>"function"!=typeof this.canDrop||this.canDrop({parentId:e.to.closest("swirl-tree-view-item")?.itemId,position:Math.max(Array.from(e.to.children).indexOf(e.related),0)+1}),onStart:e=>{l.onStart?.(e)},onEnd:e=>{e.stopPropagation(),l.onEnd?.(e);const{to:t,newIndex:i,oldIndex:r,item:n}=e,o=t.closest("swirl-tree-view-item");o&&(s(o),o.expand()),this.dropItem.emit({newIndex:i,oldIndex:r,item:n,itemId:n.id??n.querySelector(":scope > swirl-tree-view-item").id,newNextSiblingItemId:i<t.children.length-1?t.children[i+1].id:void 0,newPrevSiblingItemId:i>0?t.children[i-1].id:void 0,sourceParentItemId:void 0,targetParentItemId:o?.itemId})}}))}selectFirstItem(){this.unselectAllItems(),this.getItems()[0]?.select(!0)}selectLastItem(){const e=this.getItems().filter((e=>e.parentElement.closest("swirl-tree-view-item")?.querySelector(':scope > li > [aria-expanded="true"]')||!e.parentElement.closest("swirl-tree-view-item"))).pop();this.unselectAllItems(),e?.select(!0)}expandSelectedItem(){const e=this.getSelectedItem();e&&(this.isItemExpanded(e)?this.selectNextItem():e.expand())}collapseSelectedItem(){const e=this.getSelectedItem();if(e)if(this.isItemExpanded(e))e.collapse();else{const t=e.parentElement.closest("swirl-tree-view-item");if(!t)return;this.unselectAllItems(),t.select(!0)}}selectNextItem(){const e=this.getSelectedItem(),t=this.isItemExpanded(e),i=this.getNextSibling(e);let s=e.parentElement.closest("swirl-tree-view-item"),r=this.getNextSibling(s);for(;s&&!r;)s=s?.parentElement.closest("swirl-tree-view-item, swirl-tree-view"),r=this.getNextSibling(s);const n=e.querySelector("swirl-tree-view-item"),o=t?n:i||r;o&&(this.unselectAllItems(),o.select?.(!0))}selectPreviousItem(){const e=this.getItems(),t=this.getSelectedItem(),i=this.getPreviousSibling(t);if(i?.querySelector(':scope > li > [aria-expanded="true"]')){let t=i?.querySelector(":scope > li > ul > swirl-tree-view-item:last-child, :scope > li > ul > *:last-child > swirl-tree-view-item"),s=!!t?.querySelector(':scope > li > [aria-expanded="true"]');for(;s;)t=t?.querySelector(":scope > li > ul > swirl-tree-view-item:last-child, :scope > li > ul > *:last-child > swirl-tree-view-item"),s=!!t?.querySelector('[aria-expanded="true"]');return e.forEach((e=>e.unselect())),void t.select?.(!0)}const s=t.parentElement.closest("swirl-tree-view-item"),r=i||s;r&&(e.forEach((e=>e.unselect())),r.select?.(!0))}unselectAllItems(){this.getItems().forEach((e=>e.unselect()))}getItems(){return Array.from(this.el.querySelectorAll("swirl-tree-view-item"))}getSelectedItem(){return this.getItems().find((e=>"true"===e.querySelector("a")?.getAttribute("aria-selected")))}isItemExpanded(e){return!!e.querySelector(':scope > li > [aria-expanded="true"]')}getNextSibling(e){if("SWIRL-TREE-VIEW-ITEM"===e?.nextElementSibling?.tagName)return e.nextElementSibling;const t=e?.parentElement?.nextElementSibling?.querySelector("swirl-tree-view-item");return t??void 0}getPreviousSibling(e){if("SWIRL-TREE-VIEW-ITEM"===e?.previousElementSibling?.tagName)return e.previousElementSibling;const t=e?.parentElement?.previousElementSibling?.querySelector("swirl-tree-view-item");return t??void 0}updateLiveRegionText(e,t){let i=e?this.dragDropInstructions[e]:"";t?.canDrop||(i+=" "+this.dragDropInstructions.cannotBeDropped);for(const[e,s]of Object.entries(t??{}))i=i.replaceAll(`{${e}}`,s+"");i!==this.liveRegionText&&(this.liveRegionText=i)}render(){return r(n,{key:"5cfc3b36fe7ce8ddfda89b39a72aadc62239d4c3"},this.enableDragDrop&&r("swirl-visually-hidden",{key:"1ebe624d048e836971b37e34e4cea99be25f2d15"},r("span",{key:"4c6e51b98e51ec6fab26407298fc4287960d11b3","aria-live":"assertive"},this.liveRegionText)),r("ul",{key:"bd4285e2e0304766a3a7e250f9f57bfc8707292b","aria-label":this.label,class:"tree-view",onFocusin:this.onFocus,onFocusout:this.onBlur,role:"tree"===this.semantics?"tree":void 0,ref:e=>this.listElement=e,tabIndex:-1},r("slot",{key:"facf43a35b5c6844e642d88cbe69315efbb42731",onSlotchange:this.onSlotChange})))}get el(){return this}static get watchers(){return{enableDragDrop:[{handleEnableDragDropChange:0}]}}static get style(){return"swirl-tree-view{display:block}swirl-tree-view *{box-sizing:border-box}.tree-view{display:flex;margin:0;padding:0 0 var(--s-space-4);flex-direction:column;gap:var(--s-space-2)}.tree-view--dragging{cursor:grabbing}.tree-view--dragging .tree-view-item__link:hover,.tree-view--dragging .tree-view-item__link:active{background-color:var(--s-background-default) !important}"}},[260,"swirl-tree-view",{canDrop:[16],collapsedIcon:[1,"collapsed-icon"],dragDropInstructions:[16],dragDropItemSelector:[1,"drag-drop-item-selector"],enableDragDrop:[4,"enable-drag-drop"],expandedIcon:[1,"expanded-icon"],initiallyExpandedItemIds:[16],label:[1],semantics:[1],liveRegionText:[32],expandItems:[64]},[[0,"dropTreeViewItem","onItemDrop"],[0,"keydown","onKeyDown"],[0,"itemSelected","onItemSelected"],[0,"expandedChange","onExpandedChange"],[0,"endKeyboardMove","onEndKeyboardMove"],[0,"startKeyboardMove","onStartKeyboardMove"],[0,"keyboardMove","onKeyboardMove"]],{enableDragDrop:[{handleEnableDragDropChange:0}]}]),m=c,w=function(){"undefined"!=typeof customElements&&["swirl-tree-view","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-tree-view":customElements.get(o(e))||customElements.define(o(e),c);break;case"swirl-visually-hidden":customElements.get(o(e))||d()}}))};export{m as SwirlTreeView,w as defineCustomElement}

package/dist/components/swirl-video-thumbnail.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as e,h as t,Host as a,transformTag as n}from"@stencil/core/internal/client";import{d as o}from"./swirl-visually-hidden2.js";const s=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.durationLabel="Duration"}render(){return t(a,{key:"a1a76891aa14b43307a71d295fdf2bbddb5c3dfc"},t("button",{key:"665f50ea2bd428cb7d5c4120528ecd9ee9531027","aria-describedby":void 0!==this.duration?"duration":void 0,"aria-label":this.label,class:"video-thumbnail",type:"button"},t("img",{key:"b765b946190b1245ad0defcd83ad2eae06fd12b3",alt:"",class:"video-thumbnail__image",loading:"lazy",src:this.src}),this.duration&&t("span",{key:"db55ef4f4bd2a28b8700c27c655ab8d82333bf03",class:"video-thumbnail__duration",id:"duration"},t("swirl-visually-hidden",{key:"db7b928f7e0cdf7aa55d0b5103039b1d3d6381b7"},this.durationLabel),this.duration),t("svg",{key:"f42741d0979eac89f6124e96b448c26c982b6158",class:"video-thumbnail__play-icon",fill:"none",viewBox:"0 0 40 40",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"1918cda26000f56974f475326eb57e242f45855f",d:"M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z",fill:"white","fill-opacity":"0.95"}))))}static get style(){return':host{display:flex;width:100%}:host *{box-sizing:border-box}.video-thumbnail{position:relative;display:inline-flex;width:100%;margin:0;padding:0;border:none;background-color:transparent;cursor:pointer;container-type:inline-size;container-name:video-thumbnail}.video-thumbnail:after{position:absolute;background-color:rgba(0, 0, 0, 0.05);content:"";inset:0}.video-thumbnail:focus:not(:focus-visible){outline:none}.video-thumbnail:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.video-thumbnail__image{width:100%}.video-thumbnail__duration{position:absolute;bottom:var(--s-space-8);left:var(--s-space-8);padding:var(--s-space-2) var(--s-space-8);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),     rgba(255, 255, 255, 0.1);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}.video-thumbnail__play-icon{position:absolute;z-index:1;top:50%;left:50%;width:2.5rem;height:2.5rem;transform:translate3d(-50%, -50%, 0)}@container video-thumbnail (min-width: 448px){.video-thumbnail__play-icon{width:3.5rem;height:4.5rem}}'}},[1,"swirl-video-thumbnail",{durationLabel:[1,"duration-label"],duration:[1],label:[1],src:[1]}]),d=s,r=function(){"undefined"!=typeof customElements&&["swirl-video-thumbnail","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-video-thumbnail":customElements.get(n(i))||customElements.define(n(i),s);break;case"swirl-visually-hidden":customElements.get(n(i))||o()}}))};export{d as SwirlVideoThumbnail,r as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as i,h as t,Host as a,transformTag as n}from"@stencil/core/internal/client";import{d as o}from"./swirl-visually-hidden2.js";const s=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.durationLabel="Duration"}render(){return t(a,{key:"6c02073e887cbf548aa646eedc927b88d03fe176"},t("button",{key:"5047ca49f91983d46eb8fc85befe4d678a839f27","aria-describedby":void 0!==this.duration?"duration":void 0,"aria-label":this.label,class:"video-thumbnail",type:"button"},t("img",{key:"e768d83e1693b58a9423605bf4940a549b397fd6",alt:"",class:"video-thumbnail__image",loading:"lazy",src:this.src}),this.duration&&t("span",{key:"02b7cef25d2e7f246a7be6f2f7cdd25f1d162596",class:"video-thumbnail__duration",id:"duration"},t("swirl-visually-hidden",{key:"33402d85462c87af1dc80ed4d813ea1860c49375"},this.durationLabel),this.duration),t("svg",{key:"df28b5052f846ed5ef8383e227dd24a3c3e00343",class:"video-thumbnail__play-icon",fill:"none",viewBox:"0 0 40 40",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"f31c15025d8907f1a93708144d556dd0bdd5e14b",d:"M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z",fill:"white","fill-opacity":"0.95"}))))}static get style(){return':host{display:flex;width:100%}:host *{box-sizing:border-box}.video-thumbnail{position:relative;display:inline-flex;width:100%;margin:0;padding:0;border:none;background-color:transparent;cursor:pointer;container-type:inline-size;container-name:video-thumbnail}.video-thumbnail:after{position:absolute;background-color:rgba(0, 0, 0, 0.05);content:"";inset:0}.video-thumbnail:focus:not(:focus-visible){outline:none}.video-thumbnail:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.video-thumbnail__image{width:100%}.video-thumbnail__duration{position:absolute;bottom:var(--s-space-8);left:var(--s-space-8);padding:var(--s-space-2) var(--s-space-8);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),     rgba(255, 255, 255, 0.1);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}.video-thumbnail__play-icon{position:absolute;z-index:1;top:50%;left:50%;width:2.5rem;height:2.5rem;transform:translate3d(-50%, -50%, 0)}@container video-thumbnail (min-width: 448px){.video-thumbnail__play-icon{width:3.5rem;height:4.5rem}}'}},[1,"swirl-video-thumbnail",{durationLabel:[1,"duration-label"],duration:[1],label:[1],src:[1]}]),d=s,r=function(){"undefined"!=typeof customElements&&["swirl-video-thumbnail","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-video-thumbnail":customElements.get(n(e))||customElements.define(n(e),s);break;case"swirl-visually-hidden":customElements.get(n(e))||o()}}))};export{d as SwirlVideoThumbnail,r as defineCustomElement}

package/dist/components/swirl-visually-hidden2.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as i,h as s,Host as t,transformTag as n}from"@stencil/core/internal/client";const l=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost()}render(){return s(t,{key:"1aa0aafdb301c13bc0170570b577345108d5e1eb"},s("slot",{key:"958190a2e3194845c994b58024b25d8b5ed02f1e"}))}static get style(){return".sc-swirl-visually-hidden-h{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}"}},[262,"swirl-visually-hidden"]);function r(){"undefined"!=typeof customElements&&["swirl-visually-hidden"].forEach((e=>{"swirl-visually-hidden"===e&&(customElements.get(n(e))||customElements.define(n(e),l))}))}export{l as S,r as d}
+import{proxyCustomElement as e,HTMLElement as i,h as s,Host as t,transformTag as d}from"@stencil/core/internal/client";const n=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost()}render(){return s(t,{key:"11fc2e4fc5366a70d631cbdd6b50e876968611d5"},s("slot",{key:"fd6303cb46dcd96e2a88f79d31c4954226bd65a6"}))}static get style(){return".sc-swirl-visually-hidden-h{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}"}},[262,"swirl-visually-hidden"]);function l(){"undefined"!=typeof customElements&&["swirl-visually-hidden"].forEach((e=>{"swirl-visually-hidden"===e&&(customElements.get(d(e))||customElements.define(d(e),n))}))}export{n as S,l as d}