@porsche-design-system/components-react 3.9.0 → 3.10.0-rc.1

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

@@ -0,0 +1,94 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('../components/accordion.wrapper.cjs');
+require('../components/banner.wrapper.cjs');
+require('../components/button.wrapper.cjs');
+require('../components/button-group.wrapper.cjs');
+var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
+require('../components/button-tile.wrapper.cjs');
+require('../components/carousel.wrapper.cjs');
+require('../components/checkbox-wrapper.wrapper.cjs');
+require('../components/content-wrapper.wrapper.cjs');
+require('../components/crest.wrapper.cjs');
+require('../components/display.wrapper.cjs');
+require('../components/divider.wrapper.cjs');
+require('../components/fieldset.wrapper.cjs');
+require('../components/fieldset-wrapper.wrapper.cjs');
+require('../components/flex.wrapper.cjs');
+require('../components/flex-item.wrapper.cjs');
+require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/grid.wrapper.cjs');
+require('../components/grid-item.wrapper.cjs');
+require('../components/heading.wrapper.cjs');
+require('../components/headline.wrapper.cjs');
+require('../components/icon.wrapper.cjs');
+require('../components/inline-notification.wrapper.cjs');
+require('../components/link.wrapper.cjs');
+require('../components/link-pure.wrapper.cjs');
+require('../components/link-social.wrapper.cjs');
+require('../components/link-tile.wrapper.cjs');
+require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
+require('../components/marque.wrapper.cjs');
+require('../components/modal.wrapper.cjs');
+require('../components/model-signature.wrapper.cjs');
+require('../components/multi-select.wrapper.cjs');
+require('../components/multi-select-option.wrapper.cjs');
+require('../components/pagination.wrapper.cjs');
+require('../components/pin-code.wrapper.cjs');
+require('../components/popover.wrapper.cjs');
+require('../components/radio-button-wrapper.wrapper.cjs');
+require('../components/scroller.wrapper.cjs');
+require('../components/segmented-control.wrapper.cjs');
+require('../components/segmented-control-item.wrapper.cjs');
+require('../components/select-wrapper.wrapper.cjs');
+require('../components/spinner.wrapper.cjs');
+require('../components/stepper-horizontal.wrapper.cjs');
+require('../components/stepper-horizontal-item.wrapper.cjs');
+require('../components/switch.wrapper.cjs');
+require('../components/table.wrapper.cjs');
+require('../components/table-body.wrapper.cjs');
+require('../components/table-cell.wrapper.cjs');
+require('../components/table-head.wrapper.cjs');
+require('../components/table-head-cell.wrapper.cjs');
+require('../components/table-head-row.wrapper.cjs');
+require('../components/table-row.wrapper.cjs');
+require('../components/tabs.wrapper.cjs');
+require('../components/tabs-bar.wrapper.cjs');
+require('../components/tabs-item.wrapper.cjs');
+require('../components/tag.wrapper.cjs');
+require('../components/tag-dismissible.wrapper.cjs');
+require('../components/text.wrapper.cjs');
+require('../components/text-field-wrapper.wrapper.cjs');
+require('../components/text-list.wrapper.cjs');
+require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea-wrapper.wrapper.cjs');
+require('../components/toast.wrapper.cjs');
+require('../components/wordmark.wrapper.cjs');
+var splitChildren = require('../../splitChildren.cjs');
+var react = require('react');
+var minifyCss = require('../../minifyCss.cjs');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
+
+/** __Experimental__ */
+class DSRFlyoutNavigation extends react.Component {
+    host;
+    // TODO: shouldn't open prop be changed internally too?
+    dialog;
+    flyoutNavigationItemElements = [];
+    render() {
+        splitChildren.splitChildren(this.props.children);
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutNavigationCss(this.props.open, !!this.props.activeIdentifier, 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("dialog", { 
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            /* @ts-ignore */
+                            inert: this.props.open ? null : '', tabIndex: -1, children: [jsxRuntime.jsx("div", { className: "header", children: jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", size: "medium", icon: "close", hideLabel: true, theme: this.props.theme, children: "Dismiss flyout" }) }), jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsx("nav", { className: "content", ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
+    }
+}
+
+exports.DSRFlyoutNavigation = DSRFlyoutNavigation;

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

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile-model-signature.cjs

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 var modelSignature_wrapper = require('../components/model-signature.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile-product.cjs

@@ -0,0 +1,92 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('../components/accordion.wrapper.cjs');
+require('../components/banner.wrapper.cjs');
+require('../components/button.wrapper.cjs');
+require('../components/button-group.wrapper.cjs');
+var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
+require('../components/button-tile.wrapper.cjs');
+require('../components/carousel.wrapper.cjs');
+require('../components/checkbox-wrapper.wrapper.cjs');
+require('../components/content-wrapper.wrapper.cjs');
+require('../components/crest.wrapper.cjs');
+require('../components/display.wrapper.cjs');
+require('../components/divider.wrapper.cjs');
+require('../components/fieldset.wrapper.cjs');
+require('../components/fieldset-wrapper.wrapper.cjs');
+require('../components/flex.wrapper.cjs');
+require('../components/flex-item.wrapper.cjs');
+require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/grid.wrapper.cjs');
+require('../components/grid-item.wrapper.cjs');
+require('../components/heading.wrapper.cjs');
+require('../components/headline.wrapper.cjs');
+require('../components/icon.wrapper.cjs');
+require('../components/inline-notification.wrapper.cjs');
+require('../components/link.wrapper.cjs');
+require('../components/link-pure.wrapper.cjs');
+require('../components/link-social.wrapper.cjs');
+require('../components/link-tile.wrapper.cjs');
+require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
+require('../components/marque.wrapper.cjs');
+require('../components/modal.wrapper.cjs');
+require('../components/model-signature.wrapper.cjs');
+require('../components/multi-select.wrapper.cjs');
+require('../components/multi-select-option.wrapper.cjs');
+require('../components/pagination.wrapper.cjs');
+require('../components/pin-code.wrapper.cjs');
+require('../components/popover.wrapper.cjs');
+require('../components/radio-button-wrapper.wrapper.cjs');
+require('../components/scroller.wrapper.cjs');
+require('../components/segmented-control.wrapper.cjs');
+require('../components/segmented-control-item.wrapper.cjs');
+require('../components/select-wrapper.wrapper.cjs');
+require('../components/spinner.wrapper.cjs');
+require('../components/stepper-horizontal.wrapper.cjs');
+require('../components/stepper-horizontal-item.wrapper.cjs');
+require('../components/switch.wrapper.cjs');
+require('../components/table.wrapper.cjs');
+require('../components/table-body.wrapper.cjs');
+require('../components/table-cell.wrapper.cjs');
+require('../components/table-head.wrapper.cjs');
+require('../components/table-head-cell.wrapper.cjs');
+require('../components/table-head-row.wrapper.cjs');
+require('../components/table-row.wrapper.cjs');
+require('../components/tabs.wrapper.cjs');
+require('../components/tabs-bar.wrapper.cjs');
+require('../components/tabs-item.wrapper.cjs');
+require('../components/tag.wrapper.cjs');
+require('../components/tag-dismissible.wrapper.cjs');
+require('../components/text.wrapper.cjs');
+require('../components/text-field-wrapper.wrapper.cjs');
+require('../components/text-list.wrapper.cjs');
+require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea-wrapper.wrapper.cjs');
+require('../components/toast.wrapper.cjs');
+require('../components/wordmark.wrapper.cjs');
+var splitChildren = require('../../splitChildren.cjs');
+var react = require('react');
+var minifyCss = require('../../minifyCss.cjs');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
+
+/** __Experimental__ */
+class DSRLinkTileProduct extends react.Component {
+    host;
+    render() {
+        splitChildren.splitChildren(this.props.children);
+        const headerId = 'header';
+        const headingId = 'heading';
+        const priceId = 'price';
+        const descriptionId = 'description';
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkTileProductCss(this.props.likeButton, !this.props.href, this.props.aspectRatio, this.props.theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("div", { id: headerId, className: "header", children: [jsxRuntime.jsx("slot", { name: utilsEntry.headerSlot }), this.props.likeButton && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "like-button", type: "button", icon: this.props.liked ? 'heart-filled' : 'heart', hideLabel: true, theme: this.props.theme, children: this.props.liked ? 'Heart Filled icon' : 'Heart icon' }))] }), jsxRuntime.jsx("div", { className: "image-container", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsxs("div", { className: "text-container", children: [jsxRuntime.jsx("h3", { id: headingId, className: "text text__heading", children: this.props.heading }), jsxRuntime.jsx("p", { id: priceId, className: "text text__price", children: this.props.price }), jsxRuntime.jsx("p", { id: descriptionId, className: "text text__description", children: this.props.description })] }), this.props.href ? (jsxRuntime.jsx("a", { className: "link-overlay", href: this.props.href, target: this.props.target, rel: this.props.rel, "aria-labelledby": `${headingId} ${priceId}`, "aria-describedby": `${headerId} ${descriptionId}` })) : (jsxRuntime.jsx("slot", { name: utilsEntry.anchorSlot }))] }) })] }), this.props.children] }));
+    }
+}
+
+exports.DSRLinkTileProduct = DSRLinkTileProduct;

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

