@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
|
@@ -3425,7 +3425,7 @@ const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-des
|
|
|
3425
3425
|
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" } } };
|
|
3426
3426
|
|
|
3427
3427
|
// index.ts
|
|
3428
|
-
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" };
|
|
3428
|
+
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" };
|
|
3429
3429
|
|
|
3430
3430
|
// index.ts
|
|
3431
3431
|
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/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/canvas.wrapper.cjs
CHANGED
|
@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
|
|
|
7
7
|
var utils = require('../../utils.cjs');
|
|
8
8
|
var canvas = require('../dsr-components/canvas.cjs');
|
|
9
9
|
|
|
10
|
-
const PCanvas = react.forwardRef(({ sidebarEndIcon = '
|
|
10
|
+
const PCanvas = react.forwardRef(({ sidebarEndIcon = 'menu-lines', sidebarEndOpen = false, sidebarStartIcon = 'menu-lines', sidebarStartOpen = false, theme, className, children, ...rest }, ref) => {
|
|
11
11
|
const elementRef = react.useRef();
|
|
12
12
|
const WebComponentTag = hooks.usePrefix('p-canvas');
|
|
13
13
|
const propsToSync = [sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme || hooks.useTheme()];
|
package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/canvas.cjs
CHANGED
|
@@ -81,35 +81,47 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
|
|
|
81
81
|
var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
|
|
82
82
|
|
|
83
83
|
/**
|
|
84
|
-
* @slot {"name": "
|
|
84
|
+
* @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." }
|
|
85
|
+
* @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." }
|
|
85
86
|
* @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)." }
|
|
86
|
-
* @slot {"name": "", "description": "Default slot for the main content" }
|
|
87
|
-
* @slot {"name": "
|
|
88
|
-
* @slot {"name": "
|
|
89
|
-
* @slot {"name": "sidebar-
|
|
90
|
-
* @slot {"name": "
|
|
87
|
+
* @slot {"name": "", "description": "Default slot for the main content." }
|
|
88
|
+
* @slot {"name": "footer", "description": "Renders a **sticky** footer section underneath the main content." }
|
|
89
|
+
* @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." }
|
|
90
|
+
* @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." }
|
|
91
|
+
* @slot {"name": "background", "description": "Can be used to pass a sticky media element <img/> or <video/> placed underneath the main content." }
|
|
91
92
|
*
|
|
92
93
|
* @experimental
|
|
93
94
|
*/
|
|
94
95
|
class DSRCanvas extends react.Component {
|
|
95
96
|
host;
|
|
96
|
-
|
|
97
|
+
isMediaQueryS = false;
|
|
98
|
+
isMediaQueryM = false;
|
|
99
|
+
hasTitle;
|
|
100
|
+
hasHeaderStart;
|
|
101
|
+
hasHeaderEnd;
|
|
97
102
|
hasSidebarStart;
|
|
98
103
|
hasSidebarEnd;
|
|
104
|
+
hasFooter;
|
|
105
|
+
hasBackground;
|
|
99
106
|
render() {
|
|
100
107
|
const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
|
|
108
|
+
const hasTitle = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;
|
|
109
|
+
const hasHeaderStart = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header-start').length > 0;
|
|
110
|
+
const hasHeaderEnd = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header-end').length > 0;
|
|
101
111
|
const hasSidebarStart = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-start').length > 0;
|
|
102
112
|
const hasSidebarEnd = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-end').length > 0;
|
|
113
|
+
const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
|
|
114
|
+
const hasBackground = namedSlotChildren.filter(({ props: { slot } }) => slot === 'background').length > 0;
|
|
103
115
|
const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCanvasCss(this.props.theme, this.props.sidebarStartOpen, this.props.sidebarEndOpen)));
|
|
104
|
-
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: "canvas", children: [jsxRuntime.jsxs("header", { children: [jsxRuntime.jsxs("div", { className: "header", children: [hasSidebarStart && (jsxRuntime.jsxs(button_wrapper.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"] })),
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
116
|
+
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: "canvas", children: [jsxRuntime.jsxs("header", { children: [jsxRuntime.jsxs("div", { className: "blur-layers", children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {})] }), jsxRuntime.jsxs("div", { className: "header", children: [hasSidebarStart && !this.props.sidebarStartOpen && (jsxRuntime.jsxs(button_wrapper.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) && (jsxRuntime.jsx("slot", { name: "header-start" })), hasTitle && ((hasSidebarStart && this.props.isMediaQueryS) || !hasSidebarStart) && (jsxRuntime.jsx("h2", { children: jsxRuntime.jsx("slot", { name: "title" }) }))] }), jsxRuntime.jsx(crest_wrapper.PCrest, { className: "crest" }), jsxRuntime.jsx(wordmark_wrapper.PWordmark, { className: "wordmark", size: "inherit", theme: this.props.theme }), jsxRuntime.jsxs("div", { className: "header", children: [hasHeaderEnd && jsxRuntime.jsx("slot", { name: "header-end" }), hasSidebarEnd && (jsxRuntime.jsxs(button_wrapper.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"] }))] })] }), jsxRuntime.jsx("main", { children: jsxRuntime.jsx("slot", {}) }), hasFooter && (jsxRuntime.jsx("footer", { children: jsxRuntime.jsx("slot", { name: "footer" }) })), hasSidebarStart && this.props.isMediaQueryS && (jsxRuntime.jsx("aside", { className: "sidebar-start",
|
|
117
|
+
// "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
|
|
118
|
+
// eslint-disable-next-line
|
|
119
|
+
/* @ts-ignore */
|
|
120
|
+
inert: this.props.sidebarStartOpen ? null : true, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsxs("div", { className: "scroller", children: [jsxRuntime.jsxs("div", { className: "sidebar-header", children: [jsxRuntime.jsxs(button_wrapper.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 && jsxRuntime.jsx("slot", { name: "header-start" })] }), jsxRuntime.jsx("slot", { name: "sidebar-start" })] }) })), hasSidebarEnd && this.props.isMediaQueryM && (jsxRuntime.jsx("aside", { className: "sidebar-end",
|
|
121
|
+
// "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
|
|
122
|
+
// eslint-disable-next-line
|
|
123
|
+
/* @ts-ignore */
|
|
124
|
+
inert: this.props.sidebarEndOpen ? null : true, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsxs("div", { className: "scroller", children: [jsxRuntime.jsx("div", { className: "sidebar-header", children: jsxRuntime.jsxs(button_wrapper.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"] }) }), jsxRuntime.jsx("slot", { name: "sidebar-end" })] }) })), hasBackground && jsxRuntime.jsx("slot", { name: "background" })] }), hasSidebarStart && !this.props.isMediaQueryS && (jsxRuntime.jsxs(flyout_wrapper.PFlyout, { className: "flyout-start", theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: [hasTitle && (jsxRuntime.jsx("h2", { slot: "header", children: jsxRuntime.jsx("slot", { name: "title" }) })), jsxRuntime.jsx("slot", { name: "sidebar-start" })] })), hasSidebarEnd && !this.props.isMediaQueryM && (jsxRuntime.jsx(flyout_wrapper.PFlyout, { className: "flyout-end", theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) }))] })] }), this.props.children] }));
|
|
113
125
|
}
|
|
114
126
|
}
|
|
115
127
|
|
|
@@ -4706,14 +4706,28 @@ const getComponentCss$14 = (icon, iconSource, variant, hideLabel, disabled, load
|
|
|
4706
4706
|
}));
|
|
4707
4707
|
};
|
|
4708
4708
|
|
|
4709
|
+
// TODO: styling needs to be cleaned up
|
|
4709
4710
|
const cssVarSidebarStartWidth = '--p-canvas-sidebar-start-width';
|
|
4710
4711
|
const cssVarSidebarEndWidth = '--p-canvas-sidebar-end-width';
|
|
4711
|
-
const
|
|
4712
|
+
const cssVarGridColumns = '--p-canvas-grid-columns';
|
|
4713
|
+
const cssVarGridMaxWidth = '--p-canvas-grid-max-width';
|
|
4714
|
+
const spacingBase = gridGap.replace('36px', '24px');
|
|
4715
|
+
const mainGridColumnGap = gridGap.replace('36px', '24px').replace('vw', 'cqw');
|
|
4716
|
+
// const mainGridRowGap = gridGap.replace('vw', 'cqw');
|
|
4717
|
+
const mediaQueryTabletView = getMediaQueryMin('s');
|
|
4712
4718
|
const mediaQueryDesktopView = getMediaQueryMin('m');
|
|
4713
4719
|
const sidebarWidth = '320px';
|
|
4714
|
-
const
|
|
4720
|
+
const sidebarStartWidth = `var(${cssVarSidebarStartWidth}, ${sidebarWidth})`;
|
|
4721
|
+
const sidebarEndWidth = `var(${cssVarSidebarEndWidth}, ${sidebarWidth})`;
|
|
4722
|
+
const sidebarTransition = getTransition('margin');
|
|
4723
|
+
const borderRadius = '16px';
|
|
4724
|
+
const headerPadding = spacingStaticSmall;
|
|
4725
|
+
const headerMinHeight = '56px';
|
|
4715
4726
|
const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
|
|
4716
|
-
const { primaryColor, backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
|
|
4727
|
+
const { primaryColor, backgroundColor, backgroundSurfaceColor, contrastLowColor } = getThemedColors(theme);
|
|
4728
|
+
const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
|
|
4729
|
+
const footerGradientDark = '0%';
|
|
4730
|
+
const footerGradient = isThemeDark(theme) ? footerGradientDark : '100%';
|
|
4717
4731
|
return getCss({
|
|
4718
4732
|
'@global': {
|
|
4719
4733
|
':host': {
|
|
@@ -4721,6 +4735,10 @@ const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
|
|
|
4721
4735
|
...addImportantToEachRule({
|
|
4722
4736
|
...colorSchemeStyles,
|
|
4723
4737
|
...hostHiddenStyles,
|
|
4738
|
+
containerType: 'inline-size',
|
|
4739
|
+
marginInlineStart: isSidebarStartOpen ? sidebarStartWidth : 0,
|
|
4740
|
+
marginInlineEnd: isSidebarEndOpen ? sidebarEndWidth : 0,
|
|
4741
|
+
transition: sidebarTransition,
|
|
4724
4742
|
}),
|
|
4725
4743
|
},
|
|
4726
4744
|
...preventFoucOfNestedElementsStyles,
|
|
@@ -4730,164 +4748,294 @@ const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
|
|
|
4730
4748
|
alignItems: 'center',
|
|
4731
4749
|
gap: spacingStaticSmall,
|
|
4732
4750
|
},
|
|
4733
|
-
|
|
4734
|
-
|
|
4735
|
-
|
|
4736
|
-
|
|
4737
|
-
|
|
4738
|
-
|
|
4739
|
-
|
|
4740
|
-
|
|
4741
|
-
|
|
4742
|
-
'
|
|
4743
|
-
|
|
4744
|
-
|
|
4745
|
-
|
|
4746
|
-
|
|
4747
|
-
|
|
4748
|
-
|
|
4749
|
-
|
|
4750
|
-
'&(.p-module--more-space-above-medium)': {
|
|
4751
|
-
marginTop: spacingStaticMedium,
|
|
4752
|
-
},
|
|
4753
|
-
'&(.p-module--more-space-above-large)': {
|
|
4754
|
-
marginTop: spacingStaticLarge,
|
|
4755
|
-
},
|
|
4756
|
-
'&(.p-module--less-space-above-small)': {
|
|
4757
|
-
marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticSmall}))`,
|
|
4758
|
-
},
|
|
4759
|
-
'&(.p-module--less-space-above-medium)': {
|
|
4760
|
-
marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticMedium}))`,
|
|
4761
|
-
},
|
|
4762
|
-
'&(.p-module--less-space-above-large)': {
|
|
4763
|
-
marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticLarge}))`,
|
|
4764
|
-
},
|
|
4765
|
-
'&(.p-flex)': {
|
|
4766
|
-
display: 'flex',
|
|
4767
|
-
},
|
|
4768
|
-
'&(.p-align-items--center)': {
|
|
4769
|
-
alignItems: 'center',
|
|
4770
|
-
},
|
|
4771
|
-
'&(.p-gap--small)': {
|
|
4772
|
-
gap: spacingStaticSmall,
|
|
4773
|
-
},
|
|
4774
|
-
'&(.p-gap--medium)': {
|
|
4775
|
-
gap: spacingStaticMedium,
|
|
4776
|
-
},
|
|
4777
|
-
'&(.p-gap--large)': {
|
|
4778
|
-
gap: spacingStaticLarge,
|
|
4751
|
+
},
|
|
4752
|
+
'slot[name="background"]': {
|
|
4753
|
+
display: 'block',
|
|
4754
|
+
gridArea: '1/1/-1/-1',
|
|
4755
|
+
position: 'sticky',
|
|
4756
|
+
top: 0,
|
|
4757
|
+
zIndex: 0,
|
|
4758
|
+
width: '100dvw',
|
|
4759
|
+
height: '100dvh',
|
|
4760
|
+
pointerEvents: 'none',
|
|
4761
|
+
overflow: 'hidden',
|
|
4762
|
+
transform: 'translate3d(0,0,0)', // needed for Safari to force GPU acceleration
|
|
4763
|
+
'&::slotted(video), &::slotted(img)': {
|
|
4764
|
+
width: '100%',
|
|
4765
|
+
height: '100%',
|
|
4766
|
+
objectFit: 'cover',
|
|
4767
|
+
transition: getTransition('opacity', 'veryLong'),
|
|
4779
4768
|
},
|
|
4780
4769
|
},
|
|
4781
4770
|
'slot[name="title"]::slotted(a)': {
|
|
4782
4771
|
textDecoration: 'none',
|
|
4783
4772
|
color: 'inherit',
|
|
4784
4773
|
},
|
|
4774
|
+
'slot[name="sidebar-start"]': {
|
|
4775
|
+
display: 'block',
|
|
4776
|
+
marginTop: spacingFluidMedium,
|
|
4777
|
+
[mediaQueryTabletView]: {
|
|
4778
|
+
marginTop: 0,
|
|
4779
|
+
},
|
|
4780
|
+
},
|
|
4785
4781
|
h2: {
|
|
4786
|
-
...
|
|
4782
|
+
...textXSmallStyle,
|
|
4783
|
+
textOverflow: 'ellipsis',
|
|
4784
|
+
overflow: 'hidden',
|
|
4785
|
+
whiteSpace: 'nowrap',
|
|
4786
|
+
margin: 0,
|
|
4787
4787
|
color: primaryColor,
|
|
4788
4788
|
textTransform: 'uppercase',
|
|
4789
4789
|
letterSpacing: '2px',
|
|
4790
|
+
...prefersColorSchemeDarkMediaQuery(theme, {
|
|
4791
|
+
color: primaryColorDark,
|
|
4792
|
+
}),
|
|
4790
4793
|
},
|
|
4791
4794
|
'header, main, footer, aside': {
|
|
4792
|
-
padding:
|
|
4795
|
+
padding: spacingBase,
|
|
4793
4796
|
boxSizing: 'border-box',
|
|
4794
4797
|
zIndex: 0,
|
|
4795
4798
|
},
|
|
4796
4799
|
header: {
|
|
4800
|
+
paddingBlock: headerPadding,
|
|
4797
4801
|
gridArea: 'header',
|
|
4798
4802
|
position: 'sticky',
|
|
4803
|
+
minHeight: headerMinHeight,
|
|
4804
|
+
boxSizing: 'border-box',
|
|
4799
4805
|
top: 0,
|
|
4800
|
-
zIndex:
|
|
4801
|
-
height: headerHeight,
|
|
4806
|
+
zIndex: 100,
|
|
4802
4807
|
display: 'grid',
|
|
4803
4808
|
gridTemplateColumns: 'minmax(0, 1fr) auto minmax(0, 1fr)',
|
|
4804
|
-
gap:
|
|
4805
|
-
backgroundColor: backgroundSurfaceColor,
|
|
4809
|
+
gap: spacingBase,
|
|
4806
4810
|
alignItems: 'center',
|
|
4807
|
-
paddingBlock: 0,
|
|
4808
|
-
'&::before, &::after': {
|
|
4809
|
-
content: '""',
|
|
4810
|
-
position: 'absolute',
|
|
4811
|
-
backgroundColor: 'transparent',
|
|
4812
|
-
bottom: `calc(${borderRadiusLarge} * -2)`,
|
|
4813
|
-
height: `calc(${borderRadiusLarge} * 2)`,
|
|
4814
|
-
width: borderRadiusLarge,
|
|
4815
|
-
boxShadow: `0 -${borderRadiusLarge} 0 0 ${backgroundSurfaceColor}`,
|
|
4816
|
-
pointerEvents: 'none',
|
|
4817
|
-
},
|
|
4818
|
-
'&::before': {
|
|
4819
|
-
left: 0,
|
|
4820
|
-
borderTopLeftRadius: borderRadiusLarge,
|
|
4821
|
-
},
|
|
4822
|
-
'&::after': {
|
|
4823
|
-
right: 0,
|
|
4824
|
-
borderTopRightRadius: borderRadiusLarge,
|
|
4825
|
-
},
|
|
4826
4811
|
},
|
|
4827
|
-
|
|
4828
|
-
|
|
4829
|
-
|
|
4830
|
-
|
|
4831
|
-
|
|
4832
|
-
|
|
4812
|
+
'header .blur-layers': {
|
|
4813
|
+
position: 'absolute',
|
|
4814
|
+
inset: 0,
|
|
4815
|
+
zIndex: -1,
|
|
4816
|
+
pointerEvents: 'none',
|
|
4817
|
+
height: '100%',
|
|
4818
|
+
width: '100%',
|
|
4819
|
+
},
|
|
4820
|
+
'header .blur-layers:before': {
|
|
4821
|
+
content: '""',
|
|
4822
|
+
zIndex: 1,
|
|
4823
|
+
WebkitBackdropFilter: 'blur(64px)',
|
|
4824
|
+
backdropFilter: 'blur(64px)',
|
|
4825
|
+
WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 100%) 0%, rgba(0, 0, 0, 1) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 37.5%)', // Safari prefix
|
|
4826
|
+
maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 100%) 0%, rgba(0, 0, 0, 1) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 37.5%)',
|
|
4827
|
+
position: 'absolute',
|
|
4828
|
+
top: 0,
|
|
4829
|
+
left: 0,
|
|
4830
|
+
right: 0,
|
|
4831
|
+
bottom: 0,
|
|
4832
|
+
},
|
|
4833
|
+
'header .blur-layers > div': {
|
|
4834
|
+
position: 'absolute',
|
|
4835
|
+
top: 0,
|
|
4836
|
+
left: 0,
|
|
4837
|
+
right: 0,
|
|
4838
|
+
bottom: 0,
|
|
4839
|
+
},
|
|
4840
|
+
'header .blur-layers > div:nth-of-type(1)': {
|
|
4841
|
+
zIndex: 2,
|
|
4842
|
+
WebkitBackdropFilter: 'blur(32px)',
|
|
4843
|
+
backdropFilter: 'blur(32px)',
|
|
4844
|
+
WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 0) 50%)',
|
|
4845
|
+
maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 0) 50%)',
|
|
4846
|
+
},
|
|
4847
|
+
'header .blur-layers > div:nth-of-type(2)': {
|
|
4848
|
+
zIndex: 3,
|
|
4849
|
+
WebkitBackdropFilter: 'blur(16px)',
|
|
4850
|
+
backdropFilter: 'blur(16px)',
|
|
4851
|
+
WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 62.5%)',
|
|
4852
|
+
maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 62.5%)',
|
|
4853
|
+
},
|
|
4854
|
+
'header .blur-layers > div:nth-of-type(3)': {
|
|
4855
|
+
zIndex: 4,
|
|
4856
|
+
WebkitBackdropFilter: 'blur(8px)',
|
|
4857
|
+
backdropFilter: 'blur(8px)',
|
|
4858
|
+
WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 0) 75%)',
|
|
4859
|
+
maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 0) 75%)',
|
|
4860
|
+
},
|
|
4861
|
+
'header .blur-layers > div:nth-of-type(4)': {
|
|
4862
|
+
zIndex: 5,
|
|
4863
|
+
WebkitBackdropFilter: 'blur(4px)',
|
|
4864
|
+
backdropFilter: 'blur(4px)',
|
|
4865
|
+
WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 87.5%)',
|
|
4866
|
+
maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 87.5%)',
|
|
4867
|
+
},
|
|
4868
|
+
'header .blur-layers > div:nth-of-type(5)': {
|
|
4869
|
+
zIndex: 6,
|
|
4870
|
+
WebkitBackdropFilter: 'blur(2px)',
|
|
4871
|
+
backdropFilter: 'blur(2px)',
|
|
4872
|
+
WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%)',
|
|
4873
|
+
maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%)',
|
|
4874
|
+
},
|
|
4875
|
+
'header .blur-layers > div:nth-of-type(6)': {
|
|
4876
|
+
zIndex: 7,
|
|
4877
|
+
WebkitBackdropFilter: 'blur(1px)',
|
|
4878
|
+
backdropFilter: 'blur(1px)',
|
|
4879
|
+
WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 1) 100%)',
|
|
4880
|
+
maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 1) 100%)',
|
|
4881
|
+
},
|
|
4882
|
+
'header .blur-layers:after': {
|
|
4883
|
+
content: '""',
|
|
4884
|
+
zIndex: 8,
|
|
4885
|
+
WebkitBackdropFilter: 'blur(0.5px)',
|
|
4886
|
+
backdropFilter: 'blur(0.5px)',
|
|
4887
|
+
WebkitMaskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%)',
|
|
4888
|
+
maskImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%)',
|
|
4889
|
+
},
|
|
4890
|
+
'main, footer': {
|
|
4833
4891
|
display: 'grid',
|
|
4834
|
-
gridTemplateColumns:
|
|
4835
|
-
|
|
4892
|
+
gridTemplateColumns: `repeat(var(${cssVarGridColumns}, 12), minmax(0, 1fr))`,
|
|
4893
|
+
columnGap: mainGridColumnGap,
|
|
4836
4894
|
alignContent: 'flex-start',
|
|
4837
|
-
|
|
4838
|
-
|
|
4839
|
-
|
|
4840
|
-
|
|
4841
|
-
|
|
4842
|
-
|
|
4843
|
-
|
|
4844
|
-
},
|
|
4895
|
+
maxWidth: `var(${cssVarGridMaxWidth}, none)`,
|
|
4896
|
+
marginInline: 'auto',
|
|
4897
|
+
},
|
|
4898
|
+
main: {
|
|
4899
|
+
zIndex: 10,
|
|
4900
|
+
gridArea: 'main',
|
|
4901
|
+
width: '100%',
|
|
4845
4902
|
},
|
|
4846
4903
|
footer: {
|
|
4904
|
+
position: 'sticky',
|
|
4905
|
+
bottom: 0,
|
|
4906
|
+
width: '100%',
|
|
4847
4907
|
gridArea: 'footer',
|
|
4848
|
-
|
|
4908
|
+
zIndex: 200,
|
|
4909
|
+
paddingBottom: spacingFluidSmall,
|
|
4910
|
+
'&::before': {
|
|
4911
|
+
content: '""',
|
|
4912
|
+
zIndex: '-1',
|
|
4913
|
+
position: 'absolute',
|
|
4914
|
+
inset: '-140px -50dvw 0',
|
|
4915
|
+
pointerEvents: 'none',
|
|
4916
|
+
background: `linear-gradient(to bottom, hsla(0, 0%, ${footerGradient}, 0) 0%, hsla(0, 0%, ${footerGradient}, 0.013) 8.1%, hsla(0, 0%, ${footerGradient}, 0.049) 15.5%, hsla(0, 0%, ${footerGradient}, 0.104) 22.5%, hsla(0, 0%, ${footerGradient}, 0.175) 29%, hsla(0, 0%, ${footerGradient}, 0.259) 35.3%, hsla(0, 0%, ${footerGradient}, 0.352) 41.2%, hsla(0, 0%, ${footerGradient}, 0.45) 47.1%, hsla(0, 0%, ${footerGradient}, 0.55) 52.9%, hsla(0, 0%, ${footerGradient}, 0.648) 58.8%, hsla(0, 0%, ${footerGradient}, 0.741) 64.7%, hsla(0, 0%, ${footerGradient}, 0.825) 71%, hsla(0, 0%, ${footerGradient}, 0.896) 77.5%, hsla(0, 0%, ${footerGradient}, 0.951) 84.5%, hsla(0, 0%, ${footerGradient}, 0.987) 91.9%, hsl(0, 0%, ${footerGradient}) 100%)`,
|
|
4917
|
+
...prefersColorSchemeDarkMediaQuery(theme, {
|
|
4918
|
+
background: `linear-gradient(to bottom, hsla(0, 0%, ${footerGradientDark}, 0) 0%, hsla(0, 0%, ${footerGradientDark}, 0.013) 8.1%, hsla(0, 0%, ${footerGradientDark}, 0.049) 15.5%, hsla(0, 0%, ${footerGradientDark}, 0.104) 22.5%, hsla(0, 0%, ${footerGradientDark}, 0.175) 29%, hsla(0, 0%, ${footerGradientDark}, 0.259) 35.3%, hsla(0, 0%, ${footerGradientDark}, 0.352) 41.2%, hsla(0, 0%, ${footerGradientDark}, 0.45) 47.1%, hsla(0, 0%, ${footerGradientDark}, 0.55) 52.9%, hsla(0, 0%, ${footerGradientDark}, 0.648) 58.8%, hsla(0, 0%, ${footerGradientDark}, 0.741) 64.7%, hsla(0, 0%, ${footerGradientDark}, 0.825) 71%, hsla(0, 0%, ${footerGradientDark}, 0.896) 77.5%, hsla(0, 0%, ${footerGradientDark}, 0.951) 84.5%, hsla(0, 0%, ${footerGradientDark}, 0.987) 91.9%, hsl(0, 0%, ${footerGradientDark}) 100%)`,
|
|
4919
|
+
}),
|
|
4920
|
+
},
|
|
4849
4921
|
},
|
|
4850
4922
|
aside: {
|
|
4851
|
-
|
|
4923
|
+
zIndex: 200,
|
|
4924
|
+
transition: sidebarTransition,
|
|
4852
4925
|
position: 'sticky',
|
|
4853
|
-
top:
|
|
4854
|
-
height:
|
|
4855
|
-
|
|
4926
|
+
top: 0,
|
|
4927
|
+
height: '100dvh',
|
|
4928
|
+
},
|
|
4929
|
+
},
|
|
4930
|
+
scroller: {
|
|
4931
|
+
position: 'absolute',
|
|
4932
|
+
inset: 0,
|
|
4933
|
+
padding: spacingBase,
|
|
4934
|
+
overflow: 'hidden auto',
|
|
4935
|
+
display: 'grid',
|
|
4936
|
+
gridTemplateRows: 'auto 1fr',
|
|
4937
|
+
gap: spacingBase,
|
|
4938
|
+
},
|
|
4939
|
+
'sidebar-header': {
|
|
4940
|
+
display: 'flex',
|
|
4941
|
+
gap: spacingStaticSmall,
|
|
4942
|
+
alignItems: 'center',
|
|
4943
|
+
justifyContent: 'var(--p-internal-justify)',
|
|
4944
|
+
position: 'sticky',
|
|
4945
|
+
top: `calc(${spacingBase} * -1)`,
|
|
4946
|
+
padding: `${headerPadding} ${spacingBase}`,
|
|
4947
|
+
marginBlockStart: `calc(${spacingBase} * -1)`,
|
|
4948
|
+
marginInline: `calc(${spacingBase} * -1)`,
|
|
4949
|
+
zIndex: 1,
|
|
4950
|
+
minHeight: headerMinHeight,
|
|
4951
|
+
boxSizing: 'border-box',
|
|
4952
|
+
'&::before': {
|
|
4953
|
+
content: '""',
|
|
4954
|
+
zIndex: '-1',
|
|
4955
|
+
position: 'absolute',
|
|
4956
|
+
inset: '0 0 -8px',
|
|
4957
|
+
background: 'var(--p-internal-gradient)',
|
|
4958
|
+
pointerEvents: 'none',
|
|
4856
4959
|
},
|
|
4857
4960
|
},
|
|
4858
4961
|
'sidebar-start': {
|
|
4859
|
-
|
|
4860
|
-
|
|
4962
|
+
'--p-internal-gradient': `linear-gradient(180deg, ${backgroundSurfaceColor} 0%, ${backgroundSurfaceColor} 65%, rgba(255,255,255,0) 100%)`,
|
|
4963
|
+
'--p-internal-justify': 'flex-start',
|
|
4964
|
+
backgroundColor: backgroundSurfaceColor,
|
|
4861
4965
|
gridArea: 'sidebar-start',
|
|
4862
|
-
width:
|
|
4863
|
-
marginInlineStart: isSidebarStartOpen
|
|
4966
|
+
width: sidebarStartWidth,
|
|
4967
|
+
marginInlineStart: isSidebarStartOpen
|
|
4968
|
+
? 0
|
|
4969
|
+
: `calc((var(${cssVarSidebarStartWidth}, ${sidebarWidth}) + ${borderRadius}) * -1)`,
|
|
4970
|
+
...prefersColorSchemeDarkMediaQuery(theme, {
|
|
4971
|
+
'--p-internal-gradient': `linear-gradient(180deg, ${backgroundSurfaceColorDark} 0%, ${backgroundSurfaceColorDark} 65%, rgba(255,255,255,0) 100%)`,
|
|
4972
|
+
backgroundColor: backgroundSurfaceColorDark,
|
|
4973
|
+
}),
|
|
4974
|
+
'&::before': {
|
|
4975
|
+
content: '""',
|
|
4976
|
+
zIndex: '-1',
|
|
4977
|
+
position: 'absolute',
|
|
4978
|
+
backgroundColor: 'transparent',
|
|
4979
|
+
right: `-${borderRadius}`,
|
|
4980
|
+
height: `calc(${borderRadius} * 2)`,
|
|
4981
|
+
width: borderRadius,
|
|
4982
|
+
pointerEvents: 'none',
|
|
4983
|
+
top: 0,
|
|
4984
|
+
borderTopLeftRadius: borderRadius,
|
|
4985
|
+
boxShadow: `0 -${borderRadius} 0 0 ${backgroundSurfaceColor}`,
|
|
4986
|
+
...prefersColorSchemeDarkMediaQuery(theme, {
|
|
4987
|
+
boxShadow: `0 -${borderRadius} 0 0 ${backgroundSurfaceColorDark}`,
|
|
4988
|
+
}),
|
|
4989
|
+
},
|
|
4864
4990
|
},
|
|
4865
4991
|
'sidebar-end': {
|
|
4866
|
-
|
|
4992
|
+
'--p-internal-gradient': `linear-gradient(180deg, ${backgroundColor} 0%, ${backgroundColor} 65%, rgba(255,255,255,0) 100%)`,
|
|
4993
|
+
'--p-internal-justify': 'flex-end',
|
|
4994
|
+
borderInlineStart: `1px solid ${contrastLowColor}`,
|
|
4867
4995
|
backgroundColor,
|
|
4868
4996
|
gridArea: 'sidebar-end',
|
|
4869
|
-
width:
|
|
4997
|
+
width: sidebarEndWidth,
|
|
4870
4998
|
marginInlineEnd: isSidebarEndOpen ? 0 : `calc(var(${cssVarSidebarEndWidth}, ${sidebarWidth}) * -1)`,
|
|
4999
|
+
overflow: 'hidden auto',
|
|
5000
|
+
...prefersColorSchemeDarkMediaQuery(theme, {
|
|
5001
|
+
borderColor: contrastLowColorDark,
|
|
5002
|
+
backgroundColor: backgroundColorDark,
|
|
5003
|
+
'--p-internal-gradient': `linear-gradient(180deg, ${backgroundColorDark} 0%, ${backgroundColorDark} 65%, rgba(255,255,255,0) 100%)`,
|
|
5004
|
+
}),
|
|
4871
5005
|
},
|
|
4872
5006
|
canvas: {
|
|
5007
|
+
marginInlineStart: isSidebarStartOpen ? `calc(${sidebarStartWidth} * -1)` : 0,
|
|
5008
|
+
marginInlineEnd: isSidebarEndOpen ? `calc(${sidebarEndWidth} * -1)` : 0,
|
|
5009
|
+
transition: sidebarTransition,
|
|
4873
5010
|
display: 'grid',
|
|
4874
5011
|
gridTemplateRows: 'auto minmax(0, 1fr) auto',
|
|
4875
5012
|
gridTemplateAreas: '"header" "main" "footer"',
|
|
4876
5013
|
minWidth: '320px',
|
|
4877
5014
|
minHeight: '100dvh',
|
|
5015
|
+
font: textSmallStyle.font,
|
|
5016
|
+
color: primaryColor,
|
|
5017
|
+
backgroundColor,
|
|
5018
|
+
...prefersColorSchemeDarkMediaQuery(theme, {
|
|
5019
|
+
color: primaryColorDark,
|
|
5020
|
+
backgroundColor: backgroundColorDark,
|
|
5021
|
+
}),
|
|
5022
|
+
[mediaQueryTabletView]: {
|
|
5023
|
+
gridTemplate: 'auto minmax(0, 1fr) / auto minmax(0, 1fr) auto',
|
|
5024
|
+
gridTemplateAreas: '"sidebar-start header" "sidebar-start main" "sidebar-start footer"',
|
|
5025
|
+
},
|
|
4878
5026
|
[mediaQueryDesktopView]: {
|
|
4879
5027
|
gridTemplate: 'auto minmax(0, 1fr) auto / auto minmax(0, 1fr) auto',
|
|
4880
|
-
gridTemplateAreas: '"
|
|
5028
|
+
gridTemplateAreas: '"sidebar-start header sidebar-end" "sidebar-start main sidebar-end" "sidebar-start footer sidebar-end"',
|
|
4881
5029
|
},
|
|
4882
5030
|
},
|
|
4883
5031
|
crest: {
|
|
4884
|
-
[
|
|
5032
|
+
[`@container(min-width:${breakpointS}px)`]: {
|
|
4885
5033
|
display: 'none',
|
|
4886
5034
|
},
|
|
4887
5035
|
},
|
|
4888
5036
|
wordmark: {
|
|
4889
5037
|
height: '10px',
|
|
4890
|
-
[
|
|
5038
|
+
[`@container(max-width:${breakpointS - 1}px)`]: {
|
|
4891
5039
|
display: 'none',
|
|
4892
5040
|
},
|
|
4893
5041
|
},
|
|
@@ -4899,6 +5047,16 @@ const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
|
|
|
4899
5047
|
justifyContent: 'end',
|
|
4900
5048
|
},
|
|
4901
5049
|
},
|
|
5050
|
+
'flyout-start': {
|
|
5051
|
+
// TODO: why does the flyout component has a fixed min-width defined, should be a CSS variable too?
|
|
5052
|
+
'--p-flyout-width': '100dvw',
|
|
5053
|
+
'--p-flyout-max-width': sidebarStartWidth,
|
|
5054
|
+
},
|
|
5055
|
+
'flyout-end': {
|
|
5056
|
+
// TODO: why does the flyout component has a fixed min-width defined, should be a CSS variable too?
|
|
5057
|
+
'--p-flyout-width': '100dvw',
|
|
5058
|
+
'--p-flyout-max-width': sidebarEndWidth,
|
|
5059
|
+
},
|
|
4902
5060
|
});
|
|
4903
5061
|
};
|
|
4904
5062
|
|