@sbb-esta/lyne-elements-experimental 0.0.0 → 0.52.0

package/development/pearl-chain-time.js

@@ -0,0 +1,209 @@
+import { SbbLanguageController } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { defaultDateAdapter } from "@sbb-esta/lyne-elements/core/datetime.js";
+import { i18nDeparture, i18nTransferProcedures, i18nArrival } from "@sbb-esta/lyne-elements/core/i18n.js";
+import { css, LitElement, html, nothing } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { removeTimezoneFromISOTimeString } from "./core/datetime.js";
+import { getDepartureArrivalTimeAttribute, isRideLeg } from "./core/timetable.js";
+import "./pearl-chain.js";
+import { f as format } from "./format-WI2gcVKN.js";
+const style = css`/**
+ * Better font rendering (on OS X)
+ * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ *
+ * Usage:
+ *
+ * .var_dark_on_light {
+ * 	@include font-smoothing;
+ * }
+ * .var_light_on_dark {
+ * 	@include font-smoothing-reset;
+ * }
+ */
+/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --sbb-pearl-chain-time-height: auto;
+  display: block;
+}
+@media (min-width: calc(37.5rem)) {
+  :host {
+    --sbb-pearl-chain-time-height: 1.5625rem;
+  }
+}
+@media (min-width: calc(52.5rem)) {
+  :host {
+    --sbb-pearl-chain-time-height: 1.75rem;
+  }
+}
+
+.sbb-pearl-chain__time {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  height: var(--sbb-pearl-chain-time-height);
+}
+
+.sbb-pearl-chain__time-walktime,
+.sbb-pearl-chain__time-transfer {
+  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  line-height: var(--sbb-typo-line-height-body-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  font-size: var(--sbb-text-font-size);
+  display: inline-flex;
+  align-items: center;
+}
+
+.sbb-pearl-chain__time-walktime--left {
+  transform: translateX(-0.4375rem);
+  margin-inline-end: calc(var(--sbb-spacing-fixed-2x) - 0.4375rem);
+}
+
+.sbb-pearl-chain__time-walktime--right {
+  margin-inline-start: calc(var(--sbb-spacing-fixed-2x) - 0.25rem);
+}
+
+.sbb-pearl-chain__time-walktime-prime-symbol {
+  float: right;
+}
+
+.sbb-pearl-chain__time-transfer {
+  gap: var(--sbb-spacing-fixed-1x);
+}
+
+.sbb-pearl-chain__time-transfer--departure {
+  margin-inline-end: var(--sbb-spacing-fixed-2x);
+}
+
+.sbb-pearl-chain__time-transfer--arrival {
+  margin-inline-start: calc(var(--sbb-spacing-fixed-2x) - 0.25rem);
+}
+
+.sbb-pearl-chain__time-chain {
+  flex: 1 1 auto;
+  align-self: center;
+  margin-inline: var(--sbb-spacing-fixed-3x);
+}
+
+.sbb-pearl-chain__time-time {
+  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  line-height: var(--sbb-typo-line-height-body-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  font-size: var(--sbb-text-font-size);
+  font-weight: bold;
+  color: var(--sbb-color-charcoal);
+}
+
+.sbb-screen-reader-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}`;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SbbPearlChainTimeElement = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._now = null;
+    this._language = new SbbLanguageController(this);
+  }
+  set now(value) {
+    this._now = defaultDateAdapter.getValidDateOrNull(defaultDateAdapter.deserialize(value));
+  }
+  get now() {
+    return this._now ?? /* @__PURE__ */ new Date();
+  }
+  render() {
+    var _a;
+    const departure = this.departureTime ? removeTimezoneFromISOTimeString(this.departureTime) : void 0;
+    const arrival = this.arrivalTime ? removeTimezoneFromISOTimeString(this.arrivalTime) : void 0;
+    const { renderDepartureTimeAttribute, renderArrivalTimeAttribute } = getDepartureArrivalTimeAttribute(
+      this.legs,
+      this.departureWalk || 0,
+      this.arrivalWalk || 0,
+      this._language.current
+    );
+    const rideLegs = (_a = this.legs) == null ? void 0 : _a.filter((leg) => isRideLeg(leg));
+    return html`
+      <div class="sbb-pearl-chain__time">
+        ${renderDepartureTimeAttribute()}
+        ${departure ? html`<time class="sbb-pearl-chain__time-time" datetime=${this.departureTime}>
+              <span class="sbb-screen-reader-only"
+                >${i18nDeparture[this._language.current]}:&nbsp;</span
+              >
+              ${format(departure, "HH:mm")}
+            </time>` : nothing}
+        ${(rideLegs == null ? void 0 : rideLegs.length) > 1 ? html`<span class="sbb-screen-reader-only" role="paragraph">
+              ${(rideLegs == null ? void 0 : rideLegs.length) - 1} ${i18nTransferProcedures[this._language.current]}
+            </span>` : nothing}
+        <sbb-pearl-chain
+          class="sbb-pearl-chain__time-chain"
+          .legs=${this.legs}
+          .disableAnimation=${this.disableAnimation}
+          .now=${this.now}
+        ></sbb-pearl-chain>
+        ${arrival ? html`<time class="sbb-pearl-chain__time-time" datetime=${this.arrivalTime}>
+              <span class="sbb-screen-reader-only"
+                >${i18nArrival[this._language.current]}:&nbsp;</span
+              >
+              ${format(arrival, "HH:mm")}
+            </time>` : nothing}
+        ${renderArrivalTimeAttribute()}
+      </div>
+    `;
+  }
+};
+SbbPearlChainTimeElement.styles = style;
+__decorateClass([
+  property({ type: Array })
+], SbbPearlChainTimeElement.prototype, "legs", 2);
+__decorateClass([
+  property({ attribute: "departure-time" })
+], SbbPearlChainTimeElement.prototype, "departureTime", 2);
+__decorateClass([
+  property({ attribute: "arrival-time" })
+], SbbPearlChainTimeElement.prototype, "arrivalTime", 2);
+__decorateClass([
+  property({ attribute: "departure-walk", type: Number })
+], SbbPearlChainTimeElement.prototype, "departureWalk", 2);
+__decorateClass([
+  property({ attribute: "arrival-walk", type: Number })
+], SbbPearlChainTimeElement.prototype, "arrivalWalk", 2);
+__decorateClass([
+  property({ attribute: "disable-animation", type: Boolean })
+], SbbPearlChainTimeElement.prototype, "disableAnimation", 2);
+__decorateClass([
+  property()
+], SbbPearlChainTimeElement.prototype, "now", 1);
+SbbPearlChainTimeElement = __decorateClass([
+  customElement("sbb-pearl-chain-time")
+], SbbPearlChainTimeElement);
+export {
+  SbbPearlChainTimeElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGVhcmwtY2hhaW4tdGltZS5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2VsZW1lbnRzLWV4cGVyaW1lbnRhbC9wZWFybC1jaGFpbi10aW1lL3BlYXJsLWNoYWluLXRpbWUudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgU2JiTGFuZ3VhZ2VDb250cm9sbGVyIH0gZnJvbSAnQHNiYi1lc3RhL2x5bmUtZWxlbWVudHMvY29yZS9jb250cm9sbGVycy5qcyc7XG5pbXBvcnQgeyBkZWZhdWx0RGF0ZUFkYXB0ZXIgfSBmcm9tICdAc2JiLWVzdGEvbHluZS1lbGVtZW50cy9jb3JlL2RhdGV0aW1lLmpzJztcbmltcG9ydCB7XG4gIGkxOG5BcnJpdmFsLFxuICBpMThuRGVwYXJ0dXJlLFxuICBpMThuVHJhbnNmZXJQcm9jZWR1cmVzLFxufSBmcm9tICdAc2JiLWVzdGEvbHluZS1lbGVtZW50cy9jb3JlL2kxOG4uanMnO1xuaW1wb3J0IHR5cGUgeyBTYmJEYXRlTGlrZSB9IGZyb20gJ0BzYmItZXN0YS9seW5lLWVsZW1lbnRzL2NvcmUvaW50ZXJmYWNlcy90eXBlcyc7XG5pbXBvcnQgeyBmb3JtYXQgfSBmcm9tICdkYXRlLWZucyc7XG5pbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBodG1sLCBMaXRFbGVtZW50LCBub3RoaW5nIH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgeyByZW1vdmVUaW1lem9uZUZyb21JU09UaW1lU3RyaW5nIH0gZnJvbSAnLi4vY29yZS9kYXRldGltZS5qcyc7XG5pbXBvcnQgdHlwZSB7IExlZywgUHRSaWRlTGVnIH0gZnJvbSAnLi4vY29yZS90aW1ldGFibGUuanMnO1xuaW1wb3J0IHsgZ2V0RGVwYXJ0dXJlQXJyaXZhbFRpbWVBdHRyaWJ1dGUsIGlzUmlkZUxlZyB9IGZyb20gJy4uL2NvcmUvdGltZXRhYmxlLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vcGVhcmwtY2hhaW4tdGltZS5zY3NzP2xpdCZpbmxpbmUnO1xuXG5pbXBvcnQgJy4uL3BlYXJsLWNoYWluLmpzJztcblxuLyoqXG4gKiBDb21iaW5lZCB3aXRoIGBzYmItcGVhcmwtY2hhaW5gLCBpdCBkaXNwbGF5cyB3YWxrIHRpbWUgaW5mb3JtYXRpb24uXG4gKi9cbkBjdXN0b21FbGVtZW50KCdzYmItcGVhcmwtY2hhaW4tdGltZScpXG5leHBvcnQgY2xhc3MgU2JiUGVhcmxDaGFpblRpbWVFbGVtZW50IGV4dGVuZHMgTGl0RWxlbWVudCB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IHN0eWxlO1xuXG4gIC8qKlxuICAgKiBkZWZpbmUgdGhlIGxlZ3Mgb2YgdGhlIHBlYXJsLWNoYWluLlxuICAgKiBGb3JtYXQ6XG4gICAqIGB7XCJsZWdzXCI6IFt7XCJkdXJhdGlvblwiOiAyNX0sIC4uLl19YFxuICAgKiBgZHVyYXRpb25gIGluIG1pbnV0ZXMuIER1cmF0aW9uIG9mIHRoZSBsZWcgaXMgcmVsYXRpdmVcbiAgICogdG8gdGhlIHRvdGFsIHRyYXZlbCB0aW1lLiBFeGFtcGxlOiBkZXBhcnR1cmUgMTY6MzAsIGNoYW5nZSBhdCAxNjo0MCxcbiAgICogYXJyaXZhbCBhdCAxNzowMC4gU28gdGhlIGNoYW5nZSBzaG91bGQgaGF2ZSBhIGR1cmF0aW9uIG9mIDMzLjMzJS5cbiAgICovXG4gIEBwcm9wZXJ0eSh7IHR5cGU6IEFycmF5IH0pIHB1YmxpYyBsZWdzITogKExlZyB8IFB0UmlkZUxlZylbXTtcblxuICAvKiogUHJvcCB0byByZW5kZXIgdGhlIGRlcGFydHVyZSB0aW1lIC0gd2lsbCBiZSBmb3JtYXR0ZWQgYXMgXCJIOm1tXCIgKi9cbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAnZGVwYXJ0dXJlLXRpbWUnIH0pIHB1YmxpYyBkZXBhcnR1cmVUaW1lPzogc3RyaW5nO1xuXG4gIC8qKiBQcm9wIHRvIHJlbmRlciB0aGUgYXJyaXZhbCB0aW1lIC0gd2lsbCBiZSBmb3JtYXR0ZWQgYXMgXCJIOm1tXCIgKi9cbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAnYXJyaXZhbC10aW1lJyB9KSBwdWJsaWMgYXJyaXZhbFRpbWU/OiBzdHJpbmc7XG5cbiAgLyoqIE9wdGlvbmFsIHByb3AgdG8gcmVuZGVyIHRoZSB3YWxrIHRpbWUgKGluIG1pbnV0ZXMpIGJlZm9yZSBkZXBhcnR1cmUgKi9cbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAnZGVwYXJ0dXJlLXdhbGsnLCB0eXBlOiBOdW1iZXIgfSkgcHVibGljIGRlcGFydHVyZVdhbGs/OiBudW1iZXI7XG5cbiAgLyoqIE9wdGlvbmFsIHByb3AgdG8gcmVuZGVyIHRoZSB3YWxrIHRpbWUgKGluIG1pbnV0ZXMpIGFmdGVyIGFycml2YWwgKi9cbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAnYXJyaXZhbC13YWxrJywgdHlwZTogTnVtYmVyIH0pIHB1YmxpYyBhcnJpdmFsV2Fsaz86IG51bWJlcjtcblxuICAvKipcbiAgICogUGVyIGRlZmF1bHQsIHRoZSBjdXJyZW50IGxvY2F0aW9uIGhhcyBhIHB1bHNhdGluZyBhbmltYXRpb24uIFlvdSBjYW5cbiAgICogZGlzYWJsZSB0aGUgYW5pbWF0aW9uIHdpdGggdGhpcyBwcm9wZXJ0eS5cbiAgICovXG4gIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogJ2Rpc2FibGUtYW5pbWF0aW9uJywgdHlwZTogQm9vbGVhbiB9KSBwdWJsaWMgZGlzYWJsZUFuaW1hdGlvbj86IGJvb2xlYW47XG5cbiAgLyoqIEEgY29uZmlndXJlZCBkYXRlIHdoaWNoIGFjdHMgYXMgdGhlIGN1cnJlbnQgZGF0ZSBpbnN0ZWFkIG9mIHRoZSByZWFsIGN1cnJlbnQgZGF0ZS4gUmVjb21tZW5kZWQgZm9yIHRlc3RpbmcgcHVycG9zZXMuICovXG4gIEBwcm9wZXJ0eSgpXG4gIHB1YmxpYyBzZXQgbm93KHZhbHVlOiBTYmJEYXRlTGlrZSB8IHVuZGVmaW5lZCkge1xuICAgIHRoaXMuX25vdyA9IGRlZmF1bHREYXRlQWRhcHRlci5nZXRWYWxpZERhdGVPck51bGwoZGVmYXVsdERhdGVBZGFwdGVyLmRlc2VyaWFsaXplKHZhbHVlKSk7XG4gIH1cbiAgcHVibGljIGdldCBub3coKTogRGF0ZSB7XG4gICAgcmV0dXJuIHRoaXMuX25vdyA/PyBuZXcgRGF0ZSgpO1xuICB9XG4gIHByaXZhdGUgX25vdzogRGF0ZSB8IG51bGwgPSBudWxsO1xuXG4gIHByaXZhdGUgX2xhbmd1YWdlID0gbmV3IFNiYkxhbmd1YWdlQ29udHJvbGxlcih0aGlzKTtcblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICBjb25zdCBkZXBhcnR1cmU6IERhdGUgfCB1bmRlZmluZWQgPSB0aGlzLmRlcGFydHVyZVRpbWVcbiAgICAgID8gcmVtb3ZlVGltZXpvbmVGcm9tSVNPVGltZVN0cmluZyh0aGlzLmRlcGFydHVyZVRpbWUpXG4gICAgICA6IHVuZGVmaW5lZDtcbiAgICBjb25zdCBhcnJpdmFsOiBEYXRlIHwgdW5kZWZpbmVkID0gdGhpcy5hcnJpdmFsVGltZVxuICAgICAgPyByZW1vdmVUaW1lem9uZUZyb21JU09UaW1lU3RyaW5nKHRoaXMuYXJyaXZhbFRpbWUpXG4gICAgICA6IHVuZGVmaW5lZDtcblxuICAgIGNvbnN0IHsgcmVuZGVyRGVwYXJ0dXJlVGltZUF0dHJpYnV0ZSwgcmVuZGVyQXJyaXZhbFRpbWVBdHRyaWJ1dGUgfSA9XG4gICAgICBnZXREZXBhcnR1cmVBcnJpdmFsVGltZUF0dHJpYnV0ZShcbiAgICAgICAgdGhpcy5sZWdzLFxuICAgICAgICB0aGlzLmRlcGFydHVyZVdhbGsgfHwgMCxcbiAgICAgICAgdGhpcy5hcnJpdmFsV2FsayB8fCAwLFxuICAgICAgICB0aGlzLl9sYW5ndWFnZS5jdXJyZW50LFxuICAgICAgKTtcblxuICAgIGNvbnN0IHJpZGVMZWdzID0gdGhpcy5sZWdzPy5maWx0ZXIoKGxlZykgPT4gaXNSaWRlTGVnKGxlZykpO1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPGRpdiBjbGFzcz1cInNiYi1wZWFybC1jaGFpbl9fdGltZVwiPlxuICAgICAgICAke3JlbmRlckRlcGFydHVyZVRpbWVBdHRyaWJ1dGUoKX1cbiAgICAgICAgJHtkZXBhcnR1cmVcbiAgICAgICAgICA/IGh0bWxgPHRpbWUgY2xhc3M9XCJzYmItcGVhcmwtY2hhaW5fX3RpbWUtdGltZVwiIGRhdGV0aW1lPSR7dGhpcy5kZXBhcnR1cmVUaW1lIX0+XG4gICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXNjcmVlbi1yZWFkZXItb25seVwiXG4gICAgICAgICAgICAgICAgPiR7aTE4bkRlcGFydHVyZVt0aGlzLl9sYW5ndWFnZS5jdXJyZW50XX06Jm5ic3A7PC9zcGFuXG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgJHtmb3JtYXQoZGVwYXJ0dXJlLCAnSEg6bW0nKX1cbiAgICAgICAgICAgIDwvdGltZT5gXG4gICAgICAgICAgOiBub3RoaW5nfVxuICAgICAgICAke3JpZGVMZWdzPy5sZW5ndGggPiAxXG4gICAgICAgICAgPyBodG1sYDxzcGFuIGNsYXNzPVwic2JiLXNjcmVlbi1yZWFkZXItb25seVwiIHJvbGU9XCJwYXJhZ3JhcGhcIj5cbiAgICAgICAgICAgICAgJHtyaWRlTGVncz8ubGVuZ3RoIC0gMX0gJHtpMThuVHJhbnNmZXJQcm9jZWR1cmVzW3RoaXMuX2xhbmd1YWdlLmN1cnJlbnRdfVxuICAgICAgICAgICAgPC9zcGFuPmBcbiAgICAgICAgICA6IG5vdGhpbmd9XG4gICAgICAgIDxzYmItcGVhcmwtY2hhaW5cbiAgICAgICAgICBjbGFzcz1cInNiYi1wZWFybC1jaGFpbl9fdGltZS1jaGFpblwiXG4gICAgICAgICAgLmxlZ3M9JHt0aGlzLmxlZ3N9XG4gICAgICAgICAgLmRpc2FibGVBbmltYXRpb249JHt0aGlzLmRpc2FibGVBbmltYXRpb259XG4gICAgICAgICAgLm5vdz0ke3RoaXMubm93fVxuICAgICAgICA+PC9zYmItcGVhcmwtY2hhaW4+XG4gICAgICAgICR7YXJyaXZhbFxuICAgICAgICAgID8gaHRtbGA8dGltZSBjbGFzcz1cInNiYi1wZWFybC1jaGFpbl9fdGltZS10aW1lXCIgZGF0ZXRpbWU9JHt0aGlzLmFycml2YWxUaW1lIX0+XG4gICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXNjcmVlbi1yZWFkZXItb25seVwiXG4gICAgICAgICAgICAgICAgPiR7aTE4bkFycml2YWxbdGhpcy5fbGFuZ3VhZ2UuY3VycmVudF19OiZuYnNwOzwvc3BhblxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICR7Zm9ybWF0KGFycml2YWwsICdISDptbScpfVxuICAgICAgICAgICAgPC90aW1lPmBcbiAgICAgICAgICA6IG5vdGhpbmd9XG4gICAgICAgICR7cmVuZGVyQXJyaXZhbFRpbWVBdHRyaWJ1dGUoKX1cbiAgICAgIDwvZGl2PlxuICAgIGA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi1wZWFybC1jaGFpbi10aW1lJzogU2JiUGVhcmxDaGFpblRpbWVFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUF5QmEsSUFBQSwyQkFBTixjQUF1QyxXQUFXO0FBQUEsRUFBbEQsY0FBQTtBQUFBLFVBQUEsR0FBQSxTQUFBO0FBdUNMLFNBQVEsT0FBb0I7QUFFcEIsU0FB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

package/development/pearl-chain-vertical/pearl-chain-vertical.d.ts

@@ -0,0 +1,17 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+
+/**
+ * It can be used as a container for the `sbb-pearl-chain-vertical-item` component.
+ *
+ * @slot - The unnamed slot is used for the `sbb-pearl-chain-vertical-item` component.
+ */
+export declare class SbbPearlChainVerticalElement extends LitElement {
+    static styles: CSSResultGroup;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-pearl-chain-vertical': SbbPearlChainVerticalElement;
+    }
+}
+//# sourceMappingURL=pearl-chain-vertical.d.ts.map

