@porsche-design-system/components-react 3.0.0-alpha.0 → 3.0.0-alpha.1
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 +18 -1
- package/bin/patchRemixRunProcessBrowserGlobalIdentifier.js +58 -0
- package/lib/types.d.ts +19 -1
- package/package.json +6 -3
- package/ssr/components/dist/styles/esm/styles-entry.js +85 -110
- package/ssr/components/dist/utils/esm/utils-entry.js +25 -26
- package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.js +1 -1
- package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.js +1 -1
- package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pagination.js +2 -2
- package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper.js +1 -1
- package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal-item.js +1 -1
- package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.js +1 -1
- package/ssr/esm/components/dist/styles/esm/styles-entry.js +85 -110
- package/ssr/esm/components/dist/utils/esm/utils-entry.js +25 -26
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.js +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.js +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pagination.js +2 -2
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper.js +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal-item.js +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.js +1 -1
- package/ssr/lib/types.d.ts +19 -1
package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper.js
CHANGED
|
@@ -71,7 +71,7 @@ class DSRSelectWrapper extends react.Component {
|
|
|
71
71
|
? {}
|
|
72
72
|
: {};
|
|
73
73
|
const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectWrapperCss(disabled, this.props.hideLabel, this.props.state, this.props.theme)));
|
|
74
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsxRuntime.jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsxRuntime.jsx("span", { className: "label__text", ...labelProps, children: this.props.description || jsxRuntime.jsx("slot", { name: "description" }) })), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: disabled ? '
|
|
74
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsxRuntime.jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsxRuntime.jsx("span", { className: "label__text", ...labelProps, children: this.props.description || jsxRuntime.jsx("slot", { name: "description" }) })), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: disabled ? 'disabled' : 'primary', "aria-hidden": "true" }), jsxRuntime.jsx("slot", {})] }), this.props.hasCustomDropdown && (jsxRuntime.jsx(jsxRuntime.Fragment, {}))] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsxRuntime.jsx(stateMessage.StateMessage, { state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
|
|
@@ -66,7 +66,7 @@ class DSRStepperHorizontalItem extends react.Component {
|
|
|
66
66
|
render() {
|
|
67
67
|
splitChildren.splitChildren(this.props.children);
|
|
68
68
|
const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getStepperHorizontalItemCss(this.props.state, this.props.disabled, this.props.theme || 'light')));
|
|
69
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("button", { type: "button", "aria-disabled": !this.props.state || this.props.disabled ? 'true' : null, "aria-current": this.props.state === 'current' ? 'step' : null, children: [utilsEntry.isStateCompleteOrWarning(this.props.state) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: utilsEntry.getStepperHorizontalIconName(this.props.state), size: "inherit", theme: this.props.theme || 'light', color:
|
|
69
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("button", { type: "button", "aria-disabled": !this.props.state || this.props.disabled ? 'true' : null, "aria-current": this.props.state === 'current' ? 'step' : null, children: [utilsEntry.isStateCompleteOrWarning(this.props.state) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: utilsEntry.getStepperHorizontalIconName(this.props.state), size: "inherit", theme: this.props.theme || 'light', color: this.props.disabled ? 'disabled' : `notification-${utilsEntry.getStepperHorizontalIconName(this.props.state)}`, "aria-hidden": "true" })), this.props.state && jsxRuntime.jsxs("span", { className: "sr-only", children: [this.props.state, ": "] }), jsxRuntime.jsx("slot", {})] }) })] }), this.props.children] }));
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
|
package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.js
CHANGED
|
@@ -85,7 +85,7 @@ class DSRTextFieldWrapper extends react.Component {
|
|
|
85
85
|
const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextFieldWrapperCss(disabled, this.props.hideLabel, this.props.state, isCounterVisible, isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.isWithinForm, this.props.theme)));
|
|
86
86
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsxRuntime.jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsxRuntime.jsx("span", { className: "label__text", ...labelProps, children: this.props.description || jsxRuntime.jsx("slot", { name: "description" }) })), (isCounterVisible) && (jsxRuntime.jsx("span", { className: "unit", "aria-hidden": "true", children: this.props.unit })), jsxRuntime.jsx("slot", {}), hasCounter ] }), isPassword ? (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "button", hideLabel: true, icon: this.props.showPassword ? 'view-off' : 'view', disabled: disabled, theme: this.props.theme, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" })) : (isSearch && [
|
|
87
87
|
// TODO: create an own component, which would fix SSR support too
|
|
88
|
-
this.props.isWithinForm ? (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "submit", icon: "search", disabled: disabledOrReadOnly, theme: this.props.theme, hideLabel: true, children: "Search" }, "btn-submit")) : (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "search", color: "
|
|
88
|
+
this.props.isWithinForm ? (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "submit", icon: "search", disabled: disabledOrReadOnly, theme: this.props.theme, hideLabel: true, children: "Search" }, "btn-submit")) : (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "search", color: "disabled", theme: this.props.theme, "aria-hidden": "true" }, "icon")),
|
|
89
89
|
jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "button", icon: "close", hideLabel: true, tabIndex: -1, hidden: !isClearable, theme: this.props.theme, disabled: disabledOrReadOnly, "aria-hidden": "true" }, "btn-clear"),
|
|
90
90
|
hasAction && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "button", icon: "locate", hidden: isClearable, disabled: disabledOrReadOnly, theme: this.props.theme, hideLabel: true, loading: this.props.actionLoading, children: "Locate me" }, "btn-action")),
|
|
91
91
|
])] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsxRuntime.jsx(stateMessage.StateMessage, { state: this.props.state, message: this.props.message, theme: "light", host: null }))] })] }), this.props.children] }));
|
|
@@ -58,15 +58,15 @@ const fontHyphenationStyle = {
|
|
|
58
58
|
|
|
59
59
|
const fontLineHeight = 'calc(6px + 2.125ex)';
|
|
60
60
|
|
|
61
|
-
const fontSizeTextXSmall = '.
|
|
61
|
+
const fontSizeTextXSmall = 'clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)';
|
|
62
62
|
|
|
63
63
|
const fontSizeTextSmall = '1rem';
|
|
64
64
|
|
|
65
|
-
const fontSizeTextMedium = 'clamp(1.
|
|
65
|
+
const fontSizeTextMedium = 'clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem)';
|
|
66
66
|
|
|
67
|
-
const fontSizeTextLarge = 'clamp(1.
|
|
67
|
+
const fontSizeTextLarge = 'clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem)';
|
|
68
68
|
|
|
69
|
-
const fontSizeTextXLarge = 'clamp(1.
|
|
69
|
+
const fontSizeTextXLarge = 'clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem)';
|
|
70
70
|
|
|
71
71
|
const fontSizeText = {
|
|
72
72
|
xSmall: fontSizeTextXSmall,
|
|
@@ -84,13 +84,13 @@ const fontSizeHeadingLarge = fontSizeTextLarge;
|
|
|
84
84
|
|
|
85
85
|
const fontSizeHeadingXLarge = fontSizeTextXLarge;
|
|
86
86
|
|
|
87
|
-
const fontSizeHeadingXXLarge = 'clamp(
|
|
87
|
+
const fontSizeHeadingXXLarge = 'clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem)';
|
|
88
88
|
|
|
89
|
-
const fontSizeHeadingXXXLarge = 'clamp(
|
|
89
|
+
const fontSizeHeadingXXXLarge = 'clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem)';
|
|
90
90
|
|
|
91
|
-
const fontSizeDisplayMedium = 'clamp(2.
|
|
91
|
+
const fontSizeDisplayMedium = 'clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem)';
|
|
92
92
|
|
|
93
|
-
const fontSizeDisplayLarge = 'clamp(2.
|
|
93
|
+
const fontSizeDisplayLarge = 'clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem)';
|
|
94
94
|
|
|
95
95
|
const fontWeightRegular = 400;
|
|
96
96
|
|
|
@@ -144,7 +144,9 @@ function getMediaQueryMin(min) {
|
|
|
144
144
|
return `@media(min-width:${breakpoint[min]})`;
|
|
145
145
|
}
|
|
146
146
|
|
|
147
|
-
const
|
|
147
|
+
const spacingFluidMedium = 'clamp(16px, 1.25vw + 12px, 36px)';
|
|
148
|
+
|
|
149
|
+
const gridGap = spacingFluidMedium;
|
|
148
150
|
|
|
149
151
|
const gridWidthMin = '320px';
|
|
150
152
|
|
|
@@ -179,43 +181,40 @@ const _cssVariableGridBasicSpanOneHalf = '--pds-grid-basic-span-one-half';
|
|
|
179
181
|
const _cssVariableGridBasicSpanOneThird = '--pds-grid-basic-span-one-third';
|
|
180
182
|
const _cssVariableGridBasicSpanTwoThirds = '--pds-grid-basic-span-two-thirds';
|
|
181
183
|
const _cssVariableGridNarrowSpanOneHalf = '--pds-grid-narrow-span-one-half';
|
|
184
|
+
const _cssVariableGridSafeZone = '--pds-internal-grid-safe-zone';
|
|
182
185
|
|
|
183
|
-
const
|
|
184
|
-
const
|
|
185
|
-
const getColumns = (repeat) => `repeat(${repeat},
|
|
186
|
-
const
|
|
186
|
+
const outerColumn = `minmax(0, calc(var(${_cssVariableGridSafeZone}) - ${gridGap}))`;
|
|
187
|
+
const column = 'minmax(0, 1fr)';
|
|
188
|
+
const getColumns = (repeat) => (repeat > 1 ? `repeat(${repeat}, ${column})` : column);
|
|
189
|
+
const getColumnSpan = (span) => `span ${span}`;
|
|
187
190
|
const getGridTemplateColumns = (layout) => layout === 'mobile'
|
|
188
|
-
? `[${gridFullColumnStart}] ${
|
|
189
|
-
: `[${gridFullColumnStart}] ${
|
|
191
|
+
? `[${gridFullColumnStart}] ${outerColumn} [${gridExtendedColumnStart} ${gridBasicColumnStart} ${gridNarrowColumnStart}] ${getColumns(6)} [${gridNarrowColumnEnd} ${gridBasicColumnEnd} ${gridExtendedColumnEnd}] ${outerColumn} [${gridFullColumnEnd}]`
|
|
192
|
+
: `[${gridFullColumnStart}] ${outerColumn} [${gridExtendedColumnStart}] ${getColumns(1)} [${gridBasicColumnStart}] ${getColumns(2)} [${gridNarrowColumnStart}] ${getColumns(8)} [${gridNarrowColumnEnd}] ${getColumns(2)} [${gridBasicColumnEnd}] ${getColumns(1)} [${gridExtendedColumnEnd}] ${outerColumn} [${gridFullColumnEnd}]`;
|
|
190
193
|
({
|
|
191
|
-
[
|
|
192
|
-
[_cssVariableGridExtendedSpanOneHalf]:
|
|
193
|
-
[_cssVariableGridBasicSpanOneHalf]:
|
|
194
|
-
[_cssVariableGridBasicSpanOneThird]:
|
|
195
|
-
[_cssVariableGridBasicSpanTwoThirds]:
|
|
196
|
-
[_cssVariableGridNarrowSpanOneHalf]:
|
|
194
|
+
[_cssVariableGridSafeZone]: gridSafeZoneBase,
|
|
195
|
+
[_cssVariableGridExtendedSpanOneHalf]: getColumnSpan(3),
|
|
196
|
+
[_cssVariableGridBasicSpanOneHalf]: getColumnSpan(3),
|
|
197
|
+
[_cssVariableGridBasicSpanOneThird]: getColumnSpan(2),
|
|
198
|
+
[_cssVariableGridBasicSpanTwoThirds]: getColumnSpan(4),
|
|
199
|
+
[_cssVariableGridNarrowSpanOneHalf]: getColumnSpan(3),
|
|
197
200
|
display: 'grid',
|
|
198
201
|
gridGap,
|
|
199
202
|
gridTemplateColumns: getGridTemplateColumns('mobile'),
|
|
200
203
|
minWidth: gridWidthMin,
|
|
201
204
|
maxWidth: gridWidthMax,
|
|
202
205
|
margin: 0,
|
|
203
|
-
padding: `0
|
|
206
|
+
padding: `0 calc(50% - ${gridWidthMax} / 2)`,
|
|
204
207
|
boxSizing: 'content-box',
|
|
205
208
|
[getMediaQueryMin('s')]: {
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
[
|
|
211
|
-
[_cssVariableGridBasicSpanOneHalf]: `${_gridColumnSpan} 6`,
|
|
212
|
-
[_cssVariableGridBasicSpanOneThird]: `${_gridColumnSpan} 4`,
|
|
213
|
-
[_cssVariableGridBasicSpanTwoThirds]: `${_gridColumnSpan} 8`,
|
|
214
|
-
[_cssVariableGridNarrowSpanOneHalf]: `${_gridColumnSpan} 4`,
|
|
209
|
+
[_cssVariableGridExtendedSpanOneHalf]: getColumnSpan(7),
|
|
210
|
+
[_cssVariableGridBasicSpanOneHalf]: getColumnSpan(6),
|
|
211
|
+
[_cssVariableGridBasicSpanOneThird]: getColumnSpan(4),
|
|
212
|
+
[_cssVariableGridBasicSpanTwoThirds]: getColumnSpan(8),
|
|
213
|
+
[_cssVariableGridNarrowSpanOneHalf]: getColumnSpan(4),
|
|
215
214
|
gridTemplateColumns: getGridTemplateColumns('desktop'),
|
|
216
215
|
},
|
|
217
216
|
[getMediaQueryMin('xxl')]: {
|
|
218
|
-
[
|
|
217
|
+
[_cssVariableGridSafeZone]: gridSafeZoneXXL,
|
|
219
218
|
},
|
|
220
219
|
});
|
|
221
220
|
|
|
@@ -235,6 +234,8 @@ const spacingStaticMedium = '16px';
|
|
|
235
234
|
|
|
236
235
|
const spacingStaticLarge = '32px';
|
|
237
236
|
|
|
237
|
+
const spacingFluidXSmall = 'clamp(4px, 0.25vw + 3px, 8px)';
|
|
238
|
+
|
|
238
239
|
const themeDarkBackgroundShading = 'rgba(1, 2, 5, 0.67)';
|
|
239
240
|
|
|
240
241
|
const _displayFontPartA = `${fontStyleItalic} ${fontVariant} ${fontWeightSemiBold$1} `;
|
|
@@ -3737,7 +3738,7 @@ const themeDark = {
|
|
|
3737
3738
|
hoverColor: 'rgba(126, 127, 130, 0.20)',
|
|
3738
3739
|
hoverColorDarken: '#606163',
|
|
3739
3740
|
activeColor: 'rgba(126, 127, 130, 0.20)',
|
|
3740
|
-
focusColor: '#
|
|
3741
|
+
focusColor: '#1E5BEB',
|
|
3741
3742
|
disabledColor: '#7E7F82',
|
|
3742
3743
|
errorColor: '#CB3333',
|
|
3743
3744
|
errorColorDarken: '#9A2727',
|
|
@@ -6617,7 +6618,6 @@ const sizeMap$3 = {
|
|
|
6617
6618
|
'x-large': fontSizeTextXLarge,
|
|
6618
6619
|
};
|
|
6619
6620
|
// TODO, use Tuple to reduce chunk size
|
|
6620
|
-
// TODO: shall icon component support 'disabled' color too? For e.g. button-pure disabled state?
|
|
6621
6621
|
const filterLightPrimary = 'invert(3%) sepia(7%) saturate(2930%) hue-rotate(188deg) brightness(91%) contrast(103%)';
|
|
6622
6622
|
const filterLightContrastLow = 'invert(93%) sepia(11%) saturate(36%) hue-rotate(201deg) brightness(89%) contrast(102%)';
|
|
6623
6623
|
const filterLightContrastMedium = 'invert(65%) sepia(6%) saturate(119%) hue-rotate(187deg) brightness(90%) contrast(92%)';
|
|
@@ -6639,6 +6639,7 @@ const filter = {
|
|
|
6639
6639
|
primary: filterLightPrimary,
|
|
6640
6640
|
brand: filterLightPrimary,
|
|
6641
6641
|
default: filterLightPrimary,
|
|
6642
|
+
disabled: filterLightContrastMedium,
|
|
6642
6643
|
'contrast-low': filterLightContrastLow,
|
|
6643
6644
|
'neutral-contrast-low': filterLightContrastLow,
|
|
6644
6645
|
'contrast-medium': filterLightContrastMedium,
|
|
@@ -6655,6 +6656,7 @@ const filter = {
|
|
|
6655
6656
|
primary: filterDarkPrimary,
|
|
6656
6657
|
brand: filterDarkPrimary,
|
|
6657
6658
|
default: filterDarkPrimary,
|
|
6659
|
+
disabled: filterDarkContrastMedium,
|
|
6658
6660
|
'contrast-low': filterDarkContrastLow,
|
|
6659
6661
|
'neutral-contrast-low': filterDarkContrastLow,
|
|
6660
6662
|
'contrast-medium': filterDarkContrastMedium,
|
|
@@ -7336,7 +7338,7 @@ const getComponentCss$r = (gradientColorTheme, isNextHidden, isPrevHidden, scrol
|
|
|
7336
7338
|
const ITEM_PADDING = '17px';
|
|
7337
7339
|
const ICON_SIZE = pxToRemWithUnit(24);
|
|
7338
7340
|
const ICON_MARGIN = pxToRemWithUnit(4);
|
|
7339
|
-
const getColors$
|
|
7341
|
+
const getColors$2 = (isDisabled, isSelected, theme) => {
|
|
7340
7342
|
const { primaryColor, contrastMediumColor, disabledColor, contrastLowColor } = getThemedColors(theme);
|
|
7341
7343
|
return {
|
|
7342
7344
|
buttonColor: isDisabled ? disabledColor : primaryColor,
|
|
@@ -7347,7 +7349,7 @@ const getColors$3 = (isDisabled, isSelected, theme) => {
|
|
|
7347
7349
|
};
|
|
7348
7350
|
const getComponentCss$q = (isDisabled, isSelected, hasIcon, theme) => {
|
|
7349
7351
|
const { focusColor } = getThemedColors(theme);
|
|
7350
|
-
const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$
|
|
7352
|
+
const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$2(isDisabled, isSelected, theme);
|
|
7351
7353
|
return getCss({
|
|
7352
7354
|
'@global': {
|
|
7353
7355
|
':host': addImportantToEachRule(Object.assign({ display: 'block', outline: 0 }, hostHiddenStyles)),
|
|
@@ -7524,90 +7526,63 @@ const getComponentCss$m = (size, theme) => {
|
|
|
7524
7526
|
});
|
|
7525
7527
|
};
|
|
7526
7528
|
|
|
7527
|
-
|
|
7528
|
-
//
|
|
7529
|
-
|
|
7530
|
-
const
|
|
7531
|
-
const
|
|
7532
|
-
const
|
|
7533
|
-
|
|
7534
|
-
|
|
7535
|
-
|
|
7536
|
-
|
|
7537
|
-
|
|
7538
|
-
|
|
7539
|
-
|
|
7540
|
-
|
|
7541
|
-
|
|
7542
|
-
|
|
7543
|
-
|
|
7529
|
+
const getSVGPath = (stepCount, numberedCircleColors, isStateCurrent) => {
|
|
7530
|
+
// # of the hexcolor starts a fragment identifier in URLs, so we have to replace it with the escaped value of # = %23
|
|
7531
|
+
numberedCircleColors = Object.entries(numberedCircleColors).reduce((result, [key, value]) => (Object.assign(Object.assign({}, result), { [key]: value.replace(/#/g, '%23') })), {});
|
|
7532
|
+
const { disabledColor, invertedBaseColor, primaryColor } = numberedCircleColors;
|
|
7533
|
+
const fillColor = isStateCurrent ? invertedBaseColor : disabledColor;
|
|
7534
|
+
const svgCirclePath = `<circle fill="${isStateCurrent ? primaryColor : 'none'}"${isStateCurrent ? '' : ` stroke="${fillColor}"`} stroke-width="1px" cx="12" cy="12" r="9"/>`;
|
|
7535
|
+
// Full SVG is provided by design (./numbers_raw.svg), created with illustrator and optimized with ImageOptim.
|
|
7536
|
+
// The optimized file can be found in ./numbers_optim.svg.
|
|
7537
|
+
const svgNumberedCirclePaths = [
|
|
7538
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m12.33 8.67-2.43.91v-.94l2.6-1.03h.85v8.78h-1.02z"/>`,
|
|
7539
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m9.46 15.58c0-1.35.73-2.07 1.7-2.72l.95-.63c.78-.52 1.57-1.05 1.57-2.24 0-1.12-.62-1.58-1.7-1.58s-1.68.48-1.78 1.97h-.96c.06-1.82.78-2.91 2.74-2.91s2.72.92 2.72 2.52-.92 2.23-1.79 2.8l-.95.63c-1.11.75-1.52 1.18-1.52 2.01v.16h4.17v.81h-5.15v-.81z"/>`,
|
|
7540
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m10.1 13.73c.1 1.43.63 2 1.92 2 1.2 0 1.8-.49 1.8-1.68 0-1.08-.51-1.66-1.8-1.66h-.89v-.9h.83c1.12 0 1.66-.56 1.66-1.53 0-1.08-.64-1.55-1.73-1.55s-1.69.49-1.79 1.97h-.97c.1-1.79.84-2.91 2.76-2.91s2.74.92 2.74 2.49c0 .79-.38 1.54-1.16 1.9.84.28 1.36.92 1.36 2.19 0 1.54-.97 2.49-2.81 2.49-1.96 0-2.8-.9-2.88-2.81z"/>`,
|
|
7541
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m8.87 13.6 3.54-5.99h1.43v5.89h1.25v.86h-1.25v2.02h-.99v-2.02h-3.98zm3.98-.1v-4.98l-2.91 4.98z"/>`,
|
|
7542
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m9.34 12.45.42-4.83h4.71v.94h-3.9l-.26 2.95c.38-.43 1-.68 1.79-.68 1.86 0 2.76.9 2.76 2.81 0 2.06-1.03 2.91-2.86 2.91s-2.74-.84-2.81-2.51h.97c.06 1.13.57 1.7 1.84 1.7 1.39 0 1.85-.68 1.85-2.06s-.48-2-1.85-2c-1.07 0-1.54.42-1.75 1.17h-.91v-.39z"/>`,
|
|
7543
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m9.97 11.02 2.22-3.4h1.1l-2.27 3.44c.33-.16.69-.23 1.1-.23 1.84 0 2.76.9 2.76 2.81 0 2.06-1.04 2.91-2.86 2.91s-2.87-.85-2.87-2.91c0-1.08.3-1.8.83-2.61zm2.05 4.71c1.38 0 1.84-.68 1.84-2.05s-.47-2.01-1.84-2.01-1.85.64-1.85 2.01.46 2.05 1.85 2.05z"/>`,
|
|
7544
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m9.21 7.61h5.57v.74l-3.58 8.04h-1.05l3.54-7.84h-4.49v-.94z"/>`,
|
|
7545
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m10.47 11.94c-.65-.33-1.13-.92-1.13-2.01 0-1.53.85-2.47 2.66-2.47s2.66.94 2.66 2.47c0 1.08-.47 1.68-1.15 2.01.92.35 1.34 1.07 1.34 2.11 0 1.73-.99 2.49-2.86 2.49s-2.86-.76-2.86-2.49c0-1.04.41-1.76 1.33-2.11zm1.53 3.78c1.27 0 1.85-.51 1.85-1.69 0-1.1-.58-1.61-1.85-1.61s-1.85.52-1.85 1.61c0 1.18.58 1.69 1.85 1.69zm1.65-5.76c0-1.1-.56-1.56-1.65-1.56s-1.65.47-1.65 1.56c0 1 .46 1.6 1.65 1.6s1.65-.6 1.65-1.6z"/>`,
|
|
7546
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m9.16 10.33c0-2.03 1.02-2.86 2.83-2.86s2.82.81 2.82 2.85c0 1.11-.3 1.82-.81 2.64l-2.18 3.44h-1.1l2.18-3.37c-.31.14-.65.2-1.01.2-1.82 0-2.74-.99-2.74-2.9zm4.65 0c0-1.23-.47-1.92-1.81-1.92s-1.81.69-1.81 1.92c0 1.37.49 2.05 1.81 2.05s1.81-.68 1.81-2.05z"/>`,
|
|
7547
|
+
];
|
|
7548
|
+
return svgNumberedCirclePaths[stepCount];
|
|
7544
7549
|
};
|
|
7545
|
-
// following constants are defined in em to ensure proportional size based on parents font size
|
|
7546
|
-
// TODO: to be sure counter sizing and positioning is in sync with icon, then we need to use a svg instead
|
|
7547
|
-
// TODO: simplify calculation of positioning by using css grid and/or svg
|
|
7548
|
-
const spriteStepSize = 0.625; // 10px / font size in px
|
|
7549
|
-
const spriteWidth = `${9 * spriteStepSize}em`; // 9 steps
|
|
7550
|
-
const spriteHeight = `${spriteStepSize}em`; // height of sprite / font size in px
|
|
7551
|
-
const counterCirclePosition = '0.171875em'; // 2.75px
|
|
7552
|
-
const counterCircleSize = `calc(${fontLineHeight} - ${counterCirclePosition} * 2)`;
|
|
7553
|
-
const counterValuePosition = `calc((${fontLineHeight} - ${spriteStepSize}em) / 2)`;
|
|
7554
|
-
const counterValueSize = spriteHeight;
|
|
7555
7550
|
const getComponentCss$l = (state, disabled, theme) => {
|
|
7556
|
-
const { primaryColor, hoverColor,
|
|
7557
|
-
const
|
|
7551
|
+
const { primaryColor, hoverColor, disabledColor, focusColor } = getThemedColors(theme);
|
|
7552
|
+
const isStateCurrent = state === 'current';
|
|
7553
|
+
const isStateCurrentOrUndefined = !state || isStateCurrent;
|
|
7558
7554
|
const isDisabled = !state || disabled;
|
|
7559
7555
|
return getCss(Object.assign(Object.assign({ '@global': {
|
|
7560
7556
|
':host': Object.assign(Object.assign({}, (isStateCurrentOrUndefined &&
|
|
7561
|
-
Array.from(Array(9)).reduce((result, _, i) => (Object.assign(Object.assign({}, result), { [`&(:nth-of-type(${i + 1})) $button::
|
|
7562
|
-
|
|
7557
|
+
Array.from(Array(9)).reduce((result, _, i) => (Object.assign(Object.assign({}, result), { [`&(:nth-of-type(${i + 1})) $button::before`]: {
|
|
7558
|
+
backgroundImage: getInlineSVGBackgroundImage(getSVGPath(i, {
|
|
7559
|
+
primaryColor,
|
|
7560
|
+
invertedBaseColor: getInvertedThemedColors(theme).primaryColor,
|
|
7561
|
+
disabledColor,
|
|
7562
|
+
}, isStateCurrent)),
|
|
7563
7563
|
} })), {}))), addImportantToEachRule(Object.assign(Object.assign({ fontSize: 'inherit' }, hostHiddenStyles), { '&(:not(:last-of-type))': {
|
|
7564
|
-
|
|
7564
|
+
margin: `0 ${spacingFluidXSmall} 0 0`,
|
|
7565
7565
|
} }))),
|
|
7566
|
-
button: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'relative', color: isDisabled ? disabledColor : primaryColor,
|
|
7567
|
-
|
|
7568
|
-
|
|
7569
|
-
|
|
7570
|
-
|
|
7571
|
-
|
|
7572
|
-
|
|
7573
|
-
|
|
7574
|
-
|
|
7575
|
-
|
|
7576
|
-
|
|
7577
|
-
|
|
7578
|
-
|
|
7579
|
-
|
|
7580
|
-
|
|
7581
|
-
'&::after': {
|
|
7582
|
-
// value of counter element
|
|
7583
|
-
content: '""',
|
|
7584
|
-
position: 'absolute',
|
|
7585
|
-
top: '50%',
|
|
7586
|
-
transform: 'translateY(-50%)',
|
|
7587
|
-
left: counterValuePosition,
|
|
7588
|
-
width: counterValueSize,
|
|
7589
|
-
height: counterValueSize,
|
|
7590
|
-
background: `${getSvg(isDisabled ? disabledColor : invertedBaseColor)} 0 50% / ${spriteWidth} ${spriteHeight} no-repeat`,
|
|
7591
|
-
},
|
|
7592
|
-
}
|
|
7593
|
-
: // other icons via icon component
|
|
7594
|
-
isDisabled
|
|
7595
|
-
? {
|
|
7596
|
-
cursor: 'not-allowed',
|
|
7597
|
-
textDecoration: 'none',
|
|
7598
|
-
}
|
|
7599
|
-
: Object.assign({ cursor: 'pointer', textDecoration: 'underline' }, hoverMediaQuery(Object.assign(Object.assign({}, getHoverJssStyle()), { '&:hover .icon': {
|
|
7600
|
-
color: hoverColor,
|
|
7601
|
-
} }))))),
|
|
7566
|
+
button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', gap: '3px', color: isDisabled ? disabledColor : primaryColor, padding: '4px 10px 4px 6px', background: 0, border: 0, outline: 0 }, textSmallStyle), { fontSize: 'inherit', width: 'max-content', cursor: isDisabled ? 'not-allowed' : 'pointer', borderRadius: borderRadiusSmall }), (isStateCurrent && Object.assign(Object.assign({}, frostedGlassStyle), { background: hoverColor }))), (!isDisabled &&
|
|
7567
|
+
hoverMediaQuery({
|
|
7568
|
+
transition: getTransition('background-color'),
|
|
7569
|
+
'&:hover': Object.assign(Object.assign({}, frostedGlassStyle), { background: hoverColor }),
|
|
7570
|
+
}))), (isStateCurrentOrUndefined && {
|
|
7571
|
+
// counter
|
|
7572
|
+
// Pseudo element is needed to center the counter to the text, as it is not working optimal directly on the button
|
|
7573
|
+
'&::before': {
|
|
7574
|
+
content: '""',
|
|
7575
|
+
height: fontLineHeight,
|
|
7576
|
+
width: fontLineHeight,
|
|
7577
|
+
},
|
|
7578
|
+
})), { '&:focus::after': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(0)), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusSmall }), '&:focus:not(:focus-visible)::after': {
|
|
7579
|
+
borderColor: 'transparent',
|
|
7580
|
+
} }),
|
|
7602
7581
|
} }, (!isStateCurrentOrUndefined && {
|
|
7603
|
-
//
|
|
7582
|
+
// complete / warning icons via icon component
|
|
7604
7583
|
icon: {
|
|
7605
|
-
position: 'absolute',
|
|
7606
|
-
left: 0,
|
|
7607
7584
|
height: fontLineHeight,
|
|
7608
7585
|
width: fontLineHeight,
|
|
7609
|
-
color: isDisabled ? disabledColor : iconColor,
|
|
7610
|
-
transition: getTransition('color'),
|
|
7611
7586
|
},
|
|
7612
7587
|
})), { 'sr-only': getScreenReaderOnlyJssStyle() }));
|
|
7613
7588
|
};
|
|
@@ -7617,7 +7592,7 @@ const getComponentCss$k = (size) => {
|
|
|
7617
7592
|
'@global': {
|
|
7618
7593
|
':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
|
|
7619
7594
|
},
|
|
7620
|
-
scroller: Object.assign(Object.assign({
|
|
7595
|
+
scroller: Object.assign(Object.assign({}, textSmallStyle), buildResponsiveStyles(size, (s) => ({ fontSize: fontSizeText[s] }))),
|
|
7621
7596
|
});
|
|
7622
7597
|
};
|
|
7623
7598
|
|
|
@@ -91,7 +91,7 @@ const fontHyphenationStyle = {
|
|
|
91
91
|
|
|
92
92
|
const fontLineHeight = 'calc(6px + 2.125ex)';
|
|
93
93
|
|
|
94
|
-
const fontSizeTextXSmall = '.
|
|
94
|
+
const fontSizeTextXSmall = 'clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)';
|
|
95
95
|
|
|
96
96
|
const fontSizeTextSmall = '1rem';
|
|
97
97
|
|
|
@@ -129,7 +129,9 @@ function getMediaQueryMin(min) {
|
|
|
129
129
|
return `@media(min-width:${breakpoint[min]})`;
|
|
130
130
|
}
|
|
131
131
|
|
|
132
|
-
const
|
|
132
|
+
const spacingFluidMedium = 'clamp(16px, 1.25vw + 12px, 36px)';
|
|
133
|
+
|
|
134
|
+
const gridGap = spacingFluidMedium;
|
|
133
135
|
|
|
134
136
|
const gridWidthMin = '320px';
|
|
135
137
|
|
|
@@ -164,43 +166,40 @@ const _cssVariableGridBasicSpanOneHalf = '--pds-grid-basic-span-one-half';
|
|
|
164
166
|
const _cssVariableGridBasicSpanOneThird = '--pds-grid-basic-span-one-third';
|
|
165
167
|
const _cssVariableGridBasicSpanTwoThirds = '--pds-grid-basic-span-two-thirds';
|
|
166
168
|
const _cssVariableGridNarrowSpanOneHalf = '--pds-grid-narrow-span-one-half';
|
|
169
|
+
const _cssVariableGridSafeZone = '--pds-internal-grid-safe-zone';
|
|
167
170
|
|
|
168
|
-
const
|
|
169
|
-
const
|
|
170
|
-
const getColumns = (repeat) => `repeat(${repeat},
|
|
171
|
-
const
|
|
171
|
+
const outerColumn = `minmax(0, calc(var(${_cssVariableGridSafeZone}) - ${gridGap}))`;
|
|
172
|
+
const column = 'minmax(0, 1fr)';
|
|
173
|
+
const getColumns = (repeat) => (repeat > 1 ? `repeat(${repeat}, ${column})` : column);
|
|
174
|
+
const getColumnSpan = (span) => `span ${span}`;
|
|
172
175
|
const getGridTemplateColumns = (layout) => layout === 'mobile'
|
|
173
|
-
? `[${gridFullColumnStart}] ${
|
|
174
|
-
: `[${gridFullColumnStart}] ${
|
|
176
|
+
? `[${gridFullColumnStart}] ${outerColumn} [${gridExtendedColumnStart} ${gridBasicColumnStart} ${gridNarrowColumnStart}] ${getColumns(6)} [${gridNarrowColumnEnd} ${gridBasicColumnEnd} ${gridExtendedColumnEnd}] ${outerColumn} [${gridFullColumnEnd}]`
|
|
177
|
+
: `[${gridFullColumnStart}] ${outerColumn} [${gridExtendedColumnStart}] ${getColumns(1)} [${gridBasicColumnStart}] ${getColumns(2)} [${gridNarrowColumnStart}] ${getColumns(8)} [${gridNarrowColumnEnd}] ${getColumns(2)} [${gridBasicColumnEnd}] ${getColumns(1)} [${gridExtendedColumnEnd}] ${outerColumn} [${gridFullColumnEnd}]`;
|
|
175
178
|
({
|
|
176
|
-
[
|
|
177
|
-
[_cssVariableGridExtendedSpanOneHalf]:
|
|
178
|
-
[_cssVariableGridBasicSpanOneHalf]:
|
|
179
|
-
[_cssVariableGridBasicSpanOneThird]:
|
|
180
|
-
[_cssVariableGridBasicSpanTwoThirds]:
|
|
181
|
-
[_cssVariableGridNarrowSpanOneHalf]:
|
|
179
|
+
[_cssVariableGridSafeZone]: gridSafeZoneBase,
|
|
180
|
+
[_cssVariableGridExtendedSpanOneHalf]: getColumnSpan(3),
|
|
181
|
+
[_cssVariableGridBasicSpanOneHalf]: getColumnSpan(3),
|
|
182
|
+
[_cssVariableGridBasicSpanOneThird]: getColumnSpan(2),
|
|
183
|
+
[_cssVariableGridBasicSpanTwoThirds]: getColumnSpan(4),
|
|
184
|
+
[_cssVariableGridNarrowSpanOneHalf]: getColumnSpan(3),
|
|
182
185
|
display: 'grid',
|
|
183
186
|
gridGap,
|
|
184
187
|
gridTemplateColumns: getGridTemplateColumns('mobile'),
|
|
185
188
|
minWidth: gridWidthMin,
|
|
186
189
|
maxWidth: gridWidthMax,
|
|
187
190
|
margin: 0,
|
|
188
|
-
padding: `0
|
|
191
|
+
padding: `0 calc(50% - ${gridWidthMax} / 2)`,
|
|
189
192
|
boxSizing: 'content-box',
|
|
190
193
|
[getMediaQueryMin('s')]: {
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
[
|
|
196
|
-
[_cssVariableGridBasicSpanOneHalf]: `${_gridColumnSpan} 6`,
|
|
197
|
-
[_cssVariableGridBasicSpanOneThird]: `${_gridColumnSpan} 4`,
|
|
198
|
-
[_cssVariableGridBasicSpanTwoThirds]: `${_gridColumnSpan} 8`,
|
|
199
|
-
[_cssVariableGridNarrowSpanOneHalf]: `${_gridColumnSpan} 4`,
|
|
194
|
+
[_cssVariableGridExtendedSpanOneHalf]: getColumnSpan(7),
|
|
195
|
+
[_cssVariableGridBasicSpanOneHalf]: getColumnSpan(6),
|
|
196
|
+
[_cssVariableGridBasicSpanOneThird]: getColumnSpan(4),
|
|
197
|
+
[_cssVariableGridBasicSpanTwoThirds]: getColumnSpan(8),
|
|
198
|
+
[_cssVariableGridNarrowSpanOneHalf]: getColumnSpan(4),
|
|
200
199
|
gridTemplateColumns: getGridTemplateColumns('desktop'),
|
|
201
200
|
},
|
|
202
201
|
[getMediaQueryMin('xxl')]: {
|
|
203
|
-
[
|
|
202
|
+
[_cssVariableGridSafeZone]: gridSafeZoneXXL,
|
|
204
203
|
},
|
|
205
204
|
});
|
|
206
205
|
|
|
@@ -3677,7 +3676,7 @@ const themeDark = {
|
|
|
3677
3676
|
hoverColor: 'rgba(126, 127, 130, 0.20)',
|
|
3678
3677
|
hoverColorDarken: '#606163',
|
|
3679
3678
|
activeColor: 'rgba(126, 127, 130, 0.20)',
|
|
3680
|
-
focusColor: '#
|
|
3679
|
+
focusColor: '#1E5BEB',
|
|
3681
3680
|
disabledColor: '#7E7F82',
|
|
3682
3681
|
errorColor: '#CB3333',
|
|
3683
3682
|
errorColorDarken: '#9A2727',
|
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.js
CHANGED
|
@@ -74,7 +74,7 @@ class DSRButtonPure extends Component {
|
|
|
74
74
|
theme: this.props.theme,
|
|
75
75
|
};
|
|
76
76
|
const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$P(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.theme)));
|
|
77
|
-
return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { ...getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading ? (jsx(PSpinner, { aria: { 'aria-label': 'Loading state' }, ...iconProps })) : (hasIcon && (jsx(PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? '
|
|
77
|
+
return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { ...getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading ? (jsx(PSpinner, { aria: { 'aria-label': 'Loading state' }, ...iconProps })) : (hasIcon && (jsx(PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? 'disabled' : 'primary', theme: this.props.theme, "aria-hidden": "true" }))), jsx("span", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
|
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.js
CHANGED
|
@@ -64,7 +64,7 @@ class DSRButton extends Component {
|
|
|
64
64
|
render() {
|
|
65
65
|
splitChildren(this.props.children);
|
|
66
66
|
const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$O(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.theme)));
|
|
67
|
-
return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { ...getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: getLinkButtonThemeForIcon(this.props.variant, this.props.theme), aria: { 'aria-label': 'Loading state:' } })), hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsx(PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: isDisabledOrLoading(this.props.disabled, this.props.loading) ? '
|
|
67
|
+
return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { ...getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: getLinkButtonThemeForIcon(this.props.variant, this.props.theme), aria: { 'aria-label': 'Loading state:' } })), hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsx(PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: isDisabledOrLoading(this.props.disabled, this.props.loading) ? 'disabled' : 'primary', theme: getLinkButtonThemeForIcon(this.props.variant, this.props.theme), "aria-hidden": "true" })), jsx("span", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
|
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pagination.js
CHANGED
|
@@ -75,13 +75,13 @@ class DSRPagination extends Component {
|
|
|
75
75
|
};
|
|
76
76
|
switch (type) {
|
|
77
77
|
case itemTypes.PREVIOUS_PAGE_LINK:
|
|
78
|
-
return (jsx("li", { children: jsx("span", { ...spanProps, tabIndex: isActive ? 0 : null, "aria-disabled": !isActive ? 'true' : null, "aria-label": this.props.allyLabelPrev, children: jsx(PIcon, { name: "arrow-left", theme: this.props.theme, color: isActive ? 'default' : '
|
|
78
|
+
return (jsx("li", { children: jsx("span", { ...spanProps, tabIndex: isActive ? 0 : null, "aria-disabled": !isActive ? 'true' : null, "aria-label": this.props.allyLabelPrev, children: jsx(PIcon, { name: "arrow-left", theme: this.props.theme, color: isActive ? 'default' : 'disabled', "aria-hidden": "true" }) }) }, "prev"));
|
|
79
79
|
case itemTypes.ELLIPSIS:
|
|
80
80
|
return (jsx("li", { children: jsx("span", { className: "ellipsis" }) }, "ellipsis"));
|
|
81
81
|
case itemTypes.PAGE:
|
|
82
82
|
return (jsx("li", { children: jsx("span", { ...spanProps, tabIndex: 0, "aria-label": `${this.props.allyLabelPage} ${value}`, "aria-current": isActive ? 'page' : null, children: value }) }, value));
|
|
83
83
|
case itemTypes.NEXT_PAGE_LINK:
|
|
84
|
-
return (jsx("li", { children: jsx("span", { ...spanProps, tabIndex: isActive ? 0 : null, "aria-disabled": !isActive ? 'true' : null, "aria-label": this.props.allyLabelNext, children: jsx(PIcon, { name: "arrow-right", theme: this.props.theme, color: isActive ? 'default' : '
|
|
84
|
+
return (jsx("li", { children: jsx("span", { ...spanProps, tabIndex: isActive ? 0 : null, "aria-disabled": !isActive ? 'true' : null, "aria-label": this.props.allyLabelNext, children: jsx(PIcon, { name: "arrow-right", theme: this.props.theme, color: isActive ? 'default' : 'disabled', "aria-hidden": "true" }) }) }, "next"));
|
|
85
85
|
}
|
|
86
86
|
}) }) })] }) }));
|
|
87
87
|
}
|
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper.js
CHANGED
|
@@ -69,7 +69,7 @@ class DSRSelectWrapper extends Component {
|
|
|
69
69
|
? {}
|
|
70
70
|
: {};
|
|
71
71
|
const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$o(disabled, this.props.hideLabel, this.props.state, this.props.theme)));
|
|
72
|
-
return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "root", children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: disabled ? '
|
|
72
|
+
return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "root", children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: disabled ? 'disabled' : 'primary', "aria-hidden": "true" }), jsx("slot", {})] }), this.props.hasCustomDropdown && (jsx(Fragment, {}))] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
|
|
@@ -64,7 +64,7 @@ class DSRStepperHorizontalItem extends Component {
|
|
|
64
64
|
render() {
|
|
65
65
|
splitChildren(this.props.children);
|
|
66
66
|
const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$l(this.props.state, this.props.disabled, this.props.theme || 'light')));
|
|
67
|
-
return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("button", { type: "button", "aria-disabled": !this.props.state || this.props.disabled ? 'true' : null, "aria-current": this.props.state === 'current' ? 'step' : null, children: [isStateCompleteOrWarning(this.props.state) && (jsx(PIcon, { className: "icon", name: getStepperHorizontalIconName(this.props.state), size: "inherit", theme: this.props.theme || 'light', color:
|
|
67
|
+
return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("button", { type: "button", "aria-disabled": !this.props.state || this.props.disabled ? 'true' : null, "aria-current": this.props.state === 'current' ? 'step' : null, children: [isStateCompleteOrWarning(this.props.state) && (jsx(PIcon, { className: "icon", name: getStepperHorizontalIconName(this.props.state), size: "inherit", theme: this.props.theme || 'light', color: this.props.disabled ? 'disabled' : `notification-${getStepperHorizontalIconName(this.props.state)}`, "aria-hidden": "true" })), this.props.state && jsxs("span", { className: "sr-only", children: [this.props.state, ": "] }), jsx("slot", {})] }) })] }), this.props.children] }));
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
|
|
@@ -83,7 +83,7 @@ class DSRTextFieldWrapper extends Component {
|
|
|
83
83
|
const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$6(disabled, this.props.hideLabel, this.props.state, isCounterVisible, isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.isWithinForm, this.props.theme)));
|
|
84
84
|
return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "root", children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), (isCounterVisible) && (jsx("span", { className: "unit", "aria-hidden": "true", children: this.props.unit })), jsx("slot", {}), hasCounter ] }), isPassword ? (jsx(PButtonPure, { className: "button", type: "button", hideLabel: true, icon: this.props.showPassword ? 'view-off' : 'view', disabled: disabled, theme: this.props.theme, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" })) : (isSearch && [
|
|
85
85
|
// TODO: create an own component, which would fix SSR support too
|
|
86
|
-
this.props.isWithinForm ? (jsx(PButtonPure, { className: "button", type: "submit", icon: "search", disabled: disabledOrReadOnly, theme: this.props.theme, hideLabel: true, children: "Search" }, "btn-submit")) : (jsx(PIcon, { className: "icon", name: "search", color: "
|
|
86
|
+
this.props.isWithinForm ? (jsx(PButtonPure, { className: "button", type: "submit", icon: "search", disabled: disabledOrReadOnly, theme: this.props.theme, hideLabel: true, children: "Search" }, "btn-submit")) : (jsx(PIcon, { className: "icon", name: "search", color: "disabled", theme: this.props.theme, "aria-hidden": "true" }, "icon")),
|
|
87
87
|
jsx(PButtonPure, { className: "button", type: "button", icon: "close", hideLabel: true, tabIndex: -1, hidden: !isClearable, theme: this.props.theme, disabled: disabledOrReadOnly, "aria-hidden": "true" }, "btn-clear"),
|
|
88
88
|
hasAction && (jsx(PButtonPure, { className: "button", type: "button", icon: "locate", hidden: isClearable, disabled: disabledOrReadOnly, theme: this.props.theme, hideLabel: true, loading: this.props.actionLoading, children: "Locate me" }, "btn-action")),
|
|
89
89
|
])] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: "light", host: null }))] })] }), this.props.children] }));
|
package/ssr/lib/types.d.ts
CHANGED
|
@@ -757,7 +757,25 @@ declare const ICON_ARIA_ATTRIBUTES: readonly [
|
|
|
757
757
|
];
|
|
758
758
|
export declare type IconAriaAttribute = typeof ICON_ARIA_ATTRIBUTES[number];
|
|
759
759
|
export declare type IconSize = TextSize;
|
|
760
|
-
|
|
760
|
+
declare const ICON_COLORS: readonly [
|
|
761
|
+
"primary",
|
|
762
|
+
"brand",
|
|
763
|
+
"default",
|
|
764
|
+
"contrast-low",
|
|
765
|
+
"neutral-contrast-low",
|
|
766
|
+
"contrast-medium",
|
|
767
|
+
"neutral-contrast-medium",
|
|
768
|
+
"contrast-high",
|
|
769
|
+
"neutral-contrast-high",
|
|
770
|
+
"notification-success",
|
|
771
|
+
"notification-warning",
|
|
772
|
+
"notification-error",
|
|
773
|
+
"notification-info",
|
|
774
|
+
"notification-neutral",
|
|
775
|
+
"inherit",
|
|
776
|
+
"disabled"
|
|
777
|
+
];
|
|
778
|
+
export declare type IconColor = typeof ICON_COLORS[number];
|
|
761
779
|
declare const INLINE_NOTIFICATION_STATES: readonly [
|
|
762
780
|
"error",
|
|
763
781
|
"warning",
|