@coras-io/embed 0.1.0

package/dist/components/button/button.component.js

@@ -0,0 +1,156 @@
+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, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { when } from "lit/directives/when.js";
+import styles from "./button.styles.js";
+import "../loading-spinner/loading-spinner.js";
+export class CorasButton extends LitElement {
+    static { this.formAssociated = true; }
+    static { this.styles = styles; }
+    constructor() {
+        super();
+        this.type = "button";
+        this.variant = "primary";
+        this.disabled = false;
+        this.radius = "large";
+        this.height = "md";
+        this.rotateSuffix = false;
+        this.borderColor = "none";
+        this.expanded = false;
+        this.shadow = true;
+        this.background = false;
+        this.clickable = true;
+        this.error = false;
+        this.loading = false;
+        // TODO: Skip if not required
+        this.internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.type === "submit") {
+            this.addEventListener("click", this.handleHostClick);
+        }
+    }
+    disconnectedCallback() {
+        if (this.type === "submit") {
+            this.removeEventListener("click", this.handleHostClick);
+        }
+        super.disconnectedCallback();
+    }
+    // TODO: Do we need it? When is it used?
+    click() {
+        if (!this.disabled && this.clickable && !this.loading) {
+            this.button.click();
+        }
+    }
+    handleHostClick(event) {
+        if (this.disabled || !this.clickable || this.loading) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            return;
+        }
+        if (this.type === "submit") {
+            const form = this.internals.form;
+            if (form) {
+                form.requestSubmit();
+            }
+        }
+    }
+    computeClasses() {
+        const hasPrefix = this.querySelector('[slot="prefix"]') !== null;
+        const hasSuffix = this.querySelector('[slot="suffix"]') !== null;
+        return {
+            primary: this.variant === "primary",
+            secondary: this.variant === "secondary",
+            outlined: this.variant === "outlined",
+            text: this.variant === "text",
+            transparent: this.variant === "transparent",
+            "radius-small": this.radius === "small",
+            "radius-large": this.radius === "large",
+            "radius-circle": this.radius === "circle",
+            "radius-chip": this.radius === "chip",
+            "height-xs": this.height === "xs",
+            "height-sm": this.height === "sm",
+            "height-md": this.height === "md",
+            "height-lg": this.height === "lg",
+            "height-xl": this.height === "xl",
+            "rotate-suffix": this.rotateSuffix,
+            "border-none": this.borderColor === "none",
+            "border-light": this.borderColor === "light",
+            "border-medium": this.borderColor === "medium",
+            expanded: this.expanded,
+            "has-prefix": hasPrefix,
+            "has-suffix": hasSuffix,
+            "no-shadow": !this.shadow,
+            "with-background": this.background,
+            "not-clickable": !this.clickable,
+            error: this.error,
+            loading: this.loading,
+        };
+    }
+    render() {
+        return html `
+      <button
+        part="base"
+        type="${this.type}"
+        ?disabled="${this.disabled || this.loading}"
+        aria-disabled="${this.disabled || this.loading ? "true" : "false"}"
+        class="${classMap(this.computeClasses())}"
+      >
+        ${when(this.loading, () => html `<coras-loading-spinner size="small"></coras-loading-spinner>`, () => html `
+            <slot name="prefix" part="prefix"></slot>
+            <slot part="label"></slot>
+            <slot name="suffix" part="suffix"></slot>
+          `)}
+      </button>
+    `;
+    }
+}
+__decorate([
+    query("button")
+], CorasButton.prototype, "button", void 0);
+__decorate([
+    property({ type: String })
+], CorasButton.prototype, "type", void 0);
+__decorate([
+    property()
+], CorasButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasButton.prototype, "disabled", void 0);
+__decorate([
+    property()
+], CorasButton.prototype, "radius", void 0);
+__decorate([
+    property()
+], CorasButton.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "rotate-suffix" })
+], CorasButton.prototype, "rotateSuffix", void 0);
+__decorate([
+    property({ attribute: "border-color" })
+], CorasButton.prototype, "borderColor", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasButton.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasButton.prototype, "shadow", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasButton.prototype, "background", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasButton.prototype, "clickable", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasButton.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasButton.prototype, "loading", void 0);

