matcha-components 20.12.0 → 20.15.0

package/src/lib/matcha-lazyload/lazyload/lazyload.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/src/lib/matcha-lazyload/lazyload/lazyload.component.ts

@@ -0,0 +1,48 @@
+/*
+HOW TO USE ---------------------------------------------------------
+TEMPLATE:
+<!-- Elemento sentinela para detectar o scroll -->
+<option disabled style="height: 1px; padding: 0; margin: 0;">
+    <!-- Esse <div> não precisa ter conteúdo visual; ele apenas será observado -->
+    <div infiniteScroll (scrolledToEnd)="onScrolledToEnd()"></div>
+</option>
+*/
+import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'matcha-lazyload',
+  templateUrl: './lazyload.component.html',
+  styleUrl: './lazyload.component.scss',
+  standalone: false
+})
+export class MatchaLazyloadComponent implements OnInit, OnDestroy{
+// Evento que será disparado quando o elemento entrar na área visível
+@Output() scrolledToEnd = new EventEmitter<void>();
+
+private observer!: IntersectionObserver;
+
+constructor(private element: ElementRef) {}
+
+ngOnInit(): void {
+  // Configura o observer para disparar quando 10% do elemento estiver visível
+  const options = {
+    root: null, // Usa a viewport
+    rootMargin: '0px',
+    threshold: 0.1
+  };
+
+  this.observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        this.scrolledToEnd.emit();
+      }
+    });
+  }, options);
+
+  this.observer.observe(this.element.nativeElement);
+}
+
+ngOnDestroy(): void {
+  this.observer.disconnect();
+}
+}

package/src/lib/matcha-lazyload/lazyload-data/lazyload-data.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/src/lib/matcha-lazyload/lazyload-data/lazyload-data.component.ts

