89 lines
1.9 KiB
JavaScript
89 lines
1.9 KiB
JavaScript
import { css, html } from '@lion/core';
|
|
import { LionOption } from '@lion/listbox';
|
|
import { LionCombobox } from '../../src/LionCombobox.js';
|
|
import { MdFieldMixin } from './MdFieldMixin.js';
|
|
import './style/md-ripple.js';
|
|
import './style/load-roboto.js';
|
|
|
|
// TODO: insert ink wc here
|
|
export class MdOption extends LionOption {
|
|
static get styles() {
|
|
return [
|
|
super.styles,
|
|
css`
|
|
:host {
|
|
position: relative;
|
|
padding: 8px;
|
|
}
|
|
|
|
:host([focused]) {
|
|
background: lightgray;
|
|
}
|
|
|
|
:host([active]) {
|
|
color: #1867c0 !important;
|
|
caret-color: #1867c0 !important;
|
|
}
|
|
|
|
:host ::slotted(.md-highlight) {
|
|
color: rgba(0, 0, 0, 0.38);
|
|
background: #eee;
|
|
}
|
|
`,
|
|
];
|
|
}
|
|
|
|
/**
|
|
* @override
|
|
* @param {string} matchingString
|
|
*/
|
|
onFilterMatch(matchingString) {
|
|
const { innerHTML } = this;
|
|
this.__originalInnerHTML = innerHTML;
|
|
this.innerHTML = innerHTML.replace(
|
|
new RegExp(`(${matchingString})`, 'i'),
|
|
`<span class="md-highlight">$1</span>`,
|
|
);
|
|
this.style.display = '';
|
|
}
|
|
|
|
/**
|
|
* @override
|
|
*/
|
|
onFilterUnmatch() {
|
|
if (this.__originalInnerHTML) {
|
|
this.innerHTML = this.__originalInnerHTML;
|
|
}
|
|
this.style.display = 'none';
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
${super.render()}
|
|
<md-ripple></md-ripple>
|
|
`;
|
|
}
|
|
}
|
|
customElements.define('md-option', MdOption);
|
|
|
|
export class MdCombobox extends MdFieldMixin(LionCombobox) {
|
|
static get styles() {
|
|
return [
|
|
super.styles,
|
|
css`
|
|
.input-group__container {
|
|
display: flex;
|
|
border-bottom: none;
|
|
}
|
|
|
|
* > ::slotted([role='listbox']) {
|
|
box-shadow: 0 4px 6px 0 rgba(32, 33, 36, 0.28);
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
top: 2px;
|
|
}
|
|
`,
|
|
];
|
|
}
|
|
}
|
|
customElements.define('md-combobox', MdCombobox);
|