matcha-components 20.12.0 → 20.15.0

package/index.ts

@@ -0,0 +1 @@
+export * from './src/public-api';

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/matcha-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,20 +1,7 @@
 {
-  "name": "matcha-components",
-  "version": "20.12.0",
-  "peerDependencies": {},
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/matcha-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/matcha-components.mjs"
-    }
-  }
-}
+    "name": "matcha-components",
+    "version": "20.15.0",
+    "peerDependencies": {},
+    "dependencies": {},
+    "sideEffects": false
+}

package/src/documentation/components/matcha-drawer.mdx

@@ -0,0 +1,469 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs';
+import { MatchaDrawerComponent } from '../../lib/matcha-drawer/drawer/drawer.component';
+
+<Meta title="Components/MatchaDrawer" component={MatchaDrawerComponent} />
+
+# MatchaDrawer
+
+O **MatchaDrawer** é um componente de navegação lateral que oferece uma experiência de usuário moderna e responsiva. Ele suporta dois modos principais: **push** e **overlay**, com configurações avançadas de responsividade.
+
+## Características
+
+- ✅ **Modos Push e Overlay**: Adapta-se ao comportamento desejado
+- ✅ **Responsividade Inteligente**: Configuração automática para mobile/desktop
+- ✅ **🎯 Comportamento Automático**: Mobile fechado, Desktop aberto por padrão
+- ✅ **Breakpoint Configurável**: Controle total sobre quando aplicar cada modo
+- ✅ **Breakpoint Observer Próprio**: Sem dependências externas (Angular puro)
+- ✅ **Animações Suaves**: Transições fluidas entre estados
+- ✅ **Acessibilidade**: Suporte completo a navegação por teclado
+- ✅ **Backdrop Opcional**: Controle sobre o fundo escuro
+- ✅ **Posicionamento Flexível**: Esquerda ou direita
+
+## Uso Básico
+
+```html
+<matcha-drawer-container>
+  <matcha-drawer
+    [isOpen]="true"
+    mode="push"
+    position="left"
+    width="320px">
+
+    <!-- Header do drawer -->
+    <div drawer-header>
+      <h2>Menu</h2>
+    </div>
+
+    <!-- Conteúdo do drawer -->
+    <div drawer-content>
+      <nav>
+        <a href="/home">Home</a>
+        <a href="/about">Sobre</a>
+        <a href="/contact">Contato</a>
+      </nav>
+    </div>
+
+    <!-- Footer do drawer -->
+    <div drawer-footer>
+      <button>Configurações</button>
+    </div>
+  </matcha-drawer>
+
+  <matcha-drawer-content>
+    <h1>Conteúdo Principal</h1>
+    <p>Este é o conteúdo que será empurrado ou sobreposto pelo drawer.</p>
+  </matcha-drawer-content>
+</matcha-drawer-container>
+```
+
+## Modos de Funcionamento
+
+### Modo Push
+No modo **push**, o drawer empurra o conteúdo principal para o lado, mantendo ambos visíveis simultaneamente.
+
+```html
+<matcha-drawer
+  [isOpen]="true"
+  mode="push"
+  width="300px">
+  <!-- Conteúdo do drawer -->
+</matcha-drawer>
+```
+
+### Modo Overlay
+No modo **overlay**, o drawer aparece sobre o conteúdo principal, criando um efeito de sobreposição.
+
+```html
+<matcha-drawer
+  [isOpen]="true"
+  mode="overlay"
+  [hasBackdrop]="true">
+  <!-- Conteúdo do drawer -->
+</matcha-drawer>
+```
+
+## Responsividade Inteligente
+
+O MatchaDrawer oferece configurações avançadas de responsividade que permitem diferentes comportamentos para mobile e desktop.
+
+## 🎯 Comportamento Automático Inteligente
+
+**Nova funcionalidade!** O MatchaDrawer agora possui um comportamento automático inteligente que define o estado inicial baseado no dispositivo:
+
+- **Mobile**: Drawer inicia **fechado** (otimizado para telas pequenas)
+- **Desktop**: Drawer inicia **aberto** (melhor experiência em telas grandes)
+
+### 🎯 Comportamento Dinâmico Durante Resize
+
+**Funcionalidade avançada!** O drawer agora responde dinamicamente às mudanças de tamanho da tela:
+
+- **Desktop → Mobile**: Drawer **fecha automaticamente** quando redimensiona para mobile
+- **Mobile → Desktop**: Drawer **abre automaticamente** quando redimensiona para desktop
+- **Só funciona** quando mobile = overlay e desktop = push (configuração padrão)
+
+### Exemplo Prático do Comportamento Dinâmico
+
+```html
+<!-- Configuração padrão (recomendada) -->
+<matcha-drawer [width]="320px">
+  <!-- Conteúdo do drawer -->
+</matcha-drawer>
+```
+
+**Comportamento:**
+1. **Carregamento**: Desktop aberto, Mobile fechado
+2. **Resize Desktop → Mobile**: Drawer fecha automaticamente
+3. **Resize Mobile → Desktop**: Drawer abre automaticamente
+4. **Modo Push**: Desktop empurra conteúdo
+5. **Modo Overlay**: Mobile sobrepõe conteúdo
+
+### Uso Simples (Recomendado)
+
+```html
+<!-- Funciona perfeitamente sem configuração! -->
+<matcha-drawer>
+  <!-- Conteúdo do drawer -->
+</matcha-drawer>
+```
+
+**Resultado**: Mobile fechado, Desktop aberto ✅
+
+### Desabilitando o Comportamento Automático
+
+```html
+<!-- Para casos especiais onde você quer controle total -->
+<matcha-drawer [autoResponsive]="false" [isOpen]="true">
+  <!-- Sempre aberto -->
+</matcha-drawer>
+
+<matcha-drawer [autoResponsive]="false" [isOpen]="false">
+  <!-- Sempre fechado -->
+</matcha-drawer>
+```
+
+### Vantagens do Comportamento Automático
+
+- ✅ **Zero Configuração**: Funciona bem por padrão
+- ✅ **UX Otimizada**: Comportamento ideal para cada dispositivo
+- ✅ **API Limpa**: Menos propriedades para gerenciar
+- ✅ **Flexibilidade**: Pode ser desabilitado quando necessário
+- ✅ **Performance Otimizada**: Evita "piscar" visual durante inicialização
+- ✅ **Comportamento Dinâmico**: Responde automaticamente ao resize da tela
+- ✅ **Inteligente**: Só aplica lógica quando mobile=overlay e desktop=push
+
+### Configuração Básica de Responsividade
+
+```html
+<matcha-drawer
+  [isOpen]="isDrawerOpen"
+  [responsiveMode]="true"
+  [mobileMode]="'overlay'"
+  [desktopMode]="'push'"
+  [mobileBreakpoint]="768">
+  <!-- Conteúdo do drawer -->
+</matcha-drawer>
+```
+
+### Configuração Avançada
+
+```typescript
+export class MyComponent {
+  public drawerConfig = {
+    responsiveMode: true,
+    mobileMode: 'overlay' as 'push' | 'overlay',
+    desktopMode: 'push' as 'push' | 'overlay',
+    mobileBreakpoint: 768,
+    width: '320px'
+  };
+
+  public updateMobileBreakpoint(breakpoint: number): void {
+    this.drawerConfig.mobileBreakpoint = breakpoint;
+  }
+
+  public setMobileMode(mode: 'push' | 'overlay'): void {
+    this.drawerConfig.mobileMode = mode;
+  }
+
+  public setDesktopMode(mode: 'push' | 'overlay'): void {
+    this.drawerConfig.desktopMode = mode;
+  }
+}
+```
+
+```html
+<matcha-drawer
+  [isOpen]="isDrawerOpen"
+  [responsiveMode]="drawerConfig.responsiveMode"
+  [mobileMode]="drawerConfig.mobileMode"
+  [desktopMode]="drawerConfig.desktopMode"
+  [mobileBreakpoint]="drawerConfig.mobileBreakpoint"
+  [width]="drawerConfig.width">
+  <!-- Conteúdo do drawer -->
+</matcha-drawer>
+```
+
+## Exemplo Interativo
+
+Aqui está um exemplo completo com controles interativos:
+
+```html
+<matcha-drawer-container>
+  <matcha-drawer
+    #drawer
+    [isOpen]="isDrawerOpen"
+    [mode]="drawerMode"
+    [responsiveMode]="drawerConfig.responsiveMode"
+    [mobileMode]="drawerConfig.mobileMode"
+    [desktopMode]="drawerConfig.desktopMode"
+    [mobileBreakpoint]="drawerConfig.mobileBreakpoint"
+    position="left"
+    [width]="drawerConfig.width"
+    [hasBackdrop]="true"
+    [hasFooter]="true">
+
+    <!-- Header -->
+    <div drawer-header>
+      <h2>Menu de Navegação</h2>
+    </div>
+
+    <!-- Conteúdo -->
+    <div drawer-content>
+      <nav class="flex-column gap-8">
+        <a href="/home" class="nav-item">🏠 Home</a>
+        <a href="/products" class="nav-item">📦 Produtos</a>
+        <a href="/about" class="nav-item">ℹ️ Sobre</a>
+        <a href="/contact" class="nav-item">📞 Contato</a>
+      </nav>
+    </div>
+
+    <!-- Footer com controles -->
+    <div drawer-footer class="flex-column gap-8">
+      <div class="flex-column gap-4">
+        <label>Breakpoint Mobile:</label>
+        <input type="range"
+               min="480"
+               max="1200"
+               [value]="drawerConfig.mobileBreakpoint"
+               (input)="updateMobileBreakpoint(+$event.target.value)">
+        <span>{{ drawerConfig.mobileBreakpoint }}px</span>
+      </div>
+
+      <div class="flex gap-4">
+        <button (click)="setMobileMode('push')">Mobile: Push</button>
+        <button (click)="setMobileMode('overlay')">Mobile: Overlay</button>
+      </div>
+
+      <div class="flex gap-4">
+        <button (click)="setDesktopMode('push')">Desktop: Push</button>
+        <button (click)="setDesktopMode('overlay')">Desktop: Overlay</button>
+      </div>
+
+      <button (click)="resetToResponsiveMode()">
+        Modo Responsivo
+      </button>
+    </div>
+  </matcha-drawer>
+
+  <matcha-drawer-content>
+    <header>
+      <button (click)="toggleDrawer()">☰ Menu</button>
+    </header>
+
+    <main>
+      <h1>Conteúdo Principal</h1>
+      <p>Redimensione a janela para ver o comportamento responsivo do drawer!</p>
+    </main>
+  </matcha-drawer-content>
+</matcha-drawer-container>
+```
+
+## API Reference
+
+### Inputs
+
+| Propriedade | Tipo | Padrão | Descrição |
+|-------------|------|--------|-----------|
+| `isOpen` | `boolean` | `false` | Controla se o drawer está aberto |
+| `mode` | `'push' \| 'overlay'` | `'push'` | Modo de funcionamento do drawer |
+| `position` | `'left' \| 'right'` | `'left'` | Posição do drawer na tela |
+| `width` | `string` | `'300px'` | Largura do drawer |
+| `hasBackdrop` | `boolean` | `true` | Exibe fundo escuro no modo overlay |
+| `disableClose` | `boolean` | `false` | Impede o fechamento do drawer |
+| `autoCloseOnMobile` | `boolean` | `true` | Fecha automaticamente em mobile |
+| `breakpoint` | `number` | `1024` | Breakpoint para detecção de mobile |
+| `elevation` | `number` | `8` | Elevação do drawer |
+| `hasFooter` | `boolean` | `false` | Exibe área de footer |
+| `responsiveMode` | `boolean` | `true` | Ativa modo responsivo |
+| `mobileMode` | `'push' \| 'overlay'` | `'overlay'` | Modo para dispositivos móveis |
+| `desktopMode` | `'push' \| 'overlay'` | `'push'` | Modo para desktop |
+| `mobileBreakpoint` | `number` | `768` | Breakpoint para detecção de mobile |
+| `autoResponsive` | `boolean` | `true` | 🎯 **NOVO**: Comportamento inteligente automático (mobile fechado, desktop aberto) |
+
+### Outputs
+
+| Evento | Tipo | Descrição |
+|--------|------|-----------|
+| `isOpenChange` | `EventEmitter<boolean>` | Emitido quando o estado de abertura muda |
+| `drawerToggle` | `EventEmitter<void>` | Emitido quando o drawer é alternado |
+| `drawerOpened` | `EventEmitter<void>` | Emitido quando o drawer é aberto |
+| `drawerClosed` | `EventEmitter<void>` | Emitido quando o drawer é fechado |
+
+### Métodos
+
+| Método | Descrição |
+|--------|-----------|
+| `toggle()` | Alterna o estado do drawer |
+| `open()` | Abre o drawer |
+| `close()` | Fecha o drawer |
+
+### Getters
+
+| Getter | Tipo | Descrição |
+|--------|------|-----------|
+| `currentMode` | `DrawerMode` | Retorna o modo atual (considerando responsividade) |
+| `isMobileView` | `boolean` | Indica se está em visualização mobile |
+| `isResponsiveActive` | `boolean` | Indica se o modo responsivo está ativo |
+| `isAutoResponsiveActive` | `boolean` | 🎯 **NOVO**: Indica se o comportamento automático está ativo |
+
+## Casos de Uso
+
+### 1. Menu de Navegação Principal
+```html
+<matcha-drawer
+  [isOpen]="isMenuOpen"
+  mode="push"
+  width="280px"
+  [responsiveMode]="true"
+  [mobileMode]="'overlay'"
+  [desktopMode]="'push'">
+  <!-- Menu de navegação -->
+</matcha-drawer>
+```
+
+### 2. Painel de Configurações
+```html
+<matcha-drawer
+  [isOpen]="isSettingsOpen"
+  mode="overlay"
+  position="right"
+  width="400px"
+  [hasBackdrop]="true">
+  <!-- Painel de configurações -->
+</matcha-drawer>
+```
+
+### 3. Filtros de Busca
+```html
+<matcha-drawer
+  [isOpen]="isFiltersOpen"
+  mode="overlay"
+  width="350px"
+  [autoCloseOnMobile]="true">
+  <!-- Filtros de busca -->
+</matcha-drawer>
+```
+
+## Dicas de UX
+
+1. **🎯 Comportamento Automático**: Use `autoResponsive="true"` (padrão) para UX otimizada
+2. **Mobile First**: Use overlay no mobile para economizar espaço
+3. **Desktop Comfort**: Use push no desktop para manter contexto
+4. **Breakpoint Inteligente**: Configure breakpoints baseados no seu público
+5. **Feedback Visual**: Use animações suaves para transições
+6. **Acessibilidade**: Sempre forneça alternativas de teclado
+
+## Breakpoint Observer Próprio
+
+O MatchaDrawer utiliza um **BreakpointObserver próprio** desenvolvido especificamente para nossa lib, garantindo:
+
+- ✅ **Zero Dependências Externas**: Angular puro, sem Angular CDK
+- ✅ **Performance Otimizada**: Debounce automático para eventos de resize
+- ✅ **API Familiar**: Interface similar ao Angular CDK
+- ✅ **Flexibilidade Total**: Suporte a qualquer breakpoint CSS
+
+### Uso do BreakpointObserver
+
+```typescript
+import { MatchaBreakpointObserver, MatchaBreakpointObservableModule } from '@matcha-components';
+
+export class MyComponent {
+  constructor(private breakpointObserver: MatchaBreakpointObserver) {}
+
+  ngOnInit() {
+    // Observa um breakpoint específico
+    this.breakpointObserver.observe('(max-width: 768px)')
+      .subscribe(result => {
+        console.log('Mobile:', result.matches);
+      });
+
+    // Observa múltiplos breakpoints
+    this.breakpointObserver.observeMultiple([
+      '(max-width: 768px)',
+      '(min-width: 1024px)'
+    ]).subscribe(breakpoints => {
+      console.log('Mobile:', breakpoints.get('(max-width: 768px)'));
+      console.log('Desktop:', breakpoints.get('(min-width: 1024px)'));
+    });
+
+    // Verifica estado atual
+    const isMobile = this.breakpointObserver.isMatched('(max-width: 768px)');
+
+    // Obtém estado completo
+    const state = this.breakpointObserver.getState('(max-width: 768px)');
+
+    // Usa breakpoints pré-definidos
+    const isMobilePredefined = this.breakpointObserver.isMatched(
+      MatchaBreakpointObserver.BREAKPOINTS.MOBILE
+    );
+  }
+}
+```
+
+### Breakpoints Suportados
+
+- `(max-width: 768px)` - Largura máxima
+- `(min-width: 1024px)` - Largura mínima
+- `(max-height: 600px)` - Altura máxima
+- `(min-height: 800px)` - Altura mínima
+
+### Breakpoints Pré-definidos
+
+```typescript
+MatchaBreakpointObserver.BREAKPOINTS = {
+  XS: '(max-width: 480px)',           // Extra Small
+  SM: '(max-width: 768px)',           // Small
+  MD: '(max-width: 1024px)',          // Medium
+  LG: '(max-width: 1200px)',          // Large
+  XL: '(max-width: 1440px)',          // Extra Large
+  MOBILE: '(max-width: 768px)',       // Mobile
+  TABLET: '(min-width: 769px) and (max-width: 1024px)', // Tablet
+  DESKTOP: '(min-width: 1025px)'      // Desktop
+}
+```
+
+### Características Avançadas
+
+- ✅ **Singleton**: Uma única instância em toda a aplicação
+- ✅ **SSR Compatible**: Funciona no servidor e no cliente
+- ✅ **Cache Inteligente**: Evita recálculos desnecessários
+- ✅ **Múltiplos Breakpoints**: Observe vários breakpoints simultaneamente
+- ✅ **Performance**: Debounce automático e otimizações
+
+## Troubleshooting
+
+### O drawer não responde ao breakpoint
+- Verifique se `responsiveMode` está definido como `true`
+- Confirme se `mobileBreakpoint` está configurado corretamente
+- O `MatchaBreakpointObserver` é injetado automaticamente
+
+### Animações não funcionam
+- Verifique se as animações estão importadas no módulo
+- Confirme se o `BrowserAnimationsModule` está configurado
+
+### Problemas de z-index
+- Ajuste a propriedade `elevation` se necessário
+- Verifique se não há conflitos de CSS
+
+### Breakpoint não detecta mudanças
+- O observer usa debounce de 100ms para otimizar performance
+- Verifique se o breakpoint está no formato correto: `(max-width: 768px)`

