@threadlabs/looma 0.1.28 → 0.2.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.
Files changed (197) hide show
  1. package/dist/{chunk-G5AWV77V.js → chunk-JXSHRMYW.js} +32 -33
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/looma.cjs.js +1 -1
  4. package/dist/cjs/ui-chip_2.cjs.entry.js +190 -498
  5. package/dist/cjs/ui-combobox.cjs.entry.js +708 -0
  6. package/dist/cjs/ui-context-menu.cjs.entry.js +1 -1
  7. package/dist/cjs/ui-dialog.cjs.entry.js +1 -1
  8. package/dist/cjs/ui-disclosure.cjs.entry.js +1 -1
  9. package/dist/cjs/ui-editable.cjs.entry.js +3 -3
  10. package/dist/cjs/ui-floating-action-button.cjs.entry.js +1 -1
  11. package/dist/cjs/ui-form-field.cjs.entry.js +1 -1
  12. package/dist/cjs/ui-icon-button.cjs.entry.js +1 -1
  13. package/dist/cjs/ui-input.cjs.entry.js +1 -1
  14. package/dist/cjs/ui-menu-item.cjs.entry.js +1 -1
  15. package/dist/cjs/ui-menu.cjs.entry.js +1 -1
  16. package/dist/cjs/ui-popover.cjs.entry.js +1 -1
  17. package/dist/cjs/ui-radio-group.cjs.entry.js +1 -1
  18. package/dist/cjs/ui-radio.cjs.entry.js +1 -1
  19. package/dist/cjs/ui-search-result-row.cjs.entry.js +1 -1
  20. package/dist/cjs/ui-search-shell.cjs.entry.js +1 -1
  21. package/dist/cjs/ui-select.cjs.entry.js +1 -1
  22. package/dist/cjs/ui-switch.cjs.entry.js +2 -2
  23. package/dist/cjs/ui-tabs.cjs.entry.js +1 -1
  24. package/dist/cjs/ui-textarea.cjs.entry.js +1 -1
  25. package/dist/cjs/ui-toast-region.cjs.entry.js +1 -1
  26. package/dist/cjs/ui-top-bar.cjs.entry.js +1 -1
  27. package/dist/cjs/ui-tree-item.cjs.entry.js +2 -2
  28. package/dist/cjs/ui-tree.cjs.entry.js +1 -1
  29. package/dist/collection/collection-manifest.json +0 -1
  30. package/dist/collection/components/ui-combobox/ui-combobox.css +23 -0
  31. package/dist/collection/components/ui-combobox/ui-combobox.js +298 -21
  32. package/dist/collection/components/ui-context-menu/ui-context-menu.js +1 -1
  33. package/dist/collection/components/ui-dialog/ui-dialog.js +1 -1
  34. package/dist/collection/components/ui-disclosure/ui-disclosure.js +1 -1
  35. package/dist/collection/components/ui-editable/ui-editable.js +3 -3
  36. package/dist/collection/components/ui-floating-action-button/ui-floating-action-button.js +1 -1
  37. package/dist/collection/components/ui-form-field/ui-form-field.js +1 -1
  38. package/dist/collection/components/ui-icon-button/ui-icon-button.js +1 -1
  39. package/dist/collection/components/ui-input/ui-input.js +1 -1
  40. package/dist/collection/components/ui-menu/ui-menu.js +1 -1
  41. package/dist/collection/components/ui-menu-item/ui-menu-item.js +1 -1
  42. package/dist/collection/components/ui-popover/ui-popover.js +1 -1
  43. package/dist/collection/components/ui-radio/ui-radio.js +1 -1
  44. package/dist/collection/components/ui-radio-group/ui-radio-group.js +1 -1
  45. package/dist/collection/components/ui-search-result-row/ui-search-result-row.js +1 -1
  46. package/dist/collection/components/ui-search-shell/ui-search-shell.js +1 -1
  47. package/dist/collection/components/ui-select/ui-select.js +1 -1
  48. package/dist/collection/components/ui-switch/ui-switch.js +2 -2
  49. package/dist/collection/components/ui-tabs/ui-tabs.js +1 -1
  50. package/dist/collection/components/ui-textarea/ui-textarea.js +1 -1
  51. package/dist/collection/components/ui-toast-region/ui-toast-region.js +1 -1
  52. package/dist/collection/components/ui-tooltip/ui-tooltip.js +1 -1
  53. package/dist/collection/components/ui-top-bar/ui-top-bar.js +1 -1
  54. package/dist/collection/components/ui-tree/ui-tree.js +1 -1
  55. package/dist/collection/components/ui-tree-item/ui-tree-item.js +2 -2
  56. package/dist/components/index.d.ts +0 -2
  57. package/dist/components/index.js +1 -1
  58. package/dist/components/{p-B1macZOS.js → p-DWN2m6ta.js} +1 -1
  59. package/dist/components/p-DYiNETk6.js +1 -0
  60. package/dist/components/ui-combobox.js +1 -1
  61. package/dist/components/ui-context-menu.js +1 -1
  62. package/dist/components/ui-dialog.js +1 -1
  63. package/dist/components/ui-disclosure.js +1 -1
  64. package/dist/components/ui-editable.js +1 -1
  65. package/dist/components/ui-floating-action-button.js +1 -1
  66. package/dist/components/ui-form-field.js +1 -1
  67. package/dist/components/ui-icon-button.js +1 -1
  68. package/dist/components/ui-input.js +1 -1
  69. package/dist/components/ui-menu-item.js +1 -1
  70. package/dist/components/ui-menu.js +1 -1
  71. package/dist/components/ui-popover.js +1 -1
  72. package/dist/components/ui-radio-group.js +1 -1
  73. package/dist/components/ui-radio.js +1 -1
  74. package/dist/components/ui-search-result-row.js +1 -1
  75. package/dist/components/ui-search-shell.js +1 -1
  76. package/dist/components/ui-select.js +1 -1
  77. package/dist/components/ui-switch.js +1 -1
  78. package/dist/components/ui-tabs.js +1 -1
  79. package/dist/components/ui-textarea.js +1 -1
  80. package/dist/components/ui-toast-region.js +1 -1
  81. package/dist/components/ui-tooltip.js +1 -1
  82. package/dist/components/ui-top-bar.js +1 -1
  83. package/dist/components/ui-tree-item.js +1 -1
  84. package/dist/components/ui-tree.js +1 -1
  85. package/dist/esm/loader.js +1 -1
  86. package/dist/esm/looma.js +1 -1
  87. package/dist/esm/ui-chip_2.entry.js +192 -500
  88. package/dist/esm/ui-combobox.entry.js +706 -0
  89. package/dist/esm/ui-context-menu.entry.js +1 -1
  90. package/dist/esm/ui-dialog.entry.js +1 -1
  91. package/dist/esm/ui-disclosure.entry.js +1 -1
  92. package/dist/esm/ui-editable.entry.js +3 -3
  93. package/dist/esm/ui-floating-action-button.entry.js +1 -1
  94. package/dist/esm/ui-form-field.entry.js +1 -1
  95. package/dist/esm/ui-icon-button.entry.js +1 -1
  96. package/dist/esm/ui-input.entry.js +1 -1
  97. package/dist/esm/ui-menu-item.entry.js +1 -1
  98. package/dist/esm/ui-menu.entry.js +1 -1
  99. package/dist/esm/ui-popover.entry.js +1 -1
  100. package/dist/esm/ui-radio-group.entry.js +1 -1
  101. package/dist/esm/ui-radio.entry.js +1 -1
  102. package/dist/esm/ui-search-result-row.entry.js +1 -1
  103. package/dist/esm/ui-search-shell.entry.js +1 -1
  104. package/dist/esm/ui-select.entry.js +1 -1
  105. package/dist/esm/ui-switch.entry.js +2 -2
  106. package/dist/esm/ui-tabs.entry.js +1 -1
  107. package/dist/esm/ui-textarea.entry.js +1 -1
  108. package/dist/esm/ui-toast-region.entry.js +1 -1
  109. package/dist/esm/ui-top-bar.entry.js +1 -1
  110. package/dist/esm/ui-tree-item.entry.js +2 -2
  111. package/dist/esm/ui-tree.entry.js +1 -1
  112. package/dist/index.cjs +471 -514
  113. package/dist/index.js +2 -2
  114. package/dist/looma/looma.esm.js +1 -1
  115. package/dist/looma/{p-9a82c523.entry.js → p-1249a806.entry.js} +1 -1
  116. package/dist/looma/p-1c00670f.entry.js +1 -0
  117. package/dist/looma/p-22842f8c.entry.js +1 -0
  118. package/dist/looma/{p-1e1de77f.entry.js → p-2915d5c0.entry.js} +1 -1
  119. package/dist/looma/{p-88e61cab.entry.js → p-37ec2b4b.entry.js} +1 -1
  120. package/dist/looma/{p-2f3c1b57.entry.js → p-3b2961a6.entry.js} +1 -1
  121. package/dist/looma/{p-e07e6ac2.entry.js → p-3f60f4c8.entry.js} +1 -1
  122. package/dist/looma/{p-9551ebf6.entry.js → p-424d6719.entry.js} +1 -1
  123. package/dist/looma/{p-6cc3180b.entry.js → p-4caccfce.entry.js} +1 -1
  124. package/dist/looma/p-55e06e2e.entry.js +1 -0
  125. package/dist/looma/{p-3957f7ef.entry.js → p-56dac38a.entry.js} +1 -1
  126. package/dist/looma/p-5cbbf7a0.entry.js +1 -0
  127. package/dist/looma/{p-f431dc13.entry.js → p-6f20d470.entry.js} +1 -1
  128. package/dist/looma/{p-b68762f2.entry.js → p-7c0b5364.entry.js} +1 -1
  129. package/dist/looma/{p-e82f104c.entry.js → p-8bdd9495.entry.js} +1 -1
  130. package/dist/looma/{p-df696cca.entry.js → p-9cfbf722.entry.js} +1 -1
  131. package/dist/looma/{p-607c3056.entry.js → p-b6ede6bb.entry.js} +1 -1
  132. package/dist/looma/p-b6fb6ba3.entry.js +1 -0
  133. package/dist/looma/{p-da6e2d01.entry.js → p-b76e2111.entry.js} +1 -1
  134. package/dist/looma/{p-1a12eb5c.entry.js → p-d372b0db.entry.js} +1 -1
  135. package/dist/looma/p-d46317e0.entry.js +1 -0
  136. package/dist/looma/{p-20387ffa.entry.js → p-d4825822.entry.js} +1 -1
  137. package/dist/looma/{p-8a5e3fe1.entry.js → p-d5c3954f.entry.js} +1 -1
  138. package/dist/looma/{p-4f68f939.entry.js → p-e604e906.entry.js} +1 -1
  139. package/dist/looma/{p-e406656e.entry.js → p-f1f7c5cb.entry.js} +1 -1
  140. package/dist/types/components/ui-combobox/ui-combobox.d.ts +35 -4
  141. package/dist/types/components.d.ts +56 -153
  142. package/dist/{ui-affordance-scope.entry-X5526PRP.js → ui-affordance-scope.entry-VR7FLAWG.js} +1 -1
  143. package/dist/{ui-avatar-group.entry-U72MPB5K.js → ui-avatar-group.entry-L3UKOY3U.js} +1 -1
  144. package/dist/{ui-avatar.entry-OC4J3LTV.js → ui-avatar.entry-VM5OHEFQ.js} +1 -1
  145. package/dist/{ui-badge.entry-4MSUQRQV.js → ui-badge.entry-ZTM4OPUD.js} +1 -1
  146. package/dist/{ui-button.entry-22DESWN4.js → ui-button.entry-CIPUSV5B.js} +1 -1
  147. package/dist/{ui-callout.entry-LOGODDM5.js → ui-callout.entry-OBFCI2O7.js} +1 -1
  148. package/dist/{ui-checkbox.entry-XAGW3BW4.js → ui-checkbox.entry-XT6ET56H.js} +1 -1
  149. package/dist/{ui-tooltip.entry-AQ6UPBUP.js → ui-chip_2.entry-32SHCLV6.js} +18 -3
  150. package/dist/{ui-chip_2.entry-JCPHPXAG.js → ui-combobox.entry-ONBBPQ2C.js} +169 -30
  151. package/dist/{ui-context-menu.entry-24YOHF7L.js → ui-context-menu.entry-RXNUOK24.js} +2 -2
  152. package/dist/{ui-dialog.entry-XKNYDWOQ.js → ui-dialog.entry-IJXNUARC.js} +2 -2
  153. package/dist/{ui-disclosure.entry-2AWCGZ4C.js → ui-disclosure.entry-5QS7UDRH.js} +2 -2
  154. package/dist/{ui-editable.entry-HLEWO7BN.js → ui-editable.entry-D7LOQN2H.js} +3 -3
  155. package/dist/{ui-floating-action-button.entry-2NJDB4YN.js → ui-floating-action-button.entry-XQZCTZQT.js} +2 -2
  156. package/dist/{ui-form-field.entry-FJ5HYCTN.js → ui-form-field.entry-A654LJZE.js} +2 -2
  157. package/dist/{ui-icon-button.entry-YZHJQ5YR.js → ui-icon-button.entry-MJ7F7ZIH.js} +2 -2
  158. package/dist/{ui-input.entry-JMBLMNP6.js → ui-input.entry-B2XM7JQU.js} +2 -2
  159. package/dist/{ui-menu-item.entry-VBGXM66D.js → ui-menu-item.entry-JULYSFVW.js} +2 -2
  160. package/dist/{ui-menu.entry-I2N5H3YC.js → ui-menu.entry-ORRWW7HD.js} +2 -2
  161. package/dist/{ui-popover.entry-7JRSJM5S.js → ui-popover.entry-W67V4UPA.js} +2 -2
  162. package/dist/{ui-radio-group.entry-Q2XB7P3B.js → ui-radio-group.entry-KCFOR27M.js} +2 -2
  163. package/dist/{ui-radio.entry-NJO4NA4M.js → ui-radio.entry-I2P4V5E3.js} +2 -2
  164. package/dist/{ui-search-result-row.entry-RPMNDSRN.js → ui-search-result-row.entry-GHODLSLR.js} +2 -2
  165. package/dist/{ui-search-shell.entry-FMIMYD3B.js → ui-search-shell.entry-PDB5UN4B.js} +2 -2
  166. package/dist/{ui-select.entry-7NDBWNAU.js → ui-select.entry-D3CZHCKB.js} +2 -2
  167. package/dist/{ui-switch.entry-YUCPIZE4.js → ui-switch.entry-WUDRL4H5.js} +3 -3
  168. package/dist/{ui-tabs.entry-FXZWV665.js → ui-tabs.entry-MW64GKIJ.js} +2 -2
  169. package/dist/{ui-textarea.entry-HHLQR5GG.js → ui-textarea.entry-VHRBYY6G.js} +2 -2
  170. package/dist/{ui-toast-region.entry-PIIBHNYA.js → ui-toast-region.entry-ET75RWYP.js} +2 -2
  171. package/dist/{ui-top-bar.entry-S2L7ZM4U.js → ui-top-bar.entry-QIYA3LD3.js} +2 -2
  172. package/dist/{ui-tree-item.entry-UID7IJPA.js → ui-tree-item.entry-BDB7VEUS.js} +3 -3
  173. package/dist/{ui-tree.entry-UMD3DNG5.js → ui-tree.entry-GSC7BPRN.js} +2 -2
  174. package/package.json +1 -1
  175. package/vue/{chunk-2DDIBSFD.js → chunk-ROMBQS2L.js} +32 -89
  176. package/vue/editor/index.js +1 -1
  177. package/vue/index.d.ts +30 -107
  178. package/vue/index.js +1 -3
  179. package/dist/cjs/ui-multi-combobox.cjs.entry.js +0 -190
  180. package/dist/cjs/ui-tooltip.cjs.entry.js +0 -241
  181. package/dist/collection/components/ui-multi-combobox/ui-multi-combobox.css +0 -33
  182. package/dist/collection/components/ui-multi-combobox/ui-multi-combobox.js +0 -553
  183. package/dist/components/p-DiyiodGX.js +0 -1
  184. package/dist/components/p-d5fk1vBI.js +0 -1
  185. package/dist/components/ui-multi-combobox.d.ts +0 -11
  186. package/dist/components/ui-multi-combobox.js +0 -1
  187. package/dist/esm/ui-multi-combobox.entry.js +0 -188
  188. package/dist/esm/ui-tooltip.entry.js +0 -239
  189. package/dist/looma/p-071c139c.entry.js +0 -1
  190. package/dist/looma/p-311e54d4.entry.js +0 -1
  191. package/dist/looma/p-4a10a875.entry.js +0 -1
  192. package/dist/looma/p-4fc9917f.entry.js +0 -1
  193. package/dist/looma/p-63a9159f.entry.js +0 -1
  194. package/dist/looma/p-82de1112.entry.js +0 -1
  195. package/dist/looma/p-caa37be2.entry.js +0 -1
  196. package/dist/types/components/ui-multi-combobox/ui-multi-combobox.d.ts +0 -51
  197. package/dist/ui-multi-combobox.entry-MEX7MU7P.js +0 -196
