@vonage/vivid 5.19.0 → 5.20.0

package/combobox/index.js

@@ -1,7 +1,7 @@
-import { D as e, E as t, c as n, f as r, s as i, u 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/slotted.js";
+import { A as e, d as t, k as n, m as r, p as i, u as a } from "../bundled/vivid-element.js";
+import { t as o } from "../bundled/slotted.js";
+import { t as s } from "../bundled/ref.js";
+import { t as c } from "../bundled/when.js";
 import { t as l } from "../bundled/decorate.js";
 import { t as u } from "../bundled/definition2.js";
 import { a as d, i as f, t as p } from "../bundled/affix.js";
@@ -12,12 +12,12 @@ import { t as _ } from "../bundled/with-contextual-help.js";
 import { t as v } from "../bundled/listbox.js";
 import { t as y } from "../bundled/class-names.js";
 import { n as b } from "../bundled/numbers.js";
-import { n as x } from "../bundled/aria-binding-directive.js";
+import { r as x } from "../bundled/aria-binding-directive.js";
 import { n as S } from "../bundled/form-associated.js";
 import { r as C } from "../bundled/definition6.js";
 import { i as w, t as T } from "../bundled/definition8.js";
 import { t as E } from "../bundled/dialog.js";
-import { a as D, t as O } from "../bundled/mixins.js";
+import { r as D, t as O } from "../bundled/mixins.js";
 import { t as k } from "../bundled/text-field.js";
 import { t as A } from "../bundled/definition17.js";
 //#region src/lib/combobox/combobox.scss?inline
@@ -49,7 +49,7 @@ var j = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 		this.open && this.enqueueScrollSelectedOptionIntoViewIfNeeded();
 	}
 	get options() {
-		return t.track(this, "options"), this.filteredOptions.length ? this.filteredOptions : this._options;
+		return n.track(this, "options"), this.filteredOptions.length ? this.filteredOptions : this._options;
 	}
 	set options(e) {
 		super.options = e;
@@ -187,21 +187,21 @@ var j = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 		this.control.setSelectionRange(e, e);
 	}
 };
