ignite-html-material/chip.js

import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, slot, button, span } from "../ignite-html/ignite-template.js";

class Chip extends IgniteElement {
    constructor() {
        super();
    }

    get properties() {
        return {
            onDelete: () => { },
            background: null,
            color: null
        }
    }

    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;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
            }

            mt-chip:hover {
                filter: brightness(0.9);
            }
        `;
    }

    render() {
        return this.template
            .style("background", this.background)
            .style("color", this.color)
            .child(
                new slot(this),
                new button()
                    .class("btn ml-1 p-0")
                    .child(`<i class="fad fa-times-circle" style="--fa-secondary-color: rgba(0,0,0,0.3); --fa-primary-color: rgba(0,0,0,0.5);"></i>`)
                    .onClick(() => this.onDelete())
            );
    }
}

class ChipTemplate extends IgniteTemplate {
    constructor(...children) {
        super("mt-chip", children);
    }
}

customElements.define("mt-chip", Chip);

export {
    ChipTemplate as Chip
}