import { h } from "@stencil/core";
import { globalConfig } from "../../global/config";
import iconCache from "../../global/icon-cache/factory";
/**
 * :::important
 * To install your icon set correctly, please read the [documentation here](#/).
 * :::
 *
 * The size and color of the icon is normally set in CSS, however there are a few
 * standard sizes defined that can be used with the `size` property.
 *
 * @exampleComponent limel-example-icon-name
 * @exampleComponent limel-example-icon-size
 * @exampleComponent limel-example-icon-color
 */
export class Icon {
    componentDidLoad() {
        this.loadIcon(this.name);
    }
    render() {
        return h("div", { key: '1af49b178e75a2701d2362817c5f74614a4a900a', class: "container" });
    }
    async loadIcon(name) {
        if (name === undefined || name === '') {
            return;
        }
        const svgData = await this.loadSvg(name);
        this.renderSvg(svgData);
    }
    /**
     * Load the SVG data for the icon from the icon cache
     *
     * @param name - name of the icon
     * @returns the icon SVG data
     */
    loadSvg(name) {
        return iconCache.get(name, globalConfig.iconPath);
    }
    /*
     * There is no way to style external SVG files with CSS, i.e. SVGs loaded
     * with <img src="file.svg" /> or <object data="file.svg" type="image/svg+xml" />
     * will remain the way they look in the file.
     * Therefore we inject the svg as inline markup instead.
     */
    renderSvg(svgData) {
        const container = this.host.shadowRoot.querySelector('div.container');
        if (container) {
            container.innerHTML = svgData;
        }
    }
    static get is() { return "limel-icon"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["icon.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["icon.css"]
        };
    }
    static get properties() {
        return {
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IconSize",
                    "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
                    "references": {
                        "IconSize": {
                            "location": "import",
                            "path": "./icon.types",
                            "id": "src/components/icon/icon.types.ts::IconSize",
                            "referenceLocation": "IconSize"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Size of the icon"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "size"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Name of the icon"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "name"
            },
            "badge": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to give the icon a round background with some padding.\nOnly works when the `size` attribute is also set."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "badge"
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "name",
                "methodName": "loadIcon"
            }];
    }
}
