// #region Imports
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { MutationController } from '../../../Controllers/MutationController';
import { Component } from '../../../Decorators/ComponentDecorator';
import { CustomElement } from '../../Abstracts/CustomElement';
import { HelmetServiceLocator } from './Helmet';
// #endregion
/**
 * Helmet - A document head manager for dynamically updating meta tags, title, and other head elements.
 *
 * @description
 * The Helmet component provides a declarative way to manage the document's `<head>` section from anywhere
 * in your component tree. It automatically synchronizes child elements (title, meta, link, script, style tags)
 * with the document head, allowing components to control page metadata, SEO tags, social sharing properties,
 * and external resources. Changes made through Helmet are automatically cleaned up when the component is
 * removed, making it perfect for single-page applications that need dynamic head management.
 *
 * @name Helmet
 * @element mosaik-helmet
 * @category Primitives
 *
 * @example
 * Set page title and meta description:
 * ```html
 * <mosaik-helmet>
 *   <title>My Page Title - My Site</title>
 *   <meta name="description" content="This page contains important information about our product.">
 * </mosaik-helmet>
 * ```
 *
 * @example
 * Social media meta tags:
 * ```html
 * <mosaik-helmet>
 *   <title>Article Title</title>
 *   <meta property="og:title" content="Article Title">
 *   <meta property="og:description" content="Article description for social sharing">
 *   <meta property="og:image" content="https://example.com/image.jpg">
 *   <meta name="twitter:card" content="summary_large_image">
 * </mosaik-helmet>
 * ```
 *
 * @example
 * Include external stylesheets and scripts:
 * ```html
 * <mosaik-helmet>
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
 *   <script src="https://cdn.example.com/library.js" async></script>
 * </mosaik-helmet>
 * ```
 *
 * @public
 */
let HelmetElement = class HelmetElement extends CustomElement {
    // #region Fields
    _mutationController;
    _elements;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._elements = new Array();
        this._mutationController = new MutationController(this, {
            config: {
                childList: true,
                subtree: true
            },
            callback: () => {
                // this.backupAndReplaceElements();
                // Array.from(this.children).forEach(child => {
                //     const tag = child.tagName.toLowerCase() as unknown as keyof KnownHelmetTagNameMap;
                //     HelmetServiceLocator.current.set(tag, child as any);
                // });
            }
        });
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     * The `is` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-helmet';
    }
    // #endregion
    // #region Methods
    /**
     * @public
     * @override
     */
    connectedCallback() {
        super.connectedCallback();
        HelmetServiceLocator.current.changes.subscribe(() => {
            // override default again...
            this.appendDocument();
        });
        this.appendDocument();
    }
    /**
     * @public
     * @override
     */
    disconnectedCallback() {
        this.clearDocument();
        super.disconnectedCallback();
    }
    /**
     * @protected
     * @overload
     */
    createRenderRoot() {
        // we do not want to create a shadow DOM for this element
        return this;
    }
    /**
     * @private
     */
    appendDocument() {
        Array.from(this.children).forEach((child) => {
            const tag = child.tagName.toLowerCase();
            const element = HelmetServiceLocator.current.set(tag, child);
            this._elements.push(element);
        });
    }
    /**
     * @private
     */
    clearDocument() {
        this._elements.forEach((child) => {
            const tag = child.tagName.toLowerCase();
            HelmetServiceLocator.current.remove(tag, child);
        });
        this._elements.splice(0, this._elements.length);
    }
};
HelmetElement = __decorate([
    Component({
        selector: 'mosaik-helmet',
        imports: []
    }),
    __metadata("design:paramtypes", [])
], HelmetElement);
export { HelmetElement };
//# sourceMappingURL=HelmetElement.js.map