matcha-components 1.0.8 → 1.0.15

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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