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

class Dialog {
    constructor() {
        /**
         * Defines the header text.
      
      **Note:** If `header` slot is provided, the `headerText` is ignored.
         */
        this.headerText = input(...(ngDevMode ? [undefined, { debugName: "headerText" }] : []));
        /**
         * Determines if the dialog will be stretched to full screen on mobile. On desktop,
      the dialog will be stretched to approximately 90% of the viewport.
      
      **Note:** For better usability of the component it is recommended to set this property to "true" when the dialog is opened on phone.
         */
        this.stretch = input(false, ...(ngDevMode ? [{ debugName: "stretch", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Determines whether the component is draggable.
      If this property is set to true, the Dialog will be draggable by its header.
      
      **Note:** The component can be draggable only in desktop mode.
      
      **Note:** This property overrides the default HTML "draggable" attribute native behavior.
      When "draggable" is set to true, the native browser "draggable"
      behavior is prevented and only the Dialog custom logic ("draggable by its header") works.
         */
        this.draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Configures the component to be resizable.
      If this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.
      In RTL languages, the resize handle will be placed in the bottom left corner.
      
      **Note:** The component can be resizable only in desktop mode.
      
      **Note:** Upon resizing, externally defined height and width styling will be ignored.
         */
        this.resizable = input(false, ...(ngDevMode ? [{ debugName: "resizable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Defines the state of the `Dialog`.
      
      **Note:** If `"Negative"` and `"Critical"` states is set, it will change the
      accessibility role to "alertdialog", if the accessibleRole property is set to `"Dialog"`.
         */
        this.state = input("None", ...(ngDevMode ? [{ debugName: "state" }] : []));
        /**
         * Defines the ID of the HTML Element, which will get the initial focus.
      
      **Note:** If an element with `autofocus` attribute is added inside the component,
      `initialFocus` won't take effect.
         */
        this.initialFocus = input(...(ngDevMode ? [undefined, { debugName: "initialFocus" }] : []));
        /**
         * Defines if the focus should be returned to the previously focused element,
      when the popup closes.
         */
        this.preventFocusRestore = input(false, ...(ngDevMode ? [{ debugName: "preventFocusRestore", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Defines the accessible name of the component.
         */
        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : []));
        /**
         * Defines the IDs of the elements that label the component.
         */
        this.accessibleNameRef = input(...(ngDevMode ? [undefined, { debugName: "accessibleNameRef" }] : []));
        /**
         * Allows setting a custom role.
         */
        this.accessibleRole = input("Dialog", ...(ngDevMode ? [{ debugName: "accessibleRole" }] : []));
        /**
         * Defines the accessible description of the component.
         */
        this.accessibleDescription = input(...(ngDevMode ? [undefined, { debugName: "accessibleDescription" }] : []));
        /**
         * Receives id(or many ids) of the elements that describe the component.
         */
        this.accessibleDescriptionRef = input(...(ngDevMode ? [undefined, { debugName: "accessibleDescriptionRef" }] : []));
        /**
         * Indicates whether initial focus should be prevented.
         */
        this.preventInitialFocus = input(false, ...(ngDevMode ? [{ debugName: "preventInitialFocus", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Indicates if the element is open
         */
        this.open = input(false, ...(ngDevMode ? [{ debugName: "open", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
        /**
         * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.
         */
        this.ui5BeforeOpen = output();
        /**
         * Fired after the component is opened.
         */
        this.ui5Open = output();
        /**
         * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.
         */
        this.ui5BeforeClose = output();
        /**
         * Fired after the component is closed.
         */
        this.ui5Close = 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.
         *
         * - **header**: Defines the header HTML Element.
      
      **Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.
      
      **Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.
      `accessibleName` should be used.
         * - **footer**: Defines the footer HTML Element.
      
      **Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.
         * - **(default)**: Defines the content of the Popup.
         *
         * @example
         * ```html
         * <ui5-dialog>
         *   <div slot="header">Custom header content</div>
         *   <p>Default slot content</p>
         * </ui5-dialog>
         * ```
         *
         * @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 header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used."
            },
            {
                "name": "footer",
                "description": "Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings."
            },
            {
                "name": "default",
                "description": "Defines the content of the Popup."
            }
        ];
        this.elementRef = inject(ElementRef);
        this.injector = inject(Injector);
    }
    get element() {
        return this.elementRef.nativeElement;
    }
    ngAfterViewInit() {
        const wcElement = this.element;
        const inputsToSync = [
            'headerText',
            'stretch',
            'draggable',
            'resizable',
            'state',
            'initialFocus',
            'preventFocusRestore',
            'accessibleName',
            'accessibleNameRef',
            'accessibleRole',
            'accessibleDescription',
            'accessibleDescriptionRef',
            'preventInitialFocus',
            'open',
        ];
        // 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 = [
            'ui5BeforeOpen',
            'ui5Open',
            'ui5BeforeClose',
            'ui5Close',
        ];
        // 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: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: Dialog, isStandalone: true, selector: "ui5-dialog, [ui5-dialog]", inputs: { headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, preventFocusRestore: { classPropertyName: "preventFocusRestore", publicName: "preventFocusRestore", 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 }, accessibleRole: { classPropertyName: "accessibleRole", publicName: "accessibleRole", isSignal: true, isRequired: false, transformFunction: null }, accessibleDescription: { classPropertyName: "accessibleDescription", publicName: "accessibleDescription", isSignal: true, isRequired: false, transformFunction: null }, accessibleDescriptionRef: { classPropertyName: "accessibleDescriptionRef", publicName: "accessibleDescriptionRef", isSignal: true, isRequired: false, transformFunction: null }, preventInitialFocus: { classPropertyName: "preventInitialFocus", publicName: "preventInitialFocus", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5BeforeOpen: "ui5BeforeOpen", ui5Open: "ui5Open", ui5BeforeClose: "ui5BeforeClose", ui5Close: "ui5Close" }, exportAs: ["ui5Dialog"], 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: Dialog, decorators: [{
            type: Component,
            args: [{
                    standalone: true,
                    selector: 'ui5-dialog, [ui5-dialog]',
                    template: '<ng-content></ng-content>',
                    exportAs: 'ui5Dialog',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }] });

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

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