@postnord/web-components
Version:
PostNord Web Components
132 lines (131 loc) • 4.73 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 {
constructor() {
this.value = undefined;
this.href = undefined;
this.active = false;
}
hostElement;
/** 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: '118b8decf6fe97a27767bc70926ccc3b350bea31' }, h(TagName, { key: '1417fbd74d2bd8119789b1ddb5f395cf5ea5571d', href: this.href || '#', class: this.setClassnames(), type: this.getType(), onClick: e => this.select(e), tabindex: "-1" }, h("slot", { key: '51bdce9d5a7cdc1a7481ea13c49c11f073ae7660' }), h("pn-icon", { key: '63252ed87b9aaa6c2f26c4fe503e71b3d08169e9', icon: arrow_right, color: "white" })), h("hr", { key: 'c7b2d942886b0aaafa859f3d564ba920ea07ca79' })));
}
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."
},
"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"
},
"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."
},
"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