npm - @getflip/swirl-components - Versions diffs - 0.531.3 → 0.532.0 - Mend

@getflip/swirl-components 0.531.3 → 0.532.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 (3096) 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:"~~beae26cc9bad4bf02620821d99e96e30699c2374~~",role:"status"},i("swirl-stack",{key:"~~9a97642ff7a29441893a66e0dcbbd0e84c27d738~~",class:"toast-provider__stack",part:"toast-provider__stack",popover:"manual",spacing:"12",align:"center",ref:t=>this.popoverEl=t},this.toasts.map((t=>{const s={...t,content:void 0,onDismiss:void 0,onAction:void 0};return i("swirl-toast",{key:t.toastId,...s,onDismiss:this.onDismiss,onAction:this.onAction},t.content)}))))}get el(){return this}static get watchers(){return{toasts:[{onToastsChange:0}]}}static get style(){return".toast-provider__stack{position:fixed;inset:unset;bottom:var(--s-space-16);left:0;right:0;pointer-events:none;margin:0 var(--s-space-24);border:none;padding:0;background:none;width:auto;overflow:unset}.toast-provider__stack::backdrop{display:none}.toast-provider__stack>{width:auto;pointer-events:auto}"}},[1,"swirl-toast-provider",{globalDuration:[2,"global-duration"],toasts:[32],clearAll:[64],dismiss:[64],toast:[64]},[[4,"toggleDialog","handleDialogToggle"]],{toasts:[{onToastsChange:0}]}]),h=l,d=function(){"undefined"!=typeof customElements&&["swirl-toast-provider","swirl-button","swirl-icon-close","swirl-stack","swirl-toast"].forEach((t=>{switch(t){case"swirl-toast-provider":customElements.get(e(t))\|\|customElements.define(e(t),l);break;case"swirl-button":customElements.get(e(t))\|\|a();break;case"swirl-icon-close":customElements.get(e(t))\|\|n();break;case"swirl-stack":customElements.get(e(t))\|\|r();break;case"swirl-toast":customElements.get(e(t))\|\|c()}}))};export{h as SwirlToastProvider,d as defineCustomElement}
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:"bc98ab4f87b46b5236f541ca63615f6843752fea",role:"status"},i("swirl-stack",{key:"c9cb7b203a41986f077d5bdb066d81e2a8b2b356",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 as l}from"./swirl-icon-close2.js";const h=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.loaded=!1,this.mediaQueryUnsubscribe=()=>{},this.onAction=()=>{this.action.emit(this.toastId)},this.onDismiss=()=>{this.clearTimer(),this.dismiss.emit(this.toastId)}}watchDuration(){this.startTimer()}connectedCallback(){this.loaded&&(this.scheduleDismiss(),this.subscribeToMediaQuery())}componentDidLoad(){this.loaded=!0,this.startTimer(),this.subscribeToMediaQuery()}disconnectedCallback(){this.cancelScheduledDismiss(),this.mediaQueryUnsubscribe()}subscribeToMediaQuery(){this.mediaQueryUnsubscribe(),this.mediaQueryUnsubscribe=r.subscribe((t=>{this.forceIconProps(t)}))}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.dismissAt=Date.now()+this.duration,this.scheduleDismiss())}scheduleDismiss(){void 0!==this.dismissAt&&(this.cancelScheduledDismiss(),this.timeout=setTimeout((()=>{this.clearTimer(),this.dismiss.emit(this.toastId)}),Math.max(0,this.dismissAt-Date.now())))}cancelScheduledDismiss(){Boolean(this.timeout)&&(clearTimeout(this.timeout),this.timeout=void 0)}clearTimer(){this.cancelScheduledDismiss(),this.dismissAt=void 0}render(){const t=n("toast",`toast--intent-${this.intent}`,`toast--action-position-${this.actionPosition}`);return e(a,{key:"~~236d1921fc495438af83821a3e84d460ac5838d7~~"},e("div",{key:"~~5baabef2daf9411797548efc84b48ce124e3be71~~",class:t},this.icon&&e("span",{key:"~~91293a10a4ca9c1b4cd44d20ff59a15864569d00~~",class:"toast__icon",innerHTML:this.icon,part:"toast__icon",ref:t=>this.iconEl=t}),e("span",{key:"~~b1f55e219c324f31ac5adfef6fd01c0752a883a9~~",class:"toast__content-container"},e("span",{key:"~~007ad76a5e78dc93ae72ae5ef20673bb3e00a1af~~",class:"toast__content",innerHTML:this.content,part:"toast__content"},e("slot",{key:"~~25bc9837c8d25fccf874b1d1664a56921588024d~~"})),this.actionLabel&&e("swirl-button",{key:"~~7ea51c33fdeba411204364f4d00f9f18e9de3fed~~",class:"toast__action-button",label:this.actionLabel,onClick:this.onAction,variant:"plain"})),e("button",{key:"~~7c05d917a8778519b92acbbf44d1a64e2f251d85~~","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:"~~6e70406ba4e7decb6739d0ccf77023cc23710e2e~~",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 d(){"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),h);break;case"swirl-button":customElements.get(o(t))\|\|c();break;case"swirl-icon-close":customElements.get(o(t))\|\|l()}}))}export{h as S,d}
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 as l}from"./swirl-icon-close2.js";const h=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.loaded=!1,this.mediaQueryUnsubscribe=()=>{},this.onAction=()=>{this.action.emit(this.toastId)},this.onDismiss=()=>{this.clearTimer(),this.dismiss.emit(this.toastId)}}watchDuration(){this.startTimer()}connectedCallback(){this.loaded&&(this.scheduleDismiss(),this.subscribeToMediaQuery())}componentDidLoad(){this.loaded=!0,this.startTimer(),this.subscribeToMediaQuery()}disconnectedCallback(){this.cancelScheduledDismiss(),this.mediaQueryUnsubscribe()}subscribeToMediaQuery(){this.mediaQueryUnsubscribe(),this.mediaQueryUnsubscribe=r.subscribe((t=>{this.forceIconProps(t)}))}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.dismissAt=Date.now()+this.duration,this.scheduleDismiss())}scheduleDismiss(){void 0!==this.dismissAt&&(this.cancelScheduledDismiss(),this.timeout=setTimeout((()=>{this.clearTimer(),this.dismiss.emit(this.toastId)}),Math.max(0,this.dismissAt-Date.now())))}cancelScheduledDismiss(){Boolean(this.timeout)&&(clearTimeout(this.timeout),this.timeout=void 0)}clearTimer(){this.cancelScheduledDismiss(),this.dismissAt=void 0}render(){const t=n("toast",`toast--intent-${this.intent}`,`toast--action-position-${this.actionPosition}`);return e(a,{key:"179afbd7f4bd702cb7f7a97e419ebcdc6102d2c5"},e("div",{key:"963a77745624cdb73652f406eb27c3202806f19b",class:t},this.icon&&e("span",{key:"93cda55ac7e2f1567db9dd903402ad850bb9bf50",class:"toast__icon",innerHTML:this.icon,part:"toast__icon",ref:t=>this.iconEl=t}),e("span",{key:"7cbd5ae7c3b85541e32566d841cce334ede44878",class:"toast__content-container"},e("span",{key:"62f2bef560f5f9646bc3ed07441cebd495533b84",class:"toast__content",innerHTML:this.content,part:"toast__content"},e("slot",{key:"33b708be4836c8b73e780445118be71f5aff5665"})),this.actionLabel&&e("swirl-button",{key:"e2322e63dc48ff00f816bd2129db2c8498e41e99",class:"toast__action-button",label:this.actionLabel,onClick:this.onAction,variant:"plain"})),e("button",{key:"460005515f28a58f3a7fb33341905883832fb6f4","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:"42f0aaac4869d5cdbab1d22fd5f2128112e2923a",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 d(){"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),h);break;case"swirl-button":customElements.get(o(t))\|\|c();break;case"swirl-icon-close":customElements.get(o(t))\|\|l()}}))}export{h as S,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:"~~f2261bf91b1687233089155614035cfd8972a285~~",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:"~~6e01840e038daebd2dce86558e9bec7b52616720~~",class:"button__icon",glyph:this.icon}),!this.hideLabel&&o("span",{key:"~~a041507571edc1880db45e0d95419ef6160ecd53~~",class:"button__label"},this.label))}static get style(){return":host{display:inline-block}:host *{box-sizing:border-box}.button{display:inline-flex;gap:var(--s-space-8);width:100%;padding:0.375rem var(--s-space-8);justify-content:center;align-items:center;border:none;border-radius:0.375rem;color:var(--s-text-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer}.button:hover{background-color:var(--s-state-hovered)}.button:active{background-color:var(--s-state-pressed)}.button:focus:not(:focus-visible){outline:none}.button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button.button--pressed{background-color:var(--s-surface-default);color:var(--s-text-highlight);box-shadow:var(--s-shadow-level-1)}.button.button--pressed .button__icon{color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button__label{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}.button__icon{width:1.5rem;height:1.5rem;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon{width:1.25rem;height:1.25rem}}"}},[1,"swirl-toggle-button",{identifier:[1],label:[1],icon:[1],isPressed:[1028,"is-pressed"],hideLabel:[4,"hide-label"]}]),a=r,l=function(){"undefined"!=typeof customElements&&["swirl-toggle-button","swirl-icon"].forEach((t=>{switch(t){case"swirl-toggle-button":customElements.get(s(t))\|\|customElements.define(s(t),r);break;case"swirl-icon":customElements.get(s(t))\|\|n()}}))};export{a as SwirlToggleButton,l as defineCustomElement}
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:"4078b1db1815d35841fac16151395075207ea369",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:"b98711df22e271d031d1a6006fa846b85a5b85b3",class:"button__icon",glyph:this.icon}),!this.hideLabel&&o("span",{key:"41820a86a1211dcf2b9ce8d7f10caa07a576bbd7",class:"button__label"},this.label))}static get style(){return":host{display:inline-block}:host *{box-sizing:border-box}.button{display:inline-flex;gap:var(--s-space-8);width:100%;padding:0.375rem var(--s-space-8);justify-content:center;align-items:center;border:none;border-radius:0.375rem;color:var(--s-text-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer}.button:hover{background-color:var(--s-state-hovered)}.button:active{background-color:var(--s-state-pressed)}.button:focus:not(:focus-visible){outline:none}.button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button.button--pressed{background-color:var(--s-surface-default);color:var(--s-text-highlight);box-shadow:var(--s-shadow-level-1)}.button.button--pressed .button__icon{color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button__label{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}.button__icon{width:1.5rem;height:1.5rem;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon{width:1.25rem;height:1.25rem}}"}},[1,"swirl-toggle-button",{identifier:[1],label:[1],icon:[1],isPressed:[1028,"is-pressed"],hideLabel:[4,"hide-label"]}]),a=r,l=function(){"undefined"!=typeof customElements&&["swirl-toggle-button","swirl-icon"].forEach((t=>{switch(t){case"swirl-toggle-button":customElements.get(s(t))\|\|customElements.define(s(t),r);break;case"swirl-icon":customElements.get(s(t))\|\|n()}}))};export{a as SwirlToggleButton,l as defineCustomElement}

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

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

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

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

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:"~~d8c343262c5693f15980eebc7d56dd07acd56fee~~",role:"none"},a("li",{key:"~~2b9073c251a7c637ca630b7103f12ce5d31d5506~~",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:"~~4d152909f12f4b09d0d524f35379e3bfb1501fd0~~",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:"~~7abe2169fb244809e412feb665566177274574e4~~",class:"tree-navigation-item__content"},this.hasCustomIcon&&a("span",{key:"~~65bfafb7253268b73e9fe11c5f5df63c89be7834~~",class:"tree-navigation-item__icon","aria-hidden":"true",role:"img","aria-label":this.label+" icon"},a("slot",{key:"~~b26af22967f0d72695b9038cce515b60f79e7965~~",name:"custom-icon"})),!this.hasCustomIcon&&this.icon&&a("swirl-icon",{key:"~~6739786907f413cee3071c37d4e379aef73420af~~",class:"tree-navigation-item__icon",glyph:this.icon,size:20,"aria-hidden":"true",role:"img","aria-label":this.label+" icon"}),a("span",{key:"~~069ee1f54a267244b212a70761c3fd401acf4ce5~~",class:"tree-navigation-item__label"},a("span",{key:"~~eb9304afa01a1fdcf8e23d535b21f3b1dac1258c~~",class:"tree-navigation-item__label-text"},this.label),this.expandable&&this.hasChildren&&!this.external&&a("span",{key:"~~559bd11a3c5eacc8e15ca8574587e29adad7d871~~",class:"tree-navigation-item__toggle-icon","aria-hidden":"true"},a("swirl-icon-chevron-right",{key:"~~8c52055226bd35126bc72e50cc4b9134fdcfd911~~",size:16,role:"img","aria-label":"Expand"})),this.external&&a("span",{key:"~~5199b222bfa771abfa805c7cb4da78cfd3bbb6c3~~",class:"tree-navigation-item__external-icon","aria-hidden":"true"},a("swirl-icon-open-in-new",{key:"~~acc5c31d2d9d17ba2733d0558b2996ce4664662b~~",size:16,role:"img","aria-label":"External link"}))),this.markAsNew&&a("swirl-tag",{key:"~~bc696034cfda4cbf4f16b3da7e123ca5782f3cdf~~",class:"tree-navigation-item__is-new-tag",intent:"default",label:this.markAsNewLabel,size:"s",variant:"strong"}))),this.hasChildren&&a("ul",{key:"~~db2f9519bb1762810258b9e37b67068135d8049b~~",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:"~~5e24b4a54602513937077c22bde12fd71a26ae2b~~"}))))}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 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:"ca976ffd4fca940d7a7588352c2930c388f2c809",role:"none"},a("li",{key:"84275424138edee396ade449797426bb8fc44d67",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:"bb69ceee52b6a2ed29d4eee2c77079bb43f373bb",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:"fa134c5863ee24012b9889a4e98557b9fc415373",class:"tree-navigation-item__content"},this.hasCustomIcon&&a("span",{key:"8f3b9a11f848d450500b08671a6afe0477abece4",class:"tree-navigation-item__icon","aria-hidden":"true",role:"img","aria-label":this.label+" icon"},a("slot",{key:"c70b08d93a763b23a1be5315da917faf88ebc1e7",name:"custom-icon"})),!this.hasCustomIcon&&this.icon&&a("swirl-icon",{key:"62e7360461b3c88364ee1b043b7611aa2e42ba62",class:"tree-navigation-item__icon",glyph:this.icon,size:20,"aria-hidden":"true",role:"img","aria-label":this.label+" icon"}),a("span",{key:"a61f573563295b629ebd726c9966a2e6fd246bb6",class:"tree-navigation-item__label"},a("span",{key:"293ba37a5d278ecd98f5c0054cad9954c8816dee",class:"tree-navigation-item__label-text"},this.label),this.expandable&&this.hasChildren&&!this.external&&a("span",{key:"778441c6d0753d532fc461fdf246fd3395501aab",class:"tree-navigation-item__toggle-icon","aria-hidden":"true"},a("swirl-icon-chevron-right",{key:"2d7a6c494681aee805b5675ad0b2b252eda69f55",size:16,role:"img","aria-label":"Expand"})),this.external&&a("span",{key:"4894193c48a5a925fb475e245f3bfda5c87d94d1",class:"tree-navigation-item__external-icon","aria-hidden":"true"},a("swirl-icon-open-in-new",{key:"4b010e8a612b393b405bed616d88c0e00236b19c",size:16,role:"img","aria-label":"External link"}))),this.markAsNew&&a("swirl-tag",{key:"561ad998f5a27999fd4affd22f371f0a5a5bc08f",class:"tree-navigation-item__is-new-tag",intent:"default",label:this.markAsNewLabel,size:"s",variant:"strong"}))),this.hasChildren&&a("ul",{key:"475cd2f805db80db2ad1e2de0822b287f92a6737",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:"a279ad3faa16790761cafe2661020271bad90f02"}))))}get el(){return this}static get watchers(){return{expanded:[{handleExpandedChange:0}]}}static get style(){return":host{display:inline-flex;width:100%}:host {box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-state-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-state-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-state-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8);max-height:var(--s-line-height-sm)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4);opacity:0;transition:opacity 0.3s ease}.tree-navigation-item__link:hover .tree-navigation-item__external-icon,.tree-navigation-item__link:focus-visible .tree-navigation-item__external-icon{opacity:1}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}.tree-navigation-item__is-new-tag{flex-shrink:0}"}},[257,"swirl-tree-navigation-item",{active:[4],href:[1],icon:[1],label:[1],target:[1],markAsNew:[4,"mark-as-new"],markAsNewLabel:[1,"mark-as-new-label"],navigationItemId:[1,"navigation-item-id"],level:[2],expandable:[4],external:[4],expanded:[32],hasChildren:[32],hasCustomIcon:[32],childrenHeight:[32],expand:[64],collapse:[64]},void 0,{expanded:[{handleExpandedChange:0}]}]),v=g,b=function(){"undefined"!=typeof customElements&&["swirl-tree-navigation-item","swirl-icon","swirl-icon-chevron-right","swirl-icon-close","swirl-icon-open-in-new","swirl-tag","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-tree-navigation-item":customElements.get(s(e))\|\|customElements.define(s(e),g);break;case"swirl-icon":customElements.get(s(e))\|\|o();break;case"swirl-icon-chevron-right":customElements.get(s(e))\|\|l();break;case"swirl-icon-close":customElements.get(s(e))\|\|c();break;case"swirl-icon-open-in-new":customElements.get(s(e))\|\|h();break;case"swirl-tag":customElements.get(s(e))\|\|d();break;case"swirl-visually-hidden":customElements.get(s(e))\|\|m()}}))};export{v as SwirlTreeNavigationItem,b as defineCustomElement}

