dap-design-system/dist/components/toggle-button/toggle-button.component.d.ts

Official design system for the DÁP (dap.gov.hu)

import { PropertyValues } from 'lit';
import { GenericFormElement } from '../../internal/mixin/genericFormElement';
import { ButtonShape } from '../../common/types';
/**
 * `dap-ds-toggle-button` is a custom toggle button component.
 * @element dap-ds-toggle-button
 * @summary A toggle button is a button that can be toggled on (active) or off (inactive).
 * @title - Toggle button
 *
 * @property { 'xs' | 'sm' | 'md' | 'lg' } size - The size of the toggle button. Default is `md`
 * @property {string} sizeMap - Responsive size map (e.g. "md:lg")
 *
 * @slot - The content of the toggle button.
 *
 * @csspart base - The main button container.
 * @csspart high-contrast - The high contrast part of the button.
 *
 * @cssproperty --dds-toggle-button-min-width-lg - Minimum width of the large toggle button (default: var(--dds-spacing-2400))
 * @cssproperty --dds-toggle-button-min-width-md - Minimum width of the medium toggle button (default: var(--dds-spacing-2000))
 * @cssproperty --dds-toggle-button-min-width-sm - Minimum width of the small toggle button (default: var(--dds-spacing-1200))
 * @cssproperty --dds-toggle-button-min-width-xs - Minimum width of the extra small toggle button (default: var(--dds-spacing-1200))
 * @cssproperty --dds-toggle-button-height-lg - Height of the large toggle button (default: var(--dds-spacing-1200))
 * @cssproperty --dds-toggle-button-height-md - Height of the medium toggle button (default: var(--dds-spacing-1000))
 * @cssproperty --dds-toggle-button-height-sm - Height of the small toggle button (default: var(--dds-spacing-800))
 * @cssproperty --dds-toggle-button-height-xs - Height of the extra small toggle button (default: var(--dds-spacing-600))
 * @cssproperty --dds-toggle-button-padding-lg - Padding of the large toggle button (default: var(--dds-spacing-300) var(--dds-spacing-400))
 * @cssproperty --dds-toggle-button-padding-md - Padding of the medium toggle button (default: var(--dds-spacing-300))
 * @cssproperty --dds-toggle-button-padding-sm - Padding of the small toggle button (default: var(--dds-spacing-200))
 * @cssproperty --dds-toggle-button-padding-xs - Padding of the extra small toggle button (default: var(--dds-spacing-150) var(--dds-spacing-200))
 * @cssproperty --dds-toggle-button-font-size-lg - Font size of the large toggle button (default: 1.125rem)
 * @cssproperty --dds-toggle-button-font-size-md - Font size of the medium toggle button (default: 1rem)
 * @cssproperty --dds-toggle-button-font-size-sm - Font size of the small toggle button (default: 0.875rem)
 * @cssproperty --dds-toggle-button-font-size-xs - Font size of the extra small toggle button (default: var(--dds-font-xs))
 * @cssproperty --dds-toggle-button-border-enabled - Border color in enabled state (default: var(--dds-button-toggle-border-enabled))
 * @cssproperty --dds-toggle-button-background-enabled - Background color in enabled state (default: var(--dds-button-toggle-background-enabled))
 * @cssproperty --dds-toggle-button-content-enabled - Content/text color in enabled state (default: var(--dds-button-toggle-content-enabled))
 * @cssproperty --dds-toggle-button-border-hover - Border color in hover state (default: var(--dds-button-toggle-border-hover))
 * @cssproperty --dds-toggle-button-background-hover - Background color in hover state (default: var(--dds-button-toggle-background-hover))
 * @cssproperty --dds-toggle-button-border-pressed - Border color in pressed state (default: var(--dds-button-toggle-border-pressed))
 * @cssproperty --dds-toggle-button-background-pressed - Background color in pressed state (default: var(--dds-button-toggle-background-pressed))
 * @cssproperty --dds-toggle-button-background-selected-enabled - Background color in selected enabled state (default: var(--dds-button-toggle-background-selected-enabled))
 * @cssproperty --dds-toggle-button-content-selected-enabled - Content/text color in selected enabled state (default: var(--dds-button-toggle-content-selected-enabled))
 * @cssproperty --dds-toggle-button-background-selected-hover - Background color in selected hover state (default: var(--dds-button-toggle-background-selected-hover))
 * @cssproperty --dds-toggle-button-background-selected-pressed - Background color in selected pressed state (default: var(--dds-button-toggle-background-selected-pressed))
 * @cssproperty --dds-toggle-button-border-disabled - Border color in disabled state (default: var(--dds-button-toggle-border-disabled))
 * @cssproperty --dds-toggle-button-background-disabled - Background color in disabled state (default: var(--dds-button-toggle-background-disabled))
 * @cssproperty --dds-toggle-button-content-disabled - Content/text color in disabled state (default: var(--dds-button-toggle-content-disabled))
 * @cssproperty --dds-toggle-button-highcontrast-border - High contrast border color (default: var(--dds-button-toggle-highcontrast-border))
 * @cssproperty --dds-toggle-button-highcontrast-border-hover - High contrast border color on hover (default: var(--dds-button-toggle-highcontrast-border-hover))
 *
 */
export default class DapDSToggleButton extends GenericFormElement {
    static tagName: string;
    constructor();
    /** Whether the button is active. */
    active: boolean;
    /** The shape of the button
     * @type { 'button' | 'circle' }
     */
    shape: ButtonShape;
    sizeChildren: string;
    static readonly styles: import('lit').CSSResult;
    /** Maps effectiveSize from SizedMixin to toggle button visual size (xxs→xs). */
    private get toggleButtonSize();
    get focusElement(): HTMLButtonElement;
    protected firstUpdated(_changedProperties: PropertyValues): void;
    protected updated(changedProperties: PropertyValues): void;
    private _sizeSlottedChildren;
    private handleClick;
    render(): import('lit-html').TemplateResult;
}