@nbxx/nb-input
Version:
Angular - nbinput
109 lines • 17.4 kB
JavaScript
import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
export class NbinputCheckComponent {
constructor() {
this.onTouchedCallback = () => { };
this.onChangeCallback = (_) => { };
this.disabled = false;
this.readonly = false;
this._items = [];
this._selected = [];
this._data = [];
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.data = obj;
}
onBlur() { this.onTouchedCallback(); }
set options(val) {
if (typeof val === 'object' && val !== null) {
if (typeof val.length === 'number') {
this._items = val;
}
else {
this._items = [val];
}
}
else {
this._items = [];
}
this._items.forEach(o => o.label = o.text);
this.resetSelection();
}
set data(val) {
if (typeof val === 'object' && val !== null && typeof val.length === 'number') {
this._data = val;
}
else {
this._data = [val];
}
this.resetSelection();
}
get data() {
return this._selected.map((x, i) => x ? this._items[i].value : null).filter(x => x != null);
}
get value() {
return this.data;
}
;
set value(v) {
if (v !== this.data) {
this.data = v;
this.onChangeCallback(v);
}
}
resetSelection() {
this._selected = [];
if (this._data && this._data.length > 0 && this._items && this._items.length > 0) {
this._items.forEach(o => {
this._selected.push(this._data.indexOf(o.value) >= 0);
// o.checked = (this._data.indexOf(o.value)>=0);
});
}
}
showData() {
return this._selected.map((x, i) => x ? this._items[i].text : null).filter(x => x != null).join(',');
}
changed(i) {
this._data = this.data;
this.onChange.emit(this.data);
this.onChangeCallback(this.data);
}
}
NbinputCheckComponent.decorators = [
{ type: Component, args: [{
selector: 'nbinput-check',
template: `
<ng-container *ngIf="readonly;else ELSEBLOCK">
<span>{{showData()}}</span>
</ng-container>
<ng-template #ELSEBLOCK>
<nbinput-choose *ngFor="let o of _items;let idx = index" [(ngModel)]="_selected[idx]" [text]="o.text" (ngModelChange)="changed($event)"></nbinput-choose>
</ng-template>
`,
styles: [`
.nb-checkbox{cursor:default;margin-bottom:1rem}.nb-checkbox label{cursor:pointer;display:inline;vertical-align:top;position:relative;padding-left:5px;font-size:14px}.nb-checkbox label::before{cursor:pointer;content:"";display:inline-block;position:absolute;width:17px;height:17px;top:2px;left:0;border:1px solid #e1e6ef;border-radius:3px;background-color:#fff;transition:border 0.15s ease-in-out, color 0.15s ease-in-out}.nb-checkbox label::after{cursor:pointer;display:inline-block;position:absolute;width:16px;height:16px;left:0;top:0;padding-left:3px;padding-top:1px;font-size:11px;color:#495057;content:''}.nb-checkbox input[type="checkbox"],.nb-checkbox input[type="radio"]{position:static;margin-left:0;cursor:pointer;opacity:0;z-index:1}.nb-checkbox input[type="checkbox"]:focus+label::before,.nb-checkbox input[type="radio"]:focus+label::before{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.nb-checkbox input[type="checkbox"]:checked+label::after,.nb-checkbox input[type="radio"]:checked+label::after{font-family:"FontAwesome";content:""}.nb-checkbox input[type="checkbox"]:indeterminate+label::after,.nb-checkbox input[type="radio"]:indeterminate+label::after{display:block;content:"";width:10px;height:3px;background-color:#555555;border-radius:2px;margin-left:-16.5px;margin-top:7px}.nb-checkbox input[type="checkbox"]:disabled+label,.nb-checkbox input[type="radio"]:disabled+label{opacity:0.65}.nb-checkbox input[type="checkbox"]:disabled+label::before,.nb-checkbox input[type="radio"]:disabled+label::before{background-color:#e9ecef;cursor:not-allowed}.nb-checkbox input[type="checkbox"]:disabled+label::after,.nb-checkbox input[type="radio"]:disabled+label::after{cursor:not-allowed}.nb-checkbox label.checked::after{font-family:"FontAwesome";content:""}.nb-checkbox.nb-checkbox-circle label::before{border-radius:50%}.nb-checkbox.checkbox-inline{margin-top:0}.nb-checkbox-primary input[type="checkbox"]:checked::before,.nb-checkbox-primary input[type="checkbox"]:checked+label::before,.nb-checkbox-primary label.checked::before,.nb-checkbox-primary input[type="radio"]:checked::before,.nb-checkbox-primary input[type="radio"]:checked+label::before{background-color:#20a8d8;border-color:#20a8d8}.nb-checkbox-primary input[type="checkbox"]:checked::after,.nb-checkbox-primary input[type="checkbox"]:checked+label::after,.nb-checkbox-primary label.checked::after,.nb-checkbox-primary input[type="radio"]:checked::after,.nb-checkbox-primary input[type="radio"]:checked+label::after{color:#fff}.nb-checkbox-danger input[type="checkbox"]:checked::before,.nb-checkbox-danger input[type="checkbox"]:checked+label::before,.nb-checkbox-danger label.checked::before,.nb-checkbox-danger input[type="radio"]:checked::before,.nb-checkbox-danger input[type="radio"]:checked+label::before{background-color:#ff5454;border-color:#ff5454}.nb-checkbox-danger input[type="checkbox"]:checked::after,.nb-checkbox-danger input[type="checkbox"]:checked+label::after,.nb-checkbox-danger label.checked::after,.nb-checkbox-danger input[type="radio"]:checked::after,.nb-checkbox-danger input[type="radio"]:checked+label::after{color:#fff}.nb-checkbox-info input[type="checkbox"]:checked::before,.nb-checkbox-info input[type="checkbox"]:checked+label::before,.nb-checkbox-info label.checked::before,.nb-checkbox-info input[type="radio"]:checked::before,.nb-checkbox-info input[type="radio"]:checked+label::before{background-color:#67c2ef;border-color:#67c2ef}.nb-checkbox-info input[type="checkbox"]:checked::after,.nb-checkbox-info input[type="checkbox"]:checked+label::after,.nb-checkbox-info label.checked::after,.nb-checkbox-info input[type="radio"]:checked::after,.nb-checkbox-info input[type="radio"]:checked+label::after{color:#fff}.nb-checkbox-warning input[type="checkbox"]:checked::before,.nb-checkbox-warning input[type="checkbox"]:checked+label::before,.nb-checkbox-warning label.checked::before,.nb-checkbox-warning input[type="radio"]:checked::before,.nb-checkbox-warning input[type="radio"]:checked+label::before{background-color:#fabb3d;border-color:#fabb3d}.nb-checkbox-warning input[type="checkbox"]:checked::after,.nb-checkbox-warning input[type="checkbox"]:checked+label::after,.nb-checkbox-warning label.checked::after,.nb-checkbox-warning input[type="radio"]:checked::after,.nb-checkbox-warning input[type="radio"]:checked+label::after{color:#fff}.nb-checkbox-success input[type="checkbox"]:checked::before,.nb-checkbox-success input[type="checkbox"]:checked+label::before,.nb-checkbox-success label.checked::before,.nb-checkbox-success input[type="radio"]:checked::before,.nb-checkbox-success input[type="radio"]:checked+label::before{background-color:#79c447;border-color:#79c447}.nb-checkbox-success input[type="checkbox"]:checked::after,.nb-checkbox-success input[type="checkbox"]:checked+label::after,.nb-checkbox-success label.checked::after,.nb-checkbox-success input[type="radio"]:checked::after,.nb-checkbox-success input[type="radio"]:checked+label::after{color:#fff}.nb-checkbox-primary input[type="checkbox"]:indeterminate::before,.nb-checkbox-primary input[type="checkbox"]:indeterminate+label::before,.nb-checkbox-primary label input[type="checkbox"]:indeterminate::before,.nb-checkbox-primary label input[type="radio"]:indeterminate::before,.nb-checkbox-primary label::before,.nb-checkbox-primary input[type="radio"]:indeterminate::before,.nb-checkbox-primary input[type="radio"]:indeterminate+label::before{background-color:#20a8d8;border-color:#20a8d8}.nb-checkbox-primary input[type="checkbox"]:indeterminate::after,.nb-checkbox-primary input[type="checkbox"]:indeterminate+label::after,.nb-checkbox-primary label input[type="checkbox"]:indeterminate::after,.nb-checkbox-primary label input[type="radio"]:indeterminate::after,.nb-checkbox-primary label::after,.nb-checkbox-primary input[type="radio"]:indeterminate::after,.nb-checkbox-primary input[type="radio"]:indeterminate+label::after{background-color:#fff}.nb-checkbox-danger input[type="checkbox"]:indeterminate::before,.nb-checkbox-danger input[type="checkbox"]:indeterminate+label::before,.nb-checkbox-danger label input[type="checkbox"]:indeterminate::before,.nb-checkbox-danger label input[type="radio"]:indeterminate::before,.nb-checkbox-danger label::before,.nb-checkbox-danger input[type="radio"]:indeterminate::before,.nb-checkbox-danger input[type="radio"]:indeterminate+label::before{background-color:#ff5454;border-color:#ff5454}.nb-checkbox-danger input[type="checkbox"]:indeterminate::after,.nb-checkbox-danger input[type="checkbox"]:indeterminate+label::after,.nb-checkbox-danger label input[type="checkbox"]:indeterminate::after,.nb-checkbox-danger label input[type="radio"]:indeterminate::after,.nb-checkbox-danger label::after,.nb-checkbox-danger input[type="radio"]:indeterminate::after,.nb-checkbox-danger input[type="radio"]:indeterminate+label::after{background-color:#fff}.nb-checkbox-info input[type="checkbox"]:indeterminate::before,.nb-checkbox-info input[type="checkbox"]:indeterminate+label::before,.nb-checkbox-info label input[type="checkbox"]:indeterminate::before,.nb-checkbox-info label input[type="radio"]:indeterminate::before,.nb-checkbox-info label::before,.nb-checkbox-info input[type="radio"]:indeterminate::before,.nb-checkbox-info input[type="radio"]:indeterminate+label::before{background-color:#67c2ef;border-color:#67c2ef}.nb-checkbox-info input[type="checkbox"]:indeterminate::after,.nb-checkbox-info input[type="checkbox"]:indeterminate+label::after,.nb-checkbox-info label input[type="checkbox"]:indeterminate::after,.nb-checkbox-info label input[type="radio"]:indeterminate::after,.nb-checkbox-info label::after,.nb-checkbox-info input[type="radio"]:indeterminate::after,.nb-checkbox-info input[type="radio"]:indeterminate+label::after{background-color:#fff}.nb-checkbox-warning input[type="checkbox"]:indeterminate::before,.nb-checkbox-warning input[type="checkbox"]:indeterminate+label::before,.nb-checkbox-warning label input[type="checkbox"]:indeterminate::before,.nb-checkbox-warning label input[type="radio"]:indeterminate::before,.nb-checkbox-warning label::before,.nb-checkbox-warning input[type="radio"]:indeterminate::before,.nb-checkbox-warning input[type="radio"]:indeterminate+label::before{background-color:#fabb3d;border-color:#fabb3d}.nb-checkbox-warning input[type="checkbox"]:indeterminate::after,.nb-checkbox-warning input[type="checkbox"]:indeterminate+label::after,.nb-checkbox-warning label input[type="checkbox"]:indeterminate::after,.nb-checkbox-warning label input[type="radio"]:indeterminate::after,.nb-checkbox-warning label::after,.nb-checkbox-warning input[type="radio"]:indeterminate::after,.nb-checkbox-warning input[type="radio"]:indeterminate+label::after{background-color:#fff}.nb-checkbox-success input[type="checkbox"]:indeterminate::before,.nb-checkbox-success input[type="checkbox"]:indeterminate+label::before,.nb-checkbox-success label input[type="checkbox"]:indeterminate::before,.nb-checkbox-success label input[type="radio"]:indeterminate::before,.nb-checkbox-success label::before,.nb-checkbox-success input[type="radio"]:indeterminate::before,.nb-checkbox-success input[type="radio"]:indeterminate+label::before{background-color:#79c447;border-color:#79c447}.nb-checkbox-success input[type="checkbox"]:indeterminate::after,.nb-checkbox-success input[type="checkbox"]:indeterminate+label::after,.nb-checkbox-success label input[type="checkbox"]:indeterminate::after,.nb-checkbox-success label input[type="radio"]:indeterminate::after,.nb-checkbox-success label::after,.nb-checkbox-success input[type="radio"]:indeterminate::after,.nb-checkbox-success input[type="radio"]:indeterminate+label::after{background-color:#fff}.nb-radio{cursor:default}.nb-radio label{cursor:pointer;display:inline;vertical-align:top;position:relative;padding-left:5px}.nb-radio label::before{cursor:pointer;content:"";display:inline-block;position:absolute;width:17px;height:17px;top:2px;left:0;border:1px solid #e1e6ef;border-radius:50%;background-color:#fff;transition:border 0.15s ease-in-out}.nb-radio label::after{cursor:pointer;display:inline-block;position:absolute;content:" ";width:11px;height:11px;left:3px;top:5px;border-radius:50%;background-color:#4A5057;transform:scale(0, 0);transition:transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33)}.nb-radio input[type="radio"]{position:static;margin-left:0;cursor:pointer;opacity:0;z-index:1}.nb-radio input[type="radio"]:focus+label::before{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.nb-radio input[type="radio"]:checked+label::after{transform:scale(1, 1)}.nb-radio input[type="radio"]:disabled+label{opacity:0.65}.nb-radio input[type="radio"]:disabled+label::before{cursor:not-allowed}.nb-radio input[type="radio"]:disabled+label::after{cursor:not-allowed}.nb-radio.radio-inline{margin-top:0}.nb-radio-primary label input[type="radio"]+span::after{background-color:#20a8d8}.nb-radio-primary label input[type="radio"]::after{background-color:#20a8d8}.nb-radio-primary label input[type="radio"].checked::before{border-color:#20a8d8}.nb-radio-primary label input[type="radio"].checked::after{background-color:#20a8d8}.nb-radio-primary input[type="radio"]+label::after{background-color:#20a8d8}.nb-radio-primary input[type="radio"]:checked+label::before{border-color:#20a8d8}.nb-radio-primary input[type="radio"]:checked+label::after{background-color:#20a8d8}.nb-radio-danger label input[type="radio"]+span::after{background-color:#ff5454}.nb-radio-danger label input[type="radio"]::after{background-color:#ff5454}.nb-radio-danger label input[type="radio"].checked::before{border-color:#ff5454}.nb-radio-danger label input[type="radio"].checked::after{background-color:#ff5454}.nb-radio-danger input[type="radio"]+label::after{background-color:#ff5454}.nb-radio-danger input[type="radio"]:checked+label::before{border-color:#ff5454}.nb-radio-danger input[type="radio"]:checked+label::after{background-color:#ff5454}.nb-radio-info label input[type="radio"]+span::after{background-color:#67c2ef}.nb-radio-info label input[type="radio"]::after{background-color:#67c2ef}.nb-radio-info label input[type="radio"].checked::before{border-color:#67c2ef}.nb-radio-info label input[type="radio"].checked::after{background-color:#67c2ef}.nb-radio-info input[type="radio"]+label::after{background-color:#67c2ef}.nb-radio-info input[type="radio"]:checked+label::before{border-color:#67c2ef}.nb-radio-info input[type="radio"]:checked+label::after{background-color:#67c2ef}.nb-radio-warning label input[type="radio"]+span::after{background-color:#fabb3d}.nb-radio-warning label input[type="radio"]::after{background-color:#fabb3d}.nb-radio-warning label input[type="radio"].checked::before{border-color:#fabb3d}.nb-radio-warning label input[type="radio"].checked::after{background-color:#fabb3d}.nb-radio-warning input[type="radio"]+label::after{background-color:#fabb3d}.nb-radio-warning input[type="radio"]:checked+label::before{border-color:#fabb3d}.nb-radio-warning input[type="radio"]:checked+label::after{background-color:#fabb3d}.nb-radio-success label input[type="radio"]+span::after{background-color:#79c447}.nb-radio-success label input[type="radio"]::after{background-color:#79c447}.nb-radio-success label input[type="radio"].checked::before{border-color:#79c447}.nb-radio-success label input[type="radio"].checked::after{background-color:#79c447}.nb-radio-success input[type="radio"]+label::after{background-color:#79c447}.nb-radio-success input[type="radio"]:checked+label::before{border-color:#79c447}.nb-radio-success input[type="radio"]:checked+label::after{background-color:#79c447}label .was-validated .form-check-input:invalid .nb-checkbox:before,label .was-validated .form-check-input:invalid .nb-radio:before,label .form-check-input.is-invalid .nb-checkbox:before,label .form-check-input.is-invalid .nb-radio:before{border-color:#20a8d8}
`],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NbinputCheckComponent),
multi: true
}
]
},] },
];
NbinputCheckComponent.propDecorators = {
readonly: [{ type: Input }],
options: [{ type: Input }],
data: [{ type: Input }],
onChange: [{ type: Output }]
};
//# sourceMappingURL=nbinput-check.component.js.map