matcha-components 20.15.0 → 20.16.0

package/src/lib/matcha-drop-list/drop-list.stories.ts

@@ -1,314 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { MatchaDropListModule } from './drop-list.module';
-import { dropListArgtypes } from './drop-list-argtype';
-import { MatchaCardModule } from '../matcha-card/card.module';
-
-export default {
-    title: 'Components / Drop List',
-    decorators: [
-        moduleMetadata({
-            imports: [
-                MatchaDropListModule,
-                MatchaCardModule,
-            ],
-        }),
-    ],
-    tags: ['autodocs'],
-    args: {
-        matchaDropListData: [
-            { id: 1, title: 'Item 1', completed: false },
-            { id: 2, title: 'Item 2', completed: false },
-            { id: 3, title: 'Item 3', completed: false },
-        ],
-        matchaDropListDisabled: false,
-        matchaDropListSortingDisabled: false,
-    },
-    argTypes: dropListArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const DropListControls: StoryObj = {
-    render: (args) => {
-        // Criar uma cópia local dos dados para permitir reatividade
-        let localData = [...args['matchaDropListData']];
-
-        return {
-            props: {
-                ...args,
-                currentData: localData,
-                onSingleListDropped(event: any) {
-                    console.log('Lista única atualizada:', event);
-                    // Atualizar a propriedade local que está bindada no template
-                    (this as any)['currentData'] = [...event.data];
-                    // Também atualizar os args para manter sincronização
-                    args['matchaDropListData'] = [...event.data];
-                }
-            },
-            template: `
-
-            <div class="flex-column gap-16">
-                <h3>1. Lista Única - Apenas Ordenação</h3>
-                <p>Arraste itens entre as listas para transferi-los. As listas estão conectadas bidirecionalmente.</p>
-
-                <div class="flex-column flex-md-row gap-16 w-100-p">
-                    <!-- Lista A -->
-                    <div class="flex-column w-100-p gap-16">
-                        <h4>Lista A (To Do)</h4>
-
-                        <matcha-drop-list
-                            [matchaDropListData]="currentData"
-                            [matchaDropListDisabled]="matchaDropListDisabled"
-                            [matchaDropListSortingDisabled]="matchaDropListSortingDisabled"
-                            (matchaDropListDropped)="onSingleListDropped($event)">
-
-                            <matcha-card
-                                blockquoteColor="accent"
-                                elevation="1"
-                                blockquote="left"
-                                color="surface"
-                                alpha="false"
-                                *ngFor="let item of currentData; let i = index"
-                                matchaDrag
-                                [matchaDragData]="item">
-
-                                <div class="flex-row flex-align-center gap-16">
-                                    <span matchaDragHandle>
-                                        <span class="i-matcha-drag-bars"></span>
-                                    </span>
-
-                                    <div class="flex-space-between w-100-p">
-                                        <div class="flex-column">
-                                            <span class="fw-500 fs-14 lh-16">{{item.title}}</span>
-                                            <span class="fw-500 fs-12 lh-14">ID: {{item.id}}</span>
-                                        </div>
-
-                                        <div class="item-actions">
-                                            <span class="i-matcha-action_done" [class.completed]="item.completed"></span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </matcha-card>
-
-                        </matcha-drop-list>
-                        <details>
-                            <summary>Ver dados da Lista A</summary>
-                            <pre><code>{{currentData | json}}</code></pre>
-                        </details>
-                    </div>
-                </div>
-            </div>
-
-
-            `,
-        };
-    },
-    name: 'Drop List Controls',
-};
-
-export const ConnectedLists: StoryObj = {
-    render: () => {
-        // Dados iniciais para as três listas
-        let todoListA = [
-            { id: 1, title: 'Tarefa A1', completed: false },
-            { id: 2, title: 'Tarefa A2', completed: false },
-        ];
-
-        let todoListB = [
-            { id: 3, title: 'Tarefa B1', completed: false },
-            { id: 4, title: 'Tarefa B2', completed: false },
-        ];
-
-        let completedTasks = [
-            { id: 5, title: 'Tarefa Concluída', completed: true },
-        ];
-
-        return {
-            props: {
-                todoListA,
-                todoListB,
-                completedTasks,
-
-                // Predicados de aceitação
-                canAcceptInListA(item: any, sourceContainer: any, targetContainer: any): boolean {
-                    // Lista A não aceita itens concluídos
-                    return !item.completed;
-                },
-
-                canAcceptInListB(item: any, sourceContainer: any, targetContainer: any): boolean {
-                    // Lista B aceita qualquer item não concluído
-                    return !item.completed;
-                },
-
-                canAcceptInCompleted(item: any, sourceContainer: any, targetContainer: any): boolean {
-                    // Lista de concluídos aceita qualquer item
-                    return true;
-                },
-
-                // Handlers de eventos
-                onListADropped(event: any) {
-                    console.log('Lista A atualizada:', event);
-                    (this as any)['todoListA'] = [...event.data];
-                },
-
-                onListBDropped(event: any) {
-                    console.log('Lista B atualizada:', event);
-                    (this as any)['todoListB'] = [...event.data];
-                },
-
-                onCompletedListDropped(event: any) {
-                    console.log('Lista de Concluídos atualizada:', event);
-                    (this as any)['completedTasks'] = [...event.data];
-
-                    // Marcar itens como concluídos quando movidos para lista de concluídos
-                    if (event.previousContainer !== event.container) {
-                        event.item.completed = true;
-                    }
-                }
-            },
-            template: `
-                <div class="flex-column gap-16">
-                    <h3>2. Listas Conectadas - Lista A ↔ Lista B ↔ Concluídos</h3>
-                    <p>Arraste itens entre as listas para transferi-los. As listas estão conectadas bidirecionalmente.</p>
-
-                    <div class="flex-column flex-md-row gap-16 w-100-p">
-                        <!-- Lista A -->
-                        <div class="flex-column w-100-p gap-16">
-                            <h4>Lista A (To Do)</h4>
-                            <matcha-drop-list
-                                #listA
-                                [matchaDropListData]="todoListA"
-                                [matchaDropListConnectedTo]="[listB, completedList]"
-                                [matchaDropListAcceptPredicate]="canAcceptInListA"
-                                (matchaDropListDropped)="onListADropped($event)">
-
-                                <matcha-card
-                                    blockquoteColor="yellow"
-                                    elevation="1"
-                                    blockquote="left"
-                                    color="surface"
-                                    alpha="false"
-                                    *ngFor="let item of todoListA; let i = index"
-                                    matchaDrag
-                                    [matchaDragData]="item">
-
-                                    <div class="flex-row flex-align-center gap-16">
-                                        <span matchaDragHandle>
-                                            <span class="i-matcha-drag-dots"></span>
-                                        </span>
-                                        <div class="flex-column">
-                                            <span class="fw-500 fs-14 lh-16">{{item.title}}</span>
-                                            <span class="fw-500 fs-12 lh-14">ID: {{item.id}}</span>
-                                        </div>
-                                    </div>
-                                </matcha-card>
-
-                                <!-- Placeholder quando lista vazia -->
-                                <div *ngIf="todoListA.length === 0"
-                                     style="text-align: center; padding: 32px; color: #666;">
-                                    <p>Lista A está vazia</p>
-                                    <small>Arraste itens de outras listas para cá</small>
-                                </div>
-                            </matcha-drop-list>
-
-                            <details>
-                                <summary>Ver dados da Lista A</summary>
-                                <pre><code>{{todoListA | json}}</code></pre>
-                            </details>
-                        </div>
-
-                        <!-- Lista B -->
-                        <div class="flex-column w-100-p gap-16">
-                            <h4>Lista B (In Progress)</h4>
-                            <matcha-drop-list
-                                #listB
-                                [matchaDropListData]="todoListB"
-                                [matchaDropListConnectedTo]="[listA, completedList]"
-                                [matchaDropListAcceptPredicate]="canAcceptInListB"
-                                (matchaDropListDropped)="onListBDropped($event)">
-
-                                <matcha-card
-                                    blockquoteColor="blue"
-                                    elevation="1"
-                                    blockquote="left"
-                                    color="surface"
-                                    alpha="false"
-                                    *ngFor="let item of todoListB; let i = index"
-                                    matchaDrag
-                                    [matchaDragData]="item">
-
-                                    <div class="flex-row flex-align-center gap-16">
-                                        <span matchaDragHandle>
-                                            <span class="i-matcha-drag-dots"></span>
-                                        </span>
-                                        <div class="flex-column">
-                                            <span class="fw-500 fs-14 lh-16">{{item.title}}</span>
-                                            <span class="fw-500 fs-12 lh-14">ID: {{item.id}}</span>
-                                        </div>
-                                    </div>
-                                </matcha-card>
-
-                                <div *ngIf="todoListB.length === 0"
-                                     style="text-align: center; padding: 32px; color: #666;">
-                                    <p>Lista B está vazia</p>
-                                    <small>Arraste itens de outras listas para cá</small>
-                                </div>
-                            </matcha-drop-list>
-
-                            <details>
-                                <summary>Ver dados da Lista B</summary>
-                                <pre><code>{{todoListB | json}}</code></pre>
-                            </details>
-                        </div>
-
-                        <!-- Lista de Concluídos -->
-                        <div class="flex-column w-100-p gap-16">
-                            <h4>Concluídos</h4>
-                            <matcha-drop-list
-                                #completedList
-                                [matchaDropListData]="completedTasks"
-                                [matchaDropListConnectedTo]="[listA, listB]"
-                                [matchaDropListAcceptPredicate]="canAcceptInCompleted"
-                                (matchaDropListDropped)="onCompletedListDropped($event)">
-
-                                <matcha-card
-                                    blockquoteColor="green"
-                                    elevation="1"
-                                    blockquote="left"
-                                    color="surface"
-                                    alpha="false"
-                                    *ngFor="let item of completedTasks; let i = index"
-                                    matchaDrag
-                                    [matchaDragData]="item">
-
-                                    <div class="flex-row flex-align-center gap-16">
-                                        <span matchaDragHandle>
-                                            <span class="i-matcha-drag-dots"></span>
-                                        </span>
-                                        <div class="flex-column">
-                                            <span class="fw-500 fs-14 lh-16">{{item.title}}</span>
-                                            <span class="fw-500 fs-12 lh-14">ID: {{item.id}} ✓</span>
-                                        </div>
-                                    </div>
-                                </matcha-card>
-
-                                <div *ngIf="completedTasks.length === 0"
-                                     style="text-align: center; padding: 32px; color: #666;">
-                                    <p>Nenhuma tarefa concluída</p>
-                                    <small>Arraste itens concluídos para cá</small>
-                                </div>
-                            </matcha-drop-list>
-
-                            <details>
-                                <summary>Ver dados dos Concluídos</summary>
-                                <pre><code>{{completedTasks | json}}</code></pre>
-                            </details>
-                        </div>
-                    </div>
-                </div>
-            `,
-        };
-    },
-    name: 'Listas Conectadas',
-};

package/src/lib/matcha-drop-list/services/drop-list.service.ts

@@ -1,30 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class MatchaDropListService {
-  private dropZones = new Map<HTMLElement, any>();
-
-  registerDropZone(element: HTMLElement, component: any) {
-    this.dropZones.set(element, component);
-  }
-
-  unregisterDropZone(element: HTMLElement) {
-    this.dropZones.delete(element);
-  }
-
-  findDropZone(element: Element | null): any {
-    while (element) {
-      if (this.dropZones.has(element as HTMLElement)) {
-        return this.dropZones.get(element as HTMLElement);
-      }
-      element = element.parentElement;
-    }
-    return null;
-  }
-
-  getAllDropZones(): any[] {
-    return Array.from(this.dropZones.values());
-  }
-}

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

@@ -1,16 +0,0 @@
-export const elevationArgtypes = {
-    elevation: {
-        description: 'Elevation value of the element',
-        defaultValue: 0,
-        table: {
-            type: { summary: 'range' },
-            defaultValue: { summary: '0' },
-        },
-        control: {
-            type: 'range',
-            min: 0,
-            max: 24,
-            step: 1,
-        },
-    },
-};

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

@@ -1,30 +0,0 @@
-import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
-
-@Directive({
-    selector: '[elevation]',
-    standalone: false
-})
-export class MatchaElevationDirective {
-    @Input('elevation') elevation: number | string = 0; // Valor padrão para elevação é 0
-
-    constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {}
-
-    ngOnChanges() {
-        // Remove qualquer classe de elevação existente
-        for (let i = 0; i <= 24; i++) {
-            this._renderer.removeClass(this._elementRef.nativeElement, `elevation-z-${i}`);
-        }
-
-        // Converte para número se for string
-        const elevationValue = typeof this.elevation === 'string'
-            ? parseInt(this.elevation, 10)
-            : this.elevation;
-
-        // Adiciona a classe de elevação correspondente
-        if (elevationValue >= 1 && elevationValue <= 24) {
-            this._renderer.addClass(this._elementRef.nativeElement, `elevation-z-${elevationValue}`);
-        } else {
-            this._renderer.addClass(this._elementRef.nativeElement, `elevation-z-0`);
-        }
-    }
-}

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

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaElevationDirective } from './elevation.directive';
-
-@NgModule({
-    declarations: [MatchaElevationDirective],
-    imports: [CommonModule],
-    exports: [MatchaElevationDirective],
-})
-export class MatchaElevationModule {}

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

