matcha-components 20.15.0 → 20.17.0

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

@@ -1,59 +0,0 @@
-<div class="matcha-paginator flex-row flex-align-center gap-16">
-    <!-- Items per page selector -->
-    <div class="flex-row flex-align-center gap-8" *ngIf="pageSizeOptions && pageSizeOptions.length > 0">
-      <span class="text-sm color-placeholder">{{ _intl.itemsPerPageLabel }}</span>
-      <div class="page-size-selector">
-        <select 
-          class="page-size-select radius-8" 
-          [value]="pageSize" 
-          (change)="onPageSizeChange($event)">
-          <option *ngFor="let option of pageSizeOptions" [value]="option">
-            {{ option }}
-          </option>
-        </select>
-        <div class="select-icon">
-          <matcha-icon name="action_arrow_down" size="sm" color="fg"></matcha-icon>
-        </div>
-      </div>
-    </div>
-  
-    <!-- Page navigation -->
-    <div class="flex-row flex-align-center gap-8">
-      <!-- Previous page button -->
-      <button 
-        class="nav-button" 
-        [disabled]="!hasPreviousPage"
-        (click)="previousPage()"
-        [attr.aria-label]="_intl.previousPageLabel">
-        <matcha-icon name="action_arrow_left" size="sm"></matcha-icon>
-      </button>
-  
-      <!-- Page numbers -->
-      <div class="flex-row flex-align-center gap-4">
-        <ng-container *ngFor="let page of displayPages; trackBy: trackByPage">
-          <button 
-            *ngIf="isNumber(page); else ellipsis"
-            class="page-button"
-            [class.active]="page === currentPage"
-            [class.radius-full]="page === currentPage"
-            [ngClass]="page === currentPage ? color : ''"
-            (click)="goToPage(page)"
-            [attr.aria-label]="'Ir para página ' + page">
-            {{ page }}
-          </button>
-          <ng-template #ellipsis>
-            <span class="ellipsis">{{ page }}</span>
-          </ng-template>
-        </ng-container>
-      </div>
-  
-      <!-- Next page button -->
-      <button 
-        class="nav-button" 
-        [disabled]="!hasNextPage"
-        (click)="nextPage()"
-        [attr.aria-label]="_intl.nextPageLabel">
-        <matcha-icon name="action_arrow_right" size="sm"></matcha-icon>
-      </button>
-    </div>
-  </div>

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

