@postnord/web-components
Version:
PostNord Web Components
272 lines (271 loc) • 10.9 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 {
constructor() {
this.visibleOutline = false;
this.label = undefined;
this.text = undefined;
this.url = undefined;
this.target = undefined;
this.rel = 'noopener noreferrer';
this.illustration = undefined;
this.icon = undefined;
this.horizontal = false;
}
mo;
tile;
illustrationSlot;
hostElement;
/**
* Emitted when the link is clicked. Use the `click` property to `preventDefault`
* if you wish to perform the navigation programmatically.
**/
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: '3aad61d5d06a72a5f2a5cd1808b18c3f7d8e437b' }, h("div", { key: '15c10f8f668544caa32385121caf382626aa1b8f', class: "pn-tile", "data-horizontal": this.horizontal, "data-href": !!this.url, "data-focus": this.visibleOutline, ref: el => (this.tile = el) }, h("div", { key: '9e61d1919dff7343e394ed86b1800284eb750121', 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: '59e5cdf5d9fb09045e215758692d5dc402a2a49a', class: "pn-tile-illustration-slot", hidden: !this.showSlotIllustration(), ref: el => (this.illustrationSlot = el) }, h("slot", { key: '00bc0dafa3ae0f89959d0a61d8221ce1e4bc8c2f', name: "illustration" }))), h("div", { key: 'c88f8daa6ee6f309d71a3205299ab98a1157a9a9', class: "pn-tile-text" }, h("h3", { key: '2cb429bf55430c1fcea8965c4cc73b511738d89d', 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: '5ea4aae5bf9328d68da0ee75990d95c590dc6749', icon: open_in_new, small: true, color: "blue700" })), h("div", { key: 'b9d56f8d2ee862215ef7ae7143d3da8073274fe5', class: "pn-tile-slot" }, !!this.text && h("p", { key: '76b95108a202c183f270868959cb4a7bb5fe0c57', class: "pn-tile-paragraph" }, this.text), h("slot", { key: 'fb3b513fd684adbcbd2af81360437ceec1ff9928' }))))));
}
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."
},
"attribute": "label",
"reflect": false
},
"text": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set a string of text for the tile. Same as the default slot."
},
"attribute": "text",
"reflect": false
},
"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."
},
"attribute": "url",
"reflect": false
},
"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."
},
"attribute": "target",
"reflect": false
},
"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."
},
"attribute": "rel",
"reflect": false,
"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."
},
"attribute": "illustration",
"reflect": false
},
"icon": {
"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 a decorative icon."
},
"attribute": "icon",
"reflect": false
},
"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."
},
"attribute": "horizontal",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"visibleOutline": {}
};
}
static get events() {
return [{
"method": "pnTile",
"name": "pnTile",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"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"; }
}
//# sourceMappingURL=pn-tile.js.map