@sbb-esta/lyne-elements-dev 4.12.0-dev.1777358825 → 4.12.0-dev.1777503664
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/core/overlay/position.js +4 -4
- package/development/core/overlay/position.d.ts.map +1 -1
- package/development/core/overlay/position.js +4 -2
- package/development/popover/popover.component.d.ts +1 -1
- package/development/popover/popover.component.d.ts.map +1 -1
- package/development/popover/popover.component.js +1 -1
- package/development/popover.component-EgOs-wsR.js +572 -0
- package/development/popover.js +1 -1
- package/development/popover.pure.js +1 -1
- package/package.json +2 -2
- package/popover/popover.component.js +1 -1
- package/{popover.component-DAgwBcBW.js → popover.component-CnOrQaaa.js} +78 -58
- package/popover.js +1 -1
- package/popover.pure.js +1 -1
- package/development/popover.component-rZb6B9uW.js +0 -546
package/development/popover.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as SbbPopoverElement, t as SbbPopoverBaseElement } from "./popover.component-
|
|
1
|
+
import { n as SbbPopoverElement, t as SbbPopoverBaseElement } from "./popover.component-EgOs-wsR.js";
|
|
2
2
|
import "./popover.pure.js";
|
|
3
3
|
//#region src/elements/popover.ts
|
|
4
4
|
/** @entrypoint */
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as SbbPopoverElement, t as SbbPopoverBaseElement } from "./popover.component-
|
|
1
|
+
import { n as SbbPopoverElement, t as SbbPopoverBaseElement } from "./popover.component-EgOs-wsR.js";
|
|
2
2
|
export { SbbPopoverBaseElement, SbbPopoverElement };
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "4.12.0-dev.
|
|
3
|
+
"version": "4.12.0-dev.1777503664",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/0cb903443299f90633654acddcd404040eebff22"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as e, t } from "../popover.component-
|
|
1
|
+
import { n as e, t } from "../popover.component-CnOrQaaa.js";
|
|
2
2
|
export { t as SbbPopoverBaseElement, e as SbbPopoverElement };
|
|
@@ -1,42 +1,42 @@
|
|
|
1
1
|
import { __esDecorate as e, __runInitializers as t } from "tslib";
|
|
2
2
|
import { html as n, isServer as r, nothing as i, unsafeCSS as a } from "lit";
|
|
3
|
-
import { property as o } from "lit/decorators.js";
|
|
4
|
-
import { SbbOpenCloseBaseElement as
|
|
5
|
-
import { forceType as
|
|
6
|
-
import { isZeroAnimationDuration as
|
|
7
|
-
import { composedPathHasAttribute as
|
|
8
|
-
import { ɵstateController as
|
|
9
|
-
import { boxSizingStyles as
|
|
10
|
-
import { SbbSecondaryButtonElement as
|
|
11
|
-
import { SbbEscapableOverlayController as
|
|
12
|
-
import { i18nClosePopover as
|
|
13
|
-
import { ResizeController as
|
|
14
|
-
import { ref as
|
|
15
|
-
import { getElementPosition as
|
|
16
|
-
import { IS_FOCUSABLE_QUERY as
|
|
17
|
-
import { readConfig as
|
|
3
|
+
import { property as o, state as s } from "lit/decorators.js";
|
|
4
|
+
import { SbbOpenCloseBaseElement as c } from "./core/base-elements.js";
|
|
5
|
+
import { forceType as l, idReference as u } from "./core/decorators.js";
|
|
6
|
+
import { isZeroAnimationDuration as d } from "./core/dom.js";
|
|
7
|
+
import { composedPathHasAttribute as f } from "./core/eventing.js";
|
|
8
|
+
import { ɵstateController as p } from "./core/mixins.js";
|
|
9
|
+
import { boxSizingStyles as m } from "./core/styles.js";
|
|
10
|
+
import { SbbSecondaryButtonElement as h } from "./button.pure.js";
|
|
11
|
+
import { SbbEscapableOverlayController as g, SbbLanguageController as _, SbbMediaQueryPointerCoarse as v } from "./core/controllers.js";
|
|
12
|
+
import { i18nClosePopover as y } from "./core/i18n.js";
|
|
13
|
+
import { ResizeController as b } from "@lit-labs/observers/resize-controller.js";
|
|
14
|
+
import { ref as x } from "lit/directives/ref.js";
|
|
15
|
+
import { getElementPosition as S, isEventOnElement as C, removeAriaOverlayTriggerAttributes as w, setAriaOverlayTriggerAttributes as T } from "./core/overlay.js";
|
|
16
|
+
import { IS_FOCUSABLE_QUERY as E, SbbFocusTrapController as D, isFakeMousedownFromScreenReader as O, sbbInputModalityDetector as k } from "./core/a11y.js";
|
|
17
|
+
import { readConfig as A } from "./core/config.js";
|
|
18
18
|
//#region src/elements/popover/popover.scss?inline
|
|
19
|
-
var
|
|
19
|
+
var j = ":host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-popover-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--_sbb-popover-inset: 0 auto auto 0;--_sbb-popover-transform: translateY(var(--sbb-spacing-fixed-2x));--_sbb-popover-box-shadow: var(--sbb-box-shadow-level-9-hard);outline:none!important;display:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--_sbb-popover-inset: 0;display:block}:host(:is(:state(position-above),[state--position-above])){--_sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}:host(:not([hide-close-button],:is(:state(hover-trigger),[state--hover-trigger]))){--sbb-popover-min-height: calc(var(--sbb-size-element-xs) + 2 * var(--sbb-popover-padding))}.sbb-popover:after,.sbb-popover__content:before{content:\"\";position:absolute;display:block;width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--_sbb-popover-arrow-position-x, 0);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;transform:rotate(45deg)}.sbb-popover__container{position:fixed;inset:var(--_sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index, var(--sbb-overlay-default-z-index))}.sbb-popover{display:none;position:var(--sbb-popover-position, absolute);top:var(--_sbb-popover-position-y, 0);bottom:unset;left:var(--_sbb-popover-position-x, 0);right:unset;background-color:var(--sbb-popover-background);max-width:var(--sbb-popover-max-width);width:max-content;padding:0;box-shadow:var(--_sbb-popover-box-shadow);border:none;border-radius:var(--sbb-popover-border-radius);outline:none;pointer-events:all}:host(:focus-visible) .sbb-popover{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-popover{display:block;animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{z-index:-1;box-shadow:var(--_sbb-popover-box-shadow)}@media(forced-colors:active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media(forced-colors:active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:\"\";display:block;position:absolute;inset:0;z-index:-1;background-color:transparent}:host(:is(:state(position-below),[state--position-below])) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{display:flex;gap:var(--sbb-spacing-fixed-4x);border-radius:var(--sbb-popover-border-radius);padding-block:var(--sbb-popover-padding) 0;padding-inline:var(--sbb-popover-padding);outline:none;background-color:var(--sbb-popover-background);flex-direction:row-reverse;min-height:var(--sbb-popover-min-height)}:host(:is(:state(position-above),[state--position-above])) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}.sbb-popover__scrollable-content{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-popover__scrollable-content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-popover__scrollable-content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-popover__scrollable-content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-popover__scrollable-content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-popover__scrollable-content::-webkit-scrollbar-button,.sbb-popover__scrollable-content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-popover__scrollable-content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-popover__scrollable-content{display:block;padding-block-end:var(--sbb-popover-padding);max-height:calc(var(--_sbb-popover-max-height));overflow:auto}@keyframes open{0%{opacity:0;transform:var(--_sbb-popover-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--_sbb-popover-transform)}}";
|
|
20
20
|
//#endregion
|
|
21
21
|
//#region src/elements/popover/popover.component.ts
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
let i =
|
|
22
|
+
h.define();
|
|
23
|
+
var M = 16, N = 32, P = 0, F = /* @__PURE__ */ new Set(), I = r ? !1 : matchMedia(v).matches, L = (() => {
|
|
24
|
+
let i = c, s, l = [], p = [];
|
|
25
25
|
return class extends i {
|
|
26
26
|
constructor() {
|
|
27
|
-
super(...arguments), this.#e = t(this,
|
|
27
|
+
super(...arguments), this.#e = t(this, l, null), this._nextFocusedElement = t(this, p), this._skipCloseFocus = !1, this._resizeController = new b(this, {
|
|
28
28
|
target: null,
|
|
29
29
|
callback: () => this._setPopoverPosition()
|
|
30
|
-
}), this._escapableOverlayController = new
|
|
31
|
-
this._isPointerDownEventOnPopover =
|
|
30
|
+
}), this._escapableOverlayController = new g(this), this._focusTrapController = new D(this), this._blurTimeout = null, this._pointerDownListener = (e) => {
|
|
31
|
+
this._isPointerDownEventOnPopover = C(this.overlay, e);
|
|
32
32
|
}, this._closeOnBackdropClick = (e) => {
|
|
33
33
|
let t = e.composedPath();
|
|
34
|
-
!this._isPointerDownEventOnPopover && !
|
|
34
|
+
!this._isPointerDownEventOnPopover && !C(this.overlay, e) && (!this.trigger || !t.includes(this.trigger)) && (this._nextFocusedElement = t.filter((e) => e instanceof window.HTMLElement).find((e) => e.matches(E)), clearTimeout(this.closeTimeout), this.close());
|
|
35
35
|
};
|
|
36
36
|
}
|
|
37
37
|
static {
|
|
38
38
|
let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
|
|
39
|
-
|
|
39
|
+
s = [u(), o()], e(this, null, s, {
|
|
40
40
|
kind: "accessor",
|
|
41
41
|
name: "trigger",
|
|
42
42
|
static: !1,
|
|
@@ -49,7 +49,7 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
49
49
|
}
|
|
50
50
|
},
|
|
51
51
|
metadata: t
|
|
52
|
-
},
|
|
52
|
+
}, l, p), t && Object.defineProperty(this, Symbol.metadata, {
|
|
53
53
|
enumerable: !0,
|
|
54
54
|
configurable: !0,
|
|
55
55
|
writable: !0,
|
|
@@ -57,7 +57,7 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
57
57
|
});
|
|
58
58
|
}
|
|
59
59
|
static {
|
|
60
|
-
this.styles = [
|
|
60
|
+
this.styles = [m, a(j)];
|
|
61
61
|
}
|
|
62
62
|
#e;
|
|
63
63
|
get trigger() {
|
|
@@ -68,7 +68,7 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
68
68
|
}
|
|
69
69
|
open() {
|
|
70
70
|
if (!(this.state !== "closed" && this.state !== "closing" || !this.overlay || !this.dispatchBeforeOpenEvent())) {
|
|
71
|
-
for (let e of
|
|
71
|
+
for (let e of F) (e.state === "opened" || e.state === "opening") && e.close();
|
|
72
72
|
this.showPopover?.(), this.state = "opening", this.inert = !0, this._setPopoverPosition(), this._attachWindowEvents(), this._escapableOverlayController.connect(), this._triggerElement?.setAttribute("aria-expanded", "true"), this._nextFocusedElement = void 0, this._skipCloseFocus = !1, this._isZeroAnimationDuration() && this._handleOpening();
|
|
73
73
|
}
|
|
74
74
|
}
|
|
@@ -76,7 +76,7 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
76
76
|
this.state !== "opened" && this.state !== "opening" || (this._popoverCloseElement = e, this.dispatchBeforeCloseEvent({ closeTarget: e ?? null }) && (this.state = "closing", this.inert = !0, this._triggerElement?.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing()));
|
|
77
77
|
}
|
|
78
78
|
_isZeroAnimationDuration() {
|
|
79
|
-
return
|
|
79
|
+
return d(this, "--sbb-popover-animation-duration");
|
|
80
80
|
}
|
|
81
81
|
_handleClosing() {
|
|
82
82
|
this.state = "closed", this.hidePopover?.(), this.overlay && (this._resizeController.unobserve(this.overlay), this.overlay.firstElementChild?.scrollTo(0, 0)), this.removeAttribute("tabindex"), this._skipCloseFocus || (this._nextFocusedElement || this._triggerElement)?.focus(), this._escapableOverlayController.disconnect(), this._openStateController?.abort(), this._focusTrapController.enabled = !1, this.dispatchCloseEvent({ closeTarget: this._popoverCloseElement ?? null });
|
|
@@ -85,7 +85,7 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
85
85
|
this.state = "opened", this.inert = !1, this._setPopoverFocus(), this._focusTrapController.enabled = !0, this.overlay && this._resizeController.observe(this.overlay), this.dispatchOpenEvent();
|
|
86
86
|
}
|
|
87
87
|
connectedCallback() {
|
|
88
|
-
this.popover = "manual", super.connectedCallback(), this.id ||= `sbb-popover-${++
|
|
88
|
+
this.popover = "manual", super.connectedCallback(), this.id ||= `sbb-popover-${++P}`, this.state = "closed", F.add(this), this.hasUpdated && this._configureTrigger();
|
|
89
89
|
}
|
|
90
90
|
requestUpdate(e, t, n) {
|
|
91
91
|
super.requestUpdate(e, t, n), !r && (!e || e === "trigger" || e === "hoverTrigger") && this.hasUpdated && this._configureTrigger();
|
|
@@ -94,7 +94,7 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
94
94
|
super.firstUpdated(e), this._configureTrigger();
|
|
95
95
|
}
|
|
96
96
|
disconnectedCallback() {
|
|
97
|
-
super.disconnectedCallback(), this._triggerElement = null, this._triggerAbortController?.abort(), this._openStateController?.abort(),
|
|
97
|
+
super.disconnectedCallback(), this._triggerElement = null, this._triggerAbortController?.abort(), this._openStateController?.abort(), F.delete(this), this._blurTimeout && clearTimeout(this._blurTimeout);
|
|
98
98
|
}
|
|
99
99
|
_configureTrigger() {
|
|
100
100
|
if (!r) {
|
|
@@ -106,7 +106,7 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
configureTrigger(e) {
|
|
109
|
-
this._triggerAbortController?.abort(),
|
|
109
|
+
this._triggerAbortController?.abort(), w(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (T(this._triggerElement, "dialog", this.id, this.state), this._triggerAbortController = new AbortController(), this.registerTriggerListeners(this._triggerAbortController.signal));
|
|
110
110
|
}
|
|
111
111
|
registerTriggerListeners(e) {
|
|
112
112
|
this._triggerElement.addEventListener("click", () => this.open(), { signal: e });
|
|
@@ -122,7 +122,7 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
122
122
|
}), window.addEventListener("pointerdown", this._pointerDownListener, { signal: this._openStateController.signal }), window.addEventListener("pointerup", this._closeOnBackdropClick, { signal: this._openStateController.signal });
|
|
123
123
|
}
|
|
124
124
|
_closeOnSbbPopoverCloseClick(e) {
|
|
125
|
-
let t =
|
|
125
|
+
let t = f(e, "sbb-popover-close", this);
|
|
126
126
|
t && !t.hasAttribute("disabled") && (clearTimeout(this.closeTimeout), this.close(t));
|
|
127
127
|
}
|
|
128
128
|
_onPopoverAnimationEnd(e) {
|
|
@@ -140,9 +140,9 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
140
140
|
}
|
|
141
141
|
_setPopoverPosition() {
|
|
142
142
|
if (!this.overlay || !this._triggerElement) return;
|
|
143
|
-
let e =
|
|
144
|
-
verticalOffset:
|
|
145
|
-
horizontalOffset:
|
|
143
|
+
let e = S(this.overlay, this._triggerElement, this.shadowRoot.querySelector(".sbb-popover__container"), {
|
|
144
|
+
verticalOffset: M,
|
|
145
|
+
horizontalOffset: N,
|
|
146
146
|
centered: !0,
|
|
147
147
|
responsiveHeight: !0
|
|
148
148
|
}), t = e.alignment.vertical;
|
|
@@ -166,7 +166,7 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
166
166
|
@animationend=${this._onPopoverAnimationEnd}
|
|
167
167
|
class="sbb-popover"
|
|
168
168
|
role="tooltip"
|
|
169
|
-
${
|
|
169
|
+
${x((e) => this.overlay = e)}
|
|
170
170
|
>
|
|
171
171
|
<div
|
|
172
172
|
@click=${(e) => this._closeOnSbbPopoverCloseClick(e)}
|
|
@@ -179,13 +179,13 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
179
179
|
`;
|
|
180
180
|
}
|
|
181
181
|
};
|
|
182
|
-
})(),
|
|
183
|
-
let r =
|
|
182
|
+
})(), R = (() => {
|
|
183
|
+
let r = L, a = [], c, u = [], d = [], f, m = [], h = [], g, v, b, x = [], S = [], C, w = [], T = [];
|
|
184
184
|
return class extends r {
|
|
185
185
|
constructor() {
|
|
186
|
-
super(...arguments), this.#e = (t(this, a), t(this,
|
|
186
|
+
super(...arguments), this.#e = (t(this, a), t(this, u, !1)), this.#t = (t(this, d), t(this, m, !1)), this._openDelay = t(this, h), this.#n = t(this, x, ""), this.#r = (t(this, S), t(this, w, !1)), this._openTimeout = t(this, T), this._language = new _(this), this._overlayAbortController = null, this._onTriggerMouseEnter = () => {
|
|
187
187
|
this.state === "closed" || this.state === "closing" ? this._openTimeout = setTimeout(() => {
|
|
188
|
-
|
|
188
|
+
k.reset(), this.open();
|
|
189
189
|
}, this.openDelay) : clearTimeout(this.closeTimeout);
|
|
190
190
|
}, this._onTriggerMouseLeave = () => {
|
|
191
191
|
this.state === "opened" || this.state === "opening" ? this.closeTimeout = setTimeout(() => this.close(), this.closeDelay) : clearTimeout(this._openTimeout);
|
|
@@ -197,20 +197,20 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
197
197
|
}
|
|
198
198
|
static {
|
|
199
199
|
let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
|
|
200
|
-
|
|
200
|
+
c = [l(), o({
|
|
201
201
|
attribute: "hide-close-button",
|
|
202
202
|
type: Boolean,
|
|
203
203
|
reflect: !0
|
|
204
|
-
})],
|
|
204
|
+
})], f = [l(), o({
|
|
205
205
|
attribute: "hover-trigger",
|
|
206
206
|
type: Boolean
|
|
207
|
-
})],
|
|
207
|
+
})], g = [o({
|
|
208
208
|
attribute: "open-delay",
|
|
209
209
|
type: Number
|
|
210
|
-
})],
|
|
210
|
+
})], v = [o({
|
|
211
211
|
attribute: "close-delay",
|
|
212
212
|
type: Number
|
|
213
|
-
})],
|
|
213
|
+
})], b = [l(), o({ attribute: "accessibility-close-label" })], C = [s()], e(this, null, c, {
|
|
214
214
|
kind: "accessor",
|
|
215
215
|
name: "hideCloseButton",
|
|
216
216
|
static: !1,
|
|
@@ -223,7 +223,7 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
223
223
|
}
|
|
224
224
|
},
|
|
225
225
|
metadata: t
|
|
226
|
-
},
|
|
226
|
+
}, u, d), e(this, null, f, {
|
|
227
227
|
kind: "accessor",
|
|
228
228
|
name: "hoverTrigger",
|
|
229
229
|
static: !1,
|
|
@@ -236,7 +236,7 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
236
236
|
}
|
|
237
237
|
},
|
|
238
238
|
metadata: t
|
|
239
|
-
},
|
|
239
|
+
}, m, h), e(this, null, g, {
|
|
240
240
|
kind: "setter",
|
|
241
241
|
name: "openDelay",
|
|
242
242
|
static: !1,
|
|
@@ -248,7 +248,7 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
248
248
|
}
|
|
249
249
|
},
|
|
250
250
|
metadata: t
|
|
251
|
-
}, null, a), e(this, null,
|
|
251
|
+
}, null, a), e(this, null, v, {
|
|
252
252
|
kind: "setter",
|
|
253
253
|
name: "closeDelay",
|
|
254
254
|
static: !1,
|
|
@@ -260,7 +260,7 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
260
260
|
}
|
|
261
261
|
},
|
|
262
262
|
metadata: t
|
|
263
|
-
}, null, a), e(this, null,
|
|
263
|
+
}, null, a), e(this, null, b, {
|
|
264
264
|
kind: "accessor",
|
|
265
265
|
name: "accessibilityCloseLabel",
|
|
266
266
|
static: !1,
|
|
@@ -273,7 +273,20 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
273
273
|
}
|
|
274
274
|
},
|
|
275
275
|
metadata: t
|
|
276
|
-
},
|
|
276
|
+
}, x, S), e(this, null, C, {
|
|
277
|
+
kind: "accessor",
|
|
278
|
+
name: "_hoverTrigger",
|
|
279
|
+
static: !1,
|
|
280
|
+
private: !1,
|
|
281
|
+
access: {
|
|
282
|
+
has: (e) => "_hoverTrigger" in e,
|
|
283
|
+
get: (e) => e._hoverTrigger,
|
|
284
|
+
set: (e, t) => {
|
|
285
|
+
e._hoverTrigger = t;
|
|
286
|
+
}
|
|
287
|
+
},
|
|
288
|
+
metadata: t
|
|
289
|
+
}, w, T), t && Object.defineProperty(this, Symbol.metadata, {
|
|
277
290
|
enumerable: !0,
|
|
278
291
|
configurable: !0,
|
|
279
292
|
writable: !0,
|
|
@@ -301,13 +314,13 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
301
314
|
this._openDelay = +e;
|
|
302
315
|
}
|
|
303
316
|
get openDelay() {
|
|
304
|
-
return this._openDelay ??
|
|
317
|
+
return this._openDelay ?? A().popover?.openDelay ?? 0;
|
|
305
318
|
}
|
|
306
319
|
set closeDelay(e) {
|
|
307
320
|
this._closeDelay = +e;
|
|
308
321
|
}
|
|
309
322
|
get closeDelay() {
|
|
310
|
-
return this._closeDelay ??
|
|
323
|
+
return this._closeDelay ?? A().popover?.closeDelay ?? 0;
|
|
311
324
|
}
|
|
312
325
|
#n;
|
|
313
326
|
get accessibilityCloseLabel() {
|
|
@@ -316,8 +329,15 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
316
329
|
set accessibilityCloseLabel(e) {
|
|
317
330
|
this.#n = e;
|
|
318
331
|
}
|
|
332
|
+
#r;
|
|
333
|
+
get _hoverTrigger() {
|
|
334
|
+
return this.#r;
|
|
335
|
+
}
|
|
336
|
+
set _hoverTrigger(e) {
|
|
337
|
+
this.#r = e;
|
|
338
|
+
}
|
|
319
339
|
configureTrigger(e) {
|
|
320
|
-
let t = this.hoverTrigger && !
|
|
340
|
+
let t = this.hoverTrigger && !I;
|
|
321
341
|
this.trigger === e && t === this._hoverTrigger || (this._hoverTrigger !== t && (this._hoverTrigger = t, this.toggleState("hover-trigger", this._hoverTrigger), this._registerOverlayListeners()), super.configureTrigger(e));
|
|
322
342
|
}
|
|
323
343
|
_registerOverlayListeners() {
|
|
@@ -327,22 +347,22 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
327
347
|
this._hoverTrigger && this.trigger ? (this.trigger.addEventListener("mouseenter", this._onTriggerMouseEnter, { signal: e }), this.trigger.addEventListener("mouseleave", this._onTriggerMouseLeave, { signal: e }), this.trigger.addEventListener("keydown", (e) => {
|
|
328
348
|
(e.code === "Space" || e.code === "Enter") && this.open();
|
|
329
349
|
}, { signal: e }), this.trigger.addEventListener("mousedown", (e) => {
|
|
330
|
-
|
|
350
|
+
O(e) && this.open();
|
|
331
351
|
}, { signal: e })) : super.registerTriggerListeners(e);
|
|
332
352
|
}
|
|
333
353
|
firstUpdated(e) {
|
|
334
354
|
super.firstUpdated(e), this._registerOverlayListeners();
|
|
335
355
|
}
|
|
336
356
|
open() {
|
|
337
|
-
super.open(), this.hoverTrigger && this.trigger &&
|
|
357
|
+
super.open(), this.hoverTrigger && this.trigger && p(this.trigger).add("force-hover");
|
|
338
358
|
}
|
|
339
359
|
close() {
|
|
340
|
-
super.close(),
|
|
360
|
+
super.close(), p(this.trigger)?.delete("force-hover");
|
|
341
361
|
}
|
|
342
362
|
renderContent() {
|
|
343
363
|
let e = n`
|
|
344
364
|
<sbb-secondary-button
|
|
345
|
-
aria-label=${this.accessibilityCloseLabel ||
|
|
365
|
+
aria-label=${this.accessibilityCloseLabel || y[this._language.current]}
|
|
346
366
|
size="s"
|
|
347
367
|
type="button"
|
|
348
368
|
icon-name="cross-small"
|
|
@@ -359,4 +379,4 @@ var j = 16, M = 32, N = 0, P = /* @__PURE__ */ new Set(), F = r ? !1 : matchMedi
|
|
|
359
379
|
};
|
|
360
380
|
})();
|
|
361
381
|
//#endregion
|
|
362
|
-
export {
|
|
382
|
+
export { R as n, L as t };
|
package/popover.js
CHANGED
package/popover.pure.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as e, t } from "./popover.component-
|
|
1
|
+
import { n as e, t } from "./popover.component-CnOrQaaa.js";
|
|
2
2
|
export { t as SbbPopoverBaseElement, e as SbbPopoverElement };
|