@postnord/web-components
Version:
PostNord Web Components
142 lines (141 loc) • 5.19 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: '94cf90095d9d021b24badf637952337eeadbede6' }, h(TagName, { key: '651acbb60ae376ff0b7a8dbda1f5ec16d82a3090', href: this.href || '#', class: this.setClassnames(), type: this.getType(), onClick: e => this.select(e), tabindex: "-1" }, h("slot", { key: '4991763f46f5c9df797699760417379a5ec454de' }), h("pn-icon", { key: 'fd6969ccd4a821a54d6ea5b5ed98bf3b207db75f', icon: arrow_right, color: "white" })), h("hr", { key: '50c364f3020be9e33d1b2ad9b60855dfa203e479' })));
}
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,
"attribute": "value",
"reflect": false
},
"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,
"attribute": "href",
"reflect": false
},
"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,
"attribute": "active",
"reflect": false,
"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"; }
}
//# sourceMappingURL=pn-page-nav-dropdown-item.js.map