package/development/pearl-chain-vertical/pearl-chain-vertical.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pearl-chain-vertical.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC;;;;GAIG;AACH,qBACa,4BAA6B,SAAQ,UAAU;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;cAEnC,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,0BAA0B,EAAE,4BAA4B,CAAC;KAC1D;CACF"}

package/development/pearl-chain-vertical-item/pearl-chain-vertical-item.d.ts

@@ -0,0 +1,35 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+
+export type LineType = 'dotted' | 'standard' | 'thin';
+export type BulletType = 'default' | 'past' | 'irrelevant' | 'skipped' | 'disruption';
+export type LineColor = 'default' | 'past' | 'disruption' | 'walk';
+export type BulletSize = 'start-end' | 'stop';
+export interface PearlChainVerticalItemAttributes {
+    lineType: LineType;
+    lineColor: LineColor;
+    bulletType?: BulletType;
+    minHeight: number;
+    hideLine: boolean;
+    bulletSize: BulletSize;
+    position?: number;
+}
+/**
+ * It displays details about connection between stations.
+ *
+ * @slot left - Content of the left side of the item
+ * @slot right - Content of the right side of the item
+ */
+export declare class SbbPearlChainVerticalItemElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** The pearlChainVerticalItemAttributes Prop for styling the bullets and line.*/
+    pearlChainVerticalItemAttributes: PearlChainVerticalItemAttributes;
+    /** If true, the position won't be animated. */
+    disableAnimation?: boolean;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-pearl-chain-vertical-item': SbbPearlChainVerticalItemElement;
+    }
+}
+//# sourceMappingURL=pearl-chain-vertical-item.d.ts.map

