@coras-io/embed 0.1.0

package/dist/components/crypto-auth-modal/crypto-auth-modal.styles.js

@@ -0,0 +1,141 @@
+import { css } from "lit";
+export default css `
+  :host {
+    display: contents;
+
+    --field-input-box-shadow: 0px 4px 4px 0px
+      color-mix(in srgb, black, transparent 90%);
+    --field-label-bottom-margin: 0.25rem;
+  }
+
+  coras-dialog {
+    --dialog-max-width: 32rem;
+    --dialog-z-index: calc(var(--coras-z-index-overlay, 1000) + 1);
+  }
+
+  .modal-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--coras-color-text-primary, var(--coras-color-text));
+    margin: 0;
+  }
+
+  .modal-body {
+    width: 28rem;
+    max-width: 100%;
+    margin: 0 auto 0.5rem;
+  }
+
+  .step-instruction {
+    color: var(--coras-color-text);
+    font-size: var(--coras-font-size-base);
+    line-height: var(--coras-font-size-2xl);
+    margin: 0 0 1rem 0;
+  }
+
+  .checkbox-container {
+    margin: 1.25rem 0;
+  }
+
+  .otp-container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+  }
+
+  .otp-help-text {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    letter-spacing: 0.12px;
+    color: var(--coras-color-text-primary, #000000);
+    margin: 0.5rem 0 0;
+    text-align: center;
+  }
+
+  .resend-link {
+    background: var(--coras-color-surface, #ffffff);
+    border: 1.5px solid var(--coras-color-text-primary, #000000);
+    border-radius: 64px;
+    color: var(--coras-color-text-primary, #000000);
+    font-size: 1rem;
+    font-weight: 700;
+    letter-spacing: 0.16px;
+    cursor: pointer;
+    padding: 0.75rem 1.5rem;
+    height: 42px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.2s ease;
+  }
+
+  .resend-link:hover {
+    opacity: 0.7;
+  }
+
+  .resend-link:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .rate-limit-error,
+  .error-text {
+    color: var(--coras-color-error-500);
+    font-size: var(--coras-font-size-sm);
+    margin: 0.5rem 0;
+  }
+
+  .modal-footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .modal-footer-inner {
+    display: flex;
+    justify-content: center;
+  }
+
+  .modal-footer coras-button {
+    min-width: 120px;
+  }
+
+  .email-otp-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 0.75rem;
+  }
+
+  .mfa-prompt-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 0.75rem;
+  }
+
+  .mfa-otp-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 0.75rem;
+  }
+
+  .change-phone-link {
+    background: none;
+    border: none;
+    color: var(--coras-color-text-primary, #000000);
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+    cursor: pointer;
+    padding: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  .change-phone-link:hover {
+    opacity: 0.7;
+  }
+`;

package/dist/components/currencies-list/currencies-list.component.d.ts

@@ -0,0 +1,15 @@
+import { CSSResultGroup, LitElement, TemplateResult } from "lit";
+import "../select-list/select-list.js";
+import "../select-list/select-option/select-option.js";
+import { Currency } from "../../core/types/currencies.js";
+export declare class CorasCurrenciesList extends LitElement {
+    static styles: CSSResultGroup;
+    spacious: boolean;
+    render(): TemplateResult<1>;
+}
+export interface CurrenciesListOptionProps {
+    currency: Currency;
+    selected?: boolean;
+    onSelect?: (currency: Currency) => void;
+}
+export declare function renderCurrenciesOption({ currency, selected, onSelect, }: CurrenciesListOptionProps): TemplateResult;

package/dist/components/currencies-list/currencies-list.component.js

