@coras-io/embed 0.1.0

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

@@ -0,0 +1,58 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    display: block;
+
+    --pay-in-font-size: var(--coras-font-size-sm);
+    --pay-in-font-weight: var(--coras-font-weight-semibold);
+    --pay-in-border-radius: 8px;
+    --pay-in-button-border-radius: 24px;
+    --pay-in-gap: 0.5rem;
+    --pay-in-height: 48px;
+    --pay-in-action-color: var(--coras-color-text);
+    --pay-in-button-color: var(--coras-color-text);
+    --pay-in-pay-button-background: var(--coras-color-primary-200);
+    --pay-in-earn-button-background: color-mix(
+      in srgb,
+      var(--coras-palette-pink-500),
+      white 86%
+    );
+  }
+
+  .pay-in {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--pay-in-gap);
+    font-size: var(--pay-in-font-size);
+    font-weight: var(--pay-in-font-weight);
+    border-radius: var(--pay-in-border-radius);
+    height: var(--pay-in-height);
+    box-sizing: border-box;
+
+    .action {
+      font-size: 1rem;
+      font-weight: 700;
+      color: var(--pay-in-action-color);
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
+
+    .tag {
+      background-color: var(--pay-in-pay-button-background);
+      color: var(--pay-in-button-color);
+      padding: 0.25rem 0.75rem;
+      border-radius: var(--pay-in-button-border-radius);
+      white-space: nowrap;
+      font-size: 0.75rem;
+    }
+
+    &.earn .tag {
+      background-color: var(--pay-in-earn-button-background);
+    }
+  }
+`;

package/dist/components/payment-fiat-method/payment-fiat-method.component.d.ts

@@ -0,0 +1,16 @@
+import { CSSResultGroup, LitElement } from "lit";
+export type PaymentFiatMethodType = "card" | "google-pay" | "apple-pay";
+/**
+ * A payment fiat method component.
+ */
+export declare class CorasPaymentFiatMethod extends LitElement {
+    static styles: CSSResultGroup;
+    /** The type of payment method */
+    type: PaymentFiatMethodType;
+    /** Whether the card is selected */
+    checked: boolean;
+    assetsURL: string;
+    private _getIcon;
+    private _renderIcon;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/payment-fiat-method/payment-fiat-method.component.js

@@ -0,0 +1,63 @@
+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 styles from "./payment-fiat-method.styles.js";
+/**
+ * A payment fiat method component.
+ */
+export class CorasPaymentFiatMethod extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The type of payment method */
+        this.type = "card";
+        /** Whether the card is selected */
+        this.checked = false;
+        this.assetsURL = "";
+    }
+    static { this.styles = styles; }
+    _getIcon() {
+        switch (this.type) {
+            case "google-pay":
+                return `${this.assetsURL}/payment/google.svg`;
+            case "apple-pay":
+                return `${this.assetsURL}/payment/apple.svg`;
+            case "card":
+            default:
+                return `${this.assetsURL}/payment/card.svg`;
+        }
+    }
+    _renderIcon() {
+        return html `
+      <div class="icon">
+        <img src="${this._getIcon()}" alt="${this.type}" />
+      </div>
+    `;
+    }
+    render() {
+        const classes = {
+            card: true,
+            checked: this.checked,
+            [this.type]: true,
+        };
+        return html `
+      <div class="${classMap(classes)}" part="base">
+        <div class="content-wrapper">${this._renderIcon()}</div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], CorasPaymentFiatMethod.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasPaymentFiatMethod.prototype, "checked", void 0);
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasPaymentFiatMethod.prototype, "assetsURL", void 0);

package/dist/components/payment-fiat-method/payment-fiat-method.d.ts

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

package/dist/components/payment-fiat-method/payment-fiat-method.js

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

package/dist/components/payment-fiat-method/payment-fiat-method.styles.d.ts

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

package/dist/components/payment-fiat-method/payment-fiat-method.styles.js

