@sbb-esta/lyne-elements 1.5.0 → 1.6.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/alert/alert/alert.d.ts +22 -16
- package/alert/alert/alert.d.ts.map +1 -1
- package/alert/alert-group/alert-group.d.ts +1 -1
- package/alert/alert-group/alert-group.d.ts.map +1 -1
- package/alert/alert-group.js +31 -26
- package/alert/alert.js +45 -37
- package/clock/clock.d.ts.map +1 -1
- package/clock.js +14 -14
- package/core/testing/wait-for-event.d.ts +2 -0
- package/core/testing/wait-for-event.d.ts.map +1 -0
- package/core/testing.d.ts +1 -0
- package/core/testing.d.ts.map +1 -1
- package/core/testing.js +49 -36
- package/custom-elements.json +211 -51
- package/development/alert/alert/alert.d.ts +22 -16
- package/development/alert/alert/alert.d.ts.map +1 -1
- package/development/alert/alert-group/alert-group.d.ts +1 -1
- package/development/alert/alert-group/alert-group.d.ts.map +1 -1
- package/development/alert/alert-group.js +16 -11
- package/development/alert/alert.js +65 -24
- package/development/clock/clock.d.ts.map +1 -1
- package/development/clock.js +3 -2
- package/development/core/testing/wait-for-event.d.ts +2 -0
- package/development/core/testing/wait-for-event.d.ts.map +1 -0
- package/development/core/testing.d.ts +1 -0
- package/development/core/testing.d.ts.map +1 -1
- package/development/core/testing.js +17 -1
- package/development/icon/icon.d.ts +9 -1
- package/development/icon/icon.d.ts.map +1 -1
- package/development/icon.js +16 -2
- package/development/menu/menu/menu.d.ts.map +1 -1
- package/development/menu/menu.js +2 -1
- package/development/navigation/navigation/navigation.d.ts.map +1 -1
- package/development/navigation/navigation.js +2 -1
- package/development/notification/notification.d.ts +4 -4
- package/development/notification.js +1 -1
- package/development/overlay/overlay-base-element.d.ts.map +1 -1
- package/development/overlay.js +35 -17
- package/development/toggle/toggle.js +1 -1
- package/icon/icon.d.ts +9 -1
- package/icon/icon.d.ts.map +1 -1
- package/icon.js +71 -62
- package/menu/menu/menu.d.ts.map +1 -1
- package/menu/menu.js +3 -3
- package/navigation/navigation/navigation.d.ts.map +1 -1
- package/navigation/navigation.js +4 -4
- package/notification/notification.d.ts +4 -4
- package/overlay/overlay-base-element.d.ts.map +1 -1
- package/overlay.js +33 -33
- package/package.json +1 -1
- package/toggle/toggle.js +1 -1
package/overlay.js
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { css as g, nothing as
|
|
2
|
-
import { property as b, customElement as
|
|
1
|
+
import { css as g, nothing as _ } from "lit";
|
|
2
|
+
import { property as b, customElement as w } from "lit/decorators.js";
|
|
3
3
|
import { html as d, unsafeStatic as v } from "lit/static-html.js";
|
|
4
4
|
import { SbbFocusHandler as k, setModalityOnNextFocus as h, getFirstFocusableElement as C } from "./core/a11y.js";
|
|
5
5
|
import { EventEmitter as p } from "./core/eventing.js";
|
|
6
6
|
import { i18nDialog as x, i18nCloseDialog as O, i18nGoBack as E } from "./core/i18n.js";
|
|
7
|
-
import { applyInertMechanism as
|
|
7
|
+
import { applyInertMechanism as m, removeInertMechanism as y } from "./core/overlay.js";
|
|
8
8
|
import { SbbOpenCloseBaseElement as L } from "./core/base-elements.js";
|
|
9
9
|
import { SbbLanguageController as $ } from "./core/controllers.js";
|
|
10
|
-
import { SbbScrollHandler as A, hostContext as
|
|
11
|
-
import { SbbNegativeMixin as
|
|
10
|
+
import { SbbScrollHandler as A, hostContext as S } from "./core/dom.js";
|
|
11
|
+
import { SbbNegativeMixin as R } from "./core/mixins.js";
|
|
12
12
|
import "./button/secondary-button.js";
|
|
13
13
|
import "./button/transparent-button.js";
|
|
14
14
|
import "./container.js";
|
|
15
15
|
import "./screen-reader-only.js";
|
|
16
|
-
var B = Object.defineProperty, F = (t, e, o,
|
|
17
|
-
for (var
|
|
18
|
-
(
|
|
19
|
-
return
|
|
16
|
+
var B = Object.defineProperty, F = (t, e, o, r) => {
|
|
17
|
+
for (var a = void 0, n = t.length - 1, i; n >= 0; n--)
|
|
18
|
+
(i = t[n]) && (a = i(e, o, a) || a);
|
|
19
|
+
return a && B(e, o, a), a;
|
|
20
20
|
};
|
|
21
|
-
const l = [], u = class f extends
|
|
21
|
+
const l = [], u = class f extends R(L) {
|
|
22
22
|
constructor() {
|
|
23
23
|
super(...arguments), this.didClose = new p(
|
|
24
24
|
this,
|
|
@@ -30,22 +30,22 @@ const l = [], u = class f extends S(L) {
|
|
|
30
30
|
if (this.state !== "opened")
|
|
31
31
|
return;
|
|
32
32
|
this.returnValue = e, this.overlayCloseElement = o;
|
|
33
|
-
const
|
|
33
|
+
const r = {
|
|
34
34
|
returnValue: this.returnValue,
|
|
35
35
|
closeTarget: this.overlayCloseElement
|
|
36
36
|
};
|
|
37
|
-
this.willClose.emit(
|
|
37
|
+
this.willClose.emit(r) && (this.state = "closing", this.removeAriaLiveRefContent());
|
|
38
38
|
}
|
|
39
39
|
connectedCallback() {
|
|
40
40
|
var e;
|
|
41
|
-
super.connectedCallback(), (e = this.overlayController) == null || e.abort(), this.overlayController = new AbortController(), this.state === "opened" &&
|
|
41
|
+
super.connectedCallback(), (e = this.overlayController) == null || e.abort(), this.overlayController = new AbortController(), this.state === "opened" && m(this);
|
|
42
42
|
}
|
|
43
43
|
firstUpdated(e) {
|
|
44
44
|
this.ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), super.firstUpdated(e);
|
|
45
45
|
}
|
|
46
46
|
disconnectedCallback() {
|
|
47
47
|
var e, o;
|
|
48
|
-
super.disconnectedCallback(), (e = this.overlayController) == null || e.abort(), (o = this.openOverlayController) == null || o.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(),
|
|
48
|
+
super.disconnectedCallback(), (e = this.overlayController) == null || e.abort(), (o = this.openOverlayController) == null || o.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), y(), this.scrollHandler.enableScroll();
|
|
49
49
|
}
|
|
50
50
|
attachOpenOverlayEvents() {
|
|
51
51
|
this.openOverlayController = new AbortController(), window.addEventListener(
|
|
@@ -71,13 +71,13 @@ const l = [], u = class f extends S(L) {
|
|
|
71
71
|
}
|
|
72
72
|
// Close the component on click of any element that has the `closeAttribute` attribute.
|
|
73
73
|
closeOnSbbOverlayCloseClick(e) {
|
|
74
|
-
const o = e.composedPath().filter((
|
|
75
|
-
(
|
|
74
|
+
const o = e.composedPath().filter((a) => a instanceof window.HTMLElement).find(
|
|
75
|
+
(a) => a.hasAttribute(this.closeAttribute) && !a.hasAttribute("disabled")
|
|
76
76
|
);
|
|
77
77
|
if (!o)
|
|
78
78
|
return;
|
|
79
|
-
const
|
|
80
|
-
l[l.length - 1].close(
|
|
79
|
+
const r = o.getAttribute("type") === "submit" ? S("form", o) : void 0;
|
|
80
|
+
l[l.length - 1].close(r, o);
|
|
81
81
|
}
|
|
82
82
|
removeAriaLiveRefContent() {
|
|
83
83
|
this.ariaLiveRef.textContent = "";
|
|
@@ -90,11 +90,11 @@ F([
|
|
|
90
90
|
b({ attribute: "accessibility-label" })
|
|
91
91
|
], u.prototype, "accessibilityLabel");
|
|
92
92
|
let H = u;
|
|
93
|
-
const T = g`*,:before,:after{box-sizing:border-box}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-overlay-background-color: var(--sbb-color-milk);--sbb-overlay-height: 100%;--sbb-overlay-inset: 0 auto auto 0;--sbb-overlay-padding-block: calc( var(--sbb-spacing-responsive-xxl) + var(--sbb-spacing-responsive-l) );--sbb-overlay-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-overlay-animation-easing: ease;--sbb-overlay-pointer-events: none
|
|
94
|
-
var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, c = (t, e, o,
|
|
95
|
-
for (var
|
|
96
|
-
(
|
|
97
|
-
return
|
|
93
|
+
const T = g`*,:before,:after{box-sizing:border-box}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-overlay-background-color: var(--sbb-color-milk);--sbb-overlay-height: 100%;--sbb-overlay-inset: 0 auto auto 0;--sbb-overlay-padding-block: calc( var(--sbb-spacing-responsive-xxl) + var(--sbb-spacing-responsive-l) );--sbb-overlay-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-overlay-animation-easing: ease;--sbb-overlay-pointer-events: none;display:block;position:fixed;inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index))}@media (min-width: 64rem){:host{--sbb-overlay-padding-block: var(--sbb-spacing-responsive-xl)}}:host(:is([data-state=opened],[data-state=opening])){--sbb-overlay-pointer-events: all}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-overlay-color: var(--sbb-color-white);--sbb-overlay-background-color: var(--sbb-color-midnight)}:host(:not([data-state=closed])){--sbb-overlay-inset: 0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:none;align-items:center;position:fixed;inset:var(--sbb-overlay-inset)}:host([data-state]:not([data-state=closed])) .sbb-overlay__container{display:flex;animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host([data-state][data-state=closing]) .sbb-overlay__container{pointer-events:none;animation-name:close}.sbb-overlay{position:absolute;inset-inline:0;margin:auto;padding:0;border:none;height:var(--sbb-overlay-height);overflow:auto;color:var(--sbb-overlay-color)}:host([data-state]:not([data-state=closed])) .sbb-overlay{animation-name:open-move-in;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host([data-state][data-state=closing]) .sbb-overlay{animation-name:close-move-out}.sbb-overlay__wrapper{display:flex;flex-direction:column;width:100%;height:var(--sbb-overlay-height);outline:none;position:fixed}@media (min-width: 52.5rem){.sbb-overlay__wrapper{position:sticky;inset-block-start:0;height:auto}}.sbb-overlay__header{position:absolute;inset-inline-start:0;display:flex;pointer-events:none;align-items:start;justify-content:space-between;width:100%;padding:var(--sbb-spacing-responsive-xs);padding-block-end:0;z-index:1}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}.sbb-overlay__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__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-overlay__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-overlay__content::-webkit-scrollbar-button,.sbb-overlay__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-overlay__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-overlay__content-container{padding-block:var(--sbb-overlay-padding-block)}@keyframes open{0%{opacity:0}to{opacity:1}}@keyframes open-move-in{0%{transform:translateY(var(--sbb-spacing-fixed-4x))}to{transform:translateY(0)}}@keyframes close{0%{opacity:1}to{opacity:0}}@keyframes close-move-out{0%{transform:translateY(0)}to{transform:translateY(var(--sbb-spacing-fixed-4x))}}`;
|
|
94
|
+
var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, c = (t, e, o, r) => {
|
|
95
|
+
for (var a = r > 1 ? void 0 : r ? M(e, o) : e, n = t.length - 1, i; n >= 0; n--)
|
|
96
|
+
(i = t[n]) && (a = (r ? i(e, o, a) : i(a)) || a);
|
|
97
|
+
return r && a && z(e, o, a), a;
|
|
98
98
|
};
|
|
99
99
|
let s = class extends H {
|
|
100
100
|
constructor() {
|
|
@@ -114,8 +114,8 @@ let s = class extends H {
|
|
|
114
114
|
// In rare cases, it can be that the animationEnd event is triggered twice.
|
|
115
115
|
// To avoid entering a corrupt state, exit when state is not expected.
|
|
116
116
|
onOverlayAnimationEnd(t) {
|
|
117
|
-
var e, o,
|
|
118
|
-
t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(),
|
|
117
|
+
var e, o, r;
|
|
118
|
+
t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), m(this), this.attachOpenOverlayEvents(), this.setOverlayFocus(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusHandler.trap(this)) : t.animationName === "close" && this.state === "closing" && ((e = this._overlayContentElement) == null || e.scrollTo(0, 0), this.state = "closed", y(), h(this.lastFocusedElement), (o = this.lastFocusedElement) == null || o.focus(), (r = this.openOverlayController) == null || r.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), !l.length && this.scrollHandler.enableScroll(), this.didClose.emit({
|
|
119
119
|
returnValue: this.returnValue,
|
|
120
120
|
closeTarget: this.overlayCloseElement
|
|
121
121
|
}));
|
|
@@ -152,17 +152,17 @@ let s = class extends H {
|
|
|
152
152
|
></${v(t)}>
|
|
153
153
|
`;
|
|
154
154
|
return d`
|
|
155
|
-
<div
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
>
|
|
155
|
+
<div
|
|
156
|
+
class="sbb-overlay__container"
|
|
157
|
+
@animationend=${(r) => this.onOverlayAnimationEnd(r)}
|
|
158
|
+
>
|
|
159
|
+
<div class="sbb-overlay">
|
|
160
160
|
<div
|
|
161
|
-
@click=${(
|
|
161
|
+
@click=${(r) => this.closeOnSbbOverlayCloseClick(r)}
|
|
162
162
|
class="sbb-overlay__wrapper"
|
|
163
163
|
>
|
|
164
164
|
<div class="sbb-overlay__header">
|
|
165
|
-
${this.backButton ? o :
|
|
165
|
+
${this.backButton ? o : _} ${e}
|
|
166
166
|
</div>
|
|
167
167
|
<div class="sbb-overlay__content">
|
|
168
168
|
<sbb-container
|
|
@@ -201,7 +201,7 @@ c([
|
|
|
201
201
|
b({ attribute: "accessibility-back-label" })
|
|
202
202
|
], s.prototype, "accessibilityBackLabel", 2);
|
|
203
203
|
s = c([
|
|
204
|
-
|
|
204
|
+
w("sbb-overlay")
|
|
205
205
|
], s);
|
|
206
206
|
export {
|
|
207
207
|
H as SbbOverlayBaseElement,
|
package/package.json
CHANGED
package/toggle/toggle.js
CHANGED
|
@@ -5,7 +5,7 @@ import { SbbConnectedAbortController as x } from "../core/controllers.js";
|
|
|
5
5
|
import { hostAttributes as k } from "../core/decorators.js";
|
|
6
6
|
import { EventEmitter as p } from "../core/eventing.js";
|
|
7
7
|
import { AgnosticResizeObserver as C } from "../core/observers.js";
|
|
8
|
-
const z = u`*,:before,:after{box-sizing:border-box}:host{--sbb-toggle-width: fit-content;--sbb-toggle-min-width: calc( var(--sbb-toggle-padding-inline) * 2 + var(--sbb-size-icon-ui-small) );--sbb-toggle-selected-option-border-color: var(--sbb-color-smoke);--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-toggle-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-toggle-height: 1.75rem;--sbb-toggle-border-width: var(--sbb-border-width-1x);--sbb-toggle-border-style: solid;--sbb-toggle-border-radius: var(--sbb-border-radius-infinity);display:block}@media (min-width: 52.5rem){:host{--sbb-toggle-height: 2rem}}@media (forced-colors: active){:host{--sbb-toggle-selected-option-border-color: Highlight;--sbb-toggle-border-width: var(--sbb-border-width-2x)}}:host([even]){--sbb-toggle-width: 100%}:host([even]) ::slotted(sbb-toggle-option){width:50%}:host([disabled]){--sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);--sbb-toggle-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-toggle-border-style: solid;--sbb-toggle-selected-option-border-color: GrayText}}:host([size=m]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-
|
|
8
|
+
const z = u`*,:before,:after{box-sizing:border-box}:host{--sbb-toggle-width: fit-content;--sbb-toggle-min-width: calc( var(--sbb-toggle-padding-inline) * 2 + var(--sbb-size-icon-ui-small) );--sbb-toggle-selected-option-border-color: var(--sbb-color-smoke);--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-toggle-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-toggle-height: 1.75rem;--sbb-toggle-border-width: var(--sbb-border-width-1x);--sbb-toggle-border-style: solid;--sbb-toggle-border-radius: var(--sbb-border-radius-infinity);display:block}@media (min-width: 52.5rem){:host{--sbb-toggle-height: 2rem}}@media (forced-colors: active){:host{--sbb-toggle-selected-option-border-color: Highlight;--sbb-toggle-border-width: var(--sbb-border-width-2x)}}:host([even]){--sbb-toggle-width: 100%}:host([even]) ::slotted(sbb-toggle-option){width:50%}:host([disabled]){--sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);--sbb-toggle-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-toggle-border-style: solid;--sbb-toggle-selected-option-border-color: GrayText}}:host([size=m]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toggle-height: 2.75rem}@media (min-width: 52.5rem){:host([size=m]){--sbb-toggle-height: 3.25rem}}:host([data-disable-animation-on-resizing]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-toggle{--sbb-text-font-size: var(--sbb-font-size-text-m);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);position:relative;display:flex;align-items:center;width:var(--sbb-toggle-width);max-width:100%;min-width:calc(var(--sbb-toggle-min-width) * 2);height:var(--sbb-toggle-height);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:var(--sbb-color-cloud);border-radius:var(--sbb-toggle-border-radius)}.sbb-toggle:after{content:"";padding-inline:var(--sbb-toggle-padding-inline);display:inline-block;opacity:1;background-color:var(--sbb-color-white);border:var(--sbb-toggle-border-width) var(--sbb-toggle-border-style) var(--sbb-toggle-selected-option-border-color);border-radius:var(--sbb-toggle-border-radius);position:absolute;max-width:100%;min-width:var(--sbb-toggle-min-width);inset-block:calc(-2 * var(--sbb-toggle-border-width));inset-inline:calc(var(--sbb-toggle-option-left) - .125rem) calc(var(--sbb-toggle-option-right) - .125rem);transition-duration:var(--sbb-toggle-animation-duration);transition-timing-function:ease;transition-property:opacity,inset-inline-end,inset-inline-start}@media (forced-colors: active){.sbb-toggle{outline:var(--sbb-toggle-border-width) solid CanvasText}}`;
|
|
9
9
|
var P = Object.defineProperty, E = Object.getOwnPropertyDescriptor, b = (e, t, s, i) => {
|
|
10
10
|
for (var o = i > 1 ? void 0 : i ? E(t, s) : t, n = e.length - 1, l; n >= 0; n--)
|
|
11
11
|
(l = e[n]) && (o = (i ? l(t, s, o) : l(o)) || o);
|