@searchspring/snap-preact-components 0.20.2 → 0.20.5
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/cjs/components/Atoms/Merchandising/InlineBanner.d.ts +1 -0
- package/dist/cjs/components/Atoms/Merchandising/InlineBanner.d.ts.map +1 -1
- package/dist/cjs/components/Atoms/Merchandising/InlineBanner.js +5 -3
- package/dist/cjs/components/Atoms/Merchandising/InlineBanner.stories.d.ts +9 -0
- package/dist/cjs/components/Atoms/Merchandising/InlineBanner.stories.d.ts.map +1 -1
- package/dist/cjs/components/Atoms/Merchandising/InlineBanner.stories.js +8 -0
- package/dist/cjs/components/Molecules/Carousel/Carousel.d.ts +37 -2
- package/dist/cjs/components/Molecules/Carousel/Carousel.d.ts.map +1 -1
- package/dist/cjs/components/Molecules/Carousel/Carousel.js +26 -11
- package/dist/cjs/components/Molecules/Carousel/Carousel.stories.d.ts +15 -0
- package/dist/cjs/components/Molecules/Carousel/Carousel.stories.d.ts.map +1 -1
- package/dist/cjs/components/Molecules/Carousel/Carousel.stories.js +10 -0
- package/dist/cjs/components/Molecules/FacetGridOptions/FacetGridOptions.d.ts +2 -1
- package/dist/cjs/components/Molecules/FacetGridOptions/FacetGridOptions.d.ts.map +1 -1
- package/dist/cjs/components/Molecules/FacetGridOptions/FacetGridOptions.js +6 -2
- package/dist/cjs/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.d.ts +2 -1
- package/dist/cjs/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.d.ts.map +1 -1
- package/dist/cjs/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.js +6 -2
- package/dist/cjs/components/Molecules/FacetListOptions/FacetListOptions.d.ts +2 -1
- package/dist/cjs/components/Molecules/FacetListOptions/FacetListOptions.d.ts.map +1 -1
- package/dist/cjs/components/Molecules/FacetListOptions/FacetListOptions.js +6 -2
- package/dist/cjs/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.d.ts +2 -1
- package/dist/cjs/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.d.ts.map +1 -1
- package/dist/cjs/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.js +6 -2
- package/dist/cjs/components/Molecules/Result/Result.d.ts +1 -0
- package/dist/cjs/components/Molecules/Result/Result.d.ts.map +1 -1
- package/dist/cjs/components/Molecules/Result/Result.js +5 -3
- package/dist/cjs/components/Molecules/Result/Result.stories.d.ts +9 -0
- package/dist/cjs/components/Molecules/Result/Result.stories.d.ts.map +1 -1
- package/dist/cjs/components/Molecules/Result/Result.stories.js +8 -0
- package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts +3 -2
- package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.js +52 -52
- package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.stories.d.ts +18 -0
- package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.stories.d.ts.map +1 -1
- package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.stories.js +16 -0
- package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts +2 -2
- package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
- package/dist/cjs/components/Organisms/Recommendation/Recommendation.js +9 -36
- package/dist/cjs/components/Organisms/Results/Results.d.ts +1 -7
- package/dist/cjs/components/Organisms/Results/Results.d.ts.map +1 -1
- package/dist/cjs/hooks/useDisplaySettings.d.ts +1 -1
- package/dist/cjs/hooks/useDisplaySettings.d.ts.map +1 -1
- package/dist/cjs/types.d.ts +6 -0
- package/dist/cjs/types.d.ts.map +1 -1
- package/dist/esm/components/Atoms/Merchandising/InlineBanner.d.ts +1 -0
- package/dist/esm/components/Atoms/Merchandising/InlineBanner.d.ts.map +1 -1
- package/dist/esm/components/Atoms/Merchandising/InlineBanner.js +6 -4
- package/dist/esm/components/Atoms/Merchandising/InlineBanner.stories.d.ts +9 -0
- package/dist/esm/components/Atoms/Merchandising/InlineBanner.stories.d.ts.map +1 -1
- package/dist/esm/components/Atoms/Merchandising/InlineBanner.stories.js +9 -0
- package/dist/esm/components/Molecules/Carousel/Carousel.d.ts +37 -2
- package/dist/esm/components/Molecules/Carousel/Carousel.d.ts.map +1 -1
- package/dist/esm/components/Molecules/Carousel/Carousel.js +30 -10
- package/dist/esm/components/Molecules/Carousel/Carousel.stories.d.ts +15 -0
- package/dist/esm/components/Molecules/Carousel/Carousel.stories.d.ts.map +1 -1
- package/dist/esm/components/Molecules/Carousel/Carousel.stories.js +11 -0
- package/dist/esm/components/Molecules/FacetGridOptions/FacetGridOptions.d.ts +2 -1
- package/dist/esm/components/Molecules/FacetGridOptions/FacetGridOptions.d.ts.map +1 -1
- package/dist/esm/components/Molecules/FacetGridOptions/FacetGridOptions.js +4 -1
- package/dist/esm/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.d.ts +2 -1
- package/dist/esm/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.d.ts.map +1 -1
- package/dist/esm/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.js +4 -1
- package/dist/esm/components/Molecules/FacetListOptions/FacetListOptions.d.ts +2 -1
- package/dist/esm/components/Molecules/FacetListOptions/FacetListOptions.d.ts.map +1 -1
- package/dist/esm/components/Molecules/FacetListOptions/FacetListOptions.js +4 -1
- package/dist/esm/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.d.ts +2 -1
- package/dist/esm/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.d.ts.map +1 -1
- package/dist/esm/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.js +4 -1
- package/dist/esm/components/Molecules/Result/Result.d.ts +1 -0
- package/dist/esm/components/Molecules/Result/Result.d.ts.map +1 -1
- package/dist/esm/components/Molecules/Result/Result.js +5 -3
- package/dist/esm/components/Molecules/Result/Result.stories.d.ts +9 -0
- package/dist/esm/components/Molecules/Result/Result.stories.d.ts.map +1 -1
- package/dist/esm/components/Molecules/Result/Result.stories.js +9 -0
- package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts +3 -2
- package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js +52 -51
- package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.d.ts +18 -0
- package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.d.ts.map +1 -1
- package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.js +18 -0
- package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts +2 -2
- package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
- package/dist/esm/components/Organisms/Recommendation/Recommendation.js +15 -38
- package/dist/esm/components/Organisms/Results/Results.d.ts +1 -7
- package/dist/esm/components/Organisms/Results/Results.d.ts.map +1 -1
- package/dist/esm/hooks/useDisplaySettings.d.ts +1 -1
- package/dist/esm/hooks/useDisplaySettings.d.ts.map +1 -1
- package/dist/esm/types.d.ts +6 -0
- package/dist/esm/types.d.ts.map +1 -1
- package/package.json +11 -11
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/InlineBanner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAU,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAyBzF,wBAAgB,YAAY,CAAC,UAAU,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/InlineBanner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAU,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAyBzF,wBAAgB,YAAY,CAAC,UAAU,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAwCvE;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,mBAAmB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxC"}
|
|
@@ -48,8 +48,8 @@ function InlineBanner(properties) {
|
|
|
48
48
|
var globalTheme = (0, providers_1.useTheme)();
|
|
49
49
|
var props = __assign(__assign(__assign({
|
|
50
50
|
// default props
|
|
51
|
-
layout: types_1.Layout.GRID, banner: {} }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.
|
|
52
|
-
var banner = props.banner, disableStyles = props.disableStyles, className = props.className, width = props.width, layout = props.layout, style = props.style;
|
|
51
|
+
layout: types_1.Layout.GRID, banner: {} }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.inlineBanner), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.inlineBanner);
|
|
52
|
+
var banner = props.banner, disableStyles = props.disableStyles, className = props.className, width = props.width, layout = props.layout, onClick = props.onClick, style = props.style;
|
|
53
53
|
var styling = {};
|
|
54
54
|
if (!disableStyles) {
|
|
55
55
|
styling.css = [CSS.inlineBanner({ width: width }), style];
|
|
@@ -59,7 +59,9 @@ function InlineBanner(properties) {
|
|
|
59
59
|
}
|
|
60
60
|
return (banner &&
|
|
61
61
|
banner.value && ((0, react_1.jsx)(providers_1.CacheProvider, null,
|
|
62
|
-
(0, react_1.jsx)("div", __assign({
|
|
62
|
+
(0, react_1.jsx)("div", __assign({ onClick: function (e) {
|
|
63
|
+
onClick && onClick(e);
|
|
64
|
+
}, className: (0, classnames_1.default)('ss__inline-banner', "ss__inline-banner--".concat(layout), className) }, styling, { dangerouslySetInnerHTML: {
|
|
63
65
|
__html: banner.value,
|
|
64
66
|
} })))));
|
|
65
67
|
}
|
|
@@ -99,6 +99,15 @@ declare const _default: {
|
|
|
99
99
|
type: string;
|
|
100
100
|
};
|
|
101
101
|
};
|
|
102
|
+
onClick: {
|
|
103
|
+
description: string;
|
|
104
|
+
table: {
|
|
105
|
+
type: {
|
|
106
|
+
summary: string;
|
|
107
|
+
};
|
|
108
|
+
};
|
|
109
|
+
action: string;
|
|
110
|
+
};
|
|
102
111
|
};
|
|
103
112
|
decorators: ((Story: any) => h.JSX.Element)[];
|
|
104
113
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineBanner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/InlineBanner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,YAAY,EAAqB,MAAM,gBAAgB,CAAC;AAIjE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC
|
|
1
|
+
{"version":3,"file":"InlineBanner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/InlineBanner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,YAAY,EAAqB,MAAM,gBAAgB,CAAC;AAIjE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAExC,wBAsEE;AASF,eAAO,MAAM,OAAO,KAAoB,CAAC"}
|
|
@@ -97,6 +97,14 @@ exports.default = {
|
|
|
97
97
|
},
|
|
98
98
|
},
|
|
99
99
|
control: { type: 'text' },
|
|
100
|
+
}, onClick: {
|
|
101
|
+
description: 'Custom onClick event handler',
|
|
102
|
+
table: {
|
|
103
|
+
type: {
|
|
104
|
+
summary: 'function',
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
action: 'onClick',
|
|
100
108
|
} }, utilities_1.componentArgs),
|
|
101
109
|
decorators: [
|
|
102
110
|
function (Story) { return ((0, preact_1.h)("div", { style: {
|
|
@@ -1,17 +1,52 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import 'swiper/swiper.min.css';
|
|
3
|
-
import { ComponentProps } from '../../../types';
|
|
3
|
+
import { ComponentProps, BreakpointsProps } from '../../../types';
|
|
4
|
+
export declare const defaultCarouselBreakpoints: {
|
|
5
|
+
0: {
|
|
6
|
+
slidesPerView: number;
|
|
7
|
+
slidesPerGroup: number;
|
|
8
|
+
spaceBetween: number;
|
|
9
|
+
};
|
|
10
|
+
480: {
|
|
11
|
+
slidesPerView: number;
|
|
12
|
+
slidesPerGroup: number;
|
|
13
|
+
spaceBetween: number;
|
|
14
|
+
};
|
|
15
|
+
768: {
|
|
16
|
+
slidesPerView: number;
|
|
17
|
+
slidesPerGroup: number;
|
|
18
|
+
spaceBetween: number;
|
|
19
|
+
};
|
|
20
|
+
1024: {
|
|
21
|
+
slidesPerView: number;
|
|
22
|
+
slidesPerGroup: number;
|
|
23
|
+
spaceBetween: number;
|
|
24
|
+
};
|
|
25
|
+
1200: {
|
|
26
|
+
slidesPerView: number;
|
|
27
|
+
slidesPerGroup: number;
|
|
28
|
+
spaceBetween: number;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
export declare const defaultVerticalCarouselBreakpoints: {
|
|
32
|
+
0: {
|
|
33
|
+
slidesPerView: number;
|
|
34
|
+
slidesPerGroup: number;
|
|
35
|
+
spaceBetween: number;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
4
38
|
export declare const Carousel: ((properties: CarouselProps) => JSX.Element) & {
|
|
5
39
|
displayName: string;
|
|
6
40
|
};
|
|
7
41
|
export interface CarouselProps extends ComponentProps {
|
|
8
|
-
breakpoints?:
|
|
42
|
+
breakpoints?: BreakpointsProps;
|
|
9
43
|
prevButton?: JSX.Element | string;
|
|
10
44
|
nextButton?: JSX.Element | string;
|
|
11
45
|
hideButtons?: boolean;
|
|
12
46
|
loop?: boolean;
|
|
13
47
|
vertical?: boolean;
|
|
14
48
|
pagination?: boolean;
|
|
49
|
+
autoAdjustSlides?: boolean;
|
|
15
50
|
onClick?: (swiper: any, e: any) => void;
|
|
16
51
|
onNextButtonClick?: (e: any) => void;
|
|
17
52
|
onPrevButtonClick?: (e: any) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AASA,OAAO,uBAAuB,CAAC;AAM/B,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA2FlE,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA8IvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,KAAA,EAAE,CAAC,KAAA,KAAK,IAAI,CAAC;IAC9B,iBAAiB,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACzB"}
|
|
@@ -44,17 +44,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
44
44
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
45
45
|
};
|
|
46
46
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
47
|
-
exports.Carousel = void 0;
|
|
47
|
+
exports.Carousel = exports.defaultVerticalCarouselBreakpoints = exports.defaultCarouselBreakpoints = void 0;
|
|
48
48
|
var hooks_1 = require("preact/hooks");
|
|
49
49
|
var react_1 = require("@emotion/react");
|
|
50
50
|
var classnames_1 = __importDefault(require("classnames"));
|
|
51
51
|
var mobx_react_lite_1 = require("mobx-react-lite");
|
|
52
|
+
var deepmerge_1 = __importDefault(require("deepmerge"));
|
|
52
53
|
var core_1 = __importStar(require("swiper/core"));
|
|
53
54
|
require("swiper/swiper.min.css");
|
|
54
55
|
var Icon_1 = require("../../Atoms/Icon/Icon");
|
|
55
56
|
var react_2 = require("swiper/react");
|
|
56
57
|
var utilities_1 = require("../../../utilities");
|
|
57
58
|
var providers_1 = require("../../../providers");
|
|
59
|
+
var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
|
|
58
60
|
var CSS = {
|
|
59
61
|
carousel: function (_a) {
|
|
60
62
|
var _b, _c;
|
|
@@ -95,6 +97,9 @@ var CSS = {
|
|
|
95
97
|
display: 'flex',
|
|
96
98
|
justifyContent: 'center',
|
|
97
99
|
alignItems: 'center',
|
|
100
|
+
'&.ss__carousel__next-wrapper--hidden, &.ss__carousel__prev-wrapper--hidden': {
|
|
101
|
+
display: 'none',
|
|
102
|
+
},
|
|
98
103
|
},
|
|
99
104
|
'.ss__carousel__next, .ss__carousel__prev': {
|
|
100
105
|
padding: '5px',
|
|
@@ -137,7 +142,7 @@ var CSS = {
|
|
|
137
142
|
});
|
|
138
143
|
},
|
|
139
144
|
};
|
|
140
|
-
|
|
145
|
+
exports.defaultCarouselBreakpoints = {
|
|
141
146
|
0: {
|
|
142
147
|
slidesPerView: 1,
|
|
143
148
|
slidesPerGroup: 1,
|
|
@@ -164,7 +169,7 @@ var defaultCarouselBreakpoints = {
|
|
|
164
169
|
spaceBetween: 10,
|
|
165
170
|
},
|
|
166
171
|
};
|
|
167
|
-
|
|
172
|
+
exports.defaultVerticalCarouselBreakpoints = {
|
|
168
173
|
0: {
|
|
169
174
|
slidesPerView: 1,
|
|
170
175
|
slidesPerGroup: 1,
|
|
@@ -177,8 +182,18 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
177
182
|
var theme = __assign(__assign({}, globalTheme), properties.theme);
|
|
178
183
|
var props = __assign(__assign(__assign({
|
|
179
184
|
// default props
|
|
180
|
-
breakpoints: properties.vertical ? defaultVerticalCarouselBreakpoints : defaultCarouselBreakpoints, pagination: false, loop: true }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.carousel), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.carousel);
|
|
181
|
-
var
|
|
185
|
+
breakpoints: properties.vertical ? exports.defaultVerticalCarouselBreakpoints : exports.defaultCarouselBreakpoints, pagination: false, loop: true, autoAdjustSlides: true }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.carousel), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.carousel);
|
|
186
|
+
var displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(props.breakpoints);
|
|
187
|
+
if (displaySettings && Object.keys(displaySettings).length) {
|
|
188
|
+
var theme_1 = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {});
|
|
189
|
+
if (props.autoAdjustSlides && props.children.length < displaySettings.slidesPerView) {
|
|
190
|
+
displaySettings.slidesPerView = props.children.length;
|
|
191
|
+
displaySettings.slidesPerGroup = props.children.length;
|
|
192
|
+
displaySettings.loop = false;
|
|
193
|
+
}
|
|
194
|
+
props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme_1 });
|
|
195
|
+
}
|
|
196
|
+
var children = props.children, breakpoints = props.breakpoints, loop = props.loop, pagination = props.pagination, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, vertical = props.vertical, autoAdjustSlides = props.autoAdjustSlides, onInit = props.onInit, onNextButtonClick = props.onNextButtonClick, onPrevButtonClick = props.onPrevButtonClick, onClick = props.onClick, disableStyles = props.disableStyles, style = props.style, className = props.className, additionalProps = __rest(props, ["children", "breakpoints", "loop", "pagination", "nextButton", "prevButton", "hideButtons", "vertical", "autoAdjustSlides", "onInit", "onNextButtonClick", "onPrevButtonClick", "onClick", "disableStyles", "style", "className"]);
|
|
182
197
|
var subProps = {
|
|
183
198
|
icon: __assign(__assign(__assign({
|
|
184
199
|
// default props
|
|
@@ -201,8 +216,8 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
201
216
|
}
|
|
202
217
|
return (children && ((0, react_1.jsx)(providers_1.CacheProvider, null,
|
|
203
218
|
(0, react_1.jsx)("div", __assign({ ref: rootComponentRef }, styling, { className: (0, classnames_1.default)('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className) }),
|
|
204
|
-
|
|
205
|
-
(0, react_1.jsx)("div", { className: "ss__carousel__prev", ref: navigationPrevRef, onClick: onPrevButtonClick && (function (e) { return onPrevButtonClick(e); }) }, prevButton || (0, react_1.jsx)(Icon_1.Icon, __assign({ icon: vertical ? 'angle-up' : 'angle-left' }, subProps.icon))))
|
|
219
|
+
(0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__carousel__prev-wrapper', { 'ss__carousel__prev-wrapper--hidden': hideButtons }) },
|
|
220
|
+
(0, react_1.jsx)("div", { className: "ss__carousel__prev", ref: navigationPrevRef, onClick: onPrevButtonClick && (function (e) { return onPrevButtonClick(e); }) }, prevButton || (0, react_1.jsx)(Icon_1.Icon, __assign({ icon: vertical ? 'angle-up' : 'angle-left' }, subProps.icon)))),
|
|
206
221
|
(0, react_1.jsx)(react_2.Swiper, __assign({ centerInsufficientSlides: true, onInit: function (swiper) {
|
|
207
222
|
//@ts-ignore
|
|
208
223
|
swiper.params.navigation.prevEl = navigationPrevRef.current ? navigationPrevRef.current : undefined;
|
|
@@ -213,13 +228,13 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
213
228
|
}
|
|
214
229
|
}, onClick: function (swiper, e) {
|
|
215
230
|
onClick && onClick(swiper, e);
|
|
216
|
-
}, direction: vertical ? 'vertical' : 'horizontal', loop: loop,
|
|
231
|
+
}, direction: vertical ? 'vertical' : 'horizontal', loop: loop, pagination: pagination
|
|
217
232
|
? {
|
|
218
233
|
clickable: true,
|
|
219
234
|
}
|
|
220
|
-
: false }, additionalProps), children.map(function (child) {
|
|
235
|
+
: false }, additionalProps, displaySettings), children.map(function (child) {
|
|
221
236
|
return (0, react_1.jsx)(react_2.SwiperSlide, null, child);
|
|
222
237
|
})),
|
|
223
|
-
|
|
224
|
-
(0, react_1.jsx)("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && (function (e) { return onNextButtonClick(e); }) }, nextButton || (0, react_1.jsx)(Icon_1.Icon, __assign({ icon: vertical ? 'angle-down' : 'angle-right' }, subProps.icon))))))))
|
|
238
|
+
(0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }) },
|
|
239
|
+
(0, react_1.jsx)("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && (function (e) { return onNextButtonClick(e); }) }, nextButton || (0, react_1.jsx)(Icon_1.Icon, __assign({ icon: vertical ? 'angle-down' : 'angle-right' }, subProps.icon))))))));
|
|
225
240
|
});
|
|
@@ -160,6 +160,21 @@ declare const _default: {
|
|
|
160
160
|
type: string;
|
|
161
161
|
};
|
|
162
162
|
};
|
|
163
|
+
autoAdjustSlides: {
|
|
164
|
+
defaultValue: boolean;
|
|
165
|
+
description: string;
|
|
166
|
+
table: {
|
|
167
|
+
type: {
|
|
168
|
+
summary: string;
|
|
169
|
+
};
|
|
170
|
+
defaultValue: {
|
|
171
|
+
summary: boolean;
|
|
172
|
+
};
|
|
173
|
+
};
|
|
174
|
+
control: {
|
|
175
|
+
type: string;
|
|
176
|
+
};
|
|
177
|
+
};
|
|
163
178
|
onNextButtonClick: {
|
|
164
179
|
description: string;
|
|
165
180
|
table: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,CAAC,EAAE,MAAM,QAAQ,CAAC
|
|
1
|
+
{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASrC,wBAqJE;AAGF,eAAO,MAAM,MAAM;;;;;;;CAQlB,CAAC;AAOF,eAAO,MAAM,KAAK,+BAajB,CAAC"}
|
|
@@ -104,6 +104,16 @@ exports.default = {
|
|
|
104
104
|
defaultValue: { summary: 'Breakpoint object' },
|
|
105
105
|
},
|
|
106
106
|
control: { type: 'object' },
|
|
107
|
+
}, autoAdjustSlides: {
|
|
108
|
+
defaultValue: true,
|
|
109
|
+
description: 'If true and children length is less than the current breakpoint slidesPerView value, slidesPerView and slidesPerGroup will be set to the children length and loop to false',
|
|
110
|
+
table: {
|
|
111
|
+
type: {
|
|
112
|
+
summary: 'boolean',
|
|
113
|
+
},
|
|
114
|
+
defaultValue: { summary: true },
|
|
115
|
+
},
|
|
116
|
+
control: { type: 'boolean' },
|
|
107
117
|
}, onNextButtonClick: {
|
|
108
118
|
description: 'Carousel next button click event handler',
|
|
109
119
|
table: {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { ComponentProps, ValueFacetValue } from '../../../types';
|
|
2
3
|
export declare const FacetGridOptions: ((properties: FacetGridOptionsProps) => JSX.Element) & {
|
|
3
4
|
displayName: string;
|
|
@@ -6,7 +7,7 @@ export interface FacetGridOptionsProps extends ComponentProps {
|
|
|
6
7
|
values: ValueFacetValue[];
|
|
7
8
|
columns?: number;
|
|
8
9
|
gapSize?: string;
|
|
9
|
-
onClick?: (e:
|
|
10
|
+
onClick?: (e: React.MouseEvent) => void;
|
|
10
11
|
previewOnFocus?: boolean;
|
|
11
12
|
valueProps?: any;
|
|
12
13
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FacetGridOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAiEjE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;
|
|
1
|
+
{"version":3,"file":"FacetGridOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAiEjE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CAoDvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
|
|
@@ -99,8 +99,12 @@ exports.FacetGridOptions = (0, mobx_react_lite_1.observer)(function (properties)
|
|
|
99
99
|
}
|
|
100
100
|
return ((values === null || values === void 0 ? void 0 : values.length) && ((0, react_1.jsx)(providers_1.CacheProvider, null,
|
|
101
101
|
(0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-grid-options', className) }), values.map(function (value) {
|
|
102
|
-
var _a;
|
|
103
|
-
return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-grid-options__option', { 'ss__facet-grid-options__option--filtered': value.filtered }),
|
|
102
|
+
var _a, _b;
|
|
103
|
+
return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-grid-options__option', { 'ss__facet-grid-options__option--filtered': value.filtered }), onFocus: function () { return previewOnFocus && value.preview && value.preview(); } }, valueProps, { href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href, onClick: function (e) {
|
|
104
|
+
var _a, _b;
|
|
105
|
+
(_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.onClick(e);
|
|
106
|
+
onClick && onClick(e);
|
|
107
|
+
} }),
|
|
104
108
|
(0, react_1.jsx)("span", { className: (0, classnames_1.default)('ss__facet-grid-options__option__value', {
|
|
105
109
|
'ss__facet-grid-options__option__value--smaller': value.label.length > 3,
|
|
106
110
|
}) }, value.label)));
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { ComponentProps, HierarchyFacetValue } from '../../../types';
|
|
2
3
|
export declare const FacetHierarchyOptions: ((properties: FacetHierarchyOptionsProps) => JSX.Element) & {
|
|
3
4
|
displayName: string;
|
|
@@ -5,7 +6,7 @@ export declare const FacetHierarchyOptions: ((properties: FacetHierarchyOptionsP
|
|
|
5
6
|
export interface FacetHierarchyOptionsProps extends ComponentProps {
|
|
6
7
|
values: HierarchyFacetValue[];
|
|
7
8
|
hideCount?: boolean;
|
|
8
|
-
onClick?: (e:
|
|
9
|
+
onClick?: (e: React.MouseEvent) => void;
|
|
9
10
|
previewOnFocus?: boolean;
|
|
10
11
|
valueProps?: any;
|
|
11
12
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FacetHierarchyOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AA2CrE,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,WAAW;;
|
|
1
|
+
{"version":3,"file":"FacetHierarchyOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AA2CrE,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,WAAW;;CAqDjG,CAAC;AACH,MAAM,WAAW,0BAA2B,SAAQ,cAAc;IACjE,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
|
|
@@ -77,8 +77,12 @@ exports.FacetHierarchyOptions = (0, mobx_react_lite_1.observer)(function (proper
|
|
|
77
77
|
}
|
|
78
78
|
return ((values === null || values === void 0 ? void 0 : values.length) && ((0, react_1.jsx)(providers_1.CacheProvider, null,
|
|
79
79
|
(0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-hierarchy-options', className) }), values.map(function (value) {
|
|
80
|
-
var _a;
|
|
81
|
-
return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-hierarchy-options__option', { 'ss__facet-hierarchy-options__option--filtered': value.filtered }, { 'ss__facet-hierarchy-options__option--return': value.history && !value.filtered }),
|
|
80
|
+
var _a, _b;
|
|
81
|
+
return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-hierarchy-options__option', { 'ss__facet-hierarchy-options__option--filtered': value.filtered }, { 'ss__facet-hierarchy-options__option--return': value.history && !value.filtered }), href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href, onClick: function (e) {
|
|
82
|
+
var _a, _b;
|
|
83
|
+
(_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.onClick(e);
|
|
84
|
+
onClick && onClick(e);
|
|
85
|
+
}, onFocus: function () { return previewOnFocus && value.preview && value.preview(); } }, valueProps),
|
|
82
86
|
(0, react_1.jsx)("span", { className: "ss__facet-hierarchy-options__option__value" },
|
|
83
87
|
value.label,
|
|
84
88
|
!hideCount && value.count > 0 && !value.filtered && ((0, react_1.jsx)("span", { className: "ss__facet-hierarchy-options__option__value__count" },
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { ComponentProps, ValueFacetValue } from '../../../types';
|
|
2
3
|
export declare const FacetListOptions: ((properties: FacetListOptionsProps) => JSX.Element) & {
|
|
3
4
|
displayName: string;
|
|
@@ -6,7 +7,7 @@ export interface FacetListOptionsProps extends ComponentProps {
|
|
|
6
7
|
values: ValueFacetValue[];
|
|
7
8
|
hideCheckbox?: boolean;
|
|
8
9
|
hideCount?: boolean;
|
|
9
|
-
onClick?: (e:
|
|
10
|
+
onClick?: (e: React.MouseEvent) => void;
|
|
10
11
|
previewOnFocus?: boolean;
|
|
11
12
|
valueProps?: any;
|
|
12
13
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FacetListOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA+BjE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;
|
|
1
|
+
{"version":3,"file":"FacetListOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA+BjE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CA+DvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
|
|
@@ -74,8 +74,12 @@ exports.FacetListOptions = (0, mobx_react_lite_1.observer)(function (properties)
|
|
|
74
74
|
}
|
|
75
75
|
return ((values === null || values === void 0 ? void 0 : values.length) && ((0, react_1.jsx)(providers_1.CacheProvider, null,
|
|
76
76
|
(0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-list-options', className) }), values.map(function (value) {
|
|
77
|
-
var _a;
|
|
78
|
-
return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-list-options__option', { 'ss__facet-list-options__option--filtered': value.filtered }),
|
|
77
|
+
var _a, _b;
|
|
78
|
+
return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-list-options__option', { 'ss__facet-list-options__option--filtered': value.filtered }), onFocus: function () { return previewOnFocus && value.preview && value.preview(); } }, valueProps, { href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href, onClick: function (e) {
|
|
79
|
+
var _a, _b;
|
|
80
|
+
(_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.onClick(e);
|
|
81
|
+
onClick && onClick(e);
|
|
82
|
+
} }),
|
|
79
83
|
!hideCheckbox && (0, react_1.jsx)(Checkbox_1.Checkbox, __assign({}, subProps.checkbox, { checked: value.filtered })),
|
|
80
84
|
(0, react_1.jsx)("span", { className: "ss__facet-list-options__option__value" },
|
|
81
85
|
value.label,
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { ValueFacetValue, ComponentProps } from '../../../types';
|
|
2
3
|
export declare const FacetPaletteOptions: ((properties: FacetPaletteOptionsProps) => JSX.Element) & {
|
|
3
4
|
displayName: string;
|
|
@@ -8,7 +9,7 @@ export interface FacetPaletteOptionsProps extends ComponentProps {
|
|
|
8
9
|
columns?: number;
|
|
9
10
|
gapSize?: string;
|
|
10
11
|
hideIcon?: boolean;
|
|
11
|
-
onClick?: (e:
|
|
12
|
+
onClick?: (e: React.MouseEvent) => void;
|
|
12
13
|
previewOnFocus?: boolean;
|
|
13
14
|
valueProps?: any;
|
|
14
15
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FacetPaletteOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAiFjE,eAAO,MAAM,mBAAmB,gBAAyB,wBAAwB,KAAG,WAAW;;
|
|
1
|
+
{"version":3,"file":"FacetPaletteOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAiFjE,eAAO,MAAM,mBAAmB,gBAAyB,wBAAwB,KAAG,WAAW;;CA6E7F,CAAC;AAEH,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC/D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
|
|
@@ -129,8 +129,12 @@ exports.FacetPaletteOptions = (0, mobx_react_lite_1.observer)(function (properti
|
|
|
129
129
|
}
|
|
130
130
|
return ((values === null || values === void 0 ? void 0 : values.length) && ((0, react_1.jsx)(providers_1.CacheProvider, null,
|
|
131
131
|
(0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-palette-options', className) }), values.map(function (value) {
|
|
132
|
-
var _a;
|
|
133
|
-
return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-palette-options__option', { 'ss__facet-palette-options__option--filtered': value.filtered }),
|
|
132
|
+
var _a, _b;
|
|
133
|
+
return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-palette-options__option', { 'ss__facet-palette-options__option--filtered': value.filtered }), "aria-label": value.value, onFocus: function () { return previewOnFocus && value.preview && value.preview(); } }, valueProps, { href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href, onClick: function (e) {
|
|
134
|
+
var _a, _b;
|
|
135
|
+
(_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.onClick(e);
|
|
136
|
+
onClick && onClick(e);
|
|
137
|
+
} }),
|
|
134
138
|
(0, react_1.jsx)("div", { className: "ss__facet-palette-options__option__wrapper" },
|
|
135
139
|
(0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__facet-palette-options__option__palette', "ss__facet-palette-options__option__palette--".concat(snap_toolbox_1.filters.handleize(value.value))), css: { background: value.value } }, !hideIcon && value.filtered && (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon)))),
|
|
136
140
|
!hideLabel && (0, react_1.jsx)("span", { className: "ss__facet-palette-options__option__value" }, value.label)));
|
|
@@ -18,6 +18,7 @@ export interface ResultProps extends ComponentProps {
|
|
|
18
18
|
fallback?: string;
|
|
19
19
|
layout?: LayoutType;
|
|
20
20
|
truncateTitle?: TruncateTitleProps;
|
|
21
|
+
onClick?: (e: React.MouseEvent<HTMLAnchorElement, Event>) => void;
|
|
21
22
|
controller?: SearchController | AutocompleteController | RecommendationController;
|
|
22
23
|
}
|
|
23
24
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAU,MAAM,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AA4DxH,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;
|
|
1
|
+
{"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAU,MAAM,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AA4DxH,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CA2HnE,CAAC;AAOH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
|
|
@@ -87,7 +87,7 @@ exports.Result = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
87
87
|
var props = __assign(__assign(__assign({
|
|
88
88
|
// default props
|
|
89
89
|
layout: types_1.Layout.GRID }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.result), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.result);
|
|
90
|
-
var result = props.result, hideBadge = props.hideBadge, hideTitle = props.hideTitle, hidePricing = props.hidePricing, hideImage = props.hideImage, detailSlot = props.detailSlot, fallback = props.fallback, disableStyles = props.disableStyles, className = props.className, layout = props.layout, style = props.style, controller = props.controller;
|
|
90
|
+
var result = props.result, hideBadge = props.hideBadge, hideTitle = props.hideTitle, hidePricing = props.hidePricing, hideImage = props.hideImage, detailSlot = props.detailSlot, fallback = props.fallback, disableStyles = props.disableStyles, className = props.className, layout = props.layout, onClick = props.onClick, style = props.style, controller = props.controller;
|
|
91
91
|
var core = (_d = result === null || result === void 0 ? void 0 : result.mappings) === null || _d === void 0 ? void 0 : _d.core;
|
|
92
92
|
var subProps = {
|
|
93
93
|
price: __assign(__assign(__assign({
|
|
@@ -128,16 +128,18 @@ exports.Result = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
128
128
|
return (core && ((0, react_1.jsx)(providers_1.CacheProvider, null,
|
|
129
129
|
(0, react_1.jsx)("article", __assign({}, styling, { className: (0, classnames_1.default)('ss__result', "ss__result--".concat(layout), className) }),
|
|
130
130
|
(0, react_1.jsx)("div", { className: "ss__result__image-wrapper" },
|
|
131
|
-
(0, react_1.jsx)("a", { href: core.url,
|
|
131
|
+
(0, react_1.jsx)("a", { href: core.url, onClick: function (e) {
|
|
132
132
|
var _a, _b;
|
|
133
|
+
onClick && onClick(e);
|
|
133
134
|
(_b = (_a = controller === null || controller === void 0 ? void 0 : controller.track) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.click(e, result);
|
|
134
135
|
} },
|
|
135
136
|
!hideBadge && onSale && (0, react_1.jsx)(Badge_1.Badge, __assign({}, subProps.badge)),
|
|
136
137
|
!hideImage && (0, react_1.jsx)(Image_1.Image, __assign({}, subProps.image)))),
|
|
137
138
|
(0, react_1.jsx)("div", { className: "ss__result__details" },
|
|
138
139
|
!hideTitle && ((0, react_1.jsx)("div", { className: "ss__result__details__title" },
|
|
139
|
-
(0, react_1.jsx)("a", { href: core.url,
|
|
140
|
+
(0, react_1.jsx)("a", { href: core.url, onClick: function (e) {
|
|
140
141
|
var _a, _b;
|
|
142
|
+
onClick && onClick(e);
|
|
141
143
|
(_b = (_a = controller === null || controller === void 0 ? void 0 : controller.track) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.click(e, result);
|
|
142
144
|
}, dangerouslySetInnerHTML: {
|
|
143
145
|
__html: displayName,
|
|
@@ -186,6 +186,15 @@ declare const _default: {
|
|
|
186
186
|
options: Layout[];
|
|
187
187
|
};
|
|
188
188
|
};
|
|
189
|
+
onClick: {
|
|
190
|
+
description: string;
|
|
191
|
+
table: {
|
|
192
|
+
type: {
|
|
193
|
+
summary: string;
|
|
194
|
+
};
|
|
195
|
+
};
|
|
196
|
+
action: string;
|
|
197
|
+
};
|
|
189
198
|
controller: {
|
|
190
199
|
description: string;
|
|
191
200
|
table: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Result.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAK/C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC
|
|
1
|
+
{"version":3,"file":"Result.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAK/C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAExC,wBAwIE;AAKF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,YAAY,KAAoB,CAAC;AAe9C,eAAO,MAAM,aAAa,KAAoB,CAAC"}
|
|
@@ -159,6 +159,14 @@ exports.default = {
|
|
|
159
159
|
type: 'select',
|
|
160
160
|
options: [types_1.Layout.GRID, types_1.Layout.LIST],
|
|
161
161
|
},
|
|
162
|
+
}, onClick: {
|
|
163
|
+
description: 'Custom onClick event handler',
|
|
164
|
+
table: {
|
|
165
|
+
type: {
|
|
166
|
+
summary: 'function',
|
|
167
|
+
},
|
|
168
|
+
},
|
|
169
|
+
action: 'onClick',
|
|
162
170
|
}, controller: {
|
|
163
171
|
description: 'Controller reference',
|
|
164
172
|
table: {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { AutocompleteController } from '@searchspring/snap-controller';
|
|
3
|
-
import { BreakpointsProps } from '
|
|
4
|
-
import { ComponentProps } from '../../../types';
|
|
3
|
+
import { ComponentProps, BreakpointsProps } from '../../../types';
|
|
5
4
|
export declare const Autocomplete: ((properties: AutocompleteProps) => JSX.Element) & {
|
|
6
5
|
displayName: string;
|
|
7
6
|
};
|
|
@@ -28,5 +27,7 @@ export interface AutocompleteProps extends ComponentProps {
|
|
|
28
27
|
breakpoints?: BreakpointsProps;
|
|
29
28
|
controller: AutocompleteController;
|
|
30
29
|
width?: string;
|
|
30
|
+
onFacetOptionClick?: (e: any) => void;
|
|
31
|
+
onTermClick?: (e: any) => void;
|
|
31
32
|
}
|
|
32
33
|
//# sourceMappingURL=Autocomplete.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAQ5E,OAAO,EAAc,cAAc,EAAgB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA2J5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CA8X/E,CAAC;AAkCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;CAC1B"}
|