chrome-devtools-frontend
Version:
Chrome DevTools UI
94 lines (76 loc) • 2.38 kB
text/typescript
// Copyright 2024 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/* eslint-disable rulesdir/no-lit-render-outside-of-view */
import {html, nothing, render} from '../../lit/lit.js';
import * as VisualLogging from '../../visual_logging/visual_logging.js';
import switchStyles from './switch.css.js';
export class SwitchChangeEvent extends Event {
static readonly eventName = 'switchchange';
constructor(readonly checked: boolean) {
super(SwitchChangeEvent.eventName);
}
}
export class Switch extends HTMLElement {
readonly #shadow = this.attachShadow({mode: 'open'});
#checked = false;
#disabled = false;
#jslogContext = '';
connectedCallback(): void {
this.#render();
}
set checked(isChecked: boolean) {
this.#checked = isChecked;
this.#render();
}
get checked(): boolean {
return this.#checked;
}
set disabled(isDisabled: boolean) {
this.#disabled = isDisabled;
this.#render();
}
get disabled(): boolean {
return this.#disabled;
}
get jslogContext(): string {
return this.#jslogContext;
}
set jslogContext(jslogContext: string) {
this.#jslogContext = jslogContext;
this.#render();
}
#handleChange = (ev: Event): void => {
this.#checked = (ev.target as HTMLInputElement).checked;
this.dispatchEvent(new SwitchChangeEvent(this.#checked));
};
#render(): void {
const jslog = this.#jslogContext && VisualLogging.toggle(this.#jslogContext).track({change: true});
/* eslint-disable rulesdir/inject-checkbox-styles */
// clang-format off
render(html`
<style>${switchStyles}</style>
<label role="button" jslog=${jslog || nothing}>
<input type="checkbox"
@change=${this.#handleChange}
?disabled=${this.#disabled}
.checked=${this.#checked}
>
<span class="slider" @click=${(ev: Event) => ev.stopPropagation()}></span>
</label>
`, this.#shadow, {host: this});
// clang-format on
/* eslint-enable rulesdir/inject-checkbox-styles */
}
}
customElements.define('devtools-switch', Switch);
declare global {
interface HTMLElementTagNameMap {
'devtools-switch': Switch;
}
}
declare global {
interface HTMLElementEventMap {
[SwitchChangeEvent.eventName]: SwitchChangeEvent;
}
}