matcha-components 20.15.0 → 20.16.0

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

@@ -1,111 +0,0 @@
-let menuPanelUid = 0;
-
-export const menuArgtypes = {
-    'aria-describedby': {
-        description: 'aria-describedby for the menu panel.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    'aria-label': {
-        description: 'aria-label for the menu panel.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    'aria-labelledby': {
-        description: 'aria-labelledby for the menu panel.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    backdropClass: {
-        description: 'Class to be added to the backdrop element.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    hasBackdrop: {
-        description: 'Whether the menu has a backdrop.',
-        control: 'boolean',
-        defaultValue: 'false',
-        table: {
-            type: { summary: 'boolean | undefined' },
-        },
-    },
-    overlapTrigger: {
-        description: 'Whether the menu should overlap its trigger.',
-        control: 'boolean',
-        defaultValue: 'false',
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    class: {
-        description: "This method takes classes set on the host mat-menu element and applies them on the menu template that displays in the overlay container. Otherwise, it's difficult to style the containing menu from outside the component.",
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    xPosition: {
-        description: 'Position of the menu in the X axis.',
-        control: 'select',
-        options: ['before', 'after'],
-        defaultValue: 'after',
-        table: {
-            type: { summary: 'MenuPositionX' },
-        },
-    },
-    yPosition: {
-        description: 'Position of the menu in the Y axis.',
-        control: 'select',
-        options: ['above', 'below'],
-        defaultValue: 'below',
-        table: {
-            type: { summary: 'MenuPositionY' },
-        },
-    },
-    closed: {
-        description: 'Event emitted when the menu is closed.',
-        action: 'closed',
-    },
-    direction: {
-        description: 'Layout direction of the menu.',
-        control: 'select',
-        options: ['ltr', 'rtl'],
-        defaultValue: 'ltr',
-        table: {
-            type: { summary: 'Direction' },
-        },
-    },
-    overlayPanelClass: {
-        description: 'Class or list of classes to be added to the overlay panel.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string | string[]' },
-        },
-    },
-    panelId: {
-        description: 'ID of the menu panel.',
-        control: 'text',
-        defaultValue: `mat-menu-panel-${menuPanelUid++}`,
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    parentMenu: {
-        description: 'Parent menu of the current menu panel.',
-        control: 'null', // Como é um componente, não é necessário um controle.
-    },
-};

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

@@ -1,3 +0,0 @@
-<div class="menu" [ngClass]="{'show': isOpen}">
-    <ng-content></ng-content>
-  </div>

package/src/lib/matcha-menu/menu.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MatchaMenuComponent } from './matcha-menu.component';
-
-describe('MatchaMenuComponent', () => {
-  let component: MatchaMenuComponent;
-  let fixture: ComponentFixture<MatchaMenuComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MatchaMenuComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(MatchaMenuComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,48 +0,0 @@
-import { Component, HostListener, ElementRef, Renderer2, Input, Inject } from '@angular/core';
-
-@Component({
-    selector: 'matcha-menu',
-    templateUrl: './menu.component.html',
-    styleUrls: ['./menu.component.scss'],
-    exportAs: 'matchaMenu',
-    standalone: false
-})
-export class MatchaMenuComponent {
-    @Input() isParentMenu = false;
-    isOpen = false;
-
-    constructor(
-        @Inject(ElementRef) private _elementRef: ElementRef,
-        @Inject(Renderer2) private _renderer: Renderer2
-    ) {
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-menu')
-    }
-
-    @HostListener('document:click', ['$event'])
-    handleOutsideClick(event: Event) {
-      if (!this._elementRef.nativeElement.contains(event.target) && this.isOpen) {
-        this.closeMenu();
-      }
-    }
-
-    @HostListener('mouseleave', ['$event'])
-    handleMouseLeave(event: MouseEvent) {
-      if (!this.isParentMenu && this._elementRef.nativeElement.contains(event.relatedTarget)) {
-        return;
-      }
-      this.closeMenu();
-    }
-
-    openMenu() {
-      this.isOpen = true;
-    }
-
-    closeMenu() {
-      this.isOpen = false;
-    }
-
-    toggleMenu() {
-      this.isOpen = !this.isOpen;
-    }
-  }

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

@@ -1,39 +0,0 @@
-import { Directive, Input, HostListener, ElementRef, Renderer2, Inject } from '@angular/core';
-import { MatchaMenuComponent } from './menu.component';
-
-@Directive({
-    selector: '[matchaMenuTriggerFor]',
-    exportAs: 'matchaMenuTriggerFor',
-    standalone: false
-})
-export class MatchaMenuTriggerForDirective {
-    @Input('matchaMenuTriggerFor') menu!: MatchaMenuComponent;
-
-    constructor(
-        @Inject(ElementRef) private _elementRef: ElementRef,
-        @Inject(Renderer2) private _renderer: Renderer2
-    ) {
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-menu-trigger')
-    }
-
-    @HostListener('click', ['$event'])
-    onClick(event: Event) {
-      event.stopPropagation();
-      this.menu.toggleMenu();
-    }
-
-    @HostListener('mouseenter')
-    onMouseEnter() {
-      if (!this.menu.isParentMenu) {
-        this.menu.openMenu();
-      }
-    }
-
-    @HostListener('mouseleave')
-    onMouseLeave() {
-      if (!this.menu.isParentMenu) {
-        this.menu.closeMenu();
-      }
-    }
-  }

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

@@ -1,59 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./menu.stories";
-
-<Meta title="TO-DO / Menu / Documentação" />
-
-# Menu
-
-> _menu_ é um painel flutuante contendo uma lista de opções.
-
----
-
-### Modes
-
-<div class="flex-column gap-16">
-    <div class="flex-column">
-        <div class="matcha-card background-surface flex-column gap-16">
-            <span class="h5">Menu com ícones</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.MenuWithIcons} />
-            </div>
-
-            <div class="flex-column">
-
-                ```html
-                <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
-                    <span class="i-matcha-favorite"></span>
-                </button>
-                <mat-menu #menu="matMenu">
-                    <button mat-menu-item>
-                    <span class="i-matcha-favorite mr-8"></span>
-                    <span class="par-m">Radial</span>
-                    </button>
-                    <button mat-menu-item disabled>
-                    <span class="i-matcha-favorite mr-8"></span>
-                    <span class="par-m">Check voice mail</span>
-                    </button>
-                    <button mat-menu-item>
-                    <span class="i-matcha-favorite mr-8"></span>
-                    <span class="par-m">Disable alerts</span>
-                    </button>
-                </mat-menu>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatDatepickerModule} from '@angular/material/menu';`
-
-[Official documentation](https://https://material.angular.io/components/menu/overview)
-
-<br />

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

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaMenuComponent } from './menu.component';
-import { MatchaMenuTriggerForDirective } from './menu.directive';
-
-@NgModule({
-  declarations: [
-    MatchaMenuComponent,
-    MatchaMenuTriggerForDirective
-  ],
-  imports: [
-    CommonModule
-  ],
-  exports: [
-    MatchaMenuComponent,
-    MatchaMenuTriggerForDirective
-  ]
-})
-export class MatchaMenuModule { }

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

@@ -1,122 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatButtonModule } from '@angular/material/button';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { menuArgtypes } from './menu.argtypes';
-
-export default {
-    title: 'TO-DO / Menu',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatButtonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
-        }),
-    ],
-    args: {
-        color: 'accent',
-    },
-    argTypes: menuArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const MenuWithIcons: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex-center-center">
-            <div class="matcha-card background-surface flex-column--force gap-16 max-w-256 w-256">
-              <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
-                <span class="i-matcha-favorite"></span>
-              </button>
-              <mat-menu #menu="matMenu">
-                <button mat-menu-item>
-                  <span class="i-matcha-favorite mr-8"></span>
-                  <span class="par-m">Radial</span>
-                </button>
-                <button mat-menu-item disabled>
-                  <span class="i-matcha-favorite mr-8"></span>
-                  <span class="par-m">Check voice mail</span>
-                </button>
-                <button mat-menu-item>
-                  <span class="i-matcha-favorite mr-8"></span>
-                  <span class="par-m">Disable alerts</span>
-                </button>
-              </mat-menu>
-            </div>
-        </div>
-        `,
-    }),
-    name: 'Menu with icons',
-};
-
-export const NestedMenu: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex-center-center">
-            <div class="matcha-card background-surface d-flex gap-16 max-w-256 w-256">
-
-              <button mat-button [matMenuTriggerFor]="animals">Animal index</button>
-              <mat-menu #animals="matMenu">
-                <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
-                <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
-              </mat-menu>
-
-              <mat-menu #vertebrates="matMenu">
-                <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
-                <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
-                <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
-                <button mat-menu-item>Birds</button>
-                <button mat-menu-item>Mammals</button>
-              </mat-menu>
-
-              <mat-menu #invertebrates="matMenu">
-                <button mat-menu-item>Insects</button>
-                <button mat-menu-item>Molluscs</button>
-                <button mat-menu-item>Crustaceans</button>
-                <button mat-menu-item>Corals</button>
-                <button mat-menu-item>Arachnids</button>
-                <button mat-menu-item>Velvet worms</button>
-                <button mat-menu-item>Horseshoe crabs</button>
-              </mat-menu>
-
-              <mat-menu #fish="matMenu">
-                <button mat-menu-item>Baikal oilfish</button>
-                <button mat-menu-item>Bala shark</button>
-                <button mat-menu-item>Ballan wrasse</button>
-                <button mat-menu-item>Bamboo shark</button>
-                <button mat-menu-item>Banded killifish</button>
-              </mat-menu>
-
-              <mat-menu #amphibians="matMenu">
-                <button mat-menu-item>Sonoran desert toad</button>
-                <button mat-menu-item>Western toad</button>
-                <button mat-menu-item>Arroyo toad</button>
-                <button mat-menu-item>Yosemite toad</button>
-              </mat-menu>
-
-              <mat-menu #reptiles="matMenu">
-                <button mat-menu-item>Banded Day Gecko</button>
-                <button mat-menu-item>Banded Gila Monster</button>
-                <button mat-menu-item>Black Tree Monitor</button>
-                <button mat-menu-item>Blue Spiny Lizard</button>
-                <button mat-menu-item disabled>Velociraptor</button>
-              </mat-menu>
-            </div>
-        </div>
-      `,
-    }),
-    name: 'Nested menu',
-};

