import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BehaviorSubject, fromEvent, Subject } from 'rxjs';
import { isNullOrUndefined } from '@ironsource/fusion-ui/utils';
import { InlineInputType } from '@ironsource/fusion-ui/components/input-inline';
import { InputComponent } from '@ironsource/fusion-ui/components/input/v4';
import { takeUntil } from 'rxjs/operators';
import { INPUT_INLINE_ERROR_MESSAGES_MAP } from './error-messages.config';
import { LoaderComponent } from '@ironsource/fusion-ui/components/loader/v4';
import { IconModule } from '@ironsource/fusion-ui/components/icon/v1';
import { DropdownComponent } from '@ironsource/fusion-ui/components/dropdown/v4';
import { SkeletonComponent } from '@ironsource/fusion-ui/components/skeleton';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@ironsource/fusion-ui/components/icon/v1";
const _c0 = ["inputComponent"];
const _c1 = ["inputWrapper"];
function InputInlineV4Component_Conditional_0_Case_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 5);
    i0.ɵɵtext(1);
    i0.ɵɵpipe(2, "number");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r1.inputValue, ctx_r1.pipeOptions));
} }
function InputInlineV4Component_Conditional_0_Case_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 5);
    i0.ɵɵtext(1);
    i0.ɵɵpipe(2, "currency");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind4(2, 1, ctx_r1.inputValue, (ctx_r1.currencyPipeParameters == null ? null : ctx_r1.currencyPipeParameters.currencyCode) || undefined, (ctx_r1.currencyPipeParameters == null ? null : ctx_r1.currencyPipeParameters.display) || (ctx_r1.currencyPipeParameters ? undefined : "$"), (ctx_r1.currencyPipeParameters == null ? null : ctx_r1.currencyPipeParameters.digitsInfo) || undefined));
} }
function InputInlineV4Component_Conditional_0_Case_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 5);
    i0.ɵɵtext(1);
    i0.ɵɵpipe(2, "number");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(2, 1, ctx_r1.inputValue, ctx_r1.pipeOptions), "%");
} }
function InputInlineV4Component_Conditional_0_Case_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 6);
    i0.ɵɵtext(1);
    i0.ɵɵelement(2, "fusion-icon", 7);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1("", ctx_r1.dropdownSelectedText, " ");
    i0.ɵɵadvance();
    i0.ɵɵproperty("name", ctx_r1.dropdownIcon);
} }
function InputInlineV4Component_Conditional_0_Case_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 5);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r1.inputValue);
} }
function InputInlineV4Component_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 4);
    i0.ɵɵlistener("click", function InputInlineV4Component_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.goToEditMode()); });
    i0.ɵɵtemplate(1, InputInlineV4Component_Conditional_0_Case_1_Template, 3, 4, "span", 5)(2, InputInlineV4Component_Conditional_0_Case_2_Template, 3, 6, "span", 5)(3, InputInlineV4Component_Conditional_0_Case_3_Template, 3, 4, "span", 5)(4, InputInlineV4Component_Conditional_0_Case_4_Template, 3, 2, "span", 6)(5, InputInlineV4Component_Conditional_0_Case_5_Template, 2, 1, "span", 5);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    let tmp_5_0;
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("fu-read-only", ctx_r1.readOnly || ctx_r1.disabled)("fu-pending", ctx_r1.pending)("fu-number", ctx_r1.isNumber)("fu-dropdown", ctx_r1.isDropdown);
    i0.ɵɵadvance();
    i0.ɵɵconditional((tmp_5_0 = ctx_r1.type) === ctx_r1.InlineInputType.Number ? 1 : tmp_5_0 === ctx_r1.InlineInputType.Currency ? 2 : tmp_5_0 === ctx_r1.InlineInputType.Percent ? 3 : tmp_5_0 === ctx_r1.InlineInputType.Dropdown ? 4 : 5);
} }
function InputInlineV4Component_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "fusion-dropdown", 9);
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("options", ctx_r1.selectOptions)("formControl", ctx_r1.inputControl);
} }
function InputInlineV4Component_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "fusion-input", 12, 1);
    i0.ɵɵlistener("applyButtonClicked", function InputInlineV4Component_Conditional_2_Conditional_3_Template_fusion_input_applyButtonClicked_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.save()); })("keydown.enter", function InputInlineV4Component_Conditional_2_Conditional_3_Template_fusion_input_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.save()); })("keydown.escape", function InputInlineV4Component_Conditional_2_Conditional_3_Template_fusion_input_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cancel()); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("formControl", ctx_r1.inputControl)("type", ctx_r1.inputType)("inlineErrorText", ctx_r1.error)("prefix", ctx_r1.inputPrefix)("suffix", ctx_r1.inputSuffix)("variant", ctx_r1.error ? "error" : null)("showApply", !ctx_r1.error && !ctx_r1.disabled && !ctx_r1.pending)("disabled", ctx_r1.disabled)("hideNumberArrows", ctx_r1.hideNumberArrows);
} }
function InputInlineV4Component_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "fusion-loader", 13);
} if (rf & 2) {
    i0.ɵɵstyleProp("width", "20px")("height", "20px");
} }
function InputInlineV4Component_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 8, 0);
    i0.ɵɵtemplate(2, InputInlineV4Component_Conditional_2_Conditional_2_Template, 1, 2, "fusion-dropdown", 9)(3, InputInlineV4Component_Conditional_2_Conditional_3_Template, 2, 9, "fusion-input", 10)(4, InputInlineV4Component_Conditional_2_Conditional_4_Template, 1, 4, "fusion-loader", 11);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("fu-dropdown", ctx_r1.isDropdown);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r1.isDropdown ? 2 : 3);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r1.pending ? 4 : -1);
} }
export class InputInlineV4Component {
    constructor() {
        this.readOnly = false;
        this.hideNumberArrows = true;
        this.selectOptions = [];
        // eslint-disable-next-line
        this.onSave = new EventEmitter();
        // eslint-disable-next-line
        this.onCancel = new EventEmitter();
        /** @internal */
        this.isEditMode$ = new BehaviorSubject(false);
        /** @internal */
        this.setEditMode$ = new Subject();
        /** @internal */
        this.inputControl = new FormControl();
        /** @internal */
        this.inputValue = '';
        /** @internal */
        this.disabled = false;
        /** @internal */
        this.dropdownIcon = 'ph/caret-down';
        this._type = InlineInputType.Text;
        this._inputType = 'text';
        this.onDestroy$ = new Subject();
        this.stayInEditMode = false;
        this._pending = false;
        this._errorMapping = INPUT_INLINE_ERROR_MESSAGES_MAP;
        this.InlineInputType = InlineInputType;
    }
    set type(value) {
        if (!isNullOrUndefined(value)) {
            this._type = value;
            if (value === InlineInputType.Text || value === InlineInputType.Dropdown) {
                this._inputType = 'text';
            }
            else {
                this._inputType = 'number';
            }
        }
    }
    get type() {
        return this._type;
    }
    get inputType() {
        return this._inputType;
    }
    get isNumber() {
        return this._inputType === 'number';
    }
    get isDropdown() {
        return this.type === InlineInputType.Dropdown;
    }
    get dropdownSelectedText() {
        if (this.isDropdown && Array.isArray(this.inputControl?.value) && this.inputControl?.value.length > 0) {
            return this.inputControl?.value[0]?.displayText;
        }
        return '';
    }
    set pending(value) {
        if (value) {
            this.inputControl.disable({ emitEvent: false });
            this._pending = true;
        }
        else {
            if (!this.disabled) {
                this.inputControl.enable({ emitEvent: false });
            }
            this._pending = false;
        }
    }
    get pending() {
        return this._pending;
    }
    set data(value) {
        this.inputControl = value;
        this.inputValue = this.inputControl.value;
        this.disabled = this.inputControl.disabled;
    }
    get inputPrefix() {
        if (this.type === InlineInputType.Currency) {
            return this.currencyPipeParameters?.display || '$';
        }
        return null;
    }
    get inputSuffix() {
        if (this.type === InlineInputType.Percent) {
            return '%';
        }
        return null;
    }
    set errorMapping(value) {
        if (!isNullOrUndefined(value)) {
            this._errorMapping = value;
        }
    }
    ngOnInit() {
        this.setEditMode$.pipe(takeUntil(this.onDestroy$)).subscribe(this.setEditMode.bind(this));
        this.isEditMode$.asObservable().pipe(takeUntil(this.onDestroy$)).subscribe(this.handleClickOutside.bind(this));
        this.inputControl.statusChanges.pipe(takeUntil(this.onDestroy$)).subscribe(status => {
            this.error = status === 'INVALID' ? this.getErrorMessage(this.inputControl.errors) : null;
        });
    }
    ngOnDestroy() {
        this.onDestroy$.next();
        this.onDestroy$.complete();
    }
    /** @internal */
    save() {
        if (this.isEditMode$.getValue() && this.inputControl.valid) {
            if (this.inputControl.value.toString() !== this.inputValue.toString()) {
                this.onSave.emit({
                    currentValue: this.inputValue,
                    newValue: this.inputControl.value
                });
                this.isEditMode$.next(false);
                this.inputValue = this.inputControl.value;
            }
            else {
                this.cancel();
            }
        }
    }
    /** @internal */
    cancel() {
        if (this.isEditMode$.getValue() && !this.pending) {
            if (!this.stayInEditMode) {
                if (this.isDropdown) {
                    this.handleDropdownSelect();
                }
                else {
                    this.inputControl.setValue(this.inputValue, { emitEvent: false });
                    this.isEditMode$.next(false);
                    this.onCancel.emit();
                }
            }
            else {
                this.stayInEditMode = false;
            }
        }
    }
    /** @internal */
    goToEditMode(withValue) {
        if (!this.disabled && !this.readOnly) {
            this.inputControl.setValue(!isNullOrUndefined(withValue) ? withValue : this.inputValue, { emitEvent: false });
            this.isEditMode$.next(true);
        }
    }
    getErrorMessage(inputError) {
        if (inputError) {
            const errorKey = Object.keys(inputError)[0];
            let errorMessage = `Error: ${errorKey}`;
            if (this._errorMapping[errorKey]) {
                errorMessage = this._errorMapping[errorKey];
                Object.keys(inputError[errorKey]).forEach((find) => {
                    errorMessage = errorMessage.replace(`{${find}}`, inputError[errorKey][find]);
                });
            }
            return errorMessage;
        }
        return null;
    }
    handleDropdownSelect() {
        if (this.inputControl.value === this.inputValue) {
            this.isEditMode$.next(false);
        }
        else {
            this.onSave.emit({
                currentValue: this.inputValue,
                newValue: this.inputControl.value
            });
            this.isEditMode$.next(false);
            this.inputValue = this.inputControl.value;
        }
    }
    setEditMode(val) {
        if (!!val) {
            this.goToEditMode(val);
            this.stayInEditMode = true;
        }
    }
    setFocusToInput() {
        setTimeout(() => {
            if (this.type === InlineInputType.Dropdown) {
                const dropdownTrigger = this.inputWrapper.nativeElement.querySelector('fusion-dropdown-select');
                if (!!dropdownTrigger) {
                    dropdownTrigger.click();
                }
            }
            else {
                this.inputComponent.setFocus();
            }
        }, 0);
    }
    handleClickOutside(value) {
        if (value) {
            this.setFocusToInput();
            this.clickOutSideSubscription = fromEvent(document, 'click').subscribe((event) => {
                const clickedInside = this.isClickInside(event);
                if (!clickedInside && !this.stayInEditMode) {
                    this.cancel();
                }
            });
        }
        else {
            this.clickOutSideSubscription?.unsubscribe();
        }
    }
    isClickInside(event) {
        if (event.clientX === 0 && event.clientY === 0) {
            return !!event.target.closest('fusion-input-inline');
        }
        const parentRect = this.inputWrapper.nativeElement.getBoundingClientRect();
        return (parentRect.left <= event.clientX &&
            parentRect.right >= event.clientX &&
            parentRect.top <= event.clientY &&
            parentRect.bottom >= event.clientY);
    }
    static { this.ɵfac = function InputInlineV4Component_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InputInlineV4Component)(); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputInlineV4Component, selectors: [["fusion-input-inline"]], viewQuery: function InputInlineV4Component_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 5);
            i0.ɵɵviewQuery(_c1, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputComponent = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputWrapper = _t.first);
        } }, hostAttrs: [1, "fusion-v4"], inputs: { type: "type", readOnly: "readOnly", pending: "pending", currencyPipeParameters: "currencyPipeParameters", pipeOptions: "pipeOptions", data: "data", error: "error", errorMapping: "errorMapping", hideNumberArrows: "hideNumberArrows", selectOptions: "selectOptions" }, outputs: { onSave: "onSave", onCancel: "onCancel" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 3, vars: 3, consts: [["inputWrapper", ""], ["inputComponent", ""], [1, "fu-edit-value-wrapper", 3, "fu-read-only", "fu-pending", "fu-number", "fu-dropdown"], [1, "fu-edit-input-wrapper", 3, "fu-dropdown"], [1, "fu-edit-value-wrapper", 3, "click"], [1, "fu-edit-value"], [1, "fu-edit-value", "truncate"], [1, "fu-dropdown-icon", 3, "name"], [1, "fu-edit-input-wrapper"], [3, "options", "formControl"], [3, "formControl", "type", "inlineErrorText", "prefix", "suffix", "variant", "showApply", "disabled", "hideNumberArrows"], ["strokeWidth", "1", 3, "width", "height"], [3, "applyButtonClicked", "keydown.enter", "keydown.escape", "formControl", "type", "inlineErrorText", "prefix", "suffix", "variant", "showApply", "disabled", "hideNumberArrows"], ["strokeWidth", "1"]], template: function InputInlineV4Component_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵtemplate(0, InputInlineV4Component_Conditional_0_Template, 6, 9, "div", 2);
            i0.ɵɵpipe(1, "async");
            i0.ɵɵtemplate(2, InputInlineV4Component_Conditional_2_Template, 5, 4, "div", 3);
        } if (rf & 2) {
            i0.ɵɵconditional(i0.ɵɵpipeBind1(1, 1, ctx.isEditMode$) === false ? 0 : 2);
        } }, dependencies: [CommonModule, i1.AsyncPipe, i1.DecimalPipe, i1.CurrencyPipe, FormsModule, i2.NgControlStatus, ReactiveFormsModule, i2.FormControlDirective, InputComponent,
            LoaderComponent,
            IconModule, i3.IconComponent, DropdownComponent], styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.font-v4-bold[_ngcontent-%COMP%], .font-v4-tab-label-2[_ngcontent-%COMP%], .font-v4-chart-2[_ngcontent-%COMP%], .font-v4-chart-1[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased}.font-v4-semibold[_ngcontent-%COMP%], .font-v4-chip-label[_ngcontent-%COMP%], .font-v4-table-label[_ngcontent-%COMP%], .font-v4-button[_ngcontent-%COMP%], .font-v4-heading-6[_ngcontent-%COMP%], .font-v4-heading-5[_ngcontent-%COMP%], .font-v4-heading-4[_ngcontent-%COMP%], .font-v4-heading-3[_ngcontent-%COMP%], .font-v4-heading-2[_ngcontent-%COMP%], .font-v4-heading-1[_ngcontent-%COMP%], .font-v4-title[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:600;-webkit-font-smoothing:antialiased}.font-v4-medium[_ngcontent-%COMP%], .font-v4-tab-label-1[_ngcontent-%COMP%], .font-v4-input-label[_ngcontent-%COMP%], .font-v4-overline[_ngcontent-%COMP%], .font-v4-subtitle-2[_ngcontent-%COMP%], .font-v4-subtitle-1[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}.font-v4-regular[_ngcontent-%COMP%], .font-v4-caption[_ngcontent-%COMP%], .font-v4-body-2[_ngcontent-%COMP%], [_nghost-%COMP%]   .fu-edit-value-wrapper[_ngcontent-%COMP%], .font-v4-body-1[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}.font-v4-title[_ngcontent-%COMP%]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-v4-heading-1[_ngcontent-%COMP%]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-v4-heading-2[_ngcontent-%COMP%]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-v4-heading-3[_ngcontent-%COMP%]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-v4-heading-4[_ngcontent-%COMP%]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-v4-heading-5[_ngcontent-%COMP%]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-v4-heading-6[_ngcontent-%COMP%]{font-size:.75rem;line-height:.75rem;letter-spacing:0}[_nghost-%COMP%]   .fu-edit-value-wrapper[_ngcontent-%COMP%], .font-v4-body-1[_ngcontent-%COMP%]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-body-2[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-subtitle-1[_ngcontent-%COMP%]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-subtitle-2[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-chart-1[_ngcontent-%COMP%]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-v4-chart-2[_ngcontent-%COMP%]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-v4-button[_ngcontent-%COMP%]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-v4-overline[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-v4-caption[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem}.font-v4-table-label[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-v4-input-label[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-v4-tab-label-1[_ngcontent-%COMP%], .font-v4-tab-label-2[_ngcontent-%COMP%]{font-size:.875rem;line-height:1rem}.font-v4-chip-label[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem;letter-spacing:normal}[_nghost-%COMP%]   *[_ngcontent-%COMP%]{box-sizing:border-box}[_nghost-%COMP%]{margin:0;padding:0;vertical-align:initial;text-align:initial}[_nghost-%COMP%]   .truncate[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes _ngcontent-%COMP%_rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes _ngcontent-%COMP%_shineAnimation{0%{background-position:-750px 0}to{background-position:750px 0}}[_nghost-%COMP%]{--inline-edit-value-height: 28px;--inline-edit-value-padding: 0 8px;--inline-edit-value-color: var(--table-text-color, hsl(0, 0%, 12.5%));--dropdown-carret-icon-color: var(--action-active, hsl(0, 0%, 50.3%));--dropdown-carret-icon-size: 20px;width:var(--inline-edit-width, 100%)}[_nghost-%COMP%]   .fu-edit-value-wrapper[_ngcontent-%COMP%]{display:flex;align-items:center;height:var(--inline-edit-value-height);padding:var(--inline-edit-value-padding);color:var(--inline-edit-value-color)}[_nghost-%COMP%]   .fu-edit-value-wrapper[_ngcontent-%COMP%]:hover:not(.fu-read-only){border-radius:6px;outline:1px solid var(--action-outlinedBorder, hsl(0, 0%, 73%));background-color:var(--default-main, hsl(0, 0%, 94.51%));cursor:text}[_nghost-%COMP%]   .fu-edit-value-wrapper[_ngcontent-%COMP%]:hover:not(.fu-read-only).fu-dropdown   .fu-edit-value[_ngcontent-%COMP%]   .fu-dropdown-icon[_ngcontent-%COMP%]{visibility:visible}[_nghost-%COMP%]   .fu-edit-value-wrapper.fu-number[_ngcontent-%COMP%]{justify-content:flex-end}[_nghost-%COMP%]   .fu-edit-value-wrapper.fu-dropdown[_ngcontent-%COMP%]   .fu-edit-value[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%}[_nghost-%COMP%]   .fu-edit-value-wrapper.fu-dropdown[_ngcontent-%COMP%]   .fu-edit-value[_ngcontent-%COMP%]   .fu-dropdown-icon[_ngcontent-%COMP%]{margin-left:auto;color:var(--dropdown-carret-icon-color);width:var(--dropdown-carret-icon-size);height:var(--dropdown-carret-icon-size);visibility:hidden}[_nghost-%COMP%]   .fu-edit-value-wrapper.fu-read-only[_ngcontent-%COMP%]{cursor:default}[_nghost-%COMP%]   .fu-edit-value-wrapper.fu-pending[_ngcontent-%COMP%]{opacity:var(--table-row-loading-opacity, .7)}[_nghost-%COMP%]   .fu-hidden[_ngcontent-%COMP%]{display:none}[_nghost-%COMP%]   .fu-edit-input-wrapper[_ngcontent-%COMP%]{position:relative}[_nghost-%COMP%]   .fu-edit-input-wrapper[_ngcontent-%COMP%]   fusion-loader[_ngcontent-%COMP%]{position:absolute;right:5px;top:3px}tr:hover[_nghost-%COMP%]   .fu-edit-value-wrapper[_ngcontent-%COMP%]:not(.fu-read-only), tr:hover   [_nghost-%COMP%]   .fu-edit-value-wrapper[_ngcontent-%COMP%]:not(.fu-read-only){border-radius:6px;outline:1px solid var(--action-outlinedBorder, hsl(0, 0%, 73%));background-color:var(--default-main, hsl(0, 0%, 94.51%));cursor:text}tr:hover[_nghost-%COMP%]   .fu-edit-value-wrapper[_ngcontent-%COMP%]:not(.fu-read-only).fu-dropdown   .fu-edit-value[_ngcontent-%COMP%]   .fu-dropdown-icon[_ngcontent-%COMP%], tr:hover   [_nghost-%COMP%]   .fu-edit-value-wrapper[_ngcontent-%COMP%]:not(.fu-read-only).fu-dropdown   .fu-edit-value[_ngcontent-%COMP%]   .fu-dropdown-icon[_ngcontent-%COMP%]{visibility:visible}"], changeDetection: 0 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputInlineV4Component, [{
        type: Component,
        args: [{ selector: 'fusion-input-inline', standalone: true, host: { class: 'fusion-v4' }, imports: [
                    CommonModule,
                    FormsModule,
                    ReactiveFormsModule,
                    InputComponent,
                    LoaderComponent,
                    IconModule,
                    DropdownComponent,
                    SkeletonComponent
                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ((isEditMode$ | async) === false) {\n    <div class=\"fu-edit-value-wrapper\"\n         [class.fu-read-only]=\"readOnly || disabled\"\n         [class.fu-pending]=\"pending\"\n         [class.fu-number]=\"isNumber\"\n         [class.fu-dropdown]=\"isDropdown\"\n         (click)=\"goToEditMode()\"\n    >\n        @switch (type) {\n            @case (InlineInputType.Number) {\n                <span class=\"fu-edit-value\">{{ inputValue | number: pipeOptions }}</span>\n            }\n            @case (InlineInputType.Currency) {\n                <span class=\"fu-edit-value\">{{ inputValue | currency\n                    : currencyPipeParameters?.currencyCode || undefined\n                    : currencyPipeParameters?.display || (currencyPipeParameters ? undefined : '$')\n                    : currencyPipeParameters?.digitsInfo || undefined }}</span>\n            }\n            @case (InlineInputType.Percent) {\n                <span class=\"fu-edit-value\">{{ inputValue | number: pipeOptions }}%</span>\n            }\n            @case (InlineInputType.Dropdown) {\n                <span class=\"fu-edit-value truncate\">{{ dropdownSelectedText }} <fusion-icon class=\"fu-dropdown-icon\" [name]=\"dropdownIcon\"></fusion-icon></span>\n            }\n            @default{\n                <span class=\"fu-edit-value\">{{ inputValue }}</span>\n            }\n        }\n    </div>\n} @else {\n    <div class=\"fu-edit-input-wrapper\"  #inputWrapper [class.fu-dropdown]=\"isDropdown\">\n        @if (isDropdown){\n            <fusion-dropdown\n                    [options]=\"selectOptions\"\n                    [formControl]=\"inputControl\"\n            ></fusion-dropdown>\n        } @else {\n            <fusion-input #inputComponent\n                          [formControl]=\"inputControl\"\n                          [type]=\"inputType\"\n                          [inlineErrorText]=\"error\"\n                          [prefix]=\"inputPrefix\"\n                          [suffix]=\"inputSuffix\"\n                          [variant]=\"error ? 'error' : null\"\n                          [showApply]=\"!error && !disabled && !pending\"\n                          [disabled]=\"disabled\"\n                          [hideNumberArrows]=\"hideNumberArrows\"\n                          (applyButtonClicked)=\"save()\"\n                          (keydown.enter)=\"save()\"\n                          (keydown.escape)=\"cancel()\"\n            ></fusion-input>\n        }\n        @if (pending){\n            <fusion-loader\n                    [style.width]=\"'20px'\"\n                    [style.height]=\"'20px'\"\n                    strokeWidth=\"1\"\n            ></fusion-loader>\n        }\n    </div>\n}\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.font-v4-bold,.font-v4-tab-label-2,.font-v4-chart-2,.font-v4-chart-1{font-family:Inter,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased}.font-v4-semibold,.font-v4-chip-label,.font-v4-table-label,.font-v4-button,.font-v4-heading-6,.font-v4-heading-5,.font-v4-heading-4,.font-v4-heading-3,.font-v4-heading-2,.font-v4-heading-1,.font-v4-title{font-family:Inter,sans-serif;font-weight:600;-webkit-font-smoothing:antialiased}.font-v4-medium,.font-v4-tab-label-1,.font-v4-input-label,.font-v4-overline,.font-v4-subtitle-2,.font-v4-subtitle-1{font-family:Inter,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}.font-v4-regular,.font-v4-caption,.font-v4-body-2,:host .fu-edit-value-wrapper,.font-v4-body-1{font-family:Inter,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}.font-v4-title{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-v4-heading-1{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-v4-heading-2{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-v4-heading-3{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-v4-heading-4{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-v4-heading-5{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-v4-heading-6{font-size:.75rem;line-height:.75rem;letter-spacing:0}:host .fu-edit-value-wrapper,.font-v4-body-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-body-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-subtitle-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-subtitle-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-chart-1{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-v4-chart-2{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-v4-button{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-v4-overline{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-v4-caption{font-size:.75rem;line-height:1rem}.font-v4-table-label{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-v4-input-label{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-v4-tab-label-1,.font-v4-tab-label-2{font-size:.875rem;line-height:1rem}.font-v4-chip-label{font-size:.75rem;line-height:1rem;letter-spacing:normal}:host *{box-sizing:border-box}:host{margin:0;padding:0;vertical-align:initial;text-align:initial}:host .truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes shineAnimation{0%{background-position:-750px 0}to{background-position:750px 0}}:host{--inline-edit-value-height: 28px;--inline-edit-value-padding: 0 8px;--inline-edit-value-color: var(--table-text-color, hsl(0, 0%, 12.5%));--dropdown-carret-icon-color: var(--action-active, hsl(0, 0%, 50.3%));--dropdown-carret-icon-size: 20px;width:var(--inline-edit-width, 100%)}:host .fu-edit-value-wrapper{display:flex;align-items:center;height:var(--inline-edit-value-height);padding:var(--inline-edit-value-padding);color:var(--inline-edit-value-color)}:host .fu-edit-value-wrapper:hover:not(.fu-read-only){border-radius:6px;outline:1px solid var(--action-outlinedBorder, hsl(0, 0%, 73%));background-color:var(--default-main, hsl(0, 0%, 94.51%));cursor:text}:host .fu-edit-value-wrapper:hover:not(.fu-read-only).fu-dropdown .fu-edit-value .fu-dropdown-icon{visibility:visible}:host .fu-edit-value-wrapper.fu-number{justify-content:flex-end}:host .fu-edit-value-wrapper.fu-dropdown .fu-edit-value{display:flex;align-items:center;width:100%}:host .fu-edit-value-wrapper.fu-dropdown .fu-edit-value .fu-dropdown-icon{margin-left:auto;color:var(--dropdown-carret-icon-color);width:var(--dropdown-carret-icon-size);height:var(--dropdown-carret-icon-size);visibility:hidden}:host .fu-edit-value-wrapper.fu-read-only{cursor:default}:host .fu-edit-value-wrapper.fu-pending{opacity:var(--table-row-loading-opacity, .7)}:host .fu-hidden{display:none}:host .fu-edit-input-wrapper{position:relative}:host .fu-edit-input-wrapper fusion-loader{position:absolute;right:5px;top:3px}:host-context(tr:hover) .fu-edit-value-wrapper:not(.fu-read-only){border-radius:6px;outline:1px solid var(--action-outlinedBorder, hsl(0, 0%, 73%));background-color:var(--default-main, hsl(0, 0%, 94.51%));cursor:text}:host-context(tr:hover) .fu-edit-value-wrapper:not(.fu-read-only).fu-dropdown .fu-edit-value .fu-dropdown-icon{visibility:visible}\n"] }]
    }], null, { inputComponent: [{
            type: ViewChild,
            args: ['inputComponent']
        }], inputWrapper: [{
            type: ViewChild,
            args: ['inputWrapper']
        }], type: [{
            type: Input
        }], readOnly: [{
            type: Input
        }], pending: [{
            type: Input
        }], currencyPipeParameters: [{
            type: Input
        }], pipeOptions: [{
            type: Input
        }], data: [{
            type: Input
        }], error: [{
            type: Input
        }], errorMapping: [{
            type: Input
        }], hideNumberArrows: [{
            type: Input
        }], selectOptions: [{
            type: Input
        }], onSave: [{
            type: Output
        }], onCancel: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputInlineV4Component, { className: "InputInlineV4Component", filePath: "input-inline-v4.component.ts", lineNumber: 36 }); })();
//# sourceMappingURL=data:application/json;base64, 