@sbb-esta/lyne-elements 3.10.0 → 3.11.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/calendar/calendar.component.d.ts +2 -1
- package/calendar/calendar.component.d.ts.map +1 -1
- package/core/controllers/escapable-overlay-controller.d.ts +3 -0
- package/core/controllers/escapable-overlay-controller.d.ts.map +1 -1
- package/core/controllers/overlay-position-controller.d.ts +60 -0
- package/core/controllers/overlay-position-controller.d.ts.map +1 -0
- package/core/controllers/overlay-position-controller.js +224 -0
- package/core/controllers.d.ts +1 -0
- package/core/controllers.d.ts.map +1 -1
- package/core/controllers.js +12 -10
- package/core/styles/core.scss +27 -2
- package/core.css +21 -2
- package/custom-elements.json +1996 -544
- package/development/calendar/calendar.component.d.ts +2 -1
- package/development/calendar/calendar.component.d.ts.map +1 -1
- package/development/calendar/calendar.component.js +1 -1
- package/development/core/controllers/escapable-overlay-controller.d.ts +3 -0
- package/development/core/controllers/escapable-overlay-controller.d.ts.map +1 -1
- package/development/core/controllers/escapable-overlay-controller.js +1 -1
- package/development/core/controllers/overlay-position-controller.d.ts +60 -0
- package/development/core/controllers/overlay-position-controller.d.ts.map +1 -0
- package/development/core/controllers/overlay-position-controller.js +306 -0
- package/development/core/controllers.d.ts +1 -0
- package/development/core/controllers.d.ts.map +1 -1
- package/development/core/controllers.js +3 -1
- package/development/mini-calendar/mini-calendar/mini-calendar.component.d.ts +35 -0
- package/development/mini-calendar/mini-calendar/mini-calendar.component.d.ts.map +1 -0
- package/development/mini-calendar/mini-calendar/mini-calendar.component.js +201 -0
- package/development/mini-calendar/mini-calendar-day/mini-calendar-day.component.d.ts +23 -0
- package/development/mini-calendar/mini-calendar-day/mini-calendar-day.component.d.ts.map +1 -0
- package/development/mini-calendar/mini-calendar-day/mini-calendar-day.component.js +181 -0
- package/development/mini-calendar/mini-calendar-day.d.ts +5 -0
- package/development/mini-calendar/mini-calendar-day.d.ts.map +1 -0
- package/development/mini-calendar/mini-calendar-day.js +5 -0
- package/development/mini-calendar/mini-calendar-month/mini-calendar-month.component.d.ts +25 -0
- package/development/mini-calendar/mini-calendar-month/mini-calendar-month.component.d.ts.map +1 -0
- package/development/mini-calendar/mini-calendar-month/mini-calendar-month.component.js +123 -0
- package/development/mini-calendar/mini-calendar-month.d.ts +5 -0
- package/development/mini-calendar/mini-calendar-month.d.ts.map +1 -0
- package/development/mini-calendar/mini-calendar-month.js +5 -0
- package/development/mini-calendar/mini-calendar.d.ts +5 -0
- package/development/mini-calendar/mini-calendar.d.ts.map +1 -0
- package/development/mini-calendar/mini-calendar.js +5 -0
- package/development/mini-calendar.d.ts +7 -0
- package/development/mini-calendar.d.ts.map +1 -0
- package/development/mini-calendar.js +9 -0
- package/development/sidebar/icon-sidebar-button/icon-sidebar-button.component.d.ts +4 -1
- package/development/sidebar/icon-sidebar-button/icon-sidebar-button.component.d.ts.map +1 -1
- package/development/sidebar/icon-sidebar-button/icon-sidebar-button.component.js +5 -1
- package/development/sidebar/icon-sidebar-link/icon-sidebar-link.component.d.ts +4 -1
- package/development/sidebar/icon-sidebar-link/icon-sidebar-link.component.d.ts.map +1 -1
- package/development/sidebar/icon-sidebar-link/icon-sidebar-link.component.js +5 -1
- package/development/tabs/tab/tab.component.d.ts +9 -0
- package/development/tabs/tab/tab.component.d.ts.map +1 -1
- package/development/tabs/tab/tab.component.js +48 -7
- package/development/tabs/tab-group/tab-group.component.d.ts +7 -3
- package/development/tabs/tab-group/tab-group.component.d.ts.map +1 -1
- package/development/tabs/tab-group/tab-group.component.js +19 -39
- package/development/tabs/tab-label/tab-label.component.d.ts.map +1 -1
- package/development/tabs/tab-label/tab-label.component.js +4 -3
- package/development/tooltip/tooltip.component.d.ts +11 -4
- package/development/tooltip/tooltip.component.d.ts.map +1 -1
- package/development/tooltip/tooltip.component.js +57 -78
- package/index.d.ts +6 -0
- package/index.js +6 -0
- package/mini-calendar/mini-calendar/mini-calendar.component.d.ts +35 -0
- package/mini-calendar/mini-calendar/mini-calendar.component.d.ts.map +1 -0
- package/mini-calendar/mini-calendar/mini-calendar.component.js +133 -0
- package/mini-calendar/mini-calendar-day/mini-calendar-day.component.d.ts +23 -0
- package/mini-calendar/mini-calendar-day/mini-calendar-day.component.d.ts.map +1 -0
- package/mini-calendar/mini-calendar-day/mini-calendar-day.component.js +66 -0
- package/mini-calendar/mini-calendar-day.d.ts +5 -0
- package/mini-calendar/mini-calendar-day.d.ts.map +1 -0
- package/mini-calendar/mini-calendar-day.js +4 -0
- package/mini-calendar/mini-calendar-month/mini-calendar-month.component.d.ts +25 -0
- package/mini-calendar/mini-calendar-month/mini-calendar-month.component.d.ts.map +1 -0
- package/mini-calendar/mini-calendar-month/mini-calendar-month.component.js +59 -0
- package/mini-calendar/mini-calendar-month.d.ts +5 -0
- package/mini-calendar/mini-calendar-month.d.ts.map +1 -0
- package/mini-calendar/mini-calendar-month.js +4 -0
- package/mini-calendar/mini-calendar.d.ts +5 -0
- package/mini-calendar/mini-calendar.d.ts.map +1 -0
- package/mini-calendar/mini-calendar.js +4 -0
- package/mini-calendar.d.ts +7 -0
- package/mini-calendar.d.ts.map +1 -0
- package/mini-calendar.js +8 -0
- package/off-brand-theme.css +21 -2
- package/package.json +21 -1
- package/safety-theme.css +21 -2
- package/sidebar/icon-sidebar-button/icon-sidebar-button.component.d.ts +4 -1
- package/sidebar/icon-sidebar-button/icon-sidebar-button.component.d.ts.map +1 -1
- package/sidebar/icon-sidebar-button/icon-sidebar-button.component.js +9 -6
- package/sidebar/icon-sidebar-link/icon-sidebar-link.component.d.ts +4 -1
- package/sidebar/icon-sidebar-link/icon-sidebar-link.component.d.ts.map +1 -1
- package/sidebar/icon-sidebar-link/icon-sidebar-link.component.js +13 -10
- package/standard-theme.css +21 -2
- package/tabs/tab/tab.component.d.ts +9 -0
- package/tabs/tab/tab.component.d.ts.map +1 -1
- package/tabs/tab/tab.component.js +37 -18
- package/tabs/tab-group/tab-group.component.d.ts +7 -3
- package/tabs/tab-group/tab-group.component.d.ts.map +1 -1
- package/tabs/tab-group/tab-group.component.js +51 -52
- package/tabs/tab-label/tab-label.component.d.ts.map +1 -1
- package/tabs/tab-label/tab-label.component.js +12 -12
- package/tooltip/tooltip.component.d.ts +11 -4
- package/tooltip/tooltip.component.d.ts.map +1 -1
- package/tooltip/tooltip.component.js +60 -84
|
@@ -1,41 +1,40 @@
|
|
|
1
|
-
var
|
|
2
|
-
throw TypeError(
|
|
1
|
+
var x = (i) => {
|
|
2
|
+
throw TypeError(i);
|
|
3
3
|
};
|
|
4
|
-
var O = (
|
|
5
|
-
var w = (
|
|
6
|
-
import { __esDecorate as b, __runInitializers as
|
|
7
|
-
import { css as
|
|
8
|
-
import { customElement as z, property as
|
|
9
|
-
import {
|
|
10
|
-
import { SbbOpenCloseBaseElement as I } from "../core/base-elements.js";
|
|
4
|
+
var O = (i, s, a) => s.has(i) || x("Cannot " + a);
|
|
5
|
+
var w = (i, s, a) => (O(i, s, "read from private field"), a ? a.call(i) : s.get(i)), k = (i, s, a) => s.has(i) ? x("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, a), u = (i, s, a, r) => (O(i, s, "write to private field"), r ? r.call(i, a) : s.set(i, a), a);
|
|
6
|
+
import { __esDecorate as b, __runInitializers as c } from "tslib";
|
|
7
|
+
import { css as L, isServer as E, html as S } from "lit";
|
|
8
|
+
import { customElement as z, property as h } from "lit/decorators.js";
|
|
9
|
+
import { SbbOpenCloseBaseElement as N } from "../core/base-elements.js";
|
|
11
10
|
import { readConfig as g } from "../core/config.js";
|
|
12
|
-
import { SbbEscapableOverlayController as M } from "../core/controllers.js";
|
|
13
|
-
import { idReference as
|
|
14
|
-
import { queueDomContentLoaded as
|
|
15
|
-
import { SbbDisabledMixin as
|
|
16
|
-
import { sbbOverlayOutsidePointerEventListener as
|
|
17
|
-
const
|
|
18
|
-
let
|
|
19
|
-
var
|
|
20
|
-
let
|
|
11
|
+
import { SbbEscapableOverlayController as I, SbbOverlayPositionController as M } from "../core/controllers.js";
|
|
12
|
+
import { idReference as U } from "../core/decorators.js";
|
|
13
|
+
import { queueDomContentLoaded as H, addToListAttribute as q, removeFromListAttribute as Z, isZeroAnimationDuration as j, isAndroid as B, isIOS as $ } from "../core/dom.js";
|
|
14
|
+
import { SbbDisabledMixin as F } from "../core/mixins.js";
|
|
15
|
+
import { sbbOverlayOutsidePointerEventListener as P } from "../core/overlay.js";
|
|
16
|
+
const R = L`*,:before,:after{box-sizing:border-box}:host{--sbb-tooltip-pointer-events: all;--sbb-tooltip-min-width: var(--sbb-spacing-fixed-8x);--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spacing-fixed-2x)) );--sbb-tooltip-border-color: var(--sbb-background-color-1-inverted);--sbb-tooltip-border-radius: var(--sbb-border-radius-8x);--sbb-tooltip-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);--sbb-tooltip-background-color: var(--sbb-background-color-1-inverted);--sbb-tooltip-color: var(--sbb-color-2-inverted);--sbb-tooltip-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-tooltip-animation-easing: ease-out;--sbb-tooltip-animation-translate: 0 var(--sbb-spacing-fixed-2x);--sbb-tooltip-gap: var(--sbb-spacing-fixed-2x);--sbb-overlay-position-area: block-start;--sbb-overlay-position-try-fallbacks: block-start span-inline-end, block-start span-inline-start, block-end, block-end span-inline-end, block-end span-inline-start;position-area:var(--sbb-overlay-position-area);position-try-fallbacks:var(--sbb-overlay-position-try-fallbacks);display:none;position:fixed;background-color:transparent;pointer-events:var(--sbb-tooltip-pointer-events);z-index:var(--sbb-tooltip-z-index, var(--sbb-overlay-default-z-index));animation-name:var(--sbb-tooltip-animation-name);animation-duration:var(--sbb-tooltip-animation-duration);animation-timing-function:var(--sbb-tooltip-animation-easing);border:none;inset:initial;padding:0;margin:0}:host([data-state]:not([data-state=closed])){display:block;--sbb-tooltip-animation-name: open}:host([data-state][data-state=closing]){--sbb-tooltip-animation-name: close;--sbb-tooltip-pointer-events: none}:host(:is([data-position~=block-end],[data-position~=bottom],[data-position^=end])){padding-block-start:var(--sbb-tooltip-gap)}:host(:is([data-position~=block-start],[data-position~=top],[data-position^=start])){padding-block-end:var(--sbb-tooltip-gap)}:host(:is([data-position~=inline-start],[data-position~=inline-end],[data-position~=left],[data-position~=right],[data-position$=" start"],[data-position$=" end"])){padding-inline:var(--sbb-tooltip-gap)}.sbb-tooltip{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-color-soft-2),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-color-soft-1);--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);border:var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);border-radius:var(--sbb-tooltip-border-radius);padding:var(--sbb-tooltip-padding);color:var(--sbb-tooltip-color);background-color:var(--sbb-tooltip-background-color);min-width:var(--sbb-tooltip-min-width);max-width:var(--sbb-tooltip-max-width)}@keyframes open{0%{opacity:0;translate:var(--sbb-tooltip-animation-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--sbb-tooltip-animation-translate)}}`, G = 500, W = B || $, m = /* @__PURE__ */ new WeakMap();
|
|
17
|
+
let Y = 0, rt = (() => {
|
|
18
|
+
var d, l;
|
|
19
|
+
let i = [z("sbb-tooltip")], s, a = [], r, v = F(N), p = [], y, _ = [], f = [], T, C, D;
|
|
21
20
|
return l = class extends v {
|
|
22
21
|
constructor() {
|
|
23
22
|
super();
|
|
24
|
-
|
|
25
|
-
u(this,
|
|
23
|
+
k(this, d);
|
|
24
|
+
u(this, d, (c(this, p), c(this, _, null))), this._openDelay = (c(this, f), null), this._closeDelay = null, this._triggerElement = null, this._escapableOverlayController = new I(this), this._overlayController = new M(this), this.addEventListener("mouseleave", (t) => {
|
|
26
25
|
(this.state === "opened" || this.state === "opening") && (!t.relatedTarget || !this._triggerElement?.contains(t.relatedTarget)) && this._delayedClose();
|
|
27
|
-
}, { passive: !0 }), this.addEventListener("overlayOutsidePointer", () => this.close(), { passive: !0 });
|
|
26
|
+
}, { passive: !0 }), this.addEventListener("overlayOutsidePointer", () => this.close(), { passive: !0 }), this.addEventListener("animationend", (t) => this._onTooltipAnimationEnd(t), { passive: !0 });
|
|
28
27
|
}
|
|
29
28
|
/**
|
|
30
|
-
* The element that will trigger the
|
|
29
|
+
* The element that will trigger the tooltip overlay.
|
|
31
30
|
*
|
|
32
31
|
* For attribute usage, provide an id reference.
|
|
33
32
|
*/
|
|
34
33
|
get trigger() {
|
|
35
|
-
return w(this,
|
|
34
|
+
return w(this, d);
|
|
36
35
|
}
|
|
37
36
|
set trigger(t) {
|
|
38
|
-
u(this,
|
|
37
|
+
u(this, d, t);
|
|
39
38
|
}
|
|
40
39
|
/**
|
|
41
40
|
* Open the tooltip after a given delay in milliseconds.
|
|
@@ -74,20 +73,20 @@ let K = 0, pt = (() => {
|
|
|
74
73
|
return this._longPressCloseDelay ?? g().tooltip?.longPressCloseDelay ?? 1500;
|
|
75
74
|
}
|
|
76
75
|
static _initializeTooltipOutlet() {
|
|
77
|
-
this._tooltipOutlet = document.createElement("div"), this._tooltipOutlet.classList.add("sbb-overlay-outlet"), document.body.appendChild(this._tooltipOutlet)
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
if (o.type === "attributes")
|
|
85
|
-
this._handleTooltipTrigger(o.target);
|
|
86
|
-
else if (o.type === "childList")
|
|
87
|
-
for (const d of [...o.addedNodes, ...o.removedNodes].filter((D) => D.nodeType === D.ELEMENT_NODE))
|
|
88
|
-
this._handleTooltipTrigger(d), this._findAndHandleTooltipTriggers(d);
|
|
76
|
+
this._tooltipOutlet = document.createElement("div"), this._tooltipOutlet.classList.add("sbb-overlay-outlet"), document.body.appendChild(this._tooltipOutlet), new MutationObserver((t) => {
|
|
77
|
+
for (const e of t)
|
|
78
|
+
if (e.type === "attributes")
|
|
79
|
+
this._handleTooltipTrigger(e.target);
|
|
80
|
+
else if (e.type === "childList")
|
|
81
|
+
for (const o of [...e.addedNodes, ...e.removedNodes].filter((n) => n.nodeType === n.ELEMENT_NODE))
|
|
82
|
+
this._handleTooltipTrigger(o), this._findAndHandleTooltipTriggers(o);
|
|
89
83
|
}).observe(document.documentElement, {
|
|
90
|
-
attributeFilter: [
|
|
84
|
+
attributeFilter: [
|
|
85
|
+
"sbb-tooltip",
|
|
86
|
+
"sbb-tooltip-open-delay",
|
|
87
|
+
"sbb-tooltip-close-delay",
|
|
88
|
+
"sbb-tooltip-position"
|
|
89
|
+
],
|
|
91
90
|
childList: !0,
|
|
92
91
|
subtree: !0
|
|
93
92
|
}), this._findAndHandleTooltipTriggers(document.body);
|
|
@@ -98,22 +97,26 @@ let K = 0, pt = (() => {
|
|
|
98
97
|
static _handleTooltipTrigger(t) {
|
|
99
98
|
const e = t.getAttribute("sbb-tooltip");
|
|
100
99
|
let o = m.get(t);
|
|
101
|
-
e && t.isConnected
|
|
100
|
+
if (e && t.isConnected) {
|
|
101
|
+
o || (o = document.createElement("sbb-tooltip"), m.set(t, o), this._tooltipOutlet.appendChild(o), o.trigger = t), o.textContent = e, o.openDelay = t.hasAttribute("sbb-tooltip-open-delay") ? +t.getAttribute("sbb-tooltip-open-delay") : null, o.closeDelay = t.hasAttribute("sbb-tooltip-close-delay") ? +t.getAttribute("sbb-tooltip-close-delay") : null;
|
|
102
|
+
const n = t.hasAttribute("sbb-tooltip-position") ? t.getAttribute("sbb-tooltip-position").split(",").map((A) => A.trim()) : t.tooltipPositions;
|
|
103
|
+
n && n.length > 0 ? (o.style.setProperty("--sbb-overlay-position-area", n[0]), o.style.setProperty("--sbb-overlay-position-try-fallbacks", n.slice(1).join(", "))) : (o.style.removeProperty("--sbb-overlay-position-area"), o.style.removeProperty("--sbb-overlay-position-try-fallbacks"));
|
|
104
|
+
} else o && (m.delete(t), o._destroy());
|
|
102
105
|
}
|
|
103
106
|
connectedCallback() {
|
|
104
|
-
super.connectedCallback(), this.popover = "manual", this.id ||= `sbb-tooltip-${++
|
|
107
|
+
super.connectedCallback(), this.popover = "manual", this.id ||= `sbb-tooltip-${++Y}`, this.state = "closed", P.connect(this), this.hasUpdated && this.trigger && this._attach(this.trigger);
|
|
105
108
|
}
|
|
106
109
|
disconnectedCallback() {
|
|
107
|
-
super.disconnectedCallback(),
|
|
110
|
+
super.disconnectedCallback(), P.disconnect(this), this._detach();
|
|
108
111
|
}
|
|
109
112
|
requestUpdate(t, e, o) {
|
|
110
|
-
super.requestUpdate(t, e, o), !
|
|
113
|
+
super.requestUpdate(t, e, o), !E && (!t || t === "trigger") && this.hasUpdated && this._attach(this.trigger);
|
|
111
114
|
}
|
|
112
115
|
firstUpdated(t) {
|
|
113
116
|
super.firstUpdated(t), this._attach(this.trigger);
|
|
114
117
|
}
|
|
115
118
|
open() {
|
|
116
|
-
this._resetOpenCloseTimeout(), !(this.state !== "closed" && this.state !== "closing" || this.disabled || !this.
|
|
119
|
+
this._resetOpenCloseTimeout(), !(this.state !== "closed" && this.state !== "closing" || this.disabled || !this.trigger || !this.dispatchBeforeOpenEvent()) && (this.showPopover?.(), this.state = "opening", this._overlayController.connect(this.trigger), this._isZeroAnimationDuration() && this._handleOpening());
|
|
117
120
|
}
|
|
118
121
|
close() {
|
|
119
122
|
this._resetOpenCloseTimeout(), !(this.state !== "opened" && this.state !== "opening") && (this.dispatchBeforeCloseEvent(), this.state = "closing", this._isZeroAnimationDuration() && this._handleClosing());
|
|
@@ -122,19 +125,19 @@ let K = 0, pt = (() => {
|
|
|
122
125
|
this._resetOpenCloseTimeout(), this._openTimeout = setTimeout(() => this.open(), this.openDelay);
|
|
123
126
|
}
|
|
124
127
|
_handleOpening() {
|
|
125
|
-
this.state = "opened", this.
|
|
128
|
+
this.state = "opened", this._escapableOverlayController.connect(), this.dispatchOpenEvent();
|
|
126
129
|
}
|
|
127
130
|
_delayedClose() {
|
|
128
131
|
this._resetOpenCloseTimeout(), this._closeTimeout = setTimeout(() => this.close(), this.closeDelay);
|
|
129
132
|
}
|
|
130
133
|
_handleClosing() {
|
|
131
|
-
this.state = "closed", this.hidePopover?.(), this._escapableOverlayController.disconnect(), this.dispatchCloseEvent(), this._openStateController?.abort();
|
|
134
|
+
this.state = "closed", this.hidePopover?.(), this._overlayController.disconnect(), this._escapableOverlayController.disconnect(), this.dispatchCloseEvent(), this._openStateController?.abort();
|
|
132
135
|
}
|
|
133
136
|
_onTooltipAnimationEnd(t) {
|
|
134
137
|
t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this._handleClosing();
|
|
135
138
|
}
|
|
136
139
|
_attach(t) {
|
|
137
|
-
this._triggerElement && this._detach(), this._triggerElement = t, this._triggerElement && (
|
|
140
|
+
this._triggerElement && this._detach(), this._triggerElement = t, this._triggerElement && (q(this._triggerElement, "aria-describedby", this.id), this._addTriggerEventHandlers());
|
|
138
141
|
}
|
|
139
142
|
_detach() {
|
|
140
143
|
this._triggerAbortController?.abort(), this._openStateController?.abort(), this._resetOpenCloseTimeout(), clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._triggerElement && (Z(this._triggerElement, "aria-describedby", this.id), this._triggerElement = null);
|
|
@@ -142,17 +145,6 @@ let K = 0, pt = (() => {
|
|
|
142
145
|
_destroy() {
|
|
143
146
|
this._detach(), this.remove();
|
|
144
147
|
}
|
|
145
|
-
_setTooltipPosition() {
|
|
146
|
-
if (!this.overlay || !this._triggerElement)
|
|
147
|
-
return;
|
|
148
|
-
const t = W(this.overlay, this._triggerElement, this, {
|
|
149
|
-
verticalOffset: V,
|
|
150
|
-
horizontalOffset: Y,
|
|
151
|
-
centered: !0,
|
|
152
|
-
responsiveHeight: !0
|
|
153
|
-
});
|
|
154
|
-
this.setAttribute("data-position", t.alignment.vertical), this.style.setProperty("--sbb-tooltip-position-x", `${t.left}px`), this.style.setProperty("--sbb-tooltip-position-y", `${t.top}px`);
|
|
155
|
-
}
|
|
156
148
|
_addTriggerEventHandlers() {
|
|
157
149
|
const t = this._triggerElement;
|
|
158
150
|
if (!t)
|
|
@@ -162,9 +154,9 @@ let K = 0, pt = (() => {
|
|
|
162
154
|
signal: this._triggerAbortController.signal,
|
|
163
155
|
passive: !0
|
|
164
156
|
};
|
|
165
|
-
|
|
166
|
-
const
|
|
167
|
-
(!
|
|
157
|
+
W || (t.addEventListener("mouseenter", () => this._delayedOpen(), e), t.addEventListener("mouseleave", (o) => {
|
|
158
|
+
const n = o.relatedTarget;
|
|
159
|
+
(!n || n !== this) && this._delayedClose();
|
|
168
160
|
}, e), t.addEventListener("blur", () => this.close(), e), t.addEventListener("focus", () => this._delayedOpen(), e)), t.addEventListener("touchstart", () => {
|
|
169
161
|
clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._longPressOpenTimeout = setTimeout(() => this.open(), G);
|
|
170
162
|
}, e), t.addEventListener("touchend", () => {
|
|
@@ -173,48 +165,32 @@ let K = 0, pt = (() => {
|
|
|
173
165
|
clearTimeout(this._longPressOpenTimeout);
|
|
174
166
|
}, e);
|
|
175
167
|
}
|
|
176
|
-
_attachWindowEvents() {
|
|
177
|
-
this._openStateController = new AbortController(), document.addEventListener("scroll", () => this._setTooltipPosition(), {
|
|
178
|
-
passive: !0,
|
|
179
|
-
signal: this._openStateController.signal,
|
|
180
|
-
// Without capture, other scroll contexts would not bubble to this event listener.
|
|
181
|
-
// Capture allows us to react to all scroll contexts in this DOM.
|
|
182
|
-
capture: !0
|
|
183
|
-
}), window.addEventListener("resize", () => this._setTooltipPosition(), {
|
|
184
|
-
passive: !0,
|
|
185
|
-
signal: this._openStateController.signal
|
|
186
|
-
});
|
|
187
|
-
}
|
|
188
168
|
_isZeroAnimationDuration() {
|
|
189
|
-
return
|
|
169
|
+
return j(this, "--sbb-tooltip-animation-duration");
|
|
190
170
|
}
|
|
191
171
|
_resetOpenCloseTimeout() {
|
|
192
172
|
clearTimeout(this._openTimeout), clearTimeout(this._closeTimeout);
|
|
193
173
|
}
|
|
194
174
|
render() {
|
|
195
175
|
return S`
|
|
196
|
-
<div
|
|
197
|
-
@animationend=${this._onTooltipAnimationEnd}
|
|
198
|
-
class="sbb-tooltip"
|
|
199
|
-
${N((t) => this.overlay = t)}
|
|
200
|
-
>
|
|
176
|
+
<div class="sbb-tooltip">
|
|
201
177
|
<slot></slot>
|
|
202
178
|
</div>
|
|
203
179
|
`;
|
|
204
180
|
}
|
|
205
|
-
},
|
|
181
|
+
}, d = new WeakMap(), r = l, (() => {
|
|
206
182
|
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
|
|
207
|
-
|
|
183
|
+
y = [U(), h()], T = [h({ attribute: "open-delay", type: Number })], C = [h({ attribute: "close-delay", type: Number })], D = [h({ attribute: "long-press-close-delay", type: Number })], b(l, null, y, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, o) => {
|
|
208
184
|
e.trigger = o;
|
|
209
|
-
} }, metadata: t },
|
|
185
|
+
} }, metadata: t }, _, f), b(l, null, T, { kind: "setter", name: "openDelay", static: !1, private: !1, access: { has: (e) => "openDelay" in e, set: (e, o) => {
|
|
210
186
|
e.openDelay = o;
|
|
211
187
|
} }, metadata: t }, null, p), b(l, null, C, { kind: "setter", name: "closeDelay", static: !1, private: !1, access: { has: (e) => "closeDelay" in e, set: (e, o) => {
|
|
212
188
|
e.closeDelay = o;
|
|
213
|
-
} }, metadata: t }, null, p), b(l, null,
|
|
189
|
+
} }, metadata: t }, null, p), b(l, null, D, { kind: "setter", name: "longPressCloseDelay", static: !1, private: !1, access: { has: (e) => "longPressCloseDelay" in e, set: (e, o) => {
|
|
214
190
|
e.longPressCloseDelay = o;
|
|
215
|
-
} }, metadata: t }, null, p), b(null,
|
|
216
|
-
})(), l.role = "tooltip", l.styles =
|
|
191
|
+
} }, metadata: t }, null, p), b(null, s = { value: r }, i, { kind: "class", name: r.name, metadata: t }, null, a), r = s.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
|
|
192
|
+
})(), l.role = "tooltip", l.styles = R, E || H(() => r._initializeTooltipOutlet()), c(r, a), r;
|
|
217
193
|
})();
|
|
218
194
|
export {
|
|
219
|
-
|
|
195
|
+
rt as SbbTooltipElement
|
|
220
196
|
};
|