@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
59 lines • 2.33 kB
TypeScript
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
import { type TemplateResult } from 'lit';
import { createValidator, getValidityAnchor } from '../../utils/behaviors/constraint-validation';
import { CheckboxValidator } from '../../utils/behaviors/validators/checkbox-validator';
import { getFormState, getFormValue } from '../../utils/form/form-associated';
import { BaseIconButton } from './base-icon-button';
declare global {
interface HTMLElementTagNameMap {
"mdc-toggle-icon-button": MDCToggleIconButton;
}
}
declare const MDCToggleIconButton_base: import("../../utils/behaviors/mixin").MixinReturn<import("../../utils/behaviors/mixin").MixinReturn<typeof BaseIconButton & import("../../utils/form/form-associated").FormAssociatedConstructor, import("../../utils/form/form-associated").FormAssociated>, import("../../utils/behaviors/constraint-validation").ConstraintValidation>;
/**
* The toggle-icon-button component is a split of the icon-button component,
* which can toggle whether an item is selected or not. It can be used as a form element.
*
* @version
* Material Design 3 - Expressive
*
* @link
* https://m3.material.io/components/icon-buttons/specs
*/
export declare class MDCToggleIconButton extends MDCToggleIconButton_base {
static shadowRootOptions: ShadowRootInit;
disabled: boolean;
name: string;
selected: boolean;
required: boolean;
value: string;
/**
* We use the <input /> element as a replacement for the button element.
* The state is managed by the input element.
*/
protected readonly buttonElement: HTMLInputElement | null;
protected getRenderClasses(): {
togglable: boolean;
selected: boolean;
unselected: boolean;
container: boolean;
disabled: boolean;
'disable-morph': boolean;
};
protected render(): TemplateResult;
protected renderTouchTarget(): TemplateResult<1>;
private handleInput;
private handleChange;
[getFormValue](): string | null;
[getFormState](): string;
formResetCallback(): void;
formStateRestoreCallback(state: string): void;
[createValidator](): CheckboxValidator;
[getValidityAnchor](): HTMLInputElement | null;
}
export {};
//# sourceMappingURL=toggle-icon-button.d.ts.map