npm - @getflip/swirl-components - Versions diffs - 0.498.1 → 0.501.0 - Mend

@getflip/swirl-components 0.498.1 → 0.501.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2574) hide show

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

	@@ -1 +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(1e4Math.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:"~~bd3dd3bf3b7965997cb99afb8b886d0d022b4a24~~",role:"status"},i("swirl-stack",{key:"~~7699d04c7ff9b4d315f903bd69f0599bc8a55a39~~",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}
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(1e4Math.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:"6851e3f997a7ead3b8a217622234f9d09e356db8",role:"status"},i("swirl-stack",{key:"04454efcc163d9f5f45d43eaae68d82f0c424fdd",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 CHANGED Viewed

	@@ -1 +1 @@
1	- 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}from"./swirl-icon-close2.js";const l=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.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}`);return e(a,{key:"~~b262aeaffd17ea3bd343809cfb0d8e97b1b62396~~"},e("div",{key:"~~78272b495c2092ff7a4ee9e0eb5b4f13726aa9b7~~",class:t},this.icon&&e("span",{key:"~~967d5fceb7d7497429313c832da27986ed160d5d~~",class:"toast__icon",innerHTML:this.icon,part:"toast__icon",ref:t=>this.iconEl=t}),e("span",{key:"~~8b36bf2a453fb30a56b9eac3ca1b30e1add71d7e~~",class:"toast__content",innerHTML:this.content,part:"toast__content"},e("slot",{key:"~~781e18bb04e70bdfa4f7425db0fa3e93fbd8bffb~~"})),this.actionLabel&&e("swirl-button",{key:"~~59df81ec318efd3084317cc9af56e6c6d57cf21f~~",class:"toast__action-button",label:this.actionLabel,onClick:this.onAction,variant:"plain"}),e("button",{key:"~~f5677d18055dd6e51f78d45dde03e893cb93c466~~","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:"~~701b783b1c5a7ae56e79e5873c991d6ca74839c7~~",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__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{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)}@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"],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),l);break;case"swirl-button":customElements.get(o(t))\|\|c();break;case"swirl-icon-close":customElements.get(o(t))\|\|d()}}))}export{l as S,h as d}
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:"2ae9a317c62c35f96b69aa0b4945c74101e210b3"},a("div",{key:"21f1e47be66edf5eb91c2fa346a5e10311da9c83",class:t},this.icon&&a("span",{key:"1d01a3d3005ccf694c5f67a02c6e69ec0dcd6f75",class:"toast__icon",innerHTML:this.icon,part:"toast__icon",ref:t=>this.iconEl=t}),a("span",{key:"4cbdc5ee5adf56abe15f40de536310cbf94b2a33",class:"toast__content-container"},a("span",{key:"9ccd54d6874f64b40f832d004c8ebca06e2ae6e5",class:"toast__content",innerHTML:this.content,part:"toast__content"},a("slot",{key:"8c26ac36fe46baf6f6cabe0b02263bd9730bb1e4"})),this.actionLabel&&a("swirl-button",{key:"7fc42c302778f67bc9592b52a0955e9a1354fd8d",class:"toast__action-button",label:this.actionLabel,onClick:this.onAction,variant:"plain"})),a("button",{key:"bba7173b62602a8a110baa92003d8878d5c2c972","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:"88821f51f8ae050f6e69822baa1800e5f2bcb898",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 CHANGED Viewed

	@@ -1 +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:"~~7d3fb907494b79a9cd73b571b55ad3429931cc36~~",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:"~~f54d595dfea309031ba7d2e075d331e34cd83482~~",class:"button__icon",glyph:this.icon}),!this.hideLabel&&o("span",{key:"~~2f379a300f20fd6d12a5f18da67cccd77ad85d44~~",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:var(--s-surface-sunken-default);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}
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:"be452f8ebccc40c5b98c9737fb7c76be37d47d71",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:"59cb769717b75fa1bedc37c575ed2f231b181540",class:"button__icon",glyph:this.icon}),!this.hideLabel&&o("span",{key:"a5e3cb07a845a12a2b19f0be9eaa1c8b21fad480",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:var(--s-surface-sunken-default);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,c=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,c as defineCustomElement}

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

	@@ -1 +1 @@
1	- import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as o,transformTag as i}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{d as r}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:"~~67690dcc23d24c021eed8d5828fc0833807fb19a~~",class:t,"aria-label":this.swirlAriaLabel,spacing:"4",orientation:"horizontal",align:"center",role:"group"},o("slot",{key:"~~535c7e563913262583d0e86c194a45c198da1a4d~~",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)}"}},[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(i(t))\|\|customElements.define(i(t),a);break;case"swirl-stack":customElements.get(i(t))\|\|r()}}))};export{g as SwirlToggleGroup,c as defineCustomElement}
1	+ import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as o,transformTag as i}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{d as r}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:"8d041df037a1235032fea927ad0717e8e400144a",class:t,"aria-label":this.swirlAriaLabel,spacing:"4",orientation:"horizontal",align:"center",role:"group"},o("slot",{key:"355821ac9d0dd0505894aaf5d278ec1855c09341",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)}"}},[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(i(t))\|\|customElements.define(i(t),a);break;case"swirl-stack":customElements.get(i(t))\|\|r()}}))};export{g as SwirlToggleGroup,c as defineCustomElement}

package/dist/components/swirl-toolbar.js CHANGED Viewed

	@@ -1 +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 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:"~~34b3dcdf0beeb720ca846cf4f8999eff7d65f3d7~~"},e("swirl-stack",{key:"~~908d04e73127abb6a60565321696055aeb7b5036~~",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:"~~92193a84dee4a5d13a654e3364950bc16465826f~~"})))}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}
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 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:"b6ac2a4124dafe8fa0fac9395001366271c4d1d5"},e("swirl-stack",{key:"ae28c6d3a4b70f9da63d30d3cf1b3143b1173fef",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:"0d39fa3ecb5e4bd2acfefde88d4459d81a470f9c"})))}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-tree-navigation-item.js CHANGED Viewed

	@@ -1 +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:"~~9d410315d9ced800c379b7d05e08ecb3e51e3814~~",role:"none"},a("li",{key:"~~c0f8691af8bf97eef0716667588fe5ab65b2c0bb~~",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:"~~82f023dd4af3ceec7b9f890097320482ce97f3a3~~",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:"~~f3a2e20055bf7ced64f31ca036a3122db78fedc3~~",class:"tree-navigation-item__content"},this.hasCustomIcon&&a("span",{key:"~~b2951e1d5d72b55cae72dd648021651bcd15538d~~",class:"tree-navigation-item__icon","aria-hidden":"true",role:"img","aria-label":this.label+" icon"},a("slot",{key:"~~a13949bc1b64dbe719e5a8bf24278f875ac4f814~~",name:"custom-icon"})),!this.hasCustomIcon&&this.icon&&a("swirl-icon",{key:"~~3eb6fb9721525644d4c364dde958e8571a1a627f~~",class:"tree-navigation-item__icon",glyph:this.icon,size:20,"aria-hidden":"true",role:"img","aria-label":this.label+" icon"}),a("span",{key:"~~164b0449d9f2112a4d44a7b47a8a906d1599d982~~",class:"tree-navigation-item__label"},a("span",{key:"~~e64fb929e885747c7df166c35109465de8f5e981~~",class:"tree-navigation-item__label-text"},this.label),this.expandable&&this.hasChildren&&!this.external&&a("span",{key:"~~feb686e0c0da93524f7b8b67afceeff986940bd5~~",class:"tree-navigation-item__toggle-icon","aria-hidden":"true"},a("swirl-icon-chevron-right",{key:"~~0e5dcf23065a2b4d395cd247e8c67181771e9777~~",size:16,role:"img","aria-label":"Expand"})),this.external&&a("span",{key:"~~647dbc1098508387613ec0dbc7cdd5b279af67f3~~",class:"tree-navigation-item__external-icon","aria-hidden":"true"},a("swirl-icon-open-in-new",{key:"~~19b8f3c8a2c12448bb1bcf0b1720b0e8e24ddca5~~",size:16,role:"img","aria-label":"External link"}))),this.markAsNew&&a("swirl-tag",{key:"~~65a3fbcf1386227356bf6e278702be28d0b7c880~~",class:"tree-navigation-item__is-new-tag",intent:"info",label:this.markAsNewLabel,size:"m",variant:"default"}))),this.hasChildren&&a("ul",{key:"~~4099707c9f4c96c9e2e990f9512c3ff738e1e0c5~~",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:"~~36979963b718cbab4349e2d9f3be492641b18fd6~~"}))))}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}
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}from"./swirl-icon-open-in-new2.js";import{d as h}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:"15cbe5683daa53e7fdd930586616901e11d373b1",role:"none"},a("li",{key:"81909ebc312cef0650506dece925918f151e324b",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:"646f5c1b024f567e998d1d9a0c44c66d13602558",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:"50d2e92949bf8eac2acf001e6c34bb98a731d683",class:"tree-navigation-item__content"},this.hasCustomIcon&&a("span",{key:"1b4926b15eb1255a134ead1da3d3f0a63f0fb49b",class:"tree-navigation-item__icon","aria-hidden":"true",role:"img","aria-label":this.label+" icon"},a("slot",{key:"3ddde65ec0a56e5efd4da7c50e4842dcd981ebf5",name:"custom-icon"})),!this.hasCustomIcon&&this.icon&&a("swirl-icon",{key:"44f249abd5f87cc2d68beaa569dd958cf9f1bc5c",class:"tree-navigation-item__icon",glyph:this.icon,size:20,"aria-hidden":"true",role:"img","aria-label":this.label+" icon"}),a("span",{key:"b8f73dd9e0833b0e80402be5bed0592ba0b07501",class:"tree-navigation-item__label"},a("span",{key:"e6a2359673d807a723836d302e425c3cf0b7a023",class:"tree-navigation-item__label-text"},this.label),this.expandable&&this.hasChildren&&!this.external&&a("span",{key:"d1e0c32adf741a596d54b4670e681416a13bcb46",class:"tree-navigation-item__toggle-icon","aria-hidden":"true"},a("swirl-icon-chevron-right",{key:"784805dea22d02d0ab9dfc8a47f026c7d1808c88",size:16,role:"img","aria-label":"Expand"})),this.external&&a("span",{key:"0bcae849ea7cda2e43dfa34f12d0cd7c929e0f8f",class:"tree-navigation-item__external-icon","aria-hidden":"true"},a("swirl-icon-open-in-new",{key:"1e5ad5e807e7fd604b401c12c75004f920192926",size:16,role:"img","aria-label":"External link"}))),this.markAsNew&&a("swirl-tag",{key:"dd6d7677e51565fe133b053921241b909fe92f18",class:"tree-navigation-item__is-new-tag",intent:"info",label:this.markAsNewLabel,size:"m",variant:"default"}))),this.hasChildren&&a("ul",{key:"e0ee7fa24794a6afbce91a7414233fb4d5479944",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:"e631efeab7fdd0010d02efe8323121573b755a62"}))))}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))\|\|d();break;case"swirl-tag":customElements.get(s(e))\|\|h();break;case"swirl-visually-hidden":customElements.get(s(e))\|\|m()}}))};export{v as SwirlTreeNavigationItem,b as defineCustomElement}

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

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as t,h as n,Host as i,transformTag as r}from"@stencil/core/internal/client";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return n(i,{key:"~~d010ffa6eb9b05c6944b73824de36f53c1254bf0~~"},n("ul",{key:"~~bd64eccced945ffbc205013f2e5cc5933eadd11e~~","aria-label":this.label,class:"tree-navigation",role:"tree"},n("slot",{key:"~~35b88eeefc2b1ffc99e65764abbeaec76805ea7f~~"})))}static get style(){return":host{display:block}:host *{box-sizing:border-box}.tree-navigation{margin:0;padding:0}"}},[257,"swirl-tree-navigation",{label:[1]}]),a=s,c=function(){"undefined"!=typeof customElements&&["swirl-tree-navigation"].forEach((e=>{"swirl-tree-navigation"===e&&(customElements.get(r(e))\|\|customElements.define(r(e),s))}))};export{a as SwirlTreeNavigation,c as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as t,h as n,Host as i,transformTag as r}from"@stencil/core/internal/client";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return n(i,{key:"20456499fb0a0beb4400496eec0bff3582edd360"},n("ul",{key:"5f125a9a7d65c8974b74a8f05782644bdb21b5b6","aria-label":this.label,class:"tree-navigation",role:"tree"},n("slot",{key:"2b15d95564c65f78f191536cdcb0f88b778bf644"})))}static get style(){return":host{display:block}:host *{box-sizing:border-box}.tree-navigation{margin:0;padding:0}"}},[257,"swirl-tree-navigation",{label:[1]}]),a=s,o=function(){"undefined"!=typeof customElements&&["swirl-tree-navigation"].forEach((e=>{"swirl-tree-navigation"===e&&(customElements.get(r(e))\|\|customElements.define(r(e),s))}))};export{a as SwirlTreeNavigation,o as defineCustomElement}

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

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as i,createEvent as t,forceUpdate as r,h as s,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";import{d as m}from"./swirl-icon-chevron-right2.js";import{d as v}from"./swirl-icon-drag-handle2.js";import{d as w}from"./swirl-icon-expand-more2.js";const p=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}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:r,oldIndex:s,item:o}=e,a=i.closest("swirl-tree-view-item")?.itemId,n=t.closest("swirl-tree-view-item")?.itemId;this.dropTreeViewItem.emit({newIndex:r,oldIndex:s,item:o,itemId:o.id??o.querySelector(":scope > swirl-tree-view-item").id,newNextSiblingItemId:r<t.children.length-1?t.children[r+1].id:void 0,newPrevSiblingItemId:r>0?t.children[r-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:r}=this.getItemContext();if(i)return{canDrop:e,parentLabel:i.label,childrenCount:r,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(),s=this.getParentTreeViewItem();if("down"===e){const e=i.nextElementSibling;if(e){e.querySelector(".tree-view-item__children").prepend(i),s&&r(s);const t="SWIRL-TREE-VIEW-ITEM"===e.tagName?e:e.querySelector("swirl-tree-view-item");r(t),t.expand()}else t&&(t.parentElement.insertBefore(i,t.nextElementSibling),s&&r(s))}else if("up"===e){const e=i.previousElementSibling;if(e){e.querySelector(".tree-view-item__children").appendChild(i),s&&r(s);const t="SWIRL-TREE-VIEW-ITEM"===e.tagName?e:e.querySelector("swirl-tree-view-item");r(t),t.expand()}else t&&(t.parentElement.insertBefore(i,t),s&&r(s))}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),r=this.enableDragDrop&&!e,n=this.getSemantics(),h=this.expanded\|\|"tree"!==n,l="tree"===n?this.selected?0:-1:void 0,c="tree"===n?"li":"div",m=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 s(o,{key:"fef970c07fc3123503e035112fe7e52115ff057c",id:this.itemId,role:"tree"===n?"none":"listitem"},s(c,{key:"33bc6518dcca289192ca2607a99f0efa10bba901",class:m,role:"tree"===n?"none":void 0},s("a",{key:"55d51b7cc91bf9adb51c5e7f36365ec08012a763","aria-current":this.active?"page":void 0,"aria-expanded":e&&"tree"===n?h+"":void 0,"aria-level":"tree"===n?this.level+1:void 0,"aria-owns":e&&"tree"===n?this.itemId+"-children":void 0,"aria-selected":"tree"===n?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"===n?"treeitem":void 0,tabIndex:l},!this.disableDrag&&this.enableDragDrop&&s("span",{key:"6fe53ca04d992b2cef7d5d2cedb5eb119fdea162",class:"tree-view-item__drag-handle"},s("swirl-icon-drag-handle",{key:"001696960c2893a8fc881f5c961b18d75af2a23f",size:20})),this.expandable&&"tree"===n&&s("span",{key:"1d458f9abae531dc0f48ca8ba57fcd62d0020eb2",class:"tree-view-item__toggle-icon"},e&&s(a,{key:"c891f69fc682d14f1502ddec8dc6688453449711"},h?s("swirl-icon-expand-more",{onClick:this.onClickCollapse,size:24}):s("swirl-icon-chevron-right",{onClick:this.onClickExpand,size:24}))),!!this.icon&&s(a,{key:"cde788efaed79b489c1765e14bc08a6e73344efa"},s("span",{key:"3f8f49d065901483b521f5646df4ef3dba8a1143",class:"tree-view-item__icon"},t?this.icon:s("swirl-icon",{glyph:this.icon,size:24,color:this.iconColor}))),s("span",{key:"e4f9af62617994508af401bc6867cb98151c3b75",class:"tree-view-item__label"},this.label),s("span",{key:"86c3694ec3bfd6a78df23c91abed72900d15f135",class:"tree-view-item__tags"},s("slot",{key:"25a3c909290b92c30f3694bd46670ab3cea7ab4c",name:"tags"}))),s("ul",{key:"ec63119eebc2c54568e0557bb93ecd1337f7b565","aria-label":this.label,class:"tree-view-item__children "+(r?"tree-view-item__children--drop-zone":""),id:this.itemId+"-children",ref:e=>this.childList=e,role:"tree"===n?"group":void 0,style:{display:h&&e\|\|r?void 0:"none"}},s("slot",{key:"07d406b0fb59133df2d64b2e8228309a974c3072"}))))}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{list-style:none}.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--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.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--ghost .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.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{display:flex;margin:0;padding:0 0 0 var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column;gap:var(--s-space-2)}.tree-view-item__children--drop-zone{min-height:0.5rem;margin-top:-0.5rem}.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:hover .tree-view-item__drag-handle{opacity:1}.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__drag-handle{display:inline-flex;flex-shrink:0;cursor:grab;opacity:0}.tree-view-item__drag-handle:active{cursor:grabbing}.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:1.5rem;height:1.5rem;flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__toggle-icon{width:1.25rem;height:1.25rem}}.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],disableDrag:[4,"disable-drag"],expandable:[4],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],expand:[64],collapse:[64],select:[64],unselect:[64]}]),g=p,f=function(){"undefined"!=typeof customElements&&["swirl-tree-view-item","swirl-icon","swirl-icon-chevron-right","swirl-icon-drag-handle","swirl-icon-expand-more"].forEach((e=>{switch(e){case"swirl-tree-view-item":customElements.get(n(e))\|\|customElements.define(n(e),p);break;case"swirl-icon":customElements.get(n(e))\|\|c();break;case"swirl-icon-chevron-right":customElements.get(n(e))\|\|m();break;case"swirl-icon-drag-handle":customElements.get(n(e))\|\|v();break;case"swirl-icon-expand-more":customElements.get(n(e))\|\|w()}}))};export{g as SwirlTreeViewItem,f as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as i,createEvent as t,forceUpdate as r,h as s,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";import{d as m}from"./swirl-icon-chevron-right2.js";import{d as v}from"./swirl-icon-drag-handle2.js";import{d as w}from"./swirl-icon-expand-more2.js";const p=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}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:r,oldIndex:s,item:o}=e,n=i.closest("swirl-tree-view-item")?.itemId,a=t.closest("swirl-tree-view-item")?.itemId;this.dropTreeViewItem.emit({newIndex:r,oldIndex:s,item:o,itemId:o.id??o.querySelector(":scope > swirl-tree-view-item").id,newNextSiblingItemId:r<t.children.length-1?t.children[r+1].id:void 0,newPrevSiblingItemId:r>0?t.children[r-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:r}=this.getItemContext();if(i)return{canDrop:e,parentLabel:i.label,childrenCount:r,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(),s=this.getParentTreeViewItem();if("down"===e){const e=i.nextElementSibling;if(e){e.querySelector(".tree-view-item__children").prepend(i),s&&r(s);const t="SWIRL-TREE-VIEW-ITEM"===e.tagName?e:e.querySelector("swirl-tree-view-item");r(t),t.expand()}else t&&(t.parentElement.insertBefore(i,t.nextElementSibling),s&&r(s))}else if("up"===e){const e=i.previousElementSibling;if(e){e.querySelector(".tree-view-item__children").appendChild(i),s&&r(s);const t="SWIRL-TREE-VIEW-ITEM"===e.tagName?e:e.querySelector("swirl-tree-view-item");r(t),t.expand()}else t&&(t.parentElement.insertBefore(i,t),s&&r(s))}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),r=this.enableDragDrop&&!e,a=this.getSemantics(),h=this.expanded\|\|"tree"!==a,l="tree"===a?this.selected?0:-1:void 0,c="tree"===a?"li":"div",m=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 s(o,{key:"73d1f4a9397356ae42ac6e7eff3a232bc8044b81",id:this.itemId,role:"tree"===a?"none":"listitem"},s(c,{key:"43a7b8a02f7e275527b653de1b3f3641947fa9c6",class:m,role:"tree"===a?"none":void 0},s("a",{key:"d39b5cee6d1e5f0d7dea38ee822762b4a81b91e2","aria-current":this.active?"page":void 0,"aria-expanded":e&&"tree"===a?h+"":void 0,"aria-level":"tree"===a?this.level+1:void 0,"aria-owns":e&&"tree"===a?this.itemId+"-children":void 0,"aria-selected":"tree"===a?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"===a?"treeitem":void 0,tabIndex:l},!this.disableDrag&&this.enableDragDrop&&s("span",{key:"a218ad345f47dedf2fcd839926eb401b9348e8fd",class:"tree-view-item__drag-handle"},s("swirl-icon-drag-handle",{key:"48b7647a53a8717336ef3918de98c266bc94a12c",size:20})),this.expandable&&"tree"===a&&s("span",{key:"e6d9298d67b80046e65b68dbfb74f82e35a7d522",class:"tree-view-item__toggle-icon"},e&&s(n,{key:"7ed530e7233b18e670e53836afc53ebf7bc4c7d7"},h?s("swirl-icon-expand-more",{onClick:this.onClickCollapse,size:24}):s("swirl-icon-chevron-right",{onClick:this.onClickExpand,size:24}))),!!this.icon&&s(n,{key:"8f64d41f0514402a26f14e8892887b3d6b693c94"},s("span",{key:"f6c8c8024ae589a47912a727e7ad4c4539f6d2fc",class:"tree-view-item__icon"},t?this.icon:s("swirl-icon",{glyph:this.icon,size:24,color:this.iconColor}))),s("span",{key:"385aa803866c02e6b9a5791747d639984c6315d1",class:"tree-view-item__label"},this.label),s("span",{key:"688e67dd3cfc6d5854d91846781c36bc5853b79f",class:"tree-view-item__tags"},s("slot",{key:"f3fe801f732e0430a8e6f4f519688bb7025fc673",name:"tags"}))),s("ul",{key:"8d3e1b1db911768b5a985e46e3d09d6701a8e53f","aria-label":this.label,class:"tree-view-item__children "+(r?"tree-view-item__children--drop-zone":""),id:this.itemId+"-children",ref:e=>this.childList=e,role:"tree"===a?"group":void 0,style:{display:h&&e\|\|r?void 0:"none"}},s("slot",{key:"b063cb022bd4895bf96944bc6755b7d006c99fec"}))))}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{list-style:none}.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--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.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--ghost .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.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{display:flex;margin:0;padding:0 0 0 var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column;gap:var(--s-space-2)}.tree-view-item__children--drop-zone{min-height:0.5rem;margin-top:-0.5rem}.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:hover .tree-view-item__drag-handle{opacity:1}.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__drag-handle{display:inline-flex;flex-shrink:0;cursor:grab;opacity:0}.tree-view-item__drag-handle:active{cursor:grabbing}.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:1.5rem;height:1.5rem;flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__toggle-icon{width:1.25rem;height:1.25rem}}.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],disableDrag:[4,"disable-drag"],expandable:[4],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],expand:[64],collapse:[64],select:[64],unselect:[64]}]),g=p,b=function(){"undefined"!=typeof customElements&&["swirl-tree-view-item","swirl-icon","swirl-icon-chevron-right","swirl-icon-drag-handle","swirl-icon-expand-more"].forEach((e=>{switch(e){case"swirl-tree-view-item":customElements.get(a(e))\|\|customElements.define(a(e),p);break;case"swirl-icon":customElements.get(a(e))\|\|c();break;case"swirl-icon-chevron-right":customElements.get(a(e))\|\|m();break;case"swirl-icon-drag-handle":customElements.get(a(e))\|\|v();break;case"swirl-icon-expand-more":customElements.get(a(e))\|\|w()}}))};export{g as SwirlTreeViewItem,b as defineCustomElement}

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

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as t,createEvent as i,forceUpdate as r,h as s,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&&(r(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&&(r(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:s,item:n}=e,o=t.closest("swirl-tree-view-item");o&&(r(o),o.expand()),this.dropItem.emit({newIndex:i,oldIndex:s,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 r=e.parentElement.closest("swirl-tree-view-item"),s=this.getNextSibling(r);for(;r&&!s;)r=r?.parentElement.closest("swirl-tree-view-item, swirl-tree-view"),s=this.getNextSibling(r);const n=e.querySelector("swirl-tree-view-item"),o=t?n:i\|\|s;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"),r=!!t?.querySelector(':scope > li > [aria-expanded="true"]');for(;r;)t=t?.querySelector(":scope > li > ul > swirl-tree-view-item:last-child, :scope > li > ul > :last-child > swirl-tree-view-item"),r=!!t?.querySelector('[aria-expanded="true"]');return e.forEach((e=>e.unselect())),void t.select?.(!0)}const r=t.parentElement.closest("swirl-tree-view-item"),s=i\|\|r;s&&(e.forEach((e=>e.unselect())),s.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,r]of Object.entries(t??{}))i=i.replaceAll(`{${e}}`,r+"");i!==this.liveRegionText&&(this.liveRegionText=i)}render(){return s(n,{key:"~~30e6e9f186e102f9f0e963ceadbc4023eb27b559~~"},this.enableDragDrop&&s("swirl-visually-hidden",{key:"~~a357db78cefc2dbb7ef751c88fa8700518e23936~~"},s("span",{key:"~~de4c7c511dee37fd462abd40ad9637387bf4a6c0~~","aria-live":"assertive"},this.liveRegionText)),s("ul",{key:"~~efa77a78b995e2e897ade19b111c4a03eed2f7ee~~","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},s("slot",{key:"~~66201ff8c5dfb3c18f061cc98740f824761371ee~~",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}.tree-view--dragging .tree-view-item__link:hover .tree-view-item__drag-handle,.tree-view--dragging .tree-view-item__link:active .tree-view-item__drag-handle{opacity:0}"}},[260,"swirl-tree-view",{canDrop:[16],dragDropInstructions:[16],dragDropItemSelector:[1,"drag-drop-item-selector"],enableDragDrop:[4,"enable-drag-drop"],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}]}]),w=c,m=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{w as SwirlTreeView,m as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as t,createEvent as i,forceUpdate as r,h as s,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&&(r(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&&(r(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:s,item:n}=e,o=t.closest("swirl-tree-view-item");o&&(r(o),o.expand()),this.dropItem.emit({newIndex:i,oldIndex:s,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 r=e.parentElement.closest("swirl-tree-view-item"),s=this.getNextSibling(r);for(;r&&!s;)r=r?.parentElement.closest("swirl-tree-view-item, swirl-tree-view"),s=this.getNextSibling(r);const n=e.querySelector("swirl-tree-view-item"),o=t?n:i\|\|s;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"),r=!!t?.querySelector(':scope > li > [aria-expanded="true"]');for(;r;)t=t?.querySelector(":scope > li > ul > swirl-tree-view-item:last-child, :scope > li > ul > :last-child > swirl-tree-view-item"),r=!!t?.querySelector('[aria-expanded="true"]');return e.forEach((e=>e.unselect())),void t.select?.(!0)}const r=t.parentElement.closest("swirl-tree-view-item"),s=i\|\|r;s&&(e.forEach((e=>e.unselect())),s.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,r]of Object.entries(t??{}))i=i.replaceAll(`{${e}}`,r+"");i!==this.liveRegionText&&(this.liveRegionText=i)}render(){return s(n,{key:"c4924320ec1fe292cdbc9df3ca6d14525878c32a"},this.enableDragDrop&&s("swirl-visually-hidden",{key:"637b328cb91975d4507c1f56b8c9ad233cdd07f9"},s("span",{key:"20796768c4c49f56bd24c589351c4b269d9d4030","aria-live":"assertive"},this.liveRegionText)),s("ul",{key:"204bcb7f17078f4c61ccbc1cad65ee4985a7de71","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},s("slot",{key:"834075856c950ca6a493928a4cbba632b9d4dac0",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}.tree-view--dragging .tree-view-item__link:hover .tree-view-item__drag-handle,.tree-view--dragging .tree-view-item__link:active .tree-view-item__drag-handle{opacity:0}"}},[260,"swirl-tree-view",{canDrop:[16],dragDropInstructions:[16],dragDropItemSelector:[1,"drag-drop-item-selector"],enableDragDrop:[4,"enable-drag-drop"],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}]}]),w=c,m=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{w as SwirlTreeView,m as defineCustomElement}

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

	@@ -1 +1 @@
1	- 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:"~~3022d58149ece77aa8b4ea2e64c971429fec80ba~~"},t("button",{key:"~~8f8c1cdeccf74471c7d5bfaa2eb40f7e26da68db~~","aria-describedby":void 0!==this.duration?"duration":void 0,"aria-label":this.label,class:"video-thumbnail",type:"button"},t("img",{key:"~~fef51a137116e2f7cb28443ce9039579d94696b4~~",alt:"",class:"video-thumbnail__image",loading:"lazy",src:this.src}),this.duration&&t("span",{key:"~~f170fe4841f2038b8489b220d7bc24891bce8eda~~",class:"video-thumbnail__duration",id:"duration"},t("swirl-visually-hidden",{key:"~~cce95ca0d643e74ec1b6b586a18544243ebde8b9~~"},this.durationLabel),this.duration),t("svg",{key:"~~3738ed4000e2bc29f51f049d4e4308c07d086ebb~~",class:"video-thumbnail__play-icon",fill:"none",viewBox:"0 0 40 40",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"~~02154d538ed641db69c3807af34a2b12aa67ae52~~",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]}]),r=s,l=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{r as SwirlVideoThumbnail,l as defineCustomElement}
1	+ 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:"c94384ed792baebc0fb1189f8efb750067f24880"},t("button",{key:"e542039c8ec57832f8a52ff5a29d7912743c0246","aria-describedby":void 0!==this.duration?"duration":void 0,"aria-label":this.label,class:"video-thumbnail",type:"button"},t("img",{key:"7f0ecbd0e4664ea5a8946893e9daf7b1bbf5cae0",alt:"",class:"video-thumbnail__image",loading:"lazy",src:this.src}),this.duration&&t("span",{key:"cb7cfc478b50b9ed72137e88e98c6a24391a78a3",class:"video-thumbnail__duration",id:"duration"},t("swirl-visually-hidden",{key:"d3e40fdbdcae626c63705b18ca94d83783414f43"},this.durationLabel),this.duration),t("svg",{key:"1053df0e559d973e45dfe96408503d09fb977ec0",class:"video-thumbnail__play-icon",fill:"none",viewBox:"0 0 40 40",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"af47e8b7762ca7dda99f63cb1be1398fdec5ee38",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]}]),r=s,l=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{r as SwirlVideoThumbnail,l as defineCustomElement}

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

	@@ -1 +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:"~~1e62cf11ebbb1134c7176a28e6cf91346e382902~~"},s("slot",{key:"~~1dd238b1e1c8c133fdfe48af7327407fbab42b00~~"}))}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}
1	+ import{proxyCustomElement as e,HTMLElement as i,h as s,Host as d,transformTag as t}from"@stencil/core/internal/client";const n=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost()}render(){return s(d,{key:"94134fa049f9d6d3d699a2253aa51ca65e7c2763"},s("slot",{key:"f9bee71bd8e08da65a3dbbad91eda8c6254dd3ac"}))}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 a(){"undefined"!=typeof customElements&&["swirl-visually-hidden"].forEach((e=>{"swirl-visually-hidden"===e&&(customElements.get(t(e))\|\|customElements.define(t(e),n))}))}export{n as S,a as d}

package/dist/esm/index-q0zd6CX1.js CHANGED Viewed

@@ -274,6 +274,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './swirl-icon-ai-filled.entry.js').then(processMod, consoleError);
+                case 'swirl-icon-api':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './swirl-icon-api.entry.js').then(processMod, consoleError);
                 case 'swirl-icon-apparel':
                     return import(
                       /* webpackMode: "lazy" */
@@ -1562,6 +1566,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './swirl-symbol-push-pin.entry.js').then(processMod, consoleError);
+                case 'swirl-symbol-qr-code-scanner':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './swirl-symbol-qr-code-scanner.entry.js').then(processMod, consoleError);
                 case 'swirl-symbol-recycling':
                     return import(
                       /* webpackMode: "lazy" */