@koalarx/ui
Version:
Koala UI is a modern and accessible component library designed to speed up interface development in Angular projects. With simple integration and clear documentation, you can easily build robust and visually appealing applications.
83 lines (79 loc) • 4.91 kB
JavaScript
import * as i0 from '@angular/core';
import { viewChild, input, effect, ChangeDetectionStrategy, Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { InputFieldBase } from '@koalarx/ui/shared/components/input-field';
class InputCheckbox extends InputFieldBase {
inputCheckboxElement = viewChild('inputCheckbox', ...(ngDevMode ? [{ debugName: "inputCheckboxElement" }] : []));
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
getColorClass() {
switch (this.color()) {
case 'neutral':
return 'checkbox-neutral';
case 'primary':
return 'checkbox-primary';
case 'secondary':
return 'checkbox-secondary';
case 'accent':
return 'checkbox-accent';
case 'info':
return 'checkbox-info';
case 'success':
return 'checkbox-success';
case 'warning':
return 'checkbox-warning';
case 'error':
return 'checkbox-error';
case 'ghost':
return 'checkbox-ghost';
default:
return 'checkbox';
}
}
getSizeClass() {
switch (this.size()) {
case 'extraSmall':
return 'checkbox-xs';
case 'small':
return 'checkbox-sm';
case 'medium':
return 'checkbox-md';
case 'large':
return 'checkbox-lg';
case 'extraLarge':
return 'checkbox-xl';
default:
return 'checkbox';
}
}
constructor() {
super();
effect(() => {
const input = this.inputCheckboxElement()?.nativeElement;
if (input) {
input.classList.add(this.getColorClass());
}
});
effect(() => {
const input = this.inputCheckboxElement()?.nativeElement;
if (input) {
input.classList.add(this.getSizeClass());
}
});
}
toggle(event) {
const target = event.target;
this.control().setValue(target.checked);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputCheckbox, isStandalone: true, selector: "kl-input-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputCheckboxElement", first: true, predicate: ["inputCheckbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n <input #inputCheckbox\n [id]=\"fieldId\"\n type=\"checkbox\"\n class=\"checkbox\"\n [checked]=\"control().value\"\n [disabled]=\"disabled()\"\n (change)=\"toggle($event)\"\n />\n\n <ng-content />\n</label>\n\n@if (hint()) {\n <span class=\"hint-content\">\n <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n </span>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputCheckbox, decorators: [{
type: Component,
args: [{ selector: 'kl-input-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule], template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n <input #inputCheckbox\n [id]=\"fieldId\"\n type=\"checkbox\"\n class=\"checkbox\"\n [checked]=\"control().value\"\n [disabled]=\"disabled()\"\n (change)=\"toggle($event)\"\n />\n\n <ng-content />\n</label>\n\n@if (hint()) {\n <span class=\"hint-content\">\n <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n </span>\n}\n" }]
}], ctorParameters: () => [], propDecorators: { inputCheckboxElement: [{ type: i0.ViewChild, args: ['inputCheckbox', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
/**
* Generated bundle index. Do not edit.
*/
export { InputCheckbox };
//# sourceMappingURL=koalarx-ui-shared-components-input-field-input-checkbox.mjs.map