@vonage/vivid 5.23.1 → 5.25.0

package/unbundled/definition33.js

@@ -1,97 +1,259 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { n as resolveIcon, r as PLACEHOLDER_ICON, t as numberConverter } from "./numberConverter.js";
 import { t as __decorate } from "./decorate.js";
-import { n as visuallyHiddenDefinition, r as VisuallyHidden } from "./definition22.js";
-import { t as getFlagIconName } from "./utils.js";
-import { attr, html, observable, when } from "@microsoft/fast-element";
-import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/flag/flag.scss?inline
-var flag_default = ":host{vertical-align:sub;display:inline-block}.control.size--6{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_flag-block-size:1em}.control{margin:unset;block-size:var(--_flag-block-size);color:currentColor;contain:strict;inline-size:var(--_flag-block-size);display:flex}svg{block-size:inherit;inline-size:inherit;margin:auto}";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { t as Localized } from "./localized.js";
+import { i as Popup, t as popupDefinition } from "./definition9.js";
+import { r as Badge, t as badgeDefinition } from "./definition15.js";
+import { r as Country, t as countryDefinition } from "./definition32.js";
+import { n as countries } from "./utils.js";
+import { html, observable, ref, when } from "@microsoft/fast-element";
+//#region src/lib/country-group/country-group.scss?inline
+var country_group_default = ":host{flex-direction:column;block-size:100%;inline-size:100%;display:flex;overflow:hidden}.container{flex-wrap:wrap;flex:auto;align-content:flex-start;align-items:center;gap:8px;min-block-size:0;display:flex;position:relative}.container slot{display:contents}.overflow-wrap{align-self:center;line-height:0}.overflow-grid{font:var(--vvd-typography-base);grid-template-columns:repeat(3,auto);gap:8px;padding:8px;display:grid}";
 //#endregion
-//#region src/lib/flag/flag.ts
-var PLACEHOLDER_DELAY = 500;
-var PLACEHOLDER_TIMEOUT = 2e3;
+//#region src/lib/country-group/country-group.ts
+var FULLY_VISIBLE_INTERSECTION_RATIO = .99;
 /**
 * @public
-* @component flag
-* @testQuery code code
+* @component country-group
+* @slot default - One or more `vwc-country` elements (Country only).
 */
