@sbb-esta/lyne-elements-dev 4.8.1-dev.1773933819 → 4.8.1-dev.1774003987
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/custom-elements.json +757 -674
- package/development/header/header/header.component.d.ts +7 -0
- package/development/header/header/header.component.d.ts.map +1 -1
- package/development/header/header/header.component.js +1 -1
- package/development/header/header.js +1 -1
- package/development/header.component-CxLTkL_g.js +489 -0
- package/development/header.js +1 -1
- package/development/header.pure.js +1 -1
- package/header/header/header.component.js +1 -1
- package/header/header.js +1 -1
- package/{header.component-BiIWWPA0.js → header.component-BpevKe1F.js} +50 -21
- package/header.js +1 -1
- package/header.pure.js +1 -1
- package/package.json +2 -2
- package/development/header.component-DEw_zC-n.js +0 -446
|
@@ -3,23 +3,23 @@ import { css as n, html as r, isServer as i } from "lit";
|
|
|
3
3
|
import { property as a, state as o } from "lit/decorators.js";
|
|
4
4
|
import { SbbElement as s } from "./core/base-elements.js";
|
|
5
5
|
import { forceType as c, idReference as l } from "./core/decorators.js";
|
|
6
|
-
import { isLean as u } from "./core/dom.js";
|
|
7
|
-
import { boxSizingStyles as
|
|
8
|
-
import { SbbFocusVisibleWithinController as
|
|
6
|
+
import { isLean as u, queueDomContentLoaded as d } from "./core/dom.js";
|
|
7
|
+
import { boxSizingStyles as f } from "./core/styles.js";
|
|
8
|
+
import { SbbFocusVisibleWithinController as p } from "./core/a11y.js";
|
|
9
9
|
//#region src/elements/header/header/header.scss?lit&inline
|
|
10
|
-
var
|
|
11
|
-
let n = s,
|
|
12
|
-
return class extends n {
|
|
10
|
+
var m = n`:host{--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) )}@media(min-width:64rem){:host{--sbb-logo-height: 1.25rem;--sbb-signet-height: 1.25rem}}:host{display:block;height:var(--sbb-header-height)}:host([size=s]) ::slotted(:is(sbb-header-button,sbb-header-link)){--sbb-header-action-min-height: var(--sbb-size-element-xs);--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x)}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll]:is(:state(fixed),[state--fixed])){--sbb-header-position: fixed;--sbb-header-animation-name: hide;--sbb-header-transform: translate3d(0, -100%, 0);--sbb-header-inset-inline-end: var(--sbb-scrollbar-width, 0)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(animated),[state--animated])){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(visible),[state--visible])){--sbb-header-animation-name: show;--sbb-header-transform: translate3d(0, 0, 0);--sbb-header-transition-timing: cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(has-visible-focus-within),[state--has-visible-focus-within])){--sbb-header-transition-duration: 0;--sbb-header-transform: translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-header-background);z-index:var(--sbb-header-z-index, 10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing)}:host(:is(:is(:state(shadow),[state--shadow]),:is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header{box-shadow:var(--sbb-header-box-shadow)}@media(forced-colors:active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{display:flex;align-items:center;justify-content:flex-start;height:var(--sbb-header-height)}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}::slotted(*){flex:0 0 auto}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(.sbb-header-logo){margin-inline-start:var(--sbb-spacing-responsive-s)}::slotted(a.sbb-header-logo){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a.sbb-header-logo):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a.sbb-header-logo:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes hide{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}`, h = "[aria-controls][aria-expanded='true']", g = (() => {
|
|
11
|
+
let n = s, g, _ = [], v = [], y, b = [], x = [], S, C = [], w = [], T, E = [], D = [], O, k = [], A = [];
|
|
12
|
+
return class s extends n {
|
|
13
13
|
static {
|
|
14
14
|
let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
|
|
15
|
-
|
|
15
|
+
g = [c(), a({
|
|
16
16
|
reflect: !0,
|
|
17
17
|
type: Boolean
|
|
18
|
-
})],
|
|
18
|
+
})], y = [l(), a({ attribute: "scroll-origin" })], S = [c(), a({
|
|
19
19
|
attribute: "hide-on-scroll",
|
|
20
20
|
reflect: !0,
|
|
21
21
|
type: Boolean
|
|
22
|
-
})],
|
|
22
|
+
})], T = [a({ reflect: !0 })], O = [o()], e(this, null, g, {
|
|
23
23
|
kind: "accessor",
|
|
24
24
|
name: "expanded",
|
|
25
25
|
static: !1,
|
|
@@ -32,7 +32,7 @@ var p = n`:host{--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-t
|
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
34
|
metadata: t
|
|
35
|
-
},
|
|
35
|
+
}, _, v), e(this, null, y, {
|
|
36
36
|
kind: "accessor",
|
|
37
37
|
name: "scrollOrigin",
|
|
38
38
|
static: !1,
|
|
@@ -45,7 +45,7 @@ var p = n`:host{--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-t
|
|
|
45
45
|
}
|
|
46
46
|
},
|
|
47
47
|
metadata: t
|
|
48
|
-
},
|
|
48
|
+
}, b, x), e(this, null, S, {
|
|
49
49
|
kind: "accessor",
|
|
50
50
|
name: "hideOnScroll",
|
|
51
51
|
static: !1,
|
|
@@ -58,7 +58,7 @@ var p = n`:host{--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-t
|
|
|
58
58
|
}
|
|
59
59
|
},
|
|
60
60
|
metadata: t
|
|
61
|
-
},
|
|
61
|
+
}, C, w), e(this, null, T, {
|
|
62
62
|
kind: "accessor",
|
|
63
63
|
name: "size",
|
|
64
64
|
static: !1,
|
|
@@ -71,7 +71,7 @@ var p = n`:host{--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-t
|
|
|
71
71
|
}
|
|
72
72
|
},
|
|
73
73
|
metadata: t
|
|
74
|
-
},
|
|
74
|
+
}, E, D), e(this, null, O, {
|
|
75
75
|
kind: "accessor",
|
|
76
76
|
name: "_headerOnTop",
|
|
77
77
|
static: !1,
|
|
@@ -84,7 +84,7 @@ var p = n`:host{--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-t
|
|
|
84
84
|
}
|
|
85
85
|
},
|
|
86
86
|
metadata: t
|
|
87
|
-
},
|
|
87
|
+
}, k, A), t && Object.defineProperty(this, Symbol.metadata, {
|
|
88
88
|
enumerable: !0,
|
|
89
89
|
configurable: !0,
|
|
90
90
|
writable: !0,
|
|
@@ -95,7 +95,16 @@ var p = n`:host{--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-t
|
|
|
95
95
|
this.elementName = "sbb-header";
|
|
96
96
|
}
|
|
97
97
|
static {
|
|
98
|
-
this.styles = [
|
|
98
|
+
this.styles = [f, m];
|
|
99
|
+
}
|
|
100
|
+
static {
|
|
101
|
+
this._headerScrollOrigins = /* @__PURE__ */ new Set();
|
|
102
|
+
}
|
|
103
|
+
static {
|
|
104
|
+
this._headerElements = /* @__PURE__ */ new Set();
|
|
105
|
+
}
|
|
106
|
+
static {
|
|
107
|
+
i || d(() => this._initializeScrollOriginObserver());
|
|
99
108
|
}
|
|
100
109
|
#e;
|
|
101
110
|
get expanded() {
|
|
@@ -133,13 +142,33 @@ var p = n`:host{--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-t
|
|
|
133
142
|
this.#i = e;
|
|
134
143
|
}
|
|
135
144
|
constructor() {
|
|
136
|
-
super(), this.#e = t(this,
|
|
145
|
+
super(), this.#e = t(this, _, !1), this.#t = (t(this, v), t(this, b, null)), this.#n = (t(this, x), t(this, C, !1)), this.#r = (t(this, w), t(this, E, u() ? "s" : "m")), this.#i = (t(this, D), t(this, k, !0)), this._scrollElement = t(this, A), this._lastScroll = 0, this._scrollOriginFromObserver = null, this.addController(new p(this));
|
|
146
|
+
}
|
|
147
|
+
static _initializeScrollOriginObserver() {
|
|
148
|
+
new MutationObserver((e) => {
|
|
149
|
+
for (let t of e) if (t.type === "attributes") this._handleScrollOriginElement(t.target);
|
|
150
|
+
else if (t.type === "childList") for (let e of [...t.addedNodes, ...t.removedNodes].filter((e) => e.nodeType === e.ELEMENT_NODE)) this._handleScrollOriginElement(e), this._findAndHandleScrollOrigins(e);
|
|
151
|
+
this._updateHeaderElements();
|
|
152
|
+
}).observe(document.documentElement, {
|
|
153
|
+
attributeFilter: ["sbb-header-scroll-origin"],
|
|
154
|
+
childList: !0,
|
|
155
|
+
subtree: !0
|
|
156
|
+
}), this._findAndHandleScrollOrigins(document.body), this._updateHeaderElements();
|
|
157
|
+
}
|
|
158
|
+
static _findAndHandleScrollOrigins(e) {
|
|
159
|
+
e.querySelectorAll("[sbb-header-scroll-origin]").forEach((e) => this._handleScrollOriginElement(e));
|
|
160
|
+
}
|
|
161
|
+
static _handleScrollOriginElement(e) {
|
|
162
|
+
e.hasAttribute("sbb-header-scroll-origin") ? this._headerScrollOrigins.add(e) : this._headerScrollOrigins.delete(e);
|
|
163
|
+
}
|
|
164
|
+
static _updateHeaderElements() {
|
|
165
|
+
for (let e of this._headerElements) this._headerScrollOrigins.size === 0 ? e._scrollOriginFromObserver = null : this._headerScrollOrigins.size === 1 ? e._scrollOriginFromObserver = this._headerScrollOrigins.values().next().value ?? null : e._scrollOriginFromObserver = Array.from(this._headerScrollOrigins).sort((e, t) => e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_CONTAINS).at(-1) ?? null, e._updateScrollListener();
|
|
137
166
|
}
|
|
138
167
|
connectedCallback() {
|
|
139
|
-
super.connectedCallback(), this.hasUpdated && this._updateScrollListener();
|
|
168
|
+
super.connectedCallback(), s._headerElements.add(this), this.hasUpdated && this._updateScrollListener();
|
|
140
169
|
}
|
|
141
170
|
disconnectedCallback() {
|
|
142
|
-
super.disconnectedCallback(), this._scrollElement = null, this._scrollEventsController?.abort();
|
|
171
|
+
super.disconnectedCallback(), this._scrollElement = null, this._scrollEventsController?.abort(), s._headerElements.delete(this);
|
|
143
172
|
}
|
|
144
173
|
requestUpdate(e, t, n) {
|
|
145
174
|
super.requestUpdate(e, t, n), !i && (!e || e === "scrollOrigin") && this.hasUpdated && this._updateScrollListener();
|
|
@@ -148,7 +177,7 @@ var p = n`:host{--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-t
|
|
|
148
177
|
super.firstUpdated(e), this._updateScrollListener();
|
|
149
178
|
}
|
|
150
179
|
_updateScrollListener() {
|
|
151
|
-
let e = this.scrollOrigin ?? document;
|
|
180
|
+
let e = this.scrollOrigin ?? this._scrollOriginFromObserver ?? document;
|
|
152
181
|
if (e === this._scrollElement || (this._scrollEventsController?.abort(), this._scrollElement = e, !this._scrollElement)) return;
|
|
153
182
|
this._scrollEventsController = new AbortController(), this._scrollFunction = this._getScrollFunction.bind(this), this._scrollElement.addEventListener("scroll", this._scrollFunction, {
|
|
154
183
|
passive: !0,
|
|
@@ -182,7 +211,7 @@ var p = n`:host{--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-t
|
|
|
182
211
|
}
|
|
183
212
|
_closeOpenOverlays() {
|
|
184
213
|
if (this.matches(":is(:state(has-visible-focus-within),[state--has-visible-focus-within])")) return;
|
|
185
|
-
let e = Array.from(this.querySelectorAll(
|
|
214
|
+
let e = Array.from(this.querySelectorAll(h));
|
|
186
215
|
for (let t of e) {
|
|
187
216
|
let e = t.getAttribute("aria-controls"), n = document.getElementById(e);
|
|
188
217
|
typeof n?.close == "function" && n.close();
|
|
@@ -200,4 +229,4 @@ var p = n`:host{--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-t
|
|
|
200
229
|
};
|
|
201
230
|
})();
|
|
202
231
|
//#endregion
|
|
203
|
-
export {
|
|
232
|
+
export { g as t };
|
package/header.js
CHANGED
|
@@ -2,7 +2,7 @@ import { t as e } from "./header-action-common-D9CO0Jax.js";
|
|
|
2
2
|
import { SbbHeaderButtonElement as t } from "./header/header-button/header-button.component.js";
|
|
3
3
|
import { t as n } from "./header-environment.component-DDZ9fcZd.js";
|
|
4
4
|
import { SbbHeaderLinkElement as r } from "./header/header-link/header-link.component.js";
|
|
5
|
-
import { t as i } from "./header.component-
|
|
5
|
+
import { t as i } from "./header.component-BpevKe1F.js";
|
|
6
6
|
import "./header.pure.js";
|
|
7
7
|
i.define(), t.define(), n.define(), r.define();
|
|
8
8
|
//#endregion
|
package/header.pure.js
CHANGED
|
@@ -2,5 +2,5 @@ import { t as e } from "./header-action-common-D9CO0Jax.js";
|
|
|
2
2
|
import { SbbHeaderButtonElement as t } from "./header/header-button/header-button.component.js";
|
|
3
3
|
import { t as n } from "./header-environment.component-DDZ9fcZd.js";
|
|
4
4
|
import { SbbHeaderLinkElement as r } from "./header/header-link/header-link.component.js";
|
|
5
|
-
import { t as i } from "./header.component-
|
|
5
|
+
import { t as i } from "./header.component-BpevKe1F.js";
|
|
6
6
|
export { e as SbbHeaderActionCommonElementMixin, t as SbbHeaderButtonElement, i as SbbHeaderElement, n as SbbHeaderEnvironmentElement, r as SbbHeaderLinkElement };
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "4.8.1-dev.
|
|
3
|
+
"version": "4.8.1-dev.1774003987",
|
|
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/045dcc79bff0fd752a0cda363cdfd9b4163706a3"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|