@sbb-esta/lyne-elements-dev 4.7.0-dev.1773033279 → 4.7.0-dev.1773045049

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 (14) hide show
  1. package/core/styles/core.scss +13 -13
  2. package/core.css +18 -9
  3. package/development/flip-card/flip-card/flip-card.component.js +9 -19
  4. package/development/flip-card/flip-card-details/flip-card-details.component.d.ts.map +1 -1
  5. package/development/flip-card/flip-card-details/flip-card-details.component.js +10 -16
  6. package/development/flip-card/flip-card-summary/flip-card-summary.component.d.ts.map +1 -1
  7. package/development/flip-card/flip-card-summary/flip-card-summary.component.js +11 -18
  8. package/flip-card/flip-card/flip-card.component.js +17 -17
  9. package/flip-card/flip-card-details/flip-card-details.component.js +15 -17
  10. package/flip-card/flip-card-summary/flip-card-summary.component.js +13 -15
  11. package/off-brand-theme.css +18 -9
  12. package/package.json +2 -2
  13. package/safety-theme.css +18 -9
  14. package/standard-theme.css +18 -9
package/core/styles/core.scss CHANGED
@@ -95,6 +95,15 @@ $theme: 'standard' !default;
95
95
  expansion-panel-header with (
96
96
  $theme: $theme
97
97
  );
98
+ @use '../../flip-card/flip-card/flip-card.global' as flip-card with (
99
+ $theme: $theme
100
+ );
101
+ @use '../../flip-card/flip-card-details/flip-card-details.global' as flip-card-details with (
102
+ $theme: $theme
103
+ );
104
+ @use '../../flip-card/flip-card-summary/flip-card-summary.global' as flip-card-summary with (
105
+ $theme: $theme
106
+ );
98
107
  @use '../../footer/footer.global' as footer with (
99
108
  $theme: $theme
100
109
  );
@@ -167,6 +176,8 @@ $theme: 'standard' !default;
167
176
  @include expansion-panel.base;
168
177
  @include expansion-panel-content.base;
169
178
  @include expansion-panel-header.base;
179
+ @include flip-card.base;
180
+ @include flip-card-details.base;
170
181
  @include footer.base;
171
182
  @include option.base;
172
183
  @include option-hint.base;
@@ -265,6 +276,7 @@ $theme: 'standard' !default;
265
276
 
266
277
  @include chip-group.base-breakpoint-large;
267
278
  @include dialog.base-breakpoint-large;
279
+ @include flip-card.base-breakpoint-large;
268
280
 
269
281
  // TODO: Remove complete block when new lean theme is complete
270
282
  // Only render the block in standard theme as fallback for CSS class usage
@@ -298,6 +310,7 @@ $theme: 'standard' !default;
298
310
  @include dialog-close-button.rules;
299
311
  @include dialog-content.rules;
300
312
  @include dialog-title.rules;
313
+ @include flip-card-summary.rules;
301
314
  @include option.rules;
302
315
  @include tab-nav-bar.rules;
303
316
 
@@ -512,19 +525,6 @@ img {
512
525
  object-position: var(--sbb-image-object-position);
513
526
  }
514
527
 
515
- // TODO: Move back to the sbb-flip-card-summary components when the global CSS refactoring happens
516
- sbb-flip-card-summary {
517
- > [slot='image']:is(sbb-image, img),
518
- > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
519
- --sbb-image-aspect-ratio: auto;
520
- --sbb-image-object-fit: cover;
521
-
522
- border-radius: 0;
523
- display: block;
524
- height: 100%;
525
- }
526
- }
527
-
528
528
  // TODO: Move back to the sbb-lead-container components when the global CSS refactoring happens
529
529
  sbb-lead-container {
530
530
  > [slot='image']:is(sbb-image, img, picture),
package/core.css CHANGED
@@ -1460,6 +1460,14 @@
1460
1460
  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1461
1461
  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1462
1462
  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
1463
+ --sbb-flip-card-background-color: var(--sbb-background-color-4);
1464
+ --sbb-flip-card-border: var(--sbb-border-width-2x);
1465
+ --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
1466
+ --sbb-flip-card-button-dimensions: var(--sbb-button-min-height-size-s);
1467
+ --sbb-flip-card-padding: var(--sbb-spacing-responsive-s);
1468
+ --sbb-flip-card-padding-block-end: var(--sbb-spacing-responsive-xs);
1469
+ --sbb-flip-card-min-height: 17.5rem;
1470
+ --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
1463
1471
  --sbb-footer-background-color: var(--sbb-background-color-3);
1464
1472
  --sbb-footer-clock-width: 4.75rem;
1465
1473
  --sbb-footer-color: var(--sbb-color-granite);
@@ -1697,6 +1705,7 @@
1697
1705
  --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
1698
1706
  --sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);
1699
1707
  --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x));
1708
+ --sbb-flip-card-min-height: 20rem;
1700
1709
  }
1701
1710
  :root.sbb-lean {
1702
1711
  --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -1780,6 +1789,15 @@ sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:sta
1780
1789
  padding-inline-end: 0;
1781
1790
  }
1782
1791
 
1792
+ sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
1793
+ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
1794
+ --sbb-image-aspect-ratio: auto;
1795
+ --sbb-image-object-fit: cover;
1796
+ border-radius: 0;
1797
+ display: block;
1798
+ height: 100%;
1799
+ }
1800
+
1783
1801
  :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
1784
1802
  --sbb-option-min-height: var(--sbb-size-element-xxs);
1785
1803
  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2070,15 +2088,6 @@ img {
2070
2088
  object-position: var(--sbb-image-object-position);
2071
2089
  }
2072
2090
 
2073
- sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
2074
- sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2075
- --sbb-image-aspect-ratio: auto;
2076
- --sbb-image-object-fit: cover;
2077
- border-radius: 0;
2078
- display: block;
2079
- height: 100%;
2080
- }
2081
-
2082
2091
  sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
2083
2092
  sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
2084
2093
  --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
package/development/flip-card/flip-card/flip-card.component.js CHANGED
@@ -19,10 +19,6 @@ import { boxSizingStyles } from "../../core/styles.js";
19
19
  import "../../button/secondary-button-static.js";
20
20
  import "../../screen-reader-only.js";
21
21
  const style = css`:host {
22
- --sbb-flip-card-toggle-icon-transform: rotate(0);
23
- --sbb-flip-card-background-color: var(--sbb-background-color-4);
24
- --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
25
- --sbb-flip-card-min-height: 17.5rem;
26
22
  --sbb-flip-card-summary-transition-duration: var(
27
23
  --sbb-disable-animation-duration,
28
24
  var(--sbb-animation-duration-5x)
@@ -38,11 +34,6 @@ const style = css`:host {
38
34
  position: relative;
39
35
  display: block;
40
36
  }
41
- @media (min-width: calc(64rem)) {
42
- :host {
43
- --sbb-flip-card-min-height: 20rem;
44
- }
45
- }
46
37
 
