@sbb-esta/lyne-elements 2.0.3 → 2.1.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/accordion/accordion.d.ts.map +1 -1
- package/accordion.js +6 -6
- package/alert/alert.js +8 -8
- package/autocomplete/autocomplete-base-element.d.ts.map +1 -1
- package/autocomplete-grid/autocomplete-grid-button.js +4 -4
- package/autocomplete-grid/autocomplete-grid-optgroup.js +4 -4
- package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.d.ts +1 -1
- package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.d.ts.map +1 -1
- package/autocomplete-grid/autocomplete-grid-option.js +10 -10
- package/autocomplete-grid/autocomplete-grid-row.js +4 -4
- package/autocomplete.js +92 -89
- package/breadcrumb/breadcrumb-group.js +4 -4
- package/button/accent-button-link.js +9 -9
- package/button/accent-button-static.js +6 -6
- package/button/accent-button.js +6 -6
- package/button/button-link.js +7 -7
- package/button/button-static.js +7 -7
- package/button/button.js +8 -8
- package/button/common.js +1 -1
- package/button/mini-button-group.js +8 -8
- package/button/secondary-button-link.js +7 -7
- package/button/secondary-button-static.js +7 -7
- package/button/secondary-button.js +3 -3
- package/button/transparent-button-link.js +6 -6
- package/button/transparent-button-static.js +5 -5
- package/button/transparent-button.js +6 -6
- package/card/card-badge.js +9 -9
- package/card/card-button.js +5 -5
- package/card/card-link.js +7 -7
- package/checkbox/checkbox-panel.js +16 -16
- package/checkbox/checkbox.js +15 -15
- package/checkbox/common.js +3 -3
- package/clock.js +8 -8
- package/container/container/container.d.ts +1 -1
- package/container/container/container.d.ts.map +1 -1
- package/container/container.js +21 -21
- package/container/sticky-bar/sticky-bar.d.ts +1 -1
- package/container/sticky-bar/sticky-bar.d.ts.map +1 -1
- package/container/sticky-bar.js +4 -4
- package/core/base-elements.js +8 -8
- package/core/controllers.js +4 -4
- package/core/datetime/date-adapter.d.ts +1 -1
- package/core/datetime/date-adapter.d.ts.map +1 -1
- package/core/datetime/native-date-adapter.d.ts +1 -1
- package/core/datetime/native-date-adapter.d.ts.map +1 -1
- package/core/datetime.js +6 -6
- package/core/dom/scroll.d.ts +1 -1
- package/core/dom/scroll.d.ts.map +1 -1
- package/core/dom.js +39 -39
- package/core/eventing.js +4 -4
- package/core/mixins.js +18 -18
- package/core/styles/core.scss +21 -2
- package/core/testing.js +14 -14
- package/core.css +18 -2
- package/custom-elements.json +364 -428
- package/datepicker/common/datepicker-association-controllers.d.ts +21 -0
- package/datepicker/common/datepicker-association-controllers.d.ts.map +1 -0
- package/datepicker/common/datepicker-button.d.ts +17 -9
- package/datepicker/common/datepicker-button.d.ts.map +1 -1
- package/datepicker/common.d.ts +1 -0
- package/datepicker/common.d.ts.map +1 -1
- package/datepicker/common.js +130 -92
- package/datepicker/datepicker/datepicker.d.ts +19 -4
- package/datepicker/datepicker/datepicker.d.ts.map +1 -1
- package/datepicker/datepicker-toggle/datepicker-toggle.d.ts +14 -8
- package/datepicker/datepicker-toggle/datepicker-toggle.d.ts.map +1 -1
- package/datepicker/datepicker-toggle.js +108 -112
- package/datepicker/datepicker.js +95 -80
- package/development/accordion/accordion.d.ts.map +1 -1
- package/development/accordion.js +1 -1
- package/development/autocomplete/autocomplete-base-element.d.ts.map +1 -1
- package/development/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.d.ts +1 -1
- package/development/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.d.ts.map +1 -1
- package/development/autocomplete-grid/autocomplete-grid-option.js +3 -3
- package/development/autocomplete.js +24 -8
- package/development/button/common.js +4 -2
- package/development/calendar.js +1 -1
- package/development/container/container/container.d.ts +1 -1
- package/development/container/container/container.d.ts.map +1 -1
- package/development/container/container.js +17 -1
- package/development/container/sticky-bar/sticky-bar.d.ts +1 -1
- package/development/container/sticky-bar/sticky-bar.d.ts.map +1 -1
- package/development/container/sticky-bar.js +9 -1
- package/development/core/datetime/date-adapter.d.ts +1 -1
- package/development/core/datetime/date-adapter.d.ts.map +1 -1
- package/development/core/datetime/native-date-adapter.d.ts +1 -1
- package/development/core/datetime/native-date-adapter.d.ts.map +1 -1
- package/development/core/datetime.js +1 -1
- package/development/core/dom/scroll.d.ts +1 -1
- package/development/core/dom/scroll.d.ts.map +1 -1
- package/development/core/dom.js +4 -4
- package/development/core/mixins.js +1 -1
- package/development/datepicker/common/datepicker-association-controllers.d.ts +21 -0
- package/development/datepicker/common/datepicker-association-controllers.d.ts.map +1 -0
- package/development/datepicker/common/datepicker-button.d.ts +17 -9
- package/development/datepicker/common/datepicker-button.d.ts.map +1 -1
- package/development/datepicker/common.d.ts +1 -0
- package/development/datepicker/common.d.ts.map +1 -1
- package/development/datepicker/common.js +139 -90
- package/development/datepicker/datepicker/datepicker.d.ts +19 -4
- package/development/datepicker/datepicker/datepicker.d.ts.map +1 -1
- package/development/datepicker/datepicker-toggle/datepicker-toggle.d.ts +14 -8
- package/development/datepicker/datepicker-toggle/datepicker-toggle.d.ts.map +1 -1
- package/development/datepicker/datepicker-toggle.js +65 -69
- package/development/datepicker/datepicker.js +54 -36
- package/development/dialog/dialog/dialog.d.ts +2 -0
- package/development/dialog/dialog/dialog.d.ts.map +1 -1
- package/development/dialog/dialog.js +37 -11
- package/development/menu/menu/menu.d.ts.map +1 -1
- package/development/menu/menu.js +35 -12
- package/development/navigation/navigation/navigation.d.ts.map +1 -1
- package/development/navigation/navigation.js +15 -8
- package/development/option/option/option-base-element.d.ts +3 -2
- package/development/option/option/option-base-element.d.ts.map +1 -1
- package/development/option/option.js +15 -8
- package/development/overlay/overlay-base-element.d.ts.map +1 -1
- package/development/overlay/overlay.d.ts.map +1 -1
- package/development/overlay.js +29 -13
- package/development/popover/popover/popover.d.ts.map +1 -1
- package/development/popover/popover.js +16 -13
- package/development/select/select.d.ts +11 -0
- package/development/select/select.d.ts.map +1 -1
- package/development/select.js +60 -9
- package/development/toast/toast.d.ts.map +1 -1
- package/development/toast.js +14 -8
- package/development/toggle/toggle.js +1 -1
- package/development/train/train-wagon.js +1 -1
- package/dialog/dialog/dialog.d.ts +2 -0
- package/dialog/dialog/dialog.d.ts.map +1 -1
- package/dialog/dialog-content.js +3 -3
- package/dialog/dialog-title.js +8 -8
- package/dialog/dialog.js +59 -49
- package/divider.js +12 -12
- package/file-selector/file-selector-dropzone.js +5 -5
- package/file-selector/file-selector.js +6 -6
- package/flip-card/flip-card-details.js +4 -4
- package/flip-card/flip-card-summary.js +9 -9
- package/header/header-button.js +5 -5
- package/header/header-link.js +5 -5
- package/icon.js +36 -36
- package/link/block-link-button.js +4 -4
- package/link/block-link-static.js +9 -9
- package/link/block-link.js +4 -4
- package/link/common.js +16 -16
- package/link/link-button.js +7 -7
- package/link/link-static.js +7 -7
- package/link/link.js +4 -4
- package/link-list/common.js +12 -12
- package/loading-indicator-circle.js +11 -11
- package/map-container.js +4 -4
- package/menu/common.js +7 -7
- package/menu/menu/menu.d.ts.map +1 -1
- package/menu/menu-button.js +8 -8
- package/menu/menu-link.js +6 -6
- package/menu/menu.js +64 -42
- package/navigation/navigation/navigation.d.ts.map +1 -1
- package/navigation/navigation-button.js +4 -4
- package/navigation/navigation-link.js +7 -7
- package/navigation/navigation-list.js +4 -4
- package/navigation/navigation-marker.js +3 -3
- package/navigation/navigation.js +21 -20
- package/notification.js +17 -17
- package/option/optgroup.js +11 -11
- package/option/option/option-base-element.d.ts +3 -2
- package/option/option/option-base-element.d.ts.map +1 -1
- package/option/option.js +113 -101
- package/overlay/overlay-base-element.d.ts.map +1 -1
- package/overlay/overlay.d.ts.map +1 -1
- package/overlay.js +87 -84
- package/package.json +1 -1
- package/paginator/common.js +6 -6
- package/popover/popover/popover.d.ts.map +1 -1
- package/popover/popover.js +73 -73
- package/radio-button/radio-button-panel.js +5 -5
- package/screen-reader-only.js +5 -5
- package/select/select.d.ts +11 -0
- package/select/select.d.ts.map +1 -1
- package/select.js +111 -83
- package/slider.js +8 -8
- package/standard-theme.css +18 -2
- package/status.js +3 -3
- package/stepper/step-label.js +4 -4
- package/table/table-wrapper.js +4 -4
- package/tabs/tab-group.js +24 -24
- package/tabs/tab.js +3 -3
- package/tag/tag-group.js +7 -7
- package/teaser-product/common.js +5 -5
- package/teaser-product/teaser-product-static.js +2 -2
- package/timetable-occupancy-icon.js +3 -3
- package/timetable-occupancy.js +6 -6
- package/toast/toast.d.ts.map +1 -1
- package/toast.js +58 -54
- package/toggle/toggle-option.js +11 -11
- package/toggle-check.js +5 -5
- package/train/train.js +28 -28
package/popover/popover.js
CHANGED
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
var
|
|
1
|
+
var W = (s) => {
|
|
2
2
|
throw TypeError(s);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var p = (s, i, r) => (
|
|
6
|
-
import { __runInitializers as l, __esDecorate as
|
|
7
|
-
import { css as
|
|
8
|
-
import { customElement as
|
|
9
|
-
import { ref as
|
|
10
|
-
import { SbbFocusHandler as
|
|
11
|
-
import { SbbOpenCloseBaseElement as
|
|
12
|
-
import { SbbMediaQueryPointerCoarse as
|
|
13
|
-
import { forceType as
|
|
14
|
-
import { isZeroAnimationDuration as
|
|
15
|
-
import { EventEmitter as
|
|
16
|
-
import { i18nClosePopover as
|
|
17
|
-
import { SbbHydrationMixin as
|
|
18
|
-
import { isEventOnElement as
|
|
4
|
+
var j = (s, i, r) => i.has(s) || W("Cannot " + r);
|
|
5
|
+
var p = (s, i, r) => (j(s, i, "read from private field"), r ? r.call(s) : i.get(s)), h = (s, i, r) => i.has(s) ? W("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, r), n = (s, i, r, b) => (j(s, i, "write to private field"), b ? b.call(s, r) : i.set(s, r), r);
|
|
6
|
+
import { __runInitializers as l, __esDecorate as c } from "tslib";
|
|
7
|
+
import { css as G, isServer as X, html as K, nothing as J } from "lit";
|
|
8
|
+
import { customElement as ee, property as y } from "lit/decorators.js";
|
|
9
|
+
import { ref as te } from "lit/directives/ref.js";
|
|
10
|
+
import { SbbFocusHandler as oe, IS_FOCUSABLE_QUERY as se, setModalityOnNextFocus as E, getFirstFocusableElement as ie } from "../core/a11y.js";
|
|
11
|
+
import { SbbOpenCloseBaseElement as re } from "../core/base-elements.js";
|
|
12
|
+
import { SbbMediaQueryPointerCoarse as ae, SbbLanguageController as ne } from "../core/controllers.js";
|
|
13
|
+
import { hostAttributes as le, forceType as w } from "../core/decorators.js";
|
|
14
|
+
import { isZeroAnimationDuration as be, findReferencedElement as pe } from "../core/dom.js";
|
|
15
|
+
import { EventEmitter as Q, composedPathHasAttribute as he } from "../core/eventing.js";
|
|
16
|
+
import { i18nClosePopover as ce } from "../core/i18n.js";
|
|
17
|
+
import { SbbHydrationMixin as de } from "../core/mixins.js";
|
|
18
|
+
import { isEventOnElement as V, removeAriaOverlayTriggerAttributes as ve, setAriaOverlayTriggerAttributes as ue, getElementPosition as ge } from "../core/overlay.js";
|
|
19
19
|
import "../button/secondary-button.js";
|
|
20
|
-
const
|
|
21
|
-
let
|
|
22
|
-
const
|
|
23
|
-
let
|
|
24
|
-
var d, v, u, g, _,
|
|
25
|
-
let s = [
|
|
26
|
-
var
|
|
20
|
+
const _e = G`*,:before,:after{box-sizing:border-box}:host{--sbb-popover-position: absolute;--sbb-popover-position-x: 0;--sbb-popover-position-y: 0;--sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);--sbb-popover-arrow-position-x: 0;--sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));--sbb-popover-inset: 0 auto auto 0;--sbb-popover-border-radius: var(--sbb-border-radius-8x);--sbb-popover-padding: var(--sbb-spacing-fixed-4x);--sbb-popover-background: var(--sbb-color-white);--sbb-popover-color: var(--sbb-color-charcoal);--sbb-popover-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-popover-animation-easing: ease-out;--sbb-popover-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:none}:host([data-state]:not([data-state=closed])){display:block;--sbb-popover-inset: 0}:host([data-position=above]){--sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}.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);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));color:var(--sbb-popover-color)}.sbb-popover{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-elevation-level-5-hard-2-color),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-elevation-level-5-hard-1-color);display:none;position:var(--sbb-popover-position);pointer-events:all;top:var(--sbb-popover-position-y);bottom:unset;left:var(--sbb-popover-position-x);right:unset;border:none;border-radius:var(--sbb-popover-border-radius);padding:0;max-width:var(--sbb-popover-max-width);width:max-content;background-color:var(--sbb-popover-background);outline:none}.sbb-popover:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}:host([data-state]:not([data-state=closed])) .sbb-popover{display:block;animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}:host([data-state][data-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-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-elevation-level-5-hard-2-color),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-elevation-level-5-hard-1-color)}@media (forced-colors: active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host([data-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;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:transparent}:host([data-position=below]) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host([data-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:var(--sbb-popover-padding);outline:none;background-color:var(--sbb-popover-background);overflow:hidden;flex-direction:row-reverse}:host([data-position=above]) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@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)}}`, fe = 16, me = 32;
|
|
21
|
+
let ye = 0;
|
|
22
|
+
const T = /* @__PURE__ */ new Set(), we = X ? !1 : matchMedia(ae).matches;
|
|
23
|
+
let He = (() => {
|
|
24
|
+
var d, v, u, g, _, f, a;
|
|
25
|
+
let s = [ee("sbb-popover"), le({ popover: "manual" })], i, r = [], b, k = de(re), L, D = [], S = [], P, z = [], O = [], A, B = [], F = [], M, I = [], H = [], R, $ = [], N = [], U, Y = [], Z = [];
|
|
26
|
+
var C = (a = class extends k {
|
|
27
27
|
constructor() {
|
|
28
28
|
super(...arguments);
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
n(this, d, l(this,
|
|
36
|
-
this._isPointerDownEventOnPopover =
|
|
29
|
+
h(this, d);
|
|
30
|
+
h(this, v);
|
|
31
|
+
h(this, u);
|
|
32
|
+
h(this, g);
|
|
33
|
+
h(this, _);
|
|
34
|
+
h(this, f);
|
|
35
|
+
n(this, d, l(this, D, null)), n(this, v, (l(this, S), l(this, z, !1))), n(this, u, (l(this, O), l(this, B, !1))), n(this, g, (l(this, F), l(this, I, 0))), n(this, _, (l(this, H), l(this, $, 0))), n(this, f, (l(this, N), l(this, Y, ""))), this.willClose = (l(this, Z), new Q(this, C.events.willClose, { cancelable: !0 })), this.didClose = new Q(this, C.events.didClose, { cancelable: !0 }), this._skipCloseFocus = !1, this._focusHandler = new oe(), this._hoverTrigger = !1, this._language = new ne(this), this._pointerDownListener = (e) => {
|
|
36
|
+
this._isPointerDownEventOnPopover = V(this._overlay, e);
|
|
37
37
|
}, this._closeOnBackdropClick = (e) => {
|
|
38
|
-
!this._isPointerDownEventOnPopover && !
|
|
38
|
+
!this._isPointerDownEventOnPopover && !V(this._overlay, e) && (this._nextFocusedElement = e.composedPath().filter((t) => t instanceof window.HTMLElement).find((t) => t.matches(se)), clearTimeout(this._closeTimeout), this.close());
|
|
39
39
|
}, this._onTriggerMouseEnter = () => {
|
|
40
40
|
this.state === "closed" || this.state === "closing" ? this._openTimeout = setTimeout(() => this.open(), this.openDelay) : clearTimeout(this._closeTimeout);
|
|
41
41
|
}, this._onTriggerMouseLeave = () => {
|
|
@@ -86,20 +86,20 @@ let Me = (() => {
|
|
|
86
86
|
}
|
|
87
87
|
/** This will be forwarded as aria-label to the close button element. */
|
|
88
88
|
get accessibilityCloseLabel() {
|
|
89
|
-
return p(this,
|
|
89
|
+
return p(this, f);
|
|
90
90
|
}
|
|
91
91
|
set accessibilityCloseLabel(e) {
|
|
92
|
-
n(this,
|
|
92
|
+
n(this, f, e);
|
|
93
93
|
}
|
|
94
94
|
/** Opens the popover on trigger click. */
|
|
95
95
|
open() {
|
|
96
|
-
var e;
|
|
96
|
+
var e, t;
|
|
97
97
|
if (!(this.state !== "closed" && this.state !== "closing" || !this._overlay) && this.willOpen.emit()) {
|
|
98
|
-
for (const
|
|
99
|
-
const
|
|
100
|
-
|
|
98
|
+
for (const o of Array.from(T)) {
|
|
99
|
+
const m = o.getAttribute("data-state");
|
|
100
|
+
m && (m === "opened" || m === "opening") && o.close();
|
|
101
101
|
}
|
|
102
|
-
this.state = "opening", this.inert = !0, this._setPopoverPosition(), (
|
|
102
|
+
(e = this.showPopover) == null || e.call(this), this.state = "opening", this.inert = !0, this._setPopoverPosition(), (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "true"), this._nextFocusedElement = void 0, this._skipCloseFocus = !1, this._isZeroAnimationDuration() && this._handleOpening();
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
/** Closes the popover. */
|
|
@@ -108,15 +108,15 @@ let Me = (() => {
|
|
|
108
108
|
this.state !== "opened" && this.state !== "opening" || (this._popoverCloseElement = e, this.willClose.emit({ closeTarget: e }) && (this.state = "closing", this.inert = !0, (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing()));
|
|
109
109
|
}
|
|
110
110
|
_isZeroAnimationDuration() {
|
|
111
|
-
return
|
|
111
|
+
return be(this, "--sbb-popover-animation-duration");
|
|
112
112
|
}
|
|
113
113
|
_handleClosing() {
|
|
114
|
-
var e, t, o,
|
|
115
|
-
if (this.state = "closed", (
|
|
116
|
-
const
|
|
117
|
-
x
|
|
114
|
+
var e, t, o, m, q;
|
|
115
|
+
if (this.state = "closed", (e = this.hidePopover) == null || e.call(this), (o = (t = this._overlay) == null ? void 0 : t.firstElementChild) == null || o.scrollTo(0, 0), (m = this._overlay) == null || m.removeAttribute("tabindex"), !this._skipCloseFocus) {
|
|
116
|
+
const x = this._nextFocusedElement || this._triggerElement;
|
|
117
|
+
E(x), x == null || x.focus();
|
|
118
118
|
}
|
|
119
|
-
this.didClose.emit({ closeTarget: this._popoverCloseElement }), (
|
|
119
|
+
this.didClose.emit({ closeTarget: this._popoverCloseElement }), (q = this._openStateController) == null || q.abort(), this._focusHandler.disconnect();
|
|
120
120
|
}
|
|
121
121
|
_handleOpening() {
|
|
122
122
|
this.state = "opened", this.inert = !1, this._attachWindowEvents(), this._setPopoverFocus(), this._focusHandler.trap(this, {
|
|
@@ -131,7 +131,7 @@ let Me = (() => {
|
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
133
|
connectedCallback() {
|
|
134
|
-
super.connectedCallback(), this.id || (this.id = this.id || `sbb-popover-${++
|
|
134
|
+
super.connectedCallback(), this.id || (this.id = this.id || `sbb-popover-${++ye}`), this._configure(), this.state = "closed", T.add(this);
|
|
135
135
|
}
|
|
136
136
|
willUpdate(e) {
|
|
137
137
|
var t, o;
|
|
@@ -142,20 +142,20 @@ let Me = (() => {
|
|
|
142
142
|
}
|
|
143
143
|
disconnectedCallback() {
|
|
144
144
|
var e, t;
|
|
145
|
-
super.disconnectedCallback(), (e = this._popoverController) == null || e.abort(), (t = this._openStateController) == null || t.abort(), this._focusHandler.disconnect(),
|
|
145
|
+
super.disconnectedCallback(), (e = this._popoverController) == null || e.abort(), (t = this._openStateController) == null || t.abort(), this._focusHandler.disconnect(), T.delete(this);
|
|
146
146
|
}
|
|
147
147
|
// Check if the trigger is valid and attach click event listeners.
|
|
148
148
|
_configure() {
|
|
149
149
|
var t;
|
|
150
|
-
if (
|
|
150
|
+
if (X)
|
|
151
151
|
return;
|
|
152
152
|
if (this.hydrationRequired) {
|
|
153
153
|
this.hydrationComplete.then(() => this._configure());
|
|
154
154
|
return;
|
|
155
155
|
}
|
|
156
|
-
if (
|
|
156
|
+
if (ve(this._triggerElement), !this.trigger || (this._triggerElement = pe(this.trigger), !this._triggerElement))
|
|
157
157
|
return;
|
|
158
|
-
|
|
158
|
+
ue(this._triggerElement, "dialog", this.id, this.state), this._hoverTrigger = this.hoverTrigger && !we, (t = this._popoverController) == null || t.abort();
|
|
159
159
|
const { signal: e } = this._popoverController = new AbortController();
|
|
160
160
|
this._hoverTrigger ? (this._triggerElement.addEventListener("mouseenter", this._onTriggerMouseEnter, { signal: e }), this._triggerElement.addEventListener("mouseleave", this._onTriggerMouseLeave, { signal: e }), this._triggerElement.addEventListener("keydown", (o) => {
|
|
161
161
|
(o.code === "Space" || o.code === "Enter") && this.open();
|
|
@@ -183,7 +183,7 @@ let Me = (() => {
|
|
|
183
183
|
}
|
|
184
184
|
// Close the popover on click of any element that has the 'sbb-popover-close' attribute.
|
|
185
185
|
_closeOnSbbPopoverCloseClick(e) {
|
|
186
|
-
const t =
|
|
186
|
+
const t = he(e, "sbb-popover-close", this);
|
|
187
187
|
t && !t.hasAttribute("disabled") && (clearTimeout(this._closeTimeout), this.close(t));
|
|
188
188
|
}
|
|
189
189
|
// Set popover position (x, y) to '0' once the popover is closed and the transition ended to prevent the
|
|
@@ -195,8 +195,8 @@ let Me = (() => {
|
|
|
195
195
|
}
|
|
196
196
|
// Set focus on the first focusable element.
|
|
197
197
|
_setPopoverFocus() {
|
|
198
|
-
const e = this.shadowRoot.querySelector("[sbb-popover-close]") ||
|
|
199
|
-
e ? (
|
|
198
|
+
const e = this.shadowRoot.querySelector("[sbb-popover-close]") || ie(Array.from(this.children).filter((t) => t instanceof window.HTMLElement));
|
|
199
|
+
e ? (E(e), e.focus()) : (this._overlay.setAttribute("tabindex", "0"), E(this._overlay), this._overlay.focus(), this._overlay.addEventListener("blur", () => {
|
|
200
200
|
setTimeout(() => {
|
|
201
201
|
var t;
|
|
202
202
|
document.visibilityState !== "hidden" && ((t = this._overlay) == null || t.removeAttribute("tabindex"), (this.state === "opened" || this.state === "opening") && (this._skipCloseFocus = !0), this.close());
|
|
@@ -208,9 +208,9 @@ let Me = (() => {
|
|
|
208
208
|
_setPopoverPosition() {
|
|
209
209
|
if (!this._overlay || !this._triggerElement)
|
|
210
210
|
return;
|
|
211
|
-
const e =
|
|
212
|
-
verticalOffset:
|
|
213
|
-
horizontalOffset:
|
|
211
|
+
const e = ge(this._overlay, this._triggerElement, this.shadowRoot.querySelector(".sbb-popover__container"), {
|
|
212
|
+
verticalOffset: fe,
|
|
213
|
+
horizontalOffset: me,
|
|
214
214
|
centered: !0,
|
|
215
215
|
responsiveHeight: !0
|
|
216
216
|
});
|
|
@@ -219,10 +219,10 @@ let Me = (() => {
|
|
|
219
219
|
this.style.setProperty("--sbb-popover-position-x", `${e.left}px`), this.style.setProperty("--sbb-popover-position-y", `${e.top}px`), this.style.setProperty("--sbb-popover-arrow-position-x", `${t}px`);
|
|
220
220
|
}
|
|
221
221
|
render() {
|
|
222
|
-
const e =
|
|
222
|
+
const e = K`
|
|
223
223
|
<span class="sbb-popover__close">
|
|
224
224
|
<sbb-secondary-button
|
|
225
|
-
aria-label=${this.accessibilityCloseLabel ||
|
|
225
|
+
aria-label=${this.accessibilityCloseLabel || ce[this._language.current]}
|
|
226
226
|
size="s"
|
|
227
227
|
type="button"
|
|
228
228
|
icon-name="cross-small"
|
|
@@ -230,19 +230,19 @@ let Me = (() => {
|
|
|
230
230
|
></sbb-secondary-button>
|
|
231
231
|
</span>
|
|
232
232
|
`;
|
|
233
|
-
return
|
|
233
|
+
return K`
|
|
234
234
|
<div class="sbb-popover__container">
|
|
235
235
|
<div
|
|
236
236
|
@animationend=${this._onPopoverAnimationEnd}
|
|
237
237
|
class="sbb-popover"
|
|
238
238
|
role="tooltip"
|
|
239
|
-
${
|
|
239
|
+
${te((t) => this._overlay = t)}
|
|
240
240
|
>
|
|
241
241
|
<div
|
|
242
242
|
@click=${(t) => this._closeOnSbbPopoverCloseClick(t)}
|
|
243
243
|
class="sbb-popover__content"
|
|
244
244
|
>
|
|
245
|
-
${!this.hideCloseButton && !this._hoverTrigger ? e :
|
|
245
|
+
${!this.hideCloseButton && !this._hoverTrigger ? e : J}
|
|
246
246
|
<span>
|
|
247
247
|
<slot>No content</slot>
|
|
248
248
|
</span>
|
|
@@ -251,24 +251,24 @@ let Me = (() => {
|
|
|
251
251
|
</div>
|
|
252
252
|
`;
|
|
253
253
|
}
|
|
254
|
-
}, d = new WeakMap(), v = new WeakMap(), u = new WeakMap(), g = new WeakMap(), _ = new WeakMap(),
|
|
255
|
-
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
256
|
-
|
|
254
|
+
}, d = new WeakMap(), v = new WeakMap(), u = new WeakMap(), g = new WeakMap(), _ = new WeakMap(), f = new WeakMap(), b = a, (() => {
|
|
255
|
+
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
|
|
256
|
+
L = [y()], P = [w(), y({ attribute: "hide-close-button", type: Boolean })], A = [w(), y({ attribute: "hover-trigger", type: Boolean })], M = [w(), y({ attribute: "open-delay", type: Number })], R = [w(), y({ attribute: "close-delay", type: Number })], U = [w(), y({ attribute: "accessibility-close-label" })], c(a, null, L, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (t) => "trigger" in t, get: (t) => t.trigger, set: (t, o) => {
|
|
257
257
|
t.trigger = o;
|
|
258
|
-
} }, metadata: e },
|
|
258
|
+
} }, metadata: e }, D, S), c(a, null, P, { kind: "accessor", name: "hideCloseButton", static: !1, private: !1, access: { has: (t) => "hideCloseButton" in t, get: (t) => t.hideCloseButton, set: (t, o) => {
|
|
259
259
|
t.hideCloseButton = o;
|
|
260
|
-
} }, metadata: e }, z, O),
|
|
260
|
+
} }, metadata: e }, z, O), c(a, null, A, { kind: "accessor", name: "hoverTrigger", static: !1, private: !1, access: { has: (t) => "hoverTrigger" in t, get: (t) => t.hoverTrigger, set: (t, o) => {
|
|
261
261
|
t.hoverTrigger = o;
|
|
262
|
-
} }, metadata: e },
|
|
262
|
+
} }, metadata: e }, B, F), c(a, null, M, { kind: "accessor", name: "openDelay", static: !1, private: !1, access: { has: (t) => "openDelay" in t, get: (t) => t.openDelay, set: (t, o) => {
|
|
263
263
|
t.openDelay = o;
|
|
264
|
-
} }, metadata: e },
|
|
264
|
+
} }, metadata: e }, I, H), c(a, null, R, { kind: "accessor", name: "closeDelay", static: !1, private: !1, access: { has: (t) => "closeDelay" in t, get: (t) => t.closeDelay, set: (t, o) => {
|
|
265
265
|
t.closeDelay = o;
|
|
266
|
-
} }, metadata: e },
|
|
266
|
+
} }, metadata: e }, $, N), c(a, null, U, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (t) => "accessibilityCloseLabel" in t, get: (t) => t.accessibilityCloseLabel, set: (t, o) => {
|
|
267
267
|
t.accessibilityCloseLabel = o;
|
|
268
|
-
} }, metadata: e },
|
|
269
|
-
})(), a.styles =
|
|
270
|
-
return
|
|
268
|
+
} }, metadata: e }, Y, Z), c(null, i = { value: b }, s, { kind: "class", name: b.name, metadata: e }, null, r), C = b = i.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
|
269
|
+
})(), a.styles = _e, l(b, r), a);
|
|
270
|
+
return C = b;
|
|
271
271
|
})();
|
|
272
272
|
export {
|
|
273
|
-
|
|
273
|
+
He as SbbPopoverElement
|
|
274
274
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
var
|
|
1
|
+
var _ = (t) => {
|
|
2
2
|
throw TypeError(t);
|
|
3
3
|
};
|
|
4
|
-
var g = (t, s, i) => s.has(t) ||
|
|
5
|
-
var y = (t, s, i) => (g(t, s, "read from private field"), i ? i.call(t) : s.get(t)), S = (t, s, i) => s.has(t) ?
|
|
4
|
+
var g = (t, s, i) => s.has(t) || _("Cannot " + i);
|
|
5
|
+
var y = (t, s, i) => (g(t, s, "read from private field"), i ? i.call(t) : s.get(t)), S = (t, s, i) => s.has(t) ? _("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, i), d = (t, s, i, n) => (g(t, s, "write to private field"), n ? n.call(t, i) : s.set(t, i), i);
|
|
6
6
|
import { __runInitializers as b, __esDecorate as x } from "tslib";
|
|
7
7
|
import { LitElement as E, html as z, nothing as v } from "lit";
|
|
8
8
|
import { customElement as C, property as k } from "lit/decorators.js";
|
|
@@ -70,8 +70,8 @@ let N = (() => {
|
|
|
70
70
|
}, o = new WeakMap(), n = l, (() => {
|
|
71
71
|
const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
|
|
72
72
|
u = [k({ reflect: !0 }), R((a, c) => {
|
|
73
|
-
var
|
|
74
|
-
return (
|
|
73
|
+
var f;
|
|
74
|
+
return (f = a.group) != null && f.size ? a.group.size === "xs" ? "s" : a.group.size : c;
|
|
75
75
|
})], x(l, null, u, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, c) => {
|
|
76
76
|
a.size = c;
|
|
77
77
|
} }, metadata: e }, h, p), x(null, s = { value: n }, t, { kind: "class", name: n.name, metadata: e }, null, i), r = n = s.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
|
package/screen-reader-only.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { __esDecorate as
|
|
1
|
+
import { __esDecorate as n, __runInitializers as o } from "tslib";
|
|
2
2
|
import { css as c, html as m, LitElement as d } from "lit";
|
|
3
3
|
import { customElement as u } from "lit/decorators.js";
|
|
4
4
|
const p = c`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
|
|
5
|
-
let
|
|
5
|
+
let y = (() => {
|
|
6
6
|
var t;
|
|
7
7
|
let i = [u("sbb-screen-reader-only")], l, r = [], e, s = d;
|
|
8
8
|
return t = class extends s {
|
|
@@ -11,9 +11,9 @@ let _ = (() => {
|
|
|
11
11
|
}
|
|
12
12
|
}, e = t, (() => {
|
|
13
13
|
const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
|
|
14
|
-
|
|
15
|
-
})(), t.styles = p,
|
|
14
|
+
n(null, l = { value: e }, i, { kind: "class", name: e.name, metadata: a }, null, r), e = l.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
|
|
15
|
+
})(), t.styles = p, o(e, r), e;
|
|
16
16
|
})();
|
|
17
17
|
export {
|
|
18
|
-
|
|
18
|
+
y as SbbScreenReaderOnlyElement
|
|
19
19
|
};
|
package/select/select.d.ts
CHANGED
|
@@ -36,6 +36,7 @@ export declare class SbbSelectElement extends SbbSelectElement_base {
|
|
|
36
36
|
accessor placeholder: string;
|
|
37
37
|
/** Whether the select allows for multiple selection. */
|
|
38
38
|
accessor multiple: boolean;
|
|
39
|
+
accessor disabled: boolean;
|
|
39
40
|
/** Whether the select is readonly. */
|
|
40
41
|
accessor readonly: boolean;
|
|
41
42
|
/**
|
|
@@ -84,6 +85,16 @@ export declare class SbbSelectElement extends SbbSelectElement_base {
|
|
|
84
85
|
/** Listens to option changes. */
|
|
85
86
|
private _onOptionLabelChanged;
|
|
86
87
|
private _updateDisplayValue;
|
|
88
|
+
/**
|
|
89
|
+
* The `value` property should be adapted when the `multiple` property changes:
|
|
90
|
+
* - if it changes to true, the 'value' is set to an array;
|
|
91
|
+
* - if it changes to false, the first available option is set as 'value' otherwise it's set to null.
|
|
92
|
+
*/
|
|
93
|
+
private _onMultipleChanged;
|
|
94
|
+
/**
|
|
95
|
+
* If the `disabled` or the `readonly` properties are set, and the panel is open, close it.
|
|
96
|
+
*/
|
|
97
|
+
private _closeOnDisabledReadonlyChanged;
|
|
87
98
|
/** Sets the _displayValue by checking the internal sbb-options and setting the correct `selected` value on them. */
|
|
88
99
|
private _onValueChanged;
|
|
89
100
|
protected firstUpdated(changedProperties: PropertyValues<this>): void;
|
package/select/select.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/elements/select/select.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAO1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/elements/select/select.ts"],"names":[],"mappings":"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"}
|