@xui/components
Version:
xUI Components for Angular
87 lines • 11.4 kB
JavaScript
import { booleanAttribute, ChangeDetectionStrategy, Component, 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";
export class XuiToggle {
constructor(control) {
this.control = control;
this._disabled = signal(false);
this._value = signal(true);
this.value = input(undefined, {
transform: booleanAttribute
});
this.color = input('none');
this.icon = input();
this.disabled = input(undefined, {
transform: booleanAttribute
});
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: XuiToggle, 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: XuiToggle, isStandalone: true, selector: "xui-toggle", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "_onTouched?.()", "click": "_click($event)", "keydown.enter": "_click($event)", "keydown.space": "_click($event)" }, properties: { "class": "color() !== \"none\" ? \"x-toggle-\" + color() : \"\"", "class.x-toggle-disabled": "_disabled()", "tabindex": "_disabled() ? -1 : 0" }, classAttribute: "x-toggle" }, ngImport: i0, template: `<div [class.x-toggle-clip]="!_value()">
<div class="x-toggle-content">
<xui-icon [icon]="icon()"></xui-icon>
</div>
</div>
<div [class.x-toggle-toggled]="!_value()">
<div class="x-toggle-line"></div>
</div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: XuiToggle, decorators: [{
type: Component,
args: [{
standalone: true,
imports: [CommonModule, XuiIcon, XuiFocusModule],
selector: 'xui-toggle',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<div [class.x-toggle-clip]="!_value()">
<div class="x-toggle-content">
<xui-icon [icon]="icon()"></xui-icon>
</div>
</div>
<div [class.x-toggle-toggled]="!_value()">
<div class="x-toggle-line"></div>
</div>`,
host: {
class: 'x-toggle',
'[class]': 'color() !== "none" ? "x-toggle-" + color() : ""',
'[class.x-toggle-disabled]': '_disabled()',
'[tabindex]': '_disabled() ? -1 : 0',
'(focusout)': '_onTouched?.()',
'(click)': '_click($event)',
'(keydown.enter)': '_click($event)',
'(keydown.space)': '_click($event)'
}
}]
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
type: Self
}, {
type: Optional
}] }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy94dWkvc3JjL3RvZ2dsZS90b2dnbGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLGdCQUFnQixFQUNoQix1QkFBdUIsRUFDdkIsU0FBUyxFQUNULE1BQU0sRUFDTixLQUFLLEVBQ0wsUUFBUSxFQUNSLElBQUksRUFDSixNQUFNLEVBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUF3QixTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUVqRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLFNBQVMsQ0FBQztBQUNsQyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7OztBQTBCeEQsTUFBTSxPQUFPLFNBQVM7SUFlcEIsWUFBdUMsT0FBbUI7UUFBbkIsWUFBTyxHQUFQLE9BQU8sQ0FBWTtRQVoxRCxjQUFTLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzFCLFdBQU0sR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFdEIsVUFBSyxHQUFHLEtBQUssQ0FBd0MsU0FBUyxFQUFFO1lBQzlELFNBQVMsRUFBRSxnQkFBZ0I7U0FDNUIsQ0FBQyxDQUFDO1FBQ0gsVUFBSyxHQUFHLEtBQUssQ0FBYyxNQUFNLENBQUMsQ0FBQztRQUNuQyxTQUFJLEdBQUcsS0FBSyxFQUFVLENBQUM7UUFDdkIsYUFBUSxHQUFHLEtBQUssQ0FBd0MsU0FBUyxFQUFFO1lBQ2pFLFNBQVMsRUFBRSxnQkFBZ0I7U0FDNUIsQ0FBQyxDQUFDO1FBR0QsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDakIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDO1FBQ3BDLENBQUM7UUFFRCxNQUFNLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUcsQ0FBQyxFQUFFLEVBQUUsaUJBQWlCLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUNuRyxNQUFNLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUcsQ0FBQyxFQUFFLEVBQUUsaUJBQWlCLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUMxRixNQUFNLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDL0MsQ0FBQztJQUVELFVBQVUsQ0FBQyxNQUFlO1FBQ3hCLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQzFCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxRQUFtQztRQUNsRCxJQUFJLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztJQUMzQixDQUFDO0lBRUQsaUJBQWlCLENBQUMsU0FBcUI7UUFDckMsSUFBSSxDQUFDLFVBQVUsR0FBRyxTQUFTLENBQUM7SUFDOUIsQ0FBQztJQUVELGdCQUFnQixDQUFDLFVBQW1CO1FBQ2xDLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ2pDLENBQUM7SUFFRCxNQUFNLENBQUMsS0FBa0M7UUFDdkMsS0FBSyxFQUFFLGNBQWMsRUFBRSxDQUFDO1FBRXhCLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFLEVBQUUsQ0FBQztZQUN0QixJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDO1FBQ2xDLENBQUM7SUFDSCxDQUFDOzhHQS9DVSxTQUFTO2tHQUFULFNBQVMsNDRCQW5CVjs7Ozs7OztXQU9ELDJEQVZDLFlBQVksK0JBQUUsT0FBTyxzSUFBRSxjQUFjOzsyRkFzQnBDLFNBQVM7a0JBeEJyQixTQUFTO21CQUFDO29CQUNULFVBQVUsRUFBRSxJQUFJO29CQUNoQixPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsT0FBTyxFQUFFLGNBQWMsQ0FBQztvQkFDaEQsUUFBUSxFQUFFLFlBQVk7b0JBQ3RCLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO29CQUMvQyxRQUFRLEVBQUU7Ozs7Ozs7V0FPRDtvQkFDVCxJQUFJLEVBQUU7d0JBQ0osS0FBSyxFQUFFLFVBQVU7d0JBQ2pCLFNBQVMsRUFBRSxpREFBaUQ7d0JBQzVELDJCQUEyQixFQUFFLGFBQWE7d0JBQzFDLFlBQVksRUFBRSxzQkFBc0I7d0JBQ3BDLFlBQVksRUFBRSxnQkFBZ0I7d0JBQzlCLFNBQVMsRUFBRSxnQkFBZ0I7d0JBQzNCLGlCQUFpQixFQUFFLGdCQUFnQjt3QkFDbkMsaUJBQWlCLEVBQUUsZ0JBQWdCO3FCQUNwQztpQkFDRjs7MEJBZ0JjLElBQUk7OzBCQUFJLFFBQVEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBib29sZWFuQXR0cmlidXRlLFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBlZmZlY3QsXG4gIGlucHV0LFxuICBPcHRpb25hbCxcbiAgU2VsZixcbiAgc2lnbmFsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5nQ29udHJvbCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IFRvZ2dsZUNvbG9yIH0gZnJvbSAnLi90b2dnbGUudHlwZXMnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFh1aUljb24gfSBmcm9tICcuLi9pY29uJztcbmltcG9ydCB7IFh1aUZvY3VzTW9kdWxlIH0gZnJvbSAnLi4vdXRpbHMvZm9jdXMuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBYdWlJY29uLCBYdWlGb2N1c01vZHVsZV0sXG4gIHNlbGVjdG9yOiAneHVpLXRvZ2dsZScsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICB0ZW1wbGF0ZTogYDxkaXYgW2NsYXNzLngtdG9nZ2xlLWNsaXBdPVwiIV92YWx1ZSgpXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwieC10b2dnbGUtY29udGVudFwiPlxuICAgICAgICA8eHVpLWljb24gW2ljb25dPVwiaWNvbigpXCI+PC94dWktaWNvbj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgW2NsYXNzLngtdG9nZ2xlLXRvZ2dsZWRdPVwiIV92YWx1ZSgpXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwieC10b2dnbGUtbGluZVwiPjwvZGl2PlxuICAgIDwvZGl2PmAsXG4gIGhvc3Q6IHtcbiAgICBjbGFzczogJ3gtdG9nZ2xlJyxcbiAgICAnW2NsYXNzXSc6ICdjb2xvcigpICE9PSBcIm5vbmVcIiA/IFwieC10b2dnbGUtXCIgKyBjb2xvcigpIDogXCJcIicsXG4gICAgJ1tjbGFzcy54LXRvZ2dsZS1kaXNhYmxlZF0nOiAnX2Rpc2FibGVkKCknLFxuICAgICdbdGFiaW5kZXhdJzogJ19kaXNhYmxlZCgpID8gLTEgOiAwJyxcbiAgICAnKGZvY3Vzb3V0KSc6ICdfb25Ub3VjaGVkPy4oKScsXG4gICAgJyhjbGljayknOiAnX2NsaWNrKCRldmVudCknLFxuICAgICcoa2V5ZG93bi5lbnRlciknOiAnX2NsaWNrKCRldmVudCknLFxuICAgICcoa2V5ZG93bi5zcGFjZSknOiAnX2NsaWNrKCRldmVudCknXG4gIH1cbn0pXG5leHBvcnQgY2xhc3MgWHVpVG9nZ2xlIGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuICBwcml2YXRlIG9uQ2hhbmdlPzogKHNvdXJjZTogYm9vbGVhbikgPT4gdm9pZDtcbiAgX29uVG91Y2hlZD86ICgpID0+IHZvaWQ7XG4gIF9kaXNhYmxlZCA9IHNpZ25hbChmYWxzZSk7XG4gIF92YWx1ZSA9IHNpZ25hbCh0cnVlKTtcblxuICB2YWx1ZSA9IGlucHV0PGJvb2xlYW4gfCB1bmRlZmluZWQsIHN0cmluZyB8IGJvb2xlYW4+KHVuZGVmaW5lZCwge1xuICAgIHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZVxuICB9KTtcbiAgY29sb3IgPSBpbnB1dDxUb2dnbGVDb2xvcj4oJ25vbmUnKTtcbiAgaWNvbiA9IGlucHV0PHN0cmluZz4oKTtcbiAgZGlzYWJsZWQgPSBpbnB1dDxib29sZWFuIHwgdW5kZWZpbmVkLCBzdHJpbmcgfCBib29sZWFuPih1bmRlZmluZWQsIHtcbiAgICB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGVcbiAgfSk7XG5cbiAgY29uc3RydWN0b3IoQFNlbGYoKSBAT3B0aW9uYWwoKSBwdWJsaWMgY29udHJvbD86IE5nQ29udHJvbCkge1xuICAgIGlmICh0aGlzLmNvbnRyb2wpIHtcbiAgICAgIHRoaXMuY29udHJvbC52YWx1ZUFjY2Vzc29yID0gdGhpcztcbiAgICB9XG5cbiAgICBlZmZlY3QoKCkgPT4gdGhpcy5kaXNhYmxlZCgpICYmIHRoaXMuX2Rpc2FibGVkLnNldCh0aGlzLmRpc2FibGVkKCkhKSwgeyBhbGxvd1NpZ25hbFdyaXRlczogdHJ1ZSB9KTtcbiAgICBlZmZlY3QoKCkgPT4gdGhpcy52YWx1ZSgpICYmIHRoaXMuX3ZhbHVlLnNldCh0aGlzLnZhbHVlKCkhKSwgeyBhbGxvd1NpZ25hbFdyaXRlczogdHJ1ZSB9KTtcbiAgICBlZmZlY3QoKCkgPT4gdGhpcy5vbkNoYW5nZT8uKHRoaXMuX3ZhbHVlKCkpKTtcbiAgfVxuXG4gIHdyaXRlVmFsdWUoc291cmNlOiBib29sZWFuKSB7XG4gICAgdGhpcy5fdmFsdWUuc2V0KHNvdXJjZSk7XG4gIH1cblxuICByZWdpc3Rlck9uQ2hhbmdlKG9uQ2hhbmdlOiAoc291cmNlOiBib29sZWFuKSA9PiB2b2lkKSB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IG9uQ2hhbmdlO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQob25Ub3VjaGVkOiAoKSA9PiB2b2lkKSB7XG4gICAgdGhpcy5fb25Ub3VjaGVkID0gb25Ub3VjaGVkO1xuICB9XG5cbiAgc2V0RGlzYWJsZWRTdGF0ZShpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5fZGlzYWJsZWQuc2V0KGlzRGlzYWJsZWQpO1xuICB9XG5cbiAgX2NsaWNrKGV2ZW50PzogS2V5Ym9hcmRFdmVudCB8IE1vdXNlRXZlbnQpIHtcbiAgICBldmVudD8ucHJldmVudERlZmF1bHQoKTtcblxuICAgIGlmICghdGhpcy5fZGlzYWJsZWQoKSkge1xuICAgICAgdGhpcy5fdmFsdWUuc2V0KCF0aGlzLl92YWx1ZSgpKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==