@useinsider/guido 1.0.0-beta.6ebce36 → 1.0.0-beta.6ecc044

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/dist/stores/editor.d.ts

@@ -2,4 +2,5 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"editor", {
     isCodeEditorOpen: boolean;
     isVersionHistoryOpen: boolean;
     editorVisualMode: string;
+    isSaveTemplateModalOpen: boolean;
 }, {}, {}>;

package/dist/stores/editor.js

@@ -3,7 +3,8 @@ const t = e("editor", {
   state: () => ({
     isCodeEditorOpen: !1,
     isVersionHistoryOpen: !1,
-    editorVisualMode: "desktop"
+    editorVisualMode: "desktop",
+    isSaveTemplateModalOpen: !1
   })
 });
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.0-beta.6ebce36",
+  "version": "1.0.0-beta.6ecc044",
   "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",

package/dist/components/organisms/header/version-history/RestoreButton.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/components/organisms/header/version-history/RestoreButton.vue.js

@@ -1,19 +0,0 @@
-import n from "./RestoreButton.vue2.js";
-import o from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var s = function() {
-  var e = this, r = e._self._c, t = e._self._setupProxy;
-  return r(t.InButtonV2, { attrs: { id: "guido__restore-button", "label-text": "Restore", type: "subtle-primary" }, on: { click: function(a) {
-    return t.restoreVersion(t.versionHistoryStore.currentPatch.id);
-  } } });
-}, _ = [], i = /* @__PURE__ */ o(
-  n,
-  s,
-  _,
-  !1,
-  null,
-  null
-);
-const f = i.exports;
-export {
-  f as default
-};

package/dist/components/organisms/header/version-history/RestoreButton.vue2.js

@@ -1,14 +0,0 @@
-import { defineComponent as t } from "vue";
-import { useVersionHistoryApi as e } from "../../../../composables/useVersionHistoryApi.js";
-import { useVersionHistoryStore as s } from "../../../../stores/version-history.js";
-import { InButtonV2 as n } from "@useinsider/design-system-vue";
-const _ = /* @__PURE__ */ t({
-  __name: "RestoreButton",
-  setup(i) {
-    const { restoreVersion: o } = e(), r = s();
-    return { __sfc: !0, restoreVersion: o, versionHistoryStore: r, InButtonV2: n };
-  }
-});
-export {
-  _ as default
-};

package/dist/composables/useHtmlCompiler.d.ts

@@ -1,4 +0,0 @@
-import type { CompilationResult } from '@@/Types/html-compiler';
-export declare const useHtmlCompiler: () => {
-    compileHtml: (html: string) => CompilationResult;
-};

package/dist/composables/useHtmlCompiler.js

@@ -1,16 +0,0 @@
-import { defaultHtmlCompilerRules as r } from "../config/compiler/htmlCompilerRules.js";
-import { createHtmlCompiler as p } from "../utils/htmlCompiler.js";
-const a = () => {
-  const e = typeof window < "u" ? window.GuidoConfig : void 0, l = (e == null ? void 0 : e.htmlCompilerRules) || [], t = [
-    ...!!(e != null && e.ignoreDefaultHtmlCompilerRules) ? [] : r,
-    ...l.map((o, m) => ({
-      ...o,
-      priority: o.priority + 1e3 + m
-      // Ensure additional rules run after default rules
-    }))
-  ], i = p(t);
-  return { compileHtml: (o) => i.compile(o) };
-};
-export {
-  a as useHtmlCompiler
-};

package/dist/config/compiler/htmlCompilerRules.d.ts

@@ -1,2 +0,0 @@
-import type { CompilerRule } from '@@/Types/html-compiler';
-export declare const defaultHtmlCompilerRules: CompilerRule[];

package/dist/config/compiler/htmlCompilerRules.js

