@coras-io/embed 0.1.0

package/dist/views/payment-page/partials/confirmation/confirmation.styles.js

@@ -0,0 +1,191 @@
+import { css } from "lit";
+export default css `
+  :host {
+    --confirmation-text-color: var(--coras-color-text);
+    --confirmation-container-border-color: var(--coras-color-neutral-200);
+    --confirmation-container-border-radius: var(--coras-radius-md);
+    --confirmation-divider-color: var(--coras-color-neutral-200);
+    --confirmation-success-icon-color: var(--coras-color-text);
+    --confirmation-title-color: var(--coras-color-text);
+    --confirmation-title-font-size: var(--coras-font-size-2xl);
+    --confirmation-title-font-weight: var(--coras-font-weight-bold);
+    --confirmation-order-reference-font-size: var(--coras-font-size-lg);
+    --confirmation-email-font-size: var(--coras-font-size-base);
+    --confirmation-email-color: var(--coras-color-text-secondary);
+    --confirmation-ticket-title-font-size: var(--coras-font-size-xl);
+    --confirmation-ticket-title-font-weight: var(--coras-font-weight-bold);
+    --confirmation-ticket-title-color: var(--coras-color-text);
+    --confirmation-ticket-image-border-radius: var(--coras-radius-sm);
+    --confirmation-info-label-font-size: var(--coras-font-size-base);
+    --confirmation-info-label-color: var(--coras-color-text-secondary);
+    --confirmation-info-value-font-size: var(--coras-font-size-base);
+    --confirmation-info-value-font-weight: var(--coras-font-weight-medium);
+    --confirmation-info-value-color: var(--coras-color-text);
+    --confirmation-help-text-font-size: var(--coras-font-size-base);
+    --confirmation-help-text-color: var(--coras-color-text-secondary);
+    --confirmation-help-link-color: var(--coras-color-primary-400);
+    --confirmation-help-link-font-weight: var(--coras-font-weight-medium);
+
+    display: block;
+    color: var(--confirmation-text-color);
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 2rem;
+    box-sizing: border-box;
+  }
+
+  .confirmation-title-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 2rem;
+  }
+
+  .success-icon {
+    color: var(--confirmation-success-icon-color);
+    margin-right: 1rem;
+  }
+
+  .confirmation-title {
+    font-size: var(--confirmation-title-font-size);
+    font-weight: var(--confirmation-title-font-weight);
+    margin: 0;
+    color: var(--confirmation-title-color);
+  }
+
+  .confirmation-container {
+    width: 100%;
+    border: 1px solid var(--confirmation-container-border-color);
+    border-radius: var(--confirmation-container-border-radius);
+    padding: 40px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .confirmation-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 2rem;
+    text-align: center;
+  }
+
+  .order-reference {
+    font-size: var(--confirmation-order-reference-font-size);
+    margin: 0 0 2rem 0;
+  }
+
+  .email-confirmation {
+    font-size: var(--confirmation-email-font-size);
+    color: var(--confirmation-email-color);
+    margin: 0;
+  }
+
+  .reservation-spacer {
+    height: 2rem;
+  }
+
+  .divider {
+    height: 1px;
+    background-color: var(--confirmation-divider-color);
+    margin: 0;
+    width: 100%;
+  }
+
+  .ticket-details {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 20px 0;
+  }
+
+  .ticket-image {
+    flex-shrink: 0;
+    width: 100px;
+    height: 100px;
+    border-radius: var(--confirmation-ticket-image-border-radius);
+    overflow: hidden;
+  }
+
+  .ticket-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .ticket-info {
+    flex: 1;
+  }
+
+  .ticket-title {
+    font-size: var(--confirmation-ticket-title-font-size);
+    font-weight: var(--confirmation-ticket-title-font-weight);
+    color: var(--confirmation-ticket-title-color);
+    margin-bottom: 10px;
+  }
+
+  .info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 30px;
+    padding: 20px 0;
+  }
+
+  .info-item {
+    margin-bottom: 15px;
+  }
+
+  .info-label {
+    font-size: var(--confirmation-info-label-font-size);
+    margin-bottom: 5px;
+    color: var(--confirmation-info-label-color);
+  }
+
+  .info-value {
+    font-size: var(--confirmation-info-value-font-size);
+    font-weight: var(--confirmation-info-value-font-weight);
+    color: var(--confirmation-info-value-color);
+  }
+
+  .help-text {
+    text-align: center;
+    margin-top: 2rem;
+    font-size: var(--confirmation-help-text-font-size);
+    color: var(--confirmation-help-text-color);
+  }
+
+  .help-link {
+    color: var(--confirmation-help-link-color);
+    text-decoration: none;
+    font-weight: var(--confirmation-help-link-font-weight);
+    cursor: pointer;
+  }
+
+  .help-link:hover {
+    text-decoration: underline;
+  }
+
+  @media (max-width: 768px) {
+    .confirmation-container {
+      padding: 20px;
+    }
+
+    .info-grid {
+      grid-template-columns: 1fr;
+      gap: 15px;
+    }
+
+    .ticket-details {
+      flex-direction: column;
+    }
+
+    .ticket-image {
+      width: 100px;
+      height: 100px;
+      margin-bottom: 15px;
+    }
+  }
+`;

