@getflip/swirl-components 0.503.0 → 0.505.0

package/dist/components/swirl-table.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as a,transformTag as r}from"@stencil/core/internal/client";import{g as o,c as l}from"./index2.js";import{S as n}from"./sortable.esm.js";import{d as h,i as c,q as d}from"./utils.js";import{d as b}from"./swirl-text2.js";import{d as w}from"./swirl-visually-hidden2.js";var u,p,f=o((p||(p=1,u=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=void 0,a=void 0,r=void 0,o=[];return function(){var n=function(t){return"function"==typeof t?t():t}(e),h=(new Date).getTime(),c=!i||h-i>n;i=h;for(var d=arguments.length,b=Array(d),w=0;w<d;w++)b[w]=arguments[w];if(c&&s.leading)return s.accumulate?Promise.resolve(t.call(this,[b])).then((function(t){return t[0]})):Promise.resolve(t.call.apply(t,[this].concat(b)));if(a?clearTimeout(r):a=function(){var t={};return t.promise=new Promise((function(e,s){t.resolve=e,t.reject=s})),t}(),o.push(b),r=setTimeout(l.bind(this),n),s.accumulate){var u=o.length-1;return a.promise.then((function(t){return t[u]}))}return a.promise};function l(){var e=a;clearTimeout(r),Promise.resolve(s.accumulate?t.call(this,o):t.apply(this,o[o.length-1])).then(e.resolve,e.reject),o=[],a=null}}),u));const m={end:"Dropped. Final position in table: {position} of {rowCount}.",initial:"Press space to move the row.",moved:"Current position in table: {position} of {rowCount}.",start:"Row grabbed. Current position in table: {position} of {rowCount}. Press up and down arrow keys to change position, Space to drop."},y=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.dropRow=s(this,"dropRow",7),this.dragDropInstructions=m,this.emptyStateLabel="No results found.",this.liveRegionText="",this.triggerRerender=h((async()=>{await this.updateLayout(),this.updateEmptyState()}),0,!0),this.updateLayout=f((async()=>{this.resetCellStyles(),this.resetColumnStyles(),this.resetEmptyRowStyles(),this.resetRowGroupStyles(),this.layoutEmptyRow(),this.layoutRowGroups(),this.layOutCellsAndColumns(),this.updateScrolledState()}),16,{leading:!0}),this.onScroll=()=>{this.updateScrolledState()},this.onFocus=t=>{if(this.movingViaKeyboard){const t=this.el.querySelector(".table-row--moving");t&&this.focusDragHandleOfRow(t)}const e=!!t.target?.closest(this.dragDropHandle);""===this.liveRegionText&&e&&this.updateLiveRegionText("initial")},this.onBlur=t=>{const e=t.relatedTarget,s=!!e?.closest(this.dragDropHandle);this.el.contains(e)&&s||""!==this.liveRegionText&&this.updateLiveRegionText()},this.onKeyDown=t=>{if(!this.enableDragDrop)return;const e=t.target?.closest("swirl-table-row");t.target?.closest(this.dragDropHandle)&&("Space"===t.code?(t.preventDefault(),t.stopPropagation(),this.toggleKeyboardMove(e)):"ArrowUp"===t.code?(t.preventDefault(),t.stopPropagation(),this.moveRow(e,"up")):"ArrowDown"===t.code?(t.preventDefault(),t.stopPropagation(),this.moveRow(e,"down")):"Escape"===t.code&&(t.preventDefault(),t.stopPropagation(),this.cancelKeyboardMove()))}}async componentDidLoad(){this.setupIntersectionObserver(),this.setupMutationObservers(),queueMicrotask((()=>{this.setupDragDrop()}))}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.columnMutationObserver?.disconnect(),this.rowMutationObserver?.disconnect(),this.sortable?.destroy()}handleEnableDragDropChange(){queueMicrotask((()=>{this.setupDragDrop()}))}setupIntersectionObserver(){this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{threshold:0}),this.intersectionObserver.observe(this.container)}setupMutationObservers(){this.columnMutationObserver=new MutationObserver((t=>{t.some((t=>t.addedNodes.length||t.removedNodes.length))&&this.updateLayout()})),this.columnMutationObserver.observe(this.headerEl,{childList:!0,subtree:!0}),this.rowMutationObserver=new MutationObserver((t=>{t.some((t=>t.addedNodes.length||t.removedNodes.length))&&(this.updateEmptyState(),this.setupDragDrop())})),this.startRowMutationObserver()}startRowMutationObserver(){this.rowMutationObserver?.observe(this.bodyEl,{childList:!0,subtree:!0})}stopRowMutationObserver(){this.rowMutationObserver?.disconnect()}setupDragDrop(){if(this.sortable&&(this.sortable.destroy(),this.sortable=void 0),this.enableDragDrop){if(this.el.querySelector("swirl-table-row-group"))return void console.warn('[Swirl] Drag & drop is not yet supported for swirl-tables using the "swirl-table-row-group" component.');if(!this.dragDropHandle)return void console.warn('[Swirl] swirl-table required the "dragDropHandle" prop to be set when drag & drop is enabled.');const t=this.el.querySelector('[slot="rows"]');this.dragDropContainer="SWIRL-TABLE-ROW"!==t?.tagName?t??this.bodyEl:this.bodyEl,this.sortable=new n(this.dragDropContainer,{animation:100,direction:"vertical",handle:this.dragDropHandle,fallbackOnBody:!0,group:"swirl-table-"+(""+Math.random()).substring(2),onStart:()=>{this.stopRowMutationObserver()},onEnd:t=>{t.stopPropagation();const{to:e,newIndex:s,oldIndex:i,item:a}=t;this.dropRow.emit({newIndex:s,oldIndex:i,item:a,itemId:a.id??a.querySelector(":scope > swirl-table-row").id,newNextSiblingItemId:s<e.children.length-1?e.children[s+1].id:void 0,newPrevSiblingItemId:s>0?e.children[s-1].id:void 0}),this.startRowMutationObserver()}})}}async onVisibilityChange(t){t.some((t=>t.isIntersecting))&&setTimeout((async()=>{await this.updateLayout()}),100)}async componentDidRender(){await this.updateLayout(),this.updateEmptyState()}async onWindowResize(){await this.updateLayout()}async rerender(){this.triggerRerender()}resetEmptyRowStyles(){const t=this.el.querySelector(".table__empty-row");t&&(t.style.width="")}resetRowGroupStyles(){Array.from(this.el.querySelectorAll("swirl-table-row-group")).forEach((t=>{t.shadowRoot.querySelector(".table-row-group__header-row")&&(t.shadowRoot.querySelector(".table-row-group__header-row").style.width="")}))}resetColumnStyles(){this.getColumns().forEach((t=>{t.classList.remove("table-column--has-shadow","table-column--is-sticky","table-column--is-sticky-right"),t.style.right="",t.style.left="",t.style.position="",t.style.zIndex=""}))}resetCellStyles(){this.getCells().forEach((t=>{t.classList.remove("table-cell--has-shadow","table-cell--is-sticky","table-cell--is-sticky-right"),t.style.flex="",t.style.left="",t.style.right="",t.style.position="",t.style.zIndex=""}))}updateScrolledState(){const t=c();if(void 0===this.container)return;const e=this.container.scrollWidth>this.container.clientWidth,s=this.container.scrollLeft>0,i=Math.ceil(this.container.clientWidth+this.container.scrollLeft)>=Math.floor(this.container.scrollWidth);e!==this.scrollable&&(e&&!t?this.container.classList.add("table__container--scrollable"):this.container.classList.remove("table__container--scrollable")),s!==this.scrolled&&(s&&!t?this.container.classList.add("table__container--scrolled"):this.container.classList.remove("table__container--scrolled")),i!==this.scrolledToEnd&&(i&&!t?this.container.classList.add("table__container--scrolled-to-end"):this.container.classList.remove("table__container--scrolled-to-end"))}getColumns(){return Array.from(this.el.querySelectorAll("swirl-table-column"))}getCells(){return Array.from(this.el.querySelectorAll("swirl-table-cell"))}layoutEmptyRow(){const t=this.el.querySelector(".table__empty-row");if(!t)return;const e=this.el.querySelector(".table__container").scrollWidth+"px";t.style.width=e}layoutRowGroups(){const t=Array.from(this.el.querySelectorAll("swirl-table-row-group")),e=this.el.querySelector(".table__container")?.scrollWidth+"px";t.forEach((t=>{t.shadowRoot.querySelector(".table-row-group__header-row")&&(t.shadowRoot.querySelector(".table-row-group__header-row").style.width=e)}))}layOutCellsAndColumns(){const t=this.getColumns(),e=this.getCells();t.forEach(((s,i)=>{const a=this.getCellsForColumn(e,t,i),r=this.calculateColumnProperties(s,t,i);a.forEach((t=>this.applyCellStyles(t,s,r))),this.applyColumnStyles(s,r)}))}getCellsForColumn(t,e,s){return t.filter(((t,i)=>(s-i)%e.length==0))}calculateColumnProperties(t,e,s){return{leftOffsetForStickyColumn:t.sticky?this.getLeftOffsetForStickyColumn(e,s):0,columnWidth:t.getBoundingClientRect().width+"px",isLastColumnSticky:t.sticky&&e.length===s+1,hasShadowRight:t.sticky&&!this.hasStickyColumnsToRight(e,s)}}applyCellStyles(t,e,s){const{leftOffsetForStickyColumn:i,columnWidth:a,isLastColumnSticky:r,hasShadowRight:o}=s;t.style.flex=a?"0 0 "+a:"",c()||(e.sticky&&!r&&(t.classList.add("table-cell--is-sticky"),t.style.left=i+"px",o&&t.classList.add("table-cell--has-shadow-right")),r&&t.classList.add("table-cell--is-sticky-right","table-cell--has-shadow-left"))}applyColumnStyles(t,e){if(c())return;const{leftOffsetForStickyColumn:s,isLastColumnSticky:i,hasShadowRight:a}=e;t.sticky&&!i&&(t.classList.add("table-column--is-sticky"),t.style.left=s+"px",a&&t.classList.add("table-column--has-shadow-right")),i&&t.classList.add("table-column--is-sticky-right","table-column--has-shadow-left")}getLeftOffsetForStickyColumn(t,e){return t.slice(0,e).reduce(((t,e)=>{if(e.sticky)return t+e.getBoundingClientRect().width}),0)}hasStickyColumnsToRight(t,e){return t.slice(e+1,t.length-1).some((t=>t.sticky))}updateEmptyState(){const t=this.el.querySelector('[slot="rows"]');this.empty=!t||0===t.children.length}updateLiveRegionText(t,e={}){let s=t?this.dragDropInstructions[t]:"";for(const[t,i]of Object.entries(e??{}))s=s.replaceAll(`{${t}}`,i+"");s!==this.liveRegionText&&(this.liveRegionText=s)}toggleKeyboardMove(t){this.movingViaKeyboard?this.endKeyboardMove(t):this.startKeyboardMove(t)}startKeyboardMove(t){this.movingViaKeyboard=!0,this.positionBeforeKeyboardMove=Array.from(this.dragDropContainer.children).indexOf(t),t.classList.add("table-row--moving"),this.updateLiveRegionText("start",{position:Array.from(this.dragDropContainer.children).indexOf(t)+1,rowCount:this.dragDropContainer.children.length})}endKeyboardMove(t){this.movingViaKeyboard=!1,t.classList.remove("table-row--moving"),this.updateLiveRegionText("end",{position:Array.from(this.dragDropContainer.children).indexOf(t)+1,rowCount:this.dragDropContainer.children.length}),this.dropRow.emit({item:t,newIndex:Array.from(this.dragDropContainer.children).indexOf(t),oldIndex:this.positionBeforeKeyboardMove,itemId:t.id,newNextSiblingItemId:Array.from(this.dragDropContainer.children).indexOf(t)<this.dragDropContainer.children.length-1?this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(t)+1].id:void 0,newPrevSiblingItemId:Array.from(this.dragDropContainer.children).indexOf(t)>0?this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(t)-1].id:void 0}),this.positionBeforeKeyboardMove=void 0}cancelKeyboardMove(){if(!this.movingViaKeyboard)return;const t=this.el.querySelector(".table-row--moving");t&&(t.classList.remove("table-row--moving"),this.movingViaKeyboard=!1,void 0!==this.positionBeforeKeyboardMove&&this.dragDropContainer.insertBefore(t,this.dragDropContainer.children[this.positionBeforeKeyboardMove]))}moveRow(t,e){if(!this.movingViaKeyboard)return;let s;if("up"===e){const e=Array.from(this.dragDropContainer.children).indexOf(t);s=Math.max(0,e-1),this.dragDropContainer.insertBefore(t,this.dragDropContainer.children[s])}else{const e=Array.from(this.dragDropContainer.children).indexOf(t);s=Math.min(this.dragDropContainer.children.length-1,e+1),this.dragDropContainer.insertBefore(t,this.dragDropContainer.children[s+1])}this.updateLiveRegionText("moved",{position:s+1,rowCount:this.dragDropContainer.children.length}),this.focusDragHandleOfRow(t)}focusDragHandleOfRow(t){const e=d(t,this.dragDropHandle)?.[0];"BUTTON"===e.tagName?e.focus():e.querySelector("button")?.focus()}render(){const t=!!this.el.querySelector('[slot="empty"]'),e=l("table",{"table--show-empty-state":this.empty&&!this.loading,"table--keyboard-move":this.movingViaKeyboard});return i(a,{key:"c09513da5518bdefcee578c6efceae1e1f3fee68"},i("div",{key:"35b0a5094a70f4647684dfbc44b1c4d26a391009",class:e},this.enableDragDrop&&i("swirl-visually-hidden",{key:"fe42f114b7415062d0451f6497a6112b72cb83e9"},i("span",{key:"f6eec0ad58042009c3253e3b3c6c76550d4f4295","aria-live":"assertive"},this.liveRegionText)),i("div",{key:"b53d68ac5b91135476f587a09af076e6d12e0dad",class:"table__container",onFocusin:this.onFocus,onFocusout:this.onBlur,onKeyDown:this.onKeyDown,onScroll:this.onScroll,ref:t=>this.container=t,tabIndex:-1},i("div",{key:"13ad295da62729b5cdc5349e1d30738767063638","aria-describedby":this.caption?"caption":void 0,"aria-label":this.label,role:"table",class:"table__table"},this.caption&&i("swirl-visually-hidden",{key:"f88015fe89b806f50f94efe0aee3565238422bb5"},i("div",{key:"01124aabbc17b27491329866b0b093e721b18cc6",id:"caption"},this.caption)),i("div",{key:"0b97a4dc081bfd9b5dace14e9b2e5db15d09dbae",role:"rowgroup"},i("div",{key:"23e378bb2bd3150ae75bb1e43b0f1bc881b0bf4b",class:"table__header",ref:t=>this.headerEl=t,role:"row"},i("slot",{key:"94204f4f68af17b7831cd1a0a90c4c089bc5f2e7",name:"columns"}))),i("div",{key:"db4871eaa08b11ff17412db3fa9526e53bd871b1",class:"table__body",ref:t=>this.bodyEl=t},i("slot",{key:"5b006032cfa9ac408ec1f8c94bb3495c753910bb",name:"rows"}),i("div",{key:"65584539f8112a1766794a2109af59f47b1ce40f",class:"table__empty-row",role:"row"},i("div",{key:"cf76a928e889a97d9ee7dab479cf6f380a7d7fe9","aria-colspan":this.getColumns().length,class:"table__empty-row-cell",role:"cell"},i("slot",{key:"ea6937060cc8c7dc26344d5d634eeb736ad52a43",name:"empty"}),!t&&i("swirl-text",{key:"c535e96c11ea5ee7c940a1fb1097ad098998fac8",align:"center",size:"sm"},this.emptyStateLabel))))))))}get el(){return this}static get watchers(){return{enableDragDrop:[{handleEnableDragDropChange:0}]}}static get style(){return".sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(23, 23, 23, 0.2);position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}html.theme-dark.sc-swirl-table-h,html.theme-dark .sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(0, 0, 0, 0.2)}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid       var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px var(--swirl-table-shadow-rgba),     2px 0 4px -2px var(--swirl-table-shadow-rgba)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px       var(--swirl-table-shadow-rgba),     0px 1px 4px 0px var(--swirl-table-shadow-rgba)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:none}.table__empty-row-cell.sc-swirl-table{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell.sc-swirl-table>*.sc-swirl-table{flex-grow:1}"}},[262,"swirl-table",{caption:[1],dragDropHandle:[1,"drag-drop-handle"],dragDropInstructions:[16],emptyStateLabel:[1,"empty-state-label"],enableDragDrop:[4,"enable-drag-drop"],label:[1],loading:[4],empty:[32],liveRegionText:[32],scrollable:[32],scrolled:[32],scrolledToEnd:[32],rerender:[64]},[[9,"resize","onWindowResize"]],{enableDragDrop:[{handleEnableDragDropChange:0}]}]),g=y,v=function(){"undefined"!=typeof customElements&&["swirl-table","swirl-text","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-table":customElements.get(r(t))||customElements.define(r(t),y);break;case"swirl-text":customElements.get(r(t))||b();break;case"swirl-visually-hidden":customElements.get(r(t))||w()}}))};export{g as SwirlTable,v as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as a,transformTag as r}from"@stencil/core/internal/client";import{g as o,c as l}from"./index2.js";import{S as n}from"./sortable.esm.js";import{d as h,i as c,q as d}from"./utils.js";import{d as b}from"./swirl-text2.js";import{d as w}from"./swirl-visually-hidden2.js";var u,p,m=o((p||(p=1,u=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=void 0,a=void 0,r=void 0,o=[];return function(){var n=function(t){return"function"==typeof t?t():t}(e),h=(new Date).getTime(),c=!i||h-i>n;i=h;for(var d=arguments.length,b=Array(d),w=0;w<d;w++)b[w]=arguments[w];if(c&&s.leading)return s.accumulate?Promise.resolve(t.call(this,[b])).then((function(t){return t[0]})):Promise.resolve(t.call.apply(t,[this].concat(b)));if(a?clearTimeout(r):a=function(){var t={};return t.promise=new Promise((function(e,s){t.resolve=e,t.reject=s})),t}(),o.push(b),r=setTimeout(l.bind(this),n),s.accumulate){var u=o.length-1;return a.promise.then((function(t){return t[u]}))}return a.promise};function l(){var e=a;clearTimeout(r),Promise.resolve(s.accumulate?t.call(this,o):t.apply(this,o[o.length-1])).then(e.resolve,e.reject),o=[],a=null}}),u));const f={end:"Dropped. Final position in table: {position} of {rowCount}.",initial:"Press space to move the row.",moved:"Current position in table: {position} of {rowCount}.",start:"Row grabbed. Current position in table: {position} of {rowCount}. Press up and down arrow keys to change position, Space to drop."},y=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.dropRow=s(this,"dropRow",7),this.dragDropInstructions=f,this.emptyStateLabel="No results found.",this.liveRegionText="",this.triggerRerender=h((async()=>{await this.updateLayout(),this.updateEmptyState()}),0,!0),this.updateLayout=m((async()=>{this.resetCellStyles(),this.resetColumnStyles(),this.resetEmptyRowStyles(),this.resetRowGroupStyles(),this.layoutEmptyRow(),this.layoutRowGroups(),this.layOutCellsAndColumns(),this.updateScrolledState()}),16,{leading:!0}),this.onScroll=()=>{this.updateScrolledState()},this.onFocus=t=>{if(this.movingViaKeyboard){const t=this.el.querySelector(".table-row--moving");t&&this.focusDragHandleOfRow(t)}const e=!!t.target?.closest(this.dragDropHandle);""===this.liveRegionText&&e&&this.updateLiveRegionText("initial")},this.onBlur=t=>{const e=t.relatedTarget,s=!!e?.closest(this.dragDropHandle);this.el.contains(e)&&s||""!==this.liveRegionText&&this.updateLiveRegionText()},this.onKeyDown=t=>{if(!this.enableDragDrop)return;const e=t.target?.closest("swirl-table-row");t.target?.closest(this.dragDropHandle)&&("Space"===t.code?(t.preventDefault(),t.stopPropagation(),this.toggleKeyboardMove(e)):"ArrowUp"===t.code?(t.preventDefault(),t.stopPropagation(),this.moveRow(e,"up")):"ArrowDown"===t.code?(t.preventDefault(),t.stopPropagation(),this.moveRow(e,"down")):"Escape"===t.code&&(t.preventDefault(),t.stopPropagation(),this.cancelKeyboardMove()))}}async componentDidLoad(){this.setupIntersectionObserver(),this.setupMutationObservers(),queueMicrotask((()=>{this.setupDragDrop()}))}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.columnMutationObserver?.disconnect(),this.rowMutationObserver?.disconnect(),this.sortable?.destroy()}handleEnableDragDropChange(){queueMicrotask((()=>{this.setupDragDrop()}))}setupIntersectionObserver(){this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{threshold:0}),this.intersectionObserver.observe(this.container)}setupMutationObservers(){this.columnMutationObserver=new MutationObserver((t=>{t.some((t=>t.addedNodes.length||t.removedNodes.length))&&this.updateLayout()})),this.columnMutationObserver.observe(this.headerEl,{childList:!0,subtree:!0}),this.rowMutationObserver=new MutationObserver((t=>{t.some((t=>t.addedNodes.length||t.removedNodes.length))&&(this.updateEmptyState(),this.setupDragDrop())})),this.startRowMutationObserver()}startRowMutationObserver(){this.rowMutationObserver?.observe(this.bodyEl,{childList:!0,subtree:!0})}stopRowMutationObserver(){this.rowMutationObserver?.disconnect()}setupDragDrop(){if(this.sortable&&(this.sortable.destroy(),this.sortable=void 0),this.enableDragDrop){if(this.el.querySelector("swirl-table-row-group"))return void console.warn('[Swirl] Drag & drop is not yet supported for swirl-tables using the "swirl-table-row-group" component.');if(!this.dragDropHandle)return void console.warn('[Swirl] swirl-table required the "dragDropHandle" prop to be set when drag & drop is enabled.');const t=this.el.querySelector('[slot="rows"]');this.dragDropContainer="SWIRL-TABLE-ROW"!==t?.tagName?t??this.bodyEl:this.bodyEl,this.sortable=new n(this.dragDropContainer,{animation:100,direction:"vertical",handle:this.dragDropHandle,fallbackOnBody:!0,group:"swirl-table-"+(""+Math.random()).substring(2),onStart:()=>{this.stopRowMutationObserver()},onEnd:t=>{t.stopPropagation();const{to:e,newIndex:s,oldIndex:i,item:a}=t;this.dropRow.emit({newIndex:s,oldIndex:i,item:a,itemId:a.id??a.querySelector(":scope > swirl-table-row").id,newNextSiblingItemId:s<e.children.length-1?e.children[s+1].id:void 0,newPrevSiblingItemId:s>0?e.children[s-1].id:void 0}),this.startRowMutationObserver()}})}}async onVisibilityChange(t){t.some((t=>t.isIntersecting))&&setTimeout((async()=>{await this.updateLayout()}),100)}async componentDidRender(){await this.updateLayout(),this.updateEmptyState()}async onWindowResize(){await this.updateLayout()}async rerender(){this.triggerRerender()}resetEmptyRowStyles(){const t=this.el.querySelector(".table__empty-row");t&&(t.style.width="")}resetRowGroupStyles(){Array.from(this.el.querySelectorAll("swirl-table-row-group")).forEach((t=>{t.shadowRoot.querySelector(".table-row-group__header-row")&&(t.shadowRoot.querySelector(".table-row-group__header-row").style.width="")}))}resetColumnStyles(){this.getColumns().forEach((t=>{t.classList.remove("table-column--has-shadow","table-column--is-sticky","table-column--is-sticky-right"),t.style.right="",t.style.left="",t.style.position="",t.style.zIndex=""}))}resetCellStyles(){this.getCells().forEach((t=>{t.classList.remove("table-cell--has-shadow","table-cell--is-sticky","table-cell--is-sticky-right"),t.style.flex="",t.style.left="",t.style.right="",t.style.position="",t.style.zIndex=""}))}updateScrolledState(){const t=c();if(void 0===this.container)return;const e=this.container.scrollWidth>this.container.clientWidth,s=this.container.scrollLeft>0,i=Math.ceil(this.container.clientWidth+this.container.scrollLeft)>=Math.floor(this.container.scrollWidth);e!==this.scrollable&&(e&&!t?this.container.classList.add("table__container--scrollable"):this.container.classList.remove("table__container--scrollable")),s!==this.scrolled&&(s&&!t?this.container.classList.add("table__container--scrolled"):this.container.classList.remove("table__container--scrolled")),i!==this.scrolledToEnd&&(i&&!t?this.container.classList.add("table__container--scrolled-to-end"):this.container.classList.remove("table__container--scrolled-to-end"))}getColumns(){return Array.from(this.el.querySelectorAll("swirl-table-column"))}getCells(){return Array.from(this.el.querySelectorAll("swirl-table-cell"))}layoutEmptyRow(){const t=this.el.querySelector(".table__empty-row");if(!t)return;const e=this.el.querySelector(".table__container").scrollWidth+"px";t.style.width=e}layoutRowGroups(){const t=Array.from(this.el.querySelectorAll("swirl-table-row-group")),e=this.el.querySelector(".table__container")?.scrollWidth+"px";t.forEach((t=>{t.shadowRoot.querySelector(".table-row-group__header-row")&&(t.shadowRoot.querySelector(".table-row-group__header-row").style.width=e)}))}layOutCellsAndColumns(){const t=this.getColumns(),e=this.getCells();t.forEach(((s,i)=>{const a=this.getCellsForColumn(e,t,i),r=this.calculateColumnProperties(s,t,i);a.forEach((t=>this.applyCellStyles(t,s,r))),this.applyColumnStyles(s,r)}))}getCellsForColumn(t,e,s){return t.filter(((t,i)=>(s-i)%e.length==0))}calculateColumnProperties(t,e,s){return{leftOffsetForStickyColumn:t.sticky?this.getLeftOffsetForStickyColumn(e,s):0,columnWidth:t.getBoundingClientRect().width+"px",isLastColumnSticky:t.sticky&&e.length===s+1,hasShadowRight:t.sticky&&!this.hasStickyColumnsToRight(e,s)}}applyCellStyles(t,e,s){const{leftOffsetForStickyColumn:i,columnWidth:a,isLastColumnSticky:r,hasShadowRight:o}=s;t.style.flex=a?"0 0 "+a:"",c()||(e.sticky&&!r&&(t.classList.add("table-cell--is-sticky"),t.style.left=i+"px",o&&t.classList.add("table-cell--has-shadow-right")),r&&t.classList.add("table-cell--is-sticky-right","table-cell--has-shadow-left"))}applyColumnStyles(t,e){if(c())return;const{leftOffsetForStickyColumn:s,isLastColumnSticky:i,hasShadowRight:a}=e;t.sticky&&!i&&(t.classList.add("table-column--is-sticky"),t.style.left=s+"px",a&&t.classList.add("table-column--has-shadow-right")),i&&t.classList.add("table-column--is-sticky-right","table-column--has-shadow-left")}getLeftOffsetForStickyColumn(t,e){return t.slice(0,e).reduce(((t,e)=>{if(e.sticky)return t+e.getBoundingClientRect().width}),0)}hasStickyColumnsToRight(t,e){return t.slice(e+1,t.length-1).some((t=>t.sticky))}updateEmptyState(){const t=this.el.querySelector('[slot="rows"]');this.empty=!t||0===t.children.length}updateLiveRegionText(t,e={}){let s=t?this.dragDropInstructions[t]:"";for(const[t,i]of Object.entries(e??{}))s=s.replaceAll(`{${t}}`,i+"");s!==this.liveRegionText&&(this.liveRegionText=s)}toggleKeyboardMove(t){this.movingViaKeyboard?this.endKeyboardMove(t):this.startKeyboardMove(t)}startKeyboardMove(t){this.movingViaKeyboard=!0,this.positionBeforeKeyboardMove=Array.from(this.dragDropContainer.children).indexOf(t),t.classList.add("table-row--moving"),this.updateLiveRegionText("start",{position:Array.from(this.dragDropContainer.children).indexOf(t)+1,rowCount:this.dragDropContainer.children.length})}endKeyboardMove(t){this.movingViaKeyboard=!1,t.classList.remove("table-row--moving"),this.updateLiveRegionText("end",{position:Array.from(this.dragDropContainer.children).indexOf(t)+1,rowCount:this.dragDropContainer.children.length}),this.dropRow.emit({item:t,newIndex:Array.from(this.dragDropContainer.children).indexOf(t),oldIndex:this.positionBeforeKeyboardMove,itemId:t.id,newNextSiblingItemId:Array.from(this.dragDropContainer.children).indexOf(t)<this.dragDropContainer.children.length-1?this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(t)+1].id:void 0,newPrevSiblingItemId:Array.from(this.dragDropContainer.children).indexOf(t)>0?this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(t)-1].id:void 0}),this.positionBeforeKeyboardMove=void 0}cancelKeyboardMove(){if(!this.movingViaKeyboard)return;const t=this.el.querySelector(".table-row--moving");t&&(t.classList.remove("table-row--moving"),this.movingViaKeyboard=!1,void 0!==this.positionBeforeKeyboardMove&&this.dragDropContainer.insertBefore(t,this.dragDropContainer.children[this.positionBeforeKeyboardMove]))}moveRow(t,e){if(!this.movingViaKeyboard)return;let s;if("up"===e){const e=Array.from(this.dragDropContainer.children).indexOf(t);s=Math.max(0,e-1),this.dragDropContainer.insertBefore(t,this.dragDropContainer.children[s])}else{const e=Array.from(this.dragDropContainer.children).indexOf(t);s=Math.min(this.dragDropContainer.children.length-1,e+1),this.dragDropContainer.insertBefore(t,this.dragDropContainer.children[s+1])}this.updateLiveRegionText("moved",{position:s+1,rowCount:this.dragDropContainer.children.length}),this.focusDragHandleOfRow(t)}focusDragHandleOfRow(t){const e=d(t,this.dragDropHandle)?.[0];"BUTTON"===e.tagName?e.focus():e.querySelector("button")?.focus()}render(){const t=!!this.el.querySelector('[slot="empty"]'),e=l("table",{"table--show-empty-state":this.empty&&!this.loading,"table--keyboard-move":this.movingViaKeyboard});return i(a,{key:"88148e3f9b732d152621c7db0ba4ed69dc1a85fb"},i("div",{key:"17fad7061ef36d0cfa2be6dba15b43038fb4eae5",class:e},this.enableDragDrop&&i("swirl-visually-hidden",{key:"1c71aaa406d89ed5f67166af65ce03f95a1b92cb"},i("span",{key:"247b9abb0857d53a84c2cb03eb2654bfc34f2824","aria-live":"assertive"},this.liveRegionText)),i("div",{key:"7e50be37d444e77be28a7a4840a4b1240688734c",class:"table__container",onFocusin:this.onFocus,onFocusout:this.onBlur,onKeyDown:this.onKeyDown,onScroll:this.onScroll,ref:t=>this.container=t,tabIndex:-1},i("div",{key:"787928503b2cd10a4389410577aa259cbf8db205","aria-describedby":this.caption?"caption":void 0,"aria-label":this.label,role:"table",class:"table__table"},this.caption&&i("swirl-visually-hidden",{key:"eb9700a96bb98a4f7e08cfb7466e1d7bb5e54f17"},i("div",{key:"3b6222acaa81484cfe7daa679737ffcc4bcd67c2",id:"caption"},this.caption)),i("div",{key:"35eb6251d3910b4585eab091aa74975818b3fb55",role:"rowgroup"},i("div",{key:"081ebc76ff839883225e381ff48ecb5ede972c31",class:"table__header",ref:t=>this.headerEl=t,role:"row"},i("slot",{key:"82f30623474139c84b7b8cc941253d73d9ce1ada",name:"columns"}))),i("div",{key:"0dcb1df20b07fdce82af2f9b7c51ba5241a56714",class:"table__body",ref:t=>this.bodyEl=t},i("slot",{key:"cac1e7addec05d86353fd87d3b380e1bc4259be7",name:"rows"}),i("div",{key:"0e10c52673bca428e430890e035c86ce468afe6e",class:"table__empty-row",role:"row"},i("div",{key:"49f29f8b3aaaa9ddb19c93b68f9475d8bbadc3a6","aria-colspan":this.getColumns().length,class:"table__empty-row-cell",role:"cell"},i("slot",{key:"61ebfc91546c0569361a2273bc27b20fd0e5c377",name:"empty"}),!t&&i("swirl-text",{key:"03e6ae3f8dbdd63e0b0d3727d8fcdadf13862669",align:"center",size:"sm"},this.emptyStateLabel))))))))}get el(){return this}static get watchers(){return{enableDragDrop:[{handleEnableDragDropChange:0}]}}static get style(){return".sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(23, 23, 23, 0.2);position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}html.theme-dark.sc-swirl-table-h,html.theme-dark .sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(0, 0, 0, 0.2)}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid       var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px var(--swirl-table-shadow-rgba),     2px 0 4px -2px var(--swirl-table-shadow-rgba)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px       var(--swirl-table-shadow-rgba),     0px 1px 4px 0px var(--swirl-table-shadow-rgba)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:none}.table__empty-row-cell.sc-swirl-table{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell.sc-swirl-table>*.sc-swirl-table{flex-grow:1}"}},[262,"swirl-table",{caption:[1],dragDropHandle:[1,"drag-drop-handle"],dragDropInstructions:[16],emptyStateLabel:[1,"empty-state-label"],enableDragDrop:[4,"enable-drag-drop"],label:[1],loading:[4],empty:[32],liveRegionText:[32],scrollable:[32],scrolled:[32],scrolledToEnd:[32],rerender:[64]},[[9,"resize","onWindowResize"]],{enableDragDrop:[{handleEnableDragDropChange:0}]}]),g=y,v=function(){"undefined"!=typeof customElements&&["swirl-table","swirl-text","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-table":customElements.get(r(t))||customElements.define(r(t),y);break;case"swirl-text":customElements.get(r(t))||b();break;case"swirl-visually-hidden":customElements.get(r(t))||w()}}))};export{g as SwirlTable,v as defineCustomElement}

