@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
214 lines (208 loc) • 7.42 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
*/
class ToggleComponent {
constructor() {
this.size = 'small';
this.change = new EventEmitter();
this.onTouchedCallback = (/**
* @param {?} v
* @return {?}
*/
(v) => {
});
this.onChangeCallback = (/**
* @param {?} v
* @return {?}
*/
(v) => {
});
}
/**
* @param {?} v
* @return {?}
*/
set checked(v) {
this._checked = v !== false;
}
/**
* @return {?}
*/
get checked() {
return this._checked;
}
/**
* @param {?} v
* @return {?}
*/
set disabled(v) {
this._disabled = v !== false;
}
/**
* @return {?}
*/
get disabled() {
return this._disabled;
}
/**
* @return {?}
*/
onToggle() {
if (this.disabled) {
return;
}
this.canChange().then((/**
* @param {?} change
* @return {?}
*/
(change) => {
if (!change) {
return;
}
this.checked = !this.checked;
this.change.emit(this.checked);
this.onChangeCallback(this.checked);
this.onTouchedCallback(this.checked);
}));
}
/**
* @return {?}
*/
canChange() {
/** @type {?} */
let changeResult = Promise.resolve(true);
if (this.beforeChange) {
/** @type {?} */
const 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 {?}
*/
writeValue(obj) {
if (obj !== this.checked) {
this.checked = !!obj;
}
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChangeCallback = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(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 {?}
*/
() => 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',] }]
};
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
*/
class ToggleModule {
}
ToggleModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
exports: [
ToggleComponent,
],
declarations: [
ToggleComponent,
],
providers: []
},] }
];
/**
* @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