@threadlabs/looma 0.1.24 → 0.1.25
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/{chunk-IMHSPETJ.js → chunk-UY423IKN.js} +33 -32
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/looma.cjs.js +1 -1
- package/dist/cjs/{ui-combobox.cjs.entry.js → ui-chip_2.cjs.entry.js} +29 -4
- package/dist/cjs/ui-context-menu.cjs.entry.js +1 -1
- package/dist/cjs/ui-dialog.cjs.entry.js +1 -1
- package/dist/cjs/ui-disclosure.cjs.entry.js +1 -1
- package/dist/cjs/ui-editable.cjs.entry.js +100 -0
- package/dist/cjs/ui-floating-action-button.cjs.entry.js +1 -1
- package/dist/cjs/ui-form-field.cjs.entry.js +1 -1
- package/dist/cjs/ui-icon-button.cjs.entry.js +1 -1
- package/dist/cjs/ui-input.cjs.entry.js +1 -1
- package/dist/cjs/ui-menu-item.cjs.entry.js +1 -1
- package/dist/cjs/ui-menu.cjs.entry.js +1 -1
- package/dist/cjs/ui-multi-combobox.cjs.entry.js +158 -0
- package/dist/cjs/ui-popover.cjs.entry.js +1 -1
- package/dist/cjs/ui-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/ui-radio.cjs.entry.js +1 -1
- package/dist/cjs/ui-search-result-row.cjs.entry.js +1 -1
- package/dist/cjs/ui-search-shell.cjs.entry.js +1 -1
- package/dist/cjs/ui-select.cjs.entry.js +1 -1
- package/dist/cjs/ui-switch.cjs.entry.js +2 -2
- package/dist/cjs/ui-tabs.cjs.entry.js +1 -1
- package/dist/cjs/ui-textarea.cjs.entry.js +1 -1
- package/dist/cjs/ui-toast-region.cjs.entry.js +1 -1
- package/dist/cjs/ui-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/ui-top-bar.cjs.entry.js +1 -1
- package/dist/cjs/ui-tree-item.cjs.entry.js +2 -2
- package/dist/cjs/ui-tree.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/ui-chip/ui-chip.css +4 -0
- package/dist/collection/components/ui-chip/ui-chip.js +23 -1
- package/dist/collection/components/ui-combobox/ui-combobox.js +49 -4
- package/dist/collection/components/ui-context-menu/ui-context-menu.js +1 -1
- package/dist/collection/components/ui-dialog/ui-dialog.js +1 -1
- package/dist/collection/components/ui-disclosure/ui-disclosure.js +1 -1
- package/dist/collection/components/ui-editable/ui-editable.css +2 -0
- package/dist/collection/components/ui-editable/ui-editable.js +196 -0
- package/dist/collection/components/ui-floating-action-button/ui-floating-action-button.js +1 -1
- package/dist/collection/components/ui-form-field/ui-form-field.js +1 -1
- package/dist/collection/components/ui-icon-button/ui-icon-button.js +1 -1
- package/dist/collection/components/ui-input/ui-input.js +1 -1
- package/dist/collection/components/ui-menu/ui-menu.js +1 -1
- package/dist/collection/components/ui-menu-item/ui-menu-item.js +1 -1
- package/dist/collection/components/ui-multi-combobox/ui-multi-combobox.css +29 -0
- package/dist/collection/components/ui-multi-combobox/ui-multi-combobox.js +503 -0
- package/dist/collection/components/ui-popover/ui-popover.js +1 -1
- package/dist/collection/components/ui-radio/ui-radio.js +1 -1
- package/dist/collection/components/ui-radio-group/ui-radio-group.js +1 -1
- package/dist/collection/components/ui-search-result-row/ui-search-result-row.js +1 -1
- package/dist/collection/components/ui-search-shell/ui-search-shell.js +1 -1
- package/dist/collection/components/ui-select/ui-select.js +1 -1
- package/dist/collection/components/ui-switch/ui-switch.js +2 -2
- package/dist/collection/components/ui-tabs/ui-tabs.js +1 -1
- package/dist/collection/components/ui-textarea/ui-textarea.js +1 -1
- package/dist/collection/components/ui-toast-region/ui-toast-region.js +1 -1
- package/dist/collection/components/ui-tooltip/ui-tooltip.js +1 -1
- package/dist/collection/components/ui-top-bar/ui-top-bar.js +1 -1
- package/dist/collection/components/ui-tree/ui-tree.js +1 -1
- package/dist/collection/components/ui-tree-item/ui-tree-item.js +2 -2
- package/dist/collection/field/editable.js +1 -0
- package/dist/collection/field/multi-combobox.js +1 -0
- package/dist/components/index.d.ts +4 -0
- package/dist/components/index.js +1 -1
- package/dist/components/{p-DIGcRYAW.js → p-B9CzOHvE.js} +1 -1
- package/dist/components/p-BMgIcOh-.js +1 -0
- package/dist/components/p-BVteuP_d.js +1 -0
- package/dist/components/{p-Bk55QiUK.js → p-C6p-ygxq.js} +1 -1
- package/dist/components/ui-chip.js +1 -1
- package/dist/components/ui-combobox.js +1 -1
- package/dist/components/ui-context-menu.js +1 -1
- package/dist/components/ui-dialog.js +1 -1
- package/dist/components/ui-disclosure.js +1 -1
- package/dist/components/ui-editable.d.ts +11 -0
- package/dist/components/ui-editable.js +1 -0
- package/dist/components/ui-floating-action-button.js +1 -1
- package/dist/components/ui-form-field.js +1 -1
- package/dist/components/ui-icon-button.js +1 -1
- package/dist/components/ui-input.js +1 -1
- package/dist/components/ui-menu-item.js +1 -1
- package/dist/components/ui-menu.js +1 -1
- package/dist/components/ui-multi-combobox.d.ts +11 -0
- package/dist/components/ui-multi-combobox.js +1 -0
- package/dist/components/ui-popover.js +1 -1
- package/dist/components/ui-radio-group.js +1 -1
- package/dist/components/ui-radio.js +1 -1
- package/dist/components/ui-search-result-row.js +1 -1
- package/dist/components/ui-search-shell.js +1 -1
- package/dist/components/ui-select.js +1 -1
- package/dist/components/ui-switch.js +1 -1
- package/dist/components/ui-tabs.js +1 -1
- package/dist/components/ui-textarea.js +1 -1
- package/dist/components/ui-toast-region.js +1 -1
- package/dist/components/ui-tooltip.js +1 -1
- package/dist/components/ui-top-bar.js +1 -1
- package/dist/components/ui-tree-item.js +1 -1
- package/dist/components/ui-tree.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/looma.js +1 -1
- package/dist/esm/{ui-combobox.entry.js → ui-chip_2.entry.js} +30 -6
- package/dist/esm/ui-context-menu.entry.js +1 -1
- package/dist/esm/ui-dialog.entry.js +1 -1
- package/dist/esm/ui-disclosure.entry.js +1 -1
- package/dist/esm/ui-editable.entry.js +98 -0
- package/dist/esm/ui-floating-action-button.entry.js +1 -1
- package/dist/esm/ui-form-field.entry.js +1 -1
- package/dist/esm/ui-icon-button.entry.js +1 -1
- package/dist/esm/ui-input.entry.js +1 -1
- package/dist/esm/ui-menu-item.entry.js +1 -1
- package/dist/esm/ui-menu.entry.js +1 -1
- package/dist/esm/ui-multi-combobox.entry.js +156 -0
- package/dist/esm/ui-popover.entry.js +1 -1
- package/dist/esm/ui-radio-group.entry.js +1 -1
- package/dist/esm/ui-radio.entry.js +1 -1
- package/dist/esm/ui-search-result-row.entry.js +1 -1
- package/dist/esm/ui-search-shell.entry.js +1 -1
- package/dist/esm/ui-select.entry.js +1 -1
- package/dist/esm/ui-switch.entry.js +2 -2
- package/dist/esm/ui-tabs.entry.js +1 -1
- package/dist/esm/ui-textarea.entry.js +1 -1
- package/dist/esm/ui-toast-region.entry.js +1 -1
- package/dist/esm/ui-tooltip.entry.js +1 -1
- package/dist/esm/ui-top-bar.entry.js +1 -1
- package/dist/esm/ui-tree-item.entry.js +2 -2
- package/dist/esm/ui-tree.entry.js +1 -1
- package/dist/index.cjs +339 -63
- package/dist/index.d.cts +18 -1
- package/dist/index.d.ts +18 -1
- package/dist/index.js +2 -2
- package/dist/looma/looma.esm.js +1 -1
- package/dist/looma/{p-314d5c7c.entry.js → p-0e1741cb.entry.js} +1 -1
- package/dist/looma/{p-bd00d4e8.entry.js → p-0ef4bf13.entry.js} +1 -1
- package/dist/looma/{p-8e254bc4.entry.js → p-166f8593.entry.js} +1 -1
- package/dist/looma/p-262a542c.entry.js +1 -0
- package/dist/looma/{p-672e3d16.entry.js → p-26d357ae.entry.js} +1 -1
- package/dist/looma/{p-b63f6d4f.entry.js → p-30f01909.entry.js} +1 -1
- package/dist/looma/p-393e3e02.entry.js +1 -0
- package/dist/looma/p-3a44b9f9.entry.js +1 -0
- package/dist/looma/{p-fd1e4d22.entry.js → p-558d4f5b.entry.js} +1 -1
- package/dist/looma/{p-25e18ad6.entry.js → p-5780cefa.entry.js} +1 -1
- package/dist/looma/p-5a7261e1.entry.js +1 -0
- package/dist/looma/{p-03f44c45.entry.js → p-7319c147.entry.js} +1 -1
- package/dist/looma/{p-f1750fd7.entry.js → p-78b7e466.entry.js} +1 -1
- package/dist/looma/{p-7c4a225f.entry.js → p-7eb04f09.entry.js} +1 -1
- package/dist/looma/{p-e0f241ab.entry.js → p-81c533f5.entry.js} +1 -1
- package/dist/looma/{p-8e6b1001.entry.js → p-87f501cf.entry.js} +1 -1
- package/dist/looma/{p-cc915913.entry.js → p-89e71bbb.entry.js} +1 -1
- package/dist/looma/{p-a63e2561.entry.js → p-92cd1841.entry.js} +1 -1
- package/dist/looma/{p-5a900d89.entry.js → p-95eb3b58.entry.js} +1 -1
- package/dist/looma/{p-839faf55.entry.js → p-96ec4d7a.entry.js} +1 -1
- package/dist/looma/p-b6c776fb.entry.js +1 -0
- package/dist/looma/{p-2c03fa73.entry.js → p-bcb1b47b.entry.js} +1 -1
- package/dist/looma/{p-68430534.entry.js → p-d62da01d.entry.js} +1 -1
- package/dist/looma/{p-13f8195a.entry.js → p-dbcb479c.entry.js} +1 -1
- package/dist/looma/{p-920656cf.entry.js → p-e14024bf.entry.js} +1 -1
- package/dist/looma/{p-3ef2a21b.entry.js → p-fc180770.entry.js} +1 -1
- package/dist/types/components/ui-chip/ui-chip.d.ts +2 -0
- package/dist/types/components/ui-combobox/ui-combobox.d.ts +4 -0
- package/dist/types/components/ui-editable/ui-editable.d.ts +24 -0
- package/dist/types/components/ui-multi-combobox/ui-multi-combobox.d.ts +47 -0
- package/dist/types/components.d.ts +234 -0
- package/dist/types/field/editable.d.ts +5 -0
- package/dist/types/field/multi-combobox.d.ts +11 -0
- package/dist/{ui-affordance-scope.entry-3TUZ6GLW.js → ui-affordance-scope.entry-VSSP52ZP.js} +1 -1
- package/dist/{ui-avatar-group.entry-XGJKN25W.js → ui-avatar-group.entry-JMCLL6FW.js} +1 -1
- package/dist/{ui-avatar.entry-SN3G44HW.js → ui-avatar.entry-X2YQ3QPG.js} +1 -1
- package/dist/{ui-badge.entry-B6WDCWJX.js → ui-badge.entry-OJ6FJJKL.js} +1 -1
- package/dist/{ui-button.entry-AZYUELLV.js → ui-button.entry-ZN6JLND7.js} +1 -1
- package/dist/{ui-callout.entry-QRPWRMPC.js → ui-callout.entry-7K6NXQ7U.js} +1 -1
- package/dist/{ui-checkbox.entry-OB6GFC4M.js → ui-checkbox.entry-GUYRVU6O.js} +1 -1
- package/dist/{ui-combobox.entry-IIMMUJF7.js → ui-chip_2.entry-M2DOTIGY.js} +32 -7
- package/dist/{ui-context-menu.entry-AIULIE5Y.js → ui-context-menu.entry-BM7FHOUJ.js} +2 -2
- package/dist/{ui-dialog.entry-QSYWYHLY.js → ui-dialog.entry-AZAD37CG.js} +2 -2
- package/dist/{ui-disclosure.entry-3BJEYU3U.js → ui-disclosure.entry-XDPGKMBK.js} +2 -2
- package/dist/ui-editable.entry-S3TE6KFT.js +110 -0
- package/dist/{ui-floating-action-button.entry-JEVNV6FI.js → ui-floating-action-button.entry-U7HGA3CS.js} +2 -2
- package/dist/{ui-form-field.entry-PKSY7UU4.js → ui-form-field.entry-C2ZSP3TM.js} +2 -2
- package/dist/{ui-icon-button.entry-TPX7BE7R.js → ui-icon-button.entry-P6H2LY7D.js} +2 -2
- package/dist/{ui-input.entry-6NCLNW4E.js → ui-input.entry-GTNQJCQ2.js} +2 -2
- package/dist/{ui-menu-item.entry-KA2K3PKV.js → ui-menu-item.entry-2HWOGUO5.js} +2 -2
- package/dist/{ui-menu.entry-7GDO5L2T.js → ui-menu.entry-NZ7ER54K.js} +2 -2
- package/dist/ui-multi-combobox.entry-DZ5LLSVQ.js +167 -0
- package/dist/{ui-popover.entry-FR6YRNK6.js → ui-popover.entry-ZOEQMUWG.js} +2 -2
- package/dist/{ui-radio-group.entry-7QHXQSNO.js → ui-radio-group.entry-QCQ46EK5.js} +2 -2
- package/dist/{ui-radio.entry-YNMXKLDW.js → ui-radio.entry-QAATWUYT.js} +2 -2
- package/dist/{ui-search-result-row.entry-AHVVAAIO.js → ui-search-result-row.entry-2I3DH2OT.js} +2 -2
- package/dist/{ui-search-shell.entry-CNBEAMEZ.js → ui-search-shell.entry-7RS55ORF.js} +2 -2
- package/dist/{ui-select.entry-TUY6TCTC.js → ui-select.entry-6O4KD4G7.js} +2 -2
- package/dist/{ui-switch.entry-26LFI7B5.js → ui-switch.entry-DY5PSHCQ.js} +3 -3
- package/dist/{ui-tabs.entry-LXB62RJJ.js → ui-tabs.entry-6X56UOUE.js} +2 -2
- package/dist/{ui-textarea.entry-JYGMGPX2.js → ui-textarea.entry-RDYP6O77.js} +2 -2
- package/dist/{ui-toast-region.entry-TOW4KZLZ.js → ui-toast-region.entry-EBY42KS5.js} +2 -2
- package/dist/{ui-tooltip.entry-SKFNYXPH.js → ui-tooltip.entry-PLXMPOKV.js} +2 -2
- package/dist/{ui-top-bar.entry-S3YP52EA.js → ui-top-bar.entry-QKE2DLVD.js} +2 -2
- package/dist/{ui-tree-item.entry-LWYIPYLC.js → ui-tree-item.entry-TC6YWIC6.js} +3 -3
- package/dist/{ui-tree.entry-LXKUQFRU.js → ui-tree.entry-UL6UHCUT.js} +2 -2
- package/package.json +1 -1
- package/vue/{chunk-D4AJULDE.js → chunk-GXQY27K2.js} +84 -1
- package/vue/editor/index.js +1 -1
- package/vue/index.d.ts +118 -2
- package/vue/index.js +5 -1
- package/dist/cjs/ui-chip.cjs.entry.js +0 -19
- package/dist/esm/ui-chip.entry.js +0 -17
- package/dist/looma/p-82f2fa3d.entry.js +0 -1
- package/dist/looma/p-97e8cb0e.entry.js +0 -1
- package/dist/looma/p-9e1c4020.entry.js +0 -1
- package/dist/looma/p-cfba8f7c.entry.js +0 -1
- package/dist/ui-chip.entry-XSNPJXX3.js +0 -22
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
|
|
2
|
+
import { i as isControlled, c as controlledOrDefault } from './controlled-state-BnGhGgTH.js';
|
|
3
|
+
|
|
4
|
+
const uiEditableCss = () => `:host{display:block;min-inline-size:0}[hidden]{display:none !important}`;
|
|
5
|
+
|
|
6
|
+
const UIEditable = class {
|
|
7
|
+
constructor(hostRef) {
|
|
8
|
+
registerInstance(this, hostRef);
|
|
9
|
+
this.editChange = createEvent(this, "edit-change");
|
|
10
|
+
}
|
|
11
|
+
get host() { return getElement(this); }
|
|
12
|
+
/** Controlled edit state. Omit it to use defaultEdit and local interaction state. */
|
|
13
|
+
edit;
|
|
14
|
+
defaultEdit = false;
|
|
15
|
+
disabled = false;
|
|
16
|
+
editChange;
|
|
17
|
+
internalEdit = false;
|
|
18
|
+
trigger = null;
|
|
19
|
+
syncFromProp() {
|
|
20
|
+
if (isControlled(this.edit))
|
|
21
|
+
this.internalEdit = this.edit;
|
|
22
|
+
}
|
|
23
|
+
componentWillLoad() {
|
|
24
|
+
this.internalEdit = controlledOrDefault(this.edit, this.defaultEdit);
|
|
25
|
+
}
|
|
26
|
+
componentDidLoad() {
|
|
27
|
+
this.host.ownerDocument.addEventListener('pointerdown', this.onDocumentPointerDown, true);
|
|
28
|
+
}
|
|
29
|
+
disconnectedCallback() {
|
|
30
|
+
this.host.ownerDocument.removeEventListener('pointerdown', this.onDocumentPointerDown, true);
|
|
31
|
+
}
|
|
32
|
+
requestEdit(next, reason, trigger) {
|
|
33
|
+
if (this.disabled || this.internalEdit === next)
|
|
34
|
+
return;
|
|
35
|
+
if (!isControlled(this.edit))
|
|
36
|
+
this.internalEdit = next;
|
|
37
|
+
this.editChange.emit({ edit: next, reason, trigger });
|
|
38
|
+
if (next)
|
|
39
|
+
requestAnimationFrame(() => this.focusEditor());
|
|
40
|
+
else
|
|
41
|
+
requestAnimationFrame(() => this.trigger?.focus());
|
|
42
|
+
}
|
|
43
|
+
focusEditor() {
|
|
44
|
+
const editRoot = this.host.querySelector('[slot="edit"]');
|
|
45
|
+
const candidate = editRoot?.matches('input, textarea, select, button, [tabindex], ui-combobox, ui-multi-combobox')
|
|
46
|
+
? editRoot
|
|
47
|
+
: editRoot?.querySelector('input, textarea, select, button, [tabindex], ui-combobox, ui-multi-combobox');
|
|
48
|
+
const focusInput = candidate?.focusInput;
|
|
49
|
+
if (typeof focusInput === 'function')
|
|
50
|
+
void focusInput.call(candidate);
|
|
51
|
+
else
|
|
52
|
+
candidate?.focus();
|
|
53
|
+
}
|
|
54
|
+
eventTrigger(event) {
|
|
55
|
+
return event.composedPath().find(node => node instanceof HTMLElement && node.hasAttribute('data-ui-editable-trigger'));
|
|
56
|
+
}
|
|
57
|
+
onClick = (event) => {
|
|
58
|
+
if (this.internalEdit || this.disabled)
|
|
59
|
+
return;
|
|
60
|
+
const trigger = this.eventTrigger(event);
|
|
61
|
+
if (!trigger)
|
|
62
|
+
return;
|
|
63
|
+
this.trigger = trigger;
|
|
64
|
+
this.requestEdit(true, 'activate', 'pointer');
|
|
65
|
+
};
|
|
66
|
+
onKeyDown = (event) => {
|
|
67
|
+
if (this.internalEdit && event.key === 'Escape') {
|
|
68
|
+
event.preventDefault();
|
|
69
|
+
event.stopPropagation();
|
|
70
|
+
this.requestEdit(false, 'escape', 'keyboard');
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
if (this.internalEdit || !['Enter', ' '].includes(event.key))
|
|
74
|
+
return;
|
|
75
|
+
const trigger = this.eventTrigger(event);
|
|
76
|
+
if (!trigger)
|
|
77
|
+
return;
|
|
78
|
+
event.preventDefault();
|
|
79
|
+
this.trigger = trigger;
|
|
80
|
+
this.requestEdit(true, 'activate', 'keyboard');
|
|
81
|
+
};
|
|
82
|
+
onDocumentPointerDown = (event) => {
|
|
83
|
+
if (!this.internalEdit || event.composedPath().includes(this.host))
|
|
84
|
+
return;
|
|
85
|
+
this.requestEdit(false, 'light-dismiss', 'pointer');
|
|
86
|
+
};
|
|
87
|
+
render() {
|
|
88
|
+
return h(Host, { key: 'f350400d4ebf897fb657b83b7cba9d309c5067bd', "data-edit": this.internalEdit ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("div", { key: 'f365ac61f59e9aaa1516121e3d6e2a42187e1d7b', part: "preview", hidden: this.internalEdit }, h("slot", { key: 'ea234b437cc4eb530f2994d695429be91d874ef7', name: "preview" })), h("div", { key: 'dacf0e74e72c47868986c80aaa60f55942fd9505', part: "edit", hidden: !this.internalEdit }, h("slot", { key: '54a943bc290335181a23b4cfa6055e4acfd8a62b', name: "edit" })));
|
|
89
|
+
}
|
|
90
|
+
static get watchers() { return {
|
|
91
|
+
"edit": [{
|
|
92
|
+
"syncFromProp": 0
|
|
93
|
+
}]
|
|
94
|
+
}; }
|
|
95
|
+
};
|
|
96
|
+
UIEditable.style = uiEditableCss();
|
|
97
|
+
|
|
98
|
+
export { UIEditable as ui_editable };
|
|
@@ -10,7 +10,7 @@ const UIFloatingActionButton = class {
|
|
|
10
10
|
mobileOnly = false;
|
|
11
11
|
label = '';
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: '9e917e07efcef5c0a96b8b09af8934f336a521bd', "data-disabled": this.disabled ? '' : undefined }, h("button", { key: '940daac4c2ff1144d7e82b36727205f286325a8e', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '382c70aa4836f6e799f98e1f0e4bc6e3104430fc' }))));
|
|
14
14
|
}
|
|
15
15
|
};
|
|
16
16
|
UIFloatingActionButton.style = uiFloatingActionButtonCss();
|
|
@@ -104,7 +104,7 @@ const UIFormField = class {
|
|
|
104
104
|
input.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
|
|
105
105
|
}
|
|
106
106
|
render() {
|
|
107
|
-
return (h(Host, { key: '
|
|
107
|
+
return (h(Host, { key: 'ac01e2be489b9c907169417dc5064061bd74ff7c', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, h("slot", { key: 'c739f9b2c948bc1d3db4316871c2293bf75cf520', onSlotchange: this.scheduleWire })));
|
|
108
108
|
}
|
|
109
109
|
};
|
|
110
110
|
UIFormField.style = uiFormFieldCss();
|
|
@@ -13,7 +13,7 @@ const UIIconButton = class {
|
|
|
13
13
|
/** Reveals this control through a surrounding ui-affordance-scope. */
|
|
14
14
|
anticipatory = false;
|
|
15
15
|
render() {
|
|
16
|
-
return (h(Host, { key: '
|
|
16
|
+
return (h(Host, { key: '225e147d184109d39a2e6f9236ba3ba3c5864c31', "data-disabled": this.disabled ? '' : undefined, "data-ui-affordance": this.anticipatory ? 'button' : undefined }, h("button", { key: '7e54fab4520ae6641c974abf19e975e8eec7a3df', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, h("slot", { key: '54f9ba27c5a2ca896267f07ad1055907e74a64bc' }))));
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
19
|
UIIconButton.style = uiIconButtonCss();
|
|
@@ -76,7 +76,7 @@ const UIInput = class {
|
|
|
76
76
|
});
|
|
77
77
|
};
|
|
78
78
|
render() {
|
|
79
|
-
return (h(Host, { key: '
|
|
79
|
+
return (h(Host, { key: '0d8676e8458476681653ef4600dcb0f3b56d1ed1', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: 'd3585c07b6985d9090002f7a9c0eea1227517e0f', ref: (el) => (this.slotRef = el) })));
|
|
80
80
|
}
|
|
81
81
|
static get watchers() { return {
|
|
82
82
|
"value": [{
|
|
@@ -9,7 +9,7 @@ const UIMenuItem = class {
|
|
|
9
9
|
disabled = false;
|
|
10
10
|
value = '';
|
|
11
11
|
render() {
|
|
12
|
-
return (h(Host, { key: '
|
|
12
|
+
return (h(Host, { key: '711e7f70268d23969e40073cd47b065afadc22c9', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, h("span", { key: 'd0c0aff983bdbc48666fcd652b39340bfd92c790', class: "menu-item__surface" }, h("slot", { key: '3fc6111848142b388529a9cdb5f6134bffe8fa42' }))));
|
|
13
13
|
}
|
|
14
14
|
};
|
|
15
15
|
UIMenuItem.style = uiMenuItemCss();
|
|
@@ -158,7 +158,7 @@ const UIMenu = class {
|
|
|
158
158
|
}
|
|
159
159
|
};
|
|
160
160
|
render() {
|
|
161
|
-
return (h(Host, { key: '
|
|
161
|
+
return (h(Host, { key: 'afba5a7f63238afdb6f71a3636c1f294d3e8ac6f', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, h("div", { key: '50d770efd27dddca436b804f10f1cc40bc604cb5', class: "menu__surface" }, h("slot", { key: '5014fc43a0ee2d66168bbcc1d52b20bd5120acb9' }))));
|
|
162
162
|
}
|
|
163
163
|
static get watchers() { return {
|
|
164
164
|
"open": [{
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
|
|
2
|
+
|
|
3
|
+
const uiMultiComboboxCss = () => `:host{display:block;min-inline-size:0;color:var(--ui-text-primary);font:inherit}ui-combobox::part(field){flex-wrap:wrap;align-items:center;gap:var(--ui-space-1);min-block-size:var(--ui-multi-combobox-min-block-size, 2.5rem);padding:var(--ui-space-1)}ui-combobox::part(input){flex:1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);width:auto;min-block-size:1.75rem;padding:var(--ui-space-0-5) var(--ui-space-1)}.items{display:contents}.item{appearance:none;display:inline-flex;max-inline-size:100%;padding:0;border:0;border-radius:var(--ui-radius-1);background:transparent;color:inherit;font:inherit;cursor:default}.item:focus-visible{outline:2px solid var(--ui-focus-ring);outline-offset:1px}.item:disabled{opacity:.6}`;
|
|
4
|
+
|
|
5
|
+
const UIMultiCombobox = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.queryChange = createEvent(this, "query-change");
|
|
9
|
+
this.addItem = createEvent(this, "add-item");
|
|
10
|
+
this.removeItem = createEvent(this, "remove-item");
|
|
11
|
+
this.createItem = createEvent(this, "create-item");
|
|
12
|
+
this.optionsChange = createEvent(this, "options-change");
|
|
13
|
+
}
|
|
14
|
+
get host() { return getElement(this); }
|
|
15
|
+
label = '';
|
|
16
|
+
placeholder = '';
|
|
17
|
+
items = [];
|
|
18
|
+
config = {};
|
|
19
|
+
query;
|
|
20
|
+
defaultQuery = '';
|
|
21
|
+
disabled = false;
|
|
22
|
+
readOnly = false;
|
|
23
|
+
required = false;
|
|
24
|
+
name = '';
|
|
25
|
+
queryChange;
|
|
26
|
+
addItem;
|
|
27
|
+
removeItem;
|
|
28
|
+
createItem;
|
|
29
|
+
optionsChange;
|
|
30
|
+
raw = '';
|
|
31
|
+
rows = [];
|
|
32
|
+
combobox;
|
|
33
|
+
filteredConfig;
|
|
34
|
+
filteredConfigSource;
|
|
35
|
+
filteredSelection = '';
|
|
36
|
+
componentWillLoad() { this.raw = this.query ?? this.defaultQuery; }
|
|
37
|
+
syncQuery() {
|
|
38
|
+
if (this.query !== undefined)
|
|
39
|
+
this.raw = this.query;
|
|
40
|
+
}
|
|
41
|
+
get selectedValues() { return new Set(this.items.map(item => item.value)); }
|
|
42
|
+
get comboboxConfig() {
|
|
43
|
+
const selectionKey = this.items.map(item => item.value).join('\u0000');
|
|
44
|
+
if (this.filteredConfig && this.filteredConfigSource === this.config && this.filteredSelection === selectionKey) {
|
|
45
|
+
return this.filteredConfig;
|
|
46
|
+
}
|
|
47
|
+
const ownerFilter = this.config.filter;
|
|
48
|
+
const selected = this.selectedValues;
|
|
49
|
+
this.filteredConfigSource = this.config;
|
|
50
|
+
this.filteredSelection = selectionKey;
|
|
51
|
+
this.filteredConfig = {
|
|
52
|
+
...this.config,
|
|
53
|
+
filter: (option, query, context) => !selected.has(option.value)
|
|
54
|
+
&& (ownerFilter ? ownerFilter(option, query, context) : option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase())),
|
|
55
|
+
};
|
|
56
|
+
return this.filteredConfig;
|
|
57
|
+
}
|
|
58
|
+
setQuery(query, trigger) {
|
|
59
|
+
if (this.query === undefined)
|
|
60
|
+
this.raw = query;
|
|
61
|
+
this.queryChange.emit({ query, display: query, trigger });
|
|
62
|
+
}
|
|
63
|
+
onQueryChange = (event) => {
|
|
64
|
+
event.stopPropagation();
|
|
65
|
+
this.setQuery(event.detail.query, event.detail.trigger);
|
|
66
|
+
};
|
|
67
|
+
onOptionsChange = (event) => {
|
|
68
|
+
event.stopPropagation();
|
|
69
|
+
this.rows = event.detail;
|
|
70
|
+
this.optionsChange.emit(event.detail);
|
|
71
|
+
};
|
|
72
|
+
onValueChange = (event) => {
|
|
73
|
+
event.stopPropagation();
|
|
74
|
+
if (event.detail.kind !== 'selection' || !event.detail.option)
|
|
75
|
+
return;
|
|
76
|
+
const item = event.detail.option;
|
|
77
|
+
this.addItem.emit({ item, index: this.items.length, trigger: event.detail.trigger });
|
|
78
|
+
// ui-combobox emits its selection value before the matching label query.
|
|
79
|
+
// Clear after both owner notifications so the stale label cannot win.
|
|
80
|
+
queueMicrotask(() => this.setQuery('', event.detail.trigger));
|
|
81
|
+
};
|
|
82
|
+
onCreateEntry = (event) => {
|
|
83
|
+
event.stopPropagation();
|
|
84
|
+
const query = event.detail.query.trim();
|
|
85
|
+
if (!query)
|
|
86
|
+
return;
|
|
87
|
+
this.setQuery('', event.detail.trigger);
|
|
88
|
+
this.createItem.emit({ query, trigger: event.detail.trigger });
|
|
89
|
+
};
|
|
90
|
+
remove(index, trigger) {
|
|
91
|
+
const item = this.items[index];
|
|
92
|
+
if (!item || item.disabled || this.disabled || this.readOnly)
|
|
93
|
+
return;
|
|
94
|
+
this.removeItem.emit({ item, index, trigger });
|
|
95
|
+
requestAnimationFrame(() => {
|
|
96
|
+
const buttons = this.host.shadowRoot?.querySelectorAll('[part="item"]') ?? [];
|
|
97
|
+
const next = buttons[Math.min(index, buttons.length - 1)] ?? buttons[index - 1];
|
|
98
|
+
if (next && next.dataset.value !== item.value)
|
|
99
|
+
next.focus();
|
|
100
|
+
else
|
|
101
|
+
void this.focusInput();
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
focusItem(index) {
|
|
105
|
+
this.host.shadowRoot?.querySelectorAll('[part="item"]')[index]?.focus();
|
|
106
|
+
}
|
|
107
|
+
onItemKeyDown = (event, index) => {
|
|
108
|
+
if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
|
|
109
|
+
return;
|
|
110
|
+
if (event.key === 'ArrowLeft') {
|
|
111
|
+
event.preventDefault();
|
|
112
|
+
event.stopPropagation();
|
|
113
|
+
this.focusItem(Math.max(0, index - 1));
|
|
114
|
+
}
|
|
115
|
+
else if (event.key === 'ArrowRight') {
|
|
116
|
+
event.preventDefault();
|
|
117
|
+
event.stopPropagation();
|
|
118
|
+
if (index === this.items.length - 1)
|
|
119
|
+
void this.focusInput();
|
|
120
|
+
else
|
|
121
|
+
this.focusItem(index + 1);
|
|
122
|
+
}
|
|
123
|
+
else if (event.key === 'Backspace' || event.key === 'Delete') {
|
|
124
|
+
event.preventDefault();
|
|
125
|
+
event.stopPropagation();
|
|
126
|
+
this.remove(index, 'keyboard');
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
onKeyDown = (event) => {
|
|
130
|
+
if (event.defaultPrevented || this.disabled || this.readOnly || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
|
|
131
|
+
return;
|
|
132
|
+
const input = event.composedPath().find(node => node instanceof HTMLInputElement);
|
|
133
|
+
if (!input || this.raw || (input.selectionStart ?? 0) > 0)
|
|
134
|
+
return;
|
|
135
|
+
if (event.key === 'ArrowLeft' && this.items.length) {
|
|
136
|
+
event.preventDefault();
|
|
137
|
+
this.focusItem(this.items.length - 1);
|
|
138
|
+
}
|
|
139
|
+
else if (event.key === 'Backspace' && this.items.length) {
|
|
140
|
+
event.preventDefault();
|
|
141
|
+
this.remove(this.items.length - 1, 'keyboard');
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
async focusInput() { await this.combobox?.focusInput(); }
|
|
145
|
+
render() {
|
|
146
|
+
return h(Host, { key: 'bdb03a28ea25b22340dc56381fa45031f0c47c27', onKeyDown: this.onKeyDown }, h("ui-combobox", { key: '51ba1ab747af9f216223bd71f524db79ef57b8a9', ref: element => this.combobox = element, label: this.label, "label-visibility": "sr-only", placeholder: this.placeholder, name: this.name, value: null, query: this.raw, config: this.comboboxConfig, size: "sm", disabled: this.disabled, readOnly: this.readOnly, required: this.required, "onQuery-change": this.onQueryChange, "onValue-change": this.onValueChange, "onCreate-entry": this.onCreateEntry, "onOptions-change": this.onOptionsChange }, h("div", { key: 'ebd8fd8e62db3c2e47b1bfc7558c01e7e1abb8ba', slot: "start", class: "items", role: "group", "aria-label": `Selected ${this.label}` }, this.items.map((item, index) => h("button", { type: "button", part: "item", class: "item", "data-value": item.value, tabIndex: -1, disabled: this.disabled || this.readOnly || item.disabled, "aria-label": `${item.label}, press Delete or Backspace to remove`, onKeyDown: event => this.onItemKeyDown(event, index) }, h("slot", { name: `item-${item.id}` }, h("ui-chip", { appearance: "pill" }, item.label))))), this.rows.map(option => h("span", { slot: `option-${option.id}` }, h("slot", { name: `option-${option.id}` }, option.label))), h("span", { key: '99cd9848130de37e52a4f735c95e3754dbc64691', slot: "create" }, h("slot", { key: '84cc7c14716819bd968bdfcb9213fe3887a5c2b9', name: "create" }, "Create \u201C", this.raw, "\u201D")), h("span", { key: '1660eb03425dea4d36797e416d91b051531a470d', slot: "loading" }, h("slot", { key: '10c979403e89331e8bdf69ff2db3f5bc272b2685', name: "loading" }, "Loading suggestions\u2026")), h("span", { key: '1c862b6c5906aa3ec5fc874de5a5119e13ef9422', slot: "empty" }, h("slot", { key: '1c70a1beb7321d3b2be888b3826a1dba2f6fcc70', name: "empty" }, "No suggestions.")), h("span", { key: '4b4da5cb8b22543b90ff9230191bbb2e81d16408', slot: "error" }, h("slot", { key: 'a371a5ce50895562ebc6e55227e4a4834af37f3d', name: "error" }, "Unable to load suggestions.")), h("div", { key: 'f82e38165d90bdbfa8413c0a561abf7ab5da0183', slot: "footer" }, h("slot", { key: '6c0bd2b89428832f4cb485f5d2e30a792859ba9e', name: "footer" }))));
|
|
147
|
+
}
|
|
148
|
+
static get watchers() { return {
|
|
149
|
+
"query": [{
|
|
150
|
+
"syncQuery": 0
|
|
151
|
+
}]
|
|
152
|
+
}; }
|
|
153
|
+
};
|
|
154
|
+
UIMultiCombobox.style = uiMultiComboboxCss();
|
|
155
|
+
|
|
156
|
+
export { UIMultiCombobox as ui_multi_combobox };
|
|
@@ -111,7 +111,7 @@ const UIPopover = class {
|
|
|
111
111
|
}
|
|
112
112
|
};
|
|
113
113
|
render() {
|
|
114
|
-
return (h(Host, { key: '
|
|
114
|
+
return (h(Host, { key: 'a4986ace0f3c586774a549cb844287b28ccd0531', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("div", { key: '8f2c589916d06138ef72bfe0d039893b3c59a7cc', class: "popover__surface" }, h("slot", { key: 'ee70e7dcc53a99b5c80e56862a6eb00edcfcf912' }))));
|
|
115
115
|
}
|
|
116
116
|
static get watchers() { return {
|
|
117
117
|
"open": [{
|
|
@@ -107,7 +107,7 @@ const UIRadioGroup = class {
|
|
|
107
107
|
}
|
|
108
108
|
};
|
|
109
109
|
render() {
|
|
110
|
-
return (h(Host, { key: '
|
|
110
|
+
return (h(Host, { key: '1882ad7c092c6a138eab2a52c19beb9a950a8d5a', role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: 'd5abade3d23963410cfbac17e80aa16dd21ccc6e' })));
|
|
111
111
|
}
|
|
112
112
|
static get watchers() { return {
|
|
113
113
|
"value": [{
|
|
@@ -67,7 +67,7 @@ const UIRadio = class {
|
|
|
67
67
|
});
|
|
68
68
|
};
|
|
69
69
|
render() {
|
|
70
|
-
return (h(Host, { key: '
|
|
70
|
+
return (h(Host, { key: 'f4700b43790accd29a6bcc55fcc862072e29c335', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: 'ed32c35f8f68c662a8b95e58b74c8c76c959ea49', ref: (el) => (this.slotRef = el) })));
|
|
71
71
|
}
|
|
72
72
|
static get watchers() { return {
|
|
73
73
|
"checked": [{
|
|
@@ -37,7 +37,7 @@ const UISearchResultRow = class {
|
|
|
37
37
|
this.hasTrailing = slotHasContent(this.trailingSlot);
|
|
38
38
|
};
|
|
39
39
|
render() {
|
|
40
|
-
return (h(Host, { key: '
|
|
40
|
+
return (h(Host, { key: 'eeda041dbcf8841cd53be9c532df208eb3be3d3b' }, h("button", { key: '71d3db6d2eca4f8d7796429f68ef73bf2c7b62f7', class: "search-result-row", type: "button", disabled: this.disabled, part: "button" }, h("span", { key: 'f2260cab9f654e7f5e96a5e7e2a1cbbb5a55fde3', class: "search-result-row__leading", part: "leading", hidden: !this.hasLeading }, h("slot", { key: '824fffc19c2b5712dae0c000f12cc36a0043a370', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), h("span", { key: '4e3728ea7d363f256f1b3283df6eb984cf3f570f', class: "search-result-row__content", part: "content" }, h("span", { key: '95009b1ce569fb4251df62334a5dd88f1de561af', class: "search-result-row__title", part: "title" }, h("slot", { key: '132beecf36471ae0db68d686829428225699c534', name: "title" })), h("span", { key: '0ad7c8d52aa40ccf62667d3ecca4d48b49917a9a', class: "search-result-row__meta", part: "meta", hidden: !this.hasMeta }, h("slot", { key: '4b97129504571a676839287bd87e68d803f8bc99', name: "meta", ref: (el) => (this.metaSlot = el), onSlotchange: this.syncSlots })), h("span", { key: 'e6c73e653fb7dc213866a15870281f3f6d95a86b', class: "search-result-row__excerpt", part: "excerpt", hidden: !this.hasExcerpt }, h("slot", { key: '49deae8194485304380b8b4b3d4fe96cd6623f4d', name: "excerpt", ref: (el) => (this.excerptSlot = el), onSlotchange: this.syncSlots }))), h("span", { key: 'c7c6f0b57668644a28d3c4c981b4db79a0e3c42a', class: "search-result-row__trailing", part: "trailing", hidden: !this.hasTrailing }, h("slot", { key: 'e6cbceeb41d23c9b7514f53663438069499d1a4d', name: "trailing", ref: (el) => (this.trailingSlot = el), onSlotchange: this.syncSlots })))));
|
|
41
41
|
}
|
|
42
42
|
};
|
|
43
43
|
UISearchResultRow.style = uiSearchResultRowCss();
|
|
@@ -29,7 +29,7 @@ const UISearchShell = class {
|
|
|
29
29
|
this.hasFooter = slotHasContent(this.footerSlot);
|
|
30
30
|
};
|
|
31
31
|
render() {
|
|
32
|
-
return (h("div", { key: '
|
|
32
|
+
return (h("div", { key: 'ae5baf1fae88f3c0ff8c98e68e1c31d7f19d7b6a', class: "search-shell", part: "base" }, h("slot", { key: '192d10867902bc4618762ab3ce1ca8a44229ec11', name: "backdrop" }), h("div", { key: '72bafd3ba7aadebcb011fb27f56793a9079bb2e1', class: "search-shell__panel", part: "panel" }, h("div", { key: 'c2d46c9099699cc1c2f357cb51d11ab0e6cf6c69', class: "search-shell__search", part: "search" }, h("slot", { key: '21f4ed690247fa794bd9322c75cee1721926087a', name: "search" })), h("div", { key: '84baba674456aa2a5878d5858d0e6531251440ce', class: "search-shell__status", part: "status", hidden: !this.hasStatus }, h("slot", { key: '6e7b6533a29231ebbcd41529d8120649ca4a1dd1', name: "status", ref: (el) => (this.statusSlot = el), onSlotchange: this.syncSlots })), h("div", { key: '710d51d450132ad0f528b2eb2cd6f0312dbced2f', class: "search-shell__body", part: "body" }, h("slot", { key: '2c380ff4ad33ead6ca8c2611ebc024f125f0da48', name: "body" })), h("div", { key: '6923984a31c7bc23bae3ecee08d7acad14703a02', class: "search-shell__footer", part: "footer", hidden: !this.hasFooter }, h("slot", { key: '57c2eab7a3f46558ada8d1aa70d64f434bb8cdd6', name: "footer", ref: (el) => (this.footerSlot = el), onSlotchange: this.syncSlots })))));
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
35
|
UISearchShell.style = uiSearchShellCss();
|
|
@@ -78,7 +78,7 @@ const UISelect = class {
|
|
|
78
78
|
});
|
|
79
79
|
};
|
|
80
80
|
render() {
|
|
81
|
-
return (h(Host, { key: '
|
|
81
|
+
return (h(Host, { key: '74cbe4a76a23af415c202c61951ad513b0ed6cb8', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: 'e86eb0cfb0d379cb3f8b2ea5ce3c69639d0cdda4', ref: (el) => (this.slotRef = el) })));
|
|
82
82
|
}
|
|
83
83
|
static get watchers() { return {
|
|
84
84
|
"value": [{
|
|
@@ -47,7 +47,7 @@ const UISwitch = class {
|
|
|
47
47
|
this.toggle('pointer');
|
|
48
48
|
};
|
|
49
49
|
render() {
|
|
50
|
-
return (h(Host, { key: '
|
|
50
|
+
return (h(Host, { key: 'a37ded5259d71a57308cba6dd158ae4ae81e4e8b', role: "switch", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.onKeydown, onClick: this.onClick }, h("input", { key: '882f81f39d752430f1de1554a5d83176416f4617', type: "checkbox", checked: this.internalChecked, disabled: this.disabled, required: this.required, value: this.value, "aria-hidden": "true", tabIndex: -1, onChange: (e) => {
|
|
51
51
|
const input = e.target;
|
|
52
52
|
const checked = input.checked;
|
|
53
53
|
if (!isControlled(this.checked))
|
|
@@ -59,7 +59,7 @@ const UISwitch = class {
|
|
|
59
59
|
});
|
|
60
60
|
if (isControlled(this.checked))
|
|
61
61
|
input.checked = this.internalChecked;
|
|
62
|
-
} }), h("slot", { key: '
|
|
62
|
+
} }), h("slot", { key: 'b3b2b5afae622d1ae79cadd84f60c6b6c2df55a4' })));
|
|
63
63
|
}
|
|
64
64
|
static get watchers() { return {
|
|
65
65
|
"checked": [{
|
|
@@ -97,7 +97,7 @@ const UITabs = class {
|
|
|
97
97
|
}
|
|
98
98
|
};
|
|
99
99
|
render() {
|
|
100
|
-
return (h(Host, { key: '
|
|
100
|
+
return (h(Host, { key: '19207153c7b7a6ea5f5ffb50439e99af70984b44', orientation: this.orientation, "data-orientation": this.orientation }, h("slot", { key: '5045cd040eeccd028c00328206d47f7d17b622de' })));
|
|
101
101
|
}
|
|
102
102
|
static get watchers() { return {
|
|
103
103
|
"value": [{
|
|
@@ -77,7 +77,7 @@ const UITextarea = class {
|
|
|
77
77
|
});
|
|
78
78
|
};
|
|
79
79
|
render() {
|
|
80
|
-
return (h(Host, { key: '
|
|
80
|
+
return (h(Host, { key: '020adfed4a177ef5d07852ff2e6ffb66b6f80742', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: '2e9bd0e071e24fcf248eadf38f16484321359503', ref: (el) => (this.slotRef = el) })));
|
|
81
81
|
}
|
|
82
82
|
static get watchers() { return {
|
|
83
83
|
"value": [{
|
|
@@ -75,7 +75,7 @@ const UIToastRegion = class {
|
|
|
75
75
|
});
|
|
76
76
|
};
|
|
77
77
|
render() {
|
|
78
|
-
return (h(Host, { key: '
|
|
78
|
+
return (h(Host, { key: '8a3546bcd59e12f21393ea55fa4d232d3907a34e', role: "region", "aria-label": "Notifications", "aria-live": "polite", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: 'a4a4525a1ca768d65ff36b3889a821b8dda8b6f7' })));
|
|
79
79
|
}
|
|
80
80
|
static get watchers() { return {
|
|
81
81
|
"open": [{
|
|
@@ -217,7 +217,7 @@ const UITooltip = class {
|
|
|
217
217
|
}
|
|
218
218
|
}
|
|
219
219
|
render() {
|
|
220
|
-
return (h(Host, { key: '
|
|
220
|
+
return (h(Host, { key: '6c70f235889d6f1c425f0a51fcfc04e06a96dea4', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined }, h("div", { key: '5c4f1d264e32d308f5b26af4e967e13369c4238a', class: "tooltip__surface" }, h("slot", { key: '52b5900d67ffa7590b0ff97511f99718d2e8c311' }))));
|
|
221
221
|
}
|
|
222
222
|
static get watchers() { return {
|
|
223
223
|
"open": [{
|
|
@@ -33,7 +33,7 @@ const UITopBar = class {
|
|
|
33
33
|
this.hasActions = slotHasContent(this.actionsSlot);
|
|
34
34
|
};
|
|
35
35
|
render() {
|
|
36
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: 'ef7cf644a8e8381d7d1f8d093bcfefcdc4620682' }, h("header", { key: '5055594a179d86efefd43529e070a582c51cb1d8', class: "top-bar", part: "base" }, h("div", { key: 'bd6ec069ae9d7820a6992250ba1aa997b4cc6754', class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: '3b9b1b73fb455ad720e1db46757555eb3713c0b8', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), h("div", { key: 'e402cc0cb7ec4418460182f8f32cb161c6139221', class: "top-bar__title" }, h("slot", { key: 'fce0cfc11da269167853f591742b1369023864ae' })), h("div", { key: '6861bb04f399076378aa1fa9be24b35db277106a', class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: '3857f37d53ec99b36a52cb7830e634afdee29d2e', name: "search", ref: (el) => (this.searchSlot = el), onSlotchange: this.syncSlots })), h("div", { key: '538f6297078b6d5aa85906e902066e8809f52540', class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: '3c45ff59c4b48673e796c6e93842cb11fceb652f', name: "actions", ref: (el) => (this.actionsSlot = el), onSlotchange: this.syncSlots })))));
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
39
|
UITopBar.style = uiTopBarCss();
|
|
@@ -117,10 +117,10 @@ const UITreeItem = class {
|
|
|
117
117
|
const expanded = this.isExpanded();
|
|
118
118
|
const disclosureLabel = `${expanded ? 'Collapse' : 'Expand'} ${this.label || 'item'}`;
|
|
119
119
|
const dragLabel = `Drag ${this.label || 'item'} to reorder`;
|
|
120
|
-
return (h(Host, { key: '
|
|
120
|
+
return (h(Host, { key: 'f092fa9586a39aba1a9629ba42e52f8fbc10de05', role: "treeitem", "aria-label": this.label || undefined, "aria-level": String(level), "aria-expanded": this.container ? String(expanded) : undefined, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "data-container": this.container ? '' : undefined, "data-selected": this.selected ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-drag-type": this.dragType || 'item', "data-drop-scope": this.dropScope || undefined, "data-accepts": this.accepts || undefined, tabIndex: this.disabled || !this.tabStop ? -1 : 0, style: {
|
|
121
121
|
'--ui-tree-item-depth': String(level - 1),
|
|
122
122
|
'margin-inline-start': level > 1 ? 'var(--ui-tree-indent, 16px)' : '0px',
|
|
123
|
-
} }, h("div", { key: '
|
|
123
|
+
} }, h("div", { key: '2f16d97219ba9ec9e37688d97ad9144508aa1ed5', class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? (h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, h("span", { innerHTML: loomaIconMarkup('grip-vertical') }))) : null, this.container ? (h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(expanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, h("span", { class: { 'disclosure-icon': true, 'disclosure-icon--expanded': expanded }, innerHTML: loomaIconMarkup('chevron-down') }))) : h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), h("span", { key: 'd984631c891df304edb3e1dc5bcd19af3ad8e20d', class: "leading", part: "leading" }, h("slot", { key: '81a0e055859df5d4daaa6dac39013b23dcc2831b', name: "leading" })), h("span", { key: '3ae295523d5a3b9feaa9bfaa16d807349e37d78b', class: "label", part: "label" }, h("slot", { key: 'db8503a41d087d283074a41e76fa872ff4b2a707' })), h("span", { key: 'ac5b5db7128b31a9263b912bd64cd90ac640eaeb', class: "actions", part: "actions" }, h("slot", { key: 'c8842a5d80215ec297688c86f6bfe9b4d9bed333', name: "actions" })), h("span", { key: 'b7f239bc16867678291850ad61a5cd752d6a7425', class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? (h("div", { class: "children", part: "children", role: "group", hidden: !expanded }, h("slot", { name: "children" }))) : null, h("span", { key: '2a5f448db2f4f363a34a1a950785e0ee12cc9938', class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })));
|
|
124
124
|
}
|
|
125
125
|
static get watchers() { return {
|
|
126
126
|
"expanded": [{
|
|
@@ -490,7 +490,7 @@ const UITree = class {
|
|
|
490
490
|
}
|
|
491
491
|
};
|
|
492
492
|
render() {
|
|
493
|
-
return (h(Host, { key: '
|
|
493
|
+
return (h(Host, { key: '7efbf793fe63471006df57f0045a5fe995c81440', role: "tree", "aria-label": this.label || 'Tree' }, h("slot", { key: '1804e391796e7451c93cb58258e0e23ec3ad98c7' })));
|
|
494
494
|
}
|
|
495
495
|
};
|
|
496
496
|
UITree.style = uiTreeCss();
|