@@ -1,60 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
-import { CommonModule } from '@angular/common';
-
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { elevationArgtypes } from './elevation.argtypes';
-import { MatchaElevationDirective } from './elevation.directive';
-
-export default {
-    title: 'Atoms / Elevation',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
-            declarations: [MatchaElevationDirective],
-        }),
-    ],
-    args: {
-        elevation: 2,
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        elevation: {
-            control: {
-                type: 'range',
-                min: 0,
-                max: 24,
-                step: 1,
-            },
-        },
-    },
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const ElevationOverview: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="flex-column w-500 gap-16">
-            <div class="flex-colmun">
-                <div class="matcha-card background-surface" [elevation]="elevation">Element with a elevation {{elevation}}</div>
-            </div>
-            <div class="flex-column gap-16">
-                <div class="matcha-card background-surface" elevation="1">Element with a elevation 1</div>
-                <div class="matcha-card background-surface" elevation="2">Element with a elevation 2</div>
-                <div class="matcha-card background-surface" elevation="3">Element with a elevation 3</div>
-                <div class="matcha-card background-surface" elevation="4">Element with a elevation 4</div>
-            </div>
-        </div>
-        `,
-    }),
-    name: ' Elevation Overview',
-};

package/src/lib/matcha-form-field/form-field.argtype.ts

@@ -1,21 +0,0 @@
-export const formFieldArgtypes = {
-    color: {
-        description: 'Determines the color theme of the form field component.',
-        control: 'select',
-        defaultValue: 'grey',
-        table: {
-            defaultValue: { summary: 'grey' },
-        },
-        options: ['red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'primary', 'accent', 'warn', 'brown', 'grey', 'blue-grey'],
-    },
-
-    labelColor: {
-        description: 'Determines the color theme of the form field component.',
-        control: 'select',
-        defaultValue: 'grey',
-        table: {
-            defaultValue: { summary: 'grey' },
-        },
-        options: ['red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'primary', 'accent', 'warn', 'brown', 'grey', 'blue-grey'],
-    },
-};

package/src/lib/matcha-form-field/form-field.stories.ts

@@ -1,45 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { formFieldArgtypes } from './form-field.argtype';
-import { CommonModule } from '@angular/common';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { MatchaIconModule } from '../matcha-icon/icon.module';
-import { MatchaFormFieldModule } from '../matcha-form-field/matcha-form-field.module';
-
-export default {
-    title: 'Atoms / Form field',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-        moduleMetadata({
-            imports: [CommonModule, MatchaFormFieldModule, MatchaIconModule],
-        }),
-    ],
-    tags: ['autodocs'],
-    args: {
-        color: 'grey',
-        labelColor: 'blue-grey',
-    },
-    argTypes: formFieldArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const FormFieldControls: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <matcha-form-field color="${args['color']}">
-            <matcha-label color="${args['labelColor']}">Label</matcha-label>
-            <input type="text">
-            <matcha-error>
-                Mensagem de erro
-            </matcha-error>
-        </matcha-form-field>
-        `,
-    }),
-    name: 'Form field controls',
-};

