matcha-components 20.15.0 → 20.16.0

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

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

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

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