@postnord/web-components
Version:
PostNord Web Components
141 lines (140 loc) • 4.64 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
export class PnIllustration {
constructor() {
this.illustration = undefined;
this.width = undefined;
this.height = undefined;
this.fill = false;
}
hostElement;
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: 'c1677d05f7d693f70e591659a89510f6f01062fe', role: "presentation", innerHTML: this.illustration, "data-fill": this.fill });
}
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"
},
"attribute": "illustration",
"reflect": false
},
"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"
},
"attribute": "width",
"reflect": false
},
"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"
},
"attribute": "height",
"reflect": false
},
"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`)"
},
"attribute": "fill",
"reflect": false,
"defaultValue": "false"
}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "fill",
"methodName": "handleFill"
}];
}
}
//# sourceMappingURL=pn-illustration.js.map