@eui/eds-wc 22.0.0-alpha.16 → 22.0.0-alpha.18

package/eds-calendar/eds-wc-calendar.js

@@ -0,0 +1,1236 @@
+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, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { EdsBaseElement } from '../shared/eds-base.js';
+const DAY_NAME_MAP = {
+    monday: 0, mon: 0,
+    tuesday: 1, tue: 1,
+    wednesday: 2, wed: 2,
+    thursday: 3, thu: 3,
+    friday: 4, fri: 4,
+    saturday: 5, sat: 5,
+    sunday: 6, sun: 6,
+};
+/**
+ * Parses a starting-day input (day name/abbreviation or 0-6) into an ISO-Monday-based
+ * index (0=Monday … 6=Sunday). Mirrors the Angular `parseStartingDay` util.
+ */
+export function parseStartingDay(startingDay) {
+    if (typeof startingDay === 'number' || /^\d+$/.test(String(startingDay))) {
+        const numValue = typeof startingDay === 'string' ? parseInt(startingDay, 10) : startingDay;
+        if (numValue >= 0 && numValue <= 6) {
+            return numValue;
+        }
+        throw new Error(`Invalid starting day number: ${numValue}. Must be 0-6.`);
+    }
+    if (typeof startingDay === 'string') {
+        const normalized = startingDay.toLowerCase().trim();
+        if (normalized in DAY_NAME_MAP) {
+            return DAY_NAME_MAP[normalized];
+        }
+        throw new Error(`Invalid starting day: "${startingDay}". Use day name or abbreviation.`);
+    }
+    throw new Error('Starting day must be a string (day name) or number (0-6).');
+}
+/* -------------------------------------------------------------------------- */
+/*  eds-wc-calendar-day — a single day cell in the monthly grid.              */
+/* -------------------------------------------------------------------------- */
+/**
+ * `<eds-wc-calendar-day>` — a single day cell inside the monthly calendar grid.
+ *
+ * Projection of the Angular `EdsCalendarDay` sub-component. Renders the day number
+ * button, an add-event icon button on hover, event tags, and a "+N more" popover
+ * trigger. Used internally by `<eds-wc-calendar-monthly>` but registered standalone
+ * so it can be composed directly.
+ *
+ * @fires add-item - `detail: {}` — fired when the add-event button is clicked.
+ *
+ * @cssprop --_eds-calendar-day-height
+ */
+let EdsWcCalendarDay = class EdsWcCalendarDay extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        this.dayOfTheMonth = 4;
+        this.maxNumberOfEventsToShow = 2;
+        this.disabled = false;
+        this.isSelected = false;
+        this.events = [];
+        this._hovered = false;
+        this._showAll = false;
+    }
+    get _renderNewEvent() {
+        return this._hovered && this.dayOfTheMonth !== null;
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after { box-sizing: border-box; }
+        :host {
+            --_eds-calendar-day-height: 8rem;
+            height: var(--_eds-calendar-day-height);
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: flex-start;
+            gap: var(--eds-sp-2xs);
+            overflow: hidden;
+            width: 100%;
+            padding: var(--eds-sp-xs);
+        }
+        :host([disabled]) { opacity: 0.5; pointer-events: none; }
+
+        .eds-calendar-day__header {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            width: 100%;
+        }
+        .eds-calendar-day__day-btn {
+            display: inline-flex; align-items: center; justify-content: center;
+            min-width: var(--eds-si-2xl, 2rem); height: var(--eds-si-2xl, 2rem);
+            padding: 0 var(--eds-sp-2xs);
+            border: none; cursor: pointer; font: var(--eds-f-label-m-semibold);
+            border-radius: var(--eds-br-s); font-family: inherit;
+            background: transparent; color: var(--eds-c-foreground);
+        }
+        .eds-calendar-day__day-btn:hover { background: var(--eds-c-surface-hover); }
+        .eds-calendar-day__day-btn:focus-visible { outline: 2px solid var(--eds-c-border-focus); outline-offset: 2px; }
+        .eds-calendar-day__day-btn--selected {
+            background: var(--eds-c-surface-primary);
+            color: var(--eds-c-on-surface-primary);
+            border-radius: var(--eds-br-full);
+        }
+
+        .eds-calendar-day__add-btn {
+            display: inline-flex; align-items: center; justify-content: center;
+            width: var(--eds-si-xl, 1.75rem); height: var(--eds-si-xl, 1.75rem);
+            border: none; background: transparent; cursor: pointer;
+            border-radius: var(--eds-br-s); color: var(--eds-c-foreground-info);
+            font-family: inherit;
+        }
+        .eds-calendar-day__add-btn:hover { background: var(--eds-c-surface-hover); }
+        .eds-calendar-day__add-btn:focus-visible { outline: 2px solid var(--eds-c-border-focus); outline-offset: 2px; }
+        .eds-calendar-day__add-btn svg { width: var(--eds-is-s); height: var(--eds-is-s); fill: currentColor; }
+
+        .eds-calendar-day__show-more {
+            cursor: pointer;
+            font: var(--eds-f-paragraph-xs);
+            color: var(--eds-c-foreground-subtle);
+            background: none; border: none; padding: 0; font-family: inherit;
+        }
+        .eds-calendar-day__show-more:hover { text-decoration: underline; }
+        .eds-calendar-day__show-more:focus-visible { outline: 2px solid var(--eds-c-border-focus); outline-offset: 2px; }
+
+        .eds-calendar-day__events {
+            display: flex; flex-direction: column; align-items: flex-start;
+            gap: var(--eds-sp-2xs); margin-top: auto; width: 100%;
+        }
+
+        .eds-calendar-day__event-tag {
+            display: inline-flex; align-items: center;
+            max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+            padding: var(--eds-sp-3xs) var(--eds-sp-2xs);
+            border-radius: var(--eds-br-s); font: var(--eds-f-paragraph-xs);
+            background: var(--_eds-calendar-day-tag-surface, var(--eds-c-surface-info-subtler));
+            color: var(--_eds-calendar-day-tag-fg, var(--eds-c-foreground));
+        }
+        .eds-calendar-day__event-tag--success { --_eds-calendar-day-tag-surface: var(--eds-c-surface-success-subtler); }
+        .eds-calendar-day__event-tag--warning { --_eds-calendar-day-tag-surface: var(--eds-c-surface-warning-subtler); }
+        .eds-calendar-day__event-tag--critical { --_eds-calendar-day-tag-surface: var(--eds-c-surface-critical-subtler); }
+        .eds-calendar-day__event-tag--info { --_eds-calendar-day-tag-surface: var(--eds-c-surface-info-subtler); }
+
+        .eds-calendar-day__popover {
+            display: none; position: absolute; z-index: 10000; margin-top: var(--eds-sp-3xs);
+            background: var(--eds-c-surface-elevation); border: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+            border-radius: var(--eds-br-m); box-shadow: var(--eds-sh-2); padding: var(--eds-sp-s);
+            min-width: 200px;
+        }
+        .eds-calendar-day__popover.open { display: block; }
+        .eds-calendar-day__popover-title { font: var(--eds-f-label-m-semibold); margin-bottom: var(--eds-sp-xs); }
+        .eds-calendar-day__popover-events { display: flex; flex-direction: column; align-items: flex-start; gap: var(--eds-sp-xs); }
+    `; }
+    render() {
+        const baseUrl = EdsBaseElement.assetsBaseUrl;
+        const plusHref = `${baseUrl}/eds/icons/sprites/core.svg#plus`;
+        const events = this.events ?? [];
+        const visible = events.slice(0, this.maxNumberOfEventsToShow);
+        const overflow = events.length - this.maxNumberOfEventsToShow;
+        return html `
+            <div
+                @mouseenter="${this._onMouseOver}"
+                @mouseleave="${this._onMouseOut}"
+                style="display:contents;">
+                ${this.dayOfTheMonth !== null ? html `
+                    <div class="eds-calendar-day__header">
+                        <button
+                            type="button"
+                            class="eds-calendar-day__day-btn ${this.isSelected ? 'eds-calendar-day__day-btn--selected' : ''}"
+                            aria-pressed="${this.isSelected ? 'true' : 'false'}">
+                            ${this.dayOfTheMonth}
+                        </button>
+                        ${this._renderNewEvent ? html `
+                            <button
+                                type="button"
+                                class="eds-calendar-day__add-btn"
+                                aria-label="Add new event"
+                                @click="${this._onAddClick}">
+                                <svg aria-hidden="true"><use href="${plusHref}"></use></svg>
+                            </button>
+                        ` : nothing}
+                    </div>
+                ` : nothing}
+
+                <div class="eds-calendar-day__events">
+                    ${visible.map(ev => this._renderTag(ev))}
+                    ${overflow > 0 ? html `
+                        <button type="button" class="eds-calendar-day__show-more" @click="${this._togglePopover}">
+                            +${overflow} more
+                        </button>
+                    ` : nothing}
+                </div>
+
+                <div class="eds-calendar-day__popover ${this._showAll ? 'open' : ''}" role="dialog" aria-label="Events">
+                    <div class="eds-calendar-day__popover-title">Events</div>
+                    <div class="eds-calendar-day__popover-events">
+                        ${events.map(ev => this._renderTag(ev))}
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    _renderTag(ev) {
+        const cls = ev.type ? `eds-calendar-day__event-tag eds-calendar-day__event-tag--${this._tagColor(ev.type)}` : 'eds-calendar-day__event-tag';
+        return html `<span class="${cls}">${ev.label}</span>`;
+    }
+    _tagColor(type) {
+        switch (type) {
+            case 'success': return 'success';
+            case 'warning': return 'warning';
+            case 'critical': return 'critical';
+            case 'primary':
+            case 'info':
+            default: return 'info';
+        }
+    }
+    _onMouseOver() {
+        if (!this.disabled)
+            this._hovered = true;
+    }
+    _onMouseOut() {
+        this._hovered = false;
+    }
+    _onAddClick() {
+        this.dispatchEvent(new CustomEvent('add-item', { bubbles: true, composed: true, detail: {} }));
+    }
+    _togglePopover() {
+        this._showAll = !this._showAll;
+    }
+};
+__decorate([
+    property({ type: Number, attribute: 'day-of-the-month' })
+], EdsWcCalendarDay.prototype, "dayOfTheMonth", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-number-of-events-to-show' })
+], EdsWcCalendarDay.prototype, "maxNumberOfEventsToShow", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EdsWcCalendarDay.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'is-selected' })
+], EdsWcCalendarDay.prototype, "isSelected", void 0);
+__decorate([
+    property({ type: Array })
+], EdsWcCalendarDay.prototype, "events", void 0);
+__decorate([
+    state()
+], EdsWcCalendarDay.prototype, "_hovered", void 0);
+__decorate([
+    state()
+], EdsWcCalendarDay.prototype, "_showAll", void 0);
+EdsWcCalendarDay = __decorate([
+    customElement('eds-wc-calendar-day')
+], EdsWcCalendarDay);
+export { EdsWcCalendarDay };
+/* -------------------------------------------------------------------------- */
+/*  eds-wc-calendar-monthly — month grid.                                     */
+/* -------------------------------------------------------------------------- */
+/**
+ * `<eds-wc-calendar-monthly>` — the month grid view.
+ *
+ * Projection of the Angular `EdsCalendarMonthly`. Builds a 6×7 day grid for the
+ * reference `date`, honouring the disable rules, weekend/today flags, and event
+ * placement, and renders each cell as an `<eds-wc-calendar-day>`.
+ *
+ * @fires new-event-add - `detail: { day: EdsWcCalendarDayCell }` — fired when a day's
+ *   add-event button is clicked.
+ */
+let EdsWcCalendarMonthly = class EdsWcCalendarMonthly extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        this.disabledDays = [];
+        this.events = [];
+        this.hasEmptyValue = false;
+        this.mode = 'truncated';
+        this.startingDay = 0;
+        this.date = new Date();
+        this.fillPreviousMonth = false;
+        this.fillNextMonth = false;
+        this.disableFutureDates = false;
+        this.disablePastDates = false;
+        this.disableWeekends = false;
+        this.disabledDaysNotInMonth = true;
+        this.locale = 'en-US';
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after { box-sizing: border-box; }
+        :host { display: block; }
+
+        table {
+            width: 100%;
+            table-layout: fixed;
+            border-collapse: collapse;
+            border-radius: var(--eds-br-s);
+            overflow: hidden;
+        }
+        table.eds-calendar-monthly--compact {
+            width: auto;
+            table-layout: auto;
+        }
+        table.eds-calendar-monthly--compact .eds-calendar-monthly--day {
+            height: 4rem;
+        }
+
+        .eds-calendar-monthly--day-header {
+            padding: var(--eds-sp-xs);
+            text-align: left;
+            font: var(--eds-f-label-s-semibold);
+        }
+
+        .eds-calendar-monthly--day {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            border: 1px solid var(--eds-c-border-divider);
+            padding: var(--eds-sp-xs);
+            vertical-align: top;
+            height: 8rem;
+            position: relative;
+        }
+        .eds-calendar-monthly--day:hover { background-color: var(--eds-c-surface-hover); }
+        .eds-calendar-monthly--day.weekend { background-color: var(--eds-c-surface-default); }
+        .eds-calendar-monthly--day.disabled { opacity: 0.5; }
+    `; }
+    render() {
+        const weeks = this._monthlyCalendar();
+        const headers = this._daysHeaderArray();
+        return html `
+            <table
+                role="grid"
+                aria-label="Calendar"
+                class="${this.mode === 'compact' ? 'eds-calendar-monthly--compact' : 'eds-calendar-monthly--truncated'}">
+                <thead>
+                    <tr>
+                        ${headers.map(h => html `<th class="eds-calendar-monthly--day-header" scope="col">${h.short}</th>`)}
+                    </tr>
+                </thead>
+                <tbody>
+                    ${weeks.map(week => html `
+                        <tr>
+                            ${week.map(day => html `
+                                <td
+                                    class="eds-calendar-monthly--day ${day?.isWeekend ? 'weekend' : ''} ${day?.isDisabled ? 'disabled' : ''}"
+                                    aria-disabled="${day?.isDisabled ? 'true' : nothing}"
+                                    aria-current="${day?.isToday ? 'date' : nothing}">
+                                    ${day ? html `
+                                        <eds-wc-calendar-day
+                                            day-of-the-month="${day.day}"
+                                            ?is-selected="${!!day.isToday}"
+                                            ?disabled="${!!day.isDisabled}"
+                                            max-number-of-events-to-show="2"
+                                            .events="${day.events ?? []}"
+                                            @add-item="${() => this._onAddNewItem(day)}">
+                                        </eds-wc-calendar-day>
+                                    ` : nothing}
+                                </td>
+                            `)}
+                        </tr>
+                    `)}
+                </tbody>
+            </table>
+        `;
+    }
+    _onAddNewItem(day) {
+        this.dispatchEvent(new CustomEvent('new-event-add', { bubbles: true, composed: true, detail: { day } }));
+    }
+    _daysHeaderArray() {
+        const days = Array.from({ length: 7 }, (_, i) => new Date(2024, 0, 1 + i));
+        return days.slice(this.startingDay).concat(days.slice(0, this.startingDay)).map(day => ({
+            short: day.toLocaleDateString(this.locale, { weekday: 'short' }),
+            date: day,
+        }));
+    }
+    _monthlyCalendar() {
+        const currentEvents = this.events ?? [];
+        return this._generateCalendarGrid(this.date.getMonth() + 1, this.startingDay, {
+            year: this.date.getFullYear(),
+            fillPreviousMonth: this.fillPreviousMonth,
+            fillNextMonth: this.fillNextMonth,
+        })
+            .filter(week => week.some(day => day && day.isCurrentMonth))
+            .map(week => week.map(day => {
+            if (day) {
+                let isDisabled = false;
+                if (this.disableFutureDates && day.isFuture)
+                    isDisabled = true;
+                if (this.disablePastDates && day.isPast)
+                    isDisabled = true;
+                if (this.disableWeekends && day.isWeekend)
+                    isDisabled = true;
+                if (this.disabledDaysNotInMonth && !day.isCurrentMonth)
+                    isDisabled = true;
+                const date = new Date(day.year, day.month - 1, day.day);
+                if (this.disabledDays.some(d => d.toDateString() === date.toDateString())) {
+                    isDisabled = true;
+                }
+                day.isDisabled = isDisabled;
+                const dayEvents = currentEvents.filter(event => {
+                    const ed = new Date(event.date);
+                    return ed.getDate() === day.day &&
+                        (ed.getMonth() + 1) === day.month &&
+                        ed.getFullYear() === day.year;
+                });
+                if (dayEvents.length > 0)
+                    day.events = dayEvents;
+            }
+            return day;
+        }));
+    }
+    _generateCalendarGrid(month, startingDay, options = {}) {
+        if (!Number.isInteger(month) || month < 1 || month > 12) {
+            throw new Error('Month must be an integer between 1 and 12.');
+        }
+        const { year = new Date().getFullYear(), fillPreviousMonth = false, fillNextMonth = false } = options;
+        const grid = Array(6).fill(null).map(() => Array(7).fill(null));
+        const daysInMonth = this._getDaysInMonth(month, year);
+        const firstDayOfMonth = this._getFirstDayOfMonth(month, year);
+        const firstDayISO = (firstDayOfMonth + 6) % 7;
+        const columnOffset = (firstDayISO - startingDay + 7) % 7;
+        if (fillPreviousMonth && columnOffset > 0) {
+            const prevMonth = month === 1 ? 12 : month - 1;
+            const prevYear = month === 1 ? year - 1 : year;
+            const daysInPrevMonth = this._getDaysInMonth(prevMonth, prevYear);
+            for (let i = columnOffset - 1; i >= 0; i--) {
+                const day = daysInPrevMonth - (columnOffset - 1 - i);
+                grid[0][i] = this._createDayCell(day, prevMonth, prevYear, false);
+            }
+        }
+        let currentDay = 1;
+        let row = 0;
+        let col = columnOffset;
+        while (currentDay <= daysInMonth) {
+            grid[row][col] = this._createDayCell(currentDay, month, year, true);
+            currentDay++;
+            col++;
+            if (col === 7) {
+                col = 0;
+                row++;
+            }
+        }
+        if (fillNextMonth && (row < 6 || col > 0)) {
+            const nextMonth = month === 12 ? 1 : month + 1;
+            const nextYear = month === 12 ? year + 1 : year;
+            let nextMonthDay = 1;
+            while (row < 6) {
+                while (col < 7) {
+                    if (grid[row][col] === null) {
+                        grid[row][col] = this._createDayCell(nextMonthDay, nextMonth, nextYear, false);
+                        nextMonthDay++;
+                    }
+                    col++;
+                }
+                col = 0;
+                row++;
+            }
+        }
+        return grid;
+    }
+    _getDaysInMonth(month, year) {
+        return new Date(year, month, 0).getDate();
+    }
+    _getFirstDayOfMonth(month, year) {
+        return new Date(year, month - 1, 1).getDay();
+    }
+    _getISOWeekNumber(date) {
+        const tempDate = new Date(date.getTime());
+        tempDate.setHours(0, 0, 0, 0);
+        tempDate.setDate(tempDate.getDate() + 3 - (tempDate.getDay() + 6) % 7);
+        const week1 = new Date(tempDate.getFullYear(), 0, 4);
+        return 1 + Math.round(((tempDate.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
+    }
+    _compareDatesAtDayPrecision(date1, date2) {
+        const d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+        const d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+        if (d1 < d2)
+            return -1;
+        if (d1 > d2)
+            return 1;
+        return 0;
+    }
+    _createDayCell(day, month, year, isCurrentMonth) {
+        const cellDate = new Date(year, month - 1, day);
+        const today = new Date();
+        const weekendDays = [0, 6];
+        const comparison = this._compareDatesAtDayPrecision(cellDate, today);
+        const daysInMonth = this._getDaysInMonth(month, year);
+        return {
+            day,
+            month,
+            year,
+            isCurrentMonth,
+            dayOfWeek: cellDate.getDay(),
+            dateString: `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
+            isToday: comparison === 0,
+            isPast: comparison === -1,
+            isFuture: comparison === 1,
+            isWeekend: weekendDays.includes(cellDate.getDay()),
+            weekNumber: this._getISOWeekNumber(cellDate),
+            isFirstDayOfMonth: isCurrentMonth && day === 1,
+            isLastDayOfMonth: isCurrentMonth && day === daysInMonth,
+        };
+    }
+};
+__decorate([
+    property({ type: Array, attribute: false })
+], EdsWcCalendarMonthly.prototype, "disabledDays", void 0);
+__decorate([
+    property({ type: Array })
+], EdsWcCalendarMonthly.prototype, "events", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'has-empty-value' })
+], EdsWcCalendarMonthly.prototype, "hasEmptyValue", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcCalendarMonthly.prototype, "mode", void 0);
+__decorate([
+    property({ type: Number, attribute: 'starting-day', converter: (v) => parseStartingDay(v ?? 0) })
+], EdsWcCalendarMonthly.prototype, "startingDay", void 0);
+__decorate([
+    property({ attribute: false })
+], EdsWcCalendarMonthly.prototype, "date", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'fill-previous-month' })
+], EdsWcCalendarMonthly.prototype, "fillPreviousMonth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'fill-next-month' })
+], EdsWcCalendarMonthly.prototype, "fillNextMonth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'disable-future-dates' })
+], EdsWcCalendarMonthly.prototype, "disableFutureDates", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'disable-past-dates' })
+], EdsWcCalendarMonthly.prototype, "disablePastDates", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'disable-weekends' })
+], EdsWcCalendarMonthly.prototype, "disableWeekends", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'disabled-days-not-in-month' })
+], EdsWcCalendarMonthly.prototype, "disabledDaysNotInMonth", void 0);
+__decorate([
+    property({ type: String })
+], EdsWcCalendarMonthly.prototype, "locale", void 0);
+EdsWcCalendarMonthly = __decorate([
+    customElement('eds-wc-calendar-monthly')
+], EdsWcCalendarMonthly);
+export { EdsWcCalendarMonthly };
+/* -------------------------------------------------------------------------- */
+/*  eds-wc-calendar-header — navigation / mode header.                        */
+/* -------------------------------------------------------------------------- */
+/**
+ * `<eds-wc-calendar-header>` — the calendar navigation header.
+ *
+ * Projection of the Angular `EdsCalendarHeader`. Renders prev/next navigation, the
+ * formatted current-date label (+ optional sub-label), and a "Today" button. The
+ * `current-date` is a controlled value: navigation dispatches `navigation` with the
+ * computed new date; the consumer updates `current-date`.
+ *
+ * @fires navigation - `detail: { direction: 'previous' | 'next', current: string, new: string, mode: EdsWcCalendarMode }`
+ * @fires today - `detail: { date: string }` — fired when the "Today" button is clicked.
+ */
+let EdsWcCalendarHeader = class EdsWcCalendarHeader extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        this.containWeekends = true;
+        this.dateFormatOptions = null;
+        this.mode = 'monthly';
+        this.currentDate = '';
+        this.subLabel = '';
+        this.showTodayButton = true;
+        this.showNavigationButtons = true;
+        this.startingDay = 0;
+        this.locale = 'en-US';
+    }
+    get _current() {
+        const d = this.currentDate ? new Date(this.currentDate) : new Date();
+        return isNaN(d.getTime()) ? new Date() : d;
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after { box-sizing: border-box; }
+        :host { display: block; }
+
+        .eds-calendar-header__nav {
+            display: flex; justify-content: space-between; align-items: center; gap: var(--eds-sp-s);
+        }
+        .eds-calendar-header__left { display: flex; align-items: center; gap: var(--eds-sp-s); }
+        .eds-calendar-header__label { display: flex; flex-direction: column; align-items: flex-start; }
+        .eds-calendar-header__date { font: var(--eds-f-label-l-semibold); }
+        .eds-calendar-header__sublabel { font: var(--eds-f-paragraph-xs); color: var(--eds-c-foreground-subtler); }
+
+        .eds-calendar-header__nav-btn {
+            display: inline-flex; align-items: center; justify-content: center;
+            width: var(--eds-si-xl, 1.75rem); height: var(--eds-si-xl, 1.75rem);
+            border: var(--eds-bw-xs) solid var(--eds-c-border-neutral); background: var(--eds-c-surface-elevation);
+            border-radius: var(--eds-br-s); cursor: pointer; color: var(--eds-c-foreground-subtle);
+            font-family: inherit;
+        }
+        .eds-calendar-header__nav-btn:hover { background: var(--eds-c-surface-neutral-subtle); }
+        .eds-calendar-header__nav-btn:focus-visible { outline: 2px solid var(--eds-c-border-focus); outline-offset: 2px; }
+        .eds-calendar-header__nav-btn svg { width: var(--eds-is-s); height: var(--eds-is-s); fill: currentColor; }
+
+        .eds-calendar-header__today-btn {
+            padding: var(--eds-sp-2xs) var(--eds-sp-s);
+            border: var(--eds-bw-xs) solid var(--eds-c-border-neutral); background: var(--eds-c-surface-elevation);
+            border-radius: var(--eds-br-s); cursor: pointer; font: var(--eds-f-label-m-semibold);
+            color: var(--eds-c-foreground); font-family: inherit;
+        }
+        .eds-calendar-header__today-btn:hover:not(:disabled) { background: var(--eds-c-surface-neutral-subtle); }
+        .eds-calendar-header__today-btn:focus-visible { outline: 2px solid var(--eds-c-border-focus); outline-offset: 2px; }
+        .eds-calendar-header__today-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    `; }
+    render() {
+        const baseUrl = EdsBaseElement.assetsBaseUrl;
+        const prevHref = `${baseUrl}/eds/icons/sprites/core.svg#caret-left`;
+        const nextHref = `${baseUrl}/eds/icons/sprites/core.svg#caret-right`;
+        return html `
+            <div class="eds-calendar-header__nav">
+                <div class="eds-calendar-header__left">
+                    ${this.showNavigationButtons ? html `
+                        <button
+                            type="button"
+                            class="eds-calendar-header__nav-btn"
+                            aria-label="Go to previous"
+                            @click="${this.navigatePrevious}">
+                            <svg aria-hidden="true"><use href="${prevHref}"></use></svg>
+                        </button>
+                    ` : nothing}
+                    <div class="eds-calendar-header__label" style="min-width:${this._maxMonthWidth()}">
+                        <span class="eds-calendar-header__date">${this._formattedDate()}</span>
+                        ${this.subLabel ? html `<span class="eds-calendar-header__sublabel">${this.subLabel}</span>` : nothing}
+                    </div>
+                    ${this.showNavigationButtons ? html `
+                        <button
+                            type="button"
+                            class="eds-calendar-header__nav-btn"
+                            aria-label="Go to next"
+                            @click="${this.navigateNext}">
+                            <svg aria-hidden="true"><use href="${nextHref}"></use></svg>
+                        </button>
+                    ` : nothing}
+                </div>
+                ${this.showTodayButton ? html `
+                    <button
+                        type="button"
+                        class="eds-calendar-header__today-btn"
+                        ?disabled="${this._isCurrentDateToday()}"
+                        @click="${this.goToToday}">
+                        Today
+                    </button>
+                ` : nothing}
+            </div>
+        `;
+    }
+    navigatePrevious() {
+        const current = this._current;
+        let next;
+        switch (this.mode) {
+            case 'daily':
+                next = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 1);
+                break;
+            case 'weekly':
+                next = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 7);
+                break;
+            case 'monthly':
+            default:
+                next = new Date(current.getFullYear(), current.getMonth() - 1, 1);
+                break;
+        }
+        this.currentDate = next.toISOString();
+        this.dispatchEvent(new CustomEvent('navigation', {
+            bubbles: true, composed: true,
+            detail: { direction: 'previous', current: current.toISOString(), new: next.toISOString(), mode: this.mode },
+        }));
+    }
+    navigateNext() {
+        const current = this._current;
+        let next;
+        switch (this.mode) {
+            case 'daily':
+                next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
+                break;
+            case 'weekly':
+                next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 7);
+                break;
+            case 'monthly':
+            default:
+                next = new Date(current.getFullYear(), current.getMonth() + 1, 1);
+                break;
+        }
+        this.currentDate = next.toISOString();
+        this.dispatchEvent(new CustomEvent('navigation', {
+            bubbles: true, composed: true,
+            detail: { direction: 'next', current: current.toISOString(), new: next.toISOString(), mode: this.mode },
+        }));
+    }
+    goToToday() {
+        const today = new Date();
+        this.dispatchEvent(new CustomEvent('today', { bubbles: true, composed: true, detail: { date: today.toISOString() } }));
+    }
+    _formattedOptions() {
+        if (this.dateFormatOptions !== null)
+            return this.dateFormatOptions;
+        if (this.mode === 'monthly')
+            return { month: 'long', year: 'numeric' };
+        if (this.mode === 'weekly')
+            return { year: 'numeric', month: 'short', day: 'numeric' };
+        return { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
+    }
+    _formattedDate() {
+        const options = this._formattedOptions();
+        if (this.mode === 'monthly') {
+            return this._current.toLocaleDateString(this.locale, options);
+        }
+        else if (this.mode === 'weekly') {
+            const { start, end } = this._getWeekRange(this._current, this.startingDay);
+            return `${start.toLocaleDateString(this.locale, options)} - ${end.toLocaleDateString(this.locale, options)}`;
+        }
+        else if (this.mode === 'daily') {
+            return this._current.toLocaleDateString(this.locale, options);
+        }
+        return '';
+    }
+    _isCurrentDateToday() {
+        const current = this._current;
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        if (this.mode === 'daily') {
+            return current.getDate() === today.getDate() &&
+                current.getMonth() === today.getMonth() &&
+                current.getFullYear() === today.getFullYear();
+        }
+        else if (this.mode === 'weekly') {
+            const { start, end } = this._getWeekRange(current, this.startingDay);
+            const startDate = new Date(start);
+            startDate.setHours(0, 0, 0, 0);
+            const endDate = new Date(end);
+            endDate.setHours(23, 59, 59, 999);
+            return today >= startDate && today <= endDate;
+        }
+        return current.getMonth() === today.getMonth() && current.getFullYear() === today.getFullYear();
+    }
+    _maxMonthWidth() {
+        const currentYear = this._current.getFullYear();
+        const monthNames = [];
+        for (let i = 0; i < 12; i++) {
+            monthNames.push(new Date(currentYear, i, 1).toLocaleDateString(this.locale, this._formattedOptions()));
+        }
+        const longestMonth = monthNames.reduce((a, b) => a.length > b.length ? a : b);
+        return this.mode === 'weekly' ? `${longestMonth.length * 2 + 2}ch` : `${longestMonth.length}ch`;
+    }
+    _getWeekRange(date, startDay) {
+        const jsDay = date.getDay();
+        const targetStartDay = (startDay + 1) % 7;
+        const daysBack = (jsDay - targetStartDay + 7) % 7;
+        const start = new Date(date);
+        start.setDate(date.getDate() - daysBack);
+        const end = new Date(start);
+        const daysInWeek = this.containWeekends ? 6 : 4;
+        end.setDate(start.getDate() + daysInWeek);
+        return { start, end };
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'contain-weekends' })
+], EdsWcCalendarHeader.prototype, "containWeekends", void 0);
+__decorate([
+    property({ attribute: false })
+], EdsWcCalendarHeader.prototype, "dateFormatOptions", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcCalendarHeader.prototype, "mode", void 0);
+__decorate([
+    property({ type: String, attribute: 'current-date' })
+], EdsWcCalendarHeader.prototype, "currentDate", void 0);
+__decorate([
+    property({ type: String, attribute: 'sub-label' })
+], EdsWcCalendarHeader.prototype, "subLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-today-button' })
+], EdsWcCalendarHeader.prototype, "showTodayButton", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-navigation-buttons' })
+], EdsWcCalendarHeader.prototype, "showNavigationButtons", void 0);
+__decorate([
+    property({ type: Number, attribute: 'starting-day', converter: (v) => parseStartingDay(v ?? 0) })
+], EdsWcCalendarHeader.prototype, "startingDay", void 0);
+__decorate([
+    property({ type: String })
+], EdsWcCalendarHeader.prototype, "locale", void 0);
+EdsWcCalendarHeader = __decorate([
+    customElement('eds-wc-calendar-header')
+], EdsWcCalendarHeader);
+export { EdsWcCalendarHeader };
+/* -------------------------------------------------------------------------- */
+/*  eds-wc-calendar-weekly-day-header — day column heading (weekly view).     */
+/* -------------------------------------------------------------------------- */
+/**
+ * `<eds-wc-calendar-weekly-day-header>` — a weekly-view column heading.
+ *
+ * Projection of the Angular `EdsCalendarWeeklyDayHeader`. Renders the short weekday
+ * name (bold) followed by the day-of-month long form, plus an optional sub-label.
+ */
+let EdsWcCalendarWeeklyDayHeader = class EdsWcCalendarWeeklyDayHeader extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        this.date = new Date();
+        this.sublabel = '';
+        this.locale = 'en-US';
+    }
+    get _date() {
+        const d = this.date instanceof Date ? this.date : new Date(this.date);
+        return isNaN(d.getTime()) ? new Date() : d;
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after { box-sizing: border-box; }
+        :host { display: flex; flex-direction: row; justify-content: space-between; width: 100%; }
+        .eds-calendar-weekly-day-header__sublabel { font: var(--eds-f-paragraph-xs); color: var(--eds-c-foreground-subtler); }
+    `; }
+    render() {
+        const dayOfTheWeek = this._date.toLocaleDateString(this.locale, { weekday: 'short' }).toUpperCase();
+        const dayOfTheMonth = this._date.toLocaleDateString(this.locale, { day: 'numeric', month: 'long' });
+        return html `
+            <span class="eds-calendar-weekly-day-header__day"><strong>${dayOfTheWeek}</strong> ${dayOfTheMonth}</span>
+            ${this.sublabel ? html `<span class="eds-calendar-weekly-day-header__sublabel">${this.sublabel}</span>` : nothing}
+        `;
+    }
+};
+__decorate([
+    property({ attribute: 'date' })
+], EdsWcCalendarWeeklyDayHeader.prototype, "date", void 0);
+__decorate([
+    property({ type: String })
+], EdsWcCalendarWeeklyDayHeader.prototype, "sublabel", void 0);
+__decorate([
+    property({ type: String })
+], EdsWcCalendarWeeklyDayHeader.prototype, "locale", void 0);
+EdsWcCalendarWeeklyDayHeader = __decorate([
+    customElement('eds-wc-calendar-weekly-day-header')
+], EdsWcCalendarWeeklyDayHeader);
+export { EdsWcCalendarWeeklyDayHeader };
+/* -------------------------------------------------------------------------- */
+/*  eds-wc-calendar-weekly-day-header-action — heading + actions dropdown.    */
+/* -------------------------------------------------------------------------- */
+/**
+ * `<eds-wc-calendar-weekly-day-header-action>` — a weekly-view column heading with an
+ * actions dropdown.
+ *
+ * Projection of the Angular `EdsCalendarWeeklyDayHeaderAction`. Renders the weekday
+ * label plus a "more options" menu built from `options`. Selecting an option invokes
+ * its `callback` (if provided) and dispatches `action`.
+ *
+ * @fires action - `detail: { option: EdsWcCalendarDayHeaderActionOption, date: string }`
+ */
+let EdsWcCalendarWeeklyDayHeaderAction = class EdsWcCalendarWeeklyDayHeaderAction extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.options = [];
+        this.date = new Date();
+        this.sublabel = '';
+        this.locale = 'en-US';
+        this._open = false;
+    }
+    get _date() {
+        const d = this.date instanceof Date ? this.date : new Date(this.date);
+        return isNaN(d.getTime()) ? new Date() : d;
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after { box-sizing: border-box; }
+        :host { display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; }
+        :host([disabled]) { opacity: 0.5; pointer-events: none; }
+
+        .eds-calendar-weekly-day-header-action__sublabel { font: var(--eds-f-paragraph-xs); color: var(--eds-c-foreground-subtler); display: block; }
+
+        .eds-calendar-weekly-day-header-action__trigger {
+            display: inline-flex; align-items: center; justify-content: center;
+            width: var(--eds-si-xl, 1.75rem); height: var(--eds-si-xl, 1.75rem);
+            border: none; background: transparent; cursor: pointer; color: var(--eds-c-foreground-subtle);
+            border-radius: var(--eds-br-s); font-family: inherit;
+        }
+        .eds-calendar-weekly-day-header-action__trigger:hover { background: var(--eds-c-surface-neutral-subtle); }
+        .eds-calendar-weekly-day-header-action__trigger:focus-visible { outline: 2px solid var(--eds-c-border-focus); outline-offset: 2px; }
+        .eds-calendar-weekly-day-header-action__trigger svg { width: var(--eds-is-s); height: var(--eds-is-s); fill: currentColor; }
+
+        .eds-calendar-weekly-day-header-action__menu {
+            display: none; position: absolute; top: 100%; right: 0; z-index: 10000; margin-top: var(--eds-sp-3xs);
+            background: var(--eds-c-surface-elevation); border: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+            border-radius: var(--eds-br-m); box-shadow: var(--eds-sh-2); padding: var(--eds-sp-3xs); min-width: 160px;
+        }
+        .eds-calendar-weekly-day-header-action__menu.open { display: block; }
+        .eds-calendar-weekly-day-header-action__item {
+            display: block; width: 100%; text-align: left;
+            padding: var(--eds-sp-2xs) var(--eds-sp-s); border: none; background: transparent; cursor: pointer;
+            font: var(--eds-f-paragraph-m); color: var(--eds-c-foreground); border-radius: var(--eds-br-s); font-family: inherit;
+        }
+        .eds-calendar-weekly-day-header-action__item:hover { background: var(--eds-c-surface-neutral-subtle); }
+        .eds-calendar-weekly-day-header-action__item:focus-visible { outline: 2px solid var(--eds-c-border-focus); outline-offset: -2px; }
+    `; }
+    render() {
+        const baseUrl = EdsBaseElement.assetsBaseUrl;
+        const dotsHref = `${baseUrl}/eds/icons/sprites/core.svg#dots-three-vertical`;
+        const dayOfTheWeek = this._date.toLocaleDateString(this.locale, { weekday: 'short' }).toUpperCase();
+        const dayOfTheMonth = this._date.toLocaleDateString(this.locale, { day: 'numeric', month: 'long' });
+        return html `
+            <span class="eds-calendar-weekly-day-header-action__left">
+                <strong>${dayOfTheWeek}</strong> ${dayOfTheMonth}
+                ${this.sublabel ? html `<span class="eds-calendar-weekly-day-header-action__sublabel">${this.sublabel}</span>` : nothing}
+            </span>
+            <div class="eds-calendar-weekly-day-header-action__right">
+                <button
+                    type="button"
+                    class="eds-calendar-weekly-day-header-action__trigger"
+                    aria-label="More options"
+                    aria-haspopup="menu"
+                    aria-expanded="${this._open ? 'true' : 'false'}"
+                    ?disabled="${this.disabled}"
+                    @click="${this._toggle}">
+                    <svg aria-hidden="true"><use href="${dotsHref}"></use></svg>
+                </button>
+                <div class="eds-calendar-weekly-day-header-action__menu ${this._open ? 'open' : ''}" role="menu">
+                    ${this.options.map(option => html `
+                        <button
+                            type="button"
+                            role="menuitem"
+                            class="eds-calendar-weekly-day-header-action__item"
+                            @click="${(e) => this._select(e, option)}">
+                            ${option.label}
+                        </button>
+                    `)}
+                </div>
+            </div>
+        `;
+    }
+    _toggle() {
+        this._open = !this._open;
+    }
+    _select(e, option) {
+        this._open = false;
+        option.callback?.(e, this._date);
+        this.dispatchEvent(new CustomEvent('action', {
+            bubbles: true, composed: true,
+            detail: { option, date: this._date.toISOString() },
+        }));
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EdsWcCalendarWeeklyDayHeaderAction.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Array })
+], EdsWcCalendarWeeklyDayHeaderAction.prototype, "options", void 0);
+__decorate([
+    property({ attribute: 'date' })
+], EdsWcCalendarWeeklyDayHeaderAction.prototype, "date", void 0);
+__decorate([
+    property({ type: String })
+], EdsWcCalendarWeeklyDayHeaderAction.prototype, "sublabel", void 0);
+__decorate([
+    property({ type: String })
+], EdsWcCalendarWeeklyDayHeaderAction.prototype, "locale", void 0);
+__decorate([
+    state()
+], EdsWcCalendarWeeklyDayHeaderAction.prototype, "_open", void 0);
+EdsWcCalendarWeeklyDayHeaderAction = __decorate([
+    customElement('eds-wc-calendar-weekly-day-header-action')
+], EdsWcCalendarWeeklyDayHeaderAction);
+export { EdsWcCalendarWeeklyDayHeaderAction };
+let EdsWcCalendarWeeklyDayContent = class EdsWcCalendarWeeklyDayContent extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.subLabel = '';
+        this.color = 'primary';
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after { box-sizing: border-box; }
+        :host {
+            display: block;
+            --_eds-calendar-event-border: var(--eds-c-border-primary);
+        }
+        :host([color="success"]) { --_eds-calendar-event-border: var(--eds-c-border-success); }
+        :host([color="info"]) { --_eds-calendar-event-border: var(--eds-c-border-info); }
+        :host([color="warning"]) { --_eds-calendar-event-border: var(--eds-c-border-warning); }
+        :host([color="critical"]) { --_eds-calendar-event-border: var(--eds-c-border-critical); }
+
+        .eds-calendar-event__card {
+            background: var(--eds-c-surface-elevation);
+            border: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+            border-left: var(--eds-bw-m) solid var(--_eds-calendar-event-border);
+            border-radius: var(--eds-br-m);
+            padding: var(--eds-sp-xs) var(--eds-sp-s);
+            box-shadow: var(--eds-sh-1);
+        }
+        .eds-calendar-event__sublabel { font: var(--eds-f-paragraph-xs); color: var(--eds-c-foreground-subtler); }
+    `; }
+    render() {
+        return html `
+            <div class="eds-calendar-event__card">
+                <strong>${this.label}</strong>
+                ${this.subLabel ? html `<div class="eds-calendar-event__sublabel">${this.subLabel}</div>` : nothing}
+            </div>
+        `;
+    }
+};
+__decorate([
+    property({ type: String })
+], EdsWcCalendarWeeklyDayContent.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: 'sub-label' })
+], EdsWcCalendarWeeklyDayContent.prototype, "subLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcCalendarWeeklyDayContent.prototype, "color", void 0);
+EdsWcCalendarWeeklyDayContent = __decorate([
+    customElement('eds-wc-calendar-weekly-day-content')
+], EdsWcCalendarWeeklyDayContent);
+export { EdsWcCalendarWeeklyDayContent };
+/**
+ * `<eds-wc-calendar-weekly>` — the week view.
+ *
+ * Projection of the Angular `EdsCalendarWeekly`. Renders one column per day of the
+ * week (optionally hiding weekends), each with a `<eds-wc-calendar-weekly-day-header>`
+ * and its events as `<eds-wc-calendar-weekly-day-content>` cards. Supports native HTML5
+ * drag-and-drop of events between days (mirrors the Angular CDK drag-drop behavior).
+ *
+ * @fires event-moved - `detail: { event: EdsWcCalendarEvent, newDate: string }` — an
+ *   event was dragged to another day.
+ * @fires day-action - `detail: { day: WeeklyDayData }` — reserved for day header actions.
+ */
+let EdsWcCalendarWeekly = class EdsWcCalendarWeekly extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        this.dragAndDrop = true;
+        this.date = new Date();
+        this.events = [];
+        this.showWeekends = false;
+        this.startingDay = 0;
+        this.disabledDays = [];
+        this.locale = 'en-US';
+        this._dragEventId = null;
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after { box-sizing: border-box; }
+        :host { display: flex; gap: var(--eds-sp-2xs); overflow-x: auto; }
+
+        .eds-day-column {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background-color: var(--eds-c-surface);
+            border-radius: var(--eds-br-s);
+        }
+        .eds-day-column--weekend { background-color: var(--eds-c-surface-neutral-subtle); }
+        .eds-day-column--today { background-color: var(--eds-c-surface-info-subtler); }
+        .eds-day-column--disabled { opacity: 0.5; }
+        .eds-day-column:focus-visible { outline: 2px solid var(--eds-c-border-focus); outline-offset: -2px; }
+
+        .eds-day-header { flex-shrink: 0; padding: var(--eds-sp-xs) var(--eds-sp-s); }
+
+        .eds-day-content {
+            display: flex; flex-direction: column; gap: var(--eds-sp-xs);
+            flex: 1; overflow-y: auto; padding: var(--eds-sp-xs); min-height: 4rem;
+        }
+        .eds-day-content--dragover { outline: 2px dashed var(--eds-c-border-primary); outline-offset: -2px; }
+
+        .eds-event-card { border-radius: var(--eds-br-s); }
+        .eds-event-card[draggable="true"] { cursor: grab; }
+    `; }
+    render() {
+        const days = this._daysInWeek();
+        return html `
+            ${days.map(day => html `
+                <div
+                    class="eds-day-column ${day.isWeekend ? 'eds-day-column--weekend' : ''} ${day.isToday ? 'eds-day-column--today' : ''} ${day.disabled ? 'eds-day-column--disabled' : ''}"
+                    tabindex="0"
+                    role="region"
+                    aria-label="${day.date.toLocaleDateString()}"
+                    aria-current="${day.isToday ? 'date' : nothing}"
+                    aria-disabled="${day.disabled ? 'true' : nothing}">
+                    <div class="eds-day-header">
+                        <eds-wc-calendar-weekly-day-header .date="${day.date}" locale="${this.locale}"></eds-wc-calendar-weekly-day-header>
+                    </div>
+                    <div
+                        class="eds-day-content"
+                        @dragover="${(e) => this._onDragOver(e)}"
+                        @dragleave="${(e) => this._onDragLeave(e)}"
+                        @drop="${(e) => this._onDrop(e, day)}">
+                        ${day.events.map(event => html `
+                            <div
+                                class="eds-event-card"
+                                draggable="${this.dragAndDrop ? 'true' : 'false'}"
+                                @dragstart="${() => this._onDragStart(event)}"
+                                @dragend="${this._onDragEnd}">
+                                <eds-wc-calendar-weekly-day-content
+                                    color="${event.type || 'primary'}"
+                                    label="${event.label}"
+                                    sub-label="${event.subLabel ?? ''}">
+                                </eds-wc-calendar-weekly-day-content>
+                            </div>
+                        `)}
+                    </div>
+                </div>
+            `)}
+        `;
+    }
+    _daysInWeek() {
+        const firstDayOfWeek = this._getWeekStartDate(this.date, this.startingDay);
+        const days = [];
+        const events = this.events ?? [];
+        for (let i = 0; i < 7; i++) {
+            const date = new Date(firstDayOfWeek);
+            date.setDate(firstDayOfWeek.getDate() + i);
+            if (!this.showWeekends && (date.getDay() === 0 || date.getDay() === 6))
+                continue;
+            days.push({
+                id: i,
+                date,
+                isToday: date.toDateString() === new Date().toDateString(),
+                isWeekend: date.getDay() === 0 || date.getDay() === 6,
+                disabled: this.disabledDays.some(d => d.toDateString() === date.toDateString()),
+                events: events.filter(event => {
+                    const ed = new Date(event.date);
+                    return ed.getFullYear() === date.getFullYear() &&
+                        ed.getMonth() === date.getMonth() &&
+                        ed.getDate() === date.getDate();
+                }),
+            });
+        }
+        return days;
+    }
+    _getWeekStartDate(referenceDate, startingDay) {
+        const jsDay = referenceDate.getDay();
+        const targetStartDay = (startingDay + 1) % 7;
+        const daysBack = (jsDay - targetStartDay + 7) % 7;
+        const result = new Date(referenceDate);
+        result.setDate(referenceDate.getDate() - daysBack);
+        return result;
+    }
+    _onDragStart(event) {
+        if (!this.dragAndDrop)
+            return;
+        this._dragEventId = event.id;
+    }
+    _onDragEnd() {
+        this._dragEventId = null;
+    }
+    _onDragOver(e) {
+        if (!this.dragAndDrop || this._dragEventId === null)
+            return;
+        e.preventDefault();
+        e.currentTarget.classList.add('eds-day-content--dragover');
+    }
+    _onDragLeave(e) {
+        e.currentTarget.classList.remove('eds-day-content--dragover');
+    }
+    _onDrop(e, day) {
+        if (!this.dragAndDrop || this._dragEventId === null)
+            return;
+        e.preventDefault();
+        e.currentTarget.classList.remove('eds-day-content--dragover');
+        const events = this.events ?? [];
+        const movedEvent = events.find(ev => ev.id === this._dragEventId);
+        this._dragEventId = null;
+        if (!movedEvent)
+            return;
+        const newDate = day.date;
+        const updated = events.map(ev => ev.id === movedEvent.id ? { ...ev, date: newDate.toISOString() } : ev);
+        this.events = updated;
+        this.dispatchEvent(new CustomEvent('event-moved', {
+            bubbles: true, composed: true,
+            detail: { event: { ...movedEvent, date: newDate.toISOString() }, newDate: newDate.toISOString() },
+        }));
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'drag-and-drop' })
+], EdsWcCalendarWeekly.prototype, "dragAndDrop", void 0);
+__decorate([
+    property({ attribute: false })
+], EdsWcCalendarWeekly.prototype, "date", void 0);
+__decorate([
+    property({ type: Array })
+], EdsWcCalendarWeekly.prototype, "events", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-weekends' })
+], EdsWcCalendarWeekly.prototype, "showWeekends", void 0);
+__decorate([
+    property({ type: Number, attribute: 'starting-day', converter: (v) => parseStartingDay(v ?? 0) })
+], EdsWcCalendarWeekly.prototype, "startingDay", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], EdsWcCalendarWeekly.prototype, "disabledDays", void 0);
+__decorate([
+    property({ type: String })
+], EdsWcCalendarWeekly.prototype, "locale", void 0);
+__decorate([
+    state()
+], EdsWcCalendarWeekly.prototype, "_dragEventId", void 0);
+EdsWcCalendarWeekly = __decorate([
+    customElement('eds-wc-calendar-weekly')
+], EdsWcCalendarWeekly);
+export { EdsWcCalendarWeekly };
+/* -------------------------------------------------------------------------- */
+/*  eds-wc-calendar — shell that composes header + monthly + weekly.          */
+/* -------------------------------------------------------------------------- */
+/**
+ * `<eds-wc-calendar>` — the calendar shell.
+ *
+ * Projection of the Angular `EdsCalendar`. A structural container that composes a
+ * calendar header, a monthly grid, and/or a weekly view via slots. Mirrors the
+ * Angular component whose template is three `<ng-content>` projections
+ * (`eds-calendar-header`, `eds-calendar-monthly`, `eds-calendar-weekly`).
+ *
+ * @slot header - Slot for an `<eds-wc-calendar-header>`.
+ * @slot monthly - Slot for an `<eds-wc-calendar-monthly>`.
+ * @slot weekly - Slot for an `<eds-wc-calendar-weekly>`.
+ * @slot - Default slot (any additional calendar content).
+ */
+let EdsWcCalendar = class EdsWcCalendar extends EdsBaseElement {
+    static { this.styles = css `
+        :host, *, *::before, *::after { box-sizing: border-box; }
+        :host { display: block; width: 100%; }
+    `; }
+    render() {
+        return html `
+            <slot name="header"></slot>
+            <slot name="monthly"></slot>
+            <slot name="weekly"></slot>
+            <slot></slot>
+        `;
+    }
+};
+EdsWcCalendar = __decorate([
+    customElement('eds-wc-calendar')
+], EdsWcCalendar);
+export { EdsWcCalendar };
+//# sourceMappingURL=eds-wc-calendar.js.map