UNPKG

@sandlada/mdc

Version:

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

74 lines 3.02 kB
/** * @license * Copyright 2025 Kai-Orion & Sandlada * SPDX-License-Identifier: MIT */ import { type PropertyValues, type TemplateResult } from 'lit'; import { createValidator, getValidityAnchor } from '../../utils/behaviors/constraint-validation'; import { CheckboxValidator } from '../../utils/behaviors/validators/checkbox-validator'; import { RadioValidator } from '../../utils/behaviors/validators/radio-validator'; import { SelectionController } from '../../utils/controller/selection-controller'; import { getFormState, getFormValue } from '../../utils/form/form-associated'; import { BaseMDCIconButton } from './base-icon-button'; declare global { interface HTMLElementTagNameMap { "mdc-toggle-icon-button": MDCToggleIconButton; } } declare const MDCToggleIconButton_base: Omit<typeof BaseMDCIconButton, "prototype"> & (new () => BaseMDCIconButton & import("../../utils/behaviors/constraint-validation").ConstraintValidation & import("lit").LitElement & import("../../utils/form/form-associated").FormAssociated & import("../../utils/behaviors/element-internals").WithElementInternals); /** * 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. * * @alias * mdc-toggle-icon-button * * @slot default * * @version * Material Design 3 - Expressive * * @link * https://m3.material.io/components/icon-buttons/specs */ export declare class MDCToggleIconButton extends MDCToggleIconButton_base { static shadowRootOptions: ShadowRootInit; type: 'radio' | 'checkbox'; checked: boolean; value: 'on' | (string & {}); required: boolean; disabled: boolean; name: string; protected readonly selectionController: SelectionController; constructor(); connectedCallback(): void; protected willUpdate(changedProperties: PropertyValues<this>): void; protected getRenderClasses(): { container: boolean; disabled: boolean; 'disable-morph': boolean; togglable: boolean; selected: boolean; unselected: boolean; 'has-default-icon': boolean; 'has-active-icon': boolean; 'has-inactive-icon': boolean; }; protected render(): TemplateResult; protected renderIcon(): TemplateResult<1>; protected renderTouchTarget(): TemplateResult<1>; protected hasDefaultIcon: boolean; protected hasActiveIcon: boolean; protected hasInactiveIcon: boolean; protected handleDefaultIconSlotChange(e: Event): void; protected handleActiveIconSlotChange(e: Event): void; protected handleInactiveIconSlotChange(e: Event): void; [getFormValue](): "on" | (string & {}) | null; [getFormState](): string; formResetCallback(): void; formStateRestoreCallback(state: string): void; [createValidator](): CheckboxValidator | RadioValidator; [getValidityAnchor](): HTMLElement | null; } export {}; //# sourceMappingURL=toggle-icon-button.d.ts.map