@sbb-esta/lyne-elements-dev 4.9.0-dev.1775122363 → 4.9.0-dev.1775125441
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/styles/core.scss +4 -1
- package/core.css +9 -0
- package/development/teaser/teaser.component.js +1 -1
- package/development/teaser.component-Cky6kKU0.js +118 -0
- package/development/teaser.js +1 -1
- package/development/teaser.pure.js +1 -1
- package/off-brand-theme.css +9 -0
- package/package.json +2 -2
- package/safety-theme.css +9 -0
- package/standard-theme.css +9 -0
- package/teaser/teaser.component.js +1 -1
- package/teaser.component-WZL0vAo9.js +91 -0
- package/teaser.js +1 -1
- package/teaser.pure.js +1 -1
- package/development/teaser.component-C63t0z1I.js +0 -118
- package/teaser.component-u1uLVhwo.js +0 -91
package/core/styles/core.scss
CHANGED
|
@@ -236,6 +236,9 @@ $theme: 'standard' !default;
|
|
|
236
236
|
@use '../../tag/tag/tag.global' as tag with (
|
|
237
237
|
$theme: $theme
|
|
238
238
|
);
|
|
239
|
+
@use '../../teaser/teaser.global' as teaser with (
|
|
240
|
+
$theme: $theme
|
|
241
|
+
);
|
|
239
242
|
@use '../../visual-checkbox/visual-checkbox.global' as visual-checkbox with (
|
|
240
243
|
$theme: $theme
|
|
241
244
|
);
|
|
@@ -314,6 +317,7 @@ $theme: 'standard' !default;
|
|
|
314
317
|
@include tab-group-common.base;
|
|
315
318
|
@include tab-label-common.base;
|
|
316
319
|
@include tag.base;
|
|
320
|
+
@include teaser.base;
|
|
317
321
|
@include visual-checkbox.base;
|
|
318
322
|
|
|
319
323
|
@include a11y.if-forced-colors {
|
|
@@ -581,7 +585,6 @@ img {
|
|
|
581
585
|
}
|
|
582
586
|
}
|
|
583
587
|
|
|
584
|
-
// TODO: Move back to the teaser components when the global CSS refactoring happens
|
|
585
588
|
sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
586
589
|
--sbb-image-object-fit: cover;
|
|
587
590
|
--sbb-image-aspect-ratio: 4 / 3;
|
package/core.css
CHANGED
|
@@ -1734,6 +1734,15 @@ slot[name=error]::slotted(*) {
|
|
|
1734
1734
|
--sbb-tag-amount-color: var(--sbb-color-metal);
|
|
1735
1735
|
--sbb-tag-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1736
1736
|
--sbb-tag-height: var(--sbb-size-element-xs);
|
|
1737
|
+
--sbb-teaser-scale-hover: 1.02;
|
|
1738
|
+
--sbb-teaser-description-color: var(--sbb-color-granite);
|
|
1739
|
+
--sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
|
|
1740
|
+
--sbb-teaser-flex-direction: row;
|
|
1741
|
+
--sbb-teaser-align-items: center;
|
|
1742
|
+
--sbb-teaser-font-size: var(--sbb-text-font-size-s);
|
|
1743
|
+
--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
|
|
1744
|
+
--sbb-teaser-border-radius: var(--sbb-border-radius-4x);
|
|
1745
|
+
--sbb-teaser-image-width: 18.75rem;
|
|
1737
1746
|
--sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
|
|
1738
1747
|
--sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
|
|
1739
1748
|
--sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as SbbTeaserElement } from "../teaser.component-
|
|
1
|
+
import { t as SbbTeaserElement } from "../teaser.component-Cky6kKU0.js";
|
|
2
2
|
export { SbbTeaserElement };
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { unsafeCSS } from "lit";
|
|
3
|
+
import { property } from "lit/decorators.js";
|
|
4
|
+
import { SbbLinkBaseElement } from "./core/base-elements.js";
|
|
5
|
+
import { boxSizingStyles } from "./core/styles.js";
|
|
6
|
+
import { html as html$1 } from "lit/static-html.js";
|
|
7
|
+
import "./screen-reader-only.js";
|
|
8
|
+
//#region src/elements/teaser/teaser.scss?inline
|
|
9
|
+
var teaser_default = "@charset \"UTF-8\";\n:host {\n --_sbb-teaser-forced-colors-inset: calc(-1 * var(--sbb-focus-outline-offset));\n --_sbb-teaser-forced-colors-outline-offset: calc(2 * var(--sbb-focus-outline-offset));\n --_sbb-teaser-forced-colors-border-radius: calc(\n var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset)\n );\n display: inline-block;\n outline: none !important;\n}\n@media (forced-colors: active) {\n :host {\n --sbb-teaser-description-color: LinkText;\n --sbb-title-text-color-normal-override: LinkText !important;\n }\n}\n\n:host([alignment=after]) {\n --sbb-teaser-align-items: start;\n}\n\n:host([alignment=below]) {\n --sbb-teaser-flex-direction: column;\n --sbb-teaser-align-items: baseline;\n --sbb-teaser-gap: var(--sbb-spacing-fixed-3x);\n}\n\n@media (any-hover: hover) {\n :host(:hover) {\n --sbb-teaser-scale: var(--sbb-teaser-scale-hover);\n }\n}\n.sbb-teaser__wrapper {\n display: flex;\n position: relative;\n cursor: var(--sbb-cursor-pointer);\n}\n.sbb-teaser__wrapper::before {\n content: \"\";\n user-select: none;\n width: 0;\n height: 0;\n}\n\n.sbb-teaser {\n text-decoration: none;\n position: absolute;\n inset: 0;\n}\n.sbb-teaser:focus-visible {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n border-radius: var(--sbb-teaser-border-radius);\n}\n@media (forced-colors: active) {\n .sbb-teaser:focus-visible {\n outline-offset: var(--_sbb-teaser-forced-colors-outline-offset);\n }\n}\n@media (forced-colors: active) {\n .sbb-teaser::before {\n content: \"\";\n position: absolute;\n inset: var(--_sbb-teaser-forced-colors-inset);\n pointer-events: none;\n border-radius: var(--_sbb-teaser-forced-colors-border-radius);\n border: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n\n.sbb-teaser__container {\n display: flex;\n flex-flow: var(--sbb-teaser-flex-direction) nowrap;\n align-items: var(--sbb-teaser-align-items);\n gap: var(--sbb-teaser-gap);\n max-width: 100%;\n width: 100%;\n pointer-events: none;\n}\n\n.sbb-teaser__text {\n color: var(--sbb-teaser-description-color);\n font-size: var(--sbb-teaser-font-size);\n letter-spacing: var(--sbb-typo-letter-spacing-text);\n overflow: hidden;\n max-width: 100%;\n}\n\n::slotted([slot=image]) {\n display: block;\n width: var(--sbb-teaser-image-width);\n}\n\n.sbb-teaser__image-wrapper {\n flex-shrink: 0;\n overflow: hidden;\n border-radius: var(--sbb-teaser-border-radius);\n transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);\n}\n:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper {\n display: none;\n}\n@media (any-hover: hover) {\n :host(:hover) .sbb-teaser__image-wrapper {\n box-shadow: var(--sbb-box-shadow-level-9-hard);\n }\n}\n\n.sbb-teaser__description {\n display: inline-block;\n margin: 0;\n padding: 0;\n}\n\n::slotted(sbb-chip-label) {\n display: block;\n max-width: fit-content;\n margin-block-end: var(--sbb-spacing-fixed-1x);\n}\n\n::slotted(sbb-title) {\n margin-block: 0;\n}";
|
|
10
|
+
//#endregion
|
|
11
|
+
//#region src/elements/teaser/teaser.component.ts
|
|
12
|
+
/**
|
|
13
|
+
* It displays an interactive image with caption.
|
|
14
|
+
*
|
|
15
|
+
* @slot image - Slot used to render the image.
|
|
16
|
+
* @slot chip - Slot for the `sbb-chip-label` element. The slot on the `sbb-chip-label` element is automatically assigned when slotted in the unnamed slot.
|
|
17
|
+
* @slot title - Slot for the title. For the standard `sbb-title` element, the slot is automatically assigned when slotted in the unnamed slot.
|
|
18
|
+
* @slot - Use the unnamed slot to render the description, the sbb-title and the sbb-chip-label.
|
|
19
|
+
*/
|
|
20
|
+
var SbbTeaserElement = (() => {
|
|
21
|
+
let _classSuper = SbbLinkBaseElement;
|
|
22
|
+
let _alignment_decorators;
|
|
23
|
+
let _alignment_initializers = [];
|
|
24
|
+
let _alignment_extraInitializers = [];
|
|
25
|
+
return class SbbTeaserElement extends _classSuper {
|
|
26
|
+
static {
|
|
27
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
28
|
+
_alignment_decorators = [property({ reflect: true })];
|
|
29
|
+
__esDecorate(this, null, _alignment_decorators, {
|
|
30
|
+
kind: "accessor",
|
|
31
|
+
name: "alignment",
|
|
32
|
+
static: false,
|
|
33
|
+
private: false,
|
|
34
|
+
access: {
|
|
35
|
+
has: (obj) => "alignment" in obj,
|
|
36
|
+
get: (obj) => obj.alignment,
|
|
37
|
+
set: (obj, value) => {
|
|
38
|
+
obj.alignment = value;
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
metadata: _metadata
|
|
42
|
+
}, _alignment_initializers, _alignment_extraInitializers);
|
|
43
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
configurable: true,
|
|
46
|
+
writable: true,
|
|
47
|
+
value: _metadata
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
static {
|
|
51
|
+
this.elementName = "sbb-teaser";
|
|
52
|
+
}
|
|
53
|
+
static {
|
|
54
|
+
this.styles = [boxSizingStyles, unsafeCSS(teaser_default)];
|
|
55
|
+
}
|
|
56
|
+
#alignment_accessor_storage = __runInitializers(this, _alignment_initializers, "after-centered");
|
|
57
|
+
/** Teaser variant - define the position and the alignment of the text block. */
|
|
58
|
+
get alignment() {
|
|
59
|
+
return this.#alignment_accessor_storage;
|
|
60
|
+
}
|
|
61
|
+
set alignment(value) {
|
|
62
|
+
this.#alignment_accessor_storage = value;
|
|
63
|
+
}
|
|
64
|
+
_handleSlotchange() {
|
|
65
|
+
const chip = Array.from(this.children).find((el) => el.localName === "sbb-chip-label");
|
|
66
|
+
if (chip) chip.slot = "chip";
|
|
67
|
+
const title = Array.from(this.children).find((el) => el.localName === "sbb-title");
|
|
68
|
+
if (title) title.slot = "title";
|
|
69
|
+
}
|
|
70
|
+
_configureChip(event) {
|
|
71
|
+
const chipLabel = event.target.assignedElements().find((e) => e.localName === "sbb-chip-label");
|
|
72
|
+
if (chipLabel) {
|
|
73
|
+
customElements.upgrade(chipLabel);
|
|
74
|
+
chipLabel.color = "charcoal";
|
|
75
|
+
chipLabel.size = "xxs";
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
_configureTitle(event) {
|
|
79
|
+
const title = event.target.assignedElements().find((e) => e.localName === "sbb-title");
|
|
80
|
+
if (title) {
|
|
81
|
+
customElements.upgrade(title);
|
|
82
|
+
title.visualLevel = "5";
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
render() {
|
|
86
|
+
return html$1`
|
|
87
|
+
<div class="sbb-teaser__wrapper">
|
|
88
|
+
${this.renderLink(html$1`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`)}
|
|
89
|
+
${this.renderContent()}
|
|
90
|
+
</div>
|
|
91
|
+
`;
|
|
92
|
+
}
|
|
93
|
+
renderContent() {
|
|
94
|
+
return html$1`
|
|
95
|
+
<span class="sbb-teaser__container">
|
|
96
|
+
<span class="sbb-teaser__image-wrapper">
|
|
97
|
+
<slot name="image"></slot>
|
|
98
|
+
</span>
|
|
99
|
+
<span class="sbb-teaser__text">
|
|
100
|
+
<slot name="chip" @slotchange=${this._configureChip}></slot>
|
|
101
|
+
<slot name="title" @slotchange=${this._configureTitle}></slot>
|
|
102
|
+
<p class="sbb-teaser__description">
|
|
103
|
+
<slot @slotchange=${this._handleSlotchange}></slot>
|
|
104
|
+
</p>
|
|
105
|
+
</span>
|
|
106
|
+
</span>
|
|
107
|
+
`;
|
|
108
|
+
}
|
|
109
|
+
constructor() {
|
|
110
|
+
super(...arguments);
|
|
111
|
+
__runInitializers(this, _alignment_extraInitializers);
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
})();
|
|
115
|
+
//#endregion
|
|
116
|
+
export { SbbTeaserElement as t };
|
|
117
|
+
|
|
118
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLmNvbXBvbmVudC1Da3k2a0tVMC5qcyIsIm5hbWVzIjpbXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvdGVhc2VyL3RlYXNlci5zY3NzP2lubGluZSIsIi4uLy4uLy4uL3NyYy9lbGVtZW50cy90ZWFzZXIvdGVhc2VyLmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJAdXNlICcuLi9jb3JlL3N0eWxlcycgYXMgc2JiO1xuXG46aG9zdCB7XG4gIC0tX3NiYi10ZWFzZXItZm9yY2VkLWNvbG9ycy1pbnNldDogY2FsYygtMSAqIHZhcigtLXNiYi1mb2N1cy1vdXRsaW5lLW9mZnNldCkpO1xuICAtLV9zYmItdGVhc2VyLWZvcmNlZC1jb2xvcnMtb3V0bGluZS1vZmZzZXQ6IGNhbGMoMiAqIHZhcigtLXNiYi1mb2N1cy1vdXRsaW5lLW9mZnNldCkpO1xuICAtLV9zYmItdGVhc2VyLWZvcmNlZC1jb2xvcnMtYm9yZGVyLXJhZGl1czogY2FsYyhcbiAgICB2YXIoLS1zYmItdGVhc2VyLWJvcmRlci1yYWRpdXMpICsgdmFyKC0tc2JiLWZvY3VzLW91dGxpbmUtb2Zmc2V0KVxuICApO1xuXG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcblxuICAvLyBVc2UgIWltcG9ydGFudCBoZXJlIHRvIG5vdCBpbnRlcmZlcmUgd2l0aCBGaXJlZm94IGZvY3VzIHJpbmcgZGVmaW5pdGlvblxuICAvLyB3aGljaCBhcHBlYXJzIGluIG5vcm1hbGl6ZSBDU1Mgb2Ygc2V2ZXJhbCBmcmFtZXdvcmtzLlxuICBvdXRsaW5lOiBub25lICFpbXBvcnRhbnQ7XG5cbiAgQGluY2x1ZGUgc2JiLmlmLWZvcmNlZC1jb2xvcnMge1xuICAgIC0tc2JiLXRlYXNlci1kZXNjcmlwdGlvbi1jb2xvcjogTGlua1RleHQ7XG4gICAgLS1zYmItdGl0bGUtdGV4dC1jb2xvci1ub3JtYWwtb3ZlcnJpZGU6IExpbmtUZXh0ICFpbXBvcnRhbnQ7XG4gIH1cbn1cblxuOmhvc3QoW2FsaWdubWVudD0nYWZ0ZXInXSkge1xuICAtLXNiYi10ZWFzZXItYWxpZ24taXRlbXM6IHN0YXJ0O1xufVxuXG46aG9zdChbYWxpZ25tZW50PSdiZWxvdyddKSB7XG4gIC0tc2JiLXRlYXNlci1mbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAtLXNiYi10ZWFzZXItYWxpZ24taXRlbXM6IGJhc2VsaW5lO1xuICAtLXNiYi10ZWFzZXItZ2FwOiB2YXIoLS1zYmItc3BhY2luZy1maXhlZC0zeCk7XG59XG5cbkBpbmNsdWRlIHNiYi5ob3Zlci1tcSgkaG92ZXI6IHRydWUpIHtcbiAgOmhvc3QoOmhvdmVyKSB7XG4gICAgLS1zYmItdGVhc2VyLXNjYWxlOiB2YXIoLS1zYmItdGVhc2VyLXNjYWxlLWhvdmVyKTtcbiAgfVxufVxuXG4uc2JiLXRlYXNlcl9fd3JhcHBlciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgY3Vyc29yOiB2YXIoLS1zYmItY3Vyc29yLXBvaW50ZXIpO1xuXG4gIEBpbmNsdWRlIHNiYi56ZXJvLXdpZHRoLXNwYWNlO1xufVxuXG4uc2JiLXRlYXNlciB7XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBpbnNldDogMDtcblxuICAmOmZvY3VzLXZpc2libGUge1xuICAgIEBpbmNsdWRlIHNiYi5mb2N1cy1vdXRsaW5lO1xuXG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tc2JiLXRlYXNlci1ib3JkZXItcmFkaXVzKTtcblxuICAgIC8vIFdlIG1vdmUgdGhlIGZvY3VzIG91dGxpbmUgZnVydGhlciBvdXQgdG8gbm90IG92ZXJsYXAgd2l0aCB0aGUgdGVhc2VyIGJvcmRlciBpbiBmb3JjZWQgY29sb3JzXG4gICAgQGluY2x1ZGUgc2JiLmlmLWZvcmNlZC1jb2xvcnMge1xuICAgICAgb3V0bGluZS1vZmZzZXQ6IHZhcigtLV9zYmItdGVhc2VyLWZvcmNlZC1jb2xvcnMtb3V0bGluZS1vZmZzZXQpO1xuICAgIH1cbiAgfVxuXG4gIEBpbmNsdWRlIHNiYi5pZi1mb3JjZWQtY29sb3JzIHtcbiAgICAmOjpiZWZvcmUge1xuICAgICAgY29udGVudDogJyc7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICBpbnNldDogdmFyKC0tX3NiYi10ZWFzZXItZm9yY2VkLWNvbG9ycy1pbnNldCk7XG4gICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLV9zYmItdGVhc2VyLWZvcmNlZC1jb2xvcnMtYm9yZGVyLXJhZGl1cyk7XG4gICAgICBib3JkZXI6IHZhcigtLXNiYi1ib3JkZXItd2lkdGgtMXgpIHNvbGlkIENhbnZhc1RleHQ7XG4gICAgfVxuICB9XG59XG5cbi5zYmItdGVhc2VyX19jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWZsb3c6IHZhcigtLXNiYi10ZWFzZXItZmxleC1kaXJlY3Rpb24pIG5vd3JhcDtcbiAgYWxpZ24taXRlbXM6IHZhcigtLXNiYi10ZWFzZXItYWxpZ24taXRlbXMpO1xuICBnYXA6IHZhcigtLXNiYi10ZWFzZXItZ2FwKTtcbiAgbWF4LXdpZHRoOiAxMDAlO1xuICB3aWR0aDogMTAwJTtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG59XG5cbi5zYmItdGVhc2VyX190ZXh0IHtcbiAgY29sb3I6IHZhcigtLXNiYi10ZWFzZXItZGVzY3JpcHRpb24tY29sb3IpO1xuICBmb250LXNpemU6IHZhcigtLXNiYi10ZWFzZXItZm9udC1zaXplKTtcbiAgbGV0dGVyLXNwYWNpbmc6IHZhcigtLXNiYi10eXBvLWxldHRlci1zcGFjaW5nLXRleHQpO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBtYXgtd2lkdGg6IDEwMCU7XG59XG5cbjo6c2xvdHRlZChbc2xvdD0naW1hZ2UnXSkge1xuICBkaXNwbGF5OiBibG9jaztcbiAgd2lkdGg6IHZhcigtLXNiYi10ZWFzZXItaW1hZ2Utd2lkdGgpO1xufVxuXG4uc2JiLXRlYXNlcl9faW1hZ2Utd3JhcHBlciB7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1zYmItdGVhc2VyLWJvcmRlci1yYWRpdXMpO1xuICB0cmFuc2l0aW9uOiBib3gtc2hhZG93IHZhcigtLXNiYi10ZWFzZXItaW1hZ2UtYW5pbWF0aW9uLWR1cmF0aW9uKSB2YXIoLS1zYmItYW5pbWF0aW9uLWVhc2luZyk7XG5cbiAgOmhvc3QoOm5vdCg6c3RhdGUoc2xvdHRlZC1pbWFnZSkpKSAmIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG5cbiAgQGluY2x1ZGUgc2JiLmhvdmVyLW1xKCRob3ZlcjogdHJ1ZSkge1xuICAgIDpob3N0KDpob3ZlcikgJiB7XG4gICAgICBib3gtc2hhZG93OiB2YXIoLS1zYmItYm94LXNoYWRvdy1sZXZlbC05LWhhcmQpO1xuICAgIH1cbiAgfVxufVxuXG4uc2JiLXRlYXNlcl9fZGVzY3JpcHRpb24ge1xuICAvLyBSZXNldCBwYXJhZ3JhcGggc3R5bGVzXG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgbWFyZ2luOiAwO1xuICBwYWRkaW5nOiAwO1xufVxuXG46OnNsb3R0ZWQoc2JiLWNoaXAtbGFiZWwpIHtcbiAgZGlzcGxheTogYmxvY2s7XG4gIG1heC13aWR0aDogZml0LWNvbnRlbnQ7XG4gIG1hcmdpbi1ibG9jay1lbmQ6IHZhcigtLXNiYi1zcGFjaW5nLWZpeGVkLTF4KTtcbn1cblxuOjpzbG90dGVkKHNiYi10aXRsZSkge1xuICBtYXJnaW4tYmxvY2s6IDA7XG59XG4iLCJpbXBvcnQgeyB1bnNhZmVDU1MsIHR5cGUgQ1NTUmVzdWx0R3JvdXAsIHR5cGUgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyBodG1sIH0gZnJvbSAnbGl0L3N0YXRpYy1odG1sLmpzJztcblxuaW1wb3J0IHR5cGUgeyBTYmJDaGlwTGFiZWxFbGVtZW50IH0gZnJvbSAnLi4vY2hpcC1sYWJlbC50cyc7XG5pbXBvcnQgeyBTYmJMaW5rQmFzZUVsZW1lbnQgfSBmcm9tICcuLi9jb3JlL2Jhc2UtZWxlbWVudHMudHMnO1xuaW1wb3J0IHsgYm94U2l6aW5nU3R5bGVzIH0gZnJvbSAnLi4vY29yZS9zdHlsZXMudHMnO1xuaW1wb3J0IHR5cGUgeyBTYmJUaXRsZUVsZW1lbnQgfSBmcm9tICcuLi90aXRsZS50cyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL3RlYXNlci5zY3NzP2lubGluZSc7XG5cbmltcG9ydCAnLi4vc2NyZWVuLXJlYWRlci1vbmx5LnRzJztcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBhbiBpbnRlcmFjdGl2ZSBpbWFnZSB3aXRoIGNhcHRpb24uXG4gKlxuICogQHNsb3QgaW1hZ2UgLSBTbG90IHVzZWQgdG8gcmVuZGVyIHRoZSBpbWFnZS5cbiAqIEBzbG90IGNoaXAgLSBTbG90IGZvciB0aGUgYHNiYi1jaGlwLWxhYmVsYCBlbGVtZW50LiBUaGUgc2xvdCBvbiB0aGUgYHNiYi1jaGlwLWxhYmVsYCBlbGVtZW50IGlzIGF1dG9tYXRpY2FsbHkgYXNzaWduZWQgd2hlbiBzbG90dGVkIGluIHRoZSB1bm5hbWVkIHNsb3QuXG4gKiBAc2xvdCB0aXRsZSAtIFNsb3QgZm9yIHRoZSB0aXRsZS4gRm9yIHRoZSBzdGFuZGFyZCBgc2JiLXRpdGxlYCBlbGVtZW50LCB0aGUgc2xvdCBpcyBhdXRvbWF0aWNhbGx5IGFzc2lnbmVkIHdoZW4gc2xvdHRlZCBpbiB0aGUgdW5uYW1lZCBzbG90LlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byByZW5kZXIgdGhlIGRlc2NyaXB0aW9uLCB0aGUgc2JiLXRpdGxlIGFuZCB0aGUgc2JiLWNoaXAtbGFiZWwuXG4gKi9cbmV4cG9ydCBjbGFzcyBTYmJUZWFzZXJFbGVtZW50IGV4dGVuZHMgU2JiTGlua0Jhc2VFbGVtZW50IHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByZWFkb25seSBlbGVtZW50TmFtZTogc3RyaW5nID0gJ3NiYi10ZWFzZXInO1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbYm94U2l6aW5nU3R5bGVzLCB1bnNhZmVDU1Moc3R5bGUpXTtcblxuICAvKiogVGVhc2VyIHZhcmlhbnQgLSBkZWZpbmUgdGhlIHBvc2l0aW9uIGFuZCB0aGUgYWxpZ25tZW50IG9mIHRoZSB0ZXh0IGJsb2NrLiAqL1xuICBAcHJvcGVydHkoeyByZWZsZWN0OiB0cnVlIH0pIHB1YmxpYyBhY2Nlc3NvciBhbGlnbm1lbnQ6ICdhZnRlci1jZW50ZXJlZCcgfCAnYWZ0ZXInIHwgJ2JlbG93JyA9XG4gICAgJ2FmdGVyLWNlbnRlcmVkJztcblxuICBwcml2YXRlIF9oYW5kbGVTbG90Y2hhbmdlKCk6IHZvaWQge1xuICAgIGNvbnN0IGNoaXAgPSBBcnJheS5mcm9tKHRoaXMuY2hpbGRyZW4pLmZpbmQoKGVsKSA9PiBlbC5sb2NhbE5hbWUgPT09ICdzYmItY2hpcC1sYWJlbCcpO1xuICAgIGlmIChjaGlwKSB7XG4gICAgICBjaGlwLnNsb3QgPSAnY2hpcCc7XG4gICAgfVxuXG4gICAgY29uc3QgdGl0bGUgPSBBcnJheS5mcm9tKHRoaXMuY2hpbGRyZW4pLmZpbmQoKGVsKSA9PiBlbC5sb2NhbE5hbWUgPT09ICdzYmItdGl0bGUnKTtcbiAgICBpZiAodGl0bGUpIHtcbiAgICAgIHRpdGxlLnNsb3QgPSAndGl0bGUnO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgX2NvbmZpZ3VyZUNoaXAoZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgLy8gV2UgbmVlZCB0byBjaGVjayBhc3NpZ25lZCBlbGVtZW50cyBiZWNhdXNlIGluIHRoZSBpbWFnZSBzbG90IGl0IGNhbiBoYXZlIGxhYmVscyBhcyB3ZWxsLlxuICAgIGNvbnN0IGNoaXBMYWJlbCA9IChldmVudC50YXJnZXQgYXMgSFRNTFNsb3RFbGVtZW50KVxuICAgICAgLmFzc2lnbmVkRWxlbWVudHMoKVxuICAgICAgLmZpbmQoKGUpOiBlIGlzIFNiYkNoaXBMYWJlbEVsZW1lbnQgPT4gZS5sb2NhbE5hbWUgPT09ICdzYmItY2hpcC1sYWJlbCcpO1xuXG4gICAgaWYgKGNoaXBMYWJlbCkge1xuICAgICAgY3VzdG9tRWxlbWVudHMudXBncmFkZShjaGlwTGFiZWwpO1xuICAgICAgY2hpcExhYmVsLmNvbG9yID0gJ2NoYXJjb2FsJztcbiAgICAgIGNoaXBMYWJlbC5zaXplID0gJ3h4cyc7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBfY29uZmlndXJlVGl0bGUoZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgY29uc3QgdGl0bGUgPSAoZXZlbnQudGFyZ2V0IGFzIEhUTUxTbG90RWxlbWVudClcbiAgICAgIC5hc3NpZ25lZEVsZW1lbnRzKClcbiAgICAgIC5maW5kKChlKTogZSBpcyBTYmJUaXRsZUVsZW1lbnQgPT4gZS5sb2NhbE5hbWUgPT09ICdzYmItdGl0bGUnKTtcblxuICAgIGlmICh0aXRsZSkge1xuICAgICAgY3VzdG9tRWxlbWVudHMudXBncmFkZSh0aXRsZSk7XG4gICAgICB0aXRsZS52aXN1YWxMZXZlbCA9ICc1JztcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICAvLyBXZSByZW5kZXIgdGhlIGNvbnRlbnQgb3V0c2lkZSB0aGUgYW5jaG9yIHRhZyB0byBhbGxvdyBzY3JlZW4gcmVhZGVycyB0byBuYXZpZ2F0ZSB0aHJvdWdoIGl0XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8ZGl2IGNsYXNzPVwic2JiLXRlYXNlcl9fd3JhcHBlclwiPlxuICAgICAgICAke3RoaXMucmVuZGVyTGluayhcbiAgICAgICAgICAvLyBGb3IgU0VPLCB3ZSBhZGQgdGhlIGFjY2Vzc2liaWxpdHkgaGlkZGVuIGFzIGhpZGRlbiBjb250ZW50IG9mIHRoZSBsaW5rXG4gICAgICAgICAgaHRtbGA8c2JiLXNjcmVlbi1yZWFkZXItb25seT4ke3RoaXMuYWNjZXNzaWJpbGl0eUxhYmVsfTwvc2JiLXNjcmVlbi1yZWFkZXItb25seT5gLFxuICAgICAgICApfVxuICAgICAgICAke3RoaXMucmVuZGVyQ29udGVudCgpfVxuICAgICAgPC9kaXY+XG4gICAgYDtcbiAgfVxuXG4gIHByb3RlY3RlZCByZW5kZXJDb250ZW50KCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXRlYXNlcl9fY29udGFpbmVyXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXRlYXNlcl9faW1hZ2Utd3JhcHBlclwiPlxuICAgICAgICAgIDxzbG90IG5hbWU9XCJpbWFnZVwiPjwvc2xvdD5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInNiYi10ZWFzZXJfX3RleHRcIj5cbiAgICAgICAgICA8c2xvdCBuYW1lPVwiY2hpcFwiIEBzbG90Y2hhbmdlPSR7dGhpcy5fY29uZmlndXJlQ2hpcH0+PC9zbG90PlxuICAgICAgICAgIDxzbG90IG5hbWU9XCJ0aXRsZVwiIEBzbG90Y2hhbmdlPSR7dGhpcy5fY29uZmlndXJlVGl0bGV9Pjwvc2xvdD5cbiAgICAgICAgICA8cCBjbGFzcz1cInNiYi10ZWFzZXJfX2Rlc2NyaXB0aW9uXCI+XG4gICAgICAgICAgICA8c2xvdCBAc2xvdGNoYW5nZT0ke3RoaXMuX2hhbmRsZVNsb3RjaGFuZ2V9Pjwvc2xvdD5cbiAgICAgICAgICA8L3A+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvc3Bhbj5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItdGVhc2VyJzogU2JiVGVhc2VyRWxlbWVudDtcbiAgfVxufVxuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O0lDcUJhLDBCQUFnQjttQkFBUzs7OztjQUF6Qix5QkFBeUIsWUFBa0I7Ozs0QkFLckQsU0FBUyxFQUFFLFNBQVMsTUFBTSxDQUFDLENBQUE7QUFBQyxnQkFBQSxNQUFBLE1BQUEsdUJBQUE7SUFBQSxNQUFBO0lBQUEsTUFBQTtJQUFBLFFBQUE7SUFBQSxTQUFBO0lBQUEsUUFBQTtLQUFBLE1BQUEsUUFBQSxlQUFBO0tBQUEsTUFBQSxRQUFBLElBQWdCO0tBQVMsTUFBQSxLQUFBLFVBQUE7QUFBQSxVQUFULFlBQVM7O0tBQUE7SUFBQSxVQUFBO0lBQUEsRUFBQSx5QkFBQSw2QkFBQTs7Ozs7Ozs7O0FBSnRCLFFBQUEsY0FBc0I7OztBQUMvQixRQUFBLFNBQXlCLENBQUMsaUJBQWlCLFVBQVUsZUFBTSxDQUFDOztFQUd0RCw4QkFBQSxrQkFBQSxNQUFBLHlCQUMzQixpQkFBZ0I7O0VBRFcsSUFBZ0IsWUFBUztBQUFBLFVBQUEsTUFBQTs7RUFBekIsSUFBZ0IsVUFBUyxPQUFBO0FBQUEsU0FBQSw2QkFBQTs7RUFHOUMsb0JBQWlCO0dBQ3ZCLE1BQU0sT0FBTyxNQUFNLEtBQUssS0FBSyxTQUFTLENBQUMsTUFBTSxPQUFPLEdBQUcsY0FBYyxpQkFBaUI7QUFDdEYsT0FBSSxLQUNGLE1BQUssT0FBTztHQUdkLE1BQU0sUUFBUSxNQUFNLEtBQUssS0FBSyxTQUFTLENBQUMsTUFBTSxPQUFPLEdBQUcsY0FBYyxZQUFZO0FBQ2xGLE9BQUksTUFDRixPQUFNLE9BQU87O0VBSVQsZUFBZSxPQUFZO0dBRWpDLE1BQU0sWUFBYSxNQUFNLE9BQ3RCLGtCQUFrQixDQUNsQixNQUFNLE1BQWdDLEVBQUUsY0FBYyxpQkFBaUI7QUFFMUUsT0FBSSxXQUFXO0FBQ2IsbUJBQWUsUUFBUSxVQUFVO0FBQ2pDLGNBQVUsUUFBUTtBQUNsQixjQUFVLE9BQU87OztFQUliLGdCQUFnQixPQUFZO0dBQ2xDLE1BQU0sUUFBUyxNQUFNLE9BQ2xCLGtCQUFrQixDQUNsQixNQUFNLE1BQTRCLEVBQUUsY0FBYyxZQUFZO0FBRWpFLE9BQUksT0FBTztBQUNULG1CQUFlLFFBQVEsTUFBTTtBQUM3QixVQUFNLGNBQWM7OztFQUlMLFNBQU07QUFFdkIsVUFBTyxNQUFJOztVQUVMLEtBQUssV0FFTCxNQUFJLDJCQUEyQixLQUFLLG1CQUFrQiwyQkFDdkQsQ0FBQTtVQUNDLEtBQUssZUFBZSxDQUFBOzs7O0VBS2xCLGdCQUFhO0FBQ3JCLFVBQU8sTUFBSTs7Ozs7OzBDQU0yQixLQUFLLGVBQWM7MkNBQ2xCLEtBQUssZ0JBQWU7O2dDQUUvQixLQUFLLGtCQUFpQiJ9
|
package/development/teaser.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as SbbTeaserElement } from "./teaser.component-
|
|
1
|
+
import { t as SbbTeaserElement } from "./teaser.component-Cky6kKU0.js";
|
|
2
2
|
export { SbbTeaserElement };
|
package/off-brand-theme.css
CHANGED
|
@@ -1838,6 +1838,15 @@ slot[name=error]::slotted(*) {
|
|
|
1838
1838
|
--sbb-tag-amount-color: var(--sbb-color-metal);
|
|
1839
1839
|
--sbb-tag-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1840
1840
|
--sbb-tag-height: var(--sbb-size-element-xs);
|
|
1841
|
+
--sbb-teaser-scale-hover: 1.02;
|
|
1842
|
+
--sbb-teaser-description-color: var(--sbb-color-granite);
|
|
1843
|
+
--sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
|
|
1844
|
+
--sbb-teaser-flex-direction: row;
|
|
1845
|
+
--sbb-teaser-align-items: center;
|
|
1846
|
+
--sbb-teaser-font-size: var(--sbb-text-font-size-s);
|
|
1847
|
+
--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
|
|
1848
|
+
--sbb-teaser-border-radius: var(--sbb-border-radius-4x);
|
|
1849
|
+
--sbb-teaser-image-width: 18.75rem;
|
|
1841
1850
|
--sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
|
|
1842
1851
|
--sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
|
|
1843
1852
|
--sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "4.9.0-dev.
|
|
3
|
+
"version": "4.9.0-dev.1775125441",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/681aeed89344a87388ed8e9e2006a9507fd6600c"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -1838,6 +1838,15 @@ slot[name=error]::slotted(*) {
|
|
|
1838
1838
|
--sbb-tag-amount-color: var(--sbb-color-metal);
|
|
1839
1839
|
--sbb-tag-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1840
1840
|
--sbb-tag-height: var(--sbb-size-element-xs);
|
|
1841
|
+
--sbb-teaser-scale-hover: 1.02;
|
|
1842
|
+
--sbb-teaser-description-color: var(--sbb-color-granite);
|
|
1843
|
+
--sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
|
|
1844
|
+
--sbb-teaser-flex-direction: row;
|
|
1845
|
+
--sbb-teaser-align-items: center;
|
|
1846
|
+
--sbb-teaser-font-size: var(--sbb-text-font-size-s);
|
|
1847
|
+
--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
|
|
1848
|
+
--sbb-teaser-border-radius: var(--sbb-border-radius-4x);
|
|
1849
|
+
--sbb-teaser-image-width: 18.75rem;
|
|
1841
1850
|
--sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
|
|
1842
1851
|
--sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
|
|
1843
1852
|
--sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
|
package/standard-theme.css
CHANGED
|
@@ -1838,6 +1838,15 @@ slot[name=error]::slotted(*) {
|
|
|
1838
1838
|
--sbb-tag-amount-color: var(--sbb-color-metal);
|
|
1839
1839
|
--sbb-tag-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1840
1840
|
--sbb-tag-height: var(--sbb-size-element-xs);
|
|
1841
|
+
--sbb-teaser-scale-hover: 1.02;
|
|
1842
|
+
--sbb-teaser-description-color: var(--sbb-color-granite);
|
|
1843
|
+
--sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
|
|
1844
|
+
--sbb-teaser-flex-direction: row;
|
|
1845
|
+
--sbb-teaser-align-items: center;
|
|
1846
|
+
--sbb-teaser-font-size: var(--sbb-text-font-size-s);
|
|
1847
|
+
--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
|
|
1848
|
+
--sbb-teaser-border-radius: var(--sbb-border-radius-4x);
|
|
1849
|
+
--sbb-teaser-image-width: 18.75rem;
|
|
1841
1850
|
--sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
|
|
1842
1851
|
--sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
|
|
1843
1852
|
--sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as e } from "../teaser.component-
|
|
1
|
+
import { t as e } from "../teaser.component-WZL0vAo9.js";
|
|
2
2
|
export { e as SbbTeaserElement };
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { __esDecorate as e, __runInitializers as t } from "tslib";
|
|
2
|
+
import { unsafeCSS as n } from "lit";
|
|
3
|
+
import { property as r } from "lit/decorators.js";
|
|
4
|
+
import { SbbLinkBaseElement as i } from "./core/base-elements.js";
|
|
5
|
+
import { boxSizingStyles as a } from "./core/styles.js";
|
|
6
|
+
import { html as o } from "lit/static-html.js";
|
|
7
|
+
import "./screen-reader-only.js";
|
|
8
|
+
//#region src/elements/teaser/teaser.scss?inline
|
|
9
|
+
var s = "@charset \"UTF-8\";:host{--_sbb-teaser-forced-colors-inset: calc(-1 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-outline-offset: calc(2 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-border-radius: calc( var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset) );display:inline-block;outline:none!important}@media(forced-colors:active){:host{--sbb-teaser-description-color: LinkText;--sbb-title-text-color-normal-override: LinkText !important}}:host([alignment=after]){--sbb-teaser-align-items: start}:host([alignment=below]){--sbb-teaser-flex-direction: column;--sbb-teaser-align-items: baseline;--sbb-teaser-gap: var(--sbb-spacing-fixed-3x)}@media(any-hover:hover){:host(:hover){--sbb-teaser-scale: var(--sbb-teaser-scale-hover)}}.sbb-teaser__wrapper{display:flex;position:relative;cursor:var(--sbb-cursor-pointer)}.sbb-teaser__wrapper:before{content:\"\";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-teaser{text-decoration:none;position:absolute;inset:0}.sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media(forced-colors:active){.sbb-teaser:focus-visible{outline-offset:var(--_sbb-teaser-forced-colors-outline-offset)}}@media(forced-colors:active){.sbb-teaser:before{content:\"\";position:absolute;inset:var(--_sbb-teaser-forced-colors-inset);pointer-events:none;border-radius:var(--_sbb-teaser-forced-colors-border-radius);border:var(--sbb-border-width-1x) solid CanvasText}}.sbb-teaser__container{display:flex;flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);max-width:100%;width:100%;pointer-events:none}.sbb-teaser__text{color:var(--sbb-teaser-description-color);font-size:var(--sbb-teaser-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);overflow:hidden;max-width:100%}::slotted([slot=image]){display:block;width:var(--sbb-teaser-image-width)}.sbb-teaser__image-wrapper{flex-shrink:0;overflow:hidden;border-radius:var(--sbb-teaser-border-radius);transition:box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing)}:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper{display:none}@media(any-hover:hover){:host(:hover) .sbb-teaser__image-wrapper{box-shadow:var(--sbb-box-shadow-level-9-hard)}}.sbb-teaser__description{display:inline-block;margin:0;padding:0}::slotted(sbb-chip-label){display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}::slotted(sbb-title){margin-block:0}", c = (() => {
|
|
10
|
+
let c = i, l, u = [], d = [];
|
|
11
|
+
return class extends c {
|
|
12
|
+
static {
|
|
13
|
+
let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
|
|
14
|
+
l = [r({ reflect: !0 })], e(this, null, l, {
|
|
15
|
+
kind: "accessor",
|
|
16
|
+
name: "alignment",
|
|
17
|
+
static: !1,
|
|
18
|
+
private: !1,
|
|
19
|
+
access: {
|
|
20
|
+
has: (e) => "alignment" in e,
|
|
21
|
+
get: (e) => e.alignment,
|
|
22
|
+
set: (e, t) => {
|
|
23
|
+
e.alignment = t;
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
metadata: t
|
|
27
|
+
}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
|
|
28
|
+
enumerable: !0,
|
|
29
|
+
configurable: !0,
|
|
30
|
+
writable: !0,
|
|
31
|
+
value: t
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
static {
|
|
35
|
+
this.elementName = "sbb-teaser";
|
|
36
|
+
}
|
|
37
|
+
static {
|
|
38
|
+
this.styles = [a, n(s)];
|
|
39
|
+
}
|
|
40
|
+
#e = t(this, u, "after-centered");
|
|
41
|
+
get alignment() {
|
|
42
|
+
return this.#e;
|
|
43
|
+
}
|
|
44
|
+
set alignment(e) {
|
|
45
|
+
this.#e = e;
|
|
46
|
+
}
|
|
47
|
+
_handleSlotchange() {
|
|
48
|
+
let e = Array.from(this.children).find((e) => e.localName === "sbb-chip-label");
|
|
49
|
+
e && (e.slot = "chip");
|
|
50
|
+
let t = Array.from(this.children).find((e) => e.localName === "sbb-title");
|
|
51
|
+
t && (t.slot = "title");
|
|
52
|
+
}
|
|
53
|
+
_configureChip(e) {
|
|
54
|
+
let t = e.target.assignedElements().find((e) => e.localName === "sbb-chip-label");
|
|
55
|
+
t && (customElements.upgrade(t), t.color = "charcoal", t.size = "xxs");
|
|
56
|
+
}
|
|
57
|
+
_configureTitle(e) {
|
|
58
|
+
let t = e.target.assignedElements().find((e) => e.localName === "sbb-title");
|
|
59
|
+
t && (customElements.upgrade(t), t.visualLevel = "5");
|
|
60
|
+
}
|
|
61
|
+
render() {
|
|
62
|
+
return o`
|
|
63
|
+
<div class="sbb-teaser__wrapper">
|
|
64
|
+
${this.renderLink(o`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`)}
|
|
65
|
+
${this.renderContent()}
|
|
66
|
+
</div>
|
|
67
|
+
`;
|
|
68
|
+
}
|
|
69
|
+
renderContent() {
|
|
70
|
+
return o`
|
|
71
|
+
<span class="sbb-teaser__container">
|
|
72
|
+
<span class="sbb-teaser__image-wrapper">
|
|
73
|
+
<slot name="image"></slot>
|
|
74
|
+
</span>
|
|
75
|
+
<span class="sbb-teaser__text">
|
|
76
|
+
<slot name="chip" @slotchange=${this._configureChip}></slot>
|
|
77
|
+
<slot name="title" @slotchange=${this._configureTitle}></slot>
|
|
78
|
+
<p class="sbb-teaser__description">
|
|
79
|
+
<slot @slotchange=${this._handleSlotchange}></slot>
|
|
80
|
+
</p>
|
|
81
|
+
</span>
|
|
82
|
+
</span>
|
|
83
|
+
`;
|
|
84
|
+
}
|
|
85
|
+
constructor() {
|
|
86
|
+
super(...arguments), t(this, d);
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
})();
|
|
90
|
+
//#endregion
|
|
91
|
+
export { c as t };
|
package/teaser.js
CHANGED
package/teaser.pure.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as e } from "./teaser.component-
|
|
1
|
+
import { t as e } from "./teaser.component-WZL0vAo9.js";
|
|
2
2
|
export { e as SbbTeaserElement };
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
-
import { unsafeCSS } from "lit";
|
|
3
|
-
import { property } from "lit/decorators.js";
|
|
4
|
-
import { SbbLinkBaseElement } from "./core/base-elements.js";
|
|
5
|
-
import { boxSizingStyles } from "./core/styles.js";
|
|
6
|
-
import { html as html$1 } from "lit/static-html.js";
|
|
7
|
-
import "./screen-reader-only.js";
|
|
8
|
-
//#region src/elements/teaser/teaser.scss?inline
|
|
9
|
-
var teaser_default = "@charset \"UTF-8\";\n:host {\n display: inline-block;\n outline: none !important;\n --sbb-teaser-scale-hover: 1.02;\n --sbb-teaser-description-color: var(--sbb-color-granite);\n --sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));\n --sbb-teaser-flex-direction: row;\n --sbb-teaser-align-items: center;\n --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);\n --sbb-teaser-border-radius: var(--sbb-border-radius-4x);\n}\n@media (forced-colors: active) {\n :host {\n --sbb-teaser-description-color: LinkText;\n --sbb-title-text-color-normal-override: LinkText !important;\n }\n}\n\n:host([alignment=after]) {\n --sbb-teaser-align-items: start;\n}\n\n:host([alignment=below]) {\n --sbb-teaser-flex-direction: column;\n --sbb-teaser-align-items: baseline;\n --sbb-teaser-gap: var(--sbb-spacing-fixed-3x);\n}\n\n@media (any-hover: hover) {\n :host(:hover) {\n --sbb-teaser-scale: var(--sbb-teaser-scale-hover);\n }\n}\n.sbb-teaser__wrapper {\n display: flex;\n position: relative;\n cursor: var(--sbb-cursor-pointer);\n}\n.sbb-teaser__wrapper::before {\n content: \"\";\n user-select: none;\n width: 0;\n height: 0;\n}\n\n.sbb-teaser {\n text-decoration: none;\n position: absolute;\n inset: 0;\n}\n.sbb-teaser:focus-visible {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n border-radius: var(--sbb-teaser-border-radius);\n}\n@media (forced-colors: active) {\n .sbb-teaser:focus-visible {\n outline-offset: calc(2 * var(--sbb-focus-outline-offset));\n }\n}\n@media (forced-colors: active) {\n .sbb-teaser::before {\n content: \"\";\n position: absolute;\n inset: calc(-1 * var(--sbb-focus-outline-offset));\n pointer-events: none;\n border-radius: calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));\n border: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n\n.sbb-teaser__container {\n display: flex;\n flex-flow: var(--sbb-teaser-flex-direction) nowrap;\n align-items: var(--sbb-teaser-align-items);\n gap: var(--sbb-teaser-gap);\n max-width: 100%;\n width: 100%;\n pointer-events: none;\n}\n\n.sbb-teaser__text {\n --sbb-text-font-size: var(--sbb-text-font-size-s);\n font-family: var(--sbb-typo-font-family);\n font-weight: normal;\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-typo-letter-spacing-text);\n font-size: var(--sbb-text-font-size);\n color: var(--sbb-teaser-description-color);\n overflow: hidden;\n max-width: 100%;\n}\n\n::slotted([slot=image]) {\n width: 18.75rem;\n display: block;\n}\n\n.sbb-teaser__image-wrapper {\n flex-shrink: 0;\n overflow: hidden;\n border-radius: var(--sbb-teaser-border-radius);\n transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);\n}\n:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper {\n display: none;\n}\n@media (any-hover: hover) {\n :host(:hover) .sbb-teaser__image-wrapper {\n box-shadow: var(--sbb-box-shadow-level-9-hard);\n }\n}\n\n.sbb-teaser__description {\n display: inline-block;\n margin: 0;\n padding: 0;\n}\n\n::slotted(sbb-chip-label) {\n display: block;\n max-width: fit-content;\n margin-block-end: var(--sbb-spacing-fixed-1x);\n}\n\n::slotted(sbb-title) {\n margin-block: 0;\n}";
|
|
10
|
-
//#endregion
|
|
11
|
-
//#region src/elements/teaser/teaser.component.ts
|
|
12
|
-
/**
|
|
13
|
-
* It displays an interactive image with caption.
|
|
14
|
-
*
|
|
15
|
-
* @slot image - Slot used to render the image.
|
|
16
|
-
* @slot chip - Slot for the `sbb-chip-label` element. The slot on the `sbb-chip-label` element is automatically assigned when slotted in the unnamed slot.
|
|
17
|
-
* @slot title - Slot for the title. For the standard `sbb-title` element, the slot is automatically assigned when slotted in the unnamed slot.
|
|
18
|
-
* @slot - Use the unnamed slot to render the description, the sbb-title and the sbb-chip-label.
|
|
19
|
-
*/
|
|
20
|
-
var SbbTeaserElement = (() => {
|
|
21
|
-
let _classSuper = SbbLinkBaseElement;
|
|
22
|
-
let _alignment_decorators;
|
|
23
|
-
let _alignment_initializers = [];
|
|
24
|
-
let _alignment_extraInitializers = [];
|
|
25
|
-
return class SbbTeaserElement extends _classSuper {
|
|
26
|
-
static {
|
|
27
|
-
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
28
|
-
_alignment_decorators = [property({ reflect: true })];
|
|
29
|
-
__esDecorate(this, null, _alignment_decorators, {
|
|
30
|
-
kind: "accessor",
|
|
31
|
-
name: "alignment",
|
|
32
|
-
static: false,
|
|
33
|
-
private: false,
|
|
34
|
-
access: {
|
|
35
|
-
has: (obj) => "alignment" in obj,
|
|
36
|
-
get: (obj) => obj.alignment,
|
|
37
|
-
set: (obj, value) => {
|
|
38
|
-
obj.alignment = value;
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
metadata: _metadata
|
|
42
|
-
}, _alignment_initializers, _alignment_extraInitializers);
|
|
43
|
-
if (_metadata) Object.defineProperty(this, Symbol.metadata, {
|
|
44
|
-
enumerable: true,
|
|
45
|
-
configurable: true,
|
|
46
|
-
writable: true,
|
|
47
|
-
value: _metadata
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
static {
|
|
51
|
-
this.elementName = "sbb-teaser";
|
|
52
|
-
}
|
|
53
|
-
static {
|
|
54
|
-
this.styles = [boxSizingStyles, unsafeCSS(teaser_default)];
|
|
55
|
-
}
|
|
56
|
-
#alignment_accessor_storage = __runInitializers(this, _alignment_initializers, "after-centered");
|
|
57
|
-
/** Teaser variant - define the position and the alignment of the text block. */
|
|
58
|
-
get alignment() {
|
|
59
|
-
return this.#alignment_accessor_storage;
|
|
60
|
-
}
|
|
61
|
-
set alignment(value) {
|
|
62
|
-
this.#alignment_accessor_storage = value;
|
|
63
|
-
}
|
|
64
|
-
_handleSlotchange() {
|
|
65
|
-
const chip = Array.from(this.children).find((el) => el.localName === "sbb-chip-label");
|
|
66
|
-
if (chip) chip.slot = "chip";
|
|
67
|
-
const title = Array.from(this.children).find((el) => el.localName === "sbb-title");
|
|
68
|
-
if (title) title.slot = "title";
|
|
69
|
-
}
|
|
70
|
-
_configureChip(event) {
|
|
71
|
-
const chipLabel = event.target.assignedElements().find((e) => e.localName === "sbb-chip-label");
|
|
72
|
-
if (chipLabel) {
|
|
73
|
-
customElements.upgrade(chipLabel);
|
|
74
|
-
chipLabel.color = "charcoal";
|
|
75
|
-
chipLabel.size = "xxs";
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
_configureTitle(event) {
|
|
79
|
-
const title = event.target.assignedElements().find((e) => e.localName === "sbb-title");
|
|
80
|
-
if (title) {
|
|
81
|
-
customElements.upgrade(title);
|
|
82
|
-
title.visualLevel = "5";
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
render() {
|
|
86
|
-
return html$1`
|
|
87
|
-
<div class="sbb-teaser__wrapper">
|
|
88
|
-
${this.renderLink(html$1`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`)}
|
|
89
|
-
${this.renderContent()}
|
|
90
|
-
</div>
|
|
91
|
-
`;
|
|
92
|
-
}
|
|
93
|
-
renderContent() {
|
|
94
|
-
return html$1`
|
|
95
|
-
<span class="sbb-teaser__container">
|
|
96
|
-
<span class="sbb-teaser__image-wrapper">
|
|
97
|
-
<slot name="image"></slot>
|
|
98
|
-
</span>
|
|
99
|
-
<span class="sbb-teaser__text">
|
|
100
|
-
<slot name="chip" @slotchange=${this._configureChip}></slot>
|
|
101
|
-
<slot name="title" @slotchange=${this._configureTitle}></slot>
|
|
102
|
-
<p class="sbb-teaser__description">
|
|
103
|
-
<slot @slotchange=${this._handleSlotchange}></slot>
|
|
104
|
-
</p>
|
|
105
|
-
</span>
|
|
106
|
-
</span>
|
|
107
|
-
`;
|
|
108
|
-
}
|
|
109
|
-
constructor() {
|
|
110
|
-
super(...arguments);
|
|
111
|
-
__runInitializers(this, _alignment_extraInitializers);
|
|
112
|
-
}
|
|
113
|
-
};
|
|
114
|
-
})();
|
|
115
|
-
//#endregion
|
|
116
|
-
export { SbbTeaserElement as t };
|
|
117
|
-
|
|
118
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLmNvbXBvbmVudC1DNjN0MHoxSS5qcyIsIm5hbWVzIjpbXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvdGVhc2VyL3RlYXNlci5zY3NzP2lubGluZSIsIi4uLy4uLy4uL3NyYy9lbGVtZW50cy90ZWFzZXIvdGVhc2VyLmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJAdXNlICcuLi9jb3JlL3N0eWxlcycgYXMgc2JiO1xuXG46aG9zdCB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcblxuICAvLyBVc2UgIWltcG9ydGFudCBoZXJlIHRvIG5vdCBpbnRlcmZlcmUgd2l0aCBGaXJlZm94IGZvY3VzIHJpbmcgZGVmaW5pdGlvblxuICAvLyB3aGljaCBhcHBlYXJzIGluIG5vcm1hbGl6ZSBDU1Mgb2Ygc2V2ZXJhbCBmcmFtZXdvcmtzLlxuICBvdXRsaW5lOiBub25lICFpbXBvcnRhbnQ7XG5cbiAgLS1zYmItdGVhc2VyLXNjYWxlLWhvdmVyOiAxLjAyO1xuICAtLXNiYi10ZWFzZXItZGVzY3JpcHRpb24tY29sb3I6IGxpZ2h0LWRhcmsodmFyKC0tc2JiLWNvbG9yLWdyYW5pdGUpLCB2YXIoLS1zYmItY29sb3Itc2lsdmVyKSk7XG4gIC0tc2JiLXRlYXNlci1mbGV4LWRpcmVjdGlvbjogcm93O1xuICAtLXNiYi10ZWFzZXItYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgLS1zYmItdGVhc2VyLWdhcDogdmFyKC0tc2JiLXNwYWNpbmctZml4ZWQtNHgpO1xuICAtLXNiYi10ZWFzZXItYm9yZGVyLXJhZGl1czogdmFyKC0tc2JiLWJvcmRlci1yYWRpdXMtNHgpO1xuXG4gIEBpbmNsdWRlIHNiYi5pZi1mb3JjZWQtY29sb3JzIHtcbiAgICAtLXNiYi10ZWFzZXItZGVzY3JpcHRpb24tY29sb3I6IExpbmtUZXh0O1xuICAgIC0tc2JiLXRpdGxlLXRleHQtY29sb3Itbm9ybWFsLW92ZXJyaWRlOiBMaW5rVGV4dCAhaW1wb3J0YW50O1xuICB9XG59XG5cbjpob3N0KFthbGlnbm1lbnQ9J2FmdGVyJ10pIHtcbiAgLS1zYmItdGVhc2VyLWFsaWduLWl0ZW1zOiBzdGFydDtcbn1cblxuOmhvc3QoW2FsaWdubWVudD0nYmVsb3cnXSkge1xuICAtLXNiYi10ZWFzZXItZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgLS1zYmItdGVhc2VyLWFsaWduLWl0ZW1zOiBiYXNlbGluZTtcbiAgLS1zYmItdGVhc2VyLWdhcDogdmFyKC0tc2JiLXNwYWNpbmctZml4ZWQtM3gpO1xufVxuXG5AaW5jbHVkZSBzYmIuaG92ZXItbXEoJGhvdmVyOiB0cnVlKSB7XG4gIDpob3N0KDpob3Zlcikge1xuICAgIC0tc2JiLXRlYXNlci1zY2FsZTogdmFyKC0tc2JiLXRlYXNlci1zY2FsZS1ob3Zlcik7XG4gIH1cbn1cblxuLnNiYi10ZWFzZXJfX3dyYXBwZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGN1cnNvcjogdmFyKC0tc2JiLWN1cnNvci1wb2ludGVyKTtcblxuICBAaW5jbHVkZSBzYmIuemVyby13aWR0aC1zcGFjZTtcbn1cblxuLnNiYi10ZWFzZXIge1xuICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgaW5zZXQ6IDA7XG5cbiAgJjpmb2N1cy12aXNpYmxlIHtcbiAgICBAaW5jbHVkZSBzYmIuZm9jdXMtb3V0bGluZTtcblxuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLXNiYi10ZWFzZXItYm9yZGVyLXJhZGl1cyk7XG5cbiAgICAvLyBXZSBtb3ZlIHRoZSBmb2N1cyBvdXRsaW5lIGZ1cnRoZXIgb3V0IHRvIG5vdCBvdmVybGFwIHdpdGggdGhlIHRlYXNlciBib3JkZXIgaW4gZm9yY2VkIGNvbG9yc1xuICAgIEBpbmNsdWRlIHNiYi5pZi1mb3JjZWQtY29sb3JzIHtcbiAgICAgIG91dGxpbmUtb2Zmc2V0OiBjYWxjKDIgKiB2YXIoLS1zYmItZm9jdXMtb3V0bGluZS1vZmZzZXQpKTtcbiAgICB9XG4gIH1cblxuICBAaW5jbHVkZSBzYmIuaWYtZm9yY2VkLWNvbG9ycyB7XG4gICAgJjo6YmVmb3JlIHtcbiAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgaW5zZXQ6IGNhbGMoLTEgKiB2YXIoLS1zYmItZm9jdXMtb3V0bGluZS1vZmZzZXQpKTtcbiAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgICAgYm9yZGVyLXJhZGl1czogY2FsYyh2YXIoLS1zYmItdGVhc2VyLWJvcmRlci1yYWRpdXMpICsgdmFyKC0tc2JiLWZvY3VzLW91dGxpbmUtb2Zmc2V0KSk7XG4gICAgICBib3JkZXI6IHZhcigtLXNiYi1ib3JkZXItd2lkdGgtMXgpIHNvbGlkIENhbnZhc1RleHQ7XG4gICAgfVxuICB9XG59XG5cbi5zYmItdGVhc2VyX19jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWZsb3c6IHZhcigtLXNiYi10ZWFzZXItZmxleC1kaXJlY3Rpb24pIG5vd3JhcDtcbiAgYWxpZ24taXRlbXM6IHZhcigtLXNiYi10ZWFzZXItYWxpZ24taXRlbXMpO1xuICBnYXA6IHZhcigtLXNiYi10ZWFzZXItZ2FwKTtcbiAgbWF4LXdpZHRoOiAxMDAlO1xuICB3aWR0aDogMTAwJTtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG59XG5cbi5zYmItdGVhc2VyX190ZXh0IHtcbiAgQGluY2x1ZGUgc2JiLnRleHQtcy0tcmVndWxhcjtcblxuICBjb2xvcjogdmFyKC0tc2JiLXRlYXNlci1kZXNjcmlwdGlvbi1jb2xvcik7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIG1heC13aWR0aDogMTAwJTtcbn1cblxuOjpzbG90dGVkKFtzbG90PSdpbWFnZSddKSB7XG4gIHdpZHRoOiAje3NiYi5weC10by1yZW0tYnVpbGQoMzAwKX07XG4gIGRpc3BsYXk6IGJsb2NrO1xufVxuXG4uc2JiLXRlYXNlcl9faW1hZ2Utd3JhcHBlciB7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1zYmItdGVhc2VyLWJvcmRlci1yYWRpdXMpO1xuICB0cmFuc2l0aW9uOiBib3gtc2hhZG93IHZhcigtLXNiYi10ZWFzZXItaW1hZ2UtYW5pbWF0aW9uLWR1cmF0aW9uKSB2YXIoLS1zYmItYW5pbWF0aW9uLWVhc2luZyk7XG5cbiAgOmhvc3QoOm5vdCg6c3RhdGUoc2xvdHRlZC1pbWFnZSkpKSAmIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG5cbiAgQGluY2x1ZGUgc2JiLmhvdmVyLW1xKCRob3ZlcjogdHJ1ZSkge1xuICAgIDpob3N0KDpob3ZlcikgJiB7XG4gICAgICBib3gtc2hhZG93OiB2YXIoLS1zYmItYm94LXNoYWRvdy1sZXZlbC05LWhhcmQpO1xuICAgIH1cbiAgfVxufVxuXG4uc2JiLXRlYXNlcl9fZGVzY3JpcHRpb24ge1xuICAvLyBSZXNldCBwYXJhZ3JhcGggc3R5bGVzXG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgbWFyZ2luOiAwO1xuICBwYWRkaW5nOiAwO1xufVxuXG46OnNsb3R0ZWQoc2JiLWNoaXAtbGFiZWwpIHtcbiAgZGlzcGxheTogYmxvY2s7XG4gIG1heC13aWR0aDogZml0LWNvbnRlbnQ7XG4gIG1hcmdpbi1ibG9jay1lbmQ6IHZhcigtLXNiYi1zcGFjaW5nLWZpeGVkLTF4KTtcbn1cblxuOjpzbG90dGVkKHNiYi10aXRsZSkge1xuICBtYXJnaW4tYmxvY2s6IDA7XG59XG4iLCJpbXBvcnQgeyB1bnNhZmVDU1MsIHR5cGUgQ1NTUmVzdWx0R3JvdXAsIHR5cGUgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyBodG1sIH0gZnJvbSAnbGl0L3N0YXRpYy1odG1sLmpzJztcblxuaW1wb3J0IHR5cGUgeyBTYmJDaGlwTGFiZWxFbGVtZW50IH0gZnJvbSAnLi4vY2hpcC1sYWJlbC50cyc7XG5pbXBvcnQgeyBTYmJMaW5rQmFzZUVsZW1lbnQgfSBmcm9tICcuLi9jb3JlL2Jhc2UtZWxlbWVudHMudHMnO1xuaW1wb3J0IHsgYm94U2l6aW5nU3R5bGVzIH0gZnJvbSAnLi4vY29yZS9zdHlsZXMudHMnO1xuaW1wb3J0IHR5cGUgeyBTYmJUaXRsZUVsZW1lbnQgfSBmcm9tICcuLi90aXRsZS50cyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL3RlYXNlci5zY3NzP2lubGluZSc7XG5cbmltcG9ydCAnLi4vc2NyZWVuLXJlYWRlci1vbmx5LnRzJztcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBhbiBpbnRlcmFjdGl2ZSBpbWFnZSB3aXRoIGNhcHRpb24uXG4gKlxuICogQHNsb3QgaW1hZ2UgLSBTbG90IHVzZWQgdG8gcmVuZGVyIHRoZSBpbWFnZS5cbiAqIEBzbG90IGNoaXAgLSBTbG90IGZvciB0aGUgYHNiYi1jaGlwLWxhYmVsYCBlbGVtZW50LiBUaGUgc2xvdCBvbiB0aGUgYHNiYi1jaGlwLWxhYmVsYCBlbGVtZW50IGlzIGF1dG9tYXRpY2FsbHkgYXNzaWduZWQgd2hlbiBzbG90dGVkIGluIHRoZSB1bm5hbWVkIHNsb3QuXG4gKiBAc2xvdCB0aXRsZSAtIFNsb3QgZm9yIHRoZSB0aXRsZS4gRm9yIHRoZSBzdGFuZGFyZCBgc2JiLXRpdGxlYCBlbGVtZW50LCB0aGUgc2xvdCBpcyBhdXRvbWF0aWNhbGx5IGFzc2lnbmVkIHdoZW4gc2xvdHRlZCBpbiB0aGUgdW5uYW1lZCBzbG90LlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byByZW5kZXIgdGhlIGRlc2NyaXB0aW9uLCB0aGUgc2JiLXRpdGxlIGFuZCB0aGUgc2JiLWNoaXAtbGFiZWwuXG4gKi9cbmV4cG9ydCBjbGFzcyBTYmJUZWFzZXJFbGVtZW50IGV4dGVuZHMgU2JiTGlua0Jhc2VFbGVtZW50IHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByZWFkb25seSBlbGVtZW50TmFtZTogc3RyaW5nID0gJ3NiYi10ZWFzZXInO1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbYm94U2l6aW5nU3R5bGVzLCB1bnNhZmVDU1Moc3R5bGUpXTtcblxuICAvKiogVGVhc2VyIHZhcmlhbnQgLSBkZWZpbmUgdGhlIHBvc2l0aW9uIGFuZCB0aGUgYWxpZ25tZW50IG9mIHRoZSB0ZXh0IGJsb2NrLiAqL1xuICBAcHJvcGVydHkoeyByZWZsZWN0OiB0cnVlIH0pIHB1YmxpYyBhY2Nlc3NvciBhbGlnbm1lbnQ6ICdhZnRlci1jZW50ZXJlZCcgfCAnYWZ0ZXInIHwgJ2JlbG93JyA9XG4gICAgJ2FmdGVyLWNlbnRlcmVkJztcblxuICBwcml2YXRlIF9oYW5kbGVTbG90Y2hhbmdlKCk6IHZvaWQge1xuICAgIGNvbnN0IGNoaXAgPSBBcnJheS5mcm9tKHRoaXMuY2hpbGRyZW4pLmZpbmQoKGVsKSA9PiBlbC5sb2NhbE5hbWUgPT09ICdzYmItY2hpcC1sYWJlbCcpO1xuICAgIGlmIChjaGlwKSB7XG4gICAgICBjaGlwLnNsb3QgPSAnY2hpcCc7XG4gICAgfVxuXG4gICAgY29uc3QgdGl0bGUgPSBBcnJheS5mcm9tKHRoaXMuY2hpbGRyZW4pLmZpbmQoKGVsKSA9PiBlbC5sb2NhbE5hbWUgPT09ICdzYmItdGl0bGUnKTtcbiAgICBpZiAodGl0bGUpIHtcbiAgICAgIHRpdGxlLnNsb3QgPSAndGl0bGUnO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgX2NvbmZpZ3VyZUNoaXAoZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgLy8gV2UgbmVlZCB0byBjaGVjayBhc3NpZ25lZCBlbGVtZW50cyBiZWNhdXNlIGluIHRoZSBpbWFnZSBzbG90IGl0IGNhbiBoYXZlIGxhYmVscyBhcyB3ZWxsLlxuICAgIGNvbnN0IGNoaXBMYWJlbCA9IChldmVudC50YXJnZXQgYXMgSFRNTFNsb3RFbGVtZW50KVxuICAgICAgLmFzc2lnbmVkRWxlbWVudHMoKVxuICAgICAgLmZpbmQoKGUpOiBlIGlzIFNiYkNoaXBMYWJlbEVsZW1lbnQgPT4gZS5sb2NhbE5hbWUgPT09ICdzYmItY2hpcC1sYWJlbCcpO1xuXG4gICAgaWYgKGNoaXBMYWJlbCkge1xuICAgICAgY3VzdG9tRWxlbWVudHMudXBncmFkZShjaGlwTGFiZWwpO1xuICAgICAgY2hpcExhYmVsLmNvbG9yID0gJ2NoYXJjb2FsJztcbiAgICAgIGNoaXBMYWJlbC5zaXplID0gJ3h4cyc7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBfY29uZmlndXJlVGl0bGUoZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgY29uc3QgdGl0bGUgPSAoZXZlbnQudGFyZ2V0IGFzIEhUTUxTbG90RWxlbWVudClcbiAgICAgIC5hc3NpZ25lZEVsZW1lbnRzKClcbiAgICAgIC5maW5kKChlKTogZSBpcyBTYmJUaXRsZUVsZW1lbnQgPT4gZS5sb2NhbE5hbWUgPT09ICdzYmItdGl0bGUnKTtcblxuICAgIGlmICh0aXRsZSkge1xuICAgICAgY3VzdG9tRWxlbWVudHMudXBncmFkZSh0aXRsZSk7XG4gICAgICB0aXRsZS52aXN1YWxMZXZlbCA9ICc1JztcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICAvLyBXZSByZW5kZXIgdGhlIGNvbnRlbnQgb3V0c2lkZSB0aGUgYW5jaG9yIHRhZyB0byBhbGxvdyBzY3JlZW4gcmVhZGVycyB0byBuYXZpZ2F0ZSB0aHJvdWdoIGl0XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8ZGl2IGNsYXNzPVwic2JiLXRlYXNlcl9fd3JhcHBlclwiPlxuICAgICAgICAke3RoaXMucmVuZGVyTGluayhcbiAgICAgICAgICAvLyBGb3IgU0VPLCB3ZSBhZGQgdGhlIGFjY2Vzc2liaWxpdHkgaGlkZGVuIGFzIGhpZGRlbiBjb250ZW50IG9mIHRoZSBsaW5rXG4gICAgICAgICAgaHRtbGA8c2JiLXNjcmVlbi1yZWFkZXItb25seT4ke3RoaXMuYWNjZXNzaWJpbGl0eUxhYmVsfTwvc2JiLXNjcmVlbi1yZWFkZXItb25seT5gLFxuICAgICAgICApfVxuICAgICAgICAke3RoaXMucmVuZGVyQ29udGVudCgpfVxuICAgICAgPC9kaXY+XG4gICAgYDtcbiAgfVxuXG4gIHByb3RlY3RlZCByZW5kZXJDb250ZW50KCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXRlYXNlcl9fY29udGFpbmVyXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXRlYXNlcl9faW1hZ2Utd3JhcHBlclwiPlxuICAgICAgICAgIDxzbG90IG5hbWU9XCJpbWFnZVwiPjwvc2xvdD5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInNiYi10ZWFzZXJfX3RleHRcIj5cbiAgICAgICAgICA8c2xvdCBuYW1lPVwiY2hpcFwiIEBzbG90Y2hhbmdlPSR7dGhpcy5fY29uZmlndXJlQ2hpcH0+PC9zbG90PlxuICAgICAgICAgIDxzbG90IG5hbWU9XCJ0aXRsZVwiIEBzbG90Y2hhbmdlPSR7dGhpcy5fY29uZmlndXJlVGl0bGV9Pjwvc2xvdD5cbiAgICAgICAgICA8cCBjbGFzcz1cInNiYi10ZWFzZXJfX2Rlc2NyaXB0aW9uXCI+XG4gICAgICAgICAgICA8c2xvdCBAc2xvdGNoYW5nZT0ke3RoaXMuX2hhbmRsZVNsb3RjaGFuZ2V9Pjwvc2xvdD5cbiAgICAgICAgICA8L3A+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvc3Bhbj5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItdGVhc2VyJzogU2JiVGVhc2VyRWxlbWVudDtcbiAgfVxufVxuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O0lDcUJhLDBCQUFnQjttQkFBUzs7OztjQUF6Qix5QkFBeUIsWUFBa0I7Ozs0QkFLckQsU0FBUyxFQUFFLFNBQVMsTUFBTSxDQUFDLENBQUE7QUFBQyxnQkFBQSxNQUFBLE1BQUEsdUJBQUE7SUFBQSxNQUFBO0lBQUEsTUFBQTtJQUFBLFFBQUE7SUFBQSxTQUFBO0lBQUEsUUFBQTtLQUFBLE1BQUEsUUFBQSxlQUFBO0tBQUEsTUFBQSxRQUFBLElBQWdCO0tBQVMsTUFBQSxLQUFBLFVBQUE7QUFBQSxVQUFULFlBQVM7O0tBQUE7SUFBQSxVQUFBO0lBQUEsRUFBQSx5QkFBQSw2QkFBQTs7Ozs7Ozs7O0FBSnRCLFFBQUEsY0FBc0I7OztBQUMvQixRQUFBLFNBQXlCLENBQUMsaUJBQWlCLFVBQVUsZUFBTSxDQUFDOztFQUd0RCw4QkFBQSxrQkFBQSxNQUFBLHlCQUMzQixpQkFBZ0I7O0VBRFcsSUFBZ0IsWUFBUztBQUFBLFVBQUEsTUFBQTs7RUFBekIsSUFBZ0IsVUFBUyxPQUFBO0FBQUEsU0FBQSw2QkFBQTs7RUFHOUMsb0JBQWlCO0dBQ3ZCLE1BQU0sT0FBTyxNQUFNLEtBQUssS0FBSyxTQUFTLENBQUMsTUFBTSxPQUFPLEdBQUcsY0FBYyxpQkFBaUI7QUFDdEYsT0FBSSxLQUNGLE1BQUssT0FBTztHQUdkLE1BQU0sUUFBUSxNQUFNLEtBQUssS0FBSyxTQUFTLENBQUMsTUFBTSxPQUFPLEdBQUcsY0FBYyxZQUFZO0FBQ2xGLE9BQUksTUFDRixPQUFNLE9BQU87O0VBSVQsZUFBZSxPQUFZO0dBRWpDLE1BQU0sWUFBYSxNQUFNLE9BQ3RCLGtCQUFrQixDQUNsQixNQUFNLE1BQWdDLEVBQUUsY0FBYyxpQkFBaUI7QUFFMUUsT0FBSSxXQUFXO0FBQ2IsbUJBQWUsUUFBUSxVQUFVO0FBQ2pDLGNBQVUsUUFBUTtBQUNsQixjQUFVLE9BQU87OztFQUliLGdCQUFnQixPQUFZO0dBQ2xDLE1BQU0sUUFBUyxNQUFNLE9BQ2xCLGtCQUFrQixDQUNsQixNQUFNLE1BQTRCLEVBQUUsY0FBYyxZQUFZO0FBRWpFLE9BQUksT0FBTztBQUNULG1CQUFlLFFBQVEsTUFBTTtBQUM3QixVQUFNLGNBQWM7OztFQUlMLFNBQU07QUFFdkIsVUFBTyxNQUFJOztVQUVMLEtBQUssV0FFTCxNQUFJLDJCQUEyQixLQUFLLG1CQUFrQiwyQkFDdkQsQ0FBQTtVQUNDLEtBQUssZUFBZSxDQUFBOzs7O0VBS2xCLGdCQUFhO0FBQ3JCLFVBQU8sTUFBSTs7Ozs7OzBDQU0yQixLQUFLLGVBQWM7MkNBQ2xCLEtBQUssZ0JBQWU7O2dDQUUvQixLQUFLLGtCQUFpQiJ9
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { __esDecorate as e, __runInitializers as t } from "tslib";
|
|
2
|
-
import { unsafeCSS as n } from "lit";
|
|
3
|
-
import { property as r } from "lit/decorators.js";
|
|
4
|
-
import { SbbLinkBaseElement as i } from "./core/base-elements.js";
|
|
5
|
-
import { boxSizingStyles as a } from "./core/styles.js";
|
|
6
|
-
import { html as o } from "lit/static-html.js";
|
|
7
|
-
import "./screen-reader-only.js";
|
|
8
|
-
//#region src/elements/teaser/teaser.scss?inline
|
|
9
|
-
var s = "@charset \"UTF-8\";:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-border-radius: var(--sbb-border-radius-4x)}@media(forced-colors:active){:host{--sbb-teaser-description-color: LinkText;--sbb-title-text-color-normal-override: LinkText !important}}:host([alignment=after]){--sbb-teaser-align-items: start}:host([alignment=below]){--sbb-teaser-flex-direction: column;--sbb-teaser-align-items: baseline;--sbb-teaser-gap: var(--sbb-spacing-fixed-3x)}@media(any-hover:hover){:host(:hover){--sbb-teaser-scale: var(--sbb-teaser-scale-hover)}}.sbb-teaser__wrapper{display:flex;position:relative;cursor:var(--sbb-cursor-pointer)}.sbb-teaser__wrapper:before{content:\"\";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-teaser{text-decoration:none;position:absolute;inset:0}.sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media(forced-colors:active){.sbb-teaser:focus-visible{outline-offset:calc(2 * var(--sbb-focus-outline-offset))}}@media(forced-colors:active){.sbb-teaser:before{content:\"\";position:absolute;inset:calc(-1 * var(--sbb-focus-outline-offset));pointer-events:none;border-radius:calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));border:var(--sbb-border-width-1x) solid CanvasText}}.sbb-teaser__container{display:flex;flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);max-width:100%;width:100%;pointer-events:none}.sbb-teaser__text{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-teaser-description-color);overflow:hidden;max-width:100%}::slotted([slot=image]){width:18.75rem;display:block}.sbb-teaser__image-wrapper{flex-shrink:0;overflow:hidden;border-radius:var(--sbb-teaser-border-radius);transition:box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing)}:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper{display:none}@media(any-hover:hover){:host(:hover) .sbb-teaser__image-wrapper{box-shadow:var(--sbb-box-shadow-level-9-hard)}}.sbb-teaser__description{display:inline-block;margin:0;padding:0}::slotted(sbb-chip-label){display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}::slotted(sbb-title){margin-block:0}", c = (() => {
|
|
10
|
-
let c = i, l, u = [], d = [];
|
|
11
|
-
return class extends c {
|
|
12
|
-
static {
|
|
13
|
-
let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
|
|
14
|
-
l = [r({ reflect: !0 })], e(this, null, l, {
|
|
15
|
-
kind: "accessor",
|
|
16
|
-
name: "alignment",
|
|
17
|
-
static: !1,
|
|
18
|
-
private: !1,
|
|
19
|
-
access: {
|
|
20
|
-
has: (e) => "alignment" in e,
|
|
21
|
-
get: (e) => e.alignment,
|
|
22
|
-
set: (e, t) => {
|
|
23
|
-
e.alignment = t;
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
metadata: t
|
|
27
|
-
}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
|
|
28
|
-
enumerable: !0,
|
|
29
|
-
configurable: !0,
|
|
30
|
-
writable: !0,
|
|
31
|
-
value: t
|
|
32
|
-
});
|
|
33
|
-
}
|
|
34
|
-
static {
|
|
35
|
-
this.elementName = "sbb-teaser";
|
|
36
|
-
}
|
|
37
|
-
static {
|
|
38
|
-
this.styles = [a, n(s)];
|
|
39
|
-
}
|
|
40
|
-
#e = t(this, u, "after-centered");
|
|
41
|
-
get alignment() {
|
|
42
|
-
return this.#e;
|
|
43
|
-
}
|
|
44
|
-
set alignment(e) {
|
|
45
|
-
this.#e = e;
|
|
46
|
-
}
|
|
47
|
-
_handleSlotchange() {
|
|
48
|
-
let e = Array.from(this.children).find((e) => e.localName === "sbb-chip-label");
|
|
49
|
-
e && (e.slot = "chip");
|
|
50
|
-
let t = Array.from(this.children).find((e) => e.localName === "sbb-title");
|
|
51
|
-
t && (t.slot = "title");
|
|
52
|
-
}
|
|
53
|
-
_configureChip(e) {
|
|
54
|
-
let t = e.target.assignedElements().find((e) => e.localName === "sbb-chip-label");
|
|
55
|
-
t && (customElements.upgrade(t), t.color = "charcoal", t.size = "xxs");
|
|
56
|
-
}
|
|
57
|
-
_configureTitle(e) {
|
|
58
|
-
let t = e.target.assignedElements().find((e) => e.localName === "sbb-title");
|
|
59
|
-
t && (customElements.upgrade(t), t.visualLevel = "5");
|
|
60
|
-
}
|
|
61
|
-
render() {
|
|
62
|
-
return o`
|
|
63
|
-
<div class="sbb-teaser__wrapper">
|
|
64
|
-
${this.renderLink(o`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`)}
|
|
65
|
-
${this.renderContent()}
|
|
66
|
-
</div>
|
|
67
|
-
`;
|
|
68
|
-
}
|
|
69
|
-
renderContent() {
|
|
70
|
-
return o`
|
|
71
|
-
<span class="sbb-teaser__container">
|
|
72
|
-
<span class="sbb-teaser__image-wrapper">
|
|
73
|
-
<slot name="image"></slot>
|
|
74
|
-
</span>
|
|
75
|
-
<span class="sbb-teaser__text">
|
|
76
|
-
<slot name="chip" @slotchange=${this._configureChip}></slot>
|
|
77
|
-
<slot name="title" @slotchange=${this._configureTitle}></slot>
|
|
78
|
-
<p class="sbb-teaser__description">
|
|
79
|
-
<slot @slotchange=${this._handleSlotchange}></slot>
|
|
80
|
-
</p>
|
|
81
|
-
</span>
|
|
82
|
-
</span>
|
|
83
|
-
`;
|
|
84
|
-
}
|
|
85
|
-
constructor() {
|
|
86
|
-
super(...arguments), t(this, d);
|
|
87
|
-
}
|
|
88
|
-
};
|
|
89
|
-
})();
|
|
90
|
-
//#endregion
|
|
91
|
-
export { c as t };
|