@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  AfterViewInit,\n  booleanAttribute,\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  linkedSignal,\n  signal,\n} from '@angular/core';\nimport { FormControl, Validators } from '@angular/forms';\nimport { randomString } from '@koalarx/utils/KlString';\n\n@Directive()\nexport abstract class InputFieldBase implements AfterViewInit {\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly required = signal(false);\n  protected readonly isDisabled = linkedSignal(() => this.disabled());\n  protected readonly isRequired = this.required.asReadonly();\n  protected readonly fieldId = randomString(10, {\n    lowercase: true,\n    uppercase: true,\n  });\n\n  control = input.required<FormControl>();\n  label = input<string>();\n  placeholder = input<string>('');\n  disabled = input(false, { transform: booleanAttribute });\n\n  constructor() {\n    effect(() => this.checkIsRequired(this.control()));\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  ngAfterViewInit(): void {\n    setTimeout(() => {\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    }, 50);\n  }\n}\n","import { 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})\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<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":";;;;;;;;MAesB,cAAc,CAAA;AACjB,IAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;AACxD,IAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC;IACtB,UAAU,GAAG,YAAY,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;AAChD,IAAA,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;AACvC,IAAA,OAAO,GAAG,YAAY,CAAC,EAAE,EAAE;AAC5C,QAAA,SAAS,EAAE,IAAI;AACf,QAAA,SAAS,EAAE,IAAI;AAChB,KAAA,CAAC;AAEF,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,EAAe;IACvC,KAAK,GAAG,KAAK,EAAU;AACvB,IAAA,WAAW,GAAG,KAAK,CAAS,EAAE,CAAC;IAC/B,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAExD,IAAA,WAAA,GAAA;AACE,QAAA,MAAM,CAAC,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;;AAG5C,IAAA,gBAAgB,CAAC,OAAoB,EAAA;QAC3C,MAAM,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,eAAe;AAEzE,QAAA,IAAI,CAAC,gBAAgB,IAAI,gBAAgB,KAAK,kBAAkB,EAAE;AAChE,YAAA,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE;AAC1B,gBAAA,OAAO,uBAAuB;;YAGhC,OAAO,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,aAAc,CAAC;;AAGtD,QAAA,OAAO,gBAAgB;;AAGjB,IAAA,eAAe,CAAC,OAAoB,EAAA;AAC1C,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;;IAG9D,eAAe,GAAA;QACb,UAAU,CAAC,MAAK;YACd,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;;;SAG5E,EAAE,EAAE,CAAC;;uGAnDY,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBADnC;;;ACUK,MAAO,UAAW,SAAQ,cAAc,CAAA;AAC5C,IAAA,IAAI,GAAG,KAAK,CAAiB,MAAM,CAAC;AACpC,IAAA,IAAI,GAAG,KAAK,CAAS,EAAE,CAAC;IACxB,GAAG,GAAG,KAAK,EAAU;IACrB,GAAG,GAAG,KAAK,EAAU;uGAJV,UAAU,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,2jBCxBvB,2tBA6BA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDPY,mBAAmB,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,wIAAA,EAAA,MAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,SAAS,0EAAE,WAAW,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAE1C,UAAU,EAAA,UAAA,EAAA,CAAA;kBALtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,WAEjB,CAAC,mBAAmB,EAAE,SAAS,EAAE,WAAW,CAAC,EAAA,QAAA,EAAA,2tBAAA,EAAA;;;AEtBxD;;AAEG;;;;"}