import * as i2 from '@acorex/components/button';
import { AXButtonModule } from '@acorex/components/button';
import * as i3 from '@acorex/components/code-editor';
import { AXCodeEditorModule } from '@acorex/components/code-editor';
import * as i2$1 from '@acorex/components/decorators';
import { AXDecoratorModule } from '@acorex/components/decorators';
import { AXBasePageComponent } from '@acorex/components/page';
import * as i5 from '@acorex/core/translation';
import { AXTranslationModule } from '@acorex/core/translation';
import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { input, linkedSignal, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';

/**
 * Popup for editing a binding/expression string (e.g. `{{ context.eval('x') }}`).
 * Mirrors the trigger expression editor UX: code editor with Save/Cancel.
 */
class AXPBindingExpressionEditorPopupComponent extends AXBasePageComponent {
    constructor() {
        super(...arguments);
        //#region ----   Inputs   ----
        /** Use a distinct name to avoid popup 'data.value' overwriting the input signal. */
        this.initialValue = input.required(...(ngDevMode ? [{ debugName: "initialValue" }] : []));
        //#endregion
        //#region ----   Properties   ----
        this.currentValue = linkedSignal(() => (this.initialValue() ?? ''), ...(ngDevMode ? [{ debugName: "currentValue" }] : []));
    }
    //#endregion
    //#region ----   Event Handlers   ----
    handleValueChange(newValue) {
        this.currentValue.set(newValue);
    }
    handleCancelClick() {
        this.close();
    }
    handleSaveClick() {
        this.close({
            value: this.currentValue(),
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPBindingExpressionEditorPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: AXPBindingExpressionEditorPopupComponent, isStandalone: true, selector: "axp-binding-expression-editor-popup", inputs: { initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
        <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
            <div class="ax-flex-1 ax-p-4 ax-overflow-hidden" style="direction: ltr;">
                <ax-code-editor
                    [ngModel]="currentValue()"
                    (ngModelChange)="handleValueChange($event)"
                    language="javascript"
                    [lineNumbers]="true"
                    class="ax-w-full ax-h-full ax-min-h-96"
                ></ax-code-editor>
            </div>
        </div>

        <ax-footer>
            <ax-suffix>
                <ax-button
                    look="solid"
                    [text]="'@general:actions.cancel.title' | translate | async"
                    (onClick)="handleCancelClick()"
                ></ax-button>
                <ax-button
                    look="solid"
                    color="primary"
                    [text]="'@general:actions.save.title' | translate | async"
                    (onClick)="handleSaveClick()"
                ></ax-button>
            </ax-suffix>
        </ax-footer>
    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXCodeEditorModule }, { kind: "component", type: i3.AXCodeEditorComponent, selector: "ax-code-editor", inputs: ["disabled", "value", "state", "name", "id", "language", "readonly", "placeholder", "lineNumbers", "lineWrapping", "tabSize", "indentWithTab", "theme", "extensions", "ariaLabel", "focusOnReady", "formatOnSave", "minRow", "customCompletions"], outputs: ["onValueChanged", "valueChange", "stateChange", "readonlyChange", "disabledChange", "ready", "save"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPBindingExpressionEditorPopupComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'axp-binding-expression-editor-popup',
                    template: `
        <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
            <div class="ax-flex-1 ax-p-4 ax-overflow-hidden" style="direction: ltr;">
                <ax-code-editor
                    [ngModel]="currentValue()"
                    (ngModelChange)="handleValueChange($event)"
                    language="javascript"
                    [lineNumbers]="true"
                    class="ax-w-full ax-h-full ax-min-h-96"
                ></ax-code-editor>
            </div>
        </div>

        <ax-footer>
            <ax-suffix>
                <ax-button
                    look="solid"
                    [text]="'@general:actions.cancel.title' | translate | async"
                    (onClick)="handleCancelClick()"
                ></ax-button>
                <ax-button
                    look="solid"
                    color="primary"
                    [text]="'@general:actions.save.title' | translate | async"
                    (onClick)="handleSaveClick()"
                ></ax-button>
            </ax-suffix>
        </ax-footer>
    `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    imports: [
                        CommonModule,
                        FormsModule,
                        AXButtonModule,
                        AXCodeEditorModule,
                        AXDecoratorModule,
                        AXTranslationModule,
                    ],
                }]
        }], propDecorators: { initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: true }] }] } });

export { AXPBindingExpressionEditorPopupComponent };
//# sourceMappingURL=acorex-platform-layout-components-binding-expression-editor-popup.component-ZnTG7wlJ.mjs.map
