@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.
76 lines (71 loc) • 6.93 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, signal, linkedSignal, input, booleanAttribute, effect, Directive, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { Validators, ReactiveFormsModule } from '@angular/forms';
import { randomString } from '@koalarx/utils/KlString';
import { FieldErrors } from '@koalarx/ui/shared/components/field-errors';
import { InputMask } from '@koalarx/ui/shared/directives';
class InputFieldBase {
elementRef = inject(ElementRef);
required = signal(false);
isDisabled = linkedSignal(() => this.disabled());
isRequired = this.required.asReadonly();
fieldId = randomString(10, {
lowercase: true,
uppercase: true,
});
control = input.required();
label = input();
placeholder = input('');
disabled = input(false, { transform: booleanAttribute });
constructor() {
effect(() => this.checkIsRequired(this.control()));
}
getBgColorParent(element) {
const containerBgColor = window.getComputedStyle(element).backgroundColor;
if (!containerBgColor || containerBgColor === 'rgba(0, 0, 0, 0)') {
if (!element.parentElement) {
return 'var(--color-base-100)';
}
return this.getBgColorParent(element.parentElement);
}
return containerBgColor;
}
checkIsRequired(control) {
this.required.set(control.hasValidator(Validators.required));
}
ngAfterViewInit() {
setTimeout(() => {
if (this.elementRef.nativeElement?.tagName.toLowerCase() !==
'kl-input-field') {
const container = this.elementRef.nativeElement.parentElement;
if (container) {
const containerBgColor = this.getBgColorParent(container);
this.elementRef.nativeElement.style = `--bg-input: ${containerBgColor}`;
}
}
}, 50);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputFieldBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: InputFieldBase, isStandalone: true, inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputFieldBase, decorators: [{
type: Directive
}], ctorParameters: () => [] });
class InputField extends InputFieldBase {
type = input('text');
mask = input('');
min = input();
max = input();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputField, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: InputField, isStandalone: true, selector: "kl-input-field", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full rounded-sm\">\n @if (label(); as label) {\n <span>\n <ng-content select=\"[icon]\" />\n {{ label }} {{ isRequired() ? '*' : '' }}\n </span>\n }\n\n <input\n [id]=\"fieldId\"\n [formControl]=\"control()\"\n [placeholder]=\"label()\n ? label() + (isRequired() ? '*' : '')\n : placeholder()\"\n [required]=\"isRequired()\"\n [mask]=\"mask()\"\n [type]=\"type()\"\n [min]=\"min()\"\n [max]=\"max()\"\n />\n\n <ng-content select=\"[suffix]\" />\n</label>\n\n<kl-field-errors [field]=\"control()\">\n <ng-container errors>\n <ng-content select=\"[errors]\" />\n </ng-container>\n</kl-field-errors>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: InputMask, selector: "input[mask]", inputs: ["mask"] }, { kind: "component", type: FieldErrors, selector: "kl-field-errors", inputs: ["field"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: InputField, decorators: [{
type: Component,
args: [{ selector: 'kl-input-field', imports: [ReactiveFormsModule, InputMask, FieldErrors], template: "<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full rounded-sm\">\n @if (label(); as label) {\n <span>\n <ng-content select=\"[icon]\" />\n {{ label }} {{ isRequired() ? '*' : '' }}\n </span>\n }\n\n <input\n [id]=\"fieldId\"\n [formControl]=\"control()\"\n [placeholder]=\"label()\n ? label() + (isRequired() ? '*' : '')\n : placeholder()\"\n [required]=\"isRequired()\"\n [mask]=\"mask()\"\n [type]=\"type()\"\n [min]=\"min()\"\n [max]=\"max()\"\n />\n\n <ng-content select=\"[suffix]\" />\n</label>\n\n<kl-field-errors [field]=\"control()\">\n <ng-container errors>\n <ng-content select=\"[errors]\" />\n </ng-container>\n</kl-field-errors>\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { InputField, InputFieldBase };
//# sourceMappingURL=koalarx-ui-shared-components-input-field.mjs.map