matcha-components 1.0.7 → 1.0.14

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

@@ -1,60 +0,0 @@
-export const sidenavArgtypes = {
-    autoFocus: {
-        description: 'Whether the drawer should focus the first focusable element automatically when opened.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    disableClose: {
-        description: 'Whether the drawer can be closed with the escape key or by clicking on the backdrop.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    mode: {
-        description: 'Mode of the drawer; one of "over", "push", or "side".',
-        control: 'select',
-        options: ['over', 'push', 'side'],
-        defaultValue: 'over',
-        table: {
-            type: { summary: 'MatDrawerMode' },
-        },
-    },
-    opened: {
-        description: 'Whether the drawer is opened.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    position: {
-        description: 'The side that the drawer is attached to.',
-        control: 'select',
-        options: ['start', 'end'],
-        defaultValue: 'start',
-        table: {
-            type: { summary: '"start" | "end"' },
-        },
-    },
-    closedStart: {
-        description: 'Event emitted when the drawer has started closing.',
-        action: 'closedStart',
-    },
-    onPositionChanged: {
-        description: "Event emitted when the drawer's position changes.",
-        action: 'onPositionChanged',
-    },
-    openedChange: {
-        description: 'Event emitted when the drawer open state is changed.',
-        action: 'openedChange',
-    },
-    openedStart: {
-        description: 'Event emitted when the drawer has started opening.',
-        action: 'openedStart',
-    },
-};

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

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

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

