Added placeholder support to editable-label. Implemented a chip list with chips and search/edit functionality. Added a simple popper class to help with pop overs.

This commit is contained in:
2020-09-24 09:28:14 -07:00
parent a86986b1a3
commit 81acb1f000
4 changed files with 333 additions and 3 deletions

49
chip.js Normal file
View File

@@ -0,0 +1,49 @@
import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, slot, button } from "../ignite-html/ignite-template.js";
class Chip extends IgniteElement {
constructor() {
super();
}
get properties() {
return {
onDelete: () => { }
}
}
get styles() {
return `
mt-chip {
border-radius: 1em;
background-color: #e0e0e0;
padding-top: 0.3em;
padding-bottom: 0.3em;
padding-left: 0.6em;
padding-right: 0.6em;
}
`;
}
render() {
return this.template.child(
new slot(this),
new button()
.class("btn ml-1 p-0")
.child(`<i class="fad fa-times-circle"></i>`)
.onClick(() => this.onDelete())
);
}
}
class ChipTemplate extends IgniteTemplate {
constructor(...children) {
super("mt-chip", children);
}
}
customElements.define("mt-chip", Chip);
export {
ChipTemplate as Chip
}