@webority/ui-elements 0.153.0 → 0.154.0

package/dist/ui-elements/consent-banner.global.js

@@ -1 +1 @@
-(function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=globalThis.WeborityUiElementsInternal?.version;if(a!==`0.153.0`)throw Error(`[webority-ui] consent-banner expects ui-elements 0.153.0 but the page loaded `+a+`.`);var o={"--color-primary":`#4F46E5`,"--color-primary-hover":`#4338CA`,"--color-primary-text":`#4F46E5`,"--color-on-primary":`#FFFFFF`,"--color-text":`#071437`,"--color-text-muted":`#4B5675`,"--color-border":`#EBEDF3`,"--color-surface":`#FFFFFF`,"--wui-radius-lg":`14px`,"--wui-shadow-modal":`0px 24px 60px -16px rgba(7, 20, 55, 0.28)`,"--wui-z-fixed":`1030`},s=e=>`var(${e}, ${o[e]})`,c=` :host { all: initial; position: fixed; bottom: 20px; left: 20px; right: auto; z-index: ${s(`--wui-z-fixed`)}; display: block; width: 420px; max-width: calc(100vw - 40px); font-family: inherit; font-size: 16px; line-height: 1.5; color: ${s(`--color-text`)}; } :host([position="bottom-right"]) { right: 20px; left: auto; } :host([position="bar"]) { left: 0; right: 0; bottom: 0; width: auto; max-width: none; } :host([position="bar"]) .wui-consent-banner-panel { padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 0; } :host(:not([open])) { pointer-events: none; } :host([tour-open]) { visibility: hidden; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } .wui-consent-banner-panel { padding: 20px; background: ${s(`--color-surface`)}; border: 1px solid ${s(`--color-border`)}; border-radius: ${s(`--wui-radius-lg`)}; box-shadow: ${s(`--wui-shadow-modal`)}; text-align: start; pointer-events: auto; } .wui-consent-banner-heading { margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.3; color: ${s(`--color-text`)}; } .wui-consent-banner-description { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: ${s(`--color-text-muted`)}; } .wui-consent-banner-policy { color: ${s(`--color-primary-text`)}; font-weight: 500; } .wui-consent-banner-settings { display: grid; gap: 12px; max-height: 50vh; margin: 0 0 16px; padding: 12px 0; overflow-y: auto; border-top: 1px solid ${s(`--color-border`)}; border-bottom: 1px solid ${s(`--color-border`)}; } .wui-consent-banner-category-description { margin: 2px 0 0; padding-inline-start: 2.5em; font-size: 12px; line-height: 1.4; color: ${s(`--color-text-muted`)}; } .form-check { display: flex; align-items: center; gap: 0.5em; margin: 0; font-size: 14px; } .form-check-input { appearance: none; flex: none; width: 2em; height: 1em; margin: 0; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 2em; background: ${s(`--color-surface`)} radial-gradient(circle, rgba(0, 0, 0, 0.25) 0.35em, transparent 0.4em) left / 1em 1em no-repeat; cursor: pointer; transition: background-position 0.15s ease-in-out; } .form-check-input:checked { border-color: ${s(`--color-primary`)}; background: ${s(`--color-primary`)} radial-gradient(circle, #fff 0.35em, transparent 0.4em) right / 1em 1em no-repeat; } .form-check-input:disabled { opacity: 0.5; cursor: default; } .form-check-input:focus-visible { outline: 2px solid ${s(`--color-primary`)}; outline-offset: 2px; } .form-check-label { cursor: pointer; } .wui-consent-banner-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } .btn { display: inline-block; 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; white-space: nowrap; cursor: pointer; } .btn:focus-visible { outline: 2px solid ${s(`--color-primary`)}; outline-offset: 2px; } .btn-primary { background: ${s(`--color-primary`)}; border-color: ${s(`--color-primary`)}; color: ${s(`--color-on-primary`)}; } .btn-primary:hover { background: ${s(`--color-primary-hover`)}; border-color: ${s(`--color-primary-hover`)}; } .btn-outline-neutral { border-color: ${s(`--color-text-muted`)}; color: ${s(`--color-text-muted`)}; } .btn-outline-neutral:hover { background: ${s(`--color-bg-muted`)}; color: ${s(`--color-text`)}; } .btn-link { font-weight: 400; color: ${s(`--color-primary-text`)}; text-decoration: underline; } .btn-link:hover { color: ${s(`--color-primary-hover`)}; } .wui-consent-banner-settings-toggle { margin-inline-end: auto; padding-inline: 0; } .wui-consent-banner-save { flex: 1 1 100%; } @media (max-width: 575.98px) { :host, :host([position="bottom-right"]) { left: 0; right: 0; bottom: 0; width: auto; max-width: none; } .wui-consent-banner-panel { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 0; } /* Hidden on phones, but it stays the dialog's accessible name. */ .wui-consent-banner-heading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .wui-consent-banner-description { margin: 0 0 8px; font-size: 13px; line-height: 1.4; } .wui-consent-banner-actions { gap: 6px; } } @media (min-width: 576px) { :host([position="bar"]) .wui-consent-banner-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; } /* Hidden on the bar, but it stays the dialog's accessible name. */ :host([position="bar"]) .wui-consent-banner-heading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :host([position="bar"]) .wui-consent-banner-description { margin: 0; flex: 1 1 320px; } :host([position="bar"]) .wui-consent-banner-actions { flex: none; } :host([position="bar"]) .wui-consent-banner-settings { flex-basis: 100%; margin: 0; } } /* The actions are small buttons, which fall under the 44px touch target on touch screens. This sheet's .btn is inline-block, so it centres the label itself. */ @media (max-width: 575.98px), (pointer: coarse) { .wui-consent-banner-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } } `,l=`data-wui-tour-open`,u=`wui-consent-save`,d=`[data-consent-settings]`,f=`tour-open`,p=`--wui-consent-banner-block`,m=`--wui-consent-banner-inline`,h={heading:`Cookies on this site`,description:`We use cookies to understand how the site is used and to measure our campaigns. You can change your choice at any time.`,policyLabel:`Cookie policy`,essentialLabel:`Essential cookies`,essentialDescription:`Required for the site to work and stay secure. Always on.`,analyticsLabel:`Analytics cookies`,analyticsDescription:`Help us understand how visitors use the site.`,functionalLabel:`Functional cookies`,functionalDescription:`Remember choices you make, such as your preferences.`,marketingLabel:`Marketing cookies`,marketingDescription:`Measure how well our campaigns work.`,settingsLabel:`Cookie settings`,rejectLabel:`Reject all`,acceptLabel:`Accept all`,saveLabel:`Save preferences`},g=[`analytics`,`functional`,`marketing`],_={analytics:{label:h.analyticsLabel,description:`analyticsDescription`},functional:{label:h.functionalLabel,description:`functionalDescription`},marketing:{label:h.marketingLabel,description:`marketingDescription`}};function v(e){return g.some(t=>t===e)}var y=new Set;function b(e){y.has(e)||(y.add(e),(0,r.devWarn)(`[@webority/ui-elements] <wui-consent-banner> received categories containing "${e}", which is not one of ${g.map(e=>`"${e}"`).join(` | `)}. It is ignored.`))}var x=0,S=null;function C(e){S||(S=new CSSStyleSheet,S.replaceSync(c)),e.adoptedStyleSheets=[S]}var w=class extends i.ElementBase{_uid;_preferences;_settings;_onDocumentClick;_tourWatch;_roomObserver;_onWindowResize;_rendered;static get observedAttributes(){return[`heading`,`description`,`policy-href`,`policy-label`,`analytics-description`,`functional-description`,`marketing-description`,`categories`]}constructor(){super(),x+=1,this._uid=`wui-consent-${x}`,this._preferences={analytics:!1,functional:!1,marketing:!1},this._settings=!1,this._onDocumentClick=e=>{e.target instanceof Element&&e.target.closest(d)&&(e.preventDefault(),this.open({settings:!0,focus:!0}))},this._tourWatch=null,this._roomObserver=null,this._onWindowResize=()=>this._reserveRoom()}get position(){let e=this.getAttribute(`position`);return e===`bottom-right`||e===`bar`?e:`bottom-left`}set position(e){this.setAttribute(`position`,String(e??`bottom-left`))}get standalone(){return this.hasAttribute(`standalone`)}set standalone(e){this.toggleAttribute(`standalone`,e===!0||e===``||e===`true`)}get preview(){return this.hasAttribute(`preview`)}set preview(e){this.toggleAttribute(`preview`,e===!0||e===``||e===`true`)}get heading(){return this.getAttribute(`heading`)||h.heading}set heading(e){this.setAttribute(`heading`,String(e??``))}get description(){return this.getAttribute(`description`)||h.description}set description(e){this.setAttribute(`description`,String(e??``))}get policyHref(){return this.getAttribute(`policy-href`)||``}set policyHref(e){this.setAttribute(`policy-href`,String(e??``))}get policyLabel(){return this.getAttribute(`policy-label`)||h.policyLabel}set policyLabel(e){this.setAttribute(`policy-label`,String(e??``))}get analyticsDescription(){return this.getAttribute(`analytics-description`)||h.analyticsDescription}set analyticsDescription(e){this.setAttribute(`analytics-description`,String(e??``))}get functionalDescription(){return this.getAttribute(`functional-description`)||h.functionalDescription}set functionalDescription(e){this.setAttribute(`functional-description`,String(e??``))}get marketingDescription(){return this.getAttribute(`marketing-description`)||h.marketingDescription}set marketingDescription(e){this.setAttribute(`marketing-description`,String(e??``))}get categories(){let e=this.getAttribute(`categories`);if(!e?.trim())return[...g];let t=e.split(/\s+/).filter(Boolean);for(let e of t)v(e)||b(e);let n=g.filter(e=>t.includes(e));return n.length?n:[...g]}set categories(e){e==null?this.removeAttribute(`categories`):this.setAttribute(`categories`,Array.isArray(e)?e.join(` `):String(e))}get preferences(){let e=this.categories;return Object.fromEntries(g.map(t=>[t,e.includes(t)&&this._preferences[t]]))}set preferences(e){this._preferences={analytics:e?.analytics===!0,functional:e?.functional===!0,marketing:e?.marketing===!0},this._applyPreferences()}get isOpen(){return this.hasAttribute(`open`)}connectedCallback(){this._rendered||this.render(),document.addEventListener(`click`,this._onDocumentClick),this._syncTour(),this._tourWatch??=new MutationObserver(()=>this._syncTour()),this._tourWatch.observe(document.documentElement,{attributes:!0,attributeFilter:[l]}),this.preview&&!this.isOpen&&this.open(),this.isOpen&&this._trackRoom()}disconnectedCallback(){document.removeEventListener(`click`,this._onDocumentClick),this._tourWatch?.disconnect(),this._untrackRoom()}_syncTour(){this.toggleAttribute(f,document.documentElement.hasAttribute(l))}attributeChangedCallback(){this._rendered&&this.render()}render(){let e=this.isOpen,t=this._uid,r=this.policyHref?` <a class="wui-consent-banner-policy" href="${D(this.policyHref)}">${E(this.policyLabel)}</a>`:``,i=this._root();i instanceof ShadowRoot&&C(i),i.innerHTML=` <div class="wui-consent-banner-panel" role="dialog" aria-labelledby="${t}-heading" aria-describedby="${t}-description" hidden> <h2 class="wui-consent-banner-heading" id="${t}-heading">${E(this.heading)}</h2> <p class="wui-consent-banner-description" id="${t}-description">${E(this.description)}${r}</p> <div class="wui-consent-banner-settings" hidden> ${T(t,`essential`,h.essentialLabel,h.essentialDescription,!0)} ${this.categories.map(e=>T(t,e,_[e].label,this[_[e].description],!1)).join(` `)} </div> <div class="wui-consent-banner-actions"> <button type="button" class="btn btn-sm btn-link wui-consent-banner-settings-toggle" aria-expanded="false">${h.settingsLabel}</button> <button type="button" class="${(0,n.buttonClass)(`neutral`,`outline`,`sm`)} wui-consent-banner-reject" data-wui="${n.APP_BUTTON_MARKER}">${h.rejectLabel}</button> <button type="button" class="${(0,n.buttonClass)(`primary`,`solid`,`sm`)} wui-consent-banner-accept" data-wui="${n.APP_BUTTON_MARKER}">${h.acceptLabel}</button> <button type="button" class="${(0,n.buttonClass)(`primary`,`solid`,`sm`)} wui-consent-banner-save" hidden data-wui="${n.APP_BUTTON_MARKER}">${h.saveLabel}</button> </div> </div>`,this._rendered=!0,this._wire(),this._applyPreferences(),this._showSettings(this._settings),e&&(this._requirePanel().hidden=!1)}open({settings:e=!1,focus:t=!1}={}){if(this._rendered||this.render(),this._applyPreferences(),this._showSettings(e),this._requirePanel().hidden=!1,this.setAttribute(`open`,``),this._trackRoom(),t){let t=e?this._root().querySelector(`.wui-consent-banner-category input:not([disabled])`):this._root().querySelector(`.wui-consent-banner-accept`);t instanceof HTMLElement&&t.focus()}}close(){let e=this._panel();e&&(e.hidden=!0),this.removeAttribute(`open`),this._showSettings(!1),this._untrackRoom()}_trackRoom(){this.isConnected&&!this.preview&&(typeof ResizeObserver<`u`&&(this._roomObserver??=new ResizeObserver(()=>this._reserveRoom()),this._roomObserver.observe(this)),window.addEventListener(`resize`,this._onWindowResize),this._reserveRoom())}_untrackRoom(){this._roomObserver?.disconnect(),window.removeEventListener(`resize`,this._onWindowResize),document.documentElement.style.removeProperty(p),document.documentElement.style.removeProperty(m)}_reserveRoom(){let e=this.getBoundingClientRect(),t=this.position===`bar`?0:this.position===`bottom-right`?window.innerWidth-e.left:e.right,n=document.documentElement.style;n.setProperty(p,`${Math.ceil(window.innerHeight-e.top)}px`),n.setProperty(m,`${Math.ceil(t)}px`)}_root(){return this.shadowRoot?this.shadowRoot:this.standalone?this.attachShadow({mode:`open`}):this}_panel(){let e=this._root().querySelector(`.wui-consent-banner-panel`);return e instanceof HTMLElement?e:null}_requirePanel(){let e=this._panel();if(!e)throw Error(`consent banner panel is missing`);return e}_wire(){let e=this._root();e.querySelector(`.wui-consent-banner-accept`)?.addEventListener(`click`,()=>this._save(this._choiceForShown(!0))),e.querySelector(`.wui-consent-banner-reject`)?.addEventListener(`click`,()=>this._save(this._choiceForShown(!1))),e.querySelector(`.wui-consent-banner-save`)?.addEventListener(`click`,()=>this._save(this._switchValues())),e.querySelector(`.wui-consent-banner-settings-toggle`)?.addEventListener(`click`,()=>this._showSettings(!this._settings))}_save(e){this._preferences={...e},this.dispatchEvent(new CustomEvent(u,{bubbles:!0,composed:!0,detail:{...e}})),this.close()}_choiceForShown(e){let t=this.categories;return{analytics:e&&t.includes(`analytics`),functional:e&&t.includes(`functional`),marketing:e&&t.includes(`marketing`)}}_switchValues(){let e={analytics:!1,functional:!1,marketing:!1};for(let t of g){let n=this._root().querySelector(`input[data-category="${t}"]`);e[t]=n instanceof HTMLInputElement&&n.checked}return e}_applyPreferences(){for(let e of g){let t=this._root().querySelector(`input[data-category="${e}"]`);t instanceof HTMLInputElement&&(t.checked=this._preferences[e])}}_showSettings(e){this._settings=e;let t=this._root(),n=t.querySelector(`.wui-consent-banner-settings`);if(!(n instanceof HTMLElement))return;n.hidden=!e,t.querySelector(`.wui-consent-banner-settings-toggle`)?.setAttribute(`aria-expanded`,e?`true`:`false`);let r=t.querySelector(`.wui-consent-banner-save`);r instanceof HTMLElement&&(r.hidden=!e);for(let n of[`.wui-consent-banner-reject`,`.wui-consent-banner-accept`]){let r=t.querySelector(n);r instanceof HTMLElement&&(r.hidden=e)}}};function T(e,t,n,r,i){let a=`${e}-${t}`;return`<div class="wui-consent-banner-category"> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" id="${a}" data-category="${t}"${i?` checked disabled`:``} /> <label class="form-check-label" for="${a}">${E(n)}</label> </div> <p class="wui-consent-banner-category-description">${E(r)}</p> </div>`}var E=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),D=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`);(0,t.defineElement)(`wui-consent-banner`,w),e.WuiConsentBanner=w})(this.WeborityUiElements=this.WeborityUiElements||{},WeborityUiElementsInternal.modules.defineElement,WeborityUiElementsInternal.modules.buttonClass,WeborityUiElementsInternal.modules.devWarn,WeborityUiElementsInternal.modules.elementBase);
+(function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=globalThis.WeborityUiElementsInternal?.version;if(a!==`0.154.0`)throw Error(`[webority-ui] consent-banner expects ui-elements 0.154.0 but the page loaded `+a+`.`);var o={"--color-primary":`#4F46E5`,"--color-primary-hover":`#4338CA`,"--color-primary-text":`#4F46E5`,"--color-on-primary":`#FFFFFF`,"--color-text":`#071437`,"--color-text-muted":`#4B5675`,"--color-border":`#EBEDF3`,"--color-surface":`#FFFFFF`,"--wui-radius-lg":`14px`,"--wui-shadow-modal":`0px 24px 60px -16px rgba(7, 20, 55, 0.28)`,"--wui-z-fixed":`1030`},s=e=>`var(${e}, ${o[e]})`,c=` :host { all: initial; position: fixed; bottom: 20px; left: 20px; right: auto; z-index: ${s(`--wui-z-fixed`)}; display: block; width: 420px; max-width: calc(100vw - 40px); font-family: inherit; font-size: 16px; line-height: 1.5; color: ${s(`--color-text`)}; } :host([position="bottom-right"]) { right: 20px; left: auto; } :host([position="bar"]) { left: 0; right: 0; bottom: 0; width: auto; max-width: none; } :host([position="bar"]) .wui-consent-banner-panel { padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 0; } :host(:not([open])) { pointer-events: none; } :host([tour-open]) { visibility: hidden; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } .wui-consent-banner-panel { padding: 20px; background: ${s(`--color-surface`)}; border: 1px solid ${s(`--color-border`)}; border-radius: ${s(`--wui-radius-lg`)}; box-shadow: ${s(`--wui-shadow-modal`)}; text-align: start; pointer-events: auto; } .wui-consent-banner-heading { margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.3; color: ${s(`--color-text`)}; } .wui-consent-banner-description { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: ${s(`--color-text-muted`)}; } .wui-consent-banner-policy { color: ${s(`--color-primary-text`)}; font-weight: 500; } .wui-consent-banner-settings { display: grid; gap: 12px; max-height: 50vh; margin: 0 0 16px; padding: 12px 0; overflow-y: auto; border-top: 1px solid ${s(`--color-border`)}; border-bottom: 1px solid ${s(`--color-border`)}; } .wui-consent-banner-category-description { margin: 2px 0 0; padding-inline-start: 2.5em; font-size: 12px; line-height: 1.4; color: ${s(`--color-text-muted`)}; } .form-check { display: flex; align-items: center; gap: 0.5em; margin: 0; font-size: 14px; } .form-check-input { appearance: none; flex: none; width: 2em; height: 1em; margin: 0; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 2em; background: ${s(`--color-surface`)} radial-gradient(circle, rgba(0, 0, 0, 0.25) 0.35em, transparent 0.4em) left / 1em 1em no-repeat; cursor: pointer; transition: background-position 0.15s ease-in-out; } .form-check-input:checked { border-color: ${s(`--color-primary`)}; background: ${s(`--color-primary`)} radial-gradient(circle, #fff 0.35em, transparent 0.4em) right / 1em 1em no-repeat; } .form-check-input:disabled { opacity: 0.5; cursor: default; } .form-check-input:focus-visible { outline: 2px solid ${s(`--color-primary`)}; outline-offset: 2px; } .form-check-label { cursor: pointer; } .wui-consent-banner-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } .btn { display: inline-block; 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; white-space: nowrap; cursor: pointer; } .btn:focus-visible { outline: 2px solid ${s(`--color-primary`)}; outline-offset: 2px; } .btn-primary { background: ${s(`--color-primary`)}; border-color: ${s(`--color-primary`)}; color: ${s(`--color-on-primary`)}; } .btn-primary:hover { background: ${s(`--color-primary-hover`)}; border-color: ${s(`--color-primary-hover`)}; } .btn-outline-neutral { border-color: ${s(`--color-text-muted`)}; color: ${s(`--color-text-muted`)}; } .btn-outline-neutral:hover { background: ${s(`--color-bg-muted`)}; color: ${s(`--color-text`)}; } .btn-link { font-weight: 400; color: ${s(`--color-primary-text`)}; text-decoration: underline; } .btn-link:hover { color: ${s(`--color-primary-hover`)}; } .wui-consent-banner-settings-toggle { margin-inline-end: auto; padding-inline: 0; } .wui-consent-banner-save { flex: 1 1 100%; } @media (max-width: 575.98px) { :host, :host([position="bottom-right"]) { left: 0; right: 0; bottom: 0; width: auto; max-width: none; } .wui-consent-banner-panel { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 0; } /* Hidden on phones, but it stays the dialog's accessible name. */ .wui-consent-banner-heading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .wui-consent-banner-description { margin: 0 0 8px; font-size: 13px; line-height: 1.4; } .wui-consent-banner-actions { gap: 6px; } } @media (min-width: 576px) { :host([position="bar"]) .wui-consent-banner-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; } /* Hidden on the bar, but it stays the dialog's accessible name. */ :host([position="bar"]) .wui-consent-banner-heading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :host([position="bar"]) .wui-consent-banner-description { margin: 0; flex: 1 1 320px; } :host([position="bar"]) .wui-consent-banner-actions { flex: none; } :host([position="bar"]) .wui-consent-banner-settings { flex-basis: 100%; margin: 0; } } /* The actions are small buttons, which fall under the 44px touch target on touch screens. This sheet's .btn is inline-block, so it centres the label itself. */ @media (max-width: 575.98px), (pointer: coarse) { .wui-consent-banner-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } } `,l=`data-wui-tour-open`,u=`wui-consent-save`,d=`[data-consent-settings]`,f=`tour-open`,p=`--wui-consent-banner-block`,m=`--wui-consent-banner-inline`,h={heading:`Cookies on this site`,description:`We use cookies to understand how the site is used and to measure our campaigns. You can change your choice at any time.`,policyLabel:`Cookie policy`,essentialLabel:`Essential cookies`,essentialDescription:`Required for the site to work and stay secure. Always on.`,analyticsLabel:`Analytics cookies`,analyticsDescription:`Help us understand how visitors use the site.`,functionalLabel:`Functional cookies`,functionalDescription:`Remember choices you make, such as your preferences.`,marketingLabel:`Marketing cookies`,marketingDescription:`Measure how well our campaigns work.`,settingsLabel:`Cookie settings`,rejectLabel:`Reject all`,acceptLabel:`Accept all`,saveLabel:`Save preferences`},g=[`analytics`,`functional`,`marketing`],_={analytics:{label:h.analyticsLabel,description:`analyticsDescription`},functional:{label:h.functionalLabel,description:`functionalDescription`},marketing:{label:h.marketingLabel,description:`marketingDescription`}};function v(e){return g.some(t=>t===e)}var y=new Set;function b(e){y.has(e)||(y.add(e),(0,r.devWarn)(`[@webority/ui-elements] <wui-consent-banner> received categories containing "${e}", which is not one of ${g.map(e=>`"${e}"`).join(` | `)}. It is ignored.`))}var x=0,S=null;function C(e){S||(S=new CSSStyleSheet,S.replaceSync(c)),e.adoptedStyleSheets=[S]}var w=class extends i.ElementBase{_uid;_preferences;_settings;_onDocumentClick;_tourWatch;_roomObserver;_onWindowResize;_rendered;static get observedAttributes(){return[`heading`,`description`,`policy-href`,`policy-label`,`analytics-description`,`functional-description`,`marketing-description`,`categories`]}constructor(){super(),x+=1,this._uid=`wui-consent-${x}`,this._preferences={analytics:!1,functional:!1,marketing:!1},this._settings=!1,this._onDocumentClick=e=>{e.target instanceof Element&&e.target.closest(d)&&(e.preventDefault(),this.open({settings:!0,focus:!0}))},this._tourWatch=null,this._roomObserver=null,this._onWindowResize=()=>this._reserveRoom()}get position(){let e=this.getAttribute(`position`);return e===`bottom-right`||e===`bar`?e:`bottom-left`}set position(e){this.setAttribute(`position`,String(e??`bottom-left`))}get standalone(){return this.hasAttribute(`standalone`)}set standalone(e){this.toggleAttribute(`standalone`,e===!0||e===``||e===`true`)}get preview(){return this.hasAttribute(`preview`)}set preview(e){this.toggleAttribute(`preview`,e===!0||e===``||e===`true`)}get heading(){return this.getAttribute(`heading`)||h.heading}set heading(e){this.setAttribute(`heading`,String(e??``))}get description(){return this.getAttribute(`description`)||h.description}set description(e){this.setAttribute(`description`,String(e??``))}get policyHref(){return this.getAttribute(`policy-href`)||``}set policyHref(e){this.setAttribute(`policy-href`,String(e??``))}get policyLabel(){return this.getAttribute(`policy-label`)||h.policyLabel}set policyLabel(e){this.setAttribute(`policy-label`,String(e??``))}get analyticsDescription(){return this.getAttribute(`analytics-description`)||h.analyticsDescription}set analyticsDescription(e){this.setAttribute(`analytics-description`,String(e??``))}get functionalDescription(){return this.getAttribute(`functional-description`)||h.functionalDescription}set functionalDescription(e){this.setAttribute(`functional-description`,String(e??``))}get marketingDescription(){return this.getAttribute(`marketing-description`)||h.marketingDescription}set marketingDescription(e){this.setAttribute(`marketing-description`,String(e??``))}get categories(){let e=this.getAttribute(`categories`);if(!e?.trim())return[...g];let t=e.split(/\s+/).filter(Boolean);for(let e of t)v(e)||b(e);let n=g.filter(e=>t.includes(e));return n.length?n:[...g]}set categories(e){e==null?this.removeAttribute(`categories`):this.setAttribute(`categories`,Array.isArray(e)?e.join(` `):String(e))}get preferences(){let e=this.categories;return Object.fromEntries(g.map(t=>[t,e.includes(t)&&this._preferences[t]]))}set preferences(e){this._preferences={analytics:e?.analytics===!0,functional:e?.functional===!0,marketing:e?.marketing===!0},this._applyPreferences()}get isOpen(){return this.hasAttribute(`open`)}connectedCallback(){this._rendered||this.render(),document.addEventListener(`click`,this._onDocumentClick),this._syncTour(),this._tourWatch??=new MutationObserver(()=>this._syncTour()),this._tourWatch.observe(document.documentElement,{attributes:!0,attributeFilter:[l]}),this.preview&&!this.isOpen&&this.open(),this.isOpen&&this._trackRoom()}disconnectedCallback(){document.removeEventListener(`click`,this._onDocumentClick),this._tourWatch?.disconnect(),this._untrackRoom()}_syncTour(){this.toggleAttribute(f,document.documentElement.hasAttribute(l))}attributeChangedCallback(){this._rendered&&this.render()}render(){let e=this.isOpen,t=this._uid,r=this.policyHref?` <a class="wui-consent-banner-policy" href="${D(this.policyHref)}">${E(this.policyLabel)}</a>`:``,i=this._root();i instanceof ShadowRoot&&C(i),i.innerHTML=` <div class="wui-consent-banner-panel" role="dialog" aria-labelledby="${t}-heading" aria-describedby="${t}-description" hidden> <h2 class="wui-consent-banner-heading" id="${t}-heading">${E(this.heading)}</h2> <p class="wui-consent-banner-description" id="${t}-description">${E(this.description)}${r}</p> <div class="wui-consent-banner-settings" hidden> ${T(t,`essential`,h.essentialLabel,h.essentialDescription,!0)} ${this.categories.map(e=>T(t,e,_[e].label,this[_[e].description],!1)).join(` `)} </div> <div class="wui-consent-banner-actions"> <button type="button" class="btn btn-sm btn-link wui-consent-banner-settings-toggle" aria-expanded="false">${h.settingsLabel}</button> <button type="button" class="${(0,n.buttonClass)(`neutral`,`outline`,`sm`)} wui-consent-banner-reject" data-wui="${n.APP_BUTTON_MARKER}">${h.rejectLabel}</button> <button type="button" class="${(0,n.buttonClass)(`primary`,`solid`,`sm`)} wui-consent-banner-accept" data-wui="${n.APP_BUTTON_MARKER}">${h.acceptLabel}</button> <button type="button" class="${(0,n.buttonClass)(`primary`,`solid`,`sm`)} wui-consent-banner-save" hidden data-wui="${n.APP_BUTTON_MARKER}">${h.saveLabel}</button> </div> </div>`,this._rendered=!0,this._wire(),this._applyPreferences(),this._showSettings(this._settings),e&&(this._requirePanel().hidden=!1)}open({settings:e=!1,focus:t=!1}={}){if(this._rendered||this.render(),this._applyPreferences(),this._showSettings(e),this._requirePanel().hidden=!1,this.setAttribute(`open`,``),this._trackRoom(),t){let t=e?this._root().querySelector(`.wui-consent-banner-category input:not([disabled])`):this._root().querySelector(`.wui-consent-banner-accept`);t instanceof HTMLElement&&t.focus()}}close(){let e=this._panel();e&&(e.hidden=!0),this.removeAttribute(`open`),this._showSettings(!1),this._untrackRoom()}_trackRoom(){this.isConnected&&!this.preview&&(typeof ResizeObserver<`u`&&(this._roomObserver??=new ResizeObserver(()=>this._reserveRoom()),this._roomObserver.observe(this)),window.addEventListener(`resize`,this._onWindowResize),this._reserveRoom())}_untrackRoom(){this._roomObserver?.disconnect(),window.removeEventListener(`resize`,this._onWindowResize),document.documentElement.style.removeProperty(p),document.documentElement.style.removeProperty(m)}_reserveRoom(){let e=this.getBoundingClientRect(),t=this.position===`bar`?0:this.position===`bottom-right`?window.innerWidth-e.left:e.right,n=document.documentElement.style;n.setProperty(p,`${Math.ceil(window.innerHeight-e.top)}px`),n.setProperty(m,`${Math.ceil(t)}px`)}_root(){return this.shadowRoot?this.shadowRoot:this.standalone?this.attachShadow({mode:`open`}):this}_panel(){let e=this._root().querySelector(`.wui-consent-banner-panel`);return e instanceof HTMLElement?e:null}_requirePanel(){let e=this._panel();if(!e)throw Error(`consent banner panel is missing`);return e}_wire(){let e=this._root();e.querySelector(`.wui-consent-banner-accept`)?.addEventListener(`click`,()=>this._save(this._choiceForShown(!0))),e.querySelector(`.wui-consent-banner-reject`)?.addEventListener(`click`,()=>this._save(this._choiceForShown(!1))),e.querySelector(`.wui-consent-banner-save`)?.addEventListener(`click`,()=>this._save(this._switchValues())),e.querySelector(`.wui-consent-banner-settings-toggle`)?.addEventListener(`click`,()=>this._showSettings(!this._settings))}_save(e){this._preferences={...e},this.dispatchEvent(new CustomEvent(u,{bubbles:!0,composed:!0,detail:{...e}})),this.close()}_choiceForShown(e){let t=this.categories;return{analytics:e&&t.includes(`analytics`),functional:e&&t.includes(`functional`),marketing:e&&t.includes(`marketing`)}}_switchValues(){let e={analytics:!1,functional:!1,marketing:!1};for(let t of g){let n=this._root().querySelector(`input[data-category="${t}"]`);e[t]=n instanceof HTMLInputElement&&n.checked}return e}_applyPreferences(){for(let e of g){let t=this._root().querySelector(`input[data-category="${e}"]`);t instanceof HTMLInputElement&&(t.checked=this._preferences[e])}}_showSettings(e){this._settings=e;let t=this._root(),n=t.querySelector(`.wui-consent-banner-settings`);if(!(n instanceof HTMLElement))return;n.hidden=!e,t.querySelector(`.wui-consent-banner-settings-toggle`)?.setAttribute(`aria-expanded`,e?`true`:`false`);let r=t.querySelector(`.wui-consent-banner-save`);r instanceof HTMLElement&&(r.hidden=!e);for(let n of[`.wui-consent-banner-reject`,`.wui-consent-banner-accept`]){let r=t.querySelector(n);r instanceof HTMLElement&&(r.hidden=e)}}};function T(e,t,n,r,i){let a=`${e}-${t}`;return`<div class="wui-consent-banner-category"> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" id="${a}" data-category="${t}"${i?` checked disabled`:``} /> <label class="form-check-label" for="${a}">${E(n)}</label> </div> <p class="wui-consent-banner-category-description">${E(r)}</p> </div>`}var E=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),D=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`);(0,t.defineElement)(`wui-consent-banner`,w),e.WuiConsentBanner=w})(this.WeborityUiElements=this.WeborityUiElements||{},WeborityUiElementsInternal.modules.defineElement,WeborityUiElementsInternal.modules.buttonClass,WeborityUiElementsInternal.modules.devWarn,WeborityUiElementsInternal.modules.elementBase);

