@porsche-design-system/components-react 3.1.0 → 3.2.0-rc.0

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

@@ -158,14 +158,17 @@ const hasVisibleIcon = (iconName, iconSource) => {
 };
 
 const childrenMutationMap = new Map();
-const getObservedNode = (mutatedNode) => childrenMutationMap.has(mutatedNode) ? mutatedNode : getObservedNode(mutatedNode.parentNode);
 hasWindow &&
     new MutationObserver((mutations) => {
-        mutations
-            // remove duplicates so we execute callback only once per node
-            .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
-            .map((mutation) => getObservedNode(mutation.target)) // recursively find root node that is initially observed
-            .forEach((node) => childrenMutationMap.get(node)());
+        // there may be race conditions in jsdom-polyfill tests  where the map is already empty when a mutation happens
+        if (childrenMutationMap.size) {
+            const mapKeys = Array.from(childrenMutationMap.keys());
+            mutations
+                // remove duplicates so we execute callback only once per node
+                .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
+                // find node in map that contains the mutated element to find and invoke its callback
+                .forEach((mutation) => { var _a; return (_a = childrenMutationMap.get(mapKeys.find((node) => node.contains(mutation.target)))) === null || _a === void 0 ? void 0 : _a(); });
+        }
     });
 
 const isTouchDevice = () => {
@@ -2759,7 +2762,7 @@ function convertCase(style) {
  */
 
 
-function camelCase$1() {
+function camelCase() {
   function onProcessStyle(style) {
     if (Array.isArray(style)) {
       // Handle rules like @font-face, which can have multiple styles in an array
@@ -3629,7 +3632,7 @@ createJss({
     plugins: [
         jssGlobal(),
         jssNested(),
-        camelCase$1(),
+        camelCase(),
         jssPluginSortMediaQueries({ combineMediaQueries: true }),
     ],
 });
@@ -3683,7 +3686,11 @@ const getButtonAriaAttributes = (isDisabled, isLoading, aria) => {
 };
 getMediaQueryMin('s');
 getMediaQueryMin('xxl');
-typeof HTMLElement !== 'undefined' && HTMLElement.prototype.hasOwnProperty('inert');
+// Infinite bullets will be shown if the total number of bullets is greater than this value
+const INFINITE_BULLET_THRESHOLD = 5;
+const isInfinitePagination = (amountOfPages) => {
+    return amountOfPages > INFINITE_BULLET_THRESHOLD;
+};
 
 const CDN_BASE_URL$3 = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/crest';
 const CRESTS_MANIFEST = { "porscheCrest": { "1x": { "png": "porsche-crest.min.d76137cf8cf94822b7aedb534ba88418@1x.png", "webp": "porsche-crest.min.0d0cc89ae5ee57c4c15bd0dbbcbfe5d0@1x.webp" }, "2x": { "png": "porsche-crest.min.8a292fbd35a5155789ddd011585e05c4@2x.png", "webp": "porsche-crest.min.2245c45e99be5a46b4b56e73c43d5c63@2x.webp" }, "3x": { "png": "porsche-crest.min.18d6f02003b0829bac939fade88fd4e6@3x.png", "webp": "porsche-crest.min.19b429278b158b5cb5aa6ce80751e3fe@3x.webp" } } };
@@ -3812,38 +3819,21 @@ const getSvgUrl = (model) => {
     return `${cdnBaseUrl}/${MODEL_SIGNATURES_MANIFEST[model]}`;
 };
 const modelSignatureHeight = 36;
-// TODO: create enum
-const itemTypes = {
-    PAGE: 'PAGE',
-    ELLIPSIS: 'ELLIPSIS',
-    PREVIOUS_PAGE_LINK: 'PREVIOUS_PAGE_LINK',
-    NEXT_PAGE_LINK: 'NEXT_PAGE_LINK',
-};
-// TODO: unused?
-const itemKeys = {
-    FIRST_ELLIPSIS: -1,
-    SECOND_ELLIPSIS: -2,
-    PREVIOUS_PAGE_LINK: -4,
-    NEXT_PAGE_LINK: -5,
-};
-// TODO: merge factories
-const createFirstEllipsis = (pageNumber) => ({
-    type: itemTypes.ELLIPSIS,
-    key: itemKeys.FIRST_ELLIPSIS,
-    value: pageNumber,
-    isActive: false,
-});
-const createSecondEllipsis = (pageNumber) => ({
-    type: itemTypes.ELLIPSIS,
-    key: itemKeys.SECOND_ELLIPSIS,
-    value: pageNumber,
+exports.ItemType = void 0;
+(function (ItemType) {
+    ItemType[ItemType["PAGE"] = 0] = "PAGE";
+    ItemType[ItemType["ELLIPSIS"] = 1] = "ELLIPSIS";
+    ItemType[ItemType["PREVIOUS"] = 2] = "PREVIOUS";
+    ItemType[ItemType["NEXT"] = 3] = "NEXT";
+})(exports.ItemType || (exports.ItemType = {}));
+const ellipsisItem = {
+    type: exports.ItemType.ELLIPSIS,
     isActive: false,
-});
+};
 const createPreviousPageLink = (options) => {
     const { activePage } = options;
     return {
-        type: itemTypes.PREVIOUS_PAGE_LINK,
-        key: itemKeys.PREVIOUS_PAGE_LINK,
+        type: exports.ItemType.PREVIOUS,
         value: Math.max(1, activePage - 1),
         isActive: activePage > 1,
     };
@@ -3851,78 +3841,58 @@ const createPreviousPageLink = (options) => {
 const createNextPageLink = (options) => {
     const { activePage, pageTotal } = options;
     return {
-        type: itemTypes.NEXT_PAGE_LINK,
-        key: itemKeys.NEXT_PAGE_LINK,
+        type: exports.ItemType.NEXT,
         value: Math.min(pageTotal, activePage + 1),
         isActive: activePage < pageTotal,
     };
 };
 const createPageFunctionFactory = (options) => {
-    const { activePage } = options;
     return (pageNumber) => ({
-        type: itemTypes.PAGE,
-        key: pageNumber,
+        type: exports.ItemType.PAGE,
         value: pageNumber,
-        isActive: pageNumber === activePage,
+        isActive: pageNumber === options.activePage,
     });
 };
 const createRange = (start, end) => Array.from(Array(end - start + 1)).map((_, i) => i + start);
 const createPaginationModel = (options) => {
-    // exception tests
-    if (options == null) {
-        throw new Error('createPaginationModel(): options object should be a passed');
-    }
-    const { pageTotal, activePage, pageRange } = options;
+    const { pageTotal, activePage, pageRange, showLastPage } = options;
     const boundaryPagesRange = 1;
     const ellipsisSize = 1;
-    const paginationModel = [];
+    const paginationModel = [createPreviousPageLink(options)];
     const createPage = createPageFunctionFactory(options);
-    paginationModel.push(createPreviousPageLink(options));
     // Simplify generation of pages if number of available items is equal or greater than total pages to show
     if (1 + 2 * ellipsisSize + 2 * pageRange + 2 * boundaryPagesRange >= pageTotal) {
         const allPages = createRange(1, pageTotal).map(createPage);
         paginationModel.push(...allPages);
     }
     else {
-        // Calculate group of first pages
-        const firstPagesStart = 1;
-        const firstPagesEnd = boundaryPagesRange;
-        const firstPages = createRange(firstPagesStart, firstPagesEnd).map(createPage);
-        // Calculate group of last pages
-        const lastPagesStart = pageTotal + 1 - boundaryPagesRange;
-        const lastPagesEnd = pageTotal;
-        const lastPages = createRange(lastPagesStart, lastPagesEnd).map(createPage);
-        // Calculate group of main pages
-        const mainPagesStart = Math.min(Math.max(activePage - pageRange, firstPagesEnd + ellipsisSize + 1), lastPagesStart - ellipsisSize - 2 * pageRange - 1);
-        const mainPagesEnd = mainPagesStart + 2 * pageRange;
-        const mainPages = createRange(mainPagesStart, mainPagesEnd).map(createPage);
-        // Add group of first pages
-        paginationModel.push(...firstPages);
-        // Calculate and add ellipsis before group of main pages
-        const firstEllipsisPageNumber = mainPagesStart - 1;
-        const showPageInsteadOfFirstEllipsis = firstEllipsisPageNumber === firstPagesEnd + 1;
-        const createFirstEllipsisOrPage = showPageInsteadOfFirstEllipsis ? createPage : createFirstEllipsis;
-        const firstEllipsis = createFirstEllipsisOrPage(firstEllipsisPageNumber);
-        paginationModel.push(firstEllipsis);
-        // Add group of main pages
-        paginationModel.push(...mainPages);
-        // Calculate and add ellipsis after group of main pages
-        const secondEllipsisPageNumber = mainPagesEnd + 1;
-        const showPageInsteadOfSecondEllipsis = secondEllipsisPageNumber === lastPagesStart - 1;
-        const createSecondEllipsisOrPage = showPageInsteadOfSecondEllipsis ? createPage : createSecondEllipsis;
-        const secondEllipsis = createSecondEllipsisOrPage(secondEllipsisPageNumber);
-        paginationModel.push(secondEllipsis);
-        // Add group of last pages
-        paginationModel.push(...lastPages);
+        // Add first page
+        paginationModel.push(createPage(1));
+        // Calculate group of middle pages
+        const middlePagesStart = Math.min(Math.max(activePage - pageRange, 2 + ellipsisSize), pageTotal - ellipsisSize - 2 * pageRange - (showLastPage ? 1 : 0));
+        const middlePagesEnd = middlePagesStart + 2 * pageRange;
+        const middlePages = createRange(middlePagesStart, middlePagesEnd).map(createPage);
+        // Calculate and add ellipsis before group of middle pages
+        const firstEllipsisPageNumber = middlePagesStart - 1;
+        const showPageInsteadOfFirstEllipsis = firstEllipsisPageNumber === 2;
+        const firstEllipsisOrPage = showPageInsteadOfFirstEllipsis ? createPage(firstEllipsisPageNumber) : ellipsisItem;
+        paginationModel.push(firstEllipsisOrPage);
+        // Add group of middle pages
+        paginationModel.push(...middlePages);
+        // Calculate and add ellipsis after group of middle pages
+        const lastEllipsisPageNumber = middlePagesEnd + 1;
+        const showPageInsteadOfLastEllipsis = lastEllipsisPageNumber === pageTotal - (showLastPage ? 1 : 0);
+        const lastEllipsisOrPage = showPageInsteadOfLastEllipsis ? createPage(lastEllipsisPageNumber) : ellipsisItem;
+        paginationModel.push(lastEllipsisOrPage);
+        // Add last page
+        if (showLastPage) {
+            paginationModel.push(createPage(pageTotal));
+        }
     }
     paginationModel.push(createNextPageLink(options));
     return paginationModel;
 };
 const getCurrentActivePage = (activePage, totalPages) => {
-    // exception tests
-    if (activePage === undefined || totalPages === undefined) {
-        throw new Error('getCurrentActivePage(): activePage and totalPages props must be provided');
-    }
     // Obviously we can't be on a negative or 0 page.
     if (activePage < 1) {
         activePage = 1;
@@ -3934,10 +3904,6 @@ const getCurrentActivePage = (activePage, totalPages) => {
     return activePage;
 };
 const getTotalPages = (totalItemsCount, itemsPerPage) => {
-    // exception test
-    if (totalItemsCount === undefined || itemsPerPage === undefined) {
-        throw new Error('getTotalPages(): totalItemsCount and itemsPerPage props must be provided');
-    }
     if (totalItemsCount < 1) {
         totalItemsCount = 1;
     }
@@ -4140,6 +4106,7 @@ exports.hasWindow = hasWindow;
 exports.isCustomDropdown = isCustomDropdown;
 exports.isDisabledOrLoading = isDisabledOrLoading;
 exports.isHighContrastMode = isHighContrastMode;
+exports.isInfinitePagination = isInfinitePagination;
 exports.isListTypeOrdered = isListTypeOrdered;
 exports.isScrollable = isScrollable;
 exports.isSortable = isSortable;
@@ -4149,7 +4116,6 @@ exports.isTouchDevice = isTouchDevice;
 exports.isType = isType;
 exports.isUrl = isUrl;
 exports.isWithinForm = isWithinForm;
-exports.itemTypes = itemTypes;
 exports.modelSignatureHeight = modelSignatureHeight;
 exports.parseAndGetAriaAttributes = parseAndGetAriaAttributes;
 exports.parseJSONAttribute = parseJSONAttribute;

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

@@ -6,15 +6,15 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var carousel = require('../dsr-components/carousel.js');
 
-const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'left', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, children, ...rest }, ref) => {
+const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'left', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, slidesPerPage, theme, width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme, width, wrapContent];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'pagination', 'rewind', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -25,7 +25,7 @@ const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'left'
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(carousel.DSRCarousel, { ...{ activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, slidesPerPage, theme, width, wrapContent, children } })),
+                children: (jsxRuntime.jsx(carousel.DSRCarousel, { ...{ activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme, width, wrapContent, children } })),
             }
             : {
                 children,

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/pagination.wrapper.js

@@ -6,15 +6,15 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var pagination = require('../dsr-components/pagination.js');
 
-const PPagination = react.forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, onUpdate, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
+const PPagination = react.forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, onUpdate, showLastPage = true, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'pageChange', onPageChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-pagination');
-    const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, theme, totalItemsCount];
+    const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, showLastPage, theme, totalItemsCount];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'intl', 'itemsPerPage', 'maxNumberOfPageLinks', 'theme', 'totalItemsCount'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'intl', 'itemsPerPage', 'maxNumberOfPageLinks', 'showLastPage', 'theme', 'totalItemsCount'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -25,7 +25,7 @@ const PPagination = react.forwardRef(({ activePage = 1, allyLabel, allyLabelNext
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(pagination.DSRPagination, { ...{ activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, theme, totalItemsCount } })),
+                children: (jsxRuntime.jsx(pagination.DSRPagination, { ...{ activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, showLastPage, theme, totalItemsCount } })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -25,7 +25,7 @@ require('../components/headline.wrapper.js');
 require('../components/icon.wrapper.js');
 require('../components/inline-notification.wrapper.js');
 require('../components/link.wrapper.js');
-require('../components/link-pure.wrapper.js');
+var linkPure_wrapper = require('../components/link-pure.wrapper.js');
 require('../components/link-social.wrapper.js');
 require('../components/link-tile.wrapper.js');
 require('../components/link-tile-model-signature.wrapper.js');
@@ -67,6 +67,7 @@ var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
 
 class DSRCarousel extends react.Component {
     constructor() {
@@ -89,9 +90,9 @@ class DSRCarousel extends react.Component {
             ? typeof this.props.disablePagination === 'object'
                 ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
                 : !this.props.disablePagination
-            : this.props.pagination, 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: [this.props.heading ? jsxRuntime.jsx("h2", { children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" }), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) &&
-                                            ((this.props.description && jsxRuntime.jsx("p", { children: this.props.description })) || jsxRuntime.jsx("slot", { name: "description" })), jsxRuntime.jsxs("div", { className: "nav", children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" }), jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" })] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", "aria-label": this.props.heading || ((_a = namedSlotChildren.find(({ props: { slot } }) => slot === 'heading')) === null || _a === void 0 ? void 0 : _a.props.children), 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) && (jsxRuntime.jsx("div", { className: "pagination" }))] })] }), this.props.children] }));
+            : this.props.pagination, utilsEntry.isInfinitePagination(this.props.amountOfPages), 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: [this.props.heading ? jsxRuntime.jsx("h2", { id: "heading", children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" }), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) &&
+                                            ((this.props.description && jsxRuntime.jsx("p", { children: this.props.description })) || jsxRuntime.jsx("slot", { name: "description" })), 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: "left", hideLabel: true, "aria-describedby": this.props.heading ? 'heading' : null, children: "Skip carousel entries" })), jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" }), jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" })] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", "aria-label": this.props.heading || ((_a = namedSlotChildren.find(({ props: { slot } }) => slot === 'heading')) === null || _a === void 0 ? void 0 : _a.props.children), children: jsxRuntime.jsx("div", { className: "splide__track", children: jsxRuntime.jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsxRuntime.jsx("div", { className: "splide__slide", tabIndex: 0, children: jsxRuntime.jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), (this.props.disablePagination ? this.props.disablePagination !== true : this.props.pagination) && (jsxRuntime.jsx("div", { className: "pagination-container", children: jsxRuntime.jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
     }
 }
 

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pagination.js

@@ -79,6 +79,7 @@ class DSRPagination extends react.Component {
             activePage: utilsEntry.getCurrentActivePage(this.props.activePage, pageTotal),
             pageTotal,
             pageRange: this.props.breakpointMaxNumberOfPageLinks === 7 ? 1 : 0,
+            showLastPage: this.props.showLastPage,
         });
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getPaginationCss(this.props.maxNumberOfPageLinks, this.props.theme)));
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("nav", { role: "navigation", "aria-label": this.props.allyLabel || this.props.intl.root, children: jsxRuntime.jsx("ul", { children: paginationModel.map((pageModel) => {
@@ -93,14 +94,14 @@ class DSRPagination extends react.Component {
                                     'aria-hidden': 'true',
                                 };
                                 switch (type) {
-                                    case utilsEntry.itemTypes.PREVIOUS_PAGE_LINK:
-                                        return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("span", { ...spanProps, "aria-disabled": isActive ? null : 'true', "aria-label": this.props.allyLabelPrev || this.props.intl.prev, children: jsxRuntime.jsx(icon_wrapper.PIcon, { name: "arrow-left", ...iconProps }) }) }, "prev"));
-                                    case utilsEntry.itemTypes.ELLIPSIS:
+                                    case utilsEntry.ItemType.PREVIOUS:
+                                        return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("span", { ...spanProps, "aria-label": this.props.allyLabelPrev || this.props.intl.prev, "aria-disabled": isActive ? null : 'true', children: jsxRuntime.jsx(icon_wrapper.PIcon, { name: "arrow-left", ...iconProps }) }) }, "prev"));
+                                    case utilsEntry.ItemType.ELLIPSIS:
                                         return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("span", { className: "ellipsis" }) }, "ellipsis"));
-                                    case utilsEntry.itemTypes.PAGE:
+                                    case utilsEntry.ItemType.PAGE:
                                         return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("span", { ...spanProps, tabIndex: 0, "aria-label": `${this.props.allyLabelPage || this.props.intl.page} ${value}`, "aria-current": isActive ? 'page' : null, children: value }) }, value));
-                                    case utilsEntry.itemTypes.NEXT_PAGE_LINK:
-                                        return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("span", { ...spanProps, "aria-disabled": isActive ? null : 'true', "aria-label": this.props.allyLabelNext || this.props.intl.next, children: jsxRuntime.jsx(icon_wrapper.PIcon, { name: "arrow-right", ...iconProps }) }) }, "next"));
+                                    case utilsEntry.ItemType.NEXT:
+                                        return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("span", { ...spanProps, "aria-label": this.props.allyLabelNext || this.props.intl.next, "aria-disabled": isActive ? null : 'true', children: jsxRuntime.jsx(icon_wrapper.PIcon, { name: "arrow-right", ...iconProps }) }) }, "next"));
                                 }
                             }) }) })] }) }));
     }