package/dist/components/swirl-tree-navigation.js 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:"~~de34d21939c768cf9387351720a7e32921414c07~~"},n("ul",{key:"~~b714857120ec132150994620c504528249f0ffbe~~","aria-label":this.label,class:"tree-navigation",role:"tree"},n("slot",{key:"~~1e567e7a80f2c9b5b5bc71e7ec0dcd4566de413b~~"})))}static get style(){return":host{display:block}:host *{box-sizing:border-box}.tree-navigation{margin:0;padding:0}"}},[257,"swirl-tree-navigation",{label:[1]}]),o=s,a=function(){"undefined"!=typeof customElements&&["swirl-tree-navigation"].forEach((e=>{"swirl-tree-navigation"===e&&(customElements.get(r(e))\|\|customElements.define(r(e),s))}))};export{o as SwirlTreeNavigation,a as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as t,h as a,Host as n,transformTag as i}from"@stencil/core/internal/client";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return a(n,{key:"3a42b1343ae4b2688c83af6adbc278c69ff82768"},a("ul",{key:"5dff269a46f46f5b7bc3fddcec8551b35f6e6c07","aria-label":this.label,class:"tree-navigation",role:"tree"},a("slot",{key:"267f029da2282d7814791614a45d388b6dfbcaa6"})))}static get style(){return":host{display:block}:host *{box-sizing:border-box}.tree-navigation{margin:0;padding:0}"}},[257,"swirl-tree-navigation",{label:[1]}]),s=r,o=function(){"undefined"!=typeof customElements&&["swirl-tree-navigation"].forEach((e=>{"swirl-tree-navigation"===e&&(customElements.get(i(e))\|\|customElements.define(i(e),r))}))};export{s as SwirlTreeNavigation,o as defineCustomElement}

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

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

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

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

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

	@@ -1 +1 @@
