@coras-io/embed 0.1.0

package/dist/components/order-confirmation/order-confirmation.styles.js

@@ -0,0 +1,102 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    width: 100%;
+
+    --order-confirmation-border-color: var(--coras-color-secondary-500);
+    --order-confirmation-border-radius: var(--coras-radius-sm);
+    --order-confirmation-title-font-size: var(--coras-font-size-2xl);
+    --order-confirmation-title-font-weight: var(--coras-font-weight-semibold);
+    --order-confirmation-title-line-height: var(--coras-font-size-3xl);
+    --order-confirmation-title-color: var(--coras-color-text);
+  }
+
+  :host {
+    #container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      border: 1px solid var(--order-confirmation-border-color);
+      border-radius: var(--order-confirmation-border-radius);
+      padding-top: 48px;
+      padding-bottom: 56px;
+      padding-inline: 68px;
+
+      #content {
+        width: 100%;
+        max-width: 536px;
+
+        #heading {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          gap: 32px;
+          margin-bottom: 50px;
+
+          .title {
+            font-size: var(--order-confirmation-title-font-size);
+            font-weight: var(--order-confirmation-title-font-weight);
+            line-height: var(--order-confirmation-title-line-height);
+            color: var(--order-confirmation-title-color);
+
+            display: inline-flex;
+            align-items: center;
+            gap: 16px;
+
+            coras-icon {
+              width: 32px;
+              height: 32px;
+            }
+          }
+
+          .info {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            gap: 32px;
+          }
+        }
+
+        #items {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+        }
+
+        #footer {
+          display: flex;
+          justify-content: center;
+          margin-top: 32px;
+        }
+      }
+    }
+  }
+
+  @container (max-width: 599px) {
+    :host #container {
+      padding-top: 40px;
+      padding-bottom: 32px;
+      padding-inline: 24px;
+    }
+
+    :host #container #content #heading .title {
+      align-items: flex-start;
+    }
+
+    :host #container #content #heading .title coras-icon {
+      width: 48px;
+      height: 48px;
+    }
+
+    :host #container #content #footer {
+      text-align: center;
+      margin-top: 24px;
+    }
+  }
+`;

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

@@ -0,0 +1,24 @@
+import { CSSResultGroup, LitElement } from "lit";
+export declare class CorasOtp extends LitElement {
+    static styles: CSSResultGroup;
+    length: number;
+    error: boolean;
+    helpText: string;
+    errorText: string;
+    disabled: boolean;
+    /** Current OTP value as string. */
+    value: string;
+    private _digits;
+    private _focused;
+    private _input;
+    connectedCallback(): void;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    private _ensureLength;
+    private _applyValue;
+    private get _activeIndex();
+    private _onInput;
+    private _onPaste;
+    focus(options?: FocusOptions): void;
+    private renderHelpOrError;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/otp/otp.component.js

@@ -0,0 +1,148 @@
+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, query, state } from "lit/decorators.js";
+import styles from "./otp.styles.js";
+import { isOtpComplete, joinOtp, parseOtpFromString } from "./otp.utils.js";
+import { fireInternalEvent } from "../../core/events.js";
+export class CorasOtp extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.length = 6;
+        this.error = false;
+        this.helpText = "";
+        this.errorText = "";
+        this.disabled = false;
+        /** Current OTP value as string. */
+        this.value = "";
+        this._digits = new Array(6).fill("");
+        this._focused = false;
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        this._ensureLength();
+        if (this.value)
+            this._applyValue(this.value);
+    }
+    willUpdate(changed) {
+        if (changed.has("length"))
+            this._ensureLength();
+        if (changed.has("value"))
+            this._applyValue(this.value);
+    }
+    _ensureLength() {
+        const l = Math.max(1, Number(this.length) || 6);
+        this.style.setProperty("--otp-length", String(l));
+        if (this._digits.length !== l)
+            this._digits = new Array(l).fill("");
+    }
+    _applyValue(v) {
+        this._digits = [...parseOtpFromString(v ?? "", this.length)];
+    }
+    get _activeIndex() {
+        if (!this._focused)
+            return -1;
+        const firstEmpty = this._digits.findIndex((d) => !d);
+        return firstEmpty === -1 ? this.length - 1 : firstEmpty;
+    }
+    _onInput(e) {
+        const target = e.target;
+        const raw = (target.value || "").replace(/\D+/g, "").slice(0, this.length);
+        this._digits = parseOtpFromString(raw, this.length);
+        this.value = joinOtp(this._digits);
+        target.value = raw;
+        target.setSelectionRange(raw.length, raw.length);
+        if (isOtpComplete(this._digits)) {
+            fireInternalEvent(this, "otp-completed", { code: this.value });
+        }
+    }
+    _onPaste(e) {
+        e.preventDefault();
+        const data = e.clipboardData?.getData("text") ?? "";
+        const raw = data.replace(/\D+/g, "").slice(0, this.length);
+        this._digits = parseOtpFromString(raw, this.length);
+        this.value = joinOtp(this._digits);
+        if (this._input)
+            this._input.value = raw;
+        if (isOtpComplete(this._digits)) {
+            fireInternalEvent(this, "otp-completed", { code: this.value });
+        }
+    }
+    focus(options) {
+        this._input?.focus(options);
+    }
+    renderHelpOrError() {
+        if (this.error && this.errorText) {
+            return html `<div class="error" part="error">${this.errorText}</div>`;
+        }
+        if (this.helpText) {
+            return html `<div class="help" part="help">${this.helpText}</div>`;
+        }
+        return nothing;
+    }
+    render() {
+        const raw = this._digits.filter((d) => d).join("");
+        return html `
+      <div class="base" part="base">
+        <div class="inputs" part="inputs">
+          <input
+            class="overlay-input"
+            type="text"
+            inputmode="numeric"
+            autocomplete="one-time-code"
+            pattern="[0-9]*"
+            maxlength=${this.length}
+            .value=${raw}
+            ?disabled=${this.disabled}
+            aria-label="One-time code"
+            @input=${this._onInput}
+            @paste=${this._onPaste}
+            @focus=${() => (this._focused = true)}
+            @blur=${() => (this._focused = false)}
+          />
+          ${this._digits.map((d, i) => html `
+              <div
+                class="digit ${i === this._activeIndex ? "active" : ""}"
+                part="otp-input"
+              >
+                ${d}
+              </div>
+            `)}
+        </div>
+        ${this.renderHelpOrError()}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Number })
+], CorasOtp.prototype, "length", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasOtp.prototype, "error", void 0);
+__decorate([
+    property({ type: String, attribute: "help-text" })
+], CorasOtp.prototype, "helpText", void 0);
+__decorate([
+    property({ type: String, attribute: "error-text" })
+], CorasOtp.prototype, "errorText", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasOtp.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], CorasOtp.prototype, "value", void 0);
+__decorate([
+    state()
+], CorasOtp.prototype, "_digits", void 0);
+__decorate([
+    state()
+], CorasOtp.prototype, "_focused", void 0);
+__decorate([
+    query(".overlay-input")
+], CorasOtp.prototype, "_input", void 0);

