@sbb-esta/lyne-elements-dev 5.13.0-dev.1793630843 → 5.13.0-dev.1793637609

package/custom-elements.json

@@ -175911,6 +175911,30 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_applySectorStyle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | undefined"
+                  }
+                },
+                {
+                  "name": "sector",
+                  "type": {
+                    "text": "AggregatedSector"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "elementDependencies",

package/development/train/train-formation/train-formation.component.d.ts

@@ -22,6 +22,7 @@ export declare class SbbTrainFormationElement extends SbbTrainFormationElement_b
     connectedCallback(): void;
     private _readDirectionLabel;
     private _readSectors;
+    private _applySectorStyle;
     protected willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void;
     protected render(): TemplateResult;
 }

package/development/train.pure.js

@@ -2,7 +2,7 @@ import { html, isServer, nothing, unsafeCSS } from "lit";
 import { SbbButtonBaseElement, SbbElement, SbbLanguageController, SbbLinkBaseElement, SbbNamedSlotListMixin, SbbPropertyWatcherController, forceType, handleDistinctChange, hostScrollbarStyles, i18nAdditionalWagonInformationHeading, i18nAnd, i18nBlockedPassage, i18nClass, i18nClosedCompartmentLabel, i18nCouchetteWagonLabel, i18nLocomotiveLabel, i18nRestaurantWagonLabel, i18nSector, i18nSectorShort, i18nSleepingWagonLabel, i18nTrain, i18nTrains, i18nWagonLabel, i18nWagonLabelNumber, i18nWagonsLabel, omitEmptyConverter } from "./core.js";
 import { __esDecorate, __runInitializers } from "tslib";
 import { property, state } from "lit/decorators.js";
-import { styleMap } from "lit/directives/style-map.js";
+import { ref } from "lit/directives/ref.js";
 import { when } from "lit/directives/when.js";
 import { html as html$1, unsafeStatic } from "lit/static-html.js";
 import { SbbDividerElement } from "./divider.pure.js";
@@ -229,6 +229,11 @@ let SbbTrainFormationElement = (() => {
 			}]);
 			this.toggleState("has-sectors", this._sectors.some((s) => !!s.label));
 		}