47
38
  @media (any-hover: hover) {
48
39
  :host(:hover) {
@@ -89,7 +80,6 @@ const style = css`:host {
89
80
  height: 100%;
90
81
  flex-flow: wrap;
91
82
  flex-direction: column;
92
- gap: var(--sbb-spacing-responsive-xs);
93
83
  min-height: var(--sbb-flip-card-min-height);
94
84
  background-color: var(--sbb-flip-card-background-color);
95
85
  border-radius: var(--sbb-flip-card-border-radius);
@@ -103,7 +93,7 @@ const style = css`:host {
103
93
  @media (forced-colors: active) {
104
94
  .sbb-flip-card::after {
105
95
  content: "";
106
- border: var(--sbb-border-width-2x) solid CanvasText;
96
+ border: var(--sbb-flip-card-border) solid CanvasText;
107
97
  border-radius: var(--sbb-flip-card-border-radius);
108
98
  position: absolute;
109
99
  inset: 0;
@@ -120,12 +110,12 @@ const style = css`:host {
120
110
  opacity: 0;
121
111
  pointer-events: none;
122
112
  position: absolute;
123
- inset-inline-start: var(--sbb-spacing-responsive-s);
124
- inset-block-end: var(--sbb-spacing-responsive-s);
113
+ inset-inline-start: var(--sbb-flip-card-padding);
114
+ inset-block-end: var(--sbb-flip-card-padding);
125
115
  background-color: var(--sbb-color-midnight);
126
116
  background-color: light-dark(var(--sbb-color-midnight), var(--sbb-color-iron));
127
- width: var(--sbb-size-element-xs);
128
- height: var(--sbb-size-element-xs);
117
+ width: var(--sbb-flip-card-button-dimensions);
118
+ height: var(--sbb-flip-card-button-dimensions);
129
119
  border-radius: 16rem;
130
120
  transition: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-3x)) ease-out;
131
121
  }
@@ -141,15 +131,15 @@ const style = css`:host {
141
131
 
142
132
  .sbb-flip-card--toggle-button {
143
133
  position: absolute;
144
- inset-inline-start: var(--sbb-spacing-responsive-s);
145
- inset-block-end: var(--sbb-spacing-responsive-s);
134
+ inset-inline-start: var(--sbb-flip-card-padding);
135
+ inset-block-end: var(--sbb-flip-card-padding);
146
136
  }
147
137
  :host(:is(:state(flipped),[state--flipped])) .sbb-flip-card--toggle-button {
148
138
  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
149
139
  }
150
140
 
151
141
  .sbb-flip-card--toggle-button-icon {
152
- transform: var(--sbb-flip-card-toggle-icon-transform);
142
+ transform: var(--sbb-flip-card-toggle-icon-transform, none);
153
143
  transition: transform var(--sbb-flip-card-summary-transition-duration) ease-out;
154
144
  }
155
145
 
@@ -319,4 +309,4 @@ let SbbFlipCardElement = (() => {
319
309
  export {
320
310
  SbbFlipCardElement
321
311
  };
322
- //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxpcC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL2ZsaXAtY2FyZC9mbGlwLWNhcmQvZmxpcC1jYXJkLmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBSZXNpemVDb250cm9sbGVyIH0gZnJvbSAnQGxpdC1sYWJzL29ic2VydmVycy9yZXNpemUtY29udHJvbGxlci5qcyc7XG5pbXBvcnQgeyB0eXBlIENTU1Jlc3VsdEdyb3VwLCBodG1sLCBpc1NlcnZlciwgTGl0RWxlbWVudCwgdHlwZSBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50LCBwcm9wZXJ0eSwgc3RhdGUgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyB1bnRpbCB9IGZyb20gJ2xpdC9kaXJlY3RpdmVzL3VudGlsLmpzJztcblxuaW1wb3J0IHsgSVNfRk9DVVNBQkxFX1FVRVJZIH0gZnJvbSAnLi4vLi4vY29yZS9hMTF5LnRzJztcbmltcG9ydCB7IFNiYkxhbmd1YWdlQ29udHJvbGxlciwgU2JiUHJvcGVydHlXYXRjaGVyQ29udHJvbGxlciB9IGZyb20gJy4uLy4uL2NvcmUvY29udHJvbGxlcnMudHMnO1xuaW1wb3J0IHsgZm9yY2VUeXBlIH0gZnJvbSAnLi4vLi4vY29yZS9kZWNvcmF0b3JzLnRzJztcbmltcG9ydCB7IGkxOG5GbGlwQ2FyZCwgaTE4blJldmVyc2VDYXJkIH0gZnJvbSAnLi4vLi4vY29yZS9pMThuLnRzJztcbmltcG9ydCB7XG4gIFNiYkVsZW1lbnRJbnRlcm5hbHNNaXhpbixcbiAgU2JiSHlkcmF0aW9uTWl4aW4sXG4gIMm1c3RhdGVDb250cm9sbGVyLFxufSBmcm9tICcuLi8uLi9jb3JlL21peGlucy50cyc7XG5pbXBvcnQgeyBib3hTaXppbmdTdHlsZXMgfSBmcm9tICcuLi8uLi9jb3JlL3N0eWxlcy50cyc7XG5pbXBvcnQgdHlwZSB7IFNiYkZsaXBDYXJkRGV0YWlsc0VsZW1lbnQgfSBmcm9tICcuLi9mbGlwLWNhcmQtZGV0YWlscy50cyc7XG5pbXBvcnQgdHlwZSB7IFNiYkZsaXBDYXJkU3VtbWFyeUVsZW1lbnQgfSBmcm9tICcuLi9mbGlwLWNhcmQtc3VtbWFyeS50cyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL2ZsaXAtY2FyZC5zY3NzP2xpdCZpbmxpbmUnO1xuXG5pbXBvcnQgJy4uLy4uL2J1dHRvbi9zZWNvbmRhcnktYnV0dG9uLXN0YXRpYy50cyc7XG5pbXBvcnQgJy4uLy4uL3NjcmVlbi1yZWFkZXItb25seS50cyc7XG5cbi8qKlxuICogRGlzcGxheXMgYW4gaW5mb3JtYXRpdmUgY2FyZCB0aGF0IHJldmVhbHMgbW9yZSBpbmZvcm1hdGlvbiB1cG9uIGJlaW5nIGNsaWNrZWQuXG4gKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byBhZGQgYSBgc2JiLWZsaXAtY2FyZC1zdW1tYXJ5YCBhbmQgYSBgc2JiLWZsaXAtY2FyZC1kZXRhaWxzYCBlbGVtZW50LlxuICpcbiAqL1xuZXhwb3J0XG5AY3VzdG9tRWxlbWVudCgnc2JiLWZsaXAtY2FyZCcpXG5jbGFzcyBTYmJGbGlwQ2FyZEVsZW1lbnQgZXh0ZW5kcyBTYmJIeWRyYXRpb25NaXhpbihTYmJFbGVtZW50SW50ZXJuYWxzTWl4aW4oTGl0RWxlbWVudCkpIHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuICBwdWJsaWMgc3RhdGljIHJlYWRvbmx5IGV2ZW50cyA9IHtcbiAgICBmbGlwOiAnZmxpcCcsXG4gIH0gYXMgY29uc3Q7XG5cbiAgLyoqXG4gICAqIFRoaXMgd2lsbCBiZSBmb3J3YXJkZWQgYXMgYXJpYS1sYWJlbCB0byB0aGUgYWN0aW9uIGluIHRoZSBub24gZmxpcHBlZCBzdGF0ZS5cbiAgICogSWYgbm90IHNldCwgdGhlIHRleHRDb250ZW50IG9mIHRoZSBgc2JiLWZsaXAtY2FyZC1zdW1tYXJ5YCBpcyB0YWtlbi5cbiAgICovXG4gIEBmb3JjZVR5cGUoKVxuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdhY2Nlc3NpYmlsaXR5LWxhYmVsJyB9KVxuICBwdWJsaWMgYWNjZXNzb3IgYWNjZXNzaWJpbGl0eUxhYmVsOiBzdHJpbmcgPSAnJztcblxuICAvKiogUmV0dXJucyB0aGUgc2xvdHRlZCBzYmItZmxpcC1jYXJkLXN1bW1hcnkuICovXG4gIHB1YmxpYyBnZXQgc3VtbWFyeSgpOiBTYmJGbGlwQ2FyZFN1bW1hcnlFbGVtZW50IHwgbnVsbCB7XG4gICAgcmV0dXJuIHRoaXMucXVlcnlTZWxlY3Rvcj8uKCdzYmItZmxpcC1jYXJkLXN1bW1hcnknKTtcbiAgfVxuXG4gIC8qKiBSZXR1cm5zIHRoZSBzbG90dGVkIHNiYi1mbGlwLWNhcmQtZGV0YWlscy4gKi9cbiAgcHVibGljIGdldCBkZXRhaWxzKCk6IFNiYkZsaXBDYXJkRGV0YWlsc0VsZW1lbnQgfCBudWxsIHtcbiAgICByZXR1cm4gdGhpcy5xdWVyeVNlbGVjdG9yPy4oJ3NiYi1mbGlwLWNhcmQtZGV0YWlscycpO1xuICB9XG5cbiAgLyoqIFJldHVybnMgdGhlIGNhcmQgZGV0YWlscyBjb250ZW50IGVsZW1lbnQgd3JhcHBlci4gKi9cbiAgcHJpdmF0ZSBnZXQgX2RldGFpbHNDb250ZW50RWxlbWVudCgpOiBIVE1MRWxlbWVudCB8IG51bGwge1xuICAgIHJldHVybiB0aGlzLmRldGFpbHMhLnNoYWRvd1Jvb3QhLmZpcnN0RWxlbWVudENoaWxkIGFzIEhUTUxFbGVtZW50O1xuICB9XG5cbiAgLyoqIFdoZXRoZXIgdGhlIGZsaXAgY2FyZCBpcyBmbGlwcGVkLiAqL1xuICBwdWJsaWMgZ2V0IGlzRmxpcHBlZCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5fZmxpcHBlZDtcbiAgfVxuXG4gIC8qKiBXaGV0aGVyIHRoZSBjYXJkIGlzIGZsaXBwZWQgb3Igbm90LiAqL1xuICBAc3RhdGUoKSBwcml2YXRlIGFjY2Vzc29yIF9mbGlwcGVkID0gZmFsc2U7XG5cbiAgcHJpdmF0ZSBfbGFuZ3VhZ2UgPSBuZXcgU2JiTGFuZ3VhZ2VDb250cm9sbGVyKHRoaXMpO1xuICBwcml2YXRlIF9jYXJkRGV0YWlsc1Jlc2l6ZU9ic2VydmVyID0gbmV3IFJlc2l6ZUNvbnRyb2xsZXIodGhpcywge1xuICAgIHRhcmdldDogbnVsbCxcbiAgICBza2lwSW5pdGlhbDogdHJ1ZSxcbiAgICBjYWxsYmFjazogKCkgPT4gdGhpcy5fc2V0Q2FyZERldGFpbHNIZWlnaHQoKSxcbiAgfSk7XG4gIHByaXZhdGUgX3ByZXZpb3VzSW1hZ2VBbGlnbm1lbnQ/OiBzdHJpbmc7XG5cbiAgcHVibGljIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5hZGRFdmVudExpc3RlbmVyPy4oJ2NsaWNrJywgKGV2ZW50OiBFdmVudCkgPT4ge1xuICAgICAgaWYgKGV2ZW50LnRhcmdldCA9PT0gdGhpcyB8fCAhKGV2ZW50LnRhcmdldCBhcyBIVE1MRWxlbWVudCk/Lm1hdGNoZXM/LihJU19GT0NVU0FCTEVfUVVFUlkpKSB7XG4gICAgICAgIHRoaXMudG9nZ2xlKCk7XG4gICAgICB9XG4gICAgfSk7XG4gICAgdGhpcy5hZGRDb250cm9sbGVyKFxuICAgICAgbmV3IFNiYlByb3BlcnR5V2F0Y2hlckNvbnRyb2xsZXIodGhpcywgKCkgPT4gdGhpcy5zdW1tYXJ5LCB7XG4gICAgICAgIGltYWdlQWxpZ25tZW50OiAocykgPT4ge1xuICAgICAgICAgIGlmICh0aGlzLl9wcmV2aW91c0ltYWdlQWxpZ25tZW50KSB7XG4gICAgICAgICAgICB0aGlzLmludGVybmFscy5zdGF0ZXMuZGVsZXRlKGBpbWFnZS1hbGlnbm1lbnQtJHt0aGlzLl9wcmV2aW91c0ltYWdlQWxpZ25tZW50fWApO1xuICAgICAgICAgIH1cbiAgICAgICAgICB0aGlzLl9wcmV2aW91c0ltYWdlQWxpZ25tZW50ID0gcy5pbWFnZUFsaWdubWVudDtcbiAgICAgICAgICBpZiAodGhpcy5fcHJldmlvdXNJbWFnZUFsaWdubWVudCkge1xuICAgICAgICAgICAgdGhpcy5pbnRlcm5hbHMuc3RhdGVzLmFkZChgaW1hZ2UtYWxpZ25tZW50LSR7dGhpcy5fcHJldmlvdXNJbWFnZUFsaWdubWVudH1gKTtcbiAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICB9KSxcbiAgICApO1xuICB9XG5cbiAgLyoqIFRvZ2dsZXMgdGhlIHN0YXRlIG9mIHRoZSBzYmItZmxpcC1jYXJkLiAqL1xuICBwdWJsaWMgdG9nZ2xlKCk6IHZvaWQge1xuICAgIHRoaXMuX2ZsaXBwZWQgPSAhdGhpcy5fZmxpcHBlZDtcbiAgICBpZiAodGhpcy5fZmxpcHBlZCkge1xuICAgICAgdGhpcy5fc2V0Q2FyZERldGFpbHNIZWlnaHQoKTtcbiAgICAgIHRoaXMuX2NhcmREZXRhaWxzUmVzaXplT2JzZXJ2ZXIub2JzZXJ2ZSh0aGlzLl9kZXRhaWxzQ29udGVudEVsZW1lbnQhKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5fY2FyZERldGFpbHNSZXNpemVPYnNlcnZlci51bm9ic2VydmUodGhpcy5fZGV0YWlsc0NvbnRlbnRFbGVtZW50ISk7XG4gICAgfVxuICAgIHRoaXMudG9nZ2xlU3RhdGUoJ2ZsaXBwZWQnLCB0aGlzLl9mbGlwcGVkKTtcbiAgICDJtXN0YXRlQ29udHJvbGxlcih0aGlzLmRldGFpbHMpPy50b2dnbGUoJ2ZsaXBwZWQnLCB0aGlzLl9mbGlwcGVkKTtcbiAgICB0aGlzLnN1bW1hcnkhLmluZXJ0ID0gdGhpcy5fZmxpcHBlZDtcbiAgICB0aGlzLmRldGFpbHMhLmluZXJ0ID0gIXRoaXMuX2ZsaXBwZWQ7XG4gICAgLyoqIEVtaXRzIHdoZW5ldmVyIHRoZSBjb21wb25lbnQgaXMgZmxpcHBlZC4gKi9cbiAgICB0aGlzLmRpc3BhdGNoRXZlbnQobmV3IEV2ZW50KCdmbGlwJywgeyBidWJibGVzOiB0cnVlLCBjb21wb3NlZDogdHJ1ZSB9KSk7XG4gIH1cblxuICBwcml2YXRlIF9zZXRDYXJkRGV0YWlsc0hlaWdodCgpOiBhbnkge1xuICAgIGNvbnN0IGNvbnRlbnRIZWlnaHQgPSBNYXRoLmZsb29yKHRoaXMuX2RldGFpbHNDb250ZW50RWxlbWVudCEub2Zmc2V0SGVpZ2h0KTtcbiAgICB0aGlzLnN0eWxlPy5zZXRQcm9wZXJ0eSgnLS1zYmItZmxpcC1jYXJkLWRldGFpbHMtaGVpZ2h0JywgYCR7Y29udGVudEhlaWdodH1weGApO1xuICB9XG5cbiAgcHJpdmF0ZSBhc3luYyBfYWNjZXNzaWJpbGl0eUxhYmVsKCk6IFByb21pc2U8c3RyaW5nPiB7XG4gICAgaWYgKGlzU2VydmVyKSB7XG4gICAgICByZXR1cm4gJyc7XG4gICAgfVxuICAgIGF3YWl0IHRoaXMuaHlkcmF0aW9uQ29tcGxldGU7XG5cbiAgICByZXR1cm4gIXRoaXMuX2ZsaXBwZWRcbiAgICAgID8gYCR7KHRoaXMuYWNjZXNzaWJpbGl0eUxhYmVsID8gdGhpcy5hY2Nlc3NpYmlsaXR5TGFiZWwgOiB0aGlzLnN1bW1hcnk/LnRleHRDb250ZW50Py50cmltKCkpID8/ICcnfSwgJHtpMThuRmxpcENhcmRbdGhpcy5fbGFuZ3VhZ2UuY3VycmVudF19YFxuICAgICAgOiBpMThuUmV2ZXJzZUNhcmRbdGhpcy5fbGFuZ3VhZ2UuY3VycmVudF07XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxkaXYgY2xhc3M9XCJzYmItZmxpcC1jYXJkXCI+XG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICBjbGFzcz1cInNiYi1mbGlwLWNhcmQtYnV0dG9uXCJcbiAgICAgICAgICBhcmlhLWV4cGFuZGVkPSR7dGhpcy5fZmxpcHBlZC50b1N0cmluZygpfVxuICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICA+XG4gICAgICAgICAgPHNiYi1zY3JlZW4tcmVhZGVyLW9ubHk+JHt1bnRpbCh0aGlzLl9hY2Nlc3NpYmlsaXR5TGFiZWwoKSwgJycpfTwvc2JiLXNjcmVlbi1yZWFkZXItb25seT5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICAgIDxzbG90IG5hbWU9XCJzdW1tYXJ5XCIgQHNsb3RjaGFuZ2U9JHsoKSA9PiAodGhpcy5zdW1tYXJ5IS5pbmVydCA9IHRoaXMuX2ZsaXBwZWQpfT48L3Nsb3Q+XG4gICAgICAgIDxzbG90IG5hbWU9XCJkZXRhaWxzXCIgQHNsb3RjaGFuZ2U9JHsoKSA9PiAodGhpcy5kZXRhaWxzIS5pbmVydCA9ICF0aGlzLl9mbGlwcGVkKX0+PC9zbG90PlxuICAgICAgICA8c2JiLXNlY29uZGFyeS1idXR0b24tc3RhdGljIGNsYXNzPVwic2JiLWZsaXAtY2FyZC0tdG9nZ2xlLWJ1dHRvblwiIHNpemU9XCJzXCI+XG4gICAgICAgICAgPHNiYi1pY29uXG4gICAgICAgICAgICBjbGFzcz1cInNiYi1mbGlwLWNhcmQtLXRvZ2dsZS1idXR0b24taWNvblwiXG4gICAgICAgICAgICBzbG90PVwiaWNvblwiXG4gICAgICAgICAgICBuYW1lPVwicGx1cy1zbWFsbFwiXG4gICAgICAgICAgPjwvc2JiLWljb24+XG4gICAgICAgIDwvc2JiLXNlY29uZGFyeS1idXR0b24tc3RhdGljPlxuICAgICAgPC9kaXY+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLWZsaXAtY2FyZCc6IFNiYkZsaXBDYXJkRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbIsm1c3RhdGVDb250cm9sbGVyIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7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
312
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxpcC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL2ZsaXAtY2FyZC9mbGlwLWNhcmQvZmxpcC1jYXJkLmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBSZXNpemVDb250cm9sbGVyIH0gZnJvbSAnQGxpdC1sYWJzL29ic2VydmVycy9yZXNpemUtY29udHJvbGxlci5qcyc7XG5pbXBvcnQgeyB0eXBlIENTU1Jlc3VsdEdyb3VwLCBodG1sLCBpc1NlcnZlciwgTGl0RWxlbWVudCwgdHlwZSBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50LCBwcm9wZXJ0eSwgc3RhdGUgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyB1bnRpbCB9IGZyb20gJ2xpdC9kaXJlY3RpdmVzL3VudGlsLmpzJztcblxuaW1wb3J0IHsgSVNfRk9DVVNBQkxFX1FVRVJZIH0gZnJvbSAnLi4vLi4vY29yZS9hMTF5LnRzJztcbmltcG9ydCB7IFNiYkxhbmd1YWdlQ29udHJvbGxlciwgU2JiUHJvcGVydHlXYXRjaGVyQ29udHJvbGxlciB9IGZyb20gJy4uLy4uL2NvcmUvY29udHJvbGxlcnMudHMnO1xuaW1wb3J0IHsgZm9yY2VUeXBlIH0gZnJvbSAnLi4vLi4vY29yZS9kZWNvcmF0b3JzLnRzJztcbmltcG9ydCB7IGkxOG5GbGlwQ2FyZCwgaTE4blJldmVyc2VDYXJkIH0gZnJvbSAnLi4vLi4vY29yZS9pMThuLnRzJztcbmltcG9ydCB7XG4gIFNiYkVsZW1lbnRJbnRlcm5hbHNNaXhpbixcbiAgU2JiSHlkcmF0aW9uTWl4aW4sXG4gIMm1c3RhdGVDb250cm9sbGVyLFxufSBmcm9tICcuLi8uLi9jb3JlL21peGlucy50cyc7XG5pbXBvcnQgeyBib3hTaXppbmdTdHlsZXMgfSBmcm9tICcuLi8uLi9jb3JlL3N0eWxlcy50cyc7XG5pbXBvcnQgdHlwZSB7IFNiYkZsaXBDYXJkRGV0YWlsc0VsZW1lbnQgfSBmcm9tICcuLi9mbGlwLWNhcmQtZGV0YWlscy50cyc7XG5pbXBvcnQgdHlwZSB7IFNiYkZsaXBDYXJkU3VtbWFyeUVsZW1lbnQgfSBmcm9tICcuLi9mbGlwLWNhcmQtc3VtbWFyeS50cyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL2ZsaXAtY2FyZC5zY3NzP2xpdCZpbmxpbmUnO1xuXG5pbXBvcnQgJy4uLy4uL2J1dHRvbi9zZWNvbmRhcnktYnV0dG9uLXN0YXRpYy50cyc7XG5pbXBvcnQgJy4uLy4uL3NjcmVlbi1yZWFkZXItb25seS50cyc7XG5cbi8qKlxuICogRGlzcGxheXMgYW4gaW5mb3JtYXRpdmUgY2FyZCB0aGF0IHJldmVhbHMgbW9yZSBpbmZvcm1hdGlvbiB1cG9uIGJlaW5nIGNsaWNrZWQuXG4gKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byBhZGQgYSBgc2JiLWZsaXAtY2FyZC1zdW1tYXJ5YCBhbmQgYSBgc2JiLWZsaXAtY2FyZC1kZXRhaWxzYCBlbGVtZW50LlxuICpcbiAqL1xuZXhwb3J0XG5AY3VzdG9tRWxlbWVudCgnc2JiLWZsaXAtY2FyZCcpXG5jbGFzcyBTYmJGbGlwQ2FyZEVsZW1lbnQgZXh0ZW5kcyBTYmJIeWRyYXRpb25NaXhpbihTYmJFbGVtZW50SW50ZXJuYWxzTWl4aW4oTGl0RWxlbWVudCkpIHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuICBwdWJsaWMgc3RhdGljIHJlYWRvbmx5IGV2ZW50cyA9IHtcbiAgICBmbGlwOiAnZmxpcCcsXG4gIH0gYXMgY29uc3Q7XG5cbiAgLyoqXG4gICAqIFRoaXMgd2lsbCBiZSBmb3J3YXJkZWQgYXMgYXJpYS1sYWJlbCB0byB0aGUgYWN0aW9uIGluIHRoZSBub24gZmxpcHBlZCBzdGF0ZS5cbiAgICogSWYgbm90IHNldCwgdGhlIHRleHRDb250ZW50IG9mIHRoZSBgc2JiLWZsaXAtY2FyZC1zdW1tYXJ5YCBpcyB0YWtlbi5cbiAgICovXG4gIEBmb3JjZVR5cGUoKVxuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdhY2Nlc3NpYmlsaXR5LWxhYmVsJyB9KVxuICBwdWJsaWMgYWNjZXNzb3IgYWNjZXNzaWJpbGl0eUxhYmVsOiBzdHJpbmcgPSAnJztcblxuICAvKiogUmV0dXJucyB0aGUgc2xvdHRlZCBzYmItZmxpcC1jYXJkLXN1bW1hcnkuICovXG4gIHB1YmxpYyBnZXQgc3VtbWFyeSgpOiBTYmJGbGlwQ2FyZFN1bW1hcnlFbGVtZW50IHwgbnVsbCB7XG4gICAgcmV0dXJuIHRoaXMucXVlcnlTZWxlY3Rvcj8uKCdzYmItZmxpcC1jYXJkLXN1bW1hcnknKTtcbiAgfVxuXG4gIC8qKiBSZXR1cm5zIHRoZSBzbG90dGVkIHNiYi1mbGlwLWNhcmQtZGV0YWlscy4gKi9cbiAgcHVibGljIGdldCBkZXRhaWxzKCk6IFNiYkZsaXBDYXJkRGV0YWlsc0VsZW1lbnQgfCBudWxsIHtcbiAgICByZXR1cm4gdGhpcy5xdWVyeVNlbGVjdG9yPy4oJ3NiYi1mbGlwLWNhcmQtZGV0YWlscycpO1xuICB9XG5cbiAgLyoqIFJldHVybnMgdGhlIGNhcmQgZGV0YWlscyBjb250ZW50IGVsZW1lbnQgd3JhcHBlci4gKi9cbiAgcHJpdmF0ZSBnZXQgX2RldGFpbHNDb250ZW50RWxlbWVudCgpOiBIVE1MRWxlbWVudCB8IG51bGwge1xuICAgIHJldHVybiB0aGlzLmRldGFpbHMhLnNoYWRvd1Jvb3QhLmZpcnN0RWxlbWVudENoaWxkIGFzIEhUTUxFbGVtZW50O1xuICB9XG5cbiAgLyoqIFdoZXRoZXIgdGhlIGZsaXAgY2FyZCBpcyBmbGlwcGVkLiAqL1xuICBwdWJsaWMgZ2V0IGlzRmxpcHBlZCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5fZmxpcHBlZDtcbiAgfVxuXG4gIC8qKiBXaGV0aGVyIHRoZSBjYXJkIGlzIGZsaXBwZWQgb3Igbm90LiAqL1xuICBAc3RhdGUoKSBwcml2YXRlIGFjY2Vzc29yIF9mbGlwcGVkID0gZmFsc2U7XG5cbiAgcHJpdmF0ZSBfbGFuZ3VhZ2UgPSBuZXcgU2JiTGFuZ3VhZ2VDb250cm9sbGVyKHRoaXMpO1xuICBwcml2YXRlIF9jYXJkRGV0YWlsc1Jlc2l6ZU9ic2VydmVyID0gbmV3IFJlc2l6ZUNvbnRyb2xsZXIodGhpcywge1xuICAgIHRhcmdldDogbnVsbCxcbiAgICBza2lwSW5pdGlhbDogdHJ1ZSxcbiAgICBjYWxsYmFjazogKCkgPT4gdGhpcy5fc2V0Q2FyZERldGFpbHNIZWlnaHQoKSxcbiAgfSk7XG4gIHByaXZhdGUgX3ByZXZpb3VzSW1hZ2VBbGlnbm1lbnQ/OiBzdHJpbmc7XG5cbiAgcHVibGljIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5hZGRFdmVudExpc3RlbmVyPy4oJ2NsaWNrJywgKGV2ZW50OiBFdmVudCkgPT4ge1xuICAgICAgaWYgKGV2ZW50LnRhcmdldCA9PT0gdGhpcyB8fCAhKGV2ZW50LnRhcmdldCBhcyBIVE1MRWxlbWVudCk/Lm1hdGNoZXM/LihJU19GT0NVU0FCTEVfUVVFUlkpKSB7XG4gICAgICAgIHRoaXMudG9nZ2xlKCk7XG4gICAgICB9XG4gICAgfSk7XG4gICAgdGhpcy5hZGRDb250cm9sbGVyKFxuICAgICAgbmV3IFNiYlByb3BlcnR5V2F0Y2hlckNvbnRyb2xsZXIodGhpcywgKCkgPT4gdGhpcy5zdW1tYXJ5LCB7XG4gICAgICAgIGltYWdlQWxpZ25tZW50OiAocykgPT4ge1xuICAgICAgICAgIGlmICh0aGlzLl9wcmV2aW91c0ltYWdlQWxpZ25tZW50KSB7XG4gICAgICAgICAgICB0aGlzLmludGVybmFscy5zdGF0ZXMuZGVsZXRlKGBpbWFnZS1hbGlnbm1lbnQtJHt0aGlzLl9wcmV2aW91c0ltYWdlQWxpZ25tZW50fWApO1xuICAgICAgICAgIH1cbiAgICAgICAgICB0aGlzLl9wcmV2aW91c0ltYWdlQWxpZ25tZW50ID0gcy5pbWFnZUFsaWdubWVudDtcbiAgICAgICAgICBpZiAodGhpcy5fcHJldmlvdXNJbWFnZUFsaWdubWVudCkge1xuICAgICAgICAgICAgdGhpcy5pbnRlcm5hbHMuc3RhdGVzLmFkZChgaW1hZ2UtYWxpZ25tZW50LSR7dGhpcy5fcHJldmlvdXNJbWFnZUFsaWdubWVudH1gKTtcbiAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICB9KSxcbiAgICApO1xuICB9XG5cbiAgLyoqIFRvZ2dsZXMgdGhlIHN0YXRlIG9mIHRoZSBzYmItZmxpcC1jYXJkLiAqL1xuICBwdWJsaWMgdG9nZ2xlKCk6IHZvaWQge1xuICAgIHRoaXMuX2ZsaXBwZWQgPSAhdGhpcy5fZmxpcHBlZDtcbiAgICBpZiAodGhpcy5fZmxpcHBlZCkge1xuICAgICAgdGhpcy5fc2V0Q2FyZERldGFpbHNIZWlnaHQoKTtcbiAgICAgIHRoaXMuX2NhcmREZXRhaWxzUmVzaXplT2JzZXJ2ZXIub2JzZXJ2ZSh0aGlzLl9kZXRhaWxzQ29udGVudEVsZW1lbnQhKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5fY2FyZERldGFpbHNSZXNpemVPYnNlcnZlci51bm9ic2VydmUodGhpcy5fZGV0YWlsc0NvbnRlbnRFbGVtZW50ISk7XG4gICAgfVxuICAgIHRoaXMudG9nZ2xlU3RhdGUoJ2ZsaXBwZWQnLCB0aGlzLl9mbGlwcGVkKTtcbiAgICDJtXN0YXRlQ29udHJvbGxlcih0aGlzLmRldGFpbHMpPy50b2dnbGUoJ2ZsaXBwZWQnLCB0aGlzLl9mbGlwcGVkKTtcbiAgICB0aGlzLnN1bW1hcnkhLmluZXJ0ID0gdGhpcy5fZmxpcHBlZDtcbiAgICB0aGlzLmRldGFpbHMhLmluZXJ0ID0gIXRoaXMuX2ZsaXBwZWQ7XG4gICAgLyoqIEVtaXRzIHdoZW5ldmVyIHRoZSBjb21wb25lbnQgaXMgZmxpcHBlZC4gKi9cbiAgICB0aGlzLmRpc3BhdGNoRXZlbnQobmV3IEV2ZW50KCdmbGlwJywgeyBidWJibGVzOiB0cnVlLCBjb21wb3NlZDogdHJ1ZSB9KSk7XG4gIH1cblxuICBwcml2YXRlIF9zZXRDYXJkRGV0YWlsc0hlaWdodCgpOiBhbnkge1xuICAgIGNvbnN0IGNvbnRlbnRIZWlnaHQgPSBNYXRoLmZsb29yKHRoaXMuX2RldGFpbHNDb250ZW50RWxlbWVudCEub2Zmc2V0SGVpZ2h0KTtcbiAgICB0aGlzLnN0eWxlPy5zZXRQcm9wZXJ0eSgnLS1zYmItZmxpcC1jYXJkLWRldGFpbHMtaGVpZ2h0JywgYCR7Y29udGVudEhlaWdodH1weGApO1xuICB9XG5cbiAgcHJpdmF0ZSBhc3luYyBfYWNjZXNzaWJpbGl0eUxhYmVsKCk6IFByb21pc2U8c3RyaW5nPiB7XG4gICAgaWYgKGlzU2VydmVyKSB7XG4gICAgICByZXR1cm4gJyc7XG4gICAgfVxuICAgIGF3YWl0IHRoaXMuaHlkcmF0aW9uQ29tcGxldGU7XG5cbiAgICByZXR1cm4gIXRoaXMuX2ZsaXBwZWRcbiAgICAgID8gYCR7KHRoaXMuYWNjZXNzaWJpbGl0eUxhYmVsID8gdGhpcy5hY2Nlc3NpYmlsaXR5TGFiZWwgOiB0aGlzLnN1bW1hcnk/LnRleHRDb250ZW50Py50cmltKCkpID8/ICcnfSwgJHtpMThuRmxpcENhcmRbdGhpcy5fbGFuZ3VhZ2UuY3VycmVudF19YFxuICAgICAgOiBpMThuUmV2ZXJzZUNhcmRbdGhpcy5fbGFuZ3VhZ2UuY3VycmVudF07XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxkaXYgY2xhc3M9XCJzYmItZmxpcC1jYXJkXCI+XG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICBjbGFzcz1cInNiYi1mbGlwLWNhcmQtYnV0dG9uXCJcbiAgICAgICAgICBhcmlhLWV4cGFuZGVkPSR7dGhpcy5fZmxpcHBlZC50b1N0cmluZygpfVxuICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICA+XG4gICAgICAgICAgPHNiYi1zY3JlZW4tcmVhZGVyLW9ubHk+JHt1bnRpbCh0aGlzLl9hY2Nlc3NpYmlsaXR5TGFiZWwoKSwgJycpfTwvc2JiLXNjcmVlbi1yZWFkZXItb25seT5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICAgIDxzbG90IG5hbWU9XCJzdW1tYXJ5XCIgQHNsb3RjaGFuZ2U9JHsoKSA9PiAodGhpcy5zdW1tYXJ5IS5pbmVydCA9IHRoaXMuX2ZsaXBwZWQpfT48L3Nsb3Q+XG4gICAgICAgIDxzbG90IG5hbWU9XCJkZXRhaWxzXCIgQHNsb3RjaGFuZ2U9JHsoKSA9PiAodGhpcy5kZXRhaWxzIS5pbmVydCA9ICF0aGlzLl9mbGlwcGVkKX0+PC9zbG90PlxuICAgICAgICA8c2JiLXNlY29uZGFyeS1idXR0b24tc3RhdGljIGNsYXNzPVwic2JiLWZsaXAtY2FyZC0tdG9nZ2xlLWJ1dHRvblwiIHNpemU9XCJzXCI+XG4gICAgICAgICAgPHNiYi1pY29uXG4gICAgICAgICAgICBjbGFzcz1cInNiYi1mbGlwLWNhcmQtLXRvZ2dsZS1idXR0b24taWNvblwiXG4gICAgICAgICAgICBzbG90PVwiaWNvblwiXG4gICAgICAgICAgICBuYW1lPVwicGx1cy1zbWFsbFwiXG4gICAgICAgICAgPjwvc2JiLWljb24+XG4gICAgICAgIDwvc2JiLXNlY29uZGFyeS1idXR0b24tc3RhdGljPlxuICAgICAgPC9kaXY+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLWZsaXAtY2FyZCc6IFNiYkZsaXBDYXJkRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbIsm1c3RhdGVDb250cm9sbGVyIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7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
package/development/flip-card/flip-card-details/flip-card-details.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"flip-card-details.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements/flip-card/flip-card-details/flip-card-details.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AASvC;;;;GAIG;AACH,qBAEM,yBAA0B,SAAQ,8BAAoC;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAA4B;;IAkBzD,iBAAiB,IAAI,IAAI;IAKzC,OAAO,CAAC,uBAAuB;cAOZ,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,yBAAyB,CAAC;KACpD;CACF"}
1
+ {"version":3,"file":"flip-card-details.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements/flip-card/flip-card-details/flip-card-details.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AASvC;;;;GAIG;AACH,qBAEM,yBAA0B,SAAQ,8BAAoC;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAA4B;;IAkBzD,iBAAiB,IAAI,IAAI;IAKzC,OAAO,CAAC,uBAAuB;cAOZ,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,yBAAyB,CAAC;KACpD;CACF"}
package/development/flip-card/flip-card-details/flip-card-details.component.js CHANGED
@@ -7,35 +7,31 @@ import { SbbElementInternalsMixin } from "../../core/mixins.js";
7
7
  import { boxSizingStyles } from "../../core/styles.js";
8
8
  const style = css`:host {
9
9
  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
10
- --sbb-flip-card-details-opacity: 0;
11
- --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
12
10
  --sbb-flip-card-details-transition-delay: var(
13
11
  --sbb-disable-animation-duration,
14
12
  var(--sbb-animation-duration-5x)
15
13
  );
16
- --sbb-flip-card-details-padding: var(--sbb-spacing-responsive-s);
17
14
  --sbb-flip-card-details-padding-block-end: calc(
18
- var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m)
15
+ var(--sbb-flip-card-padding) + var(--sbb-flip-card-padding-block-end) +
16
+ var(--sbb-button-min-height-size-s)
19
17
  );
20
- display: contents;
21
- }
22
-
23
- .sbb-flip-card-details--wrapper {
18
+ display: block;
24
19
  position: absolute;
25
20
  pointer-events: none;
26
21
  color: var(--sbb-color-milk);
27
- opacity: var(--sbb-flip-card-details-opacity);
22
+ opacity: var(--sbb-flip-card-details-opacity, 0);
28
23
  transform: translateY(var(--sbb-flip-card-details-translate-y));
29
24
  transition-property: transform, opacity;
30
25
  transition-duration: var(--sbb-flip-card-details-transition-duration);
31
26
  }
32
- :host(:is(:state(flipped),[state--flipped])) .sbb-flip-card-details--wrapper {
27
+
28
+ :host(:is(:state(flipped),[state--flipped])) {
33
29
  transition-delay: var(--sbb-flip-card-details-transition-delay), var(--sbb-flip-card-details-transition-delay);
34
30
  }
35
31
 
36
32
  .sbb-flip-card-details {
37
33
  overflow: hidden;
38
- padding: var(--sbb-flip-card-details-padding);
34
+ padding: var(--sbb-flip-card-padding);
39
35
  padding-block-end: var(--sbb-flip-card-details-padding-block-end);
40
36
  }`;
41
37
  let SbbFlipCardDetailsElement = (() => {
@@ -67,10 +63,8 @@ let SbbFlipCardDetailsElement = (() => {
67
63
  }
68
64
  render() {
69
65
  return html`
70
- <div class="sbb-flip-card-details--wrapper">
71
- <div class="sbb-flip-card-details">
72
- <slot></slot>
73
- </div>
66
+ <div class="sbb-flip-card-details">
67
+ <slot></slot>
74
68
  </div>
75
69
  `;
76
70
  }
@@ -85,4 +79,4 @@ let SbbFlipCardDetailsElement = (() => {
85
79
  export {
86
80
  SbbFlipCardDetailsElement
87
81
  };
88
- //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxpcC1jYXJkLWRldGFpbHMuY29tcG9uZW50LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvZmxpcC1jYXJkL2ZsaXAtY2FyZC1kZXRhaWxzL2ZsaXAtY2FyZC1kZXRhaWxzLmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBNdXRhdGlvbkNvbnRyb2xsZXIgfSBmcm9tICdAbGl0LWxhYnMvb2JzZXJ2ZXJzL211dGF0aW9uLWNvbnRyb2xsZXIuanMnO1xuaW1wb3J0IHR5cGUgeyBDU1NSZXN1bHRHcm91cCwgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgaHRtbCwgTGl0RWxlbWVudCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgeyBJU19GT0NVU0FCTEVfUVVFUlkgfSBmcm9tICcuLi8uLi9jb3JlL2ExMXkudHMnO1xuaW1wb3J0IHsgU2JiRWxlbWVudEludGVybmFsc01peGluIH0gZnJvbSAnLi4vLi4vY29yZS9taXhpbnMudHMnO1xuaW1wb3J0IHsgYm94U2l6aW5nU3R5bGVzIH0gZnJvbSAnLi4vLi4vY29yZS9zdHlsZXMudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9mbGlwLWNhcmQtZGV0YWlscy5zY3NzP2xpdCZpbmxpbmUnO1xuXG4vKipcbiAqIENvbWJpbmVkIHdpdGggYSBgc2JiLWZsaXAtY2FyZGAsIGl0IGRpc3BsYXlzIGl0cyBjb250ZW50IHdoZW4gdGhlIGNhcmQgaXMgZmxpcHBlZC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIHByb3ZpZGUgYW55IGtpbmQgb2YgY29udGVudC5cbiAqL1xuZXhwb3J0XG5AY3VzdG9tRWxlbWVudCgnc2JiLWZsaXAtY2FyZC1kZXRhaWxzJylcbmNsYXNzIFNiYkZsaXBDYXJkRGV0YWlsc0VsZW1lbnQgZXh0ZW5kcyBTYmJFbGVtZW50SW50ZXJuYWxzTWl4aW4oTGl0RWxlbWVudCkge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbYm94U2l6aW5nU3R5bGVzLCBzdHlsZV07XG5cbiAgcHVibGljIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG5cbiAgICB0aGlzLmFkZENvbnRyb2xsZXIoXG4gICAgICBuZXcgTXV0YXRpb25Db250cm9sbGVyKHRoaXMsIHtcbiAgICAgICAgY29uZmlnOiB7XG4gICAgICAgICAgY2hpbGRMaXN0OiB0cnVlLFxuICAgICAgICAgIHN1YnRyZWU6IHRydWUsXG4gICAgICAgICAgYXR0cmlidXRlczogdHJ1ZSxcbiAgICAgICAgICBhdHRyaWJ1dGVGaWx0ZXI6IFsnaHJlZicsICd0YWJpbmRleCcsICdkaXNhYmxlZCcsICdpbmVydCddLFxuICAgICAgICB9LFxuICAgICAgICBjYWxsYmFjazogKCkgPT4gdGhpcy5fY2hlY2tGb3JTbG90dGVkQWN0aW9ucygpLFxuICAgICAgfSksXG4gICAgKTtcbiAgfVxuXG4gIHB1YmxpYyBvdmVycmlkZSBjb25uZWN0ZWRDYWxsYmFjaygpOiB2b2lkIHtcbiAgICBzdXBlci5jb25uZWN0ZWRDYWxsYmFjaygpO1xuICAgIHRoaXMuc2xvdCB8fD0gJ2RldGFpbHMnO1xuICB9XG5cbiAgcHJpdmF0ZSBfY2hlY2tGb3JTbG90dGVkQWN0aW9ucygpOiB2b2lkIHtcbiAgICAvLyBXZSBpbnRlbnRpb25hbGx5IHVzZSB0b2dnbGUgaGVyZSwgYXMgYWRkIGNhdXNlcyBhIE11dGF0aW9uT2JzZXJ2ZXIgbG9vcC5cbiAgICBBcnJheS5mcm9tKHRoaXMucXVlcnlTZWxlY3RvckFsbD8uKElTX0ZPQ1VTQUJMRV9RVUVSWSkgPz8gW10pLmZvckVhY2goKGVsOiBFbGVtZW50KSA9PlxuICAgICAgZWwuY2xhc3NMaXN0LnRvZ2dsZSgnc2JiLWFjdGlvbicsIHRydWUpLFxuICAgICk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxkaXYgY2xhc3M9XCJzYmItZmxpcC1jYXJkLWRldGFpbHMtLXdyYXBwZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInNiYi1mbGlwLWNhcmQtZGV0YWlsc1wiPlxuICAgICAgICAgIDxzbG90Pjwvc2xvdD5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItZmxpcC1jYXJkLWRldGFpbHMnOiBTYmJGbGlwQ2FyZERldGFpbHNFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztJQWtCTSw2QkFBeUIsTUFBQTs7MEJBRDlCLGNBQWMsdUJBQXVCLENBQUM7Ozs7b0JBQ0MseUJBQXlCLFVBQVU7QUFBM0MsRUFBQSxtQkFBUSxZQUFvQztBQUFBLElBRzFFLGNBQUE7QUFDRSxZQUFBO0FBRUEsV0FBSyxjQUNILElBQUksbUJBQW1CLE1BQU07QUFBQSxRQUMzQixRQUFRO0FBQUEsVUFDTixXQUFXO0FBQUEsVUFDWCxTQUFTO0FBQUEsVUFDVCxZQUFZO0FBQUEsVUFDWixpQkFBaUIsQ0FBQyxRQUFRLFlBQVksWUFBWSxPQUFPO0FBQUEsUUFBQTtBQUFBLFFBRTNELFVBQVUsTUFBTSxLQUFLLHdCQUFBO0FBQUEsTUFBdUIsQ0FDN0MsQ0FBQztBQUFBLElBRU47QUFBQSxJQUVnQixvQkFBaUI7QUFDL0IsWUFBTSxrQkFBQTtBQUNOLFdBQUssU0FBUztBQUFBLElBQ2hCO0FBQUEsSUFFUSwwQkFBdUI7QUFFN0IsWUFBTSxLQUFLLEtBQUssbUJBQW1CLGtCQUFrQixLQUFLLENBQUEsQ0FBRSxFQUFFLFFBQVEsQ0FBQyxPQUNyRSxHQUFHLFVBQVUsT0FBTyxjQUFjLElBQUksQ0FBQztBQUFBLElBRTNDO0FBQUEsSUFFbUIsU0FBTTtBQUN2QixhQUFPO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsSUFPVDtBQUFBOztBQXZDRixpQkFBQSxNQUFBLG1CQUFBLEVBQUEsT0FBQSxXQUFBLEdBQUEsa0JBQUEsRUFBQSxNQUFBLFNBQUEsTUFBQSxXQUFBLE1BQUEsVUFBQSxVQUFBLEdBQUEsTUFBQSx1QkFBQTs7O1FBQ3lCLEdBQUEsU0FBeUIsQ0FBQyxpQkFBaUIsS0FBSyxHQURuRSxrQkFBQSxZQUFBLHVCQUFBLEdBQTBCOzs7In0=
82
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxpcC1jYXJkLWRldGFpbHMuY29tcG9uZW50LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvZmxpcC1jYXJkL2ZsaXAtY2FyZC1kZXRhaWxzL2ZsaXAtY2FyZC1kZXRhaWxzLmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBNdXRhdGlvbkNvbnRyb2xsZXIgfSBmcm9tICdAbGl0LWxhYnMvb2JzZXJ2ZXJzL211dGF0aW9uLWNvbnRyb2xsZXIuanMnO1xuaW1wb3J0IHR5cGUgeyBDU1NSZXN1bHRHcm91cCwgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgaHRtbCwgTGl0RWxlbWVudCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgeyBJU19GT0NVU0FCTEVfUVVFUlkgfSBmcm9tICcuLi8uLi9jb3JlL2ExMXkudHMnO1xuaW1wb3J0IHsgU2JiRWxlbWVudEludGVybmFsc01peGluIH0gZnJvbSAnLi4vLi4vY29yZS9taXhpbnMudHMnO1xuaW1wb3J0IHsgYm94U2l6aW5nU3R5bGVzIH0gZnJvbSAnLi4vLi4vY29yZS9zdHlsZXMudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9mbGlwLWNhcmQtZGV0YWlscy5zY3NzP2xpdCZpbmxpbmUnO1xuXG4vKipcbiAqIENvbWJpbmVkIHdpdGggYSBgc2JiLWZsaXAtY2FyZGAsIGl0IGRpc3BsYXlzIGl0cyBjb250ZW50IHdoZW4gdGhlIGNhcmQgaXMgZmxpcHBlZC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIHByb3ZpZGUgYW55IGtpbmQgb2YgY29udGVudC5cbiAqL1xuZXhwb3J0XG5AY3VzdG9tRWxlbWVudCgnc2JiLWZsaXAtY2FyZC1kZXRhaWxzJylcbmNsYXNzIFNiYkZsaXBDYXJkRGV0YWlsc0VsZW1lbnQgZXh0ZW5kcyBTYmJFbGVtZW50SW50ZXJuYWxzTWl4aW4oTGl0RWxlbWVudCkge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbYm94U2l6aW5nU3R5bGVzLCBzdHlsZV07XG5cbiAgcHVibGljIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG5cbiAgICB0aGlzLmFkZENvbnRyb2xsZXIoXG4gICAgICBuZXcgTXV0YXRpb25Db250cm9sbGVyKHRoaXMsIHtcbiAgICAgICAgY29uZmlnOiB7XG4gICAgICAgICAgY2hpbGRMaXN0OiB0cnVlLFxuICAgICAgICAgIHN1YnRyZWU6IHRydWUsXG4gICAgICAgICAgYXR0cmlidXRlczogdHJ1ZSxcbiAgICAgICAgICBhdHRyaWJ1dGVGaWx0ZXI6IFsnaHJlZicsICd0YWJpbmRleCcsICdkaXNhYmxlZCcsICdpbmVydCddLFxuICAgICAgICB9LFxuICAgICAgICBjYWxsYmFjazogKCkgPT4gdGhpcy5fY2hlY2tGb3JTbG90dGVkQWN0aW9ucygpLFxuICAgICAgfSksXG4gICAgKTtcbiAgfVxuXG4gIHB1YmxpYyBvdmVycmlkZSBjb25uZWN0ZWRDYWxsYmFjaygpOiB2b2lkIHtcbiAgICBzdXBlci5jb25uZWN0ZWRDYWxsYmFjaygpO1xuICAgIHRoaXMuc2xvdCB8fD0gJ2RldGFpbHMnO1xuICB9XG5cbiAgcHJpdmF0ZSBfY2hlY2tGb3JTbG90dGVkQWN0aW9ucygpOiB2b2lkIHtcbiAgICAvLyBXZSBpbnRlbnRpb25hbGx5IHVzZSB0b2dnbGUgaGVyZSwgYXMgYWRkIGNhdXNlcyBhIE11dGF0aW9uT2JzZXJ2ZXIgbG9vcC5cbiAgICBBcnJheS5mcm9tKHRoaXMucXVlcnlTZWxlY3RvckFsbD8uKElTX0ZPQ1VTQUJMRV9RVUVSWSkgPz8gW10pLmZvckVhY2goKGVsOiBFbGVtZW50KSA9PlxuICAgICAgZWwuY2xhc3NMaXN0LnRvZ2dsZSgnc2JiLWFjdGlvbicsIHRydWUpLFxuICAgICk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxkaXYgY2xhc3M9XCJzYmItZmxpcC1jYXJkLWRldGFpbHNcIj5cbiAgICAgICAgPHNsb3Q+PC9zbG90PlxuICAgICAgPC9kaXY+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLWZsaXAtY2FyZC1kZXRhaWxzJzogU2JiRmxpcENhcmREZXRhaWxzRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztJQWtCTSw2QkFBeUIsTUFBQTs7MEJBRDlCLGNBQWMsdUJBQXVCLENBQUM7Ozs7b0JBQ0MseUJBQXlCLFVBQVU7QUFBM0MsRUFBQSxtQkFBUSxZQUFvQztBQUFBLElBRzFFLGNBQUE7QUFDRSxZQUFBO0FBRUEsV0FBSyxjQUNILElBQUksbUJBQW1CLE1BQU07QUFBQSxRQUMzQixRQUFRO0FBQUEsVUFDTixXQUFXO0FBQUEsVUFDWCxTQUFTO0FBQUEsVUFDVCxZQUFZO0FBQUEsVUFDWixpQkFBaUIsQ0FBQyxRQUFRLFlBQVksWUFBWSxPQUFPO0FBQUEsUUFBQTtBQUFBLFFBRTNELFVBQVUsTUFBTSxLQUFLLHdCQUFBO0FBQUEsTUFBdUIsQ0FDN0MsQ0FBQztBQUFBLElBRU47QUFBQSxJQUVnQixvQkFBaUI7QUFDL0IsWUFBTSxrQkFBQTtBQUNOLFdBQUssU0FBUztBQUFBLElBQ2hCO0FBQUEsSUFFUSwwQkFBdUI7QUFFN0IsWUFBTSxLQUFLLEtBQUssbUJBQW1CLGtCQUFrQixLQUFLLENBQUEsQ0FBRSxFQUFFLFFBQVEsQ0FBQyxPQUNyRSxHQUFHLFVBQVUsT0FBTyxjQUFjLElBQUksQ0FBQztBQUFBLElBRTNDO0FBQUEsSUFFbUIsU0FBTTtBQUN2QixhQUFPO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQUtUO0FBQUE7O0FBckNGLGlCQUFBLE1BQUEsbUJBQUEsRUFBQSxPQUFBLFdBQUEsR0FBQSxrQkFBQSxFQUFBLE1BQUEsU0FBQSxNQUFBLFdBQUEsTUFBQSxVQUFBLFVBQUEsR0FBQSxNQUFBLHVCQUFBOzs7UUFDeUIsR0FBQSxTQUF5QixDQUFDLGlCQUFpQixLQUFLLEdBRG5FLGtCQUFBLFlBQUEsdUJBQUEsR0FBMEI7OzsifQ==
package/development/flip-card/flip-card-summary/flip-card-summary.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"flip-card-summary.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements/flip-card/flip-card-summary/flip-card-summary.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAOvC,MAAM,MAAM,yBAAyB,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D;;;;;GAKG;AACH,qBAEM,yBAA0B,SAAQ,UAAU;IAChD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,8CAA8C;IAC9C,SACgB,cAAc,EAAE,yBAAyB,CAAW;IAEpD,iBAAiB,IAAI,IAAI;cAKtB,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,yBAAyB,CAAC;KACpD;CACF"}
1
+ {"version":3,"file":"flip-card-summary.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements/flip-card/flip-card-summary/flip-card-summary.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAOvC,MAAM,MAAM,yBAAyB,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D;;;;;GAKG;AACH,qBAEM,yBAA0B,SAAQ,UAAU;IAChD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,8CAA8C;IAC9C,SACgB,cAAc,EAAE,yBAAyB,CAAW;IAEpD,iBAAiB,IAAI,IAAI;cAKtB,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,yBAAyB,CAAC;KACpD;CACF"}
package/development/flip-card/flip-card-summary/flip-card-summary.component.js CHANGED
@@ -10,16 +10,10 @@ import { css, LitElement, html } from "lit";
10
10
  import { customElement, property } from "lit/decorators.js";
11
11
  import { boxSizingStyles } from "../../core/styles.js";
12
12
  const style = css`:host {
13
- --sbb-flip-card-summary-opacity: 1;
14
- --sbb-flip-card-summary-pointer-events: all;
15
- display: contents;
16
- }
17
-
18
- .sbb-flip-card-summary {
19
13
  display: grid;
20
14
  min-height: var(--sbb-flip-card-min-height);
21
- pointer-events: var(--sbb-flip-card-summary-pointer-events);
22
- opacity: var(--sbb-flip-card-summary-opacity);
15
+ pointer-events: var(--sbb-flip-card-summary-pointer-events, all);
16
+ opacity: var(--sbb-flip-card-summary-opacity, 1);
23
17
  border-radius: var(--sbb-flip-card-border-radius);
24
18
  overflow: hidden;
25
19
  grid-template-columns: minmax(0, 1fr);
@@ -29,22 +23,23 @@ const style = css`:host {
29
23
  transition: all var(--sbb-flip-card-summary-transition-duration) ease-out;
30
24
  transition-delay: var(--sbb-flip-card-summary-transition-delay);
31
25
  }
26
+
32
27
  @media (min-width: calc(37.5rem)) {
33
- :host([image-alignment=after]) .sbb-flip-card-summary {
28
+ :host([image-alignment=after]) {
34
29
  grid-template-columns: repeat(3, minmax(0, 1fr));
35
30
  grid-template-rows: 1fr;
36
31
  }
37
32
  }
38
33
  @media (min-width: calc(64rem)) {
39
- :host([image-alignment=after]) .sbb-flip-card-summary {
34
+ :host([image-alignment=after]) {
40
35
  grid-template-columns: repeat(2, minmax(0, 1fr));
41
36
  grid-template-rows: 1fr;
42
37
  }
43
38
  }
44
39
 
45
40
  ::slotted(sbb-title) {
46
- padding-inline: var(--sbb-spacing-responsive-s);
47
- padding-block: var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xs);
41
+ padding-inline: var(--sbb-flip-card-padding);
42
+ padding-block: var(--sbb-flip-card-padding) var(--sbb-flip-card-padding-block-end);
48
43
  margin: 0;
49
44
  grid-area: 1/1/2/2;
50
45
  }
@@ -111,11 +106,9 @@ let SbbFlipCardSummaryElement = (() => {
111
106
  }
112
107
  render() {
113
108
  return html`
114
- <div class="sbb-flip-card-summary">
115
- <slot></slot>
116
- <div class="sbb-flip-card-summary--image-wrapper">
117
- <slot name="image"></slot>
118
- </div>
109
+ <slot></slot>
110
+ <div class="sbb-flip-card-summary--image-wrapper">
111
+ <slot name="image"></slot>
119
112
  </div>
120
113
  `;
121
114
  }
@@ -134,4 +127,4 @@ let SbbFlipCardSummaryElement = (() => {
134
127
  export {
135
128
  SbbFlipCardSummaryElement
136
129
  };
137
- //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxpcC1jYXJkLXN1bW1hcnkuY29tcG9uZW50LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvZmxpcC1jYXJkL2ZsaXAtY2FyZC1zdW1tYXJ5L2ZsaXAtY2FyZC1zdW1tYXJ5LmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBodG1sLCBMaXRFbGVtZW50IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgeyBib3hTaXppbmdTdHlsZXMgfSBmcm9tICcuLi8uLi9jb3JlL3N0eWxlcy50cyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL2ZsaXAtY2FyZC1zdW1tYXJ5LnNjc3M/bGl0JmlubGluZSc7XG5cbmV4cG9ydCB0eXBlIFNiYkZsaXBDYXJkSW1hZ2VBbGlnbm1lbnQgPSAnYWZ0ZXInIHwgJ2JlbG93JztcblxuLyoqXG4gKiBDb21iaW5lZCB3aXRoIGEgYHNiYi1mbGlwLWNhcmRgLCBpdCBkaXNwbGF5cyBpdHMgY29udGVudCB3aGVuIHRoZSBjYXJkIGlzIG5vdCBmbGlwcGVkLlxuICpcbiAqIEBzbG90IC0gVXNlIHRoZSB1bm5hbWVkIHNsb3QgdG8gcHJvdmlkZSBhIHRpdGxlIGZvciB0aGUgYHNiYi1mbGlwLWNhcmQtc3VtbWFyeWAuXG4gKiBAc2xvdCBpbWFnZSAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBhbiBpbWFnZSBmb3IgdGhlIGBzYmItZmxpcC1jYXJkLXN1bW1hcnlgLlxuICovXG5leHBvcnRcbkBjdXN0b21FbGVtZW50KCdzYmItZmxpcC1jYXJkLXN1bW1hcnknKVxuY2xhc3MgU2JiRmxpcENhcmRTdW1tYXJ5RWxlbWVudCBleHRlbmRzIExpdEVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbYm94U2l6aW5nU3R5bGVzLCBzdHlsZV07XG5cbiAgLyoqIFRoZSBwb3NpdGlvbiB3aGVyZSB0byByZW5kZXIgdGhlIGltYWdlLiAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdpbWFnZS1hbGlnbm1lbnQnLCByZWZsZWN0OiB0cnVlIH0pXG4gIHB1YmxpYyBhY2Nlc3NvciBpbWFnZUFsaWdubWVudDogU2JiRmxpcENhcmRJbWFnZUFsaWdubWVudCA9ICdhZnRlcic7XG5cbiAgcHVibGljIG92ZXJyaWRlIGNvbm5lY3RlZENhbGxiYWNrKCk6IHZvaWQge1xuICAgIHN1cGVyLmNvbm5lY3RlZENhbGxiYWNrKCk7XG4gICAgdGhpcy5zbG90IHx8PSAnc3VtbWFyeSc7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxkaXYgY2xhc3M9XCJzYmItZmxpcC1jYXJkLXN1bW1hcnlcIj5cbiAgICAgICAgPHNsb3Q+PC9zbG90PlxuICAgICAgICA8ZGl2IGNsYXNzPVwic2JiLWZsaXAtY2FyZC1zdW1tYXJ5LS1pbWFnZS13cmFwcGVyXCI+XG4gICAgICAgICAgPHNsb3QgbmFtZT1cImltYWdlXCI+PC9zbG90PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIGA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi1mbGlwLWNhcmQtc3VtbWFyeSc6IFNiYkZsaXBDYXJkU3VtbWFyeUVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUFrQk0sNkJBQXlCLE1BQUE7OzBCQUQ5QixjQUFjLHVCQUF1QixDQUFDOzs7O29CQUNDOzs7O0FBQVIsRUFBQSxtQkFBUSxZQUFVO0FBQUE7O0FBS2hELDJEQUFBLGtCQUFBLE1BQUEsOEJBQTRELE9BQU87Ozs7SUFBbkUsSUFBZ0IsaUJBQWM7QUFBQSxhQUFBLG1CQUFBO0FBQUEsSUFBQTtBQUFBLElBQTlCLElBQWdCLGVBQWMsT0FBQTtBQUFBLHlCQUFBLGtDQUFBO0FBQUEsSUFBQTtBQUFBLElBRWQsb0JBQWlCO0FBQy9CLFlBQU0sa0JBQUE7QUFDTixXQUFLLFNBQVM7QUFBQSxJQUNoQjtBQUFBLElBRW1CLFNBQU07QUFDdkIsYUFBTztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsSUFRVDtBQUFBLEtBaEJBOztrQ0FEQyxTQUFTLEVBQUUsV0FBVyxtQkFBbUIsU0FBUyxLQUFBLENBQU0sQ0FBQztBQUMxRCxpQkFBQSxJQUFBLE1BQUEsNEJBQUEsRUFBQSxNQUFBLFlBQUEsTUFBQSxrQkFBQSxRQUFBLE9BQUEsU0FBQSxPQUFBLFFBQUEsRUFBQSxLQUFBLENBQUEsUUFBQSxvQkFBQSxLQUFBLEtBQUEsQ0FBQSxRQUFBLElBQWdCLGdCQUFjLEtBQUEsQ0FBQSxLQUFBLFVBQUE7QUFBQSxVQUFkLGlCQUFjO0FBQUEsSUFBQSxLQUFBLFVBQUEsVUFBQSxHQUFBLDhCQUFBLGlDQUFBO0FBTGhDLGlCQUFBLE1BQUEsbUJBQUEsRUFBQSxPQUFBLFdBQUEsR0FBQSxrQkFBQSxFQUFBLE1BQUEsU0FBQSxNQUFBLFdBQUEsTUFBQSxVQUFBLFVBQUEsR0FBQSxNQUFBLHVCQUFBOzs7UUFDeUIsR0FBQSxTQUF5QixDQUFDLGlCQUFpQixLQUFLLEdBRG5FLGtCQUFBLFlBQUEsdUJBQUEsR0FBMEI7OzsifQ==
130
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxpcC1jYXJkLXN1bW1hcnkuY29tcG9uZW50LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvZmxpcC1jYXJkL2ZsaXAtY2FyZC1zdW1tYXJ5L2ZsaXAtY2FyZC1zdW1tYXJ5LmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBodG1sLCBMaXRFbGVtZW50IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgeyBib3hTaXppbmdTdHlsZXMgfSBmcm9tICcuLi8uLi9jb3JlL3N0eWxlcy50cyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL2ZsaXAtY2FyZC1zdW1tYXJ5LnNjc3M/bGl0JmlubGluZSc7XG5cbmV4cG9ydCB0eXBlIFNiYkZsaXBDYXJkSW1hZ2VBbGlnbm1lbnQgPSAnYWZ0ZXInIHwgJ2JlbG93JztcblxuLyoqXG4gKiBDb21iaW5lZCB3aXRoIGEgYHNiYi1mbGlwLWNhcmRgLCBpdCBkaXNwbGF5cyBpdHMgY29udGVudCB3aGVuIHRoZSBjYXJkIGlzIG5vdCBmbGlwcGVkLlxuICpcbiAqIEBzbG90IC0gVXNlIHRoZSB1bm5hbWVkIHNsb3QgdG8gcHJvdmlkZSBhIHRpdGxlIGZvciB0aGUgYHNiYi1mbGlwLWNhcmQtc3VtbWFyeWAuXG4gKiBAc2xvdCBpbWFnZSAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBhbiBpbWFnZSBmb3IgdGhlIGBzYmItZmxpcC1jYXJkLXN1bW1hcnlgLlxuICovXG5leHBvcnRcbkBjdXN0b21FbGVtZW50KCdzYmItZmxpcC1jYXJkLXN1bW1hcnknKVxuY2xhc3MgU2JiRmxpcENhcmRTdW1tYXJ5RWxlbWVudCBleHRlbmRzIExpdEVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbYm94U2l6aW5nU3R5bGVzLCBzdHlsZV07XG5cbiAgLyoqIFRoZSBwb3NpdGlvbiB3aGVyZSB0byByZW5kZXIgdGhlIGltYWdlLiAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdpbWFnZS1hbGlnbm1lbnQnLCByZWZsZWN0OiB0cnVlIH0pXG4gIHB1YmxpYyBhY2Nlc3NvciBpbWFnZUFsaWdubWVudDogU2JiRmxpcENhcmRJbWFnZUFsaWdubWVudCA9ICdhZnRlcic7XG5cbiAgcHVibGljIG92ZXJyaWRlIGNvbm5lY3RlZENhbGxiYWNrKCk6IHZvaWQge1xuICAgIHN1cGVyLmNvbm5lY3RlZENhbGxiYWNrKCk7XG4gICAgdGhpcy5zbG90IHx8PSAnc3VtbWFyeSc7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxzbG90Pjwvc2xvdD5cbiAgICAgIDxkaXYgY2xhc3M9XCJzYmItZmxpcC1jYXJkLXN1bW1hcnktLWltYWdlLXdyYXBwZXJcIj5cbiAgICAgICAgPHNsb3QgbmFtZT1cImltYWdlXCI+PC9zbG90PlxuICAgICAgPC9kaXY+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLWZsaXAtY2FyZC1zdW1tYXJ5JzogU2JiRmxpcENhcmRTdW1tYXJ5RWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUFrQk0sNkJBQXlCLE1BQUE7OzBCQUQ5QixjQUFjLHVCQUF1QixDQUFDOzs7O29CQUNDOzs7O0FBQVIsRUFBQSxtQkFBUSxZQUFVO0FBQUE7O0FBS2hELDJEQUFBLGtCQUFBLE1BQUEsOEJBQTRELE9BQU87Ozs7SUFBbkUsSUFBZ0IsaUJBQWM7QUFBQSxhQUFBLG1CQUFBO0FBQUEsSUFBQTtBQUFBLElBQTlCLElBQWdCLGVBQWMsT0FBQTtBQUFBLHlCQUFBLGtDQUFBO0FBQUEsSUFBQTtBQUFBLElBRWQsb0JBQWlCO0FBQy9CLFlBQU0sa0JBQUE7QUFDTixXQUFLLFNBQVM7QUFBQSxJQUNoQjtBQUFBLElBRW1CLFNBQU07QUFDdkIsYUFBTztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQU1UO0FBQUEsS0FkQTs7a0NBREMsU0FBUyxFQUFFLFdBQVcsbUJBQW1CLFNBQVMsS0FBQSxDQUFNLENBQUM7QUFDMUQsaUJBQUEsSUFBQSxNQUFBLDRCQUFBLEVBQUEsTUFBQSxZQUFBLE1BQUEsa0JBQUEsUUFBQSxPQUFBLFNBQUEsT0FBQSxRQUFBLEVBQUEsS0FBQSxDQUFBLFFBQUEsb0JBQUEsS0FBQSxLQUFBLENBQUEsUUFBQSxJQUFnQixnQkFBYyxLQUFBLENBQUEsS0FBQSxVQUFBO0FBQUEsVUFBZCxpQkFBYztBQUFBLElBQUEsS0FBQSxVQUFBLFVBQUEsR0FBQSw4QkFBQSxpQ0FBQTtBQUxoQyxpQkFBQSxNQUFBLG1CQUFBLEVBQUEsT0FBQSxXQUFBLEdBQUEsa0JBQUEsRUFBQSxNQUFBLFNBQUEsTUFBQSxXQUFBLE1BQUEsVUFBQSxVQUFBLEdBQUEsTUFBQSx1QkFBQTs7O1FBQ3lCLEdBQUEsU0FBeUIsQ0FBQyxpQkFBaUIsS0FBSyxHQURuRSxrQkFBQSxZQUFBLHVCQUFBLEdBQTBCOzs7In0=
package/flip-card/flip-card/flip-card.component.js CHANGED
@@ -1,11 +1,11 @@
1
1
  var k = (t) => {
2
2
  throw TypeError(t);
3
3
  };
4
- var C = (t, e, s) => e.has(t) || k("Cannot " + s);
5
- var p = (t, e, s) => (C(t, e, "read from private field"), s ? s.call(t) : e.get(t)), m = (t, e, s) => e.has(t) ? k("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), b = (t, e, s, r) => (C(t, e, "write to private field"), r ? r.call(t, s) : e.set(t, s), s);
4
+ var C = (t, e, a) => e.has(t) || k("Cannot " + a);
5
+ var p = (t, e, a) => (C(t, e, "read from private field"), a ? a.call(t) : e.get(t)), m = (t, e, a) => e.has(t) ? k("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, a), b = (t, e, a, r) => (C(t, e, "write to private field"), r ? r.call(t, a) : e.set(t, a), a);
6
6
  import { __esDecorate as f, __runInitializers as d } from "tslib";
7
- import { ResizeController as w } from "@lit-labs/observers/resize-controller.js";
8
- import { css as S, LitElement as L, isServer as z, html as E } from "lit";
7
+ import { ResizeController as S } from "@lit-labs/observers/resize-controller.js";
8
+ import { css as L, LitElement as w, isServer as E, html as z } from "lit";
9
9
  import { customElement as I, property as D, state as $ } from "lit/decorators.js";
10
10
  import { until as A } from "lit/directives/until.js";
11
11
  import { IS_FOCUSABLE_QUERY as H } from "../../core/a11y.js";
@@ -16,16 +16,16 @@ import { SbbHydrationMixin as T, SbbElementInternalsMixin as j, ɵstateControlle
16
16
  import { boxSizingStyles as U } from "../../core/styles.js";
17
17
  import "../../button/secondary-button-static.js";
18
18
  import "../../screen-reader-only.js";
19
- const B = S`:host{--sbb-flip-card-toggle-icon-transform: rotate(0);--sbb-flip-card-background-color: var(--sbb-background-color-4);--sbb-flip-card-border-radius: var(--sbb-border-radius-4x);--sbb-flip-card-min-height: 17.5rem;--sbb-flip-card-summary-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-flip-card-summary-transition-delay: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-flip-card-details-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );position:relative;display:block}@media(min-width:64rem){:host{--sbb-flip-card-min-height: 20rem}}@media(any-hover:hover){:host(:hover){--sbb-flip-card-background-color: color-mix(in srgb, var(--sbb-color-cloud) 80%, transparent);--sbb-flip-card-background-color: light-dark( color-mix(in srgb, var(--sbb-color-cloud) 80%, transparent), var(--sbb-color-iron) );--sbb-flip-card-translate-title-y-hover: -.0625rem}}:host(:is(:state(flipped),[state--flipped])){--sbb-flip-card-toggle-icon-transform: rotate(45deg);--sbb-flip-card-details-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-flip-card-summary-transition-delay: 0s}:host(:is(:state(flipped),[state--flipped])) ::slotted(sbb-flip-card-summary){--sbb-flip-card-summary-opacity: 0;--sbb-flip-card-summary-pointer-events: none}:host(:is(:state(flipped),[state--flipped])) ::slotted(sbb-flip-card-details){--sbb-flip-card-details-opacity: 1;--sbb-flip-card-details-translate-y: 0}@media(min-width:37.5rem)and (max-width:63.9375rem){:host(:is(:state(image-alignment-after),[state--image-alignment-after])){--sbb-flip-card-min-height: 15rem}}@media(min-width:90rem){:host(:is(:state(image-alignment-after),[state--image-alignment-after])){--sbb-flip-card-min-height: 25rem}}.sbb-flip-card{position:relative;display:flex;height:100%;flex-flow:wrap;flex-direction:column;gap:var(--sbb-spacing-responsive-xs);min-height:var(--sbb-flip-card-min-height);background-color:var(--sbb-flip-card-background-color);border-radius:var(--sbb-flip-card-border-radius);transition:all var(--sbb-flip-card-summary-transition-duration) ease-out,min-height var(--sbb-flip-card-details-transition-duration);transition-delay:var(--sbb-flip-card-summary-transition-delay);cursor:var(--sbb-cursor-pointer)}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card{min-height:max(var(--sbb-flip-card-min-height),var(--sbb-flip-card-details-height))}@media(forced-colors:active){.sbb-flip-card:after{content:"";border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-flip-card-border-radius);position:absolute;inset:0;pointer-events:none}}@media(forced-colors:active)and (any-hover:hover){:host(:hover) .sbb-flip-card:after{border-color:Highlight}}.sbb-flip-card:before{content:"";opacity:0;pointer-events:none;position:absolute;inset-inline-start:var(--sbb-spacing-responsive-s);inset-block-end:var(--sbb-spacing-responsive-s);background-color:var(--sbb-color-midnight);background-color:light-dark(var(--sbb-color-midnight),var(--sbb-color-iron));width:var(--sbb-size-element-xs);height:var(--sbb-size-element-xs);border-radius:16rem;transition:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-3x)) ease-out}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card:before{opacity:1;inset-inline-start:0;inset-block-end:0;width:100%;height:100%;border-radius:var(--sbb-flip-card-border-radius);transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-5x))}.sbb-flip-card--toggle-button{position:absolute;inset-inline-start:var(--sbb-spacing-responsive-s);inset-block-end:var(--sbb-spacing-responsive-s)}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card--toggle-button{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-flip-card--toggle-button-icon{transform:var(--sbb-flip-card-toggle-icon-transform);transition:transform var(--sbb-flip-card-summary-transition-duration) ease-out}.sbb-flip-card-button{appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;position:absolute;inset:0;width:100%;border-radius:var(--sbb-flip-card-border-radius);cursor:var(--sbb-cursor-pointer)}.sbb-flip-card-button:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}`;
19
+ const B = L`:host{--sbb-flip-card-summary-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-flip-card-summary-transition-delay: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-flip-card-details-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );position:relative;display:block}@media(any-hover:hover){:host(:hover){--sbb-flip-card-background-color: color-mix(in srgb, var(--sbb-color-cloud) 80%, transparent);--sbb-flip-card-background-color: light-dark( color-mix(in srgb, var(--sbb-color-cloud) 80%, transparent), var(--sbb-color-iron) );--sbb-flip-card-translate-title-y-hover: -.0625rem}}:host(:is(:state(flipped),[state--flipped])){--sbb-flip-card-toggle-icon-transform: rotate(45deg);--sbb-flip-card-details-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-flip-card-summary-transition-delay: 0s}:host(:is(:state(flipped),[state--flipped])) ::slotted(sbb-flip-card-summary){--sbb-flip-card-summary-opacity: 0;--sbb-flip-card-summary-pointer-events: none}:host(:is(:state(flipped),[state--flipped])) ::slotted(sbb-flip-card-details){--sbb-flip-card-details-opacity: 1;--sbb-flip-card-details-translate-y: 0}@media(min-width:37.5rem)and (max-width:63.9375rem){:host(:is(:state(image-alignment-after),[state--image-alignment-after])){--sbb-flip-card-min-height: 15rem}}@media(min-width:90rem){:host(:is(:state(image-alignment-after),[state--image-alignment-after])){--sbb-flip-card-min-height: 25rem}}.sbb-flip-card{position:relative;display:flex;height:100%;flex-flow:wrap;flex-direction:column;min-height:var(--sbb-flip-card-min-height);background-color:var(--sbb-flip-card-background-color);border-radius:var(--sbb-flip-card-border-radius);transition:all var(--sbb-flip-card-summary-transition-duration) ease-out,min-height var(--sbb-flip-card-details-transition-duration);transition-delay:var(--sbb-flip-card-summary-transition-delay);cursor:var(--sbb-cursor-pointer)}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card{min-height:max(var(--sbb-flip-card-min-height),var(--sbb-flip-card-details-height))}@media(forced-colors:active){.sbb-flip-card:after{content:"";border:var(--sbb-flip-card-border) solid CanvasText;border-radius:var(--sbb-flip-card-border-radius);position:absolute;inset:0;pointer-events:none}}@media(forced-colors:active)and (any-hover:hover){:host(:hover) .sbb-flip-card:after{border-color:Highlight}}.sbb-flip-card:before{content:"";opacity:0;pointer-events:none;position:absolute;inset-inline-start:var(--sbb-flip-card-padding);inset-block-end:var(--sbb-flip-card-padding);background-color:var(--sbb-color-midnight);background-color:light-dark(var(--sbb-color-midnight),var(--sbb-color-iron));width:var(--sbb-flip-card-button-dimensions);height:var(--sbb-flip-card-button-dimensions);border-radius:16rem;transition:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-3x)) ease-out}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card:before{opacity:1;inset-inline-start:0;inset-block-end:0;width:100%;height:100%;border-radius:var(--sbb-flip-card-border-radius);transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-5x))}.sbb-flip-card--toggle-button{position:absolute;inset-inline-start:var(--sbb-flip-card-padding);inset-block-end:var(--sbb-flip-card-padding)}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card--toggle-button{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-flip-card--toggle-button-icon{transform:var(--sbb-flip-card-toggle-icon-transform, none);transition:transform var(--sbb-flip-card-summary-transition-duration) ease-out}.sbb-flip-card-button{appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;position:absolute;inset:0;width:100%;border-radius:var(--sbb-flip-card-border-radius);cursor:var(--sbb-cursor-pointer)}.sbb-flip-card-button:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}`;
20
20
  let rt = (() => {
21
21
  var o, n, l;
22
- let t = [I("sbb-flip-card")], e, s = [], r, h = T(j(L)), u, g = [], v = [], _, y = [], x = [];
23
- return l = class extends h {
22
+ let t = [I("sbb-flip-card")], e, a = [], r, u = T(j(w)), h, g = [], v = [], _, y = [], x = [];
23
+ return l = class extends u {
24
24
  constructor() {
25
25
  super();
26
26
  m(this, o);
27
27
  m(this, n);
28
- b(this, o, d(this, g, "")), b(this, n, (d(this, v), d(this, y, !1))), this._language = (d(this, x), new R(this)), this._cardDetailsResizeObserver = new w(this, {
28
+ b(this, o, d(this, g, "")), b(this, n, (d(this, v), d(this, y, !1))), this._language = (d(this, x), new R(this)), this._cardDetailsResizeObserver = new S(this, {
29
29
  target: null,
30
30
  skipInitial: !0,
31
31
  callback: () => this._setCardDetailsHeight()
@@ -79,10 +79,10 @@ let rt = (() => {
79
79
  this.style?.setProperty("--sbb-flip-card-details-height", `${i}px`);
80
80
  }
81
81
  async _accessibilityLabel() {
82
- return z ? "" : (await this.hydrationComplete, this._flipped ? P[this._language.current] : `${(this.accessibilityLabel ? this.accessibilityLabel : this.summary?.textContent?.trim()) ?? ""}, ${M[this._language.current]}`);
82
+ return E ? "" : (await this.hydrationComplete, this._flipped ? P[this._language.current] : `${(this.accessibilityLabel ? this.accessibilityLabel : this.summary?.textContent?.trim()) ?? ""}, ${M[this._language.current]}`);
83
83
  }
84
84
  render() {
85
- return E`
85
+ return z`
86
86
  <div class="sbb-flip-card">
87
87
  <button
88
88
  class="sbb-flip-card-button"
@@ -104,15 +104,15 @@ let rt = (() => {
104
104
  `;
105
105
  }
106
106
  }, o = new WeakMap(), n = new WeakMap(), r = l, (() => {
107
- const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
108
- u = [F(), D({ attribute: "accessibility-label" })], _ = [$()], f(l, null, u, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (a) => "accessibilityLabel" in a, get: (a) => a.accessibilityLabel, set: (a, c) => {
109
- a.accessibilityLabel = c;
110
- } }, metadata: i }, g, v), f(l, null, _, { kind: "accessor", name: "_flipped", static: !1, private: !1, access: { has: (a) => "_flipped" in a, get: (a) => a._flipped, set: (a, c) => {
111
- a._flipped = c;
112
- } }, metadata: i }, y, x), f(null, e = { value: r }, t, { kind: "class", name: r.name, metadata: i }, null, s), r = e.value, i && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
107
+ const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
108
+ h = [F(), D({ attribute: "accessibility-label" })], _ = [$()], f(l, null, h, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (s) => "accessibilityLabel" in s, get: (s) => s.accessibilityLabel, set: (s, c) => {
109
+ s.accessibilityLabel = c;
110
+ } }, metadata: i }, g, v), f(l, null, _, { kind: "accessor", name: "_flipped", static: !1, private: !1, access: { has: (s) => "_flipped" in s, get: (s) => s._flipped, set: (s, c) => {
111
+ s._flipped = c;
112
+ } }, metadata: i }, y, x), f(null, e = { value: r }, t, { kind: "class", name: r.name, metadata: i }, null, a), r = e.value, i && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
113
113
  })(), l.styles = [U, B], l.events = {
114
114
  flip: "flip"
115
- }, d(r, s), r;
115
+ }, d(r, a), r;
116
116
  })();
117
117
  export {
118
118
  rt as SbbFlipCardElement
package/flip-card/flip-card-details/flip-card-details.component.js CHANGED
@@ -1,15 +1,15 @@
1
1
  import { __esDecorate as o, __runInitializers as n } from "tslib";
2
2
  import { MutationController as d } from "@lit-labs/observers/mutation-controller.js";
3
- import { css as b, LitElement as c, html as p } from "lit";
4
- import { customElement as f } from "lit/decorators.js";
5
- import { IS_FOCUSABLE_QUERY as m } from "../../core/a11y.js";
6
- import { SbbElementInternalsMixin as u } from "../../core/mixins.js";
3
+ import { css as c, LitElement as b, html as p } from "lit";
4
+ import { customElement as m } from "lit/decorators.js";
5
+ import { IS_FOCUSABLE_QUERY as u } from "../../core/a11y.js";
6
+ import { SbbElementInternalsMixin as f } from "../../core/mixins.js";
7
7
  import { boxSizingStyles as v } from "../../core/styles.js";
8
- const y = b`:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-flip-card-details-opacity: 0;--sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);--sbb-flip-card-details-transition-delay: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-flip-card-details-padding: var(--sbb-spacing-responsive-s);--sbb-flip-card-details-padding-block-end: calc( var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m) );display:contents}.sbb-flip-card-details--wrapper{position:absolute;pointer-events:none;color:var(--sbb-color-milk);opacity:var(--sbb-flip-card-details-opacity);transform:translateY(var(--sbb-flip-card-details-translate-y));transition-property:transform,opacity;transition-duration:var(--sbb-flip-card-details-transition-duration)}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card-details--wrapper{transition-delay:var(--sbb-flip-card-details-transition-delay),var(--sbb-flip-card-details-transition-delay)}.sbb-flip-card-details{overflow:hidden;padding:var(--sbb-flip-card-details-padding);padding-block-end:var(--sbb-flip-card-details-padding-block-end)}`;
9
- let w = (() => {
8
+ const y = c`:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-flip-card-details-transition-delay: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-flip-card-details-padding-block-end: calc( var(--sbb-flip-card-padding) + var(--sbb-flip-card-padding-block-end) + var(--sbb-button-min-height-size-s) );display:block;position:absolute;pointer-events:none;color:var(--sbb-color-milk);opacity:var(--sbb-flip-card-details-opacity, 0);transform:translateY(var(--sbb-flip-card-details-translate-y));transition-property:transform,opacity;transition-duration:var(--sbb-flip-card-details-transition-duration)}:host(:is(:state(flipped),[state--flipped])){transition-delay:var(--sbb-flip-card-details-transition-delay),var(--sbb-flip-card-details-transition-delay)}.sbb-flip-card-details{overflow:hidden;padding:var(--sbb-flip-card-padding);padding-block-end:var(--sbb-flip-card-details-padding-block-end)}`;
9
+ let C = (() => {
10
10
  var a;
11
- let l = [f("sbb-flip-card-details")], s, i = [], t, r = u(c);
12
- return a = class extends r {
11
+ let l = [m("sbb-flip-card-details")], i, r = [], t, s = f(b);
12
+ return a = class extends s {
13
13
  constructor() {
14
14
  super(), this.addController(new d(this, {
15
15
  config: {
@@ -25,22 +25,20 @@ let w = (() => {
25
25
  super.connectedCallback(), this.slot ||= "details";
26
26
  }
27
27
  _checkForSlottedActions() {
28
- Array.from(this.querySelectorAll?.(m) ?? []).forEach((e) => e.classList.toggle("sbb-action", !0));
28
+ Array.from(this.querySelectorAll?.(u) ?? []).forEach((e) => e.classList.toggle("sbb-action", !0));
29
29
  }
30
30
  render() {
31
31
  return p`
32
- <div class="sbb-flip-card-details--wrapper">
33
- <div class="sbb-flip-card-details">
34
- <slot></slot>
35
- </div>
32
+ <div class="sbb-flip-card-details">
33
+ <slot></slot>
36
34
  </div>
37
35
  `;
38
36
  }
39
37
  }, t = a, (() => {
40
- const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
41
- o(null, s = { value: t }, l, { kind: "class", name: t.name, metadata: e }, null, i), t = s.value, e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
42
- })(), a.styles = [v, y], n(t, i), t;
38
+ const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
39
+ o(null, i = { value: t }, l, { kind: "class", name: t.name, metadata: e }, null, r), t = i.value, e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
40
+ })(), a.styles = [v, y], n(t, r), t;
43
41
  })();
44
42
  export {
45
- w as SbbFlipCardDetailsElement
43
+ C as SbbFlipCardDetailsElement
46
44
  };
package/flip-card/flip-card-summary/flip-card-summary.component.js CHANGED
@@ -1,20 +1,20 @@
1
- var g = (a) => {
1
+ var b = (a) => {
2
2
  throw TypeError(a);
3
3
  };
4
- var p = (a, e, t) => e.has(a) || g("Cannot " + t);
5
- var u = (a, e, t) => (p(a, e, "read from private field"), t ? t.call(a) : e.get(a)), f = (a, e, t) => e.has(a) ? g("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(a) : e.set(a, t), h = (a, e, t, i) => (p(a, e, "write to private field"), i ? i.call(a, t) : e.set(a, t), t);
4
+ var p = (a, e, t) => e.has(a) || b("Cannot " + t);
5
+ var u = (a, e, t) => (p(a, e, "read from private field"), t ? t.call(a) : e.get(a)), f = (a, e, t) => e.has(a) ? b("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(a) : e.set(a, t), h = (a, e, t, i) => (p(a, e, "write to private field"), i ? i.call(a, t) : e.set(a, t), t);
6
6
  import { __esDecorate as y, __runInitializers as l } from "tslib";
7
7
  import { css as _, LitElement as w, html as x } from "lit";
8
8
  import { customElement as A, property as S } from "lit/decorators.js";
9
9
  import { boxSizingStyles as k } from "../../core/styles.js";
10
- const z = _`:host{--sbb-flip-card-summary-opacity: 1;--sbb-flip-card-summary-pointer-events: all;display:contents}.sbb-flip-card-summary{display:grid;min-height:var(--sbb-flip-card-min-height);pointer-events:var(--sbb-flip-card-summary-pointer-events);opacity:var(--sbb-flip-card-summary-opacity);border-radius:var(--sbb-flip-card-border-radius);overflow:hidden;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;transition:all var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay)}@media(min-width:37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}}@media(min-width:64rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr}}::slotted(sbb-title){padding-inline:var(--sbb-spacing-responsive-s);padding-block:var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xs);margin:0;grid-area:1/1/2/2}@media(min-width:37.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/3}}@media(min-width:64rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/2}}::slotted(*:not([slot=image])){transform:translateY(var(--sbb-flip-card-translate-title-y-hover, 0rem));transition:transform var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x)) var(--sbb-animation-easing)}.sbb-flip-card-summary--image-wrapper{grid-area:2/1/3/2}@media(min-width:37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/3/2/4}}@media(min-width:64rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/2/2/3}}::slotted([slot=image]){width:100%;height:100%}`;
10
+ const z = _`:host{display:grid;min-height:var(--sbb-flip-card-min-height);pointer-events:var(--sbb-flip-card-summary-pointer-events, all);opacity:var(--sbb-flip-card-summary-opacity, 1);border-radius:var(--sbb-flip-card-border-radius);overflow:hidden;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;transition:all var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay)}@media(min-width:37.5rem){:host([image-alignment=after]){grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}}@media(min-width:64rem){:host([image-alignment=after]){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr}}::slotted(sbb-title){padding-inline:var(--sbb-flip-card-padding);padding-block:var(--sbb-flip-card-padding) var(--sbb-flip-card-padding-block-end);margin:0;grid-area:1/1/2/2}@media(min-width:37.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/3}}@media(min-width:64rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/2}}::slotted(*:not([slot=image])){transform:translateY(var(--sbb-flip-card-translate-title-y-hover, 0rem));transition:transform var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x)) var(--sbb-animation-easing)}.sbb-flip-card-summary--image-wrapper{grid-area:2/1/3/2}@media(min-width:37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/3/2/4}}@media(min-width:64rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/2/2/3}}::slotted([slot=image]){width:100%;height:100%}`;
11
11
  let F = (() => {
12
12
  var m, r;
13
- let a = [A("sbb-flip-card-summary")], e, t = [], i, o = w, d, b = [], c = [];
14
- return r = class extends o {
13
+ let a = [A("sbb-flip-card-summary")], e, t = [], i, d = w, o, g = [], c = [];
14
+ return r = class extends d {
15
15
  constructor() {
16
16
  super(...arguments);
17
- f(this, m, l(this, b, "after"));
17
+ f(this, m, l(this, g, "after"));
18
18
  l(this, c);
19
19
  }
20
20
  /** The position where to render the image. */
@@ -29,19 +29,17 @@ let F = (() => {
29
29
  }
30
30
  render() {
31
31
  return x`
32
- <div class="sbb-flip-card-summary">
33
- <slot></slot>
34
- <div class="sbb-flip-card-summary--image-wrapper">
35
- <slot name="image"></slot>
36
- </div>
32
+ <slot></slot>
33
+ <div class="sbb-flip-card-summary--image-wrapper">
34
+ <slot name="image"></slot>
37
35
  </div>
38
36
  `;
39
37
  }
40
38
  }, m = new WeakMap(), i = r, (() => {
41
- const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
42
- d = [S({ attribute: "image-alignment", reflect: !0 })], y(r, null, d, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (n) => "imageAlignment" in n, get: (n) => n.imageAlignment, set: (n, v) => {
39
+ const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
40
+ o = [S({ attribute: "image-alignment", reflect: !0 })], y(r, null, o, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (n) => "imageAlignment" in n, get: (n) => n.imageAlignment, set: (n, v) => {
43
41
  n.imageAlignment = v;
44
- } }, metadata: s }, b, c), y(null, e = { value: i }, a, { kind: "class", name: i.name, metadata: s }, null, t), i = e.value, s && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
42
+ } }, metadata: s }, g, c), y(null, e = { value: i }, a, { kind: "class", name: i.name, metadata: s }, null, t), i = e.value, s && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
45
43
  })(), r.styles = [k, z], l(i, t), i;
46
44
  })();
47
45
  export {
package/off-brand-theme.css CHANGED
@@ -1564,6 +1564,14 @@ summary {
1564
1564
  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1565
1565
  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1566
1566
  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
1567
+ --sbb-flip-card-background-color: var(--sbb-background-color-4);
1568
+ --sbb-flip-card-border: var(--sbb-border-width-2x);
1569
+ --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
1570
+ --sbb-flip-card-button-dimensions: var(--sbb-button-min-height-size-s);
1571
+ --sbb-flip-card-padding: var(--sbb-spacing-responsive-s);
1572
+ --sbb-flip-card-padding-block-end: var(--sbb-spacing-responsive-xs);
1573
+ --sbb-flip-card-min-height: 17.5rem;
1574
+ --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
1567
1575
  --sbb-footer-background-color: var(--sbb-background-color-3);
1568
1576
  --sbb-footer-clock-width: 4.75rem;
1569
1577
  --sbb-footer-color: var(--sbb-color-granite);
@@ -1801,6 +1809,7 @@ summary {
1801
1809
  --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
1802
1810
  --sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);
1803
1811
  --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x));
1812
+ --sbb-flip-card-min-height: 20rem;
1804
1813
  }
1805
1814
  :root.sbb-lean {
1806
1815
  --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -1884,6 +1893,15 @@ sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:sta
1884
1893
  padding-inline-end: 0;
1885
1894
  }
1886
1895
 
1896
+ sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
1897
+ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
1898
+ --sbb-image-aspect-ratio: auto;
1899
+ --sbb-image-object-fit: cover;
1900
+ border-radius: 0;
1901
+ display: block;
1902
+ height: 100%;
1903
+ }
1904
+
1887
1905
  :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
1888
1906
  --sbb-option-min-height: var(--sbb-size-element-xxs);
1889
1907
  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2174,15 +2192,6 @@ img {
2174
2192
  object-position: var(--sbb-image-object-position);
2175
2193
  }
2176
2194
 
2177
- sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
2178
- sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2179
- --sbb-image-aspect-ratio: auto;
2180
- --sbb-image-object-fit: cover;
2181
- border-radius: 0;
2182
- display: block;
2183
- height: 100%;
2184
- }
2185
-
2186
2195
  sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
2187
2196
  sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
2188
2197
  --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "4.7.0-dev.1773033279",
3
+ "version": "4.7.0-dev.1773045049",
4
4
  "description": "Lyne Design System",
5
5
  "keywords": [
6
6
  "design system",
7
7
  "web components",
8
8
  "lit",
9
9
  "storybook",
10
- "https://github.com/sbb-design-systems/lyne-components/commit/115535f95feb12b315b4a3fc6d1c83b3283547cf"
10
+ "https://github.com/sbb-design-systems/lyne-components/commit/e6fadf3502e2d02ec3a3008a6d4a7f14f8db307a"
11
11
  ],
12
12
  "type": "module",
13
13
  "exports": {
package/safety-theme.css CHANGED
@@ -1564,6 +1564,14 @@ summary {
1564
1564
  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1565
1565
  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1566
1566
  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
1567
+ --sbb-flip-card-background-color: var(--sbb-background-color-4);
1568
+ --sbb-flip-card-border: var(--sbb-border-width-2x);
1569
+ --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
1570
+ --sbb-flip-card-button-dimensions: var(--sbb-button-min-height-size-s);
1571
+ --sbb-flip-card-padding: var(--sbb-spacing-responsive-s);
1572
+ --sbb-flip-card-padding-block-end: var(--sbb-spacing-responsive-xs);
1573
+ --sbb-flip-card-min-height: 17.5rem;
1574
+ --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
1567
1575
  --sbb-footer-background-color: var(--sbb-background-color-3);
1568
1576
  --sbb-footer-clock-width: 4.75rem;
1569
1577
  --sbb-footer-color: var(--sbb-color-granite);
@@ -1801,6 +1809,7 @@ summary {
1801
1809
  --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
1802
1810
  --sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);
1803
1811
  --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x));
1812
+ --sbb-flip-card-min-height: 20rem;
1804
1813
  }
1805
1814
  :root.sbb-lean {
1806
1815
  --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -1884,6 +1893,15 @@ sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:sta
1884
1893
  padding-inline-end: 0;
1885
1894
  }
1886
1895
 
1896
+ sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
1897
+ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
1898
+ --sbb-image-aspect-ratio: auto;
1899
+ --sbb-image-object-fit: cover;
1900
+ border-radius: 0;
1901
+ display: block;
1902
+ height: 100%;
1903
+ }
1904
+
1887
1905
  :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
1888
1906
  --sbb-option-min-height: var(--sbb-size-element-xxs);
1889
1907
  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2174,15 +2192,6 @@ img {
2174
2192
  object-position: var(--sbb-image-object-position);
2175
2193
  }
2176
2194
 
2177
- sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
2178
- sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2179
- --sbb-image-aspect-ratio: auto;
2180
- --sbb-image-object-fit: cover;
2181
- border-radius: 0;
2182
- display: block;
2183
- height: 100%;
2184
- }
2185
-
2186
2195
  sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
2187
2196
  sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
2188
2197
  --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
package/standard-theme.css CHANGED
@@ -1564,6 +1564,14 @@ summary {
1564
1564
  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1565
1565
  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1566
1566
  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
1567
+ --sbb-flip-card-background-color: var(--sbb-background-color-4);
1568
+ --sbb-flip-card-border: var(--sbb-border-width-2x);
1569
+ --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
1570
+ --sbb-flip-card-button-dimensions: var(--sbb-button-min-height-size-s);
1571
+ --sbb-flip-card-padding: var(--sbb-spacing-responsive-s);
1572
+ --sbb-flip-card-padding-block-end: var(--sbb-spacing-responsive-xs);
1573
+ --sbb-flip-card-min-height: 17.5rem;
1574
+ --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
1567
1575
  --sbb-footer-background-color: var(--sbb-background-color-3);
1568
1576
  --sbb-footer-clock-width: 4.75rem;
1569
1577
  --sbb-footer-color: var(--sbb-color-granite);
@@ -1801,6 +1809,7 @@ summary {
1801
1809
  --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
1802
1810
  --sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);
1803
1811
  --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x));
1812
+ --sbb-flip-card-min-height: 20rem;
1804
1813
  }
1805
1814
  :root.sbb-lean {
1806
1815
  --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -1884,6 +1893,15 @@ sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:sta
1884
1893
  padding-inline-end: 0;
1885
1894
  }
1886
1895
 
1896
+ sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
1897
+ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
1898
+ --sbb-image-aspect-ratio: auto;
1899
+ --sbb-image-object-fit: cover;
1900
+ border-radius: 0;
1901
+ display: block;
1902
+ height: 100%;
1903
+ }
1904
+
1887
1905
  :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
1888
1906
  --sbb-option-min-height: var(--sbb-size-element-xxs);
1889
1907
  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2174,15 +2192,6 @@ img {
2174
2192
  object-position: var(--sbb-image-object-position);
2175
2193
  }
2176
2194
 
2177
- sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
2178
- sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2179
- --sbb-image-aspect-ratio: auto;
2180
- --sbb-image-object-fit: cover;
2181
- border-radius: 0;
2182
- display: block;
2183
- height: 100%;
2184
- }
2185
-
2186
2195
  sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
2187
2196
  sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
2188
2197
  --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);