@mediquo/elements 0.10.4 → 0.10.6

package/dist/ui/mq-dialog.js

@@ -1 +1,341 @@
-import{_ as e,c as t}from"../chunks/custom-element-D2ziPxYE.js";import{i as o,a as i,x as a}from"../chunks/lit-element-DiWJYFwC.js";import{n as s}from"../chunks/property-scuRaFcM.js";import{r}from"../chunks/state-LQivXIgA.js";import{xIcon as n}from"./icons/x-icon.js";import"../chunks/if-defined-BYeVdwgd.js";import"./icons/types.js";const l=o`:host{display:contents}dialog.root{padding:0;border:none;margin:0;max-width:none;max-height:none;position:fixed;inset:0;width:100%;height:100%;background:var(--dialog-underlay);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--dialog-transition-duration) ease}dialog.root:not([open]){display:none}dialog.root::backdrop{background:0 0}.dialog{background:var(--color-neutrals-background-extraWeak,var(--color-background,var(--color-white)));color:var(--color-neutrals-text-default,var(--color-foreground,var(--color-black)));border-radius:var(--border-radius-lg);width:calc(100% - var(--mq-safe-left,0px) - var(--mq-safe-right,0px));max-height:calc(100vh - var(--mq-safe-top,0px) - var(--mq-safe-bottom,0px));margin-top:var(--mq-safe-top,0);margin-bottom:var(--mq-safe-bottom,0);margin-left:var(--mq-safe-left,0);margin-right:var(--mq-safe-right,0);box-shadow:var(--dialog-shadow);outline:0;display:flex;flex-direction:column;overflow:hidden;opacity:0;transition:opacity var(--dialog-transition-duration,180ms) ease,transform var(--dialog-transition-duration,180ms) ease;transform:scale(.95);position:relative}.heading{padding:var(--sp-4) var(--sp-5) 0 var(--sp-5);font-size:var(--text-lg);font-weight:var(--font-weight-semibold)}.subheading{padding:var(--sp-1) var(--sp-5) 0 var(--sp-5);color:var(--color-neutrals-text-medium,var(--color-gray-darker));font-size:var(--text-sm);line-height:var(--text-sm--line-height);font-weight:var(--font-weight-normal)}.content{padding:var(--sp-3) var(--sp-5) var(--sp-5) var(--sp-5);flex:1;min-height:0;overflow-y:auto}dialog.root.active{opacity:1}dialog.root.active .dialog{opacity:1;transform:scale(1)}.close-btn{position:absolute;top:var(--sp-2);right:var(--sp-2);border:none;background:0 0;padding:var(--sp-2);border-radius:var(--border-radius-lg);cursor:pointer;line-height:0;color:inherit}.close-btn:hover{background:var(--dialog-close-hover-bg)}.close-btn:disabled{opacity:.4;cursor:default}@media (min-width:768px){.dialog{min-width:425px;max-width:min(470px,calc(100vw - var(--sp-8)))}}`,d=["a[href]","area[href]","button",'input:not([type="hidden"])',"select","textarea","iframe","audio[controls]","video[controls]",'[contenteditable]:not([contenteditable="false"])',"[tabindex]"].join(",");let c=class MqDialog extends i{constructor(){super(...arguments),this.open=!1,this.dismissable=!0,this.isActive=!1,this.closeTimer=null,this.onDialogClick=e=>{this.dismissable&&e.target===this.shadowRoot?.querySelector("dialog")&&this.requestClose()},this.onCancel=e=>{e.preventDefault(),this.dismissable&&this.requestClose()},this.onNativeClose=()=>{this.open&&(this.open=!1)},this.onCloseClick=()=>{this.dismissable&&this.requestClose()},this.onKeyDown=e=>{if("Tab"!==e.key)return;const t=this.getTabbableElements();if(0===t.length)return void e.preventDefault();const o=t[0],i=t[t.length-1];if(!o||!i)return;const a=this.getDeepActiveElement();e.shiftKey||a!==i?e.shiftKey&&a===o&&(e.preventDefault(),i.focus()):(e.preventDefault(),o.focus())}}static{this.styles=[l]}updated(e){if(!e.has("open"))return;const t=this.shadowRoot?.querySelector("dialog");t&&(this.open?(this.closeTimer&&(window.clearTimeout(this.closeTimer),this.closeTimer=null),t.open||"function"!=typeof t.showModal||t.showModal(),requestAnimationFrame(()=>{this.isActive=!0})):(this.isActive=!1,this.closeTimer&&window.clearTimeout(this.closeTimer),this.closeTimer=window.setTimeout(()=>{t.open&&t.close(),this.closeTimer=null},200)))}getDeepActiveElement(){let e=document.activeElement;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e}getTabbableElements(){const e=this.shadowRoot?.querySelector(".dialog");if(!e)return[];const t=[];return this.collectTabbable(e,t),t}collectTabbable(e,t){if(this.isTabbable(e)&&t.push(e),e.shadowRoot)for(const o of e.shadowRoot.children)this.collectTabbable(o,t);else if(e instanceof HTMLSlotElement)for(const o of e.assignedElements({flatten:!0}))this.collectTabbable(o,t);else for(const o of e.children)this.collectTabbable(o,t)}isTabbable(e){if(!(e instanceof HTMLElement))return!1;if(!e.matches(d))return!1;if(e.hasAttribute("disabled")||e.hasAttribute("inert"))return!1;if("true"===e.getAttribute("aria-hidden"))return!1;const t=e.getAttribute("tabindex");return!(null!==t&&Number(t)<0)&&(null!==e.offsetParent||e.getClientRects().length>0)}requestClose(){this.dispatchEvent(new CustomEvent("mq-close",{bubbles:!0,composed:!0})),this.open=!1}render(){return a`<dialog class="root ${this.isActive?"active":""}" @click="${this.onDialogClick}" @keydown="${this.onKeyDown}" @cancel="${this.onCancel}" @close="${this.onNativeClose}" aria-labelledby="dialog-heading" aria-describedby="dialog-subheading"><div class="dialog" part="dialog"><button class="close-btn" part="close" type="button" aria-label="Close dialog" title="Close" ?disabled="${!this.dismissable}" @click="${this.onCloseClick}">${n({size:20})}</button><div class="heading" part="heading" id="dialog-heading"><slot name="heading"></slot></div><div class="subheading" part="subheading" id="dialog-subheading"><slot name="subheading"></slot></div><div class="content" part="content"><slot></slot></div></div></dialog>`}};e([s({type:Boolean,reflect:!0})],c.prototype,"open",void 0),e([s({type:Boolean,reflect:!0})],c.prototype,"dismissable",void 0),e([r()],c.prototype,"isActive",void 0),c=e([t("mq-dialog")],c);export{c as MqDialog};
+import{e,t}from"../chunks/custom-element-CiOhPWP1-DPpsGZrV.js";import{i,a as o,E as s,x as a,r}from"../chunks/lit-element-DiWJYFwC.js";import{n as l}from"../chunks/property-scuRaFcM.js";import{r as n}from"../chunks/state-LQivXIgA.js";const h="4px",d="0px 8px 16px 0px rgb(0 0 0 / 0.1)",c="rgb(0 0 0 / 0.05)",m="200ms",g="0.5rem",b="3.75rem",u="0.75rem",p="1.25rem",v="1rem",f="0.625rem",y="25rem",w="12rem",x=(e,t)=>r(`var(--dialog-${e}, ${t})`),q=x("underlay","rgb(0 0 0 / 0.5)"),S=x("underlay-blur",h),$=x("shadow",d),k=x("close-hover-bg",c),C=x("transition-duration",m),E=x("radius",g),T=x("header-height",b),N=x("padding-inline",u),D=x("padding-block",p),A=x("gap",v),M=x("actions-gap",f),F=i`
+  :host {
+    display: contents;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  dialog.root {
+    /* Reset user-agent dialog styles */
+    padding: 0;
+    border: none;
+    margin: 0;
+    max-width: none;
+    max-height: none;
+    /* Full-viewport underlay so clicks outside the card hit the dialog */
+    position: fixed;
+    inset: 0;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    background: ${q};
+    backdrop-filter: blur(${S});
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity ${C} ease;
+  }
+
+  dialog.root:not([open]) {
+    display: none;
+  }
+
+  /* The dim is the dialog's own background, so it can animate via .active */
+  dialog.root::backdrop {
+    background: transparent;
+  }
+
+  .dialog {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    /* 1rem of air on each side on phones, inside the safe area */
+    width: calc(
+      100% - 2rem - var(--mq-safe-left, 0px) - var(--mq-safe-right, 0px)
+    );
+    max-width: ${x("max-width",y)};
+    /* vh first for browsers without dvh; dvh wins where it exists, so the
+       card never grows under a mobile browser's toolbars. */
+    max-height: calc(
+      100vh - 2rem - var(--mq-safe-top, 0px) - var(--mq-safe-bottom, 0px)
+    );
+    max-height: calc(
+      100dvh - 2rem - var(--mq-safe-top, 0px) - var(--mq-safe-bottom, 0px)
+    );
+    margin-top: var(--mq-safe-top, 0px);
+    margin-bottom: var(--mq-safe-bottom, 0px);
+    margin-left: var(--mq-safe-left, 0px);
+    margin-right: var(--mq-safe-right, 0px);
+    border: none;
+    border-radius: ${E};
+    background: var(
+      --mq-surface-surface,
+      var(--color-neutrals-background-extraWeak, #ffffff)
+    );
+    color: var(--mq-text-primary, var(--color-neutrals-text-default, #0a0a23));
+    font-family: var(--mq-typography-family-sans, var(--font-body, inherit));
+    box-shadow: ${$};
+    outline: none;
+    overflow: hidden;
+    opacity: 0;
+    transform: scale(0.95);
+    transition:
+      opacity ${C} ease,
+      transform ${C} ease;
+  }
+
+  dialog.root.active {
+    opacity: 1;
+  }
+
+  dialog.root.active .dialog {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  /* Image, header and body scroll together; the close button and the actions
+     stay put. */
+  .scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  /* Focusable only while it overflows, so a keyboard user can scroll it —
+     Safari does not make scrollers focusable on its own. */
+  .scroll:focus-visible {
+    outline: 2px solid var(--mq-border-focus, var(--color-primary, #4a1ea7));
+    outline-offset: -2px;
+  }
+
+  .image {
+    line-height: 0;
+  }
+
+  .image ::slotted(img),
+  .image ::slotted(picture),
+  .image ::slotted(video),
+  .image ::slotted(svg) {
+    display: block;
+    width: 100%;
+    max-height: ${x("image-max-height",w)};
+    object-fit: cover;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: ${T};
+    /* The end side leaves room for the close button sitting in the band. */
+    padding: var(--mq-spacing-2, 0.5rem) var(--mq-spacing-12, 3rem)
+      var(--mq-spacing-2, 0.5rem) ${N};
+    background: var(--mq-surface-surface-raised, var(--color-muted, #f8f7fa));
+  }
+
+  /* Over an image the close button sits on the image, not in the band. */
+  .dialog.with-image .header {
+    padding-inline-end: ${N};
+  }
+
+  .heading {
+    font-family: var(--mq-typography-family-sans, var(--font-titles, inherit));
+    font-size: var(--mq-typography-size-base, 1rem);
+    font-weight: var(--mq-typography-weight-medium, 500);
+    line-height: 1.25rem;
+    color: var(--mq-text-brand, var(--color-primary, #4a1ea7));
+  }
+
+  .body {
+    display: grid;
+    gap: ${A};
+    padding: ${D} ${N};
+  }
+
+  /* No header band to hold the close button: keep the body clear of it. */
+  .dialog:not(.with-heading):not(.with-image) .body {
+    padding-inline-end: var(--mq-spacing-12, 3rem);
+  }
+
+  .subheading {
+    font-size: var(--mq-typography-size-xs, 0.75rem);
+    font-weight: var(--mq-typography-weight-normal, 400);
+    line-height: 1rem;
+    /* ≈ Figma's #6d658b on white, and still readable in dark mode;
+       --mq-text-secondary would fall under 4.5:1. */
+    color: var(
+      --color-neutrals-text-medium,
+      color-mix(in srgb, var(--mq-text-primary, #0a0a23) 64%, transparent)
+    );
+  }
+
+  /* Headings bring their own UA margins and sizes; start from the design's.
+     Styles the owner gives its own heading still win over these. */
+  .heading ::slotted(*),
+  .subheading ::slotted(*) {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+  }
+
+  .footer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: flex-end;
+    gap: ${M};
+    padding: var(--mq-spacing-3, 0.75rem) ${N}
+      var(--mq-spacing-4, 1rem);
+    border-top: var(--mq-size-border-default, 1px) solid
+      var(--mq-border-default, var(--color-border, #edecf1));
+  }
+
+  .close-btn {
+    position: absolute;
+    /* Centred in the header band: (band - button) / 2 */
+    top: calc((${T} - var(--mq-size-control-sm, 2rem)) / 2);
+    right: var(--mq-spacing-2, 0.5rem);
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--mq-size-control-sm, 2rem);
+    height: var(--mq-size-control-sm, 2rem);
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: var(--mq-radius-md, 0.375rem);
+    background: transparent;
+    /* Not --mq-text-secondary: grey.500 is 2.79:1 on the band, under the 3:1 a
+       control's icon needs. Same derivation as the subheading. */
+    color: var(
+      --color-neutrals-text-medium,
+      color-mix(in srgb, var(--mq-text-primary, #0a0a23) 64%, transparent)
+    );
+    cursor: pointer;
+    transition: background-color ${C} ease;
+  }
+
+  .close-btn svg {
+    width: var(--mq-size-icon-lg, 1.5rem);
+    height: var(--mq-size-icon-lg, 1.5rem);
+    pointer-events: none;
+  }
+
+  .close-btn:hover {
+    background: ${k};
+  }
+
+  .close-btn:focus-visible {
+    outline: 2px solid var(--mq-border-focus, var(--color-primary, #4a1ea7));
+    outline-offset: 2px;
+  }
+
+  /* Over a photo the bare glyph can vanish; give it a chip to sit on. */
+  .dialog.with-image .close-btn {
+    top: var(--mq-spacing-3, 0.75rem);
+    right: var(--mq-spacing-3, 0.75rem);
+    border-radius: var(--mq-radius-full, 9999px);
+    background: var(
+      --mq-surface-surface,
+      var(--color-neutrals-background-extraWeak, #ffffff)
+    );
+    opacity: 0.9;
+  }
+
+  .dialog.with-image .close-btn:hover {
+    opacity: 1;
+  }
+
+  .close-btn:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  @media (forced-colors: active) {
+    .dialog {
+      border: 1px solid CanvasText;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    dialog.root,
+    .dialog,
+    .close-btn {
+      transition: none;
+    }
+
+    .dialog {
+      transform: none;
+    }
+  }
+`,z=["a[href]","area[href]","button",'input:not([type="hidden"])',"select","textarea","iframe","audio[controls]","video[controls]",'[contenteditable]:not([contenteditable="false"])',"[tabindex]"].join(",");let O=0,R="",H="";class MqDialogCloseEvent extends Event{static{this.eventName="mq-close"}constructor(){super(MqDialogCloseEvent.eventName,{bubbles:!0,composed:!0,cancelable:!0})}}let j=class MqDialog extends o{constructor(){super(...arguments),this.open=!1,this.dismissable=!0,this.alert=!1,this.label="",this.closeLabel="Close dialog",this.isActive=!1,this.hasImage=!1,this.hasHeading=!1,this.hasSubheading=!1,this.hasFooter=!1,this.isModal=!1,this.scrollable=!1,this.enterFrame=null,this.slotObserver=null,this.scrollObserver=null,this.closeTimer=null,this.lockedScroll=!1,this.backdropPointerDown=!1,this.warnedAboutName=!1,this.detaching=!1,this.onSlotChange=()=>{this.readSlots()},this.onDialogPointerDown=e=>{this.backdropPointerDown=e.target===this.dialogEl},this.onDialogClick=e=>{const t=this.backdropPointerDown&&e.target===this.dialogEl;this.backdropPointerDown=!1,t&&this.dismissable&&this.requestClose()},this.onCancel=e=>{e.preventDefault(),this.dismissable&&this.requestClose()},this.onNativeClose=()=>{this.detaching||(this.open?this.dismissable||!this.isConnected?(this.releaseScroll(),this.dispatchEvent(new MqDialogCloseEvent),this.open=!1):this.openNative():this.releaseScroll())},this.onCloseClick=()=>{this.dismissable&&this.requestClose()},this.onKeyDown=e=>{if("Tab"!==e.key)return;const t=this.getTabbableElements();if(0===t.length)return void e.preventDefault();const i=t[0],o=t[t.length-1];if(!i||!o)return;const s=this.getDeepActiveElement();e.shiftKey||s!==o?e.shiftKey&&s===i&&(e.preventDefault(),o.focus()):(e.preventDefault(),i.focus())}}static{this.styles=[F]}get dialogEl(){return this.shadowRoot?.querySelector("dialog")??null}connectedCallback(){super.connectedCallback(),this.readSlots(),this.slotObserver=new MutationObserver(()=>this.readSlots()),this.slotObserver.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["slot"]}),this.hasUpdated&&(this.observeScroll(),this.open&&this.openNative())}disconnectedCallback(){this.slotObserver?.disconnect(),this.slotObserver=null,this.scrollObserver?.disconnect(),this.scrollObserver=null,this.cancelEnterFrame(),this.closeTimer&&(window.clearTimeout(this.closeTimer),this.closeTimer=null),this.detaching=!0,this.closeNative(),this.detaching=!1,this.isActive=!1,super.disconnectedCallback()}firstUpdated(){this.observeScroll()}observeScroll(){if(this.scrollObserver||"undefined"==typeof ResizeObserver)return;const e=this.shadowRoot?.querySelector(".scroll");if(!e)return;this.scrollObserver=new ResizeObserver(()=>this.measureScroll()),this.scrollObserver.observe(e);const t=this.shadowRoot?.querySelector(".scroll > .body");t&&this.scrollObserver.observe(t)}updated(e){if(!e.has("open"))return;if(!this.dialogEl)return;if(this.open)return this.closeTimer&&(window.clearTimeout(this.closeTimer),this.closeTimer=null),this.openNative(),void this.warnAboutMissingName();if(this.cancelEnterFrame(),this.isActive=!1,!this.dialogEl.open)return void this.releaseScroll();this.closeTimer&&window.clearTimeout(this.closeTimer);const t=this.shadowRoot?.querySelector(".dialog");this.closeTimer=window.setTimeout(()=>{this.closeNative(),this.closeTimer=null},function(e){if(!e)return 0;const t=getComputedStyle(e).transitionDuration.split(",");return Math.max(0,...t.map(e=>{const t=Number.parseFloat(e);return Number.isNaN(t)?0:e.trim().endsWith("ms")?t:1e3*t}))}(t))}openNative(){const e=this.dialogEl;e&&(e.open||("function"==typeof e.showModal?(e.showModal(),this.isModal=!0):(e.setAttribute("open",""),this.isModal=!1)),this.holdScroll(),this.measureScroll(),this.cancelEnterFrame(),this.enterFrame=requestAnimationFrame(()=>{this.enterFrame=null,this.open&&(this.isActive=!0)}))}cancelEnterFrame(){null!==this.enterFrame&&(cancelAnimationFrame(this.enterFrame),this.enterFrame=null)}measureScroll(){const e=this.shadowRoot?.querySelector(".scroll");e&&(this.scrollable=e.scrollHeight>e.clientHeight+1)}closeNative(){const e=this.dialogEl;e?.open&&("function"==typeof e.close?e.close():e.removeAttribute("open")),this.releaseScroll()}holdScroll(){this.lockedScroll||(function(){if(0===O){const e=document.documentElement,t=window.innerWidth-e.clientWidth;if(R=e.style.overflow,H=e.style.paddingRight,e.style.overflow="hidden",e.clientWidth>0&&t>0){const i=Number.parseFloat(getComputedStyle(e).paddingRight);e.style.paddingRight=`${(Number.isNaN(i)?0:i)+t}px`}}O+=1}(),this.lockedScroll=!0)}releaseScroll(){this.lockedScroll&&(function(){if(0!==O&&(O-=1,0===O)){const e=document.documentElement;e.style.overflow=R,e.style.paddingRight=H}}(),this.lockedScroll=!1)}warnAboutMissingName(){this.hasHeading||this.label||this.warnedAboutName||(this.warnedAboutName=!0,console.warn('mq-dialog: nothing is in the "heading" slot and no label was set, so the dialog has no accessible name and a screen reader will announce it as just "dialog". Add a heading or pass a label attribute.'))}hasSlotted(e,t){const i=Array.from(this.querySelectorAll(`:scope > [slot="${e}"]`));return t?i.some(e=>""!==(e.textContent??"").trim()):i.length>0}readSlots(){this.hasImage=this.hasSlotted("image",!1),this.hasHeading=this.hasSlotted("heading",!0),this.hasSubheading=this.hasSlotted("subheading",!0),this.hasFooter=this.hasSlotted("footer",!1),this.measureScroll(),this.open&&this.warnAboutMissingName()}getDeepActiveElement(){let e=document.activeElement;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e}getTabbableElements(){const e=this.shadowRoot?.querySelector(".dialog");if(!e)return[];const t=[];return this.collectTabbable(e,t),t}collectTabbable(e,t){if(this.isTabbable(e)&&t.push(e),e.shadowRoot)for(const i of e.shadowRoot.children)this.collectTabbable(i,t);else if(e instanceof HTMLSlotElement)for(const i of e.assignedElements({flatten:!0}))this.collectTabbable(i,t);else for(const i of e.children)this.collectTabbable(i,t)}isTabbable(e){if(!(e instanceof HTMLElement))return!1;if(!e.matches(z))return!1;if(e.hasAttribute("disabled")||e.hasAttribute("inert"))return!1;if("true"===e.getAttribute("aria-hidden"))return!1;const t=e.getAttribute("tabindex");return!(null!==t&&Number(t)<0)&&(null!==e.offsetParent||e.getClientRects().length>0)}requestClose(){this.dispatchEvent(new MqDialogCloseEvent)&&(this.open=!1)}render(){const e=["dialog",this.hasImage?"with-image":"",this.hasHeading?"with-heading":""].filter(Boolean).join(" ");return a`
+      <dialog
+        class="root ${this.isActive?"active":""}"
+        role=${this.alert?"alertdialog":s}
+        aria-modal=${this.isModal?"true":s}
+        closedby=${this.dismissable?"closerequest":"none"}
+        aria-labelledby=${this.hasHeading?"dialog-heading":s}
+        aria-label=${!this.hasHeading&&this.label?this.label:s}
+        aria-describedby=${this.hasSubheading?"dialog-subheading":s}
+        @pointerdown=${this.onDialogPointerDown}
+        @click=${this.onDialogClick}
+        @keydown=${this.onKeyDown}
+        @cancel=${this.onCancel}
+        @close=${this.onNativeClose}
+      >
+        <div class=${e} part="dialog">
+          <button
+            class="close-btn"
+            part="close"
+            type="button"
+            aria-label=${this.closeLabel}
+            title=${this.closeLabel}
+            ?disabled=${!this.dismissable}
+            @click=${this.onCloseClick}
+          >
+            <svg
+              aria-hidden="true"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </button>
+          <div
+            class="scroll"
+            part="scroll"
+            tabindex=${this.scrollable?"0":s}
+            role=${this.scrollable?"region":s}
+            aria-labelledby=${this.scrollable&&this.hasHeading?"dialog-heading":s}
+            aria-label=${this.scrollable&&!this.hasHeading&&this.label?this.label:s}
+          >
+            <div class="image" part="image" ?hidden=${!this.hasImage}>
+              <slot name="image" @slotchange=${this.onSlotChange}></slot>
+            </div>
+            <div class="header" part="header" ?hidden=${!this.hasHeading}>
+              <div class="heading" part="heading" id="dialog-heading">
+                <slot name="heading" @slotchange=${this.onSlotChange}></slot>
+              </div>
+            </div>
+            <div class="body" part="body">
+              <div
+                class="subheading"
+                part="subheading"
+                id="dialog-subheading"
+                ?hidden=${!this.hasSubheading}
+              >
+                <slot name="subheading" @slotchange=${this.onSlotChange}></slot>
+              </div>
+              <div class="content" part="content"><slot></slot></div>
+            </div>
+          </div>
+          <div class="footer" part="footer" ?hidden=${!this.hasFooter}>
+            <slot name="footer" @slotchange=${this.onSlotChange}></slot>
+          </div>
+        </div>
+      </dialog>
+    `}};e([l({type:Boolean,reflect:!0})],j.prototype,"open",void 0),e([l({type:Boolean,reflect:!0})],j.prototype,"dismissable",void 0),e([l({type:Boolean,reflect:!0})],j.prototype,"alert",void 0),e([l({type:String})],j.prototype,"label",void 0),e([l({type:String,attribute:"close-label"})],j.prototype,"closeLabel",void 0),e([n()],j.prototype,"isActive",void 0),e([n()],j.prototype,"hasImage",void 0),e([n()],j.prototype,"hasHeading",void 0),e([n()],j.prototype,"hasSubheading",void 0),e([n()],j.prototype,"hasFooter",void 0),e([n()],j.prototype,"isModal",void 0),e([n()],j.prototype,"scrollable",void 0),j=e([t("mq-dialog")],j);export{j as MqDialog,MqDialogCloseEvent};