package/ssr/esm/components/dist/styles/esm/styles-entry.js

@@ -313,14 +313,17 @@ const hasVisibleIcon = (iconName, iconSource) => {
 };
 
 const childrenMutationMap = new Map();
-const getObservedNode = (mutatedNode) => childrenMutationMap.has(mutatedNode) ? mutatedNode : getObservedNode(mutatedNode.parentNode);
 hasWindow &&
     new MutationObserver((mutations) => {
-        mutations
-            // remove duplicates so we execute callback only once per node
-            .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
-            .map((mutation) => getObservedNode(mutation.target)) // recursively find root node that is initially observed
-            .forEach((node) => childrenMutationMap.get(node)());
+        // there may be race conditions in jsdom-polyfill tests  where the map is already empty when a mutation happens
+        if (childrenMutationMap.size) {
+            const mapKeys = Array.from(childrenMutationMap.keys());
+            mutations
+                // remove duplicates so we execute callback only once per node
+                .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
+                // find node in map that contains the mutated element to find and invoke its callback
+                .forEach((mutation) => { var _a; return (_a = childrenMutationMap.get(mapKeys.find((node) => node.contains(mutation.target)))) === null || _a === void 0 ? void 0 : _a(); });
+        }
     });
 
 /* eslint-disable no-undefined,no-param-reassign,no-shadow */
