@sbb-esta/lyne-elements-experimental 0.52.1 → 0.53.0

package/core/timetable.js

@@ -1,7 +1,7 @@
-import { i18nWalkingDistanceDeparture as k, i18nWalkingDistanceArrival as A } from "@sbb-esta/lyne-elements/core/i18n.js";
+import { i18nWalkingDistanceDeparture as k, i18nWalkingDistanceArrival as y } from "@sbb-esta/lyne-elements/core/i18n.js";
 import { html as b, nothing as m } from "lit";
 import "@sbb-esta/lyne-elements/icon.js";
-const x = (t) => (t == null ? void 0 : t.a) === "PTRideLeg", h = (t) => (t == null ? void 0 : t.a) === "PTConnectionLeg", C = (t) => {
+const x = (t) => (t == null ? void 0 : t.__typename) === "PTRideLeg", _ = (t) => (t == null ? void 0 : t.__typename) === "PTConnectionLeg", A = (t) => {
   var n, r, u, s, a, o;
   const i = ((n = t == null ? void 0 : t.text) == null ? void 0 : n.template) && t.text.template.indexOf("(") + 1, e = (s = (r = t == null ? void 0 : t.text) == null ? void 0 : r.template) == null ? void 0 : s.substring(
     i || 0,
@@ -14,7 +14,7 @@ const x = (t) => (t == null ? void 0 : t.a) === "PTRideLeg", h = (t) => (t == nu
 };
 function w(t, i) {
   var r, u;
-  const e = h(t) ? t : null, n = e ? (r = e == null ? void 0 : e.notices) == null ? void 0 : r.filter((s) => i.includes(s.name))[0] : null;
+  const e = _(t) ? t : null, n = e ? (r = e == null ? void 0 : e.notices) == null ? void 0 : r.filter((s) => i.includes(s.name))[0] : null;
   return n ? {
     duration: (e == null ? void 0 : e.duration) || 0,
     text: ((u = n == null ? void 0 : n.text) == null ? void 0 : u.template) || "",
@@ -25,7 +25,7 @@ function R(t, i) {
   var r, u, s;
   const e = x(t) ? (u = (r = t == null ? void 0 : t.serviceJourney) == null ? void 0 : r.notices) == null ? void 0 : u.filter(
     (a) => ["CI"].includes(a.name)
-  )[0] : null, n = e && C(e);
+  )[0] : null, n = e && A(e);
   return e ? {
     duration: ((n == null ? void 0 : n.duration) || 0) + (i || 0),
     text: (n == null ? void 0 : n.text) || "",
@@ -36,7 +36,7 @@ function Y(t, i) {
   var r, u, s;
   const e = x(t) ? (u = (r = t == null ? void 0 : t.serviceJourney) == null ? void 0 : r.notices) == null ? void 0 : u.filter(
     (a) => ["CO"].includes(a.name)
-  )[0] : null, n = e && C(e);
+  )[0] : null, n = e && A(e);
   return e ? {
     duration: ((n == null ? void 0 : n.duration) || 0) + (i || 0),
     text: (n == null ? void 0 : n.text) || "",
@@ -49,7 +49,7 @@ function T(t, i, e, n, r) {
       <sbb-icon name=${i}></sbb-icon>
       <time datetime=${t + "M"}>
         <span class="sbb-screen-reader-only">
-          ${!n && r ? r === "departure" ? k[e] : A[e] : m}
+          ${!n && r ? r === "departure" ? k[e] : y[e] : m}
           ${n ? b`<span>${n}</span>` : m}&nbsp;
         </span>
         ${t}
@@ -72,12 +72,12 @@ function f(t, i, e) {
   `;
 }
 function E(t, i, e, n) {
-  const r = t && t.filter((_) => x(_) || h(_))[0], u = ["YM", "YB", "Y", "YT"], s = w(r, u), a = R(r, i), o = i ? {
+  const r = t && t.filter((h) => x(h) || _(h))[0], u = ["YM", "YB", "Y", "YT"], s = w(r, u), a = R(r, i), o = i ? {
     text: k[n],
     duration: i,
     icon: "walk-small"
-  } : null, L = () => s || (o && !a && !s ? o : a || null);
-  function v() {
+  } : null, C = () => s || (o && !a && !s ? o : a || null);
+  function L() {
     return b`
       ${s ? f(s.duration, s.text, "left") : m}
       ${o && !a && !s ? f(o.duration, o.text, "left") : m}
@@ -90,11 +90,11 @@ function E(t, i, e, n) {
     ) : m}
     `;
   }
-  const $ = t && t[t.length - 1], d = (h($) || x($)) && $, c = d && w(d, u), l = d && Y(d, e), p = e ? {
-    text: A[n],
+  const $ = t && t[t.length - 1], d = (_($) || x($)) && $, c = d && w(d, u), l = d && Y(d, e), p = e ? {
+    text: y[n],
     duration: e,
     icon: "walk-small"
-  } : null, y = () => c || (p && !l && !c ? p : l || null);
+  } : null, v = () => c || (p && !l && !c ? p : l || null);
   function D() {
     return b`
       ${c ? f(c.duration, c.text, "right") : m}
@@ -109,15 +109,15 @@ function E(t, i, e, n) {
     `;
   }
   return {
-    renderDepartureTimeAttribute: v,
+    renderDepartureTimeAttribute: L,
     renderArrivalTimeAttribute: D,
-    departureTimeAttribute: L(),
-    arrivalTimeAttribute: y()
+    departureTimeAttribute: C(),
+    arrivalTimeAttribute: v()
   };
 }
 export {
-  C as extractTimeAndStringFromNoticeText,
+  A as extractTimeAndStringFromNoticeText,
   E as getDepartureArrivalTimeAttribute,
-  h as isConnectionLeg,
+  _ as isConnectionLeg,
   x as isRideLeg
 };

package/custom-elements.json

@@ -811,6 +811,190 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "teaser-hero.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "It displays an image and an action call within a panel.",
+          "name": "SbbTeaserHeroElement",
+          "slots": [
+            {
+              "description": "Use the unnamed slot to add text content to the panel",
+              "name": ""
+            },
+            {
+              "description": "Link content of the panel",
+              "name": "link-content"
+            },
+            {
+              "description": "The background image that can be a `sbb-image`",
+              "name": "image"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "linkContent",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "Panel link text.",
+              "attribute": "link-content"
+            },
+            {
+              "kind": "field",
+              "name": "imageSrc",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "Image src will be passed to `sbb-image`.",
+              "attribute": "image-src"
+            },
+            {
+              "kind": "field",
+              "name": "imageAlt",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "Image alt text will be passed to `sbb-image`.",
+              "attribute": "image-alt"
+            },
+            {
+              "kind": "method",
+              "name": "renderTemplate",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "link-content",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Panel link text.",
+              "fieldName": "linkContent"
+            },
+            {
+              "name": "image-src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Image src will be passed to `sbb-image`.",
+              "fieldName": "imageSrc"
+            },
+            {
+              "name": "image-alt",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Image alt text will be passed to `sbb-image`.",
+              "fieldName": "imageAlt"
+            }
+          ],
+          "superclass": {
+            "name": "SbbLinkBaseElement",
+            "package": "@sbb-esta/lyne-elements/core/base-elements.js"
+          },
+          "tagName": "sbb-teaser-hero",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SbbTeaserHeroElement",
+          "declaration": {
+            "name": "SbbTeaserHeroElement",
+            "module": "teaser-hero.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sbb-teaser-hero",
+          "declaration": {
+            "name": "SbbTeaserHeroElement",
+            "module": "teaser-hero.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "teaser-paid.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "It displays an image and a chip with a text.",
+          "name": "SbbTeaserPaidElement",
+          "slots": [
+            {
+              "description": "Link content of the panel",
+              "name": "chip"
+            },
+            {
+              "description": "The background image that can be a `sbb-image`",
+              "name": "image"
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "_chipSlotChanged",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderTemplate",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            }
+          ],
+          "superclass": {
+            "name": "SbbLinkBaseElement",
+            "package": "@sbb-esta/lyne-elements/core/base-elements.js"
+          },
+          "tagName": "sbb-teaser-paid",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SbbTeaserPaidElement",
+          "declaration": {
+            "name": "SbbTeaserPaidElement",
+            "module": "teaser-paid.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sbb-teaser-paid",
+          "declaration": {
+            "name": "SbbTeaserPaidElement",
+            "module": "teaser-paid.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "timetable-duration.js",

package/development/teaser-hero/teaser-hero.d.ts

@@ -0,0 +1,26 @@
+import { SbbLinkBaseElement } from '@sbb-esta/lyne-elements/core/base-elements.js';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+/**
+ * It displays an image and an action call within a panel.
+ *
+ * @slot - Use the unnamed slot to add text content to the panel
+ * @slot link-content - Link content of the panel
+ * @slot image - The background image that can be a `sbb-image`
+ */
+export declare class SbbTeaserHeroElement extends SbbLinkBaseElement {
+    static styles: CSSResultGroup;
+    /** Panel link text. */
+    linkContent?: string;
+    /** Image src will be passed to `sbb-image`. */
+    imageSrc?: string;
+    /** Image alt text will be passed to `sbb-image`. */
+    imageAlt?: string;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser-hero': SbbTeaserHeroElement;
+    }
+}
+//# sourceMappingURL=teaser-hero.d.ts.map

package/development/teaser-hero/teaser-hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/teaser-hero/teaser-hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACnF,OAAO,EAAE,KAAK,cAAc,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMxE,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mDAAmD,CAAC;AAE3D;;;;;;GAMG;AACH,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,uBAAuB;IACyB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErE,+CAA+C;IACF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE/D,oDAAoD;IACP,QAAQ,CAAC,EAAE,MAAM,CAAC;cAE5C,cAAc,IAAI,cAAc;CAyBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/development/teaser-hero.d.ts

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

package/development/teaser-hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/teaser-hero.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}

package/development/teaser-hero.js

@@ -0,0 +1,181 @@
+import { SbbLinkBaseElement } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { css, nothing } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { html } from "lit/static-html.js";
+import "@sbb-esta/lyne-elements/image.js";
+import "@sbb-esta/lyne-elements/link/block-link-static.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 {
+  display: block;
+  outline: none !important;
+  --sbb-panel-width: 13.9375rem;
+  --sbb-panel-inner-height: 10.4375rem;
+  --sbb-panel-triangle-height: 2.0625rem;
+  --sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));
+  --sbb-panel-line-height: var(--sbb-typo-line-height-titles);
+  --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
+  --sbb-panel-color: var(--sbb-color-white);
+  --sbb-panel-background-color: var(--sbb-color-red-alpha-90);
+  --sbb-panel-background-color-hover: var(--sbb-color-red);
+  --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
+  --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
+  --sbb-panel-animation-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-4x)
+  );
+  --sbb-panel-animation-easing: var(--sbb-animation-easing);
+  --sbb-teaser-hero-brightness-hover: 1.075;
+}
+@media (min-width: calc(52.5rem)) {
+  :host {
+    --sbb-panel-width: 20.0625rem;
+    --sbb-panel-inner-height: 15.006875rem;
+    --sbb-panel-triangle-height: 2.965625rem;
+    --sbb-panel-font-size: var(--sbb-typo-scale-2x);
+  }
+}
+@media (min-width: calc(64rem)) {
+  :host {
+    --sbb-panel-width: 26.75rem;
+    --sbb-panel-inner-height: 20.02375rem;
+    --sbb-panel-triangle-height: 3.956875rem;
+    --sbb-panel-font-size: var(--sbb-typo-scale-2-5x);
+    --sbb-panel-line-height: 1.2;
+  }
+}
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --sbb-panel-background-color: var(--sbb-panel-background-color-hover);
+    --sbb-teaser-hero-brightness: var(--sbb-teaser-hero-brightness-hover);
+  }
+}
+.sbb-teaser-hero {
+  position: relative;
+  display: block;
+  min-height: var(--sbb-panel-height);
+}
+:host(:not([data-focus-origin=mouse], [data-focus-origin=touch])) .sbb-teaser-hero:focus-visible {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
+}
+
+.sbb-teaser-hero__panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--sbb-panel-gap);
+  width: var(--sbb-panel-width);
+  height: var(--sbb-panel-height);
+  padding-block: var(--sbb-panel-triangle-height);
+  padding-inline: var(--sbb-panel-padding-inline);
+  clip-path: polygon(0 0, 100% var(--sbb-panel-triangle-height), 100% calc(100% - var(--sbb-panel-triangle-height)), 0% 100%);
+  background-color: var(--sbb-panel-background-color);
+  transition: background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+@media (any-hover: hover) {
+  .sbb-teaser-hero__panel:hover {
+    --sbb-panel-background-color: var(--sbb-panel-background-color-hover);
+  }
+}
+
+.sbb-teaser-hero__panel-text {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: var(--sbb-typo-font-family);
+  font-size: var(--sbb-panel-font-size);
+  font-weight: 300;
+  line-height: var(--sbb-panel-line-height);
+  letter-spacing: var(--sbb-typo-letter-spacing-titles);
+  color: var(--sbb-panel-color);
+  hyphens: auto;
+  display: inline;
+  margin: 0;
+  padding: 0;
+}
+
+.sbb-teaser-hero__panel-link {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::slotted([slot=image]),
+sbb-image {
+  will-change: filter;
+  filter: brightness(var(--sbb-teaser-hero-brightness, 1));
+  transition: filter var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing);
+}`;
+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 SbbTeaserHeroElement = class extends SbbLinkBaseElement {
+  renderTemplate() {
+    return html`
+      <span class="sbb-teaser-hero__panel">
+        <p class="sbb-teaser-hero__panel-text">
+          <slot></slot>
+        </p>
+        ${this.href ? html`<sbb-block-link-static
+              class="sbb-teaser-hero__panel-link"
+              icon-name="chevron-small-right-small"
+              icon-placement="end"
+              size="m"
+              negative
+            >
+              <slot name="link-content">${this.linkContent}</slot>
+            </sbb-block-link-static>` : nothing}
+      </span>
+      <slot name="image">
+        ${this.imageSrc ? html`<sbb-image image-src=${this.imageSrc} alt=${this.imageAlt ?? nothing}></sbb-image>` : nothing}
+      </slot>
+    `;
+  }
+};
+SbbTeaserHeroElement.styles = style;
+__decorateClass([
+  property({ attribute: "link-content" })
+], SbbTeaserHeroElement.prototype, "linkContent", 2);
+__decorateClass([
+  property({ attribute: "image-src" })
+], SbbTeaserHeroElement.prototype, "imageSrc", 2);
+__decorateClass([
+  property({ attribute: "image-alt" })
+], SbbTeaserHeroElement.prototype, "imageAlt", 2);
+SbbTeaserHeroElement = __decorateClass([
+  customElement("sbb-teaser-hero")
+], SbbTeaserHeroElement);
+export {
+  SbbTeaserHeroElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLWhlcm8uanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy1leHBlcmltZW50YWwvdGVhc2VyLWhlcm8vdGVhc2VyLWhlcm8udHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgU2JiTGlua0Jhc2VFbGVtZW50IH0gZnJvbSAnQHNiYi1lc3RhL2x5bmUtZWxlbWVudHMvY29yZS9iYXNlLWVsZW1lbnRzLmpzJztcbmltcG9ydCB7IHR5cGUgQ1NTUmVzdWx0R3JvdXAsIG5vdGhpbmcsIHR5cGUgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyBodG1sIH0gZnJvbSAnbGl0L3N0YXRpYy1odG1sLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vdGVhc2VyLWhlcm8uc2Nzcz9saXQmaW5saW5lJztcblxuaW1wb3J0ICdAc2JiLWVzdGEvbHluZS1lbGVtZW50cy9pbWFnZS5qcyc7XG5pbXBvcnQgJ0BzYmItZXN0YS9seW5lLWVsZW1lbnRzL2xpbmsvYmxvY2stbGluay1zdGF0aWMuanMnO1xuXG4vKipcbiAqIEl0IGRpc3BsYXlzIGFuIGltYWdlIGFuZCBhbiBhY3Rpb24gY2FsbCB3aXRoaW4gYSBwYW5lbC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCB0ZXh0IGNvbnRlbnQgdG8gdGhlIHBhbmVsXG4gKiBAc2xvdCBsaW5rLWNvbnRlbnQgLSBMaW5rIGNvbnRlbnQgb2YgdGhlIHBhbmVsXG4gKiBAc2xvdCBpbWFnZSAtIFRoZSBiYWNrZ3JvdW5kIGltYWdlIHRoYXQgY2FuIGJlIGEgYHNiYi1pbWFnZWBcbiAqL1xuQGN1c3RvbUVsZW1lbnQoJ3NiYi10ZWFzZXItaGVybycpXG5leHBvcnQgY2xhc3MgU2JiVGVhc2VySGVyb0VsZW1lbnQgZXh0ZW5kcyBTYmJMaW5rQmFzZUVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBzdHlsZTtcblxuICAvKiogUGFuZWwgbGluayB0ZXh0LiAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdsaW5rLWNvbnRlbnQnIH0pIHB1YmxpYyBsaW5rQ29udGVudD86IHN0cmluZztcblxuICAvKiogSW1hZ2Ugc3JjIHdpbGwgYmUgcGFzc2VkIHRvIGBzYmItaW1hZ2VgLiAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdpbWFnZS1zcmMnIH0pIHB1YmxpYyBpbWFnZVNyYz86IHN0cmluZztcblxuICAvKiogSW1hZ2UgYWx0IHRleHQgd2lsbCBiZSBwYXNzZWQgdG8gYHNiYi1pbWFnZWAuICovXG4gIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogJ2ltYWdlLWFsdCcgfSkgcHVibGljIGltYWdlQWx0Pzogc3RyaW5nO1xuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXJUZW1wbGF0ZSgpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8c3BhbiBjbGFzcz1cInNiYi10ZWFzZXItaGVyb19fcGFuZWxcIj5cbiAgICAgICAgPHAgY2xhc3M9XCJzYmItdGVhc2VyLWhlcm9fX3BhbmVsLXRleHRcIj5cbiAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgIDwvcD5cbiAgICAgICAgJHt0aGlzLmhyZWZcbiAgICAgICAgICA/IGh0bWxgPHNiYi1ibG9jay1saW5rLXN0YXRpY1xuICAgICAgICAgICAgICBjbGFzcz1cInNiYi10ZWFzZXItaGVyb19fcGFuZWwtbGlua1wiXG4gICAgICAgICAgICAgIGljb24tbmFtZT1cImNoZXZyb24tc21hbGwtcmlnaHQtc21hbGxcIlxuICAgICAgICAgICAgICBpY29uLXBsYWNlbWVudD1cImVuZFwiXG4gICAgICAgICAgICAgIHNpemU9XCJtXCJcbiAgICAgICAgICAgICAgbmVnYXRpdmVcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgPHNsb3QgbmFtZT1cImxpbmstY29udGVudFwiPiR7dGhpcy5saW5rQ29udGVudH08L3Nsb3Q+XG4gICAgICAgICAgICA8L3NiYi1ibG9jay1saW5rLXN0YXRpYz5gXG4gICAgICAgICAgOiBub3RoaW5nfVxuICAgICAgPC9zcGFuPlxuICAgICAgPHNsb3QgbmFtZT1cImltYWdlXCI+XG4gICAgICAgICR7dGhpcy5pbWFnZVNyY1xuICAgICAgICAgID8gaHRtbGA8c2JiLWltYWdlIGltYWdlLXNyYz0ke3RoaXMuaW1hZ2VTcmN9IGFsdD0ke3RoaXMuaW1hZ2VBbHQgPz8gbm90aGluZ30+PC9zYmItaW1hZ2U+YFxuICAgICAgICAgIDogbm90aGluZ31cbiAgICAgIDwvc2xvdD5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItdGVhc2VyLWhlcm8nOiBTYmJUZWFzZXJIZXJvRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQWtCYSxJQUFBLHVCQUFOLGNBQW1DLG1CQUFtQjtBQUFBLEVBWXhDLGlCQUFpQztBQUMzQyxXQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxVQUtELEtBQUssT0FDSDtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLDBDQU84QixLQUFLLFdBQVc7QUFBQSx3Q0FFOUMsT0FBTztBQUFBO0FBQUE7QUFBQSxVQUdULEtBQUssV0FDSCw0QkFBNEIsS0FBSyxRQUFRLFFBQVEsS0FBSyxZQUFZLE9BQU8sa0JBQ3pFLE9BQU87QUFBQTtBQUFBO0FBQUEsRUFHakI7QUFDRjtBQXJDYSxxQkFDWSxTQUF5QjtBQUdBLGdCQUFBO0FBQUEsRUFBL0MsU0FBUyxFQUFFLFdBQVcsZ0JBQWdCO0FBQUEsR0FKNUIscUJBSXFDLFdBQUEsZUFBQSxDQUFBO0FBR0gsZ0JBQUE7QUFBQSxFQUE1QyxTQUFTLEVBQUUsV0FBVyxhQUFhO0FBQUEsR0FQekIscUJBT2tDLFdBQUEsWUFBQSxDQUFBO0FBR0EsZ0JBQUE7QUFBQSxFQUE1QyxTQUFTLEVBQUUsV0FBVyxhQUFhO0FBQUEsR0FWekIscUJBVWtDLFdBQUEsWUFBQSxDQUFBO0FBVmxDLHVCQUFOLGdCQUFBO0FBQUEsRUFETixjQUFjLGlCQUFpQjtBQUFBLEdBQ25CLG9CQUFBOyJ9

package/development/teaser-paid/teaser-paid.d.ts

@@ -0,0 +1,20 @@
+import { SbbLinkBaseElement } from '@sbb-esta/lyne-elements/core/base-elements.js';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+/**
+ * It displays an image and a chip with a text.
+ *
+ * @slot chip - Link content of the panel
+ * @slot image - The background image that can be a `sbb-image`
+ */
+export declare class SbbTeaserPaidElement extends SbbLinkBaseElement {
+    static styles: CSSResultGroup;
+    private _chipSlotChanged;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser-paid': SbbTeaserPaidElement;
+    }
+}
+//# sourceMappingURL=teaser-paid.d.ts.map

package/development/teaser-paid/teaser-paid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-paid.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/teaser-paid/teaser-paid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACnF,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKrE;;;;;GAKG;AACH,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,gBAAgB;cAIL,cAAc,IAAI,cAAc;CAMpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/development/teaser-paid.d.ts

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

package/development/teaser-paid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-paid.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/teaser-paid.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}

package/development/teaser-paid.js

@@ -0,0 +1,91 @@
+import { SbbLinkBaseElement } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { css, html } from "lit";
+import { 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 {
+  display: block;
+  outline: none !important;
+  --sbb-teaser-paid-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto
+    var(--sbb-spacing-responsive-xxxs);
+  --sbb-teaser-paid-brightness-hover: 1.075;
+  --sbb-teaser-paid-animation-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-4x)
+  );
+  --sbb-teaser-paid-animation-easing: var(--sbb-animation-easing);
+}
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --sbb-teaser-paid-brightness: var(--sbb-teaser-paid-brightness-hover);
+  }
+}
+.sbb-teaser-paid {
+  position: relative;
+  display: block;
+}
+:host(:not([data-focus-origin=mouse], [data-focus-origin=touch])) .sbb-teaser-paid:focus-visible {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
+}
+
+::slotted([slot=chip]) {
+  position: absolute;
+  inset: var(--sbb-teaser-paid-chip-inset);
+  z-index: 1;
+}
+
+::slotted([slot=image]) {
+  will-change: filter;
+  filter: brightness(var(--sbb-teaser-paid-brightness, 1));
+  transition: filter var(--sbb-teaser-paid-animation-duration) var(--sbb-teaser-paid-animation-easing);
+}`;
+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 SbbTeaserPaidElement = class extends SbbLinkBaseElement {
+  _chipSlotChanged() {
+    var _a;
+    (_a = this.querySelector("sbb-chip")) == null ? void 0 : _a.setAttribute("color", "charcoal");
+  }
+  renderTemplate() {
+    return html`
+      <slot name="chip" @slotchange=${() => this._chipSlotChanged()}></slot>
+      <slot name="image"></slot>
+    `;
+  }
+};
+SbbTeaserPaidElement.styles = style;
+SbbTeaserPaidElement = __decorateClass([
+  customElement("sbb-teaser-paid")
+], SbbTeaserPaidElement);
+export {
+  SbbTeaserPaidElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLXBhaWQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy1leHBlcmltZW50YWwvdGVhc2VyLXBhaWQvdGVhc2VyLXBhaWQudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgU2JiTGlua0Jhc2VFbGVtZW50IH0gZnJvbSAnQHNiYi1lc3RhL2x5bmUtZWxlbWVudHMvY29yZS9iYXNlLWVsZW1lbnRzLmpzJztcbmltcG9ydCB7IGh0bWwsIHR5cGUgQ1NTUmVzdWx0R3JvdXAsIHR5cGUgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vdGVhc2VyLXBhaWQuc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBhbiBpbWFnZSBhbmQgYSBjaGlwIHdpdGggYSB0ZXh0LlxuICpcbiAqIEBzbG90IGNoaXAgLSBMaW5rIGNvbnRlbnQgb2YgdGhlIHBhbmVsXG4gKiBAc2xvdCBpbWFnZSAtIFRoZSBiYWNrZ3JvdW5kIGltYWdlIHRoYXQgY2FuIGJlIGEgYHNiYi1pbWFnZWBcbiAqL1xuQGN1c3RvbUVsZW1lbnQoJ3NiYi10ZWFzZXItcGFpZCcpXG5leHBvcnQgY2xhc3MgU2JiVGVhc2VyUGFpZEVsZW1lbnQgZXh0ZW5kcyBTYmJMaW5rQmFzZUVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBzdHlsZTtcblxuICBwcml2YXRlIF9jaGlwU2xvdENoYW5nZWQoKTogdm9pZCB7XG4gICAgdGhpcy5xdWVyeVNlbGVjdG9yKCdzYmItY2hpcCcpPy5zZXRBdHRyaWJ1dGUoJ2NvbG9yJywgJ2NoYXJjb2FsJyk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyVGVtcGxhdGUoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPHNsb3QgbmFtZT1cImNoaXBcIiBAc2xvdGNoYW5nZT0keygpID0+IHRoaXMuX2NoaXBTbG90Q2hhbmdlZCgpfT48L3Nsb3Q+XG4gICAgICA8c2xvdCBuYW1lPVwiaW1hZ2VcIj48L3Nsb3Q+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXRlYXNlci1wYWlkJzogU2JiVGVhc2VyUGFpZEVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQWFhLElBQUEsdUJBQU4sY0FBbUMsbUJBQW1CO0FBQUEsRUFHbkQsbUJBQXlCOztBQUMvQixlQUFLLGNBQWMsVUFBVSxNQUE3QixtQkFBZ0MsYUFBYSxTQUFTO0FBQUEsRUFDeEQ7QUFBQSxFQUVtQixpQkFBaUM7QUFDM0MsV0FBQTtBQUFBLHNDQUMyQixNQUFNLEtBQUssa0JBQWtCO0FBQUE7QUFBQTtBQUFBLEVBR2pFO0FBQ0Y7QUFiYSxxQkFDWSxTQUF5QjtBQURyQyx1QkFBTixnQkFBQTtBQUFBLEVBRE4sY0FBYyxpQkFBaUI7QUFBQSxHQUNuQixvQkFBQTsifQ==

package/index.d.ts

@@ -3,6 +3,8 @@ import { SbbPearlChainElement } from "./pearl-chain.js";
 import { SbbPearlChainTimeElement } from "./pearl-chain-time.js";
 import { SbbPearlChainVerticalElement } from "./pearl-chain-vertical.js";
 import { SbbPearlChainVerticalItemElement } from "./pearl-chain-vertical-item.js";
+import { SbbTeaserHeroElement } from "./teaser-hero.js";
+import { SbbTeaserPaidElement } from "./teaser-paid.js";
 import { SbbTimetableDurationElement } from "./timetable-duration.js";
 import { SbbTimetableRowElement } from "./timetable-row.js";
 
@@ -12,6 +14,8 @@ declare global {
   var SbbPearlChainTimeElement: SbbPearlChainTimeElement;
   var SbbPearlChainVerticalElement: SbbPearlChainVerticalElement;
   var SbbPearlChainVerticalItemElement: SbbPearlChainVerticalItemElement;
+  var SbbTeaserHeroElement: SbbTeaserHeroElement;
+  var SbbTeaserPaidElement: SbbTeaserPaidElement;
   var SbbTimetableDurationElement: SbbTimetableDurationElement;
   var SbbTimetableRowElement: SbbTimetableRowElement;
 }