/**  
 * @since Last modified: 2024-07-11 09:30:49
 * @class FlagElem
 * @description The custom element : ax-flag .
 * @see {@link https://codepen.io/axui/pen/ZEZjXVm|demo @ codepen}
 * @example
 * <ax-flag></ax-flag>;
 */
import { T_el, T_obj } from '../../../types/ax';
import ax from '../ax';
import createEl from '../utils/createEl';
import elState from '../utils/elState';
import getAttrBool from '../utils/getAttrBool';
import tplToEl from '../utils/tplToEl';
import PlainElem from './PlainElem';
class FlagElem extends PlainElem {
    labelEl: any;
    constructor() {
        super();
        super.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
    }
        static lazyAttrs = ['stor-name'];
        static custAttrs = [
            'class',
            'type', 'theme', 'placement',
            'on-init', 'on-reset','on-set',
        ];
        static boolAttrs:string[] = [];
        static get observedAttributes() {
            return ['label', ...this.custAttrs, ...this.boolAttrs];
        }
    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
        this.propsProxy[name] = FlagElem.boolAttrs.includes(name) ? getAttrBool(newVal) : newVal;
        if (name === 'label') {
            this.labelEl.innerHTML = newVal;
        }
    }
    connectedCallback() {
        this.render();
        this.initialized = true;
        this.listen({ name: 'init' });
    }
    getRawData() {
        [...FlagElem.custAttrs, ...FlagElem.lazyAttrs].forEach((k: string) => {
            this.propsRaw[k] = this.getAttribute(k);
        });
        FlagElem.boolAttrs.forEach((k: string) => {
            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: T_obj) {
        this.wrapEl = createEl('span', { role: 'wrap' });
        this.labelEl = createEl('i', { role: 'label' }, data.label);
        this.wrapEl.appendChild(this.labelEl);
    }
    render(data?: T_obj) {
        this.appendChild(this.wrapEl);
    }
}
window.customElements.define("ax-flag", FlagElem);
export default FlagElem;
