npm - @getflip/swirl-components - Versions diffs - 0.507.0 → 0.508.0 - Mend

@getflip/swirl-components 0.507.0 → 0.508.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 (2779) hide show

package/dist/components/swirl-pdf-reader.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as i,createEvent as s,h as a,Host as t,transformTag as r}from"@stencil/core/internal/client";import{d as o,e as l}from"./body-scroll-lock.js";import{c as d}from"./index2.js";import{q as n,i as c}from"./utils.js";import{d as f}from"./swirl-action-list2.js";import{d as b}from"./swirl-action-list-item2.js";import{d as h}from"./swirl-button2.js";import{d as p}from"./swirl-file-viewer2.js";import{d as m}from"./swirl-file-viewer-audio2.js";import{d as u}from"./swirl-file-viewer-csv2.js";import{d as w}from"./swirl-file-viewer-fallback2.js";import{d as v}from"./swirl-file-viewer-image2.js";import{d as _}from"./swirl-file-viewer-pdf2.js";import{d as g}from"./swirl-file-viewer-text2.js";import{d as k}from"./swirl-file-viewer-video2.js";import{d as y}from"./swirl-icon-add2.js";import{d as x}from"./swirl-icon-error2.js";import{d as C}from"./swirl-icon-expand-more2.js";import{d as z}from"./swirl-icon-file2.js";import{d as j}from"./swirl-icon-file-copy2.js";import{d as E}from"./swirl-icon-fullscreen2.js";import{d as H}from"./swirl-icon-fullscreen-exit2.js";import{d as V}from"./swirl-icon-menu-book2.js";import{d as L}from"./swirl-icon-remove2.js";import{d as M}from"./swirl-inline-error2.js";import{d as Z}from"./swirl-popover2.js";import{d as B}from"./swirl-popover-trigger2.js";import{d as S}from"./swirl-separator2.js";import{d as T}from"./swirl-spinner2.js";import{d as D}from"./swirl-stack2.js";import{d as P}from"./swirl-text2.js";import{d as F}from"./swirl-visually-hidden2.js";const W=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.modalClose=s(this,"modalClose",7),this.modalOpen=s(this,"modalOpen",7),this.autoZoomLabel="Full width",this.closeButtonLabel="Close PDF viewer",this.downloadButtonEnabled=!0,this.downloadButtonLabel="Download PDF",this.fileTypeLabel="PDF Document",this.menuLabel="File menu",this.menuTriggerLabel="Open file menu",this.printButtonEnabled=!0,this.printButtonLabel="Print PDF",this.sideBySideButtonLabel="Toggle side by side view",this.thumbnailButtonLabel="Scroll to page",this.thumbnailsButtonLabel="Toggle thumbnails",this.thumbnailsLabel="Page thumbnails",this.zoomInButtonLabel="Zoom in",this.zoomOutButtonLabel="Zoom out",this.zoomSelectLabel="Select zoom",this.skipNativeDownload=!1,this.active=!1,this.closing=!1,this.opening=!1,this.downloading=!1,this.loadingThumbnails=!1,this.thumbnails=[],this.viewMode="single",this.visiblePages=[],this.desktopZoomSteps=[.5,.75,1,1.25,1.5,2,3,4],this.mobileZoomSteps=[.5,.75,1,1.25,1.5],this.onClose=()=>{this.closing=!1,this.active=!1,this.modalClose.emit()},this.toggleViewMode=()=>{this.viewMode="single"===this.viewMode?"side-by-side":"single"},this.toggleThumbnals=()=>{this.showThumbnails=!this.showThumbnails},this.onKeyDown=e=>{"Escape"===e.code&&(e.stopImmediatePropagation(),e.preventDefault(),this.close())},this.onActivate=async e=>{this.pdfViewer=e.detail,this.lockBodyScroll()},this.onVisiblePagesChange=async e=>{this.visiblePages=e.detail},this.onCloseButtonClick=()=>{this.close()},this.onPrintButtonClick=()=>{this.pdfViewer.print(),this.menu.close()},this.onDownloadButtonClick=async()=>{this.downloading=!0,await this.viewer.download(),this.downloading=!1,this.menu.close()},this.onZoomInButtonClick=()=>{const e=this.zoomSteps.indexOf(+this.zoom);this.zoom=-1===e?1:this.zoomSteps[Math.min(this.zoomSteps.length-1,e+1)]},this.onZoomOutButtonClick=()=>{const e=this.zoomSteps.indexOf(+this.zoom);this.zoom=-1===e?1:this.zoomSteps[Math.max(0,e-1)]},this.onZoomAutoButtonClick=()=>{this.zoom="auto"===this.zoom?1:"auto"},this.onZoomChange=e=>{const i=e.target.value;this.zoom="auto"===i?i:+i},this.onThumbnailClick=e=>()=>{const i=n(this.el,`[data-page-number="${e+1}"]`)?.[0];i?.scrollIntoView()}}componentWillLoad(){this.updateZoomSteps(),this.zoom=c()?"auto":1}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps()}disconnectedCallback(){this.unlockBodyScroll(),this.modalEl?.open&&this.modalEl.close()}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}onWindowResize(){this.pdfViewer&&(this.updateZoomSteps(),this.zoom=c()?"auto":1)}watchShowThumbnails(){this.showThumbnails&&(this.loadingThumbnails=!0,queueMicrotask((async()=>{await this.generateThumbnails(),this.loadingThumbnails=!1})))}async open(){this.opening=!0,this.modalEl&&(this.modalEl.showModal(),this.active=!0,this.modalOpen.emit())}async close(){this.closing\|\|(this.closing=!0,this.unlockBodyScroll(),setTimeout((()=>{this.modalEl.close()}),150))}lockBodyScroll(){const e=this.pdfViewer?.shadowRoot.querySelector(".file-viewer-pdf__pages");e&&o(e)}unlockBodyScroll(){const e=this.pdfViewer?.shadowRoot.querySelector(".file-viewer-pdf__pages");e&&l(e)}async generateThumbnails(){this.thumbnails=await this.pdfViewer.getThumbnails()}updateZoomSteps(){this.zoomSteps=c()?this.mobileZoomSteps:this.desktopZoomSteps}render(){const e=!!this.el.querySelector("[slot='menu-items']")\|\|this.printButtonEnabled\|\|this.downloadButtonEnabled,i=d("pdf-reader",{"pdf-reader--closing":this.closing,"pdf-reader--hide-menu":!e,"pdf-reader--show-thumbnails":this.showThumbnails});return a(t,{key:"df236a96d8b1bed447508a19177f4acc282d108d"},a("dialog",{key:"4381fe70a9fc129998c5303c8aae0619bcc35444","aria-label":this.label,class:i,id:"pdf-reader",onClose:this.onClose,onKeyDown:this.onKeyDown,ref:e=>this.modalEl=e},a("div",{key:"ff849feb9e28d36bb10c8dc37b0e86285b9616dd",class:"pdf-reader__body",role:"document"},a("header",{key:"f7dc3f3ba995f42466a4cd11a0a6371ef854bc94",class:"pdf-reader__header"},a("span",{key:"9f1690906ba259346bacd4d61a8692235e599c7d",class:"pdf-reader__header-left"},a("swirl-button",{key:"359dd5e100f9f864fa81f977f3c549d3c73446cd",class:"pdf-reader__close-button",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),a("span",{key:"eace7d847ba284e914ccedc3e569c0701a62b906",class:"pdf-reader__label"},this.label)),a("span",{key:"d4b4ea58c5b25c708aeef87d8d5253f995000a7d",class:"pdf-reader__header-center"},a("span",{key:"d740cb071924b66ec06aac2c571c4476c201bb01",class:"pdf-reader__zoom-button-container"},a("swirl-button",{key:"72944dc5c7b292033e8232c07b81756c52f1c0cc",class:"pdf-reader__zoom-button",disabled:this.zoom===this.zoomSteps[0],hideLabel:!0,icon:"<swirl-icon-remove></swirl-icon-remove>",label:this.zoomOutButtonLabel,onClick:this.onZoomOutButtonClick}),a("swirl-button",{key:"23f285285d0618e042405c0d80c48b03103cd046",class:"pdf-reader__zoom-button",disabled:this.zoom===this.zoomSteps[this.zoomSteps.length-1],hideLabel:!0,icon:"<swirl-icon-add></swirl-icon-add>",label:this.zoomInButtonLabel,onClick:this.onZoomInButtonClick})),a("span",{key:"657f6f202547db7482f0bb4810911b104b8179a5",class:"pdf-reader__zoom-select-container"},a("select",{key:"8c6eeb664c3afd0ecd2f08f6c542e05087ee4d37","aria-label":this.zoomSelectLabel,class:"pdf-reader__zoom-select",name:"zoom-select",id:"zoom-select",onChange:this.onZoomChange},a("option",{key:"e8ea261b4799511fe7f7bdc3e1077e414ec17b06",selected:"auto"===this.zoom,value:"auto"},this.autoZoomLabel),this.zoomSteps.map((e=>a("option",{key:e,selected:this.zoom===e,value:e},100e,"%")))),a("swirl-icon-expand-more",{key:"26ae613e1c71b12ee3a1c26962d48847922cbc0c",class:"pdf-reader__zoom-select-icon"}))),a("span",{key:"1603f21bff40719657fbeec87ed26bcced2f78bd",class:"pdf-reader__header-right"},a("swirl-popover-trigger",{key:"a13b40dc093fcdf029d079e0e49e5d86fe09ce31",swirlPopover:this.menu},a("swirl-button",{key:"70aba8e01d556d2d449ab8c86046c7e69a318f40",class:"pdf-reader__menu-button",hideLabel:!0,icon:"<swirl-icon-more-vertikal></swirl-icon-more-vertikal>",label:this.menuTriggerLabel}))),a("span",{key:"bb1ef6f1266ef4c48d82805e50975e5eede7ecad",class:"pdf-reader__floating-tools"},a("button",{key:"78007a00cff0bea00ae9bab3bdfc342dd779919e","aria-label":this.sideBySideButtonLabel,class:"pdf-reader__floating-tool-button",onClick:this.toggleViewMode,type:"button"},a("swirl-icon-menu-book",{key:"740d8b3460775d30513a6e9131e44a6e4ada6c86"})),a("button",{key:"2b5f6b5b9e9b66387f73b2b0e704d490bb1f3152","aria-controls":"thumbnails","aria-expanded":!!this.showThumbnails+"","aria-label":this.thumbnailsButtonLabel,class:"pdf-reader__floating-tool-button",onClick:this.toggleThumbnals,type:"button"},a("swirl-icon-file-copy",{key:"a9cf1d49e0f797320ccfdff515fbb9f2f9363042"})))),a("div",{key:"b5171b0a7504bafc9d076d63e18640f0e765d138",class:"pdf-reader__content"},a("nav",{key:"7a88c32896d85e9bb279f5da335901830d542a2b","aria-label":this.thumbnailsLabel,class:"pdf-reader__thumbnails",id:"thumbnails"},this.loadingThumbnails&&a("swirl-spinner",{key:"03c5eeb79a3e61e54e1fda6325dae7c60358a18a"}),!this.loadingThumbnails&&this.thumbnails.map(((e,i)=>{const s=d("pdf-reader__thumbnail",{"pdf-reader__thumbnail--active":this.visiblePages[0]===i+1});return a("button",{"aria-label":`${this.thumbnailButtonLabel} ${i+1}`,class:s,onClick:this.onThumbnailClick(i),type:"button"},a("img",{src:e.toDataURL("image/png"),alt:""}))}))),a("swirl-file-viewer",{key:"b8724b2d3bdd8c470388a435fc832896b8b7b779",active:this.active,class:"pdf-reader__viewer",disablePrint:!this.printButtonEnabled,file:this.file,fileName:this.fileName,onActivate:this.onActivate,onVisiblePagesChange:this.onVisiblePagesChange,pdfWorkerSrc:this.pdfWorkerSrc,ref:e=>this.viewer=e,type:"application/pdf",viewMode:this.viewMode,zoom:this.zoom,skipNativeDownload:this.skipNativeDownload}),a("div",{key:"89d8aebf6122d1eaa02c13080cb1932e31e23dc2",class:"pdf-reader__mobile-zoom-controls"},a("button",{key:"ad707414553a1c7b9d81c0ad815cd3df5c69e5c0","aria-label":this.autoZoomLabel,class:"pdf-reader__mobile-zoom-button",onClick:this.onZoomAutoButtonClick,type:"button"},a("auto"===this.zoom?"swirl-icon-fullscreen-exit":"swirl-icon-fullscreen",null)),a("button",{key:"e90248512071b5ea4411a154f32b49880c3b4969","aria-label":this.zoomInButtonLabel,class:"pdf-reader__mobile-zoom-button",disabled:this.zoom===this.zoomSteps[this.zoomSteps.length-1],onClick:this.onZoomInButtonClick,type:"button"},a("swirl-icon-add",{key:"0bccbeeab43e9622876c3e21f237d6801049eb2e"})),a("button",{key:"3e784a60f9576a6d7e946c24fe7ba94e033a329b","aria-label":this.zoomOutButtonLabel,class:"pdf-reader__mobile-zoom-button",disabled:this.zoom===this.zoomSteps[0],onClick:this.onZoomOutButtonClick,type:"button"},a("swirl-icon-remove",{key:"7460724f2377e1f2b0f093e0357daeeeeac45646"}))))),a("swirl-popover",{key:"9188d9917fb65d3c507acdfee4231c1a36da65a6",animation:"scale-in-y",disableScrollLock:!0,id:"menu",label:this.menuLabel,placement:"bottom-end",ref:e=>this.menu=e},a("swirl-stack",{key:"81a5bb0f10527babbced69c2a9f4628e3067c240"},a("div",{key:"32ab5cf83ad59405737fe2084a10c9832cdb6bbc",class:"pdf-reader__meta"},a("div",{key:"8aa054288d031d698b7ba07b67709ffcde321026",class:"pdf-reader__file-icon"},a("svg",{key:"a4f75213169094f2e10b79f56661b384e6e1be88",fill:"none",height:"36",viewBox:"0 0 24 36",width:"24"},a("path",{key:"049167e965ec649b63c9cf32434775b10e9880f6",d:"M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z",fill:"white"}),a("path",{key:"a5d52fb24eb61373039525ef084c5a4800aef716",d:"M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z",fill:"white"}),a("path",{key:"593b8a5a17bcd63ac2a7fd1f4b755d761e03eafe",d:"M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z",fill:"white"}),a("path",{key:"1d98b763f89ce2101b521b401aaf583d90d150c3",d:"M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z",fill:"#FF574D"}),a("path",{key:"75fc68d079e3daa2d8f6ef900039fa6b7d2439fd",d:"M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z",fill:"white"}),a("path",{key:"37f4ac3842548193f96294e62f1cad4acc1838d7",d:"M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z",fill:"white"}),a("path",{key:"eb530f122cc39f8cd82a92f49fb4e8aaf1221f05",d:"M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z",fill:"white"}),a("path",{key:"f6a831a486216c419dc8cd246ff5d2f30cb0e1bd",d:"M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z",fill:"white"}))),a("div",{key:"8cc635e45dcb12c7daa6f4a05463141328e908f3",class:"pdf-reader__file-info"},a("swirl-text",{key:"1022cce807b05adeb0fedb53d9325f6dc6525828",truncate:!0,weight:"semibold"},this.label),a("swirl-text",{key:"b89b06d4a23cdd711c831adad1d3f264d43d8d9c",color:"subdued",size:"sm",truncate:!0},this.fileTypeLabel))),e&&a("swirl-separator",{key:"65863974739a0ff6939224f4a65bd6d0cc0d8d7f"}),a("swirl-action-list",{key:"9e01e2145dac1ab6f91409f4a1e39a8922f7c55f",class:"pdf-reader__menu"},this.printButtonEnabled&&a("swirl-action-list-item",{key:"30d9ee00998274ec18d8462bacd7d613b05312ae",class:"pdf-reader__print-button",icon:"<swirl-icon-print></swirl-icon-print>",label:this.printButtonLabel,onClick:this.onPrintButtonClick}),this.downloadButtonEnabled&&a("swirl-action-list-item",{key:"288a96bf2535f116acb7479961239aa5a85fce01",class:"pdf-reader__download-button",disabled:this.downloading,icon:this.downloading?'<swirl-spinner size="xs"></swirl-spinner>':"<swirl-icon-download></swirl-icon-download>",label:this.downloadButtonLabel,onClick:this.onDownloadButtonClick}),a("slot",{key:"408a1a7c68046ff263e6e2731e2edbc00206dceb",name:"menu-items"}))))))}get el(){return this}static get watchers(){return{showThumbnails:[{watchShowThumbnails:0}]}}static get style(){return':host{--thumbnails-width:7rem;display:block}:host {box-sizing:border-box}.pdf-reader{position:fixed;z-index:var(--s-z-40);background-color:var(--s-surface-neutral-subdued);inset:0;touch-action:pan-x pan-y;border:none;padding:0;width:100%;height:100%;max-width:none;max-height:none;overflow:visible}.pdf-reader::backdrop{display:none}.pdf-reader:not([open]){display:none}.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{animation:0.15s pdf-reader-fade-in}@media (prefers-reduced-motion){.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{animation:none}}.pdf-reader--closing{animation:0.15s pdf-reader-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.pdf-reader--closing{animation:none}}.pdf-reader--show-thumbnails .pdf-reader__thumbnails{max-width:var(--thumbnails-width)}.pdf-reader--show-thumbnails .pdf-reader__floating-tools{left:calc(var(--s-space-16) + var(--thumbnails-width))}.pdf-reader--hide-menu .pdf-reader__menu{display:none}.pdf-reader__body{position:relative;width:100%;height:100%}.pdf-reader__header{display:flex;height:calc(4rem + env(safe-area-inset-top, 0));padding-top:env(safe-area-inset-top, 0);padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-8)}.pdf-reader__header-left,.pdf-reader__header-right{display:flex;flex-grow:1;align-items:center;gap:var(--s-space-8);min-width:0}@media (min-width: 768px){.pdf-reader__header-left,.pdf-reader__header-right{flex-basis:calc(100 / 3 * 1%);flex-grow:0}}.pdf-reader__header-right{justify-content:flex-end;flex-shrink:0}.pdf-reader__header-center{display:none;flex-grow:1;justify-content:center;align-items:center;gap:var(--s-space-16)}@media (min-width: 768px){.pdf-reader__header-center{display:flex}}.pdf-reader__label{overflow:hidden;flex-grow:1;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.pdf-reader__zoom-button-container{display:flex;align-items:center;gap:var(--s-space-8)}.pdf-reader__zoom-button-container>:not(:last-child){position:relative}.pdf-reader__zoom-button-container>:not(:last-child):after{position:absolute;top:50%;right:calc(-1 * var(--s-space-4));width:var(--s-border-width-default);height:1.5rem;background-color:var(--s-border-default);content:"";transform:translate3d(50%, -50%, 0)}.pdf-reader__zoom-select-container{position:relative}.pdf-reader__zoom-select{display:inline-flex;height:2.5rem;padding-right:var(--s-space-12);padding-right:calc(var(--s-space-8) + 1.5rem + var(--s-space-12));padding-left:var(--s-space-12);justify-content:flex-start;align-items:center;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-sm);color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pdf-reader__zoom-select:focus:not(:focus-visible){outline:none}.pdf-reader__zoom-select:focus-visible{outline-color:var(--s-focus-default)}.pdf-reader__zoom-select-icon{position:absolute;top:50%;right:var(--s-space-8);display:inline-flex;transform:translateY(-50%);pointer-events:none}.pdf-reader__content{display:flex;width:100%;height:calc(100% - 4rem)}.pdf-reader__thumbnails{display:flex;overflow-x:hidden;overflow-y:auto;max-width:0;height:100%;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);flex-basis:var(--thumbnails-width);flex-grow:0;flex-shrink:0;align-items:center;background-color:var(--s-background-default);flex-direction:column;transition:max-width 0.2s linear;box-shadow:inset calc(-1 * var(--s-border-width-default)) 0 0 0 var(--s-border-default);gap:var(--s-space-4)}.pdf-reader__thumbnail{width:5rem;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);background-color:transparent;cursor:pointer}.pdf-reader__thumbnail>img{display:inline-flex;width:100%}.pdf-reader__thumbnail--active{border-width:0.125rem;border-color:var(--s-border-highlight)}.pdf-reader__viewer{flex-grow:1}.pdf-reader__mobile-zoom-controls{position:absolute;z-index:1;right:var(--s-space-16);bottom:var(--s-space-32);display:flex;padding-bottom:var(--s-space-4);flex-direction:column;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__mobile-zoom-controls{display:none}}.pdf-reader__mobile-zoom-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.pdf-reader__mobile-zoom-button:disabled{cursor:default}.pdf-reader__floating-tools{position:fixed;z-index:1;bottom:var(--s-space-16);left:var(--s-space-16);display:none;flex-direction:column;transition:left 0.2s linear;gap:var(--s-space-12)}@media (min-width: 768px){.pdf-reader__floating-tools{display:flex}}.pdf-reader__floating-tool-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer}.pdf-reader__meta{display:flex;padding-top:var(--s-space-4);padding-right:var(--s-space-16);padding-bottom:var(--s-space-4);padding-left:var(--s-space-8);align-items:center;gap:var(--s-space-12)}@media (min-width: 768px){.pdf-reader__meta{max-width:18rem}}.pdf-reader__file-icon{display:inline-flex;padding-left:var(--s-space-4);flex-shrink:0}.pdf-reader__file-info{display:flex;min-width:0;flex-grow:1;flex-direction:column}@keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}'}},[257,"swirl-pdf-reader",{autoZoomLabel:[1,"auto-zoom-label"],closeButtonLabel:[1,"close-button-label"],downloadButtonEnabled:[4,"download-button-enabled"],downloadButtonLabel:[1,"download-button-label"],file:[1],fileName:[1,"file-name"],fileTypeLabel:[1,"file-type-label"],label:[1],menuLabel:[1,"menu-label"],menuTriggerLabel:[1,"menu-trigger-label"],pdfWorkerSrc:[1,"pdf-worker-src"],printButtonEnabled:[4,"print-button-enabled"],printButtonLabel:[1,"print-button-label"],sideBySideButtonLabel:[1,"side-by-side-button-label"],thumbnailButtonLabel:[1,"thumbnail-button-label"],thumbnailsButtonLabel:[1,"thumbnails-button-label"],thumbnailsLabel:[1,"thumbnails-label"],zoomInButtonLabel:[1,"zoom-in-button-label"],zoomOutButtonLabel:[1,"zoom-out-button-label"],zoomSelectLabel:[1,"zoom-select-label"],skipNativeDownload:[4,"skip-native-download"],active:[32],closing:[32],opening:[32],downloading:[32],loadingThumbnails:[32],thumbnails:[32],showThumbnails:[32],viewMode:[32],visiblePages:[32],zoom:[32],zoomSteps:[32],open:[64],close:[64]},[[9,"resize","onWindowResize"]],{showThumbnails:[{watchShowThumbnails:0}]}]),N=W,O=function(){"undefined"!=typeof customElements&&["swirl-pdf-reader","swirl-action-list","swirl-action-list-item","swirl-button","swirl-file-viewer","swirl-file-viewer-audio","swirl-file-viewer-csv","swirl-file-viewer-fallback","swirl-file-viewer-image","swirl-file-viewer-pdf","swirl-file-viewer-text","swirl-file-viewer-video","swirl-icon-add","swirl-icon-error","swirl-icon-expand-more","swirl-icon-file","swirl-icon-file-copy","swirl-icon-fullscreen","swirl-icon-fullscreen-exit","swirl-icon-menu-book","swirl-icon-remove","swirl-inline-error","swirl-popover","swirl-popover-trigger","swirl-separator","swirl-spinner","swirl-stack","swirl-text","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-pdf-reader":customElements.get(r(e))\|\|customElements.define(r(e),W);break;case"swirl-action-list":customElements.get(r(e))\|\|f();break;case"swirl-action-list-item":customElements.get(r(e))\|\|b();break;case"swirl-button":customElements.get(r(e))\|\|h();break;case"swirl-file-viewer":customElements.get(r(e))\|\|p();break;case"swirl-file-viewer-audio":customElements.get(r(e))\|\|m();break;case"swirl-file-viewer-csv":customElements.get(r(e))\|\|u();break;case"swirl-file-viewer-fallback":customElements.get(r(e))\|\|w();break;case"swirl-file-viewer-image":customElements.get(r(e))\|\|v();break;case"swirl-file-viewer-pdf":customElements.get(r(e))\|\|_();break;case"swirl-file-viewer-text":customElements.get(r(e))\|\|g();break;case"swirl-file-viewer-video":customElements.get(r(e))\|\|k();break;case"swirl-icon-add":customElements.get(r(e))\|\|y();break;case"swirl-icon-error":customElements.get(r(e))\|\|x();break;case"swirl-icon-expand-more":customElements.get(r(e))\|\|C();break;case"swirl-icon-file":customElements.get(r(e))\|\|z();break;case"swirl-icon-file-copy":customElements.get(r(e))\|\|j();break;case"swirl-icon-fullscreen":customElements.get(r(e))\|\|E();break;case"swirl-icon-fullscreen-exit":customElements.get(r(e))\|\|H();break;case"swirl-icon-menu-book":customElements.get(r(e))\|\|V();break;case"swirl-icon-remove":customElements.get(r(e))\|\|L();break;case"swirl-inline-error":customElements.get(r(e))\|\|M();break;case"swirl-popover":customElements.get(r(e))\|\|Z();break;case"swirl-popover-trigger":customElements.get(r(e))\|\|B();break;case"swirl-separator":customElements.get(r(e))\|\|S();break;case"swirl-spinner":customElements.get(r(e))\|\|T();break;case"swirl-stack":customElements.get(r(e))\|\|D();break;case"swirl-text":customElements.get(r(e))\|\|P();break;case"swirl-visually-hidden":customElements.get(r(e))\|\|F()}}))};export{N as SwirlPdfReader,O as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as i,createEvent as a,h as s,Host as t,transformTag as r}from"@stencil/core/internal/client";import{d as o,e as l}from"./body-scroll-lock.js";import{c as d}from"./index2.js";import{q as n,i as c}from"./utils.js";import{d as f}from"./swirl-action-list2.js";import{d as b}from"./swirl-action-list-item2.js";import{d as h}from"./swirl-button2.js";import{d as p}from"./swirl-file-viewer2.js";import{d as m}from"./swirl-file-viewer-audio2.js";import{d as u}from"./swirl-file-viewer-csv2.js";import{d as w}from"./swirl-file-viewer-fallback2.js";import{d as v}from"./swirl-file-viewer-image2.js";import{d as _}from"./swirl-file-viewer-pdf2.js";import{d as g}from"./swirl-file-viewer-text2.js";import{d as k}from"./swirl-file-viewer-video2.js";import{d as y}from"./swirl-icon-add2.js";import{d as x}from"./swirl-icon-error2.js";import{d as C}from"./swirl-icon-expand-more2.js";import{d as z}from"./swirl-icon-file2.js";import{d as j}from"./swirl-icon-file-copy2.js";import{d as E}from"./swirl-icon-fullscreen2.js";import{d as H}from"./swirl-icon-fullscreen-exit2.js";import{d as V}from"./swirl-icon-menu-book2.js";import{d as L}from"./swirl-icon-remove2.js";import{d as M}from"./swirl-inline-error2.js";import{d as Z}from"./swirl-popover2.js";import{d as B}from"./swirl-popover-trigger2.js";import{d as S}from"./swirl-separator2.js";import{d as T}from"./swirl-spinner2.js";import{d as D}from"./swirl-stack2.js";import{d as P}from"./swirl-text2.js";import{d as F}from"./swirl-visually-hidden2.js";const W=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.modalClose=a(this,"modalClose",7),this.modalOpen=a(this,"modalOpen",7),this.autoZoomLabel="Full width",this.closeButtonLabel="Close PDF viewer",this.downloadButtonEnabled=!0,this.downloadButtonLabel="Download PDF",this.fileTypeLabel="PDF Document",this.menuLabel="File menu",this.menuTriggerLabel="Open file menu",this.printButtonEnabled=!0,this.printButtonLabel="Print PDF",this.sideBySideButtonLabel="Toggle side by side view",this.thumbnailButtonLabel="Scroll to page",this.thumbnailsButtonLabel="Toggle thumbnails",this.thumbnailsLabel="Page thumbnails",this.zoomInButtonLabel="Zoom in",this.zoomOutButtonLabel="Zoom out",this.zoomSelectLabel="Select zoom",this.skipNativeDownload=!1,this.active=!1,this.closing=!1,this.opening=!1,this.downloading=!1,this.loadingThumbnails=!1,this.thumbnails=[],this.viewMode="single",this.visiblePages=[],this.desktopZoomSteps=[.5,.75,1,1.25,1.5,2,3,4],this.mobileZoomSteps=[.5,.75,1,1.25,1.5],this.onClose=()=>{this.closing=!1,this.active=!1,this.modalClose.emit()},this.toggleViewMode=()=>{this.viewMode="single"===this.viewMode?"side-by-side":"single"},this.toggleThumbnals=()=>{this.showThumbnails=!this.showThumbnails},this.onKeyDown=e=>{"Escape"===e.code&&(e.stopImmediatePropagation(),e.preventDefault(),this.close())},this.onActivate=async e=>{this.pdfViewer=e.detail,this.lockBodyScroll()},this.onVisiblePagesChange=async e=>{this.visiblePages=e.detail},this.onCloseButtonClick=()=>{this.close()},this.onPrintButtonClick=()=>{this.pdfViewer.print(),this.menu.close()},this.onDownloadButtonClick=async()=>{this.downloading=!0,await this.viewer.download(),this.downloading=!1,this.menu.close()},this.onZoomInButtonClick=()=>{const e=this.zoomSteps.indexOf(+this.zoom);this.zoom=-1===e?1:this.zoomSteps[Math.min(this.zoomSteps.length-1,e+1)]},this.onZoomOutButtonClick=()=>{const e=this.zoomSteps.indexOf(+this.zoom);this.zoom=-1===e?1:this.zoomSteps[Math.max(0,e-1)]},this.onZoomAutoButtonClick=()=>{this.zoom="auto"===this.zoom?1:"auto"},this.onZoomChange=e=>{const i=e.target.value;this.zoom="auto"===i?i:+i},this.onThumbnailClick=e=>()=>{const i=n(this.el,`[data-page-number="${e+1}"]`)?.[0];i?.scrollIntoView()}}componentWillLoad(){this.updateZoomSteps(),this.zoom=c()?"auto":1}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps()}disconnectedCallback(){this.unlockBodyScroll(),this.modalEl?.open&&this.modalEl.close()}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}onWindowResize(){this.pdfViewer&&(this.updateZoomSteps(),this.zoom=c()?"auto":1)}watchShowThumbnails(){this.showThumbnails&&(this.loadingThumbnails=!0,queueMicrotask((async()=>{await this.generateThumbnails(),this.loadingThumbnails=!1})))}async open(){this.opening=!0,this.modalEl&&(this.modalEl.showModal(),this.active=!0,this.modalOpen.emit())}async close(){this.closing\|\|(this.closing=!0,this.unlockBodyScroll(),setTimeout((()=>{this.modalEl.close()}),150))}lockBodyScroll(){const e=this.pdfViewer?.shadowRoot.querySelector(".file-viewer-pdf__pages");e&&o(e)}unlockBodyScroll(){const e=this.pdfViewer?.shadowRoot.querySelector(".file-viewer-pdf__pages");e&&l(e)}async generateThumbnails(){this.thumbnails=await this.pdfViewer.getThumbnails()}updateZoomSteps(){this.zoomSteps=c()?this.mobileZoomSteps:this.desktopZoomSteps}render(){const e=!!this.el.querySelector("[slot='menu-items']")\|\|this.printButtonEnabled\|\|this.downloadButtonEnabled,i=d("pdf-reader",{"pdf-reader--closing":this.closing,"pdf-reader--hide-menu":!e,"pdf-reader--show-thumbnails":this.showThumbnails});return s(t,{key:"4c20781cd3fab75570c17f5f364b65641ed4bd87"},s("dialog",{key:"5926f8bef32559f97838b560023f1a2bee491140","aria-label":this.label,class:i,id:"pdf-reader",onClose:this.onClose,onKeyDown:this.onKeyDown,ref:e=>this.modalEl=e},s("div",{key:"f3fab098c8383cf647c0d2be8cf99d5f212591c5",class:"pdf-reader__body",role:"document"},s("header",{key:"11912b595f36d40c200feaefebed878a48a3c66b",class:"pdf-reader__header"},s("span",{key:"9d9a7d00239219d53c5c3e1b026286b9f81980cf",class:"pdf-reader__header-left"},s("swirl-button",{key:"6a9711943a6699dabd5d619325bbeb7a0aea1b75",class:"pdf-reader__close-button",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),s("span",{key:"7f32b110ef9591de71f966d915c0b1e275ea93be",class:"pdf-reader__label"},this.label)),s("span",{key:"bcdf604e8cf97fdec76abe84f6158a634a76a925",class:"pdf-reader__header-center"},s("span",{key:"4552edc3b4ad94dc4536ec64dc99662bab16b4f9",class:"pdf-reader__zoom-button-container"},s("swirl-button",{key:"359271b6392779fcfd10333578b8af921935eab3",class:"pdf-reader__zoom-button",disabled:this.zoom===this.zoomSteps[0],hideLabel:!0,icon:"<swirl-icon-remove></swirl-icon-remove>",label:this.zoomOutButtonLabel,onClick:this.onZoomOutButtonClick}),s("swirl-button",{key:"a9b328a308c822d12de59017b691107ca6c0bebd",class:"pdf-reader__zoom-button",disabled:this.zoom===this.zoomSteps[this.zoomSteps.length-1],hideLabel:!0,icon:"<swirl-icon-add></swirl-icon-add>",label:this.zoomInButtonLabel,onClick:this.onZoomInButtonClick})),s("span",{key:"5c6ed96145c5195d3470dfce43fb03e3109579bc",class:"pdf-reader__zoom-select-container"},s("select",{key:"0c6ff6c992debe35400cecbd89d02699d82d7224","aria-label":this.zoomSelectLabel,class:"pdf-reader__zoom-select",name:"zoom-select",id:"zoom-select",onChange:this.onZoomChange},s("option",{key:"33cb3df4ea4a151912ad6a0118a49529ea563a5f",selected:"auto"===this.zoom,value:"auto"},this.autoZoomLabel),this.zoomSteps.map((e=>s("option",{key:e,selected:this.zoom===e,value:e},100e,"%")))),s("swirl-icon-expand-more",{key:"18df516d1a0908ab34a8b92c5106121fb89aa551",class:"pdf-reader__zoom-select-icon"}))),s("span",{key:"2270430a4f2c84f5deca4b6432bd5869ae0f804a",class:"pdf-reader__header-right"},s("swirl-popover-trigger",{key:"234cde9ebd9ad0e83cab4d9679917d48a4c39b95",swirlPopover:this.menu},s("swirl-button",{key:"685109ee0512119fa9fe856396321fb70b32b6fa",class:"pdf-reader__menu-button",hideLabel:!0,icon:"<swirl-icon-more-vertikal></swirl-icon-more-vertikal>",label:this.menuTriggerLabel}))),s("span",{key:"142091dcd600b58141ac5940e4a92f4cc3cf5dbf",class:"pdf-reader__floating-tools"},s("button",{key:"739edbff10ecdc3c2f1cda210d5b02e450bf7f19","aria-label":this.sideBySideButtonLabel,class:"pdf-reader__floating-tool-button",onClick:this.toggleViewMode,type:"button"},s("swirl-icon-menu-book",{key:"bd4df51b8c498088e4e2056d3fc9d773d334040c"})),s("button",{key:"bf662f3ef930e752d08e85bdbde7c9d166618f04","aria-controls":"thumbnails","aria-expanded":!!this.showThumbnails+"","aria-label":this.thumbnailsButtonLabel,class:"pdf-reader__floating-tool-button",onClick:this.toggleThumbnals,type:"button"},s("swirl-icon-file-copy",{key:"3eda8d2d8fd00f02b0ca008539e176ffb3fa746c"})))),s("div",{key:"13b8fea94412f8b31bee8c5332f82a1f494a8d26",class:"pdf-reader__content"},s("nav",{key:"c581271ba908853758eacf7d1b3469223afc8929","aria-label":this.thumbnailsLabel,class:"pdf-reader__thumbnails",id:"thumbnails"},this.loadingThumbnails&&s("swirl-spinner",{key:"e327e7e9c246dfd4f54d449cea80541011744da0"}),!this.loadingThumbnails&&this.thumbnails.map(((e,i)=>{const a=d("pdf-reader__thumbnail",{"pdf-reader__thumbnail--active":this.visiblePages[0]===i+1});return s("button",{"aria-label":`${this.thumbnailButtonLabel} ${i+1}`,class:a,onClick:this.onThumbnailClick(i),type:"button"},s("img",{src:e.toDataURL("image/png"),alt:""}))}))),s("swirl-file-viewer",{key:"ce28a976a9e2b5961e81ebba75c75dcf8afbc696",active:this.active,class:"pdf-reader__viewer",disablePrint:!this.printButtonEnabled,file:this.file,fileName:this.fileName,onActivate:this.onActivate,onVisiblePagesChange:this.onVisiblePagesChange,pdfWorkerSrc:this.pdfWorkerSrc,ref:e=>this.viewer=e,type:"application/pdf",viewMode:this.viewMode,zoom:this.zoom,skipNativeDownload:this.skipNativeDownload}),s("div",{key:"6ffa76e97598cf46a1530d3838e886ed2c5417a3",class:"pdf-reader__mobile-zoom-controls"},s("button",{key:"bd21c4f678b56f98a8618990d99ea036c2464e11","aria-label":this.autoZoomLabel,class:"pdf-reader__mobile-zoom-button",onClick:this.onZoomAutoButtonClick,type:"button"},s("auto"===this.zoom?"swirl-icon-fullscreen-exit":"swirl-icon-fullscreen",null)),s("button",{key:"f0c4b8a0366d88069a21e3b9fcb0774a1f433b01","aria-label":this.zoomInButtonLabel,class:"pdf-reader__mobile-zoom-button",disabled:this.zoom===this.zoomSteps[this.zoomSteps.length-1],onClick:this.onZoomInButtonClick,type:"button"},s("swirl-icon-add",{key:"a8478673947ee56abd9934456a7a89b55e804f2e"})),s("button",{key:"ddd5dcbdd7cdd1c3127a1e90fb64653b574e954b","aria-label":this.zoomOutButtonLabel,class:"pdf-reader__mobile-zoom-button",disabled:this.zoom===this.zoomSteps[0],onClick:this.onZoomOutButtonClick,type:"button"},s("swirl-icon-remove",{key:"cdf17f91e692be9ee2f4df4363a701839595cdc9"}))))),s("swirl-popover",{key:"67b575b1518aa4c40a38636b6f81f4d9204f8476",animation:"scale-in-y",disableScrollLock:!0,id:"menu",label:this.menuLabel,placement:"bottom-end",ref:e=>this.menu=e},s("swirl-stack",{key:"d35ab0c1b75e51f9a277ca334251704ae4d8d63b"},s("div",{key:"5b121254aeeefef7a22600d8b215a6a7a2a227ac",class:"pdf-reader__meta"},s("div",{key:"95e24cfa2b6666d2ca9f7d531c5e0f098c3d16e1",class:"pdf-reader__file-icon"},s("svg",{key:"adb77e1365cb68112bfcbd86aeef732131c2f876",fill:"none",height:"36",viewBox:"0 0 24 36",width:"24"},s("path",{key:"478c739a15d1c7e2c57920062f3f2d9d1db14cd5",d:"M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z",fill:"white"}),s("path",{key:"c493fb6e455a69717b7f323955515431a19efac7",d:"M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z",fill:"white"}),s("path",{key:"dcfc4a315e999f4f9bb03d1ee77955c7ab5baa5a",d:"M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z",fill:"white"}),s("path",{key:"b1c48147b4fa2f2daf2a832bf48e5903d2e4b1e8",d:"M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z",fill:"#FF574D"}),s("path",{key:"ab9e1b4c3f4ccb7ed28b3e2c35e37219fe00df67",d:"M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z",fill:"white"}),s("path",{key:"01d6777ad0ba8f0c6aa9d71bb2da99ddd740118f",d:"M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z",fill:"white"}),s("path",{key:"0e50132bdd5130a93b7036ee75e9c2dc812496d8",d:"M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z",fill:"white"}),s("path",{key:"446913cdd34d14d4496cf906b0e1effcaf3300c4",d:"M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z",fill:"white"}))),s("div",{key:"8b7a0ccf00413ee10261cb148a30db070211ef21",class:"pdf-reader__file-info"},s("swirl-text",{key:"0f61c5a25f0465abcecd58af639d7b8916920c53",truncate:!0,weight:"semibold"},this.label),s("swirl-text",{key:"39b036cb3863a1947f9196ce26958253e18e3689",color:"subdued",size:"sm",truncate:!0},this.fileTypeLabel))),e&&s("swirl-separator",{key:"8c87559c3d10eac80b207a343ecb76a2ead7b147"}),s("swirl-action-list",{key:"f6b4db83f3922cd7747826624d8c3f4837134fb8",class:"pdf-reader__menu"},this.printButtonEnabled&&s("swirl-action-list-item",{key:"0dc8f3346a722653b2311c2e1fd802bbd6066a35",class:"pdf-reader__print-button",icon:"<swirl-icon-print></swirl-icon-print>",label:this.printButtonLabel,onClick:this.onPrintButtonClick}),this.downloadButtonEnabled&&s("swirl-action-list-item",{key:"ed970879afd009a8f77c14e49c62034a4326b5cd",class:"pdf-reader__download-button",disabled:this.downloading,icon:this.downloading?'<swirl-spinner size="xs"></swirl-spinner>':"<swirl-icon-download></swirl-icon-download>",label:this.downloadButtonLabel,onClick:this.onDownloadButtonClick}),s("slot",{key:"b63b73bd92b22f2eda8276a03f6a542b178861cb",name:"menu-items"}))))))}get el(){return this}static get watchers(){return{showThumbnails:[{watchShowThumbnails:0}]}}static get style(){return':host{--thumbnails-width:7rem;display:block}:host {box-sizing:border-box}.pdf-reader{position:fixed;z-index:var(--s-z-40);background-color:var(--s-surface-neutral-subdued);inset:0;touch-action:pan-x pan-y;border:none;padding:0;width:100%;height:100%;max-width:none;max-height:none;overflow:visible}.pdf-reader::backdrop{display:none}.pdf-reader:not([open]){display:none}.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{animation:0.15s pdf-reader-fade-in}@media (prefers-reduced-motion){.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{animation:none}}.pdf-reader--closing{animation:0.15s pdf-reader-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.pdf-reader--closing{animation:none}}.pdf-reader--show-thumbnails .pdf-reader__thumbnails{max-width:var(--thumbnails-width)}.pdf-reader--show-thumbnails .pdf-reader__floating-tools{left:calc(var(--s-space-16) + var(--thumbnails-width))}.pdf-reader--hide-menu .pdf-reader__menu{display:none}.pdf-reader__body{position:relative;width:100%;height:100%}.pdf-reader__header{display:flex;height:calc(4rem + env(safe-area-inset-top, 0));padding-top:env(safe-area-inset-top, 0);padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-8)}.pdf-reader__header-left,.pdf-reader__header-right{display:flex;flex-grow:1;align-items:center;gap:var(--s-space-8);min-width:0}@media (min-width: 768px){.pdf-reader__header-left,.pdf-reader__header-right{flex-basis:calc(100 / 3 * 1%);flex-grow:0}}.pdf-reader__header-right{justify-content:flex-end;flex-shrink:0}.pdf-reader__header-center{display:none;flex-grow:1;justify-content:center;align-items:center;gap:var(--s-space-16)}@media (min-width: 768px){.pdf-reader__header-center{display:flex}}.pdf-reader__label{overflow:hidden;flex-grow:1;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.pdf-reader__zoom-button-container{display:flex;align-items:center;gap:var(--s-space-8)}.pdf-reader__zoom-button-container>:not(:last-child){position:relative}.pdf-reader__zoom-button-container>:not(:last-child):after{position:absolute;top:50%;right:calc(-1 * var(--s-space-4));width:var(--s-border-width-default);height:1.5rem;background-color:var(--s-border-default);content:"";transform:translate3d(50%, -50%, 0)}.pdf-reader__zoom-select-container{position:relative}.pdf-reader__zoom-select{display:inline-flex;height:2.5rem;padding-right:var(--s-space-12);padding-right:calc(var(--s-space-8) + 1.5rem + var(--s-space-12));padding-left:var(--s-space-12);justify-content:flex-start;align-items:center;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-sm);color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pdf-reader__zoom-select:focus:not(:focus-visible){outline:none}.pdf-reader__zoom-select:focus-visible{outline-color:var(--s-focus-default)}.pdf-reader__zoom-select-icon{position:absolute;top:50%;right:var(--s-space-8);display:inline-flex;transform:translateY(-50%);pointer-events:none}.pdf-reader__content{display:flex;width:100%;height:calc(100% - 4rem)}.pdf-reader__thumbnails{display:flex;overflow-x:hidden;overflow-y:auto;max-width:0;height:100%;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);flex-basis:var(--thumbnails-width);flex-grow:0;flex-shrink:0;align-items:center;background-color:var(--s-background-default);flex-direction:column;transition:max-width 0.2s linear;box-shadow:inset calc(-1 * var(--s-border-width-default)) 0 0 0 var(--s-border-default);gap:var(--s-space-4)}.pdf-reader__thumbnail{width:5rem;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);background-color:transparent;cursor:pointer}.pdf-reader__thumbnail>img{display:inline-flex;width:100%}.pdf-reader__thumbnail--active{border-width:0.125rem;border-color:var(--s-border-highlight)}.pdf-reader__viewer{flex-grow:1}.pdf-reader__mobile-zoom-controls{position:absolute;z-index:1;right:var(--s-space-16);bottom:var(--s-space-32);display:flex;padding-bottom:var(--s-space-4);flex-direction:column;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__mobile-zoom-controls{display:none}}.pdf-reader__mobile-zoom-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.pdf-reader__mobile-zoom-button:disabled{cursor:default}.pdf-reader__floating-tools{position:fixed;z-index:1;bottom:var(--s-space-16);left:var(--s-space-16);display:none;flex-direction:column;transition:left 0.2s linear;gap:var(--s-space-12)}@media (min-width: 768px){.pdf-reader__floating-tools{display:flex}}.pdf-reader__floating-tool-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer}.pdf-reader__meta{display:flex;padding-top:var(--s-space-4);padding-right:var(--s-space-16);padding-bottom:var(--s-space-4);padding-left:var(--s-space-8);align-items:center;gap:var(--s-space-12)}@media (min-width: 768px){.pdf-reader__meta{max-width:18rem}}.pdf-reader__file-icon{display:inline-flex;padding-left:var(--s-space-4);flex-shrink:0}.pdf-reader__file-info{display:flex;min-width:0;flex-grow:1;flex-direction:column}@keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}'}},[257,"swirl-pdf-reader",{autoZoomLabel:[1,"auto-zoom-label"],closeButtonLabel:[1,"close-button-label"],downloadButtonEnabled:[4,"download-button-enabled"],downloadButtonLabel:[1,"download-button-label"],file:[1],fileName:[1,"file-name"],fileTypeLabel:[1,"file-type-label"],label:[1],menuLabel:[1,"menu-label"],menuTriggerLabel:[1,"menu-trigger-label"],pdfWorkerSrc:[1,"pdf-worker-src"],printButtonEnabled:[4,"print-button-enabled"],printButtonLabel:[1,"print-button-label"],sideBySideButtonLabel:[1,"side-by-side-button-label"],thumbnailButtonLabel:[1,"thumbnail-button-label"],thumbnailsButtonLabel:[1,"thumbnails-button-label"],thumbnailsLabel:[1,"thumbnails-label"],zoomInButtonLabel:[1,"zoom-in-button-label"],zoomOutButtonLabel:[1,"zoom-out-button-label"],zoomSelectLabel:[1,"zoom-select-label"],skipNativeDownload:[4,"skip-native-download"],active:[32],closing:[32],opening:[32],downloading:[32],loadingThumbnails:[32],thumbnails:[32],showThumbnails:[32],viewMode:[32],visiblePages:[32],zoom:[32],zoomSteps:[32],open:[64],close:[64]},[[9,"resize","onWindowResize"]],{showThumbnails:[{watchShowThumbnails:0}]}]),N=W,O=function(){"undefined"!=typeof customElements&&["swirl-pdf-reader","swirl-action-list","swirl-action-list-item","swirl-button","swirl-file-viewer","swirl-file-viewer-audio","swirl-file-viewer-csv","swirl-file-viewer-fallback","swirl-file-viewer-image","swirl-file-viewer-pdf","swirl-file-viewer-text","swirl-file-viewer-video","swirl-icon-add","swirl-icon-error","swirl-icon-expand-more","swirl-icon-file","swirl-icon-file-copy","swirl-icon-fullscreen","swirl-icon-fullscreen-exit","swirl-icon-menu-book","swirl-icon-remove","swirl-inline-error","swirl-popover","swirl-popover-trigger","swirl-separator","swirl-spinner","swirl-stack","swirl-text","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-pdf-reader":customElements.get(r(e))\|\|customElements.define(r(e),W);break;case"swirl-action-list":customElements.get(r(e))\|\|f();break;case"swirl-action-list-item":customElements.get(r(e))\|\|b();break;case"swirl-button":customElements.get(r(e))\|\|h();break;case"swirl-file-viewer":customElements.get(r(e))\|\|p();break;case"swirl-file-viewer-audio":customElements.get(r(e))\|\|m();break;case"swirl-file-viewer-csv":customElements.get(r(e))\|\|u();break;case"swirl-file-viewer-fallback":customElements.get(r(e))\|\|w();break;case"swirl-file-viewer-image":customElements.get(r(e))\|\|v();break;case"swirl-file-viewer-pdf":customElements.get(r(e))\|\|_();break;case"swirl-file-viewer-text":customElements.get(r(e))\|\|g();break;case"swirl-file-viewer-video":customElements.get(r(e))\|\|k();break;case"swirl-icon-add":customElements.get(r(e))\|\|y();break;case"swirl-icon-error":customElements.get(r(e))\|\|x();break;case"swirl-icon-expand-more":customElements.get(r(e))\|\|C();break;case"swirl-icon-file":customElements.get(r(e))\|\|z();break;case"swirl-icon-file-copy":customElements.get(r(e))\|\|j();break;case"swirl-icon-fullscreen":customElements.get(r(e))\|\|E();break;case"swirl-icon-fullscreen-exit":customElements.get(r(e))\|\|H();break;case"swirl-icon-menu-book":customElements.get(r(e))\|\|V();break;case"swirl-icon-remove":customElements.get(r(e))\|\|L();break;case"swirl-inline-error":customElements.get(r(e))\|\|M();break;case"swirl-popover":customElements.get(r(e))\|\|Z();break;case"swirl-popover-trigger":customElements.get(r(e))\|\|B();break;case"swirl-separator":customElements.get(r(e))\|\|S();break;case"swirl-spinner":customElements.get(r(e))\|\|T();break;case"swirl-stack":customElements.get(r(e))\|\|D();break;case"swirl-text":customElements.get(r(e))\|\|P();break;case"swirl-visually-hidden":customElements.get(r(e))\|\|F()}}))};export{N as SwirlPdfReader,O as defineCustomElement}

