@porsche-design-system/components-react 3.0.0-alpha.0 → 3.0.0-alpha.2

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

@@ -26,6 +26,7 @@ require('../components/link-social.wrapper.js');
 require('../components/link-tile.wrapper.js');
 require('../components/marque.wrapper.js');
 require('../components/modal.wrapper.js');
+require('../components/model-signature.wrapper.js');
 require('../components/pagination.wrapper.js');
 require('../components/popover.wrapper.js');
 require('../components/radio-button-wrapper.wrapper.js');
@@ -66,7 +67,7 @@ class DSRStepperHorizontalItem extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getStepperHorizontalItemCss(this.props.state, this.props.disabled, this.props.theme || 'light')));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("button", { type: "button", "aria-disabled": !this.props.state || this.props.disabled ? 'true' : null, "aria-current": this.props.state === 'current' ? 'step' : null, children: [utilsEntry.isStateCompleteOrWarning(this.props.state) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: utilsEntry.getStepperHorizontalIconName(this.props.state), size: "inherit", theme: this.props.theme || 'light', color: "inherit", "aria-hidden": "true" })), this.props.state && jsxRuntime.jsxs("span", { className: "sr-only", children: [this.props.state, ": "] }), jsxRuntime.jsx("slot", {})] }) })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("button", { type: "button", "aria-disabled": !this.props.state || this.props.disabled ? 'true' : null, "aria-current": this.props.state === 'current' ? 'step' : null, children: [utilsEntry.isStateCompleteOrWarning(this.props.state) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: utilsEntry.getStepperHorizontalIconName(this.props.state), size: "inherit", theme: this.props.theme || 'light', color: this.props.disabled ? 'disabled' : `notification-${utilsEntry.getStepperHorizontalIconName(this.props.state)}`, "aria-hidden": "true" })), this.props.state && jsxRuntime.jsxs("span", { className: "sr-only", children: [this.props.state, ": "] }), jsxRuntime.jsx("slot", {})] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -26,6 +26,7 @@ require('../components/link-social.wrapper.js');
 require('../components/link-tile.wrapper.js');
 require('../components/marque.wrapper.js');
 require('../components/modal.wrapper.js');
+require('../components/model-signature.wrapper.js');
 require('../components/pagination.wrapper.js');
 require('../components/popover.wrapper.js');
 require('../components/radio-button-wrapper.wrapper.js');

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

@@ -26,6 +26,7 @@ require('../components/link-social.wrapper.js');
 require('../components/link-tile.wrapper.js');
 require('../components/marque.wrapper.js');
 require('../components/modal.wrapper.js');
+require('../components/model-signature.wrapper.js');
 require('../components/pagination.wrapper.js');
 require('../components/popover.wrapper.js');
 require('../components/radio-button-wrapper.wrapper.js');

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table-head-cell.js

@@ -26,6 +26,7 @@ require('../components/link-social.wrapper.js');
 require('../components/link-tile.wrapper.js');
 require('../components/marque.wrapper.js');
 require('../components/modal.wrapper.js');
+require('../components/model-signature.wrapper.js');
 require('../components/pagination.wrapper.js');
 require('../components/popover.wrapper.js');
 require('../components/radio-button-wrapper.wrapper.js');

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

@@ -26,6 +26,7 @@ require('../components/link-social.wrapper.js');
 require('../components/link-tile.wrapper.js');
 require('../components/marque.wrapper.js');
 require('../components/modal.wrapper.js');
+require('../components/model-signature.wrapper.js');
 require('../components/pagination.wrapper.js');
 require('../components/popover.wrapper.js');
 require('../components/radio-button-wrapper.wrapper.js');

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

@@ -26,6 +26,7 @@ require('../components/link-social.wrapper.js');
 require('../components/link-tile.wrapper.js');
 require('../components/marque.wrapper.js');
 require('../components/modal.wrapper.js');
+require('../components/model-signature.wrapper.js');
 require('../components/pagination.wrapper.js');
 require('../components/popover.wrapper.js');
 require('../components/radio-button-wrapper.wrapper.js');

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

@@ -26,6 +26,7 @@ require('../components/link-social.wrapper.js');
 require('../components/link-tile.wrapper.js');
 require('../components/marque.wrapper.js');
 require('../components/modal.wrapper.js');
+require('../components/model-signature.wrapper.js');
 require('../components/pagination.wrapper.js');
 require('../components/popover.wrapper.js');
 require('../components/radio-button-wrapper.wrapper.js');

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

@@ -26,6 +26,7 @@ require('../components/link-social.wrapper.js');
 require('../components/link-tile.wrapper.js');
 require('../components/marque.wrapper.js');
 require('../components/modal.wrapper.js');
+require('../components/model-signature.wrapper.js');
 require('../components/pagination.wrapper.js');
 require('../components/popover.wrapper.js');
 require('../components/radio-button-wrapper.wrapper.js');

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

@@ -26,6 +26,7 @@ require('../components/link-social.wrapper.js');
 require('../components/link-tile.wrapper.js');
 require('../components/marque.wrapper.js');
 require('../components/modal.wrapper.js');
