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

class Panel {
    constructor() {
        /**
         * This property is used to set the header text of the component.
      The text is visible in both expanded and collapsed states.
      
      **Note:** This property is overridden by the `header` slot.
         */
        this.headerText = input(...(ngDevMode ? [undefined, { debugName: "headerText" }] : []));
        /**
         * Determines whether the component is in a fixed state that is not
      expandable/collapsible by user interaction.
         */
        this.fixed = input(false, ...(ngDevMode ? [{ debugName: "fixed", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Indicates whether the component is collapsed and only the header is displayed.
         */
        this.collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.
         */
        this.noAnimation = input(false, ...(ngDevMode ? [{ debugName: "noAnimation", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Sets the accessible ARIA role of the component.
      Depending on the usage, you can change the role from the default `Form`
      to `Region` or `Complementary`.
         */
        this.accessibleRole = input("Form", ...(ngDevMode ? [{ debugName: "accessibleRole" }] : []));
        /**
         * Defines the "aria-level" of component heading,
      set by the `headerText`.
         */
        this.headerLevel = input("H2", ...(ngDevMode ? [{ debugName: "headerLevel" }] : []));
        /**
         * Defines the accessible ARIA name of the component.
         */
        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : []));
        /**
         * Indicates whether the Panel header is sticky or not.
      If stickyHeader is set to true, then whenever you scroll the content or
      the application, the header of the panel will be always visible and
      a solid color will be used for its design.
         */
        this.stickyHeader = input(false, ...(ngDevMode ? [{ debugName: "stickyHeader", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
        /**
         * Fired when the component is expanded/collapsed by user interaction.
         */
        this.ui5Toggle = 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.
         *
         * - **(default)**: Defines the content of the component. The content is visible only when the component is expanded.
         * - **header**: Defines the component header area.
      
      **Note:** When a header is provided, the `headerText` property is ignored.
         *
         * @example
         * ```html
         * <ui5-panel>
         *   <div slot="header">Custom header content</div>
         *   <p>Default slot content</p>
         * </ui5-panel>
         * ```
         *
         * @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": "default",
                "description": "Defines the content of the component. The content is visible only when the component is expanded."
            },
            {
                "name": "header",
                "description": "Defines the component header area.\n\n**Note:** When a header is provided, the `headerText` property is ignored."
            }
        ];
        this.elementRef = inject(ElementRef);
        this.injector = inject(Injector);
    }
    get element() {
        return this.elementRef.nativeElement;
    }
    ngAfterViewInit() {
        const wcElement = this.element;
        const inputsToSync = [
            'headerText',
            'fixed',
            'collapsed',
            'noAnimation',
            'accessibleRole',
            'headerLevel',
            'accessibleName',
            'stickyHeader',
        ];
        // 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 = [
            'ui5Toggle',
        ];
        // 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: Panel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: Panel, isStandalone: true, selector: "ui5-panel, [ui5-panel]", inputs: { headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, noAnimation: { classPropertyName: "noAnimation", publicName: "noAnimation", isSignal: true, isRequired: false, transformFunction: null }, accessibleRole: { classPropertyName: "accessibleRole", publicName: "accessibleRole", isSignal: true, isRequired: false, transformFunction: null }, headerLevel: { classPropertyName: "headerLevel", publicName: "headerLevel", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Toggle: "ui5Toggle" }, exportAs: ["ui5Panel"], 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: Panel, decorators: [{
            type: Component,
            args: [{
                    standalone: true,
                    selector: 'ui5-panel, [ui5-panel]',
                    template: '<ng-content></ng-content>',
                    exportAs: 'ui5Panel',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }] });

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

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