@mediquo/elements 0.3.1

package/dist/ui/mq-toast.d.ts

@@ -0,0 +1,111 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type ToastVariant = "success" | "error" | "warning" | "info";
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+interface ToastOptions {
+    /** Duration in milliseconds before auto-dismiss. Default: 3000 */
+    duration?: number;
+    /** Position of the toast on screen. Default: "bottom-right" */
+    position?: ToastPosition;
+}
+/**
+ * Individual toast element.
+ * Not meant to be used directly - use the `toast` API instead.
+ */
+declare class MqToast extends LitElement {
+    static styles: lit.CSSResult[];
+    message: string;
+    variant: ToastVariant;
+    private visible;
+    private exiting;
+    connectedCallback(): void;
+    startExit(): Promise<void>;
+    render(): lit_html.TemplateResult<1>;
+}
+/**
+ * Toast container element.
+ * Manages and renders all active toasts.
+ * Place one instance in your app root.
+ */
+declare class MqToastContainer extends LitElement {
+    static styles: lit.CSSResult[];
+    position: ToastPosition;
+    private toasts;
+    private timers;
+    private generateId;
+    /**
+     * Add a toast to the container
+     */
+    addToast(message: string, variant: ToastVariant, options?: ToastOptions): void;
+    /**
+     * Remove a toast with exit animation
+     */
+    private removeToast;
+    disconnectedCallback(): void;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "mq-toast": MqToast;
+        "mq-toast-container": MqToastContainer;
+    }
+}
+/**
+ * Register an existing toast container to be used by the toast API.
+ * This allows components (like mq-router) to provide a container that
+ * inherits the correct CSS context (variables, tokens, etc.).
+ *
+ * @example
+ * ```ts
+ * // In your component's connectedCallback or firstUpdated:
+ * const container = this.shadowRoot.querySelector('mq-toast-container');
+ * registerToastContainer(container);
+ * ```
+ */
+declare function registerToastContainer(container: MqToastContainer | null): void;
+/**
+ * Toast API for showing toast notifications.
+ *
+ * @example
+ * ```ts
+ * import { toast } from "@mediquo/elements";
+ *
+ * // Show different toast variants
+ * toast.success("Operation completed successfully");
+ * toast.error("Something went wrong");
+ * toast.warning("Please review your input");
+ * toast.info("New update available");
+ *
+ * // With custom duration
+ * toast.success("Saved!", { duration: 2000 });
+ *
+ * // With custom position (default: "bottom-right")
+ * toast.success("Saved!", { position: "top-center" });
+ *
+ * // Keep toast visible until manually dismissed (duration: 0)
+ * toast.error("Critical error", { duration: 0 });
+ * ```
+ */
+declare const toast: {
+    /**
+     * Show a success toast
+     */
+    success(message: string, options?: ToastOptions): void;
+    /**
+     * Show an error toast
+     */
+    error(message: string, options?: ToastOptions): void;
+    /**
+     * Show a warning toast
+     */
+    warning(message: string, options?: ToastOptions): void;
+    /**
+     * Show an info toast
+     */
+    info(message: string, options?: ToastOptions): void;
+};
+
+export { MqToast, MqToastContainer, registerToastContainer, toast };
+export type { ToastOptions, ToastPosition, ToastVariant };

package/dist/ui/mq-toast.js

@@ -0,0 +1 @@
+import{_ as t,t as o}from"../chunks/custom-element-DA9Fxvxd.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};

package/dist/ui/mq-unread-badge.d.ts

@@ -0,0 +1,15 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare class MqUnreadBadge extends LitElement {
+    static styles: lit.CSSResult;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "mq-unread-badge": MqUnreadBadge;
+    }
+}
+
+export { MqUnreadBadge };

package/dist/ui/mq-unread-badge.js

@@ -0,0 +1 @@
+import{_ as e,t as s}from"../chunks/custom-element-DA9Fxvxd.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};

package/package.json

