matcha-components 20.12.0 → 20.15.0

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

@@ -0,0 +1,238 @@
+import {
+  Component, ContentChildren, QueryList, ElementRef,
+  AfterContentInit, Renderer2, ViewEncapsulation, ChangeDetectorRef,
+  Input, Output, EventEmitter, ViewChild, AfterViewInit
+} from '@angular/core';
+import { MatchaOptionComponent } from '../matcha-option/matcha-option.component';
+import { MatchaOptionParent } from '../matcha-option/matcha-option-parent.interface';
+import { MatchaPanelComponent } from '../matcha-panel/matcha-panel.component';
+
+@Component({
+  selector: 'matcha-autocomplete',
+  templateUrl: './matcha-autocomplete.component.html',
+  encapsulation: ViewEncapsulation.None,
+  standalone: false,
+})
+export class MatchaAutocompleteComponent implements AfterContentInit, AfterViewInit, MatchaOptionParent {
+  @ContentChildren(MatchaOptionComponent, { descendants: true }) options!: QueryList<MatchaOptionComponent>;
+  @ViewChild(MatchaPanelComponent) panel!: MatchaPanelComponent;
+
+  // Armazenar o valor selecionado independente da QueryList
+  private selectedValue: any = undefined;
+
+  // Configurações do painel
+  @Input() placement: 'bottom' | 'top' | 'auto' = 'auto';
+  @Input() maxHeight = 280;
+  @Input() minWidth = 160;
+
+  @Output() opened = new EventEmitter<void>();
+  @Output() closed = new EventEmitter<void>();
+
+  open = false;
+  triggerElement?: HTMLElement;
+  private activeIndex = -1;
+
+  constructor(
+    public elRef: ElementRef,
+    private renderer: Renderer2,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngAfterContentInit() {
+    // quando options mudarem, resetamos estado relevante
+    this.options.changes.subscribe(() => {
+      if (this.open) {
+        this.resetActive();
+        this.cdr.detectChanges();
+      }
+    });
+  }
+
+  ngAfterViewInit() {
+    // Aguarda a view ser inicializada
+    this.cdr.detectChanges();
+
+    // Escuta eventos customizados das opções
+    this.elRef.nativeElement.addEventListener('matcha-option-selected', (event: any) => {
+      console.log('MatchaAutocomplete: Evento matcha-option-selected recebido', event.detail);
+      const { option, value } = event.detail;
+      this.selectOption(option);
+    });
+
+    // Escuta evento para fechar este painel quando outro for aberto
+    this.elRef.nativeElement.addEventListener('matcha-autocomplete-close', () => {
+      if (this.open) {
+        console.log('MatchaAutocomplete: Fechando painel por evento de outro autocomplete');
+        this.closePanel();
+      }
+    });
+  }
+
+  attachTo(input: HTMLElement) {
+    this.triggerElement = input;
+  }
+
+  private closeOtherPanels() {
+    // Buscar todos os outros autocompletes na página e fechá-los
+    const allAutocompletes = document.querySelectorAll('matcha-autocomplete');
+    allAutocompletes.forEach(autocompleteEl => {
+      if (autocompleteEl !== this.elRef.nativeElement) {
+        // Disparar evento para fechar outros painéis
+        const closeEvent = new CustomEvent('matcha-autocomplete-close', {
+          bubbles: true
+        });
+        autocompleteEl.dispatchEvent(closeEvent);
+      }
+    });
+  }
+
+  private notifyDirectiveOfSelection(value: any) {
+    // Disparar evento customizado para notificar a diretiva sobre a seleção
+    const selectionEvent = new CustomEvent('matcha-autocomplete-selection', {
+      detail: { value },
+      bubbles: true
+    });
+    this.elRef.nativeElement.dispatchEvent(selectionEvent);
+    console.log('MatchaAutocomplete: Evento de seleção disparado', { value });
+  }
+
+  openPanel() {
+    if (!this.triggerElement) {
+      console.log('MatchaAutocomplete: triggerElement não encontrado');
+      return;
+    }
+
+    console.log('MatchaAutocomplete: Abrindo painel', {
+      triggerElement: this.triggerElement,
+      panel: this.panel,
+      open: this.open
+    });
+
+    // Fechar outros painéis abertos antes de abrir este
+    this.closeOtherPanels();
+
+    this.open = true;
+    this.cdr.detectChanges(); // Força detecção de mudanças
+
+    this.panel.attachTo(this.triggerElement);
+    this.panel.openPanel();
+    this.resetActive();
+    this.opened.emit();
+  }
+
+  closePanel() {
+    console.log('MatchaAutocomplete: Fechando painel', {
+      open: this.open,
+      stackTrace: new Error().stack
+    });
+    this.open = false;
+    this.activeIndex = -1;
+    this.updateSelectedStates();
+    this.panel.closePanel();
+    this.closed.emit();
+  }
+
+  togglePanel() {
+    this.open ? this.closePanel() : this.openPanel();
+  }
+
+
+  resetActive() {
+    this.activeIndex = -1;
+    this.updateSelectedStates();
+  }
+
+  private updateSelectedStates() {
+    const items = this.options.toArray();
+    items.forEach((opt, i) => opt.selected = i === this.activeIndex);
+  }
+
+  highlightNext() {
+    const length = this.options.length;
+    if (!length) return;
+    this.activeIndex = (this.activeIndex + 1) % length;
+    this.updateSelectedStates();
+    this.scrollToActive();
+  }
+
+  highlightPrevious() {
+    const length = this.options.length;
+    if (!length) return;
+    this.activeIndex = (this.activeIndex - 1 + length) % length;
+    this.updateSelectedStates();
+    this.scrollToActive();
+  }
+
+  private scrollToActive() {
+    const opts = this.options.toArray();
+    if (this.activeIndex < 0 || this.activeIndex >= opts.length) return;
+    const host = opts[this.activeIndex].nativeElement;
+    if (host && host.scrollIntoView) {
+      host.scrollIntoView({ block: 'nearest' });
+    }
+  }
+
+  selectActive() {
+    if (this.activeIndex < 0) return;
+    const opt = this.options.toArray()[this.activeIndex];
+    if (opt?.disabled) return;
+    this.selectOption(opt);
+  }
+
+  // chamado por matcha-option quando clicado
+  selectOption(option: MatchaOptionComponent) {
+    console.log('MatchaAutocomplete: Opção selecionada', {
+      option,
+      value: option.value,
+      selected: option.selected,
+      optionsLength: this.options.length,
+      allOptions: this.options.toArray()
+    });
+
+    // Armazenar o valor selecionado
+    this.selectedValue = option.value;
+
+    // Marcar a opção como selecionada diretamente
+    option.selected = true;
+
+    // Marcar todas as outras como não selecionadas
+    this.options.forEach(o => {
+      if (o !== option) {
+        o.selected = false;
+      }
+    });
+
+    console.log('MatchaAutocomplete: Após marcar seleção', {
+      selectedOption: option,
+      selected: option.selected,
+      selectedValue: this.selectedValue,
+      allOptions: this.options.toArray().map(o => ({ value: o.value, selected: o.selected }))
+    });
+
+    // Notificar a diretiva sobre a seleção antes de fechar o painel
+    this.notifyDirectiveOfSelection(option.value);
+
+    // Fechamos painel automaticamente
+    console.log('MatchaAutocomplete: Fechando painel após seleção');
+    this.closePanel();
+
+    // Forçar detecção de mudanças para garantir que o painel seja fechado
+    this.cdr.detectChanges();
+
+    // indireto: a directive pode ler o value via getSelectedValue()
+  }
+
+  getSelectedValue() {
+    // Usar o valor armazenado se disponível, senão buscar na QueryList
+    const value = this.selectedValue !== undefined ? this.selectedValue : this.options.find(o => o.selected)?.value;
+
+    console.log('MatchaAutocomplete: getSelectedValue chamado', {
+      selectedValue: this.selectedValue,
+      value,
+      allOptions: this.options.toArray().map(o => ({ value: o.value, selected: o.selected }))
+    });
+
+    return value;
+  }
+}
+

package/src/lib/matcha-autocomplete/matcha-autocomplete.directive.ts

@@ -0,0 +1,153 @@
+import { Directive, Input, HostListener, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
+import { MatchaAutocompleteComponent } from './matcha-autocomplete.component';
+import { fromEvent, Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+@Directive({
+  selector: '[matchaAutocomplete]',
+  standalone: false,
+})
+export class MatchaAutocompleteTriggerDirective implements AfterViewInit, OnDestroy {
+  @Input('matchaAutocomplete') panel!: MatchaAutocompleteComponent;
+  private subs = new Subscription();
+
+  constructor(private el: ElementRef<HTMLInputElement>) {}
+
+  ngAfterViewInit() {
+    if (!this.panel) {
+      throw new Error('Você precisa passar uma referência para <matcha-autocomplete> ex: [matchaAutocomplete]="auto"');
+    }
+    this.panel.attachTo(this.el.nativeElement);
+
+    // close panel ao clicar fora - usando click para evitar conflito com focus
+    const clickSub = fromEvent(document, 'click').pipe(
+      filter((ev: any) => {
+        const target = ev.target as Node;
+        const isInsideInput = this.el.nativeElement.contains(target) || this.el.nativeElement === target;
+        const isInsidePanel = this.panel?.elRef?.nativeElement?.contains?.(target);
+
+        console.log('MatchaAutocomplete: Click outside check', {
+          target: target,
+          inputElement: this.el.nativeElement,
+          isInsideInput,
+          isInsidePanel,
+          shouldClose: !isInsideInput && !isInsidePanel,
+          panelOpen: this.panel?.open
+        });
+
+        // Só fechar se o painel estiver aberto e clicou fora
+        return this.panel?.open && !isInsideInput && !isInsidePanel;
+      })
+    ).subscribe(() => {
+      console.log('MatchaAutocomplete: Fechando painel por click outside');
+      this.panel.closePanel();
+    });
+
+    this.subs.add(clickSub);
+
+    // Escutar evento de seleção do autocomplete
+    const selectionSub = fromEvent(this.panel.elRef.nativeElement, 'matcha-autocomplete-selection').subscribe((event: any) => {
+      console.log('MatchaAutocomplete: Evento de seleção recebido na diretiva', event.detail);
+      const { value } = event.detail;
+      if (value !== undefined) {
+        this.writeValueToInput(value);
+      }
+    });
+
+    this.subs.add(selectionSub);
+  }
+
+  ngOnDestroy() {
+    this.subs.unsubscribe();
+  }
+
+  private writeValueToInput(value: any) {
+    console.log('MatchaAutocomplete: writeValueToInput chamado', {
+      value,
+      input: this.el.nativeElement
+    });
+    const input = this.el.nativeElement;
+    input.value = value == null ? '' : value;
+
+    // Dispatch múltiplos eventos para garantir compatibilidade com Angular Forms
+    const inputEvent = new Event('input', { bubbles: true });
+    const changeEvent = new Event('change', { bubbles: true });
+    const blurEvent = new Event('blur', { bubbles: true });
+
+    input.dispatchEvent(inputEvent);
+    input.dispatchEvent(changeEvent);
+    input.dispatchEvent(blurEvent);
+
+    console.log('MatchaAutocomplete: Valor escrito no input', input.value);
+  }
+
+  @HostListener('click')
+  onClick() {
+    // Abrir painel quando clicar no input
+    this.panel.openPanel();
+  }
+
+  @HostListener('focus')
+  onFocus() {
+    // Não abrir automaticamente no focus para evitar conflito com click outside
+    // O painel será aberto apenas quando o usuário clicar ou digitar
+  }
+
+  @HostListener('input', ['$event'])
+  onInput(e: Event) {
+    // se o usuário digitar, apenas reabre painel. O filtro de opções geralmente é controlado pelo componente pai
+    if (!this.panel.open) this.panel.openPanel();
+  }
+
+  @HostListener('keydown', ['$event'])
+  onKeydown(ev: KeyboardEvent) {
+    if (!this.panel) return;
+
+    switch (ev.key) {
+      case 'ArrowDown':
+        ev.preventDefault();
+        this.panel.highlightNext();
+        break;
+      case 'ArrowUp':
+        ev.preventDefault();
+        this.panel.highlightPrevious();
+        break;
+      case 'Enter':
+        ev.preventDefault();
+        this.panel.selectActive();
+        // pega o value escolhido e escreve no input
+        setTimeout(() => {
+          const val = this.panel.getSelectedValue();
+          if (val !== undefined) this.writeValueToInput(val);
+        });
+        break;
+      case 'Escape':
+        ev.preventDefault();
+        this.panel.closePanel();
+        break;
+    }
+  }
+
+  // Se uma opção for selecionada via click (o matcha-option notifica o pai que faz close),
+  // lemos selectedValue e escrevemos no input. Como o selectOption do painel fecha imediatamente,
+  // precisamos observar mudanças no DOM/QueryList ou checar logo após close.
+  // Simples solução: observar clicks nas options via delegation:
+  @HostListener('document:click', ['$event'])
+  onDocClick(ev: MouseEvent) {
+    const target = ev.target as HTMLElement;
+
+    // Verificar se o clique foi em uma opção deste painel específico
+    const isOptionClick = target.closest('matcha-option') &&
+                         this.panel?.elRef?.nativeElement?.contains(target);
+
+    if (isOptionClick) {
+      // Se clicou em uma opção deste painel, aguardar um pouco e atualizar o input
+      setTimeout(() => {
+        if (this.panel && typeof this.panel.getSelectedValue === 'function') {
+          const val = this.panel.getSelectedValue();
+          if (val !== undefined) this.writeValueToInput(val);
+        }
+      }, 10);
+    }
+  }
+}

package/src/lib/matcha-autocomplete/matcha-autocomplete.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaAutocompleteComponent } from './matcha-autocomplete.component';
+import { MatchaAutocompleteTriggerDirective } from './matcha-autocomplete.directive';
+import { MatchaOptionModule } from '../matcha-option/matcha-option.module';
+import { MatchaPanelModule } from '../matcha-panel/matcha-panel.module';
+import { MATCHA_OPTION_PARENT } from '../matcha-option/matcha-option-parent.interface';
+
+@NgModule({
+  declarations: [
+    MatchaAutocompleteComponent,
+    MatchaAutocompleteTriggerDirective
+  ],
+  imports: [
+    CommonModule,
+    MatchaOptionModule,
+    MatchaPanelModule
+  ],
+  exports: [
+    MatchaAutocompleteComponent,
+    MatchaAutocompleteTriggerDirective,
+    MatchaOptionModule // Re-exporta para conveniência
+  ],
+  providers: [
+    // Provider para permitir injeção da interface MatchaOptionParent
+    { provide: MATCHA_OPTION_PARENT, useExisting: MatchaAutocompleteComponent }
+  ]
+})
+export class MatchaAutocompleteModule { }
+

package/src/lib/matcha-autocomplete/matcha-autocomplete.stories.ts

@@ -0,0 +1,172 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule, FormControl, FormGroup } from '@angular/forms';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+
+import { MatchaAutocompleteModule } from './matcha-autocomplete.module';
+import { MatchaFormFieldModule } from '../matcha-form-field/matcha-form-field.module';
+
+export default {
+  title: 'Components / Autocomplete',
+  decorators: [
+    applicationConfig({
+      providers: [provideAnimations()],
+    }),
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        MatchaAutocompleteModule,
+        MatchaFormFieldModule
+      ],
+    }),
+  ],
+  tags: ['autodocs'],
+  parameters: {
+    controls: { expanded: true },
+  },
+} as Meta;
+
+export const ReactiveForm: StoryObj = {
+  render: () => {
+    const formulario = new FormGroup({
+      name: new FormControl('')
+    });
+
+    const allOptions = ['Apple', 'Banana', 'Cherry', 'Date', 'Grape', 'Orange', 'Pineapple', 'Strawberry'];
+
+    const filteredOptions$: Observable<string[]> = formulario.get('name')!.valueChanges.pipe(
+      startWith(''),
+      map(v => {
+        const val = v || '';
+        const low = val.toLowerCase();
+        return allOptions.filter(o => o.toLowerCase().includes(low));
+      })
+    );
+
+    return {
+      template: `
+        <form [formGroup]="formulario" style="max-width: 400px;">
+          <matcha-form-field class="my-16">
+            <matcha-label>Escolha uma fruta</matcha-label>
+            <input
+              type="text"
+              formControlName="name"
+              placeholder="Digite para filtrar..."
+              [matchaAutocomplete]="auto"
+            >
+            <matcha-autocomplete #auto>
+              <matcha-option
+                *ngFor="let option of filteredOptions$ | async"
+                [value]="option"
+              >
+                🍎 {{ option }}
+              </matcha-option>
+            </matcha-autocomplete>
+          </matcha-form-field>
+        </form>
+
+        <div style="margin-top: 20px; padding: 10px; background: #f5f5f5; border-radius: 4px;">
+          <strong>Valor do formulário:</strong> {{ formulario.value | json }}
+        </div>
+      `,
+      props: {
+        formulario,
+        filteredOptions$
+      }
+    };
+  }
+};
+
+export const TemplateDrivenForm: StoryObj = {
+  render: () => {
+    const allOptions = ['React', 'Vue', 'Angular', 'Svelte', 'Ember', 'Backbone'];
+    let model = '';
+
+    return {
+      template: `
+        <div style="max-width: 400px;">
+          <matcha-form-field class="my-16">
+            <matcha-label>Framework favorito</matcha-label>
+            <input
+              type="text"
+              [(ngModel)]="model"
+              placeholder="Digite para selecionar..."
+              [matchaAutocomplete]="autoTemplate"
+            >
+            <matcha-autocomplete #autoTemplate>
+              <matcha-option
+                *ngFor="let option of allOptions"
+                [value]="option"
+              >
+                ⚡ {{ option }}
+              </matcha-option>
+            </matcha-autocomplete>
+          </matcha-form-field>
+        </div>
+
+        <div style="margin-top: 20px; padding: 10px; background: #f5f5f5; border-radius: 4px;">
+          <strong>Valor do ngModel:</strong> {{ model | json }}
+        </div>
+      `,
+      props: {
+        model,
+        allOptions
+      }
+    };
+  }
+};
+
+export const WithDisabledOptions: StoryObj = {
+  render: () => {
+    const formulario = new FormGroup({
+      country: new FormControl('')
+    });
+
+    const countries = [
+      { name: 'Brasil', code: 'BR', disabled: false },
+      { name: 'Estados Unidos', code: 'US', disabled: false },
+      { name: 'Argentina', code: 'AR', disabled: true },
+      { name: 'Chile', code: 'CL', disabled: false },
+      { name: 'Uruguai', code: 'UY', disabled: true },
+    ];
+
+    return {
+      template: `
+        <form [formGroup]="formulario" style="max-width: 400px;">
+          <matcha-form-field class="my-16">
+            <matcha-label>Selecione um país</matcha-label>
+            <input
+              type="text"
+              formControlName="country"
+              placeholder="Digite o nome do país..."
+              [matchaAutocomplete]="autoCountries"
+            >
+            <matcha-autocomplete #autoCountries>
+              <matcha-option
+                *ngFor="let country of countries"
+                [value]="country.name"
+                [disabled]="country.disabled"
+              >
+                {{ country.name }} ({{ country.code }})
+                <span *ngIf="country.disabled" style="color: #999;"> - Indisponível</span>
+              </matcha-option>
+            </matcha-autocomplete>
+          </matcha-form-field>
+        </form>
+
+        <div style="margin-top: 20px; padding: 10px; background: #f5f5f5; border-radius: 4px;">
+          <strong>País selecionado:</strong> {{ formulario.value.country }}
+        </div>
+      `,
+      props: {
+        formulario,
+        countries
+      }
+    };
+  }
+};
+

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

