@webority/ui-elements 0.137.1 → 0.138.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{WuiDataTable-BVagEWAU.js → WuiDataTable-XscBy1ct.js} +1 -1
- package/dist/{WuiInlineEdit-C6E6bGpU.js → WuiInlineEdit-CBw0bupF.js} +1 -1
- package/dist/{WuiLightbox-DSRuxbBA.js → WuiLightbox-CDcqNQun.js} +1 -1
- package/dist/{WuiMentionInput-DhJ180iU.js → WuiMentionInput-9iC7Tur2.js} +1 -1
- package/dist/{WuiNotificationCenter-Br_cd0C_.js → WuiNotificationCenter-CClYbyQ2.js} +1 -1
- package/dist/{WuiRelativeTime-CcbKgVjE.js → WuiRelativeTime-BG6rgUhw.js} +1 -1
- package/dist/{WuiRollingNumber-D7uHyeQB.js → WuiRollingNumber-CF3H6l7t.js} +1 -1
- package/dist/WuiTour-D18C-wQP.js +1 -0
- package/dist/{dataTable-CUILMcga.js → dataTable-BGZc5iC1.js} +1 -1
- package/dist/{drawerDiscard-DRTki0-d.js → drawerDiscard-8StN3xcZ.js} +1 -1
- package/dist/elements/data-table.js +1 -1
- package/dist/elements/inline-edit.js +1 -1
- package/dist/elements/kanban.js +1 -1
- package/dist/elements/lightbox.js +1 -1
- package/dist/elements/mention-input.js +1 -1
- package/dist/elements/notification-center.js +1 -1
- package/dist/elements/relative-time.js +1 -1
- package/dist/elements/rolling-number.js +1 -1
- package/dist/elements/tour.js +1 -1
- package/dist/formatters-Ba0CvsTs.js +1 -0
- package/dist/helpers.js +1 -1
- package/dist/{kanban-DqdYQ6sC.js → kanban-D-ljbA4A.js} +1 -1
- package/dist/{notificationDays-CMjhBP1Z.js → notificationDays-dNQZGLlB.js} +1 -1
- package/dist/server.js +1 -1
- package/dist/ui-chart.global.js +2 -2
- package/dist/ui-chart.js +2 -2
- package/dist/ui-elements/autocomplete.global.js +1 -1
- package/dist/ui-elements/carousel.global.js +1 -1
- package/dist/ui-elements/code-block.global.js +1 -1
- package/dist/ui-elements/command-palette.global.js +1 -1
- package/dist/ui-elements/comment-thread.global.js +1 -1
- package/dist/ui-elements/consent-banner.global.js +1 -1
- package/dist/ui-elements/context-menu.global.js +1 -1
- package/dist/ui-elements/date-range.global.js +1 -1
- package/dist/ui-elements/drawer.global.js +1 -1
- package/dist/ui-elements/image-crop.global.js +1 -1
- package/dist/ui-elements/inline-edit.global.js +1 -1
- package/dist/ui-elements/kanban.global.js +1 -1
- package/dist/ui-elements/lead-popup.global.js +1 -1
- package/dist/ui-elements/lightbox.global.js +1 -1
- package/dist/ui-elements/markdown.global.js +1 -1
- package/dist/ui-elements/multiselect.global.js +1 -1
- package/dist/ui-elements/org-tree.global.js +1 -1
- package/dist/ui-elements/phone.global.js +1 -1
- package/dist/ui-elements/resizable.global.js +1 -1
- package/dist/ui-elements/saved-views.global.js +1 -1
- package/dist/ui-elements/slider.global.js +1 -1
- package/dist/ui-elements/sortable.global.js +1 -1
- package/dist/ui-elements/status-icon.global.js +1 -1
- package/dist/ui-elements/taginput.global.js +1 -1
- package/dist/ui-elements/timepicker.global.js +1 -1
- package/dist/ui-elements/tour.global.js +1 -1
- package/dist/ui-elements/tree.global.js +1 -1
- package/dist/ui-elements/wizard.global.js +1 -1
- package/dist/ui-elements.global.js +26 -26
- package/dist/ui-elements.js +1 -1
- package/dist/ui-tour.global.js +1 -1
- package/package.json +2 -2
- package/dist/WuiTour-ClCXfOtI.js +0 -1
- package/dist/formatters-D1zbsEJJ.js +0 -1
package/dist/ui-elements.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{n as e}from"./elementBase-DV9IZZCu.js";import{n as ee}from"./filterPopover-C8MVAfyI.js";import{c as t}from"./kanban-
|
|
1
|
+
import{n as e}from"./elementBase-DV9IZZCu.js";import{n as ee}from"./filterPopover-C8MVAfyI.js";import{c as t}from"./kanban-D-ljbA4A.js";import{n}from"./statusIcons-Dt2ZVJyk.js";import{t as r}from"./WuiAutocomplete-178HkRe4.js";import{t as i}from"./WuiCarousel-C2NWcFxr.js";import{t as a}from"./WuiCodeBlock-vV4v7-c7.js";import{t as o}from"./WuiCommandPalette-CtF31Bbo.js";import{i as s}from"./WuiCommentThread-ZXxBt71o.js";import{t as c}from"./WuiConsentBanner-CYOU67bp.js";import{t as l}from"./WuiContextMenu-BvDHn1cP.js";import{t as u}from"./WuiCountrySelect-Df9BRrCI.js";import{t as d}from"./WuiDataTable-XscBy1ct.js";import{t as f}from"./WuiDatePicker-sq_13WUI.js";import{t as p}from"./WuiDateRange-D0JjHJpa.js";import{t as m}from"./WuiDock-Bd2ijOaJ.js";import{t as h}from"./WuiDrawer-BJ8zqtQ2.js";import{t as g}from"./WuiHoverCard-sq6EZZYD.js";import{t as _}from"./WuiImageCrop-DzzzPagi.js";import{i as v}from"./WuiInlineEdit-CBw0bupF.js";import{t as y}from"./WuiLeadPopup-CWv93qlo.js";import{t as b}from"./WuiLightbox-CDcqNQun.js";import{t as x}from"./WuiMarkdown-DmgLFkB-.js";import{i as S}from"./WuiMentionInput-9iC7Tur2.js";import{t as C}from"./WuiMultiSelect-nHensvLa.js";import{t as w}from"./WuiNavigationMenu-CGqTADvr.js";import{t as T}from"./WuiNotificationCenter-CClYbyQ2.js";import{t as E}from"./WuiOnboardingChecklist-DXUETu1h.js";import{t as D}from"./WuiOrgTree-DuaBtFl9.js";import{t as O}from"./WuiOtp-BqWijfNj.js";import{t as k}from"./WuiOverflow-Bn68qgAQ.js";import{t as A}from"./WuiPhone-C1t2nZvd.js";import{t as j}from"./WuiRating-DhhqYj5Z.js";import{t as M}from"./WuiRecordPager-BOaFcs_W.js";import{t as N}from"./WuiRelativeTime-BG6rgUhw.js";import{t as P}from"./WuiResizable-mt9EMhjQ.js";import{t as F}from"./WuiRollingNumber-CF3H6l7t.js";import{t as I}from"./WuiSavedViews-KUVaYmGJ.js";import{t as L}from"./WuiSelect-1TmFVLek.js";import{t as R}from"./WuiShortcuts-Cerbe67I.js";import{t as z}from"./WuiShowMore-D3VHRZJg.js";import{t as B}from"./WuiSlider-2kB__6zU.js";import{t as V}from"./WuiSortable-r5iZtzM1.js";import{t as H}from"./WuiTagInput-Dkw2q0KS.js";import{t as U}from"./WuiTimePicker-BcH9_gEm.js";import{t as W}from"./WuiTour-D18C-wQP.js";import{t as G}from"./WuiTree-BFm_hpSK.js";import{t as K}from"./WuiTruncate-DyDQWMBu.js";import{n as q,t as J}from"./WuiWhatsNew-Biolggw8.js";import{n as Y,t as X}from"./WuiWizardStep-LecF3VY7.js";import{c as Z,f as Q,l as te,m as ne,p as re,s as ie,u as ae}from"./formatters-Ba0CvsTs.js";import{_ as oe,r as se}from"./themeTransition-rHRVbhHB.js";import{t as ce}from"./drawerDiscard-8StN3xcZ.js";import{i as le}from"./shortcutKeys-CvxSh3bV.js";function $(){ee(),e(`wui-select`,L),e(`wui-saved-views`,I),e(`wui-country-select`,u),e(`wui-phone`,A),e(`wui-datepicker`,f),e(`wui-date-range`,p),e(`wui-dock`,m),e(`wui-image-crop`,_),e(`wui-kanban`,t),e(`wui-lead-popup`,y),e(`wui-inline-edit`,v),e(`wui-consent-banner`,c),e(`wui-slider`,B),e(`wui-sortable`,V),e(`wui-timepicker`,U),e(`wui-tour`,W),e(`wui-tree`,G),e(`wui-org-tree`,D),e(`wui-autocomplete`,r),e(`wui-command-palette`,o),e(`wui-context-menu`,l),e(`wui-multiselect`,C),e(`wui-taginput`,H),e(`wui-otp`,O),e(`wui-status-icon`,n),e(`wui-shortcuts`,R),e(`wui-record-pager`,M),e(`wui-carousel`,i),e(`wui-code-block`,a),e(`wui-markdown`,x),e(`wui-data-table`,d),e(`wui-drawer`,h),e(`wui-hover-card`,g),e(`wui-lightbox`,b),e(`wui-navigation-menu`,w),e(`wui-notification-center`,T),e(`wui-onboarding-checklist`,E),e(`wui-overflow`,k),e(`wui-rating`,j),e(`wui-relative-time`,N),e(`wui-resizable`,P),e(`wui-rolling-number`,F),e(`wui-show-more`,z),e(`wui-truncate`,K),e(`wui-whats-new`,q),e(`wui-mention-input`,S),e(`wui-comment-thread`,s),e(`wui-wizard-step`,X),e(`wui-wizard`,Y)}$();export{ce as DISCARD_EVENT,oe as ROW_DROP_EVENT,le as SHORTCUT_EVENT,se as THEME_CHANGE_EVENT,J as WHATS_NEW_READ_EVENT,r as WuiAutocomplete,i as WuiCarousel,a as WuiCodeBlock,o as WuiCommandPalette,s as WuiCommentThread,c as WuiConsentBanner,l as WuiContextMenu,u as WuiCountrySelect,d as WuiDataTable,f as WuiDatePicker,p as WuiDateRange,m as WuiDock,h as WuiDrawer,g as WuiHoverCard,_ as WuiImageCrop,v as WuiInlineEdit,t as WuiKanban,y as WuiLeadPopup,b as WuiLightbox,x as WuiMarkdown,S as WuiMentionInput,C as WuiMultiSelect,w as WuiNavigationMenu,T as WuiNotificationCenter,E as WuiOnboardingChecklist,D as WuiOrgTree,O as WuiOtp,k as WuiOverflow,A as WuiPhone,j as WuiRating,M as WuiRecordPager,N as WuiRelativeTime,P as WuiResizable,F as WuiRollingNumber,I as WuiSavedViews,L as WuiSelect,R as WuiShortcuts,z as WuiShowMore,B as WuiSlider,V as WuiSortable,n as WuiStatusIcon,H as WuiTagInput,U as WuiTimePicker,W as WuiTour,G as WuiTree,K as WuiTruncate,q as WuiWhatsNew,Y as WuiWizard,X as WuiWizardStep,$ as defineWeborityElements,ie as formatCompact,Z as formatCurrency,te as formatDate,ae as formatDateTime,Q as formatNumber,re as formatPercent,ne as formatValue};
|
package/dist/ui-tour.global.js
CHANGED
|
@@ -1 +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.target instanceof Node&&typeof e.contains==`function`&&e.contains(n.target)||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={primary:`btn-primary`,soft:`btn-soft-primary`,outline:`btn-outline-primary`,ghost:`btn-ghost-primary`,text:`btn-link-primary`,danger:`btn-danger`,success:`btn-success`,"outline-danger":`btn-outline-danger`,light:`btn-neutral`,warning:`btn-warning`,neutral:`btn-soft-neutral`,"outline-light":`btn-glass`,"outline-secondary":`btn-outline-neutral`};function o(e=`primary`,t=`md`){let n=a[e];if(!n)throw Error(`buttonClass: unknown variant "${e}"`);return t===`md`?`btn ${n}`:`btn ${n} btn-${t}`}var s=`data-advance`,c=`wui-tour-hint`,l=`Click {actionName} to continue.`,u=`a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]`,d=(e,t)=>e?.advanceOn===`click`&&!!t,f=e=>(e??``).replace(/\s+/g,` `).trim();function p(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=f(e);if(t)return t}return``}function m(e){for(let t of[e,...e.querySelectorAll(u)])if(t.tabIndex>=0&&!t.disabled)return t;return null}function h(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(`.${c}`),r=e.querySelector(`.wui-tour-text`)?.id,i=r?`${r.replace(/-text$/,``)}-hint`:``;t?(n||(n=e.ownerDocument.createElement(`p`),n.className=c,i&&(n.id=i),e.querySelector(`.wui-tour-actions`).before(n)),n.textContent=t,i&&h(e,i,!0)):(n?.remove(),i&&h(e,i,!1))}var te=e=>getComputedStyle(e).animationName;function g(e,{layer:t,spot:n,card:r},i,a){let o=d(i,a);t.toggleAttribute(s,o&&!(t.getRootNode()instanceof ShadowRoot)),n.hasAttribute(s)&&(n.removeAttribute(s),o&&te(n)),o&&n.setAttribute(s,``);let c=r.querySelector(`.wui-tour-next`);c.classList.toggle(`btn-primary`,!o),c.classList.toggle(`btn-link`,o);let u=o?f(i.actionLabel)||p(a):``,m=e.getAttribute(`advance-label`)||l,h=u?m.replace(/\{actionName\}/g,()=>u):``;return ee(r,h),h}function ne(e,t,n){if(!d(e,t))return()=>{};let r=null,i=()=>{r??=setTimeout(n,0)};return t.addEventListener(`click`,i),()=>{t.removeEventListener(`click`,i),clearTimeout(r)}}function _(e,t,n,r){return e.contains(r)||d(t,n)&&n.contains(r)}function v(e,{card:t,active:n,step:r,target:i}){let a=Array.from(t.querySelectorAll(`button`)).filter(e=>!e.hidden),o=d(r,i)?m(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 re=2/3,ie=1e3,ae=new Set([`top`,`left`,`width`,`height`]),y=new WeakMap,b=(e,t)=>typeof e.getAnimations==`function`?e.getAnimations().filter(t):[],x=e=>e.transitionProperty===`opacity`,S=e=>ae.has(e.transitionProperty),C=e=>typeof e.animationName==`string`&&e.animationName.startsWith(`wui-tour-`);function w(e){return e.length===0?null:new Promise(t=>{let n=setTimeout(t,ie);Promise.allSettled(e.map(e=>e.finished)).then(()=>{clearTimeout(n),t()})})}function T(e){let t=e.parentElement?.querySelector(`:scope > .wui-tour-spot`),n=0;for(let e of t?b(t,S):[]){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*re-r)}return n}function E(e){let t=T(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={};y.set(e,n);let r=()=>{y.get(e)===n&&e.dataset.state===`entering`&&(e.dataset.state=`shown`)},i=b(e,C);i.length===0?r():Promise.allSettled(i.map(e=>e.finished)).then(r)}function D(e){return e.dataset.state=`leaving`,w(b(e,x))}function oe(e){let t=e.classList.contains(`wui-tour-layer`)?e:e.shadowRoot?.querySelector(`.wui-tour-layer`);t&&(t.dataset.state=`leaving`);let n=t?w(b(t,x)):null;n?(e.setAttribute(`inert`,``),n.then(()=>e.remove())):e.remove()}var se=2,O=12,k=8,A=4,j=20,ce=`(max-width: 575.98px)`,le=[`bottom`,`top`,`right`,`left`],M=[`top-left`,`top-right`,`bottom-right`,`bottom-left`],N,P=(e,t,n)=>Math.max(t,Math.min(e,n)),F=(e,t,n,r)=>(Math.max(e,n)+Math.min(t,r))/2;function I(e,t){if(!t?.scrollIntoView)return;e.style.maxHeight=``;let n=H(e),r=e.offsetHeight+O;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+se}px`,t.scrollIntoView({block:`start`,inline:`nearest`}),t.style.scrollMarginTop=i}function L(e,t,n){let r=e.style,i=t.style,a=U(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 M)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`,R(r,n);let s=t.scrollTop;i.maxHeight=``;let c={width:t.offsetWidth,height:t.offsetHeight},l=H(t),u=l.bottom-l.top,d={bottom:l.bottom-o.bottom-O,top:o.top-O-l.top,right:l.right-o.right-O,left:o.left-O-l.left},f=window.matchMedia(ce).matches,p=le.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+k)-Math.max(o.top,l.top-k);p?z(t,a,p,o,l,c):m>=Math.min(c.height,u)+8?B(t,a,o,l,c):V(t,a,d.bottom>=d.top?`bottom`:`top`,o,l,c,d),t.scrollTop=s}function R(e,t){N??=CSS.supports(`corner-top-left-shape`,`squircle`);let n=getComputedStyle(t);for(let t of M)e.setProperty(`border-${t}-radius`,n.getPropertyValue(`border-${t}-radius`)),N&&e.setProperty(`corner-${t}-shape`,n.getPropertyValue(`corner-${t}-shape`))}function z(e,t,n,r,i,a){let o=n===`top`||n===`bottom`,s,c,l;if(o){let e=F(r.left,r.right,i.left,i.right);s=P(e-a.width/2,i.left,i.right-a.width),c=n===`bottom`?r.bottom+O:r.top-O-a.height,l=P(e-s,j,a.width-j)}else{let e=F(r.top,r.bottom,i.top,i.bottom);c=P(e-a.height/2,i.top,i.bottom-a.height),s=n===`right`?r.right+O:r.left-O-a.width,l=P(e-c,j,a.height-j)}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 B(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)-A;e.style.top=`${Math.max(r.top,o-Math.min(i.height,a))}px`,e.style.left=`${P(n.left+A,r.left,r.right-i.width)}px`}function V(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+O:r.top-O-c}px`;let l=F(r.left,r.right,i.left,i.right);e.style.left=`${P(l-a.width/2,i.left,i.right-a.width)}px`}function H(e){let t=e.parentElement,n=t?getComputedStyle(t):null,r=e=>Number.parseFloat(n?.[e])||0;return{top:r(`paddingTop`)+k,bottom:window.innerHeight-r(`paddingBottom`)-k,left:r(`paddingLeft`)+k,right:window.innerWidth-r(`paddingRight`)-k}}function U(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 W=0;function ue(e,t,n){let r=`wui-tour-end-${++W}`,a=e.createElement(`div`);return a.className=`wui-tour-card wui-tour-end`,a.dataset.layout=`center`,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"><button type="button" class="${o(`primary`,`sm`)} wui-tour-end-button" data-wui="${i}"></button></div>`,a.querySelector(`.wui-tour-end-title`).textContent=t.title,a.querySelector(`.wui-tour-end-message`).textContent=t.message,a.querySelector(`.wui-tour-end-button`).textContent=t.button,a}function de(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=ue(r,t,i),l=c.querySelector(`.wui-tour-end-button`),u=new AbortController;return new Promise(d=>{let f=()=>{u.abort(),d()};if(n?.aborted){f();return}let p={signal:u.signal};n?.addEventListener(`abort`,f,p),l.addEventListener(`click`,f,p),r.addEventListener(`keydown`,e=>{e.altKey||e.ctrlKey||e.metaKey||(e.key===`Escape`?(e.preventDefault(),e.stopPropagation(),f()):e.key===`Tab`&&i&&(e.preventDefault(),l.focus()))},{capture:!0,signal:u.signal}),i&&r.addEventListener(`focusin`,e=>{c.contains(e.target)||l.focus()},p);let m=()=>{u.signal.aborted||(a.hidden=!0,L(o,a,null),e.append(c),E(c),s.textContent=[t.title,t.message].filter(Boolean).join(`. `),l.focus())},h=D(a);h?h.then(m):m()})}var fe=` :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 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-media=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); } @keyframes wui-tour-pulse { from { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 85%, transparent); } to { box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-primary) 0%, transparent); } } @media (prefers-reduced-motion: no-preference) { .wui-tour-spot[data-advance]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; pointer-events: none; animation: wui-tour-pulse 600ms var(--wui-ease-out) var(--wui-tour-spot-duration); } } @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-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-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`,pe=`wui-tour-media-toggle`,K=`http://www.w3.org/2000/svg`,me=`M6 5h4v14H6zM14 5h4v14h-4z`,he=`M8 5v14l11-7z`,ge={pause:`Pause animation`,play:`Play animation`},_e=()=>globalThis.matchMedia?.(`(prefers-reduced-motion: reduce)`)?.matches===!0;function ve(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 ye(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 be(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 xe(e,t){let n=document.createElement(`button`);n.type=`button`,n.className=pe;let r=(r=!e.paused)=>{n.setAttribute(`aria-label`,r?t.pause:t.play),n.replaceChildren(ve(r?me:he))};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 Se(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 Ce(e,t,n=ge){if(Se(e),!t.media){e.removeAttribute(`data-media`);return}let r=document.createElement(`div`);if(r.className=G,t.mediaType===`video`){let e=be(t,!_e());r.append(e,xe(e,n))}else r.appendChild(ye(t));e.prepend(r),e.setAttribute(`data-media`,t.target?`step`:`welcome`)}var q=`data-wui-tour-open`,we=`Step {current} of {total}`;function Te(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 Ee(e,t,n){return(e.getAttribute(`progress-label`)||we).replace(/\{(current|total)\}/g,(e,r)=>String(r===`current`?t:n))}function De(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 Oe=`wui-tour-step`,ke=`wui-tour-host`,Ae=`wui-tour-seen:`,J=`data-tracking`,je={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`},Y={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`},Me=[[`media`,`media`],[`mediaAlt`,`media-alt`],[`mediaPoster`,`media-poster`],[`mediaType`,`media-type`],[`advanceOn`,`advance-on`],[`actionLabel`,`action-label`]],X={index:null,position:null,total:null},Ne=0;function Pe(e=Ae,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)),Fe=()=>{let e=document.activeElement;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e},$=null;function Ie(e){$||($=new CSSStyleSheet,$.replaceSync(fe)),e.adoptedStyleSheets=[$]}var Le=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 > ${Oe}`),e=>{let t={target:e.getAttribute(`target`)||``,title:e.getAttribute(`title`)||void 0,description:e.textContent.trim()};for(let[n,r]of Me)e.hasAttribute(r)&&(t[n]=e.getAttribute(r));return t})}_store(){return this.seenStore?this.seenStore:this.getAttribute(`seen-store`)===`local`?Pe():globalThis.window?.WUI?.tour?.seenStore||null}_label(e){return this.getAttribute(Y[e])||je[e]}_endDialogText(){return this.getAttribute(`end-dialog`)===`false`?null:{title:this._label(`endTitle`),message:this._label(`endMessage`),button:this._label(`endButton`)}}_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=Te(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-${++Ne}`,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="${o(`outline-secondary`,`sm`)} wui-tour-back" data-wui="${i}"></button> <button type="button" class="${o(`primary`,`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(ke),this._shadow=r.attachShadow({mode:`open`}),Ie(this._shadow),this._shadow.appendChild(t)),document.body.appendChild(r),document.documentElement.setAttribute(q,``),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;_(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=Ee(this,a,o);De(i,{text:c,position:a,total:o}),Ce(i,r,{pause:this._label(`mediaPause`),play:this._label(`mediaPlay`)});let l=g(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,I(i,n),this._spot.removeAttribute(J),this._place(),E(i),this._unbindAdvance?.(),this._unbindAdvance=ne(r,n,()=>this._move(1));let f=this._active();(i.contains(f)?!f.hidden:this._shadow!==null&&Q(Fe()))||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&&L(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(J,``)}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=D(this._card);if(e&&await e,n!==this._run)return;this._show(r)}else if(t>0){let e=this._endDialogText();if(e&&await this._showEnd(e),n!==this._run)return;await this._close(`finished`)}}finally{this._moving=!1}}_showEnd(e){return this._unbindAdvance?.(),this._unbindAdvance=null,g(this,{layer:this._layer,spot:this._spot,card:this._card},null,null),this._spot.removeAttribute(J),this._ending=new AbortController,this._seenMark=this._markSeen(`finished`),de(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;v(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),oe(this._outer),document.documentElement.removeAttribute(q),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();try{n===this._run&&await(a??this._markSeen(e))}finally{this._finish(e,i,t)}}_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}}))}},Re=class extends t{constructor(){super(),this.shadowRoot||this.attachShadow({mode:`open`})}};e(`wui-tour`,Le),e(`wui-tour-step`,Re)})();
|
|
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.target instanceof Node&&typeof e.contains==`function`&&e.contains(n.target)||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={primary:`btn-primary`,soft:`btn-soft-primary`,outline:`btn-outline-primary`,ghost:`btn-ghost-primary`,text:`btn-link-primary`,danger:`btn-danger`,success:`btn-success`,"outline-danger":`btn-outline-danger`,light:`btn-neutral`,warning:`btn-warning`,neutral:`btn-soft-neutral`,"outline-light":`btn-glass`,"outline-secondary":`btn-outline-neutral`};function o(e=`primary`,t=`md`){let n=a[e];if(!n)throw Error(`buttonClass: unknown variant "${e}"`);return t===`md`?`btn ${n}`:`btn ${n} btn-${t}`}var s=`data-advance`,c=`wui-tour-hint`,l=`wui-tour-pointer`,u=`Click {actionName} to continue.`,d=`a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]`,f=(e,t)=>e?.advanceOn===`click`&&!!t,p=e=>(e??``).replace(/\s+/g,` `).trim();function m(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=p(e);if(t)return t}return``}function h(e){for(let t of[e,...e.querySelectorAll(d)])if(t.tabIndex>=0&&!t.disabled)return t;return null}function g(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 _(e,t){let n=e.querySelector(`.${c}`),r=e.querySelector(`.wui-tour-text`)?.id,i=r?`${r.replace(/-text$/,``)}-hint`:``;t?(n||(n=e.ownerDocument.createElement(`p`),n.className=c,i&&(n.id=i),e.querySelector(`.wui-tour-actions`).before(n)),n.textContent=t,i&&g(e,i,!0)):(n?.remove(),i&&g(e,i,!1))}function ee(e,t){let n=e.querySelector(`.${l}`);if(!t){n?.remove();return}if(n)return;let r=e.ownerDocument.createElement(`span`);r.className=l,r.setAttribute(`aria-hidden`,`true`),e.append(r)}var te=e=>getComputedStyle(e).animationName;function v(e,{layer:t,spot:n,card:r},i,a){let o=f(i,a);t.toggleAttribute(s,o&&!(t.getRootNode()instanceof ShadowRoot)),n.hasAttribute(s)&&(n.removeAttribute(s),o&&te(n)),o&&n.setAttribute(s,``),ee(n,o);let c=r.querySelector(`.wui-tour-next`);c.classList.toggle(`btn-primary`,!o),c.classList.toggle(`btn-link`,o);let l=o?p(i.actionLabel)||m(a):``,d=e.getAttribute(`advance-label`)||u,h=l?d.replace(/\{actionName\}/g,()=>l):``;return _(r,h),h}function ne(e,t,n){if(!f(e,t))return()=>{};let r=null,i=()=>{r??=setTimeout(n,0)};return t.addEventListener(`click`,i),()=>{t.removeEventListener(`click`,i),clearTimeout(r)}}function y(e,t,n,r){return e.contains(r)||f(t,n)&&n.contains(r)}function b(e,{card:t,active:n,step:r,target:i}){let a=Array.from(t.querySelectorAll(`button`)).filter(e=>!e.hidden),o=f(r,i)?h(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 re=2/3,ie=1e3,ae=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=>ae.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,ie);Promise.allSettled(e.map(e=>e.finished)).then(()=>{clearTimeout(n),t()})})}function D(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*re-r)}return n}function O(e){let t=D(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 k(e){return e.dataset.state=`leaving`,E(S(e,C))}function oe(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 se=2,A=12,j=8,M=4,N=20,ce=`(max-width: 575.98px)`,le=[`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+se}px`,t.scrollIntoView({block:`start`,inline:`nearest`}),t.style.scrollMarginTop=i}function z(e,t,n){let r=e.style,i=t.style,a=ue(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(ce).matches,p=le.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 ue(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 de=0,fe=`btn btn-sm btn-link`;function pe(e,t,n){let r=`wui-tour-end-${++de}`,a=!!(t.nextLabel&&t.nextHref),s=e.createElement(`div`);if(s.className=`wui-tour-card wui-tour-end`,s.dataset.layout=`center`,a&&(s.dataset.next=``),s.setAttribute(`role`,`dialog`),n&&s.setAttribute(`aria-modal`,`true`),s.tabIndex=-1,s.setAttribute(`aria-labelledby`,`${r}-title`),s.setAttribute(`aria-describedby`,`${r}-message`),s.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="${o(`primary`,`sm`)} wui-tour-end-next" data-wui="${i}"></a>`:``}<button type="button" class="${a?fe:o(`primary`,`sm`)} wui-tour-end-button" data-wui="${i}"></button></div>`,s.querySelector(`.wui-tour-end-title`).textContent=t.title,s.querySelector(`.wui-tour-end-message`).textContent=t.message,s.querySelector(`.wui-tour-end-button`).textContent=t.button,a){let e=s.querySelector(`.wui-tour-end-next`);e.textContent=t.nextLabel,e.setAttribute(`href`,t.nextHref)}return s}var me=e=>e.button===0&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey&&!e.altKey;function he(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=pe(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=>{me(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),O(c),s.textContent=[t.title,t.message].filter(Boolean).join(`. `),d[0].focus())},_=k(a);_?_.then(g):g()})}var ge=` :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`,_e=`wui-tour-media-toggle`,K=`http://www.w3.org/2000/svg`,ve=`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=_e;let r=(r=!e.paused)=>{n.setAttribute(`aria-label`,r?t.pause:t.play),n.replaceChildren(Se(r?ve: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 q=`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:`,J=`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`]],Y={index:null,position:null,total:null},X=0;function Re(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)),ze=()=>{let e=document.activeElement;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e},$=null;function Be(e){$||($=new CSSStyleSheet,$.replaceSync(ge)),e.adoptedStyleSheets=[$]}var Ve=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`?Re():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-${++X}`,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="${o(`outline-secondary`,`sm`)} wui-tour-back" data-wui="${i}"></button> <button type="button" class="${o(`primary`,`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`}),Be(this._shadow),this._shadow.appendChild(t)),document.body.appendChild(r),document.documentElement.setAttribute(q,``),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;y(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(J),this._place(),O(i),this._unbindAdvance?.(),this._unbindAdvance=ne(r,n,()=>this._move(1));let f=this._active();(i.contains(f)?!f.hidden:this._shadow!==null&&Q(ze()))||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(J,``)}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=k(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(J),this._ending=new AbortController,this._seenMark=this._markSeen(`finished`),he(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;b(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),oe(this._outer),document.documentElement.removeAttribute(q),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()}:Y,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=Y,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}}))}},He=class extends t{constructor(){super(),this.shadowRoot||this.attachShadow({mode:`open`})}};e(`wui-tour`,Ve),e(`wui-tour-step`,He)})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/ui-elements",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.138.0",
|
|
4
4
|
"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.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"type": "module",
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
"@tiptap/markdown": "3.31.4",
|
|
104
104
|
"@tiptap/starter-kit": "3.31.4",
|
|
105
105
|
"@vitest/coverage-v8": "5.0.1",
|
|
106
|
-
"@webority/markdown-core": "0.
|
|
106
|
+
"@webority/markdown-core": "0.138.0",
|
|
107
107
|
"echarts": "6.1.0",
|
|
108
108
|
"jsdom": "30.1.1",
|
|
109
109
|
"libphonenumber-js": "^1.13.9",
|
package/dist/WuiTour-ClCXfOtI.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{n as e,r as t}from"./anchorOverlay-CBMAnDUt.js";import{n,t as r}from"./buttonClass-DpG9WzgJ.js";import{t as i}from"./elementBase-DV9IZZCu.js";import{t as a}from"./tourOpenMark-nPeAJFSo.js";var o=`data-advance`,s=`wui-tour-hint`,c=`Click {actionName} to continue.`,l=`a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]`,u=(e,t)=>e?.advanceOn===`click`&&!!t,d=e=>(e??``).replace(/\s+/g,` `).trim();function f(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=d(e);if(t)return t}return``}function p(e){for(let t of[e,...e.querySelectorAll(l)])if(t.tabIndex>=0&&!t.disabled)return t;return null}function m(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 h(e,t){let n=e.querySelector(`.${s}`),r=e.querySelector(`.wui-tour-text`)?.id,i=r?`${r.replace(/-text$/,``)}-hint`:``;t?(n||(n=e.ownerDocument.createElement(`p`),n.className=s,i&&(n.id=i),e.querySelector(`.wui-tour-actions`).before(n)),n.textContent=t,i&&m(e,i,!0)):(n?.remove(),i&&m(e,i,!1))}var ee=e=>getComputedStyle(e).animationName;function g(e,{layer:t,spot:n,card:r},i,a){let s=u(i,a);t.toggleAttribute(o,s&&!(t.getRootNode()instanceof ShadowRoot)),n.hasAttribute(o)&&(n.removeAttribute(o),s&&ee(n)),s&&n.setAttribute(o,``);let l=r.querySelector(`.wui-tour-next`);l.classList.toggle(`btn-primary`,!s),l.classList.toggle(`btn-link`,s);let p=s?d(i.actionLabel)||f(a):``,m=e.getAttribute(`advance-label`)||c,g=p?m.replace(/\{actionName\}/g,()=>p):``;return h(r,g),g}function _(e,t,n){if(!u(e,t))return()=>{};let r=null,i=()=>{r??=setTimeout(n,0)};return t.addEventListener(`click`,i),()=>{t.removeEventListener(`click`,i),clearTimeout(r)}}function te(e,t,n,r){return e.contains(r)||u(t,n)&&n.contains(r)}function ne(e,{card:t,active:n,step:r,target:i}){let a=Array.from(t.querySelectorAll(`button`)).filter(e=>!e.hidden),o=u(r,i)?p(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 v=2/3,y=1e3,re=/* @__PURE__ */ new Set([`top`,`left`,`width`,`height`]),b=/* @__PURE__ */ new WeakMap,x=(e,t)=>typeof e.getAnimations==`function`?e.getAnimations().filter(t):[],S=e=>e.transitionProperty===`opacity`,ie=e=>re.has(e.transitionProperty),ae=e=>typeof e.animationName==`string`&&e.animationName.startsWith(`wui-tour-`);function C(e){return e.length===0?null:new Promise(t=>{let n=setTimeout(t,y);Promise.allSettled(e.map(e=>e.finished)).then(()=>{clearTimeout(n),t()})})}function oe(e){let t=e.parentElement?.querySelector(`:scope > .wui-tour-spot`),n=0;for(let e of t?x(t,ie):[]){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*v-r)}return n}function w(e){let t=oe(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={};b.set(e,n);let r=()=>{b.get(e)===n&&e.dataset.state===`entering`&&(e.dataset.state=`shown`)},i=x(e,ae);i.length===0?r():Promise.allSettled(i.map(e=>e.finished)).then(r)}function T(e){return e.dataset.state=`leaving`,C(x(e,S))}function se(e){let t=e.classList.contains(`wui-tour-layer`)?e:e.shadowRoot?.querySelector(`.wui-tour-layer`);t&&(t.dataset.state=`leaving`);let n=t?C(x(t,S)):null;n?(e.setAttribute(`inert`,``),n.then(()=>e.remove())):e.remove()}var E=2,D=12,O=8,k=4,A=20,ce=`(max-width: 575.98px)`,le=[`bottom`,`top`,`right`,`left`],j=[`top-left`,`top-right`,`bottom-right`,`bottom-left`],M,N=(e,t,n)=>Math.max(t,Math.min(e,n)),P=(e,t,n,r)=>(Math.max(e,n)+Math.min(t,r))/2;function F(e,t){if(!t?.scrollIntoView)return;e.style.maxHeight=``;let n=V(e),r=e.offsetHeight+D;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+E}px`,t.scrollIntoView({block:`start`,inline:`nearest`}),t.style.scrollMarginTop=i}function I(e,t,n){let r=e.style,i=t.style,a=H(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 j)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`,L(r,n);let s=t.scrollTop;i.maxHeight=``;let c={width:t.offsetWidth,height:t.offsetHeight},l=V(t),u=l.bottom-l.top,d={bottom:l.bottom-o.bottom-D,top:o.top-D-l.top,right:l.right-o.right-D,left:o.left-D-l.left},f=window.matchMedia(ce).matches,p=le.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+O)-Math.max(o.top,l.top-O);p?R(t,a,p,o,l,c):m>=Math.min(c.height,u)+8?z(t,a,o,l,c):B(t,a,d.bottom>=d.top?`bottom`:`top`,o,l,c,d),t.scrollTop=s}function L(e,t){M??=CSS.supports(`corner-top-left-shape`,`squircle`);let n=getComputedStyle(t);for(let t of j)e.setProperty(`border-${t}-radius`,n.getPropertyValue(`border-${t}-radius`)),M&&e.setProperty(`corner-${t}-shape`,n.getPropertyValue(`corner-${t}-shape`))}function R(e,t,n,r,i,a){let o=n===`top`||n===`bottom`,s,c,l;if(o){let e=P(r.left,r.right,i.left,i.right);s=N(e-a.width/2,i.left,i.right-a.width),c=n===`bottom`?r.bottom+D:r.top-D-a.height,l=N(e-s,A,a.width-A)}else{let e=P(r.top,r.bottom,i.top,i.bottom);c=N(e-a.height/2,i.top,i.bottom-a.height),s=n===`right`?r.right+D:r.left-D-a.width,l=N(e-c,A,a.height-A)}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 z(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)-k;e.style.top=`${Math.max(r.top,o-Math.min(i.height,a))}px`,e.style.left=`${N(n.left+k,r.left,r.right-i.width)}px`}function B(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+D:r.top-D-c}px`;let l=P(r.left,r.right,i.left,i.right);e.style.left=`${N(l-a.width/2,i.left,i.right-a.width)}px`}function V(e){let t=e.parentElement,n=t?getComputedStyle(t):null,r=e=>Number.parseFloat(n?.[e])||0;return{top:r(`paddingTop`)+O,bottom:window.innerHeight-r(`paddingBottom`)-O,left:r(`paddingLeft`)+O,right:window.innerWidth-r(`paddingRight`)-O}}function H(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 U=0;function W(e,t,i){let a=`wui-tour-end-${++U}`,o=e.createElement(`div`);return o.className=`wui-tour-card wui-tour-end`,o.dataset.layout=`center`,o.setAttribute(`role`,`dialog`),i&&o.setAttribute(`aria-modal`,`true`),o.tabIndex=-1,o.setAttribute(`aria-labelledby`,`${a}-title`),o.setAttribute(`aria-describedby`,`${a}-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="${a}-title"></h2> <p class="wui-tour-text wui-tour-end-message" id="${a}-message"></p> <div class="wui-tour-actions"><button type="button" class="${n(`primary`,`sm`)} wui-tour-end-button" data-wui="${r}"></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,o}function ue(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=W(r,t,i),l=c.querySelector(`.wui-tour-end-button`),u=new AbortController;return new Promise(d=>{let f=()=>{u.abort(),d()};if(n?.aborted){f();return}let p={signal:u.signal};n?.addEventListener(`abort`,f,p),l.addEventListener(`click`,f,p),r.addEventListener(`keydown`,e=>{e.altKey||e.ctrlKey||e.metaKey||(e.key===`Escape`?(e.preventDefault(),e.stopPropagation(),f()):e.key===`Tab`&&i&&(e.preventDefault(),l.focus()))},{capture:!0,signal:u.signal}),i&&r.addEventListener(`focusin`,e=>{c.contains(e.target)||l.focus()},p);let m=()=>{u.signal.aborted||(a.hidden=!0,I(o,a,null),e.append(c),w(c),s.textContent=[t.title,t.message].filter(Boolean).join(`. `),l.focus())},h=T(a);h?h.then(m):m()})}var de=` :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 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-media=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); } @keyframes wui-tour-pulse { from { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 85%, transparent); } to { box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-primary) 0%, transparent); } } @media (prefers-reduced-motion: no-preference) { .wui-tour-spot[data-advance]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; pointer-events: none; animation: wui-tour-pulse 600ms var(--wui-ease-out) var(--wui-tour-spot-duration); } } @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-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-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`,fe=`wui-tour-media-toggle`,K=`http://www.w3.org/2000/svg`,pe=`M6 5h4v14H6zM14 5h4v14h-4z`,me=`M8 5v14l11-7z`,q={pause:`Pause animation`,play:`Play animation`},he=()=>globalThis.matchMedia?.(`(prefers-reduced-motion: reduce)`)?.matches===!0;function ge(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 _e(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 ve(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 ye(e,t){let n=document.createElement(`button`);n.type=`button`,n.className=fe;let r=(r=!e.paused)=>{n.setAttribute(`aria-label`,r?t.pause:t.play),n.replaceChildren(ge(r?pe:me))};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 be(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 xe(e,t,n=q){if(be(e),!t.media){e.removeAttribute(`data-media`);return}let r=document.createElement(`div`);if(r.className=G,t.mediaType===`video`){let e=ve(t,!he());r.append(e,ye(e,n))}else r.appendChild(_e(t));e.prepend(r),e.setAttribute(`data-media`,t.target?`step`:`welcome`)}var Se=`Step {current} of {total}`;function Ce(e){let t=/* @__PURE__ */ 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 we(e,t,n){return(e.getAttribute(`progress-label`)||Se).replace(/\{(current|total)\}/g,(e,r)=>String(r===`current`?t:n))}function Te(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 Ee=`wui-tour-step`,De=`wui-tour-host`,Oe=`wui-tour-seen:`,J=`data-tracking`,ke={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`},Ae={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`},je=[[`media`,`media`],[`mediaAlt`,`media-alt`],[`mediaPoster`,`media-poster`],[`mediaType`,`media-type`],[`advanceOn`,`advance-on`],[`actionLabel`,`action-label`]],Y={index:null,position:null,total:null},Me=0;function X(e=Oe,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)),Ne=()=>{let e=document.activeElement;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e},$=null;function Pe(e){$||($=new CSSStyleSheet,$.replaceSync(de)),e.adoptedStyleSheets=[$]}var Fe=class extends i{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 > ${Ee}`),e=>{let t={target:e.getAttribute(`target`)||``,title:e.getAttribute(`title`)||void 0,description:e.textContent.trim()};for(let[n,r]of je)e.hasAttribute(r)&&(t[n]=e.getAttribute(r));return t})}_store(){return this.seenStore?this.seenStore:this.getAttribute(`seen-store`)===`local`?X():globalThis.window?.WUI?.tour?.seenStore||null}_label(e){return this.getAttribute(Ae[e])||ke[e]}_endDialogText(){return this.getAttribute(`end-dialog`)===`false`?null:{title:this._label(`endTitle`),message:this._label(`endMessage`),button:this._label(`endButton`)}}_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=Ce(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 t=`wui-tour-${++Me}`,i=document.createElement(`div`);i.className=`wui-tour-layer`,i.innerHTML=` <div class="wui-tour-spot" aria-hidden="true"></div> <div class="wui-tour-card" role="dialog" aria-modal="true" tabindex="-1" aria-labelledby="${t}-title" aria-describedby="${t}-text"> <p class="wui-tour-position"></p> <h2 class="wui-tour-title" id="${t}-title"></h2> <p class="wui-tour-text" id="${t}-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="${n(`outline-secondary`,`sm`)} wui-tour-back" data-wui="${r}"></button> <button type="button" class="${n(`primary`,`sm`)} wui-tour-next" data-wui="${r}"></button> </div> </div> </div> <div class="visually-hidden" role="status" aria-live="polite"></div>`;let o=i;this._shadow=null,this.isolated&&(o=document.createElement(De),this._shadow=o.attachShadow({mode:`open`}),Pe(this._shadow),this._shadow.appendChild(i)),document.body.appendChild(o),document.documentElement.setAttribute(a,``),this._outer=o,this._layer=i,this._spot=i.querySelector(`.wui-tour-spot`),this._card=i.querySelector(`.wui-tour-card`),this._live=i.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;te(this._layer,n,t?.target??null,e.target)||this._card.focus()},document.addEventListener(`keydown`,this._onKey,!0),this._shadow||document.addEventListener(`focusin`,this._onFocusIn),e(o,()=>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=we(this,a,o);Te(i,{text:c,position:a,total:o}),xe(i,r,{pause:this._label(`mediaPause`),play:this._label(`mediaPlay`)});let l=g(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,F(i,n),this._spot.removeAttribute(J),this._place(),w(i),this._unbindAdvance?.(),this._unbindAdvance=_(r,n,()=>this._move(1));let f=this._active();(i.contains(f)?!f.hidden:this._shadow!==null&&Q(Ne()))||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&&I(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(J,``)}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=T(this._card);if(e&&await e,n!==this._run)return;this._show(r)}else if(t>0){let e=this._endDialogText();if(e&&await this._showEnd(e),n!==this._run)return;await this._close(`finished`)}}finally{this._moving=!1}}_showEnd(e){return this._unbindAdvance?.(),this._unbindAdvance=null,g(this,{layer:this._layer,spot:this._spot,card:this._card},null,null),this._spot.removeAttribute(J),this._ending=new AbortController,this._seenMark=this._markSeen(`finished`),ue(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;ne(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,t(this._outer),se(this._outer),document.documentElement.removeAttribute(a),this._outer=null,this._shadow=null,this._layer=null,this._current=null;let n=this._returnFocus;this._returnFocus=null,e&&n?.isConnected&&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()}:Y,a=this._seenMark;this._teardown();try{n===this._run&&await(a??this._markSeen(e))}finally{this._finish(e,i,t)}}_finish(e,t=Y,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}}))}};export{X as n,Fe as t};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{a as e,s as t,t as n}from"./zone-D82f-GU_.js";var r=`INR`,i=Object.freeze({INR:`₹`,USD:`$`,EUR:`€`,GBP:`£`}),a=e=>typeof e==`string`&&/^[A-Z]{3}$/.test(e),o=(e=`INR`)=>i[e]??`${e} `,s=[`number`,`currency`,`percent`,`compact`,`duration`,`date`],c=[`INR`],l=[`rupees`,`paise`],u=[`ms`,`s`,`min`,`h`],d=[`day`,`month`,`year`,`datetime`,`time`],f=`-`,p=`−`,m=[`Jan`,`Feb`,`Mar`,`Apr`,`May`,`Jun`,`Jul`,`Aug`,`Sep`,`Oct`,`Nov`,`Dec`],h=[[1e7,`Cr`],[1e5,`L`],[1e3,`K`]],g=(e,t)=>Number.isInteger(e)&&e>=0&&e<=20?e:t,_=/* @__PURE__ */ new Map,v=e=>(_.has(e)||_.set(e,new Intl.NumberFormat(`en-IN`,{minimumFractionDigits:0,maximumFractionDigits:e})),_.get(e)),y=/* @__PURE__ */ new Map,b=e=>(y.has(e)||y.set(e,new Intl.NumberFormat(`en-IN`,{minimumFractionDigits:e,maximumFractionDigits:e})),y.get(e)),x=e=>typeof e==`number`&&Number.isFinite(e),S=e=>e<0&&!Object.is(Math.abs(e),0)?p:``,C=(e,t)=>t===`paise`?e/100:e;function w(e,{decimals:t}={}){if(!x(e))return`-`;let n=v(g(t,2)).format(Math.abs(e));return n===`0`?`0`:S(e)+n}function T(e,{unit:t=`rupees`,decimals:n,currency:r=`INR`}={}){if(!x(e))return`-`;let i=C(e,t),a=b(g(n,0)).format(Math.abs(i));return(Number(a.replace(/,/g,``))===0?``:S(i))+o(r)+a}var E=e=>e>0&&e<.1?Math.min(20,1-Math.floor(Math.log10(e))):2;function D(e,{currency:t,unit:n=`rupees`}={}){if(!x(e))return`-`;let r=t?C(e,n):e,i=t?o(t):``,a=Math.abs(r),s=h.findIndex(([e])=>a>=e);if(s===-1){let e=v(E(a)).format(a);if(e!==`1,000`)return(e===`0`?``:S(r))+i+e;s=h.length-1}let[c,l]=h[s],u=a/c,d=u>=100?0:u>=10?1:2,f=Number(u.toFixed(d));return f>=100&&s>0&&(--s,[c,l]=h[s],u=a/c,d=u>=100?0:u>=10?1:2,f=Number(u.toFixed(d))),`${S(r)}${i}${v(d).format(f)} ${l}`}function O(e,{decimals:t}={}){return x(e)?`${w(e*100,{decimals:g(t,1)})}%`:`-`}function k(e,{unit:t=`s`}={}){if(!x(e))return`-`;let n={ms:1,s:1e3,min:6e4,h:36e5}[t]??1e3,r=Math.abs(e*n),i=S(e);if(Math.round(r)<1e3)return`${i}${v(0).format(r)} ms`;let a=r/1e3;if(a<10)return`${i}${v(1).format(a)}s`;let o=Math.round(a);if(o<60)return`${i}${o}s`;let s=e=>String(e).padStart(2,`0`),c=Math.floor(o/60);if(c<60)return`${i}${c}m ${s(o%60)}s`;let l=Math.floor(c/60);return`${i}${v(0).format(l)}h ${s(c%60)}m`}function A(t,r=n){if(t instanceof Date)return t.getTime();if(x(t))return t;if(typeof t!=`string`)return NaN;let i=/^(\d{4})-(\d{2})-(\d{2})$/.exec(t.trim());if(i){let[t,n,a]=[Number(i[1]),Number(i[2]),Number(i[3])],o=new Date(Date.UTC(2e3,n-1,a));return o.setUTCFullYear(t),o.getUTCFullYear()===t&&o.getUTCMonth()===n-1&&o.getUTCDate()===a?e(o.getTime(),r):NaN}return Date.parse(t)}function j(e,r=n){let{year:i,month:a,day:o,hour:s,minute:c}=t(e,r);return{year:i,month:a,day:o,hour:s,minute:c}}function M(e,{pattern:t=`day`,timeZone:r=n}={}){let i=A(e,r);if(!Number.isFinite(i))return`-`;let a=j(i,r),o=e=>String(e).padStart(2,`0`),s=`${o(a.day)}-${m[a.month]}-${a.year}`,c=`${o(a.hour)}:${o(a.minute)}`;switch(t){case`month`:return`${m[a.month]}-${a.year}`;case`year`:return String(a.year);case`datetime`:return`${s} ${c}`;case`time`:return c;default:return s}}function N(e,t){if(e==null||e===``)return`-`;let n=t?.style;if(n===`date`)return M(e,t);if(typeof e!=`number`)return String(e);switch(n){case`currency`:return T(e,t);case`percent`:return O(e,t);case`compact`:return D(e,t);case`duration`:return k(e,t);default:return w(e,t)}}function P(e,{timeZone:t=n}={}){let r=A(e);if(!Number.isFinite(r))return`-`;let i=Object.fromEntries(I(t).formatToParts(r).map(e=>[e.type,e.value]));return`${i.day}-${m[Number(i.month)-1]}-${i.year}, ${i.hour}:${i.minute} ${i.dayPeriod.toUpperCase()}`}var F=/* @__PURE__ */ new Map;function I(e){let t=F.get(e);return t||(t=new Intl.DateTimeFormat(`en-IN`,{day:`2-digit`,month:`numeric`,year:`numeric`,hour:`numeric`,minute:`2-digit`,hour12:!0,timeZone:e}),F.set(e,t)),t}function L(e=n){return new Intl.DateTimeFormat(`en-IN`,{timeZone:e,timeZoneName:`short`}).formatToParts(/* @__PURE__ */ new Date).find(e=>e.type===`timeZoneName`)?.value??e}export{i as _,s as a,a as b,T as c,k as d,w as f,A as g,L as h,f as i,M as l,N as m,d as n,l as o,O as p,u as r,D as s,c as t,P as u,r as v,o as y};
|