@coras-io/embed 0.1.0

package/dist/components/itinerary/itinerary-item/itinerary-item.styles.js

@@ -0,0 +1,70 @@
+import { css } from "lit";
+import component from "../../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --itinerary-item-color: var(--coras-color-text);
+    --itinerary-item-dot-background-color: var(--coras-color-text);
+    --itinerary-item-label-font-size: var(--coras-font-size-base);
+    --itinerary-item-label-font-weight: var(--coras-font-weight-medium);
+    --itinerary-item-border-left-color: var(--coras-color-secondary-500);
+    --itinerary-item-description-font-size: var(--coras-font-size-base);
+    --itinerary-item-description-font-weight: var(--coras-font-weight-normal);
+    --itinerary-item-footer-font-size: var(--coras-font-size-xs);
+    --itinerary-item-footer-font-weight: var(--coras-font-weight-medium);
+  }
+
+  :host(:last-child) {
+    .content {
+      border-left: none;
+    }
+  }
+
+  .item {
+    display: flex;
+    flex-direction: column;
+
+    color: var(--itinerary-item-color);
+
+    .header {
+      display: flex;
+      gap: 0.75rem;
+
+      .dot {
+        background-color: var(--itinerary-item-dot-background-color);
+        height: 0.75rem;
+        width: 0.75rem;
+        border-radius: 50%;
+        margin: 0.375rem;
+      }
+
+      .label {
+        font-size: var(--itinerary-item-label-font-size);
+        font-weight: var(--itinerary-item-label-font-weight);
+        line-height: 1.375rem;
+      }
+    }
+
+    .content {
+      padding: 0.75rem 1.5rem 1rem;
+      margin: 0 0.688rem;
+
+      border-left: 2px solid var(--itinerary-item-border-left-color);
+
+      .description {
+        font-size: var(--itinerary-item-description-font-size);
+        font-weight: var(--itinerary-item-description-font-weight);
+        line-height: 1.625rem;
+        margin-bottom: 0.75rem;
+      }
+
+      .footer {
+        font-size: var(--itinerary-item-footer-font-size);
+        font-weight: var(--itinerary-item-footer-font-weight);
+        line-height: 1rem;
+        margin-bottom: 1rem;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,7 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../list/list.js";
+export declare class CorasItinerary extends LitElement {
+    static styles: CSSResultGroup;
+    label: string;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/itinerary/itinerary.component.js

@@ -0,0 +1,23 @@
+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 } from "lit/decorators.js";
+import "../list/list.js";
+import styles from "./itinerary.styles.js";
+export class CorasItinerary extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+    }
+    static { this.styles = styles; }
+    render() {
+        return html `<coras-list label=${this.label}><slot></slot></coras-list>`;
+    }
+}
+__decorate([
+    property({ type: String })
+], CorasItinerary.prototype, "label", void 0);

package/dist/components/itinerary/itinerary.d.ts

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

package/dist/components/itinerary/itinerary.js

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

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

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

package/dist/components/itinerary/itinerary.styles.js

@@ -0,0 +1,15 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  coras-list {
+    &::part(base) {
+      gap: 0;
+    }
+
+    &::part(label) {
+      margin-bottom: 1rem;
+    }
+  }
+`;

package/dist/components/joined-fields/joined-fields.component.d.ts

@@ -0,0 +1,16 @@
+import { LitElement, TemplateResult, CSSResultGroup } from "lit";
+import "../../components/input-field/input-field.js";
+export declare class CorasJoinedFields extends LitElement {
+    static styles: CSSResultGroup;
+    assetsURL: string;
+    rounded: boolean;
+    label: string;
+    description: string;
+    helpText: string;
+    error: boolean;
+    validated: boolean;
+    renderLabel(): TemplateResult<1>;
+    renderDescription(): TemplateResult<1>;
+    renderHelpText(): TemplateResult<1>;
+    render(): TemplateResult;
+}

package/dist/components/joined-fields/joined-fields.component.js

@@ -0,0 +1,93 @@
+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 } from "lit/decorators.js";
+import styles from "./joined-fields.styles.js";
+import "../../components/input-field/input-field.js";
+export class CorasJoinedFields extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.rounded = false;
+        this.label = "";
+        this.description = "";
+        this.helpText = "";
+        this.error = false;
+        this.validated = false;
+    }
+    static { this.styles = styles; }
+    renderLabel() {
+        return this.label
+            ? html `<label data-testid="label">${this.label}</label>`
+            : html ``;
+    }
+    renderDescription() {
+        return this.description
+            ? html `
+          <div class="description" data-testid="description">
+            ${this.description}
+          </div>
+        `
+            : html ``;
+    }
+    renderHelpText() {
+        return this.helpText
+            ? html `
+          <div
+            class="help-text ${this.validated && this.error ? "error" : ""}"
+            data-testid="helper-text"
+          >
+            ${this.helpText}
+          </div>
+        `
+            : html ``;
+    }
+    render() {
+        return html `
+      <div class="container" part="container">
+        ${this.renderLabel()} ${this.renderDescription()}
+        <div
+          class="fields-container ${this.rounded ? "rounded" : ""} ${this
+            .validated && this.error
+            ? "error"
+            : ""} ${this.validated && !this.error ? "valid" : ""}"
+          part="fields-container"
+        >
+          <div class="left-field">
+            <slot name="left"></slot>
+          </div>
+          <div class="divider"></div>
+          <div class="right-field">
+            <slot name="right"></slot>
+          </div>
+        </div>
+        ${this.renderHelpText()}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasJoinedFields.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasJoinedFields.prototype, "rounded", void 0);
+__decorate([
+    property({ type: String })
+], CorasJoinedFields.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], CorasJoinedFields.prototype, "description", void 0);
+__decorate([
+    property({ type: String, attribute: "help-text" })
+], CorasJoinedFields.prototype, "helpText", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasJoinedFields.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasJoinedFields.prototype, "validated", void 0);

