matcha-components 1.0.7 → 1.0.14

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

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

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

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

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

@@ -1,53 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./paginator.stories";
-
-<Meta title="Atoms / Paginator / Documentação" />
-
-# Paginator
-
-> _paginator_ "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">Paginator Basic</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.PaginatorOverview} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <mat-form-field>
-                    <mat-label>Message</mat-label>
-                    <input matInput value="Disco party!" #message />
-                </mat-form-field>
-
-                <mat-form-field>
-                    <mat-label>Action</mat-label>
-                    <input matInput value="Dance" #action />
-                </mat-form-field>
-
-                <button mat-stroked-button (click)="openPaginator(message.value, action.value)">Show paginator</button>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';`
-
-[Official documentation](https://https://material.angular.io/components/paginator/overview)
-
-<br />

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

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

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

@@ -1,34 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { paginatorArgtypes } from './paginator.argtypes';
-import { PaginatorOverviewExample } from './paginator-overview-example.component';
-import { MatchaPaginatorModule } from './paginator.module';
-
-export default {
-    title: 'Atoms / Paginator',
-    component: PaginatorOverviewExample,
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatchaPaginatorModule],
-        }),
-    ],
-    args: {},
-    argTypes: paginatorArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const PaginatorOverview: StoryObj<PaginatorOverviewExample> = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-    }),
-    name: 'Paginator Overview',
-};

package/src/lib/matcha-progress-bar/progress-bar.argtype.ts

@@ -1,48 +0,0 @@
-export const progressBarArgtypes = {
-    bufferValue: {
-        description: 'Buffer value of the progress bar',
-        defaultValue: 0,
-        table: {
-            type: { summary: 'range' },
-            defaultValue: { summary: 75 },
-        },
-        control: {
-            type: 'range',
-            min: 0,
-            max: 100,
-            step: 1,
-        },
-    },
-    color: {
-        description: 'Theme color palette',
-        control: 'select',
-        defaultValue: 'accent',
-        table: {
-            defaultValue: { summary: 'accent' },
-        },
-        options: ['primary', 'accent', 'warn'],
-    },
-    mode: {
-        description: 'Mode of the progress bar',
-        control: 'select',
-        defaultValue: 'indeterminate',
-        table: {
-            defaultValue: { summary: 'indeterminate' },
-        },
-        options: ['determinate', 'indeterminate', 'buffer', 'query'],
-    },
-    value: {
-        description: 'Value of the progress bar',
-        defaultValue: 0,
-        table: {
-            type: { summary: 'range' },
-            defaultValue: { summary: 25 },
-        },
-        control: {
-            type: 'range',
-            min: 0,
-            max: 100,
-            step: 1,
-        },
-    },
-};

package/src/lib/matcha-progress-bar/progress-bar.directive.ts

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

package/src/lib/matcha-progress-bar/progress-bar.mdx

