@xui/components
Version:
xUI Components for Angular
95 lines • 11.4 kB
JavaScript
import { booleanAttribute, ChangeDetectionStrategy, Component, effect, input, model, Optional, Self, signal } from '@angular/core';
import { NgControl } from '@angular/forms';
import { CHECKBOX_MODULE, XuiConfigService } from '../config';
import { CommonModule } from '@angular/common';
import { XuiFocusModule } from '../utils/focus.service';
import * as i0 from "@angular/core";
import * as i1 from "../config";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/common";
export class XuiCheckbox {
constructor(configService, control) {
this.configService = configService;
this.control = control;
this._moduleName = CHECKBOX_MODULE;
this._disabled = signal(false);
this.color = input('primary');
this.value = model();
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() != undefined && 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: XuiCheckbox, deps: [{ token: i1.XuiConfigService }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XuiCheckbox, isStandalone: true, selector: "xui-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "_onTouched?.()", "click": "_click($event)", "keydown.enter": "_click($event)", "keydown.space": "_click($event)" }, properties: { "class": "\"x-checkbox-\" + color()", "class.x-checkbox-disabled": "_disabled()" }, classAttribute: "x-checkbox" }, ngImport: i0, template: `<div class="x-checkbox-box" [tabindex]="_disabled() ? -1 : 0" [class.x-checkbox-checked]="value()">
<svg
*ngIf="value()"
viewBox="0 0 24 24"
height="100%"
width="100%"
preserveAspectRatio="xMidYMid meet"
focusable="false"
>
<path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</div>
<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: XuiFocusModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XuiCheckbox, decorators: [{
type: Component,
args: [{
standalone: true,
imports: [CommonModule, XuiFocusModule],
selector: 'xui-checkbox',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<div class="x-checkbox-box" [tabindex]="_disabled() ? -1 : 0" [class.x-checkbox-checked]="value()">
<svg
*ngIf="value()"
viewBox="0 0 24 24"
height="100%"
width="100%"
preserveAspectRatio="xMidYMid meet"
focusable="false"
>
<path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</div>
<ng-content />`,
host: {
class: 'x-checkbox',
'[class]': '"x-checkbox-" + color()',
'[class.x-checkbox-disabled]': '_disabled()',
'(focusout)': '_onTouched?.()',
'(click)': '_click($event)',
'(keydown.enter)': '_click($event)',
'(keydown.space)': '_click($event)'
}
}]
}], ctorParameters: () => [{ type: i1.XuiConfigService }, { type: i2.NgControl, decorators: [{
type: Self
}, {
type: Optional
}] }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL3h1aS9zcmMvY2hlY2tib3gvY2hlY2tib3gudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLGdCQUFnQixFQUNoQix1QkFBdUIsRUFDdkIsU0FBUyxFQUNULE1BQU0sRUFDTixLQUFLLEVBQ0wsS0FBSyxFQUNMLFFBQVEsRUFDUixJQUFJLEVBQ0osTUFBTSxFQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBd0IsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFakUsT0FBTyxFQUFFLGVBQWUsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUM5RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHdCQUF3QixDQUFDOzs7OztBQThCeEQsTUFBTSxPQUFPLFdBQVc7SUFhdEIsWUFDVSxhQUErQixFQUNaLE9BQW1CO1FBRHRDLGtCQUFhLEdBQWIsYUFBYSxDQUFrQjtRQUNaLFlBQU8sR0FBUCxPQUFPLENBQVk7UUFkL0IsZ0JBQVcsR0FBRyxlQUFlLENBQUM7UUFJL0MsY0FBUyxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUUxQixVQUFLLEdBQUcsS0FBSyxDQUFnQixTQUFTLENBQUMsQ0FBQztRQUN4QyxVQUFLLEdBQUcsS0FBSyxFQUFXLENBQUM7UUFDekIsYUFBUSxHQUFHLEtBQUssQ0FBd0MsU0FBUyxFQUFFO1lBQ2pFLFNBQVMsRUFBRSxnQkFBZ0I7U0FDNUIsQ0FBQyxDQUFDO1FBTUQsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDakIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDO1FBQ3BDLENBQUM7UUFFRCxNQUFNLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUcsQ0FBQyxFQUFFLEVBQUUsaUJBQWlCLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUNuRyxNQUFNLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLFNBQVMsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRyxDQUFDLENBQUMsQ0FBQztJQUM1RSxDQUFDO0lBRUQsVUFBVSxDQUFDLE1BQWU7UUFDeEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDekIsQ0FBQztJQUVELGdCQUFnQixDQUFDLFFBQW1DO1FBQ2xELElBQUksQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDO0lBQzNCLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxTQUFxQjtRQUNyQyxJQUFJLENBQUMsVUFBVSxHQUFHLFNBQVMsQ0FBQztJQUM5QixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsVUFBbUI7UUFDbEMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUVELE1BQU0sQ0FBQyxLQUFvQjtRQUN6QixLQUFLLEVBQUUsY0FBYyxFQUFFLENBQUM7UUFFeEIsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsRUFBRSxDQUFDO1lBQ3RCLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7UUFDaEMsQ0FBQztJQUNILENBQUM7OEdBL0NVLFdBQVc7a0dBQVgsV0FBVyxnd0JBdkJaOzs7Ozs7Ozs7Ozs7bUJBWU8sMkRBZlAsWUFBWSxrSUFBRSxjQUFjOzsyRkEwQjNCLFdBQVc7a0JBNUJ2QixTQUFTO21CQUFDO29CQUNULFVBQVUsRUFBRSxJQUFJO29CQUNoQixPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsY0FBYyxDQUFDO29CQUN2QyxRQUFRLEVBQUUsY0FBYztvQkFDeEIsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07b0JBQy9DLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7O21CQVlPO29CQUNqQixJQUFJLEVBQUU7d0JBQ0osS0FBSyxFQUFFLFlBQVk7d0JBQ25CLFNBQVMsRUFBRSx5QkFBeUI7d0JBQ3BDLDZCQUE2QixFQUFFLGFBQWE7d0JBQzVDLFlBQVksRUFBRSxnQkFBZ0I7d0JBQzlCLFNBQVMsRUFBRSxnQkFBZ0I7d0JBQzNCLGlCQUFpQixFQUFFLGdCQUFnQjt3QkFDbkMsaUJBQWlCLEVBQUUsZ0JBQWdCO3FCQUNwQztpQkFDRjs7MEJBZ0JJLElBQUk7OzBCQUFJLFFBQVEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBib29sZWFuQXR0cmlidXRlLFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBlZmZlY3QsXG4gIGlucHV0LFxuICBtb2RlbCxcbiAgT3B0aW9uYWwsXG4gIFNlbGYsXG4gIHNpZ25hbFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOZ0NvbnRyb2wgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBDaGVja2JveENvbG9yIH0gZnJvbSAnLi9jaGVja2JveC50eXBlcyc7XG5pbXBvcnQgeyBDSEVDS0JPWF9NT0RVTEUsIFh1aUNvbmZpZ1NlcnZpY2UgfSBmcm9tICcuLi9jb25maWcnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFh1aUZvY3VzTW9kdWxlIH0gZnJvbSAnLi4vdXRpbHMvZm9jdXMuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBYdWlGb2N1c01vZHVsZV0sXG4gIHNlbGVjdG9yOiAneHVpLWNoZWNrYm94JyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHRlbXBsYXRlOiBgPGRpdiBjbGFzcz1cIngtY2hlY2tib3gtYm94XCIgW3RhYmluZGV4XT1cIl9kaXNhYmxlZCgpID8gLTEgOiAwXCIgW2NsYXNzLngtY2hlY2tib3gtY2hlY2tlZF09XCJ2YWx1ZSgpXCI+XG4gICAgICA8c3ZnXG4gICAgICAgICpuZ0lmPVwidmFsdWUoKVwiXG4gICAgICAgIHZpZXdCb3g9XCIwIDAgMjQgMjRcIlxuICAgICAgICBoZWlnaHQ9XCIxMDAlXCJcbiAgICAgICAgd2lkdGg9XCIxMDAlXCJcbiAgICAgICAgcHJlc2VydmVBc3BlY3RSYXRpbz1cInhNaWRZTWlkIG1lZXRcIlxuICAgICAgICBmb2N1c2FibGU9XCJmYWxzZVwiXG4gICAgICA+XG4gICAgICAgIDxwYXRoIGQ9XCJNMjEsN0w5LDE5TDMuNSwxMy41TDQuOTEsMTIuMDlMOSwxNi4xN0wxOS41OSw1LjU5TDIxLDdaXCI+PC9wYXRoPlxuICAgICAgPC9zdmc+XG4gICAgPC9kaXY+XG4gICAgPG5nLWNvbnRlbnQgLz5gLFxuICBob3N0OiB7XG4gICAgY2xhc3M6ICd4LWNoZWNrYm94JyxcbiAgICAnW2NsYXNzXSc6ICdcIngtY2hlY2tib3gtXCIgKyBjb2xvcigpJyxcbiAgICAnW2NsYXNzLngtY2hlY2tib3gtZGlzYWJsZWRdJzogJ19kaXNhYmxlZCgpJyxcbiAgICAnKGZvY3Vzb3V0KSc6ICdfb25Ub3VjaGVkPy4oKScsXG4gICAgJyhjbGljayknOiAnX2NsaWNrKCRldmVudCknLFxuICAgICcoa2V5ZG93bi5lbnRlciknOiAnX2NsaWNrKCRldmVudCknLFxuICAgICcoa2V5ZG93bi5zcGFjZSknOiAnX2NsaWNrKCRldmVudCknXG4gIH1cbn0pXG5leHBvcnQgY2xhc3MgWHVpQ2hlY2tib3ggaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG4gIHByaXZhdGUgcmVhZG9ubHkgX21vZHVsZU5hbWUgPSBDSEVDS0JPWF9NT0RVTEU7XG5cbiAgcHJpdmF0ZSBvbkNoYW5nZT86IChzb3VyY2U6IGJvb2xlYW4pID0+IHZvaWQ7XG4gIF9vblRvdWNoZWQ/OiAoKSA9PiB2b2lkO1xuICBfZGlzYWJsZWQgPSBzaWduYWwoZmFsc2UpO1xuXG4gIGNvbG9yID0gaW5wdXQ8Q2hlY2tib3hDb2xvcj4oJ3ByaW1hcnknKTtcbiAgdmFsdWUgPSBtb2RlbDxib29sZWFuPigpO1xuICBkaXNhYmxlZCA9IGlucHV0PGJvb2xlYW4gfCB1bmRlZmluZWQsIHN0cmluZyB8IGJvb2xlYW4+KHVuZGVmaW5lZCwge1xuICAgIHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZVxuICB9KTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIGNvbmZpZ1NlcnZpY2U6IFh1aUNvbmZpZ1NlcnZpY2UsXG4gICAgQFNlbGYoKSBAT3B0aW9uYWwoKSBwdWJsaWMgY29udHJvbD86IE5nQ29udHJvbFxuICApIHtcbiAgICBpZiAodGhpcy5jb250cm9sKSB7XG4gICAgICB0aGlzLmNvbnRyb2wudmFsdWVBY2Nlc3NvciA9IHRoaXM7XG4gICAgfVxuXG4gICAgZWZmZWN0KCgpID0+IHRoaXMuZGlzYWJsZWQoKSAmJiB0aGlzLl9kaXNhYmxlZC5zZXQodGhpcy5kaXNhYmxlZCgpISksIHsgYWxsb3dTaWduYWxXcml0ZXM6IHRydWUgfSk7XG4gICAgZWZmZWN0KCgpID0+IHRoaXMudmFsdWUoKSAhPSB1bmRlZmluZWQgJiYgdGhpcy5vbkNoYW5nZT8uKHRoaXMudmFsdWUoKSEpKTtcbiAgfVxuXG4gIHdyaXRlVmFsdWUoc291cmNlOiBib29sZWFuKSB7XG4gICAgdGhpcy52YWx1ZS5zZXQoc291cmNlKTtcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2Uob25DaGFuZ2U6IChzb3VyY2U6IGJvb2xlYW4pID0+IHZvaWQpIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gb25DaGFuZ2U7XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChvblRvdWNoZWQ6ICgpID0+IHZvaWQpIHtcbiAgICB0aGlzLl9vblRvdWNoZWQgPSBvblRvdWNoZWQ7XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLl9kaXNhYmxlZC5zZXQoaXNEaXNhYmxlZCk7XG4gIH1cblxuICBfY2xpY2soZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICBldmVudD8ucHJldmVudERlZmF1bHQoKTtcblxuICAgIGlmICghdGhpcy5fZGlzYWJsZWQoKSkge1xuICAgICAgdGhpcy52YWx1ZS5zZXQoIXRoaXMudmFsdWUoKSk7XG4gICAgfVxuICB9XG59XG4iXX0=