matcha-components 20.12.0 → 20.15.0

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

@@ -0,0 +1,57 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./sidenav.stories";
+
+<Meta title="TO-DO / Sidenav / Documentação" />
+
+# Sidenav
+
+> _sidenav_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
+
+---
+
+### Modes
+
+<div class="flex-column gap-16">
+    <div class="flex-column">
+        <div class="matcha-card background-surface flex-column gap-16">
+            <span class="h5">Autosize Sidenav</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.AutosizeSidenav} />
+            </div>
+
+            <div class="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

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

@@ -0,0 +1,79 @@
+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: 'TO-DO / 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 flex-column--force 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-skeleton/skeleton/skeleton.component.html

@@ -0,0 +1,70 @@
+<ng-content></ng-content>
+<!-- CARD SKELETON -->
+<div [class]="classes" *ngIf="model !== 'table'">
+    <div class="skeleton-animated-background flex-column--force p-0 radius-8 user-select-none overflow-hidden" *ngFor="let i of amountArray">
+
+        <ng-container *ngIf="model === 'profile'"><span class="h8 title p-16 m-0"> <span class="radius-full background-surface-alpha h-48 w-48"></span>&nbsp;</span></ng-container>
+
+        <div [class]="'h-'+ height + ' flex-column--force p-16 background-bg-alpha'"></div>
+
+        <ng-container *ngIf="model === 'profile'">
+            <div class="flex-column--force">
+                <div class="flex-column--force p-16 gap-16">
+                    <div class="w-100-p h-16 background-surface-alpha radius-full"></div>
+                    <div class="w-100-p h-16 background-surface-alpha radius-full"></div>
+                </div>
+            </div>
+        </ng-container>
+
+    </div>
+</div>
+<!-- CARD SKELETON -->
+
+<!-- TABLE SKELETON -->
+<div class="skeleton-animated-background w-100-p mr-16 flex-column--force p-0 radius-8 user-select-none" *ngIf="model === 'table'">
+
+    <div class="flex-column--force h-64 background-surface-alpha">
+        <ng-container>&nbsp;</ng-container>
+    </div>
+
+    <ng-container *ngFor="let i of amountArray">
+        <div class="grid-4 h-80 px-16 gap-16 flex-align-center--force">
+            <div class="w-100-p flex-row--force gap-16">
+                <div class="min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full"></div>
+                <div class="w-100-p flex-column--force flex-center--force gap-16">
+                    <div class="h-16 w-60-p background-surface-alpha radius-full"></div>
+                    <div class="h-16 w-100-p background-surface-alpha radius-full"></div>
+                </div>
+            </div>
+            <div class="h-16 w-100-p flex-column--force background-surface-alpha radius-full"></div>
+            <div class="w-100-p flex-row--force gap-16">
+                <div class="w-100-p flex-column--force flex-center--force gap-16">
+                    <div class="h-16 w-60-p background-surface-alpha radius-full"></div>
+                    <div class="h-16 w-100-p background-surface-alpha radius-full"></div>
+                </div>
+            </div>
+            <div class="h-16 w-100-p flex-column--force background-surface-alpha radius-full"></div>
+        </div>
+
+        <div class="grid-4 h-80 px-16 gap-16 flex-align-center--force background-bg-alpha">
+            <div class="w-100-p flex-row--force gap-16">
+                <div class="min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full"></div>
+                <div class="w-100-p flex-column--force flex-center--force gap-16">
+                    <div class="h-16 w-100-p background-surface-alpha radius-full"></div>
+                    <div class="h-16 w-30-p background-surface-alpha radius-full"></div>
+                </div>
+            </div>
+            <div class="h-16 w-100-p flex-column--force background-surface-alpha radius-full"></div>
+            <div class="w-100-p flex-row--force gap-16">
+                <div class="w-100-p flex-column--force flex-center--force gap-16">
+                    <div class="h-16 w-60-p background-surface-alpha radius-full"></div>
+                    <div class="h-16 w-100-p background-surface-alpha radius-full"></div>
+                </div>
+            </div>
+            <div class="h-16 w-100-p flex-column--force background-surface-alpha radius-full"></div>
+        </div>
+
+    </ng-container>
+
+</div>
+<!-- TABLE SKELETON -->

package/src/lib/matcha-skeleton/skeleton/skeleton.component.ts