package/dist/components/swirl-popover-trigger2.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as t,HTMLElement as e,h as i,Host as s,transformTag as r}from"@stencil/core/internal/client";const o=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.hidePopoverWhenInvisible=!0,this.setAriaAttributes=!0,this.triggerOnClick=!0,this.triggerOnHover=!1,this.componentLoaded=!1,this.triggerIsActive=!1,this.popoverMouseEnter=()=>{this.stopHoverLingerTimer()},this.popoverMouseLeave=()=>{this.triggerIsActive&&this.mouseleaveHandler()},this.onMouseenter=()=>{this.triggerOnHover&&(this.stopHoverLingerTimer(),this.triggerIsActive=!0,this.hoverDelayReference=setTimeout((()=>{this.hoverDelayReference=void 0,this.triggerOnHover&&this.mouseenterHandler()}),this.hoverDelay))},this.mouseenterHandler=()=>{const t=this.getPopoverEl(),e=this.getTriggerEl();t.open(e,!0,"hover"),t.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),t.addEventListener("popoverClose",(()=>{this.updateTriggerElAriaAttributes(!1)}),{once:!0})},this.onMouseleave=()=>{clearTimeout(this.hoverDelayReference),this.mouseleaveHandler()},this.mouseleaveHandler=()=>{this.triggerOnHover&&this.startHoverLingerTimer()},this.onClick=()=>{if(!this.triggerOnClick)return;const t=this.getPopoverEl(),e=this.getTriggerEl();t.toggle(e,"click"),t.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),t.addEventListener("popoverClose",(()=>{this.updateTriggerElAriaAttributes(!1)}),{once:!0})},this.updateTriggerElAriaAttributes=t=>{if(!this.setAriaAttributes)return;const e=this.getTriggerEl();if(!Boolean(e))return;const i=this.getPopoverEl()?.id;e.tagName.startsWith("SWIRL-")?(this.triggerOnHover?(e.removeAttribute("swirl-aria-controls"),e.removeAttribute("swirl-aria-expanded")):(e.setAttribute("swirl-aria-controls",i),e.setAttribute("swirl-aria-expanded",String(t\|\|"false"))),e.setAttribute("swirl-aria-haspopup","dialog")):(this.triggerOnHover?(e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded")):(e.setAttribute("aria-controls",i),e.setAttribute("aria-expanded",String(t\|\|"false"))),e.setAttribute("aria-haspopup","dialog"))}}connectedCallback(){this.componentLoaded&&(this.setupHoverListeners(),this.setupIntersectionObserver())}componentDidLoad(){this.updateTriggerElAriaAttributes(),this.setupHoverListeners(),this.setupIntersectionObserver(),this.componentLoaded=!0}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.removeHoverListeners(),clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}watchPopover(){this.updateTriggerElAriaAttributes()}watchHover(){this.updateTriggerElAriaAttributes(),clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}getPopoverEl(){return"string"==typeof this.swirlPopover?document.querySelector(`#${this.swirlPopover}`):this.swirlPopover?.el??this.swirlPopover}getTriggerEl(){return 1!==this.el.children.length&&console.warn('[Swirl] The "swirl-popover-trigger" component expects exactly one child element.'),this.el.children[0]}setupIntersectionObserver(){if(this.intersectionObserver?.disconnect(),this.hidePopoverWhenInvisible){this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{root:this.parentScrollContainer,threshold:0});const t=this.el.querySelector("*");if(!Boolean(t))return;this.intersectionObserver.observe(t)}}onVisibilityChange(t){!t[0].isIntersecting&&this.isPopoverOpen()&&this.getPopoverEl()?.close()}setupHoverListeners(){this.popoverElRef=this.getPopoverEl(),Boolean(this.popoverElRef)&&(this.popoverElRef.addEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.addEventListener("mouseleave",this.popoverMouseLeave))}removeHoverListeners(){Boolean(this.popoverElRef)&&(this.popoverElRef.removeEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.removeEventListener("mouseleave",this.popoverMouseLeave))}startHoverLingerTimer(){clearTimeout(this.hoverLingerReference),this.hoverLingerReference=setTimeout((()=>{this.triggerIsActive&&this.isPopoverOpen()&&this.getPopoverEl().close(!0),this.triggerIsActive=!1}),this.hoverLingerDuration)}stopHoverLingerTimer(){clearTimeout(this.hoverLingerReference)}isPopoverOpen(){const t=this.getPopoverEl(),e=t?.shadowRoot.firstChild?.classList.contains("popover--active");return e}render(){return i(s,{key:"~~0b33e05299f463ea9cbedafe5a339e139bc885c9~~",onClick:this.onClick,onMouseenter:this.onMouseenter,onMouseleave:this.onMouseleave},i("slot",{key:"~~b5f8cf9b096da9fe9d9aa88d034423fe6c778ff2~~"}))}get el(){return this}static get watchers(){return{swirlPopover:[{watchPopover:0}],triggerOnHover:[{watchHover:0}]}}static get style(){return".sc-swirl-popover-trigger-h{display:contents}"}},[262,"swirl-popover-trigger",{hidePopoverWhenInvisible:[4,"hide-popover-when-invisible"],parentScrollContainer:[16],setAriaAttributes:[4,"set-aria-attributes"],swirlPopover:[1,"swirl-popover"],triggerOnClick:[4,"trigger-on-click"],triggerOnHover:[4,"trigger-on-hover"],hoverLingerDuration:[2,"hover-linger-duration"],hoverDelay:[2,"hover-delay"]},void 0,{swirlPopover:[{watchPopover:0}],triggerOnHover:[{watchHover:0}]}]);function h(){"undefined"!=typeof customElements&&["swirl-popover-trigger"].forEach((t=>{"swirl-popover-trigger"===t&&(customElements.get(r(t))\|\|customElements.define(r(t),o))}))}export{o as S,h as d}
1	+ import{proxyCustomElement as t,HTMLElement as e,h as i,Host as s,transformTag as r}from"@stencil/core/internal/client";const o=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.hidePopoverWhenInvisible=!0,this.setAriaAttributes=!0,this.triggerOnClick=!0,this.triggerOnHover=!1,this.componentLoaded=!1,this.triggerIsActive=!1,this.popoverMouseEnter=()=>{this.stopHoverLingerTimer()},this.popoverMouseLeave=()=>{this.triggerIsActive&&this.mouseleaveHandler()},this.onMouseenter=()=>{this.triggerOnHover&&(this.stopHoverLingerTimer(),this.triggerIsActive=!0,this.hoverDelayReference=setTimeout((()=>{this.hoverDelayReference=void 0,this.triggerOnHover&&this.mouseenterHandler()}),this.hoverDelay))},this.mouseenterHandler=()=>{const t=this.getPopoverEl(),e=this.getTriggerEl();t.open(e,!0,"hover"),t.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),t.addEventListener("popoverClose",(()=>{this.updateTriggerElAriaAttributes(!1)}),{once:!0})},this.onMouseleave=()=>{clearTimeout(this.hoverDelayReference),this.mouseleaveHandler()},this.mouseleaveHandler=()=>{this.triggerOnHover&&this.startHoverLingerTimer()},this.onClick=()=>{if(!this.triggerOnClick)return;const t=this.getPopoverEl(),e=this.getTriggerEl();t.toggle(e,"click"),t.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),t.addEventListener("popoverClose",(()=>{this.updateTriggerElAriaAttributes(!1)}),{once:!0})},this.updateTriggerElAriaAttributes=t=>{if(!this.setAriaAttributes)return;const e=this.getTriggerEl();if(!Boolean(e))return;const i=this.getPopoverEl()?.id;e.tagName.startsWith("SWIRL-")?(this.triggerOnHover?(e.removeAttribute("swirl-aria-controls"),e.removeAttribute("swirl-aria-expanded")):(e.setAttribute("swirl-aria-controls",i),e.setAttribute("swirl-aria-expanded",String(t\|\|"false"))),e.setAttribute("swirl-aria-haspopup","dialog")):(this.triggerOnHover?(e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded")):(e.setAttribute("aria-controls",i),e.setAttribute("aria-expanded",String(t\|\|"false"))),e.setAttribute("aria-haspopup","dialog"))}}connectedCallback(){this.componentLoaded&&(this.setupHoverListeners(),this.setupIntersectionObserver())}componentDidLoad(){this.updateTriggerElAriaAttributes(),this.setupHoverListeners(),this.setupIntersectionObserver(),this.componentLoaded=!0}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.removeHoverListeners(),clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}watchPopover(){this.updateTriggerElAriaAttributes()}watchHover(){this.updateTriggerElAriaAttributes(),clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}getPopoverEl(){return"string"==typeof this.swirlPopover?document.querySelector(`#${this.swirlPopover}`):this.swirlPopover?.el??this.swirlPopover}getTriggerEl(){return 1!==this.el.children.length&&console.warn('[Swirl] The "swirl-popover-trigger" component expects exactly one child element.'),this.el.children[0]}setupIntersectionObserver(){if(this.intersectionObserver?.disconnect(),this.hidePopoverWhenInvisible){this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{root:this.parentScrollContainer,threshold:0});const t=this.el.querySelector("*");if(!Boolean(t))return;this.intersectionObserver.observe(t)}}onVisibilityChange(t){!t[0].isIntersecting&&this.isPopoverOpen()&&this.getPopoverEl()?.close()}setupHoverListeners(){this.popoverElRef=this.getPopoverEl(),Boolean(this.popoverElRef)&&(this.popoverElRef.addEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.addEventListener("mouseleave",this.popoverMouseLeave))}removeHoverListeners(){Boolean(this.popoverElRef)&&(this.popoverElRef.removeEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.removeEventListener("mouseleave",this.popoverMouseLeave))}startHoverLingerTimer(){clearTimeout(this.hoverLingerReference),this.hoverLingerReference=setTimeout((()=>{this.triggerIsActive&&this.isPopoverOpen()&&this.getPopoverEl().close(!0),this.triggerIsActive=!1}),this.hoverLingerDuration)}stopHoverLingerTimer(){clearTimeout(this.hoverLingerReference)}isPopoverOpen(){const t=this.getPopoverEl(),e=t?.shadowRoot.firstChild?.classList.contains("popover--active");return e}render(){return i(s,{key:"ce7f2f51c45c9253a77d67b6a946a73aa92e7235",onClick:this.onClick,onMouseenter:this.onMouseenter,onMouseleave:this.onMouseleave},i("slot",{key:"cd26f5bf49b123c38bac1ff37d531222f78245f1"}))}get el(){return this}static get watchers(){return{swirlPopover:[{watchPopover:0}],triggerOnHover:[{watchHover:0}]}}static get style(){return".sc-swirl-popover-trigger-h{display:contents}"}},[262,"swirl-popover-trigger",{hidePopoverWhenInvisible:[4,"hide-popover-when-invisible"],parentScrollContainer:[16],setAriaAttributes:[4,"set-aria-attributes"],swirlPopover:[1,"swirl-popover"],triggerOnClick:[4,"trigger-on-click"],triggerOnHover:[4,"trigger-on-hover"],hoverLingerDuration:[2,"hover-linger-duration"],hoverDelay:[2,"hover-delay"]},void 0,{swirlPopover:[{watchPopover:0}],triggerOnHover:[{watchHover:0}]}]);function h(){"undefined"!=typeof customElements&&["swirl-popover-trigger"].forEach((t=>{"swirl-popover-trigger"===t&&(customElements.get(r(t))\|\|customElements.define(r(t),o))}))}export{o as S,h as d}

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

	@@ -1 +1 @@
1	- import{proxyCustomElement as o,HTMLElement as e,createEvent as t,h as i,Host as r,transformTag as n}from"@stencil/core/internal/client";import{c as s,a as p,s as a,o as d,f as c}from"./floating-ui.dom.js";import{d as l,e as h}from"./body-scroll-lock.js";import{c as v}from"./index2.js";import{t as m}from"./index.esm.js";import{i as f,t as u,k as b,q as _}from"./utils.js";const g=["xs","sm","base","l","xl"],w=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.popoverClose=t(this,"popoverClose",7),this.popoverOpen=t(this,"popoverOpen",7),this.animation="scale-in-xy",this.enableFlip=!0,this.fallbackAxisSideDirection="none",this.maxHeight="22rem",this.offset=8,this.padded=!0,this.placement="bottom-start",this.returnFocusToTrigger=!0,this.translucent=!0,this.borderRadius="base",this.active=!1,this.closing=!1,this.componentLoaded=!1,this.togglePopover=o=>{o.stopPropagation(),this.active?this.close():this.open()},this.onKeydown=o=>{"Escape"===o.code&&this.active&&(o.stopImmediatePropagation(),o.stopPropagation(),this.close())},this.reposition=async()=>{const o=f();if(!Boolean(this.triggerEl)\|\|!Boolean(this.contentContainer))return;if(o)return void(this.position=void 0);const e="number"==typeof this.offset?{mainAxis:this.offset,crossAxis:0}:{mainAxis:this.offset[0],crossAxis:this.offset[1]},t=u("--s-space-16"),i=a({padding:{left:t,right:t}}),r=this.enableFlip?[d(e),c({fallbackAxisSideDirection:this.fallbackAxisSideDirection}),i]:[d(e),i];this.position=await s(this.triggerEl,this.contentContainer,{middleware:r,placement:this.placement,strategy:"fixed"})},this.onCloseButtonClick=()=>{this.close()}}connectedCallback(){this.componentLoaded&&this.connectTrigger()}componentDidLoad(){this.connectTrigger(),this.updateTriggerAttributes(),Boolean(this.trigger)&&console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs'),this.componentLoaded=!0}disconnectedCallback(){this.unlockBodyScroll(),this.disableAutoUpdate?.(),this.disableAutoUpdate=void 0,this.triggerEl?.removeEventListener("click",this.togglePopover)}onWindowFocusIn(o){if(!this.active)return;const e=/^((?!chrome\|android).)safari/i.test(navigator.userAgent),t="webkit"in window,i=e\|\|t,r=o.target,n=o.relatedTarget,s=b(),p=o.composedPath(),a=!p.includes(this.el)&&!this.el.contains(s),d=!p.includes(this.triggerEl),c=i&&!this.el.contains(n\|\|r)&&n!==this.el;["SWIRL-TAB"].includes(r.tagName)\|\|!a\|\|!d\|\|i&&!c\|\|this.close()}onWindowBlur(){if(!this.active\|\|this.closing)return;const o=document.activeElement;o&&["IFRAME"].includes(o.tagName)&&this.close()}onWindowClick(o){if(!this.active\|\|this.closing)return;const e=o.target,t=this.el.contains(e),i=o.composedPath().some((o=>!!(Boolean(o)&&o instanceof Node)&&this.el.contains(o))),r=e===this.triggerEl\|\|this.triggerEl.contains(e)\|\|o.composedPath().includes(this.triggerEl);t\|\|i\|\|r\|\|this.close()}async close(o){!this.closing&&this.active&&(this.popoverClose.emit(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.closing=!0,setTimeout((()=>{this.popoverEl?.hidePopover(),this.active=!1,this.closing=!1,this.position=void 0,this.updateTriggerAttributes(this.openedVia),this.openedVia=void 0}),150),this.unlockBodyScroll(),this.returnFocusToTrigger&&!o&&this.getNativeTriggerElement()?.focus())}async open(o,e,t){if(this.triggerEl=o\|\|this.triggerEl,this.active\|\|!Boolean(this.triggerEl))return;this.adjustWidth(),this.position=void 0,this.active=!0,this.openedVia=t,this.updateTriggerAttributes(t);const i=this.getFocusableChildren();requestAnimationFrame((async()=>{this.popoverEl?.showPopover(),await this.reposition(),this.popoverOpen.emit({position:this.position}),i.length>0&&!e?i[0].focus():e\|\|this.contentContainer.focus(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=p(this.triggerEl,this.contentContainer,(()=>this.reposition())),this.scrollContainer.scrollTop=0,this.lockBodyScroll()}))}async isOpen(){return this.active&&!this.closing}async toggle(o,e){this.active?this.close():this.open(o,void 0,e)}connectTrigger(){Boolean(this.trigger)?(this.triggerEl="string"==typeof this.trigger?_(this.triggerContainer\|\|document.body,`#${this.trigger}`)[0]:this.trigger,Boolean(this.triggerEl)&&this.triggerEl.addEventListener("click",this.togglePopover)):this.triggerEl=void 0}getNativeTriggerElement(){return m(this.triggerEl,{includeContainer:!0,getShadowRoot:!0}).at(0)}updateTriggerAttributes(o){if(!Boolean(this.triggerEl))return;const e=this.getNativeTriggerElement();Boolean(e)&&("hover"!==o?(e.setAttribute("aria-controls",this.el.id),e.setAttribute("aria-expanded",String(this.active))):(e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded")),e.setAttribute("aria-haspopup","dialog"))}getFocusableChildren(){return _(this.el,'[role="menuitem"], [role="menuitemradio"], [role="option"]')}adjustWidth(){let o=this.useContainerWidth;[!0,"true"].includes(this.useContainerWidth)?o=!0:[!1,"false"].includes(this.useContainerWidth)&&(o=!1);const e=!window.matchMedia("(min-width: 768px)").matches;if(Boolean(o)&&!e){const e="string"==typeof o&&this.el.closest(o)\|\|this.el.parentElement;this.contentContainer.style.maxWidth="none",this.contentContainer.style.width=e.getBoundingClientRect().width+"px"}else this.contentContainer.style.maxWidth="",this.contentContainer.style.width=""}lockBodyScroll(){f()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&l(this.scrollContainer)}unlockBodyScroll(){f()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&h(this.scrollContainer)}render(){const o=!window.matchMedia("(min-width: 768px)").matches,e=g.includes(this.borderRadius)?`var(--s-border-radius-${this.borderRadius})`:this.borderRadius,t=v("popover",`popover--animation-${this.animation}`,`popover--placement-${this.position?.placement}`,{"popover--active":this.active,"popover--closing":this.closing,"popover--fullscreen-bottom-sheet":this.fullscreenBottomSheet,"popover--inactive":!this.active,"popover--translucent":this.translucent&&!this.transparent,"popover--transparent":this.transparent,"popover--padded":this.padded});return i(r,{key:"d966f9fd6e1ece3baea7e93ffa4db905471a96ad"},i("div",{key:"f27ac96f6d01ac88153419191c66a7c8cdeab400",popover:"manual",class:t,onKeyDown:this.onKeydown,ref:o=>this.popoverEl=o},i("div",{key:"3863fa7c4f56813174ce0a3605b48a8a64b091b5","aria-hidden":this.active?"false":"true","aria-label":this.label,class:"popover__content",id:this.popoverId,part:"popover__content",role:"dialog",ref:o=>this.contentContainer=o,style:{top:Boolean(this.position)?`${this.position?.y}px`:"",left:Boolean(this.position)?`${this.position?.x}px`:"",opacity:!this.active\|\|this.position\|\|o?void 0:"0","--swirl-popover-border-radius":e},tabindex:"-1"},i("span",{key:"a4aa963a233ad9ff72f900f5068b54c0b1a601ba",class:"popover__handle"}),i("div",{key:"f29e897fa61b1ab24b301cde397daf8c5873a14d",class:"popover__scroll-container",part:"popover__scroll-container",ref:o=>this.scrollContainer=o,style:{maxHeight:!o&&Boolean(this.maxHeight)?this.maxHeight:void 0}},i("slot",{key:"d1f6bb8e5e8d26083245d6971e62ea18ed498632"}))),this.active&&i("div",{key:"7e721d950c5d169c516f7e19e16b2da428b4aa81",class:"popover__backdrop",onClick:this.onCloseButtonClick})))}get el(){return this}static get style(){return':host{position:relative;z-index:var(--s-z-40);display:contents}:host {box-sizing:border-box}.popover{border:none;padding:0;margin:0}.popover::backdrop{display:none}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{padding-top:env(safe-area-inset-top);top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}}@media (min-width: 768px){.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}}@media (min-width: 768px){.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}}@media (min-width: 768px){.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover--translucent .popover__content{background-color:transparent;outline:var(--s-border-width-default) solid var(--s-border-translucent-outline)}.popover--translucent .popover__content:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));border-radius:inherit}.popover--translucent .popover__handle{background-color:var(--s-border-on-translucent)}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;border-radius:var( --swirl-popover-border-radius, var(--s-border-radius-base) );max-width:22.5rem;animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}'}},[257,"swirl-popover",{animation:[1],disableScrollLock:[4,"disable-scroll-lock"],enableFlip:[4,"enable-flip"],fallbackAxisSideDirection:[1,"fallback-axis-side-direction"],fullscreenBottomSheet:[4,"fullscreen-bottom-sheet"],label:[1],maxHeight:[1,"max-height"],offset:[2],padded:[4],popoverId:[1,"popover-id"],placement:[1],returnFocusToTrigger:[4,"return-focus-to-trigger"],translucent:[4],transparent:[4],trigger:[1],triggerContainer:[16],useContainerWidth:[8,"use-container-width"],borderRadius:[1,"border-radius"],active:[32],closing:[32],position:[32],close:[64],open:[64],isOpen:[64],toggle:[64]},[[8,"focusin","onWindowFocusIn"],[8,"blur","onWindowBlur"],[8,"click","onWindowClick"]]]);function x(){"undefined"!=typeof customElements&&["swirl-popover"].forEach((o=>{"swirl-popover"===o&&(customElements.get(n(o))\|\|customElements.define(n(o),w))}))}export{w as S,x as d}
1	+ import{proxyCustomElement as o,HTMLElement as e,createEvent as t,h as i,Host as r,transformTag as n}from"@stencil/core/internal/client";import{c as s,a as p,s as a,o as d,f as c}from"./floating-ui.dom.js";import{d as l,e as h}from"./body-scroll-lock.js";import{c as v}from"./index2.js";import{t as m}from"./index.esm.js";import{i as f,t as u,k as b,q as _}from"./utils.js";const g=["xs","sm","base","l","xl"],w=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.popoverClose=t(this,"popoverClose",7),this.popoverOpen=t(this,"popoverOpen",7),this.animation="scale-in-xy",this.enableFlip=!0,this.fallbackAxisSideDirection="none",this.maxHeight="22rem",this.offset=8,this.padded=!0,this.placement="bottom-start",this.returnFocusToTrigger=!0,this.translucent=!0,this.borderRadius="base",this.active=!1,this.closing=!1,this.componentLoaded=!1,this.togglePopover=o=>{o.stopPropagation(),this.active?this.close():this.open()},this.onKeydown=o=>{"Escape"===o.code&&this.active&&(o.stopImmediatePropagation(),o.stopPropagation(),this.close())},this.reposition=async()=>{const o=f();if(!Boolean(this.triggerEl)\|\|!Boolean(this.contentContainer))return;if(o)return void(this.position=void 0);const e="number"==typeof this.offset?{mainAxis:this.offset,crossAxis:0}:{mainAxis:this.offset[0],crossAxis:this.offset[1]},t=u("--s-space-16"),i=a({padding:{left:t,right:t}}),r=this.enableFlip?[d(e),c({fallbackAxisSideDirection:this.fallbackAxisSideDirection}),i]:[d(e),i];this.position=await s(this.triggerEl,this.contentContainer,{middleware:r,placement:this.placement,strategy:"fixed"})},this.onCloseButtonClick=()=>{this.close()}}connectedCallback(){this.componentLoaded&&this.connectTrigger()}componentDidLoad(){this.connectTrigger(),this.updateTriggerAttributes(),Boolean(this.trigger)&&console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs'),this.componentLoaded=!0}disconnectedCallback(){this.unlockBodyScroll(),this.disableAutoUpdate?.(),this.disableAutoUpdate=void 0,this.triggerEl?.removeEventListener("click",this.togglePopover)}onWindowFocusIn(o){if(!this.active)return;const e=/^((?!chrome\|android).)safari/i.test(navigator.userAgent),t="webkit"in window,i=e\|\|t,r=o.target,n=o.relatedTarget,s=b(),p=o.composedPath(),a=!p.includes(this.el)&&!this.el.contains(s),d=!p.includes(this.triggerEl),c=i&&!this.el.contains(n\|\|r)&&n!==this.el;["SWIRL-TAB"].includes(r.tagName)\|\|!a\|\|!d\|\|i&&!c\|\|this.close()}onWindowBlur(){if(!this.active\|\|this.closing)return;const o=document.activeElement;o&&["IFRAME"].includes(o.tagName)&&this.close()}onWindowClick(o){if(!this.active\|\|this.closing)return;const e=o.target,t=this.el.contains(e),i=o.composedPath().some((o=>!!(Boolean(o)&&o instanceof Node)&&this.el.contains(o))),r=e===this.triggerEl\|\|this.triggerEl.contains(e)\|\|o.composedPath().includes(this.triggerEl);t\|\|i\|\|r\|\|this.close()}async close(o){!this.closing&&this.active&&(this.popoverClose.emit(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.closing=!0,setTimeout((()=>{this.popoverEl?.hidePopover(),this.active=!1,this.closing=!1,this.position=void 0,this.updateTriggerAttributes(this.openedVia),this.openedVia=void 0}),150),this.unlockBodyScroll(),this.returnFocusToTrigger&&!o&&this.getNativeTriggerElement()?.focus())}async open(o,e,t){if(this.triggerEl=o\|\|this.triggerEl,this.active\|\|!Boolean(this.triggerEl))return;this.adjustWidth(),this.position=void 0,this.active=!0,this.openedVia=t,this.updateTriggerAttributes(t);const i=this.getFocusableChildren();requestAnimationFrame((async()=>{this.popoverEl?.showPopover(),await this.reposition(),this.popoverOpen.emit({position:this.position}),i.length>0&&!e?i[0].focus():e\|\|this.contentContainer.focus(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=p(this.triggerEl,this.contentContainer,(()=>this.reposition())),this.scrollContainer.scrollTop=0,this.lockBodyScroll()}))}async isOpen(){return this.active&&!this.closing}async toggle(o,e){this.active?this.close():this.open(o,void 0,e)}connectTrigger(){Boolean(this.trigger)?(this.triggerEl="string"==typeof this.trigger?_(this.triggerContainer\|\|document.body,`#${this.trigger}`)[0]:this.trigger,Boolean(this.triggerEl)&&this.triggerEl.addEventListener("click",this.togglePopover)):this.triggerEl=void 0}getNativeTriggerElement(){return m(this.triggerEl,{includeContainer:!0,getShadowRoot:!0}).at(0)}updateTriggerAttributes(o){if(!Boolean(this.triggerEl))return;const e=this.getNativeTriggerElement();Boolean(e)&&("hover"!==o?(e.setAttribute("aria-controls",this.el.id),e.setAttribute("aria-expanded",String(this.active))):(e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded")),e.setAttribute("aria-haspopup","dialog"))}getFocusableChildren(){return _(this.el,'[role="menuitem"], [role="menuitemradio"], [role="option"]')}adjustWidth(){let o=this.useContainerWidth;[!0,"true"].includes(this.useContainerWidth)?o=!0:[!1,"false"].includes(this.useContainerWidth)&&(o=!1);const e=!window.matchMedia("(min-width: 768px)").matches;if(Boolean(o)&&!e){const e="string"==typeof o&&this.el.closest(o)\|\|this.el.parentElement;this.contentContainer.style.maxWidth="none",this.contentContainer.style.width=e.getBoundingClientRect().width+"px"}else this.contentContainer.style.maxWidth="",this.contentContainer.style.width=""}lockBodyScroll(){f()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&l(this.scrollContainer)}unlockBodyScroll(){f()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&h(this.scrollContainer)}render(){const o=!window.matchMedia("(min-width: 768px)").matches,e=g.includes(this.borderRadius)?`var(--s-border-radius-${this.borderRadius})`:this.borderRadius,t=v("popover",`popover--animation-${this.animation}`,`popover--placement-${this.position?.placement}`,{"popover--active":this.active,"popover--closing":this.closing,"popover--fullscreen-bottom-sheet":this.fullscreenBottomSheet,"popover--inactive":!this.active,"popover--translucent":this.translucent&&!this.transparent,"popover--transparent":this.transparent,"popover--padded":this.padded});return i(r,{key:"bc352b19239f009e422a00653f7101c98fa4efbe"},i("div",{key:"f60540b1208dc0db15670d5400d7821af8c604bd",popover:"manual",class:t,onKeyDown:this.onKeydown,ref:o=>this.popoverEl=o},i("div",{key:"bb48aa9bc296ff853cc20486947e806e7918e9a7","aria-hidden":this.active?"false":"true","aria-label":this.label,class:"popover__content",id:this.popoverId,part:"popover__content",role:"dialog",ref:o=>this.contentContainer=o,style:{top:Boolean(this.position)?`${this.position?.y}px`:"",left:Boolean(this.position)?`${this.position?.x}px`:"",opacity:!this.active\|\|this.position\|\|o?void 0:"0","--swirl-popover-border-radius":e},tabindex:"-1"},i("span",{key:"d9a3273cefe997ca3fa474aa5d877d7f8a2cdac4",class:"popover__handle"}),i("div",{key:"2f7ad855b98f6ecd3e78ed752a3c9c3666a794aa",class:"popover__scroll-container",part:"popover__scroll-container",ref:o=>this.scrollContainer=o,style:{maxHeight:!o&&Boolean(this.maxHeight)?this.maxHeight:void 0}},i("slot",{key:"52ce9c73e730f1014d7fed1f1f3014b9273e147e"}))),this.active&&i("div",{key:"f12355fab1c1271f921a58e4549442ac9b5b03a7",class:"popover__backdrop",onClick:this.onCloseButtonClick})))}get el(){return this}static get style(){return':host{position:relative;z-index:var(--s-z-40);display:contents}:host {box-sizing:border-box}.popover{border:none;padding:0;margin:0}.popover::backdrop{display:none}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{padding-top:env(safe-area-inset-top);top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}}@media (min-width: 768px){.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}}@media (min-width: 768px){.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}}@media (min-width: 768px){.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover--translucent .popover__content{background-color:transparent;outline:var(--s-border-width-default) solid var(--s-border-translucent-outline)}.popover--translucent .popover__content:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));border-radius:inherit}.popover--translucent .popover__handle{background-color:var(--s-border-on-translucent)}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;border-radius:var( --swirl-popover-border-radius, var(--s-border-radius-base) );max-width:22.5rem;animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}'}},[257,"swirl-popover",{animation:[1],disableScrollLock:[4,"disable-scroll-lock"],enableFlip:[4,"enable-flip"],fallbackAxisSideDirection:[1,"fallback-axis-side-direction"],fullscreenBottomSheet:[4,"fullscreen-bottom-sheet"],label:[1],maxHeight:[1,"max-height"],offset:[2],padded:[4],popoverId:[1,"popover-id"],placement:[1],returnFocusToTrigger:[4,"return-focus-to-trigger"],translucent:[4],transparent:[4],trigger:[1],triggerContainer:[16],useContainerWidth:[8,"use-container-width"],borderRadius:[1,"border-radius"],active:[32],closing:[32],position:[32],close:[64],open:[64],isOpen:[64],toggle:[64]},[[8,"focusin","onWindowFocusIn"],[8,"blur","onWindowBlur"],[8,"click","onWindowClick"]]]);function x(){"undefined"!=typeof customElements&&["swirl-popover"].forEach((o=>{"swirl-popover"===o&&(customElements.get(n(o))\|\|customElements.define(n(o),w))}))}export{w as S,x as d}

