matcha-components 1.0.5 → 1.0.7

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

@@ -0,0 +1,64 @@
+export const autocompleteArgtypes = {
+    autoActiveFirstOption: {
+        description:
+            'Whether the first option should be highlighted when the autocomplete panel is opened.',
+        defaultValue: false,
+    },
+    class: {
+        description:
+            'Classes to be applied to the autocomplete panel inside of the overlay container.',
+    },
+    disableRipple: {
+        description: 'Whether ripples are disabled.',
+    },
+    panelWidth: {
+        description:
+            'Specifies the width of the autocomplete panel. (Can be any CSS sizing value)',
+    },
+    onClosed: {
+        description:
+            'Event that is emitted when the autocomplete panel is closed.',
+        action: 'onClosed',
+    },
+    onOpened: {
+        description:
+            'Event that is emitted when the autocomplete panel is opened.',
+        action: 'onOpened',
+    },
+    onOptionActivated: {
+        description:
+            'Event that is emitted when an option is activated using the keyboard.',
+        action: 'onOptionActivated',
+    },
+    onOptionSelected: {
+        description: 'Event that is emitted when an option is selected.',
+        action: 'onOptionSelected',
+    },
+    autocompleteTriggerDisabled: {
+        description: 'Whether the autocomplete is disabled.',
+        defaultValue: false,
+    },
+    autocompleteTriggerPosition: {
+        description:
+            'Position of the autocomplete panel relative to the trigger element.',
+        options: [null, 'auto', 'above', 'below'],
+        control: { type: 'select' },
+    },
+    label: {
+        description: 'Label of the autocomplete',
+        defaultValue: 'Number',
+        table: {
+            defaultValue: { summary: 'Number' },
+        },
+        control: 'text',
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

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

@@ -0,0 +1,14 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[matcha-autocomplete]'
+})
+export class MatchaAutocompleteDirective {
+
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    ) {
+        this._renderer.addClass(this._elementRef.nativeElement,'matcha-autocomplete')
+    }
+}

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

@@ -0,0 +1,112 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./autocomplete.stories";
+
+<Meta title="Atoms / Autocomplete / Documentação" />
+
+# Autocomplete
+
+> _autocomplete_ "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">Autocomplete - Default</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.AutocompleteDefault} />
+            </div>
+
+            <div class="d-flex-column">
+                ```html
+                <form class="example-form">
+                    <mat-form-field class="example-full-width">
+                        <mat-label>Number</mat-label>
+                        <input type="text"
+                            placeholder="Pick one"
+                            aria-label="Number"
+                            matInput
+                            [formControl]="myControl"
+                            [matAutocomplete]="auto">
+                        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+                        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+                            {{option}}
+                        </mat-option>
+                        </mat-autocomplete>
+                    </mat-form-field>
+                    </form>
+                ```
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatAutocompleteModule} from '@angular/material/autocomplete';`
+
+[Official documentation](https://material.angular.io/components/autocomplete/overview)
+
+<br />
+<div class="d-flex-column gap-16">
+    <div class="d-flex-column">
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <div class="d-flex-column">
+                ```ts
+                import {Component, OnInit} from '@angular/core';
+                import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+                import {Observable} from 'rxjs';
+                import {map, startWith} from 'rxjs/operators';
+                import {NgFor, AsyncPipe} from '@angular/common';
+                import {MatAutocompleteModule} from '@angular/material/autocomplete';
+                import {MatInputModule} from '@angular/material/input';
+                import {MatFormFieldModule} from '@angular/material/form-field';
+
+                /**
+                * @title Highlight the first autocomplete option
+                */
+                @Component({
+                    selector: 'autocomplete-auto-active-first-option-example',
+                    templateUrl: 'autocomplete-auto-active-first-option-example.html',
+                    styleUrls: ['autocomplete-auto-active-first-option-example.css'],
+                    standalone: true,
+                    imports: [
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatAutocompleteModule,
+                        ReactiveFormsModule,
+                        NgFor,
+                        AsyncPipe,
+                    ],
+                })
+
+                export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
+                    myControl = new FormControl('');
+                    options: string[] = ['One', 'Two', 'Three'];
+                    filteredOptions: Observable<string[]>;
+
+                    ngOnInit() {
+                        this.filteredOptions = this.myControl.valueChanges.pipe(
+                        startWith(''),
+                        map(value => this._filter(value || '')),
+                        );
+                    }
+
+                    private _filter(value: string): string[] {
+                        const filterValue = value.toLowerCase();
+                        return this.options.filter(option => option.toLowerCase().includes(filterValue));
+                    }
+                }
+                ```
+            </div>
+        </div>
+    </div>
+
+</div>

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+
+import { MatchaAutocompleteDirective } from './autocomplete.directive';
+import { MatchaAutocompleteOverviewDirective } from './autocomplete-overview.directive';
+
+@NgModule({
+    declarations: [
+        MatchaAutocompleteDirective,
+        MatchaAutocompleteOverviewDirective,
+    ],
+    imports: [],
+    exports: [MatchaAutocompleteDirective, MatchaAutocompleteOverviewDirective],
+})
+export class MatchaAutocompleteModule {}

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

@@ -0,0 +1,104 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { NgFor, AsyncPipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { map, startWith } from 'rxjs';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { autocompleteArgtypes } from './autocomplete.argtypes';
+import { AutocompleteAutoActiveFirstOptionExample } from './example/autocomplete-auto-active-first-option-example';
+import { AutocompleteOverviewExample } from './example/autocomplete-overview-example';
+import { MatchaAutocompleteModule } from './autocomplete.module';
+
+export default {
+    title: 'Atoms / Autocomplete',
+    component: AutocompleteOverviewExample,
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+        moduleMetadata({
+            imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule, MatAutocompleteModule, ReactiveFormsModule, NgFor, AsyncPipe, MatchaAutocompleteModule],
+        }),
+    ],
+    // tags: ['autodocs'],
+    args: {
+        label: 'Number',
+        autoActiveFirstOption: false,
+        class: '',
+        color: 'accent',
+        disableRipple: false,
+        panelWidth: '',
+        autocompleteTriggerDisabled: false,
+        autocompleteTriggerPosition: 'auto',
+    },
+    argTypes: autocompleteArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+function _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
+    return options.filter((option) => option.toLowerCase().includes(filterValue));
+}
+
+const myControl = new FormControl();
+const options = ['One', 'Two', 'Three', 'Four'];
+const filteredOptions = myControl.valueChanges.pipe(
+    startWith(''),
+    map((value) => _filter(value || ''))
+);
+
+export const AutocompleteDefault: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            myControl,
+            options,
+            filteredOptions,
+        },
+        template: `
+        <div class="matcha-card background-surface">
+            <form>
+                <mat-form-field matcha-autocomplete appearance="outline" [color]="color">
+                    <mat-label>{{label}}</mat-label>
+                    <input type="text"
+                        placeholder="Pick one"
+                        aria-label="Number"
+                        matInput
+                        [formControl]="myControl"
+                        [matAutocomplete]="auto"
+                        [matAutocompleteDisabled]="autocompleteTriggerDisabled"
+                        [matAutocompletePosition]="autocompleteTriggerPosition">
+                    <mat-autocomplete #auto="matAutocomplete"
+                        [autoActiveFirstOption]="autoActiveFirstOption"
+                        [class]="class"
+                        [disableRipple]="disableRipple"
+                        [panelWidth]="panelWidth"
+                        (closed)="onClosed()"
+                        (opened)="onOpened()"
+                        (optionActivated)="onOptionActivated($event)"
+                        (optionSelected)="onOptionSelected($event)">
+                    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+                        {{option}}
+                    </mat-option>
+                    </mat-autocomplete>
+                </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Autocomplete Default',
+};
+
+export const AutocompleteAutoActiveFirstOptionOverview: StoryObj<AutocompleteOverviewExample> = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+    }),
+    name: 'Active First Option',
+};