@@ -0,0 +1,50 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { localized, msg } from "@lit/localize";
+import { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import styles from "./currencies-list.styles.js";
+import "../select-list/select-list.js";
+import "../select-list/select-option/select-option.js";
+import { currencyName, currencySymbol } from "../../core/currency/constants.js";
+let CorasCurrenciesList = class CorasCurrenciesList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.spacious = false;
+    }
+    static { this.styles = styles; }
+    render() {
+        return html `
+      <coras-select-list
+        ?spacious=${this.spacious}
+        caption=${msg("Select your currency")}
+      >
+        <slot></slot>
+      </coras-select-list>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], CorasCurrenciesList.prototype, "spacious", void 0);
+CorasCurrenciesList = __decorate([
+    localized()
+], CorasCurrenciesList);
+export { CorasCurrenciesList };
+export function renderCurrenciesOption({ currency, selected, onSelect, }) {
+    const symbol = currencySymbol[currency];
+    return html `
+    <coras-select-option
+      key=${currency}
+      ?selected=${selected}
+      @click=${() => onSelect && onSelect(currency)}
+    >
+      ${currencyName[currency]}
+      <strong>${currency} ${symbol}</strong>
+    </coras-select-option>
+  `;
+}

package/dist/components/currencies-list/currencies-list.d.ts

@@ -0,0 +1,8 @@
+import { CorasCurrenciesList } from "./currencies-list.component.js";
+export * from "./currencies-list.component.js";
+export default CorasCurrenciesList;
+declare global {
+    interface HTMLElementTagNameMap {
+        "coras-currencies-list": CorasCurrenciesList;
+    }
+}

package/dist/components/currencies-list/currencies-list.js

@@ -0,0 +1,6 @@
+import { CorasCurrenciesList } from "./currencies-list.component.js";
+export * from "./currencies-list.component.js";
+export default CorasCurrenciesList;
+if (!customElements.get("coras-currencies-list")) {
+    customElements.define("coras-currencies-list", CorasCurrenciesList);
+}

package/dist/components/currencies-list/currencies-list.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/currencies-list/currencies-list.styles.js

@@ -0,0 +1,5 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+`;

package/dist/components/dialog/dialog.component.d.ts

@@ -0,0 +1,69 @@
+import { CSSResultGroup, LitElement, nothing } from "lit";
+/**
+ * A unified dialog component that displays content in a modal overlay.
+ *
+ * @slot icon - Optional icon displayed above the header
+ * @slot header - Header content (title, etc.)
+ * @slot description - Optional description text below the header (wired to aria-describedby)
+ * @slot - Default slot for main content
+ * @slot footer - Footer content (action buttons, etc.)
+ *
+ * @fires {CustomEvent} dialog-closed - Fired when the dialog is closed
+ * @fires {CustomEvent} dialog-back - Fired when the back button is clicked
+ *
+ * @csspart overlay - The backdrop overlay
+ * @csspart dialog - The dialog panel
+ * @csspart header - The header area
+ * @csspart description - The description area (wired to aria-describedby)
+ * @csspart content - The scrollable content area
+ * @csspart footer - The footer area
+ */
+export declare class CorasDialog extends LitElement {
+    static styles: CSSResultGroup;
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Accessible label for the dialog */
+    label: string;
+    /** Whether to show the built-in close button */
+    showCloseButton: boolean;
+    /** Whether to show the back button */
+    showBackButton: boolean;
+    /** Whether the dialog should be full-screen on mobile */
+    mobileFullScreen: boolean;
+    /** Whether the dialog should fill the viewport */
+    expanded: boolean;
+    /** Whether clicking the backdrop closes the dialog */
+    closeOnBackdrop: boolean;
+    /** Whether pressing Escape closes the dialog */
+    closeOnEscape: boolean;
+    /** Prevent all close interactions (for loading states) */
+    preventClose: boolean;
+    /** Whether the dialog should lock body scroll when open (set to false if host page manages scroll locking) */
+    lockScroll: boolean;
+    /** Assets URL for icons */
+    assetsURL: string;
+    private _isVisible;
+    private _isClosing;
+    private _hasHeaderContent;
+    private _hasDescriptionContent;
+    private _ownsLock;
+    private _previouslyFocused;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: Map<string, unknown>): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _rememberFocus;
+    private _restoreFocus;
+    private _lockBodyScroll;
+    private _unlockBodyScroll;
+    private _handleOverlayAnimationEnd;
+    private _handleOverlayClick;
+    private _handleKeyDown;
+    private _trapFocus;
+    private _handleHeaderSlotChange;
+    private _handleDescriptionSlotChange;
+    private _handleCloseClick;
+    private _handleBackClick;
+    private _emitClose;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}

