61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
import { IgniteHtml } from '../ignite-html/ignite-html.js';
|
|
import { IgniteElement } from "../ignite-html/ignite-element.js";
|
|
import { IgniteTemplate, button, ul, slot, span, div } from "../ignite-html/ignite-template.js";
|
|
import { IgniteProperty } from "../ignite-html/ignite-html.js";
|
|
import { Popper } from "./popper.js";
|
|
|
|
class SearchSelect extends IgniteElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
get styles() {
|
|
return /*css*/`
|
|
mt-search-select>div:empty:before {
|
|
content: attr(data-placeholder);
|
|
opacity: 0.5;
|
|
}
|
|
`;
|
|
}
|
|
|
|
get properties() {
|
|
return {
|
|
inputElement: null,
|
|
placeholder: null,
|
|
options: null,
|
|
optionsRenderer: null,
|
|
value: null,
|
|
search: null
|
|
};
|
|
}
|
|
|
|
render() {
|
|
return this.template
|
|
.class("w-100 position-relative")
|
|
.attribute("tabindex", "0")
|
|
.child(
|
|
new div()
|
|
.class("form-control form-control-lg")
|
|
.innerHTML(this.value)
|
|
.attribute("contenteditable", true)
|
|
.data("placeholder", this.placeholder)
|
|
.ref(this.inputElement),
|
|
|
|
new Popper().class("form-control form-control-lg shadow").property("show", true).child(
|
|
"Test"
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
class Template extends IgniteTemplate {
|
|
constructor(...children) {
|
|
super("mt-search-select", children);
|
|
}
|
|
}
|
|
|
|
IgniteHtml.register("mt-search-select", SearchSelect);
|
|
|
|
export {
|
|
Template as SearchSelect
|
|
} |