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

package/seat-reservation/seat-reservation/seat-reservation-base-element.d.ts

@@ -0,0 +1,157 @@
+import { EventEmitter } from '@sbb-esta/lyne-elements/core/eventing.js';
+import { LitElement, PropertyValues } from 'lit';
+import { ElementDimension, ElementPosition, Place, PlaceSelection, SeatReservation, SeatReservationCoachSelection, SeatReservationPlaceSelection } from '../common.js';
+declare enum ScrollDirection {
+    right = "right",
+    left = "left"
+}
+interface CoachScrollTriggerPoint {
+    start: number;
+    end: number;
+    width: number;
+}
+export type SeatReservationSelectedPlacesEventDetails = SeatReservationPlaceSelection[];
+export declare class SeatReservationBaseElement extends LitElement {
+    static readonly events: {
+        readonly selectedPlaces: "selectedPlaces";
+        readonly selectedCoach: "selectedCoach";
+    };
+    /** The seat reservation object which contains all coaches and places */
+    accessor seatReservation: SeatReservation;
+    /** The seat resvervation navigation can be toggled by this property */
+    accessor hasNavigation: boolean;
+    /** The seat reservation area is aligned vertically */
+    accessor alignVertical: boolean;
+    /** The seat reservation area's base grid size */
+    accessor baseGridSize: number;
+    /** The seat reservation area's width */
+    accessor height: number;
+    /** Maximal number of possible clickable seats */
+    accessor maxReservations: number;
+    /** Any click functionality is prevented */
+    accessor preventPlaceClick: boolean;
+    protected accessor selectedCoachIndex: number;
+    protected accessor focusedCoachIndex: number;
+    /** Emits when a place was selected by user. */
+    protected selectedPlaces: EventEmitter<SeatReservationSelectedPlacesEventDetails>;
+    /** Emits when a coach was selected by user. */
+    protected selectedCoach: EventEmitter<SeatReservationCoachSelection>;
+    protected coachBorderPadding: number;
+    protected coachBorderOffset: number;
+    protected currScrollDirection: ScrollDirection;
+    protected maxCalcCoachsWidth: number;
+    protected scrollCoachsAreaWidth: number;
+    protected triggerCoachPositionsCollection: CoachScrollTriggerPoint[];
+    protected firstTabElement: HTMLElement;
+    protected lastTabElement: HTMLElement;
+    protected coachScrollArea: HTMLElement;
+    protected currSelectedPlace: Place | null;
+    protected currSelectedPlaceElementId: string | null;
+    protected currSelectedCoachIndex: number;
+    protected preventCoachScrollByPlaceClick: boolean;
+    protected selectedSeatReservationPlaces: SeatReservationPlaceSelection[];
+    protected seatReservationWithoutNavigationHasFocus: boolean;
+    protected isCoachGridFocusable: boolean;
+    protected isAutoScrolling: boolean;
+    protected isKeyboardNavigation: boolean;
+    protected keyboardNavigationEvents: {
+        readonly ArrowLeft: "ArrowLeft";
+        readonly ArrowRight: "ArrowRight";
+        readonly ArrowUp: "ArrowUp";
+        readonly ArrowDown: "ArrowDown";
+        readonly Tab: "Tab";
+        readonly Enter: "Enter";
+    };
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected initNavigationSelectionByScrollEvent(): void;
+    /**
+     * If no navigation exists (property setting -> hasNavigation) and a table coach gets the focus,
+     * the first place in the coach must be automatically preselected to control the place navigation via keyboard
+     *
+     * @param focusCoachIndex
+     */
+    protected onFocusTableCoachAndPreselectPlace(focusCoachIndex: number): void;
+    /**
+     * Initialisation of Keyboard event handling to navigation between each places inside a selected coach by using [arrow] keys.
+     * With the [TAB] key the user navigation goes to the next coach navigation element and the currently selected place is automatically reset.
+     */
+    protected handleKeyboardEvent(event: KeyboardEvent): void;
+    /**
+     * Selects a place inside the coach if navigated via keyboard,
+     * otherwise the coach grid is selected (necessary for ScreenReader)
+     */
+    protected preselectPlaceInCoach(): void;
+    protected scrollToSelectedNavCoach(selectedNavCoachIndex: number): void;
+    /**
+     * Sets the new ScrollDirection by the new given target coach index.
+     */
+    private _setScrollDirectionByCoachIndex;
+    /**
+     * Returns the scroll start or end position X from the selected coach.
+     * In case the user is curretnly navigate throught places by keyboard and goes to previous coach,
+     * then we return the end position of the coach to get clostest next scroll position of the next focus place.
+     * @returns number
+     */
+    private _getCoachScrollPositionX;
+    /**
+     * Sets the focus on the HTML table (grid) caption element so that the heading is read out when using a ScreenReader.
+     */
+    private _setFocusToSelectedCoachGrid;
+    /**
+     * Returns whether the current scrolled position can be used to scroll to the selected wagon
+     * @returns boolean
+     */
+    private _isScrollableToSelectedCoach;
+    /**
+     * Returns the coach index which is currently visible in the scroll area
+     * @returns number
+     */
+    private _getCoachIndexByScrollTriggerPosition;
+    /**
+     * Get the first place of current selected coach by table cell coordinate 0-0 id.
+     * @returns Place or null
+     */
+    private _getFirstPlaceInSelecedCoach;
+    /**
+     * To get the correct closest place of current pressed key and the current selected place,
+     * we have to investigate the coordinates of each place to find the closest place of the currSelectedPlaceElementId.
+     * @param pressedKey
+     * @returns Place or null
+     */
+    private _getClosestPlaceByKeyDirection;
+    protected focusPlaceElement(place: Place | null, coachIndex?: number): void;
+    protected unfocusPlaceElement(): void;
+    protected getCalculatedDimension(elementDimension: ElementDimension, coachDimension?: ElementDimension, isOriginHeight?: boolean, isStretchHeight?: boolean): ElementDimension;
+    protected getCalculatedPosition(elementPosition: ElementPosition, elementDimension?: ElementDimension, coachDimension?: ElementDimension, isOriginHeight?: boolean): ElementPosition;
+    private _navigateCoachNavigationByKeyboard;
+    private _navigateToPlaceByKeyboard;
+    protected getNextAvailableCoachIndex(currentIndex?: number): number;
+    protected getPrevAvailableCoachIndex(currentIndex?: number): number;
+    protected updateSelectedSeatReservationPlaces(placeSelection: PlaceSelection): void;
+    protected updateCurrentSelectedPlaceInCoach(placeSelection: PlaceSelection): void;
+    protected updateCurrentSelectedCoach(): void;
+    /**
+     * Initialization of SeatReservationPlaceSelection Array based on the transferred places
+     * that have the state SELECTED within the seatReservation object
+     */
+    private _initSeatReservationPlaceSelection;
+    /**
+     * All selected places will be reset or the currentSelectedPlace was given, then we reset all except currentSelectedPlace
+     * @param currSelectedPlace
+     */
+    private _resetAllPlaceSelections;
+    private _getSeatReservationPlaceSelection;
+    private _getSeatReservationCoachSelection;
+    private _setCurrSelectedPlaceElementId;
+    /**
+     * Returns the current selected place HTML element by given placeNumber and coachIndex.
+     * If both doesnt exist, we try to return the place HTML element by the _currentSelectedPlaceElementId
+     * @param placeNumber optional as string
+     * @param coachIndex optional as string
+     * @returns HTMLElement or null
+     */
+    private _getPlaceHtmlElement;
+    private _setVerticalAlignmentOffset;
+}
+export {};
+//# sourceMappingURL=seat-reservation-base-element.d.ts.map

