@getflip/swirl-components 0.301.0 → 0.303.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 +44 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-app-layout_5.cjs.entry.js +8 -6
- package/dist/cjs/swirl-carousel-slide.cjs.entry.js +6 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-form-control.cjs.entry.js +2 -2
- package/dist/cjs/swirl-tooltip.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-carousel-slide/swirl-carousel-slide.js +23 -1
- package/dist/collection/components/swirl-form-control/swirl-form-control.css +44 -19
- package/dist/collection/components/swirl-form-control/swirl-form-control.js +1 -1
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js +25 -6
- package/dist/collection/components/swirl-tooltip/swirl-tooltip.js +2 -2
- package/dist/components/swirl-carousel-slide.js +7 -1
- package/dist/components/swirl-form-control.js +2 -2
- package/dist/components/swirl-resource-list-item2.js +9 -6
- package/dist/components/swirl-tooltip2.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-app-layout_5.entry.js +8 -6
- package/dist/esm/swirl-carousel-slide.entry.js +6 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-form-control.entry.js +2 -2
- package/dist/esm/swirl-tooltip.entry.js +1 -1
- package/dist/swirl-components/p-2fd34402.entry.js +1 -0
- package/dist/swirl-components/{p-a1a7058b.entry.js → p-9805ecc3.entry.js} +1 -1
- package/dist/swirl-components/{p-86c89a3a.entry.js → p-9f1ec816.entry.js} +1 -1
- package/dist/swirl-components/p-a1ff64d3.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-carousel-slide/swirl-carousel-slide.d.ts +1 -0
- package/dist/types/components/swirl-resource-list-item/swirl-resource-list-item.d.ts +1 -0
- package/dist/types/components.d.ts +4 -0
- package/package.json +1 -1
- package/vscode-data.json +8 -0
- package/dist/swirl-components/p-8427cc90.entry.js +0 -1
- package/dist/swirl-components/p-e6eb469c.entry.js +0 -1
|
@@ -30,9 +30,7 @@
|
|
|
30
30
|
.form-control:not(.form-control--has-value):not(.form-control--has-focus):not(
|
|
31
31
|
.form-control--is-select
|
|
32
32
|
):not(.form-control--has-placeholder) .form-control__label-text {
|
|
33
|
-
bottom: 50%;
|
|
34
33
|
font-size: var(--s-font-size-base);
|
|
35
|
-
transform: translateY(50%);
|
|
36
34
|
opacity: 1;
|
|
37
35
|
}
|
|
38
36
|
|
|
@@ -46,6 +44,17 @@
|
|
|
46
44
|
}
|
|
47
45
|
}
|
|
48
46
|
|
|
47
|
+
.form-control:not(.form-control--has-value):not(.form-control--has-focus):not(
|
|
48
|
+
.form-control--is-select
|
|
49
|
+
):not(.form-control--has-placeholder):not(.form-control--label-position-outside) .form-control__label-text {
|
|
50
|
+
position: absolute;
|
|
51
|
+
top: 0;
|
|
52
|
+
bottom: 0;
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
height: auto;
|
|
56
|
+
}
|
|
57
|
+
|
|
49
58
|
.form-control:not(.form-control--has-value):not(.form-control--has-focus):not(
|
|
50
59
|
.form-control--is-select
|
|
51
60
|
):not(.form-control--has-placeholder) .form-control--font-size-sm .form-control__label-text {
|
|
@@ -80,9 +89,7 @@
|
|
|
80
89
|
}
|
|
81
90
|
|
|
82
91
|
.form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text {
|
|
83
|
-
bottom: 50%;
|
|
84
92
|
font-size: var(--s-font-size-base);
|
|
85
|
-
transform: translateY(50%);
|
|
86
93
|
opacity: 1;
|
|
87
94
|
}
|
|
88
95
|
|
|
@@ -94,6 +101,16 @@
|
|
|
94
101
|
}
|
|
95
102
|
}
|
|
96
103
|
|
|
104
|
+
.form-control:not(.form-control--has-value).form-control--is-select:not(.form-control--label-position-outside) .form-control__label-text {
|
|
105
|
+
position: absolute;
|
|
106
|
+
top: 0;
|
|
107
|
+
bottom: 0;
|
|
108
|
+
display: flex;
|
|
109
|
+
align-items: center;
|
|
110
|
+
height: auto;
|
|
111
|
+
pointer-events: auto;
|
|
112
|
+
}
|
|
113
|
+
|
|
97
114
|
.form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text {
|
|
98
115
|
font-size: var(--s-font-size-base);
|
|
99
116
|
}
|
|
@@ -186,29 +203,37 @@
|
|
|
186
203
|
|
|
187
204
|
@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
|
|
188
205
|
|
|
189
|
-
.form-
|
|
190
|
-
|
|
191
|
-
|
|
206
|
+
.form-control__label-text {
|
|
207
|
+
display: flex;
|
|
208
|
+
align-items: center
|
|
209
|
+
}
|
|
192
210
|
}
|
|
193
|
-
}
|
|
194
211
|
|
|
195
|
-
.form-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
212
|
+
.form-control__label-text .form-control__tooltip {
|
|
213
|
+
display: none;
|
|
214
|
+
color: var(--s-icon-default);
|
|
215
|
+
}
|
|
199
216
|
|
|
200
217
|
@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
|
|
201
218
|
|
|
202
|
-
.form-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
219
|
+
.form-control__label-text .form-control__tooltip {
|
|
220
|
+
display: flex;
|
|
221
|
+
position: relative;
|
|
222
|
+
padding: var(--s-space-4);
|
|
223
|
+
z-index: 10
|
|
224
|
+
}
|
|
206
225
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
}
|
|
226
|
+
.form-control__label-text .form-control__tooltip:hover {
|
|
227
|
+
cursor: default;
|
|
210
228
|
}
|
|
211
229
|
|
|
230
|
+
.form-control__label-text .form-control__tooltip swirl-tooltip::after {
|
|
231
|
+
content: "";
|
|
232
|
+
position: absolute;
|
|
233
|
+
inset: calc(-1 * var(--s-space-4));
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
|
|
212
237
|
.form-control--invalid.form-control--has-focus:not(.form-control--disabled) .form-control__label {
|
|
213
238
|
border-color: var(--s-border-critical);
|
|
214
239
|
box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-critical);
|
|
@@ -160,7 +160,7 @@ export class SwirlFormControl {
|
|
|
160
160
|
"form-control--is-select": isSelect,
|
|
161
161
|
});
|
|
162
162
|
const LabelTag = hasContenteditableControl ? "div" : "label";
|
|
163
|
-
return (h(Host, { key: '0ff78e63a1528716fa4f044b0fd8eea0cd1f4445', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: 'b7026d2e2cdcb84d22e03c20b97f94f8aa2059b3', class: className, role: "group" }, h("span", { key: '227e0e4179a9ff6f53f0abe8acdbd97ec59ca02f', class: "form-control__controls" }, h("span", { key: '8579cd58822eff10bc2531ac86c9fa1a8cd771a1', class: "form-control__prefix" }, h("slot", { key: 'e916f9a2555a6535cddb537c16de05c9f40b6ecf', name: "prefix" })), h(LabelTag, { key: '6e5d2f8c84c4d45188cef6b616f187967196ccd1', class: "form-control__label", onClick: this.onLabelClick }, h("span", { key: '761d8bc5f65710eb9e4b8889010befd60426d4b4', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: '5477fe4455957143e684865f998acb13d8cd1456', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip &&
|
|
163
|
+
return (h(Host, { key: '0ff78e63a1528716fa4f044b0fd8eea0cd1f4445', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: 'b7026d2e2cdcb84d22e03c20b97f94f8aa2059b3', class: className, role: "group" }, h("span", { key: '227e0e4179a9ff6f53f0abe8acdbd97ec59ca02f', class: "form-control__controls" }, h("span", { key: '8579cd58822eff10bc2531ac86c9fa1a8cd771a1', class: "form-control__prefix" }, h("slot", { key: 'e916f9a2555a6535cddb537c16de05c9f40b6ecf', name: "prefix" })), h(LabelTag, { key: '6e5d2f8c84c4d45188cef6b616f187967196ccd1', class: "form-control__label", onClick: this.onLabelClick }, h("span", { key: '761d8bc5f65710eb9e4b8889010befd60426d4b4', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: '5477fe4455957143e684865f998acb13d8cd1456', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (h("span", { key: 'd659d37f09d9d62a33a44931c4fa8178b5ea6335', class: "form-control__tooltip" }, h("swirl-tooltip", { key: '110ccb5e04937e4a2bcc56f1e1cf560e83588612', content: this.tooltip, positioning: "fixed", position: "top" }, h("swirl-icon-help", { key: 'c5b80f8d031311e4d5d7d11def12ea7b1c719578', size: 16, tabindex: "0" }))))), h("span", { key: 'e51ef2204a7c26265b1dcc8469a0ee5a5ba99ee3', class: "form-control__input" }, h("slot", { key: 'a1c89addf9017fd223deb998912621a0e40b452c' })))), showDescription && (h("span", { key: 'cfe5e7d9e7b87d950a642383be8a689351780b52', class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (h("span", { key: '2e2f01a837b66bea2b572d2cd6009f8ce437229e', "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { key: '3c849220dbb2fb4c4050a200719f9e9703e3eb9e', message: this.errorMessage, size: "s" }))))));
|
|
164
164
|
}
|
|
165
165
|
static get is() { return "swirl-form-control"; }
|
|
166
166
|
static get encapsulation() { return "scoped"; }
|
|
@@ -59,6 +59,7 @@ export class SwirlResourceListItem {
|
|
|
59
59
|
this.label = undefined;
|
|
60
60
|
this.labelWeight = "medium";
|
|
61
61
|
this.labelWrap = undefined;
|
|
62
|
+
this.labelMinHeight = undefined;
|
|
62
63
|
this.menuTriggerId = undefined;
|
|
63
64
|
this.menuTriggerLabel = "Options";
|
|
64
65
|
this.meta = undefined;
|
|
@@ -133,11 +134,12 @@ export class SwirlResourceListItem {
|
|
|
133
134
|
: this.label;
|
|
134
135
|
const ariaChecked = this.selectable ? String(this.checked) : undefined;
|
|
135
136
|
const role = this.interactive && this.selectable ? "checkbox" : undefined;
|
|
136
|
-
const labelContainerStyles =
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
: undefined
|
|
137
|
+
const labelContainerStyles = {
|
|
138
|
+
paddingRight: !showMeta && Boolean(this.controlContainer)
|
|
139
|
+
? `calc(${this.controlContainer?.getBoundingClientRect().width}px + var(--s-space-16))`
|
|
140
|
+
: undefined,
|
|
141
|
+
minHeight: this.labelMinHeight ?? undefined,
|
|
142
|
+
};
|
|
141
143
|
const className = classnames("resource-list-item", `resource-list-item--label-weight-${this.labelWeight}`, {
|
|
142
144
|
"resource-list-item--active": this.active,
|
|
143
145
|
"resource-list-item--checked": this.checked,
|
|
@@ -154,7 +156,7 @@ export class SwirlResourceListItem {
|
|
|
154
156
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
155
157
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
156
158
|
});
|
|
157
|
-
return (h(Host, { key: '
|
|
159
|
+
return (h(Host, { key: 'dba563ccfce21fd0bdf87f8f970c6c368de5a384', role: "row" }, h("div", { key: '0fa0e2578e7f6b8bf6500f84389fba8a483bb80d', class: className, role: "gridcell" }, h(Tag, { key: '9ecc89bed26925125740c4c02673dbe9fa4feaa3', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '01c7349268e6fdb135a6a41fcf29522b8a112863', class: "resource-list-item__media" }, h("slot", { key: 'd6aa58d73f26c54536f79ff5e4b1db14e270cb7d', name: "media" }))), h("span", { key: 'd240bf48129aebffc4d5135697547bf1b41bb7b2', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '9e87098fd6738cf2a3e158bff7f281ae6d49b366', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: '25483b5b986d8f2c7a72b27fd06d0a33938f7a65', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: '372eb1b0e328dfaef3ace6320d7a937354f63860', class: "resource-list-item__meta" }, h("span", { key: '9f90bbb431c0aa25609467a865b503236ab9a2f5', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: '45ab81e3d6a8203ec69e857f74e9498023ea63d3', class: "resource-list-item__badges" }, h("slot", { key: 'd1afdb5262dbc03f14159912072e9c3ef4a21c4d', name: "badges" }))))), this.selectable && (h("span", { key: '4a26342beaf34ffbb3e3210b76c44a55991a44eb', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '460cb54db0405975abfc082f82673db8c4c21282', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '9afc4ea48861dab4a7e7f3cdad3268d07d27a04c' }))))), h("span", { key: '83eaca909478d7105b04ec659465519ca8c17353', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: '648105d5982c765f38ad6b9d8ca6dfcb55d06e57', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '520fd38947f92c9e2f0a0fc3806e6d3ac925d3ad', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '24c0513133f9bbcd1fb349ea224731a8551cede5', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: 'caff3db0cabeb8f08ead65294dd67cd45d42433d', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: '3ff4db283081cc1d2da46cac766463b4e9170132', size: this.iconSize })))));
|
|
158
160
|
}
|
|
159
161
|
static get is() { return "swirl-resource-list-item"; }
|
|
160
162
|
static get encapsulation() { return "scoped"; }
|
|
@@ -471,6 +473,23 @@ export class SwirlResourceListItem {
|
|
|
471
473
|
"attribute": "label-wrap",
|
|
472
474
|
"reflect": false
|
|
473
475
|
},
|
|
476
|
+
"labelMinHeight": {
|
|
477
|
+
"type": "string",
|
|
478
|
+
"mutable": false,
|
|
479
|
+
"complexType": {
|
|
480
|
+
"original": "string",
|
|
481
|
+
"resolved": "string",
|
|
482
|
+
"references": {}
|
|
483
|
+
},
|
|
484
|
+
"required": false,
|
|
485
|
+
"optional": true,
|
|
486
|
+
"docs": {
|
|
487
|
+
"tags": [],
|
|
488
|
+
"text": ""
|
|
489
|
+
},
|
|
490
|
+
"attribute": "label-min-height",
|
|
491
|
+
"reflect": false
|
|
492
|
+
},
|
|
474
493
|
"menuTriggerId": {
|
|
475
494
|
"type": "string",
|
|
476
495
|
"mutable": false,
|
|
@@ -71,7 +71,7 @@ export class SwirlTooltip {
|
|
|
71
71
|
};
|
|
72
72
|
this.active = true;
|
|
73
73
|
this.content = undefined;
|
|
74
|
-
this.delay =
|
|
74
|
+
this.delay = 200;
|
|
75
75
|
this.position = "top";
|
|
76
76
|
this.positioning = "absolute";
|
|
77
77
|
this.actualPosition = undefined;
|
|
@@ -188,7 +188,7 @@ export class SwirlTooltip {
|
|
|
188
188
|
},
|
|
189
189
|
"attribute": "delay",
|
|
190
190
|
"reflect": false,
|
|
191
|
-
"defaultValue": "
|
|
191
|
+
"defaultValue": "200"
|
|
192
192
|
},
|
|
193
193
|
"position": {
|
|
194
194
|
"type": "string",
|
|
@@ -9,6 +9,7 @@ const SwirlCarouselSlide$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarouse
|
|
|
9
9
|
super();
|
|
10
10
|
this.__registerHost();
|
|
11
11
|
this.__attachShadow();
|
|
12
|
+
this.aspectRatio = undefined;
|
|
12
13
|
this.label = undefined;
|
|
13
14
|
this.minHeight = undefined;
|
|
14
15
|
this.width = "15.5rem";
|
|
@@ -17,10 +18,15 @@ const SwirlCarouselSlide$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarouse
|
|
|
17
18
|
const className = classNames("carousel-slide", {
|
|
18
19
|
"carousel-slide--has-min-height": Boolean(this.minHeight),
|
|
19
20
|
});
|
|
20
|
-
return (h(Host, { key: '
|
|
21
|
+
return (h(Host, { key: '8f38c4750269af5d8d18043ec381e0ca743a94a4', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
|
|
22
|
+
aspectRatio: this.aspectRatio,
|
|
23
|
+
flexBasis: this.width,
|
|
24
|
+
minHeight: this.minHeight,
|
|
25
|
+
}, tabIndex: 0 }, h("slot", { key: '1a0d7f1017befb23e997c88c92ce2077436fba9b' })));
|
|
21
26
|
}
|
|
22
27
|
static get style() { return SwirlCarouselSlideStyle0; }
|
|
23
28
|
}, [1, "swirl-carousel-slide", {
|
|
29
|
+
"aspectRatio": [1, "aspect-ratio"],
|
|
24
30
|
"label": [1],
|
|
25
31
|
"minHeight": [1, "min-height"],
|
|
26
32
|
"width": [1]
|
|
@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './swirl-icon-help2.js';
|
|
|
6
6
|
import { d as defineCustomElement$3 } from './swirl-inline-error2.js';
|
|
7
7
|
import { d as defineCustomElement$2 } from './swirl-tooltip2.js';
|
|
8
8
|
|
|
9
|
-
const swirlFormControlCss = ".sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{--swirl-autocomplete-tags-margin-top:var(--s-space-4);display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__description.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-base);--swirl-autocomplete-tags-margin-top:0;padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{display:flex;align-items:center}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:none;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:flex;margin-left:var(--s-space-4)}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control:hover{cursor:default}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}.form-control--has-prefix.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{position:static}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-highlight);border-right-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-top-left-radius:0;border-bottom-left-radius:0}.form-control--has-prefix.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{display:flex}.form-control__controls.sc-swirl-form-control{position:relative;display:flex;align-items:stretch}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__secondary-label.sc-swirl-form-control{font-weight:var(--s-font-weight-normal);color:var(--s-text-subdued);margin-left:var(--s-space-4)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);text-align:start;white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__prefix.sc-swirl-form-control{z-index:1;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:center;align-items:center;border-top:var(--s-border-width-default) solid var(--s-border-strong);border-bottom:var(--s-border-width-default) solid var(--s-border-strong);border-left:var(--s-border-width-default) solid var(--s-border-strong);border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm);background-color:var(--s-surface-raised-default)}.form-control__prefix.sc-swirl-form-control-s>select{height:100%;margin-right:calc(-1 * var(--s-space-16));margin-left:calc(-1 * var(--s-space-16));padding-right:calc(var(--s-space-16) + 1.25rem);padding-left:var(--s-space-16);border:none;color:var(--s-text-default);background:url('data:image/svg+xml,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 12.4579C9.88889 12.4579 9.78472 12.4404 9.6875 12.4054C9.59027 12.3709 9.5 12.312 9.41666 12.2287L5.5625 8.37453C5.40972 8.22175 5.33694 8.03064 5.34416 7.8012C5.35083 7.57231 5.43055 7.38148 5.58333 7.2287C5.73611 7.07592 5.93055 6.99953 6.16666 6.99953C6.40277 6.99953 6.59722 7.07592 6.75 7.2287L10 10.4787L13.2708 7.20787C13.4236 7.05509 13.6147 6.98203 13.8442 6.9887C14.0731 6.99592 14.2639 7.07592 14.4167 7.2287C14.5694 7.38148 14.6458 7.57592 14.6458 7.81203C14.6458 8.04814 14.5694 8.24259 14.4167 8.39537L10.5833 12.2287C10.5 12.312 10.4097 12.3709 10.3125 12.4054C10.2153 12.4404 10.1111 12.4579 10 12.4579Z\" fill=\"%236E6E6E\"/></svg>');background-color:transparent;background-repeat:no-repeat;background-position:right var(--s-space-8) center;font:inherit;line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control__prefix.sc-swirl-form-control-s>select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__prefix.sc-swirl-form-control-s>select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}.form-control__input.sc-swirl-form-control-s>[contenteditable]:focus{outline:none}.form-control__input.sc-swirl-form-control-s>[contenteditable]{width:100%;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__input.sc-swirl-form-control-s>[contenteditable]{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
|
|
9
|
+
const swirlFormControlCss = ".sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{--swirl-autocomplete-tags-margin-top:var(--s-space-4);display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder):not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__description.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select:not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto;pointer-events:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-base);--swirl-autocomplete-tags-margin-top:0;padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control{display:flex;align-items:center}}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:none;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:flex;position:relative;padding:var(--s-space-4);z-index:10}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control:hover{cursor:default}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control swirl-tooltip.sc-swirl-form-control::after{content:\"\";position:absolute;inset:calc(-1 * var(--s-space-4))}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}.form-control--has-prefix.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{position:static}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-highlight);border-right-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-top-left-radius:0;border-bottom-left-radius:0}.form-control--has-prefix.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{display:flex}.form-control__controls.sc-swirl-form-control{position:relative;display:flex;align-items:stretch}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__secondary-label.sc-swirl-form-control{font-weight:var(--s-font-weight-normal);color:var(--s-text-subdued);margin-left:var(--s-space-4)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);text-align:start;white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__prefix.sc-swirl-form-control{z-index:1;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:center;align-items:center;border-top:var(--s-border-width-default) solid var(--s-border-strong);border-bottom:var(--s-border-width-default) solid var(--s-border-strong);border-left:var(--s-border-width-default) solid var(--s-border-strong);border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm);background-color:var(--s-surface-raised-default)}.form-control__prefix.sc-swirl-form-control-s>select{height:100%;margin-right:calc(-1 * var(--s-space-16));margin-left:calc(-1 * var(--s-space-16));padding-right:calc(var(--s-space-16) + 1.25rem);padding-left:var(--s-space-16);border:none;color:var(--s-text-default);background:url('data:image/svg+xml,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 12.4579C9.88889 12.4579 9.78472 12.4404 9.6875 12.4054C9.59027 12.3709 9.5 12.312 9.41666 12.2287L5.5625 8.37453C5.40972 8.22175 5.33694 8.03064 5.34416 7.8012C5.35083 7.57231 5.43055 7.38148 5.58333 7.2287C5.73611 7.07592 5.93055 6.99953 6.16666 6.99953C6.40277 6.99953 6.59722 7.07592 6.75 7.2287L10 10.4787L13.2708 7.20787C13.4236 7.05509 13.6147 6.98203 13.8442 6.9887C14.0731 6.99592 14.2639 7.07592 14.4167 7.2287C14.5694 7.38148 14.6458 7.57592 14.6458 7.81203C14.6458 8.04814 14.5694 8.24259 14.4167 8.39537L10.5833 12.2287C10.5 12.312 10.4097 12.3709 10.3125 12.4054C10.2153 12.4404 10.1111 12.4579 10 12.4579Z\" fill=\"%236E6E6E\"/></svg>');background-color:transparent;background-repeat:no-repeat;background-position:right var(--s-space-8) center;font:inherit;line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control__prefix.sc-swirl-form-control-s>select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__prefix.sc-swirl-form-control-s>select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}.form-control__input.sc-swirl-form-control-s>[contenteditable]:focus{outline:none}.form-control__input.sc-swirl-form-control-s>[contenteditable]{width:100%;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__input.sc-swirl-form-control-s>[contenteditable]{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
|
|
10
10
|
const SwirlFormControlStyle0 = swirlFormControlCss;
|
|
11
11
|
|
|
12
12
|
const SwirlFormControl$1 = /*@__PURE__*/ proxyCustomElement(class SwirlFormControl extends HTMLElement {
|
|
@@ -166,7 +166,7 @@ const SwirlFormControl$1 = /*@__PURE__*/ proxyCustomElement(class SwirlFormContr
|
|
|
166
166
|
"form-control--is-select": isSelect,
|
|
167
167
|
});
|
|
168
168
|
const LabelTag = hasContenteditableControl ? "div" : "label";
|
|
169
|
-
return (h(Host, { key: '0ff78e63a1528716fa4f044b0fd8eea0cd1f4445', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: 'b7026d2e2cdcb84d22e03c20b97f94f8aa2059b3', class: className, role: "group" }, h("span", { key: '227e0e4179a9ff6f53f0abe8acdbd97ec59ca02f', class: "form-control__controls" }, h("span", { key: '8579cd58822eff10bc2531ac86c9fa1a8cd771a1', class: "form-control__prefix" }, h("slot", { key: 'e916f9a2555a6535cddb537c16de05c9f40b6ecf', name: "prefix" })), h(LabelTag, { key: '6e5d2f8c84c4d45188cef6b616f187967196ccd1', class: "form-control__label", onClick: this.onLabelClick }, h("span", { key: '761d8bc5f65710eb9e4b8889010befd60426d4b4', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: '5477fe4455957143e684865f998acb13d8cd1456', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip &&
|
|
169
|
+
return (h(Host, { key: '0ff78e63a1528716fa4f044b0fd8eea0cd1f4445', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: 'b7026d2e2cdcb84d22e03c20b97f94f8aa2059b3', class: className, role: "group" }, h("span", { key: '227e0e4179a9ff6f53f0abe8acdbd97ec59ca02f', class: "form-control__controls" }, h("span", { key: '8579cd58822eff10bc2531ac86c9fa1a8cd771a1', class: "form-control__prefix" }, h("slot", { key: 'e916f9a2555a6535cddb537c16de05c9f40b6ecf', name: "prefix" })), h(LabelTag, { key: '6e5d2f8c84c4d45188cef6b616f187967196ccd1', class: "form-control__label", onClick: this.onLabelClick }, h("span", { key: '761d8bc5f65710eb9e4b8889010befd60426d4b4', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: '5477fe4455957143e684865f998acb13d8cd1456', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (h("span", { key: 'd659d37f09d9d62a33a44931c4fa8178b5ea6335', class: "form-control__tooltip" }, h("swirl-tooltip", { key: '110ccb5e04937e4a2bcc56f1e1cf560e83588612', content: this.tooltip, positioning: "fixed", position: "top" }, h("swirl-icon-help", { key: 'c5b80f8d031311e4d5d7d11def12ea7b1c719578', size: 16, tabindex: "0" }))))), h("span", { key: 'e51ef2204a7c26265b1dcc8469a0ee5a5ba99ee3', class: "form-control__input" }, h("slot", { key: 'a1c89addf9017fd223deb998912621a0e40b452c' })))), showDescription && (h("span", { key: 'cfe5e7d9e7b87d950a642383be8a689351780b52', class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (h("span", { key: '2e2f01a837b66bea2b572d2cd6009f8ce437229e', "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { key: '3c849220dbb2fb4c4050a200719f9e9703e3eb9e', message: this.errorMessage, size: "s" }))))));
|
|
170
170
|
}
|
|
171
171
|
get el() { return this; }
|
|
172
172
|
static get watchers() { return {
|
|
@@ -66,6 +66,7 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
|
|
|
66
66
|
this.label = undefined;
|
|
67
67
|
this.labelWeight = "medium";
|
|
68
68
|
this.labelWrap = undefined;
|
|
69
|
+
this.labelMinHeight = undefined;
|
|
69
70
|
this.menuTriggerId = undefined;
|
|
70
71
|
this.menuTriggerLabel = "Options";
|
|
71
72
|
this.meta = undefined;
|
|
@@ -140,11 +141,12 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
|
|
|
140
141
|
: this.label;
|
|
141
142
|
const ariaChecked = this.selectable ? String(this.checked) : undefined;
|
|
142
143
|
const role = this.interactive && this.selectable ? "checkbox" : undefined;
|
|
143
|
-
const labelContainerStyles =
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
: undefined
|
|
144
|
+
const labelContainerStyles = {
|
|
145
|
+
paddingRight: !showMeta && Boolean(this.controlContainer)
|
|
146
|
+
? `calc(${this.controlContainer?.getBoundingClientRect().width}px + var(--s-space-16))`
|
|
147
|
+
: undefined,
|
|
148
|
+
minHeight: this.labelMinHeight ?? undefined,
|
|
149
|
+
};
|
|
148
150
|
const className = classNames("resource-list-item", `resource-list-item--label-weight-${this.labelWeight}`, {
|
|
149
151
|
"resource-list-item--active": this.active,
|
|
150
152
|
"resource-list-item--checked": this.checked,
|
|
@@ -161,7 +163,7 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
|
|
|
161
163
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
162
164
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
163
165
|
});
|
|
164
|
-
return (h(Host, { key: '
|
|
166
|
+
return (h(Host, { key: 'dba563ccfce21fd0bdf87f8f970c6c368de5a384', role: "row" }, h("div", { key: '0fa0e2578e7f6b8bf6500f84389fba8a483bb80d', class: className, role: "gridcell" }, h(Tag, { key: '9ecc89bed26925125740c4c02673dbe9fa4feaa3', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '01c7349268e6fdb135a6a41fcf29522b8a112863', class: "resource-list-item__media" }, h("slot", { key: 'd6aa58d73f26c54536f79ff5e4b1db14e270cb7d', name: "media" }))), h("span", { key: 'd240bf48129aebffc4d5135697547bf1b41bb7b2', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '9e87098fd6738cf2a3e158bff7f281ae6d49b366', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: '25483b5b986d8f2c7a72b27fd06d0a33938f7a65', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: '372eb1b0e328dfaef3ace6320d7a937354f63860', class: "resource-list-item__meta" }, h("span", { key: '9f90bbb431c0aa25609467a865b503236ab9a2f5', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: '45ab81e3d6a8203ec69e857f74e9498023ea63d3', class: "resource-list-item__badges" }, h("slot", { key: 'd1afdb5262dbc03f14159912072e9c3ef4a21c4d', name: "badges" }))))), this.selectable && (h("span", { key: '4a26342beaf34ffbb3e3210b76c44a55991a44eb', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '460cb54db0405975abfc082f82673db8c4c21282', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '9afc4ea48861dab4a7e7f3cdad3268d07d27a04c' }))))), h("span", { key: '83eaca909478d7105b04ec659465519ca8c17353', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: '648105d5982c765f38ad6b9d8ca6dfcb55d06e57', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '520fd38947f92c9e2f0a0fc3806e6d3ac925d3ad', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '24c0513133f9bbcd1fb349ea224731a8551cede5', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: 'caff3db0cabeb8f08ead65294dd67cd45d42433d', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: '3ff4db283081cc1d2da46cac766463b4e9170132', size: this.iconSize })))));
|
|
165
167
|
}
|
|
166
168
|
get el() { return this; }
|
|
167
169
|
static get style() { return SwirlResourceListItemStyle0; }
|
|
@@ -183,6 +185,7 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
|
|
|
183
185
|
"label": [1],
|
|
184
186
|
"labelWeight": [1, "label-weight"],
|
|
185
187
|
"labelWrap": [4, "label-wrap"],
|
|
188
|
+
"labelMinHeight": [1, "label-min-height"],
|
|
186
189
|
"menuTriggerId": [1, "menu-trigger-id"],
|
|
187
190
|
"menuTriggerLabel": [1, "menu-trigger-label"],
|
|
188
191
|
"meta": [1],
|
|
@@ -78,7 +78,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
|
|
|
78
78
|
};
|
|
79
79
|
this.active = true;
|
|
80
80
|
this.content = undefined;
|
|
81
|
-
this.delay =
|
|
81
|
+
this.delay = 200;
|
|
82
82
|
this.position = "top";
|
|
83
83
|
this.positioning = "absolute";
|
|
84
84
|
this.actualPosition = undefined;
|