@@ -19,6 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -30,6 +32,7 @@ var linkPure_wrapper = require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/multi-select-option.cjs

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
@@ -73,19 +76,16 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 
 class DSRPagination extends react.Component {
     host;
-    breakpointMaxNumberOfPageLinks = 7;
-    navigationElement;
     render() {
         const pageTotal = utilsEntry.getTotalPages(this.props.totalItemsCount, this.props.itemsPerPage);
-        const paginationModel = utilsEntry.createPaginationModel({
+        const paginationItems = utilsEntry.createPaginationItems({
             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) => {
-                                const { type, isActive, value } = pageModel;
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getPaginationCss(this.props.activePage, pageTotal, this.props.showLastPage, 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: paginationItems.map((pageModel, index) => {
+                                const { type, isActive, value, isBeforeCurrent, isAfterCurrent, isBeforeBeforeCurrent, isAfterAfterCurrent, } = pageModel;
                                 const spanProps = {
                                     role: 'button',
                                     tabIndex: isActive ? 0 : null,
@@ -97,13 +97,19 @@ class DSRPagination extends react.Component {
                                 };
                                 switch (type) {
                                     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"));
+                                        return (jsxRuntime.jsx("li", { className: "prev", 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, { ...iconProps, name: "arrow-left" }) }) }, "prev"));
                                     case utilsEntry.ItemType.ELLIPSIS:
-                                        return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("span", { className: "ellipsis" }) }, "ellipsis"));
+                                        return (jsxRuntime.jsx("li", { className: Object.entries({ ellip: true, [`ellip-${index === 2 ? 'start' : 'end'}`]: true }).map(([key, value]) => value && key).filter(Boolean).join(' '), children: jsxRuntime.jsx("span", { className: "ellipsis" }) }, "ellip"));
                                     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));
+                                        return (jsxRuntime.jsx("li", { className: Object.entries({
+                                                current: isActive,
+                                                'current-1': isBeforeCurrent,
+                                                'current+1': isAfterCurrent,
+                                                'current-2': isBeforeBeforeCurrent,
+                                                'current+2': isAfterAfterCurrent,
+                                            }).map(([key, value]) => value && key).filter(Boolean).join(' '), 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.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"));
+                                        return (jsxRuntime.jsx("li", { className: "next", 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, { ...iconProps, name: "arrow-right" }) }) }, "next"));
                                 }
                             }) }) })] }) }));
     }

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

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/segmented-control-item.cjs

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
@@ -78,6 +81,9 @@ class DSRSelectWrapperDropdown extends react.Component {
     searchString = '';
     inputElement;
     listElement;
+    isNativePopover = false;
+    parentTableElement;
+    popoverElement;
     get selectedIndex() {
         return 0;
     }
@@ -88,7 +94,7 @@ class DSRSelectWrapperDropdown extends react.Component {
         const buttonId = 'value';
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectWrapperDropdownCss(this.props.direction === 'auto'
             ? 'down'
-            : this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.theme)));
+            : this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.isNativePopover, this.props.theme)));
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: this.props.filter ? ([
                             jsxRuntime.jsx("input", { type: "text", role: "combobox", disabled: this.props.disabled, placeholder: utilsEntry.getSelectedOptionMap(this.optionMaps)?.value || null, autoComplete: "off", defaultValue: this.searchString }, "input"),
                             jsxRuntime.jsx("span", { 

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

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal-item.cjs

@@ -18,6 +18,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -29,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');