@@ -1,154 +0,0 @@
-import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { PageEvent } from './page-event.interface';
-import { MatchaPaginatorIntl } from '../paginator-intl.service';
-
-@Component({
-  selector: 'matcha-paginator',
-  templateUrl: './paginator.component.html',
-  styleUrl: './paginator.component.scss',
-  standalone: false,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class MatchaPaginatorComponent implements OnDestroy {
-  @Input() public pageIndex: number = 0;
-  @Input() public length: number = 0;
-  @Input() public pageSize: number = 50;
-  @Input() public pageSizeOptions: number[] = [];
-  
-  /** Color theme for active page button. Defaults to 'accent' */
-  @Input() public color: string = 'accent';
-
-  @Output() public page = new EventEmitter<PageEvent>();
-
-  private _intlChanges: Subscription;
-
-  constructor(
-    public _intl: MatchaPaginatorIntl,
-    private _changeDetectorRef: ChangeDetectorRef
-  ) {
-    this._intlChanges = _intl.changes.subscribe(() => {
-      // Trigger change detection when labels change
-      this._changeDetectorRef.markForCheck();
-    });
-  }
-
-  ngOnDestroy(): void {
-    this._intlChanges.unsubscribe();
-  }
-
-  public get currentPage(): number {
-    return this.pageIndex + 1;
-  }
-
-  public get totalPages(): number {
-    if (this.pageSize === 0) return 0;
-    return Math.ceil(this.length / this.pageSize);
-  }
-
-  public get hasPreviousPage(): boolean {
-    return this.pageIndex > 0;
-  }
-
-  public get hasNextPage(): boolean {
-    return this.pageIndex < this.totalPages - 1;
-  }
-
-  public get displayPages(): (number | string)[] {
-    const current = this.currentPage;
-    const total = this.totalPages;
-    const pages: (number | string)[] = [];
-
-    if (total <= 1) {
-      if (total === 1) {
-        pages.push(1);
-      }
-      return pages;
-    }
-
-    if (total <= 5) {
-      for (let i = 1; i <= total; i++) {
-        pages.push(i);
-      }
-    } else {
-      
-      if (current <= 3) {
-        pages.push(1, 2, 3, '...', total);
-      } else if (current >= total - 2) {
-        for (let i = total - 4; i <= total; i++) {
-          pages.push(i);
-        }
-      } else {
-        const startPage = current - 1;
-        
-        for (let i = startPage; i <= current + 2 && i <= total; i++) {
-          pages.push(i);
-        }
-        
-        if (current + 2 < total - 1) {
-          pages.push('...');
-        }
-        
-        if (current + 2 < total) {
-          pages.push(total);
-        }
-      }
-    }
-
-    return pages;
-  }
-
-  public trackByPage(index: number, item: number | string): number | string {
-    return item;
-  }
-
-  /** Check if item is a number (for template use only) */
-  public isNumber(value: any): boolean {
-    return typeof value === 'number';
-  }
-
-  /** Navigate to previous page */
-  public previousPage(): void {
-    if (this.hasPreviousPage) {
-      this.changePage(this.pageIndex - 1);
-    }
-  }
-
-  /** Navigate to next page */
-  public nextPage(): void {
-    if (this.hasNextPage) {
-      this.changePage(this.pageIndex + 1);
-    }
-  }
-
-  /** Navigate to specific page */
-  public goToPage(page: number | string): void {
-    if (typeof page === 'number' && page >= 1 && page <= this.totalPages) {
-      this.changePage(page - 1);
-    }
-  }
-  
-
-  /** Handle page size change */
-  public onPageSizeChange(event: Event): void {
-    const target = event.target as HTMLSelectElement;
-    const newPageSize = parseInt(target.value, 10);
-    
-    if (newPageSize !== this.pageSize) {
-      this.changePage(0, newPageSize);
-    }
-  }
-
-  private changePage(pageIndex: number, pageSize?: number): void {
-    const previousPageIndex = this.pageIndex;
-    
-    const event: PageEvent = {
-      pageIndex,
-      previousPageIndex,
-      pageSize: pageSize || this.pageSize,
-      length: this.length
-    };
-
-    this.page.emit(event);
-  }
-}

package/src/lib/matcha-paginator/paginator-intl.service.ts

@@ -1,39 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs';
-
-/**
- * Service to internationalize the paginator component.
- * Based on Angular Material's MatPaginatorIntl
- */
-@Injectable({ providedIn: 'root' })
-export class MatchaPaginatorIntl {
-  /** Stream to emit from when labels are changed. Used by the paginator to update the labels. */
-  readonly changes: Subject<void> = new Subject<void>();
-
-  /** A label for the page size selector. */
-  itemsPerPageLabel: string = 'Itens por página:';
-
-  /** A label for the button that increments the current page. */
-  nextPageLabel: string = 'Próxima página';
-
-  /** A label for the button that decrements the current page. */
-  previousPageLabel: string = 'Página anterior';
-
-  /** A label for the button that moves to the first page. */
-  firstPageLabel: string = 'Primeira página';
-
-  /** A label for the button that moves to the last page. */
-  lastPageLabel: string = 'Última página';
-
-  /**
-   * A label for the range of items within the current page and the length of the whole list.
-   */
-  getRangeLabel: (page: number, pageSize: number, length: number) => string =
-    (page: number, pageSize: number, length: number) => {
-      if (length === 0) {
-        return `0 de 0`;
-      }
-      const amountPages = Math.ceil(length / pageSize);
-      return `Página ${page + 1} de ${amountPages}`;
-    };
-}

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

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaPaginatorComponent } from './paginator/paginator.component';
-import { MatchaIconModule } from '../matcha-icon/icon.module';
-import { MatchaPaginatorIntl } from './paginator-intl.service';
-
-@NgModule({
-  declarations: [MatchaPaginatorComponent],
-  imports: [CommonModule, MatchaIconModule],
-  exports: [MatchaPaginatorComponent],
-  providers: [MatchaPaginatorIntl]
-})
-export class MatchaPaginatorModule {}

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

@@ -1,223 +0,0 @@
-import {
-    Component,
-    Input,
-    Output,
-    EventEmitter,
-    ElementRef,
-    ViewChild,
-    TemplateRef,
-    OnDestroy,
-    OnInit,
-    OnChanges,
-    ChangeDetectorRef,
-    AfterViewInit
-} from '@angular/core';
-import { Subject } from 'rxjs';
-import { max, takeUntil } from 'rxjs/operators';
-
-export interface PanelPosition {
-    top: number;
-    left: number;
-    width: number;
-    maxHeight?: number;
-}
-
-export type PanelPlacement = 'bottom' | 'top' | 'auto';
-
-@Component({
-    selector: 'matcha-panel',
-    template: `
-    <div class="matcha-panel-container" style="position: relative;">
-      <ng-container *ngIf="open">
-        <!-- Painel -->
-        <div
-          #panel
-          class="matcha-panel"
-          [class.matcha-panel-top]="placement === 'top'"
-          [class.matcha-panel-bottom]="placement === 'bottom'"
-          [ngStyle]="panelStyle"
-          role="listbox"
-          [attr.aria-expanded]="open"
-          [attr.aria-hidden]="!open">
-          <ng-content></ng-content>
-        </div>
-      </ng-container>
-    </div>
-  `,
-    standalone: false
-})
-export class MatchaPanelComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
-    @Input() placement: PanelPlacement = 'auto';
-    @Input() maxHeight = 280;
-    @Input() minWidth = 160;
-    @Input() offset = 4; // Espaçamento entre trigger e painel
-    @Input() triggerElement?: HTMLElement;
-    @Input() open = false;
-
-    @Output() opened = new EventEmitter<void>();
-    @Output() closed = new EventEmitter<void>();
-
-    @ViewChild('panel', { static: false }) panelRef?: ElementRef<HTMLElement>;
-    panelStyle: { [key: string]: any } = {};
-    private destroy$ = new Subject<void>();
-    private scrollListener?: () => void;
-    private resizeListener?: () => void;
-
-    constructor(
-        private elRef: ElementRef,
-        private cdr: ChangeDetectorRef
-    ) { }
-
-    ngOnInit() {
-        // Inicialização básica
-    }
-
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.cleanupListeners();
-    }
-
-    /**
-     * Anexa o painel a um elemento trigger
-     */
-    attachTo(trigger: HTMLElement) {
-        this.triggerElement = trigger;
-    }
-
-    ngAfterViewInit() {
-        // Aguarda a view ser inicializada antes de calcular posição
-        if (this.triggerElement && this.open) {
-            this.cdr.detectChanges();
-            this.updatePosition();
-        }
-    }
-
-    /**
-     * Lifecycle hook para detectar mudanças no triggerElement
-     */
-    ngOnChanges() {
-        // Só logar quando há mudanças significativas
-        if (this.triggerElement && this.open) {
-            console.log('MatchaPanel: ngOnChanges - painel aberto, atualizando posição');
-            // Usar detectChanges para forçar a detecção de mudanças
-            this.cdr.detectChanges();
-            this.updatePosition();
-        }
-    }
-
-    /**
-     * Abre o painel
-     */
-    openPanel() {
-        if (!this.triggerElement) {
-            console.log('MatchaPanel: triggerElement não encontrado');
-            return;
-        }
-
-        // Força a detecção de mudanças antes de atualizar a posição
-        this.cdr.detectChanges();
-        this.updatePosition();
-        this.setupListeners();
-        this.opened.emit();
-    }
-
-    /**
-     * Fecha o painel
-     */
-    closePanel() {
-        console.log('MatchaPanel: Fechando painel', {
-            open: this.open,
-            triggerElement: this.triggerElement,
-            stackTrace: new Error().stack
-        });
-        this.cleanupListeners();
-        this.closed.emit();
-
-        // Forçar detecção de mudanças para garantir que o painel seja fechado
-        this.cdr.detectChanges();
-    }
-
-    /**
-     * Alterna o estado do painel
-     */
-    togglePanel() {
-        this.open ? this.closePanel() : this.openPanel();
-    }
-
-    /**
-     * Atualiza a posição do painel (simplificado para absolute)
-     */
-    updatePosition() {
-        if (!this.triggerElement) {
-            console.log('MatchaPanel: updatePosition - triggerElement não encontrado');
-            return;
-        }
-        const position = this.calculatePosition();
-        this.panelStyle = {
-            //   top: `${position.top}px`,
-            //   left: `${position.left}px`,
-            //   minWidth: `${position.width}px`,
-            top: 0,
-            left: 0,
-            width: '100%',
-            maxHeight: `${position.maxHeight || this.maxHeight}px`,
-            zIndex: 1
-        };
-    }
-
-    /**
-     * Calcula a posição ideal do painel (simplificado para absolute)
-     */
-    private calculatePosition(): PanelPosition {
-        if (!this.triggerElement) {
-            return { top: 0, left: 0, width: this.minWidth };
-        }
-
-        const rect = this.triggerElement.getBoundingClientRect();
-        const containerRect = this.triggerElement.offsetParent?.getBoundingClientRect() || { top: 0, left: 0 };
-
-        let top: number;
-        let left: number;
-        let width = Math.max(rect.width, this.minWidth);
-        let maxHeight = this.maxHeight;
-
-        // Calcular posição horizontal (relativa ao container)
-        left = rect.left - containerRect.left;
-
-        // Calcular posição vertical (relativa ao container)
-        if (this.placement === 'top') {
-            // Posicionar acima
-            top = rect.top - containerRect.top - this.maxHeight - this.offset;
-        } else {
-            // Posicionar abaixo (padrão)
-            top = rect.bottom - containerRect.top + this.offset;
-        }
-
-        return { top, left, width, maxHeight };
-    }
-
-    /**
-     * Configura listeners para scroll e resize
-     */
-    private setupListeners() {
-        // Com position absolute, não precisamos de listeners de scroll/resize
-        console.log('MatchaPanel: setupListeners - position absolute, sem listeners necessários');
-    }
-
-    /**
-     * Remove listeners
-     */
-    private cleanupListeners() {
-        if (this.scrollListener) {
-            window.removeEventListener('scroll', this.scrollListener);
-            this.scrollListener = undefined;
-        }
-        if (this.resizeListener) {
-            window.removeEventListener('resize', this.resizeListener);
-            this.resizeListener = undefined;
-        }
-    }
-
-}
-

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

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaPanelComponent } from './matcha-panel.component';
-
-@NgModule({
-  declarations: [
-    MatchaPanelComponent
-  ],
-  imports: [
-    CommonModule
-  ],
-  exports: [
-    MatchaPanelComponent
-  ]
-})
-export class MatchaPanelModule { }
-

