matcha-components 20.15.0 → 20.16.0

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="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

@@ -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: '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

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

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

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-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')
-    }
-
-}