@webority/ui-elements 0.148.0 → 0.150.0

package/dist/ui-tour.global.js

@@ -1 +1 @@
-(function(){function e(e,t){if(typeof customElements>`u`||customElements.get(e))return;let n=[];if(typeof document<`u`)for(let r of document.querySelectorAll(e))for(let e of Object.keys(r)){let i=Object.getOwnPropertyDescriptor(t.prototype,e);i&&(i.set||i.get)&&(n.push([r,e,r[e]]),delete r[e])}customElements.define(e,t);for(let[e,t,r]of n)e[t]=r}var t=typeof HTMLElement>`u`?class{}:HTMLElement;function n(e,t){r(e),e._reanchor=t,e._reanchorScroll=n=>{n.composedPath().includes(e)||t()},window.addEventListener(`resize`,e._reanchor),window.addEventListener(`scroll`,e._reanchorScroll,!0)}function r(e){e?._reanchor&&(window.removeEventListener(`resize`,e._reanchor),window.removeEventListener(`scroll`,e._reanchorScroll,!0),e._reanchor=null,e._reanchorScroll=null)}var i=`AppButton`,a=new Set([`primary`,`success`,`warning`,`danger`,`info`,`neutral`]),o={solid:e=>`btn-${e}`,soft:e=>`btn-soft-${e}`,outline:e=>`btn-outline-${e}`,ghost:e=>`btn-ghost-${e}`,link:e=>`btn-link-${e}`,glass:()=>`btn-glass`};function s(e=`primary`,t=`solid`,n=`md`){if(!a.has(e))throw RangeError(`buttonClass: unknown tone "${e}"`);if(!Object.hasOwn(o,t))throw RangeError(`buttonClass: unknown variant "${t}"`);let r=o[t](e);return n===`md`?`btn ${r}`:`btn ${r} btn-${n}`}var c=`data-advance`,l=`wui-tour-hint`,u=`wui-tour-pointer`,d=`Click {actionName} to continue.`,f=`a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]`,p=(e,t)=>e?.advanceOn===`click`&&!!t,m=e=>(e??``).replace(/\s+/g,` `).trim();function h(e){let t=e.ownerDocument,n=(e.getAttribute(`aria-labelledby`)||``).split(/\s+/).filter(Boolean),r=e.tagName===`INPUT`&&/^(button|submit|reset)$/.test(e.type)?e.value:``,i=[n.map(e=>t.getElementById(e)?.textContent??``).join(` `),e.getAttribute(`aria-label`),Array.from(e.labels??[],e=>e.textContent).join(` `),e.getAttribute(`alt`),r,e.textContent,e.getAttribute(`title`)];for(let e of i){let t=m(e);if(t)return t}return``}function g(e){for(let t of[e,...e.querySelectorAll(f)])if(t.tabIndex>=0&&!t.disabled)return t;return null}function _(e,t,n){let r=(e.getAttribute(`aria-describedby`)||``).split(/\s+/).filter(e=>e&&e!==t);n&&r.push(t),r.length>0?e.setAttribute(`aria-describedby`,r.join(` `)):e.removeAttribute(`aria-describedby`)}function ee(e,t){let n=e.querySelector(`.${l}`),r=e.querySelector(`.wui-tour-text`)?.id,i=r?`${r.replace(/-text$/,``)}-hint`:``;t?(n||(n=e.ownerDocument.createElement(`p`),n.className=l,i&&(n.id=i),e.querySelector(`.wui-tour-actions`).before(n)),n.textContent=t,i&&_(e,i,!0)):(n?.remove(),i&&_(e,i,!1))}function te(e,t){let n=e.querySelector(`.${u}`);if(!t){n?.remove();return}if(n)return;let r=e.ownerDocument.createElement(`span`);r.className=u,r.setAttribute(`aria-hidden`,`true`),e.append(r)}var ne=e=>getComputedStyle(e).animationName;function v(e,{layer:t,spot:n,card:r},i,a){let o=p(i,a);t.toggleAttribute(c,o&&!(t.getRootNode()instanceof ShadowRoot)),n.hasAttribute(c)&&(n.removeAttribute(c),o&&ne(n)),o&&n.setAttribute(c,``),te(n,o);let s=r.querySelector(`.wui-tour-next`);s.classList.toggle(`btn-primary`,!o),s.classList.toggle(`btn-link`,o);let l=o?m(i.actionLabel)||h(a):``,u=e.getAttribute(`advance-label`)||d,f=l?u.replace(/\{actionName\}/g,()=>l):``;return ee(r,f),f}function y(e,t,n){if(!p(e,t))return()=>{};let r=null,i=()=>{r??=setTimeout(n,0)};return t.addEventListener(`click`,i),()=>{t.removeEventListener(`click`,i),clearTimeout(r)}}function b(e,t,n,r){return e.contains(r)||p(t,n)&&n.contains(r)}function re(e,{card:t,active:n,step:r,target:i}){let a=Array.from(t.querySelectorAll(`button`)).filter(e=>!e.hidden),o=p(r,i)?g(i):null;o&&a.push(o);let s=a.findIndex(e=>e===n||e===o&&i.contains(n));e.preventDefault(),a[s===-1?e.shiftKey?a.length-1:0:(s+(e.shiftKey?-1:1)+a.length)%a.length].focus()}var ie=2/3,ae=1e3,oe=new Set([`top`,`left`,`width`,`height`]),x=new WeakMap,S=(e,t)=>typeof e.getAnimations==`function`?e.getAnimations().filter(t):[],C=e=>e.transitionProperty===`opacity`,w=e=>oe.has(e.transitionProperty),T=e=>typeof e.animationName==`string`&&e.animationName.startsWith(`wui-tour-`);function E(e){return e.length===0?null:new Promise(t=>{let n=setTimeout(t,ae);Promise.allSettled(e.map(e=>e.finished)).then(()=>{clearTimeout(n),t()})})}function se(e){let t=e.parentElement?.querySelector(`:scope > .wui-tour-spot`),n=0;for(let e of t?S(t,w):[]){let t=e.effect?.getComputedTiming?.();if(typeof t?.duration!=`number`)continue;let r=typeof e.currentTime==`number`?e.currentTime:0;n=Math.max(n,(t.delay??0)+t.duration*ie-r)}return n}function D(e){let t=se(e);t>0?e.style.setProperty(`--wui-tour-card-delay`,`${Math.round(t)}ms`):e.style.removeProperty(`--wui-tour-card-delay`),e.dataset.state=`entering`;let n={};x.set(e,n);let r=()=>{x.get(e)===n&&e.dataset.state===`entering`&&(e.dataset.state=`shown`)},i=S(e,T);i.length===0?r():Promise.allSettled(i.map(e=>e.finished)).then(r)}function O(e){return e.dataset.state=`leaving`,E(S(e,C))}function k(e){let t=e.classList.contains(`wui-tour-layer`)?e:e.shadowRoot?.querySelector(`.wui-tour-layer`);t&&(t.dataset.state=`leaving`);let n=t?E(S(t,C)):null;n?(e.setAttribute(`inert`,``),n.then(()=>e.remove())):e.remove()}var ce=2,A=12,j=8,M=4,N=20,le=`(max-width: 575.98px)`,ue=[`bottom`,`top`,`right`,`left`],P=[`top-left`,`top-right`,`bottom-right`,`bottom-left`],F,I=(e,t,n)=>Math.max(t,Math.min(e,n)),L=(e,t,n,r)=>(Math.max(e,n)+Math.min(t,r))/2;function R(e,t){if(!t?.scrollIntoView)return;e.style.maxHeight=``;let n=W(e),r=e.offsetHeight+A;if(t.getBoundingClientRect().height+4+r*2<=n.bottom-n.top){t.scrollIntoView({block:`center`,inline:`nearest`});return}let i=t.style.scrollMarginTop;t.style.scrollMarginTop=`${n.top+r+ce}px`,t.scrollIntoView({block:`start`,inline:`nearest`}),t.style.scrollMarginTop=i}function z(e,t,n){let r=e.style,i=t.style,a=de(t);if(!n){r.top=`50%`,r.left=`50%`,r.width=`0px`,r.height=`0px`,r.boxShadow=`0 0 0 100vmax var(--color-scrim-strong)`;for(let e of P)r.removeProperty(`border-${e}-radius`),r.removeProperty(`corner-${e}-shape`);t.dataset.placement=`center`,a.hidden=!0,i.position=`fixed`,i.top=`50%`,i.left=`50%`,i.transform=`translate(-50%, -50%)`,i.maxHeight=`calc(100vh - 16px)`;return}r.boxShadow=``,i.transform=``,i.position=`fixed`;let o=n.getBoundingClientRect();r.top=`${o.top}px`,r.left=`${o.left}px`,r.width=`${o.width}px`,r.height=`${o.height}px`,B(r,n);let s=t.scrollTop;i.maxHeight=``;let c={width:t.offsetWidth,height:t.offsetHeight},l=W(t),u=l.bottom-l.top,d={bottom:l.bottom-o.bottom-A,top:o.top-A-l.top,right:l.right-o.right-A,left:o.left-A-l.left},f=window.matchMedia(le).matches,p=ue.find(e=>e===`top`||e===`bottom`?c.height<=d[e]+1:!f&&c.width<=d[e]+1&&c.height<=u+1),m=Math.min(o.bottom,l.bottom+j)-Math.max(o.top,l.top-j);p?V(t,a,p,o,l,c):m>=Math.min(c.height,u)+8?H(t,a,o,l,c):U(t,a,d.bottom>=d.top?`bottom`:`top`,o,l,c,d),t.scrollTop=s}function B(e,t){F??=CSS.supports(`corner-top-left-shape`,`squircle`);let n=getComputedStyle(t);for(let t of P)e.setProperty(`border-${t}-radius`,n.getPropertyValue(`border-${t}-radius`)),F&&e.setProperty(`corner-${t}-shape`,n.getPropertyValue(`corner-${t}-shape`))}function V(e,t,n,r,i,a){let o=n===`top`||n===`bottom`,s,c,l;if(o){let e=L(r.left,r.right,i.left,i.right);s=I(e-a.width/2,i.left,i.right-a.width),c=n===`bottom`?r.bottom+A:r.top-A-a.height,l=I(e-s,N,a.width-N)}else{let e=L(r.top,r.bottom,i.top,i.bottom);c=I(e-a.height/2,i.top,i.bottom-a.height),s=n===`right`?r.right+A:r.left-A-a.width,l=I(e-c,N,a.height-N)}e.dataset.placement=n,e.style.top=`${c}px`,e.style.left=`${s}px`,t.hidden=!1,t.style.left=o?`${l-e.clientLeft-t.offsetWidth/2}px`:``,t.style.top=o?``:`${l-e.clientTop-t.offsetHeight/2}px`}function H(e,t,n,r,i){let a=r.bottom-r.top;e.dataset.placement=`overlap`,t.hidden=!0,e.style.maxHeight=i.height>a?`${Math.max(a,0)}px`:``;let o=Math.min(n.bottom,r.bottom)-M;e.style.top=`${Math.max(r.top,o-Math.min(i.height,a))}px`,e.style.left=`${I(n.left+M,r.left,r.right-i.width)}px`}function U(e,t,n,r,i,a,o){let s=Math.max(o[n],0),c=Math.min(a.height,s);e.dataset.placement=n,t.hidden=!0,e.style.maxHeight=a.height>s?`${s}px`:``,e.style.top=`${n===`bottom`?r.bottom+A:r.top-A-c}px`;let l=L(r.left,r.right,i.left,i.right);e.style.left=`${I(l-a.width/2,i.left,i.right-a.width)}px`}function W(e){let t=e.parentElement,n=t?getComputedStyle(t):null,r=e=>Number.parseFloat(n?.[e])||0;return{top:r(`paddingTop`)+j,bottom:window.innerHeight-r(`paddingBottom`)-j,left:r(`paddingLeft`)+j,right:window.innerWidth-r(`paddingRight`)-j}}function de(e){let t=e.querySelector(`:scope > .wui-tour-arrow`);return t||(t=document.createElement(`span`),t.className=`wui-tour-arrow`,t.setAttribute(`aria-hidden`,`true`),t.hidden=!0,e.append(t)),t}var fe=0,pe=`btn btn-sm btn-link`;function me(e,t,n){let r=`wui-tour-end-${++fe}`,a=!!(t.nextLabel&&t.nextHref),o=e.createElement(`div`);if(o.className=`wui-tour-card wui-tour-end`,o.dataset.layout=`center`,a&&(o.dataset.next=``),o.setAttribute(`role`,`dialog`),n&&o.setAttribute(`aria-modal`,`true`),o.tabIndex=-1,o.setAttribute(`aria-labelledby`,`${r}-title`),o.setAttribute(`aria-describedby`,`${r}-message`),o.innerHTML=` <div class="wui-tour-end-mark" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></div> <h2 class="wui-tour-title wui-tour-end-title" id="${r}-title"></h2> <p class="wui-tour-text wui-tour-end-message" id="${r}-message"></p> <div class="wui-tour-actions">${a?`<a class="${s(`primary`,`solid`,`sm`)} wui-tour-end-next" data-wui="${i}"></a>`:``}<button type="button" class="${a?pe:s(`primary`,`solid`,`sm`)} wui-tour-end-button" data-wui="${i}"></button></div>`,o.querySelector(`.wui-tour-end-title`).textContent=t.title,o.querySelector(`.wui-tour-end-message`).textContent=t.message,o.querySelector(`.wui-tour-end-button`).textContent=t.button,a){let e=o.querySelector(`.wui-tour-end-next`);e.textContent=t.nextLabel,e.setAttribute(`href`,t.nextHref)}return o}var he=e=>e.button===0&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey&&!e.altKey;function ge(e,t,n){let r=e.ownerDocument,i=e.getRootNode()===r,a=e.querySelector(`.wui-tour-card:not(.wui-tour-end)`),o=e.querySelector(`.wui-tour-spot`),s=e.querySelector(`[role=status]`),c=me(r,t,i),l=c.querySelector(`.wui-tour-end-button`),u=c.querySelector(`.wui-tour-end-next`),d=u?[u,l]:[l],f=new AbortController;return new Promise(p=>{let m=e=>{f.abort(),p(e)};if(n?.aborted){m(`done`);return}let h={signal:f.signal};n?.addEventListener(`abort`,()=>m(`done`),h),l.addEventListener(`click`,()=>m(`done`),h),u&&u.addEventListener(`click`,e=>{he(e)&&(e.preventDefault(),m(`next`))},h),r.addEventListener(`keydown`,e=>{if(!(e.altKey||e.ctrlKey||e.metaKey)){if(e.key===`Escape`)e.preventDefault(),e.stopPropagation(),m(`done`);else if(e.key===`Enter`&&u&&!e.shiftKey&&(e.composedPath?.()[0]??e.target)===u)e.preventDefault(),m(`next`);else if(e.key===`Tab`&&i){e.preventDefault();let t=d.indexOf(r.activeElement),n=t===-1?e.shiftKey?d.length-1:0:(t+(e.shiftKey?-1:1)+d.length)%d.length;d[n].focus()}}},{capture:!0,signal:f.signal}),i&&r.addEventListener(`focusin`,e=>{c.contains(e.target)||d[0].focus()},h);let g=()=>{f.signal.aborted||(a.hidden=!0,z(o,a,null),e.append(c),D(c),s.textContent=[t.title,t.message].filter(Boolean).join(`. `),d[0].focus())},_=O(a);_?_.then(g):g()})}var _e=` :host { all: initial; ${Object.entries({"--wui-z-tour":`1550`,"--wui-radius-sm":`8px`,"--wui-radius-lg":`14px`,"--wui-shadow-popover":`0px 8px 28px -6px rgba(7, 20, 55, 0.14)`,"--wui-ease-out":`cubic-bezier(0.22, 1, 0.36, 1)`,"--wui-tour-motion-duration":`200ms`,"--wui-tour-motion-ease":`cubic-bezier(0.22, 1, 0.36, 1)`,"--wui-tour-spot-duration":`240ms`,"--wui-tour-spot-ease":`cubic-bezier(0.32, 0.72, 0, 1)`,"--color-primary":`#4F46E5`,"--color-primary-hover":`#4338CA`,"--color-primary-text":`#4F46E5`,"--color-focus-ring":`#4F46E5`,"--wui-focus-ring-width":`2px`,"--wui-focus-ring-offset":`2px`,"--color-on-primary":`#FFFFFF`,"--color-success-soft":`#E8FAEE`,"--color-success-text":`#0e7531`,"--color-on-scrim":`#FFFFFF`,"--color-scrim-strong":`color-mix(in srgb, #071437 62%, transparent)`,"--color-surface":`#FFFFFF`,"--color-text":`#071437`,"--color-text-muted":`#4B5675`,"--color-border":`#EBEDF3`,"--color-bg-muted":`#F5F6FA`}).map(([e,t])=>`    ${e}: ${t};`).join(` `)} } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .btn { display: inline-block; margin: 0; padding: 0.25rem 0.5rem; border: 1px solid transparent; border-radius: 0.375rem; background: transparent; font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1.5; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .btn-outline-neutral { border-color: var(--color-text-muted); color: var(--color-text-muted); } .btn-outline-neutral:hover { background: var(--color-bg-muted); color: var(--color-text); } .btn-link { font-weight: 400; color: var(--color-primary-text); text-decoration: underline; } .btn-link:hover { color: var(--color-primary-hover); } .wui-tour-layer { pointer-events: none; font-family: "Webority Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--color-text); text-align: start; } .wui-tour-card { pointer-events: auto; } .wui-tour-layer { position: fixed; inset: 0; z-index: var(--wui-z-tour); } .wui-tour-spot { position: fixed; box-shadow: 0 0 0 2px var(--color-primary), 0 0 4px 2px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 0 0 100vmax var(--color-scrim-strong); pointer-events: none; } .wui-tour-card { display: flex; flex-direction: column; gap: 8px; width: min(360px, 100vw - 16px); padding: 16px; overflow-y: auto; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--wui-radius-lg); corner-shape: squircle; box-shadow: var(--wui-shadow-popover); } .wui-tour-card:focus { outline: none; } .wui-tour-card:focus-visible { outline: var(--wui-focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--wui-focus-ring-offset); } .wui-tour-title { margin: 0; font-size: 16px; font-weight: 600; } .wui-tour-text { margin: 0; font-size: 14px; color: var(--color-text-muted); } .wui-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .wui-tour-nav { display: flex; gap: 8px; } .wui-tour-skip { color: var(--color-text-muted); } .wui-tour-back, .wui-tour-next { min-width: 64px; } @keyframes wui-tour-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes wui-tour-card-enter { from { opacity: 0; scale: 0.96; translate: var(--wui-tour-card-lift, 0 6px); } to { opacity: 1; scale: 1; translate: 0 0; } } .wui-tour-layer[data-state=leaving], .wui-tour-card[data-state=leaving] { opacity: 0; } .wui-tour-layer[data-state=leaving], .wui-tour-layer[data-state=leaving] * { pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .wui-tour-layer { animation: wui-tour-fade-in var(--wui-tour-motion-duration) var(--wui-tour-motion-ease); } .wui-tour-layer[data-state=leaving] { transition: opacity var(--wui-tour-motion-duration) var(--wui-tour-motion-ease); } .wui-tour-spot { transition: top var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), left var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), width var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), height var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), border-radius var(--wui-tour-spot-duration) var(--wui-tour-spot-ease); } .wui-tour-spot[data-tracking] { transition: none; } .wui-tour-card { --wui-tour-card-lift: 0 6px; transform-origin: top center; } .wui-tour-card[data-placement=top] { --wui-tour-card-lift: 0 -6px; transform-origin: bottom center; } .wui-tour-card[data-placement=bottom] { --wui-tour-card-lift: 0 6px; transform-origin: top center; } .wui-tour-card[data-placement=left] { --wui-tour-card-lift: -6px 0; transform-origin: right center; } .wui-tour-card[data-placement=right] { --wui-tour-card-lift: 6px 0; transform-origin: left center; } .wui-tour-card[data-placement=overlap], .wui-tour-card[data-placement=center] { --wui-tour-card-lift: 0 0; transform-origin: center; } .wui-tour-card[data-state=entering] { animation: wui-tour-card-enter var(--wui-tour-motion-duration) var(--wui-tour-motion-ease) var(--wui-tour-card-delay, 0ms) both; } .wui-tour-card[data-state=leaving] { transition: opacity calc(var(--wui-tour-motion-duration) / 2) var(--wui-tour-motion-ease); } } @media (prefers-reduced-motion: reduce) { .wui-tour-layer { animation: wui-tour-fade-in 120ms linear; } .wui-tour-layer[data-state=leaving] { transition: opacity 120ms linear; } .wui-tour-card[data-state=entering] { animation: wui-tour-fade-in 120ms linear both; } } .wui-tour-progress-bar { display: flex; gap: 4px; } .wui-tour-progress-segment { flex: 1 1 0; height: 4px; border-radius: 999px; background: var(--color-border); } .wui-tour-progress-segment[data-filled] { background: var(--color-primary); } .wui-tour-position { margin: 0; font-size: 12px; color: var(--color-text-muted); } .wui-tour-layer { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); } .wui-tour-card:has(.wui-tour-arrow:not([hidden])) { overflow: visible; } .wui-tour-arrow { position: absolute; width: 8px; height: 8px; background: var(--color-surface); border: 1px solid var(--color-border); rotate: 45deg; pointer-events: none; } .wui-tour-card[data-placement=bottom] .wui-tour-arrow { top: -5px; border-right-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0); } .wui-tour-card[data-placement=top] .wui-tour-arrow { bottom: -5px; border-top-color: rgba(0, 0, 0, 0); border-left-color: rgba(0, 0, 0, 0); } .wui-tour-card[data-placement=right] .wui-tour-arrow { left: -5px; border-top-color: rgba(0, 0, 0, 0); border-right-color: rgba(0, 0, 0, 0); } .wui-tour-card[data-placement=left] .wui-tour-arrow { right: -5px; border-bottom-color: rgba(0, 0, 0, 0); border-left-color: rgba(0, 0, 0, 0); } @media (max-width: 575.98px) { .wui-tour-card { width: calc(100vw - 16px); } .wui-tour-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } } .wui-tour-media { position: relative; order: -1; flex: none; aspect-ratio: 16/9; margin: -16px -16px 4px; overflow: hidden; background: var(--color-border); } .wui-tour-media>img, .wui-tour-media>video { display: block; width: 100%; height: 100%; object-fit: cover; } .wui-tour-card[data-welcome] { width: min(420px, 100vw - 16px); } .wui-tour-media-toggle { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--color-scrim-strong); color: var(--color-on-scrim); cursor: pointer; } .wui-tour-media-toggle>svg { width: 20px; height: 20px; fill: currentColor; } .wui-tour-media-toggle:focus-visible { outline: 2px solid var(--color-on-scrim); outline-offset: 2px; } .wui-tour-layer[data-advance] { pointer-events: none; } .wui-tour-layer[data-advance]:not([data-state=leaving]) .wui-tour-card { pointer-events: auto; } .wui-tour-layer[data-advance]:not([data-state=leaving]) .wui-tour-spot::before { content: ""; position: absolute; inset: -100vmax; pointer-events: auto; clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 100vmax 100vmax, calc(100% - 100vmax) 100vmax, calc(100% - 100vmax) calc(100% - 100vmax), 100vmax calc(100% - 100vmax), 100vmax 100vmax); } .wui-tour-hint { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text); } .wui-tour-pointer { position: absolute; top: 50%; left: 50%; width: 18px; height: 24px; pointer-events: none; } .wui-tour-pointer::before { content: ""; position: absolute; inset: 0; background: var(--color-primary); clip-path: polygon(0 0, 0 75%, 28% 58%, 46% 100%, 62% 92%, 45% 52%, 85% 52%); filter: drop-shadow(1px 0 0 var(--color-surface)) drop-shadow(-1px 0 0 var(--color-surface)) drop-shadow(0 1px 0 var(--color-surface)) drop-shadow(0 -1px 0 var(--color-surface)); } .wui-tour-pointer::after { content: ""; position: absolute; top: -16px; left: -16px; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); opacity: 0; display: none; } @media (max-width: 575.98px) { .wui-tour-pointer { width: 24px; height: 24px; translate: -50% -50%; } .wui-tour-pointer::before { clip-path: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--color-surface); filter: none; } .wui-tour-pointer::after { top: -4px; left: -4px; } } @keyframes wui-tour-tap { 0% { opacity: 0; transform: translate(56px, 44px) scale(1); } 10% { opacity: 1; transform: translate(56px, 44px) scale(1); } 45% { transform: translate(0, 0) scale(1); } 52% { transform: translate(0, 0) scale(0.86); } 60% { transform: translate(0, 0) scale(1); } 85% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(0, 0) scale(1); } } @keyframes wui-tour-ripple { 0%, 50% { opacity: 0; transform: scale(0.2); } 52% { opacity: 0.35; transform: scale(0.2); } 80%, 100% { opacity: 0; transform: scale(1); } } @media (prefers-reduced-motion: no-preference) { .wui-tour-pointer { opacity: 0; animation: wui-tour-tap calc(var(--wui-duration-slow) * 6) var(--wui-ease-out) var(--wui-tour-spot-duration) infinite; } .wui-tour-pointer::after { display: block; animation: wui-tour-ripple calc(var(--wui-duration-slow) * 6) var(--wui-ease-out) var(--wui-tour-spot-duration) infinite; } } @keyframes wui-tour-check { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } } .wui-tour-end[data-layout=center] { --wui-tour-card-lift: 0 0; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center; align-items: center; gap: 8px; width: min(420px, 100vw - 16px); max-height: calc(100vh - 16px); padding: 24px; text-align: center; } .wui-tour-end[data-layout=center] .wui-tour-actions { justify-content: center; margin-top: 8px; } .wui-tour-end[data-layout=center][data-next] .wui-tour-actions { flex-direction: column; align-items: stretch; width: 100%; gap: var(--wui-space-xs); } .wui-tour-end-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success-text); } .wui-tour-end-mark>svg { width: 26px; height: 26px; } .wui-tour-end-mark path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; } .wui-tour-end-title { font-size: 18px; } .wui-tour-end-message { text-wrap: balance; } .wui-tour-end-next { text-wrap: balance; } .wui-tour-end-button { min-width: 120px; } @media (prefers-reduced-motion: no-preference) { .wui-tour-end-mark path { animation: wui-tour-check 300ms var(--wui-ease-out) calc(var(--wui-tour-card-delay, 0ms) + 120ms) both; } } `,G=`wui-tour-media`,ve=`wui-tour-media-toggle`,K=`http://www.w3.org/2000/svg`,q=`M6 5h4v14H6zM14 5h4v14h-4z`,ye=`M8 5v14l11-7z`,be={pause:`Pause animation`,play:`Play animation`},xe=()=>globalThis.matchMedia?.(`(prefers-reduced-motion: reduce)`)?.matches===!0;function Se(e){let t=document.createElementNS(K,`svg`);t.setAttribute(`viewBox`,`0 0 24 24`),t.setAttribute(`aria-hidden`,`true`),t.setAttribute(`focusable`,`false`);let n=document.createElementNS(K,`path`);return n.setAttribute(`d`,e),t.appendChild(n),t}function Ce(e){let t=document.createElement(`img`);return t.setAttribute(`alt`,e.mediaAlt??``),t.setAttribute(`width`,`1280`),t.setAttribute(`height`,`720`),t.setAttribute(`loading`,`lazy`),t.setAttribute(`decoding`,`async`),t.setAttribute(`src`,e.media),t}function we(e,t){let n=document.createElement(`video`);return n.muted=!0,n.setAttribute(`muted`,``),n.loop=!0,n.setAttribute(`playsinline`,``),t&&n.setAttribute(`autoplay`,``),n.setAttribute(`preload`,t?`auto`:`metadata`),e.mediaAlt&&n.setAttribute(`aria-label`,e.mediaAlt),e.mediaPoster&&n.setAttribute(`poster`,e.mediaPoster),n.setAttribute(`src`,e.media),n}function Te(e,t){let n=document.createElement(`button`);n.type=`button`,n.className=ve;let r=(r=!e.paused)=>{n.setAttribute(`aria-label`,r?t.pause:t.play),n.replaceChildren(Se(r?q:ye))};return e.addEventListener(`play`,()=>r()),e.addEventListener(`pause`,()=>r()),n.addEventListener(`click`,()=>{e.paused?e.play()?.catch(()=>r()):e.pause()}),r(e.hasAttribute(`autoplay`)),n}function Ee(e){let t=e.querySelector(`:scope > .${G}`);if(!t)return;let n=t.querySelector(`video`);n&&(n.pause(),n.removeAttribute(`src`),n.load()),t.remove()}function De(e,t,n=be){if(Ee(e),!t.media){e.removeAttribute(`data-media`);return}let r=document.createElement(`div`);if(r.className=G,t.mediaType===`video`){let e=we(t,!xe());r.append(e,Te(e,n))}else r.appendChild(Ce(t));e.prepend(r),e.setAttribute(`data-media`,t.target?`step`:`welcome`)}var J=`data-wui-tour-open`,Oe=`Step {current} of {total}`;function ke(e){let t=new Set;return{drop:e=>{t.add(e)},position:e=>{t.delete(e);let n=0;for(let r of t)r<e&&n++;return e+1-n},total:()=>e-t.size}}function Ae(e,t,n){return(e.getAttribute(`progress-label`)||Oe).replace(/\{(current|total)\}/g,(e,r)=>String(r===`current`?t:n))}function je(e,{text:t,position:n,total:r}){let i=e.querySelector(`.wui-tour-position`);i.textContent=t;let a=e.querySelector(`.wui-tour-progress-bar`);if(!a){let t=e.ownerDocument,n=t.createElement(`div`);n.className=`wui-tour-progress`,n.setAttribute(`aria-hidden`,`true`),a=t.createElement(`div`),a.className=`wui-tour-progress-bar`,n.append(a),i.before(n)}let o=a.children;for(;o.length<r;){let t=e.ownerDocument.createElement(`span`);t.className=`wui-tour-progress-segment`,a.append(t)}for(;o.length>r;)a.lastElementChild.remove();for(let e=0;e<o.length;e++)o[e].toggleAttribute(`data-filled`,e<n)}var Me=`wui-tour-step`,Ne=`wui-tour-host`,Pe=`wui-tour-seen:`,Y=`data-tracking`,Fe={back:`Back`,next:`Next`,skip:`Skip`,done:`Done`,mediaPause:`Pause animation`,mediaPlay:`Play animation`,endTitle:`You're all set`,endMessage:`You know your way around now. Enjoy exploring.`,endButton:`Done`},Ie={back:`back-label`,next:`next-label`,skip:`skip-label`,done:`done-label`,mediaPause:`media-pause-label`,mediaPlay:`media-play-label`,endTitle:`end-title`,endMessage:`end-message`,endButton:`end-button`},Le=[[`media`,`media`],[`mediaAlt`,`media-alt`],[`mediaPoster`,`media-poster`],[`mediaType`,`media-type`],[`advanceOn`,`advance-on`],[`actionLabel`,`action-label`]],X={index:null,position:null,total:null},Re=0;function ze(e=Pe,t=globalThis.localStorage){return{isSeen:async n=>t.getItem(e+n)===`1`,markSeen:async n=>{t.setItem(e+n,`1`)}}}var Z=e=>!e?.isConnected||getComputedStyle(e).visibility===`hidden`?!1:e.getClientRects().length>0,Q=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName)),Be=()=>{let e=document.activeElement;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e},$=null;function Ve(e){$||($=new CSSStyleSheet,$.replaceSync(_e)),e.adoptedStyleSheets=[$]}var He=class extends t{static get observedAttributes(){return[`open`]}constructor(){super(),this.seenStore=null,this.onBeforeStep=null,this._run=0,this._running=!1,this._layer=null,this._outer=null,this._shadow=null,this._unbindAdvance=null,this._ending=null,this._seenMark=null}connectedCallback(){this.hasAttribute(`open`)&&this.start()}disconnectedCallback(){this.stop()}attributeChangedCallback(e,t,n){e===`open`&&this.isConnected&&(n===null?this.stop():this.start())}get tourId(){return this.getAttribute(`tour-id`)||``}set tourId(e){e==null||e===``?this.removeAttribute(`tour-id`):this.setAttribute(`tour-id`,String(e))}get isolated(){return this.hasAttribute(`isolated`)}set isolated(e){this.toggleAttribute(`isolated`,e===!0||e===``||e===`true`)}_stepList(){return Array.from(this.querySelectorAll(`:scope > ${Me}`),e=>{let t={target:e.getAttribute(`target`)||``,title:e.getAttribute(`title`)||void 0,description:e.textContent.trim()};for(let[n,r]of Le)e.hasAttribute(r)&&(t[n]=e.getAttribute(r));return t})}_store(){return this.seenStore?this.seenStore:this.getAttribute(`seen-store`)===`local`?ze():globalThis.window?.WUI?.tour?.seenStore||null}_label(e){return this.getAttribute(Ie[e])||Fe[e]}_endDialogText(){if(this.getAttribute(`end-dialog`)===`false`)return null;let e=(this.getAttribute(`end-next-label`)??``).trim(),t=(this.getAttribute(`end-next-href`)??``).trim();return{title:this._label(`endTitle`),message:this._label(`endMessage`),button:this._label(`endButton`),nextLabel:e,nextHref:t}}_markSeen(e){let t=this._store();return t?t.markSeen(this.tourId,e):null}async start(){if(this._running)return;this._running=!0;let e=++this._run;this.hasAttribute(`open`)||this.setAttribute(`open`,``);try{await this._start(e)}catch(t){throw e===this._run&&(this._running=!1),t}}async _start(e){this._steps=this._stepList(),this._progress=ke(this._steps.length);let t=this._store();if(t&&!this.tourId)throw Error(`<wui-tour> needs a tour-id to use a seen store.`);if(t&&await t.isSeen(this.tourId)){e===this._run&&this._finish(`alreadySeen`);return}for(let[e,t]of this._steps.entries())t.target&&!Z(document.querySelector(t.target))&&this._progress.drop(e);this._returnFocus=document.activeElement;let n=await this._locate(0,1,e);e===this._run&&(n?(this._firstIndex=n.index,this.dispatchEvent(new CustomEvent(`wui-tour:start`,{bubbles:!0,detail:{total:this._progress.total()}})),e===this._run&&(this._build(),this._show(n))):this._finish(`noTargets`))}next(){return this._move(1)}back(){return!this._current||this._current.index<=this._firstIndex?Promise.resolve():this._move(-1)}async goTo(e){if(this._current){if(!Number.isInteger(e)||e<0||e>=this._steps.length)throw RangeError(`<wui-tour> has no step ${e}; it has ${this._steps.length}.`);await this._go(e,1)}}stop(){this._running&&(this._run++,this._teardown(),this._running=!1,this.hasAttribute(`open`)&&this.removeAttribute(`open`))}async _locate(e,t,n){let r=this._steps;for(let i=e;i>=0&&i<r.length;i+=t){let e=r[i];if(await this._beforeStep(e,i),n!==this._run)return null;if(!e.target)return{index:i,target:null};let t=document.querySelector(e.target);if(Z(t))return this._progress.position(i),{index:i,target:t};this._progress.drop(i)}return null}async _beforeStep(e,t){let n=[];this.dispatchEvent(new CustomEvent(`wui-tour:beforestep`,{bubbles:!0,detail:{step:e,index:t,wait:e=>n.push(e)}})),await Promise.all(n),typeof this.onBeforeStep==`function`&&await this.onBeforeStep(e,t)}_build(){let e=`wui-tour-${++Re}`,t=document.createElement(`div`);t.className=`wui-tour-layer`,t.innerHTML=` <div class="wui-tour-spot" aria-hidden="true"></div> <div class="wui-tour-card" role="dialog" aria-modal="true" tabindex="-1" aria-labelledby="${e}-title" aria-describedby="${e}-text"> <p class="wui-tour-position"></p> <h2 class="wui-tour-title" id="${e}-title"></h2> <p class="wui-tour-text" id="${e}-text"></p> <div class="wui-tour-actions"> <button type="button" class="btn btn-sm btn-link wui-tour-skip"></button> <div class="wui-tour-nav"> <button type="button" class="${s(`neutral`,`outline`,`sm`)} wui-tour-back" data-wui="${i}"></button> <button type="button" class="${s(`primary`,`solid`,`sm`)} wui-tour-next" data-wui="${i}"></button> </div> </div> </div> <div class="visually-hidden" role="status" aria-live="polite"></div>`;let r=t;this._shadow=null,this.isolated&&(r=document.createElement(Ne),this._shadow=r.attachShadow({mode:`open`}),Ve(this._shadow),this._shadow.appendChild(t)),document.body.appendChild(r),document.documentElement.setAttribute(J,``),this._outer=r,this._layer=t,this._spot=t.querySelector(`.wui-tour-spot`),this._card=t.querySelector(`.wui-tour-card`),this._live=t.querySelector(`[role=status]`),this._card.querySelector(`.wui-tour-skip`).addEventListener(`click`,()=>this._close(`skipped`,`button`)),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=>{if(!this._layer||this._ending)return;let t=this._current,n=t?this._steps[t.index]:null;b(this._layer,n,t?.target??null,e.target)||this._card.focus()},document.addEventListener(`keydown`,this._onKey,!0),this._shadow||document.addEventListener(`focusin`,this._onFocusIn),n(r,()=>this._follow())}_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._card,a=this._progress.position(t),o=this._progress.total(),s=a===o&&!this._endDialogText(),c=Ae(this,a,o);je(i,{text:c,position:a,total:o}),De(i,r,{pause:this._label(`mediaPause`),play:this._label(`mediaPlay`)}),i.toggleAttribute(`data-welcome`,!n);let l=v(this,{layer:this._layer,spot:this._spot,card:i},r,n),u=i.querySelector(`.wui-tour-title`);u.textContent=r.title||``,u.hidden=!r.title,i.querySelector(`.wui-tour-text`).textContent=r.description||``,i.querySelector(`.wui-tour-skip`).textContent=this._label(`skip`),i.querySelector(`.wui-tour-back`).textContent=this._label(`back`),i.querySelector(`.wui-tour-back`).hidden=t<=this._firstIndex,i.querySelector(`.wui-tour-next`).textContent=this._label(s?`done`:`next`);let d=[c,r.title,r.description].filter(Boolean).join(`. `);this._live.textContent=l?[d,l].join(/[.!?]$/.test(d)?` `:`. `):d,R(i,n),this._spot.removeAttribute(Y),this._place(),D(i),this._unbindAdvance?.(),this._unbindAdvance=y(r,n,()=>this._move(1));let f=this._active();(i.contains(f)?!f.hidden:this._shadow!==null&&Q(Be()))||i.focus(),this.dispatchEvent(new CustomEvent(`wui-tour:step`,{bubbles:!0,detail:{step:r,index:t,position:a,total:o}}))}_place(){this._current&&this._layer&&z(this._spot,this._card,this._current.target)}_follow(){if(!this._current||!this._layer||this._ending)return;let e=this._spot.style.cssText;this._place(),this._spot.style.cssText!==e&&this._spot.setAttribute(Y,``)}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;if(r){let e=O(this._card);if(e&&await e,n!==this._run)return;this._show(r)}else if(t>0){let e=this._endDialogText(),t=e?await this._showEnd(e):`done`;if(n!==this._run)return;let r=await this._close(t===`next`?`next`:`finished`);t===`next`&&r&&this.ownerDocument.defaultView.location.assign(e.nextHref)}}finally{this._moving=!1}}_showEnd(e){return this._unbindAdvance?.(),this._unbindAdvance=null,v(this,{layer:this._layer,spot:this._spot,card:this._card},null,null),this._spot.removeAttribute(Y),this._ending=new AbortController,this._seenMark=this._markSeen(`finished`),ge(this._layer,e,this._ending.signal)}_key(e){if(!(!this._layer||this._ending||e.altKey||e.ctrlKey||e.metaKey)){if(e.key===`Escape`)e.preventDefault(),e.stopPropagation(),this._close(`skipped`,`escape`);else if(e.key===`ArrowRight`||e.key===`ArrowLeft`){if(Q(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{index:t,target:n}=this._current;re(e,{card:this._card,active:this._active(),step:this._steps[t],target:n})}}}_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;this._unbindAdvance?.(),this._unbindAdvance=null,this._ending?.abort(),this._ending=null,this._seenMark=null,r(this._outer),k(this._outer),document.documentElement.removeAttribute(J),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,t=null){let n=this._run,r=this._current,i=r?{index:r.index,position:this._progress.position(r.index),total:this._progress.total()}:X,a=this._seenMark;this._teardown();let o=e===`next`?`finished`:e,s=!1;try{n===this._run&&await(a??this._markSeen(o)),s=n===this._run}finally{this._finish(e,i,t)}return s}_finish(e,t=X,n=null){this._run++,this._running=!1,this.hasAttribute(`open`)&&this.removeAttribute(`open`),this.dispatchEvent(new CustomEvent(`wui-tour:close`,{bubbles:!0,detail:{reason:e,...t,via:n}}))}},Ue=class extends t{constructor(){super(),this.shadowRoot||this.attachShadow({mode:`open`})}};e(`wui-tour`,He),e(`wui-tour-step`,Ue)})();
+var WeborityTour=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function t(e,t){if(typeof customElements>`u`||customElements.get(e))return;let n=[];if(typeof document<`u`)for(let r of document.querySelectorAll(e))for(let i of Object.keys(r)){let a=Object.getOwnPropertyDescriptor(t.prototype,i);if(a&&(a.set||a.get)&&(n.push([r,i,Reflect.get(r,i)]),!Reflect.deleteProperty(r,i)))throw Error(`defineElement: could not clear the early "${i}" property on <${e}>.`)}customElements.define(e,t);for(let[t,r,i]of n)if(!Reflect.set(t,r,i))throw Error(`defineElement: could not restore the "${r}" property on <${e}>.`)}var n=`@webority/ui-elements needs a browser DOM; import its types or helpers entry on the server`;if(typeof HTMLElement>`u`)throw Error(n);var r=HTMLElement;function i(e,t){a(e),e._reanchor=t,e._reanchorScroll=n=>{n.composedPath().includes(e)||t()},window.addEventListener(`resize`,e._reanchor),window.addEventListener(`scroll`,e._reanchorScroll,!0)}function a(e){if(!e?._reanchor)return;window.removeEventListener(`resize`,e._reanchor);let t=e._reanchorScroll;t&&window.removeEventListener(`scroll`,t,!0),e._reanchor=null,e._reanchorScroll=null}var o=`AppButton`,s=new Set([`primary`,`success`,`warning`,`danger`,`info`,`neutral`]),c={solid:e=>`btn-${e}`,soft:e=>`btn-soft-${e}`,outline:e=>`btn-outline-${e}`,ghost:e=>`btn-ghost-${e}`,link:e=>`btn-link-${e}`,glass:()=>`btn-glass`};function l(e){return Object.hasOwn(c,e)}function u(e=`primary`,t=`solid`,n=`md`){if(!s.has(e))throw RangeError(`buttonClass: unknown tone "${e}"`);if(!l(t))throw RangeError(`buttonClass: unknown variant "${t}"`);let r=c[t](e);return n===`md`?`btn ${r}`:`btn ${r} btn-${n}`}var d=`data-advance`,f=`wui-tour-hint`,p=`wui-tour-pointer`,m=`Click {actionName} to continue.`,h=`a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]`,g=(e,t)=>e?.advanceOn===`click`&&!!t,_=e=>(e??``).replace(/\s+/g,` `).trim(),v=e=>e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLMeterElement||e instanceof HTMLOutputElement||e instanceof HTMLProgressElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement?e.labels:null,ee=e=>e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement||e instanceof HTMLFieldSetElement||e instanceof HTMLOptGroupElement||e instanceof HTMLOptionElement?e.disabled:!1;function te(e){let t=e.ownerDocument,n=(e.getAttribute(`aria-labelledby`)||``).split(/\s+/).filter(Boolean),r=e instanceof HTMLInputElement&&/^(button|submit|reset)$/.test(e.type)?e.value:``,i=[n.map(e=>t.getElementById(e)?.textContent??``).join(` `),e.getAttribute(`aria-label`),Array.from(v(e)??[],e=>e.textContent).join(` `),e.getAttribute(`alt`),r,e.textContent,e.getAttribute(`title`)];for(let e of i){let t=_(e);if(t)return t}return``}function ne(e){for(let t of[e,...e.querySelectorAll(h)])if((t instanceof HTMLElement||t instanceof SVGElement)&&t.tabIndex>=0&&!ee(t))return t;return null}function y(e,t,n){let r=(e.getAttribute(`aria-describedby`)||``).split(/\s+/).filter(e=>e&&e!==t);n&&r.push(t),r.length>0?e.setAttribute(`aria-describedby`,r.join(` `)):e.removeAttribute(`aria-describedby`)}function b(e,t){let n=e.querySelector(`.${f}`),r=e.querySelector(`.wui-tour-text`)?.id,i=r?`${r.replace(/-text$/,``)}-hint`:``;if(!t)n?.remove(),i&&y(e,i,!1);else{if(!n){n=e.ownerDocument.createElement(`p`),n.className=f,i&&(n.id=i);let t=e.querySelector(`.wui-tour-actions`);if(!t)throw Error(`Tour card has no actions row.`);t.before(n)}n.textContent=t,i&&y(e,i,!0)}}function x(e,t){let n=e.querySelector(`.${p}`);if(!t){n?.remove();return}if(n)return;let r=e.ownerDocument.createElement(`span`);r.className=p,r.setAttribute(`aria-hidden`,`true`),e.append(r)}var re=e=>getComputedStyle(e).animationName;function S(e,{layer:t,spot:n,card:r},i,a){let o=g(i,a);t.toggleAttribute(d,o&&!(t.getRootNode()instanceof ShadowRoot)),n.hasAttribute(d)&&(n.removeAttribute(d),o&&re(n)),o&&n.setAttribute(d,``),x(n,o);let s=r.querySelector(`.wui-tour-next`);if(!(s instanceof HTMLElement))throw Error(`Tour card has no next button.`);s.classList.toggle(`btn-primary`,!o),s.classList.toggle(`btn-link`,o);let c=o?_(i?.actionLabel)||te(a):``,l=e.getAttribute(`advance-label`)||m,u=c?l.replace(/\{actionName\}/g,()=>c):``;return b(r,u),u}function ie(e,t,n){if(!g(e,t))return()=>{};let r,i=()=>{r??=setTimeout(n,0)};return t.addEventListener(`click`,i),()=>{t.removeEventListener(`click`,i),clearTimeout(r)}}function ae(e,t,n,r){return e.contains(r)||g(t,n)&&n.contains(r)}function oe(e,{card:t,active:n,step:r,target:i}){let a=Array.from(t.querySelectorAll(`button`)).filter(e=>!e.hidden),o=g(r,i)?ne(i):null;o&&a.push(o);let s=a.findIndex(e=>e===n||e===o&&i?.contains(n));e.preventDefault();let c=a[s===-1?e.shiftKey?a.length-1:0:(s+(e.shiftKey?-1:1)+a.length)%a.length];if(!c)throw Error(`Tour card has no focus stop.`);c.focus()}var se=2/3,ce=1e3,C=new Set([`top`,`left`,`width`,`height`]),w=new WeakMap,T=(e,t)=>typeof e.getAnimations==`function`?e.getAnimations().filter(t):[],E=e=>`transitionProperty`in e&&e.transitionProperty===`opacity`,le=e=>`transitionProperty`in e&&typeof e.transitionProperty==`string`&&C.has(e.transitionProperty),ue=e=>`animationName`in e&&typeof e.animationName==`string`&&e.animationName.startsWith(`wui-tour-`);function D(e){return e.length===0?null:new Promise(t=>{let n=setTimeout(t,ce);Promise.allSettled(e.map(e=>e.finished)).then(()=>{clearTimeout(n),t()})})}function de(e){let t=e.parentElement?.querySelector(`:scope > .wui-tour-spot`),n=0;for(let e of t?T(t,le):[]){let t=e.effect?.getComputedTiming?.();if(typeof t?.duration!=`number`)continue;let r=typeof e.currentTime==`number`?e.currentTime:0;n=Math.max(n,(t.delay??0)+t.duration*se-r)}return n}function O(e){let t=de(e);t>0?e.style.setProperty(`--wui-tour-card-delay`,`${Math.round(t)}ms`):e.style.removeProperty(`--wui-tour-card-delay`),e.dataset.state=`entering`;let n={};w.set(e,n);let r=()=>{w.get(e)===n&&e.dataset.state===`entering`&&(e.dataset.state=`shown`)},i=T(e,ue);i.length===0?r():Promise.allSettled(i.map(e=>e.finished)).then(r)}function k(e){return e.dataset.state=`leaving`,D(T(e,E))}function fe(e){let t=e.shadowRoot?.querySelector(`.wui-tour-layer`),n=e.classList.contains(`wui-tour-layer`)?e:t instanceof HTMLElement?t:null;n&&(n.dataset.state=`leaving`);let r=n?D(T(n,E)):null;r?(e.setAttribute(`inert`,``),r.then(()=>e.remove())):e.remove()}var pe=2,A=12,j=8,M=4,N=20,me=`(max-width: 575.98px)`,he=[`bottom`,`top`,`right`,`left`],P=[`top-left`,`top-right`,`bottom-right`,`bottom-left`],F,I=(e,t,n)=>Math.max(t,Math.min(e,n)),L=(e,t,n,r)=>(Math.max(e,n)+Math.min(t,r))/2;function R(e,t){if(!t?.scrollIntoView)return;e.style.maxHeight=``;let n=B(e),r=e.offsetHeight+A;if(t.getBoundingClientRect().height+4+r*2<=n.bottom-n.top){t.scrollIntoView({block:`center`,inline:`nearest`});return}let i=t.style.scrollMarginTop;t.style.scrollMarginTop=`${n.top+r+pe}px`,t.scrollIntoView({block:`start`,inline:`nearest`}),t.style.scrollMarginTop=i}function z(e,t,n){let r=e.style,i=t.style,a=be(t);if(!n){r.top=`50%`,r.left=`50%`,r.width=`0px`,r.height=`0px`,r.boxShadow=`0 0 0 100vmax var(--color-scrim-strong)`;for(let e of P)r.removeProperty(`border-${e}-radius`),r.removeProperty(`corner-${e}-shape`);t.dataset.placement=`center`,a.hidden=!0,i.position=`fixed`,i.top=`50%`,i.left=`50%`,i.transform=`translate(-50%, -50%)`,i.maxHeight=`calc(100vh - 16px)`;return}r.boxShadow=``,i.transform=``,i.position=`fixed`;let o=n.getBoundingClientRect();r.top=`${o.top}px`,r.left=`${o.left}px`,r.width=`${o.width}px`,r.height=`${o.height}px`,ge(r,n);let s=t.scrollTop;i.maxHeight=``;let c={width:t.offsetWidth,height:t.offsetHeight},l=B(t),u=l.bottom-l.top,d={bottom:l.bottom-o.bottom-A,top:o.top-A-l.top,right:l.right-o.right-A,left:o.left-A-l.left},f=window.matchMedia(me).matches,p=he.find(e=>e===`top`||e===`bottom`?c.height<=d[e]+1:!f&&c.width<=d[e]+1&&c.height<=u+1),m=Math.min(o.bottom,l.bottom+j)-Math.max(o.top,l.top-j);p?_e(t,a,p,o,l,c):m>=Math.min(c.height,u)+8?ve(t,a,o,l,c):ye(t,a,d.bottom>=d.top?`bottom`:`top`,o,l,c,d),t.scrollTop=s}function ge(e,t){F??=CSS.supports(`corner-top-left-shape`,`squircle`);let n=getComputedStyle(t);for(let t of P)e.setProperty(`border-${t}-radius`,n.getPropertyValue(`border-${t}-radius`)),F&&e.setProperty(`corner-${t}-shape`,n.getPropertyValue(`corner-${t}-shape`))}function _e(e,t,n,r,i,a){let o=n===`top`||n===`bottom`,s,c,l;if(o){let e=L(r.left,r.right,i.left,i.right);s=I(e-a.width/2,i.left,i.right-a.width),c=n===`bottom`?r.bottom+A:r.top-A-a.height,l=I(e-s,N,a.width-N)}else{let e=L(r.top,r.bottom,i.top,i.bottom);c=I(e-a.height/2,i.top,i.bottom-a.height),s=n===`right`?r.right+A:r.left-A-a.width,l=I(e-c,N,a.height-N)}e.dataset.placement=n,e.style.top=`${c}px`,e.style.left=`${s}px`,t.hidden=!1,t.style.left=o?`${l-e.clientLeft-t.offsetWidth/2}px`:``,t.style.top=o?``:`${l-e.clientTop-t.offsetHeight/2}px`}function ve(e,t,n,r,i){let a=r.bottom-r.top;e.dataset.placement=`overlap`,t.hidden=!0,e.style.maxHeight=i.height>a?`${Math.max(a,0)}px`:``;let o=Math.min(n.bottom,r.bottom)-M;e.style.top=`${Math.max(r.top,o-Math.min(i.height,a))}px`,e.style.left=`${I(n.left+M,r.left,r.right-i.width)}px`}function ye(e,t,n,r,i,a,o){let s=Math.max(o[n],0),c=Math.min(a.height,s);e.dataset.placement=n,t.hidden=!0,e.style.maxHeight=a.height>s?`${s}px`:``,e.style.top=`${n===`bottom`?r.bottom+A:r.top-A-c}px`;let l=L(r.left,r.right,i.left,i.right);e.style.left=`${I(l-a.width/2,i.left,i.right-a.width)}px`}function B(e){let t=e.parentElement,n=t?getComputedStyle(t):null,r=e=>Number.parseFloat(n?.[e]??``)||0;return{top:r(`paddingTop`)+j,bottom:window.innerHeight-r(`paddingBottom`)-j,left:r(`paddingLeft`)+j,right:window.innerWidth-r(`paddingRight`)-j}}function be(e){let t=e.querySelector(`:scope > .wui-tour-arrow`);if(t instanceof HTMLElement)return t;let n=document.createElement(`span`);return n.className=`wui-tour-arrow`,n.setAttribute(`aria-hidden`,`true`),n.hidden=!0,e.append(n),n}var xe=0,Se=`btn btn-sm btn-link`;function V(e,t,n){let r=e.querySelector(t);if(!(r instanceof n))throw Error(`Expected "${t}" to match a ${n.name}.`);return r}function Ce(e,t,n){let r=`wui-tour-end-${++xe}`,i=!!(t.nextLabel&&t.nextHref),a=e.createElement(`div`);a.className=`wui-tour-card wui-tour-end`,a.dataset.layout=`center`,i&&(a.dataset.next=``),a.setAttribute(`role`,`dialog`),n&&a.setAttribute(`aria-modal`,`true`),a.tabIndex=-1,a.setAttribute(`aria-labelledby`,`${r}-title`),a.setAttribute(`aria-describedby`,`${r}-message`),a.innerHTML=` <div class="wui-tour-end-mark" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></div> <h2 class="wui-tour-title wui-tour-end-title" id="${r}-title"></h2> <p class="wui-tour-text wui-tour-end-message" id="${r}-message"></p> <div class="wui-tour-actions">${i?`<a class="${u(`primary`,`solid`,`sm`)} wui-tour-end-next" data-wui="${o}"></a>`:``}<button type="button" class="${i?Se:u(`primary`,`solid`,`sm`)} wui-tour-end-button" data-wui="${o}"></button></div>`,V(a,`.wui-tour-end-title`,HTMLElement).textContent=t.title,V(a,`.wui-tour-end-message`,HTMLElement).textContent=t.message,V(a,`.wui-tour-end-button`,HTMLButtonElement).textContent=t.button;let{nextLabel:s,nextHref:c}=t;if(i&&s&&c){let e=V(a,`.wui-tour-end-next`,HTMLAnchorElement);e.textContent=s,e.setAttribute(`href`,c)}return a}var we=e=>e.button===0&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey&&!e.altKey;function Te(e,t,n){let r=e.ownerDocument,i=e.getRootNode()===r,a=Ce(r,t,i),o=V(a,`.wui-tour-end-button`,HTMLButtonElement),s=a.querySelector(`.wui-tour-end-next`);if(s!==null&&!(s instanceof HTMLAnchorElement))throw Error(`The end dialog's next link is not a link.`);let c=s,l=c?[c,o]:[o],u=c??o,d=new AbortController;return new Promise(s=>{let f=e=>{d.abort(),s(e)};if(n?.aborted){f(`done`);return}let p=V(e,`.wui-tour-card:not(.wui-tour-end)`,HTMLElement),m=V(e,`.wui-tour-spot`,HTMLElement),h=V(e,`[role=status]`,HTMLElement),g={signal:d.signal};n?.addEventListener(`abort`,()=>f(`done`),g),o.addEventListener(`click`,()=>f(`done`),g),c&&c.addEventListener(`click`,e=>{we(e)&&(e.preventDefault(),f(`next`))},g),r.addEventListener(`keydown`,e=>{if(!(e.altKey||e.ctrlKey||e.metaKey)){if(e.key===`Escape`)e.preventDefault(),e.stopPropagation(),f(`done`);else if(e.key===`Enter`&&c&&!e.shiftKey&&(e.composedPath?.()[0]??e.target)===c)e.preventDefault(),f(`next`);else if(e.key===`Tab`&&i){e.preventDefault();let t=r.activeElement,n=t instanceof HTMLElement?l.indexOf(t):-1,i=n===-1?e.shiftKey?l.length-1:0:(n+(e.shiftKey?-1:1)+l.length)%l.length,a=l[i];if(!a)throw Error(`The end dialog has no focus stop.`);a.focus()}}},{capture:!0,signal:d.signal}),i&&r.addEventListener(`focusin`,e=>{let t=e.target;if(t!==null&&!(t instanceof Node))throw Error(`Focus moved to a target that is not a node.`);a.contains(t)||u.focus()},g);let _=()=>{d.signal.aborted||(p.hidden=!0,z(m,p,null),e.append(a),O(a),h.textContent=[t.title,t.message].filter(Boolean).join(`. `),u.focus())},v=k(p);v?v.then(_):_()})}var Ee=` :host { all: initial; ${Object.entries({"--wui-z-tour":`1550`,"--wui-radius-sm":`8px`,"--wui-radius-lg":`14px`,"--wui-shadow-popover":`0px 8px 28px -6px rgba(7, 20, 55, 0.14)`,"--wui-ease-out":`cubic-bezier(0.22, 1, 0.36, 1)`,"--wui-tour-motion-duration":`200ms`,"--wui-tour-motion-ease":`cubic-bezier(0.22, 1, 0.36, 1)`,"--wui-tour-spot-duration":`240ms`,"--wui-tour-spot-ease":`cubic-bezier(0.32, 0.72, 0, 1)`,"--color-primary":`#4F46E5`,"--color-primary-hover":`#4338CA`,"--color-primary-text":`#4F46E5`,"--color-focus-ring":`#4F46E5`,"--wui-focus-ring-width":`2px`,"--wui-focus-ring-offset":`2px`,"--color-on-primary":`#FFFFFF`,"--color-success-soft":`#E8FAEE`,"--color-success-text":`#0e7531`,"--color-on-scrim":`#FFFFFF`,"--color-scrim-strong":`color-mix(in srgb, #071437 62%, transparent)`,"--color-surface":`#FFFFFF`,"--color-text":`#071437`,"--color-text-muted":`#4B5675`,"--color-border":`#EBEDF3`,"--color-bg-muted":`#F5F6FA`}).map(([e,t])=>`    ${e}: ${t};`).join(` `)} } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .btn { display: inline-block; margin: 0; padding: 0.25rem 0.5rem; border: 1px solid transparent; border-radius: 0.375rem; background: transparent; font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1.5; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .btn-outline-neutral { border-color: var(--color-text-muted); color: var(--color-text-muted); } .btn-outline-neutral:hover { background: var(--color-bg-muted); color: var(--color-text); } .btn-link { font-weight: 400; color: var(--color-primary-text); text-decoration: underline; } .btn-link:hover { color: var(--color-primary-hover); } .wui-tour-layer { pointer-events: none; font-family: "Webority Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--color-text); text-align: start; } .wui-tour-card { pointer-events: auto; } .wui-tour-layer { position: fixed; inset: 0; z-index: var(--wui-z-tour); } .wui-tour-spot { position: fixed; box-shadow: 0 0 0 2px var(--color-primary), 0 0 4px 2px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 0 0 100vmax var(--color-scrim-strong); pointer-events: none; } .wui-tour-card { display: flex; flex-direction: column; gap: 8px; width: min(360px, 100vw - 16px); padding: 16px; overflow-y: auto; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--wui-radius-lg); corner-shape: squircle; box-shadow: var(--wui-shadow-popover); } .wui-tour-card:focus { outline: none; } .wui-tour-card:focus-visible { outline: var(--wui-focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--wui-focus-ring-offset); } .wui-tour-title { margin: 0; font-size: 16px; font-weight: 600; } .wui-tour-text { margin: 0; font-size: 14px; color: var(--color-text-muted); } .wui-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .wui-tour-nav { display: flex; gap: 8px; } .wui-tour-skip { color: var(--color-text-muted); } .wui-tour-back, .wui-tour-next { min-width: 64px; } @keyframes wui-tour-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes wui-tour-card-enter { from { opacity: 0; scale: 0.96; translate: var(--wui-tour-card-lift, 0 6px); } to { opacity: 1; scale: 1; translate: 0 0; } } .wui-tour-layer[data-state=leaving], .wui-tour-card[data-state=leaving] { opacity: 0; } .wui-tour-layer[data-state=leaving], .wui-tour-layer[data-state=leaving] * { pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .wui-tour-layer { animation: wui-tour-fade-in var(--wui-tour-motion-duration) var(--wui-tour-motion-ease); } .wui-tour-layer[data-state=leaving] { transition: opacity var(--wui-tour-motion-duration) var(--wui-tour-motion-ease); } .wui-tour-spot { transition: top var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), left var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), width var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), height var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), border-radius var(--wui-tour-spot-duration) var(--wui-tour-spot-ease); } .wui-tour-spot[data-tracking] { transition: none; } .wui-tour-card { --wui-tour-card-lift: 0 6px; transform-origin: top center; } .wui-tour-card[data-placement=top] { --wui-tour-card-lift: 0 -6px; transform-origin: bottom center; } .wui-tour-card[data-placement=bottom] { --wui-tour-card-lift: 0 6px; transform-origin: top center; } .wui-tour-card[data-placement=left] { --wui-tour-card-lift: -6px 0; transform-origin: right center; } .wui-tour-card[data-placement=right] { --wui-tour-card-lift: 6px 0; transform-origin: left center; } .wui-tour-card[data-placement=overlap], .wui-tour-card[data-placement=center] { --wui-tour-card-lift: 0 0; transform-origin: center; } .wui-tour-card[data-state=entering] { animation: wui-tour-card-enter var(--wui-tour-motion-duration) var(--wui-tour-motion-ease) var(--wui-tour-card-delay, 0ms) both; } .wui-tour-card[data-state=leaving] { transition: opacity calc(var(--wui-tour-motion-duration) / 2) var(--wui-tour-motion-ease); } } @media (prefers-reduced-motion: reduce) { .wui-tour-layer { animation: wui-tour-fade-in 120ms linear; } .wui-tour-layer[data-state=leaving] { transition: opacity 120ms linear; } .wui-tour-card[data-state=entering] { animation: wui-tour-fade-in 120ms linear both; } } .wui-tour-progress-bar { display: flex; gap: 4px; } .wui-tour-progress-segment { flex: 1 1 0; height: 4px; border-radius: 999px; background: var(--color-border); } .wui-tour-progress-segment[data-filled] { background: var(--color-primary); } .wui-tour-position { margin: 0; font-size: 12px; color: var(--color-text-muted); } .wui-tour-layer { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); } .wui-tour-card:has(.wui-tour-arrow:not([hidden])) { overflow: visible; } .wui-tour-arrow { position: absolute; width: 8px; height: 8px; background: var(--color-surface); border: 1px solid var(--color-border); rotate: 45deg; pointer-events: none; } .wui-tour-card[data-placement=bottom] .wui-tour-arrow { top: -5px; border-right-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0); } .wui-tour-card[data-placement=top] .wui-tour-arrow { bottom: -5px; border-top-color: rgba(0, 0, 0, 0); border-left-color: rgba(0, 0, 0, 0); } .wui-tour-card[data-placement=right] .wui-tour-arrow { left: -5px; border-top-color: rgba(0, 0, 0, 0); border-right-color: rgba(0, 0, 0, 0); } .wui-tour-card[data-placement=left] .wui-tour-arrow { right: -5px; border-bottom-color: rgba(0, 0, 0, 0); border-left-color: rgba(0, 0, 0, 0); } @media (max-width: 575.98px) { .wui-tour-card { width: calc(100vw - 16px); } .wui-tour-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } } .wui-tour-media { position: relative; order: -1; flex: none; aspect-ratio: 16/9; margin: -16px -16px 4px; overflow: hidden; background: var(--color-border); } .wui-tour-media>img, .wui-tour-media>video { display: block; width: 100%; height: 100%; object-fit: cover; } .wui-tour-card[data-welcome] { width: min(420px, 100vw - 16px); } .wui-tour-media-toggle { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--color-scrim-strong); color: var(--color-on-scrim); cursor: pointer; } .wui-tour-media-toggle>svg { width: 20px; height: 20px; fill: currentColor; } .wui-tour-media-toggle:focus-visible { outline: 2px solid var(--color-on-scrim); outline-offset: 2px; } .wui-tour-layer[data-advance] { pointer-events: none; } .wui-tour-layer[data-advance]:not([data-state=leaving]) .wui-tour-card { pointer-events: auto; } .wui-tour-layer[data-advance]:not([data-state=leaving]) .wui-tour-spot::before { content: ""; position: absolute; inset: -100vmax; pointer-events: auto; clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 100vmax 100vmax, calc(100% - 100vmax) 100vmax, calc(100% - 100vmax) calc(100% - 100vmax), 100vmax calc(100% - 100vmax), 100vmax 100vmax); } .wui-tour-hint { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text); } .wui-tour-pointer { position: absolute; top: 50%; left: 50%; width: 18px; height: 24px; pointer-events: none; } .wui-tour-pointer::before { content: ""; position: absolute; inset: 0; background: var(--color-primary); clip-path: polygon(0 0, 0 75%, 28% 58%, 46% 100%, 62% 92%, 45% 52%, 85% 52%); filter: drop-shadow(1px 0 0 var(--color-surface)) drop-shadow(-1px 0 0 var(--color-surface)) drop-shadow(0 1px 0 var(--color-surface)) drop-shadow(0 -1px 0 var(--color-surface)); } .wui-tour-pointer::after { content: ""; position: absolute; top: -16px; left: -16px; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); opacity: 0; display: none; } @media (max-width: 575.98px) { .wui-tour-pointer { width: 24px; height: 24px; translate: -50% -50%; } .wui-tour-pointer::before { clip-path: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--color-surface); filter: none; } .wui-tour-pointer::after { top: -4px; left: -4px; } } @keyframes wui-tour-tap { 0% { opacity: 0; transform: translate(56px, 44px) scale(1); } 10% { opacity: 1; transform: translate(56px, 44px) scale(1); } 45% { transform: translate(0, 0) scale(1); } 52% { transform: translate(0, 0) scale(0.86); } 60% { transform: translate(0, 0) scale(1); } 85% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(0, 0) scale(1); } } @keyframes wui-tour-ripple { 0%, 50% { opacity: 0; transform: scale(0.2); } 52% { opacity: 0.35; transform: scale(0.2); } 80%, 100% { opacity: 0; transform: scale(1); } } @media (prefers-reduced-motion: no-preference) { .wui-tour-pointer { opacity: 0; animation: wui-tour-tap calc(var(--wui-duration-slow) * 6) var(--wui-ease-out) var(--wui-tour-spot-duration) infinite; } .wui-tour-pointer::after { display: block; animation: wui-tour-ripple calc(var(--wui-duration-slow) * 6) var(--wui-ease-out) var(--wui-tour-spot-duration) infinite; } } @keyframes wui-tour-check { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } } .wui-tour-end[data-layout=center] { --wui-tour-card-lift: 0 0; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center; align-items: center; gap: 8px; width: min(420px, 100vw - 16px); max-height: calc(100vh - 16px); padding: 24px; text-align: center; } .wui-tour-end[data-layout=center] .wui-tour-actions { justify-content: center; margin-top: 8px; } .wui-tour-end[data-layout=center][data-next] .wui-tour-actions { flex-direction: column; align-items: stretch; width: 100%; gap: var(--wui-space-xs); } .wui-tour-end-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success-text); } .wui-tour-end-mark>svg { width: 26px; height: 26px; } .wui-tour-end-mark path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; } .wui-tour-end-title { font-size: 18px; } .wui-tour-end-message { text-wrap: balance; } .wui-tour-end-next { text-wrap: balance; } .wui-tour-end-button { min-width: 120px; } @media (prefers-reduced-motion: no-preference) { .wui-tour-end-mark path { animation: wui-tour-check 300ms var(--wui-ease-out) calc(var(--wui-tour-card-delay, 0ms) + 120ms) both; } } `,H=`wui-tour-media`,U=`wui-tour-media-toggle`,W=`http://www.w3.org/2000/svg`,De=`M6 5h4v14H6zM14 5h4v14h-4z`,Oe=`M8 5v14l11-7z`,ke={pause:`Pause animation`,play:`Play animation`},Ae=()=>globalThis.matchMedia?.(`(prefers-reduced-motion: reduce)`)?.matches===!0;function je(e){let t=document.createElementNS(W,`svg`);t.setAttribute(`viewBox`,`0 0 24 24`),t.setAttribute(`aria-hidden`,`true`),t.setAttribute(`focusable`,`false`);let n=document.createElementNS(W,`path`);return n.setAttribute(`d`,e),t.appendChild(n),t}function Me(e){let t=document.createElement(`img`);return t.setAttribute(`alt`,e.mediaAlt??``),t.setAttribute(`width`,`1280`),t.setAttribute(`height`,`720`),t.setAttribute(`loading`,`lazy`),t.setAttribute(`decoding`,`async`),t.setAttribute(`src`,e.media??``),t}function Ne(e,t){let n=document.createElement(`video`);return n.muted=!0,n.setAttribute(`muted`,``),n.loop=!0,n.setAttribute(`playsinline`,``),t&&n.setAttribute(`autoplay`,``),n.setAttribute(`preload`,t?`auto`:`metadata`),e.mediaAlt&&n.setAttribute(`aria-label`,e.mediaAlt),e.mediaPoster&&n.setAttribute(`poster`,e.mediaPoster),n.setAttribute(`src`,e.media??``),n}function Pe(e,t){let n=document.createElement(`button`);n.type=`button`,n.className=U;let r=(r=!e.paused)=>{n.setAttribute(`aria-label`,r?t.pause:t.play),n.replaceChildren(je(r?De:Oe))};return e.addEventListener(`play`,()=>r()),e.addEventListener(`pause`,()=>r()),n.addEventListener(`click`,()=>{e.paused?e.play()?.catch(()=>r()):e.pause()}),r(e.hasAttribute(`autoplay`)),n}function Fe(e){let t=e.querySelector(`:scope > .${H}`);if(!t)return;let n=t.querySelector(`video`);n&&(n.pause(),n.removeAttribute(`src`),n.load()),t.remove()}function Ie(e,t,n=ke){if(Fe(e),!t.media){e.removeAttribute(`data-media`);return}let r=document.createElement(`div`);if(r.className=H,t.mediaType===`video`){let e=Ne(t,!Ae());r.append(e,Pe(e,n))}else r.appendChild(Me(t));e.prepend(r),e.setAttribute(`data-media`,t.target?`step`:`welcome`)}var G=`data-wui-tour-open`,Le=`Step {current} of {total}`;function K(e){let t=new Set;return{drop:e=>{t.add(e)},position:e=>{t.delete(e);let n=0;for(let r of t)r<e&&n++;return e+1-n},total:()=>e-t.size}}function Re(e,t,n){return(e.getAttribute(`progress-label`)||Le).replace(/\{(current|total)\}/g,(e,r)=>String(r===`current`?t:n))}function ze(e,{text:t,position:n,total:r}){let i=e.querySelector(`.wui-tour-position`);if(!(i instanceof HTMLElement))throw Error(`tour position label missing`);i.textContent=t;let a=e.querySelector(`.wui-tour-progress-bar`);if(!a){let t=e.ownerDocument,n=t.createElement(`div`);n.className=`wui-tour-progress`,n.setAttribute(`aria-hidden`,`true`),a=t.createElement(`div`),a.className=`wui-tour-progress-bar`,n.append(a),i.before(n)}let o=a.children;for(;o.length<r;){let t=e.ownerDocument.createElement(`span`);t.className=`wui-tour-progress-segment`,a.append(t)}for(;o.length>r;){let e=a.lastElementChild;if(!e)throw Error(`progress bar segment missing`);e.remove()}for(let e=0;e<o.length;e++){let t=o[e];if(!t)throw Error(`progress bar segment missing`);t.toggleAttribute(`data-filled`,e<n)}}var Be=`wui-tour-seen:`;function Ve(e=Be,t=globalThis.localStorage){return{isSeen:async n=>t.getItem(e+n)===`1`,markSeen:async n=>{t.setItem(e+n,`1`)}}}var He=`wui-tour-step`,Ue=`wui-tour-host`,q=`data-tracking`,We={back:`Back`,next:`Next`,skip:`Skip`,done:`Done`,mediaPause:`Pause animation`,mediaPlay:`Play animation`,endTitle:`You're all set`,endMessage:`You know your way around now. Enjoy exploring.`,endButton:`Done`},Ge={back:`back-label`,next:`next-label`,skip:`skip-label`,done:`done-label`,mediaPause:`media-pause-label`,mediaPlay:`media-play-label`,endTitle:`end-title`,endMessage:`end-message`,endButton:`end-button`},Ke=[[`media`,`media`],[`mediaAlt`,`media-alt`],[`mediaPoster`,`media-poster`],[`mediaType`,`media-type`],[`advanceOn`,`advance-on`],[`actionLabel`,`action-label`]],J={index:null,position:null,total:null},qe=0,Y=e=>!e?.isConnected||getComputedStyle(e).visibility===`hidden`?!1:e.getClientRects().length>0,X=e=>e instanceof HTMLElement&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName));function Z(e,t,n){let r=e.querySelector(t);if(!(r instanceof n))throw Error(`<wui-tour> layer has no ${t}`);return r}var Je=()=>{let e=document.activeElement;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e},Q=null;function Ye(e){Q||(Q=new CSSStyleSheet,Q.replaceSync(Ee)),e.adoptedStyleSheets=[Q]}var Xe=class extends r{seenStore;onBeforeStep;_run;_running;_layer;_outer;_shadow;_unbindAdvance;_ending;_seenMark;_steps=[];_progress=K(0);_firstIndex=0;_returnFocus=null;_current=null;_moving=!1;_card=null;_spot=null;_live=null;_onKey=null;_onFocusIn=null;static get observedAttributes(){return[`open`]}constructor(){super(),this.seenStore=null,this.onBeforeStep=null,this._run=0,this._running=!1,this._layer=null,this._outer=null,this._shadow=null,this._unbindAdvance=null,this._ending=null,this._seenMark=null}connectedCallback(){this.hasAttribute(`open`)&&this.start()}disconnectedCallback(){this.stop()}attributeChangedCallback(e,t,n){e===`open`&&this.isConnected&&(n===null?this.stop():this.start())}get tourId(){return this.getAttribute(`tour-id`)||``}set tourId(e){e==null||e===``?this.removeAttribute(`tour-id`):this.setAttribute(`tour-id`,String(e))}get isolated(){return this.hasAttribute(`isolated`)}set isolated(e){this.toggleAttribute(`isolated`,e===!0||e===``||e===`true`)}_stepList(){return Array.from(this.querySelectorAll(`:scope > ${He}`),e=>{let t={target:e.getAttribute(`target`)||``,title:e.getAttribute(`title`)||void 0,description:(e.textContent??``).trim()};for(let[n,r]of Ke)e.hasAttribute(r)&&(t[n]=e.getAttribute(r)??void 0);return t})}_stepAt(e){let t=this._steps[e];if(!t)throw RangeError(`<wui-tour> has no step ${e}; it has ${this._steps.length}.`);return t}_store(){return this.seenStore?this.seenStore:this.getAttribute(`seen-store`)===`local`?Ve():globalThis.window?.WUI?.tour?.seenStore||null}_label(e){return this.getAttribute(Ge[e])||We[e]}_endDialogText(){if(this.getAttribute(`end-dialog`)===`false`)return null;let e=(this.getAttribute(`end-next-label`)??``).trim(),t=(this.getAttribute(`end-next-href`)??``).trim();return{title:this._label(`endTitle`),message:this._label(`endMessage`),button:this._label(`endButton`),nextLabel:e,nextHref:t}}_markSeen(e){let t=this._store();return t?t.markSeen(this.tourId,e):null}async start(){if(this._running)return;this._running=!0;let e=++this._run;this.hasAttribute(`open`)||this.setAttribute(`open`,``);try{await this._start(e)}catch(t){throw e===this._run&&(this._running=!1),t}}async _start(e){this._steps=this._stepList(),this._progress=K(this._steps.length);let t=this._store();if(t&&!this.tourId)throw Error(`<wui-tour> needs a tour-id to use a seen store.`);if(t&&await t.isSeen(this.tourId)){e===this._run&&this._finish(`alreadySeen`);return}for(let[e,t]of this._steps.entries())t.target&&!Y(document.querySelector(t.target))&&this._progress.drop(e);this._returnFocus=document.activeElement;let n=await this._locate(0,1,e);e===this._run&&(n?(this._firstIndex=n.index,this.dispatchEvent(new CustomEvent(`wui-tour:start`,{bubbles:!0,detail:{total:this._progress.total()}})),e===this._run&&(this._build(),this._show(n))):this._finish(`noTargets`))}next(){return this._move(1)}back(){return!this._current||this._current.index<=this._firstIndex?Promise.resolve():this._move(-1)}async goTo(e){if(this._current){if(!Number.isInteger(e)||e<0||e>=this._steps.length)throw RangeError(`<wui-tour> has no step ${e}; it has ${this._steps.length}.`);await this._go(e,1)}}stop(){this._running&&(this._run++,this._teardown(),this._running=!1,this.hasAttribute(`open`)&&this.removeAttribute(`open`))}async _locate(e,t,n){let r=this._steps;for(let i=e;i>=0&&i<r.length;i+=t){let e=r[i];if(!e)break;if(await this._beforeStep(e,i),n!==this._run)return null;if(!e.target)return{index:i,target:null};let t=document.querySelector(e.target),a=t instanceof HTMLElement||t instanceof SVGElement?t:null;if(Y(a))return this._progress.position(i),{index:i,target:a};this._progress.drop(i)}return null}async _beforeStep(e,t){let n=[];this.dispatchEvent(new CustomEvent(`wui-tour:beforestep`,{bubbles:!0,detail:{step:e,index:t,wait:e=>n.push(e)}})),await Promise.all(n),typeof this.onBeforeStep==`function`&&await this.onBeforeStep(e,t)}_build(){let e=`wui-tour-${++qe}`,t=document.createElement(`div`);t.className=`wui-tour-layer`,t.innerHTML=` <div class="wui-tour-spot" aria-hidden="true"></div> <div class="wui-tour-card" role="dialog" aria-modal="true" tabindex="-1" aria-labelledby="${e}-title" aria-describedby="${e}-text"> <p class="wui-tour-position"></p> <h2 class="wui-tour-title" id="${e}-title"></h2> <p class="wui-tour-text" id="${e}-text"></p> <div class="wui-tour-actions"> <button type="button" class="btn btn-sm btn-link wui-tour-skip"></button> <div class="wui-tour-nav"> <button type="button" class="${u(`neutral`,`outline`,`sm`)} wui-tour-back" data-wui="${o}"></button> <button type="button" class="${u(`primary`,`solid`,`sm`)} wui-tour-next" data-wui="${o}"></button> </div> </div> </div> <div class="visually-hidden" role="status" aria-live="polite"></div>`;let n=t;this._shadow=null,this.isolated&&(n=document.createElement(Ue),this._shadow=n.attachShadow({mode:`open`}),Ye(this._shadow),this._shadow.appendChild(t)),document.body.appendChild(n),document.documentElement.setAttribute(G,``),this._outer=n,this._layer=t;let r=Z(t,`.wui-tour-spot`,HTMLDivElement),a=Z(t,`.wui-tour-card`,HTMLDivElement),s=Z(t,`[role=status]`,HTMLElement);this._spot=r,this._card=a,this._live=s,Z(a,`.wui-tour-skip`,HTMLElement).addEventListener(`click`,()=>this._close(`skipped`,`button`)),Z(a,`.wui-tour-back`,HTMLElement).addEventListener(`click`,()=>this._move(-1)),Z(a,`.wui-tour-next`,HTMLElement).addEventListener(`click`,()=>this._move(1)),this._shadow&&a.removeAttribute(`aria-modal`);let c=e=>this._key(e);this._onKey=c;let l=e=>{let t=this._layer;if(!t||this._ending)return;let n=this._current,r=n?this._stepAt(n.index):null;if(!(e.target instanceof Node))throw Error(`<wui-tour> saw a focus change from a non-node target`);ae(t,r,n?.target??null,e.target)||a.focus()};this._onFocusIn=l,document.addEventListener(`keydown`,c,!0),this._shadow||document.addEventListener(`focusin`,l),i(n,()=>this._follow())}_active(){return this._shadow?this._shadow.activeElement:document.activeElement}_show(e){this._current=e;let{index:t,target:n}=e,r=this._stepAt(t),i=this._layer,a=this._spot,o=this._card,s=this._live;if(!i||!a||!o||!s)throw Error(`<wui-tour> shows a step before its layer is built`);let c=this._progress.position(t),l=this._progress.total(),u=c===l&&!this._endDialogText(),d=Re(this,c,l);ze(o,{text:d,position:c,total:l}),Ie(o,r,{pause:this._label(`mediaPause`),play:this._label(`mediaPlay`)}),o.toggleAttribute(`data-welcome`,!n);let f=S(this,{layer:i,spot:a,card:o},r,n),p=Z(o,`.wui-tour-title`,HTMLElement);p.textContent=r.title||``,p.hidden=!r.title,Z(o,`.wui-tour-text`,HTMLElement).textContent=r.description||``,Z(o,`.wui-tour-skip`,HTMLElement).textContent=this._label(`skip`);let m=Z(o,`.wui-tour-back`,HTMLElement);m.textContent=this._label(`back`),m.hidden=t<=this._firstIndex,Z(o,`.wui-tour-next`,HTMLElement).textContent=this._label(u?`done`:`next`);let h=[d,r.title,r.description].filter(Boolean).join(`. `);s.textContent=f?[h,f].join(/[.!?]$/.test(h)?` `:`. `):h,R(o,n),a.removeAttribute(q),this._place(),O(o),this._unbindAdvance?.(),this._unbindAdvance=ie(r,n,()=>this._move(1));let g=this._active();(g!==null&&o.contains(g)?!(g instanceof HTMLElement&&g.hidden):this._shadow!==null&&X(Je()))||o.focus(),this.dispatchEvent(new CustomEvent(`wui-tour:step`,{bubbles:!0,detail:{step:r,index:t,position:c,total:l}}))}_place(){if(!this._current||!this._layer)return;let e=this._spot,t=this._card;if(!e||!t)throw Error(`<wui-tour> places a step before its layer is built`);z(e,t,this._current.target)}_follow(){if(!this._current||!this._layer||this._ending)return;let e=this._spot;if(!e)throw Error(`<wui-tour> follows a step before its spot is built`);let t=e.style.cssText;this._place(),e.style.cssText!==t&&e.setAttribute(q,``)}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;if(r){let e=this._card;if(!e)throw Error(`<wui-tour> moved with no card showing`);let t=k(e);if(t&&await t,n!==this._run)return;this._show(r)}else if(t>0){let e=this._endDialogText(),t=e?await this._showEnd(e):`done`;if(n!==this._run)return;let r=await this._close(t===`next`?`next`:`finished`);if(t===`next`&&r&&e){let t=this.ownerDocument.defaultView;if(!t)throw Error(`<wui-tour> has no window to follow its next link in`);t.location.assign(e.nextHref)}}}finally{this._moving=!1}}_showEnd(e){this._unbindAdvance?.(),this._unbindAdvance=null;let t=this._layer,n=this._spot,r=this._card;if(!t||!n||!r)throw Error(`<wui-tour> ends a tour before its layer is built`);return S(this,{layer:t,spot:n,card:r},null,null),n.removeAttribute(q),this._ending=new AbortController,this._seenMark=this._markSeen(`finished`),Te(t,e,this._ending.signal)}_key(e){if(!(!this._layer||this._ending||e.altKey||e.ctrlKey||e.metaKey)){if(e.key===`Escape`)e.preventDefault(),e.stopPropagation(),this._close(`skipped`,`escape`);else if(e.key===`ArrowRight`||e.key===`ArrowLeft`){if(X(e.composedPath?.()[0]??e.target))return;if(e.preventDefault(),e.key===`ArrowRight`)this._move(1);else{let e=this._current;if(!e)throw Error(`<wui-tour> moved back with no step showing`);e.index>this._firstIndex&&this._move(-1)}}else if(e.key===`Tab`&&!this._shadow){let t=this._current,n=this._card;if(!t||!n)throw Error(`<wui-tour> cycled focus with no step showing`);oe(e,{card:n,active:this._active(),step:this._stepAt(t.index),target:t.target})}}}_teardown(){if(!this._layer)return;this._onKey&&document.removeEventListener(`keydown`,this._onKey,!0),this._onFocusIn&&document.removeEventListener(`focusin`,this._onFocusIn);let e=!this._shadow||this._shadow.activeElement!==null||!document.activeElement||document.activeElement===document.body;this._unbindAdvance?.(),this._unbindAdvance=null,this._ending?.abort(),this._ending=null,this._seenMark=null;let t=this._outer;if(a(t),!t)throw Error(`<wui-tour> has a layer with no host to remove`);fe(t),document.documentElement.removeAttribute(G),this._outer=null,this._shadow=null,this._layer=null,this._current=null;let n=this._returnFocus;this._returnFocus=null,e&&n?.isConnected&&(n instanceof HTMLElement||n instanceof SVGElement)&&n.focus()}async _close(e,t=null){let n=this._run,r=this._current,i=r?{index:r.index,position:this._progress.position(r.index),total:this._progress.total()}:J,a=this._seenMark;this._teardown();let o=e===`next`?`finished`:e,s=!1;try{n===this._run&&await(a??this._markSeen(o)),s=n===this._run}finally{this._finish(e,i,t)}return s}_finish(e,t=J,n=null){this._run++,this._running=!1,this.hasAttribute(`open`)&&this.removeAttribute(`open`),this.dispatchEvent(new CustomEvent(`wui-tour:close`,{bubbles:!0,detail:{reason:e,...t,via:n}}))}},$=class extends r{constructor(){super(),this.shadowRoot||this.attachShadow({mode:`open`})}};return t(`wui-tour`,Xe),t(`wui-tour-step`,$),e.WuiTourStep=$,e})({});

package/dist/wuiHttp-523iN_RF.js

@@ -0,0 +1 @@
+import{n as e}from"./devWarn-DXdRWZs3.js";var t=Object.freeze([`POST`,`PUT`,`PATCH`,`DELETE`]),n=t=>(e(`[@webority/ui-elements] Wui-Toast-Action: ${t}; the toast shows no action.`),null),r=e=>typeof e==`object`&&!!e;function i(e){if(e==null||e===``)return null;let i;try{i=JSON.parse(e)}catch{return n(`the value is not JSON`)}let a=r(i)?i:{},o=a.label,s=a.url,c=String(a.method??`POST`).toUpperCase();return typeof o!=`string`||o===``||typeof s!=`string`||s===``?n(`label and url must be non-empty strings`):t.includes(c)?{label:o,url:s,method:c}:n(`method must be one of ${t.join(`, `)}`)}var a=`wui-csrf`,o=`RequestVerificationToken`,s={metaName:a,header:o};function c({metaName:e=a,header:t=o}={}){s={metaName:e,header:t}}var l=`Wui-Request`,u=Object.freeze({fragment:`Wui-Fragment`,message:`Wui-Message`,redirect:`Wui-Redirect`,result:`Wui-Result`,keepOpen:`Wui-Keep-Open`,toastVariant:`Wui-Toast-Variant`,toastAction:`Wui-Toast-Action`,data:`Wui-Data`,next:`Wui-Next`}),d=Object.freeze([`ok`,`validation`,`forbidden`,`client`,`server`,`network`,`aborted`,`stale`,`session`]),f=/* @__PURE__ */ new Set([`GET`,`HEAD`]);function p(e=document){let t=[...e.querySelectorAll(`meta`)].find(e=>e.getAttribute(`name`)===s.metaName),n=t?.getAttribute(`content`);return!t||!n?null:{header:t.getAttribute(`data-header`)||s.header,token:n}}var m=e=>{try{return new URL(e,window.location.href).origin===window.location.origin}catch{return!1}};function h(e){return e>=200&&e<300?`ok`:e===401?`session`:e===403?`forbidden`:e===422?`validation`:e>=400&&e<500?`client`:`server`}var g=e=>typeof e==`object`&&!!e&&`name`in e&&e.name===`AbortError`,_=e=>{if(e==null||e===``)return null;try{return JSON.parse(e)}catch(e){throw TypeError(`The ${u.data} response header is not JSON: ${e instanceof Error?e.message:String(e)}`,{cause:e})}};async function v(e,t={}){let n=(t.method||`GET`).toUpperCase(),r=t.navigate||(e=>window.location.assign(e)),a={Accept:`text/html`,"X-Requested-With":`XMLHttpRequest`,[l]:`1`,...t.headers};if(!f.has(n)&&m(e)){let e=p();e&&(a[e.header]=e.token)}let o=e=>{if(e==null)return null;try{return decodeURIComponent(e)}catch{return e}},s=(e,t=null,n=``)=>{let r=e=>t?.headers.get(e)??null;return{kind:e,ok:e===`ok`,status:t?.status??0,html:n,response:t,message:o(r(u.message)),redirect:r(u.redirect),result:r(u.result),keepOpen:r(u.keepOpen)===`1`,toastVariant:r(u.toastVariant),toastAction:i(r(u.toastAction)),fragment:r(u.fragment)===`1`,data:_(o(r(u.data))),next:r(u.next)}},c;try{c=await fetch(e,{method:n,body:t.body,headers:a,signal:t.signal,credentials:`same-origin`})}catch(e){return s(g(e)||t.signal?.aborted?`aborted`:`network`)}let d=h(c.status);if(d===`ok`&&c.redirected&&c.headers.get(u.fragment)!==`1`&&(d=`session`),d===`session`)return r(c.status===401?c.headers.get(`Location`)||window.location.href:c.url),s(d,c);let v=``;if(d===`ok`||d===`validation`)try{v=await c.text()}catch(e){return s(g(e)||t.signal?.aborted?`aborted`:`network`,c)}return s(d,c,v)}function y(){let e=null,t=0;return{async run(n,r={}){e?.abort();let i=new AbortController;e=i;let a=++t,o=r.signal;o&&(o.aborted?i.abort():o.addEventListener(`abort`,()=>i.abort(),{once:!0}));let s;try{s=await v(n,{...r,signal:i.signal})}finally{e===i&&(e=null)}return a!==t&&s.kind!==`aborted`?{...s,kind:`stale`,ok:!1}:s},abort(){e?.abort(),e=null}}}export{h as a,p as c,i as d,u as i,v as l,o as n,c as o,d as r,y as s,a as t,t as u};

package/dist/{zone-D82f-GU_.js → zone-BR02ZkHF.js}

@@ -1 +1 @@
-var e=`Asia/Kolkata`,t=198e5,n=/* @__PURE__ */ new Map;function r(e){let t=n.get(e);return t||(t=new Intl.DateTimeFormat(`en-US`,{timeZone:e,hourCycle:`h23`,year:`numeric`,month:`2-digit`,day:`2-digit`,hour:`2-digit`,minute:`2-digit`,second:`2-digit`}),n.set(e,t)),t}function i(e){if(typeof e!=`string`||e===``)return!1;try{return r(e),!0}catch{return!1}}function a(n,i=e){if(i===`Asia/Kolkata`){let e=new Date(n+t);return{year:e.getUTCFullYear(),month:e.getUTCMonth(),day:e.getUTCDate(),hour:e.getUTCHours(),minute:e.getUTCMinutes(),second:e.getUTCSeconds()}}let a=Object.fromEntries(r(i).formatToParts(n).map(e=>[e.type,Number(e.value)]));return{year:a.year,month:a.month-1,day:a.day,hour:a.hour%24,minute:a.minute,second:a.second}}function o(n,r=e){if(r===`Asia/Kolkata`)return t;let i=a(n,r),o=/* @__PURE__ */ new Date(0);return o.setUTCFullYear(i.year,i.month,i.day),o.setUTCHours(i.hour,i.minute,i.second,0),o.getTime()-Math.floor(n/1e3)*1e3}function s(t,n=e){let r=t-o(t,n);return r=t-o(r,n),r}var c=e=>e instanceof Date?e.getTime():e;function l(t,n=e){return new Date(t+o(t,n)).toISOString().slice(0,19)}function u(t=e,n=Date.now()){return l(c(n),t).slice(0,10)}export{s as a,l as i,i as n,o,u as r,a as s,e as t};
+var e=`Asia/Kolkata`,t=198e5,n=/* @__PURE__ */ new Map;function r(e){let t=n.get(e);return t||(t=new Intl.DateTimeFormat(`en-US`,{timeZone:e,hourCycle:`h23`,year:`numeric`,month:`2-digit`,day:`2-digit`,hour:`2-digit`,minute:`2-digit`,second:`2-digit`}),n.set(e,t)),t}function i(e){if(typeof e!=`string`||e===``)return!1;try{return r(e),!0}catch{return!1}}function a(n,i=e){if(i===`Asia/Kolkata`){let e=new Date(n+t);return{year:e.getUTCFullYear(),month:e.getUTCMonth(),day:e.getUTCDate(),hour:e.getUTCHours(),minute:e.getUTCMinutes(),second:e.getUTCSeconds()}}let a=Object.fromEntries(r(i).formatToParts(n).map(e=>[e.type,Number(e.value)]));return{year:Number(a.year),month:Number(a.month)-1,day:Number(a.day),hour:Number(a.hour)%24,minute:Number(a.minute),second:Number(a.second)}}function o(n,r=e){if(r===`Asia/Kolkata`)return t;let i=a(n,r),o=/* @__PURE__ */ new Date(0);return o.setUTCFullYear(i.year,i.month,i.day),o.setUTCHours(i.hour,i.minute,i.second,0),o.getTime()-Math.floor(n/1e3)*1e3}function s(t,n=e){let r=t-o(t,n);return r=t-o(r,n),r}var c=e=>e instanceof Date?e.getTime():e;function l(t,n=e){return new Date(t+o(t,n)).toISOString().slice(0,19)}function u(t=e,n=Date.now()){return l(c(n),t).slice(0,10)}export{s as a,l as i,i as n,o,u as r,a as s,e as t};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-elements",
-  "version": "0.148.0",
+  "version": "0.150.0",
   "description": "Webority framework-agnostic UI custom elements (<wui-*>) — the single implementation of the interactive components, styled by @webority/theme. Used natively in Razor and wrapped by @webority/ui-react.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -19,73 +19,223 @@
   "main": "./dist/ui-elements.js",
   "module": "./dist/ui-elements.js",
   "exports": {
-    ".": "./dist/ui-elements.js",
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./dist/ui-elements.js"
+    },
     "./helpers": {
       "types": "./types/helpers.d.ts",
       "default": "./dist/helpers.js"
     },
-    "./server": "./dist/server.js",
-    "./elements/carousel": "./dist/elements/carousel.js",
-    "./elements/code-block": "./dist/elements/code-block.js",
-    "./elements/command-palette": "./dist/elements/command-palette.js",
-    "./elements/comment-thread": "./dist/elements/comment-thread.js",
-    "./elements/consent-banner": "./dist/elements/consent-banner.js",
-    "./elements/context-menu": "./dist/elements/context-menu.js",
-    "./elements/data-table": "./dist/elements/data-table.js",
-    "./elements/date-range": "./dist/elements/date-range.js",
-    "./elements/datepicker": "./dist/elements/datepicker.js",
-    "./elements/dock": "./dist/elements/dock.js",
-    "./elements/drawer": "./dist/elements/drawer.js",
-    "./elements/filter-popover": "./dist/elements/filter-popover.js",
-    "./elements/hover-card": "./dist/elements/hover-card.js",
-    "./elements/image-crop": "./dist/elements/image-crop.js",
-    "./elements/inline-edit": "./dist/elements/inline-edit.js",
-    "./elements/kanban": "./dist/elements/kanban.js",
-    "./elements/lead-popup": "./dist/elements/lead-popup.js",
-    "./elements/lightbox": "./dist/elements/lightbox.js",
-    "./elements/markdown": "./dist/elements/markdown.js",
+    "./server": {
+      "types": "./types/server/index.d.ts",
+      "default": "./dist/server.js"
+    },
+    "./elements/carousel": {
+      "types": "./types/elements/carousel.d.ts",
+      "default": "./dist/elements/carousel.js"
+    },
+    "./elements/code-block": {
+      "types": "./types/elements/code-block.d.ts",
+      "default": "./dist/elements/code-block.js"
+    },
+    "./elements/command-palette": {
+      "types": "./types/elements/command-palette.d.ts",
+      "default": "./dist/elements/command-palette.js"
+    },
+    "./elements/comment-thread": {
+      "types": "./types/elements/comment-thread.d.ts",
+      "default": "./dist/elements/comment-thread.js"
+    },
+    "./elements/consent-banner": {
+      "types": "./types/elements/consent-banner.d.ts",
+      "default": "./dist/elements/consent-banner.js"
+    },
+    "./elements/context-menu": {
+      "types": "./types/elements/context-menu.d.ts",
+      "default": "./dist/elements/context-menu.js"
+    },
+    "./elements/data-table": {
+      "types": "./types/elements/data-table.d.ts",
+      "default": "./dist/elements/data-table.js"
+    },
+    "./elements/date-range": {
+      "types": "./types/elements/date-range.d.ts",
+      "default": "./dist/elements/date-range.js"
+    },
+    "./elements/datepicker": {
+      "types": "./types/elements/datepicker.d.ts",
+      "default": "./dist/elements/datepicker.js"
+    },
+    "./elements/dock": {
+      "types": "./types/elements/dock.d.ts",
+      "default": "./dist/elements/dock.js"
+    },
+    "./elements/drawer": {
+      "types": "./types/elements/drawer.d.ts",
+      "default": "./dist/elements/drawer.js"
+    },
+    "./elements/filter-popover": {
+      "types": "./types/elements/filter-popover.d.ts",
+      "default": "./dist/elements/filter-popover.js"
+    },
+    "./elements/hover-card": {
+      "types": "./types/elements/hover-card.d.ts",
+      "default": "./dist/elements/hover-card.js"
+    },
+    "./elements/image-crop": {
+      "types": "./types/elements/image-crop.d.ts",
+      "default": "./dist/elements/image-crop.js"
+    },
+    "./elements/inline-edit": {
+      "types": "./types/elements/inline-edit.d.ts",
+      "default": "./dist/elements/inline-edit.js"
+    },
+    "./elements/kanban": {
+      "types": "./types/elements/kanban.d.ts",
+      "default": "./dist/elements/kanban.js"
+    },
+    "./elements/lead-popup": {
+      "types": "./types/elements/lead-popup.d.ts",
+      "default": "./dist/elements/lead-popup.js"
+    },
+    "./elements/lightbox": {
+      "types": "./types/elements/lightbox.d.ts",
+      "default": "./dist/elements/lightbox.js"
+    },
+    "./elements/markdown": {
+      "types": "./types/elements/markdown.d.ts",
+      "default": "./dist/elements/markdown.js"
+    },
     "./elements/mention-input": {
       "types": "./types/elements/mention-input.d.ts",
       "default": "./dist/elements/mention-input.js"
     },
-    "./elements/navigation-menu": "./dist/elements/navigation-menu.js",
-    "./elements/notification-center": "./dist/elements/notification-center.js",
-    "./elements/onboarding-checklist": "./dist/elements/onboarding-checklist.js",
-    "./elements/org-tree": "./dist/elements/org-tree.js",
-    "./elements/otp": "./dist/elements/otp.js",
-    "./elements/overflow": "./dist/elements/overflow.js",
-    "./elements/phone": "./dist/elements/phone.js",
-    "./elements/rating": "./dist/elements/rating.js",
-    "./elements/record-pager": "./dist/elements/record-pager.js",
-    "./elements/relative-time": "./dist/elements/relative-time.js",
-    "./elements/resizable": "./dist/elements/resizable.js",
-    "./elements/rolling-number": "./dist/elements/rolling-number.js",
-    "./elements/saved-views": "./dist/elements/saved-views.js",
-    "./elements/select": "./dist/elements/select.js",
-    "./elements/shortcuts": "./dist/elements/shortcuts.js",
-    "./elements/show-more": "./dist/elements/show-more.js",
-    "./elements/slider": "./dist/elements/slider.js",
-    "./elements/sortable": "./dist/elements/sortable.js",
-    "./elements/status-icon": "./dist/elements/status-icon.js",
-    "./elements/timepicker": "./dist/elements/timepicker.js",
+    "./elements/navigation-menu": {
+      "types": "./types/elements/navigation-menu.d.ts",
+      "default": "./dist/elements/navigation-menu.js"
+    },
+    "./elements/notification-center": {
+      "types": "./types/elements/notification-center.d.ts",
+      "default": "./dist/elements/notification-center.js"
+    },
+    "./elements/onboarding-checklist": {
+      "types": "./types/elements/onboarding-checklist.d.ts",
+      "default": "./dist/elements/onboarding-checklist.js"
+    },
+    "./elements/org-tree": {
+      "types": "./types/elements/org-tree.d.ts",
+      "default": "./dist/elements/org-tree.js"
+    },
+    "./elements/otp": {
+      "types": "./types/elements/otp.d.ts",
+      "default": "./dist/elements/otp.js"
+    },
+    "./elements/overflow": {
+      "types": "./types/elements/overflow.d.ts",
+      "default": "./dist/elements/overflow.js"
+    },
+    "./elements/phone": {
+      "types": "./types/elements/phone.d.ts",
+      "default": "./dist/elements/phone.js"
+    },
+    "./elements/rating": {
+      "types": "./types/elements/rating.d.ts",
+      "default": "./dist/elements/rating.js"
+    },
+    "./elements/record-pager": {
+      "types": "./types/elements/record-pager.d.ts",
+      "default": "./dist/elements/record-pager.js"
+    },
+    "./elements/relative-time": {
+      "types": "./types/elements/relative-time.d.ts",
+      "default": "./dist/elements/relative-time.js"
+    },
+    "./elements/resizable": {
+      "types": "./types/elements/resizable.d.ts",
+      "default": "./dist/elements/resizable.js"
+    },
+    "./elements/rolling-number": {
+      "types": "./types/elements/rolling-number.d.ts",
+      "default": "./dist/elements/rolling-number.js"
+    },
+    "./elements/saved-views": {
+      "types": "./types/elements/saved-views.d.ts",
+      "default": "./dist/elements/saved-views.js"
+    },
+    "./elements/select": {
+      "types": "./types/elements/select.d.ts",
+      "default": "./dist/elements/select.js"
+    },
+    "./elements/shortcuts": {
+      "types": "./types/elements/shortcuts.d.ts",
+      "default": "./dist/elements/shortcuts.js"
+    },
+    "./elements/show-more": {
+      "types": "./types/elements/show-more.d.ts",
+      "default": "./dist/elements/show-more.js"
+    },
+    "./elements/slider": {
+      "types": "./types/elements/slider.d.ts",
+      "default": "./dist/elements/slider.js"
+    },
+    "./elements/sortable": {
+      "types": "./types/elements/sortable.d.ts",
+      "default": "./dist/elements/sortable.js"
+    },
+    "./elements/status-icon": {
+      "types": "./types/elements/status-icon.d.ts",
+      "default": "./dist/elements/status-icon.js"
+    },
+    "./elements/timepicker": {
+      "types": "./types/elements/timepicker.d.ts",
+      "default": "./dist/elements/timepicker.js"
+    },
     "./elements/tour": {
       "types": "./types/elements/tour.d.ts",
       "default": "./dist/elements/tour.js"
     },
-    "./elements/tree": "./dist/elements/tree.js",
-    "./elements/truncate": "./dist/elements/truncate.js",
-    "./elements/whats-new": "./dist/elements/whats-new.js",
-    "./elements/wizard": "./dist/elements/wizard.js",
-    "./file-viewer": "./dist/ui-file-viewer.js",
-    "./chart": "./dist/ui-chart.js",
-    "./calendar": "./dist/ui-calendar.js",
-    "./rich-text": "./dist/ui-rich-text.js",
+    "./elements/tree": {
+      "types": "./types/elements/tree.d.ts",
+      "default": "./dist/elements/tree.js"
+    },
+    "./elements/truncate": {
+      "types": "./types/elements/truncate.d.ts",
+      "default": "./dist/elements/truncate.js"
+    },
+    "./elements/whats-new": {
+      "types": "./types/elements/whats-new.d.ts",
+      "default": "./dist/elements/whats-new.js"
+    },
+    "./elements/wizard": {
+      "types": "./types/elements/wizard.d.ts",
+      "default": "./dist/elements/wizard.js"
+    },
+    "./file-viewer": {
+      "types": "./types/fileViewer.d.ts",
+      "default": "./dist/ui-file-viewer.js"
+    },
+    "./chart": {
+      "types": "./types/chart.d.ts",
+      "default": "./dist/ui-chart.js"
+    },
+    "./calendar": {
+      "types": "./types/calendar.d.ts",
+      "default": "./dist/ui-calendar.js"
+    },
+    "./rich-text": {
+      "types": "./types/richText.d.ts",
+      "default": "./dist/ui-rich-text.js"
+    },
+    "./razor-globals": {
+      "types": "./types/razor-js/webority-ui.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": [
     "./dist/*",
     "./dist/elements/*",
-    "./razor-js/**/*.js"
+    "./razor-js/**/*.ts"
   ],
   "dependencies": {},
   "devDependencies": {
@@ -98,9 +248,10 @@
     "@tiptap/extensions": "3.31.4",
     "@tiptap/markdown": "3.31.4",
     "@tiptap/starter-kit": "3.31.4",
+    "@types/node": "25.6.0",
     "@vitest/coverage-v8": "5.1.0",
-    "@webority/markdown-core": "0.148.0",
-    "@webority/theme": "0.148.0",
+    "@webority/markdown-core": "0.150.0",
+    "@webority/theme": "0.150.0",
     "echarts": "6.1.0",
     "jsdom": "30.1.1",
     "libphonenumber-js": "^1.13.9",
@@ -110,9 +261,10 @@
     "vitest": "5.1.0"
   },
   "scripts": {
-    "build": "vite build && vite build -c vite.phone.config.js && vite build -c vite.consent-banner.config.js && vite build -c vite.lead-popup.config.js && vite build -c vite.tour.config.js && vite build -c vite.file-viewer.config.js && vite build -c vite.chart.config.js && vite build -c vite.calendar.config.js && vite build -c vite.rich-text.config.js && node build-global.mjs && vite build -c vite.razor.config.js && node ../../scripts/sync-rcl-assets.mjs elements",
+    "build": "node scripts/check-wui-assembly.ts && tsc -p tsconfig.json && vite build && vite build -c vite.phone.config.ts && vite build -c vite.consent-banner.config.ts && vite build -c vite.lead-popup.config.ts && vite build -c vite.tour.config.ts && vite build -c vite.file-viewer.config.ts && vite build -c vite.chart.config.ts && vite build -c vite.calendar.config.ts && vite build -c vite.rich-text.config.ts && node build-global.ts && vite build -c vite.razor.config.ts && node ../../scripts/sync-rcl-assets.mjs elements && node scripts/emit-types.ts clean && tsc -p tsconfig.build.json && node scripts/emit-types.ts flatten",
+    "typecheck": "tsc -p tsconfig.json",
     "test": "vitest run",
-    "test:razor-js": "vitest run --config vitest.razor-js.config.js",
+    "test:razor-js": "vitest run --config vitest.razor-js.config.ts",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage"
   }

package/types/WuiCalendar.d.ts

@@ -0,0 +1,69 @@
+import type { CalendarEngine, ViewName } from "./calendarAdapter.ts";
+import { type CalendarEvent } from "./calendarModel.ts";
+import { ElementBase } from "./elementBase.ts";
+import type { RequestQueue } from "./server/wuiHttp.ts";
+interface CalendarRange {
+    start: string;
+    end: string;
+    view: string;
+}
+interface CalendarState {
+    view: string;
+    title: string;
+    start: string;
+    end: string;
+    date: string;
+}
+interface CalendarDateInfo {
+    date: string;
+    time: string | null;
+    allDay: boolean;
+}
+interface CalendarParts {
+    toolbar: HTMLDivElement;
+    title: HTMLHeadingElement;
+    views: HTMLDivElement;
+    status: HTMLDivElement;
+    surface: HTMLDivElement;
+}
+export declare class WuiCalendar extends ElementBase {
+    _events: object[] | null;
+    _view: string | null;
+    _queue: RequestQueue;
+    _pendingFocus: string | null;
+    _announced: boolean;
+    _loadedList: boolean | null;
+    _engine: CalendarEngine | null;
+    _parts: CalendarParts | null;
+    _width: number | undefined;
+    _resizeObserver: ResizeObserver | null;
+    static get observedAttributes(): string[];
+    constructor();
+    get events(): object[] | null;
+    set events(v: object[] | null | undefined);
+    get view(): string;
+    set view(v: unknown);
+    get date(): string;
+    set date(v: unknown);
+    /** Ask `events-url` again. */
+    refetch(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    _zone(): string;
+    _readScript(): object[] | null;
+    _requestedView(): ViewName | null;
+    _initialView(): ViewName;
+    _initialDate(): string;
+    _build(): void;
+    _load(range: CalendarRange): Promise<CalendarEvent[]>;
+    _setError(on: boolean): void;
+    _loading(loading: boolean): void;
+    _ranged(state: CalendarState): void;
+    _onToolbar(e: MouseEvent): void;
+    _eventClick(event: CalendarEvent): boolean;
+    _dateClick(info: CalendarDateInfo): void;
+    _onKey(e: KeyboardEvent): void;
+    _resized(): void;
+}
+export {};