package/dist/ui-elements/context-menu.global.js

@@ -1 +1 @@
-(function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=globalThis.WeborityUiElementsInternal?.version;if(a!==`0.153.0`)throw Error(`[webority-ui] context-menu expects ui-elements 0.153.0 but the page loaded `+a+`.`);var o=`[role="menuitem"]`,s=`.wui-context-menu-sub`,c=`input.wui-context-menu-search`,l=`input, textarea, select, [contenteditable=""], [contenteditable="true"]`,u=`data-open`,d=500,f=10,p=400,m=null,h=null,g=0,_=new WeakMap;function v(e,t,n){let r=_.get(e);if(r){if(r.region===t||t.contains(r.region))return!1;r.cancel()}return _.set(e,{region:t,cancel:n}),!0}var y=e=>e instanceof Element?e:e instanceof Node?e.parentElement:null,b=e=>`focus`in e,x=e=>[...e.childNodes].filter(e=>e.nodeType===Node.TEXT_NODE||e instanceof Element&&!e.matches(`.wui-context-menu-hint, .wui-context-menu-tick`)).map(e=>e.textContent).join(``),S=(e,t)=>[...e.querySelectorAll(t)].filter(e=>e instanceof HTMLElement),C=e=>[...e.children].filter(e=>e instanceof HTMLElement),w=(e,t)=>{let n=e.children[t];if(!(n instanceof HTMLElement))throw Error(`a submenu holds its opener and then its panel`);return n},T=e=>w(e,0),E=e=>w(e,1),D=(e,t)=>{let n=e?.closest(t);return n instanceof HTMLElement?n:null},O=class extends r.ElementBase{_region;_origin;_returnFocus;_press;_swallowClick;_navPanel;_nav;_onContextMenu;_onContextMenuCapture;_onDocKeyDown;_onDocClick;_onPointerDown;_onPressMove;_onPressEnd;_onClickCapture;_onKeyDown;_onClick;_onInput;_onMouseMove;_onDismiss;_onPointerDownCapture;static get observedAttributes(){return[`disabled`,`open`]}constructor(){super(),this._region=null,this._origin=null,this._returnFocus=null,this._press=null,this._swallowClick=!1,this._navPanel=null,this._nav=(0,i.createListboxKeyNav)({getVisibleOptions:()=>this._rowsOf(this._navPanel),getActive:()=>{let e=document.activeElement,t=this._rowsOf(this._navPanel);return e?t.indexOf(e):-1},setActive:e=>this._rowsOf(this._navPanel)[e]?.focus({preventScroll:!0})}),this._onContextMenu=e=>this._handleContextMenu(e),this._onContextMenuCapture=e=>{this.isOpen&&!this._inPanel(e.target)&&!this._isKeyEcho()&&this.close()},this._onDocKeyDown=e=>this._handleDocKeyDown(e),this._onDocClick=e=>this._handleDocClick(e),this._onPointerDown=e=>this._handlePointerDown(e),this._onPressMove=e=>{this._press&&Math.hypot(e.clientX-this._press.x,e.clientY-this._press.y)>f&&this._cancelPress()},this._onPressEnd=()=>this._cancelPress(),this._onClickCapture=e=>{if(this._swallowClick&&this._region){if(!(e.target instanceof Node))throw Error(`a click target is always a node`);this._region.contains(e.target)&&(this._swallowClick=!1,e.preventDefault(),e.stopImmediatePropagation())}},this._onKeyDown=e=>{this._inPanel(e.target)&&this._handleMenuKey(e)},this._onClick=e=>this._handleClick(e),this._onInput=e=>this._handleInput(e),this._onMouseMove=e=>{let t=D(y(e.target),o);t&&this._inPanel(t)&&!this._isDisabled(t)&&t!==document.activeElement&&t.focus({preventScroll:!0})},this._onDismiss=e=>{this.hasAttribute(`open`)||e.type===`scroll`&&this._inPanel(e.target)||this.close()},this._onPointerDownCapture=e=>{this._swallowClick=!1,this.isOpen&&!this.hasAttribute(`open`)&&!this._inPanel(e.target)&&this.close()}}connectedCallback(){this._teardown(),document.addEventListener(`contextmenu`,this._onContextMenuCapture,!0),document.addEventListener(`contextmenu`,this._onContextMenu),document.addEventListener(`keydown`,this._onDocKeyDown),document.addEventListener(`pointerdown`,this._onPointerDownCapture,!0),document.addEventListener(`pointerdown`,this._onPointerDown),document.addEventListener(`click`,this._onClickCapture,!0),document.addEventListener(`click`,this._onDocClick),window.addEventListener(`keydown`,this._onKeyDown,!0),this.addEventListener(`click`,this._onClick),this.addEventListener(`input`,this._onInput),this.addEventListener(`mousemove`,this._onMouseMove),this._syncOpen()}disconnectedCallback(){this._teardown()}attributeChangedCallback(e){e===`open`?this.isConnected&&this._syncOpen():this.disabled&&this.close()}get target(){return this.getAttribute(`target`)}set target(e){e==null||e===``?this.removeAttribute(`target`):this.setAttribute(`target`,String(e))}get disabled(){return this.hasAttribute(`disabled`)}set disabled(e){this.toggleAttribute(`disabled`,!!e)}get isOpen(){return this._panel()?.hasAttribute(u)??!1}open(e,t,{region:r=this,origin:i=r,trigger:a=null,keyboard:o=!1}={}){let s=this._panel();if(!s)return!1;let c=new CustomEvent(`wui-context-menu:beforeopen`,{bubbles:!0,cancelable:!0,detail:{region:r,origin:i,trigger:a}});if(this.dispatchEvent(c),c.defaultPrevented)return!1;if(this._decorate(s),m&&m!==this&&m.close(!0),!this.isOpen){let e=document.activeElement;this._returnFocus=e&&e!==document.body&&!this._inPanel(e)&&b(e)?e:null}return this._region=r,this._origin=i,h=null,s.setAttribute(u,``),m=this,(0,n.anchorOverlay)({getBoundingClientRect:()=>({x:e,y:t,left:e,right:e,top:t,bottom:t,width:0,height:0,toJSON:()=>({})})},s,{clampHeight:!0}),window.addEventListener(`scroll`,this._onDismiss,!0),window.addEventListener(`resize`,this._onDismiss),window.addEventListener(`blur`,this._onDismiss),((o?this._rowsOf(s)[0]:null)??s).focus({preventScroll:!0}),this.dispatchEvent(new CustomEvent(`wui-context-menu:open`,{bubbles:!0,detail:{region:r,origin:i,x:e,y:t}})),!0}_syncOpen(){if(!this.hasAttribute(`open`)){this.close(this._inPanel(document.activeElement));return}let e=this.target?document.querySelector(this.target):this,t=e&&this._regionRect(e);e&&t&&this.open(t.left,t.top,{region:e,origin:e})}_regionRect(e){if(e!==this)return e.getBoundingClientRect();let t=[...this.children].filter(e=>e!==this._panel()).map(e=>e.getBoundingClientRect());return t.length?{left:Math.min(...t.map(e=>e.left)),top:Math.min(...t.map(e=>e.top))}:null}close(e=!1){let t=this._panel();if(!t?.hasAttribute(u))return;for(let e of S(t,s))this._setSub(e,!1);t.removeAttribute(u),m===this&&(m=null),window.removeEventListener(`scroll`,this._onDismiss,!0),window.removeEventListener(`resize`,this._onDismiss),window.removeEventListener(`blur`,this._onDismiss),this._nav.teardown();let n=this._returnFocus;this._returnFocus=null,e&&n?.isConnected&&n.focus({preventScroll:!0})}_panel(){return C(this).find(e=>e.getAttribute(`role`)===`menu`)??null}_inPanel(e){return e instanceof Node&&!!this._panel()?.contains(e)}_rowsOf(e){return e?S(e,o).filter(t=>t.closest(`[role="menu"]`)===e&&!this._isDisabled(t)&&!t.closest(`[hidden]`)):[]}_isDisabled(e){return e.getAttribute(`aria-disabled`)===`true`}_regionFor(e){let t=y(e);if(!t||this.disabled||!this._panel()||this._inPanel(t)||t.closest(l))return null;let n=this.target;return n?t.closest(n):this.contains(t)?this:null}_triggerFor(e){let t=y(e),n=this.getAttribute(`trigger`);if(!t||!n||this._inPanel(t))return null;let r=D(t,n),i=r&&this._regionFor(r);return r&&i?{trigger:r,region:i}:null}_isKeyEcho(){return h?.menu===this&&this.isOpen&&performance.now()-h.at<p}_handleContextMenu(e){if(this._inPanel(e.target)){e.preventDefault();return}if(e.defaultPrevented&&!_.has(e))return;let t=this._regionFor(e.target);t&&(this._isKeyEcho()?e.preventDefault():e.shiftKey||v(e,t,()=>this.close(!0))&&this.open(e.clientX,e.clientY,{region:t,origin:y(e.target)})&&e.preventDefault())}_handleDocKeyDown(e){if(e.defaultPrevented&&!_.has(e))return;if(e.key===`Enter`){let t=this._triggerFor(e.target);if(!t||!v(e,t.region,()=>this.close(!0)))return;e.preventDefault(),t.trigger.click();return}if(!(e.key===`ContextMenu`||e.key===`F10`&&e.shiftKey)||this._inPanel(e.target))return;let t=this._regionFor(e.target);if(!t||!v(e,t,()=>this.close(!0)))return;let n=y(e.target);if(!n)return;let r=n.getBoundingClientRect();this.open(r.left+Math.min(16,r.width/2),r.bottom,{region:t,origin:n,keyboard:!0})&&(e.preventDefault(),h={menu:this,at:performance.now()})}_handleDocClick(e){let t=this._triggerFor(e.target);if(!t||!v(e,t.region,()=>this.close(!0)))return;let n=t.trigger.getBoundingClientRect();this.open(n.left,n.bottom,{region:t.region,origin:t.trigger,trigger:t.trigger,keyboard:e.detail===0})}_handlePointerDown(e){if(e.pointerType!==`touch`)return;let t=this._regionFor(e.target);if(!t||!v(e,t,()=>this._cancelPress()))return;this._cancelPress();let{clientX:n,clientY:r}=e,i=y(e.target);this._press={x:n,y:r,timer:setTimeout(()=>{this._cancelPress(),this.open(n,r,{region:t,origin:i})&&(this._swallowClick=!0)},d)},document.addEventListener(`pointermove`,this._onPressMove,{passive:!0}),document.addEventListener(`pointerup`,this._onPressEnd),document.addEventListener(`pointercancel`,this._onPressEnd),window.addEventListener(`scroll`,this._onPressEnd,!0)}_cancelPress(){this._press&&(clearTimeout(this._press.timer),this._press=null,document.removeEventListener(`pointermove`,this._onPressMove),document.removeEventListener(`pointerup`,this._onPressEnd),document.removeEventListener(`pointercancel`,this._onPressEnd),window.removeEventListener(`scroll`,this._onPressEnd,!0))}_handleMenuKey(e){if(!this.isOpen)return;let t=y(e.target);if(!t)return;if(t.matches(c)){this._handleSearchKey(e,t);return}let n=D(t,`[role="menu"]`);if(!n)return;let r=D(t,o),i=n.matches(`.wui-context-menu-subpanel`)?n.parentElement:null;if(e.key===`Escape`){if(e.preventDefault(),e.stopPropagation(),i)this._closeSubByKey(i);else{let e=this._openSubOf(n);e?this._closeSubByKey(e):this.close(!0)}}else if(e.key===`Tab`)this.close(!0);else if(e.key===`ArrowDown`||e.key===`ArrowUp`)e.preventDefault(),e.stopPropagation(),this._step(n,r,e.key===`ArrowDown`?1:-1);else if(e.key===`ArrowRight`){let t=r&&this._subOf(r);if(!t)return;e.preventDefault(),this._openSub(t,!0)}else if(e.key===`ArrowLeft`){if(!i)return;e.preventDefault(),this._closeSubByKey(i)}else e.key===`Enter`||e.key===` `?(e.preventDefault(),r?.click()):(this._navPanel=n,this._nav.handler(e))}_handleSearchKey(e,t){let n=D(t,s);if(!n)return;let r=this._rowsOf(E(n));e.key===`Escape`?(e.preventDefault(),e.stopPropagation(),this._closeSubByKey(n)):e.key===`ArrowDown`?(e.preventDefault(),r[0]?.focus({preventScroll:!0})):e.key===`ArrowUp`?(e.preventDefault(),r[r.length-1]?.focus({preventScroll:!0})):e.key===`Tab`&&this.close(!0)}_step(e,t,n){let r=this._rowsOf(e);if(!r.length)return;let i=t?r.indexOf(t):-1;r[i<0?n>0?0:r.length-1:(i+n+r.length)%r.length]?.focus({preventScroll:!0})}_subOf(e){return e.hasAttribute(`aria-haspopup`)&&e.parentElement?.matches(s)?e.parentElement:null}_openSubOf(e){return C(e).find(e=>e.matches(s)&&E(e).hasAttribute(u))??null}_openSub(e,t){let n=e.parentElement;if(!n)throw Error(`a submenu is always inside its menu panel`);for(let t of C(n))t!==e&&t.matches(s)&&this._closeSub(t);this._setSub(e,!0);let r=E(e).querySelector(`:scope > ${c}`),i=e.hasAttribute(`data-searchable`)&&r instanceof HTMLInputElement?r:null;i?(i.value=``,this._filter(e,``),i.focus({preventScroll:!0})):t&&this._rowsOf(E(e))[0]?.focus({preventScroll:!0})}_closeSub(e){for(let t of S(E(e),s))this._setSub(t,!1);this._setSub(e,!1)}_closeSubByKey(e){this._closeSub(e),T(e).focus({preventScroll:!0})}_setSub(e,t){let r=T(e),i=E(e);i.toggleAttribute(u,t),r.setAttribute(`aria-expanded`,String(t)),t?(0,n.anchorOverlay)(r,i,{beside:!0}):i.removeAttribute(`data-side`)}_filter(e,t){let n=t.trim().toLowerCase();for(let t of C(E(e)))t.tagName===`HR`?t.hidden=n!==``:t.matches(o)?t.hidden=n!==``&&!x(t).toLowerCase().includes(n):t.matches(s)&&(t.hidden=n!==``&&!x(T(t)).toLowerCase().includes(n))}_handleInput(e){let t=y(e.target)?.closest(c);if(!(t instanceof HTMLInputElement))return;let n=D(t,s);n?.hasAttribute(`data-searchable`)&&this._inPanel(n)&&this._filter(n,t.value)}_decorate(e){for(let t of S(e,o)){let e=t.getAttribute(`aria-checked`)===`true`,n=t.querySelector(`:scope > .wui-context-menu-tick`);if(e&&!n){let e=document.createElement(`span`);e.className=`wui-context-menu-tick`,e.setAttribute(`aria-hidden`,`true`),t.prepend(e)}else!e&&n&&n.remove();let r=t.querySelector(`:scope > .wui-context-menu-hint`),i=t.dataset.hint;if(i){let e=r??document.createElement(`span`);r||(e.className=`wui-context-menu-hint`,e.id=`wui-context-menu-hint-${++g}`,t.append(e)),e.textContent=i,t.setAttribute(`aria-describedby`,e.id)}else r&&(r.remove(),t.removeAttribute(`aria-describedby`))}}_handleClick(e){let t=D(y(e.target),o);if(!t||!this._inPanel(t))return;if(this._isDisabled(t)){e.preventDefault(),e.stopPropagation();return}let n=this._subOf(t);n?(e.preventDefault(),this._openSub(n,e.detail===0)):(this.close(!0),this.dispatchEvent(new CustomEvent(`wui-context-menu:select`,{bubbles:!0,detail:{key:t.dataset.key??null,item:t,region:this._region,origin:this._origin}})))}_teardown(){this.close(),this._cancelPress(),document.removeEventListener(`contextmenu`,this._onContextMenuCapture,!0),document.removeEventListener(`contextmenu`,this._onContextMenu),document.removeEventListener(`keydown`,this._onDocKeyDown),document.removeEventListener(`pointerdown`,this._onPointerDownCapture,!0),document.removeEventListener(`pointerdown`,this._onPointerDown),document.removeEventListener(`click`,this._onClickCapture,!0),document.removeEventListener(`click`,this._onDocClick),window.removeEventListener(`keydown`,this._onKeyDown,!0),this.removeEventListener(`click`,this._onClick),this.removeEventListener(`input`,this._onInput),this.removeEventListener(`mousemove`,this._onMouseMove)}};(0,t.defineElement)(`wui-context-menu`,O),e.WuiContextMenu=O})(this.WeborityUiElements=this.WeborityUiElements||{},WeborityUiElementsInternal.modules.defineElement,WeborityUiElementsInternal.modules.anchorOverlay,WeborityUiElementsInternal.modules.elementBase,WeborityUiElementsInternal.modules.listboxKeyNav);
+(function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=globalThis.WeborityUiElementsInternal?.version;if(a!==`0.154.0`)throw Error(`[webority-ui] context-menu expects ui-elements 0.154.0 but the page loaded `+a+`.`);var o=`[role="menuitem"]`,s=`.wui-context-menu-sub`,c=`input.wui-context-menu-search`,l=`input, textarea, select, [contenteditable=""], [contenteditable="true"]`,u=`data-open`,d=500,f=10,p=400,m=null,h=null,g=0,_=new WeakMap;function v(e,t,n){let r=_.get(e);if(r){if(r.region===t||t.contains(r.region))return!1;r.cancel()}return _.set(e,{region:t,cancel:n}),!0}var y=e=>e instanceof Element?e:e instanceof Node?e.parentElement:null,b=e=>`focus`in e,x=e=>[...e.childNodes].filter(e=>e.nodeType===Node.TEXT_NODE||e instanceof Element&&!e.matches(`.wui-context-menu-hint, .wui-context-menu-tick`)).map(e=>e.textContent).join(``),S=(e,t)=>[...e.querySelectorAll(t)].filter(e=>e instanceof HTMLElement),C=e=>[...e.children].filter(e=>e instanceof HTMLElement),w=(e,t)=>{let n=e.children[t];if(!(n instanceof HTMLElement))throw Error(`a submenu holds its opener and then its panel`);return n},T=e=>w(e,0),E=e=>w(e,1),D=(e,t)=>{let n=e?.closest(t);return n instanceof HTMLElement?n:null},O=class extends r.ElementBase{_region;_origin;_returnFocus;_press;_swallowClick;_navPanel;_nav;_onContextMenu;_onContextMenuCapture;_onDocKeyDown;_onDocClick;_onPointerDown;_onPressMove;_onPressEnd;_onClickCapture;_onKeyDown;_onClick;_onInput;_onMouseMove;_onDismiss;_onPointerDownCapture;static get observedAttributes(){return[`disabled`,`open`]}constructor(){super(),this._region=null,this._origin=null,this._returnFocus=null,this._press=null,this._swallowClick=!1,this._navPanel=null,this._nav=(0,i.createListboxKeyNav)({getVisibleOptions:()=>this._rowsOf(this._navPanel),getActive:()=>{let e=document.activeElement,t=this._rowsOf(this._navPanel);return e?t.indexOf(e):-1},setActive:e=>this._rowsOf(this._navPanel)[e]?.focus({preventScroll:!0})}),this._onContextMenu=e=>this._handleContextMenu(e),this._onContextMenuCapture=e=>{this.isOpen&&!this._inPanel(e.target)&&!this._isKeyEcho()&&this.close()},this._onDocKeyDown=e=>this._handleDocKeyDown(e),this._onDocClick=e=>this._handleDocClick(e),this._onPointerDown=e=>this._handlePointerDown(e),this._onPressMove=e=>{this._press&&Math.hypot(e.clientX-this._press.x,e.clientY-this._press.y)>f&&this._cancelPress()},this._onPressEnd=()=>this._cancelPress(),this._onClickCapture=e=>{if(this._swallowClick&&this._region){if(!(e.target instanceof Node))throw Error(`a click target is always a node`);this._region.contains(e.target)&&(this._swallowClick=!1,e.preventDefault(),e.stopImmediatePropagation())}},this._onKeyDown=e=>{this._inPanel(e.target)&&this._handleMenuKey(e)},this._onClick=e=>this._handleClick(e),this._onInput=e=>this._handleInput(e),this._onMouseMove=e=>{let t=D(y(e.target),o);t&&this._inPanel(t)&&!this._isDisabled(t)&&t!==document.activeElement&&t.focus({preventScroll:!0})},this._onDismiss=e=>{this.hasAttribute(`open`)||e.type===`scroll`&&this._inPanel(e.target)||this.close()},this._onPointerDownCapture=e=>{this._swallowClick=!1,this.isOpen&&!this.hasAttribute(`open`)&&!this._inPanel(e.target)&&this.close()}}connectedCallback(){this._teardown(),document.addEventListener(`contextmenu`,this._onContextMenuCapture,!0),document.addEventListener(`contextmenu`,this._onContextMenu),document.addEventListener(`keydown`,this._onDocKeyDown),document.addEventListener(`pointerdown`,this._onPointerDownCapture,!0),document.addEventListener(`pointerdown`,this._onPointerDown),document.addEventListener(`click`,this._onClickCapture,!0),document.addEventListener(`click`,this._onDocClick),window.addEventListener(`keydown`,this._onKeyDown,!0),this.addEventListener(`click`,this._onClick),this.addEventListener(`input`,this._onInput),this.addEventListener(`mousemove`,this._onMouseMove),this._syncOpen()}disconnectedCallback(){this._teardown()}attributeChangedCallback(e){e===`open`?this.isConnected&&this._syncOpen():this.disabled&&this.close()}get target(){return this.getAttribute(`target`)}set target(e){e==null||e===``?this.removeAttribute(`target`):this.setAttribute(`target`,String(e))}get disabled(){return this.hasAttribute(`disabled`)}set disabled(e){this.toggleAttribute(`disabled`,!!e)}get isOpen(){return this._panel()?.hasAttribute(u)??!1}open(e,t,{region:r=this,origin:i=r,trigger:a=null,keyboard:o=!1}={}){let s=this._panel();if(!s)return!1;let c=new CustomEvent(`wui-context-menu:beforeopen`,{bubbles:!0,cancelable:!0,detail:{region:r,origin:i,trigger:a}});if(this.dispatchEvent(c),c.defaultPrevented)return!1;if(this._decorate(s),m&&m!==this&&m.close(!0),!this.isOpen){let e=document.activeElement;this._returnFocus=e&&e!==document.body&&!this._inPanel(e)&&b(e)?e:null}return this._region=r,this._origin=i,h=null,s.setAttribute(u,``),m=this,(0,n.anchorOverlay)({getBoundingClientRect:()=>({x:e,y:t,left:e,right:e,top:t,bottom:t,width:0,height:0,toJSON:()=>({})})},s,{clampHeight:!0}),window.addEventListener(`scroll`,this._onDismiss,!0),window.addEventListener(`resize`,this._onDismiss),window.addEventListener(`blur`,this._onDismiss),((o?this._rowsOf(s)[0]:null)??s).focus({preventScroll:!0}),this.dispatchEvent(new CustomEvent(`wui-context-menu:open`,{bubbles:!0,detail:{region:r,origin:i,x:e,y:t}})),!0}_syncOpen(){if(!this.hasAttribute(`open`)){this.close(this._inPanel(document.activeElement));return}let e=this.target?document.querySelector(this.target):this,t=e&&this._regionRect(e);e&&t&&this.open(t.left,t.top,{region:e,origin:e})}_regionRect(e){if(e!==this)return e.getBoundingClientRect();let t=[...this.children].filter(e=>e!==this._panel()).map(e=>e.getBoundingClientRect());return t.length?{left:Math.min(...t.map(e=>e.left)),top:Math.min(...t.map(e=>e.top))}:null}close(e=!1){let t=this._panel();if(!t?.hasAttribute(u))return;for(let e of S(t,s))this._setSub(e,!1);t.removeAttribute(u),m===this&&(m=null),window.removeEventListener(`scroll`,this._onDismiss,!0),window.removeEventListener(`resize`,this._onDismiss),window.removeEventListener(`blur`,this._onDismiss),this._nav.teardown();let n=this._returnFocus;this._returnFocus=null,e&&n?.isConnected&&n.focus({preventScroll:!0})}_panel(){return C(this).find(e=>e.getAttribute(`role`)===`menu`)??null}_inPanel(e){return e instanceof Node&&!!this._panel()?.contains(e)}_rowsOf(e){return e?S(e,o).filter(t=>t.closest(`[role="menu"]`)===e&&!this._isDisabled(t)&&!t.closest(`[hidden]`)):[]}_isDisabled(e){return e.getAttribute(`aria-disabled`)===`true`}_regionFor(e){let t=y(e);if(!t||this.disabled||!this._panel()||this._inPanel(t)||t.closest(l))return null;let n=this.target;return n?t.closest(n):this.contains(t)?this:null}_triggerFor(e){let t=y(e),n=this.getAttribute(`trigger`);if(!t||!n||this._inPanel(t))return null;let r=D(t,n),i=r&&this._regionFor(r);return r&&i?{trigger:r,region:i}:null}_isKeyEcho(){return h?.menu===this&&this.isOpen&&performance.now()-h.at<p}_handleContextMenu(e){if(this._inPanel(e.target)){e.preventDefault();return}if(e.defaultPrevented&&!_.has(e))return;let t=this._regionFor(e.target);t&&(this._isKeyEcho()?e.preventDefault():e.shiftKey||v(e,t,()=>this.close(!0))&&this.open(e.clientX,e.clientY,{region:t,origin:y(e.target)})&&e.preventDefault())}_handleDocKeyDown(e){if(e.defaultPrevented&&!_.has(e))return;if(e.key===`Enter`){let t=this._triggerFor(e.target);if(!t||!v(e,t.region,()=>this.close(!0)))return;e.preventDefault(),t.trigger.click();return}if(!(e.key===`ContextMenu`||e.key===`F10`&&e.shiftKey)||this._inPanel(e.target))return;let t=this._regionFor(e.target);if(!t||!v(e,t,()=>this.close(!0)))return;let n=y(e.target);if(!n)return;let r=n.getBoundingClientRect();this.open(r.left+Math.min(16,r.width/2),r.bottom,{region:t,origin:n,keyboard:!0})&&(e.preventDefault(),h={menu:this,at:performance.now()})}_handleDocClick(e){let t=this._triggerFor(e.target);if(!t||!v(e,t.region,()=>this.close(!0)))return;let n=t.trigger.getBoundingClientRect();this.open(n.left,n.bottom,{region:t.region,origin:t.trigger,trigger:t.trigger,keyboard:e.detail===0})}_handlePointerDown(e){if(e.pointerType!==`touch`)return;let t=this._regionFor(e.target);if(!t||!v(e,t,()=>this._cancelPress()))return;this._cancelPress();let{clientX:n,clientY:r}=e,i=y(e.target);this._press={x:n,y:r,timer:setTimeout(()=>{this._cancelPress(),this.open(n,r,{region:t,origin:i})&&(this._swallowClick=!0)},d)},document.addEventListener(`pointermove`,this._onPressMove,{passive:!0}),document.addEventListener(`pointerup`,this._onPressEnd),document.addEventListener(`pointercancel`,this._onPressEnd),window.addEventListener(`scroll`,this._onPressEnd,!0)}_cancelPress(){this._press&&(clearTimeout(this._press.timer),this._press=null,document.removeEventListener(`pointermove`,this._onPressMove),document.removeEventListener(`pointerup`,this._onPressEnd),document.removeEventListener(`pointercancel`,this._onPressEnd),window.removeEventListener(`scroll`,this._onPressEnd,!0))}_handleMenuKey(e){if(!this.isOpen)return;let t=y(e.target);if(!t)return;if(t.matches(c)){this._handleSearchKey(e,t);return}let n=D(t,`[role="menu"]`);if(!n)return;let r=D(t,o),i=n.matches(`.wui-context-menu-subpanel`)?n.parentElement:null;if(e.key===`Escape`){if(e.preventDefault(),e.stopPropagation(),i)this._closeSubByKey(i);else{let e=this._openSubOf(n);e?this._closeSubByKey(e):this.close(!0)}}else if(e.key===`Tab`)this.close(!0);else if(e.key===`ArrowDown`||e.key===`ArrowUp`)e.preventDefault(),e.stopPropagation(),this._step(n,r,e.key===`ArrowDown`?1:-1);else if(e.key===`ArrowRight`){let t=r&&this._subOf(r);if(!t)return;e.preventDefault(),this._openSub(t,!0)}else if(e.key===`ArrowLeft`){if(!i)return;e.preventDefault(),this._closeSubByKey(i)}else e.key===`Enter`||e.key===` `?(e.preventDefault(),r?.click()):(this._navPanel=n,this._nav.handler(e))}_handleSearchKey(e,t){let n=D(t,s);if(!n)return;let r=this._rowsOf(E(n));e.key===`Escape`?(e.preventDefault(),e.stopPropagation(),this._closeSubByKey(n)):e.key===`ArrowDown`?(e.preventDefault(),r[0]?.focus({preventScroll:!0})):e.key===`ArrowUp`?(e.preventDefault(),r[r.length-1]?.focus({preventScroll:!0})):e.key===`Tab`&&this.close(!0)}_step(e,t,n){let r=this._rowsOf(e);if(!r.length)return;let i=t?r.indexOf(t):-1;r[i<0?n>0?0:r.length-1:(i+n+r.length)%r.length]?.focus({preventScroll:!0})}_subOf(e){return e.hasAttribute(`aria-haspopup`)&&e.parentElement?.matches(s)?e.parentElement:null}_openSubOf(e){return C(e).find(e=>e.matches(s)&&E(e).hasAttribute(u))??null}_openSub(e,t){let n=e.parentElement;if(!n)throw Error(`a submenu is always inside its menu panel`);for(let t of C(n))t!==e&&t.matches(s)&&this._closeSub(t);this._setSub(e,!0);let r=E(e).querySelector(`:scope > ${c}`),i=e.hasAttribute(`data-searchable`)&&r instanceof HTMLInputElement?r:null;i?(i.value=``,this._filter(e,``),i.focus({preventScroll:!0})):t&&this._rowsOf(E(e))[0]?.focus({preventScroll:!0})}_closeSub(e){for(let t of S(E(e),s))this._setSub(t,!1);this._setSub(e,!1)}_closeSubByKey(e){this._closeSub(e),T(e).focus({preventScroll:!0})}_setSub(e,t){let r=T(e),i=E(e);i.toggleAttribute(u,t),r.setAttribute(`aria-expanded`,String(t)),t?(0,n.anchorOverlay)(r,i,{beside:!0}):i.removeAttribute(`data-side`)}_filter(e,t){let n=t.trim().toLowerCase();for(let t of C(E(e)))t.tagName===`HR`?t.hidden=n!==``:t.matches(o)?t.hidden=n!==``&&!x(t).toLowerCase().includes(n):t.matches(s)&&(t.hidden=n!==``&&!x(T(t)).toLowerCase().includes(n))}_handleInput(e){let t=y(e.target)?.closest(c);if(!(t instanceof HTMLInputElement))return;let n=D(t,s);n?.hasAttribute(`data-searchable`)&&this._inPanel(n)&&this._filter(n,t.value)}_decorate(e){for(let t of S(e,o)){let e=t.getAttribute(`aria-checked`)===`true`,n=t.querySelector(`:scope > .wui-context-menu-tick`);if(e&&!n){let e=document.createElement(`span`);e.className=`wui-context-menu-tick`,e.setAttribute(`aria-hidden`,`true`),t.prepend(e)}else!e&&n&&n.remove();let r=t.querySelector(`:scope > .wui-context-menu-hint`),i=t.dataset.hint;if(i){let e=r??document.createElement(`span`);r||(e.className=`wui-context-menu-hint`,e.id=`wui-context-menu-hint-${++g}`,t.append(e)),e.textContent=i,t.setAttribute(`aria-describedby`,e.id)}else r&&(r.remove(),t.removeAttribute(`aria-describedby`))}}_handleClick(e){let t=D(y(e.target),o);if(!t||!this._inPanel(t))return;if(this._isDisabled(t)){e.preventDefault(),e.stopPropagation();return}let n=this._subOf(t);n?(e.preventDefault(),this._openSub(n,e.detail===0)):(this.close(!0),this.dispatchEvent(new CustomEvent(`wui-context-menu:select`,{bubbles:!0,detail:{key:t.dataset.key??null,item:t,region:this._region,origin:this._origin}})))}_teardown(){this.close(),this._cancelPress(),document.removeEventListener(`contextmenu`,this._onContextMenuCapture,!0),document.removeEventListener(`contextmenu`,this._onContextMenu),document.removeEventListener(`keydown`,this._onDocKeyDown),document.removeEventListener(`pointerdown`,this._onPointerDownCapture,!0),document.removeEventListener(`pointerdown`,this._onPointerDown),document.removeEventListener(`click`,this._onClickCapture,!0),document.removeEventListener(`click`,this._onDocClick),window.removeEventListener(`keydown`,this._onKeyDown,!0),this.removeEventListener(`click`,this._onClick),this.removeEventListener(`input`,this._onInput),this.removeEventListener(`mousemove`,this._onMouseMove)}};(0,t.defineElement)(`wui-context-menu`,O),e.WuiContextMenu=O})(this.WeborityUiElements=this.WeborityUiElements||{},WeborityUiElementsInternal.modules.defineElement,WeborityUiElementsInternal.modules.anchorOverlay,WeborityUiElementsInternal.modules.elementBase,WeborityUiElementsInternal.modules.listboxKeyNav);