package/dist/components/swirl-tag2.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as a,createEvent as r,h as e,Host as o,transformTag as n}from"@stencil/core/internal/client";import{c as s}from"./index2.js";import{d as i}from"./swirl-icon-close2.js";import{d as c}from"./swirl-visually-hidden2.js";const l=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.removeTag=r(this,"remove",7),this.iconPosition="start",this.intent="default",this.size="m",this.removalButtonLabel="Remove",this.variant="default",this.onRemove=t=>{this.removeTag?.emit(t)}}componentDidLoad(){this.forceIconProps()}componentWillLoad(){this.forceVariant()}componentDidRender(){this.forceIconProps()}forceIconProps(){const t=this.iconEl?.children[0];t?.setAttribute("size","16")}forceVariant(){Boolean(this.bordered)&&(console.warn('[Swirl] The "bordered" prop of swirl-tag is deprecated and will be removed with the next major release. Please use the "variant" prop as "outline" to achieve the same result.'),this.variant="outline")}render(){const t=s("tag",`tag--icon-position-${this.iconPosition}`,`tag--intent-${this.intent}`,`tag--size-${this.size}`,`tag--variant-${this.variant}`,{"tag--hide-label":this.hideLabel});return e(o,{key:"b37ce40ec971e4d0897d8ef34063c34dd8c4ebaa"},e("span",{key:"3bb01aeff9859f42f906c6176c23d7772641f7fc",class:t,part:"tag"},this.icon&&e("span",{key:"b08ea0453a747c487757151ce438afbfa6d24373",class:"tag__icon",innerHTML:this.icon,ref:t=>this.iconEl=t}),this.hideLabel?e("swirl-visually-hidden",null,this.label):e("span",{class:"tag__label"},this.label),this.removable&&e("button",{key:"52f12c162364a473638318e92ea765a0624757a5","aria-label":this.removalButtonLabel,class:"tag__removal-button",onClick:this.onRemove,tabIndex:"true"===this.el.ariaHidden?-1:void 0,type:"button"},e("swirl-icon-close",{key:"5f21f72e3a84e25bad909552f08804140ad23fea",size:16}))))}get el(){return this}static get style(){return":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}"}},[1,"swirl-tag",{hideLabel:[4,"hide-label"],icon:[1],iconPosition:[1,"icon-position"],intent:[1],label:[1],removable:[4],bordered:[4],size:[1],removalButtonLabel:[1,"removal-button-label"],variant:[1025]}]);function g(){"undefined"!=typeof customElements&&["swirl-tag","swirl-icon-close","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-tag":customElements.get(n(t))||customElements.define(n(t),l);break;case"swirl-icon-close":customElements.get(n(t))||i();break;case"swirl-visually-hidden":customElements.get(n(t))||c()}}))}export{l as S,g as d}
+import{proxyCustomElement as t,HTMLElement as a,createEvent as r,h as e,Host as o,transformTag as n}from"@stencil/core/internal/client";import{c as s}from"./index2.js";import{d as i}from"./swirl-icon-close2.js";import{d as c}from"./swirl-visually-hidden2.js";const l=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.removeTag=r(this,"remove",7),this.iconPosition="start",this.intent="default",this.size="m",this.removalButtonLabel="Remove",this.variant="default",this.onRemove=t=>{this.removeTag?.emit(t)}}componentDidLoad(){this.forceIconProps()}componentWillLoad(){this.forceVariant()}componentDidRender(){this.forceIconProps()}forceIconProps(){const t=this.iconEl?.children[0];t?.setAttribute("size","16")}forceVariant(){Boolean(this.bordered)&&(console.warn('[Swirl] The "bordered" prop of swirl-tag is deprecated and will be removed with the next major release. Please use the "variant" prop as "outline" to achieve the same result.'),this.variant="outline")}render(){const t=s("tag",`tag--icon-position-${this.iconPosition}`,`tag--intent-${this.intent}`,`tag--size-${this.size}`,`tag--variant-${this.variant}`,{"tag--hide-label":this.hideLabel});return e(o,{key:"89ba38f520f187bf71a2a53787396b0170e82d08"},e("span",{key:"5f81df561f687200fc57cb60b33e048e5f67e162",class:t,part:"tag"},this.icon&&e("span",{key:"c372b3910f4bf56626c661b6700813be2b45bd7a",class:"tag__icon",innerHTML:this.icon,ref:t=>this.iconEl=t}),this.hideLabel?e("swirl-visually-hidden",null,this.label):e("span",{class:"tag__label"},this.label),this.removable&&e("button",{key:"27b3617587d03aff92e0eed75e95c386e9156d16","aria-label":this.removalButtonLabel,class:"tag__removal-button",onClick:this.onRemove,tabIndex:"true"===this.el.ariaHidden?-1:void 0,type:"button"},e("swirl-icon-close",{key:"4d67258c0b7176bb0bfdc8fc3163a24373232708",size:16}))))}get el(){return this}static get style(){return":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}"}},[1,"swirl-tag",{hideLabel:[4,"hide-label"],icon:[1],iconPosition:[1,"icon-position"],intent:[1],label:[1],removable:[4],bordered:[4],size:[1],removalButtonLabel:[1,"removal-button-label"],variant:[1025]}]);function g(){"undefined"!=typeof customElements&&["swirl-tag","swirl-icon-close","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-tag":customElements.get(n(t))||customElements.define(n(t),l);break;case"swirl-icon-close":customElements.get(n(t))||i();break;case"swirl-visually-hidden":customElements.get(n(t))||c()}}))}export{l as S,g as d}

