matcha-components 20.15.0 → 20.17.0

package/src/lib/matcha-grid/grid-argtype.ts

@@ -1,67 +0,0 @@
-export const gridArgtypes = {
-    loading: {
-        description: 'Quando o grid estiver carregando, o elemento receberá uma classe de loading',
-        control: 'boolean',
-        defaultValue: 'true',
-        table: {
-            defaultValue: { summary: 'true' },
-        },
-    },
-    breakpoint: {
-        description: 'Seleciona um ou mais breakpoints para o grid',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            defaultValue: { summary: 'sm | md | lg | xl' },
-        },
-        options: ['sm', 'md', 'lg', 'xl'],
-    },
-    col: {
-        description: 'Em quantas colunas o grid será dividido',
-        control: 'text',
-        defaultValue: 'home',
-        table: {
-            type: { summary: 'string | undefined | null' },
-        },
-    },
-    colspan: {
-        description: 'Quantidade de colunas que o elemento irá ocupar',
-        control: 'text',
-        defaultValue: 'home',
-        table: {
-            type: { summary: 'string | undefined | null' },
-        },
-    },
-    rowspan: {
-        description: 'Quantidade de linhas que o elemento irá ocupar',
-        control: 'text',
-        defaultValue: 'home',
-        table: {
-            type: { summary: 'string | undefined | null' },
-        },
-    },
-    gap: {
-        description: 'Espaçamento entre as colunas',
-        control: 'text',
-        defaultValue: 'home',
-        table: {
-            type: { summary: 'string | undefined | null' },
-        },
-    },
-    span: {
-        description: 'Select span size',
-        control: 'text',
-        defaultValue: '1',
-        table: {
-            type: { summary: 'string | undefined | null' },
-        },
-    },
-    direction: {
-        description: 'Select span direction',
-        control: 'text',
-        defaultValue: 'c',
-        table: {
-            type: { summary: 'c | r | null' },
-        },
-    },
-};

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

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

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

@@ -1,114 +0,0 @@
-import { Component, ElementRef, Input, Renderer2 } from '@angular/core';
-
-@Component({
-    selector: 'matcha-grid',
-    templateUrl: './grid.component.html',
-    styleUrls: ['./grid.component.scss'],
-    standalone: false
-})
-export class MatchaGridComponent {
-    @Input()
-    breakpoint: string = '';
-
-    @Input()
-    col: string = '';
-
-    @Input()
-    gap: string = '';
-
-    @Input()
-    class: string = '';
-
-    @Input()
-    span: string = '';
-
-    @Input()
-    rowspan: string = '';
-
-    @Input()
-    colspan: string = '';
-
-    @Input()
-    direction: string = '';
-
-    @Input()
-    loading: boolean | string = false;
-
-    private getStringSplited(inputValue: string): string[] {
-        const stringWithoutSpaces = inputValue.replace(/\s+/g, '');
-        return stringWithoutSpaces.split(',');
-    }
-
-    private getGridClasses(breakpoint: string, col: string): string {
-        const breakpoints = this.getStringSplited(breakpoint);
-        const columns = this.getStringSplited(col);
-        let breakpointClasses = '';
-        for (let i = 0; i < breakpoints.length; i++) {
-            if (breakpoints[i] === '' || breakpoints[i] === 'xs') {
-                breakpointClasses += `grid-${columns[i]} `;
-            }
-            if (breakpoints[i] === 'sm' && columns[i] !== undefined) {
-                breakpointClasses += `grid-sm-${columns[i]} `;
-            }
-            if (breakpoints[i] === 'md' && columns[i] !== undefined) {
-                breakpointClasses += `grid-md-${columns[i]} `;
-            }
-            if (breakpoints[i] === 'lg' && columns[i] !== undefined) {
-                breakpointClasses += `grid-lg-${columns[i]} `;
-            }
-            if (breakpoints[i] === 'xl' && columns[i] !== undefined) {
-                breakpointClasses += `grid-xl-${columns[i]} `;
-            }
-        }
-        return breakpointClasses;
-    }
-
-    public setColspanClasses(span: string, breakpoint: string): void {
-        if (span) {
-            const spanClasses = this.el.nativeElement.className.split(' ').filter((c: string) => c.startsWith('colspan-'));
-            spanClasses.forEach((c: string) => this.renderer.removeClass(this.el.nativeElement, c));
-            this.renderer.addClass(this.el.nativeElement, `colspan${breakpoint ? '-' + breakpoint : '-sm'}-${span}`);
-        }
-    }
-
-    public setRowspanClasses(span: string, breakpoint: string): void {
-        if (span) {
-            const spanClasses = this.el.nativeElement.className.split(' ').filter((c: string) => c.startsWith('rowspan-'));
-            spanClasses.forEach((c: string) => this.renderer.removeClass(this.el.nativeElement, c));
-            this.renderer.addClass(this.el.nativeElement, `rowspan${breakpoint ? '-' + breakpoint : '-sm'}-${span}`);
-        }
-    }
-
-    // public setRowspanClasses(rowspan: string, breakpoint: string): void {
-    //     const elementsWithRowspanClasses = this.el.nativeElement.className.split(' ').filter((c: string) => c.startsWith('rowspan-'));
-    //     elementsWithRowspanClasses.forEach((c: string) => this.renderer.removeClass(this.el.nativeElement, c));
-    //     //função que executa a adição de classe para cada breakpoint
-    //     const breakpoints = this.getStringSplited(breakpoint);
-    //     const prefix: string = ' rowspan';
-    //     const rows = this.getStringSplited(rowspan);
-    //     let rowspanClasses = '';
-    //     for (let i = 0; i < rows.length; i++) {
-    //         rowspanClasses = prefix + rows[i];
-    //     }
-    //     this.renderer.addClass(this.el.nativeElement, `${rowspanClasses}`);
-    // }
-
-    public get classes(): string {
-        this.class = 'teste';
-        const breakpoints = this.getGridClasses(this.breakpoint, this.col);
-        const activeClasses = `grid-1 ${breakpoints} gap-${this.gap} ${this.loading ? 'loading' : ''}`;
-        return activeClasses;
-    }
-
-    constructor(private el: ElementRef, private renderer: Renderer2) {}
-
-    ngOnInit() {
-        this.setColspanClasses(this.colspan, this.breakpoint);
-        this.setRowspanClasses(this.rowspan, this.breakpoint);
-    }
-
-    ngOnChanges() {
-        this.setColspanClasses(this.colspan, this.breakpoint);
-        this.setRowspanClasses(this.rowspan, this.breakpoint);
-    }
-}

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