@@ -0,0 +1,29 @@
+<span [class]="avatarClasses">
+    <!-- Imagem do usuário -->
+    <img 
+      *ngIf="hasImage" 
+      [src]="src" 
+      [alt]="name || 'Avatar'"
+      class="matcha-avatar-image">
+    
+    <!-- Iniciais do nome -->
+    <span 
+      *ngIf="!hasImage && hasName" 
+      class="matcha-avatar-initials">
+      {{ initials }}
+    </span>
+    
+
+    <svg 
+      *ngIf="showDefaultIcon"
+      class="matcha-avatar-icon"
+      viewBox="0 0 56 56" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg">
+      <path 
+        fill-rule="evenodd" 
+        clip-rule="evenodd" 
+        d="M28 0C12.544 0 0 12.544 0 28C0 43.456 12.544 56 28 56C43.456 56 56 43.456 56 28C56 12.544 43.456 0 28 0ZM28.0022 8.4C32.6502 8.4 36.4022 12.152 36.4022 16.8C36.4022 21.448 32.6502 25.2 28.0022 25.2C23.3542 25.2 19.6022 21.448 19.6022 16.8C19.6022 12.152 23.3542 8.4 28.0022 8.4ZM28.0022 48.1601C21.0022 48.1601 14.8142 44.5761 11.2022 39.1441C11.2862 33.5721 22.4022 30.5201 28.0022 30.5201C33.5742 30.5201 44.7182 33.5721 44.8022 39.1441C41.1902 44.5761 35.0022 48.1601 28.0022 48.1601Z" 
+        fill="currentColor"/>
+    </svg>
+  </span>

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

