matcha-components 20.15.0 → 20.16.0

package/src/lib/matcha-modal/overlay.service.ts

@@ -1,138 +0,0 @@
-import { Injectable, ComponentRef, createComponent, ApplicationRef, Injector, Type, EmbeddedViewRef, Renderer2, RendererFactory2 } from '@angular/core';
-
-/**
- * Serviço responsável pela implementação técnica do overlay e backdrop dos modais.
- *
- * Este serviço lida com a criação e gerenciamento do container do overlay,
- * criação do backdrop e manipulação do DOM. É um serviço de baixo nível
- * utilizado internamente pelo MatchaModalService.
- *
- * @example
- * ```typescript
- * constructor(private overlayService: MatchaOverlayService) {}
- *
- * createOverlay() {
- *   this.overlayService.open(MyComponent);
- * }
- * ```
- */
-@Injectable({
-    providedIn: 'root',
-})
-export class MatchaOverlayService {
-    private overlayContainer: HTMLElement | null = null;
-    private activeModal: ComponentRef<any> | null = null;
-    private backdrop: HTMLElement | null = null;
-    private renderer: Renderer2;
-
-    constructor(
-        private appRef: ApplicationRef,
-        private injector: Injector,
-        private rendererFactory: RendererFactory2,
-    ) {
-        this.renderer = this.rendererFactory.createRenderer(null, null);
-    }
-
-    /**
-     * Cria o container do overlay se ainda não existir.
-     * O container é um elemento div que será usado para hospedar os modais.
-     *
-     * @private
-     */
-    private createOverlayContainer(): void {
-        if (!this.overlayContainer) {
-            this.overlayContainer = this.renderer.createElement('div');
-            this.renderer.addClass(this.overlayContainer, 'matcha-overlay-container');
-            this.renderer.appendChild(document.body, this.overlayContainer);
-        }
-    }
-
-    /**
-     * Remove o container do overlay do DOM.
-     *
-     * @private
-     */
-    private removeOverlayContainer(): void {
-        if (this.overlayContainer) {
-            this.renderer.removeChild(document.body, this.overlayContainer);
-            this.overlayContainer = null;
-        }
-    }
-
-    /**
-     * Cria o backdrop do modal se ainda não existir.
-     * O backdrop é um elemento div que cria o efeito de escurecimento
-     * por trás do modal.
-     *
-     * @private
-     */
-    private createBackdrop(): void {
-        if (!this.backdrop) {
-            this.backdrop = this.renderer.createElement('div');
-            this.renderer.addClass(this.backdrop, 'matcha-modal-backdrop');
-            this.renderer.appendChild(document.body, this.backdrop);
-        }
-    }
-
-    /**
-     * Remove o backdrop do modal do DOM.
-     *
-     * @private
-     */
-    private removeBackdrop(): void {
-        if (this.backdrop) {
-            this.renderer.removeChild(document.body, this.backdrop);
-            this.backdrop = null;
-        }
-    }
-
-    /**
-     * Abre um componente dentro de um modal.
-     *
-     * @param component - O componente que será exibido dentro do modal
-     * @param config - Configurações opcionais para o modal
-     * @returns Uma referência ao componente criado
-     *
-     * @example
-     * ```typescript
-     * const componentRef = this.overlayService.open(MyComponent, {
-     *   data: { id: 1 }
-     * });
-     * ```
-     */
-    open<T>(component: Type<T>, config: any = {}): ComponentRef<T> {
-        this.createOverlayContainer();
-        this.createBackdrop();
-
-        const componentRef = createComponent(component, {
-            environmentInjector: this.appRef.injector,
-            elementInjector: this.injector,
-        });
-
-        const componentElement = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0];
-        this.renderer.appendChild(this.overlayContainer, componentElement);
-
-        this.appRef.attachView(componentRef.hostView);
-        this.activeModal = componentRef;
-
-        return componentRef;
-    }
-
-    /**
-     * Fecha o modal atualmente aberto e remove o backdrop e o container.
-     *
-     * @example
-     * ```typescript
-     * this.overlayService.close();
-     * ```
-     */
-    close(): void {
-        if (this.activeModal) {
-            this.appRef.detachView(this.activeModal.hostView);
-            this.activeModal.destroy();
-            this.activeModal = null;
-            this.removeBackdrop();
-            this.removeOverlayContainer();
-        }
-    }
-}

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

