@coras-io/embed 0.1.0

package/dist/components/categories-tree/categories-tree.component.js

@@ -0,0 +1,202 @@
+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, state } from "lit/decorators.js";
+import { CheckboxVariants } from "../checkbox/checkbox.constants.js";
+import "../checkbox/checkbox.js";
+import "../checkbox-group/checkbox-group.js";
+import styles from "./categories-tree.styles.js";
+export class CorasCategoriesTree extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.categories = [];
+        this._selectedSlugs = new Set();
+    }
+    static { this.styles = styles; }
+    get selectedCategories() {
+        return Array.from(this._selectedSlugs).sort().join(",");
+    }
+    set selectedCategories(value) {
+        const oldSlugs = new Set(this._selectedSlugs);
+        const inputSlugs = new Set(value
+            ?.split(",")
+            .filter(Boolean)
+            .map((s) => s.trim()) ?? []);
+        const newSlugs = new Set(inputSlugs);
+        for (const category of this.categories) {
+            if (!category.subcategories || category.subcategories.length === 0) {
+                continue;
+            }
+            const subcategorySlugs = category.subcategories.map((sub) => sub.slug);
+            if (inputSlugs.has(category.slug)) {
+                subcategorySlugs.forEach((slug) => newSlugs.add(slug));
+            }
+            else if (subcategorySlugs.length > 0 &&
+                subcategorySlugs.every((slug) => inputSlugs.has(slug))) {
+                newSlugs.add(category.slug);
+            }
+        }
+        if (oldSlugs.size !== newSlugs.size ||
+            ![...oldSlugs].every((slug) => newSlugs.has(slug)) ||
+            ![...newSlugs].every((slug) => oldSlugs.has(slug))) {
+            this._selectedSlugs = newSlugs;
+            this.requestUpdate("selectedCategories", oldSlugs);
+        }
+    }
+    getEventDetail() {
+        const result = new Set();
+        for (const category of this.categories) {
+            if (!category.subcategories || category.subcategories.length === 0) {
+                if (this._selectedSlugs.has(category.slug)) {
+                    result.add(category.slug);
+                }
+                continue;
+            }
+            const subcategorySlugs = category.subcategories.map((sub) => sub.slug);
+            const selectedSubcategories = subcategorySlugs.filter((slug) => this._selectedSlugs.has(slug));
+            if (this._selectedSlugs.has(category.slug) ||
+                (selectedSubcategories.length === subcategorySlugs.length &&
+                    subcategorySlugs.length > 0)) {
+                result.add(category.slug);
+            }
+            else {
+                selectedSubcategories.forEach((slug) => result.add(slug));
+            }
+        }
+        return Array.from(result).sort().join(",");
+    }
+    handleCheckboxChange(event) {
+        const detail = event.detail;
+        if (!detail)
+            return;
+        const checkbox = event.target;
+        const slug = checkbox.getAttribute("value") || "";
+        const isChecked = detail.value;
+        const isMainCategory = checkbox.getAttribute("data-type") !== "subcategory";
+        const workingSelectedSlugs = new Set(this._selectedSlugs);
+        let changed = false;
+        if (isMainCategory) {
+            const category = this.categories.find((cat) => cat.slug === slug);
+            const subcategorySlugs = category?.subcategories?.map((sub) => sub.slug) ?? [];
+            if (isChecked) {
+                if (!workingSelectedSlugs.has(slug)) {
+                    workingSelectedSlugs.add(slug);
+                    changed = true;
+                }
+                subcategorySlugs.forEach((subSlug) => {
+                    if (!workingSelectedSlugs.has(subSlug)) {
+                        workingSelectedSlugs.add(subSlug);
+                        changed = true;
+                    }
+                });
+            }
+            else {
+                if (workingSelectedSlugs.has(slug)) {
+                    workingSelectedSlugs.delete(slug);
+                    changed = true;
+                }
+                subcategorySlugs.forEach((subSlug) => {
+                    if (workingSelectedSlugs.has(subSlug)) {
+                        workingSelectedSlugs.delete(subSlug);
+                        changed = true;
+                    }
+                });
+            }
+        }
+        else {
+            const parentCategory = this.categories.find((cat) => cat.subcategories?.some((sub) => sub.slug === slug));
+            if (isChecked) {
+                if (!workingSelectedSlugs.has(slug)) {
+                    workingSelectedSlugs.add(slug);
+                    changed = true;
+                }
+                if (parentCategory) {
+                    const allSubcategoriesSelected = parentCategory.subcategories?.every((sub) => workingSelectedSlugs.has(sub.slug));
+                    if (allSubcategoriesSelected &&
+                        !workingSelectedSlugs.has(parentCategory.slug)) {
+                        workingSelectedSlugs.add(parentCategory.slug);
+                        changed = true;
+                    }
+                }
+            }
+            else {
+                if (workingSelectedSlugs.has(slug)) {
+                    workingSelectedSlugs.delete(slug);
+                    changed = true;
+                }
+                if (parentCategory && workingSelectedSlugs.has(parentCategory.slug)) {
+                    workingSelectedSlugs.delete(parentCategory.slug);
+                    changed = true;
+                }
+            }
+        }
+        if (changed) {
+            this._selectedSlugs = workingSelectedSlugs;
+            fireInternalEvent(this, "selection-changed", this.getEventDetail());
+        }
+    }
+    getParentCategoryStatus(category) {
+        if (!category.subcategories || category.subcategories.length === 0) {
+            return CheckboxVariants.REGULAR;
+        }
+        const subcategorySlugs = category.subcategories.map((sub) => sub.slug);
+        const selectedSubcategories = subcategorySlugs.filter((slug) => this._selectedSlugs.has(slug));
+        if (selectedSubcategories.length === 0) {
+            return CheckboxVariants.REGULAR;
+        }
+        else if (selectedSubcategories.length === subcategorySlugs.length) {
+            return CheckboxVariants.MAIN;
+        }
+        else {
+            return CheckboxVariants.INDETERMINATE;
+        }
+    }
+    render() {
+        return html `
+      <ul class="category-list">
+        ${this.categories.map((category) => html `
+            <li class="category-item">
+              <coras-checkbox-group>
+                <coras-checkbox
+                  slot="primary"
+                  label=${category.name}
+                  value="${category.slug}"
+                  variant=${this.getParentCategoryStatus(category)}
+                  ?checked=${this._selectedSlugs.has(category.slug)}
+                  @value-changed=${this.handleCheckboxChange}
+                ></coras-checkbox>
+
+                ${category.subcategories && category.subcategories.length > 0
+            ? html `
+                      ${category.subcategories.map((subcategory) => html `
+                          <coras-checkbox
+                            label=${subcategory.name}
+                            value="${subcategory.slug}"
+                            data-type="subcategory"
+                            ?checked=${this._selectedSlugs.has(subcategory.slug)}
+                            @value-changed=${this.handleCheckboxChange}
+                          ></coras-checkbox>
+                        `)}
+                    `
+            : ""}
+              </coras-checkbox-group>
+            </li>
+          `)}
+      </ul>
+    `;
+    }
+}
+__decorate([
+    property({ type: Array })
+], CorasCategoriesTree.prototype, "categories", void 0);
+__decorate([
+    property({ type: String })
+], CorasCategoriesTree.prototype, "selectedCategories", null);
+__decorate([
+    state()
+], CorasCategoriesTree.prototype, "_selectedSlugs", void 0);

