matcha-components 20.13.0 → 20.15.0

package/src/lib/matcha-sort-header/sort-header.stories.ts

@@ -0,0 +1,34 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { sortHeaderArgtypes } from './sort-header.argtypes';
+import { SortOverviewExample } from './example/sort-overview-example.component';
+import { MatchaSortHeaderModule } from './sort-header.module';
+
+export default {
+    title: 'TO-DO / Sort Header',
+    component: SortOverviewExample,
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatchaSortHeaderModule],
+        }),
+    ],
+    args: {},
+    argTypes: sortHeaderArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const SortOverview: StoryObj<SortOverviewExample> = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+    }),
+    name: 'Sort Overview Example',
+};

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

@@ -0,0 +1,27 @@
+<div
+  class="matcha-spin"
+  role="progressbar"
+  [attr.aria-valuemin]="0"
+  [attr.aria-valuemax]="100"
+  [attr.aria-valuenow]="progress"
+>
+  <svg [attr.viewBox]="'0 0 ' + diameter + ' ' + diameter">
+    <circle
+      class="spin-placeholder"
+      [attr.cx]="diameter / 2"
+      [attr.cy]="diameter / 2"
+      [attr.r]="radius"
+      [attr.stroke-width]="strokeWidth"
+    />
+    <circle
+      class="spin-progress"
+      [attr.cx]="diameter / 2"
+      [attr.cy]="diameter / 2"
+      [attr.r]="radius"
+      [attr.stroke-width]="strokeWidth"
+      [attr.stroke]="color"
+      [attr.stroke-dasharray]="circumference"
+      [attr.stroke-dashoffset]="progress ? dashOffset : null"
+    />
+  </svg>
+</div>

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

