xui
Version:
xUI Components for Angular
125 lines • 11.2 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Input, Optional, Self } from '@angular/core';
import { NgControl } from '@angular/forms';
import { InputBoolean } from '../utils';
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 ToggleComponent {
get value() {
return this._value;
}
set value(v) {
if (this._value !== v) {
this._value = v;
this.onChange?.(v);
}
}
get style() {
const ret = {
'x-toggle': true,
'x-toggle-disabled': this.disabled
};
ret[`x-toggle-${this.color}`] = this.color !== 'none';
return ret;
}
constructor(cdr, control) {
this.cdr = cdr;
this.control = control;
this._value = true;
this.disabled = false;
this.color = 'none';
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: ToggleComponent, 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: ToggleComponent, selector: "xui-toggle", inputs: { disabled: "disabled", color: "color", value: "value" }, host: { listeners: { "focusout": "_focusOut()", "click": "_click($event)", "keydown.enter": "_click($event)", "keydown.space": "_click($event)" } }, ngImport: i0, template: `
<div [ngClass]="style" [tabindex]="disabled ? -1 : 0">
<div [class.x-toggle-clip]="!value">
<div class="x-toggle-content">
<xui-icon><ng-content></ng-content></xui-icon>
</div>
</div>
<div [class.x-toggle-toggled]="!value">
<div class="x-toggle-line"></div>
</div>
</div>
`, isInline: true, 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)
], ToggleComponent.prototype, "disabled", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], ToggleComponent.prototype, "value", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ToggleComponent, decorators: [{
type: Component,
args: [{
selector: 'xui-toggle',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div [ngClass]="style" [tabindex]="disabled ? -1 : 0">
<div [class.x-toggle-clip]="!value">
<div class="x-toggle-content">
<xui-icon><ng-content></ng-content></xui-icon>
</div>
</div>
<div [class.x-toggle-toggled]="!value">
<div class="x-toggle-line"></div>
</div>
</div>
`
}]
}], 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: ['click', ['$event']]
}, {
type: HostListener,
args: ['keydown.enter', ['$event']]
}, {
type: HostListener,
args: ['keydown.space', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMveHVpL3NyYy90b2dnbGUvdG9nZ2xlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixpQkFBaUIsRUFDakIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBRUwsUUFBUSxFQUNSLElBQUksRUFDTCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQXdCLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ2pFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxVQUFVLENBQUM7Ozs7O0FBbUJ4QyxNQUFNLE9BQU8sZUFBZTtJQVcxQixJQUVJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDckIsQ0FBQztJQUVELElBQUksS0FBSyxDQUFDLENBQUM7UUFDVCxJQUFJLElBQUksQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFO1lBQ3JCLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDO1lBQ2hCLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUNwQjtJQUNILENBQUM7SUFFRCxJQUFJLEtBQUs7UUFDUCxNQUFNLEdBQUcsR0FBaUM7WUFDeEMsVUFBVSxFQUFFLElBQUk7WUFDaEIsbUJBQW1CLEVBQUUsSUFBSSxDQUFDLFFBQVE7U0FDbkMsQ0FBQztRQUVGLEdBQUcsQ0FBQyxZQUFZLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLEtBQUssTUFBTSxDQUFDO1FBQ3RELE9BQU8sR0FBRyxDQUFDO0lBQ2IsQ0FBQztJQUVELFlBQW9CLEdBQXNCLEVBQTZCLE9BQW1CO1FBQXRFLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBQTZCLFlBQU8sR0FBUCxPQUFPLENBQVk7UUE1QmxGLFdBQU0sR0FBRyxJQUFJLENBQUM7UUFFRyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pDLFVBQUssR0FBZ0IsTUFBTSxDQUFDO1FBMEJuQyxJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDaEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDO1NBQ25DO0lBQ0gsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsT0FBTyxFQUFFLGFBQWEsRUFBRSxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQyxDQUFDO0lBQ3hFLENBQUM7SUFFRCxVQUFVLENBQUMsTUFBZTtRQUN4QixJQUFJLENBQUMsS0FBSyxHQUFHLE1BQU0sQ0FBQztJQUN0QixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsUUFBbUM7UUFDbEQsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUM7SUFDM0IsQ0FBQztJQUVELGlCQUFpQixDQUFDLFNBQXFCO1FBQ3JDLElBQUksQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFDO0lBQzdCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxVQUFtQjtRQUNsQyxJQUFJLENBQUMsUUFBUSxHQUFHLFVBQVUsQ0FBQztJQUM3QixDQUFDO0lBR08sU0FBUztRQUNmLElBQUksQ0FBQyxTQUFTLEVBQUUsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFLRCxNQUFNLENBQUMsS0FBa0M7UUFDdkMsS0FBSyxFQUFFLGNBQWMsRUFBRSxDQUFDO1FBRXhCLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2xCLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDO1NBQzFCO0lBQ0gsQ0FBQzs4R0ExRVUsZUFBZTtrR0FBZixlQUFlLHlRQWJoQjs7Ozs7Ozs7Ozs7R0FXVDs7QUFVd0I7SUFBZixZQUFZLEVBQUU7O2lEQUFrQjtBQUcxQztJQUNDLFlBQVksRUFBRTs7OzRDQUdkOzJGQWZVLGVBQWU7a0JBaEIzQixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxZQUFZO29CQUN0QixlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsUUFBUSxFQUFFOzs7Ozs7Ozs7OztHQVdUO2lCQUNGOzswQkFtQzhDLElBQUk7OzBCQUFJLFFBQVE7NENBMUJwQyxRQUFRO3NCQUFoQyxLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFJRixLQUFLO3NCQUZSLEtBQUs7Z0JBa0RFLFNBQVM7c0JBRGhCLFlBQVk7dUJBQUMsVUFBVTtnQkFReEIsTUFBTTtzQkFITCxZQUFZO3VCQUFDLE9BQU8sRUFBRSxDQUFDLFFBQVEsQ0FBQzs7c0JBQ2hDLFlBQVk7dUJBQUMsZUFBZSxFQUFFLENBQUMsUUFBUSxDQUFDOztzQkFDeEMsWUFBWTt1QkFBQyxlQUFlLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb29sZWFuSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSW5wdXQsXG4gIE9uSW5pdCxcbiAgT3B0aW9uYWwsXG4gIFNlbGZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTmdDb250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgSW5wdXRCb29sZWFuIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgVG9nZ2xlQ29sb3IgfSBmcm9tICcuL3RvZ2dsZS50eXBlcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3h1aS10b2dnbGUnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IFtuZ0NsYXNzXT1cInN0eWxlXCIgW3RhYmluZGV4XT1cImRpc2FibGVkID8gLTEgOiAwXCI+XG4gICAgICA8ZGl2IFtjbGFzcy54LXRvZ2dsZS1jbGlwXT1cIiF2YWx1ZVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwieC10b2dnbGUtY29udGVudFwiPlxuICAgICAgICAgIDx4dWktaWNvbj48bmctY29udGVudD48L25nLWNvbnRlbnQ+PC94dWktaWNvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgW2NsYXNzLngtdG9nZ2xlLXRvZ2dsZWRdPVwiIXZhbHVlXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ4LXRvZ2dsZS1saW5lXCI+PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgYFxufSlcbmV4cG9ydCBjbGFzcyBUb2dnbGVDb21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciwgT25Jbml0IHtcbiAgc3RhdGljIG5nQWNjZXB0SW5wdXRUeXBlX2Rpc2FibGVkOiBCb29sZWFuSW5wdXQ7XG4gIHN0YXRpYyBuZ0FjY2VwdElucHV0VHlwZV92YWx1ZTogQm9vbGVhbklucHV0O1xuXG4gIHByaXZhdGUgb25DaGFuZ2U/OiAoc291cmNlOiBib29sZWFuKSA9PiB2b2lkO1xuICBwcml2YXRlIG9uVG91Y2hlZD86ICgpID0+IHZvaWQ7XG4gIHByaXZhdGUgX3ZhbHVlID0gdHJ1ZTtcblxuICBASW5wdXQoKSBASW5wdXRCb29sZWFuKCkgZGlzYWJsZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgY29sb3I6IFRvZ2dsZUNvbG9yID0gJ25vbmUnO1xuXG4gIEBJbnB1dCgpXG4gIEBJbnB1dEJvb2xlYW4oKVxuICBnZXQgdmFsdWUoKSB7XG4gICAgcmV0dXJuIHRoaXMuX3ZhbHVlO1xuICB9XG5cbiAgc2V0IHZhbHVlKHYpIHtcbiAgICBpZiAodGhpcy5fdmFsdWUgIT09IHYpIHtcbiAgICAgIHRoaXMuX3ZhbHVlID0gdjtcbiAgICAgIHRoaXMub25DaGFuZ2U/Lih2KTtcbiAgICB9XG4gIH1cblxuICBnZXQgc3R5bGUoKSB7XG4gICAgY29uc3QgcmV0OiB7IFtrbGFzczogc3RyaW5nXTogYm9vbGVhbiB9ID0ge1xuICAgICAgJ3gtdG9nZ2xlJzogdHJ1ZSxcbiAgICAgICd4LXRvZ2dsZS1kaXNhYmxlZCc6IHRoaXMuZGlzYWJsZWRcbiAgICB9O1xuXG4gICAgcmV0W2B4LXRvZ2dsZS0ke3RoaXMuY29sb3J9YF0gPSB0aGlzLmNvbG9yICE9PSAnbm9uZSc7XG4gICAgcmV0dXJuIHJldDtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZiwgQFNlbGYoKSBAT3B0aW9uYWwoKSBwdWJsaWMgY29udHJvbD86IE5nQ29udHJvbCkge1xuICAgIGlmICh0aGlzLmNvbnRyb2wpIHtcbiAgICAgIHRoaXMuY29udHJvbC52YWx1ZUFjY2Vzc29yID0gdGhpcztcbiAgICB9XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmNvbnRyb2w/LnN0YXR1c0NoYW5nZXM/LnN1YnNjcmliZSgoKSA9PiB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKSk7XG4gIH1cblxuICB3cml0ZVZhbHVlKHNvdXJjZTogYm9vbGVhbikge1xuICAgIHRoaXMudmFsdWUgPSBzb3VyY2U7XG4gIH1cblxuICByZWdpc3Rlck9uQ2hhbmdlKG9uQ2hhbmdlOiAoc291cmNlOiBib29sZWFuKSA9PiB2b2lkKSB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IG9uQ2hhbmdlO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQob25Ub3VjaGVkOiAoKSA9PiB2b2lkKSB7XG4gICAgdGhpcy5vblRvdWNoZWQgPSBvblRvdWNoZWQ7XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLmRpc2FibGVkID0gaXNEaXNhYmxlZDtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2ZvY3Vzb3V0JylcbiAgcHJpdmF0ZSBfZm9jdXNPdXQoKSB7XG4gICAgdGhpcy5vblRvdWNoZWQ/LigpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snLCBbJyRldmVudCddKVxuICBASG9zdExpc3RlbmVyKCdrZXlkb3duLmVudGVyJywgWyckZXZlbnQnXSlcbiAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bi5zcGFjZScsIFsnJGV2ZW50J10pXG4gIF9jbGljayhldmVudD86IEtleWJvYXJkRXZlbnQgfCBNb3VzZUV2ZW50KSB7XG4gICAgZXZlbnQ/LnByZXZlbnREZWZhdWx0KCk7XG5cbiAgICBpZiAoIXRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIHRoaXMudmFsdWUgPSAhdGhpcy52YWx1ZTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==