@designcrowd/library.brand-page 5.12.11 → 5.12.12

package/lib/src/{CreatedOnBrandCrowd-de-de-B1UmWzii.js → CreatedOnBrandCrowd-de-de-0XSNG_9q.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-BRK1hM-D.js → CreatedOnBrandCrowd-en-us-1HABXAj7.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-CN_2N7lq.js → CreatedOnBrandCrowd-es-es--pYO9W0D.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-BLLKZAU4.js → CreatedOnBrandCrowd-fr-fr-cP_ha4PV.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-Btsu98RA.js → CreatedOnBrandCrowd-pt-pt-5U4thKFb.js}

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

package/lib/src/{CreatedOnDcom-de-de-t1layjdN.js → CreatedOnDcom-de-de-dX6nMjfK.js}

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

package/lib/src/{CreatedOnDcom-en-us-Cgr8OWqD.js → CreatedOnDcom-en-us-CldjK0EC.js}

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

package/lib/src/{CreatedOnDcom-es-es-BU30p1A3.js → CreatedOnDcom-es-es-DhMbR7A4.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-0WKXggE1.js → CreatedOnDcom-fr-fr-CsY16ori.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-DugorNKz.js → CreatedOnDcom-pt-pt-B0PDKMsQ.js}

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

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

@@ -9,6 +9,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     svgData: string;
     svgDataObjectUrl: string;
     originalSvgData: string;