@@ -1,33 +0,0 @@
1
- :host { display: block; min-inline-size: 0; color: var(--ui-text-primary); font: inherit; }
2
- ui-combobox::part(field) {
3
- flex-wrap: wrap;
4
- align-items: center;
5
- gap: var(--ui-space-1);
6
- min-block-size: var(--ui-multi-combobox-min-block-size, 2.5rem);
7
- padding: var(--ui-space-1);
8
- }
9
- ui-combobox::part(input) {
10
- flex: 1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);
11
- width: auto;
12
- min-block-size: 1.75rem;
13
- padding: var(--ui-space-0-5) var(--ui-space-1);
14
- }
15
- .items { display: contents; }
16
- .item {
17
- appearance: none;
18
- display: inline-flex;
19
- min-inline-size: 0;
20
- max-inline-size: min(100%, var(--ui-multi-combobox-item-max-inline-size, 12rem));
21
- overflow: hidden;
22
- padding: 0;
23
- border: 0;
24
- border-radius: var(--ui-radius-1);
25
- background: transparent;
26
- color: inherit;
27
- font: inherit;
28
- cursor: default;
29
- }
30
- .item > slot { display: block; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; }
31
- .item > slot::slotted(*) { min-inline-size: 0; max-inline-size: 100%; }
32
- .item:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 1px; }
33
- .item:disabled { opacity: .6; }
@@ -1,553 +0,0 @@
1
- import { Host, h } from "@stencil/core";
2
- /** A multi-value combobox with removable, customizable selected items. */
3
- export class UIMultiCombobox {
4
- host;
5
- label = '';
6
- placeholder = '';
7
- items = [];
8
- config = {};
9
- query;
10
- defaultQuery = '';
11
- /** Characters that commit the current query and leave the input ready for the next item. */
12
- tokenSeparators = [];
13
- disabled = false;
14
- readOnly = false;
15
- required = false;
16
- name = '';
17
- queryChange;
18
- addItem;
19
- removeItem;
20
- createItem;
21
- optionsChange;
22
- raw = '';
23
- rows = [];
24
- combobox;
25
- filteredConfig;
26
- filteredConfigSource;
27
- filteredSelection = '';
28
- componentWillLoad() { this.raw = this.query ?? this.defaultQuery; }
29
- syncQuery() {
30
- if (this.query !== undefined)
31
- this.raw = this.query;
32
- }
33
- get selectedValues() { return new Set(this.items.map(item => item.value)); }
34
- get comboboxConfig() {
35
- const selectionKey = this.items.map(item => item.value).join('\u0000');
36
- if (this.filteredConfig && this.filteredConfigSource === this.config && this.filteredSelection === selectionKey) {
37
- return this.filteredConfig;
38
- }
39
- const ownerFilter = this.config.filter;
40
- const selected = this.selectedValues;
41
- this.filteredConfigSource = this.config;
42
- this.filteredSelection = selectionKey;
43
- this.filteredConfig = {
44
- ...this.config,
45
- filter: (option, query, context) => !selected.has(option.value)
46
- && (ownerFilter ? ownerFilter(option, query, context) : option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase())),
47
- };
48
- return this.filteredConfig;
49
- }
50
- setQuery(query, trigger) {
51
- if (this.query === undefined)
52
- this.raw = query;
53
- this.queryChange.emit({ query, display: query, trigger });
54
- }
55
- clearCommittedQuery(input, trigger) {
56
- // Clear the native control before another key can arrive. Controlled adapters
57
- // still receive query-change, but do not need to round-trip before typing resumes.
58
- input.value = '';
59
- this.raw = '';
60
- this.setQuery('', trigger);
61
- }
62
- onQueryChange = (event) => {
63
- event.stopPropagation();
64
- this.setQuery(event.detail.query, event.detail.trigger);
65
- };
66
- onOptionsChange = (event) => {
67
- event.stopPropagation();
68
- this.rows = event.detail;
69
- this.optionsChange.emit(event.detail);
70
- };
71
- onValueChange = (event) => {
72
- event.stopPropagation();
73
- if (event.detail.kind !== 'selection' || !event.detail.option)
74
- return;
75
- const item = event.detail.option;
76
- this.addItem.emit({ item, index: this.items.length, trigger: event.detail.trigger });
77
- // ui-combobox emits its selection value before the matching label query.
78
- // Clear after both owner notifications so the stale label cannot win.
79
- queueMicrotask(() => this.setQuery('', event.detail.trigger));
80
- };
81
- onCreateEntry = (event) => {
82
- event.stopPropagation();
83
- const query = event.detail.query.trim();
84
- if (!query)
85
- return;
86
- this.setQuery('', event.detail.trigger);
87
- this.createItem.emit({ query, trigger: event.detail.trigger });
88
- };
89
- commitQuery(input, trigger) {
90
- const query = this.raw.trim();
91
- if (!query)
92
- return;
93
- const normalizedQuery = query.toLocaleLowerCase();
94
- const option = this.rows.find(row => row.label.trim().toLocaleLowerCase() === normalizedQuery);
95
- if (option) {
96
- this.clearCommittedQuery(input, trigger);
97
- this.addItem.emit({ item: option, index: this.items.length, trigger });
98
- }
99
- else if (this.config.allowCreate) {
100
- this.clearCommittedQuery(input, trigger);
101
- this.createItem.emit({ query, trigger });
102
- }
103
- }
104
- remove(index, trigger) {
105
- const item = this.items[index];
106
- if (!item || item.disabled || this.disabled || this.readOnly)
107
- return;
108
- this.removeItem.emit({ item, index, trigger });
109
- requestAnimationFrame(() => {
110
- const buttons = this.host.shadowRoot?.querySelectorAll('[part="item"]') ?? [];
111
- const next = buttons[Math.min(index, buttons.length - 1)] ?? buttons[index - 1];
112
- if (next && next.dataset.value !== item.value)
113
- next.focus();
114
- else
115
- void this.focusInput();
116
- });
117
- }
118
- focusItem(index) {
119
- this.host.shadowRoot?.querySelectorAll('[part="item"]')[index]?.focus();
120
- }
121
- onItemKeyDown = (event, index) => {
122
- if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
123
- return;
124
- if (event.key === 'ArrowLeft') {
125
- event.preventDefault();
126
- event.stopPropagation();
127
- this.focusItem(Math.max(0, index - 1));
128
- }
129
- else if (event.key === 'ArrowRight') {
130
- event.preventDefault();
131
- event.stopPropagation();
132
- if (index === this.items.length - 1)
133
- void this.focusInput();
134
- else
135
- this.focusItem(index + 1);
136
- }
137
- else if (event.key === 'Backspace' || event.key === 'Delete') {
138
- event.preventDefault();
139
- event.stopPropagation();
140
- this.remove(index, 'keyboard');
141
- }
142
- };
143
- onKeyDown = (event) => {
144
- if (event.defaultPrevented || event.isComposing || this.disabled || this.readOnly || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
145
- return;
146
- const input = event.composedPath().find(node => node instanceof HTMLInputElement);
147
- if (!input)
148
- return;
149
- if (this.tokenSeparators.includes(event.key)) {
150
- event.preventDefault();
151
- event.stopPropagation();
152
- this.commitQuery(input, 'keyboard');
153
- return;
154
- }
155
- if (this.raw || (input.selectionStart ?? 0) > 0)
156
- return;
157
- if (event.key === 'ArrowLeft' && this.items.length) {
158
- event.preventDefault();
159
- this.focusItem(this.items.length - 1);
160
- }
161
- else if (event.key === 'Backspace' && this.items.length) {
162
- event.preventDefault();
163
- this.remove(this.items.length - 1, 'keyboard');
164
- }
165
- };
166
- async focusInput() { await this.combobox?.focusInput(); }
167
- render() {
168
- return h(Host, { key: 'ba4db0fdca6cae344fe6b0bf06c933a9a90d2d3f', onKeyDown: this.onKeyDown }, h("ui-combobox", { key: 'f5901b0b078b479425114d998618828cc458e7dd', 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: '374c80862302d5c36f4849f42e5ed13222addd1c', 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: 'a23781c153e154cdff7066868c2da956e26b7d52', slot: "create" }, h("slot", { key: 'e3bde0d1e549e785fff877a1a7aac10df308f7a3', name: "create" }, "Create \u201C", this.raw, "\u201D")), h("span", { key: '5837c4cde35d5984aaf1d364f1b850b9d63ff8ca', slot: "loading" }, h("slot", { key: '1bdfa30849bea752bc5c93268b3427c964d1b5d3', name: "loading" }, "Loading suggestions\u2026")), h("span", { key: '519d7b1a7f28f9d19cd441598a690c8b4fdacf5b', slot: "empty" }, h("slot", { key: '3163150e0f1edebb50509a5dacd576e4568eaaae', name: "empty" }, "No suggestions.")), h("span", { key: '655e4f85d70eb97f0f0ecb2bac7b4228f5cf580f', slot: "error" }, h("slot", { key: 'a22667db30ee30003855ee69774eff3a4aab8566', name: "error" }, "Unable to load suggestions.")), h("div", { key: 'b01b74f3fc7136a3bf1875c81b9f3a662f3e993c', slot: "footer" }, h("slot", { key: '7565ee0798072eebc6d1c458f89ce6c7941577dd', name: "footer" }))));
169
- }
170
- static get is() { return "ui-multi-combobox"; }
171
- static get encapsulation() { return "shadow"; }
172
- static get originalStyleUrls() {
173
- return {
174
- "$": ["ui-multi-combobox.css"]
175
- };
176
- }
177
- static get styleUrls() {
178
- return {
179
- "$": ["ui-multi-combobox.css"]
180
- };
181
- }
182
- static get properties() {
183
- return {
184
- "label": {
185
- "type": "string",
186
- "mutable": false,
187
- "complexType": {
188
- "original": "string",
189
- "resolved": "string",
190
- "references": {}
191
- },
192
- "required": false,
193
- "optional": false,
194
- "docs": {
195
- "tags": [],
196
- "text": ""
197
- },
198
- "getter": false,
199
- "setter": false,
200
- "reflect": false,
201
- "attribute": "label",
202
- "defaultValue": "''"
203
- },
204
- "placeholder": {
205
- "type": "string",
206
- "mutable": false,
207
- "complexType": {
208
- "original": "string",
209
- "resolved": "string",
210
- "references": {}
211
- },
212
- "required": false,
213
- "optional": false,
214
- "docs": {
215
- "tags": [],
216
- "text": ""
217
- },
218
- "getter": false,
219
- "setter": false,
220
- "reflect": false,
221
- "attribute": "placeholder",
222
- "defaultValue": "''"
223
- },
224
- "items": {
225
- "type": "unknown",
226
- "mutable": false,
227
- "complexType": {
228
- "original": "readonly MultiComboboxItem[]",
229
- "resolved": "readonly MultiComboboxItem[]",
230
- "references": {
231
- "MultiComboboxItem": {
232
- "location": "import",
233
- "path": "../../field/multi-combobox",
234
- "id": "src/field/multi-combobox.ts::MultiComboboxItem",
235
- "referenceLocation": "MultiComboboxItem"
236
- }
237
- }
238
- },
239
- "required": false,
240
- "optional": false,
241
- "docs": {
242
- "tags": [],
243
- "text": ""
244
- },
245
- "getter": false,
246
- "setter": false,
247
- "defaultValue": "[]"
248
- },
249
- "config": {
250
- "type": "unknown",
251
- "mutable": false,
252
- "complexType": {
253
- "original": "ComboboxConfig",
254
- "resolved": "ComboboxConfig",
255
- "references": {
256
- "ComboboxConfig": {
257
- "location": "import",
258
- "path": "../../field/combobox",
259
- "id": "src/field/combobox.ts::ComboboxConfig",
260
- "referenceLocation": "ComboboxConfig"
261
- }
262
- }
263
- },
264
- "required": false,
265
- "optional": false,
266
- "docs": {
267
- "tags": [],
268
- "text": ""
269
- },
270
- "getter": false,
271
- "setter": false,
272
- "defaultValue": "{}"
273
- },
274
- "query": {
275
- "type": "string",
276
- "mutable": false,
277
- "complexType": {
278
- "original": "string",
279
- "resolved": "string",
280
- "references": {}
281
- },
282
- "required": false,
283
- "optional": true,
284
- "docs": {
285
- "tags": [],
286
- "text": ""
287
- },
288
- "getter": false,
289
- "setter": false,
290
- "reflect": false,
291
- "attribute": "query"
292
- },
293
- "defaultQuery": {
294
- "type": "string",
295
- "mutable": false,
296
- "complexType": {
297
- "original": "string",
298
- "resolved": "string",
299
- "references": {}
300
- },
301
- "required": false,
302
- "optional": false,
303
- "docs": {
304
- "tags": [],
305
- "text": ""
306
- },
307
- "getter": false,
308
- "setter": false,
309
- "reflect": false,
310
- "attribute": "default-query",
311
- "defaultValue": "''"
312
- },
313
- "tokenSeparators": {
314
- "type": "unknown",
315
- "mutable": false,
316
- "complexType": {
317
- "original": "readonly string[]",
318
- "resolved": "readonly string[]",
319
- "references": {}
320
- },
321
- "required": false,
322
- "optional": false,
323
- "docs": {
324
- "tags": [],
325
- "text": "Characters that commit the current query and leave the input ready for the next item."
326
- },
327
- "getter": false,
328
- "setter": false,
329
- "defaultValue": "[]"
330
- },
331
- "disabled": {
332
- "type": "boolean",
333
- "mutable": false,
334
- "complexType": {
335
- "original": "boolean",
336
- "resolved": "boolean",
337
- "references": {}
338
- },
339
- "required": false,
340
- "optional": false,
341
- "docs": {
342
- "tags": [],
343
- "text": ""
344
- },
345
- "getter": false,
346
- "setter": false,
347
- "reflect": false,
348
- "attribute": "disabled",
349
- "defaultValue": "false"
350
- },
351
- "readOnly": {
352
- "type": "boolean",
353
- "mutable": false,
354
- "complexType": {
355
- "original": "boolean",
356
- "resolved": "boolean",
357
- "references": {}
358
- },
359
- "required": false,
360
- "optional": false,
361
- "docs": {
362
- "tags": [],
363
- "text": ""
364
- },
365
- "getter": false,
366
- "setter": false,
367
- "reflect": false,
368
- "attribute": "readonly",
369
- "defaultValue": "false"
370
- },
371
- "required": {
372
- "type": "boolean",
373
- "mutable": false,
374
- "complexType": {
375
- "original": "boolean",
376
- "resolved": "boolean",
377
- "references": {}
378
- },
379
- "required": false,
380
- "optional": false,
381
- "docs": {
382
- "tags": [],
383
- "text": ""
384
- },
385
- "getter": false,
386
- "setter": false,
387
- "reflect": false,
388
- "attribute": "required",
389
- "defaultValue": "false"
390
- },
391
- "name": {
392
- "type": "string",
393
- "mutable": false,
394
- "complexType": {
395
- "original": "string",
396
- "resolved": "string",
397
- "references": {}
398
- },
399
- "required": false,
400
- "optional": false,
401
- "docs": {
402
- "tags": [],
403
- "text": ""
404
- },
405
- "getter": false,
406
- "setter": false,
407
- "reflect": false,
408
- "attribute": "name",
409
- "defaultValue": "''"
410
- }
411
- };
412
- }
413
- static get states() {
414
- return {
415
- "raw": {},
416
- "rows": {}
417
- };
418
- }
419
- static get events() {
420
- return [{
421
- "method": "queryChange",
422
- "name": "query-change",
423
- "bubbles": true,
424
- "cancelable": true,
425
- "composed": true,
426
- "docs": {
427
- "tags": [],
428
- "text": ""
429
- },
430
- "complexType": {
431
- "original": "{ query: string; display: string; trigger: 'keyboard' | 'pointer' | 'programmatic' }",
432
- "resolved": "{ query: string; display: string; trigger: \"keyboard\" | \"pointer\" | \"programmatic\"; }",
433
- "references": {}
434
- }
435
- }, {
436
- "method": "addItem",
437
- "name": "add-item",
438
- "bubbles": true,
439
- "cancelable": true,
440
- "composed": true,
441
- "docs": {
442
- "tags": [],
443
- "text": ""
444
- },
445
- "complexType": {
446
- "original": "MultiComboboxItemChange",
447
- "resolved": "MultiComboboxItemChange",
448
- "references": {
449
- "MultiComboboxItemChange": {
450
- "location": "import",
451
- "path": "../../field/multi-combobox",
452
- "id": "src/field/multi-combobox.ts::MultiComboboxItemChange",
453
- "referenceLocation": "MultiComboboxItemChange"
454
- }
455
- }
456
- }
457
- }, {
458
- "method": "removeItem",
459
- "name": "remove-item",
460
- "bubbles": true,
461
- "cancelable": true,
462
- "composed": true,
463
- "docs": {
464
- "tags": [],
465
- "text": ""
466
- },
467
- "complexType": {
468
- "original": "MultiComboboxItemChange",
469
- "resolved": "MultiComboboxItemChange",
470
- "references": {
471
- "MultiComboboxItemChange": {
472
- "location": "import",
473
- "path": "../../field/multi-combobox",
474
- "id": "src/field/multi-combobox.ts::MultiComboboxItemChange",
475
- "referenceLocation": "MultiComboboxItemChange"
476
- }
477
- }
478
- }
479
- }, {
480
- "method": "createItem",
481
- "name": "create-item",
482
- "bubbles": true,
483
- "cancelable": true,
484
- "composed": true,
485
- "docs": {
486
- "tags": [],
487
- "text": ""
488
- },
489
- "complexType": {
490
- "original": "MultiComboboxCreate",
491
- "resolved": "MultiComboboxCreate",
492
- "references": {
493
- "MultiComboboxCreate": {
494
- "location": "import",
495
- "path": "../../field/multi-combobox",
496
- "id": "src/field/multi-combobox.ts::MultiComboboxCreate",
497
- "referenceLocation": "MultiComboboxCreate"
498
- }
499
- }
500
- }
501
- }, {
502
- "method": "optionsChange",
503
- "name": "options-change",
504
- "bubbles": true,
505
- "cancelable": true,
506
- "composed": true,
507
- "docs": {
508
- "tags": [],
509
- "text": ""
510
- },
511
- "complexType": {
512
- "original": "readonly ComboboxOption[]",
513
- "resolved": "readonly ComboboxOption<unknown>[]",
514
- "references": {
515
- "ComboboxOption": {
516
- "location": "import",
517
- "path": "../../field/combobox",
518
- "id": "src/field/combobox.ts::ComboboxOption",
519
- "referenceLocation": "ComboboxOption"
520
- }
521
- }
522
- }
523
- }];
524
- }
525
- static get methods() {
526
- return {
527
- "focusInput": {
528
- "complexType": {
529
- "signature": "() => Promise<void>",
530
- "parameters": [],
531
- "references": {
532
- "Promise": {
533
- "location": "global",
534
- "id": "global::Promise"
535
- }
536
- },
537
- "return": "Promise<void>"
538
- },
539
- "docs": {
540
- "text": "",
541
- "tags": []
542
- }
543
- }
544
- };
545
- }
546
- static get elementRef() { return "host"; }
547
- static get watchers() {
548
- return [{
549
- "propName": "query",
550
- "methodName": "syncQuery"
551
- }];
552
- }
553
- }
@@ -1 +0,0 @@
1
- import{p as i,H as t,d as s,h as e,c as a,t as o}from"./p-Bh_1GxOD.js";import{c as r}from"./p-Drw41pSY.js";import{c as n,o as h}from"./p-C-0syqXZ.js";import{d as l}from"./p-B1macZOS.js";const d=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.queryChange=s(this,"query-change"),this.valueChange=s(this,"value-change"),this.freeEntry=s(this,"free-entry"),this.createEntry=s(this,"create-entry"),this.dependencyInvalidate=s(this,"dependency-invalidate"),this.validationChange=s(this,"validation-change"),this.optionsChange=s(this,"options-change")}get host(){return this}label="";placeholder="";name="";value;defaultValue;query;defaultQuery="";config={};disabled=!1;readOnly=!1;required=!1;size="md";labelVisibility="visible";disclosure=!1;clearable=!1;help="";queryChange;valueChange;freeEntry;createEntry;dependencyInvalidate;validationChange;optionsChange;raw="";display="";selected=null;expanded=!1;rows=[];active=-1;loading=!1;helpOpen=!1;lookupError="";validation={status:"pristine",touched:!1,dirty:!1,issues:[]};input;popup;field;surface;lookup;validationRun;lookupTimer;composing=!1;initialRaw="";overlayId=`ui-combobox-${Math.random().toString(36).slice(2)}`;alive=!1;fullSet=!1;knownOptions=new Map;awaitingLabel=null;proposedChange;formattedRaw;formattedWith;componentWillLoad(){this.selected=void 0!==this.value?this.value:this.defaultValue??null,this.raw=this.query??this.defaultQuery,void 0!==this.query||this.raw||null===this.selected||(this.raw=this.config.options?.find((i=>i.value===this.selected))?.label??this.selected),void 0===this.query&&null!==this.selected&&this.raw===this.selected&&(this.awaitingLabel=this.selected),this.display=this.raw,this.initialRaw=this.raw,this.applyServerIssues()}connectedCallback(){this.alive=!0,this.setupSurface()}componentDidLoad(){this.setupSurface()}componentDidUpdate(){this.input&&!this.composing&&this.input.value!==this.display&&(this.input.value=this.display),this.expanded&&this.surface?.refresh()}disconnectedCallback(){this.alive=!1,this.close(),this.validationRun?.abort(),this.surface?.destroy(),this.surface=void 0}setupSurface(){!this.surface&&this.popup&&this.field&&(this.surface=r(this.popup,{anchor:this.field,placement:"bottom-start"}))}syncValue(){if(void 0!==this.value){if(this.selected=this.value,void 0===this.query){const i=this.proposedChange,t=this.config.options?.find((i=>i.value===this.selected))??(null===this.selected?void 0:this.knownOptions.get(this.selected)),s=i?.value===this.selected?i.query:t?.label??this.selected??"";i?.value===this.selected&&s===this.raw||(this.raw=s,this.display=this.raw,this.formattedRaw=void 0),this.awaitingLabel=t||null===this.selected?null:this.selected}this.resetValidation()}}syncQuery(){void 0!==this.query&&this.query!==this.raw&&(void 0===this.value&&this.proposedChange?.query!==this.query&&(this.selected=null),this.awaitingLabel=null,this.formattedRaw=void 0,this.raw=this.query,this.display=this.raw,this.resetValidation(),this.expanded&&this.search("input"))}syncDisabled(){(this.disabled||this.readOnly)&&(this.close(),this.resetValidation())}syncConfig(i,t){if(this.validationRun?.abort(),i.provider===t?.provider&&i.context===t?.context||this.knownOptions.clear(),i.context!==t?.context){this.close();const t=i.invalidation??"retain-query";this.commit("retain"===t?this.selected:null,"clear"===t?"":this.raw,null,"invalidation","programmatic"),this.validation={status:"pristine",touched:!1,dirty:this.raw!==this.initialRaw,issues:[]}}this.applyServerIssues(),this.expanded&&this.search("context")}applyServerIssues(){const i=this.config.issues??[];i.length?this.setValidation({issues:i},this.validation.touched):this.resetValidation()}resetValidation(){this.validationRun?.abort(),this.validation={status:"pristine",touched:this.validation.touched,dirty:this.raw!==this.initialRaw,issues:[]},this.validationChange?.emit(this.validation)}cancelLookup(){clearTimeout(this.lookupTimer),this.lookup?.abort(),this.lookup=void 0,this.loading=!1}close(){this.expanded=!1,this.active=-1,this.cancelLookup(),this.surface?.hide(),n(this.overlayId)}open(i="input"){this.disabled||this.readOnly||(this.expanded=!0,this.popup&&this.field&&(this.popup.style.minWidth=`${this.field.getBoundingClientRect().width}px`),this.surface?.show(),h({id:this.overlayId,element:this.popup,relatedElements:[this.host],modal:!1,requestClose:()=>this.close()}),this.search(i))}search(i){this.cancelLookup(),this.fullSet="disclosure"===i,this.active=-1,this.lookupError="";const t=this.config,s=this.fullSet?"":this.raw,e=new AbortController;this.lookup=e;const a=i=>{if(e.signal.aborted||!this.alive)return;for(const t of i)this.knownOptions.set(t.value,t);const a=null===this.selected?void 0:this.knownOptions.get(this.selected);void 0===this.query&&this.awaitingLabel===this.selected&&a&&(this.raw=a.label,this.display=this.raw,this.awaitingLabel=null,this.formattedRaw=void 0,this.resetValidation());const o=new Set;this.rows=i.filter((i=>!o.has(i.id)&&(o.add(i.id),this.fullSet||(t.filter?t.filter(i,s,t.context):!!t.provider||i.label.toLocaleLowerCase().includes(s.toLocaleLowerCase())))));const r=new Map;for(const i of this.rows){const t=i.group??"";r.has(t)||r.set(t,[]),r.get(t).push(i)}this.rows=[...r.values()].flat(),this.loading=!1,this.optionsChange.emit(this.rows)};t.provider?(this.rows=[],this.loading=!0,this.lookupTimer=setTimeout((async()=>{try{a(await t.provider({query:s,context:t.context,signal:e.signal,reason:i}))}catch(i){if(e.signal.aborted||!this.alive)return;this.loading=!1,this.lookupError=i instanceof Error?i.message:"Unable to load suggestions."}}),"disclosure"===i?0:Math.max(0,t.debounce??200))):a(t.options??[])}get canCreate(){const i=this.config.options?[...this.config.options,...this.rows]:this.rows;return Boolean(this.config.allowCreate&&this.raw.trim()&&!this.loading&&!this.lookupError&&!i.some((i=>i.label.toLocaleLowerCase()===this.raw.toLocaleLowerCase())))}format(i){if((this.config.formatOn??"blur")!==i||!this.input)return;if(this.formattedRaw===this.raw&&this.formattedWith===this.config.format)return;const t=function(i,t,s){const e={display:i,selection:t};if(!s)return e;let a;try{a=s(i,t)}catch{return e}if(!a)return e;const o=Array.from(i);let r=0;for(const i of a.display)i===o[r]&&(r+=1);return!Number.isInteger(a.selection.start)||!Number.isInteger(a.selection.end)||r!==o.length||a.selection.start<0||a.selection.end<a.selection.start||a.selection.end>a.display.length?e:a}(this.raw,{start:this.input.selectionStart??this.raw.length,end:this.input.selectionEnd??this.raw.length,direction:this.input.selectionDirection??"none"},this.config.format);this.formattedRaw=this.raw,this.formattedWith=this.config.format,this.display=t.display,this.input.value!==t.display&&(this.input.value=t.display,this.input.setSelectionRange(t.selection.start,t.selection.end,t.selection.direction))}onInput=i=>{this.composing||i.isComposing||(this.awaitingLabel=null,this.formattedRaw=void 0,this.raw=this.input.value,this.display=this.raw,this.resetValidation(),this.format("input"),this.queryChange.emit({query:this.raw,display:this.display,trigger:"keyboard"}),null!==this.selected&&this.commit(null,this.raw,null,"clear","keyboard"),this.open(),"input"===this.config.validateOn&&this.validate(),queueMicrotask((()=>{void 0!==this.query&&this.query!==this.raw&&this.syncQuery()})))};commit(i,t,s,e,a){this.awaitingLabel=null;const o=t!==this.raw;void 0===this.value&&(this.selected=i),void 0===this.query&&o&&(this.raw=t,this.display=t,this.formattedRaw=void 0),this.resetValidation();const r={value:i,query:t,option:s,kind:e,trigger:a},n={value:i,query:t};this.proposedChange=n,this.valueChange.emit(r),o&&this.queryChange.emit({query:t,display:t,trigger:a}),"create"===e&&this.createEntry.emit(r),"free-entry"===e&&this.freeEntry.emit(r),"invalidation"===e&&this.dependencyInvalidate.emit(r),queueMicrotask((()=>{this.proposedChange===n&&(void 0!==this.value&&this.value!==n.value&&this.syncValue(),void 0!==this.query&&this.query!==n.query&&(void 0===this.value&&(this.selected=null,this.resetValidation()),this.syncQuery()),this.proposedChange=void 0)}))}choose(i,t){const s=this.rows[i];if(!s?.disabled){if(s)this.commit(s.value,s.label,s,"selection",t);else{if(!this.canCreate||i!==this.rows.length)return;this.commit(null,this.raw,null,"create",t)}this.close(),this.input?.focus(),"submit"!==this.config.validateOn&&queueMicrotask((()=>{this.validate()}))}}move(i){const t=this.rows.flatMap(((i,t)=>i.disabled?[]:[t]));if(this.canCreate&&t.push(this.rows.length),!t.length)return;const s=t.indexOf(this.active),e="Home"===i?0:"End"===i?t.length-1:"ArrowDown"===i?Math.min(s+1,t.length-1):s<0?t.length-1:Math.max(0,s-1);this.active=t[e],requestAnimationFrame((()=>this.host.shadowRoot?.getElementById(`option-${this.active}`)?.scrollIntoView({block:"nearest"})))}onKeydown=i=>{if(!(this.composing||i.isComposing||this.disabled||this.readOnly))return"Escape"===i.key&&this.expanded?(i.preventDefault(),i.stopPropagation(),void this.close()):void("Tab"!==i.key?i.altKey||i.ctrlKey||i.metaKey||i.shiftKey||("ArrowDown"===i.key||"ArrowUp"===i.key?(i.preventDefault(),this.expanded||this.open("disclosure"),this.move(i.key)):("Home"===i.key||"End"===i.key)&&this.expanded&&this.active>=0?(i.preventDefault(),this.move(i.key)):"Enter"===i.key&&this.expanded&&(this.active>=0?(i.preventDefault(),this.choose(this.active,"keyboard")):this.config.allowFreeText&&(i.preventDefault(),this.commit(null,this.raw,null,"free-entry","keyboard"),this.close()))):this.close())};onFocusOut=i=>{i.relatedTarget instanceof Node&&this.host.shadowRoot?.contains(i.relatedTarget)||(this.close(),this.format("blur"),this.validation={...this.validation,touched:!0},this.config.allowFreeText&&null===this.selected&&this.commit(null,this.raw,null,"free-entry","keyboard"),"blur"===(this.config.validateOn??"blur")&&this.validate())};setValidation(i,t=this.validation.touched){const s=i.issues.some((i=>"warning"!==i.severity));this.validation={status:s?"error":i.issues.length?"warning":"valid",touched:t,dirty:this.raw!==this.initialRaw,...i},this.validationChange?.emit(this.validation)}async validate(){this.validationRun?.abort();const i=new AbortController;this.validationRun=i,this.validation={...this.validation,status:"pending",output:void 0},this.validationChange.emit(this.validation);try{const t=await async function(i,t){let s=i.raw,e=[];const a=()=>i.signal.throwIfAborted();try{if(a(),t.parse&&(s=await t.parse(i.raw,i)),a(),t.schema){const i=await t.schema["~standard"].validate(s);a(),i.issues?e=i.issues:"value"in i&&(s=i.value)}if(!e.some((i=>"warning"!==i.severity))&&(t.normalize&&(s=await t.normalize(s,i)),a(),t.validator)){const o=await t.validator(s,i);a(),e=[...e,...o.issues??[]],"output"in o&&(s=o.output)}}catch(i){a(),e=[{message:i instanceof Error?i.message:"Unable to validate this value."}]}return e=[...e,...t.issues??[]],{output:e.some((i=>"warning"!==i.severity))?void 0:s,issues:e}}({raw:this.raw,value:this.selected,context:this.config.context,signal:i.signal},this.config);this.required&&!this.raw.trim()?t.issues=[...t.issues,{message:"A value is required."}]:!this.raw||null!==this.selected||this.config.allowFreeText||this.config.allowCreate||(t.issues=[...t.issues,{message:"Choose a suggestion."}]),t.issues.some((i=>"warning"!==i.severity))&&(t.output=void 0),!i.signal.aborted&&this.alive&&this.setValidation(t)}catch{}return this.validation}async focusInput(){this.input?.focus()}render(){const i=[this.helpOpen?"help-text":"",this.validation.issues.length?"validation":""].filter(Boolean).join(" ")||void 0,t=this.loading?"Loading suggestions…":this.lookupError||(this.expanded?`${this.rows.length} suggestions available.`:""),s=[...new Set(this.rows.map((i=>i.group??"")))];return e(a,{key:"1f00d9a83729d9c2147ced7e5006b928d1b5e51d","data-size":this.size,"data-validation":this.validation.status,onFocusout:this.onFocusOut},e("label",{key:"10353b147cc68ef1d67be0988849af1527fcf9ba",htmlFor:"input",part:"label",class:"sr-only"===this.labelVisibility?"sr-only":void 0},this.label,this.required?" *":""),e("div",{key:"74bb53137d9343add37c22f3ac503eccf41807a9",class:"field",part:"field",ref:i=>this.field=i,onClick:i=>{i.composedPath().some((i=>i instanceof HTMLButtonElement))||this.input?.focus()}},e("slot",{key:"24c26916365013faa4a78bd4fe0d01f6c129c703",name:"start"}),e("input",{key:"835d19e66ec4a24c1a83f43bbc256fa2a9e3332f",id:"input",ref:i=>this.input=i,role:"combobox","aria-autocomplete":"list","aria-expanded":String(this.expanded),"aria-controls":"listbox","aria-activedescendant":this.expanded&&this.active>=0?`option-${this.active}`:void 0,"aria-describedby":i,"aria-invalid":String("error"===this.validation.status),"aria-busy":String("pending"===this.validation.status),value:this.display,placeholder:this.placeholder,name:this.name||void 0,disabled:this.disabled,readOnly:this.readOnly,required:this.required,autoComplete:"off",part:"input",onInput:this.onInput,onKeyDown:this.onKeydown,onCompositionstart:()=>this.composing=!0,onCompositionend:()=>{this.composing=!1,this.onInput(new InputEvent("input"))}}),this.clearable&&e("button",{key:"326c1e24d3c417c3a72acd8234a53937b388ba79",type:"button",part:"affordance","aria-label":`Clear ${this.label}`,disabled:this.disabled||this.readOnly,onClick:()=>{this.commit(null,"",null,"clear","pointer"),this.close(),this.input?.focus()}},"×"),this.help&&e("button",{key:"6aeb62dc2935eb95670caa1d2028c0931dc362b2",id:"help",type:"button",part:"affordance","aria-label":`Help for ${this.label}`,disabled:this.disabled},e("span",{key:"9317be0fbb0c1bbb91061be69f38037a97a4c36b","aria-hidden":"true"},"?")),this.disclosure&&e("button",{key:"1cd2a0ea92df1144ff2297fcf64df7b3d0f4713a",type:"button",part:"affordance","aria-label":`Suggestions for ${this.label}`,"aria-controls":"listbox","aria-expanded":String(this.expanded),disabled:this.disabled||this.readOnly,onClick:()=>{this.expanded?this.close():this.open("disclosure"),this.input?.focus()}},e("span",{key:"0188b2d0e8cc7b7ff4d1a2175a0ff0b47d9c7d98","aria-hidden":"true"},"⌄"))),this.help&&e("ui-tooltip",{key:"e09fd35274c3e1fa6e408850d72f7a07c2bb4baf",id:"help-text",for:"help",toggleOnClick:!0,onOpen:()=>this.helpOpen=!0,onClose:()=>this.helpOpen=!1},this.help),e("div",{key:"ddf83a5944dd03fc7eb580b81fcf291e06c03601",class:"popup",part:"popup",hidden:!this.expanded,ref:i=>this.popup=i},e("div",{key:"1d73de1dabb6eaa95af12f2af88dac74e3f163ea",id:"listbox",role:"listbox","aria-label":`${this.label} suggestions`,"aria-busy":String(this.loading)},s.map((i=>e("div",{role:i?"group":"presentation","aria-label":i||void 0},i&&e("div",{class:"group",part:"group"},i),this.rows.map(((t,s)=>(t.group??"")!==i?null:e("div",{id:`option-${s}`,role:"option","aria-selected":String(this.selected===t.value),"aria-disabled":String(Boolean(t.disabled)),"data-active":this.active===s?"":void 0,part:"option",class:"option",onPointerDown:i=>i.preventDefault(),onClick:()=>this.choose(s,"pointer")},e("slot",{name:`option-${t.id}`},e("span",{class:"primary",part:"option-primary"},t.label),t.description&&e("span",{class:"secondary",part:"option-secondary"},t.description)))))))),this.canCreate&&e("div",{key:"a0aaafa2f4ff79efa954ed780f3a7bd81d4b2ecd",id:`option-${this.rows.length}`,role:"option","aria-selected":"false",class:"option",part:"option","data-active":this.active===this.rows.length?"":void 0,onPointerDown:i=>i.preventDefault(),onClick:()=>this.choose(this.rows.length,"pointer")},e("slot",{key:"53a6706fc2c26097948b08cf0a7ee6040e37fe57",name:"create"},"Create “",this.raw,"”"))),this.loading?e("div",{class:"message"},e("slot",{name:"loading"},"Loading suggestions…")):this.lookupError?e("div",{class:"message"},e("slot",{name:"error"},this.lookupError)):this.rows.length||this.canCreate?null:e("div",{class:"message"},e("slot",{name:"empty"},"No suggestions.")),e("slot",{key:"7997a0233a3c1a560b820c846645405ec4ceec1d",name:"footer"})),e("div",{key:"9143eb79141f5f3660a63f7a2471d1eecd8e9332",id:"validation",class:"message",part:"validation",hidden:!this.validation.issues.length},this.validation.issues.map((i=>e("div",null,i.message)))),e("div",{key:"21f310613b058f528f8c4df329864fd8a2a94b55",class:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true"},t," ","pending"===this.validation.status?"Checking value…":this.validation.issues.map((i=>i.message)).join(" ")))}static get watchers(){return{value:[{syncValue:0}],query:[{syncQuery:0}],disabled:[{syncDisabled:0}],readOnly:[{syncDisabled:0}],config:[{syncConfig:0}]}}static get style(){return":host{display:grid;gap:var(--ui-space-1);min-inline-size:0;color:var(--ui-text-primary);font:inherit}label{color:var(--ui-field-label-color, var(--ui-text-primary));font-size:var(--ui-field-label-size, 0.875rem);font-weight:var(--ui-field-label-weight, 500)}.field{display:flex;min-inline-size:0;border:1px solid var(--ui-control-border, var(--ui-border-default));border-radius:var(--ui-radius-2);background:var(--ui-control-surface, var(--ui-surface-default))}.field:focus-within{border-color:var(--ui-control-focus, var(--ui-focus-ring));outline:2px solid var(--ui-control-focus, var(--ui-focus-ring));outline-offset:1px}input{appearance:none;width:100%;min-inline-size:0;min-block-size:var(--ui-control-min-block-size, 2.75rem);box-sizing:border-box;border:0;border-radius:inherit;background:transparent;color:inherit;font:inherit;line-height:var(--ui-line-height-md);padding:var(--ui-space-2) var(--ui-space-3);margin:0;outline:none}:host([data-size='sm']) input{min-block-size:var(--ui-field-compact-size, 2rem);padding:var(--ui-space-1) var(--ui-space-2)}button{appearance:none;border:0;border-radius:var(--ui-radius-2);background:transparent;color:var(--ui-field-affordance-color, var(--ui-text-secondary));font:inherit;font-weight:var(--ui-field-affordance-weight, 400);min-inline-size:2rem;padding:var(--ui-space-1);cursor:pointer}button:hover:enabled{background:var(--ui-surface-muted);color:var(--ui-text-primary)}button:focus-visible{outline:2px solid var(--ui-focus-ring);outline-offset:-3px}input:disabled,button:disabled{color:var(--ui-text-muted);cursor:not-allowed}.field:has(input:disabled){background:var(--ui-control-surface-disabled, var(--ui-surface-muted))}:host([data-validation='error']) .field{border-color:var(--ui-danger-solid, var(--ui-accent-active))}.popup{box-sizing:border-box;min-inline-size:12rem;max-inline-size:calc(100vw - 1rem);max-block-size:var(--ui-combobox-max-block-size, 18rem);overflow:auto;margin:0;padding:var(--ui-space-1);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);box-shadow:var(--ui-shadow-md)}[hidden]{display:none !important}.option{padding:var(--ui-space-2) var(--ui-space-3);border-radius:var(--ui-radius-1);cursor:pointer;overflow-wrap:anywhere}.option:hover,.option[data-active]{background:var(--ui-surface-muted);outline:1px solid var(--ui-focus-ring);outline-offset:-1px}.option[aria-disabled='true']{color:var(--ui-text-muted);cursor:not-allowed}.primary{display:block;color:var(--ui-option-primary-color, var(--ui-text-primary));font-weight:var(--ui-option-primary-weight, 500)}.secondary{display:block;color:var(--ui-option-secondary-color, var(--ui-text-secondary));font-weight:var(--ui-option-secondary-weight, 400);font-size:var(--ui-font-size-sm)}.message,.group{color:var(--ui-field-message-color, var(--ui-text-secondary));font-weight:var(--ui-field-message-weight, 400);font-size:var(--ui-font-size-sm);line-height:var(--ui-line-height-md);overflow-wrap:anywhere}.group,.popup .message{padding:var(--ui-space-2) var(--ui-space-3)}.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media (pointer: coarse){button{min-inline-size:2.75rem;min-block-size:2.75rem}}@media (forced-colors: active){.field,.popup{border-color:CanvasText}.option[data-active]{outline-color:Highlight}}"}},[769,"ui-combobox",{label:[1],placeholder:[1],name:[1],value:[1],defaultValue:[1,"default-value"],query:[1],defaultQuery:[1,"default-query"],config:[16],disabled:[4],readOnly:[4,"readonly"],required:[4],size:[1],labelVisibility:[1,"label-visibility"],disclosure:[4],clearable:[4],help:[1],raw:[32],display:[32],selected:[32],expanded:[32],rows:[32],active:[32],loading:[32],helpOpen:[32],lookupError:[32],validation:[32],validate:[64],focusInput:[64]},void 0,{value:[{syncValue:0}],query:[{syncQuery:0}],disabled:[{syncDisabled:0}],readOnly:[{syncDisabled:0}],config:[{syncConfig:0}]}]);function u(){"undefined"!=typeof customElements&&["ui-combobox","ui-tooltip"].forEach((i=>{switch(i){case"ui-combobox":customElements.get(o(i))||customElements.define(o(i),d);break;case"ui-tooltip":customElements.get(o(i))||l()}}))}export{d as U,u as d}
@@ -1 +0,0 @@
1
- import{p as e,H as t,h as i,c as s,t as r}from"./p-Bh_1GxOD.js";import{d as a,e as o}from"./p-JwSoedEO.js";import{o as n,c as l,r as c}from"./p-C-0syqXZ.js";import{i as u,c as h}from"./p-BnGhGgTH.js";import{c as p}from"./p-Drw41pSY.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}get host(){return this}open;defaultOpen=!1;for;placement="bottom-start";internalOpen=!1;overlayId=`ui-menu-${Math.random().toString(36).slice(2,11)}`;anchor=null;surface=null;syncFromProp(){u(this.open)&&(this.internalOpen=this.open)}resetSurface(){this.setupSurface(),this.syncSurface()}syncSurface(){this.syncAnchorState(),this.surface&&(this.internalOpen?(this.surface.show(),n({id:this.overlayId,modal:!1,element:this.host,relatedElements:this.anchor?[this.anchor]:void 0,dismissible:!0,requestClose:(e,t)=>this.closeMenu(e,t)})):(this.surface.hide(),l(this.overlayId)))}componentDidLoad(){this.internalOpen=h(this.open,this.defaultOpen),this.host.addEventListener("click",this.onItemClick),this.host.addEventListener("keydown",this.onKeydown),this.setupSurface(),this.syncSurface()}disconnectedCallback(){this.host.removeEventListener("click",this.onItemClick),this.host.removeEventListener("keydown",this.onKeydown),this.surface?.destroy(),this.surface=null,l(this.overlayId)}setupSurface(){this.surface?.destroy(),this.surface=null,this.anchor=this.for?this.host.ownerDocument.getElementById(this.for):null,this.anchor&&(this.surface=p(this.host,{anchor:this.anchor,placement:this.placement}))}syncAnchorState(){this.anchor&&(this.anchor.setAttribute("aria-haspopup","menu"),this.anchor.setAttribute("aria-expanded",this.internalOpen?"true":"false"))}closeMenu(e,t){this.internalOpen&&(u(this.open)||(this.internalOpen=!1),a(this.host,"close",{open:!1,reason:e,trigger:t}),"escape"===e&&this.anchor?.focus())}getItems(){return Array.from(this.host.querySelectorAll("ui-menu-item"))}isItemDisabled(e){return"true"===e.getAttribute("aria-disabled")||e.hasAttribute("disabled")||"true"===e.getAttribute("disabled")||!0===e.disabled}onItemClick=e=>{const t=e.target.closest?.("ui-menu-item");if(!t||t.getRootNode()!==this.host.getRootNode())return;if(this.isItemDisabled(t))return;const i=t.getAttribute("value")??t.getAttribute("data-value")??"";a(this.host,"select",{value:i,trigger:o(e)}),a(this.host,"close",{open:!1,reason:"action",trigger:o(e)}),u(this.open)||(this.internalOpen=!1)};onKeydown=e=>{if("Escape"===e.key)return e.preventDefault(),void c("escape","keyboard");const i=this.getItems().filter((e=>!this.isItemDisabled(e)));if(0===i.length)return;const s=e.target.closest?.("ui-menu-item"),r=s&&s instanceof t?i.indexOf(s):-1;if("Enter"!==e.key&&" "!==e.key)"ArrowDown"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),i["ArrowDown"===e.key?r<0?0:Math.min(r+1,i.length-1):r<=0?i.length-1:r-1].focus());else if(e.preventDefault(),s&&r>=0){const e=s.getAttribute("value")??s.getAttribute("data-value")??"";a(this.host,"select",{value:e,trigger:"keyboard"}),a(this.host,"close",{open:!1,reason:"action",trigger:"keyboard"}),u(this.open)||(this.internalOpen=!1)}};render(){return i(s,{key:"22689ca1b0514bb27a76bfb9a702c0d4ce49d136",role:"menu","aria-orientation":"vertical","data-open":this.internalOpen?"":void 0},i("div",{key:"cff891a33348f077631f1b92f1167285aafd25f1",class:"menu__surface"},i("slot",{key:"3a0e9ff4f36b1afbe5f879e0e51ff4943279b5b5"})))}static get watchers(){return{open:[{syncFromProp:0}],for:[{resetSurface:0}],placement:[{resetSurface:0}],internalOpen:[{syncSurface:0}]}}static get style(){return":host{--ui-menu-viewport-gap:var(--ui-space-2, 0.5rem);display:flex;flex-direction:column;box-sizing:border-box;inline-size:max-content;min-inline-size:min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));max-inline-size:calc(100vw - (var(--ui-menu-viewport-gap) * 2));padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}.menu__surface{display:flex;flex-direction:column;box-sizing:border-box;max-inline-size:inherit;padding:var(--ui-space-1);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg);max-block-size:inherit;overflow:auto}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;overflow:visible;max-block-size:calc(100dvh - (var(--ui-menu-viewport-gap) * 2));opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease), transform var(--ui-motion-fast) var(--ui-motion-ease), display var(--ui-motion-fast) allow-discrete, overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}::slotted(ui-menu-item){display:block;width:100%}"}},[769,"ui-menu",{open:[4],defaultOpen:[4,"default-open"],for:[1],placement:[1],internalOpen:[32]},void 0,{open:[{syncFromProp:0}],for:[{resetSurface:0}],placement:[{resetSurface:0}],internalOpen:[{syncSurface:0}]}]);function m(){"undefined"!=typeof customElements&&["ui-menu"].forEach((e=>{"ui-menu"===e&&(customElements.get(r(e))||customElements.define(r(e),d))}))}export{d as U,m as d}
@@ -1,11 +0,0 @@
1
- import type { Components, JSX } from "../types/components";
2
-
3
- interface UiMultiCombobox extends Components.UiMultiCombobox, HTMLElement {}
4
- export const UiMultiCombobox: {
5
- prototype: UiMultiCombobox;
6
- new (): UiMultiCombobox;
7
- };
8
- /**
9
- * Used to define this component and all nested components recursively.
10
- */
11
- export const defineCustomElement: () => void;