87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
import {
|
|
html,
|
|
LitElement,
|
|
unsafeCSS,
|
|
type CSSResultGroup,
|
|
type TemplateResult,
|
|
} from 'lit';
|
|
import { customElement, property } from 'lit/decorators.js';
|
|
|
|
import { getLocalizationKeyForPath } from '../../components-lib/editor/form-labels.js';
|
|
import type { FormsInput } from '../../components-lib/editor/forms-controller.js';
|
|
import { KeyboardShortcutsController } from '../../components-lib/editor/keyboard-shortcuts-controller.js';
|
|
import { CONF_VIEW_KEYBOARD_SHORTCUTS } from '../../config/const.js';
|
|
import type { KeyboardShortcut } from '../../config/schema/view.js';
|
|
import type { HomeAssistant } from '../../ha/types.js';
|
|
import { localize } from '../../localize/localize.js';
|
|
import editorKeyboardShortcutsStyle from '../../scss/editor-keyboard-shortcuts.scss';
|
|
import { renderDocumentation } from './doc-link.js';
|
|
import { renderForms } from './form.js';
|
|
|
|
import './../icon';
|
|
import './../key-assigner';
|
|
|
|
// The keyboard shortcuts panel. Hand-built rather than an `ha-form` expandable
|
|
// because a shortcut is assigned by pressing a key, which no selector can
|
|
// express.
|
|
@customElement('advanced-camera-card-editor-keyboard-shortcuts')
|
|
export class AdvancedCameraCardEditorKeyboardShortcuts extends LitElement {
|
|
@property({ attribute: false })
|
|
public hass?: HomeAssistant;
|
|
|
|
@property({ attribute: false })
|
|
public input?: FormsInput;
|
|
|
|
private _controller = new KeyboardShortcutsController(this, (path) =>
|
|
renderDocumentation(path),
|
|
);
|
|
|
|
protected willUpdate(): void {
|
|
if (this.input) {
|
|
this._controller.setInput(this.input);
|
|
}
|
|
}
|
|
|
|
protected render(): TemplateResult {
|
|
return html`
|
|
<ha-expansion-panel outlined>
|
|
<advanced-camera-card-icon
|
|
slot="leading-icon"
|
|
.icon=${{ icon: 'mdi:keyboard' }}
|
|
></advanced-camera-card-icon>
|
|
<span slot="header"
|
|
>${localize('config.view.keyboard_shortcuts.editor_label')}</span
|
|
>
|
|
<div class="values" @transitionend=${(ev: Event) => ev.stopPropagation()}>
|
|
${renderDocumentation(CONF_VIEW_KEYBOARD_SHORTCUTS.split('.'))}
|
|
${renderForms(this.hass, this._controller.getContexts())}
|
|
${Object.keys(this._controller.getShortcuts()).map((name) =>
|
|
this._renderKeyAssigner(name),
|
|
)}
|
|
</div>
|
|
</ha-expansion-panel>
|
|
`;
|
|
}
|
|
|
|
private _renderKeyAssigner(name: string): TemplateResult {
|
|
return html`<advanced-camera-card-key-assigner
|
|
.label=${localize(
|
|
getLocalizationKeyForPath([...CONF_VIEW_KEYBOARD_SHORTCUTS.split('.'), name]),
|
|
)}
|
|
.value=${this._controller.getShortcuts()[name]}
|
|
@value-changed=${(ev: CustomEvent<{ value: KeyboardShortcut | null }>) =>
|
|
this._controller.setShortcut(name, ev.detail.value)}
|
|
></advanced-camera-card-key-assigner>`;
|
|
}
|
|
|
|
static get styles(): CSSResultGroup {
|
|
return unsafeCSS(editorKeyboardShortcutsStyle);
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'advanced-camera-card-editor-keyboard-shortcuts': AdvancedCameraCardEditorKeyboardShortcuts;
|
|
}
|
|
}
|