@nepwork/dashboards
Version:
Dashboards for emergencies and monitoring
519 lines • 20.7 kB
JavaScript
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { __decorate, __metadata } from "tslib";
import { Component, Input, HostBinding, forwardRef, ChangeDetectorRef, Output, EventEmitter, ChangeDetectionStrategy, Renderer2, ElementRef, NgZone, } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { convertToBoolProperty, emptyStatusWarning } from '../helpers';
/**
* Styled checkbox component
*
* @stacked-example(Showcase, checkbox/checkbox-showcase.component)
*
* ### Installation
*
* Import `NbCheckboxComponent` to your feature module.
* ```ts
* @NgModule({
* imports: [
* // ...
* NbCheckboxModule,
* ],
* })
* export class PageModule { }
* ```
* ### Usage
*
* Checkbox is available in multiple colors using `status` property:
* @stacked-example(Colored Checkboxes, checkbox/checkbox-status.component)
*
* Indeterminate state is also supported:
* @stacked-example(Indeterminate Checkbox, checkbox/checkbox-indeterminate.component)
*
* Checkbox can be disabled via `disabled` attribute.
* @stacked-example(Disabled Checkbox, checkbox/checkbox-disabled.component)
*
* @styles
*
* checkbox-height:
* checkbox-width:
* checkbox-border-style:
* checkbox-border-width:
* checkbox-border-radius:
* checkbox-outline-width:
* checkbox-outline-color:
* checkbox-text-font-family:
* checkbox-text-font-size:
* checkbox-text-font-weight:
* checkbox-text-line-height:
* checkbox-text-space:
* checkbox-padding:
* checkbox-focus-inset-shadow-length:
* checkbox-basic-text-color:
* checkbox-basic-background-color:
* checkbox-basic-border-color:
* checkbox-basic-checked-background-color:
* checkbox-basic-checked-border-color:
* checkbox-basic-checked-checkmark-color:
* checkbox-basic-indeterminate-background-color:
* checkbox-basic-indeterminate-border-color:
* checkbox-basic-indeterminate-checkmark-color:
* checkbox-basic-focus-background-color:
* checkbox-basic-focus-border-color:
* checkbox-basic-focus-checked-background-color:
* checkbox-basic-focus-checked-border-color:
* checkbox-basic-hover-background-color:
* checkbox-basic-hover-border-color:
* checkbox-basic-hover-checked-background-color:
* checkbox-basic-hover-checked-border-color:
* checkbox-basic-active-background-color:
* checkbox-basic-active-border-color:
* checkbox-basic-active-checked-background-color:
* checkbox-basic-active-checked-border-color:
* checkbox-basic-disabled-background-color:
* checkbox-basic-disabled-border-color:
* checkbox-basic-disabled-checkmark-color:
* checkbox-basic-disabled-text-color:
* checkbox-basic-disabled-checked-background-color:
* checkbox-primary-text-color:
* checkbox-primary-background-color:
* checkbox-primary-border-color:
* checkbox-primary-checked-background-color:
* checkbox-primary-checked-border-color:
* checkbox-primary-checked-checkmark-color:
* checkbox-primary-indeterminate-background-color:
* checkbox-primary-indeterminate-border-color:
* checkbox-primary-indeterminate-checkmark-color:
* checkbox-primary-focus-background-color:
* checkbox-primary-focus-border-color:
* checkbox-primary-focus-checked-background-color:
* checkbox-primary-focus-checked-border-color:
* checkbox-primary-hover-background-color:
* checkbox-primary-hover-border-color:
* checkbox-primary-hover-checked-background-color:
* checkbox-primary-hover-checked-border-color:
* checkbox-primary-active-background-color:
* checkbox-primary-active-border-color:
* checkbox-primary-active-checked-background-color:
* checkbox-primary-active-checked-border-color:
* checkbox-primary-disabled-background-color:
* checkbox-primary-disabled-border-color:
* checkbox-primary-disabled-checkmark-color:
* checkbox-primary-disabled-text-color:
* checkbox-primary-disabled-checked-background-color:
* checkbox-success-text-color:
* checkbox-success-background-color:
* checkbox-success-border-color:
* checkbox-success-checked-background-color:
* checkbox-success-checked-border-color:
* checkbox-success-checked-checkmark-color:
* checkbox-success-indeterminate-background-color:
* checkbox-success-indeterminate-border-color:
* checkbox-success-indeterminate-checkmark-color:
* checkbox-success-focus-background-color:
* checkbox-success-focus-border-color:
* checkbox-success-focus-checked-background-color:
* checkbox-success-focus-checked-border-color:
* checkbox-success-hover-background-color:
* checkbox-success-hover-border-color:
* checkbox-success-hover-checked-background-color:
* checkbox-success-hover-checked-border-color:
* checkbox-success-active-background-color:
* checkbox-success-active-border-color:
* checkbox-success-active-checked-background-color:
* checkbox-success-active-checked-border-color:
* checkbox-success-disabled-background-color:
* checkbox-success-disabled-border-color:
* checkbox-success-disabled-checkmark-color:
* checkbox-success-disabled-text-color:
* checkbox-success-disabled-checked-background-color:
* checkbox-info-text-color:
* checkbox-info-background-color:
* checkbox-info-border-color:
* checkbox-info-checked-background-color:
* checkbox-info-checked-border-color:
* checkbox-info-checked-checkmark-color:
* checkbox-info-indeterminate-background-color:
* checkbox-info-indeterminate-border-color:
* checkbox-info-indeterminate-checkmark-color:
* checkbox-info-focus-background-color:
* checkbox-info-focus-border-color:
* checkbox-info-focus-checked-background-color:
* checkbox-info-focus-checked-border-color:
* checkbox-info-hover-background-color:
* checkbox-info-hover-border-color:
* checkbox-info-hover-checked-background-color:
* checkbox-info-hover-checked-border-color:
* checkbox-info-active-background-color:
* checkbox-info-active-border-color:
* checkbox-info-active-checked-background-color:
* checkbox-info-active-checked-border-color:
* checkbox-info-disabled-background-color:
* checkbox-info-disabled-border-color:
* checkbox-info-disabled-checkmark-color:
* checkbox-info-disabled-text-color:
* checkbox-info-disabled-checked-background-color:
* checkbox-warning-text-color:
* checkbox-warning-background-color:
* checkbox-warning-border-color:
* checkbox-warning-checked-background-color:
* checkbox-warning-checked-border-color:
* checkbox-warning-checked-checkmark-color:
* checkbox-warning-indeterminate-background-color:
* checkbox-warning-indeterminate-border-color:
* checkbox-warning-indeterminate-checkmark-color:
* checkbox-warning-focus-background-color:
* checkbox-warning-focus-border-color:
* checkbox-warning-focus-checked-background-color:
* checkbox-warning-focus-checked-border-color:
* checkbox-warning-hover-background-color:
* checkbox-warning-hover-border-color:
* checkbox-warning-hover-checked-background-color:
* checkbox-warning-hover-checked-border-color:
* checkbox-warning-active-background-color:
* checkbox-warning-active-border-color:
* checkbox-warning-active-checked-background-color:
* checkbox-warning-active-checked-border-color:
* checkbox-warning-disabled-background-color:
* checkbox-warning-disabled-border-color:
* checkbox-warning-disabled-checkmark-color:
* checkbox-warning-disabled-text-color:
* checkbox-warning-disabled-checked-background-color:
* checkbox-danger-text-color:
* checkbox-danger-background-color:
* checkbox-danger-border-color:
* checkbox-danger-checked-background-color:
* checkbox-danger-checked-border-color:
* checkbox-danger-checked-checkmark-color:
* checkbox-danger-indeterminate-background-color:
* checkbox-danger-indeterminate-border-color:
* checkbox-danger-indeterminate-checkmark-color:
* checkbox-danger-focus-background-color:
* checkbox-danger-focus-border-color:
* checkbox-danger-focus-checked-background-color:
* checkbox-danger-focus-checked-border-color:
* checkbox-danger-hover-background-color:
* checkbox-danger-hover-border-color:
* checkbox-danger-hover-checked-background-color:
* checkbox-danger-hover-checked-border-color:
* checkbox-danger-active-background-color:
* checkbox-danger-active-border-color:
* checkbox-danger-active-checked-background-color:
* checkbox-danger-active-checked-border-color:
* checkbox-danger-disabled-background-color:
* checkbox-danger-disabled-border-color:
* checkbox-danger-disabled-checkmark-color:
* checkbox-danger-disabled-text-color:
* checkbox-danger-disabled-checked-background-color:
* checkbox-control-text-color:
* checkbox-control-background-color:
* checkbox-control-border-color:
* checkbox-control-checked-background-color:
* checkbox-control-checked-border-color:
* checkbox-control-checked-checkmark-color:
* checkbox-control-indeterminate-background-color:
* checkbox-control-indeterminate-border-color:
* checkbox-control-indeterminate-checkmark-color:
* checkbox-control-focus-background-color:
* checkbox-control-focus-border-color:
* checkbox-control-focus-checked-background-color:
* checkbox-control-focus-checked-border-color:
* checkbox-control-hover-background-color:
* checkbox-control-hover-border-color:
* checkbox-control-hover-checked-background-color:
* checkbox-control-hover-checked-border-color:
* checkbox-control-active-background-color:
* checkbox-control-active-border-color:
* checkbox-control-active-checked-background-color:
* checkbox-control-active-checked-border-color:
* checkbox-control-disabled-background-color:
* checkbox-control-disabled-border-color:
* checkbox-control-disabled-checkmark-color:
* checkbox-control-disabled-text-color:
* checkbox-control-disabled-checked-background-color:
*/
var NbCheckboxComponent = /** @class */ (function () {
function NbCheckboxComponent(changeDetector, renderer, hostElement, zone) {
this.changeDetector = changeDetector;
this.renderer = renderer;
this.hostElement = hostElement;
this.zone = zone;
this.onChange = function () { };
this.onTouched = function () { };
this._checked = false;
this._disabled = false;
this._status = 'basic';
this._indeterminate = false;
/**
* Output when checked state is changed by a user
* @type EventEmitter<boolean>
*/
this.checkedChange = new EventEmitter();
}
NbCheckboxComponent_1 = NbCheckboxComponent;
Object.defineProperty(NbCheckboxComponent.prototype, "value", {
/**
* Checkbox value
* @deprecated
* @breaking-change Remove @5.0.0
*/
get: function () {
return this.checked;
},
/**
* @deprecated
* @breaking-change Remove @5.0.0
*/
set: function (value) {
console.warn('NbCheckbox: `value` is deprecated and will be removed in 5.0.0. Use `checked` instead.');
this.checked = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCheckboxComponent.prototype, "checked", {
get: function () {
return this._checked;
},
set: function (value) {
this._checked = convertToBoolProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCheckboxComponent.prototype, "disabled", {
/**
* Controls input disabled state
*/
get: function () {
return this._disabled;
},
set: function (value) {
this._disabled = convertToBoolProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCheckboxComponent.prototype, "status", {
/**
* Checkbox status.
* Possible values are: `basic`, `primary`, `success`, `warning`, `danger`, `info`, `control`.
*/
get: function () {
return this._status;
},
set: function (value) {
if (value === '') {
emptyStatusWarning('NbCheckbox');
this._status = 'basic';
}
else {
this._status = value;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCheckboxComponent.prototype, "indeterminate", {
/**
* Controls checkbox indeterminate state
*/
get: function () {
return this._indeterminate;
},
set: function (value) {
this._indeterminate = convertToBoolProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCheckboxComponent.prototype, "valueChange", {
/**
* Output when checked state is changed by a user
* @deprecated
* @breaking-change Remove @5.0.0
* @type EventEmitter<boolean>
*/
get: function () {
console.warn('NbCheckbox: `valueChange` is deprecated and will be removed in 5.0.0. Use `checkedChange` instead.');
return this.checkedChange;
},
set: function (valueChange) {
this.checkedChange = valueChange;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCheckboxComponent.prototype, "primary", {
get: function () {
return this.status === 'primary';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCheckboxComponent.prototype, "success", {
get: function () {
return this.status === 'success';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCheckboxComponent.prototype, "warning", {
get: function () {
return this.status === 'warning';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCheckboxComponent.prototype, "danger", {
get: function () {
return this.status === 'danger';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCheckboxComponent.prototype, "info", {
get: function () {
return this.status === 'info';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCheckboxComponent.prototype, "basic", {
get: function () {
return this.status === 'basic';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbCheckboxComponent.prototype, "control", {
get: function () {
return this.status === 'control';
},
enumerable: true,
configurable: true
});
NbCheckboxComponent.prototype.ngAfterViewInit = function () {
var _this = this;
// TODO: #2254
this.zone.runOutsideAngular(function () { return setTimeout(function () {
_this.renderer.addClass(_this.hostElement.nativeElement, 'nb-transition');
}); });
};
NbCheckboxComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
NbCheckboxComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
NbCheckboxComponent.prototype.writeValue = function (val) {
this._checked = val;
this.changeDetector.markForCheck();
};
NbCheckboxComponent.prototype.setDisabledState = function (val) {
this.disabled = convertToBoolProperty(val);
this.changeDetector.markForCheck();
};
NbCheckboxComponent.prototype.setTouched = function () {
this.onTouched();
};
NbCheckboxComponent.prototype.updateValueAndIndeterminate = function (event) {
var input = event.target;
this.checked = input.checked;
this.checkedChange.emit(this.checked);
this.onChange(this.checked);
this.indeterminate = input.indeterminate;
};
var NbCheckboxComponent_1;
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbCheckboxComponent.prototype, "value", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbCheckboxComponent.prototype, "checked", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbCheckboxComponent.prototype, "disabled", null);
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], NbCheckboxComponent.prototype, "status", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbCheckboxComponent.prototype, "indeterminate", null);
__decorate([
Output(),
__metadata("design:type", EventEmitter),
__metadata("design:paramtypes", [EventEmitter])
], NbCheckboxComponent.prototype, "valueChange", null);
__decorate([
Output(),
__metadata("design:type", Object)
], NbCheckboxComponent.prototype, "checkedChange", void 0);
__decorate([
HostBinding('class.status-primary'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCheckboxComponent.prototype, "primary", null);
__decorate([
HostBinding('class.status-success'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCheckboxComponent.prototype, "success", null);
__decorate([
HostBinding('class.status-warning'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCheckboxComponent.prototype, "warning", null);
__decorate([
HostBinding('class.status-danger'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCheckboxComponent.prototype, "danger", null);
__decorate([
HostBinding('class.status-info'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCheckboxComponent.prototype, "info", null);
__decorate([
HostBinding('class.status-basic'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCheckboxComponent.prototype, "basic", null);
__decorate([
HostBinding('class.status-control'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], NbCheckboxComponent.prototype, "control", null);
NbCheckboxComponent = NbCheckboxComponent_1 = __decorate([
Component({
selector: 'nb-checkbox',
template: "\n <label class=\"label\">\n <input type=\"checkbox\" class=\"native-input visually-hidden\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n (change)=\"updateValueAndIndeterminate($event)\"\n (blur)=\"setTouched()\"\n (click)=\"$event.stopPropagation()\"\n [indeterminate]=\"indeterminate\">\n <span [class.indeterminate]=\"indeterminate\" [class.checked]=\"checked\" class=\"custom-checkbox\">\n <nb-icon *ngIf=\"indeterminate\" icon=\"minus-bold-outline\" pack=\"nebular-essentials\"></nb-icon>\n <nb-icon *ngIf=\"checked && !indeterminate\" icon=\"checkmark-bold-outline\" pack=\"nebular-essentials\"></nb-icon>\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </label>\n ",
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return NbCheckboxComponent_1; }),
multi: true,
}],
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host .label{position:relative;display:inline-flex;align-items:center;margin:0;min-height:inherit}:host .custom-checkbox{flex-shrink:0}:host(.nb-transition) .custom-checkbox{transition-duration:0.15s;transition-property:background-color,border,box-shadow;transition-timing-function:ease-in}:host(.nb-transition) .text{transition-duration:0.15s;transition-property:color;transition-timing-function:ease-in}\n"]
}),
__metadata("design:paramtypes", [ChangeDetectorRef,
Renderer2,
ElementRef,
NgZone])
], NbCheckboxComponent);
return NbCheckboxComponent;
}());
export { NbCheckboxComponent };
//# sourceMappingURL=checkbox.component.js.map