ngx-ui-hero
Version:
Simple, fast and reliable utilities for Angular.
54 lines • 9.37 kB
JavaScript
import { Component, EventEmitter, Inject, Optional, Output, ViewChild } from '@angular/core';
import { NG_ASYNC_VALIDATORS, NG_VALIDATORS, NG_VALUE_ACCESSOR, NgModel } from '@angular/forms';
import { ElementBase } from '../../base/element-base';
import { INPUT_FORMS_CONFIG } from '../../input-forms-config.constants';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
let identifier = 0;
export class InputSwitchComponent extends ElementBase {
constructor(validators, asyncValidators, config) {
super(validators, asyncValidators, config);
this.config = config;
this.onChange = new EventEmitter();
this.identifier = `input-switch-${identifier++}`;
}
Toggle() {
if (this.disabled)
return;
this.value = !this.value;
this.onChange.emit(this.value);
}
}
InputSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InputSwitchComponent, deps: [{ token: NG_VALIDATORS, optional: true }, { token: NG_ASYNC_VALIDATORS, optional: true }, { token: INPUT_FORMS_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
InputSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: InputSwitchComponent, selector: "input-switch", outputs: { onChange: "onChange" }, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: InputSwitchComponent,
multi: true
}], viewQueries: [{ propertyName: "model", first: true, predicate: NgModel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ui-switch\">\n <div class=\"d-flex align-items-center\">\n <div class=\"switch\" (click)=\"Toggle()\" [ngClass]=\"{'on': value, 'disabled': disabled}\">\n <div class=\"switch-toggler\"></div>\n </div>\n <label class=\"ml-2 mb-0\" *ngIf=\"label\">\n {{label}}\n </label>\n </div>\n</div>", styles: [".ui-switch .switch{position:relative;background-color:#f9f9f9;border:1px solid #dfdfdf;min-width:50px;height:30px;border-radius:30px;box-shadow:#dfdfdf 0 0 inset;transition:.3s ease-out all;cursor:pointer}.ui-switch .switch .switch-toggler{position:absolute;top:0;right:calc(100% - 30px);background-color:#fff;border-radius:100%;box-shadow:0 1px 3px #0006;width:30px;height:28px;transition:.3s ease-out all}.ui-switch .switch.on{background-color:#64bd63}.ui-switch .switch.on .switch-toggler{left:auto;right:0}.ui-switch .switch.disabled{background-color:#d2d2d2;border-color:#bdbdbd}.ui-switch .switch.disabled .switch-toggler{background-color:#eee}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InputSwitchComponent, decorators: [{
type: Component,
args: [{ selector: 'input-switch', providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: InputSwitchComponent,
multi: true
}], template: "<div class=\"ui-switch\">\n <div class=\"d-flex align-items-center\">\n <div class=\"switch\" (click)=\"Toggle()\" [ngClass]=\"{'on': value, 'disabled': disabled}\">\n <div class=\"switch-toggler\"></div>\n </div>\n <label class=\"ml-2 mb-0\" *ngIf=\"label\">\n {{label}}\n </label>\n </div>\n</div>", styles: [".ui-switch .switch{position:relative;background-color:#f9f9f9;border:1px solid #dfdfdf;min-width:50px;height:30px;border-radius:30px;box-shadow:#dfdfdf 0 0 inset;transition:.3s ease-out all;cursor:pointer}.ui-switch .switch .switch-toggler{position:absolute;top:0;right:calc(100% - 30px);background-color:#fff;border-radius:100%;box-shadow:0 1px 3px #0006;width:30px;height:28px;transition:.3s ease-out all}.ui-switch .switch.on{background-color:#64bd63}.ui-switch .switch.on .switch-toggler{left:auto;right:0}.ui-switch .switch.disabled{background-color:#d2d2d2;border-color:#bdbdbd}.ui-switch .switch.disabled .switch-toggler{background-color:#eee}\n"] }]
}], ctorParameters: function () { return [{ type: Array, decorators: [{
type: Optional
}, {
type: Inject,
args: [NG_VALIDATORS]
}] }, { type: Array, decorators: [{
type: Optional
}, {
type: Inject,
args: [NG_ASYNC_VALIDATORS]
}] }, { type: undefined, decorators: [{
type: Inject,
args: [INPUT_FORMS_CONFIG]
}] }]; }, propDecorators: { model: [{
type: ViewChild,
args: [NgModel, { static: true }]
}], onChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQtc3dpdGNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC11aS1oZXJvL3NyYy9saWIvaW5wdXQtZm9ybXMvY29tcG9uZW50cy9pbnB1dC1zd2l0Y2gvaW5wdXQtc3dpdGNoLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC11aS1oZXJvL3NyYy9saWIvaW5wdXQtZm9ybXMvY29tcG9uZW50cy9pbnB1dC1zd2l0Y2gvaW5wdXQtc3dpdGNoLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3RixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsYUFBYSxFQUFFLGlCQUFpQixFQUFFLE9BQU8sRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRWhHLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUV0RCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQzs7O0FBRXhFLElBQUksVUFBVSxHQUFHLENBQUMsQ0FBQztBQVluQixNQUFNLE9BQU8sb0JBQXFCLFNBQVEsV0FBb0I7SUFNNUQsWUFDcUMsVUFBc0IsRUFDaEIsZUFBMkIsRUFDL0IsTUFBd0I7UUFFN0QsS0FBSyxDQUFDLFVBQVUsRUFBRSxlQUFlLEVBQUUsTUFBTSxDQUFDLENBQUM7UUFGTixXQUFNLEdBQU4sTUFBTSxDQUFrQjtRQVByRCxhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUUxQyxlQUFVLEdBQUcsZ0JBQWdCLFVBQVUsRUFBRSxFQUFFLENBQUM7SUFRbkQsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLElBQUksQ0FBQyxRQUFRO1lBQUUsT0FBTztRQUMxQixJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUN6QixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDakMsQ0FBQzs7a0hBbEJVLG9CQUFvQixrQkFPVCxhQUFhLDZCQUNiLG1CQUFtQiw2QkFDOUIsa0JBQWtCO3NHQVRsQixvQkFBb0IsMEVBTnBCLENBQUM7WUFDVixPQUFPLEVBQUUsaUJBQWlCO1lBQzFCLFdBQVcsRUFBRSxvQkFBb0I7WUFDakMsS0FBSyxFQUFFLElBQUk7U0FDWixDQUFDLGlFQUdTLE9BQU8scUZDcEJwQixxVUFTTTs0RkRVTyxvQkFBb0I7a0JBVmhDLFNBQVM7K0JBQ0UsY0FBYyxhQUdiLENBQUM7NEJBQ1YsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxzQkFBc0I7NEJBQ2pDLEtBQUssRUFBRSxJQUFJO3lCQUNaLENBQUM7OzBCQVNDLFFBQVE7OzBCQUFJLE1BQU07MkJBQUMsYUFBYTs7MEJBQ2hDLFFBQVE7OzBCQUFJLE1BQU07MkJBQUMsbUJBQW1COzswQkFDdEMsTUFBTTsyQkFBRSxrQkFBa0I7NENBUk8sS0FBSztzQkFBeEMsU0FBUzt1QkFBQyxPQUFPLEVBQUUsRUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFDO2dCQUN4QixRQUFRO3NCQUFqQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEluamVjdCwgT3B0aW9uYWwsIE91dHB1dCwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOR19BU1lOQ19WQUxJREFUT1JTLCBOR19WQUxJREFUT1JTLCBOR19WQUxVRV9BQ0NFU1NPUiwgTmdNb2RlbCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuaW1wb3J0IHsgRWxlbWVudEJhc2UgfSBmcm9tICcuLi8uLi9iYXNlL2VsZW1lbnQtYmFzZSc7XG5pbXBvcnQgeyBJbnB1dEZvcm1zQ29uZmlnIH0gZnJvbSAnLi4vLi4vaW5wdXQtZm9ybXMtY29uZmlnJztcbmltcG9ydCB7IElOUFVUX0ZPUk1TX0NPTkZJRyB9IGZyb20gJy4uLy4uL2lucHV0LWZvcm1zLWNvbmZpZy5jb25zdGFudHMnO1xuXG5sZXQgaWRlbnRpZmllciA9IDA7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2lucHV0LXN3aXRjaCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9pbnB1dC1zd2l0Y2guY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9pbnB1dC1zd2l0Y2guY29tcG9uZW50LnNjc3MnXSxcbiAgcHJvdmlkZXJzOiBbe1xuICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgIHVzZUV4aXN0aW5nOiBJbnB1dFN3aXRjaENvbXBvbmVudCxcbiAgICBtdWx0aTogdHJ1ZVxuICB9XVxufSlcbmV4cG9ydCBjbGFzcyBJbnB1dFN3aXRjaENvbXBvbmVudCBleHRlbmRzIEVsZW1lbnRCYXNlPGJvb2xlYW4+IHtcbiAgQFZpZXdDaGlsZChOZ01vZGVsLCB7c3RhdGljOiB0cnVlfSkgbW9kZWw6IE5nTW9kZWw7XG4gIEBPdXRwdXQoKSBvbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICBwdWJsaWMgaWRlbnRpZmllciA9IGBpbnB1dC1zd2l0Y2gtJHtpZGVudGlmaWVyKyt9YDtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBAT3B0aW9uYWwoKSBASW5qZWN0KE5HX1ZBTElEQVRPUlMpIHZhbGlkYXRvcnM6IEFycmF5PGFueT4sXG4gICAgQE9wdGlvbmFsKCkgQEluamVjdChOR19BU1lOQ19WQUxJREFUT1JTKSBhc3luY1ZhbGlkYXRvcnM6IEFycmF5PGFueT4sXG4gICAgQEluamVjdCggSU5QVVRfRk9STVNfQ09ORklHICkgcHVibGljIGNvbmZpZzogSW5wdXRGb3Jtc0NvbmZpZ1xuICApIHtcbiAgICBzdXBlcih2YWxpZGF0b3JzLCBhc3luY1ZhbGlkYXRvcnMsIGNvbmZpZyk7XG4gIH1cblxuICBUb2dnbGUoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZWQpIHJldHVybjtcbiAgICB0aGlzLnZhbHVlID0gIXRoaXMudmFsdWU7XG4gICAgdGhpcy5vbkNoYW5nZS5lbWl0KHRoaXMudmFsdWUpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwidWktc3dpdGNoXCI+XG4gIDxkaXYgY2xhc3M9XCJkLWZsZXggYWxpZ24taXRlbXMtY2VudGVyXCI+XG4gICAgPGRpdiBjbGFzcz1cInN3aXRjaFwiIChjbGljayk9XCJUb2dnbGUoKVwiIFtuZ0NsYXNzXT1cInsnb24nOiB2YWx1ZSwgJ2Rpc2FibGVkJzogZGlzYWJsZWR9XCI+XG4gICAgICA8ZGl2IGNsYXNzPVwic3dpdGNoLXRvZ2dsZXJcIj48L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8bGFiZWwgY2xhc3M9XCJtbC0yIG1iLTBcIiAqbmdJZj1cImxhYmVsXCI+XG4gICAgICB7e2xhYmVsfX1cbiAgICA8L2xhYmVsPlxuICA8L2Rpdj5cbjwvZGl2PiJdfQ==