matcha-components 1.0.8 → 1.0.15

package/src/lib/matcha-sort-header/example/sort-overview-example.component.ts

@@ -1,67 +0,0 @@
-import { Component } from '@angular/core';
-import { Sort, MatSortModule } from '@angular/material/sort';
-import { NgFor } from '@angular/common';
-
-export interface Dessert {
-    calories: number;
-    carbs: number;
-    fat: number;
-    name: string;
-    protein: number;
-}
-
-/**
- * @title Sorting overview
- */
-@Component({
-    selector: 'sort-overview-example',
-    templateUrl: 'sort-overview-example.html',
-    styleUrls: ['sort-overview-example.css'],
-    standalone: true,
-    imports: [MatSortModule, NgFor],
-})
-export class SortOverviewExample {
-    desserts: Dessert[] = [
-        { name: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4 },
-        { name: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4 },
-        { name: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6 },
-        { name: 'Cupcake', calories: 305, fat: 4, carbs: 67, protein: 4 },
-        { name: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 4 },
-    ];
-
-    sortedData: Dessert[];
-
-    constructor() {
-        this.sortedData = this.desserts.slice();
-    }
-
-    sortData(sort: Sort) {
-        const data = this.desserts.slice();
-        if (!sort.active || sort.direction === '') {
-            this.sortedData = data;
-            return;
-        }
-
-        this.sortedData = data.sort((a, b) => {
-            const isAsc = sort.direction === 'asc';
-            switch (sort.active) {
-                case 'name':
-                    return compare(a.name, b.name, isAsc);
-                case 'calories':
-                    return compare(a.calories, b.calories, isAsc);
-                case 'fat':
-                    return compare(a.fat, b.fat, isAsc);
-                case 'carbs':
-                    return compare(a.carbs, b.carbs, isAsc);
-                case 'protein':
-                    return compare(a.protein, b.protein, isAsc);
-                default:
-                    return 0;
-            }
-        });
-    }
-}
-
-function compare(a: number | string, b: number | string, isAsc: boolean) {
-    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-}

package/src/lib/matcha-sort-header/example/sort-overview-example.css

@@ -1,3 +0,0 @@
-.mat-sort-header-container {
-    align-items: center;
-  }

package/src/lib/matcha-sort-header/example/sort-overview-example.html

@@ -1,21 +0,0 @@
-<div class="table-container">
-    <div class="table-container-shadow">
-        <table matSort (matSortChange)="sortData($event)">
-            <tr>
-                <th class="par-m" mat-sort-header="name">Dessert (100g)</th>
-                <th class="par-m" mat-sort-header="calories">Calories</th>
-                <th class="par-m" mat-sort-header="fat">Fat (g)</th>
-                <th class="par-m" mat-sort-header="carbs">Carbs (g)</th>
-                <th class="par-m" mat-sort-header="protein">Protein (g)</th>
-            </tr>
-
-            <tr *ngFor="let dessert of sortedData">
-                <td class="par-m color-label">{{dessert.name}}</td>
-                <td class="par-m color-label">{{dessert.calories}}</td>
-                <td class="par-m color-label">{{dessert.fat}}</td>
-                <td class="par-m color-label">{{dessert.carbs}}</td>
-                <td class="par-m color-label">{{dessert.protein}}</td>
-            </tr>
-        </table>
-    </div>
-</div>

package/src/lib/matcha-sort-header/sort-header.argtypes.ts

@@ -1,11 +0,0 @@
-export const sortHeaderArgtypes = {
-    color: {
-        description: 'Theme color palette',
-        control: 'select',
-        defaultValue: 'accent',
-        table: {
-            defaultValue: { summary: 'accent' },
-        },
-        options: ['primary', 'accent', 'warn'],
-    },
-};

package/src/lib/matcha-sort-header/sort-header.directive.ts

@@ -1,16 +0,0 @@
-import { Directive, ElementRef, Renderer2 } from '@angular/core';
-
-@Directive({
-  selector: '[matchaSortHeader]'
-})
-export class MatchaSortHeaderDirective {
-
-    constructor(
-        private _elementRef: ElementRef,
-        private _renderer: Renderer2
-    ) {
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-sort-header')
-    }
-
-}

package/src/lib/matcha-sort-header/sort-header.mdx