package/dist/components/categories-tree/categories-tree.d.ts

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

package/dist/components/categories-tree/categories-tree.js

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

package/dist/components/categories-tree/categories-tree.styles.d.ts

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

package/dist/components/categories-tree/categories-tree.styles.js

@@ -0,0 +1,14 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  ul.category-list {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    row-gap: 3rem;
+  }
+`;

package/dist/components/category-tag/category-tag.component.d.ts

@@ -0,0 +1,12 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../icon/icon.js";
+import { Variants } from "./category-tag.types.js";
+export declare class CorasCategoryTag extends LitElement {
+    static styles: CSSResultGroup;
+    assetsURL: string;
+    variants: Variants;
+    variant: keyof typeof this.variants;
+    type: "icon" | "text";
+    private generateLabel;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/category-tag/category-tag.component.js

@@ -0,0 +1,78 @@
+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 "./category-tag.styles.js";
+let CorasCategoryTag = class CorasCategoryTag extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.variants = {
+            activity: {
+                label: () => msg("Activity"),
+                icon: "activity",
+            },
+            music: {
+                label: () => msg("Music"),
+                icon: "music",
+            },
+            sport: {
+                label: () => msg("Sport"),
+                icon: "sport",
+            },
+            theatre: {
+                label: () => msg("Theatre"),
+                icon: "theatre",
+            },
+        };
+        this.variant = "activity";
+        this.type = "text";
+    }
+    static { this.styles = styles; }
+    generateLabel() {
+        const { label, icon } = this.variants[this.variant] || this.variants["activity"];
+        return this.type === "icon"
+            ? html `
+          <coras-icon
+            assets-url="${this.assetsURL}"
+            icon="${icon}"
+            label="${label()}"
+          ></coras-icon>
+        `
+            : label();
+    }
+    render() {
+        return html `
+      <span
+        part="base"
+        class="${classMap({
+            tag: true,
+            icon: this.type === "icon",
+            [this.variant]: true,
+        })}"
+      >
+        ${this.generateLabel()}
+      </span>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasCategoryTag.prototype, "assetsURL", void 0);
+__decorate([
+    property()
+], CorasCategoryTag.prototype, "variant", void 0);
+__decorate([
+    property()
+], CorasCategoryTag.prototype, "type", void 0);
+CorasCategoryTag = __decorate([
+    localized()
+], CorasCategoryTag);
+export { CorasCategoryTag };

