@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
221 lines (220 loc) • 7.46 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ElementRef, Renderer2, EventEmitter, OnInit, OnDestroy, ChangeDetectorRef, NgZone, Injector, AfterViewInit } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { Subscription } from "rxjs";
import { InputRounded, InputSize } from '../common/models';
import { SwitchFocusEvent } from './events/focus-event';
import { SwitchBlurEvent } from './events/blur-event';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI Switch component for Angular]({% slug overview_switch %}).
*/
export declare class SwitchComponent implements ControlValueAccessor, OnInit, OnDestroy, AfterViewInit {
private renderer;
private hostElement;
private localizationService;
private injector;
private changeDetector;
private ngZone;
/**
* @hidden
*/
get focusableId(): string;
/**
* Sets the **On** label ([see example]({% slug labels_switch %})).
* Takes precedence over the [custom messages component]({% slug api_inputs_switchcustommessagescomponent %}).
*/
onLabel: string;
/**
* Sets the **Off** label ([see example]({% slug labels_switch %})).
* Takes precedence over the [custom messages component]({% slug api_inputs_switchcustommessagescomponent %}).
*/
offLabel: string;
/**
* Sets the value of the Switch when it is initially displayed.
*/
set checked(value: boolean);
get checked(): boolean;
/**
* Determines whether the Switch is disabled ([see example]({% slug disabled_switch %})). To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_switch#toc-managing-the-switch-disabled-state-in-reactive-forms).
*/
disabled: boolean;
/**
* Determines whether the Switch is in its read-only state ([see example]({% slug readonly_switch %})).
*
* @default false
*/
readonly: boolean;
/**
* Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Switch.
*/
tabindex: number;
/**
* Specifies the width and height of the Switch.
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*/
set size(size: InputSize);
get size(): InputSize;
/**
* Specifies the border radius of the Switch thumb.
*
* The possible values are:
* * `full` (default)
* * `small`
* * `medium`
* * `large`
* * `none`
*/
set thumbRounded(thumbRounded: InputRounded);
get thumbRounded(): InputRounded;
/**
* Specifies the border radius of the Switch track.
*
* The possible values are:
* * `full` (default)
* * `small`
* * `medium`
* * `large`
* * `none`
*/
set trackRounded(trackRounded: InputRounded);
get trackRounded(): InputRounded;
/**
* @hidden
*/
set tabIndex(tabIndex: number);
get tabIndex(): number;
/**
* Fires each time the Switch component is focused as a result of user interaction.
*/
onFocus: EventEmitter<SwitchFocusEvent>;
/**
* Fires each time the Switch component is blurred as a result of user interaction.
*/
onBlur: EventEmitter<SwitchBlurEvent>;
/**
* Fires each time the user selects a new value.
*/
valueChange: EventEmitter<any>;
direction: string;
get ieClass(): boolean;
hostRole: string;
get hostId(): string;
get ariaChecked(): boolean;
get ariaInvalid(): boolean;
get hostTabIndex(): number;
get ariaDisabled(): boolean;
get ariaReadonly(): boolean;
hostClasses: boolean;
get disabledClass(): boolean;
track: any;
thumb: any;
/**
* @hidden
*/
initialized: boolean;
protected localizationChangeSubscription: Subscription;
protected isFocused: boolean;
protected control: NgControl;
private domSubscriptions;
private _checked;
private _size;
private _trackRounded;
private _thumbRounded;
constructor(renderer: Renderer2, hostElement: ElementRef, localizationService: LocalizationService, injector: Injector, changeDetector: ChangeDetectorRef, ngZone: NgZone);
/**
* @hidden
*/
get onLabelMessage(): string;
/**
* @hidden
*/
get offLabelMessage(): string;
protected ngChange: Function;
protected ngTouched: Function;
protected get isEnabled(): boolean;
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
/**
* Focuses the Switch.
*
* @example
* ```ts-no-run
* _@Component({
* selector: 'my-app',
* template: `
* <button (click)="switch.focus()">Focus</button>
* <kendo-switch #switch></kendo-switch>
* `
* })
* class AppComponent { }
* ```
*/
focus(): void;
/**
* Blurs the Switch.
*/
blur(): void;
/**
* @hidden
* Called when the status of the component changes to or from `disabled`.
* Depending on the value, it enables or disables the appropriate DOM element.
*/
setDisabledState(isDisabled: boolean): void;
/**
* @hidden
*/
handleFocus: (event: FocusEvent) => void;
/**
* @hidden
*/
handleBlur: (event: FocusEvent) => void;
/**
* @hidden
*/
get isControlInvalid(): boolean;
/**
* @hidden
*/
writeValue(value: boolean): void;
/**
* @hidden
*/
registerOnChange(fn: () => any): void;
/**
* @hidden
*/
registerOnTouched(fn: () => any): void;
/**
* @hidden
*/
keyDownHandler(e: any): void;
/**
* @hidden
*/
clickHandler(): void;
/**
* @hidden
* Used by the FloatingLabel to determine if the component is empty.
*/
isEmpty(): boolean;
private changeValue;
private set focused(value);
private attachHostHandlers;
private setHostClasses;
private handleClasses;
private handleTrackClasses;
private handleThumbClasses;
static ɵfac: i0.ɵɵFactoryDeclaration<SwitchComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SwitchComponent, "kendo-switch", ["kendoSwitch"], { "focusableId": { "alias": "focusableId"; "required": false; }; "onLabel": { "alias": "onLabel"; "required": false; }; "offLabel": { "alias": "offLabel"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "thumbRounded": { "alias": "thumbRounded"; "required": false; }; "trackRounded": { "alias": "trackRounded"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "onFocus": "focus"; "onBlur": "blur"; "valueChange": "valueChange"; }, never, never, true, never>;
}