package/src/lib/matcha-autocomplete/example/autocomplete-auto-active-first-option-example.css

@@ -0,0 +1,9 @@
+.example-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+
+  .example-full-width {
+    width: 100%;
+  }

package/src/lib/matcha-autocomplete/example/autocomplete-auto-active-first-option-example.html

@@ -0,0 +1,9 @@
+<form class="example-form">
+    <mat-form-field class="example-full-width" appearance="outline" [color]="color">
+        <mat-label>Number</mat-label>
+        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" />
+        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+            <mat-option *ngFor="let option of filteredOptions | async" [value]="option"> {{option}} </mat-option>
+        </mat-autocomplete>
+    </mat-form-field>
+</form>

package/src/lib/matcha-autocomplete/example/autocomplete-auto-active-first-option-example.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+import { NgFor, AsyncPipe } from '@angular/common';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+/**
+ * @title Highlight the first autocomplete option
+ */
+@Component({
+    selector: 'autocomplete-auto-active-first-option-example',
+    templateUrl: 'autocomplete-auto-active-first-option-example.html',
+    styleUrls: ['autocomplete-auto-active-first-option-example.css'],
+    standalone: true,
+    imports: [FormsModule, MatFormFieldModule, MatInputModule, MatAutocompleteModule, ReactiveFormsModule, NgFor, AsyncPipe],
+})
+export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
+    myControl = new FormControl('');
+    options: string[] = ['One', 'Two', 'Three'];
+    filteredOptions!: Observable<string[]>;
+
+    ngOnInit() {
+        this.filteredOptions = this.myControl.valueChanges.pipe(
+            startWith(''),
+            map((value) => this._filter(value || ''))
+        );
+    }
+
+    private _filter(value: string): string[] {
+        const filterValue = value.toLowerCase();
+
+        return this.options.filter((option) => option.toLowerCase().includes(filterValue));
+    }
+}

package/src/lib/matcha-autocomplete/example/autocomplete-overview-example.css

@@ -0,0 +1,19 @@
+.example-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+
+  .example-full-width {
+    width: 100%;
+  }
+
+  .example-option-img {
+    vertical-align: middle;
+    margin-right: 8px;
+  }
+
+  [dir='rtl'] .example-option-img {
+    margin-right: 0;
+    margin-left: 8px;
+  }

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

