/* eslint-disable @angular-eslint/no-output-on-prefix */
import { NgClass, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, inject, input, Output, ViewEncapsulation, } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { ButtonComponent } from '@seniorsistemas/angular-components/button';
import { InputMaskDirective } from '@seniorsistemas/angular-components/input-mask';
import { LocaleService } from '@seniorsistemas/angular-components/locale';
import { LocalizedNumberInputModule } from '@seniorsistemas/angular-components/localized-number-input';
import { NumberAlignmentOption, NumberInputModule } from '@seniorsistemas/angular-components/number-input';
import { TooltipDirective } from '@seniorsistemas/angular-components/tooltip';
import { InputTextModule } from 'primeng/inputtext';
import { Subject } from 'rxjs';
import { first, takeUntil } from 'rxjs/operators';
import { FieldLabelComponent } from '../../../components/field-label/field-label.component';
import { FormFieldUtilsService } from '../../../services/form-field-utils.service';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@seniorsistemas/angular-components/localized-number-input";
import * as i3 from "@seniorsistemas/angular-components/number-input";
import * as i4 from "primeng/inputtext";
export class NumberFieldComponent {
    localeService = inject(LocaleService);
    elementRef = inject(ElementRef);
    changeDetectorRef = inject(ChangeDetectorRef);
    field = input.required();
    formControl = input.required();
    fieldUtils = inject(FormFieldUtilsService);
    onInput = new EventEmitter();
    onFocus = new EventEmitter();
    onComplete = new EventEmitter();
    inputRef = null;
    ngUnsubscribe = new Subject();
    ngOnInit() {
        this.onLocaleService();
        this.onFocus.pipe(takeUntil(this.ngUnsubscribe)).subscribe((event) => {
            if (this.field().onFocus) {
                this.field().onFocus?.(event);
            }
        });
        this.onInput.pipe(takeUntil(this.ngUnsubscribe)).subscribe((event) => {
            if (this.field().onInput) {
                this.field().onInput?.(event);
            }
        });
        this.onComplete.pipe(takeUntil(this.ngUnsubscribe)).subscribe((event) => {
            if (this.field().onComplete) {
                this.field().onComplete?.(event);
            }
        });
    }
    ngAfterViewInit() {
        this.setInputRef();
        this.changeDetectorRef.detectChanges();
    }
    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }
    get numberAlignmentOption() {
        return NumberAlignmentOption;
    }
    onLocaleService() {
        const field = this.field();
        this.localeService
            .getLocale()
            .pipe(first())
            .subscribe({
            next: () => {
                if (!field.numberLocaleOptions?.decimalSeparator) {
                    field.numberLocaleOptions = {
                        ...field.numberLocaleOptions,
                        decimalSeparator: this.localeService.getDecimalSeparator() ?? '',
                    };
                }
                if (!field.numberLocaleOptions?.thousandsSeparator) {
                    field.numberLocaleOptions = {
                        ...field.numberLocaleOptions,
                        thousandsSeparator: this.localeService.getGroupingSeparator() ?? '',
                    };
                }
                if (!field.numberLocaleOptions?.currencySymbol) {
                    field.numberLocaleOptions = {
                        ...field.numberLocaleOptions,
                        currencySymbol: 'R$',
                    };
                }
            },
            error: () => (field.numberLocaleOptions = field.numberLocaleOptions ?? {
                thousandsSeparator: '.',
                decimalSeparator: ',',
                currencySymbol: 'R$',
            }),
        });
    }
    setInputRef() {
        const input = this.elementRef.nativeElement.querySelector('input');
        this.inputRef = input;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NumberFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onInput: "onInput", onFocus: "onFocus", onComplete: "onComplete" }, ngImport: i0, template: "@let _field = field();\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef.nativeElement\"\n    />\n}\n\n@let hasMask = !!_field.mask;\n@if (hasMask) {\n    <input\n        pInputText\n        class=\"input-text mousetrap\"\n        type=\"text\"\n        [id]=\"_field.id || _field.name\"\n        [name]=\"_field.name\"\n        [sInputMask]=\"_field.mask ? fieldUtils.getFieldPropertyMask(_field.mask) : undefined\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        slotChar=\"_\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [showDelay]=\"500\"\n        [formControl]=\"formControl()\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (maskComplete)=\"onComplete.next($event)\"\n        (input)=\"onInput.next($event)\"\n    />\n} @else if (!hasMask) {\n    <div class=\"ui-inputgroup\">\n        @if (_field.leftAddon) {\n            @if (_field.leftAddon.callback) {\n                <span class=\"addon-button addon-button--left\">\n                    <s-button\n                        [label]=\"_field.leftAddon.label\"\n                        [iconClass]=\"_field.leftAddon.icon\"\n                        [priority]=\"_field.leftAddon.priority\"\n                        [disabled]=\"fieldUtils.fieldPropertyIsDisabled(_field.leftAddon)\"\n                        (clicked)=\"_field.leftAddon.callback()\"\n                    >\n                    </s-button>\n                </span>\n            }\n            @if (!_field.leftAddon.callback) {\n                <span class=\"ui-inputgroup-addon\">\n                    @if (_field.leftAddon.label) {\n                        <span>{{ _field.leftAddon.label }}</span>\n                    } @else if (!_field.leftAddon.label) {\n                        <span [ngClass]=\"_field.leftAddon.icon\"></span>\n                    }\n                </span>\n            }\n        }\n\n        @if (\n            _field.type === 'legacyNumber' && _field.localizedNumber && _field.alignTo === numberAlignmentOption.LEFT\n        ) {\n            <ng-container *ngTemplateOutlet=\"localizedNumber\"></ng-container>\n        } @else {\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        }\n\n        @if (_field.rightAddon) {\n            @if (_field.rightAddon.callback) {\n                <span class=\"addon-button addon-button--right\">\n                    <s-button\n                        [label]=\"_field.rightAddon.label\"\n                        [iconClass]=\"_field.rightAddon.icon\"\n                        [priority]=\"_field.rightAddon.priority\"\n                        [disabled]=\"fieldUtils.fieldPropertyIsDisabled(_field.rightAddon)\"\n                        (clicked)=\"_field.rightAddon.callback()\"\n                    >\n                    </s-button>\n                </span>\n            }\n            @if (!_field.rightAddon.callback) {\n                <span class=\"ui-inputgroup-addon\">\n                    @if (_field.rightAddon.label) {\n                        {{ _field.rightAddon.label }}\n                    } @else if (!_field.rightAddon.label) {\n                        <span [ngClass]=\"_field.rightAddon.icon\"></span>\n                    }\n                </span>\n            }\n        }\n    </div>\n}\n\n<ng-template #input>\n    <input\n        #inputRef\n        [id]=\"_field.id || _field.name\"\n        type=\"text\"\n        [name]=\"_field.name\"\n        sNumberInput\n        [precision]=\"fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\"\n        [scale]=\"fieldUtils.isFunction(_field.scale) ? fieldUtils.trigger(_field.scale) : _field.scale\"\n        [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator ?? ''\"\n        [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator ?? ''\"\n        [alignTo]=\"_field.alignTo ?? numberAlignmentOption.LEFT\"\n        ;\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder\"\n        [showDelay]=\"500\"\n        pInputText\n        [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        [formControl]=\"formControl()\"\n    />\n</ng-template>\n<ng-template #localizedNumber>\n    <input\n        #inputRef\n        [id]=\"_field.id || _field.name\"\n        type=\"text\"\n        [name]=\"_field.name\"\n        sLocalizedNumberInput\n        [precision]=\"fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\"\n        [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator\"\n        [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder\"\n        [showDelay]=\"500\"\n        pInputText\n        [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        [formControl]=\"formControl()\"\n    />\n</ng-template>\n\n", styles: ["s-number-field.ng-dirty.ng-invalid .ui-inputtext{border-color:#c13018}s-number-field.ng-dirty.ng-invalid .ui-inputtext:hover{border-color:highlight(#c13018)}.addon-button{border:1px solid #c1c1cc}.addon-button s-button button,.addon-button s-button .s-button-with-text{height:100%;min-width:40px}.addon-button--left{border-radius:5px 0 0 5px;border-right:none}.addon-button--left s-button button{border-bottom-right-radius:0;border-top-right-radius:0}.addon-button--right{border-left:none;border-radius:0 5px 5px 0}.addon-button--right s-button button{border-bottom-left-radius:0;border-top-left-radius:0}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "directive", type: InputMaskDirective, selector: "input[sInputMask]", inputs: ["sInputMask", "slotChar", "unmask", "characterPattern", "autoClear"], outputs: ["maskComplete"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }, { kind: "ngmodule", type: LocalizedNumberInputModule }, { kind: "directive", type: i2.LocalizedNumberInputDirective, selector: "input[sLocalizedNumberInput]", inputs: ["decimalSeparator", "thousandsSeparator", "precision"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NumberInputModule }, { kind: "directive", type: i3.NumberInputDirective, selector: "input[sNumberInput]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberFieldComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [
                        FieldLabelComponent,
                        InputMaskDirective,
                        TooltipDirective,
                        ReactiveFormsModule,
                        ButtonComponent,
                        LocalizedNumberInputModule,
                        NgClass,
                        NumberInputModule,
                        NgTemplateOutlet,
                        InputTextModule,
                    ], encapsulation: ViewEncapsulation.None, template: "@let _field = field();\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef.nativeElement\"\n    />\n}\n\n@let hasMask = !!_field.mask;\n@if (hasMask) {\n    <input\n        pInputText\n        class=\"input-text mousetrap\"\n        type=\"text\"\n        [id]=\"_field.id || _field.name\"\n        [name]=\"_field.name\"\n        [sInputMask]=\"_field.mask ? fieldUtils.getFieldPropertyMask(_field.mask) : undefined\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        slotChar=\"_\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [showDelay]=\"500\"\n        [formControl]=\"formControl()\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (maskComplete)=\"onComplete.next($event)\"\n        (input)=\"onInput.next($event)\"\n    />\n} @else if (!hasMask) {\n    <div class=\"ui-inputgroup\">\n        @if (_field.leftAddon) {\n            @if (_field.leftAddon.callback) {\n                <span class=\"addon-button addon-button--left\">\n                    <s-button\n                        [label]=\"_field.leftAddon.label\"\n                        [iconClass]=\"_field.leftAddon.icon\"\n                        [priority]=\"_field.leftAddon.priority\"\n                        [disabled]=\"fieldUtils.fieldPropertyIsDisabled(_field.leftAddon)\"\n                        (clicked)=\"_field.leftAddon.callback()\"\n                    >\n                    </s-button>\n                </span>\n            }\n            @if (!_field.leftAddon.callback) {\n                <span class=\"ui-inputgroup-addon\">\n                    @if (_field.leftAddon.label) {\n                        <span>{{ _field.leftAddon.label }}</span>\n                    } @else if (!_field.leftAddon.label) {\n                        <span [ngClass]=\"_field.leftAddon.icon\"></span>\n                    }\n                </span>\n            }\n        }\n\n        @if (\n            _field.type === 'legacyNumber' && _field.localizedNumber && _field.alignTo === numberAlignmentOption.LEFT\n        ) {\n            <ng-container *ngTemplateOutlet=\"localizedNumber\"></ng-container>\n        } @else {\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        }\n\n        @if (_field.rightAddon) {\n            @if (_field.rightAddon.callback) {\n                <span class=\"addon-button addon-button--right\">\n                    <s-button\n                        [label]=\"_field.rightAddon.label\"\n                        [iconClass]=\"_field.rightAddon.icon\"\n                        [priority]=\"_field.rightAddon.priority\"\n                        [disabled]=\"fieldUtils.fieldPropertyIsDisabled(_field.rightAddon)\"\n                        (clicked)=\"_field.rightAddon.callback()\"\n                    >\n                    </s-button>\n                </span>\n            }\n            @if (!_field.rightAddon.callback) {\n                <span class=\"ui-inputgroup-addon\">\n                    @if (_field.rightAddon.label) {\n                        {{ _field.rightAddon.label }}\n                    } @else if (!_field.rightAddon.label) {\n                        <span [ngClass]=\"_field.rightAddon.icon\"></span>\n                    }\n                </span>\n            }\n        }\n    </div>\n}\n\n<ng-template #input>\n    <input\n        #inputRef\n        [id]=\"_field.id || _field.name\"\n        type=\"text\"\n        [name]=\"_field.name\"\n        sNumberInput\n        [precision]=\"fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\"\n        [scale]=\"fieldUtils.isFunction(_field.scale) ? fieldUtils.trigger(_field.scale) : _field.scale\"\n        [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator ?? ''\"\n        [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator ?? ''\"\n        [alignTo]=\"_field.alignTo ?? numberAlignmentOption.LEFT\"\n        ;\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder\"\n        [showDelay]=\"500\"\n        pInputText\n        [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        [formControl]=\"formControl()\"\n    />\n</ng-template>\n<ng-template #localizedNumber>\n    <input\n        #inputRef\n        [id]=\"_field.id || _field.name\"\n        type=\"text\"\n        [name]=\"_field.name\"\n        sLocalizedNumberInput\n        [precision]=\"fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\"\n        [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator\"\n        [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder\"\n        [showDelay]=\"500\"\n        pInputText\n        [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        [formControl]=\"formControl()\"\n    />\n</ng-template>\n\n", styles: ["s-number-field.ng-dirty.ng-invalid .ui-inputtext{border-color:#c13018}s-number-field.ng-dirty.ng-invalid .ui-inputtext:hover{border-color:highlight(#c13018)}.addon-button{border:1px solid #c1c1cc}.addon-button s-button button,.addon-button s-button .s-button-with-text{height:100%;min-width:40px}.addon-button--left{border-radius:5px 0 0 5px;border-right:none}.addon-button--left s-button button{border-bottom-right-radius:0;border-top-right-radius:0}.addon-button--right{border-left:none;border-radius:0 5px 5px 0}.addon-button--right s-button button{border-bottom-left-radius:0;border-top-left-radius:0}\n"] }]
        }], propDecorators: { onInput: [{
                type: Output
            }], onFocus: [{
                type: Output
            }], onComplete: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 