@coras-io/embed 0.1.0

package/dist/components/filter-chip/filter-chip.d.ts

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

package/dist/components/filter-chip/filter-chip.js

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

package/dist/components/filter-chip/filter-chip.styles.d.ts

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

package/dist/components/filter-chip/filter-chip.styles.js

@@ -0,0 +1,160 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    width: auto;
+
+    --filter-chip-line-height: 0.875rem;
+    --filter-chip-letter-spacing: 0.01em;
+    --filter-chip-padding: 0.5rem;
+    --filter-chip-padding-large: 0.75rem;
+
+    --filter-chip-border-radius: var(--coras-radius-chip);
+    --filter-chip-border-color: var(--coras-color-neutral-300);
+    --filter-chip-font-weight: var(--coras-font-weight-normal);
+    --filter-chip-font-size: var(--coras-font-size-base);
+    --filter-chip-line-height: var(--coras-font-size-2xl);
+    --filter-chip-box-shadow: var(--coras-shadow-md);
+    --filter-chip-hover-background-color: var(--coras-color-surface-hover);
+    --filter-chip-selected-background-color: var(--coras-color-primary-500);
+    --filter-chip-selected-hover-background-color: var(
+      --coras-color-primary-700
+    );
+    --filter-chip-selected-color: var(--coras-palette-white);
+    --filter-chip-disabled-color: var(--coras-color-neutral-500);
+    --filter-chip-disabled-background-color: var(--coras-color-neutral-200);
+    --filter-chip-icon-color: var(--coras-color-text);
+    --filter-chip-selected-icon-color: var(--coras-palette-white);
+    --filter-chip-disabled-icon-color: var(--coras-color-neutral-500);
+    --filter-chip-text-selected-icon-color: var(--coras-color-primary-500);
+    --filter-chip-text-selected-hover-icon-color: var(
+      --coras-color-primary-700
+    );
+  }
+
+  button {
+    align-items: center;
+    background-color: transparent;
+    cursor: inherit;
+    border: none;
+    display: inline-flex;
+    font-size: var(--filter-chip-font-size);
+    line-height: var(--filter-chip-line-height);
+    font-weight: var(--filter-chip-font-weight);
+    gap: 0.5em;
+    justify-content: center;
+    letter-spacing: var(--filter-chip-letter-spacing);
+    line-height: var(--filter-chip-line-height);
+    padding: var(--filter-chip-padding);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: start;
+    width: 100%;
+
+    > .grid {
+      display: grid;
+      grid-template-areas: "prefix label suffix";
+      grid-template-columns: auto 1fr auto;
+      gap: 0.5em;
+      width: 100%;
+      align-items: center;
+
+      .prefix {
+        grid-area: prefix;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .label {
+        grid-area: label;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: start;
+      }
+
+      .suffix {
+        grid-area: suffix;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    > ::slotted(coras-icon) {
+      width: 1.4em;
+      height: 1.4em;
+    }
+
+    &.large {
+      padding: var(--filter-chip-padding-large);
+    }
+
+    &.primary {
+      border-radius: var(--filter-chip-border-radius);
+      border: 1px solid var(--filter-chip-border-color);
+      box-shadow: var(--filter-chip-box-shadow);
+
+      &:disabled {
+        cursor: not-allowed;
+        color: var(--filter-chip-disabled-color);
+        background-color: var(--filter-chip-disabled-background-color);
+
+        > ::slotted(coras-icon) {
+          fill: var(--filter-chip-disabled-color);
+        }
+      }
+
+      &.selected {
+        background-color: var(--filter-chip-selected-background-color);
+        color: var(--filter-chip-selected-color);
+
+        > ::slotted(coras-icon) {
+          fill: var(--filter-chip-selected-color);
+        }
+      }
+
+      &:not(:disabled):not(.selected):hover {
+        background-color: var(--filter-chip-hover-background-color);
+      }
+
+      &.selected:not(:disabled):hover {
+        background-color: var(--filter-chip-selected-hover-background-color);
+      }
+    }
+
+    &.text {
+      &:disabled {
+        cursor: not-allowed;
+        color: var(--filter-chip-disabled-background-color);
+
+        > ::slotted(coras-icon) {
+          fill: var(--filter-chip-disabled-background-color);
+        }
+      }
+
+      &.selected {
+        color: var(--filter-chip-selected-background-color);
+
+        > ::slotted(coras-icon) {
+          fill: var(--filter-chip-selected-background-color);
+        }
+      }
+
+      &:not(:disabled):hover {
+        color: var(--filter-chip-selected-hover-background-color);
+
+        > ::slotted(coras-icon) {
+          fill: var(--filter-chip-selected-hover-background-color);
+        }
+      }
+    }
+  }
+`;

package/dist/components/filters-drawer/filters-drawer.component.d.ts

@@ -0,0 +1,9 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../drawer/drawer.js";
+export declare class CorasFiltersDrawer extends LitElement {
+    static styles: CSSResultGroup;
+    assetsURL: string;
+    open: boolean;
+    private handleClose;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/filters-drawer/filters-drawer.component.js

@@ -0,0 +1,55 @@
+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 { localized, msg } from "@lit/localize";
+import "../drawer/drawer.js";
+import { fireInternalEvent } from "../../core/events.js";
+import styles from "./filters-drawer.styles.js";
+let CorasFiltersDrawer = class CorasFiltersDrawer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.open = false;
+    }
+    static { this.styles = styles; }
+    // The inner drawer fires a non-composed `modal-closed` event that cannot
+    // cross this wrapper's shadow boundary, so re-fire it for the host to catch.
+    handleClose() {
+        fireInternalEvent(this, "modal-closed", {});
+    }
+    render() {
+        return html `
+      <coras-drawer
+        assets-url="${this.assetsURL}"
+        label="Filters"
+        ?open=${this.open}
+        @modal-closed=${this.handleClose}
+      >
+        <span slot="header"></span>
+        <div class="container">
+          <div class="title">${msg("Filters")}</div>
+          <slot></slot>
+        </div>
+        <div class="bottom">
+          <slot name="reset-action"></slot>
+          <slot name="apply-action"></slot>
+        </div>
+      </coras-drawer>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasFiltersDrawer.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasFiltersDrawer.prototype, "open", void 0);
+CorasFiltersDrawer = __decorate([
+    localized()
+], CorasFiltersDrawer);
+export { CorasFiltersDrawer };

package/dist/components/filters-drawer/filters-drawer.d.ts

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

package/dist/components/filters-drawer/filters-drawer.js

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

package/dist/components/filters-drawer/filters-drawer.styles.d.ts

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

package/dist/components/filters-drawer/filters-drawer.styles.js

@@ -0,0 +1,60 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --filters-drawer-title-font-size: var(--coras-font-size-xl);
+    --filters-drawer-title-font-weight: var(--coras-font-weight-semibold);
+    --filters-drawer-bottom-background-color: var(--coras-color-surface-muted);
+    --filters-drawer-bottom-border-color: var(--coras-color-neutral-200);
+  }
+
+  coras-drawer {
+    --drawer-width-mobile: 100vw;
+    --drawer-width: 400px;
+
+    &::part(header-icon) {
+      margin: 0;
+    }
+  }
+
+  .container {
+    padding: 0.25rem 1rem 2rem 1.625rem;
+    height: 100%;
+    overflow-y: auto;
+
+    .title {
+      font-size: var(--filters-drawer-title-font-size);
+      font-weight: var(--filters-drawer-title-font-weight);
+      line-height: 1.75rem;
+
+      padding-left: 1.375rem;
+      margin-bottom: 3rem;
+    }
+
+    slot {
+      display: flex;
+      flex-direction: column;
+      gap: 3rem;
+
+      padding: 0 1rem 2rem 1.375rem;
+    }
+
+    .categories {
+      .custom-categories {
+        padding-left: 1.375rem;
+      }
+    }
+  }
+
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    background-color: var(--filters-drawer-bottom-background-color);
+    padding: 1.25rem 1.5rem;
+    border-top: 1px solid var(--filters-drawer-bottom-border-color);
+  }
+`;

package/dist/components/flag-icon/flag-icon.component.d.ts

@@ -0,0 +1,9 @@
+import { CSSResultGroup, LitElement } from "lit";
+import { Locale } from "../../core/types/index.js";
+export declare class CorasFlagIcon extends LitElement {
+    static styles: CSSResultGroup;
+    iconBaseURL: string;
+    icon: Locale;
+    label: string;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/flag-icon/flag-icon.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 { localized, msg } from "@lit/localize";
+import { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import styles from "./flag-icon.styles.js";
+let CorasFlagIcon = class CorasFlagIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.iconBaseURL = "";
+        this.icon = "en-GB";
+        this.label = msg("Flag icon");
+    }
+    // TODO: Do we need this? It's just a component to display an image.
+    static { this.styles = styles; }
+    render() {
+        this.setAttribute("role", "img");
+        this.setAttribute("aria-label", this.label);
+        const countryCode = this.icon.split("-")[1].toLowerCase();
+        return html `
+      <img
+        alt="${this.icon}"
+        src=${`${this.iconBaseURL}/${countryCode}.svg`}
+        loading="lazy"
+      />
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: "icon-base-url" })
+], CorasFlagIcon.prototype, "iconBaseURL", void 0);
+__decorate([
+    property({ type: String })
+], CorasFlagIcon.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], CorasFlagIcon.prototype, "label", void 0);
+CorasFlagIcon = __decorate([
+    localized()
+], CorasFlagIcon);
+export { CorasFlagIcon };

