matcha-components 20.12.0 → 20.15.0

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

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

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

@@ -0,0 +1,77 @@
+export const badgeArgtypes = {
+    matBadgeColor: {
+        description: 'The color of the badge. Can be primary, accent, or warn.',
+        control: 'select',
+        options: ['primary', 'accent', 'warn'],
+        defaultValue: 'primary',
+        table: {
+            type: { summary: 'ThemePalette' },
+        },
+    },
+    matBadge: {
+        description: 'The content for the badge',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string | number | undefined | null' },
+        },
+    },
+    matBadgeDescription: {
+        description: 'Message used to describe the decorated element via aria-describedby',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    matBadgeDisabled: {
+        description: 'Whether the component is disabled.',
+        control: 'boolean',
+        defaultValue: 'false',
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    matBadgeHidden: {
+        description: 'Whether the badge is hidden.',
+        control: 'boolean',
+        defaultValue: 'false',
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    matBadgeOverlap: {
+        description: 'Whether the badge should overlap its contents or not',
+        control: 'boolean',
+        defaultValue: 'true',
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    matBadgePosition: {
+        description: 'Position the badge should reside. Accepts any combination of "above"|"below" and "before"|"after"',
+        control: 'text',
+        defaultValue: 'above after',
+        table: {
+            type: { summary: 'MatBadgePosition' },
+        },
+    },
+    matBadgeSize: {
+        description: 'Size of the badge. Can be "small", "medium", or "large".',
+        control: 'select',
+        options: ['small', 'medium', 'large'],
+        defaultValue: 'medium',
+        table: {
+            type: { summary: 'MatBadgeSize' },
+        },
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

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

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

package/src/lib/matcha-badge/badge.mdx

@@ -0,0 +1,69 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./badge.stories";
+
+<Meta title="TO-DO / Badge / Documentação" />
+
+# Badge
+
+> _badge_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
+
+---
+
+### Modes
+
+<div class="flex-column gap-16">
+    <div class="flex-column">
+        <div class="matcha-card background-surface flex-column gap-16">
+            <span class="h5">Visão Geral</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.BadgeOverview} />
+            </div>
+
+            <div class="flex-column">
+
+                ```html
+                <div matBadge="4" matBadgeOverlap="false" class="demo-section">Text with a badge</div>
+
+                <div matBadge="1" matBadgeSize="large" class="demo-section">Text with large badge</div>
+
+                <div class="demo-section">
+                Button with a badge on the left
+                <button mat-raised-button color="primary"
+                    matBadge="8" matBadgePosition="before" matBadgeColor="accent">
+                    Action
+                </button>
+                </div>
+
+                <div class="demo-section">
+                    Button toggles badge visibility
+                    <button mat-raised-button matBadge="7" [matBadgeHidden]="hidden" (click)="toggleBadgeVisibility()">
+                        Hide
+                    </button>
+                </div>
+
+                <div class="demo-section">
+                Icon with a badge
+                <mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
+                    <!-- Include text description of the icon's meaning for screen-readers -->
+                    <span class="cdk-visually-hidden">
+                    Example with a home icon with overlaid badge showing the number 15
+                    </span>
+                </div>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatBadgeModule} from '@angular/material/badge';`
+
+[Official documentation](https://https://material.angular.io/components/badge/overview)
+
+<br />

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

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { MatchaBadgeDirective } from './badge.directive';
+
+@NgModule({
+    declarations: [MatchaBadgeDirective],
+    imports: [],
+    exports: [MatchaBadgeDirective],
+})
+export class MatchaBadgeModule {}

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

@@ -0,0 +1,79 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { badgeArgtypes } from './badge.argtypes';
+
+export default {
+    title: 'TO-DO / Badge',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatIconModule, MatBadgeModule, MatButtonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
+        }),
+    ],
+    args: {
+        matBadgeColor: 'primary',
+    },
+    argTypes: badgeArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+let hidden = false;
+function toggleBadgeVisibility() {
+    hidden = !hidden;
+}
+
+export const BadgeOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <div class="flex-column--force w-500 gap-16">
+            <div class="d-flex">
+                <div matBadge="4" matBadgeOverlap="false" class="demo-section">Text with a badge</div>
+            </div>
+            <div class="d-flex">
+                <div matBadge="1" matBadgeSize="large" class="demo-section">Text with large badge</div>
+            </div>
+            <div class="d-flex">
+                <div class="demo-section">
+                    Button with a badge on the left
+                    <button mat-raised-button [color]="color"
+                        matBadge="8" matBadgePosition="before" matBadgeColor="accent">
+                        Action
+                    </button>
+                </div>
+            </div>
+            <div class="d-flex">
+                <div class="demo-section">
+                    Button toggles badge visibility
+                    <button mat-raised-button matBadge="7" [matBadgeHidden]="hidden" (click)="toggleBadgeVisibility()">
+                        Hide
+                    </button>
+                </div>
+            </div>
+            <div class="d-flex">
+                <div class="demo-section">
+                Icon with a badge
+                <span class="i-matcha-home" matBadge="15" matBadgeColor="warn"></span>
+                    <!-- Include text description of the icon's meaning for screen-readers -->
+                    <span class="cdk-visually-hidden">
+                    Example with a home icon with overlaid badge showing the number 15
+                    </span>
+                </div>
+            </div>
+        </div>
+        `,
+    }),
+    name: ' Badge Overview',
+};

package/src/lib/matcha-breakpoint-observable/breakpoint-observable.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaBreakpointObserver } from './breakpoint-observer.service';
+
+/**
+ * Módulo para o MatchaBreakpointObserver
+ *
+ * Este módulo fornece o serviço MatchaBreakpointObserver que pode ser usado
+ * em qualquer parte da aplicação para observar breakpoints CSS.
+ *
+ * O serviço é um singleton (providedIn: 'root') e não precisa ser importado
+ * explicitamente, mas este módulo pode ser usado para organização.
+ */
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  providers: [
+    // O serviço já é providedIn: 'root', mas incluímos aqui para clareza
+    MatchaBreakpointObserver
+  ]
+})
+export class MatchaBreakpointObservableModule { }

package/src/lib/matcha-breakpoint-observable/breakpoint-observer.service.ts

@@ -0,0 +1,215 @@
+import { Injectable, OnDestroy, PLATFORM_ID, Inject } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { BehaviorSubject, Observable, fromEvent, of } from 'rxjs';
+import { map, debounceTime, distinctUntilChanged, startWith } from 'rxjs/operators';
+
+export interface BreakpointState {
+  matches: boolean;
+  breakpoint: string;
+}
+
+/**
+ * Serviço singleton para observação de breakpoints CSS
+ * Funciona tanto no browser quanto no servidor (SSR)
+ */
+@Injectable({
+  providedIn: 'root' // Singleton garantido pelo Angular
+})
+export class MatchaBreakpointObserver implements OnDestroy {
+  private breakpointSubject = new BehaviorSubject<BreakpointState>({
+    matches: false,
+    breakpoint: ''
+  });
+
+  private resizeSubscription: any;
+  private isBrowser: boolean;
+  private currentBreakpoints = new Map<string, boolean>();
+
+  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
+    this.isBrowser = isPlatformBrowser(this.platformId);
+
+    if (this.isBrowser) {
+      this.setupResizeListener();
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.resizeSubscription) {
+      this.resizeSubscription.unsubscribe();
+    }
+  }
+
+  /**
+   * Observa um breakpoint específico
+   * @param breakpoint - String no formato CSS media query (ex: '(max-width: 768px)')
+   * @returns Observable<BreakpointState>
+   */
+  observe(breakpoint: string): Observable<BreakpointState> {
+    if (!this.isBrowser) {
+      // No servidor, retorna um observable que emite false
+      return of({ matches: false, breakpoint });
+    }
+
+    // Emite o estado inicial
+    const initialState = this.getState(breakpoint);
+
+    return this.breakpointSubject.asObservable().pipe(
+      startWith(initialState),
+      map(() => this.getState(breakpoint)),
+      distinctUntilChanged((prev, curr) =>
+        prev.matches === curr.matches && prev.breakpoint === curr.breakpoint
+      )
+    );
+  }
+
+  /**
+   * Verifica se um breakpoint específico está ativo
+   * @param breakpoint - String no formato CSS media query
+   * @returns boolean
+   */
+  isMatched(breakpoint: string): boolean {
+    if (!this.isBrowser) {
+      return false;
+    }
+    return this.checkBreakpoint(breakpoint);
+  }
+
+  /**
+   * Obtém o estado atual do breakpoint
+   * @param breakpoint - String no formato CSS media query
+   * @returns BreakpointState
+   */
+  getState(breakpoint: string): BreakpointState {
+    return {
+      matches: this.isMatched(breakpoint),
+      breakpoint
+    };
+  }
+
+  /**
+   * Observa múltiplos breakpoints simultaneamente
+   * @param breakpoints - Array de strings de breakpoints
+   * @returns Observable<Map<string, boolean>>
+   */
+  observeMultiple(breakpoints: string[]): Observable<Map<string, boolean>> {
+    if (!this.isBrowser) {
+      const emptyMap = new Map<string, boolean>();
+      breakpoints.forEach(bp => emptyMap.set(bp, false));
+      return of(emptyMap);
+    }
+
+    return this.breakpointSubject.asObservable().pipe(
+      startWith({ matches: false, breakpoint: '' }),
+      map(() => {
+        const result = new Map<string, boolean>();
+        breakpoints.forEach(bp => {
+          result.set(bp, this.checkBreakpoint(bp));
+        });
+        return result;
+      }),
+      distinctUntilChanged((prev, curr) => {
+        if (prev.size !== curr.size) return false;
+        for (const [key, value] of prev) {
+          if (curr.get(key) !== value) return false;
+        }
+        return true;
+      })
+    );
+  }
+
+  private setupResizeListener(): void {
+    if (!this.isBrowser) return;
+
+    // Usa fromEvent para criar um observable do evento resize
+    this.resizeSubscription = fromEvent(window, 'resize')
+      .pipe(
+        debounceTime(100) // Debounce para evitar muitas chamadas
+      )
+      .subscribe(() => {
+        // Limpa o cache de breakpoints
+        this.currentBreakpoints.clear();
+
+        // Emite um novo evento para forçar reavaliação
+        this.breakpointSubject.next({
+          matches: false,
+          breakpoint: ''
+        });
+      });
+  }
+
+  private checkBreakpoint(breakpoint: string): boolean {
+    if (!this.isBrowser) return false;
+
+    // Verifica cache primeiro
+    if (this.currentBreakpoints.has(breakpoint)) {
+      return this.currentBreakpoints.get(breakpoint)!;
+    }
+
+    try {
+      // Remove parênteses se existirem
+      const cleanBreakpoint = breakpoint.replace(/[()]/g, '');
+
+      // Extrai o valor numérico e a condição
+      const match = cleanBreakpoint.match(/(max-width|min-width|max-height|min-height):\s*(\d+)px/);
+
+      if (!match) {
+        console.warn(`Breakpoint inválido: ${breakpoint}`);
+        this.currentBreakpoints.set(breakpoint, false);
+        return false;
+      }
+
+      const [, condition, value] = match;
+      const numericValue = parseInt(value, 10);
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
+
+      let result = false;
+      switch (condition) {
+        case 'max-width':
+          result = windowWidth <= numericValue;
+          break;
+        case 'min-width':
+          result = windowWidth >= numericValue;
+          break;
+        case 'max-height':
+          result = windowHeight <= numericValue;
+          break;
+        case 'min-height':
+          result = windowHeight >= numericValue;
+          break;
+        default:
+          result = false;
+      }
+
+      // Armazena no cache
+      this.currentBreakpoints.set(breakpoint, result);
+      return result;
+    } catch (error) {
+      console.error('Erro ao verificar breakpoint:', error);
+      this.currentBreakpoints.set(breakpoint, false);
+      return false;
+    }
+  }
+
+  /**
+   * Método utilitário para criar breakpoints comuns
+   */
+  static createBreakpoint(width: number, condition: 'max' | 'min' = 'max'): string {
+    const prefix = condition === 'max' ? 'max-width' : 'min-width';
+    return `(${prefix}: ${width}px)`;
+  }
+
+  /**
+   * Breakpoints pré-definidos para facilitar o uso
+   */
+  static readonly BREAKPOINTS = {
+    XS: '(max-width: 480px)',
+    SM: '(max-width: 768px)',
+    MD: '(max-width: 1024px)',
+    LG: '(max-width: 1200px)',
+    XL: '(max-width: 1440px)',
+    MOBILE: '(max-width: 768px)',
+    TABLET: '(min-width: 769px) and (max-width: 1024px)',
+    DESKTOP: '(min-width: 1025px)'
+  } as const;
+}

package/src/lib/matcha-breakpoint-observable/index.ts

@@ -0,0 +1,2 @@
+export * from './breakpoint-observer.service';
+export * from './breakpoint-observable.module';

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

@@ -0,0 +1 @@
+<ng-content></ng-content>