matcha-components 20.13.0 → 20.15.0

package/src/lib/matcha-animations/animations.ts

@@ -0,0 +1,406 @@
+import { sequence, trigger, animate, style, group, query, transition, animateChild, state, animation, useAnimation, stagger } from '@angular/animations';
+
+const customAnimation = animation([
+    style({
+        opacity  : '{{opacity}}',
+        transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
+    }),
+    animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
+], {
+    params: {
+        duration: '200ms',
+        delay   : '0ms',
+        opacity : '0',
+        scale   : '1',
+        x       : '0',
+        y       : '0',
+        z       : '0'
+    }
+});
+
+export const createAnimations = [
+
+    trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),
+
+    trigger('animateStagger', [
+        state('50', style('*')),
+        state('100', style('*')),
+        state('200', style('*')),
+
+        transition('void => 50',
+            query('@*',
+                [
+                    stagger('50ms', [
+                        animateChild()
+                    ])
+                ], {optional: true})),
+        transition('void => 100',
+            query('@*',
+                [
+                    stagger('100ms', [
+                        animateChild()
+                    ])
+                ], {optional: true})),
+        transition('void => 200',
+            query('@*',
+                [
+                    stagger('200ms', [
+                        animateChild()
+                    ])
+                ], {optional: true}))
+    ]),
+
+    trigger('fadeInOut', [
+        state('0, void', style({
+            opacity: 0
+        })),
+        state('1, *', style({
+            opacity: 1
+        })),
+        transition('1 => 0', animate('300ms ease-out')),
+        transition('0 => 1', animate('300ms ease-in')),
+        transition('void <=> *', animate('300ms ease-in'))
+    ]),
+
+    trigger('slideInOut', [
+        state('0', style({
+            height: '0px'
+        })),
+        state('1', style({
+            height: '*'
+        })),
+        transition('1 => 0', animate('300ms ease-out')),
+        transition('0 => 1', animate('300ms ease-in'))
+    ]),
+
+    trigger('slideIn', [
+        transition('void => left', [
+                style({
+                    transform: 'translateX(100%)'
+                }),
+                animate('300ms ease-in',
+                    style({
+                        transform: 'translateX(0)'
+                    })
+                )
+            ]
+        ),
+        transition('left => void', [
+                style({
+                    transform: 'translateX(0)'
+                }),
+                animate('300ms ease-in',
+                    style({
+                        transform: 'translateX(-100%)'
+                    })
+                )
+            ]
+        ),
+        transition('void => right', [
+                style({
+                    transform: 'translateX(-100%)'
+                }),
+                animate('300ms ease-in',
+                    style({
+                        transform: 'translateX(0)'
+                    })
+                )
+            ]
+        ),
+        transition('right => void', [
+                style({
+                    transform: 'translateX(0)'
+                }),
+                animate('300ms ease-in',
+                    style({
+                        transform: 'translateX(100%)'
+                    })
+                )
+            ]
+        )
+    ]),
+
+    trigger('slideInLeft', [
+        state('void', style({
+            transform: 'translateX(-100%)',
+        })),
+        state('*', style({
+            transform: 'translateX(0)',
+        })),
+        transition('void => *', animate('300ms')),
+        transition('* => void', animate('300ms'))
+    ]),
+
+    trigger('slideInRight', [
+        state('void', style({
+            transform: 'translateX(100%)',
+        })),
+        state('*', style({
+            transform: 'translateX(0)',
+        })),
+        transition('void => *', animate('300ms')),
+        transition('* => void', animate('300ms'))
+    ]),
+
+    trigger('slideInTop', [
+        state('void', style({
+            transform: 'translateY(-100%)',
+        })),
+        state('*', style({
+            transform: 'translateY(0)',
+        })),
+        transition('void => *', animate('300ms')),
+        transition('* => void', animate('300ms'))
+    ]),
+
+    trigger('slideInBottom', [
+        state('void',
+            style({
+                transform: 'translateY(100%)',
+            })),
+        state('*', style({
+            transform: 'translateY(0)',
+        })),
+        transition('void => *', animate('300ms')),
+        transition('* => void', animate('300ms'))
+    ]),
+
+    trigger('expandCollapse', [
+        state('void', style({
+            height: '0px'
+        })),
+        state('*', style({
+            height: '*'
+        })),
+        transition('void => *', animate('300ms ease-out')),
+        transition('* => void', animate('300ms ease-in'))
+    ]),
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Router animations
+    // -----------------------------------------------------------------------------------------------------
+
+    trigger('routerTransitionLeft', [
+
+        transition('* => *', [
+            query('content > :enter, content > :leave', [
+                style({
+                    position: 'absolute',
+                    top     : 0,
+                    bottom  : 0,
+                    left    : 0,
+                    right   : 0
+                })
+            ], {optional: true}),
+            query('content > :enter', [
+                style({
+                    transform: 'translateX(100%)',
+                    opacity  : 0
+                })
+            ], {optional: true}),
+            sequence([
+                group([
+                    query('content > :leave', [
+                        style({
+                            transform: 'translateX(0)',
+                            opacity  : 1
+                        }),
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                            style({
+                                transform: 'translateX(-100%)',
+                                opacity  : 0
+                            }))
+                    ], {optional: true}),
+                    query('content > :enter', [
+                        style({transform: 'translateX(100%)'}),
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                            style({
+                                transform: 'translateX(0%)',
+                                opacity  : 1
+                            }))
+                    ], {optional: true})
+                ]),
+                query('content > :leave', animateChild(), {optional: true}),
+                query('content > :enter', animateChild(), {optional: true})
+            ])
+        ])
+    ]),
+
+    trigger('routerTransitionRight', [
+
+        transition('* => *', [
+            query('content > :enter, content > :leave', [
+                style({
+                    position: 'absolute',
+                    top     : 0,
+                    bottom  : 0,
+                    left    : 0,
+                    right   : 0
+                })
+            ], {optional: true}),
+            query('content > :enter', [
+                style({
+                    transform: 'translateX(-100%)',
+                    opacity  : 0
+                })
+            ], {optional: true}),
+            sequence([
+                group([
+                    query('content > :leave', [
+                        style({
+                            transform: 'translateX(0)',
+                            opacity  : 1
+                        }),
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                            style({
+                                transform: 'translateX(100%)',
+                                opacity  : 0
+                            }))
+                    ], {optional: true}),
+                    query('content > :enter', [
+                        style({transform: 'translateX(-100%)'}),
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                            style({
+                                transform: 'translateX(0%)',
+                                opacity  : 1
+                            }))
+                    ], {optional: true})
+                ]),
+                query('content > :leave', animateChild(), {optional: true}),
+                query('content > :enter', animateChild(), {optional: true})
+            ])
+        ])
+    ]),
+
+    trigger('routerTransitionUp', [
+
+        transition('* => *', [
+            query('content > :enter, content > :leave', [
+                style({
+                    position: 'absolute',
+                    top     : 0,
+                    bottom  : 0,
+                    left    : 0,
+                    right   : 0
+                })
+            ], {optional: true}),
+            query('content > :enter', [
+                style({
+                    transform: 'translateY(100%)',
+                    opacity  : 0
+                })
+            ], {optional: true}),
+            group([
+                query('content > :leave', [
+                    style({
+                        transform: 'translateY(0)',
+                        opacity  : 1
+                    }),
+                    animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                        style({
+                            transform: 'translateY(-100%)',
+                            opacity  : 0
+                        }))
+                ], {optional: true}),
+                query('content > :enter', [
+                    style({transform: 'translateY(100%)'}),
+                    animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                        style({
+                            transform: 'translateY(0%)',
+                            opacity  : 1
+                        }))
+                ], {optional: true})
+            ]),
+            query('content > :leave', animateChild(), {optional: true}),
+            query('content > :enter', animateChild(), {optional: true})
+        ])
+    ]),
+
+    trigger('routerTransitionDown', [
+
+        transition('* => *', [
+            query('content > :enter, content > :leave', [
+                style({
+                    position: 'absolute',
+                    top     : 0,
+                    bottom  : 0,
+                    left    : 0,
+                    right   : 0
+                })
+            ], {optional: true}),
+            query('content > :enter', [
+                style({
+                    transform: 'translateY(-100%)',
+                    opacity  : 0
+                })
+            ], {optional: true}),
+            sequence([
+                group([
+                    query('content > :leave', [
+                        style({
+                            transform: 'translateY(0)',
+                            opacity  : 1
+                        }),
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                            style({
+                                transform: 'translateY(100%)',
+                                opacity  : 0
+                            }))
+                    ], {optional: true}),
+                    query('content > :enter', [
+                        style({transform: 'translateY(-100%)'}),
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                            style({
+                                transform: 'translateY(0%)',
+                                opacity  : 1
+                            }))
+                    ], {optional: true})
+                ]),
+                query('content > :leave', animateChild(), {optional: true}),
+                query('content > :enter', animateChild(), {optional: true})
+            ])
+        ])
+    ]),
+
+    trigger('routerTransitionFade', [
+
+        transition('* => *', group([
+
+            query('content > :enter, content > :leave ', [
+                style({
+                    position: 'absolute',
+                    top     : 0,
+                    bottom  : 0,
+                    left    : 0,
+                    right   : 0
+                })
+            ], {optional: true}),
+
+            query('content > :enter', [
+                style({
+                    opacity: 0
+                })
+            ], {optional: true}),
+            query('content > :leave', [
+                style({
+                    opacity: 1
+                }),
+                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                    style({
+                        opacity: 0
+                    }))
+            ], {optional: true}),
+            query('content > :enter', [
+                style({
+                    opacity: 0
+                }),
+                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                    style({
+                        opacity: 1
+                    }))
+            ], {optional: true}),
+            query('content > :enter', animateChild(), {optional: true}),
+            query('content > :leave', animateChild(), {optional: true})
+        ]))
+    ])
+];

