@sbb-esta/lyne-elements 5.1.0 → 5.3.0

package/train.pure.js

@@ -2,15 +2,15 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbB
 `,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-typo-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`
       ${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})}
-                >
-                  <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:``}`}
-                  </span>
-                </span>`)}
-          </div>`:n}
+              ${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})}
+                  >
+                    <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:``}`}
+                    </span>
+                  </span>`)}
+            </div>`:n}
 
       <div class="sbb-train-formation__trains">
         ${this.renderList({class:`sbb-train-formation__train-list`,ariaLabel:w[this._language.current]})}
@@ -36,13 +36,13 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbB
                 ${this.label?M`<li class="sbb-screen-reader-only">${a}</li>`:n}
                 ${this.wagonClass&&this.wagonType!==`closed`?M`<li class="sbb-train-wagon__class">${o}</li>`:n}
                 ${this.occupancy&&this.wagonType!==`closed`?M`<sbb-timetable-occupancy-icon
-                      class="sbb-train-wagon__occupancy"
-                      role="listitem"
-                      occupancy=${this.occupancy}
-                    ></sbb-timetable-occupancy-icon>`:n}
+                        class="sbb-train-wagon__occupancy"
+                        role="listitem"
+                        occupancy=${this.occupancy}
+                      ></sbb-timetable-occupancy-icon>`:n}
                 ${t?M`<li class="sbb-screen-reader-only">
-                      ${h[e][this._language.current]}
-                    </li>`:n}
+                        ${h[e][this._language.current]}
+                      </li>`:n}
               </ul>`,()=>M`<div class="sbb-train-wagon__compartment">
                 <span class="sbb-screen-reader-only">
                   ${`${this._wagonTypeLabel()}${this.sector?`, ${i}`:``}`}
@@ -50,17 +50,17 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbB
                 ${this.label?M`<span class="sbb-screen-reader-only">${a}</span>`:n}
                 ${this.wagonClass&&this.wagonType!==`closed`?M`<span class="sbb-train-wagon__class">${o}</span>`:n}
                 ${this.occupancy&&this.wagonType!==`closed`?M`<sbb-timetable-occupancy-icon
-                      class="sbb-train-wagon__occupancy"
-                      occupancy=${this.occupancy}
-                    ></sbb-timetable-occupancy-icon>`:n}
+                        class="sbb-train-wagon__occupancy"
+                        occupancy=${this.occupancy}
+                      ></sbb-timetable-occupancy-icon>`:n}
                 ${t?M`<span class="sbb-screen-reader-only">
-                      ${h[e][this._language.current]}
-                    </span>`:n}
+                        ${h[e][this._language.current]}
+                      </span>`:n}
               </div> `)}
           ${V[this.wagonType]?M`<sbb-icon
-                name=${V[this.wagonType]}
-                class="sbb-train-wagon__main-icon"
-              ></sbb-icon>`:n}
+                  name=${V[this.wagonType]}
+                  class="sbb-train-wagon__main-icon"
+                ></sbb-icon>`:n}
           <svg class="sbb-train-wagon__shape" viewBox="0 0 84 36" aria-hidden="true">
             <path d=${s}></path>
             <path
@@ -73,18 +73,18 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbB
             ></path>
           </svg>
           ${this.additionalAccessibilityText?M`<span class="sbb-screen-reader-only"
-                >, ${this.additionalAccessibilityText}</span
-              >`:n}
+                  >, ${this.additionalAccessibilityText}</span
+                >`:n}
           <span
             class="sbb-train-wagon__information-wrapper"
             ?hidden=${!this.listChildren.length&&!this.label}
           >
             ${this.label?M`<span aria-hidden="true" class="sbb-train-wagon__label">${this.label}</span>`:n}
             ${this.label&&this.listChildren.length?M`<sbb-divider
-                  orientation=${this.orientation===`vertical`?`horizontal`:`vertical`}
-                  aria-hidden="true"
-                  class="sbb-train-wagon__label-divider"
-                ></sbb-divider>`:n}
+                    orientation=${this.orientation===`vertical`?`horizontal`:`vertical`}
+                    aria-hidden="true"
+                    class="sbb-train-wagon__label-divider"
+                  ></sbb-divider>`:n}
             ${this.renderList({class:`sbb-train-wagon__attribute-icon-list`,ariaLabel:p[this._language.current]})}
           </span>
         </div>

