@porsche-design-system/components-react 3.19.0 → 3.20.0-rc.0
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.
- package/CHANGELOG.md +13 -0
- package/cjs/lib/components/canvas.wrapper.cjs +1 -1
- package/esm/lib/components/canvas.wrapper.d.ts +10 -10
- package/esm/lib/components/canvas.wrapper.mjs +1 -1
- package/esm/lib/types.d.ts +6 -0
- package/package.json +2 -2
- package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs +262 -104
- package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs +1 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/canvas.wrapper.cjs +1 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/canvas.cjs +28 -16
- package/ssr/esm/components/dist/styles/esm/styles-entry.mjs +262 -104
- package/ssr/esm/components/dist/utils/esm/utils-entry.mjs +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/canvas.wrapper.mjs +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/canvas.mjs +28 -16
- package/ssr/esm/lib/components/canvas.wrapper.d.ts +10 -10
- package/ssr/esm/lib/dsr-components/canvas.d.ts +14 -7
- package/ssr/esm/lib/types.d.ts +6 -0
|
@@ -3423,7 +3423,7 @@ const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-des
|
|
|
3423
3423
|
var CRESTS_MANIFEST = { "porscheCrest": { "1x": { "png": "porsche-crest.d76137c@1x.png", "webp": "porsche-crest.0d0cc89@1x.webp" }, "2x": { "png": "porsche-crest.8a292fb@2x.png", "webp": "porsche-crest.2245c45@2x.webp" }, "3x": { "png": "porsche-crest.18d6f02@3x.png", "webp": "porsche-crest.19b4292@3x.webp" } } };
|
|
3424
3424
|
|
|
3425
3425
|
// index.ts
|
|
3426
|
-
var ICONS_MANIFEST = { "360": "360.0600731.svg", "accessibility": "accessibility.087d747.svg", "active-cabin-ventilation": "active-cabin-ventilation.b081399.svg", "add": "add.fac861a.svg", "adjust": "adjust.ca46bd4.svg", "arrow-double-down": "arrow-double-down.61ae4d7.svg", "arrow-double-left": "arrow-double-left.1b576eb.svg", "arrow-double-right": "arrow-double-right.dcfabff.svg", "arrow-double-up": "arrow-double-up.fb73db5.svg", "arrow-down": "arrow-down.49c6983.svg", "arrow-first": "arrow-first.beb7d9f.svg", "arrow-head-down": "arrow-head-down.1e3cbb8.svg", "arrow-head-left": "arrow-head-left.cf1395d.svg", "arrow-head-right": "arrow-head-right.304b330.svg", "arrow-head-up": "arrow-head-up.6d3fd23.svg", "arrow-last": "arrow-last.cc24903.svg", "arrow-left": "arrow-left.e03c25b.svg", "arrow-right": "arrow-right.872716b.svg", "arrow-up": "arrow-up.9d294d1.svg", "augmented-reality": "augmented-reality.8b6ce95.svg", "battery-empty": "battery-empty.38b4b15.svg", "battery-empty-co2": "battery-empty-co2.c4cabef.svg", "battery-empty-fuel": "battery-empty-fuel.e833e13.svg", "battery-full": "battery-full.03de75d.svg", "bell": "bell.1eab3a2.svg", "bookmark": "bookmark.9d6982f.svg", "bookmark-filled": "bookmark-filled.327ac78.svg", "broadcast": "broadcast.0ad5a15.svg", "calculator": "calculator.a323a2d.svg", "calendar": "calendar.70a6a12.svg", "camera": "camera.e5e95b9.svg", "car": "car.35229c9.svg", "car-battery": "car-battery.895510f.svg", "card": "card.f284448.svg", "charging-active": "charging-active.c3aa214.svg", "charging-state": "charging-state.f56d8df.svg", "charging-station": "charging-station.5ff1ed4.svg", "chart": "chart.c8c32d2.svg", "chat": "chat.7945544.svg", "check": "check.8ba06be.svg", "city": "city.5ae672c.svg", "climate": "climate.a9d5818.svg", "climate-control": "climate-control.ce31939.svg", "clock": "clock.c88a1ef.svg", "close": "close.eec3c5d.svg", "closed-caption": "closed-caption.ceaf6cb.svg", "co2-class": "co2-class.fc49211.svg", "co2-emission": "co2-emission.c42e7f8.svg", "compare": "compare.6578829.svg", "configurate": "configurate.5311c8d.svg", "copy": "copy.0fcd086.svg", "country-road": "country-road.d2bbc5a.svg", "cubic-capacity": "cubic-capacity.7b0b8c8.svg", "delete": "delete.5a8c8ca.svg", "disable": "disable.5918c32.svg", "document": "document.df36b6c.svg", "download": "download.c06f455.svg", "duration": "duration.94e5252.svg", "edit": "edit.330f321.svg", "email": "email.f2530de.svg", "error-filled": "error-filled.a4d06ed.svg", "exclamation": "exclamation.46cd17b.svg", "external": "external.fb677b9.svg", "filter": "filter.610f808.svg", "fingerprint": "fingerprint.6a85170.svg", "flash": "flash.88a2ada.svg", "fuel-station": "fuel-station.f7bdf51.svg", "garage": "garage.5014e8d.svg", "gift": "gift.7beb1eb.svg", "globe": "globe.56cc8fc.svg", "grid": "grid.06bc31a.svg", "heart": "heart.9a5962e.svg", "heart-filled": "heart-filled.dd7decf.svg", "highway": "highway.b7c0a70.svg", "home": "home.7b1d1da.svg", "horn": "horn.bf47b1a.svg", "image": "image.b2614f0.svg", "increase": "increase.700012f.svg", "information": "information.da41162.svg", "information-filled": "information-filled.8f08911.svg", "key": "key.ee5d89b.svg", "leaf": "leaf.92ca6a6.svg", "leather": "leather.1d2769a.svg", "light": "light.f0eb8e4.svg", "list": "list.411dd00.svg", "locate": "locate.6554f9e.svg", "lock": "lock.243281a.svg", "lock-open": "lock-open.95803d2.svg", "logo-apple-podcast": "logo-apple-podcast.09be038.svg", "logo-baidu": "logo-baidu.9e89c7d.svg", "logo-delicious": "logo-delicious.e83f574.svg", "logo-digg": "logo-digg.f096670.svg", "logo-facebook": "logo-facebook.74abe88.svg", "logo-foursquare": "logo-foursquare.d638fd8.svg", "logo-gmail": "logo-gmail.5f96ee2.svg", "logo-google": "logo-google.1dee423.svg", "logo-hatena": "logo-hatena.da509f0.svg", "logo-instagram": "logo-instagram.b916daa.svg", "logo-kaixin": "logo-kaixin.b1211a2.svg", "logo-kakaotalk": "logo-kakaotalk.38f5396.svg", "logo-linkedin": "logo-linkedin.b72559f.svg", "logo-naver": "logo-naver.75588fe.svg", "logo-pinterest": "logo-pinterest.e8f6963.svg", "logo-qq": "logo-qq.6d9b6d9.svg", "logo-qq-share": "logo-qq-share.ee864d9.svg", "logo-reddit": "logo-reddit.da13e44.svg", "logo-skyrock": "logo-skyrock.eb2f28d.svg", "logo-sohu": "logo-sohu.a30c66b.svg", "logo-spotify": "logo-spotify.2ec4b2d.svg", "logo-tecent": "logo-tecent.d119e85.svg", "logo-telegram": "logo-telegram.d151481.svg", "logo-tiktok": "logo-tiktok.2f3a465.svg", "logo-tumblr": "logo-tumblr.c689f44.svg", "logo-twitter": "logo-twitter.5f2490a.svg", "logo-viber": "logo-viber.198bd43.svg", "logo-vk": "logo-vk.37b94e0.svg", "logo-wechat": "logo-wechat.83b2b98.svg", "logo-weibo": "logo-weibo.c8dacee.svg", "logo-whatsapp": "logo-whatsapp.add9a6d.svg", "logo-x": "logo-x.5f2490a.svg", "logo-xing": "logo-xing.3a8df0f.svg", "logo-yahoo": "logo-yahoo.8cbd0ba.svg", "logo-youku": "logo-youku.fe988d0.svg", "logo-youtube": "logo-youtube.da3798f.svg", "logout": "logout.7ec7451.svg", "map": "map.c16f618.svg", "menu-dots-horizontal": "menu-dots-horizontal.788f7fa.svg", "menu-dots-vertical": "menu-dots-vertical.4970a65.svg", "menu-lines": "menu-lines.e332216.svg", "minus": "minus.f6d964c.svg", "mobile": "mobile.7f35446.svg", "moon": "moon.5b73246.svg", "oil-can": "oil-can.cb58fc7.svg", "parking-brake": "parking-brake.45704bd.svg", "parking-light": "parking-light.c49a231.svg", "pause": "pause.e41b935.svg", "phone": "phone.f4f774b.svg", "pin": "pin.3417cec.svg", "pin-filled": "pin-filled.7b8e9ba.svg", "play": "play.24226d4.svg", "plug": "plug.c159935.svg", "plus": "plus.319993e.svg", "preheating": "preheating.e2a796f.svg", "printer": "printer.f59b0ee.svg", "purchase": "purchase.9cd6d65.svg", "push-pin": "push-pin.89e4ead.svg", "push-pin-off": "push-pin-off.ba99213.svg", "qr": "qr.87a49a3.svg", "question": "question.3402a63.svg", "racing-flag": "racing-flag.b7ddcc8.svg", "refresh": "refresh.41fd868.svg", "replay": "replay.55a99f2.svg", "reset": "reset.e53d52f.svg", "roof-closed": "roof-closed.018d021.svg", "roof-open": "roof-open.51c8ee6.svg", "route": "route.f4fbbb4.svg", "rss": "rss.0e77baf.svg", "save": "save.6171ff5.svg", "screen": "screen.420be15.svg", "search": "search.3f0f1ce.svg", "send": "send.b32099c.svg", "share": "share.a0b30da.svg", "shopping-bag": "shopping-bag.3f91a9b.svg", "shopping-bag-filled": "shopping-bag-filled.abf6c98.svg", "shopping-cart": "shopping-cart.370e224.svg", "shopping-cart-filled": "shopping-cart-filled.e0c3a65.svg", "sidelights": "sidelights.65c9dd9.svg", "snowflake": "snowflake.83907b3.svg", "sort": "sort.92b50bd.svg", "stack": "stack.804af93.svg", "star": "star.4c5bb15.svg", "star-filled": "star-filled.84ef2f6.svg", "steering-wheel": "steering-wheel.4dea19e.svg", "stopwatch": "stopwatch.0e048a4.svg", "subtract": "subtract.57eed1d.svg", "success": "success.b16d4c1.svg", "success-filled": "success-filled.1832d98.svg", "sun": "sun.4301cbd.svg", "switch": "switch.66f74c4.svg", "tablet": "tablet.07341ac.svg", "tachometer": "tachometer.3a2fc3c.svg", "tire": "tire.e5c9372.svg", "truck": "truck.2c26c04.svg", "upload": "upload.d1f5a2a.svg", "user": "user.c18dabe.svg", "user-filled": "user-filled.2ea646d.svg", "user-group": "user-group.79cdf86.svg", "user-manual": "user-manual.470e243.svg", "video": "video.7590689.svg", "view": "view.5b4d7f6.svg", "view-off": "view-off.a4ede54.svg", "volume-off": "volume-off.bcd49e7.svg", "volume-up": "volume-up.2084f60.svg", "warning": "warning.59927e6.svg", "warning-filled": "warning-filled.1f6fe21.svg", "weight": "weight.b57a60d.svg", "wifi": "wifi.e2a8d9c.svg", "work": "work.9dd71a4.svg", "wrench": "wrench.09a2a67.svg", "wrenches": "wrenches.d2ed45d.svg", "zoom-in": "zoom-in.ff299b8.svg", "zoom-out": "zoom-out.ebb6246.svg" };
|
|
3426
|
+
var ICONS_MANIFEST = { "360": "360.0600731.svg", "accessibility": "accessibility.087d747.svg", "active-cabin-ventilation": "active-cabin-ventilation.b081399.svg", "add": "add.fac861a.svg", "adjust": "adjust.ca46bd4.svg", "arrow-double-down": "arrow-double-down.61ae4d7.svg", "arrow-double-left": "arrow-double-left.1b576eb.svg", "arrow-double-right": "arrow-double-right.dcfabff.svg", "arrow-double-up": "arrow-double-up.fb73db5.svg", "arrow-down": "arrow-down.49c6983.svg", "arrow-first": "arrow-first.beb7d9f.svg", "arrow-head-down": "arrow-head-down.1e3cbb8.svg", "arrow-head-left": "arrow-head-left.cf1395d.svg", "arrow-head-right": "arrow-head-right.304b330.svg", "arrow-head-up": "arrow-head-up.6d3fd23.svg", "arrow-last": "arrow-last.cc24903.svg", "arrow-left": "arrow-left.e03c25b.svg", "arrow-right": "arrow-right.872716b.svg", "arrow-up": "arrow-up.9d294d1.svg", "attachment": "attachment.8f3dd0a.svg", "augmented-reality": "augmented-reality.8b6ce95.svg", "battery-empty": "battery-empty.38b4b15.svg", "battery-empty-co2": "battery-empty-co2.c4cabef.svg", "battery-empty-fuel": "battery-empty-fuel.e833e13.svg", "battery-full": "battery-full.03de75d.svg", "bell": "bell.1eab3a2.svg", "bookmark": "bookmark.9d6982f.svg", "bookmark-filled": "bookmark-filled.327ac78.svg", "broadcast": "broadcast.0ad5a15.svg", "calculator": "calculator.a323a2d.svg", "calendar": "calendar.70a6a12.svg", "camera": "camera.e5e95b9.svg", "car": "car.35229c9.svg", "car-battery": "car-battery.895510f.svg", "card": "card.f284448.svg", "charging-active": "charging-active.c3aa214.svg", "charging-state": "charging-state.f56d8df.svg", "charging-station": "charging-station.5ff1ed4.svg", "chart": "chart.c8c32d2.svg", "chat": "chat.7945544.svg", "check": "check.8ba06be.svg", "city": "city.5ae672c.svg", "climate": "climate.a9d5818.svg", "climate-control": "climate-control.ce31939.svg", "clock": "clock.c88a1ef.svg", "close": "close.eec3c5d.svg", "closed-caption": "closed-caption.ceaf6cb.svg", "co2-class": "co2-class.fc49211.svg", "co2-emission": "co2-emission.c42e7f8.svg", "compare": "compare.6578829.svg", "configurate": "configurate.5311c8d.svg", "copy": "copy.0fcd086.svg", "country-road": "country-road.d2bbc5a.svg", "cubic-capacity": "cubic-capacity.7b0b8c8.svg", "delete": "delete.5a8c8ca.svg", "disable": "disable.5918c32.svg", "dislike": "dislike.51614b0.svg", "dislike-filled": "dislike-filled.e1a8c4d.svg", "document": "document.df36b6c.svg", "download": "download.c06f455.svg", "duration": "duration.94e5252.svg", "edit": "edit.330f321.svg", "email": "email.f2530de.svg", "error-filled": "error-filled.a4d06ed.svg", "exclamation": "exclamation.46cd17b.svg", "external": "external.fb677b9.svg", "filter": "filter.610f808.svg", "fingerprint": "fingerprint.6a85170.svg", "flash": "flash.88a2ada.svg", "fuel-station": "fuel-station.f7bdf51.svg", "garage": "garage.5014e8d.svg", "gift": "gift.7beb1eb.svg", "globe": "globe.56cc8fc.svg", "grid": "grid.06bc31a.svg", "heart": "heart.9a5962e.svg", "heart-filled": "heart-filled.dd7decf.svg", "highway": "highway.b7c0a70.svg", "home": "home.7b1d1da.svg", "horn": "horn.bf47b1a.svg", "image": "image.b2614f0.svg", "increase": "increase.700012f.svg", "information": "information.da41162.svg", "information-filled": "information-filled.8f08911.svg", "key": "key.ee5d89b.svg", "leaf": "leaf.92ca6a6.svg", "leather": "leather.1d2769a.svg", "light": "light.f0eb8e4.svg", "like": "like.a7468cd.svg", "like-filled": "like-filled.a0126c1.svg", "list": "list.411dd00.svg", "locate": "locate.6554f9e.svg", "lock": "lock.243281a.svg", "lock-open": "lock-open.95803d2.svg", "logo-apple-podcast": "logo-apple-podcast.09be038.svg", "logo-baidu": "logo-baidu.9e89c7d.svg", "logo-delicious": "logo-delicious.e83f574.svg", "logo-digg": "logo-digg.f096670.svg", "logo-facebook": "logo-facebook.74abe88.svg", "logo-foursquare": "logo-foursquare.d638fd8.svg", "logo-gmail": "logo-gmail.5f96ee2.svg", "logo-google": "logo-google.1dee423.svg", "logo-hatena": "logo-hatena.da509f0.svg", "logo-instagram": "logo-instagram.b916daa.svg", "logo-kaixin": "logo-kaixin.b1211a2.svg", "logo-kakaotalk": "logo-kakaotalk.38f5396.svg", "logo-linkedin": "logo-linkedin.b72559f.svg", "logo-naver": "logo-naver.75588fe.svg", "logo-pinterest": "logo-pinterest.e8f6963.svg", "logo-qq": "logo-qq.6d9b6d9.svg", "logo-qq-share": "logo-qq-share.ee864d9.svg", "logo-reddit": "logo-reddit.da13e44.svg", "logo-skyrock": "logo-skyrock.eb2f28d.svg", "logo-sohu": "logo-sohu.a30c66b.svg", "logo-spotify": "logo-spotify.2ec4b2d.svg", "logo-tecent": "logo-tecent.d119e85.svg", "logo-telegram": "logo-telegram.d151481.svg", "logo-tiktok": "logo-tiktok.2f3a465.svg", "logo-tumblr": "logo-tumblr.c689f44.svg", "logo-twitter": "logo-twitter.5f2490a.svg", "logo-viber": "logo-viber.198bd43.svg", "logo-vk": "logo-vk.37b94e0.svg", "logo-wechat": "logo-wechat.83b2b98.svg", "logo-weibo": "logo-weibo.c8dacee.svg", "logo-whatsapp": "logo-whatsapp.add9a6d.svg", "logo-x": "logo-x.5f2490a.svg", "logo-xing": "logo-xing.3a8df0f.svg", "logo-yahoo": "logo-yahoo.8cbd0ba.svg", "logo-youku": "logo-youku.fe988d0.svg", "logo-youtube": "logo-youtube.da3798f.svg", "logout": "logout.7ec7451.svg", "map": "map.c16f618.svg", "menu-dots-horizontal": "menu-dots-horizontal.788f7fa.svg", "menu-dots-vertical": "menu-dots-vertical.4970a65.svg", "menu-lines": "menu-lines.e332216.svg", "minus": "minus.f6d964c.svg", "mobile": "mobile.7f35446.svg", "moon": "moon.5b73246.svg", "new-chat": "new-chat.95ffd2e.svg", "oil-can": "oil-can.cb58fc7.svg", "parking-brake": "parking-brake.45704bd.svg", "parking-light": "parking-light.c49a231.svg", "pause": "pause.e41b935.svg", "phone": "phone.f4f774b.svg", "pin": "pin.3417cec.svg", "pin-filled": "pin-filled.7b8e9ba.svg", "play": "play.24226d4.svg", "plug": "plug.c159935.svg", "plus": "plus.319993e.svg", "preheating": "preheating.e2a796f.svg", "printer": "printer.f59b0ee.svg", "purchase": "purchase.9cd6d65.svg", "push-pin": "push-pin.89e4ead.svg", "push-pin-off": "push-pin-off.ba99213.svg", "qr": "qr.87a49a3.svg", "question": "question.3402a63.svg", "racing-flag": "racing-flag.b7ddcc8.svg", "refresh": "refresh.41fd868.svg", "replay": "replay.55a99f2.svg", "reset": "reset.e53d52f.svg", "roof-closed": "roof-closed.018d021.svg", "roof-open": "roof-open.51c8ee6.svg", "route": "route.f4fbbb4.svg", "rss": "rss.0e77baf.svg", "save": "save.6171ff5.svg", "screen": "screen.420be15.svg", "search": "search.3f0f1ce.svg", "send": "send.b32099c.svg", "share": "share.a0b30da.svg", "shopping-bag": "shopping-bag.3f91a9b.svg", "shopping-bag-filled": "shopping-bag-filled.abf6c98.svg", "shopping-cart": "shopping-cart.370e224.svg", "shopping-cart-filled": "shopping-cart-filled.e0c3a65.svg", "sidelights": "sidelights.65c9dd9.svg", "snowflake": "snowflake.83907b3.svg", "sort": "sort.92b50bd.svg", "stack": "stack.804af93.svg", "star": "star.4c5bb15.svg", "star-filled": "star-filled.84ef2f6.svg", "steering-wheel": "steering-wheel.4dea19e.svg", "stopwatch": "stopwatch.0e048a4.svg", "subtract": "subtract.57eed1d.svg", "success": "success.b16d4c1.svg", "success-filled": "success-filled.1832d98.svg", "sun": "sun.4301cbd.svg", "switch": "switch.66f74c4.svg", "tablet": "tablet.07341ac.svg", "tachometer": "tachometer.3a2fc3c.svg", "tire": "tire.e5c9372.svg", "truck": "truck.2c26c04.svg", "upload": "upload.d1f5a2a.svg", "user": "user.c18dabe.svg", "user-filled": "user-filled.2ea646d.svg", "user-group": "user-group.79cdf86.svg", "user-manual": "user-manual.470e243.svg", "video": "video.7590689.svg", "view": "view.5b4d7f6.svg", "view-off": "view-off.a4ede54.svg", "volume-off": "volume-off.bcd49e7.svg", "volume-up": "volume-up.2084f60.svg", "warning": "warning.59927e6.svg", "warning-filled": "warning-filled.1f6fe21.svg", "weight": "weight.b57a60d.svg", "wifi": "wifi.e2a8d9c.svg", "work": "work.9dd71a4.svg", "wrench": "wrench.09a2a67.svg", "wrenches": "wrenches.d2ed45d.svg", "zoom-in": "zoom-in.ff299b8.svg", "zoom-out": "zoom-out.ebb6246.svg" };
|
|
3427
3427
|
|
|
3428
3428
|
// index.ts
|
|
3429
3429
|
var MARQUES_MANIFEST = { "porscheMarqueTrademark": { "medium": { "1x": { "png": "porsche-marque-trademark.medium.da07531@1x.png", "webp": "porsche-marque-trademark.medium.5c6af9a@1x.webp" }, "2x": { "png": "porsche-marque-trademark.medium.aa801f4@2x.png", "webp": "porsche-marque-trademark.medium.fff6e9b@2x.webp" }, "3x": { "png": "porsche-marque-trademark.medium.824818d@3x.png", "webp": "porsche-marque-trademark.medium.f67092f@3x.webp" } }, "small": { "1x": { "png": "porsche-marque-trademark.small.020244b@1x.png", "webp": "porsche-marque-trademark.small.7836397@1x.webp" }, "2x": { "png": "porsche-marque-trademark.small.92184fa@2x.png", "webp": "porsche-marque-trademark.small.760a57e@2x.webp" }, "3x": { "png": "porsche-marque-trademark.small.fd545ce@3x.png", "webp": "porsche-marque-trademark.small.1726036@3x.webp" } } }, "porscheMarque": { "medium": { "1x": { "png": "porsche-marque.medium.a986274@1x.png", "webp": "porsche-marque.medium.fa908e4@1x.webp" }, "2x": { "png": "porsche-marque.medium.089d6dd@2x.png", "webp": "porsche-marque.medium.7f0893d@2x.webp" }, "3x": { "png": "porsche-marque.medium.2cb8743@3x.png", "webp": "porsche-marque.medium.3534cf0@3x.webp" } }, "small": { "1x": { "png": "porsche-marque.small.ac20427@1x.png", "webp": "porsche-marque.small.005debe@1x.webp" }, "2x": { "png": "porsche-marque.small.22f1e9d@2x.png", "webp": "porsche-marque.small.df43173@2x.webp" }, "3x": { "png": "porsche-marque.small.4920924@3x.png", "webp": "porsche-marque.small.cfd6149@3x.webp" } } }, "porscheMarque75": { "medium": { "1x": { "png": "porsche-marque75.medium.0a02e22@1x.png", "webp": "porsche-marque75.medium.99b2d65@1x.webp" }, "2x": { "png": "porsche-marque75.medium.1d41ecf@2x.png", "webp": "porsche-marque75.medium.e32580c@2x.webp" }, "3x": { "png": "porsche-marque75.medium.373bcb5@3x.png", "webp": "porsche-marque75.medium.4a003d1@3x.webp" } }, "small": { "1x": { "png": "porsche-marque75.small.f5b37fe@1x.png", "webp": "porsche-marque75.small.146b06c@1x.webp" }, "2x": { "png": "porsche-marque75.small.20d8690@2x.png", "webp": "porsche-marque75.small.025770f@2x.webp" }, "3x": { "png": "porsche-marque75.small.e89b13e@3x.png", "webp": "porsche-marque75.small.a725d2e@3x.webp" } } } };
|
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/canvas.wrapper.mjs
CHANGED
|
@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
|
|
|
5
5
|
import { syncRef } from '../../utils.mjs';
|
|
6
6
|
import { DSRCanvas } from '../dsr-components/canvas.mjs';
|
|
7
7
|
|
|
8
|
-
const PCanvas = forwardRef(({ sidebarEndIcon = '
|
|
8
|
+
const PCanvas = forwardRef(({ sidebarEndIcon = 'menu-lines', sidebarEndOpen = false, sidebarStartIcon = 'menu-lines', sidebarStartOpen = false, theme, className, children, ...rest }, ref) => {
|
|
9
9
|
const elementRef = useRef();
|
|
10
10
|
const WebComponentTag = usePrefix('p-canvas');
|
|
11
11
|
const propsToSync = [sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme || useTheme()];
|
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/canvas.mjs
CHANGED
|
@@ -79,35 +79,47 @@ import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
|
|
|
79
79
|
import { getCanvasCss as getComponentCss$13 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
|
|
80
80
|
|
|
81
81
|
/**
|
|
82
|
-
* @slot {"name": "
|
|
82
|
+
* @slot {"name": "title", "description": "Renders the application name in the header section. In case **sidebar-start slot** is present it will be rendered in the corresponding flyout on mobile view." }
|
|
83
|
+
* @slot {"name": "header-start", "description": "Renders a **sticky** header section above the content area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On desktop view, in case **sidebar-start slot** is present and opened it will be rendered within." }
|
|
83
84
|
* @slot {"name": "header-end", "description": "Renders a **sticky** header section above the content area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode)." }
|
|
84
|
-
* @slot {"name": "", "description": "Default slot for the main content" }
|
|
85
|
-
* @slot {"name": "
|
|
86
|
-
* @slot {"name": "
|
|
87
|
-
* @slot {"name": "sidebar-
|
|
88
|
-
* @slot {"name": "
|
|
85
|
+
* @slot {"name": "", "description": "Default slot for the main content." }
|
|
86
|
+
* @slot {"name": "footer", "description": "Renders a **sticky** footer section underneath the main content." }
|
|
87
|
+
* @slot {"name": "sidebar-start", "description": "Renders a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout." }
|
|
88
|
+
* @slot {"name": "sidebar-end", "description": "Renders a sidebar area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode). On mobile view it transforms into a flyout." }
|
|
89
|
+
* @slot {"name": "background", "description": "Can be used to pass a sticky media element <img/> or <video/> placed underneath the main content." }
|
|
89
90
|
*
|
|
90
91
|
* @experimental
|
|
91
92
|
*/
|
|
92
93
|
class DSRCanvas extends Component {
|
|
93
94
|
host;
|
|
94
|
-
|
|
95
|
+
isMediaQueryS = false;
|
|
96
|
+
isMediaQueryM = false;
|
|
97
|
+
hasTitle;
|
|
98
|
+
hasHeaderStart;
|
|
99
|
+
hasHeaderEnd;
|
|
95
100
|
hasSidebarStart;
|
|
96
101
|
hasSidebarEnd;
|
|
102
|
+
hasFooter;
|
|
103
|
+
hasBackground;
|
|
97
104
|
render() {
|
|
98
105
|
const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
|
|
106
|
+
const hasTitle = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;
|
|
107
|
+
const hasHeaderStart = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header-start').length > 0;
|
|
108
|
+
const hasHeaderEnd = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header-end').length > 0;
|
|
99
109
|
const hasSidebarStart = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-start').length > 0;
|
|
100
110
|
const hasSidebarEnd = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-end').length > 0;
|
|
111
|
+
const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
|
|
112
|
+
const hasBackground = namedSlotChildren.filter(({ props: { slot } }) => slot === 'background').length > 0;
|
|
101
113
|
const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$13(this.props.theme, this.props.sidebarStartOpen, this.props.sidebarEndOpen)));
|
|
102
|
-
return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "canvas", children: [jsxs("header", { children: [jsxs("div", { className: "header", children: [hasSidebarStart && (jsxs(PButton, { theme: this.props.theme, icon: this.props.sidebarStartIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })),
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
114
|
+
return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "canvas", children: [jsxs("header", { children: [jsxs("div", { className: "blur-layers", children: [jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {})] }), jsxs("div", { className: "header", children: [hasSidebarStart && !this.props.sidebarStartOpen && (jsxs(PButton, { theme: this.props.theme, icon: this.props.sidebarStartIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), hasHeaderStart && ((hasSidebarStart && !this.props.sidebarStartOpen) || !hasSidebarStart) && (jsx("slot", { name: "header-start" })), hasTitle && ((hasSidebarStart && this.props.isMediaQueryS) || !hasSidebarStart) && (jsx("h2", { children: jsx("slot", { name: "title" }) }))] }), jsx(PCrest, { className: "crest" }), jsx(PWordmark, { className: "wordmark", size: "inherit", theme: this.props.theme }), jsxs("div", { className: "header", children: [hasHeaderEnd && jsx("slot", { name: "header-end" }), hasSidebarEnd && (jsxs(PButton, { theme: this.props.theme, icon: this.props.sidebarEndIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] }))] })] }), jsx("main", { children: jsx("slot", {}) }), hasFooter && (jsx("footer", { children: jsx("slot", { name: "footer" }) })), hasSidebarStart && this.props.isMediaQueryS && (jsx("aside", { className: "sidebar-start",
|
|
115
|
+
// "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
|
|
116
|
+
// eslint-disable-next-line
|
|
117
|
+
/* @ts-ignore */
|
|
118
|
+
inert: this.props.sidebarStartOpen ? null : true, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, children: jsxs("div", { className: "scroller", children: [jsxs("div", { className: "sidebar-header", children: [jsxs(PButton, { theme: this.props.theme, icon: this.props.sidebarStartIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }), hasHeaderStart && jsx("slot", { name: "header-start" })] }), jsx("slot", { name: "sidebar-start" })] }) })), hasSidebarEnd && this.props.isMediaQueryM && (jsx("aside", { className: "sidebar-end",
|
|
119
|
+
// "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
|
|
120
|
+
// eslint-disable-next-line
|
|
121
|
+
/* @ts-ignore */
|
|
122
|
+
inert: this.props.sidebarEndOpen ? null : true, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, children: jsxs("div", { className: "scroller", children: [jsx("div", { className: "sidebar-header", children: jsxs(PButton, { theme: this.props.theme, icon: "close", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }) }), jsx("slot", { name: "sidebar-end" })] }) })), hasBackground && jsx("slot", { name: "background" })] }), hasSidebarStart && !this.props.isMediaQueryS && (jsxs(PFlyout, { className: "flyout-start", theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: [hasTitle && (jsx("h2", { slot: "header", children: jsx("slot", { name: "title" }) })), jsx("slot", { name: "sidebar-start" })] })), hasSidebarEnd && !this.props.isMediaQueryM && (jsx(PFlyout, { className: "flyout-end", theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsx("slot", { name: "sidebar-end" }) }))] })] }), this.props.children] }));
|
|
111
123
|
}
|
|
112
124
|
}
|
|
113
125
|
|
|
@@ -2,45 +2,45 @@ import type { BaseProps } from '../../BaseProps';
|
|
|
2
2
|
import type { CanvasSidebarEndIcon, CanvasSidebarStartIcon, Theme } from '../types';
|
|
3
3
|
export type PCanvasProps = BaseProps & {
|
|
4
4
|
/**
|
|
5
|
-
* The icon to toggle the
|
|
5
|
+
* The icon to toggle the sidebar on the end side
|
|
6
6
|
*/
|
|
7
7
|
sidebarEndIcon?: CanvasSidebarEndIcon;
|
|
8
8
|
/**
|
|
9
|
-
* Open
|
|
9
|
+
* Open the sidebar on the end side
|
|
10
10
|
*/
|
|
11
11
|
sidebarEndOpen?: boolean;
|
|
12
12
|
/**
|
|
13
|
-
* The icon to toggle the
|
|
13
|
+
* The icon to toggle the sidebar on the start side
|
|
14
14
|
*/
|
|
15
15
|
sidebarStartIcon?: CanvasSidebarStartIcon;
|
|
16
16
|
/**
|
|
17
|
-
* Open
|
|
17
|
+
* Open the sidebar on the start side
|
|
18
18
|
*/
|
|
19
19
|
sidebarStartOpen?: boolean;
|
|
20
20
|
/**
|
|
21
|
-
* Adapts the color depending on the theme.
|
|
21
|
+
* Adapts the color depending on the theme.
|
|
22
22
|
*/
|
|
23
23
|
theme?: Theme;
|
|
24
24
|
};
|
|
25
25
|
export declare const PCanvas: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
|
|
26
26
|
/**
|
|
27
|
-
* The icon to toggle the
|
|
27
|
+
* The icon to toggle the sidebar on the end side
|
|
28
28
|
*/
|
|
29
29
|
sidebarEndIcon?: CanvasSidebarEndIcon;
|
|
30
30
|
/**
|
|
31
|
-
* Open
|
|
31
|
+
* Open the sidebar on the end side
|
|
32
32
|
*/
|
|
33
33
|
sidebarEndOpen?: boolean;
|
|
34
34
|
/**
|
|
35
|
-
* The icon to toggle the
|
|
35
|
+
* The icon to toggle the sidebar on the start side
|
|
36
36
|
*/
|
|
37
37
|
sidebarStartIcon?: CanvasSidebarStartIcon;
|
|
38
38
|
/**
|
|
39
|
-
* Open
|
|
39
|
+
* Open the sidebar on the start side
|
|
40
40
|
*/
|
|
41
41
|
sidebarStartOpen?: boolean;
|
|
42
42
|
/**
|
|
43
|
-
* Adapts the color depending on the theme.
|
|
43
|
+
* Adapts the color depending on the theme.
|
|
44
44
|
*/
|
|
45
45
|
theme?: Theme;
|
|
46
46
|
} & {
|
|
@@ -1,19 +1,26 @@
|
|
|
1
1
|
import { Component } from 'react';
|
|
2
2
|
/**
|
|
3
|
-
* @slot {"name": "
|
|
3
|
+
* @slot {"name": "title", "description": "Renders the application name in the header section. In case **sidebar-start slot** is present it will be rendered in the corresponding flyout on mobile view." }
|
|
4
|
+
* @slot {"name": "header-start", "description": "Renders a **sticky** header section above the content area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On desktop view, in case **sidebar-start slot** is present and opened it will be rendered within." }
|
|
4
5
|
* @slot {"name": "header-end", "description": "Renders a **sticky** header section above the content area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode)." }
|
|
5
|
-
* @slot {"name": "", "description": "Default slot for the main content" }
|
|
6
|
-
* @slot {"name": "
|
|
7
|
-
* @slot {"name": "
|
|
8
|
-
* @slot {"name": "sidebar-
|
|
9
|
-
* @slot {"name": "
|
|
6
|
+
* @slot {"name": "", "description": "Default slot for the main content." }
|
|
7
|
+
* @slot {"name": "footer", "description": "Renders a **sticky** footer section underneath the main content." }
|
|
8
|
+
* @slot {"name": "sidebar-start", "description": "Renders a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout." }
|
|
9
|
+
* @slot {"name": "sidebar-end", "description": "Renders a sidebar area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode). On mobile view it transforms into a flyout." }
|
|
10
|
+
* @slot {"name": "background", "description": "Can be used to pass a sticky media element <img/> or <video/> placed underneath the main content." }
|
|
10
11
|
*
|
|
11
12
|
* @experimental
|
|
12
13
|
*/
|
|
13
14
|
export declare class DSRCanvas extends Component<any> {
|
|
14
15
|
host: HTMLElement;
|
|
15
|
-
private
|
|
16
|
+
private isMediaQueryS;
|
|
17
|
+
private isMediaQueryM;
|
|
18
|
+
private hasTitle;
|
|
19
|
+
private hasHeaderStart;
|
|
20
|
+
private hasHeaderEnd;
|
|
16
21
|
private hasSidebarStart;
|
|
17
22
|
private hasSidebarEnd;
|
|
23
|
+
private hasFooter;
|
|
24
|
+
private hasBackground;
|
|
18
25
|
render(): JSX.Element;
|
|
19
26
|
}
|
package/ssr/esm/lib/types.d.ts
CHANGED
|
@@ -233,6 +233,7 @@ declare const ICON_NAMES: readonly [
|
|
|
233
233
|
"arrow-left",
|
|
234
234
|
"arrow-right",
|
|
235
235
|
"arrow-up",
|
|
236
|
+
"attachment",
|
|
236
237
|
"augmented-reality",
|
|
237
238
|
"battery-empty",
|
|
238
239
|
"battery-empty-co2",
|
|
@@ -269,6 +270,8 @@ declare const ICON_NAMES: readonly [
|
|
|
269
270
|
"cubic-capacity",
|
|
270
271
|
"delete",
|
|
271
272
|
"disable",
|
|
273
|
+
"dislike",
|
|
274
|
+
"dislike-filled",
|
|
272
275
|
"document",
|
|
273
276
|
"download",
|
|
274
277
|
"duration",
|
|
@@ -298,6 +301,8 @@ declare const ICON_NAMES: readonly [
|
|
|
298
301
|
"leaf",
|
|
299
302
|
"leather",
|
|
300
303
|
"light",
|
|
304
|
+
"like",
|
|
305
|
+
"like-filled",
|
|
301
306
|
"list",
|
|
302
307
|
"locate",
|
|
303
308
|
"lock",
|
|
@@ -346,6 +351,7 @@ declare const ICON_NAMES: readonly [
|
|
|
346
351
|
"minus",
|
|
347
352
|
"mobile",
|
|
348
353
|
"moon",
|
|
354
|
+
"new-chat",
|
|
349
355
|
"oil-can",
|
|
350
356
|
"parking-brake",
|
|
351
357
|
"parking-light",
|