+require('../components/model-signature.wrapper.js');
 require('../components/pagination.wrapper.js');
 require('../components/popover.wrapper.js');
 require('../components/radio-button-wrapper.wrapper.js');

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

@@ -26,6 +26,7 @@ require('../components/link-social.wrapper.js');
 require('../components/link-tile.wrapper.js');
 require('../components/marque.wrapper.js');
 require('../components/modal.wrapper.js');
+require('../components/model-signature.wrapper.js');
 require('../components/pagination.wrapper.js');
 require('../components/popover.wrapper.js');
 require('../components/radio-button-wrapper.wrapper.js');
@@ -85,7 +86,7 @@ class DSRTextFieldWrapper extends react.Component {
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextFieldWrapperCss(disabled, this.props.hideLabel, this.props.state, isCounterVisible, isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.isWithinForm, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsxRuntime.jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsxRuntime.jsx("span", { className: "label__text", ...labelProps, children: this.props.description || jsxRuntime.jsx("slot", { name: "description" }) })), (isCounterVisible) && (jsxRuntime.jsx("span", { className: "unit", "aria-hidden": "true", children: this.props.unit })), jsxRuntime.jsx("slot", {}), hasCounter ] }), isPassword ? (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "button", hideLabel: true, icon: this.props.showPassword ? 'view-off' : 'view', disabled: disabled, theme: this.props.theme, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" })) : (isSearch && [
                                             // TODO: create an own component, which would fix SSR support too
-                                            this.props.isWithinForm ? (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "submit", icon: "search", disabled: disabledOrReadOnly, theme: this.props.theme, hideLabel: true, children: "Search" }, "btn-submit")) : (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "search", color: "contrast-medium", theme: this.props.theme, "aria-hidden": "true" }, "icon")),
+                                            this.props.isWithinForm ? (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "submit", icon: "search", disabled: disabledOrReadOnly, theme: this.props.theme, hideLabel: true, children: "Search" }, "btn-submit")) : (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "search", color: "disabled", theme: this.props.theme, "aria-hidden": "true" }, "icon")),
                                             jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "button", icon: "close", hideLabel: true, tabIndex: -1, hidden: !isClearable, theme: this.props.theme, disabled: disabledOrReadOnly, "aria-hidden": "true" }, "btn-clear"),
                                             hasAction && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "button", icon: "locate", hidden: isClearable, disabled: disabledOrReadOnly, theme: this.props.theme, hideLabel: true, loading: this.props.actionLoading, children: "Locate me" }, "btn-action")),
                                         ])] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsxRuntime.jsx(stateMessage.StateMessage, { state: this.props.state, message: this.props.message, theme: "light", host: null }))] })] }), this.props.children] }));

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-list-item.js

@@ -10,9 +10,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 class DSRTextListItem extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextListItemCss(this.props.listType || 'unordered', // default as fallback
-        this.props.orderType || 'numbered' // default as fallback
-        )));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextListItemCss()));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }
 }

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

@@ -6,16 +6,14 @@ 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 DSRTextList extends react.Component {
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
-        const manipulatedChildren = children.map((child, i) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
-            ? { ...child, props: { ...child.props, listType: this.props.listType, orderType: this.props.orderType } }
-            : child);
-        const TagType = this.props.listType === 'unordered' ? 'ul' : 'ol';
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextListCss(this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TagType, { role: "list", children: jsxRuntime.jsx("slot", {}) }) })] }), manipulatedChildren] }));
+        splitChildren.splitChildren(this.props.children);
+        const TagType = utilsEntry.isListTypeOrdered(this.props.listType) ? 'ol' : 'ul';
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextListCss(this.props.listType, this.props.orderType, this.props.theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TagType, { children: jsxRuntime.jsx("slot", {}) }) })] }), this.props.children] }));
     }
 }
 

package/ssr/components-react/projects/react-ssr-wrapper/src/public-api.js

@@ -26,6 +26,7 @@ var linkSocial_wrapper = require('./lib/components/link-social.wrapper.js');
 var linkTile_wrapper = require('./lib/components/link-tile.wrapper.js');
 var marque_wrapper = require('./lib/components/marque.wrapper.js');
 var modal_wrapper = require('./lib/components/modal.wrapper.js');
+var modelSignature_wrapper = require('./lib/components/model-signature.wrapper.js');
 var pagination_wrapper = require('./lib/components/pagination.wrapper.js');
 var popover_wrapper = require('./lib/components/popover.wrapper.js');
 var radioButtonWrapper_wrapper = require('./lib/components/radio-button-wrapper.wrapper.js');
@@ -90,6 +91,7 @@ exports.PLinkSocial = linkSocial_wrapper.PLinkSocial;
 exports.PLinkTile = linkTile_wrapper.PLinkTile;
 exports.PMarque = marque_wrapper.PMarque;
 exports.PModal = modal_wrapper.PModal;
+exports.PModelSignature = modelSignature_wrapper.PModelSignature;
 exports.PPagination = pagination_wrapper.PPagination;
 exports.PPopover = popover_wrapper.PPopover;
 exports.PRadioButtonWrapper = radioButtonWrapper_wrapper.PRadioButtonWrapper;