@vonage/vivid 3.0.0-next.7 → 3.0.0-test.0

package/src/lib/calendar/calendar.ts

@@ -1,139 +0,0 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
-import { attr } from '@microsoft/fast-element';
-import {
-	ARROW_DOWN,
-	ARROW_LEFT,
-	ARROW_RIGHT,
-	ARROW_UP,
-	getHeaderDescendantGridCell,
-	getNextFocusableGridElement,
-	isCellOrHeader,
-	PredefindKeys,
-} from './helpers/calendar.keyboard-interactions';
-import { getEventContext } from './helpers/calendar.event-context';
-
-
-/**
- * Base class for calendar
- *
- * @public
- */
-export class Calendar extends FoundationElement {
-
-	/**
-	 * The date within a week of choice.
-	 * Accepts any parameter acceptable by the `Date()` constructor.
-	 *
-	 * @public
-	 */
-	@attr	datetime?: Date | string;
-
-	/**
-	 * The day to show as the first within a work week.
-	 * Accepts either Sunday or Monday
-	 * Calendar will - programmatically - default to Monday if not specified
-	 *
-	 * (only applicable for views of more than a single day)
-	 *
-	 * @public
-	 */
-	@attr({ attribute: 'start-day' })	startDay?: 'sunday' | 'monday';
-
-	/**
-	 * A locale string or array of locale strings that contain one or more language or locale tags.
-	 * If you include more than one locale string,
-	 * list them in descending order of priority so that the first entry is the preferred locale.
-	 * If you omit this parameter, the default locale of the JavaScript runtime is used.
-	 * This parameter must conform to BCP 47 standards; see the Intl.Collator object for details.
-	 * e.g. en-US | en-US, he-IL
-	 *
-	 * @public
-	 */
-	@attr	locales?: string | string[] | undefined;
-
-	/**
-	 * The convention of displayed time in which the day runs from midnight to midnight and is divided into 24 or 12 hours.
-	 * Unless provided, choice will be set according to local time preference (e.g. US = 12, IL = 24)
-	 *
-	 * @public
-	 */
-	@attr({ mode: 'boolean' }) hour12 = false;
-
-	/**
-	 * @internal
-	 */
-	_hours = 24;
-	/**
-	 * @internal
-	 */
-	_days = 7;
-
-	/**
-	 * @internal
-	 */
-	hoursAsDatetime = (Array.from({ length: this._hours - 1 }) as Date[])
-		.fill(new Date(new Date().setHours(0, 0, 0)))
-		.map((d, i) => new Date(d.setHours(++i)));
-
-	/**
-	 * @param dateArr array of dates. requires at least 1 date to be set within the array
-	 * @returns array of incremental dates from the first date in the array
-	 * @internal
-	 */
-	_generateDaysArr = (dateArr: [Date, ...Date[]]): Date[] => {
-		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]);
-	};
-
-	/**
-	 * Fire an event
-	 *
-	 * @param {string} event        - event name
-	 * @param {Object} [detail={}]  - optional event detail object
-	 * @returns {boolean}           - return true
-	 */
-	getEventContext = getEventContext;
-
-	private arrowKeysInteractions(key: PredefindKeys) {
-		const activeElement = (this.shadowRoot as ShadowRoot).activeElement;
-		let focusNext: Element | null | void;
-
-		if (isCellOrHeader(activeElement)) {
-			focusNext = getNextFocusableGridElement.call(this, key, activeElement);
-		}	else if (activeElement?.matches('em[role="button"i]')) {
-			focusNext = getHeaderDescendantGridCell.call(this, key, activeElement as HTMLElement);
-		} else {
-			focusNext = (this.shadowRoot as ShadowRoot).querySelector('[role="columnheader"i]');
-		}
-
-		this.moveTo(focusNext as HTMLElement);
-	}
-
-	private moveTo(el: HTMLElement | null | undefined) {
-		const onBlur = ({ target }: FocusEvent) => (target as HTMLElement).setAttribute('tabindex', '-1');
-
-		el?.addEventListener('blur', onBlur, { once: true });
-		el?.setAttribute('tabindex', '0');
-		el?.focus();
-	}
-
-
-	onKeydown({ key }: KeyboardEvent) {
-		const isArrow = [ARROW_UP, ARROW_RIGHT, ARROW_DOWN, ARROW_LEFT].some(predefinedKey => predefinedKey == key);
-
-		if (isArrow) {
-			this.arrowKeysInteractions(key as PredefindKeys);
-		}
-
-		// after this event handler is executed,
-		// preventDefault() will be called on the event object by default.
-		// we need to return true from our handler to opt - out of this behavior.
-		return !isArrow;
-	}
-}

