@koalarx/ui/fesm2022/koalarx-ui-shared-components-input-field.mjs.map

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.

{"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":"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"}