matcha-components 20.15.0 → 20.17.0

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

@@ -1,132 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { titleArgtypes } from './title.argtypes';
-import { CommonModule } from '@angular/common';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { MatchaTitleModule } from './title.module';
-import { MatchaDividerModule } from '../matcha-divider/divider.module';
-
-export default {
-    title: 'Atoms / Title',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-        moduleMetadata({
-            imports: [CommonModule, MatchaTitleModule, MatchaDividerModule],
-        }),
-    ],
-    tags: ['autodocs'],
-    args: {
-        color: 'fg',
-        size: 4,
-        type: 'pill',
-        icon: 'home',
-        iconClick: null,
-        content: 'My title',
-    },
-    argTypes: titleArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-
-export const TitleControls: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <matcha-title
-            color="${args['color']}"
-            size="${args['size']}"
-            type="${args['type']}"
-            icon="${args['icon']}"
-            (iconClick)="yourFunction()"
-            >{{content}}</matcha-title>
-        `,
-    }),
-    name: 'Title Controls',
-};
-
-export const TitleTypePill: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <matcha-title type="pill">title pill sem size e sem cor</matcha-title>
-            <matcha-title size="1" type="pill" color="red">title pill colorido size1</matcha-title>
-            <matcha-title size="2" type="pill" color="pink">title pill colorido size2</matcha-title>
-            <matcha-title size="3" type="pill" color="purple">title pill colorido size3</matcha-title>
-            <matcha-title size="4" type="pill" color="deep-purple">title pill colorido size4</matcha-title>
-            <matcha-title size="5" type="pill" color="indigo">title pill colorido size5</matcha-title>
-            <matcha-title size="6" type="pill" color="blue">title pill colorido size6</matcha-title>
-            <matcha-title size="7" type="pill" color="cyan">title pill colorido size7</matcha-title>
-        `,
-    }),
-    name: 'Title Type Pill',
-    parameters: { controls: { exclude: ['size', 'type', 'icon', 'iconClick', 'color', 'content'] } },
-};
-
-export const TitleTypeBullet: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <matcha-title type="bullet">title bullet sem size e sem cor</matcha-title>
-            <matcha-title size="1" type="bullet" color="orange">title bullet colorido size1</matcha-title>
-            <matcha-title size="1" type="bullet">title bullet size1</matcha-title>
-            <matcha-title size="2" type="bullet">title bullet size2</matcha-title>
-            <matcha-title size="3" type="bullet">title bullet size3</matcha-title>
-            <matcha-title size="4" type="bullet">title bullet size4</matcha-title>
-            <matcha-title size="5" type="bullet">title bullet size5</matcha-title>
-            <matcha-title size="6" type="bullet">title bullet size6</matcha-title>
-            <matcha-title size="7" type="bullet">title bullet size7</matcha-title>
-        `,
-    }),
-    name: 'Title Type Bullet',
-    parameters: { controls: { exclude: ['size', 'type', 'icon', 'iconClick', 'color', 'content'] } },
-};
-
-export const TitleTypeIcon: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <matcha-title type="icon" icon="home">title icon sem cor sem size</matcha-title>
-            <matcha-title type="icon" icon="home" color="primary">title icon colorido sem size</matcha-title>
-            <matcha-title size="1" type="icon" icon="action_sign_success" color="green">title icon colorido size1</matcha-title>
-            <matcha-title size="2" type="icon" icon="action_sign_error" color="red">title icon colorido size2</matcha-title>
-            <matcha-title size="3" type="icon" icon="action_sign_warning" color="yellow">title icon colorido size3</matcha-title>
-            <matcha-title size="4" type="icon" icon="chevron-left" (iconClick)="iconClicked('test')">title icon output sem cor size4</matcha-title>
-            <matcha-title size="5" type="icon" icon="home" color="primary">title icon colorido size5</matcha-title>
-            <matcha-title size="6" type="icon" icon="home" color="primary">title icon colorido size6</matcha-title>
-            <matcha-title size="7" type="icon" icon="home" color="primary">title icon colorido size7</matcha-title>
-        `,
-    }),
-    name: 'Title Type Icon',
-    parameters: { controls: { exclude: ['size', 'type', 'icon', 'iconClick', 'color', 'content'] } },
-};
-
-export const TitleTypeNone: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <matcha-title type="none">none sem size</matcha-title>
-            <matcha-title size="1" type="none">none size1</matcha-title>
-            <matcha-title size="2" type="none">none size2</matcha-title>
-            <matcha-title size="3" type="none">none size3</matcha-title>
-            <matcha-title size="4" type="none">none size4</matcha-title>
-            <matcha-title size="5" type="none">none size5</matcha-title>
-            <matcha-title size="6" type="none">none size6</matcha-title>
-            <matcha-title size="7" type="none">none size7</matcha-title>
-        `,
-    }),
-    name: 'Title Type None',
-    parameters: { controls: { exclude: ['size', 'type', 'icon', 'iconClick', 'color', 'content'] } },
-};

package/src/lib/matcha-toolbar/toolbar/toolbar.component.html

@@ -1,54 +0,0 @@
-<!-- HOW TO USE:
-<matcha-toolbar>
-    <matcha-title type="icon" icon="settings-out" (iconClick)="FUNÇÃO-AO-CLICAR-NO-ICONE-AQUI">
-        {{'FINANCIAL.CATEGORY.TITLE' | translate}}
-    </matcha-title>
-    <search-form toolbar-form-field (searchText)="searchText($event)"></search-form>
-    <matcha-toolbar-button icon="home-out" (buttonClick)="FUNÇÃO-AO-CLICAR-AQUI">
-        TEXTO DO BOTÃO AQUI
-    </matcha-toolbar-button>
-    <matcha-toolbar-content>
-        TEXTO DO BOTÃO AQUI
-    </matcha-toolbar-content>
-    <matcha-toolbar-main-button (buttonClick)="FUNÇÃO-AO-CLICAR-AQUI">
-        TEXTO DO BOTÃO AQUI
-    </matcha-toolbar-main-button>
-    QUALQUER OUTRA FUNCIONALIDADE AQUI
-</matcha-toolbar>
--->
-<ng-template #toolbarMainButton>
-    <ng-content select="matcha-toolbar-main-button"></ng-content>
-</ng-template>
-
-<ng-template #toolbarCustomButton>
-    <ng-content select="matcha-toolbar-custom-button"></ng-content>
-</ng-template>
-<!-- CONTENT HEADER -->
-<div class="flex-column background-surface radius-8" [ngClass]="elevationClass">
-    <div class="flex-column flex-md-row flex-wrap p-16 flex-align-center flex-space-between h-auto min-h-40 flex-wrap">
-        <div class="w-100-p--force w-md-auto--force flex-space-between flex-wrap">
-            <div class="min-h-32 flex-center-center">
-                <ng-content select="matcha-title"></ng-content>
-            </div>
-            <ng-container *ngIf="isMobileScreen">
-                <ng-container *ngTemplateOutlet="toolbarMainButton"></ng-container>
-                <ng-container *ngTemplateOutlet="toolbarCustomButton"></ng-container>
-            </ng-container>
-        </div>
-        <div class="w-100-p--force w-md-auto--force flex-row flex-end gap-8">
-            <!-- ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->
-            <ng-content select="search-form"></ng-content>
-            <!-- /ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->
-            <div class="flex-row gap-8">
-                <ng-content select="matcha-toolbar-button"></ng-content>
-                <ng-content select="matcha-toolbar-content"></ng-content>
-                <ng-content></ng-content>
-                <ng-container *ngIf="!isMobileScreen">
-                    <ng-container *ngTemplateOutlet="toolbarMainButton"></ng-container>
-                    <ng-container *ngTemplateOutlet="toolbarCustomButton"></ng-container>
-                </ng-container>
-            </div>
-        </div>
-    </div>
-</div>
-<!-- / CONTENT HEADER -->

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

@@ -1,43 +0,0 @@
-import { Component, HostListener, OnInit, OnDestroy, Input } from '@angular/core';
-
-
-@Component({
-    selector: 'matcha-toolbar',
-    templateUrl: './toolbar.component.html',
-    styleUrls: ['./toolbar.component.scss'],
-    standalone: false
-})
-export class MatchaToolbarComponent implements OnInit, OnDestroy{
-
-  @Input() elevation: number = 1;
-
-  public isMobileScreen = false;
-
-  get elevationClass(): string {
-    return `elevation-z-${this.elevation}`;
-  }
-  
-  private readonly mobileBreakpoint = 1024;
-  private resizeTimeout: any;
-
-  ngOnInit(): void {
-    this.checkScreenWidth();
-  }
-
-  @HostListener('window:resize', [])
-  onResize(): void {
-    clearTimeout(this.resizeTimeout);
-    this.resizeTimeout = setTimeout(() => {
-      this.checkScreenWidth();
-    }, 20);
-  }
-
-  private checkScreenWidth(): void {
-    this.isMobileScreen = window.innerWidth < this.mobileBreakpoint;
-  }
-
-  ngOnDestroy(): void {
-    clearTimeout(this.resizeTimeout);
-  }
-}
-

package/src/lib/matcha-toolbar/toolbar-button/toolbar-button.component.html

@@ -1,8 +0,0 @@
-<!-- HOW TO USE:
-<matcha-toolbar-button (buttonClick)="FUNÇÃO-AO-CLICAR-AQUI" toolbar-button-tooltip="TOOLTIP-AQUI">
-    TEXTO DO BOTÃO AQUI
-</matcha-toolbar-button>
--->
-<button matcha-button outline="true" size="small" color="grey" icon="true" class="mt-16 mt-md-0" (click)="emitButtonClick()">
-    <span [class]="classes"></span>
-</button>

package/src/lib/matcha-toolbar/toolbar-button/toolbar-button.component.ts

@@ -1,21 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-    selector: 'matcha-toolbar-button',
-    templateUrl: './toolbar-button.component.html',
-    styleUrls: ['./toolbar-button.component.scss'],
-    standalone: false
-})
-export class MatchaToolbarButtonComponent{
-    @Input('icon') icon: string = '';
-    @Output() buttonClick = new EventEmitter();
-
-    public get classes(): string {
-        const activeClasses = `i-matcha-${this.icon}`;
-        return activeClasses;
-    }
-
-    emitButtonClick() {
-        this.buttonClick.emit();
-    }
-}

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

@@ -1,8 +0,0 @@
-<!-- HOW TO USE:
-<matcha-toolbar-content>
-    OUTROS CONTEUDOS CUSTOMIZADOS NA TOOLBAR
-</matcha-toolbar-content>
--->
-<div class="d-flex flex-wrap gap-8 mt-16 mt-md-0">
-    <ng-content></ng-content>
-</div>

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

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

package/src/lib/matcha-toolbar/toolbar-custom-button/toolbar-custom-button.component.html

@@ -1,6 +0,0 @@
-<!-- HOW TO USE:
-<matcha-toolbar-custom-button>
-    Botão customizado aqui
-</matcha-toolbar-custom-button>
--->
-<ng-content></ng-content>

package/src/lib/matcha-toolbar/toolbar-custom-button/toolbar-custom-button.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'matcha-toolbar-custom-button',
-    templateUrl: './toolbar-custom-button.component.html',
-    styleUrls: ['./toolbar-custom-button.component.scss'],
-    standalone: false
-})
-export class MatchaToolbarCustomButtonComponent {
-}

package/src/lib/matcha-toolbar/toolbar-main-button/toolbar-main-button.component.html

@@ -1,11 +0,0 @@
-<!-- HOW TO USE:
-<matcha-toolbar-main-button (buttonClick)="FUNÇÃO-AO-CLICAR-AQUI">
-    TEXTO DO BOTÃO AQUI
-</matcha-toolbar-main-button>
--->
-<button matcha-button size="tiny" size-md="small" color="accent" (click)="emitButtonClick()">
-    <span class="i-matcha-action_plus i-size-sm ml--4"></span>
-    <span class="ml-8 fs-14">
-        <ng-content></ng-content>
-    </span>
-</button>

package/src/lib/matcha-toolbar/toolbar-main-button/toolbar-main-button.component.ts

@@ -1,15 +0,0 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-
-@Component({
-    selector: 'matcha-toolbar-main-button',
-    templateUrl: './toolbar-main-button.component.html',
-    styleUrls: ['./toolbar-main-button.component.scss'],
-    standalone: false
-})
-export class MatchaToolbarMainButtonComponent {
-    @Output() buttonClick = new EventEmitter();
-
-    emitButtonClick() {
-        this.buttonClick.emit();
-    }
-}

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

@@ -1,27 +0,0 @@
-export const toolbarArgtypes = {
-    icon: {
-        description: 'Ícone do botão. Define qual classe de ícone será aplicada (ex: "home", "settings", etc.).',
-        control: 'text',
-        defaultValue: '',
-        table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: '' },
-        },
-    },
-    toolbarButtonTooltip: {
-        description: 'Texto exibido no tooltip do botão da toolbar.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: '' },
-        },
-    },
-    buttonClick: {
-        description: 'Evento disparado quando o botão é clicado.',
-        action: 'clicked', // Permite acompanhar a ação no painel de actions do Storybook
-        table: {
-        category: 'Events',
-        },
-    },
-};

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

@@ -1,36 +0,0 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from '@angular/common';
-import { MatchaButtonModule } from '../matcha-button/button.module';
-import { MatchaTitleModule } from '../matcha-title/title.module';
-import { MatchaTooltipModule } from '../matcha-tooltip/tooltip.module';
-import { MatchaToolbarComponent } from '../matcha-toolbar/toolbar/toolbar.component';
-import { MatchaToolbarButtonComponent } from "./toolbar-button/toolbar-button.component";
-import { MatchaToolbarContentComponent } from "./toolbar-content/toolbar-content.component";
-import { MatchaToolbarMainButtonComponent } from "./toolbar-main-button/toolbar-main-button.component";
-import { MatchaToolbarCustomButtonComponent } from "./toolbar-custom-button/toolbar-custom-button.component";
-
-
-@NgModule({
-  declarations: [
-    MatchaToolbarComponent,
-    MatchaToolbarButtonComponent,
-    MatchaToolbarContentComponent,
-    MatchaToolbarMainButtonComponent,
-    MatchaToolbarCustomButtonComponent
-  ],
-  imports: [
-    CommonModule,
-    MatchaButtonModule,
-    MatchaTitleModule,
-    MatchaTooltipModule
-  ],
-  exports: [
-    MatchaToolbarComponent,
-    MatchaToolbarButtonComponent,
-    MatchaToolbarContentComponent,
-    MatchaToolbarMainButtonComponent,
-    MatchaToolbarCustomButtonComponent,
-    MatchaTitleModule
-    ]
-})
-export class MatchaToolbarModule { }

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

@@ -1,131 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { toolbarArgtypes } from './toolbar.argtypes';
-import { MatchaToolbarModule } from './toolbar.module';
-import { MatchaTooltipModule } from '../matcha-tooltip/tooltip.module';
-import { MatchaButtonModule } from '../matcha-button/button.module';
-import { MatchaDividerModule } from '../matcha-divider/divider.module';
-import { MatchaIconModule } from '../matcha-icon/icon.module';
-
-export default {
-    title: 'Components / Toolbar',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatchaToolbarModule, MatchaTooltipModule, MatchaButtonModule, MatchaIconModule, MatchaDividerModule],
-        }),
-    ],
-    tags: ['autodocs'],
-    args: {
-        icon: 'home-out',
-    },
-    argTypes: toolbarArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const ToolbarControls: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <matcha-toolbar>
-                <matcha-title type="icon" icon="settings-out" (iconClick)="buttonClick($event)">
-                    teste
-                </matcha-title>
-
-                <matcha-toolbar-button (buttonClick)="buttonClick($event)" icon="${args['icon']}">
-                </matcha-toolbar-button>
-
-                <matcha-toolbar-custom-button>
-                    <button matcha-button color="accent" size="small" outline="true">Button</button>
-                </matcha-toolbar-custom-button>
-            </matcha-toolbar>
-        `,
-
-    }),
-    name: 'Toolbar Controls',
-};
-
-export const ToolbarTitle: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <matcha-toolbar>
-                <matcha-title type="icon" icon="settings-out" (iconClick)="buttonClick($event)">teste</matcha-title>
-            </matcha-toolbar>
-        `,
-
-    }),
-    name: 'Toolbar Title',
-};
-
-/** Este é o principal */
-export const ToolbarButtons: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <matcha-toolbar>
-                <matcha-title type="icon" icon="settings-out" (iconClick)="buttonClick($event)">teste</matcha-title>
-                <matcha-toolbar-button (buttonClick)="buttonClick($event)" icon="${args['icon']}"></matcha-toolbar-button>
-                <matcha-toolbar-button (buttonClick)="buttonClick($event)" icon="${args['icon']}"></matcha-toolbar-button>
-                <matcha-toolbar-button (buttonClick)="buttonClick($event)" icon="${args['icon']}"></matcha-toolbar-button>
-            </matcha-toolbar>
-        `,
-
-    }),
-    name: 'Toolbar Buttons',
-};
-
-/** Este é o principal */
-export const ToolbarMainButton: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <matcha-toolbar>
-                <matcha-title type="icon" icon="settings-out" (iconClick)="buttonClick($event)">teste</matcha-title>
-                <matcha-toolbar-main-button (buttonClick)="buttonClick($event)">Main Button</matcha-toolbar-main-button>
-            </matcha-toolbar>
-        `,
-
-    }),
-    name: 'Toolbar Main Button',
-};
-
-
-/** Este é o principal */
-export const ToolbarCustomContent: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <matcha-toolbar>
-                <matcha-title type="icon" icon="settings-out" (iconClick)="buttonClick($event)">teste</matcha-title>
-                <matcha-toolbar-content>
-                    <button matcha-button size="small" outline="true" color="pink">Custom Content</button>
-                    <button matcha-button size="small" outline="true" color="cyan">Custom Content</button>
-                </matcha-toolbar-content>
-                <matcha-toolbar-content>
-                    <span class="color-blue lh-40 flex-center-center">Custom Content</span>
-                </matcha-toolbar-content>
-                <span class="color-red lh-40 flex-center-center">Outside of matcha-toolbar-content</span>
-            </matcha-toolbar>
-        `,
-
-    }),
-    name: 'Toolbar Custom Content',
-};
-

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

