matcha-components 20.15.0 → 20.17.0

package/src/lib/matcha-progress-bar/progress-bar.stories.ts

@@ -1,89 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { config } from '@storybook/addon-designs';
-
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { progressBarArgtypes } from './progress-bar.argtype';
-import { MatchaProgressBarDirective } from './progress-bar.directive';
-
-export default {
-    title: 'TO-DO / Progress bar',
-    decorators: [
-        moduleMetadata({
-            imports: [MatProgressBarModule],
-            declarations: [MatchaProgressBarDirective],
-        }),
-    ],
-    args: {
-        bufferValue: 75,
-        color: 'accent',
-        value: 25,
-    },
-    argTypes: progressBarArgtypes,
-    parameters: {
-        controls: {
-            expanded: true,
-            exclude: ['mode'],
-        },
-        design: config({
-            type: 'figma',
-            url: 'https://www.figma.com/file/Enji6Zk0UvtHyt8fdOPdBx/DS-PAINEL-(Copy)?type=design&mode=design&t=IKqH3YB1sj5qgDHJ-1',
-        }),
-    },
-} as Meta;
-
-export const ProgressBarBuffer: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <mat-progress-bar
-        matcha-progress-bar
-        [bufferValue]="bufferValue"
-        [color]="color"
-        mode="buffer"
-        [value]="value"></mat-progress-bar>
-    `,
-    }),
-    name: 'Buffer',
-};
-
-export const ProgressBarQuery: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <mat-progress-bar
-        matcha-progress-bar
-        [color]="color"
-        mode="query">
-        </mat-progress-bar>
-    `,
-    }),
-    name: 'Query',
-};
-
-export const ProgressBarIndeterminate: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <mat-progress-bar
-        matcha-progress-bar
-        [color]="color"
-        mode="indeterminate">
-        </mat-progress-bar>
-    `,
-    }),
-    name: 'Indeterminate',
-};
-
-export const ProgressBarDeterminate: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <mat-progress-bar
-        matcha-progress-bar
-        [color]="color"
-        mode="determinate"
-        [value]="value"></mat-progress-bar>
-    `,
-    }),
-    name: 'Determinate',
-};

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

@@ -1,20 +0,0 @@
-<label
-    class="matcha-radio flex-align-center"
-    [class.matcha-radio-disabled]="disabled">
-    <div
-        class="matcha-radio-container w-40 h-40 max-w-40 max-h-40 min-w-40 min-h-40 flex-center-center radius-full cursor-pointer"
-        matchaRipple>
-        <input
-            type="radio"
-            class="matcha-radio-input"
-            [attr.name]="name"
-            [value]="value"
-            [checked]="checked"
-            [disabled]="disabled"
-            (change)="onInputChange($event)">
-    </div>
-
-    <span class="matcha-radio-label fw-500 lh-20">
-        <ng-content></ng-content>
-    </span>
-</label>

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

@@ -1,84 +0,0 @@
-import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-@Component({
-  selector: 'matcha-radio',
-  templateUrl: './radio.component.html',
-  styleUrls: ['./radio.component.scss'],
-  standalone: false,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => MatchaRadioComponent),
-      multi: true
-    }
-  ]
-})
-export class MatchaRadioComponent implements ControlValueAccessor {
-  @Input() color: string = 'accent';
-  @Input() value: any = null;
-  @Input() name: string = '';
-
-  private _disabled = false;
-  @Input()
-  set disabled(value: boolean | string) {
-      this._disabled = value != null && `${value}` !== 'false';
-  }
-  get disabled(): boolean {
-      return this._disabled;
-  }
-
-  @Input()
-  get checked(): boolean {
-    return this._checked;
-  }
-  set checked(value: boolean) {
-    if (value !== this._checked) {
-      this._checked = value;
-      const outVal = this.value !== undefined ? this.value : this._checked;
-      this.onChange(outVal);
-    }
-  }
-
-  private _checked: boolean = false;
-  private _modelValue: any = null;
-
-  @Output() checkedChange = new EventEmitter<{ checked: boolean }>();
-  @Output() change = new EventEmitter<Event>();
-
-  // ControlValueAccessor methods
-  onChange: any = () => {};
-  onTouched: any = () => {};
-
-  writeValue(value: any): void {
-    this._modelValue = value;
-    this._checked = this.value !== undefined ? this.value === value : !!value;
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  onInputChange(event: Event): void {
-    if (this.disabled) return;
-
-    this.checked = true;
-    this.onTouched();
-
-    // Emitir o valor correto para o ControlValueAccessor
-    const outVal = this.value !== undefined ? this.value : this.checked;
-    this.onChange(outVal);
-
-    const eventData = { checked: this.checked };
-    this.checkedChange.emit(eventData);
-    this.change.emit(event);
-  }
-}

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

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaRippleModule } from '../matcha-ripple/ripple.module';
-import { MatchaRadioComponent } from './radio/radio.component';
-
-
-@NgModule({
-    declarations: [
-        MatchaRadioComponent,
-    ],
-    imports: [CommonModule, MatchaRippleModule],
-    exports: [
-        MatchaRadioComponent,
-    ],
-})
-export class MatchaRadioModule {}

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