@@ -1,144 +0,0 @@
-# Matcha Option
-
-Componente **genérico e reutilizável** para criar opções selecionáveis em diferentes contextos do Angular.
-
-## 🎯 Características
-
-- **✅ Genérico**: Funciona em autocomplete, select, menu, etc.
-- **✅ Standalone**: Pode ser usado independentemente via eventos
-- **✅ Type-safe**: Interface MatchaOptionParent garante tipagem
-- **✅ Acessível**: Suporte completo a ARIA e navegação por teclado
-- **✅ Flexível**: Event-driven para máxima flexibilidade
-
-## 🚀 Como Usar
-
-### 1. **Uso Standalone** (com eventos)
-```html
-<matcha-option
-  [value]="'action1'"
-  (optionClick)="onItemClick($event)"
-  (optionSelect)="onItemSelect($event)">
-  📁 Abrir arquivo
-</matcha-option>
-```
-
-### 2. **Em componentes que implementam MatchaOptionParent**
-```html
-<!-- matcha-autocomplete -->
-<matcha-autocomplete>
-  <matcha-option [value]="option" *ngFor="let option of options">
-    {{ option }}
-  </matcha-option>
-</matcha-autocomplete>
-
-<!-- matcha-select (futuro) -->
-<matcha-select>
-  <matcha-option [value]="1">Opção 1</matcha-option>
-  <matcha-option [value]="2">Opção 2</matcha-option>
-</matcha-select>
-```
-
-### 3. **Em componente customizado**
-```typescript
-@Component({
-  selector: 'my-custom-list',
-  providers: [
-    { provide: MATCHA_OPTION_PARENT, useExisting: MyCustomListComponent }
-  ]
-})
-export class MyCustomListComponent implements MatchaOptionParent {
-  selectOption(option: MatchaOptionComponent) {
-    console.log('Selected:', option.value);
-  }
-}
-```
-
-## 📋 API
-
-### Inputs
-- `@Input() value: any` - Valor da opção
-- `@Input() disabled: boolean = false` - Se a opção está desabilitada
-
-### Outputs
-- `@Output() optionClick = EventEmitter<any>()` - Emite o valor quando clicado
-- `@Output() optionSelect = EventEmitter<MatchaOptionComponent>()` - Emite a instância quando selecionado
-
-### Propriedades
-- `selected: boolean` - Se a opção está selecionada (controlado pelo pai)
-- `nativeElement: HTMLElement` - Elemento DOM nativo
-
-## 🔌 Implementando MatchaOptionParent
-
-Para criar um componente que usa matcha-option:
-
-### 1. Implemente a interface
-```typescript
-export class MyComponent implements MatchaOptionParent {
-  selectOption(option: MatchaOptionComponent) {
-    // Sua 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>;
-```
-
-## 🎨 Casos de Uso
-
-- 📋 **Listas de seleção** simples
-- 🍔 **Menus de contexto**
-- 🎛️ **Toolbars** com ações
-- 🎨 **Color pickers**
-- 📊 **Data grids** com opções
-- 🔽 **Dropdowns** customizados
-- 📱 **Mobile menus**
-
-## ♿ Acessibilidade
-
-- `role="option"` para screen readers
-- `tabindex="0"` para navegação por teclado
-- `aria-selected` indica estado selecionado
-- Suporte a teclas Enter e Space
-- Estados visuais para hover e focus
-
-## 🎨 Estilos
-
-O componente aplica automaticamente:
-- `.matcha-option` - Classe base
-- `[aria-selected="true"]` - Quando selecionado
-- `[disabled]` - Quando desabilitado
-
-Customize via CSS:
-```scss
-.matcha-option {
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background: rgba(0,0,0,0.04);
-  }
-
-  &[aria-selected="true"] {
-    background: rgba(33, 150, 243, 0.1);
-    font-weight: 500;
-  }
-
-  &[disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-```

package/src/lib/matcha-option/matcha-option-parent.interface.ts

@@ -1,22 +0,0 @@
-/**
- * Interface que deve ser implementada por componentes que querem usar matcha-option como filho
- *
- * Permite que matcha-option seja usado em diferentes contextos:
- * - matcha-autocomplete
- * - matcha-select
- * - matcha-menu
- * - etc.
- */
-export interface MatchaOptionParent {
-  /**
-   * Método chamado quando uma opção é selecionada
-   * @param option - A instância do MatchaOptionComponent selecionado
-   */
-  selectOption(option: any): void; // usando any para evitar referência circular
-}
-
-/**
- * Token de injeção para MatchaOptionParent
- * Usado para injetar o componente pai no matcha-option
- */
-export const MATCHA_OPTION_PARENT = Symbol('MatchaOptionParent');

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