package/dist/ui-elements/date-range.global.js

@@ -1,4 +1,4 @@
-(function(e,t,n,r,i,a,o,s,c,l){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var u=globalThis.WeborityUiElementsInternal?.version;if(u!==`0.153.0`)throw Error(`[webority-ui] date-range expects ui-elements 0.153.0 but the page loaded `+u+`.`);var d=4,f=[`today`,`yesterday`,`last7Days`,`last30Days`,`thisMonth`,`lastMonth`,`thisFinancialYear`],p={today:`Today`,yesterday:`Yesterday`,last7Days:`Last 7 days`,last30Days:`Last 30 days`,thisMonth:`This month`,lastMonth:`Last month`,thisFinancialYear:`This financial year`},m=e=>String(e).padStart(2,`0`),h=e=>`${e.getUTCFullYear()}-${m(e.getUTCMonth()+1)}-${m(e.getUTCDate())}`;function g(e){return f.includes(e)}function _(e,t=new Date,{timeZone:n=a.IST_TIME_ZONE,financialYearStart:i=d}={}){if(!g(e))return null;let o=(0,r.parseIso)((0,a.todayIn)(n,t));if(!o)throw Error(`today missing`);let{y:s,m:c,d:l}=o,u=(e,t,n)=>h(new Date(Date.UTC(e,t,n))),f=p[e];switch(e){case`today`:return{label:f,start:u(s,c,l),end:u(s,c,l)};case`yesterday`:return{label:f,start:u(s,c,l-1),end:u(s,c,l-1)};case`last7Days`:return{label:f,start:u(s,c,l-6),end:u(s,c,l)};case`last30Days`:return{label:f,start:u(s,c,l-29),end:u(s,c,l)};case`thisMonth`:return{label:f,start:u(s,c,1),end:u(s,c+1,0)};case`lastMonth`:return{label:f,start:u(s,c-1,1),end:u(s,c,0)};case`thisFinancialYear`:{let e=i-1,t=c>=e?s:s-1;return{label:f,start:u(t,e,1),end:u(t+1,e,0)}}default:return null}}function v(e){(0,i.devWarn)(`[@webority/ui-elements] <wui-date-range> presets: ${e}`)}function y(e){return typeof e==`object`&&!!e}function b(e,t=new Date,n={}){let i=String(e??``).trim();if(!i)return[];let a;if(i.startsWith(`[`))try{a=JSON.parse(i)}catch{return v(`the attribute is not valid JSON`),[]}else a=i.split(`,`).map(e=>e.trim());let o=[];for(let e of a)if(typeof e==`string`){let r=_(e,t,n);r?o.push(r):v(`"${e}" is not one of ${f.join(`, `)}`)}else y(e)&&typeof e.label==`string`&&e.label&&typeof e.start==`string`&&typeof e.end==`string`&&(0,r.parseIso)(e.start)&&(0,r.parseIso)(e.end)?o.push({label:e.label,start:e.start,end:e.end}):v(`an item needs a label and ISO start and end dates, or a preset name`);return o}function x(e){if(!(e.target instanceof Element))throw Error(`Expected the event target to be an element.`);return e.target}function S(e,t){return[...e.querySelectorAll(t)].map(e=>{if(!(e instanceof HTMLElement))throw Error(`Expected every "${t}" to be an HTML element.`);return e})}var C=class extends o.ElementBase{static formAssociated=!0;_internals;_start;_end;_hover;_viewY;_viewM;static get observedAttributes(){return[`start`,`end`,`min`,`max`,`placeholder`,`disabled`,`readonly`,`loading`,`first-day`,`size`,`aria-label`,`aria-describedby`,`name`,`start-name`,`end-name`,`presets`,`time-zone`,`financial-year-start`,`aria-invalid`]}constructor(){super();try{this._internals=this.attachInternals()}catch{this._internals=null}this._start=``,this._end=``,this._hover=``;let e=new Date(2e3,0,1);this._viewY=e.getFullYear(),this._viewM=e.getMonth()}connectedCallback(){this._rendered?this._bindGlobal?.():this.render()}attributeChangedCallback(e,t,n){e===`aria-invalid`?this._syncInvalid():this._rendered&&(e===`start`||e===`end`?(this._start=this.getAttribute(`start`)||``,this._end=this.getAttribute(`end`)||``,this._syncTrigger(),this._syncMirrors()):this.render())}_syncInvalid(){let e=this.querySelector(`.daterange-trigger`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}get value(){return{start:this._start,end:this._end}}set value(e){this._start=e?.start||``,this._end=e?.end||``,this._syncTrigger(),this._syncMirrors()}_firstDay(){return(0,r.firstWeekday)(this)}_label(){let e=this.getAttribute(`placeholder`)||`Start to End`;return!this._start&&!this._end?{text:e,empty:!0}:{text:`${(0,r.fmt)(this._start)||`Start`} to ${(0,r.fmt)(this._end)||`End`}`,empty:!1}}render(){this._defaultStart===void 0&&(this._defaultStart=this.getAttribute(`start`)||``,this._defaultEnd=this.getAttribute(`end`)||``,this._start=this._defaultStart||this._start,this._end=this._defaultEnd||this._end);let e=(0,r.parseIso)(this._start);e&&(this._viewY=e.y,this._viewM=e.m);let t=this.getAttribute(`size`),n=t===`sm`?` input-sm`:t===`lg`?` input-lg`:``,{text:i,empty:a}=this._label(),o=this.getAttribute(`aria-label`),u=this.getAttribute(`aria-describedby`);this.innerHTML=`
+(function(e,t,n,r,i,a,o,s,c,l){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var u=globalThis.WeborityUiElementsInternal?.version;if(u!==`0.154.0`)throw Error(`[webority-ui] date-range expects ui-elements 0.154.0 but the page loaded `+u+`.`);var d=4,f=[`today`,`yesterday`,`last7Days`,`last30Days`,`thisMonth`,`lastMonth`,`thisFinancialYear`],p={today:`Today`,yesterday:`Yesterday`,last7Days:`Last 7 days`,last30Days:`Last 30 days`,thisMonth:`This month`,lastMonth:`Last month`,thisFinancialYear:`This financial year`},m=e=>String(e).padStart(2,`0`),h=e=>`${e.getUTCFullYear()}-${m(e.getUTCMonth()+1)}-${m(e.getUTCDate())}`;function g(e){return f.includes(e)}function _(e,t=new Date,{timeZone:n=a.IST_TIME_ZONE,financialYearStart:i=d}={}){if(!g(e))return null;let o=(0,r.parseIso)((0,a.todayIn)(n,t));if(!o)throw Error(`today missing`);let{y:s,m:c,d:l}=o,u=(e,t,n)=>h(new Date(Date.UTC(e,t,n))),f=p[e];switch(e){case`today`:return{label:f,start:u(s,c,l),end:u(s,c,l)};case`yesterday`:return{label:f,start:u(s,c,l-1),end:u(s,c,l-1)};case`last7Days`:return{label:f,start:u(s,c,l-6),end:u(s,c,l)};case`last30Days`:return{label:f,start:u(s,c,l-29),end:u(s,c,l)};case`thisMonth`:return{label:f,start:u(s,c,1),end:u(s,c+1,0)};case`lastMonth`:return{label:f,start:u(s,c-1,1),end:u(s,c,0)};case`thisFinancialYear`:{let e=i-1,t=c>=e?s:s-1;return{label:f,start:u(t,e,1),end:u(t+1,e,0)}}default:return null}}function v(e){(0,i.devWarn)(`[@webority/ui-elements] <wui-date-range> presets: ${e}`)}function y(e){return typeof e==`object`&&!!e}function b(e,t=new Date,n={}){let i=String(e??``).trim();if(!i)return[];let a;if(i.startsWith(`[`))try{a=JSON.parse(i)}catch{return v(`the attribute is not valid JSON`),[]}else a=i.split(`,`).map(e=>e.trim());let o=[];for(let e of a)if(typeof e==`string`){let r=_(e,t,n);r?o.push(r):v(`"${e}" is not one of ${f.join(`, `)}`)}else y(e)&&typeof e.label==`string`&&e.label&&typeof e.start==`string`&&typeof e.end==`string`&&(0,r.parseIso)(e.start)&&(0,r.parseIso)(e.end)?o.push({label:e.label,start:e.start,end:e.end}):v(`an item needs a label and ISO start and end dates, or a preset name`);return o}function x(e){if(!(e.target instanceof Element))throw Error(`Expected the event target to be an element.`);return e.target}function S(e,t){return[...e.querySelectorAll(t)].map(e=>{if(!(e instanceof HTMLElement))throw Error(`Expected every "${t}" to be an HTML element.`);return e})}var C=class extends o.ElementBase{static formAssociated=!0;_internals;_start;_end;_hover;_viewY;_viewM;static get observedAttributes(){return[`start`,`end`,`min`,`max`,`placeholder`,`disabled`,`readonly`,`loading`,`first-day`,`size`,`aria-label`,`aria-describedby`,`name`,`start-name`,`end-name`,`presets`,`time-zone`,`financial-year-start`,`aria-invalid`]}constructor(){super();try{this._internals=this.attachInternals()}catch{this._internals=null}this._start=``,this._end=``,this._hover=``;let e=new Date(2e3,0,1);this._viewY=e.getFullYear(),this._viewM=e.getMonth()}connectedCallback(){this._rendered?this._bindGlobal?.():this.render()}attributeChangedCallback(e,t,n){e===`aria-invalid`?this._syncInvalid():this._rendered&&(e===`start`||e===`end`?(this._start=this.getAttribute(`start`)||``,this._end=this.getAttribute(`end`)||``,this._syncTrigger(),this._syncMirrors()):this.render())}_syncInvalid(){let e=this.querySelector(`.daterange-trigger`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}get value(){return{start:this._start,end:this._end}}set value(e){this._start=e?.start||``,this._end=e?.end||``,this._syncTrigger(),this._syncMirrors()}_firstDay(){return(0,r.firstWeekday)(this)}_label(){let e=this.getAttribute(`placeholder`)||`Start to End`;return!this._start&&!this._end?{text:e,empty:!0}:{text:`${(0,r.fmt)(this._start)||`Start`} to ${(0,r.fmt)(this._end)||`End`}`,empty:!1}}render(){this._defaultStart===void 0&&(this._defaultStart=this.getAttribute(`start`)||``,this._defaultEnd=this.getAttribute(`end`)||``,this._start=this._defaultStart||this._start,this._end=this._defaultEnd||this._end);let e=(0,r.parseIso)(this._start);e&&(this._viewY=e.y,this._viewM=e.m);let t=this.getAttribute(`size`),n=t===`sm`?` input-sm`:t===`lg`?` input-lg`:``,{text:i,empty:a}=this._label(),o=this.getAttribute(`aria-label`),u=this.getAttribute(`aria-describedby`);this.innerHTML=`
       <div class="daterange">
         <button type="button" class="input daterange-trigger${n}${a?``:` has-value`}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${this.hasAttribute(`disabled`)?` disabled`:``}${o?` aria-label="${(0,l.escapeHtml)(o)}"`:``}${u?` aria-describedby="${(0,l.escapeHtml)(u)}"`:``}>
           <span data-range-label class="${a?`wui-select-placeholder`:``}">${(0,l.escapeHtml)(i)}</span>

package/dist/ui-elements/drawer.global.js

@@ -1 +1 @@
-(function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=globalThis.WeborityUiElementsInternal?.version;if(r!==`0.153.0`)throw Error(`[webority-ui] drawer expects ui-elements 0.153.0 but the page loaded `+r+`.`);var i=[50,90],a=10,o=100;function s(e,t=i){let n=Array.isArray(e)?e:String(e??``).split(`,`),r=[];for(let e of n){if(typeof e==`string`&&e.trim()===``)return t;let n=Number(e);if(!Number.isFinite(n)||n<a||n>o)return t;r.includes(n)||r.push(n)}return r.length?r.sort((e,t)=>e-t):t}function c(e){let{points:t,index:n,visible:r,velocity:i,canDismiss:a}=e,o=a?-1:0;if(Math.abs(i)>=.5)return i>0?Math.max(n-1,o):Math.min(n+1,t.length-1);let s=t[0];if(a&&s!==void 0&&r<s/2)return-1;let c=0;for(let e=1;e<t.length;e++){let n=t[e],i=t[c];if(n===void 0||i===void 0)throw Error(`snap point missing`);Math.abs(n-r)<Math.abs(i-r)&&(c=e)}return c}var l=`(max-width: 767.98px)`,u=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,d=4,f=0,p=new WeakSet;function m(e,t){let n=e[t];if(n===void 0)throw RangeError(`no snap point at ${t}`);return n}function h(e){p.has(e)||(p.add(e),e.addEventListener(`click`,t=>{let n=t.target,r=n instanceof Element?n.closest(`[data-wui-drawer-open]`):null;if(!(r instanceof HTMLElement))return;let i=(r.getAttribute(`data-wui-drawer-open`)??``).replace(/^#/,``),a=e.getElementById(i);a instanceof g&&(t.preventDefault(),a.show(r))}))}var g=class extends n.ElementBase{_doc;_media;_shown;_locked;_opener;_snap;_drag;_onMedia;_onClick;_onPointerDown;_onPointerMove;_onPointerUp;_onKeyDown;_onHostKey;_onTransitionEnd;_announced;static get observedAttributes(){return[`open`,`snap-points`,`no-sheet`]}constructor(){super(),this._doc=null,this._media=null,this._shown=!1,this._locked=!1,this._opener=null,this._snap=0,this._drag=null,this._onMedia=()=>this._syncMode(),this._onClick=e=>this._click(e),this._onPointerDown=e=>this._pointerDown(e),this._onPointerMove=e=>this._pointerMove(e),this._onPointerUp=e=>this._pointerUp(e),this._onKeyDown=e=>this._keyDown(e),this._onHostKey=e=>{e.key===`Escape`&&this._keyDown(e)},this._onTransitionEnd=e=>{e.target===this._panel()&&e.propertyName===`transform`&&this._announce()},this._announced=!1}connectedCallback(){this._doc=this.ownerDocument,h(this._doc),this.addEventListener(`click`,this._onClick),this.addEventListener(`pointerdown`,this._onPointerDown),this.addEventListener(`transitionend`,this._onTransitionEnd),this._media=typeof matchMedia==`function`?matchMedia(l):null,this._media?.addEventListener?.(`change`,this._onMedia),this._syncMode(),this._applyPoints(),this.hasAttribute(`open`)?this._open():this.setAttribute(`inert`,``)}disconnectedCallback(){this._endDrag(),this._shown&&this._release(),this.removeEventListener(`click`,this._onClick),this.removeEventListener(`pointerdown`,this._onPointerDown),this.removeEventListener(`transitionend`,this._onTransitionEnd),this._media?.removeEventListener?.(`change`,this._onMedia),this._media=null,this._doc=null}attributeChangedCallback(e){this._doc&&(e===`open`?this.hasAttribute(`open`)?this._open():this._close():e===`no-sheet`?this._syncMode():(this._snap=Math.min(this._snap,this._points().length-1),this._applyPoints()))}get isOpen(){return this.hasAttribute(`open`)}show(e){e&&(this._opener=e),this.setAttribute(`open`,``)}hide(){this.removeAttribute(`open`)}_points(){return s(this.getAttribute(`snap-points`),i)}_sheet(){return!!this._media?.matches&&!this.hasAttribute(`no-sheet`)}_syncMode(){this.setAttribute(`data-mode`,this._sheet()?`sheet`:`side`)}_applyPoints(){let e=this._points();this._snap=Math.min(Math.max(this._snap,0),e.length-1),this.style.setProperty(`--wui-drawer-max`,String(e[e.length-1])),this.style.setProperty(`--wui-drawer-snap`,String(e[this._snap])),this.setAttribute(`data-snap`,String(this._snap));let t=this.querySelector(`.wui-drawer-handle`);if(!(t instanceof Element))return;let n=e[this._snap];t.setAttribute(`aria-valuemin`,String(e[0])),t.setAttribute(`aria-valuemax`,String(e[e.length-1])),t.setAttribute(`aria-valuenow`,String(n)),t.setAttribute(`aria-valuetext`,`${n}% of the screen`)}_setSnap(e){let t=this._points(),n=Math.min(Math.max(e,0),t.length-1),r=n!==this._snap;this._snap=n,this._applyPoints(),r&&this.dispatchEvent(new CustomEvent(`wui-drawer-snap`,{bubbles:!0,detail:{index:n,percent:t[n]}}))}_open(){if(this._shown)return;this._shown=!0;let e=this._document(),t=e.activeElement;this._opener??=t instanceof HTMLElement||t instanceof SVGElement?t:null;let n=Number.parseInt(this.getAttribute(`default-snap`)??`0`,10);this._snap=Number.isFinite(n)?n:0,this._syncMode(),this._applyPoints(),this.removeAttribute(`inert`),this._locked||(this._locked=!0,f++,e.body.classList.add(`wui-drawer-locked`)),e.addEventListener(`keydown`,this._onKeyDown),this.addEventListener(`keydown`,this._onHostKey),this._focusIn(),this._settle()}_close(){if(!this._shown)return;this._endDrag(),this.setAttribute(`inert`,``);let e=this._document(),t=this._opener,n=e.activeElement;this._release(),this._opener=null,t?.isConnected&&(n===e.body||this.contains(n))&&t.focus?.(),this._settle()}_settle(){(this._panel()?.getAnimations?.()??[]).length||this._announce()}_announce(){let e=this.isOpen;e!==this._announced&&(this._announced=e,this.dispatchEvent(new CustomEvent(e?`wui-drawer-opened`:`wui-drawer-closed`,{bubbles:!0})))}_release(){this._shown=!1,this._doc?.removeEventListener(`keydown`,this._onKeyDown),this.removeEventListener(`keydown`,this._onHostKey),this._locked&&(this._locked=!1,f--,f<=0&&(f=0,this._doc?.body.classList.remove(`wui-drawer-locked`)))}_document(){let e=this._doc;if(!e)throw TypeError(`wui-drawer is not connected`);return e}_panel(){let e=this.querySelector(`.wui-drawer-panel`);return e instanceof HTMLElement?e:null}_focusables(){let e=this._panel();if(!e)return[];let t=[];for(let n of e.querySelectorAll(u))n instanceof HTMLElement&&!n.closest(`[hidden],[inert]`)&&t.push(n);return t}_focusIn(){let e=this._panel();if(!e)return;let t=e.querySelector(`[data-autofocus]`),n=this._sheet()?null:this._focusables().find(e=>e.closest(`.wui-drawer-body`));(t instanceof HTMLElement?t:n??e).focus?.({preventScroll:!0})}_dismissible(){return!this.hasAttribute(`static`)&&!this.hasAttribute(`no-dismiss`)}_requestClose(){let e=this.dispatchEvent(new CustomEvent(`wui-drawer-close`,{bubbles:!0,cancelable:!0}));return e&&this.hide(),e}_click(e){if(!this.isOpen)return;let t=e.target;t instanceof Element&&(t.closest(`[data-wui-drawer-close]`)||t.closest(`[data-wui-drawer-backdrop]`)&&this._dismissible())&&this._requestClose()}_keyDown(e){if(e.key===`Escape`){if(e.defaultPrevented||!this._dismissible()||this._document().querySelector(`.modal.show`))return;e.preventDefault(),e.stopPropagation(),this._requestClose()}else e.key===`Tab`?this._trapTab(e):e.target instanceof Element&&e.target.closest(`.wui-drawer-handle`)&&this._sheet()&&this._handleKey(e)}_trapTab(e){let t=this._focusables(),n=this._panel(),r=t[0],i=t[t.length-1];if(!r||!i){e.preventDefault(),n?.focus?.();return}let a=this._document().activeElement;!n?.contains(a)||a===n?(e.preventDefault(),(e.shiftKey?i:r).focus()):e.shiftKey&&a===r?(e.preventDefault(),i.focus()):!e.shiftKey&&a===i&&(e.preventDefault(),r.focus())}_handleKey(e){let t=this._points().length-1,n={ArrowUp:this._snap+1,ArrowDown:this._snap-1,Home:0,End:t};if(!(e.key in n))return;let r=n[e.key];r!==void 0&&(e.preventDefault(),this._setSnap(r))}_pointerDown(e){if(!this.isOpen||!this._sheet()||(e.button??0)!==0)return;let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`[data-wui-drawer-grip]`);n instanceof HTMLElement&&!t.closest(`button`)&&(this._drag={grip:n,id:e.pointerId,startY:e.clientY,lastY:e.clientY,lastT:e.timeStamp,velocity:0,moved:!1},n.setPointerCapture?.(e.pointerId),n.addEventListener(`pointermove`,this._onPointerMove),n.addEventListener(`pointerup`,this._onPointerUp),n.addEventListener(`pointercancel`,this._onPointerUp))}_viewport(){let e=this._document().defaultView;if(!e)throw TypeError(`wui-drawer has no window`);return e.innerHeight}_pointerMove(e){let t=this._drag;if(!t||e.pointerId!==t.id)return;let n=e.clientY-t.startY;if(!t.moved&&Math.abs(n)<d)return;t.moved=!0,this.classList.add(`is-dragging`);let r=e.timeStamp-t.lastT;r>0&&(t.velocity=(e.clientY-t.lastY)/r),t.lastY=e.clientY,t.lastT=e.timeStamp;let i=this._points(),a=(m(i,i.length-1)-m(i,this._snap))/100*this._viewport();t.offset=Math.max(n,-a),this.style.setProperty(`--wui-drawer-drag`,`${t.offset}px`)}_pointerUp(e){let t=this._drag;if(!t||e.pointerId!==t.id)return;let{moved:n,velocity:r,offset:i=0}=t;if(this._endDrag(),!n)return;let a=this._points(),o=this._viewport(),s=(m(a,this._snap)/100*o-i)/(o/100),l=this._dismissible(),u=c({points:a,index:this._snap,visible:s,velocity:r,canDismiss:l});u>=0?this._setSnap(u):this._requestClose()}_endDrag(){let e=this._drag;e&&(this._drag=null,e.grip.releasePointerCapture?.(e.id),e.grip.removeEventListener(`pointermove`,this._onPointerMove),e.grip.removeEventListener(`pointerup`,this._onPointerUp),e.grip.removeEventListener(`pointercancel`,this._onPointerUp),this.classList.remove(`is-dragging`),this.style.removeProperty(`--wui-drawer-drag`))}};(0,t.defineElement)(`wui-drawer`,g),e.WuiDrawer=g})(this.WeborityUiElements=this.WeborityUiElements||{},WeborityUiElementsInternal.modules.defineElement,WeborityUiElementsInternal.modules.elementBase);
+(function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=globalThis.WeborityUiElementsInternal?.version;if(r!==`0.154.0`)throw Error(`[webority-ui] drawer expects ui-elements 0.154.0 but the page loaded `+r+`.`);var i=[50,90],a=10,o=100;function s(e,t=i){let n=Array.isArray(e)?e:String(e??``).split(`,`),r=[];for(let e of n){if(typeof e==`string`&&e.trim()===``)return t;let n=Number(e);if(!Number.isFinite(n)||n<a||n>o)return t;r.includes(n)||r.push(n)}return r.length?r.sort((e,t)=>e-t):t}function c(e){let{points:t,index:n,visible:r,velocity:i,canDismiss:a}=e,o=a?-1:0;if(Math.abs(i)>=.5)return i>0?Math.max(n-1,o):Math.min(n+1,t.length-1);let s=t[0];if(a&&s!==void 0&&r<s/2)return-1;let c=0;for(let e=1;e<t.length;e++){let n=t[e],i=t[c];if(n===void 0||i===void 0)throw Error(`snap point missing`);Math.abs(n-r)<Math.abs(i-r)&&(c=e)}return c}var l=`(max-width: 767.98px)`,u=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,d=4,f=0,p=new WeakSet;function m(e,t){let n=e[t];if(n===void 0)throw RangeError(`no snap point at ${t}`);return n}function h(e){p.has(e)||(p.add(e),e.addEventListener(`click`,t=>{let n=t.target,r=n instanceof Element?n.closest(`[data-wui-drawer-open]`):null;if(!(r instanceof HTMLElement))return;let i=(r.getAttribute(`data-wui-drawer-open`)??``).replace(/^#/,``),a=e.getElementById(i);a instanceof g&&(t.preventDefault(),a.show(r))}))}var g=class extends n.ElementBase{_doc;_media;_shown;_locked;_opener;_snap;_drag;_onMedia;_onClick;_onPointerDown;_onPointerMove;_onPointerUp;_onKeyDown;_onHostKey;_onTransitionEnd;_announced;static get observedAttributes(){return[`open`,`snap-points`,`no-sheet`]}constructor(){super(),this._doc=null,this._media=null,this._shown=!1,this._locked=!1,this._opener=null,this._snap=0,this._drag=null,this._onMedia=()=>this._syncMode(),this._onClick=e=>this._click(e),this._onPointerDown=e=>this._pointerDown(e),this._onPointerMove=e=>this._pointerMove(e),this._onPointerUp=e=>this._pointerUp(e),this._onKeyDown=e=>this._keyDown(e),this._onHostKey=e=>{e.key===`Escape`&&this._keyDown(e)},this._onTransitionEnd=e=>{e.target===this._panel()&&e.propertyName===`transform`&&this._announce()},this._announced=!1}connectedCallback(){this._doc=this.ownerDocument,h(this._doc),this.addEventListener(`click`,this._onClick),this.addEventListener(`pointerdown`,this._onPointerDown),this.addEventListener(`transitionend`,this._onTransitionEnd),this._media=typeof matchMedia==`function`?matchMedia(l):null,this._media?.addEventListener?.(`change`,this._onMedia),this._syncMode(),this._applyPoints(),this.hasAttribute(`open`)?this._open():this.setAttribute(`inert`,``)}disconnectedCallback(){this._endDrag(),this._shown&&this._release(),this.removeEventListener(`click`,this._onClick),this.removeEventListener(`pointerdown`,this._onPointerDown),this.removeEventListener(`transitionend`,this._onTransitionEnd),this._media?.removeEventListener?.(`change`,this._onMedia),this._media=null,this._doc=null}attributeChangedCallback(e){this._doc&&(e===`open`?this.hasAttribute(`open`)?this._open():this._close():e===`no-sheet`?this._syncMode():(this._snap=Math.min(this._snap,this._points().length-1),this._applyPoints()))}get isOpen(){return this.hasAttribute(`open`)}show(e){e&&(this._opener=e),this.setAttribute(`open`,``)}hide(){this.removeAttribute(`open`)}_points(){return s(this.getAttribute(`snap-points`),i)}_sheet(){return!!this._media?.matches&&!this.hasAttribute(`no-sheet`)}_syncMode(){this.setAttribute(`data-mode`,this._sheet()?`sheet`:`side`)}_applyPoints(){let e=this._points();this._snap=Math.min(Math.max(this._snap,0),e.length-1),this.style.setProperty(`--wui-drawer-max`,String(e[e.length-1])),this.style.setProperty(`--wui-drawer-snap`,String(e[this._snap])),this.setAttribute(`data-snap`,String(this._snap));let t=this.querySelector(`.wui-drawer-handle`);if(!(t instanceof Element))return;let n=e[this._snap];t.setAttribute(`aria-valuemin`,String(e[0])),t.setAttribute(`aria-valuemax`,String(e[e.length-1])),t.setAttribute(`aria-valuenow`,String(n)),t.setAttribute(`aria-valuetext`,`${n}% of the screen`)}_setSnap(e){let t=this._points(),n=Math.min(Math.max(e,0),t.length-1),r=n!==this._snap;this._snap=n,this._applyPoints(),r&&this.dispatchEvent(new CustomEvent(`wui-drawer-snap`,{bubbles:!0,detail:{index:n,percent:t[n]}}))}_open(){if(this._shown)return;this._shown=!0;let e=this._document(),t=e.activeElement;this._opener??=t instanceof HTMLElement||t instanceof SVGElement?t:null;let n=Number.parseInt(this.getAttribute(`default-snap`)??`0`,10);this._snap=Number.isFinite(n)?n:0,this._syncMode(),this._applyPoints(),this.removeAttribute(`inert`),this._locked||(this._locked=!0,f++,e.body.classList.add(`wui-drawer-locked`)),e.addEventListener(`keydown`,this._onKeyDown),this.addEventListener(`keydown`,this._onHostKey),this._focusIn(),this._settle()}_close(){if(!this._shown)return;this._endDrag(),this.setAttribute(`inert`,``);let e=this._document(),t=this._opener,n=e.activeElement;this._release(),this._opener=null,t?.isConnected&&(n===e.body||this.contains(n))&&t.focus?.(),this._settle()}_settle(){(this._panel()?.getAnimations?.()??[]).length||this._announce()}_announce(){let e=this.isOpen;e!==this._announced&&(this._announced=e,this.dispatchEvent(new CustomEvent(e?`wui-drawer-opened`:`wui-drawer-closed`,{bubbles:!0})))}_release(){this._shown=!1,this._doc?.removeEventListener(`keydown`,this._onKeyDown),this.removeEventListener(`keydown`,this._onHostKey),this._locked&&(this._locked=!1,f--,f<=0&&(f=0,this._doc?.body.classList.remove(`wui-drawer-locked`)))}_document(){let e=this._doc;if(!e)throw TypeError(`wui-drawer is not connected`);return e}_panel(){let e=this.querySelector(`.wui-drawer-panel`);return e instanceof HTMLElement?e:null}_focusables(){let e=this._panel();if(!e)return[];let t=[];for(let n of e.querySelectorAll(u))n instanceof HTMLElement&&!n.closest(`[hidden],[inert]`)&&t.push(n);return t}_focusIn(){let e=this._panel();if(!e)return;let t=e.querySelector(`[data-autofocus]`),n=this._sheet()?null:this._focusables().find(e=>e.closest(`.wui-drawer-body`));(t instanceof HTMLElement?t:n??e).focus?.({preventScroll:!0})}_dismissible(){return!this.hasAttribute(`static`)&&!this.hasAttribute(`no-dismiss`)}_requestClose(){let e=this.dispatchEvent(new CustomEvent(`wui-drawer-close`,{bubbles:!0,cancelable:!0}));return e&&this.hide(),e}_click(e){if(!this.isOpen)return;let t=e.target;t instanceof Element&&(t.closest(`[data-wui-drawer-close]`)||t.closest(`[data-wui-drawer-backdrop]`)&&this._dismissible())&&this._requestClose()}_keyDown(e){if(e.key===`Escape`){if(e.defaultPrevented||!this._dismissible()||this._document().querySelector(`.modal.show`))return;e.preventDefault(),e.stopPropagation(),this._requestClose()}else e.key===`Tab`?this._trapTab(e):e.target instanceof Element&&e.target.closest(`.wui-drawer-handle`)&&this._sheet()&&this._handleKey(e)}_trapTab(e){let t=this._focusables(),n=this._panel(),r=t[0],i=t[t.length-1];if(!r||!i){e.preventDefault(),n?.focus?.();return}let a=this._document().activeElement;!n?.contains(a)||a===n?(e.preventDefault(),(e.shiftKey?i:r).focus()):e.shiftKey&&a===r?(e.preventDefault(),i.focus()):!e.shiftKey&&a===i&&(e.preventDefault(),r.focus())}_handleKey(e){let t=this._points().length-1,n={ArrowUp:this._snap+1,ArrowDown:this._snap-1,Home:0,End:t};if(!(e.key in n))return;let r=n[e.key];r!==void 0&&(e.preventDefault(),this._setSnap(r))}_pointerDown(e){if(!this.isOpen||!this._sheet()||(e.button??0)!==0)return;let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`[data-wui-drawer-grip]`);n instanceof HTMLElement&&!t.closest(`button`)&&(this._drag={grip:n,id:e.pointerId,startY:e.clientY,lastY:e.clientY,lastT:e.timeStamp,velocity:0,moved:!1},n.setPointerCapture?.(e.pointerId),n.addEventListener(`pointermove`,this._onPointerMove),n.addEventListener(`pointerup`,this._onPointerUp),n.addEventListener(`pointercancel`,this._onPointerUp))}_viewport(){let e=this._document().defaultView;if(!e)throw TypeError(`wui-drawer has no window`);return e.innerHeight}_pointerMove(e){let t=this._drag;if(!t||e.pointerId!==t.id)return;let n=e.clientY-t.startY;if(!t.moved&&Math.abs(n)<d)return;t.moved=!0,this.classList.add(`is-dragging`);let r=e.timeStamp-t.lastT;r>0&&(t.velocity=(e.clientY-t.lastY)/r),t.lastY=e.clientY,t.lastT=e.timeStamp;let i=this._points(),a=(m(i,i.length-1)-m(i,this._snap))/100*this._viewport();t.offset=Math.max(n,-a),this.style.setProperty(`--wui-drawer-drag`,`${t.offset}px`)}_pointerUp(e){let t=this._drag;if(!t||e.pointerId!==t.id)return;let{moved:n,velocity:r,offset:i=0}=t;if(this._endDrag(),!n)return;let a=this._points(),o=this._viewport(),s=(m(a,this._snap)/100*o-i)/(o/100),l=this._dismissible(),u=c({points:a,index:this._snap,visible:s,velocity:r,canDismiss:l});u>=0?this._setSnap(u):this._requestClose()}_endDrag(){let e=this._drag;e&&(this._drag=null,e.grip.releasePointerCapture?.(e.id),e.grip.removeEventListener(`pointermove`,this._onPointerMove),e.grip.removeEventListener(`pointerup`,this._onPointerUp),e.grip.removeEventListener(`pointercancel`,this._onPointerUp),this.classList.remove(`is-dragging`),this.style.removeProperty(`--wui-drawer-drag`))}};(0,t.defineElement)(`wui-drawer`,g),e.WuiDrawer=g})(this.WeborityUiElements=this.WeborityUiElements||{},WeborityUiElementsInternal.modules.defineElement,WeborityUiElementsInternal.modules.elementBase);