package/src/lib/matcha-form-field/matcha-error/matcha-error.component.html

@@ -1,4 +0,0 @@
-<p class="w-100-p color-red fs-12 lh-16 flex-row flex-align-center gap-4 m-0">
-    <matcha-icon name="action_sign_warning-out" size="sm"></matcha-icon>
-    <ng-content></ng-content>
-</p>

package/src/lib/matcha-form-field/matcha-error/matcha-error.component.ts

@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'matcha-error',
-    standalone: false,
-    templateUrl: './matcha-error.component.html',
-    styleUrl: './matcha-error.component.scss',
-})
-export class MatchaErrorComponent {}

package/src/lib/matcha-form-field/matcha-form-field/matcha-form-field.component.html

@@ -1,19 +0,0 @@
-<div class="flex-column gap-4">
-    <div class="matcha-form-field position-relative w-100-p min-h-40 flex-align-center" #inputSelector>
-        <div class="flex-row position-absolute w-100-p min-h-40 h-100-p">
-            <div class="matcha-form-field-border-start bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}"></div>
-            <div class="matcha-form-field-border-middle bb-2 w-auto border-color-{{color}}">
-                <ng-content select="matcha-label"></ng-content>
-            </div>
-            <div class="matcha-form-field-border-end br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}"></div>
-        </div>
-        <div class="flex-row position-relative py-8 px-12 gap-8 w-100-p">
-            <ng-content></ng-content>
-        </div>
-    </div>
-    <ng-container *ngIf="showError">
-        <ng-content select="matcha-error"></ng-content>
-    </ng-container>
-    <ng-content select="matcha-autocomplete"></ng-content>
-</div>
-<ng-content select="matcha-hint-text"></ng-content>

