@snack-uikit/carousel 0.2.21-preview-d96c83e8.0 → 0.2.21-preview-7adaddbe.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/dist/cjs/components/Carousel/Carousel.js +5 -1
- package/dist/cjs/components/Carousel/styles.module.css +21 -0
- package/dist/cjs/components/Control/Control.js +4 -1
- package/dist/cjs/components/Control/styles.module.css +45 -0
- package/dist/cjs/components/ItemProvider/ItemProvider.js +6 -1
- package/dist/cjs/components/ItemProvider/styles.module.css +39 -0
- package/dist/esm/components/Carousel/styles.module.css +21 -0
- package/dist/esm/components/Control/styles.module.css +45 -0
- package/dist/esm/components/ItemProvider/styles.module.css +39 -0
- package/package.json +5 -5
|
@@ -26,7 +26,11 @@ const utils_1 = require("@snack-uikit/utils");
|
|
|
26
26
|
const testIds_1 = require("../../testIds");
|
|
27
27
|
const Control_1 = require("../Control");
|
|
28
28
|
const ItemProvider_1 = require("../ItemProvider");
|
|
29
|
-
const styles_module_scss_1 = __importDefault({
|
|
29
|
+
const styles_module_scss_1 = __importDefault({
|
|
30
|
+
"carouselBase": "styles-module__carouselBase___14c3T",
|
|
31
|
+
"carousel": "styles-module__carousel___3CD7w",
|
|
32
|
+
"pagination": "styles-module__pagination___1trMs"
|
|
33
|
+
});
|
|
30
34
|
function Carousel(_a) {
|
|
31
35
|
var _b;
|
|
32
36
|
var {
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
.carouselBase{
|
|
2
|
+
position:relative;
|
|
3
|
+
display:flex;
|
|
4
|
+
box-sizing:border-box;
|
|
5
|
+
width:100%;
|
|
6
|
+
outline:none;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.carousel{
|
|
10
|
+
display:flex;
|
|
11
|
+
flex-direction:column;
|
|
12
|
+
align-items:center;
|
|
13
|
+
box-sizing:border-box;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.pagination{
|
|
17
|
+
padding-top:var(--space-carousel-sliders-wrap-padding-top, 8px);
|
|
18
|
+
display:flex;
|
|
19
|
+
justify-content:center;
|
|
20
|
+
box-sizing:border-box;
|
|
21
|
+
}
|
|
@@ -21,7 +21,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
21
21
|
const react_1 = require("react");
|
|
22
22
|
const icons_1 = require("@snack-uikit/icons");
|
|
23
23
|
const utils_1 = require("@snack-uikit/utils");
|
|
24
|
-
const styles_module_scss_1 = __importDefault({
|
|
24
|
+
const styles_module_scss_1 = __importDefault({
|
|
25
|
+
"control": "styles-module__control___abM3n",
|
|
26
|
+
"icon": "styles-module__icon___rPxrQ"
|
|
27
|
+
});
|
|
25
28
|
exports.Control = (0, react_1.forwardRef)((_a, ref) => {
|
|
26
29
|
var {
|
|
27
30
|
onClick,
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
.control{
|
|
2
|
+
width:var(--size-carousel-control-container, 40px);
|
|
3
|
+
height:var(--size-carousel-control-container, 40px);
|
|
4
|
+
border-radius:var(--radius-carousel-control-container, 24px);
|
|
5
|
+
border-width:var(--border-width-025m, 2px);
|
|
6
|
+
cursor:pointer;
|
|
7
|
+
position:absolute;
|
|
8
|
+
top:50%;
|
|
9
|
+
left:calc(var(--size-carousel-control-wrap-width, 20px) - var(--size-carousel-control-container, 40px));
|
|
10
|
+
transform:translateY(-50%);
|
|
11
|
+
display:flex;
|
|
12
|
+
flex-shrink:0;
|
|
13
|
+
align-items:center;
|
|
14
|
+
justify-content:center;
|
|
15
|
+
color:var(--sys-neutral-text-light, #8b8e9b);
|
|
16
|
+
background-color:var(--sys-neutral-background1-level, #fdfdfd);
|
|
17
|
+
border-color:transparent;
|
|
18
|
+
border-style:solid;
|
|
19
|
+
outline-color:transparent;
|
|
20
|
+
box-shadow:var(--box-shadow-elevation-level3, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 8px 16px 0px rgba(0, 0, 0, 0.0784313725));
|
|
21
|
+
}
|
|
22
|
+
.control:hover, .control:focus-visible{
|
|
23
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
24
|
+
}
|
|
25
|
+
.control:hover{
|
|
26
|
+
box-shadow:var(--box-shadow-elevation-level4, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 16px 16px 0px rgba(0, 0, 0, 0.0784313725));
|
|
27
|
+
}
|
|
28
|
+
.control:focus-visible{
|
|
29
|
+
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
30
|
+
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
31
|
+
outline-color:var(--border-state-focus-s-border-color, );
|
|
32
|
+
border-color:var(--sys-available-complementary, #1c1c24);
|
|
33
|
+
outline-color:var(--sys-available-on-complementary, #ffffff);
|
|
34
|
+
box-shadow:none;
|
|
35
|
+
}
|
|
36
|
+
.control[data-variant=next]{
|
|
37
|
+
right:calc(var(--size-carousel-control-wrap-width, 20px) - var(--size-carousel-control-container, 40px));
|
|
38
|
+
left:auto;
|
|
39
|
+
}
|
|
40
|
+
.control[data-variant=next]:focus-visible{
|
|
41
|
+
outline-offset:var(--dimension-025m, 2px);
|
|
42
|
+
}
|
|
43
|
+
.control[data-variant=next] .icon{
|
|
44
|
+
transform:rotate(180deg);
|
|
45
|
+
}
|
|
@@ -14,7 +14,12 @@ const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
|
|
|
14
14
|
const react_1 = require("react");
|
|
15
15
|
const testIds_1 = require("../../testIds");
|
|
16
16
|
const helpers_1 = require("./helpers");
|
|
17
|
-
const styles_module_scss_1 = __importDefault({
|
|
17
|
+
const styles_module_scss_1 = __importDefault({
|
|
18
|
+
"itemProvider": "styles-module__itemProvider___2_FFn",
|
|
19
|
+
"itemContainer": "styles-module__itemContainer___1kEJ4",
|
|
20
|
+
"itemTracker": "styles-module__itemTracker___2sH7F",
|
|
21
|
+
"hiddenItem": "styles-module__hiddenItem___2XGKu"
|
|
22
|
+
});
|
|
18
23
|
function ItemProvider(_ref) {
|
|
19
24
|
let {
|
|
20
25
|
items,
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
.itemProvider{
|
|
2
|
+
--gap:var(--dimension-2m, 16px);
|
|
3
|
+
padding-top:var(--space-carousel-content-layout-padding, 4px);
|
|
4
|
+
padding-bottom:var(--space-carousel-content-layout-padding, 4px);
|
|
5
|
+
padding-left:var(--space-carousel-content-layout-padding, 4px);
|
|
6
|
+
padding-right:var(--space-carousel-content-layout-padding, 4px);
|
|
7
|
+
overflow:hidden;
|
|
8
|
+
width:100%;
|
|
9
|
+
margin:calc(0px - var(--space-carousel-content-layout-padding, 4px));
|
|
10
|
+
}
|
|
11
|
+
.itemProvider[data-swipe]{
|
|
12
|
+
cursor:grab;
|
|
13
|
+
}
|
|
14
|
+
.itemProvider[data-swipe][data-pointers]{
|
|
15
|
+
cursor:grabbing;
|
|
16
|
+
-webkit-user-select:none;
|
|
17
|
+
-moz-user-select:none;
|
|
18
|
+
user-select:none;
|
|
19
|
+
-webkit-user-drag:none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.itemContainer{
|
|
23
|
+
flex-shrink:0;
|
|
24
|
+
box-sizing:border-box;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.itemTracker{
|
|
28
|
+
display:flex;
|
|
29
|
+
gap:var(--gap, var(--dimension-2m, 16px));
|
|
30
|
+
box-sizing:border-box;
|
|
31
|
+
height:100%;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.hiddenItem{
|
|
35
|
+
pointer-events:none;
|
|
36
|
+
}
|
|
37
|
+
.hiddenItem *{
|
|
38
|
+
pointer-events:none;
|
|
39
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
.carouselBase{
|
|
2
|
+
position:relative;
|
|
3
|
+
display:flex;
|
|
4
|
+
box-sizing:border-box;
|
|
5
|
+
width:100%;
|
|
6
|
+
outline:none;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.carousel{
|
|
10
|
+
display:flex;
|
|
11
|
+
flex-direction:column;
|
|
12
|
+
align-items:center;
|
|
13
|
+
box-sizing:border-box;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.pagination{
|
|
17
|
+
padding-top:var(--space-carousel-sliders-wrap-padding-top, 8px);
|
|
18
|
+
display:flex;
|
|
19
|
+
justify-content:center;
|
|
20
|
+
box-sizing:border-box;
|
|
21
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
.control{
|
|
2
|
+
width:var(--size-carousel-control-container, 40px);
|
|
3
|
+
height:var(--size-carousel-control-container, 40px);
|
|
4
|
+
border-radius:var(--radius-carousel-control-container, 24px);
|
|
5
|
+
border-width:var(--border-width-025m, 2px);
|
|
6
|
+
cursor:pointer;
|
|
7
|
+
position:absolute;
|
|
8
|
+
top:50%;
|
|
9
|
+
left:calc(var(--size-carousel-control-wrap-width, 20px) - var(--size-carousel-control-container, 40px));
|
|
10
|
+
transform:translateY(-50%);
|
|
11
|
+
display:flex;
|
|
12
|
+
flex-shrink:0;
|
|
13
|
+
align-items:center;
|
|
14
|
+
justify-content:center;
|
|
15
|
+
color:var(--sys-neutral-text-light, #8b8e9b);
|
|
16
|
+
background-color:var(--sys-neutral-background1-level, #fdfdfd);
|
|
17
|
+
border-color:transparent;
|
|
18
|
+
border-style:solid;
|
|
19
|
+
outline-color:transparent;
|
|
20
|
+
box-shadow:var(--box-shadow-elevation-level3, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 8px 16px 0px rgba(0, 0, 0, 0.0784313725));
|
|
21
|
+
}
|
|
22
|
+
.control:hover, .control:focus-visible{
|
|
23
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
24
|
+
}
|
|
25
|
+
.control:hover{
|
|
26
|
+
box-shadow:var(--box-shadow-elevation-level4, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 16px 16px 0px rgba(0, 0, 0, 0.0784313725));
|
|
27
|
+
}
|
|
28
|
+
.control:focus-visible{
|
|
29
|
+
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
30
|
+
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
31
|
+
outline-color:var(--border-state-focus-s-border-color, );
|
|
32
|
+
border-color:var(--sys-available-complementary, #1c1c24);
|
|
33
|
+
outline-color:var(--sys-available-on-complementary, #ffffff);
|
|
34
|
+
box-shadow:none;
|
|
35
|
+
}
|
|
36
|
+
.control[data-variant=next]{
|
|
37
|
+
right:calc(var(--size-carousel-control-wrap-width, 20px) - var(--size-carousel-control-container, 40px));
|
|
38
|
+
left:auto;
|
|
39
|
+
}
|
|
40
|
+
.control[data-variant=next]:focus-visible{
|
|
41
|
+
outline-offset:var(--dimension-025m, 2px);
|
|
42
|
+
}
|
|
43
|
+
.control[data-variant=next] .icon{
|
|
44
|
+
transform:rotate(180deg);
|
|
45
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
.itemProvider{
|
|
2
|
+
--gap:var(--dimension-2m, 16px);
|
|
3
|
+
padding-top:var(--space-carousel-content-layout-padding, 4px);
|
|
4
|
+
padding-bottom:var(--space-carousel-content-layout-padding, 4px);
|
|
5
|
+
padding-left:var(--space-carousel-content-layout-padding, 4px);
|
|
6
|
+
padding-right:var(--space-carousel-content-layout-padding, 4px);
|
|
7
|
+
overflow:hidden;
|
|
8
|
+
width:100%;
|
|
9
|
+
margin:calc(0px - var(--space-carousel-content-layout-padding, 4px));
|
|
10
|
+
}
|
|
11
|
+
.itemProvider[data-swipe]{
|
|
12
|
+
cursor:grab;
|
|
13
|
+
}
|
|
14
|
+
.itemProvider[data-swipe][data-pointers]{
|
|
15
|
+
cursor:grabbing;
|
|
16
|
+
-webkit-user-select:none;
|
|
17
|
+
-moz-user-select:none;
|
|
18
|
+
user-select:none;
|
|
19
|
+
-webkit-user-drag:none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.itemContainer{
|
|
23
|
+
flex-shrink:0;
|
|
24
|
+
box-sizing:border-box;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.itemTracker{
|
|
28
|
+
display:flex;
|
|
29
|
+
gap:var(--gap, var(--dimension-2m, 16px));
|
|
30
|
+
box-sizing:border-box;
|
|
31
|
+
height:100%;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.hiddenItem{
|
|
35
|
+
pointer-events:none;
|
|
36
|
+
}
|
|
37
|
+
.hiddenItem *{
|
|
38
|
+
pointer-events:none;
|
|
39
|
+
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
7
|
-
"version": "0.2.21-preview-
|
|
7
|
+
"version": "0.2.21-preview-7adaddbe.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -34,12 +34,12 @@
|
|
|
34
34
|
"license": "Apache-2.0",
|
|
35
35
|
"scripts": {},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@snack-uikit/icons": "0.22.2-preview-
|
|
38
|
-
"@snack-uikit/pagination": "0.7.2-preview-
|
|
39
|
-
"@snack-uikit/utils": "3.4.1-preview-
|
|
37
|
+
"@snack-uikit/icons": "0.22.2-preview-7adaddbe.0",
|
|
38
|
+
"@snack-uikit/pagination": "0.7.2-preview-7adaddbe.0",
|
|
39
|
+
"@snack-uikit/utils": "3.4.1-preview-7adaddbe.0",
|
|
40
40
|
"classnames": "2.3.2",
|
|
41
41
|
"lodash.debounce": "4.0.8",
|
|
42
42
|
"uncontrollable": "8.0.4"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "22ebb9f5f7f3407dd6a2a31baf58dab13199b158"
|
|
45
45
|
}
|