package/dist/components/swirl-text2.js

@@ -6,4 +6,4 @@ import{proxyCustomElement as t,HTMLElement as e,h as i,Host as n,transformTag as
   @author Jeff Wainwright <yowainwright@gmail.com> (jeffry.in)
   @license MIT
 **/
-function d(t){var e="function"==typeof Symbol&&t[Symbol.iterator];if(!e)return t;var i,n,s=e.call(t),o=[];try{for(;!(i=s.next()).done;)o.push(i.value)}catch(t){n={error:t}}finally{try{i&&!i.done&&(e=s.return)&&e.call(s)}finally{if(n)throw n.error}}return o}function u(t,e,i){if(2===arguments.length)for(var n,s=0,o=e.length;s<o;s++)!n&&s in e||(n||(n=Array.prototype.slice.call(e,0,s)),n[s]=e[s]);return t.concat(n||Array.prototype.slice.call(e))}const w=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.align="start",this.as="p",this.color="default",this.fontFamily="text",this.fontStyle="normal",this.responsive=!0,this.size="base",this.truncateDirection="end",this.weight="normal",this.whiteSpace="normal"}componentDidRender(){this.rebalance(),this.handleTruncation()}onWindowResize(){this.rebalance(),this.handleTruncation()}handleTruncation(){if(!this.truncate||!Boolean(this.lines)||1===this.lines)return;const t=+window.getComputedStyle(this.textEl,null).getPropertyValue("line-height").replace("px","");t>0&&function(t,e,i){if(void 0===i&&(i={}),void 0===e||isNaN(e))throw Error("maxHeight is required");var n=function(t){return"string"==typeof t?u([],d(document.querySelectorAll(t)),!1):"length"in t?u([],d(t),!1):[t]}(t);if(n.length)for(var s=i.character,o=void 0===s?"…":s,r=i.classname,a=void 0===r?"js-shave":r,l=i.spaces,c=void 0===l||l,h=i.charclassname,x=void 0===h?"js-shave-char":h,f=i.link,w=void 0===f?{}:f,g="boolean"!=typeof c||c,v=w&&"{}"!==JSON.stringify(w)&&w.href,m=v?"a":"span",p=0;p<n.length;p+=1){var b=n[p],y=b.style,z=b.querySelector("."+a),$=void 0===b.textContent?"innerText":"textContent";z&&(b.removeChild(b.querySelector("."+x)),b[$]=b[$]);var S=b[$],k=g?S.split(" "):S;if(!(k.length<2)){var M=y.height;y.height="auto";var j=y.maxHeight;if(y.maxHeight="none",b.offsetHeight<=e)y.height=M,y.maxHeight=j;else{var B=v&&w.textContent?w.textContent:o,A=document.createElement(m),E={className:x,textContent:B};for(var N in E)A[N]=E[N],A.textContent=o;if(v)for(var T in w)A[T]=w[T];for(var C=k.length-1,D=0,R=void 0;D<C;)R=D+C+1>>1,b[$]=g?k.slice(0,R).join(" "):k.slice(0,R),b.insertAdjacentElement("beforeend",A),b.offsetHeight>e?C=R-1:D=R;b[$]=g?k.slice(0,C).join(" "):k.slice(0,C),b.insertAdjacentElement("beforeend",A);var O=g?" ".concat(k.slice(C).join(" ")):k.slice(C),W=document.createTextNode(O),q=document.createElement("span");q.classList.add(a),q.style.display="none",q.appendChild(W),b.insertAdjacentElement("beforeend",q),y.height=M,y.maxHeight=j}}}}(this.textEl,t*this.lines)}rebalance(){this.balance&&Boolean(this.textEl)&&f(this.textEl)}render(){const t=this.as,e=this.truncate&&(!Boolean(this.lines)||1===this.lines),s=r("text",`text--align-${this.align}`,`text--color-${this.color}`,`text--font-family-${this.fontFamily}`,`text--font-style-${this.fontStyle}`,`text--size-${this.size}`,`text--truncate-direction-${this.truncateDirection}`,`text--weight-${this.weight}`,{"text--truncate":e,"text--responsive":this.responsive});return i(n,{key:"a207700f866a3995ec1ca55d26299b09e3d216cb"},i(t,{key:"ef4058b338624642f46c00fb09425782b41206df",class:s,ref:t=>this.textEl=t,style:{whiteSpace:e?"nowrap":this.whiteSpace}},i("slot",{key:"4b2befad804ad00197d45174ed36a68b10bcc656"})))}get el(){return this}static get style(){return".sc-swirl-text-h{display:block;max-width:100%}.sc-swirl-text-h *.sc-swirl-text{box-sizing:border-box}.text.sc-swirl-text{overflow:hidden;margin:0;padding:0}.text--align-start.sc-swirl-text{text-align:start}.text--align-center.sc-swirl-text{text-align:center}.text--align-end.sc-swirl-text{text-align:end}.text--color-default.sc-swirl-text{color:var(--s-text-default)}.text--color-disabled.sc-swirl-text{color:var(--s-text-disabled)}.text--color-highlight.sc-swirl-text{color:var(--s-text-highlight)}.text--color-on-action-primary.sc-swirl-text{color:var(--s-text-on-action-primary)}.text--color-on-image.sc-swirl-text{color:var(--s-text-on-image)}.text--color-on-status.sc-swirl-text{color:var(--s-text-on-status)}.text--color-on-surface-highlight.sc-swirl-text{color:var(--s-text-on-surface-highlight)}.text--color-on-surface-highlight-subdued.sc-swirl-text{color:var(--s-text-on-surface-highlight-subdued)}.text--color-subdued.sc-swirl-text{color:var(--s-text-subdued)}.text--color-critical.sc-swirl-text{color:var(--s-text-critical)}.text--color-success.sc-swirl-text{color:var(--s-text-success)}.text--color-warning.sc-swirl-text{color:var(--s-text-warning)}.text--size-xs.sc-swirl-text{font-size:var(--s-font-size-xs);line-height:var(--s-line-height-xs)}.text--size-sm.sc-swirl-text{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.text--size-base.sc-swirl-text{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-base.text--responsive.sc-swirl-text{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text--size-lg.sc-swirl-text{font-size:var(--s-font-size-lg);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-lg.text--responsive.sc-swirl-text{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text--size-xl.sc-swirl-text{font-size:var(--s-font-size-xl);line-height:var(--s-line-height-xl)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-xl.text--responsive.sc-swirl-text{font-size:var(--s-font-size-lg);line-height:var(--s-line-height-lg)}}.text--size-2xl.sc-swirl-text{font-size:var(--s-font-size-2xl);line-height:var(--s-line-height-2xl)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-2xl.text--responsive.sc-swirl-text{font-size:var(--s-font-size-xl);line-height:var(--s-line-height-xl)}}.text--weight-normal.sc-swirl-text{font-weight:var(--s-font-weight-normal)}.text--weight-medium.sc-swirl-text{font-weight:var(--s-font-weight-medium)}.text--weight-semibold.sc-swirl-text{font-weight:var(--s-font-weight-semibold)}.text--weight-bold.sc-swirl-text{font-weight:var(--s-font-weight-bold)}.text--font-style-normal.sc-swirl-text{font-style:normal}.text--font-style-italic.sc-swirl-text{font-style:italic}.text--font-family-code.sc-swirl-text{font-family:var(--s-font-family-code)}.text--truncate.sc-swirl-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.text--truncate-direction-start.sc-swirl-text{direction:rtl;text-align:left}"}},[262,"swirl-text",{align:[1],as:[1],balance:[4],color:[1],fontFamily:[1,"font-family"],fontStyle:[1,"font-style"],lines:[2],responsive:[4],size:[1],truncate:[4],truncateDirection:[1,"truncate-direction"],weight:[1],whiteSpace:[1,"white-space"]},[[9,"resize","onWindowResize"]]]);function g(){"undefined"!=typeof customElements&&["swirl-text"].forEach((t=>{"swirl-text"===t&&(customElements.get(s(t))||customElements.define(s(t),w))}))}export{w as S,g as d}
+function d(t){var e="function"==typeof Symbol&&t[Symbol.iterator];if(!e)return t;var i,n,s=e.call(t),o=[];try{for(;!(i=s.next()).done;)o.push(i.value)}catch(t){n={error:t}}finally{try{i&&!i.done&&(e=s.return)&&e.call(s)}finally{if(n)throw n.error}}return o}function u(t,e,i){if(2===arguments.length)for(var n,s=0,o=e.length;s<o;s++)!n&&s in e||(n||(n=Array.prototype.slice.call(e,0,s)),n[s]=e[s]);return t.concat(n||Array.prototype.slice.call(e))}const w=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.align="start",this.as="p",this.color="default",this.fontFamily="text",this.fontStyle="normal",this.responsive=!0,this.size="base",this.truncateDirection="end",this.weight="normal",this.whiteSpace="normal"}componentDidRender(){this.rebalance(),this.handleTruncation()}onWindowResize(){this.rebalance(),this.handleTruncation()}handleTruncation(){if(!this.truncate||!Boolean(this.lines)||1===this.lines)return;const t=+window.getComputedStyle(this.textEl,null).getPropertyValue("line-height").replace("px","");t>0&&function(t,e,i){if(void 0===i&&(i={}),void 0===e||isNaN(e))throw Error("maxHeight is required");var n=function(t){return"string"==typeof t?u([],d(document.querySelectorAll(t)),!1):"length"in t?u([],d(t),!1):[t]}(t);if(n.length)for(var s=i.character,o=void 0===s?"…":s,r=i.classname,a=void 0===r?"js-shave":r,l=i.spaces,c=void 0===l||l,h=i.charclassname,x=void 0===h?"js-shave-char":h,f=i.link,w=void 0===f?{}:f,g="boolean"!=typeof c||c,v=w&&"{}"!==JSON.stringify(w)&&w.href,m=v?"a":"span",p=0;p<n.length;p+=1){var b=n[p],y=b.style,z=b.querySelector("."+a),$=void 0===b.textContent?"innerText":"textContent";z&&(b.removeChild(b.querySelector("."+x)),b[$]=b[$]);var S=b[$],k=g?S.split(" "):S;if(!(k.length<2)){var M=y.height;y.height="auto";var j=y.maxHeight;if(y.maxHeight="none",b.offsetHeight<=e)y.height=M,y.maxHeight=j;else{var B=v&&w.textContent?w.textContent:o,A=document.createElement(m),E={className:x,textContent:B};for(var N in E)A[N]=E[N],A.textContent=o;if(v)for(var T in w)A[T]=w[T];for(var C=k.length-1,D=0,R=void 0;D<C;)R=D+C+1>>1,b[$]=g?k.slice(0,R).join(" "):k.slice(0,R),b.insertAdjacentElement("beforeend",A),b.offsetHeight>e?C=R-1:D=R;b[$]=g?k.slice(0,C).join(" "):k.slice(0,C),b.insertAdjacentElement("beforeend",A);var O=g?" ".concat(k.slice(C).join(" ")):k.slice(C),W=document.createTextNode(O),q=document.createElement("span");q.classList.add(a),q.style.display="none",q.appendChild(W),b.insertAdjacentElement("beforeend",q),y.height=M,y.maxHeight=j}}}}(this.textEl,t*this.lines)}rebalance(){this.balance&&Boolean(this.textEl)&&f(this.textEl)}render(){const t=this.as,e=this.truncate&&(!Boolean(this.lines)||1===this.lines),s=r("text",`text--align-${this.align}`,`text--color-${this.color}`,`text--font-family-${this.fontFamily}`,`text--font-style-${this.fontStyle}`,`text--size-${this.size}`,`text--truncate-direction-${this.truncateDirection}`,`text--weight-${this.weight}`,{"text--truncate":e,"text--responsive":this.responsive});return i(n,{key:"baf8175c29c018ad991098c2e764057085e2acbd"},i(t,{key:"c56bb801fc8c0e745144e61500c15afa3151043d",class:s,ref:t=>this.textEl=t,style:{whiteSpace:e?"nowrap":this.whiteSpace}},i("slot",{key:"02cad27030cf03b3231e0e495b58c9393fbdda8c"})))}get el(){return this}static get style(){return".sc-swirl-text-h{display:block;max-width:100%}.sc-swirl-text-h *.sc-swirl-text{box-sizing:border-box}.text.sc-swirl-text{overflow:hidden;margin:0;padding:0}.text--align-start.sc-swirl-text{text-align:start}.text--align-center.sc-swirl-text{text-align:center}.text--align-end.sc-swirl-text{text-align:end}.text--color-default.sc-swirl-text{color:var(--s-text-default)}.text--color-disabled.sc-swirl-text{color:var(--s-text-disabled)}.text--color-highlight.sc-swirl-text{color:var(--s-text-highlight)}.text--color-on-action-primary.sc-swirl-text{color:var(--s-text-on-action-primary)}.text--color-on-image.sc-swirl-text{color:var(--s-text-on-image)}.text--color-on-status.sc-swirl-text{color:var(--s-text-on-status)}.text--color-on-surface-highlight.sc-swirl-text{color:var(--s-text-on-surface-highlight)}.text--color-on-surface-highlight-subdued.sc-swirl-text{color:var(--s-text-on-surface-highlight-subdued)}.text--color-subdued.sc-swirl-text{color:var(--s-text-subdued)}.text--color-critical.sc-swirl-text{color:var(--s-text-critical)}.text--color-success.sc-swirl-text{color:var(--s-text-success)}.text--color-warning.sc-swirl-text{color:var(--s-text-warning)}.text--size-xs.sc-swirl-text{font-size:var(--s-font-size-xs);line-height:var(--s-line-height-xs)}.text--size-sm.sc-swirl-text{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.text--size-base.sc-swirl-text{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-base.text--responsive.sc-swirl-text{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text--size-lg.sc-swirl-text{font-size:var(--s-font-size-lg);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-lg.text--responsive.sc-swirl-text{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text--size-xl.sc-swirl-text{font-size:var(--s-font-size-xl);line-height:var(--s-line-height-xl)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-xl.text--responsive.sc-swirl-text{font-size:var(--s-font-size-lg);line-height:var(--s-line-height-lg)}}.text--size-2xl.sc-swirl-text{font-size:var(--s-font-size-2xl);line-height:var(--s-line-height-2xl)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-2xl.text--responsive.sc-swirl-text{font-size:var(--s-font-size-xl);line-height:var(--s-line-height-xl)}}.text--weight-normal.sc-swirl-text{font-weight:var(--s-font-weight-normal)}.text--weight-medium.sc-swirl-text{font-weight:var(--s-font-weight-medium)}.text--weight-semibold.sc-swirl-text{font-weight:var(--s-font-weight-semibold)}.text--weight-bold.sc-swirl-text{font-weight:var(--s-font-weight-bold)}.text--font-style-normal.sc-swirl-text{font-style:normal}.text--font-style-italic.sc-swirl-text{font-style:italic}.text--font-family-code.sc-swirl-text{font-family:var(--s-font-family-code)}.text--truncate.sc-swirl-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.text--truncate-direction-start.sc-swirl-text{direction:rtl;text-align:left}"}},[262,"swirl-text",{align:[1],as:[1],balance:[4],color:[1],fontFamily:[1,"font-family"],fontStyle:[1,"font-style"],lines:[2],responsive:[4],size:[1],truncate:[4],truncateDirection:[1,"truncate-direction"],weight:[1],whiteSpace:[1,"white-space"]},[[9,"resize","onWindowResize"]]]);function g(){"undefined"!=typeof customElements&&["swirl-text"].forEach((t=>{"swirl-text"===t&&(customElements.get(s(t))||customElements.define(s(t),w))}))}export{w as S,g as d}