@@ -1,57 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./sidenav.stories";
-
-<Meta title="Atoms / Sidenav / Documentação" />
-
-# Sidenav
-
-> _sidenav_ "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">Autosize Sidenav</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.AutosizeSidenav} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <mat-drawer-container class="example-container" autosize>
-                    <mat-drawer #drawer class="example-sidenav" mode="side">
-                        <p>Auto-resizing sidenav</p>
-                        <p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
-                        <button (click)="showFiller = !showFiller" mat-raised-button>
-                        Toggle extra text
-                        </button>
-                    </mat-drawer>
-
-                    <div class="example-sidenav-content">
-                        <button type="button" mat-button (click)="drawer.toggle()">
-                        Toggle sidenav
-                        </button>
-                    </div>
-                </mat-drawer-container>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatSidenavModule} from '@angular/material/sidenav';`
-
-[Official documentation](https://https://material.angular.io/components/sidenav/overview)
-
-<br />

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

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

package/src/lib/matcha-sidenav/sidenav.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 { MatSidenavModule } from '@angular/material/sidenav';
-import { MatButtonModule } from '@angular/material/button';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { sidenavArgtypes } from './sidenav.argtypes';
-
-export default {
-    title: 'Atoms / Sidenav',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatIconModule, MatSidenavModule, MatButtonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
-        }),
-    ],
-    args: {
-        color: 'accent',
-    },
-    argTypes: sidenavArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-const showFiller = false;
-export const AutosizeSidenav: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-            showFiller,
-        },
-        template: `
-        <style>
-        .example-container {
-            width: 500px;
-            height: 300px;
-            border: 1px solid rgba(0, 0, 0, 0.5);
-        }
-
-        .example-sidenav-content {
-            display: flex;
-            height: 100%;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .example-sidenav {
-            padding: 20px;
-        }
-        </style>
-        <div class="d-flex-center-center">
-            <div class="matcha-card background-surface d-flex-column gap-16">
-                <mat-drawer-container class="example-container" autosize>
-                    <mat-drawer #drawer class="example-sidenav" mode="side">
-                    <p>Auto-resizing sidenav</p>
-                    <p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
-                        <button (click)="showFiller = !showFiller" mat-raised-button>
-                            Toggle extra text
-                        </button>
-                    </mat-drawer>
-
-                    <div class="example-sidenav-content">
-                        <button type="button" mat-button (click)="drawer.toggle()">
-                            Toggle sidenav
-                        </button>
-                    </div>
-                </mat-drawer-container>
-            </div>
-        </div>
-
-        `,
-    }),
-    name: 'Autosize sidenav',
-};

package/src/lib/matcha-slide-toggle/slide-toggle.argtype.ts

@@ -1,66 +0,0 @@
-export const slideToggleArgtypes = {
-    checked: {
-        description: 'Whether the slide toggle is checked',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            defaultValue: { summary: true },
-        },
-    },
-    color: {
-        description: 'Theme color palette',
-        control: 'select',
-        defaultValue: 'accent',
-        table: {
-            defaultValue: { summary: 'accent' },
-        },
-        options: ['primary', 'accent', 'warn'],
-    },
-    disableRipple: {
-        description: 'Whether the slide toggle is disableRipple',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            defaultValue: { summary: true },
-        },
-    },
-    disabled: {
-        description: 'Whether the slide toggle is disabled',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            defaultValue: { summary: true },
-        },
-    },
-    hideIcon: {
-        description: 'Whether the slide toggle is disabled',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            defaultValue: { summary: true },
-        },
-    },
-    labelPosition: {
-        description: 'Theme color palette',
-        control: 'select',
-        defaultValue: 'after',
-        table: {
-            defaultValue: { summary: 'after' },
-        },
-        options: ['before', 'after'],
-    },
-    label: {
-        description: 'Value of the slide toggle',
-        defaultValue: 'Slide me',
-        table: {
-            defaultValue: { summary: 'Slide me' },
-        },
-        control: 'text',
-    },
-    onChange: {
-        action: 'change',
-    },
-    toggleChange: {
-        action: 'toggleChange',
-    },
-};

package/src/lib/matcha-slide-toggle/slide-toggle.directive.ts

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

package/src/lib/matcha-slide-toggle/slide-toggle.mdx

@@ -1,92 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./slide-toggle.stories";
-
-<Meta title="Atoms / Slide Toggle / Documentação" />
-
-# Slide Toggle
-
-> _mat-slide-toggle_ "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">SlideToggle - Colors</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.SlideToggleColors} />
-            </div>
-            <div class="d-flex-column">
-                ```html
-                <mat-slide-toggle matcha-slide-toggle checked="true" color="primary">primary</mat-slide-toggle>
-                <mat-slide-toggle matcha-slide-toggle checked="true" color="accent">accent</mat-slide-toggle>
-                <mat-slide-toggle matcha-slide-toggle checked="true" color="warn">warn</mat-slide-toggle>
-                ```
-            </div>
-        </div>
-    </div>
-
-    <div class="grid-md-2 gap-16">
-        <div class="matcha-card background-surface d-flex-column gap-16">
-            <span class="h5">SlideToggle - Label Position</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.SlideToggleLabelPosition} />
-            </div>
-            <div class="d-flex-column">
-                ```html
-                <mat-slide-toggle
-                    matcha-slide-toggle
-                    checked='true'
-                    labelPosition="before">
-                    Slide-me
-                </mat-slide-toggle>
-
-                <mat-slide-toggle
-                    matcha-slide-toggle
-                    checked='true'
-                    labelPosition="after">
-                    Slide-me
-                </mat-slide-toggle>
-                ```
-            </div>
-        </div>
-
-        <div class="matcha-card background-surface d-flex-column gap-16">
-            <span class="h5">SlideToggle - Disabled</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.SlideToggleDisabled} />
-            </div>
-            <div class="d-flex-column">
-                ```html
-                <mat-slide-toggle
-                    matcha-slide-toggle
-                    checked='true'
-                    disabled='true'>
-                    Slide-me
-                </mat-slide-toggle>
-
-                <mat-slide-toggle
-                    matcha-slide-toggle
-                    checked='false'
-                    disabled="true">
-                    Slide-me
-                </mat-slide-toggle>
-                ```
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatSlideToggleModule} from '@angular/material/slide-toggle';`
-
-[Official documentation](https://material.angular.io/components/slide-toggle/overview)
-
-<br />

package/src/lib/matcha-slide-toggle/slide-toggle.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaSlideToggleDirective } from './slide-toggle.directive';
-
-@NgModule({
-  declarations: [MatchaSlideToggleDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[MatchaSlideToggleDirective]
-})
-export class MatchaSlideToggleModule { }

package/src/lib/matcha-slide-toggle/slide-toggle.stories.ts

@@ -1,167 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { action } from '@storybook/addon-actions';
-import { config } from '@storybook/addon-designs';
-
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { slideToggleArgtypes } from './slide-toggle.argtype';
-import { MatchaSlideToggleDirective } from './slide-toggle.directive';
-
-export default {
-    title: 'Atoms / Slide Toggle',
-    decorators: [
-        moduleMetadata({
-            imports: [MatSlideToggleModule],
-            declarations: [MatchaSlideToggleDirective],
-        }),
-    ],
-    args: {
-        checked: true,
-        color: 'accent',
-        disableRipple: false,
-        disabled: false,
-        hideIcon: false,
-        labelPosition: 'after',
-        label: 'Slide me',
-        onChange: action('change'),
-        toggleChange: action('toggleChange'),
-    },
-    argTypes: slideToggleArgtypes,
-    parameters: {
-        controls: {
-            expanded: false,
-        },
-        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 SlideToggleDefault: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-            <div class="d-flex gap-16">
-                <mat-slide-toggle
-                matcha-slide-toggle
-                [color]="color"
-                [checked]="checked"
-                [disabled]="disabled"
-                [hideIcon]="hideIcon"
-                [labelPosition]="labelPosition"
-                (change)="onChange($event)"
-                (toggleChange)="toggleChange('data', this.$event)">
-                {{label}}
-                </mat-slide-toggle>
-            </div>
-        `,
-    }),
-    name: 'SlideToggle Default',
-};
-
-export const SlideToggleColors: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-            <div class="d-flex gap-16">
-                <mat-slide-toggle matcha-slide-toggle (change)="onChange($event)" (toggleChange)="toggleChange('Primary', this.$event)" [checked]='checked' color="primary" [labelPosition]="labelPosition" [disabled]="disabled" [hideIcon]="hideIcon">
-                    Primary
-                </mat-slide-toggle>
-                
-                <mat-slide-toggle matcha-slide-toggle (change)="onChange($event)" (toggleChange)="toggleChange('Accent', this.$event)" [checked]='checked' color="accent" [labelPosition]="labelPosition" [disabled]="disabled" [hideIcon]="hideIcon">
-                    Accent
-                </mat-slide-toggle>
-                
-                <mat-slide-toggle matcha-slide-toggle (change)="onChange($event)" (toggleChange)="toggleChange('Warn', this.$event)" [checked]='checked' color="warn" [labelPosition]="labelPosition" [disabled]="disabled" [hideIcon]="hideIcon">
-                    Warn
-                </mat-slide-toggle>
-            </div>
-        `,
-    }),
-    parameters: {
-        controls: {
-            exclude: [
-                'color',
-                'indeterminate',
-                'required',
-                'disableRipple',
-                'label',
-            ],
-        },
-    },
-    name: 'SlideToggle Colors',
-};
-
-export const SlideToggleDisabled: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <div class="d-flex gap-16">
-            <mat-slide-toggle matcha-slide-toggle checked='true' disabled="true" [hideIcon]="hideIcon">
-                {{label}}
-            </mat-slide-toggle>
-            
-            <div class="d-flex-center-center">
-                <div class="border-color-disabled br-2 h-24"></div>
-            </div>
-            
-            <mat-slide-toggle matcha-slide-toggle checked='false' disabled="true" [hideIcon]="hideIcon">
-                {{label}}
-            </mat-slide-toggle>
-        </div>
-        `,
-    }),
-    parameters: {
-        controls: {
-            exclude: [
-                'toggleChange',
-                'color',
-                'labelPosition',
-                'onChange',
-                'checked',
-                'disabled',
-                'indeterminate',
-                'required',
-                'disableRipple',
-            ],
-        },
-    },
-    name: 'SlideToggle Disabled',
-};
-
-export const SlideToggleLabelPosition: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <div class="d-flex gap-16">
-            <mat-slide-toggle matcha-slide-toggle checked="true" labelPosition="before" (change)="onChange($event)" (toggleChange)="toggleChange('data', this.$event)">
-                Label before
-            </mat-slide-toggle>
-            
-            <div class="d-flex-center-center">
-                <div class="border-color-disabled br-2 h-24"></div>
-            </div>
-            
-            <mat-slide-toggle matcha-slide-toggle checked="true" labelPosition="after" (change)="onChange($event)" (toggleChange)="toggleChange('data', this.$event)">
-                Label after
-            </mat-slide-toggle>
-        </div>
-        `,
-    }),
-    parameters: {
-        controls: {
-            exclude: [
-                'color',
-                'labelPosition',
-                'checked',
-                'disabled',
-                'indeterminate',
-                'required',
-                'disableRipple',
-                'hideIcon',
-                'label',
-            ],
-        },
-    },
-    name: 'SlideToggle Label Position',
-};

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

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

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

