@vonage/vivid 5.24.0 → 5.27.0

package/unbundled/definition58.js

@@ -1,160 +1,301 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
-import { t as CheckableFormAssociated } from "./form-associated.js";
-import { t as FormElement } from "./form-element.js";
-import { t as WithErrorText } from "./with-error-text.js";
-import { Updates, attr, html, observable, when } from "@microsoft/fast-element";
-import { classNames, keySpace } from "@microsoft/fast-web-utilities";
-//#region src/lib/radio/radio.scss?inline
-var radio_default = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-radio-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-radio-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-intermediate:var(--vvd-radio-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-radio-cta-firm,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-radio-cta-fierce,var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-radio-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-radio-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-radio-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-radio-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-radio-accent-fierce,var(--vvd-color-neutral-700))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base{cursor:pointer;user-select:none;align-items:center;gap:8px;display:inline-flex}.base.disabled{pointer-events:none}.control{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:50%;flex-shrink:0;position:relative}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";opacity:1;transition:opacity .2s;position:absolute;inset:5px}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color:transparent;position:relative}:host(:focus-visible) .control:before{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
+import { t as Icon } from "./icon.js";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { t as Localized } from "./localized.js";
+import { i as Button, t as buttonDefinition } from "./definition6.js";
+import { r as Elevation, t as elevationDefinition } from "./definition7.js";
+import { i as setAnchorExpanded, r as clearAnchorExpanded } from "./anchored.js";
+import { attr, html, nullableNumberConverter, observable, ref, slotted, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+import { arrow, autoUpdate, computePosition, flip, hide, inline, offset, shift } from "@floating-ui/dom";
+//#region src/lib/popover/popover.scss?inline
+var popover_default = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{padding:var(--popover-padding,24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap,24px);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}";
 //#endregion
-//#region src/lib/radio/radio.ts
+//#region src/lib/popover/popover.ts
 /**
 * @public
-* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value changes
-* @component radio
-* @testAction check click #control
-* @testQuery checked checked true
-* @testQuery unchecked checked false
-* @testRef control shadow .control
+* @component popover
+* @slot - Default slot for the popover content.
+* @slot anchor - Slot for the trigger element.
+* @slot footer - Use the footer slot in order to add action buttons or other contents to the bottom of the Popover.
+* @event {CustomEvent} open - Fired when the popover opens.
+* @event {CustomEvent} close - Fired when the popover closes.
 */
-var Radio = class extends WithErrorText(FormElement(CheckableFormAssociated(VividElement))) {
+var Popover = class extends Localized(DelegatesAria(VividElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.placement = "bottom";
+		this.manual = false;
+		this.layout = "default";
+		this.offset = 8;
+		this.alternate = false;
+		this.dismissButtonAriaLabel = null;
+		this.arrow = false;
+		this.open = false;
+		this.#currentAnchor = null;
+		this.#manualToggle = () => {
+			this._popoverEl.togglePopover();
+		};
+		this.#autoUpdateCallback = () => {
+			this.#lastPositionUpdate = this.updatePosition();
+		};
+		this.#handleNativeToggle = (e) => {
+			const isOpen = e.newState ? e.newState === "open" : this._popoverEl.matches(":popover-open");
+			if (this.open !== isOpen) this.open = isOpen;
+			this.$emit(isOpen ? "open" : "close", void 0, { bubbles: false });
+		};
+	}
 	/** @internal */
-	readOnlyChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.proxy instanceof HTMLInputElement) this.proxy.readOnly = this.readOnly;
+	placementChanged() {
+		this.#updateAutoUpdate();
 	}
 	/** @internal */
