matcha-components 20.12.0 → 20.15.0

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

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

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

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

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

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

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

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

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

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

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