@useinsider/guido 3.2.0-beta.22a0c4c → 3.2.0-beta.294ea63

package/dist/package.json.js

@@ -1,4 +1,4 @@
-const o = { stripo: { version: "2.54.0" } }, s = {
+const o = { stripo: { version: "2.60.0" } }, s = {
   guido: o
 };
 export {

package/dist/src/composables/useActionsApi.d.ts

@@ -7,5 +7,5 @@ export declare const useActionsApi: () => {
     getPreviewData: (options?: CompileEmailOptions) => Promise<CompiledEmailResult>;
     updateTimerInClonedTemplate: () => Promise<string | null>;
     updateHtmlAndCss: (html: string, css: string) => void;
-    editorSave: () => void;
+    editorSave: () => Promise<void>;
 };

package/dist/src/composables/useFullStoryBridge.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Injects the hosted FullStory bridge script into the Stripo editor iframe.
+ *
+ * The bridge script's origin is allowlisted via Stripo's
+ * `allowedScriptSourceDomains` in useStripo, so the iframe's CSP permits
+ * the load. The bundled script itself handles reading FS config from the
+ * parent window and booting the FullStory queue stub inside the iframe.
+ */
+export declare const useFullStoryBridge: () => {
+    injectFullStory: () => void;
+};

package/dist/src/extensions/Blocks/Recommendation/constants/controlIds.d.ts

@@ -63,6 +63,5 @@ export declare enum RecommendationControlId {
     CUSTOM_ATTR_PADDINGS = "recommendation-block-custom-attr-paddings-control",
     CUSTOM_ATTR_SIZE = "recommendation-block-custom-attr-size-control",
     CUSTOM_ATTR_STYLE = "recommendation-block-custom-attr-style-control",
-    CUSTOM_ATTR_TEXT_TRIM = "recommendation-block-custom-attr-text-trim-control",
     SYNC_INFO_MESSAGE = "recommendation-block-sync-info-message"
 }

package/dist/src/extensions/Blocks/Recommendation/controls/customAttribute/index.d.ts

@@ -13,12 +13,10 @@
  * product cards — changing "brand" color won't affect "rating_star" color.
  */
 import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
-import { CustomAttributeTextTrimControl } from './textTrim';
 /**
  * Grouped Custom Attribute Controls
  * Use this object for cleaner imports in extension.ts
  */
-export { CustomAttributeTextTrimControl } from './textTrim';
 export declare const CustomAttributeControls: {
     readonly align: {
         new (): {
@@ -104,5 +102,4 @@ export declare const CustomAttributeControls: {
             isVisible(_node: ImmutableHtmlNode): boolean;
         };
     };
-    readonly textTrim: typeof CustomAttributeTextTrimControl;
 };

package/dist/src/extensions/Blocks/Recommendation/controls/name/textTrim.d.ts

@@ -1,9 +1,9 @@
-import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { ImmutableCssNode, ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
 import { CommonControl } from '../../../common-control';
 /**
- * Control for enabling/disabling text trimming on product names.
+ * Control for enabling/disabling text trimming on product names
  * When enabled, adds a CSS class that applies text-overflow: ellipsis
- * and injects the required CSS rules into the document stylesheet.
+ * and injects the required CSS rules into the document stylesheet
  */
 export declare class NameTextTrimControl extends CommonControl {
     getId(): string;
@@ -12,6 +12,23 @@ export declare class NameTextTrimControl extends CommonControl {
     onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
     _setFormValues(): void;
     _getCurrentTrimState(): boolean;
+    /**
+     * Finds an existing CSS rule in the document stylesheet by exact query
+     * @param query - The CSS query to search for (uses Stripo's CSS query syntax)
+     * @returns The CSS rule node if found, undefined otherwise
+     */
+    _findCssRule(query: string): ImmutableCssNode | undefined;
+    /**
+     * Finds the .text-trim-enabled p rule by searching all text-trim rules and comparing selectors
+     * This is needed because Stripo's CSS query syntax interprets spaces as path separators
+     * @returns true if the rule exists
+     */
+    _hasParagraphRule(): boolean;
+    /**
+     * Ensures the text-trim CSS rules exist in the document stylesheet
+     * Only adds rules if they don't already exist (prevents duplicates across multiple blocks)
+     */
+    _ensureCssRulesExist(): void;
     _onTextTrimChange(enabled: boolean): void;
     _listenToFormUpdates(): void;
 }

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

@@ -1,4 +1,4 @@
-const o = `.control-shadow-wrapper:has(.button) {
+const n = `.control-shadow-wrapper:has(.button) {
     border-radius: 0;
     box-shadow: none;
     background-color: transparent;
@@ -99,18 +99,12 @@ 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;
+    background-color: var(--guido-color-gray-0) !important;
 }
 
 ue-color {
@@ -130,7 +124,20 @@ ue-select-text-input .select-text-input-toggle .button {
     justify-content: center;
     background-color: transparent !important;
 }
+
+
+.control-shadow-wrapper,
+ue-button:not(.no-shadow,.flat-white),
+ue-toggle:not(.no-shadow,.flat-white),
+:is(ue-popover-toggler,ue-toggle-icon-picker,ue-emoji-toggle),
+.button-group,
+ue-counter:not(.no-shadow),
+:is(ue-select,ue-mergetags,ue-font-family-select):not(.no-shadow),
+ue-check-button:not(.no-shadow,.flat-white) {
+    background: none;
+    padding: 0;
+}
 `;
 export {
-  o as default
+  n as default
 };

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

@@ -4,6 +4,10 @@ const n = `ue-loader-component.full-height {
     z-index: 9;
     backdrop-filter: blur(2px);
 }
+
+ue-loader-component .service-element.loader {
+    box-shadow: var(--guido-color-primary-500) 1px 1px 0 0 !important;
+}
 `;
 export {
   n as default

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

@@ -28,6 +28,58 @@ ue-stripe-thumb:hover:not(.disabled),
     border-color: var(--guido-color-primary-500);
 }
 
+/* Module search — initial */
+.module-search-container {
+    background-color: var(--guido-color-gray-0);
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+}
+
+.module-search-container .service-element {
+    background-color: unset;
+}
+
+.module-filter-toggle {
+    top: -1px !important;
+    right: -1px !important;
+}
+
+.module-filter-toggle > .button,
+.module-search-container:hover .module-filter-toggle > .button {
+    border: none;
+    background: transparent;
+}
+
+/* Module search — hover */
+.module-search-container:has(.module-search-chip-input:hover) {
+    border-color: var(--guido-color-primary-500);
+}
+
+.module-search-container .module-search-chip-input .service-element:hover {
+    background-color: var(--guido-color-gray-0);
+    border-radius: 4px;
+}
+
+.module-search-container .module-filter-toggle:hover > .button {
+    background-color: var(--guido-color-gray-1);
+}
+
+/* Module search — selected (.on) */
+.module-search-container:has(.module-search-chip-input.on),
+.module-search-container:has(.module-search-chip-input.on):hover {
+    border-color: var(--guido-color-primary-500);
+    box-shadow: 0 0 0 3px var(--guido-color-primary-200) !important;
+}
+
+.module-search-container .module-search-chip-input.on .input-section {
+    background-color: unset;
+    box-shadow: unset;
+}
+
+.module-categories-list .menu-item {
+    padding: 8px 20px !important;
+}
+
 .modules-layout-wrapper {
     padding: 0 16px 16px;
     grid-row-gap: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.2.0-beta.22a0c4c",
+  "version": "3.2.0-beta.294ea63",
   "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",
@@ -32,7 +32,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@stripoinc/ui-editor-extensions": "3.5.0",
+    "@stripoinc/ui-editor-extensions": "3.7.0",
     "@useinsider/design-system-vue": "1.1.0-beta.73ec2fa",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",
@@ -86,7 +86,7 @@
   },
   "guido": {
     "stripo": {
-      "version": "2.54.0"
+      "version": "2.60.0"
     }
   }
 }

package/dist/extensions/Blocks/Recommendation/controls/customAttribute/textTrim.js

@@ -1,99 +0,0 @@
-import { ModificationDescription as T } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as m } from "../../../common-control.js";
-import { RecommendationBlockId as n } from "../../constants/blockIds.js";
-import { RecommendationControlId as l } from "../../constants/controlIds.js";
-import { BLOCK_ROOT_SELECTOR as u, ATTR_PRODUCT_ATTR as a } from "../../constants/selectors.js";
-import { CSS_CLASS_TEXT_TRIM as o, ensureTextTrimCssRulesExist as c } from "../shared/textTrimCssRules.js";
-const i = {
-  TEXT_TRIM_ENABLED: "customAttrTextTrimEnabled"
-};
-class g extends m {
-  getId() {
-    return l.CUSTOM_ATTR_TEXT_TRIM;
-  }
-  getTemplate() {
-    return `
-            <hr style="margin: 0; border: none; border-top: 1px solid #e0e0e0;" />
-            <div class="custom-attr-text-trim-control-container">
-                ${this._GuTwoColumns([
-      this._GuLabel({ text: this.api.translate("Trim Long Text") }),
-      this._GuToggle(i.TEXT_TRIM_ENABLED)
-    ])}
-            </div>
-        `;
-  }
-  onRender() {
-    this._setFormValues(), this._listenToFormUpdates();
-  }
-  onTemplateNodeUpdated(t) {
-    super.onTemplateNodeUpdated(t), this._setFormValues();
-  }
-  // ========================================================================
-  // State Reading
-  // ========================================================================
-  _setFormValues() {
-    this.api.updateValues({
-      [i.TEXT_TRIM_ENABLED]: this._getCurrentTrimState()
-    });
-  }
-  _getCurrentTrimState() {
-    if (!this.currentNode || !("hasClass" in this.currentNode))
-      return !1;
-    if (this.currentNode.hasClass(o))
-      return !0;
-    const t = this._getTargetElements();
-    return t.length > 0 && "hasClass" in t[0] ? t[0].hasClass(o) : !1;
-  }
-  // ========================================================================
-  // Target Element Discovery (per-attribute scoping)
-  // ========================================================================
-  /**
-   * Finds all custom attribute elements of the same type as the current node.
-   *
-   * Similar to getCustomAttrTargetNodes in customAttribute/index.ts, but adapted
-   * for CommonControl lifecycle where currentNode is a class property (not a
-   * parameter from Stripo's getTargetNodes override).
-   */
-  _getTargetElements() {
-    if (!this.currentNode || !("closest" in this.currentNode))
-      return [];
-    const t = this.currentNode.closest(u);
-    if (!t)
-      return [];
-    const e = "asElement" in this.currentNode ? this.currentNode.asElement().getAttribute(a) : null;
-    if (e) {
-      const s = `[esd-extension-block-id="${n.CUSTOM_ATTRIBUTE}"][${a}="${e}"]`;
-      return Array.from(t.querySelectorAll(s));
-    }
-    return Array.from(
-      t.querySelectorAll(
-        `[esd-extension-block-id="${n.CUSTOM_ATTRIBUTE}"]`
-      )
-    );
-  }
-  // ========================================================================
-  // Toggle Handler
-  // ========================================================================
-  _onTextTrimChange(t) {
-    const e = this._getTargetElements();
-    if (!e.length)
-      return;
-    t && c(this.api);
-    const r = this.api.getDocumentModifier();
-    e.forEach((s) => {
-      t ? r.modifyHtml(s).setClass(o) : r.modifyHtml(s).removeClass(o);
-    }), r.apply(
-      new T(
-        t ? "Enable custom attribute text trimming" : "Disable custom attribute text trimming"
-      )
-    );
-  }
-  _listenToFormUpdates() {
-    this.api.onValueChanged(i.TEXT_TRIM_ENABLED, (t) => {
-      this._onTextTrimChange(t);
-    });
-  }
-}
-export {
-  g as CustomAttributeTextTrimControl
-};

package/dist/extensions/Blocks/Recommendation/controls/shared/textTrimCssRules.js

@@ -1,14 +0,0 @@
-import { ModificationDescription as r } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-const t = "text-trim-enabled", l = `.${t}`, c = `.${t} p`, S = `.${t} { max-width: 0; }`, T = `.${t} p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; display: block; }`;
-function f(n) {
-  const e = n.getDocumentRootCssNode();
-  if (!e)
-    return;
-  const o = n.getDocumentModifier();
-  let i = !1;
-  e.querySelector(l) || (o.modifyCss(e).appendRule(S), i = !0), e.querySelectorAll(`*${t}`).some((s) => "getSelector" in s && typeof s.getSelector == "function" && s.getSelector() === c) || (o.modifyCss(e).appendRule(T), i = !0), i && o.apply(new r("Add text trim CSS rules"));
-}
-export {
-  t as CSS_CLASS_TEXT_TRIM,
-  f as ensureTextTrimCssRulesExist
-};

package/dist/src/extensions/Blocks/Recommendation/controls/customAttribute/textTrim.d.ts

@@ -1,35 +0,0 @@
-/**
- * Custom Attribute Text Trim Control
- *
- * Per-attribute text trimming for custom product attributes.
- * Unlike NameTextTrimControl which applies to ALL product names globally,
- * this control is scoped to a specific custom attribute type via the
- * `product-attr` HTML attribute — changing text-trim on "brand" won't
- * affect "rating_star".
- *
- * CSS rules are shared with NameTextTrimControl via shared/textTrimCssRules.ts.
- */
-import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
-import { CommonControl } from '../../../common-control';
-/**
- * Control for enabling/disabling text trimming on individual custom attributes.
- * Scoped per attribute type using the `product-attr` HTML attribute.
- */
-export declare class CustomAttributeTextTrimControl extends CommonControl {
-    getId(): string;
-    getTemplate(): string;
-    onRender(): void;
-    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
-    _setFormValues(): void;
-    _getCurrentTrimState(): boolean;
-    /**
-     * Finds all custom attribute elements of the same type as the current node.
-     *
-     * Similar to getCustomAttrTargetNodes in customAttribute/index.ts, but adapted
-     * for CommonControl lifecycle where currentNode is a class property (not a
-     * parameter from Stripo's getTargetNodes override).
-     */
-    _getTargetElements(): ImmutableHtmlNode[];
-    _onTextTrimChange(enabled: boolean): void;
-    _listenToFormUpdates(): void;
-}

package/dist/src/extensions/Blocks/Recommendation/controls/shared/textTrimCssRules.d.ts

@@ -1,29 +0,0 @@
-/**
- * Shared Text Trim CSS Rule Management
- *
- * Extracted from NameTextTrimControl to be reused by CustomAttributeTextTrimControl.
- * Follows the same pattern as controls/mobileLayout/cssRules.ts — standalone
- * functions that accept an API parameter, importable by any control class.
- *
- * The CSS rules are document-scoped (shared across all recommendation blocks).
- * Once injected, they persist until the template is closed.
- */
-import type { ImmutableCssNode } from '@stripoinc/ui-editor-extensions';
-import { ModificationDescription } from '@stripoinc/ui-editor-extensions';
-export declare const CSS_CLASS_TEXT_TRIM = "text-trim-enabled";
-interface CssCapableApi {
-    getDocumentRootCssNode: () => ImmutableCssNode | null;
-    getDocumentModifier: () => {
-        modifyCss: (node: ImmutableCssNode) => {
-            appendRule: (rule: string) => void;
-        };
-        apply: (desc: ModificationDescription) => void;
-    };
-}
-/**
- * Ensures the text-trim CSS rules exist in the document stylesheet.
- * Only adds rules if they don't already exist (prevents duplicates across blocks).
- * Calls getDocumentRootCssNode once and passes it to both checks.
- */
-export declare function ensureTextTrimCssRulesExist(api: CssCapableApi): void;
-export {};