package/dist/components/joined-fields/joined-fields.d.ts

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

package/dist/components/joined-fields/joined-fields.js

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

package/dist/components/joined-fields/joined-fields.styles.d.ts

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

package/dist/components/joined-fields/joined-fields.styles.js

@@ -0,0 +1,101 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --field-label-font-size: var(--coras-font-size-base);
+    --field-label-line-height: var(--coras-font-size-2xl);
+    --field-label-color: var(--coras-color-text);
+    --field-description-font-size: var(--coras-font-size-xxs);
+    --field-description-line-height: var(--coras-font-size-sm);
+    --field-description-color: var(--coras-color-text);
+    --field-helper-text-font-size: var(--coras-font-size-xxs);
+    --field-helper-text-line-height: var(--coras-font-size-sm);
+    --field-helper-text-color: var(--coras-color-text);
+    --field-input-border-color: var(--coras-color-neutral-400);
+    --field-input-border-radius: var(--coras-radius-field);
+    --field-input-error-color: var(--coras-color-error-500);
+    --field-input-valid-color: var(--coras-color-success-500);
+    --field-input-focused-border-color: var(--coras-color-primary-500);
+
+    display: block;
+    width: 100%;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    row-gap: 0.2rem;
+    width: 100%;
+
+    label {
+      font-size: var(--field-label-font-size);
+      line-height: var(--field-label-line-height);
+      color: var(--field-label-color);
+      max-width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-bottom: var(--field-label-bottom-margin, 0);
+    }
+
+    .description {
+      font-size: var(--field-description-font-size);
+      line-height: var(--field-description-line-height);
+      color: var(--field-description-color);
+    }
+
+    .fields-container {
+      display: flex;
+      border: 1px solid var(--field-input-border-color);
+      border-radius: var(--field-input-border-radius);
+      background-color: var(--coras-color-surface);
+      box-shadow: var(--field-input-box-shadow, none);
+      position: relative;
+      width: 100%;
+      overflow: hidden;
+
+      &.rounded {
+        border-radius: 100px;
+      }
+
+      &.error {
+        border-color: var(--field-input-error-color);
+      }
+
+      &.valid {
+        border-color: var(--field-input-valid-color);
+      }
+
+      .left-field,
+      .right-field {
+        flex: 1;
+        display: flex;
+      }
+
+      .left-field ::slotted(*),
+      .right-field ::slotted(*) {
+        width: 100%;
+        --field-input-border-color: transparent;
+        --field-input-border-radius: 0;
+        --field-input-box-shadow: none;
+      }
+
+      .divider {
+        width: 1px;
+        background-color: var(--field-input-border-color);
+      }
+    }
+
+    .help-text {
+      font-size: var(--field-helper-text-font-size);
+      line-height: var(--field-helper-text-line-height);
+      color: var(--field-helper-text-color);
+
+      &.error {
+        color: var(--field-input-error-color);
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,10 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../../contexts/basket/basket.js";
+export declare class CorasLayout extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * Whether to include the basket provider wrapper.
+     */
+    withBasket: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/layout/layout.component.js

@@ -0,0 +1,34 @@
+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 { when } from "lit/directives/when.js";
+import styles from "./layout.styles.js";
+import "../../contexts/basket/basket.js";
+export class CorasLayout extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether to include the basket provider wrapper.
+         */
+        this.withBasket = true;
+    }
+    static { this.styles = styles; }
+    render() {
+        const content = html `
+      <slot name="navbar"></slot>
+      <main>
+        <slot></slot>
+      </main>
+      <slot name="footer"></slot>
+    `;
+        return when(this.withBasket, () => html `<coras-basket-provider>${content}</coras-basket-provider>`, () => html `<div>${content}</div>`);
+    }
+}
+__decorate([
+    property({ type: Boolean, attribute: "with-basket" })
+], CorasLayout.prototype, "withBasket", void 0);

