@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
240 lines (234 loc) • 9.68 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ng-devui/toggle', ['exports', '@angular/core', '@angular/forms', '@angular/common'], factory) :
(global = global || self, factory((global['ng-devui'] = global['ng-devui'] || {}, global['ng-devui'].toggle = {}), global.ng.core, global.ng.forms, global.ng.common));
}(this, (function (exports, core, forms, common) { 'use strict';
/**
* @fileoverview added by tsickle
* Generated from: toggle.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ToggleComponent = /** @class */ (function () {
function ToggleComponent() {
this.size = 'small';
this.change = new core.EventEmitter();
this.onTouchedCallback = (/**
* @param {?} v
* @return {?}
*/
function (v) {
});
this.onChangeCallback = (/**
* @param {?} v
* @return {?}
*/
function (v) {
});
}
Object.defineProperty(ToggleComponent.prototype, "checked", {
get: /**
* @return {?}
*/
function () {
return this._checked;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._checked = v !== false;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ToggleComponent.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this._disabled;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._disabled = v !== false;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
ToggleComponent.prototype.onToggle = /**
* @return {?}
*/
function () {
var _this = this;
if (this.disabled) {
return;
}
this.canChange().then((/**
* @param {?} change
* @return {?}
*/
function (change) {
if (!change) {
return;
}
_this.checked = !_this.checked;
_this.change.emit(_this.checked);
_this.onChangeCallback(_this.checked);
_this.onTouchedCallback(_this.checked);
}));
};
/**
* @return {?}
*/
ToggleComponent.prototype.canChange = /**
* @return {?}
*/
function () {
/** @type {?} */
var changeResult = Promise.resolve(true);
if (this.beforeChange) {
/** @type {?} */
var result = this.beforeChange(this.checked);
if (typeof result !== 'undefined') {
if (result.then) {
changeResult = result;
}
else if (result.subscribe) {
changeResult = ((/** @type {?} */ (result))).toPromise();
}
else {
changeResult = Promise.resolve(result);
}
}
}
return changeResult;
};
/**
* @param {?} obj
* @return {?}
*/
ToggleComponent.prototype.writeValue = /**
* @param {?} obj
* @return {?}
*/
function (obj) {
if (obj !== this.checked) {
this.checked = !!obj;
}
};
/**
* @param {?} fn
* @return {?}
*/
ToggleComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChangeCallback = fn;
};
/**
* @param {?} fn
* @return {?}
*/
ToggleComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouchedCallback = fn;
};
ToggleComponent.decorators = [
{ type: core.Component, args: [{
selector: 'd-toggle',
template: "<span\r\n class=\"devui-toggle\"\r\n [class.devui-checked]=\"checked\"\r\n [class.devui-disabled]=\"disabled\"\r\n [class.devui-toggle-large]=\"size === 'large'\"\r\n [class.devui-toggle-medium]=\"size === 'medium'\"\r\n [class.devui-toggle-small]=\"size === 'small'\"\r\n [style.background]=\"checked ? color : ''\"\r\n [style.border-color]=\"checked ? color : ''\"\r\n>\r\n <small></small>\r\n</span>\r\n",
exportAs: 'toggle',
providers: [{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef((/**
* @return {?}
*/
function () { return ToggleComponent; })),
multi: true
}],
styles: [":host{display:inline-block}.devui-toggle{background:#fff;border:1px solid #adb0b8;position:relative;display:inline-block;box-sizing:content-box;overflow:visible;padding:0;margin:0;cursor:pointer;-webkit-transition:.3s ease-out;transition:.3s ease-out}.devui-toggle:active,.devui-toggle:hover{border-color:#344899}.devui-toggle small{background:#adb0b8;border-radius:100%;position:absolute;top:0;left:2px;-webkit-transition:.3s ease-out;transition:.3s ease-out}.devui-toggle.devui-toggle-large{width:66px;height:40px;border-radius:40px}.devui-toggle.devui-toggle-large small{width:40px;height:40px}.devui-toggle.devui-toggle-large.devui-checked small{background:#fff;left:26px}.devui-toggle.devui-toggle-medium{width:50px;height:30px;border-radius:30px}.devui-toggle.devui-toggle-medium small{width:30px;height:30px}.devui-toggle.devui-toggle-medium.devui-checked small{background:#fff;left:20px}.devui-toggle.devui-toggle-small{width:30px;height:14px;border-radius:14px}.devui-toggle.devui-toggle-small small{width:10px;height:10px;position:absolute;top:2px}.devui-toggle.devui-toggle-small.devui-checked small{background:#fff;left:18px}.devui-toggle.devui-checked{background:#5e7ce0;border-color:#5e7ce0}.devui-toggle.devui-checked:active,.devui-toggle.devui-checked:hover{background:#344899;border-color:#344899}.devui-toggle.devui-disabled{opacity:.3;cursor:not-allowed}"]
}] }
];
ToggleComponent.propDecorators = {
size: [{ type: core.Input }],
color: [{ type: core.Input }],
beforeChange: [{ type: core.Input }],
checked: [{ type: core.Input }],
disabled: [{ type: core.Input }],
change: [{ type: core.Output }],
onToggle: [{ type: core.HostListener, args: ['click',] }]
};
return ToggleComponent;
}());
if (false) {
/**
* @type {?}
* @private
*/
ToggleComponent.prototype._checked;
/**
* @type {?}
* @private
*/
ToggleComponent.prototype._disabled;
/** @type {?} */
ToggleComponent.prototype.size;
/** @type {?} */
ToggleComponent.prototype.color;
/** @type {?} */
ToggleComponent.prototype.beforeChange;
/** @type {?} */
ToggleComponent.prototype.change;
/**
* @type {?}
* @private
*/
ToggleComponent.prototype.onTouchedCallback;
/**
* @type {?}
* @private
*/
ToggleComponent.prototype.onChangeCallback;
}
/**
* @fileoverview added by tsickle
* Generated from: toggle.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ToggleModule = /** @class */ (function () {
function ToggleModule() {
}
ToggleModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
forms.FormsModule
],
exports: [
ToggleComponent,
],
declarations: [
ToggleComponent,
],
providers: []
},] }
];
return ToggleModule;
}());
exports.ToggleComponent = ToggleComponent;
exports.ToggleModule = ToggleModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-devui-toggle.umd.js.map