matcha-components 20.12.0 → 20.15.0

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

@@ -0,0 +1,50 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'matcha-divider',
+  templateUrl: './divider.component.html',
+  styleUrls: ['./divider.component.scss'],
+  standalone: false
+})
+export class MatchaDividerComponent {
+  @Input('gap') gap: string | number | null = null;
+  @Input('gap-sm') gapSm: string | number | null = null;
+  @Input('gap-md') gapMd: string | number | null = null;
+  @Input('gap-lg') gapLg: string | number | null = null;
+  @Input('gap-xl') gapXl: string | number | null = null;
+
+  private _vertical = false;
+  @Input('vertical')
+  set vertical(value: boolean | string) {
+    /**
+     * Quando o atributo é utilizado sem valor, Angular o passa como string vazia (''),
+     * portanto consideramos como true.
+     */
+    this._vertical = value === '' || value === true || value === 'true';
+  }
+  get vertical(): boolean {
+    return this._vertical;
+  }
+
+  public get classes(): string {
+    const hasVertical = this.vertical;
+    const directionPrefix = hasVertical ? 'mx' : 'my';
+    const gap = this.gap ? `${directionPrefix}-${this.gap}` : '';
+    const gapSm = this.gapSm ? `${directionPrefix}-sm-${this.gapSm}` : '';
+    const gapMd = this.gapMd ? `${directionPrefix}-md-${this.gapMd}` : '';
+    const gapLg = this.gapLg ? `${directionPrefix}-lg-${this.gapLg}` : '';
+    const gapXl = this.gapXl ? `${directionPrefix}-xl-${this.gapXl}` : '';
+    let activeClasses = '';
+    const verticalClasses = 'flex-row h-100-p bl-2 border-color-disabled';
+    const horizontalClasses = 'flex-column w-100-p bt-2 border-color-disabled';
+
+    activeClasses += hasVertical ? verticalClasses : horizontalClasses;
+    activeClasses += gap ? ` ${gap}` : '';
+    activeClasses += gapSm ? ` ${gapSm}` : '';
+    activeClasses += gapMd ? ` ${gapMd}` : '';
+    activeClasses += gapLg ? ` ${gapLg}` : '';
+    activeClasses += gapXl ? ` ${gapXl}` : '';
+
+    return activeClasses;
+  }
+}

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

