@sbb-esta/lyne-elements-dev 5.4.1-dev.1785830301 → 5.4.1-dev.1785832479
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/development/train.pure.js +2 -2
- package/package.json +2 -2
- package/train.pure.js +2 -2
|
@@ -269,7 +269,7 @@ let SbbTrainFormationElement = (() => {
|
|
|
269
269
|
|
|
270
270
|
//#endregion
|
|
271
271
|
//#region src/elements/train/train-wagon-common.scss?inline
|
|
272
|
-
var train_wagon_common_default = ":host {\n --sbb-train-wagon-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: block;\n font-size: var(--sbb-train-wagon-font-size);\n letter-spacing: var(--sbb-typo-letter-spacing-text);\n outline: none !important;\n}\n\n:host([wagon-type=closed]) {\n --sbb-train-wagon-crossed-shape-display: block;\n}\n@media (forced-colors: active) {\n :host([wagon-type=closed]) {\n --sbb-train-wagon-shape-color: GrayText;\n }\n}\n\n:host(:is(:state(view-side),[state--view-side])[wagon-type=wagon-end-left]) {\n --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-4x) var(--sbb-spacing-fixed-3x);\n}\n\n:host(:is(:state(view-side),[state--view-side])[wagon-type=wagon-end-right]) {\n --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-4x);\n}\n\n:host(:is(:state(view-side),[state--view-side])[wagon-type=locomotive]) {\n --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-4x);\n}\n\n:host(:is(:state(view-top),[state--view-top])) {\n --sbb-train-wagon-border-radius: var(--sbb-border-radius-4x);\n}\n\n:host([label]) {\n --_sbb-train-wagon-attributes-max-width: var(--sbb-train-wagon-attributes-max-width);\n}\n\n:host(:not([label])) {\n --_sbb-train-wagon-attributes-justify-content: center;\n}\n\n:host(.sbb-active) {\n --sbb-train-wagon-border-width: var(--sbb-border-width-3x);\n}\n\n:host(:is(:state(action),[state--action])) {\n cursor: var(--sbb-cursor-pointer);\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(link),[state--link])) {\n --sbb-train-wagon-shape-color: LinkText;\n }\n}\n\n.sbb-train-wagon-link {\n outline: none;\n color: inherit;\n text-decoration: none;\n}\n\n.sbb-train-wagon {\n display: flex;\n flex-direction: var(--_sbb-train-formation-flex-direction-inverted);\n align-items: center;\n width: var(--_sbb-train-formation-wagon-width);\n gap: var(--sbb-train-wagon-vertical-gap);\n position: relative;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon {\n width: auto;\n height: var(--_sbb-train-formation-wagon-height);\n}\n.sbb-train-wagon::before {\n content: \"\";\n position: absolute;\n width: var(--_sbb-train-formation-wagon-width);\n height: var(--_sbb-train-formation-wagon-height);\n border-radius: var(--sbb-train-wagon-border-radius);\n}\n:host(:is(:state(button),[state--button]):focus-visible) .sbb-train-wagon::before, .sbb-train-wagon-link:focus-visible .sbb-train-wagon::before {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n\n.sbb-train-wagon__compartment {\n display: flex;\n flex-direction: var(--_sbb-train-formation-flex-direction);\n justify-content: center;\n padding-inline: var(--sbb-train-wagon-padding-inline);\n mask-image: var(--_sbb-train-wagon-clip-shape-compartment);\n transition: background-color var(--sbb-train-wagon-transition-duration) var(--sbb-animation-easing);\n}\n@media (any-hover: hover) {\n :host(:is(:state(action),[state--action]):hover) .sbb-train-wagon__compartment {\n background-color: var(--sbb-train-wagon-background-color-hover);\n }\n}\n:host(:is(:state(action),[state--action]):is(:active, :is(:state(active),[state--active]))) .sbb-train-wagon__compartment {\n background-color: var(--sbb-train-wagon-background-color-active);\n}\n.sbb-train-wagon__compartment:has(.sbb-train-wagon__occupancy):has(.sbb-train-wagon__class) {\n justify-content: space-between;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__compartment {\n padding-inline: 0;\n padding-block: var(--sbb-train-wagon-padding-inline);\n}\n\n.sbb-train-wagon__compartment,\n.sbb-train-wagon__main-icon {\n width: var(--_sbb-train-formation-wagon-width);\n height: var(--_sbb-train-formation-wagon-height);\n}\n\n.sbb-train-wagon__shape {\n position: absolute;\n inset: 0;\n width: var(--sbb-train-formation-wagon-dimension-long);\n height: var(--sbb-train-formation-wagon-dimension-short);\n transform-origin: 0 0;\n will-change: transform;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__shape {\n rotate: -90deg;\n transform: scale(-1, 1);\n}\n\n.sbb-train-wagon__shape {\n mask-image: var(--_sbb-train-wagon-clip-shape);\n pointer-events: none;\n fill: none;\n stroke: var(--sbb-train-wagon-shape-color);\n stroke-width: calc(var(--sbb-train-wagon-border-width) * 2);\n}\n\n.sbb-train-wagon__main-icon {\n --sbb-icon-svg-height: var(--sbb-train-wagon-main-icon-height);\n position: absolute;\n inset: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.sbb-train-wagon__shape-closed {\n display: var(--sbb-train-wagon-crossed-shape-display, none);\n stroke-width: var(--sbb-border-width-1x);\n}\n\n.sbb-train-wagon__occupancy,\n.sbb-train-wagon__class {\n height: var(--_sbb-train-formation-wagon-height);\n flex-direction: var(--_sbb-train-formation-flex-direction);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__occupancy,\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__class {\n height: auto;\n width: var(--_sbb-train-formation-wagon-width);\n}\n\n.sbb-train-wagon__occupancy {\n --sbb-icon-svg-height: var(--sbb-train-wagon-occupancy-height);\n grid-area: occupancy;\n}\n\n.sbb-train-wagon__class {\n gap: 0.0625rem;\n order: 1;\n}\n\n.sbb-train-wagon__class-entry {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--sbb-train-wagon-class-dimension);\n height: var(--sbb-train-wagon-class-dimension);\n border: var(--sbb-train-wagon-class-border);\n background-color: var(--sbb-train-wagon-class-background-color);\n border-radius: var(--sbb-train-wagon-class-border-radius);\n font-weight: var(--sbb-train-wagon-class-font-weight);\n color: var(--sbb-train-wagon-class-color);\n position: relative;\n line-height: 1;\n}\n.sbb-train-wagon__class-entry.first::before {\n content: \"\";\n position: absolute;\n background-color: var(--sbb-train-wagon-class-first-color);\n border-end-end-radius: var(--sbb-train-wagon-class-first-border-radius);\n}\n:host(:not(:is(:state(orientation-vertical),[state--orientation-vertical]))) .sbb-train-wagon__class-entry.first::before {\n height: var(--sbb-train-wagon-class-first-thickness);\n width: var(--sbb-train-wagon-class-dimension);\n inset: calc(-0.5 * (var(--_sbb-train-formation-wagon-height) - var(--sbb-train-wagon-class-dimension)) + var(--sbb-train-wagon-border-width) - var(--sbb-train-wagon-class-border-width)) 0 auto calc(-1 * var(--sbb-train-wagon-class-border-width));\n border-end-start-radius: var(--sbb-train-wagon-class-first-border-radius);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__class-entry.first::before {\n width: var(--sbb-train-wagon-class-first-thickness);\n height: var(--sbb-train-wagon-class-dimension);\n inset: calc(-1 * var(--sbb-train-wagon-class-border-width)) auto 0 calc(-0.5 * (var(--_sbb-train-formation-wagon-width) - var(--sbb-train-wagon-class-dimension)) + var(--sbb-train-wagon-border-width) - var(--sbb-train-wagon-class-border-width));\n border-start-end-radius: var(--sbb-train-wagon-class-first-border-radius);\n}\n\n.sbb-train-wagon__information-wrapper {\n display: flex;\n align-items: start;\n flex-direction: var(--_sbb-train-formation-flex-direction);\n gap: var(--sbb-train-wagon-information-gap);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__information-wrapper {\n min-width: var(--sbb-train-wagon-information-min-width);\n}\n.sbb-train-wagon__information-wrapper[hidden] {\n display: none;\n}\n\n:is(.sbb-train-wagon__label, .sbb-train-wagon__label-divider) {\n margin-block-start: calc(0.5 * (1em * var(--sbb-typo-line-height-text) - var(--sbb-train-wagon-font-size)));\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) :is(.sbb-train-wagon__label, .sbb-train-wagon__label-divider) {\n margin-block-start: 0;\n}\n\n.sbb-train-wagon__label {\n line-height: 1;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__label {\n max-width: var(--sbb-train-wagon-information-min-width);\n width: 100%;\n text-align: center;\n}\n\n.sbb-train-wagon__label-divider {\n height: var(--sbb-train-wagon-font-size);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__label-divider {\n height: auto;\n width: var(--sbb-train-wagon-font-size);\n margin-inline-start: calc(0.5 * (var(--sbb-train-wagon-information-min-width) - var(--sbb-train-wagon-font-size)));\n}\n\n.sbb-train-wagon__attribute-icon-list {\n --sbb-icon-svg-height: var(--sbb-train-wagon-attribute-icon-height);\n display: flex;\n justify-content: var(--_sbb-train-wagon-attributes-justify-content, start);\n flex-wrap: wrap;\n gap: var(--sbb-train-wagon-attribute-icon-gap);\n color: var(--sbb-train-wagon-attribute-icon-color);\n padding-block-start: calc(0.5 * (1em * var(--sbb-typo-line-height-text) - var(--sbb-train-wagon-attribute-icon-height)));\n max-width: var(--_sbb-train-wagon-attributes-max-width);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__attribute-icon-list {\n max-width: calc(var(--_sbb-train-wagon-attributes-icon-columns) * var(--sbb-train-wagon-attributes-mean-width));\n max-height: calc(var(--_sbb-train-wagon-attributes-icon-rows, 3) * var(--sbb-train-wagon-attribute-icon-height) + (var(--_sbb-train-wagon-attributes-icon-rows, 3) - 1) * var(--sbb-train-wagon-attribute-icon-gap));\n padding-block-start: 0;\n justify-content: center;\n width: 100%;\n}\n\n.sbb-train-wagon__attribute-icon-list > :is(li, span) {\n display: inline-flex;\n}\n";
|
|
272
|
+
var train_wagon_common_default = ":host {\n --sbb-train-wagon-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: block;\n font-size: var(--sbb-train-wagon-font-size);\n letter-spacing: var(--sbb-typo-letter-spacing-text);\n outline: none !important;\n}\n\n:host([wagon-type=closed]) {\n --sbb-train-wagon-crossed-shape-display: block;\n}\n@media (forced-colors: active) {\n :host([wagon-type=closed]) {\n --sbb-train-wagon-shape-color: GrayText;\n }\n}\n\n:host(:is(:state(view-side),[state--view-side])[wagon-type=wagon-end-left]) {\n --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-4x) var(--sbb-spacing-fixed-3x);\n}\n\n:host(:is(:state(view-side),[state--view-side])[wagon-type=wagon-end-right]) {\n --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-4x);\n}\n\n:host(:is(:state(view-side),[state--view-side])[wagon-type=locomotive]) {\n --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-4x);\n}\n\n:host(:is(:state(view-top),[state--view-top])) {\n --sbb-train-wagon-border-radius: var(--sbb-border-radius-4x);\n}\n\n:host([label]) {\n --_sbb-train-wagon-attributes-max-width: var(--sbb-train-wagon-attributes-max-width);\n}\n\n:host(:not([label])) {\n --_sbb-train-wagon-attributes-justify-content: center;\n}\n\n:host(.sbb-active) {\n --sbb-train-wagon-border-width: var(--sbb-border-width-3x);\n}\n\n:host(:is(:state(action),[state--action])) {\n cursor: var(--sbb-cursor-pointer);\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(link),[state--link])) {\n --sbb-train-wagon-shape-color: LinkText;\n }\n}\n\n.sbb-train-wagon-link {\n outline: none;\n color: inherit;\n text-decoration: none;\n}\n\n.sbb-train-wagon {\n display: flex;\n flex-direction: var(--_sbb-train-formation-flex-direction-inverted);\n align-items: center;\n width: var(--_sbb-train-formation-wagon-width);\n gap: var(--sbb-train-wagon-vertical-gap);\n position: relative;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon {\n width: auto;\n height: var(--_sbb-train-formation-wagon-height);\n}\n.sbb-train-wagon::before {\n content: \"\";\n position: absolute;\n width: var(--_sbb-train-formation-wagon-width);\n height: var(--_sbb-train-formation-wagon-height);\n border-radius: var(--sbb-train-wagon-border-radius);\n}\n:host(:is(:state(button),[state--button]):focus-visible) .sbb-train-wagon::before, .sbb-train-wagon-link:focus-visible .sbb-train-wagon::before {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n\n.sbb-train-wagon__compartment {\n display: flex;\n flex-direction: var(--_sbb-train-formation-flex-direction);\n justify-content: center;\n padding-inline: var(--sbb-train-wagon-padding-inline);\n mask-image: var(--_sbb-train-wagon-clip-shape-compartment);\n transition: background-color var(--sbb-train-wagon-transition-duration) var(--sbb-animation-easing);\n}\n@media (any-hover: hover) {\n :host(:is(:state(action),[state--action]):hover) .sbb-train-wagon__compartment {\n background-color: var(--sbb-train-wagon-background-color-hover);\n }\n}\n:host(:is(:state(action),[state--action]):is(:active, :is(:state(active),[state--active]))) .sbb-train-wagon__compartment {\n background-color: var(--sbb-train-wagon-background-color-active);\n}\n.sbb-train-wagon__compartment:has(.sbb-train-wagon__occupancy):has(.sbb-train-wagon__class) {\n justify-content: space-between;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__compartment {\n padding-inline: 0;\n padding-block: var(--sbb-train-wagon-padding-inline);\n}\n\n.sbb-train-wagon__compartment,\n.sbb-train-wagon__main-icon {\n width: var(--_sbb-train-formation-wagon-width);\n height: var(--_sbb-train-formation-wagon-height);\n}\n\n.sbb-train-wagon__shape {\n position: absolute;\n inset: 0;\n width: var(--sbb-train-formation-wagon-dimension-long);\n height: var(--sbb-train-formation-wagon-dimension-short);\n transform-origin: 0 0;\n will-change: transform;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__shape {\n rotate: -90deg;\n scale: -1 1;\n}\n\n.sbb-train-wagon__shape {\n mask-image: var(--_sbb-train-wagon-clip-shape);\n pointer-events: none;\n fill: none;\n stroke: var(--sbb-train-wagon-shape-color);\n stroke-width: calc(var(--sbb-train-wagon-border-width) * 2);\n}\n\n.sbb-train-wagon__main-icon {\n --sbb-icon-svg-height: var(--sbb-train-wagon-main-icon-height);\n position: absolute;\n inset: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.sbb-train-wagon__shape-closed {\n display: var(--sbb-train-wagon-crossed-shape-display, none);\n stroke-width: var(--sbb-border-width-1x);\n}\n\n.sbb-train-wagon__occupancy,\n.sbb-train-wagon__class {\n height: var(--_sbb-train-formation-wagon-height);\n flex-direction: var(--_sbb-train-formation-flex-direction);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__occupancy,\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__class {\n height: auto;\n width: var(--_sbb-train-formation-wagon-width);\n}\n\n.sbb-train-wagon__occupancy {\n --sbb-icon-svg-height: var(--sbb-train-wagon-occupancy-height);\n grid-area: occupancy;\n}\n\n.sbb-train-wagon__class {\n gap: 0.0625rem;\n order: 1;\n}\n\n.sbb-train-wagon__class-entry {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--sbb-train-wagon-class-dimension);\n height: var(--sbb-train-wagon-class-dimension);\n border: var(--sbb-train-wagon-class-border);\n background-color: var(--sbb-train-wagon-class-background-color);\n border-radius: var(--sbb-train-wagon-class-border-radius);\n font-weight: var(--sbb-train-wagon-class-font-weight);\n color: var(--sbb-train-wagon-class-color);\n position: relative;\n line-height: 1;\n}\n.sbb-train-wagon__class-entry.first::before {\n content: \"\";\n position: absolute;\n background-color: var(--sbb-train-wagon-class-first-color);\n border-end-end-radius: var(--sbb-train-wagon-class-first-border-radius);\n}\n:host(:not(:is(:state(orientation-vertical),[state--orientation-vertical]))) .sbb-train-wagon__class-entry.first::before {\n height: var(--sbb-train-wagon-class-first-thickness);\n width: var(--sbb-train-wagon-class-dimension);\n inset: calc(-0.5 * (var(--_sbb-train-formation-wagon-height) - var(--sbb-train-wagon-class-dimension)) + var(--sbb-train-wagon-border-width) - var(--sbb-train-wagon-class-border-width)) 0 auto calc(-1 * var(--sbb-train-wagon-class-border-width));\n border-end-start-radius: var(--sbb-train-wagon-class-first-border-radius);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__class-entry.first::before {\n width: var(--sbb-train-wagon-class-first-thickness);\n height: var(--sbb-train-wagon-class-dimension);\n inset: calc(-1 * var(--sbb-train-wagon-class-border-width)) auto 0 calc(-0.5 * (var(--_sbb-train-formation-wagon-width) - var(--sbb-train-wagon-class-dimension)) + var(--sbb-train-wagon-border-width) - var(--sbb-train-wagon-class-border-width));\n border-start-end-radius: var(--sbb-train-wagon-class-first-border-radius);\n}\n\n.sbb-train-wagon__information-wrapper {\n display: flex;\n align-items: start;\n flex-direction: var(--_sbb-train-formation-flex-direction);\n gap: var(--sbb-train-wagon-information-gap);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__information-wrapper {\n min-width: var(--sbb-train-wagon-information-min-width);\n}\n.sbb-train-wagon__information-wrapper[hidden] {\n display: none;\n}\n\n:is(.sbb-train-wagon__label, .sbb-train-wagon__label-divider) {\n margin-block-start: calc(0.5 * (1em * var(--sbb-typo-line-height-text) - var(--sbb-train-wagon-font-size)));\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) :is(.sbb-train-wagon__label, .sbb-train-wagon__label-divider) {\n margin-block-start: 0;\n}\n\n.sbb-train-wagon__label {\n line-height: 1;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__label {\n max-width: var(--sbb-train-wagon-information-min-width);\n width: 100%;\n text-align: center;\n}\n\n.sbb-train-wagon__label-divider {\n height: var(--sbb-train-wagon-font-size);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__label-divider {\n height: auto;\n width: var(--sbb-train-wagon-font-size);\n margin-inline-start: calc(0.5 * (var(--sbb-train-wagon-information-min-width) - var(--sbb-train-wagon-font-size)));\n}\n\n.sbb-train-wagon__attribute-icon-list {\n --sbb-icon-svg-height: var(--sbb-train-wagon-attribute-icon-height);\n display: flex;\n justify-content: var(--_sbb-train-wagon-attributes-justify-content, start);\n flex-wrap: wrap;\n gap: var(--sbb-train-wagon-attribute-icon-gap);\n color: var(--sbb-train-wagon-attribute-icon-color);\n padding-block-start: calc(0.5 * (1em * var(--sbb-typo-line-height-text) - var(--sbb-train-wagon-attribute-icon-height)));\n max-width: var(--_sbb-train-wagon-attributes-max-width);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__attribute-icon-list {\n max-width: calc(var(--_sbb-train-wagon-attributes-icon-columns) * var(--sbb-train-wagon-attributes-mean-width));\n max-height: calc(var(--_sbb-train-wagon-attributes-icon-rows, 3) * var(--sbb-train-wagon-attribute-icon-height) + (var(--_sbb-train-wagon-attributes-icon-rows, 3) - 1) * var(--sbb-train-wagon-attribute-icon-gap));\n padding-block-start: 0;\n justify-content: center;\n width: 100%;\n}\n\n.sbb-train-wagon__attribute-icon-list > :is(li, span) {\n display: inline-flex;\n}\n";
|
|
273
273
|
|
|
274
274
|
//#endregion
|
|
275
275
|
//#region src/elements/train/train-wagon-common.ts
|
|
@@ -743,7 +743,7 @@ var SbbTrainWagonElement = class extends SbbTrainWagonMixin(SbbElement) {
|
|
|
743
743
|
|
|
744
744
|
//#endregion
|
|
745
745
|
//#region src/elements/train/train/train.scss?inline
|
|
746
|
-
var train_default = ":host {\n --sbb-train-direction-label-spacing: var(--sbb-spacing-fixed-1x);\n --_sbb-train-direction-row-dimension: calc(\n max(var(--sbb-size-icon-ui-small), 1em * var(--sbb-typo-line-height-text))\n );\n display: flex;\n font-size: var(--sbb-text-font-size-xs);\n letter-spacing: var(--sbb-typo-letter-spacing-text);\n flex-direction: var(--_sbb-train-formation-flex-direction-inverted);\n gap: var(--sbb-train-formation-gap);\n position: relative;\n}\n:host::before {\n content: \"\";\n display: var(--_sbb-train-formation-reserve-spacing-display, none);\n height: var(--_sbb-train-direction-row-dimension);\n}\n\n:host(:is(:state(orientation-vertical),[state--orientation-vertical]))::before {\n height: auto;\n width: var(--_sbb-train-direction-row-dimension);\n}\n\n.sbb-train__wagons {\n display: flex;\n flex-direction: var(--_sbb-train-formation-flex-direction);\n gap: var(--sbb-train-formation-wagon-gap);\n}\n\n.sbb-train__direction-heading {\n display: flex;\n position: absolute;\n width: 100%;\n flex-direction: var(--_sbb-train-formation-flex-direction);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-heading {\n width: auto;\n height: 100%;\n}\n\n.sbb-train__direction-sticky-wrapper {\n position: sticky;\n inset-inline-start: 0;\n display: inline-flex;\n flex-direction: var(--_sbb-train-formation-flex-direction);\n align-items: center;\n gap: var(--sbb-train-direction-label-spacing);\n max-width: 100%;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-sticky-wrapper {\n inset-inline-start: unset;\n inset-block-start: 0;\n max-width: unset;\n max-height: 100%;\n}\n\n:host([direction=right]) .sbb-train__direction-arrow {\n
|
|
746
|
+
var train_default = ":host {\n --sbb-train-direction-label-spacing: var(--sbb-spacing-fixed-1x);\n --_sbb-train-direction-row-dimension: calc(\n max(var(--sbb-size-icon-ui-small), 1em * var(--sbb-typo-line-height-text))\n );\n display: flex;\n font-size: var(--sbb-text-font-size-xs);\n letter-spacing: var(--sbb-typo-letter-spacing-text);\n flex-direction: var(--_sbb-train-formation-flex-direction-inverted);\n gap: var(--sbb-train-formation-gap);\n position: relative;\n}\n:host::before {\n content: \"\";\n display: var(--_sbb-train-formation-reserve-spacing-display, none);\n height: var(--_sbb-train-direction-row-dimension);\n}\n\n:host(:is(:state(orientation-vertical),[state--orientation-vertical]))::before {\n height: auto;\n width: var(--_sbb-train-direction-row-dimension);\n}\n\n.sbb-train__wagons {\n display: flex;\n flex-direction: var(--_sbb-train-formation-flex-direction);\n gap: var(--sbb-train-formation-wagon-gap);\n}\n\n.sbb-train__direction-heading {\n display: flex;\n position: absolute;\n width: 100%;\n flex-direction: var(--_sbb-train-formation-flex-direction);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-heading {\n width: auto;\n height: 100%;\n}\n\n.sbb-train__direction-sticky-wrapper {\n position: sticky;\n inset-inline-start: 0;\n display: inline-flex;\n flex-direction: var(--_sbb-train-formation-flex-direction);\n align-items: center;\n gap: var(--sbb-train-direction-label-spacing);\n max-width: 100%;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-sticky-wrapper {\n inset-inline-start: unset;\n inset-block-start: 0;\n max-width: unset;\n max-height: 100%;\n}\n\n:host([direction=right]) .sbb-train__direction-arrow {\n scale: -1 1;\n order: 2;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-arrow {\n rotate: 90deg;\n}\n\n.sbb-train__direction-label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-label {\n writing-mode: sideways-lr;\n}\n";
|
|
747
747
|
|
|
748
748
|
//#endregion
|
|
749
749
|
//#region src/elements/train/train/train.component.ts
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.4.1-dev.
|
|
3
|
+
"version": "5.4.1-dev.1785832479",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/3818b0b196b1ccf3c55b906b1981d1502309ccc3"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/train.pure.js
CHANGED
|
@@ -15,7 +15,7 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbB
|
|
|
15
15
|
<div class="sbb-train-formation__trains">
|
|
16
16
|
${this.renderList({class:`sbb-train-formation__train-list`,ariaLabel:w[this._language.current]})}
|
|
17
17
|
</div>
|
|
18
|
-
`}}})();var B=`:host{--sbb-train-wagon-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));font-size:var(--sbb-train-wagon-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);display:block;outline:none!important}:host([wagon-type=closed]){--sbb-train-wagon-crossed-shape-display:block}@media (forced-colors:active){:host([wagon-type=closed]){--sbb-train-wagon-shape-color:GrayText}}:host(:is(:state(view-side),[state--view-side])[wagon-type=wagon-end-left]){--sbb-train-wagon-padding-inline:var(--sbb-spacing-fixed-4x) var(--sbb-spacing-fixed-3x)}:host(:is(:state(view-side),[state--view-side])[wagon-type=wagon-end-right]){--sbb-train-wagon-padding-inline:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-4x)}:host(:is(:state(view-side),[state--view-side])[wagon-type=locomotive]){--sbb-train-wagon-padding-inline:var(--sbb-spacing-fixed-4x)}:host(:is(:state(view-top),[state--view-top])){--sbb-train-wagon-border-radius:var(--sbb-border-radius-4x)}:host([label]){--_sbb-train-wagon-attributes-max-width:var(--sbb-train-wagon-attributes-max-width)}:host(:not([label])){--_sbb-train-wagon-attributes-justify-content:center}:host(.sbb-active){--sbb-train-wagon-border-width:var(--sbb-border-width-3x)}:host(:is(:state(action),[state--action])){cursor:var(--sbb-cursor-pointer)}@media (forced-colors:active){:host(:is(:state(link),[state--link])){--sbb-train-wagon-shape-color:LinkText}}.sbb-train-wagon-link{color:inherit;outline:none;text-decoration:none}.sbb-train-wagon{flex-direction:var(--_sbb-train-formation-flex-direction-inverted);width:var(--_sbb-train-formation-wagon-width);align-items:center;gap:var(--sbb-train-wagon-vertical-gap);display:flex;position:relative}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon{width:auto;height:var(--_sbb-train-formation-wagon-height)}.sbb-train-wagon:before{content:"";width:var(--_sbb-train-formation-wagon-width);height:var(--_sbb-train-formation-wagon-height);border-radius:var(--sbb-train-wagon-border-radius);position:absolute}:host(:is(:state(button),[state--button]):focus-visible) .sbb-train-wagon:before,.sbb-train-wagon-link:focus-visible .sbb-train-wagon:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}.sbb-train-wagon__compartment{flex-direction:var(--_sbb-train-formation-flex-direction);padding-inline:var(--sbb-train-wagon-padding-inline);mask-image:var(--_sbb-train-wagon-clip-shape-compartment);transition:background-color var(--sbb-train-wagon-transition-duration) var(--sbb-animation-easing);justify-content:center;display:flex}@media (any-hover:hover){:host(:is(:state(action),[state--action]):hover) .sbb-train-wagon__compartment{background-color:var(--sbb-train-wagon-background-color-hover)}}:host(:is(:state(action),[state--action]):is(:active,:is(:state(active),[state--active]))) .sbb-train-wagon__compartment{background-color:var(--sbb-train-wagon-background-color-active)}.sbb-train-wagon__compartment:has(.sbb-train-wagon__occupancy):has(.sbb-train-wagon__class){justify-content:space-between}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__compartment{padding-inline:0;padding-block:var(--sbb-train-wagon-padding-inline)}.sbb-train-wagon__compartment,.sbb-train-wagon__main-icon{width:var(--_sbb-train-formation-wagon-width);height:var(--_sbb-train-formation-wagon-height)}.sbb-train-wagon__shape{width:var(--sbb-train-formation-wagon-dimension-long);height:var(--sbb-train-formation-wagon-dimension-short);transform-origin:0 0;will-change:transform;position:absolute;inset:0}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__shape{
|
|
18
|
+
`}}})();var B=`:host{--sbb-train-wagon-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));font-size:var(--sbb-train-wagon-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);display:block;outline:none!important}:host([wagon-type=closed]){--sbb-train-wagon-crossed-shape-display:block}@media (forced-colors:active){:host([wagon-type=closed]){--sbb-train-wagon-shape-color:GrayText}}:host(:is(:state(view-side),[state--view-side])[wagon-type=wagon-end-left]){--sbb-train-wagon-padding-inline:var(--sbb-spacing-fixed-4x) var(--sbb-spacing-fixed-3x)}:host(:is(:state(view-side),[state--view-side])[wagon-type=wagon-end-right]){--sbb-train-wagon-padding-inline:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-4x)}:host(:is(:state(view-side),[state--view-side])[wagon-type=locomotive]){--sbb-train-wagon-padding-inline:var(--sbb-spacing-fixed-4x)}:host(:is(:state(view-top),[state--view-top])){--sbb-train-wagon-border-radius:var(--sbb-border-radius-4x)}:host([label]){--_sbb-train-wagon-attributes-max-width:var(--sbb-train-wagon-attributes-max-width)}:host(:not([label])){--_sbb-train-wagon-attributes-justify-content:center}:host(.sbb-active){--sbb-train-wagon-border-width:var(--sbb-border-width-3x)}:host(:is(:state(action),[state--action])){cursor:var(--sbb-cursor-pointer)}@media (forced-colors:active){:host(:is(:state(link),[state--link])){--sbb-train-wagon-shape-color:LinkText}}.sbb-train-wagon-link{color:inherit;outline:none;text-decoration:none}.sbb-train-wagon{flex-direction:var(--_sbb-train-formation-flex-direction-inverted);width:var(--_sbb-train-formation-wagon-width);align-items:center;gap:var(--sbb-train-wagon-vertical-gap);display:flex;position:relative}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon{width:auto;height:var(--_sbb-train-formation-wagon-height)}.sbb-train-wagon:before{content:"";width:var(--_sbb-train-formation-wagon-width);height:var(--_sbb-train-formation-wagon-height);border-radius:var(--sbb-train-wagon-border-radius);position:absolute}:host(:is(:state(button),[state--button]):focus-visible) .sbb-train-wagon:before,.sbb-train-wagon-link:focus-visible .sbb-train-wagon:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}.sbb-train-wagon__compartment{flex-direction:var(--_sbb-train-formation-flex-direction);padding-inline:var(--sbb-train-wagon-padding-inline);mask-image:var(--_sbb-train-wagon-clip-shape-compartment);transition:background-color var(--sbb-train-wagon-transition-duration) var(--sbb-animation-easing);justify-content:center;display:flex}@media (any-hover:hover){:host(:is(:state(action),[state--action]):hover) .sbb-train-wagon__compartment{background-color:var(--sbb-train-wagon-background-color-hover)}}:host(:is(:state(action),[state--action]):is(:active,:is(:state(active),[state--active]))) .sbb-train-wagon__compartment{background-color:var(--sbb-train-wagon-background-color-active)}.sbb-train-wagon__compartment:has(.sbb-train-wagon__occupancy):has(.sbb-train-wagon__class){justify-content:space-between}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__compartment{padding-inline:0;padding-block:var(--sbb-train-wagon-padding-inline)}.sbb-train-wagon__compartment,.sbb-train-wagon__main-icon{width:var(--_sbb-train-formation-wagon-width);height:var(--_sbb-train-formation-wagon-height)}.sbb-train-wagon__shape{width:var(--sbb-train-formation-wagon-dimension-long);height:var(--sbb-train-formation-wagon-dimension-short);transform-origin:0 0;will-change:transform;position:absolute;inset:0}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__shape{rotate:-90deg;scale:-1 1}.sbb-train-wagon__shape{mask-image:var(--_sbb-train-wagon-clip-shape);pointer-events:none;fill:none;stroke:var(--sbb-train-wagon-shape-color);stroke-width:calc(var(--sbb-train-wagon-border-width) * 2)}.sbb-train-wagon__main-icon{--sbb-icon-svg-height:var(--sbb-train-wagon-main-icon-height);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.sbb-train-wagon__shape-closed{display:var(--sbb-train-wagon-crossed-shape-display,none);stroke-width:var(--sbb-border-width-1x)}.sbb-train-wagon__occupancy,.sbb-train-wagon__class{height:var(--_sbb-train-formation-wagon-height);flex-direction:var(--_sbb-train-formation-flex-direction);justify-content:center;align-items:center;display:flex}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__occupancy,:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__class{height:auto;width:var(--_sbb-train-formation-wagon-width)}.sbb-train-wagon__occupancy{--sbb-icon-svg-height:var(--sbb-train-wagon-occupancy-height);grid-area:occupancy}.sbb-train-wagon__class{order:1;gap:.0625rem}.sbb-train-wagon__class-entry{width:var(--sbb-train-wagon-class-dimension);height:var(--sbb-train-wagon-class-dimension);border:var(--sbb-train-wagon-class-border);background-color:var(--sbb-train-wagon-class-background-color);border-radius:var(--sbb-train-wagon-class-border-radius);font-weight:var(--sbb-train-wagon-class-font-weight);color:var(--sbb-train-wagon-class-color);justify-content:center;align-items:center;line-height:1;display:flex;position:relative}.sbb-train-wagon__class-entry.first:before{content:"";background-color:var(--sbb-train-wagon-class-first-color);border-end-end-radius:var(--sbb-train-wagon-class-first-border-radius);position:absolute}:host(:not(:is(:state(orientation-vertical),[state--orientation-vertical]))) .sbb-train-wagon__class-entry.first:before{height:var(--sbb-train-wagon-class-first-thickness);width:var(--sbb-train-wagon-class-dimension);inset:calc(-.5 * (var(--_sbb-train-formation-wagon-height) - var(--sbb-train-wagon-class-dimension)) + var(--sbb-train-wagon-border-width) - var(--sbb-train-wagon-class-border-width)) 0 auto calc(-1 * var(--sbb-train-wagon-class-border-width));border-end-start-radius:var(--sbb-train-wagon-class-first-border-radius)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__class-entry.first:before{width:var(--sbb-train-wagon-class-first-thickness);height:var(--sbb-train-wagon-class-dimension);inset:calc(-1 * var(--sbb-train-wagon-class-border-width)) auto 0 calc(-.5 * (var(--_sbb-train-formation-wagon-width) - var(--sbb-train-wagon-class-dimension)) + var(--sbb-train-wagon-border-width) - var(--sbb-train-wagon-class-border-width));border-start-end-radius:var(--sbb-train-wagon-class-first-border-radius)}.sbb-train-wagon__information-wrapper{flex-direction:var(--_sbb-train-formation-flex-direction);align-items:start;gap:var(--sbb-train-wagon-information-gap);display:flex}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__information-wrapper{min-width:var(--sbb-train-wagon-information-min-width)}.sbb-train-wagon__information-wrapper[hidden]{display:none}:is(.sbb-train-wagon__label,.sbb-train-wagon__label-divider){margin-block-start:calc(.5 * (1em * var(--sbb-typo-line-height-text) - var(--sbb-train-wagon-font-size)))}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) :is(.sbb-train-wagon__label,.sbb-train-wagon__label-divider){margin-block-start:0}.sbb-train-wagon__label{line-height:1}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__label{max-width:var(--sbb-train-wagon-information-min-width);text-align:center;width:100%}.sbb-train-wagon__label-divider{height:var(--sbb-train-wagon-font-size)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__label-divider{height:auto;width:var(--sbb-train-wagon-font-size);margin-inline-start:calc(.5 * (var(--sbb-train-wagon-information-min-width) - var(--sbb-train-wagon-font-size)))}.sbb-train-wagon__attribute-icon-list{--sbb-icon-svg-height:var(--sbb-train-wagon-attribute-icon-height);justify-content:var(--_sbb-train-wagon-attributes-justify-content,start);gap:var(--sbb-train-wagon-attribute-icon-gap);color:var(--sbb-train-wagon-attribute-icon-color);max-width:var(--_sbb-train-wagon-attributes-max-width);flex-wrap:wrap;padding-block-start:calc(.5 * (1em * var(--sbb-typo-line-height-text) - var(--sbb-train-wagon-attribute-icon-height)));display:flex}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__attribute-icon-list{max-width:calc(var(--_sbb-train-wagon-attributes-icon-columns) * var(--sbb-train-wagon-attributes-mean-width));max-height:calc(var(--_sbb-train-wagon-attributes-icon-rows,3) * var(--sbb-train-wagon-attribute-icon-height) + (var(--_sbb-train-wagon-attributes-icon-rows,3) - 1) * var(--sbb-train-wagon-attribute-icon-gap));justify-content:center;width:100%;padding-block-start:0}.sbb-train-wagon__attribute-icon-list>:is(li,span){display:inline-flex}
|
|
19
19
|
`;const V={couchette:`sa-cc`,sleeping:`sa-wl`,restaurant:`sa-wr`},H={wagon:{side:`M12 0H72A12 12 0 0184 12V24A12 12 0 0172 36H12A12 12 0 010 24V12A12 12 0 0112 0Z`,top:`M8 0A8 8 0 000 8V28a8 8 0 008 8H76a8 8 0 008-8V8A8 8 0 0076 0H8Z`},locomotive:{side:`M7.7 8.6C10.5 3.6 16 0 22 0H62c6 0 11.5 3.6 14.3 8.6l5.1 9C85.9 25.6 80 36 71 36H13C4 36-1.9 25.6 2.6 17.6l5.1-9Z`,top:`M66 0H18C8 0 0 8 0 18S8 36 18 36H66c10 0 18-8 18-18S76 0 66 0Z`},"wagon-end-left":{side:`M7.7 8.6A16 16 0 0122 0H72c6 0 12 6 12 12V24c0 6-6 12-12 12H13C3.8 36-2 26.1 2.6 18.1Z`,top:`M76 0H18C8.25 0 .5 8.25.5 18S8 36 18 36H76c4 0 8-4 8-8V8c0-4-4-8-8-8Z`},"wagon-end-right":{side:`M76.3 8.6A16 16 0 0062 0H12C6 0 0 6 0 13v11c0 6 6 12 12 12h58.4c8.6 0 15-9.9 10.4-17.9z`,top:`M66 0H8C4 0 0 4 0 8V28c0 4 4 8 8 8H66c9.75 0 17.5-8.25 17.5-18S76 0 66 0Z`}},U=e=>(()=>{let i=F(c(e)),a,s=[],f=[],S,C=[],w=[],T,j=[],N=[],I,L=[],R=[],z,U=[],W=[],G,K=[],q=[],J,Y=[],X=[],Z,Q=[],$=[];return class extends i{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;a=[k({attribute:`wagon-type`,reflect:!0})],S=[k()],T=[u(),d(e=>e._sectorChanged()),k({reflect:!0,converter:E})],I=[k({attribute:`blocked-passage`})],z=[k({attribute:`wagon-class`})],G=[u(),k({reflect:!0,converter:E})],J=[u(),k({attribute:`additional-accessibility-text`})],Z=[A()],D(this,null,a,{kind:`accessor`,name:`wagonType`,static:!1,private:!1,access:{has:e=>`wagonType`in e,get:e=>e.wagonType,set:(e,t)=>{e.wagonType=t}},metadata:e},s,f),D(this,null,S,{kind:`accessor`,name:`occupancy`,static:!1,private:!1,access:{has:e=>`occupancy`in e,get:e=>e.occupancy,set:(e,t)=>{e.occupancy=t}},metadata:e},C,w),D(this,null,T,{kind:`accessor`,name:`sector`,static:!1,private:!1,access:{has:e=>`sector`in e,get:e=>e.sector,set:(e,t)=>{e.sector=t}},metadata:e},j,N),D(this,null,I,{kind:`accessor`,name:`blockedPassage`,static:!1,private:!1,access:{has:e=>`blockedPassage`in e,get:e=>e.blockedPassage,set:(e,t)=>{e.blockedPassage=t}},metadata:e},L,R),D(this,null,z,{kind:`accessor`,name:`wagonClass`,static:!1,private:!1,access:{has:e=>`wagonClass`in e,get:e=>e.wagonClass,set:(e,t)=>{e.wagonClass=t}},metadata:e},U,W),D(this,null,G,{kind:`accessor`,name:`label`,static:!1,private:!1,access:{has:e=>`label`in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:e},K,q),D(this,null,J,{kind:`accessor`,name:`additionalAccessibilityText`,static:!1,private:!1,access:{has:e=>`additionalAccessibilityText`in e,get:e=>e.additionalAccessibilityText,set:(e,t)=>{e.additionalAccessibilityText=t}},metadata:e},Y,X),D(this,null,Z,{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},Q,$),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementDependencies=[P,ae,ie]}static{this.styles=[r(B)]}#e;get wagonType(){return this.#e}set wagonType(e){this.#e=e}#t;get occupancy(){return this.#t}set occupancy(e){this.#t=e}#n;get sector(){return this.#n}set sector(e){this.#n=e}#r;get blockedPassage(){return this.#r}set blockedPassage(e){this.#r=e}#i;get wagonClass(){return this.#i}set wagonClass(e){this.#i=e}#a;get label(){return this.#a}set label(e){this.#a=e}#o;get additionalAccessibilityText(){return this.#o}set additionalAccessibilityText(e){this.#o=e}#s;get _view(){return this.#s}set _view(e){this.#s=e}constructor(...e){super(...e),this.#e=O(this,s,`wagon`),this.listChildLocalNames=(O(this,f),[`sbb-icon`]),this.#t=O(this,C,null),this.#n=(O(this,w),O(this,j,``)),this.#r=(O(this,N),O(this,L,`none`)),this.#i=(O(this,R),O(this,U,null)),this.#a=(O(this,W),O(this,K,``)),this.#o=(O(this,q),O(this,Y,``)),this.#s=(O(this,X),O(this,Q,null)),this._language=(O(this,$),new o(this)),this._clipStyleSheet=null,this.addController(new l(this,()=>this.closest(`sbb-train-formation`),{view:e=>{this._view&&this.internals.states.delete(`view-${this._view}`),this._view=e.view,this._view&&this.internals.states.add(`view-${this._view}`)}}))}createRenderRoot(){let e=super.createRenderRoot();return t||(this._clipStyleSheet=new CSSStyleSheet,e.adoptedStyleSheets.push(this._clipStyleSheet)),e}_sectorChanged(){this.dispatchEvent(new Event(`sectorchange`,{bubbles:!0,composed:!0}))}_wagonTypeLabel(){switch(this.wagonType){case`closed`:return _[this._language.current];case`locomotive`:return y[this._language.current];case`couchette`:return v[this._language.current];case`sleeping`:return ee[this._language.current];case`restaurant`:return b[this._language.current];default:return te[this._language.current]}}_wagonShape(){let e=this._view??`side`;return[`wagon`,`couchette`,`sleeping`,`restaurant`,`closed`].includes(this.wagonType)?H.wagon[e]:H[this.wagonType][e]??H.wagon[e]}_classLabel(){switch(this.wagonClass){case`1`:return g.first[this._language.current];case`2`:return g.second[this._language.current];case`1-2`:return`${g.first[this._language.current]} ${m[this._language.current]} ${g.second[this._language.current]}`;case`2-1`:return`${g.second[this._language.current]} ${m[this._language.current]} ${g.first[this._language.current]}`;default:return``}}renderTemplate(){let e=this.wagonType===`wagon-end-left`&&this.blockedPassage===`none`?`previous`:this.wagonType===`wagon-end-right`&&this.blockedPassage===`none`?`next`:this.blockedPassage??`none`,t=e!==`none`,r=+!!this.sector+ +!!this.label+ +(!!this.wagonClass&&this.wagonType!==`closed`)+ +(!!this.occupancy&&this.wagonType!==`closed`)+ +t,i=`${x[this._language.current]}, ${this.sector}`,a=`${ne[this._language.current]}, ${this.label}`,o=M`<span class="sbb-screen-reader-only">
|
|
20
20
|
${this._classLabel()}
|
|
21
21
|
</span>
|
|
@@ -88,7 +88,7 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbB
|
|
|
88
88
|
${this.renderList({class:`sbb-train-wagon__attribute-icon-list`,ariaLabel:p[this._language.current]})}
|
|
89
89
|
</span>
|
|
90
90
|
</div>
|
|
91
|
-
`}}})();var W=class extends U(i){static{this.elementName=`sbb-train-wagon-button`}},G=class extends U(s){static{this.elementName=`sbb-train-wagon-link`}},K=class extends U(a){static{this.elementName=`sbb-train-wagon`}render(){return this.renderTemplate()}},q=`:host{--sbb-train-direction-label-spacing:var(--sbb-spacing-fixed-1x);--_sbb-train-direction-row-dimension:calc(max(var(--sbb-size-icon-ui-small), 1em * var(--sbb-typo-line-height-text)));font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-typo-letter-spacing-text);flex-direction:var(--_sbb-train-formation-flex-direction-inverted);gap:var(--sbb-train-formation-gap);display:flex;position:relative}:host:before{content:"";display:var(--_sbb-train-formation-reserve-spacing-display,none);height:var(--_sbb-train-direction-row-dimension)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])):before{height:auto;width:var(--_sbb-train-direction-row-dimension)}.sbb-train__wagons{flex-direction:var(--_sbb-train-formation-flex-direction);gap:var(--sbb-train-formation-wagon-gap);display:flex}.sbb-train__direction-heading{flex-direction:var(--_sbb-train-formation-flex-direction);width:100%;display:flex;position:absolute}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-heading{width:auto;height:100%}.sbb-train__direction-sticky-wrapper{flex-direction:var(--_sbb-train-formation-flex-direction);align-items:center;gap:var(--sbb-train-direction-label-spacing);max-width:100%;display:inline-flex;position:sticky;inset-inline-start:0}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-sticky-wrapper{max-width:unset;max-height:100%;inset-block-start:0;inset-inline-start:unset}:host([direction=right]) .sbb-train__direction-arrow{order:2;
|
|
91
|
+
`}}})();var W=class extends U(i){static{this.elementName=`sbb-train-wagon-button`}},G=class extends U(s){static{this.elementName=`sbb-train-wagon-link`}},K=class extends U(a){static{this.elementName=`sbb-train-wagon`}render(){return this.renderTemplate()}},q=`:host{--sbb-train-direction-label-spacing:var(--sbb-spacing-fixed-1x);--_sbb-train-direction-row-dimension:calc(max(var(--sbb-size-icon-ui-small), 1em * var(--sbb-typo-line-height-text)));font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-typo-letter-spacing-text);flex-direction:var(--_sbb-train-formation-flex-direction-inverted);gap:var(--sbb-train-formation-gap);display:flex;position:relative}:host:before{content:"";display:var(--_sbb-train-formation-reserve-spacing-display,none);height:var(--_sbb-train-direction-row-dimension)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])):before{height:auto;width:var(--_sbb-train-direction-row-dimension)}.sbb-train__wagons{flex-direction:var(--_sbb-train-formation-flex-direction);gap:var(--sbb-train-formation-wagon-gap);display:flex}.sbb-train__direction-heading{flex-direction:var(--_sbb-train-formation-flex-direction);width:100%;display:flex;position:absolute}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-heading{width:auto;height:100%}.sbb-train__direction-sticky-wrapper{flex-direction:var(--_sbb-train-formation-flex-direction);align-items:center;gap:var(--sbb-train-direction-label-spacing);max-width:100%;display:inline-flex;position:sticky;inset-inline-start:0}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-sticky-wrapper{max-width:unset;max-height:100%;inset-block-start:0;inset-inline-start:unset}:host([direction=right]) .sbb-train__direction-arrow{order:2;scale:-1 1}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-arrow{rotate:90deg}.sbb-train__direction-label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-label{writing-mode:sideways-lr}
|
|
92
92
|
`;let J=(()=>{let e=F(c(a)),t,i=[],s=[],l,f=[],p=[],m,h=[],g=[],_,v=[],y=[],b,x=[],S=[];return class extends e{constructor(){super(...arguments),this.listChildLocalNames=[`sbb-train-wagon`,`sbb-train-wagon-button`,`sbb-train-wagon-link`,`sbb-train-blocked-passage`],this.#e=O(this,i,``),this.#t=(O(this,s),O(this,f,`6`)),this.#n=(O(this,p),O(this,h,``)),this.#r=(O(this,g),O(this,v,``)),this.#i=(O(this,y),O(this,x,`left`)),this._language=(O(this,S),new o(this))}static{let n=typeof Symbol==`function`&&Symbol.metadata?Object.create(e[Symbol.metadata]??null):void 0;t=[u(),d(e=>{e.dispatchEvent(new Event(`directionlabelchange`,{bubbles:!0,composed:!0}))}),k({attribute:`direction-label`,reflect:!0,converter:E})],l=[k({attribute:`direction-label-level`})],m=[u(),k()],_=[u(),k({attribute:`accessibility-label`})],b=[k({reflect:!0})],D(this,null,t,{kind:`accessor`,name:`directionLabel`,static:!1,private:!1,access:{has:e=>`directionLabel`in e,get:e=>e.directionLabel,set:(e,t)=>{e.directionLabel=t}},metadata:n},i,s),D(this,null,l,{kind:`accessor`,name:`directionLabelLevel`,static:!1,private:!1,access:{has:e=>`directionLabelLevel`in e,get:e=>e.directionLabelLevel,set:(e,t)=>{e.directionLabelLevel=t}},metadata:n},f,p),D(this,null,m,{kind:`accessor`,name:`station`,static:!1,private:!1,access:{has:e=>`station`in e,get:e=>e.station,set:(e,t)=>{e.station=t}},metadata:n},h,g),D(this,null,_,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:n},v,y),D(this,null,b,{kind:`accessor`,name:`direction`,static:!1,private:!1,access:{has:e=>`direction`in e,get:e=>e.direction,set:(e,t)=>{e.direction=t}},metadata:n},x,S),n&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:n})}static{this.elementName=`sbb-train`}static{this.elementDependencies=[P]}static{this.styles=[r(q)]}#e;get directionLabel(){return this.#e}set directionLabel(e){this.#e=e}#t;get directionLabelLevel(){return this.#t}set directionLabelLevel(e){this.#t=e}#n;get station(){return this.#n}set station(e){this.#n=e}#r;get accessibilityLabel(){return this.#r}set accessibilityLabel(e){this.#r=e}#i;get direction(){return this.#i}set direction(e){this.#i=e}_getDirectionAriaLabel(){let e=[C[this._language.current]];return this.directionLabel&&this.station&&e.push(`${this.directionLabel} ${this.station}`),this.accessibilityLabel&&e.push(this.accessibilityLabel),`${e.join(`, `)}.`}willUpdate(e){super.willUpdate(e),e.has(`listChildren`)&&this.dispatchEvent(new Event(`trainslotchange`,{bubbles:!0}))}render(){let e=`h${this.directionLabelLevel}`;return M`
|
|
93
93
|
<${N(e)} class="sbb-screen-reader-only">
|
|
94
94
|
${this._getDirectionAriaLabel()}
|