matcha-components 1.0.8 → 1.0.15

package/src/lib/matcha-dialog2/confirmation-dialog.stories.ts.txt

@@ -1,24 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { ConfirmationDialogComponent } from './confirmation-dialog.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { defaultUsecasesParameters } from '../../../.storybook/utils';
-
-export default {
-  title: 'Usecases/Dialog',
-  component: ConfirmationDialogComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [BrowserAnimationsModule],
-    }),
-  ],
-  parameters: {
-    ...defaultUsecasesParameters,
-  },
-} as Meta;
-
-export const Template: StoryObj<ConfirmationDialogComponent> = {
-  render: (args) => ({
-    props: args,
-  }),
-  name: 'success (custom css)',
-};

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

@@ -1,18 +0,0 @@
-export const dividerArgtypes = {
-    inset: {
-        description: 'Whether the divider is an inset divider.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    vertical: {
-        description: 'Whether the divider is vertically aligned.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-};

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

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

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

@@ -1,51 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./divider.stories";
-
-<Meta title="Atoms / Divider / Documentação" />
-
-# Divider
-
-> _divider_ É um componente que permite a estilização de um separador em forma de linha com várias opções de orientação.
-
----
-
-### 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">Divider overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.DividerOverview} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-
-                <mat-list>
-                    <mat-list-item>Item 1</mat-list-item>
-                    <mat-divider></mat-divider>
-                    <mat-list-item>Item 2</mat-list-item>
-                    <mat-divider></mat-divider>
-                    <mat-list-item>Item 3</mat-list-item>
-                </mat-list>
-
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatDividerModule} from '@angular/material/divider';`
-
-[Official documentation](https://https://material.angular.io/components/divider/overview)
-
-<br />

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

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

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

@@ -1,49 +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 { MatDividerModule } from '@angular/material/divider';
-import { MatButtonModule } from '@angular/material/button';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { dividerArgtypes } from './divider.argtypes';
-import { MatchaDividerDirective } from './divider.directive';
-
-export default {
-    title: 'Atoms / Divider',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatIconModule, MatDividerModule, MatButtonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
-            declarations: [MatchaDividerDirective],
-        }),
-    ],
-    args: {
-        inset: false,
-        vertical: false,
-    },
-    argTypes: dividerArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const DividerOverview: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <mat-list>
-            <mat-list-item>Item 1</mat-list-item>
-            <mat-divider></mat-divider>
-            <mat-list-item>Item 2</mat-list-item>
-            <mat-divider></mat-divider>
-            <mat-list-item>Item 3</mat-list-item>
-        </mat-list>
-        `,
-    }),
-    name: ' Divider Overview',
-};

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

@@ -1,16 +0,0 @@
-export const elevationArgtypes = {
-    elevation: {
-        description: 'Elevation value of the element',
-        defaultValue: 0,
-        table: {
-            type: { summary: 'range' },
-            defaultValue: { summary: 0 },
-        },
-        control: {
-            type: 'range',
-            min: 0,
-            max: 24,
-            step: 1,
-        },
-    },
-};

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

@@ -1,24 +0,0 @@
-import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
-
-@Directive({
-    selector: '[elevation]',
-})
-export class MatchaElevationDirective {
-    @Input('elevation') elevation: number = 0; // Valor padrão para elevação é 0
-
-    constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {}
-
-    ngOnChanges() {
-        // Remove qualquer classe de elevação existente
-        for (let i = 0; i <= 24; i++) {
-            this._renderer.removeClass(this._elementRef.nativeElement, `elevation-z-${i}`);
-        }
-
-        // Adiciona a classe de elevação correspondente
-        if (this.elevation >= 1 && this.elevation <= 24) {
-            this._renderer.addClass(this._elementRef.nativeElement, `elevation-z-${this.elevation}`);
-        } else {
-            this._renderer.addClass(this._elementRef.nativeElement, `elevation-z-0`);
-        }
-    }
-}

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

