@xui/components
Version:
xUI Components for Angular
71 lines • 11.8 kB
JavaScript
import { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, input, Optional, Self, signal } from '@angular/core';
import { NgControl } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { XuiIcon } from '../icon';
import { XuiFocusModule } from '../utils/focus.service';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/common";
export class XuiSwitch {
constructor(control) {
this.control = control;
this._value = signal(false);
this._disabled = signal(false);
this.value = input(undefined, {
transform: booleanAttribute
});
this.color = input('success');
this.disabled = input(undefined, {
transform: booleanAttribute
});
this._styles = computed(() => {
const ret = {
'x-switch-element': true,
'x-switch-toggled': this._value()
};
ret[`x-switch-${this.color()}`] = this._value();
return ret;
});
if (this.control) {
this.control.valueAccessor = this;
}
effect(() => this.disabled() && this._disabled.set(this.disabled()), { allowSignalWrites: true });
effect(() => this.value() && this._value.set(this.value()), { allowSignalWrites: true });
effect(() => this.onChange?.(this._value()));
}
writeValue(source) {
this._value.set(source);
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this._onTouched = onTouched;
}
setDisabledState(isDisabled) {
this._disabled.set(isDisabled);
}
_click(event) {
event?.preventDefault();
if (!this._disabled()) {
this._value.set(!this._value());
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XuiSwitch, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XuiSwitch, isStandalone: true, selector: "xui-switch", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "_onTouched?.()", "keydown.enter": "_click($event)", "keydown.space": "_click($event)" }, properties: { "class.x-switch--disabled": "_disabled()" }, classAttribute: "x-switch" }, ngImport: i0, template: "<ng-content />\n\n<div [ngClass]=\"_styles()\" (click)=\"_click()\" [tabIndex]=\"_disabled() ? -1 : 0\">\n <div class=\"x-switch-handle\">\n <xui-icon [icon]=\"_value() ? 'check' : 'close'\"></xui-icon>\n </div>\n <input tabindex=\"-1\" type=\"checkbox\" [checked]=\"_value()\" [disabled]=\"_disabled()\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XuiIcon, selector: "xui-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "icon"], exportAs: ["xuiIcon"] }, { kind: "ngmodule", type: XuiFocusModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XuiSwitch, decorators: [{
type: Component,
args: [{ standalone: true, imports: [CommonModule, XuiIcon, XuiFocusModule], selector: 'xui-switch', changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: 'x-switch',
'[class.x-switch--disabled]': '_disabled()',
'(focusout)': '_onTouched?.()',
'(keydown.enter)': '_click($event)',
'(keydown.space)': '_click($event)'
}, template: "<ng-content />\n\n<div [ngClass]=\"_styles()\" (click)=\"_click()\" [tabIndex]=\"_disabled() ? -1 : 0\">\n <div class=\"x-switch-handle\">\n <xui-icon [icon]=\"_value() ? 'check' : 'close'\"></xui-icon>\n </div>\n <input tabindex=\"-1\" type=\"checkbox\" [checked]=\"_value()\" [disabled]=\"_disabled()\" />\n</div>\n" }]
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
type: Self
}, {
type: Optional
}] }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpdGNoLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy94dWkvc3JjL3N3aXRjaC9zd2l0Y2gudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzL3h1aS9zcmMvc3dpdGNoL3N3aXRjaC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxnQkFBZ0IsRUFDaEIsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxRQUFRLEVBQ1IsTUFBTSxFQUNOLEtBQUssRUFDTCxRQUFRLEVBQ1IsSUFBSSxFQUNKLE1BQU0sRUFDUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQXdCLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRWpFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sU0FBUyxDQUFDO0FBQ2xDLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7OztBQWdCeEQsTUFBTSxPQUFPLFNBQVM7SUF3QnBCLFlBQXVDLE9BQW1CO1FBQW5CLFlBQU8sR0FBUCxPQUFPLENBQVk7UUFyQjFELFdBQU0sR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDdkIsY0FBUyxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUUxQixVQUFLLEdBQUcsS0FBSyxDQUF3QyxTQUFTLEVBQUU7WUFDOUQsU0FBUyxFQUFFLGdCQUFnQjtTQUM1QixDQUFDLENBQUM7UUFDSCxVQUFLLEdBQUcsS0FBSyxDQUFjLFNBQVMsQ0FBQyxDQUFDO1FBQ3RDLGFBQVEsR0FBRyxLQUFLLENBQXdDLFNBQVMsRUFBRTtZQUNqRSxTQUFTLEVBQUUsZ0JBQWdCO1NBQzVCLENBQUMsQ0FBQztRQUVILFlBQU8sR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFO1lBQ3RCLE1BQU0sR0FBRyxHQUFpQztnQkFDeEMsa0JBQWtCLEVBQUUsSUFBSTtnQkFDeEIsa0JBQWtCLEVBQUUsSUFBSSxDQUFDLE1BQU0sRUFBRTthQUNsQyxDQUFDO1lBRUYsR0FBRyxDQUFDLFlBQVksSUFBSSxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7WUFDaEQsT0FBTyxHQUFHLENBQUM7UUFDYixDQUFDLENBQUMsQ0FBQztRQUdELElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ2pCLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQztRQUNwQyxDQUFDO1FBRUQsTUFBTSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFHLENBQUMsRUFBRSxFQUFFLGlCQUFpQixFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7UUFDbkcsTUFBTSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFHLENBQUMsRUFBRSxFQUFFLGlCQUFpQixFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7UUFDMUYsTUFBTSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQy9DLENBQUM7SUFFRCxVQUFVLENBQUMsTUFBZTtRQUN4QixJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUMxQixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsUUFBbUM7UUFDbEQsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUM7SUFDM0IsQ0FBQztJQUVELGlCQUFpQixDQUFDLFNBQXFCO1FBQ3JDLElBQUksQ0FBQyxVQUFVLEdBQUcsU0FBUyxDQUFDO0lBQzlCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxVQUFtQjtRQUNsQyxJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNqQyxDQUFDO0lBRUQsTUFBTSxDQUFDLEtBQWtDO1FBQ3ZDLEtBQUssRUFBRSxjQUFjLEVBQUUsQ0FBQztRQUV4QixJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxFQUFFLENBQUM7WUFDdEIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsQ0FBQztRQUNsQyxDQUFDO0lBQ0gsQ0FBQzs4R0F4RFUsU0FBUztrR0FBVCxTQUFTLHVwQkMvQnRCLHFVQVFBLDJDRFdZLFlBQVksNkhBQUUsT0FBTyxzSUFBRSxjQUFjOzsyRkFZcEMsU0FBUztrQkFkckIsU0FBUztpQ0FDSSxJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsT0FBTyxFQUFFLGNBQWMsQ0FBQyxZQUN0QyxZQUFZLG1CQUNMLHVCQUF1QixDQUFDLE1BQU0sUUFFekM7d0JBQ0osS0FBSyxFQUFFLFVBQVU7d0JBQ2pCLDRCQUE0QixFQUFFLGFBQWE7d0JBQzNDLFlBQVksRUFBRSxnQkFBZ0I7d0JBQzlCLGlCQUFpQixFQUFFLGdCQUFnQjt3QkFDbkMsaUJBQWlCLEVBQUUsZ0JBQWdCO3FCQUNwQzs7MEJBMEJZLElBQUk7OzBCQUFJLFFBQVEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBib29sZWFuQXR0cmlidXRlLFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBjb21wdXRlZCxcbiAgZWZmZWN0LFxuICBpbnB1dCxcbiAgT3B0aW9uYWwsXG4gIFNlbGYsXG4gIHNpZ25hbFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOZ0NvbnRyb2wgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBTd2l0Y2hDb2xvciB9IGZyb20gJy4vc3dpdGNoLnR5cGVzJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBYdWlJY29uIH0gZnJvbSAnLi4vaWNvbic7XG5pbXBvcnQgeyBYdWlGb2N1c01vZHVsZSB9IGZyb20gJy4uL3V0aWxzL2ZvY3VzLnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgWHVpSWNvbiwgWHVpRm9jdXNNb2R1bGVdLFxuICBzZWxlY3RvcjogJ3h1aS1zd2l0Y2gnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgdGVtcGxhdGVVcmw6ICdzd2l0Y2guaHRtbCcsXG4gIGhvc3Q6IHtcbiAgICBjbGFzczogJ3gtc3dpdGNoJyxcbiAgICAnW2NsYXNzLngtc3dpdGNoLS1kaXNhYmxlZF0nOiAnX2Rpc2FibGVkKCknLFxuICAgICcoZm9jdXNvdXQpJzogJ19vblRvdWNoZWQ/LigpJyxcbiAgICAnKGtleWRvd24uZW50ZXIpJzogJ19jbGljaygkZXZlbnQpJyxcbiAgICAnKGtleWRvd24uc3BhY2UpJzogJ19jbGljaygkZXZlbnQpJ1xuICB9XG59KVxuZXhwb3J0IGNsYXNzIFh1aVN3aXRjaCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgcHJpdmF0ZSBvbkNoYW5nZT86IChzb3VyY2U6IGJvb2xlYW4pID0+IHZvaWQ7XG4gIF9vblRvdWNoZWQ/OiAoKSA9PiB2b2lkO1xuICBfdmFsdWUgPSBzaWduYWwoZmFsc2UpO1xuICBfZGlzYWJsZWQgPSBzaWduYWwoZmFsc2UpO1xuXG4gIHZhbHVlID0gaW5wdXQ8Ym9vbGVhbiB8IHVuZGVmaW5lZCwgc3RyaW5nIHwgYm9vbGVhbj4odW5kZWZpbmVkLCB7XG4gICAgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlXG4gIH0pO1xuICBjb2xvciA9IGlucHV0PFN3aXRjaENvbG9yPignc3VjY2VzcycpO1xuICBkaXNhYmxlZCA9IGlucHV0PGJvb2xlYW4gfCB1bmRlZmluZWQsIHN0cmluZyB8IGJvb2xlYW4+KHVuZGVmaW5lZCwge1xuICAgIHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZVxuICB9KTtcblxuICBfc3R5bGVzID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgIGNvbnN0IHJldDogeyBba2xhc3M6IHN0cmluZ106IGJvb2xlYW4gfSA9IHtcbiAgICAgICd4LXN3aXRjaC1lbGVtZW50JzogdHJ1ZSxcbiAgICAgICd4LXN3aXRjaC10b2dnbGVkJzogdGhpcy5fdmFsdWUoKVxuICAgIH07XG5cbiAgICByZXRbYHgtc3dpdGNoLSR7dGhpcy5jb2xvcigpfWBdID0gdGhpcy5fdmFsdWUoKTtcbiAgICByZXR1cm4gcmV0O1xuICB9KTtcblxuICBjb25zdHJ1Y3RvcihAU2VsZigpIEBPcHRpb25hbCgpIHB1YmxpYyBjb250cm9sPzogTmdDb250cm9sKSB7XG4gICAgaWYgKHRoaXMuY29udHJvbCkge1xuICAgICAgdGhpcy5jb250cm9sLnZhbHVlQWNjZXNzb3IgPSB0aGlzO1xuICAgIH1cblxuICAgIGVmZmVjdCgoKSA9PiB0aGlzLmRpc2FibGVkKCkgJiYgdGhpcy5fZGlzYWJsZWQuc2V0KHRoaXMuZGlzYWJsZWQoKSEpLCB7IGFsbG93U2lnbmFsV3JpdGVzOiB0cnVlIH0pO1xuICAgIGVmZmVjdCgoKSA9PiB0aGlzLnZhbHVlKCkgJiYgdGhpcy5fdmFsdWUuc2V0KHRoaXMudmFsdWUoKSEpLCB7IGFsbG93U2lnbmFsV3JpdGVzOiB0cnVlIH0pO1xuICAgIGVmZmVjdCgoKSA9PiB0aGlzLm9uQ2hhbmdlPy4odGhpcy5fdmFsdWUoKSkpO1xuICB9XG5cbiAgd3JpdGVWYWx1ZShzb3VyY2U6IGJvb2xlYW4pIHtcbiAgICB0aGlzLl92YWx1ZS5zZXQoc291cmNlKTtcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2Uob25DaGFuZ2U6IChzb3VyY2U6IGJvb2xlYW4pID0+IHZvaWQpIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gb25DaGFuZ2U7XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChvblRvdWNoZWQ6ICgpID0+IHZvaWQpIHtcbiAgICB0aGlzLl9vblRvdWNoZWQgPSBvblRvdWNoZWQ7XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLl9kaXNhYmxlZC5zZXQoaXNEaXNhYmxlZCk7XG4gIH1cblxuICBfY2xpY2soZXZlbnQ/OiBLZXlib2FyZEV2ZW50IHwgTW91c2VFdmVudCkge1xuICAgIGV2ZW50Py5wcmV2ZW50RGVmYXVsdCgpO1xuXG4gICAgaWYgKCF0aGlzLl9kaXNhYmxlZCgpKSB7XG4gICAgICB0aGlzLl92YWx1ZS5zZXQoIXRoaXMuX3ZhbHVlKCkpO1xuICAgIH1cbiAgfVxufVxuIiwiPG5nLWNvbnRlbnQgLz5cblxuPGRpdiBbbmdDbGFzc109XCJfc3R5bGVzKClcIiAoY2xpY2spPVwiX2NsaWNrKClcIiBbdGFiSW5kZXhdPVwiX2Rpc2FibGVkKCkgPyAtMSA6IDBcIj5cbiAgPGRpdiBjbGFzcz1cIngtc3dpdGNoLWhhbmRsZVwiPlxuICAgIDx4dWktaWNvbiBbaWNvbl09XCJfdmFsdWUoKSA/ICdjaGVjaycgOiAnY2xvc2UnXCI+PC94dWktaWNvbj5cbiAgPC9kaXY+XG4gIDxpbnB1dCB0YWJpbmRleD1cIi0xXCIgdHlwZT1cImNoZWNrYm94XCIgW2NoZWNrZWRdPVwiX3ZhbHVlKClcIiBbZGlzYWJsZWRdPVwiX2Rpc2FibGVkKClcIiAvPlxuPC9kaXY+XG4iXX0=