package/development/pearl-chain-vertical-item/pearl-chain-vertical-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pearl-chain-vertical-item.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,GAAG,SAAS,GAAG,YAAY,CAAC;AAEtF,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,qBACa,gCAAiC,SAAQ,UAAU;IAC9D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,iFAAiF;IAE1E,gCAAgC,EAAG,gCAAgC,CAAC;IAE3E,+CAA+C;IAExC,gBAAgB,CAAC,EAAE,OAAO,CAAC;cAEf,MAAM,IAAI,cAAc;CAsC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,+BAA+B,EAAE,gCAAgC,CAAC;KACnE;CACF"}

package/development/pearl-chain-vertical-item.d.ts

@@ -0,0 +1,2 @@
+export * from './pearl-chain-vertical-item/pearl-chain-vertical-item.js';
+//# sourceMappingURL=pearl-chain-vertical-item.d.ts.map

package/development/pearl-chain-vertical-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pearl-chain-vertical-item.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/pearl-chain-vertical-item.ts"],"names":[],"mappings":"AAAA,cAAc,0DAA0D,CAAC"}

package/development/pearl-chain-vertical-item.js

@@ -0,0 +1,369 @@
+import { css, LitElement, html, nothing } from "lit";
+import { property, customElement } from "lit/decorators.js";
+const style = css`/**
+ * Better font rendering (on OS X)
+ * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ *
+ * Usage:
+ *
+ * .var_dark_on_light {
+ * 	@include font-smoothing;
+ * }
+ * .var_light_on_dark {
+ * 	@include font-smoothing-reset;
+ * }
+ */
+/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --sbb-pearl-chain-bullet-size-start-end: 0.625rem;
+  --sbb-pearl-chain-bullet-size-stop: 0.5rem;
+  --sbb-pearl-chain-bullet-color: var(--sbb-color-charcoal);
+  --sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);
+  --sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);
+  --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-red);
+  --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);
+  --sbb-pearl-chain-bullet-animation-duration: 1920ms;
+  --sbb-pearl-chain-bullet-animation-easing: ease-out;
+  --sbb-pearl-chain-bullet-crossed-width: 0.88375rem;
+  --sbb-pearl-chain-bullet-crossed-height: 0.21875rem;
+  --sbb-pearl-chain-bullet-crossed-border-width: 0.09375rem;
+  display: table-row;
+  position: relative;
+  --sbb-pearl-chain-vertical-right-item-width: 100%;
+  --sbb-pearl-chain-vertical-middle-item-min-width: var(--sbb-pearl-chain-bullet-size-start-end);
+  --sbb-pearl-chain-vertical-item-border-width: var(--sbb-border-width-2x);
+  --sbb-pearl-chain-vertical-item-border-width-thin: var(--sbb-border-width-1x);
+  --sbb-pearl-chain-vertical-item-spacing-small: var(--sbb-spacing-fixed-1x);
+  --sbb-pearl-chain-vertical-item-spacing-medium: var(--sbb-spacing-fixed-4x);
+  --sbb-pearl-chain-vertical-item-color-default: var(--sbb-pearl-chain-bullet-color);
+  --sbb-pearl-chain-vertical-item-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);
+  --sbb-pearl-chain-vertical-item-color-past: var(--sbb-pearl-chain-bullet-color-past);
+  --sbb-pearl-chain-vertical-item-color-walk: var(--sbb-color-sky);
+  --sbb-pearl-chain-vertical-item-inline-start: 50%;
+  --sbb-pearl-chain-vertical-item-transform: translateX(-50%);
+}
+
+slot[name=right],
+.sbb-pearl-chain-vertical-item__column {
+  display: table-cell;
+  position: relative;
+  vertical-align: top;
+}
+
+slot[name=right] {
+  width: var(--sbb-pearl-chain-vertical-right-item-width);
+}
+
+.sbb-pearl-chain-vertical-item__column--middle {
+  min-width: var(--sbb-pearl-chain-vertical-middle-item-min-width, --sbb-pearl-chain-vertical-middle-min-width);
+}
+
+slot[name=left]::slotted(*) {
+  margin-block-start: var(--sbb-pearl-chain-vertical-left-item-block-start);
+  padding-inline-end: var(--sbb-pearl-chain-vertical-left-item-inline-end);
+}
+
+slot[name=right]::slotted(*) {
+  margin-block-start: var(--sbb-pearl-chain-vertical-right-item-block-start);
+  padding-inline-start: var(--sbb-pearl-chain-vertical-right-item-inline-start);
+}
+
+.sbb-pearl-chain-vertical-item__middle {
+  vertical-align: top;
+  border-spacing: 0;
+}
+
+.sbb-pearl-chain-vertical-item__line {
+  position: absolute;
+  bottom: 0;
+  inset-inline-start: var(--sbb-pearl-chain-vertical-item-inline-start);
+  transform: var(--sbb-pearl-chain-vertical-item-transform);
+  width: var(--sbb-border-width-2x);
+  inset-block-start: calc(var(--sbb-pearl-chain-bullet-size-start-end) / 2);
+}
+.sbb-pearl-chain-vertical-item__line::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  height: var(--sbb-pearl-chain-vertical-item-leg-status);
+  width: var(--sbb-pearl-chain-vertical-item-border-width);
+  background-color: var(--sbb-pearl-chain-vertical-item-color-past);
+}
+@media (forced-colors: active) {
+  .sbb-pearl-chain-vertical-item__line::after {
+    --sbb-pearl-chain-vertical-item-color-past: GrayText;
+  }
+}
+
+.sbb-pearl-chain-vertical-item__line--dotted {
+  background-color: unset;
+  border-color: unset;
+  background-image: linear-gradient(to bottom, currentcolor 0%, currentcolor 50%, Canvas 50%);
+  background-repeat: repeat-y;
+  background-size: calc(2 * var(--sbb-pearl-chain-vertical-item-spacing-small)) var(--sbb-pearl-chain-vertical-item-spacing-small);
+}
+@media (forced-colors: active) {
+  .sbb-pearl-chain-vertical-item__line--dotted {
+    background-color: unset !important;
+    border-inline-start: 0.0625rem dashed Highlight;
+    transform: translateY(0.0625rem);
+  }
+}
+
+.sbb-pearl-chain-vertical-item__line--thin {
+  width: var(--sbb-pearl-chain-vertical-item-border-width-thin);
+}
+
+.sbb-pearl-chain-vertical-item__line--default {
+  background-color: var(--sbb-pearl-chain-vertical-item-color-default);
+  border-color: var(--sbb-pearl-chain-vertical-item-color-default);
+  color: var(--sbb-pearl-chain-vertical-item-color-default);
+}
+@media (forced-colors: active) {
+  .sbb-pearl-chain-vertical-item__line--default {
+    --sbb-pearl-chain-vertical-item-color-default: CanvasText;
+  }
+}
+
+.sbb-pearl-chain-vertical-item__line--disruption {
+  border-color: var(--sbb-pearl-chain-vertical-item-color-disruption);
+  background-color: var(--sbb-pearl-chain-vertical-item-color-disruption);
+  color: var(--sbb-pearl-chain-vertical-item-color-disruption);
+}
+@media (forced-colors: active) {
+  .sbb-pearl-chain-vertical-item__line--disruption {
+    --sbb-pearl-chain-vertical-item-color-disruption: Highlight;
+  }
+}
+
+.sbb-pearl-chain-vertical-item__line--past {
+  border-color: var(--sbb-pearl-chain-vertical-item-color-past);
+  background-color: var(--sbb-pearl-chain-vertical-item-color-past);
+  color: var(--sbb-pearl-chain-vertical-item-color-past);
+}
+@media (forced-colors: active) {
+  .sbb-pearl-chain-vertical-item__line--past {
+    --sbb-pearl-chain-vertical-item-color-past: GrayText;
+  }
+}
+
+.sbb-pearl-chain-vertical-item__line--walk {
+  border-color: var(--sbb-pearl-chain-vertical-item-color-walk);
+  background-color: var(--sbb-pearl-chain-vertical-item-color-walk);
+  color: var(--sbb-pearl-chain-vertical-item-color-walk);
+}
+
+.sbb-pearl-chain-vertical-item__bullet {
+  background: var(--sbb-pearl-chain-bullet-color);
+  color: var(--sbb-pearl-chain-bullet-color);
+  border-color: var(--sbb-pearl-chain-bullet-color);
+  border-radius: 100%;
+  position: relative;
+  inset-inline-start: var(--sbb-pearl-chain-vertical-item-inline-start);
+  transform: var(--sbb-pearl-chain-vertical-item-transform);
+}
+@media (forced-colors: active) {
+  .sbb-pearl-chain-vertical-item__bullet {
+    --sbb-pearl-chain-bullet-color: CanvasText;
+  }
+}
+
+.sbb-pearl-chain-vertical-item__bullet--start-end {
+  min-height: var(--sbb-pearl-chain-bullet-size-start-end);
+  min-width: var(--sbb-pearl-chain-bullet-size-start-end);
+  height: var(--sbb-pearl-chain-bullet-size-start-end);
+  width: var(--sbb-pearl-chain-bullet-size-start-end);
+}
+
+.sbb-pearl-chain-vertical-item__bullet--stop {
+  min-height: var(--sbb-pearl-chain-bullet-size-stop);
+  min-width: var(--sbb-pearl-chain-bullet-size-stop);
+  height: var(--sbb-pearl-chain-bullet-size-stop);
+  width: var(--sbb-pearl-chain-bullet-size-stop);
+  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;
+  background: Canvas;
+}
+
+.sbb-pearl-chain-vertical-item__bullet--disruption {
+  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);
+}
+@media (forced-colors: active) {
+  .sbb-pearl-chain-vertical-item__bullet--disruption {
+    --sbb-pearl-chain-bullet-color: Highlight;
+  }
+}
+
+.sbb-pearl-chain-vertical-item__bullet--irrelevant,
+.sbb-pearl-chain-vertical-item__bullet--past {
+  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past);
+}
+@media (forced-colors: active) {
+  .sbb-pearl-chain-vertical-item__bullet--irrelevant,
+  .sbb-pearl-chain-vertical-item__bullet--past {
+    --sbb-pearl-chain-bullet-color: GrayText !important;
+  }
+}
+
+.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--irrelevant {
+  min-height: var(--sbb-pearl-chain-bullet-size-stop);
+  min-width: var(--sbb-pearl-chain-bullet-size-stop);
+  height: var(--sbb-pearl-chain-bullet-size-stop);
+  width: var(--sbb-pearl-chain-bullet-size-stop);
+  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;
+  background: Canvas;
+  --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-1x);
+}
+
+.sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped {
+  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;
+  background: Canvas;
+}
+.sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  border-block-start: var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;
+  background: var(--sbb-pearl-chain-bullet-color-disruption);
+  height: var(--sbb-pearl-chain-bullet-crossed-height);
+  width: var(--sbb-pearl-chain-bullet-crossed-width);
+}
+@media (forced-colors: active) {
+  .sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped::before {
+    background: Highlight;
+  }
+}
+
+.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped {
+  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;
+  background: Canvas;
+  min-height: var(--sbb-pearl-chain-bullet-size-stop);
+  min-width: var(--sbb-pearl-chain-bullet-size-stop);
+  height: var(--sbb-pearl-chain-bullet-size-stop);
+  width: var(--sbb-pearl-chain-bullet-size-stop);
+  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;
+  background: Canvas;
+  --sbb-pearl-chain-bullet-crossed-width: 0.706875rem;
+  --sbb-pearl-chain-bullet-crossed-height: 0.1875rem;
+}
+.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  border-block-start: var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;
+  background: var(--sbb-pearl-chain-bullet-color-disruption);
+  height: var(--sbb-pearl-chain-bullet-crossed-height);
+  width: var(--sbb-pearl-chain-bullet-crossed-width);
+}
+@media (forced-colors: active) {
+  .sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped::before {
+    background: Highlight;
+  }
+}
+
+.sbb-pearl-chain-vertical-item__bullet--position {
+  background: var(--sbb-pearl-chain-bullet-color);
+  color: var(--sbb-pearl-chain-bullet-color);
+  border-color: var(--sbb-pearl-chain-bullet-color);
+  border-radius: 100%;
+  min-height: var(--sbb-pearl-chain-bullet-size-start-end);
+  min-width: var(--sbb-pearl-chain-bullet-size-start-end);
+  height: var(--sbb-pearl-chain-bullet-size-start-end);
+  width: var(--sbb-pearl-chain-bullet-size-start-end);
+  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);
+  animation: pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration) var(--sbb-pearl-chain-bullet-animation-easing) infinite;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  inset-block-start: var(--sbb-pearl-chain-vertical-item-position);
+}
+@media (forced-colors: active) {
+  .sbb-pearl-chain-vertical-item__bullet--position {
+    --sbb-pearl-chain-bullet-color: CanvasText;
+  }
+}
+@media (forced-colors: active) {
+  .sbb-pearl-chain-vertical-item__bullet--position {
+    --sbb-pearl-chain-bullet-color: Highlight;
+  }
+}
+@keyframes pearl-chain-bullet-position-pulse {
+  0% {
+    box-shadow: 0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption);
+  }
+  25% {
+    box-shadow: 0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption);
+  }
+  50% {
+    box-shadow: 0 0 0 0.1875rem var(--sbb-color-red-alpha-20);
+  }
+  100% {
+    box-shadow: 0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption);
+  }
+}
+:host([disable-animation]) .sbb-pearl-chain-vertical-item__bullet--position {
+  animation: unset !important;
+}`;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SbbPearlChainVerticalItemElement = class extends LitElement {
+  render() {
+    const { bulletType, lineType, lineColor, hideLine, minHeight, bulletSize, position } = this.pearlChainVerticalItemAttributes || {};
+    const bulletTypeClass = position && position > 0 && position <= 100 ? "sbb-pearl-chain-vertical-item__bullet--past" : `sbb-pearl-chain-vertical-item__bullet--${bulletType}`;
+    return html`
+      <div class="sbb-pearl-chain-vertical-item__column" style="height: ${minHeight}px;">
+        <slot name="left"></slot>
+      </div>
+      <div
+        aria-hidden="true"
+        class="sbb-pearl-chain-vertical-item__column sbb-pearl-chain-vertical-item__column--middle"
+      >
+        ${!hideLine ? html`<div
+              style="--sbb-pearl-chain-vertical-item-leg-status:${position}%;"
+              class="sbb-pearl-chain-vertical-item__line sbb-pearl-chain-vertical-item__line--${lineType} sbb-pearl-chain-vertical-item__line--${lineColor}"
+            ></div>` : nothing}
+        ${bulletType ? html`<div
+              class="sbb-pearl-chain-vertical-item__bullet  sbb-pearl-chain-vertical-item__bullet--${bulletSize} ${bulletTypeClass}"
+            ></div>` : nothing}
+        ${position && position > 0 ? html`<div
+              style="--sbb-pearl-chain-vertical-item-position:${position}%;"
+              class="sbb-pearl-chain-vertical-item__bullet--position"
+            ></div>` : nothing}
+      </div>
+      <slot name="right"></slot>
+    `;
+  }
+};
+SbbPearlChainVerticalItemElement.styles = style;
+__decorateClass([
+  property({ attribute: "pearl-chain-vertical-item-attributes", type: Object })
+], SbbPearlChainVerticalItemElement.prototype, "pearlChainVerticalItemAttributes", 2);
+__decorateClass([
+  property({ attribute: "disable-animation", reflect: true, type: Boolean })
+], SbbPearlChainVerticalItemElement.prototype, "disableAnimation", 2);
+SbbPearlChainVerticalItemElement = __decorateClass([
+  customElement("sbb-pearl-chain-vertical-item")
+], SbbPearlChainVerticalItemElement);
+export {
+  SbbPearlChainVerticalItemElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGVhcmwtY2hhaW4tdmVydGljYWwtaXRlbS5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2VsZW1lbnRzLWV4cGVyaW1lbnRhbC9wZWFybC1jaGFpbi12ZXJ0aWNhbC1pdGVtL3BlYXJsLWNoYWluLXZlcnRpY2FsLWl0ZW0udHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBDU1NSZXN1bHRHcm91cCwgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgaHRtbCwgTGl0RWxlbWVudCwgbm90aGluZyB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50LCBwcm9wZXJ0eSB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vcGVhcmwtY2hhaW4tdmVydGljYWwtaXRlbS5zY3NzP2xpdCZpbmxpbmUnO1xuXG5leHBvcnQgdHlwZSBMaW5lVHlwZSA9ICdkb3R0ZWQnIHwgJ3N0YW5kYXJkJyB8ICd0aGluJztcblxuZXhwb3J0IHR5cGUgQnVsbGV0VHlwZSA9ICdkZWZhdWx0JyB8ICdwYXN0JyB8ICdpcnJlbGV2YW50JyB8ICdza2lwcGVkJyB8ICdkaXNydXB0aW9uJztcblxuZXhwb3J0IHR5cGUgTGluZUNvbG9yID0gJ2RlZmF1bHQnIHwgJ3Bhc3QnIHwgJ2Rpc3J1cHRpb24nIHwgJ3dhbGsnO1xuXG5leHBvcnQgdHlwZSBCdWxsZXRTaXplID0gJ3N0YXJ0LWVuZCcgfCAnc3RvcCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUGVhcmxDaGFpblZlcnRpY2FsSXRlbUF0dHJpYnV0ZXMge1xuICBsaW5lVHlwZTogTGluZVR5cGU7XG4gIGxpbmVDb2xvcjogTGluZUNvbG9yO1xuICBidWxsZXRUeXBlPzogQnVsbGV0VHlwZTtcbiAgbWluSGVpZ2h0OiBudW1iZXI7XG4gIGhpZGVMaW5lOiBib29sZWFuO1xuICBidWxsZXRTaXplOiBCdWxsZXRTaXplO1xuICBwb3NpdGlvbj86IG51bWJlcjtcbn1cblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBkZXRhaWxzIGFib3V0IGNvbm5lY3Rpb24gYmV0d2VlbiBzdGF0aW9ucy5cbiAqXG4gKiBAc2xvdCBsZWZ0IC0gQ29udGVudCBvZiB0aGUgbGVmdCBzaWRlIG9mIHRoZSBpdGVtXG4gKiBAc2xvdCByaWdodCAtIENvbnRlbnQgb2YgdGhlIHJpZ2h0IHNpZGUgb2YgdGhlIGl0ZW1cbiAqL1xuQGN1c3RvbUVsZW1lbnQoJ3NiYi1wZWFybC1jaGFpbi12ZXJ0aWNhbC1pdGVtJylcbmV4cG9ydCBjbGFzcyBTYmJQZWFybENoYWluVmVydGljYWxJdGVtRWxlbWVudCBleHRlbmRzIExpdEVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBzdHlsZTtcblxuICAvKiogVGhlIHBlYXJsQ2hhaW5WZXJ0aWNhbEl0ZW1BdHRyaWJ1dGVzIFByb3AgZm9yIHN0eWxpbmcgdGhlIGJ1bGxldHMgYW5kIGxpbmUuKi9cbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAncGVhcmwtY2hhaW4tdmVydGljYWwtaXRlbS1hdHRyaWJ1dGVzJywgdHlwZTogT2JqZWN0IH0pXG4gIHB1YmxpYyBwZWFybENoYWluVmVydGljYWxJdGVtQXR0cmlidXRlcyE6IFBlYXJsQ2hhaW5WZXJ0aWNhbEl0ZW1BdHRyaWJ1dGVzO1xuXG4gIC8qKiBJZiB0cnVlLCB0aGUgcG9zaXRpb24gd29uJ3QgYmUgYW5pbWF0ZWQuICovXG4gIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogJ2Rpc2FibGUtYW5pbWF0aW9uJywgcmVmbGVjdDogdHJ1ZSwgdHlwZTogQm9vbGVhbiB9KVxuICBwdWJsaWMgZGlzYWJsZUFuaW1hdGlvbj86IGJvb2xlYW47XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgY29uc3QgeyBidWxsZXRUeXBlLCBsaW5lVHlwZSwgbGluZUNvbG9yLCBoaWRlTGluZSwgbWluSGVpZ2h0LCBidWxsZXRTaXplLCBwb3NpdGlvbiB9ID1cbiAgICAgIHRoaXMucGVhcmxDaGFpblZlcnRpY2FsSXRlbUF0dHJpYnV0ZXMgfHwge307XG5cbiAgICBjb25zdCBidWxsZXRUeXBlQ2xhc3MgPVxuICAgICAgcG9zaXRpb24gJiYgcG9zaXRpb24gPiAwICYmIHBvc2l0aW9uIDw9IDEwMFxuICAgICAgICA/ICdzYmItcGVhcmwtY2hhaW4tdmVydGljYWwtaXRlbV9fYnVsbGV0LS1wYXN0J1xuICAgICAgICA6IGBzYmItcGVhcmwtY2hhaW4tdmVydGljYWwtaXRlbV9fYnVsbGV0LS0ke2J1bGxldFR5cGV9YDtcblxuICAgIHJldHVybiBodG1sYFxuICAgICAgPGRpdiBjbGFzcz1cInNiYi1wZWFybC1jaGFpbi12ZXJ0aWNhbC1pdGVtX19jb2x1bW5cIiBzdHlsZT1cImhlaWdodDogJHttaW5IZWlnaHR9cHg7XCI+XG4gICAgICAgIDxzbG90IG5hbWU9XCJsZWZ0XCI+PC9zbG90PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2XG4gICAgICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiXG4gICAgICAgIGNsYXNzPVwic2JiLXBlYXJsLWNoYWluLXZlcnRpY2FsLWl0ZW1fX2NvbHVtbiBzYmItcGVhcmwtY2hhaW4tdmVydGljYWwtaXRlbV9fY29sdW1uLS1taWRkbGVcIlxuICAgICAgPlxuICAgICAgICAkeyFoaWRlTGluZVxuICAgICAgICAgID8gaHRtbGA8ZGl2XG4gICAgICAgICAgICAgIHN0eWxlPVwiLS1zYmItcGVhcmwtY2hhaW4tdmVydGljYWwtaXRlbS1sZWctc3RhdHVzOiR7cG9zaXRpb259JTtcIlxuICAgICAgICAgICAgICBjbGFzcz1cInNiYi1wZWFybC1jaGFpbi12ZXJ0aWNhbC1pdGVtX19saW5lIHNiYi1wZWFybC1jaGFpbi12ZXJ0aWNhbC1pdGVtX19saW5lLS0ke2xpbmVUeXBlfSBzYmItcGVhcmwtY2hhaW4tdmVydGljYWwtaXRlbV9fbGluZS0tJHtsaW5lQ29sb3J9XCJcbiAgICAgICAgICAgID48L2Rpdj5gXG4gICAgICAgICAgOiBub3RoaW5nfVxuICAgICAgICAke2J1bGxldFR5cGVcbiAgICAgICAgICA/IGh0bWxgPGRpdlxuICAgICAgICAgICAgICBjbGFzcz1cInNiYi1wZWFybC1jaGFpbi12ZXJ0aWNhbC1pdGVtX19idWxsZXQgIHNiYi1wZWFybC1jaGFpbi12ZXJ0aWNhbC1pdGVtX19idWxsZXQtLSR7YnVsbGV0U2l6ZX0gJHtidWxsZXRUeXBlQ2xhc3N9XCJcbiAgICAgICAgICAgID48L2Rpdj5gXG4gICAgICAgICAgOiBub3RoaW5nfVxuICAgICAgICAke3Bvc2l0aW9uICYmIHBvc2l0aW9uID4gMFxuICAgICAgICAgID8gaHRtbGA8ZGl2XG4gICAgICAgICAgICAgIHN0eWxlPVwiLS1zYmItcGVhcmwtY2hhaW4tdmVydGljYWwtaXRlbS1wb3NpdGlvbjoke3Bvc2l0aW9ufSU7XCJcbiAgICAgICAgICAgICAgY2xhc3M9XCJzYmItcGVhcmwtY2hhaW4tdmVydGljYWwtaXRlbV9fYnVsbGV0LS1wb3NpdGlvblwiXG4gICAgICAgICAgICA+PC9kaXY+YFxuICAgICAgICAgIDogbm90aGluZ31cbiAgICAgIDwvZGl2PlxuICAgICAgPHNsb3QgbmFtZT1cInJpZ2h0XCI+PC9zbG90PlxuICAgIGA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi1wZWFybC1jaGFpbi12ZXJ0aWNhbC1pdGVtJzogU2JiUGVhcmxDaGFpblZlcnRpY2FsSXRlbUVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUErQmEsSUFBQSxtQ0FBTixjQUErQyxXQUFXO0FBQUEsRUFXNUMsU0FBeUI7QUFDcEMsVUFBQSxFQUFFLFlBQVksVUFBVSxXQUFXLFVBQVUsV0FBVyxZQUFZLFNBQVMsSUFDakYsS0FBSyxvQ0FBb0MsQ0FBQTtBQUVyQyxVQUFBLGtCQUNKLFlBQVksV0FBVyxLQUFLLFlBQVksTUFDcEMsZ0RBQ0EsMENBQTBDLFVBQVU7QUFFbkQsV0FBQTtBQUFBLDBFQUMrRCxTQUFTO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsVUFPekUsQ0FBQyxXQUNDO0FBQUEsa0VBQ3NELFFBQVE7QUFBQSxnR0FDc0IsUUFBUSx5Q0FBeUMsU0FBUztBQUFBLHVCQUU5SSxPQUFPO0FBQUEsVUFDVCxhQUNFO0FBQUEscUdBQ3lGLFVBQVUsSUFBSSxlQUFlO0FBQUEsdUJBRXRILE9BQU87QUFBQSxVQUNULFlBQVksV0FBVyxJQUNyQjtBQUFBLGdFQUNvRCxRQUFRO0FBQUE7QUFBQSx1QkFHNUQsT0FBTztBQUFBO0FBQUE7QUFBQTtBQUFBLEVBSWpCO0FBQ0Y7QUFqRGEsaUNBQ1ksU0FBeUI7QUFJekMsZ0JBQUE7QUFBQSxFQUROLFNBQVMsRUFBRSxXQUFXLHdDQUF3QyxNQUFNLFFBQVE7QUFBQSxHQUpsRSxpQ0FLSixXQUFBLG9DQUFBLENBQUE7QUFJQSxnQkFBQTtBQUFBLEVBRE4sU0FBUyxFQUFFLFdBQVcscUJBQXFCLFNBQVMsTUFBTSxNQUFNLFNBQVM7QUFBQSxHQVIvRCxpQ0FTSixXQUFBLG9CQUFBLENBQUE7QUFUSSxtQ0FBTixnQkFBQTtBQUFBLEVBRE4sY0FBYywrQkFBK0I7QUFBQSxHQUNqQyxnQ0FBQTsifQ==

package/development/pearl-chain-vertical.d.ts

@@ -0,0 +1,2 @@
+export * from './pearl-chain-vertical/pearl-chain-vertical.js';
+//# sourceMappingURL=pearl-chain-vertical.d.ts.map