@useinsider/guido 2.0.0-beta.a4f9fa2 → 2.0.0-beta.a7d687e

package/dist/composables/useActionsApi.js

@@ -1,7 +1,7 @@
 import { useToaster as w } from "./useToaster.js";
-const S = () => {
-  const { handleError: l } = w(), s = (t = {}) => new Promise((e, i) => {
-    const n = { ...{
+const v = () => {
+  const { handleError: l } = w(), r = (t = {}) => new Promise((e, a) => {
+    const o = { ...{
       minimize: !0,
       utmEntity: {
         utmSource: "",
@@ -20,29 +20,29 @@ const S = () => {
       forceAmp: !1,
       resetDataSavedFlag: !1,
       disableLineHeightsReplace: !0
-    }, ...t }, m = {
-      callback: (o, p, d, c, u) => {
-        o ? i(o) : e({
+    }, ...t }, s = {
+      callback: (n, p, d, c, u) => {
+        n ? a(n) : e({
           html: p,
           ampHtml: d,
           ampErrors: c,
           displayConditions: u
         });
       },
-      ...n
+      ...o
     };
-    window.StripoEditorApi.actionsApi.compileEmail(m);
+    window.StripoEditorApi.actionsApi.compileEmail(s);
   });
   return {
-    getCompiledEmail: s,
+    getCompiledEmail: r,
     getTemplateData: () => new Promise((t) => {
-      const e = ({ html: i, css: a, width: n, height: r, utmParams: m, syncModulesIds: o }) => t({
-        html: i,
-        css: a,
-        width: n,
-        height: r,
-        utmParams: m,
-        syncModulesIds: o
+      const e = ({ html: a, css: i, width: o, height: m, utmParams: s, syncModulesIds: n }) => t({
+        html: a,
+        css: i,
+        width: o,
+        height: m,
+        utmParams: s,
+        syncModulesIds: n
       });
       window.StripoEditorApi.actionsApi.getTemplateData(e);
     }),
@@ -53,15 +53,15 @@ const S = () => {
       try {
         const {
           html: e,
-          displayConditions: i,
-          ampHtml: a = "",
-          ampErrors: n = []
-        } = await s({ minimize: !1, resetDataSavedFlag: !1, ...t });
+          displayConditions: a,
+          ampHtml: i = "",
+          ampErrors: o = []
+        } = await r({ minimize: !1, resetDataSavedFlag: !1, ...t });
         return {
           html: e,
-          ampHtml: a,
-          ampErrors: n,
-          displayConditions: i
+          ampHtml: i,
+          ampErrors: o,
+          displayConditions: a
         };
       } catch (e) {
         return l(e, "Error loading preview"), {
@@ -73,24 +73,27 @@ const S = () => {
       }
     },
     updateTimerInClonedTemplate: () => new Promise((t) => {
-      var e, i;
-      if (typeof ((i = (e = window.StripoEditorApi) == null ? void 0 : e.actionsApi) == null ? void 0 : i.updateTimerInClonedTemplate) != "function") {
+      var e, a;
+      if (typeof ((a = (e = window.StripoEditorApi) == null ? void 0 : e.actionsApi) == null ? void 0 : a.updateTimerInClonedTemplate) != "function") {
         t(null);
         return;
       }
       try {
-        window.StripoEditorApi.actionsApi.updateTimerInClonedTemplate((a, n) => {
-          a ? (l(a, "Failed to update timer in cloned template"), t(null)) : t(n || null);
+        window.StripoEditorApi.actionsApi.updateTimerInClonedTemplate((i, o) => {
+          i ? (l(i, "Failed to update timer in cloned template"), t(null)) : t(o || null);
         });
-      } catch (a) {
-        l(a, "Failed to call updateTimerInClonedTemplate"), t(null);
+      } catch (i) {
+        l(i, "Failed to call updateTimerInClonedTemplate"), t(null);
       }
     }),
     updateHtmlAndCss: (t, e) => {
       window.StripoEditorApi.actionsApi.updateHtmlAndCss(t, e);
+    },
+    editorSave: () => {
+      window.StripoEditorApi.actionsApi.save();
     }
   };
 };
 export {
-  S as useActionsApi
+  v as useActionsApi
 };

package/dist/composables/useConfig.js

@@ -1,26 +1,27 @@
-import { useConfigStore as F } from "../stores/config.js";
-import { storeToRefs as I } from "pinia";
-const k = () => {
-  const e = F(), {
+import { useConfigStore as I } from "../stores/config.js";
+import { storeToRefs as T } from "pinia";
+const w = () => {
+  const e = I(), {
     config: t,
     initialized: o,
     identity: r,
     partner: i,
-    template: n,
-    editor: a,
+    template: a,
+    editor: n,
     ui: s,
-    features: u,
-    blocks: d,
-    compiler: p,
-    templateId: c,
+    features: c,
+    blocks: u,
+    compiler: d,
+    callbacks: l,
+    templateId: p,
     userId: f,
     variationId: m,
     partnerName: g,
-    productType: l,
-    messageType: b,
-    username: C,
-    showHeader: y
-  } = I(e);
+    productType: b,
+    messageType: C,
+    username: y,
+    showHeader: E
+  } = T(e);
   return {
     // State refs
     config: t,
@@ -28,26 +29,27 @@ const k = () => {
     // Section refs
     identity: r,
     partner: i,
-    template: n,
-    editor: a,
+    template: a,
+    editor: n,
     ui: s,
-    features: u,
-    blocks: d,
-    compiler: p,
+    features: c,
+    blocks: u,
+    compiler: d,
+    callbacks: l,
     // Convenience refs
-    templateId: c,
+    templateId: p,
     userId: f,
     variationId: m,
     partnerName: g,
-    productType: l,
-    messageType: b,
-    username: C,
-    showHeader: y,
+    productType: b,
+    messageType: C,
+    username: y,
+    showHeader: E,
     // Methods
     getConfig: () => t.value,
-    isFeatureEnabled: (E) => e.isFeatureEnabled(E)
+    isFeatureEnabled: (F) => e.isFeatureEnabled(F)
   };
 };
 export {
-  k as useConfig
+  w as useConfig
 };

package/dist/composables/useSave.js

@@ -1,15 +1,17 @@
-import { useSaveStart as i, useSaveComplete as m } from "./useGuidoActions.js";
-import { useTemplatePreparation as n } from "../utils/templatePreparation.js";
-import { useHtmlValidator as l } from "./useHtmlValidator.js";
-const f = () => {
-  const e = i(), a = m(), { validateHtml: s } = l();
-  return { save: async (o = !1) => {
-    e();
-    const { prepareTemplateDetails: r } = n(), t = await r();
-    if (await s(t.compiledHtml, t.dynamicContentList, !0))
-      return o || a(t), t;
+import { useConfig as l } from "./useConfig.js";
+import { useSaveStart as m, useSaveComplete as c } from "./useGuidoActions.js";
+import { useTemplatePreparation as d } from "../utils/templatePreparation.js";
+import { useHtmlValidator as p } from "./useHtmlValidator.js";
+const w = () => {
+  const i = m(), s = c(), { validateHtml: o } = p(), { callbacks: a } = l();
+  return { save: async (r = !1) => {
+    var e;
+    i();
+    const { prepareTemplateDetails: n } = d(), t = await n();
+    if (await o(t.compiledHtml, t.dynamicContentList, !0) && !((e = a.value) != null && e.externalValidation && !await a.value.externalValidation(t)))
+      return r || s(t), t;
   } };
 };
 export {
-  f as useSave
+  w as useSave
 };

package/dist/config/migrator/index.js

@@ -1,13 +1,12 @@
-import { migrateCheckbox as t } from "./checkboxMigrator.js";
+import { migrateCheckbox as m } from "./checkboxMigrator.js";
 import { migrateCouponBlock as o } from "./couponBlockMigrator.js";
-import { migrateItemsBlock as i } from "./itemsBlockMigrator.js";
-import { migrateRadioButton as e } from "./radioButtonMigrator.js";
-import { migrateRecommendation as a } from "./recommendationMigrator.js";
-import { migrateUnsubscribe as g } from "./unsubscribeMigrator.js";
-const u = async (r) => {
-  let m = r;
-  return m = t(m), m = e(m), m = await g(m), m = o(m), m = a(m), m = i(m), m;
+import { migrateRadioButton as i } from "./radioButtonMigrator.js";
+import { migrateRecommendation as e } from "./recommendationMigrator.js";
+import { migrateUnsubscribe as a } from "./unsubscribeMigrator.js";
+const s = async (t) => {
+  let r = t;
+  return r = m(r), r = i(r), r = await a(r), r = o(r), r = e(r), r;
 };
 export {
-  u as migrate
+  s as migrate
 };

package/dist/config/migrator/recommendationMigrator.js

@@ -1,8 +1,8 @@
 var h = Object.defineProperty;
 var T = (A, e, t) => e in A ? h(A, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : A[e] = t;
 var m = (A, e, t) => T(A, typeof e != "symbol" ? e + "" : e, t);
-import P, { prepareProductRows as S } from "../../extensions/Blocks/Recommendation/templates/migrationTemplate.js";
-import { getDefaultProducts as q } from "../../extensions/Blocks/Recommendation/templates/templateUtils.js";
+import P, { prepareProductRows as S } from "../../extensions/Blocks/Recommendation/templates/vertical/migration.js";
+import { getDefaultProducts as q } from "../../extensions/Blocks/Recommendation/templates/utils.js";
 class w {
   constructor() {
     m(this, "parser");

package/dist/enums/academy.js

@@ -0,0 +1,8 @@
+const e = "https://academy.insiderone.com/", o = {
+  EMAIL_EDITOR: `${e}/docs/email-drag-and-drop-editor`,
+  GLOBAL_UNSUBSCRIBE: `${e}/docs/global-unsubscribe-preference-center`,
+  AMP_FOR_EMAILS: `${e}/docs/amp-for-emails`
+};
+export {
+  o as ACADEMY_LINKS
+};

package/dist/enums/onboarding.js

@@ -2,9 +2,8 @@ const e = [
   ".service-element.stacked-panel-item.ng-tns-c1014751574-3.level-bottom-0.ng-star-inserted",
   ".service-element.stacked-panel-item.ng-tns-c1014751574-3.level-bottom-1.ng-star-inserted",
   ".service-element.stacked-panel-item.ng-tns-c1014751574-3.level-bottom-2.ng-star-inserted"
-], t = "ui-editor", n = 'button[role="tab"][aria-label="Card Composition"]', s = 'button[role="tab"][aria-label="Settings"]', o = ".in-ribbons-wrapper", a = "https://academy.useinsider.com/docs/email-drag-drop-editor";
+], t = "ui-editor", n = 'button[role="tab"][aria-label="Card Composition"]', s = 'button[role="tab"][aria-label="Settings"]', o = ".in-ribbons-wrapper";
 export {
-  a as ACADEMY_LINK,
   n as CARD_COMPOSITION_TAB_SELECTOR,
   o as RIBBON_SELECTOR,
   e as SERVICE_HOVER_SELECTORS,

package/dist/enums/unsubscribe.js

@@ -1,26 +1,26 @@
-import { useTranslations as n } from "../composables/useTranslations.js";
+import { useTranslations as e } from "../composables/useTranslations.js";
 import { getEnvironmentPrefix as R } from "../utils/environmentUtil.js";
-const N = {
+const I = {
   UNSUBSCRIBE_LINK_TYPE: 1,
   PREFERENCES_LINK_TYPE: 3
-}, I = {
+}, r = {
   UNSUBSCRIBE_LINK_REGEX: /{{ins-unsubscribe-link}}/g,
   DATA_OGSB_BUTTON_CSS_REGEX: "\\[data-ogsb\\]\\s*\\.es-button\\.es-button-[0-9]+\\s*\\{(?:[^\\}]*)\\}",
   GLOBAL_UNSUBSCRIBE_LINK_REGEX: /{{ins-global-unsubscribe-link}}/g,
   PREFERENCES_UNSUBSCRIBE_LINK_REGEX: /{{ins-preferences-unsubscribe-link}}/g
-}, s = R(), i = {
+}, s = R(), _ = {
   UNSUBSCRIBE_URL: `https://mail.${s}.com/user/v1/unsub`,
   PREFERENCES_URL: `https://mail.${s}.com/user/v1/prefs`
-}, _ = "iid", B = {
+}, i = "iid", B = {
   name: "Global Unsubscribe",
   sendGridId: "G"
-}, t = "https://academy.useinsider.com/docs/global-unsubscribe-preference-center", C = "/email/unsubscribe-pages", E = {
+}, C = "/email/unsubscribe-pages", E = {
   GLOBAL_UNSUBSCRIBE: 1,
   GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE: 2,
   SUBSCRIPTION_PREFERENCE_CENTER: 3,
   SUBSCRIPTION_PREFERENCE_CONFIRMATION: 4,
   RESUBSCRIBE: 5
-}, c = {
+}, t = {
   [E.GLOBAL_UNSUBSCRIBE]: [
     E.GLOBAL_UNSUBSCRIBE,
     E.GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE,
@@ -31,29 +31,28 @@ const N = {
     E.SUBSCRIPTION_PREFERENCE_CONFIRMATION
   ]
 }, U = () => {
-  const e = n();
+  const n = e();
   return {
-    [E.GLOBAL_UNSUBSCRIBE]: e("unsubscription-preference.type-global-unsubscribe"),
-    [E.GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE]: e("unsubscription-preference.type-global-unsubscription-confirmation"),
-    [E.RESUBSCRIBE]: e("unsubscription-preference.type-resubscribe"),
-    [E.SUBSCRIPTION_PREFERENCE_CENTER]: e("unsubscription-preference.type-subscription-preferences-center"),
-    [E.SUBSCRIPTION_PREFERENCE_CONFIRMATION]: e("unsubscription-preference.type-subscription-preferences-confirmation")
+    [E.GLOBAL_UNSUBSCRIBE]: n("unsubscription-preference.type-global-unsubscribe"),
+    [E.GLOBAL_UNSUBSCRIBE_CONFIRMATION_PAGE]: n("unsubscription-preference.type-global-unsubscription-confirmation"),
+    [E.RESUBSCRIBE]: n("unsubscription-preference.type-resubscribe"),
+    [E.SUBSCRIPTION_PREFERENCE_CENTER]: n("unsubscription-preference.type-subscription-preferences-center"),
+    [E.SUBSCRIPTION_PREFERENCE_CONFIRMATION]: n("unsubscription-preference.type-subscription-preferences-confirmation")
   };
-}, o = {
+}, c = {
   default: "{{ins-unsubscribe-link}}",
   [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
 };
 export {
-  t as ACADEMY_LINK,
   B as DEFAULT_UNSUBSCRIBE_GROUP,
-  _ as INSIDER_ID,
-  I as LINK_REGEXES,
-  N as LINK_TYPES,
-  o as MERGE_TAGS,
+  i as INSIDER_ID,
+  r as LINK_REGEXES,
+  I as LINK_TYPES,
+  c as MERGE_TAGS,
   E as PAGE_TYPES,
-  c as TYPE_COLLECTIONS,
+  t as TYPE_COLLECTIONS,
   C as UNSUBSCRIBE_PAGES_LINK,
-  i as URLS,
+  _ as URLS,
   U as getTypeTranslations
 };

package/dist/extensions/Blocks/Items/block.js

@@ -1,20 +1,20 @@
-import { useOnboardingStore as d } from "../../../stores/onboarding.js";
-import { Block as u, BlockCompositionType as p, ModificationDescription as n } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { ItemsBlockId as f } from "./enums/controlEnums.js";
-import { SETTINGS_ENUMS as c, DefaultConfigValues as o } from "./enums/settingsEnums.js";
-import { useItemsBlockStore as g } from "./store/items-block.js";
-import { getDefaultTemplate as y } from "./template.js";
-import { getItemsBlockContainer as C, getItemsBlockConfig as a, getDefaultItemsBlockConfig as I } from "./utils/nodeConfigUtils.js";
-const b = "items-block";
-class O extends u {
+import { useOnboardingStore as y } from "../../../stores/onboarding.js";
+import { Block as R, BlockCompositionType as L, ModificationDescription as a } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { configAttributes as t } from "./enums/productEnums.js";
+import { DefaultConfigValues as e, SETTINGS_ENUMS as l } from "./enums/settingsEnums.js";
+import { useItemsBlockStore as S } from "./store/items-block.js";
+import { getDefaultTemplate as V } from "./template.js";
+import { syncCurrencySymbolFromAttributes as B, syncCurrencyLocationFromAttributes as U, syncFormattedPriceFromAttributes as k } from "./utils/syncAttributesFromConfigBlock.js";
+const M = "items-block";
+class x extends R {
   getId() {
-    return b;
+    return M;
   }
   getIcon() {
     return "items-icon";
   }
   getBlockCompositionType() {
-    return p.CONTAINER;
+    return L.CONTAINER;
   }
   getName() {
     return this.api.translate("Items");
@@ -23,44 +23,45 @@ class O extends u {
     return this.api.translate("Items lets you display personalized products based on user behavior.");
   }
   getTemplate() {
-    return y({
-      orientation: c.ORIENTATION.VERTICAL,
-      itemsType: c.ITEMS_TYPE.CART_ITEMS,
+    return V({
+      orientation: l.ORIENTATION.HORIZONTAL,
+      itemsType: l.ITEMS_TYPE.CART_ITEMS,
       itemId: "{{Abandoned Cart Item (1) Url}}",
-      currencySymbol: o.productPriceCurrencySymbolControlValue,
-      currencyLocation: o.productPriceCurrencyLocationControlValue,
-      formattedPrice: o.productPriceFormattedControlValue === "1"
+      currencySymbol: e.productPriceCurrencySymbolControlValue,
+      currencyLocation: e.productPriceCurrencyLocationControlValue,
+      formattedPrice: e.productPriceFormattedControlValue === "1"
     });
   }
   allowInnerBlocksDND() {
     return !1;
   }
-  onCreated(i) {
-    const e = C(i);
-    if (!e)
+  onCreated(r) {
+    const n = r.querySelector("esd-config-block");
+    if (!n)
       return;
-    const t = e.getNodeConfig(), l = t && Object.keys(t).length > 0, r = a(i);
-    if (r != null && r.initialized)
-      l ? r.blockInstanceId || this.api.getDocumentModifier().modifyHtml(e).setNodeConfig({ ...r, blockInstanceId: String(Date.now()) }).apply(new n("Assign block instance ID to block")) : this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(r).apply(new n("Migrate legacy config to nodeConfig"));
-    else {
-      const m = I();
-      this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(m).apply(new n("Initialize Items block with default configuration")), d().startOnboarding("itemsOnboarding");
+    const o = n, s = o.getAttribute("data-initialized") || "0", u = o.getAttribute(t.BLOCK_INSTANCE_ID), c = () => String(Date.now() + Math.floor(Math.random() * 1e3));
+    if (Number(s)) {
+      if (!u) {
+        const i = c();
+        this.api.getDocumentModifier().modifyHtml(o).setAttribute(t.BLOCK_INSTANCE_ID, i).apply(new a("Assign block instance ID to legacy block"));
+      }
+    } else {
+      const i = e.itemsType, I = e.cartItemsSelectControlValue, d = e.cardOrientationControlValue, m = e.productNameTrimmingControlValue, C = e.productPriceHideDiscountControlValue, b = e.productPriceFormattedControlValue, T = e.productPriceCurrencySymbolControlValue, A = e.productPriceCurrencyLocationControlValue, E = e.productButtonLinkControlValue, O = e.productImageLinkControlValue, _ = e.productImageVisible, p = e.productNameVisible, N = e.productQuantityVisible, f = e.productPriceVisible, g = e.productOriginalPriceVisible, D = e.productButtonVisible, P = c();
+      this.api.getDocumentModifier().modifyHtml(o).setAttribute("data-source", i).setAttribute(t.TYPE, i).setAttribute(t.ITEMS_INDEX_SELECT_CONTROL_VALUE, I).setAttribute(t.ORIENTATION, d).setAttribute(t.PRODUCT_NAME_TRIMMING, m).setAttribute(t.PRODUCT_PRICE_HIDE_DISCOUNT, C).setAttribute(t.PRODUCT_PRICE_FORMATTED, b).setAttribute(t.PRODUCT_PRICE_CURRENCY_SYMBOL, T).setAttribute(t.PRODUCT_PRICE_CURRENCY_LOCATION, A).setAttribute(t.PRODUCT_BUTTON_LINK, E).setAttribute(t.PRODUCT_IMAGE_LINK, O).setAttribute(t.BLOCK_INSTANCE_ID, P).setAttribute("data-initialized", "1").setAttribute(t.NAME_CONTROL_ENABLED, e.productNameControlEnabled).setAttribute(
+        t.QUANTITY_CONTROL_ENABLED,
+        e.productQuantityControlEnabled
+      ).setAttribute(t.PRICE_CONTROL_OPENED, e.productPriceControlOpened).setAttribute(t.PRODUCT_IMAGE_VISIBLE, _).setAttribute(t.PRODUCT_NAME_VISIBLE, p).setAttribute(t.PRODUCT_QUANTITY_VISIBLE, N).setAttribute(t.PRODUCT_PRICE_VISIBLE, f).setAttribute(t.PRODUCT_ORIGINAL_PRICE_VISIBLE, g).setAttribute(t.PRODUCT_BUTTON_VISIBLE, D).apply(new a("Initialize config block attributes with defaults")), y().startOnboarding("itemsOnboarding");
     }
-    const s = `[esd-extension-block-id="${f.IMAGE}"] img`;
-    this.api.getDocumentModifier().modifyHtml(i.querySelector(s)).setStyle("object-fit", "contain").apply(new n("Updated image object-fit"));
   }
-  onSelect(i) {
-    const e = g(), t = a(i);
-    t && (e.setItemsType(t.type || o.itemsType), e.setItemIds(t.itemsSelectValue || o.cartItemsSelectControlValue), e.setOrientation(t.orientation || o.cardOrientationControlValue), e.setCurrencySymbol(
-      t.priceCurrencySymbol || o.productPriceCurrencySymbolControlValue
-    ), e.setCurrencyLocation(
-      t.priceCurrencyLocation || o.productPriceCurrencyLocationControlValue
-    ), e.setFormattedPrice(
-      t.priceFormatted ?? o.productPriceFormattedControlValue === "1"
-    ));
+  onSelect(r) {
+    const n = r.querySelector("esd-config-block"), o = S();
+    if (!n)
+      return;
+    const s = n, u = s.getAttribute(t.TYPE) || e.itemsType, c = s.getAttribute(t.ITEMS_INDEX_SELECT_CONTROL_VALUE) || e.cartItemsSelectControlValue, i = s.getAttribute(t.ORIENTATION) || e.cardOrientationControlValue;
+    o.setItemsType(u), o.setItemIds(c), o.setOrientation(i), B(r), U(r), k(r);
   }
 }
 export {
-  b as BLOCK_ID,
-  O as ItemsBlock
+  M as BLOCK_ID,
+  x as ItemsBlock
 };

package/dist/extensions/Blocks/Items/controls/button/link.js

@@ -1,52 +1,59 @@
-var a = Object.defineProperty;
-var l = (e, t, n) => t in e ? a(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var i = (e, t, n) => l(e, typeof t != "symbol" ? t + "" : t, n);
+var r = Object.defineProperty;
+var a = (o, e, t) => e in o ? r(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var s = (o, e, t) => a(o, typeof e != "symbol" ? e + "" : e, t);
 import { CommonControl as u } from "../../../common-control.js";
 import { ItemsBlockControlId as d } from "../../enums/controlEnums.js";
-import { useItemsBlockStore as m } from "../../store/items-block.js";
-import { getItemsBlockConfig as L } from "../../utils/nodeConfigUtils.js";
-const r = d.BUTTON_LINK, s = {
+import { useItemsBlockStore as l } from "../../store/items-block.js";
+import { syncButtonLinkFromAttributes as h } from "../../utils/syncAttributesFromConfigBlock.js";
+import { updateConfigBlockAttributes as m } from "../../utils/updateAttributes.js";
+const i = d.BUTTON_LINK, n = {
   LINK: "link"
 };
-class N extends u {
+class C extends u {
   constructor() {
     super(...arguments);
-    i(this, "store", m());
+    s(this, "store", l());
   }
   getId() {
-    return r;
+    return i;
   }
   getTemplate() {
     return `
-            <div class="container ${r}">
+            <div class="${i}">
                 ${this._getLink()}
             </div>
         `;
   }
   onRender() {
     this.api.updateValues({
-      [s.LINK]: this.store.buttonLink
-    });
+      [n.LINK]: this.store.buttonLink
+    }), this._listenToFormUpdates();
   }
-  onTemplateNodeUpdated(n) {
-    super.onTemplateNodeUpdated(n), this.handleBlockInstanceChange(
-      () => {
-        const o = L(this.currentNode);
-        o != null && o.buttonLink && this.store.setButtonLink(o.buttonLink);
-      },
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(
+      () => h(this.currentNode),
       () => {
         this.api.updateValues({
-          [s.LINK]: this.store.buttonLink
+          [n.LINK]: this.store.buttonLink
         });
       }
     );
   }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(
+      n.LINK,
+      (t) => this._onLinkChange(t)
+    );
+  }
+  _onLinkChange(t) {
+    console.debug("Button link changed to: ", t), this.store.setButtonLink(t), m(this.currentNode, this.api);
+  }
   _getLink() {
     return `
             ${this._GuOneColumn([
       this._GuLabel({ text: "Link" }),
       this._GuTextInput({
-        name: s.LINK,
+        name: n.LINK,
         placeholder: "Enter Link",
         className: "es-100",
         disabled: !0
@@ -56,6 +63,6 @@ class N extends u {
   }
 }
 export {
-  N as ButtonLinkControl,
-  r as CONTROL_BLOCK_ID
+  C as ButtonLinkControl,
+  i as CONTROL_BLOCK_ID
 };