@postnord/web-components/components/pn-icon2.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as colors, g as gray900 } from './colors.js';

const pnIconCss = "pn-icon{display:inline-block;vertical-align:top;--pn-icon-color:main.$gray900}pn-icon[small] svg{height:1em;width:1em}pn-icon svg{display:block;height:1.5em;width:1.5em}pn-icon .pn-icon-svg>circle,pn-icon .pn-icon-svg>path{fill:var(--pn-icon-color);transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}";
const PnIconStyle0 = pnIconCss;

const PnIcon = /*@__PURE__*/ proxyCustomElement(class PnIcon extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.icon = '';
        this.small = false;
        this.color = 'gray900';
    }
    get hostElement() { return this; }
    handleColor() {
        const color = colors[this.color] || gray900;
        this.hostElement.style.setProperty('--pn-icon-color', color);
    }
    componentWillLoad() {
        this.handleColor();
    }
    render() {
        return h(Host, { key: '6b379a07a1461fc01976dd837866f52a02add716', role: "presentation", class: "pn-icon", innerHTML: this.icon });
    }
    static get watchers() { return {
        "color": ["handleColor"]
    }; }
    static get style() { return PnIconStyle0; }
}, [0, "pn-icon", {
        "icon": [1],
        "small": [516],
        "color": [1]
    }, undefined, {
        "color": ["handleColor"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-icon":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnIcon);
            }
            break;
    } });
}

export { PnIcon as P, defineCustomElement as d };

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