@getflip/swirl-components 0.281.0 → 0.282.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/components.json +228 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-carousel.cjs.entry.js +24 -3
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/collection/components/swirl-carousel/swirl-carousel.css +47 -29
- package/dist/collection/components/swirl-carousel/swirl-carousel.js +111 -2
- package/dist/collection/components/swirl-carousel/swirl-carousel.spec.js +2 -2
- package/dist/collection/components/swirl-time-input/swirl-time-input.stories.js +0 -3
- package/dist/components/swirl-carousel.js +28 -3
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-carousel.entry.js +24 -3
- package/dist/esm/swirl-components.js +1 -1
- package/dist/swirl-components/p-81d45e69.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-carousel/swirl-carousel.d.ts +4 -0
- package/dist/types/components/swirl-time-input/swirl-time-input.stories.d.ts +0 -5
- package/dist/types/components.d.ts +8 -0
- package/package.json +1 -1
- package/vscode-data.json +121 -0
- package/dist/swirl-components/p-d7a3b781.entry.js +0 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import { debounce } from "../../utils";
|
|
3
|
+
import classnames from "classnames";
|
|
3
4
|
/**
|
|
4
5
|
* slot - The slides
|
|
5
6
|
*/
|
|
@@ -31,7 +32,11 @@ export class SwirlCarousel {
|
|
|
31
32
|
this.label = undefined;
|
|
32
33
|
this.nextSlideButtonLabel = "Next slide";
|
|
33
34
|
this.previousSlideButtonLabel = "Previous slide";
|
|
35
|
+
this.fade = false;
|
|
34
36
|
this.loopAround = false;
|
|
37
|
+
this.padding = "16";
|
|
38
|
+
this.paddingBlockEnd = undefined;
|
|
39
|
+
this.paddingBlockStart = undefined;
|
|
35
40
|
this.paddingInlineEnd = undefined;
|
|
36
41
|
this.paddingInlineStart = undefined;
|
|
37
42
|
this.spacing = "16";
|
|
@@ -109,6 +114,15 @@ export class SwirlCarousel {
|
|
|
109
114
|
render() {
|
|
110
115
|
this.el.style.setProperty("--swirl-carousel-spacing", `${this.spacing}px`);
|
|
111
116
|
const slidesStyles = {
|
|
117
|
+
padding: Boolean(this.padding)
|
|
118
|
+
? `var(--s-space-${this.padding})`
|
|
119
|
+
: undefined,
|
|
120
|
+
paddingBlockEnd: Boolean(this.paddingBlockEnd)
|
|
121
|
+
? `var(--s-space-${this.paddingBlockEnd})`
|
|
122
|
+
: undefined,
|
|
123
|
+
paddingBlockStart: Boolean(this.paddingBlockStart)
|
|
124
|
+
? `var(--s-space-${this.paddingBlockStart})`
|
|
125
|
+
: undefined,
|
|
112
126
|
paddingInlineEnd: Boolean(this.paddingInlineEnd)
|
|
113
127
|
? `var(--s-space-${this.paddingInlineEnd})`
|
|
114
128
|
: undefined,
|
|
@@ -117,9 +131,16 @@ export class SwirlCarousel {
|
|
|
117
131
|
: undefined,
|
|
118
132
|
scrollPadding: Boolean(this.paddingInlineStart)
|
|
119
133
|
? `var(--s-space-${this.paddingInlineStart})`
|
|
120
|
-
:
|
|
134
|
+
: Boolean(this.padding)
|
|
135
|
+
? `var(--s-space-${this.padding})`
|
|
136
|
+
: undefined,
|
|
121
137
|
};
|
|
122
|
-
|
|
138
|
+
const className = classnames("carousel", {
|
|
139
|
+
"carousel--fade": this.fade,
|
|
140
|
+
"carousel--is-at-start": this.isAtStart,
|
|
141
|
+
"carousel--is-at-end": this.isAtEnd,
|
|
142
|
+
});
|
|
143
|
+
return (h(Host, { key: '7a23607d98ec5bc759fdcae7ba70df9a6940f187', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: '1223f0cd4acd6556cce428276f2664201bddbad0', class: className }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: '86a5e0b334e7bff828bb2477cf912d54b9489f2e', class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { key: '794a310026cec6b9203a99207e2aa4e732ff9e01', class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { key: '98179d7a5467375248823e59e5f8d1f080d5b39c', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '0ff0113a8d91b2366b517da4ef9d9219062d32b0', onSlotchange: this.onSlotChange })))));
|
|
123
144
|
}
|
|
124
145
|
static get is() { return "swirl-carousel"; }
|
|
125
146
|
static get encapsulation() { return "shadow"; }
|
|
@@ -188,6 +209,24 @@ export class SwirlCarousel {
|
|
|
188
209
|
"reflect": false,
|
|
189
210
|
"defaultValue": "\"Previous slide\""
|
|
190
211
|
},
|
|
212
|
+
"fade": {
|
|
213
|
+
"type": "boolean",
|
|
214
|
+
"mutable": false,
|
|
215
|
+
"complexType": {
|
|
216
|
+
"original": "boolean",
|
|
217
|
+
"resolved": "boolean",
|
|
218
|
+
"references": {}
|
|
219
|
+
},
|
|
220
|
+
"required": false,
|
|
221
|
+
"optional": true,
|
|
222
|
+
"docs": {
|
|
223
|
+
"tags": [],
|
|
224
|
+
"text": ""
|
|
225
|
+
},
|
|
226
|
+
"attribute": "fade",
|
|
227
|
+
"reflect": false,
|
|
228
|
+
"defaultValue": "false"
|
|
229
|
+
},
|
|
191
230
|
"loopAround": {
|
|
192
231
|
"type": "boolean",
|
|
193
232
|
"mutable": false,
|
|
@@ -206,6 +245,76 @@ export class SwirlCarousel {
|
|
|
206
245
|
"reflect": false,
|
|
207
246
|
"defaultValue": "false"
|
|
208
247
|
},
|
|
248
|
+
"padding": {
|
|
249
|
+
"type": "string",
|
|
250
|
+
"mutable": false,
|
|
251
|
+
"complexType": {
|
|
252
|
+
"original": "SwirlCarouselPadding",
|
|
253
|
+
"resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"40\" | \"48\" | \"64\" | \"8\"",
|
|
254
|
+
"references": {
|
|
255
|
+
"SwirlCarouselPadding": {
|
|
256
|
+
"location": "local",
|
|
257
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx",
|
|
258
|
+
"id": "src/components/swirl-carousel/swirl-carousel.tsx::SwirlCarouselPadding"
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
},
|
|
262
|
+
"required": false,
|
|
263
|
+
"optional": true,
|
|
264
|
+
"docs": {
|
|
265
|
+
"tags": [],
|
|
266
|
+
"text": ""
|
|
267
|
+
},
|
|
268
|
+
"attribute": "padding",
|
|
269
|
+
"reflect": false,
|
|
270
|
+
"defaultValue": "\"16\""
|
|
271
|
+
},
|
|
272
|
+
"paddingBlockEnd": {
|
|
273
|
+
"type": "string",
|
|
274
|
+
"mutable": false,
|
|
275
|
+
"complexType": {
|
|
276
|
+
"original": "SwirlCarouselPadding",
|
|
277
|
+
"resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"40\" | \"48\" | \"64\" | \"8\"",
|
|
278
|
+
"references": {
|
|
279
|
+
"SwirlCarouselPadding": {
|
|
280
|
+
"location": "local",
|
|
281
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx",
|
|
282
|
+
"id": "src/components/swirl-carousel/swirl-carousel.tsx::SwirlCarouselPadding"
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
},
|
|
286
|
+
"required": false,
|
|
287
|
+
"optional": true,
|
|
288
|
+
"docs": {
|
|
289
|
+
"tags": [],
|
|
290
|
+
"text": ""
|
|
291
|
+
},
|
|
292
|
+
"attribute": "padding-block-end",
|
|
293
|
+
"reflect": false
|
|
294
|
+
},
|
|
295
|
+
"paddingBlockStart": {
|
|
296
|
+
"type": "string",
|
|
297
|
+
"mutable": false,
|
|
298
|
+
"complexType": {
|
|
299
|
+
"original": "SwirlCarouselPadding",
|
|
300
|
+
"resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"40\" | \"48\" | \"64\" | \"8\"",
|
|
301
|
+
"references": {
|
|
302
|
+
"SwirlCarouselPadding": {
|
|
303
|
+
"location": "local",
|
|
304
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx",
|
|
305
|
+
"id": "src/components/swirl-carousel/swirl-carousel.tsx::SwirlCarouselPadding"
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
},
|
|
309
|
+
"required": false,
|
|
310
|
+
"optional": true,
|
|
311
|
+
"docs": {
|
|
312
|
+
"tags": [],
|
|
313
|
+
"text": ""
|
|
314
|
+
},
|
|
315
|
+
"attribute": "padding-block-start",
|
|
316
|
+
"reflect": false
|
|
317
|
+
},
|
|
209
318
|
"paddingInlineEnd": {
|
|
210
319
|
"type": "string",
|
|
211
320
|
"mutable": false,
|
|
@@ -9,8 +9,8 @@ describe("swirl-carousel", () => {
|
|
|
9
9
|
expect(page.root).toEqualHtml(`
|
|
10
10
|
<swirl-carousel aria-roledescription="carousel" role="group" style="--swirl-carousel-spacing: 16px;">
|
|
11
11
|
<mock:shadow-root>
|
|
12
|
-
<div class="carousel">
|
|
13
|
-
<div aria-live="polite" class="carousel__slides">
|
|
12
|
+
<div class="carousel carousel--is-at-end carousel--is-at-start">
|
|
13
|
+
<div aria-live="polite" class="carousel__slides" style="padding: var(--s-space-16); scroll-padding: var(--s-space-16);">
|
|
14
14
|
<slot></slot>
|
|
15
15
|
</div>
|
|
16
16
|
</div>
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { d as debounce } from './utils.js';
|
|
3
|
+
import { c as classNames } from './index2.js';
|
|
3
4
|
import { d as defineCustomElement$2 } from './swirl-button2.js';
|
|
4
5
|
|
|
5
|
-
const swirlCarouselCss = ":host{--swirl-carousel-spacing:var(--s-space-16);position:relative;display:block;overflow:hidden;width:100
|
|
6
|
+
const swirlCarouselCss = ":host{--swirl-carousel-spacing:var(--s-space-16);position:relative;display:block;overflow:hidden;width:100%}:host(:hover) .carousel__previous-slide-button,:host(:hover) .carousel__next-slide-button{pointer-events:auto;opacity:1}:host *{box-sizing:border-box}.carousel{position:relative;overflow:hidden;width:100%}.carousel:before,.carousel:after{content:'';width:var(--s-space-32);height:100%;position:absolute;top:0;z-index:1;pointer-events:none;transition:opacity 0.2s;opacity:0}.carousel:before{left:0;background:linear-gradient(90deg, var(--s-background-default) 0%, transparent 100%)}.carousel:after{right:0;background:linear-gradient(270deg, var(--s-background-default) 0%, transparent 100%)}.carousel--fade:before,.carousel--fade:after{opacity:1}.carousel--is-at-start:before,.carousel--is-at-end:after{opacity:0}.carousel__slides{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;width:100%;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(*:not(:first-of-type)){margin-left:var(--swirl-carousel-spacing)}.carousel__slides ::slotted(*){flex-grow:0;flex-shrink:0;scroll-snap-align:start}.carousel__previous-slide-button,.carousel__next-slide-button{position:absolute;z-index:2;top:calc(50% - var(--s-space-12));visibility:hidden;transition:opacity 0.2s;transform:translateY(-50%) scale(0.72);pointer-events:none;opacity:0}@media (min-width: 768px){.carousel__previous-slide-button,.carousel__next-slide-button{visibility:visible}}.carousel__previous-slide-button{left:var(--s-space-4)}.carousel__next-slide-button{right:var(--s-space-4)}";
|
|
6
7
|
const SwirlCarouselStyle0 = swirlCarouselCss;
|
|
7
8
|
|
|
8
9
|
const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarousel extends HTMLElement {
|
|
@@ -37,7 +38,11 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarousel ext
|
|
|
37
38
|
this.label = undefined;
|
|
38
39
|
this.nextSlideButtonLabel = "Next slide";
|
|
39
40
|
this.previousSlideButtonLabel = "Previous slide";
|
|
41
|
+
this.fade = false;
|
|
40
42
|
this.loopAround = false;
|
|
43
|
+
this.padding = "16";
|
|
44
|
+
this.paddingBlockEnd = undefined;
|
|
45
|
+
this.paddingBlockStart = undefined;
|
|
41
46
|
this.paddingInlineEnd = undefined;
|
|
42
47
|
this.paddingInlineStart = undefined;
|
|
43
48
|
this.spacing = "16";
|
|
@@ -115,6 +120,15 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarousel ext
|
|
|
115
120
|
render() {
|
|
116
121
|
this.el.style.setProperty("--swirl-carousel-spacing", `${this.spacing}px`);
|
|
117
122
|
const slidesStyles = {
|
|
123
|
+
padding: Boolean(this.padding)
|
|
124
|
+
? `var(--s-space-${this.padding})`
|
|
125
|
+
: undefined,
|
|
126
|
+
paddingBlockEnd: Boolean(this.paddingBlockEnd)
|
|
127
|
+
? `var(--s-space-${this.paddingBlockEnd})`
|
|
128
|
+
: undefined,
|
|
129
|
+
paddingBlockStart: Boolean(this.paddingBlockStart)
|
|
130
|
+
? `var(--s-space-${this.paddingBlockStart})`
|
|
131
|
+
: undefined,
|
|
118
132
|
paddingInlineEnd: Boolean(this.paddingInlineEnd)
|
|
119
133
|
? `var(--s-space-${this.paddingInlineEnd})`
|
|
120
134
|
: undefined,
|
|
@@ -123,9 +137,16 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarousel ext
|
|
|
123
137
|
: undefined,
|
|
124
138
|
scrollPadding: Boolean(this.paddingInlineStart)
|
|
125
139
|
? `var(--s-space-${this.paddingInlineStart})`
|
|
126
|
-
:
|
|
140
|
+
: Boolean(this.padding)
|
|
141
|
+
? `var(--s-space-${this.padding})`
|
|
142
|
+
: undefined,
|
|
127
143
|
};
|
|
128
|
-
|
|
144
|
+
const className = classNames("carousel", {
|
|
145
|
+
"carousel--fade": this.fade,
|
|
146
|
+
"carousel--is-at-start": this.isAtStart,
|
|
147
|
+
"carousel--is-at-end": this.isAtEnd,
|
|
148
|
+
});
|
|
149
|
+
return (h(Host, { key: '7a23607d98ec5bc759fdcae7ba70df9a6940f187', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: '1223f0cd4acd6556cce428276f2664201bddbad0', class: className }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: '86a5e0b334e7bff828bb2477cf912d54b9489f2e', class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { key: '794a310026cec6b9203a99207e2aa4e732ff9e01', class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { key: '98179d7a5467375248823e59e5f8d1f080d5b39c', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '0ff0113a8d91b2366b517da4ef9d9219062d32b0', onSlotchange: this.onSlotChange })))));
|
|
129
150
|
}
|
|
130
151
|
get el() { return this; }
|
|
131
152
|
static get style() { return SwirlCarouselStyle0; }
|
|
@@ -133,7 +154,11 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarousel ext
|
|
|
133
154
|
"label": [1],
|
|
134
155
|
"nextSlideButtonLabel": [1, "next-slide-button-label"],
|
|
135
156
|
"previousSlideButtonLabel": [1, "previous-slide-button-label"],
|
|
157
|
+
"fade": [4],
|
|
136
158
|
"loopAround": [4, "loop-around"],
|
|
159
|
+
"padding": [1],
|
|
160
|
+
"paddingBlockEnd": [1, "padding-block-end"],
|
|
161
|
+
"paddingBlockStart": [1, "padding-block-start"],
|
|
137
162
|
"paddingInlineEnd": [1, "padding-inline-end"],
|
|
138
163
|
"paddingInlineStart": [1, "padding-inline-start"],
|
|
139
164
|
"spacing": [1],
|