@@ -1,145 +0,0 @@
-const a = [
-  {
-    id: "fix-url-encoding-start",
-    description: "Replace {%22 with %7B%22 to fix URL encoding",
-    type: "replace",
-    search: "{%22",
-    replacement: "%7B%22",
-    replaceAll: !0,
-    priority: 10
-  },
-  {
-    id: "fix-url-encoding-end",
-    description: "Replace %22} with %22%7D to fix URL encoding",
-    type: "replace",
-    search: "%22}",
-    replacement: "%22%7D",
-    replaceAll: !0,
-    priority: 10
-  },
-  {
-    id: "fix-tags-start",
-    description: "Replace %7B%7B with {{ to fix URL encoding",
-    type: "replace",
-    search: "%7B%7B",
-    replacement: "{{",
-    replaceAll: !0,
-    priority: 11
-  },
-  {
-    id: "fix-tags-end",
-    description: "Replace %7D%7D with }} to fix URL encoding",
-    type: "replace",
-    search: "%7D%7D",
-    replacement: "}}",
-    replaceAll: !0,
-    priority: 12
-  },
-  {
-    id: "unescape-inequality-operators-start",
-    description: "Replace &lt; with < to fix URL encoding",
-    type: "replace",
-    search: "&lt;",
-    replacement: "<",
-    replaceAll: !0,
-    priority: 13
-  },
-  {
-    id: "unescape-inequality-operators-end",
-    description: "Replace &gt; with > to fix URL encoding",
-    type: "replace",
-    search: "&gt;",
-    replacement: ">",
-    replaceAll: !0,
-    priority: 14
-  },
-  {
-    id: "remove-apty-iframe",
-    description: "Cleanup Apty Iframe Code",
-    type: "remove",
-    targets: [
-      '<iframe src="about:blank" id="letznav-iframe-script" allowtransparency="true" style="width:1px;height:1px"></iframe>',
-      'src="about:blank" id="letznav-iframe-script" allowtransparency="true" style="width:1px;height:1px"></iframe>'
-    ],
-    priority: 20
-  },
-  {
-    id: "remove-apty-styles",
-    description: "Removing Apty Styles",
-    type: "regex",
-    pattern: '<styles*data-styles="apty_styles"s* type="text/css"s*>((s|.)*?)</style>',
-    replacement: "",
-    flags: "g",
-    priority: 21
-  },
-  {
-    id: "remove-mso-conditions",
-    description: "Removing MSO Conditions",
-    type: "remove",
-    targets: [
-      "/<!--[ifs(mso 16)]>s*<styles*S*>s*as*{s*text-decorations*:s*nones*;*s*}s*</style>s*<![endif]-->/g",
-      "/<!--[ifsgte mso 9]>s*<styles*S*>s*sups*{s*font-sizes*:s*100%s*!importants*;*s*}s*</style>s*<![endif]-->/g",
-      "/<!--[ifsgte mso 9]>s*<noscript>s*<xml>s*<o:OfficeDocumentSettings>s*<o:AllowPNG>s*</o:AllowPNG>s*<o:PixelsPerInch>d+</o:PixelsPerInch>s*</o:OfficeDocumentSettings>s*</xml>s*</noscript>s*<![endif]-->/g",
-      '/<!--[if mso]>s*<xml>s*<w:WordDocuments+xmlns:w="urn:schemas-microsoft-com:office:word">s*<w:DontUseAdvancedTypographyReadingMail></w:DontUseAdvancedTypographyReadingMail>s*</w:WordDocument>s*</xml>s*<![endif]-->/g',
-      "/<!--[if !mso]><!--s*d*s*-->s*<!--[if !mso]><!--s*d*s*-->s*<!--<![endif]-->/g",
-      "/<!--[ifs!mso]>s*<!-- d -->/g"
-    ],
-    priority: 22
-  },
-  {
-    id: "add-mso-conditions",
-    description: "Adding MSO Conditions",
-    type: "custom",
-    processor: (e) => {
-      const t = [
-        `<!--[if gte mso 9]>
-<style>sup {
-    font-size: 100% !important;
-}</style><![endif]-->`,
-        `<!--[if gte mso 9]>
-<noscript>
-    <xml>
-        <o:OfficeDocumentSettings>
-            <o:AllowPNG></o:AllowPNG>
-            <o:PixelsPerInch>96</o:PixelsPerInch>
-        </o:OfficeDocumentSettings>
-    </xml>
-</noscript><![endif]-->`,
-        `<!--[if mso]>
-<xml>
-    <w:WordDocument xmlns:w="urn:schemas-microsoft-com:office:word">
-        <w:DontUseAdvancedTypographyReadingMail></w:DontUseAdvancedTypographyReadingMail>
-    </w:WordDocument>
-</xml><![endif]-->`
-      ], s = /<head>([\S\s]*)<\/head>/, o = new RegExp(s);
-      if (!e.match(o))
-        return e;
-      let i = e;
-      return t.forEach((r) => {
-        i = i.replace("</head>", `${r}</head>`);
-      }), i;
-    },
-    priority: 30
-  },
-  {
-    id: "replace-old-image-domain",
-    description: "Replacing old image domains",
-    type: "replace",
-    search: "stripo-editor-image.s3-eu-west-1.amazonaws.com",
-    replacement: "email-static.useinsider.com",
-    replaceAll: !0,
-    priority: 40
-  },
-  {
-    id: "replace-old-v2-image-domain",
-    description: "Replacing old image domains",
-    type: "replace",
-    search: "email.static.useinsider.com",
-    replacement: "email-static.useinsider.com",
-    replaceAll: !0,
-    priority: 41
-  }
-];
-export {
-  a as defaultHtmlCompilerRules
-};

package/dist/enums/displayConditions.d.ts

@@ -1,2 +0,0 @@
-import type { ConditionCategories } from '@@/Types/condition-categories';
-export declare const displayConditions: ConditionCategories;

package/dist/enums/displayConditions.js