+    svgWidth: number;
+    svgHeight: number;
 }, {
     useObjectElement(): boolean;
     backgroundShapesStyle(): BrandPageCssStyle;
@@ -17,6 +19,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {
     isValidSvgUrl(url: string): boolean;
     applySvgAttributes(svgData: string): string;
+    setInternalSvgWidthAndHeight(svgData: string): void;
     render(): Promise<void>;
 }, import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     isPreview: {

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

@@ -18,14 +18,25 @@ export default defineComponent({
         },
     },
     data() {
-        return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
+        return {
+            svgData: '',
+            svgDataObjectUrl: '',
+            originalSvgData: '',
+            svgWidth: 0,
+            svgHeight: 0,
+        };
     },
     computed: {
         useObjectElement() {
             return !!this.viewModel?.name.match(PROXY_SHAPE_URL_REGEX);
         },
         backgroundShapesStyle() {
-            return this.viewModel?.style || {};
+            const style = this.viewModel?.style || {};
+            if (!style.width && !style.height && this.svgWidth && this.svgHeight) {
+                style.width = this.svgWidth;
+                style.height = this.svgHeight;
+            }
+            return style;
         },
         isFullBackground() {
             return (this.viewModel.style.width === '100%' &&
@@ -91,6 +102,25 @@ export default defineComponent({
             }
             return svgData;
         },
+        setInternalSvgWidthAndHeight(svgData) {
+            const svgTagMatch = svgData.match(/<svg\b[^>]*>/i);
+            if (svgTagMatch) {
+                const svgTagSection = svgTagMatch[0];
+                const widthHeightMatches = svgTagSection.match(/\b(width|height)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/gi);
+                if (widthHeightMatches) {
+                    const widthMatch = widthHeightMatches.find((match) => match.startsWith('width='));
+                    const widthValue = widthMatch?.match(/([^"]*)/g)?.[2];
+                    const heightMatch = widthHeightMatches.find((match) => match.startsWith('height='));
+                    const heightValue = heightMatch?.match(/([^"]*)/g)?.[2];
+                    if (widthValue && !widthValue.endsWith('%')) {
+                        this.svgWidth = `${widthValue}px`;
+                    }
+                    if (heightValue && !heightValue.endsWith('%')) {
+                        this.svgHeight = `${heightValue}px`;
+                    }
+                }
+            }
+        },
         async render() {
             if (this.useObjectElement) {
                 return;
@@ -111,6 +141,7 @@ export default defineComponent({
                 this.svgData = this.originalSvgData;
             }
             this.svgData = this.applySvgAttributes(this.svgData);
+            this.setInternalSvgWidthAndHeight(this.svgData);
             const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
             const oldSvgDataObjectUrl = this.svgDataObjectUrl;
             // Create an Object URL

package/lib/src/index.mjs

@@ -1,4 +1,4 @@
-import { bw as E, an as T, aP as I, a3 as N, ag as S, ad as s, bo as A, c3 as e, c2 as O, c1 as G, bX as C, aZ as D, aY as P, bH as R, bI as t, bP as L, bE as M, bG as o, bF as b, bJ as r, bK as F, bW as n, bU as B, am as g, bV as l, a6 as i, aU as Y, aW as U, aV as d, e as c, f as H, B as u, Y as y, d as p, Z as K, j as k, aj as V, X, bn as m, bD as v, at as h, aR as W, aN as x, bS as f, bR as Z, C as w, b0 as z, D as Q, b as j, a as q, bN as J, a$ as $, aS as aa, aO as _a, b$ as Ea, c0 as Ta, bQ as Ia, bA as Na, ab as Sa, bT as sa, bY as Aa, b5 as ea, aF as Oa, bb as Ga, F as Ca, a5 as Da, a4 as Pa, h as Ra, $ as ta, b2 as La, aQ as Ma, aM as oa, a1 as ba, G as ra, I as Fa, H as na, a7 as Ba, bx as ga, b6 as la, b7 as ia, bv as Ya, bd as Ua, bf as da, b1 as ca, L as Ha, aE as ua, bk as ya, aK as pa, bj as Ka, ao as ka, a9 as Va, bO as Xa, bZ as ma, b_ as va, aT as ha, N as Wa, aw as xa, av as fa, ax as Za, ar as wa, as as za, au as Qa, b9 as ja, bg as qa, b3 as Ja, n as $a, ah as a_, ai as __, ae as E_, af as T_, ac as I_, a2 as N_, l as S_, bl as s_, al as A_, bB as e_, bC as O_, bM as G_, aa as C_, bz as D_, bm as P_, m as R_, S as t_, P as L_, aD as M_, by as o_, ba as b_, br as r_, bp as F_, bt as n_, bu as B_, bq as g_, bs as l_, ay as i_, az as Y_, bi as U_, bh as d_, bc as c_, aB as H_, aC as u_, aH as y_, aX as p_, aG as K_, aI as k_, U as V_, a8 as X_, aL as m_, k as v_, b8 as h_, ak as W_, b4 as x_, be as f_, a_ as Z_, M as w_, a0 as z_, g as Q_, bL as j_, q as q_, J as J_, W as $_, aA as aE, aJ as _E, ap as EE, o as TE, T as IE, r as NE, u as SE, i as sE, aq as AE, c as eE, p as OE, t as GE, R as CE, K as DE, s as PE, V as RE, y as tE, v as LE, w as ME, Q as oE, z as bE, O as rE, A as FE, E as nE, x as BE } from "./lib-CjyTfIxl.js";
+import { bw as E, an as T, aP as I, a3 as N, ag as S, ad as s, bo as A, c3 as e, c2 as O, c1 as G, bX as C, aZ as D, aY as P, bH as R, bI as t, bP as L, bE as M, bG as o, bF as b, bJ as r, bK as F, bW as n, bU as B, am as g, bV as l, a6 as i, aU as Y, aW as U, aV as d, e as c, f as H, B as u, Y as y, d as p, Z as K, j as k, aj as V, X, bn as m, bD as v, at as h, aR as W, aN as x, bS as f, bR as Z, C as w, b0 as z, D as Q, b as j, a as q, bN as J, a$ as $, aS as aa, aO as _a, b$ as Ea, c0 as Ta, bQ as Ia, bA as Na, ab as Sa, bT as sa, bY as Aa, b5 as ea, aF as Oa, bb as Ga, F as Ca, a5 as Da, a4 as Pa, h as Ra, $ as ta, b2 as La, aQ as Ma, aM as oa, a1 as ba, G as ra, I as Fa, H as na, a7 as Ba, bx as ga, b6 as la, b7 as ia, bv as Ya, bd as Ua, bf as da, b1 as ca, L as Ha, aE as ua, bk as ya, aK as pa, bj as Ka, ao as ka, a9 as Va, bO as Xa, bZ as ma, b_ as va, aT as ha, N as Wa, aw as xa, av as fa, ax as Za, ar as wa, as as za, au as Qa, b9 as ja, bg as qa, b3 as Ja, n as $a, ah as a_, ai as __, ae as E_, af as T_, ac as I_, a2 as N_, l as S_, bl as s_, al as A_, bB as e_, bC as O_, bM as G_, aa as C_, bz as D_, bm as P_, m as R_, S as t_, P as L_, aD as M_, by as o_, ba as b_, br as r_, bp as F_, bt as n_, bu as B_, bq as g_, bs as l_, ay as i_, az as Y_, bi as U_, bh as d_, bc as c_, aB as H_, aC as u_, aH as y_, aX as p_, aG as K_, aI as k_, U as V_, a8 as X_, aL as m_, k as v_, b8 as h_, ak as W_, b4 as x_, be as f_, a_ as Z_, M as w_, a0 as z_, g as Q_, bL as j_, q as q_, J as J_, W as $_, aA as aE, aJ as _E, ap as EE, o as TE, T as IE, r as NE, u as SE, i as sE, aq as AE, c as eE, p as OE, t as GE, R as CE, K as DE, s as PE, V as RE, y as tE, v as LE, w as ME, Q as oE, z as bE, O as rE, A as FE, E as nE, x as BE } from "./lib-B_V63NKc.js";
 import { createPinia as lE, setActivePinia as iE } from "pinia";
 export {
   E as ABOUT_SECTION_SETTINGS_CONFIG,

package/lib/src/{lib-CjyTfIxl.js → lib-B_V63NKc.js}

@@ -56982,10 +56982,10 @@ const q0 = /* @__PURE__ */ $6(FM1), UM1 = (e, t, n) => {
     Yt(() => n.context.isDesignCom, async () => {
       const S = mn().toLowerCase(), M = n.context.isDesignCom ? "Dcom" : "BrandCrowd";
       try {
-        const { default: T } = await y_(/* @__PURE__ */ Object.assign({ "./watermark/CreatedOnBrandCrowd-de-de.vue": () => import("./CreatedOnBrandCrowd-de-de-B1UmWzii.js"), "./watermark/CreatedOnBrandCrowd-en-us.vue": () => import("./CreatedOnBrandCrowd-en-us-BRK1hM-D.js"), "./watermark/CreatedOnBrandCrowd-es-es.vue": () => import("./CreatedOnBrandCrowd-es-es-CN_2N7lq.js"), "./watermark/CreatedOnBrandCrowd-fr-fr.vue": () => import("./CreatedOnBrandCrowd-fr-fr-BLLKZAU4.js"), "./watermark/CreatedOnBrandCrowd-pt-pt.vue": () => import("./CreatedOnBrandCrowd-pt-pt-Btsu98RA.js"), "./watermark/CreatedOnDcom-de-de.vue": () => import("./CreatedOnDcom-de-de-t1layjdN.js"), "./watermark/CreatedOnDcom-en-us.vue": () => import("./CreatedOnDcom-en-us-Cgr8OWqD.js"), "./watermark/CreatedOnDcom-es-es.vue": () => import("./CreatedOnDcom-es-es-BU30p1A3.js"), "./watermark/CreatedOnDcom-fr-fr.vue": () => import("./CreatedOnDcom-fr-fr-0WKXggE1.js"), "./watermark/CreatedOnDcom-pt-pt.vue": () => import("./CreatedOnDcom-pt-pt-DugorNKz.js") }), `./watermark/CreatedOn${M}-${S}.vue`, 3);
+        const { default: T } = await y_(/* @__PURE__ */ Object.assign({ "./watermark/CreatedOnBrandCrowd-de-de.vue": () => import("./CreatedOnBrandCrowd-de-de-0XSNG_9q.js"), "./watermark/CreatedOnBrandCrowd-en-us.vue": () => import("./CreatedOnBrandCrowd-en-us-1HABXAj7.js"), "./watermark/CreatedOnBrandCrowd-es-es.vue": () => import("./CreatedOnBrandCrowd-es-es--pYO9W0D.js"), "./watermark/CreatedOnBrandCrowd-fr-fr.vue": () => import("./CreatedOnBrandCrowd-fr-fr-cP_ha4PV.js"), "./watermark/CreatedOnBrandCrowd-pt-pt.vue": () => import("./CreatedOnBrandCrowd-pt-pt-5U4thKFb.js"), "./watermark/CreatedOnDcom-de-de.vue": () => import("./CreatedOnDcom-de-de-dX6nMjfK.js"), "./watermark/CreatedOnDcom-en-us.vue": () => import("./CreatedOnDcom-en-us-CldjK0EC.js"), "./watermark/CreatedOnDcom-es-es.vue": () => import("./CreatedOnDcom-es-es-DhMbR7A4.js"), "./watermark/CreatedOnDcom-fr-fr.vue": () => import("./CreatedOnDcom-fr-fr-CsY16ori.js"), "./watermark/CreatedOnDcom-pt-pt.vue": () => import("./CreatedOnDcom-pt-pt-B0PDKMsQ.js") }), `./watermark/CreatedOn${M}-${S}.vue`, 3);
         i.value = T;
       } catch {
-        const { default: E } = await y_(/* @__PURE__ */ Object.assign({ "./watermark/CreatedOnBrandCrowd-en-us.vue": () => import("./CreatedOnBrandCrowd-en-us-BRK1hM-D.js"), "./watermark/CreatedOnDcom-en-us.vue": () => import("./CreatedOnDcom-en-us-Cgr8OWqD.js") }), `./watermark/CreatedOn${M}-en-us.vue`, 3);
+        const { default: E } = await y_(/* @__PURE__ */ Object.assign({ "./watermark/CreatedOnBrandCrowd-en-us.vue": () => import("./CreatedOnBrandCrowd-en-us-1HABXAj7.js"), "./watermark/CreatedOnDcom-en-us.vue": () => import("./CreatedOnDcom-en-us-CldjK0EC.js") }), `./watermark/CreatedOn${M}-en-us.vue`, 3);
         i.value = E;
       }
     }, {
@@ -57365,7 +57365,13 @@ const Ck1 = /* @__PURE__ */ v(dk1, [["render", uk1]]), Ef = /* @__PURE__ */ t1({
     }
   },
   data() {
-    return { svgData: "", svgDataObjectUrl: "", originalSvgData: "" };
+    return {
+      svgData: "",
+      svgDataObjectUrl: "",
+      originalSvgData: "",
+      svgWidth: 0,
+      svgHeight: 0
+    };
   },
   computed: {
     useObjectElement() {
@@ -57373,8 +57379,9 @@ const Ck1 = /* @__PURE__ */ v(dk1, [["render", uk1]]), Ef = /* @__PURE__ */ t1({
       return !!((e = this.viewModel) != null && e.name.match(KT));
     },
     backgroundShapesStyle() {
-      var e;
-      return ((e = this.viewModel) == null ? void 0 : e.style) || {};
+      var t;
+      const e = ((t = this.viewModel) == null ? void 0 : t.style) || {};
+      return !e.width && !e.height && this.svgWidth && this.svgHeight && (e.width = this.svgWidth, e.height = this.svgHeight), e;
     },
     isFullBackground() {
       return this.viewModel.style.width === "100%" && this.viewModel.style.height === "100%";
@@ -57419,6 +57426,23 @@ const Ck1 = /* @__PURE__ */ v(dk1, [["render", uk1]]), Ef = /* @__PURE__ */ t1({
       const n = t.join(" ");
       return n && (e = e.replace("<svg ", `<svg ${n} `)), e;
     },
+    setInternalSvgWidthAndHeight(e) {
+      var n, i;
+      const t = e.match(/<svg\b[^>]*>/i);
+      if (t) {
+        const s = t[0].match(
+          /\b(width|height)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/gi
+        );
+        if (s) {
+          const o = s.find(
+            (c) => c.startsWith("width=")
+          ), a = (n = o == null ? void 0 : o.match(/([^"]*)/g)) == null ? void 0 : n[2], l = s.find(
+            (c) => c.startsWith("height=")
+          ), d = (i = l == null ? void 0 : l.match(/([^"]*)/g)) == null ? void 0 : i[2];
+          a && !a.endsWith("%") && (this.svgWidth = `${a}px`), d && !d.endsWith("%") && (this.svgHeight = `${d}px`);
+        }
+      }
+    },
     async render() {
       if (this.useObjectElement)
         return;
@@ -57431,7 +57455,7 @@ const Ck1 = /* @__PURE__ */ v(dk1, [["render", uk1]]), Ef = /* @__PURE__ */ t1({
       this.viewModel.style.color ? this.svgData = sf1(
         this.originalSvgData,
         this.viewModel.style.color
-      ) : this.svgData = this.originalSvgData, this.svgData = this.applySvgAttributes(this.svgData);
+      ) : this.svgData = this.originalSvgData, this.svgData = this.applySvgAttributes(this.svgData), this.setInternalSvgWidthAndHeight(this.svgData);
       const e = new Blob([this.svgData], { type: "image/svg+xml" }), t = this.svgDataObjectUrl;
       this.svgDataObjectUrl = URL.createObjectURL(e), t && URL.revokeObjectURL(t);
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.12.11",
+  "version": "5.12.12",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

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

@@ -22,7 +22,13 @@ export default defineComponent({
     },
   },
   data() {
-    return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
+    return {
+      svgData: '',
+      svgDataObjectUrl: '',
+      originalSvgData: '',
+      svgWidth: 0,
+      svgHeight: 0,
+    };
   },
   computed: {
     useObjectElement(): boolean {
@@ -30,7 +36,14 @@ export default defineComponent({
     },
 
     backgroundShapesStyle(): BrandPageCssStyle {
-      return this.viewModel?.style || {};
+      const style = this.viewModel?.style || {};
+
+      if (!style.width && !style.height && this.svgWidth && this.svgHeight) {
+        style.width = this.svgWidth;
+        style.height = this.svgHeight;
+      }
+
+      return style;
     },
 
     isFullBackground(): boolean {
@@ -115,6 +128,40 @@ export default defineComponent({
       return svgData;
     },
 
+    setInternalSvgWidthAndHeight(svgData: string): void {
+      const svgTagMatch = svgData.match(/<svg\b[^>]*>/i);
+
+      if (svgTagMatch) {
+        const svgTagSection = svgTagMatch[0];
+
+        const widthHeightMatches = svgTagSection.match(
+          /\b(width|height)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/gi,
+        );
+
+        if (widthHeightMatches) {
+          const widthMatch = widthHeightMatches.find((match) =>
+            match.startsWith('width='),
+          );
+
+          const widthValue = widthMatch?.match(/([^"]*)/g)?.[2];
+
+          const heightMatch = widthHeightMatches.find((match) =>
+            match.startsWith('height='),
+          );
+
+          const heightValue = heightMatch?.match(/([^"]*)/g)?.[2];
+
+          if (widthValue && !widthValue.endsWith('%')) {
+            this.svgWidth = `${widthValue}px`;
+          }
+
+          if (heightValue && !heightValue.endsWith('%')) {
+            this.svgHeight = `${heightValue}px`;
+          }
+        }
+      }
+    },
+
     async render() {
       if (this.useObjectElement) {
         return;
@@ -143,6 +190,8 @@ export default defineComponent({
 
       this.svgData = this.applySvgAttributes(this.svgData);
 
+      this.setInternalSvgWidthAndHeight(this.svgData);
+
       const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
 
       const oldSvgDataObjectUrl = this.svgDataObjectUrl;