package/dist/components/dialog/dialog.component.js

@@ -0,0 +1,373 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { msg, localized } from "@lit/localize";
+import { fireInternalEvent } from "../../core/events.js";
+import { scrollLock } from "../../core/utils/scroll-lock.js";
+import styles from "./dialog.styles.js";
+const FOCUSABLE_SELECTOR = [
+    'a[href]:not([tabindex="-1"])',
+    'button:not([disabled]):not([tabindex="-1"])',
+    'input:not([disabled]):not([tabindex="-1"])',
+    'select:not([disabled]):not([tabindex="-1"])',
+    'textarea:not([disabled]):not([tabindex="-1"])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(",");
+/**
+ * A unified dialog component that displays content in a modal overlay.
+ *
+ * @slot icon - Optional icon displayed above the header
+ * @slot header - Header content (title, etc.)
+ * @slot description - Optional description text below the header (wired to aria-describedby)
+ * @slot - Default slot for main content
+ * @slot footer - Footer content (action buttons, etc.)
+ *
+ * @fires {CustomEvent} dialog-closed - Fired when the dialog is closed
+ * @fires {CustomEvent} dialog-back - Fired when the back button is clicked
+ *
+ * @csspart overlay - The backdrop overlay
+ * @csspart dialog - The dialog panel
+ * @csspart header - The header area
+ * @csspart description - The description area (wired to aria-describedby)
+ * @csspart content - The scrollable content area
+ * @csspart footer - The footer area
+ */
+let CorasDialog = class CorasDialog extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the dialog is open */
+        this.open = false;
+        /** Accessible label for the dialog */
+        this.label = "Dialog";
+        /** Whether to show the built-in close button */
+        this.showCloseButton = true;
+        /** Whether to show the back button */
+        this.showBackButton = false;
+        /** Whether the dialog should be full-screen on mobile */
+        this.mobileFullScreen = true;
+        /** Whether the dialog should fill the viewport */
+        this.expanded = false;
+        /** Whether clicking the backdrop closes the dialog */
+        this.closeOnBackdrop = true;
+        /** Whether pressing Escape closes the dialog */
+        this.closeOnEscape = true;
+        /** Prevent all close interactions (for loading states) */
+        this.preventClose = false;
+        /** Whether the dialog should lock body scroll when open (set to false if host page manages scroll locking) */
+        this.lockScroll = true;
+        /** Assets URL for icons */
+        this.assetsURL = "";
+        this._isVisible = false;
+        this._isClosing = false;
+        this._hasHeaderContent = false;
+        this._hasDescriptionContent = false;
+        this._ownsLock = false;
+        this._previouslyFocused = null;
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.open) {
+            this._isVisible = true;
+        }
+    }
+    disconnectedCallback() {
+        this._restoreFocus();
+        this._unlockBodyScroll();
+        super.disconnectedCallback();
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has("open")) {
+            if (this.open) {
+                this._isClosing = false;
+                this._isVisible = true;
+                this._rememberFocus();
+                this._lockBodyScroll();
+            }
+            else if (this._isVisible) {
+                this._isClosing = true;
+            }
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("open") && this.open) {
+            const dialog = this.shadowRoot?.querySelector(".dialog");
+            dialog?.focus();
+        }
+    }
+    _rememberFocus() {
+        this._previouslyFocused = (this.getRootNode()
+            .activeElement ?? document.activeElement);
+    }
+    _restoreFocus() {
+        const el = this._previouslyFocused;
+        this._previouslyFocused = null;
+        try {
+            el?.focus({ preventScroll: true });
+        }
+        catch {
+            // Element may have been removed from the DOM
+        }
+    }
+    _lockBodyScroll() {
+        if (!this.lockScroll)
+            return;
+        if (!this._ownsLock) {
+            scrollLock.lock();
+            this._ownsLock = true;
+        }
+    }
+    _unlockBodyScroll() {
+        if (this._ownsLock) {
+            scrollLock.unlock();
+            this._ownsLock = false;
+        }
+    }
+    _handleOverlayAnimationEnd(event) {
+        // Ignore animationend events that bubble up from .dialog child
+        if (event.target !== event.currentTarget)
+            return;
+        if (this._isClosing) {
+            this._isClosing = false;
+            this._isVisible = false;
+            this._unlockBodyScroll();
+            this._restoreFocus();
+        }
+    }
+    _handleOverlayClick(event) {
+        if (this.preventClose || !this.closeOnBackdrop)
+            return;
+        if (event.target === event.currentTarget) {
+            this._emitClose();
+        }
+    }
+    _handleKeyDown(event) {
+        if (event.key === "Escape") {
+            if (this.preventClose || !this.closeOnEscape)
+                return;
+            event.stopPropagation();
+            this._emitClose();
+            return;
+        }
+        if (event.key === "Tab") {
+            this._trapFocus(event);
+        }
+    }
+    _trapFocus(event) {
+        const dialog = this.shadowRoot?.querySelector(".dialog");
+        if (!dialog)
+            return;
+        // Get focusable elements from both shadow DOM and slotted light DOM
+        const shadowFocusable = Array.from(dialog.querySelectorAll(FOCUSABLE_SELECTOR));
+        const slots = dialog.querySelectorAll("slot");
+        const slottedFocusable = [];
+        slots.forEach((slot) => {
+            const assigned = slot.assignedElements({ flatten: true });
+            assigned.forEach((el) => {
+                if (el.matches?.(FOCUSABLE_SELECTOR)) {
+                    slottedFocusable.push(el);
+                }
+                const nested = el.querySelectorAll?.(FOCUSABLE_SELECTOR);
+                if (nested) {
+                    slottedFocusable.push(...Array.from(nested));
+                }
+            });
+        });
+        const focusable = [...shadowFocusable, ...slottedFocusable].filter((el) => el.offsetParent !== null);
+        if (focusable.length === 0) {
+            event.preventDefault();
+            return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (event.shiftKey) {
+            if (document.activeElement === first ||
+                this.shadowRoot?.activeElement === first) {
+                event.preventDefault();
+                last.focus();
+            }
+        }
+        else {
+            if (document.activeElement === last ||
+                this.shadowRoot?.activeElement === last) {
+                event.preventDefault();
+                first.focus();
+            }
+        }
+    }
+    _handleHeaderSlotChange(event) {
+        const slot = event.target;
+        this._hasHeaderContent =
+            slot
+                .assignedNodes({ flatten: true })
+                .filter((node) => node.nodeType === Node.ELEMENT_NODE ||
+                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())).length > 0;
+    }
+    _handleDescriptionSlotChange(event) {
+        const slot = event.target;
+        this._hasDescriptionContent =
+            slot
+                .assignedNodes({ flatten: true })
+                .filter((node) => node.nodeType === Node.ELEMENT_NODE ||
+                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())).length > 0;
+    }
+    _handleCloseClick() {
+        if (this.preventClose)
+            return;
+        this._emitClose();
+    }
+    _handleBackClick() {
+        fireInternalEvent(this, "dialog-back", {});
+    }
+    _emitClose() {
+        fireInternalEvent(this, "dialog-closed", {});
+    }
+    render() {
+        if (!this._isVisible && !this.open) {
+            return nothing;
+        }
+        const overlayClasses = {
+            overlay: true,
+            closing: this._isClosing,
+        };
+        return html `
+      <div
+        class=${classMap(overlayClasses)}
+        part="overlay"
+        role="presentation"
+        @click=${this._handleOverlayClick}
+        @keydown=${this._handleKeyDown}
+        @animationend=${this._handleOverlayAnimationEnd}
+      >
+        <div
+          class="dialog"
+          part="dialog"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby=${ifDefined(this._hasHeaderContent ? "dialog-title" : undefined)}
+          aria-describedby=${ifDefined(this._hasDescriptionContent ? "dialog-description" : undefined)}
+          aria-label=${ifDefined(!this._hasHeaderContent ? this.label : undefined)}
+          tabindex="-1"
+        >
+          <div class="icon-area" part="icon-area">
+            <slot name="icon"></slot>
+          </div>
+          ${this.showCloseButton
+            ? html `
+                <button
+                  class="close-button"
+                  type="button"
+                  @click=${this._handleCloseClick}
+                  aria-label=${msg("Close")}
+                >
+                  <svg viewBox="0 0 24 24">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                  </svg>
+                </button>
+              `
+            : nothing}
+          <div class="header" part="header">
+            ${this.showBackButton
+            ? html `
+                  <button
+                    class="back-button"
+                    type="button"
+                    @click=${this._handleBackClick}
+                    aria-label=${msg("Back")}
+                  >
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <polyline points="15 18 9 12 15 6"></polyline>
+                    </svg>
+                  </button>
+                `
+            : nothing}
+            <div class="header-content" id="dialog-title">
+              <slot
+                name="header"
+                @slotchange=${this._handleHeaderSlotChange}
+              ></slot>
+            </div>
+          </div>
+          <div class="description" id="dialog-description" part="description">
+            <slot
+              name="description"
+              @slotchange=${this._handleDescriptionSlotChange}
+            ></slot>
+          </div>
+          <div class="content" part="content">
+            <slot></slot>
+          </div>
+          <div class="footer" part="footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasDialog.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], CorasDialog.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-close-button" })
+], CorasDialog.prototype, "showCloseButton", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-back-button" })
+], CorasDialog.prototype, "showBackButton", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "mobile-full-screen" })
+], CorasDialog.prototype, "mobileFullScreen", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasDialog.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "close-on-backdrop" })
+], CorasDialog.prototype, "closeOnBackdrop", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "close-on-escape" })
+], CorasDialog.prototype, "closeOnEscape", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "prevent-close" })
+], CorasDialog.prototype, "preventClose", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "lock-scroll" })
+], CorasDialog.prototype, "lockScroll", void 0);
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasDialog.prototype, "assetsURL", void 0);
+__decorate([
+    state()
+], CorasDialog.prototype, "_isVisible", void 0);
+__decorate([
+    state()
+], CorasDialog.prototype, "_isClosing", void 0);
+__decorate([
+    state()
+], CorasDialog.prototype, "_hasHeaderContent", void 0);
+__decorate([
+    state()
+], CorasDialog.prototype, "_hasDescriptionContent", void 0);
+CorasDialog = __decorate([
+    localized()
+], CorasDialog);
+export { CorasDialog };

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,8 @@
+import { CorasDialog } from "./dialog.component.js";
+export * from "./dialog.component.js";
+export default CorasDialog;
+declare global {
+    interface HTMLElementTagNameMap {
+        "coras-dialog": CorasDialog;
+    }
+}

package/dist/components/dialog/dialog.js

@@ -0,0 +1,6 @@
+import { CorasDialog } from "./dialog.component.js";
+export * from "./dialog.component.js";
+export default CorasDialog;
+if (!customElements.get("coras-dialog")) {
+    customElements.define("coras-dialog", CorasDialog);
+}