import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Optional, Output, forwardRef, } from '@angular/core';
import { AsyncPipe, NgClass } from '@angular/common';
import { provideControlContainer, provideValueAccessor } from '../utils/form.util';
import { FormGenericComponent } from '../../services/form-generic.abstract';
import { FormErrorComponent } from '../error/error.component';
import { LabelComponent } from '../label/label.component';
import { IconComponent } from '../../components/atoms/icon/icon.component';
import { BehaviorSubject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
export class InputComponent extends FormGenericComponent {
    onFocusOut() {
        this.triggerTouched();
    }
    constructor(formGroupDirective) {
        super(formGroupDirective);
        this.formGroupDirective = formGroupDirective;
        this.key = '';
        this.type = 'text';
        this.value = '';
        this.label = '';
        this.icon = '';
        this.helper = '';
        this.placeholder = '';
        this.symbol = '';
        this.canDelete = false;
        this.fullSize = true;
        this.showError = false;
        this.iconPosition = 'left';
        this.disposition = 'vertical';
        this.typed = new EventEmitter();
        this.showDelete$ = new BehaviorSubject(false);
    }
    input(event) {
        const value = event.target.value;
        if (this.canDelete) {
            this.showDelete$.next(!!value);
        }
        this.setValue(value);
    }
    clearValue() {
        this.showDelete$.next(false);
        this.triggerTouched();
        this.setValue(null);
    }
    setValue(value, propagate = true) {
        this.value = value;
        if (propagate) {
            this.triggerChange(value);
            this.typed.emit(value);
        }
    }
    writeValue(value) {
        if (value && this.canDelete)
            this.showDelete$.next(true);
        this.triggerMarkCheck();
        this.setValue(value, false);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, deps: [{ token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InputComponent, isStandalone: true, selector: "ct-input", inputs: { formControlName: "formControlName", key: "key", type: "type", value: "value", label: "label", icon: "icon", helper: "helper", placeholder: "placeholder", symbol: "symbol", canDelete: "canDelete", fullSize: "fullSize", showError: "showError", min: "min", max: "max", iconPosition: "iconPosition", disposition: "disposition" }, outputs: { typed: "typed" }, host: { listeners: { "focusout": "onFocusOut()" } }, providers: [provideValueAccessor(forwardRef(() => InputComponent))], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"flex\"\n  [class.w-fit]=\"!fullSize\"\n  [class.w-full]=\"fullSize\"\n  [ngClass]=\"{\n    'items-center gap-4': disposition === 'horizontal',\n    'flex-col gap-0.5 items-start': disposition === 'vertical'\n  }\">\n  @if (label) {\n    <ct-form-label [text]=\"label\" [hasError]=\"hasErrors(formControl)\" [showError]=\"showError\" />\n  }\n  <div\n    class=\"relative inline-block rounded-md text-on-surface dark:text-on-surface-dark\"\n    [class.w-fit]=\"!fullSize\"\n    [class.w-full]=\"fullSize\">\n    <input\n      tabindex=\"0\"\n      [type]=\"type\"\n      [min]=\"min\"\n      [max]=\"max\"\n      class=\"h-9 rounded-md border bg-primary-50 font-primary text-sm outline-primary hover:border-neutral-600 dark:bg-primary-950 dark:outline-primary-dark focus:dark:border-primary-dark\"\n      [class.px-4]=\"!icon || !symbol\"\n      [ngClass]=\"{\n        'px-4': !icon,\n        'pr-4 pl-10': icon && iconPosition === 'left',\n        'pl-4 pr-10': (icon && iconPosition === 'right') || symbol || canDelete\n      }\"\n      [class.w-fit]=\"!fullSize\"\n      [class.w-full]=\"fullSize\"\n      [class.border-neutral-300]=\"!hasErrors(formControl) || !showError\"\n      [class.border-error]=\"hasErrors(formControl) && showError\"\n      [class.border-success]=\"formControl && formControl.valid && showError\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      (input)=\"input($event)\" />\n    @if (icon) {\n      <ct-icon\n        class=\"absolute top-2\"\n        [class.left-3]=\"iconPosition === 'left'\"\n        [class.right-3]=\"iconPosition === 'right'\"\n        [icon]=\"icon\" />\n    }\n    @if (symbol) {\n      <span class=\"absolute right-3 top-2.5 text-xs text-neutral-600 dark:text-neutral-300\">{{ symbol }}</span>\n    }\n    @if (showDelete$ | async) {\n      <ct-icon class=\"absolute right-3 top-2.5 cursor-pointer\" icon=\"x-mark\" size=\"sm\" (click)=\"clearValue()\" />\n    }\n  </div>\n  @if (formControl) {\n    <ct-form-alert\n      [fullSize]=\"fullSize\"\n      [hasErrors]=\"hasErrors(formControl)\"\n      [helper]=\"helper\"\n      [errors]=\"formControl.errors ?? {}\"\n      size=\"xs\" />\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LabelComponent, selector: "ct-form-label", inputs: ["text", "type", "formControlName", "hasError", "showError"] }, { kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "fill", "strokeWidth", "strokeColor", "size", "variant"] }, { kind: "component", type: FormErrorComponent, selector: "ct-form-alert", inputs: ["errors", "size", "hasErrors", "fullSize", "helper", "errorMessages"] }], viewProviders: [provideControlContainer()], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-input', standalone: true, imports: [NgClass, AsyncPipe, LabelComponent, IconComponent, FormErrorComponent], providers: [provideValueAccessor(forwardRef(() => InputComponent))], viewProviders: [provideControlContainer()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex\"\n  [class.w-fit]=\"!fullSize\"\n  [class.w-full]=\"fullSize\"\n  [ngClass]=\"{\n    'items-center gap-4': disposition === 'horizontal',\n    'flex-col gap-0.5 items-start': disposition === 'vertical'\n  }\">\n  @if (label) {\n    <ct-form-label [text]=\"label\" [hasError]=\"hasErrors(formControl)\" [showError]=\"showError\" />\n  }\n  <div\n    class=\"relative inline-block rounded-md text-on-surface dark:text-on-surface-dark\"\n    [class.w-fit]=\"!fullSize\"\n    [class.w-full]=\"fullSize\">\n    <input\n      tabindex=\"0\"\n      [type]=\"type\"\n      [min]=\"min\"\n      [max]=\"max\"\n      class=\"h-9 rounded-md border bg-primary-50 font-primary text-sm outline-primary hover:border-neutral-600 dark:bg-primary-950 dark:outline-primary-dark focus:dark:border-primary-dark\"\n      [class.px-4]=\"!icon || !symbol\"\n      [ngClass]=\"{\n        'px-4': !icon,\n        'pr-4 pl-10': icon && iconPosition === 'left',\n        'pl-4 pr-10': (icon && iconPosition === 'right') || symbol || canDelete\n      }\"\n      [class.w-fit]=\"!fullSize\"\n      [class.w-full]=\"fullSize\"\n      [class.border-neutral-300]=\"!hasErrors(formControl) || !showError\"\n      [class.border-error]=\"hasErrors(formControl) && showError\"\n      [class.border-success]=\"formControl && formControl.valid && showError\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      (input)=\"input($event)\" />\n    @if (icon) {\n      <ct-icon\n        class=\"absolute top-2\"\n        [class.left-3]=\"iconPosition === 'left'\"\n        [class.right-3]=\"iconPosition === 'right'\"\n        [icon]=\"icon\" />\n    }\n    @if (symbol) {\n      <span class=\"absolute right-3 top-2.5 text-xs text-neutral-600 dark:text-neutral-300\">{{ symbol }}</span>\n    }\n    @if (showDelete$ | async) {\n      <ct-icon class=\"absolute right-3 top-2.5 cursor-pointer\" icon=\"x-mark\" size=\"sm\" (click)=\"clearValue()\" />\n    }\n  </div>\n  @if (formControl) {\n    <ct-form-alert\n      [fullSize]=\"fullSize\"\n      [hasErrors]=\"hasErrors(formControl)\"\n      [helper]=\"helper\"\n      [errors]=\"formControl.errors ?? {}\"\n      size=\"xs\" />\n  }\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.FormGroupDirective, decorators: [{
                    type: Optional
                }] }], propDecorators: { formControlName: [{
                type: Input
            }], key: [{
                type: Input
            }], type: [{
                type: Input
            }], value: [{
                type: Input
            }], label: [{
                type: Input
            }], icon: [{
                type: Input
            }], helper: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], symbol: [{
                type: Input
            }], canDelete: [{
                type: Input
            }], fullSize: [{
                type: Input
            }], showError: [{
                type: Input
            }], min: [{
                type: Input
            }], max: [{
                type: Input
            }], iconPosition: [{
                type: Input
            }], disposition: [{
                type: Input
            }], typed: [{
                type: Output
            }], onFocusOut: [{
                type: HostListener,
                args: ['focusout']
            }] } });
//# sourceMappingURL=data:application/json;base64,[encoded data, 10552 characters]