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

Angular wrappers for the Synergy Design System

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

/**
 * @summary Switches allow the user to toggle an option on or off.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-switch--docs
 * @status stable
 * @since 2.0
 *
 * @slot - The switch's label.
 * @slot help-text - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.
 *
 * @event syn-blur - Emitted when the control loses focus.
 * @event syn-change - Emitted when the control's checked state changes.
 * @event syn-input - Emitted when the control receives input.
 * @event syn-focus - Emitted when the control gains focus.
 * @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 control that houses the switch's thumb.
 * @csspart thumb - The switch's thumb.
 * @csspart label - The switch's label.
 * @csspart form-control-help-text - The help text's wrapper.
 *
 * @cssproperty --width - The width of the switch.
 * @cssproperty --height - The height of the switch.
 * @cssproperty --thumb-size - The size of the thumb.
 */
declare class SynSwitchComponent {
    nativeElement: SynSwitch;
    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: SynSwitch['title']);
    get title(): SynSwitch['title'];
    /**
     * The name of the switch, submitted as a name/value pair with form data.
     */
    set name(v: SynSwitch['name']);
    get name(): SynSwitch['name'];
    /**
     * The current value of the switch, submitted as a name/value pair with form data.
     */
    set value(v: SynSwitch['value']);
    get value(): SynSwitch['value'];
    /**
     * The switch's size.
     */
    set size(v: SynSwitch['size']);
    get size(): SynSwitch['size'];
    /**
     * Disables the switch.
     */
    set disabled(v: '' | SynSwitch['disabled']);
    get disabled(): SynSwitch['disabled'];
    /**
     * Draws the switch in a checked state.
     */
    set checked(v: '' | SynSwitch['checked']);
    get checked(): SynSwitch['checked'];
    /**
  * 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: SynSwitch['form']);
    get form(): SynSwitch['form'];
    /**
     * Makes the switch a required field.
     */
    set required(v: '' | SynSwitch['required']);
    get required(): SynSwitch['required'];
    /**
     * The switch's help text.
     * If you need to display HTML, use the `help-text` slot instead.
     */
    set helpText(v: SynSwitch['helpText']);
    get helpText(): SynSwitch['helpText'];
    /**
     * Emitted when the control loses focus.
     */
    synBlurEvent: EventEmitter<SynBlurEvent>;
    /**
     * Emitted when the control's checked state changes.
     */
    synChangeEvent: EventEmitter<SynChangeEvent>;
    /**
     * Emitted when the control receives input.
     */
    synInputEvent: EventEmitter<SynInputEvent>;
    /**
     * Emitted when the control gains focus.
     */
    synFocusEvent: EventEmitter<SynFocusEvent>;
    /**
     * 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<SynSwitchComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SynSwitchComponent, "syn-switch", 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; }; "form": { "alias": "form"; "required": false; }; "required": { "alias": "required"; "required": false; }; "helpText": { "alias": "helpText"; "required": false; }; }, { "synBlurEvent": "synBlurEvent"; "synChangeEvent": "synChangeEvent"; "synInputEvent": "synInputEvent"; "synFocusEvent": "synFocusEvent"; "synInvalidEvent": "synInvalidEvent"; "checkedChange": "checkedChange"; }, never, ["*"], true, never>;
}

export { SynSwitchComponent };