matcha-components 1.0.7 → 1.0.14

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

@@ -1,69 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./tabs.stories";
-
-<Meta title="Atoms / Tabs / Documentação" />
-
-# Tabs
-
-> _tabs_ "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">Tabs overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.TabsOverview} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <div matTabs="4" matTabsOverlap="false" class="demo-section">Text with a tabs</div>
-
-                <div matTabs="1" matTabsSize="large" class="demo-section">Text with large tabs</div>
-
-                <div class="demo-section">
-                Button with a tabs on the left
-                <button mat-raised-button color="primary"
-                    matTabs="8" matTabsPosition="before" matTabsColor="accent">
-                    Action
-                </button>
-                </div>
-
-                <div class="demo-section">
-                    Button toggles tabs visibility
-                    <button mat-raised-button matTabs="7" [matTabsHidden]="hidden" (click)="toggleTabsVisibility()">
-                        Hide
-                    </button>
-                </div>
-
-                <div class="demo-section">
-                Icon with a tabs
-                <mat-icon matTabs="15" matTabsColor="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 tabs showing the number 15
-                    </span>
-                </div>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatTabsModule} from '@angular/material/tabs';`
-
-[Official documentation](https://https://material.angular.io/components/tabs/overview)
-
-<br />

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

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

package/src/lib/matcha-tabs/tabs.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 { MatTabsModule } from '@angular/material/tabs';
-import { MatButtonModule } from '@angular/material/button';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { tabsArgtypes } from './tabs.argtypes';
-
-export default {
-    title: 'Atoms / Tabs',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatIconModule, MatTabsModule, MatButtonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
-        }),
-    ],
-    args: {
-        matTabsColor: 'primary',
-    },
-    argTypes: tabsArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-let hidden = false;
-function toggleTabsVisibility() {
-    hidden = !hidden;
-}
-
-export const TabsOverview: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <mat-tab-group>
-            <mat-tab label="First"> Content 1 </mat-tab>
-            <mat-tab label="Second"> Content 2 </mat-tab>
-            <mat-tab label="Third"> Content 3 </mat-tab>
-        </mat-tab-group>
-        `,
-    }),
-    name: ' Tabs Overview',
-};

package/src/lib/matcha-tabs/tabs.stories.txt

@@ -1,18 +0,0 @@
-import {storiesOf} from '@storybook/angular';
-import {MatTabsModule} from '@angular/material/tabs';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-
-storiesOf('Tabs', module)
-  .add('Basic', () => ({
-    template: `
-    <div>
-      <mat-tab-group>
-        <mat-tab label="Tab 1">Content 1</mat-tab>
-        <mat-tab label="Tab 2">Content 2</mat-tab>
-      </mat-tab-group>
-    </div>
-    `,
-    moduleMetadata: {
-      imports: [BrowserAnimationsModule, MatTabsModule]
-    }
-  }));

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

@@ -1,20 +0,0 @@
-export const toolbarArgtypes = {
-    color: {
-        description: 'Theme color palette for the component.',
-        control: 'select',
-        options: ['primary', 'accent', 'warn'],
-        defaultValue: 'primary',
-        table: {
-            type: { summary: 'ThemePalette' },
-        },
-    },
-    defaultColor: {
-        description: 'Default color to fall back to if no value is set.',
-        control: 'select',
-        options: ['primary', 'accent', 'warn', 'undefined'],
-        defaultValue: 'undefined',
-        table: {
-            type: { summary: 'ThemePalette | undefined' },
-        },
-    },
-};

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

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

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

@@ -1,57 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./toolbar.stories";
-
-<Meta title="Atoms / Toolbar / Documentação" />
-
-# Toolbar
-
-> _toolbar_ "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">Toolbar overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.ToolbarOverview} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <p>
-                    <mat-toolbar color="primary">
-                        <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
-                        <mat-icon>menu</mat-icon>
-                        </button>
-                        <span>My App</span>
-                        <span class="example-spacer"></span>
-                        <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
-                        <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
-                        <mat-icon>share</mat-icon>
-                        </button>
-                    </mat-toolbar>
-                </p>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatToolbarModule} from '@angular/material/toolbar';`
-
-[Official documentation](https://https://material.angular.io/components/toolbar/overview)
-
-<br />

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

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

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

@@ -1,100 +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 { MatToolbarModule } from '@angular/material/toolbar';
-import { MatButtonModule } from '@angular/material/button';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { toolbarArgtypes } from './toolbar.argtypes';
-
-export default {
-    title: 'Atoms / Toolbar',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatIconModule, MatToolbarModule, MatButtonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
-        }),
-    ],
-    args: {
-        color: 'primary',
-    },
-    argTypes: toolbarArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const ToolbarOverview: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <p>
-        <mat-toolbar>
-            <span>My Application</span>
-        </mat-toolbar>
-        </p>
-
-        <p>
-        <mat-toolbar>
-        <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
-            <span class="i-matcha-favorite"></span>
-        </button>
-        <span>My App</span>
-        <span class="example-spacer"></span>
-        <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
-            <span class="i-matcha-favorite"></span>
-        </button>
-        <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
-        <span class="i-matcha-favorite"></span>
-        </button>
-        </mat-toolbar>
-        </p>
-
-        <p>
-        <mat-toolbar [color]="color">
-            <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
-            <span class="i-matcha-favorite"></span>
-            </button>
-            <span>My App</span>
-            <span class="example-spacer"></span>
-            <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
-            <span class="i-matcha-favorite"></span>
-            </button>
-            <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
-            <span class="i-matcha-favorite"></span>
-            </button>
-        </mat-toolbar>
-        </p>
-
-        <p>
-        <mat-toolbar [color]="color">
-            <mat-toolbar-row>
-            <span>My App</span>
-            <span class="example-spacer"></span>
-            <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
-                <span class="i-matcha-favorite"></span>
-            </button>
-            </mat-toolbar-row>
-
-            <mat-toolbar-row>
-            <span>Second Line</span>
-            <span class="example-spacer"></span>
-            <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
-                <span class="i-matcha-favorite"></span>
-            </button>
-            <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
-                <span class="i-matcha-favorite"></span>
-            </button>
-            </mat-toolbar-row>
-        </mat-toolbar>
-        </p>
-
-        `,
-    }),
-    name: ' Toolbar Overview',
-};

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

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

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

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

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