@@ -1,175 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatchaRadioModule } from './radio.module';
-
-export default {
-    title: 'Atoms / Radio',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-        moduleMetadata({
-            imports: [CommonModule, FormsModule, ReactiveFormsModule, MatchaRadioModule],
-        }),
-    ],
-    args: {
-        color: 'accent',
-        disabled: false,
-        name: 'radio-group',
-        value: 'option1',
-        label: 'Radio Option',
-    },
-    argTypes: {
-        color: {
-            description: 'Theme color palette',
-            control: 'select',
-            defaultValue: 'accent',
-            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'],
-        },
-        disabled: { control: 'boolean' },
-        name: { control: 'text' },
-        value: { control: 'text' },
-        label: { control: 'text' },
-    },
-    tags: ['autodocs'],
-    parameters: { controls: { expanded: true } },
-} as Meta;
-
-export const RadioControls: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `<matcha-radio name="${args['name']}" value="${args['value']}" ${args['color'] ? `color="${args['color']}"` : ''} ${args['disabled'] ? 'disabled' : ''}>${args['label']}</matcha-radio>`,
-    }),
-    name: 'Radio Controls',
-};
-
-export const RadioColors: StoryObj = {
-    render: () => ({
-        template: `
-        <div class="grid-md-4 gap-16">
-            <div class="flex-column gap-16">
-                <matcha-radio name="g1" value="disabled" disabled>Disabled</matcha-radio>
-                <matcha-radio name="g2" value="primary" color="primary">Primary</matcha-radio>
-                <matcha-radio name="g3" value="accent" color="accent">Accent</matcha-radio>
-                <matcha-radio name="g4" value="warn" color="warn">Warn</matcha-radio>
-                <matcha-radio name="g5" value="red" color="red">Red</matcha-radio>
-                <matcha-radio name="g6" value="pink" color="pink">Pink</matcha-radio>
-            </div>
-            <div class="flex-column gap-16">
-                <matcha-radio name="g7" value="purple" color="purple">Purple</matcha-radio>
-                <matcha-radio name="g8" value="indigo" color="indigo">Indigo</matcha-radio>
-                <matcha-radio name="g9" value="blue" color="blue">Blue</matcha-radio>
-                <matcha-radio name="g10" value="cyan" color="cyan">Cyan</matcha-radio>
-                <matcha-radio name="g11" value="teal" color="teal">Teal</matcha-radio>
-                <matcha-radio name="g12" value="green" color="green">Green</matcha-radio>
-            </div>
-            <div class="flex-column gap-16">
-                <matcha-radio name="g13" value="lime" color="lime">Lime</matcha-radio>
-                <matcha-radio name="g14" value="yellow" color="yellow">Yellow</matcha-radio>
-                <matcha-radio name="g15" value="amber" color="amber">Amber</matcha-radio>
-                <matcha-radio name="g16" value="orange" color="orange">Orange</matcha-radio>
-                <matcha-radio name="g17" value="brown" color="brown">Brown</matcha-radio>
-                <matcha-radio name="g18" value="grey" color="grey">Grey</matcha-radio>
-            </div>
-        </div>
-        `,
-    }),
-    name: 'Radio Colors',
-};
-
-/**
- * ##### Typescript
- * ```ts
- * public opcaoEscolhida: string = 'opcao2';
- * ```
- */
-export const RadioTemplateDriven: StoryObj = {
-    render: () => ({
-        props: {
-            opcaoEscolhida: 'opcao2',
-        },
-        template: `
-        <div class="flex-column gap-16">
-            <h4>Template Driven Form</h4>
-            <matcha-radio name="config" [(ngModel)]="opcaoEscolhida" value="opcao1">Configuração Básica</matcha-radio>
-            <matcha-radio name="config" [(ngModel)]="opcaoEscolhida" value="opcao2" color="primary">Configuração Avançada</matcha-radio>
-            <matcha-radio name="config" [(ngModel)]="opcaoEscolhida" value="opcao3" color="warn">Configuração Premium</matcha-radio>
-            <p>Valor selecionado: <strong>{{opcaoEscolhida}}</strong></p>
-        </div>
-        `,
-    }),
-    name: 'Radio Template Driven',
-};
-
-/**
- * ##### Typescript
- * ```ts
- * public radioForm = this.fb.group({
- *     plano: ['mensal'],
- *     tema: ['claro']
- * });
- * ```
- */
-export const RadioReactiveForms: StoryObj = {
-    render: () => ({
-        props: {
-            radioForm: new FormGroup({
-                plano: new FormControl('mensal'),
-                tema: new FormControl('claro'),
-            }),
-        },
-        template: `
-        <div class="flex-column gap-16" [formGroup]="radioForm">
-            <h4>Reactive Forms</h4>
-            
-            <div class="flex-column gap-8">
-                <h5>Plano de Cobrança</h5>
-                <matcha-radio formControlName="plano" name="plano" value="mensal" color="cyan">Mensal</matcha-radio>
-                <matcha-radio formControlName="plano" name="plano" value="trimestral" color="teal">Trimestral</matcha-radio>
-                <matcha-radio formControlName="plano" name="plano" value="anual" color="green">Anual</matcha-radio>
-            </div>
-
-            <div class="flex-column gap-8">
-                <h5>Tema da Aplicação</h5>
-                <matcha-radio formControlName="tema" name="tema" value="claro" color="yellow">Tema Claro</matcha-radio>
-                <matcha-radio formControlName="tema" name="tema" value="escuro" color="grey">Tema Escuro</matcha-radio>
-                <matcha-radio formControlName="tema" name="tema" value="auto" color="blue-grey">Automático</matcha-radio>
-            </div>
-
-            <pre>{{ radioForm.value | json }}</pre>
-        </div>
-        `,
-    }),
-    name: 'Radio Reactive Forms',
-};
-
-/**
- * ##### Typescript
- * ```ts
- * public selectedOption: string = 'opcaoB';
- * ```
- */
-export const RadioEvents: StoryObj = {
-    render: () => ({
-        props: {
-            selectedOption: 'opcaoB',
-            onRadioChange(event: any) {
-                this['selectedOption'] = event.target.value;
-                console.log('Novo valor:', this['selectedOption']);
-            }
-        },
-        template: `
-        <div class="flex-column gap-16">
-            <h4>Radio com Eventos</h4>
-            <matcha-radio name="eventos" [(ngModel)]="selectedOption" value="opcaoA" color="primary" (change)="onRadioChange($event)">Opção A</matcha-radio>
-            <matcha-radio name="eventos" [(ngModel)]="selectedOption" value="opcaoB" color="accent" (change)="onRadioChange($event)">Opção B</matcha-radio>
-            <matcha-radio name="eventos" [(ngModel)]="selectedOption" value="opcaoC" color="warn" (change)="onRadioChange($event)">Opção C</matcha-radio>
-            <p>Valor atual: <strong>{{ selectedOption }}</strong></p>
-            <small>Abra o console para ver os eventos</small>
-        </div>
-        `,
-    }),
-    name: 'Radio Events',
-};