@@ -0,0 +1,172 @@
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Observable, Subscription, Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+
+@Component({
+    selector: 'matcha-lazyload-data',
+    templateUrl: './lazyload-data.component.html',
+    styleUrls: ['./lazyload-data.component.scss'],
+    styles: [`
+        :host {
+            height: 1px;
+            opacity: 0;
+        }
+    `],
+    standalone: false
+})
+export class MatchaLazyloadDataComponent implements OnInit, OnDestroy, OnChanges {
+
+    /**
+     * Função que carrega os dados com base no número da página.
+     * Deve retornar um Observable com um array de itens.
+     */
+    @Input() loadData!: (page: number) => Observable<any[]>;
+
+    /**
+     * Lista inicial (opcional) para iniciar a agregação.
+     */
+    @Input() initialList: any[] = [];
+
+    /**
+     * Threshold para o Intersection Observer (padrão: 0.1 = 10% do elemento visível).
+     */
+    @Input() threshold = 0.1;
+
+    /**
+     * Root margin para o Intersection Observer (padrão: '0px').
+     * Use valores como '100px' para acionar 100px antes do elemento aparecer.
+     * Aceita valores como: '10px', '10px 20px', '10% 5% 0px 5%'
+     */
+    @Input() rootMargin = '0px';
+
+    /**
+     * Chave para resetar a diretiva (para componentes como select).
+     */
+    @Input() resetKey: any;
+
+    /**
+     * Novo input para o autocomplete, onde será aplicado o debounce.
+     */
+    @Input() searchTerm: any;
+
+    /**
+     * Emite a lista acumulada de itens.
+     */
+    @Output() aggregatedData = new EventEmitter<any[]>();
+
+    /**
+     * Emite o item exato, quando a aggregatedData tiver um único item igual ao searchTerm.
+     */
+    @Output() exactMatch = new EventEmitter<any>();
+
+    private aggregatedList: any[] = [];
+    private currentPage = 0;
+    private observer!: IntersectionObserver;
+
+    // Subscription para as chamadas do loadData
+    private dataSubscription = new Subscription();
+    // Subscription exclusiva para o debounce do searchTerm
+    private searchSubscription = new Subscription();
+    // Subject para aplicar debounce no searchTerm
+    private searchTermSubject: Subject<any> = new Subject();
+
+    constructor(private element: ElementRef) { }
+
+    ngOnInit(): void {
+        this.initialize();
+
+        // Configura o Intersection Observer para carregamento via scroll
+        const options = {
+            root: null,
+            rootMargin: this.rootMargin,
+            threshold: this.threshold
+        };
+
+        this.observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    this.loadNextPage();
+                }
+            });
+        }, options);
+
+        this.observer.observe(this.element.nativeElement);
+
+        // Inscreve para receber alterações do searchTerm com debounce
+        this.searchSubscription = this.searchTermSubject.pipe(
+            debounceTime(300)
+        ).subscribe(() => {
+            // Reseta e carrega a primeira página após o debounce
+            this.resetData();
+            this.loadNextPage();
+        });
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['resetKey'] && !changes['resetKey'].firstChange) {
+            this.resetData();
+        }
+
+        if (changes['searchTerm'] && !changes['searchTerm'].firstChange) {
+            // Emite o novo valor para o Subject e aguarda o debounce
+            this.searchTermSubject.next(changes['searchTerm'].currentValue);
+        }
+    }
+
+    /**
+     * Inicializa ou reinicializa a lista agregada e o contador de página.
+     */
+    private initialize(): void {
+        this.aggregatedList = [...this.initialList];
+        this.currentPage = 0;
+        this.aggregatedData.emit(this.aggregatedList);
+        this.checkExactMatch();
+    }
+
+    /**
+     * Reseta apenas as assinaturas e o estado dos dados (não a inscrição do searchTerm).
+     */
+    private resetData(): void {
+        // Cancela as assinaturas das chamadas de loadData
+        this.dataSubscription.unsubscribe();
+        this.dataSubscription = new Subscription();
+
+        // Re-inicializa a lista e o contador
+        this.initialize();
+    }
+
+    /**
+     * Carrega a próxima página de dados utilizando a função loadData.
+     */
+    private loadNextPage(): void {
+        if (!this.loadData) {
+            return;
+        }
+        this.currentPage++;
+        const dataObservable = this.loadData(this.currentPage);
+        const sub = dataObservable.subscribe(data => {
+            if (data && data.length) {
+                this.aggregatedList = [...this.aggregatedList, ...data];
+                this.aggregatedData.emit(this.aggregatedList);
+                this.checkExactMatch();
+            }
+        });
+        this.dataSubscription.add(sub);
+    }
+
+    /**
+     * Verifica se a lista agregada possui exatamente um item e se esse item é igual ao searchTerm.
+     * Se sim, emite o output exactMatch com esse item.
+     */
+    private checkExactMatch(): void {
+        if (this.aggregatedList.length === 1 && this.aggregatedList[0] === this.searchTerm) {
+            this.exactMatch.emit(this.aggregatedList[0]);
+        }
+    }
+
+    ngOnDestroy(): void {
+        this.observer.disconnect();
+        this.dataSubscription.unsubscribe();
+        this.searchSubscription.unsubscribe();
+    }
+}

package/src/lib/matcha-lazyload/lazyload.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaLazyloadComponent } from './lazyload/lazyload.component';
+import { MatchaLazyloadDataComponent } from './lazyload-data/lazyload-data.component';
+
+
+@NgModule({
+  declarations: [MatchaLazyloadComponent, MatchaLazyloadDataComponent],
+  imports: [
+    CommonModule
+  ],
+    exports: [MatchaLazyloadComponent, MatchaLazyloadDataComponent]
+})
+export class MatchaLazyloadModule { }

package/src/lib/matcha-masonry/masonry/masonry.component.html

@@ -0,0 +1,3 @@
+<div [class]="classes">
+    <ng-content></ng-content>
+</div>

package/src/lib/matcha-masonry/masonry/masonry.component.ts

