@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
2 lines • 10.9 kB
JavaScript
!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-devui/radio",["exports","@angular/core","@angular/forms","@angular/common"],i):i(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"].radio={}),e.ng.core,e.ng.forms,e.ng.common)}(this,(function(e,i,r,t){"use strict";var n=function(){function e(){this.onChange=function(e){return null},this.onTouched=function(){return null}}return Object.defineProperty(e.prototype,"name",{get:function(){return this._name},set:function(e){this._name=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"disabled",{get:function(){return this._disabled},set:function(e){this._disabled=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"value",{get:function(){return this.__value},set:function(e){this.__value=e},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.registerHandleChange=function(e){this.handleChange=e},e.prototype.writeValue=function(e){this._value=e},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype.handleModelChange=function(e,i){e.stopPropagation(),this._value=i,this.onTouched(),this.onChange(i)},e.decorators=[{type:i.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:r.NG_VALUE_ACCESSOR,useExisting:i.forwardRef((function(){return e})),multi:!0}],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}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={name:[{type:i.Input}],disabled:[{type:i.Input}],value:[{type:i.Input}]},e}();var o=function(){function e(){this.change=new i.EventEmitter,this.radios=new i.QueryList}return e.prototype.ngAfterViewInit=function(){var e=this;this.radios.forEach((function(i){e.registerRadio(i)})),this.radios.changes.subscribe((function(i){i.forEach((function(i){e.registerRadio(i)}))}))},e.prototype.ngOnChanges=function(e){var i=this;e&&e.name&&this.radios&&this.radios.forEach((function(e){e.name=i.name})),e&&e.disabled&&this.radios&&this.radios.forEach((function(e){e.disabled=i.disabled})),e&&this.radios&&this.radios.forEach((function(e){e.disabled=i.disabled}))},e.prototype.registerRadio=function(e){var i=this;e.registerOnChange((function(e){i.writeValue(e),i.onChange(e),i.change.emit(e)}))},e.prototype.handleChange=function(e,i){e.stopPropagation(),this.writeValue(i),this.onChange(i),this.change.emit(i)},e.prototype.writeValue=function(e){var i=this;this._value=e,this.radios&&this.radios.length>0&&this.radios.forEach((function(e){e.writeValue(i._value)}))},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.decorators=[{type:i.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:r.NG_VALUE_ACCESSOR,useExisting:i.forwardRef((function(){return e})),multi:!0}],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}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={name:[{type:i.Input}],values:[{type:i.Input}],cssStyle:[{type:i.Input}],disabled:[{type:i.Input}],change:[{type:i.Output}],radios:[{type:i.ContentChildren,args:[n]}]},e}();var a=function(){function e(){}return e.decorators=[{type:i.NgModule,args:[{imports:[t.CommonModule,r.FormsModule],exports:[o,n],declarations:[o,n],providers:[]}]}],e}();e.RadioComponent=n,e.RadioGroupComponent=o,e.RadioModule=a,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-radio.umd.min.js.map