@sbb-esta/lyne-elements-experimental 2.10.1 → 2.11.1

package/seat-reservation/seat-reservation/seat-reservation-scoped/seat-reservation-scoped.component.js

@@ -0,0 +1,107 @@
+var N = (s) => {
+  throw TypeError(s);
+};
+var Q = (s, a, n) => a.has(s) || N("Cannot " + n);
+var o = (s, a, n) => (Q(s, a, "read from private field"), n ? n.call(s) : a.get(s)), h = (s, a, n) => a.has(s) ? N("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, n), d = (s, a, n, c) => (Q(s, a, "write to private field"), c ? c.call(s, n) : a.set(s, n), n);
+import { __esDecorate as _, __runInitializers as r } from "tslib";
+import { forceType as p } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { css as W, LitElement as X, html as V } from "lit";
+import { customElement as Y, property as b } from "lit/decorators.js";
+const Z = W`*,:before,:after{box-sizing:border-box}:host{display:block}:host .coach-border,:host .coach-wrapper,:host .graphical-element{width:var(--sbb-seat-reservation-scoped-width);height:var(--sbb-seat-reservation-scoped-height);inset-block-start:var(--sbb-seat-reservation-scoped-inset-block-start);inset-inline-start:var(--sbb-seat-reservation-scoped-inset-inline-start);z-index:var(--sbb-seat-reservation-scoped-z-index)}:host .coach-border,:host .graphical-element ::slotted(*),:host .graphical-element{position:absolute}:host .coach-border{z-index:0}`;
+let lt = (() => {
+  var I, u, m, g, z, f, S, l;
+  let s = [Y("sbb-seat-reservation-scoped")], a, n = [], c, v = X, x, k = [], y = [], w, B = [], C = [], $, E = [], D = [], j, O = [], T = [], U, L = [], P = [], R, q = [], A = [], F, G = [], H = [];
+  return l = class extends v {
+    constructor() {
+      super(...arguments);
+      h(this, I, r(this, k, ""));
+      h(this, u, (r(this, y), r(this, B, "")));
+      h(this, m, (r(this, C), r(this, E, "")));
+      h(this, g, (r(this, D), r(this, O, "")));
+      h(this, z, (r(this, T), r(this, L, "")));
+      h(this, f, (r(this, P), r(this, q, "")));
+      h(this, S, (r(this, A), r(this, G, "")));
+      r(this, H);
+    }
+    /** Inset block start in pixels (without unit) */
+    get insetBlockStart() {
+      return o(this, I);
+    }
+    set insetBlockStart(e) {
+      d(this, I, e);
+    }
+    /** Inset inline start in pixels (without unit) */
+    get insetInlineStart() {
+      return o(this, u);
+    }
+    set insetInlineStart(e) {
+      d(this, u, e);
+    }
+    /** Width of the scoped element in pixels (without unit) */
+    get width() {
+      return o(this, m);
+    }
+    set width(e) {
+      d(this, m, e);
+    }
+    /** Height of the scoped element in pixels (without unit) */
+    get height() {
+      return o(this, g);
+    }
+    set height(e) {
+      d(this, g, e);
+    }
+    /** Z-index of the scoped element */
+    get zIndex() {
+      return o(this, z);
+    }
+    set zIndex(e) {
+      d(this, z, e);
+    }
+    /** Cell id of the scoped element, if it is used in a table */
+    get cellId() {
+      return o(this, f);
+    }
+    set cellId(e) {
+      d(this, f, e);
+    }
+    /** Scoped classes for the scoped element */
+    get scopedClasses() {
+      return o(this, S);
+    }
+    set scopedClasses(e) {
+      d(this, S, e);
+    }
+    willUpdate(e) {
+      var t, i, J, K, M;
+      super.willUpdate(e), e.has("width") && ((t = this.style) == null || t.setProperty("--sbb-seat-reservation-scoped-width", `${this.width}`)), e.has("height") && ((i = this.style) == null || i.setProperty("--sbb-seat-reservation-scoped-height", `${this.height}`)), e.has("insetBlockStart") && ((J = this.style) == null || J.setProperty("--sbb-seat-reservation-scoped-inset-block-start", `${this.insetBlockStart}`)), e.has("insetInlineStart") && ((K = this.style) == null || K.setProperty("--sbb-seat-reservation-scoped-inset-inline-start", `${this.insetInlineStart}`)), e.has("zIndex") && ((M = this.style) == null || M.setProperty("--sbb-seat-reservation-scoped-z-index", `${this.zIndex}`));
+    }
+    render() {
+      return this.cellId ? V`<td id="${this.cellId}" class="${this.scopedClasses}">
+        <slot></slot>
+      </td>` : V`<div class="${this.scopedClasses}">
+        <slot></slot>
+      </div>`;
+    }
+  }, I = new WeakMap(), u = new WeakMap(), m = new WeakMap(), g = new WeakMap(), z = new WeakMap(), f = new WeakMap(), S = new WeakMap(), c = l, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+    x = [p(), b({ attribute: "inset-block-start" })], w = [p(), b({ attribute: "inset-inline-start" })], $ = [p(), b({ attribute: "width" })], j = [p(), b({ attribute: "height" })], U = [p(), b({ attribute: "z-index" })], R = [p(), b({ attribute: "cell-id" })], F = [p(), b({ attribute: "scoped-classes" })], _(l, null, x, { kind: "accessor", name: "insetBlockStart", static: !1, private: !1, access: { has: (t) => "insetBlockStart" in t, get: (t) => t.insetBlockStart, set: (t, i) => {
+      t.insetBlockStart = i;
+    } }, metadata: e }, k, y), _(l, null, w, { kind: "accessor", name: "insetInlineStart", static: !1, private: !1, access: { has: (t) => "insetInlineStart" in t, get: (t) => t.insetInlineStart, set: (t, i) => {
+      t.insetInlineStart = i;
+    } }, metadata: e }, B, C), _(l, null, $, { kind: "accessor", name: "width", static: !1, private: !1, access: { has: (t) => "width" in t, get: (t) => t.width, set: (t, i) => {
+      t.width = i;
+    } }, metadata: e }, E, D), _(l, null, j, { kind: "accessor", name: "height", static: !1, private: !1, access: { has: (t) => "height" in t, get: (t) => t.height, set: (t, i) => {
+      t.height = i;
+    } }, metadata: e }, O, T), _(l, null, U, { kind: "accessor", name: "zIndex", static: !1, private: !1, access: { has: (t) => "zIndex" in t, get: (t) => t.zIndex, set: (t, i) => {
+      t.zIndex = i;
+    } }, metadata: e }, L, P), _(l, null, R, { kind: "accessor", name: "cellId", static: !1, private: !1, access: { has: (t) => "cellId" in t, get: (t) => t.cellId, set: (t, i) => {
+      t.cellId = i;
+    } }, metadata: e }, q, A), _(l, null, F, { kind: "accessor", name: "scopedClasses", static: !1, private: !1, access: { has: (t) => "scopedClasses" in t, get: (t) => t.scopedClasses, set: (t, i) => {
+      t.scopedClasses = i;
+    } }, metadata: e }, G, H), _(null, a = { value: c }, s, { kind: "class", name: c.name, metadata: e }, null, n), c = a.value, e && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), l.styles = Z, r(c, n), c;
+})();
+export {
+  lt as SbbSeatReservationScopedElement
+};

