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

class TabContainer {
    constructor() {
        /**
         * Defines whether the tab content is collapsed.
         */
        this.collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Defines the alignment of the content and the `additionalText` of a tab.
      
      **Note:**
      The content and the `additionalText` would be displayed vertically by default,
      but when set to `Inline`, they would be displayed horizontally.
         */
        this.tabLayout = input("Standard", ...(ngDevMode ? [{ debugName: "tabLayout" }] : []));
        /**
         * Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible.
      All other tabs that can 't fit on the screen are available in an overflow tab "More".
      
      **Note:**
      Only one overflow at the end would be displayed by default,
      but when set to `StartAndEnd`, there will be two overflows on both ends, and tab order will not change on tab selection.
         */
        this.overflowMode = input("End", ...(ngDevMode ? [{ debugName: "overflowMode" }] : []));
        /**
         * Sets the background color of the Tab Container's header as `Solid`, `Transparent`, or `Translucent`.
         */
        this.headerBackgroundDesign = input("Solid", ...(ngDevMode ? [{ debugName: "headerBackgroundDesign" }] : []));
        /**
         * Sets the background color of the Tab Container's content as `Solid`, `Transparent`, or `Translucent`.
         */
        this.contentBackgroundDesign = input("Solid", ...(ngDevMode ? [{ debugName: "contentBackgroundDesign" }] : []));
        /**
         * Defines if automatic tab selection is deactivated.
      
      **Note:** By default, if none of the child tabs have the `selected` property set, the first tab will be automatically selected.
      Setting this property to `true` allows preventing this behavior.
         */
        this.noAutoSelection = input(false, ...(ngDevMode ? [{ debugName: "noAutoSelection", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
        /**
         * Fired when a tab is selected.
         */
        this.ui5TabSelect = output();
        /**
         * Fired when element is being moved over the tab container.
      
      If the new position is valid, prevent the default action of the event using `preventDefault()`.
         */
        this.ui5MoveOver = output();
        /**
         * Fired when element is moved to the tab container.
      
      **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.
         */
        this.ui5Move = 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 tabs.
      
      **Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.
         * - **overflowButton**: Defines the button which will open the overflow menu. If nothing is provided to this slot,
      the default button will be used.
         * - **startOverflowButton**: Defines the button which will open the start overflow menu if available. If nothing is provided to this slot,
      the default button will be used.
         *
         * @example
         * ```html
         * <ui5-tabcontainer>
         *   <div slot="header">Custom header content</div>
         *   <p>Default slot content</p>
         * </ui5-tabcontainer>
         * ```
         *
         * @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 tabs.\n\n**Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design."
            },
            {
                "name": "overflowButton",
                "description": "Defines the button which will open the overflow menu. If nothing is provided to this slot,\nthe default button will be used.",
                "since": "1.0.0-rc.9"
            },
            {
                "name": "startOverflowButton",
                "description": "Defines the button which will open the start overflow menu if available. If nothing is provided to this slot,\nthe default button will be used.",
                "since": "1.1.0"
            }
        ];
        this.elementRef = inject(ElementRef);
        this.injector = inject(Injector);
    }
    /**
     * Returns all slotted tabs and their subTabs in a flattened array.
  The order of tabs is depth-first.
     * @readonly This property is managed by the web component.
     */
    get allItems() {
        return this.element?.allItems ?? [];
    }
    get element() {
        return this.elementRef.nativeElement;
    }
    ngAfterViewInit() {
        const wcElement = this.element;
        const inputsToSync = [
            'collapsed',
            'tabLayout',
            'overflowMode',
            'headerBackgroundDesign',
            'contentBackgroundDesign',
            'noAutoSelection',
        ];
        // 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 = [
            'ui5TabSelect',
            'ui5MoveOver',
            'ui5Move',
        ];
        // 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: TabContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: TabContainer, isStandalone: true, selector: "ui5-tabcontainer, [ui5-tabcontainer]", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, tabLayout: { classPropertyName: "tabLayout", publicName: "tabLayout", isSignal: true, isRequired: false, transformFunction: null }, overflowMode: { classPropertyName: "overflowMode", publicName: "overflowMode", isSignal: true, isRequired: false, transformFunction: null }, headerBackgroundDesign: { classPropertyName: "headerBackgroundDesign", publicName: "headerBackgroundDesign", isSignal: true, isRequired: false, transformFunction: null }, contentBackgroundDesign: { classPropertyName: "contentBackgroundDesign", publicName: "contentBackgroundDesign", isSignal: true, isRequired: false, transformFunction: null }, noAutoSelection: { classPropertyName: "noAutoSelection", publicName: "noAutoSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5TabSelect: "ui5TabSelect", ui5MoveOver: "ui5MoveOver", ui5Move: "ui5Move" }, exportAs: ["ui5TabContainer"], 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: TabContainer, decorators: [{
            type: Component,
            args: [{
                    standalone: true,
                    selector: 'ui5-tabcontainer, [ui5-tabcontainer]',
                    template: '<ng-content></ng-content>',
                    exportAs: 'ui5TabContainer',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }] });

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

export { TabContainer };
//# sourceMappingURL=fundamental-ngx-ui5-webcomponents-tab-container.mjs.map
