matcha-components 20.12.0 → 20.15.0

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

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

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

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

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

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

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

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

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

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