@@ -1,58 +0,0 @@
-export const tooltipArgtypes = {
-    tooltipText: {
-        description: 'Text to be displayed in the tooltip',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            defaultValue: { summary: '' },
-        },
-    },
-    tooltipDisabled: {
-        description: 'Disable the tooltip',
-        control: 'boolean',
-        defaultValue: 'false',
-        table: {
-            defaultValue: { summary: 'false' },
-        },
-    },
-    preferAbove: {
-        description: 'Prefer displaying the tooltip above the element',
-        control: 'boolean',
-        defaultValue: 'false',
-        table: {
-            defaultValue: { summary: 'false' },
-        },
-    },
-    preferBelow: {
-        description: 'Prefer displaying the tooltip below the element',
-        control: 'boolean',
-        defaultValue: 'false',
-        table: {
-            defaultValue: { summary: 'false' },
-        },
-    },
-    preferLeft: {
-        description: 'Prefer displaying the tooltip to the left of the element',
-        control: 'boolean',
-        defaultValue: 'false',
-        table: {
-            defaultValue: { summary: 'false' },
-        },
-    },
-    preferRight: {
-        description: 'Prefer displaying the tooltip to the right of the element',
-        control: 'boolean',
-        defaultValue: 'false',
-        table: {
-            defaultValue: { summary: 'false' },
-        },
-    },
-    tooltipEnableClose: {
-        description: 'Enable close button on the tooltip (useful for mobile)',
-        control: 'boolean',
-        defaultValue: 'false',
-        table: {
-            defaultValue: { summary: 'false' },
-        },
-    },
-};