matcha-components 20.12.0 → 20.15.0

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

@@ -0,0 +1,74 @@
+export const stepperArgtypes = {
+  step1Title: {
+    description: 'Título do Step 1',
+    control: 'text',
+    defaultValue: 'Titulo do Conteúdo do teste 1',
+    table: {
+      defaultValue: { summary: 'Titulo do Conteúdo do teste 1' },
+    },
+  },
+  step2Title: {
+    description: 'Título do Step 2',
+    control: 'text',
+    defaultValue: 'Titulo do Conteúdo do teste 2',
+    table: {
+      defaultValue: { summary: 'Titulo do Conteúdo do teste 2' },
+    },
+  },
+  step3Title: {
+    description: 'Título do Step 3',
+    control: 'text',
+    defaultValue: 'Titulo do Conteúdo do teste 3',
+    table: {
+      defaultValue: { summary: 'Titulo do Conteúdo do teste 3' },
+    },
+  },
+  step4Title: {
+    description: 'Título do Step 4',
+    control: 'text',
+    defaultValue: 'Titulo do Conteúdo do teste 4',
+    table: {
+      defaultValue: { summary: 'Titulo do Conteúdo do teste 4' },
+    },
+  },
+  step1Content: {
+    description: 'Conteúdo do Step 1',
+    control: 'text',
+    defaultValue: 'Conteúdo do teste 1',
+    table: {
+      defaultValue: { summary: 'Conteúdo do teste 1' },
+    },
+  },
+  step2Content: {
+    description: 'Conteúdo do Step 2',
+    control: 'text',
+    defaultValue: 'Conteúdo do teste 2',
+    table: {
+      defaultValue: { summary: 'Conteúdo do teste 2' },
+    },
+  },
+  step3Content: {
+    description: 'Conteúdo do Step 3',
+    control: 'text',
+    defaultValue: 'Conteúdo do teste 3',
+    table: {
+      defaultValue: { summary: 'Conteúdo do teste 3' },
+    },
+  },
+  step4Content: {
+    description: 'Conteúdo do Step 4',
+    control: 'text',
+    defaultValue: 'Conteúdo do teste 4',
+    table: {
+      defaultValue: { summary: 'Conteúdo do teste 4' },
+    },
+  },
+  disableNext: {
+    description: 'Desabilita o botão "Próximo"',
+    control: 'boolean',
+    defaultValue: false,
+    table: {
+      defaultValue: { summary: false },
+    },
+  },
+};

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

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaStepperControllerComponent } from './stepper-controller/stepper-controller.component';
+import { MatchaStepperComponent } from './stepper/stepper.component';
+import { MatchaStepperContentComponent } from './stepper-content/stepper-content.component';
+import { StepComponent } from './step/step.component';
+import { PrevStepDirective } from './prev-step.diretive';
+import { NextStepDirective } from './next-step.diretive';
+
+@NgModule({
+  declarations: [
+    MatchaStepperControllerComponent,
+    MatchaStepperComponent,
+    MatchaStepperContentComponent,
+    StepComponent
+  ],
+  imports: [
+    CommonModule,
+    PrevStepDirective,
+    NextStepDirective,
+  ],
+  exports: [
+    MatchaStepperControllerComponent, 
+    MatchaStepperComponent, 
+    MatchaStepperContentComponent,
+    StepComponent,
+    PrevStepDirective,
+    NextStepDirective
+  ],
+  providers: []
+})
+export class MatchaStepperModule { }

package/src/lib/matcha-stepper/stepper.service.ts

@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable()
+export class MatchaStepperStateService {
+  private steps: any[] = [];
+  private _steps$ = new BehaviorSubject<any[]>([]);
+  steps$ = this._steps$.asObservable();
+
+  private _activeStep$ = new BehaviorSubject<number>(0);
+  activeStep$ = this._activeStep$.asObservable();
+
+  private pendingActiveStep: number | null = null;
+
+  setSteps(steps: any[]) {
+    this.steps = steps;
+    this._steps$.next(steps);
+
+    // Se havia um índice pendente, aplica agora
+    if (this.pendingActiveStep !== null) {
+      this.setActiveStep(this.pendingActiveStep);
+      this.pendingActiveStep = null;
+    }
+  }
+
+  setActiveStep(index: number) {
+    if (this.steps.length === 0) {
+      // Steps ainda não definidos, guarda para depois
+      this.pendingActiveStep = index;
+      return;
+    }
+    if (index >= 0 && index < this.steps.length) {
+      this._activeStep$.next(index);
+    }
+  }
+
+  nextStep() {
+    const current = this._activeStep$.value;
+    if (current < this.steps.length - 1) {
+      this._activeStep$.next(current + 1);
+    }
+  }
+
+  prevStep() {
+    const current = this._activeStep$.value;
+    if (current > 0) {
+      this._activeStep$.next(current - 1);
+    }
+  }
+}

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

