@orangelogic/design-system 4.21.0 → 4.22.0

package/library/chunks/{config-manager.utils.C_nIDsZ5.js → block-width.DfiJymuv.js}

@@ -79,7 +79,7 @@ import { t as Dt } from "./shadow-input-group.ClTseaRz.js";
 import { t as Ot } from "./size-input-group.D9EWFcr7.js";
 import { C as kt, S as At, T as jt, _ as Mt, b as Nt, c as Pt, f as Ft, g as It, h as Lt, i as Rt, l as zt, n as Bt, o as Vt, p as Ht, r as Ut, s as Wt, t as Gt, u as Kt, v as qt, w as Jt, x as Yt, y as Xt } from "./asset-link-format.B-wi80wk.js";
 import { c as Zt, d as Qt, f as $t, n as en, u as tn } from "./color-swatch-group.WMinusvs.js";
-import { B as nn, C as rn, H as an, J as on, P as sn, Q as cn, R as ln, U as un, V as dn, X as fn, Y as I, Z as L, f as pn, g as mn, k as R, p as hn, y as gn, z as _n } from "./configs-controller.Dea3OymR.js";
+import { B as nn, C as rn, H as an, J as on, P as sn, Q as cn, R as ln, U as un, V as dn, X as fn, Y as I, Z as L, f as pn, g as mn, k as R, p as hn, y as gn, z as _n } from "./configs-controller.BoayLLeA.js";
 import { a as vn } from "./cloneDeep.C6x5LNv3.js";
 //#region ../../packages/types/src/icon-picker.ts
 var yn = /* @__PURE__ */ function(e) {
@@ -42394,7 +42394,7 @@ var Yr = class {
 					let r = t.currentTarget.value ?? "", i = t.target.value;
 					h = i;
 					for (let t of l.inputConfigs?.suffix?.options ?? []) if (t.value === h && t.dataId) {
-						let n = e[t.dataId];
+						let n = e[t.dataId] || t.resolveDefaultValue?.();
 						n && (r = n, i = "");
 						break;
 					}
@@ -43302,4 +43302,18 @@ function oi(e) {
 	}, {}) : {};
 }
 //#endregion
-export { ir as C, Sn as D, wn as E, bn as O, or as S, jn as T, Sr as _, ni as a, ur as b, Yr as c, Lr as d, Rr as f, Or as g, Ar as h, oi as i, yn as k, Jr as l, Br as m, ri as n, ei as o, Fr as p, ai as r, Xr as s, ii as t, Vr as u, br as v, er as w, lr as x, fr as y };
+//#region ../../packages/organisms/src/content-builder/plugins/utils/block-width.ts
+var si = ".column__content";
+function ci(e, t, n) {
+	let r = t.defaultSlot ?? t.containerEl.querySelector(si) ?? t.containerEl, i = n.getComputedStyle(r), a = Number.parseFloat(i.paddingLeft || "0"), o = Number.parseFloat(i.paddingRight || "0"), s = r.clientWidth - a - o;
+	return e.hasAttribute("full-bleed") || t.closest("cx-column-group") ? s : li(t, n) ?? s;
+}
+function li(e, t) {
+	if (!e.bandLayout) return;
+	let n = e.containerEl?.querySelector(si);
+	if (!n) return;
+	let r = t.getComputedStyle(n).gridTemplateColumns.split(" ").map((e) => Number.parseFloat(e)).filter((e) => Number.isFinite(e))[1];
+	if (!(!Number.isFinite(r) || r <= 0)) return r;
+}
+//#endregion
+export { yn as A, or as C, wn as D, jn as E, Sn as O, lr as S, er as T, Or as _, oi as a, fr as b, Xr as c, Vr as d, Lr as f, Ar as g, Br as h, ai as i, bn as k, Yr as l, Fr as m, ii as n, ni as o, Rr as p, ri as r, ei as s, ci as t, Jr as u, Sr as v, ir as w, ur as x, br as y };

package/library/chunks/{config-manager.CN_u-UFw.js → config-manager.h_NP4rMe.js}

@@ -12,66 +12,66 @@ import { t as v } from "./when.BUskJLtZ.js";
 import { t as y } from "./icon.CeQpEaQz.js";
 import { t as b } from "./style-map.DPGQIxip.js";
 import { t as x } from "./button.F15zfy2d.js";
-import { t as S } from "./tooltip.EVa9qa8X.js";
-import { t as ee } from "./line-clamp.DUw4HDNG.js";
-import { C as te, D as ne, E as re, S as ie, T as ae, _ as oe, a as se, b as ce, c as le, g as ue, h as de, i as fe, o as pe, r as me, s as he, t as C, v as w, w as T, x as E, y as D } from "./config-manager.utils.C_nIDsZ5.js";
+import { t as ee } from "./tooltip.EVa9qa8X.js";
+import { t as te } from "./line-clamp.DUw4HDNG.js";
+import { C as ne, D as re, E as ie, O as ae, S as oe, T as se, _ as ce, a as le, b as ue, c as de, g as fe, i as pe, l as me, n as he, o as ge, s as S, t as C, v as w, w as T, x as E, y as D } from "./block-width.DfiJymuv.js";
 import { t as O } from "./typography.B0mkhqTB.js";
 import { t as k } from "./button-group.CPfXrqyq.js";
 import { t as A } from "./card.3c-X4hqR.js";
 import { t as j } from "./checkbox.C6vsHW9n.js";
 import { a as M, c as N, i as P, n as F, o as I, s as L } from "./directive-helpers.BuvXXfwA.js";
 import { t as R } from "./repeat.CKv9FPlC.js";