package/src/lib/matcha-form-field/matcha-form-field/matcha-form-field.component.ts

@@ -1,30 +0,0 @@
-import { Component, ContentChild, Input } from '@angular/core';
-import { FormControlName } from '@angular/forms';
-
-@Component({
-    selector: 'matcha-form-field',
-    standalone: false,
-    templateUrl: './matcha-form-field.component.html',
-    styleUrl: './matcha-form-field.component.scss',
-})
-export class MatchaFormFieldComponent {
-    @Input() color: 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' | 'primary' | 'accent' | 'warn' | 'brown' | 'grey' | 'blue-grey' | 'primary' | 'accent' | 'warn' = 'grey';
-
-    @Input('size') size: string | null | undefined | 'tiny' | 'small' | 'medium' | 'large' | 'huge' = null;
-
-    @Input('size-xs') sizeXs: string | null = null;
-    @Input('size-sm') sizeSm: string | null = null;
-    @Input('size-md') sizeMd: string | null = null;
-    @Input('size-lg') sizeLg: string | null = null;
-    @Input('size-xl') sizeXl: string | null = null;
-
-    @ContentChild(FormControlName) controlDir?: FormControlName;
-
-    get control() {
-        return this.controlDir?.control;
-    }
-
-    get showError(): boolean {
-        return !!this.control?.invalid && (this.control?.touched || this.control?.dirty);
-    }
-}

