@nebular/theme
Version:
@nebular/theme
440 lines • 17.4 kB
JavaScript
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { Component, Input, HostBinding, forwardRef, ChangeDetectorRef, Output, EventEmitter, ChangeDetectionStrategy, Renderer2, ElementRef, NgZone, } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { NbStatusService } from '../../services/status.service';
import { NbLayoutDirectionService } from '../../services/direction.service';
import { convertToBoolProperty } from '../helpers';
/**
* Toggle is a control representing `on` and `off` states.
*
* @stacked-example(Showcase, toggle/toggle-showcase.component)
*
* ### Installation
*
* Import `NbToggleComponent` to your feature module.
* ```ts
* @NgModule({
* imports: [
* // ...
* NbToggleModule,
* ],
* })
* export class PageModule { }
* ```
* ### Usage
*
* Toggle may have one of the following statuses: `basic`, `primary`, `success`, `warning`, `danger`, `info`, `control`
*
* @stacked-example(Toggle status, toggle/toggle-status.component)
*
* Toggle can be disabled via `disabled` input.
*
* @stacked-example(Disabled Toggles, toggle/toggle-disabled.component)
*
* Toggle may have a label with following positions: `left`, `right`, `start`, `end` (default)
*
* @stacked-example(Toggles With Labels, toggle/toggle-label-position.component.ts)
*
* You can set control state via `checked` binding:
*
* ```html
* <nb-toggle [(checked)]="checked"></nb-toggle>
* ```
*
* Or it could be set via reactive forms or ngModel bindings:
*
* @stacked-example(Toggle form binding, toggle/toggle-form.component)
*
* @styles
*
* toggle-height:
* toggle-width:
* toggle-border-width:
* toggle-border-radius:
* toggle-outline-width:
* toggle-outline-color:
* toggle-switcher-size:
* toggle-switcher-icon-size:
* toggle-text-font-family:
* toggle-text-font-size:
* toggle-text-font-weight:
* toggle-text-line-height:
* toggle-cursor:
* toggle-disabled-cursor:
* toggle-basic-text-color:
* toggle-basic-background-color:
* toggle-basic-border-color:
* toggle-basic-checked-background-color:
* toggle-basic-checked-border-color:
* toggle-basic-checked-switcher-background-color:
* toggle-basic-checked-switcher-checkmark-color:
* toggle-basic-focus-background-color:
* toggle-basic-focus-border-color:
* toggle-basic-focus-checked-background-color:
* toggle-basic-focus-checked-border-color:
* toggle-basic-hover-background-color:
* toggle-basic-hover-border-color:
* toggle-basic-hover-checked-background-color:
* toggle-basic-hover-checked-border-color:
* toggle-basic-active-background-color:
* toggle-basic-active-border-color:
* toggle-basic-active-checked-background-color:
* toggle-basic-active-checked-border-color:
* toggle-basic-disabled-background-color:
* toggle-basic-disabled-border-color:
* toggle-basic-disabled-switcher-background-color:
* toggle-basic-disabled-checked-switcher-checkmark-color:
* toggle-basic-disabled-text-color:
* toggle-primary-text-color:
* toggle-primary-background-color:
* toggle-primary-border-color:
* toggle-primary-checked-background-color:
* toggle-primary-checked-border-color:
* toggle-primary-checked-switcher-background-color:
* toggle-primary-checked-switcher-checkmark-color:
* toggle-primary-focus-background-color:
* toggle-primary-focus-border-color:
* toggle-primary-focus-checked-background-color:
* toggle-primary-focus-checked-border-color:
* toggle-primary-hover-background-color:
* toggle-primary-hover-border-color:
* toggle-primary-hover-checked-background-color:
* toggle-primary-hover-checked-border-color:
* toggle-primary-active-background-color:
* toggle-primary-active-border-color:
* toggle-primary-active-checked-background-color:
* toggle-primary-active-checked-border-color:
* toggle-primary-disabled-background-color:
* toggle-primary-disabled-border-color:
* toggle-primary-disabled-switcher-background-color:
* toggle-primary-disabled-checked-switcher-checkmark-color:
* toggle-primary-disabled-text-color:
* toggle-success-text-color:
* toggle-success-background-color:
* toggle-success-border-color:
* toggle-success-checked-background-color:
* toggle-success-checked-border-color:
* toggle-success-checked-switcher-background-color:
* toggle-success-checked-switcher-checkmark-color:
* toggle-success-focus-background-color:
* toggle-success-focus-border-color:
* toggle-success-focus-checked-background-color:
* toggle-success-focus-checked-border-color:
* toggle-success-hover-background-color:
* toggle-success-hover-border-color:
* toggle-success-hover-checked-background-color:
* toggle-success-hover-checked-border-color:
* toggle-success-active-background-color:
* toggle-success-active-border-color:
* toggle-success-active-checked-background-color:
* toggle-success-active-checked-border-color:
* toggle-success-disabled-background-color:
* toggle-success-disabled-border-color:
* toggle-success-disabled-switcher-background-color:
* toggle-success-disabled-checked-switcher-checkmark-color:
* toggle-success-disabled-text-color:
* toggle-info-text-color:
* toggle-info-background-color:
* toggle-info-border-color:
* toggle-info-checked-background-color:
* toggle-info-checked-border-color:
* toggle-info-checked-switcher-background-color:
* toggle-info-checked-switcher-checkmark-color:
* toggle-info-focus-background-color:
* toggle-info-focus-border-color:
* toggle-info-focus-checked-background-color:
* toggle-info-focus-checked-border-color:
* toggle-info-hover-background-color:
* toggle-info-hover-border-color:
* toggle-info-hover-checked-background-color:
* toggle-info-hover-checked-border-color:
* toggle-info-active-background-color:
* toggle-info-active-border-color:
* toggle-info-active-checked-background-color:
* toggle-info-active-checked-border-color:
* toggle-info-disabled-background-color:
* toggle-info-disabled-border-color:
* toggle-info-disabled-switcher-background-color:
* toggle-info-disabled-checked-switcher-checkmark-color:
* toggle-info-disabled-text-color:
* toggle-warning-text-color:
* toggle-warning-background-color:
* toggle-warning-border-color:
* toggle-warning-checked-background-color:
* toggle-warning-checked-border-color:
* toggle-warning-checked-switcher-background-color:
* toggle-warning-checked-switcher-checkmark-color:
* toggle-warning-focus-background-color:
* toggle-warning-focus-border-color:
* toggle-warning-focus-checked-background-color:
* toggle-warning-focus-checked-border-color:
* toggle-warning-hover-background-color:
* toggle-warning-hover-border-color:
* toggle-warning-hover-checked-background-color:
* toggle-warning-hover-checked-border-color:
* toggle-warning-active-background-color:
* toggle-warning-active-border-color:
* toggle-warning-active-checked-background-color:
* toggle-warning-active-checked-border-color:
* toggle-warning-disabled-background-color:
* toggle-warning-disabled-border-color:
* toggle-warning-disabled-switcher-background-color:
* toggle-warning-disabled-checked-switcher-checkmark-color:
* toggle-warning-disabled-text-color:
* toggle-danger-text-color:
* toggle-danger-background-color:
* toggle-danger-border-color:
* toggle-danger-checked-background-color:
* toggle-danger-checked-border-color:
* toggle-danger-checked-switcher-background-color:
* toggle-danger-checked-switcher-checkmark-color:
* toggle-danger-focus-background-color:
* toggle-danger-focus-border-color:
* toggle-danger-focus-checked-background-color:
* toggle-danger-focus-checked-border-color:
* toggle-danger-hover-background-color:
* toggle-danger-hover-border-color:
* toggle-danger-hover-checked-background-color:
* toggle-danger-hover-checked-border-color:
* toggle-danger-active-background-color:
* toggle-danger-active-border-color:
* toggle-danger-active-checked-background-color:
* toggle-danger-active-checked-border-color:
* toggle-danger-disabled-background-color:
* toggle-danger-disabled-border-color:
* toggle-danger-disabled-switcher-background-color:
* toggle-danger-disabled-checked-switcher-checkmark-color:
* toggle-danger-disabled-text-color:
* toggle-control-text-color:
* toggle-control-background-color:
* toggle-control-border-color:
* toggle-control-checked-background-color:
* toggle-control-checked-border-color:
* toggle-control-checked-switcher-background-color:
* toggle-control-checked-switcher-checkmark-color:
* toggle-control-focus-background-color:
* toggle-control-focus-border-color:
* toggle-control-focus-checked-background-color:
* toggle-control-focus-checked-border-color:
* toggle-control-hover-background-color:
* toggle-control-hover-border-color:
* toggle-control-hover-checked-background-color:
* toggle-control-hover-checked-border-color:
* toggle-control-active-background-color:
* toggle-control-active-border-color:
* toggle-control-active-checked-background-color:
* toggle-control-active-checked-border-color:
* toggle-control-disabled-background-color:
* toggle-control-disabled-border-color:
* toggle-control-disabled-switcher-background-color:
* toggle-control-disabled-checked-switcher-checkmark-color:
* toggle-control-disabled-text-color:
*/
export class NbToggleComponent {
constructor(changeDetector, layoutDirection, renderer, hostElement, zone, statusService) {
this.changeDetector = changeDetector;
this.layoutDirection = layoutDirection;
this.renderer = renderer;
this.hostElement = hostElement;
this.zone = zone;
this.statusService = statusService;
this.onChange = () => { };
this.onTouched = () => { };
this.destroy$ = new Subject();
this._checked = false;
this._disabled = false;
/**
* Toggle status.
* Possible values are: `basic`, `primary`, `success`, `warning`, `danger`, `info`, `control`.
*/
this.status = 'basic';
/**
* Toggle label position.
* Possible values are: `left`, `right`, `start`, `end` (default)
*/
this.labelPosition = 'end';
/**
* Output when checked state is changed by a user
* @type EventEmitter<boolean>
*/
this.checkedChange = new EventEmitter();
}
/**
* Toggle checked
* @type {boolean}
*/
get checked() {
return this._checked;
}
set checked(value) {
this._checked = convertToBoolProperty(value);
}
/**
* Controls input disabled state
*/
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = convertToBoolProperty(value);
}
get primary() {
return this.status === 'primary';
}
get success() {
return this.status === 'success';
}
get warning() {
return this.status === 'warning';
}
get danger() {
return this.status === 'danger';
}
get info() {
return this.status === 'info';
}
get basic() {
return this.status === 'basic';
}
get control() {
return this.status === 'control';
}
get additionalClasses() {
if (this.statusService.isCustomStatus(this.status)) {
return [this.statusService.getStatusClass(this.status)];
}
return [];
}
get labelLeft() {
return this.labelPosition === 'left';
}
get labelRight() {
return this.labelPosition === 'right';
}
get labelStart() {
return this.labelPosition === 'start';
}
get labelEnd() {
return this.labelPosition === 'end';
}
ngOnInit() {
this.layoutDirection.onDirectionChange()
.pipe(takeUntil(this.destroy$))
.subscribe(() => this.changeDetector.detectChanges());
}
ngAfterViewInit() {
// TODO: #2254
this.zone.runOutsideAngular(() => setTimeout(() => {
this.renderer.addClass(this.hostElement.nativeElement, 'nb-transition');
}));
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
checkState() {
if (this.checked) {
return this.layoutDirection.isLtr() ? 'right' : 'left';
}
return this.layoutDirection.isLtr() ? 'left' : 'right';
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
writeValue(val) {
this.checked = val;
this.changeDetector.markForCheck();
}
setDisabledState(val) {
this.disabled = convertToBoolProperty(val);
this.changeDetector.markForCheck();
}
updateValue(event) {
const input = event.target;
this.checked = input.checked;
this.checkedChange.emit(this.checked);
this.onChange(this.checked);
}
onInputClick(event) {
event.stopPropagation();
}
}
NbToggleComponent.decorators = [
{ type: Component, args: [{
selector: 'nb-toggle',
animations: [
trigger('position', [
state('right', style({ right: 0, left: '*' })),
state('left', style({ left: 0, right: '*' })),
transition(':enter', [animate(0)]),
transition('right <=> left', [animate('0.15s')]),
]),
],
template: `
<label class="toggle-label">
<input type="checkbox"
class="native-input visually-hidden"
role="switch"
[attr.aria-checked]="checked"
[disabled]="disabled"
[checked]="checked"
(change)="updateValue($event)"
(blur)="onTouched()"
(click)="onInputClick($event)">
<div class="toggle" [class.checked]="checked">
<span []="checkState()" class="toggle-switcher">
<nb-icon *ngIf="checked" icon="checkmark-bold-outline" pack="nebular-essentials"></nb-icon>
</span>
</div>
<span class="text">
<ng-content></ng-content>
</span>
</label>
`,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NbToggleComponent),
multi: true,
}],
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{display:inline-flex;outline:none}:host(.toggle-label-left) .text:not(:empty){padding-right:0.6875rem}[dir=ltr] :host(.toggle-label-left) .text:not(:empty){order:-1}[dir=rtl] :host(.toggle-label-left) .text:not(:empty){order:1}:host(.toggle-label-right) .text:not(:empty){padding-left:0.6875rem}[dir=ltr] :host(.toggle-label-right) .text:not(:empty){order:1}[dir=rtl] :host(.toggle-label-right) .text:not(:empty){order:-1}:host(.toggle-label-start) .toggle-label{flex-direction:row-reverse}[dir=ltr] :host(.toggle-label-start) .toggle-label .text:not(:empty){padding-right:.6875rem}[dir=rtl] :host(.toggle-label-start) .toggle-label .text:not(:empty){padding-left:.6875rem}[dir=ltr] :host(.toggle-label-end) .text:not(:empty){padding-left:.6875rem}[dir=rtl] :host(.toggle-label-end) .text:not(:empty){padding-right:.6875rem}:host(.nb-transition) .toggle{transition-duration:0.15s;transition-property:background-color,border,box-shadow;transition-timing-function:ease-in}.toggle-label{position:relative;display:inline-flex;align-items:center}.toggle{position:relative;display:inline-flex;box-sizing:content-box}.toggle-switcher{position:absolute;border-radius:50%;margin:1px}.toggle-switcher nb-icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}\n"]
},] }
];
NbToggleComponent.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: NbLayoutDirectionService },
{ type: Renderer2 },
{ type: ElementRef },
{ type: NgZone },
{ type: NbStatusService }
];
NbToggleComponent.propDecorators = {
checked: [{ type: Input }],
disabled: [{ type: Input }],
status: [{ type: Input }],
labelPosition: [{ type: Input }],
checkedChange: [{ type: Output }],
primary: [{ type: HostBinding, args: ['class.status-primary',] }],
success: [{ type: HostBinding, args: ['class.status-success',] }],
warning: [{ type: HostBinding, args: ['class.status-warning',] }],
danger: [{ type: HostBinding, args: ['class.status-danger',] }],
info: [{ type: HostBinding, args: ['class.status-info',] }],
basic: [{ type: HostBinding, args: ['class.status-basic',] }],
control: [{ type: HostBinding, args: ['class.status-control',] }],
additionalClasses: [{ type: HostBinding, args: ['class',] }],
labelLeft: [{ type: HostBinding, args: ['class.toggle-label-left',] }],
labelRight: [{ type: HostBinding, args: ['class.toggle-label-right',] }],
labelStart: [{ type: HostBinding, args: ['class.toggle-label-start',] }],
labelEnd: [{ type: HostBinding, args: ['class.toggle-label-end',] }]
};
//# sourceMappingURL=toggle.component.js.map