package/dist/components/layout/layout.d.ts

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

package/dist/components/layout/layout.js

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

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

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

package/dist/components/layout/layout.styles.js

@@ -0,0 +1,31 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+    width: 100%;
+  }
+
+  coras-basket-provider,
+  div {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    height: 100%;
+    width: 100%;
+    grid-row-gap: 2rem;
+
+    main {
+      /* Page-level query container; components target \`@container coras-page\`. */
+      container: coras-page / inline-size;
+      max-width: var(--coras-page-max-width);
+      width: 100%;
+      height: 100%;
+      margin: 0 auto;
+      padding: var(--coras-content-padding);
+    }
+  }
+`;

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

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

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

@@ -0,0 +1,30 @@
+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 } from "lit/decorators.js";
+import "../../icon/icon.js";
+import styles from "./list-item.styles.js";
+export class CorasListItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.icon = "pin-drop";
+    }
+    static { this.styles = styles; }
+    render() {
+        return html `<div class="item">
+      <coras-icon assets-url="${this.assetsURL}" icon=${this.icon}></coras-icon>
+      <div class="label" part="label"><slot></slot></div>
+    </div>`;
+    }
+}
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasListItem.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: String })
+], CorasListItem.prototype, "icon", void 0);

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+import { css } from "lit";
+import component from "../../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --list-icon-color: var(--coras-color-text);
+    --list-label-color: var(--coras-color-text);
+    --list-label-font-size: var(--coras-font-size-base);
+    --list-label-font-weight: var(--coras-font-weight-medium);
+  }
+
+  .item {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+
+    coras-icon {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    coras-icon::part(svg) {
+      fill: var(--list-icon-color);
+    }
+
+    .label {
+      color: var(--list-label-color);
+      font-size: var(--list-label-font-size);
+      font-weight: var(--list-label-font-weight);
+      line-height: 1.375rem;
+    }
+  }
+`;

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

@@ -0,0 +1,6 @@
+import { CSSResultGroup, LitElement } from "lit";
+export declare class CorasList extends LitElement {
+    static styles: CSSResultGroup;
+    label: string;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,25 @@
+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 } from "lit/decorators.js";
+import styles from "./list.styles.js";
+export class CorasList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+    }
+    static { this.styles = styles; }
+    render() {
+        return html `<div class="list" part="base">
+      <div class="label" part="label">${this.label}</div>
+      <slot></slot>
+    </div>`;
+    }
+}
+__decorate([
+    property({ type: String })
+], CorasList.prototype, "label", void 0);

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

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

package/dist/components/list/list.js

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

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

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

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

@@ -0,0 +1,24 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --list-label-color: var(--coras-color-text);
+    --list-label-font-size: var(--coras-font-size-xl);
+    --list-label-font-weight: var(--coras-font-weight-semibold);
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    .label {
+      color: var(--list-label-color);
+      font-size: var(--list-label-font-size);
+      font-weight: var(--list-label-font-weight);
+      line-height: 1.875rem;
+    }
+  }
+`;

package/dist/components/loading-spinner/loading-spinner.component.d.ts

@@ -0,0 +1,7 @@
+import { CSSResultGroup, LitElement } from "lit";
+import { LoadingSpinnerSize } from "./loading-spinner.types.js";
+export declare class CorasLoadingSpinner extends LitElement {
+    static styles: CSSResultGroup;
+    size: LoadingSpinnerSize;
+    render(): import("lit").TemplateResult<1>;
+}