package/seat-reservation/seat-reservation/seat-reservation-scoped.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @entrypoint
+ */
+export * from './seat-reservation-scoped/seat-reservation-scoped.component.js';
+//# sourceMappingURL=seat-reservation-scoped.d.ts.map

package/seat-reservation/seat-reservation/seat-reservation-scoped.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seat-reservation-scoped.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/seat-reservation/seat-reservation/seat-reservation-scoped.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,gEAAgE,CAAC"}

package/seat-reservation/seat-reservation/seat-reservation-scoped.js

@@ -0,0 +1,4 @@
+import { SbbSeatReservationScopedElement as t } from "./seat-reservation-scoped/seat-reservation-scoped.component.js";
+export {
+  t as SbbSeatReservationScopedElement
+};

package/seat-reservation/seat-reservation/seat-reservation.component.d.ts

@@ -0,0 +1,62 @@
+import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { SeatReservation } from '../common.js';
+import { SeatReservationBaseElement } from './seat-reservation-base-element.js';
+/**
+ * Describe the purpose of the component with a single short sentence.
+ *
+ * @event {CustomEvent<SeatReservationSelectedPlacesEventDetails>} selectedPlaces - Emits when a place was selected and returns a Place array with all selected places
+ * @event {CustomEvent<SeatReservationCoachSelection>} selectedCoach - Emits when a coach was selected and returns a CoachSelection
+ */
+export declare class SbbSeatReservationElement extends SeatReservationBaseElement {
+    static styles: CSSResultGroup;
+    /** The seat reservation object which contains all coaches and places */
+    accessor seatReservation: SeatReservation;
+    /** The seat reservation navigation can be toggled by this property */
+    accessor hasNavigation: boolean;
+    /** Controls the visual representation of seat reservation in a horizonal or vertical alignment */
+    accessor alignVertical: boolean;
+    /** Maximal number of possible clickable seats */
+    accessor maxReservations: number;
+    /** Any click functionality is prevented */
+    accessor preventPlaceClick: boolean;
+    private _language;
+    private _coachesHtmlTemplate?;
+    private _notAreaElements;
+    private _notFixedRotatableAreaIcons;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    protected render(): TemplateResult | null;
+    private _componentSetup;
+    private _initVehicleSeatReservationConstruction;
+    private _renderNavigation;
+    /**
+     *
+     * @param coaches
+     * @returns
+     */
+    private _renderCoaches;
+    private _renderCoachElement;
+    private _getRenderedCoachBorders;
+    private _getRenderedRowPlaces;
+    private _getRenderedColumnPlaces;
+    private _getRenderedGraphicalElements;
+    private _getRenderElementWithArea;
+    private _getRenderElementWithoutArea;
+    private _getRenderedServiceElements;
+    /**
+     * Manages the selected place event triggered from the place
+     * Each selection emits an array of all selected places
+     * @param selectPlaceEvent
+     */
+    private _onSelectPlace;
+    private _onSelectNavCoach;
+    private _onFocusNavCoach;
+    private _getDescriptionTableCoach;
+    private _getTitleDescriptionListString;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-seat-reservation': SbbSeatReservationElement;
+    }
+}
+//# sourceMappingURL=seat-reservation.component.d.ts.map