+		_applySectorStyle(element, sector) {
+			if (!element) return;
+			element.style.setProperty("--sbb-train-formation-wagon-count", `${sector.wagonCount}`);
+			element.style.setProperty("--sbb-train-formation-wagon-blocked-passage-count", `${sector.blockedPassageCount}`);
+		}
 		willUpdate(changedProperties) {
 			super.willUpdate(changedProperties);
 			if (changedProperties.has("listChildren")) {
@@ -241,10 +246,7 @@ let SbbTrainFormationElement = (() => {
       ${this._sectors.length && this._sectors[0].label !== void 0 ? html`<div class="sbb-train-formation__sectors" aria-hidden="true">
               ${this._sectors.map((aggregatedSector) => html`<span
                     class="sbb-train-formation__sector"
-                    style=${styleMap({
-				"--sbb-train-formation-wagon-count": aggregatedSector.wagonCount,
-				"--sbb-train-formation-wagon-blocked-passage-count": aggregatedSector.blockedPassageCount
-			})}
+                    ${ref((element) => this._applySectorStyle(element, aggregatedSector))}
                   >
                     <span class="sbb-train-formation__sector-sticky-wrapper">
                       ${`${aggregatedSector.wagonCount === 1 && aggregatedSector.label ? i18nSectorShort[this._language.current] : i18nSector[this._language.current]} ${aggregatedSector.label ? aggregatedSector.label : ""}`}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.13.0-dev.1793630843",
+  "version": "5.13.0-dev.1793637609",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/faf81772232ccd117dacc3794d761a652f992d88"
+    "https://github.com/sbb-design-systems/lyne-components/commit/b121bc0877bbe394e57200193278f2569ec4958b"
   ],
   "type": "module",
   "exports": {

package/train.pure.js

@@ -1,10 +1,10 @@
-import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbButtonBaseElement as i,SbbElement as a,SbbLanguageController as o,SbbLinkBaseElement as s,SbbNamedSlotListMixin as c,SbbPropertyWatcherController as l,forceType as u,handleDistinctChange as d,hostScrollbarStyles as f,i18nAdditionalWagonInformationHeading as p,i18nAnd as m,i18nBlockedPassage as h,i18nClass as g,i18nClosedCompartmentLabel as _,i18nCouchetteWagonLabel as v,i18nLocomotiveLabel as y,i18nRestaurantWagonLabel as b,i18nSector as x,i18nSectorShort as S,i18nSleepingWagonLabel as ee,i18nTrain as C,i18nTrains as w,i18nWagonLabel as te,i18nWagonLabelNumber as ne,i18nWagonsLabel as T,omitEmptyConverter as E}from"./core.js";import{__esDecorate as D,__runInitializers as O}from"tslib";import{property as k,state as A}from"lit/decorators.js";import{styleMap as j}from"lit/directives/style-map.js";import{when as re}from"lit/directives/when.js";import{html as M,unsafeStatic as N}from"lit/static-html.js";import{SbbDividerElement as ie}from"./divider.pure.js";import{SbbIconElement as P}from"./icon.pure.js";import{SbbTimetableOccupancyIconElement as ae}from"./timetable-occupancy-icon.pure.js";const F=e=>(()=>{let t=e,n,r=[],i=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;n=[A()],D(this,null,n,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},r,i),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#e=O(this,r,null);get orientation(){return this.#e}set orientation(e){this.#e=e}constructor(...e){super(...e),O(this,i),this.addController(new l(this,()=>this.closest(`sbb-train-formation`),{orientation:e=>{this.orientation&&this.internals.states.delete(`orientation-${this.orientation}`),this.orientation=e.orientation,this.orientation&&this.internals.states.add(`orientation-${this.orientation}`)}}))}}})();var I=`:host{width:var(--sbb-train-formation-blocked-passage-dimension);height:var(--_sbb-train-formation-wagon-height);grid-template-areas:"icon";align-items:center;display:grid}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){width:var(--_sbb-train-formation-wagon-width);height:var(--sbb-train-formation-blocked-passage-dimension)}:host:before,:host:after{content:"";grid-area:icon;justify-self:center}:host:before{width:var(--sbb-train-formation-blocked-passage-dimension);height:var(--sbb-train-formation-blocked-passage-dimension);background-color:var(--sbb-train-blocked-passage-background-color);border-radius:50%}:host:after{width:var(--sbb-train-blocked-passage-icon-bar-width);height:var(--sbb-train-blocked-passage-icon-bar-height);border-radius:var(--sbb-train-blocked-passage-icon-bar-border-radius);background-color:var(--sbb-train-blocked-passage-bar-color)}
+import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbButtonBaseElement as i,SbbElement as a,SbbLanguageController as o,SbbLinkBaseElement as s,SbbNamedSlotListMixin as c,SbbPropertyWatcherController as l,forceType as u,handleDistinctChange as d,hostScrollbarStyles as f,i18nAdditionalWagonInformationHeading as p,i18nAnd as m,i18nBlockedPassage as h,i18nClass as g,i18nClosedCompartmentLabel as _,i18nCouchetteWagonLabel as v,i18nLocomotiveLabel as y,i18nRestaurantWagonLabel as b,i18nSector as x,i18nSectorShort as S,i18nSleepingWagonLabel as ee,i18nTrain as C,i18nTrains as w,i18nWagonLabel as te,i18nWagonLabelNumber as ne,i18nWagonsLabel as T,omitEmptyConverter as E}from"./core.js";import{__esDecorate as D,__runInitializers as O}from"tslib";import{property as k,state as A}from"lit/decorators.js";import{ref as j}from"lit/directives/ref.js";import{when as re}from"lit/directives/when.js";import{html as M,unsafeStatic as N}from"lit/static-html.js";import{SbbDividerElement as ie}from"./divider.pure.js";import{SbbIconElement as P}from"./icon.pure.js";import{SbbTimetableOccupancyIconElement as ae}from"./timetable-occupancy-icon.pure.js";const F=e=>(()=>{let t=e,n,r=[],i=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;n=[A()],D(this,null,n,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},r,i),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#e=O(this,r,null);get orientation(){return this.#e}set orientation(e){this.#e=e}constructor(...e){super(...e),O(this,i),this.addController(new l(this,()=>this.closest(`sbb-train-formation`),{orientation:e=>{this.orientation&&this.internals.states.delete(`orientation-${this.orientation}`),this.orientation=e.orientation,this.orientation&&this.internals.states.add(`orientation-${this.orientation}`)}}))}}})();var I=`:host{width:var(--sbb-train-formation-blocked-passage-dimension);height:var(--_sbb-train-formation-wagon-height);grid-template-areas:"icon";align-items:center;display:grid}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){width:var(--_sbb-train-formation-wagon-width);height:var(--sbb-train-formation-blocked-passage-dimension)}:host:before,:host:after{content:"";grid-area:icon;justify-self:center}:host:before{width:var(--sbb-train-formation-blocked-passage-dimension);height:var(--sbb-train-formation-blocked-passage-dimension);background-color:var(--sbb-train-blocked-passage-background-color);border-radius:50%}:host:after{width:var(--sbb-train-blocked-passage-icon-bar-width);height:var(--sbb-train-blocked-passage-icon-bar-height);border-radius:var(--sbb-train-blocked-passage-icon-bar-border-radius);background-color:var(--sbb-train-blocked-passage-bar-color)}
 `,L=class extends F(a){static{this.elementName=`sbb-train-blocked-passage`}static{this.styles=[r(I)]}},R=`:host{--sbb-train-formation-scroll-padding:var(--sbb-train-formation-padding);--_sbb-train-formation-wagon-width:var(--sbb-train-formation-wagon-dimension-long);--_sbb-train-formation-wagon-height:var(--sbb-train-formation-wagon-dimension-short);gap:var(--_sbb-train-formation-sectors-to-train-gap,0) 0;padding-block:var(--sbb-train-formation-padding);color:var(--sbb-train-formation-text-color);font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);grid-template:"start sectors end""start trains end"/auto 1fr auto;display:grid;position:relative;overflow:auto visible}:host:before,:host:after{content:"";width:var(--sbb-train-formation-scroll-padding);display:block}:host:before{grid-area:start}:host:after{grid-area:end}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}:host(:is(:state(has-sectors),[state--has-sectors])){--_sbb-train-formation-sectors-to-train-gap:var(--sbb-train-formation-gap)}:host(:is(:state(has-direction-label),[state--has-direction-label])){--_sbb-train-formation-reserve-spacing-display:block}:host([orientation=vertical]){--_sbb-train-formation-wagon-width:var(--sbb-train-formation-wagon-dimension-short);--_sbb-train-formation-wagon-height:var(--sbb-train-formation-wagon-dimension-long);--_sbb-train-formation-flex-direction:column;--_sbb-train-formation-flex-direction-inverted:row;padding-block:unset;padding-inline:var(--sbb-train-formation-padding);gap:0 var(--_sbb-train-formation-sectors-to-train-gap,0);grid-template:"start start""sectors trains"1fr"end end";width:fit-content;overflow:visible auto}:host([orientation=vertical]):before,:host([orientation=vertical]):after{width:auto;height:var(--sbb-train-formation-scroll-padding)}.sbb-train-formation__sectors{gap:var(--sbb-train-formation-wagon-gap);flex-direction:var(--_sbb-train-formation-flex-direction);grid-area:sectors;display:flex}.sbb-train-formation__sector{--_wagon-sum:var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-dimension-long);--_blocked-passage-sum:var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-dimension);--_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));--_sector-line-length:calc(.5 * var(--_sector-width));flex:0 0 var(--_sector-width);flex-direction:var(--_sbb-train-formation-flex-direction);justify-content:center;display:flex;overflow:clip visible}:host([orientation=vertical]) .sbb-train-formation__sector{overflow:visible clip}.sbb-train-formation__sector-sticky-wrapper{padding:0 var(--sbb-train-formation-sector-padding);margin:0 var(--sbb-train-formation-sector-margin);white-space:nowrap;position:sticky;inset:auto 0}:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper{writing-mode:sideways-lr;padding:var(--sbb-train-formation-sector-padding) 0;margin:var(--sbb-train-formation-sector-margin) 0;inset:0 auto}.sbb-train-formation__sector-sticky-wrapper:before,.sbb-train-formation__sector-sticky-wrapper:after{content:"";inset-block:calc(50% - var(--sbb-train-formation-sector-line-width) / 2);border-block-end:var(--sbb-train-formation-sector-line-width) solid var(--sbb-train-formation-sector-line-color);width:var(--_sector-line-length);position:absolute}:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper:before,:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper:after{width:auto;height:var(--_sector-line-length)}.sbb-train-formation__sector-sticky-wrapper:before{inset-inline-end:100%}.sbb-train-formation__sector-sticky-wrapper:after{inset-inline-start:100%}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{flex-direction:var(--_sbb-train-formation-flex-direction);gap:var(--sbb-train-formation-wagon-gap);display:flex}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}
