matcha-components 20.12.0 → 20.15.0

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+<!-- [@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

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

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

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

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

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

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

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

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