@vonage/vivid 5.17.0 → 5.19.0

package/country-group/definition.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_definition = require("../unbundled/definition32.cjs");
+exports.VwcCountryGroupElement = require_definition.CountryGroup;
+exports.countryGroupDefinition = require_definition.countryGroupDefinition;
+exports.registerCountryGroup = require_definition.registerCountryGroup;

package/country-group/definition.js

@@ -0,0 +1,2 @@
+import { n as registerCountryGroup, r as CountryGroup, t as countryGroupDefinition } from "../unbundled/definition32.js";
+export { CountryGroup as VwcCountryGroupElement, countryGroupDefinition, registerCountryGroup };

package/country-group/index.cjs

@@ -0,0 +1,43 @@
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/delegates-aria.cjs`),o=require(`../bundled/definition8.cjs`),s=require(`../bundled/utils.cjs`),c=require(`../bundled/definition22.cjs`),l=require(`../bundled/definition23.cjs`);var u=`: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}`,d=.99,f=class extends e.t(a.t(t.t)){constructor(...e){super(...e),this.items=[],this.lastVisibleIndex=0,this.computedAriaLabel=null,this.popupOpen=!1,this.#e=null,this.#t=new Map,this.#n=-1,this.#r=0,this.#o=()=>{this.#u(),this.#d(),this.#c()},this.#f=e=>{for(let t of e)this.#t.set(t.target,(t.intersectionRatio??0)>=d);this.#c();let t=-1;for(let e=0;e<this.items.length;e++)if(!(this.#t.get(this.items[e])??!0)){t=e;break}let n=t===-1?this.items.length:t;t===this.items.length-1&&this.badgeEl&&(this.#t.get(this.badgeEl)??!1)&&(n=this.items.length),n<this.items.length&&this.badgeEl&&this.#t.has(this.badgeEl)&&this.#t.get(this.badgeEl)===!1&&(n=Math.max(1,n-1)),this.#p(n)}}get overflowCount(){return Math.max(0,this.items.length-this.lastVisibleIndex)}#e;#t;#n;#r;#i(e){return e?s.n.find(t=>t.code.toUpperCase()===e.toUpperCase())?.label??``:``}#a(e,t){for(let n=0;n<this.items.length;n++){let r=this.items[n];if(r.style.order=`${n<e?n:n+1}`,n<e){r.setAttribute(`data-visible`,`true`),r.style.display=``,r.style.position=``,r.style.inset=``,r.style.visibility=``,r.style.pointerEvents=``;continue}r.setAttribute(`data-visible`,`false`),r.style.display=``,r.style.pointerEvents=`none`,t===`final`?(r.style.position=`absolute`,r.style.inset=`0 auto auto 0`,r.style.visibility=`hidden`):(r.style.position=``,r.style.inset=``,r.style.visibility=`hidden`)}}connectedCallback(){super.connectedCallback(),this.#u(),this.#d(),this.slotEl?.addEventListener(`slotchange`,this.#o),this.#s(),this.#c()}disconnectedCallback(){this.slotEl?.removeEventListener(`slotchange`,this.#o),this.#e?.disconnect(),this.#e=null,this.#t.clear(),this.#n=-1,this.#r=0,super.disconnectedCallback()}#o;#s(){this.#e||=new IntersectionObserver(this.#f,{root:this,threshold:[d]})}#c(){this.#m(),this.#l()}#l(){let e=this.#e;e.disconnect();for(let t of this.items)e.observe(t);this.badgeEl&&this.overflowCount>0&&e.observe(this.badgeEl)}#u(){let e=this.slotEl.assignedElements({flatten:!0});this.items=e.filter(e=>e instanceof l.r),this.#t.clear();for(let e of this.items)this.#t.set(e,!0);this.lastVisibleIndex=this.items.length,this.#a(this.lastVisibleIndex,`final`)}#d(){let e=this.locale.countryGroup.ariaLabelPrefix,t=[];for(let e of this.items){let n=(e.getAttribute(`label`)??``).trim(),r=(e.getAttribute(`code`)??``).trim(),i=this.#i(r),a=n||i||r;a&&t.push(a)}let n=t.join(`, `);this.computedAriaLabel=n?`${e} ${n}`:e}#f;#p(e){this.#n===e?this.#r++:(this.#n=e,this.#r=1),!(this.#r<2)&&this.lastVisibleIndex!==e&&(this.lastVisibleIndex=this.#n,this.#a(this.lastVisibleIndex,`final`),this.overflowCount===0&&(this.popupOpen=!1),this.fillOverflowGrid())}#m(){this.#a(this.lastVisibleIndex,`fit`)}handleMouseEnter(){this.popupOpen=!0}handleMouseLeave(){this.popupOpen=!1}popupOpenChanged(e){e!==void 0&&this.popupOpen&&this.fillOverflowGrid()}fillOverflowGrid(){if(!this.overflowGridEl||this.overflowCount===0)return;this.overflowGridEl.replaceChildren();let e=this.items.slice(this.lastVisibleIndex);for(let t of e){let e=t.cloneNode(!0);e.setAttribute(`aria-hidden`,`true`),e.removeAttribute(`style`),this.overflowGridEl.appendChild(e)}}};i.t([t.D],f.prototype,`items`,void 0),i.t([t.D],f.prototype,`lastVisibleIndex`,void 0),i.t([t.D],f.prototype,`computedAriaLabel`,void 0),i.t([t.D],f.prototype,`popupOpen`,void 0);var p=t.s(`country-group`,f,e=>{let i=e.tagFor(c.r),s=e.tagFor(o.i);return t.f`
+		<div
+			class="container"
+			${a.n({role:`group`,ariaLabel:e=>e.ariaLabel||e.computedAriaLabel})}
+		>
+			<slot ${n.t(`slotEl`)}></slot>
+			${r.t(e=>e.overflowCount>0,t.f`
+					<div
+						class="overflow-wrap"
+						${n.t(`overflowWrapEl`)}
+						style="order: ${e=>e.lastVisibleIndex};"
+						@mouseenter="${e=>e.handleMouseEnter()}"
+						@mouseleave="${e=>e.handleMouseLeave()}"
+					>
+						<${i}
+							${n.t(`badgeEl`)}
+							connotation="cta"
+							appearance="duotone"
+							shape="pill"
+							text="${e=>`+`+e.overflowCount}"
+						></${i}>
+					</div>
+				`)}
+		</div>
+
+		${r.t(e=>e.overflowCount>0,t.f`
+				<${s}
+					strategy="fixed"
+					placement="top"
+					alternate
+					arrow
+					:anchor="${e=>e.overflowWrapEl}"
+					:open="${e=>e.popupOpen}"
+					exportparts="vvd-theme-alternate"
+				>
+					<div
+						class="overflow-grid"
+						${n.t(`overflowGridEl`)}
+						aria-hidden="true"
+					></div>
+				</${s}>
+			`)}
+	`},[l.t,c.t,o.t],{styles:u});t.c(p)();

package/country-group/index.js

@@ -0,0 +1,166 @@
+import { t as e } from "../bundled/localized.js";
+import { D as t, c as n, f as r, s as i, t as a } from "../bundled/vivid-element.js";
+import { t as o } from "../bundled/ref.js";
+import { t as s } from "../bundled/when.js";
+import { t as c } from "../bundled/decorate.js";
+import { n as l, t as u } from "../bundled/delegates-aria.js";
+import { i as d, t as f } from "../bundled/definition8.js";
+import { n as p } from "../bundled/utils.js";
+import { r as m, t as h } from "../bundled/definition22.js";
+import { r as g, t as _ } from "../bundled/definition23.js";
+//#region src/lib/country-group/country-group.scss?inline
+var v = ":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}", y = .99, b = class extends e(u(a)) {
+	constructor(...e) {
+		super(...e), this.items = [], this.lastVisibleIndex = 0, this.computedAriaLabel = null, this.popupOpen = !1, this.#e = null, this.#t = /* @__PURE__ */ new Map(), this.#n = -1, this.#r = 0, this.#o = () => {
+			this.#u(), this.#d(), this.#c();
+		}, this.#f = (e) => {
+			for (let t of e) this.#t.set(t.target, (t.intersectionRatio ?? 0) >= y);
+			this.#c();
+			let t = -1;
+			for (let e = 0; e < this.items.length; e++) if (!(this.#t.get(this.items[e]) ?? !0)) {
+				t = e;
+				break;
+			}
+			let n = t === -1 ? this.items.length : t;
+			t === this.items.length - 1 && this.badgeEl && (this.#t.get(this.badgeEl) ?? !1) && (n = this.items.length), n < this.items.length && this.badgeEl && this.#t.has(this.badgeEl) && this.#t.get(this.badgeEl) === !1 && (n = Math.max(1, n - 1)), this.#p(n);
+		};
+	}
+	get overflowCount() {
+		return Math.max(0, this.items.length - this.lastVisibleIndex);
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i(e) {
+		return e ? p.find((t) => t.code.toUpperCase() === e.toUpperCase())?.label ?? "" : "";
+	}
+	#a(e, t) {
+		for (let n = 0; n < this.items.length; n++) {
+			let r = this.items[n];
+			if (r.style.order = `${n < e ? n : n + 1}`, n < e) {
+				r.setAttribute("data-visible", "true"), r.style.display = "", r.style.position = "", r.style.inset = "", r.style.visibility = "", r.style.pointerEvents = "";
+				continue;
+			}
+			r.setAttribute("data-visible", "false"), r.style.display = "", r.style.pointerEvents = "none", t === "final" ? (r.style.position = "absolute", r.style.inset = "0 auto auto 0", r.style.visibility = "hidden") : (r.style.position = "", r.style.inset = "", r.style.visibility = "hidden");
+		}
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#u(), this.#d(), this.slotEl?.addEventListener("slotchange", this.#o), this.#s(), this.#c();
+	}
+	disconnectedCallback() {
+		this.slotEl?.removeEventListener("slotchange", this.#o), this.#e?.disconnect(), this.#e = null, this.#t.clear(), this.#n = -1, this.#r = 0, super.disconnectedCallback();
+	}
+	#o;
+	#s() {
+		this.#e ||= new IntersectionObserver(this.#f, {
+			root: this,
+			threshold: [y]
+		});
+	}
+	#c() {
+		this.#m(), this.#l();
+	}
+	#l() {
+		let e = this.#e;
+		e.disconnect();
+		for (let t of this.items) e.observe(t);
+		this.badgeEl && this.overflowCount > 0 && e.observe(this.badgeEl);
+	}
+	#u() {
+		let e = this.slotEl.assignedElements({ flatten: !0 });
+		this.items = e.filter((e) => e instanceof g), this.#t.clear();
+		for (let e of this.items) this.#t.set(e, !0);
+		this.lastVisibleIndex = this.items.length, this.#a(this.lastVisibleIndex, "final");
+	}
+	#d() {
+		let e = this.locale.countryGroup.ariaLabelPrefix, t = [];
+		for (let e of this.items) {
+			let n = (e.getAttribute("label") ?? "").trim(), r = (e.getAttribute("code") ?? "").trim(), i = this.#i(r), a = n || i || r;
+			a && t.push(a);
+		}
+		let n = t.join(", ");
+		this.computedAriaLabel = n ? `${e} ${n}` : e;
+	}
+	#f;
+	#p(e) {
+		this.#n === e ? this.#r++ : (this.#n = e, this.#r = 1), !(this.#r < 2) && this.lastVisibleIndex !== e && (this.lastVisibleIndex = this.#n, this.#a(this.lastVisibleIndex, "final"), this.overflowCount === 0 && (this.popupOpen = !1), this.fillOverflowGrid());
+	}
+	#m() {
+		this.#a(this.lastVisibleIndex, "fit");
+	}
+	handleMouseEnter() {
+		this.popupOpen = !0;
+	}
+	handleMouseLeave() {
+		this.popupOpen = !1;
+	}
+	popupOpenChanged(e) {
+		e !== void 0 && this.popupOpen && this.fillOverflowGrid();
+	}
+	fillOverflowGrid() {
+		if (!this.overflowGridEl || this.overflowCount === 0) return;
+		this.overflowGridEl.replaceChildren();
+		let e = this.items.slice(this.lastVisibleIndex);
+		for (let t of e) {
+			let e = t.cloneNode(!0);
+			e.setAttribute("aria-hidden", "true"), e.removeAttribute("style"), this.overflowGridEl.appendChild(e);
+		}
+	}
+};
+//#endregion
+//#region src/lib/country-group/index.ts
+c([t], b.prototype, "items", void 0), c([t], b.prototype, "lastVisibleIndex", void 0), c([t], b.prototype, "computedAriaLabel", void 0), c([t], b.prototype, "popupOpen", void 0), n(i("country-group", b, (e) => {
+	let t = e.tagFor(m), n = e.tagFor(d);
+	return r`
+		<div
+			class="container"
+			${l({
+		role: "group",
+		ariaLabel: (e) => e.ariaLabel || e.computedAriaLabel
+	})}
+		>
+			<slot ${o("slotEl")}></slot>
+			${s((e) => e.overflowCount > 0, r`
+					<div
+						class="overflow-wrap"
+						${o("overflowWrapEl")}
+						style="order: ${(e) => e.lastVisibleIndex};"
+						@mouseenter="${(e) => e.handleMouseEnter()}"
+						@mouseleave="${(e) => e.handleMouseLeave()}"
+					>
+						<${t}
+							${o("badgeEl")}
+							connotation="cta"
+							appearance="duotone"
+							shape="pill"
+							text="${(e) => "+" + e.overflowCount}"
+						></${t}>
+					</div>
+				`)}
+		</div>
+
+		${s((e) => e.overflowCount > 0, r`
+				<${n}
+					strategy="fixed"
+					placement="top"
+					alternate
+					arrow
+					:anchor="${(e) => e.overflowWrapEl}"
+					:open="${(e) => e.popupOpen}"
+					exportparts="vvd-theme-alternate"
+				>
+					<div
+						class="overflow-grid"
+						${o("overflowGridEl")}
+						aria-hidden="true"
+					></div>
+				</${n}>
+			`)}
+	`;
+}, [
+	_,
+	h,
+	f
+], { styles: v }))();
+//#endregion