package/dist/components/swirl-thumbnail.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Host as a,transformTag as o}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{d as n}from"./swirl-action-list2.js";import{d as l}from"./swirl-action-list-item2.js";import{d as c}from"./swirl-button2.js";import{d as b}from"./swirl-button-group2.js";import{d as m}from"./swirl-icon-error2.js";import{d as h}from"./swirl-icon-more-horizontal2.js";import{d as u}from"./swirl-popover2.js";import{d}from"./swirl-popover-trigger2.js";import{d as p}from"./swirl-progress-indicator2.js";import{d as f}from"./swirl-stack2.js";const w=["s","m","l"],v=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.edit=e(this,"edit",7),this.removeThumbnail=e(this,"remove",7),this.thumbnailClick=e(this,"thumbnailClick",7),this.cursor="pointer",this.editButtonIcon="<swirl-icon-crop></swirl-icon-crop>",this.editButtonLabel="Edit",this.format="landscape",this.menuButtonLabel="More actions",this.openButtonIcon="<swirl-icon-visibility></swirl-icon-visibility>",this.openButtonLabel="Open",this.progressLabel="Loading progress",this.removeButtonIcon="<swirl-icon-delete></swirl-icon-delete>",this.removeButtonLabel="Remove",this.size="m",this.hasHover=!0,this.onEditClick=i=>{this.edit.emit(i),this.popoverEl?.close()},this.onOpenClick=i=>{this.thumbnailClick.emit(i),this.popoverEl?.close()},this.onRemoveClick=i=>{this.removeThumbnail.emit(i),this.popoverEl?.close()},this.onHoverChange=i=>{this.hasHover=i.matches}}connectedCallback(){"undefined"!=typeof window&&window.matchMedia&&(this.hoverMediaQuery=window.matchMedia("(hover: hover)"),this.hasHover=this.hoverMediaQuery.matches,this.hoverMediaQuery.addEventListener?.("change",this.onHoverChange))}disconnectedCallback(){this.hoverMediaQuery?.removeEventListener?.("change",this.onHoverChange),this.hoverMediaQuery=void 0}componentDidRender(){this.popoverTriggerEl&&this.popoverEl&&(this.popoverTriggerEl.swirlPopover=this.popoverEl)}render(){const i=w.includes(this.size),t=void 0!==this.progress,e=!!this.error,o=t&&!e,n=!!this.showEditButton,l=!!this.showRemoveButton,c=n||l,b=!this.hasHover&&c,m=i&&this.hasHover&&n&&l,h=i&&this.hasHover&&n&&!l,u=i&&this.hasHover&&l&&!n,d=!i&&this.hasHover&&c,p=m||b,f=b&&this.interactive,v=!!this.timestamp&&"s"!==this.size,g=t&&i,_=this.interactive||b,k=_?"button":"span",y=r("thumbnail","thumbnail--format-"+this.format,"thumbnail--size-"+this.size,{"thumbnail--interactive":this.interactive,"thumbnail--uploading-bar":t&&!i}),z=s(k,{key:"b8e3a39b8ece3cce36aad84edc789b660f42adf3",class:"thumbnail__image-wrapper",onClick:b?void 0:this.thumbnailClick.emit,style:_&&"pointer"!==this.cursor?{cursor:this.cursor}:void 0,type:_?"button":void 0},s("img",{key:"57cb6479e80e11da6cb034348e125850c98a2abc",alt:this.alt,class:"thumbnail__image",loading:"lazy",src:this.src}));return s(a,{key:"11545ed39393b774ce489ea845ec36d58564b87b"},s("span",{key:"9799c6daf25ecffa433d4ab5b6551abec84c90d1",class:y,role:"group"},b?s("swirl-popover-trigger",{ref:i=>this.popoverTriggerEl=i,swirlPopover:this.popoverEl},z):z,o&&s("span",{key:"e96161e800a3fb4a9f5baa7c59b45e30bc55643b",class:i?"thumbnail__uploading-overlay":"thumbnail__progress-indicator"},s("swirl-progress-indicator",{key:"83b369212a42fd5b587c2532db65d40314c21873",label:this.progressLabel,size:i?"s":void 0,value:this.progress,variant:i?"circle":void 0})),e&&s("span",{key:"f287f7dbe6e05dcf4f3a8b87231475cc99011daf",class:"thumbnail__error"},s("swirl-icon-error",{key:"19cbfe6562cb0e95494c32405375613c78aa0dcd",color:"critical"})),d&&s("swirl-button-group",{key:"1e0fac89a5ec3a740c0cc4d8b48db8b9d262777b",class:"thumbnail__buttons",segmented:n&&l},n&&s("span",{key:"0201b2ab186c571d36f341ee481c5c703c703924"},s("swirl-button",{key:"1f4225dcae429e39de7c7926d54efecdd14c9ec3",hideLabel:!0,icon:this.editButtonIcon,label:this.editButtonLabel,onClick:this.edit.emit,variant:"on-image"})),l&&s("span",{key:"ad6c68242c5ecf71a5cc1a6033a1d50249c0686d"},s("swirl-button",{key:"7780aedcc53ffdc41c5c753ae1d47a064a16c5e6",hideLabel:!0,icon:this.removeButtonIcon,label:this.removeButtonLabel,onClick:this.removeThumbnail.emit,variant:"on-image"}))),(h||u)&&s("span",{key:"b637c8893afadb884f167601b7858e92c13f7981",class:"thumbnail__compact-action"},s("button",{key:"1b9fbe19a5ccbd8e5f59d6cb60898a6756a9fe72","aria-label":h?this.editButtonLabel:this.removeButtonLabel,class:"thumbnail__compact-button",onClick:h?this.edit.emit:this.removeThumbnail.emit,type:"button"},s("span",{key:"08fdcd72d0a5eb77c0c187da244ad719be95b540",innerHTML:h?this.editButtonIcon:this.removeButtonIcon,ref:i=>i?.children[0]?.setAttribute("size","20")}))),m&&s("span",{key:"f3ab50ab63824e04398b9db2c04b4fbfc783d39e",class:"thumbnail__compact-action"},s("swirl-popover-trigger",{key:"7fd9cc2398aa828d343ef32f78a0b73dc270fdf1",ref:i=>this.popoverTriggerEl=i,swirlPopover:this.popoverEl},s("button",{key:"a3974c28b50c23fbaa46468ef087c59c070a9ca1","aria-label":this.menuButtonLabel,class:"thumbnail__compact-button",type:"button"},s("swirl-icon-more-horizontal",{key:"8f6ef9edaf11cbefdd8b090e812a4a0c39fed01b",size:20})))),p&&s("swirl-popover",{key:"7b58a97d8a74066075cc81b67c55822e6f3dfdf3",label:this.menuButtonLabel,placement:"bottom-end",padded:!1,ref:i=>this.popoverEl=i},s("swirl-action-list",{key:"1fe44385c4f22672a4e80f6d47679a1729323181"},f&&s("swirl-action-list-item",{key:"f1d21f491fa80c1195a14e45e61527b547703373",icon:this.openButtonIcon,label:this.openButtonLabel,onClick:this.onOpenClick}),n&&s("swirl-action-list-item",{key:"d564e0635e91bce637032bf7c25fb0200a968bb2",icon:this.editButtonIcon,label:this.editButtonLabel,onClick:this.onEditClick}),l&&s("swirl-action-list-item",{key:"2e256383292c83e44540181ae98f334f13b56d03",icon:this.removeButtonIcon,intent:"critical",label:this.removeButtonLabel,onClick:this.onRemoveClick}))),v&&!g&&s("span",{key:"f85ffaf9a1e54f4a3aa2fee859ef44b719ddba51",class:"thumbnail__timestamp"},this.timestamp)))}static get style(){return':host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;border-radius:var(--s-border-radius-s)}.thumbnail--size-s{--swirl-thumbnail-size:2.5rem;--swirl-thumbnail-compact-button-size:1.5rem}.thumbnail--size-m{--swirl-thumbnail-size:3rem;--swirl-thumbnail-compact-button-size:1.5rem}.thumbnail--size-l{--swirl-thumbnail-size:4rem;--swirl-thumbnail-compact-button-size:1.5rem}.thumbnail--size-xl{--swirl-thumbnail-size:5.5rem;--swirl-thumbnail-compact-button-size:1.75rem;border-radius:var(--s-border-radius-sm)}.thumbnail--size-2xl{--swirl-thumbnail-size:7.5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--format-landscape{width:var(--swirl-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-portrait{height:var(--swirl-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-square{width:var(--swirl-thumbnail-size);height:var(--swirl-thumbnail-size)}.thumbnail--uploading-bar .thumbnail__timestamp{bottom:var(--s-space-8)}.thumbnail__image-wrapper{position:relative;overflow:hidden;width:100%;height:100%;padding:0;border:none;border-radius:inherit;background-color:transparent;box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail__image-wrapper:focus:not(:focus-visible){outline:none}.thumbnail__image-wrapper:focus-visible{outline:0.125rem solid var(--s-focus-default);outline-offset:calc(-1 * 0.125rem)}.thumbnail--interactive .thumbnail__image-wrapper{cursor:pointer}.thumbnail--interactive .thumbnail__image-wrapper:hover:after{position:absolute;background-color:rgba(0, 0, 0, 0.15);content:"";inset:0}.thumbnail--interactive .thumbnail__image-wrapper:active:after{position:absolute;background-color:rgba(0, 0, 0, 0.3);content:"";inset:0}.thumbnail__image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.thumbnail__progress-indicator,.thumbnail__uploading-overlay{position:absolute;z-index:1;right:0;bottom:0;left:0}.thumbnail__uploading-overlay{inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--s-surface-on-image-default)}.thumbnail__error{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--s-surface-on-image-default)}.thumbnail__buttons{position:absolute;z-index:1;top:var(--s-space-4);right:var(--s-space-4)}.thumbnail__compact-action{position:absolute;z-index:2;top:0;right:0}.thumbnail__compact-button{width:var(--swirl-thumbnail-compact-button-size, 1.5rem);height:var(--swirl-thumbnail-compact-button-size, 1.5rem);padding:0;border:none;border-bottom-left-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default);cursor:pointer}.thumbnail__compact-button:focus:not(:focus-visible){outline:none}.thumbnail__compact-button:focus-visible{outline:0.125rem solid var(--s-focus-default);outline-offset:calc(-1 * 0.125rem)}.thumbnail__buttons,.thumbnail__compact-action{opacity:0}.thumbnail:hover .thumbnail__buttons,.thumbnail:hover .thumbnail__compact-action,.thumbnail:focus-within .thumbnail__buttons,.thumbnail:focus-within .thumbnail__compact-action{opacity:1}.thumbnail__timestamp{position:absolute;z-index:1;bottom:0;left:0;display:block;overflow:hidden;max-width:calc(100% - 2 * var(--s-space-4));height:1.25rem;padding-right:var(--s-space-4);padding-left:var(--s-space-4);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default);font-size:var(--s-font-size-sm);line-height:1.25rem;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}'}},[1,"swirl-thumbnail",{alt:[1],cursor:[1],editButtonIcon:[1,"edit-button-icon"],editButtonLabel:[1,"edit-button-label"],error:[4],format:[1],interactive:[4],menuButtonLabel:[1,"menu-button-label"],openButtonIcon:[1,"open-button-icon"],openButtonLabel:[1,"open-button-label"],progress:[2],progressLabel:[1,"progress-label"],removeButtonIcon:[1,"remove-button-icon"],removeButtonLabel:[1,"remove-button-label"],showEditButton:[4,"show-edit-button"],showRemoveButton:[4,"show-remove-button"],size:[1],src:[1],timestamp:[1],hasHover:[32]}]),g=v,_=function(){"undefined"!=typeof customElements&&["swirl-thumbnail","swirl-action-list","swirl-action-list-item","swirl-button","swirl-button-group","swirl-icon-error","swirl-icon-more-horizontal","swirl-popover","swirl-popover-trigger","swirl-progress-indicator","swirl-stack"].forEach((i=>{switch(i){case"swirl-thumbnail":customElements.get(o(i))||customElements.define(o(i),v);break;case"swirl-action-list":customElements.get(o(i))||n();break;case"swirl-action-list-item":customElements.get(o(i))||l();break;case"swirl-button":customElements.get(o(i))||c();break;case"swirl-button-group":customElements.get(o(i))||b();break;case"swirl-icon-error":customElements.get(o(i))||m();break;case"swirl-icon-more-horizontal":customElements.get(o(i))||h();break;case"swirl-popover":customElements.get(o(i))||u();break;case"swirl-popover-trigger":customElements.get(o(i))||d();break;case"swirl-progress-indicator":customElements.get(o(i))||p();break;case"swirl-stack":customElements.get(o(i))||f()}}))};export{g as SwirlThumbnail,_ as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Host as a,transformTag as o}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{d as n}from"./swirl-action-list2.js";import{d as l}from"./swirl-action-list-item2.js";import{d as c}from"./swirl-button2.js";import{d as b}from"./swirl-button-group2.js";import{d as m}from"./swirl-icon-error2.js";import{d as h}from"./swirl-icon-more-horizontal2.js";import{d as u}from"./swirl-popover2.js";import{d}from"./swirl-popover-trigger2.js";import{d as p}from"./swirl-progress-indicator2.js";import{d as f}from"./swirl-stack2.js";const w=["s","m","l"],v=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.edit=e(this,"edit",7),this.removeThumbnail=e(this,"remove",7),this.thumbnailClick=e(this,"thumbnailClick",7),this.cursor="pointer",this.editButtonIcon="<swirl-icon-crop></swirl-icon-crop>",this.editButtonLabel="Edit",this.format="landscape",this.menuButtonLabel="More actions",this.openButtonIcon="<swirl-icon-visibility></swirl-icon-visibility>",this.openButtonLabel="Open",this.progressLabel="Loading progress",this.removeButtonIcon="<swirl-icon-delete></swirl-icon-delete>",this.removeButtonLabel="Remove",this.size="m",this.hasHover=!0,this.onEditClick=i=>{this.edit.emit(i),this.popoverEl?.close()},this.onOpenClick=i=>{this.thumbnailClick.emit(i),this.popoverEl?.close()},this.onRemoveClick=i=>{this.removeThumbnail.emit(i),this.popoverEl?.close()},this.onHoverChange=i=>{this.hasHover=i.matches}}connectedCallback(){"undefined"!=typeof window&&window.matchMedia&&(this.hoverMediaQuery=window.matchMedia("(hover: hover)"),this.hasHover=this.hoverMediaQuery.matches,this.hoverMediaQuery.addEventListener?.("change",this.onHoverChange))}disconnectedCallback(){this.hoverMediaQuery?.removeEventListener?.("change",this.onHoverChange),this.hoverMediaQuery=void 0}componentDidRender(){this.popoverTriggerEl&&this.popoverEl&&(this.popoverTriggerEl.swirlPopover=this.popoverEl)}render(){const i=w.includes(this.size),t=void 0!==this.progress,e=!!this.error,o=t&&!e,n=!!this.showEditButton,l=!!this.showRemoveButton,c=n||l,b=!this.hasHover&&c,m=i&&this.hasHover&&n&&l,h=i&&this.hasHover&&n&&!l,u=i&&this.hasHover&&l&&!n,d=!i&&this.hasHover&&c,p=m||b,f=b&&this.interactive,v=!!this.timestamp&&"s"!==this.size,g=t&&i,_=this.interactive||b,k=_?"button":"span",y=r("thumbnail","thumbnail--format-"+this.format,"thumbnail--size-"+this.size,{"thumbnail--interactive":this.interactive,"thumbnail--uploading-bar":t&&!i}),z=s(k,{key:"60ae7147652152c4d3494f130c7e41358ee3013d",class:"thumbnail__image-wrapper",onClick:b?void 0:this.thumbnailClick.emit,style:_&&"pointer"!==this.cursor?{cursor:this.cursor}:void 0,type:_?"button":void 0},s("img",{key:"5a37a6930046e0cfd260fa8d84cbb5e575cfa628",alt:this.alt,class:"thumbnail__image",loading:"lazy",src:this.src}));return s(a,{key:"4c88680e632905de35436902389a3bd5bfbc4cf1"},s("span",{key:"559168a938b8029443a40e53eca8f3eb49a27078",class:y,role:"group"},b?s("swirl-popover-trigger",{ref:i=>this.popoverTriggerEl=i,swirlPopover:this.popoverEl},z):z,o&&s("span",{key:"898f056cf1aa60b223cd6c11219ae0ff6653220f",class:i?"thumbnail__uploading-overlay":"thumbnail__progress-indicator"},s("swirl-progress-indicator",{key:"7af3e81b35b5a0f0285a826c1adafe8e6ed07a4f",label:this.progressLabel,size:i?"s":void 0,value:this.progress,variant:i?"circle":void 0})),e&&s("span",{key:"1972d9700e8bb4d4a9a8aad41f5cdc50dcdc421e",class:"thumbnail__error"},s("swirl-icon-error",{key:"b0cccb68b2dbbbf4337709c7255e03ce700b821c",color:"critical"})),d&&s("swirl-button-group",{key:"bbe13e53cc2eca57569dad7a4951d49fff588a97",class:"thumbnail__buttons",segmented:n&&l},n&&s("span",{key:"db12057d2e9a4e480c8d54f9ace810fab31c12b2"},s("swirl-button",{key:"2e7ed3a7bde8483187742846d1f98ed0a2be9e54",hideLabel:!0,icon:this.editButtonIcon,label:this.editButtonLabel,onClick:this.edit.emit,variant:"on-image"})),l&&s("span",{key:"bfbf412240887830c485f7d183a1ddfb250d6763"},s("swirl-button",{key:"7a4dc4dc1aa852c3063ab759c8a670c856047568",hideLabel:!0,icon:this.removeButtonIcon,label:this.removeButtonLabel,onClick:this.removeThumbnail.emit,variant:"on-image"}))),(h||u)&&s("span",{key:"61750d19da3e0e5fd00dd1e04d3bf44847fa3ca5",class:"thumbnail__compact-action"},s("button",{key:"c2563e951910b12abf05739b2e1025f946cd9974","aria-label":h?this.editButtonLabel:this.removeButtonLabel,class:"thumbnail__compact-button",onClick:h?this.edit.emit:this.removeThumbnail.emit,type:"button"},s("span",{key:"9a7a590941c758b59ff8436a85d4ea26732736fc",innerHTML:h?this.editButtonIcon:this.removeButtonIcon,ref:i=>i?.children[0]?.setAttribute("size","20")}))),m&&s("span",{key:"fc786e89ae96af8d93394224bc2711e2014e566a",class:"thumbnail__compact-action"},s("swirl-popover-trigger",{key:"b556f7ef29ec9fc72f53855f43b9c6a08072f091",ref:i=>this.popoverTriggerEl=i,swirlPopover:this.popoverEl},s("button",{key:"fbffe9108cd8cb624666d5f437e9ad7228ed1d31","aria-label":this.menuButtonLabel,class:"thumbnail__compact-button",type:"button"},s("swirl-icon-more-horizontal",{key:"5435df18ee3ff8c61cfd65712d7e906af6364033",size:20})))),p&&s("swirl-popover",{key:"3124b6fbfdf5611f0c78e4e7c2b11d6306f838f1",label:this.menuButtonLabel,placement:"bottom-end",padded:!1,ref:i=>this.popoverEl=i},s("swirl-action-list",{key:"b2be077864a5b950fdfa6e684a30c70c016fe07d"},f&&s("swirl-action-list-item",{key:"f93f14869d993397aac82cc4e12be11434bf0c28",icon:this.openButtonIcon,label:this.openButtonLabel,onClick:this.onOpenClick}),n&&s("swirl-action-list-item",{key:"dae9af6670af5dfbd07c1bc2a805d905e145fb81",icon:this.editButtonIcon,label:this.editButtonLabel,onClick:this.onEditClick}),l&&s("swirl-action-list-item",{key:"a24b8112005df2ce84f0fe72d03914892fb4c6dd",icon:this.removeButtonIcon,intent:"critical",label:this.removeButtonLabel,onClick:this.onRemoveClick}))),v&&!g&&s("span",{key:"ea94af6c272abf1595a3e77cc52f61d275dad7ea",class:"thumbnail__timestamp"},this.timestamp)))}static get style(){return':host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;border-radius:var(--s-border-radius-s)}.thumbnail--size-s{--swirl-thumbnail-size:2.5rem;--swirl-thumbnail-compact-button-size:1.5rem}.thumbnail--size-m{--swirl-thumbnail-size:3rem;--swirl-thumbnail-compact-button-size:1.5rem}.thumbnail--size-l{--swirl-thumbnail-size:4rem;--swirl-thumbnail-compact-button-size:1.5rem}.thumbnail--size-xl{--swirl-thumbnail-size:5.5rem;--swirl-thumbnail-compact-button-size:1.75rem;border-radius:var(--s-border-radius-sm)}.thumbnail--size-2xl{--swirl-thumbnail-size:7.5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--format-landscape{width:var(--swirl-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-portrait{height:var(--swirl-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-square{width:var(--swirl-thumbnail-size);height:var(--swirl-thumbnail-size)}.thumbnail--uploading-bar .thumbnail__timestamp{bottom:var(--s-space-8)}.thumbnail__image-wrapper{position:relative;overflow:hidden;width:100%;height:100%;padding:0;border:none;border-radius:inherit;background-color:transparent;box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail__image-wrapper:focus:not(:focus-visible){outline:none}.thumbnail__image-wrapper:focus-visible{outline:0.125rem solid var(--s-focus-default);outline-offset:calc(-1 * 0.125rem)}.thumbnail--interactive .thumbnail__image-wrapper{cursor:pointer}.thumbnail--interactive .thumbnail__image-wrapper:hover:after{position:absolute;background-color:rgba(0, 0, 0, 0.15);content:"";inset:0}.thumbnail--interactive .thumbnail__image-wrapper:active:after{position:absolute;background-color:rgba(0, 0, 0, 0.3);content:"";inset:0}.thumbnail__image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.thumbnail__progress-indicator,.thumbnail__uploading-overlay{position:absolute;z-index:1;right:0;bottom:0;left:0}.thumbnail__uploading-overlay{inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--s-surface-on-image-default)}.thumbnail__error{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--s-surface-on-image-default)}.thumbnail__buttons{position:absolute;z-index:1;top:var(--s-space-4);right:var(--s-space-4)}.thumbnail__compact-action{position:absolute;z-index:2;top:0;right:0}.thumbnail__compact-button{width:var(--swirl-thumbnail-compact-button-size, 1.5rem);height:var(--swirl-thumbnail-compact-button-size, 1.5rem);padding:0;border:none;border-bottom-left-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default);cursor:pointer}.thumbnail__compact-button:focus:not(:focus-visible){outline:none}.thumbnail__compact-button:focus-visible{outline:0.125rem solid var(--s-focus-default);outline-offset:calc(-1 * 0.125rem)}.thumbnail__buttons,.thumbnail__compact-action{opacity:0}.thumbnail:hover .thumbnail__buttons,.thumbnail:hover .thumbnail__compact-action,.thumbnail:focus-within .thumbnail__buttons,.thumbnail:focus-within .thumbnail__compact-action{opacity:1}.thumbnail__timestamp{position:absolute;z-index:1;bottom:0;left:0;display:block;overflow:hidden;max-width:calc(100% - 2 * var(--s-space-4));height:1.25rem;padding-right:var(--s-space-4);padding-left:var(--s-space-4);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default);font-size:var(--s-font-size-sm);line-height:1.25rem;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}'}},[1,"swirl-thumbnail",{alt:[1],cursor:[1],editButtonIcon:[1,"edit-button-icon"],editButtonLabel:[1,"edit-button-label"],error:[4],format:[1],interactive:[4],menuButtonLabel:[1,"menu-button-label"],openButtonIcon:[1,"open-button-icon"],openButtonLabel:[1,"open-button-label"],progress:[2],progressLabel:[1,"progress-label"],removeButtonIcon:[1,"remove-button-icon"],removeButtonLabel:[1,"remove-button-label"],showEditButton:[4,"show-edit-button"],showRemoveButton:[4,"show-remove-button"],size:[1],src:[1],timestamp:[1],hasHover:[32]}]),g=v,_=function(){"undefined"!=typeof customElements&&["swirl-thumbnail","swirl-action-list","swirl-action-list-item","swirl-button","swirl-button-group","swirl-icon-error","swirl-icon-more-horizontal","swirl-popover","swirl-popover-trigger","swirl-progress-indicator","swirl-stack"].forEach((i=>{switch(i){case"swirl-thumbnail":customElements.get(o(i))||customElements.define(o(i),v);break;case"swirl-action-list":customElements.get(o(i))||n();break;case"swirl-action-list-item":customElements.get(o(i))||l();break;case"swirl-button":customElements.get(o(i))||c();break;case"swirl-button-group":customElements.get(o(i))||b();break;case"swirl-icon-error":customElements.get(o(i))||m();break;case"swirl-icon-more-horizontal":customElements.get(o(i))||h();break;case"swirl-popover":customElements.get(o(i))||u();break;case"swirl-popover-trigger":customElements.get(o(i))||d();break;case"swirl-progress-indicator":customElements.get(o(i))||p();break;case"swirl-stack":customElements.get(o(i))||f()}}))};export{g as SwirlThumbnail,_ as defineCustomElement}

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

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