package/dist/views/payment-page/partials/country-field/country-field.component.d.ts

@@ -0,0 +1,44 @@
+import { CSSResultGroup, LitElement, TemplateResult } from "lit";
+import "../../../../components/dropdown/dropdown.js";
+import "../../../../components/input-field/input-field.js";
+import "../../../../components/icon/icon.js";
+import "../../../../components/select-list/select-list.js";
+import "../../../../components/select-list/select-option/select-option.js";
+import { components } from "../../../../core/types/api-schema.js";
+/**
+ * @fires value-changed - Dispatched when a country is selected
+ */
+export declare class CorasCountryField extends LitElement {
+    static styles: CSSResultGroup;
+    name: string;
+    label: string;
+    value: string;
+    helpText: string;
+    error: string;
+    validated: boolean;
+    hasError: boolean;
+    autocomplete: "on" | "name" | "email" | "tel" | "address-line1" | "address-line2" | "address-level2" | "postal-code" | "country" | "off" | "bday";
+    assetsURL: string;
+    countries: components["schemas"]["Country"][];
+    private _open;
+    private _searchQuery;
+    private _focusedIndex;
+    /** Flag to prevent blur handler from reverting when user clicks an option */
+    private _selectingOption;
+    private static _listboxId;
+    private _listboxIdValue;
+    private get _filteredCountries();
+    private get _displayValue();
+    private _handleInput;
+    private _handleFocusIn;
+    private _handleFocusOut;
+    private _handleKeyDown;
+    private _scrollFocusedIntoView;
+    private _selectCountry;
+    private _handleOptionMouseDown;
+    private _handleDropdownClose;
+    private _getOptionId;
+    private get _activeDescendantId();
+    private _renderOption;
+    render(): TemplateResult<1>;
+}

package/dist/views/payment-page/partials/country-field/country-field.component.js

