@porsche-design-system/components-react 3.15.0 → 3.15.2

package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs

@@ -3192,15 +3192,19 @@ const isDisabledOrLoading = (disabled, loading) => {
 };
 
 const parseJSONAttribute = (attribute) => {
-    return typeof attribute === 'string'
-        ? // input is potentially JSON parsable string, e.g. "{ 'aria-label': 'Some label' }"
-            JSON.parse(attribute
-                .replace(/(?<!\\)'/g, '"') // convert single quotes to double quotes except the ones which are escaped by backslash
-                .replace(/\\(?!u0027)/g, '') // remove string escapes except the ones followed by unicode u0027
-                .replace(/[\s"]?([\w-]+)[\s"]?:/g, '"$1":') // wrap keys in double quotes
-            )
-        : // input is object, e.g. { 'aria-label': 'Some label' }
-            attribute;
+    // Input is object, e.g. { 'aria-label': 'Some label' }
+    if (typeof attribute !== 'string') {
+        return attribute;
+    }
+    return JSON.parse(attribute
+        // Convert single quotes to double quotes except the ones which are escaped by backslash
+        .replace(/\\'/g, '__escaped_single_quote__')
+        .replace(/'/g, '"')
+        .replace(/__escaped_single_quote__/g, '\\\'')
+        // Remove string escapes except the ones followed by unicode u0027
+        .replace(/([^\\])\\(?!u0027)/g, '$1')
+        // Wrap keys in double quotes
+        .replace(/[\s"]?([\w-]+)[\s"]?:/g, '"$1":'));
 };
 
 const hasWindow = typeof window !== 'undefined';
@@ -3255,17 +3259,6 @@ const getOptionAriaAttributes = (isSelected, isDisabled, isHidden, hasValue) =>
     'aria-label': hasValue ? null : 'Empty value',
 });
 
-const attributeMutationMap = new Map();
-hasWindow &&
-    new MutationObserver((mutations) => {
-        mutations
-            // reduce array to only entries that have really a changed value
-            .filter((mutation) => mutation.oldValue !== mutation.target.getAttribute(mutation.attributeName))
-            // remove duplicates so we execute callback only once per node
-            .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
-            .forEach((mutation) => attributeMutationMap.get(mutation.target)?.());
-    });
-
 const borderWidthBase = '2px';
 
 const fontFamily = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
@@ -3326,6 +3319,46 @@ const textSmallStyle = {
     ...fontHyphenationStyle,
 };
 
+// NOTE: handpicked selection of plugins from jss-preset-default
+createJss({
+    plugins: [
+        jssGlobal(),
+        jssNested(),
+        camelCase(),
+        jssPluginSortMediaQueries({ combineMediaQueries: true }),
+    ],
+});
+const supportsConstructableStylesheets = () => {
+    try {
+        return typeof new CSSStyleSheet().replaceSync === 'function';
+    }
+    catch {
+        return false;
+    }
+};
+// determine it once
+supportsConstructableStylesheets();
+// TODO: Use function from ./jss (Causes bundling issues)
+(() => {
+    try {
+        return typeof new CSSStyleSheet().replaceSync === 'function';
+    }
+    catch {
+        return false;
+    }
+})(); // determine it once
+
+const attributeMutationMap = new Map();
+hasWindow &&
+    new MutationObserver((mutations) => {
+        mutations
+            // reduce array to only entries that have really a changed value
+            .filter((mutation) => mutation.oldValue !== mutation.target.getAttribute(mutation.attributeName))
+            // remove duplicates so we execute callback only once per node
+            .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
+            .forEach((mutation) => attributeMutationMap.get(mutation.target)?.());
+    });
+
 const mediaQueries = Object.values(breakpoint).map((v) => `(min-width:${v}px)`);
 hasWindow && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
 
@@ -3554,26 +3587,6 @@ const ICONS_MANIFEST = { "360": "360.min.d3b2874981886b5ebece31655f92a3ad.svg",
 const MARQUES_MANIFEST = { "porscheMarqueTrademark": { "medium": { "1x": { "png": "porsche-marque-trademark.medium.min.da075315857e239ff46bf4c150648ff0@1x.png", "webp": "porsche-marque-trademark.medium.min.5c6af9aa7946fea34f60c8f8c95d0188@1x.webp" }, "2x": { "png": "porsche-marque-trademark.medium.min.aa801f42028b1c385a5e26ae115da598@2x.png", "webp": "porsche-marque-trademark.medium.min.fff6e9b91481cc5b1fc6c9b62987ccaf@2x.webp" }, "3x": { "png": "porsche-marque-trademark.medium.min.824818d15eaf445f50e0a2391613f214@3x.png", "webp": "porsche-marque-trademark.medium.min.f67092ff6b5f4ecb4add73d6ae153db0@3x.webp" } }, "small": { "1x": { "png": "porsche-marque-trademark.small.min.020244b41a29323e2a7932a264514cdf@1x.png", "webp": "porsche-marque-trademark.small.min.783639706bead66b2d56e3b8b64bd61f@1x.webp" }, "2x": { "png": "porsche-marque-trademark.small.min.92184fae44511ceda8320443c17110b1@2x.png", "webp": "porsche-marque-trademark.small.min.760a57efa93d4e7e16e26128ec7ead46@2x.webp" }, "3x": { "png": "porsche-marque-trademark.small.min.fd545cea4298f5d797246d5805711646@3x.png", "webp": "porsche-marque-trademark.small.min.1726036a7829347e1e24d1eb54fc0d64@3x.webp" } } }, "porscheMarque": { "medium": { "1x": { "png": "porsche-marque.medium.min.a98627440b05154565f9f9dfc1ad6187@1x.png", "webp": "porsche-marque.medium.min.fa908e4dfdc5536b0e933e1670d20e1f@1x.webp" }, "2x": { "png": "porsche-marque.medium.min.089d6dd560fff7a2bf613ae6d528990e@2x.png", "webp": "porsche-marque.medium.min.7f0893dc57f2607a2cb0b817d96cb985@2x.webp" }, "3x": { "png": "porsche-marque.medium.min.2cb874345ef290831c929f6caabfeef8@3x.png", "webp": "porsche-marque.medium.min.3534cf066b4e2e737dca62de495f9616@3x.webp" } }, "small": { "1x": { "png": "porsche-marque.small.min.ac2042736af5512cf547c89fa7924c4f@1x.png", "webp": "porsche-marque.small.min.005debed5bf72cf0a9a791b1521f5e1d@1x.webp" }, "2x": { "png": "porsche-marque.small.min.22f1e9dc90399d9a5287eda689b60dba@2x.png", "webp": "porsche-marque.small.min.df4317325d04ffef28c7839aa6d499a0@2x.webp" }, "3x": { "png": "porsche-marque.small.min.49209245f04eadef8817b9bbae80d3e1@3x.png", "webp": "porsche-marque.small.min.cfd6149aaa3bc5b3b522538e5f650890@3x.webp" } } }, "porscheMarque75": { "medium": { "1x": { "png": "porsche-marque75.medium.min.0a02e2256062de963f2fef2c02d20200@1x.png", "webp": "porsche-marque75.medium.min.99b2d657558f0531d639782974e8fd06@1x.webp" }, "2x": { "png": "porsche-marque75.medium.min.1d41ecfb8f5277d3f4bd65d25d22eea3@2x.png", "webp": "porsche-marque75.medium.min.e32580cd1ac179e354ed8fcb31694168@2x.webp" }, "3x": { "png": "porsche-marque75.medium.min.373bcb5f89d31c8b6084e66e902b9f4c@3x.png", "webp": "porsche-marque75.medium.min.4a003d1e5e81db062bf92d52ba797087@3x.webp" } }, "small": { "1x": { "png": "porsche-marque75.small.min.f5b37fe12cd4487432ff77fdd8469f7d@1x.png", "webp": "porsche-marque75.small.min.146b06cffe2b11c07f3113a51f337b98@1x.webp" }, "2x": { "png": "porsche-marque75.small.min.20d86908f2190640a6f24fce1ee49035@2x.png", "webp": "porsche-marque75.small.min.025770f8db54857874c130999b370ed8@2x.webp" }, "3x": { "png": "porsche-marque75.small.min.e89b13e14a088a273107bf1057f7f67d@3x.png", "webp": "porsche-marque75.small.min.a725d2ec7bd07be17afd8feb2589b156@3x.webp" } } } };
 
 const MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.min.493a9e3509d6e263fa2207150082def5.svg", "width": 79, "height": 26 }, "911": { "src": "911.min.b68f913216168583298ccf83f1a6b8d5.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.min.c321738789b37fda4bba3f7c587542aa.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.min.25562011631a831516f91ec31d144104.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.min.cc8919694c002873e1bb6a3c1dae5d41.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.min.a1844f4c8d23b75e371745e9b8eb49b9.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.min.6dae8095186567168f85c145845f090c.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.min.df444c6f4cc1f627ceaf1b02584d6bea.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.min.73f1e10731caffe93c07d96fa08546c1.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.min.6a4084a8704a6c47a099b2de56b22aef.svg", "width": 143, "height": 25 } };
-
-// NOTE: handpicked selection of plugins from jss-preset-default
-createJss({
-    plugins: [
-        jssGlobal(),
-        jssNested(),
-        camelCase(),
-        jssPluginSortMediaQueries({ combineMediaQueries: true }),
-    ],
-});
-const supportsConstructableStylesheets = () => {
-    try {
-        return typeof new CSSStyleSheet().replaceSync === 'function';
-    }
-    catch {
-        return false;
-    }
-};
-// determine it once
-supportsConstructableStylesheets();
 const isScrollable = (isPrevHidden, isNextHidden) => {
     return !(isPrevHidden && isNextHidden);
 };

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.cjs

@@ -112,8 +112,9 @@ class DSRCarousel extends react.Component {
                 ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
                 : !this.props.disablePagination
             : this.props.pagination, utilsEntry.isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] || this.props.alignHeader), this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "header", children: [hasHeadingPropOrSlot && (this.props.heading ? jsxRuntime.jsx("h2", { id: headingId, children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" })), hasDescriptionPropOrSlot && (this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", { name: "description" })), hasControlsSlot && jsxRuntime.jsx("slot", { name: "controls" }), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", ...utilsEntry.parseAndGetAriaAttributes({
-                                        'aria-label': this.props.heading,
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "header", children: [hasHeadingPropOrSlot &&
+                                            (this.props.heading ? (jsxRuntime.jsx("h2", { className: "heading", id: headingId, children: this.props.heading })) : (jsxRuntime.jsx("div", { className: "heading", id: headingId, children: jsxRuntime.jsx("slot", { name: "heading" }) }))), hasDescriptionPropOrSlot && (this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", { name: "description" })), hasControlsSlot && jsxRuntime.jsx("slot", { name: "controls" }), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", ...utilsEntry.parseAndGetAriaAttributes({
+                                        'aria-labelledby': hasHeadingPropOrSlot && !this.props.aria ? headingId : undefined,
                                         ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
                                     }), children: jsxRuntime.jsx("div", { className: "splide__track", children: jsxRuntime.jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsxRuntime.jsx("div", { className: "splide__slide", children: jsxRuntime.jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), (this.props.disablePagination ? this.props.disablePagination !== true : this.props.pagination) && (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx("div", { className: "pagination-container", "aria-hidden": "true", children: jsxRuntime.jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
     }