matcha-components 20.15.0 → 20.16.0

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

@@ -1,98 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { MatchaTooltipModule } from '../matcha-tooltip/tooltip.module';
-import { MatchaTitleModule } from '../matcha-title/title.module';
-import { MatchaButtonModule } from '../matcha-button/button.module';
-import { MatchaDividerModule } from '../matcha-divider/divider.module';
-import { MatchaIconModule } from '../matcha-icon/icon.module';
-import { MatchaTabsModule } from './tabs.module';
-export default {
-    title: 'Components / Tabs',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [
-                CommonModule,
-                MatchaTabsModule,
-                MatchaTitleModule,
-                MatchaTooltipModule,
-                MatchaButtonModule,
-                MatchaIconModule,
-                MatchaDividerModule
-            ],
-        }),
-    ],
-    tags: ['autodocs'],
-    args: {
-        title: 'Título do Tab',
-        icon: 'home',
-        active: false,
-        content: 'Conteúdo do Tab',
-    },
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-/**
- * Para Importar o componente, use o seguinte comando:
- *
- * ```typescript
- * import {MatchaTabsModule} from 'matcha-components/tabs';
- * ```
- */
-export const TabsControls: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <matcha-tabs>
-            <matcha-tab icon="note-out"
-                ${args['title'] ? `title="${args['title']}"` : ''}
-                ${args['icon'] ? `icon="${args['icon']}"` : ''}
-            >
-                ${args['content'] ? `<p>${args['content']}</p>` : ''}
-            </matcha-tab>
-
-            <matcha-tab title="Informações" icon="info-out" active>
-            <p>Conteúdo da Aba 2</p>
-            </matcha-tab>
-        
-            <matcha-tab title="Ingressos" icon="events-out">
-            <p>Conteúdo da Aba 3</p>
-            </matcha-tab>
-        
-            <matcha-tab title="Inscrições" icon="note-out">
-            <p>Conteúdo da Aba 4</p>
-            </matcha-tab>
-        </matcha-tabs>
-        `,
-
-    }),
-    name: 'Tabs Controls',
-};
-export const TabsDisabled: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <matcha-tabs gap="0" inactiveColor="grey" inactiveType="basic" disabled="true">
-                <matcha-tab-item>
-                    <button matcha-button alpha color="blue" size="tiny">Criar</button>
-                </matcha-tab-item>
-
-                <matcha-tab-item>
-                    <button matcha-button alpha color="blue" size="tiny" active-item>Buscar</button>
-                </matcha-tab-item>
-            </matcha-tabs>
-        `,
-
-    }),
-    name: 'Tabs Disabled',
-};

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

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

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

