igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
156 lines (151 loc) • 8 kB
JavaScript
import * as i0 from '@angular/core';
import { booleanAttribute, HostBinding, Input, Component, NgModule } from '@angular/core';
import { CheckboxBaseDirective, IgxRippleDirective } from 'igniteui-angular/directives';
import { EDITOR_PROVIDER } from 'igniteui-angular/core';
/**
*
* The Switch component is a binary choice selection component.
*
* @igxModule IgxSwitchModule
*
* @igxTheme igx-switch-theme, igx-tooltip-theme
*
* @igxKeywords switch, states, tooltip
*
* @igxGroup Data Entry & Display
* @remarks
*
* The Ignite UI Switch lets the user toggle between on/off or true/false states.
*
* @example
* ```html
* <igx-switch [checked]="true">
* Simple switch
* </igx-switch>
* ```
*/
class IgxSwitchComponent extends CheckboxBaseDirective {
constructor() {
super(...arguments);
/**
* Returns the class of the switch component.
*
* @example
* ```typescript
* let switchClass = this.switch.cssClass;
* ```
*/
this.cssClass = 'igx-switch';
/**
* Sets/gets the `disabled` attribute.
* Default value is `false`.
*
* @example
* ```html
* <igx-switch disabled><igx-switch>
* ```
*/
this.disabled = false;
/**
* Sets/gets whether the switch component is invalid.
* Default value is `false`.
*
* @example
* ```html
* <igx-switch invalid></igx-switch>
* ```
* ```typescript
* let isInvalid = this.switch.invalid;
* ```
*/
this.invalid = false;
/**
* Sets/gets whether the switch component is on focus.
* Default value is `false`.
*
* @example
* ```typescript
* this.switch.focused = true;
* ```
*/
this.focused = false;
}
/**
* Sets/gets whether the switch is on or off.
* Default value is 'false'.
*
* @example
* ```html
* <igx-switch [checked]="true"></igx-switch>
* ```
*/
set checked(value) {
super.checked = value;
}
get checked() {
return super.checked;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.2", type: IgxSwitchComponent, isStandalone: true, selector: "igx-switch", inputs: { checked: "checked", disabled: ["disabled", "disabled", booleanAttribute], invalid: ["invalid", "invalid", booleanAttribute] }, host: { properties: { "class.igx-switch": "this.cssClass", "class.igx-switch--checked": "this.checked", "class.igx-switch--disabled": "this.disabled", "class.igx-switch--invalid": "this.invalid", "class.igx-switch--focused": "this.focused" } }, providers: [{
provide: EDITOR_PROVIDER,
useExisting: IgxSwitchComponent,
multi: true
}], usesInheritance: true, ngImport: i0, template: "<input #checkbox class=\"igx-switch__input\" type=\"checkbox\"\n [id]=\"inputId\"\n [name]=\"name\"\n [value]=\"value\"\n [tabindex]=\"tabindex\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n [attr.aria-label]=\"ariaLabel\"\n (change)=\"_onCheckboxChange($event)\"\n (blur)=\"onBlur()\" />\n\n<span #label class=\"igx-switch__composite\"\n igxRipple\n igxRippleTarget=\".igx-switch__ripple\"\n [igxRippleDisabled]=\"disableRipple\"\n [igxRippleCentered]=\"true\"\n [igxRippleDuration]=\"300\">\n <div class=\"igx-switch__composite-thumb\">\n <div class=\"igx-switch__ripple\"></div>\n <div class=\"igx-switch__thumb\"></div>\n </div>\n</span>\n\n<span #placeholderLabel\n [class]=\"labelClass\"\n [id]=\"labelId\">\n <ng-content></ng-content>\n</span>\n", dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSwitchComponent, decorators: [{
type: Component,
args: [{ providers: [{
provide: EDITOR_PROVIDER,
useExisting: IgxSwitchComponent,
multi: true
}], selector: 'igx-switch', imports: [IgxRippleDirective], template: "<input #checkbox class=\"igx-switch__input\" type=\"checkbox\"\n [id]=\"inputId\"\n [name]=\"name\"\n [value]=\"value\"\n [tabindex]=\"tabindex\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n [attr.aria-label]=\"ariaLabel\"\n (change)=\"_onCheckboxChange($event)\"\n (blur)=\"onBlur()\" />\n\n<span #label class=\"igx-switch__composite\"\n igxRipple\n igxRippleTarget=\".igx-switch__ripple\"\n [igxRippleDisabled]=\"disableRipple\"\n [igxRippleCentered]=\"true\"\n [igxRippleDuration]=\"300\">\n <div class=\"igx-switch__composite-thumb\">\n <div class=\"igx-switch__ripple\"></div>\n <div class=\"igx-switch__thumb\"></div>\n </div>\n</span>\n\n<span #placeholderLabel\n [class]=\"labelClass\"\n [id]=\"labelId\">\n <ng-content></ng-content>\n</span>\n" }]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-switch']
}], checked: [{
type: HostBinding,
args: ['class.igx-switch--checked']
}, {
type: Input
}], disabled: [{
type: HostBinding,
args: ['class.igx-switch--disabled']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}], invalid: [{
type: HostBinding,
args: ['class.igx-switch--invalid']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}], focused: [{
type: HostBinding,
args: ['class.igx-switch--focused']
}] } });
/**
* @hidden
* @deprecated
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxSwitchModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxSwitchModule, imports: [IgxSwitchComponent], exports: [IgxSwitchComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSwitchModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSwitchModule, decorators: [{
type: NgModule,
args: [{
imports: [
IgxSwitchComponent
],
exports: [
IgxSwitchComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IgxSwitchComponent, IgxSwitchModule };
//# sourceMappingURL=igniteui-angular-switch.mjs.map