@useinsider/guido 3.2.0-beta.f2e037f → 3.2.0-beta.f679fe4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/components/organisms/onboarding/AMPOnboarding.vue2.js +51 -31
  2. package/dist/components/organisms/onboarding/GenericOnboarding.vue.js +1 -1
  3. package/dist/components/organisms/onboarding/GenericOnboarding.vue2.js +23 -22
  4. package/dist/components/organisms/onboarding/ItemsOnboarding.vue.js +1 -1
  5. package/dist/components/organisms/onboarding/ItemsOnboarding.vue2.js +37 -39
  6. package/dist/components/organisms/onboarding/TextBlockOnboarding.vue.js +3 -3
  7. package/dist/components/organisms/onboarding/TextBlockOnboarding.vue2.js +30 -41
  8. package/dist/components/organisms/onboarding/VersionHistoryOnboarding.vue2.js +15 -14
  9. package/dist/composables/useFullStoryBridge.js +14 -0
  10. package/dist/composables/useHtmlValidator.js +83 -118
  11. package/dist/composables/useRibbonOffset.js +21 -0
  12. package/dist/composables/useStripo.js +47 -46
  13. package/dist/config/compiler/recommendationCompilerRules.js +72 -67
  14. package/dist/config/compiler/unsubscribeCompilerRules.js +40 -37
  15. package/dist/config/compiler/utils/recommendationCompilerUtils.js +33 -30
  16. package/dist/config/migrator/recommendationMigrator.js +1 -1
  17. package/dist/enums/html-validator.js +2 -4
  18. package/dist/enums/onboarding.js +7 -2
  19. package/dist/enums/unsubscribe.js +34 -27
  20. package/dist/extensions/Blocks/Items/controls/price/singlePrice.js +38 -38
  21. package/dist/extensions/Blocks/Items/enums/productEnums.js +19 -7
  22. package/dist/extensions/Blocks/Recommendation/constants/controlIds.js +1 -1
  23. package/dist/extensions/Blocks/Recommendation/controls/customAttribute/index.js +21 -18
  24. package/dist/extensions/Blocks/Recommendation/controls/customAttribute/textTrim.js +99 -0
  25. package/dist/extensions/Blocks/Recommendation/controls/main/algorithm.js +6 -6
  26. package/dist/extensions/Blocks/Recommendation/controls/main/index.js +3 -1
  27. package/dist/extensions/Blocks/Recommendation/controls/name/textTrim.js +27 -57
  28. package/dist/extensions/Blocks/Recommendation/controls/shared/textTrimCssRules.js +14 -0
  29. package/dist/extensions/Blocks/Recommendation/settingsPanel.js +18 -17
  30. package/dist/extensions/Blocks/Recommendation/store/recommendation.js +29 -25
  31. package/dist/extensions/Blocks/Recommendation/templates/list/template.js +11 -11
  32. package/dist/extensions/Blocks/Recommendation/utils/filterUtil.js +17 -14
  33. package/dist/guido.css +1 -1
  34. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +393 -264
  35. package/dist/package.json.js +1 -1
  36. package/dist/src/composables/useFullStoryBridge.d.ts +11 -0
  37. package/dist/src/composables/useRibbonOffset.d.ts +4 -0
  38. package/dist/src/enums/html-validator.d.ts +0 -2
  39. package/dist/src/enums/onboarding.d.ts +6 -0
  40. package/dist/src/enums/unsubscribe.d.ts +5 -0
  41. package/dist/src/extensions/Blocks/Recommendation/constants/controlIds.d.ts +1 -0
  42. package/dist/src/extensions/Blocks/Recommendation/controls/customAttribute/index.d.ts +3 -0
  43. package/dist/src/extensions/Blocks/Recommendation/controls/customAttribute/textTrim.d.ts +35 -0
  44. package/dist/src/extensions/Blocks/Recommendation/controls/name/textTrim.d.ts +3 -20
  45. package/dist/src/extensions/Blocks/Recommendation/controls/shared/textTrimCssRules.d.ts +29 -0
  46. package/dist/src/stores/onboarding.d.ts +4 -0
  47. package/dist/static/styles/components/button.css.js +16 -9
  48. package/dist/static/styles/components/loader.css.js +4 -0
  49. package/dist/static/styles/components/narrow-panel.css.js +52 -0
  50. package/dist/stores/onboarding.js +4 -0
  51. package/package.json +3 -3
