atomicuilibrary 0.0.1

package/dist/collection/components/masonry/masonry.js

@@ -0,0 +1,1104 @@
+import { h } from "@stencil/core";
+export class Masonry {
+    el;
+    items = [];
+    columns = 3;
+    gap = 16;
+    layoutType = 'masonry';
+    itemMinWidth = 200;
+    itemMaxWidth = 400;
+    breakpoints = '{"640":2,"768":3,"1024":4,"1280":5}';
+    filterBy = '';
+    sortBy = '';
+    sortOrder = 'asc';
+    animationDuration = 300;
+    enableAnimation = true;
+    loadingState = false;
+    emptyMessage = 'No items to display';
+    showFilters = false;
+    filterOptions = [];
+    lazyLoad = false;
+    lazyLoadMargin = '200px';
+    infiniteScroll = false;
+    infiniteScrollDistance = 200;
+    selectable = false;
+    multiSelect = false;
+    showBatchActions = false;
+    lightbox = false;
+    filteredItems = [];
+    currentColumns = 3;
+    isResizing = false;
+    selectedItems = new Set();
+    loadedImages = new Set();
+    visibleItems = 12;
+    activeImageIndex = -1;
+    isLightboxOpen = false;
+    itemClick;
+    filterChange;
+    sortChange;
+    itemSelectionChange;
+    layoutChange;
+    itemsLoaded;
+    batchDelete;
+    resizeObserver;
+    componentWillLoad() {
+        this.updateFilteredItems();
+        this.calculateColumns();
+    }
+    componentDidLoad() {
+        this.setupResizeObserver();
+        if (this.infiniteScroll) {
+            this.setupInfiniteScroll();
+        }
+        if (this.lazyLoad) {
+            this.setupLazyLoading();
+        }
+    }
+    handleWindowKeyDown(event) {
+        // Handle Lightbox navigation
+        if (this.isLightboxOpen && this.lightbox) {
+            if (event.key === 'Escape')
+                this.closeLightbox();
+            if (event.key === 'ArrowRight')
+                this.nextImage(event);
+            if (event.key === 'ArrowLeft')
+                this.prevImage(event);
+            return;
+        }
+        // Only handle if component has focus or selection is active
+        if (this.selectedItems.size > 0 || document.activeElement === this.el) {
+            this.handleKeyDown(event);
+        }
+    }
+    handleKeyDown(event) {
+        if (!this.selectable)
+            return;
+        // Ctrl+A: Select all items
+        if (event.ctrlKey && event.key === 'a') {
+            event.preventDefault();
+            this.selectAll();
+            return;
+        }
+        // Escape: Deselect all
+        if (event.key === 'Escape' && this.selectedItems.size > 0) {
+            event.preventDefault();
+            this.deselectAll();
+            return;
+        }
+        // Delete: Delete selected items
+        if (event.key === 'Delete' && this.selectedItems.size > 0) {
+            event.preventDefault();
+            this.deleteSelected();
+            return;
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.infiniteScrollObserver) {
+            this.infiniteScrollObserver.disconnect();
+        }
+        if (this.lazyLoadObserver) {
+            this.lazyLoadObserver.disconnect();
+        }
+    }
+    infiniteScrollObserver;
+    lazyLoadObserver;
+    setupInfiniteScroll() {
+        if (typeof globalThis.IntersectionObserver === 'undefined') {
+            return;
+        }
+        this.infiniteScrollObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting && this.visibleItems < this.filteredItems.length) {
+                    this.visibleItems = Math.min(this.visibleItems + 12, this.filteredItems.length);
+                    this.itemsLoaded.emit({ count: this.visibleItems, total: this.filteredItems.length });
+                }
+            });
+        }, { rootMargin: `${this.infiniteScrollDistance}px` });
+        // Attach observer to sentinel element after render
+        setTimeout(() => {
+            const sentinel = this.el.shadowRoot?.querySelector('.infinite-scroll-sentinel');
+            if (sentinel) {
+                this.infiniteScrollObserver.observe(sentinel);
+            }
+        }, 100);
+    }
+    setupLazyLoading() {
+        if (typeof globalThis.IntersectionObserver === 'undefined') {
+            return;
+        }
+        this.lazyLoadObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const index = parseInt(entry.target.getAttribute('data-index'));
+                    this.loadedImages = new Set([...this.loadedImages, index]);
+                    const img = entry.target;
+                    const dataSrc = img.getAttribute('data-src');
+                    if (dataSrc && !img.src) {
+                        img.src = dataSrc;
+                    }
+                    this.lazyLoadObserver.unobserve(entry.target);
+                }
+            });
+        }, { rootMargin: this.lazyLoadMargin });
+        // Attach observer to lazy images after render
+        setTimeout(() => {
+            const lazyImages = this.el.shadowRoot?.querySelectorAll('img[data-src]');
+            lazyImages?.forEach(img => this.lazyLoadObserver.observe(img));
+        }, 100);
+    }
+    toggleSelection(index, event) {
+        if (!this.selectable)
+            return;
+        if (event) {
+            event.stopPropagation();
+        }
+        const newSelected = new Set(this.selectedItems);
+        if (newSelected.has(index)) {
+            newSelected.delete(index);
+        }
+        else {
+            if (!this.multiSelect) {
+                newSelected.clear();
+            }
+            newSelected.add(index);
+        }
+        this.selectedItems = newSelected;
+        const selectedIndices = Array.from(this.selectedItems);
+        const selectedItemsData = selectedIndices.map(i => this.filteredItems[i]);
+        this.itemSelectionChange.emit({ selectedItems: selectedItemsData, indices: selectedIndices });
+    }
+    selectAll() {
+        if (!this.selectable)
+            return;
+        this.selectedItems = new Set(this.filteredItems.map((_, i) => i));
+        const selectedIndices = Array.from(this.selectedItems);
+        const selectedItemsData = selectedIndices.map(i => this.filteredItems[i]);
+        this.itemSelectionChange.emit({ selectedItems: selectedItemsData, indices: selectedIndices });
+    }
+    deselectAll() {
+        this.selectedItems = new Set();
+        this.itemSelectionChange.emit({ selectedItems: [], indices: [] });
+    }
+    deleteSelected() {
+        const indicesToDelete = Array.from(this.selectedItems);
+        const itemsToDelete = indicesToDelete.map(i => this.filteredItems[i]);
+        this.batchDelete.emit({ items: itemsToDelete, indices: indicesToDelete });
+        this.selectedItems = new Set();
+        this.itemSelectionChange.emit({ selectedItems: [], indices: [] });
+    }
+    watchItemsChange() {
+        this.updateFilteredItems();
+    }
+    watchColumnsChange() {
+        this.calculateColumns();
+    }
+    getParsedItems() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch {
+                console.error('Invalid items JSON');
+                return [];
+            }
+        }
+        return this.items;
+    }
+    getParsedFilterOptions() {
+        if (typeof this.filterOptions === 'string') {
+            try {
+                return JSON.parse(this.filterOptions);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.filterOptions;
+    }
+    getParsedBreakpoints() {
+        try {
+            return JSON.parse(this.breakpoints);
+        }
+        catch {
+            return { 640: 2, 768: 3, 1024: 4, 1280: 5 };
+        }
+    }
+    setupResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => {
+            this.isResizing = true;
+            this.calculateColumns();
+            setTimeout(() => {
+                this.isResizing = false;
+            }, 100);
+        });
+        const container = this.el.shadowRoot.querySelector('.masonry-container');
+        if (container) {
+            this.resizeObserver.observe(container);
+        }
+    }
+    calculateColumns() {
+        const container = this.el.shadowRoot?.querySelector('.masonry-container');
+        if (!container)
+            return;
+        const width = container.clientWidth;
+        const breakpoints = this.getParsedBreakpoints();
+        const sortedBreakpoints = Object.keys(breakpoints)
+            .map(Number)
+            .sort((a, b) => b - a);
+        let cols = this.columns;
+        for (const bp of sortedBreakpoints) {
+            if (width >= bp) {
+                cols = breakpoints[bp];
+                break;
+            }
+        }
+        this.currentColumns = cols;
+    }
+    updateFilteredItems() {
+        let items = [...this.getParsedItems()];
+        // Filter
+        if (this.filterBy) {
+            items = items.filter(item => {
+                const [key, value] = this.filterBy.split(':');
+                return item[key] && item[key].toString().toLowerCase().includes(value.toLowerCase());
+            });
+        }
+        // Sort
+        if (this.sortBy) {
+            items.sort((a, b) => {
+                const aVal = a[this.sortBy];
+                const bVal = b[this.sortBy];
+                if (typeof aVal === 'number' && typeof bVal === 'number') {
+                    return this.sortOrder === 'asc' ? aVal - bVal : bVal - aVal;
+                }
+                const aStr = String(aVal).toLowerCase();
+                const bStr = String(bVal).toLowerCase();
+                if (this.sortOrder === 'asc') {
+                    return aStr.localeCompare(bStr);
+                }
+                else {
+                    return bStr.localeCompare(aStr);
+                }
+            });
+        }
+        this.filteredItems = items;
+    }
+    handleItemClick = (item, index) => {
+        this.itemClick.emit({ item, index });
+    };
+    handleFilterChange = (key, value) => {
+        this.filterChange.emit({ filterBy: key, value });
+    };
+    handleSortChange = (sortBy, order) => {
+        this.sortChange.emit({ sortBy, order });
+    };
+    getColumnItems(columnIndex) {
+        if (this.layoutType === 'masonry') {
+            return this.filteredItems.filter((_, index) => index % this.currentColumns === columnIndex);
+        }
+        return this.filteredItems;
+    }
+    renderFilters() {
+        if (!this.showFilters)
+            return null;
+        const filterOptions = this.getParsedFilterOptions();
+        return (h("div", { class: "masonry-filters" }, h("div", { class: "filter-group" }, h("label", null, "Filter:"), h("select", { onChange: (e) => {
+                const val = e.target.value;
+                const key = filterOptions[0]?.key || 'category';
+                this.handleFilterChange(key, val);
+            } }, h("option", { value: "" }, "All"), filterOptions.map(option => (h("option", { value: option.key }, option.label))))), h("div", { class: "filter-group" }, h("label", null, "Sort:"), h("select", { onChange: (e) => this.handleSortChange(e.target.value, this.sortOrder) }, h("option", { value: "" }, "None"), h("option", { value: "title" }, "Title"), h("option", { value: "date" }, "Date"), h("option", { value: "size" }, "Size"))), h("div", { class: "filter-group" }, h("ui-button", { variant: "ghost", class: { 'sort-button': true, 'active': this.sortOrder === 'asc' }, onClick: () => this.handleSortChange(this.sortBy, 'asc'), icon: "arrow-up", iconLibrary: "fontawesome", iconOnly: true, size: "sm" }), h("ui-button", { variant: "ghost", class: { 'sort-button': true, 'active': this.sortOrder === 'desc' }, onClick: () => this.handleSortChange(this.sortBy, 'desc'), icon: "arrow-down", iconLibrary: "fontawesome", iconOnly: true, size: "sm" }))));
+    }
+    renderMasonryLayout() {
+        const itemsToRender = this.infiniteScroll ? this.filteredItems.slice(0, this.visibleItems) : this.filteredItems;
+        return (h("div", { class: "masonry-columns", role: "grid", "aria-label": "Masonry layout", style: {
+                'column-count': this.currentColumns.toString(),
+                'column-gap': `${this.gap}px`,
+            } }, itemsToRender.map((item, index) => (h("div", { class: {
+                'masonry-item': true,
+                'animate': this.enableAnimation && !this.isResizing,
+                'selected': this.selectedItems.has(index),
+            }, style: {
+                'margin-bottom': `${this.gap}px`,
+                'animation-delay': this.enableAnimation ? `${index * 50}ms` : '0ms',
+            }, onClick: () => this.handleItemClick(item, index), role: "gridcell", "aria-selected": this.selectedItems.has(index) ? 'true' : 'false', tabindex: 0 }, this.selectable && (h("div", { class: "selection-checkbox" }, h("ui-checkbox", { checked: this.selectedItems.has(index), onCheckboxChange: (e) => this.toggleSelection(index, e), ariaLabel: `Select ${item.title || `item ${index + 1}`}`, size: "sm" }))), h("slot", { name: `item-${index}` }, this.renderDefaultItem(item, index))))), this.infiniteScroll && this.visibleItems < this.filteredItems.length && (h("div", { class: "infinite-scroll-sentinel" }))));
+    }
+    renderGridLayout() {
+        const itemsToRender = this.infiniteScroll ? this.filteredItems.slice(0, this.visibleItems) : this.filteredItems;
+        return (h("div", { class: "masonry-grid", role: "grid", "aria-label": "Grid layout", style: {
+                'grid-template-columns': `repeat(${this.currentColumns}, 1fr)`,
+                'gap': `${this.gap}px`,
+            } }, itemsToRender.map((item, index) => (h("div", { class: {
+                'masonry-item': true,
+                'animate': this.enableAnimation && !this.isResizing,
+                'selected': this.selectedItems.has(index),
+            }, style: {
+                'animation-delay': this.enableAnimation ? `${index * 50}ms` : '0ms',
+            }, onClick: () => this.handleItemClick(item, index), role: "gridcell", "aria-selected": this.selectedItems.has(index) ? 'true' : 'false', tabindex: 0 }, this.selectable && (h("div", { class: "selection-checkbox" }, h("ui-checkbox", { checked: this.selectedItems.has(index), onCheckboxChange: (e) => this.toggleSelection(index, e), ariaLabel: `Select ${item.title || `item ${index + 1}`}`, size: "sm" }))), h("slot", { name: `item-${index}` }, this.renderDefaultItem(item, index))))), this.infiniteScroll && this.visibleItems < this.filteredItems.length && (h("div", { class: "infinite-scroll-sentinel" }))));
+    }
+    renderColumnsLayout() {
+        const columns = Array.from({ length: this.currentColumns }, (_, i) => i);
+        const itemsToRender = this.infiniteScroll ? this.filteredItems.slice(0, this.visibleItems) : this.filteredItems;
+        return (h("div", { class: "masonry-flex-columns", role: "grid", "aria-label": "Column layout", style: {
+                'gap': `${this.gap}px`,
+            } }, columns.map(columnIndex => (h("div", { class: "masonry-column", style: { 'flex': '1' }, role: "row" }, this.getColumnItems(columnIndex).map((item, itemIndex) => {
+            const globalIndex = columnIndex + (itemIndex * this.currentColumns);
+            if (globalIndex >= itemsToRender.length)
+                return null;
+            return (h("div", { class: {
+                    'masonry-item': true,
+                    'animate': this.enableAnimation && !this.isResizing,
+                    'selected': this.selectedItems.has(globalIndex),
+                }, style: {
+                    'margin-bottom': `${this.gap}px`,
+                    'animation-delay': this.enableAnimation ? `${globalIndex * 50}ms` : '0ms',
+                }, onClick: () => this.handleItemClick(item, globalIndex), role: "gridcell", "aria-selected": this.selectedItems.has(globalIndex) ? 'true' : 'false', tabindex: 0 }, this.selectable && (h("div", { class: "selection-checkbox" }, h("ui-checkbox", { checked: this.selectedItems.has(globalIndex), onCheckboxChange: (e) => this.toggleSelection(globalIndex, e), ariaLabel: `Select ${item.title || `item ${globalIndex + 1}`}`, size: "sm" }))), h("slot", { name: `item-${globalIndex}` }, this.renderDefaultItem(item, globalIndex))));
+        })))), this.infiniteScroll && this.visibleItems < this.filteredItems.length && (h("div", { class: "infinite-scroll-sentinel" }))));
+    }
+    // --- Lightbox Methods ---
+    openLightbox(index, event) {
+        if (!this.lightbox)
+            return;
+        event.stopPropagation();
+        this.activeImageIndex = index;
+        this.isLightboxOpen = true;
+        document.body.style.overflow = 'hidden'; // Prevent scroll
+    }
+    closeLightbox() {
+        this.isLightboxOpen = false;
+        document.body.style.overflow = '';
+    }
+    nextImage(event) {
+        if (event)
+            event.stopPropagation();
+        if (this.activeImageIndex < this.filteredItems.length - 1) {
+            this.activeImageIndex++;
+        }
+        else {
+            this.activeImageIndex = 0; // Loop
+        }
+    }
+    prevImage(event) {
+        if (event)
+            event.stopPropagation();
+        if (this.activeImageIndex > 0) {
+            this.activeImageIndex--;
+        }
+        else {
+            this.activeImageIndex = this.filteredItems.length - 1; // Loop
+        }
+    }
+    renderLightbox() {
+        if (!this.isLightboxOpen || this.activeImageIndex === -1)
+            return null;
+        const item = this.filteredItems[this.activeImageIndex];
+        if (!item)
+            return null;
+        return (h("div", { class: "masonry-lightbox", onClick: () => this.closeLightbox() }, h("ui-button", { variant: "ghost", class: "lightbox-close", onClick: () => this.closeLightbox(), icon: "times", iconLibrary: "fontawesome", iconOnly: true, size: "lg", ariaLabel: "Close lightbox" }), h("div", { class: "lightbox-content", onClick: e => e.stopPropagation() }, h("ui-button", { variant: "ghost", class: "lightbox-nav prev", onClick: (e) => this.prevImage(e), icon: "chevron-left", iconLibrary: "fontawesome", iconOnly: true, size: "lg", ariaLabel: "Previous image" }), h("div", { class: "lightbox-image-container" }, h("img", { src: item.image, alt: item.title, class: "lightbox-image" }), h("div", { class: "lightbox-details" }, h("h3", null, item.title), item.description && h("p", null, item.description))), h("ui-button", { variant: "ghost", class: "lightbox-nav next", onClick: (e) => this.nextImage(e), icon: "chevron-right", iconLibrary: "fontawesome", iconOnly: true, size: "lg", ariaLabel: "Next image" })), h("div", { class: "lightbox-counter" }, this.activeImageIndex + 1, " / ", this.filteredItems.length)));
+    }
+    // --- Skeleton Loading ---
+    renderSkeleton() {
+        // Generate empty placeholders matching current columns
+        const skeletonCount = this.currentColumns * 3; // Enough to fill screen
+        const items = Array.from({ length: skeletonCount }, (_, i) => i);
+        // We can reuse the masonry layout logic but with skeleton items
+        const columns = Array.from({ length: this.currentColumns }, (_, i) => i);
+        return (h("div", { class: "masonry-flex-columns skeleton-wrapper", style: { 'gap': `${this.gap}px` } }, columns.map(columnIndex => (h("div", { class: "masonry-column", style: { 'flex': '1' } }, items
+            .filter((_, index) => index % this.currentColumns === columnIndex)
+            .map((_, i) => (h("div", { class: "masonry-item skeleton-item", style: {
+                'margin-bottom': `${this.gap}px`,
+                // Randomize height for realistic effect
+                'height': `${200 + (i * 50) % 200}px`
+            } }, h("div", { class: "skeleton-shimmer" })))))))));
+    }
+    renderDefaultItem(item, index) {
+        const itemStyle = {
+            'min-width': this.itemMinWidth ? `${this.itemMinWidth}px` : undefined,
+            'max-width': this.itemMaxWidth ? `${this.itemMaxWidth}px` : undefined,
+        };
+        return (h("div", { class: "default-item", style: itemStyle }, h("div", { class: "image-wrapper" }, item.image && (this.lazyLoad ? (h("img", { "data-src": item.image, "data-index": index.toString(), alt: item.title || 'Item', class: "lazy-image", style: { opacity: this.loadedImages.has(index) ? '1' : '0.3' } })) : (h("img", { src: item.image, alt: item.title || 'Item', loading: "lazy" }))), h("div", { class: "item-overlay" }, h("div", { class: "overlay-actions" }, this.lightbox && (h("ui-button", { variant: "ghost", onClick: (e) => this.openLightbox(index, e), ariaLabel: "View Fullscreen", icon: "expand-alt", iconLibrary: "fontawesome", iconOnly: true, size: "sm" })), h("ui-button", { variant: "ghost", ariaLabel: "Like", icon: "heart", iconLibrary: "fontawesome", iconOnly: true, size: "sm" }), h("ui-button", { variant: "ghost", ariaLabel: "Info", icon: "info", iconLibrary: "fontawesome", iconOnly: true, size: "sm" })))), item.title && h("h3", { class: "item-title" }, item.title), item.description && h("p", { class: "item-description" }, item.description), item.tags && (h("div", { class: "item-tags" }, item.tags.map(tag => (h("span", { class: "tag" }, tag)))))));
+    }
+    renderEmpty() {
+        return (h("div", { class: "masonry-empty" }, h("ui-icon", { name: "inbox", library: "fontawesome" }), h("p", null, this.emptyMessage)));
+    }
+    renderBatchActions() {
+        if (!this.showBatchActions || this.selectedItems.size === 0)
+            return null;
+        return (h("div", { class: "batch-actions-toolbar", role: "toolbar", "aria-label": "Batch actions" }, h("span", { class: "selection-count" }, this.selectedItems.size, " selected"), h("div", { class: "action-buttons" }, h("ui-button", { variant: "ghost", onClick: () => this.selectAll(), ariaLabel: "Select all items", icon: "check-square", iconLibrary: "fontawesome", label: "Select All" }), h("ui-button", { variant: "ghost", onClick: () => this.deselectAll(), ariaLabel: "Clear selection", icon: "times", iconLibrary: "fontawesome", label: "Clear" }), h("ui-button", { variant: "ghost", onClick: () => this.deleteSelected(), class: "delete-button", ariaLabel: "Delete selected items", icon: "trash", iconLibrary: "fontawesome", label: "Delete" }))));
+    }
+    render() {
+        if (this.loadingState) {
+            return this.renderSkeleton();
+        }
+        if (this.filteredItems.length === 0) {
+            return this.renderEmpty();
+        }
+        return (h("div", { class: "masonry-wrapper", tabindex: this.selectable ? 0 : -1 }, this.renderFilters(), this.renderBatchActions(), h("div", { class: {
+                'masonry-container': true,
+                [`masonry-${this.layoutType}`]: true,
+            } }, this.layoutType === 'masonry' && this.renderMasonryLayout(), this.layoutType === 'grid' && this.renderGridLayout(), this.layoutType === 'columns' && this.renderColumnsLayout()), this.renderLightbox()));
+    }
+    static get is() { return "ui-masonry"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["masonry.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["masonry.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<any> | string",
+                    "resolved": "any[] | string",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "3"
+            },
+            "gap": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "16"
+            },
+            "layoutType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "MasonryLayoutType",
+                    "resolved": "\"columns\" | \"grid\" | \"masonry\"",
+                    "references": {
+                        "MasonryLayoutType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/masonry/types.ts::MasonryLayoutType",
+                            "referenceLocation": "MasonryLayoutType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout-type",
+                "defaultValue": "'masonry'"
+            },
+            "itemMinWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-min-width",
+                "defaultValue": "200"
+            },
+            "itemMaxWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-max-width",
+                "defaultValue": "400"
+            },
+            "breakpoints": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "breakpoints",
+                "defaultValue": "'{\"640\":2,\"768\":3,\"1024\":4,\"1280\":5}'"
+            },
+            "filterBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-by",
+                "defaultValue": "''"
+            },
+            "sortBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sort-by",
+                "defaultValue": "''"
+            },
+            "sortOrder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'asc' | 'desc'",
+                    "resolved": "\"asc\" | \"desc\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sort-order",
+                "defaultValue": "'asc'"
+            },
+            "animationDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation-duration",
+                "defaultValue": "300"
+            },
+            "enableAnimation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-animation",
+                "defaultValue": "true"
+            },
+            "loadingState": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading-state",
+                "defaultValue": "false"
+            },
+            "emptyMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-message",
+                "defaultValue": "'No items to display'"
+            },
+            "showFilters": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-filters",
+                "defaultValue": "false"
+            },
+            "filterOptions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{ key: string; label: string; }> | string",
+                    "resolved": "string | { key: string; label: string; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-options",
+                "defaultValue": "[]"
+            },
+            "lazyLoad": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lazy-load",
+                "defaultValue": "false"
+            },
+            "lazyLoadMargin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lazy-load-margin",
+                "defaultValue": "'200px'"
+            },
+            "infiniteScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "infinite-scroll",
+                "defaultValue": "false"
+            },
+            "infiniteScrollDistance": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "infinite-scroll-distance",
+                "defaultValue": "200"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            },
+            "multiSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multi-select",
+                "defaultValue": "false"
+            },
+            "showBatchActions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-batch-actions",
+                "defaultValue": "false"
+            },
+            "lightbox": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lightbox",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "filteredItems": {},
+            "currentColumns": {},
+            "isResizing": {},
+            "selectedItems": {},
+            "loadedImages": {},
+            "visibleItems": {},
+            "activeImageIndex": {},
+            "isLightboxOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemClick",
+                "name": "itemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "filterChange",
+                "name": "filterChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ filterBy: string; value: string; }",
+                    "resolved": "{ filterBy: string; value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "sortChange",
+                "name": "sortChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ sortBy: string; order: string; }",
+                    "resolved": "{ sortBy: string; order: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "itemSelectionChange",
+                "name": "itemSelectionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ selectedItems: any[]; indices: number[]; }",
+                    "resolved": "{ selectedItems: any[]; indices: number[]; }",
+                    "references": {}
+                }
+            }, {
+                "method": "layoutChange",
+                "name": "layoutChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ layoutType: string; columns: number; }",
+                    "resolved": "{ layoutType: string; columns: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "itemsLoaded",
+                "name": "itemsLoaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ count: number; total: number; }",
+                    "resolved": "{ count: number; total: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "batchDelete",
+                "name": "batchDelete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ items: any[]; indices: number[]; }",
+                    "resolved": "{ items: any[]; indices: number[]; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "watchItemsChange"
+            }, {
+                "propName": "filterBy",
+                "methodName": "watchItemsChange"
+            }, {
+                "propName": "sortBy",
+                "methodName": "watchItemsChange"
+            }, {
+                "propName": "sortOrder",
+                "methodName": "watchItemsChange"
+            }, {
+                "propName": "columns",
+                "methodName": "watchColumnsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleWindowKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}