@sbb-esta/lyne-elements 0.52.1 → 0.53.0

package/teaser-hero.js

@@ -1,51 +0,0 @@
-import { css as g, nothing as b } from "lit";
-import { property as p, customElement as m } from "lit/decorators.js";
-import { html as l } from "lit/static-html.js";
-import { SbbLinkBaseElement as c } from "./core/base-elements.js";
-import "./image.js";
-import "./link/block-link-static.js";
-const v = g`*,: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 c {
-  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([
-  m("sbb-teaser-hero")
-], a);
-export {
-  a as SbbTeaserHeroElement
-};

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

@@ -1,20 +0,0 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
-import { SbbLinkBaseElement } from '../core/base-elements.js';
-
-/**
- * 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

@@ -1 +0,0 @@
-{"version":3,"file":"teaser-paid.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser-paid/teaser-paid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI9D;;;;;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

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

package/teaser-paid.d.ts.map

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

package/teaser-paid.js

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