package/dist/components/flag-icon/flag-icon.constants.d.ts

@@ -0,0 +1 @@
+export declare const AVAILABLE_FLAGS: readonly ["ca-AD", "ar-AE", "ps-AF", "uz-AF", "tk-AF", "en-AG", "en-AI", "sq-AL", "hy-AM", "ru-AM", "pt-AO", "es-AR", "gn-AR", "en-AS", "sm-AS", "de-AT", "en-AU", "nl-AW", "pa-AW", "sv-AX", "az-AZ", "bs-BA", "hr-BA", "sr-BA", "en-BB", "bn-BD", "nl-BE", "fr-BE", "de-BE", "fr-BF", "ff-BF", "bg-BG", "ar-BH", "fr-BI", "rn-BI", "fr-BJ", "fr-BL", "en-BM", "ms-BN", "es-BO", "ay-BO", "qu-BO", "nl-BQ", "pt-BR", "en-BS", "dz-BT", "no-BV", "nb-BV", "nn-BV", "en-BW", "tn-BW", "be-BY", "ru-BY", "en-BZ", "es-BZ", "en-CA", "fr-CA", "en-CC", "fr-CD", "ln-CD", "kg-CD", "sw-CD", "lu-CD", "fr-CF", "sg-CF", "fr-CG", "ln-CG", "de-CH", "fr-CH", "it-CH", "fr-CI", "en-CK", "es-CL", "en-CM", "fr-CM", "zh-CN", "es-CO", "es-CR", "es-CU", "pt-CV", "nl-CW", "pa-CW", "en-CW", "en-CX", "el-CY", "tr-CY", "hy-CY", "cs-CZ", "de-DE", "fr-DJ", "ar-DJ", "da-DK", "en-DM", "es-DO", "ar-DZ", "es-EC", "et-EE", "ar-EG", "es-EH", "ti-ER", "ar-ER", "en-ER", "es-ES", "eu-ES", "ca-ES", "gl-ES", "oc-ES", "am-ET", "fi-FI", "sv-FI", "en-FJ", "fj-FJ", "hi-FJ", "ur-FJ", "en-FK", "en-FM", "fo-FO", "fr-FR", "fr-GA", "en-GB", "en-GD", "ka-GE", "fr-GF", "en-GG", "fr-GG", "en-GH", "en-GI", "kl-GL", "en-GM", "fr-GN", "ff-GN", "fr-GP", "es-GQ", "fr-GQ", "el-GR", "en-GS", "es-GT", "en-GU", "ch-GU", "es-GU", "pt-GW", "en-GY", "zh-HK", "en-HK", "en-HM", "es-HN", "hr-HR", "fr-HT", "ht-HT", "hu-HU", "id-ID", "ga-IE", "en-IE", "he-IL", "ar-IL", "en-IM", "gv-IM", "hi-IN", "en-IN", "en-IO", "ar-IQ", "ku-IQ", "fa-IR", "is-IS", "it-IT", "en-JE", "fr-JE", "en-JM", "ar-JO", "ja-JP", "en-KE", "sw-KE", "ky-KG", "ru-KG", "km-KH", "en-KI", "ar-KM", "fr-KM", "en-KN", "ko-KP", "ko-KR", "ar-KW", "en-KY", "kk-KZ", "ru-KZ", "lo-LA", "ar-LB", "fr-LB", "en-LC", "de-LI", "si-LK", "ta-LK", "en-LR", "en-LS", "st-LS", "lt-LT", "fr-LU", "de-LU", "lb-LU", "lv-LV", "ar-LY", "ar-MA", "fr-MA", "fr-MC", "ro-MD", "sr-ME", "bs-ME", "sq-ME", "hr-ME", "en-MF", "fr-MF", "nl-MF", "fr-MG", "mg-MG", "en-MH", "mh-MH", "mk-MK", "fr-ML", "my-MM", "mn-MN", "zh-MO", "pt-MO", "en-MP", "ch-MP", "fr-MQ", "ar-MR", "en-MS", "mt-MT", "en-MT", "en-MU", "dv-MV", "en-MW", "ny-MW", "es-MX", "ms-MY", "pt-MZ", "en-NA", "af-NA", "fr-NC", "fr-NE", "en-NF", "en-NG", "es-NI", "nl-NL", "no-NO", "nb-NO", "nn-NO", "ne-NP", "en-NR", "na-NR", "en-NU", "en-NZ", "mi-NZ", "ar-OM", "es-PA", "es-PE", "fr-PF", "en-PG", "en-PH", "en-PK", "ur-PK", "pl-PL", "fr-PM", "en-PN", "es-PR", "en-PR", "ar-PS", "pt-PT", "en-PW", "es-PY", "gn-PY", "ar-QA", "fr-RE", "ro-RO", "sr-RS", "ru-RU", "rw-RW", "en-RW", "fr-RW", "ar-SA", "en-SB", "fr-SC", "en-SC", "ar-SD", "en-SD", "sv-SE", "en-SG", "ms-SG", "ta-SG", "zh-SG", "en-SH", "sl-SI", "no-SJ", "sk-SK", "en-SL", "it-SM", "fr-SN", "so-SO", "ar-SO", "nl-SR", "en-SS", "pt-ST", "es-SV", "nl-SX", "en-SX", "ar-SY", "en-SZ", "ss-SZ", "en-TC", "fr-TD", "ar-TD", "fr-TF", "fr-TG", "th-TH", "tg-TJ", "ru-TJ", "en-TK", "pt-TL", "tk-TM", "ru-TM", "ar-TN", "en-TO", "to-TO", "tr-TR", "en-TT", "en-TV", "zh-TW", "sw-TZ", "en-TZ", "uk-UA", "en-UG", "sw-UG", "en-UM", "en-US", "es-UY", "uz-UZ", "ru-UZ", "it-VA", "la-VA", "en-VC", "es-VE", "en-VG", "en-VI", "vi-VN", "bi-VU", "en-VU", "fr-VU", "fr-WF", "sm-WS", "en-WS", "sq-XK", "sr-XK", "ar-YE", "fr-YT", "af-ZA", "en-ZA", "nr-ZA", "st-ZA", "ss-ZA", "tn-ZA", "ts-ZA", "ve-ZA", "xh-ZA", "zu-ZA", "en-ZM", "en-ZW", "sn-ZW", "nd-ZW"];