@getflip/swirl-components 0.301.0 → 0.302.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 +23 -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-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-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/assets/pdfjs/pdf.worker.min.js +1 -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-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/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-resource-list-item/swirl-resource-list-item.d.ts +1 -0
- package/dist/types/components.d.ts +2 -0
- package/package.json +1 -1
- package/vscode-data.json +4 -0
- 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",
|