@nbxx/nb-input
Version:
Angular - nbinput
78 lines • 3.96 kB
JavaScript
import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { NbFieldType } from './nbinput.entity';
export class NbinputChooseComponent {
constructor() {
this.onTouchedCallback = () => { };
this.onChangeCallback = (_) => { };
this.disabled = false;
this.readonly = false;
this.FieldType = NbFieldType;
this.type = NbFieldType.Checkbox;
this.checked = false;
this.onChange = new EventEmitter();
}
registerOnChange(fn) { if (fn) {
this.onChangeCallback = fn;
} }
registerOnTouched(fn) { if (fn) {
this.onTouchedCallback = fn;
} }
setDisabledState(isDisabled) { this.disabled = isDisabled; }
writeValue(obj) {
this.checked = !!obj;
}
onBlur() { this.onTouchedCallback(); }
get value() {
return this.checked;
}
;
set value(v) {
this.checked = !!v;
this.onChangeCallback(v);
}
changed(e) {
console.log('checked: ', e.target.checked);
this.onChange.emit(e.target.checked);
this.onChangeCallback(e.target.checked);
}
}
NbinputChooseComponent.decorators = [
{ type: Component, args: [{
selector: 'nbinput-choose',
template: `
<ng-container [ngSwitch]="true">
<ng-container *ngSwitchCase="type==FieldType.Checkbox">
<label class="control control-checkbox">{{text}}
<input type="checkbox" [checked]="checked" (change)="changed($event)" [disabled]="readonly||disabled?true:null"/>
<div class="control-indicator"></div>
</label>
</ng-container>
<ng-container *ngSwitchCase="type==FieldType.Radio">
<label class="control control-radio">{{text}}
<input type="radio" name="radio" [checked]="checked" (change)="changed($event)" [disabled]="disabled?true:null"/>
<div class="control-indicator"></div>
</label>
</ng-container>
</ng-container>
`,
styles: [`
.control{display:inline-block;position:relative;padding-left:28px;margin-bottom:12px;cursor:pointer;font-size:14px;min-width:120px}.control input{position:absolute;z-index:-1;opacity:0}.control-indicator{position:absolute;top:2px;left:0;height:17px;width:17px;background:#E6E6E6}.control-radio .control-indicator{border-radius:50%}.control:hover input ~ .control-indicator,.control input:focus ~ .control-indicator{background:#ccc}.control input:checked ~ .control-indicator{background:#20a8d8}.control:hover input:not([disabled]):checked ~ .control-indicator,.control input:checked:focus ~ .control-indicator{background:#1985ac}.control input:disabled ~ .control-indicator{background:#E6E6E6;opacity:0.6;pointer-events:none}.control-indicator:after{content:'';position:absolute;display:none}.control input:checked ~ .control-indicator:after{display:block}.control-checkbox .control-indicator:after{left:8px;top:4px;width:3px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.control-checkbox input:disabled ~ .control-indicator:after{border-color:#7B7B7B}.control-radio .control-indicator:after{left:7px;top:7px;height:6px;width:6px;border-radius:50%;background:#fff}.control-radio input:disabled ~ .control-indicator:after{background:#7B7B7B}
`],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NbinputChooseComponent),
multi: true
}
]
},] },
];
NbinputChooseComponent.propDecorators = {
readonly: [{ type: Input }],
type: [{ type: Input }],
text: [{ type: Input }],
checked: [{ type: Input }],
onChange: [{ type: Output }]
};
//# sourceMappingURL=nbinput-choose.component.js.map