@getflip/swirl-components 0.523.1 → 0.524.0

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

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

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

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

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

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

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

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

package/dist/esm/index-BdGaOt5L.js

@@ -1130,6 +1130,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './swirl-icon-voice.entry.js').then(processMod, consoleError);
+                case 'swirl-icon-volume-off':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './swirl-icon-volume-off.entry.js').then(processMod, consoleError);
                 case 'swirl-icon-volume-up':
                     return import(
                       /* webpackMode: "lazy" */