@postnord/web-components
Version:
PostNord Web Components
303 lines (302 loc) • 12.1 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { Host, h, forceUpdate } from "@stencil/core";
import { open_in_new } from "pn-design-assets/pn-assets/icons.js";
import { ripple } from "../../../globals/helpers";
/**
* The `pn-tile` is a navigational element that is intended to be accompanied by an illustration.
*
* It is very important that you use the `label` and `url`. This component renders an `a` element if the URL prop is set,
* so you do not need to wrap or nest the tile in another `a` element. Doing so makes the component inaccessible.
*
* @slot illustration - Set a custom SVG. We recommend you use the `pn-illustration` component.
* This is the same as the `illustration` prop.
*/
export class PnTile {
mo;
tile;
illustrationSlot;
visibleOutline = false;
hostElement;
/** Label of the link. This is required for the component to be accessible. */
label;
/** Set a string of text for the tile. Same as the default slot. @since v7.12.0 */
text;
/** The link of the tile. This is required for the component to be accessible. @category href */
url;
/** The target attribute of the link. @category href */
target;
/** The rel attribute of the link. @category href */
rel = 'noopener noreferrer';
/** The SVG content of an illustration. @category Image */
illustration;
/** The SVG content of a decorative icon. @since v7.12.0 @category Image */
icon;
/** Use the horizontal tile. @category Layout */
horizontal = false;
/**
* Emitted when the link is clicked. Use the `click` property to `preventDefault`
* if you wish to perform the navigation programmatically.
* @since v7.12.0
**/
pnTile;
connectedCallback() {
this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
this.mo.observe(this.hostElement, { subtree: true, childList: true });
}
disconnectedCallback() {
this.mo?.disconnect();
}
isExternal() {
return this.target === '_blank';
}
showIcon() {
return !!this.icon && !this.showSlotIllustration();
}
showPropIllustration() {
return !!this.illustration && !this.showSlotIllustration();
}
showSlotIllustration() {
return !!this.illustrationSlot?.querySelector('[slot="illustration"]');
}
showImage() {
return this.showIcon() || this.showPropIllustration() || this.showSlotIllustration();
}
handleFocus({ type, target }) {
this.visibleOutline = type === 'focus' && target.matches(':focus-visible');
}
clickHandler(event) {
ripple(event, this.tile);
this.pnTile.emit({ click: event });
}
render() {
return (h(Host, { key: 'eb3815f93d4355e80969c381cadd22789b1a5b05' }, h("div", { key: 'a8dad16643d664975ee27f3fc3e0249730662efb', class: "pn-tile", "data-horizontal": this.horizontal, "data-href": !!this.url, "data-focus": this.visibleOutline, ref: el => (this.tile = el) }, h("div", { key: '474e4c248a0ddfab550be16dcff172fc01f84e0a', class: "pn-tile-illustration", "data-circle": !!this.url, "data-icon": this.showIcon(), role: "presentation", hidden: !this.showImage() }, this.showPropIllustration() ? (h("pn-illustration", { illustration: this.illustration })) : (this.showIcon() && h("pn-icon", { color: "blue700", icon: this.icon })), h("div", { key: '2d5962def32bc5d7a3432cd5062d0a164f167454', class: "pn-tile-illustration-slot", hidden: !this.showSlotIllustration(), ref: el => (this.illustrationSlot = el) }, h("slot", { key: 'ceb86fe161d9256249fdc65c83199a0231899e9b', name: "illustration" }))), h("div", { key: '74ad199309a7ae8f6c576bc2c97c958f364dc868', class: "pn-tile-text" }, h("h3", { key: 'eb6e12a3496d11c3ecb79bf122cbfd604b8081ef', class: "pn-tile-title" }, this.url ? (h("a", { class: "pn-tile-link", href: this.url, target: this.target, rel: !this.rel && this.isExternal() ? 'noopener noreferrer' : this.rel, onClick: e => this.clickHandler(e), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.label)) : (this.label), this.isExternal() && h("pn-icon", { key: '13c2495d9a94dc9d3f530543e47549683b985c59', icon: open_in_new, small: true, color: "blue700" })), h("div", { key: '4ce12374c5bbdf54809d8b1d2f99cb6efbc01266', class: "pn-tile-slot" }, !!this.text && h("p", { key: '2cdbc99beff7480c18f561b2f16f72953367b43f', class: "pn-tile-paragraph" }, this.text), h("slot", { key: 'f786d7b65a270acb9be13ce0cfb1d2e3bfe34b8a' }))))));
}
static get is() { return "pn-tile"; }
static get originalStyleUrls() {
return {
"$": ["pn-tile.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-tile.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Label of the link. This is required for the component to be accessible."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label"
},
"text": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.12.0"
}],
"text": "Set a string of text for the tile. Same as the default slot."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "text"
},
"url": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "href"
}],
"text": "The link of the tile. This is required for the component to be accessible."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "url"
},
"target": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "href"
}],
"text": "The target attribute of the link."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "target"
},
"rel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "href"
}],
"text": "The rel attribute of the link."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "rel",
"defaultValue": "'noopener noreferrer'"
},
"illustration": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Image"
}],
"text": "The SVG content of an illustration."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "illustration"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.12.0"
}, {
"name": "category",
"text": "Image"
}],
"text": "The SVG content of a decorative icon."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon"
},
"horizontal": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Layout"
}],
"text": "Use the horizontal tile."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "horizontal",
"defaultValue": "false"
}
};
}
static get states() {
return {
"visibleOutline": {}
};
}
static get events() {
return [{
"method": "pnTile",
"name": "pnTile",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.12.0"
}],
"text": "Emitted when the link is clicked. Use the `click` property to `preventDefault`\nif you wish to perform the navigation programmatically."
},
"complexType": {
"original": "{ click: MouseEvent }",
"resolved": "{ click: MouseEvent; }",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}];
}
static get elementRef() { return "hostElement"; }
}