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

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

@@ -10,13 +10,13 @@ import { forceType as v } from "@sbb-esta/lyne-elements/core/decorators.js";
 import { EventEmitter as ft } from "@sbb-esta/lyne-elements/core/eventing.js";
 import { css as gt, nothing as kt, html as xt } from "lit";
 import { customElement as yt, property as d } from "lit/decorators.js";
-import { getI18nSeatReservation as R } from "../common.js";
+import { getI18nSeatReservation as C } from "../common.js";
 import "../seat-reservation-graphic.js";
 const mt = gt`*,:before,:after{box-sizing:border-box}:host{--sbb-reservation-place-control-rotation: 0;--sbb-reservation-place-control-text-rotation: 0;--sbb-reservation-place-control-text-size: calc( var(--sbb-place-control-text-scale-value, 1) * .5 );--sbb-reservation-place-control-default-text: var(--sbb-color-black);--sbb-reservation-place-control-hover-text: var(--sbb-color-iron);--sbb-reservation-place-control-focus-text: var(--sbb-color-anthracite);--sbb-reservation-place-control-allocated-text: var(--sbb-color-smoke);--sbb-reservation-place-control-free-background-default: var(--sbb-color-white);--sbb-reservation-place-control-free-background-hover: var(--sbb-color-cloud);--sbb-reservation-place-control-free-background-focus: var(--sbb-color-silver);--sbb-reservation-place-control-free-backrest-background-default: var(--sbb-color-black);--sbb-reservation-place-control-free-backrest-background-hover: var(--sbb-color-black);--sbb-reservation-place-control-free-backrest-background-focus: var(--sbb-color-black);--sbb-reservation-place-control-selected-background-default: var(--sbb-color-red);--sbb-reservation-place-control-selected-background-hover: var(--sbb-color-red125);--sbb-reservation-place-control-selected-background-focus: var(--sbb-color-red150);--sbb-reservation-place-control-selected-backrest-background-default: var(--sbb-color-red150);--sbb-reservation-place-control-selected-backrest-background-hover: #7d000f;--sbb-reservation-place-control-selected-backrest-background-focus: #5a000b;--sbb-reservation-place-control-allocated-background-default: var(--sbb-color-milk);cursor:pointer}:host(:hover) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) ::part(svg-place){fill:var(--sbb-reservation-place-control-free-background-hover)}:host(:hover) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) ::part(svg-backrest){fill:var(--sbb-reservation-place-control-free-backrest-background-hover)}:host(:hover) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) .sbb-sr-place-ctrl__text{background-color:var(--sbb-reservation-place-control-free-background-hover);color:var(--sbb-reservation-place-control-free-text)}:host(:hover) .sbb-sr-place-ctrl--state-selected:not(.sbb-reservation-place-control--disabled) ::part(svg-place){fill:var(--sbb-reservation-place-control-selected-background-hover)}:host(:hover) .sbb-sr-place-ctrl--state-selected:not(.sbb-reservation-place-control--disabled) ::part(svg-backrest){fill:var(--sbb-reservation-place-control-selected-backrest-background-hover)}:host(:hover) .sbb-sr-place-ctrl--state-selected:not(.sbb-reservation-place-control--disabled) .sbb-sr-place-ctrl__text{background-color:var(--sbb-reservation-place-control-selected-background-hover);color:var(--sbb-reservation-place-control-selected-text)}:host(:focus){border-radius:var(--sbb-border-width-1x);outline:var(--sbb-border-width-2x) solid var(--sbb-color-black)}:host(:focus) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) ::part(svg-place){fill:var(--sbb-reservation-place-control-free-background-focus)}:host(:focus) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) ::part(svg-backrest){fill:var(--sbb-reservation-place-control-free-backrest-background-focus)}:host(:focus) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) .sbb-sr-place-ctrl__text{background-color:var(--sbb-reservation-place-control-free-background-focus);color:var(--sbb-reservation-place-control-free-text)}:host(:focus) .sbb-sr-place-ctrl--state-selected:not(.sbb-reservation-place-control--disabled) ::part(svg-place){fill:var(--sbb-reservation-place-control-selected-background-focus)}:host(:focus) .sbb-sr-place-ctrl--state-selected:not(.sbb-reservation-place-control--disabled) ::part(svg-backrest){fill:var(--sbb-reservation-place-control-selected-backrest-background-focus)}:host(:focus) .sbb-sr-place-ctrl--state-selected:not(.sbb-reservation-place-control--disabled) .sbb-sr-place-ctrl__text{background-color:var(--sbb-reservation-place-control-selected-background-focus);color:var(--sbb-reservation-place-control-selected-text)}.sbb-sr-place-ctrl{width:max-content;position:relative;font-size:calc(var(--sbb-reservation-place-control-text-size) * .0625rem)}.sbb-sr-place-ctrl--state-free ::part(svg-place){fill:var(--sbb-reservation-place-control-free-background-default)}.sbb-sr-place-ctrl--state-free ::part(svg-backrest){fill:var(--sbb-reservation-place-control-free-backrest-background-default)}.sbb-sr-place-ctrl--state-free .sbb-sr-place-ctrl__text{background-color:var(--sbb-reservation-place-control-free-background-default);color:var(--sbb-reservation-place-control-free-text)}.sbb-sr-place-ctrl--state-selected ::part(svg-place){fill:var(--sbb-reservation-place-control-selected-background-default)}.sbb-sr-place-ctrl--state-selected ::part(svg-backrest){fill:var(--sbb-reservation-place-control-selected-backrest-background-default)}.sbb-sr-place-ctrl--state-selected .sbb-sr-place-ctrl__text{background-color:var(--sbb-reservation-place-control-selected-background-default);color:var(--sbb-reservation-place-control-selected-text)}.sbb-sr-place-ctrl--state-allocated,.sbb-sr-place-ctrl--state-restricted{cursor:not-allowed}.sbb-sr-place-ctrl--state-allocated ::part(svg-place),.sbb-sr-place-ctrl--state-restricted ::part(svg-place){fill:var(--sbb-reservation-place-control-allocated-background-default)}.sbb-sr-place-ctrl--state-allocated ::part(svg-backrest),.sbb-sr-place-ctrl--state-restricted ::part(svg-backrest){fill:var(--sbb-reservation-place-control-allocated-backrest-background-default)}.sbb-sr-place-ctrl--state-allocated .sbb-sr-place-ctrl__text,.sbb-sr-place-ctrl--state-restricted .sbb-sr-place-ctrl__text{background-color:var(--sbb-reservation-place-control-allocated-background-default);color:var(--sbb-reservation-place-control-allocated-text)}.sbb-sr-place-ctrl__text{overflow:hidden;display:none;position:absolute;inset-block-start:50%;translate:-50% -50%;rotate:calc(var(--sbb-reservation-place-control-text-rotation) * 1deg);font-family:var(--sbb-typo-font-family);font-size:.75em;line-height:initial}.sbb-sr-place-ctrl--state-free .sbb-sr-place-ctrl__text,.sbb-sr-place-ctrl--state-allocated .sbb-sr-place-ctrl__text,.sbb-sr-place-ctrl--state-restricted.sbb-sr-place-ctrl--type-bicycle .sbb-sr-place-ctrl__text{display:block}.sbb-sr-place-ctrl--type-bicycle .sbb-sr-place-ctrl__text{inset-block-start:65%;inset-inline-start:50%;transform-origin:center 16%;font-size:.6875em}.sbb-sr-place-ctrl--orientation-0.sbb-sr-place-ctrl--type-seat .sbb-sr-place-ctrl__text{inset-inline-start:45%}.sbb-sr-place-ctrl--orientation-90.sbb-sr-place-ctrl--type-seat .sbb-sr-place-ctrl__text{inset-block-start:46%;inset-inline-start:50%}.sbb-sr-place-ctrl--orientation-180.sbb-sr-place-ctrl--type-seat .sbb-sr-place-ctrl__text{inset-inline-start:55%}.sbb-sr-place-ctrl--orientation-270.sbb-sr-place-ctrl--type-seat .sbb-sr-place-ctrl__text{inset-block-start:52%;inset-inline-start:52%}`;
 let Dt = (() => {
   var u, _, f, g, k, x, y, m, I, z, w, c;
-  let o = [yt("sbb-seat-reservation-place-control")], l, i = [], h, S = ut, T, P = [], $ = [], L, D = [], A = [], N, O = [], F = [], j, B = [], U = [], K, M = [], Y = [], q, G = [], H = [], J, Q = [], V = [], W, X = [], Z = [], tt, et = [], st = [], rt, at = [], ct = [], ot, lt = [], it = [];
-  var C = (c = class extends S {
+  let o = [yt("sbb-seat-reservation-place-control")], l, i = [], h, R = ut, S, T = [], P = [], $, L = [], D = [], A, N = [], O = [], F, j = [], B = [], U, K = [], M = [], Y, q = [], G = [], H, J = [], Q = [], V, W = [], X = [], Z, tt = [], et = [], st, rt = [], at = [], ct, ot = [], lt = [];
+  var E = (c = class extends R {
     constructor() {
       super();
       b(this, u);
@@ -30,7 +30,7 @@ let Dt = (() => {
       b(this, I);
       b(this, z);
       b(this, w);
-      r(this, u, a(this, P, "SEAT")), r(this, _, (a(this, $), a(this, D, "FREE"))), r(this, f, (a(this, A), a(this, O, []))), r(this, g, (a(this, F), a(this, B, 0))), r(this, k, (a(this, U), a(this, M, 32))), r(this, x, (a(this, Y), a(this, G, 32))), r(this, y, (a(this, H), a(this, Q, ""))), r(this, m, (a(this, V), a(this, X, 0))), r(this, I, (a(this, Z), a(this, et, null))), r(this, z, (a(this, st), a(this, at, !1))), r(this, w, (a(this, ct), a(this, lt, "unfocus"))), this.placeSelected = (a(this, it), new ft(this, C.events.selectPlace)), this._language = new _t(this), this.addEventListener("click", () => this._selectPlace());
+      r(this, u, a(this, T, "SEAT")), r(this, _, (a(this, P), a(this, L, "FREE"))), r(this, f, (a(this, D), a(this, N, []))), r(this, g, (a(this, O), a(this, j, 0))), r(this, k, (a(this, B), a(this, K, 32))), r(this, x, (a(this, M), a(this, q, 32))), r(this, y, (a(this, G), a(this, J, ""))), r(this, m, (a(this, Q), a(this, W, 0))), r(this, I, (a(this, X), a(this, tt, null))), r(this, z, (a(this, et), a(this, rt, !1))), r(this, w, (a(this, at), a(this, ot, "unfocus"))), this.placeSelected = (a(this, lt), new ft(this, E.events.selectPlace)), this._language = new _t(this), this.addEventListener("click", () => this._selectPlace());
     }
     /** placeType of the place, e.g. 'SEAT', 'BICYCLE' */
     get placeType() {
@@ -110,11 +110,10 @@ let Dt = (() => {
       r(this, w, e);
     }
     willUpdate(e) {
-      var t, s, E;
-      super.willUpdate(e), (e.has("width") || e.has("height")) && ((t = this.style) == null || t.setProperty("--sbb-place-control-text-scale-value", `${Math.min(this.width, this.height)}`)), e.has("textRotation") && ((s = this.style) == null || s.setProperty("--sbb-reservation-place-control-text-rotation", `${this.textRotation}`)), e.has("rotation") && ((E = this.style) == null || E.setProperty("--sbb-reservation-place-control-rotation", `${this.rotation}`)), e.has("keyfocus") && this.keyfocus === "focus" && this.focus();
+      super.willUpdate(e), (e.has("width") || e.has("height")) && this.style?.setProperty("--sbb-place-control-text-scale-value", `${Math.min(this.width, this.height)}`), e.has("textRotation") && this.style?.setProperty("--sbb-reservation-place-control-text-rotation", `${this.textRotation}`), e.has("rotation") && this.style?.setProperty("--sbb-reservation-place-control-rotation", `${this.rotation}`), e.has("keyfocus") && this.keyfocus === "focus" && this.focus();
     }
     render() {
-      const e = this._getPlaceSvg(this.placeType, this.state), t = this.type.toLowerCase(), s = this.state.toLowerCase(), E = this.text, pt = this.width, dt = this.height, ht = this.textRotation - this.rotation, vt = this.preventClick ? "sbb-reservation-place-control--disabled" : null;
+      const e = this._getPlaceSvg(this.placeType, this.state), t = this.type.toLowerCase(), s = this.state.toLowerCase(), it = this.text, pt = this.width, dt = this.height, ht = this.textRotation - this.rotation, vt = this.preventClick ? "sbb-reservation-place-control--disabled" : null;
       return this.title = this._getTitleDescriptionPlace(), this.tabIndex = -1, xt`
       <div
         part="sbb-sr-place-part"
@@ -129,7 +128,7 @@ let Dt = (() => {
           aria-hidden="true"
         ></sbb-seat-reservation-graphic>
         <span ${this.text ?? kt} class="sbb-sr-place-ctrl__text" aria-hidden="true"
-          >${E}</span
+          >${it}</span
         >
       </div>
     `;
@@ -139,8 +138,8 @@ let Dt = (() => {
     }
     _getTitleDescriptionPlace() {
       const e = "PLACE_CONTROL_" + this.type + "_" + this.state;
-      let t = R(e, this._language.current, [this.text]);
-      return this.propertyIds.length && (t += ". " + R("PLACE_PROPERTY", this._language.current).concat(": "), t += this.propertyIds.map((s) => R(s, this._language.current)).join(", ")), t;
+      let t = C(e, this._language.current, [this.text]);
+      return this.propertyIds.length && (t += ". " + C("PLACE_PROPERTY", this._language.current).concat(": "), t += this.propertyIds.map((s) => C(s, this._language.current)).join(", ")), t;
     }
     /** If the place selectable, we emit the placeSelection object which contains infos to the place state */
     _selectPlace() {
@@ -156,34 +155,34 @@ let Dt = (() => {
       }
     }
   }, u = new WeakMap(), _ = new WeakMap(), f = new WeakMap(), g = new WeakMap(), k = new WeakMap(), x = new WeakMap(), y = new WeakMap(), m = new WeakMap(), I = new WeakMap(), z = new WeakMap(), w = new WeakMap(), h = c, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(S[Symbol.metadata] ?? null) : void 0;
-    T = [v(), d({ attribute: "type" })], L = [v(), d({ attribute: "state" })], N = [d({ attribute: "propertyIds", type: Array })], j = [v(), d({ attribute: "rotation", type: Number })], K = [v(), d({ attribute: "width", type: Number })], q = [v(), d({ attribute: "height", type: Number })], J = [v(), d({ attribute: "text" })], W = [v(), d({ attribute: "text-rotation" })], tt = [v(), d({ attribute: "coach-index", type: Number })], rt = [v(), d({ attribute: "prevent-click", type: Boolean })], ot = [v(), d({ attribute: "keyfocus" })], p(c, null, T, { kind: "accessor", name: "placeType", static: !1, private: !1, access: { has: (t) => "placeType" in t, get: (t) => t.placeType, set: (t, s) => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(R[Symbol.metadata] ?? null) : void 0;
+    S = [v(), d({ attribute: "type" })], $ = [v(), d({ attribute: "state" })], A = [d({ attribute: "propertyIds", type: Array })], F = [v(), d({ attribute: "rotation", type: Number })], U = [v(), d({ attribute: "width", type: Number })], Y = [v(), d({ attribute: "height", type: Number })], H = [v(), d({ attribute: "text" })], V = [v(), d({ attribute: "text-rotation" })], Z = [v(), d({ attribute: "coach-index", type: Number })], st = [v(), d({ attribute: "prevent-click", type: Boolean })], ct = [v(), d({ attribute: "keyfocus" })], p(c, null, S, { kind: "accessor", name: "placeType", static: !1, private: !1, access: { has: (t) => "placeType" in t, get: (t) => t.placeType, set: (t, s) => {
       t.placeType = s;
-    } }, metadata: e }, P, $), p(c, null, L, { kind: "accessor", name: "state", static: !1, private: !1, access: { has: (t) => "state" in t, get: (t) => t.state, set: (t, s) => {
+    } }, metadata: e }, T, P), p(c, null, $, { kind: "accessor", name: "state", static: !1, private: !1, access: { has: (t) => "state" in t, get: (t) => t.state, set: (t, s) => {
       t.state = s;
-    } }, metadata: e }, D, A), p(c, null, N, { kind: "accessor", name: "propertyIds", static: !1, private: !1, access: { has: (t) => "propertyIds" in t, get: (t) => t.propertyIds, set: (t, s) => {
+    } }, metadata: e }, L, D), p(c, null, A, { kind: "accessor", name: "propertyIds", static: !1, private: !1, access: { has: (t) => "propertyIds" in t, get: (t) => t.propertyIds, set: (t, s) => {
       t.propertyIds = s;
-    } }, metadata: e }, O, F), p(c, null, j, { kind: "accessor", name: "rotation", static: !1, private: !1, access: { has: (t) => "rotation" in t, get: (t) => t.rotation, set: (t, s) => {
+    } }, metadata: e }, N, O), p(c, null, F, { kind: "accessor", name: "rotation", static: !1, private: !1, access: { has: (t) => "rotation" in t, get: (t) => t.rotation, set: (t, s) => {
       t.rotation = s;
-    } }, metadata: e }, B, U), p(c, null, K, { kind: "accessor", name: "width", static: !1, private: !1, access: { has: (t) => "width" in t, get: (t) => t.width, set: (t, s) => {
+    } }, metadata: e }, j, B), p(c, null, U, { kind: "accessor", name: "width", static: !1, private: !1, access: { has: (t) => "width" in t, get: (t) => t.width, set: (t, s) => {
       t.width = s;
-    } }, metadata: e }, M, Y), p(c, null, q, { kind: "accessor", name: "height", static: !1, private: !1, access: { has: (t) => "height" in t, get: (t) => t.height, set: (t, s) => {
+    } }, metadata: e }, K, M), p(c, null, Y, { kind: "accessor", name: "height", static: !1, private: !1, access: { has: (t) => "height" in t, get: (t) => t.height, set: (t, s) => {
       t.height = s;
-    } }, metadata: e }, G, H), p(c, null, J, { kind: "accessor", name: "text", static: !1, private: !1, access: { has: (t) => "text" in t, get: (t) => t.text, set: (t, s) => {
+    } }, metadata: e }, q, G), p(c, null, H, { kind: "accessor", name: "text", static: !1, private: !1, access: { has: (t) => "text" in t, get: (t) => t.text, set: (t, s) => {
       t.text = s;
-    } }, metadata: e }, Q, V), p(c, null, W, { kind: "accessor", name: "textRotation", static: !1, private: !1, access: { has: (t) => "textRotation" in t, get: (t) => t.textRotation, set: (t, s) => {
+    } }, metadata: e }, J, Q), p(c, null, V, { kind: "accessor", name: "textRotation", static: !1, private: !1, access: { has: (t) => "textRotation" in t, get: (t) => t.textRotation, set: (t, s) => {
       t.textRotation = s;
-    } }, metadata: e }, X, Z), p(c, null, tt, { kind: "accessor", name: "coachIndex", static: !1, private: !1, access: { has: (t) => "coachIndex" in t, get: (t) => t.coachIndex, set: (t, s) => {
+    } }, metadata: e }, W, X), p(c, null, Z, { kind: "accessor", name: "coachIndex", static: !1, private: !1, access: { has: (t) => "coachIndex" in t, get: (t) => t.coachIndex, set: (t, s) => {
       t.coachIndex = s;
-    } }, metadata: e }, et, st), p(c, null, rt, { kind: "accessor", name: "preventClick", static: !1, private: !1, access: { has: (t) => "preventClick" in t, get: (t) => t.preventClick, set: (t, s) => {
+    } }, metadata: e }, tt, et), p(c, null, st, { kind: "accessor", name: "preventClick", static: !1, private: !1, access: { has: (t) => "preventClick" in t, get: (t) => t.preventClick, set: (t, s) => {
       t.preventClick = s;
-    } }, metadata: e }, at, ct), p(c, null, ot, { kind: "accessor", name: "keyfocus", static: !1, private: !1, access: { has: (t) => "keyfocus" in t, get: (t) => t.keyfocus, set: (t, s) => {
+    } }, metadata: e }, rt, at), p(c, null, ct, { kind: "accessor", name: "keyfocus", static: !1, private: !1, access: { has: (t) => "keyfocus" in t, get: (t) => t.keyfocus, set: (t, s) => {
       t.keyfocus = s;
-    } }, metadata: e }, lt, it), p(null, l = { value: h }, o, { kind: "class", name: h.name, metadata: e }, null, i), C = h = l.value, e && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+    } }, metadata: e }, ot, lt), p(null, l = { value: h }, o, { kind: "class", name: h.name, metadata: e }, null, i), E = h = l.value, e && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), c.styles = mt, c.events = {
     selectPlace: "selectPlace"
   }, a(h, i), c);
-  return C = h;
+  return E = h;
 })();
 export {
   Dt as SbbSeatReservationPlaceControlElement