@conectate/ct-checkbox/ct-checkbox.d.ts

HTML checkbox web component based on Material design

import "@conectate/ct-icon";
import { CtLit } from "@conectate/ct-lit";
import { PropertyValueMap } from "lit";
/**
 * ## `ct-checkbox`
 * A customizable checkbox component built with LitElement.
 *
 * ### Usage
 * ```html
 * <ct-checkbox>Check me</ct-checkbox>
 * <ct-checkbox checked>I'm checked</ct-checkbox>
 * <ct-checkbox indeterminate>Indeterminate state</ct-checkbox>
 * <ct-checkbox disabled>Can't check me</ct-checkbox>
 * ```
 *
 * ### Events
 * - `checked`: Fired when the checked state changes, with `detail: {checked: boolean}`
 * - `change`: Standard input change event (redispatched)
 *
 * ### Styling
 * Custom properties available for styling:
 * - `--ct-checkbox-box-size`: Size of the checkbox (default: 24px)
 * - `--ct-checkbox-box-border-radius`: Border radius of checkbox (default: 8px)
 * - `--ct-checkbox-height`: Height of the checkbox component (default: same as box size)
 * - `--ct-checkbox-box-border-size`: Border size of unchecked box (default: 3px)
 * - `--color-primary`: Color used for the checked state
 * - `--color-on-primary`: Color of the checkmark
 * - `--color-on-background`: Color of the unchecked checkbox border
 *
 * @group ct-elements
 * @element ct-checkbox
 * @fires checked - Fired when checked state changes
 * @fires change - Standard input change event
 */
export declare class CtCheckbox extends CtLit {
    /**
     * When true, the checkbox is in the indeterminate state
     */
    indeterminate: boolean;
    /**
     * When true, the checkbox is disabled and cannot be interacted with
     */
    disabled: boolean;
    /**
     * When true, the checkbox is in the checked state
     */
    checked: boolean;
    /**
     * Value associated with the checkbox
     */
    value: any;
    /**
     * Name attribute for form submission
     */
    name: string;
    /**
     * Text label (alternative to using the slot)
     */
    label: string;
    /**
     * Reference to the internal input element
     */
    $input: HTMLInputElement;
    static styles: import("lit").CSSResult[];
    /**
     * Renders the checkbox component
     * @returns {TemplateResult} The rendered template
     */
    render(): import("lit").TemplateResult<1>;
    /**
     * Handles property updates and triggers events when checked state changes
     * @param {PropertyValueMap<any> | Map<PropertyKey, unknown>} _changedProperties - Map of changed properties
     */
    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    /**
     * Programmatically clicks the checkbox
     */
    click(): void;
    /**
     * Updates the checked state based on the input element's checked state
     * @private
     */
    toogleCheck(): void;
    /**
     * Handles the change event from the input element
     * @param {Event} event - The change event
     * @private
     */
    private handleChange;
    /**
     * Dispatches a checked event when the checked state changes
     * @private
     */
    change(): void;
}
declare global {
    interface HTMLElementTagNameMap {
        "ct-checkbox": CtCheckbox;
    }
}