@@ -1,78 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./sort-header.stories";
-
-<Meta title="Atoms / Sort Header / Documentação" />
-
-# Sort Header
-
-> _table_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
-
----
-
-### Modes
-
-<div class="d-flex-column gap-16">
-    <div class="d-flex-column">
-        <div class="matcha-card background-surface d-flex-column gap-16">
-            <span class="h5">Sort Header Overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.SortOverview} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <div class="table-container">
-                    <div class="table-container-shadow">
-                        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
-                            <!--- Note that these columns can be defined in any order.
-                                The actual rendered columns are set as a property on the row definition" -->
-
-                            <!-- Position Column -->
-                            <ng-container matColumnDef="position">
-                                <th class="par-m" mat-header-cell *matHeaderCellDef>No.</th>
-                                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.position }}</td>
-                            </ng-container>
-
-                            <!-- Name Column -->
-                            <ng-container matColumnDef="name">
-                                <th class="par-m" mat-header-cell *matHeaderCellDef>Name</th>
-                                <td class="par-m color-blue" mat-cell *matCellDef="let element">{{ element.name }}</td>
-                            </ng-container>
-
-                            <!-- Weight Column -->
-                            <ng-container matColumnDef="weight">
-                                <th class="par-m" mat-header-cell *matHeaderCellDef>Weight</th>
-                                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.weight }}</td>
-                            </ng-container>
-
-                            <!-- Symbol Column -->
-                            <ng-container matColumnDef="symbol">
-                                <th class="par-m" mat-header-cell *matHeaderCellDef>Symbol</th>
-                                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.symbol }}</td>
-                            </ng-container>
-
-                            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-                        </table>
-                    </div>
-                </div>
-
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatSortModule} from '@angular/material/table';`
-
-[Official documentation](https://material.angular.io/components/sort/overview)
-
-<br />

package/src/lib/matcha-sort-header/sort-header.module.ts

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

package/src/lib/matcha-sort-header/sort-header.stories.ts

@@ -1,34 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { sortHeaderArgtypes } from './sort-header.argtypes';
-import { SortOverviewExample } from './example/sort-overview-example.component';
-import { MatchaSortHeaderModule } from './sort-header.module';
-
-export default {
-    title: 'Atoms / Sort Header',
-    component: SortOverviewExample,
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatchaSortHeaderModule],
-        }),
-    ],
-    args: {},
-    argTypes: sortHeaderArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const SortOverview: StoryObj<SortOverviewExample> = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-    }),
-    name: 'Sort Overview Example',
-};

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

@@ -1,92 +0,0 @@
-export const stepperArgtypes = {
-    ariaLabel: {
-        description: 'Aria label for the step.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    ariaLabelledby: {
-        description: 'Reference to the element that the step is labelled by.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    color: {
-        description: 'Theme color for the particular step.',
-        control: 'select',
-        options: ['primary', 'accent', 'warn'],
-        defaultValue: 'primary',
-        table: {
-            type: { summary: 'ThemePalette' },
-        },
-    },
-    completed: {
-        description: 'Whether the step is marked as completed.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    editable: {
-        description: 'Whether the user can return to this step once it has been marked as completed.',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    errorMessage: {
-        description: 'Error message to display when there is an error.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    hasError: {
-        description: 'Whether the step has an error.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    label: {
-        description: 'Plain text label of the step.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    optional: {
-        description: 'Whether the completion of the step is optional.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    state: {
-        description: 'State of the step.',
-        control: 'select',
-        options: ['number', 'edit', 'done'],
-        defaultValue: 'number',
-        table: {
-            type: { summary: 'StepState' },
-        },
-    },
-    stepControl: {
-        description: 'The top-level abstract control of the step.',
-        control: null,
-        defaultValue: undefined,
-        table: {
-            type: { summary: 'AbstractControlLike' },
-        },
-    },
-};

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

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

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

@@ -1,68 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./stepper.stories";
-
-<Meta title="Atoms / Stepper / Documentação" />
-
-# Stepper
-
-> _stepper_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
-
----
-
-### Modes
-
-<div class="d-flex-column gap-16">
-    <div class="d-flex-column">
-        <div class="matcha-card background-surface d-flex-column gap-16">
-            <span class="h5">Stepper overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.StepperOverview} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <div matStepper="4" matStepperOverlap="false" class="demo-section">Text with a stepper</div>
-
-                <div matStepper="1" matStepperSize="large" class="demo-section">Text with large stepper</div>
-
-                <div class="demo-section">
-                Button with a stepper on the left
-                <button mat-raised-button color="primary"
-                    matStepper="8" matStepperPosition="before" matStepperColor="accent">
-                    Action
-                </button>
-                </div>
-
-                <div class="demo-section">
-                    Button toggles stepper visibility
-                    <button mat-raised-button matStepper="7" [matStepperHidden]="hidden" (click)="toggleStepperVisibility()">
-                        Hide
-                    </button>
-                </div>
-
-                <div class="demo-section">
-                Icon with a stepper
-                <mat-icon matStepper="15" matStepperColor="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 stepper showing the number 15
-                    </span>
-                </div>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatStepperModule} from '@angular/material/stepper';`
-[Official documentation](https://https://material.angular.io/components/stepper/overview)
-
-<br />

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

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

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

@@ -1,163 +0,0 @@
-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 { provideAnimations } from '@angular/platform-browser/animations';
-import { stepperArgtypes } from './stepper.argtypes';
-
-import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatStepperModule } from '@angular/material/stepper';
-import { MatButtonModule } from '@angular/material/button';
-
-import { MatchaStepperDirective } from './stepper.directive';
-import { MatchaCardModule } from '../matcha-card/card.module';
-
-export default {
-    title: 'Atoms / Stepper',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatIconModule, MatchaCardModule, MatStepperModule, MatButtonModule, MatButtonModule, MatStepperModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgIf, JsonPipe, NgFor, AsyncPipe],
-            declarations: [MatchaStepperDirective],
-        }),
-    ],
-    args: {
-        matStepperColor: 'accent',
-    },
-    argTypes: stepperArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const StepperOverview: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <matcha-card>
-            <div mat-dialog-title class="matcha-section container pb-52 pb-sm-0">
-                <div class="d-flex-space-between mb-16">
-                    <h4 class="title m-0">
-                        <span class="title-bullet background-accent h-24 w-8"></span
-                        >Title
-                    </h4>
-                    <span
-                        class="i-matcha-action_close i-size-md cursor-pointer m-0"
-                        (click)="console.log('fui clicado')"></span>
-                </div>
-            </div>
-            <mat-stepper [linear]="isLinear" #stepper class="bullet-stepper-header-labeled">
-                <ng-template matStepLabel>Pixuloko</ng-template>
-                <mat-step>
-                    <ng-template matStepLabel>Fill out your name</ng-template>
-                    step 1
-                    <button mat-button matStepperNext>Next</button>
-                </mat-step>
-
-                <mat-step label="Fill out your address">
-                    step 2
-                    <button mat-button matStepperPrevious>Back</button>
-                    <button mat-button matStepperNext>Next</button>
-                </mat-step>
-
-                <mat-step>
-                    step 3
-                    <ng-template matStepLabel>Done</ng-template>
-                    <button mat-button matStepperPrevious>Back</button>
-                    <button mat-button (click)="stepper.reset()">Reset</button>
-                </mat-step>
-            </mat-stepper>
-        </matcha-card>
-        `,
-    }),
-    name: ' Stepper Overview',
-};
-
-export const StepperHorizontal: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <matcha-card>
-            <div mat-dialog-title class="matcha-section container pb-52 pb-sm-0">
-                <div class="d-flex-space-between mb-16">
-                    <h4 class="title m-0">
-                        <span class="title-bullet background-accent h-24 w-8"></span
-                        >Title
-                    </h4>
-                    <span
-                        class="i-matcha-action_close i-size-md cursor-pointer m-0"
-                        (click)="console.log('fui clicado')"></span>
-                </div>
-            </div>
-            <mat-stepper [linear]="isLinear" #stepper class="bullet-stepper-header-labeled">
-                <ng-template matStepLabel>Pixuloko</ng-template>
-                <mat-step>
-                    <ng-template matStepLabel>Fill out your name</ng-template>
-                    step 1
-                    <button mat-button matStepperNext>Next</button>
-                </mat-step>
-
-                <mat-step label="Fill out your address">
-                    step 2
-                    <button mat-button matStepperPrevious>Back</button>
-                    <button mat-button matStepperNext>Next</button>
-                </mat-step>
-
-                <mat-step>
-                    step 3
-                    <ng-template matStepLabel>Done</ng-template>
-                    <button mat-button matStepperPrevious>Back</button>
-                    <button mat-button (click)="stepper.reset()">Reset</button>
-                </mat-step>
-            </mat-stepper>
-        </matcha-card>
-        `,
-    }),
-    name: ' Stepper Horizontal',
-};
-
-export const StepperVertical: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <matcha-card>
-            <mat-stepper orientation="vertical" [linear]="isLinear" #stepper>
-                <mat-step [stepControl]="firstFormGroup">
-                <ng-template matStepLabel>First Step</ng-template>
-                    <div>
-                        <button mat-button matStepperNext>Next</button>
-                    </div>
-                </mat-step>
-                <mat-step [stepControl]="secondFormGroup">
-                <ng-template matStepLabel>Second Step</ng-template>
-                    <div>
-                    <button mat-button matStepperPrevious>Back</button>
-                    <button mat-button matStepperNext>Next</button>
-                    </div>
-                </mat-step>
-                <mat-step>
-                <ng-template matStepLabel>Done</ng-template>
-                <p>You are now done.</p>
-                <div>
-                    <button mat-button matStepperPrevious>Back</button>
-                    <button mat-button (click)="stepper.reset()">Reset</button>
-                </div>
-                </mat-step>
-            </mat-stepper>
-
-        </matcha-card>
-        `,
-    }),
-    name: ' Stepper Vertical',
-};

package/src/lib/matcha-table/example/table-basic-example.component.ts

@@ -1,37 +0,0 @@
-import { Component } from '@angular/core';
-import { MatTableModule } from '@angular/material/table';
-
-export interface PeriodicElement {
-    name: string;
-    position: number;
-    weight: number;
-    symbol: string;
-}
-
-const ELEMENT_DATA: PeriodicElement[] = [
-    { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
-    { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
-    { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
-    { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
-    { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
-    { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
-    { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
-    { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
-    { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
-    { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
-];
-
-/**
- * @title Basic use of `<table mat-table>`
- */
-@Component({
-    selector: 'table-basic-example',
-    styleUrls: ['table-basic-example.css'],
-    templateUrl: 'table-basic-example.html',
-    standalone: true,
-    imports: [MatTableModule],
-})
-export class TableBasicExample {
-    displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
-    dataSource = ELEMENT_DATA;
-}