@vonage/vivid 5.24.0 → 5.25.0

package/unbundled/definition57.cjs

@@ -1,83 +1,303 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
+const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_icon = require("./icon.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
-const require_base_progress = require("./base-progress.cjs");
+const require_localized = require("./localized.cjs");
+const require_definition$1 = require("./definition6.cjs");
+const require_definition$2 = require("./definition7.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@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%)}}";
+let _floating_ui_dom = require("@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/progress/progress.ts
+//#region src/lib/popover/popover.ts
 /**
 * @public
-* @component progress
+* @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 Progress = class extends require_delegates_aria.DelegatesAria(require_base_progress.BaseProgress) {
+var Popover = class extends require_localized.Localized(require_delegates_aria.DelegatesAria(require_vivid_element.VividElement)) {
 	constructor(..._args) {
 		super(..._args);
-		this.reverse = false;
+		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 */
+	placementChanged() {
+		this.#updateAutoUpdate();
+	}
+	/** @internal */
+	arrowChanged() {
+		this.#updateAutoUpdate();
+	}
+	/** @internal */
+	openChanged(_oldValue, newValue) {
+		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 */
+	anchorChanged() {
+		this.#updateAnchor();
+	}
+	/** @internal */
+	_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();
+		}
+	}
+	/** @internal */
+	#bindTrigger(anchor) {
+		anchor.setAttribute("aria-haspopup", "dialog");
+		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = this._popoverEl;
+		else anchor.addEventListener("click", this.#manualToggle);
+	}
+	/** @internal */
+	#unbindTrigger(anchor) {
+		anchor.removeAttribute("aria-haspopup");
+		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = null;
+		else anchor.removeEventListener("click", this.#manualToggle);
+	}
+	/** @internal */
+	#manualToggle;
+	/** @internal */
+	get #middleware() {
+		let middleware = [
+			(0, _floating_ui_dom.inline)(),
+			(0, _floating_ui_dom.flip)(),
+			(0, _floating_ui_dom.shift)(),
+			(0, _floating_ui_dom.hide)()
+		];
+		/* v8 ignore next -- @preserve */
+		let offsetValue = this.offset ?? 0;
+		if (this.arrow && this._arrowEl) {
+			offsetValue = 12;
+			middleware = [...middleware, (0, _floating_ui_dom.arrow)({
+				element: this._arrowEl,
+				padding: 10
+			})];
+		}
+		/* v8 ignore else -- @preserve */
+		if (offsetValue > 0) middleware.unshift((0, _floating_ui_dom.offset)(offsetValue));
+		return middleware;
+	}
+	/** @internal */
+	#cleanup;
+	/** @internal */
+	#updateAutoUpdate() {
+		this.#cleanup?.();
+		if (this.open && this.#currentAnchor && this._popoverEl) this.#cleanup = (0, _floating_ui_dom.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 (0, _floating_ui_dom.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"
+		});
+	}
+	/** @internal */
+	#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;
 	}
 };
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], Progress.prototype, "shape", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], Progress.prototype, "connotation", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Progress.prototype, "reverse", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], Popover.prototype, "placement", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Popover.prototype, "manual", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], Popover.prototype, "layout", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "offset",
+	mode: "fromView",
+	converter: _microsoft_fast_element.nullableNumberConverter
+})], Popover.prototype, "offset", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Popover.prototype, "alternate", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "dismiss-button-aria-label" })], Popover.prototype, "dismissButtonAriaLabel", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Popover.prototype, "arrow", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Popover.prototype, "open", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "anchor", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "_slottedAnchor", void 0);
 //#endregion
-//#region src/lib/progress/progress.template.ts
-function determinate() {
-	return _microsoft_fast_element.html` <span
-		class="determinate"
-		style="width: ${(x) => x.percentComplete}%"
-	></span>`;
-}
-function indeterminate() {
-	return _microsoft_fast_element.html` <span class="indeterminate" name="indeterminate">
-		<span class="indicator-1"></span>
-		<span class="indicator-2"></span>
-	</span>`;
-}
-var ProgressTemplate = _microsoft_fast_element.html`<template>
-	<div
-		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], [`shape-${x.shape}`, Boolean(x.shape)], ["reverse", x.reverse], ["paused", x.paused])}"
-		${require_delegates_aria.delegateAria({
-	role: "progressbar",
-	ariaValueNow: (x) => x.value,
-	ariaValueMin: (x) => x.min,
-	ariaValueMax: (x) => x.max
-})}
-	>
-		<div class="progress">
-			${(0, _microsoft_fast_element.when)((x) => typeof x.value === "number", determinate())}
-			${(0, _microsoft_fast_element.when)((x) => typeof x.value !== "number", indeterminate())}
-		</div>
-	</div>
-</template>`;
+//#region src/lib/popover/popover.template.ts
+var popoverTemplate = (context) => {
+	const elevationTag = context.tagFor(require_definition$2.Elevation);
+	const buttonTag = context.tagFor(require_definition$1.Button);
+	const iconTag = context.tagFor(require_icon.Icon);
+	return _microsoft_fast_element.html`
+		<slot name="anchor" ${(0, _microsoft_fast_element.slotted)("_slottedAnchor")}></slot>
+		<${elevationTag}>
+			<div class="base"
+				${(0, _microsoft_fast_element.ref)("_popoverEl")}
+				popover="${(x) => x.manual ? "manual" : "auto"}"
+				tabindex="-1"
+				autofocus
+				${require_delegates_aria.delegateAria({
+		role: "dialog",
+		ariaModal: "false"
+	})}
+			>
+				<div class="${(x) => (0, _microsoft_fast_web_utilities.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>
+					${(0, _microsoft_fast_element.when)((x) => x.manual, _microsoft_fast_element.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}>`)}
+					${(0, _microsoft_fast_element.when)((x) => x.arrow, _microsoft_fast_element.html`<div class="arrow" ${(0, _microsoft_fast_element.ref)("_arrowEl")}></div>`)}
+				</div>
+			</div>
+		</${elevationTag}>
+	`;
+};
 //#endregion
-//#region src/lib/progress/definition.ts
-/** @internal */
-var progressDefinition = require_vivid_element.defineVividComponent("progress", Progress, ProgressTemplate, [], { styles: progress_default });
+//#region src/lib/popover/definition.ts
+var popoverDefinition = require_vivid_element.defineVividComponent("popover", Popover, popoverTemplate, [
+	require_definition$1.buttonDefinition,
+	require_definition.iconDefinition,
+	require_definition$2.elevationDefinition
+], {
+	styles: popover_default,
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the progress elements with the design system.
+* Registers the popover element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerProgress = require_vivid_element.createRegisterFunction(progressDefinition);
+var registerPopover = require_vivid_element.createRegisterFunction(popoverDefinition);
 //#endregion
-Object.defineProperty(exports, "Progress", {
+Object.defineProperty(exports, "Popover", {
 	enumerable: true,
 	get: function() {
-		return Progress;
+		return Popover;
 	}
 });
-Object.defineProperty(exports, "progressDefinition", {
+Object.defineProperty(exports, "popoverDefinition", {
 	enumerable: true,
 	get: function() {
-		return progressDefinition;
+		return popoverDefinition;
 	}
 });
-Object.defineProperty(exports, "registerProgress", {
+Object.defineProperty(exports, "registerPopover", {
 	enumerable: true,
 	get: function() {
-		return registerProgress;
+		return registerPopover;
 	}
 });