package/seat-reservation/seat-reservation/seat-reservation.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seat-reservation.component.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/seat-reservation/seat-reservation/seat-reservation.component.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1E,OAAO,KAAK,EAMV,eAAe,EAChB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAGhF,OAAO,+CAA+C,CAAC;AACvD,OAAO,6BAA6B,CAAC;AACrC,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,qEAAqE,CAAC;AAC7E,OAAO,8BAA8B,CAAC;AAEtC;;;;;GAKG;AACH,qBAEM,yBAA0B,SAAQ,0BAA0B;IAChE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wEAAwE;IACxE,SACyB,eAAe,EAAE,eAAe,CAAS;IAElE,sEAAsE;IACtE,SAEyB,aAAa,EAAE,OAAO,CAAQ;IAEvD,kGAAkG;IAClG,SAEyB,aAAa,EAAE,OAAO,CAAS;IAExD,iDAAiD;IACjD,SAEyB,eAAe,EAAE,MAAM,CAAS;IAEzD,2CAA2C;IAC3C,SAEyB,iBAAiB,EAAE,OAAO,CAAS;IAE5D,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,oBAAoB,CAAC,CAAiB;IAE9C,OAAO,CAAC,gBAAgB,CAQtB;IAEF,OAAO,CAAC,2BAA2B,CAAkB;cAElC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAgBzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAK3D,MAAM,IAAI,cAAc,GAAG,IAAI;IAKlD,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,uCAAuC;IAwC/C,OAAO,CAAC,iBAAiB;IAqCzB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,mBAAmB;IA0B3B,OAAO,CAAC,wBAAwB;IA+BhC,OAAO,CAAC,qBAAqB;IA0B7B,OAAO,CAAC,wBAAwB;IA2ChC,OAAO,CAAC,6BAA6B;IA0BrC,OAAO,CAAC,yBAAyB;IA2EjC,OAAO,CAAC,4BAA4B;IA0CpC,OAAO,CAAC,2BAA2B;IAyCnC;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,yBAAyB;IAuBjC,OAAO,CAAC,8BAA8B;CAyBvC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}

package/seat-reservation/seat-reservation/seat-reservation.component.js

