@useinsider/guido 1.0.0-beta.738e9f2 → 1.0.0-beta.7c7bcef

package/dist/enums/displayConditions.js

@@ -0,0 +1,80 @@
+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/guido.css

@@ -1 +1 @@
-.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-fefca98f]{gap:16px}.guido-editor__wrapper[data-v-d4a5c957],.guido-editor__container[data-v-d4a5c957]{width:100%;height:100vh}
+.version-history-item[data-v-0e2ff42d]{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-8e229594],.guido-editor__container[data-v-8e229594]{width:100%;height:calc(100vh - 75px)}

package/dist/services/stripoApi.d.ts

@@ -1,9 +1,7 @@
 import type { CustomFont } from '@@/Types/stripo';
-export interface StripoApiService {
-    getToken(): Promise<string>;
-    getCustomFonts(): Promise<(CustomFont & {
+export declare const useStripoApi: () => {
+    getToken: () => Promise<string>;
+    getCustomFonts: () => Promise<(CustomFont & {
         active: boolean;
     })[]>;
-}
-declare const stripoApiService: StripoApiService;
-export default stripoApiService;
+};

package/dist/services/stripoApi.js

@@ -1,28 +1,29 @@
-import { useHttp as r } from "../composables/useHttp.js";
-import { useToaster as s } from "../composables/useToaster.js";
-const c = {
-  async getToken() {
-    try {
-      const t = Number(localStorage.getItem("ins-guido-test-instance")), { get: e } = r(), { data: o } = await e(`/stripo/get-user-token?test=${t}`);
-      return o.body.token;
-    } catch (t) {
-      const { handleError: e } = s();
-      return e(t, "Failed to fetch token"), "";
+import { useHttp as s } from "../composables/useHttp.js";
+import { useToaster as n } from "../composables/useToaster.js";
+const m = () => {
+  const { get: o } = s(), { handleError: r } = n();
+  return {
+    getToken: async () => {
+      try {
+        const t = Number(localStorage.getItem("ins-guido-test-instance")), { data: e } = await o(`/stripo/get-user-token?test=${t}`);
+        return e.body.token;
+      } catch (t) {
+        return r(t, "Failed to fetch token"), "";
+      }
+    },
+    getCustomFonts: async () => {
+      try {
+        const { data: t = [] } = await o("/stripo/get-partner-custom-fonts");
+        return t.map((e) => ({
+          ...e,
+          active: !0
+        }));
+      } catch (t) {
+        return r(t, "Failed to fetch custom fonts"), [];
+      }
     }
-  },
-  async getCustomFonts() {
-    try {
-      const { get: t } = r(), { data: e = [] } = await t("/stripo/get-partner-custom-fonts");
-      return e.map((o) => ({
-        ...o,
-        active: !0
-      }));
-    } catch (t) {
-      const { handleError: e } = s();
-      return e(t, "Failed to fetch custom fonts"), [];
-    }
-  }
+  };
 };
 export {
-  c as default
+  m as useStripoApi
 };

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,47 @@
+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
+};

package/dist/static/styles/components/button-group.css.js

@@ -0,0 +1,54 @@
+const o = `/* Radio Buttons and Check Buttons */
+
+.button-group {
+    padding: 0;
+    column-gap: 0;
+    border-radius: 0;
+    background-color: transparent;
+}
+
+.button-group .button {
+    background-color: var(--guido-color-gray-0);
+    outline: none;
+    padding: 8px 12px;
+    border: 1px solid var(--guido-color-gray-300);
+    box-shadow: none;
+    height: 40px;
+}
+
+.button-group .button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-gray-1);
+}
+
+.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);
+}
+
+ue-check-buttons input:checked + label:hover:not(:disabled,.disabled),
+ue-radio-buttons input:checked + label:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-primary-100) !important;
+}
+`;
+export {
+  o as default
+};

package/dist/static/styles/components/button.css.js

@@ -0,0 +1,106 @@
+const o = `.control-shadow-wrapper:has(.button) {
+    border-radius: 0;
+    box-shadow: none;
+    background-color: transparent;
+    padding: 0;
+}
+
+.button {
+    min-width: 40px;
+    min-height: 40px;
+    padding: 8px;
+    background-color: var(--guido-color-gray-0);
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+    box-shadow: none;
+}
+
+.button:not(:disabled,.disabled):active {
+    transform: none !important;
+}
+
+.button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-gray-1);
+}
+
+.button .icon-button {
+    color: var(--guido-color-gray-800);
+}
+
+.on > .button {
+    background-color: var(--guido-color-primary-100);
+    color: var(--guido-color-primary-500);
+    border-color: var(--guido-color-primary-500);
+    box-shadow: none;
+}
+
+.on > .button .icon-button {
+    color: var(--guido-color-primary-500);
+}
+
+.on > .button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-primary-100);
+}
+
+.e2e-remove-container-item .button .icon-button,
+.e2e-delete-menu-btn .button .icon-button {
+    color: var(--guido-color-danger-500);
+}
+
+.e2e-text-insert-controls .control-shadow-wrapper:not(:last-of-type) {
+    margin-right: 16px;
+}
+
+.flat-white > .button {
+    border: 0;
+}
+
+.flat-white > .button:hover:not(:disabled,.disabled) {
+    background-color: transparent !important;
+    color: var(--guido-color-primary-500);
+}
+
+.flat-white > .button:hover:not(:disabled,.disabled) {
+    color: var(--guido-color-primary-500);
+}
+
+ue-check-button.checked:not(.flat-white) input:checked + label {
+    background-color: var(--guido-color-primary-100);
+    color: var(--guido-color-primary-500);
+    border: 1px solid var(--guido-color-primary-500);
+    box-shadow: none;
+}
+
+ue-check-button.checked:not(.flat-white) input:checked + label:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-primary-100);
+}
+
+ue-check-button.checked:not(.flat-white) input:checked + label .icon-button {
+    color: var(--guido-color-primary-500);
+}
+
+ue-select.full-width .button {
+    border: none !important;
+    background-color: var(--guido-color-neutral-200) !important;
+    color: var(--guido-color-neutral-800) !important;
+}
+
+ue-select.full-width .button .icon-button {
+    color: var(--guido-color-gray-600) !important;
+}
+
+ue-select.full-width .button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-neutral-100) !important;
+}
+
+ue-color {
+    width: 80px;
+}
+
+ue-color .base-input {
+    width: 100%;
+}
+`;
+export {
+  o as default
+};

package/dist/static/styles/components/combobox.css.js

@@ -0,0 +1,49 @@
+const o = `.control-shadow-wrapper:has(.button[role="combobox"]) {
+    border-radius: 0;
+    padding: 0;
+    background: transparent;
+}
+
+ue-select .button, 
+ue-mergetags .button, 
+ue-font-family-select .button {
+    background-color: var(--guido-color-gray-0);
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+    box-shadow: none;
+    min-height: 40px;
+    padding: 8px;
+    font-size: 13px;
+    color: var(--guido-color-gray-800);
+    text-align: left;
+    outline: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+ue-select .button:hover:not(:disabled,.disabled), 
+ue-mergetags .button.button:hover:not(:disabled,.disabled), 
+ue-font-family-select .button.button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-gray-0);
+    border-color: var(--guido-color-primary-500);
+}
+
+ue-select .button.on, 
+ue-mergetags .button.on, 
+ue-font-family-select .button.on {
+    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-select .button > .icon-button, 
+ue-mergetags .button > .icon-button, 
+ue-font-family-select .button > .icon-button {
+    margin-left: 0;
+    margin-right: 0;
+}
+`;
+export {
+  o as default
+};

package/dist/static/styles/components/counter.css.js

@@ -0,0 +1,42 @@
+const o = `ue-counter {
+    padding: 0 !important;
+    background-color: var(--guido-color-gray-0) !important;
+    border-radius: 0;
+}
+
+ue-counter .button {
+    width: 40px;
+    height: 40px;
+    box-shadow: none;
+    background-color: var(--guido-color-gray-0);
+    border: 1px solid var(--guido-color-gray-300);
+}
+
+ue-counter .button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-gray-1);
+}
+
+ue-counter .button .icon-button {
+    color: var(--guido-color-gray-600);
+}
+
+ue-counter .button.disabled .icon-button {
+    color: var(--guido-color-gray-700);
+}
+
+ue-counter ue-button:first-child .button {
+    border-radius: 4px 0 0 4px;
+}
+
+ue-counter ue-button:last-child .button {
+    border-radius: 0 4px 4px 0;
+}
+
+ue-counter .input {
+    border-top: 1px solid var(--guido-color-gray-300);
+    border-bottom: 1px solid var(--guido-color-gray-300);
+}
+`;
+export {
+  o as default
+};

package/dist/static/styles/components/dropdown-menu.css.js

@@ -0,0 +1,52 @@
+const n = `ue-dropdown {
+    border-radius: 4px;
+    border: 1px solid var(--guido-color-gray-300);
+    box-shadow: 0 8px 10px -6px var(--ue-base-shadow-color, rgba(0, 0, 0, .1)),0 15px 35px -5px var(--ue-base-shadow-color, rgba(0, 0, 0, .1));
+}
+
+ue-dropdown .service-element.padding-t-3 {
+    padding-top: 8px;
+}
+
+.dropdown__search {
+    padding: 0 8px 16px;
+}
+
+.dropdown__tabs {
+    padding: 8px;
+}
+
+.dropdown__category {
+    padding: 16px 16px 0;
+    margin: 0;
+    text-transform: uppercase;
+    font-size: 13px;
+    letter-spacing: 1.2px;
+    font-weight: 600;
+    line-height: 20px;
+    color: var(--guido-color-gray-600);
+}
+
+.dropdown__item {
+    padding: 8px 16px;
+    margin: 0;
+    border-radius: 0;
+    background-color: var(--guido-color-gray-100);
+    color: var(--guido-color-gray-800);
+}
+
+.dropdown__menu ue-icon-component.icon-button {
+    color: var(--guido-color-primary-500);
+}
+
+.menu {
+    padding: 8px 0px;
+}
+
+.menu .menu-item {
+    padding: 8px;
+}
+`;
+export {
+  n as default
+};

package/dist/static/styles/components/narrow-panel.css.js

@@ -0,0 +1,38 @@
+const o = `ue-ui-headed-simple-panel,
+ue-ui-simple-panel,
+.modules-panel-small-content {
+    box-shadow: var(--guido-box-shadow);
+    border: 1px solid var(--guido-color-gray-300);
+}
+
+ue-stripe-thumb,
+.ue-stripe-thumb {
+    box-shadow: none;
+    border: 1px solid var(--guido-color-gray-300);
+}
+
+ue-stripe-thumb:hover:not(.disabled),
+.ue-stripe-thumb:hover:not(.disabled) {
+    box-shadow: none;
+    border: 1px solid var(--guido-color-primary-500);
+}
+
+.block-thumb {
+    box-shadow: none;
+    border: 1px solid var(--guido-color-gray-300);
+}
+
+.ue-dragged-node-component>.block-thumb,
+.block-thumb:hover:not(.disabled) {
+    box-shadow: none;
+    border-color: var(--guido-color-primary-500);
+}
+
+.modules-layout-wrapper {
+    padding: 0 16px 16px;
+    grid-row-gap: 16px;
+}
+`;
+export {
+  o as default
+};

package/dist/static/styles/components/switcher.css.js

@@ -0,0 +1,11 @@
+const e = `ue-switcher input {
+    border-radius: 26px;
+} 
+
+ue-switcher input:before {
+    border-radius: 22px;
+}
+`;
+export {
+  e as default
+};