@ipi-soft/ng-components/fesm2022/ipi-soft-ng-components-input.mjs.map

Custom Angular Components

{"version":3,"file":"ipi-soft-ng-components-input.mjs","sources":["../../../../projects/ipi-soft/ng-components/input/src/input.component.ts","../../../../projects/ipi-soft/ng-components/input/src/input.component.html","../../../../projects/ipi-soft/ng-components/input/ipi-soft-ng-components-input.ts"],"sourcesContent":["import { Component, ChangeDetectorRef, Input, Output, EventEmitter, HostListener } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport { AbstractControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { Subscription } from 'rxjs';\n\nimport { IpiImageComponent } from '@ipi-soft/ng-components/image';\n\nimport { IpiTooltipDirective, TooltipPosition } from '@ipi-soft/ng-components/tooltip';\n\nexport interface IpiInputOptions {\n  label: string;\n  type?: string;\n  tooltip?: string;\n  disabled?: boolean;\n  placeholder?: string;\n  helperText?: string;\n  helperRoute?: string;\n  prefixImg?: string;\n  suffixImg?: string;\n  formGroup?: FormGroup;\n  formControlName?: string;\n  errors?: IpiControlErrors;\n}\n\nexport interface IpiControlErrors {\n  [x: string]: string;\n}\n\n@Component({\n  selector: 'ipi-input',\n  templateUrl: './input.component.html',\n  styleUrls: ['./input.component.css'],\n  imports: [\n    NgClass,\n    NgTemplateOutlet,\n    RouterLink,\n    FormsModule,\n    IpiImageComponent,\n    ReactiveFormsModule,\n    IpiTooltipDirective,\n    IpiTooltipDirective\n  ]\n})\n\nexport class IpiInputComponent {\n\n  constructor(private changeDetectorRef: ChangeDetectorRef) { \n    this.changeDetectorRef.detach();\n  }\n\n  @Input() options!: IpiInputOptions;\n\n  @Output() inputChange = new EventEmitter<string>();\n  @Output() suffixImgChange = new EventEmitter<void>();\n  @Output() helperTextChange = new EventEmitter<void>();\n\n  public label!: string;\n  public controlInvalid = false;\n  public tooltipPosition = TooltipPosition;\n\n  private controlSubscription!: Subscription;\n  private control: AbstractControl | null = null;\n\n  public ngOnInit(): void {\n    this.setControl();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  public ngOnDestroy(): void {\n    if (this.controlSubscription) {\n      this.controlSubscription.unsubscribe();\n    }\n  }\n\n  public onInput(event: any): void {\n    this.inputChange.emit(event.target.value);\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  public onSuffixImage(): void {\n    this.suffixImgChange.emit();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  public onHelperText(): void {\n    this.helperTextChange.emit();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  @HostListener('focusout', ['$event'])\n   onFocusOut(): void {\n    this.initChange();\n  }\n\n  private setControl(): void {\n    if (!this.options) {\n      return;\n    }\n\n    if (!this.options.placeholder) {\n      this.options.placeholder = this.options.label;\n    }\n  \n    if (!this.options.formGroup || !this.options.formControlName) {\n      return;\n    }\n\n    this.control = this.options.formGroup.controls[this.options.formControlName];\n\n    this.checkIfControlDisabled(this.control);\n\n    this.control.markAsTouched();\n\n    this.controlSubscription = this.control.statusChanges.subscribe(() => {\n      this.initChange();\n    });\n  }\n\n  private initChange(): void {\n    if (!this.control) {\n      return;\n    }\n\n    this.checkIfControlInvalid(this.control);\n\n    this.getLabel();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  private checkIfControlInvalid(control: AbstractControl): void {\n    this.controlInvalid = control.touched && control.invalid;\n  }\n\n  private checkIfControlDisabled(control: AbstractControl): void {\n    if (control.disabled || this.options.disabled) {\n      control.disable();\n  \n      this.options.disabled = true;\n    }\n  }\n\n  private getLabel(): void {\n    this.label = '';\n\n    const options = this.options!;\n    const formGroup = options.formGroup;\n    const formControlName = options.formControlName;\n\n    if (formGroup && formControlName && options.errors && this.controlInvalid) {\n      for (const error in options.errors) {\n        if (formGroup.controls[formControlName].hasError(error)) {\n          this.label = options.errors[error];\n\n          return;\n        }\n      }\n\n    }\n  }\n\n}\n","@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label>{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [ipiTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid, 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ label }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <ipi-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [ariaLabel]=\"'Input prefix icon'\"></ipi-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <ipi-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [ariaLabel]=\"'Input suffix icon'\"></ipi-img>\n    }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}