pds-dev-kit-web-test 2.5.374 → 2.5.376
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/index.js +2 -3
- package/dist/src/common/assets/icons/fill/index.d.ts +0 -1
- package/dist/src/common/assets/icons/fill/index.js +1 -3
- package/dist/src/common/assets/icons/line/index.d.ts +0 -10
- package/dist/src/common/assets/icons/line/index.js +1 -21
- package/dist/src/common/components/ThreeBarProgress/ThreeBarProgress.d.ts +1 -2
- package/dist/src/common/components/ThreeBarProgress/ThreeBarProgress.js +4 -48
- package/dist/src/common/hooks/useTooltip.js +1 -1
- package/dist/src/common/services/i18n/resources/en.json +1 -9
- package/dist/src/common/services/i18n/resources/es.json +1 -9
- package/dist/src/common/services/i18n/resources/fil.json +1 -9
- package/dist/src/common/services/i18n/resources/index.d.ts +0 -56
- package/dist/src/common/services/i18n/resources/ja.json +1 -9
- package/dist/src/common/services/i18n/resources/ko.json +1 -9
- package/dist/src/common/services/i18n/resources/zh-cn.json +1 -9
- package/dist/src/common/services/i18n/resources/zh-tw.json +1 -9
- package/dist/src/common/styles/colorSet/index.d.ts +124 -124
- package/dist/src/common/styles/colorSet/index.js +2 -2
- package/dist/src/common/utils/SystemUIPositionGenerator/hoverTypeSystemUICssGenerator.js +1 -1
- package/dist/src/desktop/components/AdminListItem/AdminListItem.d.ts +0 -1
- package/dist/src/desktop/components/AdminListItem/AdminListItem.js +13 -27
- package/dist/src/desktop/components/BasicButtonGroup/BasicButtonGroup.js +1 -1
- package/dist/src/desktop/components/BasicListItem/BasicListItem.d.ts +1 -3
- package/dist/src/desktop/components/BasicListItem/BasicListItem.js +4 -17
- package/dist/src/desktop/components/BasicListItem/RightBox/IconButton.d.ts +0 -1
- package/dist/src/desktop/components/BasicListItem/RightBox/IconButton.js +2 -2
- package/dist/src/desktop/components/Checkbox/Checkbox.d.ts +1 -3
- package/dist/src/desktop/components/Checkbox/Checkbox.js +3 -17
- package/dist/src/desktop/components/Radio/Radio.js +2 -2
- package/dist/src/desktop/components/TextField/TextField.js +15 -41
- package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.js +2 -2
- package/dist/src/mobile/components/BasicListItem/BasicListItem.d.ts +1 -3
- package/dist/src/mobile/components/BasicListItem/BasicListItem.js +4 -17
- package/dist/src/mobile/components/BasicListItem/RightBox/IconButton.d.ts +0 -1
- package/dist/src/mobile/components/BasicListItem/RightBox/IconButton.js +2 -2
- package/dist/src/mobile/components/Checkbox/Checkbox.d.ts +1 -3
- package/dist/src/mobile/components/Checkbox/Checkbox.js +3 -17
- package/dist/src/mobile/components/Radio/Radio.js +2 -2
- package/dist/src/mobile/components/TextField/TextField.js +15 -41
- package/dist/src/mobile/components/TextLabel/TextLabel.d.ts +1 -6
- package/dist/src/mobile/components/TextLabel/TextLabel.js +3 -83
- package/dist/src/mobile/components/index.d.ts +1 -2
- package/dist/src/mobile/components/index.js +1 -3
- package/dist/src/mobile/index.d.ts +1 -1
- package/dist/src/mobile/index.js +2 -3
- package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFA.js +1 -1
- package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFB.js +1 -1
- package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFC.js +1 -1
- package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFD.js +1 -1
- package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFE.js +1 -1
- package/dist/src/mobile/layout/LayoutMM/Containers/ContentsContainer/variation/MMA.js +1 -1
- package/dist/src/mobile/layout/LayoutMM/Containers/ContentsContainer/variation/MMB.js +1 -1
- package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPA.js +1 -1
- package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPB.js +1 -1
- package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPC.js +1 -1
- package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPD.js +1 -1
- package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPE.js +1 -1
- package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPF.js +1 -1
- package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSA.js +1 -1
- package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSB.js +1 -1
- package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSC.js +1 -1
- package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSD.js +1 -1
- package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSE.js +1 -1
- package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSF.js +1 -1
- package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSG.js +1 -1
- package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSH.js +1 -1
- package/dist/src/sub/AdminList/AdminListItem/AdminListItem.js +3 -3
- package/dist/src/sub/DynamicLayout/CompositionEditor/CompositionEditor.d.ts +20 -0
- package/dist/src/sub/DynamicLayout/CompositionEditor/CompositionEditor.js +1132 -0
- package/dist/src/sub/DynamicLayout/CompositionRenderer/ComponentBlockMatcher.js +4 -1
- package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.d.ts +4 -2
- package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js +53 -53
- package/dist/src/sub/DynamicLayout/CompositionRenderer/CompositionBackground.d.ts +11 -0
- package/dist/src/sub/DynamicLayout/CompositionRenderer/CompositionBackground.js +45 -0
- package/dist/src/sub/DynamicLayout/CompositionRenderer/createCompositions.d.ts +9 -0
- package/dist/src/sub/DynamicLayout/CompositionRenderer/createCompositions.js +53 -0
- package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts +1 -1
- package/dist/src/sub/DynamicLayout/DynamicLayout.js +3 -2
- package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.js +1 -4
- package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js +1 -5
- package/dist/src/sub/DynamicLayout/components/Section/components/VideoBGMedia.js +25 -26
- package/dist/src/sub/DynamicLayout/components/Section/sectionContext.d.ts +2 -2
- package/dist/src/sub/DynamicLayout/components/Section/util/parseSectionBackgroundMediaData.js +0 -1
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/index.d.ts +40 -0
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/index.js +36 -177
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/paginationIcons/downIcons.d.ts +12 -0
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/paginationIcons/downIcons.js +76 -0
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/paginationIcons/index.d.ts +4 -0
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/paginationIcons/index.js +47 -0
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/paginationIcons/leftIcons.d.ts +12 -0
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/paginationIcons/leftIcons.js +76 -0
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/paginationIcons/rightIcons.d.ts +12 -0
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/paginationIcons/rightIcons.js +76 -0
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/paginationIcons/upIcons.d.ts +12 -0
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/paginationIcons/upIcons.js +76 -0
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/styles/colorSet/PaletteColor_Dark.json +152 -4
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/styles/colorSet/PaletteColor_light.json +150 -2
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/styles/colorSet/SemanticColor.json +45 -1
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/styles/colorSet/UIColor.json +262 -9
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/styles/colorSet/index.d.ts +593 -0
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/styles/colorSet/ui-type.d.ts +253 -0
- package/dist/src/sub/DynamicLayout/compositionActionTypes.d.ts +139 -0
- package/dist/src/sub/DynamicLayout/compositionActionTypes.js +2 -0
- package/dist/src/sub/DynamicLayout/compositionQueryContext.d.ts +8 -0
- package/dist/src/sub/DynamicLayout/compositionQueryContext.js +14 -0
- package/dist/src/sub/DynamicLayout/mock_composition.d.ts +3 -0
- package/dist/src/sub/DynamicLayout/mock_composition.js +801 -0
- package/dist/src/sub/DynamicLayout/mock_contentsCarousel.d.ts +1 -0
- package/dist/src/sub/DynamicLayout/mock_contentsCarousel.js +1099 -0
- package/dist/src/sub/DynamicLayout/mock_contentsList.d.ts +1 -0
- package/dist/src/sub/DynamicLayout/mock_contentsList.js +1082 -0
- package/dist/src/sub/DynamicLayout/mock_slideBanner.d.ts +810 -0
- package/dist/src/sub/DynamicLayout/mock_slideBanner.js +822 -0
- package/dist/src/sub/DynamicLayout/mocks.d.ts +8 -960
- package/dist/src/sub/DynamicLayout/mocks.js +4296 -4239
- package/dist/src/sub/DynamicLayout/sections/CustomSection/FlexGridItem.js +15 -11
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.js +13 -3
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js +19 -23
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.d.ts +4 -4
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js +230 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarouselCore.d.ts +17 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarouselCore.js +59 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigation.d.ts +31 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigation.js +118 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomPagination.d.ts +31 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomPagination.js +191 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomProgressbar.d.ts +21 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomProgressbar.js +117 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/navigationConfigs.d.ts +4 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/navigationConfigs.js +889 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/progressConfigs.d.ts +27 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/progressConfigs.js +96 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/contentsCarouselUtils.d.ts +50 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/contentsCarouselUtils.js +905 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/index.d.ts +1 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/index.js +8 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/types.d.ts +90 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/types.js +2 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.d.ts +8 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js +112 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsListCore.d.ts +17 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsListCore.js +39 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/CustomPagination.d.ts +27 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/CustomPagination.js +115 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.d.ts +23 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.js +176 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/contentsListUtils.d.ts +30 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/contentsListUtils.js +351 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/index.d.ts +1 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/index.js +8 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/types.d.ts +46 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/types.js +2 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js +33 -3
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.d.ts +8 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +225 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBannerCore.d.ts +15 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBannerCore.js +39 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigation.d.ts +31 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigation.js +118 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomPagination.d.ts +31 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomPagination.js +191 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.d.ts +21 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.js +94 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/navigationConfigs.d.ts +4 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/navigationConfigs.js +889 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/progressConfigs.d.ts +27 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/progressConfigs.js +96 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/index.d.ts +1 -0
- package/dist/src/{mobile/components/DatePicker → sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner}/index.js +3 -3
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/slideBannerUtils.d.ts +48 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/slideBannerUtils.js +852 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/types.d.ts +80 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/types.js +2 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js +28 -6
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/VideoPlayer.js +48 -27
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/index.js +1 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/types.d.ts +56 -10
- package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/replaceUndefinedValues.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/types.d.ts +27 -10
- package/dist/src/sub/DynamicLayout/sections/CustomSection/types.js +3 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/effectPropParsers/parseEffectPropEntAnim.d.ts +4 -4
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/layoutPropParsers/parseLayoutPropPadding.d.ts +2 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseCompositionPlacement.d.ts +14 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseCompositionPlacement.js +26 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseJsonProperties.d.ts +2 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseProperties.d.ts +2 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts +52 -3
- package/dist/src/sub/DynamicLayout/sections/FlexGridCustomSection.js +1 -0
- package/dist/src/sub/DynamicLayout/types.d.ts +48 -15
- package/package.json +3 -3
- package/release-note.md +3 -3
- package/dist/src/common/assets/icons/fill/VideoStop.d.ts +0 -4
- package/dist/src/common/assets/icons/fill/VideoStop.js +0 -30
- package/dist/src/common/assets/icons/line/CheckBox.d.ts +0 -4
- package/dist/src/common/assets/icons/line/CheckBox.js +0 -30
- package/dist/src/common/assets/icons/line/Dropdown.d.ts +0 -4
- package/dist/src/common/assets/icons/line/Dropdown.js +0 -30
- package/dist/src/common/assets/icons/line/Radio.d.ts +0 -4
- package/dist/src/common/assets/icons/line/Radio.js +0 -30
- package/dist/src/common/assets/icons/line/SectionQuestion32.d.ts +0 -4
- package/dist/src/common/assets/icons/line/SectionQuestion32.js +0 -30
- package/dist/src/common/assets/icons/line/SectionQuestion40.d.ts +0 -4
- package/dist/src/common/assets/icons/line/SectionQuestion40.js +0 -30
- package/dist/src/common/assets/icons/line/SectionQuestionnaire32.d.ts +0 -4
- package/dist/src/common/assets/icons/line/SectionQuestionnaire32.js +0 -30
- package/dist/src/common/assets/icons/line/SectionQuestionnaire40.d.ts +0 -4
- package/dist/src/common/assets/icons/line/SectionQuestionnaire40.js +0 -30
- package/dist/src/common/assets/icons/line/TextLong.d.ts +0 -4
- package/dist/src/common/assets/icons/line/TextLong.js +0 -30
- package/dist/src/common/assets/icons/line/TextShort.d.ts +0 -4
- package/dist/src/common/assets/icons/line/TextShort.js +0 -30
- package/dist/src/common/assets/icons/line/VideoStop.d.ts +0 -4
- package/dist/src/common/assets/icons/line/VideoStop.js +0 -30
- package/dist/src/common/utils/dateHelper.d.ts +0 -13
- package/dist/src/common/utils/dateHelper.js +0 -87
- package/dist/src/mobile/components/DatePicker/DatePicker.d.ts +0 -16
- package/dist/src/mobile/components/DatePicker/DatePicker.js +0 -156
- package/dist/src/mobile/components/DatePicker/DatePickerHeader.d.ts +0 -14
- package/dist/src/mobile/components/DatePicker/DatePickerHeader.js +0 -27
- package/dist/src/mobile/components/DatePicker/Day.d.ts +0 -13
- package/dist/src/mobile/components/DatePicker/Day.js +0 -94
- package/dist/src/mobile/components/DatePicker/index.d.ts +0 -1
- package/dist/src/mobile/components/DatePicker/utils.d.ts +0 -16
- package/dist/src/mobile/components/DatePicker/utils.js +0 -68
- package/dist/src/sub/DynamicLayout/CompositionRenderer/CompositionRenderer.d.ts +0 -6
- package/dist/src/sub/DynamicLayout/CompositionRenderer/CompositionRenderer.js +0 -27
- /package/dist/src/sub/DynamicLayout/{mock_video_cb.d.ts → mock_video.d.ts} +0 -0
- /package/dist/src/sub/DynamicLayout/{mock_video_cb.js → mock_video.js} +0 -0
@@ -39,9 +39,9 @@ function Radio(_a) {
|
|
39
39
|
}
|
40
40
|
}
|
41
41
|
};
|
42
|
-
return ((0, jsx_runtime_1.jsxs)(S_Label, __assign({ "x-pds-name": "Radio", "x-pds-element-type": "component", "x-pds-device-type": "desktop", htmlFor:
|
42
|
+
return ((0, jsx_runtime_1.jsxs)(S_Label, __assign({ "x-pds-name": "Radio", "x-pds-element-type": "component", "x-pds-device-type": "desktop", htmlFor: value }, { children: [icon(), text && ((0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
|
43
43
|
? 'ui_cpnt_selcontrols_text_default'
|
44
|
-
: 'ui_cpnt_selcontrols_text_disabled' }) })), (0, jsx_runtime_1.jsx)("input", { hidden: true, id:
|
44
|
+
: 'ui_cpnt_selcontrols_text_disabled' }) })), (0, jsx_runtime_1.jsx)("input", { hidden: true, id: value, type: "radio", name: name, value: value, checked: checked, color: value, onChange: handleChange, disabled: state === 'disabled' })] })));
|
45
45
|
}
|
46
46
|
var S_Label = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n cursor: pointer;\n display: flex;\n height: 24px;\n"], ["\n align-items: center;\n cursor: pointer;\n display: flex;\n height: 24px;\n"])));
|
47
47
|
var S_OverrideIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n position: relative;\n"], ["\n align-items: center;\n display: flex;\n position: relative;\n"])));
|
@@ -123,48 +123,24 @@ function TextField(_a) {
|
|
123
123
|
trigger(name);
|
124
124
|
}
|
125
125
|
var S_TextField = function () {
|
126
|
-
var deleteIconColor = 'ui_cpnt_button_icon_disabled';
|
127
|
-
switch (colorTheme) {
|
128
|
-
case 'dark': {
|
129
|
-
deleteIconColor = 'ui_cpnt_textfield_icon_darktheme_disabled';
|
130
|
-
break;
|
131
|
-
}
|
132
|
-
case 'transparent': {
|
133
|
-
deleteIconColor = 'ui_cpnt_textfield_icon_colortheme_transparent_disabled';
|
134
|
-
break;
|
135
|
-
}
|
136
|
-
}
|
137
126
|
if (textLineType === 'multi') {
|
138
|
-
return ((0, jsx_runtime_1.
|
139
|
-
(colorTheme &&
|
140
|
-
{
|
141
|
-
none: basicThemeIconColors[state],
|
142
|
-
dark: darkThemeIconColors[state],
|
143
|
-
transparent: transparentThemeIconColors[state]
|
144
|
-
}[colorTheme]), iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn1IconColorKey ||
|
145
|
-
(colorTheme &&
|
146
|
-
{
|
147
|
-
none: basicThemeIconColors[state],
|
148
|
-
dark: darkThemeIconColors[state],
|
149
|
-
transparent: transparentThemeIconColors[state]
|
150
|
-
}[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
|
127
|
+
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 }));
|
151
128
|
}
|
152
129
|
if (textLineType === 'auto') {
|
153
|
-
return ((0, jsx_runtime_1.
|
154
|
-
(colorTheme &&
|
155
|
-
{
|
156
|
-
none: basicThemeIconColors[state],
|
157
|
-
dark: darkThemeIconColors[state],
|
158
|
-
transparent: transparentThemeIconColors[state]
|
159
|
-
}[colorTheme]), iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn1IconColorKey ||
|
160
|
-
(colorTheme &&
|
161
|
-
{
|
162
|
-
none: basicThemeIconColors[state],
|
163
|
-
dark: darkThemeIconColors[state],
|
164
|
-
transparent: transparentThemeIconColors[state]
|
165
|
-
}[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
|
130
|
+
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 }));
|
166
131
|
}
|
167
132
|
if (textLineType === 'single') {
|
133
|
+
var deleteIconColor = 'ui_cpnt_button_icon_disabled';
|
134
|
+
switch (colorTheme) {
|
135
|
+
case 'dark': {
|
136
|
+
deleteIconColor = 'ui_cpnt_textfield_icon_darktheme_disabled';
|
137
|
+
break;
|
138
|
+
}
|
139
|
+
case 'transparent': {
|
140
|
+
deleteIconColor = 'ui_cpnt_textfield_icon_colortheme_transparent_disabled';
|
141
|
+
break;
|
142
|
+
}
|
143
|
+
}
|
168
144
|
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" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, inputMode: inputMode, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [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: overrideIBtn2IconColorKey ||
|
169
145
|
(colorTheme &&
|
170
146
|
{
|
@@ -384,9 +360,7 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_19 || (t
|
|
384
360
|
return customWidth && "width: ".concat(customWidth, ";");
|
385
361
|
});
|
386
362
|
var S_RightBox = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
|
387
|
-
var
|
388
|
-
var S_RightBox_Multi = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n align-self: end;\n display: flex;\n"], ["\n align-items: center;\n align-self: end;\n display: flex;\n"])));
|
389
|
-
var S_Error = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
|
363
|
+
var S_Error = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
|
390
364
|
var theme = _a.theme, colorTheme = _a.colorTheme;
|
391
365
|
switch (colorTheme) {
|
392
366
|
case 'none': {
|
@@ -411,4 +385,4 @@ var S_Error = styled_components_1.default.div(templateObject_23 || (templateObje
|
|
411
385
|
return theme.spacing.spacingA;
|
412
386
|
});
|
413
387
|
exports.default = TextField;
|
414
|
-
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
|
388
|
+
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;
|
@@ -98,7 +98,7 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (
|
|
98
98
|
var containerColor = _a.containerColor;
|
99
99
|
return "background-color: ".concat(containerColor);
|
100
100
|
}, overrideStyleContainer2);
|
101
|
-
var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-sizing: border-box;\n
|
101
|
+
var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-sizing: border-box;\n max-width: 480px;\n padding-bottom: 88px;\n padding-left: 24px;\n padding-right: 24px;\n width: 480px;\n ", ";\n"], ["\n box-sizing: border-box;\n max-width: 480px;\n padding-bottom: 88px;\n padding-left: 24px;\n padding-right: 24px;\n width: 480px;\n ", ";\n"])), function (_a) {
|
102
102
|
var areaColor = _a.areaColor;
|
103
103
|
return "background-color: ".concat(areaColor);
|
104
104
|
});
|
@@ -106,7 +106,7 @@ var S_ContentsArea2 = styled_components_1.default.div(templateObject_7 || (templ
|
|
106
106
|
var areaColor = _a.areaColor;
|
107
107
|
return "background-color: ".concat(areaColor);
|
108
108
|
});
|
109
|
-
var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n
|
109
|
+
var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
110
110
|
var S_Content2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
|
111
111
|
exports.default = WTU;
|
112
112
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
@@ -2,7 +2,6 @@
|
|
2
2
|
import type { PDSIconType, PDSTextType } from '../../../common';
|
3
3
|
export type BasicListItemProps = {
|
4
4
|
selectionMode?: 'none' | 'check' | 'radio';
|
5
|
-
state?: 'normal' | 'disabled';
|
6
5
|
titleText: PDSTextType;
|
7
6
|
titleTextColorTheme?: 'none' | 'logout';
|
8
7
|
descText?: PDSTextType;
|
@@ -40,7 +39,6 @@ export type BasicListItemProps = {
|
|
40
39
|
};
|
41
40
|
export type StyleProps = {
|
42
41
|
isSelected?: boolean;
|
43
|
-
state?: 'normal' | 'disabled';
|
44
42
|
dividerType?: BasicListItemProps['dividerType'];
|
45
43
|
selectionMode?: 'none' | 'check' | 'radio';
|
46
44
|
captionText?: PDSTextType;
|
@@ -50,5 +48,5 @@ export type StyleProps = {
|
|
50
48
|
spacingMode?: 'none' | 'use';
|
51
49
|
onlyLeftArea?: boolean;
|
52
50
|
};
|
53
|
-
declare function BasicListItem({ selectionMode,
|
51
|
+
declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, mBtnState, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
|
54
52
|
export default BasicListItem;
|
@@ -25,7 +25,7 @@ var Contents_1 = __importDefault(require("./Contents"));
|
|
25
25
|
var LeftBox_1 = require("./LeftBox");
|
26
26
|
var RightBox_1 = require("./RightBox");
|
27
27
|
function BasicListItem(_a) {
|
28
|
-
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b,
|
28
|
+
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.mBtnState, mBtnState = _o === void 0 ? 'normal' : _o, _p = _a.dividerType, dividerType = _p === void 0 ? 'none' : _p, _q = _a.titleFontWeight, titleFontWeight = _q === void 0 ? 'regular' : _q, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _r = _a.switchState, switchState = _r === void 0 ? 'normal' : _r, _s = _a.switchStatus, switchStatus = _s === void 0 ? 'off' : _s, _t = _a.spacingMode, spacingMode = _t === void 0 ? 'use' : _t, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
|
29
29
|
var methods = (0, react_hook_form_1.useFormContext)();
|
30
30
|
var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
|
31
31
|
var handleIBtn1Click = function (e) {
|
@@ -35,8 +35,6 @@ function BasicListItem(_a) {
|
|
35
35
|
}
|
36
36
|
};
|
37
37
|
var handleClick = function (e) {
|
38
|
-
if (state === 'disabled')
|
39
|
-
return;
|
40
38
|
switch (selectionMode) {
|
41
39
|
case 'radio': {
|
42
40
|
if (onClickRadio && radioId) {
|
@@ -66,22 +64,11 @@ function BasicListItem(_a) {
|
|
66
64
|
}
|
67
65
|
}
|
68
66
|
};
|
69
|
-
|
70
|
-
if (state === 'disabled') {
|
71
|
-
return 'sysTextTertiary';
|
72
|
-
}
|
73
|
-
if (titleTextColorTheme === 'none') {
|
74
|
-
return 'sysTextPrimary';
|
75
|
-
}
|
76
|
-
return 'sysTextError';
|
77
|
-
}
|
78
|
-
return ((0, jsx_runtime_1.jsx)(S_BasicListItem, __assign({ "x-pds-name": "BasicListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", state: state, isSelected: isSelected, onClick: handleClick, spacingMode: spacingMode }, { children: (0, jsx_runtime_1.jsxs)(S_BasicListItemBox, __assign({ imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode, dividerType: dividerType }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' }, { children: [selectionMode === 'check' && checkboxId && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { id: checkboxId }), selectionMode === 'radio' && radioValue && radioId && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Radio, { id: radioId, value: radioValue, onChange: onClickRadio })), badgeMode === 'left' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Badge, { status: badgeStatus }), imageIconMode === 'image' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { src: imageSrc, shape: imageShapeType }), imageIconMode === 'icon' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Icon, { name: iconName, fill: iconFillType === 'fill' })), (0, jsx_runtime_1.jsxs)(Contents_1.default, { children: [(0, jsx_runtime_1.jsx)(Contents_1.default.Title, { text: titleText, colorTheme: titleTextColor(), font: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular' }), captionText && (0, jsx_runtime_1.jsx)(Contents_1.default.Caption, { text: captionText })] })] })), (0, jsx_runtime_1.jsxs)(RightBox_1.RightBox, __assign({ hasFixedHeight: displayType === 'text' }, { children: [(displayType === 'text' || displayType === 'ibtn_text') && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Description, { text: descText, icon: displayType === 'ibtn_text' ? ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })) : undefined })), displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn2IconName, fill: iBtn2IconFillType === 'fill', onClick: onClickIBtn2, state: state }), (0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click, state: state })] })), displayType === 'mbtn' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.MainButton, { text: mBtnText, fill: mBtnFillType === 'fill', state: state === 'disabled' ? 'disabled' : mBtnState, onClick: onClickMBtn })), displayType === 'switch' && switchName && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Switch, { name: switchName, state: state === 'disabled' ? 'disabled' : switchState, status: switchStatus, onClick: onClickSwitch }))] }))] })) })));
|
67
|
+
return ((0, jsx_runtime_1.jsx)(S_BasicListItem, __assign({ "x-pds-name": "BasicListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isSelected: isSelected, onClick: handleClick, spacingMode: spacingMode }, { children: (0, jsx_runtime_1.jsxs)(S_BasicListItemBox, __assign({ imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode, dividerType: dividerType }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' }, { children: [selectionMode === 'check' && checkboxId && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { id: checkboxId }), selectionMode === 'radio' && radioValue && radioId && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Radio, { id: radioId, value: radioValue, onChange: onClickRadio })), badgeMode === 'left' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Badge, { status: badgeStatus }), imageIconMode === 'image' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { src: imageSrc, shape: imageShapeType }), imageIconMode === 'icon' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Icon, { name: iconName, fill: iconFillType === 'fill' })), (0, jsx_runtime_1.jsxs)(Contents_1.default, { children: [(0, jsx_runtime_1.jsx)(Contents_1.default.Title, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', font: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular' }), captionText && (0, jsx_runtime_1.jsx)(Contents_1.default.Caption, { text: captionText })] })] })), (0, jsx_runtime_1.jsxs)(RightBox_1.RightBox, __assign({ hasFixedHeight: displayType === 'text' }, { children: [(displayType === 'text' || displayType === 'ibtn_text') && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Description, { text: descText, icon: displayType === 'ibtn_text' ? ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })) : undefined })), displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn2IconName, fill: iBtn2IconFillType === 'fill', onClick: onClickIBtn2 }), (0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })] })), displayType === 'mbtn' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.MainButton, { text: mBtnText, fill: mBtnFillType === 'fill', state: mBtnState, onClick: onClickMBtn })), displayType === 'switch' && switchName && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Switch, { name: switchName, state: switchState, status: switchStatus, onClick: onClickSwitch }))] }))] })) })));
|
79
68
|
}
|
80
69
|
var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: ", ";\n"])), function (_a) {
|
81
|
-
var theme = _a.theme, isSelected = _a.isSelected
|
82
|
-
return isSelected
|
83
|
-
? theme.ui_cpnt_list_base_area_select
|
84
|
-
: theme.ui_cpnt_list_base_area;
|
70
|
+
var theme = _a.theme, isSelected = _a.isSelected;
|
71
|
+
return isSelected ? theme.ui_cpnt_list_base_area_select : theme.ui_cpnt_list_base_area;
|
85
72
|
}, function (_a) {
|
86
73
|
var spacingMode = _a.spacingMode, theme = _a.theme;
|
87
74
|
return spacingMode === 'use' && "0 ".concat(theme.spacing.spacingE);
|
@@ -11,8 +11,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
12
12
|
var IconButton_1 = require("../../IconButton");
|
13
13
|
var IconButton = function (_a) {
|
14
|
-
var iconName = _a.iconName, fill = _a.fill, onClick = _a.onClick
|
15
|
-
return ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: iconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iconName, iconFillType: fill ? 'fill' : 'line', baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClick, iconColorKey:
|
14
|
+
var iconName = _a.iconName, fill = _a.fill, onClick = _a.onClick;
|
15
|
+
return ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: iconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iconName, iconFillType: fill ? 'fill' : 'line', baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClick, iconColorKey: "ui_cpnt_button_icon_default" })) }));
|
16
16
|
};
|
17
17
|
var S_IconWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: center;\n"], ["\n align-items: center;\n display: flex;\n justify-content: center;\n"])));
|
18
18
|
exports.default = IconButton;
|
@@ -1,14 +1,12 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { Path } from 'react-hook-form';
|
3
3
|
import type { IFormValues, PDSTextType } from '../../../common';
|
4
|
-
type ColorTheme = 'none' | 'white' | 'grey1';
|
5
4
|
type CheckboxProps = {
|
6
5
|
text?: PDSTextType;
|
7
6
|
fontWeight?: 'bold' | 'regular';
|
8
7
|
state?: 'normal' | 'disabled';
|
9
8
|
name: Path<IFormValues>;
|
10
|
-
colorTheme?: ColorTheme;
|
11
9
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
12
10
|
};
|
13
|
-
declare function Checkbox({ text, fontWeight, state, name,
|
11
|
+
declare function Checkbox({ text, fontWeight, state, name, onChange }: CheckboxProps): JSX.Element;
|
14
12
|
export default Checkbox;
|
@@ -24,7 +24,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
24
24
|
var hybrid_1 = require("../../../hybrid");
|
25
25
|
var TextLabel_1 = require("../TextLabel");
|
26
26
|
function Checkbox(_a) {
|
27
|
-
var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name,
|
27
|
+
var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, onChange = _a.onChange;
|
28
28
|
var register = (0, react_hook_form_1.useFormContext)().register;
|
29
29
|
var checkboxFormRegister = register(name);
|
30
30
|
var isChecked = (0, react_hook_form_1.useWatch)({ name: name });
|
@@ -34,24 +34,10 @@ function Checkbox(_a) {
|
|
34
34
|
onChange(e);
|
35
35
|
}
|
36
36
|
};
|
37
|
-
var colorThemeSet = {
|
38
|
-
none: {
|
39
|
-
iconColorkey: 'ui_cpnt_selcontrols_icon_default',
|
40
|
-
textColorKey: 'ui_cpnt_selcontrols_text_default'
|
41
|
-
},
|
42
|
-
white: {
|
43
|
-
iconColorkey: 'ui_cpnt_selcontrols_icon_white',
|
44
|
-
textColorKey: 'ui_cpnt_selcontrols_text_white'
|
45
|
-
},
|
46
|
-
grey1: {
|
47
|
-
iconColorkey: 'ui_cpnt_selcontrols_icon_grey_01',
|
48
|
-
textColorKey: 'ui_cpnt_selcontrols_text_grey_01'
|
49
|
-
}
|
50
|
-
};
|
51
37
|
var icon = function () {
|
52
38
|
switch (state) {
|
53
39
|
case 'normal': {
|
54
|
-
return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey:
|
40
|
+
return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }));
|
55
41
|
}
|
56
42
|
case 'disabled': {
|
57
43
|
return isChecked ? ((0, jsx_runtime_1.jsxs)(S_OverrideIconWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }), (0, jsx_runtime_1.jsx)(S_OverrideIcon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" }) })] })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }));
|
@@ -59,7 +45,7 @@ function Checkbox(_a) {
|
|
59
45
|
}
|
60
46
|
};
|
61
47
|
return ((0, jsx_runtime_1.jsx)(S_Checkbox, __assign({ "x-pds-name": "Checkbox", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: (0, jsx_runtime_1.jsxs)(S_Label, __assign({ htmlFor: name }, { children: [icon(), text && ((0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
|
62
|
-
?
|
48
|
+
? 'ui_cpnt_selcontrols_text_default'
|
63
49
|
: 'ui_cpnt_selcontrols_text_disabled' }) })), (0, jsx_runtime_1.jsx)("input", __assign({ hidden: true, type: "checkbox" }, checkboxFormRegister, { id: name, disabled: state === 'disabled', onChange: handleChange }))] })) })));
|
64
50
|
}
|
65
51
|
var S_Checkbox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 24px;\n"], ["\n align-items: center;\n display: flex;\n height: 24px;\n"])));
|
@@ -39,9 +39,9 @@ function Radio(_a) {
|
|
39
39
|
}
|
40
40
|
}
|
41
41
|
};
|
42
|
-
return ((0, jsx_runtime_1.jsxs)(S_Label, __assign({ "x-pds-name": "Radio", "x-pds-element-type": "component", "x-pds-device-type": "mobile", htmlFor:
|
42
|
+
return ((0, jsx_runtime_1.jsxs)(S_Label, __assign({ "x-pds-name": "Radio", "x-pds-element-type": "component", "x-pds-device-type": "mobile", htmlFor: value }, { children: [icon(), (0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
|
43
43
|
? 'ui_cpnt_selcontrols_text_default'
|
44
|
-
: 'ui_cpnt_selcontrols_text_disabled' }) }), (0, jsx_runtime_1.jsx)("input", { hidden: true, id:
|
44
|
+
: 'ui_cpnt_selcontrols_text_disabled' }) }), (0, jsx_runtime_1.jsx)("input", { hidden: true, id: value, type: "radio", name: name, value: value, checked: checked, color: value, onChange: handleChange, disabled: state === 'disabled' })] })));
|
45
45
|
}
|
46
46
|
var S_Label = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 24px;\n"], ["\n align-items: center;\n display: flex;\n height: 24px;\n"])));
|
47
47
|
var S_OverrideIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n position: relative;\n"], ["\n align-items: center;\n display: flex;\n position: relative;\n"])));
|
@@ -123,48 +123,24 @@ function TextField(_a) {
|
|
123
123
|
trigger(name);
|
124
124
|
}
|
125
125
|
var S_TextField = function () {
|
126
|
-
var deleteIconColor = 'ui_cpnt_button_icon_disabled';
|
127
|
-
switch (colorTheme) {
|
128
|
-
case 'dark': {
|
129
|
-
deleteIconColor = 'ui_cpnt_textfield_icon_darktheme_disabled';
|
130
|
-
break;
|
131
|
-
}
|
132
|
-
case 'transparent': {
|
133
|
-
deleteIconColor = 'ui_cpnt_textfield_icon_colortheme_transparent_disabled';
|
134
|
-
break;
|
135
|
-
}
|
136
|
-
}
|
137
126
|
if (textLineType === 'multi') {
|
138
|
-
return ((0, jsx_runtime_1.
|
139
|
-
(colorTheme &&
|
140
|
-
{
|
141
|
-
none: basicThemeIconColors[state],
|
142
|
-
dark: darkThemeIconColors[state],
|
143
|
-
transparent: transparentThemeIconColors[state]
|
144
|
-
}[colorTheme]), iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn1IconColorKey ||
|
145
|
-
(colorTheme &&
|
146
|
-
{
|
147
|
-
none: basicThemeIconColors[state],
|
148
|
-
dark: darkThemeIconColors[state],
|
149
|
-
transparent: transparentThemeIconColors[state]
|
150
|
-
}[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
|
127
|
+
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 }));
|
151
128
|
}
|
152
129
|
if (textLineType === 'auto') {
|
153
|
-
return ((0, jsx_runtime_1.
|
154
|
-
(colorTheme &&
|
155
|
-
{
|
156
|
-
none: basicThemeIconColors[state],
|
157
|
-
dark: darkThemeIconColors[state],
|
158
|
-
transparent: transparentThemeIconColors[state]
|
159
|
-
}[colorTheme]), iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn1IconColorKey ||
|
160
|
-
(colorTheme &&
|
161
|
-
{
|
162
|
-
none: basicThemeIconColors[state],
|
163
|
-
dark: darkThemeIconColors[state],
|
164
|
-
transparent: transparentThemeIconColors[state]
|
165
|
-
}[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
|
130
|
+
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 }));
|
166
131
|
}
|
167
132
|
if (textLineType === 'single') {
|
133
|
+
var deleteIconColor = 'ui_cpnt_button_icon_disabled';
|
134
|
+
switch (colorTheme) {
|
135
|
+
case 'dark': {
|
136
|
+
deleteIconColor = 'ui_cpnt_textfield_icon_darktheme_disabled';
|
137
|
+
break;
|
138
|
+
}
|
139
|
+
case 'transparent': {
|
140
|
+
deleteIconColor = 'ui_cpnt_textfield_icon_colortheme_transparent_disabled';
|
141
|
+
break;
|
142
|
+
}
|
143
|
+
}
|
168
144
|
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" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, inputMode: inputMode, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [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: overrideIBtn2IconColorKey ||
|
169
145
|
(colorTheme &&
|
170
146
|
{
|
@@ -368,9 +344,7 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_18 || (t
|
|
368
344
|
return customWidth && "width: ".concat(customWidth, ";");
|
369
345
|
});
|
370
346
|
var S_RightBox = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
|
371
|
-
var
|
372
|
-
var S_RightBox_Multi = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n align-items: center;\n align-self: end;\n display: flex;\n"], ["\n align-items: center;\n align-self: end;\n display: flex;\n"])));
|
373
|
-
var S_Error = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
|
347
|
+
var S_Error = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
|
374
348
|
var theme = _a.theme, colorTheme = _a.colorTheme;
|
375
349
|
switch (colorTheme) {
|
376
350
|
case 'none': {
|
@@ -395,4 +369,4 @@ var S_Error = styled_components_1.default.div(templateObject_22 || (templateObje
|
|
395
369
|
return theme.spacing.spacingA;
|
396
370
|
});
|
397
371
|
exports.default = TextField;
|
398
|
-
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
|
372
|
+
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;
|
@@ -2,9 +2,6 @@
|
|
2
2
|
import type { PDSTextType, UiColors } from '../../../common';
|
3
3
|
export type TextLabelProps = {
|
4
4
|
text: PDSTextType;
|
5
|
-
tooltipText?: PDSTextType;
|
6
|
-
tooltipPosition?: 'top' | 'bottom';
|
7
|
-
tooltipIconColorKey?: UiColors;
|
8
5
|
textAlign?: 'left' | 'center' | 'right';
|
9
6
|
styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form1Bold' | 'form2Regular' | 'form2Bold' | 'blog1Regular';
|
10
7
|
colorOverride?: UiColors;
|
@@ -23,8 +20,6 @@ export type TextLabelProps = {
|
|
23
20
|
};
|
24
21
|
export type TextStyleProps = {
|
25
22
|
textAlign?: TextLabelProps['textAlign'];
|
26
|
-
tooltipPosition?: TextLabelProps['tooltipPosition'];
|
27
|
-
tooltipText?: TextLabelProps['tooltipText'];
|
28
23
|
styleTheme?: TextLabelProps['styleTheme'];
|
29
24
|
colorOverride?: UiColors;
|
30
25
|
colorTheme?: TextLabelProps['colorTheme'];
|
@@ -39,5 +34,5 @@ export type TextStyleProps = {
|
|
39
34
|
wordBreak?: TextLabelProps['wordBreak'];
|
40
35
|
$letterSpacing?: TextLabelProps['letterSpacing'];
|
41
36
|
};
|
42
|
-
declare function TextLabel({ text,
|
37
|
+
declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight, textDecorationType, requirementMode, bulletPointMode, wordBreak, letterSpacing }: TextLabelProps): JSX.Element;
|
43
38
|
export default TextLabel;
|
@@ -39,87 +39,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
39
39
|
};
|
40
40
|
Object.defineProperty(exports, "__esModule", { value: true });
|
41
41
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
42
|
-
var react_1 = require("react");
|
43
|
-
var react_dom_1 = require("react-dom");
|
44
|
-
var systemUI_1 = require("../../../common/styles/systemUI");
|
45
|
-
var SystemUIPositionGenerator_1 = require("../../../common/utils/SystemUIPositionGenerator");
|
46
42
|
var styled_components_1 = __importStar(require("styled-components"));
|
47
43
|
var hybrid_1 = require("../../../hybrid");
|
48
44
|
function TextLabel(_a) {
|
49
|
-
var text = _a.text,
|
50
|
-
|
51
|
-
var tooltipPositionTargetRef = (0, react_1.useRef)(null);
|
52
|
-
var tooltipRef = (0, react_1.useRef)(null);
|
53
|
-
var _p = (0, react_1.useState)(null), tooltipSizeOffset = _p[0], setTooltipSizeOffset = _p[1];
|
54
|
-
var _q = (0, react_1.useState)(null), tooltipPositionOffset = _q[0], setTooltipPositionOffset = _q[1];
|
55
|
-
/**
|
56
|
-
* @when : 화면진입 시, dependency 변경되었을 때
|
57
|
-
* @expected : tooltipPositionTargetRef, tooltipRef 의 위치를 업데이트합니다.
|
58
|
-
* @clear :
|
59
|
-
*/
|
60
|
-
(0, react_1.useEffect)(function () {
|
61
|
-
if (!tooltipPositionTargetRef.current || !tooltipText) {
|
62
|
-
return;
|
63
|
-
}
|
64
|
-
if (!isTooltipOpen && tooltipRef.current) {
|
65
|
-
setTooltipSizeOffset(null);
|
66
|
-
return;
|
67
|
-
}
|
68
|
-
var updateTooltipPosition = function () {
|
69
|
-
if (!tooltipPositionTargetRef.current)
|
70
|
-
return;
|
71
|
-
var _a = tooltipPositionTargetRef.current.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
|
72
|
-
setTooltipPositionOffset({
|
73
|
-
top: top + window.scrollY,
|
74
|
-
right: right + window.scrollX,
|
75
|
-
bottom: bottom + window.scrollY,
|
76
|
-
left: left + window.scrollX
|
77
|
-
});
|
78
|
-
if (tooltipRef.current) {
|
79
|
-
setTooltipSizeOffset({
|
80
|
-
height: tooltipRef.current.offsetHeight,
|
81
|
-
width: tooltipRef.current.offsetWidth
|
82
|
-
});
|
83
|
-
}
|
84
|
-
};
|
85
|
-
updateTooltipPosition();
|
86
|
-
}, [isTooltipOpen]);
|
87
|
-
/**
|
88
|
-
* @when : 툴팁 오픈시
|
89
|
-
* @expected : 툴팁 외부 클릭시 툴팁이 닫히는 터치 이벤트를 추가합니다.
|
90
|
-
* @clear : 이벤트를 제거합니다.
|
91
|
-
*/
|
92
|
-
(0, react_1.useEffect)(function () {
|
93
|
-
if (!isTooltipOpen)
|
94
|
-
return;
|
95
|
-
var handleOutsideClick = function (event) {
|
96
|
-
if (tooltipRef.current &&
|
97
|
-
!tooltipRef.current.contains(event.target) &&
|
98
|
-
tooltipPositionTargetRef.current &&
|
99
|
-
!tooltipPositionTargetRef.current.contains(event.target)) {
|
100
|
-
setIsTooltipOpen(false);
|
101
|
-
}
|
102
|
-
};
|
103
|
-
document.addEventListener('touchstart', handleOutsideClick);
|
104
|
-
document.addEventListener('mousedown', handleOutsideClick);
|
105
|
-
return function () {
|
106
|
-
document.removeEventListener('touchstart', handleOutsideClick);
|
107
|
-
document.removeEventListener('mousedown', handleOutsideClick);
|
108
|
-
};
|
109
|
-
}, [isTooltipOpen]);
|
110
|
-
var tooltipPositionCss = (0, SystemUIPositionGenerator_1.hoverTypeSystemUICssGenerator)({
|
111
|
-
baseSize: 16,
|
112
|
-
sizeOffset: tooltipSizeOffset,
|
113
|
-
positionOffset: tooltipPositionOffset,
|
114
|
-
systemUIPosition: tooltipPosition.includes('_')
|
115
|
-
? tooltipPosition
|
116
|
-
: "right_".concat(tooltipPosition),
|
117
|
-
distance: 4
|
118
|
-
});
|
119
|
-
var handleTooltipToggle = function () {
|
120
|
-
setIsTooltipOpen(function (prev) { return !prev; });
|
121
|
-
};
|
122
|
-
return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "mobile", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }) }))), tooltipText && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsxs)(S_IconWrapper, __assign({ ref: tooltipPositionTargetRef, onClick: handleTooltipToggle, "aria-expanded": isTooltipOpen, role: "button", tabIndex: 0 }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey }), isTooltipOpen && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss }, { children: tooltipText })), document.body) }))] })) })))] })));
|
45
|
+
var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.singleLineMode, singleLineMode = _e === void 0 ? 'none' : _e, _f = _a.ellipsisMode, ellipsisMode = _f === void 0 ? 'none' : _f, lineLimit = _a.lineLimit, _g = _a.userSelectMode, userSelectMode = _g === void 0 ? 'none' : _g, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _h = _a.textDecorationType, textDecorationType = _h === void 0 ? 'none' : _h, _j = _a.requirementMode, requirementMode = _j === void 0 ? 'none' : _j, _k = _a.bulletPointMode, bulletPointMode = _k === void 0 ? 'none' : _k, wordBreak = _a.wordBreak, letterSpacing = _a.letterSpacing;
|
46
|
+
return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "mobile", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }) })))] })));
|
123
47
|
}
|
124
48
|
var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
|
125
49
|
var theme = _a.theme;
|
@@ -493,9 +417,5 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_39 || (templ
|
|
493
417
|
}
|
494
418
|
});
|
495
419
|
var S_IconWrapper = styled_components_1.default.div(templateObject_40 || (templateObject_40 = __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"])));
|
496
|
-
var S_TooltipWrapper = styled_components_1.default.div(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n ", "\n\n ", ";\n"], ["\n ", "\n\n ", ";\n"])), systemUI_1.TooltipWrapperStyle, function (_a) {
|
497
|
-
var tooltipPositionCss = _a.tooltipPositionCss;
|
498
|
-
return tooltipPositionCss;
|
499
|
-
});
|
500
420
|
exports.default = TextLabel;
|
501
|
-
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
|
421
|
+
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;
|
@@ -13,7 +13,6 @@ import { Checkbox } from './Checkbox';
|
|
13
13
|
import { Chip } from './Chip';
|
14
14
|
import { ContextMenu } from './ContextMenu';
|
15
15
|
import { ContextMenuItem } from './ContextMenuItem';
|
16
|
-
import { DatePicker } from './DatePicker';
|
17
16
|
import { Dropdown } from './Dropdown';
|
18
17
|
import { FloatingActionButton } from './FloatingActionButton';
|
19
18
|
import { HorizontalFormGroup } from './HorizontalFormGroup';
|
@@ -36,4 +35,4 @@ import { TextLabel } from './TextLabel';
|
|
36
35
|
import { UploadIconButton } from './UploadIconButton';
|
37
36
|
import { UploadMainButton } from './UploadMainButton';
|
38
37
|
import { UploadTextButton } from './UploadTextButton';
|
39
|
-
export { BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem,
|
38
|
+
export { BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };
|
@@ -1,6 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.
|
3
|
+
exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = void 0;
|
4
4
|
var BasicButtonGroup_1 = require("./BasicButtonGroup");
|
5
5
|
Object.defineProperty(exports, "BasicButtonGroup", { enumerable: true, get: function () { return BasicButtonGroup_1.BasicButtonGroup; } });
|
6
6
|
var BasicChatListItem_1 = require("./BasicChatListItem");
|
@@ -31,8 +31,6 @@ var ContextMenu_1 = require("./ContextMenu");
|
|
31
31
|
Object.defineProperty(exports, "ContextMenu", { enumerable: true, get: function () { return ContextMenu_1.ContextMenu; } });
|
32
32
|
var ContextMenuItem_1 = require("./ContextMenuItem");
|
33
33
|
Object.defineProperty(exports, "ContextMenuItem", { enumerable: true, get: function () { return ContextMenuItem_1.ContextMenuItem; } });
|
34
|
-
var DatePicker_1 = require("./DatePicker");
|
35
|
-
Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
|
36
34
|
var Dropdown_1 = require("./Dropdown");
|
37
35
|
Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_1.Dropdown; } });
|
38
36
|
var FloatingActionButton_1 = require("./FloatingActionButton");
|
@@ -9,5 +9,5 @@ export { ContainersBox as MPContainersBox } from './layout/LayoutMP/ContainersBo
|
|
9
9
|
export { LayoutMS } from './layout/LayoutMS';
|
10
10
|
export { NavigationContainer as MSNavigationContainer } from './layout/LayoutMS/Containers';
|
11
11
|
export { ContainersBox as MSContainersBox } from './layout/LayoutMS/ContainersBox';
|
12
|
-
export { BasicButtonGroup as M_BasicButtonGroup, BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem,
|
12
|
+
export { BasicButtonGroup as M_BasicButtonGroup, BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, SegmentedButtonGroup as M_SegmentedButtonGroup, Select as M_Select, Slider as M_Slider, StatusBlock as M_StatusBlock, TextButton as M_TextButton, TextField as M_TextField, TextLabel as M_TextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
|
13
13
|
export { AnnotationSheet as M_AnnotationSheet, ContentSheet as M_ContentSheet, MobileBasicModal as M_MobileBasicModal, SectionSheet as M_SectionSheet } from './panels';
|