-	defaultCheckedChanged() {
-		if (this.$fastController.isConnected && !this.dirtyChecked) {
-			/* v8 ignore else -- @preserve */
-			if (!this.isInsideRadioGroup()) {
-				this.checked = this.defaultChecked;
-				this.dirtyChecked = false;
-			}
-		}
+	arrowChanged() {
+		this.#updateAutoUpdate();
 	}
-	constructor() {
-		super();
-		this.initialValue = "on";
-		this.defaultSlottedNodes = [];
-		this.keypressHandler = (e) => {
-			switch (e.key) {
-				case keySpace:
-					if (!this.checked && !this.readOnly) this.checked = true;
-					return;
-			}
-			return true;
-		};
-		this.proxy = document.createElement("input");
-		this.#validateValueMissingWithSiblings = () => {
-			const siblings = this.#radioSiblings;
-			const group = this.#radioGroup;
-			if (siblings && siblings.length > 1) {
-				if (siblings.some((x) => x.checked)) {
-					this.setValidity({ valueMissing: false });
-					this.errorValidationMessage = "";
-					if (group) group.errorValidationMessage = "";
-				}
-			}
-		};
-		this.#syncSiblingsRequiredValidationStatus = () => {
-			if (this.elementInternals && !this.validity.valueMissing) {
-				const siblings = this.#radioSiblings;
-				const group = this.#radioGroup;
-				if (siblings && siblings.length > 1) siblings.forEach((x) => {
-					x.elementInternals.setValidity({ valueMissing: false });
-					x.errorValidationMessage = "";
-					if (group) group.errorValidationMessage = "";
-				});
-			}
-		};
-		this.proxy.setAttribute("type", "radio");
-		this.proxy.setAttribute("name", this.name);
-		this.checked = this.defaultChecked;
-		this.dirtyChecked = false;
+	/** @internal */
+	openChanged(_oldValue, newValue) {
+		this.#updateAnchorExpandedState();
+		if (!this._popoverEl) return;
+		const isOpen = this._popoverEl.matches(":popover-open");
+		if (newValue && !isOpen) this._popoverEl.showPopover();
+		else if (!newValue && isOpen) this._popoverEl.hidePopover();
+		this.#updateAutoUpdate();
 	}
 	/** @internal */
