matcha-components 1.0.8 → 1.0.15

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

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

package/src/lib/matcha-bottom-sheet/bottom-sheet-overview-example-sheet.html

@@ -1,21 +0,0 @@
-<mat-nav-list>
-    <a href="https://keep.google.com/" mat-list-item (click)="openLink($event)">
-        <span matListItemTitle>Google Keep</span>
-        <span matLine>Add to a note</span>
-    </a>
-
-    <a href="https://docs.google.com/" mat-list-item (click)="openLink($event)">
-        <span matListItemTitle>Google Docs</span>
-        <span matLine>Embed in a document</span>
-    </a>
-
-    <a href="https://plus.google.com/" mat-list-item (click)="openLink($event)">
-        <span matListItemTitle>Google Plus</span>
-        <span matLine>Share with your friends</span>
-    </a>
-
-    <a href="https://hangouts.google.com/" mat-list-item (click)="openLink($event)">
-        <span matListItemTitle>Google Hangouts</span>
-        <span matLine>Show to your coworkers</span>
-    </a>
-</mat-nav-list>

package/src/lib/matcha-bottom-sheet/bottom-sheet-overview-example.component.ts

@@ -1,34 +0,0 @@
-import { Component } from '@angular/core';
-import { MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';
-import { MatListModule } from '@angular/material/list';
-import { MatButtonModule } from '@angular/material/button';
-
-@Component({
-    selector: 'bottom-sheet-overview-example',
-    template: `<p>You have received a file called "cat-picture.jpeg".</p>
-        <button mat-raised-button (click)="openBottomSheet()">Open file</button>`,
-    standalone: true,
-    imports: [MatButtonModule, MatBottomSheetModule],
-})
-export class BottomSheetOverviewExample {
-    constructor(private _bottomSheet: MatBottomSheet) {}
-
-    openBottomSheet(): void {
-        this._bottomSheet.open(BottomSheetOverviewExampleSheet);
-    }
-}
-
-@Component({
-    selector: 'bottom-sheet-overview-example-sheet',
-    templateUrl: 'bottom-sheet-overview-example-sheet.html',
-    standalone: true,
-    imports: [MatListModule],
-})
-export class BottomSheetOverviewExampleSheet {
-    constructor(private _bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}
-
-    openLink(event: MouseEvent): void {
-        this._bottomSheetRef.dismiss();
-        event.preventDefault();
-    }
-}

package/src/lib/matcha-bottom-sheet/bottom-sheet-overview-example.html

@@ -1,2 +0,0 @@
-<p>You have received a file called "cat-picture.jpeg".</p>
-<button mat-raised-button (click)="openBottomSheet()">Open file</button>

package/src/lib/matcha-bottom-sheet/bottom-sheet.argtypes.ts

@@ -1,117 +0,0 @@
-export const bottomSheetArgtypes = {
-    ariaLabel: {
-        description: 'Aria label to assign to the bottom sheet element.',
-        control: 'text',
-        defaultValue: null,
-        table: {
-            type: { summary: 'string | null' },
-        },
-    },
-    ariaModal: {
-        description: 'Whether this is a modal bottom sheet. Used to set the aria-modal attribute.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    autoFocus: {
-        description: 'Where the bottom sheet should focus on open.',
-        control: 'select',
-        options: ['auto', 'first-tabbable', 'manual', 'none'],
-        defaultValue: 'auto',
-        table: {
-            type: { summary: 'AutoFocusTarget | string | boolean' },
-        },
-    },
-    backdropClass: {
-        description: 'Custom class for the backdrop.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    closeOnNavigation: {
-        description: 'Whether the bottom sheet should close when the user goes backwards/forwards in history.',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    data: {
-        description: 'Data being injected into the child component.',
-        control: 'object',
-        defaultValue: null,
-        table: {
-            type: { summary: 'D | null' },
-        },
-    },
-    direction: {
-        description: 'Text layout direction for the bottom sheet.',
-        control: 'select',
-        options: ['ltr', 'rtl'],
-        defaultValue: 'ltr',
-        table: {
-            type: { summary: 'Direction' },
-        },
-    },
-    disableClose: {
-        description: 'Whether the user can use escape or clicking outside to close the bottom sheet.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    hasBackdrop: {
-        description: 'Whether the bottom sheet has a backdrop.',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    panelClass: {
-        description: 'Extra CSS classes to be added to the bottom sheet container.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string | string[]' },
-        },
-    },
-    restoreFocus: {
-        description: "Whether the bottom sheet should restore focus to the previously-focused element, after it's closed.",
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    scrollStrategy: {
-        description: 'Scroll strategy to be used for the bottom sheet.',
-        control: 'text',
-        defaultValue: 'reposition',
-        table: {
-            type: { summary: 'ScrollStrategy' },
-        },
-    },
-    viewContainerRef: {
-        description: 'The view container to place the overlay for the bottom sheet into.',
-        control: 'object',
-        defaultValue: null,
-        table: {
-            type: { summary: 'ViewContainerRef' },
-        },
-    },
-    color: {
-        description: 'Theme color palette',
-        control: 'select',
-        defaultValue: 'accent',
-        table: {
-            defaultValue: { summary: 'accent' },
-        },
-        options: ['primary', 'accent', 'warn'],
-    },
-};

package/src/lib/matcha-bottom-sheet/bottom-sheet.directive.ts

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

package/src/lib/matcha-bottom-sheet/bottom-sheet.mdx

@@ -1,69 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./bottom-sheet.stories";
-
-<Meta title="Atoms / BottomSheet / Documentação" />
-
-# BottomSheet
-
-> _bottomSheet_ "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">BottomSheet overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.BottomSheetOverview} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <div matBottomSheet="4" matBottomSheetOverlap="false" class="demo-section">Text with a badge</div>
-
-                <div matBottomSheet="1" matBottomSheetSize="large" class="demo-section">Text with large badge</div>
-
-                <div class="demo-section">
-                Button with a badge on the left
-                <button mat-raised-button color="primary"
-                    matBottomSheet="8" matBottomSheetPosition="before" matBottomSheetColor="accent">
-                    Action
-                </button>
-                </div>
-
-                <div class="demo-section">
-                    Button toggles badge visibility
-                    <button mat-raised-button matBottomSheet="7" [matBottomSheetHidden]="hidden" (click)="toggleBottomSheetVisibility()">
-                        Hide
-                    </button>
-                </div>
-
-                <div class="demo-section">
-                Icon with a badge
-                <mat-icon matBottomSheet="15" matBottomSheetColor="warn">home</mat-icon>
-                    <!-- Include text description of the icon's meaning for screen-readers -->
-                    <span class="cdk-visually-hidden">
-                    Example with a home icon with overlaid badge showing the number 15
-                    </span>
-                </div>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatBottomSheetModule} from '@angular/material/bottom-sheet';`
-
-[Official documentation](https://https://material.angular.io/components/bottom-sheet/overview)
-
-<br />

package/src/lib/matcha-bottom-sheet/bottom-sheet.module.ts

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

package/src/lib/matcha-bottom-sheet/bottom-sheet.stories.ts

@@ -1,39 +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 { MatListModule } from '@angular/material/list';
-import { MatButtonModule } from '@angular/material/button';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { bottomSheetArgtypes } from './bottom-sheet.argtypes';
-import { BottomSheetOverviewExample } from './bottom-sheet-overview-example.component';
-import { MatchaBottomSheetModule } from './bottom-sheet.module';
-
-export default {
-    title: 'Atoms / BottomSheet',
-    component: BottomSheetOverviewExample,
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatIconModule, MatButtonModule, MatchaBottomSheetModule, NgIf, JsonPipe, MatListModule, NgFor, AsyncPipe],
-            declarations: [],
-        }),
-    ],
-    args: {},
-    argTypes: bottomSheetArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const BottomSheetOverview: StoryObj<BottomSheetOverviewExample> = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-    }),
-    name: 'BottomSheet Overview',
-};

package/src/lib/matcha-button/button-overview-example.component.ts

@@ -1,18 +0,0 @@
-import { Component } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatButtonModule } from '@angular/material/button';
-import { MatchaButtonModule } from './button.module';
-import { MatchaIconModule } from '../matcha-icon/icon.module';
-
-/**
- * @title Basic buttons
- */
-@Component({
-    selector: 'button-overview-example',
-    templateUrl: 'button-overview-example.html',
-    styleUrls: ['button-overview-example.scss'],
-    standalone: true,
-    imports: [MatButtonModule, MatDividerModule, MatIconModule, MatchaButtonModule, MatchaIconModule],
-})
-export class ButtonOverviewExample {}

package/src/lib/matcha-button/button-overview-example.html

@@ -1,118 +0,0 @@
-<section>
-    <div class="example-label">Basic</div>
-    <div class="example-button-row">
-        <button matcha-button [size]="size" [pill]="pill" mat-button matcha-btn-xl>Basic</button>
-        <button matcha-button [size]="size" [pill]="pill" mat-button [color]="color">{{color}}</button>
-        <button matcha-button [size]="size" [pill]="pill" mat-button disabled>Disabled</button>
-        <a matcha-button [size]="size" [pill]="pill" mat-button href="https://www.google.com/" target="_blank">Link</a>
-    </div>
-</section>
-<mat-divider></mat-divider>
-<section>
-    <div class="example-label">Raised</div>
-    <div class="example-button-row">
-        <button matcha-button [size]="size" [pill]="pill" mat-raised-button>Basic</button>
-        <button matcha-button [size]="size" [pill]="pill" mat-raised-button [color]="color">{{color}}</button>
-        <button matcha-button [size]="size" [pill]="pill" mat-raised-button disabled>Disabled</button>
-        <a matcha-button [size]="size" [pill]="pill" mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
-    </div>
-</section>
-<mat-divider></mat-divider>
-<section>
-    <div class="example-label">Stroked</div>
-    <div class="example-button-row">
-        <button matcha-button [size]="size" [pill]="pill" mat-stroked-button>Basic</button>
-        <button matcha-button [size]="size" [pill]="pill" mat-stroked-button [color]="color">{{color}}</button>
-        <button matcha-button [size]="size" [pill]="pill" mat-stroked-button disabled>Disabled</button>
-        <a matcha-button [size]="size" [pill]="pill" mat-stroked-button href="https://www.google.com/" target="_blank">Link</a>
-    </div>
-</section>
-<mat-divider></mat-divider>
-<section>
-    <div class="example-label">Flat</div>
-    <div class="example-button-row">
-        <button matcha-button [size]="size" [pill]="pill" mat-flat-button>Basic</button>
-        <button matcha-button [size]="size" [pill]="pill" mat-flat-button [color]="color">{{color}}</button>
-        <button matcha-button [size]="size" [pill]="pill" mat-flat-button disabled>Disabled</button>
-        <a matcha-button [size]="size" [pill]="pill" mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
-    </div>
-</section>
-<mat-divider></mat-divider>
-<section>
-    <div class="example-label">Icon</div>
-    <div class="example-button-row">
-        <div class="example-flex-container">
-            <button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
-                <matcha-icon [size]="size" icon="action_options"></matcha-icon>
-            </button>
-            <button mat-icon-button color="primary" aria-label="Example icon button with a home icon">
-                <matcha-icon [size]="size" icon="home"></matcha-icon>
-            </button>
-            <button mat-icon-button color="accent" aria-label="Example icon button with a menu icon">
-                <matcha-icon [size]="size" icon="menu"></matcha-icon>
-            </button>
-            <button mat-icon-button color="warn" aria-label="Example icon button with a heart icon">
-                <matcha-icon [size]="size" icon="favorite"></matcha-icon>
-            </button>
-            <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
-                <matcha-icon [size]="size" icon="smile"></matcha-icon>
-            </button>
-        </div>
-    </div>
-</section>
-<mat-divider></mat-divider>
-<section>
-    <div class="example-label">FAB</div>
-    <div class="example-button-row">
-        <div class="example-flex-container">
-            <div class="example-button-container">
-                <button mat-fab color="primary" aria-label="Example icon button with a delete icon">
-                    <matcha-icon [size]="size" icon="home"></matcha-icon>
-                </button>
-            </div>
-            <div class="example-button-container">
-                <button mat-fab color="accent" aria-label="Example icon button with a bookmark icon">
-                    <matcha-icon [size]="size" icon="menu"></matcha-icon>
-                </button>
-            </div>
-            <div class="example-button-container">
-                <button mat-fab color="warn" aria-label="Example icon button with a home icon">
-                    <matcha-icon [size]="size" icon="favorite"></matcha-icon>
-                </button>
-            </div>
-            <div class="example-button-container">
-                <button mat-fab disabled aria-label="Example icon button with a heart icon">
-                    <matcha-icon [size]="size" icon="smile"></matcha-icon>
-                </button>
-            </div>
-        </div>
-    </div>
-</section>
-<mat-divider></mat-divider>
-<section>
-    <div class="example-label">Mini FAB</div>
-    <div class="example-button-row">
-        <div class="example-flex-container">
-            <div class="example-button-container">
-                <button mat-mini-fab color="primary" aria-label="Example icon button with a menu icon">
-                    <matcha-icon [size]="size" icon="home"></matcha-icon>
-                </button>
-            </div>
-            <div class="example-button-container">
-                <button mat-mini-fab color="accent" aria-label="Example icon button with a plus one icon">
-                    <matcha-icon [size]="size" icon="menu"></matcha-icon>
-                </button>
-            </div>
-            <div class="example-button-container">
-                <button mat-mini-fab color="warn" aria-label="Example icon button with a filter list icon">
-                    <matcha-icon [size]="size" icon="favorite"></matcha-icon>
-                </button>
-            </div>
-            <div class="example-button-container">
-                <button mat-mini-fab disabled aria-label="Example icon button with a home icon">
-                    <matcha-icon [size]="size" icon="smile"></matcha-icon>
-                </button>
-            </div>
-        </div>
-    </div>
-</section>

package/src/lib/matcha-button/button-overview-example.scss

@@ -1,31 +0,0 @@
-section {
-    display: table;
-}
-
-.example-label {
-    display: table-cell;
-    font-size: 14px;
-    margin-left: 8px;
-    min-width: 120px;
-}
-
-.example-button-row {
-    display: table-cell;
-    max-width: 600px;
-}
-
-.example-button-row .mat-mdc-button-base {
-    margin: 8px 8px 8px 0;
-}
-
-.example-flex-container {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-}
-
-.example-button-container {
-    display: flex;
-    justify-content: center;
-    width: 120px;
-}

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

@@ -1,20 +0,0 @@
-export const buttonArgtypes = {
-    color: {
-        description: 'Theme color palette',
-        control: 'select',
-        defaultValue: 'accent',
-        table: {
-            defaultValue: { summary: 'accent' },
-        },
-        options: ['primary', 'accent', 'warn'],
-    },
-    size: {
-        description: 'size of the button',
-        control: 'select',
-        defaultValue: 'md',
-        table: {
-            defaultValue: { summary: 'md' },
-        },
-        options: ['xs', 'sm', 'md', 'lg', 'xl'],
-    },
-};

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

@@ -1,39 +0,0 @@
-import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
-
-@Directive({
-    selector: '[matcha-button]',
-    standalone: false,
-})
-export class MatchaButtonDirective {
-    @Input('pill') pill: boolean = false;
-    @Input('size') size: string | null = null;
-
-    constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {}
-
-    ngOnInit() {
-        this._setConfig();
-    }
-
-    ngOnChanges() {
-        this._setConfig();
-        console.log(this.size);
-    }
-
-    private _setConfig() {
-        // Remove todas as classes relacionadas ao tamanho
-        ['xs', 'sm', 'md', 'lg', 'xl'].forEach((size) => {
-            this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-${size}`);
-        });
-
-        // Adicione a classe correspondente ao novo tamanho (se houver)
-        if (this.size) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-${this.size}`);
-        }
-
-        if (this.pill) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-pill`);
-        } else {
-            this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-pill`);
-        }
-    }
-}