@useinsider/guido 3.21.2-beta.d38b210 → 3.21.2-beta.e1315e9

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 (64) hide show
  1. package/README.md +0 -1
  2. package/dist/@types/config/schemas.js +39 -41
  3. package/dist/components/Guido.vue.js +6 -6
  4. package/dist/components/Guido.vue2.js +79 -81
  5. package/dist/composables/useBlocksConfig.js +24 -32
  6. package/dist/composables/useSave.js +75 -68
  7. package/dist/composables/validators/useHtmlDocumentCountValidator.js +22 -0
  8. package/dist/enums/academy.js +0 -1
  9. package/dist/guido.css +1 -1
  10. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +92 -93
  11. package/dist/node_modules/valibot/dist/index.js +261 -297
  12. package/dist/services/templateLibraryApi.js +36 -31
  13. package/dist/src/@types/config/schemas.d.ts +0 -4
  14. package/dist/src/composables/useConfig.d.ts +0 -2
  15. package/dist/src/composables/validators/useHtmlDocumentCountValidator.d.ts +3 -0
  16. package/dist/src/enums/academy.d.ts +0 -1
  17. package/dist/src/stores/config.d.ts +0 -166
  18. package/dist/src/utils/templatePreparation.d.ts +2 -1
  19. package/dist/stores/config.js +6 -13
  20. package/dist/utils/pairProductVariables.js +98 -91
  21. package/dist/utils/templatePreparation.js +30 -30
  22. package/package.json +1 -1
  23. package/dist/@types/display-condition.js +0 -25
  24. package/dist/components/organisms/display-conditions/CodeEditorField.vue.js +0 -20
  25. package/dist/components/organisms/display-conditions/CodeEditorField.vue2.js +0 -30
  26. package/dist/components/organisms/display-conditions/DisplayConditionCreateDrawer.vue.js +0 -30
  27. package/dist/components/organisms/display-conditions/DisplayConditionCreateDrawer.vue2.js +0 -71
  28. package/dist/components/organisms/display-conditions/DisplayConditionSelectDrawer.vue.js +0 -34
  29. package/dist/components/organisms/display-conditions/DisplayConditionSelectDrawer.vue2.js +0 -57
  30. package/dist/components/organisms/display-conditions/DisplayConditionsHost.vue.js +0 -17
  31. package/dist/components/organisms/display-conditions/DisplayConditionsHost.vue2.js +0 -22
  32. package/dist/composables/useDisplayConditions.js +0 -102
  33. package/dist/enums/display-condition.js +0 -12
  34. package/dist/extensions/DisplayConditions/bridge.js +0 -17
  35. package/dist/extensions/DisplayConditions/constants.js +0 -17
  36. package/dist/extensions/DisplayConditions/control.js +0 -178
  37. package/dist/extensions/DisplayConditions/display-conditions.css.js +0 -201
  38. package/dist/extensions/DisplayConditions/extension.js +0 -28
  39. package/dist/extensions/DisplayConditions/iconsRegistry.js +0 -20
  40. package/dist/extensions/DisplayConditions/library.js +0 -27
  41. package/dist/extensions/DisplayConditions/settingsPanel.js +0 -17
  42. package/dist/services/displayConditionApi.js +0 -39
  43. package/dist/src/@types/display-condition.d.ts +0 -59
  44. package/dist/src/components/organisms/display-conditions/CodeEditorField.vue.d.ts +0 -43
  45. package/dist/src/components/organisms/display-conditions/DisplayConditionCreateDrawer.vue.d.ts +0 -2
  46. package/dist/src/components/organisms/display-conditions/DisplayConditionSelectDrawer.vue.d.ts +0 -2
  47. package/dist/src/components/organisms/display-conditions/DisplayConditionsHost.vue.d.ts +0 -2
  48. package/dist/src/composables/useDisplayConditions.d.ts +0 -16
  49. package/dist/src/enums/display-condition.d.ts +0 -15
  50. package/dist/src/extensions/DisplayConditions/bridge.d.ts +0 -6
  51. package/dist/src/extensions/DisplayConditions/constants.d.ts +0 -14
  52. package/dist/src/extensions/DisplayConditions/control.d.ts +0 -23
  53. package/dist/src/extensions/DisplayConditions/extension.d.ts +0 -2
  54. package/dist/src/extensions/DisplayConditions/iconsRegistry.d.ts +0 -4
  55. package/dist/src/extensions/DisplayConditions/library.d.ts +0 -8
  56. package/dist/src/extensions/DisplayConditions/settingsPanel.d.ts +0 -5
  57. package/dist/src/mock/api/display-conditions.d.ts +0 -2
  58. package/dist/src/services/displayConditionApi.d.ts +0 -8
  59. package/dist/src/stores/display-condition.d.ts +0 -81
  60. package/dist/src/utils/displayCondition.d.ts +0 -10
  61. package/dist/src/utils/protectTableText.d.ts +0 -2
  62. package/dist/stores/display-condition.js +0 -28
  63. package/dist/utils/displayCondition.js +0 -26
  64. package/dist/utils/protectTableText.js +0 -22
