pds-dev-kit-web 2.1.7 → 2.1.9
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/dist/index.d.ts +2 -2
- package/dist/src/common/assets/icons/fill/Accordion.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Accordion.js +30 -0
- package/dist/src/common/assets/icons/fill/AlignBottom.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/AlignBottom.js +30 -0
- package/dist/src/common/assets/icons/fill/AlignCenter.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/AlignCenter.js +30 -0
- package/dist/src/common/assets/icons/fill/AlignLeft.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/AlignLeft.js +30 -0
- package/dist/src/common/assets/icons/fill/AlignMiddle.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/AlignMiddle.js +30 -0
- package/dist/src/common/assets/icons/fill/AlignRight.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/AlignRight.js +30 -0
- package/dist/src/common/assets/icons/fill/AlignTop.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/AlignTop.js +30 -0
- package/dist/src/common/assets/icons/fill/Button.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Button.js +30 -0
- package/dist/src/common/assets/icons/fill/Carousel.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Carousel.js +30 -0
- package/dist/src/common/assets/icons/fill/Copy.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Copy.js +30 -0
- package/dist/src/common/assets/icons/fill/DeviceApp.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/DeviceApp.js +30 -0
- package/dist/src/common/assets/icons/fill/DeviceDesktop.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/DeviceDesktop.js +30 -0
- package/dist/src/common/assets/icons/fill/DeviceMobile.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/DeviceMobile.js +30 -0
- package/dist/src/common/assets/icons/fill/Divider.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Divider.js +30 -0
- package/dist/src/common/assets/icons/fill/Download.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Download.js +30 -0
- package/dist/src/common/assets/icons/fill/EditorLeftSide.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/EditorLeftSide.js +30 -0
- package/dist/src/common/assets/icons/fill/EditorRightSide.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/EditorRightSide.js +30 -0
- package/dist/src/common/assets/icons/fill/Image.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Image.js +30 -0
- package/dist/src/common/assets/icons/fill/Item.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Item.js +30 -0
- package/dist/src/common/assets/icons/fill/LayerBackward.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/LayerBackward.js +30 -0
- package/dist/src/common/assets/icons/fill/LayerForward.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/LayerForward.js +30 -0
- package/dist/src/common/assets/icons/fill/Layout.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Layout.js +30 -0
- package/dist/src/common/assets/icons/fill/Lightning.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Lightning.js +30 -0
- package/dist/src/common/assets/icons/fill/Links.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Links.js +30 -0
- package/dist/src/common/assets/icons/fill/LogoInsta.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/LogoInsta.js +30 -0
- package/dist/src/common/assets/icons/fill/LogoTwitter.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/LogoTwitter.js +30 -0
- package/dist/src/common/assets/icons/fill/LogoYt.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/LogoYt.js +30 -0
- package/dist/src/common/assets/icons/fill/Moon.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Moon.js +30 -0
- package/dist/src/common/assets/icons/fill/Paint.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Paint.js +30 -0
- package/dist/src/common/assets/icons/fill/Palette.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Palette.js +30 -0
- package/dist/src/common/assets/icons/fill/PlusRound.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/PlusRound.js +30 -0
- package/dist/src/common/assets/icons/fill/Richtext.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Richtext.js +30 -0
- package/dist/src/common/assets/icons/fill/Setting.js +1 -1
- package/dist/src/common/assets/icons/fill/Shape.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Shape.js +30 -0
- package/dist/src/common/assets/icons/fill/Text.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Text.js +30 -0
- package/dist/src/common/assets/icons/fill/Trashcan.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Trashcan.js +30 -0
- package/dist/src/common/assets/icons/fill/Unavailable.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Unavailable.js +30 -0
- package/dist/src/common/assets/icons/fill/Upload.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Upload.js +30 -0
- package/dist/src/common/assets/icons/fill/index.d.ts +37 -0
- package/dist/src/common/assets/icons/fill/index.js +74 -0
- package/dist/src/common/assets/icons/line/Accordion.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Accordion.js +30 -0
- package/dist/src/common/assets/icons/line/AlignBottom.d.ts +4 -0
- package/dist/src/common/assets/icons/line/AlignBottom.js +30 -0
- package/dist/src/common/assets/icons/line/AlignCenter.d.ts +4 -0
- package/dist/src/common/assets/icons/line/AlignCenter.js +30 -0
- package/dist/src/common/assets/icons/line/AlignLeft.d.ts +4 -0
- package/dist/src/common/assets/icons/line/AlignLeft.js +30 -0
- package/dist/src/common/assets/icons/line/AlignMiddle.d.ts +4 -0
- package/dist/src/common/assets/icons/line/AlignMiddle.js +30 -0
- package/dist/src/common/assets/icons/line/AlignRight.d.ts +4 -0
- package/dist/src/common/assets/icons/line/AlignRight.js +30 -0
- package/dist/src/common/assets/icons/line/AlignTop.d.ts +4 -0
- package/dist/src/common/assets/icons/line/AlignTop.js +30 -0
- package/dist/src/common/assets/icons/line/Button.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Button.js +30 -0
- package/dist/src/common/assets/icons/line/Carousel.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Carousel.js +30 -0
- package/dist/src/common/assets/icons/line/ChannelSetting.js +1 -1
- package/dist/src/common/assets/icons/line/Copy.js +1 -1
- package/dist/src/common/assets/icons/line/DeviceDesktop.js +1 -1
- package/dist/src/common/assets/icons/line/DeviceMobile.js +1 -1
- package/dist/src/common/assets/icons/line/Divider.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Divider.js +30 -0
- package/dist/src/common/assets/icons/line/Download.js +1 -1
- package/dist/src/common/assets/icons/line/EditorLeftSide.js +1 -1
- package/dist/src/common/assets/icons/line/EditorRightSide.js +1 -1
- package/dist/src/common/assets/icons/line/Image.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Image.js +30 -0
- package/dist/src/common/assets/icons/line/Item.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Item.js +30 -0
- package/dist/src/common/assets/icons/line/LayerBackward.d.ts +4 -0
- package/dist/src/common/assets/icons/line/LayerBackward.js +30 -0
- package/dist/src/common/assets/icons/line/LayerForward.d.ts +4 -0
- package/dist/src/common/assets/icons/line/LayerForward.js +30 -0
- package/dist/src/common/assets/icons/line/Layout.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Layout.js +30 -0
- package/dist/src/common/assets/icons/line/Lightning.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Lightning.js +30 -0
- package/dist/src/common/assets/icons/line/Minus.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Minus.js +30 -0
- package/dist/src/common/assets/icons/line/MinusCircle.js +1 -1
- package/dist/src/common/assets/icons/line/MinusRound.d.ts +4 -0
- package/dist/src/common/assets/icons/line/MinusRound.js +30 -0
- package/dist/src/common/assets/icons/line/Moon.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Moon.js +30 -0
- package/dist/src/common/assets/icons/line/Paint.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Paint.js +30 -0
- package/dist/src/common/assets/icons/line/Palette.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Palette.js +30 -0
- package/dist/src/common/assets/icons/line/PaymentSetting.js +1 -1
- package/dist/src/common/assets/icons/line/PlusRound.d.ts +4 -0
- package/dist/src/common/assets/icons/line/PlusRound.js +30 -0
- package/dist/src/common/assets/icons/line/PostStorage.d.ts +4 -0
- package/dist/src/common/assets/icons/line/PostStorage.js +30 -0
- package/dist/src/common/assets/icons/line/Richtext.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Richtext.js +30 -0
- package/dist/src/common/assets/icons/line/SectionCustom32.d.ts +4 -0
- package/dist/src/common/assets/icons/line/SectionCustom32.js +30 -0
- package/dist/src/common/assets/icons/line/SectionCustom40.d.ts +4 -0
- package/dist/src/common/assets/icons/line/SectionCustom40.js +30 -0
- package/dist/src/common/assets/icons/line/Setting.js +1 -1
- package/dist/src/common/assets/icons/line/Shape.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Shape.js +30 -0
- package/dist/src/common/assets/icons/line/Target.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Target.js +30 -0
- package/dist/src/common/assets/icons/line/Text.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Text.js +30 -0
- package/dist/src/common/assets/icons/line/Trashcan.js +1 -1
- package/dist/src/common/assets/icons/line/Upload.js +1 -1
- package/dist/src/common/assets/icons/line/index.d.ts +29 -0
- package/dist/src/common/assets/icons/line/index.js +58 -0
- package/dist/src/common/index.d.ts +1 -1
- package/dist/src/common/types/components.d.ts +11 -0
- package/dist/src/desktop/components/BasicButtonGroup/BasicButtonGroup.js +47 -4
- package/dist/src/desktop/components/BasicButtonGroup/constants.d.ts +11 -0
- package/dist/src/desktop/components/BasicButtonGroup/constants.js +15 -0
- package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js +1 -1
- package/dist/src/desktop/components/Dropdown/Dropdown.d.ts +2 -1
- package/dist/src/desktop/components/Dropdown/Dropdown.js +4 -4
- package/dist/src/desktop/components/IconButton/IconButton.js +1 -1
- package/dist/src/desktop/components/SegmentedButtonGroup/SegmentedButtonGroup.d.ts +3 -9
- package/dist/src/desktop/components/SegmentedButtonGroup/SegmentedButtonGroup.js +81 -38
- package/dist/src/desktop/components/SegmentedButtonGroup/constants.d.ts +11 -0
- package/dist/src/desktop/components/SegmentedButtonGroup/constants.js +15 -0
- package/dist/src/desktop/components/TextField/TextField.d.ts +2 -1
- package/dist/src/desktop/components/TextField/TextField.js +7 -7
- package/dist/src/desktop/components/TextLabel/TextLabel.d.ts +15 -15
- package/dist/src/desktop/components/TextLabel/TextLabel.js +50 -28
- package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js +1 -1
- package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js +1 -1
- package/dist/src/mobile/components/Dropdown/Dropdown.d.ts +2 -1
- package/dist/src/mobile/components/Dropdown/Dropdown.js +4 -4
- package/dist/src/mobile/components/SegmentedButtonGroup/SegmentedButtonGroup.d.ts +3 -9
- package/dist/src/mobile/components/SegmentedButtonGroup/SegmentedButtonGroup.js +36 -36
- package/dist/src/mobile/components/TextField/TextField.d.ts +2 -1
- package/dist/src/mobile/components/TextField/TextField.js +7 -7
- package/dist/src/mobile/components/TextLabel/TextLabel.d.ts +14 -14
- package/dist/src/mobile/components/TextLabel/TextLabel.js +45 -23
- package/package.json +1 -1
- package/release-note.md +8 -17
|
@@ -206,7 +206,17 @@ var form1Regular = (0, styled_components_1.css)(templateObject_16 || (templateOb
|
|
|
206
206
|
var theme = _a.theme;
|
|
207
207
|
return theme.desktopLineHeight.form1;
|
|
208
208
|
});
|
|
209
|
-
var
|
|
209
|
+
var form1Bold = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
210
|
+
var theme = _a.theme;
|
|
211
|
+
return theme.desktopFontSize.form1;
|
|
212
|
+
}, function (_a) {
|
|
213
|
+
var theme = _a.theme;
|
|
214
|
+
return theme.fontWeight.bold;
|
|
215
|
+
}, function (_a) {
|
|
216
|
+
var theme = _a.theme;
|
|
217
|
+
return theme.desktopLineHeight.form1;
|
|
218
|
+
});
|
|
219
|
+
var form2Regular = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
210
220
|
var theme = _a.theme;
|
|
211
221
|
return theme.desktopFontSize.form2;
|
|
212
222
|
}, function (_a) {
|
|
@@ -216,7 +226,17 @@ var form2Regular = (0, styled_components_1.css)(templateObject_17 || (templateOb
|
|
|
216
226
|
var theme = _a.theme;
|
|
217
227
|
return theme.desktopLineHeight.form2;
|
|
218
228
|
});
|
|
219
|
-
var
|
|
229
|
+
var form2Bold = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
230
|
+
var theme = _a.theme;
|
|
231
|
+
return theme.desktopFontSize.form2;
|
|
232
|
+
}, function (_a) {
|
|
233
|
+
var theme = _a.theme;
|
|
234
|
+
return theme.fontWeight.bold;
|
|
235
|
+
}, function (_a) {
|
|
236
|
+
var theme = _a.theme;
|
|
237
|
+
return theme.desktopLineHeight.form2;
|
|
238
|
+
});
|
|
239
|
+
var blog1Regular = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
220
240
|
var theme = _a.theme;
|
|
221
241
|
return theme.desktopFontSize.blog1;
|
|
222
242
|
}, function (_a) {
|
|
@@ -226,76 +246,76 @@ var blog1Regular = (0, styled_components_1.css)(templateObject_18 || (templateOb
|
|
|
226
246
|
var theme = _a.theme;
|
|
227
247
|
return theme.desktopLineHeight.blog1;
|
|
228
248
|
});
|
|
229
|
-
var sysTextPrimary = (0, styled_components_1.css)(
|
|
249
|
+
var sysTextPrimary = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
230
250
|
var theme = _a.theme;
|
|
231
251
|
return theme.ui_cpnt_textlabel_sys_primary;
|
|
232
252
|
});
|
|
233
|
-
var sysTextSecondary = (0, styled_components_1.css)(
|
|
253
|
+
var sysTextSecondary = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
234
254
|
var theme = _a.theme;
|
|
235
255
|
return theme.ui_cpnt_textlabel_sys_secondary;
|
|
236
256
|
});
|
|
237
|
-
var sysTextTertiary = (0, styled_components_1.css)(
|
|
257
|
+
var sysTextTertiary = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
238
258
|
var theme = _a.theme;
|
|
239
259
|
return theme.ui_cpnt_textlabel_sys_tertiary;
|
|
240
260
|
});
|
|
241
|
-
var sysTextWhite = (0, styled_components_1.css)(
|
|
261
|
+
var sysTextWhite = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
242
262
|
var theme = _a.theme;
|
|
243
263
|
return theme.ui_cpnt_textlabel_sys_white;
|
|
244
264
|
});
|
|
245
|
-
var sysTextBlack = (0, styled_components_1.css)(
|
|
265
|
+
var sysTextBlack = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
246
266
|
var theme = _a.theme;
|
|
247
267
|
return theme.ui_cpnt_textlabel_sys_black;
|
|
248
268
|
});
|
|
249
|
-
var sysTextError = (0, styled_components_1.css)(
|
|
269
|
+
var sysTextError = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
250
270
|
var theme = _a.theme;
|
|
251
271
|
return theme.ui_cpnt_textlabel_sys_error;
|
|
252
272
|
});
|
|
253
|
-
var sysTextWarning = (0, styled_components_1.css)(
|
|
273
|
+
var sysTextWarning = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
254
274
|
var theme = _a.theme;
|
|
255
275
|
return theme.ui_cpnt_textlabel_sys_warning;
|
|
256
276
|
});
|
|
257
|
-
var sysTextBrandPrimary = (0, styled_components_1.css)(
|
|
277
|
+
var sysTextBrandPrimary = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
258
278
|
var theme = _a.theme;
|
|
259
279
|
return theme.ui_cpnt_textlabel_sys_brandprimary;
|
|
260
280
|
});
|
|
261
|
-
var sysTextBrandSeconVariant = (0, styled_components_1.css)(
|
|
281
|
+
var sysTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
262
282
|
var theme = _a.theme;
|
|
263
283
|
return theme.ui_cpnt_textlabel_sys_brandseconvariant;
|
|
264
284
|
});
|
|
265
|
-
var usrTextBrandPrimary = (0, styled_components_1.css)(
|
|
285
|
+
var usrTextBrandPrimary = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
266
286
|
var theme = _a.theme;
|
|
267
287
|
return theme.ui_cpnt_textlabel_usr_brandprimary;
|
|
268
288
|
});
|
|
269
|
-
var usrTextBrandSeconVariant = (0, styled_components_1.css)(
|
|
289
|
+
var usrTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
270
290
|
var theme = _a.theme;
|
|
271
291
|
return theme.ui_cpnt_textlabel_usr_brandseconvariant;
|
|
272
292
|
});
|
|
273
|
-
var usrTextBrandOnPrimary = (0, styled_components_1.css)(
|
|
293
|
+
var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
274
294
|
var theme = _a.theme;
|
|
275
295
|
return theme.ui_cpnt_textlabel_usr_brandonprimary;
|
|
276
296
|
});
|
|
277
|
-
var customFontStyle = (0, styled_components_1.css)(
|
|
297
|
+
var customFontStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.5;\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.5;\n"])), function (_a) {
|
|
278
298
|
var customFontSize = _a.customFontSize;
|
|
279
299
|
return customFontSize;
|
|
280
300
|
}, function (_a) {
|
|
281
301
|
var theme = _a.theme, customFontWeight = _a.customFontWeight;
|
|
282
302
|
return customFontWeight === 'bold' ? theme.fontWeight.bold : theme.fontWeight.normal;
|
|
283
303
|
});
|
|
284
|
-
var colorOverrideStyle = (0, styled_components_1.css)(
|
|
304
|
+
var colorOverrideStyle = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
285
305
|
var colorOverride = _a.colorOverride, theme = _a.theme;
|
|
286
306
|
return colorOverride && theme[colorOverride];
|
|
287
307
|
});
|
|
288
|
-
var ellipsisStyle = (0, styled_components_1.css)(
|
|
308
|
+
var ellipsisStyle = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n display: -webkit-box;\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n display: -webkit-box;\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
|
|
289
309
|
var lineLimit = _a.lineLimit;
|
|
290
310
|
return lineLimit;
|
|
291
311
|
});
|
|
292
|
-
var userSelectModeStyle = (0, styled_components_1.css)(
|
|
293
|
-
var bulletPointModeStyle = (0, styled_components_1.css)(
|
|
294
|
-
var tooltipLeftTop = (0, styled_components_1.css)(
|
|
295
|
-
var tooltipLeftBottom = (0, styled_components_1.css)(
|
|
296
|
-
var tooltipRightTop = (0, styled_components_1.css)(
|
|
297
|
-
var tooltipRightBottom = (0, styled_components_1.css)(
|
|
298
|
-
var S_TextLabel = styled_components_1.default.div(
|
|
312
|
+
var userSelectModeStyle = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
|
|
313
|
+
var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"])));
|
|
314
|
+
var tooltipLeftTop = (0, styled_components_1.css)(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n bottom: 20px;\n right: 0;\n"], ["\n bottom: 20px;\n right: 0;\n"])));
|
|
315
|
+
var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n right: 0;\n top: 20px;\n"], ["\n right: 0;\n top: 20px;\n"])));
|
|
316
|
+
var tooltipRightTop = (0, styled_components_1.css)(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n bottom: 20px;\n left: 0;\n"], ["\n bottom: 20px;\n left: 0;\n"])));
|
|
317
|
+
var tooltipRightBottom = (0, styled_components_1.css)(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n left: 0;\n top: 20px;\n"], ["\n left: 0;\n top: 20px;\n"])));
|
|
318
|
+
var S_TextLabel = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
|
|
299
319
|
var textAlign = _a.textAlign;
|
|
300
320
|
return textAlign;
|
|
301
321
|
}, function (_a) {
|
|
@@ -330,7 +350,9 @@ var S_TextLabel = styled_components_1.default.div(templateObject_40 || (template
|
|
|
330
350
|
caption2Regular: caption2Regular,
|
|
331
351
|
caption2Bold: caption2Bold,
|
|
332
352
|
form1Regular: form1Regular,
|
|
353
|
+
form1Bold: form1Bold,
|
|
333
354
|
form2Regular: form2Regular,
|
|
355
|
+
form2Bold: form2Bold,
|
|
334
356
|
blog1Regular: blog1Regular
|
|
335
357
|
}[styleTheme];
|
|
336
358
|
}, function (_a) {
|
|
@@ -378,7 +400,7 @@ var S_TextLabel = styled_components_1.default.div(templateObject_40 || (template
|
|
|
378
400
|
var bulletPointMode = _a.bulletPointMode;
|
|
379
401
|
return bulletPointMode === 'use' && bulletPointModeStyle;
|
|
380
402
|
});
|
|
381
|
-
var S_AfterTextBox = styled_components_1.default.div(
|
|
403
|
+
var S_AfterTextBox = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
|
|
382
404
|
var theme = _a.theme;
|
|
383
405
|
return theme.spacing.spacingA;
|
|
384
406
|
}, function (_a) {
|
|
@@ -394,8 +416,8 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_41 || (templ
|
|
|
394
416
|
return 'vertical-align: middle';
|
|
395
417
|
}
|
|
396
418
|
});
|
|
397
|
-
var S_IconWrapper = styled_components_1.default.div(
|
|
398
|
-
var S_TooltipWrapper = styled_components_1.default.div(
|
|
419
|
+
var S_IconWrapper = styled_components_1.default.div(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"])));
|
|
420
|
+
var S_TooltipWrapper = styled_components_1.default.div(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n z-index: 400;\n ", "\n\n ", ";\n\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n z-index: 400;\n ", "\n\n ", ";\n\n ", ";\n"])), function (_a) {
|
|
399
421
|
var theme = _a.theme;
|
|
400
422
|
return theme.ui_cpnt_button_tooltip_base;
|
|
401
423
|
}, function (_a) {
|
|
@@ -421,4 +443,4 @@ var S_TooltipWrapper = styled_components_1.default.div(templateObject_43 || (tem
|
|
|
421
443
|
}[tooltipPosition];
|
|
422
444
|
});
|
|
423
445
|
exports.default = TextLabel;
|
|
424
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
|
|
446
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45;
|
|
@@ -66,7 +66,7 @@ function UploadIconButton(_a) {
|
|
|
66
66
|
}
|
|
67
67
|
return types_1.iconStateColors[fillType];
|
|
68
68
|
};
|
|
69
|
-
return ((0, jsx_runtime_1.jsxs)(S_UploadIconButton, __assign({ "x-pds-name": "UploadIconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled',
|
|
69
|
+
return ((0, jsx_runtime_1.jsxs)(S_UploadIconButton, __assign({ "x-pds-name": "UploadIconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled', onPointerEnter: function () { return tooltipText && handleTooltipToggle(true); }, onPointerLeave: function () { return tooltipText && handleTooltipToggle(false); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0), tooltipText && isTooltipOpen && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition, baseSize: baseSize }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }, void 0) }), void 0))] }), void 0));
|
|
70
70
|
}
|
|
71
71
|
var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
72
72
|
var theme = _a.theme, baseColorKey = _a.baseColorKey;
|
|
@@ -67,7 +67,7 @@ function ContextMenuItem(_a) {
|
|
|
67
67
|
}
|
|
68
68
|
return 'ui_cpnt_dropdown_display_icon_normal';
|
|
69
69
|
};
|
|
70
|
-
return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, __assign({ "x-pds-name": "ContextMenuItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, onClick: handleClick, selected: isSelected, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.iconName) && ((0, jsx_runtime_1.
|
|
70
|
+
return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, __assign({ "x-pds-name": "ContextMenuItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, onClick: handleClick, selected: isSelected, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { size: size === 'small' ? 20 : 24, iconName: option.iconName, fillType: option.iconFillType, colorKey: getIconColorKey() }, void 0), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), ' '] }, void 0)), (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.text) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text || text, styleTheme: option.fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0))] }), void 0));
|
|
71
71
|
}
|
|
72
72
|
var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n padding: 0 ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n height: 48px;\n padding: 0 ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
|
|
73
73
|
var theme = _a.theme;
|
|
@@ -13,7 +13,8 @@ declare type Props = {
|
|
|
13
13
|
valueArray: DropdownValueOption[];
|
|
14
14
|
customWidth?: string;
|
|
15
15
|
displayType?: 'text_only' | 'icon_only' | 'icon_text';
|
|
16
|
+
fontWeight?: 'bold' | 'regular';
|
|
16
17
|
onChange?: (option: DropdownValueOption) => void;
|
|
17
18
|
};
|
|
18
|
-
declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, displayType, onChange }: Props): JSX.Element;
|
|
19
|
+
declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, displayType, fontWeight, onChange }: Props): JSX.Element;
|
|
19
20
|
export default Dropdown;
|
|
@@ -48,9 +48,9 @@ function Dropdown(_a) {
|
|
|
48
48
|
// selectionMode = 'single',
|
|
49
49
|
_e = _a.size,
|
|
50
50
|
// selectionMode = 'single',
|
|
51
|
-
size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, onChange = _a.onChange;
|
|
52
|
-
var
|
|
53
|
-
var
|
|
51
|
+
size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, onChange = _a.onChange;
|
|
52
|
+
var _j = (0, react_1.useState)(false), isFocused = _j[0], setIsFocused = _j[1];
|
|
53
|
+
var _k = (0, react_1.useState)(null), selectedValue = _k[0], setSelectedValue = _k[1];
|
|
54
54
|
/**
|
|
55
55
|
* @when value 프롭의 값에 따라
|
|
56
56
|
* @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
|
|
@@ -190,7 +190,7 @@ function Dropdown(_a) {
|
|
|
190
190
|
var LARGE_HEIGHT = 48;
|
|
191
191
|
return LARGE_HEIGHT * maxHeightItemNumber;
|
|
192
192
|
}, [size, maxHeightItemNumber]);
|
|
193
|
-
return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "mobile", className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.
|
|
193
|
+
return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "mobile", className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }, void 0), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (displayType === 'text_only' || displayType === 'icon_text') && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0))] }), void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() }, void 0)] }), void 0), isFocused && ((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ displayType: displayType }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state, displayType: displayType }, void 0) }, el.value)); }) }), void 0) }), void 0))] }), void 0));
|
|
194
194
|
}
|
|
195
195
|
var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-right: ", ";\n\n ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-right: ", ";\n\n ", ";\n"])), function (_a) {
|
|
196
196
|
var theme = _a.theme;
|
|
@@ -1,19 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type {
|
|
3
|
-
declare type SegmentedButtonGroupValueOption = Pick<PDSValueOption, 'value'> & {
|
|
4
|
-
iconName: FillIconNameKeys | LineIconNameKeys;
|
|
5
|
-
iconFillType?: 'fill' | 'line';
|
|
6
|
-
state?: 'normal' | 'disabled';
|
|
7
|
-
iconColorTheme?: 'none' | 'red';
|
|
8
|
-
};
|
|
2
|
+
import type { PDSValueOption, SegmentedButtonGroupValueOption } from '../../../common/types';
|
|
9
3
|
export declare type SegmentedButtonGroupProps = {
|
|
10
4
|
size?: 'large' | 'medium' | 'small';
|
|
11
5
|
value: PDSValueOption['value'] | PDSValueOption['value'][];
|
|
12
6
|
valueArray: SegmentedButtonGroupValueOption[];
|
|
13
|
-
|
|
7
|
+
selectionType?: 'single' | 'multi';
|
|
14
8
|
state?: 'normal' | 'disabled';
|
|
15
9
|
onClick?: (value: PDSValueOption['value']) => void;
|
|
16
10
|
onMouseDown?: (value: PDSValueOption['value']) => void;
|
|
17
11
|
};
|
|
18
|
-
declare function SegmentedButtonGroup({ size, value, valueArray,
|
|
12
|
+
declare function SegmentedButtonGroup({ size, value, valueArray, selectionType, state, onClick, onMouseDown }: SegmentedButtonGroupProps): JSX.Element;
|
|
19
13
|
export default SegmentedButtonGroup;
|
|
@@ -38,7 +38,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
38
38
|
var components_1 = require("../../../hybrid/components");
|
|
39
39
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
40
40
|
function SegmentedButtonGroup(_a) {
|
|
41
|
-
var _b = _a.size, size = _b === void 0 ? 'medium' : _b, value = _a.value, valueArray = _a.valueArray, _c = _a.
|
|
41
|
+
var _b = _a.size, size = _b === void 0 ? 'medium' : _b, value = _a.value, valueArray = _a.valueArray, _c = _a.selectionType, selectionType = _c === void 0 ? 'single' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
|
|
42
42
|
var handleClick = function (value) {
|
|
43
43
|
if (onClick) {
|
|
44
44
|
onClick(value);
|
|
@@ -50,7 +50,7 @@ function SegmentedButtonGroup(_a) {
|
|
|
50
50
|
}
|
|
51
51
|
};
|
|
52
52
|
var checkSelection = function (currentButtonValue) {
|
|
53
|
-
if (
|
|
53
|
+
if (selectionType === 'multi' && Array.isArray(value)) {
|
|
54
54
|
return value.includes(currentButtonValue);
|
|
55
55
|
}
|
|
56
56
|
return value === currentButtonValue;
|
|
@@ -67,62 +67,62 @@ function SegmentedButtonGroup(_a) {
|
|
|
67
67
|
}
|
|
68
68
|
return 'ui_cpnt_button_icon_enabled';
|
|
69
69
|
};
|
|
70
|
-
return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile",
|
|
70
|
+
return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile", selectionType: selectionType }, { children: valueArray.map(function (_a) {
|
|
71
71
|
var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.iconColorTheme, iconColorTheme = _c === void 0 ? 'none' : _c, _d = _a.state, buttonState = _d === void 0 ? 'normal' : _d;
|
|
72
|
-
return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled',
|
|
72
|
+
return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectionType: selectionType, isSelected: checkSelection(currentButtonValue) }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }, void 0) }), String(currentButtonValue)));
|
|
73
73
|
}) }), void 0));
|
|
74
74
|
}
|
|
75
75
|
var S_SegmentedButtonGroupGroups = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: max-content;\n\n & > button:not(:last-child) {\n margin-right: ", ";\n }\n"], ["\n width: max-content;\n\n & > button:not(:last-child) {\n margin-right: ", ";\n }\n"])), function (_a) {
|
|
76
|
-
var
|
|
77
|
-
return
|
|
76
|
+
var selectionType = _a.selectionType, theme = _a.theme;
|
|
77
|
+
return selectionType === 'multi' && theme.spacing.spacingA;
|
|
78
78
|
});
|
|
79
79
|
var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: ", ";\n height: 48px;\n width: 48px;\n\n &:nth-child(1) {\n border-bottom-left-radius: ", ";\n border-top-left-radius: ", ";\n }\n\n &:nth-last-child(1) {\n border-bottom-right-radius: ", ";\n border-top-right-radius: ", ";\n }\n"], ["\n border-radius: ", ";\n height: 48px;\n width: 48px;\n\n &:nth-child(1) {\n border-bottom-left-radius: ", ";\n border-top-left-radius: ", ";\n }\n\n &:nth-last-child(1) {\n border-bottom-right-radius: ", ";\n border-top-right-radius: ", ";\n }\n"])), function (_a) {
|
|
80
|
-
var
|
|
81
|
-
return
|
|
80
|
+
var selectionType = _a.selectionType;
|
|
81
|
+
return selectionType === 'multi' && '14px';
|
|
82
82
|
}, function (_a) {
|
|
83
|
-
var
|
|
84
|
-
return
|
|
83
|
+
var selectionType = _a.selectionType;
|
|
84
|
+
return selectionType === 'single' && '14px';
|
|
85
85
|
}, function (_a) {
|
|
86
|
-
var
|
|
87
|
-
return
|
|
86
|
+
var selectionType = _a.selectionType;
|
|
87
|
+
return selectionType === 'single' && '14px';
|
|
88
88
|
}, function (_a) {
|
|
89
|
-
var
|
|
90
|
-
return
|
|
89
|
+
var selectionType = _a.selectionType;
|
|
90
|
+
return selectionType === 'single' && '14px';
|
|
91
91
|
}, function (_a) {
|
|
92
|
-
var
|
|
93
|
-
return
|
|
92
|
+
var selectionType = _a.selectionType;
|
|
93
|
+
return selectionType === 'single' && '14px';
|
|
94
94
|
});
|
|
95
95
|
var medium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: ", ";\n height: 40px;\n width: 40px;\n\n &:nth-child(1) {\n border-bottom-left-radius: ", ";\n border-top-left-radius: ", ";\n }\n\n &:nth-last-child(1) {\n border-bottom-right-radius: ", ";\n border-top-right-radius: ", ";\n }\n"], ["\n border-radius: ", ";\n height: 40px;\n width: 40px;\n\n &:nth-child(1) {\n border-bottom-left-radius: ", ";\n border-top-left-radius: ", ";\n }\n\n &:nth-last-child(1) {\n border-bottom-right-radius: ", ";\n border-top-right-radius: ", ";\n }\n"])), function (_a) {
|
|
96
|
-
var
|
|
97
|
-
return
|
|
96
|
+
var selectionType = _a.selectionType;
|
|
97
|
+
return selectionType === 'multi' && '12px';
|
|
98
98
|
}, function (_a) {
|
|
99
|
-
var
|
|
100
|
-
return
|
|
99
|
+
var selectionType = _a.selectionType;
|
|
100
|
+
return selectionType === 'single' && '12px';
|
|
101
101
|
}, function (_a) {
|
|
102
|
-
var
|
|
103
|
-
return
|
|
102
|
+
var selectionType = _a.selectionType;
|
|
103
|
+
return selectionType === 'single' && '12px';
|
|
104
104
|
}, function (_a) {
|
|
105
|
-
var
|
|
106
|
-
return
|
|
105
|
+
var selectionType = _a.selectionType;
|
|
106
|
+
return selectionType === 'single' && '12px';
|
|
107
107
|
}, function (_a) {
|
|
108
|
-
var
|
|
109
|
-
return
|
|
108
|
+
var selectionType = _a.selectionType;
|
|
109
|
+
return selectionType === 'single' && '12px';
|
|
110
110
|
});
|
|
111
111
|
var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: ", ";\n height: 32px;\n width: 32px;\n\n &:nth-child(1) {\n border-bottom-left-radius: ", ";\n border-top-left-radius: ", ";\n }\n\n &:nth-last-child(1) {\n border-bottom-right-radius: ", ";\n border-top-right-radius: ", ";\n }\n"], ["\n border-radius: ", ";\n height: 32px;\n width: 32px;\n\n &:nth-child(1) {\n border-bottom-left-radius: ", ";\n border-top-left-radius: ", ";\n }\n\n &:nth-last-child(1) {\n border-bottom-right-radius: ", ";\n border-top-right-radius: ", ";\n }\n"])), function (_a) {
|
|
112
|
-
var
|
|
113
|
-
return
|
|
112
|
+
var selectionType = _a.selectionType;
|
|
113
|
+
return selectionType === 'multi' && '10px';
|
|
114
114
|
}, function (_a) {
|
|
115
|
-
var
|
|
116
|
-
return
|
|
115
|
+
var selectionType = _a.selectionType;
|
|
116
|
+
return selectionType === 'single' && '10px';
|
|
117
117
|
}, function (_a) {
|
|
118
|
-
var
|
|
119
|
-
return
|
|
118
|
+
var selectionType = _a.selectionType;
|
|
119
|
+
return selectionType === 'single' && '10px';
|
|
120
120
|
}, function (_a) {
|
|
121
|
-
var
|
|
122
|
-
return
|
|
121
|
+
var selectionType = _a.selectionType;
|
|
122
|
+
return selectionType === 'single' && '10px';
|
|
123
123
|
}, function (_a) {
|
|
124
|
-
var
|
|
125
|
-
return
|
|
124
|
+
var selectionType = _a.selectionType;
|
|
125
|
+
return selectionType === 'single' && '10px';
|
|
126
126
|
});
|
|
127
127
|
var S_BasicButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border: none;\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n ", ";\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n }\n\n &:hover:enabled:before {\n background-color: ", ";\n }\n\n &:active:enabled:before {\n background-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: default;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border: none;\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n ", ";\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n }\n\n &:hover:enabled:before {\n background-color: ", ";\n }\n\n &:active:enabled:before {\n background-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: default;\n }\n"])), function (_a) {
|
|
128
128
|
var isSelected = _a.isSelected, theme = _a.theme;
|
|
@@ -34,6 +34,7 @@ export declare type TextFieldProps = {
|
|
|
34
34
|
autoComplete?: string;
|
|
35
35
|
numberStepperMode?: 'none' | 'use';
|
|
36
36
|
numberStep?: number;
|
|
37
|
+
fontWeight?: 'bold' | 'regular';
|
|
37
38
|
deleteBtnMode?: 'none' | 'use';
|
|
38
39
|
onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
|
|
39
40
|
onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
@@ -44,5 +45,5 @@ export declare type TextFieldProps = {
|
|
|
44
45
|
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
|
|
45
46
|
onTarget?: () => void;
|
|
46
47
|
};
|
|
47
|
-
declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
|
|
48
|
+
declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
|
|
48
49
|
export default TextField;
|
|
@@ -46,7 +46,7 @@ var IconButton_1 = require("../IconButton");
|
|
|
46
46
|
var TextLabel_1 = require("../TextLabel");
|
|
47
47
|
function TextField(_a) {
|
|
48
48
|
var _b;
|
|
49
|
-
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.deleteBtnMode, deleteBtnMode =
|
|
49
|
+
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.deleteBtnMode, deleteBtnMode = _v === void 0 ? 'use' : _v, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
|
|
50
50
|
var basicThemeIconColors = {
|
|
51
51
|
normal: 'ui_cpnt_button_icon_default',
|
|
52
52
|
read_only: 'ui_cpnt_button_icon_default',
|
|
@@ -62,9 +62,9 @@ function TextField(_a) {
|
|
|
62
62
|
read_only: 'ui_cpnt_textfield_icon_colortheme_transparent_readonly',
|
|
63
63
|
disabled: 'ui_cpnt_textfield_icon_colortheme_transparent_disabled'
|
|
64
64
|
};
|
|
65
|
-
var
|
|
66
|
-
var
|
|
67
|
-
var
|
|
65
|
+
var _w = (0, react_1.useState)(false), isFocused = _w[0], setIsFocused = _w[1];
|
|
66
|
+
var _x = (0, react_hook_form_1.useFormContext)(), register = _x.register, trigger = _x.trigger, errors = _x.formState.errors;
|
|
67
|
+
var _y = register(name, validation), validateOnChange = _y.onChange, validateOnBlur = _y.onBlur;
|
|
68
68
|
var isError = Object.keys(errors).some(function (error) { return error === name; });
|
|
69
69
|
var handleClickIBtn1 = function () {
|
|
70
70
|
if (onClickIBtn1) {
|
|
@@ -119,10 +119,10 @@ function TextField(_a) {
|
|
|
119
119
|
}
|
|
120
120
|
var S_TextField = function () {
|
|
121
121
|
if (textLineType === 'multi') {
|
|
122
|
-
return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight:
|
|
122
|
+
return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0));
|
|
123
123
|
}
|
|
124
124
|
if (textLineType === 'auto') {
|
|
125
|
-
return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight:
|
|
125
|
+
return ((0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0));
|
|
126
126
|
}
|
|
127
127
|
if (textLineType === 'single') {
|
|
128
128
|
var deleteIconColor = 'ui_cpnt_button_icon_disabled';
|
|
@@ -136,7 +136,7 @@ function TextField(_a) {
|
|
|
136
136
|
break;
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: inputType === 'number' && numberStepperMode === 'use' ? 'right' : textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight:
|
|
139
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: inputType === 'number' && numberStepperMode === 'use' ? 'right' : textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", textAlign: "right", singleLineMode: "use" }, void 0), size === 'large' ? ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0))] }, void 0)), iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
|
|
140
140
|
{
|
|
141
141
|
none: basicThemeIconColors[state],
|
|
142
142
|
dark: darkThemeIconColors[state],
|
|
@@ -3,7 +3,7 @@ import type { PDSTextType, UiColors } from '../../../common';
|
|
|
3
3
|
export declare type TextLabelProps = {
|
|
4
4
|
text: PDSTextType;
|
|
5
5
|
textAlign?: 'left' | 'center' | 'right';
|
|
6
|
-
styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
|
|
6
|
+
styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form1Bold' | 'form2Regular' | 'form2Bold' | 'blog1Regular';
|
|
7
7
|
colorOverride?: UiColors;
|
|
8
8
|
colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
|
|
9
9
|
singleLineMode?: 'none' | 'use';
|
|
@@ -19,20 +19,20 @@ export declare type TextLabelProps = {
|
|
|
19
19
|
letterSpacing?: string;
|
|
20
20
|
};
|
|
21
21
|
export declare type TextStyleProps = {
|
|
22
|
-
textAlign?: '
|
|
23
|
-
styleTheme?: '
|
|
22
|
+
textAlign?: TextLabelProps['textAlign'];
|
|
23
|
+
styleTheme?: TextLabelProps['styleTheme'];
|
|
24
24
|
colorOverride?: UiColors;
|
|
25
|
-
colorTheme?: '
|
|
26
|
-
singleLineMode?: '
|
|
27
|
-
ellipsisMode?: '
|
|
28
|
-
lineLimit?:
|
|
29
|
-
userSelectMode?: '
|
|
30
|
-
customFontSize?:
|
|
31
|
-
customFontWeight?: '
|
|
32
|
-
textDecorationType?: '
|
|
33
|
-
bulletPointMode?: '
|
|
34
|
-
wordBreak?: '
|
|
35
|
-
$letterSpacing?:
|
|
25
|
+
colorTheme?: TextLabelProps['colorTheme'];
|
|
26
|
+
singleLineMode?: TextLabelProps['singleLineMode'];
|
|
27
|
+
ellipsisMode?: TextLabelProps['ellipsisMode'];
|
|
28
|
+
lineLimit?: TextLabelProps['lineLimit'];
|
|
29
|
+
userSelectMode?: TextLabelProps['userSelectMode'];
|
|
30
|
+
customFontSize?: TextLabelProps['customFontSize'];
|
|
31
|
+
customFontWeight?: TextLabelProps['customFontWeight'];
|
|
32
|
+
textDecorationType?: TextLabelProps['textDecorationType'];
|
|
33
|
+
bulletPointMode?: TextLabelProps['bulletPointMode'];
|
|
34
|
+
wordBreak?: TextLabelProps['wordBreak'];
|
|
35
|
+
$letterSpacing?: TextLabelProps['letterSpacing'];
|
|
36
36
|
};
|
|
37
37
|
declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight, textDecorationType, requirementMode, bulletPointMode, wordBreak, letterSpacing }: TextLabelProps): JSX.Element;
|
|
38
38
|
export default TextLabel;
|