package/dist/components/swirl-progress-indicator2.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as r,HTMLElement as i,h as s,Host as e,transformTag as a}from"@stencil/core/internal/client";import{c as o}from"./index2.js";const t={xs:{radius:8,strokeWidth:2},s:{radius:10,strokeWidth:2},m:{radius:20,strokeWidth:4}},n=r(class extends i{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.size="m",this.value=0,this.variant="bar"}render(){const r=o("progress-indicator",`progress-indicator--size-${this.size}`,`progress-indicator--variant-${this.variant}`),{radius:i,strokeWidth:a}=t[this.size],n=Math.round(2iMath.PI),c=Math.round(n((100-this.value)/100));return s(e,{key:"~~ad727a1e14301972d7da8f93ea1e56130ba1a74a~~",class:this.variant},"bar"===this.variant&&s("progress",{key:"~~018e049e46653f9b036e112cc1f68afc72f51521~~","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r,max:100,value:this.value}),"circle"===this.variant&&s("span",{key:"~~c493100a3b9bea0a2b322bab40dcd047dc3df151~~",role:"progressbar","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r},s("svg",{key:"~~9920db6a32b1f0aad63a8d172219301b1d628935~~",class:"progress-indicator__circle",focusable:"false",viewBox:`0 0 ${2(i+a)} ${2(i+a)}`},s("circle",{key:"~~6babf1c8aa02a9d6d4cdbfe5a3bce4f996c440f3~~",class:"progress-indicator__circle-background",cx:i+a,cy:i+a,r:i,fill:"none","stroke-width":a}),s("circle",{key:"~~60c0ee8e78623f088fa296b97a3d3be5eba42298~~",class:"progress-indicator__circle-value",cx:i+a,cy:i+a,r:i,fill:"none","stroke-width":a,"stroke-dasharray":n,"stroke-dashoffset":c}))))}static get style(){return":host{display:block;width:100%}:host {box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-sunken-pressed)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-xs,.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-bar,.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-value,.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-moz-progress-bar,.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-xs{width:1.25rem;height:1.25rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-surface-sunken-pressed);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}"}},[1,"swirl-progress-indicator",{label:[1],size:[1],value:[2],variant:[1]}]);function c(){"undefined"!=typeof customElements&&["swirl-progress-indicator"].forEach((r=>{"swirl-progress-indicator"===r&&(customElements.get(a(r))\|\|customElements.define(a(r),n))}))}export{n as S,c as d}
1	+ import{proxyCustomElement as r,HTMLElement as i,h as e,Host as s,transformTag as a}from"@stencil/core/internal/client";import{c as o}from"./index2.js";const t={xs:{radius:8,strokeWidth:2},s:{radius:10,strokeWidth:2},m:{radius:20,strokeWidth:4}},n=r(class extends i{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.size="m",this.value=0,this.variant="bar"}render(){const r=o("progress-indicator",`progress-indicator--size-${this.size}`,`progress-indicator--variant-${this.variant}`),{radius:i,strokeWidth:a}=t[this.size],n=Math.round(2iMath.PI),c=Math.round(n((100-this.value)/100));return e(s,{key:"ccfe97a845f82acf62821276847164e4a9c81eef",class:this.variant},"bar"===this.variant&&e("progress",{key:"17f6e8d52c8aa845813b8d8f52ef53d8ed0185c2","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r,max:100,value:this.value}),"circle"===this.variant&&e("span",{key:"fe852aea4a7b2dfa961bc18ef7384768c4942f86",role:"progressbar","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r},e("svg",{key:"01d6d38322eb43c7b1c6d2a9a054cd77aa47b714",class:"progress-indicator__circle",focusable:"false",viewBox:`0 0 ${2(i+a)} ${2(i+a)}`},e("circle",{key:"cf9d71ae2fb47ce4455a33c339561fcbe0e72af1",class:"progress-indicator__circle-background",cx:i+a,cy:i+a,r:i,fill:"none","stroke-width":a}),e("circle",{key:"5800bc891476aa8d6b1c445eb99ed915361498b3",class:"progress-indicator__circle-value",cx:i+a,cy:i+a,r:i,fill:"none","stroke-width":a,"stroke-dasharray":n,"stroke-dashoffset":c}))))}static get style(){return":host{display:block;width:100%}:host {box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-sunken-pressed)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-xs,.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-bar,.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-value,.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-moz-progress-bar,.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-xs{width:1.25rem;height:1.25rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-surface-sunken-pressed);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}"}},[1,"swirl-progress-indicator",{label:[1],size:[1],value:[2],variant:[1]}]);function c(){"undefined"!=typeof customElements&&["swirl-progress-indicator"].forEach((r=>{"swirl-progress-indicator"===r&&(customElements.get(a(r))\|\|customElements.define(a(r),n))}))}export{n as S,c as d}

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

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as i,createEvent as s,h as r,Host as t,transformTag as a}from"@stencil/core/internal/client";const o=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.valueChange=s(this,"valueChange",7),this.componentLoaded=!1,this.onRadioValueChange=e=>{e.stopPropagation();const i=e.target;!0!==i.checked&&"true"!==i.checked\|\|(this.value=i.value,this.valueChange.emit(i.value),this.radioButtons.forEach((e=>{e!==i&&(e.checked=!1)})))}}connectedCallback(){this.componentLoaded&&this.addValueChangeListeners()}componentDidLoad(){this.radioButtons=Array.from(this.el.querySelectorAll("swirl-radio")),this.initValue(),this.addValueChangeListeners(),this.componentLoaded=!0}disconnectedCallback(){this.removeValueChangeListeners()}initValue(){if(void 0===this.value)return;const e=this.radioButtons.find((e=>e.value===this.value));e&&(e.checked=!0)}addValueChangeListeners(){this.radioButtons.forEach((e=>{e.addEventListener("valueChange",this.onRadioValueChange)}))}removeValueChangeListeners(){this.radioButtons?.forEach((e=>{e.removeEventListener("valueChange",this.onRadioValueChange)}))}render(){return r(t,{key:"~~a74c61935a1f4d5e9033a62ae284f80422a49653~~","aria-describedby":this.swirlAriaDescribedby,role:"radiogroup"},r("div",{key:"~~06a949a6419e90a1d066b1a424c2544fac44e100~~",class:"radio-group"},r("slot",{key:"~~be1741624a13f14828a76c5a90deeecb7e8384e8~~"})))}get el(){return this}static get style(){return".sc-swirl-radio-group-h{display:block}.sc-swirl-radio-group-h *.sc-swirl-radio-group{box-sizing:border-box}.radio-group.sc-swirl-radio-group{display:flex;flex-direction:column;gap:var(--s-space-12)}"}},[262,"swirl-radio-group",{swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1537]}]),l=o,c=function(){"undefined"!=typeof customElements&&["swirl-radio-group"].forEach((e=>{"swirl-radio-group"===e&&(customElements.get(a(e))\|\|customElements.define(a(e),o))}))};export{l as SwirlRadioGroup,c as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as i,createEvent as s,h as r,Host as t,transformTag as a}from"@stencil/core/internal/client";const o=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.valueChange=s(this,"valueChange",7),this.componentLoaded=!1,this.onRadioValueChange=e=>{e.stopPropagation();const i=e.target;!0!==i.checked&&"true"!==i.checked\|\|(this.value=i.value,this.valueChange.emit(i.value),this.radioButtons.forEach((e=>{e!==i&&(e.checked=!1)})))}}connectedCallback(){this.componentLoaded&&this.addValueChangeListeners()}componentDidLoad(){this.radioButtons=Array.from(this.el.querySelectorAll("swirl-radio")),this.initValue(),this.addValueChangeListeners(),this.componentLoaded=!0}disconnectedCallback(){this.removeValueChangeListeners()}initValue(){if(void 0===this.value)return;const e=this.radioButtons.find((e=>e.value===this.value));e&&(e.checked=!0)}addValueChangeListeners(){this.radioButtons.forEach((e=>{e.addEventListener("valueChange",this.onRadioValueChange)}))}removeValueChangeListeners(){this.radioButtons?.forEach((e=>{e.removeEventListener("valueChange",this.onRadioValueChange)}))}render(){return r(t,{key:"753968ba2fa05fe79df7e86d9bc5645e6e99e0b5","aria-describedby":this.swirlAriaDescribedby,role:"radiogroup"},r("div",{key:"70bfc932b8b452479673aa654fc1aff5192eed82",class:"radio-group"},r("slot",{key:"c655d04a205930488809fbb77e1f534df653b0e9"})))}get el(){return this}static get style(){return".sc-swirl-radio-group-h{display:block}.sc-swirl-radio-group-h *.sc-swirl-radio-group{box-sizing:border-box}.radio-group.sc-swirl-radio-group{display:flex;flex-direction:column;gap:var(--s-space-12)}"}},[262,"swirl-radio-group",{swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1537]}]),l=o,d=function(){"undefined"!=typeof customElements&&["swirl-radio-group"].forEach((e=>{"swirl-radio-group"===e&&(customElements.get(a(e))\|\|customElements.define(a(e),o))}))};export{l as SwirlRadioGroup,d as defineCustomElement}

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

	@@ -1 +1 @@
