@getflip/swirl-components 0.249.0 → 0.250.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 +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-image-grid-item.cjs.entry.js +20 -10
- package/dist/cjs/swirl-select.cjs.entry.js +1 -1
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js +25 -11
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.stories.js +2 -1
- package/dist/collection/components/swirl-select/swirl-select.css +2 -3
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-image-grid-item.js +23 -10
- package/dist/components/swirl-select.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-image-grid-item.entry.js +20 -10
- package/dist/esm/swirl-select.entry.js +1 -1
- package/dist/swirl-components/p-9428f8b6.entry.js +1 -0
- package/dist/swirl-components/p-d59542f6.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-image-grid-item/swirl-image-grid-item.d.ts +2 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-37b46f67.entry.js +0 -1
- package/dist/swirl-components/p-a4229943.entry.js +0 -1
|
@@ -14,9 +14,7 @@ export class SwirlImageGridItem {
|
|
|
14
14
|
};
|
|
15
15
|
this.playGif = () => {
|
|
16
16
|
this.gifPaused = false;
|
|
17
|
-
|
|
18
|
-
imageEl.src = this.src;
|
|
19
|
-
this.backgroundImg.attributeStyleMap.set("background-image", `url(${this.src})`);
|
|
17
|
+
this.computedSrc = this.src;
|
|
20
18
|
this.gifStarted.emit();
|
|
21
19
|
};
|
|
22
20
|
this.handleControlClick = (event) => {
|
|
@@ -36,6 +34,7 @@ export class SwirlImageGridItem {
|
|
|
36
34
|
this.loaded = false;
|
|
37
35
|
this.inViewport = false;
|
|
38
36
|
this.gifPaused = false;
|
|
37
|
+
this.computedSrc = undefined;
|
|
39
38
|
}
|
|
40
39
|
/**
|
|
41
40
|
* Start Gif playback.
|
|
@@ -51,8 +50,13 @@ export class SwirlImageGridItem {
|
|
|
51
50
|
async pause() {
|
|
52
51
|
this.pauseGif();
|
|
53
52
|
}
|
|
53
|
+
watchSrcProp() {
|
|
54
|
+
this.computedSrc = this.src;
|
|
55
|
+
this.gifPaused = false;
|
|
56
|
+
}
|
|
54
57
|
componentDidLoad() {
|
|
55
58
|
this.setupIntersectionObserver();
|
|
59
|
+
this.computedSrc = this.src;
|
|
56
60
|
if (this.img?.complete) {
|
|
57
61
|
this.loaded = true;
|
|
58
62
|
}
|
|
@@ -64,6 +68,7 @@ export class SwirlImageGridItem {
|
|
|
64
68
|
}
|
|
65
69
|
disconnectedCallback() {
|
|
66
70
|
this.intersectionObserver?.disconnect();
|
|
71
|
+
this.computedSrc = "";
|
|
67
72
|
}
|
|
68
73
|
setupIntersectionObserver() {
|
|
69
74
|
if (this.loading !== "intersecting") {
|
|
@@ -81,8 +86,7 @@ export class SwirlImageGridItem {
|
|
|
81
86
|
const imageEl = this.img;
|
|
82
87
|
const staticImage = await this.readImageFromCanvas(imageEl.src);
|
|
83
88
|
this.gifPaused = true;
|
|
84
|
-
|
|
85
|
-
this.backgroundImg.attributeStyleMap.set("background-image", `url(${staticImage})`);
|
|
89
|
+
this.computedSrc = staticImage;
|
|
86
90
|
this.gifStopped.emit();
|
|
87
91
|
}
|
|
88
92
|
readImageFromCanvas(imageSrc) {
|
|
@@ -102,7 +106,8 @@ export class SwirlImageGridItem {
|
|
|
102
106
|
}
|
|
103
107
|
render() {
|
|
104
108
|
const Tag = this.interactive ? "button" : "div";
|
|
105
|
-
const showBlurredBackground =
|
|
109
|
+
const showBlurredBackground = this.gifPaused ||
|
|
110
|
+
!Boolean(this.loading) ||
|
|
106
111
|
this.loading === "eager" ||
|
|
107
112
|
(this.loaded && (this.loading !== "intersecting" || this.inViewport));
|
|
108
113
|
const siblingCount = Math.min(this.el.parentElement?.children.length, 4) ?? 1;
|
|
@@ -110,14 +115,16 @@ export class SwirlImageGridItem {
|
|
|
110
115
|
"image-grid-item--has-error": this.error,
|
|
111
116
|
"image-grid-item--has-overlay": this.overlay,
|
|
112
117
|
});
|
|
113
|
-
return (h(Host, { key: '
|
|
118
|
+
return (h(Host, { key: '75658ab5e5c9dfa05b47af29e6b173045a3046b0', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: '730e1ae5791eea95fb9156b6c503ad8a86d0702e', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '1af6c077e717b71b40e8f9a815a731218d0a37f4', class: "image-grid-item__background", style: {
|
|
114
119
|
backgroundImage: showBlurredBackground
|
|
115
|
-
? `url(${this.
|
|
120
|
+
? `url(${this.computedSrc})`
|
|
116
121
|
: undefined,
|
|
117
|
-
}
|
|
122
|
+
} }), this.loading !== "intersecting" ||
|
|
123
|
+
this.inViewport ||
|
|
124
|
+
this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.img = el), src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (h("swirl-stack", { key: '0fd42074e485aa8c504060db5259891403e49665', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: '66440c7eaea08167d32dceb3efe89bea404a94f7', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (h("swirl-icon-play-arrow", { size: 20 })) : (h("swirl-icon-pause", { size: 20 }))), h("div", { key: '7311b452251d0dbd0004b50855b51b8dd4a45a26', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: 'fda7c865e98ba6235035f21b63437bf2840c748a', size: 20 })))), this.loaded &&
|
|
118
125
|
!this.error &&
|
|
119
126
|
this.icon &&
|
|
120
|
-
!Boolean(this.overlay) && (h("div", { key: '
|
|
127
|
+
!Boolean(this.overlay) && (h("div", { key: 'ec261fd8161f6c4a0dbd1e4d453d53efa6078ffb', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: '7ba82f4ae19a32b3645a9b78e896b77fe11d0fe7', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { key: '5b10aa43ee80c16d2f49fc30d9a638700056bf6e', class: "image-grid-item__spinner" }, h("swirl-spinner", { key: '4e654ea8e949853cf0b2ab7c624a7d8335920117' }))), this.loaded && this.error && (h("div", { key: '2cebd11ed5552cd6c8e1637a3b0dc88858d8d01d', class: "image-grid-item__error" }, h("swirl-icon-error", { key: '1ceb0a99118b6cc9ac2e693e09010ee5213db913', color: "critical" }))))));
|
|
121
128
|
}
|
|
122
129
|
static get is() { return "swirl-image-grid-item"; }
|
|
123
130
|
static get encapsulation() { return "shadow"; }
|
|
@@ -301,7 +308,8 @@ export class SwirlImageGridItem {
|
|
|
301
308
|
"error": {},
|
|
302
309
|
"loaded": {},
|
|
303
310
|
"inViewport": {},
|
|
304
|
-
"gifPaused": {}
|
|
311
|
+
"gifPaused": {},
|
|
312
|
+
"computedSrc": {}
|
|
305
313
|
};
|
|
306
314
|
}
|
|
307
315
|
static get events() {
|
|
@@ -412,4 +420,10 @@ export class SwirlImageGridItem {
|
|
|
412
420
|
};
|
|
413
421
|
}
|
|
414
422
|
static get elementRef() { return "el"; }
|
|
423
|
+
static get watchers() {
|
|
424
|
+
return [{
|
|
425
|
+
"propName": "src",
|
|
426
|
+
"methodName": "watchSrcProp"
|
|
427
|
+
}];
|
|
428
|
+
}
|
|
415
429
|
}
|
|
@@ -84,7 +84,6 @@
|
|
|
84
84
|
|
|
85
85
|
.select__resize-helper {
|
|
86
86
|
display: block;
|
|
87
|
-
overflow: hidden;
|
|
88
87
|
width: auto;
|
|
89
88
|
height: 0;
|
|
90
89
|
margin: 0;
|
|
@@ -95,8 +94,8 @@
|
|
|
95
94
|
font-weight: var(--s-font-weight-medium);
|
|
96
95
|
line-height: var(--s-line-height-base);
|
|
97
96
|
text-align: left;
|
|
98
|
-
white-space:
|
|
99
|
-
|
|
97
|
+
white-space: pre;
|
|
98
|
+
white-space: pre;
|
|
100
99
|
vertical-align: top;
|
|
101
100
|
-webkit-user-select: none;
|
|
102
101
|
-moz-user-select: none;
|