/**  
 * @since Last modified: 2024-09-17 00:28:24
 * @class DividerElem
 * @description The custom element : ax-divider .
 * @see {@link https://codepen.io/axui/pen/RwOYmzW|demo @ codepen}
 * @example
 * <ax-divider>256</ax-divider>;
 */
import { T_fn, T_obj } from '../../../types/ax';
import ax from '../ax';
import config from '../global/config';
import prefix from '../global/prefix';
import alias from '../global/alias';
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 DividerElem extends PlainElem {
    wrapEl: any;
    startEl: any;
    endEl: any;
    labelEl: any;
    constructor() {
        super();
        this.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
    }
    static lazyAttrs = ['stor-name'];
    static custAttrs = [
        'class', 'break', 'size',
        'on-init', 'on-reset',
    ];
    static boolAttrs = [];
    static get observedAttributes() {
        return ['label', ...this.custAttrs, ...this.boolAttrs];
    }
    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
        this.propsProxy[name] = this.getPropVal(DividerElem, name, newVal);
        if (name === 'label') {
            if (newVal === null) {
                this.labelEl.remove();
                this.endEl.remove();
            } else {
                this.labelEl.innerHTML = newVal;
                elState(this.labelEl).isVirtual && this.wrapEl.append(this.labelEl, this.endEl);
            }
        }
    }
    connectedCallback() {
        this.connectedRender();
    }
    disconnectedCallback() {
    }
    adoptedCallback() {
    }
    getRawData() {
        this.getInitPropsRaw(DividerElem);
        this.propsRaw.label = this.getHtmlVal();
        this.getInitPropsProxy();
        this.innerHTML = '';
    }
    fillWrap(data: T_obj) {
        this.startEl = createEl('div', { [alias]: 'start' });
        this.wrapEl = createEl('div', { [alias]: 'wrap' }, this.startEl);
        this.endEl = createEl('div', { [alias]: 'end' });
        this.labelEl = createEl('div', { [alias]: 'label' }, data.label);
        data.label && this.wrapEl.append(this.labelEl, this.endEl);
    }
    render() {
        this.appendChild(this.wrapEl);
    }
}
window.customElements.define("ax-divider", DividerElem);
export default DividerElem;