package/src/lib/matcha-progress-bar/progress-bar.argtype.ts

@@ -1,48 +0,0 @@
-export const progressBarArgtypes = {
-    bufferValue: {
-        description: 'Buffer value of the progress bar',
-        defaultValue: '0',
-        table: {
-            type: { summary: 'range' },
-            defaultValue: { summary: '75' },
-        },
-        control: {
-            type: 'range',
-            min: '0',
-            max: '100',
-            step: '1',
-        },
-    },
-    color: {
-        description: 'Theme color palette',
-        control: 'select',
-        defaultValue: 'accent',
-        table: {
-            defaultValue: { summary: 'accent' },
-        },
-        options: ['primary', 'accent', 'warn'],
-    },
-    mode: {
-        description: 'Mode of the progress bar',
-        control: 'select',
-        defaultValue: 'indeterminate',
-        table: {
-            defaultValue: { summary: 'indeterminate' },
-        },
-        options: ['determinate', 'indeterminate', 'buffer', 'query'],
-    },
-    value: {
-        description: 'Value of the progress bar',
-        defaultValue: '0',
-        table: {
-            type: { summary: 'range' },
-            defaultValue: { summary: '25' },
-        },
-        control: {
-            type: 'range',
-            min: '0',
-            max: '100',
-            step: '1',
-        },
-    },
-};