package/visual-checkbox.pure.js

@@ -1,17 +1,17 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbDisabledMixin as o,SbbElement as s,SbbNegativeMixin as c,forceType as l}from"./core.js";var u=`:host{width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-visual-checkbox-background-color);cursor:var(--sbb-visual-checkbox-cursor);outline:var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color);outline-offset:calc(-1 * var(--sbb-visual-checkbox-border-width));flex-shrink:0;justify-content:center;align-items:center;display:flex}:host([size=xs]){--sbb-visual-checkbox-dimension:var(--sbb-checkbox-dimension-xs)}:host([size=s]){--sbb-visual-checkbox-dimension:var(--sbb-checkbox-dimension-s)}:host([size=m]){--sbb-visual-checkbox-dimension:var(--sbb-checkbox-dimension-m)}:host([negative]){--sbb-visual-checkbox-background-color:var(--sbb-visual-checkbox-background-color-negative);--sbb-visual-checkbox-selection-color:var(--sbb-visual-checkbox-selection-color-negative)}:host([disabled]){--sbb-visual-checkbox-background-color:var(--sbb-visual-checkbox-background-color-disabled);--sbb-visual-checkbox-border-style:var(--sbb-visual-checkbox-border-style-disabled);--sbb-visual-checkbox-cursor:var(--sbb-cursor-default);--sbb-visual-checkbox-border-color:var(--sbb-visual-checkbox-border-color-disabled);--sbb-visual-checkbox-selection-color:var(--sbb-visual-checkbox-selection-color-disabled)}:host([disabled][negative]){--sbb-visual-checkbox-background-color:var(--sbb-visual-checkbox-background-color-negative-disabled);--sbb-visual-checkbox-selection-color:var(--sbb-visual-checkbox-selection-color-disabled-negative)}@media (forced-colors:active){:host([indeterminate]){--sbb-visual-checkbox-selection-color:ButtonBorder}:host([indeterminate][disabled]){--sbb-visual-checkbox-selection-color:GrayText}:host([checked]:not([indeterminate])){--sbb-visual-checkbox-background-color:Highlight;--sbb-visual-checkbox-border-width:0}:host([disabled][checked]:not([indeterminate])){--sbb-visual-checkbox-background-color:GrayText}}path{stroke:var(--sbb-visual-checkbox-selection-color)}
 `;let d=(()=>{let d=o(c(s)),f,p=[],m=[],h,g=[],_=[],v,y=[],b=[];return class extends d{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;f=[l(),a({reflect:!0,type:Boolean})],h=[l(),a({reflect:!0,type:Boolean})],v=[a({reflect:!0})],e(this,null,f,{kind:`accessor`,name:`checked`,static:!1,private:!1,access:{has:e=>`checked`in e,get:e=>e.checked,set:(e,t)=>{e.checked=t}},metadata:t},p,m),e(this,null,h,{kind:`accessor`,name:`indeterminate`,static:!1,private:!1,access:{has:e=>`indeterminate`in e,get:e=>e.indeterminate,set:(e,t)=>{e.indeterminate=t}},metadata:t},g,_),e(this,null,v,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},y,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-visual-checkbox`}static{this.styles=[i(u)]}#e=t(this,p,!1);get checked(){return this.#e}set checked(e){this.#e=e}#t=(t(this,m),t(this,g,!1));get indeterminate(){return this.#t}set indeterminate(e){this.#t=e}#n=(t(this,_),t(this,y,null));get size(){return this.#n}set size(e){this.#n=e}render(){return n`
       ${this.checked||this.indeterminate?n`<svg
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-            width="100%"
-            height="100%"
-          >
-            <path
-              fill="none"
-              d=${this.indeterminate?`M9 12H15`:`M8 12.3304L10.4615 15L16 9`}
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>`:r}
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+              width="100%"
+              height="100%"
+            >
+              <path
+                fill="none"
+                d=${this.indeterminate?`M9 12H15`:`M8 12.3304L10.4615 15L16 9`}
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>`:r}
     `}constructor(){super(...arguments),t(this,b)}}})();export{d as SbbVisualCheckboxElement};