package/src/lib/matcha-ripple/ripple.directive.ts

@@ -1,71 +0,0 @@
-import { Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core';
-
-@Directive({
-    selector: '[matchaRipple]',
-    standalone: false
-})
-export class MatchaRippleDirective implements OnDestroy {
-    @Input() rippleColor: string = 'rgba(0, 0, 0, 0.5)'; // Cor padrão do efeito
-    private ripples: HTMLElement[] = [];
-
-    constructor(private el: ElementRef) {
-        // Garantir que o elemento tenha position relative
-        this.el.nativeElement.style.position = 'relative';
-        this.el.nativeElement.style.overflow = 'hidden';
-    }
-
-    @HostListener('mousedown', ['$event'])
-    onMouseDown(event: MouseEvent): void {
-        const target = this.el.nativeElement;
-        const rect = target.getBoundingClientRect();
-
-        const ripple = document.createElement('span');
-        ripple.className = 'ripple';
-
-        // Definir o tamanho do ripple baseado no maior lado do elemento
-        const size = Math.max(target.offsetWidth, target.offsetHeight);
-        ripple.style.height = ripple.style.width = size * 2 + 'px';
-
-        // Aplicar estilo básico ao ripple
-        ripple.style.backgroundColor = this.rippleColor;
-        ripple.style.position = 'absolute';
-        ripple.style.borderRadius = '50%';
-        ripple.style.opacity = '0.5';
-        ripple.style.transform = 'scale(0)';
-        ripple.style.transition = 'transform 0.6s, opacity 0.6s';
-        ripple.style.pointerEvents = 'none';
-
-        const top = event.pageY - rect.top - size + window.scrollY;
-        const left = event.pageX - rect.left - size + window.scrollX;
-
-        ripple.style.top = top + 'px';
-        ripple.style.left = left + 'px';
-
-        target.appendChild(ripple);
-        this.ripples.push(ripple);
-
-        // Inicia a animação no próximo frame
-        requestAnimationFrame(() => {
-            ripple.style.transform = 'scale(2)';
-            ripple.style.opacity = '0';
-        });
-
-        // Remove o ripple após a animação
-        setTimeout(() => {
-            if (ripple && ripple.parentElement) {
-                ripple.parentElement.removeChild(ripple);
-                this.ripples = this.ripples.filter(r => r !== ripple);
-            }
-        }, 600);
-    }
-
-    ngOnDestroy() {
-        // Limpa todos os ripples quando o componente é destruído
-        this.ripples.forEach(ripple => {
-            if (ripple && ripple.parentElement) {
-                ripple.parentElement.removeChild(ripple);
-            }
-        });
-        this.ripples = [];
-    }
-}

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

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaRippleDirective } from './ripple.directive';
-
-@NgModule({
-    declarations: [
-        MatchaRippleDirective
-    ],
-    imports: [
-        CommonModule
-    ],
-    exports: [
-        MatchaRippleDirective
-    ],
-})
-export class MatchaRippleModule { }

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