@@ -0,0 +1,57 @@
+export const dividerArgtypes = {
+    gap:{
+        description: 'The gap size of the divider.',
+        control: 'select',
+        defaultValue: '0',
+        table: {
+            defaultValue: { summary: 'medium' },
+        },
+        options: ['', '0', '4', '8', '12', '16', '20', '24', '32'],
+    },
+
+
+    gapSm: {
+        description: 'The gap size of the divider on small screens.',
+        control: 'select',
+        defaultValue: '0',
+        table: {
+            defaultValue: { summary: 'medium' },
+        },
+        options: ['', '0', '4', '8', '12', '16', '20', '24', '32'],
+    },
+    gapMd: {
+        description: 'The gap size of the divider on medium screens.',
+        control: 'select',
+        defaultValue: '0',
+        table: {
+            defaultValue: { summary: 'medium' },
+        },
+        options: ['', '0', '4', '8', '12', '16', '20', '24', '32'],
+    },
+    gapLg: {
+        description: 'The gap size of the divider on large screens.',
+        control: 'select',
+        defaultValue: '0',
+        table: {
+            defaultValue: { summary: 'medium' },
+        },
+        options: ['', '0', '4', '8', '12', '16', '20', '24', '32'],
+    },
+    gapXl: {
+        description: 'The gap size of the divider on extra large screens.',
+        control: 'select',
+        defaultValue: '0',
+        table: {
+            defaultValue: { summary: 'medium' },
+        },
+        options: ['', '0', '4', '8', '12', '16', '20', '24', '32'],
+    },
+    vertical: {
+        description: 'Whether the divider is vertically aligned.',
+        control: 'boolean',
+        defaultValue: 'false',
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+};

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

@@ -0,0 +1,107 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./divider.stories";
+
+<Meta title="Atoms / Divider / Documentação" />
+
+# Divider
+
+> _&lt;matcha-divider&gt;_ "O componente divider é utilizado para separar conteúdo em listas e layouts. Ele pode ser configurado com diferentes orientações e estilos para atender às necessidades específicas da interface do usuário."
+
+---
+
+### Exemplo
+
+<div class="flex-column gap-16">
+    <div class="flex-column">
+        <div class="matcha-card background-surface flex-column gap-16">
+            <span class="h5">Divider Controls</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.DividerControls} />
+            </div>
+
+            <div class="flex-column">
+
+                ```html
+                <matcha-divider></matcha-divider>
+                ```
+
+            </div>
+        </div>
+    </div>
+</div>
+
+### Atributos Personalizáveis
+
+Define as propriedades do divider, permitindo personalização. Por exemplo:
+
+<table class="w-100-p">
+    <thead>
+        <tr>
+            <th>Atributo</th>
+            <th>Opções</th>
+            <th>Descrição</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>gap</td>
+            <td>string | number</td>
+            <td>Define o tamanho do espaçamento do divider.</td>
+        </tr>
+        <tr>
+            <td>gapSm</td>
+            <td>string | number</td>
+            <td>Define o tamanho do espaçamento do divider em telas pequenas.</td>
+        </tr>
+        <tr>
+            <td>gapMd</td>
+            <td>string | number</td>
+            <td>Define o tamanho do espaçamento do divider em telas médias.</td>
+        </tr>
+        <tr>
+            <td>gapLg</td>
+            <td>string | number</td>
+            <td>Define o tamanho do espaçamento do divider em telas grandes.</td>
+        </tr>
+        <tr>
+            <td>gapXl</td>
+            <td>string | number</td>
+            <td>Define o tamanho do espaçamento do divider em telas extra grandes.</td>
+        </tr>
+        <tr>
+            <td>vertical</td>
+            <td>boolean</td>
+            <td>Define se o divider deve ser vertical.</td>
+        </tr>
+    </tbody>
+</table>
+
+### Instalação
+
+Para utilizar o componente _matcha-divider_, siga os passos abaixo:
+
+1. Instale o pacote [matcha-components](https://www.npmjs.com/package/matcha-components) via npm ou yarn.
+
+`npm install matcha-components`
+
+2. Importe o módulo MatchaDividerModule no módulo que deseja utilizar o componente.
+
+`import { MatchaDividerModule } from 'matcha-components';`
+
+3. Em seguida, adicione o módulo ao array de imports do seu módulo.
+
+<div class="matcha-card background-surface flex-column gap-16">
+    <div class="flex-column">
+
+        ```typescript
+        @NgModule({
+            imports: [
+                MatchaDividerModule
+            ]
+        })
+        export class AppModule { }
+        ```
+
+    </div>
+</div>

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaDividerComponent } from './divider/divider.component';
+
+@NgModule({
+    declarations: [
+        MatchaDividerComponent
+    ],
+    imports: [CommonModule],
+    exports: [
+        MatchaDividerComponent
+    ],
+})
+export class MatchaDividerModule {}

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

