@synergy-design-system/angular/components/checkbox/index.d.ts

Angular wrappers for the Synergy Design System

import * as i0 from '@angular/core';
import { ElementRef, NgZone, EventEmitter } from '@angular/core';
import { SynCheckbox, SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
export { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';

/**
 * @summary Checkboxes allow the user to toggle an option on or off.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs
 * @status stable
 * @since 2.0
 *
 * @dependency syn-icon
 *
 * @slot - The checkbox's label.
 * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
 *
 * @event syn-blur - Emitted when the checkbox loses focus.
 * @event syn-change - Emitted when the checked state changes.
 * @event syn-focus - Emitted when the checkbox gains focus.
 * @event syn-input - Emitted when the checkbox receives input.
 * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart base - The component's base wrapper.
 * @csspart control - The square container that wraps the checkbox's checked state.
 * @csspart control--checked - Matches the control part when the checkbox is checked.
 * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
 * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
 * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.
 * @csspart label - The container that wraps the checkbox's label.
 * @csspart form-control-help-text - The help text's wrapper.
 */
declare class SynCheckboxComponent {
    nativeElement: SynCheckbox;
    private _ngZone;
    private modelSignal;
    constructor(e: ElementRef, ngZone: NgZone);
    /**
     * The event that will trigger the ngModel update.
     * By default, this is set to "syn-input".
     */
    set ngModelUpdateOn(v: keyof HTMLElementEventMap);
    get ngModelUpdateOn(): keyof HTMLElementEventMap;
    set title(v: SynCheckbox['title']);
    get title(): SynCheckbox['title'];
    /**
     * The name of the checkbox, submitted as a name/value pair with form data.
     */
    set name(v: SynCheckbox['name']);
    get name(): SynCheckbox['name'];
    /**
     * The current value of the checkbox, submitted as a name/value pair with form data.
     */
    set value(v: SynCheckbox['value']);
    get value(): SynCheckbox['value'];
    /**
     * The checkbox's size.
     */
    set size(v: SynCheckbox['size']);
    get size(): SynCheckbox['size'];
    /**
     * Disables the checkbox.
     */
    set disabled(v: '' | SynCheckbox['disabled']);
    get disabled(): SynCheckbox['disabled'];
    /**
     * Draws the checkbox in a checked state.
     */
    set checked(v: '' | SynCheckbox['checked']);
    get checked(): SynCheckbox['checked'];
    /**
  * Draws the checkbox in an indeterminate state.
  * This is usually applied to checkboxes that represents a "select
  all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
   */
    set indeterminate(v: '' | SynCheckbox['indeterminate']);
    get indeterminate(): SynCheckbox['indeterminate'];
    /**
  * By default, form controls are associated with the nearest containing `<form>` element.
  * This attribute allows you
  to place the form control outside of a form and associate it with the form that has this `id`.
  * The form must be in
  the same document or shadow root for this to work.
   */
    set form(v: SynCheckbox['form']);
    get form(): SynCheckbox['form'];
    /**
     * Makes the checkbox a required field.
     */
    set required(v: '' | SynCheckbox['required']);
    get required(): SynCheckbox['required'];
    /**
     * The checkbox's help text.
     * If you need to display HTML, use the `help-text` slot instead.
     */
    set helpText(v: SynCheckbox['helpText']);
    get helpText(): SynCheckbox['helpText'];
    /**
     * Emitted when the checkbox loses focus.
     */
    synBlurEvent: EventEmitter<SynBlurEvent>;
    /**
     * Emitted when the checked state changes.
     */
    synChangeEvent: EventEmitter<SynChangeEvent>;
    /**
     * Emitted when the checkbox gains focus.
     */
    synFocusEvent: EventEmitter<SynFocusEvent>;
    /**
     * Emitted when the checkbox receives input.
     */
    synInputEvent: EventEmitter<SynInputEvent>;
    /**
     * Emitted when the form control has been checked for validity and its constraints aren't satisfied.
     */
    synInvalidEvent: EventEmitter<SynInvalidEvent>;
    /**
     * Support for two way data binding
     */
    checkedChange: EventEmitter<boolean>;
    static ɵfac: i0.ɵɵFactoryDeclaration<SynCheckboxComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SynCheckboxComponent, "syn-checkbox", never, { "ngModelUpdateOn": { "alias": "ngModelUpdateOn"; "required": false; }; "title": { "alias": "title"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "form": { "alias": "form"; "required": false; }; "required": { "alias": "required"; "required": false; }; "helpText": { "alias": "helpText"; "required": false; }; }, { "synBlurEvent": "synBlurEvent"; "synChangeEvent": "synChangeEvent"; "synFocusEvent": "synFocusEvent"; "synInputEvent": "synInputEvent"; "synInvalidEvent": "synInvalidEvent"; "checkedChange": "checkedChange"; }, never, ["*"], true, never>;
}

export { SynCheckboxComponent };