@@ -1,50 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./elevation.stories";
-
-<Meta title="Atoms / Elevation / Documentação" />
-
-# Elevation
-
-> _elevation_ "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">Elevation overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.ElevationOverview} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <div class="d-flex-column w-500 gap-16">
-                    <div class="d-flex-column gap-16">
-                        <div class="p-16" elevation="1">Element with a elevation 1</div>
-                        <div class="p-16" elevation="2">Element with a elevation 2</div>
-                        <div class="p-16" elevation="3">Element with a elevation 3</div>
-                        <div class="p-16" elevation="4">Element with a elevation 4</div>
-                    </div>
-                </div>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatElevationModule} from '@angular/material/elevation';`
-
-[Official documentation](https://https://material.angular.io/components/elevation/overview)
-
-<br />

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

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

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

@@ -1,50 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
-import { CommonModule } from '@angular/common';
-
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { elevationArgtypes } from './elevation.argtypes';
-import { MatchaElevationDirective } from './elevation.directive';
-
-export default {
-    title: 'Atoms / Elevation',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
-            declarations: [MatchaElevationDirective],
-        }),
-    ],
-    args: {
-        elevation: 2,
-    },
-    argTypes: elevationArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const ElevationOverview: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex-column w-500 gap-16">
-            <div class="d-flex-colmun">
-                <div class="matcha-card" [elevation]="elevation">Element with a elevation {{elevation}}</div>
-            </div>
-            <div class="d-flex-column gap-16">
-                <div class="matcha-card" elevation="1">Element with a elevation 1</div>
-                <div class="matcha-card" elevation="2">Element with a elevation 2</div>
-                <div class="matcha-card" elevation="3">Element with a elevation 3</div>
-                <div class="matcha-card" elevation="4">Element with a elevation 4</div>
-            </div>
-        </div>
-        `,
-    }),
-    name: ' Elevation Overview',
-};

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

@@ -1,44 +0,0 @@
-export const expansionArgtypes = {
-    displayMode: {
-        description: 'Display mode used for all expansion panels in the accordion.',
-        control: 'select',
-        options: ['default', 'flat'],
-        defaultValue: 'default',
-        table: {
-            type: { summary: 'MatAccordionDisplayMode' },
-        },
-    },
-    hideToggle: {
-        description: 'Whether the expansion indicator should be hidden.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    multi: {
-        description: 'Whether the accordion should allow multiple expanded accordion items simultaneously.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    togglePosition: {
-        description: 'The position of the expansion indicator.',
-        control: 'select',
-        options: ['before', 'after'],
-        defaultValue: 'before',
-        table: {
-            type: { summary: 'MatAccordionTogglePosition' },
-        },
-    },
-    id: {
-        description: 'A readonly id value to use for unique selection coordination.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-};

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

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

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

@@ -1,69 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./expansion.stories";
-
-<Meta title="Atoms / Expansion / Documentação" />
-
-# Expansion
-
-> _expansion_ "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">Expansion overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.ExpansionOverview} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-
-                <mat-accordion>
-                    <mat-expansion-panel hideToggle>
-                        <mat-expansion-panel-header>
-                        <mat-panel-title>
-                            This is the expansion title
-                        </mat-panel-title>
-                        <mat-panel-description>
-                            This is a summary of the content
-                        </mat-panel-description>
-                        </mat-expansion-panel-header>
-                        <p>This is the primary content of the panel.</p>
-                    </mat-expansion-panel>
-                    <mat-expansion-panel (opened)="panelOpenState = true"
-                                        (closed)="panelOpenState = false">
-                        <mat-expansion-panel-header>
-                        <mat-panel-title>
-                            Self aware panel
-                        </mat-panel-title>
-                        <mat-panel-description>
-                            Currently I am {{panelOpenState ? 'open' : 'closed'}}
-                        </mat-panel-description>
-                        </mat-expansion-panel-header>
-                        <p>I'm visible because I am open</p>
-                    </mat-expansion-panel>
-                </mat-accordion>
-
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatExpansionModule} from '@angular/material/expansion';`
-
-[Official documentation](https://https://material.angular.io/components/expansion/overview)
-
-<br />

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

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

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

@@ -1,67 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
-import { CommonModule } from '@angular/common';
-
-import { provideAnimations } from '@angular/platform-browser/animations';
-
-import { MatExpansionModule } from '@angular/material/expansion';
-
-import { expansionArgtypes } from './expansion.argtypes';
-import { MatchaExpansionDirective } from './expansion.directive';
-
-export default {
-    title: 'Atoms / Expansion',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatExpansionModule, NgIf, JsonPipe, NgFor, AsyncPipe],
-            declarations: [MatchaExpansionDirective],
-        }),
-    ],
-    args: {},
-    argTypes: expansionArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-const panelOpenState = false;
-export const ExpansionOverview: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <mat-accordion>
-            <mat-expansion-panel hideToggle>
-                <mat-expansion-panel-header>
-                <mat-panel-title>
-                    This is the expansion title
-                </mat-panel-title>
-                <mat-panel-description>
-                    This is a summary of the content
-                </mat-panel-description>
-                </mat-expansion-panel-header>
-                <p>This is the primary content of the panel.</p>
-            </mat-expansion-panel>
-            <mat-expansion-panel (opened)="panelOpenState = true"
-                                (closed)="panelOpenState = false">
-                <mat-expansion-panel-header>
-                <mat-panel-title>
-                    Self aware panel
-                </mat-panel-title>
-                <mat-panel-description>
-                    Currently I am {{panelOpenState ? 'open' : 'closed'}}
-                </mat-panel-description>
-                </mat-expansion-panel-header>
-                <p>I'm visible because I am open</p>
-            </mat-expansion-panel>
-        </mat-accordion>
-        `,
-    }),
-    name: ' Expansion Overview',
-};

