@universal-material/web 3.0.68 → 3.0.70

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 (202) hide show
  1. package/app-bar/top-app-bar.js +3 -2
  2. package/app-bar/top-app-bar.js.map +1 -1
  3. package/button/button-base.d.ts +1 -0
  4. package/button/button-base.d.ts.map +1 -1
  5. package/button/button-base.js +7 -18
  6. package/button/button-base.js.map +1 -1
  7. package/button/button-base.styles.d.ts +2 -0
  8. package/button/button-base.styles.d.ts.map +1 -0
  9. package/button/button-base.styles.js +16 -0
  10. package/button/button-base.styles.js.map +1 -0
  11. package/button/button-set.d.ts +1 -1
  12. package/button/button-set.d.ts.map +1 -1
  13. package/button/button-set.js +1 -1
  14. package/button/button-set.js.map +1 -1
  15. package/button/button-set.styles.d.ts.map +1 -1
  16. package/button/button-set.styles.js +0 -19
  17. package/button/button-set.styles.js.map +1 -1
  18. package/button/button.d.ts +2 -2
  19. package/button/button.d.ts.map +1 -1
  20. package/button/button.js +1 -1
  21. package/button/button.js.map +1 -1
  22. package/button/button.styles.d.ts.map +1 -1
  23. package/button/button.styles.js +0 -100
  24. package/button/button.styles.js.map +1 -1
  25. package/button/fab.d.ts +2 -2
  26. package/button/fab.d.ts.map +1 -1
  27. package/button/fab.js +1 -1
  28. package/button/fab.js.map +1 -1
  29. package/button/fab.styles.d.ts.map +1 -1
  30. package/button/fab.styles.js +0 -100
  31. package/button/fab.styles.js.map +1 -1
  32. package/button/icon-button.d.ts +2 -2
  33. package/button/icon-button.d.ts.map +1 -1
  34. package/button/icon-button.js +1 -1
  35. package/button/icon-button.js.map +1 -1
  36. package/button/icon-button.styles.d.ts.map +1 -1
  37. package/button/icon-button.styles.js +0 -100
  38. package/button/icon-button.styles.js.map +1 -1
  39. package/card/card-content.js +1 -1
  40. package/card/card-content.js.map +1 -1
  41. package/card/card-media.js +1 -1
  42. package/card/card-media.js.map +1 -1
  43. package/card/card.js +1 -1
  44. package/card/card.js.map +1 -1
  45. package/checkbox/checkbox.js +8 -20
  46. package/checkbox/checkbox.js.map +1 -1
  47. package/chip/chip-set.d.ts +1 -1
  48. package/chip/chip-set.d.ts.map +1 -1
  49. package/chip/chip-set.js +1 -1
  50. package/chip/chip-set.js.map +1 -1
  51. package/chip/chip-set.styles.d.ts.map +1 -1
  52. package/chip/chip-set.styles.js +0 -19
  53. package/chip/chip-set.styles.js.map +1 -1
  54. package/chip/chip.d.ts +1 -1
  55. package/chip/chip.d.ts.map +1 -1
  56. package/chip/chip.js +39 -54
  57. package/chip/chip.js.map +1 -1
  58. package/chip/chip.styles.d.ts.map +1 -1
  59. package/chip/chip.styles.js +0 -87
  60. package/chip/chip.styles.js.map +1 -1
  61. package/chip-field/chip-field.js +72 -86
  62. package/chip-field/chip-field.js.map +1 -1
  63. package/custom-elements.json +2109 -1186
  64. package/dialog/confirm-dialog-builder.js +6 -22
  65. package/dialog/confirm-dialog-builder.js.map +1 -1
  66. package/dialog/dialog-builder.js +4 -17
  67. package/dialog/dialog-builder.js.map +1 -1
  68. package/dialog/dialog.js +65 -80
  69. package/dialog/dialog.js.map +1 -1
  70. package/dialog/message-dialog-builder.js +3 -19
  71. package/dialog/message-dialog-builder.js.map +1 -1
  72. package/elevation/elevation.js +1 -1
  73. package/elevation/elevation.js.map +1 -1
  74. package/field/field-base.d.ts +2 -2
  75. package/field/field-base.d.ts.map +1 -1
  76. package/field/field-base.js +13 -16
  77. package/field/field-base.js.map +1 -1
  78. package/field/field-base.styles.js +1 -1
  79. package/field/field-base.styles.js.map +1 -1
  80. package/list/list-item.js +1 -1
  81. package/list/list-item.js.map +1 -1
  82. package/list/list.js +1 -1
  83. package/list/list.js.map +1 -1
  84. package/menu/menu-item.d.ts +12 -6
  85. package/menu/menu-item.d.ts.map +1 -1
  86. package/menu/menu-item.js +49 -31
  87. package/menu/menu-item.js.map +1 -1
  88. package/menu/menu-item.styles.d.ts.map +1 -1
  89. package/menu/menu-item.styles.js +15 -90
  90. package/menu/menu-item.styles.js.map +1 -1
  91. package/menu/menu.d.ts +1 -1
  92. package/menu/menu.d.ts.map +1 -1
  93. package/menu/menu.js +142 -150
  94. package/menu/menu.js.map +1 -1
  95. package/menu/menu.styles.d.ts.map +1 -1
  96. package/menu/menu.styles.js +1 -0
  97. package/menu/menu.styles.js.map +1 -1
  98. package/navigation/drawer-item.d.ts +1 -1
  99. package/navigation/drawer-item.d.ts.map +1 -1
  100. package/navigation/drawer-item.js +4 -5
  101. package/navigation/drawer-item.js.map +1 -1
  102. package/navigation/drawer-item.styles.d.ts.map +1 -1
  103. package/navigation/drawer-item.styles.js +0 -87
  104. package/navigation/drawer-item.styles.js.map +1 -1
  105. package/navigation/drawer.js +4 -4
  106. package/navigation/drawer.js.map +1 -1
  107. package/navigation/side-navigation.js +8 -20
  108. package/navigation/side-navigation.js.map +1 -1
  109. package/package.json +18 -18
  110. package/progress/circular-progress.d.ts +1 -2
  111. package/progress/circular-progress.d.ts.map +1 -1
  112. package/progress/circular-progress.js +19 -30
  113. package/progress/circular-progress.js.map +1 -1
  114. package/progress/progress-bar.d.ts +1 -2
  115. package/progress/progress-bar.d.ts.map +1 -1
  116. package/progress/progress-bar.js +12 -20
  117. package/progress/progress-bar.js.map +1 -1
  118. package/radio/radio.js +53 -61
  119. package/radio/radio.js.map +1 -1
  120. package/ripple/ripple.js +3 -2
  121. package/ripple/ripple.js.map +1 -1
  122. package/select/extended-option.d.ts +5 -0
  123. package/select/extended-option.d.ts.map +1 -0
  124. package/select/extended-option.js +2 -0
  125. package/select/extended-option.js.map +1 -0
  126. package/select/extended-select.d.ts +6 -0
  127. package/select/extended-select.d.ts.map +1 -0
  128. package/select/extended-select.js +2 -0
  129. package/select/extended-select.js.map +1 -0
  130. package/select/option.d.ts +10 -0
  131. package/select/option.d.ts.map +1 -1
  132. package/select/option.js +84 -74
  133. package/select/option.js.map +1 -1
  134. package/select/option.styles.d.ts.map +1 -1
  135. package/select/option.styles.js +10 -0
  136. package/select/option.styles.js.map +1 -1
  137. package/select/select-navigation-controller.d.ts +14 -0
  138. package/select/select-navigation-controller.d.ts.map +1 -0
  139. package/select/select-navigation-controller.js +80 -0
  140. package/select/select-navigation-controller.js.map +1 -0
  141. package/select/select.d.ts +13 -5
  142. package/select/select.d.ts.map +1 -1
  143. package/select/select.js +186 -66
  144. package/select/select.js.map +1 -1
  145. package/select/select.styles.d.ts.map +1 -1
  146. package/select/select.styles.js +25 -6
  147. package/select/select.styles.js.map +1 -1
  148. package/shared/button-wrapper.d.ts +2 -0
  149. package/shared/button-wrapper.d.ts.map +1 -1
  150. package/shared/button-wrapper.js +18 -22
  151. package/shared/button-wrapper.js.map +1 -1
  152. package/shared/button-wrapper.styles.d.ts +2 -0
  153. package/shared/button-wrapper.styles.d.ts.map +1 -0
  154. package/shared/button-wrapper.styles.js +63 -0
  155. package/shared/button-wrapper.styles.js.map +1 -0
  156. package/shared/compare-text.d.ts +2 -0
  157. package/shared/compare-text.d.ts.map +1 -0
  158. package/shared/compare-text.js +5 -0
  159. package/shared/compare-text.js.map +1 -0
  160. package/shared/menu-field/menu-field-navigation-controller.d.ts +20 -0
  161. package/shared/menu-field/menu-field-navigation-controller.d.ts.map +1 -0
  162. package/shared/menu-field/menu-field-navigation-controller.js +103 -0
  163. package/shared/menu-field/menu-field-navigation-controller.js.map +1 -0
  164. package/shared/menu-field/menu-field.d.ts +7 -0
  165. package/shared/menu-field/menu-field.d.ts.map +1 -0
  166. package/shared/menu-field/menu-field.js +2 -0
  167. package/shared/menu-field/menu-field.js.map +1 -0
  168. package/shared/mixin-attribute-properties.d.ts.map +1 -1
  169. package/shared/normalize-text.d.ts +1 -1
  170. package/shared/normalize-text.d.ts.map +1 -1
  171. package/shared/normalize-text.js +1 -1
  172. package/shared/normalize-text.js.map +1 -1
  173. package/shared/selection-control/selection-control-list-item.d.ts.map +1 -1
  174. package/shared/selection-control/selection-control-list-item.js +7 -7
  175. package/shared/selection-control/selection-control-list-item.js.map +1 -1
  176. package/shared/selection-control/selection-control.js +16 -28
  177. package/shared/selection-control/selection-control.js.map +1 -1
  178. package/shared/sets/set-base.d.ts +2 -0
  179. package/shared/sets/set-base.d.ts.map +1 -1
  180. package/shared/sets/set-base.js +2 -0
  181. package/shared/sets/set-base.js.map +1 -1
  182. package/shared/sets/set-base.styles.d.ts +2 -0
  183. package/shared/sets/set-base.styles.d.ts.map +1 -0
  184. package/shared/sets/set-base.styles.js +22 -0
  185. package/shared/sets/set-base.styles.js.map +1 -0
  186. package/shared/text-field-base/text-field-base.js +6 -6
  187. package/shared/text-field-base/text-field-base.js.map +1 -1
  188. package/snackbar/snackbar.d.ts.map +1 -1
  189. package/snackbar/snackbar.js +13 -7
  190. package/snackbar/snackbar.js.map +1 -1
  191. package/switch/switch.js +4 -4
  192. package/switch/switch.js.map +1 -1
  193. package/text-field/text-field.d.ts +2 -0
  194. package/text-field/text-field.d.ts.map +1 -1
  195. package/text-field/text-field.js +22 -30
  196. package/text-field/text-field.js.map +1 -1
  197. package/typeahead/highlight.js +7 -24
  198. package/typeahead/highlight.js.map +1 -1
  199. package/typeahead/typeahead.d.ts +3 -3
  200. package/typeahead/typeahead.d.ts.map +1 -1
  201. package/typeahead/typeahead.js +178 -204
  202. package/typeahead/typeahead.js.map +1 -1