package/dist/components/otp/otp.d.ts

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

package/dist/components/otp/otp.js

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

package/dist/components/otp/otp.styles.d.ts

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

package/dist/components/otp/otp.styles.js

@@ -0,0 +1,87 @@
+import { css } from "lit";
+export default css `
+  :host {
+    --otp-size: 3.2rem;
+    --otp-gap: 0.75rem;
+    --otp-radius: var(--coras-radius-md, 0.75rem);
+    --otp-border-color: var(--coras-color-neutral-400);
+    --otp-border-color-focus: var(--coras-color-primary-400);
+    --otp-border-color-error: var(--coras-color-error-500);
+    --otp-bg: var(
+      --coras-input-field-background-color,
+      var(--coras-palette-white)
+    );
+    --otp-shadow-focus: 0 0 0 2px var(--coras-color-primary-100);
+    --otp-font-size: var(--coras-font-size-xl);
+    display: block;
+    font-family: var(--coras-font-family-sans, ui-sans-serif, system-ui);
+  }
+
+  .base {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .inputs {
+    display: grid;
+    grid-template-columns: repeat(
+      var(--otp-length, 6),
+      minmax(0, var(--otp-size))
+    );
+    gap: var(--otp-gap);
+    position: relative;
+  }
+
+  .overlay-input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: transparent;
+    caret-color: transparent;
+    -webkit-text-fill-color: transparent;
+    z-index: 1;
+    font-size: 1rem;
+    padding: 0;
+  }
+
+  .digit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    aspect-ratio: 1;
+    min-width: 0;
+    border-radius: var(--otp-radius);
+    border: 1px solid var(--otp-border-color);
+    background: var(--otp-bg);
+    font-size: var(--otp-font-size);
+    color: var(--coras-color-text);
+    transition:
+      border-color 0.15s ease,
+      box-shadow 0.15s ease;
+  }
+
+  .digit.active {
+    border-color: var(--otp-border-color-focus);
+    box-shadow: var(--otp-shadow-focus);
+  }
+
+  :host([error]) .digit {
+    border-color: var(--otp-border-color-error);
+  }
+
+  .help {
+    color: var(--coras-color-text-secondary);
+    font-size: var(--coras-font-size-sm);
+  }
+
+  .error {
+    color: var(--coras-color-error-500);
+    font-size: var(--coras-font-size-sm);
+  }
+`;

package/dist/components/otp/otp.utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Utilities for OTP processing.
+ */
+/** Extracts only digits from a string and trims to given length. */
+export declare function parseOtpFromString(input: string, length?: number): string[];
+/** Joins the OTP array into a single string. */
+export declare function joinOtp(digits: (string | null | undefined)[]): string;
+/** Returns true if all slots are filled with a digit 0-9. */
+export declare function isOtpComplete(digits: string[]): boolean;