@@ -0,0 +1,36 @@
+import { Component, HostBinding, Input } from '@angular/core';
+
+@Component({
+    selector: 'matcha-skeleton',
+    templateUrl: './skeleton.component.html',
+    styleUrls: ['./skeleton.component.scss'],
+    standalone: false
+})
+export class MatchaSkeletonComponent {
+
+    @Input('amount') @HostBinding('attr.amount') public amount: number | string = 3;
+    @Input('grid') @HostBinding('attr.grid') public grid: number | string = 3;
+    @Input('height') @HostBinding('attr.height') public height: number | string = 100;
+    @Input('model') @HostBinding('attr.model') public model: 'profile'| 'table' | 'empty' | string | null = 'empty';
+    @Input('gap') @HostBinding('attr.gap') public gap: number | string = 16;
+
+    public get classes(): string {
+        // if string parse to int
+        this.amount = typeof this.amount === 'string' ? parseInt(this.amount) : this.amount;
+        this.grid = typeof this.grid === 'string' ? parseInt(this.grid) : this.grid;
+
+        let classes = `gap-${this.gap} `;
+        this.amount > 1 ? classes += `grid-sm-${this.grid - 1} ` : classes;
+        this.amount > 2 ? classes += `grid-md-${this.grid} ` : classes;
+        return classes;
+    }
+
+    public get heightClass(): string {
+        return `h-${this.height}`;
+    }
+
+    public get amountArray(): number[] {
+        const amountNumber = typeof this.amount === 'string' ? parseInt(this.amount) : this.amount;
+        return Array(amountNumber).fill(0).map((_, index) => index);
+    }
+}

package/src/lib/matcha-skeleton/skeleton-argtype.ts

@@ -0,0 +1,67 @@
+export const skeletonArgtypes = {
+    model: {
+        description: 'Modelo de skeleton a ser exibido',
+        control: 'select',
+        defaultValue: 'empty',
+        table: {
+            defaultValue: { summary: 'empty' },
+        },
+        options: ['', 'profile', 'table', 'empty'],
+    },
+    amount: {
+        description: 'Número de elementos exibidos no skeleton',
+        defaultValue: '3',
+        table: {
+            type: { summary: 'range' },
+            defaultValue: { summary: '3' },
+        },
+        control: {
+            type: 'range',
+            min: '0',
+            max: '24',
+            step: '1',
+        },
+    },
+    height: {
+        description: 'Altura do skeleton',
+        defaultValue: '100',
+        table: {
+            type: { summary: 'range' },
+            defaultValue: { summary: '100' },
+        },
+        control: {
+            type: 'range',
+            min: '0',
+            max: '1000',
+            step: '100',
+        },
+    },
+    grid: {
+        description: 'Número de colunas do skeleton',
+        defaultValue: '3',
+        table: {
+            type: { summary: 'range' },
+            defaultValue: { summary: '3' },
+        },
+        control: {
+            type: 'range',
+            min: '0',
+            max: '12',
+            step: '1',
+        },
+    },
+    gap: {
+        description: 'Espaçamento entre os elementos do skeleton',
+        defaultValue: '16',
+        table: {
+            type: { summary: 'range' },
+            defaultValue: { summary: '16' },
+        },
+        control: {
+            type: 'range',
+            min: '0',
+            max: '64',
+            step: '4',
+        },
+    },
+};

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaSkeletonComponent } from './skeleton/skeleton.component';
+@NgModule({
+    declarations: [MatchaSkeletonComponent],
+    imports: [
+        CommonModule
+    ],
+    exports: [MatchaSkeletonComponent],
+})
+export class MatchaSkeletonModule {}

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

