@sbb-esta/lyne-elements-experimental 4.8.1 → 4.10.0

package/pearl-chain-vertical-item.component-BUqZ-3Ay.js

@@ -0,0 +1,108 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { SbbElement as n } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { forceType as r } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { boxSizingStyles as i } from "@sbb-esta/lyne-elements/core/styles.js";
+import { html as a, nothing as o, unsafeCSS as s } from "lit";
+import { property as c } from "lit/decorators.js";
+import { styleMap as l } from "lit/directives/style-map.js";
+//#region src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.scss?inline
+var u = ":host{--sbb-pearl-chain-position-color: var(--sbb-color-primary);--sbb-pearl-chain-bullet-size-start-end: .625rem;--sbb-pearl-chain-bullet-size-stop: .5rem;--sbb-pearl-chain-bullet-color: var(--sbb-background-color-3-inverted);--sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-past: light-dark(var(--sbb-color-metal), var(--sbb-color-granite));--sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-irrelevant: light-dark( var(--sbb-color-metal), var(--sbb-color-granite) );--sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-error);--sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);--sbb-pearl-chain-bullet-animation-duration: 1.92s;--sbb-pearl-chain-bullet-animation-easing: ease-out;--sbb-pearl-chain-bullet-crossed-width: .88375rem;--sbb-pearl-chain-bullet-crossed-height: .21875rem;--sbb-pearl-chain-bullet-crossed-border-width: .09375rem;display:table-row;position:relative;--sbb-pearl-chain-vertical-right-item-width: 100%;--sbb-pearl-chain-vertical-middle-item-min-width: var(--sbb-pearl-chain-bullet-size-start-end);--sbb-pearl-chain-vertical-item-border-width: var(--sbb-border-width-2x);--sbb-pearl-chain-vertical-item-border-width-thin: var(--sbb-border-width-1x);--sbb-pearl-chain-vertical-item-spacing-small: var(--sbb-spacing-fixed-1x);--sbb-pearl-chain-vertical-item-color-default: var(--sbb-pearl-chain-bullet-color);--sbb-pearl-chain-vertical-item-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);--sbb-pearl-chain-vertical-item-color-past: var(--sbb-pearl-chain-bullet-color-past);--sbb-pearl-chain-vertical-item-color-walk: var(--sbb-color-sky);--sbb-pearl-chain-vertical-item-inline-start: 50%;--sbb-pearl-chain-vertical-item-transform: translateX(-50%)}slot[name=right],.sbb-pearl-chain-vertical-item__column{display:table-cell;position:relative;vertical-align:top}slot[name=right]{width:var(--sbb-pearl-chain-vertical-right-item-width)}.sbb-pearl-chain-vertical-item__column--middle{min-width:var(--sbb-pearl-chain-vertical-middle-item-min-width, --sbb-pearl-chain-vertical-middle-min-width)}slot[name=left]::slotted(*){margin-block-start:var(--sbb-pearl-chain-vertical-left-item-block-start);padding-inline-end:var(--sbb-pearl-chain-vertical-left-item-inline-end)}slot[name=right]::slotted(*){margin-block-start:var(--sbb-pearl-chain-vertical-right-item-block-start);padding-inline-start:var(--sbb-pearl-chain-vertical-right-item-inline-start)}.sbb-pearl-chain-vertical-item__middle{vertical-align:top;border-spacing:0}.sbb-pearl-chain-vertical-item__line{position:absolute;bottom:0;inset-inline-start:var(--sbb-pearl-chain-vertical-item-inline-start);transform:var(--sbb-pearl-chain-vertical-item-transform);width:var(--sbb-border-width-2x);inset-block-start:calc(var(--sbb-pearl-chain-bullet-size-start-end) / 2)}.sbb-pearl-chain-vertical-item__line:after{content:\"\";position:absolute;inset-inline-start:0;inset-block-start:0;height:var(--sbb-pearl-chain-vertical-item-leg-status);width:var(--sbb-pearl-chain-vertical-item-border-width);background-color:var(--sbb-pearl-chain-vertical-item-color-past)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__line:after{--sbb-pearl-chain-vertical-item-color-past: GrayText}}.sbb-pearl-chain-vertical-item__line--dotted{background-color:unset;border-color:unset;background-image:linear-gradient(to bottom,currentcolor 0%,currentcolor 50%,Canvas 50%);background-repeat:repeat-y;background-size:calc(2 * var(--sbb-pearl-chain-vertical-item-spacing-small)) var(--sbb-pearl-chain-vertical-item-spacing-small)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__line--dotted{background-color:unset!important;border-inline-start:.0625rem dashed Highlight;transform:translateY(.0625rem)}}.sbb-pearl-chain-vertical-item__line--thin{width:var(--sbb-pearl-chain-vertical-item-border-width-thin)}.sbb-pearl-chain-vertical-item__line--default{background-color:var(--sbb-pearl-chain-vertical-item-color-default);border-color:var(--sbb-pearl-chain-vertical-item-color-default);color:var(--sbb-pearl-chain-vertical-item-color-default)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__line--default{--sbb-pearl-chain-vertical-item-color-default: CanvasText}}.sbb-pearl-chain-vertical-item__line--disruption{border-color:var(--sbb-pearl-chain-vertical-item-color-disruption);background-color:var(--sbb-pearl-chain-vertical-item-color-disruption);color:var(--sbb-pearl-chain-vertical-item-color-disruption)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__line--disruption{--sbb-pearl-chain-vertical-item-color-disruption: Highlight}}.sbb-pearl-chain-vertical-item__line--past{border-color:var(--sbb-pearl-chain-vertical-item-color-past);background-color:var(--sbb-pearl-chain-vertical-item-color-past);color:var(--sbb-pearl-chain-vertical-item-color-past)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__line--past{--sbb-pearl-chain-vertical-item-color-past: GrayText}}.sbb-pearl-chain-vertical-item__line--walk{border-color:var(--sbb-pearl-chain-vertical-item-color-walk);background-color:var(--sbb-pearl-chain-vertical-item-color-walk);color:var(--sbb-pearl-chain-vertical-item-color-walk)}.sbb-pearl-chain-vertical-item__bullet{position:relative;inset-inline-start:var(--sbb-pearl-chain-vertical-item-inline-start);transform:var(--sbb-pearl-chain-vertical-item-transform);background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain-vertical-item__bullet--start-end{min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end)}.sbb-pearl-chain-vertical-item__bullet--stop{min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain-vertical-item__bullet--disruption{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--disruption{--sbb-pearl-chain-bullet-color: Highlight}}.sbb-pearl-chain-vertical-item__bullet--irrelevant,.sbb-pearl-chain-vertical-item__bullet--past{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--irrelevant,.sbb-pearl-chain-vertical-item__bullet--past{--sbb-pearl-chain-bullet-color: GrayText !important}}.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--irrelevant{--sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-1x);min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped{border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped:before{content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%) rotate(45deg);border-block-start:var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;background:var(--sbb-pearl-chain-bullet-color-disruption);height:var(--sbb-pearl-chain-bullet-crossed-height);width:var(--sbb-pearl-chain-bullet-crossed-width)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped:before{background:Highlight}}.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped{--sbb-pearl-chain-bullet-crossed-width: .706875rem;--sbb-pearl-chain-bullet-crossed-height: .1875rem;min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped:before{content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%) rotate(45deg);border-block-start:var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;background:var(--sbb-pearl-chain-bullet-color-disruption);height:var(--sbb-pearl-chain-bullet-crossed-height);width:var(--sbb-pearl-chain-bullet-crossed-width)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped:before{background:Highlight}}.sbb-pearl-chain-vertical-item__bullet--position{inset-block-start:var(--sbb-pearl-chain-vertical-item-position);position:absolute;left:50%;transform:translate(-50%);min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end);background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--position{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain-vertical-item__bullet--position{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-position-color)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--position{--sbb-pearl-chain-position-color: Highlight}}@keyframes pearl-chain-bullet-position-pulse{0%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}25%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}50%{box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--sbb-pearl-chain-position-color) 20%,transparent)}to{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}}.sbb-pearl-chain-vertical-item__bullet--position{animation:pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration) var(--sbb-pearl-chain-bullet-animation-easing) infinite}:host([disable-animation]) .sbb-pearl-chain-vertical-item__bullet--position{animation:unset!important}", d = (() => {
+	let d = n, f, p = [], m = [], h, g = [], _ = [];
+	return class extends d {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+			f = [c({
+				attribute: "pearl-chain-vertical-item-attributes",
+				type: Object
+			})], h = [r(), c({
+				attribute: "disable-animation",
+				reflect: !0,
+				type: Boolean
+			})], e(this, null, f, {
+				kind: "accessor",
+				name: "pearlChainVerticalItemAttributes",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "pearlChainVerticalItemAttributes" in e,
+					get: (e) => e.pearlChainVerticalItemAttributes,
+					set: (e, t) => {
+						e.pearlChainVerticalItemAttributes = t;
+					}
+				},
+				metadata: t
+			}, p, m), e(this, null, h, {
+				kind: "accessor",
+				name: "disableAnimation",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "disableAnimation" in e,
+					get: (e) => e.disableAnimation,
+					set: (e, t) => {
+						e.disableAnimation = t;
+					}
+				},
+				metadata: t
+			}, g, _), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-pearl-chain-vertical-item";
+		}
+		static {
+			this.styles = [i, s(u)];
+		}
+		#e = t(this, p, null);
+		get pearlChainVerticalItemAttributes() {
+			return this.#e;
+		}
+		set pearlChainVerticalItemAttributes(e) {
+			this.#e = e;
+		}
+		#t = (t(this, m), t(this, g, !1));
+		get disableAnimation() {
+			return this.#t;
+		}
+		set disableAnimation(e) {
+			this.#t = e;
+		}
+		render() {
+			let { bulletType: e, lineType: t, lineColor: n, hideLine: r, minHeight: i, bulletSize: s, position: c } = this.pearlChainVerticalItemAttributes || {}, u = c && c > 0 && c <= 100 ? "sbb-pearl-chain-vertical-item__bullet--past" : `sbb-pearl-chain-vertical-item__bullet--${e}`;
+			return a`
+      <div
+        class="sbb-pearl-chain-vertical-item__column"
+        style=${l({ height: `${i}px` })}
+      >
+        <slot name="left"></slot>
+      </div>
+      <div
+        aria-hidden="true"
+        class="sbb-pearl-chain-vertical-item__column sbb-pearl-chain-vertical-item__column--middle"
+      >
+        ${r ? o : a`<div
+              style=${l({ "--sbb-pearl-chain-vertical-item-leg-status": `${c}%` })}
+              class="sbb-pearl-chain-vertical-item__line sbb-pearl-chain-vertical-item__line--${t} sbb-pearl-chain-vertical-item__line--${n}"
+            ></div>`}
+        ${e ? a`<div
+              class="sbb-pearl-chain-vertical-item__bullet  sbb-pearl-chain-vertical-item__bullet--${s} ${u}"
+            ></div>` : o}
+        ${c && c > 0 ? a`<div
+              style=${l({ "--sbb-pearl-chain-vertical-item-position": `${c}%` })}
+              class="sbb-pearl-chain-vertical-item__bullet--position"
+            ></div>` : o}
+      </div>
+      <slot name="right"></slot>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, _);
+		}
+	};
+})();
+//#endregion
+export { d as t };

package/pearl-chain-vertical-item.js

@@ -1,4 +1,4 @@
-import { t as e } from "./pearl-chain-vertical-item.component-G22bWhLU.js";
+import { t as e } from "./pearl-chain-vertical-item.component-BUqZ-3Ay.js";
 import "./pearl-chain-vertical-item.pure.js";
 //#region src/elements-experimental/pearl-chain-vertical-item.ts
 e.define();

package/pearl-chain-vertical-item.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./pearl-chain-vertical-item.component-G22bWhLU.js";
+import { t as e } from "./pearl-chain-vertical-item.component-BUqZ-3Ay.js";
 export { e as SbbPearlChainVerticalItemElement };

package/{pearl-chain-vertical.component-CXIDT5RD.js → pearl-chain-vertical.component-Df9CvRxo.js}

@@ -1,16 +1,16 @@
 import { SbbElement as e } from "@sbb-esta/lyne-elements/core/base-elements.js";
 import { boxSizingStyles as t } from "@sbb-esta/lyne-elements/core/styles.js";
-import { css as n, html as r } from "lit";
-//#region src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.scss?lit&inline
-var i = n`:host{--sbb-pearl-chain-vertical-width:100%;display:block}.sbb-pearl-chain-vertical{width:var(--sbb-pearl-chain-vertical-width);display:table}`, a = class extends e {
+import { html as n, unsafeCSS as r } from "lit";
+//#region src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.scss?inline
+var i = ":host{--sbb-pearl-chain-vertical-width: 100%;display:block}.sbb-pearl-chain-vertical{display:table;width:var(--sbb-pearl-chain-vertical-width)}", a = class extends e {
 	static {
 		this.elementName = "sbb-pearl-chain-vertical";
 	}
 	static {
-		this.styles = [t, i];
+		this.styles = [t, r(i)];
 	}
 	render() {
-		return r`
+		return n`
       <div class="sbb-pearl-chain-vertical">
         <slot></slot>
       </div>

package/pearl-chain-vertical.js

@@ -1,4 +1,4 @@
-import { t as e } from "./pearl-chain-vertical.component-CXIDT5RD.js";
+import { t as e } from "./pearl-chain-vertical.component-Df9CvRxo.js";
 import "./pearl-chain-vertical.pure.js";
 //#region src/elements-experimental/pearl-chain-vertical.ts
 e.define();

package/pearl-chain-vertical.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./pearl-chain-vertical.component-CXIDT5RD.js";
+import { t as e } from "./pearl-chain-vertical.component-Df9CvRxo.js";
 export { e as SbbPearlChainVerticalElement };

package/pearl-chain.component-CpISVoAu.js

@@ -0,0 +1,194 @@
+import { t as e } from "./toDate-p-Tpkb7t.js";
+import { r as t, t as n } from "./differenceInMinutes-Dr9gRqtu.js";
+import { __esDecorate as r, __runInitializers as i } from "tslib";
+import { SbbElement as a } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { forceType as o } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { boxSizingStyles as s } from "@sbb-esta/lyne-elements/core/styles.js";
+import { html as c, nothing as l, unsafeCSS as u } from "lit";
+import { defaultDateAdapter as d } from "@sbb-esta/lyne-elements/core/datetime.js";
+import { property as f } from "lit/decorators.js";
+import { removeTimezoneFromISOTimeString as p } from "./core/datetime.js";
+import { isRideLeg as m } from "./core/timetable.js";
+import { styleMap as h } from "lit/directives/style-map.js";
+//#region node_modules/date-fns/isAfter.js
+function g(t, n) {
+	return +e(t) > +e(n);
+}
+//#endregion
+//#region node_modules/date-fns/isBefore.js
+function _(t, n) {
+	return +e(t) < +e(n);
+}
+//#endregion
+//#region src/elements-experimental/pearl-chain/pearl-chain.scss?inline
+var v = ":host{--sbb-pearl-chain-height: var(--sbb-border-width-2x);--sbb-pearl-chain-spacing-small: .125rem;--sbb-pearl-chain-color: var(--sbb-pearl-chain-bullet-color);--sbb-pearl-chain-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);--sbb-pearl-chain-color-past: var(--sbb-pearl-chain-bullet-color-past);--sbb-pearl-chain-leg-width: 100%;display:block;--sbb-pearl-chain-position-color: var(--sbb-color-primary);--sbb-pearl-chain-bullet-size-start-end: .625rem;--sbb-pearl-chain-bullet-size-stop: .5rem;--sbb-pearl-chain-bullet-color: var(--sbb-background-color-3-inverted);--sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-past: light-dark(var(--sbb-color-metal), var(--sbb-color-granite));--sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-irrelevant: light-dark( var(--sbb-color-metal), var(--sbb-color-granite) );--sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-error);--sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);--sbb-pearl-chain-bullet-animation-duration: 1.92s;--sbb-pearl-chain-bullet-animation-easing: ease-out;--sbb-pearl-chain-bullet-crossed-width: .88375rem;--sbb-pearl-chain-bullet-crossed-height: .21875rem;--sbb-pearl-chain-bullet-crossed-border-width: .09375rem}.sbb-pearl-chain{position:relative;display:flex;justify-content:space-between;flex-wrap:nowrap;color:var(--sbb-pearl-chain-color);width:100%;padding-block:calc((var(--sbb-pearl-chain-bullet-size-start-end) - var(--sbb-pearl-chain-height)) / 2);padding-inline-end:var(--sbb-pearl-chain-bullet-size-start-end)}.sbb-pearl-chain__bullet{min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end);background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media(forced-colors:active){.sbb-pearl-chain__bullet{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain__bullet{content:\"\";position:absolute;background-color:currentcolor;inset-block-start:0;z-index:3}.sbb-pearl-chain__bullet:first-of-type{inset-inline-start:0}.sbb-pearl-chain__bullet:last-of-type{inset-inline-end:0}.sbb-pearl-chain__leg{flex-shrink:0;flex-grow:0;position:relative;height:var(--sbb-pearl-chain-height);border-inline-end:var(--sbb-pearl-chain-spacing-small) solid Canvas;background-color:currentcolor;width:var(--sbb-pearl-chain-leg-width);display:flex;align-items:center}@media(forced-colors:active){.sbb-pearl-chain__leg{background-color:CanvasText}.sbb-pearl-chain--past .sbb-pearl-chain__leg{background-color:GrayText}}.sbb-pearl-chain__leg:last-of-type{border:none}.sbb-pearl-chain__stop{position:relative;z-index:2;background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media(forced-colors:active){.sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain__stop{min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain__bullet--future{background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media(forced-colors:active){.sbb-pearl-chain__bullet--future{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain__leg--past,.sbb-pearl-chain--past,.sbb-pearl-chain__leg--past:after,.sbb-pearl-chain__leg--progress:after,.sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,.sbb-pearl-chain--progress,.sbb-pearl-chain__bullet--past{color:var(--sbb-pearl-chain-color-past);--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past)}@media(forced-colors:active){.sbb-pearl-chain__leg--past,.sbb-pearl-chain--past,.sbb-pearl-chain__leg--past:after,.sbb-pearl-chain__leg--progress:after,.sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,.sbb-pearl-chain--progress,.sbb-pearl-chain__bullet--past{--sbb-pearl-chain-bullet-color: GrayText !important}}@media(forced-colors:active){.sbb-pearl-chain__leg--past,.sbb-pearl-chain--past,.sbb-pearl-chain__leg--past:after,.sbb-pearl-chain__leg--progress:after,.sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,.sbb-pearl-chain--progress,.sbb-pearl-chain__bullet--past{background-color:GrayText!important}}.sbb-pearl-chain__bullet--progress{background:var(--sbb-pearl-chain-bullet-color);--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past)}@media(forced-colors:active){.sbb-pearl-chain__bullet--progress{--sbb-pearl-chain-bullet-color: GrayText !important}}.sbb-pearl-chain__bullet--departure-disruption,.sbb-pearl-chain--arrival-disruption,.sbb-pearl-chain--departure-disruption,.sbb-pearl-chain__leg--disruption{color:var(--sbb-pearl-chain-color-disruption);--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption)}@media(forced-colors:active){.sbb-pearl-chain__bullet--departure-disruption,.sbb-pearl-chain--arrival-disruption,.sbb-pearl-chain--departure-disruption,.sbb-pearl-chain__leg--disruption{--sbb-pearl-chain-bullet-color: Highlight}}@media(forced-colors:active){.sbb-pearl-chain__bullet--departure-disruption,.sbb-pearl-chain--arrival-disruption,.sbb-pearl-chain--departure-disruption,.sbb-pearl-chain__leg--disruption{color:Highlight;background:Highlight}}.sbb-pearl-chain__leg--disruption .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption)}@media(forced-colors:active){.sbb-pearl-chain__leg--disruption .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: Highlight}}.sbb-pearl-chain__leg--past .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past)}@media(forced-colors:active){.sbb-pearl-chain__leg--past .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: GrayText !important}}.sbb-pearl-chain__leg--disruption:after{background-color:unset;background-image:linear-gradient(to right,currentcolor 0%,currentcolor 50%,Canvas 50%);background-repeat:repeat-x;background-size:calc(2 * var(--sbb-pearl-chain-spacing-small)) var(--sbb-pearl-chain-height);inset-inline-end:var(--sbb-pearl-chain-height)}@media(forced-colors:active){.sbb-pearl-chain__leg--disruption:after{background:unset;border-block-start:.0625rem dashed Highlight;transform:translateY(.0625rem)}}.sbb-pearl-chain__leg--skipped{color:var(--sbb-pearl-chain-color-disruption)}.sbb-pearl-chain__leg--skipped:after{background-color:unset;background-image:linear-gradient(to right,currentcolor 0%,currentcolor 50%,Canvas 50%);background-repeat:repeat-x;background-size:calc(2 * var(--sbb-pearl-chain-spacing-small)) var(--sbb-pearl-chain-height);inset-inline-end:var(--sbb-pearl-chain-height)}@media(forced-colors:active){.sbb-pearl-chain__leg--skipped:after{background:unset;border-block-start:.0625rem dashed Highlight;transform:translateY(.0625rem)}}.sbb-pearl-chain__stop--departure-skipped{min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain__stop--departure-skipped:before{content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%) rotate(45deg);border-block-start:var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;background:var(--sbb-pearl-chain-bullet-color-disruption);height:var(--sbb-pearl-chain-bullet-crossed-height);width:var(--sbb-pearl-chain-bullet-crossed-width)}@media(forced-colors:active){.sbb-pearl-chain__stop--departure-skipped:before{background:Highlight}}.sbb-pearl-chain--arrival-skipped,.sbb-pearl-chain--departure-skipped{min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain--arrival-skipped:before,.sbb-pearl-chain--departure-skipped:before{content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%) rotate(45deg);border-block-start:var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;background:var(--sbb-pearl-chain-bullet-color-disruption);height:var(--sbb-pearl-chain-bullet-crossed-height);width:var(--sbb-pearl-chain-bullet-crossed-width)}@media(forced-colors:active){.sbb-pearl-chain--arrival-skipped:before,.sbb-pearl-chain--departure-skipped:before{background:Highlight}}.sbb-pearl-chain__leg:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;background-color:currentcolor;border-radius:var(--sbb-pearl-chain-height);z-index:1}@media(forced-colors:active){.sbb-pearl-chain__leg:after{background-color:CanvasText}.sbb-pearl-chain--past .sbb-pearl-chain__leg:after{background-color:GrayText}}.sbb-pearl-chain__leg:last-of-type:after{inset-inline-end:calc(-1 * var(--sbb-pearl-chain-height))}.sbb-pearl-chain__leg--progress:after{background-color:var(--sbb-pearl-chain-color-past);width:var(--sbb-pearl-chain-leg-status)}.sbb-pearl-chain__position{min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end);background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media(forced-colors:active){.sbb-pearl-chain__position{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain__position{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-position-color)}@media(forced-colors:active){.sbb-pearl-chain__position{--sbb-pearl-chain-position-color: Highlight}}@keyframes pearl-chain-bullet-position-pulse{0%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}25%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}50%{box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--sbb-pearl-chain-position-color) 20%,transparent)}to{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}}.sbb-pearl-chain__position{animation:pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration) var(--sbb-pearl-chain-bullet-animation-easing) infinite;position:absolute;inset-block-start:-200%;z-index:4;inset-inline-start:var(--sbb-pearl-chain-status-position)}.sbb-pearl-chain__position--no-animation{animation:unset}.sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}", y = (() => {
+	let e = a, y = [], b, x = [], S = [], C, w = [], T = [], E;
+	return class extends e {
+		constructor() {
+			super(...arguments), this.#e = (i(this, y), i(this, x, [])), this.#t = (i(this, S), i(this, w, !1)), this._now = (i(this, T), null);
+		}
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
+			b = [f({ type: Array })], C = [o(), f({
+				attribute: "disable-animation",
+				type: Boolean
+			})], E = [f()], r(this, null, b, {
+				kind: "accessor",
+				name: "legs",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "legs" in e,
+					get: (e) => e.legs,
+					set: (e, t) => {
+						e.legs = t;
+					}
+				},
+				metadata: t
+			}, x, S), r(this, null, C, {
+				kind: "accessor",
+				name: "disableAnimation",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "disableAnimation" in e,
+					get: (e) => e.disableAnimation,
+					set: (e, t) => {
+						e.disableAnimation = t;
+					}
+				},
+				metadata: t
+			}, w, T), r(this, null, E, {
+				kind: "setter",
+				name: "now",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "now" in e,
+					set: (e, t) => {
+						e.now = t;
+					}
+				},
+				metadata: t
+			}, null, y), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-pearl-chain";
+		}
+		static {
+			this.styles = [s, u(v)];
+		}
+		#e;
+		get legs() {
+			return this.#e;
+		}
+		set legs(e) {
+			this.#e = e;
+		}
+		#t;
+		get disableAnimation() {
+			return this.#t;
+		}
+		set disableAnimation(e) {
+			this.#t = e;
+		}
+		set now(e) {
+			this._now = d.getValidDateOrNull(d.deserialize(e));
+		}
+		get now() {
+			return this._now;
+		}
+		_getAllDuration(e) {
+			return e?.reduce((e, t) => {
+				let r = p(t.arrival?.time), i = p(t.departure?.time);
+				return r && i ? e + n(p(t.arrival.time), p(t.departure.time)) : e;
+			}, 0);
+		}
+		_isAllCancelled(e) {
+			return e?.every((e) => e?.serviceJourney?.serviceAlteration?.cancelled);
+		}
+		_getRelativeDuration(e, t) {
+			let r = p(t.arrival?.time), i = p(t.departure?.time);
+			if (r && i) {
+				let r = n(p(t.arrival.time), p(t.departure.time)), i = this._getAllDuration(e);
+				return i === 0 ? 100 : r / i * 100;
+			}
+			return 0;
+		}
+		_getProgress(e, r, i) {
+			if (!r?.time || !i?.time) return 0;
+			let a = t(r.time, r.delay ?? 0), o = n(t(i.time, i.delay ?? 0), a), s = n(e, a);
+			return o && s / o * 100;
+		}
+		_getStatus(e, n, r) {
+			let i = n && n.time && t(n.time, n.delay ?? 0), a = r && r.time && t(r.time, r.delay ?? 0);
+			return i && _(i, e) && a && g(a, e) ? "progress" : a && _(a, e) ? "past" : "future";
+		}
+		_renderPosition(e, t, n) {
+			let r = this._getProgress(e, t, n);
+			if (r < 0 && r > 100) return;
+			let i = () => ({
+				"--sbb-pearl-chain-status-position": `${r}%`,
+				...r >= 50 ? { transform: "translateX(-100%)" } : {}
+			}), a = this.disableAnimation ? "sbb-pearl-chain__position--no-animation" : "";
+			return c`<span
+      style=${h(i())}
+      class="sbb-pearl-chain__position ${a}"
+    ></span>`;
+		}
+		render() {
+			let e = this.now ?? /* @__PURE__ */ new Date(), t = this.legs?.filter((e) => m(e)), n = t?.length && p(t[0]?.departure?.time), r = n && {
+				time: n,
+				delay: t[0].departure.delay ?? 0
+			}, i = t?.length && p(t[t.length - 1].arrival?.time), a = i && {
+				time: i,
+				delay: t[t.length - 1]?.arrival.delay ?? 0
+			}, o = t && t[0]?.serviceJourney?.stopPoints && t[0]?.serviceJourney?.stopPoints[0].stopStatus === "NOT_SERVICED" ? "sbb-pearl-chain--departure-skipped" : "", s = (() => {
+				let e = t && t[t.length - 1], n = e && e.serviceJourney?.stopPoints;
+				return n && n[n.length - 1].stopStatus === "NOT_SERVICED" ? "sbb-pearl-chain--arrival-skipped" : "";
+			})(), u = t && t[0]?.serviceJourney?.serviceAlteration?.cancelled ? "sbb-pearl-chain--departure-disruption" : "", d = t && t[t.length - 1]?.serviceJourney?.serviceAlteration?.cancelled ? "sbb-pearl-chain--arrival-disruption" : "", f = r && a && this._getStatus(e, r, a), g = t && f && !u ? "sbb-pearl-chain__bullet--" + f : "", _ = t && f && !d ? "sbb-pearl-chain__bullet--" + this._getStatus(e, void 0, a) : "";
+			return this._isAllCancelled(t) ? c`
+        <div class="sbb-pearl-chain">
+          <span class="sbb-pearl-chain__bullet sbb-pearl-chain--departure-disruption"></span>
+          <div class="sbb-pearl-chain__leg sbb-pearl-chain__leg--disruption"></div>
+          <span class="sbb-pearl-chain__bullet sbb-pearl-chain--departure-disruption"></span>
+        </div>
+      ` : c`
+      <div class="sbb-pearl-chain">
+        <span
+          class="sbb-pearl-chain__bullet ${g} ${o} ${u}"
+        ></span>
+        ${t?.map((n, r) => {
+				let { stopPoints: i, serviceAlteration: a } = n?.serviceJourney || {}, o = this._getRelativeDuration(t, n), s = p(n.departure?.time), u = p(n.arrival?.time), d = i && i[i.length - 1]?.stopStatus === "NOT_SERVICED", f = i && i[i.length - 1]?.stopStatus === "PLANNED", m = i && i[0]?.stopStatus === "NOT_SERVICED", g = r > 0 && t[r - 1].serviceJourney.stopPoints, _ = g && g[g.length - 1]?.stopStatus === "NOT_SERVICED", v = d || m && f ? "sbb-pearl-chain__leg--skipped" : "", y = m || _ ? "sbb-pearl-chain__stop--departure-skipped" : "", b = a?.cancelled || a?.partiallyCancelled ? "sbb-pearl-chain__leg--disruption" : "", x = {
+					time: s,
+					delay: n.departure?.delay ?? 0
+				}, S = {
+					time: u,
+					delay: n.arrival?.delay ?? 0
+				}, C = this._getStatus(e, x, S);
+				return c` <div
+            class="sbb-pearl-chain__leg ${!b && !v && "sbb-pearl-chain__leg--" + C || ""} ${b} ${v}"
+            style=${h({
+					"--sbb-pearl-chain-leg-width": `${o}%`,
+					...C === "progress" && !b && !v ? { "--sbb-pearl-chain-leg-status": `${this._getProgress(e, x, S)}%` } : {}
+				})}
+          >
+            ${r > 0 && r < t.length ? c`<span class="sbb-pearl-chain__stop ${y}"></span>` : l}
+            ${C === "progress" && !b && !v ? this._renderPosition(e, x, S) : l}
+          </div>`;
+			})}
+        <span
+          class="sbb-pearl-chain__bullet ${_} ${s} ${d}"
+        ></span>
+      </div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { y as t };

package/pearl-chain.js

@@ -1,4 +1,4 @@
-import { t as e } from "./pearl-chain.component-DmjkVIva.js";
+import { t as e } from "./pearl-chain.component-CpISVoAu.js";
 import "./pearl-chain.pure.js";
 //#region src/elements-experimental/pearl-chain.ts
 e.define();

package/pearl-chain.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./pearl-chain.component-DmjkVIva.js";
+import { t as e } from "./pearl-chain.component-CpISVoAu.js";
 export { e as SbbPearlChainElement };

package/seat-reservation/seat-reservation/seat-reservation-base-element.js

@@ -362,7 +362,10 @@ var ie = 3, ae = [
 			this.#p = e;
 		}
 		constructor() {
-			super(), this.#e = (t(this, d), t(this, p, null)), this.#t = (t(this, m), t(this, g, "NONE")), this.#n = (t(this, _), t(this, y, !0)), this.#r = (t(this, b), t(this, S, !1)), this.#i = (t(this, C), t(this, T, 16)), this.#a = (t(this, E), t(this, O, null)), this.#o = (t(this, oe), t(this, A, -1)), this.#s = (t(this, j), t(this, N, -1)), this.#c = (t(this, P), t(this, I, !1)), this.#l = (t(this, L), t(this, z, -1)), this.#u = (t(this, B), t(this, H, !1)), this.#d = (t(this, U), t(this, G, -1)), this.#f = (t(this, K), t(this, J, -1)), this.#p = (t(this, Y), t(this, Z, -1)), this.coachBorderPadding = (t(this, Q), 6), this.gapBetweenCoaches = 4, this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, this.gapBetweenCoachDecks = 48, this.coachNavButtonDim = 0, this.coachItemDetailsElements = [], this.currScrollDirection = l.right, this.maxCalcCoachesWidth = 0, this.scrollCoachesAreaWidth = 0, this.scrollNavigationAreaDim = 0, this.triggerCoachPositionsCollection = [], this.navigationScrollArea = null, this.coachScrollArea = null, this.currSelectedPlace = null, this.currSelectedPlaceElementId = null, this.currSelectedCoachIndex = -1, this.currSelectedDeckIndex = 0, this.preventCoachScrollByPlaceClick = !1, this.selectedSeatReservationPlaces = {
+			super(), this.#e = (t(this, d), t(this, p, null)), this.#t = (t(this, m), t(this, g, "NONE")), this.#n = (t(this, _), t(this, y, !0)), this.#r = (t(this, b), t(this, S, !1)), this.#i = (t(this, C), t(this, T, 16)), this.#a = (t(this, E), t(this, O, null)), this.#o = (t(this, oe), t(this, A, -1)), this.#s = (t(this, j), t(this, N, -1)), this.#c = (t(this, P), t(this, I, !1)), this.#l = (t(this, L), t(this, z, -1)), this.#u = (t(this, B), t(this, H, !1)), this.#d = (t(this, U), t(this, G, -1)), this.#f = (t(this, K), t(this, J, -1)), this.#p = (t(this, Y), t(this, Z, -1)), this.coachBorderPadding = (t(this, Q), 6), this.gapBetweenCoaches = 4, this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, this.gapBetweenCoachDecks = 48, this.coachNavButtonDim = 0, this.globalAreaIconDim = {
+				w: 2,
+				h: 2
+			}, this.globalAreaIconPadding = .8, this.coachItemDetailsElements = [], this.currScrollDirection = l.right, this.maxCalcCoachesWidth = 0, this.scrollCoachesAreaWidth = 0, this.scrollNavigationAreaDim = 0, this.triggerCoachPositionsCollection = [], this.navigationScrollArea = null, this.coachScrollArea = null, this.currSelectedPlace = null, this.currSelectedPlaceElementId = null, this.currSelectedCoachIndex = -1, this.currSelectedDeckIndex = 0, this.preventCoachScrollByPlaceClick = !1, this.selectedSeatReservationPlaces = {
 				seats: [],
 				bicycles: []
 			}, this.seatReservationWithoutNavigationHasFocus = !1, this.isCoachGridFocusable = !1, this.isAutoScrolling = !1, this.isKeyboardNavigation = !1, this.hasMultipleDecks = !1, this.hasSeatReservationNativeFocus = !1, this.keyboardNavigationEvents = {
@@ -380,7 +383,8 @@ var ie = 3, ae = [
 				"COMPARTMENT_PASSAGE",
 				"COMPARTMENT_PASSAGE_HIGH",
 				"COMPARTMENT_PASSAGE_MIDDLE",
-				"COMPARTMENT_PASSAGE_LOW"
+				"COMPARTMENT_PASSAGE_LOW",
+				"COMPARTMENT_WALL"
 			], this.overHangingElementInformation = [], this._isRunningInitPreselectCoachIndex = !1, this._lastStartScrollPos = -1, this._prepareServiceIconsNavigation = (e) => e && e?.map(function(e) {
 				return {
 					pId: e,
@@ -391,7 +395,7 @@ var ie = 3, ae = [
 		willUpdate(e) {
 			if (super.willUpdate(e), e.has("seatReservations") && (this.hasMultipleDecks = this.seatReservations?.length > 1, this._initPrepareSeatReservationData(), this._prepareCoachWidthAndGapCalculations(), this._initSeatReservationPlaceSelection(), this.initNavigationSelectionByScrollEvent()), e.has("baseGridSize") && (this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, this.style?.setProperty("--sbb-seat-reservation-grid-size", `${this.baseGridSize}px`), this.initNavigationSelectionByScrollEvent()), e.has("height") && this.height) {
 				let e = this.seatReservations[this.currSelectedDeckIndex] || null;
-				e?.coachItems.length && (this.baseGridSize = this.height / e.coachItems[0].dimension.h, this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, this.style?.setProperty("--sbb-seat-reservation-grid-size", `${this.baseGridSize}px`), this.initNavigationSelectionByScrollEvent());
+				e?.coachItems.length && (this.baseGridSize = this.height / e.coachItems[0].dimension.h, this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, this.style?.setProperty("--sbb-seat-reservation-grid-size", `${this.baseGridSize}px`), this._initPrepareSeatReservationData(), this.initNavigationSelectionByScrollEvent());
 			}
 			e.has("alignVertical") && this.alignVertical && this.initNavigationSelectionByScrollEvent(), e.has("preselectCoachIndex") && (this._isRunningInitPreselectCoachIndex = !0, setTimeout(() => this.scrollToSelectedNavCoach(this.preselectCoachIndex), 1));
 		}
@@ -401,7 +405,7 @@ var ie = 3, ae = [
 			e == "DIRECTION_LEFT" && t > 0 ? t = this.currSelectedCoachIndex == -1 ? 0 : this.currSelectedCoachIndex - 1 : e == "DIRECTION_RIGHT" && t < this.seatReservations[this.currSelectedDeckIndex]?.coachItems.length - 1 && (t = this.currSelectedCoachIndex == -1 ? 0 : this.currSelectedCoachIndex + 1), this.scrollToSelectedNavCoach(t);
 		}
 		_initPrepareSeatReservationData() {
-			this._determineBaseFontSize(), this.hasMultipleDecks && this._initEmptyCoachDeckOffsets(), this._prepareCoachItemDetailsData();
+			this._determineBaseFontSize(), this.hasMultipleDecks && this._initEmptyCoachDeckOffsets(), this._prepareCoachItemDetailsData(), this._prepareOptimizeAreaIconDimensionByMedian();
 		}
 		initNavigationSelectionByScrollEvent() {
 			this.coachScrollArea = this.shadowRoot?.querySelector("#sbb-sr__wrapper-scrollarea"), this.navigationScrollArea = this.shadowRoot?.querySelector("#sbb-sr__navigation-list-coaches");
@@ -767,6 +771,28 @@ var ie = 3, ae = [
 				});
 			}
 		}
+		_prepareOptimizeAreaIconDimensionByMedian() {
+			if (this.seatReservations) {
+				let e = [];
+				if (this.seatReservations.forEach((t) => t.coachItems.forEach((t) => t.serviceElements?.forEach((t) => e.push(t.dimension)))), e.length) {
+					e.sort((e, t) => {
+						if (e && t) {
+							let n = e.w + e.h, r = t.w + t.h;
+							return n > r ? 1 : n < r ? -1 : 0;
+						}
+						return 0;
+					});
+					let t = e[Math.floor(e.length / 2)];
+					this.globalAreaIconDim = this.getCalculatedDimension(t);
+				} else {
+					let e = this.seatReservations.flatMap((e) => e.coachItems.map((e) => e.dimension.h)).reduce((e, t) => Math.max(e, t), 0), t = Math.floor(e * .2);
+					this.globalAreaIconDim = this.getCalculatedDimension({
+						w: t,
+						h: t
+					});
+				}
+			}
+		}
 		_prepareTravelClassNavigation(e) {
 			return e.indexOf("FIRST") === -1 ? e.indexOf("SECOND") === -1 ? "ANY_CLASS" : "SECOND" : "FIRST";
 		}

package/seat-reservation/seat-reservation/seat-reservation.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../seat-reservation.component-zrQHTRl3.js";
+import { t as e } from "../../seat-reservation.component-DajC6fqU.js";
 export { e as SbbSeatReservationElement };

package/seat-reservation/seat-reservation-area/seat-reservation-area.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../seat-reservation-area.component-COD6CXhP.js";
+import { t as e } from "../../seat-reservation-area.component-CtYawDjE.js";
 export { e as SbbSeatReservationAreaElement };

package/seat-reservation/seat-reservation-area.js

@@ -1,4 +1,4 @@
-import { t as e } from "../seat-reservation-area.component-COD6CXhP.js";
+import { t as e } from "../seat-reservation-area.component-CtYawDjE.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements-experimental/seat-reservation/seat-reservation-area.js' has been deprecated.\nUse either '@sbb-esta/elements-experimental/seat-reservation.js' or '@sbb-esta/elements-experimental/seat-reservation.pure.js' instead.");
 //#endregion
 export { e as SbbSeatReservationAreaElement };

package/seat-reservation/seat-reservation-graphic/seat-reservation-assets.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../seat-reservation-graphic.component-BNfU5tQM.js";
+import { t as e } from "../../seat-reservation-graphic.component-Cm_pVxaB.js";
 import { html as t } from "lit";
 import { unsafeHTML as n } from "lit/directives/unsafe-html.js";
 import { mapIconToSvg as r } from "../common/mapper.js";

package/seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../seat-reservation-graphic.component-BNfU5tQM.js";
+import { t as e } from "../../seat-reservation-graphic.component-Cm_pVxaB.js";
 export { e as SbbSeatReservationGraphicElement };

package/seat-reservation/seat-reservation-graphic.js

@@ -1,4 +1,4 @@
-import { t as e } from "../seat-reservation-graphic.component-BNfU5tQM.js";
+import { t as e } from "../seat-reservation-graphic.component-Cm_pVxaB.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements-experimental/seat-reservation/seat-reservation-graphic.js' has been deprecated.\nUse either '@sbb-esta/elements-experimental/seat-reservation.js' or '@sbb-esta/elements-experimental/seat-reservation.pure.js' instead.");
 //#endregion
 export { e as SbbSeatReservationGraphicElement };

package/seat-reservation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../seat-reservation-navigation-coach.component-Bh9ILq60.js";
+import { t as e } from "../../seat-reservation-navigation-coach.component-sug9IBTH.js";
 export { e as SbbSeatReservationNavigationCoachElement };

package/seat-reservation/seat-reservation-navigation-coach.js

@@ -1,4 +1,4 @@
-import { t as e } from "../seat-reservation-navigation-coach.component-Bh9ILq60.js";
+import { t as e } from "../seat-reservation-navigation-coach.component-sug9IBTH.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements-experimental/seat-reservation/seat-reservation-navigation-coach.js' has been deprecated.\nUse either '@sbb-esta/elements-experimental/seat-reservation.js' or '@sbb-esta/elements-experimental/seat-reservation.pure.js' instead.");
 //#endregion
 export { e as SbbSeatReservationNavigationCoachElement };

package/seat-reservation/seat-reservation-navigation-services/seat-reservation-navigation-services.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../seat-reservation-navigation-services.component-QL0UnilZ.js";
+import { t as e } from "../../seat-reservation-navigation-services.component-C9dDYD_M.js";
 export { e as SbbSeatReservationNavigationServicesElement };

package/seat-reservation/seat-reservation-navigation-services.js

@@ -1,4 +1,4 @@
-import { t as e } from "../seat-reservation-navigation-services.component-QL0UnilZ.js";
+import { t as e } from "../seat-reservation-navigation-services.component-C9dDYD_M.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements-experimental/seat-reservation/seat-reservation-navigation-services.js' has been deprecated.\nUse either '@sbb-esta/elements-experimental/seat-reservation.js' or '@sbb-esta/elements-experimental/seat-reservation.pure.js' instead.");
 //#endregion
 export { e as SbbSeatReservationNavigationServicesElement };