package/dist/components/category-tag/category-tag.d.ts

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

package/dist/components/category-tag/category-tag.js

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

package/dist/components/category-tag/category-tag.styles.d.ts

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

package/dist/components/category-tag/category-tag.styles.js

@@ -0,0 +1,99 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --category-tag-line-height: 14px;
+    --category-tag-letter-spacing: 0.02em;
+    /* New design: every category tag uses an alert surface background and the
+       primary text colour (designer "Category tags (New)"). */
+    --category-tag-music-color: var(--coras-color-text);
+    --category-tag-music-background-color: var(--coras-color-error-surface);
+    --category-tag-sport-color: var(--coras-color-text);
+    --category-tag-sport-background-color: var(--coras-color-success-surface);
+    --category-tag-theatre-color: var(--coras-color-text);
+    --category-tag-theatre-background-color: var(--coras-color-warning-surface);
+
+    /* Tags keep a fixed pill shape, exempt from the brand radius. */
+    --category-tag-border-radius: var(--coras-radius-full);
+    --category-tag-font-size: var(--coras-font-size-xxs);
+    --category-tag-font-weight: var(--coras-font-weight-normal);
+    --category-tag-activity-color: var(--coras-color-text);
+    --category-tag-activity-background-color: var(--coras-color-info-surface);
+    --category-tag-icon-font-size: var(--coras-font-size-lg);
+
+    width: fit-content;
+  }
+
+  svg {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--category-tag-border-radius);
+    font-size: var(--category-tag-font-size);
+    font-weight: var(--category-tag-font-weight);
+    justify-content: center;
+    line-height: var(--category-tag-line-height);
+    letter-spacing: var(--category-tag-letter-spacing);
+    padding: 4px 8px;
+    white-space: nowrap;
+
+    &.activity {
+      background-color: var(--category-tag-activity-background-color);
+
+      &.icon {
+        fill: var(--category-tag-activity-color);
+      }
+
+      &:not(.icon) {
+        color: var(--category-tag-activity-color);
+      }
+    }
+
+    &.music {
+      background-color: var(--category-tag-music-background-color);
+
+      &.icon {
+        fill: var(--category-tag-music-color);
+      }
+
+      &:not(.icon) {
+        color: var(--category-tag-music-color);
+      }
+    }
+
+    &.sport {
+      background-color: var(--category-tag-sport-background-color);
+
+      &.icon {
+        fill: var(--category-tag-sport-color);
+      }
+
+      &:not(.icon) {
+        color: var(--category-tag-sport-color);
+      }
+    }
+
+    &.theatre {
+      background-color: var(--category-tag-theatre-background-color);
+
+      &.icon {
+        fill: var(--category-tag-theatre-color);
+      }
+
+      &:not(.icon) {
+        color: var(--category-tag-theatre-color);
+      }
+    }
+  }
+
+  .icon {
+    font-size: var(--category-tag-icon-font-size);
+  }
+`;

package/dist/components/category-tag/category-tag.types.d.ts

@@ -0,0 +1,8 @@
+import { IconName } from "../icon/icon.types.js";
+export type AttractionCategory = "activity" | "music" | "sport" | "theatre";
+export type Variants = {
+    [K in Extract<IconName, AttractionCategory>]: {
+        label: () => string;
+        icon: K;
+    };
+};

package/dist/components/category-tag/category-tag.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,13 @@
+import { CSSResultGroup, LitElement } from "lit";
+import { CheckboxVariants } from "./checkbox.constants.js";
+export declare class CorasCheckbox extends LitElement {
+    static styles: CSSResultGroup;
+    value: string;
+    checked: boolean;
+    variant: CheckboxVariants;
+    disabled: boolean;
+    label: string;
+    error: boolean;
+    private handleValueChange;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/checkbox/checkbox.component.js

@@ -0,0 +1,68 @@
+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 { classMap } from "lit/directives/class-map.js";
+import { fireInternalEvent } from "../../core/events.js";
+import { CheckboxVariants } from "./checkbox.constants.js";
+import styles from "./checkbox.styles.js";
+export class CorasCheckbox extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = "";
+        this.checked = false;
+        this.variant = CheckboxVariants.REGULAR;
+        this.disabled = false;
+        this.label = "";
+        this.error = false;
+        this.handleValueChange = (event) => {
+            this.checked = event.target.checked;
+            fireInternalEvent(this, "value-changed", { value: this.checked });
+        };
+    }
+    static { this.styles = styles; }
+    render() {
+        const inputClasses = {
+            indeterminate: this.variant === CheckboxVariants.INDETERMINATE,
+            main: this.variant === CheckboxVariants.MAIN && this.checked,
+        };
+        return html `
+      <label part="label">
+        <input
+          class=${classMap(inputClasses)}
+          part="input"
+          .checked=${this.checked}
+          value=${this.value}
+          type="checkbox"
+          name="checkbox"
+          ?disabled=${this.disabled}
+          aria-disabled=${this.disabled ? "true" : "false"}
+          @change=${this.handleValueChange}
+        />
+        ${this.label}
+      </label>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], CorasCheckbox.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: String })
+], CorasCheckbox.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], CorasCheckbox.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasCheckbox.prototype, "error", void 0);

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

@@ -0,0 +1,5 @@
+export declare enum CheckboxVariants {
+    MAIN = "main",
+    INDETERMINATE = "indeterminate",
+    REGULAR = "regular"
+}

package/dist/components/checkbox/checkbox.constants.js

@@ -0,0 +1,6 @@
+export var CheckboxVariants;
+(function (CheckboxVariants) {
+    CheckboxVariants["MAIN"] = "main";
+    CheckboxVariants["INDETERMINATE"] = "indeterminate";
+    CheckboxVariants["REGULAR"] = "regular";
+})(CheckboxVariants || (CheckboxVariants = {}));

package/dist/components/checkbox/checkbox.d.ts

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

package/dist/components/checkbox/checkbox.js

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

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

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