@designcrowd/library.brand-page 6.0.19-ast-btns-5 → 6.0.19

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 (167) hide show
  1. package/lib/src/{CreatedOnBrandCrowd-de-de-BtL6m52s.js → CreatedOnBrandCrowd-de-de-DCwwdYPj.js} +1 -1
  2. package/lib/src/{CreatedOnBrandCrowd-en-us-BSLnZqDA.js → CreatedOnBrandCrowd-en-us-DTmZeDQ1.js} +1 -1
  3. package/lib/src/{CreatedOnBrandCrowd-es-es-DJisqEzN.js → CreatedOnBrandCrowd-es-es-Dbrz6TXv.js} +1 -1
  4. package/lib/src/{CreatedOnBrandCrowd-fr-fr-Br0QFIMc.js → CreatedOnBrandCrowd-fr-ca-DLQhgn8T.js} +1 -1
  5. package/lib/src/{CreatedOnBrandCrowd-fr-ca-Br0QFIMc.js → CreatedOnBrandCrowd-fr-fr-DLQhgn8T.js} +1 -1
  6. package/lib/src/{CreatedOnBrandCrowd-pt-pt-DW9cK-UT.js → CreatedOnBrandCrowd-pt-br-yAzzD2ik.js} +1 -1
  7. package/lib/src/{CreatedOnBrandCrowd-pt-br-DW9cK-UT.js → CreatedOnBrandCrowd-pt-pt-yAzzD2ik.js} +1 -1
  8. package/lib/src/{CreatedOnDcom-de-de-C5QJae6P.js → CreatedOnDcom-de-de-CNmNNE5o.js} +1 -1
  9. package/lib/src/{CreatedOnDcom-en-us-9AOMzc5W.js → CreatedOnDcom-en-us-BUmLFlS_.js} +1 -1
  10. package/lib/src/{CreatedOnDcom-es-es-BDi3kJNO.js → CreatedOnDcom-es-es-DfygM_0q.js} +1 -1
  11. package/lib/src/{CreatedOnDcom-fr-ca-BqaQPaNY.js → CreatedOnDcom-fr-ca-DIEft8xE.js} +1 -1
  12. package/lib/src/{CreatedOnDcom-fr-fr-B6zLCUL7.js → CreatedOnDcom-fr-fr-Cn3jWG2n.js} +1 -1
  13. package/lib/src/{CreatedOnDcom-pt-br-DxPwUT6p.js → CreatedOnDcom-pt-br-DXhgGwEh.js} +1 -1
  14. package/lib/src/{CreatedOnDcom-pt-pt-CqYO0kHy.js → CreatedOnDcom-pt-pt-BvE9ckw1.js} +1 -1
  15. package/lib/src/brand-page/components/collapsible/Collapsible.mixin.d.ts +0 -11
  16. package/lib/src/brand-page/components/collapsible/Collapsible.mixin.js +1 -13
  17. package/lib/src/brand-page/components/contact-form/ContactForm.mixin.d.ts +0 -1
  18. package/lib/src/brand-page/components/contact-form/ContactForm.mixin.js +8 -14
  19. package/lib/src/brand-page/components/mailing-list/MailingList.mixin.js +0 -5
  20. package/lib/src/brand-page/components/media/Media.mixin.d.ts +10 -1
  21. package/lib/src/brand-page/components/media/Media.mixin.js +13 -0
  22. package/lib/src/brand-page/components/page/Page.mixin.d.ts +5 -0
  23. package/lib/src/brand-page/components/page/Page.mixin.js +8 -1
  24. package/lib/src/brand-page/components/payment/Payment.mixin.js +0 -5
  25. package/lib/src/brand-page/models/index.d.ts +34 -27
  26. package/lib/src/brand-page/models/payment.model.d.ts +0 -2
  27. package/lib/src/brand-page/utils/button.util.d.ts +0 -5
  28. package/lib/src/brand-page/utils/button.util.js +0 -13
  29. package/lib/src/brand-page/utils/index.d.ts +1 -0
  30. package/lib/src/brand-page/utils/index.js +1 -0
  31. package/lib/src/brand-page/utils/migration/migration-19.js +60 -29
  32. package/lib/src/brand-page/utils/migration.util.js +5 -9
  33. package/lib/src/brand-page/utils/page-heading.util.d.ts +13 -0
  34. package/lib/src/brand-page/utils/page-heading.util.js +24 -0
  35. package/lib/src/brand-page/utils/text.util.d.ts +1 -1
  36. package/lib/src/brand-page/utils/text.util.js +32 -0
  37. package/lib/src/brand-page/utils/vcard.util.js +4 -4
  38. package/lib/src/brand-page/utils/view-model.util.d.ts +1 -0
  39. package/lib/src/brand-page/utils/view-model.util.js +68 -21
  40. package/lib/src/brand-page/view-models.d.ts +3 -3
  41. package/lib/src/brand-page-maker/__fixtures__/complex-rte.fixture.d.ts +22 -0
  42. package/lib/src/brand-page-maker/__fixtures__/complex-rte.fixture.js +22 -0
  43. package/lib/src/brand-page-maker/assessors/contact-form-visibility.assessor.d.ts +0 -1
  44. package/lib/src/brand-page-maker/assessors/contact-form-visibility.assessor.js +0 -6
  45. package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts +1 -0
  46. package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.d.ts +14 -0
  47. package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.js +39 -0
  48. package/lib/src/brand-page-maker/composables/rich-text-editor/getRteExtensions.d.ts +28 -0
  49. package/lib/src/brand-page-maker/composables/rich-text-editor/getRteExtensions.js +66 -0
  50. package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.js +21 -100
  51. package/lib/src/brand-page-maker/constants/config-settings-constant.js +3 -40
  52. package/lib/src/brand-page-maker/default-getters/index.d.ts +0 -1
  53. package/lib/src/brand-page-maker/default-getters/index.js +0 -1
  54. package/lib/src/brand-page-maker/models/button-styles-config.js +3 -15
  55. package/lib/src/brand-page-maker/models/content-settings-configs.d.ts +1 -1
  56. package/lib/src/brand-page-maker/models/content-settings.js +3 -9
  57. package/lib/src/brand-page-maker/utils/index.d.ts +2 -0
  58. package/lib/src/brand-page-maker/utils/index.js +2 -0
  59. package/lib/src/brand-page-maker/utils/rich-text-editor.util.d.ts +19 -5
  60. package/lib/src/brand-page-maker/utils/rich-text-editor.util.js +35 -5
  61. package/lib/src/brand-page-maker/utils/rte-render.util.d.ts +33 -0
  62. package/lib/src/brand-page-maker/utils/rte-render.util.js +50 -0
  63. package/lib/src/brand-page-maker/utils/rte-sanitize.util.d.ts +6 -0
  64. package/lib/src/brand-page-maker/utils/rte-sanitize.util.js +158 -0
  65. package/lib/src/brand-page-maker/utils/rte-serializer.d.ts +5 -0
  66. package/lib/src/brand-page-maker/utils/rte-serializer.js +112 -0
  67. package/lib/src/brand-page-maker/validators/field.validator.js +10 -2
  68. package/lib/src/css/library.brand-page-brandCrowd.min.css +189 -217
  69. package/lib/src/css/library.brand-page-brandPage.min.css +189 -217
  70. package/lib/src/css/library.brand-page-designCom.min.css +189 -217
  71. package/lib/src/css/library.brand-page-preview.min.css +189 -217
  72. package/lib/src/index.d.ts +1 -0
  73. package/lib/src/index.mjs +143 -138
  74. package/lib/src/{lib-C-uekd4C.js → lib-Bm-fYap1.js} +43780 -43825
  75. package/lib/src/lib.js +2 -0
  76. package/lib/src/metadata-builder/builders/update-content-text-builder.js +20 -15
  77. package/lib/src/metadata-builder/builders/update-content-text-style-builder.js +8 -3
  78. package/lib/src/metadata-builder/helpers/rte.helpers.d.ts +2 -2
  79. package/lib/src/metadata-builder/helpers/rte.helpers.js +6 -3
  80. package/lib/src/shared/content-settings/components/GenericTextInput.mixin.js +14 -1
  81. package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.js +12 -8
  82. package/lib/src/utils/minify-brand-page-metadata.js +4 -1
  83. package/package.json +2 -2
  84. package/src/brand-page/components/about-section/AboutSection.vue +1 -1
  85. package/src/brand-page/components/about-section/AboutSection.vue.test.ts +11 -0
  86. package/src/brand-page/components/banner-section/BannerSection.vue +5 -5
  87. package/src/brand-page/components/booking-section/BookingSection.vue +1 -1
  88. package/src/brand-page/components/button/ButtonStyleWrapper.vue +44 -112
  89. package/src/brand-page/components/collapsible/Collapsible.mixin.ts +1 -14
  90. package/src/brand-page/components/contact-form/ContactForm.mixin.test.ts +0 -18
  91. package/src/brand-page/components/contact-form/ContactForm.mixin.ts +8 -17
  92. package/src/brand-page/components/contact-form/ContactForm.vue +39 -100
  93. package/src/brand-page/components/mailing-list/MailingList.mixin.ts +0 -6
  94. package/src/brand-page/components/mailing-list/MailingList.vue +11 -19
  95. package/src/brand-page/components/media/Media.mixin.ts +13 -0
  96. package/src/brand-page/components/media/Media.test.ts +65 -0
  97. package/src/brand-page/components/media/Media.vue +1 -1
  98. package/src/brand-page/components/page/Page.mixin.ts +8 -1
  99. package/src/brand-page/components/page/Page.vue +8 -0
  100. package/src/brand-page/components/page/Page.vue.test.ts +142 -0
  101. package/src/brand-page/components/payment/Payment.mixin.ts +0 -6
  102. package/src/brand-page/components/payment/Payment.vue +25 -44
  103. package/src/brand-page/components/payment/RequestPaymentStripe.vue +22 -26
  104. package/src/brand-page/components/profile/Profile.vue +1 -1
  105. package/src/brand-page/components/shop/Shop.vue +6 -15
  106. package/src/brand-page/components/social-links/SocialLinks.vue +1 -1
  107. package/src/brand-page/components/testimonial-section/TestimonialSection.vue +1 -1
  108. package/src/brand-page/components/text-media-section/TextMediaSection.vue +1 -1
  109. package/src/brand-page/components/text-wrapper/TextWrapper.vue +23 -7
  110. package/src/brand-page/models/index.ts +35 -27
  111. package/src/brand-page/models/payment.model.ts +0 -2
  112. package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap +3 -3
  113. package/src/brand-page/utils/button.util.ts +0 -17
  114. package/src/brand-page/utils/image.util.test.ts +25 -0
  115. package/src/brand-page/utils/index.ts +1 -0
  116. package/src/brand-page/utils/migration/migration-19.test.ts +47 -90
  117. package/src/brand-page/utils/migration/migration-19.ts +61 -34
  118. package/src/brand-page/utils/migration.util.ts +5 -10
  119. package/src/brand-page/utils/page-heading.util.test.ts +116 -0
  120. package/src/brand-page/utils/page-heading.util.ts +33 -0
  121. package/src/brand-page/utils/style.util.test.ts +51 -0
  122. package/src/brand-page/utils/text.util.test.ts +47 -0
  123. package/src/brand-page/utils/text.util.ts +43 -4
  124. package/src/brand-page/utils/vcard.util.ts +6 -4
  125. package/src/brand-page/utils/view-model.pageid-rte.test.ts +104 -0
  126. package/src/brand-page/utils/view-model.util.ts +94 -27
  127. package/src/brand-page/view-models.ts +3 -2
  128. package/src/brand-page-maker/__fixtures__/complex-rte.fixture.ts +23 -0
  129. package/src/brand-page-maker/assessors/contact-form-visibility.assessor.ts +0 -11
  130. package/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.test.ts +52 -0
  131. package/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.ts +42 -0
  132. package/src/brand-page-maker/composables/rich-text-editor/getRteExtensions.ts +113 -0
  133. package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts +23 -107
  134. package/src/brand-page-maker/constants/config-settings-constant.ts +2 -43
  135. package/src/brand-page-maker/default-getters/index.ts +0 -1
  136. package/src/brand-page-maker/models/button-styles-config.ts +3 -15
  137. package/src/brand-page-maker/models/content-settings-configs.ts +1 -1
  138. package/src/brand-page-maker/models/content-settings.ts +3 -10
  139. package/src/brand-page-maker/utils/__snapshots__/rte-render-parity.test.ts.snap +200 -0
  140. package/src/brand-page-maker/utils/index.ts +2 -0
  141. package/src/brand-page-maker/utils/rich-text-editor.util.test.ts +4 -3
  142. package/src/brand-page-maker/utils/rich-text-editor.util.ts +50 -11
  143. package/src/brand-page-maker/utils/rte-features.test.ts +330 -0
  144. package/src/brand-page-maker/utils/rte-render-parity.test.ts +156 -0
  145. package/src/brand-page-maker/utils/rte-render.util.ts +77 -0
  146. package/src/brand-page-maker/utils/rte-sanitize-json.test.ts +158 -0
  147. package/src/brand-page-maker/utils/rte-sanitize.util.ts +195 -0
  148. package/src/brand-page-maker/utils/rte-serializer.ts +172 -0
  149. package/src/brand-page-maker/validators/field.validator.test.ts +55 -0
  150. package/src/brand-page-maker/validators/field.validator.ts +10 -2
  151. package/src/lib.ts +9 -0
  152. package/src/metadata-builder/builders/update-content-text-builder.ts +32 -18
  153. package/src/metadata-builder/builders/update-content-text-style-builder.ts +14 -4
  154. package/src/metadata-builder/helpers/rte.helpers.ts +11 -7
  155. package/src/shared/content-settings/components/GenericTextInput.mixin.ts +17 -1
  156. package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.ts +16 -9
  157. package/src/shared/logo-settings/components/EditLogoSettings.vue +1 -0
  158. package/src/shared/style-settings/components/StyleSettings.vue +0 -1
  159. package/src/utils/minify-brand-page-metadata.ts +4 -1
  160. package/lib/src/brand-page/utils/migration/migration-20.d.ts +0 -2
  161. package/lib/src/brand-page/utils/migration/migration-20.js +0 -24
  162. package/lib/src/brand-page-maker/default-getters/contact-form-card-color.default-getter.d.ts +0 -8
  163. package/lib/src/brand-page-maker/default-getters/contact-form-card-color.default-getter.js +0 -16
  164. package/src/brand-page/components/button/ButtonStyleWrapper.vue.test.ts +0 -167
  165. package/src/brand-page/utils/migration/migration-20.test.ts +0 -118
  166. package/src/brand-page/utils/migration/migration-20.ts +0 -54
  167. package/src/brand-page-maker/default-getters/contact-form-card-color.default-getter.ts +0 -23
