@sbb-esta/lyne-elements-experimental 1.6.0 → 1.8.0

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.
Files changed (53) hide show
  1. package/core/datetime/date-helper.d.ts.map +1 -1
  2. package/core/timetable/access-leg-helper.d.ts +0 -1
  3. package/core/timetable/timetable-helper.d.ts +0 -1
  4. package/custom-elements.json +0 -184
  5. package/development/core/datetime/date-helper.d.ts.map +1 -1
  6. package/development/core/datetime.js +16 -10
  7. package/development/core/timetable/access-leg-helper.d.ts +0 -1
  8. package/development/core/timetable/timetable-helper.d.ts +0 -1
  9. package/development/journey-summary/journey-summary.d.ts +0 -1
  10. package/development/pearl-chain/pearl-chain.d.ts +0 -1
  11. package/development/pearl-chain-time/pearl-chain-time.d.ts +0 -1
  12. package/development/pearl-chain-time.js +1 -1
  13. package/development/pearl-chain-vertical/pearl-chain-vertical.d.ts +0 -1
  14. package/development/pearl-chain-vertical-item/pearl-chain-vertical-item.d.ts +0 -1
  15. package/development/pearl-chain-vertical-item.js +23 -19
  16. package/development/pearl-chain.js +43 -33
  17. package/development/timetable-duration/timetable-duration.d.ts +0 -1
  18. package/development/timetable-row/timetable-row.d.ts +0 -1
  19. package/development/timetable-row/timetable-row.sample-data.d.ts +0 -1
  20. package/index.d.ts +0 -4
  21. package/index.js +0 -4
  22. package/journey-summary/journey-summary.d.ts +0 -1
  23. package/package.json +2 -12
  24. package/pearl-chain/pearl-chain.d.ts +0 -1
  25. package/pearl-chain-time/pearl-chain-time.d.ts +0 -1
  26. package/pearl-chain-time.js +1 -1
  27. package/pearl-chain-vertical/pearl-chain-vertical.d.ts +0 -1
  28. package/pearl-chain-vertical-item/pearl-chain-vertical-item.d.ts +0 -1
  29. package/pearl-chain-vertical-item.js +1 -1
  30. package/pearl-chain.js +1 -1
  31. package/timetable-duration/timetable-duration.d.ts +0 -1
  32. package/timetable-row/timetable-row.d.ts +0 -1
  33. package/timetable-row/timetable-row.sample-data.d.ts +0 -1
  34. package/development/teaser-hero/teaser-hero.d.ts +0 -26
  35. package/development/teaser-hero/teaser-hero.d.ts.map +0 -1
  36. package/development/teaser-hero.d.ts +0 -2
  37. package/development/teaser-hero.d.ts.map +0 -1
  38. package/development/teaser-hero.js +0 -187
  39. package/development/teaser-paid/teaser-paid.d.ts +0 -20
  40. package/development/teaser-paid/teaser-paid.d.ts.map +0 -1
  41. package/development/teaser-paid.d.ts +0 -2
  42. package/development/teaser-paid.d.ts.map +0 -1
  43. package/development/teaser-paid.js +0 -97
  44. package/teaser-hero/teaser-hero.d.ts +0 -26
  45. package/teaser-hero/teaser-hero.d.ts.map +0 -1
  46. package/teaser-hero.d.ts +0 -2
  47. package/teaser-hero.d.ts.map +0 -1
  48. package/teaser-hero.js +0 -51
  49. package/teaser-paid/teaser-paid.d.ts +0 -20
  50. package/teaser-paid/teaser-paid.d.ts.map +0 -1
  51. package/teaser-paid.d.ts +0 -2
  52. package/teaser-paid.d.ts.map +0 -1
  53. package/teaser-paid.js +0 -28