1	- import{proxyCustomElement as i,HTMLElement as r,createEvent as a,h as o,Host as d,transformTag as s}from"@stencil/core/internal/client";import{c as e}from"./index2.js";import{d as l}from"./swirl-icon-help2.js";import{d as c}from"./swirl-tooltip2.js";import{d as t}from"./swirl-visually-hidden2.js";const n=i(class extends r{constructor(i){super(),!1!==i&&this.__registerHost(),this.valueChange=a(this,"valueChange",7),this.checked=!1,this.disabled=!1,this.variant="default",this.onChange=()=>{this.checked=!0,this.valueChange.emit(this.value)}}getAriaCheckedLabel(i,r){return i?"true":r?"false":"mixed"}render(){const i=!1===this.checked\|\|"false"===this.checked,r=!0===this.checked\|\|"true"===this.checked,a=this.getAriaCheckedLabel(r,i),s=this.invalid,l=e("radio","radio--variant-"+this.variant,{"radio--checked":r,"radio--disabled":this.disabled,"radio--invalid":this.invalid,"radio--unchecked":i});return o(d,{key:"~~ba03347710704c4b7e499251fcd4a9df191d101e~~",style:{width:"card"===this.variant?"100%":void 0}},o("label",{key:"~~b051bf05d1698ad0413ba29a8d04292fb31490ad~~",class:l,htmlFor:this.inputId},o("span",{key:"~~d239df6b6803ed81bc5bc1db9a7f294da974a614~~",class:"radio__control"},o("swirl-visually-hidden",{key:"~~6141bdb2dde5afe236634bdec8de51a3076a954b~~"},o("input",{key:"~~08b791480fb67b7c06e34a22ad89cbddc6a02297~~","aria-checked":a,"aria-invalid":s,checked:r,class:"radio__input",disabled:this.disabled,id:this.inputId,name:this.inputName,onChange:this.onChange,type:"radio",value:this.value})),o("span",{key:"~~c0683f4e514afe287ac9e225c2e5297ba1e3753d~~","aria-hidden":"true",class:"radio__box"})),o("span",{key:"~~86051aac88e4375c3622e5a600ff8a57ec154889~~",class:"radio__label-container"},this.label&&o("span",{key:"~~a130c01085aa73419c30e5d2e315a15957d35f5c~~",class:"radio__label"},this.label,this.tooltip&&o("swirl-tooltip",{key:"~~d048616c7e231f763008eec487a86afe52e8c669~~",content:this.tooltip,position:"top"},o("swirl-icon-help",{key:"~~1a3059195141f32917064c8212008fcb652978a3~~",color:"default",size:20,tabIndex:0}))),this.description&&o("span",{key:"~~b9e85579b000dec098650230272735d4b87bb784~~",class:"radio__description",innerHTML:this.description}))))}static get style(){return'.sc-swirl-radio-h{display:inline-flex}.sc-swirl-radio-h *.sc-swirl-radio{box-sizing:border-box}.radio.sc-swirl-radio{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer;align-items:center}.radio.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default), 0 0 0 0.1875rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.radio--variant-card.sc-swirl-radio:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default), 0 0 0 0.25rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:none}.radio--variant-card.sc-swirl-radio:hover:not(.radio--disabled){background-color:var(--s-state-hovered)}.radio--variant-card.sc-swirl-radio:active:not(.radio--disabled){background-color:var(--s-state-pressed)}.radio--variant-card.radio--checked.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-highlight)}.radio--variant-card.radio--invalid.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-critical)}.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:"";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio,.radio--invalid.radio--indeterminate.sc-swirl-radio .radio__box.sc-swirl-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-swirl-radio{cursor:default}.radio--disabled.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:transparent}.radio--disabled.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__description.sc-swirl-radio,.radio--disabled.sc-swirl-radio .radio__label.sc-swirl-radio{color:var(--s-text-disabled)}.radio__control.sc-swirl-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__control.sc-swirl-radio{width:1.375rem;height:1.375rem}}.radio__box.sc-swirl-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-swirl-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-swirl-radio{display:flex;align-items:center;font-weight:var(--s-font-weight-medium);gap:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__label.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.radio__description.sc-swirl-radio{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__description.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}'}},[2,"swirl-radio",{checked:[1032],description:[1],disabled:[4],inputId:[1,"input-id"],inputName:[1,"input-name"],invalid:[4],label:[1],tooltip:[1],value:[1],variant:[1]}]),h=n,b=function(){"undefined"!=typeof customElements&&["swirl-radio","swirl-icon-help","swirl-tooltip","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-radio":customElements.get(s(i))\|\|customElements.define(s(i),n);break;case"swirl-icon-help":customElements.get(s(i))\|\|l();break;case"swirl-tooltip":customElements.get(s(i))\|\|c();break;case"swirl-visually-hidden":customElements.get(s(i))\|\|t()}}))};export{h as SwirlRadio,b as defineCustomElement}
1	+ import{proxyCustomElement as i,HTMLElement as r,createEvent as a,h as o,Host as d,transformTag as s}from"@stencil/core/internal/client";import{c as e}from"./index2.js";import{d as c}from"./swirl-icon-help2.js";import{d as l}from"./swirl-tooltip2.js";import{d as t}from"./swirl-visually-hidden2.js";const n=i(class extends r{constructor(i){super(),!1!==i&&this.__registerHost(),this.valueChange=a(this,"valueChange",7),this.checked=!1,this.disabled=!1,this.variant="default",this.onChange=()=>{this.checked=!0,this.valueChange.emit(this.value)}}getAriaCheckedLabel(i,r){return i?"true":r?"false":"mixed"}render(){const i=!1===this.checked\|\|"false"===this.checked,r=!0===this.checked\|\|"true"===this.checked,a=this.getAriaCheckedLabel(r,i),s=this.invalid,c=e("radio","radio--variant-"+this.variant,{"radio--checked":r,"radio--disabled":this.disabled,"radio--invalid":this.invalid,"radio--unchecked":i});return o(d,{key:"247df3246b492dc6c93e13e02b2d5879fbf2e99f",style:{width:"card"===this.variant?"100%":void 0}},o("label",{key:"b26291cbbaa6d709ca315c0fd2da7d36a23f9d44",class:c,htmlFor:this.inputId},o("span",{key:"32f6f44c2ff0d595390609b847c55910aacb321f",class:"radio__control"},o("swirl-visually-hidden",{key:"02930c8bf94e3fd6c1482c854ef903a1d570fdc1"},o("input",{key:"c389342ec25a0f2edca238cc6d8304f79d6abb07","aria-checked":a,"aria-invalid":s,checked:r,class:"radio__input",disabled:this.disabled,id:this.inputId,name:this.inputName,onChange:this.onChange,type:"radio",value:this.value})),o("span",{key:"2516ce0491db27f4d3e2cc5e2368a586cf262a9f","aria-hidden":"true",class:"radio__box"})),o("span",{key:"cf1d8ab12f45b6aaa8ab202dec2649c7a4883d37",class:"radio__label-container"},this.label&&o("span",{key:"e3b085a04ee720a4b06c978a505070644814d826",class:"radio__label"},this.label,this.tooltip&&o("swirl-tooltip",{key:"97e2c9d55a6e766555357b5a84ff49c65237a45d",content:this.tooltip,position:"top"},o("swirl-icon-help",{key:"885c98fe0ae800f08a5ec2cb85dde5abbf93cbdd",color:"default",size:20,tabIndex:0}))),this.description&&o("span",{key:"94217888f19f3d10aa15290f73803894cb5e44be",class:"radio__description",innerHTML:this.description}))))}static get style(){return'.sc-swirl-radio-h{display:inline-flex}.sc-swirl-radio-h *.sc-swirl-radio{box-sizing:border-box}.radio.sc-swirl-radio{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer;align-items:center}.radio.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default), 0 0 0 0.1875rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.radio--variant-card.sc-swirl-radio:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default), 0 0 0 0.25rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:none}.radio--variant-card.sc-swirl-radio:hover:not(.radio--disabled){background-color:var(--s-state-hovered)}.radio--variant-card.sc-swirl-radio:active:not(.radio--disabled){background-color:var(--s-state-pressed)}.radio--variant-card.radio--checked.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-highlight)}.radio--variant-card.radio--invalid.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-critical)}.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:"";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio,.radio--invalid.radio--indeterminate.sc-swirl-radio .radio__box.sc-swirl-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-swirl-radio{cursor:default}.radio--disabled.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:transparent}.radio--disabled.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__description.sc-swirl-radio,.radio--disabled.sc-swirl-radio .radio__label.sc-swirl-radio{color:var(--s-text-disabled)}.radio__control.sc-swirl-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__control.sc-swirl-radio{width:1.375rem;height:1.375rem}}.radio__box.sc-swirl-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-swirl-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-swirl-radio{display:flex;align-items:center;font-weight:var(--s-font-weight-medium);gap:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__label.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.radio__description.sc-swirl-radio{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__description.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}'}},[2,"swirl-radio",{checked:[1032],description:[1],disabled:[4],inputId:[1,"input-id"],inputName:[1,"input-name"],invalid:[4],label:[1],tooltip:[1],value:[1],variant:[1]}]),h=n,b=function(){"undefined"!=typeof customElements&&["swirl-radio","swirl-icon-help","swirl-tooltip","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-radio":customElements.get(s(i))\|\|customElements.define(s(i),n);break;case"swirl-icon-help":customElements.get(s(i))\|\|c();break;case"swirl-tooltip":customElements.get(s(i))\|\|l();break;case"swirl-visually-hidden":customElements.get(s(i))\|\|t()}}))};export{h as SwirlRadio,b as defineCustomElement}