@@ -1,30 +0,0 @@
-<div class="matcha-select-container" [class.matcha-select-disabled]="disabled || isDisabled">
-  <div
-    class="matcha-select-trigger"
-    [class.matcha-select-open]="open"
-    [class.matcha-select-disabled]="disabled || isDisabled"
-    (click)="onTriggerClick()"
-    [attr.tabindex]="(disabled || isDisabled) ? -1 : 0"
-    role="combobox"
-    [attr.aria-expanded]="open"
-    [attr.aria-haspopup]="true"
-    [attr.aria-disabled]="disabled || isDisabled">
-
-    <span class="matcha-select-value" [class.matcha-select-placeholder]="!selectedValue">
-      {{ selectedValue || placeholder }}
-    </span>
-
-    <span class="matcha-select-arrow" [class.matcha-select-arrow-open]="open">
-      ▼
-    </span>
-  </div>
-
-  <matcha-panel
-    #panel
-    [placement]="placement"
-    [maxHeight]="maxHeight"
-    [minWidth]="minWidth"
-    [open]="open">
-    <ng-content></ng-content>
-  </matcha-panel>
-</div>

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

@@ -1,3 +0,0 @@
-// Estilos básicos do matcha-select
-// Os estilos principais são definidos no projeto de temas (matcha-theme/components/matcha-select.scss)
-// Este arquivo contém apenas estilos específicos do componente se necessário