@@ -1,141 +0,0 @@
-import { AfterContentInit, Component, ContentChildren, Input, OnDestroy, QueryList } from '@angular/core';
-import { AbstractControl, NgControl } from '@angular/forms';
-import { Subscription } from 'rxjs';
-
-@Component({
-  selector: 'matcha-time',
-  templateUrl: './time.component.html',
-  styleUrls: ['./time.component.scss'],
-  standalone: false
-})
-export class MatchaTimeComponent implements AfterContentInit, OnDestroy {
-  @ContentChildren(NgControl, { descendants: true }) controls!: QueryList<NgControl>;
-  
-  // Adiciona inputs para integração com campos de data
-  @Input() startDateControlName?: string;
-  @Input() endDateControlName?: string;
-  
-  // Opção para desabilitar a validação quando dias são diferentes
-  @Input() allowCrossDays: boolean = false;
-
-  private startTimeControl: AbstractControl | null = null;
-  private endTimeControl: AbstractControl | null = null;
-  private startDateControl: AbstractControl | null = null;
-  private endDateControl: AbstractControl | null = null;
-  private subscription = new Subscription();
-
-  ngAfterContentInit(): void {
-    // Pega os controles projetados no template
-    const controlsArray = this.controls.toArray();
-    if (controlsArray.length >= 2) {
-      this.startTimeControl = controlsArray[0].control;
-      this.endTimeControl = controlsArray[1].control;
-      
-      // Tenta encontrar os controles de data no form parent
-      if (this.startTimeControl && this.endTimeControl && 
-          this.startDateControlName && this.endDateControlName) {
-        const formGroup = this.startTimeControl.parent;
-        if (formGroup) {
-          this.startDateControl = formGroup.get(this.startDateControlName);
-          this.endDateControl = formGroup.get(this.endDateControlName);
-        }
-      }
-
-      // Adiciona validação para os campos de tempo
-      if (this.startTimeControl && this.endTimeControl) {
-        this.subscription.add(
-          this.startTimeControl.valueChanges.subscribe(() => this.validateTimeRange())
-        );
-        this.subscription.add(
-          this.endTimeControl.valueChanges.subscribe(() => this.validateTimeRange())
-        );
-      }
-      
-      // Adiciona validação para os campos de data, se existirem
-      if (this.startDateControl && this.endDateControl) {
-        this.subscription.add(
-          this.startDateControl.valueChanges.subscribe(() => this.validateTimeRange())
-        );
-        this.subscription.add(
-          this.endDateControl.valueChanges.subscribe(() => this.validateTimeRange())
-        );
-      }
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
-
-  /**
-   * Validação de intervalo de tempo que pode cruzar dias
-   */
-  private validateTimeRange(): void {
-    if (!this.startTimeControl || !this.endTimeControl) return;
-    if (!this.startTimeControl.value || !this.endTimeControl.value) return;
-
-    let startDateTime: Date;
-    let endDateTime: Date;
-    
-    // Se temos controles de data, usamos as datas fornecidas
-    if (this.startDateControl?.value && this.endDateControl?.value) {
-      const startDate = this.startDateControl.value;
-      const endDate = this.endDateControl.value;
-      
-      startDateTime = new Date(`${startDate}T${this.startTimeControl.value}`);
-      endDateTime = new Date(`${endDate}T${this.endTimeControl.value}`);
-      
-      // Comparação de data + hora
-      if (startDateTime > endDateTime) {
-        this.setValidationErrors();
-      } else {
-        this.clearValidationErrors();
-      }
-    } 
-    // Sem controles de data, ou se allowCrossDays=true, não validamos cruzamento de dias
-    else if (this.allowCrossDays) {
-      // Nesse caso, assumimos que o intervalo é válido mesmo se hora final < hora inicial
-      this.clearValidationErrors();
-    } 
-    // Caso tradicional: mesmo dia, validação simples de hora
-    else {
-      const today = new Date().toISOString().split('T')[0];
-      startDateTime = new Date(`${today}T${this.startTimeControl.value}`);
-      endDateTime = new Date(`${today}T${this.endTimeControl.value}`);
-      
-      if (startDateTime > endDateTime) {
-        this.setValidationErrors();
-      } else {
-        this.clearValidationErrors();
-      }
-    }
-  }
-  
-  /**
-   * Define erros de validação nos controles
-   */
-  private setValidationErrors(): void {
-    this.startTimeControl?.setErrors({ ['startAfterEnd']: true });
-    this.endTimeControl?.setErrors({ ['endBeforeStart']: true });
-  }
-  
-  /**
-   * Remove erros específicos de validação
-   */
-  private clearValidationErrors(): void {
-    this.removeSpecificError(this.startTimeControl, 'startAfterEnd');
-    this.removeSpecificError(this.endTimeControl, 'endBeforeStart');
-  }
-
-  /**
-   * Remove um erro específico sem afetar outros erros
-   */
-  private removeSpecificError(control: AbstractControl | null, errorName: string): void {
-    if (!control) return;
-    const errors = { ...control.errors };
-    if (errors) {
-      delete errors[errorName];
-      control.setErrors(Object.keys(errors).length ? errors : null);
-    }
-  }
-}

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

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatchaTimeComponent } from './time/time.component';
-
-@NgModule({
-  declarations: [MatchaTimeComponent],
-  imports: [
-    CommonModule,
-    ReactiveFormsModule
-  ],
-  exports: [MatchaTimeComponent]
-})
-export class MatchaTimeModule { }

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

@@ -1,244 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { MatchaTimeModule } from './time.module';
-import { MatchaDateModule } from '../matcha-date/date.module';
-import { MatchaFormFieldModule } from '../matcha-form-field/matcha-form-field.module';
-
-export default {
-    title: 'Components / Time',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [
-                CommonModule,
-                ReactiveFormsModule,
-                MatchaTimeModule,
-                MatchaDateModule,
-                MatchaFormFieldModule,
-            ],
-        }),
-    ],
-    tags: ['autodocs'],
-    args: {
-        color: 'primary',
-        labelColor: 'blue-grey',
-        startLabel: 'Hora inicial',
-        endLabel: 'Hora final',
-        startLabelError: 'Hora inicial inválida',
-        endLabelError: 'Hora final inválida',
-        startDateLabel: 'Data inicial',
-        endDateLabel: 'Data final',
-        allowCrossDays: true,
-    },
-    argTypes: {
-        color: {
-            description: 'Color theme for form fields',
-            control: 'select',
-            options: [
-                'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 
-                'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 
-                'yellow', 'amber', 'orange', 'deep-orange', 'primary', 'accent', 
-                'warn', 'brown', 'grey', 'blue-grey'
-            ],
-            table: {
-                type: { summary: 'string' },
-                category: 'Form Field Props',
-                defaultValue: { summary: 'grey' },
-            },
-        },
-        labelColor: {
-            description: 'Color of the label',
-            control: 'select',
-            options: ['primary', 'accent', 'warn', 'blue-grey', 'black'],
-            table: {
-                type: { summary: 'string' },
-                category: 'Label Props',
-            },
-        },
-        startLabel: {
-            description: 'Label for the start time input',
-            control: 'text',
-            table: {
-                type: { summary: 'string' },
-                category: 'Label Props',
-            },
-        },
-        endLabel: {
-            description: 'Label for the end time input',
-            control: 'text',
-            table: {
-                type: { summary: 'string' },
-                category: 'Label Props',
-            },
-        },
-        startLabelError: {
-            description: 'Error message for the start time input',
-            control: 'text',
-            table: {
-                type: { summary: 'string' },
-                category: 'Error Props',
-            },
-        },
-        endLabelError: {
-            description: 'Error message for the end time input',
-            control: 'text',
-            table: {
-                type: { summary: 'string' },
-                category: 'Error Props',
-            },
-        },
-        startDateLabel: {
-            description: 'Label for the start date input',
-            control: 'text',
-            table: {
-                type: { summary: 'string' },
-                category: 'Date Props',
-            },
-        },
-        endDateLabel: {
-            description: 'Label for the end date input',
-            control: 'text',
-            table: {
-                type: { summary: 'string' },
-                category: 'Date Props',
-            },
-        },
-        allowCrossDays: {
-            description: 'Allow time selection across different days',
-            control: 'boolean',
-            table: {
-                type: { summary: 'boolean' },
-                category: 'Time Props',
-            },
-        },
-    },
-    parameters: {
-        controls: { 
-            expanded: true,
-            sort: 'requiredFirst',
-        },
-    },
-} as Meta;
-
-/**
- * Para Importar o componente, use o seguinte comando:
- *
- * ```typescript
- * import {MatchaTimeModule} from 'matcha-components/time';
- * ```
- */
-export const TimeRangeBasic: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-            timeRangeForm: new FormGroup({
-                startTime: new FormControl(''),
-                endTime: new FormControl('')
-            }),
-            get startTime() { return this['timeRangeForm'].get('startTime'); },
-            get endTime() { return this['timeRangeForm'].get('endTime'); }
-        },
-        template: `
-            <form [formGroup]="timeRangeForm">
-                <matcha-time>
-                    <matcha-form-field 
-                        class="w-100-p" 
-                        [color]="color">
-                        <matcha-label [color]="labelColor">{{startLabel}}</matcha-label>
-                        <input type="time" formControlName="startTime">
-                        <matcha-error>
-                            {{startLabelError}}
-                        </matcha-error>
-                    </matcha-form-field>
-
-                    <matcha-form-field 
-                        class="w-100-p" 
-                        [color]="color">
-                        <matcha-label [color]="labelColor">{{endLabel}}</matcha-label>
-                        <input type="time" formControlName="endTime">
-                        <matcha-error>
-                            {{endLabelError}}
-                        </matcha-error>
-                    </matcha-form-field>
-                </matcha-time>
-            </form>
-        `,
-    }),
-    name: 'Time Range Basic',
-};
-
-export const DateTimeRangeCombined: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-            dateTimeForm: new FormGroup({
-                startDate: new FormControl(''),
-                endDate: new FormControl(''),
-                startTime: new FormControl(''),
-                endTime: new FormControl('')
-            }),
-            get startDate() { return this['dateTimeForm'].get('startDate'); },
-            get endDate() { return this['dateTimeForm'].get('endDate'); },
-            get startTime() { return this['dateTimeForm'].get('startTime'); },
-            get endTime() { return this['dateTimeForm'].get('endTime'); }
-        },
-        template: `
-            <form [formGroup]="dateTimeForm">
-                <div class="d-flex flex-column gap-16">
-                    <matcha-date>
-                        <matcha-form-field 
-                            class="w-100-p" 
-                            [color]="color">
-                            <matcha-label [color]="labelColor">{{startDateLabel}}</matcha-label>
-                            <input type="date" formControlName="startDate">
-                            <matcha-error *ngIf="startDate?.errors?.['startAfterEnd']">
-                                A data inicial não pode ser posterior a final
-                            </matcha-error>
-                        </matcha-form-field>
-
-                        <matcha-form-field 
-                            class="w-100-p" 
-                            [color]="color">
-                            <matcha-label [color]="labelColor">{{endDateLabel}}</matcha-label>
-                            <input type="date" formControlName="endDate">
-                            <matcha-error *ngIf="endDate?.errors?.['endBeforeStart']">
-                                A data final não pode ser anterior a inicial
-                            </matcha-error>
-                        </matcha-form-field>
-                    </matcha-date>
-                    
-                    <matcha-time 
-                        startDateControlName="startDate" 
-                        endDateControlName="endDate"
-                        [allowCrossDays]="allowCrossDays">
-                        <matcha-form-field 
-                            class="w-100-p" 
-                            [color]="color">
-                            <matcha-label [color]="labelColor">{{startLabel}}</matcha-label>
-                            <input type="time" formControlName="startTime">
-                            <matcha-error *ngIf="startTime?.errors?.['startAfterEnd']">
-                                {{startLabelError}}
-                            </matcha-error>
-                        </matcha-form-field>
-
-                        <matcha-form-field 
-                            class="w-100-p" 
-                            [color]="color">
-                            <matcha-label [color]="labelColor">{{endLabel}}</matcha-label>
-                            <input type="time" formControlName="endTime">
-                            <matcha-error *ngIf="endTime?.errors?.['endBeforeStart']">
-                                {{endLabelError}}
-                            </matcha-error>
-                        </matcha-form-field>
-                    </matcha-time>
-                </div>
-            </form>
-        `,
-    }),
-    name: 'Date Time Range Combined',
-};

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

