@salutejs/plasma-new-hope 0.326.0-canary.2013.15537674452.0 → 0.326.0-canary.2013.15555525626.0
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/cjs/components/Carousel/CarouselNew/Carousel.css +5 -7
- package/cjs/components/Carousel/CarouselNew/Carousel.js +6 -11
- package/cjs/components/Carousel/CarouselNew/Carousel.js.map +1 -1
- package/cjs/components/Carousel/CarouselNew/Carousel.styles.js +4 -13
- package/cjs/components/Carousel/CarouselNew/Carousel.styles.js.map +1 -1
- package/cjs/components/Carousel/CarouselNew/{Carousel.styles_19w43w1.css → Carousel.styles_a2t6qm.css} +2 -2
- package/cjs/components/Carousel/CarouselNew/hooks/useCarousel.js +17 -61
- package/cjs/components/Carousel/CarouselNew/hooks/useCarousel.js.map +1 -1
- package/cjs/components/Carousel/CarouselOld/CarouselItem.js +1 -1
- package/cjs/components/Carousel/CarouselOld/CarouselItem.js.map +1 -1
- package/{es/components/Carousel/CarouselOld/CarouselItem_uvoxfy.css → cjs/components/Carousel/CarouselOld/CarouselItem_1meatnt.css} +1 -1
- package/cjs/index.css +6 -8
- package/cjs/index.js +1 -1
- package/emotion/cjs/components/Carousel/CarouselNew/Carousel.js +6 -11
- package/emotion/cjs/components/Carousel/CarouselNew/Carousel.styles.js +17 -12
- package/emotion/cjs/components/Carousel/CarouselNew/hooks/useCarousel.js +17 -60
- package/emotion/cjs/components/Carousel/CarouselNew/ui/index.js +0 -11
- package/emotion/cjs/components/Carousel/CarouselOld/CarouselItem.js +1 -1
- package/emotion/cjs/components/Carousel/index.js +4 -4
- package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.config.js +3 -3
- package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +22 -15
- package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.config.js +14 -2
- package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.js +1 -1
- package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.stories.tsx +92 -32
- package/emotion/es/components/Carousel/CarouselNew/Carousel.js +6 -11
- package/emotion/es/components/Carousel/CarouselNew/Carousel.styles.js +17 -12
- package/emotion/es/components/Carousel/CarouselNew/hooks/useCarousel.js +17 -60
- package/emotion/es/components/Carousel/CarouselNew/ui/index.js +0 -1
- package/emotion/es/components/Carousel/CarouselOld/CarouselItem.js +1 -1
- package/emotion/es/components/Carousel/index.js +1 -1
- package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.config.js +4 -4
- package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +22 -15
- package/emotion/es/examples/plasma_web/components/Carousel/Carousel.config.js +14 -2
- package/emotion/es/examples/plasma_web/components/Carousel/Carousel.js +2 -2
- package/emotion/es/examples/plasma_web/components/Carousel/Carousel.stories.tsx +92 -32
- package/es/components/Carousel/CarouselNew/Carousel.css +5 -7
- package/es/components/Carousel/CarouselNew/Carousel.js +6 -11
- package/es/components/Carousel/CarouselNew/Carousel.js.map +1 -1
- package/es/components/Carousel/CarouselNew/Carousel.styles.js +4 -13
- package/es/components/Carousel/CarouselNew/Carousel.styles.js.map +1 -1
- package/es/components/Carousel/CarouselNew/{Carousel.styles_19w43w1.css → Carousel.styles_a2t6qm.css} +2 -2
- package/es/components/Carousel/CarouselNew/hooks/useCarousel.js +17 -61
- package/es/components/Carousel/CarouselNew/hooks/useCarousel.js.map +1 -1
- package/es/components/Carousel/CarouselOld/CarouselItem.js +1 -1
- package/es/components/Carousel/CarouselOld/CarouselItem.js.map +1 -1
- package/{cjs/components/Carousel/CarouselOld/CarouselItem_uvoxfy.css → es/components/Carousel/CarouselOld/CarouselItem_1meatnt.css} +1 -1
- package/es/index.css +6 -8
- package/es/index.js +1 -1
- package/package.json +5 -5
- package/styled-components/cjs/components/Carousel/CarouselNew/Carousel.js +6 -11
- package/styled-components/cjs/components/Carousel/CarouselNew/Carousel.styles.js +2 -5
- package/styled-components/cjs/components/Carousel/CarouselNew/hooks/useCarousel.js +17 -60
- package/styled-components/cjs/components/Carousel/CarouselNew/ui/index.js +0 -11
- package/styled-components/cjs/components/Carousel/CarouselOld/CarouselItem.js +1 -1
- package/styled-components/cjs/components/Carousel/index.js +4 -4
- package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +22 -15
- package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.config.js +14 -2
- package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.stories.tsx +92 -32
- package/styled-components/es/components/Carousel/CarouselNew/Carousel.js +6 -11
- package/styled-components/es/components/Carousel/CarouselNew/Carousel.styles.js +2 -5
- package/styled-components/es/components/Carousel/CarouselNew/hooks/useCarousel.js +17 -60
- package/styled-components/es/components/Carousel/CarouselNew/ui/index.js +0 -1
- package/styled-components/es/components/Carousel/CarouselOld/CarouselItem.js +1 -1
- package/styled-components/es/components/Carousel/index.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +22 -15
- package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.config.js +14 -2
- package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.stories.tsx +92 -32
- package/types/components/Carousel/CarouselNew/Carousel.d.ts.map +1 -1
- package/types/components/Carousel/CarouselNew/Carousel.styles.d.ts +1 -4
- package/types/components/Carousel/CarouselNew/Carousel.styles.d.ts.map +1 -1
- package/types/components/Carousel/CarouselNew/Carousel.types.d.ts +6 -67
- package/types/components/Carousel/CarouselNew/Carousel.types.d.ts.map +1 -1
- package/types/components/Carousel/CarouselNew/hooks/useCarousel.d.ts +4 -6
- package/types/components/Carousel/CarouselNew/hooks/useCarousel.d.ts.map +1 -1
- package/types/components/Carousel/CarouselNew/ui/index.d.ts +0 -1
- package/types/components/Carousel/CarouselNew/ui/index.d.ts.map +1 -1
- package/types/components/Carousel/CarouselOld/CarouselItem.d.ts.map +1 -1
- package/types/components/Carousel/index.d.ts +1 -1
- package/types/components/Carousel/index.d.ts.map +1 -1
- package/cjs/components/Carousel/CarouselNew/hooks/useDragScroll.js +0 -62
- package/cjs/components/Carousel/CarouselNew/hooks/useDragScroll.js.map +0 -1
- package/emotion/cjs/components/Carousel/CarouselNew/hooks/useDragScroll.js +0 -65
- package/emotion/cjs/components/Carousel/CarouselNew/ui/Item/Item.js +0 -38
- package/emotion/es/components/Carousel/CarouselNew/hooks/useDragScroll.js +0 -59
- package/emotion/es/components/Carousel/CarouselNew/ui/Item/Item.js +0 -31
- package/es/components/Carousel/CarouselNew/hooks/useDragScroll.js +0 -58
- package/es/components/Carousel/CarouselNew/hooks/useDragScroll.js.map +0 -1
- package/styled-components/cjs/components/Carousel/CarouselNew/hooks/useDragScroll.js +0 -65
- package/styled-components/cjs/components/Carousel/CarouselNew/ui/Item/Item.js +0 -37
- package/styled-components/es/components/Carousel/CarouselNew/hooks/useDragScroll.js +0 -59
- package/styled-components/es/components/Carousel/CarouselNew/ui/Item/Item.js +0 -30
- package/types/components/Carousel/CarouselNew/hooks/useDragScroll.d.ts +0 -2
- package/types/components/Carousel/CarouselNew/hooks/useDragScroll.d.ts.map +0 -1
- package/types/components/Carousel/CarouselNew/ui/Item/Item.d.ts +0 -4
- package/types/components/Carousel/CarouselNew/ui/Item/Item.d.ts.map +0 -1
@@ -12,6 +12,7 @@ import { Carousel, CarouselItem } from './Carousel';
|
|
12
12
|
type StoryCarouselProps = ComponentProps<typeof Carousel> & {
|
13
13
|
slides: number;
|
14
14
|
visibleDots: number;
|
15
|
+
paginationDisabled: boolean;
|
15
16
|
paginationCentered: boolean;
|
16
17
|
};
|
17
18
|
|
@@ -35,40 +36,48 @@ const meta: Meta<StoryCarouselProps> = {
|
|
35
36
|
},
|
36
37
|
},
|
37
38
|
align: {
|
38
|
-
options: ['start', 'center', 'end'],
|
39
|
+
options: ['start', 'center', 'end', 'activeDirection'],
|
39
40
|
control: {
|
40
41
|
type: 'inline-radio',
|
41
42
|
},
|
42
43
|
},
|
43
|
-
isDragScrollDisabled: {
|
44
|
-
control: 'boolean',
|
45
|
-
},
|
46
44
|
slides: {
|
47
45
|
control: 'number',
|
48
46
|
},
|
49
47
|
visibleDots: {
|
50
48
|
control: 'number',
|
51
49
|
},
|
52
|
-
|
50
|
+
controlArrowsDisabled: {
|
53
51
|
control: 'boolean',
|
54
52
|
},
|
55
|
-
|
56
|
-
control: '
|
53
|
+
paginationDisabled: {
|
54
|
+
control: 'boolean',
|
55
|
+
},
|
56
|
+
paginationCentered: {
|
57
|
+
control: 'boolean',
|
57
58
|
},
|
58
59
|
},
|
59
60
|
args: {
|
60
61
|
view: 'default',
|
61
62
|
size: 's',
|
62
63
|
align: 'center',
|
63
|
-
isDragScrollDisabled: false,
|
64
64
|
visibleDots: 6,
|
65
65
|
slides: 10,
|
66
|
+
controlArrowsDisabled: false,
|
67
|
+
paginationDisabled: false,
|
66
68
|
paginationCentered: false,
|
67
|
-
gap: '20px',
|
68
69
|
},
|
69
70
|
parameters: {
|
70
71
|
controls: {
|
71
|
-
include: [
|
72
|
+
include: [
|
73
|
+
'align',
|
74
|
+
'visibleDots',
|
75
|
+
'slides',
|
76
|
+
'controlArrowsDisabled',
|
77
|
+
'paginationDisabled',
|
78
|
+
'paginationCentered',
|
79
|
+
'gap',
|
80
|
+
],
|
72
81
|
},
|
73
82
|
},
|
74
83
|
};
|
@@ -81,7 +90,7 @@ const StyledCard = styled.div`
|
|
81
90
|
justify-content: center;
|
82
91
|
position: relative;
|
83
92
|
border-radius: 8px;
|
84
|
-
width:
|
93
|
+
width: 400px;
|
85
94
|
height: 370px;
|
86
95
|
background-color: #add8e6;
|
87
96
|
font-size: 30px;
|
@@ -91,9 +100,8 @@ const StoryDefault = ({
|
|
91
100
|
align,
|
92
101
|
visibleDots,
|
93
102
|
slides,
|
103
|
+
paginationDisabled,
|
94
104
|
paginationCentered,
|
95
|
-
isDragScrollDisabled,
|
96
|
-
gap,
|
97
105
|
...rest
|
98
106
|
}: StoryCarouselProps) => {
|
99
107
|
const items = Array(slides)
|
@@ -109,9 +117,8 @@ const StoryDefault = ({
|
|
109
117
|
<Carousel
|
110
118
|
detectActive
|
111
119
|
scrollAlign={align}
|
112
|
-
isDragScrollDisabled={isDragScrollDisabled}
|
113
|
-
gap={gap}
|
114
120
|
paginationOptions={{
|
121
|
+
disabled: paginationDisabled,
|
115
122
|
visibleDots,
|
116
123
|
centered: paginationCentered,
|
117
124
|
}}
|
@@ -1,4 +1,16 @@
|
|
1
|
+
import { css } from '@emotion/react';
|
2
|
+
import { carouselNewTokens as tokens } from "../../../../components/Carousel";
|
1
3
|
export var config = {
|
2
|
-
defaults: {
|
3
|
-
|
4
|
+
defaults: {
|
5
|
+
view: 'default',
|
6
|
+
size: 's'
|
7
|
+
},
|
8
|
+
variations: {
|
9
|
+
view: {
|
10
|
+
"default": /*#__PURE__*/css(tokens.paginationDotBackground, ":var(--surface-transparent-tertiary);", tokens.paginationDotActiveBackground, ":var(--surface-solid-default);;label:plasma-new-hope__default;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9DYXJvdXNlbC9DYXJvdXNlbC5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBV3dCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9DYXJvdXNlbC9DYXJvdXNlbC5jb25maWcudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IGNhcm91c2VsTmV3VG9rZW5zIGFzIHRva2VucyB9IGZyb20gJy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvQ2Fyb3VzZWwnO1xuXG5leHBvcnQgY29uc3QgY29uZmlnID0ge1xuICAgIGRlZmF1bHRzOiB7XG4gICAgICAgIHZpZXc6ICdkZWZhdWx0JyxcbiAgICAgICAgc2l6ZTogJ3MnLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMucGFnaW5hdGlvbkRvdEJhY2tncm91bmR9OiB2YXIoLS1zdXJmYWNlLXRyYW5zcGFyZW50LXRlcnRpYXJ5KTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5wYWdpbmF0aW9uRG90QWN0aXZlQmFja2dyb3VuZH06IHZhcigtLXN1cmZhY2Utc29saWQtZGVmYXVsdCk7XG4gICAgICAgICAgICBgLFxuICAgICAgICB9LFxuICAgICAgICBzaXplOiB7XG4gICAgICAgICAgICBzOiBjc3NgYCxcbiAgICAgICAgfSxcbiAgICB9LFxufTtcbiJdfQ== */"))
|
11
|
+
},
|
12
|
+
size: {
|
13
|
+
s: /*#__PURE__*/css(";label:plasma-new-hope__s;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9DYXJvdXNlbC9DYXJvdXNlbC5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJrQiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9leGFtcGxlcy9wbGFzbWFfd2ViL2NvbXBvbmVudHMvQ2Fyb3VzZWwvQ2Fyb3VzZWwuY29uZmlnLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBjYXJvdXNlbE5ld1Rva2VucyBhcyB0b2tlbnMgfSBmcm9tICcuLi8uLi8uLi8uLi9jb21wb25lbnRzL0Nhcm91c2VsJztcblxuZXhwb3J0IGNvbnN0IGNvbmZpZyA9IHtcbiAgICBkZWZhdWx0czoge1xuICAgICAgICB2aWV3OiAnZGVmYXVsdCcsXG4gICAgICAgIHNpemU6ICdzJyxcbiAgICB9LFxuICAgIHZhcmlhdGlvbnM6IHtcbiAgICAgICAgdmlldzoge1xuICAgICAgICAgICAgZGVmYXVsdDogY3NzYFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLnBhZ2luYXRpb25Eb3RCYWNrZ3JvdW5kfTogdmFyKC0tc3VyZmFjZS10cmFuc3BhcmVudC10ZXJ0aWFyeSk7XG4gICAgICAgICAgICAgICAgJHt0b2tlbnMucGFnaW5hdGlvbkRvdEFjdGl2ZUJhY2tncm91bmR9OiB2YXIoLS1zdXJmYWNlLXNvbGlkLWRlZmF1bHQpO1xuICAgICAgICAgICAgYCxcbiAgICAgICAgfSxcbiAgICAgICAgc2l6ZToge1xuICAgICAgICAgICAgczogY3NzYGAsXG4gICAgICAgIH0sXG4gICAgfSxcbn07XG4iXX0= */"))
|
14
|
+
}
|
15
|
+
}
|
4
16
|
};
|
@@ -1,6 +1,6 @@
|
|
1
|
-
import {
|
1
|
+
import { carouselNewConfig, CarouselItem } from "../../../../components/Carousel";
|
2
2
|
import { component, mergeConfig } from "../../../../engines";
|
3
3
|
import { config } from "./Carousel.config";
|
4
|
-
export var mergedConfig = /*#__PURE__*/mergeConfig(
|
4
|
+
export var mergedConfig = /*#__PURE__*/mergeConfig(carouselNewConfig, config);
|
5
5
|
export var Carousel = /*#__PURE__*/component(mergedConfig);
|
6
6
|
export { CarouselItem };
|
@@ -2,76 +2,136 @@ import * as React from 'react';
|
|
2
2
|
import type { ComponentProps } from 'react';
|
3
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
4
4
|
import styled from 'styled-components';
|
5
|
+
import { getConfigVariations } from '@salutejs/plasma-sb-utils';
|
5
6
|
|
6
7
|
import { WithTheme } from '../../../_helpers';
|
7
8
|
|
9
|
+
import { config } from './Carousel.config';
|
8
10
|
import { Carousel, CarouselItem } from './Carousel';
|
9
11
|
|
10
|
-
type StoryCarouselProps = ComponentProps<typeof Carousel
|
12
|
+
type StoryCarouselProps = ComponentProps<typeof Carousel> & {
|
13
|
+
slides: number;
|
14
|
+
visibleDots: number;
|
15
|
+
paginationDisabled: boolean;
|
16
|
+
paginationCentered: boolean;
|
17
|
+
};
|
18
|
+
|
19
|
+
const { views, sizes } = getConfigVariations(config);
|
11
20
|
|
12
21
|
const meta: Meta<StoryCarouselProps> = {
|
13
22
|
title: 'web/Navigation/Carousel',
|
14
23
|
component: Carousel,
|
15
24
|
decorators: [WithTheme],
|
16
25
|
argTypes: {
|
26
|
+
view: {
|
27
|
+
options: views,
|
28
|
+
control: {
|
29
|
+
type: 'select',
|
30
|
+
},
|
31
|
+
},
|
32
|
+
size: {
|
33
|
+
options: sizes,
|
34
|
+
control: {
|
35
|
+
type: 'inline-radio',
|
36
|
+
},
|
37
|
+
},
|
17
38
|
align: {
|
18
|
-
options: ['
|
39
|
+
options: ['start', 'center', 'end', 'activeDirection'],
|
19
40
|
control: {
|
20
41
|
type: 'inline-radio',
|
21
42
|
},
|
22
43
|
},
|
23
|
-
|
44
|
+
slides: {
|
45
|
+
control: 'number',
|
46
|
+
},
|
47
|
+
visibleDots: {
|
48
|
+
control: 'number',
|
49
|
+
},
|
50
|
+
controlArrowsDisabled: {
|
51
|
+
control: 'boolean',
|
52
|
+
},
|
53
|
+
paginationDisabled: {
|
54
|
+
control: 'boolean',
|
55
|
+
},
|
56
|
+
paginationCentered: {
|
24
57
|
control: 'boolean',
|
25
58
|
},
|
26
59
|
},
|
27
60
|
args: {
|
61
|
+
view: 'default',
|
62
|
+
size: 's',
|
28
63
|
align: 'center',
|
29
|
-
|
64
|
+
visibleDots: 6,
|
65
|
+
slides: 10,
|
66
|
+
controlArrowsDisabled: false,
|
67
|
+
paginationDisabled: false,
|
68
|
+
paginationCentered: false,
|
30
69
|
},
|
31
70
|
parameters: {
|
32
71
|
controls: {
|
33
|
-
include: [
|
72
|
+
include: [
|
73
|
+
'align',
|
74
|
+
'visibleDots',
|
75
|
+
'slides',
|
76
|
+
'controlArrowsDisabled',
|
77
|
+
'paginationDisabled',
|
78
|
+
'paginationCentered',
|
79
|
+
'gap',
|
80
|
+
],
|
34
81
|
},
|
35
82
|
},
|
36
83
|
};
|
37
84
|
|
38
85
|
export default meta;
|
39
86
|
|
40
|
-
const items = Array(25)
|
41
|
-
.fill({
|
42
|
-
title: 'Заголовок',
|
43
|
-
})
|
44
|
-
.map(({ title }, i) => ({
|
45
|
-
id: i,
|
46
|
-
title: `${title} ${i}`,
|
47
|
-
}));
|
48
|
-
|
49
87
|
const StyledCard = styled.div`
|
88
|
+
display: flex;
|
89
|
+
align-items: center;
|
90
|
+
justify-content: center;
|
50
91
|
position: relative;
|
51
92
|
border-radius: 8px;
|
52
|
-
width:
|
53
|
-
height:
|
54
|
-
padding: 8px;
|
93
|
+
width: 400px;
|
94
|
+
height: 370px;
|
55
95
|
background-color: #add8e6;
|
96
|
+
font-size: 30px;
|
56
97
|
`;
|
57
98
|
|
58
|
-
const StoryDefault = ({
|
59
|
-
|
99
|
+
const StoryDefault = ({
|
100
|
+
align,
|
101
|
+
visibleDots,
|
102
|
+
slides,
|
103
|
+
paginationDisabled,
|
104
|
+
paginationCentered,
|
105
|
+
...rest
|
106
|
+
}: StoryCarouselProps) => {
|
107
|
+
const items = Array(slides)
|
108
|
+
.fill(1)
|
109
|
+
.map((_, i) => ({
|
110
|
+
id: i,
|
111
|
+
title: i,
|
112
|
+
}));
|
60
113
|
|
61
114
|
return (
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
115
|
+
<>
|
116
|
+
<div style={{ width: '600px' }}>
|
117
|
+
<Carousel
|
118
|
+
detectActive
|
119
|
+
scrollAlign={align}
|
120
|
+
paginationOptions={{
|
121
|
+
disabled: paginationDisabled,
|
122
|
+
visibleDots,
|
123
|
+
centered: paginationCentered,
|
124
|
+
}}
|
125
|
+
{...rest}
|
126
|
+
>
|
127
|
+
{items.map((item, i) => (
|
128
|
+
<CarouselItem key={i} scrollSnapAlign={align}>
|
129
|
+
<StyledCard>{item.title}</StyledCard>
|
130
|
+
</CarouselItem>
|
131
|
+
))}
|
132
|
+
</Carousel>
|
133
|
+
</div>
|
134
|
+
</>
|
75
135
|
);
|
76
136
|
};
|
77
137
|
|
@@ -28,13 +28,11 @@
|
|
28
28
|
|
29
29
|
.IconButton_styles_403on7_b1ua728l__d34a8ea7{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);color:var(--plasma-button-color);background:var(--plasma-button-background-color);height:var(--plasma-button-height);width:var(--plasma-button-width);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);position:relative;--plasma-button-padding:0;--plasma-button-color:var(--plasma-icon-button-color);--plasma-button-background-color:var(--plasma-icon-button-background-color);--plasma-button-color-hover:var(--plasma-icon-button-color-hover);--plasma-button-background-color-hover:var(--plasma-icon-button-background-color-hover);--plasma-button-color-active:var(--plasma-icon-button-color-active);--plasma-button-background-color-active:var(--plasma-icon-button-background-color-active);--plasma-button-loading-background-color:var(--plasma-icon-button-loading-background-color);--plasma-button-font-family:var(--plasma-icon-button-font-family);--plasma-button-font-size:var(--plasma-icon-button-font-size);--plasma-button-font-style:var(--plasma-icon-button-font-style);--plasma-button-font-weight:var(--plasma-icon-button-font-weight);--plasma-button-letter-spacing:var(--plasma-icon-button-letter-spacing);--plasma-button-line-height:var(--plasma-icon-button-line-height);--plasma-button-width:var(--plasma-icon-button-width);--plasma-button-height:var(--plasma-icon-button-height);--plasma-button-radius:var(--plasma-icon-button-radius);--plasma-button-disabled-opacity:var(--plasma-icon-button-disabled-opacity);--plasma-button-focus-color:var(--plasma-icon-button-focus-color);--plasma-button-spinner-size:var(--plasma-icon-button-spinner-size);--plasma-button-spinner-color:var(--plasma-icon-button-spinner-color);}a.IconButton_styles_403on7_b1ua728l__d34a8ea7{-webkit-text-decoration:none;text-decoration:none;}.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_buttonSquare__d34a8ea7{width:var(--plasma-button-height);padding:0;}.IconButton_styles_403on7_b1ua728l__d34a8ea7:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.IconButton_styles_403on7_b1ua728l__d34a8ea7:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}.IconButton_styles_403on7_b1ua728l__d34a8ea7:focus{outline:none;}.IconButton_styles_403on7_b1ua728l__d34a8ea7::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_focusVisible__d34a8ea7:focus::before,.IconButton_styles_403on7_b1ua728l__d34a8ea7[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}.IconButton_styles_403on7_b1ua728l__d34a8ea7[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.IconButton_styles_403on7_b1ua728l__d34a8ea7[disabled]:hover,.IconButton_styles_403on7_b1ua728l__d34a8ea7[disabled]:active{scale:none;color:var(--plasma-button-color);background:var(--plasma-button-background-color);}.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_buttonStretchingFixed__d34a8ea7{width:var(--plasma-button-width);}.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_buttonStretchingFilled__d34a8ea7{width:100%;}.IconButton_styles_403on7_b1ua728l__d34a8ea7.IconButton_styles_403on7_buttonStretchingAuto__d34a8ea7{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
|
30
30
|
|
31
|
-
.
|
32
|
-
.
|
33
|
-
.
|
34
|
-
.
|
35
|
-
.
|
36
|
-
|
37
|
-
.Item_1qz9bfn_sfwcury__aad46e58{-webkit-scroll-snap-align:var(--sfwcury-0);-moz-scroll-snap-align:var(--sfwcury-0);-ms-scroll-snap-align:var(--sfwcury-0);scroll-snap-align:var(--sfwcury-0);-webkit-scroll-snap-stop:var(--sfwcury-1);-moz-scroll-snap-stop:var(--sfwcury-1);-ms-scroll-snap-stop:var(--sfwcury-1);scroll-snap-stop:var(--sfwcury-1);}
|
31
|
+
.Carousel_styles_a2t6qm_b13uu57o__25de5594{position:relative;}
|
32
|
+
.Carousel_styles_a2t6qm_c1gygdut__25de5594{position:relative;margin-left:calc(var(--temporary-carousel-padding) * -1);margin-right:calc(var(--temporary-carousel-padding) * -1);padding:0;list-style:none;-ms-overflow-style:none;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-moz-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);--temporary-carousel-padding:0.625rem;}.Carousel_styles_a2t6qm_c1gygdut__25de5594::-webkit-scrollbar{display:none;}
|
33
|
+
.Carousel_styles_a2t6qm_c76zbfp__25de5594{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
|
34
|
+
.Carousel_styles_a2t6qm_i1cnnvc1__25de5594{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:0.75rem;z-index:10;--plasma-icon-button-color:var(--text-primary);--plasma-icon-button-background-color:var(--surface-transparent-secondary);--plasma-icon-button-loading-background-color:var(--plasma-icon-button-background-color);--plasma-icon-button-background-color-hover:var(--surface-transparent-secondary-hover);--plasma-icon-button-background-color-active:var(--surface-transparent-secondary-active);--plasma-icon-button-height:2.5rem;--plasma-icon-button-width:2.5rem;--plasma-icon-button-padding:1rem;--plasma-icon-button-radius:0.625rem;}.Carousel_styles_a2t6qm_i1cnnvc1__25de5594.Carousel_styles_a2t6qm_carouselRightControlButton__25de5594{left:auto;right:0.75rem;}
|
35
|
+
.Carousel_styles_a2t6qm_c1ff2k98__25de5594{position:relative;}
|
38
36
|
|
39
37
|
.Dots_styles_ea836d_wn5xio__3fa33efc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin-top:0.75rem;--duration:0.3s;--half-duration:0.15s;}
|
40
38
|
.Dots_styles_ea836d_tnn1xpa__3fa33efc{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition:-webkit-transform 0s ease;-webkit-transition:transform 0s ease;transition:transform 0s ease;}.Dots_styles_ea836d_tnn1xpa__3fa33efc.Dots_styles_ea836d_dotAnimating__3fa33efc{-webkit-transition:-webkit-transform var(--duration) ease;-webkit-transition:transform var(--duration) ease;transition:transform var(--duration) ease;}.Dots_styles_ea836d_tnn1xpa__3fa33efc .Dots_styles_ea836d_dot__3fa33efc{width:0.5rem;height:0.5rem;margin:0 0.25rem;cursor:pointer;background-color:var(--plasma-carousel-pagination-dot-background);border-radius:100%;}.Dots_styles_ea836d_tnn1xpa__3fa33efc .Dots_styles_ea836d_dot__3fa33efc.Dots_styles_ea836d_dotActive__3fa33efc{background-color:var(--plasma-carousel-pagination-dot-active-background);}@-webkit-keyframes Dots_styles_ea836d_fadeOutTnn1xpa__3fa33efc{from{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);opacity:1;}to{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}}@keyframes Dots_styles_ea836d_fadeOutTnn1xpa__3fa33efc{from{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);opacity:1;}to{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;}}.Dots_styles_ea836d_tnn1xpa__3fa33efc .Dots_styles_ea836d_dot__3fa33efc.Dots_styles_ea836d_dotAnimateOut__3fa33efc{-webkit-animation:Dots_styles_ea836d_fadeOutTnn1xpa__3fa33efc var(--half-duration) ease forwards;animation:Dots_styles_ea836d_fadeOutTnn1xpa__3fa33efc var(--half-duration) ease forwards;}@-webkit-keyframes Dots_styles_ea836d_shrinkingTnn1xpa__3fa33efc{from{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}to{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);}}@keyframes Dots_styles_ea836d_shrinkingTnn1xpa__3fa33efc{from{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}to{-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);}}.Dots_styles_ea836d_tnn1xpa__3fa33efc .Dots_styles_ea836d_dot__3fa33efc.Dots_styles_ea836d_dotShrinking__3fa33efc{-webkit-animation:Dots_styles_ea836d_shrinkingTnn1xpa__3fa33efc var(--half-duration) var(--half-duration) ease forwards;animation:Dots_styles_ea836d_shrinkingTnn1xpa__3fa33efc var(--half-duration) var(--half-duration) ease forwards;}
|
@@ -5,7 +5,6 @@ import { base as base$2 } from './variations/_size/base.js';
|
|
5
5
|
import { base as base$1 } from './variations/_view/base.js';
|
6
6
|
import { ControlsWrapper, IconButton, CarouselWrapper, CarouselTrack, base } from './Carousel.styles.js';
|
7
7
|
import { useCarousel } from './hooks/useCarousel.js';
|
8
|
-
import { useDragScroll } from './hooks/useDragScroll.js';
|
9
8
|
import { IconDisclosureLeft } from '../../_Icon/Icons/IconDisclosureLeft.js';
|
10
9
|
import { IconDisclosureRight } from '../../_Icon/Icons/IconDisclosureRight.js';
|
11
10
|
import { Dots } from './ui/Dots/Dots.js';
|
@@ -19,11 +18,11 @@ var carouselNewRoot = function carouselNewRoot(Root) {
|
|
19
18
|
return /*#__PURE__*/forwardRef(function (_ref, ref) {
|
20
19
|
var view = _ref.view,
|
21
20
|
size = _ref.size,
|
22
|
-
scrollAlign = _ref.scrollAlign,
|
21
|
+
_ref$scrollAlign = _ref.scrollAlign,
|
22
|
+
scrollAlign = _ref$scrollAlign === void 0 ? 'center' : _ref$scrollAlign,
|
23
23
|
children = _ref.children,
|
24
|
-
_ref$
|
25
|
-
|
26
|
-
gap = _ref.gap,
|
24
|
+
_ref$controlArrowsDis = _ref.controlArrowsDisabled,
|
25
|
+
controlArrowsDisabled = _ref$controlArrowsDis === void 0 ? 'false' : _ref$controlArrowsDis,
|
27
26
|
paginationOptions = _ref.paginationOptions,
|
28
27
|
className = _ref.className,
|
29
28
|
style = _ref.style;
|
@@ -45,14 +44,13 @@ var carouselNewRoot = function carouselNewRoot(Root) {
|
|
45
44
|
}),
|
46
45
|
scrollRef = _useCarousel.scrollRef,
|
47
46
|
trackRef = _useCarousel.trackRef;
|
48
|
-
useDragScroll(scrollRef, isDragScrollDisabled);
|
49
47
|
return /*#__PURE__*/React.createElement(Root, {
|
50
48
|
className: className,
|
51
49
|
style: style,
|
52
50
|
size: size,
|
53
51
|
view: view,
|
54
52
|
ref: ref
|
55
|
-
}, /*#__PURE__*/React.createElement(ControlsWrapper, null, index !== 0 && /*#__PURE__*/React.createElement(IconButton, {
|
53
|
+
}, /*#__PURE__*/React.createElement(ControlsWrapper, null, index !== 0 && !controlArrowsDisabled && /*#__PURE__*/React.createElement(IconButton, {
|
56
54
|
pin: "circle-circle",
|
57
55
|
onClick: handleClickLeft
|
58
56
|
}, _IconDisclosureLeft || (_IconDisclosureLeft = /*#__PURE__*/React.createElement(IconDisclosureLeft, {
|
@@ -62,10 +60,7 @@ var carouselNewRoot = function carouselNewRoot(Root) {
|
|
62
60
|
ref: scrollRef
|
63
61
|
}, /*#__PURE__*/React.createElement(CarouselTrack, {
|
64
62
|
ref: trackRef
|
65
|
-
|
66
|
-
,
|
67
|
-
gap: gap
|
68
|
-
}, children)), index !== slidesAmount - 1 && /*#__PURE__*/React.createElement(IconButton, {
|
63
|
+
}, children)), index !== slidesAmount - 1 && !controlArrowsDisabled && /*#__PURE__*/React.createElement(IconButton, {
|
69
64
|
className: classes.rightControlButton,
|
70
65
|
pin: "circle-circle",
|
71
66
|
onClick: handleClickRight
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.tsx"],"sourcesContent":["import { RootProps } from 'src/engines';\nimport React, { forwardRef, useState, Children } from 'react';\nimport { IconDisclosureLeft, IconDisclosureRight } from 'src/components/_Icon';\n\nimport { classes } from './Carousel.tokens';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base, CarouselWrapper, CarouselTrack, ControlsWrapper, IconButton } from './Carousel.styles';\nimport { CarouselNewProps } from './Carousel.types';\nimport { useCarousel } from './hooks/useCarousel';\nimport {
|
1
|
+
{"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.tsx"],"sourcesContent":["import { RootProps } from 'src/engines';\nimport React, { forwardRef, useState, Children } from 'react';\nimport { IconDisclosureLeft, IconDisclosureRight } from 'src/components/_Icon';\n\nimport { classes } from './Carousel.tokens';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base, CarouselWrapper, CarouselTrack, ControlsWrapper, IconButton } from './Carousel.styles';\nimport { CarouselNewProps } from './Carousel.types';\nimport { useCarousel } from './hooks/useCarousel';\nimport { Dots } from './ui';\n\n/**\n * Компонент для создания списков с прокруткой.\n */\nexport const carouselNewRoot = (Root: RootProps<HTMLDivElement, CarouselNewProps>) =>\n forwardRef<HTMLDivElement, CarouselNewProps>(\n (\n {\n view,\n size,\n scrollAlign = 'center',\n children,\n controlArrowsDisabled = 'false',\n paginationOptions,\n className,\n style,\n },\n ref,\n ) => {\n const [index, setIndex] = useState(0);\n\n const slidesAmount = Children.count(children);\n\n const handleClickLeft = () => {\n setIndex(Math.max(0, index - 1));\n };\n\n const handleClickRight = () => {\n setIndex(Math.min(slidesAmount - 1, index + 1));\n };\n\n const { scrollRef, trackRef } = useCarousel({\n index,\n scrollAlign,\n onIndexChange: setIndex,\n });\n\n return (\n <Root className={className} style={style} size={size} view={view} ref={ref}>\n <ControlsWrapper>\n {index !== 0 && !controlArrowsDisabled && (\n <IconButton pin=\"circle-circle\" onClick={handleClickLeft}>\n <IconDisclosureLeft size=\"m\" color=\"inherit\" />\n </IconButton>\n )}\n\n <CarouselWrapper ref={scrollRef}>\n <CarouselTrack ref={trackRef}>{children}</CarouselTrack>\n </CarouselWrapper>\n\n {index !== slidesAmount - 1 && !controlArrowsDisabled && (\n <IconButton\n className={classes.rightControlButton}\n pin=\"circle-circle\"\n onClick={handleClickRight}\n >\n <IconDisclosureRight size=\"m\" color=\"inherit\" />\n </IconButton>\n )}\n </ControlsWrapper>\n\n {!paginationOptions?.disabled && (\n <Dots\n index={index}\n onChange={setIndex}\n visibleCount={paginationOptions?.visibleDots || slidesAmount}\n count={slidesAmount}\n centered={paginationOptions?.centered || false}\n />\n )}\n </Root>\n );\n },\n );\n\nexport const carouselNewConfig = {\n name: 'Carousel',\n tag: 'div',\n layout: carouselNewRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 's',\n },\n};\n"],"names":["carouselNewRoot","Root","forwardRef","_ref","ref","view","size","_ref$scrollAlign","scrollAlign","children","_ref$controlArrowsDis","controlArrowsDisabled","paginationOptions","className","style","_useState","useState","_useState2","_slicedToArray","index","setIndex","slidesAmount","Children","count","handleClickLeft","Math","max","handleClickRight","min","_useCarousel","useCarousel","onIndexChange","scrollRef","trackRef","React","createElement","ControlsWrapper","IconButton","pin","onClick","_IconDisclosureLeft","IconDisclosureLeft","color","CarouselWrapper","CarouselTrack","classes","rightControlButton","_IconDisclosureRight","IconDisclosureRight","disabled","Dots","onChange","visibleCount","visibleDots","centered","carouselNewConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import './Carousel.
|
1
|
+
import './Carousel.styles_a2t6qm.css';
|
2
2
|
import { styled } from '@linaria/react';
|
3
3
|
import { component, mergeConfig } from '../../../engines/common.js';
|
4
4
|
import { iconButtonConfig } from '../../IconButton/IconButton.js';
|
@@ -11,24 +11,15 @@ var CarouselWrapper = /*#__PURE__*/styled('div')({
|
|
11
11
|
"class": "c1gygdut",
|
12
12
|
propsAsIs: false
|
13
13
|
});
|
14
|
-
var _exp = function _exp() {
|
15
|
-
return function (_ref) {
|
16
|
-
var gap = _ref.gap;
|
17
|
-
return gap || 0;
|
18
|
-
};
|
19
|
-
};
|
20
14
|
var CarouselTrack = /*#__PURE__*/styled('div')({
|
21
15
|
name: "CarouselTrack",
|
22
16
|
"class": "c76zbfp",
|
23
|
-
propsAsIs: false
|
24
|
-
vars: {
|
25
|
-
"c76zbfp-0": [/*#__PURE__*/_exp()]
|
26
|
-
}
|
17
|
+
propsAsIs: false
|
27
18
|
});
|
28
|
-
var
|
19
|
+
var _exp = function _exp() {
|
29
20
|
return IconButtonComponent;
|
30
21
|
};
|
31
|
-
var IconButton = /*#__PURE__*/styled(
|
22
|
+
var IconButton = /*#__PURE__*/styled(_exp())({
|
32
23
|
name: "IconButton",
|
33
24
|
"class": "i1cnnvc1",
|
34
25
|
propsAsIs: true
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Carousel.styles.js","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\nimport {
|
1
|
+
{"version":3,"file":"Carousel.styles.js","sources":["../../../../src/components/Carousel/CarouselNew/Carousel.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\nimport { component, mergeConfig } from 'src/engines';\nimport { iconButtonConfig, iconButtonTokens } from 'src/components/IconButton';\n\nimport { classes } from './Carousel.tokens';\n\nconst mergedConfig = mergeConfig(iconButtonConfig);\nexport const IconButtonComponent = component(mergedConfig);\n\nexport const base = css`\n position: relative;\n`;\n\nexport const CarouselWrapper = styled.div`\n position: relative;\n margin-left: calc(var(--temporary-carousel-padding) * -1);\n margin-right: calc(var(--temporary-carousel-padding) * -1);\n padding: 0;\n list-style: none;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n\n overflow-x: auto;\n overflow-y: hidden;\n\n scroll-behavior: smooth;\n scroll-snap-type: x mandatory;\n\n user-select: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n --temporary-carousel-padding: 0.625rem;\n`;\n\nexport const CarouselTrack = styled.div`\n display: inline-flex;\n flex-direction: row;\n`;\n\nexport const IconButton = styled(IconButtonComponent)`\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0.75rem;\n z-index: 10;\n\n ${iconButtonTokens.iconButtonColor}: var(--text-primary);\n ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary);\n ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});\n ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover);\n ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active);\n\n ${iconButtonTokens.iconButtonHeight}: 2.5rem;\n ${iconButtonTokens.iconButtonWidth}: 2.5rem;\n ${iconButtonTokens.iconButtonPadding}: 1rem;\n ${iconButtonTokens.iconButtonRadius}: 0.625rem;\n\n &.${classes.rightControlButton} {\n left: auto;\n right: 0.75rem;\n }\n`;\n\nexport const ControlsWrapper = styled.div`\n position: relative;\n`;\n"],"names":["mergedConfig","mergeConfig","iconButtonConfig","IconButtonComponent","component","base","CarouselWrapper","styled","name","class","propsAsIs","CarouselTrack","_exp","IconButton","ControlsWrapper"],"mappings":";;;;AAOA,IAAMA,YAAY,gBAAGC,WAAW,CAACC,gBAAgB,CAAC,CAAA;IACrCC,mBAAmB,gBAAGC,SAAS,CAACJ,YAAY,EAAC;AAEnD,IAAMK,IAAI,GAEhB,WAAA;AAEM,IAAMC,eAAe,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,iBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAuBpC,EAAA;AAEM,IAAMC,aAAa,gBAAGJ,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAGlC,EAAA;AAAC,IAAAE,IAAA,GAzCgBA,SAyChBA,IAAAA,GAAA;AAAA,EAAA,OAE+BT,mBAAmB,CAAA;AAAA,CAAA,CAAA;AAA7C,IAAMU,UAAU,gBAAGN,MAAM,CAAAK,IAAA,EAAA,CAAA,CAAA;AAAAJ,EAAAA,IAAA,EAAA,YAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAsB/B,EAAA;AAEM,IAAMI,eAAe,gBAAGP,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,iBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAEpC;;;;"}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
.b13uu57o{position:relative;}
|
2
|
-
.c1gygdut{position:relative;margin:
|
3
|
-
.c76zbfp{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;
|
2
|
+
.c1gygdut{position:relative;margin-left:calc(var(--temporary-carousel-padding) * -1);margin-right:calc(var(--temporary-carousel-padding) * -1);padding:0;list-style:none;-ms-overflow-style:none;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-moz-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);--temporary-carousel-padding:0.625rem;}.c1gygdut::-webkit-scrollbar{display:none;}
|
3
|
+
.c76zbfp{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
|
4
4
|
.i1cnnvc1{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:0.75rem;z-index:10;--plasma-icon-button-color:var(--text-primary);--plasma-icon-button-background-color:var(--surface-transparent-secondary);--plasma-icon-button-loading-background-color:var(--plasma-icon-button-background-color);--plasma-icon-button-background-color-hover:var(--surface-transparent-secondary-hover);--plasma-icon-button-background-color-active:var(--surface-transparent-secondary-active);--plasma-icon-button-height:2.5rem;--plasma-icon-button-width:2.5rem;--plasma-icon-button-padding:1rem;--plasma-icon-button-radius:0.625rem;}.i1cnnvc1.carousel-right-control-button{left:auto;right:0.75rem;}
|
5
5
|
.c1ff2k98{position:relative;}
|