package/seat-reservation/seat-reservation-place-control/seat-reservation-place-control.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../seat-reservation-place-control.component-BfnZUyHv.js";
+import { t as e } from "../../seat-reservation-place-control.component-CE7d9M2b.js";
 export { e as SbbSeatReservationPlaceControlElement };

package/seat-reservation/seat-reservation-place-control.js

@@ -1,4 +1,4 @@
-import { t as e } from "../seat-reservation-place-control.component-BfnZUyHv.js";
+import { t as e } from "../seat-reservation-place-control.component-CE7d9M2b.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements-experimental/seat-reservation/seat-reservation-place-control.js' has been deprecated.\nUse either '@sbb-esta/elements-experimental/seat-reservation.js' or '@sbb-esta/elements-experimental/seat-reservation.pure.js' instead.");
 //#endregion
 export { e as SbbSeatReservationPlaceControlElement };

package/seat-reservation/seat-reservation-scoped/seat-reservation-scoped.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../seat-reservation-scoped.component-CY04BT_4.js";
+import { t as e } from "../../seat-reservation-scoped.component-DVyP2JGE.js";
 export { e as SbbSeatReservationScopedElement };

package/seat-reservation/seat-reservation-scoped.js

@@ -1,4 +1,4 @@
-import { t as e } from "../seat-reservation-scoped.component-CY04BT_4.js";
+import { t as e } from "../seat-reservation-scoped.component-DVyP2JGE.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements-experimental/seat-reservation/seat-reservation-scoped.js' has been deprecated.\nUse either '@sbb-esta/elements-experimental/seat-reservation.js' or '@sbb-esta/elements-experimental/seat-reservation.pure.js' instead.");
 //#endregion
 export { e as SbbSeatReservationScopedElement };

package/seat-reservation/seat-reservation.js

@@ -1,5 +1,5 @@
 import { SeatReservationBaseElement as e } from "./seat-reservation/seat-reservation-base-element.js";
-import { t } from "../seat-reservation.component-zrQHTRl3.js";
+import { t } from "../seat-reservation.component-DajC6fqU.js";
 t.define(), console.warn("The entrypoint '@sbb-esta/elements-experimental/seat-reservation/seat-reservation.js' has been deprecated.\nUse either '@sbb-esta/elements-experimental/seat-reservation.js' or '@sbb-esta/elements-experimental/seat-reservation.pure.js' instead.");
 //#endregion
 export { t as SbbSeatReservationElement, e as SeatReservationBaseElement };