/**
 * @since Last modified: 2024/06/17 10:00:24
 * @class BadgeElem
 * @description The custom element : ax-badge .
 * @see {@link https://codepen.io/axui/pen/RwOYmzW|demo @ codepen}
 * @example
 * <ax-badge>256</ax-badge>;
 */
import createEl from '../utils/createEl';
import getAttrBool from '../utils/getAttrBool';
import PlainElem from './PlainElem';
class BadgeElem extends PlainElem {
    constructor() {
        super();
        this.createObserver();
        this.getRawData();
        this.fillWrap(this.propsProxy);
    }
    static get observedAttributes() {
        return ['label', ...this.custAttrs, ...this.boolAttrs];
    }
    attributeChangedCallback(name, oldVal, newVal) {
        this.propsProxy[name] = BadgeElem.boolAttrs.includes(name) ? getAttrBool(newVal) : newVal;
        if (name === 'label') {
            if (newVal === null) {
                this.wrapEl.remove();
            }
            else {
                this.wrapEl.innerHTML = 'newVal';
                !this.wrapEl.isConnected && this.appendChild(this.wrapEl);
            }
        }
    }
    connectedCallback() {
        this.render();
        this.initialized = true;
        this.listen({ name: 'init' });
    }
    disconnectedCallback() {
    }
    adoptedCallback() {
    }
    getRawData() {
        [...BadgeElem.custAttrs, ...BadgeElem.lazyAttrs].forEach((k) => {
            this.propsRaw[k] = this.getAttribute(k);
        });
        BadgeElem.boolAttrs.forEach((k) => {
            this.propsRaw[k] = getAttrBool(this.getAttribute(k));
        });
        this.propsRaw.label = this.textContent?.trim() || this.getAttribute('label');
        for (let k in this.propsRaw) {
            this.propsProxy[k] = this.propsRaw[k];
        }
        this.innerHTML = '';
    }
    fillWrap(data) {
        this.wrapEl = createEl('div', { role: 'wrap' }, data.label);
    }
    render() {
        this.appendChild(this.wrapEl);
    }
}
BadgeElem.lazyAttrs = ['stor-name'];
BadgeElem.custAttrs = [
    'class',
    'theme', 'type', 'shape',
    'on-init', 'on-reset',
];
BadgeElem.boolAttrs = ['glassy'];
window.customElements.define("ax-badge", BadgeElem);
export default BadgeElem;
