import * as _angular_core from '@angular/core';
import { OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
import { Portal } from '@angular/cdk/portal';
import { Observable } from 'rxjs';
import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
import { TranslatableString } from '@siemens/element-translate-ng/translate';
import { Breakpoints, ElementDimensions } from '@siemens/element-ng/resize-observer';
import { NavigationExtras, ActivatedRoute } from '@angular/router';
import { MenuItem } from '@siemens/element-ng/common';
import { ContentActionBarMainItem } from '@siemens/element-ng/content-action-bar';
import { MenuItem as MenuItem$1 } from '@siemens/element-ng/menu';

declare class SiSidePanelService {
    private contentSubject;
    /** @internal */
    readonly content$: Observable<Portal<any> | undefined>;
    private openSubject;
    /**
     * Emits on side panel is open or close.
     *
     * @defaultValue this.openSubject.asObservable()
     */
    readonly isOpen$: Observable<boolean>;
    private tempContentSubject;
    /** @internal */
    readonly tempContent$: Observable<Portal<any> | undefined>;
    private tempContentClosed?;
    /** @internal */
    readonly enableMobile: _angular_core.WritableSignal<boolean>;
    /** @internal */
    readonly collapsible: _angular_core.WritableSignal<boolean>;
    private fullscreenSubject;
    /**
     * Emits when fullscreen overlay mode is toggled.
     */
    readonly isFullscreen$: Observable<boolean>;
    private bodyScrollLocks;
    private originalBodyOverflow?;
    private readonly document;
    private readonly isBrowser;
    /** Set or update displayed content. */
    setSidePanelContent(portal: Portal<any> | undefined): void;
    /** Open side panel. */
    open(): void;
    /** Close side panel. */
    close(): void;
    /** Toggle side panel open/close. */
    toggle(): void;
    /** Indicate is side panel open. */
    isOpen(): boolean;
    /** Toggle fullscreen overlay mode. */
    toggleFullscreen(): void;
    /** Set fullscreen overlay mode. */
    setFullscreen(fullscreen: boolean): void;
    /** Indicate if side panel is in fullscreen overlay mode. */
    isFullscreen(): boolean;
    /**
     * Indicate that the side panel is open with temporary content.
     */
    isTemporaryOpen(): boolean;
    /** Show side panel temporary content, opening the side panel when necessary. */
    showTemporaryContent(portal: Portal<any> | undefined): Observable<void>;
    /** Hide side panel temporary content, reverting to state before showing temporary content. */
    hideTemporaryContent(): boolean;
    /**
     * Request body scroll lock. Uses reference counting to handle multiple panels.
     */
    requestBodyScrollLock(): void;
    /**
     * Release body scroll lock. Restores scroll when no more locks exist.
     */
    releaseBodyScrollLock(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSidePanelService, never>;
    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SiSidePanelService>;
}

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */

/**
 * Side panel mode options.
 * - scroll: pushes content when side panel opens/closes,
 * - over: Opens as an overlay on existing content. Just like modal.
 */
type SidePanelMode = 'scroll' | 'over';
/**
 * Side panel size options.
 * - regular: 390px,
 * - wide: 500px,
 * - extended: responsive width that adapts to screen size. Full width on small/medium screens,
 *   scales from 480px to 912px (max) on larger screens for optimal content display
 */
type SidePanelSize = 'regular' | 'wide' | 'extended';
/**
 * Side panel display mode options.
 * - navigate: allows navigation to dedicated page
 * - overlay: allows full-screen overlay toggle
 */
type SidePanelDisplayMode = 'navigate' | 'overlay';
/**
 *  Interface representing a router link item in the side panel.
 */
interface SidePanelNavigateRouterLink {
    type: 'router-link';
    /** Label that is shown to the user. */
    label: TranslatableString;
    /** Link for the angular router. Accepts the same values as {@link RouterLink}. */
    routerLink: string | any[];
    /** Navigation extras that are passed to the {@link RouterLink}. */
    extras?: NavigationExtras;
}
/**
 * Interface representing a link item in the side panel.
 */
interface SidePanelNavigateLink {
    type: 'link';
    /** Label that is shown to the user. */
    label: TranslatableString;
    /** The href property of the anchor. */
    href: string;
    /** The target property of the anchor. */
    target?: string;
}
/**
 * Configuration for side panel navigation.
 */
type SidePanelNavigateConfig = SidePanelNavigateRouterLink | SidePanelNavigateLink;

declare class SiSidePanelComponent implements OnInit, OnDestroy, OnChanges {
    /**
     * Custom breakpoint for ultra-wide screens (≥1920px)
     */
    private static readonly xxxlMinimum;
    /**
     * @defaultValue false
     */
    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * Default state of navigation
     */
    readonly collapsed: _angular_core.ModelSignal<boolean | undefined>;
    /**
     * Mode of side panel
     * (ignored below a certain width)
     *
     * @defaultValue 'over'
     */
    readonly mode: _angular_core.InputSignal<SidePanelMode>;
    /**
     * Size of side-panel
     *
     * @defaultValue 'regular'
     */
    readonly size: _angular_core.InputSignal<SidePanelSize>;
    /**
     * Toggle icon aria-label, required for a11y
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_SIDE_PANEL.TOGGLE:Toggle`)
     * ```
     */
    readonly toggleItemLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
    /**
     * Specifies custom breakpoints to automatically switch mode.
     * The `smMinimum` specifies the breakpoint for the mobile view.
     * The `lgMinimum` specifies the breakpoint to allow scroll mode
     * (below automatically uses over mode).
     * The `xlMinimum` specifies the breakpoint to allow scroll mode
     * with wide size (below automatically uses over mode).
     */
    readonly breakpoints: _angular_core.InputSignal<Breakpoints | undefined>;
    /**
     * Enable mobile drawer for small screen sizes. Should not be used in conjunction with the vertical navbar.
     *
     * @defaultValue false
     */
    readonly enableMobile: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * Whether to disable backdrop when side panel is open in over mode.
     * When false (default), the backdrop prevents interaction with background content while preserving visual context.
     *
     * @defaultValue false
     */
    readonly disableBackdrop: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * Emits when the panel is closed
     */
    readonly closed: _angular_core.OutputEmitterRef<void>;
    /**
     * Emits whenever the content is resized due to opening and closing or parent resize.
     */
    readonly contentResize: _angular_core.OutputEmitterRef<ElementDimensions>;
    protected readonly isScrollMode: _angular_core.Signal<boolean>;
    protected readonly isOverMode: _angular_core.Signal<boolean>;
    protected readonly showBackdrop: _angular_core.Signal<boolean>;
    protected readonly isXs: _angular_core.WritableSignal<boolean>;
    protected readonly isSm: _angular_core.WritableSignal<boolean>;
    protected readonly isMd: _angular_core.WritableSignal<boolean>;
    protected readonly isLg: _angular_core.WritableSignal<boolean>;
    protected readonly isXl: _angular_core.WritableSignal<boolean>;
    protected readonly isXxl: _angular_core.WritableSignal<boolean>;
    protected readonly isXxxl: _angular_core.WritableSignal<boolean>;
    protected readonly isCollapsed: _angular_core.WritableSignal<boolean>;
    protected readonly ready: _angular_core.WritableSignal<boolean>;
    protected readonly isHidden: _angular_core.WritableSignal<boolean>;
    protected readonly isFullscreenOverlay: _angular_core.WritableSignal<boolean>;
    protected readonly showTempContent: _angular_core.WritableSignal<boolean>;
    private readonly panelElement;
    private readonly contentElement;
    private readonly portalOutlet;
    private readonly tmpPortalOutlet;
    /**
     * The $rpanel-transition-duration in the style is 0.5 seconds.
     * Sending the resize event after resize need to wait until resize is done.
     */
    private readonly resizeEventDelay;
    private resizeEvent;
    private openingOrClosing;
    private previousContentDimensions;
    private isCollapsedInternal;
    private readonly isBrowser;
    private readonly element;
    private readonly resizeObserver;
    private readonly service;
    private readonly cdRef;
    private readonly destroyRef;
    private readonly document;
    constructor();
    ngOnChanges(changes: SimpleChanges<this>): void;
    ngOnInit(): void;
    ngOnDestroy(): void;
    /**
     * Toggle whether the side panel is expanded or not.
     */
    toggleSidePanel(): void;
    private emitResizeOutputs;
    private getContentDimensions;
    private setBreakpoints;
    private sendResize;
    private attachContent;
    private attachTempContent;
    private openClose;
    private doOpenClose;
    private moveFocusInside;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSidePanelComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiSidePanelComponent, "si-side-panel", never, { "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "toggleItemLabel": { "alias": "toggleItemLabel"; "required": false; "isSignal": true; }; "breakpoints": { "alias": "breakpoints"; "required": false; "isSignal": true; }; "enableMobile": { "alias": "enableMobile"; "required": false; "isSignal": true; }; "disableBackdrop": { "alias": "disableBackdrop"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "closed": "closed"; "contentResize": "contentResize"; }, never, ["si-side-panel-content, element-side-panel-content", "*"], true, never>;
}

/**
 * An extension of MenuItem to support combined icons.
 *
 * @deprecated Use the {@link SiSidePanelActionsComponent} instead:
 *
 * ```html
 * <si-side-panel-content>
 *   <si-side-panel-actions>
 *       <button
 *         type="button"
 *         si-side-panel-action
 *         icon="element-alarm-background-filled"
 *         iconColor="status-danger"
 *         stackedIcon="element-alarm-tick"
 *         stackedIconColor="text-body"
 *         (click)="action()"
 *       >
 *         Action
 *       </button>
 *   </si-side-panel-actions>
 * </si-side-panel-content>
 * ```
 */
interface StatusItem extends MenuItem {
    overlayIcon?: string;
}
declare class SiSidePanelContentComponent implements OnInit {
    /**
     * @deprecated This input is no longer used. The collapsible state is managed by the SiSidePanelService.
     * This input will be removed in a future major version.
     * @defaultValue undefined
     */
    readonly collapsibleInput: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
    /**
     * Header of side panel
     *
     * @defaultValue ''
     */
    readonly heading: _angular_core.InputSignal<TranslatableString>;
    /**
     * Input list of primary action items
     *
     * @defaultValue []
     */
    readonly primaryActions: _angular_core.InputSignal<(MenuItem | ContentActionBarMainItem)[]>;
    /**
     * Input list of secondary action items.
     *
     * @defaultValue []
     */
    readonly secondaryActions: _angular_core.InputSignal<(MenuItem | MenuItem$1)[]>;
    /**
     * Status icons/actions
     *
     * @deprecated Use the {@link SiSidePanelActionsComponent} instead:
     *
     * ```html
     * <si-side-panel-content>
     *   <si-side-panel-actions>
     *       <button
     *         type="button"
     *         si-side-panel-action
     *         icon="element-alarm-background-filled"
     *         iconColor="status-danger"
     *         stackedIcon="element-alarm-tick"
     *         stackedIconColor="text-body"
     *         (click)="action()"
     *       >
     *         Action
     *       </button>
     *   </si-side-panel-actions>
     * </si-side-panel-content>
     * ```
     *
     * @defaultValue []
     */
    readonly statusActions: _angular_core.InputSignal<StatusItem[]>;
    /**
     * Toggles search bar
     *
     * @defaultValue false
     */
    readonly searchable: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * Placeholder text for search
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_SIDE_PANEL.SEARCH_PLACEHOLDER:Search...`)
     * ```
     */
    readonly searchPlaceholder: _angular_core.InputSignal<TranslatableString>;
    /**
     * Aria label for close button. Needed for a11y
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_SIDE_PANEL.CLOSE:Close`)
     * ```
     */
    readonly closeButtonLabel: _angular_core.InputSignal<TranslatableString>;
    /**
     * Toggle icon aria-label, required for a11y
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_SIDE_PANEL.TOGGLE:Toggle`)
     * ```
     */
    readonly toggleItemLabel: _angular_core.InputSignal<TranslatableString>;
    /**
     * Enter fullscreen aria-label, required for a11y
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_SIDE_PANEL.ENTER_FULLSCREEN:Enter fullscreen`)
     * ```
     */
    readonly enterFullscreenLabel: _angular_core.InputSignal<TranslatableString>;
    /**
     * Exit fullscreen aria-label, required for a11y
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_SIDE_PANEL.EXIT_FULLSCREEN:Exit fullscreen`)
     * ```
     */
    readonly exitFullscreenLabel: _angular_core.InputSignal<TranslatableString>;
    /**
     * Show a badge on the mobile drawer indicating a new alert or notification
     *
     * @defaultValue false
     */
    readonly showMobileDrawerBadge: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * Display mode for side panel - enables navigate or overlay functionality
     */
    readonly displayMode: _angular_core.InputSignal<SidePanelDisplayMode | undefined>;
    /**
     * Configuration for navigate mode
     */
    readonly navigateConfig: _angular_core.InputSignal<SidePanelNavigateConfig | undefined>;
    /**
     * Output for search bar input
     */
    readonly searchEvent: _angular_core.OutputEmitterRef<string>;
    protected readonly activatedRoute: ActivatedRoute | null;
    protected readonly service: SiSidePanelService;
    protected readonly isCollapsed: _angular_core.WritableSignal<boolean>;
    protected readonly isExpanded: _angular_core.WritableSignal<boolean>;
    protected readonly isFullscreen: _angular_core.WritableSignal<boolean>;
    protected readonly enableMobile: _angular_core.Signal<boolean>;
    protected readonly collapsible: _angular_core.Signal<boolean>;
    protected readonly mobileSize: _angular_core.WritableSignal<boolean>;
    protected readonly focusable: _angular_core.Signal<boolean>;
    protected readonly icons: Record<"elementCancel" | "elementDoubleLeft" | "elementDoubleRight" | "elementExport" | "elementPinch" | "elementZoom", string>;
    /**
     * The $rpanel-transition-duration in the style is 0.5 seconds.
     * For the animation we need to wait until the resize is done.
     */
    private readonly resizeAnimationDelay;
    private readonly destroyRef;
    private readonly breakpointObserver;
    private expandedTimeout;
    constructor();
    ngOnInit(): void;
    /**
     * Toggle fullscreen overlay mode
     */
    toggleFullscreen(): void;
    protected toggleSidePanel(event?: MouseEvent): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSidePanelContentComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiSidePanelContentComponent, "si-side-panel-content", never, { "collapsibleInput": { "alias": "collapsible"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "primaryActions": { "alias": "primaryActions"; "required": false; "isSignal": true; }; "secondaryActions": { "alias": "secondaryActions"; "required": false; "isSignal": true; }; "statusActions": { "alias": "statusActions"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "toggleItemLabel": { "alias": "toggleItemLabel"; "required": false; "isSignal": true; }; "enterFullscreenLabel": { "alias": "enterFullscreenLabel"; "required": false; "isSignal": true; }; "exitFullscreenLabel": { "alias": "exitFullscreenLabel"; "required": false; "isSignal": true; }; "showMobileDrawerBadge": { "alias": "showMobileDrawerBadge"; "required": false; "isSignal": true; }; "displayMode": { "alias": "displayMode"; "required": false; "isSignal": true; }; "navigateConfig": { "alias": "navigateConfig"; "required": false; "isSignal": true; }; }, { "searchEvent": "searchEvent"; }, never, ["si-side-panel-actions", "*"], true, never>;
}

/**
 * Creates an actions container for the side-panel.
 * This action will remain visible if the side-panel is collapsed.
 *
 * @example
 * ```html
 * <si-side-panel-content>
 *   <si-side-panel-actions>
 *       <button
 *         type="button"
 *         si-side-panel-action
 *         icon="element-alarm-background-filled"
 *         iconColor="status-danger"
 *         stackedIcon="element-alarm-tick"
 *         stackedIconColor="text-body"
 *         (click)="action()"
 *       >
 *         Action
 *       </button>
 *   </si-side-panel-actions>
 * </si-side-panel-content>
 * ```
 */
declare class SiSidePanelActionsComponent {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSidePanelActionsComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiSidePanelActionsComponent, "si-side-panel-actions", never, {}, {}, never, ["*"], true, never>;
}

/**
 * Creates an action for the side-panel.
 * This action will remain visible if the side-panel is collapsed.
 *
 * @example
 * ```html
 * <si-side-panel-content>
 *   <si-side-panel-actions>
 *       <button
 *         type="button"
 *         si-side-panel-action
 *         icon="element-alarm-background-filled"
 *         iconColor="status-danger"
 *         stackedIcon="element-alarm-tick"
 *         stackedIconColor="text-body"
 *         (click)="action()"
 *       >
 *         Action
 *       </button>
 *   </si-side-panel-actions>
 * </si-side-panel-content>
 * ```
 */
declare class SiSidePanelActionComponent {
    /** Icon name for the main icon. */
    readonly icon: _angular_core.InputSignal<string>;
    /** CSS color class for the main icon (e.g. `'status-warning'`). */
    readonly iconColor: _angular_core.InputSignal<string | undefined>;
    /** Optional stacked icon name displayed on top of the main icon. */
    readonly stackedIcon: _angular_core.InputSignal<string | undefined>;
    /** CSS color class for the stacked icon (e.g. `'text-body'`). */
    readonly stackedIconColor: _angular_core.InputSignal<string | undefined>;
    /**
     * When disabled, renders a dot separator instead of the icon and label.
     *
     * @defaultValue false
     */
    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSidePanelActionComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiSidePanelActionComponent, "button[si-side-panel-action], a[si-side-panel-action]", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "stackedIcon": { "alias": "stackedIcon"; "required": false; "isSignal": true; }; "stackedIconColor": { "alias": "stackedIconColor"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}

declare class SiSidePanelModule {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSidePanelModule, never>;
    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<SiSidePanelModule, never, [typeof SiSidePanelComponent, typeof SiSidePanelContentComponent, typeof SiSidePanelActionsComponent, typeof SiSidePanelActionComponent], [typeof SiSidePanelComponent, typeof SiSidePanelContentComponent, typeof SiSidePanelActionsComponent, typeof SiSidePanelActionComponent]>;
    static ɵinj: _angular_core.ɵɵInjectorDeclaration<SiSidePanelModule>;
}

export { SiSidePanelActionComponent, SiSidePanelActionsComponent, SiSidePanelComponent, SiSidePanelContentComponent, SiSidePanelModule, SiSidePanelService };
export type { SidePanelDisplayMode, SidePanelMode, SidePanelNavigateConfig, SidePanelNavigateLink, SidePanelNavigateRouterLink, SidePanelSize, StatusItem };
