matcha-components 20.15.0 → 20.16.0

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

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

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

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

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

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

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

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

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