matcha-components 20.13.0 → 20.15.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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