package/dist/components/otp/otp.utils.js

@@ -0,0 +1,26 @@
+/**
+ * Utilities for OTP processing.
+ */
+/** Extracts only digits from a string and trims to given length. */
+export function parseOtpFromString(input, length = 6) {
+    if (!input)
+        return new Array(length).fill("");
+    const digits = input
+        .toString()
+        .replace(/\D+/g, "")
+        .slice(0, length)
+        .split("");
+    const result = new Array(length).fill("");
+    for (let i = 0; i < digits.length && i < length; i++) {
+        result[i] = digits[i] ?? "";
+    }
+    return result;
+}
+/** Joins the OTP array into a single string. */
+export function joinOtp(digits) {
+    return digits.map((d) => d ?? "").join("");
+}
+/** Returns true if all slots are filled with a digit 0-9. */
+export function isOtpComplete(digits) {
+    return digits.length > 0 && digits.every((d) => /^[0-9]$/.test(d));
+}

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

@@ -0,0 +1,13 @@
+import { CSSResultGroup, LitElement } from "lit";
+export declare class CorasOverlay extends LitElement {
+    static styles: CSSResultGroup;
+    open: boolean;
+    private overlay;
+    private onAnimationStart;
+    private animationStartListener;
+    private onAnimationEnd;
+    private animationEndListener;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/overlay/overlay.component.js

@@ -0,0 +1,52 @@
+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 } from "lit";
+import { property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { fireInternalEvent } from "../../core/events.js";
+import styles from "./overlay.styles.js";
+export class CorasOverlay extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.animationStartListener = () => this.onAnimationStart();
+        this.animationEndListener = () => this.onAnimationEnd();
+    }
+    static { this.styles = styles; }
+    onAnimationStart() {
+        fireInternalEvent(this, "overlay-animation-started", {});
+    }
+    onAnimationEnd() {
+        fireInternalEvent(this, "overlay-animation-ended", {});
+    }
+    firstUpdated() {
+        this.overlay.addEventListener("animationstart", this.animationStartListener);
+        this.overlay.addEventListener("animationend", this.animationEndListener);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.overlay.removeEventListener("animationstart", this.animationStartListener);
+        this.overlay.removeEventListener("animationend", this.animationEndListener);
+    }
+    render() {
+        const classes = {
+            overlay: true,
+            open: this.open,
+        };
+        return html `<div
+      class=${classMap(classes)}
+      part="overlay"
+      tabindex="-1"
+    ></div>`;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], CorasOverlay.prototype, "open", void 0);
+__decorate([
+    query(".overlay")
+], CorasOverlay.prototype, "overlay", void 0);

package/dist/components/overlay/overlay.d.ts

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

package/dist/components/overlay/overlay.js

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

package/dist/components/overlay/overlay.styles.d.ts

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

package/dist/components/overlay/overlay.styles.js

@@ -0,0 +1,39 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  .overlay {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: color-mix(in srgb, black, transparent 50%);
+    pointer-events: all;
+    animation: fadeOut 0.4s both;
+
+    &.open {
+      animation: fadeIn 0.4s both;
+    }
+  }
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+`;

package/dist/components/pay-in/pay-in.component.d.ts

@@ -0,0 +1,10 @@
+import { CSSResultGroup, LitElement } from "lit";
+import { SupportedCurrencies } from "../../core/types/index.js";
+export declare class CorasPayIn extends LitElement {
+    static styles: CSSResultGroup;
+    currency: SupportedCurrencies | "FIDA";
+    type: "pay" | "earn";
+    amount: string;
+    private computeClasses;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/pay-in/pay-in.component.js

@@ -0,0 +1,52 @@
+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 { html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { msg, localized } from "@lit/localize";
+import styles from "./pay-in.styles.js";
+let CorasPayIn = class CorasPayIn extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.currency = "EUR";
+        this.type = "pay";
+        this.amount = "";
+    }
+    static { this.styles = styles; }
+    computeClasses() {
+        return {
+            "pay-in": true,
+            pay: this.type === "pay",
+            earn: this.type === "earn",
+        };
+    }
+    render() {
+        const actionText = msg("Pay in");
+        const tagText = this.type === "pay"
+            ? `${msg("Earn from")} ${this.amount} FIDA`
+            : `${msg("Pay from")} ${this.amount} ${this.currency}`;
+        return html `
+      <div part="base" class="${classMap(this.computeClasses())}">
+        <div part="action" class="action">${actionText} ${this.currency}</div>
+        <div part="tag" class="tag">${tagText}</div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], CorasPayIn.prototype, "currency", void 0);
+__decorate([
+    property({ type: String })
+], CorasPayIn.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], CorasPayIn.prototype, "amount", void 0);
+CorasPayIn = __decorate([
+    localized()
+], CorasPayIn);
+export { CorasPayIn };

package/dist/components/pay-in/pay-in.d.ts

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

package/dist/components/pay-in/pay-in.js

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

package/dist/components/pay-in/pay-in.styles.d.ts

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