@postnord/web-components
Version:
PostNord Web Components
141 lines (140 loc) • 5.13 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h } from "@stencil/core";
import { arrow_right } from "pn-design-assets/pn-assets/icons.js";
/**
* @deprecated This component will be removed in v8. Please use the `pn-tablist` instead.
* @see {@link https://portal.postnord.com/web-components/?path=/docs/components-navigation-tablist--docs Use `pn-tablist` instead.}
*/
export class PnPageNavDropdownItem {
hostElement;
/**
* The value that will be emitted upon selection, only pass this if the item
* is a link, if you want a button (for quick actions), omit this prop.
*/
value;
/** Pass an href to the items if you want to have links that lead outside of your app */
href;
/** Ignore this, it's internal communication with parent. @hide true */
active = false;
/** Ignore this, it's internal communication with parent */
itemselection;
select(e) {
if (this.value && !this.href)
e.preventDefault();
this.itemselection.emit(this.value);
}
setClassnames() {
let classes = 'pn-page-nav-dropdown-item ';
if (this.active)
classes += 'pn-page-nav-dropdown-item-active ';
return classes;
}
getType() {
return this.value ? null : 'button';
}
getTagName() {
return this.value ? 'a' : 'button';
}
render() {
const TagName = this.getTagName();
return (h("li", { key: 'a092dbd0ea2bead9b2d974cadf80f74190a0d14e' }, h(TagName, { key: 'd0d9542e100b59c39ced2612c9b279d7d07bd876', href: this.href || '#', class: this.setClassnames(), type: this.getType(), onClick: e => this.select(e), tabindex: "-1" }, h("slot", { key: '96f8721e300c4b32e72df20079030986d5ffee6b' }), h("pn-icon", { key: 'd835de522cec9ec9f686bb9c0d30d842d4feeb80', icon: arrow_right, color: "white" })), h("hr", { key: 'db691728876fa378a714eb13202922a99bd8ca46' })));
}
static get is() { return "pn-page-nav-dropdown-item"; }
static get originalStyleUrls() {
return {
"$": ["pn-page-nav-dropdown-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-page-nav-dropdown-item.css"]
};
}
static get properties() {
return {
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "The value that will be emitted upon selection, only pass this if the item\nis a link, if you want a button (for quick actions), omit this prop."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value"
},
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Pass an href to the items if you want to have links that lead outside of your app"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "href"
},
"active": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "hide",
"text": "true"
}],
"text": "Ignore this, it's internal communication with parent."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "active",
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "itemselection",
"name": "itemselection",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Ignore this, it's internal communication with parent"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get elementRef() { return "hostElement"; }
}