@coras-io/embed 0.1.0

package/dist/components/input-field/input-field.component.js

@@ -0,0 +1,331 @@
+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 { fireInternalEvent } from "../../core/events.js";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import styles from "./input-field.styles.js";
+import "../icon/icon.js";
+export class CorasInputField extends LitElement {
+    static { this.formAssociated = true; }
+    static { this.styles = styles; }
+    constructor() {
+        super();
+        this.assetsURL = "";
+        this.type = "text";
+        this.autocomplete = "off";
+        this.name = "";
+        this.value = "";
+        this.label = "";
+        this.description = "";
+        this.placeholder = "";
+        this.helpText = "";
+        this.disabled = false;
+        this.clearable = false;
+        this.divider = false;
+        this.rounded = false;
+        this.compact = false;
+        this.isTextarea = false;
+        this.rows = 8;
+        this.validated = false;
+        this.error = false;
+        this.validationIcon = false;
+        this.customField = false;
+        this.readonly = false;
+        this.select = false;
+        this.borderless = false;
+        this.isFocused = false;
+        this.hasPrefixContent = false;
+        this.hasSuffixContent = false;
+        this.internals = this.attachInternals();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("value")) {
+            this.internals.setFormValue(this.value);
+        }
+    }
+    _onInput(event) {
+        const target = event.target;
+        const newValue = target.value;
+        this.internals.setFormValue(newValue);
+        fireInternalEvent(this, "value-changed", { value: target.value });
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    _onClear() {
+        fireInternalEvent(this, "value-changed", { value: "" });
+        this.focus();
+    }
+    focus(options) {
+        this.isFocused = true;
+        this.inputElement?.focus(options);
+    }
+    blur() {
+        this.isFocused = false;
+        this.inputElement?.blur();
+    }
+    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 ``;
+    }
+    renderField() {
+        return this.isTextarea
+            ? html `
+          <textarea
+            rows=${this.rows}
+            placeholder=${this.placeholder}
+            autocomplete="${this.autocomplete}"
+            name=${this.name}
+            @input=${this._onInput}
+            @focus=${this.focus}
+            @blur=${this.blur}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            class="${classMap({
+                error: this.validated && this.error,
+            })}"
+          >
+${this.value}</textarea
+          >
+        `
+            : html `<input
+          type=${this.type}
+          autocomplete="${this.autocomplete}"
+          placeholder=${this.placeholder}
+          name=${this.name}
+          .value=${this.value}
+          @input=${this._onInput}
+          @focus=${this.focus}
+          @blur=${this.blur}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          class="${classMap({
+                error: this.validated && this.error,
+                compact: this.compact,
+            })}"
+        />`;
+    }
+    renderClearIcon() {
+        return this.clearable && this.value
+            ? html `<div class="clear-icon">
+          <coras-icon
+            assets-url="${this.assetsURL}"
+            icon="close-circle"
+            label="clear"
+            @click=${this._onClear}
+          ></coras-icon>
+        </div> `
+            : "";
+    }
+    renderIcon() {
+        const icon = this.error ? "error" : "success";
+        return html `<coras-icon
+      assets-url="${this.assetsURL}"
+      icon=${icon}
+    ></coras-icon>`;
+    }
+    renderValidationIcon() {
+        if (!this.validationIcon || !this.validated) {
+            return html ``;
+        }
+        return html `<div
+      class="${classMap({
+            "validation-icon": true,
+            textarea: this.isTextarea,
+            success: !this.error,
+            error: this.validated && this.error,
+        })}"
+    >
+      ${this.renderIcon()}
+    </div>`;
+    }
+    renderHelpText() {
+        return this.helpText
+            ? html `
+          <div
+            class="${classMap({
+                "help-text": true,
+                error: this.validated && this.error,
+            })}"
+            data-testid="helper-text"
+          >
+            ${this.helpText}
+          </div>
+        `
+            : html ``;
+    }
+    _handleSlots() {
+        const prefix = this.shadowRoot?.querySelector('slot[name="prefix"]');
+        const suffix = this.shadowRoot?.querySelector('slot[name="suffix"]');
+        this.hasPrefixContent =
+            (prefix?.assignedNodes({ flatten: true })?.length ?? 0) > 0;
+        this.hasSuffixContent =
+            (suffix?.assignedNodes({ flatten: true })?.length ?? 0) > 0;
+    }
+    firstUpdated() {
+        void this.updateComplete.then(() => this._handleSlots());
+    }
+    renderPrefix() {
+        return html `
+      <div
+        class=${classMap({
+            prefix: true,
+            rounded: this.rounded,
+            divider: this.divider,
+        })}
+        ?hidden=${!this.hasPrefixContent}
+      >
+        <slot name="prefix"></slot>
+      </div>
+    `;
+    }
+    renderSuffix() {
+        return html `
+      <div
+        class=${classMap({
+            suffix: true,
+            rounded: this.rounded,
+            divider: this.divider,
+        })}
+        ?hidden=${!this.hasSuffixContent}
+      >
+        <slot name="suffix"></slot>
+      </div>
+    `;
+    }
+    renderInputOrField() {
+        if (this.customField) {
+            return html `<slot></slot>`;
+        }
+        else {
+            return this.renderField();
+        }
+    }
+    render() {
+        if (this.customField) {
+            return html `
+        <div class="container">
+          ${this.renderLabel()} ${this.renderDescription()}
+          <slot></slot>
+          ${this.renderHelpText()}
+        </div>
+      `;
+        }
+        return html `
+      <div class="container">
+        ${this.renderLabel()} ${this.renderDescription()}
+        <div
+          class=${classMap({
+            "input-wrapper": true,
+            error: this.validated && this.error,
+            valid: this.validated && !this.error,
+            rounded: this.rounded,
+            prefix: this.hasPrefixContent,
+            disabled: this.disabled,
+            select: this.select,
+            borderless: this.borderless,
+        })}
+          @click=${this.focus}
+        >
+          ${this.renderPrefix()} ${this.renderInputOrField()}
+          ${this.renderClearIcon()} ${this.renderValidationIcon()}
+          ${this.renderSuffix()}
+        </div>
+
+        ${this.renderHelpText()}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasInputField.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: String })
+], CorasInputField.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], CorasInputField.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: String })
+], CorasInputField.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], CorasInputField.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], CorasInputField.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], CorasInputField.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], CorasInputField.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String, attribute: "help-text" })
+], CorasInputField.prototype, "helpText", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasInputField.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasInputField.prototype, "clearable", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasInputField.prototype, "divider", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasInputField.prototype, "rounded", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasInputField.prototype, "compact", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "is-textarea" })
+], CorasInputField.prototype, "isTextarea", void 0);
+__decorate([
+    property({ type: Number })
+], CorasInputField.prototype, "rows", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasInputField.prototype, "validated", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasInputField.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "validation-icon" })
+], CorasInputField.prototype, "validationIcon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "custom-field" })
+], CorasInputField.prototype, "customField", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasInputField.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasInputField.prototype, "select", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "borderless" })
+], CorasInputField.prototype, "borderless", void 0);
+__decorate([
+    query("input, textarea")
+], CorasInputField.prototype, "inputElement", void 0);
+__decorate([
+    state()
+], CorasInputField.prototype, "hasPrefixContent", void 0);
+__decorate([
+    state()
+], CorasInputField.prototype, "hasSuffixContent", void 0);

package/dist/components/input-field/input-field.d.ts

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

package/dist/components/input-field/input-field.js

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

package/dist/components/input-field/input-field.styles.d.ts

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

package/dist/components/input-field/input-field.styles.js

@@ -0,0 +1,274 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --input-field-background-color: var(--coras-input-field-background-color);
+
+    --input-border-color: var(--coras-color-neutral-400);
+    --input-font-size: var(--coras-font-size-base);
+    --input-placeholder-color: var(--coras-color-text-secondary);
+    --input-background-color-focus: var(--coras-color-primary-100);
+
+    --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-font-size: var(--coras-font-size-base);
+    --field-input-line-height: var(--coras-font-size-2xl);
+    --field-input-color: var(--coras-color-text);
+    --field-input-height: 3.2rem;
+    --field-input-padding-left: 1rem;
+    --field-input-padding-right: 1rem;
+    --field-input-font-weight: inherit;
+    --field-input-border-color: var(--coras-color-neutral-400);
+    --field-input-border-radius: var(--coras-radius-field);
+    --field-input-placeholder-color: var(--coras-color-text-secondary);
+    --field-input-disabled-color: var(--coras-color-neutral-500);
+    --field-input-disabled-background-color: var(--coras-color-neutral-50);
+    --field-input-error-color: var(--coras-color-error-500);
+    --field-input-error-helper-text-color: var(--coras-color-error-500);
+    --field-input-valid-color: var(--coras-color-success-500);
+    --field-input-shadow: var(--coras-shadow-md);
+    --field-input-focused-border-color: var(--coras-color-primary-500);
+
+    --text-field-icon-color-valid: var(--coras-color-success-500);
+    --text-field-icon-color-error: var(--coras-color-error-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);
+    }
+
+    .input-wrapper {
+      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;
+
+      &.disabled {
+        pointer-events: none;
+        background-color: var(--field-input-disabled-background-color);
+        color: var(--field-input-disabled-color);
+      }
+
+      &.select {
+        cursor: pointer;
+
+        input,
+        textarea {
+          cursor: pointer;
+          caret-color: transparent;
+        }
+      }
+
+      &.error {
+        border-color: var(--text-field-icon-color-error);
+      }
+
+      &.valid {
+        border-color: var(--field-input-valid-color);
+      }
+
+      &.rounded {
+        border-radius: 100px;
+
+        input,
+        textarea {
+          border-radius: 100px;
+        }
+      }
+
+      &.borderless {
+        border: none;
+      }
+
+      .prefix {
+        display: flex;
+        white-space: nowrap;
+        justify-content: center;
+        align-items: center;
+        border-radius: var(--field-input-border-radius) 0 0
+          var(--field-input-border-radius);
+        padding-left: 1rem;
+        overflow: hidden;
+
+        &.divider {
+          border-right: 1px solid var(--field-input-border-color);
+        }
+
+        ::slotted(coras-icon) {
+          fill: var(--coras-color-text);
+        }
+      }
+
+      .suffix {
+        display: flex;
+        white-space: nowrap;
+        justify-content: center;
+        align-items: center;
+        border-radius: 0 var(--field-input-border-radius)
+          var(--field-input-border-radius) 0;
+        padding-right: 1rem;
+        overflow: hidden;
+
+        &.divider {
+          border-left: 1px solid var(--field-input-border-color);
+        }
+      }
+
+      .validation-icon {
+        display: flex;
+        white-space: nowrap;
+        justify-content: center;
+        align-items: center;
+        padding-right: 1rem;
+
+        coras-icon {
+          width: 1.3rem;
+          height: 1.3rem;
+        }
+
+        &.textarea {
+          position: absolute;
+          top: 1rem;
+          right: 0;
+          padding-right: 1rem;
+          z-index: 1;
+          align-items: flex-start;
+        }
+
+        &.success {
+          coras-icon {
+            fill: var(--text-field-icon-color-valid);
+          }
+        }
+
+        &.error {
+          coras-icon {
+            fill: var(--text-field-icon-color-error);
+          }
+        }
+      }
+
+      .clear-icon {
+        display: flex;
+        white-space: nowrap;
+        justify-content: center;
+        align-items: center;
+        padding-right: 0.5rem;
+
+        coras-icon {
+          width: 1rem;
+          height: 1rem;
+        }
+      }
+
+      input,
+      ::slotted(#input) {
+        height: var(--field-input-height);
+        padding-left: var(--field-input-padding-left);
+        padding-right: var(--field-input-padding-right);
+      }
+
+      textarea {
+        resize: vertical;
+        padding: 1rem 3rem 1rem 1rem;
+        min-height: 4rem;
+      }
+
+      input,
+      ::slotted(#input),
+      textarea {
+        flex: 1;
+        outline: none;
+        width: 100%;
+        box-sizing: border-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        font-size: var(--field-input-font-size);
+        line-height: var(--field-input-line-height);
+        color: var(--field-input-color);
+        font-weight: var(--field-input-font-weight);
+        border: none;
+        background-color: var(--coras-color-surface);
+        border-radius: var(--field-input-border-radius);
+
+        &.compact {
+          height: 2.625rem; /* 42px */
+        }
+
+        &:disabled {
+          pointer-events: none;
+          outline: none;
+          background-color: var(--field-input-disabled-background-color);
+          color: var(--field-input-disabled-color);
+        }
+
+        &.error {
+          color: var(--field-input-error-color);
+
+          &::placeholder {
+            color: var(--field-input-error-color);
+          }
+        }
+
+        &::placeholder {
+          color: var(--field-input-placeholder-color);
+          font-weight: var(--field-input-placeholder-font-weight, inherit);
+          font-size: var(--field-input-placeholder-font-size, inherit);
+        }
+
+        &:-webkit-autofill,
+        &:-webkit-autofill:hover,
+        &:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0px 1000px white inset;
+          -webkit-text-fill-color: var(--field-input-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/itinerary/itinerary-item/itinerary-item.component.d.ts

@@ -0,0 +1,9 @@
+import { CSSResultGroup, LitElement } from "lit";
+export declare class CorasItineraryItem extends LitElement {
+    static styles: CSSResultGroup;
+    label: string;
+    description: string;
+    footer: string;
+    private renderFooter;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,45 @@
+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 "./itinerary-item.styles.js";
+export class CorasItineraryItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+        this.description = "";
+        this.footer = "";
+    }
+    static { this.styles = styles; }
+    renderFooter() {
+        if (this.footer) {
+            return html `<div class="footer">${this.footer}</div>`;
+        }
+        return html ``;
+    }
+    render() {
+        return html `<div class="item">
+      <div class="header">
+        <div class="dot"></div>
+        <div class="label">${this.label}</div>
+      </div>
+      <div class="content" part="content">
+        <div class="description">${this.description}</div>
+        ${this.renderFooter()}
+      </div>
+    </div>`;
+    }
+}
+__decorate([
+    property({ type: String })
+], CorasItineraryItem.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], CorasItineraryItem.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], CorasItineraryItem.prototype, "footer", void 0);

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

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

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

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

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

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