@@ -0,0 +1,117 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { MatchaStepperModule } from './stepper.module';
+
+export default {
+  title: 'Components / Stepper',
+  decorators: [
+    applicationConfig({
+      providers: [provideAnimations()],
+    }),
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        MatchaStepperModule
+      ],
+    }),
+  ],
+  tags: ['autodocs'],
+  args: {
+    step1Title: 'Titulo do Conteúdo do teste 1',
+    step2Title: 'Titulo do Conteúdo do teste 2',
+    step3Title: 'Titulo do Conteúdo do teste 3',
+    step4Title: 'Titulo do Conteúdo do teste 4',
+    step1Content: 'Conteúdo do teste 1',
+    step2Content: 'Conteúdo do teste 2',
+    step3Content: 'Conteúdo do teste 3',
+    step4Content: 'Conteúdo do teste 4',
+    disableNext: false,
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+} as Meta;
+
+export const StepperControls: StoryObj = {
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <matcha-stepper>
+        <div class="py-24 d-flex-column gap-16">
+          <matcha-stepper-controller [disableNext]="disableNext"></matcha-stepper-controller>
+        </div>
+        <matcha-stepper-content>
+          <step [step]="step1Title">
+            <div class="flex-column gap-inside">
+              <div class="flex-column gap-inside">{{ step1Content }}</div>
+              <div class="d-flex flex-space-between align">
+                <button prevStep matcha-button color="primary" size="small" outline="true">Anterior</button>
+                <button nextStep matcha-button color="accent" size="small" [disabled]="disableNext">Próximo</button>
+              </div>
+            </div>
+          </step>
+          <step [step]="step2Title">
+            <div class="flex-column gap-inside">
+              <div class="flex-column gap-inside">{{ step2Content }}</div>
+              <div class="d-flex flex-space-between align">
+                <button prevStep matcha-button color="primary" size="small" outline="true">Anterior</button>
+                <button nextStep matcha-button color="accent" size="small" [disabled]="disableNext">Próximo</button>
+              </div>
+            </div>
+          </step>
+          <step [step]="step3Title">
+            <div class="flex-column gap-inside">
+              <div class="flex-column gap-inside">{{ step3Content }}</div>
+              <div class="d-flex flex-space-between align">
+                <button prevStep matcha-button color="primary" size="small" outline="true">Anterior</button>
+                <button nextStep matcha-button color="accent" size="small" [disabled]="disableNext">Próximo</button>
+              </div>
+            </div>
+          </step>
+          <step [step]="step4Title">
+            <div class="flex-column gap-inside">
+              <div class="flex-column gap-inside">{{ step4Content }}</div>
+              <div class="d-flex flex-space-between align">
+                <button prevStep matcha-button color="primary" size="small" outline="true">Anterior</button>
+                <button nextStep matcha-button color="accent" size="small" [disabled]="disableNext">Próximo</button>
+              </div>
+            </div>
+          </step>
+        </matcha-stepper-content>
+      </matcha-stepper>
+    `,
+  }),
+  name: 'Stepper Controls',
+};
+
+export const StepperControlsDisabled: StoryObj = {
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <matcha-stepper>
+        <div class="py-24 d-flex-column gap-16">
+          <matcha-stepper-controller [disableNext]="true"></matcha-stepper-controller>
+        </div>
+        <matcha-stepper-content>
+          <ng-container *ngFor="let _ of [].constructor(5); let i = index">
+            <step [step]="'Titulo ' + i">
+              <div class="flex-column gap-inside">
+                <div class="flex-column gap-inside">{{ 'Conteudo ' + i }}</div>
+                <div class="d-flex flex-space-between align">
+                  <button prevStep matcha-button color="primary" size="small" outline="true">Anterior</button>
+                  <button nextStep matcha-button color="accent" size="small" [disabled]="true">Próximo</button>
+                </div>
+              </div>
+            </step>          
+          </ng-container>
+        </matcha-stepper-content>
+      </matcha-stepper>
+    `,
+  }),
+  name: 'Stepper Controls disable',
+};

