@universal-material/web 3.0.36 → 3.0.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/button/button-base.d.ts.map +1 -1
- package/button/button-base.js.map +1 -1
- package/button/button-set.d.ts +3 -8
- package/button/button-set.d.ts.map +1 -1
- package/button/button-set.js +3 -13
- package/button/button-set.js.map +1 -1
- package/button/button.d.ts.map +1 -1
- package/button/button.js +2 -3
- package/button/button.js.map +1 -1
- package/button/button.styles.d.ts.map +1 -1
- package/button/button.styles.js +98 -0
- package/button/button.styles.js.map +1 -1
- package/button/fab.d.ts.map +1 -1
- package/button/fab.js +2 -3
- package/button/fab.js.map +1 -1
- package/button/fab.styles.d.ts.map +1 -1
- package/button/fab.styles.js +98 -0
- package/button/fab.styles.js.map +1 -1
- package/button/icon-button.d.ts +2 -3
- package/button/icon-button.d.ts.map +1 -1
- package/button/icon-button.js +6 -6
- package/button/icon-button.js.map +1 -1
- package/button/icon-button.styles.d.ts.map +1 -1
- package/button/icon-button.styles.js +98 -0
- package/button/icon-button.styles.js.map +1 -1
- package/checkbox/checkbox-list-item.d.ts +1 -1
- package/checkbox/checkbox.d.ts.map +1 -1
- package/checkbox/checkbox.js +1 -1
- package/checkbox/checkbox.js.map +1 -1
- package/chip/chip-set.d.ts +10 -0
- package/chip/chip-set.d.ts.map +1 -0
- package/chip/chip-set.js +17 -0
- package/chip/chip-set.js.map +1 -0
- package/{shared/button-wrapper.styles.d.ts → chip/chip-set.styles.d.ts} +1 -1
- package/chip/chip-set.styles.d.ts.map +1 -0
- package/chip/chip-set.styles.js +26 -0
- package/chip/chip-set.styles.js.map +1 -0
- package/chip/chip.d.ts +56 -0
- package/chip/chip.d.ts.map +1 -0
- package/chip/chip.js +160 -0
- package/chip/chip.js.map +1 -0
- package/chip/chip.styles.d.ts +2 -0
- package/chip/chip.styles.d.ts.map +1 -0
- package/chip/chip.styles.js +224 -0
- package/chip/chip.styles.js.map +1 -0
- package/custom-elements.json +4507 -3068
- package/field/field.d.ts.map +1 -1
- package/field/field.js +6 -2
- package/field/field.js.map +1 -1
- package/field/field.styles.d.ts.map +1 -1
- package/field/field.styles.js +32 -19
- package/field/field.styles.js.map +1 -1
- package/index.d.ts +8 -0
- package/index.d.ts.map +1 -1
- package/index.js +8 -0
- package/index.js.map +1 -1
- package/menu/menu-item.d.ts.map +1 -1
- package/menu/menu-item.js +1 -3
- package/menu/menu-item.js.map +1 -1
- package/menu/menu-item.styles.d.ts.map +1 -1
- package/menu/menu-item.styles.js +85 -0
- package/menu/menu-item.styles.js.map +1 -1
- package/menu/menu.d.ts +1 -0
- package/menu/menu.d.ts.map +1 -1
- package/menu/menu.js +12 -1
- package/menu/menu.js.map +1 -1
- package/navigation/drawer-item.d.ts.map +1 -1
- package/navigation/drawer-item.js +1 -3
- package/navigation/drawer-item.js.map +1 -1
- package/navigation/drawer-item.styles.d.ts.map +1 -1
- package/navigation/drawer-item.styles.js +85 -0
- package/navigation/drawer-item.styles.js.map +1 -1
- package/navigation/side-navigation.d.ts.map +1 -1
- package/navigation/side-navigation.js +1 -1
- package/navigation/side-navigation.js.map +1 -1
- package/package.json +1 -1
- package/radio/radio-list-item.d.ts +1 -1
- package/radio/radio.d.ts.map +1 -1
- package/radio/radio.js +1 -1
- package/radio/radio.js.map +1 -1
- package/shared/button-wrapper.d.ts +4 -4
- package/shared/button-wrapper.d.ts.map +1 -1
- package/shared/button-wrapper.js +29 -17
- package/shared/button-wrapper.js.map +1 -1
- package/shared/mixin-attribute-properties.d.ts +4 -0
- package/shared/mixin-attribute-properties.d.ts.map +1 -0
- package/shared/mixin-attribute-properties.js +27 -0
- package/shared/mixin-attribute-properties.js.map +1 -0
- package/shared/mixin.d.ts +3 -0
- package/shared/mixin.d.ts.map +1 -0
- package/shared/mixin.js +2 -0
- package/shared/mixin.js.map +1 -0
- package/shared/normalize-text.d.ts +2 -0
- package/shared/normalize-text.d.ts.map +1 -0
- package/shared/normalize-text.js +9 -0
- package/shared/normalize-text.js.map +1 -0
- package/shared/redispatch-event.d.ts +2 -0
- package/shared/redispatch-event.d.ts.map +1 -0
- package/shared/redispatch-event.js +14 -0
- package/shared/redispatch-event.js.map +1 -0
- package/shared/selection-control/selection-control-list-item.d.ts +2 -3
- package/shared/selection-control/selection-control-list-item.d.ts.map +1 -1
- package/shared/selection-control/selection-control-list-item.js.map +1 -1
- package/shared/sets/set-base.d.ts +9 -0
- package/shared/sets/set-base.d.ts.map +1 -0
- package/shared/sets/set-base.js +25 -0
- package/shared/sets/set-base.js.map +1 -0
- package/switch/switch-list-item.d.ts +1 -1
- package/switch/switch.d.ts.map +1 -1
- package/switch/switch.js +1 -1
- package/switch/switch.js.map +1 -1
- package/text-field/text-field.d.ts +14 -1
- package/text-field/text-field.d.ts.map +1 -1
- package/text-field/text-field.js +67 -7
- package/text-field/text-field.js.map +1 -1
- package/text-field/text-field.styles.d.ts.map +1 -1
- package/text-field/text-field.styles.js +19 -0
- package/text-field/text-field.styles.js.map +1 -1
- package/typeahead/highlight.d.ts +24 -0
- package/typeahead/highlight.d.ts.map +1 -0
- package/typeahead/highlight.js +95 -0
- package/typeahead/highlight.js.map +1 -0
- package/typeahead/highlight.styles.d.ts +2 -0
- package/typeahead/highlight.styles.d.ts.map +1 -0
- package/typeahead/highlight.styles.js +5 -0
- package/typeahead/highlight.styles.js.map +1 -0
- package/typeahead/typeahead.d.ts +37 -0
- package/typeahead/typeahead.d.ts.map +1 -0
- package/typeahead/typeahead.js +241 -0
- package/typeahead/typeahead.js.map +1 -0
- package/typeahead/typeahead.styles.d.ts +2 -0
- package/typeahead/typeahead.styles.d.ts.map +1 -0
- package/typeahead/typeahead.styles.js +7 -0
- package/typeahead/typeahead.styles.js.map +1 -0
- package/shared/button-wrapper.styles.d.ts.map +0 -1
- package/shared/button-wrapper.styles.js +0 -93
- package/shared/button-wrapper.styles.js.map +0 -1
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
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
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
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_for, _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
|
+
import { html, LitElement } from 'lit';
|
|
20
|
+
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
21
|
+
import { styles } from './typeahead.styles.js';
|
|
22
|
+
import { normalizeText } from '../shared/normalize-text.js';
|
|
23
|
+
import './highlight.js';
|
|
24
|
+
let UmTypeahead = class UmTypeahead extends LitElement {
|
|
25
|
+
get form() {
|
|
26
|
+
return __classPrivateFieldGet(this, _UmTypeahead_elementInternals, "f").form;
|
|
27
|
+
}
|
|
28
|
+
get value() {
|
|
29
|
+
return __classPrivateFieldGet(this, _UmTypeahead_value, "f");
|
|
30
|
+
}
|
|
31
|
+
set value(value) {
|
|
32
|
+
__classPrivateFieldSet(this, _UmTypeahead_value, value, "f");
|
|
33
|
+
__classPrivateFieldGet(this, _UmTypeahead_elementInternals, "f").setFormValue(value);
|
|
34
|
+
if (__classPrivateFieldGet(this, _UmTypeahead_connected, "f")) {
|
|
35
|
+
__classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_setValueOnTarget).call(this);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
get for() {
|
|
39
|
+
return __classPrivateFieldGet(this, _UmTypeahead_for, "f");
|
|
40
|
+
}
|
|
41
|
+
set for(value) {
|
|
42
|
+
__classPrivateFieldSet(this, _UmTypeahead_for, value, "f");
|
|
43
|
+
if (__classPrivateFieldGet(this, _UmTypeahead_connected, "f")) {
|
|
44
|
+
__classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_attach).call(this);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
constructor() {
|
|
48
|
+
super();
|
|
49
|
+
_UmTypeahead_instances.add(this);
|
|
50
|
+
_UmTypeahead_for.set(this, void 0);
|
|
51
|
+
_UmTypeahead_connected.set(this, false);
|
|
52
|
+
this.target = null;
|
|
53
|
+
_UmTypeahead_documentMutationObserver.set(this, null);
|
|
54
|
+
_UmTypeahead_termNormalized.set(this, '');
|
|
55
|
+
_UmTypeahead_debounceTimeout.set(this, null);
|
|
56
|
+
_UmTypeahead_value.set(this, void 0);
|
|
57
|
+
_UmTypeahead_elementInternals.set(this, void 0);
|
|
58
|
+
this.debounce = 300;
|
|
59
|
+
this.limit = 10;
|
|
60
|
+
this.minLength = 2;
|
|
61
|
+
this.openOnFocus = false;
|
|
62
|
+
this.editable = false;
|
|
63
|
+
_UmTypeahead_handleFocus.set(this, async () => {
|
|
64
|
+
if (this.openOnFocus) {
|
|
65
|
+
await __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_updateResults).call(this);
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
_UmTypeahead_handleInput.set(this, () => {
|
|
69
|
+
if (__classPrivateFieldGet(this, _UmTypeahead_debounceTimeout, "f")) {
|
|
70
|
+
clearTimeout(__classPrivateFieldGet(this, _UmTypeahead_debounceTimeout, "f"));
|
|
71
|
+
}
|
|
72
|
+
__classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_setValueAndDispatchEvents).call(this, this.editable ? this.target.value : null, true);
|
|
73
|
+
__classPrivateFieldSet(this, _UmTypeahead_debounceTimeout, setTimeout(async () => await __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_updateResults).call(this, true), this.debounce), "f");
|
|
74
|
+
});
|
|
75
|
+
__classPrivateFieldSet(this, _UmTypeahead_elementInternals, this.attachInternals(), "f");
|
|
76
|
+
}
|
|
77
|
+
connectedCallback() {
|
|
78
|
+
super.connectedCallback();
|
|
79
|
+
__classPrivateFieldSet(this, _UmTypeahead_connected, true, "f");
|
|
80
|
+
__classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_attach).call(this);
|
|
81
|
+
__classPrivateFieldSet(this, _UmTypeahead_documentMutationObserver, new MutationObserver(() => __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_attach).call(this)), "f");
|
|
82
|
+
__classPrivateFieldGet(this, _UmTypeahead_documentMutationObserver, "f").observe(document, { attributes: true, childList: true });
|
|
83
|
+
}
|
|
84
|
+
disconnectedCallback() {
|
|
85
|
+
super.disconnectedCallback();
|
|
86
|
+
__classPrivateFieldSet(this, _UmTypeahead_connected, false, "f");
|
|
87
|
+
__classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_detach).call(this);
|
|
88
|
+
__classPrivateFieldGet(this, _UmTypeahead_documentMutationObserver, "f").disconnect();
|
|
89
|
+
__classPrivateFieldSet(this, _UmTypeahead_documentMutationObserver, null, "f");
|
|
90
|
+
}
|
|
91
|
+
render() {
|
|
92
|
+
console.log('render');
|
|
93
|
+
if (!this.results?.length) {
|
|
94
|
+
return html ``;
|
|
95
|
+
}
|
|
96
|
+
setTimeout(() => this.menu.open = true, 200);
|
|
97
|
+
return html `
|
|
98
|
+
<u-menu manualFocus>
|
|
99
|
+
${this.results
|
|
100
|
+
.map(result => html `
|
|
101
|
+
<u-menu-item @click=${__classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_getItemClickHandler).call(this, result)}>
|
|
102
|
+
<u-highlight .term=${__classPrivateFieldGet(this, _UmTypeahead_termNormalized, "f")} .result=${result.label}></u-highlight>
|
|
103
|
+
</u-menu-item>`)}
|
|
104
|
+
</u-menu>
|
|
105
|
+
`;
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
_UmTypeahead_for = new WeakMap();
|
|
109
|
+
_UmTypeahead_connected = new WeakMap();
|
|
110
|
+
_UmTypeahead_documentMutationObserver = new WeakMap();
|
|
111
|
+
_UmTypeahead_termNormalized = new WeakMap();
|
|
112
|
+
_UmTypeahead_debounceTimeout = new WeakMap();
|
|
113
|
+
_UmTypeahead_value = new WeakMap();
|
|
114
|
+
_UmTypeahead_elementInternals = new WeakMap();
|
|
115
|
+
_UmTypeahead_handleFocus = new WeakMap();
|
|
116
|
+
_UmTypeahead_handleInput = new WeakMap();
|
|
117
|
+
_UmTypeahead_instances = new WeakSet();
|
|
118
|
+
_UmTypeahead_attach = function _UmTypeahead_attach() {
|
|
119
|
+
if (!this.for) {
|
|
120
|
+
__classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_detach).call(this);
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
const newTarget = document.getElementById(this.for);
|
|
124
|
+
if (newTarget === this.target) {
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
__classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_detach).call(this);
|
|
128
|
+
if (!newTarget) {
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
// @ts-ignore
|
|
132
|
+
this.target = newTarget;
|
|
133
|
+
newTarget.addEventListener('input', __classPrivateFieldGet(this, _UmTypeahead_handleInput, "f"));
|
|
134
|
+
newTarget.addEventListener('focus', __classPrivateFieldGet(this, _UmTypeahead_handleFocus, "f"));
|
|
135
|
+
if (this.value) {
|
|
136
|
+
__classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_setValueOnTarget).call(this);
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
_UmTypeahead_detach = function _UmTypeahead_detach() {
|
|
140
|
+
this.target?.removeEventListener('input', __classPrivateFieldGet(this, _UmTypeahead_handleInput, "f"));
|
|
141
|
+
this.target?.removeEventListener('focus', __classPrivateFieldGet(this, _UmTypeahead_handleFocus, "f"));
|
|
142
|
+
};
|
|
143
|
+
_UmTypeahead_getItemClickHandler = function _UmTypeahead_getItemClickHandler(data) {
|
|
144
|
+
return () => __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_setValueAndDispatchEvents).call(this, data.value);
|
|
145
|
+
};
|
|
146
|
+
_UmTypeahead_setValueAndDispatchEvents = function _UmTypeahead_setValueAndDispatchEvents(value, direct = false) {
|
|
147
|
+
if (!direct) {
|
|
148
|
+
this.value = value;
|
|
149
|
+
}
|
|
150
|
+
else {
|
|
151
|
+
__classPrivateFieldSet(this, _UmTypeahead_value, value, "f");
|
|
152
|
+
__classPrivateFieldGet(this, _UmTypeahead_elementInternals, "f").setFormValue(value);
|
|
153
|
+
}
|
|
154
|
+
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
|
155
|
+
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
156
|
+
};
|
|
157
|
+
_UmTypeahead_updateResults = async function _UmTypeahead_updateResults(lazy = false) {
|
|
158
|
+
const term = this.target.value;
|
|
159
|
+
const termNormalized = normalizeText(term).toLowerCase();
|
|
160
|
+
if (lazy && termNormalized === __classPrivateFieldGet(this, _UmTypeahead_termNormalized, "f")) {
|
|
161
|
+
return;
|
|
162
|
+
}
|
|
163
|
+
__classPrivateFieldSet(this, _UmTypeahead_termNormalized, termNormalized, "f");
|
|
164
|
+
if (termNormalized.length < this.minLength) {
|
|
165
|
+
this.results = [];
|
|
166
|
+
return;
|
|
167
|
+
}
|
|
168
|
+
const data = await __classPrivateFieldGet(this, _UmTypeahead_instances, "m", _UmTypeahead_getData).call(this);
|
|
169
|
+
this.results = data
|
|
170
|
+
.filter(t => normalizeText(t.label)
|
|
171
|
+
.toLowerCase()
|
|
172
|
+
.includes(termNormalized));
|
|
173
|
+
this.results = this.results.slice(0, this.limit || this.results.length);
|
|
174
|
+
};
|
|
175
|
+
_UmTypeahead_getData = async function _UmTypeahead_getData() {
|
|
176
|
+
if (!this.source) {
|
|
177
|
+
return [];
|
|
178
|
+
}
|
|
179
|
+
let values;
|
|
180
|
+
if (this.source instanceof Array) {
|
|
181
|
+
values = this.source;
|
|
182
|
+
}
|
|
183
|
+
else {
|
|
184
|
+
const source = this.source;
|
|
185
|
+
values = await source();
|
|
186
|
+
}
|
|
187
|
+
return values
|
|
188
|
+
.map(source => ({
|
|
189
|
+
label: this.formatter
|
|
190
|
+
? this.formatter(source)
|
|
191
|
+
: source.toString(),
|
|
192
|
+
value: source
|
|
193
|
+
}));
|
|
194
|
+
};
|
|
195
|
+
_UmTypeahead_setValueOnTarget = function _UmTypeahead_setValueOnTarget() {
|
|
196
|
+
if (!this.target) {
|
|
197
|
+
return;
|
|
198
|
+
}
|
|
199
|
+
const value = this.formatter
|
|
200
|
+
? this.formatter(this.value)
|
|
201
|
+
: this.value;
|
|
202
|
+
this.target.value = value;
|
|
203
|
+
__classPrivateFieldSet(this, _UmTypeahead_termNormalized, normalizeText(value)?.toLowerCase(), "f");
|
|
204
|
+
};
|
|
205
|
+
UmTypeahead.formAssociated = true;
|
|
206
|
+
UmTypeahead.styles = styles;
|
|
207
|
+
__decorate([
|
|
208
|
+
state()
|
|
209
|
+
], UmTypeahead.prototype, "results", void 0);
|
|
210
|
+
__decorate([
|
|
211
|
+
property()
|
|
212
|
+
], UmTypeahead.prototype, "source", void 0);
|
|
213
|
+
__decorate([
|
|
214
|
+
property()
|
|
215
|
+
], UmTypeahead.prototype, "formatter", void 0);
|
|
216
|
+
__decorate([
|
|
217
|
+
property({ type: Number, reflect: true })
|
|
218
|
+
], UmTypeahead.prototype, "debounce", void 0);
|
|
219
|
+
__decorate([
|
|
220
|
+
property({ type: Number, reflect: true })
|
|
221
|
+
], UmTypeahead.prototype, "limit", void 0);
|
|
222
|
+
__decorate([
|
|
223
|
+
property({ type: Number, reflect: true })
|
|
224
|
+
], UmTypeahead.prototype, "minLength", void 0);
|
|
225
|
+
__decorate([
|
|
226
|
+
property({ type: Boolean, attribute: 'open-on-focus', reflect: true })
|
|
227
|
+
], UmTypeahead.prototype, "openOnFocus", void 0);
|
|
228
|
+
__decorate([
|
|
229
|
+
property({ type: Boolean, reflect: true })
|
|
230
|
+
], UmTypeahead.prototype, "editable", void 0);
|
|
231
|
+
__decorate([
|
|
232
|
+
property({ reflect: true })
|
|
233
|
+
], UmTypeahead.prototype, "for", null);
|
|
234
|
+
__decorate([
|
|
235
|
+
query('u-menu')
|
|
236
|
+
], UmTypeahead.prototype, "menu", void 0);
|
|
237
|
+
UmTypeahead = __decorate([
|
|
238
|
+
customElement('u-typeahead')
|
|
239
|
+
], UmTypeahead);
|
|
240
|
+
export { UmTypeahead };
|
|
241
|
+
//# sourceMappingURL=typeahead.js.map
|
|
@@ -0,0 +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 { customElement, property, query, state } from 'lit/decorators.js';\n\nimport { styles } from './typeahead.styles.js';\n\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 #for: string | undefined;\n\n #connected = false;\n private target: 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[] | (() => Promise<any[]>)) | undefined;\n @property() formatter: ((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 @property({reflect: true})\n get for(): string | undefined {\n return this.#for;\n }\n set for(value: string | undefined) {\n this.#for = value;\n\n if (this.#connected) {\n this.#attach();\n }\n }\n\n @query('u-menu') menu!: UmMenu;\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.for) {\n this.#detach();\n return;\n }\n\n const newTarget = document.getElementById(this.for) 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('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('focus', this.#handleFocus);\n }\n\n #handleFocus = async () => {\n if (this.openOnFocus) {\n await this.#updateResults();\n }\n }\n\n #handleInput = () => {\n if (this.#debounceTimeout) {\n clearTimeout(this.#debounceTimeout);\n }\n\n this.#setValueAndDispatchEvents(this.editable ? this.target!.value : null, true);\n\n this.#debounceTimeout = setTimeout(async () => await this.#updateResults(true), this.debounce);\n }\n\n #getItemClickHandler(data: Data) {\n return () => this.#setValueAndDispatchEvents(data.value)\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 console.log('render');\n\n if (!this.results?.length) {\n return html``;\n }\n\n setTimeout(() => this.menu.open = true, 200);\n return html`\n <u-menu manualFocus>\n ${this.results\n .map(result => html`\n <u-menu-item @click=${this.#getItemClickHandler(result)}>\n <u-highlight .term=${this.#termNormalized} .result=${result.label}></u-highlight>\n </u-menu-item>`)}\n </u-menu>\n `;\n }\n\n async #updateResults(lazy = false) {\n\n const term = this.target!.value;\n\n const termNormalized = normalizeText(term).toLowerCase();\n\n if (lazy && termNormalized === this.#termNormalized) {\n return;\n }\n\n this.#termNormalized = termNormalized;\n\n if (termNormalized.length < this.minLength) {\n this.results = [];\n return;\n }\n\n const data = await this.#getData();\n this.results = data\n .filter(t => normalizeText(t.label)\n .toLowerCase()\n .includes(termNormalized));\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 if (this.source instanceof Array) {\n values = this.source;\n } else {\n const source = this.source as (() => Promise<any[]>);\n values = await source();\n }\n\n return values\n .map(source => ({\n label: this.formatter\n ? this.formatter(source)\n : source.toString(),\n value: source\n }));\n }\n\n #setValueOnTarget() {\n if (!this.target) {\n return;\n }\n\n const value = this.formatter\n ? this.formatter(this.value)\n : this.value;\n\n this.target.value = value;\n\n this.#termNormalized = normalizeText(value)?.toLowerCase();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-typeahead': UmTypeahead;\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"typeahead.styles.d.ts","sourceRoot":"","sources":["../../src/typeahead/typeahead.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAIlB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"typeahead.styles.js","sourceRoot":"","sources":["../../src/typeahead/typeahead.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;CAIzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n u-menu-item {\n font-weight: var(--u-typeahead-item-font-weight, var(--u-font-weight-regular, 400));\n }\n`;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button-wrapper.styles.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA0FlB,CAAC"}
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
export const styles = css `
|
|
3
|
-
:host {
|
|
4
|
-
--_color-primary: var(--u-color-primary, rgb(103, 80, 164));
|
|
5
|
-
-webkit-tap-highlight-color: transparent;
|
|
6
|
-
--u-elevation-level: 0;
|
|
7
|
-
position: relative;
|
|
8
|
-
display: inline-block;
|
|
9
|
-
font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
10
|
-
appearance: none !important;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:host([disabled]) {
|
|
14
|
-
--u-elevation-level: 0 !important;
|
|
15
|
-
background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;
|
|
16
|
-
color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
:host([disabled]) .button {
|
|
20
|
-
cursor: default;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
* {
|
|
24
|
-
color: inherit;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
u-elevation {
|
|
28
|
-
z-index: -1;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.button {
|
|
32
|
-
cursor: pointer;
|
|
33
|
-
position: absolute;
|
|
34
|
-
inset-inline-start: 0;
|
|
35
|
-
inset-block-start: 0;
|
|
36
|
-
width: 100%;
|
|
37
|
-
height: 100%;
|
|
38
|
-
font-family: inherit;
|
|
39
|
-
border-radius: inherit;
|
|
40
|
-
color: inherit;
|
|
41
|
-
border: none;
|
|
42
|
-
margin: 0;
|
|
43
|
-
padding: 0;
|
|
44
|
-
text-align: center;
|
|
45
|
-
white-space: nowrap;
|
|
46
|
-
background: transparent;
|
|
47
|
-
user-select: none;
|
|
48
|
-
text-decoration: none;
|
|
49
|
-
outline: 0;
|
|
50
|
-
z-index: 0;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.content {
|
|
54
|
-
display: inline-flex;
|
|
55
|
-
align-items: center;
|
|
56
|
-
justify-content: center;
|
|
57
|
-
white-space: nowrap;
|
|
58
|
-
width: 100%;
|
|
59
|
-
height: 100%;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.button:focus-visible {
|
|
63
|
-
animation: offset-pulse 400ms ease;
|
|
64
|
-
animation-fill-mode: forwards;
|
|
65
|
-
outline-offset: 2px;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.icon {
|
|
69
|
-
display: flex;
|
|
70
|
-
justify-content: center;
|
|
71
|
-
align-items: center;
|
|
72
|
-
width: 1em;
|
|
73
|
-
height: 1em;
|
|
74
|
-
line-height: 1em;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
::slotted([slot=icon]) {
|
|
78
|
-
display: inline-block;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
@keyframes offset-pulse {
|
|
82
|
-
0% {
|
|
83
|
-
outline: 4px solid var(--_color-primary);
|
|
84
|
-
}
|
|
85
|
-
50% {
|
|
86
|
-
outline: 8px solid var(--_color-primary);
|
|
87
|
-
}
|
|
88
|
-
100% {
|
|
89
|
-
outline: 4px solid var(--_color-primary);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
`;
|
|
93
|
-
//# sourceMappingURL=button-wrapper.styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button-wrapper.styles.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n -webkit-tap-highlight-color: transparent;\n --u-elevation-level: 0;\n position: relative;\n display: inline-block;\n font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n appearance: none !important;\n }\n\n :host([disabled]) {\n --u-elevation-level: 0 !important;\n background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;\n color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;\n }\n\n :host([disabled]) .button {\n cursor: default;\n }\n\n * {\n color: inherit;\n }\n\n u-elevation {\n z-index: -1;\n }\n\n .button {\n cursor: pointer;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n width: 100%;\n height: 100%;\n font-family: inherit;\n border-radius: inherit;\n color: inherit;\n border: none;\n margin: 0;\n padding: 0;\n text-align: center;\n white-space: nowrap;\n background: transparent;\n user-select: none;\n text-decoration: none;\n outline: 0;\n z-index: 0;\n }\n\n .content {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n width: 100%;\n height: 100%;\n }\n\n .button:focus-visible {\n animation: offset-pulse 400ms ease;\n animation-fill-mode: forwards;\n outline-offset: 2px;\n }\n\n .icon {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 1em;\n height: 1em;\n line-height: 1em;\n }\n\n ::slotted([slot=icon]) {\n display: inline-block;\n }\n\n @keyframes offset-pulse {\n 0% {\n outline: 4px solid var(--_color-primary);\n }\n 50% {\n outline: 8px solid var(--_color-primary);\n }\n 100% {\n outline: 4px solid var(--_color-primary);\n }\n }\n`;\n"]}
|