package/seat-reservation/seat-reservation/seat-reservation-base-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seat-reservation-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/seat-reservation/seat-reservation/seat-reservation-base-element.ts"],"names":[],"mappings":"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"}

package/seat-reservation/seat-reservation/seat-reservation-base-element.js

@@ -0,0 +1,435 @@
+var te = (o) => {
+  throw TypeError(o);
+};
+var ie = (o, n, d) => n.has(o) || te("Cannot " + d);
+var f = (o, n, d) => (ie(o, n, "read from private field"), d ? d.call(o) : n.get(o)), g = (o, n, d) => n.has(o) ? te("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(o) : n.set(o, d), r = (o, n, d, w) => (ie(o, n, "write to private field"), w ? w.call(o, d) : n.set(o, d), d);
+import { __runInitializers as h, __esDecorate as v } from "tslib";
+import { isArrowKeyOrPageKeysPressed as oe } from "@sbb-esta/lyne-elements/core/a11y.js";
+import { forceType as E } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { EventEmitter as se } from "@sbb-esta/lyne-elements/core/eventing.js";
+import { LitElement as re } from "lit";
+import { property as x, state as ae } from "lit/decorators.js";
+import { mapPlaceInfosToPlaceSelection as le, mapPlaceAndCoachToSeatReservationPlaceSelection as he, mapCoachInfosToCoachSelection as ne } from "../common/mapper.js";
+var S;
+(function(o) {
+  o.right = "right", o.left = "left";
+})(S || (S = {}));
+let be = (() => {
+  var p, b, P, I, m, _, y, R, A, l;
+  let o = re, n, d = [], w = [], k, T = [], z = [], B, G = [], V = [], F, O = [], D = [], W, K = [], L = [], H, U = [], X = [], q, M = [], j = [], $, J = [], Q = [], Y, Z = [], ee = [];
+  return l = class extends o {
+    constructor() {
+      super(...arguments);
+      g(this, p);
+      g(this, b);
+      g(this, P);
+      g(this, I);
+      g(this, m);
+      g(this, _);
+      g(this, y);
+      g(this, R);
+      g(this, A);
+      r(this, p, h(this, d, null)), r(this, b, (h(this, w), h(this, T, !0))), r(this, P, (h(this, z), h(this, G, !1))), r(this, I, (h(this, V), h(this, O, 16))), r(this, m, (h(this, D), h(this, K, null))), r(this, _, (h(this, L), h(this, U, null))), r(this, y, (h(this, X), h(this, M, !1))), r(this, R, (h(this, j), h(this, J, -1))), r(this, A, (h(this, Q), h(this, Z, -1))), this.selectedPlaces = (h(this, ee), new se(this, l.events.selectedPlaces)), this.selectedCoach = new se(this, l.events.selectedCoach), this.coachBorderPadding = 6, this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, this.currScrollDirection = S.right, this.maxCalcCoachsWidth = 0, this.scrollCoachsAreaWidth = 0, this.triggerCoachPositionsCollection = [], this.firstTabElement = null, this.lastTabElement = null, this.coachScrollArea = null, this.currSelectedPlace = null, this.currSelectedPlaceElementId = null, this.currSelectedCoachIndex = -1, this.preventCoachScrollByPlaceClick = !1, this.selectedSeatReservationPlaces = [], this.seatReservationWithoutNavigationHasFocus = !1, this.isCoachGridFocusable = !1, this.isAutoScrolling = !1, this.isKeyboardNavigation = !1, this.keyboardNavigationEvents = {
+        ArrowLeft: "ArrowLeft",
+        ArrowRight: "ArrowRight",
+        ArrowUp: "ArrowUp",
+        ArrowDown: "ArrowDown",
+        Tab: "Tab",
+        Enter: "Enter"
+      };
+    }
+    /** The seat reservation object which contains all coaches and places */
+    get seatReservation() {
+      return f(this, p);
+    }
+    set seatReservation(e) {
+      r(this, p, e);
+    }
+    /** The seat resvervation navigation can be toggled by this property */
+    get hasNavigation() {
+      return f(this, b);
+    }
+    set hasNavigation(e) {
+      r(this, b, e);
+    }
+    /** The seat reservation area is aligned vertically */
+    get alignVertical() {
+      return f(this, P);
+    }
+    set alignVertical(e) {
+      r(this, P, e);
+    }
+    /** The seat reservation area's base grid size */
+    get baseGridSize() {
+      return f(this, I);
+    }
+    set baseGridSize(e) {
+      r(this, I, e);
+    }
+    /** The seat reservation area's width */
+    get height() {
+      return f(this, m);
+    }
+    set height(e) {
+      r(this, m, e);
+    }
+    /** Maximal number of possible clickable seats */
+    get maxReservations() {
+      return f(this, _);
+    }
+    set maxReservations(e) {
+      r(this, _, e);
+    }
+    /** Any click functionality is prevented */
+    get preventPlaceClick() {
+      return f(this, y);
+    }
+    set preventPlaceClick(e) {
+      r(this, y, e);
+    }
+    get selectedCoachIndex() {
+      return f(this, R);
+    }
+    set selectedCoachIndex(e) {
+      r(this, R, e);
+    }
+    get focusedCoachIndex() {
+      return f(this, A);
+    }
+    set focusedCoachIndex(e) {
+      r(this, A, e);
+    }
+    willUpdate(e) {
+      var t, i;
+      super.willUpdate(e), e.has("seatReservation") && this._initSeatReservationPlaceSelection(), e.has("baseGridSize") && (this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, (t = this.style) == null || t.setProperty("--sbb-seat-reservation-grid-size", `${this.baseGridSize}px`), this.alignVertical && this._setVerticalAlignmentOffset()), e.has("height") && this.height && this.seatReservation.coachItems.length && (this.baseGridSize = this.height / this.seatReservation.coachItems[0].dimension.h, this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, (i = this.style) == null || i.setProperty("--sbb-seat-reservation-grid-size", `${this.baseGridSize}px`), this.alignVertical && this._setVerticalAlignmentOffset()), e.has("alignVertical") && this.alignVertical && this._setVerticalAlignmentOffset();
+    }
+    /* Init scroll event handling for coach navigation */
+    initNavigationSelectionByScrollEvent() {
+      var e, t, i;
+      if (this.firstTabElement = (e = this.shadowRoot) == null ? void 0 : e.getElementById("first-tab-element"), this.lastTabElement = (t = this.shadowRoot) == null ? void 0 : t.getElementById("last-tab-element"), this.coachScrollArea = (i = this.shadowRoot) == null ? void 0 : i.getElementById("sbb-sr__parent-area"), this.coachScrollArea) {
+        let s = 0;
+        this.scrollCoachsAreaWidth = this.coachScrollArea.getBoundingClientRect().width, this.triggerCoachPositionsCollection = this.seatReservation.coachItems.map((c) => {
+          const C = s, u = this.getCalculatedDimension(c.dimension).w;
+          return s += u, {
+            start: C,
+            end: s,
+            width: u
+          };
+        }), this.maxCalcCoachsWidth = s, this.coachScrollArea.addEventListener("scrollend", () => {
+          const c = this.isAutoScrolling ? this.currSelectedCoachIndex : this._getCoachIndexByScrollTriggerPosition();
+          this._isScrollableToSelectedCoach() ? this.currSelectedCoachIndex = c : this.currSelectedCoachIndex = c < this.currSelectedCoachIndex ? this.currSelectedCoachIndex : c, this.preventCoachScrollByPlaceClick = !1, this.updateCurrentSelectedCoach(), this.hasNavigation || (this.preselectPlaceInCoach(), this.isAutoScrolling = !1);
+        }), this.alignVertical && this._setVerticalAlignmentOffset();
+      }
+    }
+    /**
+     * If no navigation exists (property setting -> hasNavigation) and a table coach gets the focus,
+     * the first place in the coach must be automatically preselected to control the place navigation via keyboard
+     *
+     * @param focusCoachIndex
+     */
+    onFocusTableCoachAndPreselectPlace(e) {
+      !this.seatReservationWithoutNavigationHasFocus && !this.hasNavigation && (this.seatReservationWithoutNavigationHasFocus = !0, this.currSelectedCoachIndex = e === 0 ? this.getNextAvailableCoachIndex(-1) : this.getPrevAvailableCoachIndex(e), this.preselectPlaceInCoach());
+    }
+    /**
+     * Initialisation of Keyboard event handling to navigation between each places inside a selected coach by using [arrow] keys.
+     * With the [TAB] key the user navigation goes to the next coach navigation element and the currently selected place is automatically reset.
+     */
+    handleKeyboardEvent(e) {
+      const t = e.key;
+      if (this.currSelectedPlace) {
+        if (e.shiftKey && e.keyCode === 9) {
+          this._navigateCoachNavigationByKeyboard("PREV_TAB"), e.preventDefault();
+          return;
+        }
+        if (t === this.keyboardNavigationEvents.Tab) {
+          this._navigateCoachNavigationByKeyboard("NEXT_TAB"), e.preventDefault();
+          return;
+        }
+      }
+      if (this.currSelectedCoachIndex !== -1 && oe(e))
+        switch (e.preventDefault(), t) {
+          case this.keyboardNavigationEvents.ArrowLeft:
+            {
+              const i = this.alignVertical ? this.keyboardNavigationEvents.ArrowDown : t;
+              this._navigateToPlaceByKeyboard(i);
+            }
+            break;
+          case this.keyboardNavigationEvents.ArrowRight:
+            {
+              const i = this.alignVertical ? this.keyboardNavigationEvents.ArrowUp : t;
+              this._navigateToPlaceByKeyboard(i);
+            }
+            break;
+          case this.keyboardNavigationEvents.ArrowUp:
+            {
+              const i = this.alignVertical ? this.keyboardNavigationEvents.ArrowLeft : t;
+              this._navigateToPlaceByKeyboard(i);
+            }
+            break;
+          case this.keyboardNavigationEvents.ArrowDown:
+            {
+              const i = this.alignVertical ? this.keyboardNavigationEvents.ArrowRight : t;
+              this._navigateToPlaceByKeyboard(i);
+            }
+            break;
+        }
+    }
+    /**
+     * Selects a place inside the coach if navigated via keyboard,
+     * otherwise the coach grid is selected (necessary for ScreenReader)
+     */
+    preselectPlaceInCoach() {
+      const e = this._getClosestPlaceByKeyDirection();
+      e && this.unfocusPlaceElement(), this.isKeyboardNavigation && this.isAutoScrolling ? e && this.focusPlaceElement(e) : (this.currSelectedPlace = e, this._setFocusToSelectedCoachGrid());
+    }
+    scrollToSelectedNavCoach(e) {
+      if (e !== this.currSelectedCoachIndex) {
+        this.isAutoScrolling = !0, this.isCoachGridFocusable = !0, this.currSelectedCoachIndex = e, this._setScrollDirectionByCoachIndex();
+        const t = this._getCoachScrollPositionX();
+        (this.selectedCoachIndex !== -1 || this.currSelectedCoachIndex > 0) && this._isScrollableToSelectedCoach() ? this.coachScrollArea.scrollTo({
+          top: 0,
+          left: t,
+          behavior: "smooth"
+        }) : this.updateCurrentSelectedCoach();
+      }
+    }
+    /**
+     * Sets the new ScrollDirection by the new given target coach index.
+     */
+    _setScrollDirectionByCoachIndex() {
+      this.currScrollDirection = this.currSelectedCoachIndex > this.selectedCoachIndex ? S.right : S.left;
+    }
+    /**
+     * Returns the scroll start or end position X from the selected coach.
+     * In case the user is curretnly navigate throught places by keyboard and goes to previous coach,
+     * then we return the end position of the coach to get clostest next scroll position of the next focus place.
+     * @returns number
+     */
+    _getCoachScrollPositionX() {
+      const e = this.triggerCoachPositionsCollection[this.currSelectedCoachIndex];
+      return this.isKeyboardNavigation && this.currScrollDirection === S.left && e.width > this.scrollCoachsAreaWidth ? e.end - this.scrollCoachsAreaWidth : e.start;
+    }
+    /**
+     * Sets the focus on the HTML table (grid) caption element so that the heading is read out when using a ScreenReader.
+     */
+    _setFocusToSelectedCoachGrid() {
+      var e;
+      if (this.isCoachGridFocusable) {
+        this.isCoachGridFocusable = !1;
+        const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("#sbb-sr-coach-caption-" + this.currSelectedCoachIndex);
+        t && t.focus();
+      }
+    }
+    /**
+     * Returns whether the current scrolled position can be used to scroll to the selected wagon
+     * @returns boolean
+     */
+    _isScrollableToSelectedCoach() {
+      const e = this.coachScrollArea.scrollLeft, t = this.coachScrollArea.getBoundingClientRect().width, i = this.maxCalcCoachsWidth - t, s = this.triggerCoachPositionsCollection[this.currSelectedCoachIndex], c = e === this.triggerCoachPositionsCollection[this.currSelectedCoachIndex].start;
+      return (e < i || e > s.start) && !c;
+    }
+    /**
+     * Returns the coach index which is currently visible in the scroll area
+     * @returns number
+     */
+    _getCoachIndexByScrollTriggerPosition() {
+      const e = this.coachScrollArea.scrollLeft + this.scrollCoachsAreaWidth / 2;
+      return this.triggerCoachPositionsCollection.findIndex((t) => e >= t.start && e <= t.end);
+    }
+    /**
+     * Get the first place of current selected coach by table cell coordinate 0-0 id.
+     * @returns Place or null
+     */
+    _getFirstPlaceInSelecedCoach() {
+      var c, C, u, N, a;
+      let e = null;
+      const t = (c = this.seatReservation) == null ? void 0 : c.coachItems[this.currSelectedCoachIndex], i = "cell-" + this.currSelectedCoachIndex + "-0-0", s = ((N = (u = (C = this.shadowRoot) == null ? void 0 : C.querySelector("[cell-id='" + i + "']")) == null ? void 0 : u.querySelector("sbb-seat-reservation-place-control")) == null ? void 0 : N.getAttribute("text")) || null;
+      return t && s && (e = ((a = t.places) == null ? void 0 : a.find((ce) => ce.number === s)) || null), e;
+    }
+    /**
+     * To get the correct closest place of current pressed key and the current selected place,
+     * we have to investigate the coordinates of each place to find the closest place of the currSelectedPlaceElementId.
+     * @param pressedKey
+     * @returns Place or null
+     */
+    _getClosestPlaceByKeyDirection(e) {
+      var s, c, C, u, N;
+      const t = (s = this.seatReservation) == null ? void 0 : s.coachItems[this.currSelectedCoachIndex];
+      let i = null;
+      if (t.places)
+        if (this.currSelectedPlaceElementId) {
+          if (this.currSelectedPlace)
+            for (const a of t.places)
+              e ? a.number !== ((u = this.currSelectedPlace) == null ? void 0 : u.number) && (e === this.keyboardNavigationEvents.ArrowRight && (a.position.y === this.currSelectedPlace.position.y || a.position.y === this.currSelectedPlace.position.y - 1) && a.position.x > this.currSelectedPlace.position.x && (!i || a.position.x < i.position.x) || e === this.keyboardNavigationEvents.ArrowDown && (a.position.x === this.currSelectedPlace.position.x || a.position.x === this.currSelectedPlace.position.x + 1) && a.position.y > this.currSelectedPlace.position.y && (!i || a.position.y < i.position.y) || e === this.keyboardNavigationEvents.ArrowLeft && (a.position.y === this.currSelectedPlace.position.y || a.position.y === this.currSelectedPlace.position.y + 1) && a.position.x < this.currSelectedPlace.position.x && (!i || a.position.x > i.position.x) || e === this.keyboardNavigationEvents.ArrowUp && (a.position.x === this.currSelectedPlace.position.x || a.position.x === this.currSelectedPlace.position.x - 1) && a.position.y < ((N = this.currSelectedPlace) == null ? void 0 : N.position.y) && (!i || a.position.y > i.position.y)) && (i = a) : (this.currScrollDirection === S.right && a.position.y === ((c = this.currSelectedPlace) == null ? void 0 : c.position.y) && (!i || a.position.x < i.position.x) || this.currScrollDirection === S.left && a.position.y === ((C = this.currSelectedPlace) == null ? void 0 : C.position.y) && (!i || a.position.x > i.position.x)) && (i = a);
+        } else
+          return this._getFirstPlaceInSelecedCoach();
+      return i;
+    }
+    focusPlaceElement(e, t) {
+      if (this.unfocusPlaceElement(), e) {
+        this.currSelectedPlace = e, t && (this.currSelectedCoachIndex = t), this._setCurrSelectedPlaceElementId(e);
+        const i = this._getPlaceHtmlElement();
+        i && i.setAttribute("keyfocus", "focus");
+      }
+    }
+    unfocusPlaceElement() {
+      const e = this._getPlaceHtmlElement();
+      e && (e.setAttribute("keyfocus", "unfocus"), this._setCurrSelectedPlaceElementId(null), this.currSelectedPlace = null);
+    }
+    getCalculatedDimension(e, t, i, s) {
+      return t && !i && (e.h += this.coachBorderOffset * 2), s && (e.h += this.coachBorderOffset), {
+        w: this.baseGridSize * e.w,
+        h: this.baseGridSize * e.h
+      };
+    }
+    getCalculatedPosition(e, t, i, s) {
+      if (i && t) {
+        const c = s ? i.h : i.h + this.coachBorderOffset;
+        e.y === 0 ? e.y -= this.coachBorderOffset : e.y + t.h === c && (e.y += this.coachBorderOffset);
+      }
+      return {
+        x: this.baseGridSize * e.x,
+        y: this.baseGridSize * e.y,
+        z: e.z
+      };
+    }
+    // Handling for Tab navigation if an place is selected inside the coach.
+    // This controls the focused coach from the current selected coach.
+    _navigateCoachNavigationByKeyboard(e) {
+      const t = this.focusedCoachIndex === -1 ? this.currSelectedCoachIndex === -1 ? 0 : this.currSelectedCoachIndex : this.focusedCoachIndex, i = e === "NEXT_TAB" ? this.getNextAvailableCoachIndex(t) : this.getPrevAvailableCoachIndex(t);
+      if (t === i) {
+        this.unfocusPlaceElement(), this.selectedCoachIndex = -1, this.currSelectedCoachIndex = -1, this.seatReservationWithoutNavigationHasFocus = !1, e === "NEXT_TAB" ? this.lastTabElement.focus() : this.firstTabElement.focus();
+        return;
+      }
+      if (this.hasNavigation) {
+        const s = this._getPlaceHtmlElement(), c = s ? s.getAttribute("keyfocus") === "focus" : !1;
+        e === "PREV_TAB" && this.selectedCoachIndex === t ? c ? (this.focusedCoachIndex = t, this.unfocusPlaceElement()) : this.focusedCoachIndex = i : i !== this.currSelectedCoachIndex ? this.focusedCoachIndex = i : (this.focusedCoachIndex = -1, this.selectedCoachIndex = i, c ? this.focusPlaceElement(this.currSelectedPlace) : (this.isCoachGridFocusable = !0, this._setFocusToSelectedCoachGrid()));
+      } else
+        this.scrollToSelectedNavCoach(i);
+    }
+    _navigateToPlaceByKeyboard(e) {
+      if (this.preventCoachScrollByPlaceClick = !1, this.isKeyboardNavigation = !0, this.focusedCoachIndex !== -1 && (this.focusedCoachIndex = -1), !this.preventPlaceClick) {
+        const t = this._getClosestPlaceByKeyDirection(e);
+        if (t)
+          this.focusPlaceElement(t);
+        else if (e === this.keyboardNavigationEvents.ArrowRight || e === this.keyboardNavigationEvents.ArrowLeft || this.alignVertical && (e === this.keyboardNavigationEvents.ArrowUp || e === this.keyboardNavigationEvents.ArrowDown)) {
+          const i = e === this.keyboardNavigationEvents.ArrowRight ? this.getNextAvailableCoachIndex() : this.getPrevAvailableCoachIndex();
+          this.scrollToSelectedNavCoach(i);
+        }
+      }
+    }
+    getNextAvailableCoachIndex(e) {
+      const t = e ?? this.currSelectedCoachIndex;
+      return t < this.seatReservation.coachItems.length - 1 ? t + 1 : t;
+    }
+    getPrevAvailableCoachIndex(e) {
+      const t = e ?? this.currSelectedCoachIndex;
+      return t > 0 ? t - 1 : t;
+    }
+    updateSelectedSeatReservationPlaces(e) {
+      if (e.state === "SELECTED") {
+        const t = this._getSeatReservationPlaceSelection(e);
+        t && this.selectedSeatReservationPlaces.push(t);
+      } else
+        this.selectedSeatReservationPlaces = this.selectedSeatReservationPlaces.filter((t) => t.id !== e.id);
+      this.maxReservations && this.selectedSeatReservationPlaces.length > this.maxReservations && this._resetAllPlaceSelections(e), this.selectedPlaces.emit(this.selectedSeatReservationPlaces);
+    }
+    updateCurrentSelectedPlaceInCoach(e) {
+      var s;
+      const t = e.coachIndex, i = (s = this.seatReservation.coachItems[t].places) == null ? void 0 : s.find((c) => c.number == e.number);
+      i && (this.currSelectedCoachIndex = t, this.currSelectedPlace = i, this.currSelectedCoachIndex !== this.selectedCoachIndex && this.updateCurrentSelectedCoach(), this._setCurrSelectedPlaceElementId(i));
+    }
+    updateCurrentSelectedCoach() {
+      this.selectedCoachIndex = this.currSelectedCoachIndex, this.focusedCoachIndex = -1;
+      const e = this._getSeatReservationCoachSelection(this.selectedCoachIndex);
+      e && this.selectedCoach.emit(e);
+    }
+    /**
+     * Initialization of SeatReservationPlaceSelection Array based on the transferred places
+     * that have the state SELECTED within the seatReservation object
+     */
+    _initSeatReservationPlaceSelection() {
+      this.seatReservation.coachItems.map((e, t) => {
+        var i, s;
+        (s = (i = e.places) == null ? void 0 : i.filter((c) => c.state === "SELECTED")) == null || s.forEach((c) => {
+          const C = le(c, t), u = this._getSeatReservationPlaceSelection(C);
+          u && this.selectedSeatReservationPlaces.push(u);
+        });
+      });
+    }
+    /**
+     * All selected places will be reset or the currentSelectedPlace was given, then we reset all except currentSelectedPlace
+     * @param currSelectedPlace
+     */
+    _resetAllPlaceSelections(e) {
+      var t;
+      for (const i of this.selectedSeatReservationPlaces)
+        (!e || e.id !== i.id) && ((t = this.shadowRoot) == null ? void 0 : t.getElementById(i.id)).setAttribute("state", "FREE");
+      e ? this.selectedSeatReservationPlaces = this.selectedSeatReservationPlaces.filter((i) => i.id === e.id) : this.selectedSeatReservationPlaces = [];
+    }
+    _getSeatReservationPlaceSelection(e) {
+      var s;
+      const t = this.seatReservation.coachItems[e.coachIndex], i = (s = t.places) == null ? void 0 : s.find((c) => c.number === e.number);
+      return i ? he(i, t, e.coachIndex) : null;
+    }
+    _getSeatReservationCoachSelection(e) {
+      if (!this.seatReservation.coachItems[e])
+        return null;
+      const t = this.seatReservation.coachItems[e];
+      return ne(e, t);
+    }
+    _setCurrSelectedPlaceElementId(e) {
+      e ? this.currSelectedPlaceElementId = "seat-reservation__place-button-" + this.currSelectedCoachIndex + "-" + e.number : this.currSelectedPlaceElementId = null;
+    }
+    /**
+     * Returns the current selected place HTML element by given placeNumber and coachIndex.
+     * If both doesnt exist, we try to return the place HTML element by the _currentSelectedPlaceElementId
+     * @param placeNumber optional as string
+     * @param coachIndex optional as string
+     * @returns HTMLElement or null
+     */
+    _getPlaceHtmlElement(e, t) {
+      var c;
+      const i = t || this.currSelectedCoachIndex, s = e ? "seat-reservation__place-button-" + i + "-" + e : this.currSelectedPlaceElementId;
+      return s && ((c = this.shadowRoot) == null ? void 0 : c.getElementById(s)) || null;
+    }
+    //Set the vertical offset
+    _setVerticalAlignmentOffset() {
+      setTimeout(() => {
+        var t, i;
+        const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".sbb-sr__wrapper");
+        if (e) {
+          const s = e.getBoundingClientRect().width;
+          (i = this.style) == null || i.setProperty("--sbb-seat-reservation-vertical-offset", `${s}px`);
+        }
+      });
+    }
+  }, p = new WeakMap(), b = new WeakMap(), P = new WeakMap(), I = new WeakMap(), m = new WeakMap(), _ = new WeakMap(), y = new WeakMap(), R = new WeakMap(), A = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    n = [x({ attribute: "seat-reservation", type: Object })], k = [E(), x({ attribute: "has-navigation", type: Boolean })], B = [E(), x({ attribute: "align-vertical", type: Boolean })], F = [E(), x({ attribute: "base-grid-size", type: Number })], W = [E(), x({ attribute: "height", type: Number })], H = [E(), x({ attribute: "max-reservations", type: Number })], q = [E(), x({ attribute: "prevent-place-click", type: Boolean })], $ = [ae()], Y = [ae()], v(l, null, n, { 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 }, d, w), v(l, 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 }, T, z), v(l, null, B, { 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 }, G, V), v(l, null, F, { kind: "accessor", name: "baseGridSize", static: !1, private: !1, access: { has: (t) => "baseGridSize" in t, get: (t) => t.baseGridSize, set: (t, i) => {
+      t.baseGridSize = i;
+    } }, metadata: e }, O, D), v(l, null, W, { 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 }, K, L), v(l, null, H, { 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 }, U, X), v(l, null, q, { 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 }, M, j), v(l, null, $, { kind: "accessor", name: "selectedCoachIndex", static: !1, private: !1, access: { has: (t) => "selectedCoachIndex" in t, get: (t) => t.selectedCoachIndex, set: (t, i) => {
+      t.selectedCoachIndex = i;
+    } }, metadata: e }, J, Q), v(l, null, Y, { kind: "accessor", name: "focusedCoachIndex", static: !1, private: !1, access: { has: (t) => "focusedCoachIndex" in t, get: (t) => t.focusedCoachIndex, set: (t, i) => {
+      t.focusedCoachIndex = i;
+    } }, metadata: e }, Z, ee), e && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), l.events = {
+    selectedPlaces: "selectedPlaces",
+    selectedCoach: "selectedCoach"
+  }, l;
+})();
+export {
+  be as SeatReservationBaseElement
+};

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