package/src/lib/matcha-modal/exemplo/exemple-modal-content.component.html

@@ -1,34 +0,0 @@
-<matcha-modal [size]="data?.size || 'small'">
-    <matcha-modal-header>
-        <matcha-title type="icon" icon="home" [color]="data?.cor || 'primary'">{{ data?.titulo || 'MatchaModal' }}</matcha-title>
-        <matcha-modal-options>
-            <button matcha-button size="small" outline="true" icon="true" [color]="data?.cor || 'primary'">
-                <span class="i-matcha-home"></span>
-            </button>
-            <button matcha-button size="small" outline="true" icon="true" [color]="data?.cor || 'primary'">
-                <span class="i-matcha-home"></span>
-            </button>
-        </matcha-modal-options>
-    </matcha-modal-header>
-    <matcha-modal-content>
-        <div class="matcha-card-flat p-0 flex-column red" [ngClass]="'theme-default-' + data?.tema">
-            <div class="flex-column matcha-card p-16">
-                <form [formGroup]="formulario">
-                    <matcha-form-field [color]="data?.cor || 'blue'" size="small">
-                        <matcha-label>Nome</matcha-label>
-                        <input type="text" placeholder="Digite seu nome" formControlName="name" />
-                        <matcha-error>Campo obrigatório</matcha-error>
-                    </matcha-form-field>
-                </form>
-
-                <pre>{{ data | json }}</pre>
-            </div>
-        </div>
-    </matcha-modal-content>
-    <matcha-modal-footer>
-        <div class="flex-column flex-sm-row w-100-p flex-space-between mt-16 mt-md-24 gap-16">
-            <button matcha-button size="medium" outline="true" [color]="data?.cor || 'blue'" (click)="fechar()" class="max-w-sm-256 w-100-p">Fechar</button>
-            <button matcha-button size="medium" outline="true" color="accent" (click)="salvar()" class="max-w-sm-256 w-100-p">Salvar</button>
-        </div>
-    </matcha-modal-footer>
-</matcha-modal>

