@postnord/web-components
Version:
PostNord Web Components
156 lines (155 loc) • 5.63 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
/**
* The `pn-illustration` is a wrapper for an SVG string.
* The component will look at the viewBox property of the SVG to determine the default width and height,
* but you can also set these manually with the `width` and `height` props.
* Setting the `fill` prop will make the illustration fill its parent container, which is useful for responsive designs.
*/
export class PnIllustration {
hostElement;
/** The SVG content of the illustration you want to use. The viewBox property will be used to determine width/height */
illustration;
/** Set the width of the SVG element. Any valid CSS width value is allowed */
width;
/** Set the height of the SVG element. Any valid CSS height value is allowed */
height;
/** Make the SVG fill to its parent size (sets width/height 100% and `display: block` instead of `inline-block`) */
fill = false;
handleFill() {
if (this.fill) {
this.width = '100%';
this.height = '100%';
}
}
componentWillRender() {
this.handleFill();
if (this.width || this.height)
return this.setSizes();
this.getSizeFromSvg();
}
componentDidRender() {
this.hostElement.querySelector('svg')?.setAttribute('width', this.width);
this.hostElement.querySelector('svg')?.setAttribute('height', this.height);
}
getSizeFromSvg() {
const viewBox = this.illustration?.match(/<svg[^>]*?viewBox=(["\'])?((?:.(?!\1|>))*.?)\1?/)?.[2];
if (!viewBox)
return;
const [, , width = '', height = ''] = viewBox?.split(' ') || [];
if (!width || !height)
return;
this.width = `${Number(width)}px`;
this.height = `${Number(height)}px`;
this.setSizes();
}
setSizes() {
this.hostElement.style.setProperty('--pn-width', this.width);
this.hostElement.style.setProperty('--pn-height', this.height);
}
render() {
return (h(Host, { key: '30a6824eaa6972efee63b5f893defb80bac7821c' }, h("span", { key: 'd27b45f1789b6c93d34ab0b1c673bda9fff60c0b', role: "presentation", class: "pn-illustration", "data-fill": this.fill, innerHTML: this.illustration })));
}
static get is() { return "pn-illustration"; }
static get originalStyleUrls() {
return {
"$": ["pn-illustration.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-illustration.css"]
};
}
static get properties() {
return {
"illustration": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "The SVG content of the illustration you want to use. The viewBox property will be used to determine width/height"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "illustration"
},
"width": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set the width of the SVG element. Any valid CSS width value is allowed"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "width"
},
"height": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set the height of the SVG element. Any valid CSS height value is allowed"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "height"
},
"fill": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Make the SVG fill to its parent size (sets width/height 100% and `display: block` instead of `inline-block`)"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "fill",
"defaultValue": "false"
}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "fill",
"methodName": "handleFill"
}];
}
}