@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: '75894624931796797432719ab2df46e9cbdad385' }, h("div", { key: '936fdde27425df960872961ad5b8393e052fe7a9', class: "pn-tile", "data-horizontal": this.horizontal, "data-href": !!this.url, "data-focus": this.visibleOutline, ref: el => (this.tile = el) }, h("div", { key: '1c22e5021206f4da7d35ddc6ddee96dfa0e51110', 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: '255cd31100bb8cf3350f6a98b5de45a0aad37614', class: "pn-tile-illustration-slot", hidden: !this.showSlotIllustration(), ref: el => (this.illustrationSlot = el) }, h("slot", { key: '0c332bc747206b2598a67dbc04bac9122f40742a', name: "illustration" }))), h("div", { key: 'e85e39e6f462f36e4742c17a60789e3989141410', class: "pn-tile-text" }, h("h3", { key: 'b605186f787efbaf4017571c941a84991a7544a7', 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: '2034d46082c628d4c10a5db13787a300234eefa6', icon: open_in_new, small: true, color: "blue700" })), h("div", { key: 'c1b25966d07a7f325342dc34e1136563dd813c74', class: "pn-tile-slot" }, !!this.text && h("p", { key: '5e802cb0c950e124ced504d8366370036398a040', class: "pn-tile-paragraph" }, this.text), h("slot", { key: '317a0458bd25945b8294358cf4818e3c43cf5f36' }))))));
}
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