package/dist/components/button/button.constants.d.ts

@@ -0,0 +1,5 @@
+export declare const variants: string[];
+export declare const radius: readonly ["small", "large", "circle", "chip"];
+export declare const height: readonly ["xs", "sm", "md", "lg", "xl"];
+export declare const borderColor: readonly ["none", "light", "medium"];
+export declare const expanded: readonly [true, false];

package/dist/components/button/button.constants.js

@@ -0,0 +1,11 @@
+export const variants = [
+    "primary",
+    "secondary",
+    "outlined",
+    "text",
+    "transparent",
+];
+export const radius = ["small", "large", "circle", "chip"];
+export const height = ["xs", "sm", "md", "lg", "xl"];
+export const borderColor = ["none", "light", "medium"];
+export const expanded = [true, false];

package/dist/components/button/button.d.ts

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

package/dist/components/button/button.js

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

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

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

package/dist/components/button/button.styles.js

@@ -0,0 +1,356 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --button-border-radius: var(--coras-radius-button);
+    --button-border-radius-small: var(--coras-radius-sm);
+    --button-border-radius-large: var(--coras-radius-button);
+    --button-border-radius-chip: var(--coras-radius-chip);
+    --button-box-shadow: var(--coras-shadow-md);
+    --button-font-weight: var(--coras-font-weight-normal);
+
+    --button-primary-text-color: var(--coras-button-primary-text-color);
+    --button-primary-text-color-disabled: var(--coras-color-neutral-500);
+    --button-primary-background: var(--coras-button-primary-background);
+    --button-primary-background-hover: var(
+      --coras-button-primary-background-hover
+    );
+    --button-primary-background-active: var(
+      --coras-button-primary-background-active
+    );
+    --button-primary-background-disabled: var(--coras-color-neutral-200);
+
+    --button-secondary-color: var(--coras-palette-white);
+    --button-secondary-color-disabled: var(--coras-color-neutral-500);
+    --button-secondary-background-color: var(--coras-color-secondary-500);
+    --button-secondary-background-color-hover: var(--coras-color-secondary-400);
+    --button-secondary-background-color-active: var(
+      --coras-color-secondary-500
+    );
+    --button-secondary-background-color-disabled: var(
+      --coras-color-neutral-200
+    );
+
+    --button-outlined-color: var(--coras-color-text);
+    --button-outlined-color-disabled: var(--coras-color-neutral-500);
+    --button-outlined-background-color: var(--coras-color-surface);
+    --button-outlined-background-color-hover: var(--coras-color-surface-hover);
+    --button-outlined-background-color-active: var(--coras-color-surface);
+    --button-outlined-background-color-disabled: var(--coras-color-surface);
+    --button-outlined-border-color: var(--coras-color-neutral-600);
+    --button-outlined-border-color-disabled: var(--coras-color-neutral-400);
+
+    --button-text-color: var(--coras-color-text-button);
+    --button-text-color-disabled: var(--coras-color-neutral-500);
+    --button-text-background-color: transparent;
+    --button-text-background-color-hover: var(--coras-color-primary-100);
+    --button-text-background-color-active: var(--coras-color-primary-500);
+    --button-text-background-color-disabled: transparent;
+    --button-text-font-weight: var(--coras-font-weight-semibold);
+
+    --button-transparent-color: var(--coras-palette-white);
+    --button-transparent-color-disabled: var(--coras-color-neutral-500);
+    --button-transparent-border-color-disabled: var(--coras-color-neutral-500);
+    --button-transparent-background-color: transparent;
+    --button-transparent-background-color-hover: var(--coras-color-primary-100);
+    --button-transparent-background-color-active: var(
+      --coras-color-primary-100
+    );
+    --button-transparent-border-color: var(--coras-palette-white);
+    --button-transparent-color-hover: var(--coras-color-text);
+    --button-transparent-color-active: var(--coras-color-primary-500);
+    --button-transparent-border-color-active: var(--coras-color-primary-500);
+
+    --button-small-font-size: var(--coras-font-size-sm);
+    --button-medium-font-size: 1em;
+    --button-large-font-size: 1.2em;
+
+    --button-background-color: var(--coras-color-primary-50);
+
+    --button-error-color: var(--coras-color-error-700);
+    --button-error-border-color: var(--coras-color-error-700);
+
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    width: auto;
+  }
+
+  :host([expanded]) {
+    display: block;
+    width: 100%;
+  }
+
+  :host(:not([clickable])) {
+    pointer-events: none;
+  }
+
+  button {
+    align-items: center;
+    background-color: transparent;
+    border-radius: var(--button-border-radius);
+    border: 1px solid transparent;
+    box-shadow: var(--button-box-shadow);
+    cursor: inherit;
+    display: inline-flex;
+    font-size: 1em;
+    font-weight: var(--button-font-weight);
+    gap: 0.5em;
+    justify-content: center;
+    letter-spacing: 0.01em;
+    line-height: 0.875rem;
+    padding: 0.75rem 1.25rem;
+    white-space: nowrap;
+    width: 100%;
+
+    &.has-prefix.has-suffix {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &.has-prefix,
+    &.has-suffix {
+      justify-content: flex-start;
+      gap: 0.5em;
+
+      ::slotted([slot="suffix"]) {
+        margin-left: auto;
+      }
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    &.primary {
+      background: var(--button-primary-background);
+      color: var(--button-primary-text-color);
+
+      &:hover:not([disabled]) {
+        background: var(--button-primary-background-hover);
+      }
+
+      &:active:not([disabled]) {
+        background: var(--button-primary-background-active);
+        box-shadow: none;
+      }
+
+      &:disabled {
+        background: var(--button-primary-background-disabled);
+        color: var(--button-primary-text-color-disabled);
+
+        ::slotted(coras-icon) {
+          fill: var(--button-primary-text-color-disabled);
+        }
+      }
+
+      ::slotted(coras-icon) {
+        fill: var(--button-primary-text-color);
+      }
+    }
+
+    &.secondary {
+      background-color: var(--button-secondary-background-color);
+      color: var(--button-secondary-color);
+
+      &:hover:not([disabled]) {
+        background-color: var(--button-secondary-background-color-hover);
+      }
+
+      &:active:not([disabled]) {
+        background-color: var(--button-secondary-background-color-active);
+        box-shadow: none;
+      }
+
+      &:disabled {
+        background-color: var(--button-secondary-background-color-disabled);
+        color: var(--button-secondary-color-disabled);
+
+        ::slotted(coras-icon) {
+          fill: var(--button-secondary-color-disabled);
+        }
+      }
+
+      ::slotted(coras-icon) {
+        fill: var(--button-secondary-color);
+      }
+    }
+
+    &.outlined {
+      background-color: var(--button-outlined-background-color);
+      border: 1px solid var(--button-outlined-border-color);
+      color: var(--button-outlined-color);
+
+      &:hover:not([disabled]) {
+        background-color: var(--button-outlined-background-color-hover);
+      }
+
+      &:active:not([disabled]) {
+        background-color: var(--button-outlined-background-color-active);
+        box-shadow: none;
+      }
+
+      &:disabled {
+        background-color: var(--button-outlined-background-color-disabled);
+        border: 1px solid var(--button-outlined-border-color-disabled);
+        color: var(--button-outlined-color-disabled);
+
+        ::slotted(coras-icon) {
+          fill: var(--button-outlined-color-disabled);
+        }
+      }
+    }
+
+    &.text {
+      box-shadow: none;
+      color: var(--button-text-color);
+      font-weight: var(--button-text-font-weight);
+      font-size: 1rem;
+
+      &:hover:not([disabled]) {
+        background-color: var(--button-text-background-color-hover);
+      }
+
+      &:active:not([disabled]) {
+        color: var(--button-text-background-color-active);
+      }
+
+      &:disabled {
+        color: var(--button-text-color-disabled);
+
+        ::slotted(coras-icon) {
+          fill: var(--button-text-color-disabled);
+        }
+      }
+
+      ::slotted(coras-icon) {
+        fill: var(--button-text-color);
+      }
+    }
+
+    &.transparent {
+      box-shadow: var(--coras-shadow-md);
+      border-color: var(--button-transparent-border-color);
+      color: var(--button-transparent-color);
+      font-size: 1rem;
+      background-color: var(--button-transparent-background-color);
+
+      &:hover:not([disabled]) {
+        background-color: var(--button-transparent-background-color-hover);
+        color: var(--button-transparent-color-hover);
+
+        ::slotted(coras-icon) {
+          fill: var(--button-transparent-color-hover);
+        }
+      }
+
+      &:active:not([disabled]) {
+        background-color: var(--button-transparent-background-color-active);
+        color: var(--button-transparent-color-active);
+        border-color: var(--button-transparent-border-color-active);
+
+        ::slotted(coras-icon) {
+          fill: var(--button-transparent-color-active);
+        }
+      }
+
+      &:disabled {
+        color: var(--button-transparent-color-disabled);
+        border-color: var(--button-transparent-border-color-disabled);
+
+        ::slotted(coras-icon) {
+          fill: var(--button-transparent-color-disabled);
+        }
+      }
+
+      ::slotted(coras-icon) {
+        fill: var(--button-transparent-color);
+      }
+    }
+
+    &.radius-small {
+      border-radius: var(--button-border-radius-small);
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+    }
+
+    &.radius-large {
+      border-radius: var(--button-border-radius-large);
+    }
+
+    &.radius-chip {
+      border-radius: var(--button-border-radius-chip);
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+    }
+
+    &.radius-circle {
+      border-radius: 50%;
+      font-size: 1.4em;
+      padding: 0.5rem;
+    }
+
+    &.height-xs {
+      height: 36px;
+    }
+
+    &.height-sm {
+      height: 40px;
+    }
+
+    &.height-md {
+      height: 42px;
+    }
+
+    &.height-lg {
+      height: 52px;
+    }
+
+    &.height-xl {
+      height: 56px;
+    }
+
+    &.rotate-suffix {
+      ::slotted([slot="suffix"]) {
+        transform: rotate(180deg);
+        transition: transform 0.2s ease;
+      }
+    }
+
+    &.border-none {
+      border-color: transparent;
+    }
+
+    &.border-light {
+      border-color: var(--coras-color-neutral-300);
+    }
+
+    &.border-medium {
+      border-color: var(--coras-color-neutral-600);
+    }
+
+    &.no-shadow {
+      box-shadow: none;
+    }
+
+    &.with-background {
+      background-color: var(--button-background-color);
+    }
+
+    &.error {
+      border-color: var(--coras-color-error-700);
+      color: var(--coras-color-error-700);
+
+      ::slotted(coras-icon) {
+        fill: var(--coras-color-error-700);
+      }
+    }
+
+    > ::slotted(coras-icon::part(svg)) {
+      width: 1.4em;
+      height: 1.4em;
+    }
+  }
+`;

package/dist/components/calendar/base/calendar.mixin.d.ts

@@ -0,0 +1,3 @@
+import { LitElement } from "lit";
+import { BaseCalendarMixinInterface, Constructor } from "./calendar.types.js";
+export declare const BaseCalendarMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<BaseCalendarMixinInterface> & T;