@@ -1,5 +1,5 @@
1
1
  import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
2
- import { _ as t } from "./lib-C-uekd4C.js";
2
+ import { _ as t } from "./lib-Bm-fYap1.js";
3
3
  const i = {}, h = {
4
4
  width: "275",
5
5
  height: "36",
@@ -1,5 +1,5 @@
1
1
  import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
2
- import { _ as t } from "./lib-C-uekd4C.js";
2
+ import { _ as t } from "./lib-Bm-fYap1.js";
3
3
  const i = {}, h = {
4
4
  width: "251",
5
5
  height: "36",
@@ -1,5 +1,5 @@
1
1
  import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
2
- import { _ as t } from "./lib-C-uekd4C.js";
2
+ import { _ as t } from "./lib-Bm-fYap1.js";
3
3
  const i = {}, h = {
4
4
  width: "250",
5
5
  height: "36",
@@ -1,5 +1,5 @@
1
1
  import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
2
- import { _ as t } from "./lib-C-uekd4C.js";
2
+ import { _ as t } from "./lib-Bm-fYap1.js";
3
3
  const i = {}, h = {
4
4
  width: "237",
5
5
  height: "36",
@@ -1,5 +1,5 @@
1
1
  import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
2
- import { _ as t } from "./lib-C-uekd4C.js";
2
+ import { _ as t } from "./lib-Bm-fYap1.js";
3
3
  const i = {}, h = {
4
4
  width: "237",
5
5
  height: "36",
@@ -1,5 +1,5 @@
1
1
  import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
2
- import { _ as t } from "./lib-C-uekd4C.js";
2
+ import { _ as t } from "./lib-Bm-fYap1.js";
3
3
  const i = {}, h = {
4
4
  width: "263",
5
5
  height: "36",
@@ -1,5 +1,5 @@
1
1
  import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
2
- import { _ as t } from "./lib-C-uekd4C.js";
2
+ import { _ as t } from "./lib-Bm-fYap1.js";
3
3
  const i = {}, h = {
4
4
  width: "263",
5
5
  height: "36",
@@ -1,5 +1,5 @@
1
1
  import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
2
- import { _ as e } from "./lib-C-uekd4C.js";
2
+ import { _ as e } from "./lib-Bm-fYap1.js";
3
3
  const M = {}, Z = {
4
4
  width: "242",
5
5
  height: "36",
@@ -1,5 +1,5 @@
1
1
  import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
2
- import { _ as e } from "./lib-C-uekd4C.js";
2
+ import { _ as e } from "./lib-Bm-fYap1.js";
3
3
  const i = {}, M = {
4
4
  width: "231",
5
5
  height: "36",
@@ -1,5 +1,5 @@
1
1
  import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
2
- import { _ as e } from "./lib-C-uekd4C.js";
2
+ import { _ as e } from "./lib-Bm-fYap1.js";
3
3
  const M = {}, Z = {
4
4
  width: "230",
5
5
  height: "36",
@@ -1,5 +1,5 @@
1
1
  import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
2
- import { _ as e } from "./lib-C-uekd4C.js";
2
+ import { _ as e } from "./lib-Bm-fYap1.js";
3
3
  const i = {}, l = {
4
4
  width: "216",
5
5
  height: "36",
@@ -1,5 +1,5 @@
1
1
  import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
2
- import { _ as e } from "./lib-C-uekd4C.js";
2
+ import { _ as e } from "./lib-Bm-fYap1.js";
3
3
  const i = {}, l = {
4
4
  width: "216",
5
5
  height: "36",
@@ -1,5 +1,5 @@
1
1
  import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
2
- import { _ as M } from "./lib-C-uekd4C.js";
2
+ import { _ as M } from "./lib-Bm-fYap1.js";
3
3
  const Z = {}, e = {
4
4
  width: "232",
5
5
  height: "36",
@@ -1,5 +1,5 @@
1
1
  import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
2
- import { _ as M } from "./lib-C-uekd4C.js";
2
+ import { _ as M } from "./lib-Bm-fYap1.js";
3
3
  const Z = {}, e = {
4
4
  width: "232",
5
5
  height: "36",
@@ -25,11 +25,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
25
25
  required: false;
26
26
  default: undefined;
27
27
  };
28
- backgroundStyle: {
29
- type: PropType<BrandPageCssStyle>;
30
- required: false;
31
- default: undefined;
32
- };
33
28
  context: {
34
29
  type: PropType<BrandPageContext>;
35
30
  required: true;
@@ -66,11 +61,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
66
61
  required: false;
67
62
  default: undefined;
68
63
  };
69
- backgroundStyle: {
70
- type: PropType<BrandPageCssStyle>;
71
- required: false;
72
- default: undefined;
73
- };
74
64
  context: {
75
65
  type: PropType<BrandPageContext>;
76
66
  required: true;
@@ -78,7 +68,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
78
68
  }>> & Readonly<{}>, {
79
69
  titleStyle: BrandPageCssStyle;
80
70
  cardStyle: BrandPageCssStyle;
81
- backgroundStyle: BrandPageCssStyle;
82
71
  buttonStyles: BrandPageCssStyle;
83
72
  canCollapse: boolean;
84
73
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -25,11 +25,6 @@ export default defineComponent({
25
25
  required: false,
26
26
  default: undefined,
27
27
  },
28
- backgroundStyle: {
29
- type: Object,
30
- required: false,
31
- default: undefined,
32
- },
33
28
  context: {
34
29
  type: Object,
35
30
  required: true,
@@ -45,16 +40,9 @@ export default defineComponent({
45
40
  if (borderRadius === '9999px') {
46
41
  containerStyle.borderRadius = '26px';
47
42
  }
48
- // Guarded on backgroundColor so an empty {} never blanks the container
49
- // (BP/BC contact-form card colour defaults to the button fill).
50
- if (this.cardStyle?.backgroundColor) {
43
+ if (this.cardStyle) {
51
44
  containerStyle.backgroundColor = this.cardStyle.backgroundColor;
52
45
  }
53
- // Own background colour decouples the container from the button fill (BP-5800).
54
- // Guarded on backgroundColor so an empty {} never blanks the container.
55
- if (this.backgroundStyle?.backgroundColor) {
56
- containerStyle.backgroundColor = this.backgroundStyle.backgroundColor;
57
- }
58
46
  return containerStyle;
59
47
  },
60
48
  arrowStyle() {
@@ -43,7 +43,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
43
43
  isSubmitting: boolean;
44
44
  submitError: string | undefined;
45
45
  }, {
46
- isDecorativeSubmitStyle(): boolean;
47
46
  submitButtonStyle(): BrandPageCssStyle;
48
47
  submitButtonTextStyle(): BrandPageCssStyle;
49
48
  contentPaddingStyle(): {
@@ -1,12 +1,11 @@
1
1
  import { defineComponent } from 'vue';
2
2
  import { FORM_FIELD_TYPES } from '@brand-page/models';
3
3
  import { getEmailValidationError, getMessageValidationError, getNameValidationError, getPhoneValidationError, } from '@brand-page/utils';
4
- import { isDecorativeButtonStyle } from '../../utils/button.util';
5
4
  import brandPageClient from '../../clients/brand-page.client';
6
5
  import { isEmail } from '../../../utils/validator.util';
7
6
  import { ALIGN_CARD_CENTER, ALIGN_CARD_CENTER_IMAGE, ALIGN_CENTERED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, DISPLAY_STYLE_COLLAPSED, RECAPTCHA_ACTION_CONTACT_FORM, TEXT_ONLY, } from '../../constants';
8
7
  import { getRenderText, contentPaddingStyle as toContentPaddingStyle, mutedTextForBackground, backgroundColorFromStyle, } from '@brand-page/utils';
9
- import { hasRTEContent } from '@brand-page-maker/utils';
8
+ import { hasRTEContent, getPlainTextFromRTE } from '@brand-page-maker/utils';
10
9
  import { useReCaptcha } from '../../composables/recaptcha.composable';
11
10
  export default defineComponent({
12
11
  props: {
@@ -45,12 +44,6 @@ export default defineComponent({
45
44
  submitError: undefined,
46
45
  }),
47
46
  computed: {
48
- // Decorative styles (brushstroke/arrow/paper) render a shape that needs width
49
- // to read — at pure w-fit the arrow chevron collapses. Give the submit button a
50
- // ~200px min-width so the decoration looks intentional without going full-width.
51
- isDecorativeSubmitStyle() {
52
- return isDecorativeButtonStyle(this.viewModel.buttonStyles?.selectedButtonStyleId);
53
- },
54
47
  submitButtonStyle() {
55
48
  const buttonStyle = { ...this.viewModel.buttonStyles?.style };
56
49
  const buttonTextStyle = {
@@ -120,7 +113,10 @@ export default defineComponent({
120
113
  isEmail(this.viewModel.responseEmail));
121
114
  },
122
115
  title() {
123
- return this.viewModel.title && this.viewModel.title.trim() !== ''
116
+ // BP-5787: title may be RTE JSON (not a string), so `.trim()` would
117
+ // throw — read the visible text via getPlainTextFromRTE to decide
118
+ // whether to fall back to the default.
119
+ return getPlainTextFromRTE(this.viewModel.title)
124
120
  ? this.viewModel.title
125
121
  : 'Contact Us';
126
122
  },
@@ -158,8 +154,8 @@ export default defineComponent({
158
154
  // differs by website type:
159
155
  // - brandSite: the card style (card + divided layouts) or the section
160
156
  // background (other layouts).
161
- // - brand.page / brand.contact: the container is the collapsible, whose
162
- // colour is the card colour (defaulting to the global button fill).
157
+ // - brand.page / brand.contact: there's no section background, so the
158
+ // coloured surface is the global button fill.
163
159
  // Falls back to the title colour when there's no solid colour to anchor to.
164
160
  const style = this.context.isBrandSite
165
161
  ? this.hasCard || this.isDividedContent
@@ -167,9 +163,7 @@ export default defineComponent({
167
163
  : this.hasBgColor
168
164
  ? this.viewModel.backgroundStyle
169
165
  : undefined
170
- : this.viewModel.cardStyle?.backgroundColor
171
- ? this.viewModel.cardStyle
172
- : this.viewModel.buttonStyles?.style;
166
+ : this.viewModel.buttonStyles?.style;
173
167
  return (mutedTextForBackground(backgroundColorFromStyle(style)) ??
174
168
  this.viewModel.titleStyle?.color);
175
169
  },
@@ -94,11 +94,6 @@ export default defineComponent({
94
94
  if (borderRadius === '9999px') {
95
95
  buttonStyle.borderRadius = '24px';
96
96
  }
97
- // Own background colour decouples the container from the button fill (BP-5800).
98
- if (this.viewModel.backgroundStyle?.backgroundColor) {
99
- buttonStyle.backgroundColor =
100
- this.viewModel.backgroundStyle.backgroundColor;
101
- }
102
97
  return buttonStyle;
103
98
  },
104
99
  isFormDisabled() {
@@ -68,7 +68,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
68
68
  }>, {}, {
69
69
  type: string | undefined;
70
70
  isImageBroken: boolean;
71
- }, {}, {
71
+ }, {
72
+ /**
73
+ * BP-5866: content images must never emit an empty `alt`. Reuses the
74
+ * shared alt fallback (author title → "{business}'s image" → "image") so
75
+ * a caller that passes no `alt-text` still renders descriptive text.
76
+ * Only consumed by the content `<FallbackImage>`; decorative/background
77
+ * images (rendered via `media`) and shapes never reach this path.
78
+ */
79
+ effectiveAltText(): string;
80
+ }, {
72
81
  onImageError(): void;
73
82
  }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
74
83
  mediaType: {
@@ -1,4 +1,5 @@
1
1
  import { defineComponent } from 'vue';
2
+ import { getImageAltText } from '@brand-page/utils';
2
3
  export default defineComponent({
3
4
  props: {
4
5
  mediaType: {
@@ -71,6 +72,18 @@ export default defineComponent({
71
72
  isImageBroken: false,
72
73
  };
73
74
  },
75
+ computed: {
76
+ /**
77
+ * BP-5866: content images must never emit an empty `alt`. Reuses the
78
+ * shared alt fallback (author title → "{business}'s image" → "image") so
79
+ * a caller that passes no `alt-text` still renders descriptive text.
80
+ * Only consumed by the content `<FallbackImage>`; decorative/background
81
+ * images (rendered via `media`) and shapes never reach this path.
82
+ */
83
+ effectiveAltText() {
84
+ return getImageAltText({ imageTitle: this.altText }, this.context);
85
+ },
86
+ },
74
87
  methods: {
75
88
  onImageError() {
76
89
  this.isImageBroken = true;
@@ -75,6 +75,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
75
75
  bpShowTopNavigationMobile(): boolean;
76
76
  bpShowTopNavigationDesktop(): boolean;
77
77
  slug(): string;
78
+ /**
79
+ * Text for the single page-level `<h1>` (BP-5866). Sourced from the
80
+ * business/site name + page name so it mirrors the SSR document `<title>`.
81
+ */
82
+ pageHeadingText(): string;
78
83
  shouldShowSaveContactWidget(): boolean;
79
84
  isPremiumSubscription(): boolean;
80
85
  shouldShowPopupBranding(): boolean;
@@ -1,6 +1,6 @@
1
1
  import { defineComponent } from 'vue';
2
2
  import { DEFAULT_FONT_FAMILY_KEY, FALLBACK_FONT_FAMILIES, FONT_FAMILY_CONFIGS, } from '../../constants';
3
- import { getSlugFromContext } from '@brand-page/utils';
3
+ import { getSlugFromContext, getPageHeadingText } from '@brand-page/utils';
4
4
  import { findNavItemByRelativePath } from '@brand-page/utils/route.util';
5
5
  import { BRAND_PAGE_TYPES } from '@brand-page/models';
6
6
  import { hasProfileContent as checkHasProfileContent } from '@brand-page/utils/vcard.util';
@@ -292,6 +292,13 @@ export default defineComponent({
292
292
  slug() {
293
293
  return getSlugFromContext(this.context);
294
294
  },
295
+ /**
296
+ * Text for the single page-level `<h1>` (BP-5866). Sourced from the
297
+ * business/site name + page name so it mirrors the SSR document `<title>`.
298
+ */
299
+ pageHeadingText() {
300
+ return getPageHeadingText(this.context);
301
+ },
295
302
  shouldShowSaveContactWidget() {
296
303
  try {
297
304
  if ((!this.context.isPreview &&
@@ -77,11 +77,6 @@ export default defineComponent({
77
77
  if (borderRadius === '9999px') {
78
78
  buttonStyle.borderRadius = '26px';
79
79
  }
80
- // Own background colour decouples the container from the button fill (BP-5800).
81
- if (this.viewModel.backgroundStyle?.backgroundColor) {
82
- buttonStyle.backgroundColor =
83
- this.viewModel.backgroundStyle.backgroundColor;
84
- }
85
80
  return buttonStyle;
86
81
  },
87
82
  continueButtonStyle() {
@@ -7,6 +7,14 @@ import { TextStyles } from './styles.model';
7
7
  import { LogoStyles } from './logo.model';
8
8
  import type { LogoImageModel, LogoTemplateImageModel } from './logo.model';
9
9
  import type { BrandPagePaymentConfig } from './payment.model';
10
+ import type { JSONContent } from '@tiptap/vue-3';
11
+ /**
12
+ * BP-5787 — a rich-text field is either a legacy inline-HTML string or a
13
+ * Tiptap JSON document. Typing RTE content fields as RichTextValue (instead of
14
+ * `string`) forces every consumer to handle both forms — surfacing at compile
15
+ * time any code that assumes a plain string (e.g. `.replace`, `.length`).
16
+ */
17
+ export type RichTextValue = string | JSONContent;
10
18
  export * from './brand-page-context.model';
11
19
  export * from './payment.model';
12
20
  export * from './content.model';
@@ -148,7 +156,7 @@ export interface TextContent extends Content {
148
156
  /**
149
157
  * For BrandPage/BrandContact only
150
158
  */
151
- text: string;
159
+ text: RichTextValue;
152
160
  /**
153
161
  * For BrandSite
154
162
  */
@@ -171,9 +179,9 @@ export interface TextContent extends Content {
171
179
  }
172
180
  export interface ProfileContent extends Content {
173
181
  avatarImageUrl: string;
174
- name: string;
175
- title: string;
176
- description: string;
182
+ name: RichTextValue;
183
+ title: RichTextValue;
184
+ description: RichTextValue;
177
185
  backgroundColor: BrandPageCssStyle;
178
186
  colorReplacements: ColorReplacement[];
179
187
  mediaType?: string;
@@ -191,11 +199,10 @@ export interface MapContent extends Content {
191
199
  }
192
200
  export interface MailingListContent extends Content {
193
201
  acceptedFields?: 'emailOnly' | 'nameAndEmail';
194
- title: string;
202
+ title: RichTextValue;
195
203
  buttonText: string;
196
204
  titleStyle: TextStyleDeclaration;
197
205
  buttonTextStyle: TextStyleDeclaration;
198
- backgroundStyle?: BrandPageCssStyle;
199
206
  }
200
207
  export declare const FORM_FIELD_TYPES: {
201
208
  readonly text: "text";
@@ -243,10 +250,10 @@ export interface FormField {
243
250
  export interface ContactFormContent extends Content {
244
251
  type: 'contact-form';
245
252
  displayStyle: string;
246
- title: string;
247
- description: string;
253
+ title: RichTextValue;
254
+ description: RichTextValue;
248
255
  buttonText: string;
249
- successMessage: string;
256
+ successMessage: RichTextValue;
250
257
  fields: FormField[];
251
258
  responseEmail: string;
252
259
  imageUrl?: string;
@@ -265,8 +272,8 @@ export interface ContactFormContent extends Content {
265
272
  export interface BannerSectionContent extends Content {
266
273
  type: 'banner-section';
267
274
  imageUrl: string;
268
- title: string;
269
- description: string;
275
+ title: RichTextValue;
276
+ description: RichTextValue;
270
277
  buttonText: string | false;
271
278
  url: string;
272
279
  email?: string;
@@ -293,8 +300,8 @@ export declare const MEDIA_TYPES: {
293
300
  };
294
301
  export type MediaType = keyof typeof MEDIA_TYPES;
295
302
  export interface TextMediaItem extends ImageItem {
296
- title: string;
297
- paragraph: string;
303
+ title: RichTextValue;
304
+ paragraph: RichTextValue;
298
305
  itemsId: number;
299
306
  buttonText?: string | false;
300
307
  buttonPageId?: string;
@@ -313,8 +320,8 @@ export interface TextShapeItem extends TextMediaItem {
313
320
  export interface ShapeItem extends ImageItem {
314
321
  colorReplacements: ColorReplacement[];
315
322
  mediaType: MediaType;
316
- title?: string;
317
- paragraph?: string;
323
+ title?: RichTextValue;
324
+ paragraph?: RichTextValue;
318
325
  titleOverride?: string;
319
326
  paragraphOverride?: string;
320
327
  }
@@ -322,9 +329,9 @@ export interface TestimonialItems {
322
329
  /** Stable per-item identifier. See ImageItem.id. */
323
330
  id: string;
324
331
  imageUrl: string;
325
- name: string;
326
- position: string;
327
- testimonials: string;
332
+ name: RichTextValue;
333
+ position: RichTextValue;
334
+ testimonials: RichTextValue;
328
335
  colorReplacements: ColorReplacement[];
329
336
  mediaType: string;
330
337
  size?: string;
@@ -337,7 +344,7 @@ export interface TestimonialItems {
337
344
  export interface TextItem {
338
345
  /** Stable per-item identifier. See ImageItem.id. */
339
346
  id: string;
340
- text: string;
347
+ text: RichTextValue;
341
348
  textStyle: TextStyleDeclaration;
342
349
  textOverride?: string;
343
350
  }
@@ -354,8 +361,8 @@ export interface ImagesSectionContent extends Content, MediaSection {
354
361
  enablePopup: boolean;
355
362
  }
356
363
  export interface MediaSection extends Content {
357
- title: string;
358
- description: string;
364
+ title: RichTextValue;
365
+ description: RichTextValue;
359
366
  displayStyle: ImagesSectionContentDisplayStyle;
360
367
  items: TextShapeItem[] | TextMediaItem[];
361
368
  titleStyle: TextStyleDeclaration;
@@ -372,7 +379,7 @@ export interface ColorReplacement {
372
379
  }
373
380
  export interface TestimonialSectionContent extends Content {
374
381
  type: 'testimonial-section';
375
- title: string;
382
+ title: RichTextValue;
376
383
  displayStyle: string;
377
384
  items: TestimonialItems[];
378
385
  titleStyle: TextStyleDeclaration;
@@ -386,8 +393,8 @@ export interface TestimonialSectionContent extends Content {
386
393
  export interface AboutSectionContent extends Content {
387
394
  type: 'about-section';
388
395
  imageUrl: string;
389
- title: string;
390
- paragraph: string;
396
+ title: RichTextValue;
397
+ paragraph: RichTextValue;
391
398
  displayStyle: string;
392
399
  titleStyle: TextStyleDeclaration;
393
400
  paragraphStyle: TextStyleDeclaration;
@@ -411,7 +418,7 @@ export declare const SOCIAL_LINKS_ICON_DISPLAY_STYLES: {
411
418
  export type SocialLinksIconDisplayStyle = keyof typeof SOCIAL_LINKS_ICON_DISPLAY_STYLES;
412
419
  export interface SocialLinksContent extends Content {
413
420
  type: 'social-links';
414
- title: string;
421
+ title: RichTextValue;
415
422
  links: LinksItem[];
416
423
  iconDisplayStyle: SocialLinksIconDisplayStyle;
417
424
  iconFillStyles: BrandPageCssStyle;
@@ -434,8 +441,8 @@ export interface DividerSectionContent extends Content {
434
441
  }
435
442
  export interface BookingSectionContent extends Content {
436
443
  type: 'booking-section';
437
- title: string;
438
- description: string;
444
+ title: RichTextValue;
445
+ description: RichTextValue;
439
446
  buttonText: string;
440
447
  url: string;
441
448
  email?: string;
@@ -134,7 +134,6 @@ export interface RequestPaymentContent extends Content {
134
134
  descriptionStyle?: TextStyleDeclaration;
135
135
  itemTextStyle: TextStyleDeclaration;
136
136
  buttonTextStyle?: TextStyleDeclaration;
137
- backgroundStyle?: BrandPageCssStyle;
138
137
  }
139
138
  export interface ShopContentConfig extends PaymentConfig {
140
139
  paymentOptionDisplayType: PaymentOptionDisplayType;
@@ -175,7 +174,6 @@ export interface SupportMeContent extends Content {
175
174
  descriptionStyle: TextStyleDeclaration;
176
175
  buttonTextStyle: TextStyleDeclaration;
177
176
  itemTextStyle: TextStyleDeclaration;
178
- backgroundStyle?: BrandPageCssStyle;
179
177
  }
180
178
  export interface CreateStripePaymentIntentResponse {
181
179
  paymentIntent: StripePaymentIntent;
@@ -5,8 +5,3 @@ import type { ButtonStyles } from '../models';
5
5
  * @returns The calculated box shadow CSS value
6
6
  */
7
7
  export declare const getBoxShadowValue: (buttonStyles: ButtonStyles) => string;
8
- export declare const BUTTON_STYLE_BRUSHSTROKE = "BUTTON_STYLE_19";
9
- export declare const BUTTON_STYLE_ARROW = "BUTTON_STYLE_20";
10
- export declare const BUTTON_STYLE_PAPER = "BUTTON_STYLE_21";
11
- export declare const DECORATIVE_BUTTON_STYLE_IDS: string[];
12
- export declare const isDecorativeButtonStyle: (styleId?: string) => boolean;
@@ -27,16 +27,3 @@ export const getBoxShadowValue = (buttonStyles) => {
27
27
  }
28
28
  return boxShadowValue;
29
29
  };
30
- // The "decorative" button styles — brushstroke / arrow / torn-paper — whose visual
31
- // is drawn by ButtonStyleWrapper rather than plain CSS. Their banner-like SVG
32
- // decoration needs the button to be reasonably wide to render legibly, so narrow
33
- // (w-fit) hosts should widen when one of these is active (BP-5800).
34
- export const BUTTON_STYLE_BRUSHSTROKE = 'BUTTON_STYLE_19';
35
- export const BUTTON_STYLE_ARROW = 'BUTTON_STYLE_20';
36
- export const BUTTON_STYLE_PAPER = 'BUTTON_STYLE_21';
37
- export const DECORATIVE_BUTTON_STYLE_IDS = [
38
- BUTTON_STYLE_BRUSHSTROKE,
39
- BUTTON_STYLE_ARROW,
40
- BUTTON_STYLE_PAPER,
41
- ];
42
- export const isDecorativeButtonStyle = (styleId) => !!styleId && DECORATIVE_BUTTON_STYLE_IDS.includes(styleId);
@@ -6,6 +6,7 @@ export * from './model.util';
6
6
  export * from './validation.util';
7
7
  export * from './payment.util';
8
8
  export * from './image.util';
9
+ export * from './page-heading.util';
9
10
  export * from './font-loader.util';
10
11
  export * from './aspect-ratio.util';
11
12
  export * from './context.util';
@@ -6,6 +6,7 @@ export * from './model.util';
6
6
  export * from './validation.util';
7
7
  export * from './payment.util';
8
8
  export * from './image.util';
9
+ export * from './page-heading.util';
9
10
  export * from './font-loader.util';
10
11
  export * from './aspect-ratio.util';
11
12
  export * from './context.util';