/**  
 * @since Last modified: 2024-07-11 09:30:49
 * @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 { T_fn, T_obj } from '../../../types/ax';
import ax from '../ax';
import config from '../global/config';
import prefix from '../global/prefix';
import Observe from '../modules/Observe';
import attrJoinVal from '../utils/attrJoinVal';
import attrValBool from '../utils/attrValBool';
import createEl from '../utils/createEl';
import elState from '../utils/elState';
import extend from '../utils/extend';
import getAttrBool from '../utils/getAttrBool';
import icons from '../utils/icons';
import tplToEl from '../utils/tplToEl';
import PlainElem from './PlainElem';
class BadgeElem extends PlainElem {
    wrapEl: any;
    constructor() {
        super();
        this.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
    }
    static lazyAttrs = ['stor-name'];
    static custAttrs = [
        'class',
        'theme', 'type', 'shape', 
        'on-init', 'on-reset',
    ];
    static boolAttrs = ['glassy'];
    static get observedAttributes() {
        return ['label', ...this.custAttrs, ...this.boolAttrs];
    }
    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
        this.propsProxy[name] = this.getPropVal(BadgeElem,name,newVal);
        if (name === 'label') {
            if (newVal === null) {
                this.wrapEl.remove();
            } else {
                this.wrapEl.innerHTML = newVal;
                !this.wrapEl.isConnected && this.appendChild(this.wrapEl);
            }
        }
    }
    connectedCallback() {
        this.connectedRender();
    }
    getRawData() {
        this.getInitPropsRaw(BadgeElem);
        this.propsRaw.label = this.getHtmlVal();
        this.getInitPropsProxy();
        this.innerHTML = '';
    }
    fillWrap(data: T_obj) {
        this.wrapEl = createEl('div', { role: 'wrap' }, data.label);
    }
    render() {
        this.appendChild(this.wrapEl);
    }
}
window.customElements.define("ax-badge", BadgeElem);
export default BadgeElem;
