@sbb-esta/lyne-elements 0.52.2 → 0.53.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.
- package/checkbox/checkbox/checkbox.d.ts +3 -46
- package/checkbox/checkbox/checkbox.d.ts.map +1 -1
- package/checkbox/checkbox-group/checkbox-group.d.ts +4 -2
- package/checkbox/checkbox-group/checkbox-group.d.ts.map +1 -1
- package/checkbox/checkbox-group.js +11 -8
- package/checkbox/checkbox-panel/checkbox-panel.d.ts +41 -0
- package/checkbox/checkbox-panel/checkbox-panel.d.ts.map +1 -0
- package/checkbox/checkbox-panel.d.ts +2 -0
- package/checkbox/checkbox-panel.d.ts.map +1 -0
- package/checkbox/checkbox-panel.js +67 -0
- package/checkbox/checkbox.js +26 -103
- package/checkbox/common/checkbox-common.d.ts +13 -0
- package/checkbox/common/checkbox-common.d.ts.map +1 -0
- package/checkbox/common.d.ts +2 -0
- package/checkbox/common.d.ts.map +1 -0
- package/checkbox/common.js +52 -0
- package/checkbox.d.ts +2 -0
- package/checkbox.d.ts.map +1 -1
- package/checkbox.js +2 -0
- package/core/mixins/panel-mixin.d.ts +13 -0
- package/core/mixins/panel-mixin.d.ts.map +1 -0
- package/core/mixins.d.ts +1 -0
- package/core/mixins.d.ts.map +1 -1
- package/core/mixins.js +120 -89
- package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss +1 -1
- package/core.css +1 -1
- package/custom-elements.json +8862 -6904
- package/development/checkbox/checkbox/checkbox.d.ts +3 -46
- package/development/checkbox/checkbox/checkbox.d.ts.map +1 -1
- package/development/checkbox/checkbox-group/checkbox-group.d.ts +4 -2
- package/development/checkbox/checkbox-group/checkbox-group.d.ts.map +1 -1
- package/development/checkbox/checkbox-group.js +43 -13
- package/development/checkbox/checkbox-panel/checkbox-panel.d.ts +41 -0
- package/development/checkbox/checkbox-panel/checkbox-panel.d.ts.map +1 -0
- package/development/checkbox/checkbox-panel.d.ts +2 -0
- package/development/checkbox/checkbox-panel.d.ts.map +1 -0
- package/development/checkbox/checkbox-panel.js +86 -0
- package/development/checkbox/checkbox.js +19 -239
- package/development/checkbox/common/checkbox-common.d.ts +13 -0
- package/development/checkbox/common/checkbox-common.d.ts.map +1 -0
- package/development/checkbox/common.d.ts +2 -0
- package/development/checkbox/common.d.ts.map +1 -0
- package/development/checkbox/common.js +156 -0
- package/development/checkbox.d.ts +2 -0
- package/development/checkbox.d.ts.map +1 -1
- package/development/checkbox.js +3 -1
- package/development/core/mixins/panel-mixin.d.ts +13 -0
- package/development/core/mixins/panel-mixin.d.ts.map +1 -0
- package/development/core/mixins.d.ts +1 -0
- package/development/core/mixins.d.ts.map +1 -1
- package/development/core/mixins.js +187 -31
- package/development/image.js +1 -1
- package/development/radio-button/common/radio-button-common.d.ts +22 -0
- package/development/radio-button/common/radio-button-common.d.ts.map +1 -0
- package/development/radio-button/common.d.ts +2 -0
- package/development/radio-button/common.d.ts.map +1 -0
- package/development/radio-button/common.js +294 -0
- package/development/radio-button/radio-button/radio-button.d.ts +2 -81
- package/development/radio-button/radio-button/radio-button.d.ts.map +1 -1
- package/development/radio-button/radio-button-group/radio-button-group.d.ts +6 -4
- package/development/radio-button/radio-button-group/radio-button-group.d.ts.map +1 -1
- package/development/radio-button/radio-button-group.js +55 -23
- package/development/radio-button/radio-button-panel/index.d.ts +2 -0
- package/development/radio-button/radio-button-panel/index.d.ts.map +1 -0
- package/development/radio-button/radio-button-panel/radio-button-panel.d.ts +29 -0
- package/development/radio-button/radio-button-panel/radio-button-panel.d.ts.map +1 -0
- package/development/radio-button/radio-button-panel.d.ts +2 -0
- package/development/radio-button/radio-button-panel.d.ts.map +1 -0
- package/development/radio-button/radio-button-panel.js +69 -0
- package/development/radio-button/radio-button.js +10 -324
- package/development/radio-button.d.ts +2 -0
- package/development/radio-button.d.ts.map +1 -1
- package/development/radio-button.js +3 -1
- package/{selection-panel/selection-panel.d.ts → development/selection-expansion-panel/selection-expansion-panel.d.ts} +9 -7
- package/development/selection-expansion-panel/selection-expansion-panel.d.ts.map +1 -0
- package/development/selection-expansion-panel.d.ts +2 -0
- package/development/selection-expansion-panel.d.ts.map +1 -0
- package/development/selection-expansion-panel.js +340 -0
- package/development/tabs/tab/index.d.ts +2 -0
- package/development/tabs/tab/index.d.ts.map +1 -0
- package/development/tabs/tab/tab.d.ts +24 -0
- package/development/tabs/tab/tab.d.ts.map +1 -0
- package/development/tabs/tab-group/tab-group.d.ts +20 -15
- package/development/tabs/tab-group/tab-group.d.ts.map +1 -1
- package/development/tabs/tab-group.js +24 -14
- package/development/tabs/{tab-title/tab-title.d.ts → tab-label/tab-label.d.ts} +4 -4
- package/development/tabs/{tab-title/tab-title.d.ts.map → tab-label/tab-label.d.ts.map} +1 -1
- package/development/tabs/tab-label.d.ts +2 -0
- package/development/tabs/tab-label.d.ts.map +1 -0
- package/development/tabs/{tab-title.js → tab-label.js} +86 -86
- package/development/tabs/tab.d.ts +2 -0
- package/development/tabs/tab.d.ts.map +1 -0
- package/development/tabs/tab.js +71 -0
- package/development/tabs.d.ts +2 -1
- package/development/tabs.d.ts.map +1 -1
- package/development/tabs.js +3 -2
- package/development/train/train-formation/train-formation.d.ts.map +1 -1
- package/development/train/train-formation.js +12 -12
- package/index.d.ts +10 -8
- package/index.js +10 -8
- package/package.json +34 -19
- package/radio-button/common/radio-button-common.d.ts +22 -0
- package/radio-button/common/radio-button-common.d.ts.map +1 -0
- package/radio-button/common.d.ts +2 -0
- package/radio-button/common.d.ts.map +1 -0
- package/radio-button/common.js +105 -0
- package/radio-button/radio-button/radio-button.d.ts +2 -81
- package/radio-button/radio-button/radio-button.d.ts.map +1 -1
- package/radio-button/radio-button-group/radio-button-group.d.ts +6 -4
- package/radio-button/radio-button-group/radio-button-group.d.ts.map +1 -1
- package/radio-button/radio-button-group.js +64 -58
- package/radio-button/radio-button-panel/index.d.ts +2 -0
- package/radio-button/radio-button-panel/index.d.ts.map +1 -0
- package/radio-button/radio-button-panel/radio-button-panel.d.ts +29 -0
- package/radio-button/radio-button-panel/radio-button-panel.d.ts.map +1 -0
- package/radio-button/radio-button-panel.d.ts +2 -0
- package/radio-button/radio-button-panel.d.ts.map +1 -0
- package/radio-button/radio-button-panel.js +59 -0
- package/radio-button/radio-button.js +20 -143
- package/radio-button.d.ts +2 -0
- package/radio-button.d.ts.map +1 -1
- package/radio-button.js +2 -0
- package/{development/selection-panel/selection-panel.d.ts → selection-expansion-panel/selection-expansion-panel.d.ts} +9 -7
- package/selection-expansion-panel/selection-expansion-panel.d.ts.map +1 -0
- package/selection-expansion-panel.d.ts +2 -0
- package/selection-expansion-panel.d.ts.map +1 -0
- package/selection-expansion-panel.js +146 -0
- package/standard-theme.css +1 -1
- package/tabs/tab/index.d.ts +2 -0
- package/tabs/tab/index.d.ts.map +1 -0
- package/tabs/tab/tab.d.ts +24 -0
- package/tabs/tab/tab.d.ts.map +1 -0
- package/tabs/tab-group/tab-group.d.ts +20 -15
- package/tabs/tab-group/tab-group.d.ts.map +1 -1
- package/tabs/tab-group.js +39 -29
- package/tabs/{tab-title/tab-title.d.ts → tab-label/tab-label.d.ts} +4 -4
- package/tabs/{tab-title/tab-title.d.ts.map → tab-label/tab-label.d.ts.map} +1 -1
- package/tabs/tab-label.d.ts +2 -0
- package/tabs/tab-label.d.ts.map +1 -0
- package/tabs/tab-label.js +51 -0
- package/tabs/tab.d.ts +2 -0
- package/tabs/tab.d.ts.map +1 -0
- package/tabs/tab.js +41 -0
- package/tabs.d.ts +2 -1
- package/tabs.d.ts.map +1 -1
- package/tabs.js +2 -1
- package/train/train-formation/train-formation.d.ts.map +1 -1
- package/train/train-formation.js +32 -32
- package/development/selection-panel/selection-panel.d.ts.map +0 -1
- package/development/selection-panel.d.ts +0 -2
- package/development/selection-panel.d.ts.map +0 -1
- package/development/selection-panel.js +0 -376
- package/development/tabs/tab-title.d.ts +0 -2
- package/development/tabs/tab-title.d.ts.map +0 -1
- package/development/teaser-hero/teaser-hero.d.ts +0 -26
- package/development/teaser-hero/teaser-hero.d.ts.map +0 -1
- package/development/teaser-hero.d.ts +0 -2
- package/development/teaser-hero.d.ts.map +0 -1
- package/development/teaser-hero.js +0 -181
- package/development/teaser-paid/teaser-paid.d.ts +0 -20
- package/development/teaser-paid/teaser-paid.d.ts.map +0 -1
- package/development/teaser-paid.d.ts +0 -2
- package/development/teaser-paid.d.ts.map +0 -1
- package/development/teaser-paid.js +0 -91
- package/selection-panel/selection-panel.d.ts.map +0 -1
- package/selection-panel.d.ts +0 -2
- package/selection-panel.d.ts.map +0 -1
- package/selection-panel.js +0 -138
- package/tabs/tab-title.d.ts +0 -2
- package/tabs/tab-title.d.ts.map +0 -1
- package/tabs/tab-title.js +0 -51
- package/teaser-hero/teaser-hero.d.ts +0 -26
- package/teaser-hero/teaser-hero.d.ts.map +0 -1
- package/teaser-hero.d.ts +0 -2
- package/teaser-hero.d.ts.map +0 -1
- package/teaser-hero.js +0 -51
- package/teaser-paid/teaser-paid.d.ts +0 -20
- package/teaser-paid/teaser-paid.d.ts.map +0 -1
- package/teaser-paid.d.ts +0 -2
- package/teaser-paid.d.ts.map +0 -1
- package/teaser-paid.js +0 -28
|
@@ -1,376 +0,0 @@
|
|
|
1
|
-
import { css, LitElement, html } from "lit";
|
|
2
|
-
import { property, state, customElement } from "lit/decorators.js";
|
|
3
|
-
import { SbbConnectedAbortController, SbbSlotStateController } from "./core/controllers.js";
|
|
4
|
-
import { EventEmitter } from "./core/eventing.js";
|
|
5
|
-
import "./divider.js";
|
|
6
|
-
const style = css`/**
|
|
7
|
-
* Better font rendering (on OS X)
|
|
8
|
-
* http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
|
|
9
|
-
*
|
|
10
|
-
* Usage:
|
|
11
|
-
*
|
|
12
|
-
* .var_dark_on_light {
|
|
13
|
-
* @include font-smoothing;
|
|
14
|
-
* }
|
|
15
|
-
* .var_light_on_dark {
|
|
16
|
-
* @include font-smoothing-reset;
|
|
17
|
-
* }
|
|
18
|
-
*/
|
|
19
|
-
/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
|
|
20
|
-
*,
|
|
21
|
-
::before,
|
|
22
|
-
::after {
|
|
23
|
-
box-sizing: border-box;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
:host {
|
|
27
|
-
--sbb-selection-panel-cursor: pointer;
|
|
28
|
-
--sbb-selection-panel-background: var(--sbb-color-white);
|
|
29
|
-
--sbb-selection-panel-border-color: var(--sbb-color-cloud);
|
|
30
|
-
--sbb-selection-panel-animation-duration: var(
|
|
31
|
-
--sbb-disable-animation-zero-time,
|
|
32
|
-
var(--sbb-animation-duration-4x)
|
|
33
|
-
);
|
|
34
|
-
--sbb-selection-panel-border-width: var(--sbb-border-width-1x);
|
|
35
|
-
--sbb-selection-panel-input-pointer-events: all;
|
|
36
|
-
--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs)
|
|
37
|
-
var(--sbb-spacing-responsive-xxs);
|
|
38
|
-
--sbb-selection-panel-content-visibility: hidden;
|
|
39
|
-
--sbb-selection-panel-content-padding-inline: var(--sbb-spacing-responsive-xxs);
|
|
40
|
-
--sbb-selection-panel-border-radius: var(--sbb-border-radius-4x);
|
|
41
|
-
--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
|
|
42
|
-
display: contents;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
:host([color=milk]) {
|
|
46
|
-
--sbb-selection-panel-background: var(--sbb-color-milk);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
:host([data-checked]:not([data-disabled])) {
|
|
50
|
-
--sbb-selection-panel-border-color: var(--sbb-color-charcoal);
|
|
51
|
-
--sbb-selection-panel-border-width: var(--sbb-border-width-2x);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
:host([data-slot-names~=content][data-disabled]) {
|
|
55
|
-
--sbb-selection-panel-input-pointer-events: none;
|
|
56
|
-
--sbb-selection-panel-border-color: var(--sbb-color-cloud);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
:host([data-disabled]) {
|
|
60
|
-
--sbb-selection-panel-cursor: default;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
:host([borderless]:not([data-checked])) {
|
|
64
|
-
--sbb-selection-panel-border-color: transparent;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
:host([data-resize-disable-animation]) {
|
|
68
|
-
--sbb-disable-animation-time: 0.1ms;
|
|
69
|
-
--sbb-disable-animation-zero-time: 0s;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
:host([data-slot-names~=content]:where([data-state=opening], [data-state=opened])) {
|
|
73
|
-
--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs)
|
|
74
|
-
var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxs)
|
|
75
|
-
var(--sbb-spacing-responsive-xxs);
|
|
76
|
-
--sbb-selection-panel-content-visibility: visible;
|
|
77
|
-
--sbb-selection-panel-content-grid-template-rows: 1fr;
|
|
78
|
-
--sbb-selection-panel-content-opacity: 1;
|
|
79
|
-
--sbb-selection-panel-content-padding-block-end: var(--sbb-spacing-responsive-xs);
|
|
80
|
-
--sbb-selection-panel-content-transition: grid-template-rows
|
|
81
|
-
var(--sbb-selection-panel-animation-duration) var(--sbb-animation-easing),
|
|
82
|
-
opacity var(--sbb-selection-panel-animation-duration)
|
|
83
|
-
var(--sbb-selection-panel-animation-duration) var(--sbb-animation-easing);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.sbb-selection-panel {
|
|
87
|
-
flex: auto;
|
|
88
|
-
position: relative;
|
|
89
|
-
width: 100%;
|
|
90
|
-
background-color: var(--sbb-selection-panel-background);
|
|
91
|
-
border-radius: var(--sbb-selection-panel-border-radius);
|
|
92
|
-
box-shadow: inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);
|
|
93
|
-
transition-duration: var(--sbb-selection-panel-animation-duration);
|
|
94
|
-
transition-timing-function: var(--sbb-animation-easing);
|
|
95
|
-
transition-property: box-shadow;
|
|
96
|
-
}
|
|
97
|
-
@media (forced-colors: active) {
|
|
98
|
-
.sbb-selection-panel::after {
|
|
99
|
-
content: "";
|
|
100
|
-
display: block;
|
|
101
|
-
position: absolute;
|
|
102
|
-
inset: 0;
|
|
103
|
-
pointer-events: none;
|
|
104
|
-
border: var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);
|
|
105
|
-
border-radius: var(--sbb-selection-panel-border-radius);
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.sbb-selection-panel__badge {
|
|
110
|
-
user-select: none;
|
|
111
|
-
pointer-events: none;
|
|
112
|
-
position: absolute;
|
|
113
|
-
inset: 0;
|
|
114
|
-
border-radius: var(--sbb-selection-panel-border-radius);
|
|
115
|
-
overflow: hidden;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.sbb-selection-panel__content--wrapper {
|
|
119
|
-
display: grid;
|
|
120
|
-
visibility: var(--sbb-selection-panel-content-visibility);
|
|
121
|
-
grid-template-rows: 0fr;
|
|
122
|
-
opacity: 0;
|
|
123
|
-
}
|
|
124
|
-
:host([data-state=opened]) .sbb-selection-panel__content--wrapper {
|
|
125
|
-
grid-template-rows: 1fr;
|
|
126
|
-
opacity: 1;
|
|
127
|
-
}
|
|
128
|
-
:host([data-state=opening]) .sbb-selection-panel__content--wrapper {
|
|
129
|
-
animation-name: open, open-opacity;
|
|
130
|
-
animation-fill-mode: forwards;
|
|
131
|
-
animation-duration: var(--sbb-selection-panel-animation-duration);
|
|
132
|
-
animation-timing-function: var(--sbb-animation-easing);
|
|
133
|
-
animation-delay: 0s, var(--sbb-selection-panel-animation-duration);
|
|
134
|
-
}
|
|
135
|
-
:host([data-state=closing]) .sbb-selection-panel__content--wrapper {
|
|
136
|
-
animation-name: close;
|
|
137
|
-
animation-duration: var(--sbb-selection-panel-animation-duration);
|
|
138
|
-
animation-timing-function: var(--sbb-animation-easing);
|
|
139
|
-
}
|
|
140
|
-
:host(:not([data-slot-names~=content])) .sbb-selection-panel__content--wrapper {
|
|
141
|
-
display: none;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.sbb-selection-panel__content {
|
|
145
|
-
overflow: hidden;
|
|
146
|
-
padding-inline: var(--sbb-selection-panel-content-padding-inline);
|
|
147
|
-
padding-block-end: var(--sbb-selection-panel-content-padding-block-end);
|
|
148
|
-
transition: padding var(--sbb-selection-panel-animation-duration) var(--sbb-animation-easing);
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
sbb-divider {
|
|
152
|
-
margin-block-end: var(--sbb-spacing-responsive-xxs);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
::slotted(sbb-radio-button),
|
|
156
|
-
::slotted(sbb-checkbox) {
|
|
157
|
-
cursor: var(--sbb-selection-panel-cursor);
|
|
158
|
-
pointer-events: var(--sbb-selection-panel-input-pointer-events);
|
|
159
|
-
display: block;
|
|
160
|
-
padding: var(--sbb-selection-panel-input-padding);
|
|
161
|
-
transition-duration: var(--sbb-selection-panel-animation-duration);
|
|
162
|
-
transition-timing-function: var(--sbb-animation-easing);
|
|
163
|
-
transition-property: padding;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
@keyframes open {
|
|
167
|
-
from {
|
|
168
|
-
grid-template-rows: 0fr;
|
|
169
|
-
}
|
|
170
|
-
to {
|
|
171
|
-
grid-template-rows: 1fr;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
@keyframes open-opacity {
|
|
175
|
-
from {
|
|
176
|
-
opacity: 0;
|
|
177
|
-
}
|
|
178
|
-
to {
|
|
179
|
-
opacity: 1;
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
@keyframes close {
|
|
183
|
-
from {
|
|
184
|
-
grid-template-rows: 1fr;
|
|
185
|
-
opacity: 1;
|
|
186
|
-
}
|
|
187
|
-
to {
|
|
188
|
-
grid-template-rows: 0fr;
|
|
189
|
-
opacity: 0;
|
|
190
|
-
}
|
|
191
|
-
}`;
|
|
192
|
-
var __defProp = Object.defineProperty;
|
|
193
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
194
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
195
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
196
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
197
|
-
if (decorator = decorators[i])
|
|
198
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
199
|
-
if (kind && result) __defProp(target, key, result);
|
|
200
|
-
return result;
|
|
201
|
-
};
|
|
202
|
-
let SbbSelectionPanelElement = class extends LitElement {
|
|
203
|
-
constructor() {
|
|
204
|
-
super();
|
|
205
|
-
this.color = "white";
|
|
206
|
-
this.forceOpen = false;
|
|
207
|
-
this.borderless = false;
|
|
208
|
-
this._willOpen = new EventEmitter(
|
|
209
|
-
this,
|
|
210
|
-
SbbSelectionPanelElement.events.willOpen
|
|
211
|
-
);
|
|
212
|
-
this._didOpen = new EventEmitter(
|
|
213
|
-
this,
|
|
214
|
-
SbbSelectionPanelElement.events.didOpen
|
|
215
|
-
);
|
|
216
|
-
this._willClose = new EventEmitter(
|
|
217
|
-
this,
|
|
218
|
-
SbbSelectionPanelElement.events.willClose
|
|
219
|
-
);
|
|
220
|
-
this._didClose = new EventEmitter(
|
|
221
|
-
this,
|
|
222
|
-
SbbSelectionPanelElement.events.didClose
|
|
223
|
-
);
|
|
224
|
-
this._abort = new SbbConnectedAbortController(this);
|
|
225
|
-
this._initialized = false;
|
|
226
|
-
new SbbSlotStateController(this);
|
|
227
|
-
}
|
|
228
|
-
set _state(state2) {
|
|
229
|
-
this.setAttribute("data-state", state2);
|
|
230
|
-
}
|
|
231
|
-
get _state() {
|
|
232
|
-
return this.getAttribute("data-state");
|
|
233
|
-
}
|
|
234
|
-
/** Whether the selection panel is checked. */
|
|
235
|
-
set _checked(checked) {
|
|
236
|
-
this.toggleAttribute("data-checked", checked);
|
|
237
|
-
}
|
|
238
|
-
get _checked() {
|
|
239
|
-
return this.hasAttribute("data-checked");
|
|
240
|
-
}
|
|
241
|
-
/** Whether the selection panel is disabled. */
|
|
242
|
-
set _disabled(disabled) {
|
|
243
|
-
this.toggleAttribute("data-disabled", disabled);
|
|
244
|
-
}
|
|
245
|
-
/**
|
|
246
|
-
* Whether it has an expandable content
|
|
247
|
-
* @internal
|
|
248
|
-
*/
|
|
249
|
-
get hasContent() {
|
|
250
|
-
var _a;
|
|
251
|
-
return ((_a = this.querySelectorAll) == null ? void 0 : _a.call(this, '[slot="content"]').length) > 0;
|
|
252
|
-
}
|
|
253
|
-
connectedCallback() {
|
|
254
|
-
super.connectedCallback();
|
|
255
|
-
this._state || (this._state = "closed");
|
|
256
|
-
const signal = this._abort.signal;
|
|
257
|
-
this.addEventListener("stateChange", this._onInputStateChange.bind(this), { signal });
|
|
258
|
-
this.addEventListener("checkboxLoaded", this._initFromInput.bind(this), { signal });
|
|
259
|
-
this.addEventListener("radioButtonLoaded", this._initFromInput.bind(this), { signal });
|
|
260
|
-
}
|
|
261
|
-
willUpdate(changedProperties) {
|
|
262
|
-
super.willUpdate(changedProperties);
|
|
263
|
-
if (changedProperties.has("forceOpen")) {
|
|
264
|
-
this._updateState();
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
firstUpdated(changedProperties) {
|
|
268
|
-
super.firstUpdated(changedProperties);
|
|
269
|
-
this._initialized = true;
|
|
270
|
-
}
|
|
271
|
-
_updateState() {
|
|
272
|
-
if (!this.hasContent) {
|
|
273
|
-
return;
|
|
274
|
-
}
|
|
275
|
-
this.forceOpen || this._checked ? this._open(!this._initialized) : this._close();
|
|
276
|
-
}
|
|
277
|
-
_open(skipAnimation = false) {
|
|
278
|
-
if (this._state !== "closed" && this._state !== "closing") {
|
|
279
|
-
return;
|
|
280
|
-
}
|
|
281
|
-
this._state = "opening";
|
|
282
|
-
this._willOpen.emit();
|
|
283
|
-
if (skipAnimation) {
|
|
284
|
-
this._state = "opened";
|
|
285
|
-
this._didOpen.emit();
|
|
286
|
-
}
|
|
287
|
-
}
|
|
288
|
-
_close() {
|
|
289
|
-
if (this._state !== "opened" && this._state !== "opening") {
|
|
290
|
-
return;
|
|
291
|
-
}
|
|
292
|
-
this._state = "closing";
|
|
293
|
-
this._willClose.emit();
|
|
294
|
-
}
|
|
295
|
-
_initFromInput(event) {
|
|
296
|
-
const input = event.target;
|
|
297
|
-
if (!input.isSelectionPanelInput) {
|
|
298
|
-
return;
|
|
299
|
-
}
|
|
300
|
-
this._checked = input.checked;
|
|
301
|
-
this._disabled = input.disabled;
|
|
302
|
-
this._updateState();
|
|
303
|
-
}
|
|
304
|
-
_onInputStateChange(event) {
|
|
305
|
-
const input = event.target;
|
|
306
|
-
if (!input.isSelectionPanelInput) {
|
|
307
|
-
return;
|
|
308
|
-
}
|
|
309
|
-
if (event.detail.type === "disabled") {
|
|
310
|
-
this._disabled = event.detail.disabled;
|
|
311
|
-
return;
|
|
312
|
-
} else if (event.detail.type !== "checked") {
|
|
313
|
-
return;
|
|
314
|
-
}
|
|
315
|
-
this._checked = event.detail.checked;
|
|
316
|
-
this._updateState();
|
|
317
|
-
}
|
|
318
|
-
_onAnimationEnd(event) {
|
|
319
|
-
if (event.animationName === "open-opacity" && this._state === "opening") {
|
|
320
|
-
this._state = "opened";
|
|
321
|
-
this._didOpen.emit();
|
|
322
|
-
} else if (event.animationName === "close" && this._state === "closing") {
|
|
323
|
-
this._state = "closed";
|
|
324
|
-
this._didClose.emit();
|
|
325
|
-
}
|
|
326
|
-
}
|
|
327
|
-
render() {
|
|
328
|
-
return html`
|
|
329
|
-
<div class="sbb-selection-panel">
|
|
330
|
-
<div class="sbb-selection-panel__badge">
|
|
331
|
-
<slot name="badge"></slot>
|
|
332
|
-
</div>
|
|
333
|
-
|
|
334
|
-
<div class="sbb-selection-panel__input">
|
|
335
|
-
<slot></slot>
|
|
336
|
-
</div>
|
|
337
|
-
<div
|
|
338
|
-
class="sbb-selection-panel__content--wrapper"
|
|
339
|
-
.inert=${this._state !== "opened"}
|
|
340
|
-
@animationend=${(event) => this._onAnimationEnd(event)}
|
|
341
|
-
>
|
|
342
|
-
<div class="sbb-selection-panel__content">
|
|
343
|
-
<sbb-divider></sbb-divider>
|
|
344
|
-
<slot name="content"></slot>
|
|
345
|
-
</div>
|
|
346
|
-
</div>
|
|
347
|
-
</div>
|
|
348
|
-
`;
|
|
349
|
-
}
|
|
350
|
-
};
|
|
351
|
-
SbbSelectionPanelElement.styles = style;
|
|
352
|
-
SbbSelectionPanelElement.events = {
|
|
353
|
-
willOpen: "willOpen",
|
|
354
|
-
didOpen: "didOpen",
|
|
355
|
-
willClose: "willClose",
|
|
356
|
-
didClose: "didClose"
|
|
357
|
-
};
|
|
358
|
-
__decorateClass([
|
|
359
|
-
property()
|
|
360
|
-
], SbbSelectionPanelElement.prototype, "color", 2);
|
|
361
|
-
__decorateClass([
|
|
362
|
-
property({ attribute: "force-open", type: Boolean })
|
|
363
|
-
], SbbSelectionPanelElement.prototype, "forceOpen", 2);
|
|
364
|
-
__decorateClass([
|
|
365
|
-
property({ reflect: true, type: Boolean })
|
|
366
|
-
], SbbSelectionPanelElement.prototype, "borderless", 2);
|
|
367
|
-
__decorateClass([
|
|
368
|
-
state()
|
|
369
|
-
], SbbSelectionPanelElement.prototype, "_state", 1);
|
|
370
|
-
SbbSelectionPanelElement = __decorateClass([
|
|
371
|
-
customElement("sbb-selection-panel")
|
|
372
|
-
], SbbSelectionPanelElement);
|
|
373
|
-
export {
|
|
374
|
-
SbbSelectionPanelElement
|
|
375
|
-
};
|
|
376
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0aW9uLXBhbmVsLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvc2VsZWN0aW9uLXBhbmVsL3NlbGVjdGlvbi1wYW5lbC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBQcm9wZXJ0eVZhbHVlcywgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgaHRtbCwgTGl0RWxlbWVudCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50LCBwcm9wZXJ0eSwgc3RhdGUgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB0eXBlIHsgU2JiQ2hlY2tib3hFbGVtZW50IH0gZnJvbSAnLi4vY2hlY2tib3guanMnO1xuaW1wb3J0IHsgU2JiQ29ubmVjdGVkQWJvcnRDb250cm9sbGVyLCBTYmJTbG90U3RhdGVDb250cm9sbGVyIH0gZnJvbSAnLi4vY29yZS9jb250cm9sbGVycy5qcyc7XG5pbXBvcnQgeyBFdmVudEVtaXR0ZXIgfSBmcm9tICcuLi9jb3JlL2V2ZW50aW5nLmpzJztcbmltcG9ydCB0eXBlIHsgU2JiT3BlbmVkQ2xvc2VkU3RhdGUsIFNiYlN0YXRlQ2hhbmdlIH0gZnJvbSAnLi4vY29yZS9pbnRlcmZhY2VzLmpzJztcbmltcG9ydCB0eXBlIHsgU2JiUmFkaW9CdXR0b25FbGVtZW50IH0gZnJvbSAnLi4vcmFkaW8tYnV0dG9uLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vc2VsZWN0aW9uLXBhbmVsLnNjc3M/bGl0JmlubGluZSc7XG5cbmltcG9ydCAnLi4vZGl2aWRlci5qcyc7XG5cbi8qKlxuICogSXQgZGlzcGxheXMgYW4gZXhwYW5kYWJsZSBwYW5lbCBjb25uZWN0ZWQgdG8gYSBgc2JiLWNoZWNrYm94YCBvciB0byBhIGBzYmItcmFkaW8tYnV0dG9uYC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCBgc2JiLWNoZWNrYm94YCBvciBgc2JiLXJhZGlvLWJ1dHRvbmAgZWxlbWVudHMgdG8gdGhlIGBzYmItc2VsZWN0aW9uLXBhbmVsYC5cbiAqIEBzbG90IGJhZGdlIC0gVXNlIHRoaXMgc2xvdCB0byBwcm92aWRlIGEgYHNiYi1jYXJkLWJhZGdlYCAob3B0aW9uYWwpLlxuICogQHNsb3QgY29udGVudCAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBjdXN0b20gY29udGVudCBmb3IgdGhlIHBhbmVsIChvcHRpb25hbCkuXG4gKiBAZXZlbnQge0N1c3RvbUV2ZW50PHZvaWQ+fSB3aWxsT3BlbiAtIEVtaXRzIHdoZW5ldmVyIHRoZSBjb250ZW50IHNlY3Rpb24gc3RhcnRzIHRoZSBvcGVuaW5nIHRyYW5zaXRpb24uXG4gKiBAZXZlbnQge0N1c3RvbUV2ZW50PHZvaWQ+fSBkaWRPcGVuIC0gRW1pdHMgd2hlbmV2ZXIgdGhlIGNvbnRlbnQgc2VjdGlvbiBpcyBvcGVuZWQuXG4gKiBAZXZlbnQge0N1c3RvbUV2ZW50PHZvaWQ+fSB3aWxsQ2xvc2UgLSBFbWl0cyB3aGVuZXZlciB0aGUgY29udGVudCBzZWN0aW9uIGJlZ2lucyB0aGUgY2xvc2luZyB0cmFuc2l0aW9uLlxuICogQGV2ZW50IHtDdXN0b21FdmVudDx2b2lkPn0gZGlkQ2xvc2UgLSBFbWl0cyB3aGVuZXZlciB0aGUgY29udGVudCBzZWN0aW9uIGlzIGNsb3NlZC5cbiAqL1xuQGN1c3RvbUVsZW1lbnQoJ3NiYi1zZWxlY3Rpb24tcGFuZWwnKVxuZXhwb3J0IGNsYXNzIFNiYlNlbGVjdGlvblBhbmVsRWxlbWVudCBleHRlbmRzIExpdEVsZW1lbnQge1xuICAvLyBGSVhNRSBpbmhlcml0aW5nIGZyb20gU2JiT3BlbkNsb3NlQmFzZUVsZW1lbnQgcmVxdWlyZXM6IGh0dHBzOi8vZ2l0aHViLmNvbS9vcGVuLXdjL2N1c3RvbS1lbGVtZW50cy1tYW5pZmVzdC9pc3N1ZXMvMjUzXG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IHN0eWxlO1xuICBwdWJsaWMgc3RhdGljIHJlYWRvbmx5IGV2ZW50czogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHtcbiAgICB3aWxsT3BlbjogJ3dpbGxPcGVuJyxcbiAgICBkaWRPcGVuOiAnZGlkT3BlbicsXG4gICAgd2lsbENsb3NlOiAnd2lsbENsb3NlJyxcbiAgICBkaWRDbG9zZTogJ2RpZENsb3NlJyxcbiAgfSBhcyBjb25zdDtcblxuICAvKiogVGhlIGJhY2tncm91bmQgY29sb3Igb2YgdGhlIHBhbmVsLiAqL1xuICBAcHJvcGVydHkoKSBwdWJsaWMgY29sb3I6ICd3aGl0ZScgfCAnbWlsaycgPSAnd2hpdGUnO1xuXG4gIC8qKiBXaGV0aGVyIHRoZSBjb250ZW50IHNlY3Rpb24gaXMgYWx3YXlzIHZpc2libGUuICovXG4gIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogJ2ZvcmNlLW9wZW4nLCB0eXBlOiBCb29sZWFuIH0pIHB1YmxpYyBmb3JjZU9wZW4gPSBmYWxzZTtcblxuICAvKiogV2hldGhlciB0aGUgdW5zZWxlY3RlZCBwYW5lbCBoYXMgYSBib3JkZXIuICovXG4gIEBwcm9wZXJ0eSh7IHJlZmxlY3Q6IHRydWUsIHR5cGU6IEJvb2xlYW4gfSkgcHVibGljIGJvcmRlcmxlc3MgPSBmYWxzZTtcblxuICAvKiogVGhlIHN0YXRlIG9mIHRoZSBzZWxlY3Rpb24gcGFuZWwuICovXG4gIEBzdGF0ZSgpXG4gIHByaXZhdGUgc2V0IF9zdGF0ZShzdGF0ZTogU2JiT3BlbmVkQ2xvc2VkU3RhdGUpIHtcbiAgICB0aGlzLnNldEF0dHJpYnV0ZSgnZGF0YS1zdGF0ZScsIHN0YXRlKTtcbiAgfVxuICBwcml2YXRlIGdldCBfc3RhdGUoKTogU2JiT3BlbmVkQ2xvc2VkU3RhdGUge1xuICAgIHJldHVybiB0aGlzLmdldEF0dHJpYnV0ZSgnZGF0YS1zdGF0ZScpIGFzIFNiYk9wZW5lZENsb3NlZFN0YXRlO1xuICB9XG5cbiAgLyoqIFdoZXRoZXIgdGhlIHNlbGVjdGlvbiBwYW5lbCBpcyBjaGVja2VkLiAqL1xuICBwcml2YXRlIHNldCBfY2hlY2tlZChjaGVja2VkOiBib29sZWFuKSB7XG4gICAgdGhpcy50b2dnbGVBdHRyaWJ1dGUoJ2RhdGEtY2hlY2tlZCcsIGNoZWNrZWQpO1xuICB9XG4gIHByaXZhdGUgZ2V0IF9jaGVja2VkKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLmhhc0F0dHJpYnV0ZSgnZGF0YS1jaGVja2VkJyk7XG4gIH1cblxuICAvKiogV2hldGhlciB0aGUgc2VsZWN0aW9uIHBhbmVsIGlzIGRpc2FibGVkLiAqL1xuICBwcml2YXRlIHNldCBfZGlzYWJsZWQoZGlzYWJsZWQ6IGJvb2xlYW4pIHtcbiAgICB0aGlzLnRvZ2dsZUF0dHJpYnV0ZSgnZGF0YS1kaXNhYmxlZCcsIGRpc2FibGVkKTtcbiAgfVxuXG4gIC8qKiBFbWl0cyB3aGVuZXZlciB0aGUgY29udGVudCBzZWN0aW9uIHN0YXJ0cyB0aGUgb3BlbmluZyB0cmFuc2l0aW9uLiAqL1xuICBwcml2YXRlIF93aWxsT3BlbjogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcihcbiAgICB0aGlzLFxuICAgIFNiYlNlbGVjdGlvblBhbmVsRWxlbWVudC5ldmVudHMud2lsbE9wZW4sXG4gICk7XG5cbiAgLyoqIEVtaXRzIHdoZW5ldmVyIHRoZSBjb250ZW50IHNlY3Rpb24gaXMgb3BlbmVkLiAqL1xuICBwcml2YXRlIF9kaWRPcGVuOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyKFxuICAgIHRoaXMsXG4gICAgU2JiU2VsZWN0aW9uUGFuZWxFbGVtZW50LmV2ZW50cy5kaWRPcGVuLFxuICApO1xuXG4gIC8qKiBFbWl0cyB3aGVuZXZlciB0aGUgY29udGVudCBzZWN0aW9uIGJlZ2lucyB0aGUgY2xvc2luZyB0cmFuc2l0aW9uLiAqL1xuICBwcml2YXRlIF93aWxsQ2xvc2U6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXIoXG4gICAgdGhpcyxcbiAgICBTYmJTZWxlY3Rpb25QYW5lbEVsZW1lbnQuZXZlbnRzLndpbGxDbG9zZSxcbiAgKTtcblxuICAvKiogRW1pdHMgd2hlbmV2ZXIgdGhlIGNvbnRlbnQgc2VjdGlvbiBpcyBjbG9zZWQuICovXG4gIHByaXZhdGUgX2RpZENsb3NlOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyKFxuICAgIHRoaXMsXG4gICAgU2JiU2VsZWN0aW9uUGFuZWxFbGVtZW50LmV2ZW50cy5kaWRDbG9zZSxcbiAgKTtcblxuICBwcml2YXRlIF9hYm9ydCA9IG5ldyBTYmJDb25uZWN0ZWRBYm9ydENvbnRyb2xsZXIodGhpcyk7XG4gIHByaXZhdGUgX2luaXRpYWxpemVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgaXQgaGFzIGFuIGV4cGFuZGFibGUgY29udGVudFxuICAgKiBAaW50ZXJuYWxcbiAgICovXG4gIHB1YmxpYyBnZXQgaGFzQ29udGVudCgpOiBib29sZWFuIHtcbiAgICAvLyBXZSBjYW5ub3QgdXNlIHRoZSBOYW1lZFNsb3RzIGJlY2F1c2UgaXQncyB0b28gc2xvdyB0byBpbml0aWFsaXplXG4gICAgcmV0dXJuIHRoaXMucXVlcnlTZWxlY3RvckFsbD8uKCdbc2xvdD1cImNvbnRlbnRcIl0nKS5sZW5ndGggPiAwO1xuICB9XG5cbiAgcHVibGljIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgbmV3IFNiYlNsb3RTdGF0ZUNvbnRyb2xsZXIodGhpcyk7XG4gIH1cblxuICBwdWJsaWMgb3ZlcnJpZGUgY29ubmVjdGVkQ2FsbGJhY2soKTogdm9pZCB7XG4gICAgc3VwZXIuY29ubmVjdGVkQ2FsbGJhY2soKTtcbiAgICB0aGlzLl9zdGF0ZSB8fD0gJ2Nsb3NlZCc7XG4gICAgY29uc3Qgc2lnbmFsID0gdGhpcy5fYWJvcnQuc2lnbmFsO1xuICAgIHRoaXMuYWRkRXZlbnRMaXN0ZW5lcignc3RhdGVDaGFuZ2UnLCB0aGlzLl9vbklucHV0U3RhdGVDaGFuZ2UuYmluZCh0aGlzKSwgeyBzaWduYWwgfSk7XG4gICAgdGhpcy5hZGRFdmVudExpc3RlbmVyKCdjaGVja2JveExvYWRlZCcsIHRoaXMuX2luaXRGcm9tSW5wdXQuYmluZCh0aGlzKSwgeyBzaWduYWwgfSk7XG4gICAgdGhpcy5hZGRFdmVudExpc3RlbmVyKCdyYWRpb0J1dHRvbkxvYWRlZCcsIHRoaXMuX2luaXRGcm9tSW5wdXQuYmluZCh0aGlzKSwgeyBzaWduYWwgfSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgd2lsbFVwZGF0ZShjaGFuZ2VkUHJvcGVydGllczogUHJvcGVydHlWYWx1ZXM8dGhpcz4pOiB2b2lkIHtcbiAgICBzdXBlci53aWxsVXBkYXRlKGNoYW5nZWRQcm9wZXJ0aWVzKTtcblxuICAgIGlmIChjaGFuZ2VkUHJvcGVydGllcy5oYXMoJ2ZvcmNlT3BlbicpKSB7XG4gICAgICB0aGlzLl91cGRhdGVTdGF0ZSgpO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSBmaXJzdFVwZGF0ZWQoY2hhbmdlZFByb3BlcnRpZXM6IFByb3BlcnR5VmFsdWVzPHRoaXM+KTogdm9pZCB7XG4gICAgc3VwZXIuZmlyc3RVcGRhdGVkKGNoYW5nZWRQcm9wZXJ0aWVzKTtcblxuICAgIHRoaXMuX2luaXRpYWxpemVkID0gdHJ1ZTtcbiAgfVxuXG4gIHByaXZhdGUgX3VwZGF0ZVN0YXRlKCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5oYXNDb250ZW50KSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5mb3JjZU9wZW4gfHwgdGhpcy5fY2hlY2tlZCA/IHRoaXMuX29wZW4oIXRoaXMuX2luaXRpYWxpemVkKSA6IHRoaXMuX2Nsb3NlKCk7XG4gIH1cblxuICBwcml2YXRlIF9vcGVuKHNraXBBbmltYXRpb24gPSBmYWxzZSk6IHZvaWQge1xuICAgIGlmICh0aGlzLl9zdGF0ZSAhPT0gJ2Nsb3NlZCcgJiYgdGhpcy5fc3RhdGUgIT09ICdjbG9zaW5nJykge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHRoaXMuX3N0YXRlID0gJ29wZW5pbmcnO1xuICAgIHRoaXMuX3dpbGxPcGVuLmVtaXQoKTtcblxuICAgIGlmIChza2lwQW5pbWF0aW9uKSB7XG4gICAgICB0aGlzLl9zdGF0ZSA9ICdvcGVuZWQnO1xuICAgICAgdGhpcy5fZGlkT3Blbi5lbWl0KCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBfY2xvc2UoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuX3N0YXRlICE9PSAnb3BlbmVkJyAmJiB0aGlzLl9zdGF0ZSAhPT0gJ29wZW5pbmcnKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5fc3RhdGUgPSAnY2xvc2luZyc7XG4gICAgdGhpcy5fd2lsbENsb3NlLmVtaXQoKTtcbiAgfVxuXG4gIHByaXZhdGUgX2luaXRGcm9tSW5wdXQoZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgY29uc3QgaW5wdXQgPSBldmVudC50YXJnZXQgYXMgU2JiQ2hlY2tib3hFbGVtZW50IHwgU2JiUmFkaW9CdXR0b25FbGVtZW50O1xuXG4gICAgaWYgKCFpbnB1dC5pc1NlbGVjdGlvblBhbmVsSW5wdXQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICB0aGlzLl9jaGVja2VkID0gaW5wdXQuY2hlY2tlZDtcbiAgICB0aGlzLl9kaXNhYmxlZCA9IGlucHV0LmRpc2FibGVkO1xuICAgIHRoaXMuX3VwZGF0ZVN0YXRlKCk7XG4gIH1cblxuICBwcml2YXRlIF9vbklucHV0U3RhdGVDaGFuZ2UoZXZlbnQ6IEN1c3RvbUV2ZW50PFNiYlN0YXRlQ2hhbmdlPik6IHZvaWQge1xuICAgIGNvbnN0IGlucHV0ID0gZXZlbnQudGFyZ2V0IGFzIFNiYkNoZWNrYm94RWxlbWVudCB8IFNiYlJhZGlvQnV0dG9uRWxlbWVudDtcblxuICAgIGlmICghaW5wdXQuaXNTZWxlY3Rpb25QYW5lbElucHV0KSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgaWYgKGV2ZW50LmRldGFpbC50eXBlID09PSAnZGlzYWJsZWQnKSB7XG4gICAgICB0aGlzLl9kaXNhYmxlZCA9IGV2ZW50LmRldGFpbC5kaXNhYmxlZDtcbiAgICAgIHJldHVybjtcbiAgICB9IGVsc2UgaWYgKGV2ZW50LmRldGFpbC50eXBlICE9PSAnY2hlY2tlZCcpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICB0aGlzLl9jaGVja2VkID0gZXZlbnQuZGV0YWlsLmNoZWNrZWQ7XG4gICAgdGhpcy5fdXBkYXRlU3RhdGUoKTtcbiAgfVxuXG4gIHByaXZhdGUgX29uQW5pbWF0aW9uRW5kKGV2ZW50OiBBbmltYXRpb25FdmVudCk6IHZvaWQge1xuICAgIGlmIChldmVudC5hbmltYXRpb25OYW1lID09PSAnb3Blbi1vcGFjaXR5JyAmJiB0aGlzLl9zdGF0ZSA9PT0gJ29wZW5pbmcnKSB7XG4gICAgICB0aGlzLl9zdGF0ZSA9ICdvcGVuZWQnO1xuICAgICAgdGhpcy5fZGlkT3Blbi5lbWl0KCk7XG4gICAgfSBlbHNlIGlmIChldmVudC5hbmltYXRpb25OYW1lID09PSAnY2xvc2UnICYmIHRoaXMuX3N0YXRlID09PSAnY2xvc2luZycpIHtcbiAgICAgIHRoaXMuX3N0YXRlID0gJ2Nsb3NlZCc7XG4gICAgICB0aGlzLl9kaWRDbG9zZS5lbWl0KCk7XG4gICAgfVxuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8ZGl2IGNsYXNzPVwic2JiLXNlbGVjdGlvbi1wYW5lbFwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwic2JiLXNlbGVjdGlvbi1wYW5lbF9fYmFkZ2VcIj5cbiAgICAgICAgICA8c2xvdCBuYW1lPVwiYmFkZ2VcIj48L3Nsb3Q+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJzYmItc2VsZWN0aW9uLXBhbmVsX19pbnB1dFwiPlxuICAgICAgICAgIDxzbG90Pjwvc2xvdD5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzcz1cInNiYi1zZWxlY3Rpb24tcGFuZWxfX2NvbnRlbnQtLXdyYXBwZXJcIlxuICAgICAgICAgIC5pbmVydD0ke3RoaXMuX3N0YXRlICE9PSAnb3BlbmVkJ31cbiAgICAgICAgICBAYW5pbWF0aW9uZW5kPSR7KGV2ZW50OiBBbmltYXRpb25FdmVudCkgPT4gdGhpcy5fb25BbmltYXRpb25FbmQoZXZlbnQpfVxuICAgICAgICA+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cInNiYi1zZWxlY3Rpb24tcGFuZWxfX2NvbnRlbnRcIj5cbiAgICAgICAgICAgIDxzYmItZGl2aWRlcj48L3NiYi1kaXZpZGVyPlxuICAgICAgICAgICAgPHNsb3QgbmFtZT1cImNvbnRlbnRcIj48L3Nsb3Q+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXNlbGVjdGlvbi1wYW5lbCc6IFNiYlNlbGVjdGlvblBhbmVsRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbInN0YXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUEwQmEsSUFBQSwyQkFBTixjQUF1QyxXQUFXO0FBQUEsRUE2RWhELGNBQWM7QUFD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
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tab-title.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-title.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { CSSResultGroup, TemplateResult } from 'lit';
|
|
2
|
-
import { SbbLinkBaseElement } from '../core/base-elements.js';
|
|
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/teaser-hero/teaser-hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI9D,OAAO,aAAa,CAAC;AACrB,OAAO,8BAA8B,CAAC;AAEtC;;;;;;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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser-hero.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
|
|
@@ -1,181 +0,0 @@
|
|
|
1
|
-
import { css, nothing } from "lit";
|
|
2
|
-
import { property, customElement } from "lit/decorators.js";
|
|
3
|
-
import { html } from "lit/static-html.js";
|
|
4
|
-
import { SbbLinkBaseElement } from "./core/base-elements.js";
|
|
5
|
-
import "./image.js";
|
|
6
|
-
import "./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
|
-
::before,
|
|
23
|
-
::after {
|
|
24
|
-
box-sizing: border-box;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
:host {
|
|
28
|
-
display: block;
|
|
29
|
-
outline: none !important;
|
|
30
|
-
--sbb-panel-width: 13.9375rem;
|
|
31
|
-
--sbb-panel-inner-height: 10.4375rem;
|
|
32
|
-
--sbb-panel-triangle-height: 2.0625rem;
|
|
33
|
-
--sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));
|
|
34
|
-
--sbb-panel-line-height: var(--sbb-typo-line-height-titles);
|
|
35
|
-
--sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
|
|
36
|
-
--sbb-panel-color: var(--sbb-color-white);
|
|
37
|
-
--sbb-panel-background-color: var(--sbb-color-red-alpha-90);
|
|
38
|
-
--sbb-panel-background-color-hover: var(--sbb-color-red);
|
|
39
|
-
--sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
|
|
40
|
-
--sbb-panel-gap: var(--sbb-spacing-responsive-xs);
|
|
41
|
-
--sbb-panel-animation-duration: var(
|
|
42
|
-
--sbb-disable-animation-zero-time,
|
|
43
|
-
var(--sbb-animation-duration-4x)
|
|
44
|
-
);
|
|
45
|
-
--sbb-panel-animation-easing: var(--sbb-animation-easing);
|
|
46
|
-
--sbb-teaser-hero-brightness-hover: 1.075;
|
|
47
|
-
}
|
|
48
|
-
@media (min-width: calc(52.5rem)) {
|
|
49
|
-
:host {
|
|
50
|
-
--sbb-panel-width: 20.0625rem;
|
|
51
|
-
--sbb-panel-inner-height: 15.006875rem;
|
|
52
|
-
--sbb-panel-triangle-height: 2.965625rem;
|
|
53
|
-
--sbb-panel-font-size: var(--sbb-typo-scale-2x);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
@media (min-width: calc(64rem)) {
|
|
57
|
-
:host {
|
|
58
|
-
--sbb-panel-width: 26.75rem;
|
|
59
|
-
--sbb-panel-inner-height: 20.02375rem;
|
|
60
|
-
--sbb-panel-triangle-height: 3.956875rem;
|
|
61
|
-
--sbb-panel-font-size: var(--sbb-typo-scale-2-5x);
|
|
62
|
-
--sbb-panel-line-height: 1.2;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
@media (any-hover: hover) {
|
|
67
|
-
:host(:hover) {
|
|
68
|
-
--sbb-panel-background-color: var(--sbb-panel-background-color-hover);
|
|
69
|
-
--sbb-teaser-hero-brightness: var(--sbb-teaser-hero-brightness-hover);
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
.sbb-teaser-hero {
|
|
73
|
-
position: relative;
|
|
74
|
-
display: block;
|
|
75
|
-
min-height: var(--sbb-panel-height);
|
|
76
|
-
}
|
|
77
|
-
:host(:not([data-focus-origin=mouse], [data-focus-origin=touch])) .sbb-teaser-hero:focus-visible {
|
|
78
|
-
outline-offset: var(--sbb-focus-outline-offset);
|
|
79
|
-
outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.sbb-teaser-hero__panel {
|
|
83
|
-
position: relative;
|
|
84
|
-
display: flex;
|
|
85
|
-
flex-direction: column;
|
|
86
|
-
justify-content: center;
|
|
87
|
-
gap: var(--sbb-panel-gap);
|
|
88
|
-
width: var(--sbb-panel-width);
|
|
89
|
-
height: var(--sbb-panel-height);
|
|
90
|
-
padding-block: var(--sbb-panel-triangle-height);
|
|
91
|
-
padding-inline: var(--sbb-panel-padding-inline);
|
|
92
|
-
clip-path: polygon(0 0, 100% var(--sbb-panel-triangle-height), 100% calc(100% - var(--sbb-panel-triangle-height)), 0% 100%);
|
|
93
|
-
background-color: var(--sbb-panel-background-color);
|
|
94
|
-
transition: background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing);
|
|
95
|
-
position: absolute;
|
|
96
|
-
top: 50%;
|
|
97
|
-
transform: translateY(-50%);
|
|
98
|
-
z-index: 1;
|
|
99
|
-
}
|
|
100
|
-
@media (any-hover: hover) {
|
|
101
|
-
.sbb-teaser-hero__panel:hover {
|
|
102
|
-
--sbb-panel-background-color: var(--sbb-panel-background-color-hover);
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.sbb-teaser-hero__panel-text {
|
|
107
|
-
-webkit-font-smoothing: antialiased;
|
|
108
|
-
-moz-osx-font-smoothing: grayscale;
|
|
109
|
-
font-family: var(--sbb-typo-font-family);
|
|
110
|
-
font-size: var(--sbb-panel-font-size);
|
|
111
|
-
font-weight: 300;
|
|
112
|
-
line-height: var(--sbb-panel-line-height);
|
|
113
|
-
letter-spacing: var(--sbb-typo-letter-spacing-titles);
|
|
114
|
-
color: var(--sbb-panel-color);
|
|
115
|
-
hyphens: auto;
|
|
116
|
-
display: inline;
|
|
117
|
-
margin: 0;
|
|
118
|
-
padding: 0;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.sbb-teaser-hero__panel-link {
|
|
122
|
-
-webkit-font-smoothing: antialiased;
|
|
123
|
-
-moz-osx-font-smoothing: grayscale;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
::slotted([slot=image]),
|
|
127
|
-
sbb-image {
|
|
128
|
-
will-change: filter;
|
|
129
|
-
filter: brightness(var(--sbb-teaser-hero-brightness, 1));
|
|
130
|
-
transition: filter var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing);
|
|
131
|
-
}`;
|
|
132
|
-
var __defProp = Object.defineProperty;
|
|
133
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
134
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
135
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
136
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
137
|
-
if (decorator = decorators[i])
|
|
138
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
139
|
-
if (kind && result) __defProp(target, key, result);
|
|
140
|
-
return result;
|
|
141
|
-
};
|
|
142
|
-
let SbbTeaserHeroElement = class extends SbbLinkBaseElement {
|
|
143
|
-
renderTemplate() {
|
|
144
|
-
return html`
|
|
145
|
-
<span class="sbb-teaser-hero__panel">
|
|
146
|
-
<p class="sbb-teaser-hero__panel-text">
|
|
147
|
-
<slot></slot>
|
|
148
|
-
</p>
|
|
149
|
-
${this.href ? html`<sbb-block-link-static
|
|
150
|
-
class="sbb-teaser-hero__panel-link"
|
|
151
|
-
icon-name="chevron-small-right-small"
|
|
152
|
-
icon-placement="end"
|
|
153
|
-
size="m"
|
|
154
|
-
negative
|
|
155
|
-
>
|
|
156
|
-
<slot name="link-content">${this.linkContent}</slot>
|
|
157
|
-
</sbb-block-link-static>` : nothing}
|
|
158
|
-
</span>
|
|
159
|
-
<slot name="image">
|
|
160
|
-
${this.imageSrc ? html`<sbb-image image-src=${this.imageSrc} alt=${this.imageAlt ?? nothing}></sbb-image>` : nothing}
|
|
161
|
-
</slot>
|
|
162
|
-
`;
|
|
163
|
-
}
|
|
164
|
-
};
|
|
165
|
-
SbbTeaserHeroElement.styles = style;
|
|
166
|
-
__decorateClass([
|
|
167
|
-
property({ attribute: "link-content" })
|
|
168
|
-
], SbbTeaserHeroElement.prototype, "linkContent", 2);
|
|
169
|
-
__decorateClass([
|
|
170
|
-
property({ attribute: "image-src" })
|
|
171
|
-
], SbbTeaserHeroElement.prototype, "imageSrc", 2);
|
|
172
|
-
__decorateClass([
|
|
173
|
-
property({ attribute: "image-alt" })
|
|
174
|
-
], SbbTeaserHeroElement.prototype, "imageAlt", 2);
|
|
175
|
-
SbbTeaserHeroElement = __decorateClass([
|
|
176
|
-
customElement("sbb-teaser-hero")
|
|
177
|
-
], SbbTeaserHeroElement);
|
|
178
|
-
export {
|
|
179
|
-
SbbTeaserHeroElement
|
|
180
|
-
};
|
|
181
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLWhlcm8uanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy90ZWFzZXItaGVyby90ZWFzZXItaGVyby50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIENTU1Jlc3VsdEdyb3VwLCBub3RoaW5nLCB0eXBlIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgaHRtbCB9IGZyb20gJ2xpdC9zdGF0aWMtaHRtbC5qcyc7XG5cbmltcG9ydCB7IFNiYkxpbmtCYXNlRWxlbWVudCB9IGZyb20gJy4uL2NvcmUvYmFzZS1lbGVtZW50cy5qcyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL3RlYXNlci1oZXJvLnNjc3M/bGl0JmlubGluZSc7XG5cbmltcG9ydCAnLi4vaW1hZ2UuanMnO1xuaW1wb3J0ICcuLi9saW5rL2Jsb2NrLWxpbmstc3RhdGljLmpzJztcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBhbiBpbWFnZSBhbmQgYW4gYWN0aW9uIGNhbGwgd2l0aGluIGEgcGFuZWwuXG4gKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byBhZGQgdGV4dCBjb250ZW50IHRvIHRoZSBwYW5lbFxuICogQHNsb3QgbGluay1jb250ZW50IC0gTGluayBjb250ZW50IG9mIHRoZSBwYW5lbFxuICogQHNsb3QgaW1hZ2UgLSBUaGUgYmFja2dyb3VuZCBpbWFnZSB0aGF0IGNhbiBiZSBhIGBzYmItaW1hZ2VgXG4gKi9cbkBjdXN0b21FbGVtZW50KCdzYmItdGVhc2VyLWhlcm8nKVxuZXhwb3J0IGNsYXNzIFNiYlRlYXNlckhlcm9FbGVtZW50IGV4dGVuZHMgU2JiTGlua0Jhc2VFbGVtZW50IHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gc3R5bGU7XG5cbiAgLyoqIFBhbmVsIGxpbmsgdGV4dC4gKi9cbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAnbGluay1jb250ZW50JyB9KSBwdWJsaWMgbGlua0NvbnRlbnQ/OiBzdHJpbmc7XG5cbiAgLyoqIEltYWdlIHNyYyB3aWxsIGJlIHBhc3NlZCB0byBgc2JiLWltYWdlYC4gKi9cbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAnaW1hZ2Utc3JjJyB9KSBwdWJsaWMgaW1hZ2VTcmM/OiBzdHJpbmc7XG5cbiAgLyoqIEltYWdlIGFsdCB0ZXh0IHdpbGwgYmUgcGFzc2VkIHRvIGBzYmItaW1hZ2VgLiAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdpbWFnZS1hbHQnIH0pIHB1YmxpYyBpbWFnZUFsdD86IHN0cmluZztcblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyVGVtcGxhdGUoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdGVhc2VyLWhlcm9fX3BhbmVsXCI+XG4gICAgICAgIDxwIGNsYXNzPVwic2JiLXRlYXNlci1oZXJvX19wYW5lbC10ZXh0XCI+XG4gICAgICAgICAgPHNsb3Q+PC9zbG90PlxuICAgICAgICA8L3A+XG4gICAgICAgICR7dGhpcy5ocmVmXG4gICAgICAgICAgPyBodG1sYDxzYmItYmxvY2stbGluay1zdGF0aWNcbiAgICAgICAgICAgICAgY2xhc3M9XCJzYmItdGVhc2VyLWhlcm9fX3BhbmVsLWxpbmtcIlxuICAgICAgICAgICAgICBpY29uLW5hbWU9XCJjaGV2cm9uLXNtYWxsLXJpZ2h0LXNtYWxsXCJcbiAgICAgICAgICAgICAgaWNvbi1wbGFjZW1lbnQ9XCJlbmRcIlxuICAgICAgICAgICAgICBzaXplPVwibVwiXG4gICAgICAgICAgICAgIG5lZ2F0aXZlXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxzbG90IG5hbWU9XCJsaW5rLWNvbnRlbnRcIj4ke3RoaXMubGlua0NvbnRlbnR9PC9zbG90PlxuICAgICAgICAgICAgPC9zYmItYmxvY2stbGluay1zdGF0aWM+YFxuICAgICAgICAgIDogbm90aGluZ31cbiAgICAgIDwvc3Bhbj5cbiAgICAgIDxzbG90IG5hbWU9XCJpbWFnZVwiPlxuICAgICAgICAke3RoaXMuaW1hZ2VTcmNcbiAgICAgICAgICA/IGh0bWxgPHNiYi1pbWFnZSBpbWFnZS1zcmM9JHt0aGlzLmltYWdlU3JjfSBhbHQ9JHt0aGlzLmltYWdlQWx0ID8/IG5vdGhpbmd9Pjwvc2JiLWltYWdlPmBcbiAgICAgICAgICA6IG5vdGhpbmd9XG4gICAgICA8L3Nsb3Q+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXRlYXNlci1oZXJvJzogU2JiVGVhc2VySGVyb0VsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFtQmEsSUFBQSx1QkFBTixjQUFtQyxtQkFBbUI7QUFBQSxFQVl4QyxpQkFBaUM7QUFDM0MsV0FBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsVUFLRCxLQUFLLE9BQ0g7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSwwQ0FPOEIsS0FBSyxXQUFXO0FBQUEsd0NBRTlDLE9BQU87QUFBQTtBQUFBO0FBQUEsVUFHVCxLQUFLLFdBQ0gsNEJBQTRCLEtBQUssUUFBUSxRQUFRLEtBQUssWUFBWSxPQUFPLGtCQUN6RSxPQUFPO0FBQUE7QUFBQTtBQUFBLEVBR2pCO0FBQ0Y7QUFyQ2EscUJBQ1ksU0FBeUI7QUFHQSxnQkFBQTtBQUFBLEVBQS9DLFNBQVMsRUFBRSxXQUFXLGdCQUFnQjtBQUFBLEdBSjVCLHFCQUlxQyxXQUFBLGVBQUEsQ0FBQTtBQUdILGdCQUFBO0FBQUEsRUFBNUMsU0FBUyxFQUFFLFdBQVcsYUFBYTtBQUFBLEdBUHpCLHFCQU9rQyxXQUFBLFlBQUEsQ0FBQTtBQUdBLGdCQUFBO0FBQUEsRUFBNUMsU0FBUyxFQUFFLFdBQVcsYUFBYTtBQUFBLEdBVnpCLHFCQVVrQyxXQUFBLFlBQUEsQ0FBQTtBQVZsQyx1QkFBTixnQkFBQTtBQUFBLEVBRE4sY0FBYyxpQkFBaUI7QUFBQSxHQUNuQixvQkFBQTsifQ==
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { CSSResultGroup, TemplateResult } from 'lit';
|
|
2
|
-
import { SbbLinkBaseElement } from '../core/base-elements.js';
|
|
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/teaser-paid/teaser-paid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI9D;;;;;GAKG;AACH,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,gBAAgB;cAIL,cAAc,IAAI,cAAc;CAMpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"teaser-paid.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser-paid.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
|