@useinsider/guido 1.0.0-beta.3bcd23c → 1.0.0-beta.401ddbd

package/dist/composables/useCustomInterfaceAppearance.js

@@ -1,49 +1,13 @@
-import S from "../static/styles/base.css.js";
-import e from "../static/styles/components/alert-message.css.js";
-import m from "../static/styles/components/amp-block.css.js";
-import i from "../static/styles/components/base-input.css.js";
-import p from "../static/styles/components/button-group.css.js";
-import n from "../static/styles/components/button.css.js";
-import s from "../static/styles/components/combobox.css.js";
-import C from "../static/styles/components/counter.css.js";
-import f from "../static/styles/components/dropdown-menu.css.js";
-import a from "../static/styles/components/narrow-panel.css.js";
-import u from "../static/styles/components/switcher.css.js";
-import c from "../static/styles/components/tabs.css.js";
-import d from "../static/styles/components/tools.css.js";
-import l from "../static/styles/components/version-history.css.js";
-import h from "../static/styles/components/wide-panel.css.js";
-import w from "../static/styles/variables.css.js";
-const y = [
-  w,
-  // Must be on top
-  S,
-  // Must be on top
-  e,
-  m,
-  i,
-  p,
-  n,
-  s,
-  C,
-  f,
-  a,
-  u,
-  c,
-  d,
-  l,
-  h
-].join(`
-
-`), N = () => ({ importCss: () => {
-  const o = new CSSStyleSheet();
-  o.replaceSync(y);
-  const r = document.querySelector("ui-editor");
-  if (!r)
+import r from "../static/editor.css.js";
+const c = () => ({ importCss: () => {
+  const e = new CSSStyleSheet();
+  e.replaceSync(r);
+  const t = document.querySelector("ui-editor");
+  if (!t)
     return;
-  const t = r.shadowRoot;
-  t && (t.adoptedStyleSheets = [o]);
+  const o = t.shadowRoot;
+  o && (o.adoptedStyleSheets = [e]);
 } });
 export {
-  N as useCustomInterfaceAppearance
+  c as useCustomInterfaceAppearance
 };

package/dist/composables/useStripo.js

@@ -1,90 +1,74 @@
-import { useActionsApi as m } from "./useActionsApi.js";
-import { useCustomInterfaceAppearance as g } from "./useCustomInterfaceAppearance.js";
-import { useToaster as f } from "./useToaster.js";
-import { displayConditions as E } from "../enums/displayConditions.js";
-import S from "../extensions/DynamicContent/extension.js";
-import { useStripoApi as y } from "../services/stripoApi.js";
-import { useEditorStore as C } from "../stores/editor.js";
-const x = (a) => {
-  const { handleError: d } = f(), { getToken: c, getCustomFonts: u } = y(), l = (e, r = []) => {
-    const i = C(), { html: t, css: s } = e;
+import { useCustomInterfaceAppearance as m } from "./useCustomInterfaceAppearance.js";
+import { useToaster as g } from "./useToaster.js";
+import { useStripoApi as E } from "../services/stripoApi.js";
+import { useEditorStore as S } from "../stores/editor.js";
+const _ = (c) => {
+  const { handleError: d } = g(), { getToken: u, getCustomFonts: a } = E(), l = (e, i = []) => {
+    const r = S(), { html: t, css: n } = e;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: a,
+        metadata: c,
         html: t,
-        css: s,
+        css: n,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
         mobileViewButtonSelector: ".guido__view-option-selection-mobile",
         desktopViewButtonSelector: ".guido__view-option-selection-desktop",
         codeEditorButtonSelector: "#guido__code-button",
-        customAppearanceMergetags: !0,
-        customAppearanceMergetagsBorderColor: "#f1f3fe",
-        customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: `
-                    .esd-x, .esd-merge-tag {color: #0a2ecc !important; box-shadow: none !important;} 
-                    .esd-merge-tag {border: 1px solid #b5c1f1; border-radius: 4px !important;}
-                `,
-        conditionsEnabled: !0,
-        customConditionsEnabled: !0,
-        conditionCategories: E,
-        messageSettingsEnabled: !1,
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
-          customFonts: r
+          customFonts: i
         },
         async onTokenRefreshRequest(o) {
           try {
-            const n = await c();
-            o(n);
-          } catch (n) {
-            d(n, "Failed to refresh token");
+            const s = await u();
+            o(s);
+          } catch (s) {
+            d(s, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: o } = g(), { activateCustomViewStyles: n } = m();
-            o(), n();
+            const { importCss: o } = m();
+            o();
           } catch (o) {
             d(o, "Failed to load custom interface appearance");
           }
         },
         onCodeEditorVisibilityChanged(o) {
-          i.isCodeEditorOpen = o;
+          r.isCodeEditorOpen = o;
         },
         onEditorVisualModeChanged(o) {
-          i.editorVisualMode = o.toLowerCase();
+          r.editorVisualMode = o.toLowerCase();
         },
         onVersionHistoryVisibilityChanged(o) {
-          i.isVersionHistoryOpen = o;
-        },
-        ignoreClickOutsideSelectors: ["#guido-dynamic-content-modal"],
-        extensions: [S]
+          r.isVersionHistoryOpen = o;
+        }
       }
     );
-  }, p = (e) => new Promise((r, i) => {
+  }, p = (e) => new Promise((i, r) => {
     if (document.getElementById("UiEditorScript")) {
-      e(), r();
+      e(), i();
       return;
     }
     const t = document.createElement("script");
     t.id = "UiEditorScript", t.type = "module", t.src = "https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js", t.onload = () => {
-      e(), r();
+      e(), i();
     }, t.onerror = () => {
-      const s = new Error("Failed to load Stripo UIEditor script");
-      i(s);
+      const n = new Error("Failed to load Stripo UIEditor script");
+      r(n);
     }, document.body.appendChild(t);
   });
   return { initPlugin: async (e) => {
     await p(async () => {
-      const r = await u();
-      l(e, r);
+      const i = await a();
+      l(e, i);
     });
   } };
 };
 export {
-  x as useStripo
+  _ as useStripo
 };

package/dist/composables/useTemplateValidation.d.ts

@@ -0,0 +1,13 @@
+export interface ValidationResult {
+    isValid: boolean;
+    message: string;
+}
+export declare const useTemplateValidation: () => {
+    validationError: import("vue").ComputedRef<string>;
+    isValidating: import("vue").ComputedRef<boolean>;
+    validateTemplateName: (name: string) => Promise<ValidationResult>;
+    clearValidation: () => void;
+    VALIDATION_RULES: {
+        readonly DEBOUNCE_TIME: 500;
+    };
+};

package/dist/composables/useTemplateValidation.js

@@ -0,0 +1,57 @@
+import { useHttp as T } from "./useHttp.js";
+import { useToaster as V } from "./useToaster.js";
+import { useTranslations as N } from "./useTranslations.js";
+import { ref as m, computed as u } from "vue";
+const c = {
+  DEBOUNCE_TIME: 500
+}, I = () => {
+  const { get: d } = T(), { handleError: p } = V(), l = N(), s = m(""), o = m(!1), r = m(null), v = (a) => a.trim() ? {
+    isValid: !0,
+    message: ""
+  } : {
+    isValid: !1,
+    message: l("validation.required-product-name-to-continue", { product: "template" })
+  }, f = async (a) => {
+    try {
+      const i = `/template-library/template-name-exists?name=${encodeURIComponent(a)}`;
+      return (await d(i)).data.status;
+    } catch (e) {
+      return p(e, "Error checking template name:"), !1;
+    }
+  }, E = (a) => (r.value && clearTimeout(r.value), new Promise((e) => {
+    const i = v(a);
+    if (!i.isValid) {
+      s.value = i.message, e(i);
+      return;
+    }
+    o.value = !0, r.value = setTimeout(async () => {
+      try {
+        const t = await f(a.trim()), n = {
+          isValid: !t,
+          message: t ? l("whatsapp-business.template-name-exists") : ""
+        };
+        s.value = n.message, e(n);
+      } catch (t) {
+        const n = {
+          isValid: !1,
+          message: t instanceof Error ? t.message : l("validation.unknown-error")
+        };
+        s.value = n.message, e(n);
+      } finally {
+        o.value = !1;
+      }
+    }, c.DEBOUNCE_TIME);
+  })), g = () => {
+    s.value = "", o.value = !1, r.value && clearTimeout(r.value);
+  };
+  return {
+    validationError: u(() => s.value),
+    isValidating: u(() => o.value),
+    validateTemplateName: E,
+    clearValidation: g,
+    VALIDATION_RULES: c
+  };
+};
+export {
+  I as useTemplateValidation
+};

package/dist/guido.css

@@ -1 +1 @@
-.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}[data-v-6a2bde67] .guido__verion-history-view-option-selection-desktop svg,[data-v-6a2bde67] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6a2bde67] .in-segments-wrapper__button_selected,[data-v-6a2bde67] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-0fff376c] .guido__view-option-selection-desktop svg,[data-v-0fff376c] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-0fff376c] .in-segments-wrapper__button_selected,[data-v-0fff376c] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.guido-editor__wrapper[data-v-67f97212],.guido-editor__container[data-v-67f97212]{width:100%;height:calc(100vh - 75px)}
+.version-history-item[data-v-0e2ff42d]{flex-basis:200px}.version-history-wrapper[data-v-187d41fa]{gap:8px}[data-v-6a2bde67] .guido__verion-history-view-option-selection-desktop svg,[data-v-6a2bde67] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6a2bde67] .in-segments-wrapper__button_selected,[data-v-6a2bde67] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-0fff376c] .guido__view-option-selection-desktop svg,[data-v-0fff376c] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-0fff376c] .in-segments-wrapper__button_selected,[data-v-0fff376c] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.header-right-slot[data-v-8f49feef]{gap:16px}.guido-editor__wrapper[data-v-d4a5c957],.guido-editor__container[data-v-d4a5c957]{width:100%;height:100vh}