@@ -0,0 +1,74 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { MatchaSkeletonModule } from './skeleton.module';
+import { skeletonArgtypes } from './skeleton-argtype';
+
+export default {
+    title: 'Atoms/Skeleton',
+    decorators: [
+        moduleMetadata({
+            imports: [
+                MatchaSkeletonModule,
+            ],
+        }),
+    ],
+    tags: ['autodocs'],
+    args: {
+        amount: 3,
+        grid: 3,
+        height: 100,
+        model: 'empty',
+        gap: 16,
+    },
+    argTypes: skeletonArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const SkeletonControls: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-skeleton
+                ${args['amount'] ? `amount="${args['amount']}"` : ''}
+                ${args['grid'] ? `grid="${args['grid']}"` : ''}
+                ${args['height'] ? `height="${args['height']}"` : ''}
+                ${args['model'] ? `model="${args['model']}"` : ''}
+                ${args['gap'] ? `gap="${args['gap']}"` : ''}>
+            </matcha-skeleton>
+        `,
+    }),
+    name: 'Skeleton Controls',
+};
+
+export const SkeletonProfile: StoryObj = {
+    render: () => ({
+        template: `
+            <matcha-skeleton
+                amount="3"
+                grid="3"
+                height="100"
+                model="profile"
+                gap="16">
+            </matcha-skeleton>
+        `,
+        inlineStory: true,
+    }),
+    name: 'Skeleton Profile',
+};
+
+export const SkeletonTable: StoryObj = {
+    render: () => ({
+        template: `
+            <matcha-skeleton
+                model="table"
+                amount="3"
+                >
+            </matcha-skeleton>
+        `,
+        inlineStory: true,
+    }),
+    name: 'Skeleton Table',
+};

package/src/lib/matcha-slide-toggle/slide-toggle/slide-toggle.component.html

@@ -0,0 +1,15 @@
+<label
+  class="matcha-slide-toggle-wrapper flex-align-center"
+  [class.matcha-slide-toggle-disabled]="disabled"
+  >
+  <input
+    type="checkbox"
+    [checked]="checked"
+    [disabled]="disabled"
+    (change)="onInputChange($event)"
+  />
+
+  <span class="matcha-slide-toggle-label ml-8 fw-500 fs-16 lh-20">
+    <ng-content></ng-content>
+  </span>
+</label>

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

@@ -0,0 +1,96 @@
+import { Component, Input, Output, EventEmitter, forwardRef, ChangeDetectionStrategy, ElementRef, OnChanges, SimpleChanges, AfterViewInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+    selector: 'matcha-slide-toggle',
+    templateUrl: './slide-toggle.component.html',
+    styleUrls: ['./slide-toggle.component.scss'],
+    standalone: false,
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => MatchaSlideToggleComponent),
+            multi: true,
+        },
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatchaSlideToggleComponent implements ControlValueAccessor, OnChanges, AfterViewInit {
+    @Input() color: string = 'accent'; 
+
+    private _checked: boolean = false;
+    @Input()
+    set checked(value: boolean | string) {
+        const newCheckedState = value === '' ? true : !!value;
+        if (newCheckedState !== this._checked) {
+            this._checked = newCheckedState;
+        }
+    }
+    get checked(): boolean {
+        return this._checked;
+    }
+
+    private _disabled: boolean = false;
+    @Input()
+    set disabled(value: boolean | string) {
+        this._disabled = value != null && `${value}` !== 'false';
+    }
+    get disabled(): boolean {
+        return this._disabled;
+    }
+
+    @Output() change = new EventEmitter<{ checked: boolean }>();
+
+    onChange: (value: boolean) => void = (_: boolean) => {};
+    onTouched: () => void = () => {};
+
+    writeValue(value: any): void {
+        this.checked = !!value;
+    }
+
+    registerOnChange(fn: any): void {
+        this.onChange = fn;
+    }
+
+    registerOnTouched(fn: any): void {
+        this.onTouched = fn;
+    }
+
+    setDisabledState(isDisabled: boolean): void {
+        this.disabled = isDisabled;
+    }
+
+    constructor(private elementRef: ElementRef<HTMLElement>) {}
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['disabled']) {
+            if (this.disabled) {
+                this.elementRef.nativeElement.setAttribute('disabled', '');
+            } else {
+                this.elementRef.nativeElement.removeAttribute('disabled');
+            }
+        }
+    }
+
+    ngAfterViewInit(): void {
+        
+        if (this.disabled) {
+            this.elementRef.nativeElement.setAttribute('disabled', '');
+        }
+    }
+
+    onInputChange(event: Event): void {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+
+        const inputElement = event.target as HTMLInputElement;
+        const newCheckedState = inputElement.checked;
+
+        this._checked = newCheckedState;
+        this.onChange(newCheckedState);
+        this.onTouched();
+        this.change.emit({ checked: newCheckedState });
+    }
+}

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

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

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

@@ -0,0 +1,78 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { MatchaSlideToggleComponent } from './slide-toggle/slide-toggle.component';
+import { MatchaSlideToggleModule } from './slide-toggle.module';
+
+export default {
+    title: 'Atoms / Slide Toggle',
+    componentSubtitle: "Para usar, importe MatchaSlideToggleModule no seu módulo Angular.",
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+        moduleMetadata({
+            imports: [
+                CommonModule, MatchaSlideToggleModule
+            ],
+        }),
+    ],
+    args: { 
+        color: 'accent',
+        checked: false,
+        disabled: false,        
+    },
+    argTypes: {
+        color: {
+            control: { type: 'select' },
+            options: [
+                '', 'primary', 'accent', 'warn', 'red', 'pink', 'purple',
+                'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal',
+                'green', 'light-green', 'lime', 'yellow', 'amber', 'orange',
+                'deep-orange', 'brown', 'grey', 'blue-grey',
+            ],
+            description: 'Cor do slide toggle baseada na paleta do tema.',
+        },
+        checked: {
+            control: { type: 'boolean' },
+            description: 'Define se o slide toggle está marcado (ligado).',
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Define se o slide toggle está desabilitado.',
+        },
+        storyLabelContent: { 
+            control: { type: 'text' },
+            description: 'Conteúdo textual para o label do slide toggle.',
+            defaultValue: 'Slide Toggle Label', 
+        }
+    },
+    tags: ['autodocs'],
+    parameters: {
+        controls: { expanded: true }, 
+    },
+} as Meta;
+
+export const Playground: StoryObj = {
+    args: { 
+        color: 'accent',
+        checked: false,
+        disabled: false,
+        storyLabelContent: 'Toggle Me!',
+    },
+    render: (args) => ({
+        props: args, 
+        template: `
+          <matcha-slide-toggle
+            [attr.color]="color ? color : null"
+            [checked]="checked"
+            [disabled]="disabled"
+            (change)="$event.target && (args.checked = $event.target.checked)"
+          >
+            {{ storyLabelContent }}
+          </matcha-slide-toggle>
+        `,
+    }),
+    name: 'Default Slide Toggle',
+};
+

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

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