package/dist/ui/mq-tabs.js

@@ -1,9 +1,9 @@
-import{i as t,a as e,x as s}from"../chunks/lit-element-DiWJYFwC.js";import{n as i}from"../chunks/property-scuRaFcM.js";function a(t,e,s,i){for(var a,n=arguments.length,r=n<3?e:i,o=t.length-1;o>=0;o--)(a=t[o])&&(r=(n<3?a(r):n>3?a(e,s,r):a(e,s))||r);return n>3&&r&&Object.defineProperty(e,s,r),r}"function"==typeof SuppressedError&&SuppressedError;const n=t=>(e,s)=>{const i=()=>{void 0===customElements.get(t)&&customElements.define(t,e)};void 0!==s?s.addInitializer(i):i()},r=t`
+import{e as t,t as e}from"../chunks/custom-element-CiOhPWP1-DPpsGZrV.js";import{i as s,a as i,x as a}from"../chunks/lit-element-DiWJYFwC.js";import{n}from"../chunks/property-scuRaFcM.js";const r=s`
   :host {
     display: flex;
     flex-direction: column;
   }
-`,o=t`
+`,o=s`
   :host {
     display: flex;
     align-items: center;
@@ -21,7 +21,7 @@ import{i as t,a as e,x as s}from"../chunks/lit-element-DiWJYFwC.js";import{n as
     flex-direction: column;
     align-items: stretch;
   }
-`,l=t`
+`,l=s`
   :host {
     display: inline-flex;
     flex: 1;
@@ -61,7 +61,7 @@ import{i as t,a as e,x as s}from"../chunks/lit-element-DiWJYFwC.js";import{n as
     outline: 2px solid var(--color-primary-background-default, #4a1ea7);
     outline-offset: 1px;
   }
-`,c=t`
+`,c=s`
   :host {
     display: block;
     padding: var(--mq-tabs-content-padding, var(--sp-5, 20px) 0 0);
@@ -76,4 +76,4 @@ import{i as t,a as e,x as s}from"../chunks/lit-element-DiWJYFwC.js";import{n as
     outline: 2px solid var(--color-primary-background-default, #4a1ea7);
     outline-offset: 2px;
   }
-`;let d=0;function h(t,e){t.hasAttribute("role")||t.setAttribute("role",e)}class MqTabsSelectEvent extends Event{static{this.eventName="onvaluechange"}constructor(t){super(MqTabsSelectEvent.eventName,{bubbles:!0,composed:!0}),this.value=t}}let u=class MqTabs extends e{constructor(){super(...arguments),this.defaultValue=null,this.value=null,this.activationMode="automatic",this.instanceId=(d+=1,d),this.onRequestSelect=t=>{const e=t;e.value&&(this.value=e.value)},this.orphanTriggers=new Set,this.handleSlotChange=()=>{this.applySelection()}}static{this.styles=[r]}connectedCallback(){super.connectedCallback(),this.addEventListener(MqTabsSelectEvent.eventName,this.onRequestSelect)}disconnectedCallback(){this.removeEventListener(MqTabsSelectEvent.eventName,this.onRequestSelect),super.disconnectedCallback()}firstUpdated(){if(!this.value){const t=this.defaultValue??this.triggers[0]?.value??null;t&&(this.value=t)}this.applySelection()}updated(t){t.has("value")&&this.applySelection()}get triggers(){return Array.from(this.querySelectorAll("mq-tabs-trigger"))}get panels(){return Array.from(this.querySelectorAll("mq-tabs-content"))}applySelection(){const{value:t}=this,e=this.triggers,s=this.panels,i=e.some(e=>!!t&&e.value===t);e.forEach((e,a)=>{const n=!!t&&e.value===t,r=s.find(t=>t.value===e.value);e.id||(e.id=`mq-tabs-${this.instanceId}-trigger-${a}`),r&&!r.id&&(r.id=`mq-tabs-${this.instanceId}-panel-${a}`),r?(e.setAttribute("aria-controls",r.id),r.setAttribute("aria-labelledby",e.id)):(e.removeAttribute("aria-controls"),this.warnOrphanTrigger(e.value)),e.active=n,e.tabIndex=n||!i&&0===a?0:-1});for(const e of s)e.active=!!t&&e.value===t}warnOrphanTrigger(t){t&&!this.orphanTriggers.has(t)&&(this.orphanTriggers.add(t),console.warn(`mq-tabs: no <mq-tabs-content value="${t}"> matches the trigger with that value, so the tab controls nothing and its panel will never show.`))}render(){return s`<slot @slotchange=${this.handleSlotChange}></slot>`}};a([i({type:String,attribute:"default-value"})],u.prototype,"defaultValue",void 0),a([i({type:String,reflect:!0})],u.prototype,"value",void 0),a([i({type:String,attribute:"activation-mode"})],u.prototype,"activationMode",void 0),u=a([n("mq-tabs")],u);let p=class MqTabsList extends e{constructor(){super(...arguments),this.label="",this.orientation="horizontal",this.handleSlotChange=()=>{this.closest("mq-tabs")?.applySelection()},this.handleKeyDown=t=>{if(t.key!==this.nextKey&&t.key!==this.previousKey&&"Home"!==t.key&&"End"!==t.key)return;const e=t.composedPath().find(t=>t instanceof HTMLElement&&"MQ-TABS-TRIGGER"===t.tagName);if(!e)return;const s=this.enabledTriggers;if(0===s.length)return;t.preventDefault();const i=s.indexOf(e),a=s.length-1;let n;n="Home"===t.key?0:"End"===t.key?a:t.key===this.nextKey?-1===i?0:(i+1)%s.length:i<=0?a:i-1;const r=s[n];if(!r)return;r.focus();const o=this.closest("mq-tabs");o&&"automatic"!==o.activationMode||r.select()}}static{this.styles=[o]}connectedCallback(){super.connectedCallback(),h(this,"tablist"),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}updated(){this.setAttribute("aria-orientation",this.orientation),this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")}get enabledTriggers(){return Array.from(this.querySelectorAll("mq-tabs-trigger:not([disabled])"))}get nextKey(){return"vertical"===this.orientation?"ArrowDown":"ArrowRight"}get previousKey(){return"vertical"===this.orientation?"ArrowUp":"ArrowLeft"}render(){return s`<slot @slotchange=${this.handleSlotChange}></slot>`}};a([i({type:String})],p.prototype,"label",void 0),a([i({type:String,reflect:!0})],p.prototype,"orientation",void 0),p=a([n("mq-tabs-list")],p);let b=class MqTabsTrigger extends e{constructor(){super(...arguments),this.disabled=!1,this.active=!1,this.handleClick=()=>{this.select()},this.handleKeyDown=t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.select())}}static{this.styles=[l]}connectedCallback(){super.connectedCallback(),h(this,"tab"),this.hasAttribute("tabindex")||(this.tabIndex=-1),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}updated(){this.setAttribute("aria-selected",this.active?"true":"false"),this.setAttribute("aria-disabled",this.disabled?"true":"false")}select(){!this.disabled&&this.value&&this.dispatchEvent(new MqTabsSelectEvent(this.value))}render(){return s`<slot></slot>`}};a([i({type:String,reflect:!0})],b.prototype,"value",void 0),a([i({type:Boolean,reflect:!0})],b.prototype,"disabled",void 0),a([i({type:Boolean,reflect:!0})],b.prototype,"active",void 0),b=a([n("mq-tabs-trigger")],b);let v=class MqTabsContent extends e{constructor(){super(...arguments),this.active=!1}static{this.styles=[c]}connectedCallback(){super.connectedCallback(),h(this,"tabpanel"),this.hasAttribute("tabindex")||(this.tabIndex=0)}updated(){this.toggleAttribute("hidden",!this.active)}render(){return s`<slot></slot>`}};a([i({type:String,reflect:!0})],v.prototype,"value",void 0),a([i({type:Boolean,reflect:!0})],v.prototype,"active",void 0),v=a([n("mq-tabs-content")],v);export{u as MqTabs,v as MqTabsContent,p as MqTabsList,MqTabsSelectEvent,b as MqTabsTrigger};
+`;let d=0;function h(t,e){t.hasAttribute("role")||t.setAttribute("role",e)}class MqTabsSelectEvent extends Event{static{this.eventName="onvaluechange"}constructor(t){super(MqTabsSelectEvent.eventName,{bubbles:!0,composed:!0}),this.value=t}}let u=class MqTabs extends i{constructor(){super(...arguments),this.defaultValue=null,this.value=null,this.activationMode="automatic",this.instanceId=(d+=1,d),this.onRequestSelect=t=>{const e=t;e.value&&(this.value=e.value)},this.orphanTriggers=new Set,this.handleSlotChange=()=>{this.applySelection()}}static{this.styles=[r]}connectedCallback(){super.connectedCallback(),this.addEventListener(MqTabsSelectEvent.eventName,this.onRequestSelect)}disconnectedCallback(){this.removeEventListener(MqTabsSelectEvent.eventName,this.onRequestSelect),super.disconnectedCallback()}firstUpdated(){if(!this.value){const t=this.defaultValue??this.triggers[0]?.value??null;t&&(this.value=t)}this.applySelection()}updated(t){t.has("value")&&this.applySelection()}get triggers(){return Array.from(this.querySelectorAll("mq-tabs-trigger"))}get panels(){return Array.from(this.querySelectorAll("mq-tabs-content"))}applySelection(){const{value:t}=this,e=this.triggers,s=this.panels,i=e.some(e=>!!t&&e.value===t);e.forEach((e,a)=>{const n=!!t&&e.value===t,r=s.find(t=>t.value===e.value);e.id||(e.id=`mq-tabs-${this.instanceId}-trigger-${a}`),r&&!r.id&&(r.id=`mq-tabs-${this.instanceId}-panel-${a}`),r?(e.setAttribute("aria-controls",r.id),r.setAttribute("aria-labelledby",e.id)):(e.removeAttribute("aria-controls"),this.warnOrphanTrigger(e.value)),e.active=n,e.tabIndex=n||!i&&0===a?0:-1});for(const e of s)e.active=!!t&&e.value===t}warnOrphanTrigger(t){t&&!this.orphanTriggers.has(t)&&(this.orphanTriggers.add(t),console.warn(`mq-tabs: no <mq-tabs-content value="${t}"> matches the trigger with that value, so the tab controls nothing and its panel will never show.`))}render(){return a`<slot @slotchange=${this.handleSlotChange}></slot>`}};t([n({type:String,attribute:"default-value"})],u.prototype,"defaultValue",void 0),t([n({type:String,reflect:!0})],u.prototype,"value",void 0),t([n({type:String,attribute:"activation-mode"})],u.prototype,"activationMode",void 0),u=t([e("mq-tabs")],u);let p=class MqTabsList extends i{constructor(){super(...arguments),this.label="",this.orientation="horizontal",this.handleSlotChange=()=>{this.closest("mq-tabs")?.applySelection()},this.handleKeyDown=t=>{if(t.key!==this.nextKey&&t.key!==this.previousKey&&"Home"!==t.key&&"End"!==t.key)return;const e=t.composedPath().find(t=>t instanceof HTMLElement&&"MQ-TABS-TRIGGER"===t.tagName);if(!e)return;const s=this.enabledTriggers;if(0===s.length)return;t.preventDefault();const i=s.indexOf(e),a=s.length-1;let n;n="Home"===t.key?0:"End"===t.key?a:t.key===this.nextKey?-1===i?0:(i+1)%s.length:i<=0?a:i-1;const r=s[n];if(!r)return;r.focus();const o=this.closest("mq-tabs");o&&"automatic"!==o.activationMode||r.select()}}static{this.styles=[o]}connectedCallback(){super.connectedCallback(),h(this,"tablist"),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}updated(){this.setAttribute("aria-orientation",this.orientation),this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")}get enabledTriggers(){return Array.from(this.querySelectorAll("mq-tabs-trigger:not([disabled])"))}get nextKey(){return"vertical"===this.orientation?"ArrowDown":"ArrowRight"}get previousKey(){return"vertical"===this.orientation?"ArrowUp":"ArrowLeft"}render(){return a`<slot @slotchange=${this.handleSlotChange}></slot>`}};t([n({type:String})],p.prototype,"label",void 0),t([n({type:String,reflect:!0})],p.prototype,"orientation",void 0),p=t([e("mq-tabs-list")],p);let b=class MqTabsTrigger extends i{constructor(){super(...arguments),this.disabled=!1,this.active=!1,this.handleClick=()=>{this.select()},this.handleKeyDown=t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.select())}}static{this.styles=[l]}connectedCallback(){super.connectedCallback(),h(this,"tab"),this.hasAttribute("tabindex")||(this.tabIndex=-1),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}updated(){this.setAttribute("aria-selected",this.active?"true":"false"),this.setAttribute("aria-disabled",this.disabled?"true":"false")}select(){!this.disabled&&this.value&&this.dispatchEvent(new MqTabsSelectEvent(this.value))}render(){return a`<slot></slot>`}};t([n({type:String,reflect:!0})],b.prototype,"value",void 0),t([n({type:Boolean,reflect:!0})],b.prototype,"disabled",void 0),t([n({type:Boolean,reflect:!0})],b.prototype,"active",void 0),b=t([e("mq-tabs-trigger")],b);let v=class MqTabsContent extends i{constructor(){super(...arguments),this.active=!1}static{this.styles=[c]}connectedCallback(){super.connectedCallback(),h(this,"tabpanel"),this.hasAttribute("tabindex")||(this.tabIndex=0)}updated(){this.toggleAttribute("hidden",!this.active)}render(){return a`<slot></slot>`}};t([n({type:String,reflect:!0})],v.prototype,"value",void 0),t([n({type:Boolean,reflect:!0})],v.prototype,"active",void 0),v=t([e("mq-tabs-content")],v);export{u as MqTabs,v as MqTabsContent,p as MqTabsList,MqTabsSelectEvent,b as MqTabsTrigger};

package/dist/ui/mq-time-slot-picker.d.ts

@@ -55,6 +55,7 @@ declare class MqTimeSlotPicker extends LitElement {
     windowStartDate?: string;
     visibleDays: number;
     isLoading: boolean;
+    private getToday;
     private getStartDate;
     /**
      * Organizes the flat array of slots into a map by date

package/dist/ui/mq-time-slot-picker.js

@@ -1 +1 @@
-import"../chunks/custom-element-D2ziPxYE.js";import"../chunks/lit-element-DiWJYFwC.js";import"../chunks/property-scuRaFcM.js";import"../chunks/class-map-Co76I6aw.js";export{M as MqTimeSlotPicker,S as SlotSelectEvent,W as WindowChangeEvent}from"../chunks/index-2xVO6z8H.js";import"./mq-skeleton.js";import"../chunks/runtime-Bg1WXVCx.js";import"../chunks/localized-decorator-BlOuLhym.js";import"../chunks/parseISO-Dj3qSTG8.js";import"../chunks/format-CRFiCNHw.js";import"../chunks/isSameDay-CuhZMy1T.js";import"../chunks/directive-2EDmOukv.js";import"../chunks/style-map-CIdqdn7C.js";
+import{_ as t,c as e}from"../chunks/custom-element-D2ziPxYE.js";import{x as r,i as a,a as i}from"../chunks/lit-element-DiWJYFwC.js";import{n as s}from"../chunks/property-scuRaFcM.js";import{e as o}from"../chunks/class-map-Co76I6aw.js";import{g as n,a as l,i as d}from"../chunks/format-tMwfQwDf.js";import"./mq-skeleton.js";import{m as c}from"../chunks/runtime-Bg1WXVCx.js";import{l as h}from"../chunks/localized-decorator-BlOuLhym.js";import{a as p}from"../chunks/addDays-CdyO-PRI.js";import{p as m,s as v,f as u}from"../chunks/parseISO-CEksKisk.js";import"../chunks/directive-2EDmOukv.js";import"../chunks/style-map-CIdqdn7C.js";const g=a`:host{display:block;font-family:var(--font-body)}.time-slot-picker{display:flex;flex-direction:column;gap:var(--sp-4);border-radius:var(--border-radius-lg);transition:opacity .2s}.time-slot-picker.is-loading{opacity:.6}.picker-content{display:flex;flex-direction:column;gap:var(--sp-4)}.columns-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--sp-4);flex:1;min-width:0}.grid-container{display:grid;grid-template-columns:repeat(var(--visible-days,4),1fr);gap:var(--sp-2);position:relative}.dates-header{position:sticky;top:0;display:contents;z-index:10;padding-bottom:var(--sp-2)}.nav-button{position:absolute;top:var(--sp-9);transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:var(--size-6);height:var(--size-6);border:none;cursor:pointer;transition:background-color .2s;background:var(--color-primary);color:var(--color-white);border-radius:var(--border-radius-full);padding:0;z-index:20}.nav-button-prev{left:0;transform:translate(-50%,-50%)}.nav-button-next{right:0;transform:translate(50%,-50%)}.nav-button:hover:not(:disabled){background:var(--color-primary-dark)}.nav-button:disabled{background:var(--color-neutrals-background-disabled);color:var(--color-neutrals-text-medium);cursor:not-allowed}.date-card{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-2) var(--sp-3);border:1px solid var(--color-neutrals-border-disabled);background:var(--color-white);border-radius:var(--border-radius-lg);transition:all .2s;min-width:var(--sp-16);height:var(--sp-18);flex:1}.date-weekday{font-size:var(--text-sm);line-height:var(--text-sm--line-height);font-weight:var(--font-weight-normal);color:var(--color-neutrals-text-default);text-transform:capitalize}.date-day{font-size:var(--text-xl);font-weight:var(--font-weight-normal);color:var(--color-neutrals-text-default)}.date-month{font-size:var(--text-sm);line-height:var(--text-sm--line-height);font-weight:var(--font-weight-normal);color:var(--color-neutrals-text-default);text-transform:capitalize}.time-slots-container{display:contents}.time-slots-column{display:flex;flex-direction:column;gap:var(--sp-2)}.time-slot{padding:var(--sp-2) var(--sp-1);border:1px solid color-mix(in srgb,var(--color-primary) 12%,transparent);background:var(--color-primary-background-extraWeak);border-radius:var(--border-radius-md);cursor:pointer;transition:all .2s;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--color-primary-text-link);text-align:center;min-width:var(--sp-16);height:var(--sp-11)}.time-slot:hover:not(.selected){background:color-mix(in srgb,var(--color-primary) 12%,var(--color-primary-background-extraWeak));border-color:color-mix(in srgb,var(--color-primary) 24%,transparent)}.time-slot.selected{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-white);font-weight:var(--font-weight-bold)}.empty-state{display:flex;align-items:center;justify-content:center;padding:var(--sp-12) var(--sp-6);text-align:center;grid-column:1/-1;font-size:var(--text-sm);color:var(--color-neutrals-text-weak)}`;class WindowChangeEvent extends Event{static{this.eventName="window-change"}constructor(t){super(WindowChangeEvent.eventName,{bubbles:!0,composed:!0}),this.detail=t}}class SlotSelectEvent extends Event{static{this.eventName="slot-select"}constructor(t){super(SlotSelectEvent.eventName,{bubbles:!0,composed:!0}),this.detail=t}}let y=class MqTimeSlotPicker extends i{constructor(){super(...arguments),this.locale="es-ES",this.slots=[],this.visibleDays=4,this.isLoading=!1,this.handlePrevious=()=>{if(!this.canGoPrevious)return;const t=this.getStartDate(),e=p(t,-this.visibleDays),r=this.getToday(),a=e<r?r:e,i=this.formatDate(a);this.dispatchEvent(new WindowChangeEvent({windowStartDate:i}))},this.handleNext=()=>{const t=this.getStartDate(),e=p(t,this.visibleDays),r=this.formatDate(e);this.dispatchEvent(new WindowChangeEvent({windowStartDate:r}))},this.handleTimeSlotSelect=(t,e)=>{const r=this.formatDate(t.date);this.selectedDate=r,this.selectedSlotKey=e.key,this.dispatchEvent(new SlotSelectEvent({slot:{key:e.key,date:e.date}}))}}static{this.styles=[g]}getToday(){return m(n(new Date,this.timezone))}getStartDate(){return this.windowStartDate?v(m(this.windowStartDate)):this.getToday()}get slotsByDate(){const t=new Map;for(const e of this.slots){const{dateKey:r,label:a}=l(e.date,this.timezone);t.has(r)||t.set(r,[]),t.get(r)?.push({key:e.key,label:a,date:e.date})}for(const e of t.values())e.sort((t,e)=>{const r=m(t.date),a=m(e.date);return r.getTime()-a.getTime()});return t}get visibleDaysList(){const t=this.getStartDate(),e=[],r=this.slotsByDate;for(let a=0;a<this.visibleDays;a++){const i=p(t,a),s=this.formatDate(i),o=r.get(s)||[];e.push({date:i,slots:o})}return e}get canGoPrevious(){return this.getStartDate()>this.getToday()}formatDate(t){return u(t,"yyyy-MM-dd")}formatDayHeader(t){return{weekday:new Intl.DateTimeFormat(this.locale,{weekday:"short"}).format(t),day:new Intl.DateTimeFormat(this.locale,{day:"numeric"}).format(t),month:new Intl.DateTimeFormat(this.locale,{month:"short"}).format(t)}}isDateSelected(t){if(!this.selectedDate)return!1;const e=m(this.selectedDate);return d(t,e)}isTimeSlotSelected(t,e){return this.isDateSelected(t.date)&&this.selectedSlotKey===e.key}get hasSlots(){return this.slots.length>0}renderSkeletonSlots(){return r`${Array.from({length:this.visibleDays}).map((t,e)=>{const a=[2,3,4,3],i=a[e%a.length]??3;return r`<div class="time-slots-column">${Array.from({length:i}).map(()=>r`<mq-skeleton width="100%" height="40px" border-radius="md"></mq-skeleton>`)}</div>`})}`}renderEmptyState(){return r`<div class="empty-state">${c("No hay horarios disponibles")}</div>`}render(){const t=this.canGoPrevious,e=!this.isLoading&&!this.hasSlots;return r`<div class="${o({"time-slot-picker":!0,"is-loading":this.isLoading})}" style="--visible-days:${this.visibleDays}"><div class="picker-content"><div class="columns-wrapper">${t?r`<button class="nav-button nav-button-prev" @click="${this.handlePrevious}" ?disabled="${this.isLoading}" aria-label="${c("Fechas anteriores")}">${r`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1510_1791)"><path d="M8.05454 11.9155L2.72136 6.29527C2.69487 6.26742 2.67385 6.23433 2.65951 6.19791C2.64517 6.16149 2.63779 6.12245 2.63779 6.08302C2.63779 6.04359 2.64517 6.00454 2.65951 5.96812C2.67385 5.9317 2.69487 5.89862 2.72136 5.87077L8.2124 0.0844726L8.61523 0.508968L3.32539 6.08302L8.45738 11.491L8.05454 11.9155Z" fill="currentColor"/></g><defs><clipPath id="clip0_1510_1791"><rect width="11.831" height="11.2273" fill="currentColor" transform="translate(11.2402 0.0844727) rotate(90)"/></clipPath></defs></svg>`}</button>`:null} ${r`<button class="nav-button nav-button-next" @click="${this.handleNext}" ?disabled="${this.isLoading}" aria-label="${c("Fechas siguientes")}">${r`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1510_474)"><path d="M3.94546 0.0845423L9.27864 5.70473C9.30513 5.73258 9.32615 5.76566 9.34049 5.80209C9.35483 5.83851 9.36221 5.87755 9.36221 5.91698C9.36221 5.95641 9.35483 5.99546 9.34049 6.03188C9.32615 6.0683 9.30513 6.10138 9.27864 6.12923L3.7876 11.9155L3.38477 11.491L8.67461 5.91698L3.54262 0.509039L3.94546 0.0845423Z" fill="currentColor"/></g><defs><clipPath id="clip0_1510_474"><rect width="11.831" height="11.2273" fill="currentColor" transform="translate(0.759766 11.9155) rotate(-90)"/></clipPath></defs></svg>`}</button>`}<div class="grid-container"><div class="dates-header">${this.visibleDaysList.map(t=>{const{weekday:e,day:a,month:i}=this.formatDayHeader(t.date);return r`<div class="date-card"><div class="date-weekday">${e}</div><div class="date-day">${a}</div><div class="date-month">${i}</div></div>`})}</div><div class="time-slots-container">${e?this.renderEmptyState():this.isLoading?this.renderSkeletonSlots():this.visibleDaysList.map(t=>{const e=this.isDateSelected(t.date);return r`<div class="${o({"time-slots-column":!0,active:e})}">${t.slots.map(e=>{const a=this.isTimeSlotSelected(t,e);return r`<button class="${o({"time-slot":!0,selected:a})}" @click="${()=>this.handleTimeSlotSelect(t,e)}">${e.label}</button>`})}</div>`})}</div></div></div></div></div>`}};t([s({type:String})],y.prototype,"locale",void 0),t([s({type:String})],y.prototype,"timezone",void 0),t([s({type:Array})],y.prototype,"slots",void 0),t([s({type:String,attribute:"selected-date"})],y.prototype,"selectedDate",void 0),t([s({type:String,attribute:"selected-slot-key"})],y.prototype,"selectedSlotKey",void 0),t([s({type:String,attribute:"window-start-date"})],y.prototype,"windowStartDate",void 0),t([s({type:Number,attribute:"visible-days"})],y.prototype,"visibleDays",void 0),t([s({type:Boolean,attribute:"is-loading"})],y.prototype,"isLoading",void 0),y=t([h(),e("mq-time-slot-picker")],y);export{y as MqTimeSlotPicker,SlotSelectEvent,WindowChangeEvent};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mediquo/elements",
   "private": false,
-  "version": "0.10.4",
+  "version": "0.10.6",
   "type": "module",
   "description": "Mediquo elements web components",
   "license": "ISC",
@@ -182,6 +182,7 @@
     "locale:build": "lit-localize build"
   },
   "dependencies": {
+    "@date-fns/tz": "^1.5.0",
     "@lit/context": "^1.1.5",
     "@lit/localize": "^0.12.2",
     "@lit/react": "^1.0.8",

package/dist/chunks/addSeconds-CXt0dUch.js

@@ -1 +0,0 @@
-import{c as r,t}from"./parseISO-Dj3qSTG8.js";function n(n,s,a){return function(n,s){return r(n,+t(n)+s)}(n,1e3*s)}export{n as a};