@getflip/swirl-components 0.323.0 → 0.324.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/swirl-image-grid-item.cjs.entry.js +6 -11
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.css +1 -4
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js +5 -10
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-image-grid-item.js +6 -11
- package/dist/esm/swirl-image-grid-item.entry.js +6 -11
- package/dist/swirl-components/p-6e701248.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-5601639f.entry.js +0 -1
package/components.json
CHANGED
|
@@ -6,7 +6,7 @@ const index = require('./index-2c919933.js');
|
|
|
6
6
|
const index$1 = require('./index-9f94303c.js');
|
|
7
7
|
const utils = require('./utils-1a1dd8d3.js');
|
|
8
8
|
|
|
9
|
-
const swirlImageGridItemCss = ":host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:only-child) button.image-grid-item:focus-visible:before,:host(:only-child) button.image-grid-item:focus-visible:after{border-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:after,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm);border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus{outline:none}button.image-grid-item:focus-visible:before{content:\"\";position:absolute;inset:0;border:0.125rem solid var(--s-focus-default);z-index:3}button.image-grid-item:focus-visible:after{content:\"\";position:absolute;inset:0;border:0.1875rem solid var(--s-background-default);z-index:2}.image-grid-item--has-error .image-grid-item__image{display:none}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px)
|
|
9
|
+
const swirlImageGridItemCss = ":host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:only-child) button.image-grid-item:focus-visible:before,:host(:only-child) button.image-grid-item:focus-visible:after{border-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(1)) button.image-grid-item:focus-visible:after,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"2\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm);border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"3\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(1)) button.image-grid-item:focus-visible:after{border-top-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(2)) button.image-grid-item:focus-visible:after{border-top-right-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(3)) button.image-grid-item:focus-visible:after{border-bottom-left-radius:var(--s-border-radius-sm)}:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:before,:host([data-sibling-count=\"4\"]:nth-child(4)) button.image-grid-item:focus-visible:after{border-bottom-right-radius:var(--s-border-radius-sm)}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus{outline:none}button.image-grid-item:focus-visible:before{content:\"\";position:absolute;inset:0;border:0.125rem solid var(--s-focus-default);z-index:3}button.image-grid-item:focus-visible:after{content:\"\";position:absolute;inset:0;border:0.1875rem solid var(--s-background-default);z-index:2}.image-grid-item--has-error .image-grid-item__image{display:none}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px)}.image-grid-item__image{z-index:1;display:inline-flex;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center;opacity:0;transition:opacity 0.3s ease-in}.image-grid-item--loaded .image-grid-item__image{opacity:1}.image-grid-item__loading-placeholder{display:inline-flex;width:100%;height:100%}.image-grid-item__icon{position:absolute;z-index:1;top:50%;left:50%;display:flex;width:3rem;height:3rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);transform:translate3d(-50%, -50%, 0)}.image-grid-item__icon ::part(icon){width:2rem;height:2rem}.image-grid-item__gif-controls{position:absolute;z-index:1;bottom:var(--s-space-8);left:var(--s-space-8)}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon{display:flex;padding:var(--s-space-2);justify-content:center;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-icon-on-image);background-color:var(--s-surface-on-image-default)}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon--button{border:none;cursor:pointer}.image-grid-item__gif-controls .image-grid-item__gif-controls__icon--label{padding-left:var(--s-space-8);padding-right:var(--s-space-8)}.image-grid-item__overlay{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.4);font-size:var(--s-font-size-2xl);inset:0}.image-grid-item__skeleton{position:absolute;z-index:3;inset:0}.image-grid-item__error{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.1);inset:0}";
|
|
10
10
|
const SwirlImageGridItemStyle0 = swirlImageGridItemCss;
|
|
11
11
|
|
|
12
12
|
const SwirlImageGridItem = class {
|
|
@@ -137,26 +137,21 @@ const SwirlImageGridItem = class {
|
|
|
137
137
|
}
|
|
138
138
|
render() {
|
|
139
139
|
const Tag = this.interactive ? "button" : "div";
|
|
140
|
-
const
|
|
141
|
-
!Boolean(this.loading) ||
|
|
142
|
-
this.loading === "eager" ||
|
|
143
|
-
(this.loaded && (this.loading !== "intersecting" || this.inViewport));
|
|
140
|
+
const showImage = this.gifPaused || this.loading !== "intersecting" || this.inViewport;
|
|
144
141
|
const siblingCount = Math.min(this.el.parentElement?.children.length, 4) ?? 1;
|
|
145
142
|
const className = index$1.classnames("image-grid-item", {
|
|
146
143
|
"image-grid-item--has-error": this.error,
|
|
147
144
|
"image-grid-item--has-overlay": this.overlay,
|
|
148
145
|
"image-grid-item--loaded": this.loaded,
|
|
149
146
|
});
|
|
150
|
-
return (index.h(index.Host, { key: '
|
|
151
|
-
backgroundImage:
|
|
147
|
+
return (index.h(index.Host, { key: 'fee5963be852193a4dc00df37ebbb17225a7e999', "data-sibling-count": siblingCount, role: "listitem" }, index.h(Tag, { key: 'a09fb486805da84978d76547b96339939be87f53', class: className, type: this.interactive ? "button" : undefined }, index.h("div", { key: '9105344215db7c1519fa9ff4ab4b992cee4cd1ed', class: "image-grid-item__background", style: {
|
|
148
|
+
backgroundImage: showImage
|
|
152
149
|
? `url(${this.computedSrc})`
|
|
153
150
|
: undefined,
|
|
154
|
-
} }), this.loading !== "intersecting"
|
|
155
|
-
this.inViewport ||
|
|
156
|
-
this.gifPaused ? (index.h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.computedSrc })) : (index.h("div", { class: "image-grid-item__loading-placeholder" }, index.h("swirl-visually-hidden", null, this.alt))), this.showGifControls && (index.h("swirl-stack", { key: '1aa14acb6522412912ad2571a5c6bdfb65801c6e', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, index.h("button", { key: 'bd6c57dd19ac3645920b3d467eb62f0c7122846f', 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 ? (index.h("swirl-icon-play-arrow", { size: 20 })) : (index.h("swirl-icon-pause", { size: 20 }))), index.h("div", { key: 'af94bbd4415cfd7d5858fc27e911d9cf30f5fde5', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, index.h("swirl-icon-gif", { key: '4df6b731e559993bab600f279404341596b59440', size: 20 })))), this.loaded &&
|
|
151
|
+
} }), showImage ? (index.h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.computedSrc })) : (index.h("div", { class: "image-grid-item__loading-placeholder" }, index.h("swirl-visually-hidden", null, this.alt))), this.showGifControls && (index.h("swirl-stack", { key: '28ed0a78211dec11057647e43399bcef853e8dfa', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, index.h("button", { key: '2157c1a1d81ba564b6b166cd05499b6d565b22e0', 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 ? (index.h("swirl-icon-play-arrow", { size: 20 })) : (index.h("swirl-icon-pause", { size: 20 }))), index.h("div", { key: 'f1898456a22c7edc0a06fed2f2ea1aecd73898e1', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, index.h("swirl-icon-gif", { key: '78566c5c15a76af9af2d63f8d0665716198e8d00', size: 20 })))), this.loaded &&
|
|
157
152
|
!this.error &&
|
|
158
153
|
this.icon &&
|
|
159
|
-
!Boolean(this.overlay) && (index.h("div", { key: '
|
|
154
|
+
!Boolean(this.overlay) && (index.h("div", { key: 'c397acfeca3597b2f5fbe5ddeb8848b90ce8b5ac', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (index.h("div", { key: '18cbd7062ed80aacb0739aadedbe53c8cd752744', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (index.h("swirl-skeleton-box", { key: 'ca26ba0cb601ac1471932b4a5d6f3ef8bf6cd5ff', class: "image-grid-item__skeleton", height: "100%", width: "100%", borderRadius: "none" })), this.loaded && this.error && (index.h("div", { key: 'c139ccd5414417bfada7936644fa449d8e5c45df', class: "image-grid-item__error" }, index.h("swirl-icon-error", { key: 'd0a182962a5008ee3dccc35baf450b3a0475d180', color: "critical" }))))));
|
|
160
155
|
}
|
|
161
156
|
get el() { return index.getElement(this); }
|
|
162
157
|
static get watchers() { return {
|
|
@@ -119,8 +119,6 @@ button.image-grid-item:focus-visible:after {
|
|
|
119
119
|
background-size: cover;
|
|
120
120
|
inset: -40px;
|
|
121
121
|
filter: blur(20px);
|
|
122
|
-
opacity: 0;
|
|
123
|
-
transition: opacity 0.3s ease-in;
|
|
124
122
|
}
|
|
125
123
|
|
|
126
124
|
.image-grid-item__image {
|
|
@@ -136,8 +134,7 @@ button.image-grid-item:focus-visible:after {
|
|
|
136
134
|
transition: opacity 0.3s ease-in;
|
|
137
135
|
}
|
|
138
136
|
|
|
139
|
-
.image-grid-item--loaded .image-grid-item__image
|
|
140
|
-
.image-grid-item--loaded .image-grid-item__background {
|
|
137
|
+
.image-grid-item--loaded .image-grid-item__image {
|
|
141
138
|
opacity: 1;
|
|
142
139
|
}
|
|
143
140
|
|
|
@@ -124,26 +124,21 @@ export class SwirlImageGridItem {
|
|
|
124
124
|
}
|
|
125
125
|
render() {
|
|
126
126
|
const Tag = this.interactive ? "button" : "div";
|
|
127
|
-
const
|
|
128
|
-
!Boolean(this.loading) ||
|
|
129
|
-
this.loading === "eager" ||
|
|
130
|
-
(this.loaded && (this.loading !== "intersecting" || this.inViewport));
|
|
127
|
+
const showImage = this.gifPaused || this.loading !== "intersecting" || this.inViewport;
|
|
131
128
|
const siblingCount = Math.min(this.el.parentElement?.children.length, 4) ?? 1;
|
|
132
129
|
const className = classnames("image-grid-item", {
|
|
133
130
|
"image-grid-item--has-error": this.error,
|
|
134
131
|
"image-grid-item--has-overlay": this.overlay,
|
|
135
132
|
"image-grid-item--loaded": this.loaded,
|
|
136
133
|
});
|
|
137
|
-
return (h(Host, { key: '
|
|
138
|
-
backgroundImage:
|
|
134
|
+
return (h(Host, { key: 'fee5963be852193a4dc00df37ebbb17225a7e999', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: 'a09fb486805da84978d76547b96339939be87f53', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '9105344215db7c1519fa9ff4ab4b992cee4cd1ed', class: "image-grid-item__background", style: {
|
|
135
|
+
backgroundImage: showImage
|
|
139
136
|
? `url(${this.computedSrc})`
|
|
140
137
|
: undefined,
|
|
141
|
-
} }), this.loading !== "intersecting"
|
|
142
|
-
this.inViewport ||
|
|
143
|
-
this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" }, h("swirl-visually-hidden", null, this.alt))), this.showGifControls && (h("swirl-stack", { key: '1aa14acb6522412912ad2571a5c6bdfb65801c6e', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: 'bd6c57dd19ac3645920b3d467eb62f0c7122846f', 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: 'af94bbd4415cfd7d5858fc27e911d9cf30f5fde5', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: '4df6b731e559993bab600f279404341596b59440', size: 20 })))), this.loaded &&
|
|
138
|
+
} }), showImage ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" }, h("swirl-visually-hidden", null, this.alt))), this.showGifControls && (h("swirl-stack", { key: '28ed0a78211dec11057647e43399bcef853e8dfa', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: '2157c1a1d81ba564b6b166cd05499b6d565b22e0', 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: 'f1898456a22c7edc0a06fed2f2ea1aecd73898e1', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: '78566c5c15a76af9af2d63f8d0665716198e8d00', size: 20 })))), this.loaded &&
|
|
144
139
|
!this.error &&
|
|
145
140
|
this.icon &&
|
|
146
|
-
!Boolean(this.overlay) && (h("div", { key: '
|
|
141
|
+
!Boolean(this.overlay) && (h("div", { key: 'c397acfeca3597b2f5fbe5ddeb8848b90ce8b5ac', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: '18cbd7062ed80aacb0739aadedbe53c8cd752744', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("swirl-skeleton-box", { key: 'ca26ba0cb601ac1471932b4a5d6f3ef8bf6cd5ff', class: "image-grid-item__skeleton", height: "100%", width: "100%", borderRadius: "none" })), this.loaded && this.error && (h("div", { key: 'c139ccd5414417bfada7936644fa449d8e5c45df', class: "image-grid-item__error" }, h("swirl-icon-error", { key: 'd0a182962a5008ee3dccc35baf450b3a0475d180', color: "critical" }))))));
|
|
147
142
|
}
|
|
148
143
|
static get is() { return "swirl-image-grid-item"; }
|
|
149
144
|
static get encapsulation() { return "shadow"; }
|