@@ -0,0 +1,176 @@
+{
+  "name": "@mediquo/elements",
+  "private": false,
+  "version": "0.3.1",
+  "type": "module",
+  "description": "Mediquo elements web components",
+  "license": "ISC",
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mediquo/sdk-web.git"
+  },
+  "bugs": {
+    "url": "https://github.com/mediquo/sdk-web/issues"
+  },
+  "keywords": [
+    "mediquo",
+    "elements",
+    "web-components",
+    "videocall",
+    "sdk"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./mq-theme-provider": {
+      "types": "./dist/mq-theme-provider.d.ts",
+      "default": "./dist/mq-theme-provider.js"
+    },
+    "./mq-query-client-provider": {
+      "types": "./dist/mq-query-client-provider.d.ts",
+      "default": "./dist/mq-query-client-provider.js"
+    },
+    "./mq-socket-provider": {
+      "types": "./dist/mq-socket-provider.d.ts",
+      "default": "./dist/mq-socket-provider.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "default": "./dist/theme.js"
+    },
+    "./events": {
+      "types": "./dist/events.d.ts",
+      "default": "./dist/events.js"
+    },
+    "./mq-apple-pay-checkout": {
+      "types": "./dist/mq-apple-pay-checkout.d.ts",
+      "default": "./dist/mq-apple-pay-checkout.js"
+    },
+    "./mq-google-pay-checkout": {
+      "types": "./dist/mq-google-pay-checkout.d.ts",
+      "default": "./dist/mq-google-pay-checkout.js"
+    },
+    "./mq-checkout": {
+      "types": "./dist/mq-checkout.d.ts",
+      "default": "./dist/mq-checkout.js"
+    },
+    "./mq-chat-room": {
+      "types": "./dist/mq-chat-room.d.ts",
+      "default": "./dist/mq-chat-room.js"
+    },
+    "./mq-my-appointments": {
+      "types": "./dist/mq-my-appointments.d.ts",
+      "default": "./dist/mq-my-appointments.js"
+    },
+    "./mq-appointment-checkout": {
+      "types": "./dist/mq-appointment-checkout.d.ts",
+      "default": "./dist/mq-appointment-checkout.js"
+    },
+    "./mq-immediate-videocall-checkout": {
+      "types": "./dist/mq-immediate-videocall-checkout.d.ts",
+      "default": "./dist/mq-immediate-videocall-checkout.js"
+    },
+    "./mq-schedule": {
+      "types": "./dist/mq-schedule.d.ts",
+      "default": "./dist/mq-schedule.js"
+    },
+    "./mq-videocall": {
+      "types": "./dist/mq-videocall.d.ts",
+      "default": "./dist/mq-videocall.js"
+    },
+    "./mq-support-chat": {
+      "types": "./dist/mq-support-chat.d.ts",
+      "default": "./dist/mq-support-chat.js"
+    },
+    "./mq-schedule-success": {
+      "types": "./dist/mq-schedule-success.d.ts",
+      "default": "./dist/mq-schedule-success.js"
+    },
+    "./i18n": {
+      "types": "./dist/i18n.d.ts",
+      "default": "./dist/i18n.js"
+    },
+    "./env": {
+      "types": "./dist/env.d.ts",
+      "default": "./dist/env.js"
+    },
+    "./ui/*": {
+      "types": "./dist/ui/*.d.ts",
+      "default": "./dist/ui/*.js"
+    }
+  },
+  "scripts": {
+    "dev": "rollup -c rollup.config.js --watch",
+    "build": "rm -rf dist && cross-env MODE=production NODE_OPTIONS=--max-old-space-size=4096 rollup -c rollup.config.js",
+    "build:rc": "cross-env DEFAULT_ENV=development npm run build",
+    "build:watch": "rollup -c rollup.config.js --watch",
+    "commit-version": "node scripts/commit-version.js",
+    "check": "tsc --noEmit && npm run lit-analyze",
+    "check-types": "tsc --noEmit",
+    "lit-analyze": "lit-analyzer ./src --maxWarnings 0",
+    "test": "vitest run --passWithNoTests",
+    "test:arch": "vitest run --config vitest.arch.config.ts",
+    "health": "tsx ../../scripts/health.ts",
+    "test:watch": "vitest",
+    "lint": "eslint src --ext .ts --max-warnings 0 && npm run lit-analyze",
+    "locale:extract": "lit-localize extract",
+    "locale:build": "lit-localize build"
+  },
+  "dependencies": {
+    "@lit/context": "^1.1.5",
+    "@lit/localize": "^0.12.2",
+    "@lit/task": "^1.0.3",
+    "@opentok/client": "^2.30.3",
+    "@tanstack/lit-form": "^1.23.4",
+    "@tanstack/query-core": "^5.87.4",
+    "axios": "^1.10.0",
+    "date-fns": "^4.1.0",
+    "jwt-decode": "^4.0.0",
+    "lit": "^3.3.0",
+    "socket.io-client": "^2.2.0",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@lit/localize-tools": "^0.8.0",
+    "@mediquo/core": "*",
+    "@mediquo/eslint-config": "*",
+    "@mediquo/telemetry": "*",
+    "@rollup/plugin-alias": "^6.0.0",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@types/socket.io-client": "^1.4.35",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.30.0",
+    "eslint-plugin-lit": "^1.15.0",
+    "eslint-plugin-lit-a11y": "^4.1.4",
+    "jsdom": "^26.0.0",
+    "lit-analyzer": "^2.0.3",
+    "rollup": "^4.0.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-minify-html-literals": "^1.2.6",
+    "rollup-plugin-summary": "^3.0.1",
+    "ts-lit-plugin": "^2.0.2",
+    "typescript": "^5.8.3",
+    "vitest": "^3.0.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}