package/src/lib/calendar/helpers/calendar.date-functions.ts

@@ -1,31 +0,0 @@
-/**
- * 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.
- */
-export function getValidDateString(date: Date): string {
-	const twoDigit = (num: number) => `0${num}`.slice(-2);
-	return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(date.getDate())}`;
-}
-
-const weekdaysMap = new Map([
-	['sunday', 0],
-	['monday', 1],
-]);
-
-/**
- * @param date
- * @param startDay
- */
-export function getFirstDateOfTheWeek(date: Date = new Date(), startDay: 'sunday' | 'monday'): Date {
-	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));
-}

package/src/lib/calendar/helpers/calendar.event-context.ts

@@ -1,72 +0,0 @@
-import { isEmpty, not } from 'ramda';
-import type { Calendar } from '../calendar';
-// import { isCellOrHeader } from './calendar.keyboard-interactions';
-
-export interface CalendarEventContext {
-	day?: number;
-	hour?: number;
-}
-
-/**
- * @param el
- */
-function getDay(el: HTMLElement): number | void {
-	const cellOrHeader = el.closest('[role="gridcell"i], [role="columnheader"i]');
-	if (cellOrHeader) {
-		const { parentElement } = cellOrHeader;
-		if (parentElement) {
-			return parentElement.children && Array.from(parentElement.children).indexOf(cellOrHeader);
-		}
-	}
-}
-
-/**
- * @param e
- * @param el
- * @param hours
- */
-function getHour(e: MouseEvent, el: HTMLElement, hours: number): number | void {
-	const rowHeaderOrCell = el.closest('[role="rowheader"], [role="gridcell"i]') as HTMLElement;
-
-	if (rowHeaderOrCell) {
-		const DOMRect = rowHeaderOrCell.getBoundingClientRect();
-		const offsetY = e.clientY - DOMRect.y;
-		const hourHeight = DOMRect.height / hours;
-		const hour = offsetY / hourHeight;
-
-		return Math.round((hour + Number.EPSILON) * 100) / 100;
-	}
-}
-
-/**
- * @param this
- * @param shadowRoot
- * @param hours
- * @param e
- */
-export const getEventContext = function(this: Calendar, e: KeyboardEvent | MouseEvent): CalendarEventContext | null {
-
-	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 as 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 != undefined && { day }),
-		...(hour != undefined && { hour }),
-	};
-
-	return not(isEmpty(context)) ? context : null;
-};

package/src/lib/calendar/helpers/calendar.keyboard-interactions.ts

@@ -1,65 +0,0 @@
-import type { Calendar } from '../calendar';
-
-
-export const ARROW_UP = 'ArrowUp';
-export const ARROW_RIGHT = 'ArrowRight';
-export const ARROW_DOWN = 'ArrowDown';
-export const ARROW_LEFT = 'ArrowLeft';
-
-export type PredefindKeys = typeof ARROW_UP | typeof ARROW_RIGHT | typeof ARROW_DOWN | typeof ARROW_LEFT;
-
-/**
- * @param el
- */
-export function isCellOrHeader(el: unknown): el is HTMLElement {
-	return el instanceof HTMLElement
-	&& (
-		el.matches('[role="gridcell"i]')
-		|| el.matches('[role="columnheader"i]')
-	);
-}
-
-const getCellOrHeader = (f: HTMLElement) => (f.matches('[role="columnheader"i]')
-	? '[role="gridcell"i]'
-	: '[role="columnheader"i]');
-
-/**
- * @param this
- * @param key
- * @param activeElement
- */
-export function getNextFocusableGridElement(
-	this: Calendar, key: PredefindKeys, activeElement: HTMLElement
-): Element | null | void {
-	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 as ShadowRoot).querySelector(
-					`${getCellOrHeader(activeElement as HTMLElement)}:nth-child(${i + 1})`
-				);
-			}
-		}
-	}
-}
-
-/**
- * @param this
- * @param key
- * @param activeElement
- */
-export function getHeaderDescendantGridCell(this: Calendar, key: PredefindKeys, activeElement: HTMLElement): Element | null | undefined {
-	if (key !== ARROW_DOWN) {return;}
-
-	const header = activeElement.closest('[role="columnheader"i]') as HTMLElement;
-	const columnHeaders = (this.shadowRoot as ShadowRoot).querySelectorAll('[role="columnheader"i]');
-	const i = Array.from(columnHeaders).indexOf(header);
-	return (this.shadowRoot as ShadowRoot).querySelector(`[role="gridcell"i]:nth-child(${i + 1})`);
-
-}

package/src/lib/calendar/index.ts

@@ -1,16 +0,0 @@
-import '../elevation';
-
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { designSystem } from '../../shared/design-system';
-import styles from './calendar.scss';
-
-import { Calendar } from './calendar';
-import { CalendarTemplate as template } from './calendar.template';
-
-export const vividCalendar = Calendar.compose<FoundationElementDefinition>({
-	baseName: 'calendar',
-	template: template as any,
-	styles,
-});
-
-designSystem.register(vividCalendar());

package/src/lib/calendar/partials/_variables.scss

@@ -1,15 +0,0 @@
-// number of columns according to days of week
-$total-columns: 7;
-
-// the rows according to hours a day
-$total-rows: 24;
-$gap: 1px;
-$calendar-shape: --vvd-calendar-shape;
-
-// event variables
-$color: --vvd-calendar-event--primary-color;
-$day: --vvd-calendar-event--day;
-$start: --vvd-calendar-event--start;
-$duration: --vvd-calendar-event--duration;
-$indent: --vvd-calendar-event--indent;
-$overlap-count: --vvd-calendar-event--overlap-count;

package/src/lib/calendar/ui.test.ts

@@ -1,32 +0,0 @@
-import { expect, test } from '@playwright/test';
-import type { Page } from '@playwright/test';
-import {
-	loadComponents,
-	loadTemplate,
-} from '../../visual-tests/visual-tests-utils.ts';
-
-const components = ['calendar'];
-
-test('should show the component', async ({ page }: { page: Page }) => {
-	const template =`
-    <vwc-calendar datetime="2022-01-01"></vwc-calendar>
-    <vwc-calendar datetime="2022-01-01" hour12 locales="he-IL" start-day="sunday" style="direction: rtl"></vwc-calendar>
-	`;
-
-	await loadComponents({
-		page,
-		components,
-	});
-	await loadTemplate({
-		page,
-		template,
-	});
-
-	const testWrapper = await page.$('#wrapper');
-	await page.waitForLoadState('networkidle');
-
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/calendar.png',
-		);
-});

package/src/lib/components.spec.ts

@@ -1,7 +0,0 @@
-import * as components from './components';
-
-describe('components', () => {
-	it('should work', () => {
-		expect(typeof components).toEqual(typeof {});
-	});
-});

package/src/lib/elevation/README.md

@@ -1,99 +0,0 @@
-# elevation
-
-The _elevation_ component enables a user to set perceived elevation to a certain level.  
-**Note: This component is responsible for the perceived visual elevation alone and not for the HTML elements stacking context.**
-
-```js
-<script type='module'>
-    import '@vonage/vivid/elevation';
-</script>
-```
-
-```html preview
-<style>
- #card {
-  padding: 20px;
-  text-align: center;
-  border-radius: 6px;
- }
-</style>
-
-<vwc-layout gutters="base-small">
-  <vwc-elevation id="elevation">
-    <div id="card">
-      Hover me!
-    </div>
-  </vwc-elevation>
-</vwc-layout>
-
-<script>
- elevation.addEventListener("mouseenter", this.onMouseEnter);
- elevation.addEventListener("mouseleave", this.onMouseLeave);
-
- function onMouseEnter() {
-  elevation.setAttribute('dp', '24');
-  card.innerText = 'Get OFF of me!';
- }
-
- function onMouseLeave() {
-  elevation.removeAttribute('dp');
-  card.innerText = 'Hover me!';
- }
-</script>
-
-```
-
-## DP
-
-Use the `dp` attribute to change the elevation's level in Density-Independent Pixels (DP).
-
-- Type: `0`|`2`|`4`|`8`|`12`|`16`|`24`
-- Default: `2`
-
-```html preview
-<style>
-.card {
- padding: 20px;
- text-align: center;
- border-radius: 6px;
-}
-</style>
-
-<vwc-layout column-spacing="base-large" column-basis="block" gutters="base-small">
- <vwc-elevation dp="0">
-  <div class="card">
-   This is the content inside the elevation with DP 0
-  </div>
- </vwc-elevation>
- <vwc-elevation dp="2">
-  <div class="card">
-   This is the content inside the elevation with DP 2
-  </div>
- </vwc-elevation>
-  <vwc-elevation dp="4">
-  <div class="card">
-   This is the content inside the elevation with DP 4
-  </div>
- </vwc-elevation>
-  <vwc-elevation dp="8">
-  <div class="card">
-   This is the content inside the elevation with DP 8
-  </div>
- </vwc-elevation>
-  <vwc-elevation dp="12">
-  <div class="card">
-   This is the content inside the elevation with DP 12
-  </div>
- </vwc-elevation>
-  <vwc-elevation dp="16">
-  <div class="card">
-   This is the content inside the elevation with DP 16
-  </div>
- </vwc-elevation>
-  <vwc-elevation dp="24">
-  <div class="card">
-   This is the content inside the elevation with DP 24
-  </div>
- </vwc-elevation>
-</vwc-layout>
-```

package/src/lib/elevation/elevation.scss

@@ -1,15 +0,0 @@
-@use 'sass:list';
-@use '../../../../shared/src/lib/sass/mixins/utils' as utils;
-@use 'partials/elevation.mixin' as elevation;
-
-$dps: 0 2 4 8 12 16 24;
-
-.control {
-	$default: list.nth($dps, 2);
-
-	@include utils.spread-list-selectors('.dp', $dps, $default) using ($type) {
-		::slotted(*) {
-			@include elevation.get-elevation($type);
-		}
-	}
-}

package/src/lib/elevation/elevation.spec.ts

@@ -1,55 +0,0 @@
-import { elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
-import { Elevation } from './elevation';
-import '.';
-
-const COMPONENT_TAG = 'vwc-elevation';
-
-describe('vwc-elevation', () => {
-	let element: Elevation;
-
-	beforeEach(async () => {
-		element = await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`) as Elevation;
-	});
-
-	describe('basic', () => {
-		it('initializes as a vwc-elevation', async () => {
-			expect(element).toBeInstanceOf(Elevation);
-			expect(element.dp).toBeUndefined();
-		});
-	});
-
-	describe('dp', () => {
-		it('should change the property when the attribute changes', async () => {
-			const startingDP = 8;
-			element.dp = startingDP;
-			await elementUpdated(element);
-
-			const propertyValueBeforeChange = element.dp;
-			element.setAttribute('dp', '4');
-
-			expect(propertyValueBeforeChange).toEqual(startingDP);
-			expect(element.dp).toEqual('4');
-		});
-
-		it('should set the dp class on the wrapper element', async () => {
-			const startingDP = 8;
-			const nextDP = '24';
-			element.dp = startingDP;
-			await elementUpdated(element);
-			const classPrefix = 'dp-';
-
-			const startingDPClassExists = getControlElement(element).classList.contains(`${classPrefix}${startingDP}`);
-
-			element.setAttribute('dp', nextDP);
-			await elementUpdated(element);
-			const nextDPClassExists = getControlElement(element).classList.contains(`${classPrefix}${nextDP}`);
-			expect(startingDPClassExists).toEqual(true);
-			expect(nextDPClassExists).toEqual(true);
-		});
-	});
-
-	it('should have a slot', async () => {
-		await elementUpdated(element);
-		expect(Boolean(element.shadowRoot?.querySelector('slot'))).toEqual(true);
-	});
-});