@@ -0,0 +1,45 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'matcha-masonry',
+    templateUrl: './masonry.component.html',
+    styleUrls: ['./masonry.component.scss'],
+    standalone: false
+})
+export class MatchaMasonryComponent {
+    @Input('col') colSize: string | number | null = null;
+    @Input('col-sm') smColSize: string | number | null = null;
+    @Input('col-md') mdColSize: string | number | null = null;
+    @Input('col-lg') lgColSize: string | number | null = null;
+    @Input('col-xl') xlColSize: string | number | null = null;
+    @Input('gap') gap: string | number | null = null;
+    @Input('gap-sm') gapSm: string | number | null = null;
+    @Input('gap-md') gapMd: string | number | null = null;
+    @Input('gap-lg') gapLg: string | number | null = null;
+    @Input('gap-xl') gapXl: string | number | null = null;
+
+    public get classes(): string {
+        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;
+    }
+}

package/src/lib/matcha-masonry/masonry.argtype.ts

@@ -0,0 +1,97 @@
+export const masonryArgtypes = {
+    col: {
+        description: 'Masonry column size',
+        control: 'select',
+        defaultValue: '3',
+        table: {
+            defaultValue: { summary: '3' },
+        },
+        options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    },
+    colsm: {
+        description: 'Masonry column size on small screens',
+        control: 'select',
+        defaultValue: '3',
+        table: {
+            defaultValue: { summary: '3' },
+        },
+        options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    },
+    colmd: {
+        description: 'Masonry column size on medium screens',
+        control: 'select',
+        defaultValue: '3',
+        table: {
+            defaultValue: { summary: '3' },
+        },
+        options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    },
+    collg: {
+        description: 'Masonry column size on large screens',
+        control: 'select',
+        defaultValue: '3',
+        table: {
+            defaultValue: { summary: '3' },
+        },
+        options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    },
+    colxl: {
+        description: 'Masonry column size on extra large screens',
+        control: 'select',
+        defaultValue: '3',
+        table: {
+            defaultValue: { summary: '3' },
+        },
+        options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    },
+    gap: {
+        description: 'Masonry gap size',
+        control: 'select',
+        defaultValue: '16',
+        table: {
+            defaultValue: { summary: '16' },
+        },
+        options: ['0', '4', '8', '12', '16', '20', '24', '28', '32', '36', '40', '44', '48'],
+    },
+
+    gapsm: {
+        description: 'Masonry gap size on small screens',
+        control: 'select',
+        defaultValue: '8',
+        table: {
+            defaultValue: { summary: '8' },
+        },
+        options: ['0', '4', '8', '12', '16', '20', '24', '28', '32', '36', '40', '44', '48'],
+    },
+
+    gapmd: {
+        description: 'Masonry gap size on medium screens',
+        control: 'select',
+        defaultValue: '16',
+        table: {
+            defaultValue: { summary: '16' },
+        },
+        options: ['0', '4', '8', '12', '16', '20', '24', '28', '32', '36', '40', '44', '48'],
+    },
+
+    gaplg: {
+        description: 'Masonry gap size on large screens',
+        control: 'select',
+        defaultValue: '24',
+        table: {
+            defaultValue: { summary: '24' },
+        },
+        options: ['0', '4', '8', '12', '16', '20', '24', '28', '32', '36', '40', '44', '48'],
+    },
+
+    gapxl: {
+        description: 'Masonry gap size on extra large screens',
+        control: 'select',
+        defaultValue: '32',
+        table: {
+            defaultValue: { summary: '32' },
+        },
+        options: ['0', '4', '8', '12', '16', '20', '24', '28', '32', '36', '40', '44', '48'],
+    },
+
+};

package/src/lib/matcha-masonry/masonry.mdx

