dap-design-system/dist/components/switch/switch.component.d.ts

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

import { LabeledChoiceElement } from '../../internal/mixin/labeledChoiceElement';
import { default as DapDSFeedback } from '../feedback/feedback.component';
import { default as DapDSFormLabel } from '../form/form-label/form-label.component';
import { default as DapDSIcon } from '../icon/icon.component';
import { default as DapDSTypography } from '../typography/typography.component';
/**
 * `dap-ds-switch`
 * @summary A switch is a graphical control element that allows the user to toggle between two states.
 * @element dap-ds-switch
 * @title - Switch
 *
 * @property {string} name - The name of the switch.
 * @property {string} value - The value of the switch.
 * @property {string} label - The label of the switch.
 * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)
 * @property {string} description - The description of the switch.
 * @property {boolean} checked - The checked state of the switch.
 * @property {'xs' | 'sm' | 'lg'} size - The size of the switch.
 * @property {boolean} disabled - The disabled state of the switch.
 * @property {boolean} readonly - Whether the switch is readonly (cannot be changed but value is submitted with form).
 * @property {boolean} required - The required state of the switch.
 * @property {'left' | 'right'} labelPlacement - The placement of the label.
 * @property {'top' | 'bottom'} descriptionPlacement - The placement of the description.
 * @property {boolean} subtle - The weight of the label.
 * @property {string} feedback - The feedback of the switch.
 * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the switch.
 * @property {boolean} optional - The optional state of the switch.
 * @property {string} optionalLabel - The optional label of the switch.
 * @property {string} requiredLabel - The required indicator of the switch. (default: '*')
 *
 * @cssProperty --dds-switch-width - Width of the switch control (default: var(--dds-spacing-1000)
 * @cssProperty --dds-switch-height - Height of the switch control (default: var(--dds-spacing-600))
 * @cssProperty --dds-switch-thumb-width - Width of the switch thumb (default: var(--dds-spacing-500))
 * @cssProperty --dds-switch-thumb-height - Height of the switch thumb (default: var(--dds-spacing-500))
 * @cssProperty --dds-switch-thumb-margin - Margin around the switch thumb (default: 0.125rem)
 * @cssProperty --dds-switch-thumb-color - Color of the switch thumb (default: var(--dds-button-primary-icon-enabled))
 * @cssProperty --dds-switch-unchecked-bg - Background color of the switch when unchecked (default: var(--dds-background-neutral-base-inverted))
 * @cssProperty --dds-switch-checked-bg - Background color of the switch when checked (default: var(--dds-background-brand-base-inverted))
 * @cssProperty --dds-switch-invalid-bg - Background color of the switch when invalid (default: var(--dds-background-negative-base-inverted))
 * @cssProperty --dds-switch-disabled-bg - Background color of the switch when disabled (default: var(--dds-background-neutral-disabled))
 * @cssProperty --dds-switch-readonly-bg - Background color of the switch when readonly (default: var(--dds-background-neutral-disabled))
 * @cssProperty --dds-switch-wrapper-padding - Padding of the switch wrapper (default: var(--dds-spacing-400))
 * @cssProperty --dds-switch-wrapper-bg - Background color of the switch wrapper (default: var(--dds-background-neutral-subtle))
 * @cssProperty --dds-switch-border-color - Border color of the switch (default: var(--dds-border-neutral-subtle))
 * @cssProperty --dds-switch-high-contrast-border-color - Border color of the switch in high contrast mode (default: var(--dds-border-neutral-transparent-interactive, #fff500))
 *
 * @event {{ value: string }} dds-change - Fired when the input value changes.
 * @event {{ void }} dds-blur - Emitted when the input loses focus.
 * @event {{ void }} dds-focus - Emitted when the input gains focus.
 * @event {{ value: string }} dds-input - Emitted when the input receives input.
 *
 * @csspart base - The main switch container.
 * @csspart baselabel - The main label container
 * @csspart label - The label of the switch.
 * @csspart input - The native input of the switch.
 * @csspart control - The control of the switch.
 * @csspart description - The description of the switch.
 */
export default class DapDSSwitch extends LabeledChoiceElement {
    static tagName: string;
    static dependencies: {
        'dap-ds-icon': typeof DapDSIcon;
        'dap-ds-form-label': typeof DapDSFormLabel;
        'dap-ds-typography': typeof DapDSTypography;
        'dap-ds-feedback': typeof DapDSFeedback;
    };
    private static nextId;
    private readonly inputId;
    private readonly labelId;
    private readonly descriptionId;
    private readonly input;
    /** This sets up border around the switch, when true. */
    border: boolean;
    /** The type of the switch
     * @type {'normal' | 'background'}
     */
    type: 'normal' | 'background';
    static readonly styles: import('lit').CSSResult;
    constructor();
    /**
     * Validates property combinations and logs warnings for invalid states.
     * @private
     */
    private validateProperties;
    /**
     * Gets the aria-describedby attribute value by combining description and feedback IDs.
     * @returns {string | undefined} Space-separated IDs or undefined if none exist
     * @private
     */
    private getAriaDescribedBy;
    /**
     * Handles click events on the switch.
     * Manages the checked state transitions and emits change events.
     * @private
     */
    private readonly handleClick;
    get focusElement(): HTMLInputElement;
    /**
     * Programmatically focuses the switch input element.
     * @public
     */
    focus(): void;
    /**
     * Programmatically blurs the switch input element.
     * @public
     */
    blur(): void;
    /**
     * Handles invalid events on the switch input.
     * Prevents the default browser validation UI from showing and manages invalid state.
     * @param {Event} event - The invalid event
     * @private
     */
    handleInvalid(event: Event): void;
    /**
     * Handles keyboard events on the switch.
     * Provides enhanced keyboard navigation and accessibility.
     * @param {KeyboardEvent} event - The keyboard event
     * @private
     */
    private handleKeyDown;
    render(): import('lit-html').TemplateResult;
}