package/src/lib/elevation/elevation.template.ts

@@ -1,26 +0,0 @@
-import { html } from '@microsoft/fast-element';
-import { classNames } from '@microsoft/fast-web-utilities';
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-import type { Elevation } from './elevation';
-
-const getClasses = ({
-	dp
-}: Elevation) => classNames(
-	'control',
-	[`dp-${dp}`, Boolean(dp)],
-);
-
-/**
- * The template for the {@link @vonage/vivid#Elevation} component.
- *
- * @returns {ViewTemplate<Elevation>} A template capable of creating HTMLView instances or rendering directly to DOM.
- * @public
- */
-export const elevationTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<Elevation> = () => html`
-        <div class="${getClasses}" part="base">
-			<slot></slot>
-		</div>`;

package/src/lib/elevation/elevation.ts

@@ -1,17 +0,0 @@
-import { attr } from '@microsoft/fast-element';
-import { FoundationElement } from '@microsoft/fast-foundation';
-
-/**
- * Base class for elevation
- *
- * @public
- */
-export class Elevation extends FoundationElement {
-	/**
-	 * Indicates the elevation's dp.
-	 *
-	 * @public
-	 * HTML Attribute: dp
-	 */
-	@attr dp?: 0 | 2 | 4 | 8 | 12 | 16 | 24; // TODO: get values from design tokens
-}