package/src/lib/matcha-modal/exemplo/exemple-modal-content.component.ts

@@ -1,44 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { ModalComponent } from '../modal.service';
-import { MatchaModalService } from '../modal.service';
-
-@Component({
-    selector: 'exemple-modal-content',
-    templateUrl: './exemple-modal-content.component.html',
-    standalone: false
-})
-export class ExempleModalContent implements OnInit, ModalComponent {
-    formulario: FormGroup;
-    afterClose = new Subject<any>();
-    data: any = {};
-
-    constructor(
-        private fb: FormBuilder,
-        private modalService: MatchaModalService
-    ) {
-        this.formulario = this.fb.group({
-            name: [''],
-        });
-    }
-
-    ngOnInit(): void {
-        // Recebe os dados do modal
-        const dados = this.modalService.getData();
-        if (dados) {
-            this.data = dados;
-            console.log(dados);
-        }
-    }
-
-    salvar() {
-        const dados = this.formulario.value;
-        this.afterClose.next(dados);
-        this.modalService.close(dados);
-    }
-
-    fechar() {
-        this.modalService.close();
-    }
-}

package/src/lib/matcha-modal/exemplo/exemple-modal.component.html

@@ -1,46 +0,0 @@
-<page-header></page-header>
-
-<div class="flex-column gap-inside matcha-card-flat background-bg p-16">
-    <div class="matcha-card background-surface flex-column gap-16">
-        <matcha-title color="accent" size="3">Dados a serem enviados para o modal</matcha-title>
-        <matcha-divider gap="16"></matcha-divider>
-
-        <form [formGroup]="infoForm" class="gap-16 d-flex flex-column flex-md-row">
-            <matcha-form-field color="blue" size="small">
-                <matcha-label>Tamanho do modal</matcha-label>
-                <input type="text" placeholder="Digite o tamanho" formControlName="size" />
-                <matcha-error>Campo obrigatório</matcha-error>
-            </matcha-form-field>
-
-            <matcha-form-field color="blue" size="small">
-                <matcha-label>Título do modal</matcha-label>
-                <input type="text" placeholder="Digite o título" formControlName="titulo" />
-                <matcha-error>Campo obrigatório</matcha-error>
-            </matcha-form-field>
-
-            <matcha-form-field color="blue" size="small">
-                <matcha-label>Cor dos detalhes do modal</matcha-label>
-                <input type="text" placeholder="Digite a cor" formControlName="cor" />
-                <matcha-error>Campo obrigatório</matcha-error>
-            </matcha-form-field>
-
-            <matcha-form-field color="blue" size="small">
-                <matcha-label>Tema do modal</matcha-label>
-                <input type="text" placeholder="Digite o tema" formControlName="tema" />
-                <matcha-error>Campo obrigatório</matcha-error>
-            </matcha-form-field>
-        </form>
-    </div>
-
-    <div class="d-flex flex-center gap-16">
-        <button matcha-button size="medium" color="primary" (click)="openModal()">Abrir Modal</button>
-    </div>
-
-    <matcha-divider gap="16"></matcha-divider>
-
-    <div *ngIf="dadosRecebidos" class="matcha-card background-surface flex-column gap-16">
-        <matcha-title color="accent" size="3">Dados Recebidos do Modal</matcha-title>
-        <matcha-divider gap="16"></matcha-divider>
-        <pre>{{ dadosRecebidos | json }}</pre>
-    </div>
-</div>

