matcha-components 20.128.0 → 20.133.0

package/fesm2022/matcha-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Output, HostBinding, Input, Component, ContentChildren, ElementRef, Renderer2, Inject, ViewEncapsulation, ChangeDetectionStrategy, HostListener, ContentChild, Directive, forwardRef, ViewChild, InjectionToken, inject, Injectable, TemplateRef, Optional, NgModule, createComponent, PLATFORM_ID, Pipe } from '@angular/core';
 import { animation, style, animate, trigger, transition, useAnimation, state, query, stagger, animateChild, sequence, group } from '@angular/animations';
-import { Subscription, Subject, BehaviorSubject, fromEvent, of } from 'rxjs';
+import { Subscription, Subject, fromEvent, debounceTime as debounceTime$1, takeUntil as takeUntil$1, BehaviorSubject, of } from 'rxjs';
 import { debounceTime, takeUntil, filter, startWith, map, distinctUntilChanged } from 'rxjs/operators';
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
@@ -1888,7 +1888,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class MatchaMasonryComponent {
-    constructor() {
+    constructor(elementRef, cdr) {
+        this.elementRef = elementRef;
+        this.cdr = cdr;
         this.colSize = null;
         this.smColSize = null;
         this.mdColSize = null;
@@ -1899,38 +1901,126 @@ class MatchaMasonryComponent {
         this.gapMd = null;
         this.gapLg = null;
         this.gapXl = null;
+        this.destroy$ = new Subject();
+        this.originalItems = [];
+        this.isDistributing = false;
     }
-    get classes() {
-        const col = this.colSize ? `masonry-${this.colSize}` : '';
-        const smCol = this.smColSize ? `masonry-sm-${this.smColSize}` : '';
-        const mdCol = this.mdColSize ? `masonry-md-${this.mdColSize}` : '';
-        const lgCol = this.lgColSize ? `masonry-lg-${this.lgColSize}` : '';
-        const xlCol = this.xlColSize ? `masonry-xl-${this.xlColSize}` : '';
-        const gap = this.gap ? `masonry-gap-${this.gap}` : '';
-        const gapSm = this.gapSm ? `masonry-gap-sm-${this.gapSm}` : '';
-        const gapMd = this.gapMd ? `masonry-gap-md-${this.gapMd}` : '';
-        const gapLg = this.gapLg ? `masonry-gap-lg-${this.gapLg}` : '';
-        const gapXl = this.gapXl ? `masonry-gap-xl-${this.gapXl}` : '';
-        let activeClasses = '';
-        activeClasses += col ? ` ${col}` : '';
-        activeClasses += smCol ? ` ${smCol}` : '';
-        activeClasses += mdCol ? ` ${mdCol}` : '';
-        activeClasses += lgCol ? ` ${lgCol}` : '';
-        activeClasses += xlCol ? ` ${xlCol}` : '';
-        activeClasses += gap ? ` ${gap}` : '';
-        activeClasses += gapSm ? ` ${gapSm}` : '';
-        activeClasses += gapMd ? ` ${gapMd}` : '';
-        activeClasses += gapLg ? ` ${gapLg}` : '';
-        activeClasses += gapXl ? ` ${gapXl}` : '';
-        return activeClasses;
+    ngAfterViewInit() {
+        // Delay para garantir que o conteúdo foi projetado
+        setTimeout(() => {
+            this.captureOriginalItems();
+            this.distributeItems();
+            this.setupResizeObserver();
+        }, 50);
+        // Observar mudanças de tamanho da janela
+        fromEvent(window, 'resize')
+            .pipe(debounceTime$1(200), takeUntil$1(this.destroy$))
+            .subscribe(() => this.distributeItems());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaMasonryComponent, isStandalone: false, selector: "matcha-masonry", inputs: { colSize: ["col", "colSize"], smColSize: ["col-sm", "smColSize"], mdColSize: ["col-md", "mdColSize"], lgColSize: ["col-lg", "lgColSize"], xlColSize: ["col-xl", "xlColSize"], gap: "gap", gapSm: ["gap-sm", "gapSm"], gapMd: ["gap-md", "gapMd"], gapLg: ["gap-lg", "gapLg"], gapXl: ["gap-xl", "gapXl"] }, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    captureOriginalItems() {
+        const contentWrapper = this.elementRef.nativeElement.querySelector('.masonry-content-wrapper');
+        if (!contentWrapper)
+            return;
+        // Capturar todos os filhos diretos (elementos projetados via ng-content)
+        this.originalItems = Array.from(contentWrapper.children);
+    }
+    setupResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => {
+            if (!this.isDistributing) {
+                this.distributeItems();
+            }
+        });
+        // Observar os itens originais
+        this.originalItems.forEach(item => {
+            this.resizeObserver?.observe(item);
+        });
+    }
+    distributeItems() {
+        if (this.isDistributing || this.originalItems.length === 0)
+            return;
+        this.isDistributing = true;
+        const columnCount = this.getCurrentColumnCount();
+        console.log('🔵 Masonry Debug - Column count:', columnCount);
+        if (columnCount <= 0) {
+            this.isDistributing = false;
+            return;
+        }
+        const columnsContainer = this.elementRef.nativeElement.querySelector('.masonry-columns');
+        if (!columnsContainer) {
+            console.error('❌ Masonry Debug - .masonry-columns not found!');
+            this.isDistributing = false;
+            return;
+        }
+        console.log('🔵 Masonry Debug - Container width:', columnsContainer.offsetWidth);
+        // Limpar colunas existentes
+        columnsContainer.innerHTML = '';
+        // Criar divs de coluna
+        const columnDivs = [];
+        const columnHeights = [];
+        for (let i = 0; i < columnCount; i++) {
+            const columnDiv = document.createElement('div');
+            columnDiv.className = 'masonry-column';
+            columnsContainer.appendChild(columnDiv);
+            columnDivs.push(columnDiv);
+            columnHeights.push(0);
+        }
+        console.log('🔵 Masonry Debug - Created columns:', columnCount);
+        console.log('🔵 Masonry Debug - Items to distribute:', this.originalItems.length);
+        // Distribuir itens MOVENDO os elementos reais (não clonando)
+        this.originalItems.forEach((item, index) => {
+            // Encontrar coluna com menor altura
+            const minHeightIndex = columnHeights.indexOf(Math.min(...columnHeights));
+            console.log(`🔵 Item ${index + 1} -> Column ${minHeightIndex + 1} (height: ${item.offsetHeight}px)`);
+            // MOVER o elemento real para a coluna (preserva todos os bindings do Angular)
+            const gapValue = this.getGapValue();
+            if (gapValue > 0) {
+                item.style.marginBottom = `${gapValue}px`;
+            }
+            // appendChild move o nó (não clona)
+            columnDivs[minHeightIndex].appendChild(item);
+            // Atualizar altura da coluna
+            columnHeights[minHeightIndex] += item.offsetHeight + gapValue;
+        });
+        console.log('🔵 Masonry Debug - Final column heights:', columnHeights);
+        // Log da largura de cada coluna criada
+        columnDivs.forEach((col, i) => {
+            console.log(`🔵 Column ${i + 1} width:`, col.offsetWidth, 'px');
+        });
+        this.isDistributing = false;
+    }
+    getCurrentColumnCount() {
+        const width = window.innerWidth;
+        // Breakpoints do Material/Angular
+        if (width >= 1920 && this.xlColSize)
+            return Number(this.xlColSize);
+        if (width >= 1280 && this.lgColSize)
+            return Number(this.lgColSize);
+        if (width >= 960 && this.mdColSize)
+            return Number(this.mdColSize);
+        if (width >= 600 && this.smColSize)
+            return Number(this.smColSize);
+        if (this.colSize)
+            return Number(this.colSize);
+        return 1; // Fallback para 1 coluna
+    }
+    getGapValue() {
+        const gapStr = this.gap?.toString() || '0';
+        return parseInt(gapStr, 10);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMasonryComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaMasonryComponent, isStandalone: false, selector: "matcha-masonry", inputs: { colSize: ["col", "colSize"], smColSize: ["col-sm", "smColSize"], mdColSize: ["col-md", "mdColSize"], lgColSize: ["col-lg", "lgColSize"], xlColSize: ["col-xl", "xlColSize"], gap: "gap", gapSm: ["gap-sm", "gapSm"], gapMd: ["gap-md", "gapMd"], gapLg: ["gap-lg", "gapLg"], gapXl: ["gap-xl", "gapXl"] }, ngImport: i0, template: "<div class=\"masonry-wrapper\">\n    <!-- Container com conte\u00FAdo original (oculto) -->\n    <div class=\"masonry-content-wrapper\">\n        <ng-content></ng-content>\n    </div>\n\n    <!-- Container onde as colunas ser\u00E3o renderizadas -->\n    <div class=\"masonry-columns\" [style.gap.px]=\"getGapValue()\"></div>\n</div>", styles: [".masonry-wrapper{width:100%;position:relative}.masonry-content-wrapper{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none}.masonry-columns{display:flex;width:100%}.masonry-column{flex:1 1 0;min-width:0;max-width:100%;display:flex;flex-direction:column}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMasonryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-masonry', standalone: false, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { colSize: [{
+            args: [{ selector: 'matcha-masonry', standalone: false, template: "<div class=\"masonry-wrapper\">\n    <!-- Container com conte\u00FAdo original (oculto) -->\n    <div class=\"masonry-content-wrapper\">\n        <ng-content></ng-content>\n    </div>\n\n    <!-- Container onde as colunas ser\u00E3o renderizadas -->\n    <div class=\"masonry-columns\" [style.gap.px]=\"getGapValue()\"></div>\n</div>", styles: [".masonry-wrapper{width:100%;position:relative}.masonry-content-wrapper{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none}.masonry-columns{display:flex;width:100%}.masonry-column{flex:1 1 0;min-width:0;max-width:100%;display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { colSize: [{
                 type: Input,
                 args: ['col']
             }], smColSize: [{