@koalarx/ui 21.1.15 → 21.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/koalarx-ui-shared-components-input-field-input-radio.mjs +2 -2
- package/fesm2022/koalarx-ui-shared-components-input-field-input-radio.mjs.map +1 -1
- package/fesm2022/koalarx-ui-shared-components-input-field.mjs +1 -0
- package/fesm2022/koalarx-ui-shared-components-input-field.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -80,11 +80,11 @@ class InputRadio extends InputFieldBase {
|
|
|
80
80
|
this.control().setValue(value);
|
|
81
81
|
}
|
|
82
82
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
83
|
-
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() ===
|
|
83
|
+
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() === valueChange()\"\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 });
|
|
84
84
|
}
|
|
85
85
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputRadio, decorators: [{
|
|
86
86
|
type: Component,
|
|
87
|
-
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() ===
|
|
87
|
+
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() === valueChange()\"\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" }]
|
|
88
88
|
}], 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 }] }] } });
|
|
89
89
|
|
|
90
90
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"koalarx-ui-shared-components-input-field-input-radio.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-radio/input-radio.ts","../../projects/koala-ui/shared/components/input-field/input-radio/input-radio.html","../../projects/koala-ui/shared/components/input-field/input-radio/koalarx-ui-shared-components-input-field-input-radio.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n effect,\n ElementRef,\n input,\n viewChild,\n} from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\n\nexport type RadioColor =\n | 'neutral'\n | 'primary'\n | 'secondary'\n | 'accent'\n | 'info'\n | 'success'\n | 'warning'\n | 'error'\n | 'ghost';\n\nexport type RadioSize =\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n\n@Component({\n selector: 'kl-input-radio',\n templateUrl: './input-radio.html',\n imports: [ReactiveFormsModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InputRadio extends InputFieldBase {\n private readonly inputRadioElement =\n viewChild<ElementRef<HTMLInputElement>>('inputRadio');\n\n color = input<RadioColor>();\n size = input<RadioSize>();\n name = input.required<string>();\n value = input.required<string | number>();\n disableAutoTypeConversion = input(false, { transform: booleanAttribute });\n\n private getColorClass(): string {\n switch (this.color()) {\n case 'neutral':\n return 'radio-neutral';\n case 'primary':\n return 'radio-primary';\n case 'secondary':\n return 'radio-secondary';\n case 'accent':\n return 'radio-accent';\n case 'info':\n return 'radio-info';\n case 'success':\n return 'radio-success';\n case 'warning':\n return 'radio-warning';\n case 'error':\n return 'radio-error';\n case 'ghost':\n return 'radio-ghost';\n default:\n return 'radio';\n }\n }\n\n private getSizeClass(): string {\n switch (this.size()) {\n case 'extraSmall':\n return 'radio-xs';\n case 'small':\n return 'radio-sm';\n case 'medium':\n return 'radio-md';\n case 'large':\n return 'radio-lg';\n case 'extraLarge':\n return 'radio-xl';\n default:\n return 'radio';\n }\n }\n\n constructor() {\n super();\n\n effect(() => {\n const input = this.inputRadioElement()?.nativeElement;\n\n if (input) {\n input.classList.add(this.getColorClass());\n }\n });\n\n effect(() => {\n const input = this.inputRadioElement()?.nativeElement;\n\n if (input) {\n input.classList.add(this.getSizeClass());\n }\n });\n }\n\n toggle(event: Event) {\n const target = event.target as HTMLInputElement;\n\n let value: string | number = target.value;\n\n if (\n !Number.isNaN(parseInt(value as any)) &&\n !/^0+[1-9]\\d*$/.test(value) &&\n !this.disableAutoTypeConversion()\n ) {\n value = Number(value);\n }\n\n if (this.control().value === value) {\n this.control().setValue(null);\n return;\n }\n\n this.control().setValue(value);\n }\n}\n","<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() ===
|
|
1
|
+
{"version":3,"file":"koalarx-ui-shared-components-input-field-input-radio.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-radio/input-radio.ts","../../projects/koala-ui/shared/components/input-field/input-radio/input-radio.html","../../projects/koala-ui/shared/components/input-field/input-radio/koalarx-ui-shared-components-input-field-input-radio.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n effect,\n ElementRef,\n input,\n viewChild,\n} from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\n\nexport type RadioColor =\n | 'neutral'\n | 'primary'\n | 'secondary'\n | 'accent'\n | 'info'\n | 'success'\n | 'warning'\n | 'error'\n | 'ghost';\n\nexport type RadioSize =\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n\n@Component({\n selector: 'kl-input-radio',\n templateUrl: './input-radio.html',\n imports: [ReactiveFormsModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InputRadio extends InputFieldBase {\n private readonly inputRadioElement =\n viewChild<ElementRef<HTMLInputElement>>('inputRadio');\n\n color = input<RadioColor>();\n size = input<RadioSize>();\n name = input.required<string>();\n value = input.required<string | number>();\n disableAutoTypeConversion = input(false, { transform: booleanAttribute });\n\n private getColorClass(): string {\n switch (this.color()) {\n case 'neutral':\n return 'radio-neutral';\n case 'primary':\n return 'radio-primary';\n case 'secondary':\n return 'radio-secondary';\n case 'accent':\n return 'radio-accent';\n case 'info':\n return 'radio-info';\n case 'success':\n return 'radio-success';\n case 'warning':\n return 'radio-warning';\n case 'error':\n return 'radio-error';\n case 'ghost':\n return 'radio-ghost';\n default:\n return 'radio';\n }\n }\n\n private getSizeClass(): string {\n switch (this.size()) {\n case 'extraSmall':\n return 'radio-xs';\n case 'small':\n return 'radio-sm';\n case 'medium':\n return 'radio-md';\n case 'large':\n return 'radio-lg';\n case 'extraLarge':\n return 'radio-xl';\n default:\n return 'radio';\n }\n }\n\n constructor() {\n super();\n\n effect(() => {\n const input = this.inputRadioElement()?.nativeElement;\n\n if (input) {\n input.classList.add(this.getColorClass());\n }\n });\n\n effect(() => {\n const input = this.inputRadioElement()?.nativeElement;\n\n if (input) {\n input.classList.add(this.getSizeClass());\n }\n });\n }\n\n toggle(event: Event) {\n const target = event.target as HTMLInputElement;\n\n let value: string | number = target.value;\n\n if (\n !Number.isNaN(parseInt(value as any)) &&\n !/^0+[1-9]\\d*$/.test(value) &&\n !this.disableAutoTypeConversion()\n ) {\n value = Number(value);\n }\n\n if (this.control().value === value) {\n this.control().setValue(null);\n return;\n }\n\n this.control().setValue(value);\n }\n}\n","<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() === valueChange()\"\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"koalarx-ui-shared-components-input-field.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-field.base.ts","../../projects/koala-ui/shared/components/input-field/input-field.ts","../../projects/koala-ui/shared/components/input-field/input-field.html","../../projects/koala-ui/shared/components/input-field/koalarx-ui-shared-components-input-field.ts"],"sourcesContent":["import {\n afterRenderEffect,\n booleanAttribute,\n DestroyRef,\n Directive,\n effect,\n ElementRef,\n inject,\n input,\n linkedSignal,\n signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormControl, Validators } from '@angular/forms';\nimport { CURRENT_THEME } from '@koalarx/ui/core/config';\nimport { randomString } from '@koalarx/utils/KlString';\n\n@Directive()\nexport abstract class InputFieldBase {\n private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly required = signal(false);\n\n readonly destroyRef = inject(DestroyRef);\n readonly isDisabled = linkedSignal(() => this.disabled());\n readonly isRequired = this.required.asReadonly();\n readonly fieldId = randomString(10, {\n lowercase: true,\n uppercase: true,\n });\n readonly valueChange = signal<any>(null);\n\n control = input.required<FormControl>();\n label = input<string>();\n placeholder = input<string>('');\n hint = input<string>();\n disabled = input(false, { transform: booleanAttribute });\n\n constructor() {\n effect(() => this.checkIsRequired(this.control()));\n\n effect(() => {\n CURRENT_THEME();\n\n if (\n this.elementRef.nativeElement?.tagName.toLowerCase() !==\n 'kl-input-field'\n ) {\n const container = this.elementRef.nativeElement.parentElement;\n\n if (container) {\n const containerBgColor = this.getBgColorParent(container);\n\n this.elementRef.nativeElement.style = `--bg-input: ${containerBgColor}`;\n }\n }\n });\n\n afterRenderEffect(() => {\n this.control()\n .valueChanges.pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(this.valueChange.set);\n });\n }\n\n private getBgColorParent(element: HTMLElement): string {\n const containerBgColor = window.getComputedStyle(element).backgroundColor;\n\n if (!containerBgColor || containerBgColor === 'rgba(0, 0, 0, 0)') {\n if (!element.parentElement) {\n return 'var(--color-base-100)';\n }\n\n return this.getBgColorParent(element.parentElement!);\n }\n\n return containerBgColor;\n }\n\n private checkIsRequired(control: FormControl) {\n this.required.set(control.hasValidator(Validators.required));\n }\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FieldErrors } from '@koalarx/ui/shared/components/field-errors';\nimport { InputMask } from '@koalarx/ui/shared/directives';\nimport { InputFieldBase } from './input-field.base';\n\ntype InputTypeField =\n | 'text'\n | 'email'\n | 'password'\n | 'number'\n | 'tel'\n | 'url'\n | 'date'\n | 'datetime-local'\n | 'month'\n | 'time'\n | 'search';\n\n@Component({\n selector: 'kl-input-field',\n templateUrl: './input-field.html',\n imports: [ReactiveFormsModule, InputMask, FieldErrors],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InputField extends InputFieldBase {\n type = input<InputTypeField>('text');\n mask = input<string>('');\n min = input<string>();\n max = input<string>();\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;MAkBsB,cAAc,CAAA;AACjB,IAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;AACxD,IAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,oDAAC;AAEhC,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;IAC/B,UAAU,GAAG,YAAY,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AAChD,IAAA,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;AACvC,IAAA,OAAO,GAAG,YAAY,CAAC,EAAE,EAAE;AAClC,QAAA,SAAS,EAAE,IAAI;AACf,QAAA,SAAS,EAAE,IAAI;AAChB,KAAA,CAAC;AACO,IAAA,WAAW,GAAG,MAAM,CAAM,IAAI,uDAAC;AAExC,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,kDAAe;IACvC,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;AACvB,IAAA,WAAW,GAAG,KAAK,CAAS,EAAE,uDAAC;IAC/B,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;IACtB,QAAQ,GAAG,KAAK,CAAC,KAAK,qDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAExD,IAAA,WAAA,GAAA;AACE,QAAA,MAAM,CAAC,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QAElD,MAAM,CAAC,MAAK;AACV,YAAA,aAAa,EAAE;YAEf,IACE,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,OAAO,CAAC,WAAW,EAAE;AACpD,gBAAA,gBAAgB,EAChB;gBACA,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa;gBAE7D,IAAI,SAAS,EAAE;oBACb,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC;oBAEzD,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,GAAG,CAAA,YAAA,EAAe,gBAAgB,CAAA,CAAE;;;AAG7E,SAAC,CAAC;QAEF,iBAAiB,CAAC,MAAK;
|
|
1
|
+
{"version":3,"file":"koalarx-ui-shared-components-input-field.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-field.base.ts","../../projects/koala-ui/shared/components/input-field/input-field.ts","../../projects/koala-ui/shared/components/input-field/input-field.html","../../projects/koala-ui/shared/components/input-field/koalarx-ui-shared-components-input-field.ts"],"sourcesContent":["import {\n afterRenderEffect,\n booleanAttribute,\n DestroyRef,\n Directive,\n effect,\n ElementRef,\n inject,\n input,\n linkedSignal,\n signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormControl, Validators } from '@angular/forms';\nimport { CURRENT_THEME } from '@koalarx/ui/core/config';\nimport { randomString } from '@koalarx/utils/KlString';\n\n@Directive()\nexport abstract class InputFieldBase {\n private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly required = signal(false);\n\n readonly destroyRef = inject(DestroyRef);\n readonly isDisabled = linkedSignal(() => this.disabled());\n readonly isRequired = this.required.asReadonly();\n readonly fieldId = randomString(10, {\n lowercase: true,\n uppercase: true,\n });\n readonly valueChange = signal<any>(null);\n\n control = input.required<FormControl>();\n label = input<string>();\n placeholder = input<string>('');\n hint = input<string>();\n disabled = input(false, { transform: booleanAttribute });\n\n constructor() {\n effect(() => this.checkIsRequired(this.control()));\n\n effect(() => {\n CURRENT_THEME();\n\n if (\n this.elementRef.nativeElement?.tagName.toLowerCase() !==\n 'kl-input-field'\n ) {\n const container = this.elementRef.nativeElement.parentElement;\n\n if (container) {\n const containerBgColor = this.getBgColorParent(container);\n\n this.elementRef.nativeElement.style = `--bg-input: ${containerBgColor}`;\n }\n }\n });\n\n afterRenderEffect(() => {\n this.valueChange.set(this.control().value);\n\n this.control()\n .valueChanges.pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(this.valueChange.set);\n });\n }\n\n private getBgColorParent(element: HTMLElement): string {\n const containerBgColor = window.getComputedStyle(element).backgroundColor;\n\n if (!containerBgColor || containerBgColor === 'rgba(0, 0, 0, 0)') {\n if (!element.parentElement) {\n return 'var(--color-base-100)';\n }\n\n return this.getBgColorParent(element.parentElement!);\n }\n\n return containerBgColor;\n }\n\n private checkIsRequired(control: FormControl) {\n this.required.set(control.hasValidator(Validators.required));\n }\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FieldErrors } from '@koalarx/ui/shared/components/field-errors';\nimport { InputMask } from '@koalarx/ui/shared/directives';\nimport { InputFieldBase } from './input-field.base';\n\ntype InputTypeField =\n | 'text'\n | 'email'\n | 'password'\n | 'number'\n | 'tel'\n | 'url'\n | 'date'\n | 'datetime-local'\n | 'month'\n | 'time'\n | 'search';\n\n@Component({\n selector: 'kl-input-field',\n templateUrl: './input-field.html',\n imports: [ReactiveFormsModule, InputMask, FieldErrors],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InputField extends InputFieldBase {\n type = input<InputTypeField>('text');\n mask = input<string>('');\n min = input<string>();\n max = input<string>();\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|