@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
424 lines (417 loc) • 19.3 kB
JavaScript
import { Component, forwardRef, Input, EventEmitter, QueryList, Output, ContentChildren, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: radio.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var RadioComponent = /** @class */ (function () {
function RadioComponent() {
this.onChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { return null; });
this.onTouched = (/**
* @return {?}
*/
function () { return null; });
}
Object.defineProperty(RadioComponent.prototype, "name", {
get: /**
* @return {?}
*/
function () {
return this._name;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._name = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(RadioComponent.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this._disabled;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._disabled = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(RadioComponent.prototype, "value", {
get: /**
* @return {?}
*/
function () {
return this.__value;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this.__value = value;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
RadioComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @param {?} fn
* @return {?}
*/
RadioComponent.prototype.registerHandleChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.handleChange = fn;
};
/**
* @param {?} obj
* @return {?}
*/
RadioComponent.prototype.writeValue = /**
* @param {?} obj
* @return {?}
*/
function (obj) {
this._value = obj;
};
/**
* @param {?} fn
* @return {?}
*/
RadioComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
RadioComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* @param {?} $event
* @param {?} value
* @return {?}
*/
RadioComponent.prototype.handleModelChange = /**
* @param {?} $event
* @param {?} value
* @return {?}
*/
function ($event, value) {
$event.stopPropagation();
this._value = value;
this.onTouched();
this.onChange(value);
};
RadioComponent.decorators = [
{ type: Component, args: [{
selector: 'd-radio',
template: "<label class=\"devui-radio\" [class.active]=\"radioInput.checked\" [class.disabled]=\"disabled\">\r\n <input\r\n #radioInput\r\n type=\"radio\"\r\n class=\"devui-radio-input\"\r\n [disabled]=\"disabled\"\r\n [name]=\"name\"\r\n [id]=\"name + '-' + value\"\r\n [ngModel]=\"_value\"\r\n (change)=\"handleModelChange($event, value)\"\r\n [value]=\"value\"\r\n />\r\n <span class=\"devui-radio-material\">\r\n <svg height=\"100%\" width=\"100%\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle class=\"devui-outer\" cx=\"512\" cy=\"512\" r=\"486.5\" stroke-width=\"51\" />\r\n <circle class=\"devui-inner\" cx=\"512\" fill-rule=\"nonzero\" cy=\"512\" r=\"320\" />\r\n </svg>\r\n </span>\r\n <span class=\"devui-radio-label\">\r\n <ng-content></ng-content>\r\n </span>\r\n</label>\r\n",
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return RadioComponent; })),
multi: true
}],
styles: [":host{padding:0 5px;display:block;line-height:36px}.devui-radio{font-size:0;line-height:1.42857143;font-weight:400;cursor:pointer;color:#252b3a;margin:0 auto}.devui-radio.disabled{cursor:not-allowed;opacity:.3}.devui-radio svg .devui-outer{stroke:#adb0b8;fill:transparent}.devui-radio svg .devui-inner{fill:#5e7ce0}.devui-radio:active:not(.disabled) svg .devui-outer,.devui-radio:focus:not(.disabled) svg .devui-outer,.devui-radio:hover:not(.disabled) svg .devui-outer{stroke:#344899}.devui-radio.active svg .devui-outer{opacity:1;stroke:#5e7ce0;-webkit-transition:stroke 50ms cubic-bezier(.755,.05,.855,.06);transition:stroke 50ms cubic-bezier(.755,.05,.855,.06)}.devui-radio.active svg .devui-inner{opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .2s cubic-bezier(.23,1,.32,1),-webkit-transform .2s cubic-bezier(.23,1,.32,1);transition:transform .2s cubic-bezier(.23,1,.32,1),opacity .2s cubic-bezier(.23,1,.32,1),-webkit-transform .2s cubic-bezier(.23,1,.32,1)}.devui-radio.active:not(.disabled) .devui-radio-material:hover svg .devui-outer{stroke:#344899}.devui-radio.active:not(.disabled) .devui-radio-material:hover svg .devui-inner{fill:#344899}.devui-radio.active:not(.disabled) .devui-radio-material:active svg .devui-outer,.devui-radio.active:not(.disabled) .devui-radio-material:focus svg .devui-outer{stroke:#344899}.devui-radio.active:not(.disabled) .devui-radio-material:active svg .devui-inner,.devui-radio.active:not(.disabled) .devui-radio-material:focus svg .devui-inner{fill:#344899}.devui-radio .devui-outer{opacity:1;-webkit-transition:stroke 50ms cubic-bezier(.755,.05,.855,.06);transition:stroke 50ms cubic-bezier(.755,.05,.855,.06)}.devui-radio .devui-inner{opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transition:opacity .2s cubic-bezier(.755,.05,.855,.06),-webkit-transform .2s cubic-bezier(.755,.05,.855,.06);transition:transform .2s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06),-webkit-transform .2s cubic-bezier(.755,.05,.855,.06)}.devui-radio .devui-radio-material{vertical-align:middle;position:relative;display:inline-block;overflow:hidden;height:16px;width:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform:translateY(-1px);transform:translateY(-1px)}.devui-radio .devui-radio-label{color:#252b3a;margin-left:8px;font-size:14px;vertical-align:middle}.devui-radio .devui-radio-input{opacity:0;z-index:-1;width:0;height:0;display:none;overflow:hidden;pointer-events:none}"]
}] }
];
/** @nocollapse */
RadioComponent.ctorParameters = function () { return []; };
RadioComponent.propDecorators = {
name: [{ type: Input }],
disabled: [{ type: Input }],
value: [{ type: Input }]
};
return RadioComponent;
}());
if (false) {
/** @type {?} */
RadioComponent.prototype._name;
/** @type {?} */
RadioComponent.prototype._disabled;
/** @type {?} */
RadioComponent.prototype.__value;
/** @type {?} */
RadioComponent.prototype._value;
/** @type {?} */
RadioComponent.prototype.handleChange;
/**
* @type {?}
* @private
*/
RadioComponent.prototype.onChange;
/**
* @type {?}
* @private
*/
RadioComponent.prototype.onTouched;
}
/**
* @fileoverview added by tsickle
* Generated from: radio-group.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var RadioGroupComponent = /** @class */ (function () {
function RadioGroupComponent() {
this.change = new EventEmitter();
this.radios = new QueryList();
}
/**
* @return {?}
*/
RadioGroupComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
this.radios.forEach((/**
* @param {?} radio
* @return {?}
*/
function (radio) {
_this.registerRadio(radio);
}));
this.radios.changes.subscribe((/**
* @param {?} newRadios
* @return {?}
*/
function (newRadios) {
newRadios.forEach((/**
* @param {?} radio
* @return {?}
*/
function (radio) {
_this.registerRadio(radio);
}));
}));
};
/**
* @param {?} changes
* @return {?}
*/
RadioGroupComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
var _this = this;
if (changes && changes.name && this.radios) {
this.radios.forEach((/**
* @param {?} radio
* @return {?}
*/
function (radio) {
radio.name = _this.name;
}));
}
if (changes && changes.disabled && this.radios) {
this.radios.forEach((/**
* @param {?} radio
* @return {?}
*/
function (radio) {
radio.disabled = _this.disabled;
}));
}
if (changes && this.radios) {
this.radios.forEach((/**
* @param {?} radio
* @return {?}
*/
function (radio) {
radio.disabled = _this.disabled;
}));
}
};
/**
* @param {?} radio
* @return {?}
*/
RadioGroupComponent.prototype.registerRadio = /**
* @param {?} radio
* @return {?}
*/
function (radio) {
var _this = this;
radio.registerOnChange((/**
* @param {?} value
* @return {?}
*/
function (value) {
_this.writeValue(value);
_this.onChange(value);
_this.change.emit(value);
}));
};
/**
* @param {?} $event
* @param {?} value
* @return {?}
*/
RadioGroupComponent.prototype.handleChange = /**
* @param {?} $event
* @param {?} value
* @return {?}
*/
function ($event, value) {
$event.stopPropagation();
this.writeValue(value);
this.onChange(value);
this.change.emit(value);
};
/**
* @param {?} value
* @return {?}
*/
RadioGroupComponent.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
var _this = this;
this._value = value;
if (this.radios && this.radios.length > 0) {
this.radios.forEach((/**
* @param {?} radio
* @return {?}
*/
function (radio) {
radio.writeValue(_this._value);
}));
}
};
/**
* @param {?} fn
* @return {?}
*/
RadioGroupComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
RadioGroupComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
RadioGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'd-radio-group',
template: "<div class=\"devui-radio-group\">\r\n <ul [class.devui-radio-horizontal]=\"cssStyle === 'row'\">\r\n <ng-container *ngIf=\"radios.length === 0\">\r\n <li *ngFor=\"let value of values\" class=\"devui-radio-list-item\">\r\n <label class=\"devui-radio\" [class.active]=\"value == _value\" [class.disabled]=\"disabled\">\r\n <input\r\n type=\"radio\"\r\n class=\"devui-radio-input\"\r\n [disabled]=\"disabled\"\r\n [name]=\"name\"\r\n [id]=\"name + '-' + value\"\r\n [value]=\"value\"\r\n [checked]=\"value == _value\"\r\n (change)=\"handleChange($event, value)\"\r\n />\r\n <span class=\"devui-radio-material\">\r\n <svg height=\"100%\" width=\"100%\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle class=\"devui-outer\" cx=\"512\" cy=\"512\" r=\"486.5\" stroke-width=\"51\" />\r\n <circle class=\"devui-inner\" cx=\"512\" fill-rule=\"nonzero\" cy=\"512\" r=\"320\" />\r\n </svg>\r\n </span>\r\n <span class=\"devui-radio-label\">{{ value }}</span>\r\n </label>\r\n </li>\r\n </ng-container>\r\n\r\n <ng-content select=\"d-radio\"></ng-content>\r\n </ul>\r\n</div>\r\n",
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return RadioGroupComponent; })),
multi: true
}],
styles: [".devui-radio-horizontal .devui-radio-list-item{display:inline-block;padding:0 5px}.devui-radio-horizontal ::ng-deep d-radio{display:inline-block}", ":host{padding:0 5px;display:block;line-height:36px}.devui-radio{font-size:0;line-height:1.42857143;font-weight:400;cursor:pointer;color:#252b3a;margin:0 auto}.devui-radio.disabled{cursor:not-allowed;opacity:.3}.devui-radio svg .devui-outer{stroke:#adb0b8;fill:transparent}.devui-radio svg .devui-inner{fill:#5e7ce0}.devui-radio:active:not(.disabled) svg .devui-outer,.devui-radio:focus:not(.disabled) svg .devui-outer,.devui-radio:hover:not(.disabled) svg .devui-outer{stroke:#344899}.devui-radio.active svg .devui-outer{opacity:1;stroke:#5e7ce0;-webkit-transition:stroke 50ms cubic-bezier(.755,.05,.855,.06);transition:stroke 50ms cubic-bezier(.755,.05,.855,.06)}.devui-radio.active svg .devui-inner{opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .2s cubic-bezier(.23,1,.32,1),-webkit-transform .2s cubic-bezier(.23,1,.32,1);transition:transform .2s cubic-bezier(.23,1,.32,1),opacity .2s cubic-bezier(.23,1,.32,1),-webkit-transform .2s cubic-bezier(.23,1,.32,1)}.devui-radio.active:not(.disabled) .devui-radio-material:hover svg .devui-outer{stroke:#344899}.devui-radio.active:not(.disabled) .devui-radio-material:hover svg .devui-inner{fill:#344899}.devui-radio.active:not(.disabled) .devui-radio-material:active svg .devui-outer,.devui-radio.active:not(.disabled) .devui-radio-material:focus svg .devui-outer{stroke:#344899}.devui-radio.active:not(.disabled) .devui-radio-material:active svg .devui-inner,.devui-radio.active:not(.disabled) .devui-radio-material:focus svg .devui-inner{fill:#344899}.devui-radio .devui-outer{opacity:1;-webkit-transition:stroke 50ms cubic-bezier(.755,.05,.855,.06);transition:stroke 50ms cubic-bezier(.755,.05,.855,.06)}.devui-radio .devui-inner{opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transition:opacity .2s cubic-bezier(.755,.05,.855,.06),-webkit-transform .2s cubic-bezier(.755,.05,.855,.06);transition:transform .2s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06),-webkit-transform .2s cubic-bezier(.755,.05,.855,.06)}.devui-radio .devui-radio-material{vertical-align:middle;position:relative;display:inline-block;overflow:hidden;height:16px;width:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform:translateY(-1px);transform:translateY(-1px)}.devui-radio .devui-radio-label{color:#252b3a;margin-left:8px;font-size:14px;vertical-align:middle}.devui-radio .devui-radio-input{opacity:0;z-index:-1;width:0;height:0;display:none;overflow:hidden;pointer-events:none}"]
}] }
];
/** @nocollapse */
RadioGroupComponent.ctorParameters = function () { return []; };
RadioGroupComponent.propDecorators = {
name: [{ type: Input }],
values: [{ type: Input }],
cssStyle: [{ type: Input }],
disabled: [{ type: Input }],
change: [{ type: Output }],
radios: [{ type: ContentChildren, args: [RadioComponent,] }]
};
return RadioGroupComponent;
}());
if (false) {
/** @type {?} */
RadioGroupComponent.prototype.name;
/** @type {?} */
RadioGroupComponent.prototype.values;
/** @type {?} */
RadioGroupComponent.prototype.cssStyle;
/** @type {?} */
RadioGroupComponent.prototype.disabled;
/** @type {?} */
RadioGroupComponent.prototype.change;
/** @type {?} */
RadioGroupComponent.prototype.radios;
/** @type {?} */
RadioGroupComponent.prototype._value;
/** @type {?} */
RadioGroupComponent.prototype.onChange;
/** @type {?} */
RadioGroupComponent.prototype.onTouched;
}
/**
* @fileoverview added by tsickle
* Generated from: radio.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var RadioModule = /** @class */ (function () {
function RadioModule() {
}
RadioModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, FormsModule],
exports: [RadioGroupComponent, RadioComponent],
declarations: [RadioGroupComponent, RadioComponent],
providers: [],
},] }
];
return RadioModule;
}());
/**
* @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-radio.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { RadioComponent, RadioGroupComponent, RadioModule };
//# sourceMappingURL=ng-devui-radio.js.map