package/dist/components/swirl-resource-list-file-item.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as i,createEvent as s,h as r,Host as t,transformTag as l}from"@stencil/core/internal/client";import{c as o}from"./index2.js";import{D as c}from"./media-query.service.js";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-error2.js";import{d as m}from"./swirl-inline-error2.js";import{d as f}from"./swirl-spinner2.js";import{d}from"./swirl-visually-hidden2.js";const u=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.remove=s(this,"remove",7),this.icon="<swirl-icon-file></swirl-icon-file>",this.removeButtonLabel="Remove file",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=c.subscribe((e=>{this.forceIconProps(e)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(e){if(!this.iconEl)return;const i=this.iconEl.children[0];i?.setAttribute("size",e?"20":"24")}render(){const e=!!this.errorMessage,i=!e&&!!this.description,s=!e&&this.loading,l=this.removable&&!s,c=this.el.closest('[role="grid"]')?"row":"listitem",a="row"===c?"gridcell":void 0,n=o("resource-list-file-item",{"resource-list-file-item--has-control":s\|\|l});return r(t,{key:"~~ec300878ccb3832675199c72f7333ebaeac39dd0~~",role:c},r("div",{key:"~~0fab95e0d03a2324053ea18196e69cc7bfa5385a~~",class:n,part:"resource-list-file-item",role:a},r("span",{key:"~~ee0ff671f1720b45c985de72d5115732e6e08f4f~~",class:"resource-list-file-item__icon",innerHTML:this.icon,ref:e=>this.iconEl=e}),r("span",{key:"~~9798cc59e3f8c590deb00d874b0b9e16018d694f~~",class:"resource-list-file-item__label-container"},r("span",{key:"~~e4e5c3a2514fbcb923e5459fb37a551a22e6ef28~~",class:"resource-list-file-item__label",id:"label"},this.label),i&&r("span",{key:"~~119034a57bcc5a6da90d50fa44ad03df8b2a5886~~",class:"resource-list-file-item__description"},this.description),e&&r("span",{key:"~~e2776c98cf30c3994b4630a1d64054a530105a8c~~","aria-live":"polite",class:"resource-list-file-item__error-message"},r("swirl-inline-error",{key:"~~33b8e0838e2a8550c274d5c75b1baaa825a7ab01~~",message:this.errorMessage,size:"s"}))),s&&r("span",{key:"~~495912e6e32579f213627764bd834e257e7066b8~~",class:"resource-list-file-item__spinner"},r("swirl-spinner",{key:"~~6c6ded71a21ca74c42c2863e3935349362486b20~~",size:"s"})),l&&r("span",{key:"~~5346c3364ff5d41ca4dac3c08396c007f718a11e~~",class:"resource-list-file-item__remove-button"},r("swirl-button",{key:"~~e0217f5a577643069f8d515c6b914371e3d23a0f~~",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.removeButtonLabel,onClick:this.remove.emit}))))}get el(){return this}static get style(){return'.sc-swirl-resource-list-file-item-h{display:block;width:100%}.sc-swirl-resource-list-file-item-h .sc-swirl-resource-list-file-item{box-sizing:border-box}.resource-list-file-item.sc-swirl-resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item.sc-swirl-resource-list-file-item:focus{outline:none}.resource-list-file-item.sc-swirl-resource-list-file-item:focus-visible{background-color:var(--s-background-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item.sc-swirl-resource-list-file-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-file-item--has-control.sc-swirl-resource-list-file-item .resource-list-file-item__label-container.sc-swirl-resource-list-file-item{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.5rem;height:1.5rem;color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.25rem;height:1.25rem}}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item:after{position:absolute;right:0;bottom:calc(-1 var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-file-item__label.sc-swirl-resource-list-file-item{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description.sc-swirl-resource-list-file-item{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message.sc-swirl-resource-list-file-item{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}'}},[2,"swirl-resource-list-file-item",{description:[1],errorMessage:[1,"error-message"],icon:[1],label:[1],loading:[4],removable:[4],removeButtonLabel:[1,"remove-button-label"]}]),h=u,p=function(){"undefined"!=typeof customElements&&["swirl-resource-list-file-item","swirl-button","swirl-icon-error","swirl-inline-error","swirl-spinner","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-resource-list-file-item":customElements.get(l(e))\|\|customElements.define(l(e),u);break;case"swirl-button":customElements.get(l(e))\|\|a();break;case"swirl-icon-error":customElements.get(l(e))\|\|n();break;case"swirl-inline-error":customElements.get(l(e))\|\|m();break;case"swirl-spinner":customElements.get(l(e))\|\|f();break;case"swirl-visually-hidden":customElements.get(l(e))\|\|d()}}))};export{h as SwirlResourceListFileItem,p as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as i,createEvent as s,h as r,Host as t,transformTag as l}from"@stencil/core/internal/client";import{c as o}from"./index2.js";import{D as c}from"./media-query.service.js";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-error2.js";import{d as m}from"./swirl-inline-error2.js";import{d as f}from"./swirl-spinner2.js";import{d}from"./swirl-visually-hidden2.js";const u=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.remove=s(this,"remove",7),this.icon="<swirl-icon-file></swirl-icon-file>",this.removeButtonLabel="Remove file",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=c.subscribe((e=>{this.forceIconProps(e)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(e){if(!this.iconEl)return;const i=this.iconEl.children[0];i?.setAttribute("size",e?"20":"24")}render(){const e=!!this.errorMessage,i=!e&&!!this.description,s=!e&&this.loading,l=this.removable&&!s,c=this.el.closest('[role="grid"]')?"row":"listitem",a="row"===c?"gridcell":void 0,n=o("resource-list-file-item",{"resource-list-file-item--has-control":s\|\|l});return r(t,{key:"f3cab0525edee6b50d37e5e04786407caa1486a1",role:c},r("div",{key:"d896f7185c4d7168113d1154351ee0c4bb97932b",class:n,part:"resource-list-file-item",role:a},r("span",{key:"ccd0bb995210ac2f8c78dd67999cbb8aca1eab4f",class:"resource-list-file-item__icon",innerHTML:this.icon,ref:e=>this.iconEl=e}),r("span",{key:"c848564c0a455c081286d90c00fb1ff1231ce5a0",class:"resource-list-file-item__label-container"},r("span",{key:"8b0496a4d67eee389f43b2f09407b35e96623730",class:"resource-list-file-item__label",id:"label"},this.label),i&&r("span",{key:"3167345ee4497e1dd246b2e80b9854e88ec516f9",class:"resource-list-file-item__description"},this.description),e&&r("span",{key:"99fccc29ab96c1fa2aecca0431e85920b89a0ca1","aria-live":"polite",class:"resource-list-file-item__error-message"},r("swirl-inline-error",{key:"fd9ba54a8bfaf04a2df69366f813a1e9c400dd68",message:this.errorMessage,size:"s"}))),s&&r("span",{key:"5ac25d3bdcbcdd6af9d04b257b601313edcaf1ff",class:"resource-list-file-item__spinner"},r("swirl-spinner",{key:"f26b801dba530a03f162613691b932bc6b200cf4",size:"s"})),l&&r("span",{key:"9d47253cbc9c7679579d1411a05309d305b0d8bc",class:"resource-list-file-item__remove-button"},r("swirl-button",{key:"afa46da68b856b850bdc8dce81b772222c80ca35",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.removeButtonLabel,onClick:this.remove.emit}))))}get el(){return this}static get style(){return'.sc-swirl-resource-list-file-item-h{display:block;width:100%}.sc-swirl-resource-list-file-item-h .sc-swirl-resource-list-file-item{box-sizing:border-box}.resource-list-file-item.sc-swirl-resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item.sc-swirl-resource-list-file-item:focus{outline:none}.resource-list-file-item.sc-swirl-resource-list-file-item:focus-visible{background-color:var(--s-background-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item.sc-swirl-resource-list-file-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-file-item--has-control.sc-swirl-resource-list-file-item .resource-list-file-item__label-container.sc-swirl-resource-list-file-item{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.5rem;height:1.5rem;color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.25rem;height:1.25rem}}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item:after{position:absolute;right:0;bottom:calc(-1 var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-file-item__label.sc-swirl-resource-list-file-item{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description.sc-swirl-resource-list-file-item{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message.sc-swirl-resource-list-file-item{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}'}},[2,"swirl-resource-list-file-item",{description:[1],errorMessage:[1,"error-message"],icon:[1],label:[1],loading:[4],removable:[4],removeButtonLabel:[1,"remove-button-label"]}]),h=u,b=function(){"undefined"!=typeof customElements&&["swirl-resource-list-file-item","swirl-button","swirl-icon-error","swirl-inline-error","swirl-spinner","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-resource-list-file-item":customElements.get(l(e))\|\|customElements.define(l(e),u);break;case"swirl-button":customElements.get(l(e))\|\|a();break;case"swirl-icon-error":customElements.get(l(e))\|\|n();break;case"swirl-inline-error":customElements.get(l(e))\|\|m();break;case"swirl-spinner":customElements.get(l(e))\|\|f();break;case"swirl-visually-hidden":customElements.get(l(e))\|\|d()}}))};export{h as SwirlResourceListFileItem,b as defineCustomElement}

