ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
134 lines (129 loc) • 6.63 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, ViewEncapsulation, Input, Output, HostBinding, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { WingBlankModule } from 'ng-zorro-antd-mobile/wing-blank';
class SwitchComponent {
set color(value) {
this._color = value;
this.colorStyle = { background: this._color };
}
set platform(value) {
this.wrapCls = value === 'android' ? `${this.prefixCls}-android` : this.prefixCls;
}
set checked(value) {
this.switchChecked = value;
this.checkboxCls = {
'checkbox-disabled': this._disabled,
'checkbox-active': this.switchChecked,
'checkbox-inactive': !this.switchChecked
};
this.colorStyle = { background: value ? this._color : '' };
}
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = value;
this.checkboxCls = {
'checkbox-disabled': value,
'checkbox-active': this.switchChecked,
'checkbox-inactive': !this.switchChecked
};
}
constructor() {
this.prefixCls = 'am-switch';
this.wrapCls = 'am-switch';
this.checkboxCls = {
'checkbox-disabled': false,
'checkbox-active': false,
'checkbox-inactive': true
};
this.colorStyle = {};
this.switchChecked = false;
this._color = '';
this._disabled = false;
this.onChanged = Function.prototype;
this.onTouched = Function.prototype;
this.onChange = new EventEmitter();
this.onClick = new EventEmitter();
this.dispaly = true;
}
changeSwitch(checkedValue) {
this.onChanged(checkedValue);
this.switchChecked = checkedValue;
this.checkboxCls = {
'checkbox-disabled': this._disabled,
'checkbox-active': this.switchChecked,
'checkbox-inactive': !this.switchChecked
};
this.colorStyle = { background: checkedValue ? this._color : '' };
this.onChange.emit(checkedValue);
}
click() {
this.onClick.emit(this.switchChecked);
}
writeValue(value) {
this.switchChecked = value;
}
registerOnChange(fn) {
this.onChanged = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SwitchComponent, selector: "Switch, nzm-switch", inputs: { color: "color", name: "name", platform: "platform", checked: "checked", disabled: "disabled" }, outputs: { onChange: "onChange", onClick: "onClick" }, host: { properties: { "style.display": "this.dispaly" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SwitchComponent),
multi: true
}
], ngImport: i0, template: "<label class=\"{{ prefixCls }}\" [ngClass]=\"wrapCls\">\n <input\n #switchValue\n type=\"checkbox\"\n name=\"name\"\n class=\"{{ prefixCls }}-checkbox\"\n [checked]=\"switchChecked\"\n [value]=\"switchChecked\"\n [disabled]=\"disabled\"\n (change)=\"changeSwitch(switchValue.checked)\"\n />\n <div class=\"checkbox\" [ngClass]=\"checkboxCls\" [ngStyle]=\"colorStyle\" (click)=\"click()\"></div>\n</label>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SwitchComponent, decorators: [{
type: Component,
args: [{ selector: 'Switch, nzm-switch', encapsulation: ViewEncapsulation.None, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SwitchComponent),
multi: true
}
], template: "<label class=\"{{ prefixCls }}\" [ngClass]=\"wrapCls\">\n <input\n #switchValue\n type=\"checkbox\"\n name=\"name\"\n class=\"{{ prefixCls }}-checkbox\"\n [checked]=\"switchChecked\"\n [value]=\"switchChecked\"\n [disabled]=\"disabled\"\n (change)=\"changeSwitch(switchValue.checked)\"\n />\n <div class=\"checkbox\" [ngClass]=\"checkboxCls\" [ngStyle]=\"colorStyle\" (click)=\"click()\"></div>\n</label>\n" }]
}], ctorParameters: () => [], propDecorators: { color: [{
type: Input
}], name: [{
type: Input
}], platform: [{
type: Input
}], checked: [{
type: Input
}], disabled: [{
type: Input
}], onChange: [{
type: Output
}], onClick: [{
type: Output
}], dispaly: [{
type: HostBinding,
args: ['style.display']
}] } });
class SwitchModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: SwitchModule, declarations: [SwitchComponent], imports: [CommonModule, WingBlankModule], exports: [SwitchComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SwitchModule, imports: [CommonModule, WingBlankModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SwitchModule, decorators: [{
type: NgModule,
args: [{
exports: [SwitchComponent],
declarations: [SwitchComponent],
imports: [CommonModule, WingBlankModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SwitchComponent, SwitchModule };
//# sourceMappingURL=ng-zorro-antd-mobile-switch.mjs.map