matcha-components 20.15.0 → 20.16.0

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

@@ -1,67 +0,0 @@
-import { Component, Input, HostBinding } from '@angular/core';
-
-@Component({
-    selector: 'matcha-modal',
-    templateUrl: './modal.component.html',
-    styleUrl: './modal.component.scss',
-    standalone: false
-})
-export class MatchaModalComponent {
-
-    @Input('size') size: string | null = 'large';
-
-    @Input('size-xs') sizeXs: string | null = null;
-    @Input('size-sm') sizeSm: string | null = null;
-    @Input('size-md') sizeMd: string | null = null;
-    @Input('size-lg') sizeLg: string | null = null;
-    @Input('size-xl') sizeXl: string | null = null;
-
-    @Input()
-    class: string = '';
-
-    @Input()
-    hasBackdrop: boolean = true;
-
-    @Input()
-    backdropClass: string = '';
-
-    @HostBinding('attr.size')
-    get sizeAttr(): string | null {
-        return this.size;
-    }
-
-    @HostBinding('attr.size-xs')
-    get sizeAttrXs(): string | null {
-        return this.sizeXs;
-    }
-
-    @HostBinding('arrt.size-sm')
-    get sizeAttrSm(): string | null {
-        return this.sizeSm;
-    }
-
-    @HostBinding('attr.size-md')
-    get sizeAttrMd(): string | null {
-        return this.sizeMd;
-    }
-
-    @HostBinding('attr.size-lg')
-    get sizeAttrLg(): string | null {
-        return this.sizeLg;
-    }
-
-    @HostBinding('attr.size-xl')
-    get sizeAttrXl(): string | null {
-        return this.sizeXl;
-    }
-
-    @HostBinding('class')
-    public get classes(): string {
-        const activeClasses = `matcha-modal flex-column elevation-8 ${this.class}`;
-        return activeClasses;
-    }
-
-    constructor(
-    ) {}
-
-}

package/src/lib/matcha-modal/modal-content/modal-content.component.html

@@ -1,9 +0,0 @@
-
-<div class="py-24 pt-0 overflow-auto" style="max-height: calc(100vh - 300px);
-">
-    <div class="matcha-card-flat matcha-background-transparent p-0 flex-column--force">
-        <div class="flex-column matcha-card-flat matcha-background-transparent px-24 py-0">
-            <ng-content></ng-content>
-        </div>
-    </div>
-</div>

package/src/lib/matcha-modal/modal-content/modal-content.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'matcha-modal-content',
-    templateUrl: './modal-content.component.html',
-    styleUrls: ['./modal-content.component.scss'],
-    standalone: false
-})
-export class MatchaModalContentComponent {
-
-}

package/src/lib/matcha-modal/modal-footer/modal-footer.component.html

@@ -1,8 +0,0 @@
-<div class="matcha-section pb-16 px-16 pb-md-24 px-md-24">
-    <matcha-divider></matcha-divider>
-    <div class="flex-column flex-sm-row w-100-p flex-space-between gap-16">
-        <div class="flex-column flex-sm-row w-100-p flex-space-between mt-16 mt-md-24 gap-16">
-            <ng-content></ng-content>
-        </div>
-    </div>
-</div>

package/src/lib/matcha-modal/modal-footer/modal-footer.component.ts

@@ -1,32 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-    selector: 'matcha-modal-footer',
-    templateUrl: './modal-footer.component.html',
-    styleUrls: ['./modal-footer.component.scss'],
-    standalone: false
-})
-export class MatchaModalFooterComponent {
-
-    @Input('')
-    buttonType: number | string = 0;
-
-    ngAfterViewInit() {
-        const modalFooter = document.querySelectorAll('matcha-modal-footer');
-        modalFooter.forEach(footer => {
-            const buttons = footer.querySelectorAll('.matcha-button');
-
-            if (buttons.length === 1) {
-                buttons.forEach(button => {
-                    button.classList.add('w-100-p');
-                });
-            }
-            if (buttons.length > 1) {
-                buttons.forEach(button => {
-                    button.classList.add('max-w-sm-256');
-                    button.classList.add('w-100-p');
-                });
-            }
-        });
-    }
-}

package/src/lib/matcha-modal/modal-header/modal-header.component.html

@@ -1,13 +0,0 @@
-<!-- [@animate]="{ value: '*', params: { delay: '100ms' } }" -->
-<!-- MATCHA CHECK -->
-<div class="matcha-section pt-16 px-16 pt-md-24 px-md-24">
-    <div class="d-flex flex-wrap flex-space-between mb-16 mb-md-24">
-        <div class="flex-space-between flex-align-center">
-            <ng-content></ng-content>
-        </div>
-        <div class="flex-row flex-end gap-8">
-            <ng-content select="matcha-modal-options"></ng-content>
-        </div>
-    </div>
-    <matcha-divider></matcha-divider>
-</div>