package/dist/components/swirl-resource-list-item.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as r,Host as t,transformTag as o}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{D as c}from"./media-query.service.js";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-check-strong2.js";import{d as m}from"./swirl-icon-drag-handle2.js";import{d as u}from"./swirl-popover-trigger2.js";import{d}from"./swirl-tooltip2.js";import{v as h}from"./v4.js";const w=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.toggleDrag=i(this,"toggleDrag",7),this.valueChange=i(this,"valueChange",7),this.checked=!1,this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move item",this.interactive=!0,this.labelWeight="medium",this.labelTooltipPosition="top",this.menuTriggerLabel="Options",this.hasMedia=!1,this.iconSize=24,this.elementId=h(),this.mediaQueryUnsubscribe=()=>{},this.onClick=()=>{this.selectable&&(this.checked=!this.checked,this.valueChange.emit(this.checked))},this.onBlur=()=>{this.makeControlUnfocusable()},this.onFocus=()=>{this.makeControlFocusable()},this.onMenuTriggerClick=e=>{this.disabled&&!this.href&&e.stopPropagation()},this.onDragHandleKeyDown=e=>{"Space"!==e.code&&"Enter"!==e.code\|\|(e.preventDefault(),this.toggleDrag.emit(this.el))},this.onControlClick=e=>{e.preventDefault(),e.stopPropagation()}}componentWillLoad(){this.updateMediaState()}componentDidLoad(){this.parentSemantics=this.el.closest("swirl-resource-list")?.semantics,this.mediaQueryUnsubscribe=c.subscribe((e=>{this.forceIconProps(e),this.updateIconSize(e)})),this.makeControlUnfocusable(),this.menuTriggerId&&console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs')}disconnectedCallback(){this.mediaQueryUnsubscribe()}get hasBadges(){return!!this.el.querySelector("[slot='badges']")}get showMeta(){return(!!this.meta\|\|this.hasBadges)&&!this.selectable}forceIconProps(e){const s=this.iconEl?.children[0];s?.setAttribute("size",e?"20":"24")}updateIconSize(e){this.iconSize=e?20:24}updateMediaState(){const e=!!this.el.querySelector('[slot="media"]');e!==this.hasMedia&&(this.hasMedia=e)}getControl(){return this.el.querySelector('[slot="control"] button')}makeControlFocusable(){if("grid"!==this.parentSemantics)return;const e=this.getControl();e&&(e.tabIndex=0)}makeControlUnfocusable(){if("grid"!==this.parentSemantics)return;const e=this.getControl();e&&(e.tabIndex=-1)}render(){const e=this.interactive\|\|this.selectable?this.href&&!this.selectable?"a":"button":"div",s="a"===e,i=this.disabled&&!this.href,o=this.hasBadges,c=this.el.querySelector("[slot='control']"),a=!!this.menuTriggerId\|\|c,n=this.interactive&&this.href?this.href:void 0,m=c&&(!!this.meta\|\|o),u=!!this.menuTriggerId&&!this.meta&&!this.selectable,d=this.showMeta,h=this.swirlAriaLabel?this.swirlAriaLabel:this.label,w=this.selectable?this.checked+"":void 0,b=this.interactive&&this.selectable?"checkbox":void 0,p=this.el.closest('[role="grid"]')?"row":"listitem",g="row"===p?"gridcell":void 0,v={minHeight:this.labelMinHeight??void 0},f=()=>r("span",{key:"569341f944ebfe85cc2986d19b44abd49c97a379",class:"resource-list-item__label",id:this.elementId,innerHTML:this.allowHtml?this.label:void 0,style:{"-webkit-line-clamp":this.labelWrapMaxLines?this.labelWrapMaxLines+"":void 0}},!this.allowHtml&&this.label),_=l("resource-list-item","resource-list-item--label-weight-"+this.labelWeight,{"resource-list-item--active":this.active,"resource-list-item--checked":this.checked,"resource-list-item--compact":this.compact,"resource-list-item--disabled":this.disabled,"resource-list-item--draggable":this.allowDrag,"resource-list-item--dragging":this.dragging,"resource-list-item--has-control":c,"resource-list-item--has-menu":a,"resource-list-item--hide-divider":this.hideDivider,"resource-list-item--interactive":this.interactive\|\|this.selectable,"resource-list-item--selectable":this.selectable,"resource-list-item--show-control-on-focus":m,"resource-list-item--show-meta":d,"resource-list-item--wrap-description":this.descriptionWrap,"resource-list-item--wrap-label":this.labelWrap,"resource-list-item--wrap-label-max-lines":this.labelWrapMaxLines});return r(t,{key:"bd01a0680a7bd5ee2bbf916fe206776994bf5856",role:p},r("div",{key:"3e5cc404a376ef9f972169441e5d7cd498265c2e",class:_,role:g,onClick:this.onClick},r(e,{key:"b173f0278a944244e908686424d413fd1f982146","aria-checked":w,"aria-current":this.swirlAriaCurrent,"aria-disabled":i?"true":void 0,"aria-label":h,"aria-labelledby":this.swirlAriaLabel?void 0:this.elementId,class:"resource-list-item__content",style:{alignItems:this.alignItems},href:n,rel:s?this.rel:void 0,target:s?this.target:void 0,disabled:i,onBlur:this.onBlur,onFocus:this.onFocus,part:"resource-list-item__content",role:b,tabIndex:0,type:"button"===e?"button":void 0},this.hasMedia&&r("span",{key:"9eff9e9211175a0fa3583b1198889ebc575ca329",class:"resource-list-item__media"},r("slot",{key:"03648a73a9465fe76ced6fff0f053020911e0ff1",name:"media"})),r("span",{key:"88e17052070f13bfbffcf0bc7fbb71f8589179df",class:"resource-list-item__label-container",style:v},this.labelTooltip?r("swirl-tooltip",{content:this.labelTooltip,position:this.labelTooltipPosition},f()):f(),this.description&&r("span",{key:"9edf1c17a8e6bfc6dff26a35b6a02c9132e27eb1",class:"resource-list-item__description",innerHTML:this.allowHtml?this.description:void 0},!this.allowHtml&&this.description))),this.selectable&&r("span",{key:"0315322caa261121678ee67f43248f137e046b8d","aria-hidden":"true",class:"resource-list-item__checkbox"},r("span",{key:"c420650ba9b1d5661914ee8f64b55c00cfe4bafd",class:"resource-list-item__checkbox-icon"},this.checked&&r("swirl-icon-check-strong",{key:"2998ee33756b79761e808ac07f570196bb5e8768"}))),d&&r("span",{key:"3cea3f4e627f1222c6f2eb166a093b2de3c8a44f",class:"resource-list-item__meta"},this.meta&&r("span",{key:"68ac0d63d2a006be64cf9344060778a3daac6820",class:"resource-list-item__meta-text"},this.meta),r("span",{key:"e521386e37ea99548e822b443fb216a3b2c329a6",class:"resource-list-item__badges"},r("slot",{key:"4e0d8da96407a4807ae602866d1ac74ec33ce9f0",name:"badges"}))),r("span",{key:"47fdc67bd22ceb6bca52be95c4744ba7bfc30065",class:"resource-list-item__control",onClick:this.onControlClick},r("slot",{key:"37a76e3094506e1758e5945cb44756744870c0a7",name:"control"})),u&&r("swirl-popover-trigger",{key:"ff00f1b5a429a8ebab48bce2bc5852362f0596d1",swirlPopover:this.menuTriggerId},r("swirl-button",{key:"f6a8e61ad321ed9b8049310b76fa311be02a7ad0","aria-disabled":i?"true":void 0,class:"resource-list-item__menu-trigger",disabled:i,hideLabel:!0,icon:"<swirl-icon-more-horizontal></swirl-icon-more-horizontal>",intent:"primary",label:this.menuTriggerLabel,onClick:this.onMenuTriggerClick}))),this.allowDrag&&r("button",{key:"ba40ed90c5bb91c9fb73c54a9124f94974b8d335","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"resource-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,type:"button"},r("swirl-icon-drag-handle",{key:"3c7c4a7cb600706388e9d01036beb92ea99e5003",size:this.iconSize})))}get el(){return this}static get style(){return'.sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h .sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.swirl-resource-list-item--drag.sc-swirl-resource-list-item-h{border-radius:var(--s-border-radius-sm);background-color:var(--s-translucent-medium-pressed)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;padding:var(--s-space-12) var(--s-space-8);gap:var(--s-space-12);border-radius:var(--s-border-radius-sm);background-color:var(--swirl-resource-list-item-background-default);--swirl-badge-border-color:transparent}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--swirl-resource-list-item-background-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--has-control) .resource-list-item__control.sc-swirl-resource-list-item{display:none}.resource-list-item--interactive.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.resource-list-item--disabled.sc-swirl-resource-list-item{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled),.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item{--swirl-badge-border-color:var( --swirl-resource-list-item-background-hovered );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2rem}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}@media (hover: hover){.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1;position:static;transform:none;margin:calc(-1 var(--s-space-4)) 0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:0;padding-right:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:calc(-1 * var(--s-space-16));padding-right:var(--s-space-16);transition:margin 0.1s}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0;position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%);transition:opacity 0.1s}}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-state-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08), 0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-state-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label-max-lines.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:transparent;display:flex;width:100%;min-width:0;margin:0;padding:0;align-items:flex-start;border:none;color:var(--s-text-default);background:none;font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus,.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;height:100%;min-width:0;min-height:3rem;padding-right:var(--s-space-16);justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{align-self:center}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:calc(var(--s-space-16) - var(--s-space-2))}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>.sc-swirl-resource-list-item::part(icon),.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>.sc-swirl-resource-list-item [part~="icon"]{width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__meta.sc-swirl-resource-list-item:not(:has(.resource-list-item__meta-text)){align-self:center}.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);white-space:nowrap}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-sm);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}'}},[262,"swirl-resource-list-item",{active:[4],allowDrag:[4,"allow-drag"],allowHtml:[4,"allow-html"],checked:[1028],compact:[4],description:[1],descriptionWrap:[4,"description-wrap"],disabled:[4],dragging:[4],dragHandleDescription:[1,"drag-handle-description"],dragHandleLabel:[1,"drag-handle-label"],hideDivider:[4,"hide-divider"],href:[1],interactive:[4],label:[1],labelWeight:[1,"label-weight"],labelWrap:[4,"label-wrap"],labelWrapMaxLines:[2,"label-wrap-max-lines"],labelMinHeight:[1,"label-min-height"],labelTooltip:[1,"label-tooltip"],labelTooltipPosition:[1,"label-tooltip-position"],menuTriggerId:[1,"menu-trigger-id"],menuTriggerLabel:[1,"menu-trigger-label"],meta:[1],rel:[1],selectable:[4],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaLabel:[1,"swirl-aria-label"],target:[1],value:[1],alignItems:[1,"align-items"],hasMedia:[32],iconSize:[32]}]),b=w,p=function(){"undefined"!=typeof customElements&&["swirl-resource-list-item","swirl-button","swirl-icon-check-strong","swirl-icon-drag-handle","swirl-popover-trigger","swirl-tooltip"].forEach((e=>{switch(e){case"swirl-resource-list-item":customElements.get(o(e))\|\|customElements.define(o(e),w);break;case"swirl-button":customElements.get(o(e))\|\|a();break;case"swirl-icon-check-strong":customElements.get(o(e))\|\|n();break;case"swirl-icon-drag-handle":customElements.get(o(e))\|\|m();break;case"swirl-popover-trigger":customElements.get(o(e))\|\|u();break;case"swirl-tooltip":customElements.get(o(e))\|\|d()}}))};export{b as SwirlResourceListItem,p as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as r,Host as t,transformTag as o}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{D as c}from"./media-query.service.js";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-check-strong2.js";import{d as m}from"./swirl-icon-drag-handle2.js";import{d as u}from"./swirl-popover-trigger2.js";import{d}from"./swirl-tooltip2.js";import{v as h}from"./v4.js";const w=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.toggleDrag=i(this,"toggleDrag",7),this.valueChange=i(this,"valueChange",7),this.checked=!1,this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move item",this.interactive=!0,this.labelWeight="medium",this.labelTooltipPosition="top",this.menuTriggerLabel="Options",this.hasMedia=!1,this.iconSize=24,this.elementId=h(),this.mediaQueryUnsubscribe=()=>{},this.onClick=()=>{this.selectable&&(this.checked=!this.checked,this.valueChange.emit(this.checked))},this.onBlur=()=>{this.makeControlUnfocusable()},this.onFocus=()=>{this.makeControlFocusable()},this.onMenuTriggerClick=e=>{this.disabled&&!this.href&&e.stopPropagation()},this.onDragHandleKeyDown=e=>{"Space"!==e.code&&"Enter"!==e.code\|\|(e.preventDefault(),this.toggleDrag.emit(this.el))},this.onControlClick=e=>{e.preventDefault(),e.stopPropagation()}}componentWillLoad(){this.updateMediaState()}componentDidLoad(){this.parentSemantics=this.el.closest("swirl-resource-list")?.semantics,this.mediaQueryUnsubscribe=c.subscribe((e=>{this.forceIconProps(e),this.updateIconSize(e)})),this.makeControlUnfocusable(),this.menuTriggerId&&console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs')}disconnectedCallback(){this.mediaQueryUnsubscribe()}get hasBadges(){return!!this.el.querySelector("[slot='badges']")}get showMeta(){return(!!this.meta\|\|this.hasBadges)&&!this.selectable}forceIconProps(e){const s=this.iconEl?.children[0];s?.setAttribute("size",e?"20":"24")}updateIconSize(e){this.iconSize=e?20:24}updateMediaState(){const e=!!this.el.querySelector('[slot="media"]');e!==this.hasMedia&&(this.hasMedia=e)}getControl(){return this.el.querySelector('[slot="control"] button')}makeControlFocusable(){if("grid"!==this.parentSemantics)return;const e=this.getControl();e&&(e.tabIndex=0)}makeControlUnfocusable(){if("grid"!==this.parentSemantics)return;const e=this.getControl();e&&(e.tabIndex=-1)}render(){const e=this.interactive\|\|this.selectable?this.href&&!this.selectable?"a":"button":"div",s="a"===e,i=this.disabled&&!this.href,o=this.hasBadges,c=this.el.querySelector("[slot='control']"),a=!!this.menuTriggerId\|\|c,n=this.interactive&&this.href?this.href:void 0,m=c&&(!!this.meta\|\|o),u=!!this.menuTriggerId&&!this.meta&&!this.selectable,d=this.showMeta,h=this.swirlAriaLabel?this.swirlAriaLabel:this.label,w=this.selectable?this.checked+"":void 0,b=this.interactive&&this.selectable?"checkbox":void 0,p=this.el.closest('[role="grid"]')?"row":"listitem",g="row"===p?"gridcell":void 0,v={minHeight:this.labelMinHeight??void 0},f=()=>r("span",{key:"537dd934195837b1f62852e91bc8d3e60fd7163a",class:"resource-list-item__label",id:this.elementId,innerHTML:this.allowHtml?this.label:void 0,style:{"-webkit-line-clamp":this.labelWrapMaxLines?this.labelWrapMaxLines+"":void 0}},!this.allowHtml&&this.label),_=l("resource-list-item","resource-list-item--label-weight-"+this.labelWeight,{"resource-list-item--active":this.active,"resource-list-item--checked":this.checked,"resource-list-item--compact":this.compact,"resource-list-item--disabled":this.disabled,"resource-list-item--draggable":this.allowDrag,"resource-list-item--dragging":this.dragging,"resource-list-item--has-control":c,"resource-list-item--has-menu":a,"resource-list-item--hide-divider":this.hideDivider,"resource-list-item--interactive":this.interactive\|\|this.selectable,"resource-list-item--selectable":this.selectable,"resource-list-item--show-control-on-focus":m,"resource-list-item--show-meta":d,"resource-list-item--wrap-description":this.descriptionWrap,"resource-list-item--wrap-label":this.labelWrap,"resource-list-item--wrap-label-max-lines":this.labelWrapMaxLines});return r(t,{key:"a0ec97096aa526c5506f5d1a7335da572c4254b0",role:p},r("div",{key:"938a0d902c62c49d5b0de62ba0b90000488b4a21",class:_,role:g,onClick:this.onClick},r(e,{key:"1fb212f7ce32d64a384885f9a5270f50eed52ff9","aria-checked":w,"aria-current":this.swirlAriaCurrent,"aria-disabled":i?"true":void 0,"aria-label":h,"aria-labelledby":this.swirlAriaLabel?void 0:this.elementId,class:"resource-list-item__content",style:{alignItems:this.alignItems},href:n,rel:s?this.rel:void 0,target:s?this.target:void 0,disabled:i,onBlur:this.onBlur,onFocus:this.onFocus,part:"resource-list-item__content",role:b,tabIndex:0,type:"button"===e?"button":void 0},this.hasMedia&&r("span",{key:"e1138053996443398d9cfcd9b18f330adf2607f6",class:"resource-list-item__media"},r("slot",{key:"765b883ef7628e0dbee7a617f0f99b3024a88ea6",name:"media"})),r("span",{key:"cd30b88132e3f76cbef1b3b438c63530a89fd4d7",class:"resource-list-item__label-container",style:v},this.labelTooltip?r("swirl-tooltip",{content:this.labelTooltip,position:this.labelTooltipPosition},f()):f(),this.description&&r("span",{key:"998fc6d09b7635155a36ec506083f396f4354d5f",class:"resource-list-item__description",innerHTML:this.allowHtml?this.description:void 0},!this.allowHtml&&this.description))),this.selectable&&r("span",{key:"35ffd1950959e8d98f32382bd0e48c2da3e87a08","aria-hidden":"true",class:"resource-list-item__checkbox"},r("span",{key:"26552aaa887512090f252ed529f272285b92ec7e",class:"resource-list-item__checkbox-icon"},this.checked&&r("swirl-icon-check-strong",{key:"47a8f92c70cc64c9a8f9bd0f3ce292f5c9ab9945"}))),d&&r("span",{key:"aad790a9b0535ff56160deed65d8c3c075e05775",class:"resource-list-item__meta"},this.meta&&r("span",{key:"cc91b6058aa3b282281dcc9122963b5ad7562325",class:"resource-list-item__meta-text"},this.meta),r("span",{key:"a51f75703daa74c1708565d4a187278dbb2f6fcf",class:"resource-list-item__badges"},r("slot",{key:"1e2a61cb3e1461b22af8f1da955b3029a041ddf3",name:"badges"}))),r("span",{key:"aceeb9ef206093840ba980cd3557f020aa86fb1d",class:"resource-list-item__control",onClick:this.onControlClick},r("slot",{key:"1e6075743a17cd29a1ea7d97863d111ddb3d85f2",name:"control"})),u&&r("swirl-popover-trigger",{key:"5d5aac56bf7f9fce6c6be8804cec45e2ed233f83",swirlPopover:this.menuTriggerId},r("swirl-button",{key:"34e4baf52d5b6c49f29bba1685e31e01d071555e","aria-disabled":i?"true":void 0,class:"resource-list-item__menu-trigger",disabled:i,hideLabel:!0,icon:"<swirl-icon-more-horizontal></swirl-icon-more-horizontal>",intent:"primary",label:this.menuTriggerLabel,onClick:this.onMenuTriggerClick}))),this.allowDrag&&r("button",{key:"2ab8938f948dd60903da5f39d6363d8d91cc6e16","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"resource-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,type:"button"},r("swirl-icon-drag-handle",{key:"cef7c5a979ec10453a31866e3f1e2ceaed9f9129",size:this.iconSize})))}get el(){return this}static get style(){return'.sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h .sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.swirl-resource-list-item--drag.sc-swirl-resource-list-item-h{border-radius:var(--s-border-radius-sm);background-color:var(--s-translucent-medium-pressed)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;padding:var(--s-space-12) var(--s-space-8);gap:var(--s-space-12);border-radius:var(--s-border-radius-sm);background-color:var(--swirl-resource-list-item-background-default);--swirl-badge-border-color:transparent}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--swirl-resource-list-item-background-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--has-control) .resource-list-item__control.sc-swirl-resource-list-item{display:none}.resource-list-item--interactive.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.resource-list-item--disabled.sc-swirl-resource-list-item{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled),.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item{--swirl-badge-border-color:var( --swirl-resource-list-item-background-hovered );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2rem}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}@media (hover: hover){.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1;position:static;transform:none;margin:calc(-1 var(--s-space-4)) 0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:0;padding-right:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:calc(-1 * var(--s-space-16));padding-right:var(--s-space-16);transition:margin 0.1s}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0;position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%);transition:opacity 0.1s}}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-state-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08), 0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-state-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label-max-lines.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:transparent;display:flex;width:100%;min-width:0;margin:0;padding:0;align-items:flex-start;border:none;color:var(--s-text-default);background:none;font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus,.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;height:100%;min-width:0;min-height:3rem;padding-right:var(--s-space-16);justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{align-self:center}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:calc(var(--s-space-16) - var(--s-space-2))}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>.sc-swirl-resource-list-item::part(icon),.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>.sc-swirl-resource-list-item [part~="icon"]{width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__meta.sc-swirl-resource-list-item:not(:has(.resource-list-item__meta-text)){align-self:center}.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);white-space:nowrap}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-sm);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}'}},[262,"swirl-resource-list-item",{active:[4],allowDrag:[4,"allow-drag"],allowHtml:[4,"allow-html"],checked:[1028],compact:[4],description:[1],descriptionWrap:[4,"description-wrap"],disabled:[4],dragging:[4],dragHandleDescription:[1,"drag-handle-description"],dragHandleLabel:[1,"drag-handle-label"],hideDivider:[4,"hide-divider"],href:[1],interactive:[4],label:[1],labelWeight:[1,"label-weight"],labelWrap:[4,"label-wrap"],labelWrapMaxLines:[2,"label-wrap-max-lines"],labelMinHeight:[1,"label-min-height"],labelTooltip:[1,"label-tooltip"],labelTooltipPosition:[1,"label-tooltip-position"],menuTriggerId:[1,"menu-trigger-id"],menuTriggerLabel:[1,"menu-trigger-label"],meta:[1],rel:[1],selectable:[4],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaLabel:[1,"swirl-aria-label"],target:[1],value:[1],alignItems:[1,"align-items"],hasMedia:[32],iconSize:[32]}]),b=w,p=function(){"undefined"!=typeof customElements&&["swirl-resource-list-item","swirl-button","swirl-icon-check-strong","swirl-icon-drag-handle","swirl-popover-trigger","swirl-tooltip"].forEach((e=>{switch(e){case"swirl-resource-list-item":customElements.get(o(e))\|\|customElements.define(o(e),w);break;case"swirl-button":customElements.get(o(e))\|\|a();break;case"swirl-icon-check-strong":customElements.get(o(e))\|\|n();break;case"swirl-icon-drag-handle":customElements.get(o(e))\|\|m();break;case"swirl-popover-trigger":customElements.get(o(e))\|\|u();break;case"swirl-tooltip":customElements.get(o(e))\|\|d()}}))};export{b as SwirlResourceListItem,p as defineCustomElement}

