@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/unbundled/definition36.cjs

@@ -1,152 +1,45 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_decorate = require("./decorate.cjs");
-const require_definition = require("./definition6.cjs");
-const require_definition$1 = require("./definition7.cjs");
-const require_definition$2 = require("./definition10.cjs");
-const require_definition$3 = require("./definition26.cjs");
-const require_definition$4 = require("./definition35.cjs");
-const require_picker_field_template = require("./picker-field.template.cjs");
-const require_calendar_picker_template = require("./calendar-picker.template.cjs");
-const require_single_value_picker = require("./single-value-picker.cjs");
-const require_single_date_picker = require("./single-date-picker.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
+const require_divider = require("./divider.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
-//#region src/lib/date-picker/date-picker.ts
-/**
-* Single date picker component.
-*
-* @public
-* @component date-picker
-* @slot helper-text - Describes how to use the date-picker. Alternative to the `helper-text` attribute.
-* @event {CustomEvent<undefined>} input - Emitted when the date is changed by the user.
-* @event {CustomEvent<undefined>} change - Emitted when the date is changed by the user.
-* @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
-* @testAction selectDate selectDate
-*/
-var DatePicker = class extends require_single_date_picker.SingleDatePickerMixin(require_single_value_picker.SingleValuePicker(require_calendar_picker_template.MinMaxCalendarPicker(require_calendar_picker_template.CalendarPicker(require_picker_field_template.PickerField)))) {
-	/**
-	* @internal
-	*/
-	_toPresentationValue(value) {
-		return require_calendar_picker_template.formatPresentationDate(value, this.locale.calendarPicker);
-	}
-	/**
-	* @internal
-	*/
-	_parsePresentationValue(presentationValue) {
-		return require_calendar_picker_template.parsePresentationDate(presentationValue, this.locale.calendarPicker);
-	}
-	/**
-	* @internal
-	*/
-	_dateValue() {
-		return this.value;
-	}
-	/**
-	* @internal
-	*/
-	_withUpdatedDate(dateStr) {
-		return dateStr;
-	}
-	constructor() {
-		super();
-		this._isValidValue = require_calendar_picker_template.isValidDateStr;
-		this._textFieldSize = "20";
-		this.proxy.type = "date";
-	}
-	/**
-	* @internal
-	*/
-	get _pickerButtonLabel() {
-		if (this.value) return this.locale.calendarPicker.changeDateLabel(this._toPresentationValue(this.value));
-		else return this.locale.calendarPicker.chooseDateLabel;
-	}
-	/**
-	* @internal
-	*/
-	get _dialogLabel() {
-		return this.locale.calendarPicker.chooseDateLabel;
-	}
-	/**
-	* @internal
-	*/
-	get _textFieldPlaceholder() {
-		return this.locale.calendarPicker.dateFormatPlaceholder;
-	}
-	/**
-	* Handle selecting a date from the calendar.
-	* @internal
-	*/
-	_onDateClick(date) {
-		super._onDateClick(date);
-		this._closePopup();
-	}
-	/**
-	* @internal
-	*/
-	_getCustomValidationError() {
-		if (this._isPresentationValueInvalid()) return this.locale.calendarPicker.invalidDateError;
-		return null;
-	}
-	/**
-	* @internal
-	*/
-	_focusableElsWithinDialog() {
-		return this._dialogEl.querySelectorAll("button, .vwc-button");
-	}
-	/**
-	* @internal
-	*/
-	get _pickerButtonIcon() {
-		return "calendar-line";
-	}
-};
-require_decorate.__decorate([_microsoft_fast_element.volatile], DatePicker.prototype, "_pickerButtonLabel", null);
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/divider/divider.scss?inline
+var divider_default = ":host{display:block}.base{--_connotation-color-soft:var(--vvd-divider-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-divider-accent-dim,var(--vvd-color-neutral-200));display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}";
 //#endregion
-//#region src/lib/date-picker/date-picker.template.ts
-var DatePickerTemplate = (context) => {
-	return require_picker_field_template.PickerFieldTemplate(context, require_calendar_picker_template.CalendarPickerTemplate(context), {
-		withSeparator: false,
-		padded: true
-	});
-};
+//#region src/lib/divider/divider.template.ts
+var getAriaOrientation = ({ role, orientation }) => role === require_divider.DividerRole.presentation ? null : orientation;
+var DividerTemplate = _microsoft_fast_element.html`<template
+	${require_host_semantics.applyHostSemantics({
+	role: (x) => x.role || require_divider.DividerRole.separator,
+	ariaHidden: true,
+	ariaOrientation: getAriaOrientation
+})}
+>
+	<span
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [x.orientation, Boolean(x.orientation)], [`appearance-${x.appearance}`, Boolean(x.appearance)])}"
+	></span
+></template>`;
 //#endregion
-//#region src/lib/date-picker/definition.ts
+//#region src/lib/divider/definition.ts
+/** @internal */
+var dividerDefinition = require_vivid_element.defineVividComponent("divider", require_divider.Divider, DividerTemplate, [], { styles: divider_default });
 /**
-* @internal
-*/
-var datePickerDefinition = require_vivid_element.defineVividComponent("date-picker", DatePicker, DatePickerTemplate, [
-	require_definition$1.buttonDefinition,
-	require_definition$2.popupDefinition,
-	require_definition$3.textFieldDefinition,
-	require_definition$4.dividerDefinition,
-	require_definition.visuallyHiddenDefinition
-], {
-	styles: [require_picker_field_template.picker_field_default, require_calendar_picker_template.calendar_picker_default],
-	shadowOptions: { delegatesFocus: true }
-});
-/**
-* Registers the date-picker element with the design system.
+* Registers the divider elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerDatePicker = require_vivid_element.createRegisterFunction(datePickerDefinition);
+var registerDivider = require_vivid_element.createRegisterFunction(dividerDefinition);
 //#endregion
-Object.defineProperty(exports, "DatePicker", {
-	enumerable: true,
-	get: function() {
-		return DatePicker;
-	}
-});
-Object.defineProperty(exports, "datePickerDefinition", {
+Object.defineProperty(exports, "dividerDefinition", {
 	enumerable: true,
 	get: function() {
-		return datePickerDefinition;
+		return dividerDefinition;
 	}
 });
-Object.defineProperty(exports, "registerDatePicker", {
+Object.defineProperty(exports, "registerDivider", {
 	enumerable: true,
 	get: function() {
-		return registerDatePicker;
+		return registerDivider;
 	}
 });

package/unbundled/definition36.js

@@ -1,134 +1,32 @@
 import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
-import { t as __decorate } from "./decorate.js";
-import { n as visuallyHiddenDefinition } from "./definition6.js";
-import { t as buttonDefinition } from "./definition7.js";
-import { t as popupDefinition } from "./definition10.js";
-import { n as textFieldDefinition } from "./definition26.js";
-import { t as dividerDefinition } from "./definition35.js";
-import { n as PickerField, r as picker_field_default, t as PickerFieldTemplate } from "./picker-field.template.js";
-import { a as formatPresentationDate, i as CalendarPicker, l as isValidDateStr, n as MinMaxCalendarPicker, o as parsePresentationDate, t as CalendarPickerTemplate, u as calendar_picker_default } from "./calendar-picker.template.js";
-import { t as SingleValuePicker } from "./single-value-picker.js";
-import { t as SingleDatePickerMixin } from "./single-date-picker.js";
-import { volatile } from "@microsoft/fast-element";
-//#region src/lib/date-picker/date-picker.ts
-/**
-* Single date picker component.
-*
-* @public
-* @component date-picker
-* @slot helper-text - Describes how to use the date-picker. Alternative to the `helper-text` attribute.
-* @event {CustomEvent<undefined>} input - Emitted when the date is changed by the user.
-* @event {CustomEvent<undefined>} change - Emitted when the date is changed by the user.
-* @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
-* @testAction selectDate selectDate
-*/
-var DatePicker = class extends SingleDatePickerMixin(SingleValuePicker(MinMaxCalendarPicker(CalendarPicker(PickerField)))) {
-	/**
-	* @internal
-	*/
-	_toPresentationValue(value) {
-		return formatPresentationDate(value, this.locale.calendarPicker);
-	}
-	/**
-	* @internal
-	*/
-	_parsePresentationValue(presentationValue) {
-		return parsePresentationDate(presentationValue, this.locale.calendarPicker);
-	}
-	/**
-	* @internal
-	*/
-	_dateValue() {
-		return this.value;
-	}
-	/**
-	* @internal
-	*/
-	_withUpdatedDate(dateStr) {
-		return dateStr;
-	}
-	constructor() {
-		super();
-		this._isValidValue = isValidDateStr;
-		this._textFieldSize = "20";
-		this.proxy.type = "date";
-	}
-	/**
-	* @internal
-	*/
-	get _pickerButtonLabel() {
-		if (this.value) return this.locale.calendarPicker.changeDateLabel(this._toPresentationValue(this.value));
-		else return this.locale.calendarPicker.chooseDateLabel;
-	}
-	/**
-	* @internal
-	*/
-	get _dialogLabel() {
-		return this.locale.calendarPicker.chooseDateLabel;
-	}
-	/**
-	* @internal
-	*/
-	get _textFieldPlaceholder() {
-		return this.locale.calendarPicker.dateFormatPlaceholder;
-	}
-	/**
-	* Handle selecting a date from the calendar.
-	* @internal
-	*/
-	_onDateClick(date) {
-		super._onDateClick(date);
-		this._closePopup();
-	}
-	/**
-	* @internal
-	*/
-	_getCustomValidationError() {
-		if (this._isPresentationValueInvalid()) return this.locale.calendarPicker.invalidDateError;
-		return null;
-	}
-	/**
-	* @internal
-	*/
-	_focusableElsWithinDialog() {
-		return this._dialogEl.querySelectorAll("button, .vwc-button");
-	}
-	/**
-	* @internal
-	*/
-	get _pickerButtonIcon() {
-		return "calendar-line";
-	}
-};
-__decorate([volatile], DatePicker.prototype, "_pickerButtonLabel", null);
+import { n as applyHostSemantics } from "./host-semantics.js";
+import { n as DividerRole, t as Divider } from "./divider.js";
+import { html } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/divider/divider.scss?inline
+var divider_default = ":host{display:block}.base{--_connotation-color-soft:var(--vvd-divider-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-divider-accent-dim,var(--vvd-color-neutral-200));display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}";
 //#endregion
-//#region src/lib/date-picker/date-picker.template.ts
-var DatePickerTemplate = (context) => {
-	return PickerFieldTemplate(context, CalendarPickerTemplate(context), {
-		withSeparator: false,
-		padded: true
-	});
-};
+//#region src/lib/divider/divider.template.ts
+var getAriaOrientation = ({ role, orientation }) => role === DividerRole.presentation ? null : orientation;
 //#endregion
-//#region src/lib/date-picker/definition.ts
-/**
-* @internal
-*/
-var datePickerDefinition = defineVividComponent("date-picker", DatePicker, DatePickerTemplate, [
-	buttonDefinition,
-	popupDefinition,
-	textFieldDefinition,
-	dividerDefinition,
-	visuallyHiddenDefinition
-], {
-	styles: [picker_field_default, calendar_picker_default],
-	shadowOptions: { delegatesFocus: true }
-});
+//#region src/lib/divider/definition.ts
+/** @internal */
+var dividerDefinition = defineVividComponent("divider", Divider, html`<template
+	${applyHostSemantics({
+	role: (x) => x.role || DividerRole.separator,
+	ariaHidden: true,
+	ariaOrientation: getAriaOrientation
+})}
+>
+	<span
+		class="${(x) => classNames("base", [x.orientation, Boolean(x.orientation)], [`appearance-${x.appearance}`, Boolean(x.appearance)])}"
+	></span
+></template>`, [], { styles: divider_default });
 /**
-* Registers the date-picker element with the design system.
+* Registers the divider elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerDatePicker = createRegisterFunction(datePickerDefinition);
+var registerDivider = createRegisterFunction(dividerDefinition);
 //#endregion
-export { registerDatePicker as n, DatePicker as r, datePickerDefinition as t };
+export { registerDivider as n, dividerDefinition as t };