@vonage/vivid 5.15.1 → 5.16.0

package/unbundled/definition21.cjs

@@ -0,0 +1,305 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_enums = require("./enums.cjs");
+const require_calendar_event = require("./calendar-event.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+let ramda = require("ramda");
+//#region src/lib/calendar/calendar.scss?inline
+var calendar_default = ":host{block-size:inherit;max-block-size:inherit;display:block;overflow:auto}ol{margin:0;padding:0;list-style:none}[role=grid i]{z-index:0;grid-template-columns:min-content auto;grid-template-areas:\"filler column-headers\"\"row-headers calendar\";inline-size:max(100%,500px);min-inline-size:880px;margin:auto;display:grid;position:relative}.row-headers{grid-area:row-headers;grid-template-rows:repeat(24,1fr);margin-inline-end:2px;display:grid}.row-headers>[role=rowheader i]{justify-content:flex-end;align-items:flex-end;display:flex}.row-headers>[role=rowheader i]>time{font:var(--vvd-typography-base-condensed);text-transform:uppercase;white-space:nowrap;font-size:small;line-height:1}.sticky-column .row-headers,.sticky-all .row-headers{z-index:1;background-color:var(--calendar-column-background-color,var(--vvd-color-canvas));margin-inline-end:3px;position:sticky;inset-inline-start:0}.calendar-row{display:contents}.calendar-grid-presentation{background:var(--vvd-color-surface-2dp);counter-reset:listing;filter:var(--vvd-shadow-surface-2dp);border-radius:8px;grid-template:repeat(24,1fr)/repeat(7,1fr);grid-area:calendar;grid-auto-flow:column;gap:1px;display:grid;overflow:hidden}.hours{display:contents}.hours>[role=listitem i]{grid-column:1/8;grid-row:var(--row);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));pointer-events:none;position:relative}.hours>[role=listitem i]:not(:first-child):after{border-block-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";inline-size:100%;margin-block-start:-1px;position:absolute}.hours>[role=listitem i]:nth-child(24n+1){--row:1}.hours>[role=listitem i]:nth-child(24n+2){--row:2}.hours>[role=listitem i]:nth-child(24n+3){--row:3}.hours>[role=listitem i]:nth-child(24n+4){--row:4}.hours>[role=listitem i]:nth-child(24n+5){--row:5}.hours>[role=listitem i]:nth-child(24n+6){--row:6}.hours>[role=listitem i]:nth-child(24n+7){--row:7}.hours>[role=listitem i]:nth-child(24n+8){--row:8}.hours>[role=listitem i]:nth-child(24n+9){--row:9}.hours>[role=listitem i]:nth-child(24n+10){--row:10}.hours>[role=listitem i]:nth-child(24n+11){--row:11}.hours>[role=listitem i]:nth-child(24n+12){--row:12}.hours>[role=listitem i]:nth-child(24n+13){--row:13}.hours>[role=listitem i]:nth-child(24n+14){--row:14}.hours>[role=listitem i]:nth-child(24n+15){--row:15}.hours>[role=listitem i]:nth-child(24n+16){--row:16}.hours>[role=listitem i]:nth-child(24n+17){--row:17}.hours>[role=listitem i]:nth-child(24n+18){--row:18}.hours>[role=listitem i]:nth-child(24n+19){--row:19}.hours>[role=listitem i]:nth-child(24n+20){--row:20}.hours>[role=listitem i]:nth-child(24n+21){--row:21}.hours>[role=listitem i]:nth-child(24n+22){--row:22}.hours>[role=listitem i]:nth-child(24n+23){--row:23}.hours>[role=listitem i]:nth-child(24n+24){--row:24}[role=gridcell i]{grid-auto-flow:column;gap:1px;display:grid}[role=gridcell i],[role=columnheader i],[role=columnheader i] [role=button i]{position:relative}[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{z-index:-1;background-color:var(--vvd-color-information-400);content:\"\";position:absolute;inset:0}[role=gridcell i]:focus,[role=columnheader i]:focus,[role=columnheader i] [role=button i]:focus{outline:none}[role=gridcell i]:not(:focus-visible):before,[role=columnheader i]:not(:focus-visible):before,[role=columnheader i] [role=button i]:not(:focus-visible):before{display:none}.columns{display:contents}.columns>[role=gridcell i]{grid-column:var(--column);grid-row:1/25;position:relative}.columns>[role=gridcell i]:first-child{--column:1}.columns>[role=gridcell i]:nth-child(2){--column:2}.columns>[role=gridcell i]:nth-child(3){--column:3}.columns>[role=gridcell i]:nth-child(4){--column:4}.columns>[role=gridcell i]:nth-child(5){--column:5}.columns>[role=gridcell i]:nth-child(6){--column:6}.columns>[role=gridcell i]:nth-child(7){--column:7}.columns>[role=gridcell i]:not(:first-child):after{border-inline-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";block-size:100%;margin-inline-start:-1px;position:absolute}.column-headers{grid-area:column-headers;grid-template-columns:repeat(7,1fr);display:grid}.column-headers [role=columnheader i] h2{font:var(--vvd-typography-heading-4);grid-template-columns:1fr auto 1fr;align-items:baseline;margin:0;display:grid}.column-headers [role=columnheader i] h2>em{font:inherit;inline-size:min-content;inset-inline-start:0}.column-headers [role=columnheader i] h2>small{font:var(--vvd-typography-base-condensed);text-transform:uppercase}.sticky-header .column-headers,.sticky-all .column-headers{z-index:1;background-color:var(--calendar-header-background-color,var(--vvd-color-canvas));margin-block-end:3px;position:sticky;inset-block-start:0}.filler{background-color:#0000;grid-area:filler}.sticky-header .filler,.sticky-all .filler,.sticky-column .filler{z-index:2;background-color:var(--calendar-header-background-color,var(--vvd-color-canvas));margin-block-end:3px;position:sticky}.sticky-column .filler{inset-inline-start:0}.sticky-header .filler{inset-block-start:0}.sticky-all .filler{inset-block-start:0;inset-inline-start:0}";
+//#endregion
+//#region src/lib/calendar/helpers/calendar.keyboard-interactions.ts
+var ARROW_UP = "ArrowUp";
+var ARROW_RIGHT = "ArrowRight";
+var ARROW_DOWN = "ArrowDown";
+var ARROW_LEFT = "ArrowLeft";
+function isCellOrHeader(el) {
+	return el instanceof HTMLElement && (el.matches("[role=\"gridcell\"i]") || el.matches("[role=\"columnheader\"i]"));
+}
+var getCellOrHeader = (f) => f.matches("[role=\"columnheader\"i]") ? "[role=\"gridcell\"i]" : "[role=\"columnheader\"i]";
+function getNextFocusableGridElement(key, activeElement) {
+	/* v8 ignore else -- @preserve */
+	if (activeElement.parentNode instanceof HTMLElement) switch (key) {
+		case ARROW_RIGHT: return activeElement.nextElementSibling || activeElement.parentNode.firstElementChild;
+		case ARROW_LEFT: return activeElement.previousElementSibling || activeElement.parentNode.lastElementChild;
+		case ARROW_UP:
+		case ARROW_DOWN: {
+			const { children } = activeElement.parentNode;
+			const i = Array.from(children).indexOf(activeElement);
+			return this.shadowRoot.querySelector(`${getCellOrHeader(activeElement)}:nth-child(${i + 1})`);
+		}
+	}
+}
+function getHeaderDescendantGridCell(key, activeElement) {
+	if (key !== "ArrowDown") return;
+	const header = activeElement.closest("[role=\"columnheader\"i]");
+	const columnHeaders = this.shadowRoot.querySelectorAll("[role=\"columnheader\"i]");
+	const i = Array.from(columnHeaders).indexOf(header);
+	return this.shadowRoot.querySelector(`[role="gridcell"i]:nth-child(${i + 1})`);
+}
+//#endregion
+//#region src/lib/calendar/helpers/calendar.event-context.ts
+function getDay(el) {
+	const cellOrHeader = el.closest("[role=\"gridcell\"i], [role=\"columnheader\"i]");
+	if (cellOrHeader) {
+		const { parentElement } = cellOrHeader;
+		/* v8 ignore else -- @preserve */
+		if (parentElement) return parentElement.children && Array.from(parentElement.children).indexOf(cellOrHeader);
+	}
+}
+function getHour(e, el, hours) {
+	const rowHeaderOrCell = el.closest("[role=\"rowheader\"], [role=\"gridcell\"i]");
+	if (rowHeaderOrCell) {
+		const DOMRect = rowHeaderOrCell.getBoundingClientRect();
+		const hour = (e.clientY - DOMRect.y) / (DOMRect.height / hours);
+		return Math.round((hour + Number.EPSILON) * 100) / 100;
+	}
+}
+var getEventContext = function(e) {
+	if (!(e instanceof KeyboardEvent || e instanceof MouseEvent)) throw new Error("Invalid event. Event must be instance of KeyboardEvent or MouseEvent");
+	const [el] = e.composedPath();
+	if (!(el && el instanceof HTMLElement && this.shadowRoot.contains(el))) throw new Error("Invalid event. Event must contain a target object which is a direct descendant of calendar");
+	const day = getDay(el);
+	let hour;
+	if (e instanceof MouseEvent) hour = getHour(e, el, this._hours);
+	const context = {
+		...day != void 0 && { day },
+		...hour != void 0 && { hour }
+	};
+	return (0, ramda.not)((0, ramda.isEmpty)(context)) ? context : null;
+};
+//#endregion
+//#region src/lib/calendar/calendar.ts
+var isScrollable = (node) => {
+	const overflowY = window.getComputedStyle(node).overflowY;
+	const overflowX = window.getComputedStyle(node).overflowX;
+	return {
+		vertical: (overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight,
+		horizontal: (overflowX === "auto" || overflowX === "scroll") && node.scrollWidth > node.clientWidth
+	};
+};
+/**
+* @public
+* @component calendar
+* @slot - Default slot.
+* @slot day-0 - Assign elements to corresponding day column using this slot.
+* @slot day-1 - Assign elements to corresponding day column using this slot.
+* @slot day-2 - Assign elements to corresponding day column using this slot.
+* @slot day-3 - Assign elements to corresponding day column using this slot.
+* @slot day-4 - Assign elements to corresponding day column using this slot.
+* @slot day-5 - Assign elements to corresponding day column using this slot.
+* @slot day-6 - Assign elements to corresponding day column using this slot.
+*/
+var Calendar = class extends require_vivid_element.VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this.hour12 = false;
+		this.stickyMode = require_enums.Sticky.All;
+		this._hours = 24;
+		this._days = 7;
+		this.hoursAsDatetime = Array.from({ length: this._hours - 1 }).fill(new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0))).map((d, i) => new Date(d.setHours(++i)));
+		this._generateDaysArr = (dateArr) => {
+			if (dateArr.length == this._days) return dateArr;
+			const lastDate = new Date(dateArr[dateArr.length - 1]);
+			lastDate.setDate(lastDate.getDate() + 1);
+			return this._generateDaysArr([...dateArr, lastDate]);
+		};
+		this.getEventContext = getEventContext;
+	}
+	get #activeCalendarEvent() {
+		const { activeElement } = document;
+		return activeElement instanceof require_calendar_event.CalendarEvent ? activeElement : null;
+	}
+	getCalendarEventContainingCell(calendarEvent) {
+		const slotName = calendarEvent.getAttribute("slot");
+		return this.shadowRoot.querySelector(`slot[name="${slotName}"i]`).parentElement;
+	}
+	arrowKeysInteractions(key) {
+		const { activeElement } = this.shadowRoot;
+		let focusNext;
+		if (isCellOrHeader(activeElement)) focusNext = getNextFocusableGridElement.call(this, key, activeElement);
+		else if (this.#activeCalendarEvent) focusNext = this.getCalendarEventContainingCell(this.#activeCalendarEvent);
+		else if (activeElement?.matches("em[role=\"button\"i]")) focusNext = getHeaderDescendantGridCell.call(this, key, activeElement);
+		else focusNext = this.shadowRoot.querySelector("[role=\"columnheader\"i]");
+		this.activateElement(focusNext);
+	}
+	activateElement(el) {
+		const onBlur = ({ target }) => target.setAttribute("tabindex", "-1");
+		el?.addEventListener("blur", onBlur, { once: true });
+		el?.setAttribute("tabindex", "0");
+		el?.focus();
+	}
+	/**
+	* @internal
+	*/
+	onKeydown({ key }) {
+		const isArrow = [
+			ARROW_UP,
+			ARROW_RIGHT,
+			ARROW_DOWN,
+			ARROW_LEFT
+		].some((predefinedKey) => predefinedKey == key);
+		if (isArrow) this.arrowKeysInteractions(key);
+		return !isArrow;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.initializeScrollPosition();
+	}
+	initializeScrollPosition() {
+		if (!isScrollable(this).vertical) return;
+		const scrollPosition = this.scrollHeight / this._hours * 7;
+		_microsoft_fast_element.Updates.enqueue(() => {
+			this.scrollTo({ top: scrollPosition });
+		});
+	}
+};
+require_decorate.__decorate([_microsoft_fast_element.attr], Calendar.prototype, "datetime", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "start-day" })], Calendar.prototype, "startDay", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Calendar.prototype, "locales", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Calendar.prototype, "hour12", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "sticky-mode",
+	mode: "fromView"
+})], Calendar.prototype, "stickyMode", void 0);
+//#endregion
+//#region src/lib/calendar/helpers/calendar.date-functions.ts
+/**
+* Returns a valid date string from date object e.g. 2020-01-01
+*
+* @remarks
+* This method returns valid date string to be used as html time tag datetime value
+* @param date - js date object
+* @returns a date as a string value in ISO format.
+*/
+function getValidDateString(date) {
+	const twoDigit = (num) => `0${num}`.slice(-2);
+	return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(date.getDate())}`;
+}
+var weekdaysMap = new Map([["sunday", 0], ["monday", 1]]);
+function getFirstDateOfTheWeek(date = /* @__PURE__ */ new Date(), startDay) {
+	date = new Date(date);
+	let num = weekdaysMap.get(startDay);
+	num ??= 1;
+	const day = date.getDate() - (date.getDay() + 7 - num) % 7;
+	return new Date(date.setDate(day));
+}
+//#endregion
+//#region src/lib/calendar/calendar.template.ts
+var getClasses = ({ stickyMode }) => (0, _microsoft_fast_web_utilities.classNames)([`sticky-${stickyMode}`, Boolean(stickyMode)]);
+/**
+* the html days markup
+*
+* @internal
+*/
+var HoursTemplate = () => {
+	return _microsoft_fast_element.html` <div class="row-headers" role="row">
+		${(0, _microsoft_fast_element.repeat)((x) => x.hoursAsDatetime, _microsoft_fast_element.html`<span role="rowheader">
+				<time
+					datetime="${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+		hour: "numeric",
+		minute: "numeric",
+		hour12: false
+	}).format(x)}"
+				>
+					${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+		hour: "numeric",
+		hour12: c.parent.hour12
+	}).format(x)}
+				</time>
+			</span>`)}
+	</div>`;
+};
+/**
+* The html days markup
+*
+* @internal
+*/
+var DaysTemplate = () => {
+	return _microsoft_fast_element.html` <div class="column-headers" role="row">
+		${(0, _microsoft_fast_element.repeat)((x) => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]), _microsoft_fast_element.html` <div role="columnheader" tabindex="-1">
+				<time datetime=${(x) => getValidDateString(x)}>
+					<h2>
+						<!-- TODO add to column aria-labelledby or describedby to count
+                  events and related day e.g. "3 events, Sunday, March 8" -->
+						<em
+							tabindex="0"
+							role="button"
+							aria-label=${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+		weekday: "long",
+		month: "long",
+		day: "2-digit"
+	}).format(x)}
+						>
+							${(x, c) => new Intl.DateTimeFormat(c.parent.locales, { day: "2-digit" }).format(x)}
+						</em>
+						<small aria-hidden="true">
+							${(x, c) => new Intl.DateTimeFormat(c.parent.locales, { weekday: "short" }).format(x)}
+						</small>
+					</h2>
+				</time>
+			</div>`)}
+	</div>`;
+};
+var ColumnTemplate = _microsoft_fast_element.html`
+	<div role="gridcell" tabindex="-1">
+		<slot name="day-${(_, c) => c.index}"></slot>
+	</div>
+`;
+var CalendarTemplate = _microsoft_fast_element.html`
+	<div
+		role="grid"
+		class="${getClasses}"
+		@keydown=${(x, c) => x.onKeydown(c.event)}
+	>
+		<div class="filler"></div>
+		${DaysTemplate}
+		<div class="calendar-row" role="rowgroup">
+			${HoursTemplate}
+			<div class="calendar-grid-presentation" role="presentation">
+				<div class="hours" role="list">
+					${(0, _microsoft_fast_element.repeat)((x) => Array.from({ length: x.hoursAsDatetime.length + 1 }), _microsoft_fast_element.html` <div role="listitem"></div>`)}
+				</div>
+				<div class="columns" role="row">
+					${(0, _microsoft_fast_element.repeat)((x) => Array.from(Array(x._days)), ColumnTemplate, { positioning: true })}
+				</div>
+				<slot></slot>
+			</div>
+		</div>
+	</div>
+`;
+//#endregion
+//#region src/lib/calendar/definition.ts
+/**
+* @internal
+*/
+var calendarDefinition = require_vivid_element.defineVividComponent("calendar", Calendar, CalendarTemplate, [], {
+	styles: calendar_default,
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the calendar elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerCalendar = require_vivid_element.createRegisterFunction(calendarDefinition);
+//#endregion
+Object.defineProperty(exports, "Calendar", {
+	enumerable: true,
+	get: function() {
+		return Calendar;
+	}
+});
+Object.defineProperty(exports, "calendarDefinition", {
+	enumerable: true,
+	get: function() {
+		return calendarDefinition;
+	}
+});
+Object.defineProperty(exports, "registerCalendar", {
+	enumerable: true,
+	get: function() {
+		return registerCalendar;
+	}
+});

package/unbundled/definition21.js

@@ -0,0 +1,286 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { t as __decorate } from "./decorate.js";
+import { f as Sticky } from "./enums.js";
+import { t as CalendarEvent } from "./calendar-event.js";
+import { Updates, attr, html, repeat } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+import { isEmpty, not } from "ramda";
+//#region src/lib/calendar/calendar.scss?inline
+var calendar_default = ":host{block-size:inherit;max-block-size:inherit;display:block;overflow:auto}ol{margin:0;padding:0;list-style:none}[role=grid i]{z-index:0;grid-template-columns:min-content auto;grid-template-areas:\"filler column-headers\"\"row-headers calendar\";inline-size:max(100%,500px);min-inline-size:880px;margin:auto;display:grid;position:relative}.row-headers{grid-area:row-headers;grid-template-rows:repeat(24,1fr);margin-inline-end:2px;display:grid}.row-headers>[role=rowheader i]{justify-content:flex-end;align-items:flex-end;display:flex}.row-headers>[role=rowheader i]>time{font:var(--vvd-typography-base-condensed);text-transform:uppercase;white-space:nowrap;font-size:small;line-height:1}.sticky-column .row-headers,.sticky-all .row-headers{z-index:1;background-color:var(--calendar-column-background-color,var(--vvd-color-canvas));margin-inline-end:3px;position:sticky;inset-inline-start:0}.calendar-row{display:contents}.calendar-grid-presentation{background:var(--vvd-color-surface-2dp);counter-reset:listing;filter:var(--vvd-shadow-surface-2dp);border-radius:8px;grid-template:repeat(24,1fr)/repeat(7,1fr);grid-area:calendar;grid-auto-flow:column;gap:1px;display:grid;overflow:hidden}.hours{display:contents}.hours>[role=listitem i]{grid-column:1/8;grid-row:var(--row);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));pointer-events:none;position:relative}.hours>[role=listitem i]:not(:first-child):after{border-block-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";inline-size:100%;margin-block-start:-1px;position:absolute}.hours>[role=listitem i]:nth-child(24n+1){--row:1}.hours>[role=listitem i]:nth-child(24n+2){--row:2}.hours>[role=listitem i]:nth-child(24n+3){--row:3}.hours>[role=listitem i]:nth-child(24n+4){--row:4}.hours>[role=listitem i]:nth-child(24n+5){--row:5}.hours>[role=listitem i]:nth-child(24n+6){--row:6}.hours>[role=listitem i]:nth-child(24n+7){--row:7}.hours>[role=listitem i]:nth-child(24n+8){--row:8}.hours>[role=listitem i]:nth-child(24n+9){--row:9}.hours>[role=listitem i]:nth-child(24n+10){--row:10}.hours>[role=listitem i]:nth-child(24n+11){--row:11}.hours>[role=listitem i]:nth-child(24n+12){--row:12}.hours>[role=listitem i]:nth-child(24n+13){--row:13}.hours>[role=listitem i]:nth-child(24n+14){--row:14}.hours>[role=listitem i]:nth-child(24n+15){--row:15}.hours>[role=listitem i]:nth-child(24n+16){--row:16}.hours>[role=listitem i]:nth-child(24n+17){--row:17}.hours>[role=listitem i]:nth-child(24n+18){--row:18}.hours>[role=listitem i]:nth-child(24n+19){--row:19}.hours>[role=listitem i]:nth-child(24n+20){--row:20}.hours>[role=listitem i]:nth-child(24n+21){--row:21}.hours>[role=listitem i]:nth-child(24n+22){--row:22}.hours>[role=listitem i]:nth-child(24n+23){--row:23}.hours>[role=listitem i]:nth-child(24n+24){--row:24}[role=gridcell i]{grid-auto-flow:column;gap:1px;display:grid}[role=gridcell i],[role=columnheader i],[role=columnheader i] [role=button i]{position:relative}[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{z-index:-1;background-color:var(--vvd-color-information-400);content:\"\";position:absolute;inset:0}[role=gridcell i]:focus,[role=columnheader i]:focus,[role=columnheader i] [role=button i]:focus{outline:none}[role=gridcell i]:not(:focus-visible):before,[role=columnheader i]:not(:focus-visible):before,[role=columnheader i] [role=button i]:not(:focus-visible):before{display:none}.columns{display:contents}.columns>[role=gridcell i]{grid-column:var(--column);grid-row:1/25;position:relative}.columns>[role=gridcell i]:first-child{--column:1}.columns>[role=gridcell i]:nth-child(2){--column:2}.columns>[role=gridcell i]:nth-child(3){--column:3}.columns>[role=gridcell i]:nth-child(4){--column:4}.columns>[role=gridcell i]:nth-child(5){--column:5}.columns>[role=gridcell i]:nth-child(6){--column:6}.columns>[role=gridcell i]:nth-child(7){--column:7}.columns>[role=gridcell i]:not(:first-child):after{border-inline-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";block-size:100%;margin-inline-start:-1px;position:absolute}.column-headers{grid-area:column-headers;grid-template-columns:repeat(7,1fr);display:grid}.column-headers [role=columnheader i] h2{font:var(--vvd-typography-heading-4);grid-template-columns:1fr auto 1fr;align-items:baseline;margin:0;display:grid}.column-headers [role=columnheader i] h2>em{font:inherit;inline-size:min-content;inset-inline-start:0}.column-headers [role=columnheader i] h2>small{font:var(--vvd-typography-base-condensed);text-transform:uppercase}.sticky-header .column-headers,.sticky-all .column-headers{z-index:1;background-color:var(--calendar-header-background-color,var(--vvd-color-canvas));margin-block-end:3px;position:sticky;inset-block-start:0}.filler{background-color:#0000;grid-area:filler}.sticky-header .filler,.sticky-all .filler,.sticky-column .filler{z-index:2;background-color:var(--calendar-header-background-color,var(--vvd-color-canvas));margin-block-end:3px;position:sticky}.sticky-column .filler{inset-inline-start:0}.sticky-header .filler{inset-block-start:0}.sticky-all .filler{inset-block-start:0;inset-inline-start:0}";
+//#endregion
+//#region src/lib/calendar/helpers/calendar.keyboard-interactions.ts
+var ARROW_UP = "ArrowUp";
+var ARROW_RIGHT = "ArrowRight";
+var ARROW_DOWN = "ArrowDown";
+var ARROW_LEFT = "ArrowLeft";
+function isCellOrHeader(el) {
+	return el instanceof HTMLElement && (el.matches("[role=\"gridcell\"i]") || el.matches("[role=\"columnheader\"i]"));
+}
+var getCellOrHeader = (f) => f.matches("[role=\"columnheader\"i]") ? "[role=\"gridcell\"i]" : "[role=\"columnheader\"i]";
+function getNextFocusableGridElement(key, activeElement) {
+	/* v8 ignore else -- @preserve */
+	if (activeElement.parentNode instanceof HTMLElement) switch (key) {
+		case ARROW_RIGHT: return activeElement.nextElementSibling || activeElement.parentNode.firstElementChild;
+		case ARROW_LEFT: return activeElement.previousElementSibling || activeElement.parentNode.lastElementChild;
+		case ARROW_UP:
+		case ARROW_DOWN: {
+			const { children } = activeElement.parentNode;
+			const i = Array.from(children).indexOf(activeElement);
+			return this.shadowRoot.querySelector(`${getCellOrHeader(activeElement)}:nth-child(${i + 1})`);
+		}
+	}
+}
+function getHeaderDescendantGridCell(key, activeElement) {
+	if (key !== "ArrowDown") return;
+	const header = activeElement.closest("[role=\"columnheader\"i]");
+	const columnHeaders = this.shadowRoot.querySelectorAll("[role=\"columnheader\"i]");
+	const i = Array.from(columnHeaders).indexOf(header);
+	return this.shadowRoot.querySelector(`[role="gridcell"i]:nth-child(${i + 1})`);
+}
+//#endregion
+//#region src/lib/calendar/helpers/calendar.event-context.ts
+function getDay(el) {
+	const cellOrHeader = el.closest("[role=\"gridcell\"i], [role=\"columnheader\"i]");
+	if (cellOrHeader) {
+		const { parentElement } = cellOrHeader;
+		/* v8 ignore else -- @preserve */
+		if (parentElement) return parentElement.children && Array.from(parentElement.children).indexOf(cellOrHeader);
+	}
+}
+function getHour(e, el, hours) {
+	const rowHeaderOrCell = el.closest("[role=\"rowheader\"], [role=\"gridcell\"i]");
+	if (rowHeaderOrCell) {
+		const DOMRect = rowHeaderOrCell.getBoundingClientRect();
+		const hour = (e.clientY - DOMRect.y) / (DOMRect.height / hours);
+		return Math.round((hour + Number.EPSILON) * 100) / 100;
+	}
+}
+var getEventContext = function(e) {
+	if (!(e instanceof KeyboardEvent || e instanceof MouseEvent)) throw new Error("Invalid event. Event must be instance of KeyboardEvent or MouseEvent");
+	const [el] = e.composedPath();
+	if (!(el && el instanceof HTMLElement && this.shadowRoot.contains(el))) throw new Error("Invalid event. Event must contain a target object which is a direct descendant of calendar");
+	const day = getDay(el);
+	let hour;
+	if (e instanceof MouseEvent) hour = getHour(e, el, this._hours);
+	const context = {
+		...day != void 0 && { day },
+		...hour != void 0 && { hour }
+	};
+	return not(isEmpty(context)) ? context : null;
+};
+//#endregion
+//#region src/lib/calendar/calendar.ts
+var isScrollable = (node) => {
+	const overflowY = window.getComputedStyle(node).overflowY;
+	const overflowX = window.getComputedStyle(node).overflowX;
+	return {
+		vertical: (overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight,
+		horizontal: (overflowX === "auto" || overflowX === "scroll") && node.scrollWidth > node.clientWidth
+	};
+};
+/**
+* @public
+* @component calendar
+* @slot - Default slot.
+* @slot day-0 - Assign elements to corresponding day column using this slot.
+* @slot day-1 - Assign elements to corresponding day column using this slot.
+* @slot day-2 - Assign elements to corresponding day column using this slot.
+* @slot day-3 - Assign elements to corresponding day column using this slot.
+* @slot day-4 - Assign elements to corresponding day column using this slot.
+* @slot day-5 - Assign elements to corresponding day column using this slot.
+* @slot day-6 - Assign elements to corresponding day column using this slot.
+*/
+var Calendar = class extends VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this.hour12 = false;
+		this.stickyMode = Sticky.All;
+		this._hours = 24;
+		this._days = 7;
+		this.hoursAsDatetime = Array.from({ length: this._hours - 1 }).fill(new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0))).map((d, i) => new Date(d.setHours(++i)));
+		this._generateDaysArr = (dateArr) => {
+			if (dateArr.length == this._days) return dateArr;
+			const lastDate = new Date(dateArr[dateArr.length - 1]);
+			lastDate.setDate(lastDate.getDate() + 1);
+			return this._generateDaysArr([...dateArr, lastDate]);
+		};
+		this.getEventContext = getEventContext;
+	}
+	get #activeCalendarEvent() {
+		const { activeElement } = document;
+		return activeElement instanceof CalendarEvent ? activeElement : null;
+	}
+	getCalendarEventContainingCell(calendarEvent) {
+		const slotName = calendarEvent.getAttribute("slot");
+		return this.shadowRoot.querySelector(`slot[name="${slotName}"i]`).parentElement;
+	}
+	arrowKeysInteractions(key) {
+		const { activeElement } = this.shadowRoot;
+		let focusNext;
+		if (isCellOrHeader(activeElement)) focusNext = getNextFocusableGridElement.call(this, key, activeElement);
+		else if (this.#activeCalendarEvent) focusNext = this.getCalendarEventContainingCell(this.#activeCalendarEvent);
+		else if (activeElement?.matches("em[role=\"button\"i]")) focusNext = getHeaderDescendantGridCell.call(this, key, activeElement);
+		else focusNext = this.shadowRoot.querySelector("[role=\"columnheader\"i]");
+		this.activateElement(focusNext);
+	}
+	activateElement(el) {
+		const onBlur = ({ target }) => target.setAttribute("tabindex", "-1");
+		el?.addEventListener("blur", onBlur, { once: true });
+		el?.setAttribute("tabindex", "0");
+		el?.focus();
+	}
+	/**
+	* @internal
+	*/
+	onKeydown({ key }) {
+		const isArrow = [
+			ARROW_UP,
+			ARROW_RIGHT,
+			ARROW_DOWN,
+			ARROW_LEFT
+		].some((predefinedKey) => predefinedKey == key);
+		if (isArrow) this.arrowKeysInteractions(key);
+		return !isArrow;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.initializeScrollPosition();
+	}
+	initializeScrollPosition() {
+		if (!isScrollable(this).vertical) return;
+		const scrollPosition = this.scrollHeight / this._hours * 7;
+		Updates.enqueue(() => {
+			this.scrollTo({ top: scrollPosition });
+		});
+	}
+};
+__decorate([attr], Calendar.prototype, "datetime", void 0);
+__decorate([attr({ attribute: "start-day" })], Calendar.prototype, "startDay", void 0);
+__decorate([attr], Calendar.prototype, "locales", void 0);
+__decorate([attr({ mode: "boolean" })], Calendar.prototype, "hour12", void 0);
+__decorate([attr({
+	attribute: "sticky-mode",
+	mode: "fromView"
+})], Calendar.prototype, "stickyMode", void 0);
+//#endregion
+//#region src/lib/calendar/helpers/calendar.date-functions.ts
+/**
+* Returns a valid date string from date object e.g. 2020-01-01
+*
+* @remarks
+* This method returns valid date string to be used as html time tag datetime value
+* @param date - js date object
+* @returns a date as a string value in ISO format.
+*/
+function getValidDateString(date) {
+	const twoDigit = (num) => `0${num}`.slice(-2);
+	return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(date.getDate())}`;
+}
+var weekdaysMap = new Map([["sunday", 0], ["monday", 1]]);
+function getFirstDateOfTheWeek(date = /* @__PURE__ */ new Date(), startDay) {
+	date = new Date(date);
+	let num = weekdaysMap.get(startDay);
+	num ??= 1;
+	const day = date.getDate() - (date.getDay() + 7 - num) % 7;
+	return new Date(date.setDate(day));
+}
+//#endregion
+//#region src/lib/calendar/calendar.template.ts
+var getClasses = ({ stickyMode }) => classNames([`sticky-${stickyMode}`, Boolean(stickyMode)]);
+/**
+* the html days markup
+*
+* @internal
+*/
+var HoursTemplate = () => {
+	return html` <div class="row-headers" role="row">
+		${repeat((x) => x.hoursAsDatetime, html`<span role="rowheader">
+				<time
+					datetime="${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+		hour: "numeric",
+		minute: "numeric",
+		hour12: false
+	}).format(x)}"
+				>
+					${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+		hour: "numeric",
+		hour12: c.parent.hour12
+	}).format(x)}
+				</time>
+			</span>`)}
+	</div>`;
+};
+/**
+* The html days markup
+*
+* @internal
+*/
+var DaysTemplate = () => {
+	return html` <div class="column-headers" role="row">
+		${repeat((x) => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]), html` <div role="columnheader" tabindex="-1">
+				<time datetime=${(x) => getValidDateString(x)}>
+					<h2>
+						<!-- TODO add to column aria-labelledby or describedby to count
+                  events and related day e.g. "3 events, Sunday, March 8" -->
+						<em
+							tabindex="0"
+							role="button"
+							aria-label=${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+		weekday: "long",
+		month: "long",
+		day: "2-digit"
+	}).format(x)}
+						>
+							${(x, c) => new Intl.DateTimeFormat(c.parent.locales, { day: "2-digit" }).format(x)}
+						</em>
+						<small aria-hidden="true">
+							${(x, c) => new Intl.DateTimeFormat(c.parent.locales, { weekday: "short" }).format(x)}
+						</small>
+					</h2>
+				</time>
+			</div>`)}
+	</div>`;
+};
+var ColumnTemplate = html`
+	<div role="gridcell" tabindex="-1">
+		<slot name="day-${(_, c) => c.index}"></slot>
+	</div>
+`;
+//#endregion
+//#region src/lib/calendar/definition.ts
+/**
+* @internal
+*/
+var calendarDefinition = defineVividComponent("calendar", Calendar, html`
+	<div
+		role="grid"
+		class="${getClasses}"
+		@keydown=${(x, c) => x.onKeydown(c.event)}
+	>
+		<div class="filler"></div>
+		${DaysTemplate}
+		<div class="calendar-row" role="rowgroup">
+			${HoursTemplate}
+			<div class="calendar-grid-presentation" role="presentation">
+				<div class="hours" role="list">
+					${repeat((x) => Array.from({ length: x.hoursAsDatetime.length + 1 }), html` <div role="listitem"></div>`)}
+				</div>
+				<div class="columns" role="row">
+					${repeat((x) => Array.from(Array(x._days)), ColumnTemplate, { positioning: true })}
+				</div>
+				<slot></slot>
+			</div>
+		</div>
+	</div>
+`, [], {
+	styles: calendar_default,
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the calendar elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerCalendar = createRegisterFunction(calendarDefinition);
+//#endregion
+export { registerCalendar as n, Calendar as r, calendarDefinition as t };