package/dist/components/swirl-resource-list-section.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as a}from"@stencil/core/internal/client";import{d as r}from"./swirl-separator2.js";import{d as l}from"./swirl-stack2.js";const o=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){const e=this.el.closest('[role="grid"]')?"rowgroup":"listitem",s="listitem"===e?"list":void 0;return t(i,{key:"~~1fdc28854f7f011226a6862e88be6e84fd62615d~~"},this.hasSeparator&&t("swirl-separator",{key:"~~e7fab8939f9024358d0c7aa158ba4f782c07147d~~",spacing:this.separatorSpacing,semantics:"none"}),t("div",{key:"~~20901ce0a7c47e1bf43c0d7538fda7139b1bf400~~","aria-labelledby":"label",role:e},t("span",{key:"~~c85199cf30d9ca3a438929c4064689b241a957a3~~",id:"label",class:"resource-list-section-label",part:"resource-list-section-label"},this.label),t("swirl-stack",{key:"~~2db0e177e72897ad0fa697e3ef38a0a59041b320~~",spacing:this.spacing,swirlAriaRole:s},t("slot",{key:"~~8d21b00a60e98a94f804b90285766e2e21ebde5d~~"}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-section-label{display:flex;padding:var(--s-space-8);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);font-size:var(--s-font-size-base);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-section-label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}"}},[257,"swirl-resource-list-section",{label:[1],separatorSpacing:[1,"separator-spacing"],spacing:[1],hasSeparator:[4,"has-separator"]}]),c=o,n=function(){"undefined"!=typeof customElements&&["swirl-resource-list-section","swirl-separator","swirl-stack"].forEach((e=>{switch(e){case"swirl-resource-list-section":customElements.get(a(e))\|\|customElements.define(a(e),o);break;case"swirl-separator":customElements.get(a(e))\|\|r();break;case"swirl-stack":customElements.get(a(e))\|\|l()}}))};export{c as SwirlResourceListSection,n as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as r}from"@stencil/core/internal/client";import{d as a}from"./swirl-separator2.js";import{d as c}from"./swirl-stack2.js";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){const e=this.el.closest('[role="grid"]')?"rowgroup":"listitem",s="listitem"===e?"list":void 0;return t(i,{key:"a887ec0222df1a7996fc23fe028f080782bb8eb7"},this.hasSeparator&&t("swirl-separator",{key:"fa995f853c1f207771d732cd17647e79d017fd14",spacing:this.separatorSpacing,semantics:"none"}),t("div",{key:"fc2ea15f63932d6a83ce67688d9fe1c6ba89f95c","aria-labelledby":"label",role:e},t("span",{key:"b664ab8288488c28bc528127dbc8192b6b9f153e",id:"label",class:"resource-list-section-label",part:"resource-list-section-label"},this.label),t("swirl-stack",{key:"077425054b54482386cdfe45e7ff8dec7321f723",spacing:this.spacing,swirlAriaRole:s},t("slot",{key:"f1308be9a03303b6ecc05616cfd892c13e0c6c73"}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-section-label{display:flex;padding:var(--s-space-8);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);font-size:var(--s-font-size-base);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-section-label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}"}},[257,"swirl-resource-list-section",{label:[1],separatorSpacing:[1,"separator-spacing"],spacing:[1],hasSeparator:[4,"has-separator"]}]),o=l,n=function(){"undefined"!=typeof customElements&&["swirl-resource-list-section","swirl-separator","swirl-stack"].forEach((e=>{switch(e){case"swirl-resource-list-section":customElements.get(r(e))\|\|customElements.define(r(e),l);break;case"swirl-separator":customElements.get(r(e))\|\|a();break;case"swirl-stack":customElements.get(r(e))\|\|c()}}))};export{o as SwirlResourceListSection,n as defineCustomElement}

package/dist/components/swirl-resource-list.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as r,transformTag as h}from"@stencil/core/internal/client";import{S as o}from"./sortable.esm.js";import{d as a}from"./swirl-box2.js";import{d as l}from"./swirl-stack2.js";import{d as n}from"./swirl-visually-hidden2.js";import{v as d}from"./v4.js";const c=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.itemDrop=i(this,"itemDrop",7),this.assistiveTextItemGrabbed="Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.",this.assistiveTextItemMoving="Current position:",this.assistiveTextItemMoved="Item moved. New position:",this.semantics="grid",this.spacing="0",this.listId=d(),this.focusedIndex=0,this.componentLoaded=!1,this.toggleDrag=t=>{const s=t.detail;this.dragging?this.stopDrag(s):this.startDrag(s)},this.startDrag=t=>{this.dragging=t,this.draggingStartIndex=this.getItemIndex(this.dragging),t.setAttribute("dragging","true");const s=this.getItemIndex(this.dragging);this.focusItemAtIndex(s),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=t=>{const s=this.getItemIndex(this.dragging);this.dragging=void 0,t.removeAttribute("dragging"),this.assistiveText=`${this.assistiveTextItemMoved} ${s+1}`,this.itemDrop.emit({item:t,oldIndex:this.draggingStartIndex,newIndex:s}),this.draggingStartIndex=void 0},this.onKeyDown=t=>{if("grid"===this.semantics&&!this.dragging)if("ArrowDown"===t.code)t.preventDefault(),this.focusItemAtIndex((this.focusedIndex+1)%this.items.length);else if("ArrowUp"===t.code)t.preventDefault(),this.focusItemAtIndex(0===this.focusedIndex?this.items.length-1:this.focusedIndex-1);else if("Enter"===t.code&&this.controllingElement){const s=this.items[this.focusedIndex];if(!s\|\|!s.isConnected)return;t.stopPropagation(),t.preventDefault(),s.click()}else"Home"===t.code?(t.preventDefault(),this.focusItemAtIndex(0)):"End"===t.code&&(t.preventDefault(),this.focusItemAtIndex(this.items.length-1));if(this.dragging)if("ArrowDown"===t.code)t.preventDefault(),this.moveDraggedItemDown();else if("ArrowUp"===t.code)t.preventDefault(),this.moveDraggedItemUp();else if("Space"===t.code\|\|"Enter"===t.code){const s=t.composedPath()[0];s?.classList.contains("resource-list-item__drag-handle")\|\|(t.preventDefault(),this.stopDrag(this.dragging))}}}connectedCallback(){this.componentLoaded&&(this.observeSlotChanges(),this.collectItems(),this.setupControllingElement(),this.setItemAllowDragState())}componentDidLoad(){this.observeSlotChanges(),this.collectItems(),this.setupControllingElement(),this.setItemAllowDragState(),this.setupDragDrop(),this.setSectionSpacingAndSeparator(),this.componentLoaded=!0}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.sortable?.destroy(),this.observer?.disconnect(),this.controllingElement?.removeEventListener("keydown",this.onKeyDown),this.removeToggleDragListeners()}observeSlotChanges(){this.observer?.disconnect(),this.observer=new MutationObserver((()=>{this.collectItems(),this.setItemAllowDragState(),this.setSectionSpacingAndSeparator()})),this.observer.observe(this.el,{childList:!0,characterData:!0,subtree:!0})}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}async resetFocus(){this.focusedIndex=0,this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[0]),this.controllingElement&&this.items[0]?.setAttribute("aria-selected","true")}collectItems(){this.removeToggleDragListeners(),this.items=Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item, [data-resource-list-item]")).filter((t=>t.isConnected)),this.sections=Array.from(this.el.querySelectorAll("swirl-resource-list-section")).filter((t=>t.isConnected)),this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[this.focusedIndex]),this.controllingElement&&this.items[0]?.setAttribute("aria-selected","true")}setupControllingElement(){this.controllingElement&&(this.controllingElement.setAttribute("aria-controls",this.listId),this.controllingElement.setAttribute("role","combobox"),this.controllingElement.setAttribute("aria-autocomplete","list"),this.controllingElement.addEventListener("keydown",this.onKeyDown))}getItemIndex(t){return this.items.map((t=>t)).findIndex((s=>s===t))}removeItemsFromTabOrder(){"grid"===this.semantics&&this.items.forEach((t=>{const s=t?.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"),i=t?.querySelector(".resource-list-item__drag-handle");this.controllingElement&&t.setAttribute("aria-selected","false"),s?.setAttribute("tabIndex","-1"),i?.setAttribute("tabIndex","-1")}))}removeToggleDragListeners(){this.items?.forEach((t=>{t.removeEventListener("toggleDrag",this.toggleDrag)}))}setItemAllowDragState(){this.allowDrag?this.items.filter((t=>this.sections.every((s=>!s.contains(t))))).forEach((t=>{t.setAttribute("allow-drag","true"),t.addEventListener("toggleDrag",this.toggleDrag)})):this.items.forEach((t=>{t.removeAttribute("allow-drag"),t.removeEventListener("toggleDrag",this.toggleDrag)}))}setupDragDrop(){this.sortable&&this.sortable.destroy(),this.allowDrag&&(this.sortable=o.create(this.gridEl,{animation:150,draggable:"swirl-resource-list-item",dragClass:"swirl-resource-list-item--drag",handle:".resource-list-item__drag-handle",onEnd:t=>{this.itemDrop.emit({item:t.item,oldIndex:t.oldDraggableIndex,newIndex:t.newDraggableIndex})}}))}enableItemFocus(t,s){if(!t\|\|this.controllingElement)return;const i=t.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"),e=t.querySelector(".resource-list-item__drag-handle");e&&e.setAttribute("tabIndex","0"),i&&(i.setAttribute("tabIndex","0"),s&&!this.controllingElement&&i.focus())}focusItemAtIndex(t){this.removeItemsFromTabOrder();const s=this.items[t];s&&s.isConnected&&(this.enableItemFocus(s,!this.controllingElement),this.controllingElement&&(s.setAttribute("aria-selected","true"),s.scrollIntoView({block:"nearest"})),this.focusedIndex=t)}moveDraggedItemDown(){const t=this.dragging.nextElementSibling;t&&(t.after(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}moveDraggedItemUp(){const t=this.dragging.previousElementSibling;t&&(t.before(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}setSectionSpacingAndSeparator(){this.sections.forEach(((t,s)=>{0===s&&"SWIRL-RESOURCE-LIST-ITEM"!==t.previousElementSibling?.tagName&&(t.hasSeparator=!1),t.spacing=this.spacing}))}render(){return e(r,{key:"~~db1272f3ed64bf3fe82d3e43e1dbc0bc89d2f583~~",onKeyDown:this.onKeyDown},e("swirl-visually-hidden",{key:"~~3d59481a765c17108df32dfcdc1a9117afe84009~~",role:"alert"},this.assistiveText),e("swirl-box",{key:"~~2d03efc09b3d3c8fe0199bb1d2c481036178bbae~~",paddingBlockEnd:this.paddingBlockEnd??this.padding,paddingBlockStart:this.paddingBlockStart??this.padding,paddingInlineEnd:this.paddingInlineEnd??this.padding??"8",paddingInlineStart:this.paddingInlineStart??this.padding??"8"},e("swirl-stack",{key:"~~18fb0bf243879645a03ca60bddf877f660802615~~","aria-label":this.label,class:"resource-list",id:this.listId,ref:t=>this.gridEl=t,role:this.semantics,spacing:this.spacing},e("slot",{key:"~~572995dad1f22d6e6dce36c6608c1951872c2fcc~~"}))))}get el(){return this}static get watchers(){return{allowDrag:[{watchAllowDrag:0}]}}static get style(){return".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}"}},[262,"swirl-resource-list",{allowDrag:[4,"allow-drag"],assistiveTextItemGrabbed:[1,"assistive-text-item-grabbed"],assistiveTextItemMoving:[1,"assistive-text-item-moving"],assistiveTextItemMoved:[1,"assistive-text-item-moved"],controllingElement:[16],label:[1],padding:[1],paddingBlockEnd:[1,"padding-block-end"],paddingBlockStart:[1,"padding-block-start"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],semantics:[1],spacing:[1],assistiveText:[32],listId:[32],resetFocus:[64]},void 0,{allowDrag:[{watchAllowDrag:0}]}]),m=c,g=function(){"undefined"!=typeof customElements&&["swirl-resource-list","swirl-box","swirl-stack","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-resource-list":customElements.get(h(t))\|\|customElements.define(h(t),c);break;case"swirl-box":customElements.get(h(t))\|\|a();break;case"swirl-stack":customElements.get(h(t))\|\|l();break;case"swirl-visually-hidden":customElements.get(h(t))\|\|n()}}))};export{m as SwirlResourceList,g as defineCustomElement}
1	+ import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as r,transformTag as h}from"@stencil/core/internal/client";import{S as a}from"./sortable.esm.js";import{d as o}from"./swirl-box2.js";import{d as l}from"./swirl-stack2.js";import{d as n}from"./swirl-visually-hidden2.js";import{v as c}from"./v4.js";const d=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.itemDrop=i(this,"itemDrop",7),this.assistiveTextItemGrabbed="Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.",this.assistiveTextItemMoving="Current position:",this.assistiveTextItemMoved="Item moved. New position:",this.semantics="grid",this.spacing="0",this.listId=c(),this.focusedIndex=0,this.componentLoaded=!1,this.toggleDrag=t=>{const s=t.detail;this.dragging?this.stopDrag(s):this.startDrag(s)},this.startDrag=t=>{this.dragging=t,this.draggingStartIndex=this.getItemIndex(this.dragging),t.setAttribute("dragging","true");const s=this.getItemIndex(this.dragging);this.focusItemAtIndex(s),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=t=>{const s=this.getItemIndex(this.dragging);this.dragging=void 0,t.removeAttribute("dragging"),this.assistiveText=`${this.assistiveTextItemMoved} ${s+1}`,this.itemDrop.emit({item:t,oldIndex:this.draggingStartIndex,newIndex:s}),this.draggingStartIndex=void 0},this.onKeyDown=t=>{if("grid"===this.semantics&&!this.dragging)if("ArrowDown"===t.code)t.preventDefault(),this.focusItemAtIndex((this.focusedIndex+1)%this.items.length);else if("ArrowUp"===t.code)t.preventDefault(),this.focusItemAtIndex(0===this.focusedIndex?this.items.length-1:this.focusedIndex-1);else if("Enter"===t.code&&this.controllingElement){const s=this.items[this.focusedIndex];if(!s\|\|!s.isConnected)return;t.stopPropagation(),t.preventDefault(),s.click()}else"Home"===t.code?(t.preventDefault(),this.focusItemAtIndex(0)):"End"===t.code&&(t.preventDefault(),this.focusItemAtIndex(this.items.length-1));if(this.dragging)if("ArrowDown"===t.code)t.preventDefault(),this.moveDraggedItemDown();else if("ArrowUp"===t.code)t.preventDefault(),this.moveDraggedItemUp();else if("Space"===t.code\|\|"Enter"===t.code){const s=t.composedPath()[0];s?.classList.contains("resource-list-item__drag-handle")\|\|(t.preventDefault(),this.stopDrag(this.dragging))}}}connectedCallback(){this.componentLoaded&&(this.observeSlotChanges(),this.collectItems(),this.setupControllingElement(),this.setItemAllowDragState())}componentDidLoad(){this.observeSlotChanges(),this.collectItems(),this.setupControllingElement(),this.setItemAllowDragState(),this.setupDragDrop(),this.setSectionSpacingAndSeparator(),this.componentLoaded=!0}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.sortable?.destroy(),this.observer?.disconnect(),this.controllingElement?.removeEventListener("keydown",this.onKeyDown),this.removeToggleDragListeners()}observeSlotChanges(){this.observer?.disconnect(),this.observer=new MutationObserver((()=>{this.collectItems(),this.setItemAllowDragState(),this.setSectionSpacingAndSeparator()})),this.observer.observe(this.el,{childList:!0,characterData:!0,subtree:!0})}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}async resetFocus(){this.focusedIndex=0,this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[0]),this.controllingElement&&this.items[0]?.setAttribute("aria-selected","true")}collectItems(){this.removeToggleDragListeners(),this.items=Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item, [data-resource-list-item]")).filter((t=>t.isConnected)),this.sections=Array.from(this.el.querySelectorAll("swirl-resource-list-section")).filter((t=>t.isConnected)),this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[this.focusedIndex]),this.controllingElement&&this.items[0]?.setAttribute("aria-selected","true")}setupControllingElement(){this.controllingElement&&(this.controllingElement.setAttribute("aria-controls",this.listId),this.controllingElement.setAttribute("role","combobox"),this.controllingElement.setAttribute("aria-autocomplete","list"),this.controllingElement.addEventListener("keydown",this.onKeyDown))}getItemIndex(t){return this.items.map((t=>t)).findIndex((s=>s===t))}removeItemsFromTabOrder(){"grid"===this.semantics&&this.items.forEach((t=>{const s=t?.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"),i=t?.querySelector(".resource-list-item__drag-handle");this.controllingElement&&t.setAttribute("aria-selected","false"),s?.setAttribute("tabIndex","-1"),i?.setAttribute("tabIndex","-1")}))}removeToggleDragListeners(){this.items?.forEach((t=>{t.removeEventListener("toggleDrag",this.toggleDrag)}))}setItemAllowDragState(){this.allowDrag?this.items.filter((t=>this.sections.every((s=>!s.contains(t))))).forEach((t=>{t.setAttribute("allow-drag","true"),t.addEventListener("toggleDrag",this.toggleDrag)})):this.items.forEach((t=>{t.removeAttribute("allow-drag"),t.removeEventListener("toggleDrag",this.toggleDrag)}))}setupDragDrop(){this.sortable&&this.sortable.destroy(),this.allowDrag&&(this.sortable=a.create(this.gridEl,{animation:150,draggable:"swirl-resource-list-item",dragClass:"swirl-resource-list-item--drag",handle:".resource-list-item__drag-handle",onEnd:t=>{this.itemDrop.emit({item:t.item,oldIndex:t.oldDraggableIndex,newIndex:t.newDraggableIndex})}}))}enableItemFocus(t,s){if(!t\|\|this.controllingElement)return;const i=t.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"),e=t.querySelector(".resource-list-item__drag-handle");e&&e.setAttribute("tabIndex","0"),i&&(i.setAttribute("tabIndex","0"),s&&!this.controllingElement&&i.focus())}focusItemAtIndex(t){this.removeItemsFromTabOrder();const s=this.items[t];s&&s.isConnected&&(this.enableItemFocus(s,!this.controllingElement),this.controllingElement&&(s.setAttribute("aria-selected","true"),s.scrollIntoView({block:"nearest"})),this.focusedIndex=t)}moveDraggedItemDown(){const t=this.dragging.nextElementSibling;t&&(t.after(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}moveDraggedItemUp(){const t=this.dragging.previousElementSibling;t&&(t.before(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}setSectionSpacingAndSeparator(){this.sections.forEach(((t,s)=>{0===s&&"SWIRL-RESOURCE-LIST-ITEM"!==t.previousElementSibling?.tagName&&(t.hasSeparator=!1),t.spacing=this.spacing}))}render(){return e(r,{key:"0a7edd843c77cb5105b0523a4e60a0c470aa54ba",onKeyDown:this.onKeyDown},e("swirl-visually-hidden",{key:"c7361c42c129ee08ad1a70cb135d5a4eac7b8691",role:"alert"},this.assistiveText),e("swirl-box",{key:"748481c0b950167cfbced4ef486a87e2a1892deb",paddingBlockEnd:this.paddingBlockEnd??this.padding,paddingBlockStart:this.paddingBlockStart??this.padding,paddingInlineEnd:this.paddingInlineEnd??this.padding??"8",paddingInlineStart:this.paddingInlineStart??this.padding??"8"},e("swirl-stack",{key:"85c7697b06af904deaef64414b2f5b53caada0c2","aria-label":this.label,class:"resource-list",id:this.listId,ref:t=>this.gridEl=t,role:this.semantics,spacing:this.spacing},e("slot",{key:"eff384c8ac86d3dfb8eacb638959933298762459"}))))}get el(){return this}static get watchers(){return{allowDrag:[{watchAllowDrag:0}]}}static get style(){return".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}"}},[262,"swirl-resource-list",{allowDrag:[4,"allow-drag"],assistiveTextItemGrabbed:[1,"assistive-text-item-grabbed"],assistiveTextItemMoving:[1,"assistive-text-item-moving"],assistiveTextItemMoved:[1,"assistive-text-item-moved"],controllingElement:[16],label:[1],padding:[1],paddingBlockEnd:[1,"padding-block-end"],paddingBlockStart:[1,"padding-block-start"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],semantics:[1],spacing:[1],assistiveText:[32],listId:[32],resetFocus:[64]},void 0,{allowDrag:[{watchAllowDrag:0}]}]),m=d,g=function(){"undefined"!=typeof customElements&&["swirl-resource-list","swirl-box","swirl-stack","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-resource-list":customElements.get(h(t))\|\|customElements.define(h(t),d);break;case"swirl-box":customElements.get(h(t))\|\|o();break;case"swirl-stack":customElements.get(h(t))\|\|l();break;case"swirl-visually-hidden":customElements.get(h(t))\|\|n()}}))};export{m as SwirlResourceList,g as defineCustomElement}

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

	@@ -1 +1 @@
