pds-dev-kit-web-test 2.5.465 → 2.5.467

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.
Files changed (162) hide show
  1. package/dist/src/common/hooks/useTooltip.js +1 -1
  2. package/dist/src/common/styles/colorSet/index.d.ts +2 -2
  3. package/dist/src/common/styles/colorSet/index.js +2 -2
  4. package/dist/src/common/utils/SystemUIPositionGenerator/hoverTypeSystemUICssGenerator.js +1 -1
  5. package/dist/src/desktop/components/BasicButtonGroup/BasicButtonGroup.js +1 -1
  6. package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.d.ts +17 -2
  7. package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.js +35 -5
  8. package/dist/src/sub/DynamicLayout/CompositionRenderer/ComponentBlockMatcher.js +1 -4
  9. package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.d.ts +3 -5
  10. package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js +53 -53
  11. package/dist/src/sub/DynamicLayout/CompositionRenderer/CompositionRenderer.d.ts +6 -0
  12. package/dist/src/sub/DynamicLayout/CompositionRenderer/CompositionRenderer.js +27 -0
  13. package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts +1 -1
  14. package/dist/src/sub/DynamicLayout/DynamicLayout.js +2 -4
  15. package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js +2 -24
  16. package/dist/src/sub/DynamicLayout/components/Section/sectionContext.d.ts +2 -2
  17. package/dist/src/sub/DynamicLayout/components/Section/util/parseSectionBackgroundMediaData.js +1 -3
  18. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/index.d.ts +0 -40
  19. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/index.js +177 -36
  20. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/styles/colorSet/PaletteColor_Dark.json +4 -152
  21. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/styles/colorSet/PaletteColor_light.json +2 -150
  22. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/styles/colorSet/SemanticColor.json +1 -45
  23. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/styles/colorSet/UIColor.json +9 -262
  24. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/styles/colorSet/index.d.ts +0 -593
  25. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/styles/colorSet/ui-type.d.ts +0 -253
  26. package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.d.ts +1 -3
  27. package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.js +3 -5
  28. package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/Icon/Icon.d.ts +1 -2
  29. package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/Icon/Icon.js +2 -9
  30. package/dist/src/sub/DynamicLayout/mock_video_cb.d.ts +1 -0
  31. package/dist/src/sub/DynamicLayout/mock_video_cb.js +5 -4
  32. package/dist/src/sub/DynamicLayout/mocks.d.ts +961 -8
  33. package/dist/src/sub/DynamicLayout/mocks.js +4239 -55
  34. package/dist/src/sub/DynamicLayout/sectionActionTypes.d.ts +4 -4
  35. package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.d.ts +1 -1
  36. package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js +7 -7
  37. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.js +3 -13
  38. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js +2 -18
  39. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.d.ts +4 -10
  40. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js +3 -134
  41. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js +3 -39
  42. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js +7 -31
  43. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/VideoPlayer.js +28 -3
  44. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/helper.d.ts +1 -0
  45. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/helper.js +14 -4
  46. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/types.d.ts +3 -45
  47. package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/group.d.ts +1 -1
  48. package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/replaceUndefinedValues.js +1 -1
  49. package/dist/src/sub/DynamicLayout/sections/CustomSection/types.d.ts +10 -27
  50. package/dist/src/sub/DynamicLayout/sections/CustomSection/types.js +1 -3
  51. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/effectPropParsers/parseEffectPropEntAnim.d.ts +4 -4
  52. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/layoutPropParsers/parseLayoutPropPadding.d.ts +2 -2
  53. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseJsonProperties.d.ts +2 -2
  54. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parsePlacement.d.ts +2 -7
  55. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parsePlacement.js +5 -12
  56. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseProperties.d.ts +2 -2
  57. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts +3 -53
  58. package/dist/src/sub/DynamicLayout/sections/FlexGridCustomSection.d.ts +1 -1
  59. package/dist/src/sub/DynamicLayout/sections/FlexGridCustomSection.js +0 -1
  60. package/dist/src/sub/DynamicLayout/types.d.ts +17 -64
  61. package/package.json +2 -3
  62. package/release-note.md +2 -2
  63. package/dist/src/sub/DynamicLayout/CompositionEditor/CompositionEditor.d.ts +0 -22
  64. package/dist/src/sub/DynamicLayout/CompositionEditor/CompositionEditor.js +0 -1133
  65. package/dist/src/sub/DynamicLayout/CompositionRenderer/CompositionBackground.d.ts +0 -11
  66. package/dist/src/sub/DynamicLayout/CompositionRenderer/CompositionBackground.js +0 -45
  67. package/dist/src/sub/DynamicLayout/CompositionRenderer/createCompositions.d.ts +0 -10
  68. package/dist/src/sub/DynamicLayout/CompositionRenderer/createCompositions.js +0 -79
  69. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/downIcons.d.ts +0 -12
  70. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/downIcons.js +0 -76
  71. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/index.d.ts +0 -4
  72. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/index.js +0 -47
  73. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/leftIcons.d.ts +0 -12
  74. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/leftIcons.js +0 -76
  75. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/rightIcons.d.ts +0 -12
  76. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/rightIcons.js +0 -76
  77. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/upIcons.d.ts +0 -12
  78. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/upIcons.js +0 -76
  79. package/dist/src/sub/DynamicLayout/compositionActionTypes.d.ts +0 -139
  80. package/dist/src/sub/DynamicLayout/compositionActionTypes.js +0 -2
  81. package/dist/src/sub/DynamicLayout/compositionQueryContext.d.ts +0 -8
  82. package/dist/src/sub/DynamicLayout/compositionQueryContext.js +0 -14
  83. package/dist/src/sub/DynamicLayout/mock_componentBlocks.d.ts +0 -776
  84. package/dist/src/sub/DynamicLayout/mock_componentBlocks.js +0 -4236
  85. package/dist/src/sub/DynamicLayout/mock_composition.d.ts +0 -3
  86. package/dist/src/sub/DynamicLayout/mock_composition.js +0 -1607
  87. package/dist/src/sub/DynamicLayout/mock_contentsCarousel.d.ts +0 -1
  88. package/dist/src/sub/DynamicLayout/mock_contentsCarousel.js +0 -1111
  89. package/dist/src/sub/DynamicLayout/mock_contentsList.d.ts +0 -1
  90. package/dist/src/sub/DynamicLayout/mock_contentsList.js +0 -1091
  91. package/dist/src/sub/DynamicLayout/mock_queryData.d.ts +0 -96
  92. package/dist/src/sub/DynamicLayout/mock_queryData.js +0 -2639
  93. package/dist/src/sub/DynamicLayout/mock_slideBanner.d.ts +0 -842
  94. package/dist/src/sub/DynamicLayout/mock_slideBanner.js +0 -854
  95. package/dist/src/sub/DynamicLayout/mock_video.d.ts +0 -368
  96. package/dist/src/sub/DynamicLayout/mock_video.js +0 -371
  97. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarouselCore.d.ts +0 -12
  98. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarouselCore.js +0 -61
  99. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigationNextBtn.d.ts +0 -15
  100. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigationNextBtn.js +0 -69
  101. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigationPrevBtn.d.ts +0 -15
  102. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigationPrevBtn.js +0 -69
  103. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomProgressbar.d.ts +0 -9
  104. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomProgressbar.js +0 -87
  105. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/navigationConfigs.d.ts +0 -4
  106. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/navigationConfigs.js +0 -849
  107. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/progressConfigs.d.ts +0 -43
  108. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/progressConfigs.js +0 -162
  109. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/contentsCarouselUtils.d.ts +0 -39
  110. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/contentsCarouselUtils.js +0 -182
  111. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/hooks/useFlexGridLayout.d.ts +0 -18
  112. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/hooks/useFlexGridLayout.js +0 -229
  113. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/hooks/useSwiper.d.ts +0 -14
  114. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/hooks/useSwiper.js +0 -46
  115. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/index.d.ts +0 -1
  116. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/index.js +0 -8
  117. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/types.d.ts +0 -139
  118. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/types.js +0 -2
  119. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.d.ts +0 -14
  120. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js +0 -206
  121. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsListCore.d.ts +0 -17
  122. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsListCore.js +0 -39
  123. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/CustomPagination.d.ts +0 -10
  124. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/CustomPagination.js +0 -85
  125. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.d.ts +0 -25
  126. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.js +0 -183
  127. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/contentsListUtils.d.ts +0 -29
  128. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/contentsListUtils.js +0 -128
  129. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/hooks/useFlexGridLayout.d.ts +0 -18
  130. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/hooks/useFlexGridLayout.js +0 -229
  131. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/index.d.ts +0 -1
  132. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/index.js +0 -8
  133. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/types.d.ts +0 -67
  134. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/types.js +0 -2
  135. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.d.ts +0 -14
  136. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +0 -151
  137. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBannerCore.d.ts +0 -12
  138. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBannerCore.js +0 -39
  139. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationNextBtn.d.ts +0 -15
  140. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationNextBtn.js +0 -69
  141. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationPrevBtn.d.ts +0 -15
  142. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationPrevBtn.js +0 -69
  143. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomPagination.d.ts +0 -20
  144. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomPagination.js +0 -173
  145. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.d.ts +0 -9
  146. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomProgressbar.js +0 -87
  147. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/navigationConfigs.d.ts +0 -4
  148. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/navigationConfigs.js +0 -849
  149. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/progressConfigs.d.ts +0 -43
  150. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/progressConfigs.js +0 -162
  151. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/hooks/useFlexGridLayout.d.ts +0 -18
  152. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/hooks/useFlexGridLayout.js +0 -229
  153. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/hooks/useSwiper.d.ts +0 -16
  154. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/hooks/useSwiper.js +0 -63
  155. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/index.d.ts +0 -1
  156. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/index.js +0 -8
  157. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/slideBannerUtils.d.ts +0 -46
  158. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/slideBannerUtils.js +0 -186
  159. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/types.d.ts +0 -163
  160. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/types.js +0 -2
  161. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseCompositionPlacement.d.ts +0 -14
  162. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseCompositionPlacement.js +0 -26