@@ -0,0 +1,38 @@
+import { css } from "lit";
+export default css `
+  :host {
+    display: inline-block;
+    cursor: pointer;
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 64px;
+    padding: 0.5rem;
+    border: 1px solid var(--coras-color-neutral-400);
+    border-radius: var(--coras-radius-xs);
+    background-color: var(--coras-color-surface);
+    transition: all 0.2s ease;
+
+    &.checked {
+      border-color: var(--coras-color-primary-500);
+      background-color: var(--coras-color-primary-100);
+      box-shadow: var(--coras-shadow-md);
+    }
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      height: 21px;
+      object-fit: contain;
+    }
+  }
+`;

package/dist/components/payment-option/payment-option.component.d.ts

@@ -0,0 +1,38 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { SupportedCurrencies } from "../../core/types/index.js";
+export type PaymentOptionType = "pay" | "earn";
+/**
+ * A payment option component that displays a selectable payment or earning option.
+ *
+ * @csspart base - The component's base wrapper
+ * @csspart header - The header section containing radio and title
+ * @csspart radio - The radio button indicator
+ * @csspart title - The title text
+ * @csspart content - The content section
+ * @csspart price - The price display (earn type only)
+ * @csspart icon - The icon display (pay type only)
+ * @csspart button - The action button
+ */
+export declare class CorasPaymentOption extends LitElement {
+    static styles: CSSResultGroup;
+    /** The currency to display */
+    currency: SupportedCurrencies;
+    /** The type of payment option: pay or earn */
+    type: PaymentOptionType;
+    /** The number of tokens to display */
+    tokensAmount: string;
+    /** The price to display */
+    price: string;
+    assetsURL: string;
+    /** Whether this option is currently checked/selected */
+    checked: boolean;
+    /** Whether this option is disabled */
+    disabled: boolean;
+    connectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    private _computeClasses;
+    private _getTitle;
+    private _getButtonText;
+    private _renderContentIcon;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/payment-option/payment-option.component.js

@@ -0,0 +1,131 @@
+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 "./payment-option.styles.js";
+/**
+ * A payment option component that displays a selectable payment or earning option.
+ *
+ * @csspart base - The component's base wrapper
+ * @csspart header - The header section containing radio and title
+ * @csspart radio - The radio button indicator
+ * @csspart title - The title text
+ * @csspart content - The content section
+ * @csspart price - The price display (earn type only)
+ * @csspart icon - The icon display (pay type only)
+ * @csspart button - The action button
+ */
+let CorasPaymentOption = class CorasPaymentOption extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The currency to display */
+        this.currency = "EUR";
+        /** The type of payment option: pay or earn */
+        this.type = "pay";
+        /** The number of tokens to display */
+        this.tokensAmount = "";
+        /** The price to display */
+        this.price = "";
+        this.assetsURL = "";
+        /** Whether this option is currently checked/selected */
+        this.checked = false;
+        /** Whether this option is disabled */
+        this.disabled = false;
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "radio");
+        this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+        this.setAttribute("aria-disabled", String(this.disabled));
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("checked")) {
+            this.setAttribute("aria-checked", String(this.checked));
+        }
+        if (changedProperties.has("disabled")) {
+            this.setAttribute("aria-disabled", String(this.disabled));
+            this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+        }
+    }
+    _computeClasses() {
+        return {
+            "payment-option": true,
+            checked: this.checked,
+            disabled: this.disabled,
+            pay: this.type === "pay",
+            earn: this.type === "earn",
+        };
+    }
+    _getTitle() {
+        if (this.type === "pay") {
+            return msg("Pay in FIDA");
+        }
+        return `${msg("Pay in")} ${this.currency}`;
+    }
+    _getButtonText() {
+        const action = this.type === "pay" ? msg("Pay") : msg("Earn");
+        const formattedAmount = this.tokensAmount || "0";
+        return `${action} ${formattedAmount} FIDA`;
+    }
+    _renderContentIcon() {
+        if (this.type === "earn") {
+            return html `<div part="price" class="price">${this.price || "0"}</div>`;
+        }
+        return html `
+      <div part="icon" class="icon">
+        <img src="${`${this.assetsURL}/payment/fida.svg`}" alt="FIDA" />
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <div
+        part="base"
+        class="${classMap(this._computeClasses())}"
+        aria-label="${this._getTitle()}"
+      >
+        <div part="header" class="header">
+          <span part="radio" class="radio" aria-hidden="true"></span>
+          <span part="title" class="title"> ${this._getTitle()} </span>
+        </div>
+        <div part="content" class="content">
+          ${this._renderContentIcon()}
+          <div part="button" class="button">${this._getButtonText()}</div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], CorasPaymentOption.prototype, "currency", void 0);
+__decorate([
+    property({ type: String })
+], CorasPaymentOption.prototype, "type", void 0);
+__decorate([
+    property({ type: String, attribute: "tokens-amount" })
+], CorasPaymentOption.prototype, "tokensAmount", void 0);
+__decorate([
+    property({ type: String })
+], CorasPaymentOption.prototype, "price", void 0);
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasPaymentOption.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasPaymentOption.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasPaymentOption.prototype, "disabled", void 0);
+CorasPaymentOption = __decorate([
+    localized()
+], CorasPaymentOption);
+export { CorasPaymentOption };

package/dist/components/payment-option/payment-option.d.ts

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

package/dist/components/payment-option/payment-option.js

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

package/dist/components/payment-option/payment-option.styles.d.ts

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

package/dist/components/payment-option/payment-option.styles.js

@@ -0,0 +1,206 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    display: block;
+    width: 100%;
+
+    --payment-option-font-size: var(--coras-font-size-base);
+    --payment-option-font-weight: var(--coras-font-weight-semibold);
+    --payment-option-border-radius: 12px;
+    --payment-option-button-border-radius: 24px;
+    --payment-option-padding: 1rem;
+    --payment-option-border-width: 2px;
+    --payment-option-border-color: var(--coras-color-primary-200);
+    --payment-option-checked-border-color: var(--coras-palette-pink-500);
+    --payment-option-background: var(--coras-color-surface);
+    --payment-option-title-color: var(--coras-color-text);
+    --payment-option-price-color: var(--coras-color-text);
+    --payment-option-button-color: var(--coras-color-neutral-50);
+    --payment-option-button-background: var(--coras-color-info-900);
+    --payment-option-radio-size: 1.25rem;
+    --payment-option-radio-border-width: 2px;
+    --payment-option-radio-border-color: var(--coras-color-neutral-400);
+    --payment-option-radio-checked-border-color: var(--coras-palette-pink-500);
+    --payment-option-radio-checked-inner-size: 12px;
+    --payment-option-icon-size: 1.25rem;
+    --payment-option-icon-background: var(--coras-color-info-900);
+    --payment-option-icon-color: var(--coras-color-info-500);
+
+    /* Disabled tokens */
+    --payment-option-disabled-border-color: var(--coras-color-neutral-300);
+    --payment-option-disabled-title-color: var(--coras-color-neutral-500);
+    --payment-option-disabled-price-color: var(--coras-color-neutral-600);
+    --payment-option-disabled-button-background: var(--coras-color-neutral-200);
+  }
+
+  :host {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .payment-option {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: var(--payment-option-padding);
+    border-radius: 8px;
+    border: 2px solid var(--payment-option-border-color);
+    background-color: var(--payment-option-background);
+    box-sizing: border-box;
+    box-shadow: 0 4px 4px 0 color-mix(in srgb, black, transparent 90%);
+    flex-shrink: 0;
+
+    &.checked {
+      border-color: var(--payment-option-checked-border-color);
+      background: linear-gradient(
+        to bottom,
+        color-mix(in srgb, var(--coras-palette-pink-500), white 96%),
+        color-mix(in srgb, var(--coras-palette-pink-500), white 92%)
+      );
+    }
+
+    &.disabled {
+      pointer-events: none;
+      border-color: var(--coras-color-neutral-300);
+      background: var(--coras-color-surface);
+    }
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .radio {
+    width: var(--payment-option-radio-size);
+    height: var(--payment-option-radio-size);
+    border-radius: 50%;
+    border: var(--payment-option-radio-border-width) solid
+      var(--payment-option-radio-border-color);
+    position: relative;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    transition: border-color 0.2s ease;
+  }
+
+  .checked .radio {
+    border-color: var(--payment-option-radio-checked-border-color);
+  }
+
+  .checked .radio::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--payment-option-radio-checked-inner-size);
+    height: var(--payment-option-radio-checked-inner-size);
+    border-radius: 50%;
+    background-color: var(--payment-option-radio-checked-border-color);
+  }
+
+  /* Disabled look */
+  .disabled .title,
+  :host([disabled]) .title {
+    color: var(--coras-color-neutral-500);
+  }
+
+  .disabled .radio,
+  :host([disabled]) .radio {
+    border-color: var(--coras-color-neutral-300);
+  }
+
+  .disabled.checked .radio::after,
+  :host([disabled]) .checked .radio::after {
+    background-color: var(--coras-color-neutral-400);
+  }
+
+  .title {
+    color: var(--payment-option-title-color);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    letter-spacing: 0.128px;
+  }
+
+  .icon {
+    width: var(--payment-option-icon-size);
+    height: var(--payment-option-icon-size);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .disabled .icon img,
+  :host([disabled]) .icon img {
+    filter: grayscale(1);
+    opacity: 0.6;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .price {
+    font-weight: var(--payment-option-font-weight);
+    color: var(--payment-option-price-color);
+    font-size: 1rem;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.128px;
+  }
+
+  .disabled .price,
+  :host([disabled]) .price {
+    color: var(--payment-option-disabled-price-color);
+  }
+
+  .button {
+    display: inline-flex;
+    padding: 4px 6px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    border-radius: 12px;
+    background: var(--payment-option-button-background);
+    color: var(--coras-palette-white);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0.2px;
+    white-space: nowrap;
+    transition: opacity 0.2s ease;
+  }
+
+  .disabled .button,
+  :host([disabled]) .button {
+    background: var(--payment-option-disabled-button-background);
+    color: var(--coras-palette-white);
+    opacity: 1;
+  }
+
+  :host(:not([disabled])) .payment-option:hover .button {
+    opacity: 0.9;
+  }
+`;

package/dist/components/performance-time/performance-time.component.d.ts

@@ -0,0 +1,9 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../icon/icon.js";
+export declare class CorasPerformanceTime extends LitElement {
+    static styles: CSSResultGroup;
+    assetsURL: string;
+    text: string;
+    selected: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/performance-time/performance-time.component.js

@@ -0,0 +1,47 @@
+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 { classMap } from "lit/directives/class-map.js";
+import "../icon/icon.js";
+import styles from "./performance-time.styles.js";
+let CorasPerformanceTime = class CorasPerformanceTime extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.text = "";
+        this.selected = false;
+    }
+    static { this.styles = styles; }
+    render() {
+        return html `
+      <button part="base" class="${classMap({ selected: this.selected })}">
+        <coras-icon
+          assets-url="${this.assetsURL}"
+          icon="schedule"
+          label=${msg("Time")}
+          size="small"
+        ></coras-icon>
+        <span class="text">${this.text}</span>
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasPerformanceTime.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: String })
+], CorasPerformanceTime.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasPerformanceTime.prototype, "selected", void 0);
+CorasPerformanceTime = __decorate([
+    localized()
+], CorasPerformanceTime);
+export { CorasPerformanceTime };

package/dist/components/performance-time/performance-time.d.ts

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

package/dist/components/performance-time/performance-time.js

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

package/dist/components/performance-time/performance-time.styles.d.ts

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