package/src/lib/matcha-modal/exemplo/exemple-modal.component.ts

@@ -1,34 +0,0 @@
-import { Component } from '@angular/core';
-import { MatchaModalService } from '../modal.service';
-import { ExempleModalContent } from './exemple-modal-content.component';
-import { FormBuilder, FormGroup } from '@angular/forms';
-
-@Component({
-    selector: 'exemple-matcha-modal',
-    templateUrl: './exemple-modal.component.html',
-    standalone: false
-})
-export class ExempleMatchaModal {
-    dadosRecebidos: any;
-    infoForm: FormGroup;
-
-    constructor(private modalService: MatchaModalService, private fb: FormBuilder) {
-        this.infoForm = this.fb.group({
-            size: ['medium'],
-            titulo: ['Meu Modal Personalizado'],
-            cor: ['blue'],
-            tema: ['dark']
-        });
-    }
-
-    openModal() {
-        const modalRef = this.modalService.open(ExempleModalContent, this.infoForm.value);
-
-        modalRef.afterClose.subscribe(result => {
-            if (result) {
-                this.dadosRecebidos = result;
-                console.log('Dados recebidos do modal:', result);
-            }
-        });
-    }
-}

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

@@ -1,45 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaIconModule } from '../matcha-icon/icon.module';
-import { MatchaTitleModule } from '../matcha-title/title.module';
-import { MatchaDividerModule } from '../matcha-divider/divider.module';
-import { MatchaTooltipModule } from '../matcha-tooltip/tooltip.module';
-import { MatchaElevationModule } from '../matcha-elevation/elevation.module';
-
-import { MatchaModalHeaderComponent } from './modal-header/modal-header.component';
-import { MatchaModalContentComponent } from './modal-content/modal-content.component';
-import { MatchaModalFooterComponent } from './modal-footer/modal-footer.component';
-import { MatchaModalOptionsComponent } from './modal-options/modal-options.component';
-import { MatchaModalComponent } from './modal/modal.component';
-import { MatchaModalService } from './modal.service';
-import { MatchaOverlayService } from './overlay.service';
-
-@NgModule({
-  declarations: [
-    MatchaModalHeaderComponent,
-    MatchaModalContentComponent,
-    MatchaModalFooterComponent,
-    MatchaModalOptionsComponent,
-    MatchaModalComponent
-  ],
-  imports: [
-    CommonModule,
-    MatchaIconModule,
-    MatchaTitleModule,
-    MatchaDividerModule,
-    MatchaTooltipModule,
-    MatchaElevationModule
-  ],
-  exports: [
-    MatchaModalHeaderComponent,
-    MatchaModalContentComponent,
-    MatchaModalFooterComponent,
-    MatchaModalOptionsComponent,
-    MatchaModalComponent
-  ],
-  providers: [
-    MatchaModalService,
-    MatchaOverlayService
-  ]
-})
-export class MatchaModalModule { }

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

@@ -1,3 +0,0 @@
-<div class="background-surface elevation-z-4 flex-column matcha-modal radius-8">
-    <ng-content></ng-content>
-</div>