@getflip/swirl-components 0.240.1 → 0.241.1
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 +2 -2
- package/dist/cjs/swirl-tooltip.cjs.entry.js +14 -2
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +0 -22
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js +2 -2
- package/dist/collection/components/swirl-tooltip/swirl-tooltip.js +14 -2
- package/dist/components/assets/pdfjs/pdf.worker.min.js +0 -22
- package/dist/components/swirl-image-grid-item.js +2 -2
- package/dist/components/swirl-tooltip2.js +14 -2
- package/dist/esm/swirl-image-grid-item.entry.js +2 -2
- package/dist/esm/swirl-tooltip.entry.js +14 -2
- package/dist/swirl-components/p-37b46f67.entry.js +1 -0
- package/dist/swirl-components/p-d2960dc9.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-45ebdf9b.entry.js +0 -1
- package/dist/swirl-components/p-5c5eee8c.entry.js +0 -1
package/components.json
CHANGED
|
@@ -127,10 +127,10 @@ const SwirlImageGridItem = class {
|
|
|
127
127
|
backgroundImage: showBlurredBackground
|
|
128
128
|
? `url(${this.src})`
|
|
129
129
|
: undefined,
|
|
130
|
-
}, ref: (el) => (this.backgroundImg = el) }), this.loading !== "intersecting" || this.inViewport ? (index.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.src })) : (index.h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (index.h("swirl-stack", { key: '0a1a18a75771a1723bf95ea1114a7c2e600dcca8', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, index.h("button", { key: 'bc0a37b547a700ae3800884c0329a04811e5902d', 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",
|
|
130
|
+
}, ref: (el) => (this.backgroundImg = el) }), this.loading !== "intersecting" || this.inViewport ? (index.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.src })) : (index.h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (index.h("swirl-stack", { key: '0a1a18a75771a1723bf95ea1114a7c2e600dcca8', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, index.h("button", { key: 'bc0a37b547a700ae3800884c0329a04811e5902d', 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: '420b1cd665764a92329904b5e49e18881a81e052', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, index.h("swirl-icon-gif", { key: 'a219d5ba815a5518355513d6368ed9c6faa408cc', size: 20 })))), this.loaded &&
|
|
131
131
|
!this.error &&
|
|
132
132
|
this.icon &&
|
|
133
|
-
!Boolean(this.overlay) && (index.h("div", { key: '
|
|
133
|
+
!Boolean(this.overlay) && (index.h("div", { key: 'cd742662f7df9c1558ddf869fd38e1d0ad276f6e', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (index.h("div", { key: 'e0a34345307c32082a608eb8ff1ae66b83c119e0', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (index.h("div", { key: 'a3abfbcdf9b2c5635b6c2b0bfbafcbb63ce07727', class: "image-grid-item__spinner" }, index.h("swirl-spinner", { key: 'd201a574a6476eaee4ce81175e1f0a680cdf2298' }))), this.loaded && this.error && (index.h("div", { key: '589a79240ead52dca92e1c6dee29458de61868b4', class: "image-grid-item__error" }, index.h("swirl-icon-error", { key: '8aa0db04696a2d6852d2a6ec46b58e6a869f2b59', color: "critical" }))))));
|
|
134
134
|
}
|
|
135
135
|
get el() { return index.getElement(this); }
|
|
136
136
|
};
|
|
@@ -35,6 +35,9 @@ const SwirlTooltip = class {
|
|
|
35
35
|
};
|
|
36
36
|
};
|
|
37
37
|
this.show = () => {
|
|
38
|
+
if (!this.active) {
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
38
41
|
this.visible = true;
|
|
39
42
|
requestAnimationFrame(() => {
|
|
40
43
|
const referenceElement = this.el.children[0];
|
|
@@ -46,6 +49,9 @@ const SwirlTooltip = class {
|
|
|
46
49
|
});
|
|
47
50
|
};
|
|
48
51
|
this.showWithDelay = () => {
|
|
52
|
+
if (!this.active) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
49
55
|
if (Boolean(this.showTimeout)) {
|
|
50
56
|
clearTimeout(this.showTimeout);
|
|
51
57
|
this.showTimeout = undefined;
|
|
@@ -91,9 +97,15 @@ const SwirlTooltip = class {
|
|
|
91
97
|
this.hide();
|
|
92
98
|
}
|
|
93
99
|
onWindowResize() {
|
|
100
|
+
if (!this.active) {
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
94
103
|
this.reposition();
|
|
95
104
|
}
|
|
96
105
|
onWindowScroll() {
|
|
106
|
+
if (!this.active || !this.visible) {
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
97
109
|
this.reposition();
|
|
98
110
|
}
|
|
99
111
|
componentWillLoad() {
|
|
@@ -107,7 +119,7 @@ const SwirlTooltip = class {
|
|
|
107
119
|
"tooltip--active": this.active,
|
|
108
120
|
"tooltip--visible": this.visible,
|
|
109
121
|
});
|
|
110
|
-
return (index.h(index.Host, { key: '
|
|
122
|
+
return (index.h(index.Host, { key: '6b4349568aeda21be1c86dc8ba47d32fd69fcf6c', onKeydown: this.onKeydown }, index.h("span", { key: '23920a993ad647905f7d9aa72cf4815c762e0239', class: className }, index.h("span", { key: '3bc99d469fe2fb3fbe459778b3a5138e2e10d14b', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, index.h("slot", { key: '7cb1ae022a8a668fdc43baff33ec00c23721cbf7' })), index.h("span", { key: 'd6afed9fe735ec487bf360673f233d57ca00a550', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
|
|
111
123
|
top: Boolean(this.actualPosition)
|
|
112
124
|
? `${this.actualPosition?.y}px`
|
|
113
125
|
: "",
|
|
@@ -115,7 +127,7 @@ const SwirlTooltip = class {
|
|
|
115
127
|
? `${this.actualPosition?.x}px`
|
|
116
128
|
: "",
|
|
117
129
|
position: this.positioning,
|
|
118
|
-
} }, this.visible && (index.h("span", { key: '
|
|
130
|
+
} }, this.visible && (index.h("span", { key: '05ab2e80cae9ef200520044028fd97aef05f36a5', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { key: '7c8260e768c51475675090049e8f4acdb6915861', class: "tooltip__content", innerHTML: this.content }))), index.h("span", { key: '3b2642690f347c433c98e36de14b04cb99f8d9aa', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
|
|
119
131
|
...this.arrowStyles,
|
|
120
132
|
visibility: this.visible ? "visible" : "hidden",
|
|
121
133
|
} })))));
|