package/src/lib/elevation/index.ts

@@ -1,17 +0,0 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { designSystem } from '../../shared/design-system';
-import { Elevation } from './elevation';
-import styles from './elevation.scss';
-import { elevationTemplate as template } from './elevation.template';
-
-
-/**
- * Represents an elevation custom element.
- */
-export const VIVIDElevation = Elevation.compose<FoundationElementDefinition>({
-	baseName: 'elevation',
-	template: template as any,
-	styles,
-});
-
-designSystem.register(VIVIDElevation());

package/src/lib/elevation/partials/_elevation.mixin.scss

@@ -1,4 +0,0 @@
-@mixin get-elevation($type) {
-	background-color: var(#{--vvd-color-surface-#{$type}dp});
-	filter: var(#{--vvd-shadow-surface-#{$type}dp});
-}

package/src/lib/elevation/ui.test.ts

@@ -1,32 +0,0 @@
-import * as path from 'path';
-import {expect, test} from '@playwright/test';
-import type {Page} from '@playwright/test';
-import {
-	extractHTMLBlocksFromReadme,
-	loadComponents,
-	loadTemplate
-} from '../../visual-tests/visual-tests-utils.ts';
-
-const components = ['elevation', 'layout'];
-test('should show the component', async ({page}: { page: Page }) => {
-	const template = extractHTMLBlocksFromReadme(path.join(new URL('.', import.meta.url).pathname, 'README.md'))
-		.reduce((htmlString: string, block: string) => `${htmlString} <div style="margin: 5px;">${block}</div>`, '');
-
-	await loadComponents({
-		page,
-		components,
-	});
-	await loadTemplate({
-		page,
-		template,
-	});
-
-	const testWrapper = await page.$('#wrapper');
-
-	await page.waitForLoadState('networkidle');
-
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/elevation.png',
-		);
-});