matcha-components 20.143.0 → 20.145.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, Pipe, PLATFORM_ID } from '@angular/core';
 import { animation, style, animate, trigger, transition, useAnimation, state, query, stagger, animateChild, sequence, group } from '@angular/animations';
-import { Subscription, Subject, fromEvent, BehaviorSubject, of } from 'rxjs';
+import { Subscription, Subject, BehaviorSubject, fromEvent, 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,9 +1888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class MatchaMasonryComponent {
-    constructor(elementRef, cdr) {
-        this.elementRef = elementRef;
-        this.cdr = cdr;
+    constructor() {
         this.colSize = null;
         this.smColSize = null;
         this.mdColSize = null;
@@ -1901,126 +1899,38 @@ class MatchaMasonryComponent {
         this.gapMd = null;
         this.gapLg = null;
         this.gapXl = null;
-        this.destroy$ = new Subject();
-        this.originalItems = [];
-        this.isDistributing = false;
     }
-    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(200), takeUntil(this.destroy$))
-            .subscribe(() => this.distributeItems());
-    }
-    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);
-        });
+    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;
     }
-    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"] }); }
+    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: [""] }); }
 }
 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=\"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: [{
+            args: [{ selector: 'matcha-masonry', standalone: false, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { colSize: [{
                 type: Input,
                 args: ['col']
             }], smColSize: [{