ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
292 lines (281 loc) • 12.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/a11y'), require('@angular/cdk/keycodes'), require('@angular/forms'), require('@angular/common'), require('@angular/core'), require('ng-zorro-antd/core'), require('ng-zorro-antd/icon')) :
typeof define === 'function' && define.amd ? define('ng-zorro-antd/switch', ['exports', '@angular/cdk/a11y', '@angular/cdk/keycodes', '@angular/forms', '@angular/common', '@angular/core', 'ng-zorro-antd/core', 'ng-zorro-antd/icon'], factory) :
(factory((global['ng-zorro-antd'] = global['ng-zorro-antd'] || {}, global['ng-zorro-antd'].switch = {}),global.ng.cdk.a11y,global.ng.cdk.keycodes,global.ng.forms,global.ng.common,global.ng.core,global['ng-zorro-antd'].core,global['ng-zorro-antd'].icon));
}(this, (function (exports,a11y,keycodes,forms,common,core,core$1,icon) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzSwitchComponent = /** @class */ (function () {
function NzSwitchComponent(cdr, focusMonitor) {
this.cdr = cdr;
this.focusMonitor = focusMonitor;
this.checked = false;
this.onChange = ( /**
* @return {?}
*/function () { return null; });
this.onTouched = ( /**
* @return {?}
*/function () { return null; });
this.nzLoading = false;
this.nzDisabled = false;
this.nzControl = false;
}
/**
* @param {?} e
* @return {?}
*/
NzSwitchComponent.prototype.hostClick = /**
* @param {?} e
* @return {?}
*/
function (e) {
e.preventDefault();
if (!this.nzDisabled && !this.nzLoading && !this.nzControl) {
this.updateValue(!this.checked);
}
};
/**
* @param {?} value
* @return {?}
*/
NzSwitchComponent.prototype.updateValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this.checked !== value) {
this.checked = value;
this.onChange(this.checked);
}
};
/**
* @param {?} e
* @return {?}
*/
NzSwitchComponent.prototype.onKeyDown = /**
* @param {?} e
* @return {?}
*/
function (e) {
if (!this.nzControl && !this.nzDisabled && !this.nzLoading) {
if (e.keyCode === keycodes.LEFT_ARROW) {
this.updateValue(false);
e.preventDefault();
}
else if (e.keyCode === keycodes.RIGHT_ARROW) {
this.updateValue(true);
e.preventDefault();
}
else if (e.keyCode === keycodes.SPACE || e.keyCode === keycodes.ENTER) {
this.updateValue(!this.checked);
e.preventDefault();
}
}
};
/**
* @return {?}
*/
NzSwitchComponent.prototype.focus = /**
* @return {?}
*/
function () {
this.focusMonitor.focusVia(this.switchElement.nativeElement, 'keyboard');
};
/**
* @return {?}
*/
NzSwitchComponent.prototype.blur = /**
* @return {?}
*/
function () {
this.switchElement.nativeElement.blur();
};
/**
* @return {?}
*/
NzSwitchComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
this.focusMonitor.monitor(this.switchElement.nativeElement, true).subscribe(( /**
* @param {?} focusOrigin
* @return {?}
*/function (focusOrigin) {
if (!focusOrigin) {
// When a focused element becomes disabled, the browser *immediately* fires a blur event.
// Angular does not expect events to be raised during change detection, so any state change
// (such as a form control's 'ng-touched') will cause a changed-after-checked error.
// See https://github.com/angular/angular/issues/17793. To work around this, we defer
// telling the form control it has been touched until the next tick.
Promise.resolve().then(( /**
* @return {?}
*/function () { return _this.onTouched(); }));
}
}));
};
/**
* @return {?}
*/
NzSwitchComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.focusMonitor.stopMonitoring(this.switchElement.nativeElement);
};
/**
* @param {?} value
* @return {?}
*/
NzSwitchComponent.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.checked = value;
this.cdr.markForCheck();
};
/**
* @param {?} fn
* @return {?}
*/
NzSwitchComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
NzSwitchComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* @param {?} isDisabled
* @return {?}
*/
NzSwitchComponent.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.nzDisabled = isDisabled;
this.cdr.markForCheck();
};
NzSwitchComponent.decorators = [
{ type: core.Component, args: [{
selector: 'nz-switch',
exportAs: 'nzSwitch',
preserveWhitespaces: false,
template: "<button type=\"button\" #switchElement\n nz-wave\n class=\"ant-switch\"\n [disabled]=\"nzDisabled\"\n [class.ant-switch-checked]=\"checked\"\n [class.ant-switch-loading]=\"nzLoading\"\n [class.ant-switch-disabled]=\"nzDisabled\"\n [class.ant-switch-small]=\"nzSize === 'small'\"\n [nzWaveExtraNode]=\"true\"\n (keydown)=\"onKeyDown($event)\">\n <i *ngIf=\"nzLoading\" nz-icon type=\"loading\" class=\"ant-switch-loading-icon\"></i>\n <span class=\"ant-switch-inner\">\n <span>\n <ng-container *ngIf=\"checked\">\n <ng-container *nzStringTemplateOutlet=\"nzCheckedChildren\">{{ nzCheckedChildren }}</ng-container>\n </ng-container>\n <ng-container *ngIf=\"!checked\">\n <ng-container *nzStringTemplateOutlet=\"nzUnCheckedChildren\">{{ nzUnCheckedChildren }}</ng-container>\n </ng-container>\n </span>\n </span>\n</button>",
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(( /**
* @return {?}
*/function () { return NzSwitchComponent; })),
multi: true
}
],
host: {
'(click)': 'hostClick($event)'
},
styles: ["\n nz-switch {\n display: inline-block;\n }\n "]
}] }
];
/** @nocollapse */
NzSwitchComponent.ctorParameters = function () {
return [
{ type: core.ChangeDetectorRef },
{ type: a11y.FocusMonitor }
];
};
NzSwitchComponent.propDecorators = {
switchElement: [{ type: core.ViewChild, args: ['switchElement',] }],
nzLoading: [{ type: core.Input }],
nzDisabled: [{ type: core.Input }],
nzControl: [{ type: core.Input }],
nzCheckedChildren: [{ type: core.Input }],
nzUnCheckedChildren: [{ type: core.Input }],
nzSize: [{ type: core.Input }]
};
__decorate([
core$1.InputBoolean(),
__metadata("design:type", Object)
], NzSwitchComponent.prototype, "nzLoading", void 0);
__decorate([
core$1.InputBoolean(),
__metadata("design:type", Object)
], NzSwitchComponent.prototype, "nzDisabled", void 0);
__decorate([
core$1.InputBoolean(),
__metadata("design:type", Object)
], NzSwitchComponent.prototype, "nzControl", void 0);
return NzSwitchComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzSwitchModule = /** @class */ (function () {
function NzSwitchModule() {
}
NzSwitchModule.decorators = [
{ type: core.NgModule, args: [{
exports: [NzSwitchComponent],
declarations: [NzSwitchComponent],
imports: [common.CommonModule, core$1.NzWaveModule, icon.NzIconModule, core$1.NzAddOnModule]
},] }
];
return NzSwitchModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
exports.NzSwitchComponent = NzSwitchComponent;
exports.NzSwitchModule = NzSwitchModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-zorro-antd-switch.umd.js.map