import { createFragment } from "../lib/skeleton/index.js";
import { animate, slideYIn } from "../lib/animate.js";
import { loadCSS } from "../helpers/loader.js";
await loadCSS(import.meta.url, "./dropdown.css");
export default class ComponentDropdown extends HTMLDivElement {
constructor() {
super();
this.render();
}
static get observedAttributes() {
return ["options"];
}
render() {
this.classList.add("component_dropdown", "view", "sort");
this.appendChild(createFragment(`
`));
this.appendChild(createFragment(`
`));
const setActive = () => this.classList.toggle("active");
this.querySelector(".dropdown_button").onclick = () => {
setActive();
animate(this.querySelector(".dropdown_container"), {
time: 100,
keyframes: slideYIn(2),
});
};
}
}
customElements.define("component-dropdown", ComponentDropdown, { extends: "div" });
