matcha-components 20.12.0 → 20.15.0

package/src/lib/matcha-infinite-scroll/matcha-infinite-scroll/matcha-infinite-scroll.component.ts

@@ -0,0 +1,49 @@
+/*
+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-infinite-scroll',
+  templateUrl: './matcha-infinite-scroll.component.html',
+  styleUrl: './matcha-infinite-scroll.component.scss',
+  standalone: false
+})
+export class MatchaInfiniteScrollComponent 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-infinite-scroll/matcha-infinite-scroll-data/matcha-infinite-scroll-data.component.ts

@@ -0,0 +1,165 @@
+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-infinite-scroll-data',
+    templateUrl: './matcha-infinite-scroll-data.component.html',
+    styleUrls: ['./matcha-infinite-scroll-data.component.scss'],
+    styles: [`
+        :host {
+            height: 1px;
+            opacity: 0;
+        }
+    `],
+    standalone: false
+})
+export class MatchaInfiniteScrollDataComponent 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;
+
+    /**
+     * 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: '0px',
+            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-infinite-scroll/matcha-infinite-scroll.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaInfiniteScrollComponent } from './matcha-infinite-scroll/matcha-infinite-scroll.component';
+import { MatchaInfiniteScrollDataComponent } from './matcha-infinite-scroll-data/matcha-infinite-scroll-data.component';
+
+
+@NgModule({
+  declarations: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent],
+  imports: [
+    CommonModule
+  ],
+    exports: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent]
+})
+export class MatchaInfiniteScrollModule { }

package/src/lib/matcha-input/input.argtypes.ts

@@ -0,0 +1,39 @@
+export const inputArgtypes = {
+    errorStateMatcher: {
+        description: 'An object used to control when error messages are shown.',
+        control: 'null', // Como é um objeto, não é necessário um controle.
+    },
+    readonly: {
+        description: 'Whether the element is readonly.',
+        control: 'boolean',
+        defaultValue: 'false', // Defina o valor padrão conforme necessário.
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    type: {
+        description: 'Input type of the element.',
+        control: 'text', // Você pode alterar o controle para 'select' se houver opções específicas de tipo que deseja listar.
+        defaultValue: 'text', // Defina o valor padrão conforme necessário.
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    errorState: {
+        description: 'Whether the component is in an error state.',
+        control: 'boolean',
+        defaultValue: 'false', // Defina o valor padrão conforme necessário.
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

package/src/lib/matcha-input/input.directive.ts

@@ -0,0 +1,12 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[matcha-input]',
+    standalone: false
+})
+export class MatchaInputDirective {
+    constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-input');
+    }
+}

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

@@ -0,0 +1,73 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./input.stories";
+
+<Meta title="TO-DO / Input / Documentação" />
+
+# Input
+
+> _input_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
+
+---
+
+### Modes
+
+<div class="flex-column gap-16">
+    <div class="flex-column">
+        <div class="matcha-card background-surface flex-column gap-16">
+            <span class="h5">Input - Date range picker comparison ranges</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.InputClearButton} />
+            </div>
+
+            <div class="flex-column">
+
+                ```html
+                <form>
+                    <mat-form-field matcha-input appearance="outline" [color]="color">
+                        <mat-label>First campaign</mat-label>
+                        <mat-date-range-input
+                            [formGroup]="campaignOne"
+                            [rangePicker]="campaignOnePicker"
+                            [comparisonStart]="campaignTwo.value.start"
+                            [comparisonEnd]="campaignTwo.value.end">
+                            <input matStartDate placeholder="Start date" formControlName="start">
+                            <input matEndDate placeholder="End date" formControlName="end">
+                        </mat-date-range-input>
+                        <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                        <mat-datepicker-toggle matIconSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
+                        <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
+                    </mat-form-field>
+
+                    <mat-form-field matcha-datepicker appearance="outline" [color]="color">
+                        <mat-label>Second campaign</mat-label>
+                        <mat-date-range-input
+                            [formGroup]="campaignTwo"
+                            [rangePicker]="campaignTwoPicker"
+                            [comparisonStart]="campaignOne.value.start"
+                            [comparisonEnd]="campaignOne.value.end">
+                            <input matStartDate placeholder="Start date" formControlName="start">
+                            <input matEndDate placeholder="End date" formControlName="end">
+                        </mat-date-range-input>
+                        <mat-datepicker-toggle matIconSuffix [for]="campaignTwoPicker"></mat-datepicker-toggle>
+                        <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                        <mat-date-range-picker #campaignTwoPicker></mat-date-range-picker>
+                    </mat-form-field>
+                </form>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatDatepickerModule} from '@angular/material/input';`
+
+[Official documentation](https://https://material.angular.io/components/input/overview)
+
+<br />

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

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { MatchaInputDirective } from './input.directive';
+
+@NgModule({
+    declarations: [MatchaInputDirective],
+    imports: [],
+    exports: [MatchaInputDirective],
+})
+export class MatchaInputModule {}

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

@@ -0,0 +1,97 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { FormControl, FormGroupDirective, FormsModule, NgForm, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { ErrorStateMatcher } from '@angular/material/core';
+import { inputArgtypes } from './input.argtypes';
+import { MatchaInputDirective } from './input.directive';
+
+export default {
+    title: 'TO-DO / Input',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule, NgIf, JsonPipe, NgFor, AsyncPipe],
+            declarations: [MatchaInputDirective],
+        }),
+    ],
+    args: {
+        color: 'accent',
+    },
+    argTypes: inputArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+const value = 'Clear me';
+
+export const InputClearButton: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            value,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface flex-column--force gap-16 max-w-256 w-256">
+                <mat-form-field appearance="outline" [color]="color">
+
+                    <mat-label>Clearable input</mat-label>
+                    <input matInput [type]="text" [(ngModel)]="value">
+                    <button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
+                        <span class="i-matcha-action_close"></span>
+                    </button>
+
+                </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Input Clear Button',
+};
+
+const emailFormControl = new FormControl('', [Validators.required, Validators.email]);
+
+export const InputWithErrorMessage: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            emailFormControl,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface flex-column--force gap-16 max-w-256">
+                <mat-form-field appearance="outline" [color]="color">
+
+                <mat-label>Email</mat-label>
+                <input type="email" matInput [formControl]="emailFormControl" placeholder="Ex. pat@example.com">
+                <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
+                Please enter a valid email address
+                </mat-error>
+                <mat-error *ngIf="emailFormControl.hasError('required')">
+                Email is <strong>required</strong>
+                </mat-error>
+
+                </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Input with error messages',
+};
+
+/** Error when invalid control is dirty, touched, or submitted. */
+export class MyErrorStateMatcher implements ErrorStateMatcher {
+    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+        const isSubmitted = form && form.submitted;
+        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+    }
+}