matcha-components 20.12.0 → 20.15.0

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

@@ -0,0 +1,467 @@
+import {
+  Component, ContentChildren, QueryList, ElementRef,
+  AfterContentInit, Renderer2, ViewEncapsulation, ChangeDetectorRef,
+  Input, Output, EventEmitter, ViewChild, AfterViewInit, forwardRef
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+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-select',
+  templateUrl: './matcha-select.component.html',
+  styleUrls: ['./matcha-select.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: false,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MatchaSelectComponent),
+      multi: true
+    }
+  ]
+})
+export class MatchaSelectComponent implements AfterContentInit, AfterViewInit, MatchaOptionParent, ControlValueAccessor {
+  @ContentChildren(MatchaOptionComponent, { descendants: true }) options!: QueryList<MatchaOptionComponent>;
+  @ViewChild(MatchaPanelComponent) panel!: MatchaPanelComponent;
+
+  // Armazenar o valor selecionado independente da QueryList
+  selectedValue: any = undefined;
+
+  // Configurações do painel
+  @Input() placement: 'bottom' | 'top' | 'auto' = 'auto';
+  @Input() maxHeight = 280;
+  @Input() minWidth = 160;
+  @Input() placeholder = 'Selecione uma opção';
+  @Input() disabled = false;
+
+  @Output() opened = new EventEmitter<void>();
+  @Output() closed = new EventEmitter<void>();
+  @Output() selectionChange = new EventEmitter<any>();
+
+  open = false;
+  triggerElement?: HTMLElement;
+  private activeIndex = -1;
+
+  // ControlValueAccessor properties
+  private onChange = (value: any) => {};
+  private onTouched = () => {};
+  isDisabled = false;
+
+  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();
+
+    // Configurar o trigger element
+    this.triggerElement = this.elRef.nativeElement.querySelector('.matcha-select-trigger');
+    if (this.triggerElement && this.panel) {
+      this.panel.attachTo(this.triggerElement);
+    }
+
+    // Adicionar event listeners para navegação por teclado
+    this.setupKeyboardNavigation();
+
+    // Escuta eventos customizados das opções
+    this.elRef.nativeElement.addEventListener('matcha-option-selected', (event: any) => {
+      console.log('MatchaSelect: 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-select-close', () => {
+      if (this.open) {
+        console.log('MatchaSelect: Fechando painel por evento de outro select');
+        this.closePanel();
+      }
+    });
+
+    // Escuta click outside para fechar o painel
+    document.addEventListener('click', (event: MouseEvent) => {
+      const target = event.target as Node;
+      const isInsideSelect = this.elRef.nativeElement.contains(target);
+
+      if (!isInsideSelect && this.open) {
+        console.log('MatchaSelect: Fechando painel por click outside');
+        this.closePanel();
+      }
+    });
+  }
+
+  private setupKeyboardNavigation() {
+    if (!this.triggerElement) return;
+
+    this.triggerElement.addEventListener('keydown', (event: KeyboardEvent) => {
+      if (this.disabled || this.isDisabled) return;
+
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          this.handleArrowDown();
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          this.handleArrowUp();
+          break;
+        case 'Enter':
+        case ' ':
+          event.preventDefault();
+          this.handleEnterOrSpace();
+          break;
+        case 'Escape':
+          event.preventDefault();
+          this.handleEscape();
+          break;
+        case 'Tab':
+          // Permitir navegação normal com Tab
+          break;
+        default:
+          // Para outras teclas, não fazer nada
+          break;
+      }
+    });
+  }
+
+  private handleArrowDown() {
+    if (!this.open) {
+      // Se o painel estiver fechado, selecionar a próxima opção diretamente
+      this.selectNextOption();
+    } else {
+      // Se o painel estiver aberto, navegar para a próxima opção
+      this.highlightNext();
+    }
+  }
+
+  private handleArrowUp() {
+    if (!this.open) {
+      // Se o painel estiver fechado, selecionar a opção anterior diretamente
+      this.selectPreviousOption();
+    } else {
+      // Se o painel estiver aberto, navegar para a opção anterior
+      this.highlightPrevious();
+    }
+  }
+
+  private handleEnterOrSpace() {
+    if (this.open) {
+      // Se o painel estiver aberto, selecionar a opção ativa
+      this.selectActive();
+    } else {
+      // Se o painel estiver fechado, abrir
+      this.openPanel();
+    }
+  }
+
+  private handleEscape() {
+    if (this.open) {
+      this.closePanel();
+    }
+  }
+
+  private closeOtherPanels() {
+    // Buscar todos os outros selects na página e fechá-los
+    const allSelects = document.querySelectorAll('matcha-select');
+    allSelects.forEach(selectEl => {
+      if (selectEl !== this.elRef.nativeElement) {
+        // Disparar evento para fechar outros painéis
+        const closeEvent = new CustomEvent('matcha-select-close', {
+          bubbles: true
+        });
+        selectEl.dispatchEvent(closeEvent);
+      }
+    });
+  }
+
+  private notifyDirectiveOfSelection(value: any) {
+    // Disparar evento customizado para notificar a diretiva sobre a seleção
+    const selectionEvent = new CustomEvent('matcha-select-selection', {
+      detail: { value },
+      bubbles: true
+    });
+    this.elRef.nativeElement.dispatchEvent(selectionEvent);
+    console.log('MatchaSelect: Evento de seleção disparado', { value });
+  }
+
+  onTriggerClick() {
+    if (this.disabled || this.isDisabled) return;
+    this.togglePanel();
+  }
+
+  openPanel() {
+    if (this.disabled || this.isDisabled) {
+      console.log('MatchaSelect: disabled');
+      return;
+    }
+
+    // Garantir que o triggerElement está configurado
+    if (!this.triggerElement) {
+      this.triggerElement = this.elRef.nativeElement.querySelector('.matcha-select-trigger');
+    }
+
+    if (!this.triggerElement) {
+      console.log('MatchaSelect: triggerElement não encontrado');
+      return;
+    }
+
+    console.log('MatchaSelect: 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();
+
+    // Configurar o activeIndex baseado no valor selecionado
+    this.setActiveIndexFromSelectedValue();
+    this.updateSelectedStates();
+
+    this.opened.emit();
+  }
+
+  closePanel() {
+    console.log('MatchaSelect: 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 setActiveIndexFromSelectedValue() {
+    if (this.selectedValue !== undefined) {
+      const options = this.options.toArray();
+      const selectedIndex = options.findIndex(opt => opt.value === this.selectedValue);
+      this.activeIndex = selectedIndex >= 0 ? selectedIndex : 0;
+    } else {
+      this.activeIndex = 0;
+    }
+  }
+
+  private selectNextOption() {
+    const options = this.options.toArray();
+    if (!options.length) return;
+
+    let currentIndex = -1;
+    if (this.selectedValue !== undefined) {
+      currentIndex = options.findIndex(opt => opt.value === this.selectedValue);
+    }
+
+    // Se não há seleção atual ou é a última opção, selecionar a primeira
+    const nextIndex = currentIndex < 0 || currentIndex >= options.length - 1 ? 0 : currentIndex + 1;
+    this.selectOptionByIndex(nextIndex);
+  }
+
+  private selectPreviousOption() {
+    const options = this.options.toArray();
+    if (!options.length) return;
+
+    let currentIndex = -1;
+    if (this.selectedValue !== undefined) {
+      currentIndex = options.findIndex(opt => opt.value === this.selectedValue);
+    }
+
+    // Se não há seleção atual ou é a primeira opção, selecionar a última
+    const prevIndex = currentIndex <= 0 ? options.length - 1 : currentIndex - 1;
+    this.selectOptionByIndex(prevIndex);
+  }
+
+  private selectOptionByIndex(index: number) {
+    const options = this.options.toArray();
+    if (index < 0 || index >= options.length) return;
+
+    const option = options[index];
+    if (option.disabled) return;
+
+    // Atualizar o valor selecionado
+    this.selectedValue = option.value;
+
+    // Marcar a opção como selecionada
+    option.selected = true;
+
+    // Marcar todas as outras como não selecionadas
+    this.options.forEach(o => {
+      if (o !== option) {
+        o.selected = false;
+      }
+    });
+
+    // Notificar a diretiva sobre a seleção
+    this.notifyDirectiveOfSelection(option.value);
+
+    // Emitir evento de mudança de seleção
+    this.selectionChange.emit(option.value);
+
+    // Notificar o Angular Forms sobre a mudança
+    this.onChange(option.value);
+    this.onTouched();
+
+    // Forçar detecção de mudanças
+    this.cdr.detectChanges();
+  }
+
+  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('MatchaSelect: 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('MatchaSelect: 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);
+
+    // Emitir evento de mudança de seleção
+    this.selectionChange.emit(option.value);
+
+    // Notificar o Angular Forms sobre a mudança
+    this.onChange(option.value);
+    this.onTouched();
+
+    // Fechamos painel automaticamente
+    console.log('MatchaSelect: 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();
+  }
+
+  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('MatchaSelect: getSelectedValue chamado', {
+      selectedValue: this.selectedValue,
+      value,
+      allOptions: this.options.toArray().map(o => ({ value: o.value, selected: o.selected }))
+    });
+
+    return value;
+  }
+
+  // Método para definir valor programaticamente
+  setValue(value: any) {
+    this.selectedValue = value;
+    this.cdr.detectChanges();
+  }
+
+  // Método para limpar seleção
+  clearSelection() {
+    this.selectedValue = undefined;
+    this.options.forEach(o => o.selected = false);
+    this.cdr.detectChanges();
+  }
+
+  // ControlValueAccessor implementation
+  writeValue(value: any): void {
+    this.selectedValue = value;
+    this.cdr.detectChanges();
+  }
+
+  registerOnChange(fn: (value: any) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+    this.cdr.detectChanges();
+  }
+}

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

@@ -0,0 +1,147 @@
+import { Directive, Input, HostListener, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
+import { MatchaSelectComponent } from './matcha-select.component';
+import { fromEvent, Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+@Directive({
+  selector: '[matchaSelect]',
+  standalone: false,
+})
+export class MatchaSelectTriggerDirective implements AfterViewInit, OnDestroy {
+  @Input('matchaSelect') select!: MatchaSelectComponent;
+  private subs = new Subscription();
+
+  constructor(private el: ElementRef<HTMLElement>) {}
+
+  ngAfterViewInit() {
+    if (!this.select) {
+      throw new Error('Você precisa passar uma referência para <matcha-select> ex: [matchaSelect]="select"');
+    }
+
+    // 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 isInsideTrigger = this.el.nativeElement.contains(target) || this.el.nativeElement === target;
+        const isInsidePanel = this.select?.elRef?.nativeElement?.contains?.(target);
+
+        console.log('MatchaSelect: Click outside check', {
+          target: target,
+          triggerElement: this.el.nativeElement,
+          isInsideTrigger,
+          isInsidePanel,
+          shouldClose: !isInsideTrigger && !isInsidePanel,
+          panelOpen: this.select?.open
+        });
+
+        // Só fechar se o painel estiver aberto e clicou fora
+        return this.select?.open && !isInsideTrigger && !isInsidePanel;
+      })
+    ).subscribe(() => {
+      console.log('MatchaSelect: Fechando painel por click outside');
+      this.select.closePanel();
+    });
+
+    this.subs.add(clickSub);
+
+    // Escutar evento de seleção do select
+    const selectionSub = fromEvent(this.select.elRef.nativeElement, 'matcha-select-selection').subscribe((event: any) => {
+      console.log('MatchaSelect: 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('MatchaSelect: writeValueToInput chamado', {
+      value,
+      input: this.el.nativeElement
+    });
+    const input = this.el.nativeElement as HTMLInputElement;
+    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('MatchaSelect: Valor escrito no input', input.value);
+  }
+
+  @HostListener('click')
+  onClick() {
+    // Abrir painel quando clicar no trigger
+    this.select.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
+  }
+
+  @HostListener('keydown', ['$event'])
+  onKeydown(ev: KeyboardEvent) {
+    if (!this.select) return;
+
+    switch (ev.key) {
+      case 'ArrowDown':
+        ev.preventDefault();
+        this.select.highlightNext();
+        break;
+      case 'ArrowUp':
+        ev.preventDefault();
+        this.select.highlightPrevious();
+        break;
+      case 'Enter':
+      case ' ':
+        ev.preventDefault();
+        this.select.selectActive();
+        // pega o value escolhido e escreve no input
+        setTimeout(() => {
+          const val = this.select.getSelectedValue();
+          if (val !== undefined) this.writeValueToInput(val);
+        });
+        break;
+      case 'Escape':
+        ev.preventDefault();
+        this.select.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.select?.elRef?.nativeElement?.contains(target);
+
+    if (isOptionClick) {
+      // Se clicou em uma opção deste painel, aguardar um pouco e atualizar o input
+      setTimeout(() => {
+        if (this.select && typeof this.select.getSelectedValue === 'function') {
+          const val = this.select.getSelectedValue();
+          if (val !== undefined) this.writeValueToInput(val);
+        }
+      }, 10);
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaSelectComponent } from './matcha-select.component';
+import { MatchaSelectTriggerDirective } from './matcha-select.directive';
+import { MatchaOptionModule } from '../matcha-option/matcha-option.module';
+import { MatchaPanelModule } from '../matcha-panel/matcha-panel.module';
+
+@NgModule({
+  declarations: [
+    MatchaSelectComponent,
+    MatchaSelectTriggerDirective
+  ],
+  imports: [
+    CommonModule,
+    MatchaOptionModule,
+    MatchaPanelModule
+  ],
+  exports: [
+    MatchaSelectComponent,
+    MatchaSelectTriggerDirective
+  ]
+})
+export class MatchaSelectModule { }

package/src/lib/matcha-sidenav/sidenav.argtypes.ts

@@ -0,0 +1,60 @@
+export const sidenavArgtypes = {
+    autoFocus: {
+        description: 'Whether the drawer should focus the first focusable element automatically when opened.',
+        control: 'boolean',
+        defaultValue: 'false',
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    disableClose: {
+        description: 'Whether the drawer can be closed with the escape key or by clicking on the backdrop.',
+        control: 'boolean',
+        defaultValue: 'false',
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    mode: {
+        description: 'Mode of the drawer; one of "over", "push", or "side".',
+        control: 'select',
+        options: ['over', 'push', 'side'],
+        defaultValue: 'over',
+        table: {
+            type: { summary: 'MatDrawerMode' },
+        },
+    },
+    opened: {
+        description: 'Whether the drawer is opened.',
+        control: 'boolean',
+        defaultValue: 'false',
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    position: {
+        description: 'The side that the drawer is attached to.',
+        control: 'select',
+        options: ['start', 'end'],
+        defaultValue: 'start',
+        table: {
+            type: { summary: '"start" | "end"' },
+        },
+    },
+    closedStart: {
+        description: 'Event emitted when the drawer has started closing.',
+        action: 'closedStart',
+    },
+    onPositionChanged: {
+        description: "Event emitted when the drawer's position changes.",
+        action: 'onPositionChanged',
+    },
+    openedChange: {
+        description: 'Event emitted when the drawer open state is changed.',
+        action: 'openedChange',
+    },
+    openedStart: {
+        description: 'Event emitted when the drawer has started opening.',
+        action: 'openedStart',
+    },
+};

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

@@ -0,0 +1,12 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[matcha-sidenav]',
+    standalone: false
+})
+export class MatchaSidenavDirective {
+    constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-sidenav');
+    }
+}