pds-dev-kit-web-test 2.7.156 → 2.7.159
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/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.d.ts +3 -1
- package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.js +6 -6
- package/dist/src/sub/DynamicLayout/mock_contentsCarousel.js +3 -3
- package/dist/src/sub/DynamicLayout/mocks.js +5 -5
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js +13 -3
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigationNextBtn.d.ts +2 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigationNextBtn.js +2 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigationPrevBtn.d.ts +2 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigationPrevBtn.js +2 -2
- package/package.json +1 -1
package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.d.ts
CHANGED
|
@@ -6,12 +6,14 @@ export type IconButtonProps = {
|
|
|
6
6
|
baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
|
|
7
7
|
baseColorKey?: UiColors;
|
|
8
8
|
overrideBaseColorHex?: string;
|
|
9
|
+
overrideBaseColorHexHover?: string;
|
|
9
10
|
borderColorKey?: UiColors;
|
|
10
11
|
iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
|
|
11
12
|
iconFillType?: 'fill' | 'line';
|
|
12
13
|
iconName: PDSIconType;
|
|
13
14
|
iconColorKey?: UiColors;
|
|
14
15
|
overrideIconColorHex?: string;
|
|
16
|
+
overrideIconColorHexHover?: string;
|
|
15
17
|
shadow?: 'hidden' | 'visible';
|
|
16
18
|
colorTheme?: 'none' | 'line1' | 'line2';
|
|
17
19
|
type?: 'submit' | 'reset' | 'button';
|
|
@@ -22,5 +24,5 @@ export type IconButtonProps = {
|
|
|
22
24
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
23
25
|
onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
24
26
|
};
|
|
25
|
-
declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, overrideBaseColorHex, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, overrideIconColorHex, shadow, colorTheme, type, state, tabIndex, useDefaultHoverStyle, useDefaultActiveStyle, onClick, onMouseDown }: IconButtonProps): JSX.Element;
|
|
27
|
+
declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, overrideBaseColorHex, overrideBaseColorHexHover, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, overrideIconColorHex, overrideIconColorHexHover, shadow, colorTheme, type, state, tabIndex, useDefaultHoverStyle, useDefaultActiveStyle, onClick, onMouseDown }: IconButtonProps): JSX.Element;
|
|
26
28
|
export default IconButton;
|
|
@@ -39,10 +39,12 @@ 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");
|
|
42
43
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
43
44
|
var hybrid_1 = require("../../hybrid");
|
|
44
45
|
function IconButton(_a) {
|
|
45
|
-
var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, overrideBaseColorHex = _a.overrideBaseColorHex, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, iconColorKey = _a.iconColorKey, overrideIconColorHex = _a.overrideIconColorHex, _g = _a.shadow, shadow = _g === void 0 ? 'hidden' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, tabIndex = _a.tabIndex, _l = _a.useDefaultHoverStyle, useDefaultHoverStyle = _l === void 0 ? true : _l, _m = _a.useDefaultActiveStyle, useDefaultActiveStyle = _m === void 0 ? true : _m, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
|
|
46
|
+
var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, overrideBaseColorHex = _a.overrideBaseColorHex, overrideBaseColorHexHover = _a.overrideBaseColorHexHover, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, iconColorKey = _a.iconColorKey, overrideIconColorHex = _a.overrideIconColorHex, overrideIconColorHexHover = _a.overrideIconColorHexHover, _g = _a.shadow, shadow = _g === void 0 ? 'hidden' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, tabIndex = _a.tabIndex, _l = _a.useDefaultHoverStyle, useDefaultHoverStyle = _l === void 0 ? true : _l, _m = _a.useDefaultActiveStyle, useDefaultActiveStyle = _m === void 0 ? true : _m, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
|
|
47
|
+
var _o = (0, react_1.useState)(false), isHovered = _o[0], setIsHovered = _o[1];
|
|
46
48
|
var handleClick = function (e) {
|
|
47
49
|
if (onClick) {
|
|
48
50
|
onClick(e);
|
|
@@ -76,7 +78,7 @@ function IconButton(_a) {
|
|
|
76
78
|
}
|
|
77
79
|
return iconStateColorObj[fillType];
|
|
78
80
|
};
|
|
79
|
-
return ((0, jsx_runtime_1.jsx)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, overrideBaseColorHex: overrideBaseColorHex, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, useDefaultHoverStyle: useDefaultHoverStyle, useDefaultActiveStyle: useDefaultActiveStyle, onClick: handleClick, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), overrideColorHex: overrideIconColorHex, fillType: iconFillType }) })));
|
|
81
|
+
return ((0, jsx_runtime_1.jsx)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, overrideBaseColorHex: isHovered ? overrideBaseColorHexHover : overrideBaseColorHex, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, useDefaultHoverStyle: useDefaultHoverStyle, useDefaultActiveStyle: useDefaultActiveStyle, onClick: handleClick, onMouseDown: handleMouseDown, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), overrideColorHex: isHovered ? overrideIconColorHexHover : overrideIconColorHex, fillType: iconFillType }) })));
|
|
80
82
|
}
|
|
81
83
|
var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
82
84
|
var theme = _a.theme, baseColorKey = _a.baseColorKey;
|
|
@@ -90,11 +92,9 @@ var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 =
|
|
|
90
92
|
return overrideBaseColorHex;
|
|
91
93
|
return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
|
|
92
94
|
}, function (_a) {
|
|
93
|
-
var useDefaultHoverStyle = _a.useDefaultHoverStyle, theme = _a.theme
|
|
95
|
+
var useDefaultHoverStyle = _a.useDefaultHoverStyle, theme = _a.theme;
|
|
94
96
|
return useDefaultHoverStyle &&
|
|
95
|
-
"\n &:hover:enabled {\n ".concat(
|
|
96
|
-
? ''
|
|
97
|
-
: "background-image: linear-gradient(\n to top,\n ".concat(theme.ui_cpnt_button_fill_on_base_hover, ",\n ").concat(theme.ui_cpnt_button_fill_on_base_hover, "\n );"), "\n }\n ");
|
|
97
|
+
"\n &:hover:enabled {\n background-image: linear-gradient(\n to top,\n ".concat(theme.ui_cpnt_button_fill_on_base_hover, ",\n ").concat(theme.ui_cpnt_button_fill_on_base_hover, "\n );\n }\n ");
|
|
98
98
|
}, function (_a) {
|
|
99
99
|
var useDefaultActiveStyle = _a.useDefaultActiveStyle, theme = _a.theme, baseColorKey = _a.baseColorKey;
|
|
100
100
|
return useDefaultActiveStyle &&
|
|
@@ -252,7 +252,7 @@ exports.SAMPLE_CONTENTSCAROUSEL_CB = {
|
|
|
252
252
|
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE': null,
|
|
253
253
|
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE:HOVER': null,
|
|
254
254
|
CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR: '#5CFF00FF',
|
|
255
|
-
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:HOVER':
|
|
255
|
+
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:HOVER': '#0040ffff',
|
|
256
256
|
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE': null,
|
|
257
257
|
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE:HOVER': null,
|
|
258
258
|
CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE: 'DESIGN7',
|
|
@@ -268,11 +268,11 @@ exports.SAMPLE_CONTENTSCAROUSEL_CB = {
|
|
|
268
268
|
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION:MOBILE': null,
|
|
269
269
|
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION:MOBILE:HOVER': null,
|
|
270
270
|
CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR: '#FF1FFFFF',
|
|
271
|
-
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:HOVER':
|
|
271
|
+
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:HOVER': '#fa0707ff',
|
|
272
272
|
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:MOBILE': null,
|
|
273
273
|
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:MOBILE:HOVER': null,
|
|
274
274
|
CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR: '#5CFF00FF',
|
|
275
|
-
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:HOVER':
|
|
275
|
+
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:HOVER': '#380404ff',
|
|
276
276
|
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:MOBILE': null,
|
|
277
277
|
'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:MOBILE:HOVER': null,
|
|
278
278
|
CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR: 'DESIGN2',
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.MOCK_SECTIONS = void 0;
|
|
4
4
|
var mock_contentsCarousel_1 = require("./mock_contentsCarousel");
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
require("./mock_contentsList");
|
|
6
|
+
require("./mock_slideBanner");
|
|
7
7
|
exports.MOCK_SECTIONS = [
|
|
8
8
|
{
|
|
9
9
|
administrativeTitle: 'Daily Pages',
|
|
@@ -11,9 +11,9 @@ exports.MOCK_SECTIONS = [
|
|
|
11
11
|
componentBlocks: [
|
|
12
12
|
// MOCK_VIDEO_CB,
|
|
13
13
|
// MOCK_VIDEO_CB_2,
|
|
14
|
-
mock_contentsCarousel_1.SAMPLE_CONTENTSCAROUSEL_CB
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
mock_contentsCarousel_1.SAMPLE_CONTENTSCAROUSEL_CB
|
|
15
|
+
// SAMPLE_SLIDEBANNER_CB,
|
|
16
|
+
// SAMPLE_LIST_CB
|
|
17
17
|
// ...MOCK_COMPONENT_BLOCKS
|
|
18
18
|
],
|
|
19
19
|
display: true,
|
|
@@ -77,6 +77,12 @@ function ContentsCarousel(props) {
|
|
|
77
77
|
props: CB_STYLE_PROP_CONTENTSCAROUSEL,
|
|
78
78
|
device: device
|
|
79
79
|
}), customProgressbarNormalStyle = _g.normalStyle, customProgressbarHoverStyle = _g.hoverStyle;
|
|
80
|
+
console.log('contentsCarouselHoverStyle', contentsCarouselHoverStyle);
|
|
81
|
+
console.log('customNavigationHoverStyle', customNavigationHoverStyle);
|
|
82
|
+
// nextBtnPrimaryColor
|
|
83
|
+
// nextBtnSecondaryColor
|
|
84
|
+
// prevBtnPrimaryColor
|
|
85
|
+
// prevBtnSecondaryColor
|
|
80
86
|
var _h = (0, useSwiper_1.useSwiper)(), swiperRef = _h.swiperRef, progressRef = _h.progressRef, leftTimeMsRef = _h.leftTimeMsRef, isBeginning = _h.isBeginning, isEnd = _h.isEnd, onSwiper = _h.onSwiper, onSlideChangeTransitionEnd = _h.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _h.onAutoplayTimeLeft, onClickPrevBtn = _h.onClickPrevBtn, onClickNextBtn = _h.onClickNextBtn;
|
|
81
87
|
var _j = (0, react_1.useState)(false), isHovered = _j[0], setIsHovered = _j[1];
|
|
82
88
|
var loop = isHovered ? contentsCarouselHoverStyle.loop : contentsCarouselNormalStyle.loop;
|
|
@@ -110,12 +116,13 @@ function ContentsCarousel(props) {
|
|
|
110
116
|
bottom: '0px',
|
|
111
117
|
left: '0px'
|
|
112
118
|
};
|
|
119
|
+
console.log('isHoverd', isHovered);
|
|
113
120
|
var renderElements = function (component) {
|
|
114
121
|
switch (component.type) {
|
|
115
122
|
case 'PREV':
|
|
116
|
-
return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, styles:
|
|
123
|
+
return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickPrevBtn }));
|
|
117
124
|
case 'NEXT':
|
|
118
|
-
return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles:
|
|
125
|
+
return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickNextBtn }));
|
|
119
126
|
case 'PROGRESSBAR':
|
|
120
127
|
return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
|
|
121
128
|
default:
|
|
@@ -149,7 +156,10 @@ function ContentsCarousel(props) {
|
|
|
149
156
|
}, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), {
|
|
150
157
|
// pointerEvents: 'none',
|
|
151
158
|
zIndex: 3 }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentscarousel-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) { return renderElements(component); }) })) }), position));
|
|
152
|
-
}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-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 () {
|
|
159
|
+
}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-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 () {
|
|
160
|
+
console.log('mouse enter');
|
|
161
|
+
setIsHovered(true);
|
|
162
|
+
}, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-columns": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-number-of-items": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-column-gap": columnGap, "data-cols": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), (0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-contentscarousel-layout-box", ref: layoutRef, style: __assign({}, pointerEventsObj) }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-contentscarousel-wrapper", ccbInset: ccbInset, customStyle: isHovered
|
|
153
163
|
? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle
|
|
154
164
|
: contentsCarouselNormalStyle === null || contentsCarouselNormalStyle === void 0 ? void 0 : contentsCarouselNormalStyle.customStyle, style: {
|
|
155
165
|
display: layout.display,
|
|
@@ -3,9 +3,10 @@ import type { CustomNavigationProps } from '../types';
|
|
|
3
3
|
export interface CustomNavigationNextBtnProps {
|
|
4
4
|
isDisabled: boolean;
|
|
5
5
|
styles: CustomNavigationProps;
|
|
6
|
+
hoverStyles: CustomNavigationProps;
|
|
6
7
|
onClick?: () => void;
|
|
7
8
|
}
|
|
8
|
-
export declare const CustomNavigationNextBtn: ({ isDisabled, styles, onClick }: CustomNavigationNextBtnProps) => JSX.Element;
|
|
9
|
+
export declare const CustomNavigationNextBtn: ({ isDisabled, styles, hoverStyles, onClick }: CustomNavigationNextBtnProps) => JSX.Element;
|
|
9
10
|
export interface FlexBoxProps {
|
|
10
11
|
direction?: 'row' | 'column';
|
|
11
12
|
justifyContent?: string;
|
|
@@ -44,7 +44,7 @@ var IconButton_1 = require("../../../../../../../../DynamicLayout/components/pds
|
|
|
44
44
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
45
45
|
var navigationConfigs_1 = require("./navigationConfigs");
|
|
46
46
|
var CustomNavigationNextBtn = function (_a) {
|
|
47
|
-
var isDisabled = _a.isDisabled, styles = _a.styles, onClick = _a.onClick;
|
|
47
|
+
var isDisabled = _a.isDisabled, styles = _a.styles, hoverStyles = _a.hoverStyles, onClick = _a.onClick;
|
|
48
48
|
var nextButton = styles.nextBtnType === 'NONE'
|
|
49
49
|
? undefined
|
|
50
50
|
: navigationConfigs_1.nextButtonMappedIcons[styles.nextBtnType || 'DESIGN1'];
|
|
@@ -58,7 +58,7 @@ var CustomNavigationNextBtn = function (_a) {
|
|
|
58
58
|
buttonSize = 'xxlarge';
|
|
59
59
|
iconSize = 48;
|
|
60
60
|
}
|
|
61
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nextButton && ((0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "cb-contentscarousel-next-button", disabled: isDisabled, "$size": styles.nextBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: nextButton.shapeType, borderColorKey: nextButton.borderColorKey, overrideBaseColorHex: styles.nextBtnPrimaryColor, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.nextBtnSecondaryColor, shadow: nextButton.shadow, useDefaultActiveStyle: false, useDefaultHoverStyle: false, onClick: onClick }) }))) }));
|
|
61
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nextButton && ((0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "cb-contentscarousel-next-button", disabled: isDisabled, "$size": styles.nextBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: nextButton.shapeType, borderColorKey: nextButton.borderColorKey, overrideBaseColorHex: styles.nextBtnPrimaryColor, overrideBaseColorHexHover: hoverStyles.nextBtnPrimaryColor, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.nextBtnSecondaryColor, overrideIconColorHexHover: hoverStyles.nextBtnSecondaryColor, shadow: nextButton.shadow, useDefaultActiveStyle: false, useDefaultHoverStyle: false, onClick: onClick }) }))) }));
|
|
62
62
|
};
|
|
63
63
|
exports.CustomNavigationNextBtn = CustomNavigationNextBtn;
|
|
64
64
|
var S_NextButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: pointer;\n\n ", ";\n"], ["\n cursor: pointer;\n\n ", ";\n"])), function (_a) {
|
|
@@ -3,9 +3,10 @@ import type { CustomNavigationProps } from '../types';
|
|
|
3
3
|
export interface CustomNavigationPrevBtnProps {
|
|
4
4
|
isDisabled: boolean;
|
|
5
5
|
styles: CustomNavigationProps;
|
|
6
|
+
hoverStyles: CustomNavigationProps;
|
|
6
7
|
onClick?: () => void;
|
|
7
8
|
}
|
|
8
|
-
export declare const CustomNavigationPrevBtn: ({ isDisabled, styles, onClick }: CustomNavigationPrevBtnProps) => JSX.Element;
|
|
9
|
+
export declare const CustomNavigationPrevBtn: ({ isDisabled, styles, hoverStyles, onClick }: CustomNavigationPrevBtnProps) => JSX.Element;
|
|
9
10
|
export interface FlexBoxProps {
|
|
10
11
|
direction?: 'row' | 'column';
|
|
11
12
|
justifyContent?: string;
|
|
@@ -44,7 +44,7 @@ var IconButton_1 = require("../../../../../../../../DynamicLayout/components/pds
|
|
|
44
44
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
45
45
|
var navigationConfigs_1 = require("./navigationConfigs");
|
|
46
46
|
var CustomNavigationPrevBtn = function (_a) {
|
|
47
|
-
var isDisabled = _a.isDisabled, styles = _a.styles, onClick = _a.onClick;
|
|
47
|
+
var isDisabled = _a.isDisabled, styles = _a.styles, hoverStyles = _a.hoverStyles, onClick = _a.onClick;
|
|
48
48
|
var prevButton = styles.prevBtnType === 'NONE'
|
|
49
49
|
? undefined
|
|
50
50
|
: navigationConfigs_1.prevButtonMappedIcons[styles.prevBtnType || 'DESIGN1'];
|
|
@@ -58,7 +58,7 @@ var CustomNavigationPrevBtn = function (_a) {
|
|
|
58
58
|
buttonSize = 'xxlarge';
|
|
59
59
|
iconSize = 48;
|
|
60
60
|
}
|
|
61
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prevButton && ((0, jsx_runtime_1.jsx)(S_PrevButton, __assign({ className: "cb-contentscarousel-prev-button", disabled: isDisabled, "$size": styles.prevBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: prevButton.shapeType, borderColorKey: prevButton.borderColorKey,
|
|
61
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prevButton && ((0, jsx_runtime_1.jsx)(S_PrevButton, __assign({ className: "cb-contentscarousel-prev-button", disabled: isDisabled, "$size": styles.prevBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: prevButton.shapeType, borderColorKey: prevButton.borderColorKey, iconName: prevButton.iconName, iconFillType: "line", iconColorKey: prevButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideBaseColorHex: styles.prevBtnPrimaryColor, overrideBaseColorHexHover: hoverStyles.prevBtnPrimaryColor, overrideIconColorHex: styles.prevBtnSecondaryColor, overrideIconColorHexHover: hoverStyles.prevBtnSecondaryColor, shadow: prevButton.shadow, onClick: onClick, useDefaultActiveStyle: false, useDefaultHoverStyle: false }) }))) }));
|
|
62
62
|
};
|
|
63
63
|
exports.CustomNavigationPrevBtn = CustomNavigationPrevBtn;
|
|
64
64
|
var S_PrevButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: pointer;\n\n ", ";\n"], ["\n cursor: pointer;\n\n ", ";\n"])), function (_a) {
|