@postnord/web-components
Version:
PostNord Web Components
64 lines (60 loc) • 2.42 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { r as registerInstance, g as getElement, h, a as Host } from './index-C247oTEA.js';
const pnIllustrationCss = "pn-illustration{display:inline-block}pn-illustration[data-fill]{display:block}pn-illustration>svg{width:var(--pn-width);height:var(--pn-height);display:block}";
const PnIllustration = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
get hostElement() { return getElement(this); }
/** 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: '3f2e44ec10a5a2fc9fd9a69f94963ab4e79fb877', role: "presentation", innerHTML: this.illustration, "data-fill": this.fill });
}
static get watchers() { return {
"fill": ["handleFill"]
}; }
};
PnIllustration.style = pnIllustrationCss;
export { PnIllustration as pn_illustration };
//# sourceMappingURL=pn-illustration.entry.js.map