import { OverlayContainer } from '@angular/cdk/overlay';
import * as i0 from '@angular/core';

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

/**
 * This directive is intended to be used in applications that do NOT load element styles in the root HTML element.
 * So typically module federation, single SPA apps or apps that bootstrap element manually in a shadow root.
 *
 * This directive will ensure that overlays created within this shadow root will have the correct styles applied.
 * It does this by creating a new shadow root in the document body
 * and copying the styles from this shadow root to new one.
 *
 * With that approach, we can ensure that overlay can span the entire screen without being limited to the current shadow root.
 *
 * To use this directive, add it to the component / element which creates the shadow root which holds the element styles.
 *
 * @example
 * ```ts
 * @Component({
 *   selector: 'app-root',
 *   encapsulation: ViewEncapsulation.ShadowDom,
 *   hostDirectives: [SiShadowRootDirective],
 *   stylesUrls: ['element-styles.scss'],
 *   template: `<si-element-component />`
 * })
 * export class AppComponent { }
 *
 * ```
 *
 */
declare class SiShadowRootDirective extends OverlayContainer {
    private elementRef;
    private document;
    protected _createContainer(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<SiShadowRootDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<SiShadowRootDirective, "[siShadowRoot]", never, {}, {}, never, never, true, never>;
}

export { SiShadowRootDirective };