package/src/lib/matcha-autocomplete/README.md

@@ -0,0 +1,185 @@
+# Matcha Autocomplete & Option
+
+Sistema de autocomplete customizado para Angular com componente de opção **genérico e reutilizável**. Funciona com Reactive Forms e Template Driven Forms.
+
+## Arquitetura
+
+A solução é composta por 3 peças principais:
+
+### 1. 🎯 `matcha-option` - Componente genérico
+Componente simples que expõe `value`, `disabled`, `selected` e informa o pai quando clicado. Pode ser reutilizado em outros contextos como `matcha-select`.
+
+### 2. 🎯 `matcha-autocomplete` - Container das opções
+Projeta `matcha-option` via `@ContentChildren`. Mantém a lista, navegação por teclado, marca a opção ativa e expõe métodos para a diretiva trigger.
+
+### 3. 🎯 `matchaAutocomplete` - Diretiva trigger
+Liga o input ao painel de autocomplete. Implementa navegação por teclado, escreve valores no input e sincroniza com Angular Forms.
+
+### 4. 🎯 `MatchaOptionParent` - Interface genérica
+Interface que permite que `matcha-option` funcione com qualquer componente pai, tornando-o verdadeiramente genérico e reutilizável.
+
+## Como usar
+
+### Reactive Forms
+```html
+<form [formGroup]="formulario">
+  <matcha-form-field class="my-16">
+    <matcha-label>Autocomplete</matcha-label>
+    <input
+      type="text"
+      formControlName="name"
+      [matchaAutocomplete]="auto"
+    >
+    <matcha-autocomplete #auto>
+      <matcha-option
+        *ngFor="let option of filteredOptions | async"
+        [value]="option"
+      >
+        {{ option }}
+      </matcha-option>
+    </matcha-autocomplete>
+  </matcha-form-field>
+</form>
+```
+
+### Template Driven Forms
+```html
+<matcha-form-field>
+  <matcha-label>Autocomplete</matcha-label>
+  <input
+    type="text"
+    [(ngModel)]="model"
+    [matchaAutocomplete]="auto"
+  >
+  <matcha-autocomplete #auto>
+    <matcha-option
+      *ngFor="let option of options"
+      [value]="option"
+    >
+      {{ option }}
+    </matcha-option>
+  </matcha-autocomplete>
+</matcha-form-field>
+```
+
+## Funcionalidades
+
+✅ **Navegação por teclado**: Setas ↑↓, Enter, Escape
+✅ **Clique nas opções**: Seleção direta por mouse
+✅ **Reactive Forms**: Funciona com `formControlName`
+✅ **Template Driven**: Funciona com `[(ngModel)]`
+✅ **Opções desabilitadas**: Suporte a `[disabled]`
+✅ **Posicionamento automático**: Painel posicionado abaixo do input
+✅ **Fechamento inteligente**: Fecha ao clicar fora ou pressionar Escape
+✅ **Filtro personalizado**: Controle total sobre as opções exibidas
+
+## Comunicação entre componentes
+
+1. **`matcha-option`** → notifica `matcha-autocomplete` chamando `parent.selectOption(this)` ao clicar
+2. **`matcha-autocomplete`** → mantém estado (open/close, active index, selected), expõe `getSelectedValue()` e `attachTo(input)`
+3. **`matchaAutocomplete directive`** → conecta input ao painel: chama `attachTo`, abre/fecha painel, escuta teclado, e escreve valor selecionado no input (disparando evento `input`) para que Angular Forms atualize o modelo
+
+## Por que funciona com ambos os tipos de Forms?
+
+O input HTML é o verdadeiro controle que o Angular Forms observa. A diretiva escreve o valor diretamente em `input.value` e dispara um evento `input` programaticamente. Tanto `ngModel` quanto `FormControl` escutam esse evento para sincronizar o modelo.
+
+## API
+
+### MatchaOptionComponent
+- `@Input() value: any` - Valor da opção
+- `@Input() disabled: boolean` - Se a opção está desabilitada
+- `selected: boolean` - Se a opção está selecionada (controlado pelo pai)
+
+### MatchaAutocompleteComponent
+- `open: boolean` - Se o painel está aberto
+- `openPanel()` - Abre o painel
+- `closePanel()` - Fecha o painel
+- `highlightNext()` - Destaca próxima opção
+- `highlightPrevious()` - Destaca opção anterior
+- `selectActive()` - Seleciona opção ativa
+- `getSelectedValue()` - Retorna valor da opção selecionada
+
+### MatchaAutocompleteTriggerDirective
+- `@Input('matchaAutocomplete') panel` - Referência ao painel de autocomplete
+
+## 🎯 Uso Genérico do matcha-option
+
+O `matcha-option` agora é **verdadeiramente genérico** e pode ser usado em diferentes contextos:
+
+### 1. **Uso Standalone** (com eventos)
+```html
+<matcha-option
+  [value]="'action1'"
+  (optionClick)="onItemClick($event)"
+  (optionSelect)="onItemSelect($event)">
+  📁 Abrir arquivo
+</matcha-option>
+```
+
+### 2. **Em componentes customizados**
+```typescript
+// Seu componente personalizado
+@Component({
+  selector: 'my-custom-select',
+  providers: [
+    { provide: MATCHA_OPTION_PARENT, useExisting: MyCustomSelectComponent }
+  ]
+})
+export class MyCustomSelectComponent implements MatchaOptionParent {
+  selectOption(option: MatchaOptionComponent) {
+    // Sua lógica personalizada
+    console.log('Selected:', option.value);
+  }
+}
+```
+
+```html
+<my-custom-select>
+  <matcha-option [value]="1">Opção 1</matcha-option>
+  <matcha-option [value]="2">Opção 2</matcha-option>
+</my-custom-select>
+```
+
+### 3. **Casos de uso práticos**
+- 📋 **Listas de seleção** simples
+- 🍔 **Menus de contexto**
+- 🎛️ **Toolbars** com ações
+- 🎨 **Color pickers**
+- 📊 **Data grids** com opções
+
+## 🔌 Implementando MatchaOptionParent
+
+Para criar um componente que usa `matcha-option`:
+
+1. **Implemente a interface**:
+```typescript
+export class MyComponent implements MatchaOptionParent {
+  selectOption(option: MatchaOptionComponent) {
+    // Lógica quando opção é selecionada
+  }
+}
+```
+
+2. **Configure o provider**:
+```typescript
+@Component({
+  providers: [
+    { provide: MATCHA_OPTION_PARENT, useExisting: MyComponent }
+  ]
+})
+```
+
+3. **Use @ContentChildren** (opcional):
+```typescript
+@ContentChildren(MatchaOptionComponent)
+options!: QueryList<MatchaOptionComponent>;
+```
+
+## ✅ Vantagens
+
+- **🔄 Reutilizável**: Um componente para todos os contextos
+- **🎯 Flexível**: Funciona com ou sem componente pai
+- **🔒 Type-safe**: Interface garante contrato correto
+- **♿ Acessível**: ARIA e navegação por teclado completa
+- **📦 Standalone**: Eventos para uso independente
+

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

@@ -0,0 +1,13 @@
+<matcha-panel
+    #panel
+    [open]="open"
+    [placement]="placement"
+    [maxHeight]="maxHeight"
+    [minWidth]="minWidth"
+    [triggerElement]="triggerElement"
+    (opened)="opened.emit()"
+    (closed)="closed.emit()">
+    <div class="matcha-panel-content flex-column">
+        <ng-content></ng-content>
+    </div>
+</matcha-panel>