matcha-components 20.15.0 → 20.16.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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