@postnord/web-components
Version:
PostNord Web Components
65 lines (61 loc) • 2.69 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
const pnIllustrationCss = () => `${transformTag("pn-illustration")}{display:inline-block}${transformTag("pn-illustration")} .pn-illustration{display:inline-block}${transformTag("pn-illustration")} .pn-illustration[data-fill]{display:block}${transformTag("pn-illustration")} .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: '30a6824eaa6972efee63b5f893defb80bac7821c' }, h("span", { key: 'd27b45f1789b6c93d34ab0b1c673bda9fff60c0b', role: "presentation", class: "pn-illustration", "data-fill": this.fill, innerHTML: this.illustration })));
}
static get watchers() { return {
"fill": [{
"handleFill": 0
}]
}; }
};
PnIllustration.style = pnIllustrationCss();
export { PnIllustration as pn_illustration };