package/src/lib/matcha-progress-bar/progress-bar.directive.ts

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

package/src/lib/matcha-progress-bar/progress-bar.mdx

@@ -1,95 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./progress-bar.stories";
-
-<Meta title="TO-DO / Progress Bar / Documentação" />
-
-# Progress bar
-
-> _mat-progress-bar_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
-
----
-
-### Modes
-
-<div class="grid-md-2 gap-16">
-
-    <div class="matcha-card background-surface flex-column gap-16">
-        <span class="h5">ProgressBar - Indeterminate</span>
-        <div class="matcha-card background-bg">
-            <Story of={ComponentStories.ProgressBarIndeterminate} />
-        </div>
-        <div class="flex-column">
-            ```html
-            <mat-progress-bar
-                matcha-progress-bar
-                color="accent"
-                mode="indeterminate"
-            ></mat-progress-bar>
-            ```
-        </div>
-    </div>
-
-    <div class="matcha-card background-surface flex-column gap-16">
-        <span class="h5">ProgressBar - Query</span>
-        <div class="matcha-card background-bg">
-            <Story of={ComponentStories.ProgressBarQuery} />
-        </div>
-        <div class="flex-column">
-            ```html
-            <mat-progress-bar
-                matcha-progress-bar
-                color="accent"
-                mode="query"
-            ></mat-progress-bar>
-            ```
-        </div>
-    </div>
-
-    <div class="matcha-card background-surface flex-column gap-16">
-        <span class="h5">ProgressBar - Buffer</span>
-        <div class="matcha-card background-bg">
-            <Story of={ComponentStories.ProgressBarBuffer} />
-        </div>
-        <div class="flex-column">
-            ```html
-                <mat-progress-bar
-                matcha-progress-bar
-                bufferValue="75"
-                color="accent"
-                mode="buffer"
-                value="25">
-            </mat-progress-bar>
-            ```
-        </div>
-    </div>
-
-
-    <div class="matcha-card background-surface flex-column gap-16">
-        <span class="h5">ProgressBar - Determinate</span>
-        <div class="matcha-card background-bg">
-            <Story of={ComponentStories.ProgressBarDeterminate} />
-        </div>
-        <div class="flex-column">
-            ```html
-                <mat-progress-bar
-                    matcha-progress-bar
-                    color="accent"
-                    mode="determinate"
-                    value="25">
-                </mat-progress-bar>
-            ```
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatProgressBarModule} from '@angular/material/progress-bar';`
-
-[Official documentation](https://material.angular.io/components/progress-bar/overview)
-
-<br />

package/src/lib/matcha-progress-bar/progress-bar.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaProgressBarDirective } from './progress-bar.directive';
-
-@NgModule({
-  declarations: [MatchaProgressBarDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[
-      MatchaProgressBarDirective
-  ]
-})
-export class MatchaProgressBarModule { }