package/dist/mock/api/template-library.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("msw").HttpHandler[];
+export default _default;

package/dist/static/editor.css.js

@@ -0,0 +1,232 @@
+const n = `:host {
+    --guido-color-white: #FFFFFF;
+    --guido-color-primary-500: #0A2ECC;
+    --guido-color-primary-100: #DAE1FB;
+    --guido-color-gray-800: #292929;
+    --guido-color-gray-300: #E1E1E1;
+}
+
+.label {
+    font-size: 13px;
+    color: var(--guido-color-gray-800);
+}
+
+.stacked-panel-title {
+    padding: 16px;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--guido-color-gray-800);
+    text-align: left;
+}
+
+.stacked-panel-item {
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+    box-shadow: 0 0 0 0 var(--guido-color-gray-300),0 15px 35px -5px rgba(0, 0, 0, .1),0 8px 10px -6px rgba(0, 0, 0, .1);
+}
+
+.container {
+    padding: 16px;
+}
+
+.container.parent-container>.container {
+    padding: 0 16px;
+}
+
+/** SEGMENT BUTTON */
+ue-switcher input {
+    border-radius: 26px;
+} 
+
+ue-switcher input:before {
+    border-radius: 22px;
+}
+
+.tabs-header {
+    padding: 0;
+    column-gap: 0;
+    background-color: transparent;
+}
+
+.tabs-header button {
+    background-color: #f7f9fa;
+    outline: none;
+    padding: 8px 16px;
+    border: 1px solid #dcdee6;
+    height: 42px;
+}
+
+.tabs-header button ue-icon-component.icon-button {
+    color: var(--guido-color-gray-800);
+}
+
+.tabs-header button:not(:last-child),
+.tabs-header button:not(:first-child) {
+    border-radius: 0;
+}
+
+.tabs-header button:first-child {
+    border-radius: 4px 0 0 4px;
+}
+
+.tabs-header button:last-child {
+    border-radius: 0 4px 4px 0;
+}
+
+.tabs-header button.checked {
+    background-color: var(--guido-color-primary-100);
+    color: var(--guido-color-primary-500);
+    border-color: var(--guido-color-primary-500);
+}
+
+.tabs-header button.checked ue-icon-component.icon-button {
+    color: var(--guido-color-primary-500);
+}
+/** SEGMENT BUTTON */
+
+/** BUTTON */
+.button:not(:disabled,.disabled):active {
+    transform: none !important;
+}
+/** BUTTON */
+
+/** BUTTON GROUP */
+.button-group {
+    padding: 0;
+    column-gap: 0;
+    border-radius: 0;
+    background-color: transparent;
+}
+
+.button-group .button {
+    background-color: #f7f9fa;
+    outline: none;
+    padding: 8px 12px;
+    border: 1px solid #dcdee6;
+    box-shadow: none;
+    height: 42px;
+}
+
+.button-group .button ue-icon-component.icon-button {
+    color: var(--guido-color-gray-800);
+}
+
+.button-group > div:first-of-type .button {
+    border-radius: 4px 0 0 4px;
+}
+
+.button-group > *:last-child .button {
+    border-radius: 0 4px 4px 0;
+}
+
+ue-check-buttons input:checked + .button,
+ue-radio-buttons input:checked + .button {
+    background-color: var(--guido-color-primary-100);
+    color: var(--guido-color-primary-500);
+    border-color: var(--guido-color-primary-500);
+}
+
+ue-check-buttons input:checked + .button ue-icon-component.icon-button,
+ue-radio-buttons input:checked + .button ue-icon-component.icon-button {
+    color: var(--guido-color-primary-500);
+}
+/** BUTTON GROUP */
+
+/** COMBOBOX */
+.control-shadow-wrapper:has(.button[role="combobox"]) {
+    border-radius: 0;
+    padding: 0;
+    background: transparent;
+}
+
+.button[role="combobox"] {
+    background-color: #f9f9f9;
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+    box-shadow: none;
+    min-height: 42px;
+    padding: 8px;
+    color: var(--guido-color-gray-800);
+    text-align: left;
+    outline: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.button[role="combobox"].on {
+    background-color: #f9f9f9;
+    border-color: var(--guido-color-primary-500);
+    box-shadow: 0 0 0 3px #b5c1f1 !important;
+}
+/** COMBOBOX */
+
+/** BASE INPUT */
+.base-input {
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+    background-color: #f9f9f9;
+    align-items: center;
+    height: 40px;
+    max-height: 40px;
+    box-sizing: content-box;
+    outline: none;
+    resize: vertical;
+    padding: 8px;
+    transition: none !important;
+    color: var(--guido-color-gray-800);
+    box-shadow: none !important;
+    box-sizing: border-box !important;
+}
+
+.base-input:hover:not(:disabled) {
+    background-color: #f9f9f9;
+    border-color: #7a92f2;
+}
+
+.base-input:focus:not(:disabled) {
+    background-color: #f9f9f9;
+    border-color: #0a2ecc;
+    box-shadow: 0 0 0 3px #b5c1f1 !important;
+}
+/** BASE INPUT */
+
+/** COUNTER */
+ue-counter {
+    padding: 0 !important;
+    background-color: var(--guido-color-white) !important;
+    border: 1px solid var(--guido-color-gray-300);
+}
+
+ue-counter .button {
+    width: 40px;
+    height: 40px;
+    box-shadow: none;
+}
+
+ue-counter .button .icon-button {
+    color: var(--guido-color-primary-500);
+}
+
+ue-counter ue-button:first-child .button {
+    border-right: 1px solid var(--guido-color-gray-300);
+}
+
+ue-counter ue-button:last-child .button {
+    border-left: 1px solid var(--guido-color-gray-300);
+}
+/** COUNTER */
+
+/** COLOR */
+ue-color {
+    width: 80px;
+}
+
+ue-color .base-input {
+    width: 100%;
+}
+/** COLOR */
+`;
+export {
+  n as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.0-beta.3bcd23c",
+  "version": "1.0.0-beta.401ddbd",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",
@@ -10,9 +10,9 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/library.js",
-      "types": "./dist/components/Guido.vue.d.ts",
-      "require": "./dist/components/Guido.vue.js"
+        "import": "./dist/library.js",
+        "types": "./dist/components/Guido.vue.d.ts",
+        "require": "./dist/components/Guido.vue.js"
     },
     "./style": "./dist/guido.css"
   },
