@leoborel/ngx-ui-switch
Version:
switch button for angular4
220 lines (214 loc) • 11.1 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, forwardRef, EventEmitter, Component, Inject, Optional, Input, Output, HostListener, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
const UI_SWITCH_OPTIONS = new InjectionToken('UI_SWITCH_OPTIONS');
const UI_SWITCH_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => UiSwitchComponent),
multi: true,
};
class UiSwitchComponent {
constructor(config = {}, cdr) {
this.cdr = cdr;
/**
* Emits changed value
*/
// eslint-disable-next-line @angular-eslint/no-output-native
this.change = new EventEmitter();
/**
* Emits DOM event
*/
this.changeEvent = new EventEmitter();
/**
* Emits changed value
*/
this.valueChange = new EventEmitter();
this.onTouchedCallback = (v) => { };
this.onChangeCallback = (v) => { };
this.size = (config && config.size) || 'medium';
this.color = config && config.color;
this.switchOffColor = config && config.switchOffColor;
this.switchColor = config && config.switchColor;
this.defaultBgColor = config && config.defaultBgColor;
this.defaultBoColor = config && config.defaultBoColor;
this.checkedLabel = config && config.checkedLabel;
this.uncheckedLabel = config && config.uncheckedLabel;
this.checkedTextColor = config && config.checkedTextColor;
this.uncheckedTextColor = config && config.uncheckedTextColor;
}
set checked(v) {
this._checked = v !== false;
}
get checked() {
return this._checked;
}
set disabled(v) {
this._disabled = v !== false;
}
get disabled() {
return this._disabled;
}
set reverse(v) {
this._reverse = v !== false;
}
get reverse() {
return this._reverse;
}
set loading(v) {
this._loading = v !== false;
}
get loading() {
return this._loading;
}
getColor(flag = '') {
if (flag === 'borderColor') {
return this.defaultBoColor;
}
if (flag === 'switchColor') {
if (this.reverse) {
return !this.checked ? this.switchColor : this.switchOffColor || this.switchColor;
}
return this.checked ? this.switchColor : this.switchOffColor || this.switchColor;
}
if (flag === 'checkedTextColor') {
return this.reverse ? this.uncheckedTextColor : this.checkedTextColor;
}
if (flag === 'uncheckedTextColor') {
return this.reverse ? this.checkedTextColor : this.uncheckedTextColor;
}
if (this.reverse) {
return !this.checked ? this.color : this.defaultBgColor;
}
return this.checked ? this.color : this.defaultBgColor;
}
onClick(event) {
if (this.disabled) {
return;
}
this.checked = !this.checked;
// Component events
this.change.emit(this.checked);
this.valueChange.emit(this.checked);
this.changeEvent.emit(event);
// value accessor callbacks
this.onChangeCallback(this.checked);
this.onTouchedCallback(this.checked);
this.cdr.markForCheck();
}
onToggle(event) {
if (this.disabled) {
return;
}
if (this.beforeChange) {
this._beforeChange = this.beforeChange.subscribe((confirm) => {
if (confirm) {
this.onClick(event);
}
});
}
else {
this.onClick(event);
}
}
writeValue(obj) {
if (obj !== this.checked) {
this.checked = !!obj;
}
this.onChangeCallback(this.checked);
if (this.cdr) {
this.cdr.markForCheck();
}
}
registerOnChange(fn) {
this.onChangeCallback = fn;
}
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
ngOnDestroy() {
if (this._beforeChange) {
this._beforeChange.unsubscribe();
}
}
}
UiSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UiSwitchComponent, deps: [{ token: UI_SWITCH_OPTIONS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
UiSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: UiSwitchComponent, selector: "ui-switch", inputs: { size: "size", color: "color", switchOffColor: "switchOffColor", switchColor: "switchColor", defaultBgColor: "defaultBgColor", defaultBoColor: "defaultBoColor", checkedLabel: "checkedLabel", uncheckedLabel: "uncheckedLabel", checkedTextColor: "checkedTextColor", uncheckedTextColor: "uncheckedTextColor", beforeChange: "beforeChange", checked: "checked", disabled: "disabled", reverse: "reverse", loading: "loading" }, outputs: { change: "change", changeEvent: "changeEvent", valueChange: "valueChange" }, host: { listeners: { "click": "onToggle($event)" } }, providers: [UI_SWITCH_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<button\r\n type=\"button\"\r\n class=\"switch\"\r\n role=\"switch\"\r\n [attr.aria-checked]=\"checked\"\r\n [class.checked]=\"checked\"\r\n [class.disabled]=\"disabled\"\r\n [class.loading]=\"loading\"\r\n [class.switch-large]=\"size === 'large'\"\r\n [class.switch-medium]=\"size === 'medium'\"\r\n [class.switch-small]=\"size === 'small'\"\r\n [style.background-color]=\"getColor()\"\r\n [style.border-color]=\"getColor('borderColor')\"\r\n>\r\n <label class=\"switch-pane\" *ngIf=\"checkedLabel || uncheckedLabel\">\r\n <span\r\n [attr.aria-label]=\"this.checkedLabel\"\r\n class=\"switch-label-checked\"\r\n [style.color]=\"getColor('checkedTextColor')\"\r\n >{{ this.checkedLabel }}</span\r\n >\r\n <span\r\n [attr.aria-label]=\"this.uncheckedLabel\"\r\n class=\"switch-label-unchecked\"\r\n [style.color]=\"getColor('uncheckedTextColor')\"\r\n >{{ this.uncheckedLabel }}</span\r\n >\r\n </label>\r\n <small [style.background]=\"getColor('switchColor')\">\r\n <ng-content></ng-content>\r\n </small>\r\n</button>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UiSwitchComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-switch', providers: [UI_SWITCH_CONTROL_VALUE_ACCESSOR], template: "<button\r\n type=\"button\"\r\n class=\"switch\"\r\n role=\"switch\"\r\n [attr.aria-checked]=\"checked\"\r\n [class.checked]=\"checked\"\r\n [class.disabled]=\"disabled\"\r\n [class.loading]=\"loading\"\r\n [class.switch-large]=\"size === 'large'\"\r\n [class.switch-medium]=\"size === 'medium'\"\r\n [class.switch-small]=\"size === 'small'\"\r\n [style.background-color]=\"getColor()\"\r\n [style.border-color]=\"getColor('borderColor')\"\r\n>\r\n <label class=\"switch-pane\" *ngIf=\"checkedLabel || uncheckedLabel\">\r\n <span\r\n [attr.aria-label]=\"this.checkedLabel\"\r\n class=\"switch-label-checked\"\r\n [style.color]=\"getColor('checkedTextColor')\"\r\n >{{ this.checkedLabel }}</span\r\n >\r\n <span\r\n [attr.aria-label]=\"this.uncheckedLabel\"\r\n class=\"switch-label-unchecked\"\r\n [style.color]=\"getColor('uncheckedTextColor')\"\r\n >{{ this.uncheckedLabel }}</span\r\n >\r\n </label>\r\n <small [style.background]=\"getColor('switchColor')\">\r\n <ng-content></ng-content>\r\n </small>\r\n</button>\r\n" }]
}], ctorParameters: function () {
return [{ type: undefined, decorators: [{
type: Inject,
args: [UI_SWITCH_OPTIONS]
}, {
type: Optional
}] }, { type: i0.ChangeDetectorRef }];
}, propDecorators: { size: [{
type: Input
}], color: [{
type: Input
}], switchOffColor: [{
type: Input
}], switchColor: [{
type: Input
}], defaultBgColor: [{
type: Input
}], defaultBoColor: [{
type: Input
}], checkedLabel: [{
type: Input
}], uncheckedLabel: [{
type: Input
}], checkedTextColor: [{
type: Input
}], uncheckedTextColor: [{
type: Input
}], beforeChange: [{
type: Input
}], checked: [{
type: Input
}], disabled: [{
type: Input
}], reverse: [{
type: Input
}], loading: [{
type: Input
}], change: [{
type: Output
}], changeEvent: [{
type: Output
}], valueChange: [{
type: Output
}], onToggle: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class UiSwitchModule {
static forRoot(config) {
return {
ngModule: UiSwitchModule,
providers: [{ provide: UI_SWITCH_OPTIONS, useValue: config || {} }],
};
}
}
UiSwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UiSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
UiSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: UiSwitchModule, declarations: [UiSwitchComponent], imports: [CommonModule, FormsModule], exports: [FormsModule, UiSwitchComponent] });
UiSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UiSwitchModule, imports: [CommonModule, FormsModule, FormsModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UiSwitchModule, decorators: [{
type: NgModule,
args: [{
declarations: [UiSwitchComponent],
imports: [CommonModule, FormsModule],
exports: [FormsModule, UiSwitchComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { UiSwitchComponent, UiSwitchModule };
//# sourceMappingURL=leoborel-ngx-ui-switch.mjs.map