1	- import{proxyCustomElement as s,HTMLElement as e,createEvent as r,h as a,Host as i,transformTag as c}from"@stencil/core/internal/client";import{c as t}from"./index2.js";import{D as h}from"./media-query.service.js";import{d as o}from"./swirl-icon-cancel2.js";import{d as l}from"./swirl-icon-search2.js";const n=s(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.clear=r(this,"clear",7),this.inputBlur=r(this,"inputBlur",7),this.inputFocus=r(this,"inputFocus",7),this.inputInput=r(this,"inputInput",7),this.valueChange=r(this,"valueChange",7),this.clearButtonLabel="Clear search term",this.placeholder="Search …",this.variant="filled",this.clearable=!0,this.mediaQueryUnsubscribe=()=>{},this.handleClear=()=>{this.input.value="",this.input.focus(),this.valueChange.emit(""),this.clear.emit()},this.onBlur=s=>{this.inputBlur.emit(s)},this.onChange=s=>{this.valueChange.emit(s.target.value)},this.onFocus=s=>{this.inputFocus.emit(s)},this.onInput=s=>{this.inputInput.emit(s.target.value)}}componentDidLoad(){this.mediaQueryUnsubscribe=h.subscribe((s=>{this.forceIconProps(s)})),this.autoFocus&&setTimeout((()=>{this.input.focus()}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(s){if(!this.iconEl)return;const e=this.iconEl.children[0];e?.setAttribute("size",s?"20":"24")}onKeyDown(s){"KeyK"!==s.code&&"Slash"!==s.code\|\|!s.ctrlKey&&!s.metaKey\|\|this.input.focus()}render(){const s=t("search","search--variant-"+this.variant,{"search--disabled":this.disabled});return a(i,{key:"~~8e28d7e0f0fe00e19a90073b403290cd429200ec~~"},a("span",{key:"~~1f2280a34872bcd9584d492b929fe4f1f55df627~~",class:s,ref:s=>this.iconEl=s},a("swirl-icon-search",{key:"~~a57e2f88aad434366e95a4fa53e6cb520e9c8499~~","aria-hidden":"true",class:"search__icon"}),a("input",{key:"~~8b68769aa785f032a7890f682ad7eaa9c3a8b6ed~~","aria-disabled":this.disabled?"true":void 0,"aria-label":this.label,autoComplete:"off",autoFocus:this.autoFocus,class:"search__input",disabled:this.disabled,id:this.inputId,inputMode:"search",name:this.inputName,onBlur:this.onBlur,onChange:this.onChange,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:s=>this.input=s,type:"search",value:this.value}),!this.disabled&&this.clearable&&a("button",{key:"~~114afb55daf47751877f24c2abc915dc2cc0c456~~","aria-label":this.clearButtonLabel,class:"search__clear-button",onClick:this.handleClear,type:"button"},a("swirl-icon-cancel",{key:"~~2986ed718392276fe3757c72d452d943a886c3d9~~"}))))}static get style(){return".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--variant-ghost.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__icon.sc-swirl-search{width:1.25rem;height:1.25rem}}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}"}},[2,"swirl-search",{autoFocus:[4,"auto-focus"],clearButtonLabel:[1,"clear-button-label"],disabled:[4],inputName:[1,"input-name"],inputId:[1,"input-id"],label:[1],placeholder:[1],value:[1025],variant:[1],clearable:[4]},[[8,"keydown","onKeyDown"]]]),d=n,u=function(){"undefined"!=typeof customElements&&["swirl-search","swirl-icon-cancel","swirl-icon-search"].forEach((s=>{switch(s){case"swirl-search":customElements.get(c(s))\|\|customElements.define(c(s),n);break;case"swirl-icon-cancel":customElements.get(c(s))\|\|o();break;case"swirl-icon-search":customElements.get(c(s))\|\|l()}}))};export{d as SwirlSearch,u as defineCustomElement}
1	+ import{proxyCustomElement as s,HTMLElement as e,createEvent as a,h as r,Host as i,transformTag as c}from"@stencil/core/internal/client";import{c as t}from"./index2.js";import{D as h}from"./media-query.service.js";import{d as o}from"./swirl-icon-cancel2.js";import{d as l}from"./swirl-icon-search2.js";const n=s(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.clear=a(this,"clear",7),this.inputBlur=a(this,"inputBlur",7),this.inputFocus=a(this,"inputFocus",7),this.inputInput=a(this,"inputInput",7),this.valueChange=a(this,"valueChange",7),this.clearButtonLabel="Clear search term",this.placeholder="Search …",this.variant="filled",this.clearable=!0,this.mediaQueryUnsubscribe=()=>{},this.handleClear=()=>{this.input.value="",this.input.focus(),this.valueChange.emit(""),this.clear.emit()},this.onBlur=s=>{this.inputBlur.emit(s)},this.onChange=s=>{this.valueChange.emit(s.target.value)},this.onFocus=s=>{this.inputFocus.emit(s)},this.onInput=s=>{this.inputInput.emit(s.target.value)}}componentDidLoad(){this.mediaQueryUnsubscribe=h.subscribe((s=>{this.forceIconProps(s)})),this.autoFocus&&setTimeout((()=>{this.input.focus()}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(s){if(!this.iconEl)return;const e=this.iconEl.children[0];e?.setAttribute("size",s?"20":"24")}onKeyDown(s){"KeyK"!==s.code&&"Slash"!==s.code\|\|!s.ctrlKey&&!s.metaKey\|\|this.input.focus()}render(){const s=t("search","search--variant-"+this.variant,{"search--disabled":this.disabled});return r(i,{key:"9aac9c281431aa153ffa70eae161a26255ccfda7"},r("span",{key:"eb01350e9f67d7c2aa0788d3ef3c8d11684d0727",class:s,ref:s=>this.iconEl=s},r("swirl-icon-search",{key:"6acb05b4c0955289341cae0c21c2dd75e6c11fa2","aria-hidden":"true",class:"search__icon"}),r("input",{key:"6a2055aeab25053c580416a42d4793d8bcaefcd2","aria-disabled":this.disabled?"true":void 0,"aria-label":this.label,autoComplete:"off",autoFocus:this.autoFocus,class:"search__input",disabled:this.disabled,id:this.inputId,inputMode:"search",name:this.inputName,onBlur:this.onBlur,onChange:this.onChange,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:s=>this.input=s,type:"search",value:this.value}),!this.disabled&&this.clearable&&r("button",{key:"f62084a923fbef39a502cab37bc55a2e60f975af","aria-label":this.clearButtonLabel,class:"search__clear-button",onClick:this.handleClear,type:"button"},r("swirl-icon-cancel",{key:"05ad58ac988d42b8fc5589c70b74a72ea2bc293f"}))))}static get style(){return".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--variant-ghost.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__icon.sc-swirl-search{width:1.25rem;height:1.25rem}}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}"}},[2,"swirl-search",{autoFocus:[4,"auto-focus"],clearButtonLabel:[1,"clear-button-label"],disabled:[4],inputName:[1,"input-name"],inputId:[1,"input-id"],label:[1],placeholder:[1],value:[1025],variant:[1],clearable:[4]},[[8,"keydown","onKeyDown"]]]),d=n,u=function(){"undefined"!=typeof customElements&&["swirl-search","swirl-icon-cancel","swirl-icon-search"].forEach((s=>{switch(s){case"swirl-search":customElements.get(c(s))\|\|customElements.define(c(s),n);break;case"swirl-icon-cancel":customElements.get(c(s))\|\|o();break;case"swirl-icon-search":customElements.get(c(s))\|\|l()}}))};export{d as SwirlSearch,u as defineCustomElement}