@@ -1,80 +0,0 @@
-const e = [
-  {
-    category: "Demographics",
-    conditions: [
-      {
-        id: 1,
-        name: "Language",
-        description: "Users who are in the English will see the banner",
-        beforeScript: '{% if language == "en_US" %}',
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 2,
-        name: "Country",
-        description: "Only people who live in Australia will see the banner",
-        beforeScript: '{% if country == "Australia" %}',
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 3,
-        name: "Country & City",
-        description: "Only people who are located in that country and city",
-        beforeScript: '{% if country == "United Kingdom" and city == "London" %}',
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 4,
-        name: "Age (Less than operator)",
-        description: "Users whose age is less than 18",
-        beforeScript: "{% if age < 18 %}",
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 5,
-        name: "Age (Equal and greater than operator)",
-        description: "Users whose age is equal or greater than 25",
-        beforeScript: "{% if age >= 25 %}",
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 6,
-        name: "Age (Greater than & less than operators)",
-        description: "Users whose age is between 18 and 25",
-        beforeScript: "{% if age > 18 and age < 25 %}",
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 7,
-        name: "Gender",
-        description: "Users whose gender is Female",
-        beforeScript: '{% if gender == "Female" %}',
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 8,
-        name: "State",
-        description: "Users whose state is one of the followings. c_state is a custom attribute. Use this condition if you have the attribute with the same naming. ",
-        beforeScript: '{% if c_state == "VIC" or c_state == "NSW" or c_state == "QLD" %}',
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 9,
-        name: "VIP User",
-        description: "Users who are VIP users for that brand. c_is_vip_user = true. c_is_vip_user is a custom attribute. Use this condition if you have the attribute with the same naming.",
-        beforeScript: "{% if c_is_vip_user %}",
-        afterScript: "{% endif %}"
-      },
-      {
-        id: 10,
-        name: "Membership Type",
-        description: "Users who belong to gold or silver membership type. c_is_gold_member = true, c_is_silver_member = true. These are custom attributes. Use this condition if you have the attribute with the same naming.",
-        beforeScript: "{% if c_is_gold_member or c_is_silver_member %}",
-        afterScript: "{% endif %}"
-      }
-    ]
-  }
-];
-export {
-  e as displayConditions
-};

package/dist/static/styles/base.css.js

@@ -1,11 +0,0 @@
-const t = `.amp-input-list,
-.button,
-.base-input,
-ue-stripe-thumb,
-.ue-stripe-thumb {
-    transition: all .5s ease;
-}
-`;
-export {
-  t as default
-};

package/dist/static/styles/components/alert-message.css.js

@@ -1,39 +0,0 @@
-const n = `.alert-message-wrapper {
-    box-shadow: none;
-    border: 1px solid var(--guido-color-gray-300);
-    color: var(--guido-color-gray-600);
-}
-
-.alert-message-wrapper.info,
-.alert-message-wrapper.loader {
-    background: var(--guido-color-background-onpage-message-info);
-    border-color: var(--guido-color-border-onpage-message-info);
-    color: inherit;
-}
-
-.alert-message-wrapper.info ue-icon-component.icon,
-.alert-message-wrapper.loader ue-icon-component.icon {
-    color: var(--guido-color-border-onpage-message-info);
-}
-
-.alert-message-wrapper ue-button {
-    padding: 0;
-}
-
-.alert-message-wrapper .button {
-    border: none;
-    background: transparent;
-    color: var(--guido-color-primary-500);
-    padding: 0;
-    min-width: unset;
-    min-height: unset;
-}
-
-.alert-message-wrapper .button:hover:not(:disabled,.disabled) {
-    background-color: transparent;
-    text-decoration: underline;
-}
-`;
-export {
-  n as default
-};

package/dist/static/styles/components/amp-block.css.js

@@ -1,18 +0,0 @@
-const n = `.amp-input-list {
-    box-shadow: none;
-    border: 1px solid var(--guido-color-gray-300);
-    margin-bottom: 16px;
-}
-
-.amp-input-list:last-child {
-    margin-bottom: 0;
-}
-
-.amp-input-list.active,
-.amp-input-list:hover {
-    background-color: var(--guido-color-neutral-100);
-}
-`;
-export {
-  n as default
-};

package/dist/static/styles/components/base-input.css.js

@@ -1,47 +0,0 @@
-const n = `.base-input {
-    border: 1px solid var(--guido-color-gray-300);
-    border-radius: 4px;
-    background-color: var(--guido-color-gray-0);
-    align-items: center;
-    height: 40px;
-    max-height: 40px;
-    box-sizing: content-box;
-    outline: none;
-    resize: vertical;
-    padding: 8px;
-    font-size: 13px;
-    color: var(--guido-color-gray-800);
-    box-shadow: none !important;
-    box-sizing: border-box !important;
-}
-
-.base-input:hover:not(:disabled) {
-    background-color: var(--guido-color-gray-0);
-    border-color: var(--guido-color-primary-500);
-}
-
-.base-input:focus:not(:disabled),
-.base-input.focused {
-    background-color: var(--guido-color-gray-0);
-    border-color: var(--guido-color-primary-500);
-    box-shadow: 0 0 0 3px var(--guido-color-primary-200) !important;
-}
-
-ue-contenteditable {
-    height: 40px;
-    overflow: unset;
-}
-
-ue-contenteditable .base-input {
-    line-height: 24px;
-}
-
-ue-icon-component.icon-button.icon-clear-input {
-    right: 2px;
-    top: 2px;
-    padding: 9px;
-}
-`;
-export {
-  n as default
-};