// #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 { Fitable } from '../../../Behaviors/Fitable';
import { Orientable } from '../../../Behaviors/Orientable';
import { Reversible } from '../../../Behaviors/Reversible';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { HorizontalAlignment } from '../../../Types/HorizontalAlignment';
import { VerticalAlignment } from '../../../Types/VerticalAlignment';
import { LayoutElement } from '../Abstracts/LayoutElement';
import { stackElementTemplate } from './StackElementTemplate';
import { stackElementJoyStyle } from './Themes/StackElement.Joy';
import { stackElementRetroStyle } from './Themes/StackElement.Retro';
import { stackElementCosmopolitanStyle } from './Themes/StackElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
import { Gapable } from '../../../Behaviors/Gapable';
// #endregion
/**
 * Stack - A layout component used to arrange other components in a stacked manner.
 *
 * @description
 * The Stack component is a layout element designed to arrange child components or elements in a stacked or layered manner,
 * where each child is placed on top of the previous one. It is commonly used for creating vertical or horizontal stacks
 * of content, such as menus, navigation bars, or card layouts.
 * Stacks provide a simple way to control the order and alignment of elements within a container, making it easy to create
 * visually appealing and organized layouts in web and application interfaces.
 *
 * @element mosaik-stack
 * @category Layout
 *
 * @slot - The default slot.
 *
 * @example
 * ```html
 * <mosaik-stack></mosaik-stack>
 * ```
 *
 * @public
 */
let StackElement = class StackElement extends Themeable(Reversible(Orientable(Fitable(Gapable(LayoutElement))))) {
    // #region Fields
    _horizontalAlignment;
    _verticalAlignment;
    // #endregion
    // #region Ctor
    /**
     * Constructs a new instance of the `StackElement` class.
     *
     * @public
     */
    constructor() {
        super();
        this._horizontalAlignment = HorizontalAlignment.Stretch;
        this._verticalAlignment = VerticalAlignment.Stretch;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @override
     * @readonly
    */
    static get is() {
        return 'mosaik-stack';
    }
    /**
     * Gets or sets the `horizontalAlignment` property.
     *
     * @public
     * @attr
     */
    get horizontalAlignment() {
        return this._horizontalAlignment;
    }
    set horizontalAlignment(value) {
        if (this._horizontalAlignment !== value) {
            this._horizontalAlignment = value;
            this.requestUpdate('horizontalAlignment');
        }
    }
    /**
     * Gets or sets the `verticalAlignment` property.
     *
     * @public
     * @attr
     */
    get verticalAlignment() {
        return this._verticalAlignment;
    }
    set verticalAlignment(value) {
        if (this._verticalAlignment !== value) {
            this._verticalAlignment = value;
            this.requestUpdate('verticalAlignment');
        }
    }
};
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], StackElement.prototype, "horizontalAlignment", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], StackElement.prototype, "verticalAlignment", null);
StackElement = __decorate([
    Component({
        selector: 'mosaik-stack',
        template: stackElementTemplate,
        themes: {
            joy: stackElementJoyStyle,
            retro: stackElementRetroStyle,
            cosmopolitan: stackElementCosmopolitanStyle
        },
        imports: []
    }),
    __metadata("design:paramtypes", [])
], StackElement);
export { StackElement };
//# sourceMappingURL=StackElement.js.map