@sbb-esta/lyne-elements 0.52.1 → 0.52.2

package/train/train-wagon.js

@@ -2,22 +2,22 @@ import { css as d, LitElement as w, nothing as t } from "lit";
 import { property as b, customElement as m } from "lit/decorators.js";
 import { html as s, unsafeStatic as p } from "lit/static-html.js";
 import { SbbLanguageController as y } from "../core/controllers.js";
-import { EventEmitter as f } from "../core/eventing.js";
-import { i18nSector as v, i18nWagonLabel as u, i18nClass as h, i18nBlockedPassage as _, i18nClosedCompartmentLabel as x, i18nLocomotiveLabel as $, i18nAdditionalWagonInformationHeading as C, i18nWagonLabelNumber as k } from "../core/i18n.js";
+import { EventEmitter as u } from "../core/eventing.js";
+import { i18nSector as _, i18nWagonLabel as f, i18nClass as h, i18nBlockedPassage as v, i18nClosedCompartmentLabel as x, i18nLocomotiveLabel as $, i18nAdditionalWagonInformationHeading as C, i18nWagonLabelNumber as k } from "../core/i18n.js";
 import { SbbNamedSlotListMixin as L } from "../core/mixins.js";
 import "../icon.js";
 import "../timetable-occupancy-icon.js";
 const z = d`*,:before,:after{box-sizing:border-box}:host{--sbb-train-wagon-width: var(--sbb-train-formation-wagon-width);--sbb-train-wagon-height: var(--sbb-train-formation-wagon-height);--sbb-train-wagon-inner-padding: var(--sbb-spacing-fixed-3x);--sbb-train-wagon-shape-border-radius: var(--sbb-train-formation-wagon-border-radius);--sbb-train-wagon-shape-color: var(--sbb-color-charcoal);--sbb-train-wagon-shape-color-closed: var(--sbb-color-metal);--sbb-train-wagon-shape-width: var(--sbb-border-width-1x);--sbb-train-wagon-gap: var(--sbb-spacing-fixed-2x);--sbb-train-wagon-icons-gap: var(--sbb-spacing-fixed-1x);--sbb-train-wagon-icons-height: .875rem;display:block}@media (forced-colors: active){:host{--sbb-train-wagon-shape-color-closed: CanvasText}}.sbb-train-wagon{display:flex;flex-direction:column;align-items:center;width:var(--sbb-train-wagon-width);gap:var(--sbb-train-wagon-gap)}.sbb-train-wagon__compartment{list-style:none;margin:0;padding:0;font-size:inherit;display:grid;grid-template:"label label" auto "occupancy class" 1fr/1fr 1fr;position:relative;width:100%}:host([type=closed]) .sbb-train-wagon__compartment:before,:host(:not([data-has-visible-wagon-content])) .sbb-train-wagon__compartment:before{content:"";grid-area:occupancy/span 2;height:var(--sbb-train-wagon-height)}.sbb-train-wagon__compartment:after{content:"";display:block;position:absolute;inset-inline:0;inset-block:auto 0;width:var(--sbb-train-wagon-width);height:var(--sbb-train-wagon-height);border-radius:var(--sbb-train-wagon-shape-border-radius)}:host([type=wagon]) .sbb-train-wagon__compartment:after{border:var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color)}:host([type=closed]) .sbb-train-wagon__compartment:after{border:var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color-closed)}.sbb-train-wagon__occupancy,.sbb-train-wagon__class{height:var(--sbb-train-wagon-height);display:flex;align-items:center}.sbb-train-wagon__label{--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);grid-area:label;text-align:center;display:var(--sbb-train-formation-wagon-label-display, inline-block);min-height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-train-wagon__occupancy{grid-area:occupancy;padding-inline-start:var(--sbb-train-wagon-inner-padding)}.sbb-train-wagon__class{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);grid-area:class;padding-inline-end:var(--sbb-train-wagon-inner-padding);margin-inline-start:auto}.sbb-train-wagon__locomotive{grid-area:occupancy/span 2}.sbb-train-wagon__icons{--sbb-icon-svg-height: var(--sbb-train-wagon-icons-height);display:flex}.sbb-train-wagon__icons[hidden]{position:absolute}.sbb-train-wagon__icons-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:wrap;gap:var(--sbb-train-wagon-icons-gap);justify-content:center}.sbb-train-wagon__icons-list>:is(li,span){display:inline-flex}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-var S = Object.defineProperty, A = Object.getOwnPropertyDescriptor, e = (a, i, l, o) => {
-  for (var r = o > 1 ? void 0 : o ? A(i, l) : i, c = a.length - 1, g; c >= 0; c--)
-    (g = a[c]) && (r = (o ? g(i, l, r) : g(r)) || r);
-  return o && r && S(i, l, r), r;
+var S = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (a, e, l, o) => {
+  for (var r = o > 1 ? void 0 : o ? A(e, l) : e, c = a.length - 1, g; c >= 0; c--)
+    (g = a[c]) && (r = (o ? g(e, l, r) : g(r)) || r);
+  return o && r && S(e, l, r), r;
 };
 let n = class extends L(
   w
 ) {
   constructor() {
-    super(...arguments), this.listChildLocalNames = ["sbb-icon"], this.type = "wagon", this.occupancy = "none", this.b = null, this.blockedPassage = "none", this.a = new y(this), this.d = new f(
+    super(...arguments), this.listChildLocalNames = ["sbb-icon"], this.type = "wagon", this.occupancy = "none", this._sector = null, this.blockedPassage = "none", this._language = new y(this), this._sectorChange = new u(
       this,
       n.events.sectorChange,
       {
@@ -27,10 +27,10 @@ let n = class extends L(
     );
   }
   set sector(a) {
-    this.b = a, this.c();
+    this._sector = a, this._sectorChanged();
   }
   get sector() {
-    return this.b;
+    return this._sector;
   }
   willUpdate(a) {
     super.willUpdate(a), (a.has("type") || a.has("occupancy") || a.has("wagonClass")) && this.toggleAttribute(
@@ -38,8 +38,8 @@ let n = class extends L(
       !!(this.type === "wagon" && this.occupancy || this.wagonClass)
     );
   }
-  c() {
-    this.d.emit();
+  _sectorChanged() {
+    this._sectorChange.emit();
   }
   render() {
     const a = (l) => {
@@ -47,23 +47,23 @@ let n = class extends L(
       return s`
         <${p(o)} class="sbb-train-wagon__label" aria-hidden=${(!this.label).toString()}>
           ${this.label ? s` <span class="sbb-screen-reader-only">
-                    ${`${k[this.a.current]},`}&nbsp;
+                    ${`${k[this._language.current]},`}&nbsp;
                   </span>
                   ${this.label}` : t}
         </${p(o)}>
       `;
-    }, i = `${v[this.a.current]}, ${this.sector}`;
+    }, e = `${_[this._language.current]}, ${this.sector}`;
     return s`
       <div class="sbb-train-wagon">
         ${this.type === "wagon" ? s`<ul
-              aria-label=${u[this.a.current]}
+              aria-label=${f[this._language.current]}
               class="sbb-train-wagon__compartment"
             >
-              ${this.sector ? s`<li class="sbb-screen-reader-only">${i}</li>` : t}
+              ${this.sector ? s`<li class="sbb-screen-reader-only">${e}</li>` : t}
               ${a("li")}
               ${this.wagonClass ? s`<li class="sbb-train-wagon__class">
                     <span class="sbb-screen-reader-only">
-                      ${this.wagonClass === "1" ? h.first[this.a.current] : h.second[this.a.current]}
+                      ${this.wagonClass === "1" ? h.first[this._language.current] : h.second[this._language.current]}
                     </span>
                     <span aria-hidden="true">${this.wagonClass}</span>
                   </li>` : t}
@@ -73,20 +73,20 @@ let n = class extends L(
                     .occupancy=${this.occupancy}
                   ></sbb-timetable-occupancy-icon>` : t}
               ${this.blockedPassage && this.blockedPassage !== "none" ? s`<li class="sbb-screen-reader-only">
-                    ${_[this.blockedPassage][this.a.current]}
+                    ${v[this.blockedPassage][this._language.current]}
                   </li>` : t}
             </ul>` : t}
         ${this.type === "closed" ? s`<span class="sbb-train-wagon__compartment">
               <span class="sbb-screen-reader-only">
