@mediquo/elements 0.6.0 → 0.6.2
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/api-chat-client-BBL1U9EQ.js +1 -0
- package/dist/chunks/{apple-pay-outcomes-0ozxSHyb.js → apple-pay-outcomes-CnVRvAVS.js} +1 -1
- package/dist/chunks/{appointment-card-skeleton-hglMW7x6.js → appointment-card-skeleton-C8VERHzq.js} +1 -1
- package/dist/chunks/custom-element-D2ziPxYE.js +1 -0
- package/dist/chunks/{documentation-view-geQU8ttU.js → documentation-view-DXSjqDwQ.js} +1 -1
- package/dist/chunks/{index-CvDnN2NR.js → index-Ca-l41nB.js} +1 -1
- package/dist/chunks/{index-BBUiLb3Y.js → index-DhfVmF4C.js} +1 -1
- package/dist/chunks/{index-Bx8TWBsk.js → index-KvIw19qY.js} +1 -1
- package/dist/chunks/{index-BJcdB5MT.js → index-ShXzd7UZ.js} +1 -1
- package/dist/chunks/{index-CGnPsMVQ.js → index-m6lXVNW0.js} +1 -1
- package/dist/chunks/{mq-layout-CGcdxGMQ.js → mq-layout-BndHxkbb.js} +1 -1
- package/dist/chunks/{price-DIhNpS8n.js → price-LTnCz9kN.js} +1 -1
- package/dist/chunks/{professional-overview-CfjgnTw4.js → professional-overview-C4H_znIJ.js} +1 -1
- package/dist/chunks/{refund-cancel-policy-BQDnePq9.js → refund-cancel-policy-CXFTrFfo.js} +1 -1
- package/dist/chunks/{schemas.d-5CaMrfOq.d.ts → schemas.d-Bss7CeCZ.d.ts} +3 -0
- package/dist/env.js +1 -1
- package/dist/index.js +1 -1
- package/dist/mq-apple-pay-checkout.js +1 -1
- package/dist/mq-appointment-checkout.d.ts +1 -1
- package/dist/mq-appointment-checkout.js +1 -1
- package/dist/mq-appointment-documentation.js +1 -1
- package/dist/mq-chat-room.js +1 -1
- package/dist/mq-checkout.js +1 -1
- package/dist/mq-dashboard.js +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.js +1 -1
- package/dist/mq-payment-poller.js +1 -1
- package/dist/mq-professional-presence-sync.js +1 -1
- package/dist/mq-query-client-provider.js +1 -1
- package/dist/mq-schedule-success.js +1 -1
- package/dist/mq-schedule.d.ts +4 -5
- package/dist/mq-schedule.js +1 -1
- package/dist/mq-session-provider.js +1 -1
- package/dist/mq-socket-provider.js +1 -1
- package/dist/mq-support-chat.js +1 -1
- package/dist/mq-terms-and-conditions.js +1 -1
- package/dist/mq-theme-provider.js +1 -1
- package/dist/mq-unread-count-sync.js +1 -1
- package/dist/mq-videocall.js +1 -1
- package/dist/react/mq-apple-pay-checkout.js +1 -1
- package/dist/react/mq-appointment-checkout.d.ts +1 -1
- package/dist/react/mq-appointment-checkout.js +1 -1
- package/dist/react/mq-appointment-documentation.js +1 -1
- package/dist/react/mq-chat-room.js +1 -1
- package/dist/react/mq-checkout.js +1 -1
- package/dist/react/mq-dashboard.js +1 -1
- package/dist/react/mq-documents-page.js +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.js +1 -1
- package/dist/react/mq-payment-poller.js +1 -1
- package/dist/react/mq-professional-presence-sync.js +1 -1
- package/dist/react/mq-query-client-provider.js +1 -1
- package/dist/react/mq-schedule-success.js +1 -1
- package/dist/react/mq-schedule.d.ts +3 -4
- package/dist/react/mq-schedule.js +1 -1
- package/dist/react/mq-session-provider.js +1 -1
- package/dist/react/mq-socket-provider.js +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-theme-provider.js +1 -1
- package/dist/react/mq-toast-container.js +1 -1
- package/dist/react/mq-unread-count-sync.js +1 -1
- package/dist/react/mq-videocall.js +1 -1
- package/dist/toast.js +1 -1
- package/dist/ui/back-link.js +1 -1
- package/dist/ui/mq-avatar.js +1 -1
- package/dist/ui/mq-button.js +1 -1
- package/dist/ui/mq-calendar.js +1 -1
- package/dist/ui/mq-callout.js +1 -1
- package/dist/ui/mq-card.js +1 -1
- package/dist/ui/mq-checkbox.js +1 -1
- package/dist/ui/mq-clamped-text.js +1 -1
- package/dist/ui/mq-dialog.js +1 -1
- package/dist/ui/mq-floating-bubble.js +1 -1
- package/dist/ui/mq-input.js +1 -1
- package/dist/ui/mq-rating.js +1 -1
- package/dist/ui/mq-select.js +1 -1
- package/dist/ui/mq-skeleton.js +1 -1
- package/dist/ui/mq-tabs.js +1 -1
- package/dist/ui/mq-text-button.js +1 -1
- package/dist/ui/mq-textarea.js +1 -1
- package/dist/ui/mq-time-slot-picker.js +1 -1
- package/dist/ui/mq-toast.js +1 -1
- package/dist/ui/mq-unread-badge.js +1 -1
- package/package.json +1 -1
- package/dist/chunks/api-chat-client-1Vz6ZOwp.js +0 -1
- package/dist/chunks/custom-element-DA9Fxvxd.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 o}from"../chunks/index-
|
|
2
|
+
import{o as t}from"../chunks/create-component-BB-6Gu6l.js";import*as s from"react";import{M as o}from"../chunks/index-DhfVmF4C.js";import"../chunks/custom-element-D2ziPxYE.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/mutation-controller-CR2qcqhH.js";import"../env.js";import"../chunks/api-chat-client-BBL1U9EQ.js";import"../chunks/external-CJj32K_p.js";import"../chunks/parseISO-Dj3qSTG8.js";import"../chunks/format-CRFiCNHw.js";import"../chunks/isBefore-CPpTogxo.js";const n=t({react:s,tagName:"mq-terms-and-conditions",elementClass:o,events:{onContinue:"continue"}});export{n as MqTermsAndConditions};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{o as e}from"../chunks/create-component-BB-6Gu6l.js";import*as t from"react";import{MqThemeProvider as r}from"../mq-theme-provider.js";import"../chunks/custom-element-
|
|
2
|
+
import{o as e}from"../chunks/create-component-BB-6Gu6l.js";import*as t from"react";import{MqThemeProvider as r}from"../mq-theme-provider.js";import"../chunks/custom-element-D2ziPxYE.js";import"../chunks/lit-element-DiWJYFwC.js";import"../chunks/property-scuRaFcM.js";import"../chunks/state-LQivXIgA.js";import"../theme.js";import"../chunks/ensure-context-root-DbdqwnKB.js";import"../chunks/context-request-event-Dfydf1ub.js";const o=e({react:t,tagName:"mq-theme-provider",elementClass:r});export{o as MqThemeProvider};
|
|
@@ -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{MqToastContainer as e}from"../ui/mq-toast.js";import"../chunks/custom-element-
|
|
2
|
+
import{o as t}from"../chunks/create-component-BB-6Gu6l.js";import*as s from"react";import{MqToastContainer as e}from"../ui/mq-toast.js";import"../chunks/custom-element-D2ziPxYE.js";import"../chunks/lit-element-DiWJYFwC.js";import"../chunks/property-scuRaFcM.js";import"../chunks/state-LQivXIgA.js";import"../chunks/class-map-Co76I6aw.js";import"../chunks/directive-2EDmOukv.js";const o=t({react:s,tagName:"mq-toast-container",elementClass:e});export{o as MqToastContainer};
|
|
@@ -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{MqUnreadCountSync as n}from"../mq-unread-count-sync.js";import"../chunks/api-chat-client-
|
|
2
|
+
import{o as t}from"../chunks/create-component-BB-6Gu6l.js";import*as s from"react";import{MqUnreadCountSync as n}from"../mq-unread-count-sync.js";import"../chunks/api-chat-client-BBL1U9EQ.js";import"../chunks/custom-element-D2ziPxYE.js";import"../chunks/lit-element-DiWJYFwC.js";import"../chunks/context-consumer-ESdICVAb.js";import"../chunks/context-request-event-Dfydf1ub.js";import"../chunks/chunk-RCFIJTXZ-C6Ir0-sM.js";import"../chunks/create-context-DqP79qjF.js";import"../chunks/chunk-S5RWG6G2-DPesx3Od.js";import"../chunks/chunk-YTQUGGS3-DmCGIoFy.js";import"../chunks/external-CJj32K_p.js";import"../chunks/chunk-GZF3YFSX-DM-GTqxg.js";import"../chunks/parseISO-Dj3qSTG8.js";import"../chunks/format-CRFiCNHw.js";import"../chunks/isBefore-CPpTogxo.js";import"../env.js";const c=t({react:s,tagName:"mq-unread-count-sync",elementClass:n});export{c as MqUnreadCountSync};
|
|
@@ -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{MqVideocall as s}from"../mq-videocall.js";import"../chunks/custom-element-
|
|
2
|
+
import{o as i}from"../chunks/create-component-BB-6Gu6l.js";import*as o from"react";import{MqVideocall as s}from"../mq-videocall.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-D2fnEhT2.js";import"../chunks/context-provider--AKuwfs9.js";import"../chunks/context-request-event-Dfydf1ub.js";import"../chunks/task-Bj8p7kJX.js";import"../chunks/api-chat-client-BBL1U9EQ.js";import"../chunks/external-CJj32K_p.js";import"../chunks/parseISO-Dj3qSTG8.js";import"../chunks/format-CRFiCNHw.js";import"../chunks/isBefore-CPpTogxo.js";import"../env.js";import"../chunks/state-LQivXIgA.js";import"../chunks/create-context-DqP79qjF.js";import"../chunks/runtime-Bg1WXVCx.js";import"../chunks/localized-decorator-BlOuLhym.js";import"../chunks/telemetry-client-BLJVs9me.js";import"../i18n.js";import"../chunks/chunk-4FFT6DC2-CVWibomC.js";import"../ui/icons/calendar-icon.js";import"../ui/back-link.js";import"../events.js";import"../ui/icons/chevron-left-icon.js";import"../chunks/if-defined-BYeVdwgd.js";import"../ui/mq-text-button.js";import"../chunks/class-map-Co76I6aw.js";import"../chunks/directive-2EDmOukv.js";import"../chunks/professional-overview-C4H_znIJ.js";import"../ui/icons/chevron-down-icon.js";import"../ui/mq-avatar.js";import"../chunks/consume-CovVqBjI.js";import"../chunks/context-consumer-ESdICVAb.js";import"../ui/icons/clock-icon.js";import"../chunks/documentation-view-DXSjqDwQ.js";import"../ui/icons/info-circle-outine-icon.js";import"../ui/mq-button.js";import"../chunks/chunk-S5RWG6G2-DPesx3Od.js";import"../ui/icons/message-bubble-icon.js";import"../mq-chat-room.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-BlO1Ax65.js";import"../chunks/chunk-RCFIJTXZ-C6Ir0-sM.js";import"../chunks/query-Cjvi4_dT.js";import"../chunks/chunk-YMQSBQHL-De_r7BNk.js";import"../chunks/query-CeeutdfT.js";import"../chunks/chunk-GZF3YFSX-DM-GTqxg.js";import"../ui/icons/check-double-icon.js";import"../ui/icons/check-icon.js";import"../chunks/chunk-YTQUGGS3-DmCGIoFy.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"../chunks/index-KvIw19qY.js";import"../ui/icons/download-icon.js";import"../chunks/get-organization-setup-query-BMbuRi6v.js";import"../chunks/i18n-formats-DYS91YEa.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/toast.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import"./chunks/custom-element-
|
|
1
|
+
import"./chunks/custom-element-D2ziPxYE.js";import"./chunks/lit-element-DiWJYFwC.js";import"./chunks/property-scuRaFcM.js";import"./chunks/state-LQivXIgA.js";import"./chunks/class-map-Co76I6aw.js";export{MqToast,MqToastContainer,registerToastContainer,toast}from"./ui/mq-toast.js";import"./chunks/directive-2EDmOukv.js";
|
package/dist/ui/back-link.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as t,
|
|
1
|
+
import{_ as t,c as o}from"../chunks/custom-element-D2ziPxYE.js";import{a as s,x as e}from"../chunks/lit-element-DiWJYFwC.js";import{n as r}from"../chunks/property-scuRaFcM.js";import{MqBackEvent as i}from"../events.js";import{chevronLeftIcon as c}from"./icons/chevron-left-icon.js";import"./mq-text-button.js";import"../chunks/if-defined-BYeVdwgd.js";import"./icons/types.js";import"../chunks/class-map-Co76I6aw.js";import"../chunks/directive-2EDmOukv.js";let n=class BackLink extends s{render(){return e`<mq-text-button @click="${()=>{this.dispatchEvent(new i(this.source?{source:this.source}:{}))}}" fontWeight="bold">${c({color:"var(--color-primary)",size:24})}<slot></slot></mq-text-button>`}};t([r({type:String})],n.prototype,"source",void 0),n=t([o("back-link")],n);export{n as BackLink};
|
package/dist/ui/mq-avatar.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as t,
|
|
1
|
+
import{_ as t,c as a}from"../chunks/custom-element-D2ziPxYE.js";import{i,a as e,E as r,x as s}from"../chunks/lit-element-DiWJYFwC.js";import{n as o}from"../chunks/property-scuRaFcM.js";import{r as l}from"../chunks/state-LQivXIgA.js";import{e as h}from"../chunks/class-map-Co76I6aw.js";import"../chunks/directive-2EDmOukv.js";const n=i`:host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;user-select:none;width:45px;height:45px;border-radius:100%;background-color:var(--mq-avatar-bg,#f4f4f5);color:var(--mq-avatar-color,#71717a);font-family:var(--mq-font-family,system-ui,-apple-system,sans-serif);font-weight:500;position:relative}.avatar-image{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.avatar-image.hidden{display:none}.avatar-fallback{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:var(--mq-avatar-font-size,.875rem);line-height:1;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.avatar-fallback.hidden{display:none}:host([size=sm]){width:var(--avatar-size-sm);height:var(--avatar-size-sm);--mq-avatar-font-size:0.75rem}:host([size=md]){width:var(--avatar-size-md);height:var(--avatar-size-md);--mq-avatar-font-size:0.875rem}:host([size=lg]){width:var(--avatar-size-lg);height:var(--avatar-size-lg);--mq-avatar-font-size:1.125rem}:host([size=xl]){width:var(--avatar-size-xl);height:var(--avatar-size-xl);--mq-avatar-font-size:1.25rem}:host(:focus){outline:2px solid var(--mq-focus-ring-color,#2563eb);outline-offset:2px}:host(:focus-visible){outline:2px solid var(--mq-focus-ring-color,#2563eb);outline-offset:2px}`;let d=class MqAvatar extends e{constructor(){super(...arguments),this.size="md",this._loading=!1,this._imageError=!1,this._handleImageLoad=()=>{this._imageError=!1,this._loading=!1},this._handleImageError=()=>{this._imageError=!0,this._loading=!1},this._handleImageLoadStart=()=>{this._loading=!0,this._imageError=!1}}static{this.styles=n}_getInitials(t){if(!t)return"";const a=t.trim().split(/\s+/);if(a.length>=2){const[t,i]=a;return[t?.[0]??"",i?.[0]??""].join("").toUpperCase()}return t.slice(0,2).toUpperCase()}_shouldShowImage(){return!(!this.src||this._imageError)}_shouldShowFallback(){return!this.src||this._imageError||this._loading}willUpdate(t){t.has("src")&&(this._imageError=!1,this.src?this._loading=!0:this._loading=!1)}render(){const t=this._shouldShowImage(),a=this._shouldShowFallback();return s`${this.src?s`<img class="${h({"avatar-image":!0,hidden:!t})}" src="${this.src}" alt="${this.alt||this.fallback||"Avatar"}" @load="${this._handleImageLoad}" @error="${this._handleImageError}" @loadstart="${this._handleImageLoadStart}" loading="lazy">`:r}<div class="${h({"avatar-fallback":!0,hidden:!a})}" role="img" aria-label="${this.alt||this.fallback||"Avatar"}">${this.fallback?this._getInitials(this.fallback):""}</div>`}};t([o({type:String})],d.prototype,"src",void 0),t([o({type:String})],d.prototype,"fallback",void 0),t([o({type:String})],d.prototype,"alt",void 0),t([o({type:String})],d.prototype,"size",void 0),t([l()],d.prototype,"_loading",void 0),t([l()],d.prototype,"_imageError",void 0),d=t([a("mq-avatar")],d);export{d as MqAvatar};
|
package/dist/ui/mq-button.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as t,
|
|
1
|
+
import{_ as t,c as o}from"../chunks/custom-element-D2ziPxYE.js";import{i as r,a as e,x as i}from"../chunks/lit-element-DiWJYFwC.js";import{n}from"../chunks/property-scuRaFcM.js";import{e as a}from"../chunks/class-map-Co76I6aw.js";import"../chunks/directive-2EDmOukv.js";const l=r`:host{display:inline-block}button{display:inline-flex;align-items:center;justify-content:center;gap:var(--size-2);border-radius:var(--border-radius-md);letter-spacing:.01em;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-weight-bold);transition:all .2s;outline:0;border:none;cursor:pointer;position:relative;line-height:var(--text-base--line-height);padding:0;box-sizing:border-box;width:100%;--mq-btn-ring-color:var(--color-primary)}button:focus-visible{box-shadow:0 0 0 1.5px var(--color-background,#fff),0 0 0 3.5px var(--mq-btn-ring-color,var(--color-primary));z-index:1}button.ghost-inverted:disabled,button.ghost-negative:disabled,button.ghost:disabled,button.light:disabled,button.link:disabled,button.negative:disabled,button.outline-inverted:disabled,button.outline-negative:disabled,button.outline:disabled,button.primary:disabled,button.secondary:disabled,button:disabled{background:var(--color-neutrals-background-disabled);color:var(--color-neutrals-link-disabled);border:var(--action-border-width) solid var(--color-neutrals-border-disabled);cursor:not-allowed}:host([fullwidth]){width:100%}:host([fullwidth]) button{width:100%}button.primary{background:var(--color-primary);color:var(--color-white);--mq-btn-ring-color:var(--color-primary)}button.primary:hover:not(:disabled){background:var(--color-primary-dark)}button.secondary{background:var(--color-gray-lighter);color:var(--color-black);--mq-btn-ring-color:var(--color-gray)}button.secondary:hover:not(:disabled){background:var(--color-gray-light)}button.light{background:var(--color-primary-background-extraWeak);color:var(--color-neutrals-text-default);--mq-btn-ring-color:var(--color-primary)}button.light:hover:not(:disabled){background:var(--color-primary-light)}button.negative{background:var(--color-negative);color:var(--color-white);--mq-btn-ring-color:var(--color-negative)}button.negative:hover:not(:disabled){background:var(--color-negative-dark)}button.outline-negative{background:0 0;color:var(--color-negative);border:var(--action-border-width) solid var(--color-negative);--mq-btn-ring-color:var(--color-negative)}button.outline-negative:hover:not(:disabled){background:var(--color-negative-light)}button.ghost{background:0 0;color:var(--color-primary);--mq-btn-ring-color:var(--color-primary)}button.ghost:hover:not(:disabled){background:var(--color-primary-light)}button.ghost-inverted{background:0 0;color:var(--color-background);--mq-btn-ring-color:var(--color-background)}button.ghost-inverted:hover:not(:disabled){background:color-mix(in lab,var(--color-background) 50%,transparent);color:var(--color-foreground)}button.ghost-negative{background:0 0;color:var(--color-negative);--mq-btn-ring-color:var(--color-negative)}button.ghost-negative:hover:not(:disabled){background:var(--color-negative-light)}button.link{background:0 0;color:var(--color-primary);text-decoration:underline;text-underline-offset:4px;border:none;padding:0;--mq-btn-ring-color:var(--color-primary)}button.link:hover:not(:disabled){text-decoration:underline}button.outline{background:0 0;color:var(--color-primary-link-default);border:var(--action-border-width) solid var(--color-primary-background-default);--mq-btn-ring-color:var(--color-primary)}button.outline:disabled{color:var(--color-neutrals-link-disabled);border-color:var(--color-neutrals-border-disabled)}button.outline:hover:not(:disabled){background:var(--color-primary-light)}button.outline-inverted{background:0 0;color:var(--color-white);border:var(--action-border-width) solid var(--color-white);--mq-btn-ring-color:var(--color-white)}button.outline-inverted:hover:not(:disabled){background:color-mix(in srgb,var(--color-white) 15%,transparent)}button.xs{height:var(--button-height-xs);padding:var(--size-2) var(--size-3);font-size:var(--text-xs)}button.sm{height:var(--button-height-sm);padding:var(--size-3);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}button.md{height:var(--button-height-md);padding:var(--size-3) var(--size-4);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}button.lg{height:var(--button-height-lg);padding:var(--sp-4) var(--sp-8);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}button.xl{height:var(--button-height-xl);padding:var(--size-4) var(--size-8);font-size:var(--text-base);line-height:var(--text-base--line-height)}button.icon-xs{height:var(--size-6);width:var(--size-6);padding:0;font-size:var(--text-xs);line-height:var(--text-xs--line-height)}button.icon-sm{height:var(--size-9);width:var(--size-9);padding:0;font-size:var(--text-sm);line-height:var(--text-sm--line-height)}button.icon-md{height:var(--size-10);width:var(--size-10);padding:0;font-size:var(--text-sm);line-height:var(--text-sm--line-height)}button.icon-lg{height:var(--size-11);width:var(--size-11);padding:0;font-size:var(--text-base);line-height:var(--text-base--line-height)}button.uppercase{text-transform:uppercase}button.no-padding{padding:0!important}`;let s=class MqButton extends e{constructor(){super(...arguments),this.internals=this.attachInternals(),this.variant="primary",this.size="md",this.fullwidth=!1,this.disabled=!1,this.type="button",this.uppercase=!1,this.noPadding=!1,this.handleClick=t=>{this.disabled?t.preventDefault():"submit"===this.type&&this.internals.form?(t.preventDefault(),this.internals.form.requestSubmit()):"reset"===this.type&&this.internals.form&&(t.preventDefault(),this.internals.form.reset())}}static{this.styles=[l]}static{this.formAssociated=!0}static{this.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0}}render(){const t={[this.variant]:!0,[this.size]:!0,fullwidth:this.fullwidth,disabled:this.disabled,uppercase:this.uppercase,"no-padding":this.noPadding};return i`<button class="${a(t)}" type="${this.type}" ?disabled="${this.disabled}" @click="${this.handleClick}"><slot></slot></button>`}};t([n({type:String,reflect:!0})],s.prototype,"variant",void 0),t([n({type:String,reflect:!0})],s.prototype,"size",void 0),t([n({type:Boolean,reflect:!0})],s.prototype,"fullwidth",void 0),t([n({type:Boolean,reflect:!0})],s.prototype,"disabled",void 0),t([n({type:String,reflect:!0})],s.prototype,"type",void 0),t([n({type:Boolean,reflect:!0})],s.prototype,"uppercase",void 0),t([n({type:Boolean,reflect:!0})],s.prototype,"noPadding",void 0),s=t([o("mq-button")],s);export{s as MqButton};
|
package/dist/ui/mq-calendar.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../chunks/custom-element-
|
|
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-Ca-l41nB.js";import"../chunks/parseISO-Dj3qSTG8.js";import"../chunks/isSameDay-CuhZMy1T.js";import"../chunks/isBefore-CPpTogxo.js";import"../chunks/directive-2EDmOukv.js";import"../chunks/if-defined-BYeVdwgd.js";import"./icons/types.js";
|
package/dist/ui/mq-callout.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as o,t}from"../chunks/custom-element-
|
|
1
|
+
import{_ as o,c as t}from"../chunks/custom-element-D2ziPxYE.js";import{i as n,a as r,E as e,x as i}from"../chunks/lit-element-DiWJYFwC.js";import{n as s}from"../chunks/property-scuRaFcM.js";import{infoCircleOutineIcon as a}from"./icons/info-circle-outine-icon.js";import"./icons/types.js";const c=n`:host{display:block}.container{align-items:flex-start;background-color:var(--color-neutrals-background-disabled);border-radius:var(--border-radius-sm);box-sizing:border-box;color:var(--color-neutrals-text-default);display:flex;font-family:var(--font-body);font-size:var(--text-sm);gap:var(--sp-2);line-height:var(--text-sm--line-height);margin:0;padding:var(--sp-4) var(--sp-2);width:100%}:host([noPadding]) .container{padding:0}:host([background=solid]) .container{background-color:var(--color-background)}.icon{align-items:center;display:flex;justify-content:center;max-height:100%;min-width:var(--size-6)}.content{display:block;flex:1;margin:0}.content ::slotted(*){margin:0}`;let l=class MqCallout extends r{constructor(){super(...arguments),this.background="default",this.noPadding=!1}static{this.styles=[c]}render(){const o=this.renderVariantIcon(),t=this.hasCustomIcon(),n=Boolean(o||t);return i`<div class="container">${n?i`<span class="icon">${o??i`<slot name="icon"></slot>`}</span>`:e}<div class="content"><slot></slot></div></div>`}hasCustomIcon(){return Boolean(this.querySelector('[slot="icon"]'))}renderVariantIcon(){return"info"===this.variant?a({size:24,color:"var(--color-primary-icon-link)"}):null}};o([s({type:String,reflect:!0})],l.prototype,"background",void 0),o([s({type:String,reflect:!0})],l.prototype,"variant",void 0),o([s({type:Boolean,reflect:!0})],l.prototype,"noPadding",void 0),l=o([t("mq-callout")],l);export{l as MqCallout};
|
package/dist/ui/mq-card.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as r,
|
|
1
|
+
import{_ as r,c as o}from"../chunks/custom-element-D2ziPxYE.js";import{i as e,a as d}from"../chunks/lit-element-DiWJYFwC.js";import{n as a}from"../chunks/property-scuRaFcM.js";const s=e`mq-card{display:block;background-color:var(--color-card);color:var(--color-card-foreground);border:1px solid var(--color-border);box-sizing:border-box;border-radius:var(--border-radius-md);box-shadow:var(--shadow-none)}mq-card[elevation=sm]{box-shadow:var(--shadow-sm)}mq-card[elevation=md]{box-shadow:var(--shadow-md)}mq-card[elevation=lg]{box-shadow:var(--shadow-lg)}mq-card[elevation=xl]{box-shadow:var(--shadow-xl)}mq-card[roundness=none]{border-radius:var(--border-radius-none)}mq-card[roundness=sm]{border-radius:var(--border-radius-sm)}mq-card[roundness=lg]{border-radius:var(--border-radius-lg)}mq-card[roundness=xl]{border-radius:var(--border-radius-xl)}mq-card[roundness="2xl"]{border-radius:var(--border-radius-2xl)}mq-card[roundness=full]{border-radius:var(--border-radius-full)}`,t=new WeakSet;let n=class MqCard extends d{constructor(){super(...arguments),this.elevation="sm",this.roundness="md"}createRenderRoot(){return this}connectedCallback(){super.connectedCallback();const r=this.getRootNode();(r instanceof ShadowRoot||r instanceof Document)&&function(r,o){if(t.has(r))return;t.add(r);const e=o.styleSheet??(()=>{const r=new CSSStyleSheet;return r.replaceSync(o.cssText),r})();r.adoptedStyleSheets=[...r.adoptedStyleSheets,e]}(r,s)}};r([a({type:String,reflect:!0})],n.prototype,"elevation",void 0),r([a({type:String,reflect:!0})],n.prototype,"roundness",void 0),n=r([o("mq-card")],n);export{n as MqCard};
|
package/dist/ui/mq-checkbox.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as e,t}from"../chunks/custom-element-
|
|
1
|
+
import{_ as e,c as t}from"../chunks/custom-element-D2ziPxYE.js";import{i as o,a as i,x as r}from"../chunks/lit-element-DiWJYFwC.js";import{n as c}from"../chunks/property-scuRaFcM.js";import{e as s}from"../chunks/class-map-Co76I6aw.js";import"../chunks/directive-2EDmOukv.js";const a=o`:host{display:inline-flex;align-items:center;justify-content:center;width:var(--size-6);height:var(--size-6)}.checkbox{position:relative;width:18px;height:18px;border:var(--action-border-width) solid var(--color-neutrals-border-default);border-radius:var(--border-radius-sm);background:var(--color-white);display:flex;align-items:center;justify-content:center;transition:all .2s;cursor:pointer;outline:0;box-sizing:border-box;color:var(--color-white)}.checkbox:focus-visible{box-shadow:0 0 0 1.5px var(--color-background),0 0 0 3.5px var(--color-primary)}.checkbox.checked{background:var(--color-primary);border-color:var(--color-primary)}.checkbox.indeterminate{background:var(--color-primary);border-color:var(--color-primary)}.checkbox.checked:not(.disabled):hover,.checkbox.indeterminate:not(.disabled):hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark)}.checkbox:not(.checked):not(.indeterminate):not(.disabled):hover{border-color:var(--color-primary)}.checkbox.disabled{cursor:not-allowed;opacity:.5}.checkbox svg{width:12px;height:auto;display:none}.checkbox.checked .icon-checked{display:block}.checkbox.indeterminate .icon-indeterminate{display:block}`;let d=class MqCheckbox extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.checked=!1,this.disabled=!1,this.required=!1,this.indeterminate=!1,this.handleClick=e=>{this.disabled?e.preventDefault():(this.checked=!this.checked,this.indeterminate=!1,this.updateFormValue(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.checked}})))},this.handleKeyDown=e=>{this.disabled||" "===e.key&&(e.preventDefault(),this.handleClick(e))}}static{this.styles=[a]}static{this.formAssociated=!0}static{this.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0}}connectedCallback(){super.connectedCallback(),this.updateFormValue(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick)}updateFormValue(){this.checked&&this.value?this.internals.setFormValue(this.value):this.internals.setFormValue(null)}render(){const e={checkbox:!0,checked:this.checked,disabled:this.disabled,indeterminate:this.indeterminate};return r`<div class="${s(e)}" role="checkbox" tabindex="${this.disabled?-1:0}" aria-checked="${this.indeterminate?"mixed":this.checked}" aria-disabled="${this.disabled}" @keydown="${this.handleKeyDown}"><svg class="icon-indeterminate" width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 1H12" stroke="currentColor" stroke-width="2"/></svg> <svg class="icon-checked" width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5L4.5 8.5L11 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>`}};e([c({type:Boolean,reflect:!0})],d.prototype,"checked",void 0),e([c({type:Boolean,reflect:!0})],d.prototype,"disabled",void 0),e([c({type:Boolean,reflect:!0})],d.prototype,"required",void 0),e([c({type:Boolean,reflect:!0})],d.prototype,"indeterminate",void 0),e([c({type:String})],d.prototype,"name",void 0),e([c({type:String})],d.prototype,"value",void 0),d=e([t("mq-checkbox")],d);export{d as MqCheckbox};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../chunks/custom-element-
|
|
1
|
+
import"../chunks/custom-element-D2ziPxYE.js";import"../chunks/lit-element-DiWJYFwC.js";import"../chunks/property-scuRaFcM.js";import"../chunks/state-LQivXIgA.js";import"../chunks/class-map-Co76I6aw.js";export{M as MqClampedText}from"../chunks/index-ShXzd7UZ.js";import"../chunks/style-map-CIdqdn7C.js";import"./mq-text-button.js";import"../chunks/directive-2EDmOukv.js";import"../chunks/if-defined-BYeVdwgd.js";
|
package/dist/ui/mq-dialog.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as e,t}from"../chunks/custom-element-
|
|
1
|
+
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"./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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as t,
|
|
1
|
+
import{_ as t,c as e}from"../chunks/custom-element-D2ziPxYE.js";import{i as o,a as n,x as i}from"../chunks/lit-element-DiWJYFwC.js";import{n as s}from"../chunks/property-scuRaFcM.js";const a=o`:host{display:contents}:host(:not([open])){display:none}.floating-content-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000;opacity:0;visibility:hidden;pointer-events:none}.floating-content-overlay.open{opacity:1;visibility:visible;pointer-events:auto}.floating-content{position:fixed;inset:var(--mq-safe-top,0) var(--mq-safe-right,0) var(--mq-safe-bottom,0) var(--mq-safe-left,0);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);box-shadow:var(--dialog-shadow,0 10px 25px rgba(0,0,0,.2));overflow:hidden;opacity:0}.floating-content.open{opacity:1}@media (min-width:768px){.floating-content-overlay{display:flex;align-items:center;justify-content:center}.floating-content{max-height:80vh;max-width:770px;width:100%;height:100%;position:relative;top:auto;right:auto;bottom:auto;left:auto}}.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;z-index:1}.close-btn:hover{background:var(--dialog-close-hover-bg,rgba(0,0,0,.05))}.floating-content-inner{padding:0;height:100%;overflow:hidden}slot[name=content]{height:100%}`;let r=class MqFloatingBubble extends n{constructor(){super(...arguments),this.open=!1,this.dismissable=!0,this.hideCloseButton=!1,this.onKeyDown=t=>{this.open&&"Escape"===t.key&&this.dismissable&&(t.stopPropagation(),t.preventDefault(),this.requestClose())},this.onOverlayClick=t=>{if(!this.dismissable)return;const e=this.shadowRoot?.querySelector(".floating-content-overlay");t.target===e&&this.requestClose()},this.onOverlayKeyDown=t=>{if(this.dismissable&&("Enter"===t.key||" "===t.key)){const e=this.shadowRoot?.querySelector(".floating-content-overlay");t.target===e&&(t.preventDefault(),this.requestClose())}},this.onCloseClick=()=>{this.dismissable&&this.requestClose()}}static{this.styles=[a]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.onKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.onKeyDown),super.disconnectedCallback()}requestClose(){this.dispatchEvent(new CustomEvent("mq-close",{bubbles:!0,composed:!0}))}willUpdate(t){t.has("open")&&(this.open?this.toggleAttribute("open",!0):this.toggleAttribute("open",!1))}render(){return i`<div class="floating-content-overlay ${this.open?"open":""}" @click="${this.onOverlayClick}" @keydown="${this.onOverlayKeyDown}"><div class="floating-content ${this.open?"open":""}">${this.hideCloseButton?"":i`<button class="close-btn" type="button" title="Close" ?disabled="${!this.dismissable}" @click="${this.onCloseClick}">✕</button>`}<div class="floating-content-inner"><slot name="content"></slot></div></div></div>`}};t([s({type:Boolean,reflect:!0})],r.prototype,"open",void 0),t([s({type:Boolean,reflect:!0})],r.prototype,"dismissable",void 0),t([s({type:Boolean,reflect:!0})],r.prototype,"hideCloseButton",void 0),r=t([e("mq-floating-bubble")],r);export{r as MqFloatingBubble};
|
package/dist/ui/mq-input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as e,t}from"../chunks/custom-element-
|
|
1
|
+
import{_ as e,c as t}from"../chunks/custom-element-D2ziPxYE.js";import{i as o,a as r,x as i}from"../chunks/lit-element-DiWJYFwC.js";import{n as a}from"../chunks/property-scuRaFcM.js";import{r as s}from"../chunks/state-LQivXIgA.js";import{e as n}from"../chunks/query-CeeutdfT.js";import{e as l}from"../chunks/class-map-Co76I6aw.js";import{o as p}from"../chunks/if-defined-BYeVdwgd.js";import{calendarIcon as d}from"./icons/calendar-icon.js";import"../chunks/directive-2EDmOukv.js";import"./icons/types.js";const c=o`:host{display:inline-block;width:100%;min-width:200px;font-family:var(--font-body, "Roboto", sans-serif)}.root{position:relative;width:100%}.control{position:relative;width:100%;font-size:var(--text-base);line-height:var(--text-base--line-height)}.input-wrapper{cursor:text;box-sizing:border-box;position:relative;display:flex;flex-direction:column;justify-content:center;height:var(--input-height-md);width:100%;border-radius:var(--border-radius-lg);border:1px solid var(--color-neutrals-border-default);background:var(--color-neutrals-background-extraWeak);padding:var(--size-2) var(--size-4);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.input-wrapper:focus-within{outline:0;box-shadow:0 0 0 1.5px var(--color-background),0 0 0 3.5px var(--color-primary)}.control.focused .input-wrapper{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.control.error .input-wrapper{border-color:var(--color-error-border-default)}.control.error.focused .input-wrapper{border-color:var(--color-error-border-default);box-shadow:0 0 0 1px var(--color-error-border-default)}.control.error .input-wrapper:focus-within{box-shadow:0 0 0 1px var(--color-error-border-default)}.label{color:var(--color-neutrals-text-medium);font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--font-weight-normal);transition:transform .2s ease,font-size .2s ease,top .2s ease;transform-origin:left center;pointer-events:none;position:absolute;left:var(--sp-4);top:50%;transform:translateY(-50%)}.control.disabled .label{opacity:.65}.control.filled .label,.control.focused .label{font-size:var(--text-xs);top:var(--sp-0);transform:translateY(0)}.input{border:none;outline:0;background:0 0;font-family:inherit;font-size:var(--text-base);color:var(--color-neutrals-text-default);width:100%;padding:0;line-height:1;transition:margin-top .2s ease;margin-top:0}.control.filled .input-wrapper:has(.label) .input,.control.focused .input-wrapper:has(.label) .input{margin-top:var(--size-4)}.input::placeholder{color:var(--color-neutrals-text-medium);opacity:.7}.input:disabled{opacity:.65;cursor:not-allowed}.input[type=number]::-webkit-inner-spin-button,.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=number]{appearance:textfield;-moz-appearance:textfield}.input[type=date]::-webkit-calendar-picker-indicator,.input[type=datetime-local]::-webkit-calendar-picker-indicator,.input[type=time]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;appearance:none}.icon{position:absolute;right:var(--size-4);top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto}:host([size=sm]) .input-wrapper{height:var(--input-height-sm);padding:var(--size-1) var(--size-3);font-size:var(--text-sm)}:host([size=sm]) .label{font-size:var(--text-sm);left:var(--sp-3)}:host([size=sm]) .control.filled .label,:host([size=sm]) .control.focused .label{font-size:var(--text-xxs)}:host([size=sm]) .input{font-size:var(--text-sm)}:host([size=sm]) .control.filled .input-wrapper:has(.label) .input,:host([size=sm]) .control.focused .input-wrapper:has(.label) .input{margin-top:var(--size-3)}:host([size=md]) .input-wrapper{height:var(--input-height-md)}:host([size=lg]) .input-wrapper{height:var(--input-height-lg);padding:var(--size-3) var(--size-5);font-size:var(--text-lg)}:host([size=lg]) .label{font-size:var(--text-lg);left:var(--sp-5)}:host([size=lg]) .control.filled .label,:host([size=lg]) .control.focused .label{font-size:var(--text-sm)}:host([size=lg]) .input{font-size:var(--text-lg)}:host([size=lg]) .control.filled .input-wrapper:has(.label) .input,:host([size=lg]) .control.focused .input-wrapper:has(.label) .input{margin-top:var(--size-5)}`;class MqInputChangeEvent extends Event{static{this.eventName="onvaluechange"}constructor(e){super(MqInputChangeEvent.eventName,{bubbles:!0,composed:!0}),this.value=e}}let u=class MqInput extends r{constructor(){super(...arguments),this.labelId=`${"mq-input-label"}-${Math.random().toString(36).slice(2,10)}`,this.label="",this.required=!1,this.value="",this.disabled=!1,this.error=!1,this.placeholder="",this.type="text",this.size="md",this.focused=!1}static{this.styles=[c]}handleInput(e){const t=e.target,o=this.value;this.value=t.value,o!==this.value&&(this.dispatchEvent(new MqInputChangeEvent(this.value)),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))}handleFocus(){this.focused=!0}handleBlur(){this.focused=!1}handleWrapperClick(){this.focus()}handleWrapperKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.focus())}focus(){this.inputElement?.focus()}blur(){this.inputElement?.blur()}handleIconClick(e){e.stopPropagation();const t=this.inputElement;if(t){if("showPicker"in t&&"function"==typeof t.showPicker)try{return void t.showPicker()}catch{}t.focus()}}get shouldShowCalendarIcon(){return"date"===this.type||"time"===this.type||"datetime-local"===this.type}render(){const e=!!this.value,t=l({control:!0,filled:e,focused:this.focused,disabled:this.disabled,error:this.error});return i`<div class="root"><div class="${t}"><div class="input-wrapper" @click="${this.handleWrapperClick}" @keydown="${this.handleWrapperKeyDown}">${this.label?i`<label class="label" id="${this.labelId}" for="input-${this.labelId}">${this.label}${this.required?i`<span aria-label="required">*</span>`:""}</label>`:""} <input id="input-${this.labelId}" class="input" type="${this.type}" name="${p(this.name)}" .value="${this.value}" placeholder="${p(this.label?void 0:this.placeholder)}" ?disabled="${this.disabled}" aria-labelledby="${p(this.label?this.labelId:void 0)}" aria-label="${p(this.label?void 0:this.placeholder||void 0)}" @input="${this.handleInput}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${this.shouldShowCalendarIcon?i`<span class="icon" aria-hidden="true" @click="${this.handleIconClick}">${d({size:20,color:"var(--color-neutrals-text-medium)"})}</span>`:""}</div></div></div>`}};e([a({type:String})],u.prototype,"label",void 0),e([a({type:Boolean})],u.prototype,"required",void 0),e([a({type:String,reflect:!0})],u.prototype,"value",void 0),e([a({type:Boolean,reflect:!0})],u.prototype,"disabled",void 0),e([a({type:Boolean,reflect:!0})],u.prototype,"error",void 0),e([a({type:String})],u.prototype,"name",void 0),e([a({type:String})],u.prototype,"placeholder",void 0),e([a({type:String})],u.prototype,"type",void 0),e([a({type:String,reflect:!0})],u.prototype,"size",void 0),e([s()],u.prototype,"focused",void 0),e([n("input")],u.prototype,"inputElement",void 0),u=e([t("mq-input")],u);export{u as MqInput,MqInputChangeEvent};
|
package/dist/ui/mq-rating.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as e,t}from"../chunks/custom-element-
|
|
1
|
+
import{_ as e,c as t}from"../chunks/custom-element-D2ziPxYE.js";import{i as r,a as s,x as i}from"../chunks/lit-element-DiWJYFwC.js";import{n as a}from"../chunks/property-scuRaFcM.js";import{r as o}from"../chunks/state-LQivXIgA.js";const l=r`:host{display:inline-block}.rating{display:flex;gap:var(--sp-2_5);justify-content:center}.star{background:0 0;border:0;padding:0;width:var(--size-10);height:var(--size-10);cursor:pointer;color:var(--color-primary);display:inline-flex;align-items:center;justify-content:center;line-height:0}.star:disabled{cursor:not-allowed}.star:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--border-radius-sm)}.star svg{width:100%;height:100%}`;class MqRatingChangeEvent extends Event{static{this.eventName="mq-rating-change"}constructor(e){super(MqRatingChangeEvent.eventName,{bubbles:!0,composed:!0}),this.value=e}}let n=class MqRating extends s{constructor(){super(...arguments),this.value=0,this.max=5,this.disabled=!1,this.label="",this._hoverValue=0}static{this.styles=[l]}handleSelect(e){this.disabled||(this.value=e,this.dispatchEvent(new MqRatingChangeEvent(e)))}renderStar(e){return i`<svg viewBox="0 0 24 24" fill="${e?"currentColor":"none"}" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="${"M12 2.5l2.95 5.98 6.6.96-4.78 4.66 1.13 6.58L12 17.6l-5.9 3.08 1.13-6.58L2.45 9.44l6.6-.96L12 2.5z"}"/></svg>`}render(){const e=this._hoverValue||this.value,t=Array.from({length:this.max},(e,t)=>t+1);return i`<div class="rating" role="radiogroup" aria-label="${this.label}" @mouseleave="${()=>{this._hoverValue=0}}">${t.map(t=>i`<button type="button" class="star" role="radio" aria-checked="${t===this.value?"true":"false"}" aria-label="${`${t}/${this.max}`}" ?disabled="${this.disabled}" @mouseenter="${()=>{this.disabled||(this._hoverValue=t)}}" @focus="${()=>{this.disabled||(this._hoverValue=t)}}" @blur="${()=>{this._hoverValue=0}}" @click="${()=>this.handleSelect(t)}">${this.renderStar(t<=e)}</button>`)}</div>`}};e([a({type:Number,reflect:!0})],n.prototype,"value",void 0),e([a({type:Number,reflect:!0})],n.prototype,"max",void 0),e([a({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0),e([a({type:String})],n.prototype,"label",void 0),e([o()],n.prototype,"_hoverValue",void 0),n=e([t("mq-rating")],n);export{n as MqRating,MqRatingChangeEvent};
|
package/dist/ui/mq-select.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as e,t}from"../chunks/custom-element-DA9Fxvxd.js";import{i as o,a as i,x as s,E as n}from"../chunks/lit-element-DiWJYFwC.js";import{n as r}from"../chunks/property-scuRaFcM.js";import{r as l}from"../chunks/state-LQivXIgA.js";import{e as a}from"../chunks/query-CeeutdfT.js";import{e as d}from"../chunks/class-map-Co76I6aw.js";import{o as h}from"../chunks/if-defined-BYeVdwgd.js";import"../chunks/directive-2EDmOukv.js";const c=o`:host{display:inline-block;width:100%;min-width:200px;font-family:var(--font-body, "Roboto", sans-serif)}.root{position:relative;width:100%}.control{position:relative;width:100%;font-family:var(--font-body);font-size:var(--text-base);line-height:var(--text-base--line-height)}.trigger{position:relative;display:flex;align-items:center;height:var(--select-height-md);width:100%;border-radius:var(--border-radius-lg);border:1px solid var(--color-border-input);background:var(--color-neutrals-background-extraWeak);padding:var(--size-2) var(--size-4);cursor:pointer;gap:var(--size-3);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;text-align:left;color:var(--color-neutrals-text-default);overflow:hidden}.trigger:focus-visible{outline:0;box-shadow:0 0 0 1.5px var(--color-background),0 0 0 3.5px var(--color-primary)}.control.open .trigger{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.control.error .trigger{border-color:var(--color-error-border-default)}.control.error.open .trigger{border-color:var(--color-error-border-default);box-shadow:0 0 0 1px var(--color-error-border-default)}.trigger__content{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:1;min-width:0;position:relative}.label{font-family:var(--font-body);color:var(--color-neutrals-text-medium);font-size:var(--text-base);font-weight:var(--font-weight-normal);transition:transform .2s ease,font-size .2s ease,top .2s ease;transform-origin:left center;pointer-events:none}.control.disabled .label{opacity:.65}.control.filled .label,.control.open .label{font-size:var(--text-xs)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-neutrals-text-default);line-height:1;display:flex;align-items:center;width:100%;font-family:var(--font-body);font-size:var(--text-base);transition:height .2s ease;height:0}.control.filled .value,.control.open .value{margin-top:var(--size-1);height:20px}.icon{width:var(--size-3);height:var(--size-3);flex-shrink:0;position:relative}.icon::before{content:"";position:absolute;inset:0;mask:url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2071 0.292894C10.5976 0.683418 10.5976 1.31658 10.2071 1.70711L6.20711 5.70711C5.81658 6.09763 5.18342 6.09763 4.79289 5.70711L0.792894 1.70711C0.402369 1.31658 0.402369 0.683417 0.792894 0.292893C1.18342 -0.0976311 1.81658 -0.0976311 2.20711 0.292893L5.5 3.58579L8.79289 0.292894C9.18342 -0.0976307 9.81658 -0.0976307 10.2071 0.292894Z' fill='%230F77AE'/%3E%3C/svg%3E") center/contain no-repeat;background:var(--color-primary-link-default);transition:transform .2s ease}.control.open .icon::before{transform:rotate(180deg)}.control.error .icon::before{background:var(--color-error-border-default)}.dropdown{position:absolute;top:calc(100% + var(--size-2,8px));left:0;right:0;z-index:10;border-radius:var(--border-radius-lg);background:var(--color-neutrals-background-extraWeak);box-shadow:0 1px 8px 0 rgba(0,0,0,.1);max-height:240px;overflow-y:auto;box-sizing:border-box}.dropdown[hidden]{display:none}.empty-state{padding:var(--size-3) var(--size-5);color:var(--color-neutrals-text-medium);font-size:var(--text-sm);line-height:var(--text-sm--line-height);font-family:var(--font-body)}:host([size=sm]) .trigger{height:var(--select-height-sm);padding:var(--size-1) var(--size-3);font-size:var(--text-sm)}:host([size=sm]) .label{font-size:var(--text-sm)}:host([size=sm]) .control.filled .label,:host([size=sm]) .control.open .label{font-size:var(--text-xxs)}:host([size=sm]) .value{font-size:var(--text-sm)}:host([size=md]) .trigger{height:var(--select-height-md)}:host([size=lg]) .trigger{height:var(--select-height-lg);padding:var(--size-2) var(--size-3);font-size:var(--text-lg)}:host([size=lg]) .label{font-size:var(--text-lg)}:host([size=lg]) .control.filled .label,:host([size=lg]) .control.open .label{font-size:var(--text-sm)}:host([size=lg]) .value{font-size:var(--text-lg)}`,p=o`:host{display:block}button.option{appearance:none;border:none;outline:0;background:0 0;width:100%;padding:var(--size-3) var(--size-5);text-align:left;font:inherit;color:var(--color-neutrals-text-default);display:flex;align-items:center;gap:var(--size-3);cursor:pointer}:host([active]) button.option,button.option:hover{background:var(--color-primary-light)}:host([selected]) button.option{color:var(--color-primary);font-weight:var(--font-weight-medium,500)}:host([disabled]) button.option{opacity:.5;cursor:not-allowed}button.option:focus-visible{outline:0;background:var(--color-primary-light)}`,v="mq-option-request-select";let u=class MqOption extends i{constructor(){super(...arguments),this.internalId=`${"mq-option"}-${Math.random().toString(36).slice(2,10)}`,this.label="",this.disabled=!1,this.selected=!1,this.active=!1}static{this.styles=[p]}get optionId(){return this.internalId}render(){return s`<button id="${this.internalId}" class="option" role="option" type="button" aria-selected="${this.selected?"true":"false"}" ?disabled="${this.disabled}" tabindex="-1" @click="${this.handleSelect}" @pointerenter="${this.handlePointerEnter}"><slot></slot></button>`}get displayLabel(){const e=(this.textContent??"").trim();return this.label||e}handleSelect(e){e.stopPropagation(),this.disabled||this.dispatchEvent(new CustomEvent(v,{detail:{option:this},bubbles:!0,composed:!0}))}handlePointerEnter(){this.disabled||this.dispatchEvent(new CustomEvent(`${v}:hover`,{detail:{option:this},bubbles:!0,composed:!0}))}};e([r({type:String,reflect:!0})],u.prototype,"value",void 0),e([r({type:String})],u.prototype,"label",void 0),e([r({type:Boolean,reflect:!0})],u.prototype,"disabled",void 0),e([r({type:Boolean,reflect:!0})],u.prototype,"selected",void 0),e([r({type:Boolean,reflect:!0})],u.prototype,"active",void 0),u=e([t("mq-option")],u);const b=e=>`${e}-${Math.random().toString(36).slice(2,10)}`;class MqSelectChangeEvent extends Event{static{this.eventName="onvaluechange"}constructor(e){super(MqSelectChangeEvent.eventName,{bubbles:!0,composed:!0}),this.value=e}}let f=class MqSelect extends i{constructor(){super(...arguments),this.dropdownId=b("mq-select-dropdown"),this.labelId=b("mq-select-label"),this.displayValue="",this.optionNodes=[],this.focusedIndex=-1,this.label="",this.value=null,this.disabled=!1,this.error=!1,this.required=!1,this.size="md",this.open=!1,this.handleOutsideClick=e=>{if(!this.open)return;e.composedPath().includes(this)||this.close()},this.handleOptionRequest=e=>{const{option:t}=e.detail;t&&this.selectOption(t)},this.handleOptionHover=e=>{if(!this.open)return;const t=this.optionNodes.indexOf(e.detail.option);t>=0&&this.setActiveIndex(t)},this.handleKeyDown=e=>{if(this.open){if(this.open)switch(e.key){case"ArrowDown":case"ArrowUp":{e.preventDefault();const t="ArrowDown"===e.key?1:-1;this.moveActive(t);break}case"Enter":case" ":{e.preventDefault();const t=this.optionNodes[this.focusedIndex];t&&this.selectOption(t);break}case"Escape":e.preventDefault(),this.close();break;case"Tab":this.close()}}else"ArrowDown"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),this.openDropdown())}}static{this.styles=[c]}connectedCallback(){super.connectedCallback(),this.addEventListener(v,this.handleOptionRequest),this.addEventListener(`${v}:hover`,this.handleOptionHover)}disconnectedCallback(){this.removeEventListener(v,this.handleOptionRequest),this.removeEventListener(`${v}:hover`,this.handleOptionHover),this.removeGlobalListeners(),super.disconnectedCallback()}firstUpdated(){this.refreshOptions(),this.syncSelection()}updated(e){e.has("value")&&this.syncSelection(),e.has("open")&&(this.open?(this.addGlobalListeners(),this.focusTrigger(),this.prepareActiveIndex()):(this.removeGlobalListeners(),this.focusedIndex=-1,this.resetActiveStates(),this.dropdownId=b("mq-select-dropdown")))}handleSlotChange(){this.refreshOptions(),this.syncSelection()}refreshOptions(){const e=this.defaultSlot;if(!e)return;const t=e.assignedElements({flatten:!0}).filter(e=>e instanceof u);this.optionNodes=t,this.open&&0===t.length&&(this.focusedIndex=-1)}syncSelection(){const e=this.optionNodes.find(e=>e.value===this.value);for(const t of this.optionNodes)t.selected=t===e;this.displayValue=e?.displayLabel??"",this.focusedIndex=e?this.optionNodes.indexOf(e):-1,!e&&this.value&&(this.value=null)}addGlobalListeners(){window.addEventListener("pointerdown",this.handleOutsideClick,{capture:!0}),window.addEventListener("keydown",this.handleKeyDown,!0)}removeGlobalListeners(){window.removeEventListener("pointerdown",this.handleOutsideClick,{capture:!0}),window.removeEventListener("keydown",this.handleKeyDown,!0)}focusTrigger(){const e=this.renderRoot.querySelector(".trigger");e?.focus({preventScroll:!0})}prepareActiveIndex(){const e=this.optionNodes.findIndex(e=>e.selected&&!e.disabled);if(e>=0)return void this.setActiveIndex(e);const t=this.optionNodes.findIndex(e=>!e.disabled);t>=0&&this.setActiveIndex(t)}resetActiveStates(){for(const e of this.optionNodes)e.active=!1}toggleOpen(e){if(this.disabled)return;const t="boolean"==typeof e?e:!this.open;t!==this.open&&(this.open=t,t||(this.focusedIndex=this.optionNodes.findIndex(e=>e.selected)))}openDropdown(){this.open||this.toggleOpen(!0)}close(){this.open&&this.toggleOpen(!1)}selectOption(e){if(e.disabled)return;const t=this.value;this.value=e.value??null,this.displayValue=e.displayLabel,this.focusedIndex=this.optionNodes.indexOf(e),this.close(),t!==this.value&&(this.dispatchEvent(new MqSelectChangeEvent(this.value)),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))}setActiveIndex(e){if(e<0||e>=this.optionNodes.length)return;this.focusedIndex=e,this.optionNodes.forEach((t,o)=>{t.active=o===e});const t=this.optionNodes[e];t&&t.scrollIntoView({block:"nearest"})}moveActive(e){if(0===this.optionNodes.length)return;let t=this.focusedIndex;t<0&&(t=this.optionNodes.findIndex(e=>e.selected&&!e.disabled)),t<0&&(t=this.optionNodes.findIndex(e=>!e.disabled));const o=this.optionNodes.length;for(let i=0;i<o;i+=1){t=(t+e+o)%o;const i=this.optionNodes[t];if(!i?.disabled){this.setActiveIndex(t);break}}}handleTriggerClick(){this.toggleOpen()}render(){const e=!!this.displayValue,t=d({control:!0,open:this.open,filled:e,disabled:this.disabled,error:this.error});return s`<div class="root"><input type="hidden" name="${h(this.name)}" value="${h(this.value??void 0)}"><div class="${t}"><button class="trigger" type="button" role="combobox" aria-haspopup="listbox" aria-expanded="${this.open?"true":"false"}" aria-disabled="${this.disabled?"true":"false"}" aria-controls="${h(this.open?this.dropdownId:void 0)}" aria-labelledby="${h(this.label?this.labelId:void 0)}" aria-label="${h(this.label?void 0:this.displayValue||void 0)}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}"><span class="trigger__content">${this.label?s`<span class="label" id="${this.labelId}">${this.label}${this.required?s`<span aria-label="required">*</span>`:n}</span>`:n} <span class="value" aria-hidden="${e?"false":"true"}">${e?this.displayValue:n} </span></span><span class="icon" aria-hidden="true"></span></button></div><div id="${this.dropdownId}" class="dropdown" role="listbox" aria-labelledby="${h(this.label?this.labelId:void 0)}" ?hidden="${!this.open}"><slot @slotchange="${this.handleSlotChange}"></slot>${0===this.optionNodes.length?s`<div class="empty-state">No options available</div>`:n}</div></div>`}};e([l()],f.prototype,"displayValue",void 0),e([r({type:String})],f.prototype,"label",void 0),e([r({type:String,reflect:!0})],f.prototype,"value",void 0),e([r({type:Boolean,reflect:!0})],f.prototype,"disabled",void 0),e([r({type:Boolean,reflect:!0})],f.prototype,"error",void 0),e([r({type:Boolean})],f.prototype,"required",void 0),e([r({type:String,reflect:!0})],f.prototype,"size",void 0),e([l()],f.prototype,"open",void 0),e([r({type:String})],f.prototype,"name",void 0),e([a("slot")],f.prototype,"defaultSlot",void 0),f=e([t("mq-select")],f);export{u as MqOption,f as MqSelect,MqSelectChangeEvent,v as OPTION_SELECT_EVENT};
|
|
1
|
+
import{_ as e,c as t}from"../chunks/custom-element-D2ziPxYE.js";import{i as o,a as i,x as s,E as n}from"../chunks/lit-element-DiWJYFwC.js";import{n as r}from"../chunks/property-scuRaFcM.js";import{r as l}from"../chunks/state-LQivXIgA.js";import{e as a}from"../chunks/query-CeeutdfT.js";import{e as d}from"../chunks/class-map-Co76I6aw.js";import{o as h}from"../chunks/if-defined-BYeVdwgd.js";import"../chunks/directive-2EDmOukv.js";const c=o`:host{display:inline-block;width:100%;min-width:200px;font-family:var(--font-body, "Roboto", sans-serif)}.root{position:relative;width:100%}.control{position:relative;width:100%;font-family:var(--font-body);font-size:var(--text-base);line-height:var(--text-base--line-height)}.trigger{position:relative;display:flex;align-items:center;height:var(--select-height-md);width:100%;border-radius:var(--border-radius-lg);border:1px solid var(--color-border-input);background:var(--color-neutrals-background-extraWeak);padding:var(--size-2) var(--size-4);cursor:pointer;gap:var(--size-3);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;text-align:left;color:var(--color-neutrals-text-default);overflow:hidden}.trigger:focus-visible{outline:0;box-shadow:0 0 0 1.5px var(--color-background),0 0 0 3.5px var(--color-primary)}.control.open .trigger{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.control.error .trigger{border-color:var(--color-error-border-default)}.control.error.open .trigger{border-color:var(--color-error-border-default);box-shadow:0 0 0 1px var(--color-error-border-default)}.trigger__content{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:1;min-width:0;position:relative}.label{font-family:var(--font-body);color:var(--color-neutrals-text-medium);font-size:var(--text-base);font-weight:var(--font-weight-normal);transition:transform .2s ease,font-size .2s ease,top .2s ease;transform-origin:left center;pointer-events:none}.control.disabled .label{opacity:.65}.control.filled .label,.control.open .label{font-size:var(--text-xs)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-neutrals-text-default);line-height:1;display:flex;align-items:center;width:100%;font-family:var(--font-body);font-size:var(--text-base);transition:height .2s ease;height:0}.control.filled .value,.control.open .value{margin-top:var(--size-1);height:20px}.icon{width:var(--size-3);height:var(--size-3);flex-shrink:0;position:relative}.icon::before{content:"";position:absolute;inset:0;mask:url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2071 0.292894C10.5976 0.683418 10.5976 1.31658 10.2071 1.70711L6.20711 5.70711C5.81658 6.09763 5.18342 6.09763 4.79289 5.70711L0.792894 1.70711C0.402369 1.31658 0.402369 0.683417 0.792894 0.292893C1.18342 -0.0976311 1.81658 -0.0976311 2.20711 0.292893L5.5 3.58579L8.79289 0.292894C9.18342 -0.0976307 9.81658 -0.0976307 10.2071 0.292894Z' fill='%230F77AE'/%3E%3C/svg%3E") center/contain no-repeat;background:var(--color-primary-link-default);transition:transform .2s ease}.control.open .icon::before{transform:rotate(180deg)}.control.error .icon::before{background:var(--color-error-border-default)}.dropdown{position:absolute;top:calc(100% + var(--size-2,8px));left:0;right:0;z-index:10;border-radius:var(--border-radius-lg);background:var(--color-neutrals-background-extraWeak);box-shadow:0 1px 8px 0 rgba(0,0,0,.1);max-height:240px;overflow-y:auto;box-sizing:border-box}.dropdown[hidden]{display:none}.empty-state{padding:var(--size-3) var(--size-5);color:var(--color-neutrals-text-medium);font-size:var(--text-sm);line-height:var(--text-sm--line-height);font-family:var(--font-body)}:host([size=sm]) .trigger{height:var(--select-height-sm);padding:var(--size-1) var(--size-3);font-size:var(--text-sm)}:host([size=sm]) .label{font-size:var(--text-sm)}:host([size=sm]) .control.filled .label,:host([size=sm]) .control.open .label{font-size:var(--text-xxs)}:host([size=sm]) .value{font-size:var(--text-sm)}:host([size=md]) .trigger{height:var(--select-height-md)}:host([size=lg]) .trigger{height:var(--select-height-lg);padding:var(--size-2) var(--size-3);font-size:var(--text-lg)}:host([size=lg]) .label{font-size:var(--text-lg)}:host([size=lg]) .control.filled .label,:host([size=lg]) .control.open .label{font-size:var(--text-sm)}:host([size=lg]) .value{font-size:var(--text-lg)}`,p=o`:host{display:block}button.option{appearance:none;border:none;outline:0;background:0 0;width:100%;padding:var(--size-3) var(--size-5);text-align:left;font:inherit;color:var(--color-neutrals-text-default);display:flex;align-items:center;gap:var(--size-3);cursor:pointer}:host([active]) button.option,button.option:hover{background:var(--color-primary-light)}:host([selected]) button.option{color:var(--color-primary);font-weight:var(--font-weight-medium,500)}:host([disabled]) button.option{opacity:.5;cursor:not-allowed}button.option:focus-visible{outline:0;background:var(--color-primary-light)}`,v="mq-option-request-select";let u=class MqOption extends i{constructor(){super(...arguments),this.internalId=`${"mq-option"}-${Math.random().toString(36).slice(2,10)}`,this.label="",this.disabled=!1,this.selected=!1,this.active=!1}static{this.styles=[p]}get optionId(){return this.internalId}render(){return s`<button id="${this.internalId}" class="option" role="option" type="button" aria-selected="${this.selected?"true":"false"}" ?disabled="${this.disabled}" tabindex="-1" @click="${this.handleSelect}" @pointerenter="${this.handlePointerEnter}"><slot></slot></button>`}get displayLabel(){const e=(this.textContent??"").trim();return this.label||e}handleSelect(e){e.stopPropagation(),this.disabled||this.dispatchEvent(new CustomEvent(v,{detail:{option:this},bubbles:!0,composed:!0}))}handlePointerEnter(){this.disabled||this.dispatchEvent(new CustomEvent(`${v}:hover`,{detail:{option:this},bubbles:!0,composed:!0}))}};e([r({type:String,reflect:!0})],u.prototype,"value",void 0),e([r({type:String})],u.prototype,"label",void 0),e([r({type:Boolean,reflect:!0})],u.prototype,"disabled",void 0),e([r({type:Boolean,reflect:!0})],u.prototype,"selected",void 0),e([r({type:Boolean,reflect:!0})],u.prototype,"active",void 0),u=e([t("mq-option")],u);const b=e=>`${e}-${Math.random().toString(36).slice(2,10)}`;class MqSelectChangeEvent extends Event{static{this.eventName="onvaluechange"}constructor(e){super(MqSelectChangeEvent.eventName,{bubbles:!0,composed:!0}),this.value=e}}let f=class MqSelect extends i{constructor(){super(...arguments),this.dropdownId=b("mq-select-dropdown"),this.labelId=b("mq-select-label"),this.displayValue="",this.optionNodes=[],this.focusedIndex=-1,this.label="",this.value=null,this.disabled=!1,this.error=!1,this.required=!1,this.size="md",this.open=!1,this.handleOutsideClick=e=>{if(!this.open)return;e.composedPath().includes(this)||this.close()},this.handleOptionRequest=e=>{const{option:t}=e.detail;t&&this.selectOption(t)},this.handleOptionHover=e=>{if(!this.open)return;const t=this.optionNodes.indexOf(e.detail.option);t>=0&&this.setActiveIndex(t)},this.handleKeyDown=e=>{if(this.open){if(this.open)switch(e.key){case"ArrowDown":case"ArrowUp":{e.preventDefault();const t="ArrowDown"===e.key?1:-1;this.moveActive(t);break}case"Enter":case" ":{e.preventDefault();const t=this.optionNodes[this.focusedIndex];t&&this.selectOption(t);break}case"Escape":e.preventDefault(),this.close();break;case"Tab":this.close()}}else"ArrowDown"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),this.openDropdown())}}static{this.styles=[c]}connectedCallback(){super.connectedCallback(),this.addEventListener(v,this.handleOptionRequest),this.addEventListener(`${v}:hover`,this.handleOptionHover)}disconnectedCallback(){this.removeEventListener(v,this.handleOptionRequest),this.removeEventListener(`${v}:hover`,this.handleOptionHover),this.removeGlobalListeners(),super.disconnectedCallback()}firstUpdated(){this.refreshOptions(),this.syncSelection()}updated(e){e.has("value")&&this.syncSelection(),e.has("open")&&(this.open?(this.addGlobalListeners(),this.focusTrigger(),this.prepareActiveIndex()):(this.removeGlobalListeners(),this.focusedIndex=-1,this.resetActiveStates(),this.dropdownId=b("mq-select-dropdown")))}handleSlotChange(){this.refreshOptions(),this.syncSelection()}refreshOptions(){const e=this.defaultSlot;if(!e)return;const t=e.assignedElements({flatten:!0}).filter(e=>e instanceof u);this.optionNodes=t,this.open&&0===t.length&&(this.focusedIndex=-1)}syncSelection(){const e=this.optionNodes.find(e=>e.value===this.value);for(const t of this.optionNodes)t.selected=t===e;this.displayValue=e?.displayLabel??"",this.focusedIndex=e?this.optionNodes.indexOf(e):-1,!e&&this.value&&(this.value=null)}addGlobalListeners(){window.addEventListener("pointerdown",this.handleOutsideClick,{capture:!0}),window.addEventListener("keydown",this.handleKeyDown,!0)}removeGlobalListeners(){window.removeEventListener("pointerdown",this.handleOutsideClick,{capture:!0}),window.removeEventListener("keydown",this.handleKeyDown,!0)}focusTrigger(){const e=this.renderRoot.querySelector(".trigger");e?.focus({preventScroll:!0})}prepareActiveIndex(){const e=this.optionNodes.findIndex(e=>e.selected&&!e.disabled);if(e>=0)return void this.setActiveIndex(e);const t=this.optionNodes.findIndex(e=>!e.disabled);t>=0&&this.setActiveIndex(t)}resetActiveStates(){for(const e of this.optionNodes)e.active=!1}toggleOpen(e){if(this.disabled)return;const t="boolean"==typeof e?e:!this.open;t!==this.open&&(this.open=t,t||(this.focusedIndex=this.optionNodes.findIndex(e=>e.selected)))}openDropdown(){this.open||this.toggleOpen(!0)}close(){this.open&&this.toggleOpen(!1)}selectOption(e){if(e.disabled)return;const t=this.value;this.value=e.value??null,this.displayValue=e.displayLabel,this.focusedIndex=this.optionNodes.indexOf(e),this.close(),t!==this.value&&(this.dispatchEvent(new MqSelectChangeEvent(this.value)),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))}setActiveIndex(e){if(e<0||e>=this.optionNodes.length)return;this.focusedIndex=e,this.optionNodes.forEach((t,o)=>{t.active=o===e});const t=this.optionNodes[e];t&&t.scrollIntoView({block:"nearest"})}moveActive(e){if(0===this.optionNodes.length)return;let t=this.focusedIndex;t<0&&(t=this.optionNodes.findIndex(e=>e.selected&&!e.disabled)),t<0&&(t=this.optionNodes.findIndex(e=>!e.disabled));const o=this.optionNodes.length;for(let i=0;i<o;i+=1){t=(t+e+o)%o;const i=this.optionNodes[t];if(!i?.disabled){this.setActiveIndex(t);break}}}handleTriggerClick(){this.toggleOpen()}render(){const e=!!this.displayValue,t=d({control:!0,open:this.open,filled:e,disabled:this.disabled,error:this.error});return s`<div class="root"><input type="hidden" name="${h(this.name)}" value="${h(this.value??void 0)}"><div class="${t}"><button class="trigger" type="button" role="combobox" aria-haspopup="listbox" aria-expanded="${this.open?"true":"false"}" aria-disabled="${this.disabled?"true":"false"}" aria-controls="${h(this.open?this.dropdownId:void 0)}" aria-labelledby="${h(this.label?this.labelId:void 0)}" aria-label="${h(this.label?void 0:this.displayValue||void 0)}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}"><span class="trigger__content">${this.label?s`<span class="label" id="${this.labelId}">${this.label}${this.required?s`<span aria-label="required">*</span>`:n}</span>`:n} <span class="value" aria-hidden="${e?"false":"true"}">${e?this.displayValue:n} </span></span><span class="icon" aria-hidden="true"></span></button></div><div id="${this.dropdownId}" class="dropdown" role="listbox" aria-labelledby="${h(this.label?this.labelId:void 0)}" ?hidden="${!this.open}"><slot @slotchange="${this.handleSlotChange}"></slot>${0===this.optionNodes.length?s`<div class="empty-state">No options available</div>`:n}</div></div>`}};e([l()],f.prototype,"displayValue",void 0),e([r({type:String})],f.prototype,"label",void 0),e([r({type:String,reflect:!0})],f.prototype,"value",void 0),e([r({type:Boolean,reflect:!0})],f.prototype,"disabled",void 0),e([r({type:Boolean,reflect:!0})],f.prototype,"error",void 0),e([r({type:Boolean})],f.prototype,"required",void 0),e([r({type:String,reflect:!0})],f.prototype,"size",void 0),e([l()],f.prototype,"open",void 0),e([r({type:String})],f.prototype,"name",void 0),e([a("slot")],f.prototype,"defaultSlot",void 0),f=e([t("mq-select")],f);export{u as MqOption,f as MqSelect,MqSelectChangeEvent,v as OPTION_SELECT_EVENT};
|
package/dist/ui/mq-skeleton.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as r,
|
|
1
|
+
import{_ as r,c as e}from"../chunks/custom-element-D2ziPxYE.js";import{i as t,a as s,x as o}from"../chunks/lit-element-DiWJYFwC.js";import{n as i}from"../chunks/property-scuRaFcM.js";import{o as d}from"../chunks/style-map-CIdqdn7C.js";import"../chunks/directive-2EDmOukv.js";const a=t`:host{display:block}.skeleton{border-radius:var(--border-radius-md);background-color:var(--color-gray-light);animation:skeleton-pulse 1.5s infinite}.skeleton--none{border-radius:var(--border-radius-none)}.skeleton--sm{border-radius:var(--border-radius-sm)}.skeleton--md{border-radius:var(--border-radius-md)}.skeleton--lg{border-radius:var(--border-radius-lg)}.skeleton--xl{border-radius:var(--border-radius-xl)}.skeleton--2xl{border-radius:var(--border-radius-2xl)}.skeleton--full{border-radius:var(--border-radius-full)}@keyframes skeleton-pulse{0%{opacity:1}50%{opacity:.6}100%{opacity:1}}`;let l=class MqSkeleton extends s{constructor(){super(...arguments),this.width="100%",this.height="20px",this.borderRadius="sm"}static{this.styles=[a]}render(){const r={width:this.width,height:this.height};return o`<div class="skeleton skeleton--${this.borderRadius}" style="${d(r)}"></div>`}};r([i({type:String,reflect:!0})],l.prototype,"width",void 0),r([i({type:String,reflect:!0})],l.prototype,"height",void 0),r([i({type:String,reflect:!0,attribute:"border-radius"})],l.prototype,"borderRadius",void 0),l=r([e("mq-skeleton")],l);export{l as MqSkeleton};
|
package/dist/ui/mq-tabs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as t,
|
|
1
|
+
import{_ as t,c as e}from"../chunks/custom-element-D2ziPxYE.js";import{i as o,a as r,x as s}from"../chunks/lit-element-DiWJYFwC.js";import{n as a}from"../chunks/property-scuRaFcM.js";const i=o`:host{display:block}`,l=o`:host{display:block}.list{width:100%;border-radius:var(--border-radius-md);overflow-x:auto;overflow-y:hidden;background-color:var(--color-card);display:inline-flex;align-items:center;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--color-neutrals-border-weak) transparent}.list{scrollbar-width:none;-ms-overflow-style:none}.list::-webkit-scrollbar{display:none}`,n=o`:host{display:inline-block;flex:1}button.trigger{position:relative;width:100%;min-width:max-content;-webkit-tap-highlight-color:transparent;background:0 0;color:var(--color-neutrals-link-dark);border:none;outline:0;cursor:pointer;box-sizing:border-box;padding:var(--size-3) var(--size-4) calc(var(--size-3) - 1px);height:54px;border-bottom:1px solid var(--color-border);transition:color .15s ease,background .15s ease,border-bottom-width .15s ease,padding-bottom .15s ease;font-size:var(--text-base);line-height:var(--text-base--line-height);font-weight:var(--font-weight-bold);font-family:var(--font-body);white-space:nowrap;outline:0}button.trigger::after{content:"";position:absolute;bottom:-2px;left:50%;width:0;height:2px;background-color:var(--color-primary-background-default);transform:translateX(-50%);transition:width .3s ease}:host([disabled]) button.trigger{opacity:.5;cursor:not-allowed;pointer-events:none}:host([active]) button.trigger{color:var(--color-primary-text-link);border-bottom-width:2px;border-bottom-color:transparent;padding-bottom:calc(var(--size-3) - 2px)}:host([active]) button.trigger::after{width:100%}button.trigger:focus-visible{border-radius:var(--border-radius-sm)}`,c=o`:host{display:block}.panel[hidden]{display:none}.panel{padding:var(--size-4) 0}`;class MqTabsSelectEvent extends Event{static{this.eventName="onvaluechange"}constructor(t){super(MqTabsSelectEvent.eventName,{bubbles:!0,composed:!0}),this.value=t}}let d=class MqTabs extends r{constructor(){super(...arguments),this.defaultValue=null,this.value=null,this.onRequestSelect=t=>{const e=t;e.value&&(this.value=e.value)}}static{this.styles=[i]}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.findFirstTriggerValue();t&&(this.value=t)}this.applySelection()}updated(t){t.has("value")&&this.applySelection()}findFirstTriggerValue(){const t=this.querySelector("mq-tabs-trigger[value]");return t?.value??null}applySelection(){const t=this.value,e=Array.from(this.querySelectorAll("mq-tabs-trigger")),o=Array.from(this.querySelectorAll("mq-tabs-content"));for(const o of e){const e=!!t&&o.value===t;o.toggleAttribute("active",e)}for(const e of o){const o=!!t&&e.value===t;e.toggleAttribute("active",o)}}render(){return s`<slot></slot>`}};t([a({type:String,attribute:"default-value"})],d.prototype,"defaultValue",void 0),t([a({type:String,reflect:!0})],d.prototype,"value",void 0),d=t([e("mq-tabs")],d);let u=class MqTabsList extends r{constructor(){super(...arguments),this.handleKeyDown=t=>{if("ArrowLeft"!==t.key&&"ArrowRight"!==t.key)return;t.preventDefault();const e=Array.from(this.querySelectorAll("mq-tabs-trigger:not([disabled])"));if(0===e.length)return;const o=e.findIndex(t=>t.active);let r;r="ArrowRight"===t.key?-1===o?0:(o+1)%e.length:-1===o||0===o?e.length-1:o-1;const s=e[r];if(s){s.dispatchEvent(new MqTabsSelectEvent(s.value));const t=s.shadowRoot?.querySelector("button");t?.focus()}}}static{this.styles=[l]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}render(){return s`<div class="list" role="tablist" tabindex="0"><slot></slot></div>`}};u=t([e("mq-tabs-list")],u);let b=class MqTabsTrigger extends r{constructor(){super(...arguments),this.disabled=!1,this.active=!1}static{this.styles=[n]}handleClick(){!this.disabled&&this.value&&this.dispatchEvent(new MqTabsSelectEvent(this.value))}render(){return s`<button class="trigger" role="tab" aria-selected="${this.active?"true":"false"}" tabindex="${this.active?0:-1}" type="button" @click="${this.handleClick}"><slot></slot></button>`}};t([a({type:String,reflect:!0})],b.prototype,"value",void 0),t([a({type:Boolean,reflect:!0})],b.prototype,"disabled",void 0),t([a({type:Boolean,reflect:!0})],b.prototype,"active",void 0),b=t([e("mq-tabs-trigger")],b);let h=class MqTabsContent extends r{constructor(){super(...arguments),this.active=!1}static{this.styles=[c]}render(){return s`<div class="panel" role="tabpanel" ?hidden="${!this.active}"><slot></slot></div>`}};t([a({type:String,reflect:!0})],h.prototype,"value",void 0),t([a({type:Boolean,reflect:!0})],h.prototype,"active",void 0),h=t([e("mq-tabs-content")],h);export{d as MqTabs,h as MqTabsContent,u as MqTabsList,MqTabsSelectEvent,b as MqTabsTrigger};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as t,
|
|
1
|
+
import{_ as t,c as o}from"../chunks/custom-element-D2ziPxYE.js";import{i as e,a as r,x as i}from"../chunks/lit-element-DiWJYFwC.js";import{n}from"../chunks/property-scuRaFcM.js";import{e as a}from"../chunks/class-map-Co76I6aw.js";import{o as s}from"../chunks/if-defined-BYeVdwgd.js";import"../chunks/directive-2EDmOukv.js";const l=e`:host{display:inline-block}button{display:inline-flex;align-items:center;justify-content:center;gap:var(--size-1);background:0 0;border:none;border-radius:var(--border-radius-md);font-family:var(--font-body);white-space:nowrap;letter-spacing:0;font-weight:var(--font-weight-medium);transition:all .2s ease;outline:0;cursor:pointer;position:relative;padding:0;text-decoration:none;--mq-text-btn-ring-color:var(--color-primary)}button:focus-visible{box-shadow:0 0 0 1.5px var(--color-background,#fff),0 0 0 3.5px var(--mq-text-btn-ring-color,var(--color-primary));z-index:1}button:disabled{opacity:.5;pointer-events:none;cursor:not-allowed}button.primary{color:var(--color-primary);--mq-text-btn-ring-color:var(--color-primary)}button.primary:hover:not(:disabled){color:var(--color-primary-dark);background:var(--color-primary-light)}button.black{color:var(--color-black,#000);--mq-text-btn-ring-color:var(--color-black, #000000)}button.black:hover:not(:disabled){color:var(--color-gray-dark,#333);background:var(--color-gray-lighter,#f8f9fa)}button.white{color:var(--color-white,#fff);--mq-text-btn-ring-color:var(--color-white, #ffffff)}button.white:hover:not(:disabled){color:var(--color-gray-lighter,#f8f9fa);background:rgba(255,255,255,.1)}button.xs{padding:0;font-size:var(--text-xs);line-height:var(--text-xs--line-height)}button.sm{padding:0;font-size:var(--text-sm);line-height:var(--text-sm--line-height)}button.md{padding:0;font-size:var(--text-base);line-height:var(--text-base--line-height)}button.lg{padding:var(--size-1) 0;font-size:var(--text-base);line-height:var(--text-base--line-height)}button.font-normal{font-weight:var(--font-weight-normal,400)}button.font-medium{font-weight:var(--font-weight-medium,500)}button.font-semibold{font-weight:var(--font-weight-semibold,600)}button.font-bold{font-weight:var(--font-weight-bold,700)}button.underlined{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}button ::slotted(svg){pointer-events:none;width:var(--size-6);height:var(--size-6);flex-shrink:0}button ::slotted(*){pointer-events:none}`;let d=class MqTextButton extends r{constructor(){super(...arguments),this.variant="primary",this.size="md",this.disabled=!1,this.type="button",this.underlined=!1,this.fontWeight="medium"}static{this.styles=[l]}static{this.shadowRootOptions={...r.shadowRootOptions,delegatesFocus:!0}}render(){const t={[this.variant]:!0,[this.size]:!0,[`font-${this.fontWeight}`]:!0,underlined:this.underlined,disabled:this.disabled};return i`<button class="${a(t)}" type="${this.type}" ?disabled="${this.disabled}" name="${s(this.name)}" value="${s(this.value)}" form="${s(this.form)}" formaction="${s(this.formaction)}" formenctype="${s(this.formenctype)}" formmethod="${s(this.formmethod)}" ?formnovalidate="${this.formnovalidate??!1}" formtarget="${s(this.formtarget)}"><slot></slot></button>`}};t([n({type:String,reflect:!0})],d.prototype,"variant",void 0),t([n({type:String,reflect:!0})],d.prototype,"size",void 0),t([n({type:Boolean,reflect:!0})],d.prototype,"disabled",void 0),t([n({type:String,reflect:!0})],d.prototype,"type",void 0),t([n({type:Boolean,reflect:!0})],d.prototype,"underlined",void 0),t([n({type:String,reflect:!0})],d.prototype,"fontWeight",void 0),t([n({type:String})],d.prototype,"name",void 0),t([n({type:String})],d.prototype,"value",void 0),t([n({type:String})],d.prototype,"form",void 0),t([n({type:String})],d.prototype,"formaction",void 0),t([n({type:String})],d.prototype,"formenctype",void 0),t([n({type:String})],d.prototype,"formmethod",void 0),t([n({type:Boolean})],d.prototype,"formnovalidate",void 0),t([n({type:String})],d.prototype,"formtarget",void 0),d=t([o("mq-text-button")],d);export{d as MqTextButton};
|
package/dist/ui/mq-textarea.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as e,t}from"../chunks/custom-element-
|
|
1
|
+
import{_ as e,c as t}from"../chunks/custom-element-D2ziPxYE.js";import{i as r,a,x as o}from"../chunks/lit-element-DiWJYFwC.js";import{n as s}from"../chunks/property-scuRaFcM.js";import{r as i}from"../chunks/state-LQivXIgA.js";import{e as l}from"../chunks/query-CeeutdfT.js";import{e as n}from"../chunks/class-map-Co76I6aw.js";import{o as d}from"../chunks/if-defined-BYeVdwgd.js";import"../chunks/directive-2EDmOukv.js";const c=r`:host{display:inline-block;width:100%;min-width:200px;font-family:var(--font-body, "Roboto", sans-serif)}.root{position:relative;width:100%}.control{position:relative;width:100%;font-size:var(--text-base);line-height:var(--text-base--line-height)}.textarea-wrapper{cursor:text;box-sizing:border-box;position:relative;display:flex;flex-direction:column;justify-content:flex-start;min-height:var(--size-12);width:100%;border-radius:var(--border-radius-lg);border:1px solid var(--color-neutrals-border-default);background:var(--color-neutrals-background-extraWeak);padding:var(--size-2) var(--size-4);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.textarea-wrapper:focus-within{outline:0;box-shadow:0 0 0 1.5px var(--color-background),0 0 0 3.5px var(--color-primary)}.control.focused .textarea-wrapper{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.control.error .textarea-wrapper{border-color:var(--color-error-border-default)}.control.error.focused .textarea-wrapper{border-color:var(--color-error-border-default);box-shadow:0 0 0 1px var(--color-error-border-default)}.control.error .textarea-wrapper:focus-within{box-shadow:0 0 0 1px var(--color-error-border-default)}.label{color:var(--color-neutrals-text-medium);font-size:var(--text-base);font-weight:var(--font-weight-normal);transition:transform .2s ease,font-size .2s ease,top .2s ease;transform-origin:left center;pointer-events:none;position:absolute;left:var(--sp-4);top:var(--size-4);transform:translateY(0)}.control.disabled .label{opacity:.65}.control.filled .label,.control.focused .label{font-size:var(--text-xs);top:var(--sp-1);transform:translateY(0)}.textarea{border:none;outline:0;background:0 0;font-family:inherit;font-size:var(--text-base);color:var(--color-neutrals-text-default);width:100%;padding:0;line-height:1.5;transition:margin-top .2s ease;margin-top:0;resize:none;min-height:2em}.control.resizable .textarea{resize:vertical}.control.filled .textarea-wrapper:has(.label) .textarea,.control.focused .textarea-wrapper:has(.label) .textarea{margin-top:var(--sp-6)}.textarea::placeholder{color:var(--color-neutrals-text-medium);opacity:.7}.textarea:disabled{opacity:.65;cursor:not-allowed}.character-count{position:absolute;top:var(--sp-1);right:var(--sp-4);font-size:var(--text-xs);color:var(--color-neutrals-text-medium);pointer-events:none;z-index:1}.control.error .character-count{color:var(--color-error-border-default)}`;class MqTextareaChangeEvent extends Event{static{this.eventName="onvaluechange"}constructor(e){super(MqTextareaChangeEvent.eventName,{bubbles:!0,composed:!0}),this.value=e}}let h=class MqTextarea extends a{constructor(){super(...arguments),this.labelId=`${"mq-textarea-label"}-${Math.random().toString(36).slice(2,10)}`,this.label="",this.required=!1,this.value="",this.disabled=!1,this.error=!1,this.placeholder="",this.rows=3,this.resize=!1,this.focused=!1}static{this.styles=[c]}handleInput(e){const t=e.target,r=this.value;this.value=t.value,r!==this.value&&(this.dispatchEvent(new MqTextareaChangeEvent(this.value)),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))}handleFocus(){this.focused=!0}handleBlur(){this.focused=!1}handleWrapperClick(){this.focus()}handleWrapperKeyDown(e){e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.focus()))}focus(){this.textareaElement?.focus()}blur(){this.textareaElement?.blur()}render(){const e=!!this.value,t=this.maxlength&&(e||this.focused)&&this.label,r=n({control:!0,filled:e,focused:this.focused,disabled:this.disabled,error:this.error,resizable:this.resize});return o`<div class="root"><div class="${r}"><div class="textarea-wrapper" @click="${this.handleWrapperClick}" @keydown="${this.handleWrapperKeyDown}">${this.label?o`<label class="label" id="${this.labelId}" for="textarea-${this.labelId}">${this.label}${this.required?o`<span aria-label="required">*</span>`:""}</label>`:""} ${t?o`<div class="character-count">${this.value.length}/${this.maxlength}</div>`:""} <textarea id="textarea-${this.labelId}" class="textarea" name="${d(this.name)}" .value="${this.value}" rows="${this.rows}" maxlength="${d(this.maxlength)}" placeholder="${d(this.label?void 0:this.placeholder)}" ?disabled="${this.disabled}" aria-labelledby="${d(this.label?this.labelId:void 0)}" aria-label="${d(this.label?void 0:this.placeholder||void 0)}" @input="${this.handleInput}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea></div></div></div>`}};e([s({type:String})],h.prototype,"label",void 0),e([s({type:Boolean})],h.prototype,"required",void 0),e([s({type:String,reflect:!0})],h.prototype,"value",void 0),e([s({type:Boolean,reflect:!0})],h.prototype,"disabled",void 0),e([s({type:Boolean,reflect:!0})],h.prototype,"error",void 0),e([s({type:String})],h.prototype,"name",void 0),e([s({type:String})],h.prototype,"placeholder",void 0),e([s({type:Number})],h.prototype,"rows",void 0),e([s({type:Number})],h.prototype,"maxlength",void 0),e([s({type:Boolean})],h.prototype,"resize",void 0),e([i()],h.prototype,"focused",void 0),e([l("textarea")],h.prototype,"textareaElement",void 0),h=e([t("mq-textarea")],h);export{h as MqTextarea,MqTextareaChangeEvent};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../chunks/custom-element-
|
|
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-m6lXVNW0.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";
|
package/dist/ui/mq-toast.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as t,
|
|
1
|
+
import{_ as t,c as o}from"../chunks/custom-element-D2ziPxYE.js";import{i,a as s,x as e}from"../chunks/lit-element-DiWJYFwC.js";import{n as r}from"../chunks/property-scuRaFcM.js";import{r as a}from"../chunks/state-LQivXIgA.js";import{e as n}from"../chunks/class-map-Co76I6aw.js";import"../chunks/directive-2EDmOukv.js";const p=i`:host{position:fixed;display:flex;flex-direction:column;pointer-events:none;z-index:9999;gap:var(--sp-2)}:host{left:calc(var(--sp-4) + var(--mq-safe-left,0px));right:calc(var(--sp-4) + var(--mq-safe-right,0px));width:auto}:host([position=bottom-center]),:host([position=bottom-left]),:host([position=bottom-right]){bottom:calc(var(--sp-4) + var(--mq-safe-bottom,0px))}:host([position=top-center]),:host([position=top-left]),:host([position=top-right]){top:calc(var(--sp-4) + var(--mq-safe-top,0px));flex-direction:column-reverse}:host([position=bottom-center]),:host([position=bottom-left]),:host([position=bottom-right]),:host([position=top-center]),:host([position=top-left]),:host([position=top-right]){left:calc(var(--sp-4) + var(--mq-safe-left,0px));right:calc(var(--sp-4) + var(--mq-safe-right,0px));transform:none}:host([position=bottom-right]),:host([position=top-right]){align-items:flex-end}:host([position=bottom-left]),:host([position=top-left]){align-items:flex-start}:host([position=bottom-center]),:host([position=top-center]){align-items:center}@media (min-width:768px){:host{left:auto;right:auto;width:auto}:host([position=bottom-right]),:host([position=top-right]){right:calc(var(--sp-4) + var(--mq-safe-right,0px));left:auto;transform:none}:host([position=bottom-left]),:host([position=top-left]){left:calc(var(--sp-4) + var(--mq-safe-left,0px));right:auto;transform:none}:host([position=bottom-center]),:host([position=top-center]){left:50%;right:auto;transform:translateX(-50%)}}`,c=i`:host{display:grid;grid-template-rows:1fr;pointer-events:auto;overflow:hidden;width:100%;box-sizing:border-box;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}@media (min-width:768px){:host{width:auto}}:host(.collapsing){grid-template-rows:0fr}.toast-wrapper{min-height:0;overflow:hidden;box-sizing:border-box}.toast{box-sizing:border-box;background-color:var(--color-gray-dark);border-radius:var(--border-radius-lg);color:var(--color-neutrals-background-extraWeak);font-family:var(--font-body);font-size:var(--text-xs);line-height:var(--text-xs--line-height);font-weight:var(--font-weight-normal);padding:var(--sp-4) var(--sp-2_5);text-align:center;width:100%;opacity:0;transform:translateY(12px);transition:opacity 350ms cubic-bezier(.16,1,.3,1),transform 350ms cubic-bezier(.16,1,.3,1)}@media (min-width:768px){.toast{width:auto;min-width:343px}}.toast.visible{opacity:1;transform:translateY(0)}.toast.exiting{opacity:0;transform:translateY(8px)}`;let h=class MqToast extends s{constructor(){super(...arguments),this.message="",this.variant="info",this.visible=!1,this.exiting=!1}static{this.styles=[c]}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.visible=!0})})}startExit(){return new Promise(t=>{this.exiting=!0,this.visible=!1,setTimeout(()=>{this.classList.add("collapsing")},200),setTimeout(t,500)})}render(){const t={toast:!0,visible:this.visible&&!this.exiting,exiting:this.exiting};return e`<div class="toast-wrapper"><div class="${n(t)}" role="status" aria-live="polite" aria-atomic="true">${this.message}</div></div>`}};t([r({type:String})],h.prototype,"message",void 0),t([r({type:String})],h.prototype,"variant",void 0),t([a()],h.prototype,"visible",void 0),t([a()],h.prototype,"exiting",void 0),h=t([o("mq-toast")],h);let l=class MqToastContainer extends s{constructor(){super(...arguments),this.position="bottom-right",this.toasts=[],this.timers=new Map}static{this.styles=[p]}generateId(){return`toast-${Date.now()}-${Math.random().toString(36).slice(2,9)}`}addToast(t,o,i={}){const s=this.generateId(),e=i.duration??3e3;i.position&&(this.position=i.position);const r={id:s,message:t,variant:o,duration:e,visible:!0,exiting:!1};if(this.toasts=[...this.toasts,r],e>0){const t=window.setTimeout(()=>{this.removeToast(s)},e);this.timers.set(s,t)}}async removeToast(t){const o=this.timers.get(t);o&&(window.clearTimeout(o),this.timers.delete(t));const i=this.shadowRoot?.querySelector(`mq-toast[data-toast-id="${t}"]`);i&&await i.startExit(),this.toasts=this.toasts.filter(o=>o.id!==t)}disconnectedCallback(){for(const t of this.timers.values())window.clearTimeout(t);this.timers.clear(),super.disconnectedCallback()}render(){return e`${this.toasts.map(t=>e`<mq-toast data-toast-id="${t.id}" .message="${t.message}" .variant="${t.variant}"></mq-toast>`)}`}};t([r({type:String,reflect:!0})],l.prototype,"position",void 0),t([a()],l.prototype,"toasts",void 0),l=t([o("mq-toast-container")],l);let m=null;function d(t){m=t}function f(){if(m?.isConnected)return m;let t=document.querySelector("mq-toast-container");if(!t){t=document.createElement("mq-toast-container");const o=document.querySelector("mq-theme-provider");o?o.appendChild(t):(console.warn("[mq-toast] No mq-theme-provider found. Toast may not have access to design tokens."),document.body.appendChild(t))}return t}const g={success(t,o){f().addToast(t,"success",o)},error(t,o){f().addToast(t,"error",o)},warning(t,o){f().addToast(t,"warning",o)},info(t,o){f().addToast(t,"info",o)}};export{h as MqToast,l as MqToastContainer,d as registerToastContainer,g as toast};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as e,
|
|
1
|
+
import{_ as e,c as s}from"../chunks/custom-element-D2ziPxYE.js";import{a,i as r,x as n}from"../chunks/lit-element-DiWJYFwC.js";let t=class MqUnreadBadge extends a{static{this.styles=r`:host{display:inline-flex;align-items:center}.badge{width:12px;height:12px;border-radius:50%;background-color:var(--color-warning-icon-default);flex-shrink:0}`}render(){return n`<span class="badge"></span>`}};t=e([s("mq-unread-badge")],t);export{t as MqUnreadBadge};
|