import * as i0 from '@angular/core';
import { input, booleanAttribute, output, inject, ElementRef, Injector, runInInjectionContext, effect, ChangeDetectionStrategy, Component } from '@angular/core';
import '@ui5/webcomponents/dist/StepInput.js';

class StepInput {
    constructor() {
        /**
         * Defines a value of the component.
         */
        this.value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
        /**
         * Defines a minimum value of the component.
         */
        this.min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
        /**
         * Defines a maximum value of the component.
         */
        this.max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
        /**
         * Defines a step of increasing/decreasing the value of the component.
         */
        this.step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
        /**
         * Defines the value state of the component.
         */
        this.valueState = input("None", ...(ngDevMode ? [{ debugName: "valueState" }] : []));
        /**
         * Defines whether the component is required.
         */
        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Determines whether the component is displayed as disabled.
         */
        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Determines whether the component is displayed as read-only.
         */
        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Defines a short hint, intended to aid the user with data entry when the
      component has no value.
      
      **Note:** When no placeholder is set, the format pattern is displayed as a placeholder.
      Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.
         */
        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
        /**
         * Determines the name by which the component will be identified upon submission in an HTML form.
      
      **Note:** This property is only applicable within the context of an HTML Form element.
         */
        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
        /**
         * Determines the number of digits after the decimal point of the component.
         */
        this.valuePrecision = input(0, ...(ngDevMode ? [{ debugName: "valuePrecision" }] : []));
        /**
         * Defines the accessible ARIA name of the component.
         */
        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : []));
        /**
         * Receives id(or many ids) of the elements that label the component.
         */
        this.accessibleNameRef = input(...(ngDevMode ? [undefined, { debugName: "accessibleNameRef" }] : [])); // className is now passed
        /**
         * Fired when the input operation has finished by pressing Enter or on focusout.
         */
        this.ui5Change = output();
        /**
         * Fired when the value of the component changes at each keystroke.
         */
        this.ui5Input = output();
        /**
         * Fired before the value state of the component is updated internally.
      The event is preventable, meaning that if it's default action is
      prevented, the component will not update the value state.
         */
        this.ui5ValueStateChange = output();
        /**
         * Available slots for content projection in this component.
         *
         * Slots allow you to insert custom content into predefined areas of the web component.
         * Use the `slot` attribute on child elements to target specific slots.
         *
         * - **valueStateMessage**: Defines the value state message that will be displayed as pop up under the component.
      
      **Note:** If not specified, a default text (in the respective language) will be displayed.
      
      **Note:** The `valueStateMessage` would be displayed,
      when the component is in `Information`, `Critical` or `Negative` value state.
         *
         * @example
         * ```html
         * <ui5-step-input>
         *   <div slot="header">Custom header content</div>
         *   <p>Default slot content</p>
         * </ui5-step-input>
         * ```
         *
         * @readonly
         * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
         */
        this.slots = [
            {
                "name": "valueStateMessage",
                "description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state."
            }
        ];
        this.elementRef = inject(ElementRef);
        this.injector = inject(Injector);
    }
    get element() {
        return this.elementRef.nativeElement;
    }
    ngAfterViewInit() {
        const wcElement = this.element;
        const inputsToSync = [
            'value',
            'min',
            'max',
            'step',
            'valueState',
            'required',
            'disabled',
            'readonly',
            'placeholder',
            'name',
            'valuePrecision',
            'accessibleName',
            'accessibleNameRef',
        ];
        // Synchronize inputs (properties)
        for (const inputName of inputsToSync) {
            // Find the corresponding camelCase signal property on the Angular component
            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
            // Use the Injector to run the effect in the correct context
            if (this[signalName] && typeof this[signalName] === 'function') {
                runInInjectionContext(this.injector, () => {
                    effect(() => {
                        // Read the signal value
                        const value = this[signalName]();
                        if (wcElement) {
                            // Write the value to the Web Component's property
                            wcElement[inputName] = value;
                        }
                    });
                });
            }
        }
        const outputsToSync = [
            'ui5Change',
            'ui5Input',
            'ui5ValueStateChange',
        ];
        // Synchronize outputs (events)
        for (const outputName of outputsToSync) {
            // Map Angular output name to UI5 web component event name
            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
            // Ensure the output property exists and has an emit function before adding listener
            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
                // Cast the listener to the correct type to satisfy TypeScript
                wcElement.addEventListener(eventName, (e) => {
                    this[outputName].emit(e);
                });
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: StepInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: StepInput, isStandalone: true, selector: "ui5-step-input, [ui5-step-input]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, valueState: { classPropertyName: "valueState", publicName: "valueState", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, valuePrecision: { classPropertyName: "valuePrecision", publicName: "valuePrecision", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Change: "ui5Change", ui5Input: "ui5Input", ui5ValueStateChange: "ui5ValueStateChange" }, exportAs: ["ui5StepInput"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: StepInput, decorators: [{
            type: Component,
            args: [{
                    standalone: true,
                    selector: 'ui5-step-input, [ui5-step-input]',
                    template: '<ng-content></ng-content>',
                    exportAs: 'ui5StepInput',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { StepInput };
//# sourceMappingURL=fundamental-ngx-ui5-webcomponents-step-input.mjs.map
