@postnord/web-components
Version:
PostNord Web Components
124 lines (123 loc) • 4.87 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
import * as colors from "pn-design-assets/pn-assets/colors.js";
/**
* The `pn-icon` is a wrapper for an SVG string.
* While its built with PostNords specific icon dimensions in mind (24x24px), you can use any SVG content in this component.
* As long as its 3x3 in size, there should be no problem.
*
* The color feature will not overwrite the color of flags.
**/
export class PnIcon {
constructor() {
this.icon = '';
this.small = false;
this.color = 'gray900';
}
hostElement;
handleColor() {
const color = colors[this.color] || colors.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 is() { return "pn-icon"; }
static get originalStyleUrls() {
return {
"$": ["pn-icon.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-icon.css"]
};
}
static get properties() {
return {
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "see",
"text": "{@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs PostNord Icons (Storybook)}"
}, {
"name": "see",
"text": "{@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs PostNord Flags (Storybook)}"
}],
"text": "The SVG content of the icon you want to use.\n\nFlags cannot be colored."
},
"attribute": "icon",
"reflect": false,
"defaultValue": "''"
},
"small": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Make the icon small (16 instead of 24px)."
},
"attribute": "small",
"reflect": true,
"defaultValue": "false"
},
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PnColors",
"resolved": "\"warning\" | \"black\" | \"gray900\" | \"gray700\" | \"gray400\" | \"gray200\" | \"gray100\" | \"gray50\" | \"gray25\" | \"white\" | \"blue900\" | \"blue700\" | \"blue400\" | \"blue200\" | \"blue50\" | \"blue25\" | \"coral900\" | \"coral700\" | \"coral400\" | \"coral200\" | \"coral50\" | \"coral25\" | \"orange900\" | \"orange700\" | \"orange500\" | \"orange400\" | \"orange200\" | \"orange50\" | \"orange25\" | \"green900\" | \"green700\" | \"green500\" | \"green400\" | \"green200\" | \"green50\" | \"green25\"",
"references": {
"PnColors": {
"location": "import",
"path": "@/index",
"id": "src/index.ts::PnColors"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "see",
"text": "{@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs PostNord Colors (Storybook)}"
}],
"text": "Color the icon with one of the follwing colors from our library."
},
"attribute": "color",
"reflect": false,
"defaultValue": "'gray900'"
}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "color",
"methodName": "handleColor"
}];
}
}
//# sourceMappingURL=pn-icon.js.map