package/src/lib/matcha-form-field/matcha-form-field.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaFormFieldComponent } from './matcha-form-field/matcha-form-field.component';
-import { MatchaLabelComponent } from './matcha-label/matcha-label.component';
-import { MatchaErrorComponent } from './matcha-error/matcha-error.component';
-import { MatchaIconModule } from '../../lib/matcha-icon/icon.module';
-
-@NgModule({
-    declarations: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent],
-    imports: [CommonModule, MatchaIconModule],
-    exports: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent],
-})
-export class MatchaFormFieldModule {}

package/src/lib/matcha-form-field/matcha-label/matcha-label.component.html

@@ -1,7 +0,0 @@
-<label
-    class="d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}"
-    style="transform: translateY(-8px);">
-    <ng-content></ng-content>
-    <!-- <span class="pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder">*</span>
-    <span class="pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder">(Opcional)</span> -->
-</label>

package/src/lib/matcha-form-field/matcha-label/matcha-label.component.ts

@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-    selector: 'matcha-label',
-    standalone: false,
-    templateUrl: './matcha-label.component.html',
-    styleUrl: './matcha-label.component.scss',
-})
-export class MatchaLabelComponent {
-    @Input() color: 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' | 'primary' | 'accent' | 'warn' | 'brown' | 'grey' | 'blue-grey' | 'primary' | 'accent' | 'warn' = 'blue-grey';
-}