@vonage/vivid 5.15.0 → 5.16.0

package/unbundled/definition20.js

@@ -0,0 +1,43 @@
+import { o as defineVividComponent, s as createRegisterFunction } from "./vivid-element.js";
+import { n as delegateAria } from "./delegates-aria.js";
+import { t as CalendarEvent } from "./calendar-event.js";
+import { html, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/calendar-event/calendar-event.scss?inline
+var calendar_event_default = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary:var(--vvd-calendar-event-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-calendar-event-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-soft:var(--vvd-calendar-event-accent-soft,var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary:var(--vvd-calendar-event-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-calendar-event-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-soft:var(--vvd-calendar-event-cta-soft,var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary:var(--vvd-calendar-event-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-calendar-event-success-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-success-contrast,var(--vvd-color-success-800));--_connotation-color-soft:var(--vvd-calendar-event-success-soft,var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-calendar-event-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-calendar-event-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-soft:var(--vvd-calendar-event-alert-soft,var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary:var(--vvd-calendar-event-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-calendar-event-warning-primary-text,var(--vvd-color-canvas-text));--_connotation-color-contrast:var(--vvd-calendar-event-warning-contrast,var(--vvd-color-warning-800));--_connotation-color-soft:var(--vvd-calendar-event-warning-soft,var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary:var(--vvd-calendar-event-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-calendar-event-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-soft:var(--vvd-calendar-event-announcement-soft,var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary:var(--vvd-calendar-event-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-calendar-event-information-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-information-contrast,var(--vvd-color-information-800));--_connotation-color-soft:var(--vvd-calendar-event-information-soft,var(--vvd-color-information-100))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{--vvd-calendar-event--indent:calc(0px + var(--vvd-calendar-event--overlap-count,0) * 8px);--focus-stroke-gap-color:transparent;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start,0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start,0)));box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration,1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration,1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent), 32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start,0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start,0))) - 4px);border-radius:8px;padding:4px 8px;position:absolute;overflow:hidden}@supports (contain:content){.base{contain:strict}}@supports not (contain:content){.base{overflow:hidden}}.base:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color:var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{font:var(--vvd-typography-base-condensed-bold);margin:0}h2>strong{font:inherit}p{font:var(--vvd-typography-base-condensed);margin:0}";
+//#endregion
+//#region src/lib/calendar-event/calendar-event.template.ts
+var getClasses = ({ connotation, appearance }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)]);
+var getStyles = ({ start, duration, overlapCount }) => {
+	const stylesObj = {
+		...overlapCount && { "--vvd-calendar-event--overlap-count": overlapCount },
+		...start && { "--vvd-calendar-event--start": start },
+		...duration && { "--vvd-calendar-event--duration": duration }
+	};
+	return Object.entries(stylesObj).map((entry) => entry.join(":")).join(";");
+};
+//#endregion
+//#region src/lib/calendar-event/definition.ts
+/**
+* @internal
+*/
+var calendarEventDefinition = defineVividComponent("calendar-event", CalendarEvent, html` <div
+	style="${getStyles}"
+	class="${getClasses}"
+	tabindex="0"
+	${delegateAria({ role: "button" })}
+>
+	${when((x) => x.heading, html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
+	${when((x) => x.description, html`<p>${(x) => x.description}</p>`)}
+</div>`, [], {
+	styles: calendar_event_default,
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the calendar-event elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerCalendarEvent = createRegisterFunction(calendarEventDefinition);
+//#endregion
+export { registerCalendarEvent as n, calendarEventDefinition as t };

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 };