/**
 * @since Last modified: 2024-09-17 00:29:27
 * @class ProgressElem
 * @description The custom element : ax-progress .
 * @augments CustomElement
 * @see {@link https://codepen.io/axui/pen/qBwEzLp|demo @ codepen}
 * @example
 * <ax-progress value="25"></ax-progress>;
 */
import createEl from '../utils/createEl';
import CustomElement from './CustomElem';
import Progress from '../modules/Progress';
import optProgress from '../options/optProgress';
import alias from '../global/alias';
class ProgressElem extends CustomElement {
    constructor() {
        super();
        this.createShadow();
        super.createObs();
    }
    createShadow() {
        this.shadowEl = this.attachShadow({ mode: "open" });
        this.slotEl = createEl('slot');
        this.shadowEl.appendChild(this.slotEl);
    }
    render() {
        this.wrapEl = createEl('div', { [alias]: 'slot-host' }, this.innerHTML);
        this.innerHTML = '';
        this.appendChild(this.wrapEl);
        this.ins = new Progress(this.wrapEl);
    }
    static get observedAttributes() {
        return [...optProgress.map((k) => k.attr), 'options'];
    }
    connectedCallback() {
        this.render();
        this.initialized = true;
    }
    attributeChangedCallback(name, oldVal, newVal) {
        if (this.initialized) {
            if (name === 'value') {
                this.ins.animateTo(this.getVal(newVal));
            }
            else if (name === 'options') {
                super.updateProxy(name, newVal, optProgress);
            }
        }
    }
    getVal(val) {
        return val == 0 ? 0 : ~~val === 0 ? val : parseFloat(val);
    }
}
window.customElements.define("ax-progress", ProgressElem);
export default ProgressElem;
