matcha-components 20.15.0 → 20.17.0

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

@@ -1,49 +0,0 @@
-/*
-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

@@ -1,165 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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));
-    }
-}