@sbb-esta/lyne-elements 1.10.0 → 1.11.0

package/train/train-formation.js

@@ -1,28 +1,29 @@
-import { css as c, LitElement as d, html as e, nothing as f } from "lit";
-import { property as h, state as p, customElement as m } from "lit/decorators.js";
-import { ref as u } from "lit/directives/ref.js";
-import { SbbConnectedAbortController as g, SbbLanguageController as v } from "../core/controllers.js";
-import { i18nSectorShort as _, i18nSector as w, i18nTrains as k } from "../core/i18n.js";
-import { SbbNamedSlotListMixin as y } from "../core/mixins.js";
-import { AgnosticResizeObserver as x } from "../core/observers.js";
-const C = c`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-formation-inline-padding: var(--sbb-spacing-fixed-4x);--sbb-train-formation-background-color: var(--sbb-color-white);--sbb-train-formation-sector-label-color: var(--sbb-color-metal);--sbb-train-formation-sector-line-color: var(--sbb-color-smoke);--sbb-train-formation-blocked-passage-width: 1rem}@media (forced-colors: active){:host{--sbb-train-formation-sector-line-color: CanvasText}}:host([hide-wagon-label]){--sbb-train-formation-wagon-label-display: none}.sbb-train-formation{--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-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-train-formation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-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-train-formation::-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-train-formation::-webkit-scrollbar-button,.sbb-train-formation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-train-formation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-train-formation{display:grid;grid-template:"start sectors end" auto "start trains end" auto/auto 1fr auto;position:relative;overflow-x:auto;background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation:before,.sbb-train-formation:after{content:"";display:block;width:var(--sbb-train-formation-inline-padding);background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation:before{grid-area:start}.sbb-train-formation:after{grid-area:end}.sbb-train-formation__sectors{display:flex;grid-area:sectors;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__sector{--_wagon-sum: var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-width);--_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-width);--_total-count: calc( var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count) );--_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));--_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));--sbb-text-font-size: var(--sbb-font-size-text-s);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);flex:0 0 var(--_sector-width);color:var(--sbb-train-formation-sector-label-color);text-align:center;position:relative;display:inline-block;margin-block-end:var(--sbb-spacing-fixed-4x);max-width:var(--_sector-width)}.sbb-train-formation__sector:before{content:"";position:absolute;top:50%;right:0;bottom:50%;left:0;height:1px;background-color:var(--sbb-train-formation-sector-line-color)}.sbb-train-formation__sector-sticky-wrapper{background-color:var(--sbb-train-formation-background-color);position:sticky;inset:auto 0;padding:0 var(--sbb-spacing-fixed-1x);margin:0 var(--sbb-spacing-fixed-2x);overflow:hidden;white-space:nowrap}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}`;
-var z = Object.defineProperty, L = Object.getOwnPropertyDescriptor, l = (r, t, i, a) => {
-  for (var o = a > 1 ? void 0 : a ? L(t, i) : t, s = r.length - 1, b; s >= 0; s--)
+import { ResizeController as c } from "@lit-labs/observers/resize-controller.js";
+import { css as d, LitElement as f, html as e, nothing as h } from "lit";
+import { property as m, state as p, customElement as u } from "lit/decorators.js";
+import { ref as g } from "lit/directives/ref.js";
+import { SbbConnectedAbortController as v, SbbLanguageController as _ } from "../core/controllers.js";
+import { i18nSectorShort as w, i18nSector as k, i18nTrains as y } from "../core/i18n.js";
+import { SbbNamedSlotListMixin as x } from "../core/mixins.js";
+const C = d`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-formation-inline-padding: var(--sbb-spacing-fixed-4x);--sbb-train-formation-background-color: var(--sbb-color-white);--sbb-train-formation-sector-label-color: var(--sbb-color-metal);--sbb-train-formation-sector-line-color: var(--sbb-color-smoke);--sbb-train-formation-blocked-passage-width: 1rem}@media (forced-colors: active){:host{--sbb-train-formation-sector-line-color: CanvasText}}:host([hide-wagon-label]){--sbb-train-formation-wagon-label-display: none}.sbb-train-formation{--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-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-train-formation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-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-train-formation::-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-train-formation::-webkit-scrollbar-button,.sbb-train-formation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-train-formation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-train-formation{display:grid;grid-template:"start sectors end" auto "start trains end" auto/auto 1fr auto;position:relative;overflow-x:auto;background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation:before,.sbb-train-formation:after{content:"";display:block;width:var(--sbb-train-formation-inline-padding);background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation:before{grid-area:start}.sbb-train-formation:after{grid-area:end}.sbb-train-formation__sectors{display:flex;grid-area:sectors;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__sector{--_wagon-sum: var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-width);--_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-width);--_total-count: calc( var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count) );--_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));--_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));--sbb-text-font-size: var(--sbb-font-size-text-s);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);flex:0 0 var(--_sector-width);color:var(--sbb-train-formation-sector-label-color);text-align:center;position:relative;display:inline-block;margin-block-end:var(--sbb-spacing-fixed-4x);max-width:var(--_sector-width)}.sbb-train-formation__sector:before{content:"";position:absolute;top:50%;right:0;bottom:50%;left:0;height:1px;background-color:var(--sbb-train-formation-sector-line-color)}.sbb-train-formation__sector-sticky-wrapper{background-color:var(--sbb-train-formation-background-color);position:sticky;inset:auto 0;padding:0 var(--sbb-spacing-fixed-1x);margin:0 var(--sbb-spacing-fixed-2x);overflow:hidden;white-space:nowrap}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}`;
+var z = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (r, t, i, a) => {
+  for (var o = a > 1 ? void 0 : a ? D(t, i) : t, s = r.length - 1, b; s >= 0; s--)
     (b = r[s]) && (o = (a ? b(t, i, o) : b(o)) || o);
   return a && o && z(t, i, o), o;
 };
-let n = class extends y(d) {
+let n = class extends x(f) {
   constructor() {
-    super(...arguments), this.listChildLocalNames = ["sbb-train"], this.hideWagonLabel = !1, this._sectors = [], this._contentResizeObserver = new x(() => this._applyCssWidth()), this._abort = new g(this), this._language = new v(this);
+    super(...arguments), this.listChildLocalNames = ["sbb-train"], this.hideWagonLabel = !1, this._sectors = [], this._contentResizeObserver = new c(this, {
+      target: null,
+      skipInitial: !0,
+      callback: () => this._applyCssWidth()
+    }), this._abort = new v(this), this._language = new _(this);
   }
   connectedCallback() {
     super.connectedCallback();
     const r = this._abort.signal;
     this.addEventListener("trainSlotChange", (t) => this._readSectors(t), { signal: r }), this.addEventListener("sectorChange", (t) => this._readSectors(t), { signal: r });
   }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._contentResizeObserver.disconnect();
-  }
   /**
    * Apply width of the scrollable space of the formation as a css variable. This will be used from
    * every slotted sbb-train for the direction-label
@@ -55,14 +56,14 @@ let n = class extends y(d) {
     );
   }
   async _updateFormationDiv(r) {
-    r && (this._contentResizeObserver.disconnect(), this._formationDiv = r, this._contentResizeObserver.observe(this._formationDiv), await this.updateComplete, this._applyCssWidth());
+    r && (this._formationDiv && this._contentResizeObserver.unobserve(this._formationDiv), this._formationDiv = r, this._contentResizeObserver.observe(this._formationDiv), await this.updateComplete, this._applyCssWidth());
   }
   willUpdate(r) {
     super.willUpdate(r), r.has("listChildren") && this._readSectors();
   }
   render() {
     return e`
-      <div class="sbb-train-formation" ${u(this._updateFormationDiv)}>
+      <div class="sbb-train-formation" ${g(this._updateFormationDiv)}>
         ${this._sectors.length && this._sectors[0].label !== void 0 ? e`<div class="sbb-train-formation__sectors" aria-hidden="true">
               ${this._sectors.map(
       (r) => e`<span
@@ -72,16 +73,16 @@ let n = class extends y(d) {
                 --sbb-train-formation-wagon-blocked-passage-count: ${r.blockedPassageCount}"
                   >
                     <span class="sbb-train-formation__sector-sticky-wrapper">
-                      ${`${r.wagonCount === 1 && r.label ? _[this._language.current] : w[this._language.current]} ${r.label ? r.label : ""}`}
+                      ${`${r.wagonCount === 1 && r.label ? w[this._language.current] : k[this._language.current]} ${r.label ? r.label : ""}`}
                     </span>
                   </span>`
     )}
-            </div>` : f}
+            </div>` : h}
 
         <div class="sbb-train-formation__trains">
           ${this.renderList({
       class: "sbb-train-formation__train-list",
-      ariaLabel: k[this._language.current]
+      ariaLabel: y[this._language.current]
     })}
         </div>
       </div>
@@ -90,13 +91,13 @@ let n = class extends y(d) {
 };
 n.styles = C;
 l([
-  h({ attribute: "hide-wagon-label", reflect: !0, type: Boolean })
+  m({ attribute: "hide-wagon-label", reflect: !0, type: Boolean })
 ], n.prototype, "hideWagonLabel", 2);
 l([
   p()
 ], n.prototype, "_sectors", 2);
 n = l([
-  m("sbb-train-formation")
+  u("sbb-train-formation")
 ], n);
 export {
   n as SbbTrainFormationElement