// #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 { RendererServiceLocator } from '../../../../Dom/Renderer';
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 { Watch } from '../../../Decorators/WatchDecorator';
import { LayoutElement } from '../Abstracts/LayoutElement';
import { wrapElementTemplate } from './WrapElementTemplate';
import { wrapElementJoyStyle } from './Themes/WrapElement.Joy';
import { wrapElementRetroStyle } from './Themes/WrapElement.Retro';
import { wrapElementCosmopolitanStyle } from './Themes/WrapElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
import { Gapable } from '../../../Behaviors/Gapable';
// #endregion
/**
 * Wrap - A layout component that wraps its child elements to create a responsive and flexible layout.
 *
 * @description
 * The Wrap component is a layout element designed to wrap its child components or elements to create a responsive and
 * flexible layout. It is commonly used for arranging elements in a grid-like format where items flow to the next row or
 * column when there's not enough space horizontally.
 *
 * @element mosaik-wrap
 * @category Layout
 *
 * @example
 * ```html
 * <mosaik-wrap>
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 *   <!-- Add more child elements as needed -->
 * </mosaik-wrap>
 * ```
 *
 * @public
 */
let WrapElement = class WrapElement extends Themeable(Reversible(Orientable(Fitable(Gapable(LayoutElement))))) {
    // #region Fields
    _columns;
    _reverse;
    // #endregion
    // #region Ctor
    /**
     * Constructs a new instance of the `WrapElement` class.
     *
     * @public
     */
    constructor() {
        super();
        this._columns = 1;
        this._reverse = false;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @override
     * @readonly
    */
    static get is() {
        return 'mosaik-wrap';
    }
    /**
     * The `columns` property represents the number of columns before wrapping.
     *
     * @public
     */
    get columns() {
        return this._columns;
    }
    set columns(value) {
        if (this._columns !== value) {
            this._columns = value;
            this.requestUpdate('columns');
        }
    }
    // #endregion
    // #region Methods
    /**
     * @protected
     * @override
     */
    onItemsChanged() {
        super.onItemsChanged();
        this.items.forEach((x) => this.renderChild(x));
    }
    /**
     * @protected
     */
    onGapChanged() {
        this.items.forEach((x) => this.renderChild(x));
    }
    /**
     * @protected
     */
    onColumnsChanged() {
        this.items.forEach((x) => this.renderChild(x));
    }
    /**
     * @private
     */
    renderChild(element) {
        RendererServiceLocator.current.setStyle(element, 'flex-basis', 'calc(calc(100% / var(--wrap-columns)) - calc(calc(var(--wrap-gap) * calc(var(--wrap-columns) - 1)) / var(--wrap-columns)))');
        RendererServiceLocator.current.setStyle(element, 'flex-shrink', '1');
        RendererServiceLocator.current.setStyle(element, 'max-width', 'calc(calc(100% / var(--wrap-columns)) - calc(calc(var(--wrap-gap) * calc(var(--wrap-columns) - 1)) / var(--wrap-columns)))');
    }
};
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], WrapElement.prototype, "columns", null);
__decorate([
    Watch('gap', { waitUntilFirstUpdate: true }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], WrapElement.prototype, "onGapChanged", null);
__decorate([
    Watch('columns', { waitUntilFirstUpdate: true }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], WrapElement.prototype, "onColumnsChanged", null);
WrapElement = __decorate([
    Component({
        selector: 'mosaik-wrap',
        themes: {
            joy: wrapElementJoyStyle,
            retro: wrapElementRetroStyle,
            cosmopolitan: wrapElementCosmopolitanStyle
        },
        template: wrapElementTemplate
    }),
    __metadata("design:paramtypes", [])
], WrapElement);
export { WrapElement };
//# sourceMappingURL=WrapElement.js.map