@@ -4350,6 +4353,11 @@ const getComponentCss$U = (icon, iconSource, variant, hideLabel, disabled, loadi
 
 const carouselTransitionDuration = 400;
 const bulletActiveClass = 'bullet--active';
+const paginationInfiniteStartCaseClass = 'pagination--infinite';
+const bulletInfiniteClass = 'bullet--infinite';
+const paginationBulletSize = '8px';
+const paginationInfiniteBulletSize = '4px';
+const paginationActiveBulletSize = '20px';
 const selectorHeading = 'h2,::slotted([slot=heading])';
 const selectorDescription = 'p,::slotted([slot=description])';
 const mediaQueryS = getMediaQueryMin('s');
@@ -4357,13 +4365,13 @@ const mediaQueryXXL = getMediaQueryMin('xxl');
 // we need an explicit grid template, therefor we need to calculate the button group width
 const buttonSize$1 = `calc(${spacingStaticSmall} * 2 + ${fontLineHeight})`;
 // + 2px, compensates hover offset of button-pure
-const buttonGroupWidth = `calc(${buttonSize$1} * 2 + ${spacingStaticXSmall} + 2px)`;
+const buttonGroupWidth = `calc(${buttonSize$1} * 3 + ${spacingStaticXSmall} + 2px)`;
 const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$T = (width, hasPagination, alignHeader, theme) => {
-    const { primaryColor, contrastMediumColor } = getThemedColors(theme);
+const getComponentCss$T = (width, hasPagination, isInfinitePagination, alignHeader, theme) => {
+    const { primaryColor, contrastMediumColor, focusColor } = getThemedColors(theme);
     const { canvasTextColor } = getHighContrastColors();
     const isHeaderAlignCenter = alignHeader === 'center';
     return getCss(Object.assign({ '@global': {
@@ -4393,12 +4401,23 @@ const getComponentCss$T = (width, hasPagination, alignHeader, theme) => {
                 gap: spacingStaticXSmall,
                 gridArea: '1 / 3 / 3 / auto',
                 alignItems: 'end',
+                justifyContent: 'end',
+                justifySelf: 'end',
             },
         }, btn: {
             padding: spacingStaticSmall,
+        }, 'skip-link': {
+            opacity: 0,
+            pointerEvents: 'none',
+            '&:focus': {
+                opacity: 1,
+                pointerEvents: 'all',
+            },
         }, splide: {
             overflow: 'hidden',
             // visibility: 'hidden',
+            padding: '4px 0',
+            margin: '-4px 0',
             '&__track': Object.assign(Object.assign({ cursor: 'grab' }, addImportantToEachRule({
                 padding: `0 ${spacingMap[width].base}`,
                 [getMediaQueryMax('xs')]: {
@@ -4415,26 +4434,57 @@ const getComponentCss$T = (width, hasPagination, alignHeader, theme) => {
                     WebkitUserSelect: 'none',
                     WebkitTouchCallout: 'none',
                 } }),
-            '&__list': Object.assign({ display: 'flex', height: '100%' }, getBackfaceVisibilityJssStyle()),
-            '&__slide': Object.assign(Object.assign({ position: 'relative', flexShrink: 0 }, getBackfaceVisibilityJssStyle()), { transform: 'translateZ(0)' }),
+            '&__list': Object.assign({ display: 'flex' }, getBackfaceVisibilityJssStyle()),
+            '&__slide': Object.assign(Object.assign({ position: 'relative', flexShrink: 0 }, getBackfaceVisibilityJssStyle()), { transform: 'translateZ(0)', borderRadius: borderRadiusLarge, overflow: 'hidden', '&:focus-visible': {
+                    outline: `${borderWidthBase} solid ${focusColor}`,
+                    outlineOffset: '2px',
+                } }),
             '&__sr': getHiddenTextJssStyle(), // appears in the DOM when sliding
-        } }, (hasPagination && {
-        pagination: Object.assign(Object.assign({}, buildResponsiveStyles(hasPagination, (hasPaginationValue) => ({
+        } }, (hasPagination && Object.assign(Object.assign({ ['pagination-container']: Object.assign(Object.assign({}, buildResponsiveStyles(hasPagination, (hasPaginationValue) => ({
             display: hasPaginationValue ? 'flex' : 'none',
-        }))), { justifyContent: 'center', gap: spacingStaticSmall }),
-        bullet: {
-            borderRadius: borderRadiusSmall,
-            background: isHighContrastMode ? canvasTextColor : contrastMediumColor,
-            // set transition to have the same speed as switching slides in splide
-            transition: `background-color ${carouselTransitionDuration}ms, width ${carouselTransitionDuration}ms`,
-            width: '8px',
-            height: '8px',
-        },
-        [bulletActiveClass]: {
-            background: isHighContrastMode ? canvasTextColor : primaryColor,
-            width: '20px',
+        }))), { position: 'relative', justifyContent: isInfinitePagination ? 'flex-start' : 'center', width: `calc(${paginationActiveBulletSize} + ${paginationBulletSize} * 4 + ${spacingStaticSmall} * 4)`, left: 'calc(50% - 42px)', overflowX: 'hidden' }), pagination: {
+            display: 'flex',
+            alignItems: 'center',
+            width: 'fit-content',
+            gap: spacingStaticSmall,
+            transition: `transform ${carouselTransitionDuration}ms`,
+        }, bullet: Object.assign({ borderRadius: borderRadiusSmall, background: isHighContrastMode ? canvasTextColor : contrastMediumColor }, (isInfinitePagination
+            ? {
+                width: '0px',
+                height: '0px',
+                transition: `background-color ${carouselTransitionDuration}ms, width ${carouselTransitionDuration}ms, height ${carouselTransitionDuration}ms`,
+            }
+            : {
+                width: paginationBulletSize,
+                height: paginationBulletSize,
+                transition: `background-color ${carouselTransitionDuration}ms, width ${carouselTransitionDuration}ms`,
+            })) }, (isInfinitePagination && {
+        [`${paginationInfiniteStartCaseClass}`]: {
+            ['& > .bullet:nth-child(-n+4)']: {
+                width: paginationBulletSize,
+                height: paginationBulletSize,
+            },
         },
-    })));
+        [`${bulletInfiniteClass}`]: Object.assign(Object.assign({}, addImportantToEachRule({
+            width: paginationInfiniteBulletSize,
+            height: paginationInfiniteBulletSize,
+        })), { '& ~ span': {
+                width: paginationBulletSize,
+                height: paginationBulletSize,
+            }, [`& ~ .${bulletInfiniteClass} ~ span`]: {
+                width: '0px',
+                height: '0px',
+            } }),
+    })), { [`${bulletActiveClass}`]: Object.assign({ background: isHighContrastMode ? canvasTextColor : primaryColor, height: paginationBulletSize, width: addImportantToRule(paginationActiveBulletSize) }, (isInfinitePagination && {
+            '& ~ span': {
+                width: paginationBulletSize,
+                height: paginationBulletSize,
+            },
+            [`& ~ .${bulletInfiniteClass} ~ span`]: {
+                width: '0px',
+                height: '0px',
+            },
+        })) }))));
 };
 
 const getThemedFormStateColors = (theme, state) => {
@@ -5328,7 +5378,7 @@ const getComponentCss$v = (maxNumberOfPageLinks, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
-            nav: Object.assign({ display: 'flex', justifyContent: 'center' }, buildResponsiveStyles(maxNumberOfPageLinks, (n) => ({
+            nav: Object.assign({ display: 'flex', justifyContent: 'center', userSelect: 'none' }, buildResponsiveStyles(maxNumberOfPageLinks, (n) => ({
                 counterReset: `size ${n}`,
             }))),
             ul: {
@@ -5352,16 +5402,8 @@ const getComponentCss$v = (maxNumberOfPageLinks, theme) => {
                 },
             },
             span: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', transition: ['color', 'border-color', 'background-color'].map(getTransition).join(), position: 'relative', width: buttonSize, height: buttonSize, boxSizing: 'border-box' }, textSmallStyle), { whiteSpace: 'nowrap', cursor: 'pointer', color: primaryColor, outline: 0, borderRadius: borderRadiusSmall, borderColor: 'transparent' }), hoverMediaQuery({
-                '&:not([aria-disabled]):not(.ellipsis):hover': Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }),
-            })), { '&:not(.ellipsis):focus::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusMedium }), '&:focus:not(:focus-visible)::before': {
-                    borderColor: 'transparent',
-                }, '&[aria-current]': {
-                    disabledCursorStyle,
-                    color: primaryColor,
-                    border: `${borderWidthBase} solid ${primaryColor}`,
-                    borderRadius: borderRadiusSmall,
-                    '&:not(.ellipsis):focus::before': Object.assign({}, getInsetJssStyle(-6)),
-                }, '&[aria-disabled]': Object.assign(Object.assign({}, disabledCursorStyle), { color: disabledColor }) }),
+                '&:not([aria-disabled]):not(.ellipsis):hover': Object.assign(Object.assign({}, frostedGlassStyle), { background: hoverColor }),
+            })), { '&:not(.ellipsis):focus:focus-visible::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusMedium }), '&[aria-current]': Object.assign(Object.assign({}, disabledCursorStyle), { color: primaryColor, border: `${borderWidthBase} solid ${primaryColor}`, '&:not(.ellipsis):focus::before': getInsetJssStyle(-6) }), '&[aria-disabled]': Object.assign(Object.assign({}, disabledCursorStyle), { color: disabledColor }) }),
         },
         ellipsis: Object.assign(Object.assign({}, disabledCursorStyle), { '&::after': {
                 content: '"…"',