@porsche-design-system/components-react 3.29.0 → 3.30.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/cjs/lib/components/checkbox.wrapper.cjs +2 -1
- package/cjs/lib/components/pin-code.wrapper.cjs +3 -3
- package/esm/lib/components/checkbox.wrapper.d.ts +15 -5
- package/esm/lib/components/checkbox.wrapper.mjs +2 -1
- package/esm/lib/components/pin-code.wrapper.d.ts +8 -0
- package/esm/lib/components/pin-code.wrapper.mjs +3 -3
- package/esm/lib/types.d.ts +29 -0
- package/package.json +2 -2
- package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs +58 -43
- package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs +2 -2
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/checkbox.wrapper.cjs +2 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/pin-code.wrapper.cjs +4 -4
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox.cjs +4 -0
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pin-code.cjs +1 -1
- package/ssr/esm/components/dist/styles/esm/styles-entry.mjs +58 -43
- package/ssr/esm/components/dist/utils/esm/utils-entry.mjs +2 -2
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/checkbox.wrapper.mjs +2 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/pin-code.wrapper.mjs +4 -4
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox.mjs +4 -0
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pin-code.mjs +1 -1
- package/ssr/esm/lib/components/checkbox.wrapper.d.ts +15 -5
- package/ssr/esm/lib/components/pin-code.wrapper.d.ts +8 -0
- package/ssr/esm/lib/dsr-components/checkbox.d.ts +4 -0
- package/ssr/esm/lib/types.d.ts +29 -0
package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/pin-code.wrapper.cjs
CHANGED
|
@@ -7,21 +7,21 @@ var hooks = require('../../hooks.cjs');
|
|
|
7
7
|
var utils = require('../../utils.cjs');
|
|
8
8
|
var pinCode = require('../dsr-components/pin-code.cjs');
|
|
9
9
|
|
|
10
|
-
const PPinCode = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, children, ...rest }, ref) => {
|
|
10
|
+
const PPinCode = /*#__PURE__*/ react.forwardRef(({ compact = false, description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, children, ...rest }, ref) => {
|
|
11
11
|
const elementRef = react.useRef(undefined);
|
|
12
12
|
hooks.useEventCallback(elementRef, 'update', onUpdate);
|
|
13
13
|
const WebComponentTag = hooks.usePrefix('p-pin-code');
|
|
14
|
-
const propsToSync = [description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme || hooks.useTheme(), type, value];
|
|
14
|
+
const propsToSync = [compact, description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme || hooks.useTheme(), type, value];
|
|
15
15
|
hooks.useBrowserLayoutEffect(() => {
|
|
16
16
|
const { current } = elementRef;
|
|
17
|
-
['description', 'disabled', 'form', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
17
|
+
['compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
18
18
|
}, propsToSync);
|
|
19
19
|
const props = {
|
|
20
20
|
...rest,
|
|
21
21
|
// @ts-ignore
|
|
22
22
|
...(!process.browser
|
|
23
23
|
? {
|
|
24
|
-
children: (jsxRuntime.jsx(pinCode.DSRPinCode, { description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme: theme || hooks.useTheme(), type, value, children })),
|
|
24
|
+
children: (jsxRuntime.jsx(pinCode.DSRPinCode, { compact, description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme: theme || hooks.useTheme(), type, value, children })),
|
|
25
25
|
}
|
|
26
26
|
: {
|
|
27
27
|
children,
|
package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox.cjs
CHANGED
|
@@ -20,6 +20,10 @@ class DSRCheckbox extends react.Component {
|
|
|
20
20
|
host;
|
|
21
21
|
// The "name" property is reflected as an attribute to ensure compatibility with native form submission.
|
|
22
22
|
// 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.
|
|
23
|
+
/**
|
|
24
|
+
* Emitted when checkbox checked property is changed.
|
|
25
|
+
* @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
|
|
26
|
+
*/
|
|
23
27
|
internals;
|
|
24
28
|
initialLoading = false;
|
|
25
29
|
defaultChecked;
|
package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pin-code.cjs
CHANGED
|
@@ -39,7 +39,7 @@ class DSRPinCode extends react.Component {
|
|
|
39
39
|
// reset array of input elements
|
|
40
40
|
this.inputElements = [];
|
|
41
41
|
const currentInputId = 'current-input';
|
|
42
|
-
const style = minifyCss.minifyCss(stylesEntry.getPinCodeCss(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.length, this.props.theme));
|
|
42
|
+
const style = minifyCss.minifyCss(stylesEntry.getPinCodeCss(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.length, this.props.compact, this.props.theme));
|
|
43
43
|
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, label: this.props.label, description: this.props.description, htmlFor: currentInputId, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [Array.from(new Array(this.props.length), (_, index) => (jsxRuntime.jsx("input", { name: this.props.name, form: this.props.form, ...(utilsEntry.isCurrentInput(index, this.props.value, this.props.length) && { id: currentInputId }), type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": `${utilsEntry.labelId} ${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
|
|
44
44
|
, defaultValue: this.props.value[index] === ' ' ? null : this.props.value[index], disabled: this.props.disabled, required: this.props.required }, index))), this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), 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 }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
|
|
45
45
|
}
|
|
@@ -3882,7 +3882,7 @@ hasWindow &&
|
|
|
3882
3882
|
const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
|
|
3883
3883
|
|
|
3884
3884
|
// index.ts
|
|
3885
|
-
var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
|
|
3885
|
+
var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "gt3-rs": { "src": "gt3-rs.03ac3ee.svg", "width": 238, "height": 25 }, "gt3": { "src": "gt3.bd3186c.svg", "width": 151, "height": 25 }, "gts": { "src": "gts.99bd35e.svg", "width": 121, "height": 25 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
|
|
3886
3886
|
|
|
3887
3887
|
const hasDocument = typeof document !== 'undefined';
|
|
3888
3888
|
|
|
@@ -4365,7 +4365,12 @@ const getComponentCss$1h = (isDisabledOrLoading, aspectRatio, size, weight, back
|
|
|
4365
4365
|
return getCss({
|
|
4366
4366
|
'@global': {
|
|
4367
4367
|
':host': {
|
|
4368
|
-
display: '
|
|
4368
|
+
display: 'flex',
|
|
4369
|
+
alignItems: 'stretch',
|
|
4370
|
+
// Safari workaround to scale the tile properly
|
|
4371
|
+
'@supports (-webkit-hyphens: auto)': {
|
|
4372
|
+
alignItems: 'baseline',
|
|
4373
|
+
},
|
|
4369
4374
|
hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
|
|
4370
4375
|
...addImportantToEachRule({
|
|
4371
4376
|
...colorSchemeStyles,
|
|
@@ -4419,7 +4424,10 @@ const getComponentCss$1h = (isDisabledOrLoading, aspectRatio, size, weight, back
|
|
|
4419
4424
|
})),
|
|
4420
4425
|
cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer',
|
|
4421
4426
|
width: '100%', // necessary in case tile content overflows in grid or flex context
|
|
4422
|
-
|
|
4427
|
+
// Safari workaround to scale the tile properly
|
|
4428
|
+
'@supports (-webkit-hyphens: auto)': {
|
|
4429
|
+
height: '100%',
|
|
4430
|
+
},
|
|
4423
4431
|
display: 'grid',
|
|
4424
4432
|
gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
|
|
4425
4433
|
...(hasGradient &&
|
|
@@ -6037,7 +6045,7 @@ const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
|
|
|
6037
6045
|
const cssVarInternalInputBaseScaling = '--p-internal-input-base-scaling';
|
|
6038
6046
|
// Determines the scaling factor for the input-number size. In "compact" mode, it uses 0.5 to achieve a 36px input-number (compact size).
|
|
6039
6047
|
// Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalInputBaseScaling`.
|
|
6040
|
-
const getScalingVar = (compact) => `var(${cssVarInternalInputBaseScaling}, ${compact ? 0.5 : 1})`;
|
|
6048
|
+
const getScalingVar$1 = (compact) => `var(${cssVarInternalInputBaseScaling}, ${compact ? 0.5 : 1})`;
|
|
6041
6049
|
/**
|
|
6042
6050
|
* @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
|
|
6043
6051
|
*/
|
|
@@ -6047,7 +6055,7 @@ const cssVarButtonPurePadding = '--ref-p-input-slotted-padding';
|
|
|
6047
6055
|
*/
|
|
6048
6056
|
const cssVarButtonPureMargin = '--ref-p-input-slotted-margin';
|
|
6049
6057
|
const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, state, compact, readOnly, theme, additionalInputJssStyle) => {
|
|
6050
|
-
const scalingVar = getScalingVar(compact);
|
|
6058
|
+
const scalingVar = getScalingVar$1(compact);
|
|
6051
6059
|
const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
|
|
6052
6060
|
const paddingInline = `max(2px, ${formElementPaddingHorizontal} * ${scalingVar})`;
|
|
6053
6061
|
const height = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
|
|
@@ -8245,7 +8253,12 @@ direction, hasDescription) => {
|
|
|
8245
8253
|
return getCss({
|
|
8246
8254
|
'@global': {
|
|
8247
8255
|
':host': {
|
|
8248
|
-
display: '
|
|
8256
|
+
display: 'flex',
|
|
8257
|
+
alignItems: 'stretch',
|
|
8258
|
+
// Safari workaround to scale the tile properly
|
|
8259
|
+
'@supports (-webkit-hyphens: auto)': {
|
|
8260
|
+
alignItems: 'baseline',
|
|
8261
|
+
},
|
|
8249
8262
|
hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
|
|
8250
8263
|
...addImportantToEachRule({
|
|
8251
8264
|
...colorSchemeStyles,
|
|
@@ -8305,7 +8318,10 @@ direction, hasDescription) => {
|
|
|
8305
8318
|
aspectRatio: aspectRatioValue.replace(':', '/'), // mapping of the deprecated aspect-ratio with ':'
|
|
8306
8319
|
})),
|
|
8307
8320
|
width: '100%', // necessary in case tile content overflows in grid or flex context
|
|
8308
|
-
|
|
8321
|
+
// Safari workaround to scale the tile properly
|
|
8322
|
+
'@supports (-webkit-hyphens: auto)': {
|
|
8323
|
+
height: '100%',
|
|
8324
|
+
},
|
|
8309
8325
|
display: 'grid',
|
|
8310
8326
|
gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
|
|
8311
8327
|
'&::after': {
|
|
@@ -8519,7 +8535,12 @@ background, align, compact, hasGradient, isDisabled) => {
|
|
|
8519
8535
|
return getCss({
|
|
8520
8536
|
'@global': {
|
|
8521
8537
|
':host': {
|
|
8522
|
-
display: '
|
|
8538
|
+
display: 'flex',
|
|
8539
|
+
alignItems: 'stretch',
|
|
8540
|
+
// Safari workaround to scale the tile properly
|
|
8541
|
+
'@supports (-webkit-hyphens: auto)': {
|
|
8542
|
+
alignItems: 'baseline',
|
|
8543
|
+
},
|
|
8523
8544
|
hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
|
|
8524
8545
|
...addImportantToEachRule({
|
|
8525
8546
|
...colorSchemeStyles,
|
|
@@ -8572,7 +8593,10 @@ background, align, compact, hasGradient, isDisabled) => {
|
|
|
8572
8593
|
aspectRatio: aspectRatioValue.replace(':', '/'), // mapping of the deprecated aspect-ratio with ':'
|
|
8573
8594
|
})),
|
|
8574
8595
|
width: '100%', // necessary in case tile content overflows in grid or flex context
|
|
8575
|
-
|
|
8596
|
+
// Safari workaround to scale the tile properly
|
|
8597
|
+
'@supports (-webkit-hyphens: auto)': {
|
|
8598
|
+
height: '100%',
|
|
8599
|
+
},
|
|
8576
8600
|
display: 'grid',
|
|
8577
8601
|
gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
|
|
8578
8602
|
...(hasGradient &&
|
|
@@ -9151,41 +9175,29 @@ const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(sty
|
|
|
9151
9175
|
return [key, value];
|
|
9152
9176
|
}));
|
|
9153
9177
|
|
|
9154
|
-
const
|
|
9155
|
-
|
|
9178
|
+
const cssVarInternalPinCodeScaling = '--p-internal-pin-code-scaling';
|
|
9179
|
+
const getScalingVar = (compact) => `var(${cssVarInternalPinCodeScaling}, ${compact ? 0.5 : 1})`;
|
|
9180
|
+
const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, length, compact, theme) => {
|
|
9181
|
+
const scalingVar = getScalingVar(compact);
|
|
9182
|
+
const dimension = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
|
|
9183
|
+
const gap = `max(${spacingStaticXSmall}, ${scalingVar} * ${spacingStaticSmall})`;
|
|
9184
|
+
const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
|
|
9185
|
+
// Min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least.
|
|
9186
|
+
const minWidth = `max(1rem, calc(${dimension} - ${borderWidthBase}*2 - ${paddingBlock}*2))`;
|
|
9156
9187
|
const inputStyles = removeStyles('input[readonly]', removeSlottedSelector(getSlottedTextFieldTextareaSelectStyles('input', state, isLoading, theme, {
|
|
9157
|
-
// TODO: move into getSlottedTextFieldTextareaSelectStyles()
|
|
9158
|
-
padding: `${formElementPaddingVertical} ${spacingStaticXSmall}`,
|
|
9159
9188
|
// TODO: move into getSlottedTextFieldTextareaSelectStyles() via parameter, e.g. textAlign=center|start
|
|
9160
9189
|
textAlign: 'center',
|
|
9161
|
-
// TODO: move into getSlottedTextFieldTextareaSelectStyles() via parameter, e.g. size=max|min
|
|
9162
|
-
maxWidth: inputSize,
|
|
9163
|
-
// min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least.
|
|
9164
|
-
minWidth: `calc(1rem + ${borderWidthBase}*2 + ${spacingStaticSmall}*2)`,
|
|
9165
|
-
...(length > 4 && {
|
|
9166
|
-
[getMediaQueryMax('xs')]: {
|
|
9167
|
-
// TODO: instead of having dedicated css rules depending on length we should try to implement a fluid one fits all solution
|
|
9168
|
-
maxWidth: 'auto',
|
|
9169
|
-
width: `calc((276px - (${spacingStaticSmall} * ${length - 1})) / ${length})`, // calculate the max with of the inputs that fit into grid in viewport base (276px)
|
|
9170
|
-
},
|
|
9171
|
-
}),
|
|
9172
9190
|
// TODO: move into getSlottedTextFieldTextareaSelectStyles() via parameter, e.g. isLoading
|
|
9173
9191
|
...(isLoading && {
|
|
9174
9192
|
opacity: 0.2, // TODO: not in sync with e.g. checkbox/radio-button loading style
|
|
9175
9193
|
cursor: 'not-allowed',
|
|
9176
9194
|
}),
|
|
9177
|
-
|
|
9178
|
-
|
|
9179
|
-
|
|
9180
|
-
|
|
9181
|
-
|
|
9182
|
-
|
|
9183
|
-
'&:nth-of-type(1)': { gridArea: '1/1' },
|
|
9184
|
-
'&:nth-of-type(2)': { gridArea: '1/2' },
|
|
9185
|
-
'&:nth-of-type(3)': { gridArea: '1/3' },
|
|
9186
|
-
'&:nth-of-type(4)': { gridArea: '1/4' },
|
|
9187
|
-
'&:nth-of-type(5)': { gridArea: '1/5' },
|
|
9188
|
-
'&:nth-of-type(6)': { gridArea: '1/6' },
|
|
9195
|
+
height: dimension,
|
|
9196
|
+
minWidth,
|
|
9197
|
+
maxWidth: dimension,
|
|
9198
|
+
width: 'auto',
|
|
9199
|
+
padding: paddingBlock,
|
|
9200
|
+
boxSizing: 'content-box',
|
|
9189
9201
|
})));
|
|
9190
9202
|
return getCss({
|
|
9191
9203
|
'@global': {
|
|
@@ -9205,17 +9217,20 @@ const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, length, them
|
|
|
9205
9217
|
gap: spacingStaticXSmall,
|
|
9206
9218
|
},
|
|
9207
9219
|
wrapper: {
|
|
9220
|
+
position: 'relative',
|
|
9208
9221
|
display: 'grid',
|
|
9209
|
-
gridTemplateColumns: `repeat(${length},
|
|
9222
|
+
gridTemplateColumns: `repeat(${length}, 1fr)`,
|
|
9210
9223
|
justifySelf: 'flex-start',
|
|
9211
|
-
gap
|
|
9224
|
+
gap,
|
|
9212
9225
|
},
|
|
9213
9226
|
...(isLoading && {
|
|
9214
9227
|
spinner: {
|
|
9215
|
-
|
|
9216
|
-
|
|
9217
|
-
|
|
9218
|
-
|
|
9228
|
+
position: 'absolute',
|
|
9229
|
+
top: '50%',
|
|
9230
|
+
left: '50%',
|
|
9231
|
+
transform: 'translate(-50%, -50%)',
|
|
9232
|
+
width: dimension,
|
|
9233
|
+
height: dimension,
|
|
9219
9234
|
pointerEvents: 'none',
|
|
9220
9235
|
},
|
|
9221
9236
|
}),
|
|
@@ -11522,4 +11537,4 @@ const getComponentCss = (size, theme) => {
|
|
|
11522
11537
|
});
|
|
11523
11538
|
};
|
|
11524
11539
|
|
|
11525
|
-
export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$1l as getAccordionCss, getComponentCss$1k as getBannerCss, getComponentCss$1g as getButtonCss, getComponentCss$1j as getButtonGroupCss, getComponentCss$1i as getButtonPureCss, getComponentCss$1h as getButtonTileCss, getComponentCss$1f as getCanvasCss, getComponentCss$1e as getCarouselCss, getComponentCss$1c as getCheckboxCss, getComponentCss$1d as getCheckboxWrapperCss, getComponentCss$1b as getContentWrapperCss, getComponentCss$1a as getCrestCss, getComponentCss$19 as getDisplayCss, getComponentCss$18 as getDividerCss, getComponentCss$17 as getDrilldownCss, getComponentCss$16 as getDrilldownItemCss, getComponentCss$15 as getDrilldownLinkCss, getComponentCss$13 as getFieldsetCss, getComponentCss$14 as getFieldsetWrapperCss, getComponentCss$12 as getFlagCss, getComponentCss$10 as getFlexCss, getComponentCss$11 as getFlexItemCss, getComponentCss$$ as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$Z as getGridCss, getComponentCss$_ as getGridItemCss, getComponentCss$Y as getHeadingCss, getComponentCss$X as getHeadlineCss, getComponentCss$W as getIconCss, getComponentCss$V as getInlineNotificationCss, getComponentCss$U as getInputDateCss, getComponentCss$T as getInputEmailCss, getComponentCss$S as getInputNumberCss, getComponentCss$R as getInputPasswordCss, getComponentCss$Q as getInputSearchCss, getComponentCss$P as getInputTelCss, getComponentCss$O as getInputTextCss, getComponentCss$N as getInputTimeCss, getComponentCss$M as getInputUrlCss, getComponentCss$K as getLinkCss, getComponentCss$L as getLinkPureCss, getComponentCss$K as getLinkSocialCss, getComponentCss$H as getLinkTileCss, getComponentCss$J as getLinkTileModelSignatureCss, getComponentCss$I as getLinkTileProductCss, getComponentCss$G as getMarqueCss, getComponentCss$F as getModalCss, getComponentCss$E as getModelSignatureCss, getComponentCss$B as getMultiSelectCss, getComponentCss$D as getMultiSelectOptionCss, getComponentCss$C as getOptgroupCss, getComponentCss$A as getPaginationCss, getComponentCss$z as getPinCodeCss, getComponentCss$y as getPopoverCss, getComponentCss$x as getRadioButtonWrapperCss, getScalingVar, getComponentCss$w as getScrollerCss, getComponentCss$u as getSegmentedControlCss, getComponentCss$v as getSegmentedControlItemCss, getComponentCss$q as getSelectCss, getComponentCss$r as getSelectOptionCss, getComponentCss$s as getSelectWrapperCss, getComponentCss$t as getSelectWrapperDropdownCss, getComponentCss$p as getSheetCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$j as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
|
|
11540
|
+
export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$1l as getAccordionCss, getComponentCss$1k as getBannerCss, getComponentCss$1g as getButtonCss, getComponentCss$1j as getButtonGroupCss, getComponentCss$1i as getButtonPureCss, getComponentCss$1h as getButtonTileCss, getComponentCss$1f as getCanvasCss, getComponentCss$1e as getCarouselCss, getComponentCss$1c as getCheckboxCss, getComponentCss$1d as getCheckboxWrapperCss, getComponentCss$1b as getContentWrapperCss, getComponentCss$1a as getCrestCss, getComponentCss$19 as getDisplayCss, getComponentCss$18 as getDividerCss, getComponentCss$17 as getDrilldownCss, getComponentCss$16 as getDrilldownItemCss, getComponentCss$15 as getDrilldownLinkCss, getComponentCss$13 as getFieldsetCss, getComponentCss$14 as getFieldsetWrapperCss, getComponentCss$12 as getFlagCss, getComponentCss$10 as getFlexCss, getComponentCss$11 as getFlexItemCss, getComponentCss$$ as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$Z as getGridCss, getComponentCss$_ as getGridItemCss, getComponentCss$Y as getHeadingCss, getComponentCss$X as getHeadlineCss, getComponentCss$W as getIconCss, getComponentCss$V as getInlineNotificationCss, getComponentCss$U as getInputDateCss, getComponentCss$T as getInputEmailCss, getComponentCss$S as getInputNumberCss, getComponentCss$R as getInputPasswordCss, getComponentCss$Q as getInputSearchCss, getComponentCss$P as getInputTelCss, getComponentCss$O as getInputTextCss, getComponentCss$N as getInputTimeCss, getComponentCss$M as getInputUrlCss, getComponentCss$K as getLinkCss, getComponentCss$L as getLinkPureCss, getComponentCss$K as getLinkSocialCss, getComponentCss$H as getLinkTileCss, getComponentCss$J as getLinkTileModelSignatureCss, getComponentCss$I as getLinkTileProductCss, getComponentCss$G as getMarqueCss, getComponentCss$F as getModalCss, getComponentCss$E as getModelSignatureCss, getComponentCss$B as getMultiSelectCss, getComponentCss$D as getMultiSelectOptionCss, getComponentCss$C as getOptgroupCss, getComponentCss$A as getPaginationCss, getComponentCss$z as getPinCodeCss, getComponentCss$y as getPopoverCss, getComponentCss$x as getRadioButtonWrapperCss, getScalingVar$1 as getScalingVar, getComponentCss$w as getScrollerCss, getComponentCss$u as getSegmentedControlCss, getComponentCss$v as getSegmentedControlItemCss, getComponentCss$q as getSelectCss, getComponentCss$r as getSelectOptionCss, getComponentCss$s as getSelectWrapperCss, getComponentCss$t as getSelectWrapperDropdownCss, getComponentCss$p as getSheetCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$j as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
|
|
@@ -3429,13 +3429,13 @@ var CRESTS_MANIFEST = { "porscheCrest": { "1x": { "png": "porsche-crest.d76137c@
|
|
|
3429
3429
|
var FLAGS_MANIFEST = { "ae": "ae.070e003.svg", "am": "am.b228450.svg", "ar": "ar.d3ecad6.svg", "at": "at.19b8f3c.svg", "au": "au.9ccee18.svg", "az": "az.463b388.svg", "ba": "ba.57e215c.svg", "be": "be.6601715.svg", "bg": "bg.2a1ef06.svg", "bh": "bh.f6ce1b1.svg", "bn": "bn.5bb9faf.svg", "bo": "bo.2a95304.svg", "br": "br.071ef4a.svg", "by": "by.bbe68ec.svg", "ca": "ca.3524ab1.svg", "ch": "ch.1cc9a58.svg", "cl": "cl.7226017.svg", "cn": "cn.3e2e196.svg", "co": "co.40bd283.svg", "cr": "cr.d275fe4.svg", "cw": "cw.2a2e69b.svg", "cy": "cy.eecbae2.svg", "cz": "cz.84fcee1.svg", "de": "de.b575e11.svg", "dk": "dk.8faad28.svg", "do": "do.8cbff53.svg", "dz": "dz.92ac4dd.svg", "ec": "ec.8b790aa.svg", "ee": "ee.0d69319.svg", "eg": "eg.3d6e702.svg", "es": "es.8259527.svg", "fi": "fi.abcdec4.svg", "fr": "fr.e6f575e.svg", "gb": "gb.c8be57d.svg", "ge": "ge.1828ada.svg", "gh": "gh.dcc9966.svg", "gr": "gr.8d404a0.svg", "gt": "gt.d28dda2.svg", "hk": "hk.a791020.svg", "hn": "hn.61767b1.svg", "hr": "hr.09fd51c.svg", "ht": "ht.a0f15d3.svg", "hu": "hu.1e61356.svg", "id": "id.01c0ab3.svg", "ie": "ie.cec77fa.svg", "il": "il.add57d7.svg", "in": "in.15aa313.svg", "is": "is.2d193b5.svg", "it": "it.d26868c.svg", "jm": "jm.6266f91.svg", "jo": "jo.6759235.svg", "jp": "jp.32c39a2.svg", "ke": "ke.96a51ec.svg", "kh": "kh.ac03e8a.svg", "kr": "kr.f9b3228.svg", "kw": "kw.ecb70e0.svg", "kz": "kz.5f31a4b.svg", "lb": "lb.eed52fa.svg", "lk": "lk.1b44ee9.svg", "lt": "lt.5448f1b.svg", "lu": "lu.11992af.svg", "lv": "lv.c45d630.svg", "ma": "ma.37960b7.svg", "md": "md.7ed7b6b.svg", "mk": "mk.08eaad6.svg", "mn": "mn.fd0cde6.svg", "mo": "mo.a7e3c7c.svg", "mq": "mq.f55f7ca.svg", "mt": "mt.1ee108a.svg", "mu": "mu.f901db6.svg", "mx": "mx.c39bf62.svg", "my": "my.b7366cd.svg", "ng": "ng.d1ac1ea.svg", "nl": "nl.0569e12.svg", "no": "no.b4f2c38.svg", "nz": "nz.a70a24d.svg", "om": "om.d63d939.svg", "pa": "pa.f33ec1a.svg", "pe": "pe.2cacc5f.svg", "pf": "pf.50807f4.svg", "ph": "ph.1df49d2.svg", "pk": "pk.86b11da.svg", "pl": "pl.e0ef0ec.svg", "pr": "pr.79d60a1.svg", "pt": "pt.c903b10.svg", "py": "py.e39a820.svg", "qa": "qa.47e5e31.svg", "ro": "ro.9d14812.svg", "rs": "rs.7c7c211.svg", "ru": "ru.eb87254.svg", "sa": "sa.1a8f5b9.svg", "se": "se.f2705e2.svg", "sg": "sg.bca7a48.svg", "si": "si.c018e71.svg", "sk": "sk.d3177a9.svg", "sv": "sv.26aaba9.svg", "th": "th.1c48f08.svg", "tn": "tn.e119e22.svg", "tr": "tr.b4170f9.svg", "tt": "tt.7f3e1df.svg", "ua": "ua.73e5a3e.svg", "us": "us.10d7b02.svg", "uy": "uy.666b0bc.svg", "uz": "uz.8fa8ad3.svg", "ve": "ve.6cd1ec7.svg", "vn": "vn.3e0128f.svg", "za": "za.1bb0840.svg" };
|
|
3430
3430
|
|
|
3431
3431
|
// index.ts
|
|
3432
|
-
var ICONS_MANIFEST = { "360": "360.0600731.svg", "4-wheel-drive": "4-wheel-drive.9c218bf.svg", "accessibility": "accessibility.087d747.svg", "active-cabin-ventilation": "active-cabin-ventilation.b081399.svg", "add": "add.fac861a.svg", "adjust": "adjust.ca46bd4.svg", "aggregation": "aggregation.96f06e5.svg", "ai-spark": "ai-spark.a134e18.svg", "ai-spark-filled": "ai-spark-filled.2d5d971.svg", "arrow-compact-down": "arrow-compact-down.9b37afe.svg", "arrow-compact-left": "arrow-compact-left.7169de6.svg", "arrow-compact-right": "arrow-compact-right.cc2d1d2.svg", "arrow-compact-up": "arrow-compact-up.36724bb.svg", "arrow-double-down": "arrow-double-down.61ae4d7.svg", "arrow-double-left": "arrow-double-left.1b576eb.svg", "arrow-double-right": "arrow-double-right.dcfabff.svg", "arrow-double-up": "arrow-double-up.fb73db5.svg", "arrow-down": "arrow-down.49c6983.svg", "arrow-first": "arrow-first.beb7d9f.svg", "arrow-head-down": "arrow-head-down.1e3cbb8.svg", "arrow-head-left": "arrow-head-left.cf1395d.svg", "arrow-head-right": "arrow-head-right.304b330.svg", "arrow-head-up": "arrow-head-up.6d3fd23.svg", "arrow-last": "arrow-last.cc24903.svg", "arrow-left": "arrow-left.e03c25b.svg", "arrow-right": "arrow-right.872716b.svg", "arrow-up": "arrow-up.9d294d1.svg", "arrows": "arrows.de040f9.svg", "attachment": "attachment.8f3dd0a.svg", "augmented-reality": "augmented-reality.8b6ce95.svg", "battery-empty": "battery-empty.38b4b15.svg", "battery-empty-co2": "battery-empty-co2.c4cabef.svg", "battery-empty-fuel": "battery-empty-fuel.e833e13.svg", "battery-full": "battery-full.03de75d.svg", "battery-half": "battery-half.11f1ef8.svg", "battery-one-quarter": "battery-one-quarter.91235a0.svg", "battery-three-quarters": "battery-three-quarters.dcf768f.svg", "bell": "bell.1eab3a2.svg", "bookmark": "bookmark.9d6982f.svg", "bookmark-filled": "bookmark-filled.327ac78.svg", "brain": "brain.838387a.svg", "broadcast": "broadcast.0ad5a15.svg", "cabriolet": "cabriolet.ab33aab.svg", "calculator": "calculator.a323a2d.svg", "calendar": "calendar.70a6a12.svg", "camera": "camera.e5e95b9.svg", "car": "car.35229c9.svg", "car-battery": "car-battery.895510f.svg", "card": "card.f284448.svg", "charging-active": "charging-active.c3aa214.svg", "charging-network": "charging-network.a40072f.svg", "charging-state": "charging-state.f56d8df.svg", "charging-station": "charging-station.5ff1ed4.svg", "chart": "chart.c8c32d2.svg", "chat": "chat.7945544.svg", "check": "check.8ba06be.svg", "city": "city.5ae672c.svg", "climate": "climate.a9d5818.svg", "climate-control": "climate-control.ce31939.svg", "clock": "clock.c88a1ef.svg", "close": "close.eec3c5d.svg", "closed-caption": "closed-caption.ceaf6cb.svg", "cloud": "cloud.2c3959e.svg", "co2-class": "co2-class.fc49211.svg", "co2-emission": "co2-emission.c42e7f8.svg", "color-picker": "color-picker.598f402.svg", "compare": "compare.6578829.svg", "compass": "compass.f90f319.svg", "configurate": "configurate.5311c8d.svg", "copy": "copy.0fcd086.svg", "country-road": "country-road.d2bbc5a.svg", "coupe": "coupe.7549e3e.svg", "cubic-capacity": "cubic-capacity.7b0b8c8.svg", "cut": "cut.851e5c2.svg", "delete": "delete.5a8c8ca.svg", "disable": "disable.5918c32.svg", "dislike": "dislike.51614b0.svg", "dislike-filled": "dislike-filled.e1a8c4d.svg", "document": "document.df36b6c.svg", "door": "door.61c32d6.svg", "download": "download.c06f455.svg", "drag": "drag.9e893fd.svg", "duration": "duration.94e5252.svg", "ear": "ear.27a802f.svg", "edit": "edit.330f321.svg", "email": "email.f2530de.svg", "error": "error.b8ae9ad.svg", "error-filled": "error-filled.a4d06ed.svg", "exclamation": "exclamation.46cd17b.svg", "exclamation-filled": "exclamation-filled.9d09ed1.svg", "external": "external.fb677b9.svg", "fast-backward": "fast-backward.a71faae.svg", "fast-forward": "fast-forward.1e6fa9f.svg", "file-csv": "file-csv.4140e24.svg", "file-excel": "file-excel.56d577d.svg", "filter": "filter.610f808.svg", "fingerprint": "fingerprint.6a85170.svg", "flag": "flag.7af5baf.svg", "flash": "flash.88a2ada.svg", "fuel-station": "fuel-station.f7bdf51.svg", "garage": "garage.5014e8d.svg", "genuine-parts": "genuine-parts.6bfddde.svg", "geo-localization": "geo-localization.516d603.svg", "gift": "gift.7beb1eb.svg", "globe": "globe.56cc8fc.svg", "grid": "grid.06bc31a.svg", "grip": "grip.5ec4289.svg", "group": "group.051436a.svg", "hand": "hand.4e85714.svg", "heart": "heart.9a5962e.svg", "heart-filled": "heart-filled.dd7decf.svg", "highway": "highway.bf0eb24.svg", "highway-filled": "highway-filled.38e93fb.svg", "history": "history.f09645c.svg", "home": "home.7b1d1da.svg", "horn": "horn.bf47b1a.svg", "image": "image.b2614f0.svg", "increase": "increase.700012f.svg", "information": "information.da41162.svg", "information-filled": "information-filled.8f08911.svg", "key": "key.ee5d89b.svg", "laptop": "laptop.c422480.svg", "leaf": "leaf.92ca6a6.svg", "leather": "leather.1d2769a.svg", "light": "light.f0eb8e4.svg", "like": "like.a7468cd.svg", "like-filled": "like-filled.a0126c1.svg", "limousine": "limousine.87799d5.svg", "linked": "linked.8f30cb5.svg", "list": "list.411dd00.svg", "locate": "locate.6554f9e.svg", "lock": "lock.243281a.svg", "lock-open": "lock-open.95803d2.svg", "logo-apple-carplay": "logo-apple-carplay.c872af9.svg", "logo-apple-music": "logo-apple-music.1395f37.svg", "logo-apple-podcast": "logo-apple-podcast.09be038.svg", "logo-baidu": "logo-baidu.9e89c7d.svg", "logo-delicious": "logo-delicious.e83f574.svg", "logo-digg": "logo-digg.f096670.svg", "logo-facebook": "logo-facebook.74abe88.svg", "logo-foursquare": "logo-foursquare.d638fd8.svg", "logo-gmail": "logo-gmail.5f96ee2.svg", "logo-google": "logo-google.1dee423.svg", "logo-hatena": "logo-hatena.da509f0.svg", "logo-instagram": "logo-instagram.b916daa.svg", "logo-kaixin": "logo-kaixin.b1211a2.svg", "logo-kakaotalk": "logo-kakaotalk.38f5396.svg", "logo-kununu": "logo-kununu.79344ff.svg", "logo-linkedin": "logo-linkedin.b72559f.svg", "logo-naver": "logo-naver.75588fe.svg", "logo-pinterest": "logo-pinterest.e8f6963.svg", "logo-qq": "logo-qq.6d9b6d9.svg", "logo-qq-share": "logo-qq-share.ee864d9.svg", "logo-reddit": "logo-reddit.da13e44.svg", "logo-skyrock": "logo-skyrock.eb2f28d.svg", "logo-snapchat": "logo-snapchat.ef706a2.svg", "logo-sohu": "logo-sohu.a30c66b.svg", "logo-spotify": "logo-spotify.2ec4b2d.svg", "logo-tecent": "logo-tecent.d119e85.svg", "logo-telegram": "logo-telegram.d151481.svg", "logo-tiktok": "logo-tiktok.2f3a465.svg", "logo-tumblr": "logo-tumblr.c689f44.svg", "logo-twitter": "logo-twitter.5f2490a.svg", "logo-viber": "logo-viber.198bd43.svg", "logo-vk": "logo-vk.37b94e0.svg", "logo-wechat": "logo-wechat.83b2b98.svg", "logo-weibo": "logo-weibo.c8dacee.svg", "logo-whatsapp": "logo-whatsapp.add9a6d.svg", "logo-x": "logo-x.5f2490a.svg", "logo-xing": "logo-xing.3a8df0f.svg", "logo-yahoo": "logo-yahoo.8cbd0ba.svg", "logo-youku": "logo-youku.fe988d0.svg", "logo-youtube": "logo-youtube.da3798f.svg", "logout": "logout.7ec7451.svg", "map": "map.c16f618.svg", "menu-dots-horizontal": "menu-dots-horizontal.788f7fa.svg", "menu-dots-vertical": "menu-dots-vertical.4970a65.svg", "menu-lines": "menu-lines.e332216.svg", "microphone": "microphone.8ecdce6.svg", "minus": "minus.f6d964c.svg", "mobile": "mobile.7f35446.svg", "moon": "moon.5b73246.svg", "new-chat": "new-chat.95ffd2e.svg", "news": "news.5b604b0.svg", "north-arrow": "north-arrow.2da1dbe.svg", "oil-can": "oil-can.cb58fc7.svg", "online-search": "online-search.90e9ab1.svg", "parking-brake": "parking-brake.45704bd.svg", "parking-light": "parking-light.c49a231.svg", "paste": "paste.dd60261.svg", "pause": "pause.e41b935.svg", "phone": "phone.f4f774b.svg", "pin": "pin.3417cec.svg", "pin-filled": "pin-filled.7b8e9ba.svg", "pivot": "pivot.3ae18b8.svg", "play": "play.24226d4.svg", "plug": "plug.c159935.svg", "plus": "plus.319993e.svg", "preheating": "preheating.e2a796f.svg", "price-tag": "price-tag.f0d3917.svg", "printer": "printer.f59b0ee.svg", "purchase": "purchase.9cd6d65.svg", "push-pin": "push-pin.89e4ead.svg", "push-pin-off": "push-pin-off.ba99213.svg", "qr": "qr.87a49a3.svg", "qr-off": "qr-off.64e21b9.svg", "question": "question.3402a63.svg", "question-filled": "question-filled.cf25dd5.svg", "racing-flag": "racing-flag.b7ddcc8.svg", "radar": "radar.de5a6c1.svg", "radio": "radio.2b48e53.svg", "refresh": "refresh.41fd868.svg", "replay": "replay.55a99f2.svg", "reset": "reset.e53d52f.svg", "return": "return.46d30de.svg", "road": "road.bd3d4bc.svg", "roof-closed": "roof-closed.018d021.svg", "roof-open": "roof-open.51c8ee6.svg", "route": "route.f4fbbb4.svg", "rss": "rss.0e77baf.svg", "save": "save.6171ff5.svg", "screen": "screen.420be15.svg", "search": "search.3f0f1ce.svg", "seat": "seat.a3ebc40.svg", "send": "send.b32099c.svg", "service-technician": "service-technician.8749028.svg", "share": "share.a0b30da.svg", "shopping-bag": "shopping-bag.3f91a9b.svg", "shopping-bag-filled": "shopping-bag-filled.abf6c98.svg", "shopping-cart": "shopping-cart.370e224.svg", "shopping-cart-filled": "shopping-cart-filled.e0c3a65.svg", "sidebar": "sidebar.8e43896.svg", "sidelights": "sidelights.65c9dd9.svg", "skip-backward": "skip-backward.cd25ac5.svg", "skip-forward": "skip-forward.001e97f.svg", "snowflake": "snowflake.83907b3.svg", "sort": "sort.92b50bd.svg", "stack": "stack.804af93.svg", "star": "star.4c5bb15.svg", "star-filled": "star-filled.84ef2f6.svg", "steering-wheel": "steering-wheel.4dea19e.svg", "stop": "stop.173b6ac.svg", "stopwatch": "stopwatch.0e048a4.svg", "subtract": "subtract.57eed1d.svg", "success": "success.b16d4c1.svg", "success-filled": "success-filled.1832d98.svg", "sun": "sun.4301cbd.svg", "suv": "suv.33ac4aa.svg", "switch": "switch.66f74c4.svg", "tablet": "tablet.07341ac.svg", "tachometer": "tachometer.3a2fc3c.svg", "theme": "theme.08f6508.svg", "tire": "tire.e5c9372.svg", "trigger-finger": "trigger-finger.65aa6e2.svg", "truck": "truck.2c26c04.svg", "turismo": "turismo.a066b9f.svg", "unlinked": "unlinked.e9afe39.svg", "upload": "upload.d1f5a2a.svg", "user": "user.c18dabe.svg", "user-filled": "user-filled.2ea646d.svg", "user-group": "user-group.79cdf86.svg", "user-manual": "user-manual.470e243.svg", "video": "video.7590689.svg", "view": "view.5b4d7f6.svg", "view-off": "view-off.a4ede54.svg", "volume-off": "volume-off.bcd49e7.svg", "volume-up": "volume-up.2084f60.svg", "warning": "warning.59927e6.svg", "warning-filled": "warning-filled.1f6fe21.svg", "weather": "weather.9c96bd7.svg", "weight": "weight.b57a60d.svg", "wifi": "wifi.e2a8d9c.svg", "work": "work.9dd71a4.svg", "wrench": "wrench.09a2a67.svg", "wrenches": "wrenches.d2ed45d.svg", "zoom-in": "zoom-in.ff299b8.svg", "zoom-out": "zoom-out.ebb6246.svg" };
|
|
3432
|
+
var ICONS_MANIFEST = { "360": "360.0600731.svg", "4-wheel-drive": "4-wheel-drive.9c218bf.svg", "accessibility": "accessibility.087d747.svg", "active-cabin-ventilation": "active-cabin-ventilation.b081399.svg", "add": "add.fac861a.svg", "adjust": "adjust.ca46bd4.svg", "aggregation": "aggregation.96f06e5.svg", "ai-3d-object": "ai-3d-object.7a85dd7.svg", "ai-code": "ai-code.9afafb7.svg", "ai-edit": "ai-edit.75a4765.svg", "ai-image": "ai-image.c786d48.svg", "ai-scale": "ai-scale.846fde0.svg", "ai-sound": "ai-sound.727ea7a.svg", "ai-spark": "ai-spark.a134e18.svg", "ai-spark-filled": "ai-spark-filled.2d5d971.svg", "ai-text": "ai-text.fc84e09.svg", "ai-video": "ai-video.759a7f2.svg", "arrow-compact-down": "arrow-compact-down.9b37afe.svg", "arrow-compact-left": "arrow-compact-left.7169de6.svg", "arrow-compact-right": "arrow-compact-right.cc2d1d2.svg", "arrow-compact-up": "arrow-compact-up.36724bb.svg", "arrow-double-down": "arrow-double-down.61ae4d7.svg", "arrow-double-left": "arrow-double-left.1b576eb.svg", "arrow-double-right": "arrow-double-right.dcfabff.svg", "arrow-double-up": "arrow-double-up.fb73db5.svg", "arrow-down": "arrow-down.49c6983.svg", "arrow-first": "arrow-first.beb7d9f.svg", "arrow-head-down": "arrow-head-down.1e3cbb8.svg", "arrow-head-left": "arrow-head-left.cf1395d.svg", "arrow-head-right": "arrow-head-right.304b330.svg", "arrow-head-up": "arrow-head-up.6d3fd23.svg", "arrow-last": "arrow-last.cc24903.svg", "arrow-left": "arrow-left.e03c25b.svg", "arrow-right": "arrow-right.872716b.svg", "arrow-up": "arrow-up.9d294d1.svg", "arrows": "arrows.de040f9.svg", "attachment": "attachment.8f3dd0a.svg", "augmented-reality": "augmented-reality.8b6ce95.svg", "battery-empty": "battery-empty.38b4b15.svg", "battery-empty-co2": "battery-empty-co2.c4cabef.svg", "battery-empty-fuel": "battery-empty-fuel.e833e13.svg", "battery-full": "battery-full.03de75d.svg", "battery-half": "battery-half.11f1ef8.svg", "battery-one-quarter": "battery-one-quarter.91235a0.svg", "battery-three-quarters": "battery-three-quarters.dcf768f.svg", "bell": "bell.1eab3a2.svg", "bookmark": "bookmark.9d6982f.svg", "bookmark-filled": "bookmark-filled.327ac78.svg", "brain": "brain.838387a.svg", "broadcast": "broadcast.0ad5a15.svg", "cabriolet": "cabriolet.ab33aab.svg", "calculator": "calculator.a323a2d.svg", "calendar": "calendar.70a6a12.svg", "camera": "camera.e5e95b9.svg", "car": "car.35229c9.svg", "car-battery": "car-battery.895510f.svg", "card": "card.f284448.svg", "charging-active": "charging-active.c3aa214.svg", "charging-network": "charging-network.a40072f.svg", "charging-state": "charging-state.f56d8df.svg", "charging-station": "charging-station.5ff1ed4.svg", "chart": "chart.c8c32d2.svg", "chat": "chat.7945544.svg", "check": "check.8ba06be.svg", "city": "city.5ae672c.svg", "climate": "climate.a9d5818.svg", "climate-control": "climate-control.ce31939.svg", "clock": "clock.c88a1ef.svg", "close": "close.eec3c5d.svg", "closed-caption": "closed-caption.ceaf6cb.svg", "cloud": "cloud.2c3959e.svg", "co2-class": "co2-class.fc49211.svg", "co2-emission": "co2-emission.c42e7f8.svg", "color-picker": "color-picker.598f402.svg", "compare": "compare.6578829.svg", "compass": "compass.f90f319.svg", "configurate": "configurate.5311c8d.svg", "copy": "copy.0fcd086.svg", "country-road": "country-road.d2bbc5a.svg", "coupe": "coupe.7549e3e.svg", "cubic-capacity": "cubic-capacity.7b0b8c8.svg", "cut": "cut.851e5c2.svg", "delete": "delete.5a8c8ca.svg", "disable": "disable.5918c32.svg", "dislike": "dislike.51614b0.svg", "dislike-filled": "dislike-filled.e1a8c4d.svg", "document": "document.df36b6c.svg", "door": "door.61c32d6.svg", "download": "download.c06f455.svg", "drag": "drag.9e893fd.svg", "duration": "duration.94e5252.svg", "ear": "ear.27a802f.svg", "edit": "edit.330f321.svg", "email": "email.f2530de.svg", "error": "error.b8ae9ad.svg", "error-filled": "error-filled.a4d06ed.svg", "exclamation": "exclamation.46cd17b.svg", "exclamation-filled": "exclamation-filled.9d09ed1.svg", "external": "external.fb677b9.svg", "fast-backward": "fast-backward.a71faae.svg", "fast-forward": "fast-forward.1e6fa9f.svg", "file-csv": "file-csv.4140e24.svg", "file-excel": "file-excel.56d577d.svg", "filter": "filter.610f808.svg", "fingerprint": "fingerprint.6a85170.svg", "flag": "flag.7af5baf.svg", "flash": "flash.88a2ada.svg", "fuel-station": "fuel-station.f7bdf51.svg", "garage": "garage.5014e8d.svg", "genuine-parts": "genuine-parts.6bfddde.svg", "geo-localization": "geo-localization.516d603.svg", "gift": "gift.7beb1eb.svg", "globe": "globe.56cc8fc.svg", "grid": "grid.06bc31a.svg", "grip": "grip.5ec4289.svg", "group": "group.051436a.svg", "hand": "hand.4e85714.svg", "heart": "heart.9a5962e.svg", "heart-filled": "heart-filled.dd7decf.svg", "highway": "highway.bf0eb24.svg", "highway-filled": "highway-filled.38e93fb.svg", "history": "history.f09645c.svg", "home": "home.7b1d1da.svg", "horn": "horn.bf47b1a.svg", "image": "image.b2614f0.svg", "increase": "increase.700012f.svg", "information": "information.da41162.svg", "information-filled": "information-filled.8f08911.svg", "key": "key.ee5d89b.svg", "laptop": "laptop.c422480.svg", "leaf": "leaf.92ca6a6.svg", "leather": "leather.1d2769a.svg", "light": "light.f0eb8e4.svg", "like": "like.a7468cd.svg", "like-filled": "like-filled.a0126c1.svg", "limousine": "limousine.87799d5.svg", "linked": "linked.8f30cb5.svg", "list": "list.411dd00.svg", "locate": "locate.6554f9e.svg", "lock": "lock.243281a.svg", "lock-open": "lock-open.95803d2.svg", "logo-apple-carplay": "logo-apple-carplay.c872af9.svg", "logo-apple-music": "logo-apple-music.1395f37.svg", "logo-apple-podcast": "logo-apple-podcast.09be038.svg", "logo-baidu": "logo-baidu.9e89c7d.svg", "logo-delicious": "logo-delicious.e83f574.svg", "logo-digg": "logo-digg.f096670.svg", "logo-facebook": "logo-facebook.74abe88.svg", "logo-foursquare": "logo-foursquare.d638fd8.svg", "logo-gmail": "logo-gmail.5f96ee2.svg", "logo-google": "logo-google.1dee423.svg", "logo-hatena": "logo-hatena.da509f0.svg", "logo-instagram": "logo-instagram.b916daa.svg", "logo-kaixin": "logo-kaixin.b1211a2.svg", "logo-kakaotalk": "logo-kakaotalk.38f5396.svg", "logo-kununu": "logo-kununu.79344ff.svg", "logo-linkedin": "logo-linkedin.b72559f.svg", "logo-naver": "logo-naver.75588fe.svg", "logo-pinterest": "logo-pinterest.e8f6963.svg", "logo-qq": "logo-qq.6d9b6d9.svg", "logo-qq-share": "logo-qq-share.ee864d9.svg", "logo-reddit": "logo-reddit.da13e44.svg", "logo-skyrock": "logo-skyrock.eb2f28d.svg", "logo-snapchat": "logo-snapchat.ef706a2.svg", "logo-sohu": "logo-sohu.a30c66b.svg", "logo-spotify": "logo-spotify.2ec4b2d.svg", "logo-tecent": "logo-tecent.d119e85.svg", "logo-telegram": "logo-telegram.d151481.svg", "logo-tiktok": "logo-tiktok.2f3a465.svg", "logo-tumblr": "logo-tumblr.c689f44.svg", "logo-twitter": "logo-twitter.5f2490a.svg", "logo-viber": "logo-viber.198bd43.svg", "logo-vk": "logo-vk.37b94e0.svg", "logo-wechat": "logo-wechat.83b2b98.svg", "logo-weibo": "logo-weibo.c8dacee.svg", "logo-whatsapp": "logo-whatsapp.add9a6d.svg", "logo-x": "logo-x.5f2490a.svg", "logo-xing": "logo-xing.3a8df0f.svg", "logo-yahoo": "logo-yahoo.8cbd0ba.svg", "logo-youku": "logo-youku.fe988d0.svg", "logo-youtube": "logo-youtube.da3798f.svg", "logout": "logout.7ec7451.svg", "map": "map.c16f618.svg", "menu-dots-horizontal": "menu-dots-horizontal.788f7fa.svg", "menu-dots-vertical": "menu-dots-vertical.4970a65.svg", "menu-lines": "menu-lines.e332216.svg", "microphone": "microphone.8ecdce6.svg", "minus": "minus.f6d964c.svg", "mobile": "mobile.7f35446.svg", "moon": "moon.5b73246.svg", "new-chat": "new-chat.95ffd2e.svg", "news": "news.5b604b0.svg", "north-arrow": "north-arrow.2da1dbe.svg", "oil-can": "oil-can.cb58fc7.svg", "online-search": "online-search.90e9ab1.svg", "parking-brake": "parking-brake.45704bd.svg", "parking-light": "parking-light.c49a231.svg", "paste": "paste.dd60261.svg", "pause": "pause.e41b935.svg", "phone": "phone.f4f774b.svg", "pin": "pin.3417cec.svg", "pin-filled": "pin-filled.7b8e9ba.svg", "pivot": "pivot.3ae18b8.svg", "play": "play.24226d4.svg", "plug": "plug.c159935.svg", "plus": "plus.319993e.svg", "preheating": "preheating.e2a796f.svg", "price-tag": "price-tag.f0d3917.svg", "printer": "printer.f59b0ee.svg", "purchase": "purchase.9cd6d65.svg", "push-pin": "push-pin.89e4ead.svg", "push-pin-off": "push-pin-off.ba99213.svg", "qr": "qr.87a49a3.svg", "qr-off": "qr-off.64e21b9.svg", "question": "question.3402a63.svg", "question-filled": "question-filled.cf25dd5.svg", "racing-flag": "racing-flag.b7ddcc8.svg", "radar": "radar.de5a6c1.svg", "radio": "radio.2b48e53.svg", "refresh": "refresh.41fd868.svg", "replay": "replay.55a99f2.svg", "reset": "reset.e53d52f.svg", "return": "return.46d30de.svg", "road": "road.bd3d4bc.svg", "roof-closed": "roof-closed.018d021.svg", "roof-open": "roof-open.51c8ee6.svg", "route": "route.f4fbbb4.svg", "rss": "rss.0e77baf.svg", "save": "save.6171ff5.svg", "screen": "screen.420be15.svg", "search": "search.3f0f1ce.svg", "seat": "seat.a3ebc40.svg", "send": "send.b32099c.svg", "service-technician": "service-technician.8749028.svg", "share": "share.a0b30da.svg", "shopping-bag": "shopping-bag.3f91a9b.svg", "shopping-bag-filled": "shopping-bag-filled.abf6c98.svg", "shopping-cart": "shopping-cart.370e224.svg", "shopping-cart-filled": "shopping-cart-filled.e0c3a65.svg", "sidebar": "sidebar.8e43896.svg", "sidelights": "sidelights.65c9dd9.svg", "skip-backward": "skip-backward.cd25ac5.svg", "skip-forward": "skip-forward.001e97f.svg", "snowflake": "snowflake.83907b3.svg", "sort": "sort.92b50bd.svg", "stack": "stack.804af93.svg", "star": "star.4c5bb15.svg", "star-filled": "star-filled.84ef2f6.svg", "steering-wheel": "steering-wheel.4dea19e.svg", "stop": "stop.173b6ac.svg", "stopwatch": "stopwatch.0e048a4.svg", "subtract": "subtract.57eed1d.svg", "success": "success.b16d4c1.svg", "success-filled": "success-filled.1832d98.svg", "sun": "sun.4301cbd.svg", "suv": "suv.33ac4aa.svg", "switch": "switch.66f74c4.svg", "tablet": "tablet.07341ac.svg", "tachometer": "tachometer.3a2fc3c.svg", "theme": "theme.08f6508.svg", "tire": "tire.e5c9372.svg", "trigger-finger": "trigger-finger.65aa6e2.svg", "truck": "truck.2c26c04.svg", "turismo": "turismo.a066b9f.svg", "unlinked": "unlinked.e9afe39.svg", "upload": "upload.d1f5a2a.svg", "user": "user.c18dabe.svg", "user-filled": "user-filled.2ea646d.svg", "user-group": "user-group.79cdf86.svg", "user-manual": "user-manual.470e243.svg", "video": "video.7590689.svg", "view": "view.5b4d7f6.svg", "view-off": "view-off.a4ede54.svg", "volume-off": "volume-off.bcd49e7.svg", "volume-up": "volume-up.2084f60.svg", "warning": "warning.59927e6.svg", "warning-filled": "warning-filled.1f6fe21.svg", "weather": "weather.9c96bd7.svg", "weight": "weight.b57a60d.svg", "wifi": "wifi.e2a8d9c.svg", "work": "work.9dd71a4.svg", "wrench": "wrench.09a2a67.svg", "wrenches": "wrenches.d2ed45d.svg", "zoom-in": "zoom-in.ff299b8.svg", "zoom-out": "zoom-out.ebb6246.svg" };
|
|
3433
3433
|
|
|
3434
3434
|
// index.ts
|
|
3435
3435
|
var MARQUES_MANIFEST = { "porscheMarqueTrademark": { "medium": { "1x": { "png": "porsche-marque-trademark.medium.da07531@1x.png", "webp": "porsche-marque-trademark.medium.5c6af9a@1x.webp" }, "2x": { "png": "porsche-marque-trademark.medium.aa801f4@2x.png", "webp": "porsche-marque-trademark.medium.fff6e9b@2x.webp" }, "3x": { "png": "porsche-marque-trademark.medium.824818d@3x.png", "webp": "porsche-marque-trademark.medium.f67092f@3x.webp" } }, "small": { "1x": { "png": "porsche-marque-trademark.small.020244b@1x.png", "webp": "porsche-marque-trademark.small.7836397@1x.webp" }, "2x": { "png": "porsche-marque-trademark.small.92184fa@2x.png", "webp": "porsche-marque-trademark.small.760a57e@2x.webp" }, "3x": { "png": "porsche-marque-trademark.small.fd545ce@3x.png", "webp": "porsche-marque-trademark.small.1726036@3x.webp" } } }, "porscheMarque": { "medium": { "1x": { "png": "porsche-marque.medium.a986274@1x.png", "webp": "porsche-marque.medium.fa908e4@1x.webp" }, "2x": { "png": "porsche-marque.medium.089d6dd@2x.png", "webp": "porsche-marque.medium.7f0893d@2x.webp" }, "3x": { "png": "porsche-marque.medium.2cb8743@3x.png", "webp": "porsche-marque.medium.3534cf0@3x.webp" } }, "small": { "1x": { "png": "porsche-marque.small.ac20427@1x.png", "webp": "porsche-marque.small.005debe@1x.webp" }, "2x": { "png": "porsche-marque.small.22f1e9d@2x.png", "webp": "porsche-marque.small.df43173@2x.webp" }, "3x": { "png": "porsche-marque.small.4920924@3x.png", "webp": "porsche-marque.small.cfd6149@3x.webp" } } }, "porscheMarque75": { "medium": { "1x": { "png": "porsche-marque75.medium.0a02e22@1x.png", "webp": "porsche-marque75.medium.99b2d65@1x.webp" }, "2x": { "png": "porsche-marque75.medium.1d41ecf@2x.png", "webp": "porsche-marque75.medium.e32580c@2x.webp" }, "3x": { "png": "porsche-marque75.medium.373bcb5@3x.png", "webp": "porsche-marque75.medium.4a003d1@3x.webp" } }, "small": { "1x": { "png": "porsche-marque75.small.f5b37fe@1x.png", "webp": "porsche-marque75.small.146b06c@1x.webp" }, "2x": { "png": "porsche-marque75.small.20d8690@2x.png", "webp": "porsche-marque75.small.025770f@2x.webp" }, "3x": { "png": "porsche-marque75.small.e89b13e@3x.png", "webp": "porsche-marque75.small.a725d2e@3x.webp" } } } };
|
|
3436
3436
|
|
|
3437
3437
|
// index.ts
|
|
3438
|
-
var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
|
|
3438
|
+
var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "gt3-rs": { "src": "gt3-rs.03ac3ee.svg", "width": 238, "height": 25 }, "gt3": { "src": "gt3.bd3186c.svg", "width": 151, "height": 25 }, "gts": { "src": "gts.99bd35e.svg", "width": 121, "height": 25 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
|
|
3439
3439
|
|
|
3440
3440
|
const hasDocument = typeof document !== 'undefined';
|
|
3441
3441
|
|
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/checkbox.wrapper.mjs
CHANGED
|
@@ -5,9 +5,10 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
|
|
|
5
5
|
import { syncRef } from '../../utils.mjs';
|
|
6
6
|
import { DSRCheckbox } from '../dsr-components/checkbox.mjs';
|
|
7
7
|
|
|
8
|
-
const PCheckbox = /*#__PURE__*/ forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onUpdate, required = false, state = 'none', theme, value = 'on', className, children, ...rest }, ref) => {
|
|
8
|
+
const PCheckbox = /*#__PURE__*/ forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onChange, onUpdate, required = false, state = 'none', theme, value = 'on', className, children, ...rest }, ref) => {
|
|
9
9
|
const elementRef = useRef(undefined);
|
|
10
10
|
useEventCallback(elementRef, 'blur', onBlur);
|
|
11
|
+
useEventCallback(elementRef, 'change', onChange);
|
|
11
12
|
useEventCallback(elementRef, 'update', onUpdate);
|
|
12
13
|
const WebComponentTag = usePrefix('p-checkbox');
|
|
13
14
|
const propsToSync = [checked, compact, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme || useTheme(), value];
|
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/pin-code.wrapper.mjs
CHANGED
|
@@ -5,21 +5,21 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
|
|
|
5
5
|
import { syncRef } from '../../utils.mjs';
|
|
6
6
|
import { DSRPinCode } from '../dsr-components/pin-code.mjs';
|
|
7
7
|
|
|
8
|
-
const PPinCode = /*#__PURE__*/ forwardRef(({ description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, children, ...rest }, ref) => {
|
|
8
|
+
const PPinCode = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, children, ...rest }, ref) => {
|
|
9
9
|
const elementRef = useRef(undefined);
|
|
10
10
|
useEventCallback(elementRef, 'update', onUpdate);
|
|
11
11
|
const WebComponentTag = usePrefix('p-pin-code');
|
|
12
|
-
const propsToSync = [description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme || useTheme(), type, value];
|
|
12
|
+
const propsToSync = [compact, description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme || useTheme(), type, value];
|
|
13
13
|
useBrowserLayoutEffect(() => {
|
|
14
14
|
const { current } = elementRef;
|
|
15
|
-
['description', 'disabled', 'form', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
15
|
+
['compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
16
16
|
}, propsToSync);
|
|
17
17
|
const props = {
|
|
18
18
|
...rest,
|
|
19
19
|
// @ts-ignore
|
|
20
20
|
...(!process.browser
|
|
21
21
|
? {
|
|
22
|
-
children: (jsx(DSRPinCode, { description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme: theme || useTheme(), type, value, children })),
|
|
22
|
+
children: (jsx(DSRPinCode, { compact, description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme: theme || useTheme(), type, value, children })),
|
|
23
23
|
}
|
|
24
24
|
: {
|
|
25
25
|
children,
|
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox.mjs
CHANGED
|
@@ -18,6 +18,10 @@ class DSRCheckbox extends Component {
|
|
|
18
18
|
host;
|
|
19
19
|
// The "name" property is reflected as an attribute to ensure compatibility with native form submission.
|
|
20
20
|
// 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.
|
|
21
|
+
/**
|
|
22
|
+
* Emitted when checkbox checked property is changed.
|
|
23
|
+
* @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
|
|
24
|
+
*/
|
|
21
25
|
internals;
|
|
22
26
|
initialLoading = false;
|
|
23
27
|
defaultChecked;
|
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pin-code.mjs
CHANGED
|
@@ -37,7 +37,7 @@ class DSRPinCode extends Component {
|
|
|
37
37
|
// reset array of input elements
|
|
38
38
|
this.inputElements = [];
|
|
39
39
|
const currentInputId = 'current-input';
|
|
40
|
-
const style = minifyCss(getComponentCss$z(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.length, this.props.theme));
|
|
40
|
+
const style = minifyCss(getComponentCss$z(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.length, this.props.compact, this.props.theme));
|
|
41
41
|
return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(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, label: this.props.label, description: this.props.description, htmlFor: currentInputId, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", children: [Array.from(new Array(this.props.length), (_, index) => (jsx("input", { name: this.props.name, form: this.props.form, ...(isCurrentInput(index, this.props.value, this.props.length) && { id: currentInputId }), type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": `${labelId} ${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
|
|
42
42
|
, defaultValue: this.props.value[index] === ' ' ? null : this.props.value[index], disabled: this.props.disabled, required: this.props.required }, index))), this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsx(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 }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
|
|
43
43
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import type { BaseProps } from '../../BaseProps';
|
|
2
|
-
import type { BreakpointCustomizable, CheckboxBlurEventDetail, CheckboxUpdateEventDetail, CheckboxState, Theme } from '../types';
|
|
2
|
+
import type { BreakpointCustomizable, CheckboxBlurEventDetail, CheckboxChangeEventDetail, CheckboxUpdateEventDetail, CheckboxState, Theme } from '../types';
|
|
3
3
|
export type PCheckboxProps = BaseProps & {
|
|
4
4
|
/**
|
|
5
5
|
* Reflects the checkbox current checked state and allows setting the initial checked state.
|
|
6
6
|
*/
|
|
7
7
|
checked?: boolean;
|
|
8
8
|
/**
|
|
9
|
-
* Displays as compact version.
|
|
9
|
+
* Displays as a compact version.
|
|
10
10
|
*/
|
|
11
11
|
compact?: boolean;
|
|
12
12
|
/**
|
|
@@ -18,7 +18,7 @@ export type PCheckboxProps = BaseProps & {
|
|
|
18
18
|
*/
|
|
19
19
|
form?: string;
|
|
20
20
|
/**
|
|
21
|
-
* Show or hide label. For better accessibility it's recommended to show the label.
|
|
21
|
+
* Show or hide label. For better accessibility, it's recommended to show the label.
|
|
22
22
|
*/
|
|
23
23
|
hideLabel?: BreakpointCustomizable<boolean>;
|
|
24
24
|
/**
|
|
@@ -48,6 +48,11 @@ export type PCheckboxProps = BaseProps & {
|
|
|
48
48
|
/**
|
|
49
49
|
* Emitted when checkbox checked property is changed.
|
|
50
50
|
*/
|
|
51
|
+
onChange?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
|
|
52
|
+
/**
|
|
53
|
+
* Emitted when checkbox checked property is changed.
|
|
54
|
+
* @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
|
|
55
|
+
*/
|
|
51
56
|
onUpdate?: (event: CustomEvent<CheckboxUpdateEventDetail>) => void;
|
|
52
57
|
/**
|
|
53
58
|
* Marks the checkbox as required.
|
|
@@ -72,7 +77,7 @@ export declare const PCheckbox: import("react").ForwardRefExoticComponent<import
|
|
|
72
77
|
*/
|
|
73
78
|
checked?: boolean;
|
|
74
79
|
/**
|
|
75
|
-
* Displays as compact version.
|
|
80
|
+
* Displays as a compact version.
|
|
76
81
|
*/
|
|
77
82
|
compact?: boolean;
|
|
78
83
|
/**
|
|
@@ -84,7 +89,7 @@ export declare const PCheckbox: import("react").ForwardRefExoticComponent<import
|
|
|
84
89
|
*/
|
|
85
90
|
form?: string;
|
|
86
91
|
/**
|
|
87
|
-
* Show or hide label. For better accessibility it's recommended to show the label.
|
|
92
|
+
* Show or hide label. For better accessibility, it's recommended to show the label.
|
|
88
93
|
*/
|
|
89
94
|
hideLabel?: BreakpointCustomizable<boolean>;
|
|
90
95
|
/**
|
|
@@ -114,6 +119,11 @@ export declare const PCheckbox: import("react").ForwardRefExoticComponent<import
|
|
|
114
119
|
/**
|
|
115
120
|
* Emitted when checkbox checked property is changed.
|
|
116
121
|
*/
|
|
122
|
+
onChange?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
|
|
123
|
+
/**
|
|
124
|
+
* Emitted when checkbox checked property is changed.
|
|
125
|
+
* @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
|
|
126
|
+
*/
|
|
117
127
|
onUpdate?: (event: CustomEvent<CheckboxUpdateEventDetail>) => void;
|
|
118
128
|
/**
|
|
119
129
|
* Marks the checkbox as required.
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import type { BaseProps } from '../../BaseProps';
|
|
2
2
|
import type { BreakpointCustomizable, PinCodeLength, PinCodeUpdateEventDetail, PinCodeState, Theme, PinCodeType } from '../types';
|
|
3
3
|
export type PPinCodeProps = BaseProps & {
|
|
4
|
+
/**
|
|
5
|
+
* A boolean value that, if present, renders the pin-code as a compact version.
|
|
6
|
+
*/
|
|
7
|
+
compact?: boolean;
|
|
4
8
|
/**
|
|
5
9
|
* The description text.
|
|
6
10
|
*/
|
|
@@ -63,6 +67,10 @@ export type PPinCodeProps = BaseProps & {
|
|
|
63
67
|
value?: string;
|
|
64
68
|
};
|
|
65
69
|
export declare const PPinCode: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
|
|
70
|
+
/**
|
|
71
|
+
* A boolean value that, if present, renders the pin-code as a compact version.
|
|
72
|
+
*/
|
|
73
|
+
compact?: boolean;
|
|
66
74
|
/**
|
|
67
75
|
* The description text.
|
|
68
76
|
*/
|
|
@@ -5,6 +5,10 @@ import { Component } from 'react';
|
|
|
5
5
|
*/
|
|
6
6
|
export declare class DSRCheckbox extends Component<any> {
|
|
7
7
|
host: HTMLElement;
|
|
8
|
+
/**
|
|
9
|
+
* Emitted when checkbox checked property is changed.
|
|
10
|
+
* @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
|
|
11
|
+
*/
|
|
8
12
|
private internals;
|
|
9
13
|
private initialLoading;
|
|
10
14
|
private defaultChecked;
|
package/ssr/esm/lib/types.d.ts
CHANGED
|
@@ -221,8 +221,16 @@ declare const ICON_NAMES: readonly [
|
|
|
221
221
|
"add",
|
|
222
222
|
"adjust",
|
|
223
223
|
"aggregation",
|
|
224
|
+
"ai-3d-object",
|
|
225
|
+
"ai-code",
|
|
226
|
+
"ai-edit",
|
|
227
|
+
"ai-image",
|
|
228
|
+
"ai-scale",
|
|
229
|
+
"ai-sound",
|
|
224
230
|
"ai-spark",
|
|
225
231
|
"ai-spark-filled",
|
|
232
|
+
"ai-text",
|
|
233
|
+
"ai-video",
|
|
226
234
|
"arrow-compact-down",
|
|
227
235
|
"arrow-compact-left",
|
|
228
236
|
"arrow-compact-right",
|
|
@@ -611,6 +619,7 @@ declare const FORM_STATES: readonly [
|
|
|
611
619
|
export type FormState = (typeof FORM_STATES)[number];
|
|
612
620
|
declare const BUTTON_ARIA_ATTRIBUTES: readonly [
|
|
613
621
|
"aria-label",
|
|
622
|
+
"aria-description",
|
|
614
623
|
"aria-expanded",
|
|
615
624
|
"aria-pressed",
|
|
616
625
|
"aria-haspopup"
|
|
@@ -618,6 +627,7 @@ declare const BUTTON_ARIA_ATTRIBUTES: readonly [
|
|
|
618
627
|
export type ButtonAriaAttribute = (typeof BUTTON_ARIA_ATTRIBUTES)[number];
|
|
619
628
|
declare const LINK_ARIA_ATTRIBUTES: readonly [
|
|
620
629
|
"aria-label",
|
|
630
|
+
"aria-description",
|
|
621
631
|
"aria-current",
|
|
622
632
|
"aria-haspopup"
|
|
623
633
|
];
|
|
@@ -936,6 +946,7 @@ export type CheckboxUpdateEventDetail = {
|
|
|
936
946
|
checked: boolean;
|
|
937
947
|
};
|
|
938
948
|
export type CheckboxBlurEventDetail = Event;
|
|
949
|
+
export type CheckboxChangeEventDetail = Event;
|
|
939
950
|
export type CheckboxWrapperState = FormState;
|
|
940
951
|
declare const CONTENT_WRAPPER_BACKGROUND_COLORS: readonly [
|
|
941
952
|
"transparent",
|
|
@@ -1286,6 +1297,9 @@ declare const LINK_TILE_MODEL_SIGNATURE_MODELS: readonly [
|
|
|
1286
1297
|
"boxster",
|
|
1287
1298
|
"cayenne",
|
|
1288
1299
|
"cayman",
|
|
1300
|
+
"gt3-rs",
|
|
1301
|
+
"gt3",
|
|
1302
|
+
"gts",
|
|
1289
1303
|
"macan",
|
|
1290
1304
|
"panamera",
|
|
1291
1305
|
"taycan",
|
|
@@ -1341,6 +1355,21 @@ declare const MODEL_SIGNATURES_MANIFEST: {
|
|
|
1341
1355
|
width: number;
|
|
1342
1356
|
height: number;
|
|
1343
1357
|
};
|
|
1358
|
+
"gt3-rs": {
|
|
1359
|
+
src: string;
|
|
1360
|
+
width: number;
|
|
1361
|
+
height: number;
|
|
1362
|
+
};
|
|
1363
|
+
gt3: {
|
|
1364
|
+
src: string;
|
|
1365
|
+
width: number;
|
|
1366
|
+
height: number;
|
|
1367
|
+
};
|
|
1368
|
+
gts: {
|
|
1369
|
+
src: string;
|
|
1370
|
+
width: number;
|
|
1371
|
+
height: number;
|
|
1372
|
+
};
|
|
1344
1373
|
macan: {
|
|
1345
1374
|
src: string;
|
|
1346
1375
|
width: number;
|