@@ -30,7 +30,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@stripoinc/ui-editor-extensions": "^1.0.6",
     "@useinsider/design-system-vue": "0.14.8",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",

package/dist/_virtual/AddCustomFont.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/AiAssistantValueType.js

@@ -1,4 +0,0 @@
-var s = {};
-export {
-  s as __exports
-};

package/dist/_virtual/BackgroundColorBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/BackgroundImageBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/Block.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/BlockAttributes.js

@@ -1,4 +0,0 @@
-var t = {};
-export {
-  t as __exports
-};

package/dist/_virtual/BlockCompositionType.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/BlockPaddingsBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/BlockRenderer.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/dist/_virtual/BlockType.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/dist/_virtual/BlocksPanel.js

@@ -1,4 +0,0 @@
-var a = {};
-export {
-  a as __exports
-};

package/dist/_virtual/BuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/BuiltInControlTypes.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/ButtonBorderBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/ButtonColorBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/ButtonFontColorBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/ButtonInternalIndentsBuiltInControl.js

@@ -1,4 +0,0 @@
-var t = {};
-export {
-  t as __exports
-};

package/dist/_virtual/ButtonTextBuiltInControl.js

@@ -1,4 +0,0 @@
-var t = {};
-export {
-  t as __exports
-};

package/dist/_virtual/ContextAction.js

@@ -1,4 +0,0 @@
-var t = {};
-export {
-  t as __exports
-};

package/dist/_virtual/ContextActionType.js

@@ -1,4 +0,0 @@
-var t = {};
-export {
-  t as __exports
-};

package/dist/_virtual/Control.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/EditorStatePropertyType.js

@@ -1,4 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};

package/dist/_virtual/Extension.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/dist/_virtual/ExtensionBuilder.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/dist/_virtual/FontFamilyBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};