@@ -1,8 +0,0 @@
-<!-- <matcha-title size="1" type="bullet"></matcha-title> -->
-
-<div class="d-flex flex-align-center m-0">
-    <span [class]="signClasses" [class.cursor-pointer]="hasIconClickOutput()" (click)="emitIconAction()"></span>
-    <span [class]="textClasses">
-        <ng-content></ng-content>
-    </span>
-</div>

package/src/lib/matcha-title/title/title.component.scss

@@ -1,5 +0,0 @@
-
-
-
-
-

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

@@ -1,73 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-export interface ILevelClasses {
-    [key: number | string]: string;
-}
-
-// matcha-title <matcha-title color="fg" size="1" loading="false" type="pill" icon="icon" (iconClick)="emitIconAction($event)"></matcha-title>
-
-@Component({
-    selector: 'matcha-title',
-    templateUrl: './title.component.html',
-    styleUrls: ['./title.component.scss'],
-    standalone: false
-})
-export class MatchaTitleComponent {
-    @Input()
-    color: null | string = null;
-
-    @Input()
-    size: number | string = 4;
-
-    @Input()
-    loading: boolean = false;
-
-    @Input()
-    type: 'pill' | 'bullet' | 'icon' | 'none' = 'pill';
-
-    @Input()
-    icon: string = '';
-
-    @Output() iconClick = new EventEmitter<object>();
-
-
-    public sizeClasses: ILevelClasses = {
-        1: 'fw-900 fs-12 lh-12',
-        2: 'fw-900 fs-14 lh-16',
-        3: 'fw-900 fs-16 lh-18',
-        4: 'fw-900 fs-20 lh-22',
-        5: 'fw-900 fs-32 lh-32',
-        6: 'fw-900 fs-40 lh-40',
-        7: 'fw-900 fs-40 lh-40',
-    };
-
-    public getTypes(): string {
-        const color = this.color ? `background-${this.color} ` : 'background-fg';
-        const icon = this.icon ? `i-matcha-${this.icon}` : '';
-        return  this.type === 'pill' ? `min-h-20 h-20 max-h-20 max-w-8 w-8 min-w-8 position-relative mr-8 radius-8 ${color}` :
-                this.type === 'bullet' ? `min-h-8 h-8 max-h-8 max-w-8 w-8 min-w-8 position-relative mr-8 radius-8 ${this.color ? `background-${this.color}` : 'background-fg'}` :
-                this.type === 'icon' ? `position-relative mr-8 radius-8 ${icon} ${this.color ? `color-${this.color}` : 'color-grey'}` :
-                this.type === 'none' ? `d-none--force` : '';
-    }
-
-    public get signClasses(): string {
-        const activeClasses = `d-flex ${this.getTypes()} ${this.loading ? 'loading' : ''}`;
-        return activeClasses;
-    }
-
-    public get textClasses(): string {
-        const classes = `d-inline-block position-relative mr-8 radius-8`;
-        const size = this.sizeClasses[this.size] ? this.sizeClasses[this.size] : '';
-        const activeClasses = `${classes}  ${size} ${this.loading ? 'loading' : ''}`;
-        return activeClasses;
-    }
-
-    public emitIconAction(): void {
-        const data:object = { icon: this.icon };
-        this.iconClick.emit(data);
-    }
-
-    public hasIconClickOutput(): boolean {
-        return this.iconClick.observers.length > 0;
-    }
-}

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

