@duoduo-oba/ng-devui/radio/ng-devui-radio.metadata.json

DevUI components based on Angular

{"__symbolic":"module","version":4,"metadata":{"RadioModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":7,"character":26}],"exports":[{"__symbolic":"reference","name":"RadioGroupComponent"},{"__symbolic":"reference","name":"RadioComponent"}],"declarations":[{"__symbolic":"reference","name":"RadioGroupComponent"},{"__symbolic":"reference","name":"RadioComponent"}],"providers":[]}]}],"members":{}},"RadioGroupComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"d-radio-group","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":21,"character":13},"useExisting":{"__symbolic":"reference","name":"RadioGroupComponent"},"multi":true}],"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","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}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"values":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"cssStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3}}]}],"radios":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":33,"character":3},"arguments":[{"__symbolic":"reference","name":"RadioComponent"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"registerRadio":[{"__symbolic":"method"}],"handleChange":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}},"RadioComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"d-radio","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":9,"character":13},"useExisting":{"__symbolic":"reference","name":"RadioComponent"},"multi":true}],"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","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}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"registerHandleChange":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"handleModelChange":[{"__symbolic":"method"}]}}},"origins":{"RadioModule":"./radio.module","RadioGroupComponent":"./radio-group.component","RadioComponent":"./radio.component"},"importAs":"ng-devui/radio"}