@@ -1,93 +0,0 @@
-import { Component, Input, HostBinding, HostListener, Optional, ElementRef, Output, EventEmitter, Inject } from '@angular/core';
-import { MatchaOptionParent, MATCHA_OPTION_PARENT } from './matcha-option-parent.interface';
-
-@Component({
-  selector: 'matcha-option',
-  template: `<ng-content></ng-content>`,
-  host: {
-    class: 'matcha-option',
-    role: 'option',
-    tabindex: '0'
-  },
-  standalone: false,
-})
-export class MatchaOptionComponent {
-  @Input() value: any;
-  @Input() disabled = false;
-  @HostBinding('attr.aria-selected') selected = false;
-
-  // ✅ EventEmitters para uso standalone
-  @Output() optionClick = new EventEmitter<any>();
-  @Output() optionSelect = new EventEmitter<MatchaOptionComponent>();
-
-  constructor(
-    @Optional() @Inject(MATCHA_OPTION_PARENT) private parent: MatchaOptionParent | null,
-    private elRef: ElementRef
-  ) {}
-
-  @HostListener('click')
-  onClick() {
-    if (this.disabled) return;
-
-    console.log('MatchaOption: Clique na opção', {
-      value: this.value,
-      parent: this.parent,
-      disabled: this.disabled
-    });
-
-    // ✅ Notifica o pai (se houver) - qualquer componente que implemente MatchaOptionParent
-    if (this.parent) {
-      console.log('MatchaOption: Usando parent.selectOption');
-      this.parent.selectOption(this);
-    } else {
-      console.log('MatchaOption: Usando fallback findParentAndSelect');
-      // Fallback: busca o pai via DOM
-      this.findParentAndSelect();
-    }
-
-    // ✅ Emite eventos para uso standalone
-    this.optionClick.emit(this.value);
-    this.optionSelect.emit(this);
-  }
-
-  private findParentAndSelect() {
-    // Busca o elemento pai matcha-autocomplete ou matcha-select
-    const autocompleteEl = this.elRef.nativeElement.closest('matcha-autocomplete');
-    const selectEl = this.elRef.nativeElement.closest('matcha-select');
-
-    if (autocompleteEl) {
-      console.log('MatchaOption: Encontrou autocomplete element', autocompleteEl);
-      // Dispara um evento customizado que o autocomplete pode escutar
-      const event = new CustomEvent('matcha-option-selected', {
-        detail: { option: this, value: this.value },
-        bubbles: true
-      });
-      autocompleteEl.dispatchEvent(event);
-      console.log('MatchaOption: Evento customizado disparado', event);
-    } else if (selectEl) {
-      console.log('MatchaOption: Encontrou select element', selectEl);
-      // Dispara um evento customizado que o select pode escutar
-      const event = new CustomEvent('matcha-option-selected', {
-        detail: { option: this, value: this.value },
-        bubbles: true
-      });
-      selectEl.dispatchEvent(event);
-      console.log('MatchaOption: Evento customizado disparado para select', event);
-    } else {
-      console.log('MatchaOption: Não encontrou elemento pai (autocomplete ou select)');
-    }
-  }
-
-  @HostListener('keydown', ['$event'])
-  onKeydown(ev: KeyboardEvent) {
-    if (ev.key === 'Enter' || ev.key === ' ') {
-      ev.preventDefault();
-      this.onClick();
-    }
-  }
-
-  // Getter para acessar o elemento nativo (usado para scroll)
-  get nativeElement(): HTMLElement {
-    return this.elRef.nativeElement;
-  }
-}

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

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaOptionComponent } from './matcha-option.component';
-
-@NgModule({
-  declarations: [
-    MatchaOptionComponent
-  ],
-  imports: [
-    CommonModule
-  ],
-  exports: [
-    MatchaOptionComponent
-  ]
-})
-
-export class MatchaOptionModule { }

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

