@limetech/lime-elements
Version:
165 lines (164 loc) • 5.31 kB
JavaScript
import { Host, h } from "@stencil/core";
import { normalizeHotkeyString } from "../../../util/hotkeys";
/**
* Meta content for menu list items
*
* This sub-component is intended to be passed as `primaryComponent`
* to `limel-list-item`, when it is used in the menu list.
* It includes command text, badge, and chevron, which are the
* features of menu list items.
*
* @private
*/
export class MenuItemMeta {
constructor() {
/**
* Will be set to `true` when the menu item is disabled.
*/
this.disabled = false;
/**
* Shows a submenu chevron to indicate nested items
*/
this.showChevron = false;
}
render() {
return (h(Host, { key: '4341b1cd34952fdd2dc40bc3c4b7eb909646d880' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
}
renderCommandText() {
if (this.hotkey) {
const hotkey = normalizeHotkeyString(this.hotkey);
if (hotkey) {
return h("limel-hotkey", { value: hotkey, disabled: this.disabled });
}
}
if (!this.commandText) {
return;
}
return h("span", { class: "command-text" }, this.commandText);
}
renderBadge() {
if (this.badge === undefined) {
return;
}
return h("limel-badge", { label: String(this.badge) });
}
renderChevron() {
if (!this.showChevron) {
return;
}
return h("div", { class: "chevron", "aria-hidden": "true" });
}
static get is() { return "limel-menu-item-meta"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["menu-item-meta.scss"]
};
}
static get styleUrls() {
return {
"$": ["menu-item-meta.css"]
};
}
static get properties() {
return {
"commandText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Use to display optional keyboard shortcut or command hint, e.g. `\u2318 + K`"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "command-text"
},
"hotkey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Hotkey to display. When provided, `commandText` is ignored."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "hotkey"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Will be set to `true` when the menu item is disabled."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "disabled",
"defaultValue": "false"
},
"badge": {
"type": "any",
"mutable": false,
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Optional badge value"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "badge"
},
"showChevron": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Shows a submenu chevron to indicate nested items"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "show-chevron",
"defaultValue": "false"
}
};
}
}