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

package/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/teaser-hero.js

@@ -0,0 +1,51 @@
+import { SbbLinkBaseElement as g } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { css as m, nothing as b } from "lit";
+import { property as p, customElement as c } from "lit/decorators.js";
+import { html as l } from "lit/static-html.js";
+import "@sbb-esta/lyne-elements/image.js";
+import "@sbb-esta/lyne-elements/link/block-link-static.js";
+const v = m`*,: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: 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: 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);-webkit-hyphens:auto;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 d = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (h, t, i, n) => {
+  for (var e = n > 1 ? void 0 : n ? f(t, i) : t, r = h.length - 1, o; r >= 0; r--)
+    (o = h[r]) && (e = (n ? o(t, i, e) : o(e)) || e);
+  return n && e && d(t, i, e), e;
+};
+let a = class extends g {
+  renderTemplate() {
+    return l`
+      <span class="sbb-teaser-hero__panel">
+        <p class="sbb-teaser-hero__panel-text">
+          <slot></slot>
+        </p>
+        ${this.href ? l`<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>` : b}
+      </span>
+      <slot name="image">
+        ${this.imageSrc ? l`<sbb-image image-src=${this.imageSrc} alt=${this.imageAlt ?? b}></sbb-image>` : b}
+      </slot>
+    `;
+  }
+};
+a.styles = v;
+s([
+  p({ attribute: "link-content" })
+], a.prototype, "linkContent", 2);
+s([
+  p({ attribute: "image-src" })
+], a.prototype, "imageSrc", 2);
+s([
+  p({ attribute: "image-alt" })
+], a.prototype, "imageAlt", 2);
+a = s([
+  c("sbb-teaser-hero")
+], a);
+export {
+  a as SbbTeaserHeroElement
+};

package/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/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/teaser-paid.d.ts

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

package/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/teaser-paid.js

@@ -0,0 +1,28 @@
+import { SbbLinkBaseElement as b } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { css as l, html as p } from "lit";
+import { customElement as c } from "lit/decorators.js";
+const d = l`*,: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 h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, m = (s, t, a, i) => {
+  for (var e = i > 1 ? void 0 : i ? v(t, a) : t, o = s.length - 1, r; o >= 0; o--)
+    (r = s[o]) && (e = (i ? r(t, a, e) : r(e)) || e);
+  return i && e && h(t, a, e), e;
+};
+let n = class extends b {
+  _chipSlotChanged() {
+    var s;
+    (s = this.querySelector("sbb-chip")) == null || s.setAttribute("color", "charcoal");
+  }
+  renderTemplate() {
+    return p`
+      <slot name="chip" @slotchange=${() => this._chipSlotChanged()}></slot>
+      <slot name="image"></slot>
+    `;
+  }
+};
+n.styles = d;
+n = m([
+  c("sbb-teaser-paid")
+], n);
+export {
+  n as SbbTeaserPaidElement
+};

package/timetable-duration.js

@@ -1,21 +1,21 @@
-import { SbbLanguageController as b } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { SbbLanguageController as g } from "@sbb-esta/lyne-elements/core/controllers.js";
 import { i18nDurationHour as l, i18nDurationMinute as u } from "@sbb-esta/lyne-elements/core/i18n.js";
-import { css as h, LitElement as c, html as m } from "lit";
-import { property as f, customElement as g } from "lit/decorators.js";
-const d = h`*,:before,:after{box-sizing:border-box}:host{display:inline-block}.duration{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;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);margin:0;white-space:nowrap}.duration__text--visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-var x = Object.defineProperty, v = Object.getOwnPropertyDescriptor, p = (e, i, s, r) => {
-  for (var t = r > 1 ? void 0 : r ? v(i, s) : i, n = e.length - 1, o; n >= 0; n--)
-    (o = e[n]) && (t = (r ? o(i, s, t) : o(t)) || t);
-  return r && t && x(i, s, t), t;
+import { css as b, LitElement as h, html as c } from "lit";
+import { property as m, customElement as f } from "lit/decorators.js";
+const d = b`*,:before,:after{box-sizing:border-box}:host{display:inline-block}.duration{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;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);margin:0;white-space:nowrap}.duration__text--visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+var _ = Object.defineProperty, x = Object.getOwnPropertyDescriptor, p = (e, n, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? x(n, s) : n, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (t = (r ? o(n, s, t) : o(t)) || t);
+  return r && t && _(n, s, t), t;
 };
-let a = class extends c {
+let a = class extends h {
   constructor() {
-    super(...arguments), this.a = new b(this);
+    super(...arguments), this._language = new g(this);
   }
   render() {
-    const e = JSON.parse(this.config), i = l.multiple.short[this.a.current], s = u.multiple.short[this.a.current];
-    let r = "", t = "", n = l.multiple.long[this.a.current], o = u.multiple.long[this.a.current];
-    return e.hours === 1 && (n = l.single.long[this.a.current]), e.minutes === 1 && (o = u.single.long[this.a.current]), e.hours !== 0 && (r += `${e.hours} ${i}`, t += `${e.hours} ${n}`), r += ` ${e.minutes} ${s}`, t += ` ${e.minutes} ${o}.`, m`
+    const e = JSON.parse(this.config), n = l.multiple.short[this._language.current], s = u.multiple.short[this._language.current];
+    let r = "", t = "", i = l.multiple.long[this._language.current], o = u.multiple.long[this._language.current];
+    return e.hours === 1 && (i = l.single.long[this._language.current]), e.minutes === 1 && (o = u.single.long[this._language.current]), e.hours !== 0 && (r += `${e.hours} ${n}`, t += `${e.hours} ${i}`), r += ` ${e.minutes} ${s}`, t += ` ${e.minutes} ${o}.`, c`
       <p aria-label=${t} class="duration" role="text">
         <span aria-hidden="true" class="duration__text--visual" role="presentation">
           ${r}
@@ -27,10 +27,10 @@ let a = class extends c {
 };
 a.styles = d;
 p([
-  f()
+  m()
 ], a.prototype, "config", 2);
 a = p([
-  g("sbb-timetable-duration")
+  f("sbb-timetable-duration")
 ], a);
 export {
   a as SbbTimetableDurationElement