@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
351 lines (344 loc) • 16.6 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
*/
class RadioComponent {
constructor() {
this.onChange = (/**
* @param {?} _
* @return {?}
*/
(_) => null);
this.onTouched = (/**
* @return {?}
*/
() => null);
}
/**
* @return {?}
*/
get name() {
return this._name;
}
/**
* @param {?} value
* @return {?}
*/
set name(value) {
this._name = value;
}
/**
* @return {?}
*/
get disabled() {
return this._disabled;
}
/**
* @param {?} value
* @return {?}
*/
set disabled(value) {
this._disabled = value;
}
/**
* @return {?}
*/
get value() {
return this.__value;
}
/**
* @param {?} value
* @return {?}
*/
set value(value) {
this.__value = value;
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @param {?} fn
* @return {?}
*/
registerHandleChange(fn) {
this.handleChange = fn;
}
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
this._value = obj;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* @param {?} $event
* @param {?} value
* @return {?}
*/
handleModelChange($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 {?}
*/
() => 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 = () => [];
RadioComponent.propDecorators = {
name: [{ type: Input }],
disabled: [{ type: Input }],
value: [{ type: Input }]
};
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
*/
class RadioGroupComponent {
constructor() {
this.change = new EventEmitter();
this.radios = new QueryList();
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.radios.forEach((/**
* @param {?} radio
* @return {?}
*/
radio => {
this.registerRadio(radio);
}));
this.radios.changes.subscribe((/**
* @param {?} newRadios
* @return {?}
*/
(newRadios) => {
newRadios.forEach((/**
* @param {?} radio
* @return {?}
*/
(radio) => {
this.registerRadio(radio);
}));
}));
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes && changes.name && this.radios) {
this.radios.forEach((/**
* @param {?} radio
* @return {?}
*/
radio => {
radio.name = this.name;
}));
}
if (changes && changes.disabled && this.radios) {
this.radios.forEach((/**
* @param {?} radio
* @return {?}
*/
radio => {
radio.disabled = this.disabled;
}));
}
if (changes && this.radios) {
this.radios.forEach((/**
* @param {?} radio
* @return {?}
*/
radio => {
radio.disabled = this.disabled;
}));
}
}
/**
* @param {?} radio
* @return {?}
*/
registerRadio(radio) {
radio.registerOnChange((/**
* @param {?} value
* @return {?}
*/
(value) => {
this.writeValue(value);
this.onChange(value);
this.change.emit(value);
}));
}
/**
* @param {?} $event
* @param {?} value
* @return {?}
*/
handleChange($event, value) {
$event.stopPropagation();
this.writeValue(value);
this.onChange(value);
this.change.emit(value);
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this._value = value;
if (this.radios && this.radios.length > 0) {
this.radios.forEach((/**
* @param {?} radio
* @return {?}
*/
radio => {
radio.writeValue(this._value);
}));
}
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(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 {?}
*/
() => 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 = () => [];
RadioGroupComponent.propDecorators = {
name: [{ type: Input }],
values: [{ type: Input }],
cssStyle: [{ type: Input }],
disabled: [{ type: Input }],
change: [{ type: Output }],
radios: [{ type: ContentChildren, args: [RadioComponent,] }]
};
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
*/
class RadioModule {
}
RadioModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, FormsModule],
exports: [RadioGroupComponent, RadioComponent],
declarations: [RadioGroupComponent, RadioComponent],
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-radio.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { RadioComponent, RadioGroupComponent, RadioModule };
//# sourceMappingURL=ng-devui-radio.js.map