package/src/lib/matcha-table/example/table-basic-example.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+import { MatTableModule } from '@angular/material/table';
+
+export interface PeriodicElement {
+    name: string;
+    position: number;
+    weight: number;
+    symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+    { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
+    { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
+    { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
+    { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
+    { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
+    { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
+    { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
+    { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
+    { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
+    { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
+];
+
+/**
+ * @title Basic use of `<table mat-table>`
+ */
+@Component({
+    selector: 'table-basic-example',
+    styleUrls: ['table-basic-example.css'],
+    templateUrl: 'table-basic-example.html',
+    imports: [MatTableModule]
+})
+export class TableBasicExample {
+    displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+    dataSource = ELEMENT_DATA;
+}

package/src/lib/matcha-table/example/table-basic-example.html

@@ -0,0 +1,35 @@
+<div class="table-container">
+    <div class="table-container-shadow">
+        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+            <!--- Note that these columns can be defined in any order.
+                  The actual rendered columns are set as a property on the row definition" -->
+
+            <!-- Position Column -->
+            <ng-container matColumnDef="position">
+                <th class="par-m" mat-header-cell *matHeaderCellDef>No.</th>
+                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.position }}</td>
+            </ng-container>
+
+            <!-- Name Column -->
+            <ng-container matColumnDef="name">
+                <th class="par-m" mat-header-cell *matHeaderCellDef>Name</th>
+                <td class="par-m color-blue" mat-cell *matCellDef="let element">{{ element.name }}</td>
+            </ng-container>
+
+            <!-- Weight Column -->
+            <ng-container matColumnDef="weight">
+                <th class="par-m" mat-header-cell *matHeaderCellDef>Weight</th>
+                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.weight }}</td>
+            </ng-container>
+
+            <!-- Symbol Column -->
+            <ng-container matColumnDef="symbol">
+                <th class="par-m" mat-header-cell *matHeaderCellDef>Symbol</th>
+                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.symbol }}</td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+        </table>
+    </div>
+</div>

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

@@ -0,0 +1,11 @@
+export const tableArgtypes = {
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

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

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

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

@@ -0,0 +1,78 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./table.stories";
+
+<Meta title="TO-DO / Table / Documentação" />
+
+# Table
+
+> _table_ "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">Table Basic</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.TableBasic} />
+            </div>
+
+            <div class="flex-column">
+
+                ```html
+                <div class="table-container">
+                    <div class="table-container-shadow">
+                        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+                            <!--- Note that these columns can be defined in any order.
+                                The actual rendered columns are set as a property on the row definition" -->
+
+                            <!-- Position Column -->
+                            <ng-container matColumnDef="position">
+                                <th class="par-m" mat-header-cell *matHeaderCellDef>No.</th>
+                                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.position }}</td>
+                            </ng-container>
+
+                            <!-- Name Column -->
+                            <ng-container matColumnDef="name">
+                                <th class="par-m" mat-header-cell *matHeaderCellDef>Name</th>
+                                <td class="par-m color-blue" mat-cell *matCellDef="let element">{{ element.name }}</td>
+                            </ng-container>
+
+                            <!-- Weight Column -->
+                            <ng-container matColumnDef="weight">
+                                <th class="par-m" mat-header-cell *matHeaderCellDef>Weight</th>
+                                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.weight }}</td>
+                            </ng-container>
+
+                            <!-- Symbol Column -->
+                            <ng-container matColumnDef="symbol">
+                                <th class="par-m" mat-header-cell *matHeaderCellDef>Symbol</th>
+                                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.symbol }}</td>
+                            </ng-container>
+
+                            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                        </table>
+                    </div>
+                </div>
+
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatTableModule} from '@angular/material/table';`
+
+[Official documentation](https://https://material.angular.io/components/table/overview)
+
+<br />

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

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaTableDirective } from './table.directive';
+
+@NgModule({
+    declarations: [MatchaTableDirective],
+    imports: [CommonModule],
+    exports: [MatchaTableDirective],
+})
+export class MatchaTableModule {}

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

@@ -0,0 +1,34 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { tableArgtypes } from './table.argtypes';
+import { TableBasicExample } from './example/table-basic-example.component';
+import { MatchaTableModule } from './table.module';
+
+export default {
+    title: 'TO-DO / Table',
+    component: TableBasicExample,
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatchaTableModule],
+        }),
+    ],
+    args: {},
+    argTypes: tableArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const TableBasic: StoryObj<TableBasicExample> = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+    }),
+    name: ' Table Basic Exemple',
+};

package/src/lib/matcha-tabs/tab-item/tab-item.component.html

@@ -0,0 +1 @@
+<ng-content *ngIf="active"></ng-content>

