@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: '3ba7accf462b8b2cb9263b3e491b8492cd413936' }, h(TagName, { key: '1c17c9192378a7d30cf1b08fe3681d4353cd6358', href: this.href || '#', class: this.setClassnames(), type: this.getType(), onClick: e => this.select(e), tabindex: "-1" }, h("slot", { key: '24bb5a34497dfa712d6eaf4e26bc8d4cef553887' }), h("pn-icon", { key: '368e6ac5154711a49c5366c7994fdc989d9cb624', icon: arrow_right, color: "white" })), h("hr", { key: 'a1b1d2aadd8bc6e6d79f3e8db9ed85263feb3f30' })));
}
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