@@ -1,69 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./tooltip.stories";
-
-<Meta title="Atoms / Tooltip / Documentação" />
-
-# Tooltip
-
-> _tooltip_ "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">Tooltip overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.TooltipOverview} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <div matTooltip="4" matTooltipOverlap="false" class="demo-section">Text with a tooltip</div>
-
-                <div matTooltip="1" matTooltipSize="large" class="demo-section">Text with large tooltip</div>
-
-                <div class="demo-section">
-                Button with a tooltip on the left
-                <button mat-raised-button color="primary"
-                    matTooltip="8" matTooltipPosition="before" matTooltipColor="accent">
-                    Action
-                </button>
-                </div>
-
-                <div class="demo-section">
-                    Button toggles tooltip visibility
-                    <button mat-raised-button matTooltip="7" [matTooltipHidden]="hidden" (click)="toggleTooltipVisibility()">
-                        Hide
-                    </button>
-                </div>
-
-                <div class="demo-section">
-                Icon with a tooltip
-                <mat-icon matTooltip="15" matTooltipColor="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 tooltip showing the number 15
-                    </span>
-                </div>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatTooltipModule} from '@angular/material/tooltip';`
-
-[Official documentation](https://https://material.angular.io/components/tooltip/overview)
-
-<br />

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

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

package/src/lib/matcha-tooltip/tooltip.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 { MatTooltipModule } from '@angular/material/tooltip';
-import { MatButtonModule } from '@angular/material/button';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { tooltipArgtypes } from './tooltip.argtypes';
-
-export default {
-    title: 'Atoms / Tooltip',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatIconModule, MatTooltipModule, MatButtonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
-        }),
-    ],
-    args: {
-        matTooltipColor: 'primary',
-    },
-    argTypes: tooltipArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-let hidden = false;
-function toggleTooltipVisibility() {
-    hidden = !hidden;
-}
-
-export const TooltipOverview: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex-column w-500 gap-16">
-            <div class="d-flex">
-                <div matTooltip="4" matTooltipOverlap="false" class="demo-section">Text with a tooltip</div>
-            </div>
-            <div class="d-flex">
-                <div matTooltip="1" matTooltipSize="large" class="demo-section">Text with large tooltip</div>
-            </div>
-            <div class="d-flex">
-                <div class="demo-section">
-                    Button with a tooltip on the left
-                    <button mat-raised-button [color]="color"
-                        matTooltip="8" matTooltipPosition="before" matTooltipColor="accent">
-                        Action
-                    </button>
-                </div>
-            </div>
-            <div class="d-flex">
-                <div class="demo-section">
-                    Button toggles tooltip visibility
-                    <button mat-raised-button matTooltip="7" [matTooltipHidden]="hidden" (click)="toggleTooltipVisibility()">
-                        Hide
-                    </button>
-                </div>
-            </div>
-            <div class="d-flex">
-                <div class="demo-section">
-                Icon with a tooltip
-                <span class="i-matcha-home" matTooltip="15" matTooltipColor="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 tooltip showing the number 15
-                    </span>
-                </div>
-            </div>
-        </div>
-        `,
-    }),
-    name: ' Tooltip Overview',
-};

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

@@ -1,42 +0,0 @@
-export const treeArgtypes = {
-    disabled: {
-        description: 'Whether the component is disabled.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    data: {
-        description: "The tree node's data.",
-        control: 'object',
-        defaultValue: {},
-        table: {
-            type: { summary: 'T' },
-        },
-    },
-    defaultTabIndex: {
-        description: 'Tabindex to which to fall back to if no value is set.',
-        control: 'number',
-        defaultValue: 0,
-        table: {
-            type: { summary: 'number' },
-        },
-    },
-    isExpanded: {
-        description: 'Whether the node is expanded.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    level: {
-        description: 'The level of the tree node.',
-        control: 'number',
-        defaultValue: 0,
-        table: {
-            type: { summary: 'number' },
-        },
-    },
-};

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

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

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

@@ -1,49 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./tree.stories";
-
-<Meta title="Atoms / Tree / Documentação" />
-
-# Tree
-
-> _tree_ "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">Tree overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.TreeOverview} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-
-                <mat-tree>
-                    <mat-tree-node> parent node </mat-tree-node>
-                    <mat-tree-node> -- child node1 </mat-tree-node>
-                    <mat-tree-node> -- child node2 </mat-tree-node>
-                </mat-tree>
-
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatTreeModule} from '@angular/material/tree';`
-
-[Official documentation](https://https://material.angular.io/components/tree/overview)
-
-<br />

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

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