@porsche-design-system/components-react 3.29.0-rc.1 → 3.29.0-rc.3

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

@@ -0,0 +1,43 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../../provider.cjs');
+var splitChildren = require('../../splitChildren.cjs');
+var minifyCss = require('../../minifyCss.cjs');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+var icon_wrapper = require('../components/icon.wrapper.cjs');
+var inputBase = require('./input-base.cjs');
+
+/**
+ * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}
+ * @slot {"name": "end", "description": "Shows content at the end of the input (e.g. toggle button, unit suffix)."}
+ */
+class DSRInputEmail extends react.Component {
+    host;
+    // The "name" property is reflected as an attribute to ensure compatibility with native form submission.
+    // In the React wrapper, all props are synced as properties on the element ref, so reflecting "name" as an attribute ensures it is properly handled in the form submission process.
+    internals;
+    initialLoading = false;
+    inputElement;
+    defaultValue;
+    formResetCallback() {
+        // triggers value watcher
+    }
+    formDisabledCallback() {
+    }
+    formStateRestoreCallback() {
+    }
+    render() {
+        splitChildren.splitChildren(this.props.children);
+        const style = minifyCss.minifyCss(stylesEntry.getInputEmailCss(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly, 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(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-email", name: this.props.name, form: this.props.form, type: "email", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.props.value, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, theme: this.props.theme, loading: this.props.loading, pattern: this.props.pattern, multiple: this.props.multiple, initialLoading: this.props.initialLoading, ...(this.props.indicator && {
+                                start: jsxRuntime.jsx(icon_wrapper.PIcon, { "aria-hidden": "true", name: "email", color: "state-disabled", theme: this.props.theme }),
+                            }) })] }), this.props.children] }));
+    }
+}
+
+exports.DSRInputEmail = DSRInputEmail;

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

@@ -32,8 +32,7 @@ class DSRInputText extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stylesEntry.getInputTextCss(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly, this.props.theme, this.props.counter));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-text" // prevent React default scroll-to-[increment|decrement] on text inputs
-                            , name: this.props.name, form: this.props.form, type: "text", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.props.value, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, theme: this.props.theme, spellCheck: this.props.spellCheck, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(this.props.counter && {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-text", name: this.props.name, form: this.props.form, type: "text", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.props.value, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, theme: this.props.theme, spellCheck: this.props.spellCheck, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(this.props.counter && {
                                 end: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite", children: this.props.maxLength
                                                 ? `You have ${this.props.maxLength - this.props.value.length} out of ${this.props.maxLength} characters left`
                                                 : `${this.props.value.length} characters entered` }), jsxRuntime.jsx("span", { className: "counter", "aria-hidden": "true", children: this.props.maxLength ? `${this.props.value.length}/${this.props.maxLength}` : `${this.props.value.length}` })] })),

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

