@getflip/swirl-components 0.280.0 → 0.282.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/components.json +290 -6
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-carousel.cjs.entry.js +24 -3
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-resource-list-section.cjs.entry.js +2 -1
- package/dist/cjs/swirl-search.cjs.entry.js +1 -1
- package/dist/cjs/swirl-separator.cjs.entry.js +1 -1
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/swirl-carousel/swirl-carousel.css +47 -29
- package/dist/collection/components/swirl-carousel/swirl-carousel.js +111 -2
- package/dist/collection/components/swirl-carousel/swirl-carousel.spec.js +2 -2
- package/dist/collection/components/swirl-resource-list-section/swirl-resource-list-section.js +26 -1
- package/dist/collection/components/swirl-search/swirl-search.js +1 -1
- package/dist/collection/components/swirl-separator/swirl-separator.js +1 -1
- package/dist/collection/components/swirl-time-input/swirl-time-input.stories.js +0 -3
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-carousel.js +28 -3
- package/dist/components/swirl-resource-list-section.js +3 -1
- package/dist/components/swirl-search.js +1 -1
- package/dist/components/swirl-separator2.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-carousel.entry.js +24 -3
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-resource-list-section.entry.js +2 -1
- package/dist/esm/swirl-search.entry.js +1 -1
- package/dist/esm/swirl-separator.entry.js +1 -1
- package/dist/swirl-components/{p-9d8bd9a9.entry.js → p-41d68a99.entry.js} +1 -1
- package/dist/swirl-components/p-482429d8.entry.js +1 -0
- package/dist/swirl-components/p-81d45e69.entry.js +1 -0
- package/dist/swirl-components/{p-dd917716.entry.js → p-bd22e38d.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-carousel/swirl-carousel.d.ts +4 -0
- package/dist/types/components/swirl-resource-list-section/swirl-resource-list-section.d.ts +2 -0
- package/dist/types/components/swirl-time-input/swirl-time-input.stories.d.ts +0 -5
- package/dist/types/components.d.ts +16 -4
- package/package.json +1 -1
- package/vscode-data.json +151 -0
- package/dist/swirl-components/p-1f638038.entry.js +0 -1
- package/dist/swirl-components/p-d7a3b781.entry.js +0 -1
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
"components/swirl-progress-indicator/swirl-progress-indicator.js",
|
|
37
37
|
"components/swirl-radio/swirl-radio.js",
|
|
38
38
|
"components/swirl-resource-list-item/swirl-resource-list-item.js",
|
|
39
|
-
"components/swirl-search/swirl-search.js",
|
|
40
39
|
"components/swirl-separator/swirl-separator.js",
|
|
40
|
+
"components/swirl-search/swirl-search.js",
|
|
41
41
|
"components/swirl-shell-navigation-item/swirl-shell-navigation-item.js",
|
|
42
42
|
"components/swirl-skeleton-box/swirl-skeleton-box.js",
|
|
43
43
|
"components/swirl-skeleton-text/swirl-skeleton-text.js",
|
|
@@ -5,16 +5,10 @@
|
|
|
5
5
|
display: block;
|
|
6
6
|
overflow: hidden;
|
|
7
7
|
width: 100%;
|
|
8
|
-
margin-top: calc(-1 * var(--s-space-24));
|
|
9
|
-
margin-bottom: calc(-1 * var(--s-space-24));
|
|
10
8
|
}
|
|
11
9
|
|
|
12
|
-
:host(:hover) .carousel__previous-slide-button
|
|
13
|
-
|
|
14
|
-
opacity: 1;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
:host(:hover) .carousel__next-slide-button {
|
|
10
|
+
:host(:hover) .carousel__previous-slide-button,
|
|
11
|
+
:host(:hover) .carousel__next-slide-button {
|
|
18
12
|
pointer-events: auto;
|
|
19
13
|
opacity: 1;
|
|
20
14
|
}
|
|
@@ -29,14 +23,45 @@
|
|
|
29
23
|
width: 100%;
|
|
30
24
|
}
|
|
31
25
|
|
|
26
|
+
.carousel:before,
|
|
27
|
+
.carousel:after {
|
|
28
|
+
content: '';
|
|
29
|
+
width: var(--s-space-32);
|
|
30
|
+
height: 100%;
|
|
31
|
+
position: absolute;
|
|
32
|
+
top: 0;
|
|
33
|
+
z-index: 1;
|
|
34
|
+
pointer-events: none;
|
|
35
|
+
transition: opacity 0.2s;
|
|
36
|
+
opacity: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.carousel:before {
|
|
40
|
+
left: 0;
|
|
41
|
+
background: linear-gradient(90deg, var(--s-background-default) 0%, transparent 100%);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.carousel:after {
|
|
45
|
+
right: 0;
|
|
46
|
+
background: linear-gradient(270deg, var(--s-background-default) 0%, transparent 100%);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.carousel--fade:before,
|
|
50
|
+
.carousel--fade:after {
|
|
51
|
+
opacity: 1;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.carousel--is-at-start:before,
|
|
55
|
+
.carousel--is-at-end:after {
|
|
56
|
+
opacity: 0;
|
|
57
|
+
}
|
|
58
|
+
|
|
32
59
|
.carousel__slides {
|
|
33
60
|
position: relative;
|
|
34
61
|
display: flex;
|
|
35
62
|
overflow-x: auto;
|
|
36
63
|
overflow-y: hidden;
|
|
37
64
|
width: 100%;
|
|
38
|
-
padding: var(--s-space-24) var(--s-space-16);
|
|
39
|
-
scroll-padding: var(--s-space-16);
|
|
40
65
|
scrollbar-width: none;
|
|
41
66
|
scroll-snap-type: x mandatory;
|
|
42
67
|
scroll-behavior: smooth;
|
|
@@ -46,18 +71,21 @@
|
|
|
46
71
|
display: none;
|
|
47
72
|
}
|
|
48
73
|
|
|
49
|
-
.carousel__slides ::slotted(
|
|
74
|
+
.carousel__slides ::slotted(*:not(:first-of-type)) {
|
|
50
75
|
margin-left: var(--swirl-carousel-spacing);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.carousel__slides ::slotted(*) {
|
|
51
79
|
flex-grow: 0;
|
|
52
80
|
flex-shrink: 0;
|
|
53
81
|
scroll-snap-align: start;
|
|
54
82
|
}
|
|
55
83
|
|
|
56
|
-
.carousel__previous-slide-button
|
|
84
|
+
.carousel__previous-slide-button,
|
|
85
|
+
.carousel__next-slide-button {
|
|
57
86
|
position: absolute;
|
|
58
|
-
z-index:
|
|
87
|
+
z-index: 2;
|
|
59
88
|
top: calc(50% - var(--s-space-12));
|
|
60
|
-
left: var(--s-space-4);
|
|
61
89
|
visibility: hidden;
|
|
62
90
|
transition: opacity 0.2s;
|
|
63
91
|
transform: translateY(-50%) scale(0.72);
|
|
@@ -67,26 +95,16 @@
|
|
|
67
95
|
|
|
68
96
|
@media (min-width: 768px) {
|
|
69
97
|
|
|
70
|
-
.carousel__previous-slide-button
|
|
98
|
+
.carousel__previous-slide-button,
|
|
99
|
+
.carousel__next-slide-button {
|
|
71
100
|
visibility: visible
|
|
72
101
|
}
|
|
73
102
|
}
|
|
74
103
|
|
|
75
|
-
.
|
|
76
|
-
|
|
77
|
-
z-index: 1;
|
|
78
|
-
top: calc(50% - var(--s-space-12));
|
|
79
|
-
right: var(--s-space-4);
|
|
80
|
-
visibility: hidden;
|
|
81
|
-
transition: opacity 0.2s;
|
|
82
|
-
transform: translateY(-50%) scale(0.72);
|
|
83
|
-
pointer-events: none;
|
|
84
|
-
opacity: 0;
|
|
104
|
+
.carousel__previous-slide-button {
|
|
105
|
+
left: var(--s-space-4);
|
|
85
106
|
}
|
|
86
107
|
|
|
87
|
-
@media (min-width: 768px) {
|
|
88
|
-
|
|
89
108
|
.carousel__next-slide-button {
|
|
90
|
-
|
|
109
|
+
right: var(--s-space-4);
|
|
91
110
|
}
|
|
92
|
-
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import { debounce } from "../../utils";
|
|
3
|
+
import classnames from "classnames";
|
|
3
4
|
/**
|
|
4
5
|
* slot - The slides
|
|
5
6
|
*/
|
|
@@ -31,7 +32,11 @@ export class SwirlCarousel {
|
|
|
31
32
|
this.label = undefined;
|
|
32
33
|
this.nextSlideButtonLabel = "Next slide";
|
|
33
34
|
this.previousSlideButtonLabel = "Previous slide";
|
|
35
|
+
this.fade = false;
|
|
34
36
|
this.loopAround = false;
|
|
37
|
+
this.padding = "16";
|
|
38
|
+
this.paddingBlockEnd = undefined;
|
|
39
|
+
this.paddingBlockStart = undefined;
|
|
35
40
|
this.paddingInlineEnd = undefined;
|
|
36
41
|
this.paddingInlineStart = undefined;
|
|
37
42
|
this.spacing = "16";
|
|
@@ -109,6 +114,15 @@ export class SwirlCarousel {
|
|
|
109
114
|
render() {
|
|
110
115
|
this.el.style.setProperty("--swirl-carousel-spacing", `${this.spacing}px`);
|
|
111
116
|
const slidesStyles = {
|
|
117
|
+
padding: Boolean(this.padding)
|
|
118
|
+
? `var(--s-space-${this.padding})`
|
|
119
|
+
: undefined,
|
|
120
|
+
paddingBlockEnd: Boolean(this.paddingBlockEnd)
|
|
121
|
+
? `var(--s-space-${this.paddingBlockEnd})`
|
|
122
|
+
: undefined,
|
|
123
|
+
paddingBlockStart: Boolean(this.paddingBlockStart)
|
|
124
|
+
? `var(--s-space-${this.paddingBlockStart})`
|
|
125
|
+
: undefined,
|
|
112
126
|
paddingInlineEnd: Boolean(this.paddingInlineEnd)
|
|
113
127
|
? `var(--s-space-${this.paddingInlineEnd})`
|
|
114
128
|
: undefined,
|
|
@@ -117,9 +131,16 @@ export class SwirlCarousel {
|
|
|
117
131
|
: undefined,
|
|
118
132
|
scrollPadding: Boolean(this.paddingInlineStart)
|
|
119
133
|
? `var(--s-space-${this.paddingInlineStart})`
|
|
120
|
-
:
|
|
134
|
+
: Boolean(this.padding)
|
|
135
|
+
? `var(--s-space-${this.padding})`
|
|
136
|
+
: undefined,
|
|
121
137
|
};
|
|
122
|
-
|
|
138
|
+
const className = classnames("carousel", {
|
|
139
|
+
"carousel--fade": this.fade,
|
|
140
|
+
"carousel--is-at-start": this.isAtStart,
|
|
141
|
+
"carousel--is-at-end": this.isAtEnd,
|
|
142
|
+
});
|
|
143
|
+
return (h(Host, { key: '7a23607d98ec5bc759fdcae7ba70df9a6940f187', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: '1223f0cd4acd6556cce428276f2664201bddbad0', class: className }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: '86a5e0b334e7bff828bb2477cf912d54b9489f2e', class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { key: '794a310026cec6b9203a99207e2aa4e732ff9e01', class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { key: '98179d7a5467375248823e59e5f8d1f080d5b39c', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '0ff0113a8d91b2366b517da4ef9d9219062d32b0', onSlotchange: this.onSlotChange })))));
|
|
123
144
|
}
|
|
124
145
|
static get is() { return "swirl-carousel"; }
|
|
125
146
|
static get encapsulation() { return "shadow"; }
|
|
@@ -188,6 +209,24 @@ export class SwirlCarousel {
|
|
|
188
209
|
"reflect": false,
|
|
189
210
|
"defaultValue": "\"Previous slide\""
|
|
190
211
|
},
|
|
212
|
+
"fade": {
|
|
213
|
+
"type": "boolean",
|
|
214
|
+
"mutable": false,
|
|
215
|
+
"complexType": {
|
|
216
|
+
"original": "boolean",
|
|
217
|
+
"resolved": "boolean",
|
|
218
|
+
"references": {}
|
|
219
|
+
},
|
|
220
|
+
"required": false,
|
|
221
|
+
"optional": true,
|
|
222
|
+
"docs": {
|
|
223
|
+
"tags": [],
|
|
224
|
+
"text": ""
|
|
225
|
+
},
|
|
226
|
+
"attribute": "fade",
|
|
227
|
+
"reflect": false,
|
|
228
|
+
"defaultValue": "false"
|
|
229
|
+
},
|
|
191
230
|
"loopAround": {
|
|
192
231
|
"type": "boolean",
|
|
193
232
|
"mutable": false,
|
|
@@ -206,6 +245,76 @@ export class SwirlCarousel {
|
|
|
206
245
|
"reflect": false,
|
|
207
246
|
"defaultValue": "false"
|
|
208
247
|
},
|
|
248
|
+
"padding": {
|
|
249
|
+
"type": "string",
|
|
250
|
+
"mutable": false,
|
|
251
|
+
"complexType": {
|
|
252
|
+
"original": "SwirlCarouselPadding",
|
|
253
|
+
"resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"40\" | \"48\" | \"64\" | \"8\"",
|
|
254
|
+
"references": {
|
|
255
|
+
"SwirlCarouselPadding": {
|
|
256
|
+
"location": "local",
|
|
257
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx",
|
|
258
|
+
"id": "src/components/swirl-carousel/swirl-carousel.tsx::SwirlCarouselPadding"
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
},
|
|
262
|
+
"required": false,
|
|
263
|
+
"optional": true,
|
|
264
|
+
"docs": {
|
|
265
|
+
"tags": [],
|
|
266
|
+
"text": ""
|
|
267
|
+
},
|
|
268
|
+
"attribute": "padding",
|
|
269
|
+
"reflect": false,
|
|
270
|
+
"defaultValue": "\"16\""
|
|
271
|
+
},
|
|
272
|
+
"paddingBlockEnd": {
|
|
273
|
+
"type": "string",
|
|
274
|
+
"mutable": false,
|
|
275
|
+
"complexType": {
|
|
276
|
+
"original": "SwirlCarouselPadding",
|
|
277
|
+
"resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"40\" | \"48\" | \"64\" | \"8\"",
|
|
278
|
+
"references": {
|
|
279
|
+
"SwirlCarouselPadding": {
|
|
280
|
+
"location": "local",
|
|
281
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx",
|
|
282
|
+
"id": "src/components/swirl-carousel/swirl-carousel.tsx::SwirlCarouselPadding"
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
},
|
|
286
|
+
"required": false,
|
|
287
|
+
"optional": true,
|
|
288
|
+
"docs": {
|
|
289
|
+
"tags": [],
|
|
290
|
+
"text": ""
|
|
291
|
+
},
|
|
292
|
+
"attribute": "padding-block-end",
|
|
293
|
+
"reflect": false
|
|
294
|
+
},
|
|
295
|
+
"paddingBlockStart": {
|
|
296
|
+
"type": "string",
|
|
297
|
+
"mutable": false,
|
|
298
|
+
"complexType": {
|
|
299
|
+
"original": "SwirlCarouselPadding",
|
|
300
|
+
"resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"40\" | \"48\" | \"64\" | \"8\"",
|
|
301
|
+
"references": {
|
|
302
|
+
"SwirlCarouselPadding": {
|
|
303
|
+
"location": "local",
|
|
304
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx",
|
|
305
|
+
"id": "src/components/swirl-carousel/swirl-carousel.tsx::SwirlCarouselPadding"
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
},
|
|
309
|
+
"required": false,
|
|
310
|
+
"optional": true,
|
|
311
|
+
"docs": {
|
|
312
|
+
"tags": [],
|
|
313
|
+
"text": ""
|
|
314
|
+
},
|
|
315
|
+
"attribute": "padding-block-start",
|
|
316
|
+
"reflect": false
|
|
317
|
+
},
|
|
209
318
|
"paddingInlineEnd": {
|
|
210
319
|
"type": "string",
|
|
211
320
|
"mutable": false,
|
|
@@ -9,8 +9,8 @@ describe("swirl-carousel", () => {
|
|
|
9
9
|
expect(page.root).toEqualHtml(`
|
|
10
10
|
<swirl-carousel aria-roledescription="carousel" role="group" style="--swirl-carousel-spacing: 16px;">
|
|
11
11
|
<mock:shadow-root>
|
|
12
|
-
<div class="carousel">
|
|
13
|
-
<div aria-live="polite" class="carousel__slides">
|
|
12
|
+
<div class="carousel carousel--is-at-end carousel--is-at-start">
|
|
13
|
+
<div aria-live="polite" class="carousel__slides" style="padding: var(--s-space-16); scroll-padding: var(--s-space-16);">
|
|
14
14
|
<slot></slot>
|
|
15
15
|
</div>
|
|
16
16
|
</div>
|
package/dist/collection/components/swirl-resource-list-section/swirl-resource-list-section.js
CHANGED
|
@@ -5,11 +5,12 @@ import { h, Host } from "@stencil/core";
|
|
|
5
5
|
export class SwirlResourceListSection {
|
|
6
6
|
constructor() {
|
|
7
7
|
this.label = undefined;
|
|
8
|
+
this.separatorSpacing = "4";
|
|
8
9
|
this.spacing = "0";
|
|
9
10
|
this.hasSeparator = false;
|
|
10
11
|
}
|
|
11
12
|
render() {
|
|
12
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: '97625ee360ec9abe158f5082d47c6a0143ab549d' }, this.hasSeparator && (h("swirl-separator", { key: '7c4d8d3e04ccc10ae18047b49295950780bd7ce6', spacing: this.separatorSpacing })), h("div", { key: 'ecd4081a7af326616db50bbbb6940be54a49dae9', "aria-labelledby": "label", role: "rowgroup" }, h("span", { key: 'fc1a6ec3f9b12d93896f9d6bac739181604e59cb', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: 'cbad51573b8932d9bcaf13129a173ab008ac2079', spacing: this.spacing }, h("slot", { key: '19ae8536965b4a019524253a98dc480695c419cf' })))));
|
|
13
14
|
}
|
|
14
15
|
static get is() { return "swirl-resource-list-section"; }
|
|
15
16
|
static get encapsulation() { return "shadow"; }
|
|
@@ -42,6 +43,30 @@ export class SwirlResourceListSection {
|
|
|
42
43
|
"attribute": "label",
|
|
43
44
|
"reflect": false
|
|
44
45
|
},
|
|
46
|
+
"separatorSpacing": {
|
|
47
|
+
"type": "string",
|
|
48
|
+
"mutable": false,
|
|
49
|
+
"complexType": {
|
|
50
|
+
"original": "SwirlSeparatorSpacing",
|
|
51
|
+
"resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"8\"",
|
|
52
|
+
"references": {
|
|
53
|
+
"SwirlSeparatorSpacing": {
|
|
54
|
+
"location": "import",
|
|
55
|
+
"path": "../swirl-separator/swirl-separator",
|
|
56
|
+
"id": "src/components/swirl-separator/swirl-separator.tsx::SwirlSeparatorSpacing"
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
"required": false,
|
|
61
|
+
"optional": true,
|
|
62
|
+
"docs": {
|
|
63
|
+
"tags": [],
|
|
64
|
+
"text": ""
|
|
65
|
+
},
|
|
66
|
+
"attribute": "separator-spacing",
|
|
67
|
+
"reflect": false,
|
|
68
|
+
"defaultValue": "\"4\""
|
|
69
|
+
},
|
|
45
70
|
"spacing": {
|
|
46
71
|
"type": "string",
|
|
47
72
|
"mutable": false,
|
|
@@ -64,7 +64,7 @@ export class SwirlSearch {
|
|
|
64
64
|
const className = classnames("search", `search--variant-${this.variant}`, {
|
|
65
65
|
"search--disabled": this.disabled,
|
|
66
66
|
});
|
|
67
|
-
return (h(Host, { key: '
|
|
67
|
+
return (h(Host, { key: 'f830fa0298aeb9964b387ead34933777c99a6f08' }, h("span", { key: 'e7890af7315af940ca4cd0cb71bf99debf271e9e', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: 'beed185035923e749bb89e76a46173240a0a62a9', "aria-hidden": "true", class: "search__icon" }), h("input", { key: '41a49f1f07380196b2f82894b190912b5e3de1f0', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && (h("button", { key: '2269c36181e09cbccd1220975f86192816d08ce8', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", { key: 'f5544b823a90130d1c21c4517b284438ba400add' }))))));
|
|
68
68
|
}
|
|
69
69
|
static get is() { return "swirl-search"; }
|
|
70
70
|
static get encapsulation() { return "scoped"; }
|
|
@@ -28,7 +28,7 @@ export class SwirlSeparator {
|
|
|
28
28
|
paddingLeft: `var(--s-space-${this.spacing})`,
|
|
29
29
|
};
|
|
30
30
|
const className = classnames("separator", `separator--color-${this.color}`, `separator--orientation-${this.orientation}`);
|
|
31
|
-
return (h(Host, { key: '
|
|
31
|
+
return (h(Host, { key: '9cb972d889442ef48f3ab65f6c60019822d93258', "aria-orientation": this.orientation, class: className, role: "separator", style: styles }, h("span", { key: 'f776b4d21bd22a4c4a7d1960f6dda0c5f317a634', class: "separator__line" }), this.label && (h(Fragment, { key: '582ebc1523ef4670dccc0385839efe00297c608a' }, h("span", { key: '43adeaf3215ac01addc7a311d7ee39d74033aa82', class: "separator__label" }, this.label), h("span", { key: 'c9096ba71a04b585360117a9e8654c6f0ed708d0', class: "separator__line" })))));
|
|
32
32
|
}
|
|
33
33
|
static get is() { return "swirl-separator"; }
|
|
34
34
|
static get encapsulation() { return "shadow"; }
|