import {HTMLTemplateResult, LitElement, css, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import {classMap} from 'lit/directives/class-map.js';
export enum CommandStatus {
InCommand = 'in-command',
NoCommand = 'no-command',
PartialCommand = 'partial-command',
SharedCommand = 'shared-command',
CommandAvailable = 'command-available',
Blocked = 'blocked',
}
@customElement('obc-badge-command')
export class ObcBadgeCommand extends LitElement {
@property({type: String}) status: CommandStatus = CommandStatus.NoCommand;
@property({type: Boolean}) large: boolean = false;
get iconLarge(): HTMLTemplateResult {
if (this.status === CommandStatus.InCommand) {
return html``;
} else if (this.status === CommandStatus.NoCommand) {
return html` `;
} else if (this.status === CommandStatus.PartialCommand) {
return html` `;
} else if (this.status === CommandStatus.SharedCommand) {
return html` `;
} else if (this.status === CommandStatus.CommandAvailable) {
return html``;
} else if (this.status === CommandStatus.Blocked) {
return html`
`;
}
throw new Error('Invalid status');
}
get iconSmall(): HTMLTemplateResult {
if (this.status === CommandStatus.InCommand) {
return html` `;
} else if (this.status === CommandStatus.NoCommand) {
return html` `;
} else if (this.status === CommandStatus.PartialCommand) {
return html` `;
} else if (this.status === CommandStatus.SharedCommand) {
return html` `;
} else if (this.status === CommandStatus.CommandAvailable) {
return html` `;
} else if (this.status === CommandStatus.Blocked) {
return html`
`;
}
throw new Error('Invalid status');
}
override render() {
const icon = this.large ? this.iconLarge : this.iconSmall;
return html`
${icon}
`;
}
static override styles = css`
.wrapper {
display: flex;
justify-content: center;
align-items: center;
line-height: 0;
height: 16px;
width: 16px;
}
.wrapper.large {
height: 24px;
width: 24px;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
'obc-badge-command': ObcBadgeCommand;
}
}