@@ -0,0 +1,133 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./masonry.stories";
+
+<Meta title="Layout / Masonry / Documentação" />
+
+# Masonry
+
+> _&lt;matcha-masonry&gt;_ "O componente matcha-masonry organiza seus elementos filhos em um layout de colunas estilo masonry, proporcionando um visual dinâmico onde os itens são distribuídos em colunas de forma fluida, ocupando o espaço disponível e ajustando-se conforme o tamanho de cada item. Ideal para galerias de imagens, cards de conteúdo e layouts de blocos irregulares, o matcha-masonry permite uma disposição atrativa e de fácil personalização."
+---
+
+### Exemplo
+
+<div class="flex-column gap-16">
+    <div class="flex-column">
+        <div class="matcha-card background-surface flex-column gap-16">
+            <span class="h5">Visão Geral</span>
+            <div class="matcha-card background-bg max-h-300 overflow-auto">
+                <Story of={ComponentStories.MasonryOverview}/>
+            </div>
+
+            <div class="flex-column">
+
+                ```html
+                <matcha-masonry col="3" col-sm="2" col-md="3" col-lg="4" col-xl="5" gap="16" gap-sm="8" gap-md="16" gap-lg="24" gap-xl="32">
+                    <div class="radius-8 red" style="height: 150px;"><div class="p-16">Item 1</div></div>
+                    <div class="radius-8 green" style="height: 200px;"><div class="p-16">Item 2</div></div>
+                    <div class="radius-8 blue" style="height: 320px;"><div class="p-16">Item 3</div></div>
+                    <div class="radius-8 cyan" style="height: 500px;"><div class="p-16">Item 4</div></div>
+                    <div class="radius-8 pink" style="height: 430px;"><div class="p-16">Item 5</div></div>
+                    <div class="radius-8 yellow" style="height: 200px;"><div class="p-16">Item 6</div></div>
+                    <div class="radius-8 purple" style="height: 160px;"><div class="p-16">Item 7</div></div>
+                    <div class="radius-8 teal" style="height: 350px;"><div class="p-16">Item 8</div></div>
+                    <div class="radius-8 red" style="height: 290px;"><div class="p-16">Item 9</div></div>
+                    <div class="radius-8 green" style="height: 310px;"><div class="p-16">Item 10</div></div>
+                    <div class="radius-8 blue" style="height: 120px;"><div class="p-16">Item 11</div></div>
+                    <div class="radius-8 cyan" style="height: 330px;"><div class="p-16">Item 12</div></div>
+                    <div class="radius-8 pink" style="height: 210px;"><div class="p-16">Item 13</div></div>
+                    <div class="radius-8 yellow" style="height: 420px;"><div class="p-16">Item 14</div></div>
+                    <div class="radius-8 purple" style="height: 120px;"><div class="p-16">Item 15</div></div>
+                    <div class="radius-8 teal" style="height: 450px;"><div class="p-16">Item 16</div></div>
+                </matcha-masonry>
+                ```
+
+            </div>
+        </div>
+    </div>
+</div>
+
+### Atributos Personalizáveis
+
+Define o número de colunas para diferentes tamanhos de tela, permitindo responsividade. Por exemplo:
+
+<table class="w-100-p">
+    <thead>
+        <tr>
+            <th>Atributo</th>
+            <th>Descrição</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>col</td>
+            <td>Define o número de colunas padrão.</td>
+        </tr>
+        <tr>
+            <td>col-sm</td>
+            <td>Define o número de colunas em telas pequenas.</td>
+        </tr>
+        <tr>
+            <td>col-md</td>
+            <td>Define o número de colunas em telas médias.</td>
+        </tr>
+        <tr>
+            <td>col-lg</td>
+            <td>Define o número de colunas em telas grandes.</td>
+        </tr>
+        <tr>
+            <td>col-xl</td>
+            <td>Define o número de colunas em telas extragrandes.</td>
+        </tr>
+        <tr>
+            <td>gap</td>
+            <td>Define o espaçamento entre os itens, facilitando o ajuste do layout para manter uma aparência organizada e espaçosa.</td>
+        </tr>
+        <tr>
+            <td>gap-sm</td>
+            <td>Define o espaçamento entre os itens em telas pequenas.</td>
+        </tr>
+        <tr>
+            <td>gap-md</td>
+            <td>Define o espaçamento entre os itens em telas médias.</td>
+        </tr>
+        <tr>
+            <td>gap-lg</td>
+            <td>Define o espaçamento entre os itens em telas grandes.</td>
+        </tr>
+        <tr>
+            <td>gap-xl</td>
+            <td>Define o espaçamento entre os itens em telas extragrandes.</td>
+        </tr>
+    </tbody>
+</table>
+
+
+### Instalação
+
+Para utilizar o componente _&lt;matcha-masonry&gt;_, siga os passos abaixo:
+
+1. Instale o pacote [matcha-components](https://www.npmjs.com/package/matcha-components) via npm ou yarn.
+
+`npm install matcha-components`
+
+2. Importe o módulo MatchaMasonryModule no modulo que deseja utilizar o componente.
+
+`import { MatchaMasonryModule } from 'matcha-components';`
+
+3. Em seguida, adicione o módulo ao array de imports do seu módulo.
+
+<div class="matcha-card background-surface flex-column gap-16">
+    <div class="flex-column">
+
+        ```typescript
+        @NgModule({
+            imports: [
+                MatchaMasonryModule
+            ]
+        })
+        export class AppModule { }
+        ```
+
+    </div>
+</div>

package/src/lib/matcha-masonry/masonry.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaMasonryComponent } from './masonry/masonry.component';
+
+@NgModule({
+    declarations: [MatchaMasonryComponent],
+    imports: [CommonModule],
+    exports: [MatchaMasonryComponent]
+})
+export class MatchaMasonryModule { }

