@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: 'a29b0f244288bdff245e275a9ab3d11bec87a476' }, h("div", { key: 'beed67096e5bd7448416b5c0422596f2e4d61be9', class: "pn-tile", "data-horizontal": this.horizontal, "data-href": !!this.url, "data-focus": this.visibleOutline, ref: el => (this.tile = el) }, h("div", { key: '458a7df237ec2fc27c33c3f3306d880f5ba6ab11', 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: 'bd70e9eb9e29cd48d29170e05f279019005d564a', class: "pn-tile-illustration-slot", hidden: !this.showSlotIllustration(), ref: el => (this.illustrationSlot = el) }, h("slot", { key: 'c22dee0ca1663e47fbbc2625af6060ebc1fec4d5', name: "illustration" }))), h("div", { key: '0dbb257acaf45f22a16f4bd4616d1a862c281ee9', class: "pn-tile-text" }, h("h3", { key: 'c2459327b7ac973e8f7f4c372c6457d70db4bfde', 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: '661061f5e03c7b658967e1c9e306857b730203b0', icon: open_in_new, small: true, color: "blue700" })), h("div", { key: '8c51850bc85b2223dcd67c81d8f15a78ec9ef3cc', class: "pn-tile-slot" }, !!this.text && h("p", { key: '9759d3fd1a5a5219dc22a31ab874eab2475e14d8', class: "pn-tile-paragraph" }, this.text), h("slot", { key: 'b3e0e1442bfb5cc003e696be617c879919facbbc' }))))));
}
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"; }
}