@@ -0,0 +1,78 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'matcha-avatar',
+  templateUrl: './avatar.component.html',
+  styleUrls: ['./avatar.component.scss'],
+  standalone: false
+})
+export class MatchaAvatarComponent {
+  @Input() src: string = '';
+  @Input() name: string = '';
+  
+  @Input() size: 'tiny' | 'small' | 'medium' | 'large' | 'huge' = 'medium';
+  @Input() color: string = 'blue'; 
+
+  private _disabled = false;
+  @Input()
+  set disabled(value: boolean | string) {
+
+    this._disabled = value != null && `${value}` !== 'false';
+  }
+  get disabled(): boolean {
+    return this._disabled;
+  }
+
+  public get initials(): string {
+    if (!this.name.trim()) {
+      return '';
+    }
+
+    const words = this.name.trim().split(/\s+/);
+    
+    if (this.size === 'tiny') {
+      return words[0].charAt(0).toUpperCase();
+    }
+
+    if (words.length >= 2) {
+
+      return (words[0].charAt(0) + words[1].charAt(0)).toUpperCase();
+    } else if (words.length === 1 && words[0].length >= 2) {
+
+      return words[0].substring(0, 2).toUpperCase();
+    } else {
+
+      return words[0].charAt(0).toUpperCase();
+    }
+  }
+
+  public get hasImage(): boolean {
+    return !!(this.src && this.src.trim() !== '');
+  }
+
+  public get hasName(): boolean {
+    return !!(this.name && this.name.trim() !== '');
+  }
+
+  public get showDefaultIcon(): boolean {
+    return !this.hasImage && !this.hasName;
+  }
+
+  public get sizeClass(): string {
+    return `matcha-avatar-${this.size}`;
+  }
+
+  public get avatarClasses(): string {
+    let classes = `matcha-avatar radius-full ${this.sizeClass}`;
+    
+    if (!this.showDefaultIcon) {
+      classes += ' ' + this.color;
+    }
+    
+    if (this.disabled) {
+      classes += ' color-disabled';
+    }
+    
+    return classes;
+  }
+}