@@ -17,7 +17,7 @@ var modelSignature_wrapper = require('../components/model-signature.wrapper.cjs'
 class DSRLinkTileModelSignature extends react.Component {
     host;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { children, namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         // If we do this earlier than render, there are cases where primaryLink.href is undefined
         // TODO: Here and in other components, validation happens only on initial render. We could extend this to watch props of the required slots.
         const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && namedSlotChildren.includes(child)

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

@@ -28,7 +28,7 @@ class DSRModal extends react.Component {
         return this.props.disableCloseButton ? false : this.props.dismissButton;
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasHeader = (this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) || namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasDismissButton = this.props.disableCloseButton ? false : this.props.dismissButton;

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

@@ -54,7 +54,7 @@ class DSRMultiSelect extends react.Component {
         this.props.setFormValue(this.props.defaultValue);
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const inputId = 'filter';
         const popoverId = 'list';
         const style = minifyCss.minifyCss(stylesEntry.getMultiSelectCss(this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.theme));

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

@@ -35,7 +35,7 @@ class DSRPinCode extends react.Component {
     formStateRestoreCallback() {
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         // reset array of input elements
         this.inputElements = [];
         const currentInputId = 'current-input';

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

@@ -23,7 +23,7 @@ class DSRPopover extends react.Component {
     hasNativePopoverSupport = utilsEntry.getHasNativePopoverSupport();
     hasSlottedButton;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasSlottedButton = namedSlotChildren.filter(({ props: { slot } }) => slot === 'button').length > 0;
         const style = minifyCss.minifyCss(stylesEntry.getPopoverCss(this.props.theme).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4'));
         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: [hasSlottedButton ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx("slot", { name: "button" }) })) : (jsxRuntime.jsxs("button", { type: "button", ...utilsEntry.parseAndGetAriaAttributes({

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

@@ -21,7 +21,7 @@ class DSRRadioButtonWrapper extends react.Component {
     initialLoading = false;
     input;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
         const isLoading = this.props.loading && !(typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && (otherChildren[0]?.props.checked || otherChildren[0]?.props.defaultChecked)); // spinner is only displayed when radio is not checked already
         const style = minifyCss.minifyCss(stylesEntry.getRadioButtonWrapperCss(this.props.hideLabel, this.props.state, disabled, isLoading, this.props.theme));

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

@@ -15,7 +15,7 @@ var icon_wrapper = require('../components/icon.wrapper.cjs');
 class DSRSegmentedControlItem extends react.Component {
     host;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { children} = splitChildren.splitChildren(this.props.children);
         // this additional validation is still needed because undefined is allowed with current propTypes
         const hasIcon = !!this.props.icon || !!this.props.iconSource;
         const hasSlottedContent = !!children.length;

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

@@ -23,7 +23,7 @@ class DSRSegmentedControl extends react.Component {
     formStateRestoreCallback() {
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { children, otherChildren } = splitChildren.splitChildren(this.props.children);
         const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, selected: child.props?.value === this.props.value, backgroundColor: this.props.backgroundColor, theme: this.props.theme } }
             : child);

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

@@ -28,6 +28,7 @@ class DSRSelectWrapperDropdown extends react.Component {
         const style = minifyCss.minifyCss(stylesEntry.getSelectWrapperDropdownCss(this.isOpen, this.props.state, this.props.disabled, this.props.filter, 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(jsxRuntime.Fragment, { children: this.props.filter ? ([
                             jsxRuntime.jsx("input", { id: inputId, type: "text", role: "combobox", disabled: this.props.disabled, placeholder: utilsEntry.getSelectedOptionMap(this.optionMaps)?.value || null, autoComplete: "off", defaultValue: this.searchString }, "input"),
+                            /* biome-ignore lint/a11y/noStaticElementInteractions: ok */
                             jsxRuntime.jsx("span", { 
                                 /* @ts-ignore */
                                 part: part }, "span"),

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

@@ -24,7 +24,7 @@ class DSRSelectWrapper extends react.Component {
     iconElement;
     render() {
         const hasCustomDropdown = utilsEntry.isCustomDropdown(this.props.filter, this.props.native);
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
         const style = minifyCss.minifyCss(stylesEntry.getSelectWrapperCss(disabled, hasCustomDropdown, this.props.hideLabel, this.props.state, 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.jsxs("div", { className: "root", children: [jsxRuntime.jsx(legacyLabel.LegacyLabel, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), hasCustomDropdown && !disabled && (jsxRuntime.jsx(selectWrapperDropdown_wrapper.PSelectWrapperDropdown, { className: "dropdown", selectRef: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, label: this.props.label || namedSlotChildren.find(({ props: { slot } }) => slot === 'label')?.props.children, message: this.props.message || namedSlotChildren.find(({ props: { slot } }) => slot === 'message')?.props.children, description: this.props.description || namedSlotChildren.find(({ props: { slot } }) => slot === 'description')?.props.children, state: this.props.state, direction: this.props.dropdownDirection, filter: this.props.filter, theme: this.props.theme, required: false, disabled: disabled, onOpenChange: (isOpen) => this.props.iconElement.classList.toggle('icon--open', isOpen) }))] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));

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

@@ -47,7 +47,7 @@ class DSRSelect extends react.Component {
         this.props.internals?.setFormValue(this.props.defaultValue);
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const buttonId = 'value';
         const popoverId = 'list';
         const descriptionId = this.props.description ? 'description' : undefined;

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

@@ -21,7 +21,7 @@ class DSRSheet extends react.Component {
     scroller;
     hasHeader;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         if (this.props.open) ;
         const style = minifyCss.minifyCss(stylesEntry.getSheetCss(this.props.open, this.props.dismissButton, this.props.theme));

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

@@ -17,7 +17,7 @@ class DSRStepperHorizontal extends react.Component {
     scrollerElement;
     currentStepIndex;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { children, otherChildren } = splitChildren.splitChildren(this.props.children);
         const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, theme: this.props.theme } }
             : child);

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

@@ -15,7 +15,7 @@ var scroller_wrapper = require('../components/scroller.wrapper.cjs');
 class DSRTable extends react.Component {
     host;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasSlottedCaption = namedSlotChildren.filter(({ props: { slot } }) => slot === 'caption').length > 0;
         const captionId = 'caption';
         const tableAttr = this.props.caption

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

@@ -23,7 +23,7 @@ class DSRTabsBar extends react.Component {
     hasPTabsParent;
     areTabsButtons;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { children, otherChildren } = splitChildren.splitChildren(this.props.children);
         const manipulatedChildren = children.map((child, i) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? child.type === 'button'
                 ? {

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

@@ -17,7 +17,7 @@ class DSRTabs extends react.Component {
     host;
     tabsItemElements = [];
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { children, 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, theme: this.props.theme, hidden: this.props.activeTabIndex !== i ? true : null } }
             : child);

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

@@ -36,7 +36,7 @@ class DSRTextFieldWrapper extends react.Component {
     hasUnit;
     eventListener;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const { readOnly, disabled, type } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
         const disabledOrReadOnly = disabled || readOnly;
         const buttonProps = {

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

@@ -22,7 +22,7 @@ class DSRTextareaWrapper extends react.Component {
     hasCounter;
     eventListener;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const { disabled, readOnly } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
         const style = minifyCss.minifyCss(stylesEntry.getTextareaWrapperCss(disabled, readOnly, this.props.hideLabel, this.props.state, this.props.hasCounter, 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("div", { className: "root", children: [jsxRuntime.jsx(legacyLabel.LegacyLabel, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", {}), this.props.hasCounter && jsxRuntime.jsx("span", { className: "counter", "aria-hidden": "true" }), this.props.hasCounter && jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite" })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));

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

@@ -29,7 +29,7 @@ class DSRTextarea extends react.Component {
     formStateRestoreCallback() {
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const id = 'textarea';
         const style = minifyCss.minifyCss(stylesEntry.getTextareaCss(this.props.disabled, this.props.readOnly, this.props.hideLabel, this.props.state, this.props.counter, this.props.resize, 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.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, htmlFor: id, label: this.props.label, description: this.props.description, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("textarea", { "aria-describedby": `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, id: id, onBlur: this.props.onBlur, name: this.props.name, value: this.props.value, form: this.props.form, disabled: this.props.disabled, required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, rows: this.props.rows, readOnly: this.props.readOnly, spellCheck: this.props.spellCheck, autoComplete: this.props.autoComplete, wrap: this.props.wrap }), this.props.counter && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite", children: this.props.maxLength

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

@@ -29,6 +29,7 @@ var heading_wrapper = require('./lib/components/heading.wrapper.cjs');
 var headline_wrapper = require('./lib/components/headline.wrapper.cjs');
 var icon_wrapper = require('./lib/components/icon.wrapper.cjs');
 var inlineNotification_wrapper = require('./lib/components/inline-notification.wrapper.cjs');
+var inputEmail_wrapper = require('./lib/components/input-email.wrapper.cjs');
 var inputNumber_wrapper = require('./lib/components/input-number.wrapper.cjs');
 var inputPassword_wrapper = require('./lib/components/input-password.wrapper.cjs');
 var inputSearch_wrapper = require('./lib/components/input-search.wrapper.cjs');
@@ -118,6 +119,7 @@ exports.PHeading = heading_wrapper.PHeading;
 exports.PHeadline = headline_wrapper.PHeadline;
 exports.PIcon = icon_wrapper.PIcon;
 exports.PInlineNotification = inlineNotification_wrapper.PInlineNotification;
+exports.PInputEmail = inputEmail_wrapper.PInputEmail;
 exports.PInputNumber = inputNumber_wrapper.PInputNumber;
 exports.PInputPassword = inputPassword_wrapper.PInputPassword;
 exports.PInputSearch = inputSearch_wrapper.PInputSearch;