@mediquo/elements 0.10.5 → 0.10.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/addDays-CdyO-PRI.js +1 -0
- package/dist/chunks/addSeconds-fO5orJrt.js +1 -0
- package/dist/chunks/api-chat-client-S0obJrB4.js +1 -0
- package/dist/chunks/{apple-pay-outcomes-DJDSt0US.js → apple-pay-outcomes-BscQFmv3.js} +1 -1
- package/dist/chunks/appointment-details-BYGwLfww.js +1 -0
- package/dist/chunks/ca_ES-glo9xEN3.js +1 -0
- package/dist/chunks/chunk-NIAGR3ZC-BDlNUZa1.js +1 -0
- package/dist/chunks/{chunk-Y4EKUX25-Bdei04iw.js → chunk-Y4EKUX25-Bix9r5ry.js} +1 -1
- package/dist/chunks/{chunk-YTQUGGS3-sBILRfPo.js → chunk-YTQUGGS3-DH0H7ld7.js} +1 -1
- package/dist/chunks/custom-element-CiOhPWP1-DPpsGZrV.js +1 -0
- package/dist/chunks/de_DE-ChyGs-uN.js +1 -0
- package/dist/chunks/documentation-view-DpCShvDU.js +1 -0
- package/dist/chunks/en_US-B87aG1og.js +1 -0
- package/dist/chunks/{external-cM_kgYO_.js → external-JLtsAfi6.js} +1 -1
- package/dist/chunks/format-tMwfQwDf.js +1 -0
- package/dist/chunks/{index-DYDUC2Va.js → index-BUdASXVt.js} +1 -1
- package/dist/chunks/index-CDvOsBjW.js +1 -0
- package/dist/chunks/{index-C1325SFM.d.ts → index-CsFUct9e.d.ts} +1 -0
- package/dist/chunks/index-D2yqKnpP.js +1 -0
- package/dist/chunks/{index-pnQMnaEN.d.ts → index-MVR2p_EX.d.ts} +1 -0
- package/dist/chunks/isBefore-DBi1CiNR.js +1 -0
- package/dist/chunks/mq-chat-room-Bc4dbvht.js +1 -0
- package/dist/chunks/{mq-chat-room-CWIDQUxq.d.ts → mq-chat-room-ZNKKjO5n.d.ts} +4 -0
- package/dist/chunks/mq-next-appointments-Bt0XA6tL.js +1 -0
- package/dist/chunks/{mq-professional-presence-sync-cmg6CXhz.d.ts → mq-professional-presence-sync-BPb8GjLT.d.ts} +0 -1
- package/dist/chunks/mq-professional-presence-sync-CnwOuX68.js +1 -0
- package/dist/chunks/{mq-recent-documents-DzxYuYy6.js → mq-recent-documents-Ofb6cOWh.js} +1 -1
- package/dist/chunks/mq-schedule-D8PWSy-K.js +1 -0
- package/dist/chunks/mq-support-chat-B-juQoLq.js +1 -0
- package/dist/chunks/{mq-unread-count-sync-DTn9dfR4.d.ts → mq-unread-count-sync-D3KUuLPV.d.ts} +0 -1
- package/dist/chunks/mq-unread-count-sync-Dqf98Tn_.js +1 -0
- package/dist/chunks/mq-videocall-I8F1fPBk.js +1 -0
- package/dist/chunks/next-appointment-card-7HsL14oH.js +1 -0
- package/dist/chunks/{next-appointment-card-Cd6GXAne.d.ts → next-appointment-card-CrXZEw8L.d.ts} +18 -4
- package/dist/chunks/parseISO-CEksKisk.js +1 -0
- package/dist/chunks/pt_PT-CELNgENj.js +1 -0
- package/dist/chunks/{refund-cancel-policy-C_9LyN_y.js → refund-cancel-policy-DoMzcLlL.js} +1 -1
- package/dist/chunks/{telemetry-client-dwDzxn9N.js → telemetry-client-K37KMdy_.js} +1 -1
- package/dist/env.js +1 -1
- package/dist/i18n.js +1 -1
- package/dist/mq-api-client-provider.js +1 -1
- package/dist/mq-apple-pay-checkout.js +1 -1
- package/dist/mq-appointment-checkout.js +1 -1
- package/dist/mq-appointment-documentation.d.ts +2 -2
- package/dist/mq-appointment-documentation.js +1 -1
- package/dist/mq-chat-room.d.ts +1 -1
- package/dist/mq-chat-room.js +1 -1
- package/dist/mq-checkout.js +1 -1
- package/dist/mq-dashboard.d.ts +3 -3
- package/dist/mq-dashboard.js +1 -1
- package/dist/mq-documents.d.ts +1 -1
- package/dist/mq-documents.js +1 -1
- package/dist/mq-google-pay-checkout.js +1 -1
- package/dist/mq-immediate-videocall-checkout.js +1 -1
- package/dist/mq-my-appointments.d.ts +2 -4
- package/dist/mq-my-appointments.js +1 -1
- package/dist/mq-next-appointments.d.ts +2 -2
- package/dist/mq-next-appointments.js +1 -1
- package/dist/mq-payment-poller.js +1 -1
- package/dist/mq-professional-presence-sync.d.ts +1 -1
- package/dist/mq-professional-presence-sync.js +1 -1
- package/dist/mq-recent-documents.d.ts +1 -1
- package/dist/mq-recent-documents.js +1 -1
- package/dist/mq-schedule-success.d.ts +1 -3
- package/dist/mq-schedule-success.js +2 -2
- package/dist/mq-schedule.d.ts +8 -7
- package/dist/mq-schedule.js +1 -1
- package/dist/mq-socket-provider.js +1 -1
- package/dist/mq-support-chat.d.ts +1 -1
- package/dist/mq-support-chat.js +1 -1
- package/dist/mq-terms-and-conditions.js +1 -1
- package/dist/mq-unread-count-sync.d.ts +1 -1
- package/dist/mq-unread-count-sync.js +1 -1
- package/dist/mq-videocall.d.ts +2 -2
- package/dist/mq-videocall.js +1 -1
- package/dist/react/mq-api-client-provider.js +1 -1
- package/dist/react/mq-apple-pay-checkout.js +1 -1
- package/dist/react/mq-appointment-checkout.js +1 -1
- package/dist/react/mq-appointment-documentation.d.ts +2 -2
- package/dist/react/mq-appointment-documentation.js +1 -1
- package/dist/react/mq-chat-room.d.ts +1 -1
- package/dist/react/mq-chat-room.js +1 -1
- package/dist/react/mq-checkout.js +1 -1
- package/dist/react/mq-dashboard.d.ts +3 -3
- package/dist/react/mq-dashboard.js +1 -1
- package/dist/react/mq-documents-page.d.ts +1 -1
- package/dist/react/mq-documents-page.js +1 -1
- package/dist/react/mq-documents.d.ts +1 -1
- package/dist/react/mq-documents.js +1 -1
- package/dist/react/mq-google-pay-checkout.js +1 -1
- package/dist/react/mq-immediate-videocall-checkout.js +1 -1
- package/dist/react/mq-my-appointments.d.ts +2 -3
- package/dist/react/mq-my-appointments.js +1 -1
- package/dist/react/mq-next-appointments.d.ts +2 -2
- package/dist/react/mq-next-appointments.js +1 -1
- package/dist/react/mq-payment-poller.js +1 -1
- package/dist/react/mq-professional-presence-sync.d.ts +1 -1
- package/dist/react/mq-professional-presence-sync.js +1 -1
- package/dist/react/mq-recent-documents.d.ts +1 -1
- package/dist/react/mq-recent-documents.js +1 -1
- package/dist/react/mq-schedule-success.d.ts +1 -2
- package/dist/react/mq-schedule-success.js +1 -1
- package/dist/react/mq-schedule.d.ts +0 -1
- package/dist/react/mq-schedule.js +1 -1
- package/dist/react/mq-socket-provider.js +1 -1
- package/dist/react/mq-support-chat.d.ts +1 -1
- package/dist/react/mq-support-chat.js +1 -1
- package/dist/react/mq-terms-and-conditions.js +1 -1
- package/dist/react/mq-unread-count-sync.d.ts +1 -1
- package/dist/react/mq-unread-count-sync.js +1 -1
- package/dist/react/mq-videocall.d.ts +2 -2
- package/dist/react/mq-videocall.js +1 -1
- package/dist/theme.d.ts +9 -0
- package/dist/theme.js +1 -1
- package/dist/ui/mq-calendar.d.ts +2 -0
- package/dist/ui/mq-calendar.js +1 -1
- package/dist/ui/mq-dialog.d.ts +62 -13
- package/dist/ui/mq-dialog.js +341 -1
- package/dist/ui/mq-tabs.js +5 -5
- package/dist/ui/mq-time-slot-picker.d.ts +1 -0
- package/dist/ui/mq-time-slot-picker.js +1 -1
- package/package.json +2 -1
- package/dist/chunks/addSeconds-CXt0dUch.js +0 -1
- package/dist/chunks/api-chat-client-D5BosjTp.js +0 -1
- package/dist/chunks/appointment-details-DpawC6lW.js +0 -1
- package/dist/chunks/ca_ES-DMretbb7.js +0 -1
- package/dist/chunks/chunk-2TKJJNS7-DzhxHWWb.js +0 -1
- package/dist/chunks/de_DE-DUtzXD1z.js +0 -1
- package/dist/chunks/documentation-view-BnKC8xEu.js +0 -1
- package/dist/chunks/en_US-mxYf5Jqv.js +0 -1
- package/dist/chunks/format-CRFiCNHw.js +0 -1
- package/dist/chunks/index-2xVO6z8H.js +0 -1
- package/dist/chunks/index-D13HvA4a.js +0 -1
- package/dist/chunks/index-D54b6IW6.js +0 -1
- package/dist/chunks/isBefore-Dfww5192.js +0 -1
- package/dist/chunks/isSameDay-CuhZMy1T.js +0 -1
- package/dist/chunks/mq-chat-room-C7FB_wOo.js +0 -1
- package/dist/chunks/mq-next-appointments-DMMeL0DC.js +0 -1
- package/dist/chunks/mq-schedule-JZyPjgBT.js +0 -1
- package/dist/chunks/mq-support-chat-HYSmf_ud.js +0 -1
- package/dist/chunks/mq-videocall-CgU0vUQJ.js +0 -1
- package/dist/chunks/next-appointment-card-BFBmWPYB.js +0 -1
- package/dist/chunks/parseISO-Dj3qSTG8.js +0 -1
- package/dist/chunks/pt_PT-g8meEZVV.js +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{o as t}from"../chunks/create-component-BB-6Gu6l.js";import*as s from"react";import{M as n}from"../chunks/index-
|
|
2
|
+
import{o as t}from"../chunks/create-component-BB-6Gu6l.js";import*as s from"react";import{M as n}from"../chunks/index-BUdASXVt.js";import"../chunks/custom-element-D2ziPxYE.js";import"../chunks/provide-BwI4DDGF.js";import"../chunks/context-request-event-Dfydf1ub.js";import"../chunks/consume-CovVqBjI.js";import"../chunks/context-consumer-ESdICVAb.js";import"../chunks/api-client-context-BXGqBAlO.js";import"../chunks/create-context-DqP79qjF.js";import"../chunks/lit-element-DiWJYFwC.js";import"../chunks/property-scuRaFcM.js";import"../chunks/state-LQivXIgA.js";import"../ui/mq-checkbox.js";import"../chunks/class-map-Co76I6aw.js";import"../chunks/directive-2EDmOukv.js";import"../ui/mq-button.js";import"../chunks/if-defined-BYeVdwgd.js";import"../chunks/mutation-controller-CR2qcqhH.js";import"../env.js";import"../chunks/api-chat-client-S0obJrB4.js";import"../chunks/external-JLtsAfi6.js";import"../chunks/chunk-NIAGR3ZC-BDlNUZa1.js";import"../chunks/parseISO-CEksKisk.js";import"../chunks/isBefore-DBi1CiNR.js";const o=t({react:s,tagName:"mq-terms-and-conditions",elementClass:n,events:{onContinue:"continue"}});export{o as MqTermsAndConditions};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{o as t}from"../chunks/create-component-BB-6Gu6l.js";import*as
|
|
2
|
+
import{o as t}from"../chunks/create-component-BB-6Gu6l.js";import*as e from"react";import{M as m}from"../chunks/mq-unread-count-sync-Dqf98Tn_.js";import"../chunks/custom-element-D2ziPxYE.js";import"../chunks/lit-element-DiWJYFwC.js";const n=t({react:e,tagName:"mq-unread-count-sync",elementClass:m});export{n as MqUnreadCountSync};
|
|
@@ -15,13 +15,13 @@ import '../ui/mq-button.js';
|
|
|
15
15
|
import '../chunks/professional-overview-mO3tuMuH.js';
|
|
16
16
|
import '../ui/mq-text-button.js';
|
|
17
17
|
import '../ui/mq-avatar.js';
|
|
18
|
-
import '../chunks/mq-chat-room-
|
|
18
|
+
import '../chunks/mq-chat-room-ZNKKjO5n.js';
|
|
19
19
|
import '../ui/mq-skeleton.js';
|
|
20
20
|
import '@tanstack/query-core';
|
|
21
21
|
import '../ui/mq-floating-bubble.js';
|
|
22
22
|
import '../ui/mq-card.js';
|
|
23
23
|
import '../ui/mq-unread-badge.js';
|
|
24
|
-
import '../chunks/index-
|
|
24
|
+
import '../chunks/index-CsFUct9e.js';
|
|
25
25
|
import '../chunks/document.model.d-DIzMiOmd.js';
|
|
26
26
|
import '../ui/mq-rating.js';
|
|
27
27
|
import '../chunks/mq-layout-D8Mak16a.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{o as i}from"../chunks/create-component-BB-6Gu6l.js";import*as o from"react";import{M as s}from"../chunks/mq-videocall-
|
|
2
|
+
import{o as i}from"../chunks/create-component-BB-6Gu6l.js";import*as o from"react";import{M as s}from"../chunks/mq-videocall-I8F1fPBk.js";import"../chunks/custom-element-D2ziPxYE.js";import"../chunks/lit-element-DiWJYFwC.js";import"../chunks/property-scuRaFcM.js";import"../ui/icons/spinner-icon.js";import"../ui/icons/types.js";import"../chunks/provide-BwI4DDGF.js";import"../chunks/context-request-event-Dfydf1ub.js";import"../chunks/consume-CovVqBjI.js";import"../chunks/context-consumer-ESdICVAb.js";import"../chunks/task-Bj8p7kJX.js";import"../chunks/api-client-context-BXGqBAlO.js";import"../chunks/create-context-DqP79qjF.js";import"../chunks/api-chat-client-S0obJrB4.js";import"../chunks/external-JLtsAfi6.js";import"../chunks/chunk-NIAGR3ZC-BDlNUZa1.js";import"../chunks/parseISO-CEksKisk.js";import"../chunks/isBefore-DBi1CiNR.js";import"../env.js";import"../chunks/state-LQivXIgA.js";import"../chunks/runtime-Bg1WXVCx.js";import"../chunks/localized-decorator-BlOuLhym.js";import"../chunks/addSeconds-fO5orJrt.js";import"../i18n.js";import"../chunks/chunk-FUCSYDW7-Duj5hy8S.js";import"../ui/icons/calendar-icon.js";import"../chunks/if-defined-BYeVdwgd.js";import"../ui/mq-page-title.js";import"../events.js";import"../ui/mq-button.js";import"../chunks/class-map-Co76I6aw.js";import"../chunks/directive-2EDmOukv.js";import"../ui/icons/arrow-narrow-left-icon.js";import"../chunks/professional-overview-B4E05rLd.js";import"../ui/icons/chevron-down-icon.js";import"../ui/mq-text-button.js";import"../ui/mq-avatar.js";import"../ui/icons/clock-icon.js";import"../chunks/documentation-view-DpCShvDU.js";import"../ui/icons/info-circle-outine-icon.js";import"../chunks/chunk-S5RWG6G2-CQJ38pW6.js";import"../ui/icons/message-bubble-icon.js";import"../chunks/mq-chat-room-Bc4dbvht.js";import"../theme.js";import"../ui/icons/x-icon.js";import"../ui/mq-skeleton.js";import"../chunks/style-map-CIdqdn7C.js";import"../chunks/query-controller-B1byDHlF.js";import"../chunks/chunk-RCFIJTXZ-C6Ir0-sM.js";import"@tanstack/query-core";import"../chunks/chunk-BUV4MGML-CkhBbfUu.js";import"../chunks/chunk-6CCJWPGL-TiaqZaPV.js";import"../ui/icons/chevron-left-icon.js";import"../chunks/query-CeeutdfT.js";import"../chunks/chunk-Y4EKUX25-Bix9r5ry.js";import"../ui/icons/check-double-icon.js";import"../ui/icons/check-icon.js";import"../chunks/addDays-CdyO-PRI.js";import"../chunks/chunk-YTQUGGS3-DH0H7ld7.js";import"../chunks/mutation-controller-CR2qcqhH.js";import"../ui/mq-floating-bubble.js";import"../ui/mq-card.js";import"../ui/mq-unread-badge.js";import"../ui/icons/download-icon.js";import"../chunks/blob-to-base64-CUL1trde.js";import"../chunks/telemetry-client-K37KMdy_.js";import"../chunks/chunk-5EJXDIGT-Bb4_pfDr.js";import"../ui/icons/chat-bubble-icon.js";import"../ui/icons/mic-icon.js";import"../ui/icons/mic-off-icon.js";import"../ui/icons/video-icon.js";import"../ui/icons/video-off-icon.js";import"../ui/icons/alert-circle-icon.js";import"../ui/mq-rating.js";import"../ui/mq-toast.js";import"../ui/icons/heartbeat-icon.js";import"../ui/icons/time-left-icon.js";import"../chunks/mq-layout-BndHxkbb.js";const t=i({react:o,tagName:"mq-videocall",elementClass:s,events:{onToggleAudio:"toggle-audio",onToggleVideo:"toggle-video",onToggleChat:"toggle-chat",onViewDocumentation:"view-documentation",onDownloadFile:"download-file",onReviewSubmitted:"review-submitted",onReviewSkipped:"review-skipped",onViewAppointments:"mq-view-appointments"}});export{t as MqVideocall};
|
package/dist/theme.d.ts
CHANGED
|
@@ -78,6 +78,15 @@ type ThemeTokens = {
|
|
|
78
78
|
"--dialog-transition-duration"?: string;
|
|
79
79
|
"--dialog-underlay"?: string;
|
|
80
80
|
"--dialog-shadow"?: string;
|
|
81
|
+
"--dialog-underlay-blur"?: string;
|
|
82
|
+
"--dialog-radius"?: string;
|
|
83
|
+
"--dialog-header-height"?: string;
|
|
84
|
+
"--dialog-padding-inline"?: string;
|
|
85
|
+
"--dialog-padding-block"?: string;
|
|
86
|
+
"--dialog-gap"?: string;
|
|
87
|
+
"--dialog-actions-gap"?: string;
|
|
88
|
+
"--dialog-max-width"?: string;
|
|
89
|
+
"--dialog-image-max-height"?: string;
|
|
81
90
|
"--size-0"?: string;
|
|
82
91
|
"--size-1"?: string;
|
|
83
92
|
"--size-2"?: string;
|
package/dist/theme.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{i as e}from"./chunks/lit-element-DiWJYFwC.js";const a=e`:host{--spacing-unit:4px;--button-height-xs:2rem;--button-height-sm:2.25rem;--button-height-md:2.5rem;--button-height-lg:3rem;--button-height-xl:3.5rem;--select-height-sm:2.25rem;--select-height-md:2.5rem;--select-height-lg:3rem;--input-height-sm:2.25rem;--input-height-md:2.5rem;--input-height-lg:3rem;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:600;--font-weight-extrabold:600;--border-radius-none:0rem;--border-radius-sm:0.25rem;--border-radius-md:0.375rem;--border-radius-lg:0.5rem;--border-radius-xl:1rem;--border-radius-2xl:2.5rem;--border-radius-full:50%;--text-xxs:0.625rem;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;--text-7xl:4.5rem;--text-xxs--line-height:0.75rem;--text-xs--line-height:1rem;--text-sm--line-height:1.25rem;--text-base--line-height:1.5rem;--text-lg--line-height:1.75rem;--text-xl--line-height:1.75rem;--text-2xl--line-height:2rem;--text-3xl--line-height:2.375rem;--text-4xl--line-height:2.5rem;--text-5xl--line-height:1;--text-6xl--line-height:1;--text-7xl--line-height:1;--color-primary-light:#e5e5e5;--color-primary:#2d2d2d;--color-primary-dark:#1a1a1a;--color-negative-light:#fed5e1;--color-negative:#ff014d;--color-negative-dark:#db0545;--color-warning-icon-default:#d4ac0d;--color-error-border-default:#4a4a4a;--color-error-text-default:#2d2d2d;--font-titles:sans-serif;--font-body:sans-serif;--color-background:#ffffff;--color-foreground:#1a1a1a;--color-background-primary:#2d2d2d;--color-background-primary-light:#f5f5f5;--color-card:#ffffff;--color-card-foreground:#1a1a1a;--color-muted:#ebebeb;--color-muted-foreground:#4a4a4a;--shadow-none:none;--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05);--shadow-md:0 4px 6px rgba(0, 0, 0, 0.07),0 1px 3px rgba(0, 0, 0, 0.06);--shadow-lg:0 10px 15px rgba(0, 0, 0, 0.07),0 4px 6px rgba(0, 0, 0, 0.05);--shadow-xl:0 20px 25px rgba(0, 0, 0, 0.08),0 8px 10px rgba(0, 0, 0, 0.04);--color-neutrals-link-dark:#1a1a1a;--color-neutrals-link-disabled:#9e9e9e;--color-neutrals-background-extraWeak:#ffffff;--color-neutrals-background-weak:#f5f5f5;--color-neutrals-background-disabled:#e0e0e0;--color-neutrals-border-default:#757575;--color-neutrals-border-disabled:#bdbdbd;--color-neutrals-text-default:#1a1a1a;--color-neutrals-text-medium:#4a4a4a;--color-primary-background-extraWeak:#f5f5f5;--color-primary-link-default:#2d2d2d;--color-primary-text-link:#1a1a1a;--color-primary-icon-link:#1a1a1a;--color-primary-background-default:#2d2d2d;--chat-system-message-background:#e0e0e0;--chat-system-message-foreground:#1a1a1a;--chat-received-message-background:#f5f5f5;--chat-received-message-foreground:#1a1a1a;--chat-sent-message-background:#e8e8e8;--chat-sent-message-foreground:#1a1a1a;--dialog-close-hover-bg:rgba(0, 0, 0, 0.05);--dialog-transition-duration:180ms;--dialog-underlay:rgba(0, 0, 0, 0.4);--dialog-shadow:0 10px 25px rgba(0, 0, 0, 0.2);--color-border:#e0e0e0;--color-border-input:#e0e0e0;--action-border-width:1px;--avatar-size-sm:45px;--avatar-size-md:52px;--avatar-size-lg:72px;--avatar-size-xl:80px;--color-top-banner-background:transparent}`,r=e`:host{--spacing-unit:4px;--button-height-xs:2rem;--button-height-sm:2.25rem;--button-height-md:2.5rem;--button-height-lg:3rem;--button-height-xl:3.5rem;--select-height-sm:2.25rem;--select-height-md:2.5rem;--select-height-lg:3rem;--input-height-sm:2.25rem;--input-height-md:2.5rem;--input-height-lg:3rem;--mq-safe-top:env(safe-area-inset-top, 0px);--mq-safe-bottom:env(safe-area-inset-bottom, 0px);--mq-safe-left:env(safe-area-inset-left, 0px);--mq-safe-right:env(safe-area-inset-right, 0px);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:500;--font-weight-bold:500;--font-weight-extrabold:500;--border-radius-none:0rem;--border-radius-sm:0.25rem;--border-radius-md:0.375rem;--border-radius-lg:0.5rem;--border-radius-xl:1rem;--border-radius-2xl:2.5rem;--border-radius-full:50%;--text-xxs:0.625rem;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;--text-7xl:4.5rem;--text-xxs--line-height:0.75rem;--text-xs--line-height:1rem;--text-sm--line-height:1.25rem;--text-base--line-height:1.5rem;--text-lg--line-height:1.75rem;--text-xl--line-height:1.75rem;--text-2xl--line-height:2rem;--text-3xl--line-height:2.375rem;--text-4xl--line-height:2.5rem;--text-5xl--line-height:1;--text-6xl--line-height:1;--text-7xl--line-height:1;--color-primary-light:#edeefd;--color-primary:#4a1ea7;--color-primary-dark:#2d087d;--color-negative-light:#fed5e1;--color-negative:#ff014d;--color-negative-dark:#db0545;--color-warning-icon-default:#d4ac0d;--color-error-border-default:#ff014d;--color-error-text-default:#ff014d;--font-titles:"Scoop",sans-serif;--font-body:"Scoop",sans-serif;--color-background:#f8f7fa;--color-foreground:#1a1a1a;--color-background-primary:#4a1ea7;--color-background-primary-light:#edeefd;--color-card:#ffffff;--color-card-foreground:#1a1a1a;--color-muted:#f8f7fa;--color-muted-foreground:#4e4e4e;--shadow-none:none;--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05);--shadow-md:0 4px 6px rgba(0, 0, 0, 0.07),0 1px 3px rgba(0, 0, 0, 0.06);--shadow-lg:0 10px 15px rgba(0, 0, 0, 0.07),0 4px 6px rgba(0, 0, 0, 0.05);--shadow-xl:0 20px 25px rgba(0, 0, 0, 0.08),0 8px 10px rgba(0, 0, 0, 0.04);--color-neutrals-link-dark:#1a1a1a;--color-neutrals-link-disabled:#707070;--color-neutrals-background-extraWeak:#ffffff;--color-neutrals-background-weak:#f7f7f7;--color-neutrals-background-disabled:#f8f7fa;--color-neutrals-border-default:#90a4ae;--color-neutrals-border-disabled:#eceff1;--color-neutrals-text-default:#1a1a1a;--color-neutrals-text-medium:#4e4e4e;--color-primary-background-extraWeak:#edeefd;--color-primary-link-default:#4a1ea7;--color-primary-text-link:#4a1ea7;--color-primary-icon-link:#4a1ea7;--color-primary-background-default:#4a1ea7;--chat-system-message-background:#edeefd;--chat-system-message-foreground:#4a1ea7;--chat-received-message-background:#f8f7fa;--chat-received-message-foreground:#1a1a1a;--chat-sent-message-background:#edeefd;--chat-sent-message-foreground:#1a1a1a;--dialog-close-hover-bg:rgba(74, 30, 169, 0.05);--dialog-transition-duration:180ms;--dialog-underlay:rgba(0, 0, 0, 0.4);--dialog-shadow:0 10px 25px rgba(0, 0, 0, 0.2);--color-border:#eceff1;--color-border-input:#eceff1;--action-border-width:1px;--avatar-size-sm:45px;--avatar-size-md:52px;--avatar-size-lg:72px;--avatar-size-xl:80px;--color-top-banner-background:transparent}`,t={mobile:768,tablet:1024,desktop:1200},i=e`:host{--color-white:#ffffff;--color-black:#000000;--color-gray-darkest:#1a1a1a;--color-gray-darker:#4e4e4e;--color-gray-dark:#3e3e3e;--color-gray-medium:#90a4ae;--color-gray-light:#eceff1;--color-gray-lighter:#f8f7fa;--color-text-icons--primary:#0a0a22;--color-text-icons--secondary:#6d658b;--color-text-icons--success:#34c759;--color-text-icons--disabled:#9b90ae;--color-border-subtle:#edecf1;--color-feedback--info-subtle:#eceefd;--color-feedback--info-text:#4a1ea7;--color-feedback--warning-subtle:#ffebce;--color-feedback--warning-text:#8f4700;--color-feedback--success-subtle:#e8f6ec;--color-feedback--success-text:#16653a;--spacing-unit:4px;--size-0:calc(var(--spacing-unit) * 0);--size-1:calc(var(--spacing-unit) * 1);--size-2:calc(var(--spacing-unit) * 2);--size-2_5:calc(var(--spacing-unit) * 2.5);--size-3:calc(var(--spacing-unit) * 3);--size-4:calc(var(--spacing-unit) * 4);--size-5:calc(var(--spacing-unit) * 5);--size-6:calc(var(--spacing-unit) * 6);--size-7:calc(var(--spacing-unit) * 7);--size-8:calc(var(--spacing-unit) * 8);--size-9:calc(var(--spacing-unit) * 9);--size-10:calc(var(--spacing-unit) * 10);--size-11:calc(var(--spacing-unit) * 11);--size-12:calc(var(--spacing-unit) * 12);--size-13:calc(var(--spacing-unit) * 13);--size-14:calc(var(--spacing-unit) * 14);--size-15:calc(var(--spacing-unit) * 15);--size-16:calc(var(--spacing-unit) * 16);--size-17:calc(var(--spacing-unit) * 17);--size-18:calc(var(--spacing-unit) * 18);--size-19:calc(var(--spacing-unit) * 19);--size-20:calc(var(--spacing-unit) * 20);--size-24:calc(var(--spacing-unit) * 24);--size-28:calc(var(--spacing-unit) * 28);--size-32:calc(var(--spacing-unit) * 32);--size-36:calc(var(--spacing-unit) * 36);--size-40:calc(var(--spacing-unit) * 40);--size-44:calc(var(--spacing-unit) * 44);--size-48:calc(var(--spacing-unit) * 48);--size-52:calc(var(--spacing-unit) * 52);--sp-0:calc(var(--spacing-unit) * 0);--sp-0_5:calc(var(--spacing-unit) * 0.5);--sp-1:calc(var(--spacing-unit) * 1);--sp-2:calc(var(--spacing-unit) * 2);--sp-2_5:calc(var(--spacing-unit) * 2.5);--sp-3:calc(var(--spacing-unit) * 3);--sp-4:calc(var(--spacing-unit) * 4);--sp-5:calc(var(--spacing-unit) * 5);--sp-6:calc(var(--spacing-unit) * 6);--sp-7:calc(var(--spacing-unit) * 7);--sp-8:calc(var(--spacing-unit) * 8);--sp-9:calc(var(--spacing-unit) * 9);--sp-10:calc(var(--spacing-unit) * 10);--sp-11:calc(var(--spacing-unit) * 11);--sp-12:calc(var(--spacing-unit) * 12);--sp-13:calc(var(--spacing-unit) * 13);--sp-14:calc(var(--spacing-unit) * 14);--sp-15:calc(var(--spacing-unit) * 15);--sp-16:calc(var(--spacing-unit) * 16);--sp-17:calc(var(--spacing-unit) * 17);--sp-18:calc(var(--spacing-unit) * 18);--sp-19:calc(var(--spacing-unit) * 19);--sp-20:calc(var(--spacing-unit) * 20);--sp-24:calc(var(--spacing-unit) * 24);--sp-28:calc(var(--spacing-unit) * 28);--sp-32:calc(var(--spacing-unit) * 32);--sp-36:calc(var(--spacing-unit) * 36);--sp-40:calc(var(--spacing-unit) * 40);--sp-44:calc(var(--spacing-unit) * 44);--sp-48:calc(var(--spacing-unit) * 48);--sp-52:calc(var(--spacing-unit) * 52);--avatar-size-sm:45px;--avatar-size-md:52px;--avatar-size-lg:72px;--avatar-size-xl:80px}`;function c(e){return e}export{t as breakpoints,c as createTheme,a as defaultTheme,r as mediquoTheme,i as tokens};
|
|
1
|
+
import{i as e}from"./chunks/lit-element-DiWJYFwC.js";const a=e`:host{--spacing-unit:4px;--button-height-xs:2rem;--button-height-sm:2.25rem;--button-height-md:2.5rem;--button-height-lg:3rem;--button-height-xl:3.5rem;--select-height-sm:2.25rem;--select-height-md:2.5rem;--select-height-lg:3rem;--input-height-sm:2.25rem;--input-height-md:2.5rem;--input-height-lg:3rem;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:600;--font-weight-extrabold:600;--border-radius-none:0rem;--border-radius-sm:0.25rem;--border-radius-md:0.375rem;--border-radius-lg:0.5rem;--border-radius-xl:1rem;--border-radius-2xl:2.5rem;--border-radius-full:50%;--text-xxs:0.625rem;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;--text-7xl:4.5rem;--text-xxs--line-height:0.75rem;--text-xs--line-height:1rem;--text-sm--line-height:1.25rem;--text-base--line-height:1.5rem;--text-lg--line-height:1.75rem;--text-xl--line-height:1.75rem;--text-2xl--line-height:2rem;--text-3xl--line-height:2.375rem;--text-4xl--line-height:2.5rem;--text-5xl--line-height:1;--text-6xl--line-height:1;--text-7xl--line-height:1;--color-primary-light:#e5e5e5;--color-primary:#2d2d2d;--color-primary-dark:#1a1a1a;--color-negative-light:#fed5e1;--color-negative:#ff014d;--color-negative-dark:#db0545;--color-warning-icon-default:#d4ac0d;--color-error-border-default:#4a4a4a;--color-error-text-default:#2d2d2d;--font-titles:sans-serif;--font-body:sans-serif;--color-background:#ffffff;--color-foreground:#1a1a1a;--color-background-primary:#2d2d2d;--color-background-primary-light:#f5f5f5;--color-card:#ffffff;--color-card-foreground:#1a1a1a;--color-muted:#ebebeb;--color-muted-foreground:#4a4a4a;--shadow-none:none;--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05);--shadow-md:0 4px 6px rgba(0, 0, 0, 0.07),0 1px 3px rgba(0, 0, 0, 0.06);--shadow-lg:0 10px 15px rgba(0, 0, 0, 0.07),0 4px 6px rgba(0, 0, 0, 0.05);--shadow-xl:0 20px 25px rgba(0, 0, 0, 0.08),0 8px 10px rgba(0, 0, 0, 0.04);--color-neutrals-link-dark:#1a1a1a;--color-neutrals-link-disabled:#9e9e9e;--color-neutrals-background-extraWeak:#ffffff;--color-neutrals-background-weak:#f5f5f5;--color-neutrals-background-disabled:#e0e0e0;--color-neutrals-border-default:#757575;--color-neutrals-border-disabled:#bdbdbd;--color-neutrals-text-default:#1a1a1a;--color-neutrals-text-medium:#4a4a4a;--color-primary-background-extraWeak:#f5f5f5;--color-primary-link-default:#2d2d2d;--color-primary-text-link:#1a1a1a;--color-primary-icon-link:#1a1a1a;--color-primary-background-default:#2d2d2d;--chat-system-message-background:#e0e0e0;--chat-system-message-foreground:#1a1a1a;--chat-received-message-background:#f5f5f5;--chat-received-message-foreground:#1a1a1a;--chat-sent-message-background:#e8e8e8;--chat-sent-message-foreground:#1a1a1a;--color-border:#e0e0e0;--color-border-input:#e0e0e0;--action-border-width:1px;--avatar-size-sm:45px;--avatar-size-md:52px;--avatar-size-lg:72px;--avatar-size-xl:80px;--color-top-banner-background:transparent}`,r=e`:host{--spacing-unit:4px;--button-height-xs:2rem;--button-height-sm:2.25rem;--button-height-md:2.5rem;--button-height-lg:3rem;--button-height-xl:3.5rem;--select-height-sm:2.25rem;--select-height-md:2.5rem;--select-height-lg:3rem;--input-height-sm:2.25rem;--input-height-md:2.5rem;--input-height-lg:3rem;--mq-safe-top:env(safe-area-inset-top, 0px);--mq-safe-bottom:env(safe-area-inset-bottom, 0px);--mq-safe-left:env(safe-area-inset-left, 0px);--mq-safe-right:env(safe-area-inset-right, 0px);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:500;--font-weight-bold:500;--font-weight-extrabold:500;--border-radius-none:0rem;--border-radius-sm:0.25rem;--border-radius-md:0.375rem;--border-radius-lg:0.5rem;--border-radius-xl:1rem;--border-radius-2xl:2.5rem;--border-radius-full:50%;--text-xxs:0.625rem;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;--text-7xl:4.5rem;--text-xxs--line-height:0.75rem;--text-xs--line-height:1rem;--text-sm--line-height:1.25rem;--text-base--line-height:1.5rem;--text-lg--line-height:1.75rem;--text-xl--line-height:1.75rem;--text-2xl--line-height:2rem;--text-3xl--line-height:2.375rem;--text-4xl--line-height:2.5rem;--text-5xl--line-height:1;--text-6xl--line-height:1;--text-7xl--line-height:1;--color-primary-light:#edeefd;--color-primary:#4a1ea7;--color-primary-dark:#2d087d;--color-negative-light:#fed5e1;--color-negative:#ff014d;--color-negative-dark:#db0545;--color-warning-icon-default:#d4ac0d;--color-error-border-default:#ff014d;--color-error-text-default:#ff014d;--font-titles:"Scoop",sans-serif;--font-body:"Scoop",sans-serif;--color-background:#f8f7fa;--color-foreground:#1a1a1a;--color-background-primary:#4a1ea7;--color-background-primary-light:#edeefd;--color-card:#ffffff;--color-card-foreground:#1a1a1a;--color-muted:#f8f7fa;--color-muted-foreground:#4e4e4e;--shadow-none:none;--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05);--shadow-md:0 4px 6px rgba(0, 0, 0, 0.07),0 1px 3px rgba(0, 0, 0, 0.06);--shadow-lg:0 10px 15px rgba(0, 0, 0, 0.07),0 4px 6px rgba(0, 0, 0, 0.05);--shadow-xl:0 20px 25px rgba(0, 0, 0, 0.08),0 8px 10px rgba(0, 0, 0, 0.04);--color-neutrals-link-dark:#1a1a1a;--color-neutrals-link-disabled:#707070;--color-neutrals-background-extraWeak:#ffffff;--color-neutrals-background-weak:#f7f7f7;--color-neutrals-background-disabled:#f8f7fa;--color-neutrals-border-default:#90a4ae;--color-neutrals-border-disabled:#eceff1;--color-neutrals-text-default:#1a1a1a;--color-neutrals-text-medium:#4e4e4e;--color-primary-background-extraWeak:#edeefd;--color-primary-link-default:#4a1ea7;--color-primary-text-link:#4a1ea7;--color-primary-icon-link:#4a1ea7;--color-primary-background-default:#4a1ea7;--chat-system-message-background:#edeefd;--chat-system-message-foreground:#4a1ea7;--chat-received-message-background:#f8f7fa;--chat-received-message-foreground:#1a1a1a;--chat-sent-message-background:#edeefd;--chat-sent-message-foreground:#1a1a1a;--dialog-close-hover-bg:rgba(74, 30, 169, 0.05);--color-border:#eceff1;--color-border-input:#eceff1;--action-border-width:1px;--avatar-size-sm:45px;--avatar-size-md:52px;--avatar-size-lg:72px;--avatar-size-xl:80px;--color-top-banner-background:transparent}`,t={mobile:768,tablet:1024,desktop:1200},i=e`:host{--color-white:#ffffff;--color-black:#000000;--color-gray-darkest:#1a1a1a;--color-gray-darker:#4e4e4e;--color-gray-dark:#3e3e3e;--color-gray-medium:#90a4ae;--color-gray-light:#eceff1;--color-gray-lighter:#f8f7fa;--color-text-icons--primary:#0a0a22;--color-text-icons--secondary:#6d658b;--color-text-icons--success:#34c759;--color-text-icons--disabled:#9b90ae;--color-border-subtle:#edecf1;--color-feedback--info-subtle:#eceefd;--color-feedback--info-text:#4a1ea7;--color-feedback--warning-subtle:#ffebce;--color-feedback--warning-text:#8f4700;--color-feedback--success-subtle:#e8f6ec;--color-feedback--success-text:#16653a;--spacing-unit:4px;--size-0:calc(var(--spacing-unit) * 0);--size-1:calc(var(--spacing-unit) * 1);--size-2:calc(var(--spacing-unit) * 2);--size-2_5:calc(var(--spacing-unit) * 2.5);--size-3:calc(var(--spacing-unit) * 3);--size-4:calc(var(--spacing-unit) * 4);--size-5:calc(var(--spacing-unit) * 5);--size-6:calc(var(--spacing-unit) * 6);--size-7:calc(var(--spacing-unit) * 7);--size-8:calc(var(--spacing-unit) * 8);--size-9:calc(var(--spacing-unit) * 9);--size-10:calc(var(--spacing-unit) * 10);--size-11:calc(var(--spacing-unit) * 11);--size-12:calc(var(--spacing-unit) * 12);--size-13:calc(var(--spacing-unit) * 13);--size-14:calc(var(--spacing-unit) * 14);--size-15:calc(var(--spacing-unit) * 15);--size-16:calc(var(--spacing-unit) * 16);--size-17:calc(var(--spacing-unit) * 17);--size-18:calc(var(--spacing-unit) * 18);--size-19:calc(var(--spacing-unit) * 19);--size-20:calc(var(--spacing-unit) * 20);--size-24:calc(var(--spacing-unit) * 24);--size-28:calc(var(--spacing-unit) * 28);--size-32:calc(var(--spacing-unit) * 32);--size-36:calc(var(--spacing-unit) * 36);--size-40:calc(var(--spacing-unit) * 40);--size-44:calc(var(--spacing-unit) * 44);--size-48:calc(var(--spacing-unit) * 48);--size-52:calc(var(--spacing-unit) * 52);--sp-0:calc(var(--spacing-unit) * 0);--sp-0_5:calc(var(--spacing-unit) * 0.5);--sp-1:calc(var(--spacing-unit) * 1);--sp-2:calc(var(--spacing-unit) * 2);--sp-2_5:calc(var(--spacing-unit) * 2.5);--sp-3:calc(var(--spacing-unit) * 3);--sp-4:calc(var(--spacing-unit) * 4);--sp-5:calc(var(--spacing-unit) * 5);--sp-6:calc(var(--spacing-unit) * 6);--sp-7:calc(var(--spacing-unit) * 7);--sp-8:calc(var(--spacing-unit) * 8);--sp-9:calc(var(--spacing-unit) * 9);--sp-10:calc(var(--spacing-unit) * 10);--sp-11:calc(var(--spacing-unit) * 11);--sp-12:calc(var(--spacing-unit) * 12);--sp-13:calc(var(--spacing-unit) * 13);--sp-14:calc(var(--spacing-unit) * 14);--sp-15:calc(var(--spacing-unit) * 15);--sp-16:calc(var(--spacing-unit) * 16);--sp-17:calc(var(--spacing-unit) * 17);--sp-18:calc(var(--spacing-unit) * 18);--sp-19:calc(var(--spacing-unit) * 19);--sp-20:calc(var(--spacing-unit) * 20);--sp-24:calc(var(--spacing-unit) * 24);--sp-28:calc(var(--spacing-unit) * 28);--sp-32:calc(var(--spacing-unit) * 32);--sp-36:calc(var(--spacing-unit) * 36);--sp-40:calc(var(--spacing-unit) * 40);--sp-44:calc(var(--spacing-unit) * 44);--sp-48:calc(var(--spacing-unit) * 48);--sp-52:calc(var(--spacing-unit) * 52);--avatar-size-sm:45px;--avatar-size-md:52px;--avatar-size-lg:72px;--avatar-size-xl:80px}`;function c(e){return e}export{t as breakpoints,c as createTheme,a as defaultTheme,r as mediquoTheme,i as tokens};
|
package/dist/ui/mq-calendar.d.ts
CHANGED
|
@@ -43,10 +43,12 @@ declare class MqCalendar extends LitElement {
|
|
|
43
43
|
isLoading: boolean;
|
|
44
44
|
currentMonth?: string;
|
|
45
45
|
availableDays?: string[];
|
|
46
|
+
timezone?: string;
|
|
46
47
|
private selectedDate?;
|
|
47
48
|
connectedCallback(): void;
|
|
48
49
|
private getMonthYear;
|
|
49
50
|
private getCurrentMonthDate;
|
|
51
|
+
private getToday;
|
|
50
52
|
private getWeekdays;
|
|
51
53
|
private getDaysInMonth;
|
|
52
54
|
private createCalendarDay;
|
package/dist/ui/mq-calendar.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../chunks/custom-element-D2ziPxYE.js";import"../chunks/runtime-Bg1WXVCx.js";import"../chunks/localized-decorator-BlOuLhym.js";import"../chunks/lit-element-DiWJYFwC.js";import"../chunks/property-scuRaFcM.js";import"../chunks/state-LQivXIgA.js";import"../chunks/class-map-Co76I6aw.js";import"./icons/chevron-left-icon.js";import"./icons/chevron-right-icon.js";import"./icons/spinner-icon.js";export{D as DateSelectEvent,M as MqCalendar,N as NextMonthEvent,P as PrevMonthEvent}from"../chunks/index-
|
|
1
|
+
import"../chunks/custom-element-D2ziPxYE.js";import"../chunks/runtime-Bg1WXVCx.js";import"../chunks/localized-decorator-BlOuLhym.js";import"../chunks/lit-element-DiWJYFwC.js";import"../chunks/property-scuRaFcM.js";import"../chunks/state-LQivXIgA.js";import"../chunks/class-map-Co76I6aw.js";import"./icons/chevron-left-icon.js";import"./icons/chevron-right-icon.js";import"./icons/spinner-icon.js";export{D as DateSelectEvent,M as MqCalendar,N as NextMonthEvent,P as PrevMonthEvent}from"../chunks/index-D2yqKnpP.js";import"../chunks/format-tMwfQwDf.js";import"../chunks/parseISO-CEksKisk.js";import"../chunks/isBefore-DBi1CiNR.js";import"../chunks/directive-2EDmOukv.js";import"../chunks/if-defined-BYeVdwgd.js";import"./icons/types.js";
|
package/dist/ui/mq-dialog.d.ts
CHANGED
|
@@ -3,41 +3,90 @@ import * as lit from 'lit';
|
|
|
3
3
|
import { LitElement } from 'lit';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* The user asked to close the dialog: close button, Escape or a click outside.
|
|
7
|
+
* Cancelable — `preventDefault()` keeps it open, for unsaved changes or a
|
|
8
|
+
* request in flight. A close the browser forces cannot be cancelled.
|
|
9
|
+
*/
|
|
10
|
+
declare class MqDialogCloseEvent extends Event {
|
|
11
|
+
static eventName: string;
|
|
12
|
+
constructor();
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Accessible modal dialog primitive, moved here from `@mediquo/elements` and
|
|
16
|
+
* restyled to match the patient portal's dialog: a header band with the title
|
|
17
|
+
* and the close button, the body, and the actions under a separator.
|
|
7
18
|
*
|
|
8
19
|
* Built on the native `<dialog>` element + `showModal()`, so the browser
|
|
9
|
-
* handles focus trapping
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* dismissable-on-backdrop-click behaviour.
|
|
20
|
+
* handles focus trapping, Escape-to-close, background inerting and top-layer
|
|
21
|
+
* stacking. This component layers in the fade/scale animation, closing on a
|
|
22
|
+
* click outside and the portal's look.
|
|
13
23
|
*
|
|
14
24
|
* Usage:
|
|
15
25
|
* <mq-dialog open>
|
|
26
|
+
* <img slot="image" src="…" alt="" />
|
|
16
27
|
* <h2 slot="heading">Title</h2>
|
|
17
28
|
* <p slot="subheading">Optional description</p>
|
|
18
29
|
* Content...
|
|
30
|
+
* <button slot="footer">Cancel</button>
|
|
31
|
+
* <button slot="footer">Confirm</button>
|
|
19
32
|
* </mq-dialog>
|
|
20
33
|
*/
|
|
21
34
|
declare class MqDialog extends LitElement {
|
|
22
35
|
static styles: lit.CSSResult[];
|
|
23
36
|
open: boolean;
|
|
24
37
|
dismissable: boolean;
|
|
38
|
+
alert: boolean;
|
|
39
|
+
label: string;
|
|
40
|
+
closeLabel: string;
|
|
25
41
|
private isActive;
|
|
42
|
+
private hasImage;
|
|
43
|
+
private hasHeading;
|
|
44
|
+
private hasSubheading;
|
|
45
|
+
private hasFooter;
|
|
46
|
+
/** Opened with `showModal()`, so the page behind is really inert. */
|
|
47
|
+
private isModal;
|
|
48
|
+
/** The scroll area overflows and needs to take keyboard focus to scroll. */
|
|
49
|
+
private scrollable;
|
|
50
|
+
private enterFrame;
|
|
51
|
+
private slotObserver;
|
|
52
|
+
private scrollObserver;
|
|
26
53
|
private closeTimer;
|
|
54
|
+
private lockedScroll;
|
|
55
|
+
private backdropPointerDown;
|
|
56
|
+
private warnedAboutName;
|
|
57
|
+
/** Closing the native dialog on our own way out, not the user's. */
|
|
58
|
+
private detaching;
|
|
59
|
+
private get dialogEl();
|
|
60
|
+
connectedCallback(): void;
|
|
61
|
+
disconnectedCallback(): void;
|
|
62
|
+
protected firstUpdated(): void;
|
|
63
|
+
/** Re-measures the scroll area when it or its content changes size. */
|
|
64
|
+
private observeScroll;
|
|
27
65
|
protected updated(changed: Map<string, unknown>): void;
|
|
66
|
+
private openNative;
|
|
67
|
+
private cancelEnterFrame;
|
|
68
|
+
private measureScroll;
|
|
69
|
+
private closeNative;
|
|
70
|
+
private holdScroll;
|
|
71
|
+
private releaseScroll;
|
|
72
|
+
private warnAboutMissingName;
|
|
73
|
+
/** A slot counts as filled only when it has something to show or say. */
|
|
74
|
+
private hasSlotted;
|
|
75
|
+
private readSlots;
|
|
76
|
+
private onSlotChange;
|
|
77
|
+
private onDialogPointerDown;
|
|
28
78
|
private onDialogClick;
|
|
29
79
|
private onCancel;
|
|
30
|
-
private onNativeClose;
|
|
31
|
-
private onCloseClick;
|
|
32
80
|
/**
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
* (
|
|
81
|
+
* The native dialog closed while we still consider it open. `closedby="none"`
|
|
82
|
+
* already stops Escape when it is not dismissable; where the browser ignores
|
|
83
|
+
* that (Chrome lets a repeated Escape through), put the modal back. Otherwise
|
|
84
|
+
* report it, since the owner cannot keep a dialog the browser has closed.
|
|
36
85
|
*/
|
|
86
|
+
private onNativeClose;
|
|
87
|
+
private onCloseClick;
|
|
37
88
|
private onKeyDown;
|
|
38
|
-
/** The focused element, descending through nested shadow roots. */
|
|
39
89
|
private getDeepActiveElement;
|
|
40
|
-
/** Tabbable elements in flattened-tree order, crossing shadow roots and slots. */
|
|
41
90
|
private getTabbableElements;
|
|
42
91
|
private collectTabbable;
|
|
43
92
|
private isTabbable;
|
|
@@ -50,4 +99,4 @@ declare global {
|
|
|
50
99
|
}
|
|
51
100
|
}
|
|
52
101
|
|
|
53
|
-
export { MqDialog };
|
|
102
|
+
export { MqDialog, MqDialogCloseEvent };
|
package/dist/ui/mq-dialog.js
CHANGED
|
@@ -1 +1,341 @@
|
|
|
1
|
-
import{
|
|
1
|
+
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`
|
|
2
|
+
:host {
|
|
3
|
+
display: contents;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
[hidden] {
|
|
7
|
+
display: none !important;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
dialog.root {
|
|
11
|
+
/* Reset user-agent dialog styles */
|
|
12
|
+
padding: 0;
|
|
13
|
+
border: none;
|
|
14
|
+
margin: 0;
|
|
15
|
+
max-width: none;
|
|
16
|
+
max-height: none;
|
|
17
|
+
/* Full-viewport underlay so clicks outside the card hit the dialog */
|
|
18
|
+
position: fixed;
|
|
19
|
+
inset: 0;
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
width: 100%;
|
|
22
|
+
height: 100%;
|
|
23
|
+
background: ${q};
|
|
24
|
+
backdrop-filter: blur(${S});
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
justify-content: center;
|
|
28
|
+
opacity: 0;
|
|
29
|
+
transition: opacity ${C} ease;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
dialog.root:not([open]) {
|
|
33
|
+
display: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* The dim is the dialog's own background, so it can animate via .active */
|
|
37
|
+
dialog.root::backdrop {
|
|
38
|
+
background: transparent;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.dialog {
|
|
42
|
+
position: relative;
|
|
43
|
+
display: flex;
|
|
44
|
+
flex-direction: column;
|
|
45
|
+
box-sizing: border-box;
|
|
46
|
+
/* 1rem of air on each side on phones, inside the safe area */
|
|
47
|
+
width: calc(
|
|
48
|
+
100% - 2rem - var(--mq-safe-left, 0px) - var(--mq-safe-right, 0px)
|
|
49
|
+
);
|
|
50
|
+
max-width: ${x("max-width",y)};
|
|
51
|
+
/* vh first for browsers without dvh; dvh wins where it exists, so the
|
|
52
|
+
card never grows under a mobile browser's toolbars. */
|
|
53
|
+
max-height: calc(
|
|
54
|
+
100vh - 2rem - var(--mq-safe-top, 0px) - var(--mq-safe-bottom, 0px)
|
|
55
|
+
);
|
|
56
|
+
max-height: calc(
|
|
57
|
+
100dvh - 2rem - var(--mq-safe-top, 0px) - var(--mq-safe-bottom, 0px)
|
|
58
|
+
);
|
|
59
|
+
margin-top: var(--mq-safe-top, 0px);
|
|
60
|
+
margin-bottom: var(--mq-safe-bottom, 0px);
|
|
61
|
+
margin-left: var(--mq-safe-left, 0px);
|
|
62
|
+
margin-right: var(--mq-safe-right, 0px);
|
|
63
|
+
border: none;
|
|
64
|
+
border-radius: ${E};
|
|
65
|
+
background: var(
|
|
66
|
+
--mq-surface-surface,
|
|
67
|
+
var(--color-neutrals-background-extraWeak, #ffffff)
|
|
68
|
+
);
|
|
69
|
+
color: var(--mq-text-primary, var(--color-neutrals-text-default, #0a0a23));
|
|
70
|
+
font-family: var(--mq-typography-family-sans, var(--font-body, inherit));
|
|
71
|
+
box-shadow: ${$};
|
|
72
|
+
outline: none;
|
|
73
|
+
overflow: hidden;
|
|
74
|
+
opacity: 0;
|
|
75
|
+
transform: scale(0.95);
|
|
76
|
+
transition:
|
|
77
|
+
opacity ${C} ease,
|
|
78
|
+
transform ${C} ease;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
dialog.root.active {
|
|
82
|
+
opacity: 1;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
dialog.root.active .dialog {
|
|
86
|
+
opacity: 1;
|
|
87
|
+
transform: scale(1);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Image, header and body scroll together; the close button and the actions
|
|
91
|
+
stay put. */
|
|
92
|
+
.scroll {
|
|
93
|
+
flex: 1;
|
|
94
|
+
min-height: 0;
|
|
95
|
+
overflow-y: auto;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Focusable only while it overflows, so a keyboard user can scroll it —
|
|
99
|
+
Safari does not make scrollers focusable on its own. */
|
|
100
|
+
.scroll:focus-visible {
|
|
101
|
+
outline: 2px solid var(--mq-border-focus, var(--color-primary, #4a1ea7));
|
|
102
|
+
outline-offset: -2px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.image {
|
|
106
|
+
line-height: 0;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.image ::slotted(img),
|
|
110
|
+
.image ::slotted(picture),
|
|
111
|
+
.image ::slotted(video),
|
|
112
|
+
.image ::slotted(svg) {
|
|
113
|
+
display: block;
|
|
114
|
+
width: 100%;
|
|
115
|
+
max-height: ${x("image-max-height",w)};
|
|
116
|
+
object-fit: cover;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.header {
|
|
120
|
+
display: flex;
|
|
121
|
+
align-items: center;
|
|
122
|
+
box-sizing: border-box;
|
|
123
|
+
min-height: ${T};
|
|
124
|
+
/* The end side leaves room for the close button sitting in the band. */
|
|
125
|
+
padding: var(--mq-spacing-2, 0.5rem) var(--mq-spacing-12, 3rem)
|
|
126
|
+
var(--mq-spacing-2, 0.5rem) ${N};
|
|
127
|
+
background: var(--mq-surface-surface-raised, var(--color-muted, #f8f7fa));
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* Over an image the close button sits on the image, not in the band. */
|
|
131
|
+
.dialog.with-image .header {
|
|
132
|
+
padding-inline-end: ${N};
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.heading {
|
|
136
|
+
font-family: var(--mq-typography-family-sans, var(--font-titles, inherit));
|
|
137
|
+
font-size: var(--mq-typography-size-base, 1rem);
|
|
138
|
+
font-weight: var(--mq-typography-weight-medium, 500);
|
|
139
|
+
line-height: 1.25rem;
|
|
140
|
+
color: var(--mq-text-brand, var(--color-primary, #4a1ea7));
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.body {
|
|
144
|
+
display: grid;
|
|
145
|
+
gap: ${A};
|
|
146
|
+
padding: ${D} ${N};
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* No header band to hold the close button: keep the body clear of it. */
|
|
150
|
+
.dialog:not(.with-heading):not(.with-image) .body {
|
|
151
|
+
padding-inline-end: var(--mq-spacing-12, 3rem);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.subheading {
|
|
155
|
+
font-size: var(--mq-typography-size-xs, 0.75rem);
|
|
156
|
+
font-weight: var(--mq-typography-weight-normal, 400);
|
|
157
|
+
line-height: 1rem;
|
|
158
|
+
/* ≈ Figma's #6d658b on white, and still readable in dark mode;
|
|
159
|
+
--mq-text-secondary would fall under 4.5:1. */
|
|
160
|
+
color: var(
|
|
161
|
+
--color-neutrals-text-medium,
|
|
162
|
+
color-mix(in srgb, var(--mq-text-primary, #0a0a23) 64%, transparent)
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
/* Headings bring their own UA margins and sizes; start from the design's.
|
|
167
|
+
Styles the owner gives its own heading still win over these. */
|
|
168
|
+
.heading ::slotted(*),
|
|
169
|
+
.subheading ::slotted(*) {
|
|
170
|
+
margin: 0;
|
|
171
|
+
font-family: inherit;
|
|
172
|
+
font-size: inherit;
|
|
173
|
+
font-weight: inherit;
|
|
174
|
+
line-height: inherit;
|
|
175
|
+
color: inherit;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.footer {
|
|
179
|
+
display: flex;
|
|
180
|
+
flex-wrap: wrap;
|
|
181
|
+
flex-shrink: 0;
|
|
182
|
+
align-items: center;
|
|
183
|
+
justify-content: flex-end;
|
|
184
|
+
gap: ${M};
|
|
185
|
+
padding: var(--mq-spacing-3, 0.75rem) ${N}
|
|
186
|
+
var(--mq-spacing-4, 1rem);
|
|
187
|
+
border-top: var(--mq-size-border-default, 1px) solid
|
|
188
|
+
var(--mq-border-default, var(--color-border, #edecf1));
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.close-btn {
|
|
192
|
+
position: absolute;
|
|
193
|
+
/* Centred in the header band: (band - button) / 2 */
|
|
194
|
+
top: calc((${T} - var(--mq-size-control-sm, 2rem)) / 2);
|
|
195
|
+
right: var(--mq-spacing-2, 0.5rem);
|
|
196
|
+
z-index: 1;
|
|
197
|
+
display: inline-flex;
|
|
198
|
+
align-items: center;
|
|
199
|
+
justify-content: center;
|
|
200
|
+
box-sizing: border-box;
|
|
201
|
+
width: var(--mq-size-control-sm, 2rem);
|
|
202
|
+
height: var(--mq-size-control-sm, 2rem);
|
|
203
|
+
margin: 0;
|
|
204
|
+
padding: 0;
|
|
205
|
+
border: none;
|
|
206
|
+
border-radius: var(--mq-radius-md, 0.375rem);
|
|
207
|
+
background: transparent;
|
|
208
|
+
/* Not --mq-text-secondary: grey.500 is 2.79:1 on the band, under the 3:1 a
|
|
209
|
+
control's icon needs. Same derivation as the subheading. */
|
|
210
|
+
color: var(
|
|
211
|
+
--color-neutrals-text-medium,
|
|
212
|
+
color-mix(in srgb, var(--mq-text-primary, #0a0a23) 64%, transparent)
|
|
213
|
+
);
|
|
214
|
+
cursor: pointer;
|
|
215
|
+
transition: background-color ${C} ease;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.close-btn svg {
|
|
219
|
+
width: var(--mq-size-icon-lg, 1.5rem);
|
|
220
|
+
height: var(--mq-size-icon-lg, 1.5rem);
|
|
221
|
+
pointer-events: none;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.close-btn:hover {
|
|
225
|
+
background: ${k};
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.close-btn:focus-visible {
|
|
229
|
+
outline: 2px solid var(--mq-border-focus, var(--color-primary, #4a1ea7));
|
|
230
|
+
outline-offset: 2px;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* Over a photo the bare glyph can vanish; give it a chip to sit on. */
|
|
234
|
+
.dialog.with-image .close-btn {
|
|
235
|
+
top: var(--mq-spacing-3, 0.75rem);
|
|
236
|
+
right: var(--mq-spacing-3, 0.75rem);
|
|
237
|
+
border-radius: var(--mq-radius-full, 9999px);
|
|
238
|
+
background: var(
|
|
239
|
+
--mq-surface-surface,
|
|
240
|
+
var(--color-neutrals-background-extraWeak, #ffffff)
|
|
241
|
+
);
|
|
242
|
+
opacity: 0.9;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.dialog.with-image .close-btn:hover {
|
|
246
|
+
opacity: 1;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.close-btn:disabled {
|
|
250
|
+
opacity: 0.4;
|
|
251
|
+
cursor: default;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
@media (forced-colors: active) {
|
|
255
|
+
.dialog {
|
|
256
|
+
border: 1px solid CanvasText;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
@media (prefers-reduced-motion: reduce) {
|
|
261
|
+
dialog.root,
|
|
262
|
+
.dialog,
|
|
263
|
+
.close-btn {
|
|
264
|
+
transition: none;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.dialog {
|
|
268
|
+
transform: none;
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
`,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`
|
|
272
|
+
<dialog
|
|
273
|
+
class="root ${this.isActive?"active":""}"
|
|
274
|
+
role=${this.alert?"alertdialog":s}
|
|
275
|
+
aria-modal=${this.isModal?"true":s}
|
|
276
|
+
closedby=${this.dismissable?"closerequest":"none"}
|
|
277
|
+
aria-labelledby=${this.hasHeading?"dialog-heading":s}
|
|
278
|
+
aria-label=${!this.hasHeading&&this.label?this.label:s}
|
|
279
|
+
aria-describedby=${this.hasSubheading?"dialog-subheading":s}
|
|
280
|
+
@pointerdown=${this.onDialogPointerDown}
|
|
281
|
+
@click=${this.onDialogClick}
|
|
282
|
+
@keydown=${this.onKeyDown}
|
|
283
|
+
@cancel=${this.onCancel}
|
|
284
|
+
@close=${this.onNativeClose}
|
|
285
|
+
>
|
|
286
|
+
<div class=${e} part="dialog">
|
|
287
|
+
<button
|
|
288
|
+
class="close-btn"
|
|
289
|
+
part="close"
|
|
290
|
+
type="button"
|
|
291
|
+
aria-label=${this.closeLabel}
|
|
292
|
+
title=${this.closeLabel}
|
|
293
|
+
?disabled=${!this.dismissable}
|
|
294
|
+
@click=${this.onCloseClick}
|
|
295
|
+
>
|
|
296
|
+
<svg
|
|
297
|
+
aria-hidden="true"
|
|
298
|
+
viewBox="0 0 24 24"
|
|
299
|
+
fill="none"
|
|
300
|
+
stroke="currentColor"
|
|
301
|
+
stroke-width="2"
|
|
302
|
+
stroke-linecap="round"
|
|
303
|
+
stroke-linejoin="round"
|
|
304
|
+
>
|
|
305
|
+
<path d="M18 6 6 18M6 6l12 12" />
|
|
306
|
+
</svg>
|
|
307
|
+
</button>
|
|
308
|
+
<div
|
|
309
|
+
class="scroll"
|
|
310
|
+
part="scroll"
|
|
311
|
+
tabindex=${this.scrollable?"0":s}
|
|
312
|
+
role=${this.scrollable?"region":s}
|
|
313
|
+
aria-labelledby=${this.scrollable&&this.hasHeading?"dialog-heading":s}
|
|
314
|
+
aria-label=${this.scrollable&&!this.hasHeading&&this.label?this.label:s}
|
|
315
|
+
>
|
|
316
|
+
<div class="image" part="image" ?hidden=${!this.hasImage}>
|
|
317
|
+
<slot name="image" @slotchange=${this.onSlotChange}></slot>
|
|
318
|
+
</div>
|
|
319
|
+
<div class="header" part="header" ?hidden=${!this.hasHeading}>
|
|
320
|
+
<div class="heading" part="heading" id="dialog-heading">
|
|
321
|
+
<slot name="heading" @slotchange=${this.onSlotChange}></slot>
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
<div class="body" part="body">
|
|
325
|
+
<div
|
|
326
|
+
class="subheading"
|
|
327
|
+
part="subheading"
|
|
328
|
+
id="dialog-subheading"
|
|
329
|
+
?hidden=${!this.hasSubheading}
|
|
330
|
+
>
|
|
331
|
+
<slot name="subheading" @slotchange=${this.onSlotChange}></slot>
|
|
332
|
+
</div>
|
|
333
|
+
<div class="content" part="content"><slot></slot></div>
|
|
334
|
+
</div>
|
|
335
|
+
</div>
|
|
336
|
+
<div class="footer" part="footer" ?hidden=${!this.hasFooter}>
|
|
337
|
+
<slot name="footer" @slotchange=${this.onSlotChange}></slot>
|
|
338
|
+
</div>
|
|
339
|
+
</div>
|
|
340
|
+
</dialog>
|
|
341
|
+
`}};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};
|