@@ -1 +0,0 @@
1
- {"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/teaser-hero.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
@@ -1,187 +0,0 @@
1
- import { SbbLinkBaseElement } from "@sbb-esta/lyne-elements/core/base-elements.js";
2
- import { css, nothing } from "lit";
3
- import { property, customElement } from "lit/decorators.js";
4
- import { html } from "lit/static-html.js";
5
- import "@sbb-esta/lyne-elements/image.js";
6
- import "@sbb-esta/lyne-elements/link/block-link-static.js";
7
- const style = css`/**
8
- * Better font rendering (on OS X)
9
- * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
10
- *
11
- * Usage:
12
- *
13
- * .var_dark_on_light {
14
- * @include font-smoothing;
15
- * }
16
- * .var_light_on_dark {
17
- * @include font-smoothing-reset;
18
- * }
19
- */
20
- /** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
21
- /*
22
- * SBB table mixin
23
- * Notes:
24
- * We cannot use \`border-collapse\` because it is not compatible with the \`border-radius\` property.
25
- * Therefore, we have to build the grid avoiding double borders.
26
- */
27
- *,
28
- ::before,
29
- ::after {
30
- box-sizing: border-box;
31
- }
32
-
33
- :host {
34
- display: block;
35
- outline: none !important;
36
- --sbb-panel-width: 13.9375rem;
37
- --sbb-panel-inner-height: 10.4375rem;
38
- --sbb-panel-triangle-height: 2.0625rem;
39
- --sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));
40
- --sbb-panel-line-height: var(--sbb-typo-line-height-titles);
41
- --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
42
- --sbb-panel-color: var(--sbb-color-white);
43
- --sbb-panel-background-color: var(--sbb-color-red-alpha-90);
44
- --sbb-panel-background-color-hover: var(--sbb-color-red);
45
- --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
46
- --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
47
- --sbb-panel-animation-duration: var(
48
- --sbb-disable-animation-zero-time,
49
- var(--sbb-animation-duration-4x)
50
- );
51
- --sbb-panel-animation-easing: var(--sbb-animation-easing);
52
- --sbb-teaser-hero-brightness-hover: 1.075;
53
- }
54
- @media (min-width: calc(52.5rem)) {
55
- :host {
56
- --sbb-panel-width: 20.0625rem;
57
- --sbb-panel-inner-height: 15.006875rem;
58
- --sbb-panel-triangle-height: 2.965625rem;
59
- --sbb-panel-font-size: var(--sbb-typo-scale-2x);
60
- }
61
- }
62
- @media (min-width: calc(64rem)) {
63
- :host {
64
- --sbb-panel-width: 26.75rem;
65
- --sbb-panel-inner-height: 20.02375rem;
66
- --sbb-panel-triangle-height: 3.956875rem;
67
- --sbb-panel-font-size: var(--sbb-typo-scale-2-5x);
68
- --sbb-panel-line-height: 1.2;
69
- }
70
- }
71
-
72
- @media (any-hover: hover) {
73
- :host(:hover) {
74
- --sbb-panel-background-color: var(--sbb-panel-background-color-hover);
75
- --sbb-teaser-hero-brightness: var(--sbb-teaser-hero-brightness-hover);
76
- }
77
- }
78
- .sbb-teaser-hero {
79
- position: relative;
80
- display: block;
81
- min-height: var(--sbb-panel-height);
82
- }
83
- :host(:not([data-focus-origin=mouse], [data-focus-origin=touch])) .sbb-teaser-hero:focus-visible {
84
- outline-offset: var(--sbb-focus-outline-offset);
85
- outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
86
- }
87
-
88
- .sbb-teaser-hero__panel {
89
- position: relative;
90
- display: flex;
91
- flex-direction: column;
92
- justify-content: center;
93
- gap: var(--sbb-panel-gap);
94
- width: var(--sbb-panel-width);
95
- height: var(--sbb-panel-height);
96
- padding-block: var(--sbb-panel-triangle-height);
97
- padding-inline: var(--sbb-panel-padding-inline);
98
- clip-path: polygon(0 0, 100% var(--sbb-panel-triangle-height), 100% calc(100% - var(--sbb-panel-triangle-height)), 0% 100%);
99
- background-color: var(--sbb-panel-background-color);
100
- transition: background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing);
101
- position: absolute;
102
- top: 50%;
103
- transform: translateY(-50%);
104
- z-index: 1;
105
- }
106
- @media (any-hover: hover) {
107
- .sbb-teaser-hero__panel:hover {
108
- --sbb-panel-background-color: var(--sbb-panel-background-color-hover);
109
- }
110
- }
111
-
112
- .sbb-teaser-hero__panel-text {
113
- -webkit-font-smoothing: antialiased;
114
- -moz-osx-font-smoothing: grayscale;
115
- font-family: var(--sbb-typo-font-family);
116
- font-size: var(--sbb-panel-font-size);
117
- font-weight: 300;
118
- line-height: var(--sbb-panel-line-height);
119
- letter-spacing: var(--sbb-typo-letter-spacing-titles);
120
- color: var(--sbb-panel-color);
121
- hyphens: auto;
122
- display: inline;
123
- margin: 0;
124
- padding: 0;
125
- }
126
-
127
- .sbb-teaser-hero__panel-link {
128
- -webkit-font-smoothing: antialiased;
129
- -moz-osx-font-smoothing: grayscale;
130
- }
131
-
132
- ::slotted([slot=image]),
133
- sbb-image {
134
- will-change: filter;
135
- filter: brightness(var(--sbb-teaser-hero-brightness, 1));
136
- transition: filter var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing);
137
- }`;
138
- var __defProp = Object.defineProperty;
139
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
140
- var __decorateClass = (decorators, target, key, kind) => {
141
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
142
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
143
- if (decorator = decorators[i])
144
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
145
- if (kind && result) __defProp(target, key, result);
146
- return result;
147
- };
148
- let SbbTeaserHeroElement = class extends SbbLinkBaseElement {
149
- renderTemplate() {
150
- return html`
151
- <span class="sbb-teaser-hero__panel">
152
- <p class="sbb-teaser-hero__panel-text">
153
- <slot></slot>
154
- </p>
155
- ${this.href ? html`<sbb-block-link-static
156
- class="sbb-teaser-hero__panel-link"
157
- icon-name="chevron-small-right-small"
158
- icon-placement="end"
159
- size="m"
160
- negative
161
- >
162
- <slot name="link-content">${this.linkContent}</slot>
163
- </sbb-block-link-static>` : nothing}
164
- </span>
165
- <slot name="image">
166
- ${this.imageSrc ? html`<sbb-image image-src=${this.imageSrc} alt=${this.imageAlt ?? nothing}></sbb-image>` : nothing}
167
- </slot>
168
- `;
169
- }
170
- };
171
- SbbTeaserHeroElement.styles = style;
172
- __decorateClass([
173
- property({ attribute: "link-content" })
174
- ], SbbTeaserHeroElement.prototype, "linkContent", 2);
175
- __decorateClass([
176
- property({ attribute: "image-src" })
177
- ], SbbTeaserHeroElement.prototype, "imageSrc", 2);
178
- __decorateClass([
179
- property({ attribute: "image-alt" })
180
- ], SbbTeaserHeroElement.prototype, "imageAlt", 2);
181
- SbbTeaserHeroElement = __decorateClass([
182
- customElement("sbb-teaser-hero")
183
- ], SbbTeaserHeroElement);
184
- export {
185
- SbbTeaserHeroElement
186
- };
187
- //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLWhlcm8uanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy1leHBlcmltZW50YWwvdGVhc2VyLWhlcm8vdGVhc2VyLWhlcm8udHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgU2JiTGlua0Jhc2VFbGVtZW50IH0gZnJvbSAnQHNiYi1lc3RhL2x5bmUtZWxlbWVudHMvY29yZS9iYXNlLWVsZW1lbnRzLmpzJztcbmltcG9ydCB7IHR5cGUgQ1NTUmVzdWx0R3JvdXAsIG5vdGhpbmcsIHR5cGUgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyBodG1sIH0gZnJvbSAnbGl0L3N0YXRpYy1odG1sLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vdGVhc2VyLWhlcm8uc2Nzcz9saXQmaW5saW5lJztcblxuaW1wb3J0ICdAc2JiLWVzdGEvbHluZS1lbGVtZW50cy9pbWFnZS5qcyc7XG5pbXBvcnQgJ0BzYmItZXN0YS9seW5lLWVsZW1lbnRzL2xpbmsvYmxvY2stbGluay1zdGF0aWMuanMnO1xuXG4vKipcbiAqIEl0IGRpc3BsYXlzIGFuIGltYWdlIGFuZCBhbiBhY3Rpb24gY2FsbCB3aXRoaW4gYSBwYW5lbC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCB0ZXh0IGNvbnRlbnQgdG8gdGhlIHBhbmVsXG4gKiBAc2xvdCBsaW5rLWNvbnRlbnQgLSBMaW5rIGNvbnRlbnQgb2YgdGhlIHBhbmVsXG4gKiBAc2xvdCBpbWFnZSAtIFRoZSBiYWNrZ3JvdW5kIGltYWdlIHRoYXQgY2FuIGJlIGEgYHNiYi1pbWFnZWBcbiAqL1xuQGN1c3RvbUVsZW1lbnQoJ3NiYi10ZWFzZXItaGVybycpXG5leHBvcnQgY2xhc3MgU2JiVGVhc2VySGVyb0VsZW1lbnQgZXh0ZW5kcyBTYmJMaW5rQmFzZUVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBzdHlsZTtcblxuICAvKiogUGFuZWwgbGluayB0ZXh0LiAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdsaW5rLWNvbnRlbnQnIH0pIHB1YmxpYyBsaW5rQ29udGVudD86IHN0cmluZztcblxuICAvKiogSW1hZ2Ugc3JjIHdpbGwgYmUgcGFzc2VkIHRvIGBzYmItaW1hZ2VgLiAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdpbWFnZS1zcmMnIH0pIHB1YmxpYyBpbWFnZVNyYz86IHN0cmluZztcblxuICAvKiogSW1hZ2UgYWx0IHRleHQgd2lsbCBiZSBwYXNzZWQgdG8gYHNiYi1pbWFnZWAuICovXG4gIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogJ2ltYWdlLWFsdCcgfSkgcHVibGljIGltYWdlQWx0Pzogc3RyaW5nO1xuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXJUZW1wbGF0ZSgpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8c3BhbiBjbGFzcz1cInNiYi10ZWFzZXItaGVyb19fcGFuZWxcIj5cbiAgICAgICAgPHAgY2xhc3M9XCJzYmItdGVhc2VyLWhlcm9fX3BhbmVsLXRleHRcIj5cbiAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgIDwvcD5cbiAgICAgICAgJHt0aGlzLmhyZWZcbiAgICAgICAgICA/IGh0bWxgPHNiYi1ibG9jay1saW5rLXN0YXRpY1xuICAgICAgICAgICAgICBjbGFzcz1cInNiYi10ZWFzZXItaGVyb19fcGFuZWwtbGlua1wiXG4gICAgICAgICAgICAgIGljb24tbmFtZT1cImNoZXZyb24tc21hbGwtcmlnaHQtc21hbGxcIlxuICAgICAgICAgICAgICBpY29uLXBsYWNlbWVudD1cImVuZFwiXG4gICAgICAgICAgICAgIHNpemU9XCJtXCJcbiAgICAgICAgICAgICAgbmVnYXRpdmVcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgPHNsb3QgbmFtZT1cImxpbmstY29udGVudFwiPiR7dGhpcy5saW5rQ29udGVudH08L3Nsb3Q+XG4gICAgICAgICAgICA8L3NiYi1ibG9jay1saW5rLXN0YXRpYz5gXG4gICAgICAgICAgOiBub3RoaW5nfVxuICAgICAgPC9zcGFuPlxuICAgICAgPHNsb3QgbmFtZT1cImltYWdlXCI+XG4gICAgICAgICR7dGhpcy5pbWFnZVNyY1xuICAgICAgICAgID8gaHRtbGA8c2JiLWltYWdlIGltYWdlLXNyYz0ke3RoaXMuaW1hZ2VTcmN9IGFsdD0ke3RoaXMuaW1hZ2VBbHQgPz8gbm90aGluZ30+PC9zYmItaW1hZ2U+YFxuICAgICAgICAgIDogbm90aGluZ31cbiAgICAgIDwvc2xvdD5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItdGVhc2VyLWhlcm8nOiBTYmJUZWFzZXJIZXJvRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQWtCYSxJQUFBLHVCQUFOLGNBQW1DLG1CQUFtQjtBQUFBLEVBWXhDLGlCQUFpQztBQUMzQyxXQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxVQUtELEtBQUssT0FDSDtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLDBDQU84QixLQUFLLFdBQVc7QUFBQSx3Q0FFOUMsT0FBTztBQUFBO0FBQUE7QUFBQSxVQUdULEtBQUssV0FDSCw0QkFBNEIsS0FBSyxRQUFRLFFBQVEsS0FBSyxZQUFZLE9BQU8sa0JBQ3pFLE9BQU87QUFBQTtBQUFBO0FBQUEsRUFHakI7QUFDRjtBQXJDYSxxQkFDWSxTQUF5QjtBQUdBLGdCQUFBO0FBQUEsRUFBL0MsU0FBUyxFQUFFLFdBQVcsZ0JBQWdCO0FBQUEsR0FKNUIscUJBSXFDLFdBQUEsZUFBQSxDQUFBO0FBR0gsZ0JBQUE7QUFBQSxFQUE1QyxTQUFTLEVBQUUsV0FBVyxhQUFhO0FBQUEsR0FQekIscUJBT2tDLFdBQUEsWUFBQSxDQUFBO0FBR0EsZ0JBQUE7QUFBQSxFQUE1QyxTQUFTLEVBQUUsV0FBVyxhQUFhO0FBQUEsR0FWekIscUJBVWtDLFdBQUEsWUFBQSxDQUFBO0FBVmxDLHVCQUFOLGdCQUFBO0FBQUEsRUFETixjQUFjLGlCQUFpQjtBQUFBLEdBQ25CLG9CQUFBOyJ9
@@ -1,20 +0,0 @@
1
- import { SbbLinkBaseElement } from '@sbb-esta/lyne-elements/core/base-elements.js';
2
- import { CSSResultGroup, TemplateResult } from 'lit';
3
-
4
- /**
5
- * It displays an image and a chip with a text.
6
- *
7
- * @slot chip - Link content of the panel
8
- * @slot image - The background image that can be a `sbb-image`
9
- */
10
- export declare class SbbTeaserPaidElement extends SbbLinkBaseElement {
11
- static styles: CSSResultGroup;
12
- private _chipSlotChanged;
13
- protected renderTemplate(): TemplateResult;
14
- }
15
- declare global {
16
- interface HTMLElementTagNameMap {
17
- 'sbb-teaser-paid': SbbTeaserPaidElement;
18
- }
19
- }
20
- //# sourceMappingURL=teaser-paid.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"teaser-paid.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/teaser-paid/teaser-paid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACnF,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKrE;;;;;GAKG;AACH,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,gBAAgB;cAIL,cAAc,IAAI,cAAc;CAMpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
@@ -1,2 +0,0 @@
1
- export * from './teaser-paid/teaser-paid.js';
2
- //# sourceMappingURL=teaser-paid.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"teaser-paid.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/teaser-paid.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
@@ -1,97 +0,0 @@
1
- import { SbbLinkBaseElement } from "@sbb-esta/lyne-elements/core/base-elements.js";
2
- import { css, html } from "lit";
3
- import { customElement } from "lit/decorators.js";
4
- const style = css`/**
5
- * Better font rendering (on OS X)
6
- * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
7
- *
8
- * Usage:
9
- *
10
- * .var_dark_on_light {
11
- * @include font-smoothing;
12
- * }
13
- * .var_light_on_dark {
14
- * @include font-smoothing-reset;
15
- * }
16
- */
17
- /** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
18
- /*
19
- * SBB table mixin
20
- * Notes:
21
- * We cannot use \`border-collapse\` because it is not compatible with the \`border-radius\` property.
22
- * Therefore, we have to build the grid avoiding double borders.
23
- */
24
- *,
25
- ::before,
26
- ::after {
27
- box-sizing: border-box;
28
- }
29
-
30
- :host {
31
- display: block;
32
- outline: none !important;
33
- --sbb-teaser-paid-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto
34
- var(--sbb-spacing-responsive-xxxs);
35
- --sbb-teaser-paid-brightness-hover: 1.075;
36
- --sbb-teaser-paid-animation-duration: var(
37
- --sbb-disable-animation-zero-time,
38
- var(--sbb-animation-duration-4x)
39
- );
40
- --sbb-teaser-paid-animation-easing: var(--sbb-animation-easing);
41
- }
42
-
43
- @media (any-hover: hover) {
44
- :host(:hover) {
45
- --sbb-teaser-paid-brightness: var(--sbb-teaser-paid-brightness-hover);
46
- }
47
- }
48
- .sbb-teaser-paid {
49
- position: relative;
50
- display: block;
51
- }
52
- :host(:not([data-focus-origin=mouse], [data-focus-origin=touch])) .sbb-teaser-paid:focus-visible {
53
- outline-offset: var(--sbb-focus-outline-offset);
54
- outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
55
- }
56
-
57
- ::slotted([slot=chip]) {
58
- position: absolute;
59
- inset: var(--sbb-teaser-paid-chip-inset);
60
- z-index: 1;
61
- }
62
-
63
- ::slotted([slot=image]) {
64
- will-change: filter;
65
- filter: brightness(var(--sbb-teaser-paid-brightness, 1));
66
- transition: filter var(--sbb-teaser-paid-animation-duration) var(--sbb-teaser-paid-animation-easing);
67
- }`;
68
- var __defProp = Object.defineProperty;
69
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
70
- var __decorateClass = (decorators, target, key, kind) => {
71
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
72
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
73
- if (decorator = decorators[i])
74
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
75
- if (kind && result) __defProp(target, key, result);
76
- return result;
77
- };
78
- let SbbTeaserPaidElement = class extends SbbLinkBaseElement {
79
- _chipSlotChanged() {
80
- var _a;
81
- (_a = this.querySelector("sbb-chip")) == null ? void 0 : _a.setAttribute("color", "charcoal");
82
- }
83
- renderTemplate() {
84
- return html`
85
- <slot name="chip" @slotchange=${() => this._chipSlotChanged()}></slot>
86
- <slot name="image"></slot>
87
- `;
88
- }
89
- };
90
- SbbTeaserPaidElement.styles = style;
91
- SbbTeaserPaidElement = __decorateClass([
92
- customElement("sbb-teaser-paid")
93
- ], SbbTeaserPaidElement);
94
- export {
95
- SbbTeaserPaidElement
96
- };
97
- //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLXBhaWQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy1leHBlcmltZW50YWwvdGVhc2VyLXBhaWQvdGVhc2VyLXBhaWQudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgU2JiTGlua0Jhc2VFbGVtZW50IH0gZnJvbSAnQHNiYi1lc3RhL2x5bmUtZWxlbWVudHMvY29yZS9iYXNlLWVsZW1lbnRzLmpzJztcbmltcG9ydCB7IGh0bWwsIHR5cGUgQ1NTUmVzdWx0R3JvdXAsIHR5cGUgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vdGVhc2VyLXBhaWQuc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBhbiBpbWFnZSBhbmQgYSBjaGlwIHdpdGggYSB0ZXh0LlxuICpcbiAqIEBzbG90IGNoaXAgLSBMaW5rIGNvbnRlbnQgb2YgdGhlIHBhbmVsXG4gKiBAc2xvdCBpbWFnZSAtIFRoZSBiYWNrZ3JvdW5kIGltYWdlIHRoYXQgY2FuIGJlIGEgYHNiYi1pbWFnZWBcbiAqL1xuQGN1c3RvbUVsZW1lbnQoJ3NiYi10ZWFzZXItcGFpZCcpXG5leHBvcnQgY2xhc3MgU2JiVGVhc2VyUGFpZEVsZW1lbnQgZXh0ZW5kcyBTYmJMaW5rQmFzZUVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBzdHlsZTtcblxuICBwcml2YXRlIF9jaGlwU2xvdENoYW5nZWQoKTogdm9pZCB7XG4gICAgdGhpcy5xdWVyeVNlbGVjdG9yKCdzYmItY2hpcCcpPy5zZXRBdHRyaWJ1dGUoJ2NvbG9yJywgJ2NoYXJjb2FsJyk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyVGVtcGxhdGUoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPHNsb3QgbmFtZT1cImNoaXBcIiBAc2xvdGNoYW5nZT0keygpID0+IHRoaXMuX2NoaXBTbG90Q2hhbmdlZCgpfT48L3Nsb3Q+XG4gICAgICA8c2xvdCBuYW1lPVwiaW1hZ2VcIj48L3Nsb3Q+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXRlYXNlci1wYWlkJzogU2JiVGVhc2VyUGFpZEVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQWFhLElBQUEsdUJBQU4sY0FBbUMsbUJBQW1CO0FBQUEsRUFHbkQsbUJBQXlCOztBQUMvQixlQUFLLGNBQWMsVUFBVSxNQUE3QixtQkFBZ0MsYUFBYSxTQUFTO0FBQUEsRUFDeEQ7QUFBQSxFQUVtQixpQkFBaUM7QUFDM0MsV0FBQTtBQUFBLHNDQUMyQixNQUFNLEtBQUssa0JBQWtCO0FBQUE7QUFBQTtBQUFBLEVBR2pFO0FBQ0Y7QUFiYSxxQkFDWSxTQUF5QjtBQURyQyx1QkFBTixnQkFBQTtBQUFBLEVBRE4sY0FBYyxpQkFBaUI7QUFBQSxHQUNuQixvQkFBQTsifQ==
@@ -1,26 +0,0 @@
1
- import { SbbLinkBaseElement } from '@sbb-esta/lyne-elements/core/base-elements.js';
2
- import { CSSResultGroup, TemplateResult } from 'lit';
3
-
4
- /**
5
- * It displays an image and an action call within a panel.
6
- *
7
- * @slot - Use the unnamed slot to add text content to the panel
8
- * @slot link-content - Link content of the panel
9
- * @slot image - The background image that can be a `sbb-image`
10
- */
11
- export declare class SbbTeaserHeroElement extends SbbLinkBaseElement {
12
- static styles: CSSResultGroup;
13
- /** Panel link text. */
14
- linkContent?: string;
15
- /** Image src will be passed to `sbb-image`. */
16
- imageSrc?: string;
17
- /** Image alt text will be passed to `sbb-image`. */
18
- imageAlt?: string;
19
- protected renderTemplate(): TemplateResult;
20
- }
21
- declare global {
22
- interface HTMLElementTagNameMap {
23
- 'sbb-teaser-hero': SbbTeaserHeroElement;
24
- }
25
- }
26
- //# sourceMappingURL=teaser-hero.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/teaser-hero/teaser-hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACnF,OAAO,EAAE,KAAK,cAAc,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMxE,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mDAAmD,CAAC;AAE3D;;;;;;GAMG;AACH,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,uBAAuB;IACyB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErE,+CAA+C;IACF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE/D,oDAAoD;IACP,QAAQ,CAAC,EAAE,MAAM,CAAC;cAE5C,cAAc,IAAI,cAAc;CAyBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
package/teaser-hero.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from './teaser-hero/teaser-hero.js';
2
- //# sourceMappingURL=teaser-hero.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../src/elements-experimental/teaser-hero.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
package/teaser-hero.js DELETED
@@ -1,51 +0,0 @@
1
- import { SbbLinkBaseElement as g } from "@sbb-esta/lyne-elements/core/base-elements.js";
2
- import { css as m, nothing as b } from "lit";
3
- import { property as p, customElement as c } from "lit/decorators.js";
4
- import { html as l } from "lit/static-html.js";
5
- import "@sbb-esta/lyne-elements/image.js";
6
- import "@sbb-esta/lyne-elements/link/block-link-static.js";
7
- const v = m`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-panel-width: 13.9375rem;--sbb-panel-inner-height: 10.4375rem;--sbb-panel-triangle-height: 2.0625rem;--sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));--sbb-panel-line-height: var(--sbb-typo-line-height-titles);--sbb-panel-font-size: var(--sbb-typo-scale-1-5x);--sbb-panel-color: var(--sbb-color-white);--sbb-panel-background-color: var(--sbb-color-red-alpha-90);--sbb-panel-background-color-hover: var(--sbb-color-red);--sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);--sbb-panel-gap: var(--sbb-spacing-responsive-xs);--sbb-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-panel-animation-easing: var(--sbb-animation-easing);--sbb-teaser-hero-brightness-hover: 1.075}@media (min-width: 52.5rem){:host{--sbb-panel-width: 20.0625rem;--sbb-panel-inner-height: 15.006875rem;--sbb-panel-triangle-height: 2.965625rem;--sbb-panel-font-size: var(--sbb-typo-scale-2x)}}@media (min-width: 64rem){:host{--sbb-panel-width: 26.75rem;--sbb-panel-inner-height: 20.02375rem;--sbb-panel-triangle-height: 3.956875rem;--sbb-panel-font-size: var(--sbb-typo-scale-2-5x);--sbb-panel-line-height: 1.2}}@media (any-hover: hover){:host(:hover){--sbb-panel-background-color: var(--sbb-panel-background-color-hover);--sbb-teaser-hero-brightness: var(--sbb-teaser-hero-brightness-hover)}}.sbb-teaser-hero{position:relative;display:block;min-height:var(--sbb-panel-height)}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-hero:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-teaser-hero__panel{position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--sbb-panel-gap);width:var(--sbb-panel-width);height:var(--sbb-panel-height);padding-block:var(--sbb-panel-triangle-height);padding-inline:var(--sbb-panel-padding-inline);clip-path:polygon(0 0,100% var(--sbb-panel-triangle-height),100% calc(100% - var(--sbb-panel-triangle-height)),0% 100%);background-color:var(--sbb-panel-background-color);transition:background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing);position:absolute;top:50%;transform:translateY(-50%);z-index:1}@media (any-hover: hover){.sbb-teaser-hero__panel:hover{--sbb-panel-background-color: var(--sbb-panel-background-color-hover)}}.sbb-teaser-hero__panel-text{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--sbb-typo-font-family);font-size:var(--sbb-panel-font-size);font-weight:300;line-height:var(--sbb-panel-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);color:var(--sbb-panel-color);-webkit-hyphens:auto;hyphens:auto;display:inline;margin:0;padding:0}.sbb-teaser-hero__panel-link{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::slotted([slot=image]),sbb-image{will-change:filter;filter:brightness(var(--sbb-teaser-hero-brightness, 1));transition:filter var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing)}`;
8
- var d = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (h, t, i, n) => {
9
- for (var e = n > 1 ? void 0 : n ? f(t, i) : t, r = h.length - 1, o; r >= 0; r--)
10
- (o = h[r]) && (e = (n ? o(t, i, e) : o(e)) || e);
11
- return n && e && d(t, i, e), e;
12
- };
13
- let a = class extends g {
14
- renderTemplate() {
15
- return l`
16
- <span class="sbb-teaser-hero__panel">
17
- <p class="sbb-teaser-hero__panel-text">
18
- <slot></slot>
19
- </p>
20
- ${this.href ? l`<sbb-block-link-static
21
- class="sbb-teaser-hero__panel-link"
22
- icon-name="chevron-small-right-small"
23
- icon-placement="end"
24
- size="m"
25
- negative
26
- >
27
- <slot name="link-content">${this.linkContent}</slot>
28
- </sbb-block-link-static>` : b}
29
- </span>
30
- <slot name="image">
31
- ${this.imageSrc ? l`<sbb-image image-src=${this.imageSrc} alt=${this.imageAlt ?? b}></sbb-image>` : b}
32
- </slot>
33
- `;
34
- }
35
- };
36
- a.styles = v;
37
- s([
38
- p({ attribute: "link-content" })
39
- ], a.prototype, "linkContent", 2);
40
- s([
41
- p({ attribute: "image-src" })
42
- ], a.prototype, "imageSrc", 2);
43
- s([
44
- p({ attribute: "image-alt" })
45
- ], a.prototype, "imageAlt", 2);
46
- a = s([
47
- c("sbb-teaser-hero")
48
- ], a);
49
- export {
50
- a as SbbTeaserHeroElement
51
- };
@@ -1,20 +0,0 @@
1
- import { SbbLinkBaseElement } from '@sbb-esta/lyne-elements/core/base-elements.js';
2
- import { CSSResultGroup, TemplateResult } from 'lit';
3
-
4
- /**
5
- * It displays an image and a chip with a text.
6
- *
7
- * @slot chip - Link content of the panel
8
- * @slot image - The background image that can be a `sbb-image`
9
- */
10
- export declare class SbbTeaserPaidElement extends SbbLinkBaseElement {
11
- static styles: CSSResultGroup;
12
- private _chipSlotChanged;
13
- protected renderTemplate(): TemplateResult;
14
- }
15
- declare global {
16
- interface HTMLElementTagNameMap {
17
- 'sbb-teaser-paid': SbbTeaserPaidElement;
18
- }
19
- }
20
- //# sourceMappingURL=teaser-paid.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"teaser-paid.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/teaser-paid/teaser-paid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACnF,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKrE;;;;;GAKG;AACH,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,gBAAgB;cAIL,cAAc,IAAI,cAAc;CAMpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
package/teaser-paid.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from './teaser-paid/teaser-paid.js';
2
- //# sourceMappingURL=teaser-paid.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"teaser-paid.d.ts","sourceRoot":"","sources":["../../src/elements-experimental/teaser-paid.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
package/teaser-paid.js DELETED
@@ -1,28 +0,0 @@
1
- import { SbbLinkBaseElement as b } from "@sbb-esta/lyne-elements/core/base-elements.js";
2
- import { css as l, html as p } from "lit";
3
- import { customElement as c } from "lit/decorators.js";
4
- const d = l`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-teaser-paid-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto var(--sbb-spacing-responsive-xxxs);--sbb-teaser-paid-brightness-hover: 1.075;--sbb-teaser-paid-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-teaser-paid-animation-easing: var(--sbb-animation-easing)}@media (any-hover: hover){:host(:hover){--sbb-teaser-paid-brightness: var(--sbb-teaser-paid-brightness-hover)}}.sbb-teaser-paid{position:relative;display:block}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-paid:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}::slotted([slot=chip]){position:absolute;inset:var(--sbb-teaser-paid-chip-inset);z-index:1}::slotted([slot=image]){will-change:filter;filter:brightness(var(--sbb-teaser-paid-brightness, 1));transition:filter var(--sbb-teaser-paid-animation-duration) var(--sbb-teaser-paid-animation-easing)}`;
5
- var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, m = (s, t, a, i) => {
6
- for (var e = i > 1 ? void 0 : i ? v(t, a) : t, o = s.length - 1, r; o >= 0; o--)
7
- (r = s[o]) && (e = (i ? r(t, a, e) : r(e)) || e);
8
- return i && e && h(t, a, e), e;
9
- };
10
- let n = class extends b {
11
- _chipSlotChanged() {
12
- var s;
13
- (s = this.querySelector("sbb-chip")) == null || s.setAttribute("color", "charcoal");
14
- }
15
- renderTemplate() {
16
- return p`
17
- <slot name="chip" @slotchange=${() => this._chipSlotChanged()}></slot>
18
- <slot name="image"></slot>
19
- `;
20
- }
21
- };
22
- n.styles = d;
23
- n = m([
24
- c("sbb-teaser-paid")
25
- ], n);
26
- export {
27
- n as SbbTeaserPaidElement
28
- };