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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as n,proxyCustomElement as o,HTMLElement as i,h as t,Host as e}from"@stencil/core/internal/client";import{c,g as r}from"./colors.js";const s=o(class extends i{constructor(n){super(),!1!==n&&this.__registerHost()}get hostElement(){return this}icon="";small=!1;color="gray900";handleColor(){this.hostElement.style.setProperty("--pn-icon-color",c[this.color]||r)}componentWillLoad(){this.handleColor()}render(){return t(e,{key:"f4d252ce71c0e0c83d352447bdd0c195de49196f"},t("span",{key:"adc6e3dd5d4d45ed9a154f07bd3e3fce8dbf6981",role:"presentation",class:"pn-icon","data-small":this.small,innerHTML:this.icon}))}static get watchers(){return{color:[{handleColor:0}]}}static get style(){return`${n("pn-icon")}{display:inline-block;vertical-align:top;--pn-icon-color:main.$gray900}${n("pn-icon")} .pn-icon{margin:0}${n("pn-icon")} .pn-icon svg{display:block;height:1.5em;width:1.5em}${n("pn-icon")} .pn-icon svg>circle,${n("pn-icon")} .pn-icon svg>path{fill:var(--pn-icon-color);transition-property:fill, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${n("pn-icon")} .pn-icon svg>circle,${n("pn-icon")} .pn-icon svg>path{transition-duration:0s;transition-delay:0s}}${n("pn-icon")} .pn-icon[data-small] svg{height:1em;width:1em}`}},[512,"pn-icon",{icon:[1],small:[4],color:[1]},void 0,{color:[{handleColor:0}]}]);function l(){"undefined"!=typeof customElements&&["pn-icon"].forEach((o=>{"pn-icon"===o&&(customElements.get(n(n(o)))||customElements.define(n(n(o)),s))}))}export{s as P,l as d}