import { OverlayContainer, Overlay } from '@angular/cdk/overlay';
import * as i0 from '@angular/core';
import { inject, ElementRef, DOCUMENT, Directive } 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 { }
 *
 * ```
 *
 */
class SiShadowRootDirective extends OverlayContainer {
    elementRef = inject(ElementRef);
    document = inject(DOCUMENT);
    // eslint-disable-next-line @typescript-eslint/naming-convention
    _createContainer() {
        const root = document.createElement('element-overlay-root');
        this.document.body.append(root);
        const shadow = root.attachShadow({ mode: 'open' });
        const shadowElement = document.createElement('div');
        shadowElement.classList.add('cdk-overlay-container');
        shadow.append(...Array.from(this.elementRef.nativeElement.shadowRoot.styleSheets).map(styleSheet => styleSheet.ownerNode.cloneNode(true)), shadowElement);
        this._containerElement = shadowElement;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiShadowRootDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiShadowRootDirective, isStandalone: true, selector: "[siShadowRoot]", providers: [{ provide: OverlayContainer, useExisting: SiShadowRootDirective }, Overlay], usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiShadowRootDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[siShadowRoot]',
                    providers: [{ provide: OverlayContainer, useExisting: SiShadowRootDirective }, Overlay]
                }]
        }] });

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

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

export { SiShadowRootDirective };
//# sourceMappingURL=siemens-element-ng-shadow-root.mjs.map