package/src/documentation/foundation/borders/border-radius.mdx

@@ -0,0 +1,145 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Foundation / Border / Border Radius" />
+
+# Border Radius
+
+Os tamanhos para as classes de border-radius vão de **0** à **24** e **full** que é 999px.
+
+Todas essas classes possuem **opções** de infix de breakpoint(`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
+
+Anatomia da classe: `.radius-#{$direction}#{$infix}#{$radius-value}#{$has-important}` => `.radius-top-md-16--force`.
+
+### Exemplo
+<div class="matcha-card background-surface flex-column gap-16">
+    <div class="matcha-card background-bg grid-2 gap-16 grid-sm-3 flex-md-space-between">
+        <div class="accent radius-8 flex-center-center h-124 w-124 text-center font-size-14">radius-8</div>
+        <div class="accent radius-top-8 flex-center-center h-124 w-124 text-center font-size-14">radius-top-8</div>
+        <div class="accent radius-right-8 flex-center-center h-124 w-124 text-center font-size-14">radius-right-8</div>
+        <div class="accent radius-bottom-8 flex-center-center h-124 w-124 text-center font-size-14">radius-bottom-8</div>
+        <div class="accent radius-left-8 flex-center-center h-124 w-124 text-center font-size-14">radius-left-8</div>
+    </div>
+
+    <div>
+        ```html
+        <div class="radius-8">radius: 8px</div>
+        <div class="radius-top-8">radius: 8px 8px 0 0</div>
+        <div class="radius-right-8">radius: 0 8px 8px 0</div>
+        <div class="radius-bottom-8">radius: 0 0 8px 8px</div>
+        <div class="radius-left-8">radius: 8px 0 0 8px</div>
+        ```
+    </div>
+
+    <div class="matcha-card background-bg flex-center-center py-16">
+        <div class="h-200 w-200 radius-full accent flex-center-center text-center">radius-full</div>
+    </div>
+
+    <div>
+        ```html
+        <div class="radius-full">border-radius: 999px</div>
+        ```
+    </div>
+</div>
+
+### Atributos
+<div class="h-400 w-100-p overflow-y-scroll">
+    <table class="w-100-p">
+        <thead>
+            <tr>
+                <th>Classe</th>
+                <th>Propriedade</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>radius-0</td>
+                <td>radius: 0;</td>
+            </tr>
+            <tr>
+                <td>radius-top-0</td>
+                <td>radius: 0;</td>
+            </tr>
+            <tr>
+                <td>radius-right-0</td>
+                <td>radius: 0;</td>
+            </tr>
+            <tr>
+                <td>radius-bottom-0</td>
+                <td>radius: 0;</td>
+            </tr>
+            <tr>
+                <td>radius-left-0</td>
+                <td>radius: 0;</td>
+            </tr>
+            {Array.from({ length: 8 }, (_, index) => {
+                const borderValue = index + 1;
+                return (
+                <>
+                    <tr>
+                        <td>{`radius-${borderValue}`}</td>
+                        <td>{`radius: ${borderValue}px;`}</td>
+                    </tr>
+                    <tr>
+                        <td>{`radius-top-${borderValue}`}</td>
+                        <td>{`radius: ${borderValue}px ${borderValue}px 0 0;`}</td>
+                    </tr>
+                    <tr>
+                        <td>{`radius-right-${borderValue}`}</td>
+                        <td>{`radius: 0 ${borderValue}px ${borderValue}px 0;`}</td>
+                    </tr>
+                    <tr>
+                        <td>{`radius-bottom-${borderValue}`}</td>
+                        <td>{`radius: 0 0 ${borderValue}px ${borderValue}px;`}</td>
+                    </tr>
+                    <tr>
+                        <td>{`radius-left-${borderValue}`}</td>
+                        <td>{`radius: ${borderValue}px 0 0 ${borderValue}px;`}</td>
+                    </tr>
+                </>
+            );
+        })}
+        </tbody>
+    </table>
+</div>
+
+
+### Instalação
+Para utilizar as classes de _Border Radius_, você pode fazer de duas formas:
+
+Primeira opção, você pode importar o pacote matcha-core no seu projeto.
+
+1. Instale o pacote [matcha-core](https://www.npmjs.com/package/matcha-core) via npm ou yarn.
+
+`npm install matcha-core`
+
+2. Importe o pacote no seu estilo global, diretamente no seu angular.json ou no head do seu index.html.
+
+<div class="matcha-card background-surface flex-column gap-16">
+    <span class="h6">Importação via estilo global:</span>
+    <div class="flex-column">
+        ```css
+        @import 'node_modules/matcha-core/matcha-core.min.css';
+        ```
+    </div>
+
+    <span class="h6">Importação via angular.json:</span>
+    <div class="flex-column">
+        ```js
+        "styles": [
+            "node_modules/matcha-core/matcha-core.min.css"
+        ]
+        ```
+    </div>
+</div>
+
+
+Segunda opção, você pode importar o pacote diretamente no seu HTML.
+
+<div class="matcha-card background-surface flex-column gap-16">
+    <span class="h6">Importação na tag header do HTML</span>
+    <div class="flex-column">
+        ```html
+        <link rel="stylesheet" href="https://unpkg.com/matcha-core@latest/matcha-core.min.css">
+        ```
+    </div>
+</div>