matcha-components 20.13.0 → 20.15.0

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

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

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

@@ -0,0 +1,22 @@
+/**
+ * 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

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

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

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

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

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

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

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

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

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

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

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

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