xui
Version:
xUI Components for Angular
102 lines • 11.4 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Input, Optional, Self } from '@angular/core';
import { InputBoolean } from '../utils';
import { NgControl } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/common";
import * as i3 from "../icon/icon.component";
export class SwitchComponent {
get value() {
return this._value;
}
set value(v) {
if (this._value !== v) {
this._value = v;
this.onChange?.(v);
}
}
get style() {
return {
'x-switch': true,
'x-switch-disabled': this.disabled
};
}
get styleSwitch() {
const ret = {
'x-switch-element': true,
'x-switch-toggled': this.value
};
ret[`x-switch-${this.color}`] = this.value;
return ret;
}
constructor(cdr, control) {
this.cdr = cdr;
this.control = control;
this._value = false;
this.disabled = false;
this.color = 'success';
if (this.control) {
this.control.valueAccessor = this;
}
}
ngOnInit() {
this.control?.statusChanges?.subscribe(() => this.cdr.markForCheck());
}
writeValue(source) {
this.value = source;
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
_focusOut() {
this.onTouched?.();
}
_click(event) {
event?.preventDefault();
if (!this.disabled) {
this.value = !this.value;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: SwitchComponent, selector: "xui-switch", inputs: { disabled: "disabled", color: "color", value: "value" }, host: { listeners: { "focusout": "_focusOut()", "keydown.enter": "_click($event)", "keydown.space": "_click($event)" } }, ngImport: i0, template: "<div [ngClass]=\"style\">\n <ng-content></ng-content>\n\n <div [ngClass]=\"styleSwitch\" (click)=\"_click()\" [tabIndex]=\"disabled ? -1 : 0\">\n <div class=\"x-switch-handle\">\n <xui-icon>{{ value ? 'check-bold' : 'close-thick' }}</xui-icon>\n </div>\n <input tabindex=\"-1\" type=\"checkbox\" [checked]=\"value\" [disabled]=\"disabled\" />\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.IconComponent, selector: "xui-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], SwitchComponent.prototype, "disabled", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], SwitchComponent.prototype, "value", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: SwitchComponent, decorators: [{
type: Component,
args: [{ selector: 'xui-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"style\">\n <ng-content></ng-content>\n\n <div [ngClass]=\"styleSwitch\" (click)=\"_click()\" [tabIndex]=\"disabled ? -1 : 0\">\n <div class=\"x-switch-handle\">\n <xui-icon>{{ value ? 'check-bold' : 'close-thick' }}</xui-icon>\n </div>\n <input tabindex=\"-1\" type=\"checkbox\" [checked]=\"value\" [disabled]=\"disabled\" />\n </div>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
type: Self
}, {
type: Optional
}] }]; }, propDecorators: { disabled: [{
type: Input
}], color: [{
type: Input
}], value: [{
type: Input
}], _focusOut: [{
type: HostListener,
args: ['focusout']
}], _click: [{
type: HostListener,
args: ['keydown.enter', ['$event']]
}, {
type: HostListener,
args: ['keydown.space', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpdGNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMveHVpL3NyYy9zd2l0Y2gvc3dpdGNoLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMveHVpL3NyYy9zd2l0Y2gvc3dpdGNoLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFFTCxRQUFRLEVBQ1IsSUFBSSxFQUNMLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDeEMsT0FBTyxFQUF3QixTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7QUFTakUsTUFBTSxPQUFPLGVBQWU7SUFXMUIsSUFFSSxLQUFLO1FBQ1AsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxJQUFJLEtBQUssQ0FBQyxDQUFDO1FBQ1QsSUFBSSxJQUFJLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRTtZQUNyQixJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztZQUNoQixJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUM7U0FDcEI7SUFDSCxDQUFDO0lBRUQsSUFBSSxLQUFLO1FBQ1AsT0FBTztZQUNMLFVBQVUsRUFBRSxJQUFJO1lBQ2hCLG1CQUFtQixFQUFFLElBQUksQ0FBQyxRQUFRO1NBQ25DLENBQUM7SUFDSixDQUFDO0lBRUQsSUFBSSxXQUFXO1FBQ2IsTUFBTSxHQUFHLEdBQWlDO1lBQ3hDLGtCQUFrQixFQUFFLElBQUk7WUFDeEIsa0JBQWtCLEVBQUUsSUFBSSxDQUFDLEtBQUs7U0FDL0IsQ0FBQztRQUVGLEdBQUcsQ0FBQyxZQUFZLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7UUFDM0MsT0FBTyxHQUFHLENBQUM7SUFDYixDQUFDO0lBRUQsWUFBb0IsR0FBc0IsRUFBNkIsT0FBbUI7UUFBdEUsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFBNkIsWUFBTyxHQUFQLE9BQU8sQ0FBWTtRQW5DbEYsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUVFLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDakMsVUFBSyxHQUFnQixTQUFTLENBQUM7UUFpQ3RDLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNoQixJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7U0FDbkM7SUFDSCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxPQUFPLEVBQUUsYUFBYSxFQUFFLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDLENBQUM7SUFDeEUsQ0FBQztJQUVELFVBQVUsQ0FBQyxNQUFlO1FBQ3hCLElBQUksQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDO0lBQ3RCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxRQUFtQztRQUNsRCxJQUFJLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztJQUMzQixDQUFDO0lBRUQsaUJBQWlCLENBQUMsU0FBcUI7UUFDckMsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUM7SUFDN0IsQ0FBQztJQUVELGdCQUFnQixDQUFDLFVBQW1CO1FBQ2xDLElBQUksQ0FBQyxRQUFRLEdBQUcsVUFBVSxDQUFDO0lBQzdCLENBQUM7SUFHTyxTQUFTO1FBQ2YsSUFBSSxDQUFDLFNBQVMsRUFBRSxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUlELE1BQU0sQ0FBQyxLQUFrQztRQUN2QyxLQUFLLEVBQUUsY0FBYyxFQUFFLENBQUM7UUFFeEIsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDbEIsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUM7U0FDMUI7SUFDSCxDQUFDOzhHQWhGVSxlQUFlO2tHQUFmLGVBQWUsOE9DcEI1Qiw0WEFVQTs7QURrQjJCO0lBQWYsWUFBWSxFQUFFOztpREFBa0I7QUFHMUM7SUFDQyxZQUFZLEVBQUU7Ozs0Q0FHZDsyRkFmVSxlQUFlO2tCQUwzQixTQUFTOytCQUNFLFlBQVksbUJBQ0wsdUJBQXVCLENBQUMsTUFBTTs7MEJBNENGLElBQUk7OzBCQUFJLFFBQVE7NENBakNwQyxRQUFRO3NCQUFoQyxLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFJRixLQUFLO3NCQUZSLEtBQUs7Z0JBeURFLFNBQVM7c0JBRGhCLFlBQVk7dUJBQUMsVUFBVTtnQkFPeEIsTUFBTTtzQkFGTCxZQUFZO3VCQUFDLGVBQWUsRUFBRSxDQUFDLFFBQVEsQ0FBQzs7c0JBQ3hDLFlBQVk7dUJBQUMsZUFBZSxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSW5wdXQsXG4gIE9uSW5pdCxcbiAgT3B0aW9uYWwsXG4gIFNlbGZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJbnB1dEJvb2xlYW4gfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTmdDb250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgU3dpdGNoQ29sb3IgfSBmcm9tICcuL3N3aXRjaC50eXBlcyc7XG5pbXBvcnQgeyBCb29sZWFuSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd4dWktc3dpdGNoJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHRlbXBsYXRlVXJsOiAnLi9zd2l0Y2guY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIFN3aXRjaENvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBPbkluaXQge1xuICBzdGF0aWMgbmdBY2NlcHRJbnB1dFR5cGVfZGlzYWJsZWQ6IEJvb2xlYW5JbnB1dDtcbiAgc3RhdGljIG5nQWNjZXB0SW5wdXRUeXBlX3ZhbHVlOiBCb29sZWFuSW5wdXQ7XG5cbiAgcHJpdmF0ZSBvbkNoYW5nZT86IChzb3VyY2U6IGJvb2xlYW4pID0+IHZvaWQ7XG4gIHByaXZhdGUgb25Ub3VjaGVkPzogKCkgPT4gdm9pZDtcbiAgcHJpdmF0ZSBfdmFsdWUgPSBmYWxzZTtcblxuICBASW5wdXQoKSBASW5wdXRCb29sZWFuKCkgZGlzYWJsZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgY29sb3I6IFN3aXRjaENvbG9yID0gJ3N1Y2Nlc3MnO1xuXG4gIEBJbnB1dCgpXG4gIEBJbnB1dEJvb2xlYW4oKVxuICBnZXQgdmFsdWUoKSB7XG4gICAgcmV0dXJuIHRoaXMuX3ZhbHVlO1xuICB9XG5cbiAgc2V0IHZhbHVlKHYpIHtcbiAgICBpZiAodGhpcy5fdmFsdWUgIT09IHYpIHtcbiAgICAgIHRoaXMuX3ZhbHVlID0gdjtcbiAgICAgIHRoaXMub25DaGFuZ2U/Lih2KTtcbiAgICB9XG4gIH1cblxuICBnZXQgc3R5bGUoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgICd4LXN3aXRjaCc6IHRydWUsXG4gICAgICAneC1zd2l0Y2gtZGlzYWJsZWQnOiB0aGlzLmRpc2FibGVkXG4gICAgfTtcbiAgfVxuXG4gIGdldCBzdHlsZVN3aXRjaCgpIHtcbiAgICBjb25zdCByZXQ6IHsgW2tsYXNzOiBzdHJpbmddOiBib29sZWFuIH0gPSB7XG4gICAgICAneC1zd2l0Y2gtZWxlbWVudCc6IHRydWUsXG4gICAgICAneC1zd2l0Y2gtdG9nZ2xlZCc6IHRoaXMudmFsdWVcbiAgICB9O1xuXG4gICAgcmV0W2B4LXN3aXRjaC0ke3RoaXMuY29sb3J9YF0gPSB0aGlzLnZhbHVlO1xuICAgIHJldHVybiByZXQ7XG4gIH1cblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYsIEBTZWxmKCkgQE9wdGlvbmFsKCkgcHVibGljIGNvbnRyb2w/OiBOZ0NvbnRyb2wpIHtcbiAgICBpZiAodGhpcy5jb250cm9sKSB7XG4gICAgICB0aGlzLmNvbnRyb2wudmFsdWVBY2Nlc3NvciA9IHRoaXM7XG4gICAgfVxuICB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5jb250cm9sPy5zdGF0dXNDaGFuZ2VzPy5zdWJzY3JpYmUoKCkgPT4gdGhpcy5jZHIubWFya0ZvckNoZWNrKCkpO1xuICB9XG5cbiAgd3JpdGVWYWx1ZShzb3VyY2U6IGJvb2xlYW4pIHtcbiAgICB0aGlzLnZhbHVlID0gc291cmNlO1xuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShvbkNoYW5nZTogKHNvdXJjZTogYm9vbGVhbikgPT4gdm9pZCkge1xuICAgIHRoaXMub25DaGFuZ2UgPSBvbkNoYW5nZTtcbiAgfVxuXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKG9uVG91Y2hlZDogKCkgPT4gdm9pZCkge1xuICAgIHRoaXMub25Ub3VjaGVkID0gb25Ub3VjaGVkO1xuICB9XG5cbiAgc2V0RGlzYWJsZWRTdGF0ZShpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5kaXNhYmxlZCA9IGlzRGlzYWJsZWQ7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdmb2N1c291dCcpXG4gIHByaXZhdGUgX2ZvY3VzT3V0KCkge1xuICAgIHRoaXMub25Ub3VjaGVkPy4oKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24uZW50ZXInLCBbJyRldmVudCddKVxuICBASG9zdExpc3RlbmVyKCdrZXlkb3duLnNwYWNlJywgWyckZXZlbnQnXSlcbiAgX2NsaWNrKGV2ZW50PzogS2V5Ym9hcmRFdmVudCB8IE1vdXNlRXZlbnQpIHtcbiAgICBldmVudD8ucHJldmVudERlZmF1bHQoKTtcblxuICAgIGlmICghdGhpcy5kaXNhYmxlZCkge1xuICAgICAgdGhpcy52YWx1ZSA9ICF0aGlzLnZhbHVlO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBbbmdDbGFzc109XCJzdHlsZVwiPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG5cbiAgPGRpdiBbbmdDbGFzc109XCJzdHlsZVN3aXRjaFwiIChjbGljayk9XCJfY2xpY2soKVwiIFt0YWJJbmRleF09XCJkaXNhYmxlZCA/IC0xIDogMFwiPlxuICAgIDxkaXYgY2xhc3M9XCJ4LXN3aXRjaC1oYW5kbGVcIj5cbiAgICAgIDx4dWktaWNvbj57eyB2YWx1ZSA/ICdjaGVjay1ib2xkJyA6ICdjbG9zZS10aGljaycgfX08L3h1aS1pY29uPlxuICAgIDwvZGl2PlxuICAgIDxpbnB1dCB0YWJpbmRleD1cIi0xXCIgdHlwZT1cImNoZWNrYm94XCIgW2NoZWNrZWRdPVwidmFsdWVcIiBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIiAvPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19