-	nameChanged(previous, next) {
-		super.nameChanged(previous, next);
-		if (next !== null) this.proxy.setAttribute("name", this.name);
-		else this.proxy.removeAttribute("name");
-		Updates.enqueue(this.validate);
+	anchorChanged() {
+		this.#updateAnchor();
 	}
 	/** @internal */
-	connectedCallback() {
-		super.connectedCallback();
-		Updates.enqueue(this.validate);
-		if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
-			/* v8 ignore else -- @preserve */
-			if (!this.disabled) this.setAttribute("tabindex", "0");
-		}
-		if (this.defaultChecked) {
-			/* v8 ignore else -- @preserve */
-			if (!this.dirtyChecked) {
-				if (!this.isInsideRadioGroup()) {
-					this.checked = this.defaultChecked;
-					this.dirtyChecked = false;
-				}
-			}
+	_slottedAnchorChanged() {
+		this.#updateAnchor();
+	}
+	/** @internal */
+	#currentAnchor;
+	/** @internal */
+	#updateAnchor() {
+		if (!this._popoverEl) return;
+		const newAnchor = this.anchor || this._slottedAnchor?.[0] || null;
+		if (this.#currentAnchor === newAnchor) return;
+		if (this.#currentAnchor) this.#unbindTrigger(this.#currentAnchor);
+		this.#currentAnchor = newAnchor;
+		if (this.#currentAnchor && this._popoverEl) {
+			this.#bindTrigger(this.#currentAnchor);
+			this.#updateAutoUpdate();
 		}
 	}
-	isInsideRadioGroup() {
-		return this.closest("[data-vvd-component=\"radio-group\"]") !== null;
+	/** @internal */
+	#bindTrigger(anchor) {
+		anchor.setAttribute("aria-haspopup", "dialog");
+		this.#updateAnchorExpandedState();
+		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = this._popoverEl;
+		else anchor.addEventListener("click", this.#manualToggle);
 	}
 	/** @internal */
-	clickHandler(_) {
-		if (!this.disabled && !this.readOnly && !this.checked) this.checked = true;
+	#unbindTrigger(anchor) {
+		anchor.removeAttribute("aria-haspopup");
+		anchor.ariaExpanded = null;
+		clearAnchorExpanded(anchor);
+		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = null;
+		else anchor.removeEventListener("click", this.#manualToggle);
 	}
-	get #radioSiblings() {
-		const siblings = this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);
-		if (siblings) return Array.from(siblings);
-		return [];
+	/**
+	* Reflects the open state onto the anchor as `aria-expanded` (for assistive
+	* technology) and `data-expanded` (a styling hook, e.g. to show a pressed
+	* trigger while the Popover is open). Mirrors the Menu anchor behaviour.
+	* @internal
+	*/
+	#updateAnchorExpandedState() {
+		if (!this.#currentAnchor) return;
+		this.#currentAnchor.ariaExpanded = this.open.toString();
+		setAnchorExpanded(this.#currentAnchor, this.open);
 	}
-	get #radioGroup() {
-		return this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`);
+	/** @internal */
+	#manualToggle;
+	/** @internal */
+	get #middleware() {
+		let middleware = [
+			inline(),
+			flip(),
+			shift(),
+			hide()
+		];
+		/* v8 ignore next -- @preserve */
+		let offsetValue = this.offset ?? 0;
+		if (this.arrow && this._arrowEl) {
+			offsetValue = 12;
+			middleware = [...middleware, arrow({
+				element: this._arrowEl,
+				padding: 10
+			})];
+		}
+		/* v8 ignore else -- @preserve */
+		if (offsetValue > 0) middleware.unshift(offset(offsetValue));
+		return middleware;
+	}
+	/** @internal */
+	#cleanup;
+	/** @internal */
+	#updateAutoUpdate() {
+		this.#cleanup?.();
+		if (this.open && this.#currentAnchor && this._popoverEl) this.#cleanup = autoUpdate(this.#currentAnchor, this._popoverEl, this.#autoUpdateCallback);
+	}
+	/**
+	* Tracks the promise of the last position update.
+	* @internal
+	*/
+	#lastPositionUpdate;
+	/** @internal */
+	#autoUpdateCallback;
+	/** Updates the position of the popover */
+	async updatePosition() {
+		/* v8 ignore if -- @preserve */
+		if (!this.open || !this.#currentAnchor || !this._popoverEl) return;
+		const positionData = await computePosition(this.#currentAnchor, this._popoverEl, {
+			placement: this.placement,
+			strategy: "fixed",
+			middleware: this.#middleware
+		});
+		/* v8 ignore if -- @preserve */
+		if (!this.open) return;
+		this.#assignPopoverPosition(positionData);
+		if (this.arrow && this._arrowEl) this.#assignArrowPosition(positionData);
+	}
+	/** @internal */
+	#assignPopoverPosition(data) {
+		const { x, y } = data;
+		Object.assign(this._popoverEl.style, {
+			left: `${x}px`,
+			top: `${y}px`,
+			visibility: data.middlewareData.hide?.referenceHidden ? "hidden" : "visible"
+		});
 	}
-	#validateValueMissingWithSiblings;
-	#syncSiblingsRequiredValidationStatus;
 	/** @internal */
-	validate(anchor) {
-		super.validate(anchor);
-		if (this.proxy) {
-			this.errorValidationMessage = this.validationMessage || "";
-			if (this.validity.valueMissing) this.#validateValueMissingWithSiblings();
-			else this.#syncSiblingsRequiredValidationStatus();
+	#assignArrowPosition(data) {
+		/* v8 ignore if -- @preserve */
+		if (!this._arrowEl) return;
+		const { x: arrowX, y: arrowY } = data.middlewareData.arrow;
+		const styles = {
+			left: "calc(100% - 4px)",
+			right: "-4px",
+			top: "calc(100% - 4px)",
+			bottom: "-4px"
+		};
+		const staticAxis = data.placement.split("-")[0];
+		Object.assign(this._arrowEl.style, {
+			left: arrowX ? `${arrowX}px` : styles[staticAxis],
+			top: arrowY ? `${arrowY}px` : styles[staticAxis]
+		});
+	}
+	/**
+	* Syncs native toggle state (Esc key, light dismiss) back to the 'open' attribute.
+	* @internal
+	*/
+	#handleNativeToggle;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#updateAnchor();
+		/* v8 ignore else -- @preserve */
+		if (this._popoverEl) {
+			this._popoverEl.addEventListener("toggle", this.#handleNativeToggle);
+			if (this.open && !this._popoverEl.matches(":popover-open")) {
+				this._popoverEl.showPopover();
+				this.#updateAutoUpdate();
+			}
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanup?.();
+		if (this.#currentAnchor) {
+			this.#unbindTrigger(this.#currentAnchor);
+			this.#currentAnchor = null;
 		}
+		/* v8 ignore else -- @preserve */
+		if (this._popoverEl) this._popoverEl.removeEventListener("toggle", this.#handleNativeToggle);
+	}
+	/** Opens the Popover. */
+	show() {
+		this.open = true;
+		return this.#lastPositionUpdate ?? Promise.resolve();
+	}
+	/** Closes the Popover. */
+	hide() {
+		this.open = false;
+	}
+	/** Toggles the Popover between its open and closed states. */
+	toggle() {
+		this.open = !this.open;
 	}
 };
-__decorate([attr], Radio.prototype, "connotation", void 0);
+__decorate([attr({ mode: "fromView" })], Popover.prototype, "placement", void 0);
+__decorate([attr({ mode: "boolean" })], Popover.prototype, "manual", void 0);
+__decorate([attr({ mode: "fromView" })], Popover.prototype, "layout", void 0);
 __decorate([attr({
-	attribute: "readonly",
-	mode: "boolean"
-})], Radio.prototype, "readOnly", void 0);
-__decorate([observable], Radio.prototype, "defaultSlottedNodes", void 0);
+	attribute: "offset",
+	mode: "fromView",
+	converter: nullableNumberConverter
+})], Popover.prototype, "offset", void 0);
+__decorate([attr({ mode: "boolean" })], Popover.prototype, "alternate", void 0);
+__decorate([attr({ attribute: "dismiss-button-aria-label" })], Popover.prototype, "dismissButtonAriaLabel", void 0);
+__decorate([attr({ mode: "boolean" })], Popover.prototype, "arrow", void 0);
+__decorate([attr({ mode: "boolean" })], Popover.prototype, "open", void 0);
+__decorate([observable], Popover.prototype, "anchor", void 0);
+__decorate([observable], Popover.prototype, "_slottedAnchor", void 0);
+//#endregion
+//#region src/lib/popover/popover.template.ts
+var popoverTemplate = (context) => {
+	const elevationTag = context.tagFor(Elevation);
+	const buttonTag = context.tagFor(Button);
+	const iconTag = context.tagFor(Icon);
+	return html`
+		<slot name="anchor" ${slotted("_slottedAnchor")}></slot>
+		<${elevationTag}>
+			<div class="base"
+				${ref("_popoverEl")}
+				popover="${(x) => x.manual ? "manual" : "auto"}"
+				tabindex="-1"
+				autofocus
+				${delegateAria({
+		role: "dialog",
+		ariaModal: "false"
+	})}
+			>
+				<div class="${(x) => classNames("control", ["open", x.open], ["manual", x.manual], ["condensed", x.layout === "condensed"])}"
+					part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
+					<slot></slot>
+					<slot name="footer"></slot>
+					${when((x) => x.manual, html`<${buttonTag}
+							aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.popover.dismissButtonLabel}"
+							type="button"
+							size="condensed"
+							class="dismiss-button"
+							@click="${(x) => x.hide()}">
+							<${iconTag} name="close-line" slot="icon"></${iconTag}>
+						</${buttonTag}>`)}
+					${when((x) => x.arrow, html`<div class="arrow" ${ref("_arrowEl")}></div>`)}
+				</div>
+			</div>
+		</${elevationTag}>
+	`;
+};
 //#endregion
-//#region src/lib/radio/definition.ts
-/** @internal */
-var radioDefinition = defineVividComponent("radio", Radio, html`<template
-	aria-checked="${(x) => x?.checked}"
-	aria-disabled="${(x) => x?.disabled}"
-	aria-required="${(x) => x?.required}"
-	@keypress="${(x, c) => x?.keypressHandler(c.event)}"
-	@click="${(x, c) => x?.clickHandler(c.event)}"
-	role="radio"
->
-	<div
-		class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["checked", x.checked], ["readonly", x.readOnly], ["disabled", x.disabled])}"
-	>
-		<div class="control"></div>
-		${when((x) => x?.label, html`<label class="label">${(x) => x?.label}</label>`)}
-	</div>
-</template>`, [], { styles: radio_default });
+//#region src/lib/popover/definition.ts
+var popoverDefinition = defineVividComponent("popover", Popover, popoverTemplate, [
+	buttonDefinition,
+	iconDefinition,
+	elevationDefinition
+], {
+	styles: popover_default,
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the radio elements with the design system.
+* Registers the popover element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerRadio = createRegisterFunction(radioDefinition);
+var registerPopover = createRegisterFunction(popoverDefinition);
 //#endregion
-export { registerRadio as n, Radio as r, radioDefinition as t };
+export { registerPopover as n, Popover as r, popoverDefinition as t };