@@ -1,57 +0,0 @@
1
- import { defineComponent as _, ref as i, watch as S, computed as c } from "vue";
2
- import B from "../../wrappers/WpDrawer.vue.js";
3
- import L from "../../wrappers/WpModal.vue.js";
4
- import { useDisplayConditions as x } from "../../../composables/useDisplayConditions.js";
5
- import { useTranslations as O } from "../../../composables/useTranslations.js";
6
- import { ACADEMY_LINKS as T } from "../../../enums/academy.js";
7
- import { useDisplayConditionStore as $ } from "../../../stores/display-condition.js";
8
- import { InSkeleton as C, InNoData as E, InIcons as M, InButtonV2 as b, InBasicTextInput as k } from "@useinsider/design-system-vue";
9
- const J = /* @__PURE__ */ _({
10
- __name: "DisplayConditionSelectDrawer",
11
- setup(h) {
12
- const o = "email-editor.display-conditions", m = [40, 76, 76, 76], l = O(), t = $(), { loadList: d, select: f, deleteSaved: u, cancel: g } = x(), r = i(""), s = i(null), a = i(null), n = i(!1);
13
- S(() => t.isSelectOpen, (e) => {
14
- e && (r.value = "", s.value = null, a.value = null, d());
15
- }, { immediate: !0 });
16
- const D = c(() => {
17
- const e = r.value.trim().toLocaleLowerCase();
18
- return e ? t.list.filter((p) => `${p.name} ${p.description}`.toLocaleLowerCase().includes(e)) : t.list;
19
- }), v = c(() => l(`${o}.select-description`, {
20
- academyLink: `<a href="${T.EMAIL_DISPLAY_CONDITIONS}" class="guido-display-condition-academy" target="_blank">${l(`${o}.academy`)}</a>`
21
- })), y = c(() => ({
22
- cancelOrBackButton: {
23
- styling: "ghost",
24
- type: "secondary",
25
- labelText: l(`${o}.back`),
26
- leftIcon: "line-arrow-left"
27
- }
28
- })), I = c(() => ({
29
- cancelOrBackButton: {
30
- type: "secondary",
31
- styling: "ghost",
32
- labelText: l(`${o}.cancel`),
33
- disabledStatus: n.value
34
- },
35
- primaryButton: {
36
- type: "danger",
37
- labelText: l(`${o}.delete`),
38
- loadingStatus: n.value
39
- }
40
- }));
41
- return { __sfc: !0, KEY: o, SKELETON_HEIGHTS: m, trans: l, store: t, loadList: d, select: f, deleteSaved: u, cancel: g, search: r, expandedId: s, menuId: a, isDeleting: n, filteredList: D, descriptionText: v, footerButtonGroupOptions: y, deleteModalButtons: I, toggleExpanded: (e) => {
42
- s.value = s.value === e.id ? null : e.id;
43
- }, toggleMenu: (e) => {
44
- a.value = a.value === e.id ? null : e.id;
45
- }, requestDelete: (e) => {
46
- a.value = null, t.pendingDelete = e;
47
- }, confirmDelete: async () => {
48
- !t.pendingDelete || n.value || (n.value = !0, await u(t.pendingDelete), n.value = !1);
49
- }, closeDeleteModal: () => {
50
- n.value || (t.pendingDelete = null);
51
- }, codeOf: (e) => [e.codeBefore, e.codeAfter].filter(Boolean).join(`
52
- `), WpDrawer: B, WpModal: L, InBasicTextInput: k, InButtonV2: b, InIcons: M, InNoData: E, InSkeleton: C };
53
- }
54
- });
55
- export {
56
- J as default
57
- };
@@ -1,17 +0,0 @@
1
- import e from "./DisplayConditionsHost.vue2.js";
2
- import n from "../../../_virtual/_plugin-vue2_normalizer.js";
3
- var r = function() {
4
- var s = this, o = s._self._c, t = s._self._setupProxy;
5
- return o("div", { staticClass: "guido-display-conditions-host" }, [o(t.DisplayConditionCreateDrawer), o(t.DisplayConditionSelectDrawer)], 1);
6
- }, i = [], a = /* @__PURE__ */ n(
7
- e,
8
- r,
9
- i,
10
- !1,
11
- null,
12
- null
13
- );
14
- const p = a.exports;
15
- export {
16
- p as default
17
- };
@@ -1,22 +0,0 @@
1
- import { defineComponent as i, onMounted as s, onBeforeUnmount as m } from "vue";
2
- import { useDisplayConditions as p } from "../../../composables/useDisplayConditions.js";
3
- import { DisplayConditionEvent as n } from "../../../enums/display-condition.js";
4
- import { useDisplayConditionStore as a } from "../../../stores/display-condition.js";
5
- import d from "./DisplayConditionCreateDrawer.vue.js";
6
- import f from "./DisplayConditionSelectDrawer.vue.js";
7
- const E = /* @__PURE__ */ i({
8
- __name: "DisplayConditionsHost",
9
- setup(l) {
10
- const o = a(), { handleOpen: t } = p(), e = (r) => {
11
- t(r.detail);
12
- };
13
- return s(() => {
14
- o.$reset(), document.addEventListener(n.OPEN, e);
15
- }), m(() => {
16
- document.removeEventListener(n.OPEN, e), o.$reset();
17
- }), { __sfc: !0, store: o, handleOpen: t, onOpen: e, DisplayConditionCreateDrawer: d, DisplayConditionSelectDrawer: f };
18
- }
19
- });
20
- export {
21
- E as default
22
- };
@@ -1,102 +0,0 @@
1
- import { useToaster as T } from "./useToaster.js";
2
- import { useTranslations as x } from "./useTranslations.js";
3
- import { DISPLAY_CONDITION_LIMITS as s, DisplayConditionEvent as S } from "../enums/display-condition.js";
4
- import { ToasterTypeOptions as d } from "../enums/toaster.js";
5
- import { useDisplayConditionApi as M } from "../services/displayConditionApi.js";
6
- import { useConfigStore as N } from "../stores/config.js";
7
- import { useDisplayConditionStore as _ } from "../stores/display-condition.js";
8
- import { findInvalidCodeFields as O, nextConditionId as L } from "../utils/displayCondition.js";
9
- import { escapeHtml as B } from "../utils/htmlEscape.js";
10
- import { computed as P } from "vue";
11
- const i = "email-editor.display-conditions", X = 409, y = (n, p, r) => ({
12
- id: L(),
13
- name: n.name.trim(),
14
- description: n.description.trim(),
15
- beforeScript: n.codeBefore,
16
- afterScript: n.codeAfter,
17
- extraData: JSON.stringify(r === void 0 ? { source: p } : { source: p, savedId: r })
18
- }), C = (n) => ({
19
- name: n.name,
20
- description: n.description,
21
- codeBefore: n.codeBefore,
22
- codeAfter: n.codeAfter
23
- }), U = () => {
24
- const n = _(), p = N(), r = M(), o = x(), { showToaster: a } = T(), u = P(() => {
25
- var e;
26
- return (e = p.features) != null && e.liquidSyntax ? "liquid" : "pongo";
27
- }), f = (e) => {
28
- const t = { condition: e };
29
- document.dispatchEvent(new CustomEvent(S.APPLY, { detail: t })), n.close();
30
- }, E = () => {
31
- n.view !== "none" && (document.dispatchEvent(new CustomEvent(S.CANCEL)), n.close());
32
- }, $ = (e) => {
33
- if (e.mode === "select") {
34
- n.openSelect();
35
- return;
36
- }
37
- n.openCreate(e.mode === "edit" ? e.current : null);
38
- }, g = async () => {
39
- n.listStatus = "loading";
40
- try {
41
- n.list = await r.list(u.value), n.listStatus = "loaded";
42
- } catch (e) {
43
- console.warn("Display conditions could not be loaded.", e), n.listStatus = "error";
44
- }
45
- }, h = (e) => {
46
- const t = {}, m = e.name.trim();
47
- m ? m.length < s.NAME_MIN ? t.name = o(`${i}.error-name-min`, { min: s.NAME_MIN }) : m.length > s.NAME_MAX && (t.name = o(`${i}.error-name-max`, { max: s.NAME_MAX })) : t.name = o(`${i}.error-name-required`);
48
- const { DESCRIPTION_MAX: A } = s;
49
- e.description.trim().length > A && (t.description = o(`${i}.error-description-max`, { max: A }));
50
- const D = O(e.codeBefore, e.codeAfter);
51
- return ["codeBefore", "codeAfter"].forEach((c) => {
52
- e[c].trim() ? D.includes(c) ? t[c] = o(`${i}.error-code-invalid`) : e[c].length > s.CODE_MAX && (t[c] = o(`${i}.error-code-max`, { max: s.CODE_MAX })) : t[c] = o(`${i}.error-code-required`);
53
- }), t;
54
- }, I = () => {
55
- a({ type: d.Error, message: o(`${i}.validation-failed`) });
56
- }, l = (e) => ({ name: B(e) }), v = (e, t) => {
57
- e != null && e.authReported || (console.warn(t, e), a({ type: d.Error, message: t }));
58
- };
59
- return {
60
- syntax: u,
61
- handleOpen: $,
62
- cancel: E,
63
- loadList: g,
64
- validate: h,
65
- notifyInvalid: I,
66
- createInline: (e) => {
67
- f(y(e, "inline")), a({
68
- type: d.Success,
69
- message: o(`${i}.created`, l(e.name.trim()))
70
- });
71
- },
72
- createAndSave: async (e) => {
73
- try {
74
- const t = await r.create(e, u.value);
75
- return n.list = [t, ...n.list.filter((m) => m.id !== t.id)], f(y(C(t), "saved", t.id)), a({
76
- type: d.Success,
77
- message: o(`${i}.created-and-saved`, l(t.name))
78
- }), {};
79
- } catch (t) {
80
- return (t == null ? void 0 : t.status) === X ? { name: o(`${i}.error-name-exists`) } : (v(t, o(`${i}.save-failed`, l(e.name.trim()))), null);
81
- }
82
- },
83
- select: (e) => {
84
- f(y(C(e), "saved", e.id)), a({ type: d.Success, message: o(`${i}.applied`, l(e.name)) });
85
- },
86
- deleteSaved: async (e) => {
87
- try {
88
- await r.remove(e.id), n.list = n.list.filter((t) => t.id !== e.id), a({
89
- type: d.Success,
90
- message: o(`${i}.deleted`, l(e.name))
91
- });
92
- } catch (t) {
93
- v(t, o(`${i}.delete-failed`));
94
- } finally {
95
- n.pendingDelete = null;
96
- }
97
- }
98
- };
99
- };
100
- export {
101
- U as useDisplayConditions
102
- };
@@ -1,12 +0,0 @@
1
- var N = /* @__PURE__ */ ((I) => (I.OPEN = "display-condition:open", I.APPLY = "display-condition:apply", I.CANCEL = "display-condition:cancel", I))(N || {}), A = /* @__PURE__ */ ((I) => (I.INLINE = "inline", I.SAVED = "saved", I))(A || {});
2
- const M = {
3
- NAME_MIN: 2,
4
- NAME_MAX: 40,
5
- DESCRIPTION_MAX: 200,
6
- CODE_MAX: 65535
7
- };
8
- export {
9
- M as DISPLAY_CONDITION_LIMITS,
10
- N as DisplayConditionEvent,
11
- A as DisplayConditionSourceType
12
- };
@@ -1,17 +0,0 @@
1
- import { DisplayConditionEvent as e } from "../../enums/display-condition.js";
2
- let n = null;
3
- const p = (E, t) => {
4
- n == null || n();
5
- const i = (o) => {
6
- n == null || n(), t.onApply(o.detail.condition);
7
- }, m = () => {
8
- var o;
9
- n == null || n(), (o = t.onCancel) == null || o.call(t);
10
- };
11
- document.addEventListener(e.APPLY, i), document.addEventListener(e.CANCEL, m), n = () => {
12
- document.removeEventListener(e.APPLY, i), document.removeEventListener(e.CANCEL, m), n = null;
13
- }, document.dispatchEvent(new CustomEvent(e.OPEN, { detail: E }));
14
- };
15
- export {
16
- p as requestDisplayCondition
17
- };
@@ -1,17 +0,0 @@
1
- import { BlockType as o } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- const n = "conditions", t = "guido-display-conditions-control", c = 10, s = [o.STRIPE, o.STRUCTURE, o.CONTAINER], d = {
3
- PLUS: "guido-display-condition-plus",
4
- EDIT: "guido-display-condition-edit",
5
- TRASH: "guido-display-condition-trash",
6
- CHEVRON: "guido-display-condition-chevron"
7
- }, e = ["applyConditionSwitcher", "applyCondition", "displayConditions"], I = "You can add Display Condition by selecting an existing condition or creating a new one to show specific content.", O = "You can create or select a display condition to control content visibility based on your recipients' properties or events.";
8
- export {
9
- O as APPLIED_DESCRIPTION,
10
- e as BUILT_IN_CONDITION_CONTROLS,
11
- t as CONDITIONS_CONTROL_ID,
12
- n as CONDITIONS_TAB_ID,
13
- s as CONDITION_BLOCK_TYPES,
14
- d as CONDITION_ICONS,
15
- I as EMPTY_DESCRIPTION,
16
- c as MAX_COLLAPSED_LINES
17
- };
@@ -1,178 +0,0 @@
1
- var O = Object.defineProperty;
2
- var $ = (o, s, i) => s in o ? O(o, s, { enumerable: !0, configurable: !0, writable: !0, value: i }) : o[s] = i;
3
- var u = (o, s, i) => $(o, typeof s != "symbol" ? s + "" : s, i);
4
- import { CommonControl as S } from "../Blocks/common-control.js";
5
- import { toAppliedCondition as w, parseSource as N } from "../../utils/displayCondition.js";
6
- import { escapeHtml as f } from "../../utils/htmlEscape.js";
7
- import { ModificationDescription as D, UIElementType as b, UEAttr as I } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
8
- import { requestDisplayCondition as E } from "./bridge.js";
9
- import { CONDITIONS_CONTROL_ID as x, APPLIED_DESCRIPTION as M, EMPTY_DESCRIPTION as T, MAX_COLLAPSED_LINES as v, CONDITION_ICONS as g } from "./constants.js";
10
- const r = ".guido-display-conditions", L = { id: 0, name: "", description: "", beforeScript: "", afterScript: "" }, _ = (o) => `<${b.ICON} ${I.ICON.src}="${o}"></${b.ICON}>`, c = (o, s, i, t = !1) => `<button type="button" class="${s}" id="${o}"${t ? " hidden" : ""}>${i}</button>`;
11
- class B extends S {
12
- constructor() {
13
- super(...arguments);
14
- u(this, "expanded", !1);
15
- u(this, "listeners", []);
16
- u(this, "resizeObserver", null);
17
- u(this, "detachOutsideClick", null);
18
- }
19
- getId() {
20
- return x;
21
- }
22
- getTemplate() {
23
- return `
24
- <div class="guido-display-conditions">
25
- <div class="guido-display-conditions__header">
26
- <p class="guido-display-conditions__title">${this.api.translate("Display Conditions")}</p>
27
- <p class="guido-display-conditions__description" data-dc-description></p>
28
- </div>
29
- <div class="guido-display-conditions__empty" data-dc-empty>
30
- ${c(
31
- "guido__btn-add-display-condition",
32
- "guido-display-conditions__add",
33
- `${_(g.PLUS)}<span>${this.api.translate("Add Display Condition")}</span>`
34
- )}
35
- <div class="guido-display-conditions__menu" data-dc-menu hidden>
36
- ${c(
37
- "guido__btn-display-condition-create",
38
- "guido-display-conditions__menu-item",
39
- this.api.translate("Create New Condition")
40
- )}
41
- ${c(
42
- "guido__btn-display-condition-select",
43
- "guido-display-conditions__menu-item",
44
- this.api.translate("Select Saved Condition")
45
- )}
46
- </div>
47
- </div>
48
- <div class="guido-display-conditions__applied" data-dc-applied hidden>
49
- <div class="guido-display-conditions__code-box">
50
- <p class="guido-display-conditions__name" data-dc-name></p>
51
- <div class="guido-display-conditions__sections" data-dc-sections>
52
- <p class="guido-display-conditions__section-label">
53
- ${this.api.translate("Code Before Module")}
54
- </p>
55
- <pre class="guido-display-conditions__code" data-dc-before></pre>
56
- <p class="guido-display-conditions__section-label" data-dc-after-label>
57
- ${this.api.translate("Code After Module")}
58
- </p>
59
- <pre class="guido-display-conditions__code" data-dc-after></pre>
60
- </div>
61
- ${c(
62
- "guido__btn-display-condition-toggle",
63
- "guido-display-conditions__toggle",
64
- `${_(g.CHEVRON)}<span data-dc-toggle-label></span>`,
65
- !0
66
- )}
67
- </div>
68
- <div class="guido-display-conditions__actions">
69
- ${c(
70
- "guido__btn-edit-display-condition",
71
- "guido-display-conditions__action guido-display-conditions__action--edit",
72
- `${_(g.EDIT)}<span>${this.api.translate("Edit")}</span>`
73
- )}
74
- ${c(
75
- "guido__btn-remove-display-condition",
76
- "guido-display-conditions__action guido-display-conditions__action--remove",
77
- `${_(g.TRASH)}<span>${this.api.translate("Remove")}</span>`
78
- )}
79
- </div>
80
- </div>
81
- </div>
82
- `;
83
- }
84
- onRender() {
85
- this.teardown(), this.wire("#guido__btn-add-display-condition", () => this.toggleMenu()), this.wire("#guido__btn-display-condition-create", () => this.openDrawer("create")), this.wire("#guido__btn-display-condition-select", () => this.openDrawer("select")), this.wire("#guido__btn-edit-display-condition", () => this.openDrawer("edit")), this.wire("#guido__btn-remove-display-condition", () => this.applyCondition(null)), this.wire("#guido__btn-display-condition-toggle", () => {
86
- this.expanded = !this.expanded, this.paint();
87
- }), this.observeCodeSize(), this.paint();
88
- }
89
- onTemplateNodeUpdated(i) {
90
- const t = i !== this.currentNode;
91
- super.onTemplateNodeUpdated(i), t && (this.expanded = !1, this.toggleMenu(!1)), this.paint();
92
- }
93
- onDestroy() {
94
- super.onDestroy(), this.teardown();
95
- }
96
- getCondition() {
97
- var t;
98
- const i = this.currentNode;
99
- return w((t = i == null ? void 0 : i.getDisplayCondition) == null ? void 0 : t.call(i));
100
- }
101
- toggleMenu(i) {
102
- var n, d, a;
103
- const t = (n = this.getContainer()) == null ? void 0 : n.querySelector(`${r} [data-dc-menu]`);
104
- if (!t)
105
- return;
106
- t.hidden = i === void 0 ? !t.hidden : !i, (d = this.detachOutsideClick) == null || d.call(this), t.hidden || this.listenOutsideClick();
107
- const e = (a = this.getContainer()) == null ? void 0 : a.querySelector(`${r} #guido__btn-add-display-condition`);
108
- t.style.width = !t.hidden && e ? `${e.getBoundingClientRect().width}px` : "";
109
- }
110
- listenOutsideClick() {
111
- const i = this.getContainer(), t = (e) => {
112
- e.composedPath().some((d) => d instanceof HTMLElement && d.matches(`${r} [data-dc-menu], ${r} #guido__btn-add-display-condition`)) || this.toggleMenu(!1);
113
- };
114
- i == null || i.addEventListener("pointerdown", t, !0), this.detachOutsideClick = () => {
115
- i == null || i.removeEventListener("pointerdown", t, !0), this.detachOutsideClick = null;
116
- };
117
- }
118
- openDrawer(i) {
119
- this.toggleMenu(!1), E(
120
- { mode: i, current: i === "edit" ? this.getCondition() : null },
121
- { onApply: (t) => this.applyCondition(t) }
122
- );
123
- }
124
- applyCondition(i) {
125
- if (!this.currentNode)
126
- return;
127
- const t = this.api.getDocumentModifier().modifyHtml(this.currentNode);
128
- i ? t.setDisplayCondition(i) : t.setDisplayCondition(L), t.apply(new D(
129
- i ? `Set display condition ${i.name}` : "Remove display condition"
130
- ));
131
- }
132
- wire(i, t) {
133
- var n;
134
- const e = (n = this.getContainer()) == null ? void 0 : n.querySelector(`${r} ${i}`);
135
- e && (e.addEventListener("click", t), this.listeners.push({ element: e, handler: t }));
136
- }
137
- teardown() {
138
- var i, t;
139
- this.listeners.forEach(({ element: e, handler: n }) => e.removeEventListener("click", n)), this.listeners = [], (i = this.resizeObserver) == null || i.disconnect(), this.resizeObserver = null, (t = this.detachOutsideClick) == null || t.call(this);
140
- }
141
- // Line counts depend on layout: the panel font loads late and the panel can be resized.
142
- observeCodeSize() {
143
- var t;
144
- const i = (t = this.getContainer()) == null ? void 0 : t.querySelectorAll(`${r} .guido-display-conditions__code`);
145
- !(i != null && i.length) || typeof ResizeObserver > "u" || (this.resizeObserver = new ResizeObserver(() => this.paint()), i.forEach((e) => {
146
- var n;
147
- return (n = this.resizeObserver) == null ? void 0 : n.observe(e);
148
- }));
149
- }
150
- paint() {
151
- var C;
152
- const i = (C = this.getContainer()) == null ? void 0 : C.querySelector(r);
153
- if (!i)
154
- return;
155
- const t = this.getCondition(), e = (h) => i.querySelector(h);
156
- if (e("[data-dc-empty]").hidden = !!t, e("[data-dc-applied]").hidden = !t, e("[data-dc-description]").textContent = this.api.translate(t ? M : T), !t)
157
- return;
158
- e("[data-dc-name]").textContent = t.name, e("#guido__btn-edit-display-condition").hidden = N(t) !== "inline";
159
- const n = e("[data-dc-sections]"), d = e("[data-dc-before]"), a = e("[data-dc-after]");
160
- d.innerHTML = f(t.beforeScript), a.innerHTML = f(t.afterScript), a.hidden = !t.afterScript, e("[data-dc-after-label]").hidden = !t.afterScript, n.style.maxHeight = "";
161
- const l = parseFloat(getComputedStyle(d).lineHeight) || 24, p = (h) => h.hidden ? 0 : Math.round(h.scrollHeight / l), y = p(d) + p(a) > v, m = e("#guido__btn-display-condition-toggle");
162
- m.hidden = !y, m.classList.toggle("is-expanded", this.expanded), e("[data-dc-toggle-label]").textContent = this.api.translate(this.expanded ? "Show Less" : "Show More"), y && !this.expanded && (n.style.maxHeight = `${this.collapsedHeight(n, [d, a], l)}px`);
163
- }
164
- // Labels do not count toward the line limit, so the cut lands after the 10th rendered code line.
165
- collapsedHeight(i, t, e) {
166
- const { top: n } = i.getBoundingClientRect();
167
- let d = v, a = 0;
168
- return t.filter((l) => !l.hidden).forEach((l) => {
169
- if (d <= 0)
170
- return;
171
- const p = Math.min(d, Math.round(l.scrollHeight / e));
172
- a = l.getBoundingClientRect().top - n + p * e, d -= p;
173
- }), a;
174
- }
175
- }
176
- export {
177
- B as DisplayConditionsControl
178
- };
@@ -1,201 +0,0 @@
1
- const n = `.guido-display-conditions {
2
- display: flex;
3
- flex-direction: column;
4
- font-family: inherit;
5
- }
6
-
7
- .guido-display-conditions__header {
8
- padding: 16px;
9
- }
10
-
11
- .guido-display-conditions__title {
12
- margin: 0 0 8px;
13
- color: var(--guido-color-gray-800);
14
- font-size: 16px;
15
- font-weight: 600;
16
- line-height: 24px;
17
- }
18
-
19
- .guido-display-conditions__description {
20
- margin: 0;
21
- color: var(--guido-color-gray-600);
22
- font-size: 13px;
23
- line-height: 16px;
24
- }
25
-
26
- .guido-display-conditions__empty {
27
- padding: 8px 16px 16px;
28
- }
29
-
30
- .guido-display-conditions__add {
31
- display: flex;
32
- gap: 8px;
33
- align-items: center;
34
- justify-content: center;
35
- width: 100%;
36
- height: 40px;
37
- padding: 0 16px;
38
- border: none;
39
- border-radius: 4px;
40
- background: var(--guido-color-primary-100);
41
- color: var(--guido-color-primary-500);
42
- font: inherit;
43
- font-size: 15px;
44
- line-height: 24px;
45
- cursor: pointer;
46
- }
47
-
48
- /* Stripo draws registered icons at 100% of ue-icon-component (Figma: 20px glyph in a 24px box). */
49
- .guido-display-conditions ue-icon-component {
50
- display: inline-flex;
51
- flex-shrink: 0;
52
- align-items: center;
53
- justify-content: center;
54
- width: 24px;
55
- height: 24px;
56
- }
57
-
58
- .guido-display-conditions ue-icon-component svg {
59
- width: 20px;
60
- height: 20px;
61
- }
62
-
63
- .guido-display-conditions__add:hover {
64
- background: var(--guido-color-primary-200);
65
- }
66
-
67
- .guido-display-conditions__add:focus-visible,
68
- .guido-display-conditions__action:focus-visible,
69
- .guido-display-conditions__toggle:focus-visible {
70
- outline: 2px solid var(--guido-color-primary-500);
71
- outline-offset: 2px;
72
- }
73
-
74
- .guido-display-conditions__code-box {
75
- display: flex;
76
- flex-direction: column;
77
- gap: 8px;
78
- padding: 16px;
79
- background: var(--guido-color-gray-0);
80
- }
81
-
82
- .guido-display-conditions__sections {
83
- display: flex;
84
- flex-direction: column;
85
- gap: 8px;
86
- overflow: hidden;
87
- }
88
-
89
- .guido-display-conditions__name,
90
- .guido-display-conditions__section-label {
91
- margin: 0;
92
- color: var(--guido-color-gray-800);
93
- font-size: 15px;
94
- font-weight: 600;
95
- line-height: 24px;
96
- word-break: break-word;
97
- }
98
-
99
- .guido-display-conditions__code {
100
- margin: 0;
101
- color: #101727;
102
- font-family: inherit;
103
- font-size: 15px;
104
- line-height: 24px;
105
- white-space: pre-wrap;
106
- word-break: break-word;
107
- }
108
-
109
- .guido-display-conditions__toggle {
110
- display: inline-flex;
111
- align-items: center;
112
- align-self: flex-start;
113
- padding: 8px 0;
114
- border: none;
115
- background: none;
116
- color: var(--guido-color-primary-500);
117
- font: inherit;
118
- font-size: 15px;
119
- line-height: 24px;
120
- cursor: pointer;
121
- }
122
-
123
- .guido-display-conditions__toggle span {
124
- padding: 0 8px;
125
- }
126
-
127
- .guido-display-conditions__toggle.is-expanded ue-icon-component {
128
- transform: rotate(180deg);
129
- }
130
-
131
- .guido-display-conditions__actions {
132
- display: flex;
133
- gap: 16px;
134
- align-items: center;
135
- height: 48px;
136
- padding: 0 8px;
137
- background: var(--guido-color-white);
138
- }
139
-
140
- .guido-display-conditions__action {
141
- display: inline-flex;
142
- align-items: center;
143
- padding: 8px;
144
- border: none;
145
- background: none;
146
- font: inherit;
147
- font-size: 15px;
148
- line-height: 24px;
149
- cursor: pointer;
150
- }
151
-
152
- .guido-display-conditions__action span {
153
- padding: 0 8px;
154
- }
155
-
156
- .guido-display-conditions__action--edit {
157
- color: var(--guido-color-primary-500);
158
- }
159
-
160
- .guido-display-conditions__action--remove {
161
- color: var(--guido-color-danger-500);
162
- }
163
-
164
- .guido-display-conditions [hidden] {
165
- display: none !important;
166
- }
167
-
168
- /* No positioned ancestor inside Stripo's clipping scroller: the menu keeps its static spot but escapes the clip. */
169
- .guido-display-conditions__menu {
170
- position: absolute;
171
- z-index: 2;
172
- margin-top: 4px;
173
- padding: 4px 0;
174
- border-radius: 4px;
175
- background-color: #FFFFFF;
176
- box-shadow: 0 4px 16px rgba(34, 41, 56, 0.16);
177
- }
178
-
179
- .guido-display-conditions__menu-item {
180
- display: block;
181
- width: 100%;
182
- padding: 8px 16px;
183
- border: 0;
184
- background: none;
185
- color: var(--guido-color-neutral-800);
186
- cursor: pointer;
187
- font: inherit;
188
- font-size: 14px;
189
- line-height: 24px;
190
- text-align: left;
191
- }
192
-
193
- .guido-display-conditions__menu-item:hover,
194
- .guido-display-conditions__menu-item:focus-visible {
195
- background-color: var(--guido-color-neutral-100);
196
- outline: none;
197
- }
198
- `;
199
- export {
200
- n as default
201
- };
@@ -1,28 +0,0 @@
1
- import { ExtensionBuilder as t } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { APPLIED_DESCRIPTION as o, EMPTY_DESCRIPTION as i } from "./constants.js";
3
- import { DisplayConditionsControl as e } from "./control.js";
4
- import n from "./display-conditions.css.js";
5
- import { DisplayConditionsIconsRegistry as s } from "./iconsRegistry.js";
6
- import { DisplayConditionsLibrary as d } from "./library.js";
7
- import { DisplayConditionsSettingsPanel as r } from "./settingsPanel.js";
8
- const S = new t().addControl(e).withIconsRegistry(s).withSettingsPanelRegistry(r).withExternalDisplayCondition(d).withStyles(n).withLocalization({
9
- en: {
10
- Conditions: "Conditions",
11
- "Display Conditions": "Display Conditions",
12
- "Add Display Condition": "Add Display Condition",
13
- "Create New Condition": "Create New Condition",
14
- "Select Saved Condition": "Select Saved Condition",
15
- [i]: i,
16
- [o]: o,
17
- Edit: "Edit",
18
- Remove: "Remove",
19
- "Show More": "Show More",
20
- "Show Less": "Show Less",
21
- "Code Before Module": "Code Before Module",
22
- "Code After Module": "Code After Module",
23
- "Insider Display Conditions": "Insider Display Conditions"
24
- }
25
- }).build();
26
- export {
27
- S as default
28
- };
@@ -1,20 +0,0 @@
1
- import { IconsRegistry as n } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { CONDITION_ICONS as r } from "./constants.js";
3
- const h = 'fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"', s = (t, o, e = 1.3) => `
4
- <svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 ${t} ${t}">
5
- <path d="${o}" ${h} stroke-width="${e}"/>
6
- </svg>`;
7
- class g extends n {
8
- registerIconsSvg(o) {
9
- o[r.PLUS] = s(20, "M10 4v12M4 10h12", 1.5), o[r.EDIT] = s(
10
- 20,
11
- "M3.5 16.5h13M5 12.6 13.1 4.5a1.4 1.4 0 0 1 2 0l.4.4a1.4 1.4 0 0 1 0 2L7.4 15H5v-2.4Z"
12
- ), o[r.TRASH] = s(
13
- 20,
14
- "M3.5 5.5h13M8 5.5V4h4v1.5M5 5.5l.8 11h8.4l.8-11M8.5 8.5v5M11.5 8.5v5"
15
- ), o[r.CHEVRON] = s(20, "m5 7.5 5 5 5-5", 1.5);
16
- }
17
- }
18
- export {
19
- g as DisplayConditionsIconsRegistry
20
- };