@limetech/lime-elements
Version:
93 lines (92 loc) • 3.28 kB
JavaScript
import { Host, h } from "@stencil/core";
import { tokenizeHotkeyString } from "../../util/hotkeys";
import { isAppleDevice } from "../../util/device";
import { formatDisplayToken } from "./format-display-token";
/**
* This is a display-only component used to visualize keyboard shortcuts.
* It renders hotkey strings as styled `<kbd>` elements with
* platform-aware glyphs (e.g. `⌘` on macOS, `⊞ Win` on Windows).
*
* It does **not** listen for or handle any keyboard events.
* Keyboard event handling is the responsibility of the parent component
* (e.g. `limel-menu` or `limel-select`).
*
* @exampleComponent limel-example-hotkey-basic
* @exampleComponent limel-example-hotkey-disabled
* @private
*/
export class Hotkey {
constructor() {
/**
* When `true`, the hotkey is rendered in a visually disabled state.
*/
this.disabled = false;
}
componentWillLoad() {
this.isApple = isAppleDevice();
}
render() {
const parts = tokenizeHotkeyString(this.value);
const displayParts = parts.map((part) => formatDisplayToken(part, this.isApple));
const ariaLabel = displayParts
.map((p) => p.ariaName)
.filter(Boolean)
.join(' ');
return (h(Host, { key: 'ab1b9d31080740d19a4633c8c5bc92b02625c111', "aria-label": ariaLabel || undefined }, displayParts.map(({ display, isGlyph }, index) => (h("kbd", { key: `${parts[index]}-${index}`, class: isGlyph ? 'is-glyph' : undefined }, h("span", null, display))))));
}
static get is() { return "limel-hotkey"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["hotkey.scss"]
};
}
static get styleUrls() {
return {
"$": ["hotkey.css"]
};
}
static get properties() {
return {
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The hotkey string to visualize, e.g. `\"meta+c\"` or `\"shift+enter\"`."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "value"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, the hotkey is rendered in a visually disabled state."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "disabled",
"defaultValue": "false"
}
};
}
}