npm - @getflip/swirl-components - Versions diffs - 0.523.1 → 0.525.0 - Mend

@getflip/swirl-components 0.523.1 → 0.525.0

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

Files changed (3042) hide show

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

	@@ -1 +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:"31cc2b99cd42ce8de24fcdca3bd25d677b2065e9"},i("div",{key:"2b10bbe4a18214e22f2ecedb07f2806d830abb55",class:e},this.enableDragDrop&&i("swirl-visually-hidden",{key:"aac0580b6da061bcf6a4e57f9e3308bcd83cd9ab"},i("span",{key:"3c2c47c530275c59c13af5ae0bf95fe865546848","aria-live":"assertive"},this.liveRegionText)),i("div",{key:"063f4ec7388d8a9b9cc986e24e98dab85deb81b7",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:"44ae0cb1ac3dbedba432e5154bb890311544a361","aria-describedby":this.caption?"caption":void 0,"aria-label":this.label,role:"table",class:"table__table"},this.caption&&i("swirl-visually-hidden",{key:"4e98279e3a5e8dd340b05f1851559cbf35b25d95"},i("div",{key:"ec620a55154a96b65760fdfe5857d36cabc20e03",id:"caption"},this.caption)),i("div",{key:"de46c8483c070f631b529ff0e53db8b6a27ec8d8",role:"rowgroup"},i("div",{key:"18a6f22082c3fe08134f6843ac9b9722501716fa",class:"table__header",ref:t=>this.headerEl=t,role:"row"},i("slot",{key:"167710dee7162c62f40c218f6f2fb98e3f7534c0",name:"columns"}))),i("div",{key:"58cd2a6ee100461b4a9e8b5da35884f4271092a2",class:"table__body",ref:t=>this.bodyEl=t},i("slot",{key:"d258590441b67c639ba479bcbf7ae85dc840fa88",name:"rows"}),i("div",{key:"9ddfc91f1a3055363798312fb0fd1aeb2671c2db",class:"table__empty-row",role:"row"},i("div",{key:"78c4b0fa18d31277de03507b564ec42eba10c0a3","aria-colspan":this.getColumns().length,class:"table__empty-row-cell",role:"cell"},i("slot",{key:"f56688d7ff20f7ae1a3fc4f9f8241bc235b8ff5e",name:"empty"}),!t&&i("swirl-text",{key:"b7cb802b3420a554459372d8813f1b7ba6571929",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:-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}
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:"58cb39e970718c947af8fb05e49327f69ce52406"},i("div",{key:"ccc4d4c35f16a0250bca6473848ec928a20d69f1",class:e},this.enableDragDrop&&i("swirl-visually-hidden",{key:"984ee69c68a1f7ede7c68d11e08ab87677c75d8c"},i("span",{key:"7a27389724c8c0d877c79af23589b637e44d5669","aria-live":"assertive"},this.liveRegionText)),i("div",{key:"d17f542eac55c6da592fc2ab12d838e30ef318e6",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:"dd983c262ce853828b3040c9f97c510c769662e3","aria-describedby":this.caption?"caption":void 0,"aria-label":this.label,role:"table",class:"table__table"},this.caption&&i("swirl-visually-hidden",{key:"031594755193d7ca2e0f8624afd79ec38ac0dec7"},i("div",{key:"7b76523681ef767eb7a5805cc45da2259d6b9ce5",id:"caption"},this.caption)),i("div",{key:"ac6f9ffa3703cbadb12b7384e8f897c5af9d0bc1",role:"rowgroup"},i("div",{key:"5263be7e317340491ee5890a1a2e5d25fcba06d5",class:"table__header",ref:t=>this.headerEl=t,role:"row"},i("slot",{key:"3171ffdd4027b3f32d2d2b110f55209c8bdc5e7e",name:"columns"}))),i("div",{key:"32c054e3e9f63439efb8f9cf9633f5b628a789e0",class:"table__body",ref:t=>this.bodyEl=t},i("slot",{key:"2f5b748c60f91dbe4df98d0f18b367f8292100d0",name:"rows"}),i("div",{key:"b51e7e34b4d4e1c4044f9480a0a115393064d221",class:"table__empty-row",role:"row"},i("div",{key:"1cb8061bef8a30965ea023b31dd0fcfac0276f26","aria-colspan":this.getColumns().length,class:"table__empty-row-cell",role:"cell"},i("slot",{key:"e512da95e312bb19dca9b36e0092a0001810eda7",name:"empty"}),!t&&i("swirl-text",{key:"ab17ca80ff8a609d5eaa4addee7d3358791bc11d",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:-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-tabs.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as t,HTMLElement as a,createEvent as i,h as s,Host as e,transformTag as r}from"@stencil/core/internal/client";import{o as b}from"./utils.js";import{d as n}from"./swirl-badge2.js";import{d as l}from"./swirl-tab-bar2.js";import{d}from"./swirl-tooltip2.js";import{d as h}from"./swirl-visually-hidden2.js";const o=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabActivated=i(this,"tabActivated",7),this.tabBarVariant="default",this.tabBarTabs=[],this.tabs=[],this.onActivateNextTab=()=>{this.activateNextTab()},this.onActivatePreviousTab=()=>{this.activatePreviousTab()},this.onActivateTab=t=>{this.activateTab(t.detail)}}componentWillLoad(){this.collectTabs(),this.updateTabBarTabs()}async activateTab(t){if(this.activeTab===t)return;this.activeTab=t,this.tabs.forEach((t=>t.active=!1));const a=this.tabs.find((a=>a.tabId===t));a&&(a.active=!0,this.tabActivated.emit(a),this.updateTabBarTabs())}activateNextTab(){const t=this.tabs.findIndex((t=>t.tabId===this.activeTab)),a=b(t+1,this.tabs.length);this.activateTab(this.tabs[a].tabId),requestAnimationFrame((()=>{this.el.querySelector(".tabs__tab--active")?.focus()}))}activatePreviousTab(){const t=this.tabs.findIndex((t=>t.tabId===this.activeTab)),a=b(t-1,this.tabs.length);this.activateTab(this.tabs[a].tabId),requestAnimationFrame((()=>{this.el.querySelector(".tabs__tab--active")?.focus()}))}collectTabs(){if(this.tabs=Array.from(this.el.querySelectorAll("swirl-tab")),0===this.tabs.length)return;const t=this.tabs.find((t=>t.tabId===this.initialTab));this.activateTab(t?t.tabId:this.tabs[0].tabId)}updateTabBarTabs(){this.tabBarTabs=this.tabs.map((t=>({active:this.activeTab===t.tabId,badge:t.badge,icon:t.icon,id:t.tabId,label:t.label,tooltip:t.tooltip})))}render(){return s(e,{key:"~~4d7f710d18d9d1b58fc658dbf8e6922a46a19cb0~~"},s("div",{key:"~~ada4ac17bf87a77bf63b5459b8c7a20560913b59~~",class:"tabs"},s("swirl-tab-bar",{key:"~~53f3aaaab6a55e2f907e6db2d94a11db3b1100fa~~",label:this.label,onActivateNextTab:this.onActivateNextTab,onActivatePreviousTab:this.onActivatePreviousTab,onActivateTab:this.onActivateTab,tabs:this.tabBarTabs,justify:this.justifyTabBar,paddingBlockEnd:this.tabBarPaddingBlockEnd,paddingBlockStart:this.tabBarPaddingBlockStart,paddingInlineEnd:this.tabBarPaddingInlineEnd,paddingInlineStart:this.tabBarPaddingInlineStart,variant:this.tabBarVariant})),s("slot",{key:"~~524a105bd28721d506d0e6a067f1a054c272dc52~~"}))}get el(){return this}static get style(){return".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}"}},[262,"swirl-tabs",{initialTab:[1,"initial-tab"],label:[1],justifyTabBar:[1,"justify-tab-bar"],tabBarPaddingBlockEnd:[1,"tab-bar-padding-block-end"],tabBarPaddingBlockStart:[1,"tab-bar-padding-block-start"],tabBarPaddingInlineEnd:[1,"tab-bar-padding-inline-end"],tabBarPaddingInlineStart:[1,"tab-bar-padding-inline-start"],tabBarVariant:[1,"tab-bar-variant"],activeTab:[32],tabBarTabs:[32],activateTab:[64]}]),c=o,m=function(){"undefined"!=typeof customElements&&["swirl-tabs","swirl-badge","swirl-tab-bar","swirl-tooltip","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-tabs":customElements.get(r(t))\|\|customElements.define(r(t),o);break;case"swirl-badge":customElements.get(r(t))\|\|n();break;case"swirl-tab-bar":customElements.get(r(t))\|\|l();break;case"swirl-tooltip":customElements.get(r(t))\|\|d();break;case"swirl-visually-hidden":customElements.get(r(t))\|\|h()}}))};export{c as SwirlTabs,m as defineCustomElement}
1	+ import{proxyCustomElement as t,HTMLElement as i,createEvent as s,h as a,Host as e,transformTag as r}from"@stencil/core/internal/client";import{o as b}from"./utils.js";import{d as n}from"./swirl-badge2.js";import{d as l}from"./swirl-tab-bar2.js";import{d}from"./swirl-tooltip2.js";import{d as c}from"./swirl-visually-hidden2.js";const h=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabActivated=s(this,"tabActivated",7),this.tabBarVariant="default",this.tabBarTabs=[],this.tabs=[],this.onActivateNextTab=()=>{this.activateNextTab()},this.onActivatePreviousTab=()=>{this.activatePreviousTab()},this.onActivateTab=t=>{this.activateTab(t.detail)}}componentWillLoad(){this.collectTabs(),this.updateTabBarTabs()}async activateTab(t){if(this.activeTab===t)return;this.activeTab=t,this.tabs.forEach((t=>t.active=!1));const i=this.tabs.find((i=>i.tabId===t));i&&(i.active=!0,this.tabActivated.emit(i),this.updateTabBarTabs())}activateNextTab(){const t=this.tabs.findIndex((t=>t.tabId===this.activeTab)),i=b(t+1,this.tabs.length);this.activateTab(this.tabs[i].tabId),requestAnimationFrame((()=>{this.el.querySelector(".tabs__tab--active")?.focus()}))}activatePreviousTab(){const t=this.tabs.findIndex((t=>t.tabId===this.activeTab)),i=b(t-1,this.tabs.length);this.activateTab(this.tabs[i].tabId),requestAnimationFrame((()=>{this.el.querySelector(".tabs__tab--active")?.focus()}))}collectTabs(){if(this.tabs=Array.from(this.el.querySelectorAll("swirl-tab")),0===this.tabs.length)return;const t=this.tabs.find((t=>t.tabId===this.initialTab));this.activateTab(t?t.tabId:this.tabs[0].tabId)}updateTabBarTabs(){this.tabBarTabs=this.tabs.map((t=>({active:this.activeTab===t.tabId,badge:t.badge,icon:t.icon,id:t.tabId,label:t.label,tooltip:t.tooltip})))}render(){return a(e,{key:"5106b9ffa7cf3f624e41ef1ab6a0399f9b5038d4"},a("div",{key:"991b692064949e04cec4484baad7d9f30d1c2f89",class:"tabs"},a("swirl-tab-bar",{key:"aac17d88f1ecce6e86176d67642bf4c2e5ff0064",label:this.label,onActivateNextTab:this.onActivateNextTab,onActivatePreviousTab:this.onActivatePreviousTab,onActivateTab:this.onActivateTab,tabs:this.tabBarTabs,justify:this.justifyTabBar,paddingBlockEnd:this.tabBarPaddingBlockEnd,paddingBlockStart:this.tabBarPaddingBlockStart,paddingInlineEnd:this.tabBarPaddingInlineEnd,paddingInlineStart:this.tabBarPaddingInlineStart,variant:this.tabBarVariant})),a("slot",{key:"0dae860036fa83febc712e2d833f0dfc793124cd"}))}get el(){return this}static get style(){return".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}"}},[262,"swirl-tabs",{initialTab:[1,"initial-tab"],label:[1],justifyTabBar:[1,"justify-tab-bar"],tabBarPaddingBlockEnd:[1,"tab-bar-padding-block-end"],tabBarPaddingBlockStart:[1,"tab-bar-padding-block-start"],tabBarPaddingInlineEnd:[1,"tab-bar-padding-inline-end"],tabBarPaddingInlineStart:[1,"tab-bar-padding-inline-start"],tabBarVariant:[1,"tab-bar-variant"],activeTab:[32],tabBarTabs:[32],activateTab:[64]}]),o=h,f=function(){"undefined"!=typeof customElements&&["swirl-tabs","swirl-badge","swirl-tab-bar","swirl-tooltip","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-tabs":customElements.get(r(t))\|\|customElements.define(r(t),h);break;case"swirl-badge":customElements.get(r(t))\|\|n();break;case"swirl-tab-bar":customElements.get(r(t))\|\|l();break;case"swirl-tooltip":customElements.get(r(t))\|\|d();break;case"swirl-visually-hidden":customElements.get(r(t))\|\|c()}}))};export{o as SwirlTabs,f as defineCustomElement}

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

	@@ -1 +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:"~~d5fbc756df9d37244838e5686f3058cea6a20244~~"},e(~~"span"~~,{key:"~~bc44813d89c8882ea2a34e9f9e90f0e6335b5959~~",class:t,part:"tag"},this.icon&&e("span",{key:"~~0c4d3eb3b007556ee463ef02c41782f98987835d~~",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:"~~3ad90d1cdab7daf64689d8c135b7a42632c096b6~~","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:"~~93234397e1136aca9664fd31bb4be18275180e88~~",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}
1	+ import{proxyCustomElement as t,HTMLElement as a,createEvent as e,h as r,Host as o,transformTag as i}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{d as s}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=e(this,"remove",7),this.tagClick=e(this,"tagClick",7),this.iconPosition="start",this.intent="default",this.interactive=!1,this.size="m",this.removalButtonLabel="Remove",this.variant="default",this.onRemove=t=>{this.removeTag?.emit(t)},this.onClick=t=>{this.tagClick.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=this.interactive?"button":"span",a=n("tag",`tag--icon-position-${this.iconPosition}`,`tag--intent-${this.intent}`,`tag--size-${this.size}`,`tag--variant-${this.variant}`,{"tag--hide-label":this.hideLabel,"tag--interactive":this.interactive});return r(o,{key:"9637cdd4b1ad7b0dccb5c04a0ddefd8ee2325f7a"},r(t,{key:"99dc3fb14fd345e4275bb8442be97fd254080c30",class:a,onClick:this.interactive?this.onClick:void 0,part:"tag",tabIndex:this.interactive&&"true"===this.el.ariaHidden?-1:void 0,type:this.interactive?"button":void 0},this.icon&&r("span",{key:"ee15018f6a8aa37397f235e7e10c32a567cc63d7",class:"tag__icon",innerHTML:this.icon,ref:t=>this.iconEl=t}),this.hideLabel?r("swirl-visually-hidden",null,this.label):r("span",{class:"tag__label"},this.label),this.removable&&r("button",{key:"63fe4e28921608f31474a7a2698193b83cd065e9","aria-label":this.removalButtonLabel,class:"tag__removal-button",onClick:this.onRemove,tabIndex:"true"===this.el.ariaHidden?-1:void 0,type:"button"},r("swirl-icon-close",{key:"51d9a82d4a1632c4b990e14ff170d14eeb3c2b45",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--interactive{position:relative;font-family:inherit;cursor:pointer}.tag--interactive::after{position:absolute;border-radius:inherit;content:"";inset:calc(-1 * var(--s-border-width-default));pointer-events:none}.tag--interactive:hover::after{background-color:var(--s-state-hovered)}.tag--interactive:active::after{background-color:var(--s-state-pressed)}.tag--interactive:focus:not(:focus-visible){outline:none}.tag--interactive:focus-visible{outline-color:var(--s-focus-default)}.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],interactive:[4],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(i(t))\|\|customElements.define(i(t),l);break;case"swirl-icon-close":customElements.get(i(t))\|\|s();break;case"swirl-visually-hidden":customElements.get(i(t))\|\|c()}}))}export{l as S,g as d}

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

@@ -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:"2b6f5db4f48a601f66b241e714f8a5e8938fee42"},i(t,{key:"0bd1fef23f9ead1e77ff085714e471b954614fdd",class:s,ref:t=>this.textEl=t,style:{whiteSpace:e?"nowrap":this.whiteSpace}},i("slot",{key:"4ed8380bbdc1f95e5133414395a07478582bbff4"})))}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:"8c79f4a91d37994ec7688132382e020621f584ca"},i(t,{key:"7bac3b2004139bdc062db6e516bddf988aa176d4",class:s,ref:t=>this.textEl=t,style:{whiteSpace:e?"nowrap":this.whiteSpace}},i("slot",{key:"cec08d6960f5e0acbceff329d3dba01b08f3eeff"})))}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-theme-provider.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as s,Host as h,transformTag as r}from"@stencil/core/internal/client";const n="swirl-preferred-theme",c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.appThemeUpdated=i(this,"appThemeUpdated",7),this.themeChange=i(this,"themeChange",7),this.darkThemeMediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.setDesignTokens=[],this.osThemeChangeHandler=e=>{this.osTheme=e.matches?"dark":"light",this.updateAppTheme()}}componentWillLoad(){this.resolveConfig(),this.determineOSTheme(),this.updateAppTheme()}disconnectedCallback(){this.darkThemeMediaQuery.removeEventListener("change",this.osThemeChangeHandler)}watchConfig(){this.resolveConfig(),this.determineOSTheme(),this.updateAppTheme()}async getActiveOSTheme(){return this.appOSTheme}async getPreferredOSTheme(){if(this.resolvedConfig.storage)return this.resolvedConfig.storage.getItem(n)}async setPreferredOSTheme(e){this.resolvedConfig.storage&&this.resolvedConfig.enabledThemes.includes(e)&&(this.resolvedConfig.storage.setItem(n,e),this.updateAppTheme())}async resetPreferredOSTheme(){this.resolvedConfig.storage&&(this.resolvedConfig.storage.removeItem(n),this.updateAppTheme())}resolveConfig(){if(this.resolvedConfig={...this.config\|\|{},enabledThemes:this.config?.enabledThemes\|\|["light","dark"],rootElement:this.config?.rootElement\|\|document.documentElement,storage:this.config?.storage\|\|window?.localStorage},!this.resolvedConfig.enabledThemes.includes("light"))throw Error("[Swirl Theme Provider] Light theme must be enabled.")}determineOSTheme(){window.matchMedia?(this.osTheme=this.darkThemeMediaQuery.matches?"dark":"light",this.darkThemeMediaQuery.removeEventListener("change",this.osThemeChangeHandler),this.darkThemeMediaQuery.addEventListener("change",this.osThemeChangeHandler)):this.osTheme="light"}async updateAppTheme(){const e=await this.getPreferredOSTheme()\|\|this.osTheme;this.appOSTheme=this.resolvedConfig.enabledThemes.includes(e)?e:"light","dark"===this.appOSTheme?(document.documentElement.classList.remove("theme-light"),document.documentElement.classList.add("theme-dark")):(document.documentElement.classList.remove("theme-dark"),document.documentElement.classList.add("theme-light")),this.updateTenantVariables(),this.updateTenantAssets();const t={activeTheme:await this.getActiveOSTheme(),preferredTheme:await this.getPreferredOSTheme()};this.recentOSThemeChangeEventData&&t.activeTheme===this.recentOSThemeChangeEventData.activeTheme&&t.preferredTheme===this.recentOSThemeChangeEventData.preferredTheme\|\|(this.recentOSThemeChangeEventData=t,this.themeChange.emit(this.recentOSThemeChangeEventData)),this.appThemeUpdated.emit()}updateTenantAssets(){const e=this.resolvedConfig?.themes?.[this.appOSTheme];e&&document.head.querySelector('link[rel="icon"]')?.setAttribute("href",e.favicon.link)}updateTenantVariables(){const e=this.resolvedConfig?.themes?.[this.appOSTheme];if(!e)return void this.resetTenantVariables();const t=this.resolvedConfig.rootElement;this.setDesignTokens=[],e.design_tokens.forEach((e=>{const i="--s-"+e.id;t.style.setProperty(i,`rgba(${e.color.r}, ${e.color.g}, ${e.color.b}, ${e.color.a})`),this.setDesignTokens.push(i)}))}resetTenantVariables(){const e=this.resolvedConfig.rootElement;this.setDesignTokens.forEach((t=>{e.style.removeProperty(t)})),this.setDesignTokens=[]}render(){return s(h,{key:"~~622492cf31a6e6a99a59f2a0fc5481e22ff1e6dd~~"},s("slot",{key:"~~a5453acc85abf19fcb7d80cb83e50e3d3d5265cc~~"}))}static get watchers(){return{config:[{watchConfig:0}]}}static get style(){return".sc-swirl-theme-provider-h{display:unset}"}},[262,"swirl-theme-provider",{config:[16],getActiveOSTheme:[64],getPreferredOSTheme:[64],setPreferredOSTheme:[64],resetPreferredOSTheme:[64]},void 0,{config:[{watchConfig:0}]}]),a=c,o=function(){"undefined"!=typeof customElements&&["swirl-theme-provider"].forEach((e=>{"swirl-theme-provider"===e&&(customElements.get(r(e))\|\|customElements.define(r(e),c))}))};export{a as SwirlThemeProvider,o as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as s,Host as h,transformTag as r}from"@stencil/core/internal/client";const n="swirl-preferred-theme",c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.appThemeUpdated=i(this,"appThemeUpdated",7),this.themeChange=i(this,"themeChange",7),this.darkThemeMediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.setDesignTokens=[],this.osThemeChangeHandler=e=>{this.osTheme=e.matches?"dark":"light",this.updateAppTheme()}}componentWillLoad(){this.resolveConfig(),this.determineOSTheme(),this.updateAppTheme()}disconnectedCallback(){this.darkThemeMediaQuery.removeEventListener("change",this.osThemeChangeHandler)}watchConfig(){this.resolveConfig(),this.determineOSTheme(),this.updateAppTheme()}async getActiveOSTheme(){return this.appOSTheme}async getPreferredOSTheme(){if(this.resolvedConfig.storage)return this.resolvedConfig.storage.getItem(n)}async setPreferredOSTheme(e){this.resolvedConfig.storage&&this.resolvedConfig.enabledThemes.includes(e)&&(this.resolvedConfig.storage.setItem(n,e),this.updateAppTheme())}async resetPreferredOSTheme(){this.resolvedConfig.storage&&(this.resolvedConfig.storage.removeItem(n),this.updateAppTheme())}resolveConfig(){if(this.resolvedConfig={...this.config\|\|{},enabledThemes:this.config?.enabledThemes\|\|["light","dark"],rootElement:this.config?.rootElement\|\|document.documentElement,storage:this.config?.storage\|\|window?.localStorage},!this.resolvedConfig.enabledThemes.includes("light"))throw Error("[Swirl Theme Provider] Light theme must be enabled.")}determineOSTheme(){window.matchMedia?(this.osTheme=this.darkThemeMediaQuery.matches?"dark":"light",this.darkThemeMediaQuery.removeEventListener("change",this.osThemeChangeHandler),this.darkThemeMediaQuery.addEventListener("change",this.osThemeChangeHandler)):this.osTheme="light"}async updateAppTheme(){const e=await this.getPreferredOSTheme()\|\|this.osTheme;this.appOSTheme=this.resolvedConfig.enabledThemes.includes(e)?e:"light","dark"===this.appOSTheme?(document.documentElement.classList.remove("theme-light"),document.documentElement.classList.add("theme-dark")):(document.documentElement.classList.remove("theme-dark"),document.documentElement.classList.add("theme-light")),this.updateTenantVariables(),this.updateTenantAssets();const t={activeTheme:await this.getActiveOSTheme(),preferredTheme:await this.getPreferredOSTheme()};this.recentOSThemeChangeEventData&&t.activeTheme===this.recentOSThemeChangeEventData.activeTheme&&t.preferredTheme===this.recentOSThemeChangeEventData.preferredTheme\|\|(this.recentOSThemeChangeEventData=t,this.themeChange.emit(this.recentOSThemeChangeEventData)),this.appThemeUpdated.emit()}updateTenantAssets(){const e=this.resolvedConfig?.themes?.[this.appOSTheme];e&&document.head.querySelector('link[rel="icon"]')?.setAttribute("href",e.favicon.link)}updateTenantVariables(){const e=this.resolvedConfig?.themes?.[this.appOSTheme];if(!e)return void this.resetTenantVariables();const t=this.resolvedConfig.rootElement;this.setDesignTokens=[],e.design_tokens.forEach((e=>{const i="--s-"+e.id;t.style.setProperty(i,`rgba(${e.color.r}, ${e.color.g}, ${e.color.b}, ${e.color.a})`),this.setDesignTokens.push(i)}))}resetTenantVariables(){const e=this.resolvedConfig.rootElement;this.setDesignTokens.forEach((t=>{e.style.removeProperty(t)})),this.setDesignTokens=[]}render(){return s(h,{key:"c387cacc7ca580b2aa53a16002b42f163f06c640"},s("slot",{key:"186dbdd4bb1edb766ff23234b87843cea2af4e39"}))}static get watchers(){return{config:[{watchConfig:0}]}}static get style(){return".sc-swirl-theme-provider-h{display:unset}"}},[262,"swirl-theme-provider",{config:[16],getActiveOSTheme:[64],getPreferredOSTheme:[64],setPreferredOSTheme:[64],resetPreferredOSTheme:[64]},void 0,{config:[{watchConfig:0}]}]),a=c,o=function(){"undefined"!=typeof customElements&&["swirl-theme-provider"].forEach((e=>{"swirl-theme-provider"===e&&(customElements.get(r(e))\|\|customElements.define(r(e),c))}))};export{a as SwirlThemeProvider,o as defineCustomElement}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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