-var Flag = class extends VividElement {
+var CountryGroup = class extends Localized(DelegatesAria(VividElement)) {
 	constructor(..._args) {
 		super(..._args);
-		this.flagLoaded = false;
-		this.#currentRequestId = 0;
-		this.#abortController = null;
+		this.items = [];
+		this.lastVisibleIndex = 0;
+		this.computedAriaLabel = null;
+		this.popupOpen = false;
+		this.#observer = null;
+		this.#visibleMap = /* @__PURE__ */ new Map();
+		this.#candidateVisible = -1;
+		this.#candidateStreak = 0;
+		this.#onSlotChange = () => {
+			this.#syncFromSlot();
+			this.#updateAriaLabel();
+			this.#requestFit();
+		};
+		this.#handleIntersection = (entries) => {
+			for (const entry of entries) this.#visibleMap.set(entry.target, (entry.intersectionRatio ?? 0) >= FULLY_VISIBLE_INTERSECTION_RATIO);
+			this.#requestFit();
+			let firstHidden = -1;
+			for (let i = 0; i < this.items.length; i++) if (!(this.#visibleMap.get(this.items[i]) ?? true)) {
+				firstHidden = i;
+				break;
+			}
+			let nextVisible = firstHidden === -1 ? this.items.length : firstHidden;
+			if (firstHidden === this.items.length - 1 && this.badgeEl && (this.#visibleMap.get(this.badgeEl) ?? false)) nextVisible = this.items.length;
+			if (nextVisible < this.items.length && this.badgeEl && this.#visibleMap.has(this.badgeEl) && this.#visibleMap.get(this.badgeEl) === false) nextVisible = Math.max(1, nextVisible - 1);
+			this.#proposeVisibleCount(nextVisible);
+		};
 	}
-	#currentRequestId;
-	#abortController;
-	/** @internal */
-	async codeChanged() {
-		const requestId = ++this.#currentRequestId;
-		if (this.#abortController) this.#abortController.abort();
-		this.#abortController = new AbortController();
-		const iconName = getFlagIconName(this.code);
-		if (!iconName) {
-			this._svg = "";
-			this.flagLoaded = true;
-			return;
-		}
-		this._svg = void 0;
-		this.flagLoaded = false;
-		let timeout = setTimeout(() => {
-			/* v8 ignore else -- @preserve */
-			if (this.#currentRequestId === requestId) {
-				this._svg = PLACEHOLDER_ICON;
-				timeout = setTimeout(() => {
-					/* v8 ignore else -- @preserve */
-					if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) this._svg = void 0;
-				}, PLACEHOLDER_TIMEOUT);
+	get overflowCount() {
+		return Math.max(0, this.items.length - this.lastVisibleIndex);
+	}
+	#observer;
+	#visibleMap;
+	#candidateVisible;
+	#candidateStreak;
+	#countryNameForCode(code) {
+		if (!code) return "";
+		return countries.find((c) => c.code.toUpperCase() === code.toUpperCase())?.label ?? "";
+	}
+	#applyLayout(visibleCount, mode) {
+		for (let i = 0; i < this.items.length; i++) {
+			const el = this.items[i];
+			el.style.order = `${i < visibleCount ? i : i + 1}`;
+			if (i < visibleCount) {
+				el.setAttribute("data-visible", "true");
+				el.style.display = "";
+				el.style.position = "";
+				el.style.inset = "";
+				el.style.visibility = "";
+				el.style.pointerEvents = "";
+				continue;
 			}
-		}, PLACEHOLDER_DELAY);
-		try {
-			const svg = await resolveIcon(iconName, this.#abortController.signal);
-			/* v8 ignore else -- @preserve */
-			if (this.#currentRequestId === requestId) this._svg = svg;
-		} catch {
-			if (this.#currentRequestId === requestId) this._svg = void 0;
-		} finally {
-			if (this.#currentRequestId === requestId) {
-				clearTimeout(timeout);
-				this.flagLoaded = true;
+			el.setAttribute("data-visible", "false");
+			el.style.display = "";
+			el.style.pointerEvents = "none";
+			if (mode === "final") {
+				el.style.position = "absolute";
+				el.style.inset = "0 auto auto 0";
+				el.style.visibility = "hidden";
+			} else {
+				el.style.position = "";
+				el.style.inset = "";
+				el.style.visibility = "hidden";
 			}
 		}
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#syncFromSlot();
+		this.#updateAriaLabel();
+		this.slotEl?.addEventListener("slotchange", this.#onSlotChange);
+		this.#ensureObserver();
+		this.#requestFit();
+	}
+	disconnectedCallback() {
+		this.slotEl?.removeEventListener("slotchange", this.#onSlotChange);
+		this.#observer?.disconnect();
+		this.#observer = null;
+		this.#visibleMap.clear();
+		this.#candidateVisible = -1;
+		this.#candidateStreak = 0;
+		super.disconnectedCallback();
+	}
+	#onSlotChange;
+	#ensureObserver() {
+		if (this.#observer) return;
+		this.#observer = new IntersectionObserver(this.#handleIntersection, {
+			root: this,
+			threshold: [FULLY_VISIBLE_INTERSECTION_RATIO]
+		});
+	}
+	#requestFit() {
+		this.#prepareForFit();
+		this.#observeAll();
+	}
+	#observeAll() {
+		const observer = this.#observer;
+		observer.disconnect();
+		for (const el of this.items) observer.observe(el);
+		if (this.badgeEl && this.overflowCount > 0) observer.observe(this.badgeEl);
+	}
+	#syncFromSlot() {
+		const assigned = this.slotEl.assignedElements({ flatten: true });
+		this.items = assigned.filter((n) => n instanceof Country);
+		this.#visibleMap.clear();
+		for (const el of this.items) this.#visibleMap.set(el, true);
+		this.lastVisibleIndex = this.items.length;
+		this.#applyLayout(this.lastVisibleIndex, "final");
+	}
+	#updateAriaLabel() {
+		const prefix = this.locale.countryGroup.ariaLabelPrefix;
+		const names = [];
+		for (const el of this.items) {
+			const label = (el.getAttribute("label") ?? "").trim();
+			const code = (el.getAttribute("code") ?? "").trim();
+			const fullName = this.#countryNameForCode(code);
+			const value = label || fullName || code;
+			if (value) names.push(value);
+		}
+		const joined = names.join(", ");
+		this.computedAriaLabel = joined ? `${prefix} ${joined}` : prefix;
+	}
+	#handleIntersection;
+	#proposeVisibleCount(nextVisible) {
+		if (this.#candidateVisible === nextVisible) this.#candidateStreak++;
+		else {
+			this.#candidateVisible = nextVisible;
+			this.#candidateStreak = 1;
+		}
+		if (this.#candidateStreak < 2) return;
+		if (this.lastVisibleIndex === nextVisible) return;
+		this.lastVisibleIndex = this.#candidateVisible;
+		this.#applyLayout(this.lastVisibleIndex, "final");
+		if (this.overflowCount === 0) this.popupOpen = false;
+		this.fillOverflowGrid();
+	}
+	#prepareForFit() {
+		this.#applyLayout(this.lastVisibleIndex, "fit");
+	}
+	/** @internal */
+	handleMouseEnter() {
+		this.popupOpen = true;
+	}
+	/** @internal */
+	handleMouseLeave() {
+		this.popupOpen = false;
+	}
+	/** @internal */
+	popupOpenChanged(oldValue) {
+		if (oldValue === void 0) return;
+		if (this.popupOpen) this.fillOverflowGrid();
+	}
+	/** @internal */
+	fillOverflowGrid() {
+		if (!this.overflowGridEl) return;
+		if (this.overflowCount === 0) return;
+		this.overflowGridEl.replaceChildren();
+		const overflowed = this.items.slice(this.lastVisibleIndex);
+		for (const it of overflowed) {
+			const clone = it.cloneNode(true);
+			clone.setAttribute("aria-hidden", "true");
+			clone.removeAttribute("style");
+			this.overflowGridEl.appendChild(clone);
+		}
+	}
 };
-__decorate([attr], Flag.prototype, "code", void 0);
-__decorate([attr], Flag.prototype, "label", void 0);
-__decorate([attr({ converter: numberConverter })], Flag.prototype, "size", void 0);
-__decorate([observable], Flag.prototype, "_svg", void 0);
-__decorate([observable], Flag.prototype, "flagLoaded", void 0);
+__decorate([observable], CountryGroup.prototype, "items", void 0);
+__decorate([observable], CountryGroup.prototype, "lastVisibleIndex", void 0);
+__decorate([observable], CountryGroup.prototype, "computedAriaLabel", void 0);
+__decorate([observable], CountryGroup.prototype, "popupOpen", void 0);
 //#endregion
-//#region src/lib/flag/flag.template.ts
-var flagTemplate = (context) => {
-	const visuallyHiddenTag = context.tagFor(VisuallyHidden);
-	const isDecorative = (x) => !x.label || x.label.trim().length === 0;
+//#region src/lib/country-group/country-group.template.ts
+var CountryGroupTemplate = (context) => {
+	const badgeTag = context.tagFor(Badge);
+	const popupTag = context.tagFor(Popup);
 	return html`
-		<figure
-			class="${(x) => classNames("control", [`size-${x.size}`, typeof x.size === "number"])}"
-			?aria-hidden="${(x) => isDecorative(x)}"
-			?aria-busy="${(x) => !x?.flagLoaded}"
+		<div
+			class="container"
+			${delegateAria({
+		role: "group",
+		ariaLabel: (x) => x.ariaLabel || x.computedAriaLabel
+	})}
 		>
-			${when((x) => x?.flagLoaded && x?._svg, (x) => html`${html.partial(x._svg)}`)}
-			<${visuallyHiddenTag} class="label">${(x) => x?.label}</${visuallyHiddenTag}>
-		</figure>
+			<slot ${ref("slotEl")}></slot>
+			${when((x) => x.overflowCount > 0, html`
+					<div
+						class="overflow-wrap"
+						${ref("overflowWrapEl")}
+						style="order: ${(x) => x.lastVisibleIndex};"
+						@mouseenter="${(x) => x.handleMouseEnter()}"
+						@mouseleave="${(x) => x.handleMouseLeave()}"
+					>
+						<${badgeTag}
+							${ref("badgeEl")}
+							connotation="cta"
+							appearance="duotone"
+							shape="pill"
+							text="${(x) => `+${x.overflowCount}`}"
+						></${badgeTag}>
+					</div>
+				`)}
+		</div>
+
+		${when((x) => x.overflowCount > 0, html`
+				<${popupTag}
+					strategy="fixed"
+					placement="top"
+					alternate
+					arrow
+					:anchor="${(x) => x.overflowWrapEl}"
+					:open="${(x) => x.popupOpen}"
+					exportparts="vvd-theme-alternate"
+				>
+					<div
+						class="overflow-grid"
+						${ref("overflowGridEl")}
+						aria-hidden="true"
+					></div>
+				</${popupTag}>
+			`)}
 	`;
 };
 //#endregion
-//#region src/lib/flag/definition.ts
+//#region src/lib/country-group/definition.ts
 /** @internal */
-var flagDefinition = defineVividComponent("flag", Flag, flagTemplate, [visuallyHiddenDefinition], { styles: flag_default });
+var countryGroupDefinition = defineVividComponent("country-group", CountryGroup, CountryGroupTemplate, [
+	countryDefinition,
+	badgeDefinition,
+	popupDefinition
+], { styles: country_group_default });
 /**
-* Registers the flag component & its prerequisite components with the design system.
+* Registers the country-group element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerFlag = createRegisterFunction(flagDefinition);
+var registerCountryGroup = createRegisterFunction(countryGroupDefinition);
 //#endregion
-export { registerFlag as n, Flag as r, flagDefinition as t };
+export { registerCountryGroup as n, CountryGroup as r, countryGroupDefinition as t };