import createEl from '../utils/createEl';
import elState from '../utils/elState';
import PlainElem from './PlainElem';
class DividerElem extends PlainElem {
    constructor() {
        super();
        this.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
    }
    static get observedAttributes() {
        return ['label', ...this.custAttrs, ...this.boolAttrs];
    }
    attributeChangedCallback(name, oldVal, newVal) {
        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) {
        this.startEl = createEl('div', { role: 'start' });
        this.wrapEl = createEl('div', { role: 'wrap' }, this.startEl);
        this.endEl = createEl('div', { role: 'end' });
        this.labelEl = createEl('div', { role: 'label' }, data.label);
        data.label && this.wrapEl.append(this.labelEl, this.endEl);
    }
    render() {
        this.appendChild(this.wrapEl);
    }
}
DividerElem.lazyAttrs = ['stor-name'];
DividerElem.custAttrs = [
    'class', 'break', 'size',
    'on-init', 'on-reset',
];
DividerElem.boolAttrs = [];
window.customElements.define("ax-divider", DividerElem);
export default DividerElem;
