@vonage/vivid 5.16.0 → 5.18.0

package/unbundled/definition54.js

@@ -1,279 +1,67 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { o as defineVividComponent, s as createRegisterFunction } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { n as delegateAria } from "./delegates-aria.js";
-import { n as keyArrowRight$1, t as keyArrowLeft$1 } from "./key-codes.js";
-import { a as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
-import { r as Radio, t as radioDefinition } from "./definition53.js";
-import { attr, elements, html, observable, slotted, when } from "@microsoft/fast-element";
-import { Orientation, keyArrowDown, keyArrowUp, keyEnter } from "@microsoft/fast-web-utilities";
-//#region src/lib/radio-group/radio-group.scss?inline
-var radio_group_default = ".base{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:8px;display:flex}.positioning-region{flex-wrap:wrap;gap:8px;display:flex}.positioning-region.vertical{flex-direction:column}fieldset{border:none;margin:0;padding:0;display:block}legend{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px;padding:0}";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { t as BaseProgress } from "./base-progress.js";
+import { attr, html, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/progress/progress.scss?inline
+var progress_default = ".base{outline:none;align-items:center;height:6px;margin:0}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary:var(--vvd-progress-cta-primary,var(--vvd-color-cta-500));--_connotation-color-soft:var(--vvd-progress-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary:var(--vvd-progress-alert-primary,var(--vvd-color-alert-500));--_connotation-color-soft:var(--vvd-progress-alert-soft,var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary:var(--vvd-progress-success-primary,var(--vvd-color-success-500));--_connotation-color-soft:var(--vvd-progress-success-soft,var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary:var(--vvd-progress-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-progress-accent-soft,var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-pacific{--_connotation-color-primary:linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{align-items:center;block-size:100%;inline-size:100%;display:flex;position:relative;overflow:hidden}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%;display:flex}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{inline-size:30%;animation:2s infinite indeterminate-1}.indicator-2{inline-size:60%;animation:2s infinite indeterminate-2}.indicator-1,.indicator-2{background-color:var(--vvd-color-neutral-100);opacity:0;block-size:100%;animation-timing-function:cubic-bezier(.4,0,.6,1);position:absolute}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{background-color:var(--_connotation-color-primary);animation-play-state:paused}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
 //#endregion
-//#region src/lib/radio-group/radio-group.ts
+//#region src/lib/progress/progress.ts
 /**
 * @public
-* @component radio-group
-* @slot - Default slot.
-* @slot helper-text - Describes how to use the text-field. Alternative to the `helper-text` attribute.
-* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value changes
-* @vueModel modelValue value change `event.currentTarget.value`
+* @component progress
 */
-var RadioGroup = class extends WithFeedback(VividElement) {
+var Progress = class extends DelegatesAria(BaseProgress) {
 	constructor(..._args) {
 		super(..._args);
-		this.errorValidationMessage = "";
-		this.orientation = Orientation.horizontal;
-		this.slottedRadioButtons = [];
-		this.radioErrorHandler = (e) => {
-			this.errorValidationMessage = e.target.errorValidationMessage || "";
-		};
-		this.radioChangeHandler = (e) => {
-			const changedRadio = e.target;
-			if (changedRadio.checked) {
-				this.slottedRadioButtons?.forEach((radio) => {
-					if (radio !== changedRadio) radio.checked = false;
-				});
-				this.value = changedRadio.value;
-				this.#setTabRovingTarget(changedRadio);
-			}
-			e.stopPropagation();
-		};
-		this.moveToRadioByIndex = (group, index) => {
-			const radio = group[index];
-			if (!this.isInsideToolbar && !radio.readOnly) radio.checked = true;
-			radio.focus();
-		};
-		this.moveRightOffGroup = () => {
-			this.nextElementSibling?.focus();
-		};
-		this.moveLeftOffGroup = () => {
-			this.previousElementSibling?.focus();
-		};
-		this.moveRight = (e) => {
-			const radio = e.target;
-			const group = this.#focusableRadioButtons;
-			let index = 0;
-			index = group.indexOf(radio) + 1;
-			if (index === group.length && this.isInsideToolbar && e.key === "ArrowRight") {
-				this.moveRightOffGroup();
-				return;
-			}
-			if (index === group.length) index = 0;
-			this.moveToRadioByIndex(group, index);
-		};
-		this.moveLeft = (e) => {
-			const radio = e.target;
-			const group = this.#focusableRadioButtons;
-			let index = group.indexOf(radio) - 1;
-			if (this.isInsideToolbar && e.key === "ArrowLeft" && index < 0) {
-				this.moveLeftOffGroup();
-				return;
-			}
-			index = index < 0 ? group.length - 1 : index;
-			this.moveToRadioByIndex(group, index);
-		};
-		this.keydownHandler = (e) => {
-			switch (e.key) {
-				case keyEnter:
-					this.checkFocusedRadio(e.target);
-					break;
-				case keyArrowRight$1:
-				case keyArrowDown:
-					this.moveRight(e);
-					break;
-				case keyArrowLeft$1:
-				case keyArrowUp:
-					this.moveLeft(e);
-					break;
-				default: return true;
-			}
-		};
-	}
-	/**
-	* @internal
-	*/
-	requiredChanged() {
-		this.slottedRadioButtons?.forEach((radio) => {
-			if (this.required) radio.required = true;
-			else radio.required = false;
-		});
-	}
-	/**
-	* @internal
-	*/
-	readOnlyChanged() {
-		this.slottedRadioButtons?.forEach((radio) => {
-			if (this.readOnly) radio.readOnly = true;
-			else radio.readOnly = false;
-		});
-	}
-	/**
-	* @internal
-	*/
-	disabledChanged() {
-		this.slottedRadioButtons?.forEach((radio) => {
-			if (this.disabled) radio.disabled = true;
-			else radio.disabled = false;
-		});
-	}
-	nameChanged() {
-		this.slottedRadioButtons?.forEach((radio) => {
-			radio.setAttribute("name", this.name);
-		});
-	}
-	/**
-	* @internal
-	*/
-	valueChanged() {
-		this.slottedRadioButtons?.forEach((radio) => {
-			if (radio.value === this.value) radio.checked = true;
-		});
-		this.$emit("change");
-	}
-	/**
-	* @internal
-	*/
-	handleSlotChange() {
-		if (this.errorText) this.slottedRadioButtons?.forEach((radio) => {
-			radio.errorText = this.errorText;
-		});
-	}
-	/**
-	* @internal
-	*/
-	errorTextChanged(_, newErrorText) {
-		if (newErrorText) this.errorValidationMessage = newErrorText;
-		else this.errorValidationMessage = "";
-	}
-	get #focusableRadioButtons() {
-		return this.slottedRadioButtons?.filter((radio) => !radio.disabled);
-	}
-	/**
-	* @internal
-	*/
-	slottedRadioButtonsChanged() {
-		if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) this.setupRadioButtons();
-	}
-	get isInsideToolbar() {
-		return !!this.closest("[role=\"toolbar\"]");
-	}
-	/**
-	* @internal
-	*/
-	connectedCallback() {
-		super.connectedCallback();
-		this.setupRadioButtons();
-	}
-	disconnectedCallback() {
-		this.slottedRadioButtons?.forEach((radio) => {
-			radio.removeEventListener("change", this.radioChangeHandler);
-			radio.removeEventListener("invalid", this.radioErrorHandler);
-		});
-	}
-	setupRadioButtons() {
-		let foundMatchingVal = false;
-		for (const radio of this.slottedRadioButtons) {
-			if (this.name !== void 0) radio.setAttribute("name", this.name);
-			if (this.disabled) radio.disabled = true;
-			if (this.readOnly) radio.readOnly = true;
-			if (this.required) radio.required = true;
-			if (this.value && this.value === radio.value) {
-				radio.checked = true;
-				this.#setTabRovingTarget(radio);
-				foundMatchingVal = true;
-			} else radio.checked = false;
-			radio.addEventListener("change", this.radioChangeHandler);
-			radio.addEventListener("invalid", this.radioErrorHandler);
-		}
-		if (this.value === void 0 && this.slottedRadioButtons?.length > 0) {
-			const checkedRadios = this.slottedRadioButtons?.filter((radio) => radio.hasAttribute("checked"));
-			if (checkedRadios.length > 0 && !foundMatchingVal) {
-				const lastCheckedRadio = checkedRadios[checkedRadios.length - 1];
-				lastCheckedRadio.checked = true;
-				this.#setTabRovingTarget(lastCheckedRadio);
-			} else this.#setTabRovingTarget(this.slottedRadioButtons[0]);
-		}
-	}
-	/**
-	* @internal
-	*/
-	focusInHandler(e) {
-		this.#setTabRovingTarget(e.target);
-	}
-	#setTabRovingTarget(radio) {
-		radio.setAttribute("tabindex", "0");
-		for (const slottedRadio of this.slottedRadioButtons) if (slottedRadio !== radio) slottedRadio.setAttribute("tabindex", "-1");
-	}
-	checkFocusedRadio(target) {
-		if (!target.readOnly) target.checked = true;
+		this.reverse = false;
 	}
 };
