@useinsider/guido 1.0.1-beta.fce60db → 1.0.2-beta.02ef88a

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

@@ -1,4 +1,4 @@
-const n = `.alert-message-wrapper {
+const r = `.alert-message-wrapper {
     box-shadow: none;
     border: 1px solid var(--guido-color-gray-300);
     color: var(--guido-color-gray-600);
@@ -16,6 +16,36 @@ const n = `.alert-message-wrapper {
     color: var(--guido-color-border-onpage-message-info);
 }
 
+.alert-message-wrapper.warn {
+    background: var(--guido-color-background-onpage-message-warn);
+    border-color: var(--guido-color-border-onpage-message-warn);
+    color: inherit;
+}
+
+.alert-message-wrapper.warn ue-icon-component.icon {
+    color: var(--guido-color-border-onpage-message-warn);
+}
+
+.alert-message-wrapper.success {
+    background: var(--guido-color-background-onpage-message-success);
+    border-color: var(--guido-color-border-onpage-message-success);
+    color: inherit;
+}
+
+.alert-message-wrapper.success ue-icon-component.icon {
+    color: var(--guido-color-border-onpage-message-success);
+}
+
+.alert-message-wrapper.error {
+    background: var(--guido-color-background-onpage-message-error);
+    border-color: var(--guido-color-border-onpage-message-error);
+    color: inherit;
+}
+
+.alert-message-wrapper.error ue-icon-component.icon {
+    color: var(--guido-color-border-onpage-message-error);
+}
+
 .alert-message-wrapper ue-button {
     padding: 0;
 }
@@ -35,5 +65,5 @@ const n = `.alert-message-wrapper {
 }
 `;
 export {
-  n as default
+  r as default
 };

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

@@ -60,8 +60,28 @@ const o = `.control-shadow-wrapper:has(.button) {
     color: var(--guido-color-primary-500);
 }
 
-.flat-white > .button:hover:not(:disabled,.disabled) {
-    color: var(--guido-color-primary-500);
+.primary > .button {
+    border: none;
+    background-color: var(--guido-color-neutral-200);
+    color: var(--guido-color-neutral-800);
+}
+
+.primary > .button .icon-button {
+    color: var(--guido-color-neutral-800);
+}
+
+.primary > .button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-neutral-100);
+}
+
+.danger > .button {
+    background-color: var(--guido-color-danger-500);
+    color: var(--guido-color-white);
+    border: none;
+}
+
+.danger > .button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-danger-300);
 }
 
 ue-check-button.checked:not(.flat-white) input:checked + label {
@@ -100,6 +120,16 @@ ue-color {
 ue-color .base-input {
     width: 100%;
 }
+
+ue-select-text-input .select-text-input-toggle {
+    top: 0;
+    right: 0;
+}
+
+ue-select-text-input .select-text-input-toggle .button {
+    justify-content: center;
+    background-color: transparent !important;
+}
 `;
 export {
   o as default

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

@@ -0,0 +1,10 @@
+const n = `ue-loader-component.full-height {
+    display: none !important;
+    background-color: rgba(0, 0, 0, .5);
+    z-index: 9;
+    backdrop-filter: blur(2px);
+}
+`;
+export {
+  n as default
+};

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

@@ -0,0 +1,55 @@
+const n = `ue-notifications-container {
+    left: 96px;
+    margin: 0;
+    bottom: 32px;
+    top: unset;
+    width: unset;
+}
+
+ue-notifications-container ue-message + ue-message {
+    margin-bottom: 24px;
+}
+
+ue-notifications-container .alert-message-wrapper {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
+    border: none;
+    padding: 16px 24px;
+}
+
+ue-notifications-container .alert-message-wrapper .alert-message-main .alert-message-content {
+    width: calc(100% - 64px);
+}
+
+ue-notifications-container .alert-message-wrapper .alert-message-main .alert-message-text {
+    font-size: 15px;
+    font-weight: 600;
+}
+
+ue-notifications-container .alert-message-text,
+ue-notifications-container .alert-message-wrapper ue-icon-component.icon,
+ue-notifications-container .alert-message-wrapper ue-icon-component.icon-button {
+    color: var(--guido-color-white);
+}
+
+ue-notifications-container ue-message ue-button.close {
+    margin: 0 0 0 16px;
+}
+
+ue-notifications-container .alert-message-wrapper.success {
+    background: var(--guido-color-background-toaster-success);
+    color: inherit;
+}
+
+ue-notifications-container .alert-message-wrapper.error {
+    background: var(--guido-color-background-toaster-error);
+    color: inherit;
+}
+
+ue-notifications-container .alert-message-wrapper.warn {
+    background: var(--guido-color-background-toaster-warn);
+    color: inherit;
+}
+`;
+export {
+  n as default
+};

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

@@ -0,0 +1,68 @@
+const n = `ue-popup {
+    -webkit-backdrop-filter: unset;
+    backdrop-filter: unset;
+    background-color: rgba(44, 53, 70, 0.5);
+}
+
+ue-popup .popup-wrapper {
+    max-width: 400px;
+    border: 1px solid var(--guido-color-neutral-200);
+    box-shadow: none;
+    background: var(--guido-color-white);
+    font-size: 15px;
+    line-height: 24px;
+}
+
+ue-popup .popup-title {
+    padding: 32px 56px 0 32px;
+    line-height: 24px;
+    font-size: 20px;
+    font-weight: 400;
+    border-bottom: none;
+}
+
+ue-popup .confirmation .confirmation-wrapper {
+    padding: 32px;
+    gap: 16px;
+}
+
+ue-popup .confirmation .confirmation-actions {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+}
+
+ue-popup .danger > .button {
+    font-size: 15px;
+    padding: 8px 16px;
+}
+
+ue-popup .e2e-cancel {
+    margin-left: unset;
+}
+
+ue-popup .e2e-cancel .button {
+    background-color: transparent;
+    border: none;
+    padding: 8px 0;
+    font-size: 15px;
+}
+
+ue-popup .e2e-cancel .button:hover:not(:disabled,.disabled) {
+    text-decoration: underline;
+    background-color: transparent;
+}
+
+ue-popup .popup-close {
+    top: 32px;
+    right: 32px;
+}
+
+ue-popup .popup-close .button {
+    padding: 0;
+    min-width: unset;
+    min-height: unset;
+}
+`;
+export {
+  n as default
+};

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

@@ -2,17 +2,26 @@ const n = `ue-wide-panel {
     width: 425px;
 }
 
+ue-main-editor-container[panel-position=SETTINGS_BLOCKS] ue-wide-panel {
+    right: calc(100% - calc(var(--ue-spacing-step, 5px) * 3) - 425px);
+}
+
 ue-main-tabs-panel-component .fixed-panel-header {
     display: none;
 }
 
+/* Remove with this writing task DT-28355 */
+ue-description a {
+    display: none;
+}
+
 .label {
     font-size: 13px;
     color: var(--guido-color-gray-800);
 }
 
 .stacked-panel {
-    overflow: scroll;
+    overflow: auto;
 }
 
 .stacked-panel-title {
@@ -120,9 +129,9 @@ ue-label.accent-dot:after {
     width: auto;
     height: auto;
     border-radius: 4px;
-    background: var(--guido-color-primary-500);
+    background: var(--guido-color-primary-100);
     z-index: 2;
-    color: var(--guido-color-white);
+    color: var(--guido-color-primary-500);
     padding: 4px 8px;
     right: 1px;
     font-size: 13px;

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

@@ -12,6 +12,12 @@ const n = `.esd-x,
 .ue-preview-control-wrapper ue-icon-component:not([disabled=true]):not(.stripo-static-icon):hover {
     background: none;
 }
+
+.ue-email-wrapper-rounded,
+.ue-email-wrapper-rounded-top {
+    border-radius: 0;
+    box-shadow: none;
+}
 `;
 export {
   n as default

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

@@ -12,10 +12,20 @@ const o = `:host {
     --guido-color-neutral-800: #222938;
     --guido-color-neutral-200: #DCDFE6;
     --guido-color-neutral-100: #EFF2F4;
+    --guido-color-danger-300: #e84342;
     --guido-color-danger-500: #DC2A2A; 
     --guido-box-shadow: 0 4px 12px 0 rgba(44,53,70,0.15);
     --guido-color-background-onpage-message-info: #D3EEF8;
     --guido-color-border-onpage-message-info: #258DDE;
+    --guido-color-background-onpage-message-warn: #FCEFE5;
+    --guido-color-border-onpage-message-warn: #D37400;
+    --guido-color-background-onpage-message-success: #E9F9EB;
+    --guido-color-border-onpage-message-success: #128745;
+    --guido-color-background-onpage-message-error: #FCECEC;
+    --guido-color-border-onpage-message-error: var(--guido-color-danger-500);
+    --guido-color-background-toaster-success: #128745;
+    --guido-color-background-toaster-error: var(--guido-color-danger-500);
+    --guido-color-background-toaster-warn: #D37400;
 }
 `;
 export {

package/dist/stores/dynamic-content.d.ts

@@ -8,11 +8,19 @@ export declare const useDynamicContentStore: import("pinia").StoreDefinition<"dy
             value: string;
             text: string;
             fallback?: string | undefined;
+            format?: {
+                key: string;
+                value: string;
+            } | undefined;
         };
         selectedDynamicContentList: {
             value: string;
             text: string;
             fallback?: string | undefined;
+            format?: {
+                key: string;
+                value: string;
+            } | undefined;
         }[];
     } & import("pinia").PiniaCustomStateProperties<{
         selectedDynamicContent: DynamicContent;
@@ -21,6 +29,10 @@ export declare const useDynamicContentStore: import("pinia").StoreDefinition<"dy
         text: string;
         value: string;
         fallback: string | undefined;
+        format: {
+            key: string;
+            value: string;
+        } | undefined;
     }[];
 }, {
     setSelectedDynamicContent(dynamicContent: DynamicContent): void;

package/dist/stores/dynamic-content.js

@@ -6,15 +6,16 @@ const s = a("dynamicContent", {
     selectedDynamicContentList: []
   }),
   actions: {
-    setSelectedDynamicContent(e) {
-      this.selectedDynamicContent = e, this.selectedDynamicContentList.push(e);
+    setSelectedDynamicContent(t) {
+      this.selectedDynamicContent = t, this.selectedDynamicContentList.push(t);
     }
   },
   getters: {
-    getSelectedDynamicContentList: (e) => n(e.selectedDynamicContentList).map((t) => ({
-      text: t.text,
-      value: t.value,
-      fallback: t.fallback
+    getSelectedDynamicContentList: (t) => n(t.selectedDynamicContentList).map((e) => ({
+      text: e.text,
+      value: e.value,
+      fallback: e.fallback,
+      format: e.format
     })) || []
   }
 });

package/dist/stores/editor.d.ts

@@ -1,8 +1,201 @@
 export declare const useEditorStore: import("pinia").StoreDefinition<"editor", {
+    loadingStatus: boolean;
     isCodeEditorOpen: boolean;
     isSaveAsTemplateDrawerOpen: boolean;
     isVersionHistoryOpen: boolean;
     isPreviewModeOpen: boolean;
     editorVisualMode: string;
     hasChanges: boolean;
-}, {}, {}>;
+    isStripoInitialized: boolean;
+}, {
+    isUndoButtonDisabled: (state: {
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    } & import("pinia").PiniaCustomStateProperties<{
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    }>) => boolean;
+    isRedoButtonDisabled: (state: {
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    } & import("pinia").PiniaCustomStateProperties<{
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    }>) => boolean;
+    isCodeEditorButtonDisabled: (state: {
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    } & import("pinia").PiniaCustomStateProperties<{
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    }>) => boolean;
+    isPreviewButtonDisabled: (state: {
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    } & import("pinia").PiniaCustomStateProperties<{
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    }>) => boolean;
+    isViewOptionsDisabled: (state: {
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    } & import("pinia").PiniaCustomStateProperties<{
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    }>) => boolean;
+    isVersionHistoryButtonDisabled: (state: {
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    } & import("pinia").PiniaCustomStateProperties<{
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    }>) => boolean;
+    isExportButtonDisabled: (state: {
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    } & import("pinia").PiniaCustomStateProperties<{
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    }>) => boolean;
+    isSaveAsButtonDisabled: (state: {
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    } & import("pinia").PiniaCustomStateProperties<{
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    }>) => boolean;
+    isTestButtonDisabled: (state: {
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    } & import("pinia").PiniaCustomStateProperties<{
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    }>) => boolean;
+    isSaveButtonDisabled: (state: {
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    } & import("pinia").PiniaCustomStateProperties<{
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+    }>) => boolean;
+}, {}>;

package/dist/stores/editor.js

@@ -1,13 +1,29 @@
 import { defineStore as e } from "pinia";
 const o = e("editor", {
   state: () => ({
+    loadingStatus: !0,
     isCodeEditorOpen: !1,
     isSaveAsTemplateDrawerOpen: !1,
     isVersionHistoryOpen: !1,
     isPreviewModeOpen: !1,
     editorVisualMode: "desktop",
-    hasChanges: !1
-  })
+    hasChanges: !1,
+    isStripoInitialized: !1
+  }),
+  getters: {
+    // Middle Slot
+    isUndoButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
+    isRedoButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
+    isCodeEditorButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
+    isPreviewButtonDisabled: (i) => i.loadingStatus,
+    isViewOptionsDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
+    // Right Slot
+    isVersionHistoryButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
+    isExportButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
+    isSaveAsButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
+    isTestButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
+    isSaveButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen || i.isPreviewModeOpen
+  }
 });
 export {
   o as useEditorStore