import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { g as getAssetPath } from './assetPath.js';

const eclIconEcCss = ".ecl-icon.sc-ecl-icon-ec{fill:currentcolor;margin:0;transition:transform .3s ease-in-out}.ecl-icon--2xs.sc-ecl-icon-ec{height:.75rem;width:.75rem}.ecl-icon--xs.sc-ecl-icon-ec{height:1rem;width:1rem}.ecl-icon--s.sc-ecl-icon-ec{height:1.25rem;width:1.25rem}.ecl-icon--m.sc-ecl-icon-ec{height:1.5rem;width:1.5rem}.ecl-icon--l.sc-ecl-icon-ec{height:2rem;width:2rem}.ecl-icon--xl.sc-ecl-icon-ec{height:2.5rem;width:2.5rem}.ecl-icon--2xl.sc-ecl-icon-ec{height:3rem;width:3rem}.ecl-icon--fluid.sc-ecl-icon-ec{height:1em;width:1em}.ecl-icon--primary.sc-ecl-icon-ec{fill:#004494}.ecl-icon--inverted.sc-ecl-icon-ec{fill:#fff}.ecl-icon--rotate-90.sc-ecl-icon-ec{transform:rotate(90deg)}.ecl-icon--rotate-180.sc-ecl-icon-ec{transform:rotate(180deg)}.ecl-icon--rotate-270.sc-ecl-icon-ec{transform:rotate(270deg)}.ecl-icon--flip-horizontal.sc-ecl-icon-ec{transform:scaleX(-1)}.ecl-icon--flip-vertical.sc-ecl-icon-ec{transform:scaleY(-1)}";

const eclIconEuCss = ".ecl-icon.sc-ecl-icon-eu{fill:currentcolor;margin:0;transition:transform .3s ease-in-out}.ecl-icon--2xs.sc-ecl-icon-eu{height:.75rem;width:.75rem}.ecl-icon--xs.sc-ecl-icon-eu{height:1rem;width:1rem}.ecl-icon--s.sc-ecl-icon-eu{height:1.25rem;width:1.25rem}.ecl-icon--m.sc-ecl-icon-eu{height:1.5rem;width:1.5rem}.ecl-icon--l.sc-ecl-icon-eu{height:2rem;width:2rem}.ecl-icon--xl.sc-ecl-icon-eu{height:2.5rem;width:2.5rem}.ecl-icon--2xl.sc-ecl-icon-eu{height:3rem;width:3rem}.ecl-icon--fluid.sc-ecl-icon-eu{height:1em;width:1em}.ecl-icon--primary.sc-ecl-icon-eu{fill:#0e47cb}.ecl-icon--inverted.sc-ecl-icon-eu{fill:#fff}.ecl-icon--rotate-90.sc-ecl-icon-eu{transform:rotate(90deg)}.ecl-icon--rotate-180.sc-ecl-icon-eu{transform:rotate(180deg)}.ecl-icon--rotate-270.sc-ecl-icon-eu{transform:rotate(270deg)}.ecl-icon--flip-horizontal.sc-ecl-icon-eu{transform:scaleX(-1)}.ecl-icon--flip-vertical.sc-ecl-icon-eu{transform:scaleY(-1)}";

const EclIcon = /*@__PURE__*/ proxyCustomElement(class EclIcon extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.styleClass = '';
        this.icon = '';
        this.size = 'xs';
        this.color = '';
        this.titleTag = '';
        this.path = undefined;
        this.transform = '';
        this.theme = 'ec';
        this.sprite = '';
    }
    componentWillLoad() {
        if (!this.sprite) {
            this.path = getAssetPath(`./build/images/${this.theme}/icons.svg`);
        }
        else {
            this.path = getAssetPath(`./build/images/${this.theme}/${this.sprite}.svg`);
        }
    }
    getClass() {
        const styleClasses = [
            `ecl-icon`,
            `ecl-icon--${this.size}`,
            this.styleClass,
        ];
        if (this.color) {
            styleClasses.push(`ecl-icon--${this.color}`);
        }
        if (this.transform) {
            styleClasses.push(`ecl-icon--${this.transform}`);
        }
        return styleClasses.join(' ');
    }
    render() {
        return (h("svg", { class: this.getClass() }, this.titleTag ? h("title", null, this.titleTag) : '', h("use", { xlinkHref: `${this.path}#${this.icon}` })));
    }
    static get assetsDirs() { return ["build"]; }
    static get style() { return {
        ec: eclIconEcCss,
        eu: eclIconEuCss
    }; }
}, [34, "ecl-icon", {
        "styleClass": [1, "style-class"],
        "icon": [1],
        "size": [1],
        "color": [1],
        "titleTag": [1, "title-tag"],
        "path": [1025],
        "transform": [1],
        "theme": [1],
        "sprite": [1]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ecl-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "ecl-icon":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, EclIcon);
            }
            break;
    } });
}

export { EclIcon as E, defineCustomElement as d };

//# sourceMappingURL=ecl-icon2.js.map