-import { t as ge } from "./dropdown.Yz1dFrzN.js";
-import { t as _e } from "./input.HC75Gdv_.js";
-import { t as ve } from "./menu.yAc9YFlN.js";
-import { t as ye } from "./menu-item.BXd8ZyH5.js";
-import { n as be, t as xe } from "./ref.CU1NC5AM.js";
-import { t as Se } from "./textarea.Bc4eCJgT.js";
-import { t as Ce } from "./option.B9yDGHPh.js";
-import { t as we } from "./space.Dd8jezXK.js";
-import { t as Te } from "./select.jlSyzF3u.js";
-import { t as Ee } from "./tab.DrD0Ii5J.js";
+import { t as _e } from "./dropdown.Yz1dFrzN.js";
+import { t as ve } from "./input.HC75Gdv_.js";
+import { t as ye } from "./menu.yAc9YFlN.js";
+import { t as be } from "./menu-item.BXd8ZyH5.js";
+import { n as xe, t as Se } from "./ref.CU1NC5AM.js";
+import { t as Ce } from "./textarea.Bc4eCJgT.js";
+import { t as we } from "./option.B9yDGHPh.js";
+import { t as Te } from "./space.Dd8jezXK.js";
+import { t as Ee } from "./select.jlSyzF3u.js";
+import { t as De } from "./tab.DrD0Ii5J.js";
 import { t as z } from "./tab-group.CPL6IRZr.js";
-import { t as De } from "./map.ByDuLduF.js";
-import { t as Oe } from "./tab-panel.BxeoKuSv.js";
-import { t as ke } from "./visually-hidden.Bv3SInZp.js";
+import { t as Oe } from "./map.ByDuLduF.js";
+import { t as ke } from "./tab-panel.BxeoKuSv.js";
+import { t as Ae } from "./visually-hidden.Bv3SInZp.js";
 import { o as B, t as V } from "./dialog.DyVvpdaY.js";
-import { t as Ae } from "./divider.CqSNZCU8.js";
-import { n as je } from "./toString.r2ImdBrm.js";
-import { m as H, s as Me } from "./responsive.L9Csz2w2.js";
-import { isFormInteracted as Ne } from "../utils.js";
-import { t as Pe } from "./keyed.zYwdaCfO.js";
-import { t as Fe } from "./grid.CK4PRwur.js";
-import { t as Ie } from "./grid-item.CSieaU5T.js";
-import { t as Le } from "./radio.DhPbmKbQ.js";
-import { t as Re } from "./radio-card.DiC0-MMO.js";
-import { t as ze } from "./radio-group.DKOIr2PH.js";
-import { t as Be } from "./switch.D6KXmWnC.js";
-import { t as Ve } from "./bicolor-picker.BHwn7qgI.js";
-import { t as He } from "./border-input-group.DlxLP_Yi.js";
-import { n as Ue, t as U } from "./confirm-popover.B60_VW9E.js";
-import { t as We } from "./corner-position-input-group.BVPOtopa.js";
+import { t as je } from "./divider.CqSNZCU8.js";
+import { n as Me } from "./toString.r2ImdBrm.js";
+import { m as H, s as Ne } from "./responsive.L9Csz2w2.js";
+import { isFormInteracted as Pe } from "../utils.js";
+import { t as Fe } from "./keyed.zYwdaCfO.js";
+import { t as Ie } from "./grid.CK4PRwur.js";
+import { t as Le } from "./grid-item.CSieaU5T.js";
+import { t as Re } from "./radio.DhPbmKbQ.js";
+import { t as ze } from "./radio-card.DiC0-MMO.js";
+import { t as Be } from "./radio-group.DKOIr2PH.js";
+import { t as Ve } from "./switch.D6KXmWnC.js";
+import { t as He } from "./bicolor-picker.BHwn7qgI.js";
+import { t as Ue } from "./border-input-group.DlxLP_Yi.js";
+import { n as We, t as U } from "./confirm-popover.B60_VW9E.js";
+import { t as Ge } from "./corner-position-input-group.BVPOtopa.js";
 import { t as W } from "./_baseIteratee.DWc2-Bvm.js";
-import { t as Ge } from "./dynamic-select.C7bnEwn9.js";
+import { t as Ke } from "./dynamic-select.C7bnEwn9.js";
 import { r as G } from "./folder-select.DZ27acgw.js";
-import { t as Ke } from "./choose.C2vpqhLc.js";
-import { t as qe } from "./padding-input-group.DYHH1M0o.js";
-import { t as Je } from "./position-picker.B3klGTsy.js";
-import { t as Ye } from "./shadow-input-group.ClTseaRz.js";
-import { t as Xe } from "./size-input-group.D9EWFcr7.js";
+import { t as qe } from "./choose.C2vpqhLc.js";
+import { t as Je } from "./padding-input-group.DYHH1M0o.js";
+import { t as Ye } from "./position-picker.B3klGTsy.js";
+import { t as Xe } from "./shadow-input-group.ClTseaRz.js";
+import { t as Ze } from "./size-input-group.D9EWFcr7.js";
 import { T as K } from "./asset-link-format.B-wi80wk.js";
-import { n as Ze } from "./_baseXor.Ca5K0ORC.js";
-import { n as Qe, s as $e, t as q } from "./isArrayLikeObject.Da3IzQeH.js";
-import { i as et } from "./_baseClone.CnI5Vpqn.js";
-import { C as tt, i as nt, o as J, t as rt } from "./configs-controller.Dea3OymR.js";
-import { t as it } from "./isEmpty.D3QQduJ5.js";
-import { i as at } from "./cloneDeep.C6x5LNv3.js";
+import { n as Qe } from "./_baseXor.Ca5K0ORC.js";
+import { n as $e, s as et, t as q } from "./isArrayLikeObject.Da3IzQeH.js";
+import { i as tt } from "./_baseClone.CnI5Vpqn.js";
+import { C as nt, i as rt, o as J, t as it } from "./configs-controller.BoayLLeA.js";
+import { t as at } from "./isEmpty.D3QQduJ5.js";
+import { i as ot } from "./cloneDeep.C6x5LNv3.js";
 //#region ../../node_modules/lodash-es/difference.js
