@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
245 lines (239 loc) • 8.65 kB
JavaScript
import { EventEmitter, Component, forwardRef, Input, Output, HostListener, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
/**
* @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 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: 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: NG_VALUE_ACCESSOR,
useExisting: 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: Input }],
color: [{ type: Input }],
beforeChange: [{ type: Input }],
checked: [{ type: Input }],
disabled: [{ type: Input }],
change: [{ type: Output }],
onToggle: [{ type: 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: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
exports: [
ToggleComponent,
],
declarations: [
ToggleComponent,
],
providers: []
},] }
];
return ToggleModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-devui-toggle.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { ToggleComponent, ToggleModule };
//# sourceMappingURL=ng-devui-toggle.js.map