@@ -1,128 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.getCustomPaginationPropKey = exports.parsePaginationStyleProp = exports.parseGridContentProp = exports.parseGridStyleProp = void 0;
8
- var styled_components_1 = require("styled-components");
9
- function getItemSpacingPropStyleValues(value) {
10
- switch (value) {
11
- case 'NARROW': {
12
- return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n grid-column-gap: 8px;\n "], ["\n grid-column-gap: 8px;\n "])));
13
- }
14
- case 'NORMAL': {
15
- return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n grid-column-gap: 24px;\n "], ["\n grid-column-gap: 24px;\n "])));
16
- }
17
- case 'WIDE': {
18
- return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n grid-column-gap: 36px;\n "], ["\n grid-column-gap: 36px;\n "])));
19
- }
20
- default: {
21
- return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n grid-column-gap: 24px;\n "], ["\n grid-column-gap: 24px;\n "])));
22
- }
23
- }
24
- }
25
- function getItemLineHeightPropStyleValues(value) {
26
- return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n grid-row-gap: ", "px;\n "], ["\n grid-row-gap: ", "px;\n "])), value);
27
- }
28
- function getItemHeightFitContentPropStyleValues(value) {
29
- return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n overflow-y: ", ";\n "], ["\n overflow-y: ", ";\n "])), value ? 'visible' : 'auto');
30
- }
31
- function parseStylePropertyStyles(key, value) {
32
- switch (key) {
33
- case 'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING':
34
- return getItemSpacingPropStyleValues(value);
35
- case 'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT':
36
- return getItemLineHeightPropStyleValues(value);
37
- case 'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT':
38
- return getItemHeightFitContentPropStyleValues(value);
39
- case 'CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL':
40
- break;
41
- }
42
- return undefined;
43
- }
44
- function getColumnsPropStyleValues(value, rows) {
45
- return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n grid-template-columns: repeat(", ", 1fr);\n grid-template-rows: repeat(", ", 1fr);\n "], ["\n grid-template-columns: repeat(", ", 1fr);\n grid-template-rows: repeat(", ", 1fr);\n "])), value, rows);
46
- }
47
- function parseContentPropertyStyles(key, value, rows) {
48
- switch (key) {
49
- case 'CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS':
50
- return getColumnsPropStyleValues(value, rows);
51
- }
52
- return undefined;
53
- }
54
- function parseGridStyleProp(_a) {
55
- var props = _a.props, device = _a.device;
56
- var availableSpecCodes = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
57
- return availableSpecCodes.reduce(function (acc, currentKey) {
58
- var keyWithDevice = device === 'DESKTOP' ? currentKey : "".concat(currentKey, ":MOBILE");
59
- var keyWithHover = "".concat(keyWithDevice.toString(), ":HOVER");
60
- var value = props[keyWithDevice];
61
- var hoverValue = props[keyWithHover];
62
- var styles = parseStylePropertyStyles(currentKey, value);
63
- var hoverStyles = parseStylePropertyStyles(currentKey, hoverValue !== null && hoverValue !== void 0 ? hoverValue : value);
64
- return {
65
- stylePropCss: (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), acc.stylePropCss, styles),
66
- hoverStylePropCss: (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), acc.hoverStylePropCss, hoverStyles)
67
- };
68
- }, {
69
- stylePropCss: (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""]))),
70
- hoverStylePropCss: (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""])))
71
- });
72
- }
73
- exports.parseGridStyleProp = parseGridStyleProp;
74
- function parseGridContentProp(_a) {
75
- var props = _a.props;
76
- var availableSpecCodes = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
77
- var columns = props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS || 1;
78
- var displayCounts = props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS || 1;
79
- var rows = Math.ceil(displayCounts / columns);
80
- return availableSpecCodes.reduce(function (acc, currentKey) {
81
- var value = props[currentKey];
82
- var styles = parseContentPropertyStyles(currentKey, value, rows);
83
- return {
84
- contentPropCss: (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), acc.contentPropCss, styles)
85
- };
86
- }, {
87
- contentPropCss: (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])))
88
- });
89
- }
90
- exports.parseGridContentProp = parseGridContentProp;
91
- function parsePaginationStyleProp(_a) {
92
- var props = _a.props, device = _a.device;
93
- var normalStyle = {};
94
- var hoverStyle = {};
95
- var baseKeys = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
96
- baseKeys.forEach(function (baseKey) {
97
- var _a, _b;
98
- var customNavKey = getCustomPaginationPropKey(baseKey);
99
- if (customNavKey) {
100
- var deviceKey = device === 'DESKTOP' ? baseKey : "".concat(baseKey, ":MOBILE");
101
- var hoverKey = "".concat(deviceKey, ":HOVER");
102
- var normalValue = props[deviceKey];
103
- var hoverValue = props[hoverKey];
104
- if (normalValue !== undefined) {
105
- Object.assign(normalStyle, (_a = {}, _a[customNavKey] = normalValue, _a));
106
- }
107
- Object.assign(hoverStyle, (_b = {}, _b[customNavKey] = hoverValue !== null && hoverValue !== void 0 ? hoverValue : normalValue, _b));
108
- }
109
- });
110
- return {
111
- normalStyle: normalStyle,
112
- hoverStyle: hoverStyle
113
- };
114
- }
115
- exports.parsePaginationStyleProp = parsePaginationStyleProp;
116
- function getCustomPaginationPropKey(key) {
117
- var baseKey = key.split(':')[0];
118
- var keyMapping = {
119
- CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE: 'type',
120
- CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE: 'size',
121
- CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION: 'location',
122
- CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR: 'primaryColor',
123
- CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR: 'secondaryColor'
124
- };
125
- return keyMapping[baseKey] || null;
126
- }
127
- exports.getCustomPaginationPropKey = getCustomPaginationPropKey;
128
- 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;
@@ -1,18 +0,0 @@
1
- /// <reference types="react" />
2
- import type { ContentsListElementsProps } from '../ContentsList';
3
- import type { CSSProperties } from 'styled-components';
4
- export declare const useFlexGridLayout: ({ components }: {
5
- components: ContentsListElementsProps[];
6
- }) => {
7
- layoutRef: import("react").MutableRefObject<HTMLDivElement | null>;
8
- positionRefs: import("react").MutableRefObject<Record<string, HTMLDivElement | null>>;
9
- ccbInset: {
10
- top: string;
11
- right: string;
12
- bottom: string;
13
- left: string;
14
- };
15
- componentGroups: Record<string, ContentsListElementsProps[]>;
16
- getPositionStyle: (position: string, ccbInset: Record<string, string>) => CSSProperties;
17
- getComponentGroupLayout: (components: ContentsListElementsProps[], position: string) => CSSProperties;
18
- };
@@ -1,229 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.useFlexGridLayout = void 0;
15
- var react_1 = require("react");
16
- var useFlexGridLayout = function (_a) {
17
- var components = _a.components;
18
- var _b = (0, react_1.useState)({ top: 0, right: 0, bottom: 0, left: 0 }), groupSizes = _b[0], setGroupSizes = _b[1];
19
- var _c = (0, react_1.useState)({ width: 0, height: 0 }), layoutSize = _c[0], setLayoutSize = _c[1];
20
- var layoutRef = (0, react_1.useRef)(null);
21
- var positionRefs = (0, react_1.useRef)({});
22
- // 위치별로 컴포넌트 그룹화
23
- var getComponentsByPosition = function () {
24
- var groups = {};
25
- components.forEach(function (component) {
26
- if (!groups[component.position]) {
27
- groups[component.position] = [];
28
- }
29
- groups[component.position].push(component);
30
- });
31
- return groups;
32
- };
33
- var componentGroups = getComponentsByPosition();
34
- var GAP = 8;
35
- // 위치가 어느 방향인지 판단
36
- var getPositionDirection = function (position) {
37
- var directions = {
38
- OUTSET1: 'top',
39
- OUTSET2: 'top',
40
- OUTSET3: 'top',
41
- OUTSET4: 'right',
42
- OUTSET5: 'right',
43
- OUTSET6: 'right',
44
- OUTSET7: 'bottom',
45
- OUTSET8: 'bottom',
46
- OUTSET9: 'bottom',
47
- OUTSET10: 'left',
48
- OUTSET11: 'left',
49
- OUTSET12: 'left',
50
- // INSET은 CCB 내부이므로 방향 개념 없음
51
- INSET1: 'none',
52
- INSET2: 'none',
53
- INSET3: 'none',
54
- INSET4: 'none',
55
- INSET5: 'none',
56
- INSET6: 'none',
57
- INSET7: 'none',
58
- INSET8: 'none'
59
- };
60
- return directions[position];
61
- };
62
- // 위치에 따른 스타일 결정 (CCB 크기를 고려)
63
- var getPositionStyle = function (position, ccbInset) {
64
- var base = {
65
- position: 'absolute',
66
- display: 'flex',
67
- alignItems: 'center',
68
- justifyContent: 'center'
69
- };
70
- // CCB의 중앙 위치 계산
71
- var ccbTop = parseFloat(ccbInset.top) || 0;
72
- var ccbRight = parseFloat(ccbInset.right) || 0;
73
- var ccbBottom = parseFloat(ccbInset.bottom) || 0;
74
- var ccbLeft = parseFloat(ccbInset.left) || 0;
75
- // CCB의 실제 크기와 중앙 위치 계산
76
- var ccbWidth = layoutSize.width - ccbLeft - ccbRight;
77
- var ccbHeight = layoutSize.height - ccbTop - ccbBottom;
78
- var ccbCenterX = ccbLeft + ccbWidth / 2;
79
- var ccbCenterY = ccbTop + ccbHeight / 2;
80
- var positions = {
81
- OUTSET1: { top: 0, left: ccbLeft },
82
- OUTSET2: { top: 0, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
83
- OUTSET3: { top: 0, right: ccbRight },
84
- OUTSET4: { top: ccbTop, right: 0 },
85
- OUTSET5: { top: "".concat(ccbCenterY, "px"), right: 0, transform: 'translateY(-50%)' },
86
- OUTSET6: { bottom: ccbBottom, right: 0 },
87
- OUTSET7: { bottom: 0, right: ccbRight },
88
- OUTSET8: { bottom: 0, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
89
- OUTSET9: { bottom: 0, left: ccbLeft },
90
- OUTSET10: { bottom: ccbBottom, left: 0 },
91
- OUTSET11: { top: "".concat(ccbCenterY, "px"), left: 0, transform: 'translateY(-50%)' },
92
- OUTSET12: { top: ccbTop, left: 0 },
93
- INSET1: { top: ccbTop + GAP, left: ccbLeft + GAP },
94
- INSET2: { top: ccbTop + GAP, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
95
- INSET3: { top: ccbTop + GAP, right: ccbRight + GAP },
96
- INSET4: { top: "".concat(ccbCenterY, "px"), right: ccbRight + GAP, transform: 'translateY(-50%)' },
97
- INSET5: { bottom: ccbBottom + GAP, right: ccbRight + GAP },
98
- INSET6: {
99
- bottom: ccbBottom + GAP,
100
- left: "".concat(ccbCenterX, "px"),
101
- transform: 'translateX(-50%)'
102
- },
103
- INSET7: { bottom: ccbBottom + GAP, left: ccbLeft + GAP },
104
- INSET8: { top: "".concat(ccbCenterY, "px"), left: ccbLeft + GAP, transform: 'translateY(-50%)' }
105
- };
106
- return __assign(__assign({}, base), positions[position]);
107
- };
108
- // 컴포넌트 그룹 레이아웃
109
- var getComponentGroupLayout = function (components, position) {
110
- var count = components.length;
111
- var horizontals = [
112
- 'OUTSET1',
113
- 'OUTSET2',
114
- 'OUTSET3',
115
- 'OUTSET7',
116
- 'OUTSET8',
117
- 'OUTSET9',
118
- 'INSET1',
119
- 'INSET2',
120
- 'INSET3',
121
- 'INSET5',
122
- 'INSET6',
123
- 'INSET7'
124
- ];
125
- var isHorizontal = horizontals.includes(position);
126
- if (count === 1) {
127
- return { display: 'block' };
128
- }
129
- return {
130
- display: 'flex',
131
- flexDirection: isHorizontal ? 'row' : 'column',
132
- gap: '8px',
133
- alignItems: 'center'
134
- };
135
- };
136
- // ccbInset 계산
137
- var ccbInset = (0, react_1.useMemo)(function () {
138
- return {
139
- top: groupSizes.top > 0 ? "".concat(groupSizes.top + GAP, "px") : '0',
140
- right: groupSizes.right > 0 ? "".concat(groupSizes.right + GAP, "px") : '0',
141
- bottom: groupSizes.bottom > 0 ? "".concat(groupSizes.bottom + GAP, "px") : '0',
142
- left: groupSizes.left > 0 ? "".concat(groupSizes.left + GAP, "px") : '0'
143
- };
144
- }, [groupSizes]);
145
- // 레이아웃 크기 측정
146
- (0, react_1.useEffect)(function () {
147
- var measureLayout = function () {
148
- if (layoutRef.current) {
149
- var _a = layoutRef.current.getBoundingClientRect(), width_1 = _a.width, height_1 = _a.height;
150
- setLayoutSize(function (prevSize) {
151
- if (prevSize.width !== width_1 || prevSize.height !== height_1) {
152
- return { width: width_1, height: height_1 };
153
- }
154
- return prevSize;
155
- });
156
- }
157
- };
158
- measureLayout();
159
- var resizeObserver = new ResizeObserver(measureLayout);
160
- if (layoutRef.current) {
161
- resizeObserver.observe(layoutRef.current);
162
- }
163
- return function () {
164
- resizeObserver.disconnect();
165
- };
166
- }, []);
167
- // 컴포넌트 그룹의 크기 측정
168
- (0, react_1.useEffect)(function () {
169
- var measureGroups = function () {
170
- var newSizes = {
171
- top: 0,
172
- right: 0,
173
- bottom: 0,
174
- left: 0
175
- };
176
- Object.entries(positionRefs.current).forEach(function (_a) {
177
- var position = _a[0], ref = _a[1];
178
- if (ref && ref.offsetHeight && ref.offsetWidth) {
179
- var direction = getPositionDirection(position);
180
- // INSET은 CCB 크기 계산에 영향을 주지 않음
181
- if (direction !== 'none') {
182
- var size = direction === 'top' || direction === 'bottom' ? ref.offsetHeight : ref.offsetWidth;
183
- newSizes[direction] = Math.max(newSizes[direction], size);
184
- }
185
- }
186
- });
187
- // 실제로 크기가 변경되었을 때만 업데이트
188
- setGroupSizes(function (prevSizes) {
189
- if (prevSizes.top !== newSizes.top ||
190
- prevSizes.right !== newSizes.right ||
191
- prevSizes.bottom !== newSizes.bottom ||
192
- prevSizes.left !== newSizes.left) {
193
- return newSizes;
194
- }
195
- return prevSizes;
196
- });
197
- };
198
- // 초기 측정을 위한 타이머
199
- var timeoutId = setTimeout(function () {
200
- measureGroups();
201
- }, 0);
202
- // ResizeObserver 설정
203
- var resizeObserver = new ResizeObserver(function (entries) {
204
- // 크기 변경이 실제로 일어났을 때만 측정
205
- if (entries.length > 0) {
206
- measureGroups();
207
- }
208
- });
209
- // 현재 존재하는 ref들에 observer 연결
210
- Object.values(positionRefs.current).forEach(function (ref) {
211
- if (ref) {
212
- resizeObserver.observe(ref);
213
- }
214
- });
215
- return function () {
216
- clearTimeout(timeoutId);
217
- resizeObserver.disconnect();
218
- };
219
- }, [componentGroups]);
220
- return {
221
- layoutRef: layoutRef,
222
- positionRefs: positionRefs,
223
- ccbInset: ccbInset,
224
- componentGroups: componentGroups,
225
- getPositionStyle: getPositionStyle,
226
- getComponentGroupLayout: getComponentGroupLayout
227
- };
228
- };
229
- exports.useFlexGridLayout = useFlexGridLayout;
@@ -1 +0,0 @@
1
- export { default as ContentsList } from './ContentsList';
@@ -1,8 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ContentsList = void 0;
7
- var ContentsList_1 = require("./ContentsList");
8
- Object.defineProperty(exports, "ContentsList", { enumerable: true, get: function () { return __importDefault(ContentsList_1).default; } });
@@ -1,67 +0,0 @@
1
- import type { NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
2
- export type ContentsListPropsKeys = keyof CB_STYLE_PROP_CONTENTSLIST_SPECS;
3
- export type OUTSET_POSTIION = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12';
4
- export type INSET_POSTIION = 'INSET1' | 'INSET2' | 'INSET3' | 'INSET4' | 'INSET5' | 'INSET6' | 'INSET7' | 'INSET8';
5
- export type CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE = 'DESIGN1' | 'DESIGN2' | null;
6
- export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING_TYPE = 'WIDE' | 'NORMAL' | 'NARROW' | null;
7
- export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT_TYPE = NUMBER_INTEGER | null;
8
- export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT_TYPE = boolean | null;
9
- export type CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL_TYPE = boolean | null;
10
- export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | null;
11
- export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE = OUTSET_POSTIION | INSET_POSTIION;
12
- export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE' | null;
13
- export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR = string;
14
- export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR = string;
15
- export type CB_STYLE_PROP_CONTENTSLIST_SPECS_BASE = {
16
- CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE: CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE;
17
- CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING: CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING_TYPE;
18
- CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT: CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT_TYPE;
19
- CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT: CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT_TYPE;
20
- CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL: CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL_TYPE;
21
- CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
22
- CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE;
23
- CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
24
- CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
25
- CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
26
- };
27
- export type CB_STYLE_PROP_CONTENTSLIST_SPECS = CB_STYLE_PROP_CONTENTSLIST_SPECS_BASE & {
28
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE;
29
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE;
30
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE;
31
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING_TYPE;
32
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING_TYPE;
33
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING_TYPE;
34
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT_TYPE;
35
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT_TYPE;
36
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT_TYPE;
37
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT_TYPE;
38
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT_TYPE;
39
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT_TYPE;
40
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL_TYPE;
41
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL_TYPE;
42
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL_TYPE;
43
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
44
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
45
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
46
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE;
47
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE;
48
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE;
49
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
50
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
51
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE;
52
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
53
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
54
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR;
55
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
56
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
57
- 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR;
58
- };
59
- export interface CustomPaginationProps {
60
- current?: number;
61
- total?: number;
62
- type?: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
63
- location?: OUTSET_POSTIION | INSET_POSTIION;
64
- size?: 'SMALL' | 'MEDIUM' | 'LARGE';
65
- primaryColor?: string;
66
- secondaryColor?: string;
67
- }
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,14 +0,0 @@
1
- /// <reference types="react" />
2
- import type { INSET_POSTIION, OUTSET_POSTIION } from './types';
3
- import type { CB_SLIDEBANNER } from '../../../../../../../DynamicLayout/sections/CustomSection/types';
4
- import type { CB_SLIDEBANNER_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
5
- type Props = CB_SLIDEBANNER_PROPERTIES_TYPE & IndexForIntersection & {
6
- compositions: CB_SLIDEBANNER['compositions'];
7
- };
8
- type ComponentType = 'PREV' | 'NEXT' | 'PAGINATION' | 'PROGRESSBAR';
9
- export type SlideBannerElementsProps = {
10
- type: ComponentType;
11
- position: OUTSET_POSTIION | INSET_POSTIION;
12
- };
13
- declare function SlideBanner(props: Props): JSX.Element;
14
- export default SlideBanner;
@@ -1,151 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- var __assign = (this && this.__assign) || function () {
7
- __assign = Object.assign || function(t) {
8
- for (var s, i = 1, n = arguments.length; i < n; i++) {
9
- s = arguments[i];
10
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
- t[p] = s[p];
12
- }
13
- return t;
14
- };
15
- return __assign.apply(this, arguments);
16
- };
17
- var __importDefault = (this && this.__importDefault) || function (mod) {
18
- return (mod && mod.__esModule) ? mod : { "default": mod };
19
- };
20
- Object.defineProperty(exports, "__esModule", { value: true });
21
- var jsx_runtime_1 = require("react/jsx-runtime");
22
- var react_1 = require("react");
23
- var createCompositions_1 = require("../../../../../../../DynamicLayout/CompositionRenderer/createCompositions");
24
- var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
25
- var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
26
- var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
27
- var styled_components_1 = __importDefault(require("styled-components"));
28
- var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
29
- var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
30
- var CustomNavigationNextBtn_1 = require("./components/CustomNavigationNextBtn");
31
- var CustomNavigationPrevBtn_1 = require("./components/CustomNavigationPrevBtn");
32
- var CustomPagination_1 = require("./components/CustomPagination");
33
- var CustomProgressbar_1 = require("./components/CustomProgressbar");
34
- var useFlexGridLayout_1 = require("./hooks/useFlexGridLayout");
35
- var useSwiper_1 = require("./hooks/useSwiper");
36
- var SlideBannerCore_1 = __importDefault(require("./SlideBannerCore"));
37
- var slideBannerUtils_1 = require("./slideBannerUtils");
38
- var createComponent = function (type, getDesignType, getLocation) {
39
- return function (normalStyle, hoverStyle, isHovered) {
40
- var normalDesign = getDesignType(normalStyle);
41
- var hoverDesign = getDesignType(hoverStyle);
42
- if (isHovered && hoverDesign === 'NONE')
43
- return undefined;
44
- if (normalDesign === 'NONE')
45
- return undefined;
46
- return {
47
- type: type,
48
- position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle)
49
- };
50
- };
51
- };
52
- function SlideBanner(props) {
53
- var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode, queryData = _a.queryData;
54
- var index = props.index, _b = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_STYLE_PROP_SLIDEBANNER = props.CB_STYLE_PROP_SLIDEBANNER, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
55
- var compositions = props.compositions;
56
- var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, effect = _c.effect;
57
- var _d = (0, slideBannerUtils_1.parseSlideBannerStyleToSlideBannerCoreProp)({
58
- props: CB_STYLE_PROP_SLIDEBANNER,
59
- device: device
60
- }), slideBannerNormalStyle = _d.normalStyle, slideBannerHoverStyle = _d.hoverStyle;
61
- var _e = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomPaginationProp)({
62
- props: CB_STYLE_PROP_SLIDEBANNER,
63
- device: device
64
- }), customPaginationNormalStyle = _e.normalStyle, customPaginationHoverStyle = _e.hoverStyle;
65
- var _f = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomNavigationProp)({
66
- props: CB_STYLE_PROP_SLIDEBANNER,
67
- device: device
68
- }), customNavigationNormalStyle = _f.normalStyle, customNavigationHoverStyle = _f.hoverStyle;
69
- var _g = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomProgressbarProp)({
70
- props: CB_STYLE_PROP_SLIDEBANNER,
71
- device: device
72
- }), customProgressbarNormalStyle = _g.normalStyle, customProgressbarHoverStyle = _g.hoverStyle;
73
- var _h = (0, useSwiper_1.useSwiper)(), swiperRef = _h.swiperRef, progressRef = _h.progressRef, leftTimeMsRef = _h.leftTimeMsRef, currentSlide = _h.currentSlide, isBeginning = _h.isBeginning, isEnd = _h.isEnd, onSwiper = _h.onSwiper, onSlideChangeTransitionEnd = _h.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _h.onAutoplayTimeLeft, onClickBullet = _h.onClickBullet, onClickPrevBtn = _h.onClickPrevBtn, onClickNextBtn = _h.onClickNextBtn;
74
- var _j = (0, react_1.useState)(false), isHovered = _j[0], setIsHovered = _j[1];
75
- var loop = isHovered ? slideBannerNormalStyle.loop : slideBannerHoverStyle.loop;
76
- // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
77
- var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
78
- // NOTE: EFFECT와 관련된 함수들입니다.
79
- var cbRef = (0, react_1.useRef)(null);
80
- var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
81
- index
82
- ]);
83
- var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
84
- var effectCssProperties = isVisible ? effect : {};
85
- var isNoneEffectType = device === 'DESKTOP'
86
- ? CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE === 'NONE'
87
- : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
88
- var hasEffect = !isNoneEffectType;
89
- var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
90
- var createPrevButton = createComponent('PREV', function (style) { return style.prevBtnType || 'NONE'; }, function (style) { return style.prevBtnLocation || 'OUTSET1'; });
91
- var createNextButton = createComponent('NEXT', function (style) { return style.nextBtnType || 'NONE'; }, function (style) { return style.nextBtnLocation || 'OUTSET1'; });
92
- var createPagination = createComponent('PAGINATION', function (style) { return style.type || 'NONE'; }, function (style) { return style.location || 'OUTSET1'; });
93
- var components = [
94
- createPrevButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
95
- createNextButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
96
- createPagination(customPaginationNormalStyle, customPaginationHoverStyle, isHovered),
97
- { type: 'PROGRESSBAR', position: 'INSET5' }
98
- ].filter(function (component) { return component !== undefined; });
99
- var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs, ccbInset = _k.ccbInset, componentGroups = _k.componentGroups, getPositionStyle = _k.getPositionStyle, getComponentGroupLayout = _k.getComponentGroupLayout;
100
- var renderElements = function (component) {
101
- var _a;
102
- switch (component.type) {
103
- case 'PREV':
104
- return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, styles: isHovered ? customNavigationHoverStyle : customNavigationNormalStyle, onClick: onClickPrevBtn }));
105
- case 'NEXT':
106
- return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: isHovered ? customNavigationHoverStyle : customNavigationNormalStyle, onClick: onClickNextBtn }));
107
- case 'PAGINATION':
108
- return ((0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? customPaginationHoverStyle : customPaginationNormalStyle, current: currentSlide, isPrevBtnDisabled: loop ? false : isBeginning, isNextBtnDisabled: loop ? false : isEnd, total: ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slides.length) || 0, onBulletClick: onClickBullet, onPrevBtnClick: onClickPrevBtn, onNextBtnClick: onClickNextBtn }));
109
- case 'PROGRESSBAR':
110
- return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
111
- default:
112
- return null;
113
- }
114
- };
115
- return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsxs)(S_SwiperLayout, __assign({ className: "cb-slidebanner-layout-box", ref: layoutRef }, { children: [(0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-slidebanner-wrapper", ccbInset: ccbInset, customStyle: isHovered ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle : slideBannerNormalStyle === null || slideBannerNormalStyle === void 0 ? void 0 : slideBannerNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(SlideBannerCore_1.default, __assign({ ref: swiperRef, className: "cb-slidebanner", onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: 1, styles: isHovered ? slideBannerHoverStyle : slideBannerNormalStyle }, { children: (0, createCompositions_1.createCompositions)({
116
- valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
117
- queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
118
- limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
119
- queryData: queryData,
120
- compositions: compositions
121
- }) })) })), Object.entries(componentGroups).map(function (_a) {
122
- var position = _a[0], groupComponents = _a[1];
123
- return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-group", ref: function (el) {
124
- if (el) {
125
- positionRefs.current[position] = el;
126
- }
127
- else {
128
- delete positionRefs.current[position];
129
- }
130
- }, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { zIndex: 3 }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) { return renderElements(component); }) })) }), position));
131
- })] })) })) })));
132
- }
133
- var S_SwiperLayout = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n margin: 0 auto;\n position: relative;\n width: 100%;\n"], ["\n height: 100%;\n margin: 0 auto;\n position: relative;\n width: 100%;\n"])));
134
- var S_SwiperWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n bottom: ", ";\n left: ", ";\n position: absolute;\n right: ", ";\n top: ", ";\n ", ";\n"], ["\n bottom: ", ";\n left: ", ";\n position: absolute;\n right: ", ";\n top: ", ";\n ", ";\n"])), function (_a) {
135
- var ccbInset = _a.ccbInset;
136
- return ccbInset.bottom;
137
- }, function (_a) {
138
- var ccbInset = _a.ccbInset;
139
- return ccbInset.left;
140
- }, function (_a) {
141
- var ccbInset = _a.ccbInset;
142
- return ccbInset.right;
143
- }, function (_a) {
144
- var ccbInset = _a.ccbInset;
145
- return ccbInset.top;
146
- }, function (_a) {
147
- var customStyle = _a.customStyle;
148
- return customStyle;
149
- });
150
- exports.default = SlideBanner;
151
- var templateObject_1, templateObject_2;
@@ -1,12 +0,0 @@
1
- /// <reference types="react" />
2
- import 'swiper/modules/navigation/navigation.min.css';
3
- import 'swiper/swiper-bundle.css';
4
- import type { CoreSlideBannerProps } from './types';
5
- import type { SwiperProps, SwiperRef } from 'swiper/react/swiper-react.js';
6
- export interface SlideBannerCoreProps extends SwiperProps {
7
- styles: CoreSlideBannerProps;
8
- slidesPerView?: SwiperProps['slidesPerView'];
9
- children?: React.ReactNode[] | JSX.Element;
10
- }
11
- declare const SlideBannerCore: import("react").ForwardRefExoticComponent<SlideBannerCoreProps & import("react").RefAttributes<SwiperRef>>;
12
- export default SlideBannerCore;