@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: 'a4ca23ac5a53d78c87f2c955c3da18372a7d572d' }, h(TagName, { key: '20639a9f58133cf65d8719943d9d11630166b8d4', href: this.href || '#', class: this.setClassnames(), type: this.getType(), onClick: e => this.select(e), tabindex: "-1" }, h("slot", { key: '5440c1e919238f6aaa55ca9df2dec18ebbce2f83' }), h("pn-icon", { key: 'ff16474c7bc9fc6664c64c5b4567e88a88bd29fb', icon: arrow_right, color: "white" })), h("hr", { key: '5201ae642f54f3ad7b157762dedfddb08d865486' })));
}
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"; }
}