68 lines
1.9 KiB
JavaScript
68 lines
1.9 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, html, converter } 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 form-control form-control-lg d-flex flex-row")
|
|
.attribute("tabindex", "0")
|
|
.child(
|
|
new div()
|
|
.style("flex", 1)
|
|
.style("border", "none")
|
|
.style("outline", "none")
|
|
.style("overflow", "auto")
|
|
.attribute("contenteditable", true)
|
|
.ref(this.inputElement),
|
|
|
|
new div().child(
|
|
new converter(this.value, this.optionsRenderer)
|
|
),
|
|
|
|
new button().class("btn btn-none").child("<i class='fa-solid fa-times' />"),
|
|
|
|
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
|
|
} |