matcha-components 20.15.0 → 20.17.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,26 +0,0 @@
-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);
-  }
-}