@emuanalytics/flow-rdf-ui 4.1.16 → 4.1.18
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/dist/components/input/input.component.mjs +2 -0
- package/dist/components/list-item/list-item.component.mjs +13 -5
- package/dist/components/list-item/list-item.styles.mjs +6 -2
- package/dist/components/range/range.component.mjs +1 -1
- package/dist/custom-elements.json +548 -542
- package/dist/index.d.mts +7 -7
- package/dist/index.d.ts +7 -7
- package/dist/package.json.mjs +1 -1
- package/dist/vscode.html-custom-data.json +99 -98
- package/package.json +3 -3
|
@@ -428,6 +428,7 @@ class FlowUiInput extends FlowRdfFormControl {
|
|
|
428
428
|
library="system"
|
|
429
429
|
name="chevron-up"
|
|
430
430
|
tabindex="-1"
|
|
431
|
+
?disabled=${this.disabled}
|
|
431
432
|
@click=${() => {
|
|
432
433
|
this.stepUp();
|
|
433
434
|
this.handleChange();
|
|
@@ -438,6 +439,7 @@ class FlowUiInput extends FlowRdfFormControl {
|
|
|
438
439
|
library="system"
|
|
439
440
|
name="chevron-down"
|
|
440
441
|
tabindex="-1"
|
|
442
|
+
?disabled=${this.disabled}
|
|
441
443
|
@click=${() => {
|
|
442
444
|
this.stepDown();
|
|
443
445
|
this.handleChange();
|
|
@@ -23,6 +23,7 @@ class FlowUiListItem extends FlowRdfElement {
|
|
|
23
23
|
super();
|
|
24
24
|
this.hasSlotController = new HasSlotController(this, "prefix", "suffix", "menu");
|
|
25
25
|
this.hasFocus = false;
|
|
26
|
+
this.editMenuName = "Edit";
|
|
26
27
|
this.checked = false;
|
|
27
28
|
this.editable = false;
|
|
28
29
|
this.reorder = false;
|
|
@@ -56,9 +57,13 @@ class FlowUiListItem extends FlowRdfElement {
|
|
|
56
57
|
super.disconnectedCallback();
|
|
57
58
|
this.removeEventListeners();
|
|
58
59
|
}
|
|
60
|
+
/** @deprecated Use `edit` instead */
|
|
59
61
|
rename() {
|
|
60
62
|
this.input.focus();
|
|
61
63
|
}
|
|
64
|
+
edit() {
|
|
65
|
+
this.input.focus();
|
|
66
|
+
}
|
|
62
67
|
handleCheckedChange() {
|
|
63
68
|
this.setAttribute("aria-checked", this.checked ? "true" : "false");
|
|
64
69
|
this.setAttribute("tabindex", this.checked ? "0" : "-1");
|
|
@@ -85,8 +90,8 @@ class FlowUiListItem extends FlowRdfElement {
|
|
|
85
90
|
}
|
|
86
91
|
handleMenuSelect(ev) {
|
|
87
92
|
const menuItem = ev.detail.item;
|
|
88
|
-
if (menuItem.value === "
|
|
89
|
-
this.updateComplete.then(() => this.
|
|
93
|
+
if (menuItem.value === "edit") {
|
|
94
|
+
this.updateComplete.then(() => this.edit());
|
|
90
95
|
} else if (menuItem.value === "remove") {
|
|
91
96
|
const requestRemove = this.emit("flow-ui-remove", { cancelable: true });
|
|
92
97
|
if (!requestRemove.defaultPrevented) {
|
|
@@ -145,7 +150,7 @@ class FlowUiListItem extends FlowRdfElement {
|
|
|
145
150
|
></flow-ui-icon-button>
|
|
146
151
|
<flow-ui-menu @flow-ui-select=${this.handleMenuSelect}>
|
|
147
152
|
${this.editable ? html`
|
|
148
|
-
<flow-ui-menu-item value="
|
|
153
|
+
<flow-ui-menu-item value="edit">${this.editMenuName}</flow-ui-menu-item>
|
|
149
154
|
` : nothing}
|
|
150
155
|
${this.removable ? html`
|
|
151
156
|
<flow-ui-menu-item value="remove">Delete</flow-ui-menu-item>
|
|
@@ -192,7 +197,7 @@ class FlowUiListItem extends FlowRdfElement {
|
|
|
192
197
|
|
|
193
198
|
<flow-ui-input
|
|
194
199
|
exportparts="input"
|
|
195
|
-
|
|
200
|
+
filled
|
|
196
201
|
class="list-item__input"
|
|
197
202
|
.value=${this.label}
|
|
198
203
|
.readonly=${!this.editable}
|
|
@@ -200,7 +205,7 @@ class FlowUiListItem extends FlowRdfElement {
|
|
|
200
205
|
@flow-ui-change=${this.handleInputEvents}
|
|
201
206
|
@flow-ui-input=${this.handleInputEvents}
|
|
202
207
|
></flow-ui-input>
|
|
203
|
-
|
|
208
|
+
<!--<div class="list-item__spacer"></div>-->
|
|
204
209
|
<slot name="suffix" part="suffix" class="list-item__suffix"></slot>
|
|
205
210
|
|
|
206
211
|
${hasMenu ? this.renderMenu() : nothing}
|
|
@@ -218,6 +223,9 @@ __decorateClass([
|
|
|
218
223
|
__decorateClass([
|
|
219
224
|
property({ reflect: true })
|
|
220
225
|
], FlowUiListItem.prototype, "label", 2);
|
|
226
|
+
__decorateClass([
|
|
227
|
+
property({ attribute: "edit-menu-name" })
|
|
228
|
+
], FlowUiListItem.prototype, "editMenuName", 2);
|
|
221
229
|
__decorateClass([
|
|
222
230
|
property({ reflect: true })
|
|
223
231
|
], FlowUiListItem.prototype, "value", 2);
|
|
@@ -69,8 +69,11 @@ const styles = css`
|
|
|
69
69
|
color: var(--accessory-color);
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
-
.list-
|
|
73
|
-
|
|
72
|
+
.list-item .list-item__input::part(form-control) {
|
|
73
|
+
--control-background-color: var(--flow-ui-control-inline-background-color);
|
|
74
|
+
--control-background-color-hover: var(--flow-ui-control-inline-background-color-hover);
|
|
75
|
+
--control-background-color-focus: var(--flow-ui-control-inline-background-color-focus);
|
|
76
|
+
--control-background-color-disabled: var(--flow-ui-control-inline-background-color-disabled);
|
|
74
77
|
}
|
|
75
78
|
|
|
76
79
|
.list-item:not(.list-item--editable) .list-item__input::part(form-control) {
|
|
@@ -92,6 +95,7 @@ const styles = css`
|
|
|
92
95
|
}
|
|
93
96
|
|
|
94
97
|
.list-item__input {
|
|
98
|
+
flex: 1;
|
|
95
99
|
margin-left: calc(var(--padding) * -0.5);
|
|
96
100
|
}
|
|
97
101
|
`;
|