1	- import{proxyCustomElement as i,HTMLElement as e,h as t,Host as a,transformTag as n}from"@stencil/core/internal/client";import{d as o}from"./swirl-visually-hidden2.js";const s=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.durationLabel="Duration"}render(){return t(a,{key:"~~dde7f0cc360466bc3abd7140063620e0833c0833~~"},t("button",{key:"~~b0e1df9f52173175c1eb3bc7cedd6a127aa648e9~~","aria-describedby":void 0!==this.duration?"duration":void 0,"aria-label":this.label,class:"video-thumbnail",type:"button"},t("img",{key:"~~5bb5b489d651e93807539928c6e544ad2c21c2f4~~",alt:"",class:"video-thumbnail__image",loading:"lazy",src:this.src}),this.duration&&t("span",{key:"~~8358db494aff4bf269ddb577aa0e9e8af82fbac4~~",class:"video-thumbnail__duration",id:"duration"},t("swirl-visually-hidden",{key:"~~ed4be176c0ff8c56503057d2433ab1838855ffa0~~"},this.durationLabel),this.duration),t("svg",{key:"~~83a663ed5ab6f398aeeb50b2326df4df14f6f3d7~~",class:"video-thumbnail__play-icon",fill:"none",viewBox:"0 0 40 40",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"~~89955a3d5063bb75869b4f3868a7198b01f43c4b~~",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((i=>{switch(i){case"swirl-video-thumbnail":customElements.get(n(i))\|\|customElements.define(n(i),s);break;case"swirl-visually-hidden":customElements.get(n(i))\|\|o()}}))};export{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:"e5b7b7d61ecd0a5f17bf9d33ae0036d1e4d5fbdc"},t("button",{key:"a2c7aa1f2f48cb2ff6cb4850edffe7f286021c1f","aria-describedby":void 0!==this.duration?"duration":void 0,"aria-label":this.label,class:"video-thumbnail",type:"button"},t("img",{key:"ebb9656157c8689db6937a9858a8f9ca34f432d3",alt:"",class:"video-thumbnail__image",loading:"lazy",src:this.src}),this.duration&&t("span",{key:"d06f76dcf2ce2c5df731adcbaabbf62da5f3ea1e",class:"video-thumbnail__duration",id:"duration"},t("swirl-visually-hidden",{key:"8e672d496b7692113e105c7ee5e086d3b96deec6"},this.durationLabel),this.duration),t("svg",{key:"a7b0148782b376d129afab347d8f4c396fceb3ff",class:"video-thumbnail__play-icon",fill:"none",viewBox:"0 0 40 40",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"8417c94adb501b1a638cafb28fa15014ec47fdf5",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 d=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost()}render(){return s(t,{key:"~~5e2dc1706496d0914663fcd73b6b40af01c4ad34~~"},s("slot",{key:"~~1809f89b83fbf53726e8bc8dea25cd3f40ba6ba8~~"}))}static get style(){return".sc-swirl-visually-hidden-h{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}"}},[262,"swirl-visually-hidden"]);function l(){"undefined"!=typeof customElements&&["swirl-visually-hidden"].forEach((e=>{"swirl-visually-hidden"===e&&(customElements.get(n(e))\|\|customElements.define(n(e),d))}))}export{d as S,l as d}
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:"482c1ecff1f05c4e937aecc0f173b8d9db242cef"},s("slot",{key:"adcbcfa81a30d9609a37c1be5cb38db48e6704f8"}))}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}