-l([a({
+l([r({
 	attribute: "autocomplete",
 	mode: "fromView"
-})], N.prototype, "autocomplete", void 0), l([a], N.prototype, "appearance", void 0), l([a], N.prototype, "shape", void 0), l([a()], N.prototype, "scale", void 0), l([a], N.prototype, "placement", void 0), l([a({
+})], N.prototype, "autocomplete", void 0), l([r], N.prototype, "appearance", void 0), l([r], N.prototype, "shape", void 0), l([r()], N.prototype, "scale", void 0), l([r], N.prototype, "placement", void 0), l([r({
 	mode: "boolean",
 	attribute: "fixed-dropdown"
-})], N.prototype, "fixedDropdown", void 0), l([e], N.prototype, "metaSlottedContent", void 0), l([e], N.prototype, "maxHeight", void 0), l([a({
+})], N.prototype, "fixedDropdown", void 0), l([e], N.prototype, "metaSlottedContent", void 0), l([e], N.prototype, "maxHeight", void 0), l([r({
 	attribute: "open",
 	mode: "boolean"
-})], N.prototype, "open", void 0), l([a], N.prototype, "placeholder", void 0);
+})], N.prototype, "open", void 0), l([r], N.prototype, "placeholder", void 0);
 //#endregion
 //#region src/lib/combobox/combobox.template.ts
 var P = ({ icon: e, iconSlottedContent: t, metaSlottedContent: n, errorValidationMessage: r, successText: i, shape: a, scale: o, disabled: s, placeholder: c, label: l, appearance: u, open: d, _activeDescendant: f }) => y("base", ["disabled", s], [`shape-${a}`, !!a], [`size-${o}`, !!o], ["placeholder", !!c], [`appearance-${u}`, !!u], ["no-label", !l], ["has-icon", !!e || !!t?.length], ["has-meta", !!n?.length], ["has-activedescendant", !!f && d], ["error", !!r], ["success", !!i]);
 function F() {
-	return r` <label for="control" class="label">
+	return i` <label for="control" class="label">
 		${(e) => e.label}
 	</label>`;
 }
@@ -210,15 +210,15 @@ function I(e) {
 }
 function L(e) {
 	let t = d(e), n = C(e);
-	return r` <div class="${P}" ${o("_anchor")}>
+	return i` <div class="${P}" ${s("_anchor")}>
 		<div
 			class="label-wrapper"
 			?hidden=${(e) => !e.label && !e._hasContextualHelp}
 		>
-			${s((e) => e.label, F())}
+			${c((e) => e.label, F())}
 			<slot
 				name="contextual-help"
-				${c("_contextualHelpSlottedContent")}
+				${o("_contextualHelpSlottedContent")}
 			></slot>
 		</div>
 		<div class="fieldset">
@@ -240,11 +240,11 @@ function L(e) {
 					?disabled="${(e) => e.disabled}"
 					:value="${(e) => e.value}"
 					@input="${(e, t) => e.inputHandler(t.event)}"
-					${o("control")}
+					${s("control")}
 				/>
 			</div>
 			<div class="leading-items-wrapper">
-				<slot name="meta" ${c("metaSlottedContent")}></slot>
+				<slot name="meta" ${o("metaSlottedContent")}></slot>
 				<div
 					@click="${(e, t) => e._chevronIconClickHandler(t.event)}"
 				>
@@ -256,9 +256,9 @@ function L(e) {
 }
 //#endregion
 //#region src/lib/combobox/index.ts
-n(i("combobox", N, (e) => {
+t(a("combobox", N, (e) => {
 	let t = e.tagFor(w);
-	return r`
+	return i`
 		<template
 			tabindex="${(e) => e.disabled ? null : "0"}"
 			class="${(e) => y(["has-activedescendant", !!e._activeDescendant && e.open])}"
@@ -273,13 +273,13 @@ n(i("combobox", N, (e) => {
 					?open="${(e) => e.open}"
 					placement="${(e) => e.placement ?? "bottom-start"}"
 					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}"
-					${o("_popup")}>
+					${s("_popup")}>
 					<div id="${(e) => e.listboxId}"
 						class="listbox"
 						role="listbox"
 						?disabled="${(e) => e.disabled}"
-						${o("listbox")}>
-						<slot ${c({
+						${s("listbox")}>
+						<slot ${o({
 		filter: v.slottedOptionFilter,
 		flatten: !0,
 		property: "slottedOptions"

package/country-group/index.cjs

@@ -1,10 +1,10 @@
-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`
+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.A],f.prototype,`items`,void 0),i.t([t.A],f.prototype,`lastVisibleIndex`,void 0),i.t([t.A],f.prototype,`computedAriaLabel`,void 0),i.t([t.A],f.prototype,`popupOpen`,void 0);var p=t.u(`country-group`,f,e=>{let i=e.tagFor(c.r),s=e.tagFor(o.i);return t.p`
 		<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`
+			${r.t(e=>e.overflowCount>0,t.p`
 					<div
 						class="overflow-wrap"
 						${n.t(`overflowWrapEl`)}
@@ -23,7 +23,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 				`)}
 		</div>
 
-		${r.t(e=>e.overflowCount>0,t.f`
+		${r.t(e=>e.overflowCount>0,t.p`
 				<${s}
 					strategy="fixed"
 					placement="top"
@@ -40,4 +40,4 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 					></div>
 				</${s}>
 			`)}
-	`},[l.t,c.t,o.t],{styles:u});t.c(p)();
+	`},[l.t,c.t,o.t],{styles:u});t.d(p)();

package/country-group/index.js

@@ -1,5 +1,5 @@
 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 { A as t, d as n, p as r, t as i, u 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";
@@ -9,7 +9,7 @@ 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)) {
+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(i)) {
 	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();
@@ -110,7 +110,7 @@ var v = ":host{flex-direction:column;block-size:100%;inline-size:100%;display:fl
 };
 //#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) => {
+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(a("country-group", b, (e) => {
 	let t = e.tagFor(m), n = e.tagFor(d);
 	return r`
 		<div