// #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 { LitVirtualizer } from '@lit-labs/virtualizer';
import { html } from '../../../../Dom/Html';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Property } from '../../../Decorators/PropertyDecorator';
import { CustomElement } from '../../Abstracts/CustomElement';
import { virtualizeElementTemplate } from './VirtualizeElementTemplate';
import { virtualizeElementJoyStyle } from './Themes/VirtualizeElement.Joy';
import { virtualizeElementMemphisStyle } from './Themes/VirtualizeElement.Memphis';
import { virtualizeElementCosmopolitanStyle } from './Themes/VirtualizeElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
// #endregion
/**
 * Virtualize - A performance-optimized list container that renders only visible items for large datasets.
 *
 * Implements virtual scrolling to efficiently handle thousands of items by rendering only what's currently
 * visible in the viewport. Reduces DOM size and improves performance for large lists and grids.
 *
 * @name VirtualizeElement
 * @element mosaik-virtualize
 * @category Layout
 *
 * @csspart virtualizer - The internal lit-virtualizer container element
 *
 * @cssprop --virtualizer-height - Height of the virtualization container
 * @cssprop --virtualizer-width - Width of the virtualization container
 * @cssprop --virtualizer-item-height - Default height for virtualized items
 * @cssprop --virtualizer-gap - Spacing between virtualized items
 *
 * @dependency LitVirtualizer - Core virtualization engine from @lit-labs/virtualizer
 *
 * @example
 * ```typescript
 * // Basic virtualized list
 * const virtualizer = document.createElement('mosaik-virtualize');
 * virtualizer.items = Array.from({length: 10000}, (_, i) => `Item ${i}`);
 * virtualizer.renderItem = (item) => html`<div class="list-item">${item}</div>`;
 * virtualizer.keyFunction = (item, index) => index;
 *
 * // Grid layout virtualization
 * virtualizer.layout = {
 *   type: 'grid',
 *   itemSize: { width: 200, height: 150 },
 *   gap: 16
 * };
 * ```
 *
 * @example
 * ```html
 * <!-- Virtualized user list -->
 * <mosaik-virtualize id="userList" scroller></mosaik-virtualize>
 *
 * <script>
 *   const userList = document.getElementById('userList');
 *   userList.items = users; // Large array of user objects
 *   userList.renderItem = (user) => html`
 *     <div class="user-card">
 *       <img src="${user.avatar}" alt="${user.name}">
 *       <h3>${user.name}</h3>
 *       <p>${user.email}</p>
 *     </div>
 *   `;
 *   userList.keyFunction = (user) => user.id;
 * </script>
 * ```
 *
 * @public
 */
let VirtualizeElement = class VirtualizeElement extends Themeable(CustomElement) {
    // #region Fields
    _items;
    _renderItem;
    _keyFunction;
    _layout;
    _scroller;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._items = [];
        this._renderItem = () => html.nothing;
        this._keyFunction = () => null;
        this._layout = {};
        this._scroller = false;
    }
    // #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-virtualize';
    }
    /**
        * Gets or sets the `items` property.
        *
        * @public
        */
    get items() {
        return this._items;
    }
    set items(value) {
        if (this._items !== value) {
            this._items = value;
            this.requestUpdate('items');
        }
    }
    /**
     * Gets or sets the `renderItem` property.
     *
     * @public
     */
    get renderItem() {
        return this._renderItem;
    }
    set renderItem(value) {
        if (this._renderItem !== value) {
            this._renderItem = value;
            this.requestUpdate('renderItem');
        }
    }
    /**
     * Gets or sets the `keyFunction` property.
     *
     * @public
     */
    get keyFunction() {
        return this._keyFunction;
    }
    set keyFunction(value) {
        if (this._keyFunction !== value) {
            this._keyFunction = value;
            this.requestUpdate('keyFunction');
        }
    }
    /**
     * Gets or sets the `layout` property.
     *
     * @public
     */
    get layout() {
        return this._layout;
    }
    set layout(value) {
        if (this._layout !== value) {
            this._layout = value;
            this.requestUpdate('layout');
        }
    }
    /**
     * Gets or sets the `scroller` property.
     *
     * @public
     * @attr
     */
    get scroller() {
        return this._scroller;
    }
    set scroller(value) {
        if (this._scroller !== value) {
            this._scroller = value;
            this.requestUpdate('scroller');
        }
    }
};
__decorate([
    Property({ type: (Array) }),
    __metadata("design:type", Array),
    __metadata("design:paramtypes", [Array])
], VirtualizeElement.prototype, "items", null);
__decorate([
    Property({ type: Function }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function])
], VirtualizeElement.prototype, "renderItem", null);
__decorate([
    Property({ type: Function }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function])
], VirtualizeElement.prototype, "keyFunction", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], VirtualizeElement.prototype, "layout", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], VirtualizeElement.prototype, "scroller", null);
VirtualizeElement = __decorate([
    Component({
        selector: 'mosaik-virtualize',
        template: virtualizeElementTemplate,
        themes: {
            joy: virtualizeElementJoyStyle,
            memphis: virtualizeElementMemphisStyle,
            cosmopolitan: virtualizeElementCosmopolitanStyle
        },
        imports: [
            LitVirtualizer
        ]
    }),
    __metadata("design:paramtypes", [])
], VirtualizeElement);
export { VirtualizeElement };
//# sourceMappingURL=VirtualizeElement.js.map