package/dist/components/swirl-toast2.js

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

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

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

package/dist/components/swirl-toolbar.js

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

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

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as i,createEvent as t,forceUpdate as r,h as s,Host as o,Fragment as n,transformTag as a}from"@stencil/core/internal/client";import{c as d}from"./index2.js";import{S as h}from"./sortable.esm.js";import{t as l}from"./swirl-tree-view.config.js";import{d as c}from"./swirl-icon2.js";import{d as m}from"./swirl-icon-chevron-right2.js";import{d as v}from"./swirl-icon-drag-handle2.js";import{d as w}from"./swirl-icon-expand-more2.js";const p=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.dropTreeViewItem=t(this,"dropTreeViewItem",7),this.expandedChange=t(this,"expandedChange",7),this.itemSelected=t(this,"itemSelected",7),this.startKeyboardMoveEvent=t(this,"startKeyboardMove",7),this.endKeyboardMoveEvent=t(this,"endKeyboardMove",7),this.keyboardMoveEvent=t(this,"keyboardMove",7),this.expandable=!0,this.cannotKeyboardDropInCurrentPosition=!1,this.dragDropItemSelector="swirl-tree-view-item",this.enableDragDrop=!1,this.expanded=!1,this.level=0,this.movingViaKeyboard=!1,this.selected=!1,this.onFocus=()=>{this.selected||"tree"!==this.getSemantics()||this.select()},this.onKeyDown=e=>{if("Space"===e.code)return e.preventDefault(),void this.toggleKeyboardMove();this.movingViaKeyboard&&("ArrowDown"===e.code?(e.preventDefault(),e.stopPropagation(),this.moveItem("down")):"ArrowUp"===e.code&&(e.preventDefault(),e.stopPropagation(),this.moveItem("up")))},this.onClickCollapse=e=>{e.preventDefault(),e.stopPropagation(),this.collapse()},this.onClickExpand=e=>{e.preventDefault(),e.stopPropagation(),this.expand()}}componentWillLoad(){this.updateLevel();const e=this.el.closest("swirl-tree-view");this.enableDragDrop=e?.enableDragDrop,this.canDrop=e?.canDrop,this.dragDropItemSelector=e?.dragDropItemSelector}componentDidLoad(){this.setUpDragDrop()}async expand(){!this.expanded&&this.expandable&&"tree"===this.getSemantics()&&(this.expanded=!0,this.expandedChange.emit(this.expanded))}async collapse(){this.expanded&&this.expandable&&"tree"===this.getSemantics()&&(this.expanded=!1,this.expandedChange.emit(this.expanded))}async select(e){"tree"===this.getSemantics()&&(this.selected=!0,e&&this.link?.focus(),this.itemSelected.emit(this.el))}async unselect(){"tree"===this.getSemantics()&&(this.selected=!1)}setUpDragDrop(){this.sortable&&(this.sortable.destroy(),this.sortable=void 0),this.enableDragDrop&&this.childList&&(this.sortable=new h(this.childList,{...l,draggable:this.dragDropItemSelector,onMove:e=>"function"!=typeof this.canDrop||this.canDrop({parentId:e.to.closest("swirl-tree-view-item")?.itemId,position:Math.max(Array.from(e.to.children).indexOf(e.related),0)}),onStart:e=>{l.onStart?.(e)},onEnd:e=>{e.stopPropagation(),l.onEnd?.(e);const{from:i,to:t,newIndex:r,oldIndex:s,item:o}=e,n=i.closest("swirl-tree-view-item")?.itemId,a=t.closest("swirl-tree-view-item")?.itemId;this.dropTreeViewItem.emit({newIndex:r,oldIndex:s,item:o,itemId:o.id??o.querySelector(":scope > swirl-tree-view-item").id,newNextSiblingItemId:r<t.children.length-1?t.children[r+1].id:void 0,newPrevSiblingItemId:r>0?t.children[r-1].id:void 0,sourceParentItemId:n,targetParentItemId:a})}}))}updateLevel(){let e=this.el.parentElement?.closest("swirl-tree-view-item");for(;e;)this.level+=1,e=e.parentElement?.closest("swirl-tree-view-item")}getItemContext(){const e=this.getParentTreeViewItem()??this.el.closest("swirl-tree-view"),i=Array.from(e.querySelectorAll(`\n        :scope > .tree-view-item > .tree-view-item__children > ${this.dragDropItemSelector},\n        :scope > .tree-view > ${this.dragDropItemSelector}\n      `));return{canDrop:!this.cannotKeyboardDropInCurrentPosition,parent:e,position:i.indexOf(this.el),siblingCount:i.length}}getParentItem(){return this.getElementToMove().parentElement.closest(this.dragDropItemSelector)}getParentTreeViewItem(){return this.el.parentElement.closest("swirl-tree-view-item")}getElementToMove(){return this.dragDropItemSelector?this.el.closest(this.dragDropItemSelector):this.el}getKeyboardMoveEventData(){const{canDrop:e,parent:i,position:t,siblingCount:r}=this.getItemContext();if(i)return{canDrop:e,parentLabel:i.label,childrenCount:r,itemLabel:this.label,position:t}}toggleKeyboardMove(){this.movingViaKeyboard?this.endKeyboardMove():this.startKeyboardMove()}endKeyboardMove(){const{parent:e,position:i}=this.getItemContext();if("function"==typeof this.canDrop&&!this.canDrop({parentId:e.id,position:i}))return;this.movingViaKeyboard=!1;const t=this.getKeyboardMoveEventData();t&&(this.endKeyboardMoveEvent.emit(t),this.dropTreeViewItem.emit({item:this.getElementToMove(),itemId:this.itemId,newIndex:i,oldIndex:this.positionBeforeKeyboardMove.position,newNextSiblingItemId:t.position<t.childrenCount-1?this.getElementToMove().nextElementSibling?.id:void 0,newPrevSiblingItemId:t.position>0?this.getElementToMove().previousElementSibling?.id:void 0,sourceParentItemId:this.positionBeforeKeyboardMove.parent.id??void 0,targetParentItemId:this.getParentItem()?.id}))}startKeyboardMove(){if(this.disableDrag)return;const{parent:e,position:i}=this.getItemContext();this.positionBeforeKeyboardMove={parent:e,position:i},this.movingViaKeyboard=!0;const t=this.getKeyboardMoveEventData();t&&this.startKeyboardMoveEvent.emit(t)}moveItem(e){const i=this.getElementToMove(),t=this.getParentItem(),s=this.getParentTreeViewItem();if("down"===e){const e=i.nextElementSibling;if(e){e.querySelector(".tree-view-item__children").prepend(i),s&&r(s);const t="SWIRL-TREE-VIEW-ITEM"===e.tagName?e:e.querySelector("swirl-tree-view-item");r(t),t.expand()}else t&&(t.parentElement.insertBefore(i,t.nextElementSibling),s&&r(s))}else if("up"===e){const e=i.previousElementSibling;if(e){e.querySelector(".tree-view-item__children").appendChild(i),s&&r(s);const t="SWIRL-TREE-VIEW-ITEM"===e.tagName?e:e.querySelector("swirl-tree-view-item");r(t),t.expand()}else t&&(t.parentElement.insertBefore(i,t),s&&r(s))}requestAnimationFrame((()=>{this.link.focus()})),this.checkKeyboardDropStatus();const o=this.getKeyboardMoveEventData();o&&this.keyboardMoveEvent.emit(o)}checkKeyboardDropStatus(){const{parent:e,position:i}=this.getItemContext();if("function"!=typeof this.canDrop)this.cannotKeyboardDropInCurrentPosition=!1;else{const t=this.canDrop({parentId:e.id,position:i});this.cannotKeyboardDropInCurrentPosition=!t}}getSemantics(){return this.el.closest('[role="tree"]')?"tree":"list"}render(){const e=!!this.el.querySelector("swirl-tree-view-item"),i=!!this.el.querySelector('[slot="tags"]'),t=!!this.icon&&/\p{Extended_Pictographic}/u.test(this.icon),r=this.enableDragDrop&&!e,a=this.getSemantics(),h=this.expanded||"tree"!==a,l="tree"===a?this.selected?0:-1:void 0,c="tree"===a?"li":"div",m=d("tree-view-item",{"tree-view-item--active":this.active,"tree-view-item--cannot-keyboard-drop":this.cannotKeyboardDropInCurrentPosition,"tree-view-item--moving-via-keyboard":this.movingViaKeyboard,"tree-view-item--disable-drag":this.disableDrag,"tree-view-item--has-tags":i});return s(o,{key:"73d1f4a9397356ae42ac6e7eff3a232bc8044b81",id:this.itemId,role:"tree"===a?"none":"listitem"},s(c,{key:"43a7b8a02f7e275527b653de1b3f3641947fa9c6",class:m,role:"tree"===a?"none":void 0},s("a",{key:"d39b5cee6d1e5f0d7dea38ee822762b4a81b91e2","aria-current":this.active?"page":void 0,"aria-expanded":e&&"tree"===a?h+"":void 0,"aria-level":"tree"===a?this.level+1:void 0,"aria-owns":e&&"tree"===a?this.itemId+"-children":void 0,"aria-selected":"tree"===a?this.selected+"":void 0,class:"tree-view-item__link",href:this.href,onFocus:this.onFocus,onKeyDown:this.onKeyDown,ref:e=>this.link=e,role:"tree"===a?"treeitem":void 0,tabIndex:l},!this.disableDrag&&this.enableDragDrop&&s("span",{key:"a218ad345f47dedf2fcd839926eb401b9348e8fd",class:"tree-view-item__drag-handle"},s("swirl-icon-drag-handle",{key:"48b7647a53a8717336ef3918de98c266bc94a12c",size:20})),this.expandable&&"tree"===a&&s("span",{key:"e6d9298d67b80046e65b68dbfb74f82e35a7d522",class:"tree-view-item__toggle-icon"},e&&s(n,{key:"7ed530e7233b18e670e53836afc53ebf7bc4c7d7"},h?s("swirl-icon-expand-more",{onClick:this.onClickCollapse,size:24}):s("swirl-icon-chevron-right",{onClick:this.onClickExpand,size:24}))),!!this.icon&&s(n,{key:"8f64d41f0514402a26f14e8892887b3d6b693c94"},s("span",{key:"f6c8c8024ae589a47912a727e7ad4c4539f6d2fc",class:"tree-view-item__icon"},t?this.icon:s("swirl-icon",{glyph:this.icon,size:24,color:this.iconColor}))),s("span",{key:"385aa803866c02e6b9a5791747d639984c6315d1",class:"tree-view-item__label"},this.label),s("span",{key:"688e67dd3cfc6d5854d91846781c36bc5853b79f",class:"tree-view-item__tags"},s("slot",{key:"f3fe801f732e0430a8e6f4f519688bb7025fc673",name:"tags"}))),s("ul",{key:"8d3e1b1db911768b5a985e46e3d09d6701a8e53f","aria-label":this.label,class:"tree-view-item__children "+(r?"tree-view-item__children--drop-zone":""),id:this.itemId+"-children",ref:e=>this.childList=e,role:"tree"===a?"group":void 0,style:{display:h&&e||r?void 0:"none"}},s("slot",{key:"b063cb022bd4895bf96944bc6755b7d006c99fec"}))))}get el(){return this}static get style(){return"swirl-tree-view-item{display:block;flex-grow:1}swirl-tree-view-item *{box-sizing:border-box}.tree-view-item{list-style:none}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost){border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link{background-color:var(--s-translucent-low-pressed)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--ghost{border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm)}.tree-view-item--ghost .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--moving-via-keyboard{position:relative;z-index:1;border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--moving-via-keyboard .tree-view-item__link{background-color:var(--s-translucent-low-pressed)}.tree-view-item--moving-via-keyboard .tree-view-item__link:focus-visible{outline:none}.tree-view-item--cannot-keyboard-drop{opacity:0.5}.tree-view-item--active>.tree-view-item__link{background-color:var(--s-state-hovered)}.tree-view-item--has-tags .tree-view-item__tags{display:flex}.tree-view-item__children{display:flex;margin:0;padding:0 0 0 var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column;gap:var(--s-space-2)}.tree-view-item__children--drop-zone{min-height:0.5rem;margin-top:-0.5rem}.tree-view-item__link{display:flex;height:2.25rem;padding:var(--s-space-4) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);text-decoration:none;gap:var(--s-space-4)}.tree-view-item__link:hover{background-color:var(--s-state-hovered)}.tree-view-item__link:hover .tree-view-item__drag-handle{opacity:1}.tree-view-item__link:active{background-color:var(--s-state-pressed)}.tree-view-item__link:focus:not(:focus-visible){outline:none}.tree-view-item__link:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__link{font-size:var(--s-font-size-sm)}}.tree-view-item__drag-handle{display:inline-flex;flex-shrink:0;cursor:grab;opacity:0}.tree-view-item__drag-handle:active{cursor:grabbing}.tree-view-item__icon{display:block;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);flex-grow:0;flex-shrink:0;color:var(--s-icon-default);font-size:var(--s-font-size-lg)}.tree-view-item__icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__icon{width:1.25rem;height:1.25rem;font-size:var(--s-font-size-base)}}.tree-view-item__toggle-icon{display:block;width:1.5rem;height:1.5rem;flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__toggle-icon{width:1.25rem;height:1.25rem}}.tree-view-item__label{overflow:hidden;min-width:5rem;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.tree-view-item__tags{display:none;padding-left:var(--s-space-4);align-items:center;gap:var(--s-space-4)}"}},[260,"swirl-tree-view-item",{active:[4],disableDrag:[4,"disable-drag"],expandable:[4],href:[1],icon:[1],iconColor:[1,"icon-color"],itemId:[1,"item-id"],label:[1],canDrop:[32],cannotKeyboardDropInCurrentPosition:[32],dragDropItemSelector:[32],enableDragDrop:[32],expanded:[32],level:[32],movingViaKeyboard:[32],selected:[32],expand:[64],collapse:[64],select:[64],unselect:[64]}]),g=p,b=function(){"undefined"!=typeof customElements&&["swirl-tree-view-item","swirl-icon","swirl-icon-chevron-right","swirl-icon-drag-handle","swirl-icon-expand-more"].forEach((e=>{switch(e){case"swirl-tree-view-item":customElements.get(a(e))||customElements.define(a(e),p);break;case"swirl-icon":customElements.get(a(e))||c();break;case"swirl-icon-chevron-right":customElements.get(a(e))||m();break;case"swirl-icon-drag-handle":customElements.get(a(e))||v();break;case"swirl-icon-expand-more":customElements.get(a(e))||w()}}))};export{g as SwirlTreeViewItem,b as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as i,createEvent as t,forceUpdate as r,h as s,Host as o,Fragment as a,transformTag as n}from"@stencil/core/internal/client";import{c as d}from"./index2.js";import{S as h}from"./sortable.esm.js";import{t as l}from"./swirl-tree-view.config.js";import{d as c}from"./swirl-icon2.js";import{d as m}from"./swirl-icon-chevron-right2.js";import{d as v}from"./swirl-icon-drag-handle2.js";import{d as w}from"./swirl-icon-expand-more2.js";const p=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.dropTreeViewItem=t(this,"dropTreeViewItem",7),this.expandedChange=t(this,"expandedChange",7),this.itemSelected=t(this,"itemSelected",7),this.startKeyboardMoveEvent=t(this,"startKeyboardMove",7),this.endKeyboardMoveEvent=t(this,"endKeyboardMove",7),this.keyboardMoveEvent=t(this,"keyboardMove",7),this.expandable=!0,this.cannotKeyboardDropInCurrentPosition=!1,this.dragDropItemSelector="swirl-tree-view-item",this.enableDragDrop=!1,this.expanded=!1,this.level=0,this.movingViaKeyboard=!1,this.selected=!1,this.onFocus=()=>{this.selected||"tree"!==this.getSemantics()||this.select()},this.onKeyDown=e=>{if("Space"===e.code)return e.preventDefault(),void this.toggleKeyboardMove();this.movingViaKeyboard&&("ArrowDown"===e.code?(e.preventDefault(),e.stopPropagation(),this.moveItem("down")):"ArrowUp"===e.code&&(e.preventDefault(),e.stopPropagation(),this.moveItem("up")))},this.onClickCollapse=e=>{e.preventDefault(),e.stopPropagation(),this.collapse()},this.onClickExpand=e=>{e.preventDefault(),e.stopPropagation(),this.expand()}}componentWillLoad(){this.updateLevel();const e=this.el.closest("swirl-tree-view");this.enableDragDrop=e?.enableDragDrop,this.canDrop=e?.canDrop,this.dragDropItemSelector=e?.dragDropItemSelector}componentDidLoad(){this.setUpDragDrop()}async expand(){!this.expanded&&this.expandable&&"tree"===this.getSemantics()&&(this.expanded=!0,this.expandedChange.emit(this.expanded))}async collapse(){this.expanded&&this.expandable&&"tree"===this.getSemantics()&&(this.expanded=!1,this.expandedChange.emit(this.expanded))}async select(e){"tree"===this.getSemantics()&&(this.selected=!0,e&&this.link?.focus(),this.itemSelected.emit(this.el))}async unselect(){"tree"===this.getSemantics()&&(this.selected=!1)}setUpDragDrop(){this.sortable&&(this.sortable.destroy(),this.sortable=void 0),this.enableDragDrop&&this.childList&&(this.sortable=new h(this.childList,{...l,draggable:this.dragDropItemSelector,onMove:e=>"function"!=typeof this.canDrop||this.canDrop({parentId:e.to.closest("swirl-tree-view-item")?.itemId,position:Math.max(Array.from(e.to.children).indexOf(e.related),0)}),onStart:e=>{l.onStart?.(e)},onEnd:e=>{e.stopPropagation(),l.onEnd?.(e);const{from:i,to:t,newIndex:r,oldIndex:s,item:o}=e,a=i.closest("swirl-tree-view-item")?.itemId,n=t.closest("swirl-tree-view-item")?.itemId;this.dropTreeViewItem.emit({newIndex:r,oldIndex:s,item:o,itemId:o.id??o.querySelector(":scope > swirl-tree-view-item").id,newNextSiblingItemId:r<t.children.length-1?t.children[r+1].id:void 0,newPrevSiblingItemId:r>0?t.children[r-1].id:void 0,sourceParentItemId:a,targetParentItemId:n})}}))}updateLevel(){let e=this.el.parentElement?.closest("swirl-tree-view-item");for(;e;)this.level+=1,e=e.parentElement?.closest("swirl-tree-view-item")}getItemContext(){const e=this.getParentTreeViewItem()??this.el.closest("swirl-tree-view"),i=Array.from(e.querySelectorAll(`\n        :scope > .tree-view-item > .tree-view-item__children > ${this.dragDropItemSelector},\n        :scope > .tree-view > ${this.dragDropItemSelector}\n      `));return{canDrop:!this.cannotKeyboardDropInCurrentPosition,parent:e,position:i.indexOf(this.el),siblingCount:i.length}}getParentItem(){return this.getElementToMove().parentElement.closest(this.dragDropItemSelector)}getParentTreeViewItem(){return this.el.parentElement.closest("swirl-tree-view-item")}getElementToMove(){return this.dragDropItemSelector?this.el.closest(this.dragDropItemSelector):this.el}getKeyboardMoveEventData(){const{canDrop:e,parent:i,position:t,siblingCount:r}=this.getItemContext();if(i)return{canDrop:e,parentLabel:i.label,childrenCount:r,itemLabel:this.label,position:t}}toggleKeyboardMove(){this.movingViaKeyboard?this.endKeyboardMove():this.startKeyboardMove()}endKeyboardMove(){const{parent:e,position:i}=this.getItemContext();if("function"==typeof this.canDrop&&!this.canDrop({parentId:e.id,position:i}))return;this.movingViaKeyboard=!1;const t=this.getKeyboardMoveEventData();t&&(this.endKeyboardMoveEvent.emit(t),this.dropTreeViewItem.emit({item:this.getElementToMove(),itemId:this.itemId,newIndex:i,oldIndex:this.positionBeforeKeyboardMove.position,newNextSiblingItemId:t.position<t.childrenCount-1?this.getElementToMove().nextElementSibling?.id:void 0,newPrevSiblingItemId:t.position>0?this.getElementToMove().previousElementSibling?.id:void 0,sourceParentItemId:this.positionBeforeKeyboardMove.parent.id??void 0,targetParentItemId:this.getParentItem()?.id}))}startKeyboardMove(){if(this.disableDrag)return;const{parent:e,position:i}=this.getItemContext();this.positionBeforeKeyboardMove={parent:e,position:i},this.movingViaKeyboard=!0;const t=this.getKeyboardMoveEventData();t&&this.startKeyboardMoveEvent.emit(t)}moveItem(e){const i=this.getElementToMove(),t=this.getParentItem(),s=this.getParentTreeViewItem();if("down"===e){const e=i.nextElementSibling;if(e){e.querySelector(".tree-view-item__children").prepend(i),s&&r(s);const t="SWIRL-TREE-VIEW-ITEM"===e.tagName?e:e.querySelector("swirl-tree-view-item");r(t),t.expand()}else t&&(t.parentElement.insertBefore(i,t.nextElementSibling),s&&r(s))}else if("up"===e){const e=i.previousElementSibling;if(e){e.querySelector(".tree-view-item__children").appendChild(i),s&&r(s);const t="SWIRL-TREE-VIEW-ITEM"===e.tagName?e:e.querySelector("swirl-tree-view-item");r(t),t.expand()}else t&&(t.parentElement.insertBefore(i,t),s&&r(s))}requestAnimationFrame((()=>{this.link.focus()})),this.checkKeyboardDropStatus();const o=this.getKeyboardMoveEventData();o&&this.keyboardMoveEvent.emit(o)}checkKeyboardDropStatus(){const{parent:e,position:i}=this.getItemContext();if("function"!=typeof this.canDrop)this.cannotKeyboardDropInCurrentPosition=!1;else{const t=this.canDrop({parentId:e.id,position:i});this.cannotKeyboardDropInCurrentPosition=!t}}getSemantics(){return this.el.closest('[role="tree"]')?"tree":"list"}render(){const e=!!this.el.querySelector("swirl-tree-view-item"),i=!!this.el.querySelector('[slot="tags"]'),t=!!this.icon&&/\p{Extended_Pictographic}/u.test(this.icon),r=this.enableDragDrop&&!e,n=this.getSemantics(),h=this.expanded||"tree"!==n,l="tree"===n?this.selected?0:-1:void 0,c="tree"===n?"li":"div",m=d("tree-view-item",{"tree-view-item--active":this.active,"tree-view-item--cannot-keyboard-drop":this.cannotKeyboardDropInCurrentPosition,"tree-view-item--moving-via-keyboard":this.movingViaKeyboard,"tree-view-item--disable-drag":this.disableDrag,"tree-view-item--has-tags":i});return s(o,{key:"f571e0aa5fab77a62b4b6a63e1226011b61202ce",id:this.itemId,role:"tree"===n?"none":"listitem"},s(c,{key:"a13caedc50c5df33f7674c93696a141c019a0be4",class:m,role:"tree"===n?"none":void 0},s("a",{key:"e9a32fadc3d8d07e757d42f54f8e9e44976e2b4a","aria-current":this.active?"page":void 0,"aria-expanded":e&&"tree"===n?h+"":void 0,"aria-level":"tree"===n?this.level+1:void 0,"aria-owns":e&&"tree"===n?this.itemId+"-children":void 0,"aria-selected":"tree"===n?this.selected+"":void 0,class:"tree-view-item__link",href:this.href,onFocus:this.onFocus,onKeyDown:this.onKeyDown,ref:e=>this.link=e,role:"tree"===n?"treeitem":void 0,tabIndex:l},!this.disableDrag&&this.enableDragDrop&&s("span",{key:"943ebb467ca02496363deccd1757eaa4878680ab",class:"tree-view-item__drag-handle"},s("swirl-icon-drag-handle",{key:"00c15f06df99116176b9759abb86794a5306aa1d",size:20})),this.expandable&&"tree"===n&&s("span",{key:"dbdd4b084c23f48caee3245a3a2f414cba1fcce1",class:"tree-view-item__toggle-icon"},e&&s(a,{key:"48b76c4675d392b25ad97d9e73f0911f43fc6918"},h?s("swirl-icon-expand-more",{onClick:this.onClickCollapse,size:24}):s("swirl-icon-chevron-right",{onClick:this.onClickExpand,size:24}))),!!this.icon&&s(a,{key:"d98c931c4f9db219e70fd31365304808c53808da"},s("span",{key:"c041476e9a1940dcc3c2c4edccde824e0d6f9c81",class:"tree-view-item__icon"},t?this.icon:s("swirl-icon",{glyph:this.icon,size:24,color:this.iconColor}))),s("span",{key:"92c600e90332b236742f47ca8ba190e2be704a00",class:"tree-view-item__label"},this.label),s("span",{key:"143e4df9520c3be93508e1e63c5cdad62f26dc90",class:"tree-view-item__tags"},s("slot",{key:"e8a16506b1c9fa9bdc2a0dab23c042efee9373dc",name:"tags"}))),s("ul",{key:"95d6d7047fa12c5a0fc51848457db871f5ec7abe","aria-label":this.label,class:"tree-view-item__children "+(r?"tree-view-item__children--drop-zone":""),id:this.itemId+"-children",ref:e=>this.childList=e,role:"tree"===n?"group":void 0,style:{display:h&&e||r?void 0:"none"}},s("slot",{key:"556e0b1487930406f6179a0d50d2ef0c832e2e45"}))))}get el(){return this}static get style(){return"swirl-tree-view-item{display:block;flex-grow:1}swirl-tree-view-item *{box-sizing:border-box}.tree-view-item{list-style:none}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost){border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link{background-color:var(--s-translucent-low-pressed)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--ghost{border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm)}.tree-view-item--ghost .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--moving-via-keyboard{position:relative;z-index:1;border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--moving-via-keyboard .tree-view-item__link{background-color:var(--s-translucent-low-pressed)}.tree-view-item--moving-via-keyboard .tree-view-item__link:focus-visible{outline:none}.tree-view-item--cannot-keyboard-drop{opacity:0.5}.tree-view-item--active>.tree-view-item__link{background-color:var(--s-state-hovered)}.tree-view-item--has-tags .tree-view-item__tags{display:flex}.tree-view-item__children{display:flex;margin:0;padding:0 0 0 var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column;gap:var(--s-space-2)}.tree-view-item__children--drop-zone{min-height:0.5rem;margin-top:-0.5rem}.tree-view-item__link{display:flex;height:2.25rem;padding:var(--s-space-4) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);text-decoration:none;gap:var(--s-space-4)}.tree-view-item__link:hover{background-color:var(--s-state-hovered)}.tree-view-item__link:hover .tree-view-item__drag-handle{opacity:1}.tree-view-item__link:active{background-color:var(--s-state-pressed)}.tree-view-item__link:focus:not(:focus-visible){outline:none}.tree-view-item__link:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__link{font-size:var(--s-font-size-sm)}}.tree-view-item__drag-handle{display:inline-flex;flex-shrink:0;cursor:grab;opacity:0}.tree-view-item__drag-handle:active{cursor:grabbing}.tree-view-item__icon{display:block;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);flex-grow:0;flex-shrink:0;color:var(--s-icon-default);font-size:var(--s-font-size-lg)}.tree-view-item__icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__icon{width:1.25rem;height:1.25rem;font-size:var(--s-font-size-base)}}.tree-view-item__toggle-icon{display:block;width:1.5rem;height:1.5rem;flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__toggle-icon{width:1.25rem;height:1.25rem}}.tree-view-item__label{overflow:hidden;min-width:5rem;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.tree-view-item__tags{display:none;padding-left:var(--s-space-4);align-items:center;gap:var(--s-space-4)}"}},[260,"swirl-tree-view-item",{active:[4],disableDrag:[4,"disable-drag"],expandable:[4],href:[1],icon:[1],iconColor:[1,"icon-color"],itemId:[1,"item-id"],label:[1],canDrop:[32],cannotKeyboardDropInCurrentPosition:[32],dragDropItemSelector:[32],enableDragDrop:[32],expanded:[32],level:[32],movingViaKeyboard:[32],selected:[32],expand:[64],collapse:[64],select:[64],unselect:[64]}]),g=p,b=function(){"undefined"!=typeof customElements&&["swirl-tree-view-item","swirl-icon","swirl-icon-chevron-right","swirl-icon-drag-handle","swirl-icon-expand-more"].forEach((e=>{switch(e){case"swirl-tree-view-item":customElements.get(n(e))||customElements.define(n(e),p);break;case"swirl-icon":customElements.get(n(e))||c();break;case"swirl-icon-chevron-right":customElements.get(n(e))||m();break;case"swirl-icon-drag-handle":customElements.get(n(e))||v();break;case"swirl-icon-expand-more":customElements.get(n(e))||w()}}))};export{g as SwirlTreeViewItem,b as defineCustomElement}

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

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