@sbb-esta/lyne-elements 1.15.0 → 1.15.1
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/base-elements/link-base-element.d.ts +1 -0
- package/core/base-elements/link-base-element.d.ts.map +1 -1
- package/core/base-elements.js +46 -43
- package/core/config/config.d.ts +3 -0
- package/core/config/config.d.ts.map +1 -1
- package/custom-elements.json +344 -35
- package/development/core/base-elements/link-base-element.d.ts +1 -0
- package/development/core/base-elements/link-base-element.d.ts.map +1 -1
- package/development/core/base-elements.js +5 -2
- package/development/core/config/config.d.ts +3 -0
- package/development/core/config/config.d.ts.map +1 -1
- package/development/core/config.js +1 -1
- package/development/navigation/navigation.js +2 -7
- package/development/teaser/teaser.d.ts +2 -1
- package/development/teaser/teaser.d.ts.map +1 -1
- package/development/teaser-product/common/teaser-product-common.d.ts +1 -1
- package/development/teaser-product/common/teaser-product-common.d.ts.map +1 -1
- package/development/teaser-product/common.js +19 -19
- package/development/teaser-product/teaser-product/teaser-product.d.ts +2 -1
- package/development/teaser-product/teaser-product/teaser-product.d.ts.map +1 -1
- package/development/teaser-product/teaser-product.js +44 -12
- package/development/teaser.js +33 -7
- package/navigation/navigation.js +1 -1
- package/package.json +1 -1
- package/teaser/teaser.d.ts +2 -1
- package/teaser/teaser.d.ts.map +1 -1
- package/teaser-product/common/teaser-product-common.d.ts +1 -1
- package/teaser-product/common/teaser-product-common.d.ts.map +1 -1
- package/teaser-product/common.js +22 -20
- package/teaser-product/teaser-product/teaser-product.d.ts +2 -1
- package/teaser-product/teaser-product/teaser-product.d.ts.map +1 -1
- package/teaser-product/teaser-product.js +26 -13
- package/teaser.js +38 -26
package/development/teaser.js
CHANGED
|
@@ -12,6 +12,7 @@ import { SbbLinkBaseElement } from "./core/base-elements.js";
|
|
|
12
12
|
import { slotState, forceType, omitEmptyConverter } from "./core/decorators.js";
|
|
13
13
|
import { css } from "lit";
|
|
14
14
|
import "./chip.js";
|
|
15
|
+
import "./screen-reader-only.js";
|
|
15
16
|
import "./title.js";
|
|
16
17
|
const style = css`@charset "UTF-8";
|
|
17
18
|
*,
|
|
@@ -36,6 +37,12 @@ const style = css`@charset "UTF-8";
|
|
|
36
37
|
var(--sbb-animation-duration-4x)
|
|
37
38
|
);
|
|
38
39
|
}
|
|
40
|
+
@media (forced-colors: active) {
|
|
41
|
+
:host {
|
|
42
|
+
--sbb-teaser-description-color: LinkText;
|
|
43
|
+
--sbb-title-text-color-normal-override: LinkText !important;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
39
46
|
|
|
40
47
|
:host([alignment=after]) {
|
|
41
48
|
--sbb-teaser-align-items: start;
|
|
@@ -48,16 +55,23 @@ const style = css`@charset "UTF-8";
|
|
|
48
55
|
--sbb-teaser-width: 100%;
|
|
49
56
|
}
|
|
50
57
|
|
|
51
|
-
.sbb-
|
|
58
|
+
.sbb-teaser__wrapper {
|
|
52
59
|
display: flex;
|
|
53
|
-
|
|
60
|
+
position: relative;
|
|
61
|
+
cursor: pointer;
|
|
54
62
|
}
|
|
55
|
-
.sbb-
|
|
63
|
+
.sbb-teaser__wrapper::before {
|
|
56
64
|
content: "";
|
|
57
65
|
user-select: none;
|
|
58
66
|
width: 0;
|
|
59
67
|
height: 0;
|
|
60
68
|
}
|
|
69
|
+
|
|
70
|
+
.sbb-teaser {
|
|
71
|
+
text-decoration: none;
|
|
72
|
+
position: absolute;
|
|
73
|
+
inset: 0;
|
|
74
|
+
}
|
|
61
75
|
:host(:not([data-focus-origin=mouse], [data-focus-origin=touch])) .sbb-teaser:focus-visible {
|
|
62
76
|
outline-offset: var(--sbb-focus-outline-offset);
|
|
63
77
|
outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
|
|
@@ -81,6 +95,7 @@ const style = css`@charset "UTF-8";
|
|
|
81
95
|
gap: var(--sbb-teaser-gap);
|
|
82
96
|
max-width: 100%;
|
|
83
97
|
width: 100%;
|
|
98
|
+
pointer-events: none;
|
|
84
99
|
}
|
|
85
100
|
|
|
86
101
|
.sbb-teaser__text {
|
|
@@ -96,7 +111,7 @@ const style = css`@charset "UTF-8";
|
|
|
96
111
|
transition: var(--sbb-teaser-animation-duration) var(--sbb-animation-easing);
|
|
97
112
|
}
|
|
98
113
|
@media (any-hover: hover) {
|
|
99
|
-
.sbb-
|
|
114
|
+
.sbb-teaser__wrapper:hover ::slotted([slot=image]) {
|
|
100
115
|
transform: scale(var(--sbb-teaser-scale-hover));
|
|
101
116
|
--sbb-teaser-brightness: var(--sbb-teaser-brightness-hover);
|
|
102
117
|
}
|
|
@@ -118,7 +133,7 @@ const style = css`@charset "UTF-8";
|
|
|
118
133
|
transition: var(--sbb-teaser-animation-duration) var(--sbb-animation-easing);
|
|
119
134
|
}
|
|
120
135
|
@media (any-hover: hover) {
|
|
121
|
-
.sbb-
|
|
136
|
+
.sbb-teaser__wrapper:hover .sbb-teaser__image-wrapper {
|
|
122
137
|
box-shadow: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-hard-2-color), var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-hard-1-color);
|
|
123
138
|
}
|
|
124
139
|
}
|
|
@@ -202,7 +217,18 @@ let SbbTeaserElement = (() => {
|
|
|
202
217
|
set chipContent(value) {
|
|
203
218
|
__privateSet(this, _chipContent_accessor_storage, value);
|
|
204
219
|
}
|
|
205
|
-
|
|
220
|
+
render() {
|
|
221
|
+
return html`
|
|
222
|
+
<div class="sbb-teaser__wrapper">
|
|
223
|
+
${this.renderLink(
|
|
224
|
+
// For SEO we add the accessibility hidden as hidden content of the link
|
|
225
|
+
html`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
|
|
226
|
+
)}
|
|
227
|
+
${this.renderContent()}
|
|
228
|
+
</div>
|
|
229
|
+
`;
|
|
230
|
+
}
|
|
231
|
+
renderContent() {
|
|
206
232
|
return html`
|
|
207
233
|
<span class="sbb-teaser__container">
|
|
208
234
|
<span class="sbb-teaser__image-wrapper">
|
|
@@ -249,4 +275,4 @@ let SbbTeaserElement = (() => {
|
|
|
249
275
|
export {
|
|
250
276
|
SbbTeaserElement
|
|
251
277
|
};
|
|
252
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
278
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvdGVhc2VyL3RlYXNlci50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50LCBwcm9wZXJ0eSB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQvc3RhdGljLWh0bWwuanMnO1xuXG5pbXBvcnQgeyBTYmJMaW5rQmFzZUVsZW1lbnQgfSBmcm9tICcuLi9jb3JlL2Jhc2UtZWxlbWVudHMuanMnO1xuaW1wb3J0IHsgZm9yY2VUeXBlLCBvbWl0RW1wdHlDb252ZXJ0ZXIsIHNsb3RTdGF0ZSB9IGZyb20gJy4uL2NvcmUvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgdHlwZSB7IFNiYlRpdGxlTGV2ZWwgfSBmcm9tICcuLi90aXRsZS5qcyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL3RlYXNlci5zY3NzP2xpdCZpbmxpbmUnO1xuXG5pbXBvcnQgJy4uL2NoaXAuanMnO1xuaW1wb3J0ICcuLi9zY3JlZW4tcmVhZGVyLW9ubHkuanMnO1xuaW1wb3J0ICcuLi90aXRsZS5qcyc7XG5cbi8qKlxuICogSXQgZGlzcGxheXMgYW4gaW50ZXJhY3RpdmUgaW1hZ2Ugd2l0aCBjYXB0aW9uLlxuICpcbiAqIEBzbG90IGltYWdlIC0gU2xvdCB1c2VkIHRvIHJlbmRlciB0aGUgaW1hZ2UuXG4gKiBAc2xvdCBjaGlwIC0gU2xvdCB1c2VkIHRvIHJlbmRlciB0aGUgc2JiLWNoaXAgbGFiZWwuXG4gKiBAc2xvdCB0aXRsZSAtIFNsb3QgdXNlZCB0byByZW5kZXIgdGhlIHRpdGxlLlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byByZW5kZXIgdGhlIGRlc2NyaXB0aW9uLlxuICovXG5leHBvcnRcbkBjdXN0b21FbGVtZW50KCdzYmItdGVhc2VyJylcbkBzbG90U3RhdGUoKVxuY2xhc3MgU2JiVGVhc2VyRWxlbWVudCBleHRlbmRzIFNiYkxpbmtCYXNlRWxlbWVudCB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IHN0eWxlO1xuXG4gIC8qKiBUZWFzZXIgdmFyaWFudCAtIGRlZmluZSB0aGUgcG9zaXRpb24gYW5kIHRoZSBhbGlnbm1lbnQgb2YgdGhlIHRleHQgYmxvY2suICovXG4gIEBwcm9wZXJ0eSh7IHJlZmxlY3Q6IHRydWUgfSkgcHVibGljIGFjY2Vzc29yIGFsaWdubWVudDogJ2FmdGVyLWNlbnRlcmVkJyB8ICdhZnRlcicgfCAnYmVsb3cnID1cbiAgICAnYWZ0ZXItY2VudGVyZWQnO1xuXG4gIC8qKiBIZWFkaW5nIGxldmVsIG9mIHRoZSBzYmItdGl0bGUgZWxlbWVudCAoZS5nLiBoMS1oNikuICovXG4gIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogJ3RpdGxlLWxldmVsJyB9KSBwdWJsaWMgYWNjZXNzb3IgdGl0bGVMZXZlbDogU2JiVGl0bGVMZXZlbCA9ICc1JztcblxuICAvKiogQ29udGVudCBvZiB0aXRsZS4gKi9cbiAgQGZvcmNlVHlwZSgpXG4gIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogJ3RpdGxlLWNvbnRlbnQnIH0pXG4gIHB1YmxpYyBhY2Nlc3NvciB0aXRsZUNvbnRlbnQ6IHN0cmluZyA9ICcnO1xuXG4gIC8qKiBDb250ZW50IG9mIGNoaXAuICovXG4gIEBmb3JjZVR5cGUoKVxuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdjaGlwLWNvbnRlbnQnLCByZWZsZWN0OiB0cnVlLCBjb252ZXJ0ZXI6IG9taXRFbXB0eUNvbnZlcnRlciB9KVxuICBwdWJsaWMgYWNjZXNzb3IgY2hpcENvbnRlbnQ6IHN0cmluZyA9ICcnO1xuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXIoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIC8vIFdlIHJlbmRlciB0aGUgY29udGVudCBvdXRzaWRlIHRoZSBhbmNob3IgdGFnIHRvIGFsbG93IHNjcmVlbiByZWFkZXJzIHRvIG5hdmlnYXRlIHRocm91Z2ggaXRcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxkaXYgY2xhc3M9XCJzYmItdGVhc2VyX193cmFwcGVyXCI+XG4gICAgICAgICR7dGhpcy5yZW5kZXJMaW5rKFxuICAgICAgICAgIC8vIEZvciBTRU8gd2UgYWRkIHRoZSBhY2Nlc3NpYmlsaXR5IGhpZGRlbiBhcyBoaWRkZW4gY29udGVudCBvZiB0aGUgbGlua1xuICAgICAgICAgIGh0bWxgPHNiYi1zY3JlZW4tcmVhZGVyLW9ubHk+JHt0aGlzLmFjY2Vzc2liaWxpdHlMYWJlbH08L3NiYi1zY3JlZW4tcmVhZGVyLW9ubHk+YCxcbiAgICAgICAgKX1cbiAgICAgICAgJHt0aGlzLnJlbmRlckNvbnRlbnQoKX1cbiAgICAgIDwvZGl2PlxuICAgIGA7XG4gIH1cblxuICBwcm90ZWN0ZWQgcmVuZGVyQ29udGVudCgpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8c3BhbiBjbGFzcz1cInNiYi10ZWFzZXJfX2NvbnRhaW5lclwiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInNiYi10ZWFzZXJfX2ltYWdlLXdyYXBwZXJcIj5cbiAgICAgICAgICA8c2xvdCBuYW1lPVwiaW1hZ2VcIj48L3Nsb3Q+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdGVhc2VyX190ZXh0XCI+XG4gICAgICAgICAgPHNiYi1jaGlwIHNpemU9XCJ4eHNcIiBjb2xvcj1cImNoYXJjb2FsXCIgY2xhc3M9XCJzYmItdGVhc2VyX19jaGlwXCI+XG4gICAgICAgICAgICA8c2xvdCBuYW1lPVwiY2hpcFwiPiR7dGhpcy5jaGlwQ29udGVudH08L3Nsb3Q+XG4gICAgICAgICAgPC9zYmItY2hpcD5cbiAgICAgICAgICA8c2JiLXRpdGxlIGxldmVsPSR7dGhpcy50aXRsZUxldmVsfSB2aXN1YWwtbGV2ZWw9XCI1XCIgY2xhc3M9XCJzYmItdGVhc2VyX19sZWFkXCI+XG4gICAgICAgICAgICA8c2xvdCBuYW1lPVwidGl0bGVcIj4ke3RoaXMudGl0bGVDb250ZW50fTwvc2xvdD5cbiAgICAgICAgICA8L3NiYi10aXRsZT5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cInNiYi10ZWFzZXJfX2Rlc2NyaXB0aW9uXCI+XG4gICAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L3NwYW4+XG4gICAgICA8L3NwYW4+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXRlYXNlcic6IFNiYlRlYXNlckVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0lBeUJNLG9CQUFnQixNQUFBOztBQUZyQixNQUFBLG1CQUFBLENBQUEsY0FBYyxZQUFZLEdBQzFCLFdBQVc7Ozs7b0JBQ21COzs7Ozs7Ozs7Ozs7O0FBQVIsRUFBQSxtQkFBUSxZQUFrQjtBQUFBOztBQUlsQixzREFBQSxrQkFBQSxNQUFBLHlCQUMzQixnQkFBZ0I7QUFHc0Isd0RBQUEsa0JBQUEsTUFBQSw0QkFBQSxHQUFBLGtCQUFBLE1BQUEsMEJBQTRDLEdBQUc7QUFLdkYsMERBQUEsa0JBQUEsTUFBQSw2QkFBQSxHQUFBLGtCQUFBLE1BQUEsNEJBQXVDLEVBQUU7QUFL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
|
package/navigation/navigation.js
CHANGED
|
@@ -18,7 +18,7 @@ import { i18nCloseNavigation as V } from "../core/i18n.js";
|
|
|
18
18
|
import { SbbUpdateSchedulerMixin as G } from "../core/mixins.js";
|
|
19
19
|
import { isEventOnElement as m, removeAriaOverlayTriggerAttributes as K, setAriaOverlayTriggerAttributes as W } from "../core/overlay.js";
|
|
20
20
|
import "../button/transparent-button.js";
|
|
21
|
-
const J = H`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: transparent;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-transform: translateX(-100%);--sbb-navigation-content-transform: translateX(0);--sbb-navigation-width: 100%;--sbb-navigation-height: 100dvh;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:block;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden}@media (min-width: 52.5rem){:host{--sbb-navigation-grid-column: 1 / 9}}@media (min-width: 64rem){:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);--sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);--sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive))}}@media (min-width: 90rem){:host{--sbb-navigation-grid-column: 1 / 6;--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl)}}:host([data-state=opened]){--sbb-navigation-animation-easing: ease-out}:host(:is([data-state=opened],[data-state=opening])){--sbb-navigation-backdrop-visibility: visible;--sbb-navigation-backdrop-pointer-events: all;--sbb-navigation-backdrop-color: var(--sbb-color-black-alpha-70)}:host(:not([data-state=closed])){--sbb-navigation-inset: 0;--sbb-navigation-transform: translateX(0)}:host([data-has-navigation-section]){--sbb-navigation-content-transform: translateX(-100%)}@media (min-width: 64rem){:host([data-has-navigation-section]){--sbb-navigation-expanded-width:
|
|
21
|
+
const J = H`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: transparent;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-transform: translateX(-100%);--sbb-navigation-content-transform: translateX(0);--sbb-navigation-width: 100%;--sbb-navigation-height: 100dvh;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:block;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden}@media (min-width: 52.5rem){:host{--sbb-navigation-grid-column: 1 / 9}}@media (min-width: 64rem){:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);--sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);--sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive))}}@media (min-width: 90rem){:host{--sbb-navigation-grid-column: 1 / 6;--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl)}}:host([data-state=opened]){--sbb-navigation-animation-easing: ease-out}:host(:is([data-state=opened],[data-state=opening])){--sbb-navigation-backdrop-visibility: visible;--sbb-navigation-backdrop-pointer-events: all;--sbb-navigation-backdrop-color: var(--sbb-color-black-alpha-70)}:host(:not([data-state=closed])){--sbb-navigation-inset: 0;--sbb-navigation-transform: translateX(0)}:host([data-has-navigation-section]){--sbb-navigation-content-transform: translateX(-100%)}@media (min-width: 64rem){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100dvw;--sbb-navigation-content-transform: translateX(0%)}}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-navigation__container{display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:0;pointer-events:none;transform:var(--sbb-navigation-transform)}@media (min-width: 64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:background-color,visibility;content:"";visibility:var(--sbb-navigation-backdrop-visibility);pointer-events:var(--sbb-navigation-backdrop-pointer-events);position:fixed;inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color)}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:none;width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);padding:0;margin:0;position:relative;inset-inline-start:var(--sbb-navigation-inline-start);inset-block-start:0;border:none;pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-color-white);background-color:var(--sbb-color-midnight)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;content:"";position:absolute;width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background:var(--sbb-color-midnight)}:host([data-state]:not([data-state=closed])) .sbb-navigation{display:block;pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing)}:host([data-state][data-state=closing]) .sbb-navigation{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:flex;justify-content:flex-end;position:absolute;width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:transform;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-navigation__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation__content{display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;transform:var(--sbb-navigation-content-transform)}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes close{0%{transform:translate(0)}to{transform:translate(-100%)}}`, Q = {
|
|
22
22
|
subtree: !0,
|
|
23
23
|
attributeFilter: ["data-state"]
|
|
24
24
|
};
|
package/package.json
CHANGED
package/teaser/teaser.d.ts
CHANGED
|
@@ -19,7 +19,8 @@ export declare class SbbTeaserElement extends SbbLinkBaseElement {
|
|
|
19
19
|
accessor titleContent: string;
|
|
20
20
|
/** Content of chip. */
|
|
21
21
|
accessor chipContent: string;
|
|
22
|
-
protected
|
|
22
|
+
protected render(): TemplateResult;
|
|
23
|
+
protected renderContent(): TemplateResult;
|
|
23
24
|
}
|
|
24
25
|
declare global {
|
|
25
26
|
interface HTMLElementTagNameMap {
|
package/teaser/teaser.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"teaser.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser/teaser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC;AAErB;;;;;;;GAOG;AACH,qBAGM,gBAAiB,SAAQ,kBAAkB;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gFAAgF;IAChF,SAA6C,SAAS,EAAE,gBAAgB,GAAG,OAAO,GAAG,OAAO,CACzE;IAEnB,2DAA2D;IAC3D,SAAwD,UAAU,EAAE,aAAa,CAAO;IAExF,wBAAwB;IACxB,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,uBAAuB;IACvB,SAEgB,WAAW,EAAE,MAAM,CAAM;cAEtB,cAAc,IAAI,cAAc;
|
|
1
|
+
{"version":3,"file":"teaser.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser/teaser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,YAAY,CAAC;AACpB,OAAO,0BAA0B,CAAC;AAClC,OAAO,aAAa,CAAC;AAErB;;;;;;;GAOG;AACH,qBAGM,gBAAiB,SAAQ,kBAAkB;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gFAAgF;IAChF,SAA6C,SAAS,EAAE,gBAAgB,GAAG,OAAO,GAAG,OAAO,CACzE;IAEnB,2DAA2D;IAC3D,SAAwD,UAAU,EAAE,aAAa,CAAO;IAExF,wBAAwB;IACxB,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,uBAAuB;IACvB,SAEgB,WAAW,EAAE,MAAM,CAAM;cAEtB,MAAM,IAAI,cAAc;IAa3C,SAAS,CAAC,aAAa,IAAI,cAAc;CAoB1C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SbbActionBaseElement } from '../../core/base-elements.js';
|
|
2
|
-
import {
|
|
2
|
+
import { AbstractConstructor, SbbNegativeMixinType } from '../../core/mixins.js';
|
|
3
3
|
export declare class SbbTeaserProductCommonElementMixinType extends SbbNegativeMixinType {
|
|
4
4
|
accessor imageAlignment: 'after' | 'before';
|
|
5
5
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"teaser-product-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-product/common/teaser-product-common.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,
|
|
1
|
+
{"version":3,"file":"teaser-product-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-product/common/teaser-product-common.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,EACL,KAAK,mBAAmB,EAExB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,CAAC,OAAO,OAAO,sCAAuC,SAAQ,oBAAoB;IACtF,SAAgB,cAAc,EAAE,OAAO,GAAG,QAAQ,CAAC;CACpD;AAGD,eAAO,MAAM,kCAAkC,GAC7C,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cAEvC,CAAC,KACZ,mBAAmB,CAAC,sCAAsC,CAAC,GAAG,CA+BhE,CAAC"}
|
package/teaser-product/common.js
CHANGED
|
@@ -2,19 +2,19 @@ var m = (t) => {
|
|
|
2
2
|
throw TypeError(t);
|
|
3
3
|
};
|
|
4
4
|
var v = (t, e, r) => e.has(t) || m("Cannot " + r);
|
|
5
|
-
var f = (t, e, r) => (v(t, e, "read from private field"), r ? r.call(t) : e.get(t)), _ = (t, e, r) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), h = (t, e, r,
|
|
5
|
+
var f = (t, e, r) => (v(t, e, "read from private field"), r ? r.call(t) : e.get(t)), _ = (t, e, r) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), h = (t, e, r, i) => (v(t, e, "write to private field"), i ? i.call(t, r) : e.set(t, r), r);
|
|
6
6
|
import { __esDecorate as k, __runInitializers as c } from "tslib";
|
|
7
7
|
import { html as y, css as S } from "lit";
|
|
8
8
|
import { property as w } from "lit/decorators.js";
|
|
9
9
|
import { slotState as A } from "../core/decorators.js";
|
|
10
10
|
import { SbbNegativeMixin as z } from "../core/mixins.js";
|
|
11
11
|
const M = (t) => (() => {
|
|
12
|
-
var
|
|
13
|
-
let r = [A()],
|
|
12
|
+
var b, a;
|
|
13
|
+
let r = [A()], i, d = [], o, l = z(t), u, p = [], g = [];
|
|
14
14
|
return a = class extends l {
|
|
15
15
|
constructor() {
|
|
16
16
|
super(...arguments);
|
|
17
|
-
_(this,
|
|
17
|
+
_(this, b, c(this, p, "after"));
|
|
18
18
|
c(this, g);
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
@@ -22,31 +22,33 @@ const M = (t) => (() => {
|
|
|
22
22
|
* Only relevant starting from large breakpoint.
|
|
23
23
|
*/
|
|
24
24
|
get imageAlignment() {
|
|
25
|
-
return f(this,
|
|
25
|
+
return f(this, b);
|
|
26
26
|
}
|
|
27
27
|
set imageAlignment(s) {
|
|
28
|
-
h(this,
|
|
28
|
+
h(this, b, s);
|
|
29
29
|
}
|
|
30
30
|
renderTemplate() {
|
|
31
31
|
return y`
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
<
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
32
|
+
<div class="sbb-teaser-product__root">
|
|
33
|
+
<div class="sbb-teaser-product__image-container"><slot name="image"></slot></div>
|
|
34
|
+
<div class="sbb-teaser-product__container">
|
|
35
|
+
<span class="sbb-teaser-product__content">
|
|
36
|
+
<slot></slot>
|
|
37
|
+
</span>
|
|
38
|
+
<div class="sbb-teaser-product__footnote">
|
|
39
|
+
<slot name="footnote"></slot>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
41
43
|
`;
|
|
42
44
|
}
|
|
43
|
-
},
|
|
45
|
+
}, b = new WeakMap(), o = a, (() => {
|
|
44
46
|
const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
} }, metadata: s },
|
|
47
|
+
u = [w({ attribute: "image-alignment", reflect: !0 })], k(a, null, u, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (n) => "imageAlignment" in n, get: (n) => n.imageAlignment, set: (n, x) => {
|
|
48
|
+
n.imageAlignment = x;
|
|
49
|
+
} }, metadata: s }, p, g), k(null, i = { value: o }, r, { kind: "class", name: o.name, metadata: s }, null, d), o = i.value, s && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s }), c(o, d);
|
|
48
50
|
})(), o;
|
|
49
|
-
})(), O = S`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-teaser-product-background-color: var(--sbb-color-cloud);--sbb-teaser-product-background-gradient-direction: to right;--sbb-teaser-product-background: var(--sbb-teaser-product-background-color);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-product-content-color: var(--sbb-color-iron);--sbb-teaser-product-footer-color: var(--sbb-color-anthracite);--sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-teaser-product-min-height: 37.5rem;--sbb-teaser-product-background-gradient-start: 25%;--sbb-teaser-product-background-gradient-end: 75%}@media (min-width: 64rem){:host{--sbb-teaser-product-background: linear-gradient( var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end) )}}:host([negative]){--sbb-teaser-product-background-color: var(--sbb-color-midnight);--sbb-teaser-product-content-color: var(--sbb-color-cloud);--sbb-teaser-product-footer-color: var(--sbb-color-cloud);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-title-text-color-normal-override: var(--sbb-color-milk)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction: to left}.sbb-teaser-product__image-container{
|
|
51
|
+
})(), O = S`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-teaser-product-background-color: var(--sbb-color-cloud);--sbb-teaser-product-background-gradient-direction: to right;--sbb-teaser-product-background: var(--sbb-teaser-product-background-color);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-product-content-color: var(--sbb-color-iron);--sbb-teaser-product-footer-color: var(--sbb-color-anthracite);--sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-teaser-product-min-height: 37.5rem;--sbb-teaser-product-background-gradient-start: 25%;--sbb-teaser-product-background-gradient-end: 75%}@media (min-width: 64rem){:host{--sbb-teaser-product-background: linear-gradient( var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end) )}}:host([negative]){--sbb-teaser-product-background-color: var(--sbb-color-midnight);--sbb-teaser-product-content-color: var(--sbb-color-cloud);--sbb-teaser-product-footer-color: var(--sbb-color-cloud);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-title-text-color-normal-override: var(--sbb-color-milk)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction: to left}.sbb-teaser-product__image-container{overflow:hidden;border-radius:var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0}@media (min-width: 64rem){.sbb-teaser-product__image-container{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-teaser-product-border-radius)}}::slotted(img){display:flex;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}::slotted(sbb-image){--sbb-image-border-radius: 0;height:100%}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){--sbb-title-margin-block-start: 0}::slotted(:is(sbb-action-group,[data-action]).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}@media (forced-colors: active){.sbb-teaser-product__root:after{content:"";position:absolute;display:block;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius)}}.sbb-action-base{display:block;position:relative;text-decoration:none}.sbb-teaser-product__container{background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding:var(--sbb-spacing-responsive-s)}@media (min-width: 64rem){.sbb-teaser-product__container{display:grid;grid:"content ." 1fr "footnote ." auto/1fr 1fr;column-gap:var(--sbb-spacing-responsive-xxl);background:var(--sbb-teaser-product-background);border-radius:var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block) 0;padding-inline:var(--sbb-spacing-responsive-xl);position:relative}:host([image-alignment=before]) .sbb-teaser-product__container{grid-template-areas:". content" ". footnote"}}.sbb-teaser-product__content{grid-area:content;align-self:center;margin:0;color:var(--sbb-teaser-product-content-color)}@media (min-width: 64rem){.sbb-teaser-product__content{align-content:center;min-height:calc(var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-padding-block))}}.sbb-teaser-product__footnote{grid-area:footnote;padding-block-start:var(--sbb-spacing-responsive-s);color:var(--sbb-teaser-product-footer-color);--sbb-text-font-size: var(--sbb-font-size-text-xxs);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)}:host(:not([data-slot-names~=footnote])) .sbb-teaser-product__footnote{padding-block-start:0}@media (min-width: 64rem){.sbb-teaser-product__footnote{min-height:var(--sbb-teaser-product-container-padding-block);padding-block:var(--sbb-spacing-responsive-xs)}}`;
|
|
50
52
|
export {
|
|
51
53
|
M as SbbTeaserProductCommonElementMixin,
|
|
52
54
|
O as teaserProductCommonStyle
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CSSResultGroup } from 'lit';
|
|
1
|
+
import { CSSResultGroup, TemplateResult } from 'lit';
|
|
2
2
|
import { SbbLinkBaseElement } from '../../core/base-elements.js';
|
|
3
3
|
declare const SbbTeaserProductElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbTeaserProductCommonElementMixinType> & typeof SbbLinkBaseElement;
|
|
4
4
|
/**
|
|
@@ -12,6 +12,7 @@ declare const SbbTeaserProductElement_base: import('../../core/mixins.js').Abstr
|
|
|
12
12
|
*/
|
|
13
13
|
export declare class SbbTeaserProductElement extends SbbTeaserProductElement_base {
|
|
14
14
|
static styles: CSSResultGroup;
|
|
15
|
+
protected render(): TemplateResult;
|
|
15
16
|
}
|
|
16
17
|
declare global {
|
|
17
18
|
interface HTMLElementTagNameMap {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"teaser-product.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-product/teaser-product/teaser-product.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"teaser-product.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-product/teaser-product/teaser-product.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAKjE,OAAO,6BAA6B,CAAC;;AAErC;;;;;;;;GAQG;AACH,qBAEM,uBAAwB,SAAQ,4BAAsD;IAC1F,OAAuB,MAAM,EAAE,cAAc,CAAqC;cAE/D,MAAM,IAAI,cAAc;CAY5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}
|
|
@@ -1,18 +1,31 @@
|
|
|
1
|
-
import { __esDecorate as b, __runInitializers as
|
|
2
|
-
import { customElement as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { __esDecorate as b, __runInitializers as l } from "tslib";
|
|
2
|
+
import { customElement as c } from "lit/decorators.js";
|
|
3
|
+
import { html as i } from "lit/static-html.js";
|
|
4
|
+
import { SbbLinkBaseElement as d } from "../core/base-elements.js";
|
|
5
|
+
import { SbbTeaserProductCommonElementMixin as u, teaserProductCommonStyle as m } from "./common.js";
|
|
6
|
+
import { css as p } from "lit";
|
|
7
|
+
import "../screen-reader-only.js";
|
|
8
|
+
const v = p`:host{--sbb-teaser-product-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-product-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-teaser-product-animation-easing: var(--sbb-animation-easing);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x)}@media (forced-colors: active){:host{--sbb-title-text-color-normal-override: LinkText !important;--sbb-teaser-product-content-color: LinkText !important;--sbb-teaser-product-footer-color: LinkText !important}}@media (any-hover: hover){:host(:hover){--sbb-teaser-product-brightness: var(--sbb-teaser-product-brightness-hover)}}::slotted(:is(img,sbb-image)){will-change:filter;transition-property:filter;transition-duration:var(--sbb-teaser-product-animation-duration);transition-timing-function:var(--sbb-animation-easing);filter:brightness(var(--sbb-teaser-product-brightness, 1))}.sbb-teaser-product__wrapper{position:relative}.sbb-teaser-product__root{pointer-events:none}@media (forced-colors: active){:host(:hover) .sbb-teaser-product__root:after{border-color:Highlight}}.sbb-teaser-product{position:absolute;top:0;right:0;bottom:0;left:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-product:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-product-border-radius)}`;
|
|
9
|
+
let T = (() => {
|
|
8
10
|
var e;
|
|
9
|
-
let
|
|
10
|
-
return e = class extends
|
|
11
|
+
let n = [c("sbb-teaser-product")], o, s = [], t, a = u(d);
|
|
12
|
+
return e = class extends a {
|
|
13
|
+
render() {
|
|
14
|
+
return i`
|
|
15
|
+
<div class="sbb-teaser-product__wrapper">
|
|
16
|
+
${this.renderLink(
|
|
17
|
+
// For SEO we add the accessibility hidden as hidden content of the link
|
|
18
|
+
i`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
|
|
19
|
+
)}
|
|
20
|
+
${this.renderTemplate()}
|
|
21
|
+
</div>
|
|
22
|
+
`;
|
|
23
|
+
}
|
|
11
24
|
}, t = e, (() => {
|
|
12
|
-
const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
13
|
-
b(null,
|
|
14
|
-
})(), e.styles = [
|
|
25
|
+
const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
|
|
26
|
+
b(null, o = { value: t }, n, { kind: "class", name: t.name, metadata: r }, null, s), t = o.value, r && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
|
|
27
|
+
})(), e.styles = [m, v], l(t, s), t;
|
|
15
28
|
})();
|
|
16
29
|
export {
|
|
17
|
-
|
|
30
|
+
T as SbbTeaserProductElement
|
|
18
31
|
};
|
package/teaser.js
CHANGED
|
@@ -4,24 +4,25 @@ var j = (t) => {
|
|
|
4
4
|
var D = (t, s, i) => s.has(t) || j("Cannot " + i);
|
|
5
5
|
var v = (t, s, i) => (D(t, s, "read from private field"), i ? i.call(t) : s.get(t)), m = (t, s, i) => s.has(t) ? j("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, i), p = (t, s, i, o) => (D(t, s, "write to private field"), o ? o.call(t, i) : s.set(t, i), i);
|
|
6
6
|
import { __esDecorate as f, __runInitializers as n } from "tslib";
|
|
7
|
-
import { customElement as
|
|
8
|
-
import { html as
|
|
7
|
+
import { customElement as B, property as _ } from "lit/decorators.js";
|
|
8
|
+
import { html as u } from "lit/static-html.js";
|
|
9
9
|
import { SbbLinkBaseElement as F } from "./core/base-elements.js";
|
|
10
|
-
import { slotState as H, forceType as
|
|
10
|
+
import { slotState as H, forceType as O, omitEmptyConverter as P } from "./core/decorators.js";
|
|
11
11
|
import { css as U } from "lit";
|
|
12
12
|
import "./chip.js";
|
|
13
|
+
import "./screen-reader-only.js";
|
|
13
14
|
import "./title.js";
|
|
14
|
-
const q = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-width: fit-content;--sbb-teaser-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) )}: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);--sbb-teaser-width: 100%}.sbb-
|
|
15
|
-
let
|
|
16
|
-
var b, c,
|
|
17
|
-
let t = [
|
|
18
|
-
return r = class extends
|
|
15
|
+
const q = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-width: fit-content;--sbb-teaser-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-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);--sbb-teaser-width: 100%}.sbb-teaser__wrapper{display:flex;position:relative;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;top:0;right:0;bottom:0;left:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors: active){.sbb-teaser{outline-offset:var(--sbb-focus-outline-offset);outline:CanvasText solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}.sbb-teaser:hover{outline-color:Highlight}}.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{overflow:hidden;max-width:100%}::slotted([slot=image]){width:18.75rem;will-change:transform;display:block;filter:brightness(var(--sbb-teaser-brightness, 1));transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser__wrapper:hover ::slotted([slot=image]){transform:scale(var(--sbb-teaser-scale-hover));--sbb-teaser-brightness: var(--sbb-teaser-brightness-hover)}}::slotted(sbb-image[slot=image]){--sbb-image-aspect-ratio: 4 / 3}::slotted(img[slot=image]){aspect-ratio:4/3;object-fit:cover}.sbb-teaser__image-wrapper{flex-shrink:0;overflow:hidden;border-radius:var(--sbb-teaser-border-radius);transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser__wrapper:hover .sbb-teaser__image-wrapper{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-hard-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-hard-1-color)}}.sbb-teaser__chip{display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=chip],[chip-content])) .sbb-teaser__chip{display:none}.sbb-teaser__lead{margin:0}.sbb-teaser__description{--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);display:inline-block;color:var(--sbb-teaser-description-color)}`;
|
|
16
|
+
let Y = (() => {
|
|
17
|
+
var b, c, d, h, r;
|
|
18
|
+
let t = [B("sbb-teaser"), H()], s, i = [], o, g = F, w, x = [], y = [], C, z = [], k = [], L, S = [], T = [], I, $ = [], E = [];
|
|
19
|
+
return r = class extends g {
|
|
19
20
|
constructor() {
|
|
20
21
|
super(...arguments);
|
|
21
|
-
m(this, b, n(this,
|
|
22
|
-
m(this, c, (n(this,
|
|
23
|
-
m(this,
|
|
24
|
-
m(this,
|
|
22
|
+
m(this, b, n(this, x, "after-centered"));
|
|
23
|
+
m(this, c, (n(this, y), n(this, z, "5")));
|
|
24
|
+
m(this, d, (n(this, k), n(this, S, "")));
|
|
25
|
+
m(this, h, (n(this, T), n(this, $, "")));
|
|
25
26
|
n(this, E);
|
|
26
27
|
}
|
|
27
28
|
/** Teaser variant - define the position and the alignment of the text block. */
|
|
@@ -40,20 +41,31 @@ let X = (() => {
|
|
|
40
41
|
}
|
|
41
42
|
/** Content of title. */
|
|
42
43
|
get titleContent() {
|
|
43
|
-
return v(this,
|
|
44
|
+
return v(this, d);
|
|
44
45
|
}
|
|
45
46
|
set titleContent(a) {
|
|
46
|
-
p(this,
|
|
47
|
+
p(this, d, a);
|
|
47
48
|
}
|
|
48
49
|
/** Content of chip. */
|
|
49
50
|
get chipContent() {
|
|
50
|
-
return v(this,
|
|
51
|
+
return v(this, h);
|
|
51
52
|
}
|
|
52
53
|
set chipContent(a) {
|
|
53
|
-
p(this,
|
|
54
|
+
p(this, h, a);
|
|
55
|
+
}
|
|
56
|
+
render() {
|
|
57
|
+
return u`
|
|
58
|
+
<div class="sbb-teaser__wrapper">
|
|
59
|
+
${this.renderLink(
|
|
60
|
+
// For SEO we add the accessibility hidden as hidden content of the link
|
|
61
|
+
u`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
|
|
62
|
+
)}
|
|
63
|
+
${this.renderContent()}
|
|
64
|
+
</div>
|
|
65
|
+
`;
|
|
54
66
|
}
|
|
55
|
-
|
|
56
|
-
return
|
|
67
|
+
renderContent() {
|
|
68
|
+
return u`
|
|
57
69
|
<span class="sbb-teaser__container">
|
|
58
70
|
<span class="sbb-teaser__image-wrapper">
|
|
59
71
|
<slot name="image"></slot>
|
|
@@ -72,19 +84,19 @@ let X = (() => {
|
|
|
72
84
|
</span>
|
|
73
85
|
`;
|
|
74
86
|
}
|
|
75
|
-
}, b = new WeakMap(), c = new WeakMap(),
|
|
76
|
-
const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
77
|
-
|
|
87
|
+
}, b = new WeakMap(), c = new WeakMap(), d = new WeakMap(), h = new WeakMap(), o = r, (() => {
|
|
88
|
+
const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
|
|
89
|
+
w = [_({ reflect: !0 })], C = [_({ attribute: "title-level" })], L = [O(), _({ attribute: "title-content" })], I = [O(), _({ attribute: "chip-content", reflect: !0, converter: P })], f(r, null, w, { kind: "accessor", name: "alignment", static: !1, private: !1, access: { has: (e) => "alignment" in e, get: (e) => e.alignment, set: (e, l) => {
|
|
78
90
|
e.alignment = l;
|
|
79
|
-
} }, metadata: a },
|
|
91
|
+
} }, metadata: a }, x, y), f(r, null, C, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (e) => "titleLevel" in e, get: (e) => e.titleLevel, set: (e, l) => {
|
|
80
92
|
e.titleLevel = l;
|
|
81
|
-
} }, metadata: a },
|
|
93
|
+
} }, metadata: a }, z, k), f(r, null, L, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (e) => "titleContent" in e, get: (e) => e.titleContent, set: (e, l) => {
|
|
82
94
|
e.titleContent = l;
|
|
83
|
-
} }, metadata: a },
|
|
95
|
+
} }, metadata: a }, S, T), f(r, null, I, { kind: "accessor", name: "chipContent", static: !1, private: !1, access: { has: (e) => "chipContent" in e, get: (e) => e.chipContent, set: (e, l) => {
|
|
84
96
|
e.chipContent = l;
|
|
85
|
-
} }, metadata: a },
|
|
97
|
+
} }, metadata: a }, $, E), f(null, s = { value: o }, t, { kind: "class", name: o.name, metadata: a }, null, i), o = s.value, a && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
|
|
86
98
|
})(), r.styles = q, n(o, i), o;
|
|
87
99
|
})();
|
|
88
100
|
export {
|
|
89
|
-
|
|
101
|
+
Y as SbbTeaserElement
|
|
90
102
|
};
|