@nepwork/dashboards
Version:
Dashboards for emergencies and monitoring
440 lines • 16.5 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 { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, Output, ViewChild, ElementRef, Renderer2, } from '@angular/core';
import { convertToBoolProperty, emptyStatusWarning } from '../helpers';
/**
* The `NbRadioComponent` provides the same functionality as native `<input type="radio">`
* with Nebular styles and animations.
*
* @stacked-example(Showcase, radio/radio-showcase.component)
*
* ### Installation
*
* Import `NbRadioModule` to your feature module.
*
* ```ts
* @NgModule({
* imports: [
* // ...
* NbRadioModule,
* ],
* })
* export class PageModule { }
* ```
*
* ### Usage
*
* Radio buttons should be wrapped in `nb-radio-group` to provide form bindings.
*
* ```html
* <nb-radio-group [(ngModel)]="selectedOption">
* <nb-radio value="1">Option 1</nb-radio>
* <nb-radio value="2">Option 2</nb-radio>
* <nb-radio value="3">Option 3</nb-radio>
* </nb-radio-group>
* ```
*
* You can disable some radios in the group using a `disabled` attribute.
*
* @stacked-example(Disabled, radio/radio-disabled.component)
*
*
* @styles
*
* radio-width:
* radio-height:
* radio-border-style:
* radio-border-width:
* radio-text-font-family:
* radio-text-font-size:
* radio-text-font-weight:
* radio-text-line-height:
* radio-outline-color:
* radio-outline-width:
* radio-basic-text-color:
* radio-basic-border-color:
* radio-basic-background-color:
* radio-basic-checked-background-color:
* radio-basic-checked-border-color:
* radio-basic-inner-circle-color:
* radio-basic-focus-border-color:
* radio-basic-focus-inner-circle-color:
* radio-basic-hover-background-color:
* radio-basic-hover-border-color:
* radio-basic-hover-inner-circle-color:
* radio-basic-hover-checked-background-color:
* radio-basic-active-border-color:
* radio-basic-active-inner-circle-color:
* radio-basic-disabled-background-color:
* radio-basic-disabled-border-color:
* radio-basic-disabled-text-color:
* radio-basic-disabled-checked-background-color:
* radio-basic-disabled-checked-border-color:
* radio-basic-disabled-checked-inner-circle-color:
* radio-primary-text-color:
* radio-primary-border-color:
* radio-primary-background-color:
* radio-primary-checked-background-color:
* radio-primary-checked-border-color:
* radio-primary-inner-circle-color:
* radio-primary-focus-border-color:
* radio-primary-focus-inner-circle-color:
* radio-primary-hover-background-color:
* radio-primary-hover-border-color:
* radio-primary-hover-inner-circle-color:
* radio-primary-hover-checked-background-color:
* radio-primary-active-border-color:
* radio-primary-active-inner-circle-color:
* radio-primary-disabled-background-color:
* radio-primary-disabled-border-color:
* radio-primary-disabled-text-color:
* radio-primary-disabled-checked-background-color:
* radio-primary-disabled-checked-border-color:
* radio-primary-disabled-checked-inner-circle-color:
* radio-success-text-color:
* radio-success-border-color:
* radio-success-background-color:
* radio-success-checked-background-color:
* radio-success-checked-border-color:
* radio-success-inner-circle-color:
* radio-success-focus-border-color:
* radio-success-focus-inner-circle-color:
* radio-success-hover-background-color:
* radio-success-hover-border-color:
* radio-success-hover-inner-circle-color:
* radio-success-hover-checked-background-color:
* radio-success-active-border-color:
* radio-success-active-inner-circle-color:
* radio-success-disabled-background-color:
* radio-success-disabled-border-color:
* radio-success-disabled-text-color:
* radio-success-disabled-checked-background-color:
* radio-success-disabled-checked-border-color:
* radio-success-disabled-checked-inner-circle-color:
* radio-info-text-color:
* radio-info-border-color:
* radio-info-background-color:
* radio-info-checked-background-color:
* radio-info-checked-border-color:
* radio-info-inner-circle-color:
* radio-info-focus-border-color:
* radio-info-focus-inner-circle-color:
* radio-info-hover-background-color:
* radio-info-hover-border-color:
* radio-info-hover-inner-circle-color:
* radio-info-hover-checked-background-color:
* radio-info-active-border-color:
* radio-info-active-inner-circle-color:
* radio-info-disabled-background-color:
* radio-info-disabled-border-color:
* radio-info-disabled-text-color:
* radio-info-disabled-checked-background-color:
* radio-info-disabled-checked-border-color:
* radio-info-disabled-checked-inner-circle-color:
* radio-warning-text-color:
* radio-warning-border-color:
* radio-warning-background-color:
* radio-warning-checked-background-color:
* radio-warning-checked-border-color:
* radio-warning-inner-circle-color:
* radio-warning-focus-border-color:
* radio-warning-focus-inner-circle-color:
* radio-warning-hover-background-color:
* radio-warning-hover-border-color:
* radio-warning-hover-inner-circle-color:
* radio-warning-hover-checked-background-color:
* radio-warning-active-border-color:
* radio-warning-active-inner-circle-color:
* radio-warning-disabled-background-color:
* radio-warning-disabled-border-color:
* radio-warning-disabled-text-color:
* radio-warning-disabled-checked-background-color:
* radio-warning-disabled-checked-border-color:
* radio-warning-disabled-checked-inner-circle-color:
* radio-danger-text-color:
* radio-danger-border-color:
* radio-danger-background-color:
* radio-danger-checked-background-color:
* radio-danger-checked-border-color:
* radio-danger-inner-circle-color:
* radio-danger-focus-border-color:
* radio-danger-focus-inner-circle-color:
* radio-danger-hover-background-color:
* radio-danger-hover-border-color:
* radio-danger-hover-inner-circle-color:
* radio-danger-hover-checked-background-color:
* radio-danger-active-border-color:
* radio-danger-active-inner-circle-color:
* radio-danger-disabled-background-color:
* radio-danger-disabled-border-color:
* radio-danger-disabled-text-color:
* radio-danger-disabled-checked-background-color:
* radio-danger-disabled-checked-border-color:
* radio-danger-disabled-checked-inner-circle-color:
* radio-control-text-color:
* radio-control-background-color:
* radio-control-border-color:
* radio-control-checked-background-color:
* radio-control-checked-border-color:
* radio-control-inner-circle-color:
* radio-control-focus-border-color:
* radio-control-focus-inner-circle-color:
* radio-control-hover-background-color:
* radio-control-hover-border-color:
* radio-control-hover-inner-circle-color:
* radio-control-hover-checked-background-color:
* radio-control-active-border-color:
* radio-control-active-inner-circle-color:
* radio-control-disabled-background-color:
* radio-control-disabled-border-color:
* radio-control-disabled-text-color:
* radio-control-disabled-checked-background-color:
* radio-control-disabled-checked-border-color:
* radio-control-disabled-checked-inner-circle-color:
* */
var NbRadioComponent = /** @class */ (function () {
function NbRadioComponent(cd, renderer) {
this.cd = cd;
this.renderer = renderer;
this._checked = false;
this._disabled = false;
this._status = 'basic';
this.valueChange = new EventEmitter();
this.blur = new EventEmitter();
}
Object.defineProperty(NbRadioComponent.prototype, "name", {
get: function () {
return this._name;
},
set: function (value) {
if (this._name !== value) {
this._name = value;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbRadioComponent.prototype, "checked", {
get: function () {
return this._checked;
},
set: function (value) {
var boolValue = convertToBoolProperty(value);
if (this._checked !== boolValue) {
this._checked = boolValue;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbRadioComponent.prototype, "value", {
get: function () {
return this._value;
},
set: function (value) {
if (this._value !== value) {
this._value = value;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbRadioComponent.prototype, "disabled", {
get: function () {
return this._disabled;
},
set: function (disabled) {
var boolValue = convertToBoolProperty(disabled);
if (this._disabled !== boolValue) {
this._disabled = boolValue;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbRadioComponent.prototype, "status", {
get: function () {
return this._status;
},
set: function (value) {
if (value === '') {
emptyStatusWarning('NbRadio');
value = 'basic';
}
if (this._status !== value) {
this._status = value;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbRadioComponent.prototype, "isPrimary", {
get: function () {
return this.status === 'primary';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbRadioComponent.prototype, "isSuccess", {
get: function () {
return this.status === 'success';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbRadioComponent.prototype, "isWarning", {
get: function () {
return this.status === 'warning';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbRadioComponent.prototype, "isDanger", {
get: function () {
return this.status === 'danger';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbRadioComponent.prototype, "isInfo", {
get: function () {
return this.status === 'info';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbRadioComponent.prototype, "isBasic", {
get: function () {
return this.status === 'basic';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbRadioComponent.prototype, "isControl", {
get: function () {
return this.status === 'control';
},
enumerable: true,
configurable: true
});
NbRadioComponent.prototype.onChange = function (event) {
event.stopPropagation();
this.checked = true;
this.valueChange.emit(this.value);
};
NbRadioComponent.prototype.onClick = function (event) {
event.stopPropagation();
};
/*
* @docs-private
* We use this method when setting radio inputs from radio group component.
* Otherwise Angular won't detect changes in radio template as cached last rendered
* value didn't updated.
**/
NbRadioComponent.prototype._markForCheck = function () {
this.cd.markForCheck();
};
/*
* @docs-private
* Use this method when setting radio name from radio group component.
* In case option 'name' isn't set on nb-radio component we need to set name
* right away, so it won't overlap with options without names from other radio
* groups. Otherwise they all would have same name and will be considered as
* options from one group so only the last option will stay selected.
**/
NbRadioComponent.prototype._setName = function (name) {
this.name = name;
if (this.input) {
this.renderer.setProperty(this.input.nativeElement, 'name', name);
}
};
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], NbRadioComponent.prototype, "name", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbRadioComponent.prototype, "checked", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], NbRadioComponent.prototype, "value", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbRadioComponent.prototype, "disabled", null);
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], NbRadioComponent.prototype, "status", null);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], NbRadioComponent.prototype, "valueChange", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], NbRadioComponent.prototype, "blur", void 0);
__decorate([
ViewChild('input', { read: ElementRef }),
__metadata("design:type", ElementRef)
], NbRadioComponent.prototype, "input", void 0);
__decorate([
HostBinding('class.status-primary'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbRadioComponent.prototype, "isPrimary", null);
__decorate([
HostBinding('class.status-success'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbRadioComponent.prototype, "isSuccess", null);
__decorate([
HostBinding('class.status-warning'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbRadioComponent.prototype, "isWarning", null);
__decorate([
HostBinding('class.status-danger'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbRadioComponent.prototype, "isDanger", null);
__decorate([
HostBinding('class.status-info'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbRadioComponent.prototype, "isInfo", null);
__decorate([
HostBinding('class.status-basic'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbRadioComponent.prototype, "isBasic", null);
__decorate([
HostBinding('class.status-control'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbRadioComponent.prototype, "isControl", null);
NbRadioComponent = __decorate([
Component({
selector: 'nb-radio',
template: "\n <label>\n <input\n #input\n type=\"radio\"\n class=\"native-input visually-hidden\"\n [name]=\"name\"\n [value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"onChange($event)\"\n (click)=\"onClick($event)\">\n <span class=\"outer-circle\"></span>\n <span class=\"inner-circle\"></span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </label>\n ",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{display:block;position:relative}:host label{display:inline-flex;margin:0;min-height:inherit;padding:0.375rem 0;align-items:center}[dir=ltr] :host label{padding-right:1.5rem}[dir=rtl] :host label{padding-left:1.5rem}:host .outer-circle,:host .inner-circle{border-radius:50%;position:absolute;top:50%;transform:translateY(-50%)}[dir=ltr] :host .outer-circle,[dir=ltr] :host .inner-circle{left:0}[dir=rtl] :host .outer-circle,[dir=rtl] :host .inner-circle{right:0}:host .inner-circle{transform:translateY(-50%) scale(0.6)}[dir=ltr] :host .text{padding-left:.5rem}[dir=rtl] :host .text{padding-right:.5rem}\n"]
}),
__metadata("design:paramtypes", [ChangeDetectorRef,
Renderer2])
], NbRadioComponent);
return NbRadioComponent;
}());
export { NbRadioComponent };
//# sourceMappingURL=radio.component.js.map