package/src/lib/matcha-masonry/masonry.stories.ts

@@ -0,0 +1,64 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
+import { MatchaMasonryModule } from './masonry.module';
+import { masonryArgtypes } from './masonry.argtype';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+export default {
+    title: 'Layout / Masonry',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+        moduleMetadata({
+            imports: [CommonModule, MatchaMasonryModule, NgIf, JsonPipe, NgFor, AsyncPipe],
+        }),
+    ],
+    args: {
+        col: '3',
+        colsm: '2',
+        colmd: '3',
+        collg: '4',
+        colxl: '5',
+        gap: '16',
+        gapsm: '8',
+        gapmd: '16',
+        gaplg: '24',
+        gapxl: '32',
+    },
+    argTypes: masonryArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+/** Este é o card principal */
+export const MasonryOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <matcha-masonry [col]="col" [col-sm]="colsm" [col-md]="colmd" [col-lg]="collg" [col-xl]="colxl" [gap]="gap">
+            <div class="radius-8 red" style="height: 150px;"><div class="p-16">Item 1</div></div>
+            <div class="radius-8 green" style="height: 200px;"><div class="p-16">Item 2</div></div>
+            <div class="radius-8 blue" style="height: 320px;"><div class="p-16">Item 3</div></div>
+            <div class="radius-8 cyan" style="height: 500px;"><div class="p-16">Item 4</div></div>
+            <div class="radius-8 pink" style="height: 430px;"><div class="p-16">Item 5</div></div>
+            <div class="radius-8 yellow" style="height: 200px;"><div class="p-16">Item 6</div></div>
+            <div class="radius-8 purple" style="height: 160px;"><div class="p-16">Item 7</div></div>
+            <div class="radius-8 teal" style="height: 350px;"><div class="p-16">Item 8</div></div>
+            <div class="radius-8 red" style="height: 290px;"><div class="p-16">Item 9</div></div>
+            <div class="radius-8 green" style="height: 310px;"><div class="p-16">Item 10</div></div>
+            <div class="radius-8 blue" style="height: 120px;"><div class="p-16">Item 11</div></div>
+            <div class="radius-8 cyan" style="height: 330px;"><div class="p-16">Item 12</div></div>
+            <div class="radius-8 pink" style="height: 210px;"><div class="p-16">Item 13</div></div>
+            <div class="radius-8 yellow" style="height: 420px;"><div class="p-16">Item 14</div></div>
+            <div class="radius-8 purple" style="height: 120px;"><div class="p-16">Item 15</div></div>
+            <div class="radius-8 teal" style="height: 450px;"><div class="p-16">Item 16</div></div>
+        </matcha-masonry>
+        `,
+    }),
+    name: 'Masonry Overview',
+};