@@ -0,0 +1,29 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+/**
+ * Wrapper class for scoped elements with similar properties to set.
+ */
+export declare class SbbSeatReservationScopedElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** Inset block start in pixels (without unit) */
+    accessor insetBlockStart: string;
+    /** Inset inline start in pixels (without unit) */
+    accessor insetInlineStart: string;
+    /** Width of the scoped element in pixels (without unit) */
+    accessor width: string;
+    /** Height of the scoped element in pixels (without unit) */
+    accessor height: string;
+    /** Z-index of the scoped element */
+    accessor zIndex: string;
+    /** Cell id of the scoped element, if it is used in a table */
+    accessor cellId: string;
+    /** Scoped classes for the scoped element */
+    accessor scopedClasses: string;
+    protected willUpdate(_changedProperties: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-seat-reservation-scoped': SbbSeatReservationScopedElement;
+    }
+}
+//# sourceMappingURL=seat-reservation-scoped.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"seat-reservation-scoped.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements-experimental/seat-reservation/seat-reservation/seat-reservation-scoped/seat-reservation-scoped.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpF,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC;;GAEG;AACH,qBAEM,+BAAgC,SAAQ,UAAU;IACtD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,iDAAiD;IACjD,SAEgB,eAAe,EAAE,MAAM,CAAM;IAE7C,kDAAkD;IAClD,SAEgB,gBAAgB,EAAE,MAAM,CAAM;IAE9C,2DAA2D;IAC3D,SAEgB,KAAK,EAAE,MAAM,CAAM;IAEnC,4DAA4D;IAC5D,SAEgB,MAAM,EAAE,MAAM,CAAM;IAEpC,oCAAoC;IACpC,SAEgB,MAAM,EAAE,MAAM,CAAM;IAEpC,8DAA8D;IAC9D,SAEgB,MAAM,EAAE,MAAM,CAAM;IAEpC,4CAA4C;IAC5C,SAEgB,aAAa,EAAE,MAAM,CAAM;cAExB,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;cA8BpD,MAAM,IAAI,cAAc;CAW5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,6BAA6B,EAAE,+BAA+B,CAAC;KAChE;CACF"}