@@ -1,83 +0,0 @@
-export const sliderArgtypes = {
-    color: {
-        description: 'Theme color palette for the component.',
-        control: 'select',
-        options: ['primary', 'accent', 'warn'],
-        defaultValue: 'accent',
-        table: {
-            type: { summary: 'ThemePalette' },
-        },
-    },
-    disableRipple: {
-        description: 'Whether ripples are disabled.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    disabled: {
-        description: 'Whether the slider is disabled.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    discrete: {
-        description: 'Whether the slider displays a numeric value label upon pressing the thumb.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    displayWith: {
-        description: 'Function that will be used to format the value before it is displayed in the thumb label.',
-        control: null, // Como é uma função, não é necessário um controle.
-        table: {
-            disable: true,
-        },
-    },
-    max: {
-        description: 'The maximum value that the slider can have.',
-        control: 'number',
-        defaultValue: 100,
-        table: {
-            type: { summary: 'number' },
-        },
-    },
-    min: {
-        description: 'The minimum value that the slider can have.',
-        control: 'number',
-        defaultValue: 0,
-        table: {
-            type: { summary: 'number' },
-        },
-    },
-    showTickMarks: {
-        description: 'Whether the slider displays tick marks along the slider track.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    step: {
-        description: 'The values at which the thumb will snap.',
-        control: 'number',
-        defaultValue: 1,
-        table: {
-            type: { summary: 'number' },
-        },
-    },
-    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' },
-        },
-    },
-};