package/src/lib/matcha-tabs/tab-item/tab-item.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'matcha-tab',
+  templateUrl: './tab-item.component.html',
+  standalone: false,
+})
+export class MatchaTabItemComponent {
+  @Input() title: string = '';
+  @Input() icon: string = '';
+  
+  private _active: boolean = false;
+  @Input() set active(value: boolean | string) {
+    this._active = value === '' || value === true || value === 'true';
+  }
+  get active(): boolean {
+    return this._active;
+  }
+}

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

@@ -0,0 +1,22 @@
+<div class="flex-column gap-24 w-100-p">
+  <nav class="button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0 pb-4" role="tablist">
+    <button *ngFor="let tab of tabs; let i = index" (click)="selectTabByIndex(i)"
+            [attr.aria-selected]="tab.active"
+            [attr.aria-controls]="'tab-content-' + i"
+            [ngClass]="{'active': tab.active}"
+            class="
+              border-color-{{tab.active?'accent':'surface'}} background-surface
+              cursor-pointer w-100-p min-w-88 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between"
+            role="tab"
+            tabindex="{{tab.active ? 0 : -1}}">
+      <matcha-icon [name]="tab.icon" color="accent" size="md"></matcha-icon>
+      <span class="color-fg fw-900 fs-14 lh-16 line-clamp-2">
+        {{ tab.title }}
+      </span>
+    </button>
+  </nav>
+
+  <div>
+    <ng-content></ng-content>
+  </div>
+</div>

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

@@ -0,0 +1,58 @@
+import { Component, ContentChildren, AfterContentInit, QueryList, Input, Output, EventEmitter, HostListener } from '@angular/core';
+import { MatchaTabItemComponent } from '../tab-item/tab-item.component';
+import { createAnimations } from '../../matcha-animations/animations';
+
+@Component({
+  selector: 'matcha-tabs',
+  templateUrl: './tabs.component.html',
+  styleUrls: ['./tabs.component.scss'],
+  animations: [...createAnimations],
+  standalone: false,
+})
+export class MatchaTabsComponent implements AfterContentInit {
+  @ContentChildren(MatchaTabItemComponent) tabs!: QueryList<MatchaTabItemComponent>;
+  @Input() activeTabIndex: number = 0;
+  @Output() tabSelected = new EventEmitter<number>();
+
+  ngAfterContentInit() {
+    const activeTabs = this.tabs.filter(tab => tab.active);
+    if (activeTabs.length === 0 && this.tabs.first) {
+      this.selectTabByIndex(this.activeTabIndex);
+    }
+  }
+
+  selectTab(tab: MatchaTabItemComponent) {
+    if (tab.active) return;
+
+    const tabsArray = this.tabs.toArray();
+    tabsArray.forEach(t => t.active = false);
+    tab.active = true;
+    const index = tabsArray.indexOf(tab);
+    this.tabSelected.emit(index);
+  }
+
+  selectTabByIndex(index: number) {
+    if (index >= 0 && index < this.tabs.length) {
+      const tab = this.tabs.toArray()[index];
+      this.selectTab(tab);
+    }
+  }
+
+  @HostListener('keydown', ['$event'])
+  handleKeyboardEvent(event: KeyboardEvent) {
+    const tabsArray = this.tabs.toArray();
+    const currentIndex = tabsArray.findIndex(tab => tab.active);
+
+    if (event.key === 'ArrowRight') {
+      const nextIndex = (currentIndex + 1) % tabsArray.length;
+      this.selectTabByIndex(nextIndex);
+    } else if (event.key === 'ArrowLeft') {
+      const prevIndex = (currentIndex - 1 + tabsArray.length) % tabsArray.length;
+      this.selectTabByIndex(prevIndex);
+    } else if (event.key === 'Home') {
+      this.selectTabByIndex(0);
+    } else if (event.key === 'End') {
+      this.selectTabByIndex(tabsArray.length - 1);
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaTabsComponent } from './tabs/tabs.component';
+import { MatchaTooltipModule } from '../matcha-tooltip/tooltip.module';
+import { MatchaTabItemComponent } from './tab-item/tab-item.component';
+import { MatchaIconModule } from '../matcha-icon/icon.module';
+
+
+
+@NgModule({
+  declarations: [MatchaTabsComponent, MatchaTabItemComponent],
+  imports: [
+    CommonModule,
+    MatchaTooltipModule,
+    MatchaIconModule,
+  ],
+  exports: [MatchaTabsComponent, MatchaTabItemComponent]
+})
+export class MatchaTabsModule { }