@@ -0,0 +1,17 @@
+<form class="example-form">
+    <mat-form-field class="example-full-width" appearance="outline" [color]="color">
+        <mat-label>State</mat-label>
+        <input matInput aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl" />
+        <mat-autocomplete #auto="matAutocomplete">
+            <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
+                <img alt="" class="example-option-img" [src]="state.flag" height="25" />
+                <span>{{state.name}}</span> |
+                <small>Population: {{state.population}}</small>
+            </mat-option>
+        </mat-autocomplete>
+    </mat-form-field>
+
+    <br />
+
+    <mat-slide-toggle [checked]="stateCtrl.disabled" (change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()"> Disable Input? </mat-slide-toggle>
+</form>

package/src/lib/matcha-autocomplete/example/autocomplete-overview-example.ts

@@ -0,0 +1,70 @@
+import { Component } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { NgFor, AsyncPipe } from '@angular/common';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+export interface State {
+    flag: string;
+    name: string;
+    population: string;
+}
+
+/**
+ * @title Autocomplete overview
+ */
+@Component({
+    selector: 'autocomplete-overview-example',
+    templateUrl: 'autocomplete-overview-example.html',
+    styleUrls: ['autocomplete-overview-example.css'],
+    standalone: true,
+    imports: [FormsModule, MatFormFieldModule, MatInputModule, MatAutocompleteModule, ReactiveFormsModule, NgFor, MatSlideToggleModule, AsyncPipe],
+})
+export class AutocompleteOverviewExample {
+    stateCtrl = new FormControl('');
+    filteredStates: Observable<State[]>;
+
+    states: State[] = [
+        {
+            name: 'Arkansas',
+            population: '2.978M',
+            // https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
+            flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg',
+        },
+        {
+            name: 'California',
+            population: '39.14M',
+            // https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
+            flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg',
+        },
+        {
+            name: 'Florida',
+            population: '20.27M',
+            // https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg
+            flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg',
+        },
+        {
+            name: 'Texas',
+            population: '27.47M',
+            // https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg
+            flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg',
+        },
+    ];
+
+    constructor() {
+        this.filteredStates = this.stateCtrl.valueChanges.pipe(
+            startWith(''),
+            map((state) => (state ? this._filterStates(state) : this.states.slice()))
+        );
+    }
+
+    private _filterStates(value: string): State[] {
+        const filterValue = value.toLowerCase();
+
+        return this.states.filter((state) => state.name.toLowerCase().includes(filterValue));
+    }
+}

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

@@ -0,0 +1,77 @@
+export const badgeArgtypes = {
+    matBadgeColor: {
+        description: 'The color of the badge. Can be primary, accent, or warn.',
+        control: 'select',
+        options: ['primary', 'accent', 'warn'],
+        defaultValue: 'primary',
+        table: {
+            type: { summary: 'ThemePalette' },
+        },
+    },
+    matBadge: {
+        description: 'The content for the badge',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string | number | undefined | null' },
+        },
+    },
+    matBadgeDescription: {
+        description: 'Message used to describe the decorated element via aria-describedby',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    matBadgeDisabled: {
+        description: 'Whether the component is disabled.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    matBadgeHidden: {
+        description: 'Whether the badge is hidden.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    matBadgeOverlap: {
+        description: 'Whether the badge should overlap its contents or not',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    matBadgePosition: {
+        description: 'Position the badge should reside. Accepts any combination of "above"|"below" and "before"|"after"',
+        control: 'text',
+        defaultValue: 'above after',
+        table: {
+            type: { summary: 'MatBadgePosition' },
+        },
+    },
+    matBadgeSize: {
+        description: 'Size of the badge. Can be "small", "medium", or "large".',
+        control: 'select',
+        options: ['small', 'medium', 'large'],
+        defaultValue: 'medium',
+        table: {
+            type: { summary: 'MatBadgeSize' },
+        },
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

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

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

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

@@ -0,0 +1,69 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./badge.stories";
+
+<Meta title="Atoms / Badge / Documentação" />
+
+# Badge
+
+> _badge_ "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">Badge overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.BadgeOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <div matBadge="4" matBadgeOverlap="false" class="demo-section">Text with a badge</div>
+
+                <div matBadge="1" matBadgeSize="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"
+                    matBadge="8" matBadgePosition="before" matBadgeColor="accent">
+                    Action
+                </button>
+                </div>
+
+                <div class="demo-section">
+                    Button toggles badge visibility
+                    <button mat-raised-button matBadge="7" [matBadgeHidden]="hidden" (click)="toggleBadgeVisibility()">
+                        Hide
+                    </button>
+                </div>
+
+                <div class="demo-section">
+                Icon with a badge
+                <mat-icon matBadge="15" matBadgeColor="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 {MatBadgeModule} from '@angular/material/badge';`
+
+[Official documentation](https://https://material.angular.io/components/badge/overview)
+
+<br />

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

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