@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.
96 lines (92 loc) • 6.16 kB
JavaScript
import * as i0 from '@angular/core';
import { viewChild, input, booleanAttribute, effect, ChangeDetectionStrategy, Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { InputFieldBase } from '@koalarx/ui/shared/components/input-field';
class InputRadio extends InputFieldBase {
inputRadioElement = viewChild('inputRadio', ...(ngDevMode ? [{ debugName: "inputRadioElement" }] : []));
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
disableAutoTypeConversion = input(false, { ...(ngDevMode ? { debugName: "disableAutoTypeConversion" } : {}), transform: booleanAttribute });
getColorClass() {
switch (this.color()) {
case 'neutral':
return 'radio-neutral';
case 'primary':
return 'radio-primary';
case 'secondary':
return 'radio-secondary';
case 'accent':
return 'radio-accent';
case 'info':
return 'radio-info';
case 'success':
return 'radio-success';
case 'warning':
return 'radio-warning';
case 'error':
return 'radio-error';
case 'ghost':
return 'radio-ghost';
default:
return 'radio';
}
}
getSizeClass() {
switch (this.size()) {
case 'extraSmall':
return 'radio-xs';
case 'small':
return 'radio-sm';
case 'medium':
return 'radio-md';
case 'large':
return 'radio-lg';
case 'extraLarge':
return 'radio-xl';
default:
return 'radio';
}
}
constructor() {
super();
effect(() => {
const input = this.inputRadioElement()?.nativeElement;
if (input) {
input.classList.add(this.getColorClass());
}
});
effect(() => {
const input = this.inputRadioElement()?.nativeElement;
if (input) {
input.classList.add(this.getSizeClass());
}
});
}
toggle(event) {
const target = event.target;
let value = target.value;
if (!Number.isNaN(parseInt(value)) &&
!/^0+[1-9]\d*$/.test(value) &&
!this.disableAutoTypeConversion()) {
value = Number(value);
}
if (this.control().value === value) {
this.control().setValue(null);
return;
}
this.control().setValue(value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputRadio, isStandalone: true, selector: "kl-input-radio", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disableAutoTypeConversion: { classPropertyName: "disableAutoTypeConversion", publicName: "disableAutoTypeConversion", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputRadioElement", first: true, predicate: ["inputRadio"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n <input #inputRadio\n [id]=\"fieldId\"\n type=\"radio\"\n class=\"radio\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"value() === control().value\"\n [disabled]=\"disabled()\"\n (click)=\"toggle($event)\"\n />\n\n <ng-content />\n</label>\n\n@if (hint()) {\n <span class=\"hint-content\">{{hint()}}</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: InputRadio, decorators: [{
type: Component,
args: [{ selector: 'kl-input-radio', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n <input #inputRadio\n [id]=\"fieldId\"\n type=\"radio\"\n class=\"radio\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"value() === control().value\"\n [disabled]=\"disabled()\"\n (click)=\"toggle($event)\"\n />\n\n <ng-content />\n</label>\n\n@if (hint()) {\n <span class=\"hint-content\">{{hint()}}</span>\n}\n" }]
}], ctorParameters: () => [], propDecorators: { inputRadioElement: [{ type: i0.ViewChild, args: ['inputRadio', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disableAutoTypeConversion: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAutoTypeConversion", required: false }] }] } });
/**
* Generated bundle index. Do not edit.
*/
export { InputRadio };
//# sourceMappingURL=koalarx-ui-shared-components-input-field-input-radio.mjs.map