@@ -1,60 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./grid.stories";
-
-<Meta title="Layout / Grid / Documentação" />
-
-# Grid
-
-> _grid_ "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">
-
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.GridControls} />
-            </div>
-
-            <div class="flex-column">
-
-                ```html
-                <matcha-grid name="home" color="accent" size="md"></matcha-grid>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-    <div class="flex-column">
-        <div class="matcha-card background-surface flex-column gap-16">
-
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.GridSpan} />
-            </div>
-
-            <div class="flex-column">
-
-                ```html
-                <matcha-grid name="home" color="accent" size="md"></matcha-grid>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatGridModule} from '@angular/material/grid';`
-
-[Official documentation](https://https://material.angular.io/components/grid/overview)
-
-<br />

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

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaGridComponent } from './grid.component';
-
-@NgModule({
-    declarations: [MatchaGridComponent],
-    imports: [CommonModule],
-    exports: [MatchaGridComponent],
-})
-export class MatchaGridModule {}

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

@@ -1,125 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { MatchaGridModule } from './grid.module';
-
-import { gridArgtypes } from './grid-argtype';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-
-export default {
-    title: 'Layout / Grid',
-    decorators: [
-        moduleMetadata({
-            imports: [MatchaGridModule, MatInputModule, MatFormFieldModule],
-            declarations: [],
-        }),
-    ],
-    args: {
-        breakpoint: 'sm, md, lg, xl',
-        col: '2,3,6,12',
-        gap: '16',
-        colspan: '2',
-        rowspan: '2',
-        class: 'background-surface p-24 radius-8',
-        loading: false,
-    },
-    argTypes: gridArgtypes,
-    parameters: {
-        docs: {
-            source: { type: 'code' },
-        },
-        controls: {
-            expanded: true,
-            exclude: ['mode'],
-        },
-        componentSubtitle: 'Displays an image that represents a user or organization',
-    },
-} as Meta;
-
-/** Este é o grid principal */
-export const GridControls: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <matcha-grid [breakpoint]='breakpoint' [col]='col' [gap]='gap' [class]='class' [loading]='loading'>
-
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-
-                <matcha-grid [colspan]="colspan" [rowspan]="rowspan" class="p-16 primary radius-8">colspan:{{colspan}} rowspan:{{rowspan}}</matcha-grid>
-
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-
-            </matcha-grid>
-        `,
-    }),
-    name: 'Grid Controls',
-};
-
-export const GridSpan: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <matcha-grid breakpoint='md' col='6' gap='16' class='background-surface flex-column p-16 radius-8'>
-
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-
-                <matcha-grid colspan="2" class="p-16 primary radius-8">span 4 column</matcha-grid>
-
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-
-                <matcha-grid colspan="2" rowspan="2" class="p-16 primary radius-8">span 4 row</matcha-grid>
-
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-                <div class="p-16 accent radius-8">column</div>
-
-            </matcha-grid>
-
-        `,
-    }),
-    name: 'Grid Span',
-};

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

@@ -1,12 +0,0 @@
-<button
-    matcha-button
-    [size]="size"
-    pill="true"
-    icon="true"
-    [class]="getButtonClasses()"
-    (click)="copyToClipboard()"
-    [title]="'Copiar código ' + type">
-    <matcha-icon [name]="currentIcon" [size]="size === 'tiny' ? 'small' : size"></matcha-icon>
-</button>
-
-

package/src/lib/matcha-highlight/copy-button/copy-button.component.scss

@@ -1,28 +0,0 @@
-// Estilo para posicionamento absoluto
-.position-absolute {
-  position: absolute;
-}
-
-// Estilo para posicionamento relativo
-.position-relative {
-  position: relative;
-}
-
-// Posicionamento
-.top-8 {
-  top: 8px;
-}
-
-.right-8 {
-  right: 8px;
-}
-
-// Margem
-.m-8 {
-  margin: 8px;
-}
-
-// Z-index
-.z-index-10 {
-  z-index: 10;
-}

package/src/lib/matcha-highlight/copy-button/copy-button.component.ts

@@ -1,127 +0,0 @@
-import { Component, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
-
-@Component({
-  selector: 'matcha-copy-button',
-  templateUrl: './copy-button.component.html',
-  styleUrls: ['./copy-button.component.scss'],
-  standalone: false
-})
-export class CopyButtonComponent {
-
-  @Input() type: string = 'Código';
-  @Input() size: 'tiny' | 'small' | 'medium' | 'large' = 'tiny';
-  @Input() icon: string = 'copy-out';
-  @Input() position: 'absolute' | 'relative' = 'absolute';
-  @Input() customClass: string = '';
-
-  @Output() copied = new EventEmitter<{text: string, type: string}>();
-
-  // Propriedade para controlar o ícone do botão
-  currentIcon: string = this.icon;
-  isCopied: boolean = false;
-
-  // Método para copiar código para a área de transferência
-  async copyToClipboard() {
-    // Busca o componente matcha-highlight pai
-    const highlightComponent = this.elementRef.nativeElement.closest('matcha-highlight');
-
-    // Primeiro tenta encontrar textarea (para casos onde ainda não foi processado)
-    let textarea = highlightComponent?.querySelector('textarea');
-    let textToCopy = '';
-
-    if (textarea) {
-      // Se encontrou textarea, usa o valor dela
-      textToCopy = textarea.value;
-    } else {
-      // Se não encontrou textarea, procura pelo código destacado
-      const codeElement = highlightComponent?.querySelector('code.highlight');
-      if (codeElement) {
-        textToCopy = codeElement.textContent || codeElement.innerText || '';
-      } else {
-        console.warn('Nenhum conteúdo encontrado para copiar');
-        return;
-      }
-    }
-
-    if (!textToCopy.trim()) {
-      console.warn('Conteúdo vazio para copiar');
-      return;
-    }
-
-    try {
-      await navigator.clipboard.writeText(textToCopy);
-      console.log(`Código ${this.type} copiado para a área de transferência!`);
-      this.copied.emit({ text: textToCopy, type: this.type });
-
-      // Feedback visual temporário
-      this.showCopyFeedback();
-    } catch (err) {
-      console.error('Erro ao copiar código:', err);
-      // Fallback para navegadores mais antigos
-      this.fallbackCopyToClipboard(textToCopy);
-    }
-  }
-
-  // Fallback para navegadores que não suportam clipboard API
-  private fallbackCopyToClipboard(textToCopy: string) {
-    // Cria um textarea temporário para usar o método antigo
-    const tempTextarea = document.createElement('textarea');
-    tempTextarea.value = textToCopy;
-    tempTextarea.style.position = 'fixed';
-    tempTextarea.style.left = '-999999px';
-    tempTextarea.style.top = '-999999px';
-    document.body.appendChild(tempTextarea);
-
-    tempTextarea.focus();
-    tempTextarea.select();
-    tempTextarea.setSelectionRange(0, 99999); // Para mobile
-
-    try {
-      document.execCommand('copy');
-      console.log('Código copiado para a área de transferência!');
-      this.copied.emit({ text: textToCopy, type: this.type });
-      this.showCopyFeedback();
-    } catch (err) {
-      console.error('Erro ao copiar código:', err);
-    } finally {
-      document.body.removeChild(tempTextarea);
-    }
-  }
-
-  // Feedback visual quando copiado
-  private showCopyFeedback() {
-    const button = this.elementRef.nativeElement.querySelector('button');
-    if (button) {
-      const originalText = button.title;
-      button.title = 'Copiado!';
-
-      // Muda o ícone para checked
-      this.isCopied = true;
-      this.currentIcon = 'action_done';
-
-      setTimeout(() => {
-        button.title = originalText;
-        button.style.transform = '';
-
-        // Volta para o ícone original após 2 segundos
-        setTimeout(() => {
-          this.isCopied = false;
-          this.currentIcon = this.icon;
-        }, 3000);
-      }, 1000);
-    }
-  }
-
-  // Método para obter as classes CSS do botão
-  getButtonClasses(): string {
-    let classes = `position-${this.position} top-8 right-8 m-8 z-index-10`;
-
-    if (this.customClass) {
-      classes += ` ${this.customClass}`;
-    }
-
-    return classes;
-  }
-
-  constructor(private elementRef: ElementRef) {}
-}