@@ -0,0 +1,44 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { MatDividerModule } from '@angular/material/divider';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { dividerArgtypes } from './divider.argtypes';
+import { MatchaDividerComponent } from './divider/divider.component';
+
+export default {
+    title: 'Atoms / Divider',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatDividerModule],
+            declarations: [MatchaDividerComponent],
+        }),
+    ],
+    args: {
+        gap: 16,
+        gapSm: null,
+        gapMd: null,
+        gapLg: null,
+        gapXl: null,
+        vertical: false,
+    },
+    argTypes: dividerArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const DividerControls: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <matcha-divider [gap]="gap" [gap-sm]="gapSm" [gap-md]="gapMd" [gap-lg]="gapLg" [gap-xl]="gapXl" [vertical]="vertical"></matcha-divider>
+        `,
+    }),
+    name: ' Divider Controls',
+};

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

@@ -0,0 +1,43 @@
+<!-- Backdrop para modo overlay -->
+<div *ngIf="isOverlayMode && isOpen && hasBackdrop"
+     class="matcha-backdrop"
+     [@fadeInOut]="isOpen ? '1' : '0'"
+     (click)="onBackdropClick()">
+</div>
+
+<!-- Drawer Container Principal -->
+<div *ngIf="(isOpen && mode === 'overlay') || mode === 'push'"
+     class="matcha-drawer-container"
+     [class.matcha-drawer-overlay-mode]="isOverlayMode"
+     [class.matcha-drawer-push-mode]="isPushMode"
+     [class.matcha-drawer-left]="position === 'left'"
+     [class.matcha-drawer-right]="position === 'right'"
+     [@slideInLeft]="animationState"
+     [style.transform]="getDrawerTransform()"
+     [style.width]="drawerWidth"
+     [style.overflow]="isOpen ? 'visible' : 'hidden'"
+     (keydown)="onKeyDown($event)"
+     tabindex="0">
+
+  <!-- Drawer Content -->
+  <div class="matcha-drawer-content"
+       [style.min-width]="width">
+
+    <!-- Header do drawer -->
+    <div class="matcha-drawer-header">
+      <ng-content select="[drawer-header]"></ng-content>
+
+    </div>
+
+    <!-- Conteúdo principal do drawer -->
+    <div class="matcha-drawer-main-content">
+      <ng-content select="[drawer-content]"></ng-content>
+      <ng-content></ng-content>
+    </div>
+
+    <!-- Footer do drawer -->
+    <div *ngIf="hasFooter" class="matcha-drawer-footer">
+      <ng-content select="[drawer-footer]"></ng-content>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,358 @@
+import { Component, Input, Output, EventEmitter, HostBinding, ElementRef, Renderer2, OnInit, OnDestroy, ChangeDetectorRef, ViewChild, TemplateRef } from '@angular/core';
+import { Subscription, Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { createAnimations } from '../../matcha-animations/animations';
+import { MatchaBreakpointObserver, BreakpointState } from '../../matcha-breakpoint-observable/breakpoint-observer.service';
+
+export interface DrawerItem {
+  id: string;
+  label: string;
+  icon?: string;
+  route?: string;
+  action?: () => void;
+  badge?: string | number;
+  disabled?: boolean;
+  divider?: boolean;
+}
+
+export interface DrawerSection {
+  id: string;
+  title?: string;
+  items: DrawerItem[];
+  position: 'top' | 'bottom';
+  divider?: boolean;
+}
+
+export type DrawerMode = 'push' | 'overlay';
+export type DrawerPosition = 'left' | 'right';
+
+@Component({
+  selector: 'matcha-drawer',
+  templateUrl: './drawer.component.html',
+  animations: createAnimations,
+  standalone: false
+})
+export class MatchaDrawerComponent implements OnInit, OnDestroy {
+
+  @Input() isOpen: boolean = false;
+  @Input() mode: DrawerMode = 'overlay';
+  @Input() position: DrawerPosition = 'left';
+  @Input() width: string = '300px';
+  @Input() hasBackdrop: boolean = true;
+  @Input() disableClose: boolean = false;
+  @Input() autoCloseOnMobile: boolean = true;
+  @Input() breakpoint: number = 1024;
+  @Input() elevation: number = 8;
+  @Input() hasFooter: boolean = false;
+
+  // Novas propriedades para responsividade inteligente
+  @Input() responsiveMode: boolean = true;
+  @Input() mobileMode: DrawerMode = 'overlay';
+  @Input() desktopMode: DrawerMode = 'push';
+  @Input() mobileBreakpoint: number = 768;
+
+  // 🎯 Nova propriedade para comportamento inteligente automático
+  @Input() autoResponsive: boolean = true;
+
+  @Output() isOpenChange = new EventEmitter<boolean>();
+  @Output() drawerToggle = new EventEmitter<void>();
+  @Output() drawerOpened = new EventEmitter<void>();
+  @Output() drawerClosed = new EventEmitter<void>();
+
+  @ViewChild('drawerContent', { static: false }) drawerContent!: TemplateRef<any>;
+
+  @HostBinding('class') get drawerClasses() {
+    return `matcha-drawer matcha-drawer-${this.mode} matcha-drawer-${this.position} ${this.isOpen ? 'matcha-drawer-open' : 'matcha-drawer-closed'}`;
+  }
+
+  @HostBinding('style.width') get drawerWidth() {
+    if (this.mode === 'overlay') {
+      // Modo overlay: sempre 0px para não empurrar o conteúdo
+      return '0px';
+    }
+    // Modo push: ocupa espaço apenas quando aberto
+    return this.isOpen ? this.width : '0px';
+  }
+
+  @HostBinding('style.height') get drawerHeight() {
+    return '100vh';
+  }
+
+  private resizeObserver: ResizeObserver | undefined;
+  private isMobile: boolean = false;
+  private bodyScrollLocked: boolean = false;
+  private breakpointSubscription?: Subscription;
+  private currentResponsiveMode: DrawerMode = 'push';
+
+  // 🎯 Subject para controlar resize com debounce
+  private resizeSubject = new Subject<boolean>();
+
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    private cdr: ChangeDetectorRef,
+    private breakpointObserver: MatchaBreakpointObserver
+  ) {
+    this.setupResizeObserver();
+    this.setupResizeDebounce();
+  }
+
+  ngOnInit() {
+    this.checkScreenSize();
+    this.setupBodyScrollLock();
+
+    // 🎯 Comportamento inteligente automático
+    if (this.autoResponsive) {
+      this.setupSmartInitialState();
+    }
+
+    if (this.responsiveMode) {
+      this.setupResponsiveMode();
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    if (this.breakpointSubscription) {
+      this.breakpointSubscription.unsubscribe();
+    }
+    // 🎯 Limpeza do Subject
+    this.resizeSubject.complete();
+    this.unlockBodyScroll();
+  }
+
+  private setupResizeObserver() {
+    if (typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.checkScreenSize();
+      });
+
+      if (this.elementRef.nativeElement.parentElement) {
+        this.resizeObserver.observe(this.elementRef.nativeElement.parentElement);
+      }
+    }
+  }
+
+  // 🎯 Configuração do debounce para resize
+  private setupResizeDebounce(): void {
+    this.resizeSubject.pipe(
+      debounceTime(150) // Aguarda 150ms de estabilidade
+    ).subscribe((isMobile) => {
+      this.updateDrawerStateOnResize();
+    });
+  }
+
+  private checkScreenSize() {
+    const wasMobile = this.isMobile;
+    this.isMobile = window.innerWidth < this.breakpoint;
+
+    if (wasMobile !== this.isMobile) {
+      this.cdr.detectChanges();
+
+      if (!this.isMobile && this.autoCloseOnMobile && this.isOpen) {
+        this.close();
+      }
+    }
+  }
+
+  private setupResponsiveMode(): void {
+    const breakpoint = `(max-width: ${this.mobileBreakpoint}px)`;
+    this.breakpointSubscription = this.breakpointObserver
+      .observe(breakpoint)
+      .subscribe((result: BreakpointState) => {
+        this.isMobile = result.matches;
+        this.updateModeBasedOnScreen();
+        this.cdr.detectChanges();
+      });
+  }
+
+  private updateModeBasedOnScreen(): void {
+    if (this.responsiveMode) {
+      const newMode = this.isMobile ? this.mobileMode : this.desktopMode;
+      if (newMode !== this.currentResponsiveMode) {
+        this.currentResponsiveMode = newMode;
+        // Apenas atualiza o modo se não foi definido manualmente
+        if (this.mode === this.mobileMode || this.mode === this.desktopMode) {
+          this.mode = newMode;
+        }
+
+        // 🎯 Comportamento dinâmico inteligente durante resize
+        if (this.autoResponsive) {
+          this.resizeSubject.next(this.isMobile);
+        }
+      }
+    }
+  }
+
+  // 🎯 Método para atualizar estado do drawer durante resize
+  private updateDrawerStateOnResize(): void {
+    // Só aplica a lógica se mobile = overlay e desktop = push
+    if (this.mobileMode === 'overlay' && this.desktopMode === 'push') {
+      const shouldBeOpen = !this.isMobile; // Desktop aberto, Mobile fechado
+
+      if (this.isOpen !== shouldBeOpen) {
+        // 🎯 SOLUÇÃO OBSERVABLE: Mudança de estado com debounce
+        this.isOpen = shouldBeOpen;
+        this.isOpenChange.emit(this.isOpen);
+
+        // Configura o scroll lock se necessário
+        if (this.isOpen && this.mode === 'overlay') {
+          this.lockBodyScroll();
+        } else if (!this.isOpen) {
+          this.unlockBodyScroll();
+        }
+      }
+    }
+  }
+
+  // 🎯 Método para configurar estado inicial inteligente
+  private setupSmartInitialState(): void {
+    // Verifica se está em mobile usando o breakpoint observer
+    const isMobile = this.breakpointObserver.isMatched(
+      MatchaBreakpointObserver.BREAKPOINTS.MOBILE
+    );
+
+    // Define o estado inicial baseado no dispositivo
+    // Mobile: fechado, Desktop: aberto
+    // Usa setTimeout para evitar o "piscar" visual
+    setTimeout(() => {
+      this.isOpen = !isMobile;
+
+      // Emite o evento para notificar o componente pai
+      this.isOpenChange.emit(this.isOpen);
+
+      // Configura o scroll lock se necessário
+      if (this.isOpen && this.mode === 'overlay') {
+        this.lockBodyScroll();
+      }
+
+      // Força a detecção de mudanças
+      this.cdr.detectChanges();
+    }, 0);
+  }
+
+
+  private setupBodyScrollLock() {
+    if (this.mode === 'overlay' && this.isOpen) {
+      this.lockBodyScroll();
+    }
+  }
+
+  private lockBodyScroll() {
+    if (!this.bodyScrollLocked) {
+      document.body.style.overflow = 'hidden';
+      this.bodyScrollLocked = true;
+    }
+  }
+
+  private unlockBodyScroll() {
+    if (this.bodyScrollLocked) {
+      document.body.style.overflow = '';
+      this.bodyScrollLocked = false;
+    }
+  }
+
+  toggle() {
+    if (this.disableClose && this.isOpen) {
+      return;
+    }
+
+    this.isOpen = !this.isOpen;
+    this.isOpenChange.emit(this.isOpen);
+    this.drawerToggle.emit();
+
+    if (this.isOpen) {
+      this.drawerOpened.emit();
+      if (this.mode === 'overlay') {
+        this.lockBodyScroll();
+      }
+    } else {
+      this.drawerClosed.emit();
+      this.unlockBodyScroll();
+    }
+
+    if (this.isMobile && this.autoCloseOnMobile && this.isOpen) {
+      setTimeout(() => this.close(), 300);
+    }
+  }
+
+  open() {
+    if (!this.isOpen && !this.disableClose) {
+      this.isOpen = true;
+      this.isOpenChange.emit(this.isOpen);
+      this.drawerToggle.emit();
+      this.drawerOpened.emit();
+
+      if (this.mode === 'overlay') {
+        this.lockBodyScroll();
+      }
+    }
+  }
+
+  close() {
+    if (this.isOpen && !this.disableClose) {
+      this.isOpen = false;
+      this.isOpenChange.emit(this.isOpen);
+      this.drawerToggle.emit();
+      this.drawerClosed.emit();
+      this.unlockBodyScroll();
+    }
+  }
+
+  onBackdropClick() {
+    if (this.hasBackdrop && this.mode === 'overlay' && !this.disableClose) {
+      this.close();
+    }
+  }
+
+  onKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape' && this.isOpen && !this.disableClose) {
+      this.close();
+    }
+  }
+
+  getDrawerTransform(): string {
+    // Centralização em telas grandes
+    if (window.innerWidth >= 1920) {
+      return `translateX(calc(50vw - 960px))`;
+    }
+    return 'none';
+  }
+
+  get animationState() {
+    return this.isOpen ? 'open' : 'closed';
+  }
+
+  get isOverlayMode(): boolean {
+    return this.mode === 'overlay';
+  }
+
+  get isPushMode(): boolean {
+    return this.mode === 'push';
+  }
+
+  // Getter para o modo atual (considerando responsividade)
+  get currentMode(): DrawerMode {
+    if (this.responsiveMode) {
+      return this.isMobile ? this.mobileMode : this.desktopMode;
+    }
+    return this.mode;
+  }
+
+  // Getter para saber se está em modo mobile
+  get isMobileView(): boolean {
+    return this.isMobile;
+  }
+
+  // Getter para saber se está em modo responsivo
+  get isResponsiveActive(): boolean {
+    return this.responsiveMode;
+  }
+
+  // 🎯 Getter para saber se o modo automático está ativo
+  get isAutoResponsiveActive(): boolean {
+    return this.autoResponsive;
+  }
+}

package/src/lib/matcha-drawer/drawer-container/drawer-container.component.html

@@ -0,0 +1,3 @@
+<div class="matcha-drawer-container-wrapper">
+    <ng-content></ng-content>
+</div>