@@ -1,127 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { provideAnimations } from '@angular/platform-browser/animations';
-
-import { MatchaOptionModule } from './matcha-option.module';
-
-export default {
-  title: 'Components / Option',
-  decorators: [
-    applicationConfig({
-      providers: [provideAnimations()],
-    }),
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        MatchaOptionModule
-      ],
-    }),
-  ],
-  tags: ['autodocs'],
-  parameters: {
-    controls: { expanded: true },
-  },
-} as Meta;
-
-export const StandaloneOptions: StoryObj = {
-  render: () => {
-    let lastClick = '';
-    let selectedColor = '';
-    let clickHistory: string[] = [];
-
-    const colors = [
-      { name: 'Vermelho', value: '#f44336' },
-      { name: 'Verde', value: '#4caf50' },
-      { name: 'Azul', value: '#2196f3' },
-      { name: 'Amarelo', value: '#ffeb3b' },
-    ];
-
-    const onOptionClick = (value: any) => {
-      lastClick = value;
-      clickHistory.push(value);
-      if (clickHistory.length > 5) clickHistory.shift();
-    };
-
-    const selectColor = (colorValue: string) => {
-      selectedColor = colorValue;
-    };
-
-    return {
-      template: `
-        <div style="max-width: 600px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
-          <h3>🎯 matcha-option - Componente Genérico</h3>
-
-          <!-- Uso standalone com eventos -->
-          <div style="margin-bottom: 30px; padding: 15px; border: 1px solid #e0e0e0; border-radius: 8px; background: #f9f9f9;">
-            <h4>1. Uso Standalone (com eventos)</h4>
-            <div style="border: 1px solid #ddd; border-radius: 6px; background: white; overflow: hidden;">
-              <matcha-option
-                [value]="'action1'"
-                (optionClick)="onOptionClick($event)">
-                📁 Abrir arquivo
-              </matcha-option>
-
-              <matcha-option
-                [value]="'action2'"
-                (optionClick)="onOptionClick($event)">
-                💾 Salvar arquivo
-              </matcha-option>
-
-              <matcha-option
-                [value]="'action3'"
-                [disabled]="true"
-                (optionClick)="onOptionClick($event)">
-                🗑️ Deletar arquivo (desabilitado)
-              </matcha-option>
-            </div>
-          </div>
-
-          <!-- Lista de cores -->
-          <div style="margin-bottom: 30px; padding: 15px; border: 1px solid #e0e0e0; border-radius: 8px; background: #f9f9f9;">
-            <h4>2. Lista de Seleção de Cores</h4>
-            <div style="border: 1px solid #ddd; border-radius: 6px; background: white; overflow: hidden;">
-              <matcha-option
-                *ngFor="let color of colors"
-                [value]="color.value"
-                (optionClick)="selectColor($event)">
-                <div style="display: flex; align-items: center; gap: 10px;">
-                  <span
-                    style="width: 16px; height: 16px; border-radius: 50%; border: 1px solid #ccc;"
-                    [style.background-color]="color.value">
-                  </span>
-                  {{ color.name }}
-                </div>
-              </matcha-option>
-            </div>
-          </div>
-
-          <!-- Resultados -->
-          <div style="padding: 15px; background: #e8f5e8; border-radius: 6px; border-left: 4px solid #4caf50;">
-            <h4>📊 Demonstração em Tempo Real:</h4>
-            <p><strong>Último clique:</strong> {{ lastClick || 'Nenhum' }}</p>
-            <p><strong>Cor selecionada:</strong> {{ selectedColor || 'Nenhuma' }}</p>
-            <p><strong>✨ Clique nas opções acima para ver a interação!</strong></p>
-          </div>
-
-          <div style="margin-top: 20px; padding: 15px; background: #fff3cd; border-radius: 6px;">
-            <h4>💡 Características do matcha-option:</h4>
-            <ul style="margin: 10px 0;">
-              <li>✅ <strong>Genérico:</strong> Funciona em qualquer contexto</li>
-              <li>✅ <strong>Standalone:</strong> Pode ser usado independentemente</li>
-              <li>✅ <strong>Event-driven:</strong> Emite eventos para integração</li>
-              <li>✅ <strong>Reutilizável:</strong> Um componente para múltiplos casos</li>
-              <li>✅ <strong>Acessível:</strong> Navegação por teclado e ARIA</li>
-            </ul>
-          </div>
-        </div>
-      `,
-      props: {
-        colors,
-        lastClick,
-        selectedColor,
-        onOptionClick,
-        selectColor
-      }
-    };
-  }
-};