@@ -0,0 +1,70 @@
+import { Component, ElementRef, Inject, Input, Renderer2 } from '@angular/core';
+
+@Component({
+  selector: 'matcha-spin',
+  standalone: false,
+  templateUrl: './spin.component.html',
+  styleUrl: './spin.component.scss'
+})
+export class MatchaSpinComponent {
+  private _progress: string | number = 0;
+  
+  @Input()
+  set progress(value: string | number) {
+    this._progress = Number(value);
+  }
+  get progress(): string | number {
+    return this._progress;
+  }
+
+  @Input() color: string = 'accent';
+  @Input('size') size: string | null = null;
+
+  @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;
+
+  readonly strokeWidth: number = 5;
+
+  constructor(
+    @Inject(ElementRef) private _elementRef: ElementRef,
+    @Inject(Renderer2) private _renderer: Renderer2
+  ) {}
+
+  ngOnInit() {
+    this._renderer.addClass(this._elementRef.nativeElement, 'matcha-spin');
+    this.setSize();
+  }
+
+  private setSize() {
+    const sizes = ['tiny', 'small', 'medium', 'large', 'huge'];
+    sizes.forEach(size => {
+      this._renderer.removeClass(this._elementRef.nativeElement, `matcha-spin-${size}`);
+    });
+
+    if (this.size) {
+      this._renderer.addClass(this._elementRef.nativeElement, `matcha-spin-${this.size}`);
+    }
+  }
+
+  get diameter(): number {
+    const rect = this._elementRef.nativeElement.getBoundingClientRect();
+    return rect.width;
+  }
+
+  get radius(): number {
+    return (this.diameter - this.strokeWidth) / 2;
+  }
+
+  get circumference(): number {
+    return 2 * Math.PI * this.radius;
+  }
+
+  get dashOffset(): number {
+    const progress = Math.min(Math.max(Number(this.progress), 0), 100);
+    return this.circumference - (progress / 100) * this.circumference;
+  }
+
+}

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

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaSpinComponent } from './spin/spin.component';
+
+
+
+@NgModule({
+  declarations: [MatchaSpinComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [MatchaSpinComponent]
+})
+export class MatchaSpinModule { }
+
+

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

@@ -0,0 +1,85 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { MatchaSpinModule } from './spin.module';
+
+export default {
+    title: 'Atoms / Spin',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+        moduleMetadata({
+            imports: [CommonModule, MatchaSpinModule],
+        }),
+    ],
+    args: {
+        progress: 40,
+        color: 'accent',
+        size: 'tiny',
+    },
+    argTypes: {
+        progress: {
+            control: { type: 'range', min: 0, max: 100, step: 1 },
+            description: 'Valor do progresso (0 a 100). Se não informado, anima como loading infinito.',
+        },
+        color: {
+            control: { type: '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'],
+            description: 'Cor do spinner baseado na paleta do tema.',
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['tiny', 'small', 'medium', 'large', 'huge'],
+            description: 'Tamanho do spinner.',
+        },
+        'size-xs': {
+            control: { type: 'select' },
+            options: ['tiny', 'small', 'medium', 'large', 'huge'],
+            description: 'Tamanho do spinner na tela xs.',
+        },
+        'size-sm': {
+            control: { type: 'select' },
+            options: ['tiny', 'small', 'medium', 'large', 'huge'],
+            description: 'Tamanho do spinner na tela sm.',
+        },
+        'size-md': {
+            control: { type: 'select' },
+            options: ['tiny', 'small', 'medium', 'large', 'huge'],
+            description: 'Tamanho do spinner na tela md.',
+        },
+        'size-lg': {
+            control: { type: 'select' },
+            options: ['tiny', 'small', 'medium', 'large', 'huge'],
+            description: 'Tamanho do spinner na tela lg.',
+        },
+        'size-xl': {
+            control: { type: 'select' },
+            options: ['tiny', 'small', 'medium', 'large', 'huge'],
+            description: 'Tamanho do spinner na tela xl.',
+        },
+    },
+    tags: ['autodocs'],
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const Playground: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+      <matcha-spin
+        ${args['progress'] ? `progress="${args['progress']}"` : ''}
+        ${args['color'] ? `color="${args['color']}"` : ''}
+        ${args['size'] ? `size="${args['size']}"` : ''}
+        ${args['size-xs'] ? `size-xs="${args['size-xs']}"` : ''}
+        ${args['size-sm'] ? `size-sm="${args['size-sm']}"` : ''}
+        ${args['size-md'] ? `size-md="${args['size-md']}"` : ''}
+        ${args['size-lg'] ? `size-lg="${args['size-lg']}"` : ''}
+        ${args['size-xl'] ? `size-xl="${args['size-xl']}"` : ''}
+      ></matcha-spin>
+    `,
+    }),
+    name: 'Spin Loading',
+};

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

@@ -0,0 +1,29 @@
+<div
+  class="matcha-spinner"
+  role="progressbar"
+  [attr.aria-valuemin]="0"
+  [attr.aria-valuemax]="100"
+  [attr.aria-valuenow]="progress"
+>
+  <svg [attr.viewBox]="'0 0 ' + diameter + ' ' + diameter" class="spinner">
+    <circle
+      class="spinner-placeholder"
+      [attr.cx]="center"
+      [attr.cy]="center"
+      [attr.r]="radius"
+      [attr.stroke-width]="strokeWidth"
+      stroke-linecap="round"
+    />
+    <circle
+      class="spinner-progress path"
+      [attr.cx]="center"
+      [attr.cy]="center"
+      [attr.r]="radius"
+      [attr.stroke-width]="strokeWidth"
+      [attr.stroke]="color"
+      [attr.stroke-dasharray]="circumference"
+      [attr.stroke-dashoffset]="dashOffset"
+      stroke-linecap="round"
+    />
+  </svg>
+</div>

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

@@ -0,0 +1 @@
+// Estilos vêm do matcha-theme/components/matcha-spinner.scss

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

@@ -0,0 +1,74 @@
+import { Component, ElementRef, HostBinding, Inject, Input, Renderer2 } from '@angular/core';
+
+@Component({
+    selector: 'matcha-spinner',
+    standalone: false,
+    templateUrl: './spinner.component.html',
+    styleUrls: ['./spinner.component.scss']
+})
+export class MatchaSpinnerComponent {
+    private _progressValue: number = 0;
+    @Input()
+    set progress(value: string | number) {
+        this._progressValue = Number(value);
+    }
+    get progress(): string | number {
+        return this._progressValue;
+    }
+
+    @HostBinding('attr.progress') get _progress() { return this.progress; }
+
+
+    @Input() color: string = 'accent';
+
+    @HostBinding('attr.color') get _color() { return this.color; }
+
+    @Input('size') size: string | null = null;
+
+    @HostBinding('attr.size')
+    get hostSize(): string | null {
+        return this.size;
+    }
+
+    @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;
+
+    // Valores fixos baseados no hard coded que funciona
+    readonly diameter = 66;
+    readonly center = 33;
+    readonly radius = 30;
+    readonly strokeWidth = 5;
+
+    constructor(
+        @Inject(ElementRef) private _elementRef: ElementRef,
+        @Inject(Renderer2) private _renderer: Renderer2
+    ) { }
+
+    ngOnInit() {
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-spinner');
+        this.setSize();
+    }
+
+    private setSize() {
+        const sizes = ['tiny', 'small', 'medium', 'large', 'huge'];
+        sizes.forEach(size => {
+            this._renderer.removeClass(this._elementRef.nativeElement, `matcha-spinner-${size}`);
+        });
+
+        if (this.size) {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-spinner-${this.size}`);
+        }
+    }
+
+    get circumference(): number {
+        return 2 * Math.PI * this.radius;
+    }
+
+    get dashOffset(): number {
+        const progress = Math.min(Math.max(Number(this.progress), 0), 100);
+        return this.circumference - (progress / 100) * this.circumference;
+    }
+}

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaSpinnerComponent } from './spinner/spinner.component';
+
+
+@NgModule({
+  declarations: [MatchaSpinnerComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [MatchaSpinnerComponent]
+})
+export class MatchaSpinnerModule { }
+
+

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

@@ -0,0 +1,85 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { MatchaSpinnerModule } from './spinner.module';
+
+export default {
+    title: 'Atoms / Spinner',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+        moduleMetadata({
+            imports: [CommonModule, MatchaSpinnerModule],
+        }),
+    ],
+    args: {
+        progress: 40,
+        color: 'accent',
+        size: 'tiny',
+    },
+    argTypes: {
+        progress: {
+            control: { type: 'range', min: 0, max: 100, step: 1 },
+            description: 'Valor do progresso (0 a 100). Se não informado, anima como loading infinito.',
+        },
+        color: {
+            control: { type: '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'],
+            description: 'Cor do spinner baseado na paleta do tema.',
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['tiny', 'small', 'medium', 'large', 'huge'],
+            description: 'Tamanho do spinner.',
+        },
+        'size-xs': {
+            control: { type: 'select' },
+            options: ['tiny', 'small', 'medium', 'large', 'huge'],
+            description: 'Tamanho do spinner na tela xs.',
+        },
+        'size-sm': {
+            control: { type: 'select' },
+            options: ['tiny', 'small', 'medium', 'large', 'huge'],
+            description: 'Tamanho do spinner na tela sm.',
+        },
+        'size-md': {
+            control: { type: 'select' },
+            options: ['tiny', 'small', 'medium', 'large', 'huge'],
+            description: 'Tamanho do spinner na tela md.',
+        },
+        'size-lg': {
+            control: { type: 'select' },
+            options: ['tiny', 'small', 'medium', 'large', 'huge'],
+            description: 'Tamanho do spinner na tela lg.',
+        },
+        'size-xl': {
+            control: { type: 'select' },
+            options: ['tiny', 'small', 'medium', 'large', 'huge'],
+            description: 'Tamanho do spinner na tela xl.',
+        },
+    },
+    tags: ['autodocs'],
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const Playground: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+      <matcha-spinner
+        ${args['progress'] ? `progress="${args['progress']}"` : ''}
+        ${args['color'] ? `color="${args['color']}"` : ''}
+        ${args['size'] ? `size="${args['size']}"` : ''}
+        ${args['size-xs'] ? `size-xs="${args['size-xs']}"` : ''}
+        ${args['size-sm'] ? `size-sm="${args['size-sm']}"` : ''}
+        ${args['size-md'] ? `size-md="${args['size-md']}"` : ''}
+        ${args['size-lg'] ? `size-lg="${args['size-lg']}"` : ''}
+        ${args['size-xl'] ? `size-xl="${args['size-xl']}"` : ''}
+      ></matcha-spinner>
+    `,
+    }),
+    name: 'Spinner Loading',
+};

package/src/lib/matcha-stepper/next-step.diretive.ts

@@ -0,0 +1,21 @@
+import { Directive, HostListener } from '@angular/core';
+import { MatchaStepperContentComponent } from './stepper-content/stepper-content.component';
+
+@Directive({
+  selector: '[nextStep]',
+  standalone: true
+})
+export class NextStepDirective {
+  private stepper: MatchaStepperContentComponent | null;
+
+  constructor(
+    stepper: MatchaStepperContentComponent | null
+  ) {
+    this.stepper = stepper;
+  }
+
+  @HostListener('click')
+  onClick() {
+    this.stepper?.nextStep();
+  }
+}

package/src/lib/matcha-stepper/prev-step.diretive.ts

@@ -0,0 +1,21 @@
+import { Directive, HostListener } from '@angular/core';
+import { MatchaStepperContentComponent } from './stepper-content/stepper-content.component';
+
+@Directive({
+  selector: '[prevStep]',
+  standalone: true
+})
+export class PrevStepDirective {
+  private stepper: MatchaStepperContentComponent | null;
+
+  constructor(
+    stepper: MatchaStepperContentComponent | null
+  ) {
+    this.stepper = stepper;
+  }
+
+  @HostListener('click')
+  onClick() {
+    this.stepper?.prevStep();
+  }
+}

package/src/lib/matcha-stepper/step/step.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'matcha-step',
+  template: `<ng-template><ng-content></ng-content></ng-template>`,
+  standalone: false
+})
+export class StepComponent {
+  @Input('title') step: any;
+  @ViewChild(TemplateRef, { static: true }) template!: TemplateRef<any>;
+}

package/src/lib/matcha-stepper/step-content.diretive.ts

@@ -0,0 +1,9 @@
+import { Directive, Input, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[step]'
+})
+export class StepContentDirective {
+  @Input('step') step!: string;
+  constructor(public template: TemplateRef<any>) {}
+}

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

@@ -0,0 +1,20 @@
+import { Component, Input, SimpleChanges } from '@angular/core';
+import { MatchaStepperStateService } from '../stepper.service';
+
+@Component({
+  selector: 'matcha-stepper',  
+  template: `<ng-content></ng-content>`,  
+  providers: [MatchaStepperStateService],
+  standalone: false
+})
+export class MatchaStepperComponent {
+  @Input() active: number = 0;
+
+  constructor(private stepperState: MatchaStepperStateService) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['active'] && typeof changes['active'].currentValue === 'number') {
+      this.stepperState.setActiveStep(this.active);
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
+import { StepComponent } from '../step/step.component';
+import { MatchaStepperStateService } from '../stepper.service';
+
+@Component({
+  selector: 'matcha-stepper-content',
+  template: `
+    <ng-container *ngIf="stepsArray.length">
+      <ng-container *ngTemplateOutlet="stepsArray[activeStep]?.template || null"></ng-container>
+    </ng-container>
+  `,
+  standalone: false
+})
+export class MatchaStepperContentComponent implements AfterContentInit {
+  @ContentChildren(StepComponent) steps!: QueryList<StepComponent>;
+  stepsArray: StepComponent[] = [];
+  activeStep = 0;
+
+  constructor(private stepperState: MatchaStepperStateService) {}
+
+  ngAfterContentInit() {
+    this.stepsArray = this.steps.toArray().sort((a, b) => {
+      const stepA = a.step !== undefined && a.step !== null && a.step !== '' ? Number(a.step) : a.step;
+      const stepB = b.step !== undefined && b.step !== null && b.step !== '' ? Number(b.step) : b.step;
+      return stepA - stepB;
+    });
+    this.stepperState.setSteps(this.stepsArray.map(s => s.step));
+    this.stepperState.activeStep$.subscribe(step => this.activeStep = step);
+  }
+
+  nextStep() {
+    this.stepperState.nextStep();
+  }
+
+  prevStep() {
+    this.stepperState.prevStep();
+  }
+}

package/src/lib/matcha-stepper/stepper-controller/stepper-controller.component.html

@@ -0,0 +1,8 @@
+<div class="flex-column flex-align-end gap-16">
+    <span class="fw-900 fs-12 lh-12">{{steps[activeStep]}}</span>
+    <div class="d-flex align-center gap-8">
+        <ng-container *ngFor="let step of steps; let i = index">
+            <div (click)="goToStep(i)" class="cursor-pointer w-32 h-8 radius-8" [class.background-accent]="i <= activeStep" [class.background-disabled]="i > activeStep"></div>          
+        </ng-container>
+    </div>
+</div>

package/src/lib/matcha-stepper/stepper-controller/stepper-controller.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatchaStepperStateService } from '../stepper.service';
+
+@Component({
+  selector: 'matcha-stepper-controller',  
+  templateUrl: './stepper-controller.component.html',
+  providers: [],
+  standalone: false
+})
+export class MatchaStepperControllerComponent implements OnInit {
+  @Input() disableNext!: boolean;
+  steps: string[] = [];
+  activeStep = 0;
+
+  constructor(private stepperState: MatchaStepperStateService) {}
+
+  ngOnInit() {
+    this.stepperState.steps$.subscribe((steps: any[]) => this.steps = steps);
+    this.stepperState.activeStep$.subscribe(step => this.activeStep = step);
+  }
+
+  goToStep(index: number) {
+    if(this.disableNext && this.activeStep < index) return;
+    this.stepperState.setActiveStep(index);
+  }
+}