// #region Imports
import { RendererServiceLocator } from '../../../../Dom/Renderer';
import { getSlot } from '../../../../Dom/Slot';
import { on } from '@breadstone/mosaik-elements';
import { CustomElement } from '../../Abstracts/CustomElement';
// #endregion
/**
 * The `{@link LayoutElement}` element.
 *
 * @public
 */
export class LayoutElement extends CustomElement {
    // #region Fields
    _slotChangeSubscription;
    _slot;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._slotChangeSubscription = null;
        this._slot = null;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `{@link is}` property.
     * The `{@link is}` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-layout';
    }
    /**
     * Gets or sets the `items` property.
     *
     * @public
     * @readonly
     */
    get items() {
        return this._slot?.assignedElements();
    }
    // #endregion
    // #region Methods
    /**
     * @public
     * @override
     */
    disconnectedCallback() {
        super.disconnectedCallback();
        this._slotChangeSubscription?.dispose();
        this._slotChangeSubscription = null;
        this._slot = null;
    }
    /**
     * @protected
     * @override
     */
    onApplyTemplate() {
        super.onApplyTemplate();
        this._slot = getSlot(this.shadowRoot);
        if (this._slot) {
            this._slotChangeSubscription = on(this._slot, 'slotchange', () => this.onItemsChanged());
        }
    }
    /**
     * @protected
     * @virtual
     */
    onItemsChanged() {
        if (this._slot?.assignedElements().length === 0) {
            RendererServiceLocator.current.setAttribute(this, 'empty');
        }
        else {
            RendererServiceLocator.current.removeAttribute(this, 'empty');
        }
    }
}
//# sourceMappingURL=LayoutElement.js.map