@@ -4,36 +4,35 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
4
4
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
5
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
6
  };
7
- var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
- return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
- };
12
- var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
13
- if (kind === "m") throw new TypeError("Private method is not writable");
14
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
15
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
16
- return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
17
- };
18
- var _UmTypeahead_instances, _UmTypeahead_targetId, _UmTypeahead_connected, _UmTypeahead_documentMutationObserver, _UmTypeahead_termNormalized, _UmTypeahead_debounceTimeout, _UmTypeahead_value, _UmTypeahead_elementInternals, _UmTypeahead_attach, _UmTypeahead_detach, _UmTypeahead_handleFocus, _UmTypeahead_handleInput, _UmTypeahead_getItemClickHandler, _UmTypeahead_setValueAndDispatchEvents, _UmTypeahead_updateResults, _UmTypeahead_getData, _UmTypeahead_setValueOnTarget;
19
7
  import { html, LitElement } from 'lit';
20
8
  import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
21
9
  import { customElement, property, query, queryAll, state } from 'lit/decorators.js';
22
10
  import { styles } from './typeahead.styles.js';
11
+ import { MenuFieldNavigationController } from '../shared/menu-field/menu-field-navigation-controller.js';
23
12
  import { normalizeText } from '../shared/normalize-text.js';
24
13
  import './highlight.js';
