// Copyright 2021 The Chromium Authors // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */ import '../../kit/kit.js'; import * as Lit from '../../lit/lit.js'; import * as VisualLogging from '../../visual_logging/visual_logging.js'; import buttonStyles from './button.css.js'; const {html, Directives: {ifDefined, ref, classMap}} = Lit; declare global { interface HTMLElementTagNameMap { 'devtools-button': Button; } } export const enum Variant { PRIMARY = 'primary', TONAL = 'tonal', OUTLINED = 'outlined', TEXT = 'text', TOOLBAR = 'toolbar', // Just like toolbar but has a style similar to a primary button. PRIMARY_TOOLBAR = 'primary_toolbar', ICON = 'icon', ICON_TOGGLE = 'icon_toggle', ADORNER_ICON = 'adorner_icon', } export const enum Size { MICRO = 'MICRO', SMALL = 'SMALL', REGULAR = 'REGULAR', } export const enum ToggleType { PRIMARY = 'primary-toggle', RED = 'red-toggle', } type ButtonType = 'button'|'submit'|'reset'; interface ButtonState { variant: Variant; size?: Size; reducedFocusRing?: boolean; disabled: boolean; toggled?: boolean; toggleOnClick?: boolean; checked?: boolean; active: boolean; spinner?: boolean; type: ButtonType; value?: string; iconName?: string; toggledIconName?: string; toggleType?: ToggleType; jslogContext?: string; longClickable?: boolean; inverseColorTheme?: boolean; } interface CommonButtonData { variant: Variant; iconName?: string; toggledIconName?: string; toggleType?: ToggleType; toggleOnClick?: boolean; size?: Size; reducedFocusRing?: boolean; disabled?: boolean; toggled?: boolean; checked?: boolean; active?: boolean; spinner?: boolean; type?: ButtonType; value?: string; title?: string; jslogContext?: string; longClickable?: boolean; inverseColorTheme?: boolean; /** * Sets aria-label on the internal `, this.#shadow, {host: this}); // clang-format on } // Based on https://web.dev/more-capable-form-controls/ to make custom elements form-friendly. // Form controls usually expose a "value" property. get value(): string { return this.#props.value || ''; } set value(value: string) { this.#props.value = value; } // The following properties and methods aren't strictly required, // but browser-level form controls provide them. Providing them helps // ensure consistency with browser-provided controls. get form(): HTMLFormElement|null { return this.#internals.form; } get name(): string|null { return this.getAttribute('name'); } get type(): ButtonType { return this.#props.type; } get validity(): ValidityState { return this.#internals.validity; } get validationMessage(): string { return this.#internals.validationMessage; } get willValidate(): boolean { return this.#internals.willValidate; } checkValidity(): boolean { return this.#internals.checkValidity(); } reportValidity(): boolean { return this.#internals.reportValidity(); } } customElements.define('devtools-button', Button);