"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_STYLE = void 0;
const applyAttr_1 = require("../../../../../client/applyAttr");
const namespaceURI_1 = require("../../../../../client/component/namespaceURI");
const element_1 = require("../../../../../client/element");
const style_1 = require("../../../../../client/style");
const userSelect_1 = require("../../../../../client/util/style/userSelect");
exports.DEFAULT_STYLE = Object.assign({ display: 'block', width: '100%', height: '100%', color: 'currentColor', boxSizing: 'border-box', cursor: 'default' }, (0, userSelect_1.userSelect)('none'));
class SVGSVG extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        const { className, style = {}, attr = {}, width, height, stroke = 'currentColor', strokeWidth = 0, viewBox, preserveAspectRatio = 'none', title, tabIndex, } = $props;
        const svg_el = this.$system.api.document.createElementNS(namespaceURI_1.namespaceURI, 'svg');
        if (className !== undefined) {
            svg_el.classList.value = className;
        }
        if (viewBox) {
            svg_el.setAttribute('viewBox', viewBox);
        }
        if (preserveAspectRatio) {
            svg_el.setAttribute('preserveAspectRatio', preserveAspectRatio);
        }
        if (width !== undefined) {
            svg_el.setAttribute('width', `${width}`);
        }
        if (height !== undefined) {
            svg_el.setAttribute('height', `${height}`);
        }
        if (tabIndex !== undefined) {
            svg_el.tabIndex = tabIndex;
        }
        if (stroke !== undefined) {
            svg_el.setAttribute('stroke', `${stroke}`);
        }
        if (strokeWidth !== undefined) {
            svg_el.setAttribute('stroke-width', `${strokeWidth}`);
        }
        if (title) {
            const title_el = this.$system.api.document.createElementNS(namespaceURI_1.namespaceURI, 'title');
            title_el.innerHTML = title;
            svg_el.appendChild(title_el);
        }
        svg_el.setAttribute('preserveAspectRatio', 'xMidYMid meet');
        (0, style_1.applyStyle)(svg_el, Object.assign(Object.assign({}, exports.DEFAULT_STYLE), style));
        (0, applyAttr_1.default)(svg_el, attr);
        this._svg_el = svg_el;
        this.$element = svg_el;
        this.$unbundled = false;
        this.$primitive = true;
    }
    onPropChanged(prop, current) {
        if (prop === 'className') {
            this._svg_el.className.value = current;
        }
        else if (prop === 'style') {
            (0, style_1.applyStyle)(this._svg_el, Object.assign(Object.assign({}, exports.DEFAULT_STYLE), current));
        }
        else if (prop === 'attr') {
            (0, applyAttr_1.default)(this._svg_el, current !== null && current !== void 0 ? current : {});
        }
        else if (prop === 'viewBox') {
            if (current === undefined) {
                this._svg_el.removeAttribute('viewBox');
            }
            else {
                this._svg_el.setAttribute('viewBox', current);
            }
        }
        else if (prop === 'width') {
            if (current === undefined) {
                this._svg_el.removeAttribute('width');
            }
            else {
                this._svg_el.setAttribute('width', `${current}`);
            }
        }
        else if (prop === 'height') {
            this._svg_el.setAttribute('height', `${current}`);
        }
        else if (prop === 'strokeWidth') {
            if (current === undefined) {
                this._svg_el.removeAttribute('stroke-width');
            }
            else {
                this._svg_el.setAttribute('stroke-width', `${current}`);
            }
        }
        else if (prop === 'tabIndex') {
            this._svg_el.tabIndex = current;
        }
    }
}
exports.default = SVGSVG;
//# sourceMappingURL=Component.js.map