@@ -0,0 +1,404 @@
+var q = (n) => {
+  throw TypeError(n);
+};
+var K = (n, o, c) => o.has(n) || q("Cannot " + c);
+var R = (n, o, c) => (K(n, o, "read from private field"), c ? c.call(n) : o.get(n)), x = (n, o, c) => o.has(n) ? q("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(n) : o.set(n, c), b = (n, o, c, u) => (K(n, o, "write to private field"), u ? u.call(n, c) : o.set(n, c), c);
+import { __runInitializers as p, __esDecorate as S } from "tslib";
+import { SbbLanguageController as X } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { forceType as P } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { css as J, html as h, nothing as A } from "lit";
+import { customElement as Y, property as y } from "lit/decorators.js";
+import { classMap as Q } from "lit/directives/class-map.js";
+import { styleMap as Z } from "lit/directives/style-map.js";
+import { getI18nSeatReservation as _ } from "../common.js";
+import { SeatReservationBaseElement as ee } from "./seat-reservation-base-element.js";
+import "@sbb-esta/lyne-elements/screen-reader-only.js";
+import "../seat-reservation-area.js";
+import "../seat-reservation-graphic.js";
+import "../seat-reservation-place-control.js";
+import "../seat-reservation-navigation/seat-reservation-navigation-coach.js";
+import "./seat-reservation-scoped/seat-reservation-scoped.component.js";
+const te = J`*,:before,:after{box-sizing:border-box}:host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-vertical-offset: 0;display:block}:host ::part(coach-floor){fill:var(--sbb-color-white)}@media (forced-colors: active){:host ::part(coach-floor){fill:transparent}}.sbb-sr__wrapper--vertical{width:fit-content;position:relative;inset-inline-start:var(--sbb-seat-reservation-vertical-offset);rotate:90deg;transform-origin:top left}.sbb-sr__wrapper--vertical .sbb-sr__parent{overflow-y:hidden}.sbb-sr__wrapper--vertical .sbb-sr__list-coaches{width:100vw}.sbb-sr-navigation--vertical{inset-inline-start:var(--sbb-seat-reservation-vertical-offset);margin-inline-start:1.25rem;position:absolute}.sbb-sr-navigation--vertical .sbb-sr-navigation__list-coaches{flex-direction:column}.sbb-sr-navigation__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;justify-content:center;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-1x);min-height:3.75rem}.sbb-sr__parent{overflow-x:scroll;padding:3rem 0}.sbb-sr__list-coaches{display:flex;gap:.25rem;padding:0;margin:0;list-style:none}.sbb-sr__item-coach{padding:0;margin:0;position:relative}.sbb-sr-coach-wrapper__table{outline:0}`;
+let me = (() => {
+  var g, f, m, $, C, d;
+  let n = [Y("sbb-seat-reservation")], o, c = [], u, N = ee, T, z = [], O = [], k, D = [], G = [], I, V = [], E = [], B, L = [], F = [], M, H = [], W = [];
+  return d = class extends N {
+    constructor() {
+      super(...arguments);
+      x(this, g);
+      x(this, f);
+      x(this, m);
+      x(this, $);
+      x(this, C);
+      b(this, g, p(this, z, null)), b(this, f, (p(this, O), p(this, D, !0))), b(this, m, (p(this, G), p(this, V, !1))), b(this, $, (p(this, E), p(this, L, null))), b(this, C, (p(this, F), p(this, H, !1))), this._language = (p(this, W), new X(this)), this._notAreaElements = [
+        "DRIVER_AREA_FULL",
+        "COACH_PASSAGE",
+        "COACH_WALL_NO_PASSAGE",
+        "COMPARTMENT_PASSAGE",
+        "COMPARTMENT_PASSAGE_HIGH",
+        "COMPARTMENT_PASSAGE_MIDDLE",
+        "COMPARTMENT_PASSAGE_LOW"
+      ], this._notFixedRotatableAreaIcons = ["ENTRY_EXIT"];
+    }
+    /** The seat reservation object which contains all coaches and places */
+    get seatReservation() {
+      return R(this, g);
+    }
+    set seatReservation(e) {
+      b(this, g, e);
+    }
+    /** The seat reservation navigation can be toggled by this property */
+    get hasNavigation() {
+      return R(this, f);
+    }
+    set hasNavigation(e) {
+      b(this, f, e);
+    }
+    /** Controls the visual representation of seat reservation in a horizonal or vertical alignment */
+    get alignVertical() {
+      return R(this, m);
+    }
+    set alignVertical(e) {
+      b(this, m, e);
+    }
+    /** Maximal number of possible clickable seats */
+    get maxReservations() {
+      return R(this, $);
+    }
+    set maxReservations(e) {
+      b(this, $, e);
+    }
+    /** Any click functionality is prevented */
+    get preventPlaceClick() {
+      return R(this, C);
+    }
+    set preventPlaceClick(e) {
+      b(this, C, e);
+    }
+    willUpdate(e) {
+      var t, i;
+      super.willUpdate(e), e.has("hasNavigation") && (this.hasNavigation ? (t = this.shadowRoot) == null || t.querySelectorAll("table").forEach((s) => s.removeAttribute("tabindex")) : (i = this.shadowRoot) == null || i.querySelectorAll("table").forEach((s) => s.setAttribute("tabindex", "0")));
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this._componentSetup();
+    }
+    render() {
+      return this._initVehicleSeatReservationConstruction(), this._coachesHtmlTemplate || null;
+    }
+    _componentSetup() {
+      this.initNavigationSelectionByScrollEvent();
+    }
+    _initVehicleSeatReservationConstruction() {
+      var i;
+      const e = JSON.parse(JSON.stringify((i = this.seatReservation) == null ? void 0 : i.coachItems)), t = this.alignVertical ? "sbb-sr__wrapper--vertical" : "";
+      this._coachesHtmlTemplate = h`
+      <div>
+        <sbb-screen-reader-only>
+          <input
+            id="first-tab-element"
+            role="contentinfo"
+            type="text"
+            aria-label="${_("SEAT_RESERVATION_BEGIN", this._language.current)}"
+            readonly
+          />
+        </sbb-screen-reader-only>
+
+        <div @keydown=${(s) => this.handleKeyboardEvent(s)}>
+          ${this._renderNavigation()}
+          <div class="sbb-sr__wrapper ${t}">
+            <div id="sbb-sr__parent-area" class="sbb-sr__parent" tabindex="-1">
+              <ul class="sbb-sr__list-coaches" role="presentation">
+                ${this._renderCoaches(e)}
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <sbb-screen-reader-only>
+          <input
+            id="last-tab-element"
+            role="contentinfo"
+            type="text"
+            aria-label="${_("SEAT_RESERVATION_END", this._language.current)}"
+            readonly
+          />
+        </sbb-screen-reader-only>
+      </div>
+    `;
+    }
+    _renderNavigation() {
+      var e;
+      return this.hasNavigation ? h`
+      <nav class="${Q({ "sbb-sr-navigation--vertical": this.alignVertical })}">
+        <ul
+          class="sbb-sr-navigation__list-coaches"
+          aria-label="${_("SEAT_RESERVATION_NAVIGATION", this._language.current)}"
+        >
+          ${(e = this.seatReservation) == null ? void 0 : e.coachItems.map((t, i) => {
+        var s, a;
+        return h`<li>
+              <sbb-seat-reservation-navigation-coach
+                @selectCoach=${(r) => this._onSelectNavCoach(r)}
+                @focusCoach=${() => this._onFocusNavCoach()}
+                index="${i}"
+                coach-id="${t.id}"
+                .selected=${this.selectedCoachIndex === i}
+                .focused=${this.focusedCoachIndex === i}
+                .propertyIds="${t.propertyIds}"
+                .travelClass="${t.travelClass}"
+                ?driver-area="${!((s = t.places) != null && s.length)}"
+                ?first="${i === 0}"
+                ?last="${i === ((a = this.seatReservation) == null ? void 0 : a.coachItems.length) - 1}"
+                ?vertical="${this.alignVertical}"
+              >
+              </sbb-seat-reservation-navigation-coach>
+            </li>`;
+      })}
+        </ul>
+      </nav>
+    ` : null;
+    }
+    /**
+     *
+     * @param coaches
+     * @returns
+     */
+    _renderCoaches(e) {
+      return e ? e.map((t, i) => h`
+        <li class="sbb-sr__item-coach">${this._renderCoachElement(t, i)}</li>
+      `) : null;
+    }
+    _renderCoachElement(e, t) {
+      const i = this.getCalculatedDimension(e.dimension), s = this._getDescriptionTableCoach(e);
+      return h` <sbb-seat-reservation-scoped
+      scoped-classes="coach-wrapper"
+      height="${i.h}px"
+      width="${i.w}px"
+    >
+      ${this._getRenderedCoachBorders(e, t)}
+      ${this._getRenderedGraphicalElements(e.graphicElements || [], e.dimension)}
+      ${this._getRenderedServiceElements(e.serviceElements)}
+      <table
+        @focus=${() => this.onFocusTableCoachAndPreselectPlace(t)}
+        id="sbb-sr-coach-${t}"
+        class="sbb-sr-coach-wrapper__table"
+        aria-describedby="sbb-sr-coach-caption-${t}"
+      >
+        <caption id="sbb-sr-coach-caption-${t}" tabindex="-1">
+          <sbb-screen-reader-only>${s}</sbb-screen-reader-only>
+        </caption>
+        ${this._getRenderedRowPlaces(e, t)}
+      </table>
+    </sbb-seat-reservation-scoped>`;
+    }
+    _getRenderedCoachBorders(e, t) {
+      const i = e.graphicElements, s = 1, a = i == null ? void 0 : i.find((v) => v.icon === "DRIVER_AREA_FULL"), r = a ? e.dimension.w - a.dimension.w - s : e.dimension.w - s * 2, l = t === 0 && a ? (a == null ? void 0 : a.dimension.w) * this.baseGridSize : this.baseGridSize;
+      return h`
+      <sbb-seat-reservation-scoped
+        scoped-classes="coach-border"
+        inset-block-start="${this.coachBorderPadding * -1}px"
+        inset-inline-start="${l}px"
+      >
+        <sbb-seat-reservation-graphic
+          name="COACH_BORDER_MIDDLE"
+          width=${r * this.baseGridSize}
+          height=${(e.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize}
+          ?stretch=${!0}
+          role="presentation"
+        ></sbb-seat-reservation-graphic>
+      </sbb-seat-reservation-scoped>
+    `;
+    }
+    _getRenderedRowPlaces(e, t) {
+      if (!e.places)
+        return null;
+      const i = {};
+      for (const s of e.places)
+        i[s.position.y] ? i[s.position.y].push(s) : i[s.position.y] = [s];
+      return Object.values(i).map((s, a) => h`
+          <tr id="row-${t}-${s[0].position.y}" data-row-index=${a}>
+            ${this._getRenderedColumnPlaces(s, t)}
+          </tr>
+        `).flatMap((s) => s);
+    }
+    _getRenderedColumnPlaces(e, t) {
+      return e.sort((i, s) => Number(i.position.x) - Number(s.position.x)), e == null ? void 0 : e.map((i, s) => {
+        const a = this.getCalculatedDimension(i.dimension), r = this.getCalculatedPosition(i.position), l = this.alignVertical ? -90 : 0;
+        return h`
+        <sbb-seat-reservation-scoped
+          scoped-classes="graphical-element"
+          inset-block-start="${r.y}px"
+          inset-inline-start="${r.x}px"
+          width="${a.w}px"
+          height="${a.h}px"
+          z-index="${i.position.z}"
+          cell-id="cell-${t}-${i.position.y}-${s}"
+        >
+          <sbb-seat-reservation-place-control
+            @selectPlace=${(v) => this._onSelectPlace(v)}
+            exportparts="sbb-sr-place-part"
+            id="seat-reservation__place-button-${t}-${i.number}"
+            class="seat-reservation-place-control"
+            data-cell-id="${t}-${i.position.y}-${s}"
+            text=${i.number}
+            type=${i.type}
+            state=${i.state}
+            width=${i.dimension.w * this.baseGridSize}
+            height=${i.dimension.h * this.baseGridSize}
+            rotation=${i.rotation ?? A}
+            text-rotation=${l}
+            coach-index=${t}
+            .propertyIds=${i.propertyIds}
+            .preventClick=${this.preventPlaceClick}
+          ></sbb-seat-reservation-place-control>
+        </sbb-seat-reservation-scoped>
+      `;
+      });
+    }
+    _getRenderedGraphicalElements(e, t) {
+      return e ? e == null ? void 0 : e.map((i) => {
+        const s = i.icon ?? "", a = i.rotation || 0, r = this._notFixedRotatableAreaIcons.indexOf(i.icon) === -1, l = this.alignVertical && r ? a - 90 : a;
+        return this._notAreaElements.findIndex((v) => v === s) > -1 ? this._getRenderElementWithoutArea(i, a, t) : this._getRenderElementWithArea(i, l, t);
+      }) : null;
+    }
+    _getRenderElementWithArea(e, t, i) {
+      var U;
+      const s = ((U = e.icon) == null ? void 0 : U.indexOf("TABLE")) === -1, a = e.icon && s ? e.icon : null, r = a !== "ENTRY_EXIT", l = e.icon ? _(e.icon, this._language.current) : A, v = this.getCalculatedDimension(e.dimension, i, !0, r), j = this.getCalculatedPosition(e.position, e.dimension, i, !0);
+      let w = "free";
+      return e.position.y === this.coachBorderOffset * -1 ? w = "upper-border" : e.position.y + e.dimension.h === i.h + this.coachBorderOffset && (w = "lower-border"), h`
+      <sbb-seat-reservation-scoped
+        scoped-classes="graphical-element"
+        inset-block-start="${j.y}px"
+        inset-inline-start="${j.x}px"
+        width="${v.w}px"
+        height="${v.h}px"
+        z-index="${e.position.z}"
+      >
+        <sbb-seat-reservation-area
+          style=${Z({
+        "--sbb-reservation-area-width": e.dimension.w * this.baseGridSize,
+        "--sbb-reservation-area-height": e.dimension.h * this.baseGridSize
+      })}
+          mounting=${w}
+          background="dark"
+          aria-hidden="true"
+          title=${l}
+        >
+          ${a ? h`
+                <sbb-seat-reservation-graphic
+                  name=${a}
+                  rotation=${t}
+                  width=${this.baseGridSize}
+                  height=${this.baseGridSize}
+                  role="img"
+                  aria-hidden="true"
+                ></sbb-seat-reservation-graphic>
+              ` : A}
+        </sbb-seat-reservation-area>
+      </sbb-seat-reservation-scoped>
+    `;
+    }
+    _getRenderElementWithoutArea(e, t, i) {
+      var l;
+      const s = this.getCalculatedDimension(e.dimension, i), a = this.getCalculatedPosition(e.position, e.dimension, i), r = e.icon && e.icon.indexOf("DRIVER_AREA") === -1 ? e.icon : (l = e.icon) == null ? void 0 : l.concat("_", this.seatReservation.vehicleType);
+      return h`
+      <sbb-seat-reservation-scoped
+        scoped-classes="graphical-element"
+        inset-block-start="${a.y}px"
+        inset-inline-start="${a.x}px"
+        width="${s.w}px"
+        height="${s.h}px"
+        z-index="${e.position.z}"
+      >
+        <sbb-seat-reservation-graphic
+          name=${r ?? A}
+          width=${e.dimension.w * this.baseGridSize}
+          height=${e.dimension.h * this.baseGridSize}
+          rotation=${t}
+          aria-hidden="true"
+          ?stretch=${!0}
+        ></sbb-seat-reservation-graphic>
+      </sbb-seat-reservation-scoped>
+    `;
+    }
+    _getRenderedServiceElements(e) {
+      return e ? e == null ? void 0 : e.map((t) => {
+        const i = t.icon ? _(t.icon, this._language.current) : null, s = this.getCalculatedDimension(t.dimension), a = this.getCalculatedPosition(t.position), r = t.rotation || 0, l = this.alignVertical ? r - 90 : r;
+        return h`
+        <sbb-seat-reservation-scoped
+          scoped-classes="graphical-element"
+          inset-block-start="${a.y}px"
+          inset-inline-start="${a.x}px"
+          width="${s.w}px"
+          height="${s.h}px"
+          z-index="${t.position.z}"
+        >
+          <sbb-seat-reservation-graphic
+            name=${t.icon ?? A}
+            width=${t.dimension.w * this.baseGridSize}
+            height=${t.dimension.h * this.baseGridSize}
+            .rotation=${l}
+            role="img"
+            aria-hidden="true"
+            title=${i ?? A}
+          ></sbb-seat-reservation-graphic>
+        </sbb-seat-reservation-scoped>
+      `;
+      }) : null;
+    }
+    /**
+     * Manages the selected place event triggered from the place
+     * Each selection emits an array of all selected places
+     * @param selectPlaceEvent
+     */
+    _onSelectPlace(e) {
+      const t = e.detail;
+      this.preventCoachScrollByPlaceClick = !0, this.isCoachGridFocusable = !1, this.preventPlaceClick || (this.updateSelectedSeatReservationPlaces(t), this.updateCurrentSelectedPlaceInCoach(t));
+    }
+    _onSelectNavCoach(e) {
+      const t = e.detail;
+      this.isKeyboardNavigation = !1, t !== null && t !== this.currSelectedCoachIndex ? (this.unfocusPlaceElement(), this.scrollToSelectedNavCoach(t)) : t === this.currSelectedCoachIndex && (this.updateCurrentSelectedCoach(), this.preselectPlaceInCoach());
+    }
+    _onFocusNavCoach() {
+      this.preventCoachScrollByPlaceClick ? this.focusPlaceElement(this.currSelectedPlace) : this.preselectPlaceInCoach(), this.isAutoScrolling = !1;
+    }
+    _getDescriptionTableCoach(e) {
+      var a;
+      if (!((a = e.places) != null && a.length))
+        return _("COACH_BLOCKED_TABLE_CAPTION", this._language.current, [
+          e.id
+        ]);
+      let t = "";
+      const i = this._getTitleDescriptionListString(e.graphicElements), s = this._getTitleDescriptionListString(e.serviceElements);
+      return t = _("COACH_TABLE_CAPTION", this._language.current, [
+        e.id
+      ]), (i || s) && (t += ". " + _("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", t += s + ", " + i + "."), t;
+    }
+    _getTitleDescriptionListString(e) {
+      const t = [];
+      return e == null ? void 0 : e.map((i) => {
+        const s = i.icon;
+        if (!s)
+          return null;
+        const a = t.indexOf(s) > -1, r = _(i.icon, this._language.current), l = this._notFixedRotatableAreaIcons.indexOf(s) === -1 && this._notAreaElements.indexOf(s) === -1;
+        return a || t.push(i.icon), r && !a && l ? r : null;
+      }).filter((i) => !!i).join(", ");
+    }
+  }, g = new WeakMap(), f = new WeakMap(), m = new WeakMap(), $ = new WeakMap(), C = new WeakMap(), u = d, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(N[Symbol.metadata] ?? null) : void 0;
+    T = [y({ attribute: "seat-reservation", type: Object })], k = [P(), y({ attribute: "has-navigation", type: Boolean })], I = [P(), y({ attribute: "align-vertical", type: Boolean })], B = [P(), y({ attribute: "max-reservations", type: Number })], M = [P(), y({ attribute: "prevent-place-click", type: Boolean })], S(d, null, T, { kind: "accessor", name: "seatReservation", static: !1, private: !1, access: { has: (t) => "seatReservation" in t, get: (t) => t.seatReservation, set: (t, i) => {
+      t.seatReservation = i;
+    } }, metadata: e }, z, O), S(d, null, k, { kind: "accessor", name: "hasNavigation", static: !1, private: !1, access: { has: (t) => "hasNavigation" in t, get: (t) => t.hasNavigation, set: (t, i) => {
+      t.hasNavigation = i;
+    } }, metadata: e }, D, G), S(d, null, I, { kind: "accessor", name: "alignVertical", static: !1, private: !1, access: { has: (t) => "alignVertical" in t, get: (t) => t.alignVertical, set: (t, i) => {
+      t.alignVertical = i;
+    } }, metadata: e }, V, E), S(d, null, B, { kind: "accessor", name: "maxReservations", static: !1, private: !1, access: { has: (t) => "maxReservations" in t, get: (t) => t.maxReservations, set: (t, i) => {
+      t.maxReservations = i;
+    } }, metadata: e }, L, F), S(d, null, M, { kind: "accessor", name: "preventPlaceClick", static: !1, private: !1, access: { has: (t) => "preventPlaceClick" in t, get: (t) => t.preventPlaceClick, set: (t, i) => {
+      t.preventPlaceClick = i;
+    } }, metadata: e }, H, W), S(null, o = { value: u }, n, { kind: "class", name: u.name, metadata: e }, null, c), u = o.value, e && Object.defineProperty(u, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), d.styles = te, p(u, c), u;
+})();
+export {
+  me as SbbSeatReservationElement
+};

package/seat-reservation/seat-reservation-area/seat-reservation-area.component.d.ts

@@ -0,0 +1,18 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+/**
+ * Visualize an area with a special meaning within a wagon.
+ */
+export declare class SbbSeatReservationAreaElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** Mounting Prop */
+    accessor mounting: 'free' | 'upper-border' | 'lower-border' | 'upper-to-lower-border';
+    /** the background of the area */
+    accessor background: 'light' | 'dark';
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-seat-reservation-area': SbbSeatReservationAreaElement;
+    }
+}
+//# sourceMappingURL=seat-reservation-area.component.d.ts.map

package/seat-reservation/seat-reservation-area/seat-reservation-area.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seat-reservation-area.component.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/seat-reservation/seat-reservation-area/seat-reservation-area.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC;;GAEG;AACH,qBAEM,6BAA8B,SAAQ,UAAU;IACpD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,oBAAoB;IACpB,SAEgB,QAAQ,EAAE,MAAM,GAAG,cAAc,GAAG,cAAc,GAAG,uBAAuB,CACnF;IAET,iCAAiC;IACjC,SAEgB,UAAU,EAAE,OAAO,GAAG,MAAM,CAAW;cAEpC,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,2BAA2B,EAAE,6BAA6B,CAAC;KAC5D;CACF"}