@@ -1,95 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./progress-bar.stories";
-
-<Meta title="Atoms / Progress Bar / Documentação" />
-
-# Progress bar
-
-> _mat-progress-bar_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
-
----
-
-### Modes
-
-<div class="grid-md-2 gap-16">
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <span class="h5">ProgressBar - Indeterminate</span>
-        <div class="matcha-card background-bg">
-            <Story of={ComponentStories.ProgressBarIndeterminate} />
-        </div>
-        <div class="d-flex-column">
-            ```html
-            <mat-progress-bar
-                matcha-progress-bar
-                color="accent"
-                mode="indeterminate"
-            ></mat-progress-bar>
-            ```
-        </div>
-    </div>
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <span class="h5">ProgressBar - Query</span>
-        <div class="matcha-card background-bg">
-            <Story of={ComponentStories.ProgressBarQuery} />
-        </div>
-        <div class="d-flex-column">
-            ```html
-            <mat-progress-bar
-                matcha-progress-bar
-                color="accent"
-                mode="query"
-            ></mat-progress-bar>
-            ```
-        </div>
-    </div>
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <span class="h5">ProgressBar - Buffer</span>
-        <div class="matcha-card background-bg">
-            <Story of={ComponentStories.ProgressBarBuffer} />
-        </div>
-        <div class="d-flex-column">
-            ```html
-                <mat-progress-bar
-                matcha-progress-bar
-                bufferValue="75"
-                color="accent"
-                mode="buffer"
-                value="25">
-            </mat-progress-bar>
-            ```
-        </div>
-    </div>
-
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <span class="h5">ProgressBar - Determinate</span>
-        <div class="matcha-card background-bg">
-            <Story of={ComponentStories.ProgressBarDeterminate} />
-        </div>
-        <div class="d-flex-column">
-            ```html
-                <mat-progress-bar
-                    matcha-progress-bar
-                    color="accent"
-                    mode="determinate"
-                    value="25">
-                </mat-progress-bar>
-            ```
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatProgressBarModule} from '@angular/material/progress-bar';`
-
-[Official documentation](https://material.angular.io/components/progress-bar/overview)
-
-<br />

package/src/lib/matcha-progress-bar/progress-bar.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaProgressBarDirective } from './progress-bar.directive';
-
-@NgModule({
-  declarations: [MatchaProgressBarDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[
-      MatchaProgressBarDirective
-  ]
-})
-export class MatchaProgressBarModule { }

package/src/lib/matcha-progress-bar/progress-bar.stories.ts

@@ -1,89 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { config } from '@storybook/addon-designs';
-
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { progressBarArgtypes } from './progress-bar.argtype';
-import { MatchaProgressBarDirective } from './progress-bar.directive';
-
-export default {
-    title: 'Atoms / Progress bar',
-    decorators: [
-        moduleMetadata({
-            imports: [MatProgressBarModule],
-            declarations: [MatchaProgressBarDirective],
-        }),
-    ],
-    args: {
-        bufferValue: 75,
-        color: 'accent',
-        value: 25,
-    },
-    argTypes: progressBarArgtypes,
-    parameters: {
-        controls: {
-            expanded: true,
-            exclude: ['mode'],
-        },
-        design: config({
-            type: 'figma',
-            url: 'https://www.figma.com/file/Enji6Zk0UvtHyt8fdOPdBx/DS-PAINEL-(Copy)?type=design&mode=design&t=IKqH3YB1sj5qgDHJ-1',
-        }),
-    },
-} as Meta;
-
-export const ProgressBarBuffer: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <mat-progress-bar
-        matcha-progress-bar
-        [bufferValue]="bufferValue"
-        [color]="color"
-        mode="buffer"
-        [value]="value"></mat-progress-bar>
-    `,
-    }),
-    name: 'Buffer',
-};
-
-export const ProgressBarQuery: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <mat-progress-bar
-        matcha-progress-bar
-        [color]="color"
-        mode="query">
-        </mat-progress-bar>
-    `,
-    }),
-    name: 'Query',
-};
-
-export const ProgressBarIndeterminate: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <mat-progress-bar
-        matcha-progress-bar
-        [color]="color"
-        mode="indeterminate">
-        </mat-progress-bar>
-    `,
-    }),
-    name: 'Indeterminate',
-};
-
-export const ProgressBarDeterminate: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <mat-progress-bar
-        matcha-progress-bar
-        [color]="color"
-        mode="determinate"
-        [value]="value"></mat-progress-bar>
-    `,
-    }),
-    name: 'Determinate',
-};

package/src/lib/matcha-progress-spinner/progress-spinner.argtype.ts

@@ -1,65 +0,0 @@
-export const progressSpinnerArgtypes = {
-    color: {
-      description: 'Theme color palette',
-      control: 'select',
-      defaultValue: 'primary',
-      table: {
-        defaultValue: { summary: 'primary' },
-      },
-      options: [
-        'primary',
-        'accent',
-        'warn',
-      ]
-    },
-    diameter: {
-      description: 'The diameter of the progress spinner (will set width and height of svg)',
-      defaultValue: 100,
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: 100 },
-      },
-      control: {
-        type: 'number'
-      }
-    },
-    mode: {
-      description: 'Mode of the progress circle',
-      control: 'select',
-      defaultValue: 'indeterminate',
-      table: {
-        defaultValue: { summary: 'indeterminate' },
-      },
-      options: [
-        'determinate',
-        'indeterminate',
-        'buffer',
-        'query'
-      ]
-    },
-    strokeWidth: {
-      description: 'Stroke width of the progress spinner',
-      defaultValue: 5,
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: 5 },
-      },
-      control: {
-        type: 'number'
-      }
-    },
-    value: {
-      description: 'Value of the progress circle',
-      defaultValue: 70,
-      table: {
-        type: { summary: 'range' },
-        defaultValue: { summary: 70 },
-      },
-      control: {
-        type: 'range',
-        min: 0,
-        max: 100,
-        step: 1
-      }
-    }
-  }

package/src/lib/matcha-progress-spinner/progress-spinner.directive.ts

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

package/src/lib/matcha-progress-spinner/progress-spinner.mdx

@@ -1,43 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./progress-spinner.stories";
-
-<Meta title="Atoms / Progress Spinner / Documentação" />
-
-# Progress Spinner
-
-> _progress-spinner_ "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">Progress Spinner overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.ProgressSpinnerOverview} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';`
-
-[Official documentation](https://https://material.angular.io/components/progress-spinner/overview)
-
-<br />

package/src/lib/matcha-progress-spinner/progress-spinner.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaProgressSpinnerDirective } from './progress-spinner.directive';
-
-@NgModule({
-  declarations: [MatchaProgressSpinnerDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[
-      MatchaProgressSpinnerDirective
-  ]
-})
-export class MatchaProgressSpinnerModule { }

package/src/lib/matcha-progress-spinner/progress-spinner.stories.ts

@@ -1,44 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { progressSpinnerArgtypes } from './progress-spinner.argtype';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatchaProgressSpinnerDirective } from './progress-spinner.directive';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { config } from '@storybook/addon-designs';
-
-export default {
-    title: 'Atoms/Progress spinner',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-        moduleMetadata({
-            imports: [MatProgressSpinnerModule],
-            declarations: [MatchaProgressSpinnerDirective],
-        }),
-    ],
-    args: {
-        color: 'primary',
-        diameter: 50,
-        strokeWidth: 5,
-        value: 70,
-    },
-    argTypes: progressSpinnerArgtypes,
-    parameters: {
-        controls: {
-            expanded: true,
-            exclude: ['mode'],
-        },
-    },
-} as Meta;
-
-/** Ce é pixuloko  ce é biruleibe? */
-export const ProgressSpinnerOverview: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-    <mat-progress-spinner matcha-progress-spinner [color]="color" mode="determinate" [value]="value" [diameter]="diameter" [strokeWidth]="strokeWidth"></mat-progress-spinner>
-    <mat-progress-spinner matcha-progress-spinner [color]="color" mode="indeterminate" [value]="value" [diameter]="diameter" [strokeWidth]="strokeWidth"></mat-progress-spinner>
-`,
-    }),
-    name: 'Progress Spinner Overview',
-};

package/src/lib/matcha-radio-button/matcha-radio-button.argtype.ts

@@ -1,85 +0,0 @@
-export const matchaRadioButtonArgtypes = {
-    color: {
-      description: 'Theme color for all of the radio buttons in the group.',
-      control: 'select',
-      defaultValue: 'primary',
-      table: {
-        defaultValue: { summary: 'primary' },
-      },
-      options: [
-        'primary',
-        'accent',
-        'warn',
-      ]
-    },
-    disabled: {
-        description: 'Whether the radio group is disabled',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            defaultValue: { summary: true },
-        },
-    },
-    labelPosition: {
-      description: 'Whether the labels should appear after or before the radio-buttons. Defaults to "after"',
-      control: 'select',
-      defaultValue: 'after',
-      table: {
-        defaultValue: { summary: 'after' },
-      },
-      options: [
-        'before',
-        'after'
-      ]
-    },
-    // strokeWidth: {
-    //   description: 'Stroke width of the progress spinner',
-    //   defaultValue: 5,
-    //   table: {
-    //     type: { summary: 'number' },
-    //     defaultValue: { summary: 5 },
-    //   },
-    //   control: {
-    //     type: 'number'
-    //   }
-    // },
-    // value: {
-    //   description: 'Value of the progress circle',
-    //   defaultValue: 70,
-    //   table: {
-    //     type: { summary: 'range' },
-    //     defaultValue: { summary: 70 },
-    //   },
-    //   control: {
-    //     type: 'range',
-    //     min: 0,
-    //     max: 100,
-    //     step: 1
-    //   }
-    // }
-  }
-
-// Whether the labels should appear after or before the radio-buttons. Defaults to 'after'
-
-// @Input()
-// name: string
-
-// Name of the radio button group. All radio buttons inside this group will use this name.
-
-// @Input()
-// required: boolean
-
-// Whether the radio group is required
-
-// @Input()
-// selected: T
-
-// The currently selected radio button. If set to a new radio button, the radio group value will be updated to match the new selected button.
-
-// @Input()
-// value: any
-
-// Value for the radio-group. Should equal the value of the selected radio button if there is a corresponding radio button with a matching value. If there is not such a corresponding radio button, this value persists to be applied in case a new radio button is added with a matching value.
-
-// @Output()
-// change: EventEmitter<MatRadioChange>

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

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