matcha-components 20.15.0 → 20.17.0

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

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

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

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

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

@@ -1,12 +0,0 @@
-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');
-    }
-}