-`;let z=(()=>{let t=c(a),i,s=[],l=[],u,d=[],p=[],m,h=[],g=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;i=[k({reflect:!0})],u=[k({reflect:!0})],m=[A()],D(this,null,i,{kind:`accessor`,name:`view`,static:!1,private:!1,access:{has:e=>`view`in e,get:e=>e.view,set:(e,t)=>{e.view=t}},metadata:e},s,l),D(this,null,u,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},d,p),D(this,null,m,{kind:`accessor`,name:`_sectors`,static:!1,private:!1,access:{has:e=>`_sectors`in e,get:e=>e._sectors,set:(e,t)=>{e._sectors=t}},metadata:e},h,g),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-train-formation`}static{this.styles=[f,r(R)]}#e;get view(){return this.#e}set view(e){this.#e=e}#t;get orientation(){return this.#t}set orientation(e){this.#t=e}#n;get _sectors(){return this.#n}set _sectors(e){this.#n=e}constructor(){super(),this.listChildLocalNames=[`sbb-train`],this.#e=O(this,s,`side`),this.#t=(O(this,l),O(this,d,`horizontal`)),this.#n=(O(this,p),O(this,h,[])),this._language=(O(this,g),new o(this)),this.addEventListener?.(`trainslotchange`,e=>{this._readSectors(e),this._readDirectionLabel(e)}),this.addEventListener?.(`sectorchange`,e=>this._readSectors(e)),this.addEventListener?.(`directionlabelchange`,e=>this._readDirectionLabel(e))}connectedCallback(){super.connectedCallback(),this.classList.add(`sbb-scrollbar`)}_readDirectionLabel(e){e?.stopPropagation(),this.toggleState(`has-direction-label`,Array.from(this.querySelectorAll?.(`sbb-train`)??[]).some(e=>!!e.directionLabel))}_readSectors(e){e?.stopPropagation(),this._sectors=Array.from(this.querySelectorAll?.(`sbb-train-wagon,sbb-train-wagon-button,sbb-train-wagon-link,sbb-train-blocked-passage`)??[]).reduce((e,t)=>{let n=e[e.length-1];if(t.localName.startsWith(`sbb-train-wagon`)){let r=t.sector??t.getAttribute(`sector`);!n.label&&r&&(n.label=r),!r||n.label===r?n.wagonCount++:e.push({label:r,wagonCount:1,blockedPassageCount:0})}else t.localName===`sbb-train-blocked-passage`&&n.blockedPassageCount++;return e},[{wagonCount:0,blockedPassageCount:0}]),this.toggleState(`has-sectors`,this._sectors.some(e=>!!e.label))}willUpdate(e){super.willUpdate(e),e.has(`listChildren`)&&(this._readSectors(),this._readDirectionLabel())}render(){return e`
+`;let z=(()=>{let t=c(a),i,s=[],l=[],u,d=[],p=[],m,h=[],g=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;i=[k({reflect:!0})],u=[k({reflect:!0})],m=[A()],D(this,null,i,{kind:`accessor`,name:`view`,static:!1,private:!1,access:{has:e=>`view`in e,get:e=>e.view,set:(e,t)=>{e.view=t}},metadata:e},s,l),D(this,null,u,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},d,p),D(this,null,m,{kind:`accessor`,name:`_sectors`,static:!1,private:!1,access:{has:e=>`_sectors`in e,get:e=>e._sectors,set:(e,t)=>{e._sectors=t}},metadata:e},h,g),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-train-formation`}static{this.styles=[f,r(R)]}#e;get view(){return this.#e}set view(e){this.#e=e}#t;get orientation(){return this.#t}set orientation(e){this.#t=e}#n;get _sectors(){return this.#n}set _sectors(e){this.#n=e}constructor(){super(),this.listChildLocalNames=[`sbb-train`],this.#e=O(this,s,`side`),this.#t=(O(this,l),O(this,d,`horizontal`)),this.#n=(O(this,p),O(this,h,[])),this._language=(O(this,g),new o(this)),this.addEventListener?.(`trainslotchange`,e=>{this._readSectors(e),this._readDirectionLabel(e)}),this.addEventListener?.(`sectorchange`,e=>this._readSectors(e)),this.addEventListener?.(`directionlabelchange`,e=>this._readDirectionLabel(e))}connectedCallback(){super.connectedCallback(),this.classList.add(`sbb-scrollbar`)}_readDirectionLabel(e){e?.stopPropagation(),this.toggleState(`has-direction-label`,Array.from(this.querySelectorAll?.(`sbb-train`)??[]).some(e=>!!e.directionLabel))}_readSectors(e){e?.stopPropagation(),this._sectors=Array.from(this.querySelectorAll?.(`sbb-train-wagon,sbb-train-wagon-button,sbb-train-wagon-link,sbb-train-blocked-passage`)??[]).reduce((e,t)=>{let n=e[e.length-1];if(t.localName.startsWith(`sbb-train-wagon`)){let r=t.sector??t.getAttribute(`sector`);!n.label&&r&&(n.label=r),!r||n.label===r?n.wagonCount++:e.push({label:r,wagonCount:1,blockedPassageCount:0})}else t.localName===`sbb-train-blocked-passage`&&n.blockedPassageCount++;return e},[{wagonCount:0,blockedPassageCount:0}]),this.toggleState(`has-sectors`,this._sectors.some(e=>!!e.label))}_applySectorStyle(e,t){e&&(e.style.setProperty(`--sbb-train-formation-wagon-count`,`${t.wagonCount}`),e.style.setProperty(`--sbb-train-formation-wagon-blocked-passage-count`,`${t.blockedPassageCount}`))}willUpdate(e){super.willUpdate(e),e.has(`listChildren`)&&(this._readSectors(),this._readDirectionLabel())}render(){return e`
       ${this._sectors.length&&this._sectors[0].label!==void 0?e`<div class="sbb-train-formation__sectors" aria-hidden="true">
               ${this._sectors.map(t=>e`<span
                     class="sbb-train-formation__sector"
-                    style=${j({"--sbb-train-formation-wagon-count":t.wagonCount,"--sbb-train-formation-wagon-blocked-passage-count":t.blockedPassageCount})}
+                    ${j(e=>this._applySectorStyle(e,t))}
                   >
                     <span class="sbb-train-formation__sector-sticky-wrapper">
                       ${`${t.wagonCount===1&&t.label?S[this._language.current]:x[this._language.current]} ${t.label?t.label:``}`}