@webority/ui-elements 0.54.0 → 0.56.0

package/dist/WuiTour-CUWrh5MD.js

@@ -1,169 +0,0 @@
-import{t as e}from"./elementBase-BlsR4tqa.js";import{n as t,r as n,t as r}from"./anchorOverlay-WcDeH46q.js";import{t as i}from"./tourOpenMark-nPeAJFSo.js";var a=`
-:host {
-    all: initial;
-${Object.entries({"--wui-z-tour":`1550`,"--wui-radius-sm":`8px`,"--wui-radius-lg":`14px`,"--wui-shadow-overlay":`0 8px 28px -6px rgba(7, 20, 55, 0.14)`,"--color-primary":`#4F46E5`,"--color-primary-hover":`#4338CA`,"--color-primary-ink":`#4F46E5`,"--color-focus-ring":`#4F46E5`,"--wui-focus-ring-width":`2px`,"--wui-focus-ring-offset":`2px`,"--color-primary-text":`#FFFFFF`,"--color-scrim-strong":`color-mix(in srgb, #071437 62%, transparent)`,"--color-surface":`#FFFFFF`,"--color-text":`#071437`,"--color-text-muted":`#4B5675`,"--color-border":`#EBEDF3`}).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-primary-text);
-}
-.btn-primary:hover {
-    background: var(--color-primary-hover);
-    border-color: var(--color-primary-hover);
-}
-.btn-outline-secondary {
-    border-color: var(--color-text-muted);
-    color: var(--color-text-muted);
-}
-.btn-outline-secondary:hover {
-    background: var(--color-bg-muted);
-    color: var(--color-text);
-}
-.btn-link {
-    font-weight: 400;
-    color: var(--color-primary-ink);
-    text-decoration: underline;
-}
-.btn-link:hover {
-    color: var(--color-primary-hover);
-}
-
-.wui-tour-layer {
-    position: fixed;
-    inset: 0;
-    z-index: var(--wui-z-tour);
-    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-spot {
-    position: fixed;
-    border-radius: var(--wui-radius-sm);
-    box-shadow:
-        0 0 0 2px var(--color-primary),
-        0 0 0 100vmax var(--color-scrim-strong);
-    pointer-events: none;
-}
-@media (prefers-reduced-motion: no-preference) {
-    .wui-tour-spot {
-        transition:
-            top 160ms ease,
-            left 160ms ease,
-            width 160ms ease,
-            height 160ms ease;
-    }
-}
-.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-overlay);
-    pointer-events: auto;
-}
-.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-position {
-    margin: 0;
-    font-size: 12px;
-    color: var(--color-text-muted);
-}
-.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;
-}
-`,o=`wui-tour-step`,s=`wui-tour-host`,c=`wui-tour-seen:`,l={back:`Back`,next:`Next`,skip:`Skip`,done:`Done`},u={back:`back-label`,next:`next-label`,skip:`skip-label`,done:`done-label`},d=4,f=4,p=0;function m(e=c,t=globalThis.localStorage){return{isSeen:async n=>t.getItem(e+n)===`1`,markSeen:async n=>{t.setItem(e+n,`1`)}}}var h=e=>!e?.isConnected||getComputedStyle(e).visibility===`hidden`?!1:e.getClientRects().length>0,g=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName)),_=()=>{let e=document.activeElement;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e},v=null;function y(e){if(`adoptedStyleSheets`in e&&typeof CSSStyleSheet==`function`&&`replaceSync`in CSSStyleSheet.prototype){v||(v=new CSSStyleSheet,v.replaceSync(a)),e.adoptedStyleSheets=[v];return}let t=document.createElement(`style`);t.textContent=a,e.appendChild(t)}var b=class extends e{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}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 > ${o}`),e=>({target:e.getAttribute(`target`)||``,title:e.getAttribute(`title`)||void 0,description:e.textContent.trim()}))}_store(){return this.seenStore?this.seenStore:this.getAttribute(`seen-store`)===`local`?m():globalThis.window?.WUI?.tour?.seenStore||null}_label(e){return this.getAttribute(u[e])||l[e]}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();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}this._returnFocus=document.activeElement;let n=await this._locate(0,1,e);if(e===this._run){if(!n){this._finish(`noTargets`);return}this._firstIndex=n.index,this._build(),this._show(n)}}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(h(t))return{index:i,target:t}}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-${++p}`,n=document.createElement(`div`);n.className=`wui-tour-layer`,n.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="btn btn-sm btn-outline-secondary wui-tour-back"></button>
-                        <button type="button" class="btn btn-sm btn-primary wui-tour-next"></button>
-                    </div>
-                </div>
-            </div>
-            <div class="visually-hidden" role="status" aria-live="polite"></div>`;let r=n;this._shadow=null,this.isolated&&(r=document.createElement(s),this._shadow=r.attachShadow({mode:`open`}),y(this._shadow),this._shadow.appendChild(n)),document.body.appendChild(r),document.documentElement.setAttribute(i,``),this._outer=r,this._layer=n,this._spot=n.querySelector(`.wui-tour-spot`),this._card=n.querySelector(`.wui-tour-card`),this._live=n.querySelector(`[role=status]`),this._card.querySelector(`.wui-tour-skip`).addEventListener(`click`,()=>this._close(`skipped`)),this._card.querySelector(`.wui-tour-back`).addEventListener(`click`,()=>this._move(-1)),this._card.querySelector(`.wui-tour-next`).addEventListener(`click`,()=>this._move(1)),this._shadow&&this._card.removeAttribute(`aria-modal`),this._onKey=e=>this._key(e),this._onFocusIn=e=>{this._layer&&!this._layer.contains(e.target)&&this._card.focus()},document.addEventListener(`keydown`,this._onKey,!0),this._shadow||document.addEventListener(`focusin`,this._onFocusIn),t(r,()=>this._place())}_active(){return this._shadow?this._shadow.activeElement:document.activeElement}_show(e){this._current=e;let{index:t,target:n}=e,r=this._steps[t],i=this._steps,a=t===i.length-1,o=this._card;o.querySelector(`.wui-tour-position`).textContent=`Step ${t+1} of ${i.length}`;let s=o.querySelector(`.wui-tour-title`);s.textContent=r.title||``,s.hidden=!r.title,o.querySelector(`.wui-tour-text`).textContent=r.description||``,o.querySelector(`.wui-tour-skip`).textContent=this._label(`skip`),o.querySelector(`.wui-tour-back`).textContent=this._label(`back`),o.querySelector(`.wui-tour-back`).hidden=t<=this._firstIndex,o.querySelector(`.wui-tour-next`).textContent=this._label(a?`done`:`next`),this._live.textContent=[`Step ${t+1} of ${i.length}`,r.title,r.description].filter(Boolean).join(`. `),this._scrollTo(n),this._place();let c=this._active();(o.contains(c)?!c.hidden:this._shadow!==null&&g(_()))||o.focus(),this.dispatchEvent(new CustomEvent(`wui-tour:step`,{bubbles:!0,detail:{step:r,index:t}}))}_scrollTo(e){if(!e?.scrollIntoView)return;this._card.style.maxHeight=``;let t=this._card.offsetHeight+f*2;if(e.getBoundingClientRect().height+d*2+t*2<=window.innerHeight){e.scrollIntoView({block:`center`,inline:`nearest`});return}let n=e.style.scrollMarginTop;e.style.scrollMarginTop=`${t+d}px`,e.scrollIntoView({block:`start`,inline:`nearest`}),e.style.scrollMarginTop=n}_place(){if(!this._current||!this._layer)return;let e=this._spot.style,t=this._card.style;if(!this._current.target){e.top=`50%`,e.left=`50%`,e.width=`0px`,e.height=`0px`,e.boxShadow=`0 0 0 100vmax var(--color-scrim-strong)`,this._card.classList.remove(`drop-up`),t.position=`fixed`,t.top=`50%`,t.left=`50%`,t.transform=`translate(-50%, -50%)`,t.maxHeight=`calc(100vh - 16px)`;return}e.boxShadow=``,t.transform=``;let n=this._current.target.getBoundingClientRect(),i={top:n.top-d,left:n.left-d,width:n.width+d*2,height:n.height+d*2,bottom:n.bottom+d,right:n.right+d};e.top=`${i.top}px`,e.left=`${i.left}px`,e.width=`${i.width}px`,e.height=`${i.height}px`;let a=this._card.scrollTop;t.maxHeight=``;let o=this._card.offsetHeight,s=window.innerHeight-f*2,c=Math.max(i.top,window.innerHeight-i.bottom)-f*2,l=Math.min(n.bottom,window.innerHeight)-Math.max(n.top,0);o<=c+1||l<Math.min(o,s)+f*2?r({getBoundingClientRect:()=>i},this._card,{clampHeight:!0}):this._placeOver(n,o,s),this._card.scrollTop=a}_placeOver(e,t,n){let r=this._card;r.classList.remove(`drop-up`),r.style.position=`fixed`,r.style.maxHeight=t>n?`${Math.max(n,0)}px`:``;let i=Math.min(e.bottom,window.innerHeight)-f;r.style.top=`${Math.max(f,i-Math.min(t,n))}px`;let a=Math.min(e.left+f,window.innerWidth-r.offsetWidth-f);r.style.left=`${Math.max(f,a)}px`}async _move(e){this._current&&await this._go(this._current.index+e,e)}async _go(e,t){if(!this._current||this._moving)return;this._moving=!0;let n=this._run;try{let r=await this._locate(e,t,n);if(n!==this._run)return;r?this._show(r):t>0&&await this._close(`finished`)}finally{this._moving=!1}}_key(e){if(!(!this._layer||e.altKey||e.ctrlKey||e.metaKey)){if(e.key===`Escape`)e.preventDefault(),e.stopPropagation(),this._close(`skipped`);else if(e.key===`ArrowRight`||e.key===`ArrowLeft`){if(this._shadow&&g(e.composedPath?.()[0]??e.target))return;e.preventDefault(),e.key===`ArrowRight`?this._move(1):this._current.index>this._firstIndex&&this._move(-1)}else if(e.key===`Tab`&&!this._shadow){let t=Array.from(this._card.querySelectorAll(`button`)).filter(e=>!e.hidden),n=t[0],r=t[t.length-1],i=this._active();!this._card.contains(i)||e.shiftKey&&(i===n||i===this._card)?(e.preventDefault(),(e.shiftKey?r:n).focus()):!e.shiftKey&&i===r&&(e.preventDefault(),n.focus())}}}_teardown(){if(!this._layer)return;document.removeEventListener(`keydown`,this._onKey,!0),document.removeEventListener(`focusin`,this._onFocusIn);let e=!this._shadow||this._shadow.activeElement!==null||!document.activeElement||document.activeElement===document.body;n(this._outer),this._outer.remove(),document.documentElement.removeAttribute(i),this._outer=null,this._shadow=null,this._layer=null,this._current=null;let t=this._returnFocus;this._returnFocus=null,e&&t?.isConnected&&t.focus?.()}async _close(e){let t=this._run;this._teardown();let n=this._store();try{n&&t===this._run&&await n.markSeen(this.tourId)}finally{this._finish(e)}}_finish(e){this._run++,this._running=!1,this.hasAttribute(`open`)&&this.removeAttribute(`open`),this.dispatchEvent(new CustomEvent(`wui-tour:close`,{bubbles:!0,detail:{reason:e}}))}};export{m as n,b as t};