@3mo/command-palette/dist/KeyboardKey.js

Command-palettes are a common way to provide users with a list of actions they can perform in a given context.

var KeyboardKey_1;
import { __decorate } from "tslib";
import { Component, component, html, property, css, join } from '@a11d/lit';
import * as System from 'detect-browser';
let KeyboardKey = KeyboardKey_1 = class KeyboardKey extends Component {
    static get styles() {
        return css `
			:host {
				--mo-keyboard-key-background: var(--mo-color-transparent-gray-3);
			}

			kbd {
				display: inline-block;
				font-size: 0.85em;
				display: flex;
				align-items: center;
				justify-content: center;
				white-space: nowrap;
				font-weight: 700;
				padding: 2px 4px;
				background: var(--mo-keyboard-key-background);
				border: 1px solid var(--mo-keyboard-key-border-color, var(--mo-keyboard-key-background));
				border-radius: var(--mo-border-radius);

				mo-icon {
					font-size: inherit;
				}
			}
		`;
    }
    get keys() {
        return this.key.split(/[\s+]/).map(key => key.trim()).filter(Boolean);
    }
    get template() {
        return html `
			<mo-flex alignItems='center' direction='horizontal' gap='2px'>
				${join(this.keys.map(key => html `<kbd>${this.getKeyTemplate(key)}</kbd>`), !this.splitter ? html.nothing : html `<span>${this.splitter}</span>`)}
			</mo-flex>
		`;
    }
    getKeyTemplate(key) {
        switch (true) {
            case key === 'Escape':
                return 'ESC';
            case key === 'Meta':
                return System.detect()?.os === 'Mac OS' ? '⌘' : 'Ctrl';
            case KeyboardKey_1.iconsByKey.has(key):
                return html `<mo-icon icon=${KeyboardKey_1.iconsByKey.get(key)}></mo-icon>`;
            default:
                return key;
        }
    }
};
KeyboardKey.iconsByKey = new Map([
    ['Backspace', 'backspace'],
    ['Tab', 'keyboard_tab'],
    ['ArrowUp', 'arrow_upward'],
    ['ArrowDown', 'arrow_downward'],
    ['ArrowLeft', 'arrow_forward'],
    ['ArrowRight', 'arrow_back'],
]);
__decorate([
    property()
], KeyboardKey.prototype, "key", void 0);
__decorate([
    property()
], KeyboardKey.prototype, "splitter", void 0);
KeyboardKey = KeyboardKey_1 = __decorate([
    component('mo-keyboard-key')
], KeyboardKey);
export { KeyboardKey };