@@ -1,4 +1,4 @@
1
- const o = { stripo: { version: "2.54.0" } }, s = {
1
+ const o = { stripo: { version: "2.62.0" } }, s = {
2
2
  guido: o
3
3
  };
4
4
  export {
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Injects the hosted FullStory bridge script into the Stripo editor iframe.
3
+ *
4
+ * The bridge script's origin is allowlisted via Stripo's
5
+ * `allowedScriptSourceDomains` in useStripo, so the iframe's CSP permits
6
+ * the load. The bundled script itself handles reading FS config from the
7
+ * parent window and booting the FullStory queue stub inside the iframe.
8
+ */
9
+ export declare const useFullStoryBridge: () => {
10
+ injectFullStory: () => void;
11
+ };
@@ -0,0 +1,4 @@
1
+ export declare const useRibbonOffset: () => {
2
+ ribbonOffset: import("vue").Ref<number>;
3
+ getTopPosition: (baseTop: number) => string;
4
+ };
@@ -1,6 +1,4 @@
1
1
  export declare const CanNotMakeAnyChangesForRunningKey = "newsletter.already-in-progress";
2
2
  export declare const CanNotMakeAnyChangesKey = "newsletter.can-not-make-any-changes";
3
3
  export declare const CampaignCouldNotBeSavedKey = "newsletter.campaign-could-not-be-saved";
4
- export declare const DISPLAY_CONDITIONS_REGEX: RegExp;
5
- export declare const DISPLAY_CONDITIONS_EXCEPTIONS_REGEX: RegExp;
6
4
  export declare const REMOVE_CONDITIONS_REGEX: RegExp;
@@ -3,3 +3,9 @@ export declare const UI_EDITOR_SELECTOR = "ui-editor";
3
3
  export declare const CARD_COMPOSITION_TAB_SELECTOR = "button[role=\"tab\"][aria-label=\"Card Composition\"]";
4
4
  export declare const SETTINGS_TAB_SELECTOR = "button[role=\"tab\"][aria-label=\"Settings\"]";
5
5
  export declare const RIBBON_SELECTOR = ".in-ribbons-wrapper";
6
+ export declare const DYNAMIC_CONTENT_BUTTON_SELECTOR = "#guido__btn-add-dynamic-content";
7
+ export declare const AMP_TOGGLE_BUTTON_SELECTOR = ".guido__amp-toggle-html";
8
+ export declare const AMP_TOGGLE_WRAPPER_SELECTOR = ".in-segments-wrapper";
9
+ export declare const HEADER_SELECTOR = "[data-testid=\"guido-header\"]";
10
+ export declare const POPOVER_LEFT_OFFSET = 158;
11
+ export declare const POPOVER_TOP_GAP = 10;
@@ -12,6 +12,11 @@ export declare const URLS: {
12
12
  UNSUBSCRIBE_URL: string;
13
13
  PREFERENCES_URL: string;
14
14
  };
15
+ export declare const PRODUCT_TYPE_URL_SEGMENTS: {
16
+ readonly 60: "email";
17
+ readonly 49: "journey";
18
+ readonly 97: "email";
19
+ };
15
20
  export declare const INSIDER_ID = "iid";
16
21
  export declare const DEFAULT_UNSUBSCRIBE_GROUP: {
17
22
  readonly name: "Global Unsubscribe";
@@ -63,5 +63,6 @@ export declare enum RecommendationControlId {
63
63
  CUSTOM_ATTR_PADDINGS = "recommendation-block-custom-attr-paddings-control",
64
64
  CUSTOM_ATTR_SIZE = "recommendation-block-custom-attr-size-control",
65
65
  CUSTOM_ATTR_STYLE = "recommendation-block-custom-attr-style-control",
66
+ CUSTOM_ATTR_TEXT_TRIM = "recommendation-block-custom-attr-text-trim-control",
66
67
  SYNC_INFO_MESSAGE = "recommendation-block-sync-info-message"
67
68
  }
@@ -13,10 +13,12 @@
13
13
  * product cards — changing "brand" color won't affect "rating_star" color.
14
14
  */
15
15
  import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
16
+ import { CustomAttributeTextTrimControl } from './textTrim';
16
17
  /**
17
18
  * Grouped Custom Attribute Controls
18
19
  * Use this object for cleaner imports in extension.ts
19
20
  */
21
+ export { CustomAttributeTextTrimControl } from './textTrim';
20
22
  export declare const CustomAttributeControls: {
21
23
  readonly align: {
22
24
  new (): {
@@ -102,4 +104,5 @@ export declare const CustomAttributeControls: {
102
104
  isVisible(_node: ImmutableHtmlNode): boolean;
103
105
  };
104
106
  };
107
+ readonly textTrim: typeof CustomAttributeTextTrimControl;
105
108
  };
@@ -0,0 +1,35 @@
1
+ /**
2
+ * Custom Attribute Text Trim Control
3
+ *
4
+ * Per-attribute text trimming for custom product attributes.
5
+ * Unlike NameTextTrimControl which applies to ALL product names globally,
6
+ * this control is scoped to a specific custom attribute type via the
7
+ * `product-attr` HTML attribute — changing text-trim on "brand" won't
8
+ * affect "rating_star".
9
+ *
10
+ * CSS rules are shared with NameTextTrimControl via shared/textTrimCssRules.ts.
11
+ */
12
+ import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
13
+ import { CommonControl } from '../../../common-control';
14
+ /**
15
+ * Control for enabling/disabling text trimming on individual custom attributes.
16
+ * Scoped per attribute type using the `product-attr` HTML attribute.
17
+ */
18
+ export declare class CustomAttributeTextTrimControl extends CommonControl {
19
+ getId(): string;
20
+ getTemplate(): string;
21
+ onRender(): void;
22
+ onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
23
+ _setFormValues(): void;
24
+ _getCurrentTrimState(): boolean;
25
+ /**
26
+ * Finds all custom attribute elements of the same type as the current node.
27
+ *
28
+ * Similar to getCustomAttrTargetNodes in customAttribute/index.ts, but adapted
29
+ * for CommonControl lifecycle where currentNode is a class property (not a
30
+ * parameter from Stripo's getTargetNodes override).
31
+ */
32
+ _getTargetElements(): ImmutableHtmlNode[];
33
+ _onTextTrimChange(enabled: boolean): void;
34
+ _listenToFormUpdates(): void;
35
+ }
@@ -1,9 +1,9 @@
1
- import { ImmutableCssNode, ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
1
+ import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
2
2
  import { CommonControl } from '../../../common-control';
3
3
  /**
4
- * Control for enabling/disabling text trimming on product names
4
+ * Control for enabling/disabling text trimming on product names.
5
5
  * When enabled, adds a CSS class that applies text-overflow: ellipsis
6
- * and injects the required CSS rules into the document stylesheet
6
+ * and injects the required CSS rules into the document stylesheet.
7
7
  */
8
8
  export declare class NameTextTrimControl extends CommonControl {
9
9
  getId(): string;
@@ -12,23 +12,6 @@ export declare class NameTextTrimControl extends CommonControl {
12
12
  onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
13
13
  _setFormValues(): void;
14
14
  _getCurrentTrimState(): boolean;
15
- /**
16
- * Finds an existing CSS rule in the document stylesheet by exact query
17
- * @param query - The CSS query to search for (uses Stripo's CSS query syntax)
18
- * @returns The CSS rule node if found, undefined otherwise
19
- */
20
- _findCssRule(query: string): ImmutableCssNode | undefined;
21
- /**
22
- * Finds the .text-trim-enabled p rule by searching all text-trim rules and comparing selectors
23
- * This is needed because Stripo's CSS query syntax interprets spaces as path separators
24
- * @returns true if the rule exists
25
- */
26
- _hasParagraphRule(): boolean;
27
- /**
28
- * Ensures the text-trim CSS rules exist in the document stylesheet
29
- * Only adds rules if they don't already exist (prevents duplicates across multiple blocks)
30
- */
31
- _ensureCssRulesExist(): void;
32
15
  _onTextTrimChange(enabled: boolean): void;
33
16
  _listenToFormUpdates(): void;
34
17
  }
@@ -0,0 +1,29 @@
1
+ /**
2
+ * Shared Text Trim CSS Rule Management
3
+ *
4
+ * Extracted from NameTextTrimControl to be reused by CustomAttributeTextTrimControl.
5
+ * Follows the same pattern as controls/mobileLayout/cssRules.ts — standalone
6
+ * functions that accept an API parameter, importable by any control class.
7
+ *
8
+ * The CSS rules are document-scoped (shared across all recommendation blocks).
9
+ * Once injected, they persist until the template is closed.
10
+ */
11
+ import type { ImmutableCssNode } from '@stripoinc/ui-editor-extensions';
12
+ import { ModificationDescription } from '@stripoinc/ui-editor-extensions';
13
+ export declare const CSS_CLASS_TEXT_TRIM = "text-trim-enabled";
14
+ interface CssCapableApi {
15
+ getDocumentRootCssNode: () => ImmutableCssNode | null;
16
+ getDocumentModifier: () => {
17
+ modifyCss: (node: ImmutableCssNode) => {
18
+ appendRule: (rule: string) => void;
19
+ };
20
+ apply: (desc: ModificationDescription) => void;
21
+ };
22
+ }
23
+ /**
24
+ * Ensures the text-trim CSS rules exist in the document stylesheet.
25
+ * Only adds rules if they don't already exist (prevents duplicates across blocks).
26
+ * Calls getDocumentRootCssNode once and passes it to both checks.
27
+ */
28
+ export declare function ensureTextTrimCssRulesExist(api: CssCapableApi): void;
29
+ export {};
@@ -1392,6 +1392,10 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
1392
1392
  close(type: OnboardingType): Promise<void>;
1393
1393
  next(type: OnboardingType): void;
1394
1394
  previous(type: OnboardingType): void;
1395
+ updateCardPosition(type: OnboardingType, cardIndex: number, position: {
1396
+ top: string;
1397
+ position: string;
1398
+ }): void;
1395
1399
  setConfig(type: OnboardingType, config: OnboardingCardConfig[]): void;
1396
1400
  onDiscoverNowClicked(): Promise<void>;
1397
1401
  onRemindMeLater(): void;
@@ -1,4 +1,4 @@
1
- const o = `.control-shadow-wrapper:has(.button) {
1
+ const n = `.control-shadow-wrapper:has(.button) {
2
2
  border-radius: 0;
3
3
  box-shadow: none;
4
4
  background-color: transparent;
@@ -99,18 +99,12 @@ ue-check-button.checked:not(.flat-white) input:checked + label .icon-button {
99
99
  color: var(--guido-color-primary-500);
100
100
  }
101
101
 
102
- ue-select.full-width .button {
103
- border: none !important;
104
- background-color: var(--guido-color-neutral-200) !important;
105
- color: var(--guido-color-neutral-800) !important;
106
- }
107
-
108
102
  ue-select.full-width .button .icon-button {
109
103
  color: var(--guido-color-gray-600) !important;
110
104
  }
111
105
 
112
106
  ue-select.full-width .button:hover:not(:disabled,.disabled) {
113
- background-color: var(--guido-color-neutral-100) !important;
107
+ background-color: var(--guido-color-gray-0) !important;
114
108
  }
115
109
 
116
110
  ue-color {
@@ -130,7 +124,20 @@ ue-select-text-input .select-text-input-toggle .button {
130
124
  justify-content: center;
131
125
  background-color: transparent !important;
132
126
  }
127
+
128
+
129
+ .control-shadow-wrapper,
130
+ ue-button:not(.no-shadow,.flat-white),
131
+ ue-toggle:not(.no-shadow,.flat-white),
132
+ :is(ue-popover-toggler,ue-toggle-icon-picker,ue-emoji-toggle),
133
+ .button-group,
134
+ ue-counter:not(.no-shadow),
135
+ :is(ue-select,ue-mergetags,ue-font-family-select):not(.no-shadow),
136
+ ue-check-button:not(.no-shadow,.flat-white) {
137
+ background: none;
138
+ padding: 0;
139
+ }
133
140
  `;
134
141
  export {
135
- o as default
142
+ n as default
136
143
  };
@@ -4,6 +4,10 @@ const n = `ue-loader-component.full-height {
4
4
  z-index: 9;
5
5
  backdrop-filter: blur(2px);
6
6
  }
7
+
8
+ ue-loader-component .service-element.loader {
9
+ box-shadow: var(--guido-color-primary-500) 1px 1px 0 0 !important;
10
+ }
7
11
  `;
8
12
  export {
9
13
  n as default
@@ -28,6 +28,58 @@ ue-stripe-thumb:hover:not(.disabled),
28
28
  border-color: var(--guido-color-primary-500);
29
29
  }
30
30
 
31
+ /* Module search — initial */
32
+ .module-search-container {
33
+ background-color: var(--guido-color-gray-0);
34
+ border: 1px solid var(--guido-color-gray-300);
35
+ border-radius: 4px;
36
+ }
37
+
38
+ .module-search-container .service-element {
39
+ background-color: unset;
40
+ }
41
+
42
+ .module-filter-toggle {
43
+ top: -1px !important;
44
+ right: -1px !important;
45
+ }
46
+
47
+ .module-filter-toggle > .button,
48
+ .module-search-container:hover .module-filter-toggle > .button {
49
+ border: none;
50
+ background: transparent;
51
+ }
52
+
53
+ /* Module search — hover */
54
+ .module-search-container:has(.module-search-chip-input:hover) {
55
+ border-color: var(--guido-color-primary-500);
56
+ }
57
+
58
+ .module-search-container .module-search-chip-input .service-element:hover {
59
+ background-color: var(--guido-color-gray-0);
60
+ border-radius: 4px;
61
+ }
62
+
63
+ .module-search-container .module-filter-toggle:hover > .button {
64
+ background-color: var(--guido-color-gray-1);
65
+ }
66
+
67
+ /* Module search — selected (.on) */
68
+ .module-search-container:has(.module-search-chip-input.on),
69
+ .module-search-container:has(.module-search-chip-input.on):hover {
70
+ border-color: var(--guido-color-primary-500);
71
+ box-shadow: 0 0 0 3px var(--guido-color-primary-200) !important;
72
+ }
73
+
74
+ .module-search-container .module-search-chip-input.on .input-section {
75
+ background-color: unset;
76
+ box-shadow: unset;
77
+ }
78
+
79
+ .module-categories-list .menu-item {
80
+ padding: 8px 20px !important;
81
+ }
82
+
31
83
  .modules-layout-wrapper {
32
84
  padding: 0 16px 16px;
33
85
  grid-row-gap: 16px;
@@ -71,6 +71,10 @@ const t = () => ({
71
71
  previous(n) {
72
72
  this.onboardings[n].cardIndex > 0 && this.onboardings[n].cardIndex--;
73
73
  },
74
+ updateCardPosition(n, i, o) {
75
+ const s = this.onboardings[n].config[i];
76
+ s && (s.top = o.top, s.position = o.position);
77
+ },
74
78
  setConfig(n, i) {
75
79
  this.onboardings[n].config = i ?? [], this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
76
80
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@useinsider/guido",
3
- "version": "3.2.0-beta.f2e037f",
3
+ "version": "3.2.0-beta.f679fe4",
4
4
  "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
5
5
  "main": "./dist/guido.umd.cjs",
6
6
  "module": "./dist/library.js",
@@ -32,7 +32,7 @@
32
32
  "author": "",
33
33
  "license": "ISC",
34
34
  "dependencies": {
35
- "@stripoinc/ui-editor-extensions": "3.5.0",
35
+ "@stripoinc/ui-editor-extensions": "3.8.0",
36
36
  "@useinsider/design-system-vue": "1.1.0-beta.73ec2fa",
37
37
  "@vueuse/core": "11.3.0",
38
38
  "lodash-es": "4.17.21",
@@ -86,7 +86,7 @@
86
86
  },
87
87
  "guido": {
88
88
  "stripo": {
89
- "version": "2.54.0"
89
+ "version": "2.62.0"
90
90
  }
91
91
  }
92
92
  }