package/src/lib/matcha-forms/form-field-argtype.ts

@@ -1,60 +0,0 @@
-export const formFieldArgtypes = {
-    appearance: {
-        description: 'The form field appearance style',
-        control: 'select',
-        defaultValue: 'standard',
-        table: {
-            defaultValue: { summary: 'outline' },
-        },
-        options: ['outline'],
-    },
-    color: {
-        description: 'Theme color palette',
-        control: 'select',
-        defaultValue: 'accent',
-        table: {
-            defaultValue: { summary: 'accent' },
-        },
-        options: ['primary', 'accent', 'warn'],
-    },
-    floatLabel: {
-        description: 'Whether the label should always float, never float or float as the user types',
-        control: 'select',
-        defaultValue: 'auto',
-        table: {
-            defaultValue: { summary: 'auto' },
-        },
-        options: ['always', 'never', 'auto'],
-    },
-    hideRequiredMarker: {
-        description: 'Whether the required marker should be hidden',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-        control: {
-            type: 'boolean',
-        },
-    },
-    hintLabel: {
-        description: 'Text for the form field hint',
-        defaultValue: '',
-        table: {
-            type: { summary: 'text' },
-            defaultValue: { summary: '' },
-        },
-        control: {
-            type: 'text',
-        },
-    },
-    alignHint: {
-        description: 'Whether to align the hint label at the start or end of the line',
-        control: 'select',
-        defaultValue: 'start',
-        table: {
-            defaultValue: { summary: 'start' },
-        },
-        options: ['start', 'end'],
-    },
-};

package/src/lib/matcha-forms/form-field.directive.ts

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

package/src/lib/matcha-forms/form-field.mdx

@@ -1,20 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import LinkTo from "@storybook/addon-links/react";
-
-import linkImage from "../../../assets/open_in_new.png";
-import * as ComponentStories from "./form-field.stories";
-
-<Meta title="Atoms / Forms / Documentação" />
-
-# Form field
-
-> _mat-form-field_ is a component used to wrap several Angular Material components and apply common Text field styles such as the underline, floating label, and hint messages.
-
-<br />
-
-## Installation
-
-`import {MatFormFieldModule} from '@angular/material/form-field';`
-
-[Official documentation](https://material.angular.io/components/form-field/overview)