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

class Form {
    constructor() {
        /**
         * Defines the accessible ARIA name of the component.
         */
        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : []));
        /**
         * Defines id (or many ids) of the element (or elements) that label the component.
         */
        this.accessibleNameRef = input(...(ngDevMode ? [undefined, { debugName: "accessibleNameRef" }] : []));
        /**
         * Defines the accessibility mode of the component in "edit" and "display" use-cases.
      
      Based on the mode, the component renders different HTML elements and ARIA attributes,
      which are appropriate for the use-case.
      
      **Usage:**
      - Set this property to "Display", when the form consists of non-editable (e.g. texts) form items.
      - Set this property to "Edit", when the form consists of editable (e.g. input fields) form items.
         */
        this.accessibleMode = input("Display", ...(ngDevMode ? [{ debugName: "accessibleMode" }] : []));
        /**
         * Defines the number of columns to distribute the form content by breakpoint.
      
      Supported values:
      - `S` - 1 column by default (1 column is recommended)
      - `M` - 1 column by default (up to 2 columns are recommended)
      - `L` - 2 columns by default (up to 3 columns are recommended)
      - `XL` - 3 columns by default (up to 6 columns  are recommended)
         */
        this.layout = input("S1 M1 L2 XL3", ...(ngDevMode ? [{ debugName: "layout" }] : []));
        /**
         * Defines the width proportion of the labels and fields of a form item by breakpoint.
      
      By default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,
      and 12/12 in S size, e.g in S the label is on top of its associated field.
      
      The supported values are between 1 and 12. Greater the number, more space the label will use.
      
      **Note:** If "12" is set, the label will be displayed on top of its assosiated field.
         */
        this.labelSpan = input("S12 M4 L4 XL4", ...(ngDevMode ? [{ debugName: "labelSpan" }] : []));
        /**
         * Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.
      
      By default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end.
      The `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end.
      
      **Note:**
      - The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field.
      - When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field.
         */
        this.emptySpan = input("S0 M0 L0 XL0", ...(ngDevMode ? [{ debugName: "emptySpan" }] : []));
        /**
         * Defines the header text of the component.
      
      **Note:** The property gets overridden by the `header` slot.
         */
        this.headerText = input(...(ngDevMode ? [undefined, { debugName: "headerText" }] : []));
        /**
         * Defines the compoennt heading level,
      set by the `headerText`.
         */
        this.headerLevel = input("H2", ...(ngDevMode ? [{ debugName: "headerLevel" }] : []));
        /**
         * Defines the vertical spacing between form items.
      
      **Note:** If the Form is meant to be switched between "display"("non-edit") and "edit" modes,
      we recommend using "Large" item spacing in "display"("non-edit") mode, and "Normal" - for "edit" mode,
      to avoid "jumping" effect, caused by the hight difference between texts in "display"("non-edit") mode and the input fields in "edit" mode.
         */
        this.itemSpacing = input("Normal", ...(ngDevMode ? [{ debugName: "itemSpacing" }] : [])); // className is now passed
        /**
         * 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.
         *
         * - **header**: Defines the component header area.
      
      **Note:** When a `header` is provided, the `headerText` property is ignored.
         * - **(default)**: Defines the component content - FormGroups or FormItems.
      
      **Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.
      Either use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.
         *
         * @example
         * ```html
         * <ui5-form>
         *   <div slot="header">Custom header content</div>
         *   <p>Default slot content</p>
         * </ui5-form>
         * ```
         *
         * @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": "header",
                "description": "Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored."
            },
            {
                "name": "default",
                "description": "Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups."
            }
        ];
        this.elementRef = inject(ElementRef);
        this.injector = inject(Injector);
    }
    get element() {
        return this.elementRef.nativeElement;
    }
    ngAfterViewInit() {
        const wcElement = this.element;
        const inputsToSync = [
            'accessibleName',
            'accessibleNameRef',
            'accessibleMode',
            'layout',
            'labelSpan',
            'emptySpan',
            'headerText',
            'headerLevel',
            'itemSpacing',
        ];
        // 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;
                        }
                    });
                });
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: Form, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: Form, isStandalone: true, selector: "ui5-form, [ui5-form]", inputs: { accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, accessibleMode: { classPropertyName: "accessibleMode", publicName: "accessibleMode", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, labelSpan: { classPropertyName: "labelSpan", publicName: "labelSpan", isSignal: true, isRequired: false, transformFunction: null }, emptySpan: { classPropertyName: "emptySpan", publicName: "emptySpan", isSignal: true, isRequired: false, transformFunction: null }, headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, headerLevel: { classPropertyName: "headerLevel", publicName: "headerLevel", isSignal: true, isRequired: false, transformFunction: null }, itemSpacing: { classPropertyName: "itemSpacing", publicName: "itemSpacing", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5Form"], 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: Form, decorators: [{
            type: Component,
            args: [{
                    standalone: true,
                    selector: 'ui5-form, [ui5-form]',
                    template: '<ng-content></ng-content>',
                    exportAs: 'ui5Form',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }] });

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

export { Form };
//# sourceMappingURL=fundamental-ngx-ui5-webcomponents-form.mjs.map
