xui
Version:
xUI Components for Angular
139 lines • 12.4 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 { CHECKBOX_MODULE, WithConfig, XuiConfigService } from '../config';
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 CheckboxComponent {
get styles() {
const ret = {
'x-checkbox': true,
'x-checkbox-disabled': this.disabled
};
ret[`x-checkbox-${this.color}`] = true;
return ret;
}
get value() {
return this._value;
}
set value(v) {
if (this._value !== v) {
this._value = v;
this.onChange?.(v);
}
}
constructor(configService, cdr, control) {
this.configService = configService;
this.cdr = cdr;
this.control = control;
this._moduleName = CHECKBOX_MODULE;
this._value = false;
this.disabled = false;
this.color = 'primary';
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: CheckboxComponent, deps: [{ token: i1.XuiConfigService }, { token: i0.ChangeDetectorRef }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: CheckboxComponent, selector: "xui-checkbox", inputs: { disabled: "disabled", color: "color", value: "value" }, host: { listeners: { "focusout": "_focusOut()", "click": "_click()", "keydown.enter": "_click($event)", "keydown.space": "_click($event)" } }, ngImport: i0, template: ` <div [ngClass]="styles">
<div class="x-checkbox-box" tabindex="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></ng-content>
</div>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
__decorate([
InputBoolean(),
WithConfig(),
__metadata("design:type", Object)
], CheckboxComponent.prototype, "disabled", void 0);
__decorate([
WithConfig(),
__metadata("design:type", String)
], CheckboxComponent.prototype, "color", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], CheckboxComponent.prototype, "value", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CheckboxComponent, decorators: [{
type: Component,
args: [{
selector: 'xui-checkbox',
changeDetection: ChangeDetectionStrategy.OnPush,
template: ` <div [ngClass]="styles">
<div class="x-checkbox-box" tabindex="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></ng-content>
</div>`
}]
}], ctorParameters: function () { return [{ type: i1.XuiConfigService }, { type: i0.ChangeDetectorRef }, { type: i2.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']
}, {
type: HostListener,
args: ['keydown.enter', ['$event']]
}, {
type: HostListener,
args: ['keydown.space', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy94dWkvc3JjL2NoZWNrYm94L2NoZWNrYm94LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixpQkFBaUIsRUFDakIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBRUwsUUFBUSxFQUNSLElBQUksRUFDTCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQXdCLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ2pFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFHeEMsT0FBTyxFQUFFLGVBQWUsRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxXQUFXLENBQUM7Ozs7O0FBcUIxRSxNQUFNLE9BQU8saUJBQWlCO0lBWTVCLElBQUksTUFBTTtRQUNSLE1BQU0sR0FBRyxHQUFpQztZQUN4QyxZQUFZLEVBQUUsSUFBSTtZQUNsQixxQkFBcUIsRUFBRSxJQUFJLENBQUMsUUFBUTtTQUNyQyxDQUFDO1FBRUYsR0FBRyxDQUFDLGNBQWMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDO1FBQ3ZDLE9BQU8sR0FBRyxDQUFDO0lBQ2IsQ0FBQztJQUVELElBRUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNyQixDQUFDO0lBRUQsSUFBSSxLQUFLLENBQUMsQ0FBQztRQUNULElBQUksSUFBSSxDQUFDLE1BQU0sS0FBSyxDQUFDLEVBQUU7WUFDckIsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUM7WUFDaEIsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDO1NBQ3BCO0lBQ0gsQ0FBQztJQUVELFlBQ1UsYUFBK0IsRUFDL0IsR0FBc0IsRUFDSCxPQUFtQjtRQUZ0QyxrQkFBYSxHQUFiLGFBQWEsQ0FBa0I7UUFDL0IsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFDSCxZQUFPLEdBQVAsT0FBTyxDQUFZO1FBbkMvQixnQkFBVyxHQUFHLGVBQWUsQ0FBQztRQUl2QyxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBRWdCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDakMsVUFBSyxHQUFrQixTQUFTLENBQUM7UUE4QnRELElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNoQixJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7U0FDbkM7SUFDSCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxPQUFPLEVBQUUsYUFBYSxFQUFFLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDLENBQUM7SUFDeEUsQ0FBQztJQUVELFVBQVUsQ0FBQyxNQUFlO1FBQ3hCLElBQUksQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDO0lBQ3RCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxRQUFtQztRQUNsRCxJQUFJLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztJQUMzQixDQUFDO0lBRUQsaUJBQWlCLENBQUMsU0FBcUI7UUFDckMsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUM7SUFDN0IsQ0FBQztJQUVELGdCQUFnQixDQUFDLFVBQW1CO1FBQ2xDLElBQUksQ0FBQyxRQUFRLEdBQUcsVUFBVSxDQUFDO0lBQzdCLENBQUM7SUFHTyxTQUFTO1FBQ2YsSUFBSSxDQUFDLFNBQVMsRUFBRSxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUtPLE1BQU0sQ0FBQyxLQUFvQjtRQUNqQyxLQUFLLEVBQUUsY0FBYyxFQUFFLENBQUM7UUFFeEIsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDbEIsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUM7U0FDMUI7SUFDSCxDQUFDOzhHQS9FVSxpQkFBaUI7a0dBQWpCLGlCQUFpQixxUUFoQmxCOzs7Ozs7Ozs7Ozs7OztTQWNIOztBQVdnQztJQUE3QixZQUFZLEVBQUU7SUFBRSxVQUFVLEVBQUU7O21EQUFrQjtBQUNqQztJQUFiLFVBQVUsRUFBRTs7Z0RBQWtDO0FBWXhEO0lBQ0MsWUFBWSxFQUFFOzs7OENBR2Q7MkZBMUJVLGlCQUFpQjtrQkFuQjdCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGNBQWM7b0JBQ3hCLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO29CQUMvQyxRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7O1NBY0g7aUJBQ1I7OzBCQXVDSSxJQUFJOzswQkFBSSxRQUFROzRDQTdCb0IsUUFBUTtzQkFBOUMsS0FBSztnQkFDaUIsS0FBSztzQkFBM0IsS0FBSztnQkFjRixLQUFLO3NCQUZSLEtBQUs7Z0JBNENFLFNBQVM7c0JBRGhCLFlBQVk7dUJBQUMsVUFBVTtnQkFRaEIsTUFBTTtzQkFIYixZQUFZO3VCQUFDLE9BQU87O3NCQUNwQixZQUFZO3VCQUFDLGVBQWUsRUFBRSxDQUFDLFFBQVEsQ0FBQzs7c0JBQ3hDLFlBQVk7dUJBQUMsZUFBZSxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSW5wdXQsXG4gIE9uSW5pdCxcbiAgT3B0aW9uYWwsXG4gIFNlbGZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTmdDb250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgSW5wdXRCb29sZWFuIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgQ2hlY2tib3hDb2xvciB9IGZyb20gJy4vY2hlY2tib3gudHlwZXMnO1xuaW1wb3J0IHsgQm9vbGVhbklucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2NvZXJjaW9uJztcbmltcG9ydCB7IENIRUNLQk9YX01PRFVMRSwgV2l0aENvbmZpZywgWHVpQ29uZmlnU2VydmljZSB9IGZyb20gJy4uL2NvbmZpZyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3h1aS1jaGVja2JveCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICB0ZW1wbGF0ZTogYCA8ZGl2IFtuZ0NsYXNzXT1cInN0eWxlc1wiPlxuICAgIDxkaXYgY2xhc3M9XCJ4LWNoZWNrYm94LWJveFwiIHRhYmluZGV4PVwiMFwiIFtjbGFzcy54LWNoZWNrYm94LWNoZWNrZWRdPVwidmFsdWVcIj5cbiAgICAgIDxzdmdcbiAgICAgICAgKm5nSWY9XCJ2YWx1ZVwiXG4gICAgICAgIHZpZXdCb3g9XCIwIDAgMjQgMjRcIlxuICAgICAgICBoZWlnaHQ9XCIxMDAlXCJcbiAgICAgICAgd2lkdGg9XCIxMDAlXCJcbiAgICAgICAgcHJlc2VydmVBc3BlY3RSYXRpbz1cInhNaWRZTWlkIG1lZXRcIlxuICAgICAgICBmb2N1c2FibGU9XCJmYWxzZVwiXG4gICAgICA+XG4gICAgICAgIDxwYXRoIGQ9XCJNMjEsN0w5LDE5TDMuNSwxMy41TDQuOTEsMTIuMDlMOSwxNi4xN0wxOS41OSw1LjU5TDIxLDdaXCI+PC9wYXRoPlxuICAgICAgPC9zdmc+XG4gICAgPC9kaXY+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5gXG59KVxuZXhwb3J0IGNsYXNzIENoZWNrYm94Q29tcG9uZW50IGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE9uSW5pdCB7XG4gIHN0YXRpYyBuZ0FjY2VwdElucHV0VHlwZV9kaXNhYmxlZDogQm9vbGVhbklucHV0O1xuICBzdGF0aWMgbmdBY2NlcHRJbnB1dFR5cGVfdmFsdWU6IEJvb2xlYW5JbnB1dDtcbiAgcHJpdmF0ZSByZWFkb25seSBfbW9kdWxlTmFtZSA9IENIRUNLQk9YX01PRFVMRTtcblxuICBwcml2YXRlIG9uQ2hhbmdlPzogKHNvdXJjZTogYm9vbGVhbikgPT4gdm9pZDtcbiAgcHJpdmF0ZSBvblRvdWNoZWQ/OiAoKSA9PiB2b2lkO1xuICBwcml2YXRlIF92YWx1ZSA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpIEBJbnB1dEJvb2xlYW4oKSBAV2l0aENvbmZpZygpIGRpc2FibGVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIEBXaXRoQ29uZmlnKCkgY29sb3I6IENoZWNrYm94Q29sb3IgPSAncHJpbWFyeSc7XG5cbiAgZ2V0IHN0eWxlcygpIHtcbiAgICBjb25zdCByZXQ6IHsgW2tsYXNzOiBzdHJpbmddOiBib29sZWFuIH0gPSB7XG4gICAgICAneC1jaGVja2JveCc6IHRydWUsXG4gICAgICAneC1jaGVja2JveC1kaXNhYmxlZCc6IHRoaXMuZGlzYWJsZWRcbiAgICB9O1xuXG4gICAgcmV0W2B4LWNoZWNrYm94LSR7dGhpcy5jb2xvcn1gXSA9IHRydWU7XG4gICAgcmV0dXJuIHJldDtcbiAgfVxuXG4gIEBJbnB1dCgpXG4gIEBJbnB1dEJvb2xlYW4oKVxuICBnZXQgdmFsdWUoKSB7XG4gICAgcmV0dXJuIHRoaXMuX3ZhbHVlO1xuICB9XG5cbiAgc2V0IHZhbHVlKHYpIHtcbiAgICBpZiAodGhpcy5fdmFsdWUgIT09IHYpIHtcbiAgICAgIHRoaXMuX3ZhbHVlID0gdjtcbiAgICAgIHRoaXMub25DaGFuZ2U/Lih2KTtcbiAgICB9XG4gIH1cblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIGNvbmZpZ1NlcnZpY2U6IFh1aUNvbmZpZ1NlcnZpY2UsXG4gICAgcHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmLFxuICAgIEBTZWxmKCkgQE9wdGlvbmFsKCkgcHVibGljIGNvbnRyb2w/OiBOZ0NvbnRyb2xcbiAgKSB7XG4gICAgaWYgKHRoaXMuY29udHJvbCkge1xuICAgICAgdGhpcy5jb250cm9sLnZhbHVlQWNjZXNzb3IgPSB0aGlzO1xuICAgIH1cbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuY29udHJvbD8uc3RhdHVzQ2hhbmdlcz8uc3Vic2NyaWJlKCgpID0+IHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpKTtcbiAgfVxuXG4gIHdyaXRlVmFsdWUoc291cmNlOiBib29sZWFuKSB7XG4gICAgdGhpcy52YWx1ZSA9IHNvdXJjZTtcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2Uob25DaGFuZ2U6IChzb3VyY2U6IGJvb2xlYW4pID0+IHZvaWQpIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gb25DaGFuZ2U7XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChvblRvdWNoZWQ6ICgpID0+IHZvaWQpIHtcbiAgICB0aGlzLm9uVG91Y2hlZCA9IG9uVG91Y2hlZDtcbiAgfVxuXG4gIHNldERpc2FibGVkU3RhdGUoaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xuICAgIHRoaXMuZGlzYWJsZWQgPSBpc0Rpc2FibGVkO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZm9jdXNvdXQnKVxuICBwcml2YXRlIF9mb2N1c091dCgpIHtcbiAgICB0aGlzLm9uVG91Y2hlZD8uKCk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdjbGljaycpXG4gIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24uZW50ZXInLCBbJyRldmVudCddKVxuICBASG9zdExpc3RlbmVyKCdrZXlkb3duLnNwYWNlJywgWyckZXZlbnQnXSlcbiAgcHJpdmF0ZSBfY2xpY2soZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICBldmVudD8ucHJldmVudERlZmF1bHQoKTtcblxuICAgIGlmICghdGhpcy5kaXNhYmxlZCkge1xuICAgICAgdGhpcy52YWx1ZSA9ICF0aGlzLnZhbHVlO1xuICAgIH1cbiAgfVxufVxuIl19