25
14
  let UmTypeahead = class UmTypeahead extends LitElement {
15
+ static { this.formAssociated = true; }
16
+ static { this.styles = styles; }
17
+ #targetId;
18
+ #connected;
19
+ #documentMutationObserver;
20
+ #navigationController;
21
+ #termNormalized;
22
+ #debounceTimeout;
23
+ #value;
24
+ #elementInternals;
26
25
  get form() {
27
- return __classPrivateFieldGet(this, _UmTypeahead_elementInternals, "f").form;
26
+ return this.#elementInternals.form;
28
27
  }
29
28
  get value() {
30
- return __classPrivateFieldGet(this, _UmTypeahead_value, "f");
29
+ return this.#value;
31
30
  }
32
31
  set value(value) {
33
- __classPrivateFieldSet(this, _UmTypeahead_value, value, "f");
34
- __classPrivateFieldGet(this, _UmTypeahead_elementInternals, "f").setFormValue(value);
35
- if (__classPrivateFieldGet(this, _UmTypeahead_connected, "f")) {
36
- __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_setValueOnTarget).call(this);
32
+ this.#value = value;
33
+ this.#elementInternals.setFormValue(value);
34
+ if (this.#connected) {
35
+ this.#setValueOnTarget();
37
36
  }
38
37
  }
39
38
  focus() {
@@ -43,99 +42,128 @@ let UmTypeahead = class UmTypeahead extends LitElement {
43
42
  if (!this.target) {
44
43
  return;
45
44
  }
46
- __classPrivateFieldSet(this, _UmTypeahead_termNormalized, '', "f");
45
+ this.#termNormalized = '';
47
46
  this.setTargetValue('');
48
47
  }
49
48
  get targetId() {
50
- return __classPrivateFieldGet(this, _UmTypeahead_targetId, "f");
49
+ return this.#targetId;
51
50
  }
52
51
  set targetId(value) {
53
- __classPrivateFieldSet(this, _UmTypeahead_targetId, value, "f");
54
- if (__classPrivateFieldGet(this, _UmTypeahead_connected, "f")) {
55
- __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_attach).call(this);
52
+ this.#targetId = value;
53
+ if (this.#connected) {
54
+ this.#attach();
56
55
  }
57
56
  }
58
57
  constructor() {
59
58
  super();
60
- _UmTypeahead_instances.add(this);
61
- _UmTypeahead_targetId.set(this, void 0);
62
- _UmTypeahead_connected.set(this, false);
59
+ this.#connected = false;
63
60
  this.target = null;
64
- _UmTypeahead_documentMutationObserver.set(this, null);
65
- _UmTypeahead_termNormalized.set(this, '');
66
- _UmTypeahead_debounceTimeout.set(this, null);
67
- _UmTypeahead_value.set(this, void 0);
68
- _UmTypeahead_elementInternals.set(this, void 0);
61
+ this.#documentMutationObserver = null;
62
+ this.#navigationController = new MenuFieldNavigationController(this);
63
+ this.#termNormalized = '';
64
+ this.#debounceTimeout = null;
69
65
  this.debounce = 300;
70
66
  this.limit = 10;
71
67
  this.minLength = 2;
72
68
  this.openOnFocus = false;
73
69
  this.editable = false;
74
- _UmTypeahead_handleFocus.set(this, async () => {
70
+ this.autocomplete = 'off';
71
+ this.spellcheck = false;
72
+ this.#handleFocus = async () => {
75
73
  if (this.openOnFocus) {
76
- await __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_updateResults).call(this);
74
+ await this.#updateResults();
77
75
  }
78
- });
79
- _UmTypeahead_handleInput.set(this, () => {
80
- if (__classPrivateFieldGet(this, _UmTypeahead_debounceTimeout, "f")) {
81
- clearTimeout(__classPrivateFieldGet(this, _UmTypeahead_debounceTimeout, "f"));
82
- }
83
- __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_setValueAndDispatchEvents).call(this, this.editable ? this.getTargetValue() : null, true);
84
- __classPrivateFieldSet(this, _UmTypeahead_debounceTimeout, setTimeout(async () => await __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_updateResults).call(this, true), this.debounce), "f");
85
- });
86
- this.handleKeyDown = (event) => {
87
- const isDown = event.key === 'ArrowDown';
88
- const isUp = event.key === 'ArrowUp';
89
- if (isDown || isUp) {
90
- this.navigate(event, isDown);
91
- return;
92
- }
93
- const isEnter = event.key === 'Enter';
94
- if (isEnter) {
95
- this.selectActiveItem(event);
76
+ };
77
+ this.#handleInput = () => {
78
+ if (this.#debounceTimeout) {
79
+ clearTimeout(this.#debounceTimeout);
96
80
  }
81
+ this.#setValueAndDispatchEvents(this.editable ? this.getTargetValue() : null, true);
82
+ this.#debounceTimeout = setTimeout(async () => await this.#updateResults(true), this.debounce);
97
83
  };
98
- __classPrivateFieldSet(this, _UmTypeahead_elementInternals, this.attachInternals(), "f");
84
+ this.#elementInternals = this.attachInternals();
85
+ }
86
+ attributeChangedCallback(name, _old, value) {
87
+ super.attributeChangedCallback(name, _old, value);
88
+ if (name === 'autocomplete') {
89
+ this.target.autocomplete = value;
90
+ }
91
+ if (name === 'spellcheck') {
92
+ this.target.spellcheck = value === 'true';
93
+ }
99
94
  }
100
95
  connectedCallback() {
101
96
  super.connectedCallback();
102
- __classPrivateFieldSet(this, _UmTypeahead_connected, true, "f");
103
- __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_attach).call(this);
104
- __classPrivateFieldSet(this, _UmTypeahead_documentMutationObserver, new MutationObserver(() => __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_attach).call(this)), "f");
105
- __classPrivateFieldGet(this, _UmTypeahead_documentMutationObserver, "f").observe(document, { attributes: true, childList: true });
97
+ this.#connected = true;
98
+ this.#attach();
99
+ this.#documentMutationObserver = new MutationObserver(() => this.#attach());
100
+ this.#documentMutationObserver.observe(document, { attributes: true, childList: true });
106
101
  }
