@claromentis/design-system
Version:
Claromentis Design System Component Library
174 lines (173 loc) • 4.49 kB
JavaScript
import { h } from '@stencil/core';
import { claNavInline } from '../../utils/utils';
/**
* @slot - Link or title content
*/
export class NavItem {
constructor() {
this.active = undefined;
this.navtitle = undefined;
this.href = undefined;
this.name = undefined;
this.size = 'default';
}
componentDidLoad() {
this.claNavItemDidLoad.emit();
}
componentWillLoad() {
this.isinline = claNavInline(this.el);
this.inline = this.isinline ? true : false;
}
/**
* Get the map of CSS classes for the nav tabs.
*
* @return CssClassMap
*/
getClassMap() {
const inline = this.inline;
const active = this.active;
const size = this.size;
return {
'cla-nav-item': true,
[`cla-nav-item-inline`]: inline,
[`active`]: active,
[`cla-nav-item-lg`]: size === 'large',
[`cla-nav-item-sm`]: size === 'small',
[`cla-nav-item-xs`]: size === 'xsmall',
};
}
hostData() {
return {
"role": "listitem"
};
}
render() {
return (h("div", { id: this.name, "data-name": this.name, class: this.getClassMap() }, this.navtitle && !this.inline ? h("span", { class: "cla-nav-title", role: "presentation" }, h("slot", null)) : h("a", { class: "cla-nav-item-link", href: this.href ? `${this.href}` : "#0" }, h("slot", null))));
}
static get is() { return "cla-nav-item"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["cla-nav-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["cla-nav-item.css"]
};
}
static get properties() {
return {
"active": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "false",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether nav tabs is active."
},
"attribute": "active",
"reflect": false
},
"navtitle": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "false",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether to display nav items as link or titles in block mode (this attribute will not work in the list is in inline mode)"
},
"attribute": "navtitle",
"reflect": false
},
"href": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "nav tab href link ."
},
"attribute": "href",
"reflect": false
},
"name": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "nav tab name & id - fills the 'data-name' and 'id' attributes of the `<li>`"
},
"attribute": "name",
"reflect": false
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Size",
"resolved": "\"default\" | \"large\" | \"small\" | \"xsmall\"",
"references": {
"Size": {
"location": "import",
"path": "../../interfaces"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The nav tab size."
},
"attribute": "size",
"reflect": false,
"defaultValue": "'default'"
}
};
}
static get events() {
return [{
"method": "claNavItemDidLoad",
"name": "claNavItemDidLoad",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when nav item loads."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
}