package/src/lib/matcha-overflow-draggable/matcha-overflow-draggable.component.html

@@ -1,3 +0,0 @@
-<div [class]="classes">
-    <ng-content></ng-content>
-</div>

package/src/lib/matcha-overflow-draggable/matcha-overflow-draggable.component.ts

@@ -1,56 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-    selector: 'matcha-overflow-draggable',
-    templateUrl: './matcha-overflow-draggable.component.html',
-    styleUrls: ['./matcha-overflow-draggable.component.scss'],
-    standalone: false
-})
-
-export class MatchaOverflowDraggableComponent {
-    @Input() dragRef: string = '';
-
-    public dragToScroll(): void {
-        const ele = document.querySelector(`matchaDraggableReference${this.dragRef}`);
-        if (ele) {
-            let pos = { top: 0, left: 0, x: 0, y: 0 };
-            const mouseDownHandler = function (e: any) {
-                pos = {
-                    // The current scroll
-                    left: ele.scrollLeft,
-                    top: ele.scrollTop,
-                    // Get the current mouse position
-                    x: e.clientX,
-                    y: e.clientY,
-                };
-                ele.setAttribute('style', 'cursor: grabbing; user-select: none');
-                document.addEventListener('mousemove', mouseMoveHandler);
-                document.addEventListener('mouseup', mouseUpHandler);
-            };
-
-            const mouseMoveHandler = function (e: any) {
-                // How far the mouse has been moved
-                const dx = e.clientX - pos.x;
-                const dy = e.clientY - pos.y;
-                // Scroll the element
-                ele.scrollTop = pos.top - dy;
-                ele.scrollLeft = pos.left - dx;
-            };
-
-            const mouseUpHandler = function () {
-                document.removeEventListener('mousemove', mouseMoveHandler);
-                document.removeEventListener('mouseup', mouseUpHandler);
-                ele.setAttribute('style', 'cursor: grab; user-select: initial');
-            };
-            ele.addEventListener('mousedown', mouseDownHandler);
-        }
-    }
-
-    public get classes(): string {
-        const draggableReference = this.dragRef ? `matchaDraggableReference${this.dragRef}` : '';
-
-        const activeClasses = `${draggableReference}`;
-        return activeClasses;
-    }
-
-}

package/src/lib/matcha-page-layout/page-layout.component.html

@@ -1,18 +0,0 @@
-<div class="page-layout carded fullwidth">
-    <!-- TOP BACKGROUND -->
-    <div class="top-bg"></div>
-    <!--/ TOP BACKGROUND -->
-
-    <!-- CENTER -->
-    <div class="center pt-24 gap-16">
-        <!-- CONTENT CARD -->
-        <div class="content-card flatten flex-column h-100-p">
-            <!-- CONTENT -->
-            <div class="content flex-column h-100-p">
-                <div class="content-card card-flat flex-column h-100-p background-bg border-radius-0 pb-16">
-                    <ng-content></ng-content>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

package/src/lib/matcha-page-layout/page-layout.component.scss

@@ -1,5 +0,0 @@
-:host{
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}

package/src/lib/matcha-page-layout/page-layout.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'matcha-page-layout',
-  templateUrl: './page-layout.component.html',
-  styleUrls: ['./page-layout.component.scss'],
-  standalone: false,
-})
-export class MatchaPageLayoutComponent {
-
-}

package/src/lib/matcha-page-layout/page-layout.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaPageLayoutComponent } from './page-layout.component';
-import { MatchaStepperModule } from '../matcha-stepper/stepper.module';
-
-
-@NgModule({
-    declarations: [
-        MatchaPageLayoutComponent
-    ],
-    imports: [
-        CommonModule,
-        MatchaStepperModule
-    ],
-    exports: [
-        MatchaPageLayoutComponent
-    ]
-})
-export class MatchaPageLayoutModule { }

package/src/lib/matcha-paginator/paginator/page-event.interface.ts

@@ -1,13 +0,0 @@
-export interface PageEvent {
-    /** The current page index. */
-    pageIndex: number;
-  
-    /** Index of the page that was selected previously. */
-    previousPageIndex?: number;
-  
-    /** The current page size. */
-    pageSize: number;
-  
-    /** The current total number of items being paged. */
-    length: number;
-  }