107
102
  disconnectedCallback() {
108
103
  super.disconnectedCallback();
109
- __classPrivateFieldSet(this, _UmTypeahead_connected, false, "f");
110
- __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_detach).call(this);
111
- __classPrivateFieldGet(this, _UmTypeahead_documentMutationObserver, "f").disconnect();
112
- __classPrivateFieldSet(this, _UmTypeahead_documentMutationObserver, null, "f");
113
- }
114
- navigate(event, forwards) {
115
- const menuItems = Array.from(this.menuItems);
116
- if (!menuItems.length) {
104
+ this.#connected = false;
105
+ this.#detach();
106
+ this.#documentMutationObserver.disconnect();
107
+ this.#documentMutationObserver = null;
108
+ }
109
+ #attach() {
110
+ if (!this.targetId) {
111
+ this.#detach();
112
+ return;
113
+ }
114
+ const newTarget = document.getElementById(this.targetId);
115
+ if (newTarget === this.target) {
117
116
  return;
118
117
  }
119
- event.preventDefault();
120
- const activeMenu = menuItems.find(m => m.active);
121
- if (activeMenu) {
122
- activeMenu.active = false;
118
+ this.#detach();
119
+ if (!newTarget) {
120
+ return;
123
121
  }
124
- const nextMenu = forwards
125
- ? activeMenu?.nextElementSibling ?? menuItems[0]
126
- : activeMenu?.previousElementSibling ?? menuItems[menuItems.length - 1];
127
- if (nextMenu) {
128
- nextMenu.active = true;
122
+ // @ts-ignore
123
+ this.target = newTarget;
124
+ newTarget.role = "combobox";
125
+ newTarget.autocomplete = this.autocomplete;
126
+ newTarget.spellcheck = this.spellcheck;
127
+ newTarget.autocapitalize = 'off';
128
+ newTarget.addEventListener('click', this.#handleClick);
129
+ newTarget.addEventListener('input', this.#handleInput);
130
+ this.#navigationController.attach(newTarget);
131
+ newTarget.addEventListener('focus', this.#handleFocus);
132
+ if (this.value) {
133
+ this.#setValueOnTarget();
129
134
  }
130
135
  }
131
- selectActiveItem(event) {
132
- const menuItems = Array.from(this.menuItems);
133
- const activeMenu = menuItems.find(m => m.active);
134
- if (!activeMenu) {
135
- return;
136
+ #detach() {
137
+ this.target?.removeEventListener('click', this.#handleClick);
138
+ this.target?.removeEventListener('input', this.#handleInput);
139
+ this.#navigationController.detach();
140
+ this.target?.removeEventListener('focus', this.#handleFocus);
141
+ }
142
+ #handleFocus;
143
+ #handleInput;
144
+ #getItemClickHandler(data) {
145
+ return () => {
146
+ const selectedEvent = new CustomEvent('selected', {
147
+ cancelable: true,
148
+ detail: data.value
149
+ });
150
+ this.dispatchEvent(selectedEvent);
151
+ if (selectedEvent.defaultPrevented) {
152
+ return;
153
+ }
154
+ this.#setValueAndDispatchEvents(data.value);
155
+ };
156
+ }
157
+ #setValueAndDispatchEvents(value, direct = false) {
158
+ if (!direct) {
159
+ this.value = value;
136
160
  }
137
- event.preventDefault();
138
- activeMenu.click();
161
+ else {
162
+ this.#value = value;
163
+ this.#elementInternals.setFormValue(value);
164
+ }
165
+ this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
166
+ this.dispatchEvent(new Event('change', { bubbles: true }));
139
167
  }
140
168
  render() {
141
169
  if (!this.results?.length) {
@@ -150,14 +178,73 @@ let UmTypeahead = class UmTypeahead extends LitElement {
150
178
  ${this.results
151
179
  .map(result => {
152
180
  const content = this.template
153
- ? unsafeHTML(this.template(__classPrivateFieldGet(this, _UmTypeahead_termNormalized, "f"), result.value))
154
- : html `<u-highlight .term=${__classPrivateFieldGet(this, _UmTypeahead_termNormalized, "f")} .result=${result.label}></u-highlight>`;
181
+ ? unsafeHTML(this.template(this.#termNormalized, result.value))
182
+ : html `<u-highlight .term=${this.#termNormalized} .result=${result.label}></u-highlight>`;
155
183
  return html `
156
- <u-menu-item @click=${__classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_getItemClickHandler).call(this, result)} tabindex="-1">${content}</u-menu-item>`;
184
+ <u-menu-item @click=${this.#getItemClickHandler(result)} tabindex="-1">${content}</u-menu-item>`;
157
185
  })}
158
186
  </u-menu>
159
187
  `;
160
188
  }
189
+ async #updateResults(lazy = false) {
190
+ const term = this.getTargetValue();
191
+ const termNormalized = normalizeText(term).toLowerCase();
192
+ if (lazy && termNormalized === this.#termNormalized && this.menu?.open === true) {
193
+ return;
194
+ }
195
+ this.#termNormalized = termNormalized;
196
+ if (termNormalized.length < this.minLength) {
197
+ this.results = [];
198
+ return;
199
+ }
200
+ this.results = await this.#getData();
201
+ this.results = this.results.slice(0, this.limit || this.results.length);
202
+ }
203
+ async #getData() {
204
+ if (!this.source) {
205
+ return [];
206
+ }
207
+ let values;
208
+ let filter = false;
209
+ if (this.source instanceof Array) {
210
+ values = this.source;
211
+ filter = true;
212
+ }
213
+ else {
214
+ const source = this.source;
215
+ values = await source(this.#termNormalized);
216
+ }
217
+ const result = values
218
+ .map(source => ({
219
+ label: this.formatter
220
+ ? this.formatter(source)
221
+ : source.toString(),
222
+ value: source
223
+ }));
224
+ if (!filter) {
225
+ return result;
226
+ }
227
+ return result
228
+ .filter(t => normalizeText(t.label)
229
+ .toLowerCase()
230
+ .includes(this.#termNormalized));
231
+ }
232
+ #setValueOnTarget() {
233
+ if (!this.target) {
234
+ return;
235
+ }
236
+ const textValue = this.getTextValue();
237
+ this.#termNormalized = normalizeText(textValue)?.toLowerCase();
238
+ if (this.target.tagName === 'U-TEXT-FIELD') {
239
+ this.target.value = textValue;
240
+ return;
241
+ }
242
+ if (this.target.input) {
243
+ this.target.input.value = textValue;
244
+ return;
245
+ }
246
+ this.target.value = textValue;
247
+ }
161
248
  getTargetValue() {
162
249
  return this.target.input?.value ?? this.target.value;
163
250
  }
@@ -187,129 +274,10 @@ let UmTypeahead = class UmTypeahead extends LitElement {
187
274
  ? this.formatter(this.value)
188
275
  : this.value;
189
276
  }
190
- };
191
- _UmTypeahead_targetId = new WeakMap();
192
- _UmTypeahead_connected = new WeakMap();
193
- _UmTypeahead_documentMutationObserver = new WeakMap();
194
- _UmTypeahead_termNormalized = new WeakMap();
195
- _UmTypeahead_debounceTimeout = new WeakMap();
196
- _UmTypeahead_value = new WeakMap();
197
- _UmTypeahead_elementInternals = new WeakMap();
198
- _UmTypeahead_handleFocus = new WeakMap();
199
- _UmTypeahead_handleInput = new WeakMap();
200
- _UmTypeahead_instances = new WeakSet();
201
- _UmTypeahead_attach = function _UmTypeahead_attach() {
202
- if (!this.targetId) {
203
- __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_detach).call(this);
204
- return;
205
- }
206
- const newTarget = document.getElementById(this.targetId);
207
- if (newTarget === this.target) {
208
- return;
209
- }
210
- __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_detach).call(this);
211
- if (!newTarget) {
212
- return;
213
- }
214
- // @ts-ignore
215
- this.target = newTarget;
216
- newTarget.addEventListener('input', __classPrivateFieldGet(this, _UmTypeahead_handleInput, "f"));
217
- newTarget.addEventListener('keydown', this.handleKeyDown);
218
- newTarget.addEventListener('focus', __classPrivateFieldGet(this, _UmTypeahead_handleFocus, "f"));
219
- if (this.value) {
220
- __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_setValueOnTarget).call(this);
221
- }
222
- };
223
- _UmTypeahead_detach = function _UmTypeahead_detach() {
224
- this.target?.removeEventListener('input', __classPrivateFieldGet(this, _UmTypeahead_handleInput, "f"));
225
- this.target?.removeEventListener('keydown', this.handleKeyDown);
226
- this.target?.removeEventListener('focus', __classPrivateFieldGet(this, _UmTypeahead_handleFocus, "f"));
227
- };
228
- _UmTypeahead_getItemClickHandler = function _UmTypeahead_getItemClickHandler(data) {
229
- return () => {
230
- const selectedEvent = new CustomEvent('selected', {
231
- cancelable: true,
232
- detail: data.value
233
- });
234
- this.dispatchEvent(selectedEvent);
235
- if (selectedEvent.defaultPrevented) {
236
- return;
237
- }
238
- __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_setValueAndDispatchEvents).call(this, data.value);
239
- };
240
- };
241
- _UmTypeahead_setValueAndDispatchEvents = function _UmTypeahead_setValueAndDispatchEvents(value, direct = false) {
242
- if (!direct) {
243
- this.value = value;
244
- }
245
- else {
246
- __classPrivateFieldSet(this, _UmTypeahead_value, value, "f");
247
- __classPrivateFieldGet(this, _UmTypeahead_elementInternals, "f").setFormValue(value);
248
- }
249
- this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
250
- this.dispatchEvent(new Event('change', { bubbles: true }));
251
- };
252
- _UmTypeahead_updateResults = async function _UmTypeahead_updateResults(lazy = false) {
253
- const term = this.getTargetValue();
254
- const termNormalized = normalizeText(term).toLowerCase();
255
- if (lazy && termNormalized === __classPrivateFieldGet(this, _UmTypeahead_termNormalized, "f") && this.menu?.open === true) {
256
- return;
257
- }
258
- __classPrivateFieldSet(this, _UmTypeahead_termNormalized, termNormalized, "f");
259
- if (termNormalized.length < this.minLength) {
260
- this.results = [];
261
- return;
277
+ #handleClick(e) {
278
+ e.stopPropagation();
262
279
  }
263
- this.results = await __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_getData).call(this);
264
- this.results = this.results.slice(0, this.limit || this.results.length);
265
280
  };
266
- _UmTypeahead_getData = async function _UmTypeahead_getData() {
267
- if (!this.source) {
268
- return [];
269
- }
270
- let values;
271
- let filter = false;
272
- if (this.source instanceof Array) {
273
- values = this.source;
274
- filter = true;
275
- }
276
- else {
277
- const source = this.source;
278
- values = await source(__classPrivateFieldGet(this, _UmTypeahead_termNormalized, "f"));
279
- }
280
- const result = values
281
- .map(source => ({
282
- label: this.formatter
283
- ? this.formatter(source)
284
- : source.toString(),
285
- value: source
286
- }));
287
- if (!filter) {
288
- return result;
289
- }
290
- return result
291
- .filter(t => normalizeText(t.label)
292
- .toLowerCase()
293
- .includes(__classPrivateFieldGet(this, _UmTypeahead_termNormalized, "f")));
294
- };
295
- _UmTypeahead_setValueOnTarget = function _UmTypeahead_setValueOnTarget() {
296
- if (!this.target) {
297
- return;
298
- }
299
- const textValue = this.getTextValue();
300
- __classPrivateFieldSet(this, _UmTypeahead_termNormalized, normalizeText(textValue)?.toLowerCase(), "f");
301
- if (this.target.tagName === 'U-TEXT-FIELD') {
302
- this.target.value = textValue;
303
- return;
304
- }
305
- if (this.target.input) {
306
- this.target.input.value = textValue;
307
- return;
308
- }
309
- this.target.value = textValue;
310
- };
311
- UmTypeahead.formAssociated = true;
312
- UmTypeahead.styles = styles;
313
281
  __decorate([
314
282
  state()
315
283
  ], UmTypeahead.prototype, "results", void 0);
@@ -331,6 +299,12 @@ __decorate([
331
299
  __decorate([
332
300
  property({ type: Boolean, reflect: true })
333
301
  ], UmTypeahead.prototype, "editable", void 0);
302
+ __decorate([
303
+ property({ reflect: true })
304
+ ], UmTypeahead.prototype, "autocomplete", void 0);
305
+ __decorate([
306
+ property({ reflect: true })
307
+ ], UmTypeahead.prototype, "spellcheck", void 0);
334
308
  __decorate([
335
309
  property({ reflect: true, attribute: "target-id" })
336
310
  ], UmTypeahead.prototype, "targetId", null);
@@ -1 +1 @@
1
- {"version":3,"file":"typeahead.js","sourceRoot":"","sources":["../../src/typeahead/typeahead.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { customElement, property, query, queryAll, state } from 'lit/decorators.js';\n\nimport { styles } from './typeahead.styles.js';\n\nimport { UmMenuItem } from '../menu/menu-item.js';\nimport { UmMenu } from '../menu/menu.js';\nimport { normalizeText } from '../shared/normalize-text.js';\n\nimport './highlight.js';\n\nexport interface Data {\n label: string;\n value: any;\n}\n\n@customElement('u-typeahead')\nexport class UmTypeahead extends LitElement {\n static readonly formAssociated = true;\n\n static override styles = styles;\n\n #targetId: string | undefined;\n\n #connected = false;\n private target: HTMLElement & {input?: HTMLInputElement; container?: HTMLElement; value: string} | null = null;\n #documentMutationObserver: MutationObserver | null = null;\n #termNormalized: string = '';\n #debounceTimeout: number | null = null;\n #value: any;\n readonly #elementInternals: ElementInternals;\n\n // @ts-ignore\n @state() results: Data[];\n\n @property() source: (any[] | ((term: string) => Promise<any[]>)) | undefined;\n formatter: ((value: any) => string) | undefined;\n template: ((term: string, value: any) => string) | undefined;\n\n @property({type: Number, reflect: true}) debounce = 300;\n @property({type: Number, reflect: true}) limit = 10;\n @property({type: Number, reflect: true}) minLength = 2;\n @property({type: Boolean, attribute: 'open-on-focus', reflect: true}) openOnFocus = false;\n @property({type: Boolean, reflect: true})\n editable = false;\n\n get form(): HTMLFormElement | null {\n return this.#elementInternals.form;\n }\n\n get value(): any {\n return this.#value;\n }\n set value(value: any) {\n this.#value = value;\n this.#elementInternals.setFormValue(value);\n\n if (this.#connected) {\n this.#setValueOnTarget();\n }\n }\n\n override focus() {\n this.target?.focus();\n }\n\n clear() {\n if (!this.target) {\n return;\n }\n\n this.#termNormalized = '';\n this.setTargetValue('');\n }\n\n @property({reflect: true, attribute: \"target-id\"})\n get targetId(): string | undefined {\n return this.#targetId;\n }\n set targetId(value: string | undefined) {\n this.#targetId = value;\n\n if (this.#connected) {\n this.#attach();\n }\n }\n\n @query('u-menu') menu!: UmMenu;\n @queryAll('u-menu-item') menuItems!: UmMenuItem[];\n\n constructor() {\n super();\n this.#elementInternals = this.attachInternals();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.#connected = true;\n this.#attach();\n this.#documentMutationObserver = new MutationObserver(() => this.#attach())\n this.#documentMutationObserver.observe(document, {attributes: true, childList: true});\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.#connected = false;\n this.#detach();\n this.#documentMutationObserver!.disconnect();\n this.#documentMutationObserver = null;\n }\n\n #attach() {\n if (!this.targetId) {\n this.#detach();\n return;\n }\n\n const newTarget = document.getElementById(this.targetId) as HTMLInputElement;\n\n if (newTarget === this.target) {\n return;\n }\n\n this.#detach();\n\n if (!newTarget) {\n return;\n }\n\n // @ts-ignore\n this.target = newTarget;\n\n newTarget.addEventListener('input', this.#handleInput);\n newTarget.addEventListener('keydown', this.handleKeyDown);\n newTarget.addEventListener('focus', this.#handleFocus);\n\n if (this.value) {\n this.#setValueOnTarget();\n }\n }\n\n #detach() {\n this.target?.removeEventListener('input', this.#handleInput);\n this.target?.removeEventListener('keydown', this.handleKeyDown);\n this.target?.removeEventListener('focus', this.#handleFocus);\n }\n\n #handleFocus = async () => {\n if (this.openOnFocus) {\n await this.#updateResults();\n }\n }\n\n #handleInput = () => {\n\n if (this.#debounceTimeout) {\n clearTimeout(this.#debounceTimeout);\n }\n\n this.#setValueAndDispatchEvents(this.editable ? this.getTargetValue() : null, true);\n\n this.#debounceTimeout = setTimeout(async () => await this.#updateResults(true), this.debounce);\n }\n\n private readonly handleKeyDown = (event: KeyboardEvent) => {\n const isDown = event.key === 'ArrowDown';\n const isUp = event.key === 'ArrowUp';\n\n if (isDown || isUp) {\n this.navigate(event, isDown);\n return;\n }\n\n const isEnter = event.key === 'Enter';\n\n if (isEnter) {\n this.selectActiveItem(event);\n }\n };\n\n private navigate(event: KeyboardEvent, forwards: boolean) {\n const menuItems = Array.from(this.menuItems);\n\n if (!menuItems.length) {\n return;\n }\n\n event.preventDefault();\n\n const activeMenu = menuItems.find(m => m.active);\n\n if (activeMenu) {\n activeMenu.active = false;\n }\n\n const nextMenu = forwards\n ? (<UmMenuItem>activeMenu?.nextElementSibling) ?? menuItems[0]\n : (<UmMenuItem>activeMenu?.previousElementSibling) ?? menuItems[menuItems.length - 1];\n\n if (nextMenu) {\n nextMenu.active = true;\n }\n }\n\n private selectActiveItem(event: KeyboardEvent) {\n const menuItems = Array.from(this.menuItems);\n const activeMenu = menuItems.find(m => m.active)\n\n if (!activeMenu) {\n return;\n }\n\n event.preventDefault();\n activeMenu.click();\n }\n\n #getItemClickHandler(data: Data) {\n return () => {\n const selectedEvent = new CustomEvent('selected', {\n cancelable: true,\n detail: data.value\n });\n\n this.dispatchEvent(selectedEvent);\n\n if (selectedEvent.defaultPrevented) {\n return;\n }\n\n this.#setValueAndDispatchEvents(data.value);\n }\n }\n\n #setValueAndDispatchEvents(value: any, direct = false) {\n\n if (!direct) {\n this.value = value;\n } else {\n this.#value = value;\n this.#elementInternals.setFormValue(value);\n }\n\n this.dispatchEvent(new InputEvent('input', {bubbles: true, composed: true}));\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n\n protected override render(): HTMLTemplateResult {\n\n if (!this.results?.length) {\n return html``;\n }\n\n setTimeout(() => {\n this.menu.anchorElement = this.getMenuAnchor();\n this.menu.open = true;\n });\n\n return html`\n <u-menu manualFocus anchor-corner=\"auto-start\">\n ${this.results\n .map(result => {\n const content = this.template\n ? unsafeHTML(this.template(this.#termNormalized, result.value))\n : html`<u-highlight .term=${this.#termNormalized} .result=${result.label}></u-highlight>`;\n \n return html`\n <u-menu-item @click=${this.#getItemClickHandler(result)} tabindex=\"-1\">${content}</u-menu-item>`;\n })}\n </u-menu>\n `;\n }\n\n async #updateResults(lazy = false) {\n\n const term = this.getTargetValue();\n\n const termNormalized = normalizeText(term).toLowerCase();\n\n if (lazy && termNormalized === this.#termNormalized && this.menu?.open === true) {\n return;\n }\n\n this.#termNormalized = termNormalized;\n\n if (termNormalized.length < this.minLength) {\n this.results = [];\n return;\n }\n\n this.results = await this.#getData();\n this.results = this.results.slice(0, this.limit || this.results.length);\n }\n\n async #getData(): Promise<Data[]> {\n if (!this.source) {\n return [];\n }\n\n let values: any[]\n\n let filter = false;\n\n if (this.source instanceof Array) {\n values = this.source;\n filter = true;\n } else {\n const source = this.source as ((term: string) => Promise<any[]>);\n values = await source(this.#termNormalized);\n }\n\n const result = values\n .map(source => ({\n label: this.formatter\n ? this.formatter(source)\n : source.toString(),\n value: source\n }));\n\n if (!filter) {\n return result;\n }\n\n return result\n .filter(t => normalizeText(t.label)\n .toLowerCase()\n .includes(this.#termNormalized))\n }\n\n #setValueOnTarget() {\n if (!this.target) {\n return;\n }\n\n const textValue = this.getTextValue();\n this.#termNormalized = normalizeText(textValue)?.toLowerCase();\n\n if (this.target.tagName === 'U-TEXT-FIELD') {\n this.target.value = textValue;\n return;\n }\n\n if (this.target.input) {\n this.target.input.value = textValue;\n return;\n }\n \n this.target.value = textValue;\n }\n\n private getTargetValue(): string {\n return this.target!.input?.value ?? this.target!.value;\n }\n\n private setTargetValue(value: string): void {\n const targetInput = this.target?.input ?? this.target;\n\n if (targetInput) {\n targetInput.value = value;\n }\n }\n\n private getMenuAnchor() {\n if (!this.target) {\n return null;\n }\n\n if (this.target.tagName === 'U-CHIP-FIELD') {\n return this.target.input;\n }\n\n if (this.target.tagName === 'U-TEXT-FIELD') {\n return this.target.container;\n }\n\n return this.target;\n }\n\n private getTextValue(): string {\n if (!this.value) {\n return '';\n }\n\n return this.formatter\n ? this.formatter(this.value)\n : this.value\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-typeahead': UmTypeahead;\n }\n}\n"]}
1
+ {"version":3,"file":"typeahead.js","sourceRoot":"","sources":["../../src/typeahead/typeahead.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { customElement, property, query, queryAll, state } from 'lit/decorators.js';\n\nimport { styles } from './typeahead.styles.js';\n\nimport { UmMenuItem } from '../menu/menu-item.js';\nimport { UmMenu } from '../menu/menu.js';\nimport { MenuFieldNavigationController } from '../shared/menu-field/menu-field-navigation-controller.js';\nimport { normalizeText } from '../shared/normalize-text.js';\n\nimport './highlight.js';\n\nexport interface Data {\n label: string;\n value: any;\n}\n\n@customElement('u-typeahead')\nexport class UmTypeahead extends LitElement {\n static readonly formAssociated = true;\n\n static override styles = styles;\n\n #targetId: string | undefined;\n\n #connected = false;\n private target: HTMLElement & {autocomplete: AutoFill; input?: HTMLInputElement; container?: HTMLElement; value: string} | null = null;\n #documentMutationObserver: MutationObserver | null = null;\n #navigationController = new MenuFieldNavigationController(this);\n #termNormalized: string = '';\n #debounceTimeout: number | null = null;\n #value: any;\n readonly #elementInternals: ElementInternals;\n\n // @ts-ignore\n @state() results: Data[];\n\n @property() source: (any[] | ((term: string) => Promise<any[]>)) | undefined;\n formatter: ((value: any) => string) | undefined;\n template: ((term: string, value: any) => string) | undefined;\n\n @property({type: Number, reflect: true}) debounce = 300;\n @property({type: Number, reflect: true}) limit = 10;\n @property({type: Number, reflect: true}) minLength = 2;\n @property({type: Boolean, attribute: 'open-on-focus', reflect: true}) openOnFocus = false;\n @property({type: Boolean, reflect: true}) editable = false;\n @property({reflect: true}) autocomplete: AutoFill = 'off';\n @property({reflect: true}) override spellcheck = false;\n\n get form(): HTMLFormElement | null {\n return this.#elementInternals.form;\n }\n\n get value(): any {\n return this.#value;\n }\n set value(value: any) {\n this.#value = value;\n this.#elementInternals.setFormValue(value);\n\n if (this.#connected) {\n this.#setValueOnTarget();\n }\n }\n\n override focus() {\n this.target?.focus();\n }\n\n clear() {\n if (!this.target) {\n return;\n }\n\n this.#termNormalized = '';\n this.setTargetValue('');\n }\n\n @property({reflect: true, attribute: \"target-id\"})\n get targetId(): string | undefined {\n return this.#targetId;\n }\n set targetId(value: string | undefined) {\n this.#targetId = value;\n\n if (this.#connected) {\n this.#attach();\n }\n }\n\n @query('u-menu') menu!: UmMenu;\n @queryAll('u-menu-item') menuItems!: UmMenuItem[];\n\n constructor() {\n super();\n this.#elementInternals = this.attachInternals();\n }\n\n override attributeChangedCallback(name: string, _old: string | null, value: string | null) {\n super.attributeChangedCallback(name, _old, value);\n\n if (name === 'autocomplete') {\n this.target!.autocomplete = <AutoFill>value;\n }\n\n if (name === 'spellcheck') {\n this.target!.spellcheck = value === 'true';\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.#connected = true;\n this.#attach();\n this.#documentMutationObserver = new MutationObserver(() => this.#attach())\n this.#documentMutationObserver.observe(document, {attributes: true, childList: true});\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.#connected = false;\n this.#detach();\n this.#documentMutationObserver!.disconnect();\n this.#documentMutationObserver = null;\n }\n\n #attach() {\n if (!this.targetId) {\n this.#detach();\n return;\n }\n\n const newTarget = document.getElementById(this.targetId) as HTMLInputElement;\n\n if (newTarget === this.target) {\n return;\n }\n\n this.#detach();\n\n if (!newTarget) {\n return;\n }\n\n // @ts-ignore\n this.target = newTarget;\n newTarget.role = \"combobox\";\n newTarget.autocomplete = this.autocomplete;\n newTarget.spellcheck = this.spellcheck;\n newTarget.autocapitalize = 'off';\n\n newTarget.addEventListener('click', this.#handleClick);\n newTarget.addEventListener('input', this.#handleInput);\n this.#navigationController.attach(newTarget);\n newTarget.addEventListener('focus', this.#handleFocus);\n\n if (this.value) {\n this.#setValueOnTarget();\n }\n }\n\n #detach() {\n this.target?.removeEventListener('click', this.#handleClick);\n this.target?.removeEventListener('input', this.#handleInput);\n this.#navigationController.detach();\n this.target?.removeEventListener('focus', this.#handleFocus);\n }\n\n #handleFocus = async () => {\n if (this.openOnFocus) {\n await this.#updateResults();\n }\n }\n\n #handleInput = () => {\n\n if (this.#debounceTimeout) {\n clearTimeout(this.#debounceTimeout);\n }\n\n this.#setValueAndDispatchEvents(this.editable ? this.getTargetValue() : null, true);\n\n this.#debounceTimeout = setTimeout(async () => await this.#updateResults(true), this.debounce);\n }\n\n #getItemClickHandler(data: Data) {\n return () => {\n const selectedEvent = new CustomEvent('selected', {\n cancelable: true,\n detail: data.value\n });\n\n this.dispatchEvent(selectedEvent);\n\n if (selectedEvent.defaultPrevented) {\n return;\n }\n\n this.#setValueAndDispatchEvents(data.value);\n }\n }\n\n #setValueAndDispatchEvents(value: any, direct = false) {\n\n if (!direct) {\n this.value = value;\n } else {\n this.#value = value;\n this.#elementInternals.setFormValue(value);\n }\n\n this.dispatchEvent(new InputEvent('input', {bubbles: true, composed: true}));\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n\n protected override render(): HTMLTemplateResult {\n\n if (!this.results?.length) {\n return html``;\n }\n\n setTimeout(() => {\n this.menu.anchorElement = this.getMenuAnchor();\n this.menu.open = true;\n });\n\n return html`\n <u-menu manualFocus anchor-corner=\"auto-start\">\n ${this.results\n .map(result => {\n const content = this.template\n ? unsafeHTML(this.template(this.#termNormalized, result.value))\n : html`<u-highlight .term=${this.#termNormalized} .result=${result.label}></u-highlight>`;\n \n return html`\n <u-menu-item @click=${this.#getItemClickHandler(result)} tabindex=\"-1\">${content}</u-menu-item>`;\n })}\n </u-menu>\n `;\n }\n\n async #updateResults(lazy = false) {\n\n const term = this.getTargetValue();\n\n const termNormalized = normalizeText(term).toLowerCase();\n\n if (lazy && termNormalized === this.#termNormalized && this.menu?.open === true) {\n return;\n }\n\n this.#termNormalized = termNormalized;\n\n if (termNormalized.length < this.minLength) {\n this.results = [];\n return;\n }\n\n this.results = await this.#getData();\n this.results = this.results.slice(0, this.limit || this.results.length);\n }\n\n async #getData(): Promise<Data[]> {\n if (!this.source) {\n return [];\n }\n\n let values: any[]\n\n let filter = false;\n\n if (this.source instanceof Array) {\n values = this.source;\n filter = true;\n } else {\n const source = this.source as ((term: string) => Promise<any[]>);\n values = await source(this.#termNormalized);\n }\n\n const result = values\n .map(source => ({\n label: this.formatter\n ? this.formatter(source)\n : source.toString(),\n value: source\n }));\n\n if (!filter) {\n return result;\n }\n\n return result\n .filter(t => normalizeText(t.label)\n .toLowerCase()\n .includes(this.#termNormalized))\n }\n\n #setValueOnTarget() {\n if (!this.target) {\n return;\n }\n\n const textValue = this.getTextValue();\n this.#termNormalized = normalizeText(textValue)?.toLowerCase();\n\n if (this.target.tagName === 'U-TEXT-FIELD') {\n this.target.value = textValue;\n return;\n }\n\n if (this.target.input) {\n this.target.input.value = textValue;\n return;\n }\n \n this.target.value = textValue;\n }\n\n private getTargetValue(): string {\n return this.target!.input?.value ?? this.target!.value;\n }\n\n private setTargetValue(value: string): void {\n const targetInput = this.target?.input ?? this.target;\n\n if (targetInput) {\n targetInput.value = value;\n }\n }\n\n private getMenuAnchor() {\n if (!this.target) {\n return null;\n }\n\n if (this.target.tagName === 'U-CHIP-FIELD') {\n return this.target.input;\n }\n\n if (this.target.tagName === 'U-TEXT-FIELD') {\n return this.target.container;\n }\n\n return this.target;\n }\n\n private getTextValue(): string {\n if (!this.value) {\n return '';\n }\n\n return this.formatter\n ? this.formatter(this.value)\n : this.value\n }\n\n #handleClick(e: Event) {\n e.stopPropagation();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-typeahead': UmTypeahead;\n }\n}\n"]}