@webority/ui-elements 0.50.0 → 0.51.0

package/dist/{WuiTour-CE7SQAso.js → WuiTour-B1-3ZCUl.js}

@@ -166,4 +166,4 @@ ${Object.entries({"--wui-z-tour":`1550`,"--wui-radius-sm":`8px`,"--wui-radius-lg
                     </div>
                 </div>
             </div>
-            <div class="visually-hidden" role="status" aria-live="polite"></div>`;let r=n;this._shadow=null,this.isolated&&(r=document.createElement(o),this._shadow=r.attachShadow({mode:`open`}),_(this._shadow),this._shadow.appendChild(n)),document.body.appendChild(r),this._outer=r,this._layer=n,this._spot=n.querySelector(`.wui-tour-spot`),this._card=n.querySelector(`.wui-tour-card`),this._live=n.querySelector(`[role=status]`),this._card.querySelector(`.wui-tour-skip`).addEventListener(`click`,()=>this._close(`skipped`)),this._card.querySelector(`.wui-tour-back`).addEventListener(`click`,()=>this._move(-1)),this._card.querySelector(`.wui-tour-next`).addEventListener(`click`,()=>this._move(1)),this._shadow&&this._card.removeAttribute(`aria-modal`),this._onKey=e=>this._key(e),this._onFocusIn=e=>{this._layer&&!this._layer.contains(e.target)&&this._card.focus()},document.addEventListener(`keydown`,this._onKey,!0),this._shadow||document.addEventListener(`focusin`,this._onFocusIn),t(r,()=>this._place())}_active(){return this._shadow?this._shadow.activeElement:document.activeElement}_show(e){this._current=e;let{index:t,target:n}=e,r=this._steps[t],i=this._steps,a=t===i.length-1,o=this._card;o.querySelector(`.wui-tour-position`).textContent=`Step ${t+1} of ${i.length}`;let s=o.querySelector(`.wui-tour-title`);s.textContent=r.title||``,s.hidden=!r.title,o.querySelector(`.wui-tour-text`).textContent=r.description||``,o.querySelector(`.wui-tour-skip`).textContent=this._label(`skip`),o.querySelector(`.wui-tour-back`).textContent=this._label(`back`),o.querySelector(`.wui-tour-back`).hidden=t<=this._firstIndex,o.querySelector(`.wui-tour-next`).textContent=this._label(a?`done`:`next`),this._live.textContent=[`Step ${t+1} of ${i.length}`,r.title,r.description].filter(Boolean).join(`. `),n?.scrollIntoView?.({block:`center`,inline:`nearest`}),this._place();let c=this._active();(o.contains(c)?!c.hidden:this._shadow!==null&&m(h()))||o.focus(),this.dispatchEvent(new CustomEvent(`wui-tour:step`,{bubbles:!0,detail:{step:r,index:t}}))}_place(){if(!this._current||!this._layer)return;let e=this._spot.style,t=this._card.style;if(!this._current.target){e.top=`50%`,e.left=`50%`,e.width=`0px`,e.height=`0px`,e.boxShadow=`0 0 0 100vmax var(--color-scrim-strong)`,this._card.classList.remove(`drop-up`),t.position=`fixed`,t.top=`50%`,t.left=`50%`,t.transform=`translate(-50%, -50%)`,t.maxHeight=`calc(100vh - 16px)`;return}e.boxShadow=``,t.transform=``;let n=this._current.target.getBoundingClientRect();e.top=`${n.top-u}px`,e.left=`${n.left-u}px`,e.width=`${n.width+u*2}px`,e.height=`${n.height+u*2}px`,r(this._spot,this._card,{clampHeight:!0})}async _move(e){this._current&&await this._go(this._current.index+e,e)}async _go(e,t){if(!this._current||this._moving)return;this._moving=!0;let n=this._run;try{let r=await this._locate(e,t,n);if(n!==this._run)return;r?this._show(r):t>0&&await this._close(`finished`)}finally{this._moving=!1}}_key(e){if(!(!this._layer||e.altKey||e.ctrlKey||e.metaKey)){if(e.key===`Escape`)e.preventDefault(),e.stopPropagation(),this._close(`skipped`);else if(e.key===`ArrowRight`||e.key===`ArrowLeft`){if(this._shadow&&m(e.composedPath?.()[0]??e.target))return;e.preventDefault(),e.key===`ArrowRight`?this._move(1):this._current.index>this._firstIndex&&this._move(-1)}else if(e.key===`Tab`&&!this._shadow){let t=Array.from(this._card.querySelectorAll(`button`)).filter(e=>!e.hidden),n=t[0],r=t[t.length-1],i=this._active();!this._card.contains(i)||e.shiftKey&&(i===n||i===this._card)?(e.preventDefault(),(e.shiftKey?r:n).focus()):!e.shiftKey&&i===r&&(e.preventDefault(),n.focus())}}}_teardown(){if(!this._layer)return;document.removeEventListener(`keydown`,this._onKey,!0),document.removeEventListener(`focusin`,this._onFocusIn);let e=!this._shadow||this._shadow.activeElement!==null||!document.activeElement||document.activeElement===document.body;n(this._outer),this._outer.remove(),this._outer=null,this._shadow=null,this._layer=null,this._current=null;let t=this._returnFocus;this._returnFocus=null,e&&t?.isConnected&&t.focus?.()}async _close(e){let t=this._run;this._teardown();let n=this._store();try{n&&t===this._run&&await n.markSeen(this.tourId)}finally{this._finish(e)}}_finish(e){this._run++,this._running=!1,this.hasAttribute(`open`)&&this.removeAttribute(`open`),this.dispatchEvent(new CustomEvent(`wui-tour:close`,{bubbles:!0,detail:{reason:e}}))}};export{f as n,v as t};
+            <div class="visually-hidden" role="status" aria-live="polite"></div>`;let r=n;this._shadow=null,this.isolated&&(r=document.createElement(o),this._shadow=r.attachShadow({mode:`open`}),_(this._shadow),this._shadow.appendChild(n)),document.body.appendChild(r),this._outer=r,this._layer=n,this._spot=n.querySelector(`.wui-tour-spot`),this._card=n.querySelector(`.wui-tour-card`),this._live=n.querySelector(`[role=status]`),this._card.querySelector(`.wui-tour-skip`).addEventListener(`click`,()=>this._close(`skipped`)),this._card.querySelector(`.wui-tour-back`).addEventListener(`click`,()=>this._move(-1)),this._card.querySelector(`.wui-tour-next`).addEventListener(`click`,()=>this._move(1)),this._shadow&&this._card.removeAttribute(`aria-modal`),this._onKey=e=>this._key(e),this._onFocusIn=e=>{this._layer&&!this._layer.contains(e.target)&&this._card.focus()},document.addEventListener(`keydown`,this._onKey,!0),this._shadow||document.addEventListener(`focusin`,this._onFocusIn),t(r,()=>this._place())}_active(){return this._shadow?this._shadow.activeElement:document.activeElement}_show(e){this._current=e;let{index:t,target:n}=e,r=this._steps[t],i=this._steps,a=t===i.length-1,o=this._card;o.querySelector(`.wui-tour-position`).textContent=`Step ${t+1} of ${i.length}`;let s=o.querySelector(`.wui-tour-title`);s.textContent=r.title||``,s.hidden=!r.title,o.querySelector(`.wui-tour-text`).textContent=r.description||``,o.querySelector(`.wui-tour-skip`).textContent=this._label(`skip`),o.querySelector(`.wui-tour-back`).textContent=this._label(`back`),o.querySelector(`.wui-tour-back`).hidden=t<=this._firstIndex,o.querySelector(`.wui-tour-next`).textContent=this._label(a?`done`:`next`),this._live.textContent=[`Step ${t+1} of ${i.length}`,r.title,r.description].filter(Boolean).join(`. `),n?.scrollIntoView?.({block:`center`,inline:`nearest`}),this._place();let c=this._active();(o.contains(c)?!c.hidden:this._shadow!==null&&m(h()))||o.focus(),this.dispatchEvent(new CustomEvent(`wui-tour:step`,{bubbles:!0,detail:{step:r,index:t}}))}_place(){if(!this._current||!this._layer)return;let e=this._spot.style,t=this._card.style;if(!this._current.target){e.top=`50%`,e.left=`50%`,e.width=`0px`,e.height=`0px`,e.boxShadow=`0 0 0 100vmax var(--color-scrim-strong)`,this._card.classList.remove(`drop-up`),t.position=`fixed`,t.top=`50%`,t.left=`50%`,t.transform=`translate(-50%, -50%)`,t.maxHeight=`calc(100vh - 16px)`;return}e.boxShadow=``,t.transform=``;let n=this._current.target.getBoundingClientRect(),i={top:n.top-u,left:n.left-u,width:n.width+u*2,height:n.height+u*2,bottom:n.bottom+u,right:n.right+u};e.top=`${i.top}px`,e.left=`${i.left}px`,e.width=`${i.width}px`,e.height=`${i.height}px`,r({getBoundingClientRect:()=>i},this._card,{clampHeight:!0})}async _move(e){this._current&&await this._go(this._current.index+e,e)}async _go(e,t){if(!this._current||this._moving)return;this._moving=!0;let n=this._run;try{let r=await this._locate(e,t,n);if(n!==this._run)return;r?this._show(r):t>0&&await this._close(`finished`)}finally{this._moving=!1}}_key(e){if(!(!this._layer||e.altKey||e.ctrlKey||e.metaKey)){if(e.key===`Escape`)e.preventDefault(),e.stopPropagation(),this._close(`skipped`);else if(e.key===`ArrowRight`||e.key===`ArrowLeft`){if(this._shadow&&m(e.composedPath?.()[0]??e.target))return;e.preventDefault(),e.key===`ArrowRight`?this._move(1):this._current.index>this._firstIndex&&this._move(-1)}else if(e.key===`Tab`&&!this._shadow){let t=Array.from(this._card.querySelectorAll(`button`)).filter(e=>!e.hidden),n=t[0],r=t[t.length-1],i=this._active();!this._card.contains(i)||e.shiftKey&&(i===n||i===this._card)?(e.preventDefault(),(e.shiftKey?r:n).focus()):!e.shiftKey&&i===r&&(e.preventDefault(),n.focus())}}}_teardown(){if(!this._layer)return;document.removeEventListener(`keydown`,this._onKey,!0),document.removeEventListener(`focusin`,this._onFocusIn);let e=!this._shadow||this._shadow.activeElement!==null||!document.activeElement||document.activeElement===document.body;n(this._outer),this._outer.remove(),this._outer=null,this._shadow=null,this._layer=null,this._current=null;let t=this._returnFocus;this._returnFocus=null,e&&t?.isConnected&&t.focus?.()}async _close(e){let t=this._run;this._teardown();let n=this._store();try{n&&t===this._run&&await n.markSeen(this.tourId)}finally{this._finish(e)}}_finish(e){this._run++,this._running=!1,this.hasAttribute(`open`)&&this.removeAttribute(`open`),this.dispatchEvent(new CustomEvent(`wui-tour:close`,{bubbles:!0,detail:{reason:e}}))}};export{f as n,v as t};

package/dist/elements/tour.js

@@ -1 +1 @@
-import{n as e}from"../elementBase-BlsR4tqa.js";import{n as t,t as n}from"../WuiTour-CE7SQAso.js";e(`wui-tour`,n);export{n as WuiTour,t as createLocalSeenStore};
+import{n as e}from"../elementBase-BlsR4tqa.js";import{n as t,t as n}from"../WuiTour-B1-3ZCUl.js";e(`wui-tour`,n);export{n as WuiTour,t as createLocalSeenStore};

package/dist/fileViewerImage-Bis2gnyc.js

@@ -0,0 +1,6 @@
+import{a as e,n as t,t as n}from"./fileViewerUi-DasgDsU-.js";var r=[.1,.25,.5,.75,1,1.5,2,3,4],i=[.25,.5,1,2,4],a=16,o=5,s=class{constructor(e,t){this.shell=e,this.source=t,this.zoom=`fit`,this.rotation=0,this.area={width:0,height:0},this.destroyed=!1}load(){let e=document.createElement(`img`);e.className=`wui-file-viewer-image`,e.alt=this.shell.name(),e.decoding=`async`,e.draggable=!1,e.addEventListener(`load`,()=>{this.destroyed||(this.natural={width:e.naturalWidth||300,height:e.naturalHeight||150},this._build(e),this.shell.loaded({kind:`image`,pages:1}))}),e.addEventListener(`error`,()=>{this.destroyed||this.shell.fail(Error(`The image could not be decoded.`))}),e.src=this.source.src,this.img=e}destroy(){this.destroyed=!0,this._resizeObserver?.disconnect(),this._onKeyDown&&this.shell.host.removeEventListener(`keydown`,this._onKeyDown),this._printFrame?.remove(),this.img?.removeAttribute(`src`)}_build(e){let{center:r,end:a,body:o,host:s}=this.shell;this.zoomOutButton=n(`zoom-out`,`Zoom out`),this.zoomOutButton.addEventListener(`click`,()=>this._stepZoom(-1)),this.zoomButton=document.createElement(`button`),this.zoomButton.type=`button`,this.zoomButton.className=`wui-file-viewer-zoom`,t(this.zoomButton,{label:`Zoom`,items:()=>[...i.map(e=>({key:String(e),label:`${Math.round(e*100)}%`,checked:this.zoom===e})),{key:`fit-divider`,divider:!0},{key:`fit`,label:`Fit`,checked:this.zoom===`fit`}],onPick:e=>this._setZoom(e===`fit`?`fit`:Number(e))}),this.zoomInButton=n(`zoom-in`,`Zoom in`),this.zoomInButton.addEventListener(`click`,()=>this._stepZoom(1));let c=n(`rotate-ccw`,`Rotate left`);c.addEventListener(`click`,()=>this._rotate(-90));let l=n(`rotate-cw`,`Rotate right`);l.addEventListener(`click`,()=>this._rotate(90));let u=document.createElement(`span`);u.className=`wui-file-viewer-divider wui-file-viewer-print`;let d=n(`printer`,`Print`,{className:`wui-file-viewer-print`});d.addEventListener(`click`,()=>this.print()),u.hidden=d.hidden=!this.shell.print(),r.append(this.zoomOutButton,this.zoomButton,this.zoomInButton),a.prepend(c,l,u,d),this.scroller=document.createElement(`div`),this.scroller.className=`wui-file-viewer-scroll wui-file-viewer-image-scroll wui-scroll`,this.scroller.tabIndex=0,this.scroller.setAttribute(`role`,`region`),this.scroller.setAttribute(`aria-label`,`Image`),this.stage=document.createElement(`div`),this.stage.className=`wui-file-viewer-image-stage`,this.stage.append(e),this.scroller.append(this.stage),o.replaceChildren(this.scroller),this.scroller.addEventListener(`pointerdown`,e=>this._panStart(e)),this.scroller.addEventListener(`pointermove`,e=>this._panMove(e));for(let e of[`pointerup`,`pointercancel`,`lostpointercapture`])this.scroller.addEventListener(e,()=>this._panEnd());this.scroller.addEventListener(`wheel`,e=>{if(!e.ctrlKey&&!e.metaKey)return;e.preventDefault();let t=performance.now();t-(this._lastWheelZoom??0)<120||(this._lastWheelZoom=t,this._stepZoom(e.deltaY<0?1:-1))},{passive:!1}),this._onKeyDown=e=>this._keyDown(e),s.addEventListener(`keydown`,this._onKeyDown),this._resizeObserver=new ResizeObserver(()=>{let e=this.scroller.clientWidth,t=this.scroller.clientHeight;e===this.area.width&&t===this.area.height||(this.area={width:e,height:t},this._layout())}),this._resizeObserver.observe(this.scroller),this.area={width:this.scroller.clientWidth,height:this.scroller.clientHeight},this._layout()}_turned(){let{width:e,height:t}=this.natural;return this.rotation%180==0?{width:e,height:t}:{width:t,height:e}}scale(){if(typeof this.zoom==`number`)return this.zoom;let{width:e,height:t}=this._turned(),n=Math.min((this.area.width-2*a)/e,(this.area.height-2*a)/t);return Math.max(n,.01)}_layout(){if(!this.stage)return;let t=this.scale(),n=this._turned();this.stage.style.width=`${Math.round(n.width*t)}px`,this.stage.style.height=`${Math.round(n.height*t)}px`,this.img.style.width=`${Math.round(this.natural.width*t)}px`,this.img.style.height=`${Math.round(this.natural.height*t)}px`,this.img.style.transform=`translate(-50%, -50%) rotate(${this.rotation}deg)`;let r=Math.round(t*100);this.zoomButton.innerHTML=`${r}%${e(`chevron-down`,{size:12})}`,this.zoomButton.setAttribute(`aria-label`,`Zoom, ${r}%`),this.zoomOutButton.disabled=this._zoomStep(-1)==null,this.zoomInButton.disabled=this._zoomStep(1)==null}_zoomStep(e){let t=this.scale();return e>0?r.find(e=>e>t+.001)??null:[...r].reverse().find(e=>e<t-.001)??null}_stepZoom(e){let t=this._zoomStep(e);t!=null&&this._setZoom(t)}_setZoom(e){let t=this.scroller,n=(t.scrollLeft+t.clientWidth/2)/Math.max(t.scrollWidth,1),r=(t.scrollTop+t.clientHeight/2)/Math.max(t.scrollHeight,1);this.zoom=e,this._layout(),t.scrollLeft=n*t.scrollWidth-t.clientWidth/2,t.scrollTop=r*t.scrollHeight-t.clientHeight/2}_rotate(e){this.rotation=(this.rotation+e+360)%360,this._setZoom(this.zoom)}_keyDown(e){if(!(e.defaultPrevented||e.altKey||!(e.ctrlKey||e.metaKey))){if(e.key===`+`||e.key===`=`)this._stepZoom(1);else if(e.key===`-`||e.key===`_`)this._stepZoom(-1);else if(e.key===`0`)this._setZoom(`fit`);else return;e.preventDefault()}}_panStart(e){let t=this.scroller;e.button!==0||t.scrollWidth<=t.clientWidth&&t.scrollHeight<=t.clientHeight||(this._pan={id:e.pointerId,x:e.clientX,y:e.clientY,left:t.scrollLeft,top:t.scrollTop,active:!1})}_panMove(e){let t=this._pan;if(!t)return;let n=e.clientX-t.x,r=e.clientY-t.y;if(!t.active){if(Math.abs(n)<o&&Math.abs(r)<o)return;t.active=!0,this.scroller.setPointerCapture(t.id),this.scroller.classList.add(`wui-file-viewer-panning`)}this.scroller.scrollLeft=t.left-n,this.scroller.scrollTop=t.top-r}_panEnd(){let e=this._pan;e?.active&&(this.scroller.hasPointerCapture(e.id)&&this.scroller.releasePointerCapture(e.id),this.scroller.classList.remove(`wui-file-viewer-panning`)),this._pan=null}print(){this._printFrame?.remove();let e=document.createElement(`iframe`);e.className=`wui-file-viewer-print-frame`,e.title=`Image for printing`,e.tabIndex=-1,e.setAttribute(`aria-hidden`,`true`);let t=this.rotation%180!=0,n=new URL(this.source.src,document.baseURI).href,r=t?`max-width: 100vh; max-height: 100vw;`:`max-width: 100vw; max-height: 100vh;`;e.srcdoc=`<!doctype html><html><head><title>${c(this.shell.name())}</title><style>
+@page { margin: 10mm; }
+html, body { margin: 0; height: 100%; }
+body { display: flex; align-items: center; justify-content: center; }
+img { ${r} transform: rotate(${this.rotation}deg); }
+</style></head><body><img src="${c(n)}" alt=""></body></html>`,e.addEventListener(`load`,()=>{try{e.contentWindow.focus(),e.contentWindow.print()}catch(e){console.warn(`[wui-file-viewer] print failed:`,e?.message),window.open(this.source.src,`_blank`,`noopener`)}},{once:!0}),this._printFrame=e,document.body.append(e)}},c=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`).replace(/"/g,`&quot;`);export{s as ImageView};