@@ -0,0 +1,260 @@
+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;
+};
+var CorasCountryField_1;
+import { LitElement, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import "../../../../components/dropdown/dropdown.js";
+import "../../../../components/input-field/input-field.js";
+import "../../../../components/icon/icon.js";
+import "../../../../components/select-list/select-list.js";
+import "../../../../components/select-list/select-option/select-option.js";
+import { fireInternalEvent } from "../../../../core/events.js";
+import { filterCountries } from "../../payment-page.utils.js";
+import styles from "./country-field.styles.js";
+/**
+ * @fires value-changed - Dispatched when a country is selected
+ */
+let CorasCountryField = class CorasCountryField extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "";
+        this.label = "";
+        this.value = "";
+        this.helpText = "";
+        this.error = "";
+        this.validated = false;
+        this.hasError = false;
+        this.autocomplete = "off";
+        this.assetsURL = "";
+        this.countries = [];
+        this._open = false;
+        this._searchQuery = "";
+        this._focusedIndex = -1;
+        /** Flag to prevent blur handler from reverting when user clicks an option */
+        this._selectingOption = false;
+        this._listboxIdValue = `country-listbox-${CorasCountryField_1._listboxId++}`;
+    }
+    static { CorasCountryField_1 = this; }
+    static { this.styles = styles; }
+    static { this._listboxId = 0; }
+    get _filteredCountries() {
+        return filterCountries(this.countries, this._searchQuery);
+    }
+    get _displayValue() {
+        return this._open ? this._searchQuery : this.value;
+    }
+    _handleInput(e) {
+        e.stopPropagation();
+        this._searchQuery = e.detail.value || "";
+        this._focusedIndex = 0;
+        if (!this._open) {
+            this._open = true;
+        }
+    }
+    _handleFocusIn() {
+        this._searchQuery = "";
+        this._focusedIndex = -1;
+        this._open = true;
+    }
+    _handleFocusOut() {
+        // If user is clicking an option, let the mousedown handler take over
+        if (this._selectingOption) {
+            this._selectingOption = false;
+            return;
+        }
+        // If search text exactly matches a country name, select it
+        if (this._searchQuery) {
+            const exactMatch = this.countries.find((c) => c.name?.toLowerCase() === this._searchQuery.toLowerCase());
+            if (exactMatch) {
+                this._selectCountry(exactMatch);
+                return;
+            }
+        }
+        // Revert to previous value
+        this._searchQuery = "";
+        this._open = false;
+    }
+    _handleKeyDown(e) {
+        const filtered = this._filteredCountries;
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                if (!this._open) {
+                    this._open = true;
+                    this._focusedIndex = 0;
+                }
+                else {
+                    this._focusedIndex =
+                        this._focusedIndex < filtered.length - 1
+                            ? this._focusedIndex + 1
+                            : 0;
+                    this._scrollFocusedIntoView();
+                }
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                if (this._open) {
+                    this._focusedIndex =
+                        this._focusedIndex > 0
+                            ? this._focusedIndex - 1
+                            : filtered.length - 1;
+                    this._scrollFocusedIntoView();
+                }
+                break;
+            case "Enter":
+                e.preventDefault();
+                if (this._open &&
+                    this._focusedIndex >= 0 &&
+                    this._focusedIndex < filtered.length) {
+                    this._selectCountry(filtered[this._focusedIndex]);
+                }
+                break;
+            case "Escape":
+                e.preventDefault();
+                this._searchQuery = "";
+                this._open = false;
+                break;
+        }
+    }
+    _scrollFocusedIntoView() {
+        this.updateComplete.then(() => {
+            const container = this.shadowRoot?.querySelector("coras-select-list");
+            const options = container?.querySelectorAll("coras-select-option");
+            const option = options?.[this._focusedIndex];
+            if (option) {
+                option.scrollIntoView({ block: "nearest" });
+            }
+        });
+    }
+    _selectCountry(country) {
+        fireInternalEvent(this, "value-changed", { value: country.name || "" });
+        this._searchQuery = "";
+        this._open = false;
+        this._focusedIndex = -1;
+    }
+    _handleOptionMouseDown(e) {
+        // Prevent blur from firing before the click completes
+        e.preventDefault();
+        this._selectingOption = true;
+    }
+    _handleDropdownClose() {
+        this._searchQuery = "";
+        this._open = false;
+        this._focusedIndex = -1;
+    }
+    _getOptionId(index) {
+        return `${this._listboxIdValue}-option-${index}`;
+    }
+    get _activeDescendantId() {
+        return this._focusedIndex >= 0 ? this._getOptionId(this._focusedIndex) : "";
+    }
+    _renderOption(country, index) {
+        const selected = country.name === this.value;
+        const focused = index === this._focusedIndex;
+        return html `
+      <coras-select-option
+        id=${this._getOptionId(index)}
+        key=${country.name || ""}
+        ?selected=${selected}
+        ?focused=${focused}
+        @mousedown=${this._handleOptionMouseDown}
+        @click=${() => this._selectCountry(country)}
+      >
+        ${country.name}
+      </coras-select-option>
+    `;
+    }
+    render() {
+        const filtered = this._filteredCountries;
+        return html `
+      <coras-dropdown
+        ?open="${this._open}"
+        ?arrow="${false}"
+        @dropdown-close-request="${this._handleDropdownClose}"
+      >
+        <coras-field
+          slot="trigger"
+          type="text"
+          autocomplete="${this.autocomplete}"
+          name="${this.name}"
+          label="${this.label}"
+          value="${this._displayValue}"
+          ?validated=${this.validated}
+          ?error=${this.hasError}
+          help-text=${this.hasError ? this.error : this.helpText}
+          placeholder="${msg("Type or select country")}"
+          role="combobox"
+          aria-expanded="${this._open}"
+          aria-autocomplete="list"
+          aria-controls="${this._listboxIdValue}"
+          aria-activedescendant="${this._activeDescendantId}"
+          @value-changed=${this._handleInput}
+          @focusin=${this._handleFocusIn}
+          @focusout=${this._handleFocusOut}
+          @keydown=${this._handleKeyDown}
+          validation-icon
+        >
+          <coras-icon
+            slot="suffix"
+            assets-url="${this.assetsURL}"
+            icon="keyboard-arrow-down"
+          ></coras-icon>
+        </coras-field>
+
+        <coras-select-list height="short" spacious id="${this._listboxIdValue}">
+          ${filtered.length > 0
+            ? filtered.map((country, i) => this._renderOption(country, i))
+            : html `<div class="no-results">${msg("No countries found")}</div>`}
+        </coras-select-list>
+      </coras-dropdown>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], CorasCountryField.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], CorasCountryField.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], CorasCountryField.prototype, "value", void 0);
+__decorate([
+    property({ type: String, attribute: "help-text" })
+], CorasCountryField.prototype, "helpText", void 0);
+__decorate([
+    property({ type: String })
+], CorasCountryField.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasCountryField.prototype, "validated", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "has-error" })
+], CorasCountryField.prototype, "hasError", void 0);
+__decorate([
+    property({ type: String })
+], CorasCountryField.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasCountryField.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: Array })
+], CorasCountryField.prototype, "countries", void 0);
+__decorate([
+    state()
+], CorasCountryField.prototype, "_open", void 0);
+__decorate([
+    state()
+], CorasCountryField.prototype, "_searchQuery", void 0);
+__decorate([
+    state()
+], CorasCountryField.prototype, "_focusedIndex", void 0);
+CorasCountryField = CorasCountryField_1 = __decorate([
+    localized()
+], CorasCountryField);
+export { CorasCountryField };

package/dist/views/payment-page/partials/country-field/country-field.d.ts

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

package/dist/views/payment-page/partials/country-field/country-field.js

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

package/dist/views/payment-page/partials/country-field/country-field.styles.d.ts

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

package/dist/views/payment-page/partials/country-field/country-field.styles.js

@@ -0,0 +1,21 @@
+import { css } from "lit";
+import component from "../../../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    width: 100%;
+    display: block;
+  }
+
+  coras-dropdown {
+    display: block;
+    width: 100%;
+  }
+
+  .no-results {
+    padding: 12px 24px;
+    color: var(--coras-color-neutral-400);
+    font-size: var(--coras-font-size-sm);
+  }
+`;

package/dist/views/payment-page/partials/hotel-pickup-field/hotel-pickup-field.component.d.ts

@@ -0,0 +1,19 @@
+import { CSSResultGroup, LitElement, nothing } from "lit";
+import { components } from "../../../../core/types/api-schema.js";
+import "../../../../components/dropdown/dropdown.js";
+import "../../../../components/input-field/input-field.js";
+import "../../../../components/icon/icon.js";
+import "../hotel-pickup-list/hotel-pickup-list.js";
+export declare class CorasHotelPickupField extends LitElement {
+    static styles: CSSResultGroup;
+    options: components["schemas"]["OptionPickupPoint"][];
+    value: string;
+    fieldName: string;
+    assetsURL: string;
+    error: string;
+    validated: boolean;
+    hasError: boolean;
+    private dropdownOpen;
+    private getSelectedPickupName;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}

package/dist/views/payment-page/partials/hotel-pickup-field/hotel-pickup-field.component.js

@@ -0,0 +1,108 @@
+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 { localized, msg } from "@lit/localize";
+import "../../../../components/dropdown/dropdown.js";
+import "../../../../components/input-field/input-field.js";
+import "../../../../components/icon/icon.js";
+import "../hotel-pickup-list/hotel-pickup-list.js";
+import styles from "./hotel-pickup-field.styles.js";
+let CorasHotelPickupField = class CorasHotelPickupField extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.options = [];
+        this.value = "";
+        this.fieldName = "";
+        this.assetsURL = "";
+        this.error = "";
+        this.validated = false;
+        this.hasError = false;
+        this.dropdownOpen = false;
+    }
+    static { this.styles = styles; }
+    getSelectedPickupName() {
+        if (!this.value || !this.options.length)
+            return "";
+        const selectedOption = this.options.find((option) => option.coras_pickup_id === this.value);
+        return selectedOption && selectedOption.pickup_name
+            ? selectedOption.pickup_name
+            : "";
+    }
+    render() {
+        if (!this.options.length) {
+            return nothing;
+        }
+        return html `
+      <coras-dropdown
+        ?open="${this.dropdownOpen}"
+        ?arrow="${false}"
+        @dropdown-close-request="${() => (this.dropdownOpen = false)}"
+      >
+        <coras-field
+          slot="trigger"
+          type="text"
+          autocomplete="off"
+          name="${this.fieldName}"
+          label="${msg("Hotel pickup")}"
+          value="${this.getSelectedPickupName()}"
+          ?validated=${this.validated}
+          ?error=${this.hasError}
+          help-text=${this.hasError ? this.error : ""}
+          placeholder="${this.getSelectedPickupName()
+            ? ""
+            : msg("Select pick up location")}"
+          @click="${() => (this.dropdownOpen = !this.dropdownOpen)}"
+          readonly
+          select
+          validation-icon
+        >
+          <coras-icon
+            slot="suffix"
+            assets-url="${this.assetsURL}"
+            icon="keyboard-arrow-down"
+          ></coras-icon>
+        </coras-field>
+        <coras-hotel-pickup-list
+          .options=${this.options}
+          .value=${this.value}
+          @value-changed=${() => {
+            this.dropdownOpen = false;
+        }}
+        ></coras-hotel-pickup-list>
+      </coras-dropdown>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], CorasHotelPickupField.prototype, "options", void 0);
+__decorate([
+    property({ type: String })
+], CorasHotelPickupField.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], CorasHotelPickupField.prototype, "fieldName", void 0);
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasHotelPickupField.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: String })
+], CorasHotelPickupField.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasHotelPickupField.prototype, "validated", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "has-error" })
+], CorasHotelPickupField.prototype, "hasError", void 0);
+__decorate([
+    state()
+], CorasHotelPickupField.prototype, "dropdownOpen", void 0);
+CorasHotelPickupField = __decorate([
+    localized()
+], CorasHotelPickupField);
+export { CorasHotelPickupField };

package/dist/views/payment-page/partials/hotel-pickup-field/hotel-pickup-field.d.ts

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

package/dist/views/payment-page/partials/hotel-pickup-field/hotel-pickup-field.js

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

package/dist/views/payment-page/partials/hotel-pickup-field/hotel-pickup-field.styles.d.ts

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