@postnord/web-components
Version:
PostNord Web Components
72 lines (68 loc) • 2.84 kB
JavaScript
/*!
* 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)}@media (prefers-reduced-motion: reduce){pn-icon .pn-icon-svg>circle,pn-icon .pn-icon-svg>path{transition-duration:0s;transition-delay:0s}}";
const PnIcon = /*@__PURE__*/ proxyCustomElement(class PnIcon extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
}
get hostElement() { return this; }
/**
* The SVG content of the icon you want to use.
*
* Flags cannot be colored.
*
* @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs|PostNord Icons (Storybook)}
* @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs|PostNord Flags (Storybook)}
**/
icon = '';
/** Make the icon small (16 instead of 24px). */
small = false;
/**
* Color the icon with one of the follwing colors from our library.
* @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs|PostNord Colors (Storybook)}
**/
color = 'gray900';
handleColor() {
const color = colors[this.color] || gray900;
this.hostElement.style.setProperty('--pn-icon-color', color);
}
componentWillLoad() {
this.handleColor();
}
render() {
return h(Host, { key: 'f63d0b1e54fe91f9fcf33811f6694e604e09929d', role: "presentation", class: "pn-icon", innerHTML: this.icon });
}
static get watchers() { return {
"color": ["handleColor"]
}; }
static get style() { return pnIconCss; }
}, [256, "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
//# sourceMappingURL=pn-icon2.js.map