matcha-components 20.13.0 → 20.15.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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