matcha-components 20.15.0 → 20.16.0

package/package.json

@@ -1,7 +1,20 @@
 {
-    "name": "matcha-components",
-    "version": "20.15.0",
-    "peerDependencies": {},
-    "dependencies": {},
-    "sideEffects": false
-}
+  "name": "matcha-components",
+  "version": "20.16.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"
+    }
+  }
+}

package/index.ts

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

package/ng-package.json

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

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

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

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