@designcrowd/library.brand-page 5.12.8-shape-3 → 5.12.9

package/lib/src/{CreatedOnBrandCrowd-de-de-C6yHS_uc.js → CreatedOnBrandCrowd-de-de-BSa_oMUS.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-Bpr4nnTY.js";
+import { _ as t } from "./lib-C0TzGTrm.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-71jFnX4a.js → CreatedOnBrandCrowd-en-us-CrDm6Zsd.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-Bpr4nnTY.js";
+import { _ as t } from "./lib-C0TzGTrm.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-BWQ3wBEd.js → CreatedOnBrandCrowd-es-es-D_osPiN2.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-Bpr4nnTY.js";
+import { _ as t } from "./lib-C0TzGTrm.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-Ckd8_eBU.js → CreatedOnBrandCrowd-fr-fr-B6KRVAx0.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-Bpr4nnTY.js";
+import { _ as t } from "./lib-C0TzGTrm.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-DU_TBU5B.js → CreatedOnBrandCrowd-pt-pt-DflhU2ts.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-Bpr4nnTY.js";
+import { _ as t } from "./lib-C0TzGTrm.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-MeXQe36m.js → CreatedOnDcom-de-de-CMxzzUpC.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-Bpr4nnTY.js";
+import { _ as e } from "./lib-C0TzGTrm.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-i2V8pHQC.js → CreatedOnDcom-en-us-Cgau0pJ6.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-Bpr4nnTY.js";
+import { _ as e } from "./lib-C0TzGTrm.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-R881IuIY.js → CreatedOnDcom-es-es-7mE5DRiG.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-Bpr4nnTY.js";
+import { _ as e } from "./lib-C0TzGTrm.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-Cj4S6RmF.js → CreatedOnDcom-fr-fr-D2Q_bKeL.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-Bpr4nnTY.js";
+import { _ as e } from "./lib-C0TzGTrm.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-9VaIe9-M.js → CreatedOnDcom-pt-pt-CdsDaHLJ.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-Bpr4nnTY.js";
+import { _ as M } from "./lib-C0TzGTrm.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/components/background-shape/BackgroundShape.mixin.d.ts

@@ -7,16 +7,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {}, {
     svgData: string;
-    svgDataObjectUrl: string;
     originalSvgData: string;
 }, {
     useObjectElement(): boolean;
     backgroundShapesStyle(): BrandPageCssStyle;
     isFullBackground(): boolean;
-    objectUrl(): string;
+    svgAttributes(): string;
 }, {
     isValidSvgUrl(url: string): boolean;
-    applySvgAttributes(svgData: string): string;
     render(): Promise<void>;
 }, import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     isPreview: {

package/lib/src/brand-page/components/background-shape/BackgroundShape.mixin.js

@@ -4,7 +4,6 @@ import axios from 'axios';
 import { applyColorToSvgString } from '../../utils/svg-color.util';
 import { isURL } from '../../../utils/validator.util';
 import { PROXY_SHAPE_URL_REGEX } from '../../../brand-page/constants';
-import { getRegexToMatchAttributeInSvgTag } from '../../../brand-page/utils/svg.util';
 const SUPPORTED_SHAPE_HOSTS = [
     'https://bc-user-uploads.brandcrowd.com/public',
     'https://bcassetcdn.com/shapes',
@@ -18,7 +17,7 @@ export default defineComponent({
         },
     },
     data() {
-        return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
+        return { svgData: '', originalSvgData: '' };
     },
     computed: {
         useObjectElement() {
@@ -31,11 +30,13 @@ export default defineComponent({
             return (this.viewModel.style.width === '100%' &&
                 this.viewModel.style.height === '100%');
         },
-        objectUrl() {
-            if (!this.useObjectElement) {
-                return this.svgDataObjectUrl;
+        svgAttributes() {
+            const attributes = [];
+            if (this.isFullBackground) {
+                attributes.push('preserveAspectRatio="xMidYMid slice"');
+                attributes.push('style="width: 100%; height: 100%;"');
             }
-            return this.viewModel.name;
+            return attributes.join(' ');
         },
     },
     watch: {
@@ -60,37 +61,6 @@ export default defineComponent({
             return (!!SUPPORTED_SHAPE_HOSTS.find((h) => url.startsWith(h)) &&
                 url.endsWith('.svg'));
         },
-        applySvgAttributes(svgData) {
-            const attributes = [];
-            if (this.isFullBackground) {
-                const widthRegex = getRegexToMatchAttributeInSvgTag('width');
-                if (svgData.match(widthRegex)) {
-                    svgData = svgData.replace(widthRegex, `$1width="100%"`);
-                }
-                else {
-                    attributes.push(`width="100%"`);
-                }
-                const heightRegex = getRegexToMatchAttributeInSvgTag('height');
-                if (svgData.match(heightRegex)) {
-                    svgData = svgData.replace(heightRegex, `$1height="100%"`);
-                }
-                else {
-                    attributes.push(`height="100%"`);
-                }
-                const preserveAspectRatioRegex = getRegexToMatchAttributeInSvgTag('preserveAspectRatio');
-                if (svgData.match(preserveAspectRatioRegex)) {
-                    svgData = svgData.replace(preserveAspectRatioRegex, `$1preserveAspectRatio="xMidYMid slice"`);
-                }
-                else {
-                    attributes.push(`preserveAspectRatio="xMidYMid slice"`);
-                }
-            }
-            const svgAttributes = attributes.join(' ');
-            if (svgAttributes) {
-                svgData = svgData.replace('<svg ', `<svg ${svgAttributes} `);
-            }
-            return svgData;
-        },
         async render() {
             if (this.useObjectElement) {
                 return;
@@ -107,18 +77,7 @@ export default defineComponent({
             if (this.viewModel.style.color) {
                 this.svgData = applyColorToSvgString(this.originalSvgData, this.viewModel.style.color);
             }
-            else {
-                this.svgData = this.originalSvgData;
-            }
-            this.svgData = this.applySvgAttributes(this.svgData);
-            const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
-            const oldSvgDataObjectUrl = this.svgDataObjectUrl;
-            // Create an Object URL
-            this.svgDataObjectUrl = URL.createObjectURL(blob);
-            if (oldSvgDataObjectUrl) {
-                // clean up previous Object URL
-                URL.revokeObjectURL(oldSvgDataObjectUrl);
-            }
+            this.svgData = this.svgData.replace('<svg ', `<svg ${this.svgAttributes} `);
         },
     },
 });

package/lib/src/brand-page/components/media/Shape.mixin.d.ts

@@ -26,7 +26,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {}, {
     svgData: string;
-    svgDataObjectUrl: string;
     originalSvgData: string;
 }, {
     useObjectElement(): boolean;
@@ -37,9 +36,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         width: any;
         height: any;
     };
-    objectUrl(): any;
+    objectUrl(): string;
+    svgAttributes(): string;
 }, {
-    applySvgAttributes(svgData: string): string;
     renderAsInnerHtml(): Promise<void>;
 }, import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     isPreview: {

package/lib/src/brand-page/components/media/Shape.mixin.js

@@ -3,7 +3,6 @@ import ComponentCommonMixin from '../mixins/component-common.mixin';
 import axios from 'axios';
 import { applyColorReplacementsToSvgString } from '../../utils/svg-color.util';
 import { PROXY_SHAPE_URL_REGEX } from '../../../brand-page/constants';
-import { getRegexToMatchAttributeInSvgTag } from '../../../brand-page/utils/svg.util';
 export default defineComponent({
     mixins: [ComponentCommonMixin],
     props: {
@@ -32,7 +31,7 @@ export default defineComponent({
         },
     },
     data() {
-        return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
+        return { svgData: '', originalSvgData: '' };
     },
     computed: {
         useObjectElement() {
@@ -48,9 +47,6 @@ export default defineComponent({
             };
         },
         objectUrl() {
-            if (!this.useObjectElement) {
-                return this.svgDataObjectUrl;
-            }
             let dimensionQuery = ``;
             if (this.size) {
                 const encodedSize = encodeURIComponent(this.size);
@@ -58,15 +54,18 @@ export default defineComponent({
             }
             return `${this.imageUrl}${dimensionQuery}`;
         },
+        svgAttributes() {
+            const attributes = [];
+            if (this.size) {
+                attributes.push(`height=${this.size} width=${this.size}`);
+            }
+            return attributes.join(' ');
+        },
     },
     watch: {
         colorReplacements: {
-            handler(newVal, oldVal) {
-                if (newVal &&
-                    oldVal &&
-                    JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
-                    this.renderAsInnerHtml();
-                }
+            handler() {
+                this.renderAsInnerHtml();
             },
             deep: true,
         },
@@ -102,44 +101,12 @@ export default defineComponent({
         }
     },
     methods: {
-        applySvgAttributes(svgData) {
-            const attributes = [];
-            if (this.size) {
-                const widthRegex = getRegexToMatchAttributeInSvgTag('width');
-                if (svgData.match(widthRegex)) {
-                    svgData = svgData.replace(widthRegex, `$1width="${this.size}"`);
-                }
-                else {
-                    attributes.push(`width="${this.size}"`);
-                }
-                const heightRegex = getRegexToMatchAttributeInSvgTag('height');
-                if (svgData.match(heightRegex)) {
-                    svgData = svgData.replace(heightRegex, `$1height="${this.size}"`);
-                }
-                else {
-                    attributes.push(`height="${this.size}"`);
-                }
-            }
-            const svgAttributes = attributes.join(' ');
-            if (svgAttributes) {
-                svgData = svgData.replace('<svg ', `<svg ${svgAttributes} `);
-            }
-            return svgData;
-        },
         async renderAsInnerHtml() {
             if (!this.originalSvgData) {
                 return;
             }
             this.svgData = applyColorReplacementsToSvgString(this.originalSvgData, this.colorReplacements);
-            this.svgData = this.applySvgAttributes(this.svgData);
-            const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
-            const oldSvgDataObjectUrl = this.svgDataObjectUrl;
-            // Create an Object URL
-            this.svgDataObjectUrl = URL.createObjectURL(blob);
-            if (oldSvgDataObjectUrl) {
-                // clean up previous Object URL
-                URL.revokeObjectURL(oldSvgDataObjectUrl);
-            }
+            this.svgData = this.svgData.replace('<svg ', `<svg ${this.svgAttributes} `);
         },
     },
 });

package/lib/src/brand-page/utils/svg.util.d.ts

@@ -5,4 +5,3 @@ export declare const normaliseSvgData: (svgData: string) => string;
 export declare const setSvgCssStyle: (svgData: string, cssStyle: string) => string;
 /** svg linear gradient is shared across the DOM, append unique suffix to avoid conflict issue */
 export declare const appendSvgIdSuffix: (svgData: string, svgIdSuffix: string) => string;
-export declare const getRegexToMatchAttributeInSvgTag: (attribute: string) => RegExp;

package/lib/src/brand-page/utils/svg.util.js

@@ -21,6 +21,3 @@ export const setSvgCssStyle = (svgData, cssStyle) => {
 export const appendSvgIdSuffix = (svgData, svgIdSuffix) => {
     return svgData.replace(/(SVGID(?:_\d+)+)/g, `$1_${svgIdSuffix}`);
 };
-export const getRegexToMatchAttributeInSvgTag = (attribute) => {
-    return new RegExp(`(<svg\\b[^>]*?)${attribute}="[^"]*"`, 'i');
-};

package/lib/src/brand-page-maker/utils/url.util.js

@@ -1,3 +1,3 @@
-export const YOUTUBE_URL_RE = /(?:https?:\/\/)?(?:www|m)?\.?(?:youtube|youtu)\.(?:com|be)\/(?!channel\/|c\/|user\/|u\/)(?:embed\/|watch)?(?:\?.*v=)?([^&]+).*/i;
+export const YOUTUBE_URL_RE = /(?:https?:\/\/)?(?:www|m)?\.?(?:youtube|youtu)\.(?:com|be)\/(?!channel\/|c\/|user\/|u\/)(?:embed\/|watch|shorts\/)?(?:\?.*v=)?([^&]+).*/i;
 export const DOMAIN_NAME_RE = /^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/;
 export const validateCustomDomainName = (domainName) => DOMAIN_NAME_RE.test(domainName);

package/lib/src/css/library.brand-page-brandCrowd.min.css

@@ -5097,7 +5097,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   width: 100%;
 }
 
-.c-shape-background[data-v-0029e76c] {
+.c-shape-background[data-v-89074788] {
   -webkit-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
   position: fixed;
@@ -5106,11 +5106,11 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   width: 100%;
   height: 100vh;
 }
-.template-preview .c-shape-background[data-v-0029e76c],
-.device-wrapper .c-shape-background[data-v-0029e76c] {
+.template-preview .c-shape-background[data-v-89074788],
+.device-wrapper .c-shape-background[data-v-89074788] {
   height: 100%;
 }
-.c-shape[data-v-0029e76c] {
+.c-shape[data-v-89074788] {
   fill: currentColor;
 }
 
@@ -5127,7 +5127,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   height: 2rem;
 }
 
-.c-shape[data-v-0fcaefa2] {
+.c-shape[data-v-36d8ec03] {
   fill: currentColor;
 }
 
@@ -8145,11 +8145,11 @@ body {
   min-width: 33.333333%
 }
 
-.rich-text-editor[data-v-f857b419]:focus-within {
+.rich-text-editor[data-v-d4706300]:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));
 }
-.style-editor[data-v-f857b419] {
+.style-editor[data-v-d4706300] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8160,7 +8160,7 @@ body {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.style-editor[data-v-f857b419] button:not(.c-button-style) {
+.style-editor[data-v-d4706300] button:not(.c-button-style) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8170,16 +8170,16 @@ body {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.style-editor-button[data-v-f857b419] {
+.style-editor-button[data-v-d4706300] {
   cursor: pointer;
   padding-left: 0.25rem;
   padding-top: 0.25rem;
 }
-.toolbar-editor-button.active[data-v-f857b419] {
+.toolbar-editor-button.active[data-v-d4706300] {
   font-weight: 700;
   background: #e3e3e3;
 }
-.toolbar-editor-button[data-v-f857b419] {
+.toolbar-editor-button[data-v-d4706300] {
   height: 32px;
   width: 32px;
   border-radius: 4px;
@@ -8197,7 +8197,7 @@ body {
       -ms-flex-pack: center;
           justify-content: center;
 }
-[data-v-f857b419] .ProseMirror {
+[data-v-d4706300] .ProseMirror {
   border-top: 1px solid #ccc;
   min-height: 150px;
   padding: 8px;
@@ -8210,10 +8210,10 @@ body {
   max-height: 14rem;
   overflow: auto;
 }
-[data-v-f857b419] .ProseMirror:focus {
+[data-v-d4706300] .ProseMirror:focus {
   outline: none;
 }
-[data-v-f857b419] .ProseMirror * {
+[data-v-d4706300] .ProseMirror * {
   text-align: left !important;
   font-size: 16px !important;
   color: #606060 !important;
@@ -8222,25 +8222,28 @@ body {
   background-color: transparent !important;
   font-family: 'Lato' !important;
 }
-[data-v-f857b419] .ProseMirror a,[data-v-f857b419] .ProseMirror a * {
+[data-v-d4706300] .ProseMirror a s,[data-v-d4706300] .ProseMirror a strike,[data-v-d4706300] .ProseMirror a [data-strike] {
+  text-decoration: line-through !important;
+}
+[data-v-d4706300] .ProseMirror a,[data-v-d4706300] .ProseMirror a * {
   color: #0097d7 !important;
   text-decoration: underline !important;
 }
-.error-message[data-v-f857b419] {
+.error-message[data-v-d4706300] {
   color: #d32f2f;
   font-size: 0.875rem;
   margin-top: 4px;
 }
-.popup-container[data-v-f857b419] {
+.popup-container[data-v-d4706300] {
   position: absolute;
   z-index: 10;
   right: 8%;
 }
-.hyperlink-preview[data-v-f857b419] {
+.hyperlink-preview[data-v-d4706300] {
   position: absolute;
   z-index: 10;
 }
-.popup-panel[data-v-f857b419] {
+.popup-panel[data-v-d4706300] {
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 8px;
@@ -8248,17 +8251,17 @@ body {
   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
-.popup-panel[data-v-f857b419] input {
+.popup-panel[data-v-d4706300] input {
   border: 1px solid #ccc;
   border-radius: 8px;
 }
-.border[data-v-f857b419] {
+.border[data-v-d4706300] {
   width: 100%;
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
   height: 1px;
 }
-[data-v-f857b419] .text-dropdown-title {
+[data-v-d4706300] .text-dropdown-title {
   height: 2rem;
   width: 100%;
   font-size: 0.875rem;
@@ -8267,7 +8270,7 @@ body {
   color: rgb(43 43 43 / var(--tw-text-opacity));
   font-weight: 300;
 }
-[data-v-f857b419] .ProseMirror p.is-editor-empty:first-child::before {
+[data-v-d4706300] .ProseMirror p.is-editor-empty:first-child::before {
   --tw-text-opacity: 1;
   color: rgb(208 208 208 / var(--tw-text-opacity));
   content: attr(data-placeholder);
@@ -8276,56 +8279,56 @@ body {
   pointer-events: none;
 }
 @media (max-width: 399px) {
-.style-editor-button-font[data-v-f857b419],
-  .style-editor-button-textstyle[data-v-f857b419] {
+.style-editor-button-font[data-v-d4706300],
+  .style-editor-button-textstyle[data-v-d4706300] {
     max-width: 48%;
     padding-bottom: 0.25rem;
 }
-.style-editor-button.stepper[data-v-f857b419] {
+.style-editor-button.stepper[data-v-d4706300] {
     max-width: 40%;
 }
-.style-editor-button-stepper[data-v-f857b419] {
+.style-editor-button-stepper[data-v-d4706300] {
     max-width: 100%;
 }
-.border.desktop[data-v-f857b419] {
+.border.desktop[data-v-d4706300] {
     display: none;
 }
-.border.mobile[data-v-f857b419] {
+.border.mobile[data-v-d4706300] {
     display: block;
 }
-[data-v-f857b419] .left-align {
+[data-v-d4706300] .left-align {
     -webkit-transform: translateX(-50%);
             transform: translateX(-50%);
 }
-.hyperlink-popup[data-v-f857b419] {
-    z-index: 9999;
+.hyperlink-popup[data-v-d4706300] {
+    z-index: 10000 !important;
 }
 }
 @media (min-width: 400px) {
-.style-editor-button.stepper[data-v-f857b419] {
+.style-editor-button.stepper[data-v-d4706300] {
     max-width: 32%;
 }
-.style-editor-button-font[data-v-f857b419] {
+.style-editor-button-font[data-v-d4706300] {
     max-width: 28%;
 }
-.style-editor-button-stepper[data-v-f857b419] {
+.style-editor-button-stepper[data-v-d4706300] {
     max-width: 100%;
 }
-.style-editor-button-textstyle[data-v-f857b419] {
+.style-editor-button-textstyle[data-v-d4706300] {
     max-width: 25%;
 }
-.border.desktop[data-v-f857b419] {
+.border.desktop[data-v-d4706300] {
     display: block;
 }
-.border.mobile[data-v-f857b419] {
+.border.mobile[data-v-d4706300] {
     display: none;
 }
-[data-v-f857b419] .left-align {
+[data-v-d4706300] .left-align {
     -webkit-transform: translateX(-25%);
             transform: translateX(-25%);
 }
 }
-.drop-down-item[data-v-f857b419]:hover {
+.drop-down-item[data-v-d4706300]:hover {
   background-color: #eee;
 }