package/src/lib/matcha-modal/modal-header/modal-header.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'matcha-modal-header',
-    templateUrl: './modal-header.component.html',
-    styleUrls: ['./modal-header.component.scss'],
-    standalone: false
-})
-export class MatchaModalHeaderComponent {
-
-}

package/src/lib/matcha-modal/modal-options/modal-options.component.html

@@ -1,3 +0,0 @@
-<div class="flex-row gap-8">
-    <ng-content></ng-content>
-</div>

package/src/lib/matcha-modal/modal-options/modal-options.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'matcha-modal-options',
-    templateUrl: './modal-options.component.html',
-    styleUrl: './modal-options.component.scss',
-    standalone: false
-})
-export class MatchaModalOptionsComponent {
-
-}

package/src/lib/matcha-modal/modal.service.ts

@@ -1,47 +0,0 @@
-import { Injectable, Type } from '@angular/core';
-import { MatchaOverlayService } from './overlay.service';
-import { Subject, Observable } from 'rxjs';
-
-export interface ModalComponent {
-  afterClose?: Observable<any>;
-  data?: any;
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class MatchaModalService {
-  private afterCloseSubject = new Subject<any>();
-  private currentData: any = {};
-
-  constructor(private overlayService: MatchaOverlayService) {}
-
-  open<T extends ModalComponent>(component: Type<T>, data: any = {}) {
-    this.currentData = data;
-    const componentRef = this.overlayService.open(component, data);
-
-    // Injeta os dados no componente
-    componentRef.instance.data = data;
-
-    if (componentRef.instance.afterClose) {
-      componentRef.instance.afterClose.subscribe((result: any) => {
-        this.afterCloseSubject.next(result);
-      });
-    }
-
-    return {
-      componentRef,
-      afterClose: this.afterCloseSubject.asObservable()
-    };
-  }
-  
-  close(result?: any) {
-    this.afterCloseSubject.next(result);
-    this.overlayService.close();
-    this.currentData = {};
-  }
-
-  getData(): any {
-    return this.currentData;
-  }
-}

package/src/lib/matcha-modal/modal.stories.argtypes.ts

@@ -1,56 +0,0 @@
-export const modalArgtypes = {
-    size: {
-        description: 'size of the modal',
-        control: 'select',
-        defaultValue: 'medium',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    sizeXs:{
-        description: 'size of the modal in screen xs',
-        control: 'select',
-        defaultValue: 'tiny',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    sizeSm:{
-        description: 'size of the modal in screen sm',
-        control: 'select',
-        defaultValue: 'small',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    sizeMd:{
-        description: 'size of the modal in screen md',
-        control: 'select',
-        defaultValue: 'medium',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    sizeLg:{
-        description: 'size of the modal in screen lg',
-        control: 'select',
-        defaultValue: 'large',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    sizeXl:{
-        description: 'size of the modal in screen xl',
-        control: 'select',
-        defaultValue: 'huge',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-};

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

@@ -1,333 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { MatchaModalModule } from '../matcha-modal/matcha-modal.module';
-import { CommonModule } from '@angular/common';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { MatchaIconModule } from '../matcha-icon/icon.module';
-import { MatchaDividerModule } from '../matcha-divider/divider.module';
-import { MatchaTitleModule } from '../matcha-title/title.module';
-import { MatchaButtonModule } from '../matcha-button/button.module';
-import { MatchaElevationModule } from '../matcha-elevation/elevation.module';
-import { modalArgtypes } from './modal.stories.argtypes';
-import { ExempleMatchaModal } from './exemplo/exemple-modal.component';
-import { ExempleModalContent } from './exemplo/exemple-modal-content.component';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatchaFormFieldModule } from '../matcha-form-field/matcha-form-field.module';
-
-export default {
-    title: 'Components / Modal',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-        moduleMetadata({
-            imports: [
-                CommonModule,
-                MatchaModalModule,
-                MatchaIconModule,
-                MatchaDividerModule,
-                MatchaTitleModule,
-                MatchaButtonModule,
-                MatchaElevationModule,
-                ReactiveFormsModule,
-                MatchaFormFieldModule
-            ],
-            declarations: [ExempleMatchaModal, ExempleModalContent]
-        }),
-    ],
-    tags: ['autodocs'],
-    args: {
-        size: 'large',
-        sizeXs: '',
-        sizeSm: '',
-        sizeMd: '',
-        sizeLg: '',
-        sizeXl: '',
-    },
-    argTypes: modalArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const ModalControls: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        styles: [
-            `
-            matcha-modal {
-                position: relative;
-            }
-        `
-        ],
-        template: `
-            <matcha-modal
-                ${args['size'] ? `size="${args['size']}"` : ''}
-                ${args['sizeXs'] ? `size-xs="${args['sizeXs']}"` : ''}
-                ${args['sizeSm'] ? `size-sm="${args['sizeSm']}"` : ''}
-                ${args['sizeMd'] ? `size-md="${args['sizeMd']}"` : ''}
-                ${args['sizeLg'] ? `size-lg="${args['sizeLg']}"` : ''}
-                ${args['sizeXl'] ? `size-xl="${args['sizeXl']}"` : ''}>
-                <matcha-modal-header>
-                    <matcha-title size="4" type="icon" icon="chevron-left" (iconClick)="null" color="primary">MatchaModal</matcha-title>
-                    <matcha-modal-options>
-                        <button matcha-button size="small" outline="true" icon="true" color="primary"><span class="i-matcha-edit"></span></button>
-                        <button matcha-button size="small" outline="true" icon="true" color="primary"><span class="i-matcha-delete"></span></button>
-                    </matcha-modal-options>
-                </matcha-modal-header>
-
-                <matcha-modal-content>
-                    Modal Content
-                </matcha-modal-content>
-
-                <matcha-modal-footer>
-                    <button matcha-button size="medium" color="primary" class="w-100-p">Ok</button>
-                </matcha-modal-footer>
-            </matcha-modal>
-        `,
-    }),
-    name: 'Modal Controls',
-};
-
-
-export const ModalInputOutput: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <exemple-matcha-modal></exemple-matcha-modal>
-        `
-    }),
-    name: 'Modal Input/Output de dados',
-};
-
-export const ModalWarning: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        styles: [
-            `
-            matcha-modal {
-                position: relative;
-            }
-        `
-        ],
-        template: `
-        <div class="grid-md-2 gap-24">
-            <div class="flex-column gap-24">
-                <matcha-title type="none" size="3">Messages</matcha-title>
-                <matcha-modal size="small">
-                    <matcha-modal-header>
-                        <matcha-title size="4" type="icon" icon="action_sign_warning" (iconClick)="null" color="yellow">Warning</matcha-title>
-                    </matcha-modal-header>
-
-                    <matcha-modal-content>
-                        Modal Content
-                    </matcha-modal-content>
-
-                    <matcha-modal-footer>
-                        <button matcha-button size="medium" color="primary" class="w-100-p">Close</button>
-                    </matcha-modal-footer>
-                </matcha-modal>
-            </div>
-
-            <div class="flex-column gap-24">
-                <matcha-title type="none" size="3">Actions</matcha-title>
-                <matcha-modal size="small">
-                    <matcha-modal-header>
-                        <matcha-title size="4" type="icon" icon="action_sign_warning" (iconClick)="null" color="yellow">Warning</matcha-title>
-                    </matcha-modal-header>
-
-                    <matcha-modal-content>
-                        Modal Content
-                    </matcha-modal-content>
-
-                    <matcha-modal-footer>
-                        <button matcha-button size="medium" outline="true" color="primary">Cancel</button>
-                        <button matcha-button size="medium" color="warn">Action</button>
-                    </matcha-modal-footer>
-                </matcha-modal>
-            </div>
-        </div>
-
-        `,
-    }),
-    name: 'Modal Warning',
-};
-
-
-export const ModalError: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        styles: [
-            `
-            matcha-modal {
-                position: relative;
-            }
-        `
-        ],
-        template: `
-        <div class="grid-md-2 gap-24">
-            <div class="flex-column gap-24">
-                <matcha-title type="none" size="3">Messages</matcha-title>
-                <matcha-modal size="small">
-                    <matcha-modal-header>
-                        <matcha-title size="4" type="icon" icon="action_sign_error" (iconClick)="null" color="red">Error</matcha-title>
-                    </matcha-modal-header>
-
-                    <matcha-modal-content>
-                        Modal Content
-                    </matcha-modal-content>
-
-                    <matcha-modal-footer>
-                        <button matcha-button size="medium" color="primary" class="w-100-p">Close</button>
-                    </matcha-modal-footer>
-                </matcha-modal>
-            </div>
-
-            <div class="flex-column gap-24">
-                <matcha-title type="none" size="3">Actions</matcha-title>
-                <matcha-modal size="small">
-                    <matcha-modal-header>
-                        <matcha-title size="4" type="icon" icon="action_sign_error" (iconClick)="null" color="red">Error</matcha-title>
-                    </matcha-modal-header>
-
-                    <matcha-modal-content>
-                        Modal Content
-                    </matcha-modal-content>
-
-                    <matcha-modal-footer>
-                        <button matcha-button size="medium" outline="true" color="primary">Cancel</button>
-                        <button matcha-button size="medium" color="warn">Action</button>
-                    </matcha-modal-footer>
-                </matcha-modal>
-            </div>
-        </div>
-
-        `,
-    }),
-    name: 'Modal Error',
-};
-
-export const ModalSuccess: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        styles: [
-            `
-            matcha-modal {
-                position: relative;
-            }
-        `
-        ],
-        template: `
-        <div class="grid-md-2 gap-24">
-            <div class="flex-column gap-24">
-                <matcha-title type="none" size="3">Messages</matcha-title>
-                <matcha-modal size="small">
-                    <matcha-modal-header>
-                        <matcha-title size="4" type="icon" icon="action_sign_success" (iconClick)="null" color="green">Success</matcha-title>
-                    </matcha-modal-header>
-
-                    <matcha-modal-content>
-                        Modal Content
-                    </matcha-modal-content>
-
-                    <matcha-modal-footer>
-                        <button matcha-button size="medium" color="primary" class="w-100-p">Close</button>
-                    </matcha-modal-footer>
-                </matcha-modal>
-            </div>
-
-            <div class="flex-column gap-24">
-                <matcha-title type="none" size="3">Actions</matcha-title>
-                <matcha-modal size="small">
-                    <matcha-modal-header>
-                        <matcha-title size="4" type="icon" icon="action_sign_success" (iconClick)="null" color="green">Success</matcha-title>
-                    </matcha-modal-header>
-
-                    <matcha-modal-content>
-                        Modal Content
-                    </matcha-modal-content>
-
-                    <matcha-modal-footer>
-                        <button matcha-button size="medium" outline="true" color="primary">Cancel</button>
-                        <button matcha-button size="medium" color="accent">Action</button>
-                    </matcha-modal-footer>
-                </matcha-modal>
-            </div>
-        </div>
-
-        `,
-    }),
-    name: 'Modal Success',
-};
-
-export const ModalDetails: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        styles: [
-            `
-            matcha-modal {
-                position: relative;
-            }
-        `
-        ],
-        template: `
-        <div class="grid-md-2 gap-24">
-            <div class="flex-column gap-24">
-                <matcha-title type="none" size="3">Messages</matcha-title>
-                <matcha-modal size="small">
-                    <matcha-modal-header>
-                        <matcha-title size="4" type="icon" icon="chevron-left" (iconClick)="null" color="green">Details</matcha-title>
-                        <matcha-modal-options>
-                            <button matcha-button size="small" outline="true" icon="true" color="primary"><span class="i-matcha-edit-out"></span></button>
-                            <button matcha-button size="small" outline="true" icon="true" color="primary"><span class="i-matcha-delete-out"></span></button>
-                        </matcha-modal-options>
-                    </matcha-modal-header>
-
-                    <matcha-modal-content>
-                        Modal Content
-                    </matcha-modal-content>
-
-                    <matcha-modal-footer>
-                        <button matcha-button size="medium" color="primary" class="w-100-p">Close</button>
-                    </matcha-modal-footer>
-                </matcha-modal>
-            </div>
-
-            <div class="flex-column gap-24">
-                <matcha-title type="none" size="3">Actions</matcha-title>
-                <matcha-modal size="small">
-                    <matcha-modal-header>
-                        <matcha-title size="4" type="icon" icon="chevron-left" (iconClick)="null" color="green">Details</matcha-title>
-                        <matcha-modal-options>
-                            <button matcha-button size="small" outline="true" icon="true" color="primary"><span class="i-matcha-edit-out"></span></button>
-                            <button matcha-button size="small" outline="true" icon="true" color="primary"><span class="i-matcha-delete-out"></span></button>
-                        </matcha-modal-options>
-                    </matcha-modal-header>
-
-                    <matcha-modal-content>
-                        Modal Content
-                    </matcha-modal-content>
-
-                    <matcha-modal-footer>
-                        <button matcha-button size="medium" outline="true" color="primary">Cancel</button>
-                        <button matcha-button size="medium" color="accent">Action</button>
-                    </matcha-modal-footer>
-                </matcha-modal>
-            </div>
-        </div>
-
-        `,
-    }),
-    name: 'Modal Details',
-};

package/src/lib/matcha-modal/model/IMatchaModalComponent.ts

@@ -1 +0,0 @@
-export interface IModalMatchaComponent { }