@coras-io/embed 0.1.0

package/dist/components/calendar/base/calendar.mixin.js

@@ -0,0 +1,231 @@
+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 } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { memo } from "../../../core/utils/function.js";
+import { title } from "../../../core/utils/text.js";
+import { addDays, addMonths, differenceInCalendarMonths, differenceInDays, endOfMonth, endOfWeek, format, formatISO, isBefore, isSameMonth, isWithinInterval, parse, parseISO, startOfMonth, startOfWeek, } from "date-fns";
+import { getCalendarLocale, weekdayNames } from "../../../core/i18n/date.js";
+import { fireInternalEvent } from "../../../core/events.js";
+import styles from "./calendar.styles.js";
+export const BaseCalendarMixin = (superClass) => {
+    class BaseCalendarMixinElement extends superClass {
+        constructor() {
+            super(...arguments);
+            this.assetsURL = "";
+            this.locale = "en-US";
+            this.minDate = format(new Date(), "yyyy-MM");
+            this.maxDate = format(new Date(), "yyyy-MM");
+            this.selectedMonth = format(new Date(), "yyyy-MM");
+            this.selectedDates = [];
+            this.availableDays = undefined;
+            this.range = false;
+            this.hover = undefined;
+            this.generateMonthDays = memo((month) => {
+                const days = [];
+                const start = startOfWeek(startOfMonth(month), {
+                    weekStartsOn: 1,
+                });
+                const end = endOfWeek(endOfMonth(month), { weekStartsOn: 1 });
+                const daysInMonth = differenceInDays(end, start) + 1;
+                for (let day = 0; day < daysInMonth; day++) {
+                    days.push(addDays(start, day));
+                }
+                return days;
+            });
+            this.renderWeekdayNames = () => html `${weekdayNames(this.locale).map((dayName) => html `<li class="day-name">${title(dayName)}</li>`)}`;
+            this.isDisabled = (day) => {
+                if (this.availableDays &&
+                    !this.availableDays.includes(format(day, "d"))) {
+                    return true;
+                }
+                if (!this.range) {
+                    return false;
+                }
+                if (this.selectedDates.length === 1 &&
+                    this.selectedDates[0] !== undefined) {
+                    return isBefore(day, parseISO(this.selectedDates[0]));
+                }
+                return false;
+            };
+            this.isSelected = (day) => this.selectedDates.includes(format(day, "yyyy-MM-dd"));
+            this.isInRange = (day) => {
+                if (!this.range)
+                    return false;
+                const dayFormatted = format(day, "yyyy-MM-dd");
+                if (this.selectedDates.length === 1 &&
+                    this.selectedDates[0] !== undefined &&
+                    this.hover) {
+                    const selectedDateStart = parseISO(this.selectedDates[0]);
+                    if (dayFormatted !== this.selectedDates[0] &&
+                        day.getTime() !== this.hover.getTime()) {
+                        return isWithinInterval(day, {
+                            start: selectedDateStart,
+                            end: this.hover,
+                        });
+                    }
+                }
+                else if (this.selectedDates.length === 2 &&
+                    this.selectedDates[0] !== undefined &&
+                    this.selectedDates[1] !== undefined) {
+                    if (!this.selectedDates.includes(dayFormatted)) {
+                        const startDate = parseISO(this.selectedDates[0]);
+                        const endDate = parseISO(this.selectedDates[1]);
+                        return isWithinInterval(day, { start: startDate, end: endDate });
+                    }
+                }
+                return false;
+            };
+            this.isStart = (date) => {
+                if (!this.range ||
+                    this.selectedDates.length === 0 ||
+                    this.selectedDates[0] === this.selectedDates[1])
+                    return false;
+                const formattedDate = format(date, "yyyy-MM-dd");
+                if (this.selectedDates[0] === formattedDate) {
+                    if (this.selectedDates.length === 1 &&
+                        this.hover &&
+                        this.hover.getTime() > date.getTime()) {
+                        return true;
+                    }
+                    else if (this.selectedDates.length === 2 &&
+                        this.selectedDates[0] !== this.selectedDates[1]) {
+                        return true;
+                    }
+                }
+                return false;
+            };
+            this.isEnd = (date) => {
+                if (!this.range ||
+                    this.selectedDates.length === 0 ||
+                    this.selectedDates[0] === this.selectedDates[1])
+                    return false;
+                const formattedDate = format(date, "yyyy-MM-dd");
+                if (this.hover &&
+                    this.selectedDates.length === 1 &&
+                    formattedDate !== this.selectedDates[0]) {
+                    return formattedDate === format(this.hover, "yyyy-MM-dd");
+                }
+                if (this.selectedDates.length === 2) {
+                    return formattedDate === this.selectedDates[1];
+                }
+                return false;
+            };
+            this.setHover = (date, disabled) => {
+                if (!this.range || disabled) {
+                    this.hover = undefined;
+                    return;
+                }
+                if (!this.hover || date.getTime() !== this.hover.getTime()) {
+                    this.hover = date;
+                }
+            };
+            this.nextMonthAllowed = () => {
+                const check = !this.range ? 0 : 1;
+                return (differenceInCalendarMonths(parse(this.maxDate, "yyyy-MM", new Date()), this.parseSelectedMonth()) > check);
+            };
+            this.nextMonth = () => {
+                if (!this.nextMonthAllowed())
+                    return;
+                const nextMonth = addMonths(this.parseSelectedMonth(), 1);
+                fireInternalEvent(this, "calendar-month-changed", {
+                    date: format(nextMonth, "yyyy-MM"),
+                });
+            };
+            this.previousMonthAllowed = () => differenceInCalendarMonths(this.parseSelectedMonth(), parse(this.minDate, "yyyy-MM", new Date())) > 0;
+            this.previousMonth = () => {
+                if (!this.previousMonthAllowed())
+                    return;
+                const previousMonth = addMonths(this.parseSelectedMonth(), -1);
+                fireInternalEvent(this, "calendar-month-changed", {
+                    date: format(previousMonth, "yyyy-MM"),
+                });
+            };
+        }
+        static { this.styles = [
+            superClass.styles ?? [],
+            styles,
+        ]; }
+        dispatchDaySelected(date) {
+            fireInternalEvent(this, "date-selected", {
+                date: formatISO(date, { representation: "date" }),
+            });
+        }
+        parseSelectedMonth() {
+            return parse(this.selectedMonth, "yyyy-MM", new Date());
+        }
+        getMonthLabel() {
+            return format(parse(this.selectedMonth, "yyyy-MM", new Date()), "LLLL yyyy", { locale: getCalendarLocale(this.locale) });
+        }
+        getClassMapForDay(day, month, disabled) {
+            return {
+                day: isSameMonth(month, day),
+                disabled: disabled,
+                start: this.isStart(day),
+                end: this.isEnd(day),
+                range: this.isInRange(day),
+            };
+        }
+        renderDay(month, day) {
+            const disabled = this.isDisabled(day);
+            const dayClassMap = this.getClassMapForDay(day, month, disabled);
+            const sameMonth = isSameMonth(month, day);
+            if (!sameMonth) {
+                return html `<li></li>`;
+            }
+            return html `
+        <li
+          class="${classMap(dayClassMap)}"
+          @click="${() => !disabled && this.dispatchDaySelected(day)}"
+          @mouseover="${() => this.setHover(day, disabled)}"
+          data-testid=${formatISO(day, { representation: "date" })}
+        >
+          <span class="${classMap({ selected: this.isSelected(day) })}">
+            ${sameMonth ? format(day, "d") : ""}
+          </span>
+        </li>
+      `;
+        }
+        renderMonth(month, days) {
+            return html `
+        <ol>
+          ${this.renderWeekdayNames()}
+          ${days.map((day) => this.renderDay(month, day))}
+        </ol>
+      `;
+        }
+    }
+    __decorate([
+        property({ type: String, attribute: "assets-url" })
+    ], BaseCalendarMixinElement.prototype, "assetsURL", void 0);
+    __decorate([
+        property({ type: String })
+    ], BaseCalendarMixinElement.prototype, "locale", void 0);
+    __decorate([
+        property({ type: String, attribute: "min-date" })
+    ], BaseCalendarMixinElement.prototype, "minDate", void 0);
+    __decorate([
+        property({ type: String, attribute: "max-date" })
+    ], BaseCalendarMixinElement.prototype, "maxDate", void 0);
+    __decorate([
+        property({ type: String, attribute: "selected-month" })
+    ], BaseCalendarMixinElement.prototype, "selectedMonth", void 0);
+    __decorate([
+        property({ type: Array, attribute: "selected-dates" })
+    ], BaseCalendarMixinElement.prototype, "selectedDates", void 0);
+    __decorate([
+        property({ type: Array, attribute: "available-days" })
+    ], BaseCalendarMixinElement.prototype, "availableDays", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], BaseCalendarMixinElement.prototype, "range", void 0);
+    __decorate([
+        state()
+    ], BaseCalendarMixinElement.prototype, "hover", void 0);
+    return BaseCalendarMixinElement;
+};

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

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

