-
Notifications
You must be signed in to change notification settings - Fork 5
/
Search.js
77 lines (70 loc) · 1.88 KB
/
Search.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import TopAppBar from './TopAppBar.js';
/* @implements {HTMLSelectElement} */
export default TopAppBar
.extend()
.undefine('headline')
// .undefine('_headlineOpacity')
.undefine('size')
.undefine('_headlineStyle')
.observe({
placeholder: { type: 'string', empty: 'Search' },
color: { empty: 'surface-container-high' },
shapeStyle: { empty: 'full' },
kbdNav: { empty: 'false' },
})
.define({
/** @return {HTMLInputElement} */
input() { return this.refs.input; },
value: {
get() { return this.refs.input.value; },
set(value) {
this.refs.input.value = value;
},
},
})
.html`
<mdw-input id=input placeholder={placeholder} aria-label={placeholder}></mdw-input>
`
.css`
:host {
--mdw-bg: var(--mdw-color__surface-container-high);
--mdw-shape__size: var(--mdw-shape__full);
inset-block-start: 8px;
display: flex;
align-items: center;
gap: 16px;
margin-block: 16px;
padding-inline: 16px;
background-color: rgb(var(--mdw-bg));
}
#leading:not([slotted]),
#trailing:not([slotted]) {
display: none;
}
#input {
--mdw-state__hovered-opacity: 0;
flex: 1;
}
`
.methods({
/** @param {{currentTarget:HTMLSlotElement}} event */
onSlotChange({ currentTarget }) {
currentTarget.toggleAttribute('slotted', currentTarget.assignedNodes().length >= 0);
},
})
.childEvents({
leading: { slotchange: 'onSlotChange' },
trailing: { slotchange: 'onSlotChange' },
input: {
change(event) {
// Change events are not composed. Rethrow.
event.stopPropagation();
this.dispatchEvent(new Event('change', { bubbles: true }));
},
},
})
.recompose(({ refs: { companion, headline, input } }) => {
companion.remove();
headline.replaceWith(input);
})
.autoRegister('mdw-search');