@getflip/swirl-components 0.404.0 → 0.406.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 +117 -12
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-popover_2.cjs.entry.js +1 -1
- package/dist/cjs/swirl-tooltip.cjs.entry.js +42 -40
- package/dist/collection/components/swirl-popover/swirl-popover.css +4 -7
- package/dist/collection/components/swirl-tooltip/swirl-tooltip.css +3 -4
- package/dist/collection/components/swirl-tooltip/swirl-tooltip.js +124 -50
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-popover2.js +1 -1
- package/dist/components/swirl-tooltip2.js +47 -43
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-popover_2.entry.js +1 -1
- package/dist/esm/swirl-tooltip.entry.js +43 -41
- package/dist/swirl-components/p-31157c43.entry.js +1 -0
- package/dist/swirl-components/p-691a2260.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-tooltip/swirl-tooltip.d.ts +8 -9
- package/dist/types/components.d.ts +16 -8
- package/package.json +1 -1
- package/vscode-data.json +14 -2
- package/dist/swirl-components/p-8293861d.entry.js +0 -1
- package/dist/swirl-components/p-e8c9b581.entry.js +0 -1
|
@@ -4,7 +4,7 @@ import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.
|
|
|
4
4
|
import { c as classNames } from './index2.js';
|
|
5
5
|
import { i as isMobileViewport, t as getPixelsFromRemToken, k as getActiveElement, q as querySelectorAllDeep } from './utils.js';
|
|
6
6
|
|
|
7
|
-
const swirlPopoverCss = ":host{position:relative;z-index:var(--s-z-40)}:host *{box-sizing:border-box}:host{--swirl-resource-list-item-background-default:var(\n --s-surface-overlay-default\n );--swirl-resource-list-item-background-hovered:var(\n --s-surface-overlay-hovered\n );--swirl-resource-list-item-background-pressed:var(\n --s-surface-overlay-pressed\n )}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out
|
|
7
|
+
const swirlPopoverCss = ":host{position:relative;z-index:var(--s-z-40)}:host *{box-sizing:border-box}:host{--swirl-resource-list-item-background-default:var(\n --s-surface-overlay-default\n );--swirl-resource-list-item-background-hovered:var(\n --s-surface-overlay-hovered\n );--swirl-resource-list-item-background-pressed:var(\n --s-surface-overlay-pressed\n )}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-base);animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}";
|
|
8
8
|
|
|
9
9
|
const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends HTMLElement {
|
|
10
10
|
constructor() {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import { u, P,
|
|
2
|
+
import { u, P, D, k, b, N } from './floating-ui.dom.browser.min.js';
|
|
3
3
|
import { c as classNames } from './index2.js';
|
|
4
4
|
import { t as getPixelsFromRemToken } from './utils.js';
|
|
5
5
|
|
|
6
|
-
const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--active .tooltip__popper{display:block}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:absolute;z-index:var(--s-z-40);display:none;max-width:17.5rem;opacity:0}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--
|
|
6
|
+
const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--active .tooltip__popper{display:block}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:absolute;z-index:var(--s-z-40);display:none;max-width:17.5rem;opacity:0}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--intent-info .tooltip__bubble,.tooltip--intent-info .tooltip__arrow{background-color:var(--s-surface-info-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
|
|
7
7
|
|
|
8
8
|
const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends HTMLElement {
|
|
9
9
|
constructor() {
|
|
@@ -12,18 +12,23 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
|
|
|
12
12
|
this.__attachShadow();
|
|
13
13
|
this.active = true;
|
|
14
14
|
this.delay = 200;
|
|
15
|
+
this.intent = "default";
|
|
15
16
|
this.position = "top";
|
|
16
17
|
this.positioning = "absolute";
|
|
17
|
-
|
|
18
|
-
* If set to true, tooltip will be initially visible.
|
|
19
|
-
* It will only be dismissible via a click and will not reappear.
|
|
20
|
-
* Tooltip will have a blue background color.
|
|
21
|
-
*/
|
|
22
|
-
this.isPromo = false;
|
|
18
|
+
this.trigger = ["focus", "hover"];
|
|
23
19
|
this.visible = false;
|
|
24
|
-
this.isPromoShown = false;
|
|
25
20
|
this.onKeydown = (event) => {
|
|
26
|
-
if (event.code === "Escape"
|
|
21
|
+
if (event.code === "Escape") {
|
|
22
|
+
this.hide();
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
this.onFocusIn = () => {
|
|
26
|
+
if (this.trigger.includes("focus")) {
|
|
27
|
+
this.show();
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
this.onFocusOut = () => {
|
|
31
|
+
if (this.trigger.includes("focus")) {
|
|
27
32
|
this.hide();
|
|
28
33
|
}
|
|
29
34
|
};
|
|
@@ -44,20 +49,6 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
|
|
|
44
49
|
top: Boolean(arrowY) ? arrowY + "px" : undefined,
|
|
45
50
|
};
|
|
46
51
|
};
|
|
47
|
-
this.show = () => {
|
|
48
|
-
if (!this.active || (this.isPromo && this.isPromoShown)) {
|
|
49
|
-
return;
|
|
50
|
-
}
|
|
51
|
-
this.visible = true;
|
|
52
|
-
requestAnimationFrame(() => {
|
|
53
|
-
const referenceElement = this.el.children[0];
|
|
54
|
-
if (!Boolean(referenceElement)) {
|
|
55
|
-
return;
|
|
56
|
-
}
|
|
57
|
-
this.reposition();
|
|
58
|
-
this.disableAutoUpdate = N(referenceElement, this.popperEl, this.reposition.bind(this));
|
|
59
|
-
});
|
|
60
|
-
};
|
|
61
52
|
this.showWithDelay = () => {
|
|
62
53
|
if (!this.active) {
|
|
63
54
|
return;
|
|
@@ -70,14 +61,6 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
|
|
|
70
61
|
this.show();
|
|
71
62
|
}, this.delay);
|
|
72
63
|
};
|
|
73
|
-
this.hide = () => {
|
|
74
|
-
if (Boolean(this.showTimeout)) {
|
|
75
|
-
clearTimeout(this.showTimeout);
|
|
76
|
-
this.showTimeout = undefined;
|
|
77
|
-
}
|
|
78
|
-
this.visible = false;
|
|
79
|
-
this.disableAutoUpdate?.();
|
|
80
|
-
};
|
|
81
64
|
this.updateOptions = () => {
|
|
82
65
|
const margin = getPixelsFromRemToken("--s-space-12");
|
|
83
66
|
const shiftPaddingY = getPixelsFromRemToken("--s-space-8");
|
|
@@ -104,10 +87,12 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
|
|
|
104
87
|
this.updateOptions();
|
|
105
88
|
}
|
|
106
89
|
onMouseEnter() {
|
|
107
|
-
this.
|
|
90
|
+
if (this.trigger.includes("hover")) {
|
|
91
|
+
this.showWithDelay();
|
|
92
|
+
}
|
|
108
93
|
}
|
|
109
94
|
onMouseLeave() {
|
|
110
|
-
if (
|
|
95
|
+
if (this.trigger.includes("hover")) {
|
|
111
96
|
this.hide();
|
|
112
97
|
}
|
|
113
98
|
}
|
|
@@ -128,18 +113,35 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
|
|
|
128
113
|
}
|
|
129
114
|
componentDidLoad() {
|
|
130
115
|
this.updateOptions();
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
116
|
+
}
|
|
117
|
+
async show() {
|
|
118
|
+
if (!this.active) {
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
this.visible = true;
|
|
122
|
+
requestAnimationFrame(() => {
|
|
123
|
+
const referenceElement = this.el.children[0];
|
|
124
|
+
if (!Boolean(referenceElement)) {
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
this.reposition();
|
|
128
|
+
this.disableAutoUpdate = N(referenceElement, this.popperEl, this.reposition.bind(this));
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
async hide() {
|
|
132
|
+
if (Boolean(this.showTimeout)) {
|
|
133
|
+
clearTimeout(this.showTimeout);
|
|
134
|
+
this.showTimeout = undefined;
|
|
134
135
|
}
|
|
136
|
+
this.visible = false;
|
|
137
|
+
this.disableAutoUpdate?.();
|
|
135
138
|
}
|
|
136
139
|
render() {
|
|
137
|
-
const className = classNames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, {
|
|
140
|
+
const className = classNames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, `tooltip--intent-${this.intent}`, {
|
|
138
141
|
"tooltip--active": this.active,
|
|
139
142
|
"tooltip--visible": this.visible,
|
|
140
|
-
"tooltip--promo": this.isPromo,
|
|
141
143
|
});
|
|
142
|
-
return (h(Host, { key: '
|
|
144
|
+
return (h(Host, { key: 'e418f075955973796c17ba8994cfb63284b99d13', onKeydown: this.onKeydown }, h("span", { key: '410ac8bc16773617287b73b4676682b4e887eeb3', class: className }, h("span", { key: 'e111062966a91142006124131819095cd3e41e69', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, h("slot", { key: 'fc43ad1b5a655a0512157a6cc6c9877c592caa1c' })), h("span", { key: '360545df93f2ea5b655166769d1a3d95c8dca299', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
|
|
143
145
|
top: Boolean(this.actualPosition)
|
|
144
146
|
? `${this.actualPosition?.y}px`
|
|
145
147
|
: "",
|
|
@@ -147,7 +149,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
|
|
|
147
149
|
? `${this.actualPosition?.x}px`
|
|
148
150
|
: "",
|
|
149
151
|
position: this.positioning,
|
|
150
|
-
} }, this.visible && (h("span", { key: '
|
|
152
|
+
} }, this.visible && (h("span", { key: 'b4af0145c86950a1a863f73d63f77000bd98f95a', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '84a35eb842594411f9deac1c47b04034bdd64362', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: 'c6796dee53c0fd6d1fbc2a39d6495f91360671fc', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
|
|
151
153
|
...this.arrowStyles,
|
|
152
154
|
visibility: this.visible ? "visible" : "hidden",
|
|
153
155
|
} })))));
|
|
@@ -161,13 +163,15 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
|
|
|
161
163
|
"active": [4],
|
|
162
164
|
"content": [1],
|
|
163
165
|
"delay": [2],
|
|
166
|
+
"intent": [1],
|
|
164
167
|
"position": [1],
|
|
165
168
|
"positioning": [1],
|
|
166
|
-
"
|
|
169
|
+
"trigger": [16],
|
|
167
170
|
"actualPosition": [32],
|
|
168
171
|
"arrowStyles": [32],
|
|
169
172
|
"visible": [32],
|
|
170
|
-
"
|
|
173
|
+
"show": [64],
|
|
174
|
+
"hide": [64]
|
|
171
175
|
}, [[1, "mouseenter", "onMouseEnter"], [1, "mouseleave", "onMouseLeave"], [9, "resize", "onWindowResize"], [9, "scroll", "onWindowScroll"]], {
|
|
172
176
|
"position": ["watchPosition"]
|
|
173
177
|
}]);
|