@@ -1,69 +0,0 @@
-export const titleArgtypes = {
-    color: {
-        descripttion: 'Color is for some types of title that need to be colored. The color options is the basic color palette of the theme.',
-        control: 'select',
-        defaultValue: 'fg',
-        table: {
-            defaultValue: { summary: 'fg' },
-        },
-        options: ['fg', 'accent', 'primary', 'warn', 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange'],
-    },
-
-    size: {
-        description: 'The size of the title.',
-        defaultValue: 4,
-        table: {
-            type: { summary: 'number | string' },
-            defaultValue: { summary: '4' },
-        },
-        control: {
-            type: 'range',
-            min: 1,
-            max: 7,
-            step: 1,
-        },
-    },
-
-    type: {
-        description: 'The type of the title.',
-        defaultValue: 'pill',
-        control: 'select',
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: 'pill' },
-        },
-        options: ['pill', 'bullet', 'icon', 'none']
-    },
-
-    icon: {
-        description: 'The icon of the title.',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: '' },
-        },
-        control: {
-            type: 'text',
-        },
-    },
-
-    iconClick: {
-        description: 'The event when the icon is clicked.',
-        table: {
-            type: { summary: 'object' },
-        },
-    },
-
-    content: {
-        description: 'Write something here.',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: '' },
-        },
-        control: {
-            type: 'text',
-        },
-    },
-
-};

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

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaTitleComponent } from './title/title.component';
-
-@NgModule({
-    declarations: [MatchaTitleComponent],
-    imports: [CommonModule],
-    exports: [MatchaTitleComponent],
-})
-export class MatchaTitleModule {}