-var ot = Qe(function(e, t) {
-	return q(e) ? Ze(e, $e(t, 1, q, !0)) : [];
-}), st = "Expected a function";
-function ct(e) {
-	if (typeof e != "function") throw TypeError(st);
+var st = $e(function(e, t) {
+	return q(e) ? Qe(e, et(t, 1, q, !0)) : [];
+}), ct = "Expected a function";
+function lt(e) {
+	if (typeof e != "function") throw TypeError(ct);
 	return function() {
 		var t = arguments;
 		switch (t.length) {
@@ -85,23 +85,23 @@ function ct(e) {
 }
 //#endregion
 //#region ../../node_modules/lodash-es/pickBy.js
-function lt(e, t) {
+function ut(e, t) {
 	if (e == null) return {};
-	var n = je(et(e), function(e) {
+	var n = Me(tt(e), function(e) {
 		return [e];
 	});
-	return t = W(t), at(e, n, function(e, n) {
+	return t = W(t), ot(e, n, function(e, n) {
 		return t(e, n[0]);
 	});
 }
 //#endregion
 //#region ../../node_modules/lodash-es/omitBy.js
-function ut(e, t) {
-	return lt(e, ct(W(t)));
+function dt(e, t) {
+	return ut(e, lt(W(t)));
 }
 //#endregion
 //#region ../../packages/organisms/src/content-builder/blocks/font-kit-advanced/font-kit-advanced.utils.ts
-var dt = /* @__PURE__ */ new Map([
+var ft = /* @__PURE__ */ new Map([
 	["100", "Thin"],
 	["200", "Extra Light"],
 	["300", "Light"],
@@ -112,28 +112,28 @@ var dt = /* @__PURE__ */ new Map([
 	["800", "Extra Bold"],
 	["900", "Black"]
 ]);
-J.Cff, J.TrueType, new Set(Object.values(J)), RegExp(`\\$\\{(${Object.values(nt).join("|")})\\}`, "g");
-function ft(e) {
-	return /italic/i.test(e) ? "italic" : "normal";
-}
+J.Cff, J.TrueType, new Set(Object.values(J)), RegExp(`\\$\\{(${Object.values(rt).join("|")})\\}`, "g");
 function pt(e) {
-	return dt.get(e.trim()) ?? e;
+	return /italic/i.test(e) ? "italic" : "normal";
 }
 function mt(e) {
+	return ft.get(e.trim()) ?? e;
+}
+function ht(e) {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e) {
-		let e = ft(n.fontStyle), r = Number(n.fontWeight) || 400, i = `${r}:${e}`;
+		let e = pt(n.fontStyle), r = Number(n.fontWeight) || 400, i = `${r}:${e}`;
 		t.has(i) || t.set(i, {
 			fontStyle: e,
 			fontWeight: r,
-			name: `${pt(String(r))}${e === "italic" ? " Italic" : ""}`
+			name: `${mt(String(r))}${e === "italic" ? " Italic" : ""}`
 		});
 	}
 	return [...t.values()].sort((e, t) => (e.fontWeight ?? 400) - (t.fontWeight ?? 400) || (e.fontStyle ?? "").localeCompare(t.fontStyle ?? ""));
 }
 //#endregion
 //#region ../../node_modules/lit-html/directives/cache.js
-var Y = (e) => M(e) ? e._$litType$.h : e.strings, ht = g(class extends h {
+var Y = (e) => M(e) ? e._$litType$.h : e.strings, X = g(class extends h {
 	constructor(e) {
 		super(e), this.et = /* @__PURE__ */ new WeakMap();
 	}
@@ -162,9 +162,9 @@ var Y = (e) => M(e) ? e._$litType$.h : e.strings, ht = g(class extends h {
 		} else this.it = void 0;
 		return this.render(t);
 	}
-}), X = n`:host{display:block}.config-form{--body-spacing:0;--header-spacing:var(--cx-spacing-small) var(--cx-spacing-large) 0;--width:680px;--cx-input-required-content-display:none;color:var(--cx-color-neutral)}.config-form__dropdown{text-align:left}.config-form__checkbox-group-item{--item-padding:0;--selected-background-color:transparent}.config-form__radio-card{--radio-card-overflow:clip}.config-form__dropdown-menu{--checked-icon-display:none}.config-form__confirm-popover{--confirm-popover-dialog-width:fit-content;--confirm-button-background-color:var(--cx-color-danger-500);--cancel-button-background-color:var(--cx-color-neutral-100);--cancel-button-color:var(--cx-color-neutral-700)}.config-form__tab-group{--padding:0;--tab-group-nav-padding:0 var(--cx-spacing-large);--tab-group-top-gap:0}.config-form__tab-group::part(nav){background-color:var(--cx-color-neutral-0);z-index:1;position:sticky;top:0}`, gt = /* @__PURE__ */ e(D(), 1), _t = class {
+}), gt = n`:host{display:block}.config-form{--body-spacing:0;--header-spacing:var(--cx-spacing-small) var(--cx-spacing-large) 0;--width:680px;--cx-input-required-content-display:none;color:var(--cx-color-neutral)}.config-form__dropdown{text-align:left}.config-form__checkbox-group-item{--item-padding:0;--selected-background-color:transparent}.config-form__radio-card{--radio-card-overflow:clip}.config-form__dropdown-menu{--checked-icon-display:none}.config-form__confirm-popover{--confirm-popover-dialog-width:fit-content;--confirm-button-background-color:var(--cx-color-danger-500);--cancel-button-background-color:var(--cx-color-neutral-100);--cancel-button-color:var(--cx-color-neutral-700)}.config-form__tab-group{--padding:0;--tab-group-nav-padding:0 var(--cx-spacing-large);--tab-group-top-gap:0}.config-form__tab-group::part(nav){background-color:var(--cx-color-neutral-0);z-index:1;position:sticky;top:0}`, _t = /* @__PURE__ */ e(ue(), 1), vt = class {
 	constructor(e) {
-		this.host = e, this.localize = new p(this.host), this.controlRenderer = new le(this.host, {
+		this.host = e, this.localize = new p(this.host), this.controlRenderer = new me(this.host, {
 			commit: async ({ callback: e, immediate: t, key: n, type: r, value: i }) => {
 				if (t && r === "attribute") {
 					this.handleAttributeChange(n, i, e);
@@ -270,7 +270,7 @@ var Y = (e) => M(e) ? e._$litType$.h : e.strings, ht = g(class extends h {
         ${v(c, () => t`<cx-typography variant="body3" class="config-form__help-text">${c}</cx-typography>`)}</cx-space>`;
 	}
 	renderBasicControls(e, n, r) {
-		let i = xe(), a = t`
+		let i = Se(), a = t`
       ${R(e.filter((e) => {
 			let t = !r || e.name && this.host.tabMap[e.name] === r || n?.name && this.host.tabMap[n.name] === r, i = !1;
 			return e.controlType === "placeholder" ? i = !0 : (!this.host.skipShowCheck || !e.skipShowCheck) && (typeof e.show == "boolean" ? i = !e.show : typeof e.show == "function" ? i = !e.show(this.host.blockAttributes) : n && typeof n.show == "boolean" ? i = !n.show : n && typeof n.show == "function" && (i = !n.show(this.host.blockAttributes))), e.id && t && e.show !== !1 && !i;
@@ -287,7 +287,7 @@ var Y = (e) => M(e) ? e._$litType$.h : e.strings, ht = g(class extends h {
 					break;
 				case "property": this.host.blockProperties[r] !== void 0 && (c = this.host.blockProperties[r]);
 			}
-			if (o === "decorative") return Ke(e.controlType, [["group-heading", () => t`<cx-typography variant="h5">${a}</cx-typography>`], ["info-text", () => this.renderInfoText(e)]], () => t`<cx-typography variant="h5">${a}</cx-typography>`);
+			if (o === "decorative") return qe(e.controlType, [["group-heading", () => t`<cx-typography variant="h5">${a}</cx-typography>`], ["info-text", () => this.renderInfoText(e)]], () => t`<cx-typography variant="h5">${a}</cx-typography>`);
 			if (n) {
 				let a = this.renderBasicControl({
 					container: i,
@@ -317,7 +317,7 @@ var Y = (e) => M(e) ? e._$litType$.h : e.strings, ht = g(class extends h {
 			let { controlType: e, groupConfigs: r } = n;
 			if (e === "group" && r?.direction === "horizontal") {
 				let { columnGap: e, gap: n, rowGap: o, wrap: s } = r;
-				return t`<cx-grid columns="100" use-flex-gap spacing=${_(n)} column-spacing=${_(e)} row-spacing=${_(o)} wrap=${_(s)} ${be(i)}>${a}</cx-grid>`;
+				return t`<cx-grid columns="100" use-flex-gap spacing=${_(n)} column-spacing=${_(e)} row-spacing=${_(o)} wrap=${_(s)} ${xe(i)}>${a}</cx-grid>`;
 			}
 		}
 		return t`<cx-space direction="vertical" wrap="nowrap">${a}</cx-space>`;
@@ -328,8 +328,8 @@ var Y = (e) => M(e) ? e._$litType$.h : e.strings, ht = g(class extends h {
 				let n = !1;
 				return (!this.host.skipShowCheck || !t.skipShowCheck) && (typeof t.show == "boolean" ? n = !t.show : typeof t.show == "function" && (n = !t.show(this.host.blockAttributes))), t.translateGroup === e && !n;
 			});
-			return n.length === 0 ? i : t`<cx-typography variant="h5">${e}</cx-typography>${R(n, (e) => e.id, (e) => e.controlType === "info-text" ? this.renderInfoText(e) : t`<cx-grid columns="4" spacing="var(--cx-spacing-small)" column-spacing="0" use-flex-gap row-spacing="0" wrap="wrap"><cx-grid-item xs="4" sm="1"><cx-typography variant="body2">${e.label}</cx-typography></cx-grid-item><cx-grid-item xs="4" sm="3"><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${De(this.host.sortedLanguages, (n) => {
-				let r = this.localize.languageName(n) || gt.default.getName(n) || n, a = "";
+			return n.length === 0 ? i : t`<cx-typography variant="h5">${e}</cx-typography>${R(n, (e) => e.id, (e) => e.controlType === "info-text" ? this.renderInfoText(e) : t`<cx-grid columns="4" spacing="var(--cx-spacing-small)" column-spacing="0" use-flex-gap row-spacing="0" wrap="wrap"><cx-grid-item xs="4" sm="1"><cx-typography variant="body2">${e.label}</cx-typography></cx-grid-item><cx-grid-item xs="4" sm="3"><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${Oe(this.host.sortedLanguages, (n) => {
+				let r = this.localize.languageName(n) || _t.default.getName(n) || n, a = "";
 				e.id && (a = n === this.host.defaultLanguage ? this.host.blockAttributes[e.id] ?? "" : this.host.translatableControlValues[n]?.[e.id] ?? this.host.translatableControlValues[this.host.defaultLanguage]?.[e.id] ?? this.host.blockAttributes[e.id]);
 				let o;
 				switch (e.controlType) {
@@ -430,65 +430,65 @@ var Y = (e) => M(e) ? e._$litType$.h : e.strings, ht = g(class extends h {
 	}
 }, Z = class extends l {
 	constructor(...e) {
-		super(...e), this.localize = new p(this), this.configFormController = new _t(this), this.loading = !1, this.mode = H.Template, this.adhocProperties = [], this.templateName = "", this.templateId = "", this.supportedLanguages = ["en"], this.translatableControlValues = {}, this.defaultLanguage = "en", this.boundary = document.body, this.baseUrl = "", this.token = "", this.onRequestAsset = void 0, this.onRequestDownloadFormat = void 0, this.onRequestAssetFormat = void 0, this.onConfigureWorkflow = void 0, this.blockAttributes = {}, this.blockProperties = {}, this.blockStyles = {}, this.traits = [], this.translatableControls = [], this.blockName = "", this.name = "", this.description = "", this.showTemplateTab = !1, this.dialogTitle = "", this.skipShowCheck = !1, this.enableAssetFormatControls = !1, this.allowedFolders = [], this.isEditingTemplateSettings = !1, this.disableCloseConfigDialog = !1, this.isAfterShow = !1, this.sortedLanguages = [], this.formKey = 0;
+		super(...e), this.localize = new p(this), this.configFormController = new vt(this), this.loading = !1, this.mode = H.Template, this.adhocProperties = [], this.templateName = "", this.templateId = "", this.supportedLanguages = ["en"], this.translatableControlValues = {}, this.defaultLanguage = "en", this.boundary = document.body, this.baseUrl = "", this.token = "", this.onRequestAsset = void 0, this.onRequestDownloadFormat = void 0, this.onRequestAssetFormat = void 0, this.onConfigureWorkflow = void 0, this.blockAttributes = {}, this.blockProperties = {}, this.blockStyles = {}, this.traits = [], this.translatableControls = [], this.blockName = "", this.name = "", this.description = "", this.showTemplateTab = !1, this.dialogTitle = "", this.skipShowCheck = !1, this.enableAssetFormatControls = !1, this.allowedFolders = [], this.isEditingTemplateSettings = !1, this.disableCloseConfigDialog = !1, this.isAfterShow = !1, this.sortedLanguages = [], this.formKey = 0;
 	}
 	static #e = this.styles = [
 		d,
-		X,
-		ce,
-		he
+		gt,
+		E,
+		de
 	];
 	static #t = this.dependencies = {
-		"cx-asset-format-picker": ie,
-		"cx-asset-picker": ne,
-		"cx-asset-transformation-dialog": E,
-		"cx-bicolor-picker": Ve,
-		"cx-border-input-group": He,
+		"cx-asset-format-picker": ne,
+		"cx-asset-picker": ae,
+		"cx-asset-transformation-dialog": oe,
+		"cx-bicolor-picker": He,
+		"cx-border-input-group": Ue,
 		"cx-button": x,
 		"cx-button-group": k,
 		"cx-card": A,
 		"cx-checkbox": j,
-		"cx-color-swatch-picker": w,
+		"cx-color-swatch-picker": D,
 		"cx-confirm-popover": U,
-		"cx-corner-position-input-group": We,
-		"cx-dam-custom-toolbar-buttons-editor": se,
+		"cx-corner-position-input-group": Ge,
+		"cx-dam-custom-toolbar-buttons-editor": ge,
 		"cx-dialog": V,
-		"cx-divider": Ae,
+		"cx-divider": je,
 		"cx-download-format-picker": re,
-		"cx-dropdown": ge,
-		"cx-dynamic-select": Ge,
-		"cx-folder-picker": oe,
-		"cx-font-picker": ae,
-		"cx-gallery-picker": ue,
-		"cx-grid": Fe,
-		"cx-grid-item": Ie,
+		"cx-dropdown": _e,
+		"cx-dynamic-select": Ke,
+		"cx-folder-picker": w,
+		"cx-font-picker": ie,
+		"cx-gallery-picker": ce,
+		"cx-grid": Ie,
+		"cx-grid-item": Le,
 		"cx-icon": y,
-		"cx-icon-picker": T,
-		"cx-input": _e,
-		"cx-line-clamp": ee,
-		"cx-list-editor": pe,
-		"cx-menu": ve,
-		"cx-menu-item": ye,
-		"cx-option": Ce,
-		"cx-padding-input-group": qe,
-		"cx-page-picker": de,
-		"cx-position-picker": Je,
-		"cx-radio": Le,
-		"cx-radio-card": Re,
-		"cx-radio-group": ze,
-		"cx-select": Te,
-		"cx-shadow-input-group": Ye,
-		"cx-size-input-group": Xe,
-		"cx-space": we,
-		"cx-switch": Be,
-		"cx-tab": Ee,
+		"cx-icon-picker": se,
+		"cx-input": ve,
+		"cx-line-clamp": te,
+		"cx-list-editor": S,
+		"cx-menu": ye,
+		"cx-menu-item": be,
+		"cx-option": we,
+		"cx-padding-input-group": Je,
+		"cx-page-picker": fe,
+		"cx-position-picker": Ye,
+		"cx-radio": Re,
+		"cx-radio-card": ze,
+		"cx-radio-group": Be,
+		"cx-select": Ee,
+		"cx-shadow-input-group": Xe,
+		"cx-size-input-group": Ze,
+		"cx-space": Te,
+		"cx-switch": Ve,
+		"cx-tab": De,
 		"cx-tab-group": z,
-		"cx-tab-panel": Oe,
-		"cx-textarea": Se,
-		"cx-tooltip": S,
-		"cx-type-subtype-select": te,
+		"cx-tab-panel": ke,
+		"cx-textarea": Ce,
+		"cx-tooltip": ee,
+		"cx-type-subtype-select": T,
 		"cx-typography": O,
-		"cx-visually-hidden": ke
+		"cx-visually-hidden": Ae
 	};
 	get isTemplateEditable() {
 		return this.mode === H.Template;
@@ -504,7 +504,7 @@ var Y = (e) => M(e) ? e._$litType$.h : e.strings, ht = g(class extends h {
 		return this.isTemplateEditable ? t : t.filter((e) => e !== "styling");
 	}
 	get tabMap() {
-		let e = this.traits.map((e) => e.name).filter(Boolean), t = ot(e, this.adhocProperties), n = this.traits.filter((e) => e.tab === "sidePanels").map((e) => e.name).filter(Boolean), r = this.traits.filter((e) => e.tab === "appearance").map((e) => e.name).filter(Boolean), i = this.traits.filter((e) => e.tab === "effects").map((e) => e.name).filter(Boolean), a = {};
+		let e = this.traits.map((e) => e.name).filter(Boolean), t = st(e, this.adhocProperties), n = this.traits.filter((e) => e.tab === "sidePanels").map((e) => e.name).filter(Boolean), r = this.traits.filter((e) => e.tab === "appearance").map((e) => e.name).filter(Boolean), i = this.traits.filter((e) => e.tab === "effects").map((e) => e.name).filter(Boolean), a = {};
 		for (let t of e) a[t] = "content";
 		for (let e of t) a[e] = "styling";
 		for (let e of n) a[e] = "sidePanels";
@@ -525,7 +525,7 @@ var Y = (e) => M(e) ? e._$litType$.h : e.strings, ht = g(class extends h {
 		e?.target === this.dialog && e.detail.source !== "overlay" && (this.handleClose(), this.isAfterShow = !1, this.disableCloseConfigDialog = !1);
 	}
 	handleRequestClose(e) {
-		e?.target === this.dialog && (this.disableCloseConfigDialog ? e.preventDefault() : Ne(this.form) ? (e.preventDefault(), this.confirmPopover.show()) : this.hide());
+		e?.target === this.dialog && (this.disableCloseConfigDialog ? e.preventDefault() : Pe(this.form) ? (e.preventDefault(), this.confirmPopover.show()) : this.hide());
 	}
 	handleNameInputChange(e) {
 		this.emit("cx-content-builder-form-field-change", { detail: {
@@ -575,9 +575,9 @@ var Y = (e) => M(e) ? e._$litType$.h : e.strings, ht = g(class extends h {
 		return t`<cx-space direction="vertical" spacing="medium" wrap="nowrap"><cx-typography variant="body2">${this.localize.term("contentBuilderBlockSettingsHelpText")}</cx-typography><cx-grid columns="3" use-flex-gap spacing="var(--cx-spacing-small)" column-spacing="0" wrap="nowrap"><cx-grid-item xs="3" sm="1"><cx-typography variant="body2">${this.localize.term("templateName")}</cx-typography></cx-grid-item><cx-grid-item xs="3" sm="2"><cx-input name="name" value=${this.name ?? ""} can-show-length maxlength="200" required @cx-change=${this.handleNameInputChange} type="text"></cx-input></cx-grid-item></cx-grid><cx-grid columns="3" use-flex-gap spacing="var(--cx-spacing-small)" column-spacing="0" wrap="nowrap"><cx-grid-item xs="3" sm="1"><cx-typography variant="body2">${this.localize.term("description")}</cx-typography></cx-grid-item><cx-grid-item xs="3" sm="2"><cx-textarea name="description" value=${this.description ?? ""} can-show-length maxlength="200" resize="none" @cx-change=${this.handleDescriptionInputChange} type="text"></cx-textarea></cx-grid-item></cx-grid></cx-space>`;
 	}
 	render() {
-		return t`<cx-dialog class="config-form" use-overlay-scrollbar divider-position=${B.Footer} .boundary=${this.boundary} @cx-after-show=${this.handleAfterShow} @cx-after-hide=${this.handleAfterHide} @cx-request-close=${this.handleRequestClose} @cx-asset-request-status=${this.handleAssetRequestStatus}><cx-space slot="label" direction="vertical" spacing="2x-small"><cx-typography variant="h4">${v(this.dialogTitle, () => t`<cx-line-clamp lines="1">${this.dialogTitle}</cx-line-clamp>`, () => t`${this.localize.term("settingsTitle", this.blockName)}`)}</cx-typography>${v(this.templateName, () => t`<cx-typography variant="body3"><cx-line-clamp lines="1">${this.templateName}</cx-line-clamp></cx-typography>`)}</cx-space>${Pe(this.formKey, t`<form id="config-form" @submit=${this.handleFormSubmit}>${ht(v(this.isEditingTemplateSettings, () => v(this.isTemplateEditable, () => t`<cx-tab-group class="config-form__tab-group" placement="top"><cx-tab slot="nav" panel="template" active>${this.localize.term("template")}</cx-tab><cx-tab-panel name="template" active><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderTemplateForm()}</cx-space></cx-tab-panel></cx-tab-group>`), () => v(!it(this.traits) && this.tabs.length >= 1, () => t`<cx-tab-group class="config-form__tab-group" placement="top">${v(this.showTemplateTab, () => t`<cx-tab slot="nav" panel="template" active>${this.localize.term("template")}</cx-tab><cx-tab-panel name="template" active><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderTemplateForm()}</cx-space></cx-tab-panel>`)}
+		return t`<cx-dialog class="config-form" use-overlay-scrollbar divider-position=${B.Footer} .boundary=${this.boundary} @cx-after-show=${this.handleAfterShow} @cx-after-hide=${this.handleAfterHide} @cx-request-close=${this.handleRequestClose} @cx-asset-request-status=${this.handleAssetRequestStatus}><cx-space slot="label" direction="vertical" spacing="2x-small"><cx-typography variant="h4">${v(this.dialogTitle, () => t`<cx-line-clamp lines="1">${this.dialogTitle}</cx-line-clamp>`, () => t`${this.localize.term("settingsTitle", this.blockName)}`)}</cx-typography>${v(this.templateName, () => t`<cx-typography variant="body3"><cx-line-clamp lines="1">${this.templateName}</cx-line-clamp></cx-typography>`)}</cx-space>${Fe(this.formKey, t`<form id="config-form" @submit=${this.handleFormSubmit}>${X(v(this.isEditingTemplateSettings, () => v(this.isTemplateEditable, () => t`<cx-tab-group class="config-form__tab-group" placement="top"><cx-tab slot="nav" panel="template" active>${this.localize.term("template")}</cx-tab><cx-tab-panel name="template" active><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderTemplateForm()}</cx-space></cx-tab-panel></cx-tab-group>`), () => v(!at(this.traits) && this.tabs.length >= 1, () => t`<cx-tab-group class="config-form__tab-group" placement="top">${v(this.showTemplateTab, () => t`<cx-tab slot="nav" panel="template" active>${this.localize.term("template")}</cx-tab><cx-tab-panel name="template" active><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderTemplateForm()}</cx-space></cx-tab-panel>`)}
                     ${R(this.tabs.filter((e) => !this.showTemplateTab || e === "appearance" || e === "effects" || e === "sidePanels" || e === "styling"), (e) => e, (e, n) => t`<cx-tab slot="nav" panel=${e} ?active=${!this.showTemplateTab && n === 0}>${this.localize.term(e)}</cx-tab><cx-tab-panel name=${e} ?active=${!this.showTemplateTab && n === 0}><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.configFormController.renderBasicControls(this.traits, void 0, e)}</cx-space></cx-tab-panel>`)}
-                    ${v(this.translatableControls.length > 0, () => t`<cx-tab slot="nav" panel="Translation">${this.localize.term("translation")}</cx-tab><cx-tab-panel name="Translation"><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.configFormController.renderTranslationControls()}</cx-space></cx-tab-panel>`)}</cx-tab-group>`, () => t`<cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.configFormController.renderBasicControls(this.traits, void 0, this.tabs[0])}</cx-space>`)))}</form>`)}<cx-space slot="footer" spacing="x-small" wrap="nowrap" justify-content="end"><cx-button variant="default" size="medium" @click=${this.handleCancelClick}>${this.localize.term("cancel")}</cx-button><cx-button-group><cx-button type="submit" variant="primary" size="medium" ?loading=${this.loading} @click=${this.handleSaveClick}>${this.localize.term("save")}</cx-button>${v(this.isTemplateEditable && !this.isEditingTemplateSettings && !this.showTemplateTab, () => t`<cx-dropdown class="config-form__dropdown" placement="bottom-end" hoist @cx-select=${this.handleDropdownSelect}><cx-button slot="trigger" type="submit" variant="primary" caret><cx-visually-hidden>${this.localize.term("moreOptions")}</cx-visually-hidden></cx-button><cx-menu class="config-form__dropdown-menu"><cx-menu-item value="save-as-new-template"><cx-button type="submit" variant="text">${this.localize.term("saveAsNewTemplate")}</cx-button></cx-menu-item>${v(this.templateId, () => t`<cx-menu-item value="detach-template"><cx-button type="submit" variant="text">${this.localize.term("detachTemplate")}</cx-button></cx-menu-item>`)}</cx-menu></cx-dropdown>`)}</cx-button-group></cx-space></cx-dialog><cx-confirm-popover class="config-form__confirm-popover" divider-position=${B.Both} buttons-direction=${Ue.HorizontalReverse} dialog-label=${this.localize.term("dismissChanges")} confirm-text=${this.localize.term("dismissChanges")} .boundary=${this.boundary} variant="dialog" @cx-confirm=${this.hide}><cx-typography variant="body2" slot="footer" class="confirm-popover__footer">${this.localize.term("doYouWantToCloseThisDialogChangesWillBeDismissed")}</cx-typography></cx-confirm-popover>`;
+                    ${v(this.translatableControls.length > 0, () => t`<cx-tab slot="nav" panel="Translation">${this.localize.term("translation")}</cx-tab><cx-tab-panel name="Translation"><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.configFormController.renderTranslationControls()}</cx-space></cx-tab-panel>`)}</cx-tab-group>`, () => t`<cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.configFormController.renderBasicControls(this.traits, void 0, this.tabs[0])}</cx-space>`)))}</form>`)}<cx-space slot="footer" spacing="x-small" wrap="nowrap" justify-content="end"><cx-button variant="default" size="medium" @click=${this.handleCancelClick}>${this.localize.term("cancel")}</cx-button><cx-button-group><cx-button type="submit" variant="primary" size="medium" ?loading=${this.loading} @click=${this.handleSaveClick}>${this.localize.term("save")}</cx-button>${v(this.isTemplateEditable && !this.isEditingTemplateSettings && !this.showTemplateTab, () => t`<cx-dropdown class="config-form__dropdown" placement="bottom-end" hoist @cx-select=${this.handleDropdownSelect}><cx-button slot="trigger" type="submit" variant="primary" caret><cx-visually-hidden>${this.localize.term("moreOptions")}</cx-visually-hidden></cx-button><cx-menu class="config-form__dropdown-menu"><cx-menu-item value="save-as-new-template"><cx-button type="submit" variant="text">${this.localize.term("saveAsNewTemplate")}</cx-button></cx-menu-item>${v(this.templateId, () => t`<cx-menu-item value="detach-template"><cx-button type="submit" variant="text">${this.localize.term("detachTemplate")}</cx-button></cx-menu-item>`)}</cx-menu></cx-dropdown>`)}</cx-button-group></cx-space></cx-dialog><cx-confirm-popover class="config-form__confirm-popover" divider-position=${B.Both} buttons-direction=${We.HorizontalReverse} dialog-label=${this.localize.term("dismissChanges")} confirm-text=${this.localize.term("dismissChanges")} .boundary=${this.boundary} variant="dialog" @cx-confirm=${this.hide}><cx-typography variant="body2" slot="footer" class="confirm-popover__footer">${this.localize.term("doYouWantToCloseThisDialogChangesWillBeDismissed")}</cx-typography></cx-confirm-popover>`;
 	}
 };
 s([u(".config-form"), c("design:type", V === void 0 ? Object : V)], Z.prototype, "dialog", void 0), s([u("#config-form"), c("design:type", typeof HTMLFormElement > "u" ? Object : HTMLFormElement)], Z.prototype, "form", void 0), s([u("cx-confirm-popover"), c("design:type", U === void 0 ? Object : U)], Z.prototype, "confirmPopover", void 0), s([u(".config-form__tab-group"), c("design:type", z === void 0 ? Object : z)], Z.prototype, "tabGroup", void 0), s([a({
@@ -686,8 +686,8 @@ s([u(".config-form"), c("design:type", V === void 0 ? Object : V)], Z.prototype,
 	c("design:paramtypes", []),
 	c("design:returntype", Promise)
 ], Z.prototype, "handleSupportedLanguagesChange", null), Z = s([f("cx-config-form")], Z);
-var Q = Z, vt = n`:host{display:block}.confirm-popover__footer{--color:var(--cx-color-danger)}.confirm-popover__footer::part(base){margin-top:var(--cx-spacing-small);display:block}`, $ = class extends l {
-	static #e = this.styles = [d, vt];
+var Q = Z, yt = n`:host{display:block}.confirm-popover__footer{--color:var(--cx-color-danger)}.confirm-popover__footer::part(base){margin-top:var(--cx-spacing-small);display:block}`, $ = class extends l {
+	static #e = this.styles = [d, yt];
 	static #t = this.dependencies = {
 		"cx-config-form": Q,
 		"cx-typography": O
@@ -696,7 +696,7 @@ var Q = Z, vt = n`:host{display:block}.confirm-popover__footer{--color:var(--cx-
 		return this.mode === H.Template;
 	}
 	constructor() {
-		super(), this.localize = new p(this), this.configsController = new rt(this.localize), this.component = null, this.loading = !1, this.mode = H.Template, this.enableAssetFormatControls = !1, this.enableFontFamilyControls = !1, this.allowedFolders = [], this.adhocProperties = [], this.templateName = "", this.templateId = "", this.supportedLanguages = ["en-us"], this.defaultLanguage = "en-us", this.translatableControlValues = [], this.boundary = document.body, this.onRequestAsset = void 0, this.onRequestDownloadFormat = void 0, this.onRequestAssetFormat = void 0, this.onConfigureWorkflow = void 0, this.blockAttributes = {}, this.blockProperties = {}, this.blockStyles = {}, this.traits = [], this.blockType = "", this.blockName = "", this.name = "", this.description = "", this.tab = "", this.isEditingTemplateSettings = !1, this.translatableControlValuesMap = {}, this.translatableControls = [], this.handleSave = this.handleSave.bind(this);
+		super(), this.localize = new p(this), this.configsController = new it(this.localize), this.component = null, this.loading = !1, this.mode = H.Template, this.enableAssetFormatControls = !1, this.enableFontFamilyControls = !1, this.allowedFolders = [], this.adhocProperties = [], this.templateName = "", this.templateId = "", this.supportedLanguages = ["en-us"], this.defaultLanguage = "en-us", this.translatableControlValues = [], this.boundary = document.body, this.onRequestAsset = void 0, this.onRequestDownloadFormat = void 0, this.onRequestAssetFormat = void 0, this.onConfigureWorkflow = void 0, this.blockAttributes = {}, this.blockProperties = {}, this.blockStyles = {}, this.traits = [], this.blockType = "", this.blockName = "", this.name = "", this.description = "", this.tab = "", this.isEditingTemplateSettings = !1, this.translatableControlValuesMap = {}, this.translatableControls = [], this.handleSave = this.handleSave.bind(this);
 	}
 	getFlattenTraits(e, t, n = !1) {
 		return e.reduce((e, r) => (r.children && e.push(...this.getFlattenTraits(r.children, r, n)), n && r && (r.show === !1 || typeof r.show == "function" && !r.show(this.blockAttributes) || t && t.show === !1 || t && typeof t.show == "function" && !t.show(this.blockAttributes)) || e.push({
@@ -720,23 +720,29 @@ var Q = Z, vt = n`:host{display:block}.confirm-popover__footer{--color:var(--cx-
 		let e = this.component.get("type"), t = this.configsController.getConfigs(e, {
 			containerFontVariants: this.getContainerFontVariants(),
 			enableAssetFormatControls: this.enableAssetFormatControls,
-			enableFontFamilyControls: this.enableFontFamilyControls
+			enableFontFamilyControls: this.enableFontFamilyControls,
+			resolveWidthUnitDefault: (e) => this.resolveWidthUnitDefault(e)
 		});
 		this.blockType = e, this.blockName = this.component.getName(), this.blockAttributes = {
-			...C(this.component),
-			...ut(this.translatableControlValuesMap[this.defaultLanguage], (e) => e === void 0)
-		}, this.blockProperties = me(this.component), this.blockStyles = fe(this.component), this.traits = Array.isArray(t) ? t : [];
+			...he(this.component),
+			...dt(this.translatableControlValuesMap[this.defaultLanguage], (e) => e === void 0)
+		}, this.blockProperties = pe(this.component), this.blockStyles = le(this.component), this.traits = Array.isArray(t) ? t : [];
+	}
+	resolveWidthUnitDefault(e) {
+		if (e === "%") return "100%";
+		let t = this.component?.getEl(), n = t?.parentElement, r = t?.ownerDocument.defaultView;
+		if (t && n?.tagName === "CX-COLUMN" && n.containerEl && r) return `${Number.parseInt(String(C(t, n, r)))}px`;
 	}
 	getContainerFontVariants() {
-		for (let e = this.component?.parent(); e; e = e.parent()) if (e.get("type") === Me.FontKitAdvanced) {
+		for (let e = this.component?.parent(); e; e = e.parent()) if (e.get("type") === Ne.FontKitAdvanced) {
 			let t = e.view?.el;
-			return mt(t?.typefacesArray ?? []);
+			return ht(t?.typefacesArray ?? []);
 		}
 	}
 	handleSave(e) {
 		let t = this.getFlattenTraits(this.traits).reduce((e, t) => (e[t.id] = t, e), {}), n = Object.entries(this.blockAttributes).reduce((e, [n, r]) => {
 			let i = t[n];
-			return tt.includes(n) || (i ? e[n] = r : typeof r == "boolean" && (e[n] = !1)), e;
+			return nt.includes(n) || (i ? e[n] = r : typeof r == "boolean" && (e[n] = !1)), e;
 		}, {});
 		this.emit("cx-content-builder-configure", { detail: {
 			description: this.description,
@@ -849,6 +855,6 @@ s([u("cx-config-form"), c("design:type", Q === void 0 ? Object : Q)], $.prototyp
 	c("design:paramtypes", []),
 	c("design:returntype", Promise)
 ], $.prototype, "handleComponentChange", null), $ = s([f("cx-config-manager"), c("design:paramtypes", [])], $);
-var yt = $;
+var bt = $;
 //#endregion
-export { yt as CxConfigManager };
+export { bt as CxConfigManager };

package/library/chunks/{configs-controller.Dea3OymR.js → configs-controller.BoayLLeA.js}

@@ -2771,6 +2771,7 @@ var V = class {
 										min: 0
 									} },
 									name: "px",
+									resolveDefaultValue: () => t.resolveWidthUnitDefault?.("px"),
 									value: "px"
 								}, {
 									dataId: "data-width-percent",
@@ -2781,6 +2782,7 @@ var V = class {
 										min: 0
 									} },
 									name: "%",
+									resolveDefaultValue: () => t.resolveWidthUnitDefault?.("%"),
 									value: "%"
 								}],
 								type: "unit"
@@ -7060,6 +7062,7 @@ var or = {
 							min: 0
 						} },
 						name: "px",
+						resolveDefaultValue: () => t.resolveWidthUnitDefault?.("px"),
 						value: "px"
 					}, {
 						dataId: "data-width-percent",
@@ -7070,6 +7073,7 @@ var or = {
 							min: 0
 						} },
 						name: "%",
+						resolveDefaultValue: () => t.resolveWidthUnitDefault?.("%"),
 						value: "%"
 					}],
 					type: "unit"