import { ChangeDetectionStrategy, Component, HostListener, Input, Optional, forwardRef, inject, } from '@angular/core';
import { AsyncPipe, DecimalPipe, NgClass } from '@angular/common';
import { InputComponent } from '../input/input.component';
import { provideControlContainer, provideValueAccessor } from '../utils/form.util';
import { integerValidator } from '../utils/validators.util';
import { LabelComponent } from '../label/label.component';
import { IconComponent } from '../../components/atoms/icon/icon.component';
import { FormErrorComponent } from '../error/error.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
export class InputNumberComponent extends InputComponent {
    constructor(formGroupDirective) {
        super(formGroupDirective);
        this.formGroupDirective = formGroupDirective;
        this.decimalPipe = inject(DecimalPipe);
        this.validate = 'integer';
    }
    onFocusOut() {
        this.formatNumber();
        this.triggerTouched();
    }
    onFocusIn() {
        this.reverseFormatNumber();
    }
    ngOnInit() {
        if (this.formControl && this.validate === 'integer')
            this.formControl.addValidators(integerValidator());
    }
    ngAfterViewInit() {
        this.formatNumber();
        this.triggerChangeDetection();
    }
    formatNumber() {
        try {
            this.value = this.decimalPipe.transform(this.value, '1.0-2') || '';
        }
        catch (_error) {
            return;
        }
    }
    reverseFormatNumber() {
        this.value = !isNaN(parseFloat(this.value.replace(/[^0-9.-]/g, '')))
            ? parseFloat(this.value.replace(/[^0-9.-]/g, ''))
            : '';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: InputNumberComponent, deps: [{ token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: InputNumberComponent, isStandalone: true, selector: "ct-input-number", inputs: { validate: "validate" }, host: { listeners: { "focusout": "onFocusOut()", "focusin": "onFocusIn()" } }, providers: [provideValueAccessor(forwardRef(() => InputNumberComponent)), DecimalPipe], 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: "17.3.5", ngImport: i0, type: InputNumberComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-input-number', standalone: true, imports: [NgClass, AsyncPipe, LabelComponent, IconComponent, FormErrorComponent], providers: [provideValueAccessor(forwardRef(() => InputNumberComponent)), DecimalPipe], 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: { validate: [{
                type: Input
            }], onFocusOut: [{
                type: HostListener,
                args: ['focusout']
            }], onFocusIn: [{
                type: HostListener,
                args: ['focusin']
            }] } });
//# sourceMappingURL=data:application/json;base64,[encoded data, 8960 characters]