-__decorate([attr], RadioGroup.prototype, "label", void 0);
-__decorate([attr({
-	attribute: "required",
-	mode: "boolean"
-})], RadioGroup.prototype, "required", void 0);
-__decorate([attr({
-	attribute: "readonly",
-	mode: "boolean"
-})], RadioGroup.prototype, "readOnly", void 0);
-__decorate([attr({
-	attribute: "disabled",
-	mode: "boolean"
-})], RadioGroup.prototype, "disabled", void 0);
-__decorate([attr], RadioGroup.prototype, "name", void 0);
-__decorate([attr], RadioGroup.prototype, "value", void 0);
-__decorate([observable], RadioGroup.prototype, "errorValidationMessage", void 0);
-__decorate([attr({ attribute: "error-text" })], RadioGroup.prototype, "errorText", void 0);
-__decorate([attr], RadioGroup.prototype, "orientation", void 0);
-__decorate([observable], RadioGroup.prototype, "slottedRadioButtons", void 0);
+__decorate([attr()], Progress.prototype, "shape", void 0);
+__decorate([attr()], Progress.prototype, "connotation", void 0);
+__decorate([attr({ mode: "boolean" })], Progress.prototype, "reverse", void 0);
 //#endregion
-//#region src/lib/radio-group/radio-group.template.ts
-var RadioGroupTemplate = (context) => {
-	const radioTagName = context.tagFor(Radio, true);
-	return html`
-		<template
-			@keydown="${(x, c) => x.keydownHandler(c.event)}"
-			@focusin="${(x, c) => x.focusInHandler(c.event)}"
-		>
-			<div class="base">
-				<fieldset
-					${delegateAria({
-		role: "radiogroup",
-		ariaDisabled: (x) => x.disabled,
-		ariaReadOnly: (x) => x.readOnly,
-		ariaOrientation: (x) => x.orientation
-	})}
-					aria-labelledby="label"
-					aria-describedby="${(x) => x._feedbackDescribedBy}"
-					aria-invalid="${(x) => x.errorText ? "true" : "false"}"
-					class="control positioning-region ${(x) => x.orientation === Orientation.horizontal ? "horizontal" : "vertical"}"
-				>
-					${when((x) => x.label, html`<legend id="label">${(x) => x.label}</legend>`)}
-					<slot
-						${slotted({
-		property: "slottedRadioButtons",
-		filter: elements(radioTagName)
-	})}
-						@slotchange="${(x) => x.handleSlotChange()}"
-					></slot>
-				</fieldset>
-				${(x) => x._getFeedbackTemplate(context)}
-			</div>
-		</template>
-	`;
-};
+//#region src/lib/progress/progress.template.ts
+var getClasses = ({ connotation, shape, reverse, paused }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], [`shape-${shape}`, Boolean(shape)], ["reverse", Boolean(reverse)], ["paused", Boolean(paused)]);
+function determinate() {
+	return html` <span
+		class="determinate"
+		style="width: ${(x) => x.percentComplete}%"
+	></span>`;
+}
+function indeterminate() {
+	return html` <span class="indeterminate" name="indeterminate">
+		<span class="indicator-1"></span>
+		<span class="indicator-2"></span>
+	</span>`;
+}
 //#endregion
-//#region src/lib/radio-group/definition.ts
+//#region src/lib/progress/definition.ts
 /**
 * @internal
 */
-var radioGroupDefinition = defineVividComponent("radio-group", RadioGroup, RadioGroupTemplate, [radioDefinition, feedbackMessageDefinition], { styles: radio_group_default });
+var progressDefinition = defineVividComponent("progress", Progress, html`<template>
+	<div
+		class="${getClasses}"
+		${delegateAria({
+	role: "progressbar",
+	ariaValueNow: (x) => x.value,
+	ariaValueMin: (x) => x.min,
+	ariaValueMax: (x) => x.max
+})}
+	>
+		<div class="progress">
+			${when((x) => typeof x.value === "number", determinate())}
+			${when((x) => typeof x.value !== "number", indeterminate())}
+		</div>
+	</div>
+</template>`, [], { styles: progress_default });
 /**
-* Registers the radio-group elements with the design system.
+* Registers the progress elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerRadioGroup = createRegisterFunction(radioGroupDefinition);
+var registerProgress = createRegisterFunction(progressDefinition);
 //#endregion
-export { registerRadioGroup as n, RadioGroup as r, radioGroupDefinition as t };
+export { registerProgress as n, Progress as r, progressDefinition as t };