package/dist/components/calendar/base/calendar.styles.js

@@ -0,0 +1,122 @@
+import { css } from "lit";
+import component from "../../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --calendar-font-color: var(--coras-color-text);
+    --calendar-font-size: var(--coras-font-size-sm);
+    --calendar-background-color: var(--coras-color-surface);
+    --calendar-disabled-font-color: var(--coras-color-neutral-600);
+    --calendar-header-font-size: var(--coras-font-size-base);
+    --calendar-day-name-font-weight: var(--coras-font-weight-semibold);
+    --calendar-selected-background-color: var(--coras-color-secondary-500);
+    --calendar-selected-font-color: var(--coras-palette-white);
+    --calendar-selected-range-background-color: var(
+      --coras-color-surface-hover
+    );
+    --calendar-selected-border-radius: var(--coras-radius-full);
+  }
+
+  .calendar {
+    display: block;
+    font-size: var(--calendar-font-size);
+    color: var(--calendar-font-color);
+    background-color: var(--calendar-background-color);
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: var(--calendar-header-font-size);
+      margin-bottom: 1rem;
+
+      button {
+        border: 0;
+        background-color: transparent;
+        margin: 0;
+        padding: 0;
+        cursor: pointer;
+
+        coras-icon {
+          width: 1rem;
+          height: 1rem;
+        }
+
+        coras-icon::part(svg) {
+          fill: var(--calendar-font-color);
+        }
+
+        &:disabled {
+          cursor: not-allowed;
+
+          coras-icon::part(svg) {
+            fill: var(--calendar-disabled-font-color);
+          }
+        }
+      }
+    }
+
+    ol {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      margin: 0 auto;
+      padding: 0;
+
+      li {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        aspect-ratio: 1;
+
+        &.day-name {
+          font-weight: var(--calendar-day-name-font-weight);
+        }
+
+        &.day {
+          span {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            cursor: pointer;
+            padding: 0.4rem;
+          }
+
+          &.disabled span {
+            color: var(--calendar-disabled-font-color);
+            cursor: not-allowed;
+          }
+
+          &.end,
+          &.start,
+          &.range,
+          &:not(.start):not(.end):not(.range):not(.disabled):hover {
+            background-color: var(--calendar-selected-range-background-color);
+          }
+
+          &.end {
+            border-radius: 0 var(--calendar-selected-border-radius)
+              var(--calendar-selected-border-radius) 0;
+          }
+
+          &.start {
+            border-radius: var(--calendar-selected-border-radius) 0 0
+              var(--calendar-selected-border-radius);
+          }
+
+          &:not(.start):not(.end):not(.range):not(.disabled):hover {
+            border-radius: var(--calendar-selected-border-radius);
+          }
+
+          span.selected {
+            border-radius: var(--calendar-selected-border-radius);
+            color: var(--calendar-selected-font-color);
+            background-color: var(--calendar-selected-background-color);
+          }
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,21 @@
+import { TemplateResult } from "lit";
+import { allLocales } from "../../../core/i18n/locale-codes.js";
+export type Constructor<T> = new (...args: any[]) => T;
+export declare class BaseCalendarMixinInterface {
+    locale: (typeof allLocales)[number];
+    minDate: string;
+    maxDate: string;
+    selectedMonth: string;
+    selectedDates?: string[];
+    availableDays?: string[];
+    range?: boolean;
+    generateMonthDays(month: Date): Date[];
+    isDisabled(date: Date): boolean;
+    parseSelectedMonth(): Date;
+    nextMonthAllowed(): boolean;
+    nextMonth(): void;
+    previousMonthAllowed(): boolean;
+    previousMonth(): void;
+    getMonthLabel(): string;
+    renderMonth(month: Date, days: Date[]): TemplateResult<1>;
+}

package/dist/components/calendar/base/calendar.types.js

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

package/dist/components/calendar/dual/dual.component.d.ts

@@ -0,0 +1,11 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../../icon/icon.js";
+declare const BaseCalendarLitElement: import("../base/calendar.types.js").Constructor<import("../base/calendar.types.js").BaseCalendarMixinInterface> & typeof LitElement;
+export declare class CorasDualMonthCalendar extends BaseCalendarLitElement {
+    static styles: CSSResultGroup;
+    assetsURL: string;
+    private renderLeftHeader;
+    private renderRightHeader;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};

package/dist/components/calendar/dual/dual.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 { addMonths, format, parse } from "date-fns";
+import { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { title } from "../../../core/utils/text.js";
+import { localized, msg } from "@lit/localize";
+import "../../icon/icon.js";
+import styles from "./dual.styles.js";
+import { BaseCalendarMixin } from "../base/calendar.mixin.js";
+import { getCalendarLocale } from "../../../core/i18n/date.js";
+const BaseCalendarLitElement = BaseCalendarMixin(LitElement);
+let CorasDualMonthCalendar = class CorasDualMonthCalendar extends BaseCalendarLitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+    }
+    static { this.styles = [
+        super.styles,
+        styles,
+    ]; }
+    renderLeftHeader() {
+        return html `
+      <section class="header">
+        <button
+          @click="${() => this.previousMonth()}"
+          ?disabled="${!this.previousMonthAllowed()}"
+          aria-label=${msg("Previous Month")}
+        >
+          <coras-icon
+            assets-url="${this.assetsURL}"
+            icon="chevron-left"
+          ></coras-icon>
+        </button>
+        <div class="current-date">
+          ${title(format(parse(this.selectedMonth, "yyyy-MM", new Date()), "LLLL yyyy", {
+            locale: getCalendarLocale(this.locale),
+        }))}
+        </div>
+        <span></span>
+      </section>
+    `;
+    }
+    renderRightHeader() {
+        return html `
+      <section class="header">
+        <span></span>
+        <div class="current-date">
+          ${title(format(addMonths(parse(this.selectedMonth, "yyyy-MM", new Date()), 1), "LLLL yyyy", {
+            locale: getCalendarLocale(this.locale),
+        }))}
+        </div>
+        <button
+          @click="${() => this.nextMonth()}"
+          ?disabled="${!this.nextMonthAllowed()}"
+          aria-label=${msg("Next Month")}
+        >
+          <coras-icon
+            assets-url="${this.assetsURL}"
+            icon="chevron-right"
+          ></coras-icon>
+        </button>
+      </section>
+    `;
+    }
+    render() {
+        return html `
+      <div class="calendar">
+        <div class="months">
+          <div>
+            ${this.renderLeftHeader()}
+            ${this.renderMonth(parse(this.selectedMonth, "yyyy-MM", new Date()), this.generateMonthDays(parse(this.selectedMonth, "yyyy-MM", new Date())))}
+          </div>
+          <div>
+            ${this.renderRightHeader()}
+            ${this.renderMonth(addMonths(parse(this.selectedMonth, "yyyy-MM", new Date()), 1), this.generateMonthDays(addMonths(parse(this.selectedMonth, "yyyy-MM", new Date()), 1)))}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasDualMonthCalendar.prototype, "assetsURL", void 0);
+CorasDualMonthCalendar = __decorate([
+    localized()
+], CorasDualMonthCalendar);
+export { CorasDualMonthCalendar };

package/dist/components/calendar/dual/dual.d.ts

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

package/dist/components/calendar/dual/dual.js

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

package/dist/components/calendar/dual/dual.styles.d.ts

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

package/dist/components/calendar/dual/dual.styles.js

@@ -0,0 +1,13 @@
+import { css } from "lit";
+import component from "../../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  .calendar {
+    .months {
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+    }
+  }
+`;

package/dist/components/calendar/month/month.component.d.ts

@@ -0,0 +1,14 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import "../../icon/icon.js";
+declare const BaseCalendarLitElement: import("../base/calendar.types.js").Constructor<import("../base/calendar.types.js").BaseCalendarMixinInterface> & typeof LitElement;
+export declare class CorasMonthCalendar extends BaseCalendarLitElement {
+    static styles: CSSResultGroup;
+    assetsURL: string;
+    private selectedMonthDays;
+    updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    private updateSelectedMonthDays;
+    private renderHeader;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};

package/dist/components/calendar/month/month.component.js

@@ -0,0 +1,83 @@
+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 { parse } from "date-fns";
+import { LitElement, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { title } from "../../../core/utils/text.js";
+import { localized, msg } from "@lit/localize";
+import "../../icon/icon.js";
+import styles from "./month.styles.js";
+import { BaseCalendarMixin } from "../base/calendar.mixin.js";
+const BaseCalendarLitElement = BaseCalendarMixin(LitElement);
+let CorasMonthCalendar = class CorasMonthCalendar extends BaseCalendarLitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.selectedMonthDays = [];
+    }
+    static { this.styles = [
+        super.styles,
+        styles,
+    ]; }
+    updated(changed) {
+        if (changed.has("selectedMonth")) {
+            this.selectedMonthDays = this.generateMonthDays(parse(this.selectedMonth, "yyyy-MM", new Date()));
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateSelectedMonthDays();
+    }
+    updateSelectedMonthDays() {
+        this.selectedMonthDays = this.generateMonthDays(this.parseSelectedMonth());
+    }
+    renderHeader() {
+        return html `
+      <section class="header">
+        <button
+          @click="${() => this.previousMonth()}"
+          ?disabled="${!this.previousMonthAllowed()}"
+          aria-label=${msg("Previous Month")}
+        >
+          <coras-icon
+            assets-url="${this.assetsURL}"
+            icon="chevron-left"
+          ></coras-icon>
+        </button>
+        <div class="current-date">${title(this.getMonthLabel())}</div>
+        <button
+          @click="${() => this.nextMonth()}"
+          ?disabled="${!this.nextMonthAllowed()}"
+          aria-label=${msg("Next Month")}
+        >
+          <coras-icon
+            assets-url="${this.assetsURL}"
+            icon="chevron-right"
+          ></coras-icon>
+        </button>
+      </section>
+    `;
+    }
+    render() {
+        return html `
+      <div class="calendar">
+        ${this.renderHeader()}
+        ${this.renderMonth(parse(this.selectedMonth, "yyyy-MM", new Date()), this.selectedMonthDays)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasMonthCalendar.prototype, "assetsURL", void 0);
+__decorate([
+    state()
+], CorasMonthCalendar.prototype, "selectedMonthDays", void 0);
+CorasMonthCalendar = __decorate([
+    localized()
+], CorasMonthCalendar);
+export { CorasMonthCalendar };

package/dist/components/calendar/month/month.d.ts

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

package/dist/components/calendar/month/month.js

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

package/dist/components/calendar/month/month.styles.d.ts

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

package/dist/components/calendar/month/month.styles.js

@@ -0,0 +1,5 @@
+import { css } from "lit";
+import component from "../../../styles/defaults/component.js";
+export default css `
+  ${component}
+`;

package/dist/components/calendar/multi/multi.component.d.ts

@@ -0,0 +1,9 @@
+import { CSSResultGroup, LitElement } from "lit";
+declare const BaseCalendarLitElement: import("../base/calendar.types.js").Constructor<import("../base/calendar.types.js").BaseCalendarMixinInterface> & typeof LitElement;
+export declare class CorasMultiMonthCalendar extends BaseCalendarLitElement {
+    static styles: CSSResultGroup;
+    private visibleMonthsDays;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};