@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.
85 lines (80 loc) • 9.22 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, signal, DestroyRef, linkedSignal, input, booleanAttribute, effect, afterRenderEffect, Directive, ChangeDetectionStrategy, Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i1 from '@angular/forms';
import { Validators, ReactiveFormsModule } from '@angular/forms';
import { CURRENT_THEME } from '@koalarx/ui/core/config';
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, ...(ngDevMode ? [{ debugName: "required" }] : []));
destroyRef = inject(DestroyRef);
isDisabled = linkedSignal(() => this.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
isRequired = this.required.asReadonly();
fieldId = randomString(10, {
lowercase: true,
uppercase: true,
});
valueChange = signal(null, ...(ngDevMode ? [{ debugName: "valueChange" }] : []));
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : []));
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
constructor() {
effect(() => this.checkIsRequired(this.control()));
effect(() => {
CURRENT_THEME();
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}`;
}
}
});
afterRenderEffect(() => {
this.control()
.valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(this.valueChange.set);
});
}
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));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputFieldBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.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 }, hint: { classPropertyName: "hint", publicName: "hint", 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: "21.0.6", ngImport: i0, type: InputFieldBase, decorators: [{
type: Directive
}], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
class InputField extends InputFieldBase {
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
mask = input('', ...(ngDevMode ? [{ debugName: "mask" }] : []));
min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputField, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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@if (hint()) {\n <span class=\"hint-content\">{{hint()}}</span>\n}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputField, decorators: [{
type: Component,
args: [{ selector: 'kl-input-field', imports: [ReactiveFormsModule, InputMask, FieldErrors], changeDetection: ChangeDetectionStrategy.OnPush, 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@if (hint()) {\n <span class=\"hint-content\">{{hint()}}</span>\n}\n\n<kl-field-errors [field]=\"control()\">\n <ng-container errors>\n <ng-content select=\"[errors]\" />\n </ng-container>\n</kl-field-errors>\n" }]
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
/**
* Generated bundle index. Do not edit.
*/
export { InputField, InputFieldBase };
//# sourceMappingURL=koalarx-ui-shared-components-input-field.mjs.map