-                ${x(this.label ? parseInt(this.label) : void 0)[this.a.current]}
-                ${this.sector ? `, ${i}` : t}
+                ${x(this.label ? parseInt(this.label) : void 0)[this._language.current]}
+                ${this.sector ? `, ${e}` : t}
               </span>
               ${a("span")}
             </span>` : t}
         ${this.type === "locomotive" ? s`<span class="sbb-train-wagon__compartment">
               <span class="sbb-screen-reader-only">
-                ${$[this.a.current]}
-                ${this.sector ? `, ${i}` : t}
+                ${$[this._language.current]}
+                ${this.sector ? `, ${e}` : t}
               </span>
               ${a("span")}
               <svg
@@ -108,7 +108,7 @@ let n = class extends L(
         ${this.type === "wagon" ? s`<span class="sbb-train-wagon__icons" ?hidden=${this.listChildren.length === 0}>
               ${this.renderList({
       class: "sbb-train-wagon__icons-list",
-      ariaLabel: C[this.a.current]
+      ariaLabel: C[this._language.current]
     })}
             </span>` : t}
       </div>
@@ -119,28 +119,28 @@ n.styles = z;
 n.events = {
   sectorChange: "sectorChange"
 };
-e([
+i([
   b({ reflect: !0 })
 ], n.prototype, "type", 2);
-e([
+i([
   b()
 ], n.prototype, "occupancy", 2);
-e([
+i([
   b({ reflect: !0 })
 ], n.prototype, "sector", 1);
-e([
+i([
   b({ attribute: "blocked-passage" })
 ], n.prototype, "blockedPassage", 2);
-e([
+i([
   b({ attribute: "wagon-class" })
 ], n.prototype, "wagonClass", 2);
-e([
+i([
   b()
 ], n.prototype, "label", 2);
-e([
+i([
   b({ attribute: "additional-accessibility-text" })
 ], n.prototype, "additionalAccessibilityText", 2);
-n = e([
+n = i([
   m("sbb-train-wagon")
 ], n);
 export {

package/train/train.js

@@ -1,9 +1,9 @@
-import { css as p, LitElement as f, nothing as d } from "lit";
-import { property as n, customElement as v } from "lit/decorators.js";
+import { css as p, LitElement as g, nothing as d } from "lit";
+import { property as n, customElement as f } from "lit/decorators.js";
 import { html as c, unsafeStatic as h } from "lit/static-html.js";
-import { SbbLanguageController as g } from "../core/controllers.js";
-import { EventEmitter as m } from "../core/eventing.js";
-import { i18nTrain as _, i18nWagonsLabel as w } from "../core/i18n.js";
+import { SbbLanguageController as v } from "../core/controllers.js";
+import { EventEmitter as _ } from "../core/eventing.js";
+import { i18nTrain as m, i18nWagonsLabel as w } from "../core/i18n.js";
 import { SbbNamedSlotListMixin as x } from "../core/mixins.js";
 import "../icon.js";
 const y = p`*,:before,:after{box-sizing:border-box}:host{--sbb-train-direction-spacing: var(--sbb-spacing-fixed-4x);--sbb-train-direction-label-padding: var(--sbb-spacing-fixed-1x);--sbb-train-direction-station-padding: var(--sbb-spacing-fixed-3x);--sbb-train-direction-line-width: var(--sbb-border-width-1x);--sbb-train-direction-line-color: var(--sbb-color-smoke);--sbb-train-direction-label-color: var(--sbb-color-metal);--sbb-train-direction-label-background: var(--sbb-color-white);--sbb-train-direction-indicator-end-height: .75rem;--sbb-train-direction-indicator-arrow-offset-end: .5625rem;--sbb-train-direction-indicator-arrow-offset-start: calc( var(--sbb-train-direction-indicator-arrow-offset-end) * -1 );display:block}@media (forced-colors: active){:host{--sbb-train-direction-line-color: CanvasText}}.sbb-train{display:flex;flex-direction:column;position:relative;height:100%}.sbb-train__wagons{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train__direction{--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);padding-block-start:var(--sbb-train-direction-spacing);margin-block:auto var(--sbb-train-direction-spacing);display:flex;position:relative;width:100%}.sbb-train__direction-heading{z-index:1;display:flex;position:sticky;inset:auto 0;flex-direction:column;width:100%;max-width:var(--sbb-train-direction-width);margin:0;color:var(--sbb-train-direction-label-color);font-size:inherit;font-weight:inherit}.sbb-train__direction-indicator{z-index:0;position:absolute;top:calc(.5em * var(--sbb-typo-line-height-body-text) + var(--sbb-train-direction-spacing));inset-inline:0;height:var(--sbb-train-direction-line-width);background-color:var(--sbb-train-direction-line-color)}.sbb-train__direction-arrow{color:var(--sbb-train-direction-line-color)}:host([direction=right]) .sbb-train__direction-arrow{transform:translate(var(--sbb-train-direction-indicator-arrow-offset-end));order:1}:host([direction=left]) .sbb-train__direction-arrow{transform:translate(var(--sbb-train-direction-indicator-arrow-offset-start))}.sbb-train__sticky-wrapper{position:sticky;inset:auto 0;width:100%;max-width:var(--sbb-train-direction-width);height:var(--sbb-train-direction-line-width);display:flex;align-items:center;justify-content:space-between}.sbb-train__sticky-wrapper:after{content:"";width:var(--sbb-train-direction-line-width);height:var(--sbb-train-direction-indicator-end-height);background-color:var(--sbb-train-direction-line-color);display:block}.sbb-train__direction-label,.sbb-train__direction-station{margin:0 auto}.sbb-train__direction-label{padding:0 var(--sbb-train-direction-label-padding);background-color:var(--sbb-train-direction-label-background)}.sbb-train__direction-station{--sbb-text-font-size: var(--sbb-font-size-text-xxs);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);max-width:100%;text-overflow:ellipsis;overflow:hidden;padding:0 var(--sbb-train-direction-station-padding)}.sbb-train__direction-label-sr{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
@@ -12,12 +12,12 @@ var u = Object.defineProperty, L = Object.getOwnPropertyDescriptor, e = (i, a, s
     (l = i[b]) && (r = (o ? l(a, s, r) : l(r)) || r);
   return o && r && u(a, s, r), r;
 };
-let t = class extends x(f) {
+let t = class extends x(g) {
   constructor() {
     super(...arguments), this.listChildLocalNames = [
       "sbb-train-wagon",
       "sbb-train-blocked-passage"
-    ], this.directionLabelLevel = "6", this.direction = "left", this.a = new g(this), this.b = new m(
+    ], this.directionLabelLevel = "6", this.direction = "left", this._language = new v(this), this._trainSlotChange = new _(
       this,
       t.events.trainSlotChange,
       {
@@ -29,23 +29,23 @@ let t = class extends x(f) {
   /**
    * Create the aria-label text out of the direction label, station and the accessibility label.
    */
-  c() {
-    const i = [_[this.a.current]];
+  _getDirectionAriaLabel() {
+    const i = [m[this._language.current]];
     return this.directionLabel && this.station && i.push(`${this.directionLabel} ${this.station}`), this.accessibilityLabel && i.push(this.accessibilityLabel), `${i.join(", ")}.`;
   }
   willUpdate(i) {
-    super.willUpdate(i), i.has("listChildren") && this.b.emit();
+    super.willUpdate(i), i.has("listChildren") && this._trainSlotChange.emit();
   }
   render() {
     const i = `h${this.directionLabelLevel}`;
     return c`
       <div class="sbb-train">
         <${h(i)} class="sbb-train__direction-label-sr">
-          ${this.c()}
+          ${this._getDirectionAriaLabel()}
         </${h(i)}>
         ${this.renderList({
       class: "sbb-train__wagons",
-      ariaLabel: w[this.a.current]
+      ariaLabel: w[this._language.current]
     })}
 
         ${this.directionLabel ? c`<div class="sbb-train__direction" aria-hidden="true">
@@ -86,7 +86,7 @@ e([
   n({ reflect: !0 })
 ], t.prototype, "direction", 2);
 t = e([
-  v("sbb-train")
+  f("sbb-train")
 ], t);
 export {
   t as SbbTrainElement